src/ui/shell.py

"""The Arena's visible layer: the design's own markup, rendered from state.

Gradio is the backend here and nothing else -- one `gr.HTML` sink, a hidden
textbox the click bridge writes into, and a hidden button it clicks. Every
control on the page is the `<button>` the design specifies, carrying a
`data-bit` action, because the design is built from 13 buttons against 2 inputs
and Gradio renders something structurally different for the same concepts.

The one rule to keep when editing: **render from capabilities, never from a
model's name.** `caps["output"] == "ohlcv_paths"` is what decides whether the
ghost-path control exists. There is no branch anywhere below that mentions
Kronos, Chronos or TimesFM.
"""

from __future__ import annotations

import pandas as pd
from bit_ui import icons, palette, sidebar
from bit_ui.markup import a, e

from .. import config, view
from ..view import DASH, count, grade_color, num, pct
from . import chart
from .chrome import emit

STYRENE = ("font-family:var(--font-styrene);text-transform:uppercase;"
           "letter-spacing:var(--tracking-wide)")
PANEL = "border:1px solid var(--border-default);background:var(--bg-panel)"
HEAD = ("display:flex;align-items:center;gap:8px;padding:7px 10px;"
        "border-bottom:1px solid var(--border-default)")


def bit(action: str, value: str = "") -> str:
    """The full `data-bit` attribute for an action, escaped.

    `emit()` returns the attribute *value*, not the attribute. Interpolating it
    bare renders `<button run:go>`, which is not a data attribute at all: the
    delegated listener never matches it and the control does nothing, with no
    error anywhere. This wrapper is the only way actions are attached below.
    """
    return f'type="button" data-bit="{a(emit(action, value))}"'


def _panel_title(text: str, right: str = "") -> str:
    return (f'<div style="{HEAD}">'
            f'<span style="{STYRENE};font-size:var(--text-sm)">{e(text)}</span>'
            f'{right}</div>')


# --------------------------------------------------------------------------
# Header
# --------------------------------------------------------------------------


def header(state: dict, data: dict) -> str:
    archived = data.get("archived_total")
    resolved = data.get("resolved_total")
    tally = (f"ARCHIVE: {count(archived)} FORECASTS · {count(resolved)} RESOLVED"
             if archived is not None else "ARCHIVE: BUILDING")

    # The session line, not a sign-in prompt: the prompt is Gradio's own
    # LoginButton, parked in this corner by `#bit-login` in chrome.py.
    # Rendering another one here would be two buttons for one action.
    signed_in = bool(state.get("signed_in"))
    if signed_in:
        who = str(state.get("user") or "").strip().upper()
        account = (f"ACCOUNT \u00b7 {who} \u00b7 GPU TIER ON YOUR QUOTA" if who
                   else "ACCOUNT \u00b7 GPU TIER ON YOUR QUOTA")
    else:
        left = max(0, config.ANON_SESSION_CAP - int(state.get("session_forecasts", 0)))
        account = (f"ANONYMOUS SESSION \u00b7 CPU-TIER MODELS \u00b7 "
                   f"{left} FORECASTS LEFT")
    dot = "var(--fin-up)" if signed_in else "var(--mute-orange)"

    return (
        '<header style="position:sticky;top:0;z-index:20;background:var(--bg-panel);'
        'border-bottom:1px solid var(--border-default)">'
        '<div style="display:flex;align-items:center;gap:10px;padding:8px 14px;'
        'min-height:48px;flex-wrap:wrap">'
        '<div style="display:flex;align-items:center;gap:8px;flex:0 0 auto">'
        '<span style="display:inline-block;width:6px;height:6px;'
        'background:var(--fin-up);animation:bitPulse 2s ease-in-out infinite"></span>'
        f'<span style="{STYRENE};font-size:var(--text-sm);color:var(--text-secondary)">Arena</span>'
        '</div>'
        f'<a href="{a(data.get("store_url", "#"))}" target="_blank" rel="noopener" '
        'style="display:flex;align-items:center;gap:8px;padding:3px 8px;'
        'border:1px solid var(--accent-amber-dim);color:var(--accent-amber-strong);'
        'flex:0 0 auto;text-decoration:none">'
        f'<span class="mono-data" style="font-size:var(--text-xs)">{e(tally)}</span></a>'
        '<div style="flex:1 1 auto;min-width:180px;max-width:400px">'
        f'{palette.search_bar(state.get("q", ""), emit, count_label="")}'
        '</div>'
        '<span style="display:inline-flex;align-items:center;gap:6px;padding:3px 8px;'
        # The right margin is the width the fixed LoginButton occupies,
        # so the session line and the sign-in control do not overlap.
        'border:1px solid var(--border-default);margin-left:auto;'
        'margin-right:268px">'
        f'<span style="display:inline-block;width:5px;height:5px;background:{dot}"></span>'
        f'<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-secondary);white-space:nowrap">{e(account)}</span></span>'
        '</div>'
        '</header>'
    )


# --------------------------------------------------------------------------
# Stats and title
# --------------------------------------------------------------------------


def title_row(state: dict, data: dict) -> str:
    deep = ""
    if state.get("deep_linked"):
        deep = ('<span style="display:inline-flex;align-items:center;gap:7px;'
                'padding:4px 8px;border:1px solid var(--accent-amber-dim);'
                'background:var(--bg-raised)">'
                '<span class="pixel-text" style="color:var(--accent-amber-strong)">→</span>'
                '<span class="mono-data" style="font-size:var(--text-2xs);'
                f'color:var(--text-secondary)">DEEP LINK ?model={e(state["selected"][0])}'
                ' · PRESELECTED</span></span>')

    ran = data.get("resolver_last_ran") or DASH
    return (
        '<div style="display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap">'
        '<div style="display:flex;flex-direction:column;gap:3px;min-width:0">'
        f'<h1 style="{STYRENE};font-weight:500;font-size:var(--text-2xl);'
        'line-height:var(--leading-tight);margin:0">Forecast Arena</h1>'
        '<span style="color:var(--text-secondary);font-size:var(--text-base)">'
        'Every model forecasts. Every forecast is remembered.</span></div>'
        f'{deep}'
        '<span style="display:inline-flex;align-items:center;gap:6px;padding:4px 8px;'
        f'border:1px solid var(--border-default);background:var(--bg-panel);margin-left:auto">'
        '<span style="display:inline-block;width:5px;height:5px;'
        'background:var(--accent-amber);animation:bitPulse 2s ease-in-out infinite"></span>'
        '<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-secondary);white-space:nowrap">RESOLVER LAST RAN {e(ran)}</span>'
        '</span></div>'
    )


def stats_bar(stats: list[dict]) -> str:
    cells = []
    for s in stats:
        cells.append(
            f'<div style="padding:10px 12px;border-right:1px solid var(--border-subtle);'
            f'border-left:2px solid {a(s["mark"])}">'
            f'<div style="{STYRENE};font-weight:300;font-size:var(--text-2xs);'
            f'letter-spacing:var(--tracking-wider);color:var(--text-tertiary);'
            f'white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{e(s["label"])}</div>'
            f'<div class="mono-data" style="font-size:var(--text-2xl);line-height:1.15;'
            f'white-space:nowrap;color:{a(s["color"])}">{e(s["value"])}</div>'
            f'<div style="font-size:var(--text-2xs);color:var(--text-tertiary);'
            f'white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{e(s["note"])}</div>'
            f'</div>')
    return ('<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));'
            f'{PANEL}">{"".join(cells)}</div>')


# --------------------------------------------------------------------------
# Model picker
# --------------------------------------------------------------------------


def models_section(state: dict, data: dict) -> str:
    mode = state["mode"]
    selected = state["selected"]
    sel_note = (f"MATCHUP · {len(selected)} OF {view.MAX_MATCHUP} SELECTED"
                if mode == "matchup" else "PLAYGROUND · SINGLE MODEL")

    tabs = []
    for i, (key, label) in enumerate((("playground", "Playground"),
                                      ("matchup", "Matchup"))):
        on = mode == key
        tabs.append(
            f'<button {bit("mode", key)} style="padding:4px 12px;'
            f'background:{"var(--accent-amber)" if on else "transparent"};'
            f'border:1px solid var(--border-default);border-left-width:{"1px" if i == 0 else "0"};'
            f'color:{"var(--stone-950)" if on else "var(--text-secondary)"};{STYRENE};'
            f'font-size:var(--text-xs);cursor:pointer;transition:background 1s ease">'
            f'{e(label)}</button>')

    cards = "".join(_model_card(m, m["slug"] in selected, data)
                    for m in data["models"])

    add = (
        f'<button {bit("enroll", "focus")} style="text-align:left;display:flex;'
        'flex-direction:column;gap:6px;justify-content:center;padding:10px 11px;'
        'background:transparent;border:0;border-left:1px dashed var(--border-default);'
        'cursor:pointer;color:var(--text-tertiary)">'
        '<span class="mono-data" style="font-size:var(--text-lg)">+</span>'
        f'<span style="{STYRENE};font-size:var(--text-sm)">Add a fine-tune</span>'
        '<span style="font-size:var(--text-2xs);text-wrap:pretty">Any Hub model with a '
        'Kronos, Chronos or TimesFM adapter family</span></button>')

    return (
        f'<section style="{PANEL}">'
        '<div style="display:flex;align-items:center;gap:10px;padding:8px 12px;'
        'border-bottom:1px solid var(--border-default);flex-wrap:wrap">'
        f'<span style="{STYRENE};font-size:var(--text-md)">Models</span>'
        f'<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-tertiary)">{e(sel_note)}</span>'
        f'<div style="display:flex;margin-left:auto">{"".join(tabs)}</div></div>'
        f'<div class="fa-picker">{cards}{add}</div></section>'
    )


def _model_card(model: dict, on: bool, data: dict) -> str:
    """One model card. Rendered from declared capabilities only."""
    color = model["color"]
    caps = model["caps"]

    # The two capability chips the design specifies: what the model emits, and
    # what hardware it costs. Both come from the adapter's declaration.
    paths = caps.get("output") == "ohlcv_paths"
    gpu = caps.get("hardware") == "gpu"
    chips = [
        ("OHLCV paths" if paths else "quantile line",
         "var(--accent-amber-strong)" if paths else "var(--text-secondary)",
         "var(--accent-amber-dim)" if paths else "var(--border-default)"),
        ("your GPU quota" if gpu else "CPU · instant",
         "var(--mute-orange)" if gpu else "var(--accent-moss-strong)",
         "var(--mute-orange)" if gpu else "var(--accent-moss-dim)"),
    ]
    chip_html = "".join(
        f'<span class="mono-data fa-tag" style="color:{a(fg)};border-color:{a(bd)}">'
        f'{e(label)}</span>' for label, fg, bd in chips)

    chk_style = (f'background:{a(color)};color:var(--stone-950);border-color:{a(color)}'
                 if on else "")
    return (
        f'<button {bit("pick", model["slug"])} class="fa-card{" on" if on else ""}" '
        f'style="border-top-color:{a(color) if on else "transparent"}">'
        '<div class="fa-card-top">'
        f'<span class="mono-data fa-tag" style="color:{a(color) if on else "var(--text-tertiary)"};'
        f'border-color:{a(color) if on else "var(--border-default)"}">{e(model["family"].upper())}</span>'
        f'<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-tertiary)">{e(model["size"])}</span>'
        f'<span class="fa-chk" style="{chk_style}">{"✓" if on else ""}</span></div>'
        f'<div class="fa-card-name">{e(model["name"])}</div>'
        f'<div class="fa-card-caps">{chip_html}</div>'
        '<div class="fa-card-cal">'
        '<span class="pixel-text" style="color:var(--text-tertiary)">CALIBRATION</span>'
        f'<span class="mono-data" style="font-size:var(--text-md);'
        f'color:{a(model["grade_color"])};margin-left:auto">{e(model["grade"])}</span>'
        f'<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-tertiary)">{e(model["resolved_label"])}</span></div>'
        '</button>')


# --------------------------------------------------------------------------
# Controls
# --------------------------------------------------------------------------


def controls(state: dict, data: dict) -> str:
    assets = "".join(
        f'<button {bit("asset", slug)} class="fa-pill'
        f'{" on" if state["asset"] == slug else ""}">{e(spec.display)}</button>'
        for slug, spec in config.ASSETS.items())

    tfs = "".join(
        f'<button {bit("tf", slug)} class="fa-seg{" first" if i == 0 else ""}'
        f'{" on" if state["tf"] == slug else ""}">{e(slug)}</button>'
        for i, slug in enumerate(config.TIMEFRAMES))

    options = _horizon_options(state["tf"])
    hzs = "".join(
        f'<button {bit("hz", str(h))} class="fa-seg{" first" if i == 0 else ""}'
        f'{" on" if int(state["horizon"]) == h else ""}">{h} steps</button>'
        for i, h in enumerate(options))

    hours = state["horizon"] * (1 if state["tf"] == "1h" else 24)
    hz_note = f"= {hours}H AHEAD"

    gear = _gear(state) if state.get("gear") else ""
    quota = _quota_banner(data) if data.get("quota_blocked") else ""

    run_label = ("▶ Forecast" if state["mode"] == "playground"
                 else f"▶ Forecast {len(state['selected'])} models")
    runtime = data.get("runtime_hint", DASH)
    blocked = bool(data.get("quota_blocked"))

    return (
        f'<section style="{PANEL};display:flex;align-items:center;gap:14px;'
        'padding:9px 12px;flex-wrap:wrap">'
        '<div style="display:flex;align-items:center;gap:6px;flex-wrap:wrap">'
        '<span class="pixel-text" style="color:var(--text-tertiary)">ASSET</span>'
        f'{assets}</div>'
        '<div style="width:1px;height:22px;background:var(--border-subtle)"></div>'
        '<div style="display:flex;align-items:center;gap:6px">'
        '<span class="pixel-text" style="color:var(--text-tertiary)">TIMEFRAME</span>'
        f'<div style="display:flex">{tfs}</div></div>'
        '<div style="width:1px;height:22px;background:var(--border-subtle)"></div>'
        '<div style="display:flex;align-items:center;gap:6px">'
        '<span class="pixel-text" style="color:var(--text-tertiary)">HORIZON</span>'
        f'<div style="display:flex">{hzs}</div>'
        f'<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-tertiary)">{e(hz_note)}</span></div>'
        '<div style="position:relative;margin-left:auto;display:flex;'
        'align-items:center;gap:8px">'
        f'<button {bit("gear", "toggle")} title="Sampling and seed" '
        f'style="width:26px;height:26px;background:'
        f'{"var(--bg-raised)" if state.get("gear") else "transparent"};'
        f'border:1px solid {"var(--accent-amber)" if state.get("gear") else "var(--border-default)"};'
        f'color:{"var(--accent-amber-strong)" if state.get("gear") else "var(--text-tertiary)"};'
        'cursor:pointer;display:flex;align-items:center;justify-content:center">'
        f'{icons.icon("sliders", size="13px")}</button>'
        f'{gear}{quota}'
        f'<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-tertiary);padding:3px 7px;'
        f'border:1px solid var(--border-subtle)">{e(runtime)}</span>'
        f'<button {bit("run", "go")} '
        f'style="padding:6px 14px;background:'
        f'{"var(--bg-raised)" if blocked else "var(--accent-amber)"};'
        f'border:1px solid {"var(--border-default)" if blocked else "var(--accent-amber)"};'
        f'color:{"var(--text-disabled)" if blocked else "var(--stone-950)"};'
        f'{STYRENE};font-size:var(--text-xs);'
        f'cursor:{"not-allowed" if blocked else "pointer"}">{e(run_label)}</button>'
        '</div></section>'
    )


def _horizon_options(timeframe: str) -> list[int]:
    """Horizon choices, capped at what the timeframe allows."""
    ceiling = config.MAX_HORIZON.get(timeframe, 96)
    return [h for h in (12, 24, 48, 96) if h <= ceiling] or [ceiling]


def _gear(state: dict) -> str:
    rows = [
        ("Sampled paths", str(state.get("n_samples", config.DEFAULT_N_SAMPLES))),
        ("Quantiles", "/".join(f"{q:g}" for q in config.QUANTILE_LEVELS)),
        ("Seed", str(state.get("seed", 42))),
    ]
    body = "".join(
        '<div style="display:flex;align-items:center;gap:8px">'
        f'<span style="flex:1 1 auto;{STYRENE};font-weight:300;'
        f'font-size:var(--text-xs);color:var(--text-secondary)">{e(label)}</span>'
        f'<span class="mono-data" style="font-size:var(--text-xs);'
        f'color:var(--text-primary);border:1px solid var(--border-default);'
        f'padding:2px 7px">{e(value)}</span></div>'
        for label, value in rows)
    return (
        '<div style="position:absolute;top:32px;right:0;z-index:40;width:230px;'
        'background:var(--bg-raised);border:1px solid var(--border-strong);'
        'padding:10px 12px;display:flex;flex-direction:column;gap:9px">'
        f'<span style="{STYRENE};font-weight:300;font-size:var(--text-xs);'
        'color:var(--text-tertiary)">Sampling</span>'
        f'{body}'
        '<span class="pixel-text" style="color:var(--text-tertiary)">'
        'SEED IS ARCHIVED WITH THE FORECAST</span></div>')


def _quota_banner(data: dict) -> str:
    return (
        '<span style="display:inline-flex;align-items:center;gap:7px;padding:4px 9px;'
        'border:1px solid var(--mute-orange);background:var(--bg-raised)">'
        '<span class="pixel-text" style="color:var(--mute-orange)">⚠</span>'
        f'<span style="font-size:var(--text-xs);color:var(--text-secondary)">'
        f'{e(data.get("quota_msg", "GPU-tier model — sign in to use your quota"))}</span>'
        f'<a href="{a(data.get("login_url", "#"))}" style="font-family:var(--font-mono);'
        'font-size:var(--text-2xs);white-space:nowrap">SIGN IN ↗</a></span>')


# --------------------------------------------------------------------------
# Chart panel
# --------------------------------------------------------------------------


def chart_section(state: dict, data: dict) -> str:
    runs = data.get("runs", [])
    mode = state["mode"]
    primary = runs[0] if runs else None

    title = "Matchup" if mode == "matchup" else "Forecast"
    who = (f"{len(runs)} MODELS" if mode == "matchup"
           else (data["models_by_slug"].get(state["selected"][0], {}).get("name", "")
                 .upper() if state["selected"] else ""))
    meta = f'{state["asset"]} · {state["tf"]} · H+{state["horizon"]} · {who}'

    # The capability gate, in one place. `ghost_capable` is true when the
    # *selected* model declares OHLCV paths -- not when a result happens to
    # carry them.
    emits_paths = bool(primary
                       and primary.capabilities.get("output") == "ohlcv_paths"
                       and mode == "playground")
    # A model can emit paths and still have none to draw: forecasts archived
    # before paths were stored keep their quantiles and nothing else. Offering
    # a toggle that renders nothing is worse than saying why it is empty.
    paths_missing = bool(emits_paths and primary.result.paths is None)
    ghost_capable = emits_paths and not paths_missing
    ghost_locked = bool(primary
                        and primary.capabilities.get("output") != "ohlcv_paths"
                        and mode == "playground")

    if ghost_capable:
        on = state.get("ghosts", True)
        toggle = (
            f'<button {bit("ghosts", "toggle")} style="display:inline-flex;'
            'align-items:center;gap:6px;padding:3px 8px;background:'
            f'{"var(--bg-raised)" if on else "transparent"};'
            f'border:1px solid {"var(--accent-amber)" if on else "var(--border-default)"};'
            f'color:{"var(--accent-amber-strong)" if on else "var(--text-secondary)"};'
            'cursor:pointer">'
            f'<span class="mono-data" style="font-size:var(--text-2xs)">{"✓" if on else ""}</span>'
            f'<span style="{STYRENE};font-size:var(--text-xs)">Sampled OHLCV paths</span>'
            '</button>')
    elif paths_missing:
        toggle = (
            '<span style="display:inline-flex;align-items:center;gap:6px;padding:3px 8px;'
            'border:1px dashed var(--border-default);color:var(--text-disabled)" '
            'title="This forecast predates path archiving. Run it again to get them.">'
            '<span class="mono-data" style="font-size:var(--text-2xs)">✕</span>'
            f'<span style="{STYRENE};font-size:var(--text-xs)">'
            'Paths not archived — forecast again to see them</span></span>')
    elif ghost_locked:
        toggle = (
            '<span style="display:inline-flex;align-items:center;gap:6px;padding:3px 8px;'
            'border:1px dashed var(--border-default);color:var(--text-disabled)">'
            '<span class="mono-data" style="font-size:var(--text-2xs)">✕</span>'
            f'<span style="{STYRENE};font-size:var(--text-xs)">'
            'Quantile line only — no OHLCV paths</span></span>')
    else:
        toggle = ""

    if primary:
        frozen = (f'FROZEN {primary.issued_ts.strftime("%Y-%m-%d %H:%M")} UTC · '
                  f'SEED {primary.result.seed}')
    else:
        frozen = "NO FORECAST ISSUED YET"

    # A forecast rebuilt from the archive has to say how old it is. Showing
    # only its issue timestamp reads as current at a glance.
    provenance = ""
    if primary is not None and getattr(primary, "from_cache", False):
        age = view.age_label(primary.issued_ts)
        badge = "LAST ARCHIVED"
        if getattr(primary, "backfilled", False):
            badge = "LAST ARCHIVED · BACKFILL"
        provenance = (
            '<span style="display:inline-flex;align-items:center;gap:6px;'
            'padding:3px 8px;border:1px solid var(--border-default);'
            'background:var(--bg-raised)">'
            f'<span class="pixel-text" style="color:var(--text-tertiary)">{e(badge)}</span>'
            f'<span class="mono-data" style="font-size:var(--text-2xs);'
            f'color:var(--accent-amber-strong)">ISSUED {e(age.upper())}</span></span>')

        # How it is actually doing. The point of showing an old forecast is
        # that the answer is already partly known.
        score = view.live_scorecard(primary)
        if score:
            err = (f' · {score["median_err"]:.2f}% ERR'
                   if score["median_err"] is not None else "")
            provenance += (
                '<span style="display:inline-flex;align-items:center;gap:6px;'
                f'padding:3px 8px;border:1px solid {a(score["colour"])}">'
                f'<span class="mono-data" style="font-size:var(--text-2xs);'
                f'color:{a(score["colour"])}">{e(score["label"])}{e(err)}</span>'
                f'<span class="pixel-text" style="color:var(--text-tertiary)">'
                f'{e(score["note"].upper())}</span></span>')

    drawing = data.get("chart") or {}
    body = _chart_body(drawing) if drawing.get("svg") else _chart_empty(data)

    return (
        f'<section style="{PANEL}">'
        '<div style="display:flex;align-items:center;gap:10px;padding:8px 12px;'
        'border-bottom:1px solid var(--border-default);flex-wrap:wrap">'
        f'<span style="{STYRENE};font-size:var(--text-md)">{e(title)}</span>'
        f'<span class="mono-data" style="font-size:var(--text-xs);'
        'color:var(--text-secondary);padding:2px 7px;'
        f'border:1px solid var(--border-default)">{e(meta)}</span>'
        '<div style="display:flex;align-items:center;gap:8px;margin-left:auto;'
        f'flex-wrap:wrap">{provenance}{toggle}'
        f'<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-tertiary)">{e(frozen)}</span></div></div>'
        f'{_legend(data)}{body}</section>'
    )


def _legend(data: dict) -> str:
    runs = data.get("runs", [])
    if not runs:
        return ""
    items = []
    for i, run in enumerate(runs):
        color = chart.series_color(i)
        panel = data["panels"].get(run.model_slug, {})
        name = data["models_by_slug"].get(run.model_slug, {}).get("name", run.model_slug)
        width = panel.get("width")
        band = (f'10 / 50 / 90 · {pct(width, 1)} MEAN WIDTH' if width is not None
                else "10 / 50 / 90")
        grade = panel.get("grade", "-")
        dash = chart.FAN_DASH[i % 3] if len(runs) > 1 else "none"
        items.append(
            '<div style="display:flex;align-items:center;gap:8px">'
            '<svg width="34" height="12" viewBox="0 0 34 12" '
            'style="flex:0 0 auto;display:block">'
            f'<rect x="0" y="2" width="34" height="8" fill="{a(color)}" opacity="0.16"></rect>'
            f'<line x1="0" y1="6" x2="34" y2="6" stroke="{a(color)}" '
            f'stroke-width="1.6" stroke-dasharray="{a(dash)}"></line></svg>'
            f'<span style="{STYRENE};font-size:var(--text-sm)">{e(name)}</span>'
            f'<span class="mono-data" style="font-size:var(--text-2xs);'
            f'color:var(--text-tertiary)">{e(band)}</span>'
            f'<span class="mono-data" style="font-size:var(--text-xs);'
            f'color:{a(grade_color(grade))};border:1px solid {a(grade_color(grade))};'
            f'padding:1px 5px">{e(grade)}</span>'
            f'<span style="font-size:var(--text-2xs);'
            f'color:{a(panel.get("verdict_color", "var(--text-tertiary)"))}">'
            f'{e(panel.get("verdict_short", ""))}</span></div>')
    return ('<div style="display:flex;align-items:center;gap:14px;padding:7px 12px;'
            'border-bottom:1px solid var(--border-subtle);background:var(--bg-raised);'
            f'flex-wrap:wrap">{"".join(items)}</div>')


def _chart_body(drawing: dict) -> str:
    axis = "".join(
        f'<span class="mono-data" style="position:absolute;right:6px;top:{a(g["top"])};'
        'transform:translateY(-50%);font-size:var(--text-2xs);'
        f'color:var(--text-tertiary);white-space:nowrap">{e(g["label"])}</span>'
        for g in drawing.get("grid", []))
    times = "".join(
        f'<span class="mono-data" style="position:absolute;left:{a(t["left"])};'
        'transform:translateX(-50%);font-size:var(--text-2xs);'
        f'color:var(--text-tertiary);white-space:nowrap">{e(t["label"])}</span>'
        for t in drawing.get("time_labels", []))
    left = a(drawing.get("now_left", "50%"))
    return (
        '<div class="fa-chart"><div style="position:relative;flex:1 1 auto;min-width:0">'
        f'{drawing["svg"]}'
        f'<span class="mono-data" style="position:absolute;left:{left};top:5px;'
        'transform:translateX(-100%);padding-right:6px;font-size:var(--text-2xs);'
        f'color:var(--accent-amber-strong);white-space:nowrap">'
        f'{e(drawing.get("boundary_label", "NOW"))} '
        f'{e(drawing.get("now_time", ""))}</span>'
        f'<span class="mono-data" style="position:absolute;left:{left};top:5px;'
        'padding-left:6px;font-size:var(--text-2xs);color:var(--text-tertiary);'
        'white-space:nowrap">FORECAST →</span>'
        '<span class="mono-data" style="position:absolute;left:4px;top:76%;'
        'font-size:var(--text-2xs);color:var(--text-tertiary)">VOLUME</span>'
        '<div style="position:absolute;left:0;right:0;bottom:0;height:16px">'
        f'{times}</div></div>'
        f'<div class="fa-axis">{axis}</div></div>')


def _chart_empty(data: dict) -> str:
    err = data.get("error")
    if err:
        return _error_state(err)
    return (
        '<div style="display:flex;flex-direction:column;align-items:center;gap:8px;'
        'padding:52px 16px;background:var(--bg-sunken)">'
        '<span class="mono-data" style="font-size:var(--text-2xl);'
        'color:var(--text-disabled)">▱</span>'
        f'<span style="{STYRENE};font-size:var(--text-md);color:var(--text-secondary)">'
        'No forecast issued</span>'
        '<span style="font-size:var(--text-xs);color:var(--text-tertiary);'
        'text-align:center;max-width:340px;text-wrap:pretty">'
        'Pick a model and press Forecast. The result is frozen at issue and '
        'archived before it is drawn.</span></div>')


def _error_state(err: dict) -> str:
    """The designed failure states: quota, load failure, rejected enrollment."""
    kind = err.get("kind", "load_failure")
    glyph = {"quota": "⚠", "load_failure": "✕", "enroll": "✕",
             "no_data": "∅", "no_gpu": "⚠"}.get(kind, "✕")
    color = {"quota": "var(--mute-orange)",
             "no_gpu": "var(--mute-orange)"}.get(kind, "var(--fin-down)")
    extra = ""
    if kind == "quota":
        extra = (f'<a href="{a(err.get("login_url", "#"))}" '
                 'style="font-family:var(--font-mono);font-size:var(--text-2xs)">'
                 'SIGN IN ↗</a>')
    elif kind == "no_gpu":
        # Nothing the visitor can do here, so the only honest offer is a Space
        # they control with hardware they choose.
        extra = (f'<a href="{a(err.get("duplicate_url", "#"))}" target="_blank" '
                 'rel="noopener" style="font-family:var(--font-mono);'
                 'font-size:var(--text-2xs)">RUN IT ON YOUR OWN HARDWARE ↗</a>')
    elif kind == "load_failure":
        # A model that will not load on this hardware is not always a bug in
        # the Space: duplicating it gives the user a box they control.
        extra = (f'<a href="{a(err.get("duplicate_url", "#"))}" target="_blank" '
                 'rel="noopener" style="font-family:var(--font-mono);'
                 'font-size:var(--text-2xs)">DUPLICATE THIS SPACE ↗</a>')
    return (
        '<div style="display:flex;flex-direction:column;align-items:center;gap:9px;'
        'padding:44px 16px;background:var(--bg-sunken)">'
        f'<span class="mono-data" style="font-size:var(--text-2xl);color:{a(color)}">'
        f'{e(glyph)}</span>'
        f'<span style="{STYRENE};font-size:var(--text-md);color:var(--text-secondary)">'
        f'{e(err.get("title", "Forecast failed"))}</span>'
        '<span style="font-size:var(--text-xs);color:var(--text-tertiary);'
        'text-align:center;max-width:420px;text-wrap:pretty">'
        f'{e(err.get("message", ""))}</span>'
        f'<div style="display:flex;gap:10px;align-items:center">{extra}'
        f'<button {bit("dismiss", "error")} style="padding:3px 9px;'
        'background:transparent;border:1px solid var(--border-default);'
        'color:var(--text-secondary);cursor:pointer;font-family:var(--font-mono);'
        'font-size:var(--text-2xs)">DISMISS</button></div></div>')


# --------------------------------------------------------------------------
# Track record
# --------------------------------------------------------------------------


def trackrecord_section(state: dict, data: dict) -> str:
    mode = state["mode"]
    slugs = state["selected"]
    scope = (f'{state["asset"]} · {state["tf"]} · H+{state["horizon"]} · '
             f'LAST {view.THUMBS} RESOLVED').upper()

    if mode == "matchup" and len(slugs) > 1:
        question = "Same stats, side by side — best in row highlighted."
        body = _scoreboard(state, data)
    else:
        primary = slugs[0] if slugs else None
        panel = data["panels"].get(primary, {})
        name = data["models_by_slug"].get(primary, {}).get("name", primary or "")
        question = f"How wrong has {name} been here recently?"
        body = _empty_record() if panel.get("empty", True) else _playground_record(panel, data)

    return (
        f'<section style="{PANEL}">'
        '<div style="display:flex;align-items:center;gap:10px;padding:8px 12px;'
        'border-bottom:1px solid var(--border-default);'
        'border-left:3px solid var(--accent-amber);flex-wrap:wrap">'
        f'<span style="{STYRENE};font-size:var(--text-md)">Track record</span>'
        f'<span style="color:var(--text-secondary);font-size:var(--text-xs)">'
        f'{e(question)}</span>'
        f'<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-tertiary);margin-left:auto">{e(scope)}</span></div>'
        f'{body}</section>')


def _empty_record() -> str:
    return (
        '<div style="display:flex;flex-direction:column;align-items:center;gap:8px;'
        'padding:26px 16px">'
        '<span class="mono-data" style="font-size:var(--text-2xl);'
        'color:var(--text-disabled)">∅</span>'
        f'<span style="{STYRENE};font-size:var(--text-md);color:var(--text-secondary)">'
        'No history yet</span>'
        '<span style="font-size:var(--text-xs);color:var(--text-tertiary);'
        'text-align:center;max-width:340px;text-wrap:pretty">Forecasts made here start '
        'the record. The first resolved forecast for this model, asset and timeframe '
        'appears in this panel.</span>'
        f'<button {bit("run", "go")} style="margin-top:2px;padding:4px 9px;'
        'background:transparent;border:1px solid var(--border-default);'
        'color:var(--text-secondary);cursor:pointer;font-family:var(--font-mono);'
        'font-size:var(--text-2xs)">MAKE THE FIRST FORECAST →</button></div>')


def _playground_record(panel: dict, data: dict) -> str:
    stats = [
        ("Empirical 80% coverage", pct(panel.get("coverage")),
         f'target 80% · {count(panel.get("resolved"))} resolved',
         panel.get("verdict_color", "var(--text-primary)")),
        ("Median abs error", pct(panel.get("median_err", 0) / 100
                                 if panel.get("median_err") is not None else None, 2),
         "at horizon close", "var(--text-primary)"),
        ("Mean band width", pct(panel.get("width"), 1),
         "10→90 span, % of price", "var(--text-primary)"),
        ("Backfilled share", pct(panel.get("backfilled_share")),
         "labelled in the record", "var(--mute-blue)"),
    ]
    stat_html = "".join(
        '<div style="padding:9px 12px;border-right:1px solid var(--border-subtle)">'
        f'<div style="{STYRENE};font-weight:300;font-size:var(--text-2xs);'
        f'letter-spacing:var(--tracking-wider);color:var(--text-tertiary)">{e(label)}</div>'
        f'<div class="mono-data" style="font-size:var(--text-xl);line-height:1.2;'
        f'color:{a(color)}">{e(value)}</div>'
        f'<div style="font-size:var(--text-2xs);color:var(--text-tertiary)">{e(note)}</div>'
        '</div>'
        for label, value, note, color in stats)

    cells = "".join(_thumb(t, data) for t in panel.get("thumbs", []))
    vcolor = panel.get("verdict_color", "var(--text-tertiary)")

    return (
        '<div><div style="display:grid;'
        'grid-template-columns:repeat(auto-fit,minmax(168px,1fr));'
        f'border-bottom:1px solid var(--border-default)">{stat_html}</div>'
        f'<div class="fa-trstrip">{cells}</div>'
        '<div style="display:flex;align-items:center;gap:10px;padding:7px 12px;'
        'border-top:1px solid var(--border-subtle);background:var(--bg-raised);'
        'flex-wrap:wrap">'
        f'<span class="mono-data" style="font-size:var(--text-xs);'
        f'color:{a(vcolor)};border:1px solid {a(vcolor)};padding:2px 7px">'
        f'{e(panel.get("verdict", ""))}</span>'
        '<span style="font-size:var(--text-xs);color:var(--text-secondary);'
        f'text-wrap:pretty">{e(_verdict_note(panel))}</span>'
        f'<a href="{a(data.get("store_url", "#"))}" target="_blank" rel="noopener" '
        'style="margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs);'
        f'white-space:nowrap">ALL {e(count(panel.get("total")))} ARCHIVED ↗</a>'
        '</div></div>')


def _verdict_note(panel: dict) -> str:
    coverage = panel.get("coverage")
    if coverage is None:
        return ("Not enough resolved forecasts here to say anything about "
                "calibration yet.")
    gap = coverage - config.NOMINAL_COVERAGE
    if abs(gap) <= 0.05:
        return ("Bands hold up on this pair: the realized path stayed inside the "
                "80% envelope about as often as it should.")
    if gap < 0:
        return ("Bands are narrower than the realized error justifies here. "
                "Read the median, not the confidence.")
    return ("Bands are wider than the realized error justifies here — the model "
            "is hedging more than this pair has needed.")


def _thumb(t: dict, data: dict) -> str:
    spark = t["spark"]
    backfill = ('<span class="pixel-text" style="color:var(--mute-blue);'
                'margin-left:auto">BACKFILL</span>' if t["backfilled"] else "")
    return (
        f'<div class="fa-trcell{" miss" if t["miss"] else ""}">'
        '<div style="display:flex;align-items:center;gap:5px">'
        f'<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-tertiary)">{e(t["date"])}</span>'
        f'<span class="mono-data" style="font-size:var(--text-xs);'
        f'color:{a(t["hit_color"])};margin-left:auto">{e(t["hit"])}</span></div>'
        '<svg width="94" height="38" viewBox="0 0 94 38" style="display:block">'
        f'<path d="{a(spark["band"])}" fill="var(--accent-amber-strong)" opacity="0.2"></path>'
        f'<path d="{a(spark["mid"])}" fill="none" stroke="var(--accent-amber-strong)" '
        'stroke-width="1.2" stroke-dasharray="3 2"></path>'
        f'<path d="{a(spark["real"])}" fill="none" stroke="var(--text-primary)" '
        'stroke-width="1.4"></path></svg>'
        '<div style="display:flex;align-items:center;gap:4px">'
        f'<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-secondary)">{e(t["err"])}</span>{backfill}</div></div>')


def _scoreboard(state: dict, data: dict) -> str:
    """The matchup table: same stats, aligned, best in row highlighted."""
    slugs = [s for s in state["selected"] if s in data["panels"]]
    if not slugs:
        return _empty_record()
    panels = [data["panels"][s] for s in slugs]
    cols = f'1.15fr repeat({len(slugs)},minmax(0,1fr))'

    heads = "".join(
        '<div style="padding:7px 12px;border-right:1px solid var(--border-subtle);'
        f'border-top:3px solid {a(chart.series_color(i))};display:flex;'
        'align-items:center;gap:7px">'
        f'<span style="{STYRENE};font-size:var(--text-sm);white-space:nowrap;'
        'overflow:hidden;text-overflow:ellipsis">'
        f'{e(data["models_by_slug"].get(s, {}).get("name", s))}</span>'
        f'<span class="mono-data" style="font-size:var(--text-xs);'
        f'color:{a(grade_color(p.get("grade", "-")))};'
        f'border:1px solid {a(grade_color(p.get("grade", "-")))};'
        f'padding:1px 5px;margin-left:auto">{e(p.get("grade", "-"))}</span></div>'
        for i, (s, p) in enumerate(zip(slugs, panels)))

    # (label, hint, value fn, "best" fn or None). Coverage is scored on
    # distance from nominal, not on being highest -- a narrower band is not a
    # better one, and the design says so on the page.
    rows = [
        ("80% band coverage", "TARGET 80%",
         lambda p: pct(p.get("coverage")),
         lambda p: (-abs(p["coverage"] - config.NOMINAL_COVERAGE)
                    if p.get("coverage") is not None else None)),
        ("Median abs error", "LOWER BETTER",
         lambda p: pct(p["median_err"] / 100 if p.get("median_err") is not None else None, 2),
         lambda p: (-p["median_err"] if p.get("median_err") is not None else None)),
        ("Mean band width", "CONTEXT ONLY",
         lambda p: pct(p.get("width"), 1), None),
        ("Resolved forecasts", "SAMPLE SIZE",
         lambda p: count(p.get("resolved")),
         lambda p: p.get("resolved")),
        ("Calibration verdict", "FROM RESOLVED ONLY",
         lambda p: p.get("verdict", DASH), None),
    ]

    body = []
    for label, hint, value_of, best_of in rows:
        best_index = None
        if best_of is not None:
            scored = [(i, best_of(p)) for i, p in enumerate(panels)]
            scored = [(i, v) for i, v in scored if v is not None]
            if scored:
                best_index = max(scored, key=lambda kv: kv[1])[0]
        cells = []
        for i, p in enumerate(panels):
            is_best = i == best_index
            fg = ("var(--accent-moss-strong)" if is_best else "var(--text-primary)")
            if label.startswith("Calibration"):
                fg = p.get("verdict_color", "var(--text-primary)")
            cells.append(
                '<div style="padding:7px 12px;border-right:1px solid var(--border-subtle);'
                f'background:{"var(--bg-raised)" if is_best else "transparent"};'
                'display:flex;align-items:center;gap:7px">'
                f'<span class="mono-data" style="font-size:var(--text-md);'
                f'color:{a(fg)}">{e(value_of(p))}</span>'
                '<span class="mono-data" style="font-size:var(--text-2xs);'
                f'color:var(--text-tertiary);margin-left:auto">{"BEST" if is_best else ""}</span>'
                '</div>')
        body.append(
            f'<div style="display:grid;grid-template-columns:{cols};'
            'border-bottom:1px solid var(--border-subtle)">'
            '<div style="padding:7px 12px;border-right:1px solid var(--border-subtle);'
            'display:flex;flex-direction:column;gap:1px">'
            f'<span style="{STYRENE};font-weight:300;font-size:var(--text-xs);'
            f'color:var(--text-secondary)">{e(label)}</span>'
            f'<span class="pixel-text" style="color:var(--text-tertiary)">{e(hint)}</span>'
            f'</div>{"".join(cells)}</div>')

    return (
        f'<div><div style="display:grid;grid-template-columns:{cols};'
        'border-bottom:1px solid var(--border-default);background:var(--bg-raised)">'
        '<div style="padding:7px 12px;border-right:1px solid var(--border-subtle)">'
        '<span class="pixel-text" style="color:var(--text-tertiary)">METRIC</span></div>'
        f'{heads}</div>{"".join(body)}'
        '<div style="display:flex;align-items:center;gap:10px;padding:7px 12px;'
        'background:var(--bg-raised);flex-wrap:wrap">'
        '<span class="pixel-text" style="color:var(--accent-amber-strong)">i</span>'
        '<span style="font-size:var(--text-xs);color:var(--text-secondary);'
        'text-wrap:pretty">Highlighted cell is best in row. Coverage closest to 80% '
        'wins — a narrower band is not a better one.</span></div></div>')


# --------------------------------------------------------------------------
# Rail
# --------------------------------------------------------------------------


def rail(state: dict, data: dict) -> str:
    return ('<aside class="fa-rail">'
            f'{_standings(state, data)}{_volatility(data)}{_log(state, data)}'
            f'{_extend(state, data)}{_enroll(state, data)}</aside>')


def _standings(state: dict, data: dict) -> str:
    rows = data.get("standings_rows", [])
    enrolled = len(data.get("models", []))

    tabs = "".join(
        f'<button {bit("cls", c)} style="flex:1 1 auto;padding:4px 5px;'
        f'background:{"var(--bg-raised)" if state["cls"] == c else "transparent"};'
        'border:0;border-right:1px solid var(--border-subtle);'
        f'color:{"var(--accent-amber-strong)" if state["cls"] == c else "var(--text-tertiary)"};'
        f'{STYRENE};font-size:var(--text-2xs);cursor:pointer">{e(c)}</button>'
        for c in ("All", "Crypto", "Equities"))

    if rows:
        body = "".join(
            f'<button {bit("stand", r["slug"])} class="fa-stand'
            f'{" on" if r["selected"] else ""}" '
            f'style="border-left-color:{a(chart.series_color(0)) if r["selected"] else "transparent"}">'
            f'<span class="mono-data" style="font-size:var(--text-2xs);'
            f'color:var(--text-tertiary);flex:0 0 auto">{e(r["rank"])}</span>'
            '<span class="fa-stand-mid">'
            f'<span class="mono-data fa-stand-name">{e(r["name"])}</span>'
            f'<span class="pixel-text" style="color:var(--text-tertiary)">{e(r["meta"])}</span>'
            '</span>'
            f'<span class="mono-data" style="font-size:var(--text-md);'
            f'color:{a(r["grade_color"])};flex:0 0 auto">{e(r["grade"])}</span></button>'
            for r in rows)
    else:
        body = ('<div style="padding:18px 10px;text-align:center">'
                '<span style="font-size:var(--text-xs);color:var(--text-tertiary);'
                'text-wrap:pretty">No forecasts have resolved yet. Standings appear '
                'once the resolver has outcomes to score.</span></div>')

    right = ('<span class="mono-data" style="font-size:var(--text-2xs);'
             f'color:var(--text-tertiary);margin-left:auto">{enrolled} ENROLLED</span>')

    return (
        f'<div style="{PANEL}">'
        f'{_panel_title("Arena standings", right)}'
        f'<div style="display:flex;border-bottom:1px solid var(--border-subtle)">{tabs}</div>'
        f'{body}'
        '<div style="padding:6px 10px;display:flex;align-items:center">'
        '<span class="pixel-text" style="color:var(--text-tertiary)">'
        'GRADES FROM RESOLVED FORECASTS ONLY</span>'
        f'<a href="{a(data.get("standings_url", "#"))}" target="_blank" rel="noopener" '
        'style="margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs)">'
        'FULL TABLE ↗</a></div></div>')


def _volatility(data: dict) -> str:
    vol = data.get("volatility") or {}
    rows = vol.get("rows", [])
    if not rows:
        return ""
    body = "".join(
        '<div style="display:flex;flex-direction:column;gap:4px">'
        '<div style="display:flex;align-items:center;gap:8px">'
        f'<span style="{STYRENE};font-weight:300;font-size:var(--text-2xs);'
        f'color:var(--text-secondary)">{e(r["label"])}</span>'
        f'<span class="mono-data" style="font-size:var(--text-xs);'
        f'color:{a(r["fg"])};margin-left:auto">{e(r["value"])}</span></div>'
        '<div style="height:5px;background:var(--bg-sunken);'
        'border:1px solid var(--border-subtle);position:relative;overflow:hidden">'
        f'<div style="position:absolute;left:0;top:0;bottom:0;width:{a(r["pct"])};'
        f'background:{a(r["fg"])}"></div></div></div>'
        for r in rows)
    right = ('<span class="mono-data" style="font-size:var(--text-2xs);'
             f'color:var(--text-tertiary);margin-left:auto">{e(vol.get("verdict", ""))}</span>')
    return (
        f'<div style="{PANEL}">{_panel_title("Volatility read", right)}'
        '<div style="padding:10px;display:flex;flex-direction:column;gap:9px">'
        f'{body}'
        '<span style="font-size:var(--text-2xs);color:var(--text-tertiary);'
        f'text-wrap:pretty">{e(vol.get("note", ""))}</span></div></div>')


def _log(state: dict, data: dict) -> str:
    entries = state.get("log", [])[:view.LOG_LIMIT]
    if entries:
        body = "".join(
            '<div style="display:flex;align-items:center;gap:8px;padding:6px 10px;'
            'border-bottom:1px solid var(--border-subtle)">'
            f'<span class="mono-data" style="font-size:var(--text-2xs);'
            f'color:var(--text-tertiary);flex:0 0 auto">{e(l["time"])}</span>'
            '<span class="fa-stand-mid">'
            f'<span class="mono-data fa-stand-name">{e(l["name"])}</span>'
            f'<span class="pixel-text" style="color:var(--text-tertiary)">{e(l["meta"])}</span>'
            '</span>'
            f'<button {bit("reopen", l["id"])} style="background:transparent;border:0;'
            'color:var(--accent-amber-strong);cursor:pointer;font-family:var(--font-mono);'
            'font-size:var(--text-2xs);flex:0 0 auto">RE-OPEN</button></div>'
            for l in entries)
    else:
        body = ('<div style="padding:14px 10px">'
                '<span style="font-size:var(--text-xs);color:var(--text-tertiary)">'
                'Forecasts you issue this session appear here.</span></div>')
    right = ('<span class="mono-data" style="font-size:var(--text-2xs);'
             'color:var(--text-tertiary);margin-left:auto">THIS SESSION</span>')
    return (
        f'<div style="{PANEL}">{_panel_title("Forecast log", right)}{body}'
        '<div style="padding:6px 10px">'
        '<span class="pixel-text" style="color:var(--text-tertiary)">'
        'ARCHIVED IMMUTABLY · SEED + CONFIG SAVED</span></div></div>')


def _extend(state: dict, data: dict) -> str:
    cov = data.get("coverage") or {}
    pct_label = cov.get("pct_label", DASH)
    width = cov.get("pct_width", "0%")
    rows = "".join(
        '<div style="display:flex;align-items:center;gap:8px">'
        f'<span class="pixel-text" style="color:var(--text-tertiary)">{e(label)}</span>'
        f'<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-secondary);margin-left:auto">{e(value)}</span></div>'
        for label, value in cov.get("rows", []))

    label = "Contribute a backfill run (uses your quota)"
    note = state.get("backfill_note")
    note_html = (f'<span class="mono-data" style="font-size:var(--text-2xs);'
                 f'color:var(--accent-moss-strong);text-wrap:pretty">{e(note)}</span>'
                 if note else "")
    return (
        f'<div style="{PANEL}">{_panel_title("Extend the record")}'
        '<div style="padding:10px;display:flex;flex-direction:column;gap:8px">'
        '<div style="display:flex;align-items:center;gap:8px">'
        f'<span style="font-size:var(--text-xs);color:var(--text-secondary)">'
        f'{e(cov.get("scope", ""))}</span>'
        f'<span class="mono-data" style="font-size:var(--text-md);'
        f'color:var(--accent-amber-strong);margin-left:auto">{e(pct_label)}</span></div>'
        '<div style="height:6px;background:var(--bg-sunken);'
        'border:1px solid var(--border-subtle);position:relative;overflow:hidden">'
        f'<div style="position:absolute;left:0;top:0;bottom:0;width:{a(width)};'
        'background:var(--accent-amber)"></div></div>'
        f'<div style="display:flex;flex-direction:column;gap:3px">{rows}</div>'
        f'<button {bit("backfill", "run")} style="width:100%;padding:6px;'
        'background:transparent;border:1px solid var(--border-default);'
        f'color:var(--text-secondary);cursor:pointer;{STYRENE};'
        f'font-size:var(--text-xs)">{e(label)}</button>'
        f'{note_html}'
        '<span class="pixel-text" style="color:var(--text-tertiary)">'
        'BACKFILLED ENTRIES ARE LABELLED IN THE RECORD</span></div></div>')


def _enroll(state: dict, data: dict) -> str:
    note = state.get("enroll_note") or "A smoke test runs before a model is enrolled"
    ok = state.get("enroll_ok")
    color = ("var(--accent-moss-strong)" if ok else
             "var(--fin-down)" if ok is False else "var(--text-tertiary)")

    families = "".join(
        f'<button {bit("family", f)} class="fa-pill'
        f'{" on" if state.get("family") == f else ""}" '
        f'style="font-size:var(--text-2xs)">{e(f)}</button>'
        for f in data.get("families", ()))

    return (
        f'<div style="{PANEL}">{_panel_title("Enroll a model")}'
        '<div style="padding:10px;display:flex;flex-direction:column;gap:8px">'
        f'<input value="{a(state.get("hfid", ""))}" '
        f'data-bit-input="hfid" placeholder="author/model-name" '
        'style="width:100%;padding:5px 7px;background:var(--bg-sunken);'
        'border:1px solid var(--border-default);outline:none;'
        'font-family:var(--font-mono);font-size:var(--text-xs);'
        'color:var(--text-primary)" />'
        f'<div style="display:flex;gap:4px;flex-wrap:wrap">{families}</div>'
        '<div style="display:flex;align-items:center;gap:7px">'
        f'<button {bit("enroll", "run")} style="padding:5px 10px;'
        'background:transparent;border:1px solid var(--border-default);'
        f'color:var(--text-secondary);cursor:pointer;{STYRENE};'
        'font-size:var(--text-xs)">Smoke-test</button></div>'
        f'<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:{a(color)};text-wrap:pretty">{e(note)}</span>'
        '<span style="font-size:var(--text-2xs);color:var(--text-tertiary);'
        'text-wrap:pretty">Only models loadable through a vetted adapter family are '
        'accepted. No user-supplied code is ever executed.</span></div></div>')


# --------------------------------------------------------------------------
# Footer
# --------------------------------------------------------------------------


def methodology(data: dict) -> str:
    return (
        '<div style="display:flex;align-items:flex-start;gap:10px;padding:9px 12px;'
        'border:1px solid var(--border-subtle);background:var(--bg-panel)">'
        '<span class="pixel-text" style="color:var(--accent-amber-strong);'
        'flex:0 0 auto;margin-top:2px">i</span>'
        '<span style="font-size:var(--text-xs);color:var(--text-secondary);'
        'text-wrap:pretty">Forecasts are frozen at issue and never revised; quantiles '
        'from N sampled paths where applicable; seeds shown; backfilled entries '
        'labelled; grades computed from resolved forecasts only. Nothing here is '
        'financial advice.</span>'
        f'<a href="{a(data.get("methodology_url", "#"))}" target="_blank" rel="noopener" '
        'style="margin-left:auto;font-family:var(--font-mono);font-size:var(--text-2xs);'
        'white-space:nowrap;flex:0 0 auto">METHODOLOGY ↗</a></div>')


def footer(data: dict) -> str:
    nav = data.get("nav") or {}
    products = [i.get("name", "") for i in nav.get("items", [])][:12]
    prod_html = "".join(
        f'<span style="color:var(--text-secondary);font-size:var(--text-xs)">{e(p)}</span>'
        for p in products)
    resources = "".join(
        f'<a href="{a(url)}" target="_blank" rel="noopener" '
        f'style="color:var(--text-secondary);font-size:var(--text-xs)">{e(label)}</a>'
        for label, url in data.get("footer_resources", ()))

    return (
        f'<footer style="{PANEL}">'
        '<div class="fa-foot">'
        '<div style="padding:14px;border-right:1px solid var(--border-subtle)">'
        f'<div style="{STYRENE};font-size:var(--text-2xs);'
        'letter-spacing:var(--tracking-wider);color:var(--text-tertiary);'
        'margin-bottom:8px">Products</div>'
        '<div style="display:grid;grid-template-columns:1fr 1fr;gap:3px 12px">'
        f'{prod_html}</div></div>'
        '<div style="padding:14px;border-right:1px solid var(--border-subtle)">'
        f'<div style="{STYRENE};font-size:var(--text-2xs);'
        'letter-spacing:var(--tracking-wider);color:var(--text-tertiary);'
        'margin-bottom:8px">Resources</div>'
        '<div style="display:flex;flex-direction:column;gap:3px">'
        f'{resources}</div></div>'
        '<div style="padding:14px;border-right:1px solid var(--border-subtle)">'
        f'<div style="{STYRENE};font-size:var(--text-2xs);'
        'letter-spacing:var(--tracking-wider);color:var(--text-tertiary);'
        'margin-bottom:8px">Method</div>'
        '<div style="display:flex;flex-direction:column;gap:3px">'
        '<span style="color:var(--text-secondary);font-size:var(--text-xs)">'
        'Frozen at issue</span>'
        '<span style="color:var(--text-secondary);font-size:var(--text-xs)">'
        'Seeded and reproducible</span>'
        '<span style="color:var(--text-secondary);font-size:var(--text-xs)">'
        'Backfill labelled</span>'
        '<span style="color:var(--text-secondary);font-size:var(--text-xs)">'
        'Graded on resolved only</span></div></div>'
        '<div style="padding:14px;background:var(--bg-raised)">'
        '<div style="display:flex;align-items:center;gap:6px;margin-bottom:8px">'
        '<span class="pixel-text" style="color:var(--accent-amber-strong)">⚠</span>'
        f'<span style="{STYRENE};font-size:var(--text-2xs);'
        'letter-spacing:var(--tracking-wider);color:var(--accent-amber-strong)">'
        'Disclaimer</span></div>'
        '<div class="styrene-text" style="font-size:var(--text-xs);'
        'text-transform:uppercase;letter-spacing:var(--tracking-wide);'
        'color:var(--text-secondary);line-height:var(--leading-normal);'
        'text-wrap:pretty">The Bit Trading Company publishes research tools and '
        'educational software. Nothing here is financial advice. Forecasts are model '
        'output, not predictions. Past performance does not predict future results.'
        '</div></div></div>'
        '<div style="display:flex;align-items:center;gap:14px;padding:8px 14px;'
        'border-top:1px solid var(--border-subtle);flex-wrap:wrap">'
        '<span style="display:inline-block;width:6px;height:6px;background:var(--fin-up);'
        'animation:bitPulse 2s ease-in-out infinite"></span>'
        '<span class="mono-data" style="font-size:var(--text-2xs);'
        f'color:var(--text-tertiary)">{e(data.get("status_line", ""))}</span>'
        '<span class="mono-data" style="font-size:var(--text-2xs);'
        'color:var(--text-tertiary);margin-left:auto">'
        '© 2026 THE BIT TRADING COMPANY</span></div></footer>')


# --------------------------------------------------------------------------
# The page
# --------------------------------------------------------------------------


def page(state: dict, data: dict) -> str:
    """The whole document body, from state. Pure -- no I/O anywhere below."""
    return (
        '<div class="bit-root" style="background:var(--bg-canvas);'
        'color:var(--text-primary);display:flex;align-items:stretch;'
        'font-family:var(--font-body);font-size:var(--text-base)">'
        f'{sidebar.render(data.get("nav") or {}, active="Forecast Arena", emit=emit)}'
        '<div style="flex:1 1 auto;min-width:0;display:flex;flex-direction:column">'
        f'{header(state, data)}'
        '<main style="flex:1 1 auto;min-width:0;padding:12px;display:flex;'
        'flex-direction:column;gap:12px">'
        f'{title_row(state, data)}'
        f'{stats_bar(data.get("stats", []))}'
        f'{models_section(state, data)}'
        f'{controls(state, data)}'
        '<div class="fa-zones">'
        '<div class="fa-main">'
        f'{chart_section(state, data)}'
        f'{trackrecord_section(state, data)}'
        '</div>'
        f'{rail(state, data)}'
        '</div>'
        f'{methodology(data)}'
        f'{footer(data)}'
        '</main></div></div>')