feat(vbgui-fc): sidebar 5 tabs + top bar + bottom strip + spec reducer

Stage F-C of the Visual Builder GUI epic (cppmega-mlx-o0k). Lands the
sidebar / chrome the canvas needs to become a working editor per
VisualBuilderPlan.md §4.2-4.4.

State:
- src/state/spec.ts — SpecState single source of truth with LossState
  / OptimState / RewriterState / ShardingState / GotchaState fields,
  reducer covering loss.set / optim.add_group / optim.remove_group /
  rewriters.add+remove+reorder / sharding.set / gotchas.set /
  memory.set / verify.complete / backend.status. Plus memoryFillRatio
  + memoryColor helpers using the green<0.7 / yellow<0.9 / red
  thresholds from §4.2.

Sidebar tabs (320px, vertical, single source of truth on parent state):
- LossTab — kind dropdown with conditional params per kind
  (MTP k+beta, IFIM lambda_fim, MHC lambda_mhc, Custom function-name).
- OptimTab — kind + per-group table (matcher/lr/wd) with + Add group
  and per-row × remove, grad_clip_norm + mixed_precision globals.
- RewritersTab — add buttons for MTP/IFIM/MHC, ordered chip list with
  ▲/▼ reorder and × remove, optional Apply button.
- ShardingTab — proposals card list with Accept, custom axis table
  (+ Add axis, per-row remove), three toggles
  (master_weights_fp32 / fp8_enabled / activation_checkpointing).
- GotchasTab — severity-grouped chips (error/warning/info) with
  optional reference links and Auto-fix buttons for the known
  compile-mode footguns.

Chrome:
- TopBar (56px) — project name, preset launcher (12 presets), 8
  topology selector, compile-mode dropdown (off/regional/whole_model),
  MemoryBar (color-coded fill), split-button Smoke/Full/Train run.
- BottomStrip (32px) — backend connection dot, last verify latency,
  brick + fused-region count, help toggle.
- MemoryBar — re-usable bar with green/yellow/red fill driven by
  memoryColor(state).

App wires all of the above into one layout: TopBar over a row of
Palette + FlowCanvas + Sidebar, then BottomStrip beneath.

Tests (36 new, 65 total, vitest + jsdom): reducer transitions, memory
helper thresholds, every tab + Sidebar tab switching, TopBar
preset/topology/compile/run interactions, BottomStrip status fields,
MemoryBar fill ratio.

Build: vite build emits 575 kB JS / 16 kB CSS (gzip 173 kB / 2.6 kB).
Typecheck clean.

Closes cppmega-mlx-o0k.3.

Author: apstenku123

vbgui/src/App.tsx

@@ -1,45 +1,105 @@
-import { useCallback, useState } from "react";
+import { useCallback, useReducer, useState } from "react";
 import { ReactFlowProvider, type Edge, type Node } from "@xyflow/react";
+
 import { FlowCanvas } from "@/components/FlowCanvas";
 import { Palette } from "@/components/Palette";
+import { Sidebar } from "@/components/Sidebar";
+import { TopBar, type RunMode } from "@/components/TopBar";
+import { BottomStrip } from "@/components/BottomStrip";
+
+import {
+  INITIAL_SPEC, specReducer, type TopologyFactory,
+} from "@/state/spec";
+import type { ShardingProposalView } from "@/components/sidebar/ShardingTab";
+
+const PRESETS: readonly string[] = [
+  "qwen3_next", "kimi_linear", "kimi_k2", "deepseek_v3",
+  "deepseek_v4_flash", "gemma4", "mistral4", "ling26",
+  "longcat", "nemotron3", "zaya1", "arcee_trinity",
+];
+
+const TOPOLOGIES: readonly TopologyFactory[] = [
+  "h100_8x", "h200_8x", "a100_8x", "b100_8x",
+  "gb10_quarter", "tpu_v6e_8", "tpu_v5p_4", "m3_ultra_solo",
+];
 
 export function App(): JSX.Element {
   const [nodes, setNodes] = useState<Node[]>([]);
   const [edges, setEdges] = useState<Edge[]>([]);
+  const [projectName, setProjectName] = useState("untitled");
+  const [proposals] = useState<ShardingProposalView[]>([]);
+  const [spec, dispatch] = useReducer(specReducer, INITIAL_SPEC);
 
   const handleDropBrick = useCallback(
     (kind: string, position: { x: number; y: number }) => {
       setNodes((prev) => [
         ...prev,
-        {
-          id: `${kind}_${prev.length + 1}`,
-          type: "brick",
-          position,
-          data: { kind },
-        },
+        { id: `${kind}_${prev.length + 1}`,
+          type: "brick", position, data: { kind } },
       ]);
     }, []);
 
   const handleConnect = useCallback(
     (p: { source: string; target: string }) => {
       setEdges((prev) => [
         ...prev,
-        { id: `${p.source}->${p.target}`,
-          source: p.source, target: p.target,
+        { id: `${p.source}->${p.target}`, source: p.source, target: p.target,
           data: { severity: "info" } },
       ]);
     }, []);
 
+  const handlePresetDrop = useCallback((_name: string) => {
+    // F-A.2/F-D will resolve preset → specs via build_preset_specs RPC and
+    // fan out into Node[] additions. Stub for now.
+  }, []);
+
+  const handleRunPipeline = useCallback((_mode: RunMode) => {
+    // F-D wires this to JSON-RPC pipeline.run; for now we only flag intent.
+  }, []);
+
   return (
     <ReactFlowProvider>
-      <div style={{ display: "flex", height: "100vh", margin: 0 }}>
-        <Palette />
-        <FlowCanvas
-          nodes={nodes}
-          edges={edges}
-          onConnect={handleConnect}
-          onDropBrick={handleDropBrick}
+      <div style={{ display: "flex", flexDirection: "column",
+                    height: "100vh", margin: 0 }}>
+        <TopBar
+          state={spec}
+          projectName={projectName}
+          presets={PRESETS}
+          topologies={TOPOLOGIES}
+          onProjectNameChange={setProjectName}
+          onPresetDrop={handlePresetDrop}
+          onTopologyChange={(t) => dispatch({ type: "sharding.set",
+            sharding: { ...spec.sharding, topology: t } })}
+          onCompileModeChange={(m) => dispatch({ type: "sharding.set",
+            sharding: { ...spec.sharding, compile_mode: m } })}
+          onRunPipeline={handleRunPipeline}
         />
+        <div style={{ flex: 1, display: "flex", minHeight: 0 }}>
+          <Palette />
+          <FlowCanvas
+            nodes={nodes} edges={edges}
+            onConnect={handleConnect}
+            onDropBrick={handleDropBrick}
+          />
+          <Sidebar
+            loss={spec.loss}
+            optim={spec.optim}
+            rewriters={spec.rewriters}
+            sharding={spec.sharding}
+            gotchas={spec.gotchas}
+            proposals={proposals}
+            onLossApply={(l) => dispatch({ type: "loss.set", loss: l })}
+            onOptimApply={(o) => dispatch({ type: "optim.set", optim: o })}
+            onRewriterAdd={(r) => dispatch({ type: "rewriters.add", rewriter: r })}
+            onRewriterRemove={(i) => dispatch({ type: "rewriters.remove", index: i })}
+            onRewriterReorder={(f, t) =>
+              dispatch({ type: "rewriters.reorder", from: f, to: t })}
+            onShardingChange={(s) =>
+              dispatch({ type: "sharding.set", sharding: s })}
+            onShardingAccept={(_idx) => { /* F-D wires accept → topology update */ }}
+          />
+        </div>
+        <BottomStrip state={spec} fusedRegionCount={0} />
       </div>
     </ReactFlowProvider>
   );

vbgui/src/components/BottomStrip.tsx

@@ -0,0 +1,50 @@
+import type { SpecState } from "@/state/spec";
+
+export interface BottomStripProps {
+  state: SpecState;
+  fusedRegionCount?: number;
+  onHelpToggle?: () => void;
+}
+
+const STATUS_COLOR: Record<SpecState["backend_status"], string> = {
+  connected:    "#10b981",
+  reconnecting: "#d97706",
+  disconnected: "#dc2626",
+};
+
+const STATUS_LABEL: Record<SpecState["backend_status"], string> = {
+  connected:    "Backend connected",
+  reconnecting: "Reconnecting…",
+  disconnected: "Disconnected",
+};
+
+export function BottomStrip({
+  state, fusedRegionCount = 0, onHelpToggle,
+}: BottomStripProps): JSX.Element {
+  return (
+    <footer data-testid="bottom-strip"
+            style={{ height: 32, display: "flex", alignItems: "center",
+                     gap: 16, padding: "0 12px",
+                     borderTop: "1px solid #e5e7eb",
+                     background: "#f9fafb",
+                     fontFamily: "system-ui, sans-serif", fontSize: 11 }}>
+      <span data-testid="backend-status"
+            style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+        <span data-testid="backend-status-dot"
+              style={{ width: 8, height: 8, borderRadius: "50%",
+                       background: STATUS_COLOR[state.backend_status],
+                       animation: state.backend_status === "reconnecting"
+                         ? "pulse 1.2s infinite" : "none" }} />
+        {STATUS_LABEL[state.backend_status]}
+      </span>
+      <span data-testid="verify-latency">
+        Verify: {state.last_verify_ms.toFixed(1)}ms
+      </span>
+      <span data-testid="brick-count">
+        {state.brick_count} bricks, {fusedRegionCount} fused regions
+      </span>
+      <span style={{ flex: 1 }} />
+      <button data-testid="help-toggle" onClick={onHelpToggle}>?</button>
+    </footer>
+  );
+}

vbgui/src/components/MemoryBar.tsx

@@ -0,0 +1,38 @@
+import { memoryColor, type SpecState } from "@/state/spec";
+
+export interface MemoryBarProps {
+  state: SpecState;
+}
+
+const COLOR_HEX: Record<"green" | "yellow" | "red", string> = {
+  green: "#10b981", yellow: "#d97706", red: "#dc2626",
+};
+
+function formatGB(n: number): string {
+  return `${(n / 1024 ** 3).toFixed(2)} GB`;
+}
+
+export function MemoryBar({ state }: MemoryBarProps): JSX.Element {
+  const ratio = state.device_hbm_bytes > 0
+    ? Math.min(1, state.worst_rank_bytes / state.device_hbm_bytes)
+    : 0;
+  const color = COLOR_HEX[memoryColor(state)];
+  const tooltip = `${formatGB(state.worst_rank_bytes)} / ${formatGB(state.device_hbm_bytes)}`;
+  return (
+    <div data-testid="memory-bar" title={tooltip}
+         style={{ flex: 1, height: 24, background: "#e5e7eb",
+                  borderRadius: 4, overflow: "hidden",
+                  position: "relative" }}>
+      <div data-testid="memory-bar-fill"
+           style={{ width: `${ratio * 100}%`, height: "100%",
+                    background: color, transition: "width 200ms" }} />
+      <div style={{ position: "absolute", inset: 0,
+                    display: "flex", alignItems: "center",
+                    justifyContent: "center",
+                    fontSize: 11, fontFamily: "system-ui, sans-serif",
+                    color: ratio > 0.5 ? "white" : "#111827" }}>
+        {tooltip}
+      </div>
+    </div>
+  );
+}

vbgui/src/components/Sidebar.tsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { LossTab } from "./sidebar/LossTab";
+import { OptimTab } from "./sidebar/OptimTab";
+import { RewritersTab } from "./sidebar/RewritersTab";
+import { ShardingTab, type ShardingProposalView } from "./sidebar/ShardingTab";
+import { GotchasTab } from "./sidebar/GotchasTab";
+import type {
+  GotchaState, LossState, OptimState, RewriterState, ShardingState,
+} from "@/state/spec";
+
+export type SidebarTab = "loss" | "optim" | "rewriters" | "sharding" | "gotchas";
+
+export interface SidebarProps {
+  loss: LossState;
+  optim: OptimState;
+  rewriters: RewriterState[];
+  sharding: ShardingState;
+  gotchas: GotchaState[];
+  proposals: ShardingProposalView[];
+  onLossApply:    (l: LossState) => void;
+  onOptimApply:   (o: OptimState) => void;
+  onRewriterAdd:  (r: RewriterState) => void;
+  onRewriterRemove: (i: number) => void;
+  onRewriterReorder: (from: number, to: number) => void;
+  onRewriterApply?: () => void;
+  onShardingChange: (s: ShardingState) => void;
+  onShardingAccept: (idx: number) => void;
+  onGotchaAutoFix?: (id: string) => void;
+}
+
+const TAB_LABELS: { key: SidebarTab; label: string }[] = [
+  { key: "loss",      label: "Loss" },
+  { key: "optim",     label: "Optim" },
+  { key: "rewriters", label: "Rewriters" },
+  { key: "sharding",  label: "Sharding" },
+  { key: "gotchas",   label: "Gotchas" },
+];
+
+export function Sidebar(p: SidebarProps): JSX.Element {
+  const [active, setActive] = useState<SidebarTab>("loss");
+  return (
+    <aside data-testid="sidebar"
+           style={{ width: 320, background: "#fff",
+                    borderLeft: "1px solid #e5e7eb",
+                    display: "flex", flexDirection: "column",
+                    fontFamily: "system-ui, sans-serif" }}>
+      <nav role="tablist" data-testid="sidebar-tabs"
+           style={{ display: "flex", borderBottom: "1px solid #e5e7eb" }}>
+        {TAB_LABELS.map((t) => (
+          <button key={t.key}
+                  role="tab"
+                  aria-selected={active === t.key}
+                  data-testid={`sidebar-tab-${t.key}`}
+                  onClick={() => setActive(t.key)}
+                  style={{
+                    flex: 1, padding: "8px 4px", border: "none",
+                    background: active === t.key ? "#f3f4f6" : "transparent",
+                    cursor: "pointer", fontSize: 12,
+                    borderBottom: active === t.key
+                      ? "2px solid #2563eb" : "2px solid transparent",
+                  }}>
+            {t.label}
+          </button>
+        ))}
+      </nav>
+      <div style={{ flex: 1, overflowY: "auto" }}>
+        {active === "loss"      && <LossTab loss={p.loss} onApply={p.onLossApply} />}
+        {active === "optim"     && <OptimTab optim={p.optim} onApply={p.onOptimApply} />}
+        {active === "rewriters" && (
+          <RewritersTab rewriters={p.rewriters}
+                        onAdd={p.onRewriterAdd}
+                        onRemove={p.onRewriterRemove}
+                        onReorder={p.onRewriterReorder}
+                        onApply={p.onRewriterApply} />
+        )}
+        {active === "sharding"  && (
+          <ShardingTab sharding={p.sharding} proposals={p.proposals}
+                       onAccept={p.onShardingAccept}
+                       onChange={p.onShardingChange} />
+        )}
+        {active === "gotchas"   && (
+          <GotchasTab gotchas={p.gotchas} onAutoFix={p.onGotchaAutoFix} />
+        )}
+      </div>
+    </aside>
+  );
+}

vbgui/src/components/TopBar.tsx

@@ -0,0 +1,87 @@
+import { useState } from "react";
+import { MemoryBar } from "./MemoryBar";
+import type { SpecState, TopologyFactory } from "@/state/spec";
+
+export type RunMode = "smoke" | "full" | "train";
+
+export interface TopBarProps {
+  state: SpecState;
+  projectName: string;
+  presets: readonly string[];
+  topologies: readonly TopologyFactory[];
+  onProjectNameChange: (name: string) => void;
+  onPresetDrop: (name: string) => void;
+  onTopologyChange: (t: TopologyFactory) => void;
+  onCompileModeChange: (m: SpecState["sharding"]["compile_mode"]) => void;
+  onRunPipeline: (mode: RunMode) => void;
+}
+
+export function TopBar(p: TopBarProps): JSX.Element {
+  const [open, setOpen] = useState(false);
+  return (
+    <header data-testid="top-bar"
+            style={{ height: 56, display: "flex", alignItems: "center",
+                     gap: 12, padding: "0 12px",
+                     borderBottom: "1px solid #e5e7eb",
+                     fontFamily: "system-ui, sans-serif", fontSize: 12 }}>
+      <input data-testid="project-name"
+             value={p.projectName}
+             onChange={(e) => p.onProjectNameChange(e.target.value)}
+             style={{ width: 160, fontWeight: 600 }} />
+
+      <select data-testid="preset-launcher" defaultValue=""
+              onChange={(e) => { p.onPresetDrop(e.target.value);
+                                 e.currentTarget.value = ""; }}>
+        <option value="" disabled>Preset…</option>
+        {p.presets.map((n) => <option key={n} value={n}>{n}</option>)}
+      </select>
+
+      <select data-testid="topology-selector"
+              value={p.state.sharding.topology}
+              onChange={(e) =>
+                p.onTopologyChange(e.target.value as TopologyFactory)}>
+        {p.topologies.map((t) => <option key={t} value={t}>{t}</option>)}
+      </select>
+
+      <select data-testid="compile-mode"
+              value={p.state.sharding.compile_mode}
+              onChange={(e) =>
+                p.onCompileModeChange(
+                  e.target.value as SpecState["sharding"]["compile_mode"])}>
+        <option value="off">compile: off</option>
+        <option value="regional">compile: regional</option>
+        <option value="whole_model">compile: whole_model ⚠</option>
+      </select>
+
+      <MemoryBar state={p.state} />
+
+      <div style={{ position: "relative" }}>
+        <button data-testid="run-pipeline"
+                onClick={() => p.onRunPipeline("smoke")}>
+          Smoke
+        </button>
+        <button data-testid="run-pipeline-toggle"
+                onClick={() => setOpen((x) => !x)}>▾</button>
+        {open && (
+          <div data-testid="run-pipeline-menu"
+               style={{ position: "absolute", top: "100%", right: 0,
+                        background: "white", border: "1px solid #e5e7eb",
+                        boxShadow: "0 2px 6px rgba(0,0,0,0.08)",
+                        zIndex: 10 }}>
+            <button data-testid="run-pipeline-full"
+                    onClick={() => { setOpen(false); p.onRunPipeline("full"); }}
+                    style={menuItem}>Full validate</button>
+            <button data-testid="run-pipeline-train"
+                    onClick={() => { setOpen(false); p.onRunPipeline("train"); }}
+                    style={menuItem}>Train</button>
+          </div>
+        )}
+      </div>
+    </header>
+  );
+}
+
+const menuItem: React.CSSProperties = {
+  display: "block", padding: "6px 12px", border: "none",
+  background: "white", cursor: "pointer", textAlign: "left", width: "100%",
+};