Finalize InferScale-Sim

README.md

@@ -11,426 +11,238 @@ short_description: Interactive LLM serving simulator and SLO planner
 
 # InferScale-Sim
 
-**Interactive LLM serving-systems laboratory written in Python and executed entirely in the browser.**
+A browser-based research workbench for studying LLM serving systems without provisioning a GPU.
 
-InferScale-Sim studies a systems question:
+The simulator is written in Python. Hugging Face serves a static site; Pyodide runs the same `src/inferscale` package inside a Web Worker on the visitor's CPU. There is no backend service, model download, API key, or server-side accelerator.
 
-> How do workload shape, batching, scheduling, KV-cache pressure, reusable prefixes, topology, and resource allocation change tail latency, goodput, and sustainable serving capacity?
+> **Timing scope.** The bundled L4/A10G/A100 profiles are analytical references, not measured hardware benchmarks. Queueing, scheduling, KV-cache, transfer, SLO, and policy behavior is simulated live. Hardware claims require imported measurements and held-out validation.
 
-The public Hugging Face Space uses **no server CPU, no GPU, no API key, and no inference provider**. Hugging Face serves static files; Pyodide executes the same Python package used by the local test suite inside a Web Worker on the visitor's ordinary CPU.
+## Research question
 
-> [!IMPORTANT]
-> InferScale-Sim ships with **analytical reference latency profiles**, not measured GPU calibration data. Queueing, scheduling, cache, transfer, SLO, and design-space behavior is simulated live. Absolute L4/A10G/A100 milliseconds must not be presented as empirical hardware benchmarks.
+InferScale asks how serving-policy choices interact with workload shape and resource constraints:
 
-## Why simulation?
+- when continuous batching or chunked prefill changes tail latency;
+- when prefill/decode disaggregation helps enough to justify extra accelerators and KV transfer;
+- when reusable prefixes improve goodput versus consume scarce cache capacity;
+- how stateful agent sessions change KV-retention and routing decisions;
+- whether online prediction improves serving outcomes, not merely prediction accuracy;
+- which conclusions remain stable across matched workload seeds and timing uncertainty.
 
-Exhaustive serving-system exploration is expensive. Microsoft's **Vidur** reported finding a LLaMA2-70B deployment configuration in roughly one CPU-hour while estimating that deployment-based exploration would require about **42,000 GPU-hours (~$218K)**; the paper reports inference-latency prediction error below 9% in its evaluated settings.
+The motivation is practical. Microsoft's [Vidur](https://arxiv.org/abs/2405.05465) reported an example LLaMA2-70B configuration search that took roughly one CPU-hour through simulation versus an estimated 42,000 GPU-hours (~$218K) using deployment-based exploration.
 
-The research direction has continued rapidly. Recent work includes GPU-free serving emulation, heterogeneous and disaggregated simulation, stateful/agentic workloads, open-loop load replay, and SLA-aware design-space exploration. InferScale-Sim is deliberately smaller: dependency-light, inspectable Python intended to expose the reasoning behind serving-system trade-offs rather than hide them behind a production runtime.
+## What is implemented
 
-## What is simulated
+### Stateless serving
 
-### Workloads
+- open-loop constant, Poisson, bursty, and exact trace-replay workloads;
+- static and continuous batching;
+- FCFS, shortest-job-first, least-slack/SLO-aware scheduling;
+- chunked prefill;
+- paged KV-cache accounting and memory admission;
+- controlled shared-prefix reuse;
+- colocated and prefill/decode-disaggregated topologies;
+- independent P/D worker counts, accelerator profiles, and serialized KV-transfer cost;
+- TTFT, TPOT, E2E, queueing, throughput, goodput, SLO attainment, and KV telemetry.
 
-- deterministic constant, Poisson, and bursty **open-loop** arrivals
-- log-normal prompt/output-length distributions
-- exact **CSV/JSON trace replay** using supplied arrival times and token lengths
-- shared seeds for controlled A/B experiments
-- stateful multi-turn agent sessions with ordered turn dependencies and explicit tool-call gaps
+### Stateful sessions
 
-Generated load is open-loop: arrivals are scheduled independently of response completion so queueing delay remains visible under overload. Trace replay accepts:
+- multi-turn session dependencies separated by sampled tool gaps;
+- HBM retention, TTL expiry, host-memory offload/restore, and pressure eviction;
+- least-load, strict-affinity, and bounded-affinity routing;
+- cross-turn cache hits, history recomputation, HBM/host GB-seconds, and session SLOs;
+- online global/per-tool EWMA tool-gap prediction under a controlled distribution shift.
 
-```text
-arrival_time,prompt_tokens,output_tokens
-0.000,512,64
-0.137,233,41
-0.284,1024,128
-```
-
-### Serving loop
-
-- static batching baseline
-- continuous batching with FCFS
-- shortest-job-first scheduling
-- least-slack/SLO-aware scheduling
-- chunked prefill
-- paged KV-cache accounting and VRAM admission control
-- controlled exact-prefix reuse
-- colocated or prefill/decode-disaggregated topology
-- independent P/D worker counts and accelerator profiles
-- explicit serialized KV-transfer model
-- FP16 / INT8 / INT4 weight-footprint scenarios
-
-### Metrics
-
-- TTFT, TPOT, E2E, and queue-latency percentiles
-- request and output-token throughput
-- **goodput**: SLO-compliant completed requests per simulated second
-- TTFT/E2E SLO attainment
-- peak KV usage and virtual utilization
-- prefix-cache hit rate / saved prefill work
-- P/D transfer latency / transfer volume / role utilization
-- heuristic bottleneck diagnoses with explicit simulator provenance
-- cross-turn KV hit rate, recomputed history tokens, routing locality, HBM/host GB-seconds, TTL/pressure evictions, and explicit host-tier transfer latency for stateful sessions
-- online tool-gap prediction MAE, oracle-action agreement, and pre/post-shift adaptation diagnostics
-- online agent-role transition accuracy, prefix-prefetch precision/coverage, wrong-step transfer volume, prefix-cache residency, and pre/post-shift execution-learning diagnostics
-
-## Interactive experiments
-
-### Serving Lab
-
-Run one workload through a colocated or P/D system and inspect request-level behavior, queue/KV timelines, latency distributions, prefix reuse, and bottleneck diagnostics.
-
-### Scheduler Arena
-
-Run every colocated scheduler against the **same deterministic workload** and compare goodput, SLO attainment, tail latency, KV pressure, and unfinished work.
-
-### Capacity Planner
-
-Perform repeated SLO-constrained binary search for the highest sustainable offered rate. A rate passes only if **every repetition** meets the requested SLO attainment and drains all generated requests. The search exposes mean attainment, worst repetition, target, and min/max range.
-
-### Modern Serving Lab
-
-Compare the same workload across:
+### Execution learning
 
-1. colocated
-2. colocated + prefix reuse
-3. P/D disaggregated
-4. P/D disaggregated + prefix reuse
+- online first-order role-transition learning with no future-trace lookahead;
+- cumulative and decayed transition models;
+- confidence-gated top-1 prefetch;
+- multi-step transition rollout and top-k prefetch;
+- utility-aware prefetch using transfer and forecast-weighted eviction costs;
+- Brier score, log loss, ECE, reliability diagrams, future-role recall@K, prefetch utilization, and speculative-transfer waste;
+- confidence, forgetting-rate, forecast-horizon, and cache-budget studies.
 
-Raw goodput and goodput-per-accelerator are reported separately so extra simulated hardware is not treated as free.
+### Research consolidation
 
-### Design Explorer
+- common-random-number A/B experiments;
+- paired bootstrap intervals;
+- timing-model sensitivity analysis;
+- repeated-seed policy ranking;
+- Pareto stability across latency, HBM residency, and unused speculative transfer;
+- a bounded full-trace serving oracle over a declared policy/action-plan family;
+- per-policy regret to that bounded reference;
+- vLLM/SGLang-style measurement import, calibration, and held-out validation hooks;
+- Markdown/JSON/CSV/PNG research-artifact export.
 
-Run a bounded live sweep across scheduler, batch size, prefix caching, and P/D worker splits. InferScale reports two non-dominated frontiers:
+## Reference result
 
-- **performance:** maximize goodput while minimizing p95 TTFT
-- **efficiency:** maximize goodput per accelerator while minimizing p95 TTFT
+The repository includes a deterministic 12-seed analytical-reference consolidation study in [`reports/reference_consolidation.md`](reports/reference_consolidation.md).
 
-### Agent Sessions
-
-Model stateful multi-turn programs rather than isolated requests. Each program has ordered LLM turns separated by tool-call gaps. The simulator tracks cross-turn KV residency on multiple replicas, routing locality, TTL expiry, pressure eviction, recomputation after cache loss, and memory-time residency.
-
-Eight live experiments are included:
-
-1. **Session run:** inspect one retention/routing policy on a generated program trace.
-2. **Session Policy Arena:** replay the exact same program trace through simple stateless/retention baselines.
-3. **TTL frontier:** sweep KV retention time under common random numbers and expose the non-dominated trade-off between p95 turn TTFT and mean resident KV.
-4. **Agent Memory Lab:** compare HBM retention, bounded affinity, host-memory offload, and an explicitly labeled oracle gap-aware tiering upper bound.
-5. **Finite-HBM budget stress:** derive per-replica KV budgets from the trace's unconstrained working set and rerun tiering policies under deliberate memory pressure.
-6. **Affinity Frontier:** sweep the queue-delay slack that bounded-affinity routing is willing to pay for cache locality.
-7. **Predictive Tiering Lab:** replace the clairvoyant gap-aware policy with online global/per-tool EWMA predictors that learn only from completed tool calls, then compare them on a non-stationary program trace.
-8. **Adaptation-rate sweep:** vary the EWMA update rate on the exact same shifted trace to expose the stability-versus-reactivity trade-off.
-
-Agent mode intentionally uses a serial service station per replica. The existing Serving Lab models batching; Agent Sessions isolates program dependencies, cache locality, tool gaps, and state-management decisions so those effects are interpretable rather than conflated.
-
-### Predictive tiering without future leakage
-
-The adaptive KV policy does **not** read the sampled future tool duration when it decides whether to retain state in HBM or offload it. Retained adaptive state is also bounded by the configured KV safety TTL, so a bad short-gap prediction cannot pin HBM indefinitely. Each completed tool call emits a later observation event; only then is its duration added to the online predictor. Two transparent predictors are available:
-
-- a global EWMA over all completed tools;
-- a per-tool EWMA that falls back to the global estimate during warm-up.
-
-The Predictive Tiering Lab deliberately changes the duration distribution of slower external tools partway through one shared trace. It compares fixed TTL, unconditional host offload, global prediction, per-tool prediction, and an explicitly labeled oracle upper bound. Prediction error and serving outcomes are shown together so a lower forecasting error is not automatically treated as a better systems policy.
-
-### Execution Learning
-
-Model dynamic multi-agent workflows as a sequence of reusable agent roles rather than only a sequence of tool durations. The default synthetic workflow has structured transitions among `planner`, `retriever`, `reasoner`, `verifier`, and `writer`, then deliberately changes its transition matrix partway through the study.
-
-The simulator maintains a bounded shared HBM cache for each role's reusable static prefix. A first-order transition model is updated **only after the next role is observed**. The learned matrix can now be rolled forward for several steps without reading the future trace. Single-run policies include learn-only, cumulative/decayed top-1 prefetch, multi-step top-k prefetch, a utility-aware multi-step planner, and explicitly labeled oracle information bounds.
-
-The utility-aware planner estimates, for each candidate role:
-
-```text
-expected discounted reuse benefit
-- host-to-HBM transfer time
-- forecast-weighted recomputation cost of prefixes that would be evicted
-```
+| Policy | Median p95 TTFT | TTFT wins | Pareto stability | Median oracle regret |
+|---|---:|---:|---:|---:|
+| Top-1 decayed | 6,474.9 ms | 41.7% | 75.0% | 59.3 ms |
+| No prefetch | 6,490.7 ms | 41.7% | **91.7%** | **34.7 ms** |
+| Utility-aware multi-step | 6,507.5 ms | 8.3% | 58.3% | 133.1 ms |
+| Multi-step top-k | 6,640.3 ms | 8.3% | 83.3% | 215.0 ms |
 
-This is intentionally a transparent reference objective rather than a learned black-box policy.
+`Top-1 decayed` is the robust TTFT winner under the configured ranking protocol, while `No prefetch` is Pareto-stable on more seeds and has lower median regret to the bounded oracle. The point is not to collapse the study to one score: prediction quality, latency, speculative transfer, and HBM pressure can prefer different policies.
 
-Six controlled experiments separate prediction quality from systems quality:
+The bounded oracle searches 19 candidate plans per seed and has median p95 TTFT **6,408.6 ms** in this reference study. It is an information upper bound over that declared family, not a proof of globally optimal cache scheduling.
 
-- **Prefetch Policy Study:** compare no prefetch, cumulative counts, decayed counts, and a clairvoyant next-role information bound on one common shifted workflow trace;
-- **Confidence Threshold Study:** trade prefetch coverage against precision, wrong-step traffic, cache pollution, and TTFT;
-- **Forgetting-Rate Study:** vary how quickly old transitions are forgotten after the workflow changes;
-- **Prefetch Planning Study:** compare one-step, multi-step top-k, utility-aware multi-step, and a clairvoyant future-set information bound;
-- **Forecast Horizon Study:** sweep how many future workflow steps the online planner rolls forward;
-- **Cache Budget Study:** compare top-1, multi-step, and utility-aware planning under multiple working-set-relative HBM budgets.
+## Interface map
 
-Prediction diagnostics now include top-1 accuracy, Brier score, multiclass log loss, expected calibration error (ECE), and pre/post-shift calibration. Serving diagnostics separately track forecast-set recall, immediate next-step precision, eventual prefetch utilization, unused prefetch volume, cache hits, HBM residency, and p95 latency. A predictor can therefore become better calibrated or more accurate without automatically being declared a better serving policy.
+The public Space is organized as a research tool rather than a product dashboard:
 
-The oracle candidates are **clairvoyant information bounds**, not guaranteed upper bounds on serving performance: perfect local future information can still trigger globally poor cache or transfer decisions. That distinction is intentional.
-
-Single Agent Session runs, Predictive Tiering studies, adaptation sweeps, and Execution Learning studies all support JSON artifact export in addition to CSV/table export where applicable.
-
-### Research Studies
-
-This is the statistical/research layer rather than another configuration dashboard.
-
-**Paired Monte Carlo A/B studies** currently support:
-
-- prefix reuse off vs on
-- colocated vs P/D topology
-- continuous FCFS vs chunked prefill
-- continuous FCFS vs least-slack/SLO-aware scheduling
-
-Baseline and treatment use **common random numbers**: each repetition gets the same seed and therefore the same generated workload. InferScale reports paired mean deltas, relative effects, treatment win rate, and a **95% bootstrap interval over paired deltas**.
-
-**Model-uncertainty stress testing** then perturbs analytical prefill, decode, and transfer timing scales jointly for both alternatives. The purpose is not to assign a probability distribution to real GPUs; it asks a narrower scientific question:
-
-> Does the qualitative conclusion survive plausible multiplicative error in the analytical reference profile?
-
-This makes profile uncertainty visible rather than allowing one uncalibrated proxy to silently determine the winner.
-
-### Research Summary
-
-This is the feature-freeze/consolidation layer. It turns nominal single-trace comparisons into repeated evidence and gives the analytical latency model a direct path to external falsification.
-
-**Robust policy ranking** repeats the Execution Learning policy comparison across matched workload seeds. For every deployable policy InferScale reports:
-
-- median and mean p95 step TTFT;
-- a 95% bootstrap interval over seed-level TTFT;
-- fraction of seeds on which the policy wins TTFT;
-- **Pareto stability**: fraction of seeds on which it is non-dominated over TTFT, unused speculative prefetch, and mean prefix-HBM residency;
-- worst-seed TTFT;
-- regret to a bounded offline serving oracle.
-
-The offline reference is deliberately constrained. On every complete trace it exhaustively evaluates the deployable candidates plus clairvoyant future-set plans for forecast horizons `H=1..5` and prefetch widths `K=1..3`, all under the same cache capacity and transfer bandwidth. The best full-trace outcome becomes the per-seed information upper bound. It is **not** presented as proof of globally optimal action scheduling.
-
-**Measurement import and held-out calibration** accepts:
-
-- current `vllm bench serve` JSON results;
-- SGLang `bench_serving` JSON/JSONL results;
-- explicit InferScale validation-case bundles.
-
-Artifacts are normalized into simulator cases. A simple robust calibration fits global prefill/decode timing multipliers on training cases only, then reports held-out residuals and MAPE. With fewer than three cases, InferScale falls back to resubstitution and marks that weaker validation mode explicitly. Calibration can correct global timing bias; it does not prove unseen-model, unseen-hardware, or scheduler fidelity.
-
-**Markdown report export** turns the robust policy study and optional held-out calibration into a portable research artifact with protocol, ranking, oracle definition, validation results, and interpretation guardrails.
-
-`reports/reference_consolidation.md` is generated from the default analytical-reference configuration across 12 matched seeds. It is a simulator reference result, **not** measured GPU evidence.
-
-The public demo ships no invented empirical benchmark truth. External measurement data must be supplied by the user or collected independently.
+| Section | Purpose |
+|---|---|
+| **Serving** | Inspect one workload and request-level behavior. |
+| **Schedulers** | Compare colocated schedulers on an identical trace. |
+| **Capacity** | Find the highest repeated SLO-compliant offered load. |
+| **P/D + Cache** | Compare colocated/P-D serving with and without prefix reuse. |
+| **Design Space** | Sweep bounded configurations and inspect performance/efficiency Pareto fronts. |
+| **A/B Studies** | Run paired bootstrap and timing-sensitivity experiments. |
+| **Stateful Sessions** | Study KV retention, host offload, affinity, and tool-gap prediction. |
+| **Execution Model** | Study transition learning, multi-step prefetch, calibration, and cache pressure. |
+| **Evidence** | Run repeated-seed consolidation and import external measurements. |
+| **Methods** | Read the simulator assumptions and research lineage. |
 
 ## Architecture
 
 ```text
-                         Hugging Face Static Space
-                                  |
-                                  | serves files only
-                                  v
-+------------------------------------------------------------------+
-| Browser                                                          |
-|                                                                  |
-| UI / Chart.js                    Pyodide Web Worker               |
-|       |                                  |                        |
-|       +--------------------------------->|                        |
-|                                          v                        |
-|                               Python inferscale package           |
-|                                          |                        |
-|       +------------------+---------------+------------------+     |
-|       |                  |               |                  |     |
-|   workloads          schedulers       KV/cache          profiles  |
-|       |                  |               |                  |     |
-|       +------------------+---------------+------------------+     |
-|                                          |                        |
-|                  +-----------------------+------------------+     |
-|                  |                                          |     |
-|          colocated simulator                       P/D simulator  |
-|                                                      |           |
-|                                         prefill -> transfer -> decode
-|                  |                                          |     |
-|                  +-----------------------+------------------+     |
-|                                          v                        |
-|                  metrics / search / research / agent sessions / online prediction       |
-+------------------------------------------------------------------+
-```
-
-The discrete-event engine never sleeps for simulated compute time. If the analytical model predicts a 40 ms operation, virtual time advances by 0.040 seconds immediately.
-
-## Core modeling choices
-
-### Goodput
-
-```text
-goodput = requests satisfying TTFT and E2E SLOs / simulated makespan
-```
-
-Raw throughput can reward overload; goodput penalizes requests that complete too late to satisfy the configured objective.
-
-### KV-cache model
-
-Per-token KV bytes are approximated as:
-
-```text
-2 x layers x KV heads x head dimension x 2 bytes
-```
-
-for K and V with FP16 KV state. Paged allocation rounds live request state to configurable token blocks. With prefix reuse enabled, the shared prefix is represented once as persistent KV state and request allocations contain only the uncached suffix plus generated tokens.
-
-### P/D transfer model
-
-After prefill, newly computed prompt KV crosses a serialized reference link:
-
-```text
-transfer_time = base_latency + KV_bytes / interconnect_bandwidth
-```
-
-The link is intentionally simple and explicit. It does not claim to reproduce NCCL, NIXL, RDMA, PCIe, or NVLink behavior.
-
-### Analytical latency model
-
-`AnalyticalLatencyModel` uses model architecture, accelerator peak FP16 compute, memory bandwidth, quantization footprint, batch/context shape, and conservative efficiency factors in a roofline-style proxy. Prefill and decode are modeled separately.
-
-The research stress test can multiplicatively perturb prefill/decode/transfer timing to expose conclusions that are sensitive to analytical-model error.
-
-## Stateful agent-session model
-
-Agent-session mode follows a program-level event trace:
-
-```text
-session arrival -> turn 1 -> tool gap -> turn 2 -> ... -> completion
-```
-
-When a turn becomes ready, it is routed either to the least-loaded replica or to a replica already holding that session's KV state. A cache hit prefills only newly appended tokens; a miss recomputes the accumulated history. KV can be evicted immediately, retained until the session ends, retained under a TTL, or moved to a modeled host-memory tier. Host offload/restore pays an explicit bandwidth + base-latency transfer cost. A bounded-affinity router only follows cached state while the estimated queue imbalance stays under a configurable slack; this avoids treating cache locality as unconditionally preferable. Per-replica capacity uses the same analytical KV-byte model as the request simulator and falls back to LRU-style pressure eviction when the retained working set exceeds the configured budget.
-
-The public app reports **HBM GB-seconds** and **host GB-seconds** in addition to peak/mean occupancy and transfer volume. This makes both retaining and offloading state visible rather than treating cache hits or a host tier as free.
-
-This module is inspired by recent work on agentic serving, including AGENTSERVESIM's program/tool-gap/session-routing abstraction and CacheTTL's observation that retention across variable tool gaps is a latency-vs-memory decision. It is intentionally smaller and does not claim their measured-system fidelity.
-
-### Host-tier offload and bounded affinity
-
-For `offload` retention, idle session KV is moved from the modeled HBM tier into finite host memory. The reference transfer model is explicit:
-
-```text
-host_transfer = base_latency + KV_size / host_bandwidth
-```
-
-If the next agent turn returns before offload has completed, the remaining transfer time becomes exposed before restore. Host residency, offloaded/restored bytes, and p95 transfer latency are reported separately from HBM residency.
-
-`bounded_affinity` is a transparent middle ground between strict session affinity and least-load routing. InferScale follows the replica holding the session KV only while its estimated extra queue penalty is below `affinity_slack_ms`. This is meant to study the locality/load-balance tension, not reproduce a particular production scheduler.
-
-`gap_aware` tiering uses the **realized simulated tool gap** to retain short-gap state in HBM and offload longer-gap state. Because a real serving system does not know the future perfectly, InferScale labels this policy as an **oracle upper bound** rather than a deployable predictor.
-
-## Empirical validation and calibration
-
-The public project does **not** ship invented "measured" GPU results. There are two explicit paths for external measurements.
-
-For already-normalized InferScale cases:
-
-```bash
-python scripts/validate_measurements.py my_measured_cases.json --output validation_report.json
-```
-
-For serving-engine artifacts:
-
-```bash
-python scripts/import_measurements.py vllm-result.json --source auto --output measurement_cases.json
-python scripts/calibrate_profiles.py measurement_cases.json --holdout 0.33 --output calibration_result.json
-```
-
-The importer recognizes vLLM serving JSON fields including request throughput/goodput and percentile TTFT/E2E metrics, plus SGLang `bench_serving` JSON/JSONL fields such as `request_throughput`, `p95_ttft_ms`, and `p95_e2e_latency_ms`. Token lengths and finite request rate are taken from the artifact when present; missing model/accelerator/precision metadata falls back to an explicit base `SimulationConfig`.
-
-Calibration fits robust global prefill/decode scale factors on training cases, then evaluates held-out cases through the normal simulator. `examples/validation_cases.schema.json` is a schema/template only; its placeholder values are not benchmark data.
+Hugging Face Static Space
+        |
+        | serves HTML / CSS / JS / Python sources
+        v
+Browser
+  |
+  +-- UI + Chart.js
+  |
+  +-- Web Worker
+        |
+        +-- Pyodide
+              |
+              +-- src/inferscale
+                    |
+                    +-- discrete-event simulation
+                    +-- research protocols
+                    +-- calibration / reporting
+```
+
+The browser mirror under `py/inferscale/` is generated from `src/inferscale/`; `scripts/release_check.py` fails if the copies diverge.
 
 ## Run locally
 
-The Python simulator has **zero runtime dependencies** beyond Python 3.10+.
-
 ```bash
-python -m venv .venv
+python3 -m venv .venv
 source .venv/bin/activate
+python -m pip install -U pip
 pip install -e '.[dev]'
 
 pytest -q
-ruff check src tests scripts
 python scripts/release_check.py
 ```
 
-Run one simulation:
+For the static UI, serve the repository root with any local HTTP server:
 
 ```bash
-python scripts/run_simulation.py
+python -m http.server 8000
 ```
 
-Normalize and calibrate external serving measurements:
+The deployed Space needs no secrets.
 
-```bash
-python scripts/import_measurements.py result.json --source auto
-python scripts/calibrate_profiles.py measurement_cases.json --holdout 0.33
-```
+## Command-line examples
 
-Generate a Markdown report from exported browser artifacts:
+Run a single simulation:
 
 ```bash
-python scripts/generate_report.py robust-policy-study.json --calibration calibration_result.json
+python scripts/run_simulation.py examples/balanced.json
 ```
 
-Serve the browser application:
+Import a serving-benchmark artifact:
 
 ```bash
-python -m http.server 8000
+python scripts/import_measurements.py path/to/benchmark.json --format auto
 ```
 
-Open `http://localhost:8000`. The initial page load downloads Pyodide and Chart.js; simulations then run inside the local browser worker.
+Calibrate analytical timing scales and evaluate held-out cases:
 
-## Deploy to Hugging Face
+```bash
+python scripts/calibrate_profiles.py measurements.json --holdout 0.25
+```
 
-Create or reuse a **Static Space** and push this repository. Root metadata already contains:
+Generate a research report:
 
-```yaml
-sdk: static
-app_file: index.html
+```bash
+python scripts/generate_report.py robust-policy-study.json \
+  --calibration calibration_result.json
 ```
 
-No Hugging Face secret is required.
+## Repository layout
 
-Before deployment:
+```text
+src/inferscale/         canonical Python simulator and research code
+py/inferscale/          browser mirror loaded by Pyodide
+index.html              static workbench structure
+styles.css              project-specific design system
+app.js                  UI, charts, exports, worker orchestration
+worker.mjs              Pyodide bootstrap and Python action bridge
+scripts/                release, import, calibration, report utilities
+tests/                  deterministic unit/integration coverage
+docs/                   architecture, methodology, validation, research notes
+examples/                workload and validation schemas
+reports/                 reference analytical study
+```
+
+## Validation
+
+The release suite checks both simulation behavior and deployment invariants, including:
+
+- stateless and P/D smoke tests;
+- trace replay;
+- prefix reuse and design-space Pareto logic;
+- stateful-session, host-tier, HBM-pressure, and affinity experiments;
+- predictive tiering and execution-learning studies;
+- paired bootstrap, timing sensitivity, repeated-seed consolidation, oracle regret;
+- measurement import/calibration/report generation;
+- source/browser Python parity;
+- HF metadata and public provenance guardrails;
+- DOM-reference integrity and chart-export controls.
+
+Run:
 
 ```bash
-python scripts/sync_web_python.py
 pytest -q
 python scripts/release_check.py
+python -m compileall -q src scripts
+node --check app.js
+node --check worker.mjs
 ```
 
-`sync_web_python.py` mirrors the canonical `src/inferscale/` package into `py/inferscale/`. CI fails if the browser mirror is stale.
+## Design and implementation choices
 
-## Research lineage
+The interface deliberately avoids a product/SaaS visual language. It uses one restrained accent, flat surfaces, square geometry, system typography, and editorial hierarchy instead of gradients, floating cards, badge-heavy status UI, or decorative marketing sections. The rationale and reusable tokens are documented in [`docs/design.md`](docs/design.md).
 
-- **Vidur: A Large-Scale Simulation Framework for LLM Inference** (MLSys 2024) - predictive profiling, simulation, and deployment search. https://arxiv.org/abs/2405.05465
-- **SGLang: Efficient Execution of Structured Language Model Programs** (NeurIPS 2024) - RadixAttention motivates reusable-prefix experiments. https://arxiv.org/abs/2312.07104
-- **TokenSim** (2025) - extensible scheduling and memory-management simulation. https://arxiv.org/abs/2503.08415
-- **Revati** (2026) - GPU-free time-warp emulation of serving control logic. https://arxiv.org/abs/2601.00397
-- **LLMServingSim 2.0** (2026) - heterogeneous/disaggregated infrastructure and runtime interactions. https://arxiv.org/abs/2602.23036
-- **Frontier** (May 2026) - P/D and Attention-FFN disaggregation, runtime optimizations, stateful workloads, and Pareto exploration. https://arxiv.org/abs/2605.21312
-- **AgentServeSim** (June 2026) - hardware-aware simulation for multi-turn agent serving, tool gaps, routing, and KV residency. https://arxiv.org/abs/2606.09613
-- **Vanguard / Load Testing for Machine Learning Model Serving Systems at Scale** (June 2026) - trace replay, reproducibility analysis, bootstrap intervals, and open-loop generation to avoid coordinated omission. https://arxiv.org/abs/2606.22013
-- **When Does Disaggregation Pay? / HeteroPanacea** (August 2026) - heterogeneous stage specialization and cross-stack disaggregated design exploration. https://arxiv.org/abs/2608.03741
+The simulator core is dependency-light Python rather than a simulation framework. Events, requests, schedulers, caches, predictors, and studies remain inspectable from source and testable outside the browser.
 
-See `docs/research.md`, `docs/methodology.md`, and `docs/validation.md` for scope and limitations.
+## Limitations
 
-## Repository
+1. Bundled device timings are analytical reference profiles.
+2. The agent-session simulator intentionally isolates state/routing effects from the full dynamic-batching model used in stateless serving.
+3. Transfer models are simplified serialized bandwidth + base-latency abstractions, not packet/NCCL/NIXL simulators.
+4. Oracle policies are bounded information references over declared action families.
+5. Calibration can correct global timing bias; it does not establish fidelity on unseen models, hardware, schedulers, or workload regimes.
 
-```text
-.
-|-- src/inferscale/          canonical Python simulator + research utilities
-|-- py/inferscale/           generated browser mirror
-|-- tests/                   deterministic unit tests
-|-- scripts/                 runner, validation, release tooling
-|-- examples/                workload / validation schemas
-|-- reports/                 analytical-reference consolidation artifacts
-|-- docs/                    architecture, methodology, research notes
-|-- index.html               HF Static Space entry point
-|-- app.js                   UI, studies, charts, export tooling
-|-- worker.mjs               Pyodide Web Worker bridge
-`-- styles.css
-```
+These limitations are surfaced in the UI and exported reports rather than hidden.
+
+## Research lineage
 
-## Feature freeze and scope boundary
+InferScale is informed by work on serving simulation, disaggregation, stateful agent workloads, and predictive cache management. See [`docs/research.md`](docs/research.md) for the annotated list and the precise distinction between implemented abstractions and cited systems.
 
-The simulator is intentionally **feature-frozen** at this point. The project already spans request-level serving, P/D disaggregation, prefix reuse, stateful agent KV management, online execution learning, speculative prefetch planning, repeated-seed research protocols, bounded-oracle regret, and external measurement calibration. Further mechanisms would add breadth faster than they add evidence.
+Key starting points include:
 
-The remaining scientific boundary is empirical fidelity: analytical reference profiles are hypotheses until compared with independent hardware measurements. The repository therefore includes import/calibration/held-out validation tooling rather than claiming production-runtime accuracy. Production integrations, CUDA-kernel fidelity, speculative decoding, richer radix-tree policies, Attention-FFN disaggregation, and multi-tenant fairness remain explicitly out of scope.
+- [Vidur](https://arxiv.org/abs/2405.05465) — predictive profiling and workload-aware serving simulation.
+- [SGLang / RadixAttention](https://arxiv.org/abs/2312.07104) — structured prefix reuse and scheduling motivation.
+- Recent 2026 work discussed in `docs/research.md` on P/D disaggregation, GPU-free emulation, agent-session serving, KV tiering, routing locality, and predictive prefetch.
 
 ## License
 

app.js

@@ -32,14 +32,14 @@ let measurementFileContent = "";
 let traceRequests = [];
 
 const COLORS = {
-  blue: "#79a7ff",
-  blue2: "#5d8fe9",
-  steel: "#92a2b5",
-  green: "#69c99a",
-  amber: "#dfb966",
-  red: "#df7d89",
-  purple: "#9b8cff",
-  gray: "#667384",
+  blue: "#78a1db",
+  blue2: "#5f86bf",
+  steel: "#91a0b2",
+  green: "#69c39a",
+  amber: "#d2b36a",
+  red: "#d97f89",
+  purple: "#9288c7",
+  gray: "#687585",
   grid: "rgba(140,155,175,.14)",
 };
 
@@ -135,12 +135,19 @@ function stamp() {
   const pad = (v) => String(v).padStart(2, "0");
   return `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}${pad(d.getSeconds())}`;
 }
-function showToast(message) {
+function showToast(message, kind = "info", timeoutMs = 2200) {
   const toast = $("toast");
   toast.textContent = message;
+  toast.classList.toggle("error", kind === "error");
   toast.classList.add("show");
   if (toastTimer) clearTimeout(toastTimer);
-  toastTimer = setTimeout(() => toast.classList.remove("show"), 1800);
+  toastTimer = setTimeout(() => {
+    toast.classList.remove("show", "error");
+  }, timeoutMs);
+}
+function reportError(context, error) {
+  console.error(context, error);
+  showToast(`${context}: ${error.message}`, "error", 5200);
 }
 async function copyText(text, message) {
   try {
@@ -210,7 +217,7 @@ Chart.defaults.color = "#929dab";
 Chart.defaults.borderColor = COLORS.grid;
 Chart.defaults.font.family = getComputedStyle(document.body).fontFamily;
 Chart.defaults.font.size = 13;
-Chart.defaults.animation.duration = 160;
+Chart.defaults.animation.duration = 0;
 
 function commonChartOptions() {
   return { responsive: true, maintainAspectRatio: false };
@@ -394,7 +401,7 @@ $("runBtn").addEventListener("click", async () => {
   } catch (error) {
     state.textContent = "Error";
     state.className = "tag bad";
-    alert(`Simulation failed: ${error.message}`);
+    reportError("Simulation failed", error);
   } finally {
     button.textContent = "Run simulation";
     button.disabled = false;
@@ -435,7 +442,7 @@ $("arenaBtn").addEventListener("click", async () => {
   button.disabled = true;
   button.textContent = "Comparing...";
   try { renderArena((await callPython("compare", { config: configFromUI() })).rows); }
-  catch (error) { alert(`Scheduler comparison failed: ${error.message}`); }
+  catch (error) { reportError("Scheduler comparison failed", error); }
   finally { button.disabled = false; button.textContent = "Compare schedulers"; }
 });
 const arenaHeaders = ["Scheduler", "Goodput", "SLO attainment", "p95 TTFT", "p95 E2E", "KV peak", "Unfinished", "Diagnosis"];
@@ -509,7 +516,7 @@ $("capacityBtn").addEventListener("click", async () => {
   } catch (error) {
     state.textContent = "Error";
     state.className = "tag bad";
-    alert(`Capacity search failed: ${error.message}`);
+    reportError("Capacity search failed", error);
   } finally {
     button.disabled = false;
     button.textContent = "Find sustainable capacity";
@@ -563,7 +570,7 @@ $("topologyBtn").addEventListener("click", async () => {
   button.disabled = true;
   button.textContent = "Comparing...";
   try { renderTopology((await callPython("topology_compare", { config: configFromUI() })).rows); }
-  catch (error) { alert(`Topology comparison failed: ${error.message}`); }
+  catch (error) { reportError("Topology comparison failed", error); }
   finally { button.disabled = false; button.textContent = "Compare 4 scenarios"; }
 });
 const topologyHeaders = ["Scenario", "GPU instances", "Goodput", "Goodput / GPU", "SLO attainment", "p95 TTFT", "p95 E2E", "p95 KV transfer", "Cache hit", "Prefill saved", "Diagnosis"];
@@ -629,7 +636,7 @@ $("designBtn").addEventListener("click", async () => {
   button.disabled = true;
   button.textContent = "Exploring...";
   try { renderDesign(await callPython("design_space", { config: configFromUI(), include_disaggregated: $("includePd").checked })); }
-  catch (error) { alert(`Design-space exploration failed: ${error.message}`); }
+  catch (error) { reportError("Design-space sweep failed", error); }
   finally { button.disabled = false; button.textContent = "Explore design space"; }
 });
 const designHeaders = ["Candidate", "Perf Pareto", "Efficiency Pareto", "SLO pass", "GPU instances", "Goodput", "Goodput / GPU", "p95 TTFT", "p95 E2E", "KV peak", "Diagnosis"];
@@ -712,7 +719,7 @@ $("pairedStudyBtn").addEventListener("click", async () => {
   } catch (error) {
     $("pairedState").textContent = "Error";
     $("pairedState").className = "tag bad";
-    alert(`Paired study failed: ${error.message}`);
+    reportError("Paired study failed", error);
   } finally {
     button.disabled = false;
     button.textContent = "Run paired study";
@@ -765,7 +772,7 @@ $("robustStudyBtn").addEventListener("click", async () => {
   } catch (error) {
     $("robustState").textContent = "Error";
     $("robustState").className = "tag bad";
-    alert(`Robustness study failed: ${error.message}`);
+    reportError("Sensitivity study failed", error);
   } finally {
     button.disabled = false;
     button.textContent = "Stress-test selected hypothesis";
@@ -863,7 +870,7 @@ $("agentRunBtn").addEventListener("click", async () => {
   $("agentRunState").textContent = "Running...";
   $("agentRunState").className = "tag neutral";
   try { renderAgentRun(await callPython("agent_simulate", { config: agentConfigFromUI() })); }
-  catch (error) { $("agentRunState").textContent = "Error"; $("agentRunState").className = "tag bad"; alert(`Agent session simulation failed: ${error.message}`); }
+  catch (error) { $("agentRunState").textContent = "Error"; $("agentRunState").className = "tag bad"; reportError("Agent session simulation failed", error); }
   finally { button.disabled = false; button.textContent = "Run stateful session simulation"; }
 });
 $("agentRunCopyJson").addEventListener("click", () => { if (lastAgentRun) copyText(JSON.stringify(lastAgentRun, null, 2), "Agent-session JSON copied"); });
@@ -889,7 +896,7 @@ function renderAgentCompare(result) {
 $("agentCompareBtn").addEventListener("click", async () => {
   const button = $("agentCompareBtn"); button.disabled = true; button.textContent = "Comparing...";
   try { renderAgentCompare(await callPython("agent_compare", { config: agentConfigFromUI() })); }
-  catch (error) { alert(`Agent policy comparison failed: ${error.message}`); }
+  catch (error) { reportError("Agent policy comparison failed", error); }
   finally { button.disabled = false; button.textContent = "Compare 4 policies"; }
 });
 $("agentCompareCopy").addEventListener("click", () => { if (lastAgentCompare) copyText(tableText(agentCompareHeaders, agentCompareTableRows(lastAgentCompare)), "Agent policy table copied"); });
@@ -919,7 +926,7 @@ function renderAgentTtl(result) {
 $("agentTtlBtn").addEventListener("click", async () => {
   const button = $("agentTtlBtn"); button.disabled = true; button.textContent = "Sweeping TTL...";
   try { renderAgentTtl(await callPython("agent_ttl_sweep", { config: agentConfigFromUI() })); }
-  catch (error) { alert(`TTL sweep failed: ${error.message}`); }
+  catch (error) { reportError("TTL sweep failed", error); }
   finally { button.disabled = false; button.textContent = "Run TTL sweep"; }
 });
 $("agentTtlCopy").addEventListener("click", () => { if (lastAgentTtl) copyText(tableText(agentTtlHeaders, agentTtlTableRows(lastAgentTtl)), "TTL sweep copied"); });
@@ -948,7 +955,7 @@ function renderAgentMemory(result) {
 $("agentMemoryCompareBtn").addEventListener("click", async () => {
   const button = $("agentMemoryCompareBtn"); button.disabled = true; button.textContent = "Comparing policies...";
   try { renderAgentMemory(await callPython("agent_memory_compare", { config: agentConfigFromUI() })); }
-  catch (error) { alert(`Memory policy comparison failed: ${error.message}`); }
+  catch (error) { reportError("Memory policy comparison failed", error); }
   finally { button.disabled = false; button.textContent = "Compare memory policies"; }
 });
 $("agentMemoryCopy").addEventListener("click", () => { if (lastAgentMemory) copyText(tableText(agentMemoryHeaders, agentMemoryTableRows(lastAgentMemory)), "Memory-policy table copied"); });
@@ -978,7 +985,7 @@ function renderAgentBudget(result) {
 $("agentBudgetBtn").addEventListener("click", async () => {
   const button = $("agentBudgetBtn"); button.disabled = true; button.textContent = "Stressing HBM budget...";
   try { renderAgentBudget(await callPython("agent_memory_sweep", { config: agentConfigFromUI() })); }
-  catch (error) { alert(`HBM budget study failed: ${error.message}`); }
+  catch (error) { reportError("HBM budget study failed", error); }
   finally { button.disabled = false; button.textContent = "Stress HBM budget"; }
 });
 $("agentBudgetCopy").addEventListener("click", () => { if (lastAgentBudget) copyText(tableText(agentBudgetHeaders, agentBudgetTableRows(lastAgentBudget)), "HBM budget table copied"); });
@@ -1007,7 +1014,7 @@ function renderAgentAffinity(result) {
 $("agentAffinityBtn").addEventListener("click", async () => {
   const button = $("agentAffinityBtn"); button.disabled = true; button.textContent = "Sweeping affinity...";
   try { renderAgentAffinity(await callPython("agent_affinity_sweep", { config: agentConfigFromUI() })); }
-  catch (error) { alert(`Affinity sweep failed: ${error.message}`); }
+  catch (error) { reportError("Affinity sweep failed", error); }
   finally { button.disabled = false; button.textContent = "Run affinity sweep"; }
 });
 $("agentAffinityCopy").addEventListener("click", () => { if (lastAgentAffinity) copyText(tableText(agentAffinityHeaders, agentAffinityTableRows(lastAgentAffinity)), "Affinity sweep copied"); });
@@ -1081,7 +1088,7 @@ function predictivePayload() {
 $("predictiveCompareBtn").addEventListener("click", async () => {
   const button = $("predictiveCompareBtn"); button.disabled = true; button.textContent = "Running predictive study...";
   try { renderPredictiveStudy(await callPython("agent_predictive_tiering", predictivePayload())); }
-  catch (error) { alert(`Predictive tiering study failed: ${error.message}`); }
+  catch (error) { reportError("Predictive tiering study failed", error); }
   finally { button.disabled = false; button.textContent = "Compare predictive policies"; }
 });
 $("predictiveCopy").addEventListener("click", () => { if (lastPredictiveStudy) copyText(tableText(predictiveHeaders, predictiveTableRows(lastPredictiveStudy)), "Predictive-tiering table copied"); });
@@ -1114,7 +1121,7 @@ $("predictiveAlphaBtn").addEventListener("click", async () => {
   const button = $("predictiveAlphaBtn"); button.disabled = true; button.textContent = "Sweeping adaptation rate...";
   const payload = predictivePayload();
   try { renderPredictiveAlpha(await callPython("agent_adaptive_alpha_sweep", payload)); }
-  catch (error) { alert(`Adaptation-rate sweep failed: ${error.message}`); }
+  catch (error) { reportError("Adaptation-rate sweep failed", error); }
   finally { button.disabled = false; button.textContent = "Sweep adaptation rate"; }
 });
 $("predictiveAlphaCopy").addEventListener("click", () => { if (lastPredictiveAlpha) copyText(tableText(predictiveAlphaHeaders, predictiveAlphaTableRows(lastPredictiveAlpha)), "Adaptation-rate table copied"); });
@@ -1225,7 +1232,7 @@ $("execRunBtn").addEventListener("click", async () => {
   button.disabled = true; button.textContent = "Running execution model...";
   $("execRunState").textContent = "Running..."; $("execRunState").className = "tag neutral";
   try { renderExecutionRun(await callPython("execution_learning_run", { config: executionConfigFromUI() })); }
-  catch (error) { $("execRunState").textContent = "Error"; $("execRunState").className = "tag bad"; alert(`Execution-learning run failed: ${error.message}`); }
+  catch (error) { $("execRunState").textContent = "Error"; $("execRunState").className = "tag bad"; reportError("Execution-learning run failed", error); }
   finally { button.disabled = false; button.textContent = "Run execution-learning simulation"; }
 });
 $("execRunCopyJson").addEventListener("click", () => { if (lastExecutionRun) copyText(JSON.stringify(lastExecutionRun, null, 2), "Execution-learning JSON copied"); });
@@ -1251,7 +1258,7 @@ function renderExecutionCompare(result) {
 $("execCompareBtn").addEventListener("click", async () => {
   const button = $("execCompareBtn"); button.disabled = true; button.textContent = "Comparing policies...";
   try { renderExecutionCompare(await callPython("execution_prefetch_study", { config: executionConfigFromUI() })); }
-  catch (error) { alert(`Execution prefetch study failed: ${error.message}`); }
+  catch (error) { reportError("Execution prefetch study failed", error); }
   finally { button.disabled = false; button.textContent = "Compare 4 policies"; }
 });
 $("execCompareCopy").addEventListener("click", () => { if (lastExecutionCompare) copyText(tableText(execCompareHeaders, execCompareTableRows(lastExecutionCompare)), "Execution policy table copied"); });
@@ -1286,7 +1293,7 @@ function renderExecutionThreshold(result) {
 $("execThresholdBtn").addEventListener("click", async () => {
   const button = $("execThresholdBtn"); button.disabled = true; button.textContent = "Sweeping threshold...";
   try { renderExecutionThreshold(await callPython("execution_threshold_sweep", { config: executionConfigFromUI() })); }
-  catch (error) { alert(`Execution threshold sweep failed: ${error.message}`); }
+  catch (error) { reportError("Execution threshold sweep failed", error); }
   finally { button.disabled = false; button.textContent = "Sweep confidence threshold"; }
 });
 $("execThresholdCopy").addEventListener("click", () => { if (lastExecutionThreshold) copyText(tableText(execThresholdHeaders, execThresholdTableRows(lastExecutionThreshold)), "Execution threshold table copied"); });
@@ -1319,7 +1326,7 @@ function renderExecutionDecay(result) {
 $("execDecayBtn").addEventListener("click", async () => {
   const button = $("execDecayBtn"); button.disabled = true; button.textContent = "Sweeping decay...";
   try { renderExecutionDecay(await callPython("execution_decay_sweep", { config: executionConfigFromUI() })); }
-  catch (error) { alert(`Execution decay sweep failed: ${error.message}`); }
+  catch (error) { reportError("Execution decay sweep failed", error); }
   finally { button.disabled = false; button.textContent = "Sweep transition decay"; }
 });
 $("execDecayCopy").addEventListener("click", () => { if (lastExecutionDecay) copyText(tableText(execDecayHeaders, execDecayTableRows(lastExecutionDecay)), "Execution decay table copied"); });
@@ -1355,7 +1362,7 @@ function renderExecutionPlanning(result) {
 $("execPlanningBtn").addEventListener("click", async () => {
   const button = $("execPlanningBtn"); button.disabled = true; button.textContent = "Comparing planners...";
   try { renderExecutionPlanning(await callPython("execution_planning_study", { config: executionConfigFromUI() })); }
-  catch (error) { alert(`Execution planning study failed: ${error.message}`); }
+  catch (error) { reportError("Execution planning study failed", error); }
   finally { button.disabled = false; button.textContent = "Compare planning policies"; }
 });
 $("execPlanningCopy").addEventListener("click", () => { if (lastExecutionPlanning) copyText(tableText(execPlanningHeaders, execPlanningTableRows(lastExecutionPlanning)), "Planning table copied"); });
@@ -1389,7 +1396,7 @@ function renderExecutionHorizon(result) {
 $("execHorizonBtn").addEventListener("click", async () => {
   const button = $("execHorizonBtn"); button.disabled = true; button.textContent = "Sweeping horizons...";
   try { renderExecutionHorizon(await callPython("execution_horizon_sweep", { config: executionConfigFromUI() })); }
-  catch (error) { alert(`Forecast horizon sweep failed: ${error.message}`); }
+  catch (error) { reportError("Forecast horizon sweep failed", error); }
   finally { button.disabled = false; button.textContent = "Sweep forecast horizon"; }
 });
 $("execHorizonCopy").addEventListener("click", () => { if (lastExecutionHorizon) copyText(tableText(execHorizonHeaders, execHorizonTableRows(lastExecutionHorizon)), "Horizon table copied"); });
@@ -1417,7 +1424,7 @@ function renderExecutionBudget(result) {
 $("execBudgetBtn").addEventListener("click", async () => {
   const button = $("execBudgetBtn"); button.disabled = true; button.textContent = "Sweeping cache budget...";
   try { renderExecutionBudget(await callPython("execution_budget_sweep", { config: executionConfigFromUI() })); }
-  catch (error) { alert(`Cache budget study failed: ${error.message}`); }
+  catch (error) { reportError("Cache budget study failed", error); }
   finally { button.disabled = false; button.textContent = "Sweep cache budget"; }
 });
 $("execBudgetCopy").addEventListener("click", () => { if (lastExecutionBudget) copyText(tableText(execBudgetHeaders, execBudgetTableRows(lastExecutionBudget)), "Cache budget table copied"); });
@@ -1470,7 +1477,7 @@ $("consRunBtn").addEventListener("click", async () => {
     renderConsolidation(await callPython("consolidation_study", {
       config: executionConfigFromUI(), repetitions: num("consSeeds"), bootstrap_samples: num("consBootstrap"),
     }));
-  } catch (error) { alert(`Robust policy study failed: ${error.message}`); }
+  } catch (error) { reportError("Robust policy study failed", error); }
   finally { button.disabled = false; button.textContent = "Run robust policy study"; }
 });
 $("consCopy").addEventListener("click", () => { if (lastConsolidation) copyText(tableText(consHeaders, consTableRows(lastConsolidation)), "Robust policy table copied"); });
@@ -1486,7 +1493,7 @@ $("measurementFile").addEventListener("change", async (event) => {
     $("measurementCalibrateBtn").disabled = !runtimePill.classList.contains("ready");
   } catch (error) {
     measurementFileContent = ""; $("measurementCalibrateBtn").disabled = true;
-    $("measurementStatus").textContent = "File read failed"; alert(`Measurement file failed: ${error.message}`);
+    $("measurementStatus").textContent = "File read failed"; reportError("Measurement file failed", error);
   }
 });
 
@@ -1529,7 +1536,7 @@ $("measurementCalibrateBtn").addEventListener("click", async () => {
       cases: imported.cases, holdout_fraction: num("measurementHoldout"), seed: num("seed"),
     });
     renderCalibration(imported, calibrated);
-  } catch (error) { alert(`Measurement calibration failed: ${error.message}`); }
+  } catch (error) { reportError("Measurement calibration failed", error); }
   finally { button.disabled = false; button.textContent = "Import and calibrate"; }
 });
 $("measurementCopy").addEventListener("click", () => { if (lastCalibration) copyText(tableText(measurementHeaders, measurementTableRows(lastCalibration)), "Validation table copied"); });
@@ -1541,7 +1548,7 @@ $("consReportBtn").addEventListener("click", async () => {
   try {
     const result = await callPython("research_report", { robust: lastConsolidation, calibration: lastCalibration });
     downloadTextFile(`inferscale_research-consolidation_${stamp()}.md`, result.markdown, "text/markdown;charset=utf-8");
-  } catch (error) { alert(`Report generation failed: ${error.message}`); }
+  } catch (error) { reportError("Report generation failed", error); }
   finally { button.disabled = false; button.textContent = "Download Markdown report"; }
 });
 
@@ -1612,7 +1619,7 @@ $("traceFile").addEventListener("change", async (event) => {
   const file = event.target.files?.[0];
   if (!file) return;
   try { await loadTraceFile(file); }
-  catch (error) { traceRequests = []; $("traceStatus").textContent = "Trace rejected"; alert(`Trace load failed: ${error.message}`); }
+  catch (error) { traceRequests = []; $("traceStatus").textContent = "Trace rejected"; reportError("Trace load failed", error); }
 });
 $("traceClearBtn").addEventListener("click", () => {
   traceRequests = [];
@@ -1641,13 +1648,36 @@ $("prefixCache").addEventListener("change", syncConditionalControls);
 $("arrival").addEventListener("change", syncConditionalControls);
 syncConditionalControls();
 
-for (const tab of document.querySelectorAll(".tab")) {
-  tab.addEventListener("click", () => {
-    document.querySelectorAll(".tab").forEach((item) => item.classList.remove("active"));
-    document.querySelectorAll(".tab-panel").forEach((panel) => panel.classList.remove("active"));
-    tab.classList.add("active");
-    $(tab.dataset.tab).classList.add("active");
-    setTimeout(() => Object.values(charts).forEach((chart) => chart.resize()), 20);
+const tabButtons = [...document.querySelectorAll(".tab")];
+function activateTab(tab) {
+  for (const item of tabButtons) {
+    const active = item === tab;
+    item.classList.toggle("active", active);
+    item.setAttribute("aria-selected", active ? "true" : "false");
+    item.tabIndex = active ? 0 : -1;
+  }
+  document.querySelectorAll(".tab-panel").forEach((panel) => {
+    panel.classList.remove("active");
+    panel.setAttribute("aria-hidden", "true");
+  });
+  const targetPanel = $(tab.dataset.tab);
+  targetPanel.classList.add("active");
+  targetPanel.setAttribute("aria-hidden", "false");
+  setTimeout(() => Object.values(charts).forEach((chart) => chart.resize()), 20);
+}
+for (const tab of tabButtons) {
+  tab.addEventListener("click", () => activateTab(tab));
+  tab.addEventListener("keydown", (event) => {
+    if (!["ArrowLeft", "ArrowRight", "Home", "End"].includes(event.key)) return;
+    event.preventDefault();
+    const current = tabButtons.indexOf(tab);
+    let next = current;
+    if (event.key === "ArrowLeft") next = (current - 1 + tabButtons.length) % tabButtons.length;
+    if (event.key === "ArrowRight") next = (current + 1) % tabButtons.length;
+    if (event.key === "Home") next = 0;
+    if (event.key === "End") next = tabButtons.length - 1;
+    tabButtons[next].focus();
+    activateTab(tabButtons[next]);
   });
 }
 

docs/architecture.md

@@ -104,7 +104,7 @@ without rewriting workload generation, scheduling, cache logic, P/D orchestratio
 
 ## Agent memory tiering
 
-Stateful Agent Sessions has an additional memory path that is independent from the stateless/P-D simulator:
+Stateful Stateful Sessions has an additional memory path that is independent from the stateless/P-D simulator:
 
 ```text
 turn completes

docs/design.md

@@ -0,0 +1,47 @@
+# Interface design notes
+
+InferScale is a research workbench, not a SaaS product. The UI is intentionally quiet so the experiment is the visual focus.
+
+## Design rules
+
+- **One job per screen.** Controls define an experiment; results explain that experiment. Secondary actions stay visually subordinate.
+- **One accent color.** Blue marks the selected tab, primary action, and key chart series. Status colors are reserved for pass/fail/warning semantics.
+- **Flat hierarchy.** Panels and charts use thin borders and square geometry. Avoid nested rounded cards, glass effects, gradients, glowing shadows, and decorative badges.
+- **Editorial type.** System sans-serif for prose and controls; monospace only for evidence/provenance snippets. No decorative display font is required.
+- **Spacing over decoration.** Use consistent 8/12/16/24 px rhythms before adding borders or backgrounds.
+- **Labels are literal.** Prefer `Scheduler comparison`, `Cache budget`, and `Held-out calibration` over promotional names such as “arena”, “command center”, or “insights”.
+- **Status is text, not chip soup.** Runtime/pass/fail state should be legible without turning every fact into a badge.
+- **Progressive disclosure.** Prefix, trace, P/D, predictive, and calibration controls appear only when relevant.
+- **No company chrome.** No promotional footer, testimonials, pricing-style cards, or fake product navigation.
+- **Motion has a job.** Only the runtime header retracts after initialization; charts do not animate. Reduced-motion preferences are honored.
+
+## Tokens
+
+The public CSS defines a small neutral palette:
+
+```text
+background       #080c11
+surface          #0c1219
+inset surface    #090e14
+border           #27313d
+text             #e3e8ee
+muted text       #929dab
+accent           #6f96cf
+success          #68c394
+error            #df7d89
+warning          #d2b36a
+```
+
+Corners are 0–2 px for most surfaces and controls. The interface does not use gradients or pill-shaped containers.
+
+## Maintenance checklist
+
+Before shipping a UI change:
+
+1. Does the element help configure, inspect, compare, or export an experiment?
+2. Can an existing treatment be reused instead of introducing another card/button/badge style?
+3. Is the copy literal and specific?
+4. Is information duplicated between a heading, kicker, chip, and paragraph?
+5. Does the layout still work at 720 px and 1100 px breakpoints?
+6. Is the control keyboard-focusable and does focus remain visible?
+7. Does `scripts/release_check.py` still pass the public-design guardrails?

docs/methodology.md

@@ -134,7 +134,7 @@ The perturbation distribution is deliberately described as a **sensitivity analy
 
 Agent mode is a separate program-level discrete-event model. Session arrivals are open-loop. Each session receives a deterministic number of turns, token increments, outputs, and tool gaps from a seeded trace. A later turn cannot become ready until the prior turn completes and its tool gap elapses.
 
-Each simulated replica is a serial analytical service station in this mode. This is deliberate: dynamic batching remains covered by Serving Lab, while Agent Sessions isolates four stateful effects:
+Each simulated replica is a serial analytical service station in this mode. This is deliberate: dynamic batching remains covered by Serving section, while Stateful Sessions isolates four stateful effects:
 
 1. **cross-turn reuse:** a resident KV entry means the next turn prefills only appended tokens;
 2. **tool-gap residency:** retained KV occupies memory while the program waits outside the model;
@@ -201,7 +201,7 @@ This sequencing is important: directly updating the predictor at LLM-turn comple
 
 ## Non-stationary predictive-tiering study
 
-The Predictive Tiering Lab generates one common program trace and replays it across fixed and adaptive policies. At a configured fraction of the arrival horizon, the duration scale of slower external tools (`database` and `remote_api`) is multiplied by a user-selected factor. Faster local-style tools remain unchanged.
+The Predictive tiering experiment generates one common program trace and replays it across fixed and adaptive policies. At a configured fraction of the arrival horizon, the duration scale of slower external tools (`database` and `remote_api`) is multiplied by a user-selected factor. Faster local-style tools remain unchanged.
 
 The study compares:
 
@@ -231,7 +231,7 @@ The EWMA alpha sweep replays the exact same shifted trace for every candidate al
 
 ## Online execution-transition learning
 
-Execution Learning models a different reuse object from Agent Sessions. Agent Sessions tracks one user's growing cross-turn KV state. Execution Learning tracks reusable *static agent prefixes* (for example planner/retriever/reasoner system context) that can be shared across workflows.
+Execution Model models a different reuse object from Stateful Sessions. Stateful Sessions tracks one user's growing cross-turn KV state. Execution Model tracks reusable *static agent prefixes* (for example planner/retriever/reasoner system context) that can be shared across workflows.
 
 A synthetic workflow is generated from a first-order role-transition matrix over five agent roles plus an `END` state. At `shift_fraction` of the arrival horizon a second transition matrix becomes active. Every candidate in a controlled study replays the exact same workflows.
 
@@ -276,14 +276,14 @@ This distinction matters because multi-step prefetch can be useful even when a p
 
 ### Controlled studies
 
-The Confidence Threshold Study varies when one-step learned predictions are acted on. The Forgetting-Rate Study varies transition decay. The Prefetch Planning Study compares top-1, multi-step top-k, utility-aware multi-step, and a clairvoyant realized-future-set information bound. The Forecast Horizon Study varies rollout depth on a common trace. The Cache Budget Study runs top-1, multi-step, and utility-aware planners at multiple shared-prefix working-set budgets.
+The confidence-threshold sweep varies when one-step learned predictions are acted on. The transition-decay sweep varies transition decay. The prefetch-planning comparison compares top-1, multi-step top-k, utility-aware multi-step, and a clairvoyant realized-future-set information bound. The forecast-horizon sweep varies rollout depth on a common trace. The prefix-cache budget sweep runs top-1, multi-step, and utility-aware planners at multiple shared-prefix working-set budgets.
 
 Oracle next-role and oracle future-set candidates are **clairvoyant information bounds**, not guaranteed serving-performance upper bounds. Perfect future information may still produce poor global resource behavior when multiple workflows share a small cache and serialized transfer path.
 
 
 ## Research consolidation and robust policy ranking
 
-The final research layer deliberately stops adding new serving mechanisms and asks whether policy conclusions survive workload variation. `repeated_seed_policy_study` generates matched workflow traces across multiple deterministic seeds and replays every deployable Execution Learning policy on each seed. It reports:
+The final research layer deliberately stops adding new serving mechanisms and asks whether policy conclusions survive workload variation. `repeated_seed_policy_study` generates matched workflow traces across multiple deterministic seeds and replays every deployable Execution Model policy on each seed. It reports:
 
 - median and mean p95 step TTFT;
 - a bootstrap interval over seed-level TTFT;

docs/research.md

@@ -68,7 +68,7 @@ Vanguard highlights two methodology points that directly influence InferScale:
 1. **open-loop replay** avoids coordinated omission by scheduling requests independently of response time;
 2. repeated load-test analysis benefits from reproducibility statistics and bootstrap confidence intervals.
 
-InferScale's generated workloads are open-loop, trace replay preserves externally supplied arrivals, and Research Studies use repeated paired simulations with bootstrap intervals.
+InferScale's generated workloads are open-loop, trace replay preserves externally supplied arrivals, and A/B Studies use repeated paired simulations with bootstrap intervals.
 
 Source: https://arxiv.org/abs/2606.22013
 
@@ -143,7 +143,7 @@ Source: https://arxiv.org/abs/2604.26968
 
 CacheScout argues that future KV reuse in multi-agent systems is governed by execution semantics rather than recency alone. It learns agent execution transitions online without requiring predefined workflow graphs or offline training, then uses the learned model for cache eviction and proactive prefetching.
 
-InferScale inspiration: the **Execution Learning** lab implements a deliberately smaller online transition learner over synthetic agent roles. The model is updated only after a transition is observed; learned forecasts can drive one-step or multi-step static-prefix prefetch into a bounded HBM cache. InferScale also measures calibration and downstream action quality separately. It does not reproduce CacheScout's vLLM integration, survival policy, or production critical-path design.
+InferScale inspiration: the **Execution Model** lab implements a deliberately smaller online transition learner over synthetic agent roles. The model is updated only after a transition is observed; learned forecasts can drive one-step or multi-step static-prefix prefetch into a bounded HBM cache. InferScale also measures calibration and downstream action quality separately. It does not reproduce CacheScout's vLLM integration, survival policy, or production critical-path design.
 
 Source: https://arxiv.org/abs/2608.14624
 
@@ -159,7 +159,7 @@ Source: https://arxiv.org/abs/2605.06472
 
 A recent runtime-layer proposal formalizes agent-aware serving policies around observe/score/predict/act primitives and demonstrates online transition learning plus between-step KV prefetch as one concrete policy family.
 
-InferScale inspiration: keep observation and action timing explicit. In Execution Learning, the prediction is made before the next role is revealed, the transition model is updated only when that role becomes observable, and the oracle policy remains separately tagged as a clairvoyant upper bound.
+InferScale inspiration: keep observation and action timing explicit. In Execution Model, the prediction is made before the next role is revealed, the transition model is updated only when that role becomes observable, and the oracle policy remains separately tagged as a clairvoyant upper bound.
 
 Source: https://arxiv.org/abs/2605.27744
 

docs/validation.md

@@ -84,7 +84,7 @@ The calibration script fits only on the training cases and reports baseline/cali
 - radix-tree prefix-cache eviction/scheduling
 - speculative decoding
 - Attention-FFN disaggregation
-- production-fidelity agentic serving or dynamic batching inside Agent Sessions
+- production-fidelity agentic serving or dynamic batching inside Stateful Sessions
 - real tool execution or production agent-runtime integration
 - claims that the bounded offline oracle is globally optimal
 - claims that simulator bootstrap intervals quantify real-hardware error

scripts/release_check.py

@@ -90,9 +90,28 @@ if "Download PNG" not in index or ".chart-download" not in app:
     errors.append("chart PNG export controls are missing")
 if "Worst repetition" not in index or "Target" not in index:
     errors.append("capacity evidence columns are missing")
-for expected in ["Trace replay", "Research Studies", "Run paired study", "Stress-test selected hypothesis", "Agent Sessions", "Session Policy Arena", "TTL frontier", "Agent Memory Lab", "Affinity Frontier", "Stress HBM budget", "Predictive Tiering Lab", "Compare predictive policies", "Sweep adaptation rate", "Execution Learning", "Prefetch Policy Study", "Confidence Threshold Study", "Forgetting-Rate Study", "Prefetch Planning Study", "Forecast Horizon Study", "Cache Budget Study", "Research Summary", "Robust policy ranking", "Held-out calibration", "Download Markdown report", "Download JSON"]:
-    if expected not in index:
-        errors.append(f"UI is missing research/trace feature: {expected}")
+required_ui_ids = [
+    "traceFile", "pairedStudyBtn", "robustStudyBtn", "agentRunBtn", "agentCompareBtn", "agentTtlBtn",
+    "agentMemoryCompareBtn", "agentBudgetBtn", "agentAffinityBtn", "predictiveCompareBtn", "predictiveAlphaBtn",
+    "execRunBtn", "execCompareBtn", "execThresholdBtn", "execDecayBtn", "execPlanningBtn", "execHorizonBtn",
+    "execBudgetBtn", "consRunBtn", "measurementCalibrateBtn", "consReportBtn", "exportBtn", "agentRunJson",
+]
+for expected_id in required_ui_ids:
+    if f'id="{expected_id}"' not in index:
+        errors.append(f"UI is missing required control: {expected_id}")
+
+# Design guardrails for the public research-workbench UI.
+css = (ROOT / "styles.css").read_text()
+if "gradient(" in css.lower():
+    errors.append("UI should not use decorative CSS gradients")
+if re.search(r"border-radius:\s*(?:999|9999|50)%?px?", css, re.IGNORECASE):
+    errors.append("UI contains pill-style over-rounding")
+if "feature freeze" in index.lower() or "feature freeze" in README.lower():
+    errors.append("public UI/docs should not mention the release process")
+if 'class="subtitle"' in index:
+    errors.append("topbar should remain a compact tool header, not a product masthead")
+if re.search(r"\.section-kicker\s*\{[^}]*text-transform:\s*uppercase", css, re.DOTALL | re.IGNORECASE):
+    errors.append("section labels should not use repetitive AI-style uppercase kickers")
 
 # Every $("id") lookup in app.js should resolve to a static DOM id.
 app_ids = set(re.findall(r'\$\("([A-Za-z0-9_-]+)"\)', app))

styles.css

@@ -1,18 +1,20 @@
 :root {
-  --bg: #090d12;
-  --surface: #0d1219;
-  --surface-2: #0a0f15;
-  --surface-3: #111822;
-  --line: #26313f;
-  --line-soft: #1b2430;
-  --text: #e4e9ef;
+  --bg: #080c11;
+  --surface: #0c1219;
+  --surface-raised: #101720;
+  --surface-inset: #090e14;
+  --line: #27313d;
+  --line-soft: #1c2530;
+  --text: #e3e8ee;
+  --text-soft: #c2cad4;
   --muted: #929dab;
-  --faint: #697586;
-  --accent: #6f9fe8;
-  --accent-2: #9ab8df;
-  --good: #6fd0a0;
-  --danger: #ee7f8d;
-  --amber: #d8b96e;
+  --faint: #6f7b8a;
+  --accent: #6f96cf;
+  --accent-strong: #4d79b8;
+  --good: #68c394;
+  --danger: #df7d89;
+  --amber: #d2b36a;
+  --focus: rgba(111, 150, 207, 0.24);
 }
 
 * { box-sizing: border-box; }
@@ -21,314 +23,640 @@ body {
   margin: 0;
   background: var(--bg);
   color: var(--text);
-  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   font-size: 16px;
+  line-height: 1.45;
+  text-rendering: optimizeLegibility;
 }
+button, input, select { font: inherit; }
+button, a, input, select { -webkit-tap-highlight-color: transparent; }
+button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+.skip-link {
+  position: fixed;
+  left: 12px;
+  top: 10px;
+  z-index: 200;
+  transform: translateY(-160%);
+  padding: 8px 10px;
+  background: var(--text);
+  color: var(--bg);
+  text-decoration: none;
+}
+.skip-link:focus { transform: translateY(0); }
 
+/* Runtime header --------------------------------------------------------- */
 .topbar {
   position: fixed;
   inset: 0 0 auto 0;
   z-index: 80;
-  height: 64px;
+  height: 58px;
   padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
-  background: #090d12;
+  background: rgba(8, 12, 17, 0.98);
   border-bottom: 1px solid var(--line);
-  transition: transform .18s ease;
+  transition: transform 150ms ease;
 }
-body.runtime-ready .topbar { transform: translateY(-58px); }
+body.runtime-ready .topbar { transform: translateY(-52px); }
 body.runtime-ready .topbar:hover,
 body.runtime-ready .topbar:focus-within { transform: translateY(0); }
-.brand-wrap { display: flex; align-items: center; min-width: 0; }
-.brand { font-size: 15px; font-weight: 760; letter-spacing: -.01em; }
-.subtitle { margin-top: 2px; color: var(--faint); font-size: 12px; }
+.brand-wrap { min-width: 0; }
+.brand { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
 .runtime-pill {
   display: inline-flex;
   align-items: center;
-  gap: 7px;
+  gap: 8px;
   color: var(--muted);
-  border: 1px solid var(--line);
-  background: var(--surface-2);
-  border-radius: 4px;
-  padding: 6px 9px;
-  font-size: 11.5px;
+  font-size: 12px;
   white-space: nowrap;
 }
-.runtime-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
+.runtime-pill .dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: var(--amber);
+}
 .runtime-pill.ready .dot { background: var(--good); }
 .runtime-pill.error .dot { background: var(--danger); }
 
+/* Page frame ------------------------------------------------------------- */
 .shell {
-  width: min(1460px, calc(100% - 40px));
+  width: min(1500px, calc(100% - 44px));
   margin: 0 auto;
-  padding: 94px 0 44px;
-  transition: padding-top .18s ease;
+  padding: 86px 0 46px;
+  transition: padding-top 150ms ease;
 }
-body.runtime-ready .shell { padding-top: 34px; }
+body.runtime-ready .shell { padding-top: 28px; }
 
 .intro {
-  display: grid;
-  grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr);
-  gap: 46px;
-  align-items: end;
-  padding: 16px 0 18px;
-}
-.eyebrow, .section-kicker {
-  color: var(--accent-2);
-  font-size: 10.5px;
-  line-height: 1.25;
-  text-transform: uppercase;
-  letter-spacing: .1em;
-  font-weight: 760;
+  padding: 13px 0 16px;
+  max-width: 1040px;
 }
 .intro h1 {
-  max-width: 900px;
-  margin: 8px 0 9px;
+  margin: 0 0 10px;
   color: #edf1f5;
-  font-size: clamp(28px, 3vw, 43px);
-  line-height: 1.06;
-  letter-spacing: -.038em;
+  font-size: clamp(26px, 2.4vw, 34px);
+  line-height: 1.1;
+  letter-spacing: -0.035em;
   font-weight: 720;
 }
-.intro p { max-width: 920px; margin: 0; color: var(--muted); font-size: 14.5px; line-height: 1.65; }
-.project-facts { margin: 0; border-top: 1px solid var(--line); }
-.project-facts div { display: grid; grid-template-columns: 120px 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); }
-.project-facts dt { color: var(--faint); font-size: 11.5px; }
-.project-facts dd { margin: 0; color: #bdc7d2; font-size: 12.5px; }
+.intro p {
+  margin: 0;
+  max-width: 980px;
+  color: var(--muted);
+  font-size: 15px;
+  line-height: 1.65;
+}
+.intro-meta {
+  margin-top: 10px !important;
+  color: var(--faint) !important;
+  font-size: 12.5px !important;
+  letter-spacing: 0.005em;
+}
 .reference-note {
-  border-left: 2px solid #6c6041;
-  background: #11120f;
-  color: #bcb5a5;
-  padding: 10px 12px;
+  margin: 2px 0 0;
+  padding: 10px 0;
+  border-top: 1px solid var(--line-soft);
+  border-bottom: 1px solid var(--line-soft);
+  color: #aaa596;
   font-size: 12.5px;
   line-height: 1.55;
 }
+.reference-note strong { color: #c6bea9; }
 
+/* Navigation ------------------------------------------------------------- */
 .tabs {
   display: flex;
-  gap: 2px;
-  padding: 22px 0 10px;
+  gap: 0;
+  margin: 12px 0 18px;
+  padding: 0;
   overflow-x: auto;
-  border-bottom: 1px solid var(--line-soft);
-  margin-bottom: 14px;
+  border-bottom: 1px solid var(--line);
+  scrollbar-width: thin;
 }
 .tab {
+  flex: 0 0 auto;
   border: 0;
   border-bottom: 2px solid transparent;
-  color: var(--muted);
   background: transparent;
-  padding: 9px 11px;
+  color: var(--muted);
+  padding: 12px 11px 10px;
   cursor: pointer;
-  font-weight: 650;
-  font-size: 13px;
+  font-size: 13.5px;
+  font-weight: 620;
   white-space: nowrap;
 }
-.tab:hover { color: var(--text); }
+.tab:hover { color: var(--text-soft); }
 .tab.active { color: var(--text); border-bottom-color: var(--accent); }
 .tab-panel { display: none; }
 .tab-panel.active { display: block; }
 
-.workspace { display: grid; grid-template-columns: 430px minmax(0, 1fr); gap: 14px; align-items: start; }
-.planner-grid { grid-template-columns: 390px minmax(0, 1fr); }
-.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
-.controls-panel { padding: 18px; position: sticky; top: 16px; }
-.result-panel, .wide-panel { padding: 20px; }
-.panel-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
-.panel-title-row h2 { margin: 0; font-size: 19px; letter-spacing: -.02em; }
-.panel-title-row p { margin: 6px 0 0; }
+/* Layout ---------------------------------------------------------------- */
+.workspace,
+.agent-layout,
+.research-grid {
+  display: grid;
+  grid-template-columns: 410px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+.planner-grid { grid-template-columns: 370px minmax(0, 1fr); }
+.results-column,
+.agent-results,
+.research-results { min-width: 0; display: grid; gap: 14px; }
+
+.panel {
+  background: var(--surface);
+  border: 1px solid var(--line);
+  border-radius: 2px;
+}
+.controls-panel,
+.agent-controls,
+.research-controls {
+  padding: 20px;
+  position: sticky;
+  top: 14px;
+}
+.result-panel,
+.wide-panel,
+.research-panel { padding: 20px; }
+.panel-title-row {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 18px;
+  margin-bottom: 16px;
+}
+.panel-title-row h2 {
+  margin: 0;
+  font-size: 19px;
+  line-height: 1.25;
+  letter-spacing: -0.018em;
+  font-weight: 700;
+}
+.panel-title-row p { margin: 5px 0 0; }
+
+/* Small labels: intentionally plain, not eyebrow/kicker styling. */
+.section-kicker {
+  margin: 0 0 9px;
+  color: #a4afbc;
+  font-size: 12.5px;
+  line-height: 1.3;
+  font-weight: 650;
+  letter-spacing: 0;
+  text-transform: none;
+}
+.panel-title-row .section-kicker { display: none; }
 .tag {
   display: inline-flex;
   align-items: center;
-  border: 1px solid var(--line);
-  background: var(--surface-2);
   color: var(--muted);
-  border-radius: 4px;
-  padding: 5px 7px;
+  padding: 2px 0;
+  border: 0;
+  background: transparent;
   font-size: 11.5px;
   white-space: nowrap;
 }
-.tag.good { color: var(--good); border-color: #315e4a; }
-.tag.bad { color: var(--danger); border-color: #643943; }
+.tag.good { color: var(--good); }
+.tag.bad { color: var(--danger); }
 
-label { display: block; color: #b5bfcb; font-size: 12.5px; font-weight: 650; position: relative; }
-select, input[type="number"] {
+/* Controls --------------------------------------------------------------- */
+label {
+  display: block;
+  position: relative;
+  color: #b9c2cd;
+  font-size: 12.5px;
+  font-weight: 620;
+}
+select,
+input[type="number"] {
   width: 100%;
-  margin-top: 7px;
   height: 40px;
+  margin-top: 7px;
   border: 1px solid var(--line);
-  background: #0a0f15;
+  border-radius: 2px;
+  background: var(--surface-inset);
   color: var(--text);
-  border-radius: 4px;
-  padding: 0 9px;
+  padding: 0 10px;
   outline: none;
   font-size: 14px;
 }
-select:focus, input[type="number"]:focus { border-color: #5475a8; box-shadow: 0 0 0 2px rgba(84,117,168,.16); }
-.unit { position: absolute; right: 9px; bottom: 12px; color: #697687; font-size: 10.5px; pointer-events: none; }
-.field-grid { display: grid; gap: 10px; margin-bottom: 10px; }
+select:hover,
+input[type="number"]:hover { border-color: #374352; }
+select:focus,
+input[type="number"]:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 0 2px var(--focus);
+}
+.unit {
+  position: absolute;
+  right: 9px;
+  bottom: 12px;
+  color: var(--faint);
+  font-size: 10.5px;
+  pointer-events: none;
+}
+.field-grid { display: grid; gap: 11px; margin-bottom: 11px; }
 .field-grid.two { grid-template-columns: 1fr 1fr; }
 .field-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-.subcontrols { margin: 12px 0 4px; padding: 12px; border: 1px solid var(--line-soft); background: #0a0f15; }
+.subcontrols {
+  margin: 13px 0 5px;
+  padding: 13px;
+  border: 1px solid var(--line-soft);
+  background: var(--surface-inset);
+}
 .subcontrols .section-kicker { margin-bottom: 10px; }
-hr { border: 0; border-top: 1px solid var(--line-soft); margin: 17px 0; }
-.section-kicker { margin-bottom: 10px; }
+hr { border: 0; border-top: 1px solid var(--line-soft); margin: 18px 0; }
 .hidden { display: none !important; }
+.field-disabled { opacity: 0.5; }
 
-button.primary, button.secondary {
-  height: 43px;
-  border-radius: 4px;
-  font-weight: 700;
+input[type="file"] {
+  width: 100%;
+  margin-top: 8px;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: 2px;
+  background: var(--surface-inset);
+  color: var(--text-soft);
+  font-size: 12.5px;
+}
+input[type="file"]::file-selector-button {
+  margin-right: 10px;
+  padding: 7px 10px;
+  border: 1px solid #3b4858;
+  border-radius: 2px;
+  background: var(--surface-raised);
+  color: var(--text-soft);
+  cursor: pointer;
+}
+.trace-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  margin-top: 10px;
+  color: var(--text-soft);
+  font-size: 12.5px;
+}
+.control-help,
+.tiny-note {
+  margin: 9px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+  line-height: 1.55;
+}
+
+button.primary,
+button.secondary {
+  min-height: 41px;
+  border-radius: 2px;
+  font-size: 13.5px;
+  font-weight: 680;
   cursor: pointer;
-  transition: .12s ease;
+  transition: background-color 110ms ease, border-color 110ms ease, color 110ms ease;
+}
+button.primary {
+  width: 100%;
+  margin-top: 11px;
+  border: 1px solid #6489c0;
+  background: var(--accent-strong);
+  color: #fff;
+}
+button.primary:hover:not(:disabled) { background: #5885c5; }
+button.secondary {
+  border: 1px solid var(--line);
+  background: transparent;
+  color: var(--text-soft);
 }
-button.primary { width: 100%; border: 1px solid #668fd5; background: #4f7fce; color: white; margin-top: 11px; }
-button.primary:hover:not(:disabled) { background: #5b8bd8; }
-button.secondary { border: 1px solid var(--line); background: #0b1016; color: #c4ccd7; }
 button.secondary:hover:not(:disabled),
 .mini-button:hover:not(:disabled),
 .chart-expand:hover,
-.chart-download:hover { border-color: #536174; background: #151b24; color: #d9e0e8; }
-button:disabled { opacity: .42; cursor: not-allowed; }
-.compact { width: auto !important; min-width: 178px; padding: 0 17px; margin-top: 0 !important; }
+.chart-download:hover {
+  border-color: #465466;
+  background: var(--surface-raised);
+  color: var(--text);
+}
+button:disabled { opacity: 0.4; cursor: not-allowed; }
+.compact {
+  width: auto !important;
+  min-width: 160px;
+  padding: 0 16px;
+  margin-top: 0 !important;
+}
 .button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
-.action-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
-.checkline { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 600; }
+.action-stack,
+.stacked-actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: flex-end;
+  gap: 8px;
+}
+.stacked-actions .compact { min-width: 166px; }
+.horizontal-actions { margin: 10px 0 14px; justify-content: flex-start; }
+.checkline { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; font-weight: 600; }
 .checkline input { accent-color: var(--accent); }
 
-.empty-state { min-height: 380px; display: grid; place-content: center; text-align: center; color: var(--muted); padding: 30px; }
-.empty-state.small { min-height: 240px; }
-.empty-state h3 { color: #ccd4de; margin: 0 0 6px; font-size: 17px; }
-.empty-state p { max-width: 620px; margin: 0; line-height: 1.6; font-size: 13.5px; }
-.metric-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-bottom: 12px; }
-.metric-grid.four { grid-template-columns: repeat(4, 1fr); }
-.metric { min-height: 82px; padding: 13px; border: 1px solid var(--line-soft); background: var(--surface-2); }
-.metric span { display: block; color: var(--muted); font-size: 11.5px; margin-bottom: 9px; }
-.metric strong { font-size: 20px; letter-spacing: -.025em; }
+/* Results ---------------------------------------------------------------- */
+.empty-state {
+  min-height: 330px;
+  display: grid;
+  place-content: center;
+  padding: 28px;
+  text-align: center;
+  color: var(--muted);
+}
+.empty-state.small { min-height: 210px; }
+.empty-state h3 { margin: 0 0 6px; color: var(--text-soft); font-size: 16px; font-weight: 650; }
+.empty-state p { max-width: 620px; margin: 0; font-size: 13.5px; line-height: 1.6; }
+
+/* Metrics read as a strip, not a grid of product cards. */
+.metric-grid {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 0;
+  margin-bottom: 13px;
+  border: 1px solid var(--line-soft);
+  background: var(--surface-inset);
+}
+.metric-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.metric-grid.six-agent { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.metric-grid.eight-agent { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.metric {
+  min-height: 84px;
+  padding: 13px 14px;
+  border: 0;
+  border-right: 1px solid var(--line-soft);
+  background: transparent;
+}
+.metric:last-child { border-right: 0; }
+.metric span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 11.5px; }
+.metric strong { font-size: 20px; line-height: 1.2; letter-spacing: -0.025em; }
 .metric strong.metric-small { font-size: 14.5px; line-height: 1.35; }
-.metric.emphasis { border-color: #486da4; background: #101824; }
+.metric.emphasis { box-shadow: inset 0 2px 0 var(--accent); background: rgba(111, 150, 207, 0.055); }
 
-.diagnostic-card { margin-bottom: 12px; border: 1px solid var(--line); background: #0d131b; padding: 14px; }
+.diagnostic-card {
+  margin-bottom: 13px;
+  padding: 14px 15px;
+  border: 1px solid var(--line);
+  background: transparent;
+}
 .diagnostic-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
-.diagnostic-head span { color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; }
+.diagnostic-head span { color: var(--muted); font-size: 11.5px; }
 .diagnostic-head strong { font-size: 16px; }
-.diagnostic-card p { margin: 8px 0 0; color: #b8c1cd; font-size: 13.5px; line-height: 1.55; }
+.diagnostic-card p { margin: 8px 0 0; color: var(--text-soft); font-size: 13.5px; line-height: 1.55; }
 .diagnostic-card .diagnostic-action { color: var(--muted); }
-.evidence-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
-.evidence-row span { border: 1px solid var(--line-soft); background: #090e14; padding: 5px 7px; color: #8390a0; font: 11px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+.evidence-row { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; }
+.evidence-row span {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #8390a0;
+  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
 
-.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
-.chart-card { border: 1px solid var(--line); background: var(--surface-2); min-height: 300px; position: relative; }
+.study-summary {
+  margin-bottom: 11px;
+  padding: 9px 0 9px 12px;
+  border-left: 2px solid #526f96;
+  background: transparent;
+  color: #b9c3cf;
+  font-size: 13px;
+  line-height: 1.6;
+}
+.study-summary strong { color: var(--text); }
+.warnings,
+.planner-note {
+  margin-top: 10px;
+  padding: 9px 0 9px 11px;
+  border-left: 2px solid #756542;
+  background: transparent;
+  color: #bbb5a7;
+  font-size: 12.5px;
+  line-height: 1.55;
+}
+.planner-note { border-left-color: #496284; color: var(--muted); }
+.muted { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
+
+/* Charts ----------------------------------------------------------------- */
+.chart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+.chart-card {
+  position: relative;
+  min-height: 300px;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--surface-inset);
+}
 .chart-card.full { margin-top: 10px; }
-.chart-head { height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 12px; border-bottom: 1px solid var(--line-soft); }
-.chart-title { color: #c7d0db; font-size: 12.5px; font-weight: 700; }
+.chart-head {
+  min-height: 43px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 7px 11px 7px 13px;
+  border-bottom: 1px solid var(--line-soft);
+}
+.chart-title { color: var(--text-soft); font-size: 12.5px; font-weight: 650; }
 .chart-actions { display: flex; gap: 6px; }
-.chart-expand, .chart-download, .mini-button { border: 1px solid var(--line); background: #0a0f15; color: var(--muted); border-radius: 3px; cursor: pointer; height: 31px; padding: 0 10px; font-size: 11.5px; }
-.chart-body { height: 260px; padding: 10px 12px 12px; }
+.chart-expand,
+.chart-download,
+.mini-button {
+  height: 31px;
+  padding: 0 10px;
+  border: 1px solid var(--line);
+  border-radius: 2px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font-size: 11.5px;
+}
+.chart-body { height: 260px; padding: 11px 12px 12px; }
 .chart-body.large { height: 350px; }
-.chart-card.chart-expanded { position: fixed; inset: 16px; z-index: 100; background: #0a0f15; border-color: #4c596b; box-shadow: 0 0 0 9999px rgba(0,0,0,.76); min-height: 0; margin: 0; }
-.chart-card.chart-expanded .chart-body { height: calc(100vh - 80px); }
+.research-chart { height: 310px; }
+.chart-card.chart-expanded {
+  position: fixed;
+  inset: 14px;
+  z-index: 100;
+  min-height: 0;
+  margin: 0;
+  border-color: #4a5665;
+  background: #080d13;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.78);
+}
+.chart-card.chart-expanded .chart-body { height: calc(100vh - 78px); }
 body.chart-open { overflow: hidden; }
 canvas { width: 100% !important; height: 100% !important; max-height: none; }
 
-.warnings { margin-top: 10px; border-left: 3px solid #7b6840; padding: 10px 12px; background: #15140f; color: #c4bca9; font-size: 12.5px; line-height: 1.5; }
-.muted { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
-.table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; color: #aab4c1; font-size: 12.5px; }
+/* Tables ----------------------------------------------------------------- */
+.table-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-top: 16px;
+  color: #a8b2bf;
+  font-size: 12.5px;
+}
 .table-toolbar > div { display: flex; gap: 6px; }
-.table-wrap { overflow: auto; margin-top: 7px; border: 1px solid var(--line); }
-table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 900px; }
-th, td { padding: 10px 11px; text-align: right; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
-th:first-child, td:first-child { text-align: left; }
-th { color: #8e9aab; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; background: #090e14; position: sticky; top: 0; }
-td { color: #c7d0db; }
+.table-wrap {
+  overflow: auto;
+  margin-top: 7px;
+  border-top: 1px solid var(--line);
+  border-bottom: 1px solid var(--line);
+}
+table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 13.5px; }
+th,
+td {
+  padding: 10px 11px;
+  text-align: right;
+  border-bottom: 1px solid var(--line-soft);
+  white-space: nowrap;
+}
+th:first-child,
+td:first-child { text-align: left; }
+th {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  background: #090e14;
+  color: #95a1af;
+  font-size: 11.5px;
+  font-weight: 650;
+  text-transform: none;
+  letter-spacing: 0;
+}
+td { color: #c8d0da; }
 tbody tr:last-child td { border-bottom: 0; }
-tbody tr:hover td { background: #111821; }
+tbody tr:hover td { background: #0f161e; }
 .pass { color: var(--good); }
 .fail { color: var(--danger); }
-.best-label, .pareto-label { display: inline-block; margin-left: 7px; border: 1px solid #4a6386; color: #9ab8df; padding: 2px 5px; border-radius: 2px; font-size: 10.5px; text-transform: uppercase; }
-.planner-note { color: var(--muted); border-left: 2px solid #445a77; padding: 9px 11px; margin-bottom: 2px; font-size: 12.5px; line-height: 1.5; }
+.best-label,
+.pareto-label {
+  display: inline;
+  margin-left: 7px;
+  padding: 0;
+  border: 0;
+  color: #9db6d8;
+  font-size: 11px;
+  text-transform: none;
+}
 
-.method-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
-.prose { padding: 22px; }
-.prose h2 { font-size: 20px; margin: 8px 0 11px; }
-.prose p { color: var(--muted); line-height: 1.7; font-size: 14.5px; }
-.prose code { color: #a8bfe4; }
-.formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #b7c3d2; padding: 10px; border: 1px solid var(--line); background: #0a0f15; font-size: 12.5px; }
+/* Methodology: editorial layout instead of cards-in-cards. */
+.method-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  column-gap: 34px;
+  row-gap: 0;
+}
+.prose.panel {
+  padding: 22px 0 24px;
+  border: 0;
+  border-top: 1px solid var(--line);
+  background: transparent;
+}
+.prose h2 { margin: 0 0 10px; font-size: 19px; letter-spacing: -0.015em; }
+.prose p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
+.prose code { color: #a9bfdc; }
+.formula {
+  margin-top: 14px;
+  padding: 9px 11px;
+  border-left: 2px solid #435a79;
+  background: var(--surface-inset);
+  color: #b7c3d2;
+  font: 12.5px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
 .wide-method { grid-column: 1 / -1; }
-.paper-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
-.paper-grid > div { padding: 12px; border: 1px solid var(--line-soft); background: #0c1219; }
-.paper-grid strong { display: block; font-size: 12.5px; margin-bottom: 7px; }
-.paper-grid span { color: var(--muted); font-size: 11.5px; line-height: 1.55; display: block; }
-.toast { position: fixed; right: 20px; bottom: 20px; z-index: 130; background: #17202b; border: 1px solid #465467; color: #d5dce5; padding: 9px 12px; border-radius: 4px; font-size: 12.5px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .16s ease; }
+.paper-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 0 22px;
+  margin-top: 18px;
+}
+.paper-grid > div {
+  padding: 11px 0 13px;
+  border: 0;
+  border-top: 1px solid var(--line-soft);
+  background: transparent;
+}
+.paper-grid strong { display: block; margin-bottom: 5px; font-size: 12.5px; }
+.paper-grid span { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.55; }
+
+/* Experiment sections ---------------------------------------------------- */
+.experiment-subsection { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
+.predictive-controls { margin-top: 12px; }
+.research-secondary { width: 100%; margin-top: 10px; }
+
+.toast {
+  position: fixed;
+  right: 20px;
+  bottom: 20px;
+  z-index: 130;
+  max-width: min(480px, calc(100vw - 40px));
+  padding: 10px 12px;
+  border: 1px solid #465466;
+  border-radius: 2px;
+  background: #141c25;
+  color: #d6dde5;
+  font-size: 12.5px;
+  opacity: 0;
+  transform: translateY(8px);
+  pointer-events: none;
+  transition: opacity 140ms ease, transform 140ms ease;
+}
+.toast.error { border-color: #70424a; color: #efb0b8; }
 .toast.show { opacity: 1; transform: translateY(0); }
 
+/* Responsive ------------------------------------------------------------- */
+@media (max-width: 1250px) {
+  .metric-grid.six-agent { grid-template-columns: repeat(3, 1fr); }
+  .metric-grid.eight-agent { grid-template-columns: repeat(2, 1fr); }
+}
 @media (max-width: 1100px) {
-  .intro { grid-template-columns: 1fr; gap: 24px; }
-  .workspace, .planner-grid { grid-template-columns: 1fr; }
-  .controls-panel { position: static; }
+  .workspace,
+  .planner-grid,
+  .agent-layout,
+  .research-grid { grid-template-columns: 1fr; }
+  .controls-panel,
+  .agent-controls,
+  .research-controls { position: static; }
   .metric-grid { grid-template-columns: repeat(3, 1fr); }
   .paper-grid { grid-template-columns: 1fr 1fr; }
 }
-
+@media (max-width: 960px) {
+  .field-grid.four { grid-template-columns: 1fr 1fr; }
+}
 @media (max-width: 720px) {
-  .topbar { padding: 0 15px; }
-  .subtitle { display: none; }
-  .runtime-pill { max-width: 170px; }
-  .shell { width: calc(100% - 20px); padding-top: 88px; }
+  .topbar { padding: 0 14px; }
+  .runtime-pill { max-width: 180px; }
+  .shell { width: calc(100% - 20px); padding-top: 80px; }
   body.runtime-ready .shell { padding-top: 20px; }
-  .intro { padding-top: 10px; }
-  .project-facts div { grid-template-columns: 100px 1fr; }
-  .field-grid.two, .chart-grid, .method-grid { grid-template-columns: 1fr; }
-  .metric-grid, .metric-grid.four { grid-template-columns: 1fr 1fr; }
+  .intro { padding-top: 8px; }
+  .tabs { margin-top: 8px; }
+  .field-grid.two,
+  .field-grid.four,
+  .chart-grid,
+  .method-grid { grid-template-columns: 1fr; }
+  .metric-grid,
+  .metric-grid.four,
+  .metric-grid.six-agent,
+  .metric-grid.eight-agent { grid-template-columns: 1fr 1fr; }
+  .metric { border-bottom: 1px solid var(--line-soft); }
   .paper-grid { grid-template-columns: 1fr; }
   .panel-title-row { flex-direction: column; }
-  .arena-title-row .compact { width: 100% !important; }
-  .action-stack { width: 100%; align-items: stretch; }
+  .arena-title-row .compact,
+  .stacked-actions .compact { width: 100% !important; }
+  .action-stack,
+  .stacked-actions { width: 100%; align-items: stretch; }
   .wide-method { grid-column: auto; }
   .chart-card.chart-expanded { inset: 6px; }
 }
-
-
-/* Research-oriented readability and trace controls */
-.tab { font-size: 13.5px; }
-button.primary, button.secondary { font-size: 13.5px; }
-input[type="file"] {
-  width: 100%; margin-top: 8px; color: #c4ccd7; font-size: 12.5px;
-  border: 1px solid var(--line); background: #090e14; padding: 9px; border-radius: 4px;
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
 }
-input[type="file"]::file-selector-button {
-  border: 1px solid #425168; background: #111925; color: #d4dbe4; padding: 7px 10px;
-  margin-right: 10px; border-radius: 3px; cursor: pointer;
-}
-.trace-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; color: #b8c1cc; font-size: 12.5px; }
-.control-help { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
-.research-grid { display: grid; grid-template-columns: 390px minmax(0, 1fr); gap: 14px; align-items: start; }
-.research-controls { padding: 20px; position: sticky; top: 16px; }
-.research-results { display: grid; gap: 14px; min-width: 0; }
-.research-panel { padding: 20px; }
-.research-secondary { width: 100%; margin-top: 10px; }
-.study-summary { border-left: 2px solid #516d92; background: #0a1017; padding: 11px 13px; color: #b9c3cf; font-size: 13px; line-height: 1.6; margin-bottom: 10px; }
-.study-summary strong { color: #e1e7ee; }
-.research-chart { height: 310px; }
-@media (max-width: 1100px) { .research-grid { grid-template-columns: 1fr; } .research-controls { position: static; } }
-
-/* Stateful agent-session experiments */
-.agent-layout { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 14px; align-items: start; }
-.agent-controls { padding: 20px; position: sticky; top: 16px; }
-.agent-results { display: grid; gap: 14px; min-width: 0; }
-.metric-grid.six-agent { grid-template-columns: repeat(6, minmax(0, 1fr)); }
-@media (max-width: 1250px) { .metric-grid.six-agent { grid-template-columns: repeat(3, 1fr); } }
-@media (max-width: 1100px) { .agent-layout { grid-template-columns: 1fr; } .agent-controls { position: static; } }
-@media (max-width: 720px) { .metric-grid.six-agent { grid-template-columns: 1fr 1fr; } }
-.field-disabled { opacity: .55; }
-.metric-grid.eight-agent { grid-template-columns: repeat(4, minmax(0, 1fr)); }
-.stacked-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
-.stacked-actions .compact { min-width: 168px; }
-.horizontal-actions { margin: 10px 0 14px; justify-content: flex-start; }
-.predictive-controls { margin-top: 12px; }
-@media (max-width: 1250px) { .metric-grid.eight-agent { grid-template-columns: repeat(2, 1fr); } }
-@media (max-width: 960px) { .field-grid.four { grid-template-columns: 1fr 1fr; } }
-@media (max-width: 720px) { .metric-grid.eight-agent { grid-template-columns: 1fr 1fr; } .field-grid.four { grid-template-columns: 1fr; } .stacked-actions { width: 100%; } .stacked-actions .compact { width: 100% !important; } }
-.experiment-subsection { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }