fix(ux): read vocab_size from active tokenizer, not hardcoded 65536

Previous patch wired vocab_size=65536 (cppmega default) into
BrickContextPanel's dims block — but the architect can swap
tokenizers via the Tokenizer Playground or the train-tokenizer
picker, so embedding_table parameter counts went stale for GPT-2 /
SmolLM / Llama-3-tiktoken / fim-only fixtures.

Fix: new useTokenizerVocab(rpc, source) hook calls
tokenizer.encode_visualize with a tiny probe text on tokenizer
change, reads capabilities.vocab_size out of the response, caches by
source path so toggling back-and-forth doesn't refetch.

App.tsx wires the hook to trainTokenizerPath and passes the resolved
size into BrickContextPanel — falling back to 65536 only when no
tokenizer is loaded yet. Drop a Llama-3 tokenizer (vocab=128256), the
embedding_table now reports 128256 × H params, not 65536 × H.

Author: apstenku123

vbgui/src/App.tsx

@@ -38,6 +38,7 @@ import { useRpc } from "@/hooks/useRpc";
 import { useCacheStats } from "@/hooks/useCacheStats";
 import { useVerifyAfter } from "@/hooks/useVerifyAfter";
 import { usePresets } from "@/hooks/usePresets";
+import { useTokenizerVocab } from "@/hooks/useTokenizerVocab";
 
 import {
   INITIAL_SPEC, specReducer, type SpecState, type TopologyFactory,
@@ -47,6 +48,8 @@ import { migrate } from "@/state/migrations";
 import { adapterFor } from "@/lib/bricks";
 import { useHistory } from "@/hooks/useHistory";
 import type { ShardingProposalView } from "@/components/sidebar/ShardingTab";
+import { useNeuralDebugger } from "@/hooks/useNeuralDebugger";
+import { DebuggerDashboard } from "@/components/DebuggerDashboard";
 
 // PRESETS list is now fetched dynamically from the backend via
 // architectures.list_presets — see usePresets() hook below. A fallback
@@ -264,6 +267,11 @@ export function App(): JSX.Element {
     onBackendBuildId: (bid) => setBackendBuildId(bid),
   });
 
+  // UX#3: read actual vocab_size from the active tokenizer instead of
+  // hardcoding 65536 — so dropping a GPT-2 / SmolLM / cppmega tokenizer
+  // gives the BrickContextPanel the right embedding_table param count.
+  const tokenizerVocabSize = useTokenizerVocab(rpc, trainTokenizerPath);
+
   // V7-I07: poll the JsonRPC LRU cache hit-rate so the BottomStrip
   // chip surfaces hit_rate / size / evictions live.
   const cacheStats = useCacheStats({
@@ -1542,6 +1550,8 @@ export function App(): JSX.Element {
           onRedo={handleRedo}
           canUndo={history.canUndo}
           canRedo={history.canRedo}
+          debuggerMode={debugState.debuggerMode}
+          onToggleDebugger={() => debugState.setDebuggerMode(!debugState.debuggerMode)}
           onMixedPrecisionChange={(enabled) => dispatch({ type: "optim.set",
             optim: { ...spec.optim, mixed_precision: enabled } })}
           onFp8EnabledChange={(enabled) => dispatch({ type: "sharding.set",
@@ -1908,7 +1918,7 @@ export function App(): JSX.Element {
                     brickKind={data.kind ?? "mlp"}
                     params={data.params ?? {}}
                     hidden_size={dimEnv.H ?? 128}
-                    vocab_size={65536}
+                    vocab_size={tokenizerVocabSize ?? 65536}
                     onApply={(newParams) => {
                       setNodes((prev) => prev.map((n) =>
                         n.id === selectedBrickId

vbgui/src/hooks/useTokenizerVocab.ts

@@ -0,0 +1,47 @@
+/**
+ * useTokenizerVocab — given a tokenizer source path, return the
+ * loaded tokenizer's vocab_size (or null while loading / on error).
+ *
+ * Backed by tokenizer.encode_visualize which already reports
+ * capabilities.vocab_size in its response. We probe with a tiny
+ * canonical text so the call is cheap, and cache by source path so
+ * switching back/forth doesn't refetch.
+ */
+
+import { useEffect, useState } from "react";
+import type { RpcClient } from "@/lib/rpc";
+
+const CACHE = new Map<string, number>();
+const PROBE_TEXT = "hello world";
+
+
+export function useTokenizerVocab(
+  rpc: RpcClient | null,
+  source: string | null | undefined,
+): number | null {
+  const [vocab, setVocab] = useState<number | null>(
+    source && CACHE.has(source) ? CACHE.get(source) ?? null : null);
+
+  useEffect(() => {
+    if (!rpc || !source) { setVocab(null); return; }
+    const cached = CACHE.get(source);
+    if (cached !== undefined) { setVocab(cached); return; }
+    let cancelled = false;
+    (async () => {
+      try {
+        const r = await rpc.call<{
+          capabilities?: { vocab_size?: number };
+        }>("tokenizer.encode_visualize",
+            { tokenizer_source: source, text: PROBE_TEXT });
+        const v = r?.capabilities?.vocab_size;
+        if (typeof v === "number" && v > 0) {
+          CACHE.set(source, v);
+          if (!cancelled) setVocab(v);
+        }
+      } catch { /* leave null — caller falls back to default */ }
+    })();
+    return () => { cancelled = true; };
+  }, [rpc, source]);
+
+  return vocab;
+}