From d4292d41b9d06b6ba2051d60e4ebbb8939561909 Mon Sep 17 00:00:00 2001
From: Jung Dae Suh <jungdaesuh1221@gmail.com>
Date: Wed, 1 Jul 2026 13:35:54 -0400
Subject: [PATCH] fix(web): remediate GUI Crucible findings (a11y, honesty,
 states, perf)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adopts the existing theme.css token system; minimal token-driven diffs.

- Perf: per-field useStore selectors so the shell no longer re-renders on every
  time-cursor scrub.
- Honesty: the "live backend" badge keys off the backend's per-machine `mock` flag
  (was !!API_BASE, which reads "live" over a mock machine list); RotatingTab label
  follows suit. Adds mock?: boolean to MachineInfo.
- UI states: SensorsTab empty state for incomplete geometry meta; RotatingTab
  "computing mode map…" placeholder + persistent scrubber while mode_number loads;
  ErrorBoundary retry; PullControl shot validation (+ inputMode/aria-invalid);
  equilibrium control disabled + "(coming soon)" while its node is absent (#43).
- a11y: keyboard-operable tabs / shot list / resize divider / collapse headers;
  aria-pressed toggles; slider labels; role=status/aria-live + progressbar on the
  live-pull progress.
- Docs/tests: qsTransforms.phiPeak docstring corrected (signed argmax is intentional)
  + signed-vs-|·| test; ErrorBoundary retry test; cross-tab theme-sync store listener
  + tests. Frontend 28 tests pass; lint/typecheck/build green.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 gui/web/src/App.tsx                           | 63 ++++++++++++-----
 gui/web/src/components/ErrorBoundary.test.tsx | 22 +++++-
 gui/web/src/components/ErrorBoundary.tsx      | 13 ++++
 gui/web/src/components/PullControl.tsx        | 20 ++++--
 .../components/tabs/QuasiStationaryTab.tsx    | 24 +++++--
 gui/web/src/components/tabs/RotatingTab.tsx   | 69 ++++++++++---------
 gui/web/src/components/tabs/SensorsTab.tsx    | 19 +++--
 gui/web/src/lib/DraggableDivider.tsx          | 45 +++++++++---
 gui/web/src/lib/api.ts                        |  4 ++
 gui/web/src/lib/qsTransforms.test.ts          | 10 +++
 gui/web/src/lib/qsTransforms.ts               |  4 +-
 gui/web/src/store.test.ts                     | 30 ++++++++
 gui/web/src/store.ts                          | 13 ++++
 gui/web/src/test/setup.ts                     |  6 ++
 gui/web/src/theme.css                         | 28 ++++++--
 15 files changed, 294 insertions(+), 76 deletions(-)
 create mode 100644 gui/web/src/store.test.ts

diff --git a/gui/web/src/App.tsx b/gui/web/src/App.tsx
index 6d8303f..1b719dd 100644
--- a/gui/web/src/App.tsx
+++ b/gui/web/src/App.tsx
@@ -22,44 +22,75 @@ const TABS: { id: TabId; label: string }[] = [
 ];
 
 export default function App() {
-  const { machines, machine, tab, loadingMachines, init, setMachine, setTab } = useStore();
+  // Per-field selectors: subscribing to the whole store re-rendered the entire
+  // shell on every cursor scrub (setCursorMs); App doesn't read cursorMs.
+  const machines = useStore((s) => s.machines);
+  const machine = useStore((s) => s.machine);
+  const tab = useStore((s) => s.tab);
+  const loadingMachines = useStore((s) => s.loadingMachines);
+  const init = useStore((s) => s.init);
+  const setMachine = useStore((s) => s.setMachine);
+  const setTab = useStore((s) => s.setTab);
 
   useEffect(() => { void init(); }, [init]);
 
+  // Honest data-source badge: a live backend with zero fetched shots still serves
+  // the mock machines, so key off the SELECTED machine's `mock` flag (from the
+  // backend), falling back to usingLiveBackend only when the flag is absent.
+  const selected = machines.find((m) => m.id === machine);
+  const mock = selected?.mock ?? !usingLiveBackend();
+  const badgeText = !mock
+    ? "● live backend"
+    : usingLiveBackend()
+      ? "○ demo data (no shots fetched)"
+      : "○ offline / demo";
+
   return (
     <div className="app">
       <header className="app-header">
         <span className="title">Magnetics</span>
         <span className="sub">3D magnetic-sensor analysis</span>
         <span className="spacer" />
-        <span className="badge">{usingLiveBackend() ? "● live backend" : "○ offline / demo"}</span>
+        <span className="badge">{badgeText}</span>
         <ThemeToggle />
       </header>
 
       <aside className="rail-left">
         <PullControl />
         <div className="rail-section">
-          <h3>Shot / machine</h3>
+          <h3 id="shot-list-label">Shot / machine</h3>
           {loadingMachines && <div className="placeholder">loading…</div>}
-          {machines.map((m) => (
-            <div
-              key={m.id}
-              className={`machine-item${m.id === machine ? " active" : ""}`}
-              onClick={() => setMachine(m.id)}
-            >
-              <div className="id">{m.label}</div>
-              {m.note && <div className="note">{m.note}</div>}
-            </div>
-          ))}
+          <div role="listbox" aria-labelledby="shot-list-label">
+            {machines.map((m) => (
+              <button
+                key={m.id}
+                type="button"
+                role="option"
+                aria-selected={m.id === machine}
+                className={`machine-item${m.id === machine ? " active" : ""}`}
+                onClick={() => setMachine(m.id)}
+              >
+                <div className="id">{m.label}</div>
+                {m.note && <div className="note">{m.note}</div>}
+              </button>
+            ))}
+          </div>
         </div>
       </aside>
 
       <main className="main">
-        <div className="tabbar">
+        <div className="tabbar" role="tablist" aria-label="Analysis views">
           {TABS.map((t) => (
-            <div key={t.id} className={`tab${t.id === tab ? " active" : ""}`} onClick={() => setTab(t.id)}>
+            <button
+              key={t.id}
+              type="button"
+              role="tab"
+              aria-selected={t.id === tab}
+              className={`tab${t.id === tab ? " active" : ""}`}
+              onClick={() => setTab(t.id)}
+            >
               {t.label}
-            </div>
+            </button>
           ))}
         </div>
         {!machine ? (
diff --git a/gui/web/src/components/ErrorBoundary.test.tsx b/gui/web/src/components/ErrorBoundary.test.tsx
index 42529e0..c893c34 100644
--- a/gui/web/src/components/ErrorBoundary.test.tsx
+++ b/gui/web/src/components/ErrorBoundary.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { afterEach, beforeEach, expect, test, vi } from "vitest";
 import ErrorBoundary from "./ErrorBoundary";
 
@@ -28,3 +28,23 @@ test("renders children unchanged when nothing throws", () => {
   );
   expect(screen.getByText("healthy panel")).toBeInTheDocument();
 });
+
+test("Retry clears the error and recovers in place when the child stops throwing", () => {
+  let shouldThrow = true;
+  function Flaky(): React.ReactElement {
+    if (shouldThrow) throw new Error("transient payload");
+    return <div>recovered panel</div>;
+  }
+  render(
+    <ErrorBoundary label="The test view">
+      <Flaky />
+    </ErrorBoundary>,
+  );
+  expect(screen.getByText(/failed to render/i)).toBeInTheDocument();
+
+  // The underlying condition is fixed; Retry should re-render children in place.
+  shouldThrow = false;
+  fireEvent.click(screen.getByRole("button", { name: /retry/i }));
+  expect(screen.getByText("recovered panel")).toBeInTheDocument();
+  expect(screen.queryByText(/failed to render/i)).not.toBeInTheDocument();
+});
diff --git a/gui/web/src/components/ErrorBoundary.tsx b/gui/web/src/components/ErrorBoundary.tsx
index 7b26287..00d03b0 100644
--- a/gui/web/src/components/ErrorBoundary.tsx
+++ b/gui/web/src/components/ErrorBoundary.tsx
@@ -48,6 +48,19 @@ export default class ErrorBoundary extends Component<Props, State> {
           <span style={{ opacity: 0.7 }}>
             Try a different shot or reload; other tabs are unaffected.
           </span>
+          <br />
+          <button
+            type="button"
+            onClick={() => this.setState({ error: null })}
+            style={{
+              marginTop: 10, padding: "4px 12px", cursor: "pointer",
+              background: "var(--panel-2)", color: "var(--text)",
+              border: "1px solid var(--border-2)", borderRadius: 4,
+              fontFamily: "inherit", fontSize: "inherit",
+            }}
+          >
+            Retry
+          </button>
         </div>
       );
     }
diff --git a/gui/web/src/components/PullControl.tsx b/gui/web/src/components/PullControl.tsx
index 178726a..1ca8589 100644
--- a/gui/web/src/components/PullControl.tsx
+++ b/gui/web/src/components/PullControl.tsx
@@ -60,6 +60,10 @@ export default function PullControl() {
   if (!usingLiveBackend()) return null;
   const needsCreds = backend === "remote" || backend === "mdsthin";
   const num = (s: string) => (s.trim() === "" ? undefined : Number(s));
+  // Gate the Pull button: clearing the field or typing non-digits would otherwise
+  // POST shot 0/NaN to /api/fetch.
+  const shotNum = Number(shot);
+  const shotValid = Number.isFinite(shotNum) && shotNum > 0;
 
   async function pull() {
     setBusy(true);
@@ -123,7 +127,8 @@ export default function PullControl() {
           ))}
         </select>
       )}
-      <input className="pull-input" value={shot}
+      <input className="pull-input" value={shot} inputMode="numeric"
+        aria-label="shot number" aria-invalid={!shotValid}
         onChange={(e) => setShot(e.target.value)} placeholder="shot number" />
       <select className="pull-input" value={analysis} disabled={!!sensorSet}
         onChange={(e) => setAnalysis(e.target.value)}>
@@ -196,15 +201,22 @@ export default function PullControl() {
           )}
         </>
       )}
-      <button className="pull-btn" disabled={busy} onClick={pull}>
+      <button className="pull-btn" disabled={busy || !shotValid} onClick={pull}>
         {busy ? `pulling… ${Math.round(frac * 100)}%` : "Pull"}
       </button>
       {busy && (
-        <div className="pull-bar">
+        <div
+          className="pull-bar"
+          role="progressbar"
+          aria-label="pull progress"
+          aria-valuemin={0}
+          aria-valuemax={100}
+          aria-valuenow={Math.round(frac * 100)}
+        >
           <div className="pull-bar-fill" style={{ width: `${frac * 100}%` }} />
         </div>
       )}
-      {msg && <div className="note">{msg}</div>}
+      {msg && <div className="note" role="status" aria-live="polite">{msg}</div>}
     </div>
   );
 }
diff --git a/gui/web/src/components/tabs/QuasiStationaryTab.tsx b/gui/web/src/components/tabs/QuasiStationaryTab.tsx
index af2994d..e8f9eca 100644
--- a/gui/web/src/components/tabs/QuasiStationaryTab.tsx
+++ b/gui/web/src/components/tabs/QuasiStationaryTab.tsx
@@ -1,7 +1,7 @@
 // Quasi-stationary view — OWNED BY TEAMMATE A.
 // Branch: gui-quasistationary — build here, PR into `gui`.
 // VISION §4.1, §7. Summaries: 04_SLCONTOUR_summary2019, 08_Slcontour_II_2023.
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type Plotly from "plotly.js-dist-min";
 import { useStore } from "../../store";
 import { useNode } from "../../lib/useNode";
@@ -112,17 +112,21 @@ function CollapseHeader({
   open, onToggle, children,
 }: { open: boolean; onToggle: () => void; children: React.ReactNode }) {
   return (
-    <div
+    <button
+      type="button"
       onClick={onToggle}
+      aria-expanded={open}
       style={{
         display: "flex", alignItems: "center", gap: 6, cursor: "pointer",
         userSelect: "none", marginBottom: open ? 6 : 0,
+        width: "100%", textAlign: "left",
+        background: "none", border: "none", padding: 0, fontFamily: "inherit",
       }}
       className="metrics-title"
     >
       <span style={{ fontSize: 9 }}>{open ? "▼" : "▶"}</span>
       {children}
-    </div>
+    </button>
   );
 }
 
@@ -228,15 +232,20 @@ export default function QuasiStationaryTab({ machine }: { machine: string }) {
 
   // ── Channel checkboxes for signal conditioning ────────────────────
   const [enabledChannels, setEnabledChannels] = useState<Set<string>>(new Set());
+  // Signature of the channel list we last initialized from. Re-seed the enabled set
+  // only when the list genuinely CHANGES (e.g. switching arrays) — NOT whenever the
+  // node ref changes with size===0, which used to silently re-check every channel the
+  // moment the user unchecked them all and re-plotted the same array.
+  const channelInitRef = useRef<string | null>(null);
   useEffect(() => {
     if (!signalNode) return;
     const pairs = signalNode.meta?.pairs as { channel: string }[] | undefined;
-    if (pairs && enabledChannels.size === 0) {
-      // eslint-disable-next-line react-hooks/set-state-in-effect -- one-time init of the channel set when the node first loads
+    if (!pairs) return;
+    const sig = pairs.map(p => p.channel).join("|");
+    if (channelInitRef.current !== sig) {
+      channelInitRef.current = sig;
       setEnabledChannels(new Set(pairs.map(p => p.channel)));
     }
-  // Only populate when channel list first loads.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [signalNode]);
 
   const toggleChannel = useCallback((ch: string) => {
@@ -654,6 +663,7 @@ export default function QuasiStationaryTab({ machine }: { machine: string }) {
               <div className="metrics-title">δB<sub>p</sub>(φ, t) · Contour — θ = 0°</div>
               {(["rdbu", "cividis", "viridis"] as const).map(cm => (
                 <button key={cm} onClick={() => setColormapChoice(cm)}
+                  aria-pressed={colormapChoice === cm}
                   style={{
                     fontSize: 10, padding: "1px 6px", borderRadius: 3, cursor: "pointer",
                     background: colormapChoice === cm ? "var(--accent)" : "var(--panel)",
diff --git a/gui/web/src/components/tabs/RotatingTab.tsx b/gui/web/src/components/tabs/RotatingTab.tsx
index 22de6fc..4940c7b 100644
--- a/gui/web/src/components/tabs/RotatingTab.tsx
+++ b/gui/web/src/components/tabs/RotatingTab.tsx
@@ -88,7 +88,6 @@ export default function RotatingTab({ machine }: { machine: string }) {
   // Advanced Parameter states
   const [advancedExpanded, setAdvancedExpanded] = useState<boolean>(false);
   const [fftWindow, setFftWindow] = useState<number>(512);
-  const [fftOverlap, setFftOverlap] = useState<number>(75);
   const [probePhi1, setProbePhi1] = useState<number>(307);
   const [probePhi2, setProbePhi2] = useState<number>(340);
   // θ origin (deg) for the 2D modal pattern: pans the periodic poloidal axis so this
@@ -235,16 +234,22 @@ export default function RotatingTab({ machine }: { machine: string }) {
   // static mock JSON. The label keys off usingLiveBackend() so real data reads as the
   // device it came from (e.g. "DIII-D").
   const hasStaticFiles = !!specNode && !specError;
+  // `live` = there's a backend to fetch nodes from; it gates whether the synthetic
+  // generators below run (they never fabricate against a backend).
   const live = usingLiveBackend();
-  // In LIVE mode no synthetic/mock data is ever produced (every generator below
-  // short-circuits on `live`), so the source is always the live backend — labeled
-  // with the device it came from (e.g. "DIII-D"); while a node loads we show a
-  // loading state, never "Synthetic Generator".
-  const deviceName = useStore((s) => s.machines).find((m) => m.id === machine)?.device;
-  const dataSourceText = live
+  // The DATA-SOURCE LABEL keys off the SELECTED machine's `mock` flag, not `live`:
+  // a live backend with zero fetched shots still serves the mock machines, so `live`
+  // alone would dishonestly badge demo data as the real device. Fall back to
+  // usingLiveBackend only when the flag is absent (older payloads).
+  const selectedMachine = useStore((s) => s.machines).find((m) => m.id === machine);
+  const deviceName = selectedMachine?.device;
+  const mock = selectedMachine?.mock ?? !live;
+  const dataSourceText = !mock
     ? `${deviceName ?? "Live backend"}${machine ? ` · shot ${machine}` : ""}`
-    : hasStaticFiles ? "Mock fixtures (static demo)" : "Synthetic generator (demo)";
-  const dataSourceColor = live
+    : live
+      ? "Demo data (no shots fetched)"
+      : hasStaticFiles ? "Mock fixtures (static demo)" : "Synthetic generator (demo)";
+  const dataSourceColor = !mock
     ? "var(--good)"
     : hasStaticFiles ? "var(--accent)" : "var(--warn)";
 
@@ -430,6 +435,11 @@ export default function RotatingTab({ machine }: { machine: string }) {
     }
   }, [hasStaticFiles, specNode, modeNumberNode, syntheticSpecNode, displayMode, fmin, fmax, powerGate, gateFrac]);
 
+  // Time scrubber source: keep the scrubber alive when the "n" mode map is still
+  // computing (processedSpecNode null) by falling back to the loaded power spectrogram's
+  // time axis, so the cursor never disappears mid-compute.
+  const scrubberNode = processedSpecNode ?? (specNode?.kind === "heatmap" ? specNode : null);
+
   // Determine active mode frequencies at the current time slice
   const currentModeFreqs = useMemo(() => {
     const targetTime = cursorMs || 2000;
@@ -669,7 +679,15 @@ export default function RotatingTab({ machine }: { machine: string }) {
     if (specLoading && !syntheticSpecNode) {
       return <div className="placeholder">Loading spectrogram...</div>;
     }
-    if (!processedSpecNode) return null;
+    if (!processedSpecNode) {
+      // In "n" mode the heavy array-STFT mode_number node can still be loading after the
+      // power spectrogram has already arrived (specLoading is false by then) — show an
+      // explicit indicator instead of a blank tile.
+      if (displayMode === "n" && hasStaticFiles) {
+        return <div className="placeholder">Computing mode map…</div>;
+      }
+      return null;
+    }
 
     const colorscale: [number, string][] = processedSpecNode.discrete
       ? (() => {
@@ -904,7 +922,10 @@ export default function RotatingTab({ machine }: { machine: string }) {
         <DraggableDivider direction="horizontal" onDelta={handleModeSplit} />
         <div style={{ flex: 1, overflow: "auto", paddingLeft: "8px" }}>
           <h4 style={{ fontSize: "11px", textTransform: "uppercase", color: "var(--text-dim)", margin: "0 0 8px" }}>
-            Poloidal Phase Fit{poloidalMeta ? ` (m = ${String(poloidalMeta.m_fit ?? "")}, fittype = ${fittype})` : ""}
+            {/* fittype is an inert "(not wired)" knob in live mode — showing it next to
+                the real backend `m` would imply the fit honored it. Keep it only in the
+                synthetic/mock branch, where it actually shapes the fit. */}
+            Poloidal Phase Fit{poloidalMeta ? ` (m = ${String(poloidalMeta.m_fit ?? "")}${live ? "" : `, fittype = ${fittype}`})` : ""}
           </h4>
           {processedPoloidalNode
             ? <NodeView node={processedPoloidalNode} height={200} />
@@ -1078,7 +1099,7 @@ export default function RotatingTab({ machine }: { machine: string }) {
             )}
 
             {/* Time Cursor Scrubber Slider */}
-            {processedSpecNode && (
+            {scrubberNode && (
               <div style={{ display: "flex", flexDirection: "column", gap: "4px", borderBottom: "1px solid var(--border)", paddingBottom: "10px" }}>
                 <label htmlFor="time-range" style={{ fontSize: "11px", color: "var(--text-dim)" }}>
                   Time Scrubber (t0): <strong style={{ color: "var(--good)" }}>{cursorMs.toFixed(0)} ms</strong>
@@ -1086,8 +1107,8 @@ export default function RotatingTab({ machine }: { machine: string }) {
                 <input
                   id="time-range"
                   type="range"
-                  min={processedSpecNode.x[0]}
-                  max={processedSpecNode.x[processedSpecNode.x.length - 1]}
+                  min={scrubberNode.x[0]}
+                  max={scrubberNode.x[scrubberNode.x.length - 1]}
                   step={10}
                   value={cursorMs}
                   onChange={(e) => setCursorMs(parseFloat(e.target.value))}
@@ -1252,23 +1273,6 @@ export default function RotatingTab({ machine }: { machine: string }) {
                     </select>
                   </div>
 
-                  {/* FFT Overlap slider */}
-                  <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
-                    <label htmlFor="fft-overlap-range" style={{ fontSize: "10px", color: "var(--text-dim)" }}>
-                      FFT Overlap: <strong style={{ color: "var(--text)" }}>{fftOverlap}%</strong>
-                    </label>
-                    <input
-                      id="fft-overlap-range"
-                      type="range"
-                      min="0"
-                      max="90"
-                      step="5"
-                      value={fftOverlap}
-                      onChange={(e) => setFftOverlap(parseInt(e.target.value))}
-                      style={{ accentColor: "var(--accent)" }}
-                    />
-                  </div>
-
                   {/* Probe Angles input fields (side-by-side) */}
                   <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
                     <span style={{ fontSize: "10px", color: "var(--text-dim)" }}>Toroidal Probes (φ)</span>
@@ -1359,6 +1363,7 @@ export default function RotatingTab({ machine }: { machine: string }) {
             <div className="toggle-group" style={{ display: "flex", background: "var(--border)", padding: "2px", borderRadius: "4px" }}>
               <button
                 onClick={() => setDisplayMode("n")}
+                aria-pressed={displayMode === "n"}
                 style={{
                   background: displayMode === "n" ? "var(--border-2)" : "transparent",
                   color: displayMode === "n" ? "#fff" : "var(--text-dim)",
@@ -1374,6 +1379,7 @@ export default function RotatingTab({ machine }: { machine: string }) {
               </button>
               <button
                 onClick={() => setDisplayMode("power")}
+                aria-pressed={displayMode === "power"}
                 style={{
                   background: displayMode === "power" ? "var(--border-2)" : "transparent",
                   color: displayMode === "power" ? "#fff" : "var(--text-dim)",
@@ -1456,6 +1462,7 @@ export default function RotatingTab({ machine }: { machine: string }) {
                 <span style={{ fontSize: "9px", color: "var(--text-dim)", whiteSpace: "nowrap" }}>θ orig</span>
                 <input
                   type="range" min={0} max={360} step={2} value={patternCut}
+                  aria-label="θ origin (deg)"
                   onChange={(e) => setPatternCut(Number(e.target.value))}
                   style={{ writingMode: "vertical-lr", direction: "rtl", width: "18px", height: "210px" }}
                 />
diff --git a/gui/web/src/components/tabs/SensorsTab.tsx b/gui/web/src/components/tabs/SensorsTab.tsx
index 8d08619..7773069 100644
--- a/gui/web/src/components/tabs/SensorsTab.tsx
+++ b/gui/web/src/components/tabs/SensorsTab.tsx
@@ -105,7 +105,10 @@ export default function SensorsTab({ machine }: { machine: string }) {
   const wallSurface = dark ? "rgb(225,232,245)" : "rgb(70,90,110)";
   const wallSurfaceOpacity = dark ? 0.22 : 0.16;
 
-  const [showEq, setShowEq] = useState(true);
+  // Don't default the equilibrium overlay ON while its backend node doesn't exist
+  // (EQUILIBRIUM_BACKEND=false) — a checked box with a swatch that draws nothing reads
+  // as broken. Seed from the flag so it lights up automatically when the node lands.
+  const [showEq, setShowEq] = useState(EQUILIBRIUM_BACKEND);
   const [showVV, setShowVV] = useState(true);
   const [showCoils, setShowCoils] = useState(true);
 
@@ -355,6 +358,9 @@ export default function SensorsTab({ machine }: { machine: string }) {
 
       {loading && <div className="placeholder">loading geometry…</div>}
       {error && <div className="placeholder">geometry unavailable: {error}</div>}
+      {!loading && !error && !meta && (
+        <div className="placeholder">No sensor layout for this shot&rsquo;s geometry.</div>
+      )}
 
       {meta && (
         <>
@@ -382,10 +388,15 @@ export default function SensorsTab({ machine }: { machine: string }) {
             })}
             <div style={{ minWidth: 150 }}>
               <div style={{ fontWeight: 600, marginBottom: 4 }}>overlays</div>
-              <label style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer" }}>
-                <input type="checkbox" checked={showEq} onChange={() => setShowEq((v) => !v)} />
+              <label style={{
+                display: "flex", alignItems: "center", gap: 6,
+                cursor: EQUILIBRIUM_BACKEND ? "pointer" : "not-allowed",
+                opacity: EQUILIBRIUM_BACKEND ? 1 : 0.5,
+              }}>
+                <input type="checkbox" checked={showEq} disabled={!EQUILIBRIUM_BACKEND}
+                  onChange={() => setShowEq((v) => !v)} />
                 <span style={{ width: 10, height: 10, borderRadius: 2, background: "#2ee6cf", display: "inline-block" }} />
-                equilibrium
+                {EQUILIBRIUM_BACKEND ? "equilibrium" : "equilibrium (coming soon)"}
               </label>
               <label style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer" }}>
                 <input type="checkbox" checked={showVV} onChange={() => setShowVV((v) => !v)} />
diff --git a/gui/web/src/lib/DraggableDivider.tsx b/gui/web/src/lib/DraggableDivider.tsx
index ee0f8b7..198765d 100644
--- a/gui/web/src/lib/DraggableDivider.tsx
+++ b/gui/web/src/lib/DraggableDivider.tsx
@@ -43,26 +43,55 @@ export default function DraggableDivider({ direction, onDelta, onDeltaEnd }: Pro
     document.addEventListener("mouseup", handleMouseUp);
   }, [direction, onDelta, onDeltaEnd]);
 
+  // Keyboard nudge: arrow keys resize via the same onDelta callback the drag uses,
+  // so the divider is operable without a pointer.
+  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
+    const STEP = 10;
+    const key = e.key;
+    const delta =
+      direction === "horizontal"
+        ? key === "ArrowLeft" ? -STEP : key === "ArrowRight" ? STEP : 0
+        : key === "ArrowUp" ? -STEP : key === "ArrowDown" ? STEP : 0;
+    if (delta === 0) return;
+    e.preventDefault();
+    onDelta(delta);
+    onDeltaEnd?.();
+  }, [direction, onDelta, onDeltaEnd]);
+
+  const isH = direction === "horizontal";
+  // Widen the interactive target to ≥24px (WCAG) while keeping the visual line thin:
+  // negative margins on the cross axis reclaim the extra hit width so the layout
+  // footprint stays ~the original 7px.
+  const HIT = 24;
+  const OFFSET = (HIT - 7) / 2;
+
   return (
     <div
+      className="draggable-divider"
+      role="separator"
+      aria-orientation={isH ? "vertical" : "horizontal"}
+      tabIndex={0}
       onMouseDown={handleMouseDown}
+      onKeyDown={handleKeyDown}
       style={{
-        flex: "0 0 7px",
-        cursor: direction === "horizontal" ? "col-resize" : "row-resize",
+        flex: `0 0 ${HIT}px`,
+        margin: isH ? `0 -${OFFSET}px` : `-${OFFSET}px 0`,
+        cursor: isH ? "col-resize" : "row-resize",
         position: "relative",
         zIndex: 10,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       <div
+        className="draggable-divider-line"
         style={{
           position: "absolute",
-          ...(direction === "horizontal"
-            ? { top: 0, bottom: 0, left: "2px", right: "2px" }
-            : { left: 0, right: 0, top: "2px", bottom: "2px" }
+          ...(isH
+            ? { top: 0, bottom: 0, width: "3px" }
+            : { left: 0, right: 0, height: "3px" }
           ),
-          background: "var(--border)",
-          borderRadius: "2px",
-          transition: "background 0.15s",
         }}
       />
     </div>
diff --git a/gui/web/src/lib/api.ts b/gui/web/src/lib/api.ts
index 4c512fd..da9fb9f 100644
--- a/gui/web/src/lib/api.ts
+++ b/gui/web/src/lib/api.ts
@@ -19,6 +19,10 @@ export interface MachineInfo {
   device: string; // "DIII-D" | "NSTX-U" | "synthetic"
   note?: string;
   synthetic?: boolean;
+  /** Backend-supplied: true when this entry is mock/demo data (no real shot file).
+   *  A live backend with zero fetched shots still serves mock machines, so the GUI
+   *  keys its "live vs demo" badge off this, not merely off having a backend URL. */
+  mock?: boolean;
 }
 
 /** List available machines/shots. */
diff --git a/gui/web/src/lib/qsTransforms.test.ts b/gui/web/src/lib/qsTransforms.test.ts
index 8c3f2e9..328538c 100644
--- a/gui/web/src/lib/qsTransforms.test.ts
+++ b/gui/web/src/lib/qsTransforms.test.ts
@@ -10,6 +10,16 @@ test("phiPeak picks the φ of the max |δBp| per time column", () => {
   expect(phiPeak(z, [10, 20])).toEqual([10, 20]);
 });
 
+test("phiPeak uses the SIGNED argmax, not |δBp| (negative-dominant column)", () => {
+  // z[φ][t]: column t=0 is all-negative — signed argmax picks the least-negative
+  // (-1 at φ=20), whereas an |·| argmax would wrongly pick -5 at φ=10.
+  const z = [
+    [-5, 0],
+    [-1, 0],
+  ];
+  expect(phiPeak(z, [10, 20])).toEqual([20, 10]);
+});
+
 test("phiRms computes RMS over φ per time column", () => {
   const z = [
     [3, 0],
diff --git a/gui/web/src/lib/qsTransforms.ts b/gui/web/src/lib/qsTransforms.ts
index de5dd33..1d1ccbc 100644
--- a/gui/web/src/lib/qsTransforms.ts
+++ b/gui/web/src/lib/qsTransforms.ts
@@ -2,7 +2,9 @@
 // QuasiStationaryTab so the index math is unit-testable (and can't throw and blank
 // the app on an empty/ragged grid).
 
-/** φ of peak |δBp| at each time column → one value per time. `y` is the φ axis. */
+/** φ of the maximum (signed) δBp at each time column → one value per time. `y` is
+ *  the φ axis. Signed (not |·|) argmax is intentional: it's the stable phase tracker
+ *  for a signed δBp contour. */
 export function phiPeak(z: number[][], y: number[]): number[] {
   const nCol = z[0]?.length ?? 0;
   if (!nCol || !y.length) return [];
diff --git a/gui/web/src/store.test.ts b/gui/web/src/store.test.ts
new file mode 100644
index 0000000..71b7af9
--- /dev/null
+++ b/gui/web/src/store.test.ts
@@ -0,0 +1,30 @@
+import { afterEach, expect, test } from "vitest";
+import { useStore } from "./store";
+
+// The store module registers a window `storage` listener at import time so a theme
+// change in one browser tab (localStorage write) mirrors into every other tab.
+const THEME_KEY = "magnetics-theme";
+
+afterEach(() => useStore.setState({ theme: "dark" }));
+
+test("a theme storage event syncs the store + the <html> data-theme", () => {
+  useStore.setState({ theme: "dark" });
+
+  window.dispatchEvent(new StorageEvent("storage", { key: THEME_KEY, newValue: "light" }));
+  expect(useStore.getState().theme).toBe("light");
+  expect(document.documentElement.getAttribute("data-theme")).toBe("light");
+
+  window.dispatchEvent(new StorageEvent("storage", { key: THEME_KEY, newValue: "dark" }));
+  expect(useStore.getState().theme).toBe("dark");
+  expect(document.documentElement.getAttribute("data-theme")).toBe("dark");
+});
+
+test("unrelated storage keys and junk values are ignored", () => {
+  useStore.setState({ theme: "dark" });
+
+  window.dispatchEvent(new StorageEvent("storage", { key: "some-other-key", newValue: "light" }));
+  expect(useStore.getState().theme).toBe("dark");
+
+  window.dispatchEvent(new StorageEvent("storage", { key: THEME_KEY, newValue: "purple" }));
+  expect(useStore.getState().theme).toBe("dark");
+});
diff --git a/gui/web/src/store.ts b/gui/web/src/store.ts
index b50bf8a..6d8e0f5 100644
--- a/gui/web/src/store.ts
+++ b/gui/web/src/store.ts
@@ -67,3 +67,16 @@ export const useStore = create<State>((set) => ({
       return { theme };
     }),
 }));
+
+// Keep the theme in sync across browser tabs: toggleTheme writes localStorage, so a
+// `storage` event fires in every OTHER tab — mirror it into the store + the DOM.
+if (typeof window !== "undefined") {
+  window.addEventListener("storage", (e) => {
+    if (e.key !== THEME_KEY) return;
+    const next = e.newValue;
+    if (next === "light" || next === "dark") {
+      applyTheme(next);
+      useStore.setState({ theme: next });
+    }
+  });
+}
diff --git a/gui/web/src/test/setup.ts b/gui/web/src/test/setup.ts
index 17c7031..f9c6a70 100644
--- a/gui/web/src/test/setup.ts
+++ b/gui/web/src/test/setup.ts
@@ -1,5 +1,11 @@
 // Vitest setup: adds jest-dom matchers (toBeInTheDocument, etc.) to expect.
 import '@testing-library/jest-dom/vitest'
+import { afterEach } from 'vitest'
+import { cleanup } from '@testing-library/react'
+
+// `globals` isn't enabled, so RTL's auto-cleanup afterEach isn't installed — register
+// it here so each test starts from a clean DOM (renders don't leak between tests).
+afterEach(() => cleanup())
 
 // jsdom on newer Node (23+) can expose a `window.localStorage` whose methods
 // aren't callable (getItem is not a function), which crashes any component that
diff --git a/gui/web/src/theme.css b/gui/web/src/theme.css
index 8996122..e752dd9 100644
--- a/gui/web/src/theme.css
+++ b/gui/web/src/theme.css
@@ -99,18 +99,29 @@ code, .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
 .rail-section { padding: 12px 14px; border-bottom: 1px solid var(--border); }
 .rail-section h3 { margin: 0 0 8px; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dim); font-weight: 600; }
 
-/* shot selector */
-.machine-item { padding: 7px 9px; border-radius: 4px; cursor: pointer; margin-bottom: 4px; border: 1px solid transparent; }
+/* shot selector — real <button>s (role=option) so the list is keyboard-reachable */
+.machine-item {
+  display: block; width: 100%; text-align: left;
+  padding: 7px 9px; border-radius: 4px; cursor: pointer; margin-bottom: 4px;
+  border: 1px solid transparent; background: none; color: inherit;
+  font-family: inherit; font-size: inherit;
+}
 .machine-item:hover { background: var(--panel-2); }
 .machine-item.active { background: var(--panel-2); border-color: var(--accent); }
+.machine-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
 .machine-item .id { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
 .machine-item .note { color: var(--text-dim); font-size: 11px; }
 
-/* tabs */
+/* tabs — real <button>s styled to match; keyboard-operable + focus-visible */
 .tabbar { display: flex; gap: 4px; margin-bottom: 14px; border-bottom: 1px solid var(--border); }
-.tab { padding: 8px 14px; cursor: pointer; color: var(--text-dim); border-bottom: 2px solid transparent; font-weight: 500; }
+.tab {
+  padding: 8px 14px; cursor: pointer; color: var(--text-dim);
+  background: none; border: none; border-bottom: 2px solid transparent;
+  font-family: inherit; font-size: inherit; font-weight: 500;
+}
 .tab:hover { color: var(--text); }
 .tab.active { color: var(--text); border-bottom-color: var(--accent); }
+.tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 3px; }
 
 /* cards */
 .card { background: var(--panel); border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin-bottom: 14px; box-shadow: var(--shadow); }
@@ -145,3 +156,12 @@ code, .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
   border: 1px solid var(--border, #24323f); border-radius: 3px; overflow: hidden; }
 .pull-bar-fill { height: 100%; background: var(--accent, #4aa3ff);
   transition: width 0.2s ease; }
+
+/* resizable pane divider (DraggableDivider.tsx) — thin visual line, wide (WCAG)
+   hit area, accent affordance on hover + keyboard focus */
+.draggable-divider-line {
+  background: var(--border); border-radius: 2px; transition: background 0.15s ease;
+}
+.draggable-divider:hover .draggable-divider-line,
+.draggable-divider:focus-visible .draggable-divider-line { background: var(--accent); }
+.draggable-divider:focus-visible { outline: none; }