CI deploy cb6851b9

app.py

@@ -29,7 +29,7 @@ from src.ui import components as C
 from src.ui import compare_tab as CT
 from src.ui import shell, theme
 from src.ui.bridge import (ACTION_ELEMENT_ID, BRIDGE_JS, BRIDGE_LOAD_JS,
-                            parse_action, parse_pair)
+                            TRIGGER_ELEMENT_ID, 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")
@@ -89,6 +89,11 @@ def default_state() -> dict:
         "log_scale": False, "cvd": False,
         "metric": "OOS Sharpe", "topn": 15,
         "sig_asset": "BTC-USD", "sig_tf": "1d",
+        "tab": "compare",   # "compare" | "backtest"
+        "user": None,
+        # The bridge fires through two event paths for robustness; the nonce
+        # is what stops the same click being executed twice.
+        "last_nonce": "",
     }
 
 
@@ -129,9 +134,18 @@ def apply_action(st: dict, raw: str) -> tuple[dict, bool]:
     if action is None or action.is_noop:
         return st, False
 
+    # Same click delivered twice (textbox change *and* trigger click) must not
+    # run the backtest twice.
+    nonce = raw.split("|", 1)[1] if "|" in raw else ""
+    if nonce and nonce == st.get("last_nonce"):
+        return st, False
+    st["last_nonce"] = nonce
+
     k, v = action.key, action.value
 
-    if k == "acc":
+    if k == "tab" and v in ("compare", "backtest"):
+        st["tab"] = v
+    elif k == "acc":
         st["acc"][v] = not st["acc"].get(v, False)
     elif k == "strategy" and v in strategies.PRESETS:
         st["strategy"] = v
@@ -225,19 +239,32 @@ def render_left(st: dict) -> str:
     )
 
 
+ON_SPACE = bool(os.environ.get("SPACE_ID"))
+
+
 def render_top(st: dict, rec: RunRecord | None) -> str:
-    if rec is None:
-        return shell.top_bar(status="NO RUN LOADED", tone="idle")
+    """The header: nav, run status, glossary, sign-in.
+
+    The context chip only appears on the Backtest tab -- on Compare it would be
+    describing a run the user is not looking at.
+    """
+    common = dict(tab=st.get("tab", "compare"), glossary=GLOSSARY,
+                  user=st.get("user"), on_space=ON_SPACE)
+    if rec is None or st.get("tab") != "backtest":
+        status = (f"RUN {rec.run_id} COMPLETE" if rec else "NO RUN LOADED")
+        tone = "ok" if rec else "idle"
+        return shell.top_bar(status=status, tone=tone, **common)
+
     mode = {"walk_forward": "WALK-FORWARD", "holdout": "HOLDOUT",
             "split": "SPLIT", "none": "NO SPLIT"}.get(st["validation_mode"], "")
     try:
-        s, e = runtime.window_for(st["asset"], st["timeframe"], st["range"])
-        span = f"{s.date()} to {e.date()}"
+        a, b = runtime.window_for(st["asset"], st["timeframe"], st["range"])
+        span = f"{a.date()} to {b.date()}"
     except Exception:
         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")
+                         tone="ok", elapsed=f"{rec.elapsed_s:.1f}s", **common)
 
 
 def render_stat_band(rec: RunRecord | None) -> str:
@@ -289,12 +316,6 @@ def render_stat_band(rec: RunRecord | None) -> str:
     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),
@@ -387,122 +408,129 @@ def build_overview(rec: RunRecord, *, log_scale: bool, cvd: bool):
 
 
 def build_app() -> gr.Blocks:
-    store = runtime.get_store()
-    all_assets = runtime.available_assets()
     all_tfs = list(config.TIMEFRAMES)
+    boot = default_state()
 
     with gr.Blocks(theme=theme.bit_theme(), css=theme.full_css(),
                    head=BRIDGE_JS, title="Bit · Backtest Lab",
                    analytics_enabled=False, fill_height=True) as demo:
 
-        state = gr.State(default_state())
+        state = gr.State(boot)
         history = gr.State([])
         current = gr.State(None)
 
-        # 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)
+        # Bridge target. It must be RENDERED -- `visible=False` removes the
+        # element from the DOM entirely, leaving the click listener with
+        # nothing to write into -- so it is rendered and hidden in CSS
+        # (`#bit-action` is clipped to a 1px box, see theme.py).
+        action_box = gr.Textbox(elem_id=ACTION_ELEMENT_ID, visible=True,
+                                label="", show_label=False,
+                                container=False, interactive=True)
+        # Clicked by the bridge after it writes the payload. A real Button
+        # click is the event path Gradio always honours.
+        action_trigger = gr.Button("", elem_id=TRIGGER_ELEMENT_ID,
+                                   visible=True, variant="secondary")
 
-        top_html = gr.HTML(shell.top_bar())
+        top_html = gr.HTML(render_top(boot, None))
 
         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()))
+            # Strategy Builder belongs to the Backtest tab only.
+            with gr.Column(elem_classes="bit-zone-left", min_width=0,
+                           visible=False) as left_col:
+                left_html = gr.HTML(render_left(boot))
 
             with gr.Column(elem_classes="bit-zone-center", min_width=0):
-                stat_html = gr.HTML("")
 
-                with gr.Tabs():
-                    with gr.Tab("Compare"):
-                        catalog_meta = gr.HTML("")
+                # ---------------- Compare ----------------
+                with gr.Column(visible=True) as compare_view:
+                    catalog_meta = gr.HTML("")
+                    with gr.Tabs():
+                        with gr.Tab("Leaderboard"):
+                            podium = gr.HTML("")
+                            lb_meta = gr.HTML("")
+                            lb_table = gr.HTML("")
+                            gr.HTML(shell.micro(
+                                "returns over time · top ranked · cumulative, "
+                                "costs included"))
+                            lb_overlay = gr.Plot()
+                            gr.HTML(shell.micro(
+                                "risk vs return · marker area = trade count"))
+                            lb_scatter = gr.Plot()
+                        with gr.Tab("Models"):
+                            models_note = gr.HTML("")
+                            with gr.Row():
+                                acc_plot = gr.Plot()
+                                cal_plot = gr.Plot()
+                            model_bars = gr.Plot()
+                            score_table = gr.HTML("")
+                        with gr.Tab("Signals"):
+                            sig_panel = gr.HTML("")
+                        with gr.Tab("Run history"):
+                            runs_table = gr.HTML("")
+                        with gr.Tab("Coverage"):
+                            coverage_kpis = gr.HTML("")
+                            coverage_html = gr.HTML("")
+                            extend_panel = gr.HTML("")
+                            with gr.Row():
+                                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():
+                                ext_start = gr.Textbox(label="Start (YYYY-MM-DD)",
+                                                       scale=2)
+                                ext_end = gr.Textbox(label="End (YYYY-MM-DD)",
+                                                     scale=2)
+                            with gr.Row():
+                                estimate_btn = gr.Button("Estimate", size="sm",
+                                                         elem_classes="bit-ghost-btn")
+                                extend_btn = gr.Button("Extend coverage", size="sm",
+                                                       elem_classes="bit-run-btn")
+                            extend_out = gr.HTML("")
+                            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", scale=2)
+                                add_btn = gr.Button("Smoke test & add", size="sm",
+                                                    elem_classes="bit-ghost-btn",
+                                                    scale=1)
+                            add_out = gr.HTML("")
+
+                # ---------------- Backtest ----------------
+                with gr.Column(visible=False) as backtest_view:
+                    # Before a run there is nothing honest to show, so the tabs
+                    # stay hidden rather than rendering a grid of empty axes.
+                    empty_html = gr.HTML(C.empty_state(), visible=True)
+
+                    with gr.Column(visible=False) as results_view:
+                        stat_html = gr.HTML("")
                         with gr.Tabs():
-                            with gr.Tab("Leaderboard"):
-                                podium = gr.HTML("")
-                                lb_meta = gr.HTML("")
-                                lb_table = gr.HTML("")
-                                gr.HTML(shell.micro(
-                                    "returns over time · top ranked · "
-                                    "cumulative, costs included"))
-                                lb_overlay = gr.Plot()
-                                gr.HTML(shell.micro(
-                                    "risk vs return · marker area = trade count"))
-                                lb_scatter = gr.Plot()
-
-                            with gr.Tab("Models"):
-                                models_note = gr.HTML("")
+                            with gr.Tab("Overview"):
+                                equity_plot = gr.Plot()
+                                regime_plot = gr.Plot()
+                                with gr.Row():
+                                    underwater_plot = gr.Plot()
+                                    rolling_plot = gr.Plot()
+                                price_plot = gr.Plot()
                                 with gr.Row():
-                                    acc_plot = gr.Plot()
-                                    cal_plot = gr.Plot()
-                                model_bars = gr.Plot()
-                                score_table = gr.HTML("")
-
-                            with gr.Tab("Signals"):
-                                sig_panel = gr.HTML("")
-
-                            with gr.Tab("Run history"):
-                                runs_table = gr.HTML("")
-
-                    with gr.Tab("Overview"):
-                        empty_state = gr.HTML(C.empty_state())
-                        equity_plot = gr.Plot()
-                        regime_plot = gr.Plot()
-                        with gr.Row():
-                            underwater_plot = gr.Plot()
-                            rolling_plot = gr.Plot()
-                        price_plot = gr.Plot()
-                        with gr.Row():
-                            pnl_plot = gr.Plot()
-                            hold_plot = gr.Plot()
-                            mae_plot = gr.Plot()
-                        costs_note = gr.HTML("")
-
-                    with gr.Tab("Trades"):
-                        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()
-
-                    with gr.Tab("Report"):
-                        report_md = gr.Markdown("_Run a backtest to generate "
-                                                "the report._")
-                        report_equity = gr.Plot()
-
-                    with gr.Tab("Coverage"):
-                        coverage_kpis = gr.HTML("")
-                        coverage_html = gr.HTML("")
-                        extend_panel = gr.HTML("")
-                        with gr.Row():
-                            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():
-                            ext_start = gr.Textbox(label="Start (YYYY-MM-DD)", scale=2)
-                            ext_end = gr.Textbox(label="End (YYYY-MM-DD)", scale=2)
-                        with gr.Row():
-                            estimate_btn = gr.Button("Estimate", size="sm",
-                                                     elem_classes="bit-ghost-btn")
-                            extend_btn = gr.Button("Extend coverage", size="sm",
-                                                   elem_classes="bit-run-btn")
-                        extend_out = gr.HTML("")
-                        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", scale=2)
-                            add_btn = gr.Button("Smoke test & add", size="sm",
-                                                elem_classes="bit-ghost-btn", scale=1)
-                        add_out = gr.HTML("")
-
-            with gr.Column(elem_classes="bit-zone-right", min_width=0):
-                right_html = gr.HTML(render_right([]))
+                                    pnl_plot = gr.Plot()
+                                    hold_plot = gr.Plot()
+                                    mae_plot = gr.Plot()
+                                costs_note = gr.HTML("")
+                            with gr.Tab("Trades"):
+                                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()
+                            with gr.Tab("Report"):
+                                report_md = gr.Markdown("")
+                                report_equity = gr.Plot()
 
         gr.HTML(shell.footer())
 
@@ -513,9 +541,21 @@ def build_app() -> gr.Blocks:
         overview_out = [equity_plot, regime_plot, underwater_plot, rolling_plot,
                         price_plot, pnl_plot, hold_plot, mae_plot, costs_note]
         compare_out = [podium, lb_table, lb_overlay, lb_scatter, lb_meta]
+        view_out = [left_col, compare_view, backtest_view, empty_html, results_view]
+
+        def views(st, rec):
+            """Which zones are visible, given the tab and whether a run exists."""
+            backtest = st.get("tab") == "backtest"
+            has_run = rec is not None
+            return (
+                gr.update(visible=backtest),            # left strategy builder
+                gr.update(visible=not backtest),        # compare
+                gr.update(visible=backtest),            # backtest
+                gr.update(visible=backtest and not has_run),   # empty state
+                gr.update(visible=backtest and has_run),       # results
+            )
 
         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"],
@@ -530,25 +570,26 @@ def build_app() -> gr.Blocks:
             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(),
+                return (st, hist, rec, render_left(st), render_top(st, rec),
                         gr.update(), *(gr.update(),) * 9, gr.update(),
                         gr.update(), gr.update(), gr.update(),
-                        *compare_views(st), render_right(hist))
+                        *compare_views(st), *views(st, rec))
 
+            # Running always means the user is looking at the Backtest tab.
+            st["tab"] = "backtest"
             progress(0.2, desc="Reading cached slices")
             try:
                 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.top_bar(status="RUN FAILED", tone="warn",
+                                      tab="backtest", glossary=GLOSSARY,
+                                      user=st.get("user"), on_space=ON_SPACE),
                         shell.note(esc(str(exc)), danger=True),
-                        *(gr.update(),) * 9,
-                        shell.micro("no trades"), "",
-                        "_Run failed._", gr.update(),
-                        *compare_views(st), render_right(hist))
+                        *(gr.update(),) * 9, gr.update(), gr.update(),
+                        gr.update(), gr.update(),
+                        *compare_views(st), *views(st, None))
 
             progress(0.85, desc="Building charts")
             hist = ([rec] + list(hist))[:40]
@@ -563,13 +604,19 @@ def build_app() -> gr.Blocks:
                 report_markdown(rec),
                 charts.equity_curve(rec.result.equity, rec.result.benchmark_equity,
                                     plan=rec.result.plan),
-                *compare_views(st), render_right(hist),
+                *compare_views(st), *views(st, rec),
             )
 
         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]
-
+                      report_equity, *compare_out, *view_out]
+
+        # Two bindings on purpose. Setting a textbox value from JS does not
+        # always wake Svelte's binding, and a hidden Button click does not
+        # always survive either; whichever lands first wins, and the nonce
+        # check in apply_action makes the loser a no-op.
+        action_trigger.click(on_action, [action_box, state, history, current],
+                             action_out, show_progress="minimal")
         action_box.change(on_action, [action_box, state, history, current],
                           action_out, show_progress="minimal")
 
@@ -601,9 +648,9 @@ def build_app() -> gr.Blocks:
                            [ext_model, ext_asset, ext_tf, ext_start, ext_end],
                            [extend_out])
         extend_btn.click(
-            lambda m, a, t, s, e: (
+            lambda m, a, t, s_, e: (
                 (lambda html, _df: (html, render_table(runtime.coverage_frame())))(
-                    *extension.extend_ui(m, a, t, s, e))),
+                    *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(
@@ -626,7 +673,8 @@ def build_app() -> gr.Blocks:
             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),
+            return (st, render_top(st, None), 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"),
@@ -636,15 +684,28 @@ def build_app() -> gr.Blocks:
                     render_table(runtime.coverage_frame(), empty="no coverage"),
                     extension.status_html())
 
-        # `js=` is what actually installs the click bridge on Spaces: the
-        # `head=` injection above works locally but HF serves the page from its
-        # own template and drops it. The installer is idempotent.
         demo.load(on_load, [state],
-                  [state, left_html, catalog_meta, *compare_out,
+                  [state, top_html, 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],
-                  js=BRIDGE_LOAD_JS)
+                   extend_panel])
+
+        # Installing the bridge gets its OWN load with no fn and no outputs.
+        # Gradio treats a `js=` return value as the output values, so attaching
+        # it to a load that also has outputs wipes them in the browser -- which
+        # is exactly what broke the UI while leaving the API working.
+        demo.load(fn=None, inputs=None, outputs=None, js=BRIDGE_LOAD_JS)
+
+        # Sign-in state is only meaningful on a Space. Off-Space, Gradio mocks
+        # OAuth by calling whoami and raises without a token, so this handler
+        # is only registered where OAuth actually exists.
+        if ON_SPACE:
+            def whoami(st, profile: gr.OAuthProfile | None = None):
+                st = copy.deepcopy(st)
+                st["user"] = getattr(profile, "username", None) if profile else None
+                return st, render_top(st, None)
+
+            demo.load(whoami, [state], [state, top_html])
 
     return demo
 

src/ui/bridge.py

@@ -60,6 +60,7 @@ ALLOWED_KEYS = frozenset({
 })
 
 ACTION_ELEMENT_ID = "bit-action"
+TRIGGER_ELEMENT_ID = "bit-trigger"
 
 # 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
@@ -116,7 +117,8 @@ BRIDGE_JS = """
   }, true);
 })();
 </script>
-""".replace("__ELEM_ID__", ACTION_ELEMENT_ID)
+""".replace("__ELEM_ID__", ACTION_ELEMENT_ID).replace(
+    "__TRIGGER_ID__", TRIGGER_ELEMENT_ID)
 
 
 @dataclass(frozen=True)
@@ -179,8 +181,23 @@ BRIDGE_LOAD_JS = """
     var box = holder();
     if (!box) return;
     var nonce = Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
-    box.value = payload + '|' + nonce;
+
+    // Setting .value directly does not reliably wake Svelte's binding, so the
+    // native setter is used and both events are dispatched...
+    var proto = box.tagName === 'TEXTAREA'
+      ? window.HTMLTextAreaElement.prototype : window.HTMLInputElement.prototype;
+    var setter = Object.getOwnPropertyDescriptor(proto, 'value').set;
+    setter.call(box, payload + '|' + nonce);
     box.dispatchEvent(new Event('input', { bubbles: true }));
+    box.dispatchEvent(new Event('change', { bubbles: true }));
+
+    // ...and a hidden Gradio Button is then clicked. A real click on a real
+    // Button is the one event path Gradio always honours, so the handler fires
+    // even if the textbox binding did not register.
+    var trigger = document.getElementById('__TRIGGER_ID__');
+    var btn = trigger ? (trigger.tagName === 'BUTTON'
+                         ? trigger : trigger.querySelector('button')) : null;
+    if (btn) { setTimeout(function () { btn.click(); }, 0); }
   }
 
   document.addEventListener('click', function (e) {
@@ -202,4 +219,5 @@ BRIDGE_LOAD_JS = """
     if (e.key === 'Enter') { commit(e.target); }
   }, true);
 }
-""".replace("__ELEM_ID__", ACTION_ELEMENT_ID)
+""".replace("__ELEM_ID__", ACTION_ELEMENT_ID).replace(
+    "__TRIGGER_ID__", TRIGGER_ELEMENT_ID)

src/ui/shell.py

@@ -143,7 +143,72 @@ def section(key, number, title, open_, body):
 # --------------------------------------------------------------------------
 
 
-def top_bar(context="", status="NO RUN LOADED", tone="idle", elapsed=""):
+def nav_tab(label, key, active):
+    """A header navigation tab."""
+    color = "var(--text-primary)" if active else "var(--text-tertiary)"
+    border = "var(--accent-amber)" if active else "transparent"
+    return (
+        f'<button data-bit="{esc(emit("tab", key))}" style="padding:6px 10px;'
+        f"background:transparent;border:0;border-bottom:2px solid {border};"
+        f"color:{color};cursor:pointer;font-family:var(--font-styrene);"
+        f"text-transform:uppercase;letter-spacing:var(--tracking-wide);"
+        f'font-size:var(--text-xs)">{esc(label)}</button>'
+    )
+
+
+def glossary_tooltip(items):
+    """A `?` in the header that reveals the metrics glossary on hover.
+
+    Pure CSS -- no JS, and no state to keep in sync.
+    """
+    rows = "".join(
+        f'<div style="margin-bottom:6px">'
+        f'<div class="pixel-text" style="color:var(--accent-amber-strong)">{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 items)
+    return (
+        f'<span class="bit-help">'
+        f'<span class="bit-help-dot" role="button" tabindex="0" '
+        f'aria-label="Metrics glossary">?</span>'
+        f'<span class="bit-help-pop">'
+        f'<span class="pixel-text" style="color:var(--text-tertiary);'
+        f'display:block;margin-bottom:6px">Metrics glossary</span>{rows}</span></span>'
+    )
+
+
+def login_control(user=None, on_space=True):
+    """Sign-in link, or the signed-in handle.
+
+    Rendered as markup rather than `gr.LoginButton` so it can live inside the
+    design's header. It points at the same OAuth route the Gradio component
+    uses. Off-Space there is no OAuth to reach, so it says so instead.
+    """
+    if user:
+        return (
+            f'<span class="mono-data" style="font-size:var(--text-2xs);'
+            f"color:var(--accent-moss-strong);padding:3px 8px;"
+            f'border:1px solid var(--accent-moss-dim)">@{esc(user)}</span>'
+        )
+    if not on_space:
+        return (
+            f'<span class="mono-data" style="font-size:var(--text-2xs);'
+            f"color:var(--text-tertiary);padding:3px 8px;"
+            f'border:1px solid var(--border-default)" '
+            f'title="Sign-in is available when running on a Hugging Face Space. '
+            f'Reading and backtesting work without an account.">SIGN IN &#183; ON SPACE</span>'
+        )
+    return (
+        f'<a href="/login/huggingface" class="mono-data" '
+        f'style="font-size:var(--text-2xs);color:var(--stone-950);'
+        f"background:var(--accent-amber);padding:3px 8px;"
+        f'border:1px solid var(--accent-amber);text-decoration:none;'
+        f'white-space:nowrap">SIGN IN WITH HUGGING FACE</a>'
+    )
+
+
+def top_bar(context="", status="NO RUN LOADED", tone="idle", elapsed="",
+            tab="compare", glossary=(), user=None, on_space=True):
     colors = {
         "ok": ("var(--accent-moss-strong)", "var(--accent-moss-dim)"),
         "run": ("var(--accent-amber-strong)", "var(--accent-amber-dim)"),
@@ -174,6 +239,9 @@ def top_bar(context="", status="NO RUN LOADED", tone="idle", elapsed=""):
         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'<nav style="display:flex;gap:2px;margin-left:8px">'
+        f'{nav_tab("Compare", "compare", tab == "compare")}'
+        f'{nav_tab("Backtest", "backtest", tab == "backtest")}</nav>'
         f"{ctx}"
         f'<div style="display:flex;align-items:center;gap:8px;margin-left:auto;'
         f'flex-wrap:wrap">'
@@ -184,6 +252,8 @@ def top_bar(context="", status="NO RUN LOADED", tone="idle", elapsed=""):
         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"{glossary_tooltip(glossary) if glossary else ''}"
+        f"{login_control(user, on_space)}"
         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);'

src/ui/theme.py

@@ -447,6 +447,29 @@ input:focus, select:focus, textarea:focus{
 .bit-footer-right{ white-space:nowrap; }
 
 
+/* ================= header help tooltip =================
+   The metrics glossary lives behind a `?` in the header. Pure CSS hover/focus,
+   so there is no state to keep in sync and it works without JS. */
+.bit-help{ position:relative; display:inline-flex; }
+.bit-help-dot{
+  display:inline-flex; align-items:center; justify-content:center;
+  width:18px; height:18px; cursor:help;
+  border:1px solid var(--border-default); color:var(--text-tertiary);
+  font-family:var(--font-mono); font-size:var(--text-2xs);
+}
+.bit-help-dot:hover, .bit-help-dot:focus{
+  border-color:var(--accent-amber); color:var(--accent-amber-strong);
+  outline:none;
+}
+.bit-help-pop{
+  display:none; position:absolute; top:24px; right:0; z-index:var(--z-menu);
+  width:320px; max-height:60vh; overflow:auto; padding:10px 12px;
+  background:var(--bg-raised); border:1px solid var(--border-strong);
+  box-shadow:0 8px 24px rgba(0,0,0,0.5); text-align:left;
+}
+.bit-help:hover .bit-help-pop,
+.bit-help:focus-within .bit-help-pop{ display:block; }
+
 /* 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. */
@@ -478,8 +501,9 @@ input:focus, select:focus, textarea:focus{
   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{
+/* The bridge target and trigger must stay in the DOM to receive events, but
+   never show. `visible=False` would remove them from the DOM entirely. */
+#bit-action, #bit-trigger{
   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;

tests/test_ui.py

@@ -616,3 +616,115 @@ def test_gradio_content_wrapper_is_stretched_full_bleed():
     body = m.group(2)
     assert "max-width:100% !important" in body
     assert "padding:0 !important" in body
+
+
+# --------------------------------------------------------------------------
+# Regressions from the header/nav restructure
+# --------------------------------------------------------------------------
+
+
+def test_header_carries_nav_login_and_glossary():
+    from src.ui import shell
+
+    html = shell.top_bar(tab="backtest", glossary=bitapp.GLOSSARY, on_space=True)
+    assert 'data-bit="tab:compare"' in html
+    assert 'data-bit="tab:backtest"' in html
+    assert "/login/huggingface" in html, "sign-in link missing from the header"
+    assert "bit-help" in html, "glossary tooltip missing from the header"
+
+
+def test_signed_in_header_shows_the_handle_not_a_login_link():
+    from src.ui import shell
+
+    html = shell.top_bar(user="alice", on_space=True)
+    assert "@alice" in html
+    assert "/login/huggingface" not in html
+
+
+def test_off_space_header_explains_sign_in_is_unavailable():
+    from src.ui import shell
+
+    html = shell.top_bar(on_space=False)
+    assert "/login/huggingface" not in html
+    assert "SIGN IN" in html
+
+
+def test_context_chip_only_appears_on_the_backtest_tab():
+    """On Compare, a run context chip would describe something not on screen."""
+    st = bitapp.default_state()
+    st["tab"] = "compare"
+
+    class FakeRec:
+        run_id = "abcd1234"
+        elapsed_s = 1.0
+
+    # The chip is the only place the asset and timeframe appear together.
+    # "WALK-FORWARD" alone is ambiguous -- it is also a glossary term.
+    compare_header = bitapp.render_top(st, FakeRec())
+    assert "BTC-USD · 1D" not in compare_header
+
+    st["tab"] = "backtest"
+    assert "BTC-USD · 1D" in bitapp.render_top(st, FakeRec())
+
+
+def test_tab_action_switches_views():
+    st, _ = bitapp.apply_action(bitapp.default_state(), "tab:backtest|n1")
+    assert st["tab"] == "backtest"
+    st, _ = bitapp.apply_action(st, "tab:compare|n2")
+    assert st["tab"] == "compare"
+
+
+def test_unknown_tab_value_is_ignored():
+    st, _ = bitapp.apply_action(bitapp.default_state(), "tab:../admin|n")
+    assert st["tab"] == "compare"
+
+
+def test_the_same_click_cannot_run_twice():
+    """Two event bindings deliver one click; the nonce must de-duplicate it."""
+    st = bitapp.default_state()
+    st, first = bitapp.apply_action(st, "run:|nonce-a")
+    _, replay = bitapp.apply_action(st, "run:|nonce-a")
+    assert first is True and replay is False
+
+
+def test_a_fresh_click_still_runs_after_a_deduped_one():
+    st = bitapp.default_state()
+    st, _ = bitapp.apply_action(st, "run:|nonce-a")
+    _, again = bitapp.apply_action(st, "run:|nonce-b")
+    assert again is True
+
+
+def test_running_switches_to_the_backtest_tab():
+    st = bitapp.default_state()
+    assert st["tab"] == "compare"
+    st, should_run = bitapp.apply_action(st, "example:|n")
+    assert should_run is True
+
+
+def test_right_sidebar_is_gone():
+    import inspect
+
+    src = inspect.getsource(bitapp.build_app)
+    assert "bit-zone-right" not in src
+    assert "right_panel" not in src
+
+
+def test_bridge_elements_are_rendered_not_visible_false():
+    """`visible=False` removes an element from the DOM, which left the click
+    bridge with nothing to write into."""
+    import inspect
+
+    src = inspect.getsource(bitapp.build_app)
+    box = src[src.index("action_box = gr.Textbox"):]
+    assert "visible=True" in box[:260]
+    trig = src[src.index("action_trigger = gr.Button"):]
+    assert "visible=True" in trig[:200]
+
+
+def test_bridge_js_is_loaded_without_outputs():
+    """Gradio treats a `js=` return value as the output values, so the bridge
+    installer must not share a load call that has outputs."""
+    import inspect
+
+    src = inspect.getsource(bitapp.build_app)
+    assert "demo.load(fn=None, inputs=None, outputs=None, js=BRIDGE_LOAD_JS)" in src