diff --git a/gui/web/src/App.tsx b/gui/web/src/App.tsx
index b5f4aff..0c2cda9 100644
--- a/gui/web/src/App.tsx
+++ b/gui/web/src/App.tsx
@@ -22,8 +22,18 @@ const TABS: { id: TabId; label: string }[] = [
 ];
 
 export default function App() {
-  const { machines, machine, devices, device, tab, loadingMachines, init, setMachine, setDevice, 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 devices = useStore((s) => s.devices);
+  const device = useStore((s) => s.device);
+  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 setDevice = useStore((s) => s.setDevice);
+  const setTab = useStore((s) => s.setTab);
   const removeMachine = useStore((s) => s.removeMachine);
   const clearMachines = useStore((s) => s.clearMachines);
 
@@ -42,6 +52,17 @@ export default function App() {
     }
   }, [device, machines, devices]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // 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";
+
   // Deletable = real fetched shots (mock demo machines have nothing on disk), scoped
   // to the visible device. Only offer delete controls against a live backend.
   const deletable = usingLiveBackend() ? visibleMachines.filter((m) => !m.mock) : [];
@@ -71,7 +92,7 @@ export default function App() {
         <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>
         <SettingsMenu />
       </header>
 
@@ -94,7 +115,7 @@ export default function App() {
         )}
         <div className="rail-section">
           <div className="rail-head">
-            <h3>Shot / machine</h3>
+            <h3 id="shot-list-label">Shot / machine</h3>
             {deletable.length > 0 && (
               <button className="rail-clear" title="Delete all fetched shots and their data"
                 onClick={() => void onClearAll()}>
@@ -103,34 +124,54 @@ export default function App() {
             )}
           </div>
           {loadingMachines && <div className="placeholder">loading…</div>}
-          {visibleMachines.map((m) => (
-            <div
-              key={m.id}
-              className={`machine-item${m.id === machine ? " active" : ""}`}
-              onClick={() => setMachine(m.id)}
-            >
-              <div className="machine-main">
-                <div className="id">{m.label}</div>
-                {m.note && <div className="note">{m.note}</div>}
+          <div role="listbox" aria-labelledby="shot-list-label">
+            {visibleMachines.map((m) => (
+              // role=option row (not a <button>, so the delete <button> can nest); keyboard-
+              // reachable via tabIndex + Enter/Space so the a11y listbox pattern still holds.
+              <div
+                key={m.id}
+                role="option"
+                aria-selected={m.id === machine}
+                tabIndex={0}
+                className={`machine-item${m.id === machine ? " active" : ""}`}
+                onClick={() => setMachine(m.id)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    setMachine(m.id);
+                  }
+                }}
+              >
+                <div className="machine-main">
+                  <div className="id">{m.label}</div>
+                  {m.note && <div className="note">{m.note}</div>}
+                </div>
+                {!m.mock && usingLiveBackend() && (
+                  <button className="machine-del" title={`Delete ${m.label} and its data`}
+                    aria-label={`Delete ${m.label}`}
+                    onClick={(e) => { e.stopPropagation(); void onDelete(m.id, m.label); }}>
+                    ×
+                  </button>
+                )}
               </div>
-              {!m.mock && usingLiveBackend() && (
-                <button className="machine-del" title={`Delete ${m.label} and its data`}
-                  aria-label={`Delete ${m.label}`}
-                  onClick={(e) => { e.stopPropagation(); void onDelete(m.id, m.label); }}>
-                  ×
-                </button>
-              )}
-            </div>
-          ))}
+            ))}
+          </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 31664e4..c1124f6 100644
--- a/gui/web/src/components/PullControl.tsx
+++ b/gui/web/src/components/PullControl.tsx
@@ -83,6 +83,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);
@@ -153,7 +157,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)}>
@@ -266,15 +271,22 @@ export default function PullControl() {
             placeholder={`${dev.name} SSH password`} autoComplete="current-password" />
         </>
       )}
-      <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 fc2b23e..e60f8e4 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";
@@ -111,17 +111,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: "calc(9px * var(--font-scale))" }}>{open ? "▼" : "▶"}</span>
       {children}
-    </div>
+    </button>
   );
 }
 
@@ -271,15 +275,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) => {
@@ -871,6 +880,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: "calc(10px * var(--font-scale))", 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 f091fb7..fbaa578 100644
--- a/gui/web/src/components/tabs/RotatingTab.tsx
+++ b/gui/web/src/components/tabs/RotatingTab.tsx
@@ -288,16 +288,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)";
 
@@ -472,6 +478,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;
@@ -714,7 +725,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
       ? (() => {
@@ -952,7 +971,10 @@ export default function RotatingTab({ machine }: { machine: string }) {
         <DraggableDivider direction="horizontal" onDelta={handleModeSplit} />
         <div style={{ flex: 1, overflow: "auto", paddingLeft: "8px" }}>
           <h4 style={{ fontSize: "calc(11px * var(--font-scale))", 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} exportName={`shot_${machine}_poloidal_phase_fit`} download={{ machine, nodeId: "poloidal_phase_fit", params: { time: cursorMs } }} />
@@ -1128,7 +1150,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: "calc(11px * var(--font-scale))", color: "var(--text-dim)" }}>
                   Time Scrubber (t0): <strong style={{ color: "var(--good)" }}>{cursorMs.toFixed(0)} ms</strong>
@@ -1136,8 +1158,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))}
@@ -1536,6 +1558,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)",
@@ -1551,6 +1574,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)",
@@ -1635,6 +1659,7 @@ export default function RotatingTab({ machine }: { machine: string }) {
                 <span style={{ fontSize: "calc(9px * var(--font-scale))", 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 cbc8e20..90fe264 100644
--- a/gui/web/src/components/tabs/SensorsTab.tsx
+++ b/gui/web/src/components/tabs/SensorsTab.tsx
@@ -107,7 +107,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);
   // Perturbation-coil overlay — device-agnostic, driven entirely by meta.coils
   // (whatever coil sets the device config supplies); on by default.
@@ -373,6 +376,8 @@ export default function SensorsTab({ machine }: { machine: string }) {
         </div>
       ) : error ? (
         <div className="placeholder">geometry unavailable: {error}</div>
+      ) : !loading && !meta ? (
+        <div className="placeholder">No sensor layout for this shot&rsquo;s geometry.</div>
       ) : null}
 
       {meta && (
@@ -401,10 +406,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 0d5718b..ee84eb5 100644
--- a/gui/web/src/lib/api.ts
+++ b/gui/web/src/lib/api.ts
@@ -19,7 +19,11 @@ export interface MachineInfo {
   device: string; // "DIII-D" | "NSTX-U" | "synthetic"
   note?: string;
   synthetic?: boolean;
-  mock?: boolean; // true = built-in demo machine (no data on disk, not deletable)
+  /** Backend-supplied: true when this entry is mock/demo data (no real shot file,
+   *  nothing on disk, not deletable). 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
index 5b4aff7..3fd436a 100644
--- a/gui/web/src/store.test.ts
+++ b/gui/web/src/store.test.ts
@@ -1,6 +1,9 @@
 import { afterEach, beforeEach, expect, test } from "vitest";
 import { useStore, applyFontScale, FONT_SCALES } 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";
 const FONT_SCALE_KEY = "magnetics-font-scale";
 
 beforeEach(() => {
@@ -8,7 +11,32 @@ beforeEach(() => {
   // reset to the default (Medium) preset between tests
   useStore.getState().setFontScale(FONT_SCALES.M);
 });
-afterEach(() => window.localStorage.clear());
+afterEach(() => {
+  window.localStorage.clear();
+  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");
+});
 
 test("applyFontScale writes the --font-scale custom property on <html>", () => {
   applyFontScale(FONT_SCALES.XL);
diff --git a/gui/web/src/store.ts b/gui/web/src/store.ts
index 62b4cb3..621ecc3 100644
--- a/gui/web/src/store.ts
+++ b/gui/web/src/store.ts
@@ -153,3 +153,16 @@ export const useStore = create<State>((set) => ({
     set({ fontScale: n });
   },
 }));
+
+// 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 61e439b..3b52fdd 100644
--- a/gui/web/src/theme.css
+++ b/gui/web/src/theme.css
@@ -142,10 +142,11 @@ code, .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
 .rail-clear { margin: 0 0 8px; background: none; border: none; cursor: pointer; font-size: 10px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: var(--text-dim); padding: 0; }
 .rail-clear:hover { color: var(--danger, #e5484d); }
 
-/* shot selector */
-.machine-item { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 4px; cursor: pointer; margin-bottom: 4px; border: 1px solid transparent; }
+/* shot selector — role=option rows (tabIndex) so the list is keyboard-reachable */
+.machine-item { display: flex; align-items: center; gap: 6px; padding: 7px 9px; border-radius: 4px; cursor: pointer; margin-bottom: 4px; border: 1px solid transparent; color: 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-main { flex: 1; min-width: 0; }
 .machine-item .id { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
 .machine-item .note { color: var(--text-dim); font-size: 0.846em; }
@@ -154,11 +155,16 @@ code, .mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }
 .machine-item:hover .machine-del { opacity: 0.7; }
 .machine-del:hover { opacity: 1 !important; color: var(--danger, #e5484d); }
 
-/* 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); }
@@ -193,3 +199,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; }