Three UX issues reported on Tab 5 Interactive view:

1. **Layout unusable** — 4×3 grid compressed into a fixed Plotly canvas made
each subplot too small to read.
2. **Width overflow** — matplotlib's physical canvas size (18×20 in) was
inherited by `mpl_to_plotly`, causing the figure to exceed the page width.
3. **Slow response** — `mpl_to_plotly` rendered matplotlib first (server-side),
then converted the entire figure to Plotly JSON. Double rendering + large
polygon count from IQR bands made interaction sluggish.

Root cause: all three issues trace back to a single architectural mistake —
using `mpl_to_plotly` as a bridge instead of two independent rendering paths.

---

**Throw away the bridge. Two completely independent engines.**

```
Interactive → core/plotter_plotly.py (native Plotly)
Export → core/plotter.py (matplotlib, unchanged)
```

No conversion between them. Each optimized for its own purpose.

---

Native Plotly figure generation. Zero matplotlib dependency.

**Layout: 12×1 vertical stack**
Each of the 12 panels is a full-width subplot, 280 px tall:

```
0 pearson_QK Law 1 — Spectral Linear Alignment
1 ssr_QK Law 2 — Spectral Shape Fidelity
2 alpha_QK Law 1+2 — Scale Factor α
3 sigma_max_Q Law 3 — Max Singular Value (Q)
4 sigma_max_K Law 3 — Max Singular Value (K)
5 cond_Q & cond_K Law 3 — Condition Number κ (dual line, same panel)
6 cosU_QK Law 4 — Output Subspace Q–K
7 cosU_QV Law 4 — Output Subspace Q–V [super-orthogonal]
8 cosU_KV Law 4 — Output Subspace K–V [super-orthogonal]
9 cosV_QK Law 5 — Input Subspace Q–K
10 cosV_QV Law 5 — Input Subspace Q–V
11 cosV_KV Law 5 — Input Subspace K–V
```

**Key design decisions:**
- `width=None` + `autosize=True` → fills browser container, no overflow
- `hovermode="x unified"` → all 12 panels show values simultaneously on hover
- IQR band = `go.Scatter` with `fill="toself"` — single trace, fast
- cosU panels 6–8 share Y range; cosV panels 9–11 share Y range
(same logic as matplotlib version, consistent effect-size reading)
- Random baseline lines (1/√d_head, 1/√d_model) drawn as dashed `go.Scatter`
- Global (K=V shared) layers marked with `add_vline` dotted gray lines
- Legend horizontal at top, 10pt font

**Public API:**
```python
plotly_single(df, model_name, show_band=True) -> go.Figure
plotly_compare(df_a, df_b, name_a, name_b,
show_band=True, show_delta=True) -> go.Figure
```

**Comparison figure extras:**
- Model A: solid lines. Model B: dashed lines.
- Δ (B − A): gray `fill="toself"` between the two median lines
- 4 lines in cond panel (Q/K × A/B), color-coded by matrix type

**Internal helpers:**
```
_agg(df, col) → (layers, median, q25, q75) per-layer aggregation
_band_traces(...) → (fill_trace, line_trace)
_hline_trace(...) → reference / baseline line
_hex_to_rgba(hex, alpha) → "rgba(r,g,b,a)" string
_sync_yrange(...) → force identical Y range across a set of rows
_sync_yrange_compare(...) → same, for two-model figures
_global_layers(df) → list of kv_shared layer indices
_infer_dims(df) → (head_dim, d_model) from DataFrame
```

Deleted `fig_to_plotly()` — the `mpl_to_plotly` wrapper that caused all three
problems. Everything else unchanged. matplotlib remains the sole export engine.

```python
def fig_to_plotly(fig_mpl):
import plotly.tools as tls
return tls.mpl_to_plotly(fig_mpl) # ← the root cause
```

Two rendering paths now have separate buttons, separate outputs, separate
handler functions. No shared state between them.

**Handler separation:**
```
gen_single_plotly() → calls plotly_single() → gr.Plot()
gen_single_export() → calls plot_single_model() → gr.Image + gr.File ×3 + ZIP

gen_compare_plotly() → calls plotly_compare() → gr.Plot()
gen_compare_export() → calls plot_compare_models() → gr.Image + gr.File ×3 + ZIP
```

**UI structure:**
```
Shared controls: modality / start layer / end layer / IQR band toggle

Single Model accordion:
Tabs:
"📉 Interactive (Plotly)" ← ⚡ fast button → gr.Plot (full-width)
"🖨️ Export (PNG/PDF/SVG)" ← 🖨 slow button → preview + 4 download files

Two-Model Comparison accordion:
Model A dropdown + Model B dropdown + Δ fill toggle
Tabs: same structure as above
```

---

```
core/plotter.py matplotlib only
plot_single_model() → plt.Figure (4×3, 18×20 in, 300 dpi)
plot_compare_models() → plt.Figure
save_figure() → [.png, .pdf, .svg]
fig_to_png_bytes() → bytes

core/plotter_plotly.py Plotly only
plotly_single() → go.Figure (12×1, autosize, full-width)
plotly_compare() → go.Figure

ui/tab_plot.py calls both, never converts between them
```

---

| Metric | Before (mpl_to_plotly) | After (native Plotly) |
|--------|------------------------|----------------------|
| Render path | matplotlib → JSON conversion | Direct DataFrame → JSON |
| IQR band | ~500 polygon vertices per panel | 1 `fill="toself"` trace |
| Width control | Inherited 18 in physical size | `autosize=True` |
| Layout | 4×3 (cramped) | 12×1 (readable) |
| Hover | Broken / misaligned | `x unified`, all panels sync |
| Interactive speed | Slow (double render) | Fast (single pass) |

---

- `core/plotter.py` matplotlib export logic (4×3 paper layout) — untouched
- `db/` layer — untouched
- `app.py` — untouched
- `requirements.txt` — `plotly` already added in previous commit

---

Structural verification (network-disabled sandbox):
- `ast.parse()` on all three files ✅
- 12 panels confirmed in `PANELS` list ✅
- `mpl_to_plotly` string absent from all files ✅
- `gen_single_plotly`, `gen_compare_plotly` wired correctly in tab ✅
- `width=None`, `autosize=True` confirmed in both figure functions ✅

core/plotter.py

@@ -473,13 +473,4 @@ def fig_to_png_bytes(fig: plt.Figure) -> bytes:
     return buf.read()
 
 
-def fig_to_plotly(fig_mpl: plt.Figure):
-    """
-    Convert matplotlib Figure to a Plotly figure via mpl_to_plotly.
-    Requires plotly installed.  Falls back gracefully.
-    """
-    try:
-        import plotly.tools as tls
-        return tls.mpl_to_plotly(fig_mpl)
-    except Exception:
-        return None
+# fig_to_plotly removed — use core/plotter_plotly.py for native Plotly figures.

core/plotter_plotly.py

@@ -0,0 +1,485 @@
+# core/plotter_plotly.py
+"""
+Native Plotly interactive figures for Wang's Five Laws.
+12 subplots stacked vertically (12×1), full browser width.
+Fast: data aggregated once, drawn directly — no matplotlib conversion.
+
+Layout (top → bottom):
+  0  pearson_QK      Law 1  Spectral Linear Alignment
+  1  ssr_QK          Law 2  Spectral Shape Fidelity
+  2  alpha_QK        Law 1+2  Scale Factor α
+  3  sigma_max_Q     Law 3  Max Singular Value (Q)
+  4  sigma_max_K     Law 3  Max Singular Value (K)
+  5  cond_Q + cond_K Law 3  Condition Number κ  (dual line)
+  6  cosU_QK         Law 4  Output Subspace Q–K
+  7  cosU_QV         Law 4  Output Subspace Q–V
+  8  cosU_KV         Law 4  Output Subspace K–V
+  9  cosV_QK         Law 5  Input Subspace Q–K
+  10 cosV_QV         Law 5  Input Subspace Q–V
+  11 cosV_KV         Law 5  Input Subspace K–V
+"""
+
+import numpy as np
+import pandas as pd
+import plotly.graph_objects as go
+from plotly.subplots import make_subplots
+
+# ── Color palette (identical to plotter.py) ───────────────────────────────────
+C = {
+    "Q":   "#2166AC",
+    "K":   "#D6604D",
+    "V":   "#4DAC26",
+    "QK":  "#762A83",
+    "QV":  "#01665E",
+    "KV":  "#E08214",
+    "ref": "#888888",
+}
+
+BAND_ALPHA = 0.15   # opacity for IQR band fill
+
+# ── Panel definitions ─────────────────────────────────────────────────────────
+# (col, color_key, y_label, title, ideal_value or None)
+PANELS = [
+    ("pearson_QK",  "QK", "Pearson r",   "Law 1 — Spectral Linear Alignment (Pearson r Q–K)",   1.0),
+    ("ssr_QK",      "QK", "SSR",         "Law 2 — Spectral Shape Fidelity (SSR Q–K)",             0.0),
+    ("alpha_QK",    "QK", "α",           "Law 1+2 — Scale Factor α (Q–K)",                        1.0),
+    ("sigma_max_Q", "Q",  "σ_max",       "Law 3 — Max Singular Value σ_max (Q)",                 None),
+    ("sigma_max_K", "K",  "σ_max",       "Law 3 — Max Singular Value σ_max (K)",                 None),
+    ("cond_dual",   None, "κ",           "Law 3 — Condition Number κ (Q & K)",                   None),
+    ("cosU_QK",     "QK", "cosU",        "Law 4 — Output Subspace cosU (Q–K)",                   None),
+    ("cosU_QV",     "QV", "cosU",        "Law 4 — Output Subspace cosU (Q–V)  [super-orth]",     None),
+    ("cosU_KV",     "KV", "cosU",        "Law 4 — Output Subspace cosU (K–V)  [super-orth]",     None),
+    ("cosV_QK",     "QK", "cosV",        "Law 5 — Input Subspace cosV (Q–K)",                    None),
+    ("cosV_QV",     "QV", "cosV",        "Law 5 — Input Subspace cosV (Q–V)",                    None),
+    ("cosV_KV",     "KV", "cosV",        "Law 5 — Input Subspace cosV (K–V)",                    None),
+]
+
+SUBPLOT_HEIGHT = 280   # px per subplot
+TOTAL_HEIGHT   = SUBPLOT_HEIGHT * len(PANELS) + 120   # +header
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# Data helpers
+# ─────────────────────────────────────────────────────────────────────────────
+
+def _agg(df: pd.DataFrame, col: str):
+    """Per-layer median + IQR. Excludes kv_shared rows for KV metrics."""
+    kv_cols = {"ssr_KV", "pearson_KV", "cosU_KV", "cosV_KV", "alpha_KV"}
+    d = df[df["kv_shared"] == 0] if col in kv_cols and "kv_shared" in df.columns else df
+    grp    = d.groupby("layer")[col]
+    layers = np.array(sorted(d["layer"].unique()), dtype=int)
+    med    = grp.median().reindex(layers).values.astype(float)
+    q25    = grp.quantile(0.25).reindex(layers).values.astype(float)
+    q75    = grp.quantile(0.75).reindex(layers).values.astype(float)
+    return layers, med, q25, q75
+
+
+def _global_layers(df: pd.DataFrame) -> list[int]:
+    if "kv_shared" not in df.columns:
+        return []
+    return sorted(df[df["kv_shared"] == 1]["layer"].unique().tolist())
+
+
+def _infer_dims(df: pd.DataFrame) -> tuple[int, int]:
+    head_dim = int(df["head_dim"].dropna().median()) if "head_dim" in df.columns and df["head_dim"].notna().any() else 128
+    d_model  = int(df["d_model"].dropna().median())  if "d_model"  in df.columns and df["d_model"].notna().any()  else 5120
+    return head_dim, d_model
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# Trace builders
+# ─────────────────────────────────────────────────────────────────────────────
+
+def _band_traces(layers, med, q25, q75, color, name,
+                 row, dash="solid", show_legend=True):
+    """Returns (band_trace, line_trace) for one series."""
+    rgba_fill = _hex_to_rgba(color, BAND_ALPHA)
+
+    band = go.Scatter(
+        x=np.concatenate([layers, layers[::-1]]).tolist(),
+        y=np.concatenate([q75, q25[::-1]]).tolist(),
+        fill="toself",
+        fillcolor=rgba_fill,
+        line=dict(color="rgba(0,0,0,0)"),
+        hoverinfo="skip",
+        showlegend=False,
+        legendgroup=name,
+    )
+    line = go.Scatter(
+        x=layers.tolist(),
+        y=med.tolist(),
+        mode="lines",
+        name=name,
+        line=dict(color=color, width=2, dash=dash),
+        hovertemplate=f"Layer %{{x}}<br>{name}: %{{y:.5f}}<extra></extra>",
+        showlegend=show_legend,
+        legendgroup=name,
+    )
+    return band, line
+
+
+def _hline_trace(layers, y_val, label, color=None, row=None):
+    color = color or C["ref"]
+    return go.Scatter(
+        x=[layers[0], layers[-1]],
+        y=[y_val, y_val],
+        mode="lines",
+        name=label,
+        line=dict(color=color, width=1.2, dash="dash"),
+        hoverinfo="skip",
+        showlegend=True,
+        legendgroup=label,
+    )
+
+
+def _hex_to_rgba(hex_color: str, alpha: float) -> str:
+    h = hex_color.lstrip("#")
+    r, g, b = int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)
+    return f"rgba({r},{g},{b},{alpha})"
+
+
+def _vlines(fig, global_layers, row, x_range):
+    for gl in global_layers:
+        fig.add_vline(
+            x=gl, row=row, col=1,
+            line=dict(color="#AAAAAA", width=1, dash="dot"),
+            annotation=dict(
+                text=f"G{gl}", font=dict(size=8, color="#999999"),
+                showarrow=False, yref="paper",
+            ) if row == 1 else None,
+        )
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# Single-model native Plotly figure
+# ─────────────────────────────────────────────────────────────────────────────
+
+def plotly_single(
+    df:         pd.DataFrame,
+    model_name: str,
+    show_band:  bool = True,
+) -> go.Figure:
+    """
+    12×1 stacked subplots, full browser width.
+    Each subplot: median line + IQR band + reference lines + global-layer markers.
+    """
+    n_panels = len(PANELS)
+    head_dim, d_model = _infer_dims(df)
+    baseline_U = 1.0 / np.sqrt(head_dim)
+    baseline_V = 1.0 / np.sqrt(d_model)
+    gl         = _global_layers(df)
+
+    subtitles = [p[3] for p in PANELS]
+    fig = make_subplots(
+        rows=n_panels, cols=1,
+        subplot_titles=subtitles,
+        shared_xaxes=False,
+        vertical_spacing=0.03,
+    )
+
+    for row_idx, (col, color_key, ylabel, title, ideal) in enumerate(PANELS, start=1):
+        color = C[color_key] if color_key else C["Q"]
+
+        # ── special case: cond_dual ──────────────────────────────────────────
+        if col == "cond_dual":
+            for c_col, c_key, c_name in [
+                ("cond_Q", "Q", "κ(Q)"),
+                ("cond_K", "K", "κ(K)"),
+            ]:
+                layers, med, q25, q75 = _agg(df, c_col)
+                if len(layers) == 0:
+                    continue
+                band, line = _band_traces(
+                    layers, med, q25, q75, C[c_key], c_name,
+                    row=row_idx, show_legend=True
+                )
+                if show_band:
+                    fig.add_trace(band, row=row_idx, col=1)
+                fig.add_trace(line, row=row_idx, col=1)
+            layers_ref = _agg(df, "cond_Q")[0]
+
+        else:
+            layers, med, q25, q75 = _agg(df, col)
+            if len(layers) == 0:
+                continue
+            band, line = _band_traces(
+                layers, med, q25, q75, color,
+                model_name, row=row_idx, show_legend=(row_idx == 1)
+            )
+            if show_band:
+                fig.add_trace(band, row=row_idx, col=1)
+            fig.add_trace(line, row=row_idx, col=1)
+            layers_ref = layers
+
+            # ── ideal / baseline reference lines ─────────────────────────────
+            if ideal is not None and len(layers_ref):
+                fig.add_trace(
+                    _hline_trace(layers_ref, ideal, f"Ideal={ideal}",
+                                 color=C["ref"]),
+                    row=row_idx, col=1
+                )
+
+        # ── random baselines for cosU / cosV ────────────────────────────────
+        if col.startswith("cosU_") and len(layers_ref):
+            fig.add_trace(
+                _hline_trace(layers_ref, baseline_U,
+                             f"Random 1/√d_h ≈ {baseline_U:.4f}",
+                             color="#E07B39"),
+                row=row_idx, col=1
+            )
+        if col.startswith("cosV_") and len(layers_ref):
+            fig.add_trace(
+                _hline_trace(layers_ref, baseline_V,
+                             f"Random 1/√D ≈ {baseline_V:.4f}",
+                             color="#E07B39"),
+                row=row_idx, col=1
+            )
+
+        # ── global layer vertical markers ────────────────────────────────────
+        for gl_idx in gl:
+            fig.add_vline(
+                x=gl_idx, row=row_idx, col=1,
+                line=dict(color="#BBBBBB", width=1, dash="dot"),
+            )
+
+        # ── y-axis label ─────────────────────────────────────────────────────
+        fig.update_yaxes(title_text=ylabel, row=row_idx, col=1,
+                         title_font=dict(size=11))
+        fig.update_xaxes(title_text="Layer index", row=row_idx, col=1,
+                         title_font=dict(size=11))
+
+    # ── shared Y for cosU row (panels 6,7,8) ─────────────────────────────────
+    _sync_yrange(fig, df, ["cosU_QK", "cosU_QV", "cosU_KV"],
+                 rows=[7, 8, 9], pad=0.08)
+    # ── shared Y for cosV row (panels 9,10,11) ───────────────────────────────
+    _sync_yrange(fig, df, ["cosV_QK", "cosV_QV", "cosV_KV"],
+                 rows=[10, 11, 12], pad=0.08)
+
+    # ── layout ───────────────────────────────────────────────────────────────
+    fig.update_layout(
+        title=dict(
+            text=f"<b>Wang's Five Laws — {model_name}</b>",
+            font=dict(size=16),
+            x=0.5, xanchor="center",
+        ),
+        height=TOTAL_HEIGHT,
+        width=None,          # full browser width
+        autosize=True,
+        showlegend=True,
+        legend=dict(
+            orientation="h",
+            yanchor="bottom", y=1.01,
+            xanchor="right",  x=1,
+            font=dict(size=10),
+        ),
+        margin=dict(l=70, r=30, t=80, b=40),
+        paper_bgcolor="white",
+        plot_bgcolor="#FAFAFA",
+        font=dict(family="Arial, sans-serif", size=11),
+        hovermode="x unified",
+    )
+    fig.update_annotations(font_size=11)
+
+    return fig
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# Two-model comparison native Plotly figure
+# ─────────────────────────────────────────────────────────────────────────────
+
+def plotly_compare(
+    df_a:       pd.DataFrame,
+    df_b:       pd.DataFrame,
+    name_a:     str,
+    name_b:     str,
+    show_band:  bool = True,
+    show_delta: bool = True,
+) -> go.Figure:
+    """
+    12×1 stacked subplots.
+    Model A: solid lines.  Model B: dashed lines.
+    Δ = B − A shown as light gray fill when show_delta=True.
+    """
+    n_panels = len(PANELS)
+    head_dim_a, d_model_a = _infer_dims(df_a)
+    head_dim_b, d_model_b = _infer_dims(df_b)
+    head_dim   = (head_dim_a + head_dim_b) // 2
+    d_model    = (d_model_a  + d_model_b)  // 2
+    baseline_U = 1.0 / np.sqrt(head_dim)
+    baseline_V = 1.0 / np.sqrt(d_model)
+    gl = sorted(set(_global_layers(df_a)) | set(_global_layers(df_b)))
+
+    subtitles = [p[3] for p in PANELS]
+    fig = make_subplots(
+        rows=n_panels, cols=1,
+        subplot_titles=subtitles,
+        shared_xaxes=False,
+        vertical_spacing=0.03,
+    )
+
+    for row_idx, (col, color_key, ylabel, title, ideal) in enumerate(PANELS, start=1):
+        color = C[color_key] if color_key else C["Q"]
+
+        if col == "cond_dual":
+            for c_col, c_key, c_name in [
+                ("cond_Q", "Q", "κ(Q)"),
+                ("cond_K", "K", "κ(K)"),
+            ]:
+                for df_, nm, dash in [(df_a, name_a, "solid"),
+                                      (df_b, name_b, "dash")]:
+                    layers, med, q25, q75 = _agg(df_, c_col)
+                    if len(layers) == 0:
+                        continue
+                    label = f"{c_name} {nm}"
+                    band, line = _band_traces(
+                        layers, med, q25, q75, C[c_key], label,
+                        row=row_idx, dash=dash, show_legend=True
+                    )
+                    if show_band:
+                        fig.add_trace(band, row=row_idx, col=1)
+                    fig.add_trace(line, row=row_idx, col=1)
+            layers_ref = _agg(df_a, "cond_Q")[0]
+
+        else:
+            layers_a, med_a, q25_a, q75_a = _agg(df_a, col)
+            layers_b, med_b, q25_b, q75_b = _agg(df_b, col)
+
+            for layers, med, q25, q75, nm, dash in [
+                (layers_a, med_a, q25_a, q75_a, name_a, "solid"),
+                (layers_b, med_b, q25_b, q75_b, name_b, "dash"),
+            ]:
+                if len(layers) == 0:
+                    continue
+                show_leg = (row_idx == 1)
+                band, line = _band_traces(
+                    layers, med, q25, q75, color, nm,
+                    row=row_idx, dash=dash, show_legend=show_leg
+                )
+                if show_band:
+                    fig.add_trace(band, row=row_idx, col=1)
+                fig.add_trace(line, row=row_idx, col=1)
+
+            # Delta fill
+            if show_delta and len(layers_a) and len(layers_b):
+                common = np.intersect1d(layers_a, layers_b)
+                if len(common) > 1:
+                    idx_a = np.isin(layers_a, common)
+                    idx_b = np.isin(layers_b, common)
+                    delta = med_b[idx_b] - med_a[idx_a]
+                    zero  = np.zeros_like(delta)
+                    fig.add_trace(go.Scatter(
+                        x=np.concatenate([common, common[::-1]]).tolist(),
+                        y=np.concatenate([delta, zero[::-1]]).tolist(),
+                        fill="toself",
+                        fillcolor="rgba(160,160,160,0.20)",
+                        line=dict(color="rgba(0,0,0,0)"),
+                        hoverinfo="skip",
+                        showlegend=(row_idx == 1),
+                        name=f"Δ ({name_b}−{name_a})",
+                        legendgroup="delta",
+                    ), row=row_idx, col=1)
+
+            layers_ref = layers_a if len(layers_a) else layers_b
+
+            # Reference lines
+            if ideal is not None and len(layers_ref):
+                fig.add_trace(
+                    _hline_trace(layers_ref, ideal, f"Ideal={ideal}", C["ref"]),
+                    row=row_idx, col=1
+                )
+
+        if col.startswith("cosU_") and len(layers_ref):
+            fig.add_trace(
+                _hline_trace(layers_ref, baseline_U,
+                             f"Random 1/√d_h ≈ {baseline_U:.4f}", "#E07B39"),
+                row=row_idx, col=1
+            )
+        if col.startswith("cosV_") and len(layers_ref):
+            fig.add_trace(
+                _hline_trace(layers_ref, baseline_V,
+                             f"Random 1/√D ≈ {baseline_V:.4f}", "#E07B39"),
+                row=row_idx, col=1
+            )
+
+        for gl_idx in gl:
+            fig.add_vline(
+                x=gl_idx, row=row_idx, col=1,
+                line=dict(color="#BBBBBB", width=1, dash="dot"),
+            )
+
+        fig.update_yaxes(title_text=ylabel, row=row_idx, col=1,
+                         title_font=dict(size=11))
+        fig.update_xaxes(title_text="Layer index", row=row_idx, col=1,
+                         title_font=dict(size=11))
+
+    _sync_yrange_compare(fig, df_a, df_b,
+                         ["cosU_QK", "cosU_QV", "cosU_KV"], [7, 8, 9])
+    _sync_yrange_compare(fig, df_a, df_b,
+                         ["cosV_QK", "cosV_QV", "cosV_KV"], [10, 11, 12])
+
+    fig.update_layout(
+        title=dict(
+            text=f"<b>Wang's Five Laws — {name_a}  vs  {name_b}</b>",
+            font=dict(size=16),
+            x=0.5, xanchor="center",
+        ),
+        height=TOTAL_HEIGHT,
+        width=None,
+        autosize=True,
+        showlegend=True,
+        legend=dict(
+            orientation="h",
+            yanchor="bottom", y=1.01,
+            xanchor="right",  x=1,
+            font=dict(size=10),
+        ),
+        margin=dict(l=70, r=30, t=80, b=40),
+        paper_bgcolor="white",
+        plot_bgcolor="#FAFAFA",
+        font=dict(family="Arial, sans-serif", size=11),
+        hovermode="x unified",
+    )
+    fig.update_annotations(font_size=11)
+
+    return fig
+
+
+# ─────────────────────────────────────────────────────────────────────────────
+# Shared Y-axis helpers
+# ─────────────────────────────────────────────────────────────────────────────
+
+def _sync_yrange(fig, df, cols, rows, pad=0.08):
+    """Force identical y-range for a set of rows (single model)."""
+    vals = []
+    for col in cols:
+        try:
+            _, med, q25, q75 = _agg(df, col)
+            vals.extend(q25[~np.isnan(q25)].tolist())
+            vals.extend(q75[~np.isnan(q75)].tolist())
+        except Exception:
+            pass
+    if not vals:
+        return
+    lo = max(0.0, min(vals) * (1 - pad))
+    hi = max(vals) * (1 + pad)
+    for r in rows:
+        fig.update_yaxes(range=[lo, hi], row=r, col=1)
+
+
+def _sync_yrange_compare(fig, df_a, df_b, cols, rows, pad=0.08):
+    """Force identical y-range for a set of rows (two-model comparison)."""
+    vals = []
+    for col in cols:
+        for df_ in [df_a, df_b]:
+            try:
+                _, med, q25, q75 = _agg(df_, col)
+                vals.extend(q25[~np.isnan(q25)].tolist())
+                vals.extend(q75[~np.isnan(q75)].tolist())
+            except Exception:
+                pass
+    if not vals:
+        return
+    lo = max(0.0, min(vals) * (1 - pad))
+    hi = max(vals) * (1 + pad)
+    for r in rows:
+        fig.update_yaxes(range=[lo, hi], row=r, col=1)

ui/tab_plot.py

@@ -1,30 +1,22 @@
 # ui/tab_plot.py
 """
 Tab5: Plot — Publication-quality figure generation
-Data pulled from SQLite DB.
-Supports: single model (4×3) and two-model comparison (4×3).
-Export: PNG (300 dpi) / PDF / SVG.
-Engine: matplotlib (publication) + optional Plotly (interactive).
+- matplotlib → PNG / PDF / SVG export (300 dpi, paper-ready)
+- Plotly native → interactive browser preview (12×1, full-width, fast)
+Two completely independent rendering paths, no conversion between them.
 """
 
 import os
-import tempfile
 import zipfile
 
 import gradio as gr
 import pandas as pd
-import numpy as np
 
 from db.schema import init_db
 from db.reader import get_layer_metrics, get_analyzed_models
-from core.plotter import (
-    plot_single_model,
-    plot_compare_models,
-    save_figure,
-    fig_to_plotly,
-)
-
-# ── Output directory ──────────────────────────────────────────────────────────
+from core.plotter import plot_single_model, plot_compare_models, save_figure
+from core.plotter_plotly import plotly_single, plotly_compare
+
 _OUT_DIR = "/tmp/wang_plots"
 os.makedirs(_OUT_DIR, exist_ok=True)
 
@@ -37,17 +29,14 @@ def _get_model_choices() -> list[str]:
     try:
         conn = init_db()
         df   = get_analyzed_models(conn)
-        if df.empty:
-            return []
-        return df["model_id"].tolist()
+        return df["model_id"].tolist() if not df.empty else []
     except Exception:
         return []
 
 
-def _load_df(model_id: str, modality: str,
-             start_layer: int, end_layer: int) -> pd.DataFrame:
+def _load_df(model_id, modality, start_layer, end_layer) -> pd.DataFrame:
     conn = init_db()
-    df = get_layer_metrics(
+    return get_layer_metrics(
         conn,
         model_id    = model_id,
         modality    = modality if modality != "all" else None,
@@ -55,170 +44,157 @@ def _load_df(model_id: str, modality: str,
         start_layer = int(start_layer),
         end_layer   = int(end_layer),
     )
-    return df
 
 
 def _infer_dims(df: pd.DataFrame) -> tuple[int, int]:
-    """Try to read head_dim and d_model from the dataframe."""
     head_dim = 128
     d_model  = 5120
     if not df.empty:
-        if "head_dim" in df.columns:
-            v = df["head_dim"].dropna()
-            if len(v):
-                head_dim = int(v.median())
-        if "d_model" in df.columns:
-            v = df["d_model"].dropna()
-            if len(v):
-                d_model = int(v.median())
+        if "head_dim" in df.columns and df["head_dim"].notna().any():
+            head_dim = int(df["head_dim"].dropna().median())
+        if "d_model" in df.columns and df["d_model"].notna().any():
+            d_model  = int(df["d_model"].dropna().median())
     return head_dim, d_model
 
 
-def _short_name(model_id: str) -> str:
+def _short(model_id: str) -> str:
     return model_id.split("/")[-1] if "/" in model_id else model_id
 
 
-def _safe_base_path(name: str) -> str:
-    safe = name.replace("/", "_").replace(" ", "_")
-    return os.path.join(_OUT_DIR, safe)
+def _safe_path(tag: str) -> str:
+    return os.path.join(_OUT_DIR, tag.replace("/", "_").replace(" ", "_"))
+
+
+def _make_zip(paths: list) -> str | None:
+    valid = [p for p in paths if p and os.path.exists(p)]
+    if not valid:
+        return None
+    zp = os.path.join(_OUT_DIR, "wang_laws_figures.zip")
+    with zipfile.ZipFile(zp, "w", zipfile.ZIP_DEFLATED) as zf:
+        for p in valid:
+            zf.write(p, os.path.basename(p))
+    return zp
 
 
 # ─────────────────────────────────────────────────────────────────────────────
-# Main generation functions
+# Single-model handlers
 # ─────────────────────────────────────────────────────────────────────────────
 
-def generate_single(
-    model_id:    str,
-    modality:    str,
-    start_layer: int,
-    end_layer:   int,
-    show_band:   bool,
-    progress=gr.Progress()
-) -> tuple:
-    """
-    Returns: (status_str, png_path, [png_path, pdf_path, svg_path], plotly_fig)
-    """
-    if not model_id or not model_id.strip():
-        return "❌ Please select a model.", None, None, None
-
-    progress(0.1, desc="Loading data from DB...")
-    df = _load_df(model_id, modality, start_layer, end_layer)
-
+def gen_single_plotly(model_id, modality, start_l, end_l, show_band,
+                      progress=gr.Progress()):
+    """Fast path: native Plotly, no matplotlib involved."""
+    if not model_id:
+        return None, "Please select a model."
+    progress(0.2, desc="Loading data from DB...")
+    df = _load_df(model_id, modality, start_l, end_l)
     if df.empty:
-        return (
-            f"❌ No data found for {model_id} "
-            f"(modality={modality}, layers {start_layer}~{end_layer}).\n"
-            f"Please run analysis first in Tab 2.",
-            None, None, None
-        )
-
-    progress(0.35, desc="Inferring dimensions...")
-    head_dim, d_model = _infer_dims(df)
-    n_layers  = df["layer"].nunique()
-    n_records = len(df)
-
-    progress(0.50, desc="Generating matplotlib figure...")
-    name = _short_name(model_id)
-    fig  = plot_single_model(
-        df, model_name=name,
-        show_band=show_band,
-        head_dim=head_dim,
-        d_model=d_model,
+        return None, f"No data for {model_id}. Run Tab 2 analysis first."
+    progress(0.7, desc="Building interactive figure...")
+    fig = plotly_single(df, _short(model_id), show_band=show_band)
+    status = (
+        f"✅ {model_id}  |  {df['layer'].nunique()} layers  "
+        f"{len(df)} head-records  |  modality={modality}"
     )
+    progress(1.0)
+    return fig, status
 
-    progress(0.75, desc="Saving PNG / PDF / SVG...")
-    base  = _safe_base_path(f"single_{name}_L{start_layer}-{end_layer}")
-    paths = save_figure(fig, base)
-
-    progress(0.90, desc="Generating Plotly preview...")
-    plotly_fig = fig_to_plotly(fig)
 
+def gen_single_export(model_id, modality, start_l, end_l, show_band,
+                      progress=gr.Progress()):
+    """Export path: matplotlib → PNG/PDF/SVG."""
+    if not model_id:
+        return "Please select a model.", None, None, None, None
+    progress(0.15, desc="Loading data from DB...")
+    df = _load_df(model_id, modality, start_l, end_l)
+    if df.empty:
+        return f"No data for {model_id}.", None, None, None, None
+    head_dim, d_model = _infer_dims(df)
+    progress(0.40, desc="Rendering matplotlib figure (18x20 in, 300 dpi)...")
     import matplotlib.pyplot as plt
+    fig = plot_single_model(df, _short(model_id),
+                            show_band=show_band,
+                            head_dim=head_dim, d_model=d_model)
+    progress(0.75, desc="Saving PNG / PDF / SVG...")
+    base  = _safe_path(f"single_{_short(model_id)}_L{int(start_l)}-{int(end_l)}")
+    paths = save_figure(fig, base)
     plt.close(fig)
-
+    zip_p = _make_zip(paths)
     status = (
-        f"✅ {model_id}  |  modality={modality}  "
-        f"|  layers {start_layer}~{end_layer}  "
-        f"|  {n_layers} layers  {n_records} head-records\n"
-        f"   head_dim={head_dim}  d_model={d_model}\n"
-        f"   Saved: {', '.join(os.path.basename(p) for p in paths)}"
+        f"Exported: {', '.join(os.path.basename(p) for p in paths)}\n"
+        f"head_dim={head_dim}  d_model={d_model}"
     )
-    png_path = paths[0]
-    return status, png_path, paths, plotly_fig
-
-
-def generate_compare(
-    model_a:     str,
-    model_b:     str,
-    modality:    str,
-    start_layer: int,
-    end_layer:   int,
-    show_band:   bool,
-    show_delta:  bool,
-    progress=gr.Progress()
-) -> tuple:
-    if not model_a or not model_b:
-        return "❌ Please select both models.", None, None, None
-    if model_a == model_b:
-        return "❌ Please select two different models.", None, None, None
+    progress(1.0)
+    png = paths[0] if len(paths) > 0 else None
+    pdf = paths[1] if len(paths) > 1 else None
+    svg = paths[2] if len(paths) > 2 else None
+    return status, png, pdf, svg, zip_p
 
-    progress(0.10, desc="Loading Model A from DB...")
-    df_a = _load_df(model_a, modality, start_layer, end_layer)
-    progress(0.25, desc="Loading Model B from DB...")
-    df_b = _load_df(model_b, modality, start_layer, end_layer)
 
+# ─────────────────────────────────────────────────────────────────────────────
+# Compare handlers
+# ─────────────────────────────────────────────────────────────────────────────
+
+def gen_compare_plotly(model_a, model_b, modality, start_l, end_l,
+                       show_band, show_delta, progress=gr.Progress()):
+    if not model_a or not model_b:
+        return None, "Please select both models."
+    if model_a == model_b:
+        return None, "Please select two different models."
+    progress(0.15, desc="Loading Model A...")
+    df_a = _load_df(model_a, modality, start_l, end_l)
+    progress(0.35, desc="Loading Model B...")
+    df_b = _load_df(model_b, modality, start_l, end_l)
     if df_a.empty:
-        return f"❌ No data for Model A ({model_a}).", None, None, None
+        return None, f"No data for Model A ({model_a})."
     if df_b.empty:
-        return f"❌ No data for Model B ({model_b}).", None, None, None
-
+        return None, f"No data for Model B ({model_b})."
+    progress(0.65, desc="Building interactive comparison figure...")
+    fig = plotly_compare(df_a, df_b, _short(model_a), _short(model_b),
+                         show_band=show_band, show_delta=show_delta)
+    status = (
+        f"✅ {_short(model_a)} vs {_short(model_b)}  |  "
+        f"A: {len(df_a)} records  B: {len(df_b)} records  |  modality={modality}"
+    )
+    progress(1.0)
+    return fig, status
+
+
+def gen_compare_export(model_a, model_b, modality, start_l, end_l,
+                       show_band, show_delta, progress=gr.Progress()):
+    if not model_a or not model_b or model_a == model_b:
+        return "Select two different models.", None, None, None, None
+    progress(0.10, desc="Loading data...")
+    df_a = _load_df(model_a, modality, start_l, end_l)
+    df_b = _load_df(model_b, modality, start_l, end_l)
+    if df_a.empty or df_b.empty:
+        return "Missing data for one or both models.", None, None, None, None
     head_dim_a, d_model_a = _infer_dims(df_a)
     head_dim_b, d_model_b = _infer_dims(df_b)
-    head_dim = int((head_dim_a + head_dim_b) / 2)
-    d_model  = int((d_model_a + d_model_b) / 2)
-
-    progress(0.50, desc="Generating comparison figure...")
-    name_a = _short_name(model_a)
-    name_b = _short_name(model_b)
+    head_dim = (head_dim_a + head_dim_b) // 2
+    d_model  = (d_model_a  + d_model_b)  // 2
+    progress(0.40, desc="Rendering matplotlib figure...")
+    import matplotlib.pyplot as plt
     fig = plot_compare_models(
-        df_a, df_b,
-        name_a=name_a, name_b=name_b,
-        show_band=show_band,
-        show_delta=show_delta,
-        head_dim=head_dim,
-        d_model=d_model,
+        df_a, df_b, _short(model_a), _short(model_b),
+        show_band=show_band, show_delta=show_delta,
+        head_dim=head_dim, d_model=d_model,
+    )
+    progress(0.78, desc="Saving PNG / PDF / SVG...")
+    base  = _safe_path(
+        f"compare_{_short(model_a)}_vs_{_short(model_b)}_L{int(start_l)}-{int(end_l)}"
     )
-
-    progress(0.80, desc="Saving PNG / PDF / SVG...")
-    base  = _safe_base_path(f"compare_{name_a}_vs_{name_b}_L{start_layer}-{end_layer}")
     paths = save_figure(fig, base)
-
-    progress(0.92, desc="Generating Plotly preview...")
-    plotly_fig = fig_to_plotly(fig)
-
-    import matplotlib.pyplot as plt
     plt.close(fig)
-
+    zip_p = _make_zip(paths)
     status = (
-        f"✅ {name_a}  vs  {name_b}\n"
-        f"   modality={modality}  layers {start_layer}~{end_layer}\n"
-        f"   Model A: {len(df_a)} records  |  Model B: {len(df_b)} records\n"
-        f"   head_dim≈{head_dim}  d_model≈{d_model}\n"
-        f"   Saved: {', '.join(os.path.basename(p) for p in paths)}"
+        f"Exported: {', '.join(os.path.basename(p) for p in paths)}\n"
+        f"head_dim≈{head_dim}  d_model≈{d_model}"
     )
-    return status, paths[0], paths, plotly_fig
-
-
-def make_zip(file_paths: list) -> str | None:
-    """Bundle all exported files into a single ZIP for download."""
-    if not file_paths:
-        return None
-    zip_path = os.path.join(_OUT_DIR, "wang_laws_figures.zip")
-    with zipfile.ZipFile(zip_path, "w", zipfile.ZIP_DEFLATED) as zf:
-        for p in file_paths:
-            if p and os.path.exists(p):
-                zf.write(p, os.path.basename(p))
-    return zip_path
+    progress(1.0)
+    png = paths[0] if len(paths) > 0 else None
+    pdf = paths[1] if len(paths) > 1 else None
+    svg = paths[2] if len(paths) > 2 else None
+    return status, png, pdf, svg, zip_p
 
 
 # ─────────────────────────────────────────────────────────────────────────────
@@ -228,185 +204,152 @@ def make_zip(file_paths: list) -> str | None:
 def build_tab_plot():
     with gr.Tab("📈 Plot"):
         gr.Markdown("""
-        ## Wang's Five Laws — Publication-Quality Figures
-        Data is loaded directly from the SQLite database (Tab 2 must be run first).
-
-        **4×3 grid layout** (12 subplots, one figure):
-        | Row | Content | Laws |
-        |-----|---------|------|
-        | 1 | pearson_QK · SSR_QK · α_QK | Law 1 & 2 |
-        | 2 | σ_max(Q) · σ_max(K) · κ(Q) & κ(K) | Law 3 |
-        | 3 | cosU QK · QV · KV + random baseline | Law 4 |
-        | 4 | cosV QK · QV · KV + random baseline | Law 5 |
-
-        Export: **PNG 300 dpi** · **PDF (vector)** · **SVG (vector)**
+        ## Wang's Five Laws — Figures
+
+        Two independent rendering paths:
+        | Path | Engine | Speed | Use for |
+        |------|--------|-------|---------|
+        | **Interactive** | Native Plotly, 12×1 full-width | Fast | Exploration, hover, zoom |
+        | **Export** | Matplotlib 18×20 in @ 300 dpi | Slower | Paper submission (PNG/PDF/SVG) |
+
+        > Run **Tab 2 (Analyze)** first to populate the database.
         """)
 
         # ── Shared controls ───────────────────────────────────────────────────
         with gr.Row():
             modality_sel = gr.Dropdown(
-                label="Modality",
-                choices=["language", "vision", "audio", "all"],
-                value="language",
-                scale=1,
-            )
-            start_l = gr.Number(
-                label="Start Layer", value=0,  precision=0, scale=1
-            )
-            end_l = gr.Number(
-                label="End Layer",   value=47, precision=0, scale=1
+                ["language", "vision", "audio", "all"],
+                value="language", label="Modality", scale=1,
             )
+            start_l = gr.Number(value=0,  precision=0, label="Start Layer", scale=1)
+            end_l   = gr.Number(value=47, precision=0, label="End Layer",   scale=1)
             show_band_chk = gr.Checkbox(
-                label="Show 25%–75% band (head consistency)",
-                value=True, scale=1
+                value=True, label="Show IQR band (head consistency)", scale=1
             )
 
         gr.Markdown("---")
 
-        # ══ Mode 1: Single model ══════════════════════════════════════════════
+        # ══ Single model ══════════════════════════════════════════════════════
         with gr.Accordion("📊 Single Model", open=True):
-            with gr.Row():
-                model_choices = _get_model_choices()
-                single_model = gr.Dropdown(
-                    label="Model",
-                    choices=model_choices,
-                    value=model_choices[0] if model_choices else None,
-                    allow_custom_value=True,
-                    scale=3,
-                    info="Refresh the page after analyzing new models to update this list."
-                )
-                single_btn = gr.Button(
-                    "🎨 Generate Figure", variant="primary", scale=1
-                )
-
-            single_status = gr.Textbox(
-                label="Status", lines=3, interactive=False
+            choices = _get_model_choices()
+            single_model = gr.Dropdown(
+                choices=choices,
+                value=choices[0] if choices else None,
+                allow_custom_value=True,
+                label="Model",
+                info="Refresh page after new analysis to update this list.",
             )
 
             with gr.Tabs():
-                with gr.Tab("🖼️ Preview (PNG)"):
-                    single_img = gr.Image(
-                        label="Figure preview",
-                        type="filepath",
-                        height=600,
-                    )
+                # ── Interactive ───────────────────────────────────────────────
                 with gr.Tab("📉 Interactive (Plotly)"):
-                    single_plotly = gr.Plot(label="Plotly interactive")
+                    single_plotly_btn = gr.Button(
+                        "⚡ Generate Interactive Figure", variant="primary"
+                    )
+                    single_plotly_status = gr.Textbox(
+                        lines=1, interactive=False, label="Status"
+                    )
+                    single_plotly_fig = gr.Plot(label=None)
 
-            with gr.Row():
-                dl_single_png = gr.File(label="⬇ PNG (300 dpi)")
-                dl_single_pdf = gr.File(label="⬇ PDF (vector)")
-                dl_single_svg = gr.File(label="⬇ SVG (vector)")
-                dl_single_zip = gr.File(label="⬇ ZIP (all formats)")
+                # ── Export ────────────────────────────────────────────────────
+                with gr.Tab("🖨️ Export (PNG / PDF / SVG)"):
+                    single_export_btn = gr.Button(
+                        "🖨️ Render & Export  (paper-quality, ~30 s)",
+                        variant="secondary"
+                    )
+                    single_export_status = gr.Textbox(
+                        lines=2, interactive=False, label="Export status"
+                    )
+                    single_preview = gr.Image(
+                        type="filepath", label="PNG preview", height=400
+                    )
+                    with gr.Row():
+                        dl_s_png = gr.File(label="⬇ PNG (300 dpi)")
+                        dl_s_pdf = gr.File(label="⬇ PDF (vector)")
+                        dl_s_svg = gr.File(label="⬇ SVG (vector)")
+                        dl_s_zip = gr.File(label="⬇ ZIP (all)")
 
         gr.Markdown("---")
 
-        # ══ Mode 2: Two-model comparison ══════════════════════════════════════
+        # ══ Two-model comparison ══════════════════════════════════════════════
         with gr.Accordion("📊 Two-Model Comparison", open=False):
             with gr.Row():
                 model_a = gr.Dropdown(
-                    label="Model A (solid line)",
-                    choices=model_choices,
-                    value=model_choices[0] if len(model_choices) > 0 else None,
+                    choices=choices,
+                    value=choices[0] if len(choices) > 0 else None,
                     allow_custom_value=True,
-                    scale=2,
+                    label="Model A  (solid line)", scale=2,
                 )
                 model_b = gr.Dropdown(
-                    label="Model B (dashed line)",
-                    choices=model_choices,
-                    value=model_choices[1] if len(model_choices) > 1 else None,
+                    choices=choices,
+                    value=choices[1] if len(choices) > 1 else None,
                     allow_custom_value=True,
-                    scale=2,
+                    label="Model B  (dashed line)", scale=2,
                 )
                 show_delta_chk = gr.Checkbox(
-                    label="Show Δ (B − A) fill",
-                    value=True, scale=1
-                )
-                compare_btn = gr.Button(
-                    "🎨 Generate Comparison", variant="primary", scale=1
+                    value=True, label="Show Δ fill (B − A)", scale=1
                 )
 
-            compare_status = gr.Textbox(
-                label="Status", lines=3, interactive=False
-            )
-
             with gr.Tabs():
-                with gr.Tab("🖼️ Preview (PNG)"):
-                    compare_img = gr.Image(
-                        label="Comparison figure preview",
-                        type="filepath",
-                        height=600,
-                    )
                 with gr.Tab("📉 Interactive (Plotly)"):
-                    compare_plotly = gr.Plot(label="Plotly interactive")
+                    cmp_plotly_btn = gr.Button(
+                        "⚡ Generate Interactive Comparison", variant="primary"
+                    )
+                    cmp_plotly_status = gr.Textbox(
+                        lines=1, interactive=False, label="Status"
+                    )
+                    cmp_plotly_fig = gr.Plot(label=None)
 
-            with gr.Row():
-                dl_cmp_png = gr.File(label="⬇ PNG (300 dpi)")
-                dl_cmp_pdf = gr.File(label="⬇ PDF (vector)")
-                dl_cmp_svg = gr.File(label="⬇ SVG (vector)")
-                dl_cmp_zip = gr.File(label="⬇ ZIP (all formats)")
+                with gr.Tab("🖨️ Export (PNG / PDF / SVG)"):
+                    cmp_export_btn = gr.Button(
+                        "🖨️ Render & Export", variant="secondary"
+                    )
+                    cmp_export_status = gr.Textbox(
+                        lines=2, interactive=False, label="Export status"
+                    )
+                    cmp_preview = gr.Image(
+                        type="filepath", label="PNG preview", height=400
+                    )
+                    with gr.Row():
+                        dl_c_png = gr.File(label="⬇ PNG (300 dpi)")
+                        dl_c_pdf = gr.File(label="⬇ PDF (vector)")
+                        dl_c_svg = gr.File(label="⬇ SVG (vector)")
+                        dl_c_zip = gr.File(label="⬇ ZIP (all)")
 
         gr.Markdown("""
         ---
-        **Tips**
-        - Band = 25%–75% quantile across attention heads per layer.
-          Narrow band → heads behave consistently → model is "well-organized".
-        - Vertical dotted lines mark **global layers** (K=V shared, e.g. Gemma-4).
-        - Dashed horizontal lines = theoretical ideals or random baselines.
-        - For Law 4 & 5 panels, Q–V and K–V cosU values **below** the random baseline
-          indicate **super-orthogonality** — a key signature of pretraining convergence.
+        **Reading the figures**
+        - **IQR band** = 25%–75% quantile across attention heads per layer.
+          Narrow band → heads behave consistently → model is well-organized.
+        - **Dotted vertical lines** = global (K=V shared) layers (Gemma-4 only).
+        - **Dashed horizontal lines** = theoretical ideals (r=1, SSR=0, α=1)
+          or random baselines (cosU: 1/√d_head · cosV: 1/√d_model).
+        - **Super-orthogonality** (Law 4): cosU(Q–V) and cosU(K–V) sit *below*
+          the random baseline — pretraining actively pushes V away from Q/K.
         """)
 
-        # ── Wire up single model ──────────────────────────────────────────────
-        _single_file_state = gr.State([])
-
-        def _run_single(model_id, modality, start, end, band, progress=gr.Progress()):
-            status, png, paths, plotly_fig = generate_single(
-                model_id, modality, int(start), int(end), band, progress
-            )
-            if paths is None:
-                return status, None, None, None, None, None, None, []
-            zip_p = make_zip(paths)
-            png_p = paths[0] if len(paths) > 0 else None
-            pdf_p = paths[1] if len(paths) > 1 else None
-            svg_p = paths[2] if len(paths) > 2 else None
-            return (status, png, plotly_fig,
-                    png_p, pdf_p, svg_p, zip_p, paths)
-
-        single_btn.click(
-            fn=_run_single,
+        # ── Wiring ────────────────────────────────────────────────────────────
+        single_plotly_btn.click(
+            fn=gen_single_plotly,
             inputs=[single_model, modality_sel, start_l, end_l, show_band_chk],
-            outputs=[
-                single_status, single_img, single_plotly,
-                dl_single_png, dl_single_pdf, dl_single_svg, dl_single_zip,
-                _single_file_state,
-            ]
+            outputs=[single_plotly_fig, single_plotly_status],
         )
-
-        # ── Wire up comparison ────────────────────────────────────────────────
-        _compare_file_state = gr.State([])
-
-        def _run_compare(ma, mb, modality, start, end, band, delta,
-                         progress=gr.Progress()):
-            status, png, paths, plotly_fig = generate_compare(
-                ma, mb, modality, int(start), int(end), band, delta, progress
-            )
-            if paths is None:
-                return status, None, None, None, None, None, None, []
-            zip_p = make_zip(paths)
-            png_p = paths[0] if len(paths) > 0 else None
-            pdf_p = paths[1] if len(paths) > 1 else None
-            svg_p = paths[2] if len(paths) > 2 else None
-            return (status, png, plotly_fig,
-                    png_p, pdf_p, svg_p, zip_p, paths)
-
-        compare_btn.click(
-            fn=_run_compare,
+        single_export_btn.click(
+            fn=gen_single_export,
+            inputs=[single_model, modality_sel, start_l, end_l, show_band_chk],
+            outputs=[single_export_status, single_preview,
+                     dl_s_png, dl_s_pdf, dl_s_svg, dl_s_zip],
+        )
+        cmp_plotly_btn.click(
+            fn=gen_compare_plotly,
+            inputs=[model_a, model_b, modality_sel,
+                    start_l, end_l, show_band_chk, show_delta_chk],
+            outputs=[cmp_plotly_fig, cmp_plotly_status],
+        )
+        cmp_export_btn.click(
+            fn=gen_compare_export,
             inputs=[model_a, model_b, modality_sel,
                     start_l, end_l, show_band_chk, show_delta_chk],
-            outputs=[
-                compare_status, compare_img, compare_plotly,
-                dl_cmp_png, dl_cmp_pdf, dl_cmp_svg, dl_cmp_zip,
-                _compare_file_state,
-            ]
+            outputs=[cmp_export_status, cmp_preview,
+                     dl_c_png, dl_c_pdf, dl_c_svg, dl_c_zip],
         )