feat(v3-8+v3-9): Train button gated on gotcha severity=error

Closes V3-8 / cppmega-mlx-cwz and V3-9 / cppmega-mlx-7ut. Combined
because both reduce to "disable Train when any gotcha is severity=error":

- V3-8 case: check_gotchas stage returns severity='error' (critical
  config issue). Examples: loss kind incompatible with brick output.
- V3-9 case: verify_build_spec rejects spec; verify RPC surfaces the
  rejection as a severity='error' gotcha in r.gotchas.

App.tsx computes trainDisabled prop from spec.gotchas; TopBar renders
the Train button as disabled with title + visible reason child element
(data-testid=top-bar-train-disabled-reason).

3 new e2e scenarios in 15_gating.spec.ts use page.route() to inject
synthetic error-severity gotchas into the verify response — Playwright
asserts toBeDisabled() + reason text. Negative control verifies Train
stays enabled with no error gotchas.

3/3 green, 8/8 TopBar vitest unchanged.

Author: apstenku123

vbgui/e2e/scenarios/15_gating.spec.ts

@@ -0,0 +1,91 @@
+// V3-8 + V3-9: Train button gating.
+//
+// Train must be disabled when verify or check_gotchas produces a
+// severity='error' gotcha. We exercise this by intercepting the
+// /rpc verify response and injecting a synthetic error gotcha. The
+// UI's gating logic (App.tsx → TopBar.trainDisabled) must surface
+// the reason via data-testid='top-bar-train-disabled-reason'.
+
+import { test, expect } from "@playwright/test";
+import { gotoApp, selectPreset } from "../fixtures";
+
+async function injectVerifyGotcha(
+  page: import("@playwright/test").Page,
+  gotcha: { id: string; severity: "info" | "warning" | "error";
+            message: string },
+): Promise<void> {
+  await page.route("**/rpc", async (route, request) => {
+    const body = JSON.parse(request.postData() ?? "{}");
+    if (body.method !== "verify") {
+      await route.continue();
+      return;
+    }
+    const upstream = await page.request.fetch(request);
+    const json = await upstream.json();
+    json.result.gotchas = [...(json.result.gotchas ?? []), gotcha];
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(json),
+    });
+  });
+}
+
+// ---------------------------------------------------------------------------
+// V3-8: critical gotcha (check_gotchas) disables Train
+// ---------------------------------------------------------------------------
+
+test("V3-8: critical gotcha disables Train + surfaces reason", async ({
+  page,
+}) => {
+  await injectVerifyGotcha(page, {
+    id: "fake_critical",
+    severity: "error",
+    message: "synthetic critical: incompatible loss for brick",
+  });
+  await gotoApp(page);
+  await selectPreset(page, "llama3_8b");
+
+  // Wait for verify to complete; the gotcha route fires per verify.
+  await page.waitForTimeout(500);
+  await page.getByTestId("run-pipeline-toggle").click();
+  const trainBtn = page.getByTestId("run-pipeline-train");
+  await expect(trainBtn).toBeDisabled();
+  await expect(page.getByTestId("top-bar-train-disabled-reason"))
+    .toContainText("synthetic critical");
+});
+
+// ---------------------------------------------------------------------------
+// V3-9: verify=error severity gotcha disables Train
+// ---------------------------------------------------------------------------
+
+test("V3-9: verify error severity disables Train", async ({ page }) => {
+  await injectVerifyGotcha(page, {
+    id: "fake_verify_error",
+    severity: "error",
+    message: "synthetic verify error: parallel-block requires pre_norm",
+  });
+  await gotoApp(page);
+  await selectPreset(page, "llama3_8b");
+
+  await page.waitForTimeout(500);
+  await page.getByTestId("run-pipeline-toggle").click();
+  await expect(page.getByTestId("run-pipeline-train")).toBeDisabled();
+  await expect(page.getByTestId("top-bar-train-disabled-reason"))
+    .toContainText("parallel-block requires pre_norm");
+});
+
+// ---------------------------------------------------------------------------
+// Negative control: no error gotcha → Train remains enabled
+// ---------------------------------------------------------------------------
+
+test("Train stays enabled when no error-severity gotchas present",
+  async ({ page }) => {
+    await gotoApp(page);
+    await selectPreset(page, "llama3_8b");
+    await page.waitForTimeout(500);
+    await page.getByTestId("run-pipeline-toggle").click();
+    await expect(page.getByTestId("run-pipeline-train")).toBeEnabled();
+    await expect(page.getByTestId("top-bar-train-disabled-reason"))
+      .toHaveCount(0);
+  });

vbgui/src/App.tsx

@@ -317,6 +317,19 @@ export function App(): JSX.Element {
           onCompileModeChange={(m) => dispatch({ type: "sharding.set",
             sharding: { ...spec.sharding, compile_mode: m } })}
           onRunPipeline={handleRunPipeline}
+          trainDisabled={
+            (() => {
+              // V3-8/V3-9: gate Train on gotcha severity. The verify RPC
+              // returns gotchas with severity "error" for both validator
+              // failures (verify=error, V3-9) and check_gotchas critical
+              // findings (V3-8). Surfacing them via the disabled-reason
+              // attribute lets Playwright assert on the exact gating cause.
+              const errs = spec.gotchas.filter(g => g.severity === "error");
+              if (errs.length === 0) return null;
+              return { reason: `${errs.length} critical issue${
+                errs.length > 1 ? "s" : ""}: ${errs[0].message}` };
+            })()
+          }
         />
         <AppTabs active={activeTab} onChange={setActiveTab} />
         <div style={{ flex: 1, display: "flex", minHeight: 0 }}>

vbgui/src/components/TopBar.tsx

@@ -14,6 +14,9 @@ export interface TopBarProps {
   onTopologyChange: (t: TopologyFactory) => void;
   onCompileModeChange: (m: SpecState["sharding"]["compile_mode"]) => void;
   onRunPipeline: (mode: RunMode, opts?: { num_steps?: number }) => void;
+  /** V3-8/V3-9: when present, Train button is rendered disabled with
+   *  reason exposed via data-testid='top-bar-train-disabled-reason'. */
+  trainDisabled?: { reason: string } | null;
 }
 
 export function TopBar(p: TopBarProps): JSX.Element {
@@ -88,7 +91,21 @@ export function TopBar(p: TopBarProps): JSX.Element {
                     onClick={() => { setOpen(false);
                                      p.onRunPipeline("train",
                                        { num_steps: trainNumSteps }); }}
-                    style={menuItem}>Train</button>
+                    disabled={!!p.trainDisabled}
+                    title={p.trainDisabled?.reason ?? ""}
+                    style={{ ...menuItem,
+                             opacity: p.trainDisabled ? 0.5 : 1,
+                             cursor: p.trainDisabled ? "not-allowed"
+                                                     : "pointer" }}>
+              Train
+              {p.trainDisabled && (
+                <span data-testid="top-bar-train-disabled-reason"
+                      style={{ display: "block", fontSize: 10,
+                               color: "#dc2626" }}>
+                  {p.trainDisabled.reason}
+                </span>
+              )}
+            </button>
           </div>
         )}
       </div>