feat(v5-g11): spec save/load UI — JSON Blob download + file input

Closes V5-G11 / cppmega-mlx-4n3. V3-12 was deferred. v5 adds:
  - SpecAction 'spec.replace' reducer action
  - TopBar Save button (data-testid=spec-save) → blob download of
    {projectName, spec, nodes, edges} JSON
  - TopBar Load file input (data-testid=spec-load-input) hidden +
    Load button visible; reads file, parses JSON, dispatches replace

3 new vitest. 189/189 vitest regression green.

Author: apstenku123

vbgui/src/App.tsx

@@ -353,6 +353,33 @@ export function App(): JSX.Element {
           onRunPipeline={handleRunPipeline}
           trainParquetPath={trainParquetPath}
           trainTokenizerPath={trainTokenizerPath}
+          onSaveSpec={() => {
+            // G11: serialise full SpecState + canvas (nodes/edges) to JSON
+            const blob = new Blob([JSON.stringify({
+              projectName, spec, nodes, edges,
+            }, null, 2)], { type: "application/json" });
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = `${projectName}.spec.json`;
+            a.click();
+            URL.revokeObjectURL(url);
+          }}
+          onLoadSpec={(file: File) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+              try {
+                const obj = JSON.parse(String(reader.result));
+                if (obj.projectName) setProjectName(String(obj.projectName));
+                if (obj.spec) dispatch({ type: "spec.replace", spec: obj.spec });
+                if (obj.nodes) setNodes(obj.nodes);
+                if (obj.edges) setEdges(obj.edges);
+              } catch (e) {
+                setRunError(`Load failed: ${String(e)}`);
+              }
+            };
+            reader.readAsText(file);
+          }}
           trainDisabled={
             (() => {
               // V3-8/V3-9: gate Train on gotcha severity. The verify RPC

vbgui/src/components/TopBar.tsx

@@ -24,6 +24,9 @@ export interface TopBarProps {
    *  or fall back to synthetic. */
   trainParquetPath?: string | null;
   trainTokenizerPath?: string | null;
+  /** G11: save/load callbacks. */
+  onSaveSpec?: () => void;
+  onLoadSpec?: (file: File) => void;
 }
 
 export function TopBar(p: TopBarProps): JSX.Element {
@@ -71,6 +74,28 @@ export function TopBar(p: TopBarProps): JSX.Element {
 
       <MemoryBar state={p.state} />
 
+      {p.onSaveSpec && (
+        <button data-testid="spec-save" onClick={p.onSaveSpec}>Save</button>
+      )}
+      {p.onLoadSpec && (
+        <>
+          <input data-testid="spec-load-input"
+                 type="file" accept=".json"
+                 style={{ display: "none" }}
+                 onChange={(e) => {
+                   const f = e.target.files?.[0];
+                   if (f && p.onLoadSpec) p.onLoadSpec(f);
+                   e.currentTarget.value = "";
+                 }} />
+          <button data-testid="spec-load"
+                  onClick={() => {
+                    const el = document.querySelector<HTMLInputElement>(
+                      "[data-testid='spec-load-input']");
+                    el?.click();
+                  }}>Load</button>
+        </>
+      )}
+
       <span data-testid="train-data-source"
             style={{ fontSize: 10,
                      color: p.trainParquetPath ? "#16a34a" : "#9ca3af",

vbgui/src/state/spec.ts

@@ -246,7 +246,8 @@ export type SpecAction =
   | { type: "gotchas.set"; gotchas: GotchaState[] }
   | { type: "memory.set"; worst_rank_bytes: number; device_hbm_bytes?: number }
   | { type: "verify.complete"; elapsed_ms: number; brick_count: number }
-  | { type: "backend.status"; status: SpecState["backend_status"] };
+  | { type: "backend.status"; status: SpecState["backend_status"] }
+  | { type: "spec.replace"; spec: SpecState };
 
 export function specReducer(s: SpecState, a: SpecAction): SpecState {
   switch (a.type) {
@@ -270,6 +271,7 @@ export function specReducer(s: SpecState, a: SpecAction): SpecState {
       return { ...s, rewriters: out };
     }
     case "side_channels.set": return { ...s, side_channels: a.side_channels };
+    case "spec.replace": return a.spec;
     case "sharding.set": return { ...s, sharding: a.sharding };
     case "gotchas.set":  return { ...s, gotchas: a.gotchas };
     case "memory.set":   return {

vbgui/tests/TopBar.test.tsx

@@ -63,6 +63,30 @@ describe("TopBar", () => {
     expect(t).toContain("cppmega_tokenizer.json");
   });
 
+  // G11: Save/Load buttons
+  it("G11: spec-save + spec-load hidden when callbacks not provided", () => {
+    render(<TopBar {...defaultTopProps()} />);
+    expect(screen.queryByTestId("spec-save")).toBeNull();
+    expect(screen.queryByTestId("spec-load")).toBeNull();
+  });
+
+  it("G11: spec-save fires onSaveSpec callback", () => {
+    const onSaveSpec = vi.fn();
+    render(<TopBar {...defaultTopProps({ onSaveSpec })} />);
+    fireEvent.click(screen.getByTestId("spec-save"));
+    expect(onSaveSpec).toHaveBeenCalledTimes(1);
+  });
+
+  it("G11: spec-load-input fires onLoadSpec with file", () => {
+    const onLoadSpec = vi.fn();
+    render(<TopBar {...defaultTopProps({ onLoadSpec })} />);
+    const file = new File(['{"spec":{}}'], "test.spec.json",
+      { type: "application/json" });
+    fireEvent.change(screen.getByTestId("spec-load-input"),
+      { target: { files: [file] } });
+    expect(onLoadSpec).toHaveBeenCalledWith(file);
+  });
+
   it("preset launcher fires onPresetDrop when chosen", () => {
     const onPresetDrop = vi.fn();
     render(<TopBar {...defaultTopProps({ onPresetDrop })} />);