feat: implement neural debugger frontend and backend support for brick node interaction

Author: apstenku123

backend.log

@@ -173,13 +173,32 @@ def _make_schedule(g) -> ScheduleSpec | None:
         schedule = g.schedule
         if schedule is None:
             return None
+        kind = schedule.kind
+        warmup_steps = schedule.warmup_steps if schedule.warmup_steps is not None else 0
+        total_steps = schedule.total_steps
+        min_lr_ratio = schedule.min_lr_ratio if schedule.min_lr_ratio is not None else 0.0
+        decay_steps = schedule.decay_steps
+        power = schedule.power if schedule.power is not None else 2.0
+
+        if kind in ("cosine", "wsd", "polynomial"):
+            if total_steps is None or total_steps <= 0:
+                total_steps = 100_000
+            if total_steps < warmup_steps:
+                warmup_steps = total_steps
+
+        if kind == "wsd":
+            if decay_steps is None or decay_steps < 1:
+                decay_steps = 10_000
+            if warmup_steps + decay_steps > total_steps:
+                decay_steps = max(1, total_steps - warmup_steps)
+
         return ScheduleSpec(
-            kind=schedule.kind,
-            warmup_steps=schedule.warmup_steps,
-            total_steps=schedule.total_steps,
-            min_lr_ratio=schedule.min_lr_ratio,
-            decay_steps=schedule.decay_steps,
-            power=schedule.power,
+            kind=kind,
+            warmup_steps=warmup_steps,
+            total_steps=total_steps,
+            min_lr_ratio=min_lr_ratio,
+            decay_steps=decay_steps,
+            power=power,
         )
 
     groups = tuple(

cppmega_v4/jsonrpc/methods.py

@@ -7,3 +7,15 @@
 
   ➜  Local:   http://localhost:5173/
   ➜  Network: use --host to expose
+2:48:34 AM [vite] hmr update /src/App.tsx
+2:50:20 AM [vite] hmr update /src/components/BrickNode.tsx
+2:50:22 AM [vite] hmr update /src/components/BrickNode.tsx
+2:50:28 AM [vite] hmr update /src/App.tsx
+2:50:30 AM [vite] hmr update /src/App.tsx
+2:50:37 AM [vite] hmr update /src/App.tsx
+2:50:43 AM [vite] hmr update /src/App.tsx
+2:50:54 AM [vite] hmr update /src/App.tsx
+2:50:56 AM [vite] hmr update /src/App.tsx
+2:50:59 AM [vite] hmr update /src/App.tsx
+2:55:07 AM [vite] hmr update /src/App.tsx
+2:55:20 AM [vite] hmr update /src/App.tsx

frontend.log

@@ -192,14 +192,19 @@ export function App(): JSX.Element {
   const [tabs, setTabs] = useState<WorkspaceTab[]>(getSavedTabs);
   const [activeTabId, setActiveTabId] = useState<string>(getSavedActiveTabId);
   const isSwitchingRef = useRef<boolean>(false);
-  const debugState = useNeuralDebugger();
 
   const [nodes, setNodes] = useState<Node[]>(() => {
     const savedTabs = getSavedTabs();
     const savedActiveId = getSavedActiveTabId();
     const active = savedTabs.find((t) => t.id === savedActiveId) || savedTabs[0];
     return active.nodes;
   });
+
+  const modelNodesCount = useMemo(() => {
+    return nodes.filter(n => n.type === "brick" || n.type === "adapter").length;
+  }, [nodes]);
+
+  const maxStep = modelNodesCount + 1;
   const [edges, setEdges] = useState<Edge[]>(() => {
     const savedTabs = getSavedTabs();
     const savedActiveId = getSavedActiveTabId();
@@ -303,6 +308,7 @@ export function App(): JSX.Element {
   // hardcoding 65536 — so dropping a GPT-2 / SmolLM / cppmega tokenizer
   // gives the BrickContextPanel the right embedding_table param count.
   const tokenizerVocabSize = useTokenizerVocab(rpc, trainTokenizerPath);
+  const debugState = useNeuralDebugger(rpc, trainTokenizerPath);
 
   // V7-I07: poll the JsonRPC LRU cache hit-rate so the BottomStrip
   // chip surfaces hit_rate / size / evictions live.
@@ -1001,6 +1007,7 @@ export function App(): JSX.Element {
               ...(firstGroup.schedule ?? {}),
               kind: scheduleKind,
               warmup_steps: d.warmup_steps,
+              total_steps: firstGroup.schedule?.total_steps ?? 100000,
             },
           },
           ...spec.optim.groups.slice(1),
@@ -1088,6 +1095,7 @@ export function App(): JSX.Element {
               ...(firstGroup.schedule ?? {}),
               kind: scheduleKind,
               warmup_steps: d.warmup_steps,
+              total_steps: firstGroup.schedule?.total_steps ?? 100000,
             },
           },
           ...spec.optim.groups.slice(1),
@@ -1520,6 +1528,46 @@ export function App(): JSX.Element {
     if (trainInFlight && trainRunId) liveTrainResetRef.current();
   }, [trainInFlight, trainRunId]);
 
+  // V7-F03-ANIMATE: Trigger forward-backward canvas stepping animation on actual WebSocket step updates
+  const lastAnimatedStepRef = useRef<number>(-1);
+  const animateStepRef = useRef(debugState.animateFullTrainStep);
+  useEffect(() => {
+    animateStepRef.current = debugState.animateFullTrainStep;
+  }, [debugState.animateFullTrainStep]);
+
+  useEffect(() => {
+    if (!trainInFlight) {
+      lastAnimatedStepRef.current = -1;
+      return;
+    }
+    const lastEvent = liveTrain.events.length > 0 ? liveTrain.events[liveTrain.events.length - 1] : null;
+    if (lastEvent && lastEvent.step !== lastAnimatedStepRef.current) {
+      lastAnimatedStepRef.current = lastEvent.step;
+      // Trigger full forward-backward canvas pass
+      animateStepRef.current(maxStep);
+    }
+  }, [liveTrain.events, trainInFlight, maxStep]);
+
+  // V7-F04-SYNC: Sync real Loss and LR values from active WebSocket stream to the debugger
+  const setLrRef = useRef(debugState.setLr);
+  const setLossValRef = useRef(debugState.setLossVal);
+  useEffect(() => {
+    setLrRef.current = debugState.setLr;
+    setLossValRef.current = debugState.setLossVal;
+  }, [debugState.setLr, debugState.setLossVal]);
+
+  useEffect(() => {
+    const lastEvent = liveTrain.events.length > 0 ? liveTrain.events[liveTrain.events.length - 1] : null;
+    if (lastEvent) {
+      if (typeof lastEvent.lr === "number") {
+        setLrRef.current(lastEvent.lr);
+      }
+      if (typeof lastEvent.loss === "number") {
+        setLossValRef.current(lastEvent.loss);
+      }
+    }
+  }, [liveTrain.events]);
+
   const handleShardingAccept = useCallback((idx: number) => {
     const chosen = proposals[idx];
     if (!chosen) return;
@@ -1538,11 +1586,6 @@ export function App(): JSX.Element {
     setTimeout(() => setRunError(null), 2000);
   }, [proposals, scheduleVerify, spec.sharding]);
 
-  const modelNodesCount = useMemo(() => {
-    return nodes.filter(n => n.type === "brick" || n.type === "adapter").length;
-  }, [nodes]);
-
-  const maxStep = modelNodesCount + 1;
 
   const mappedNodes = useMemo(() => {
     const head = spec.loss.head_outputs?.[0];
@@ -1555,6 +1598,8 @@ export function App(): JSX.Element {
 
     const K = modelNodes.length;
 
+    const lastEvent = liveTrain.events.length > 0 ? liveTrain.events[liveTrain.events.length - 1] : null;
+
     let enriched = nodes.map((n) => {
       const isModel = n.type === "brick" || n.type === "adapter";
       const idx = isModel ? modelNodes.findIndex((m) => m.id === n.id) : -1;
@@ -1566,6 +1611,31 @@ export function App(): JSX.Element {
           (n.id === "__loss_ghost__" && debugState.activeStep === K);
       }
 
+      let gradNorm: number | undefined;
+      if (lastEvent?.grad_norms && isModel) {
+        const normKeys = Object.keys(lastEvent.grad_norms);
+        const nameVal = typeof (n.data as any)?.name === "string" ? (n.data as any).name.toLowerCase() : "";
+        const idVal = n.id.toLowerCase();
+        
+        // Find best key match in grad_norms map
+        const matchedKey = normKeys.find((k) => {
+          const lk = k.toLowerCase();
+          if (nameVal && (lk.includes(nameVal) || nameVal.includes(lk))) return true;
+          if (lk.includes(idVal) || idVal.includes(lk)) return true;
+          // check if index matches e.g. key contains "layers.3." or "layer_3" etc.
+          const idxPattern1 = `layers.${idx}.`;
+          const idxPattern2 = `layers.${idx}`;
+          const idxPattern3 = `layer_${idx}`;
+          const idxPattern4 = `.${idx}.`;
+          const idxPattern5 = `.${idx}`;
+          if (lk.includes(idxPattern1) || lk.includes(idxPattern2) || lk.includes(idxPattern3) || lk.includes(idxPattern4) || lk.endsWith(idxPattern5)) return true;
+          return false;
+        });
+        if (matchedKey !== undefined) {
+          gradNorm = lastEvent.grad_norms[matchedKey];
+        }
+      }
+
       let additionalData: any = {};
       if (n.type === "tokenizer_virtual") {
         isActiveNode = debugState.debuggerMode && debugState.activeStep === -1;
@@ -1581,6 +1651,10 @@ export function App(): JSX.Element {
           direction: debugState.direction,
           isActiveNode,
         };
+      } else if (isModel && gradNorm !== undefined) {
+        additionalData = {
+          gradNorm,
+        };
       }
 
       return {
@@ -1659,7 +1733,7 @@ export function App(): JSX.Element {
       result.push(detokenizerNode);
     }
     return result;
-  }, [nodes, debugState.debuggerMode, debugState.activeStep, debugState.direction, debugState.prompt, debugState.tokens, debugState.isWeightUpdated, spec.loss.head_outputs, spec.loss.kind, spec.loss.params]);
+  }, [nodes, debugState.debuggerMode, debugState.activeStep, debugState.direction, debugState.prompt, debugState.tokens, debugState.isWeightUpdated, spec.loss.head_outputs, spec.loss.kind, spec.loss.params, liveTrain.events]);
 
   const mappedEdges = useMemo(() => {
     const head = spec.loss.head_outputs?.[0];

vbgui/src/App.tsx

@@ -17,6 +17,7 @@ export interface BrickNodeData {
   debuggerMode?: boolean;
   isActiveNode?: boolean;
   isWeightUpdated?: boolean;
+  gradNorm?: number;
 }
 
 export function BrickNode({ data, id, selected }: NodeProps): JSX.Element {
@@ -80,7 +81,7 @@ export function BrickNode({ data, id, selected }: NodeProps): JSX.Element {
         </div>
       </div>
 
-      {(d.shape || typeof d.memory_mb === "number") && (
+      {(d.shape || typeof d.memory_mb === "number" || typeof d.gradNorm === "number") && (
         <div style={{ display: "flex", flexWrap: "wrap", gap: 6,
                       marginTop: 10 }}>
           {d.shape && (
@@ -93,6 +94,20 @@ export function BrickNode({ data, id, selected }: NodeProps): JSX.Element {
               {d.memory_mb.toFixed(1)} MB
             </span>
           )}
+          {typeof d.gradNorm === "number" && (
+            <span
+              data-testid="brick-grad-norm"
+              style={{
+                ...statPill,
+                color: "var(--vb-success)",
+                borderColor: "rgba(52, 211, 153, 0.4)",
+                boxShadow: "0 0 8px rgba(52, 211, 153, 0.2)",
+                fontWeight: 600,
+              }}
+            >
+              ‖g‖: {d.gradNorm.toFixed(4)}
+            </span>
+          )}
         </div>
       )}
 

vbgui/src/components/BrickNode.tsx

@@ -5,7 +5,7 @@ export interface Token {
   text: string;
 }
 
-export function useNeuralDebugger() {
+export function useNeuralDebugger(rpc?: any, tokenizerPath?: string | null) {
   const [debuggerMode, setDebuggerMode] = useState(false);
   const [activeStep, setActiveStep] = useState(-1); // -1 = tokenizer, 0..N-1 = layer nodes, N = loss, N+1 = de-tokenizer
   const [direction, setDirection] = useState<"forward" | "backward">("forward");
@@ -23,6 +23,27 @@ export function useNeuralDebugger() {
   const [lossVal, setLossVal] = useState(2.34);
   const [isWeightUpdated, setIsWeightUpdated] = useState(false);
 
+  // V7-F01-REAL: fetch real segmented tokens from the active tokenizer via RPC
+  useEffect(() => {
+    if (!rpc || !tokenizerPath || !prompt) return;
+    let cancelled = false;
+    (async () => {
+      try {
+        const r = await rpc.call(
+          "tokenizer.encode_visualize",
+          { text: prompt, tokenizer_source: tokenizerPath }
+        );
+        if (cancelled) return;
+        if (r && r.tokens) {
+          setTokens(r.tokens.map((t: any) => ({ id: t.id, text: t.text })));
+        }
+      } catch (e) {
+        console.error("Debugger tokenizer encode failed:", e);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [rpc, tokenizerPath, prompt]);
+
   // Use refs for intervals to prevent state staleness
   const stepTimerRef = useRef<NodeJS.Timeout | null>(null);
 

vbgui/src/hooks/useNeuralDebugger.ts

@@ -62,6 +62,11 @@ describe("BrickNode", () => {
     expect(screen.getByTestId("brick-side-channel-warn")).toBeTruthy();
   });
 
+  it("shows gradNorm when provided", () => {
+    renderBrick({ kind: "mlp", gradNorm: 0.123456 });
+    expect(screen.getByTestId("brick-grad-norm").textContent).toContain("‖g‖: 0.1235");
+  });
+
   it("falls back to kind when meta is unknown", () => {
     renderBrick({ kind: "totally_made_up" });
     expect(screen.getAllByText("totally_made_up").length).toBeGreaterThan(0);