WebGL-safe 2D trajectory fallback + enriched loss plot

app.py

@@ -55,6 +55,10 @@ from demo_core import (
     LOCAL_RUN_MD,
     PlotStreamConfig,
     RUN_MODES,
+    TRAJECTORY_VIEW_CHOICES,
+    WEBGL_PROBE_JS,
+    resolve_trajectory_mode,
+    webgl_status_markdown,
     get_overview_composite_path,
     get_preset_params,
     get_sample_guitar_path,
@@ -914,29 +918,46 @@ def _has_opt_history(history: dict | None) -> bool:
     return bool(history and history.get("step"))
 
 
-def _plot_3d_on_run_start(mode: str) -> tuple:
-    """Hide 3D column during Quick Demo runs."""
-    if mode == "quick":
-        return gr.update(visible=False), gr.update(visible=True)
+def _trajectory_panel_visibility(
+    run_mode: str,
+    history: dict | None,
+    traj_view: str,
+    webgl_ok: bool,
+    *,
+    running: bool = False,
+) -> tuple:
+    """Hide WebGL 3D column during Quick runs; 2D stays visible live."""
+    resolved = resolve_trajectory_mode(traj_view, webgl_ok)
+    if run_mode == "quick" and resolved == "3d":
+        if running or not _has_opt_history(history):
+            return gr.update(visible=False), gr.update(visible=True)
     return gr.update(visible=True), gr.update(visible=False)
 
 
-def _plot_3d_on_run_finish(mode: str, history: dict | None) -> tuple:
-    """Reveal full trajectory after Quick Demo completes."""
-    if mode == "quick":
-        if _has_opt_history(history):
-            return gr.update(visible=True), gr.update(visible=False)
-        return gr.update(visible=False), gr.update(visible=True)
-    return gr.update(visible=True), gr.update(visible=False)
+def _plot_3d_on_run_start(run_mode: str, traj_view: str, webgl_ok: bool) -> tuple:
+    return _trajectory_panel_visibility(run_mode, None, traj_view, webgl_ok, running=True)
+
+
+def _plot_3d_on_run_finish(run_mode: str, history: dict | None, traj_view: str, webgl_ok: bool) -> tuple:
+    return _trajectory_panel_visibility(run_mode, history, traj_view, webgl_ok, running=False)
+
+
+def _plot_3d_for_mode(run_mode: str, history: dict | None, traj_view: str, webgl_ok: bool) -> tuple:
+    return _trajectory_panel_visibility(run_mode, history, traj_view, webgl_ok, running=False)
+
 
+def _apply_run_mode_with_3d(mode: str, history: dict | None, traj_view: str, webgl_ok: bool) -> tuple:
+    return _apply_run_mode(mode) + _plot_3d_for_mode(mode, history, traj_view, webgl_ok)
 
-def _plot_3d_for_mode(mode: str, history: dict | None) -> tuple:
-    """Idle visibility when switching run mode or resetting."""
-    return _plot_3d_on_run_finish(mode, history)
 
+def _on_webgl_probe(probe: str | None = None) -> tuple:
+    ok = str(probe if probe is not None else "1") != "0"
+    view_up = gr.update(value="2d") if not ok else gr.update()
+    return ok, view_up, webgl_status_markdown(ok, "2d" if not ok else "auto")
 
-def _apply_run_mode_with_3d(mode: str, history: dict | None) -> tuple:
-    return _apply_run_mode(mode) + _plot_3d_for_mode(mode, history)
+
+def _on_trajectory_view_change(view: str, webgl_ok: bool) -> str:
+    return webgl_status_markdown(webgl_ok, view)
 
 
 def _nav_to_page(page: str) -> tuple:
@@ -1130,6 +1151,32 @@ WALLPAPER_HEAD = f"""
     }}
 }})();
 </script>
+<script>
+(function() {{
+    function markWebGLFailed() {{
+        try {{ localStorage.setItem('6string-webgl-failed', '1'); }} catch (e) {{}}
+        var status = document.querySelector('.vqc-webgl-status');
+        if (status) {{
+            status.innerHTML = '⚠ <strong>WebGL error detected</strong> — switch <strong>Trajectory view</strong> to <strong>2D (WebGL-safe)</strong>.';
+        }}
+    }}
+    function scanPlotlyWebGLErrors() {{
+        var plots = document.querySelectorAll('.vqc-plot3d-panel, .js-plotly-plot');
+        plots.forEach(function(plot) {{
+            var text = plot.innerText || '';
+            if (text.indexOf('WebGL is not supported') >= 0) markWebGLFailed();
+        }});
+    }}
+    setInterval(scanPlotlyWebGLErrors, 2500);
+    var obs = new MutationObserver(scanPlotlyWebGLErrors);
+    function start() {{
+        scanPlotlyWebGLErrors();
+        if (document.body) obs.observe(document.body, {{ childList: true, subtree: true }});
+    }}
+    if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start);
+    else start();
+}})();
+</script>
 {KATEX_CDN}
 """
 
@@ -1359,6 +1406,21 @@ footer {{
 .gradio-container .vqc-run-mode-radio label {{
     line-height: 1.35 !important;
 }}
+.gradio-container .vqc-webgl-status {{
+    margin: 0.2rem 0 0.45rem 0 !important;
+    padding: 0.45rem 0.65rem !important;
+    border-radius: 8px !important;
+    border: 1px solid rgba(255, 176, 0, 0.25) !important;
+    background: rgba(10, 10, 10, 0.4) !important;
+    font-size: 0.84rem !important;
+    color: #c9b8ff !important;
+}}
+.gradio-container .vqc-webgl-status:empty {{
+    display: none !important;
+}}
+.gradio-container .vqc-trajectory-view-radio label {{
+    line-height: 1.3 !important;
+}}
 .gradio-container .vqc-panel-header-row {{
     display: flex !important;
     align-items: center !important;
@@ -2166,9 +2228,13 @@ def _run_optimize(
     use_fisher_modulation: bool,
     compare_adam: bool,
     run_mode: str,
+    trajectory_view: str,
+    webgl_ok: bool,
     progress: gr.Progress = gr.Progress(track_tqdm=False),
 ):
     plot_cfg = PlotStreamConfig.for_run_mode(run_mode or "quick")
+    traj_mode = resolve_trajectory_mode(trajectory_view, webgl_ok)
+    webgl_fallback = trajectory_view == "3d" and not webgl_ok
     stream_fn = run_comparison_stream if compare_adam else run_optimization_stream
     try:
         yield from stream_fn(
@@ -2178,6 +2244,8 @@ def _run_optimize(
             burst_factor_max=float(burst_factor_max),
             use_fisher_modulation=bool(use_fisher_modulation),
             plot_cfg=plot_cfg,
+            trajectory_mode=traj_mode,
+            trajectory_webgl_fallback=webgl_fallback,
             progress_cb=progress,
         )
     except Exception as exc:
@@ -2579,9 +2647,23 @@ def build_app() -> gr.Blocks:
                     )
 
             opt_history_state = gr.State(None)
+            webgl_ok_state = gr.State(True)
 
             with gr.Tabs():
                 with gr.Tab("OPTIMIZE"):
+                    gr.Markdown(
+                        "Watch the **stereographic Rosenbrock path** toward [1,1,1] — "
+                        "colored by loss. **Burst events** (vertical ticks on loss plot) fire when "
+                        "a virtual string's stagnation tension triggers a plateau escape."
+                    )
+                    trajectory_view = gr.Radio(
+                        choices=TRAJECTORY_VIEW_CHOICES,
+                        value="auto",
+                        label="Trajectory view",
+                        info="Choose 2D if you see a WebGL error (common in embedded or privacy browsers).",
+                        elem_classes=["vqc-trajectory-view-radio"],
+                    )
+                    webgl_status = gr.Markdown("", elem_classes=["vqc-webgl-status"])
                     with gr.Row():
                         with gr.Column(
                             visible=False,
@@ -2598,9 +2680,9 @@ def build_app() -> gr.Blocks:
                             elem_classes=["vqc-plot3d-hint-col"],
                         ) as plot_3d_hint_col:
                             plot_3d_hint = gr.Markdown(
-                                "**S³ trajectory (Quick Demo)** — hidden during the run to cut Plotly "
-                                "payload size. The full stereographic path appears here when optimization "
-                                "completes.",
+                                "**S³ trajectory (Quick Demo + 3D)** — hidden during the run to cut "
+                                "Plotly payload. **2D (WebGL-safe)** mode streams live projections here. "
+                                "Full 3D path unlocks when optimization completes.",
                                 elem_classes=["vqc-plot3d-hint"],
                             )
                         plot_loss = gr.Plot(label="Loss envelope")
@@ -2717,10 +2799,10 @@ def build_app() -> gr.Blocks:
                     logger.exception("Modal synthesis failed")
                     return None, None, go.Figure(), friendly_error("synthesis", exc)
 
-            def _reset_workspace():
+            def _reset_workspace(traj_view, webgl_ok):
                 p = get_run_mode_params("quick")
                 spec = RUN_MODES["quick"]
-                plot_col, hint_col = _plot_3d_for_mode("quick", None)
+                plot_col, hint_col = _plot_3d_for_mode("quick", None, traj_view, webgl_ok)
                 return (
                     p["total_steps"],
                     p["steps_per_update"],
@@ -2750,14 +2832,14 @@ def build_app() -> gr.Blocks:
             opt_event = (
                 run_opt_btn.click(
                     _plot_3d_on_run_start,
-                    [run_mode],
+                    [run_mode, trajectory_view, webgl_ok_state],
                     [plot_3d_col, plot_3d_hint_col],
                 )
                 .then(
                     _run_optimize,
                     [
                         total_steps, steps_per_update, learning_rate, burst_factor_max,
-                        use_fisher, compare_adam, run_mode,
+                        use_fisher, compare_adam, run_mode, trajectory_view, webgl_ok_state,
                     ],
                     [plot_3d, plot_loss, plot_vu, plot_twist, opt_status, opt_history_state],
                 )
@@ -2768,7 +2850,7 @@ def build_app() -> gr.Blocks:
                 )
                 .then(
                     _plot_3d_on_run_finish,
-                    [run_mode, opt_history_state],
+                    [run_mode, opt_history_state, trajectory_view, webgl_ok_state],
                     [plot_3d_col, plot_3d_hint_col],
                 )
             )
@@ -2800,10 +2882,16 @@ def build_app() -> gr.Blocks:
             ]
             run_mode.change(
                 _apply_run_mode_with_3d,
-                [run_mode, opt_history_state],
+                [run_mode, opt_history_state, trajectory_view, webgl_ok_state],
                 run_mode_outputs,
             )
 
+            trajectory_view.change(
+                _on_trajectory_view_change,
+                [trajectory_view, webgl_ok_state],
+                [webgl_status],
+            )
+
             def _hint_on_dial_change(ts, spu, cmp):
                 return _runtime_hint(ts, spu, cmp)
 
@@ -2816,7 +2904,11 @@ def build_app() -> gr.Blocks:
                 use_fisher, compare_adam, audio_duration, run_mode, preset_note,
                 runtime_hint, opt_status, opt_history_state, plot_3d_col, plot_3d_hint_col,
             ]
-            reset_btn.click(_reset_workspace, outputs=reset_outputs)
+            reset_btn.click(
+                _reset_workspace,
+                [trajectory_view, webgl_ok_state],
+                outputs=reset_outputs,
+            )
 
             demo_guitar_btn.click(
                 _run_demo_guitar,
@@ -2918,6 +3010,12 @@ def build_app() -> gr.Blocks:
         newhere_minimize_btn.click(_minimize_newhere, outputs=newhere_outputs[:3])
         claims_minimize_btn.click(_minimize_claims, outputs=claims_outputs[:3])
         demo.load(_stream_term_boot, outputs=term_keypad_outputs)
+        demo.load(
+            _on_webgl_probe,
+            inputs=None,
+            outputs=[webgl_ok_state, trajectory_view, webgl_status],
+            js=WEBGL_PROBE_JS,
+        )
 
         gr.Markdown(
             "6-String Optimizer — mystery shell + physics-audio · "

build_info.py

@@ -1,4 +1,4 @@
 """Auto-generated by scripts/deploy_hf_space.sh — do not edit by hand."""
 
 BUILD_COMMIT = "97b4a81"
-BUILD_UPDATED_UTC = "2026-06-28T17:08:06Z"
+BUILD_UPDATED_UTC = "2026-06-28T17:15:51Z"

demo_core.py

@@ -12,6 +12,7 @@ from typing import Any, Generator
 import numpy as np
 import plotly.express as px
 import plotly.graph_objects as go
+from plotly.subplots import make_subplots
 import pandas as pd
 import torch
 
@@ -51,6 +52,7 @@ SIMULATION_BANNER_MD = """
 
 KNOWN_LIMITATIONS_BODY = """
 - **CPU only** — optimization + Plotly streaming can feel slow; use **Quick Demo** first.
+- **WebGL required for 3D** — embedded views, privacy browsers, or older GPUs may block WebGL; use **2D (WebGL-safe)** trajectory view.
 - **Cold starts** — first load after sleep may take 30–60s to build.
 - **ETA is approximate** — actual time varies with server load and concurrent users.
 - **Compare vs RiemannianAdam** doubles wall time; capped at 3000 steps on HF.
@@ -58,6 +60,24 @@ KNOWN_LIMITATIONS_BODY = """
 - **Best experience:** desktop Chrome/Firefox · let Quick Demo finish before switching tabs.
 """.strip()
 
+WEBGL_PROBE_JS = """() => {
+    let ok = false;
+    try {
+        if (localStorage.getItem('6string-webgl-failed') === '1') ok = false;
+        else {
+            const c = document.createElement('canvas');
+            ok = !!(window.WebGLRenderingContext && (c.getContext('webgl') || c.getContext('experimental-webgl')));
+        }
+    } catch (e) { ok = false; }
+    return ok ? "1" : "0";
+}"""
+
+TRAJECTORY_VIEW_CHOICES: list[tuple[str, str]] = [
+    ("Auto (3D if WebGL available)", "auto"),
+    ("3D interactive", "3d"),
+    ("2D projection (WebGL-safe)", "2d"),
+]
+
 KNOWN_LIMITATIONS_MD = f"### Known limitations (HF free tier)\n{KNOWN_LIMITATIONS_BODY}"
 
 LOCAL_RUN_MD = """
@@ -419,6 +439,30 @@ class PlotStreamConfig:
         return cls(trajectory_every=1, trajectory_max_points=400, loss_max_points=1500, live_3d=True)
 
 
+def resolve_trajectory_mode(view_pref: str, webgl_ok: bool) -> str:
+    """Map UI preference + client WebGL probe to '3d' or '2d'."""
+    pref = (view_pref or "auto").strip().lower()
+    if pref == "2d":
+        return "2d"
+    if pref == "3d":
+        return "3d" if webgl_ok else "2d"
+    return "2d" if not webgl_ok else "3d"
+
+
+def webgl_status_markdown(webgl_ok: bool, view_pref: str) -> str:
+    resolved = resolve_trajectory_mode(view_pref, webgl_ok)
+    if not webgl_ok:
+        return (
+            "⚠ **WebGL unavailable** — trajectory uses **2D stereographic projections**. "
+            "Select **2D (WebGL-safe)** below, or try desktop Chrome/Firefox."
+        )
+    if view_pref == "2d":
+        return "Showing **2D projections** (WebGL-safe mode)."
+    if view_pref == "3d":
+        return "✓ WebGL detected — **interactive 3D** trajectory."
+    return "✓ WebGL detected — **Auto** will use 3D trajectory."
+
+
 def _subsample_df(df: pd.DataFrame, max_points: int) -> pd.DataFrame:
     if len(df) <= max_points:
         return df
@@ -445,6 +489,10 @@ def friendly_error(context: str, exc: Exception) -> str:
         "asset": (
             f"Missing bundled asset ({msg}). Re-deploy the Space or use the GitHub repo copy."
         ),
+        "webgl": (
+            "3D trajectory needs WebGL. Switch **Trajectory view** to **2D (WebGL-safe)** "
+            "in the OPTIMIZE tab, or open in desktop Chrome/Firefox."
+        ),
     }
     lead = hints.get(context, "Something went wrong.")
     return f"⚠ {lead}\n\nDetails: {msg[:300]}"
@@ -521,6 +569,73 @@ def _build_hierarchical_optimizer(
     return opt
 
 
+def _make_trajectory_2d_figure(
+    df: pd.DataFrame,
+    *,
+    max_points: int | None = None,
+    lite: bool = False,
+    webgl_fallback: bool = False,
+) -> go.Figure:
+    """Canvas/SVG 2D projections — no WebGL required."""
+    if df.empty or not {"u_x", "u_y", "u_z"}.issubset(df.columns):
+        return _trajectory_placeholder("Waiting for trajectory data…")
+
+    plot_df = _subsample_df(df, max_points) if max_points else df
+    marker_size = 3 if lite else 4
+    fallback_note = " · 2D fallback (WebGL unavailable)" if webgl_fallback else ""
+    fig = make_subplots(
+        rows=1,
+        cols=2,
+        subplot_titles=("u_x vs u_y", "u_y vs u_z"),
+        horizontal_spacing=0.1,
+    )
+    marker_kw = dict(
+        size=marker_size,
+        color=plot_df["loss"],
+        colorscale="Viridis",
+        showscale=not lite,
+        colorbar=dict(title="loss", len=0.55, y=0.5) if not lite else None,
+    )
+    line_kw = dict(width=1 if lite else 2, color="rgba(255,170,0,0.65)")
+    for col, xcol, ycol in ((1, "u_x", "u_y"), (2, "u_y", "u_z")):
+        fig.add_trace(
+            go.Scatter(
+                x=plot_df[xcol],
+                y=plot_df[ycol],
+                mode="lines+markers",
+                marker=marker_kw,
+                line=line_kw,
+                name=f"{xcol}/{ycol}",
+                showlegend=False,
+            ),
+            row=1,
+            col=col,
+        )
+        fig.add_trace(
+            go.Scatter(
+                x=[1],
+                y=[1],
+                mode="markers",
+                marker=dict(size=9, color="#FF4444", symbol="diamond"),
+                name="min [1,1,1]",
+                showlegend=False,
+            ),
+            row=1,
+            col=col,
+        )
+    fig.update_layout(
+        title=f"S³ → R³ Stereographic — 2D projections{fallback_note}",
+        paper_bgcolor="#0a0a0a",
+        font=dict(color="#FFB000"),
+        height=380,
+        margin=dict(l=40, r=20, t=50, b=30),
+    )
+    for col, xlab, ylab in ((1, "u_x", "u_y"), (2, "u_y", "u_z")):
+        fig.update_xaxes(title_text=xlab, gridcolor="#333", row=1, col=col)
+        fig.update_yaxes(title_text=ylab, gridcolor="#333", row=1, col=col)
+    return fig
+
+
 def _make_trajectory_figure(
     df: pd.DataFrame,
     *,
@@ -572,18 +687,95 @@ def _make_trajectory_figure(
     return fig
 
 
-def _make_loss_figure(df: pd.DataFrame, *, max_points: int | None = None) -> go.Figure:
+def make_trajectory_figure(
+    df: pd.DataFrame,
+    *,
+    mode: str = "3d",
+    max_points: int | None = None,
+    lite: bool = False,
+    webgl_fallback: bool = False,
+) -> go.Figure:
+    """Dispatch 3D WebGL or 2D canvas trajectory."""
+    if mode == "2d":
+        return _make_trajectory_2d_figure(
+            df,
+            max_points=max_points,
+            lite=lite,
+            webgl_fallback=webgl_fallback,
+        )
+    if df.empty:
+        return _trajectory_placeholder("Waiting for trajectory data…")
+    return _make_trajectory_figure(df, max_points=max_points, lite=lite)
+
+
+def _make_loss_figure(
+    df: pd.DataFrame,
+    *,
+    max_points: int | None = None,
+    monitor: OptimizerMonitor | None = None,
+    step: int | None = None,
+    best_loss: float | None = None,
+) -> go.Figure:
+    if df.empty or "loss" not in df.columns:
+        fig = go.Figure()
+        fig.add_annotation(
+            text="Loss curve will appear after the first optimizer update",
+            xref="paper", yref="paper", x=0.5, y=0.5,
+            showarrow=False, font=dict(size=13, color="#FFB000"),
+        )
+        fig.update_layout(
+            title="Loss Envelope (log scale)",
+            paper_bgcolor="#0a0a0a",
+            plot_bgcolor="#111318",
+            font=dict(color="#FFB000"),
+            height=280,
+            xaxis=dict(visible=False),
+            yaxis=dict(visible=False),
+        )
+        return fig
+
     plot_df = _subsample_df(df, max_points) if max_points else df
-    fig = px.line(plot_df, x="step", y="loss", title="Loss Envelope (log scale)", log_y=True)
+    current_loss = float(plot_df["loss"].iloc[-1])
+    best = best_loss if best_loss is not None else float(plot_df["loss"].min())
+    cur_step = step if step is not None else int(plot_df["step"].iloc[-1])
+    burst_n = len(monitor.burst_events) if monitor else 0
+    title = (
+        f"Loss Envelope — step {cur_step:,} · current {current_loss:.4g} · "
+        f"best {best:.4g} · {burst_n} burst{'s' if burst_n != 1 else ''}"
+    )
+    fig = px.line(plot_df, x="step", y="loss", title=title, log_y=True)
     fig.update_traces(line=dict(color="#FFB000", width=2))
+    if monitor:
+        color_cycle = STRING_COLORS
+        for i, (burst_step, layer, _) in enumerate(monitor.burst_events[-12:]):
+            color = color_cycle[i % len(color_cycle)]
+            fig.add_vline(
+                x=burst_step,
+                line_width=1,
+                line_dash="dot",
+                line_color=color,
+                opacity=0.55,
+            )
+            if i == len(monitor.burst_events[-12:]) - 1:
+                fig.add_annotation(
+                    x=burst_step,
+                    y=current_loss,
+                    text=f"{layer} burst",
+                    showarrow=False,
+                    font=dict(size=9, color=color),
+                    yshift=12,
+                )
+    losses = plot_df["loss"].astype(float)
+    y_min = max(losses.min() * 0.5, 1e-12)
+    y_max = max(losses.max() * 2.0, y_min * 10)
     fig.update_layout(
         paper_bgcolor="#0a0a0a",
         plot_bgcolor="#111318",
         font=dict(color="#FFB000"),
-        xaxis=dict(gridcolor="#333"),
-        yaxis=dict(gridcolor="#333"),
+        xaxis=dict(gridcolor="#333", title="Step"),
+        yaxis=dict(gridcolor="#333", title="Loss", type="log", range=[np.log10(y_min), np.log10(y_max)]),
         height=280,
-        margin=dict(l=40, r=20, t=40, b=30),
+        margin=dict(l=40, r=20, t=50, b=30),
     )
     return fig
 
@@ -657,26 +849,42 @@ def _build_live_figures(
     total_steps: int,
     last_traj: go.Figure | None,
     loss_builder,
+    trajectory_mode: str = "3d",
+    trajectory_webgl_fallback: bool = False,
+    best_loss: float | None = None,
 ) -> tuple[go.Figure, go.Figure, go.Figure, go.Figure]:
     """Throttle expensive 3D redraws; subsample points for 2D plots."""
     final = step >= total_steps
     lite = not final
-    loss_fig = _make_loss_figure(df, max_points=None if final else plot_cfg.loss_max_points)
+    loss_fig = _make_loss_figure(
+        df,
+        max_points=None if final else plot_cfg.loss_max_points,
+        monitor=monitor,
+        step=step,
+        best_loss=best_loss,
+    )
     vu_fig = _make_string_vu_figure(monitor)
     twist_fig = _make_twist_figure(df, max_points=None if final else plot_cfg.loss_max_points)
 
-    refresh_3d = final or (update_idx % plot_cfg.trajectory_every == 0)
-    if not plot_cfg.live_3d and not final:
+    use_2d = trajectory_mode == "2d"
+    refresh_traj = final or (update_idx % plot_cfg.trajectory_every == 0) or use_2d
+    if not plot_cfg.live_3d and not final and not use_2d:
         traj_fig = last_traj or _trajectory_placeholder()
-    elif refresh_3d:
-        traj_fig = _make_trajectory_figure(
+    elif refresh_traj:
+        traj_fig = make_trajectory_figure(
             df,
+            mode=trajectory_mode,
             max_points=None if final else plot_cfg.trajectory_max_points,
             lite=lite and not final,
+            webgl_fallback=trajectory_webgl_fallback,
         )
     else:
-        traj_fig = last_traj or _make_trajectory_figure(
-            df, max_points=plot_cfg.trajectory_max_points, lite=True,
+        traj_fig = last_traj or make_trajectory_figure(
+            df,
+            mode=trajectory_mode,
+            max_points=plot_cfg.trajectory_max_points,
+            lite=True,
+            webgl_fallback=trajectory_webgl_fallback,
         )
 
     if loss_builder is not None:
@@ -693,6 +901,8 @@ def run_optimization_stream(
     burst_factor_max: float,
     use_fisher_modulation: bool,
     plot_cfg: PlotStreamConfig | None = None,
+    trajectory_mode: str = "3d",
+    trajectory_webgl_fallback: bool = False,
     progress_cb=None,
 ) -> Generator[tuple, None, None]:
     import time
@@ -768,6 +978,9 @@ def run_optimization_stream(
             total_steps=total_steps,
             last_traj=last_traj,
             loss_builder=None,
+            trajectory_mode=trajectory_mode,
+            trajectory_webgl_fallback=trajectory_webgl_fallback,
+            best_loss=best_loss,
         )
         last_traj = traj_fig
         yield (traj_fig, loss_fig, vu_fig, twist_fig, status, dict(monitor.history))
@@ -833,6 +1046,8 @@ def run_comparison_stream(
     burst_factor_max: float,
     use_fisher_modulation: bool,
     plot_cfg: PlotStreamConfig | None = None,
+    trajectory_mode: str = "3d",
+    trajectory_webgl_fallback: bool = False,
     progress_cb=None,
 ) -> Generator[tuple, None, None]:
     """Side-by-side burst optimizer vs geoopt RiemannianAdam on identical Rosenbrock S³ init."""
@@ -914,26 +1129,23 @@ def run_comparison_stream(
             f"ADAM {loss_a:.6f} (best {best_a:.6f})  │  Δ {loss_a - loss_b:+.4f}  │  {eta}"
         )
         update_idx += 1
-        final = step >= cap
-        lite = not final
-        loss_max = None if final else plot_cfg.loss_max_points
-        loss_fig = _make_dual_loss_figure(hist_burst, hist_adam, max_points=loss_max)
-        vu_fig = _make_string_vu_figure(monitor)
-        twist_fig = _make_twist_figure(df, max_points=loss_max)
-
-        refresh_3d = final or (update_idx % plot_cfg.trajectory_every == 0)
-        if not plot_cfg.live_3d and not final:
-            traj_fig = last_traj or _trajectory_placeholder("3D paused in Quick mode — dual loss & VU update live")
-        elif refresh_3d:
-            traj_fig = _make_trajectory_figure(
-                df,
-                max_points=None if final else plot_cfg.trajectory_max_points,
-                lite=lite,
-            )
-        else:
-            traj_fig = last_traj or _make_trajectory_figure(
-                df, max_points=plot_cfg.trajectory_max_points, lite=True,
-            )
+        traj_fig, loss_fig, vu_fig, twist_fig = _build_live_figures(
+            df,
+            monitor,
+            plot_cfg=plot_cfg,
+            update_idx=update_idx,
+            step=step,
+            total_steps=cap,
+            last_traj=last_traj,
+            loss_builder=lambda d: _make_dual_loss_figure(
+                hist_burst,
+                hist_adam,
+                max_points=None if step >= cap else plot_cfg.loss_max_points,
+            ),
+            trajectory_mode=trajectory_mode,
+            trajectory_webgl_fallback=trajectory_webgl_fallback,
+            best_loss=best_b,
+        )
         last_traj = traj_fig
         yield (traj_fig, loss_fig, vu_fig, twist_fig, status, dict(monitor.history))
 
@@ -965,7 +1177,7 @@ def export_optimization_plots(history: dict | None) -> tuple[str | None, str | N
         u = np.array([history["u_x"][i], history["u_y"][i], history["u_z"][i]])
         monitor.record_step(int(step), history["loss"][i], u, twist=history.get("twist", [0])[i])
     return (
-        save_plotly_png(_make_trajectory_figure(df), "trajectory.png"),
+        save_plotly_png(make_trajectory_figure(df, mode="2d"), "trajectory.png"),
         save_plotly_png(_make_loss_figure(df), "loss.png"),
         save_plotly_png(_make_string_vu_figure(monitor), "vu.png"),
     )