CI deploy 024e1919

app.py

@@ -1,22 +1,24 @@
 """Bit Trading Company — Backtest Lab.
 
-Layout follows the design: Strategy Builder on the left, tabbed Results Canvas
-in the centre, Run Manager on the right, disclaimer pinned to the footer.
+The visible chrome and every control is the design's own markup, rendered by
+`src/ui/shell.py` and wired back to Python through `src/ui/bridge.py`. Gradio
+owns the plots and the transport; it no longer owns the layout.
 
-This module is layout and wiring only. Formatting lives in `src/ui/format.py`,
-markup in `src/ui/components.py`, the global comparison in
-`src/ui/compare_tab.py`, and every number in `src/metrics.py`.
+That split exists because the design is built from `<button>` elements with
+exact inline styles — 23 buttons against a single `<input>` in the whole file —
+while Gradio renders a different DOM for the same concepts. Restyling Gradio's
+components from outside only ever approximated it. See docs/DESIGN.md.
 
-The app reads exclusively from the cached signal store. The only path that can
-reach an external provider is the batch refresh in `scripts/seed_store.py`, and
-the only path that runs inference is the ZeroGPU flow in `src/extension.py`,
-which spends the signed-in user's own quota.
+Everything below the chrome is unchanged: the Compare catalog, the engine, the
+store and the charts are the same code they were.
 """
 
 from __future__ import annotations
 
+import copy
 import logging
 import os
+import uuid
 
 import gradio as gr
 import pandas as pd
@@ -25,56 +27,277 @@ from src import catalog, charts, config, extension, runtime, strategies
 from src.runtime import RunError, RunRecord, RunRequest
 from src.ui import components as C
 from src.ui import compare_tab as CT
-from src.ui import theme
-from src.ui.format import EM, count, money, num, pct
+from src.ui import shell, theme
+from src.ui.bridge import ACTION_ELEMENT_ID, BRIDGE_JS, parse_action, parse_pair
+from src.ui.format import EM, count, esc, money, num, pct, tone
 
 logging.basicConfig(level=logging.INFO, format="%(asctime)s %(name)s %(message)s")
 log = logging.getLogger("bit.app")
 
-MAX_COMPARE = 6
-
 GLOSSARY = [
-    ("SHARPE", "Annualized mean excess return divided by return volatility. "
+    ("SHARPE", "Annualized mean excess return over return volatility. "
                "Above 1 is good; above 3 usually means a bug."),
     ("SORTINO", "Sharpe with only downside deviation in the denominator."),
     ("MAX DRAWDOWN", "Worst peak-to-trough decline of the equity curve."),
-    ("PROFIT FACTOR", "Gross profit over gross loss. Below 1.2 rarely survives real costs."),
-    ("R-MULTIPLE", "Trade P&L expressed in units of initial risk."),
-    ("MAE / MFE", "Worst and best unrealized excursion while the trade was open."),
-    ("WALK-FORWARD", "Train on a rolling window, test on the next unseen window, repeat."),
-    ("OOS", "Out of sample: data the parameters never saw during fitting."),
-    ("BASELINE", "A naive forecast (random walk, drift, seasonal). If a learned "
-                 "model cannot beat these, it has not earned its inference cost."),
+    ("PROFIT FACTOR", "Gross profit over gross loss."),
+    ("R-MULTIPLE", "Trade P&L in units of initial risk."),
+    ("MAE / MFE", "Worst and best unrealized excursion while open."),
+    ("WALK-FORWARD", "Train on a rolling window, test on the next unseen one."),
+    ("OOS", "Out of sample: data the parameters never saw."),
+    ("BASELINE", "A naive forecast. If a learned model cannot beat these, it "
+                 "has not earned its inference cost."),
 ]
 
-METHOD_NOTES = """
-- Fills execute at the **next bar's open**. A decision at bar `t` can never trade at bar `t`.
-- Strategies are checked for lookahead by perturbing future prices up *and* down
-  and asserting past outputs do not move.
-- Costs are **on by default**: commission per side plus a slippage model, both
-  booked onto every trade row. `gross − costs = net` holds exactly.
-- The locked holdout is excluded from every parameter-selection path, not merely
-  reported separately.
-- The store holds raw model outputs only. Trading rules are applied live, per run.
-- Catalog rows all use one canonical config (costs on, walk-forward 12/3/3,
-  6-month holdout) so they are comparable with each other.
-"""
+NUMERIC_PARAMS = {
+    "commission_bps": float, "slippage_bps": float, "size_pct": float,
+    "leverage": float, "sl_pct": float, "tp_pct": float, "trail_pct": float,
+    "train_months": int, "test_months": int, "roll_months": int,
+    "holdout_months": int,
+}
 
 
 # --------------------------------------------------------------------------
-# Presentation helpers
+# State
 # --------------------------------------------------------------------------
 
 
-def context_chip_text(req: RunRequest) -> str:
+def default_state() -> dict:
+    return {
+        "strategy": "SMA Crossover",
+        "asset": "BTC-USD",
+        "timeframe": "1d",
+        "range": "3Y",
+        "model": None,
+        "params": dict(strategies.defaults_for("SMA Crossover")),
+        "costs_on": True,
+        "commission_bps": config.DEFAULT_COMMISSION_BPS,
+        "slippage_bps": config.DEFAULT_SLIPPAGE_BPS,
+        "slippage_model": "fixed",
+        "sizing_mode": "fixed_pct",
+        "size_pct": 1.0,
+        "leverage": 1.0,
+        "sl_pct": None, "tp_pct": None, "trail_pct": None,
+        "validation_mode": "walk_forward",
+        "train_months": 12, "test_months": 3, "roll_months": 3,
+        "holdout_months": config.DEFAULT_HOLDOUT_MONTHS,
+        "acc": {"strategy": True, "universe": True,
+                "costs": False, "sizing": False, "validation": False},
+        "cfg_id": uuid.uuid4().hex[:4].upper(),
+        "coverage": "",
+        "needs_signals": False,
+        "log_scale": False, "cvd": False,
+        "metric": "OOS Sharpe", "topn": 15,
+        "sig_asset": "BTC-USD", "sig_tf": "1d",
+    }
+
+
+def to_request(st: dict) -> RunRequest:
+    return RunRequest(
+        strategy=st["strategy"], asset=st["asset"], timeframe=st["timeframe"],
+        date_range=st["range"], model_slug=st.get("model") or "",
+        params=dict(st["params"]),
+        costs_on=st["costs_on"], commission_bps=float(st["commission_bps"]),
+        slippage_bps=float(st["slippage_bps"]), slippage_model=st["slippage_model"],
+        sizing_mode=st["sizing_mode"], size_pct=float(st["size_pct"]),
+        leverage=float(st["leverage"]),
+        sl_pct=(float(st["sl_pct"]) / 100.0 if st["sl_pct"] else None),
+        tp_pct=(float(st["tp_pct"]) / 100.0 if st["tp_pct"] else None),
+        trail_pct=(float(st["trail_pct"]) / 100.0 if st["trail_pct"] else None),
+        validation_mode=st["validation_mode"],
+        train_months=int(st["train_months"]), test_months=int(st["test_months"]),
+        roll_months=int(st["roll_months"]), holdout_months=int(st["holdout_months"]),
+    )
+
+
+def refresh_context(st: dict) -> dict:
+    """Recompute what depends on the current asset/timeframe/strategy."""
+    preset = strategies.PRESETS.get(st["strategy"])
+    st["needs_signals"] = bool(preset and preset.needs_signals)
+    models = runtime.available_models(st["asset"], st["timeframe"])
+    if st["needs_signals"] and st.get("model") not in models:
+        st["model"] = models[0] if models else None
+    cov = runtime.price_coverage_for(st["asset"], st["timeframe"])
+    st["coverage"] = (f"cached {cov[0]} to {cov[1]} · {len(models)} models"
+                      if cov else "no cached coverage")
+    return st
+
+
+def apply_action(st: dict, raw: str) -> tuple[dict, bool]:
+    """Fold one UI action into state. Returns (state, should_run)."""
+    action = parse_action(raw)
+    if action is None or action.is_noop:
+        return st, False
+
+    k, v = action.key, action.value
+
+    if k == "acc":
+        st["acc"][v] = not st["acc"].get(v, False)
+    elif k == "strategy" and v in strategies.PRESETS:
+        st["strategy"] = v
+        st["params"] = dict(strategies.defaults_for(v))
+    elif k == "asset" and v in config.ASSETS:
+        st["asset"] = v
+    elif k == "tf" and v in config.TIMEFRAMES:
+        st["timeframe"] = v
+    elif k == "range" and v in runtime.RANGE_YEARS:
+        st["range"] = v
+    elif k == "model":
+        st["model"] = v or None
+    elif k == "slippage" and v in ("fixed", "volume_scaled"):
+        st["slippage_model"] = v
+    elif k == "sizing" and v in ("fixed_pct", "vol_target"):
+        st["sizing_mode"] = v
+    elif k == "validation" and v in ("walk_forward", "split", "holdout", "none"):
+        st["validation_mode"] = v
+    elif k == "costs":
+        _, val = parse_pair(v) if "=" in v else ("", v)
+        st["costs_on"] = str(val) == "1"
+    elif k == "param":
+        name, val = parse_pair(v)
+        st = _set_param(st, name, val)
+    elif k == "logscale":
+        st["log_scale"] = not st["log_scale"]
+    elif k == "cvd":
+        st["cvd"] = not st["cvd"]
+    elif k == "metric" and v in CT.RANK_METRICS:
+        st["metric"] = v
+    elif k == "topn":
+        try:
+            st["topn"] = max(5, min(50, int(v)))
+        except ValueError:
+            pass
+    elif k == "sigasset" and v in config.ASSETS:
+        st["sig_asset"] = v
+    elif k == "sigtf" and v in config.TIMEFRAMES:
+        st["sig_tf"] = v
+    elif k == "example":
+        st.update(strategy="Chronos Forecast Follower", asset="BTC-USD",
+                  timeframe="1d", range="3Y",
+                  params=dict(strategies.defaults_for("Chronos Forecast Follower")))
+        st = refresh_context(st)
+        return st, True
+    elif k == "run":
+        return refresh_context(st), True
+
+    return refresh_context(st), False
+
+
+def _set_param(st: dict, name: str, raw: str) -> dict:
+    """Set a numeric field, ignoring anything that is not a number."""
+    if name in NUMERIC_PARAMS:
+        cast = NUMERIC_PARAMS[name]
+        if raw == "":
+            st[name] = None if name in ("sl_pct", "tp_pct", "trail_pct") else st[name]
+            return st
+        try:
+            st[name] = cast(float(raw))
+        except (TypeError, ValueError):
+            pass
+        return st
+
+    preset = strategies.PRESETS.get(st["strategy"])
+    valid = {p[0] for p in (preset.params if preset else ())}
+    if name in valid:
+        try:
+            st["params"][name] = float(raw)
+        except (TypeError, ValueError):
+            pass
+    return st
+
+
+# --------------------------------------------------------------------------
+# Renderers
+# --------------------------------------------------------------------------
+
+
+def render_left(st: dict) -> str:
+    preset = strategies.PRESETS.get(st["strategy"])
+    params = [(k, label, default) for k, label, default, _lo, _hi
+              in (preset.params if preset else ())]
+    return shell.left_panel(
+        st,
+        presets=[p.name for p in strategies.PRESETS.values() if p.available],
+        assets=runtime.available_assets(),
+        timeframes=list(config.TIMEFRAMES),
+        models=runtime.available_models(st["asset"], st["timeframe"]),
+        preset_params=params,
+    )
+
+
+def render_top(st: dict, rec: RunRecord | None) -> str:
+    if rec is None:
+        return shell.top_bar(status="NO RUN LOADED", tone="idle")
     mode = {"walk_forward": "WALK-FORWARD", "holdout": "HOLDOUT",
-            "split": "SPLIT", "none": "NO SPLIT"}.get(req.validation_mode, "")
+            "split": "SPLIT", "none": "NO SPLIT"}.get(st["validation_mode"], "")
     try:
-        s, e = runtime.window_for(req.asset, req.timeframe, req.date_range)
-        span = f"{s.date()} → {e.date()}"
+        s, e = runtime.window_for(st["asset"], st["timeframe"], st["range"])
+        span = f"{s.date()} to {e.date()}"
     except Exception:
-        span = req.date_range
-    return f"{req.asset} · {req.timeframe.upper()} · {span} · {mode}"
+        span = st["range"]
+    ctx = f'{st["asset"]} · {st["timeframe"].upper()} · {span} · {mode}'
+    return shell.top_bar(context=ctx, status=f"RUN {rec.run_id} COMPLETE",
+                         tone="ok", elapsed=f"{rec.elapsed_s:.1f}s")
+
+
+def render_stat_band(rec: RunRecord | None) -> str:
+    if rec is None:
+        return ""
+    r = rec.result
+    a, i, o = r.metrics_all, r.metrics_is, r.metrics_oos
+
+    def seg(m, fmt, key, *args):
+        return EM if m.bars == 0 else fmt(getattr(m, key), *args)
+
+    def isoos(fmt, key, *args):
+        return f"IS {seg(i, fmt, key, *args)} · OOS {seg(o, fmt, key, *args)}"
+
+    bench = (float(r.benchmark_equity.iloc[-1] / r.benchmark_equity.iloc[0] - 1.0)
+             if len(r.benchmark_equity) else float("nan"))
+    gap = a.total_return - bench if pd.notna(bench) else float("nan")
+
+    spec = [
+        ("Total return", pct(a.total_return), isoos(pct, "total_return"),
+         tone(a.total_return)),
+        ("CAGR", pct(a.cagr), isoos(pct, "cagr"), tone(a.cagr)),
+        ("Sharpe", num(a.sharpe), isoos(num, "sharpe"), tone(a.sharpe)),
+        ("Sortino", num(a.sortino), isoos(num, "sortino"), tone(a.sortino)),
+        ("Max drawdown", pct(a.max_drawdown), isoos(pct, "max_drawdown"), "down"),
+        ("Win rate", pct(a.win_rate, 0, signed=False),
+         f"IS {seg(i, pct, 'win_rate', 0, False)} · OOS {seg(o, pct, 'win_rate', 0, False)}", ""),
+        ("Profit factor", num(a.profit_factor), isoos(num, "profit_factor"),
+         tone(a.profit_factor - 1.0)),
+        ("Trades", count(a.trade_count),
+         f"IS {seg(i, count, 'trade_count')} · OOS {seg(o, count, 'trade_count')}", ""),
+        ("Exposure", pct(a.exposure, 0, signed=False),
+         f"IS {seg(i, pct, 'exposure', 0, False)} · OOS {seg(o, pct, 'exposure', 0, False)}", ""),
+        ("vs buy & hold", pct(gap), f"costs paid {money(r.costs_paid)}", tone(gap)),
+    ]
+    cells = [shell.stat_cell(l, v, s, tone_class=("up" if t == "bit-up" else
+                                                  "down" if t == "bit-down" else ""))
+             for l, v, s, t in spec]
+
+    notes = [shell.note(esc(n), danger=True) for n in getattr(r.plan, "notes", [])]
+    if r.metrics_holdout is not None:
+        h = r.metrics_holdout
+        ok = h.total_return > 0
+        notes.append(shell.note(
+            f"<b>LOCKED HOLDOUT</b> · return {pct(h.total_return)} · "
+            f"Sharpe {num(h.sharpe)} · {h.bars} bars never used for any "
+            f"parameter choice." + ("" if ok else " <b>It loses money here.</b>"),
+            danger=not ok))
+    return shell.stat_band(cells, notes)
+
+
+def render_right(hist) -> str:
+    runs = [(r.label, r.meta, r.sharpe, r.result.metrics_all.total_return)
+            for r in (hist or [])]
+    return shell.right_panel(runs, GLOSSARY)
+
+
+def render_table(df, *, align_right=(), empty="no rows", max_height="430px") -> str:
+    headers, rows = shell.frame_to_rows(df)
+    return shell.table(headers, rows, align_right=set(align_right),
+                       empty=empty, max_height=max_height)
 
 
 def trades_frame(rec: RunRecord | None) -> pd.DataFrame:
@@ -89,21 +312,14 @@ def trades_frame(rec: RunRecord | None) -> pd.DataFrame:
         "Exit": t["exit_ts"].dt.strftime("%Y-%m-%d %H:%M"),
         "Side": t["side"].str.upper(),
         "Entry px": t["entry_px"].round(2), "Exit px": t["exit_px"].round(2),
-        "Size": t["size"].round(4),
-        "Gross": t["gross_pnl"].round(2), "Costs": t["costs"].round(2),
-        "Net": t["net_pnl"].round(2), "R": t["r_multiple"].round(2),
-        "Bars": t["duration_bars"], "MAE": (t["mae"] * 100).round(1),
-        "Segment": t["segment"], "Trigger": t["trigger"],
+        "Size": t["size"].round(4), "Gross": t["gross_pnl"].round(2),
+        "Costs": t["costs"].round(2), "Net": t["net_pnl"].round(2),
+        "R": t["r_multiple"].round(2), "Bars": t["duration_bars"],
+        "MAE": (t["mae"] * 100).round(1), "Segment": t["segment"],
+        "Trigger": t["trigger"],
     })
 
 
-def trades_head(rec: RunRecord | None) -> str:
-    if rec is None or rec.result.trades.empty:
-        return C.micro("no trades")
-    return C.micro(f"{len(rec.result.trades)} total · costs paid "
-                   f"{money(rec.result.costs_paid)} · fills at next bar open")
-
-
 def report_markdown(rec: RunRecord | None) -> str:
     if rec is None:
         return "_Run a backtest to generate the report._"
@@ -116,7 +332,6 @@ def report_markdown(rec: RunRecord | None) -> str:
              if len(r.benchmark_equity) else float("nan"))
     ratio = (o.sharpe / r.metrics_is.sharpe) if r.metrics_is.sharpe else float("nan")
     grade, checks = runtime.overfit_verdict(rec)
-
     lines = [
         f"### {rec.label}",
         f"`RUN {rec.run_id} · {rec.created_at} · {req.validation_mode.upper()} · "
@@ -124,19 +339,17 @@ def report_markdown(rec: RunRecord | None) -> str:
         f"Over {a.bars} bars and {a.trade_count} trades the strategy returns "
         f"**{pct(a.total_return)}** (CAGR {pct(a.cagr)}, Sharpe {num(a.sharpe)}) "
         f"against **{pct(bench)}** for buy and hold, with a maximum drawdown of "
-        f"{pct(a.max_drawdown)}. Modelled costs of {money(r.costs_paid)} are already "
-        f"deducted — the costed number is the real one.", "",
-        (f"Out-of-sample Sharpe is {num(o.sharpe)}, which is {num(ratio)} of the "
-         f"in-sample figure." if o.bars else
-         "**No out-of-sample period was produced for this configuration**, so every "
-         "number above is in-sample. Widen the date range or shorten the training "
-         "window before reading anything into it."),
-        "",
-        (f"On the locked holdout — {h.bars} bars no parameter choice ever touched — "
-         f"it returns {pct(h.total_return)} at Sharpe {num(h.sharpe)}." if h else ""),
+        f"{pct(a.max_drawdown)}. Modelled costs of {money(r.costs_paid)} are "
+        f"already deducted.", "",
+        (f"Out-of-sample Sharpe is {num(o.sharpe)}, {num(ratio)} of in-sample."
+         if o.bars else
+         "**No out-of-sample period was produced**, so every number above is "
+         "in-sample."), "",
+        (f"On the locked holdout ({h.bars} bars) it returns {pct(h.total_return)} "
+         f"at Sharpe {num(h.sharpe)}." if h else ""),
         "", f"**Verdict: {grade}**", "",
     ]
-    lines += [f"- {mark} {text}" for mark, text in checks]
+    lines += [f"- {m} {t}" for m, t in checks]
     lines += ["", "#### Config snapshot", "```json",
               json.dumps(asdict(req), indent=2, sort_keys=True), "```"]
     return "\n".join(lines)
@@ -145,12 +358,14 @@ def report_markdown(rec: RunRecord | None) -> str:
 def build_overview(rec: RunRecord, *, log_scale: bool, cvd: bool):
     r = rec.result
     bpy = config.bars_per_year(rec.request.asset, rec.request.timeframe)
-    window = {"1d": 90, "1h": 24 * 30, "15m": 4 * 24 * 14}.get(rec.request.timeframe, 90)
+    window = {"1d": 90, "1h": 24 * 30, "15m": 4 * 24 * 14}.get(
+        rec.request.timeframe, 90)
     costs_html = (
-        C.note(f"<b>COSTS PAID TOTAL: {money(r.costs_paid)}</b>. "
-               "The costed number is the real one.")
+        shell.note(f"<b>COSTS PAID TOTAL: {money(r.costs_paid)}</b>. "
+                   "The costed number is the real one.")
         if rec.request.costs_on else
-        C.note("<b>COSTS ARE OFF.</b> These numbers are not achievable.", danger=True))
+        shell.note("<b>COSTS ARE OFF.</b> These numbers are not achievable.",
+                   danger=True))
     return (
         charts.equity_curve(r.equity, r.benchmark_equity, plan=r.plan,
                             log_scale=log_scale, cvd=cvd),
@@ -165,37 +380,6 @@ def build_overview(rec: RunRecord, *, log_scale: bool, cvd: bool):
     )
 
 
-def collect_request(strategy, asset, timeframe, date_range, model_slug,
-                    p1, p2, p3, costs_on, commission_bps, slippage_bps,
-                    slippage_model, sizing_mode, size_pct, leverage,
-                    sl_pct, tp_pct, trail_pct,
-                    validation_mode, train_m, test_m, roll_m, holdout_m) -> RunRequest:
-    preset = strategies.PRESETS.get(strategy)
-    params = {}
-    if preset:
-        for (key, _l, _d, _lo, _hi), value in zip(preset.params, (p1, p2, p3)):
-            if value is not None:
-                params[key] = value
-    return RunRequest(
-        strategy=strategy, asset=asset, timeframe=timeframe, date_range=date_range,
-        model_slug=model_slug or "", params=params,
-        costs_on=bool(costs_on), commission_bps=float(commission_bps),
-        slippage_bps=float(slippage_bps),
-        slippage_model="volume_scaled" if slippage_model == "Volume-scaled" else "fixed",
-        sizing_mode={"Fixed %": "fixed_pct",
-                     "Vol-target 15% ann.": "vol_target"}.get(sizing_mode, "fixed_pct"),
-        size_pct=float(size_pct), leverage=float(leverage),
-        sl_pct=(float(sl_pct) / 100.0 if sl_pct else None),
-        tp_pct=(float(tp_pct) / 100.0 if tp_pct else None),
-        trail_pct=(float(trail_pct) / 100.0 if trail_pct else None),
-        validation_mode={"Walk-forward": "walk_forward", "Simple split": "split",
-                         "Holdout only": "holdout", "None": "none"}.get(
-                             validation_mode, "walk_forward"),
-        train_months=int(train_m), test_months=int(test_m), roll_months=int(roll_m),
-        holdout_months=int(holdout_m),
-    )
-
-
 # --------------------------------------------------------------------------
 # App
 # --------------------------------------------------------------------------
@@ -205,190 +389,62 @@ def build_app() -> gr.Blocks:
     store = runtime.get_store()
     all_assets = runtime.available_assets()
     all_tfs = list(config.TIMEFRAMES)
-    all_strategies = [p.name for p in strategies.PRESETS.values()]
-    all_models = sorted(config.SEED_MODELS)
 
     with gr.Blocks(theme=theme.bit_theme(), css=theme.full_css(),
-                   title="Bit · Backtest Lab", analytics_enabled=False,
-                   fill_height=True) as demo:
+                   head=BRIDGE_JS, title="Bit · Backtest Lab",
+                   analytics_enabled=False, fill_height=True) as demo:
 
+        state = gr.State(default_state())
         history = gr.State([])
         current = gr.State(None)
 
-        top_bar = gr.HTML(C.top_bar())
-
-        with gr.Row(equal_height=False):
-            # ------------------------- LEFT -------------------------
-            with gr.Column(scale=2, min_width=270):
-                gr.HTML('<div class="bit-zone-title">Strategy Builder</div>')
-
-                with gr.Accordion("1 · STRATEGY", open=True, elem_classes="bit-accordion"):
-                    strategy = gr.Dropdown(all_strategies, value="SMA Crossover",
-                                           label="Preset", interactive=True)
-                    preset_note = gr.HTML("")
-                    p1 = gr.Number(label="Fast MA", value=20, precision=4)
-                    p2 = gr.Number(label="Slow MA", value=50, precision=4)
-                    p3 = gr.Number(label="—", value=None, visible=False, precision=4)
-                    model_slug = gr.Dropdown(runtime.available_models(), value=None,
-                                             label="Forecast model", visible=False)
-
-                with gr.Accordion("2 · UNIVERSE & DATA", open=True,
-                                  elem_classes="bit-accordion"):
-                    asset = gr.Dropdown(all_assets, value="BTC-USD", label="Asset")
-                    timeframe = gr.Radio(all_tfs, value="1d", label="Timeframe")
-                    date_range = gr.Radio(["1Y", "3Y", "5Y", "Max"], value="3Y",
-                                          label="Date range")
-                    coverage_note = gr.HTML("")
-
-                with gr.Accordion("3 · COSTS & EXECUTION", open=False,
-                                  elem_classes="bit-accordion"):
-                    costs_on = gr.Checkbox(value=True, label="Costs on")
-                    gr.HTML(C.note("Costs on. Turning these off is how strategies "
-                                   "lie to you."))
-                    commission_bps = gr.Number(value=10.0, label="Commission bps / side")
-                    slippage_bps = gr.Number(value=5.0, label="Slippage bps")
-                    slippage_model = gr.Radio(["Fixed bps", "Volume-scaled"],
-                                              value="Fixed bps", label="Slippage model")
-                    gr.Radio(["Next bar open"], value="Next bar open", label="Fill",
-                             interactive=False,
-                             info="Next-bar-open execution is enforced by the engine.")
-
-                with gr.Accordion("4 · SIZING & RISK", open=False,
-                                  elem_classes="bit-accordion"):
-                    sizing_mode = gr.Radio(["Fixed %", "Vol-target 15% ann."],
-                                           value="Fixed %", label="Sizing")
-                    size_pct = gr.Slider(0.05, 1.0, value=1.0, step=0.05,
-                                         label="Position size")
-                    leverage = gr.Slider(1.0, 3.0, value=1.0, step=0.5, label="Leverage")
-                    sl_pct = gr.Number(value=None, label="Stop loss %")
-                    tp_pct = gr.Number(value=None, label="Take profit %")
-                    trail_pct = gr.Number(value=None, label="Trailing stop %")
-
-                with gr.Accordion("5 · VALIDATION", open=False,
-                                  elem_classes="bit-accordion"):
-                    validation_mode = gr.Radio(
-                        ["Walk-forward", "Simple split", "Holdout only", "None"],
-                        value="Walk-forward", label="Mode")
-                    train_m = gr.Number(value=12, label="Train months", precision=0)
-                    test_m = gr.Number(value=3, label="Test months", precision=0)
-                    roll_m = gr.Number(value=3, label="Roll months", precision=0)
-                    holdout_m = gr.Number(value=6, label="OOS holdout months", precision=0)
-
-                run_btn = gr.Button("▶ Run backtest", variant="primary",
-                                    elem_classes="bit-run-btn")
-                with gr.Row():
-                    example_btn = gr.Button("Load example", size="sm",
-                                            elem_classes="bit-ghost-btn")
-                    share_btn = gr.Button("Share link", size="sm",
-                                          elem_classes="bit-ghost-btn")
-                share_out = gr.Textbox(label="Share token", visible=False,
-                                       show_copy_button=True, lines=2)
-
-            # ------------------------ CENTER ------------------------
-            with gr.Column(scale=8, min_width=560):
-                stat_band = gr.HTML("")
+        # The bridge target. Hidden, but must stay in the DOM for the
+        # delegated listener to find and write into.
+        action_box = gr.Textbox(elem_id=ACTION_ELEMENT_ID, visible=False,
+                                label="", show_label=False)
+
+        top_html = gr.HTML(shell.top_bar())
+
+        with gr.Row(elem_classes="bit-zones", equal_height=False):
+            with gr.Column(elem_classes="bit-zone-left", min_width=0):
+                left_html = gr.HTML(render_left(default_state()))
+
+            with gr.Column(elem_classes="bit-zone-center", min_width=0):
+                stat_html = gr.HTML("")
 
                 with gr.Tabs():
-                    # ---------------- COMPARE (landing) ----------------
                     with gr.Tab("Compare"):
-                        gr.HTML('<div class="bit-zone-title">Everything this Space '
-                                'has computed<span class="bit-micro">CATALOG · '
-                                'PRECOMPUTED FROM THE SIGNAL STORE</span></div>')
                         catalog_meta = gr.HTML("")
-
                         with gr.Tabs():
                             with gr.Tab("Leaderboard"):
                                 podium = gr.HTML("")
-                                with gr.Row():
-                                    f_metric = gr.Dropdown(
-                                        list(CT.RANK_METRICS), value="OOS Sharpe",
-                                        label="Rank by", scale=2)
-                                    f_top = gr.Slider(5, 50, value=15, step=5,
-                                                      label="Show top", scale=2)
-                                    f_min_trades = gr.Slider(
-                                        0, 100, value=0, step=5,
-                                        label="Min trades", scale=2)
-                                # Collapsed by default: an unfiltered board is the
-                                # useful default view, and an open wall of chips
-                                # pushes the table and charts below the fold.
-                                with gr.Accordion("FILTERS · ALL COMBINATIONS SHOWN",
-                                                  open=False,
-                                                  elem_classes="bit-accordion"):
-                                    with gr.Row():
-                                        f_assets = gr.CheckboxGroup(all_assets, value=[],
-                                                                    label="Assets")
-                                        f_tfs = gr.CheckboxGroup(all_tfs, value=[],
-                                                                 label="Timeframes")
-                                    f_strats = gr.CheckboxGroup(
-                                        list(catalog.CATALOG_STRATEGIES), value=[],
-                                        label="Strategies")
-                                    f_models = gr.CheckboxGroup(all_models, value=[],
-                                                                label="Models")
-                                    with gr.Row():
-                                        f_oos = gr.Checkbox(
-                                            value=True, label="Require out-of-sample")
-                                        f_hide_base = gr.Checkbox(
-                                            value=False, label="Hide baseline models")
-                                        reset_btn = gr.Button(
-                                            "Reset filters", size="sm",
-                                            elem_classes="bit-ghost-btn")
                                 lb_meta = gr.HTML("")
-                                lb_table = gr.Dataframe(pd.DataFrame(), interactive=False,
-                                                        wrap=False, max_height=430,
-                                                        elem_classes="bit-table")
-                                gr.HTML('<div class="bit-zone-title">Returns over time'
-                                        '<span class="bit-micro">TOP RANKED · '
-                                        'CUMULATIVE, COSTS INCLUDED</span></div>')
+                                lb_table = gr.HTML("")
+                                gr.HTML(shell.micro(
+                                    "returns over time · top ranked · "
+                                    "cumulative, costs included"))
                                 lb_overlay = gr.Plot()
-                                gr.HTML('<div class="bit-zone-title">Risk vs return'
-                                        '<span class="bit-micro">MARKER AREA = TRADE '
-                                        'COUNT</span></div>')
+                                gr.HTML(shell.micro(
+                                    "risk vs return · marker area = trade count"))
                                 lb_scatter = gr.Plot()
 
                             with gr.Tab("Models"):
-                                models_tf = gr.Radio(["all"] + all_tfs, value="1d",
-                                                     label="Timeframe")
                                 models_note = gr.HTML("")
                                 with gr.Row():
                                     acc_plot = gr.Plot()
                                     cal_plot = gr.Plot()
-                                gr.HTML('<div class="bit-zone-title">Best result per '
-                                        'model<span class="bit-micro">ACROSS EVERY '
-                                        'STRATEGY AND ASSET</span></div>')
                                 model_bars = gr.Plot()
-                                score_table = gr.Dataframe(pd.DataFrame(),
-                                                           interactive=False,
-                                                           max_height=380,
-                                                           elem_classes="bit-table")
+                                score_table = gr.HTML("")
 
                             with gr.Tab("Signals"):
-                                with gr.Row():
-                                    sig_asset = gr.Dropdown(all_assets, value="BTC-USD",
-                                                            label="Asset")
-                                    sig_tf = gr.Radio(all_tfs, value="1d",
-                                                      label="Timeframe")
                                 sig_panel = gr.HTML("")
-                                gr.HTML(C.micro(
-                                    "every model's latest stored forecast for this "
-                                    "slice · weighted by realised accuracy"))
 
                             with gr.Tab("Run history"):
-                                gr.HTML(C.micro("session runs and runs saved to the "
-                                                "signal store"))
-                                runs_refresh = gr.Button("Refresh from store", size="sm",
-                                                         elem_classes="bit-ghost-btn")
-                                runs_table = gr.Dataframe(pd.DataFrame(),
-                                                          interactive=False,
-                                                          max_height=430,
-                                                          elem_classes="bit-table")
-
-                    # ---------------- OVERVIEW ----------------
+                                runs_table = gr.HTML("")
+
                     with gr.Tab("Overview"):
                         empty_state = gr.HTML(C.empty_state())
                         equity_plot = gr.Plot()
-                        with gr.Row():
-                            log_scale = gr.Checkbox(value=False, label="Log scale")
-                            cvd = gr.Checkbox(value=False, label="Colorblind-safe prices")
                         regime_plot = gr.Plot()
                         with gr.Row():
                             underwater_plot = gr.Plot()
@@ -401,48 +457,29 @@ def build_app() -> gr.Blocks:
                         costs_note = gr.HTML("")
 
                     with gr.Tab("Trades"):
-                        trades_head_html = gr.HTML("")
-                        trades_table = gr.Dataframe(pd.DataFrame(), interactive=False,
-                                                    wrap=False, max_height=520,
-                                                    elem_classes="bit-table")
-                        export_btn = gr.Button("Export CSV →", size="sm",
-                                               elem_classes="bit-ghost-btn")
-                        export_file = gr.File(label="trades.csv", visible=False)
+                        trades_head = gr.HTML("")
+                        trades_html = gr.HTML("")
 
                     with gr.Tab("Robustness"):
                         verdict_html = gr.HTML("")
                         with gr.Row():
                             wf_plot = gr.Plot()
                             mc_plot = gr.Plot()
-                        robust_btn = gr.Button("Run sensitivity + slippage stress",
-                                               size="sm", elem_classes="bit-ghost-btn")
-                        with gr.Row():
-                            sens_plot = gr.Plot()
-                            slip_plot = gr.Plot()
 
                     with gr.Tab("Report"):
-                        report_md = gr.Markdown("_Run a backtest to generate the report._")
+                        report_md = gr.Markdown("_Run a backtest to generate "
+                                                "the report._")
                         report_equity = gr.Plot()
-                        with gr.Row():
-                            save_run_btn = gr.Button("Save run to store", size="sm",
-                                                     elem_classes="bit-ghost-btn")
-                            copy_cfg_btn = gr.Button("Copy share link", size="sm",
-                                                     elem_classes="bit-ghost-btn")
-                        save_note = gr.HTML("")
 
                     with gr.Tab("Coverage"):
                         coverage_kpis = gr.HTML("")
-                        coverage_table = gr.Dataframe(pd.DataFrame(), interactive=False,
-                                                      max_height=380,
-                                                      elem_classes="bit-table")
-                        gr.HTML('<div class="bit-zone-title">Extend coverage'
-                                '<span class="bit-micro">RUNS ON YOUR OWN GPU QUOTA'
-                                '</span></div>')
+                        coverage_html = gr.HTML("")
                         extend_panel = gr.HTML("")
                         with gr.Row():
-                            ext_model = gr.Dropdown(all_models, label="Model", scale=2)
-                            ext_asset = gr.Dropdown(list(config.ASSETS), label="Asset",
-                                                    scale=2)
+                            ext_model = gr.Dropdown(list(config.SEED_MODELS),
+                                                    label="Model", scale=2)
+                            ext_asset = gr.Dropdown(list(config.ASSETS),
+                                                    label="Asset", scale=2)
                             ext_tf = gr.Dropdown(all_tfs, value="1d",
                                                  label="Timeframe", scale=1)
                         with gr.Row():
@@ -454,297 +491,155 @@ def build_app() -> gr.Blocks:
                             extend_btn = gr.Button("Extend coverage", size="sm",
                                                    elem_classes="bit-run-btn")
                         extend_out = gr.HTML("")
-                        gr.HTML('<div class="bit-zone-title">Add model</div>')
                         with gr.Row():
                             add_family = gr.Dropdown(
-                                list(config.ALLOWED_ADAPTER_FAMILIES), value="chronos",
-                                label="Adapter family", scale=1)
-                            add_model_id = gr.Textbox(label="HF model id (owner/name)",
-                                                      scale=2)
+                                list(config.ALLOWED_ADAPTER_FAMILIES),
+                                value="chronos", label="Adapter family", scale=1)
+                            add_model_id = gr.Textbox(label="HF model id", scale=2)
                             add_btn = gr.Button("Smoke test & add", size="sm",
                                                 elem_classes="bit-ghost-btn", scale=1)
                         add_out = gr.HTML("")
 
-            # ------------------------- RIGHT -------------------------
-            with gr.Column(scale=2, min_width=240):
-                gr.HTML('<div class="bit-zone-title">Run Manager</div>')
-                # Only construct the real OAuth button when running on a Space.
-                # Off-Space, Gradio "helpfully" mocks OAuth by calling HF's
-                # whoami, which raises without a token -- that would make the
-                # whole app unconstructable for anyone without credentials,
-                # even though reading and backtesting are meant to be open.
-                if os.environ.get("SPACE_ID"):
-                    try:
-                        gr.LoginButton(value="Sign in with Hugging Face", size="sm")
-                    except Exception:
-                        log.warning("LoginButton unavailable", exc_info=True)
-                        gr.HTML(C.note("Sign-in is temporarily unavailable."))
-                else:
-                    gr.HTML(C.note(
-                        "Sign-in appears when this runs on a Hugging Face Space. "
-                        "Reading and backtesting work without an account."))
-                history_html = gr.HTML(C.micro("no runs yet in this session"))
-                with gr.Accordion("METRICS GLOSSARY", open=False,
-                                  elem_classes="bit-accordion"):
-                    gr.HTML(C.glossary(GLOSSARY))
-                with gr.Accordion("HOW RESULTS ARE COMPUTED", open=False,
-                                  elem_classes="bit-accordion"):
-                    gr.Markdown(METHOD_NOTES)
-
-        gr.HTML(C.footer())
-
-        # ==================== wiring ====================
-
-        builder = [strategy, asset, timeframe, date_range, model_slug,
-                   p1, p2, p3, costs_on, commission_bps, slippage_bps,
-                   slippage_model, sizing_mode, size_pct, leverage,
-                   sl_pct, tp_pct, trail_pct,
-                   validation_mode, train_m, test_m, roll_m, holdout_m]
+            with gr.Column(elem_classes="bit-zone-right", min_width=0):
+                right_html = gr.HTML(render_right([]))
+
+        gr.HTML(shell.footer())
+
+        # ------------------------------------------------------------------
+        # Wiring
+        # ------------------------------------------------------------------
+
         overview_out = [equity_plot, regime_plot, underwater_plot, rolling_plot,
                         price_plot, pnl_plot, hold_plot, mae_plot, costs_note]
-
-        def on_strategy_change(name):
-            preset = strategies.PRESETS.get(name)
-            if preset is None:
-                return gr.update(), gr.update(), gr.update(), gr.update(), ""
-            note = ("" if preset.available else
-                    C.note(f"<b>{name}</b> is unavailable. {preset.unavailable_reason}",
-                           danger=True))
-            ups = []
-            for i in range(3):
-                if i < len(preset.params):
-                    key, label, default, _lo, _hi = preset.params[i]
-                    ups.append(gr.update(label=label, value=default, visible=True))
-                else:
-                    ups.append(gr.update(visible=False, value=None))
-            models = runtime.available_models()
-            return (*ups, gr.update(visible=preset.needs_signals, choices=models,
-                                    value=(models[0] if models and preset.needs_signals
-                                           else None)), note)
-
-        strategy.change(on_strategy_change, [strategy],
-                        [p1, p2, p3, model_slug, preset_note])
-
-        def on_universe_change(a, tf):
-            cov = runtime.price_coverage_for(a, tf)
-            models = runtime.available_models(a, tf)
-            if cov is None:
-                html = C.note(f"No cached price coverage for {a} {tf}.", danger=True)
-            else:
-                html = C.micro(f"cached {cov[0]} → {cov[1]} · "
-                               + (f"{len(models)} models" if models else "no signals"))
-            return html, gr.update(choices=models, value=(models[0] if models else None))
-
-        asset.change(on_universe_change, [asset, timeframe], [coverage_note, model_slug])
-        timeframe.change(on_universe_change, [asset, timeframe],
-                         [coverage_note, model_slug])
-
-        def do_run(hist, *vals, progress=gr.Progress()):
-            progress(0.05, desc="Reading cached slices")
-            req = collect_request(*vals)
+        compare_out = [podium, lb_table, lb_overlay, lb_scatter, lb_meta]
+
+        def compare_views(st):
+            """Leaderboard view, with the HTML table rendered by the shell."""
+            pod, table_df, overlay, scatter, meta = CT.build_leaderboard_view(
+                runtime.get_store(), assets=None, timeframes=None,
+                strategies_=None, models=None, metric_label=st["metric"],
+                min_trades=0, hide_baselines=False, require_oos=True,
+                top_n=st["topn"])
+            return (pod, render_table(table_df, align_right=range(4, 15),
+                                      empty="catalog not generated yet"),
+                    overlay, scatter, meta)
+
+        def on_action(raw, st, hist, rec, progress=gr.Progress()):
+            st = copy.deepcopy(st)
+            st, should_run = apply_action(st, raw)
+
+            if not should_run:
+                # A pure UI change: re-render the panel and the compare views
+                # that depend on state, and leave the run outputs alone.
+                return (st, hist, rec, render_left(st), gr.update(),
+                        gr.update(), *(gr.update(),) * 9, gr.update(),
+                        gr.update(), gr.update(), gr.update(),
+                        *compare_views(st), render_right(hist))
+
+            progress(0.2, desc="Reading cached slices")
             try:
-                progress(0.4, desc="Simulating trades")
-                rec = runtime.execute(req)
-            except (RunError, ValueError) as e:
-                return (hist, None, C.top_bar("RUN FAILED", "warn"),
-                        C.note(str(e), danger=True), gr.update(visible=True),
-                        *(gr.update(),) * 9, "", pd.DataFrame(),
-                        C.micro("no runs yet in this session"),
-                        "_Run failed._", None)
-
-            progress(0.8, desc="Building charts")
+                progress(0.5, desc="Simulating trades")
+                rec = runtime.execute(to_request(st))
+            except (RunError, ValueError) as exc:
+                return (st, hist, None, render_left(st),
+                        shell.top_bar(status="RUN FAILED", tone="warn"),
+                        shell.note(esc(str(exc)), danger=True),
+                        *(gr.update(),) * 9,
+                        shell.micro("no trades"), "",
+                        "_Run failed._", gr.update(),
+                        *compare_views(st), render_right(hist))
+
+            progress(0.85, desc="Building charts")
             hist = ([rec] + list(hist))[:40]
-            return (hist, rec,
-                    C.top_bar(f"RUN {rec.run_id} COMPLETE", "ok",
-                              context=context_chip_text(req),
-                              elapsed=f"{rec.elapsed_s:.1f}s"),
-                    C.stat_band(rec), gr.update(visible=False),
-                    *build_overview(rec, log_scale=False, cvd=False),
-                    trades_head(rec), trades_frame(rec),
-                    C.run_history(hist), report_markdown(rec),
-                    charts.equity_curve(rec.result.equity, rec.result.benchmark_equity,
-                                        plan=rec.result.plan))
-
-        run_out = [history, current, top_bar, stat_band, empty_state, *overview_out,
-                   trades_head_html, trades_table, history_html, report_md,
-                   report_equity]
-        run_btn.click(do_run, [history, *builder], run_out)
-
-        def load_example():
-            return ("Chronos Forecast Follower", "BTC-USD", "1d", "3Y",
-                    gr.update(value=0.005, label="Entry edge", visible=True),
-                    gr.update(value=0.0, label="Exit edge", visible=True),
-                    gr.update(visible=False, value=None),
-                    gr.update(visible=True, choices=runtime.available_models(),
-                              value="chronos-bolt-small"),
-                    True, "Walk-forward")
-
-        example_btn.click(
-            load_example, None,
-            [strategy, asset, timeframe, date_range, p1, p2, p3, model_slug,
-             costs_on, validation_mode],
-        ).then(do_run, [history, *builder], run_out)
-
-        def replot(rec, log_s, colorblind):
-            if rec is None:
-                return (gr.update(),) * 9
-            return build_overview(rec, log_scale=log_s, cvd=colorblind)
-
-        log_scale.change(replot, [current, log_scale, cvd], overview_out)
-        cvd.change(replot, [current, log_scale, cvd], overview_out)
-
-        share_btn.click(lambda *v: gr.update(value=collect_request(*v).encode(),
-                                             visible=True), builder, [share_out])
-        copy_cfg_btn.click(lambda r: gr.update(value=r.request.encode(), visible=True)
-                           if r else gr.update(), [current], [share_out])
-
-        def do_export(rec):
-            if rec is None or rec.result.trades.empty:
-                return gr.update(visible=False)
-            path = f"/tmp/trades_{rec.run_id}.csv"
-            rec.result.trades.to_csv(path, index=False)
-            return gr.update(value=path, visible=True)
-
-        export_btn.click(do_export, [current], [export_file])
-
-        def do_save(rec):
-            if rec is None:
-                return C.note("Nothing to save yet.")
-            try:
-                rid = runtime.save_run_summary(rec, push=True)
-                return C.note(f"Run <b>{rid}</b> saved to the signal store. "
-                              "It now appears in Run history for everyone.")
-            except Exception as e:
-                return C.note(f"Could not save: {e}", danger=True)
-
-        save_run_btn.click(do_save, [current], [save_note])
-
-        def do_robustness(rec):
-            if rec is None:
-                e = charts.empty_figure("run a backtest first")
-                return "", e, e
-            grade, checks = runtime.overfit_verdict(rec)
-            items = "".join(f'<div class="bit-gloss-def">{m} {t}</div>'
-                            for m, t in checks)
-            html = (f'<div class="bit-panel">{C.panel_head("Overfit verdict", grade)}'
-                    f'{items}</div>')
-            return (html, charts.walk_forward_bars(rec.result.windows),
-                    charts.monte_carlo_cone(charts.monte_carlo_paths(rec.result.trades)))
-
-        current.change(do_robustness, [current], [verdict_html, wf_plot, mc_plot])
-
-        def do_sweep(rec, progress=gr.Progress()):
-            if rec is None:
-                e = charts.empty_figure("run a backtest first")
-                return e, e
-            req = rec.request
-            preset = strategies.PRESETS.get(req.strategy)
-            keys = [p[0] for p in (preset.params if preset else [])][:2]
-            if len(keys) < 2:
-                sens = charts.empty_figure("this preset has fewer than two parameters")
-            else:
-                progress(0.1, desc="Parameter sweep")
-                bx = req.params.get(keys[0], 20)
-                by = req.params.get(keys[1], 50)
-                xs = sorted({max(2, int(bx * m)) for m in (0.5, 0.75, 1.0, 1.5, 2.0)})
-                ys = sorted({max(3, int(by * m)) for m in (0.5, 0.75, 1.0, 1.5, 2.0)})
-                sens = charts.parameter_sensitivity(
-                    runtime.parameter_sweep(req, keys[0], xs, keys[1], ys),
-                    x=keys[0], y=keys[1])
-            progress(0.7, desc="Slippage stress")
-            return sens, charts.slippage_stress(runtime.slippage_stress(req))
-
-        robust_btn.click(do_sweep, [current], [sens_plot, slip_plot])
-
-        # ---- Compare tab ----
-        lb_filters = [f_assets, f_tfs, f_strats, f_models, f_metric,
-                      f_min_trades, f_hide_base, f_oos, f_top]
-        lb_out = [podium, lb_table, lb_overlay, lb_scatter, lb_meta]
-
-        def refresh_leaderboard(assets_, tfs, strats, models, metric,
-                                min_trades, hide_base, req_oos, top_n):
-            return CT.build_leaderboard_view(
-                runtime.get_store(), assets=assets_, timeframes=tfs,
-                strategies_=strats, models=models, metric_label=metric,
-                min_trades=min_trades, hide_baselines=hide_base,
-                require_oos=req_oos, top_n=top_n)
-
-        for ctrl in lb_filters:
-            ctrl.change(refresh_leaderboard, lb_filters, lb_out)
-
-        reset_btn.click(lambda: ([], [], [], [], "OOS Sharpe", 0, False, True, 15),
-                        None, lb_filters).then(refresh_leaderboard, lb_filters, lb_out)
-
-        models_out = [models_note, acc_plot, cal_plot, model_bars, score_table]
-        models_tf.change(lambda tf: CT.build_models_view(runtime.get_store(), tf),
-                         [models_tf], models_out)
-
-        def refresh_signals(a, tf):
-            return CT.build_signals_view(runtime.get_store(), a, tf)
-
-        sig_asset.change(refresh_signals, [sig_asset, sig_tf], [sig_panel])
-        sig_tf.change(refresh_signals, [sig_asset, sig_tf], [sig_panel])
-
-        def refresh_runs(hist):
-            saved = catalog.load_saved_runs(runtime.get_store())
-            return CT.runs_table(hist, saved)
-
-        runs_refresh.click(refresh_runs, [history], [runs_table])
-        history.change(refresh_runs, [history], [runs_table])
-
-        # ---- Coverage / extension ----
+            return (
+                st, hist, rec, render_left(st), render_top(st, rec),
+                render_stat_band(rec),
+                *build_overview(rec, log_scale=st["log_scale"], cvd=st["cvd"]),
+                shell.micro(f"{len(rec.result.trades)} total · costs paid "
+                            f"{money(rec.result.costs_paid)} · fills at next bar open"),
+                render_table(trades_frame(rec), align_right=range(4, 13),
+                             empty="no trades", max_height="520px"),
+                report_markdown(rec),
+                charts.equity_curve(rec.result.equity, rec.result.benchmark_equity,
+                                    plan=rec.result.plan),
+                *compare_views(st), render_right(hist),
+            )
+
+        action_out = [state, history, current, left_html, top_html, stat_html,
+                      *overview_out, trades_head, trades_html, report_md,
+                      report_equity, *compare_out, right_html]
+
+        action_box.change(on_action, [action_box, state, history, current],
+                          action_out, show_progress="minimal")
+
+        current.change(
+            lambda rec: (
+                ("", charts.empty_figure("run a backtest first"),
+                 charts.empty_figure("run a backtest first"))
+                if rec is None else (
+                    (lambda g, c: (
+                        f'<div style="background:var(--bg-panel);border:1px solid '
+                        f'var(--border-default);padding:12px;margin-bottom:8px">'
+                        f'<div style="font-family:var(--font-styrene);'
+                        f'text-transform:uppercase;font-size:var(--text-sm);'
+                        f'letter-spacing:var(--tracking-wide)">Overfit verdict: '
+                        f'<span style="color:var(--accent-amber-strong)">{g}</span>'
+                        f'</div>' + "".join(
+                            f'<div style="font-size:var(--text-2xs);'
+                            f'color:var(--text-secondary);line-height:1.7">'
+                            f'{m} {esc(t)}</div>' for m, t in c) + "</div>"
+                    ))(*runtime.overfit_verdict(rec)),
+                    charts.walk_forward_bars(rec.result.windows),
+                    charts.monte_carlo_cone(
+                        charts.monte_carlo_paths(rec.result.trades)),
+                )
+            ),
+            [current], [verdict_html, wf_plot, mc_plot])
+
         estimate_btn.click(extension.estimate_ui,
                            [ext_model, ext_asset, ext_tf, ext_start, ext_end],
                            [extend_out])
-        extend_btn.click(extension.extend_ui,
-                         [ext_model, ext_asset, ext_tf, ext_start, ext_end],
-                         [extend_out, coverage_table])
-        add_btn.click(extension.add_model_ui, [add_family, add_model_id],
-                      [add_out, coverage_table])
-
-        # ---- Load ----
-        def on_load(request: gr.Request):
-            st = runtime.get_store()
-            meta = catalog.catalog_meta(st)
-            meta_html = C.micro(
+        extend_btn.click(
+            lambda m, a, t, s, e: (
+                (lambda html, _df: (html, render_table(runtime.coverage_frame())))(
+                    *extension.extend_ui(m, a, t, s, e))),
+            [ext_model, ext_asset, ext_tf, ext_start, ext_end],
+            [extend_out, coverage_html])
+        add_btn.click(
+            lambda f, m: (
+                (lambda html, _df: (html, render_table(runtime.coverage_frame())))(
+                    *extension.add_model_ui(f, m))),
+            [add_family, add_model_id], [add_out, coverage_html])
+
+        def on_load(st):
+            store = runtime.get_store()
+            st = refresh_context(copy.deepcopy(st))
+            meta = catalog.catalog_meta(store)
+            meta_html = shell.micro(
                 f"{meta.get('leaderboard_rows', 0)} combinations · "
-                f"{meta.get('scorecard_rows', 0)} model slices · generated "
-                f"{str(meta.get('generated_at', ''))[:16].replace('T', ' ')} · "
-                f"{meta.get('canonical_config', '')}") if meta else C.micro("catalog not built")
-
-            lb_view = CT.build_leaderboard_view(
-                st, assets=None, timeframes=None, strategies_=None, models=None,
-                metric_label="OOS Sharpe", min_trades=0, hide_baselines=False,
-                require_oos=True, top_n=15)
-            models_view = CT.build_models_view(st, "1d")
-            sig = CT.build_signals_view(st, "BTC-USD", "1d")
-            cov_cells = runtime.coverage_map()
-
-            restored = [gr.update()] * 4
-            try:
-                token = dict(request.query_params).get("cfg") if request else None
-            except Exception:
-                token = None
-            if token:
-                try:
-                    req = RunRequest.decode(token)
-                    restored = [gr.update(value=req.strategy), gr.update(value=req.asset),
-                                gr.update(value=req.timeframe),
-                                gr.update(value=req.date_range)]
-                except Exception as e:
-                    log.warning("share link rejected: %s", e)
-
-            return (meta_html, *lb_view, *models_view, sig,
-                    C.coverage_summary(cov_cells), runtime.coverage_frame(),
-                    extension.status_html(),
-                    CT.runs_table([], catalog.load_saved_runs(st)), *restored)
-
-        demo.load(on_load, None,
-                  [catalog_meta, *lb_out, *models_out, sig_panel,
-                   coverage_kpis, coverage_table, extend_panel, runs_table,
-                   strategy, asset, timeframe, date_range])
-        demo.load(lambda: on_universe_change("BTC-USD", "1d"), None,
-                  [coverage_note, model_slug])
+                f"{meta.get('scorecard_rows', 0)} model slices · "
+                f"{meta.get('canonical_config', '')}") if meta else \
+                shell.micro("catalog not built")
+
+            note, acc, cal, bars, score_df = CT.build_models_view(store, "1d")
+            sig = CT.build_signals_view(store, st["sig_asset"], st["sig_tf"])
+            saved = catalog.load_saved_runs(store)
+
+            return (st, render_left(st), meta_html, *compare_views(st),
+                    note, acc, cal, bars,
+                    render_table(score_df, align_right=range(3, 10),
+                                 empty="no scorecard rows"),
+                    sig,
+                    render_table(CT.runs_table([], saved), empty="no saved runs"),
+                    C.coverage_summary(runtime.coverage_map()),
+                    render_table(runtime.coverage_frame(), empty="no coverage"),
+                    extension.status_html())
+
+        demo.load(on_load, [state],
+                  [state, left_html, catalog_meta, *compare_out,
+                   models_note, acc_plot, cal_plot, model_bars, score_table,
+                   sig_panel, runs_table, coverage_kpis, coverage_html,
+                   extend_panel])
 
     return demo
 

src/ui/bridge.py

@@ -0,0 +1,159 @@
+"""Click bridge: design markup in, Python state out.
+
+The design is built almost entirely from `<button>` elements -- 23 of them
+against a single `<input>` in the whole file. Gradio's own controls render a
+completely different DOM (`gr.Radio` becomes a `<fieldset>` of labels wrapping
+hidden radio inputs), which is why restyling them from outside only ever
+approximates the design.
+
+So the visible layer is the design's own markup, and this module is how a real
+`<button>` reaches Python:
+
+    <button data-bit="tf:1h">1h</button>
+                |
+                |  delegated listener (installed once, in <head>)
+                v
+    hidden Textbox #bit-action  <- value set + native `input` event dispatched
+                |
+                v
+    Gradio .change() -> parse_action() -> new state -> re-render
+
+A nonce is appended to every action because Gradio's `.change()` only fires when
+the value actually differs; clicking the same button twice must still register.
+
+Nothing here evaluates anything. Actions are `key:value` pairs, the key must be
+on `ALLOWED_KEYS`, and the value is returned as an opaque string for the caller
+to validate against its own domain.
+"""
+
+from __future__ import annotations
+
+from dataclasses import dataclass
+
+# Every action the UI is allowed to emit. An unknown key is dropped, so a
+# hand-crafted click cannot reach code paths the UI does not offer.
+ALLOWED_KEYS = frozenset({
+    "tab",          # switch a top-level tab
+    "subtab",       # switch a Compare sub-tab
+    "acc",          # toggle a left-panel accordion section
+    "strategy",     # choose a preset
+    "asset",        # choose an asset
+    "tf",           # choose a timeframe
+    "range",        # choose a date range
+    "model",        # choose a forecast model
+    "param",        # set a strategy parameter (param:key=value)
+    "costs",        # toggle costs on/off
+    "slippage",     # choose a slippage model
+    "sizing",       # choose a sizing mode
+    "validation",   # choose a validation mode
+    "metric",       # leaderboard rank metric
+    "filter",       # leaderboard filter toggle (filter:kind=value)
+    "topn",         # leaderboard row count
+    "sigasset",     # signal aggregator asset
+    "sigtf",        # signal aggregator timeframe
+    "run",          # run the backtest
+    "example",      # load the worked example
+    "reset",        # reset leaderboard filters
+    "logscale",     # toggle log scale
+    "cvd",          # toggle colorblind-safe prices
+    "noop",         # explicit no-op, used by disabled controls
+})
+
+ACTION_ELEMENT_ID = "bit-action"
+
+# Separates the action from its nonce. A pipe is used rather than a space
+# because action values are human-readable names -- "SMA Crossover", "Buy & Hold
+# (benchmark)" -- which legitimately contain spaces. No value contains a pipe.
+NONCE_SEP = "|"
+
+# Installed once into <head>. Capture-phase delegation keeps it working after
+# Gradio replaces the innerHTML of a re-rendered zone.
+BRIDGE_JS = """
+<script>
+(function () {
+  if (window.__bitBridgeInstalled) return;
+  window.__bitBridgeInstalled = true;
+
+  function holder() {
+    var root = document.getElementById('__ELEM_ID__');
+    return root ? root.querySelector('textarea, input') : null;
+  }
+
+  document.addEventListener('click', function (e) {
+    var el = e.target && e.target.closest ? e.target.closest('[data-bit]') : null;
+    if (!el) return;
+    var action = el.getAttribute('data-bit');
+    if (!action || action.indexOf('noop:') === 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+
+    var box = holder();
+    if (!box) return;
+    // The nonce makes every click a distinct value, so clicking the same
+    // button twice still fires Gradio's change event.
+    var nonce = Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
+    box.value = action + '|' + nonce;
+    box.dispatchEvent(new Event('input', { bubbles: true }));
+  }, true);
+
+  // Numeric and text fields emit on commit (blur / Enter), not per keystroke,
+  // so a backtest is not re-run on every digit typed.
+  function commit(el) {
+    if (!el || !el.hasAttribute('data-bit-input')) return;
+    var box = holder();
+    if (!box) return;
+    var nonce = Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
+    box.value = el.getAttribute('data-bit-input') + '=' + el.value + '|' + nonce;
+    box.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+
+  document.addEventListener('change', function (e) { commit(e.target); }, true);
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Enter') { commit(e.target); }
+  }, true);
+})();
+</script>
+""".replace("__ELEM_ID__", ACTION_ELEMENT_ID)
+
+
+@dataclass(frozen=True)
+class Action:
+    key: str
+    value: str
+
+    @property
+    def is_noop(self) -> bool:
+        return self.key == "noop"
+
+
+def emit(key: str, value: str = "") -> str:
+    """Build the `data-bit` attribute value for a clickable element."""
+    if key not in ALLOWED_KEYS:
+        raise ValueError(f"{key!r} is not an allowed UI action")
+    if NONCE_SEP in str(value):
+        raise ValueError(f"action values may not contain {NONCE_SEP!r}")
+    return f"{key}:{value}"
+
+
+def parse_action(raw):
+    """Parse what the bridge wrote into the hidden textbox.
+
+    Returns None for anything unparseable or not on the allow-list, so a
+    malformed or hand-crafted payload is ignored rather than raising.
+    """
+    if not raw or not isinstance(raw, str):
+        return None
+    payload = raw.split(NONCE_SEP, 1)[0]
+    if ":" not in payload:
+        return None
+    key, _, value = payload.partition(":")
+    key = key.strip()
+    if key not in ALLOWED_KEYS:
+        return None
+    return Action(key=key, value=value.strip())
+
+
+def parse_pair(value: str):
+    """Split a compound action value like `fast_ma=20` -> ("fast_ma", "20")."""
+    name, _, val = value.partition("=")
+    return name.strip(), val.strip()

src/ui/shell.py

@@ -0,0 +1,485 @@
+"""The design's own markup, rendered from state.
+
+Every visible control here is the element the design uses -- a real `<button>`
+with the design's exact padding and type -- not a Gradio component restyled from
+outside. Gradio still owns the plots and the transport; it no longer owns the
+chrome.
+
+Values are lifted verbatim from `Backtest Lab.dc.html`: 286px left aside, 306px
+right tray, `8px 12px` header padding, `3px 7px` chips, `4px 6px` segments,
+`9px 12px` panel headers, `0 12px 12px` section bodies with a 10px gap. The DS
+utility classes (`mono-data`, `pixel-text`, `styrene-text`) come from base.css
+and are used rather than reinvented.
+"""
+
+from __future__ import annotations
+
+from .bridge import emit
+from .format import EM, count, esc, money, num, pct, sharpe_tone
+
+# Zone widths, straight from the design.
+LEFT_W = "286px"
+RIGHT_W = "306px"
+
+# The mark shipped with the design (uploads/bit-trading-mark.svg).
+MARK = (
+    '<svg viewBox="0 0 100 100" width="18" height="18" role="img" '
+    'aria-label="The Bit Trading Company" style="flex:0 0 auto">'
+    '<path fill="var(--accent-amber)" fill-rule="evenodd" '
+    'd="M0 0H100V100H0Z M50 10H90V90H50Z M22 42H38V58H22Z M62 42H78V58H62Z">'
+    "</path></svg>"
+)
+
+DISCLAIMER = (
+    "Simulated results with modeled costs. Backtests are hypotheses, not "
+    "promises. Past performance does not predict future results. "
+    "Not financial advice."
+)
+
+
+# --------------------------------------------------------------------------
+# Primitives, matching the design's exact treatments
+# --------------------------------------------------------------------------
+
+
+def chip(label, action=None, *, active=False, title=""):
+    """A `3px 7px` mono chip -- timeframe, date range, ticker."""
+    bg = "var(--accent-amber)" if active else "transparent"
+    fg = "var(--stone-950)" if active else "var(--text-secondary)"
+    border = "var(--accent-amber)" if active else "var(--border-default)"
+    attr = f' data-bit="{esc(action)}"' if action else ""
+    t = f' title="{esc(title)}"' if title else ""
+    return (
+        f'<button{attr}{t} class="mono-data" style="padding:3px 7px;'
+        f"background:{bg};border:1px solid {border};color:{fg};cursor:pointer;"
+        f'font-size:var(--text-xs);transition:background 1s ease,color 1s ease">'
+        f"{esc(label)}</button>"
+    )
+
+
+def segment(label, action, *, active=False, first=False):
+    """A full-width segmented control cell (`4px 6px`, styrene, uppercase)."""
+    bg = "var(--accent-amber)" if active else "transparent"
+    fg = "var(--stone-950)" if active else "var(--text-secondary)"
+    return (
+        f'<button data-bit="{esc(action)}" style="flex:1 1 auto;padding:4px 6px;'
+        f"background:{bg};border:1px solid var(--border-default);"
+        f"border-left-width:{'1px' if first else '0'};color:{fg};cursor:pointer;"
+        f"font-family:var(--font-styrene);font-size:var(--text-xs);"
+        f"text-transform:uppercase;letter-spacing:var(--tracking-wide);"
+        f'cursor:pointer">{esc(label)}</button>'
+    )
+
+
+def field_label(text):
+    return (
+        f'<div class="pixel-text" style="color:var(--text-secondary);'
+        f'margin-bottom:4px">{esc(text)}</div>'
+    )
+
+
+def row(children, gap="4px"):
+    return (
+        f'<div style="display:flex;flex-wrap:wrap;gap:{gap}">'
+        f'{"".join(children)}</div>'
+    )
+
+
+def field(label, children, gap="4px"):
+    return f"<div>{field_label(label)}{row(children, gap)}</div>"
+
+
+def note(text, danger=False):
+    color = "var(--fin-down)" if danger else "var(--accent-amber)"
+    return (
+        f'<div class="mono-data" style="border-left:2px solid {color};'
+        f"background:var(--bg-raised);padding:6px 10px;font-size:var(--text-2xs);"
+        f'line-height:1.6;color:var(--text-secondary);margin-bottom:6px">{text}</div>'
+    )
+
+
+def micro(text):
+    return f'<div class="pixel-text" style="color:var(--text-tertiary)">{esc(text)}</div>'
+
+
+def panel(title, body, meta=""):
+    m = (f'<span class="pixel-text" style="color:var(--text-tertiary);'
+         f'margin-left:auto">{esc(meta)}</span>') if meta else ""
+    return (
+        f'<div style="background:var(--bg-panel);border:1px solid '
+        f'var(--border-default);margin-bottom:8px">'
+        f'<div style="display:flex;align-items:center;gap:8px;padding:9px 12px;'
+        f'border-bottom:1px solid var(--border-default)">'
+        f'<span style="font-family:var(--font-styrene);font-size:var(--text-sm);'
+        f"text-transform:uppercase;letter-spacing:var(--tracking-wide)\">"
+        f"{esc(title)}</span>{m}</div>"
+        f'<div style="padding:12px">{body}</div></div>'
+    )
+
+
+def section(key, number, title, open_, body):
+    """A numbered, collapsible left-panel section."""
+    glyph = "-" if open_ else "+"
+    inner = (
+        f'<div style="padding:0 12px 12px;display:flex;flex-direction:column;'
+        f'gap:10px">{body}</div>'
+    ) if open_ else ""
+    return (
+        f'<div style="border-bottom:1px solid var(--border-default)">'
+        f'<button data-bit="{esc(emit("acc", key))}" style="width:100%;'
+        f"display:flex;align-items:center;justify-content:space-between;gap:8px;"
+        f"padding:8px 12px;background:transparent;border:0;cursor:pointer;"
+        f'color:var(--text-primary)">'
+        f'<span style="font-family:var(--font-styrene);font-size:var(--text-sm);'
+        f"text-transform:uppercase;letter-spacing:var(--tracking-wide)\">"
+        f"{number} &middot; {esc(title)}</span>"
+        f'<span class="mono-data" style="font-size:var(--text-2xs);'
+        f'color:var(--text-tertiary)">{glyph}</span></button>{inner}</div>'
+    )
+
+
+# --------------------------------------------------------------------------
+# Top bar
+# --------------------------------------------------------------------------
+
+
+def top_bar(context="", status="NO RUN LOADED", tone="idle", elapsed=""):
+    colors = {
+        "ok": ("var(--accent-moss-strong)", "var(--accent-moss-dim)"),
+        "run": ("var(--accent-amber-strong)", "var(--accent-amber-dim)"),
+        "warn": ("var(--fin-down)", "var(--fin-down)"),
+        "idle": ("var(--text-tertiary)", "var(--border-default)"),
+    }
+    color, border = colors.get(tone, colors["idle"])
+
+    ctx = (
+        f'<span class="mono-data" style="font-size:var(--text-xs);'
+        f"color:var(--text-secondary);padding:3px 8px;border:1px solid "
+        f'var(--border-default);white-space:nowrap">{esc(context)}</span>'
+    ) if context else ""
+
+    el = (
+        f'<span class="mono-data" style="font-size:var(--text-2xs);'
+        f'color:var(--text-tertiary)">{esc(elapsed)}</span>'
+    ) if elapsed else ""
+
+    pulse = "animation:bitPulse 2s ease-in-out infinite" if tone == "run" else ""
+
+    return (
+        f'<header style="position:sticky;top:0;z-index:30;display:flex;'
+        f"align-items:center;gap:12px;flex-wrap:wrap;padding:8px 12px;"
+        f'background:var(--bg-panel);border-bottom:1px solid var(--border-default)">'
+        f"{MARK}"
+        f'<span style="color:var(--text-tertiary)">/</span>'
+        f'<span style="font-family:var(--font-styrene);text-transform:uppercase;'
+        f"letter-spacing:var(--tracking-wide);font-size:var(--text-md);"
+        f'white-space:nowrap;margin-top:3px">Backtest Lab</span>'
+        f"{ctx}"
+        f'<div style="display:flex;align-items:center;gap:8px;margin-left:auto;'
+        f'flex-wrap:wrap">'
+        f"{el}"
+        f'<span style="display:inline-flex;align-items:center;gap:6px;'
+        f'padding:3px 8px;border:1px solid {border}">'
+        f'<span style="display:inline-block;width:5px;height:5px;'
+        f'background:{color};{pulse}"></span>'
+        f'<span class="mono-data" style="font-size:var(--text-2xs);color:{color};'
+        f'white-space:nowrap">{esc(status)}</span></span>'
+        f'<a href="https://huggingface.co/datasets/The-Bit-Trading-Company/'
+        f'bit-signal-store" target="_blank" rel="noopener" class="mono-data" '
+        f'style="font-size:var(--text-2xs);color:var(--text-tertiary);'
+        f'padding:3px 8px;border:1px solid var(--border-default)">STORE &#8599;</a>'
+        f"</div></header>"
+    )
+
+
+def footer():
+    return (
+        f'<footer style="position:sticky;bottom:0;z-index:30;display:flex;'
+        f"justify-content:space-between;gap:12px;padding:6px 12px;"
+        f"background:var(--bg-panel);border-top:1px solid var(--border-default)\">"
+        f'<span class="mono-data" style="font-size:var(--text-2xs);'
+        f'color:var(--text-tertiary)">{esc(DISCLAIMER)}</span>'
+        f'<span class="mono-data" style="font-size:var(--text-2xs);'
+        f'color:var(--text-tertiary);white-space:nowrap">BITTRADING SDK 1.2.0</span>'
+        f"</footer>"
+    )
+
+
+# --------------------------------------------------------------------------
+# Inputs
+# --------------------------------------------------------------------------
+
+
+def number_input(param_key, label, value, *, step="any"):
+    """Label left, boxed value right -- the design's parameter row."""
+    val = "" if value is None else value
+    return (
+        f'<div style="display:flex;align-items:center;gap:8px">'
+        f'<span class="pixel-text" style="color:var(--text-secondary);flex:1 1 auto">'
+        f"{esc(label)}</span>"
+        f'<input type="number" step="{step}" value="{esc(val)}" '
+        f'data-bit-input="param:{esc(param_key)}" class="mono-data" '
+        f'style="width:74px;padding:3px 6px;background:var(--bg-sunken);'
+        f"border:1px solid var(--border-default);color:var(--text-primary);"
+        f'font-size:var(--text-xs);text-align:right"></div>'
+    )
+
+
+def toggle(action, label, on, *, warn_when_off=False):
+    """A two-state switch rendered as the design's segmented pair."""
+    danger = warn_when_off and not on
+    on_bg = "var(--accent-amber)" if on else "transparent"
+    off_bg = "var(--fin-down)" if danger else "transparent"
+    on_fg = "var(--stone-950)" if on else "var(--text-tertiary)"
+    off_fg = "var(--stone-950)" if danger else "var(--text-tertiary)"
+    return (
+        f'<div style="display:flex;align-items:center;gap:8px">'
+        f'<span class="pixel-text" style="color:var(--text-secondary);flex:1 1 auto">'
+        f"{esc(label)}</span>"
+        f'<div style="display:flex">'
+        f'<button data-bit="{esc(action)}=1" style="padding:3px 8px;'
+        f"background:{on_bg};border:1px solid var(--border-default);color:{on_fg};"
+        f'cursor:pointer;font-family:var(--font-mono);font-size:var(--text-2xs)">ON</button>'
+        f'<button data-bit="{esc(action)}=0" style="padding:3px 8px;'
+        f"background:{off_bg};border:1px solid var(--border-default);border-left:0;"
+        f"color:{off_fg};cursor:pointer;font-family:var(--font-mono);"
+        f'font-size:var(--text-2xs)">OFF</button></div></div>'
+    )
+
+
+# --------------------------------------------------------------------------
+# Left panel -- Strategy Builder
+# --------------------------------------------------------------------------
+
+
+def left_panel(st, *, presets, assets, timeframes, models, preset_params):
+    """The design's 286px aside, rendered from state."""
+    open_ = st.get("acc", {})
+
+    preset_chips = row(
+        [chip(p, emit("strategy", p), active=(p == st["strategy"])) for p in presets])
+    params = "".join(
+        number_input(k, label, st["params"].get(k, default))
+        for k, label, default in preset_params)
+    model_block = ""
+    if st.get("needs_signals"):
+        model_block = field(
+            "Forecast model",
+            [chip(m, emit("model", m), active=(m == st.get("model"))) for m in models]
+            or [micro("no models cached")])
+    strategy_body = (
+        field_label("Preset") + preset_chips
+        + (f'<div style="display:flex;flex-direction:column;gap:6px">{params}</div>'
+           if params else "") + model_block)
+
+    universe_body = (
+        field("Ticker", [chip(a, emit("asset", a), active=(a == st["asset"]))
+                         for a in assets])
+        + field("Timeframe", [chip(t, emit("tf", t), active=(t == st["timeframe"]))
+                              for t in timeframes])
+        + field("Date range", [chip(r, emit("range", r), active=(r == st["range"]))
+                               for r in ("1Y", "3Y", "5Y", "Max")])
+        + (micro(st["coverage"]) if st.get("coverage") else ""))
+
+    costs_body = (
+        toggle("costs", "Costs", st["costs_on"], warn_when_off=True)
+        + number_input("commission_bps", "Commission bps / side", st["commission_bps"])
+        + number_input("slippage_bps", "Slippage bps", st["slippage_bps"])
+        + field("Slippage model",
+                [segment("Fixed bps", emit("slippage", "fixed"),
+                         active=st["slippage_model"] == "fixed", first=True),
+                 segment("Volume", emit("slippage", "volume_scaled"),
+                         active=st["slippage_model"] == "volume_scaled")], gap="0")
+        + field("Fill", [chip("Next bar open", None, active=True,
+                              title="Enforced by the engine; not configurable.")])
+        + note("Costs on. Turning these off is how strategies lie to you.",
+               danger=not st["costs_on"]))
+
+    sizing_body = (
+        field("Sizing",
+              [segment("Fixed %", emit("sizing", "fixed_pct"),
+                       active=st["sizing_mode"] == "fixed_pct", first=True),
+               segment("Vol-target", emit("sizing", "vol_target"),
+                       active=st["sizing_mode"] == "vol_target")], gap="0")
+        + number_input("size_pct", "Position size", st["size_pct"], step="0.05")
+        + number_input("leverage", "Leverage", st["leverage"], step="0.5")
+        + number_input("sl_pct", "Stop loss %", st["sl_pct"])
+        + number_input("tp_pct", "Take profit %", st["tp_pct"])
+        + number_input("trail_pct", "Trailing stop %", st["trail_pct"]))
+
+    val_modes = [("Walk-forward", "walk_forward"), ("Split", "split"),
+                 ("Holdout", "holdout"), ("None", "none")]
+    validation_body = (
+        field("Mode", [chip(lbl, emit("validation", v),
+                            active=st["validation_mode"] == v) for lbl, v in val_modes])
+        + number_input("train_months", "Train months", st["train_months"])
+        + number_input("test_months", "Test months", st["test_months"])
+        + number_input("roll_months", "Roll months", st["roll_months"])
+        + number_input("holdout_months", "OOS holdout months", st["holdout_months"]))
+
+    sections = (
+        section("strategy", "1", "Strategy", open_.get("strategy", True), strategy_body)
+        + section("universe", "2", "Universe & Data", open_.get("universe", True),
+                  universe_body)
+        + section("costs", "3", "Costs & Execution", open_.get("costs", False),
+                  costs_body)
+        + section("sizing", "4", "Sizing & Risk", open_.get("sizing", False),
+                  sizing_body)
+        + section("validation", "5", "Validation", open_.get("validation", False),
+                  validation_body))
+
+    run_row = (
+        f'<div style="padding:12px;display:flex;flex-direction:column;gap:6px">'
+        f'<button data-bit="{esc(emit("run"))}" style="width:100%;padding:8px 12px;'
+        f"background:var(--accent-amber);border:1px solid var(--accent-amber);"
+        f"color:var(--stone-950);cursor:pointer;font-family:var(--font-styrene);"
+        f"text-transform:uppercase;letter-spacing:var(--tracking-wide);"
+        f'font-size:var(--text-xs)">&#9654; Run backtest</button>'
+        f'<button data-bit="{esc(emit("example"))}" style="width:100%;padding:6px 12px;'
+        f"background:transparent;border:1px solid var(--border-default);"
+        f"color:var(--text-secondary);cursor:pointer;font-family:var(--font-mono);"
+        f'font-size:var(--text-2xs)">Load example</button></div>')
+
+    return (
+        f'<aside style="width:{LEFT_W};flex:0 0 {LEFT_W};'
+        f"border-right:1px solid var(--border-default);background:var(--bg-panel);"
+        f'display:flex;flex-direction:column">'
+        f'<div style="display:flex;align-items:center;justify-content:space-between;'
+        f'padding:9px 12px;border-bottom:1px solid var(--border-default)">'
+        f'<span style="font-family:var(--font-styrene);font-size:var(--text-md);'
+        f"text-transform:uppercase;letter-spacing:var(--tracking-wide)\">"
+        f"Strategy Builder</span>"
+        f'<span class="pixel-text" style="color:var(--text-tertiary)">'
+        f'CFG #{esc(st.get("cfg_id", "0000"))}</span></div>'
+        f"{sections}{run_row}</aside>")
+
+
+# --------------------------------------------------------------------------
+# Stat band
+# --------------------------------------------------------------------------
+
+
+def stat_cell(label, value, sub, *, tone_class="", title=""):
+    color = {"up": "var(--fin-up-strong)",
+             "down": "var(--fin-down-strong)"}.get(tone_class, "var(--text-primary)")
+    t = f' title="{esc(title)}"' if title else ""
+    return (
+        f'<div{t} style="flex:1 1 124px;padding:8px 12px;'
+        f"border-right:1px solid var(--border-subtle);"
+        f'border-bottom:1px solid var(--border-subtle)">'
+        f'<div class="pixel-text" style="color:var(--text-tertiary)">{esc(label)}</div>'
+        f'<div class="mono-data" style="font-size:var(--text-lg);'
+        f"line-height:var(--leading-tight);color:{color};margin:2px 0 1px;"
+        f'letter-spacing:var(--tracking-tight)">{value}</div>'
+        f'<div class="mono-data" style="font-size:var(--text-2xs);'
+        f'color:var(--text-tertiary)">{sub}</div></div>'
+    )
+
+
+def stat_band(cells, notes=()):
+    band = (
+        f'<div style="display:flex;flex-wrap:wrap;border:1px solid '
+        f'var(--border-default);background:var(--bg-panel);margin-bottom:8px">'
+        f'{"".join(cells)}</div>'
+    )
+    return band + "".join(notes)
+
+
+# --------------------------------------------------------------------------
+# Tables -- rendered as markup, not as a Gradio Dataframe
+# --------------------------------------------------------------------------
+
+
+def table(headers, rows, *, align_right=(), max_height="430px", empty="no rows"):
+    """The design's table treatment: pixel-text header, mono body, 1px rules."""
+    if not rows:
+        return micro(empty)
+
+    def cell_style(i, header=False):
+        a = "right" if i in align_right else "left"
+        if header:
+            return (f"padding:5px 8px;text-align:{a};"
+                    f"background:var(--bg-raised);color:var(--text-tertiary);"
+                    f"border-bottom:1px solid var(--border-default);"
+                    f"position:sticky;top:0;white-space:nowrap")
+        return (f"padding:4px 8px;text-align:{a};color:var(--text-secondary);"
+                f"border-bottom:1px solid var(--border-subtle);white-space:nowrap")
+
+    head = "".join(
+        f'<th class="pixel-text" style="{cell_style(i, True)}">{esc(h)}</th>'
+        for i, h in enumerate(headers))
+    body = "".join(
+        "<tr>" + "".join(
+            f'<td style="{cell_style(i)}">{c}</td>' for i, c in enumerate(r)
+        ) + "</tr>" for r in rows)
+
+    return (
+        f'<div style="overflow:auto;max-height:{max_height};'
+        f'border:1px solid var(--border-default);background:var(--bg-panel)">'
+        f'<table class="mono-data bit-selectable" style="width:100%;'
+        f"border-collapse:collapse;font-size:var(--text-2xs)\">"
+        f"<thead><tr>{head}</tr></thead><tbody>{body}</tbody></table></div>"
+    )
+
+
+def frame_to_rows(df, limit=200):
+    """DataFrame -> list of escaped string rows, ready for `table`."""
+    if df is None or df.empty:
+        return [], []
+    sub = df.head(limit)
+    headers = [str(c) for c in sub.columns]
+    rows = [[esc("" if v is None else v) for v in rec]
+            for rec in sub.itertuples(index=False, name=None)]
+    return headers, rows
+
+
+# --------------------------------------------------------------------------
+# Right tray -- Run Manager
+# --------------------------------------------------------------------------
+
+
+def run_card(label, meta, sharpe, ret):
+    color = sharpe_tone(sharpe)
+    return (
+        f'<div style="border:1px solid var(--border-subtle);padding:6px 8px;'
+        f'margin-bottom:4px;background:var(--bg-panel)">'
+        f'<div style="font-size:var(--text-xs);color:var(--text-primary);'
+        f'overflow:hidden;text-overflow:ellipsis;white-space:nowrap">{esc(label)}</div>'
+        f'<div class="pixel-text" style="color:var(--text-tertiary)">{esc(meta)}</div>'
+        f'<div class="mono-data" style="font-size:var(--text-xs);display:flex;'
+        f'gap:6px;color:{color}">SHARPE {num(sharpe)}'
+        f'<span style="margin-left:auto;color:var(--text-tertiary)">{pct(ret)}</span>'
+        f"</div></div>"
+    )
+
+
+def right_panel(runs, glossary_items, *, signed_in=False):
+    """The design's 306px tray."""
+    if runs:
+        history = "".join(run_card(*r) for r in runs[:14])
+    else:
+        history = micro("no runs yet in this session")
+
+    gloss = "".join(
+        f'<div style="margin-bottom:6px">'
+        f'<div class="pixel-text" style="color:var(--text-tertiary)">{esc(t)}</div>'
+        f'<div style="font-size:var(--text-2xs);color:var(--text-secondary);'
+        f'line-height:1.6">{esc(d)}</div></div>'
+        for t, d in glossary_items)
+
+    def block(title, body):
+        return (
+            f'<div style="border-bottom:1px solid var(--border-default)">'
+            f'<div style="padding:9px 12px;font-family:var(--font-styrene);'
+            f"font-size:var(--text-sm);text-transform:uppercase;"
+            f'letter-spacing:var(--tracking-wide)">{esc(title)}</div>'
+            f'<div style="padding:0 12px 12px">{body}</div></div>')
+
+    return (
+        f'<aside style="width:{RIGHT_W};flex:0 0 {RIGHT_W};'
+        f"border-left:1px solid var(--border-default);background:var(--bg-panel);"
+        f'display:flex;flex-direction:column">'
+        + block("Run Manager", history)
+        + block("Metrics glossary", gloss)
+        + "</aside>"
+    )

src/ui/theme.py

@@ -446,6 +446,51 @@ input:focus, select:focus, textarea:focus{
 }
 .bit-footer-right{ white-space:nowrap; }
 
+
+/* Gradio centres the app in a padded `.contain` wrapper, which was costing
+   208px of a 1680px viewport. The design is a full-bleed dashboard, so the
+   wrapper is stretched rather than the zones being shrunk to fit it. */
+.gradio-container .contain,
+.gradio-container > .wrap,
+.gradio-container main,
+.gradio-container .main{
+  max-width:100% !important; width:100% !important;
+  padding:0 !important; margin:0 !important;
+}
+
+/* ================= three zones, exact widths =================
+   The design uses <aside style="width:286px"> and 306px, not proportions.
+   Gradio's Row/Column only offers relative `scale`, so the widths are pinned
+   here and the columns are stripped of their own padding and gap. */
+.bit-zones{
+  gap:0 !important; flex-wrap:nowrap !important; align-items:stretch !important;
+  margin:0 !important;
+}
+.bit-zone-left{
+  flex:0 0 286px !important; width:286px !important; min-width:286px !important;
+  max-width:286px !important; padding:0 !important; gap:0 !important;
+}
+.bit-zone-right{
+  flex:0 0 306px !important; width:306px !important; min-width:306px !important;
+  max-width:306px !important; padding:0 !important; gap:0 !important;
+}
+.bit-zone-center{
+  flex:1 1 auto !important; min-width:0 !important; padding:0 12px !important;
+}
+.bit-zone-left > *, .bit-zone-right > *{ height:100%; }
+/* The bridge target must stay in the DOM to receive events, but never show. */
+#bit-action{
+  position:absolute !important; width:1px !important; height:1px !important;
+  overflow:hidden !important; clip:rect(0 0 0 0) !important; opacity:0 !important;
+  pointer-events:none !important;
+}
+@media (max-width: 1100px){
+  .bit-zones{ flex-wrap:wrap !important; }
+  .bit-zone-left, .bit-zone-right{
+    flex:1 1 100% !important; width:100% !important; max-width:100% !important;
+  }
+}
+
 @media (max-width: 900px){
   .bit-statband{ flex-direction:column; }
   .bit-stat{ border-right:none; }

tests/test_ui.py

@@ -218,8 +218,14 @@ def test_comparison_renders_three_runs(three_runs):
     assert len(corr.data[0].z) == 3
 
 
-def test_comparison_respects_the_six_run_cap():
-    assert bitapp.MAX_COMPARE == 6
+def test_return_overlay_caps_the_series_it_will_draw():
+    """The old six-run session picker was replaced by the catalog view; the
+    readability cap now lives in the chart itself."""
+    import numpy as np
+
+    idx = pd.date_range("2024-01-01", periods=30, freq="D", tz="UTC")
+    curves = {f"s{i}": pd.Series(np.linspace(0, 1, 30), index=idx) for i in range(50)}
+    assert len(charts.multi_return_overlay(curves, max_series=6).data) == 6
 
 
 def test_precomputed_heatmap_loads_from_the_store():
@@ -444,3 +450,169 @@ def test_app_constructs_without_any_hugging_face_credentials(monkeypatch):
 
     importlib.reload(fresh)
     assert fresh.demo is not None
+
+
+# --------------------------------------------------------------------------
+# Design-markup rendering (shell) and the click bridge
+# --------------------------------------------------------------------------
+
+
+def test_left_panel_is_design_markup_not_gradio_components():
+    """Every control in the left panel must be a real button or input."""
+    from src.ui import shell
+
+    st = bitapp.default_state()
+    html = bitapp.render_left(st)
+    assert 'width:286px' in html, "zone width is not the design's 286px"
+    assert html.count("<button") >= 12, "controls are not real buttons"
+    assert "data-bit=" in html, "buttons are not wired to the bridge"
+    # Gradio's own control DOM must not appear here.
+    assert "<fieldset" not in html
+    assert 'type="radio"' not in html
+
+
+def test_left_panel_uses_the_designs_exact_spacing():
+    html = bitapp.render_left(bitapp.default_state())
+    for value in ("padding:9px 12px",     # panel header
+                  "padding:0 12px 12px",  # section body
+                  "gap:10px",             # section body gap
+                  "padding:3px 7px",      # chips
+                  "padding:8px 12px"):    # accordion header
+        assert value in html, f"design spacing {value!r} missing"
+
+
+def test_top_bar_uses_the_real_mark_and_design_header_treatment():
+    from src.ui import shell
+
+    html = shell.top_bar(context="BTC-USD", status="RUN COMPLETE", tone="ok")
+    assert "M50 10H90V90H50Z" in html, "not the design's mark"
+    assert "padding:8px 12px" in html
+    assert "margin-top:3px" in html, "optical alignment on the title is missing"
+    assert "mono-data" in html, "design-system utility class not used"
+
+
+def test_selected_chip_is_the_only_active_one():
+    st = bitapp.default_state()
+    st["timeframe"] = "1h"
+    html = bitapp.render_left(st)
+    actives = re.findall(
+        r'<button data-bit="(tf:[^"]+)"[^>]*background:var\(--accent-amber\)', html)
+    assert actives == ["tf:1h"]
+
+
+def test_html_entities_are_escaped_exactly_once():
+    html = bitapp.render_left(bitapp.default_state())
+    assert "&amp;amp;" not in html, "double-escaped entity"
+    assert "Universe &amp; Data" in html
+
+
+@pytest.mark.parametrize("action,key,expected", [
+    ("tf:15m", "timeframe", "15m"),
+    ("asset:ETH-USD", "asset", "ETH-USD"),
+    ("range:1Y", "range", "1Y"),
+    ("validation:holdout", "validation_mode", "holdout"),
+    ("sizing:vol_target", "sizing_mode", "vol_target"),
+    ("slippage:volume_scaled", "slippage_model", "volume_scaled"),
+])
+def test_actions_fold_into_state(action, key, expected):
+    st, ran = bitapp.apply_action(bitapp.default_state(), f"{action}|nonce")
+    assert st[key] == expected
+    assert ran is False
+
+
+def test_run_and_example_actions_request_a_run():
+    _, ran = bitapp.apply_action(bitapp.default_state(), "run:|n")
+    assert ran is True
+    st, ran = bitapp.apply_action(bitapp.default_state(), "example:|n")
+    assert ran is True and st["strategy"] == "Chronos Forecast Follower"
+
+
+def test_accordion_action_toggles():
+    st = bitapp.default_state()
+    before = st["acc"]["costs"]
+    st, _ = bitapp.apply_action(st, "acc:costs|n")
+    assert st["acc"]["costs"] is not before
+
+
+def test_numeric_param_commits_through_the_bridge():
+    st, _ = bitapp.apply_action(bitapp.default_state(), "param:commission_bps=25|n")
+    assert st["commission_bps"] == 25.0
+
+
+def test_strategy_param_commits_and_survives_preset_defaults():
+    st = bitapp.default_state()
+    st, _ = bitapp.apply_action(st, "param:fast_ma=33|n")
+    assert st["params"]["fast_ma"] == 33.0
+
+
+@pytest.mark.parametrize("bad", [
+    "param:commission_bps=nonsense", "param:commission_bps=", "topn:abc",
+    "tf:99y", "asset:../etc/passwd", "strategy:__import__",
+])
+def test_malformed_actions_leave_state_untouched(bad):
+    before = bitapp.default_state()
+    after, ran = bitapp.apply_action(bitapp.default_state(), f"{bad}|n")
+    assert ran is False
+    assert after["timeframe"] == before["timeframe"]
+    assert after["asset"] == before["asset"]
+    assert after["strategy"] == before["strategy"]
+    assert after["commission_bps"] == before["commission_bps"]
+
+
+def test_unknown_action_keys_are_dropped():
+    from src.ui.bridge import parse_action
+
+    assert parse_action("evil:rm -rf|n") is None
+    assert parse_action("os.system:x|n") is None
+
+
+def test_bridge_survives_values_containing_spaces():
+    """Preset names contain spaces; the nonce separator must not collide."""
+    from src.ui.bridge import emit, parse_action
+
+    raw = emit("strategy", "Buy & Hold (benchmark)")
+    assert parse_action(raw + "|nonce").value == "Buy & Hold (benchmark)"
+
+
+def test_tables_render_as_markup_not_dataframes():
+    df = pd.DataFrame({"A": [1, 2], "B": ["x", "y"]})
+    html = bitapp.render_table(df)
+    assert "<table" in html and "pixel-text" in html
+    assert "bit-selectable" in html, "table text must stay selectable"
+
+
+def test_empty_table_says_so():
+    assert "no rows" in bitapp.render_table(pd.DataFrame(), empty="no rows")
+
+
+def test_zone_widths_are_pinned_in_css():
+    from src.ui import theme
+
+    css = theme.full_css()
+    assert "flex:0 0 286px" in css
+    assert "flex:0 0 306px" in css
+
+
+def test_bridge_target_is_hidden_but_present():
+    from src.ui import theme
+
+    css = theme.full_css()
+    assert "#bit-action" in css
+    assert "opacity:0" in css.split("#bit-action")[1][:220]
+
+
+def test_gradio_content_wrapper_is_stretched_full_bleed():
+    """Gradio centres the app in a padded `.contain`, which cost 208px of a
+    1680px viewport. The design is a full-bleed dashboard."""
+    from src.ui import theme
+
+    import re
+
+    css = theme.full_css()
+    # Match the rule whose selector list starts with `.contain`, not the
+    # `.container` rule -- one is a prefix of the other.
+    m = re.search(r"\.gradio-container \.contain,(.*?)\{(.*?)\}", css, re.S)
+    assert m, "no full-bleed rule for Gradio's .contain wrapper"
+    body = m.group(2)
+    assert "max-width:100% !important" in body
+    assert "padding:0 !important" in body