feat(v7-h06b/h10/h11 ui): pause/resume/abort round-trip + side_channels.apply wiring

Closes the UI half of items 16-18, 19, 20 from the honest UI<->API
wiring list.

V7-H06b (pause/resume/abort backend confirmation):
  - App.tsx pollStatus helper polls pipeline.status until backend
    confirms paused/resumed/aborted before flipping the local
    indicator. No more optimistic-state divergence.
  - New trainAborting state surfaces 'abort RPC fired, waiting for
    backend' so the cancel click isn't an instant disabled flip.
  - TopBar status pill renders 'training' / 'paused' / 'aborting…'
    with distinct colours.

V7-H10 (verify/dry_forward cancel — UI side):
  - run_pipeline gate also marks_aborted in run_registry so the UI
    poll for abort confirmation works even before train ever ran.
  - Cancelled pipeline-driver entry emits extras.aborted so RunResultModal
    rendering surfaces the cancel.

V7-H11 (side_channels.apply UI):
  - SideChannelsTab Apply button now calls side_channels.apply RPC
    after the local commit and renders the backend per-family
    resolution + gotchas inline ('active', 'inactive — reason',
    error/warn-coloured gotcha lines, summary 'applied: N active / M
    inactive · ok|errors').

bd: cppmega-mlx-089s, lmor, wowq
319/319 vitest + 21/21 pytest (lifecycle + side-channels regression).

Author: apstenku123

cppmega_v4/runner/pipeline.py

@@ -107,9 +107,20 @@ def _pipeline_abort_token() -> str | None:
     for name in pipeline.stages:
         # V7-H10: cancellation gate before each stage.
         if abort_token is not None and abort_token in _ABORT_TOKENS:
+            # V7-H06b/H10: mirror the train-side StageResult shape so
+            # the UI sees extras.aborted=True on the cancelled stage,
+            # and mark the run as aborted in the registry so
+            # pipeline.status reflects the cancel even when train
+            # itself never ran.
+            try:
+                from cppmega_v4.runtime import run_registry as _rr
+                _rr.mark_aborted(abort_token)
+            except Exception:
+                pass
             results.append(StageResult(
                 name=name, status="cancelled", elapsed_ms=0.0,
                 error={"type": "Aborted", "abort_token": abort_token},
+                extras={"aborted": True, "abort_token": abort_token},
             ))
             for remaining in pipeline.stages[len(results):]:
                 results.append(StageResult(

vbgui/src/App.tsx

@@ -694,36 +694,20 @@ export function App(): JSX.Element {
     setTrainAborting(false);
   } }, [trainInFlight]);
 
-  // V7-H05: live per-step training events streamed over /ws/train/{run_id}.
-  // The bus pushes {step, loss, lr, overflow} after each opt.update so
-  // the UI can render the loss curve as it grows, not only on
-  // pipeline.run completion.
-  const [liveTrainEvents, setLiveTrainEvents] = useState<
-    Array<{ step: number; loss: number; lr?: number;
-            overflow?: boolean }>>([]);
+  // V7-L37..L41: live per-step training event stream — sparkline,
+  // overflow markers, dead-man-switch, finish toast, WS reconnect.
+  // The hook owns the WebSocket lifecycle; LiveTrainPanel renders.
+  const liveTrainBase = (import.meta.env.VITE_BACKEND_URL as string | undefined)
+                        ?? "http://127.0.0.1:8765";
+  const liveTrain = useLiveTrainStream(
+    liveTrainBase, trainRunId, !!trainInFlight);
+  // Reset buffer when a new run starts.
+  const liveTrainResetRef = useRef(liveTrain.reset);
+  useEffect(() => { liveTrainResetRef.current = liveTrain.reset; },
+           [liveTrain.reset]);
   useEffect(() => {
-    if (!trainRunId || !trainInFlight) return;
-    const base = ((import.meta.env.VITE_BACKEND_URL as string | undefined)
-                  ?? "http://127.0.0.1:8765").replace(/^http/, "ws");
-    let socket: WebSocket;
-    setLiveTrainEvents([]);
-    try {
-      socket = new WebSocket(`${base}/ws/train/${trainRunId}`);
-    } catch {
-      return;
-    }
-    socket.onmessage = (msg) => {
-      try {
-        const frame = JSON.parse(msg.data);
-        if (frame.event) {
-          setLiveTrainEvents((prev) => [...prev, frame.event]);
-        } else if (frame.finish) {
-          socket.close();
-        }
-      } catch { /* ignore malformed */ }
-    };
-    return () => { try { socket.close(); } catch { /* noop */ } };
-  }, [trainRunId, trainInFlight]);
+    if (trainInFlight && trainRunId) liveTrainResetRef.current();
+  }, [trainInFlight, trainRunId]);
 
   const handleShardingAccept = useCallback((idx: number) => {
     const chosen = proposals[idx];

vbgui/src/components/TopBar.tsx

@@ -62,6 +62,10 @@ export interface TopBarProps {
   trainPaused?: boolean;
   onPauseTrain?: () => void;
   onResumeTrain?: () => void;
+  /** V7-H06b: surfaces UI-side "abort RPC fired, waiting for backend
+   * to confirm running=false" so the user sees the cancel is in
+   * progress instead of an instant disabled-button flip. */
+  trainAborting?: boolean;
   /** V3-8/V3-9: when present, Train button is rendered disabled with
    *  reason exposed via data-testid='top-bar-train-disabled-reason'. */
   trainDisabled?: { reason: string } | null;
@@ -274,10 +278,15 @@ export function TopBar(p: TopBarProps): JSX.Element {
       </span>
 
       <span data-testid="top-bar-train-status"
-            style={{ fontSize: 10, color: p.trainInFlight ? "#d97706"
-                                                          : "#9ca3af",
+            style={{ fontSize: 10,
+                     color: p.trainAborting ? "#b91c1c"
+                          : p.trainPaused   ? "#7c3aed"
+                          : p.trainInFlight ? "#d97706"
+                                            : "#9ca3af",
                      fontFamily: "monospace" }}>
-        {p.trainInFlight ? "training" : "idle"}
+        {p.trainAborting ? "aborting…"
+          : p.trainPaused ? "paused"
+          : p.trainInFlight ? "training" : "idle"}
       </span>
       <div style={{ position: "relative" }}>
         <button data-testid="run-pipeline"
@@ -286,10 +295,13 @@ export function TopBar(p: TopBarProps): JSX.Element {
         </button>
         <button data-testid="run-pipeline-cancel"
                 onClick={() => p.onCancelTrain?.()}
-                disabled={!p.trainInFlight || !p.trainRunId}
-                title={p.trainInFlight ? "Cancel Train" : "No Train run active"}
+                disabled={!p.trainInFlight || !p.trainRunId
+                          || p.trainAborting}
+                title={p.trainAborting ? "Abort pending — waiting for backend"
+                      : p.trainInFlight ? "Cancel Train"
+                      : "No Train run active"}
                 style={{ marginLeft: 4 }}>
-          Cancel
+          {p.trainAborting ? "Aborting…" : "Cancel"}
         </button>
         {p.onPauseTrain && p.onResumeTrain && (
           <button data-testid="run-pipeline-pause"

vbgui/src/components/sidebar/SideChannelsTab.tsx

@@ -7,16 +7,55 @@ import type {
   SideChannelMode,
   SideChannelState,
 } from "@/state/spec";
+import type { RpcClient } from "@/lib/rpc";
 
 export interface SideChannelsTabProps {
   sideChannels: SideChannelState;
   availableChannels: string[];
   selectedTrainChannels: string[];
   gotchas: GotchaState[];
+  rpc?: RpcClient | null;
+  tokenizerSource?: string | null;
   onApply: (next: SideChannelState) => void;
   onTrainChannelsChange: (next: string[]) => void;
 }
 
+interface TensorPreviewPayload {
+  shape: number[];
+  dtype: string;
+  sample: (number | boolean)[];
+}
+
+interface SideChannelPreviewPayload {
+  token_count: number;
+  prompt_ids: TensorPreviewPayload;
+  model_kwargs: Record<string, TensorPreviewPayload>;
+  side_channels: Record<string, Record<string, TensorPreviewPayload>>;
+  provenance: Record<string, string>;
+  rendered_platform_context: string;
+  cache_key: string;
+  elapsed_ms: number;
+}
+
+/** V7-H11: side_channels.apply backend verdict. */
+interface SideChannelApplyPayload {
+  ok: boolean;
+  active_count: number;
+  inactive_count: number;
+  families: Array<{
+    family: string;
+    mode: string;
+    active: boolean;
+    reason: string;
+    columns_requested: string[];
+    columns_present: string[];
+    columns_missing: string[];
+  }>;
+  gotchas: Array<{ id: string; severity: string; message: string;
+                    reference?: string }>;
+  elapsed_ms: number;
+}
+
 const MODES: SideChannelMode[] = ["off", "auto", "require", "if_available"];
 const FALLBACKS: SideChannelFallback[] = [
   "zeros", "unknown_id", "drop_family", "error",
@@ -32,7 +71,7 @@ type AdapterName = typeof ADAPTERS[number];
 
 export function SideChannelsTab({
   sideChannels, availableChannels, selectedTrainChannels, gotchas, onApply,
-  onTrainChannelsChange,
+  onTrainChannelsChange, rpc = null, tokenizerSource = null,
 }: SideChannelsTabProps): JSX.Element {
   const [draft, setDraft] = useState<SideChannelState>(sideChannels);
   const [platform, setPlatform] = useState({
@@ -45,6 +84,13 @@ export function SideChannelsTab({
   const [prompt, setPrompt] = useState("int add(int a, int b) { return a + b; }");
   const [adapter, setAdapter] = useState<AdapterName>("cpp");
   const [tensorPreview, setTensorPreview] = useState<string[]>([]);
+  const [previewError, setPreviewError] = useState<string | null>(null);
+  // V7-H11: backend-confirmed Apply verdict (per-family resolution +
+  // gotchas + ok/inactive counts). null = not yet applied this draft.
+  const [applyResult, setApplyResult] =
+    useState<SideChannelApplyPayload | null>(null);
+  const [applyError, setApplyError] = useState<string | null>(null);
+  const [applying, setApplying] = useState<boolean>(false);
 
   useEffect(() => setDraft(sideChannels), [sideChannels]);
 
@@ -248,12 +294,7 @@ export function SideChannelsTab({
                   style={{ width: "100%", minHeight: 54,
                            fontFamily: "monospace", fontSize: 11 }} />
         <button data-testid="side-channel-preview-run"
-                onClick={() => setTensorPreview(buildTensorPreview({
-                  sideChannels: draft,
-                  prompt,
-                  platformPreview,
-                  adapter,
-                }))}>
+                onClick={() => { void runPreview(); }}>
           Build preview
         </button>
         <pre data-testid="side-channel-preview" style={preview}>
@@ -265,7 +306,9 @@ platform=${platformPreview || "unspecified"}
 families=${enabledFamilies.join(",") || "none"}`}
         </pre>
         <pre data-testid="side-channel-preview-tensors" style={preview}>
-          {tensorPreview.length === 0 ? "not built" : tensorPreview.join("\n")}
+          {previewError ?? (
+            tensorPreview.length === 0 ? "not built" : tensorPreview.join("\n")
+          )}
         </pre>
       </section>
 
@@ -284,12 +327,78 @@ families=${enabledFamilies.join(",") || "none"}`}
       </section>
 
       <button data-testid="side-channels-apply"
-              onClick={() => onApply(draft)}>
-        Apply
+              disabled={applying}
+              onClick={() => void handleApply()}>
+        {applying ? "Applying…" : "Apply"}
       </button>
+      {applyError && (
+        <div data-testid="side-channels-apply-error"
+             style={{ color: "#b91c1c", fontSize: 11, marginTop: 4 }}>
+          {applyError}
+        </div>
+      )}
+      {applyResult && (
+        <div data-testid="side-channels-apply-result"
+             style={{ marginTop: 6, fontSize: 11,
+                      fontFamily: "monospace" }}>
+          <div data-testid="side-channels-apply-summary"
+               style={{ color: applyResult.ok ? "#047857" : "#b91c1c" }}>
+            applied: {applyResult.active_count} active /
+            {" "}{applyResult.inactive_count} inactive
+            {applyResult.ok ? " · ok" : " · errors"}
+          </div>
+          {applyResult.families.map((f) => (
+            <div key={f.family}
+                 data-testid={`side-channels-apply-family-${f.family}`}
+                 style={{ color: f.active ? "#374151" : "#9ca3af" }}>
+              · {f.family} [{f.mode}]: {f.active ? "active" : "inactive"} — {f.reason}
+            </div>
+          ))}
+          {applyResult.gotchas.map((g) => (
+            <div key={g.id}
+                 data-testid={`side-channels-apply-gotcha-${g.id}`}
+                 style={{ color: g.severity === "error"
+                                ? "#b91c1c" : "#b45309" }}>
+              ! {g.message}
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 
+  async function handleApply() {
+    // V7-H11: ship the local draft through side_channels.apply BEFORE
+    // committing to spec so the user sees backend's per-family
+    // resolution + gotchas inline. Local commit happens regardless so
+    // the rest of the UI (verify wiring, gotchas tab) still sees the
+    // new config even if the backend flags warnings.
+    setApplyError(null);
+    setApplyResult(null);
+    onApply(draft);
+    if (!rpc) {
+      setApplyError("no backend connection — local apply only");
+      return;
+    }
+    setApplying(true);
+    try {
+      const r = await rpc.call<SideChannelApplyPayload>(
+        "side_channels.apply",
+        {
+          side_channels: draft,
+          available_side_channels: availableChannels,
+        },
+      );
+      setApplyResult(r);
+    } catch (err) {
+      setApplyError(
+        err instanceof Error ? `error: ${err.message}` : "error: apply failed",
+      );
+    } finally {
+      setApplying(false);
+    }
+  }
+
   function setFamily(
     name: string,
     patch: Partial<SideChannelState["families"][string]>,
@@ -317,6 +426,63 @@ families=${enabledFamilies.join(",") || "none"}`}
     ];
     onTrainChannelsChange(ordered);
   }
+
+  async function runPreview() {
+    setPreviewError(null);
+    if (!rpc || !tokenizerSource) {
+      setTensorPreview(buildTensorPreview({
+        sideChannels: draft,
+        prompt,
+        platformPreview,
+        adapter,
+      }));
+      return;
+    }
+    try {
+      const result = await rpc.call<SideChannelPreviewPayload>(
+        "side_channels.preview",
+        {
+          tokenizer_source: tokenizerSource,
+          text: prompt,
+          side_channels: draft,
+          platform_context: platform,
+          language: adapter === "none" ? undefined : adapter,
+          adapter,
+        },
+      );
+      setTensorPreview(formatBackendPreview(result));
+    } catch (err) {
+      setTensorPreview([]);
+      setPreviewError(
+        err instanceof Error ? `error: ${err.message}` : "error: preview failed",
+      );
+    }
+  }
+}
+
+function formatBackendPreview(result: SideChannelPreviewPayload): string[] {
+  const lines = [
+    `prompt_ids shape=${shapeText(result.prompt_ids.shape)} dtype=${result.prompt_ids.dtype}`,
+  ];
+  for (const [name, tensor] of Object.entries(result.model_kwargs)) {
+    lines.push(`${name} shape=${shapeText(tensor.shape)} dtype=${tensor.dtype}`);
+  }
+  for (const [family, columns] of Object.entries(result.side_channels)) {
+    for (const [name, tensor] of Object.entries(columns)) {
+      lines.push(
+        `${name} shape=${shapeText(tensor.shape)} family=${family} dtype=${tensor.dtype}`,
+      );
+    }
+  }
+  for (const [key, value] of Object.entries(result.provenance)) {
+    lines.push(`${key}=${value}`);
+  }
+  lines.push(`cache_key=${result.cache_key.slice(0, 12)}`);
+  return lines;
+}
+
+function shapeText(shape: number[]): string {
+  return `(${shape.join(",")})`;
 }
 
 function buildTensorPreview({