feat(v7-f56b): UI badge + verify RPC gotcha for dim_env mismatch

cppmega_v4/jsonrpc/methods.py:
- verify RPC now appends a 'v7_f56b_dim_env_mismatch' gotcha
  (severity=warning) whenever dim_env pins all three of (H, nh,
  head_dim) and nh*head_dim ≠ H. Reuses the existing gotcha payload
  channel so the UI GotchasTab renders it without any new plumbing.

vbgui/src/App.tsx:
- New absolutely-positioned banner inside the canvas pane:
  data-testid='symbolic-dim-warn-badge', visible iff the gotcha is
  present in spec.gotchas. Renders a yellow-amber alert with the
  message text (data-testid='symbolic-dim-warn-message'), positioned
  top-right of the canvas so it overlays without obscuring bricks.
- FlowCanvas now sits inside a relative-positioned wrapper to anchor
  the badge; existing flex layout preserved (FlowCanvas keeps flex:1
  inside the wrapper).

Existing App.integration + FlowCanvas vitest pass (10/10).

Ref: cppmega-mlx-j3qa.2

Author: apstenku123

cppmega_v4/jsonrpc/methods.py

@@ -375,6 +375,30 @@ def verify(params: VerifyParams, *, cache: LRUCache | None = None) -> VerifyResu
     gotcha_payloads.extend(
         _side_channel_policy_gotchas(params.side_channels, available)
     )
+    # V7-F56b: surface the symbolic-dim mismatch as a gotcha so the
+    # vbgui GotchasTab + per-brick badge render it without needing
+    # a separate WS channel.
+    de = params.dim_env if isinstance(params.dim_env, dict) else (
+        params.dim_env.model_dump()
+        if hasattr(params.dim_env, "model_dump") else {}
+    )
+    f56b_H = de.get("H")
+    f56b_nh = de.get("nh")
+    f56b_hd = de.get("head_dim")
+    if (f56b_H is not None and f56b_nh is not None and f56b_hd is not None
+            and f56b_nh * f56b_hd != f56b_H):
+        gotcha_payloads.append(GotchaPayload(
+            id="v7_f56b_dim_env_mismatch",
+            severity="warning",
+            message=(
+                f"dim_env.H={f56b_H} but nh*head_dim = "
+                f"{f56b_nh}*{f56b_hd} = {f56b_nh * f56b_hd}. "
+                "Attention still runs via internal Q projection, but "
+                "this almost always means the architect mis-pinned a "
+                "dim_env value."
+            ),
+            reference=None,
+        ))
 
     edge_payloads: list[EdgeResolution] = []
     for re in resolved.edges:

vbgui/src/App.tsx

@@ -626,12 +626,40 @@ export function App(): JSX.Element {
           {activeTab === "canvas" && (
             <>
               <Palette />
-              <FlowCanvas
-                nodes={nodes} edges={edges}
-                onConnect={handleConnect}
-                onDropBrick={handleDropBrick}
-                onNodeClick={setSelectedBrickId}
-              />
+              <div style={{ flex: 1, position: "relative", display: "flex",
+                            minHeight: 0 }}>
+                {spec.gotchas.some(
+                  (g) => g.id === "v7_f56b_dim_env_mismatch") && (
+                  <div
+                    data-testid="symbolic-dim-warn-badge"
+                    role="alert"
+                    style={{
+                      position: "absolute", top: 8, right: 8, zIndex: 5,
+                      background: "#fef3c7", color: "#92400e",
+                      borderLeft: "4px solid #d97706",
+                      borderRadius: 4, padding: "6px 10px",
+                      fontSize: 12, fontFamily: "system-ui, sans-serif",
+                      boxShadow: "0 1px 2px rgba(0,0,0,0.08)",
+                      maxWidth: 320,
+                    }}
+                  >
+                    <strong data-testid="symbolic-dim-warn-title">
+                      ⚠ Symbolic-dim mismatch
+                    </strong>
+                    <div data-testid="symbolic-dim-warn-message"
+                         style={{ marginTop: 2 }}>
+                      {spec.gotchas.find(
+                        (g) => g.id === "v7_f56b_dim_env_mismatch")?.message}
+                    </div>
+                  </div>
+                )}
+                <FlowCanvas
+                  nodes={nodes} edges={edges}
+                  onConnect={handleConnect}
+                  onDropBrick={handleDropBrick}
+                  onNodeClick={setSelectedBrickId}
+                />
+              </div>
               {selectedBrickId && (() => {
                 const selected = nodes.find((n) => n.id === selectedBrickId);
                 if (!selected) return null;