furyfist · furyfist · Jul 24, 2026 · Jul 23, 2026 · Jul 23, 2026 · Jul 23, 2026
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,11 @@ dist/
 .pytest_cache/
 .ruff_cache/
 claude.md
+
+# Frontend
+console/node_modules/
+console/dist/
+console/.vite/
+console/coverage/
+console/playwright-report/
+console/test-results/
diff --git a/console/biome.json b/console/biome.json
@@ -0,0 +1,27 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.6.1/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "style": {
+        "useConst": "error"
+      }
+    }
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double",
+      "semicolons": "always"
+    }
+  }
+}
diff --git a/console/e2e/a11y.spec.ts b/console/e2e/a11y.spec.ts
@@ -0,0 +1,20 @@
+import { expect, test } from "@playwright/test";
+import axe from "axe-core";
+
+test.describe("Automated Accessibility Audits (axe-core)", () => {
+  const routes = ["/", "/scopes", "/about"];
+
+  for (const route of routes) {
+    test(`should have zero axe-core violations on ${route}`, async ({ page }) => {
+      await page.goto(route);
+      await page.evaluate(axe.source);
+      const results = await page.evaluate(async () => {
+        return await (window as any).axe.run();
+      });
+
+      // Filter out non-critical issues if necessary or assert clean zero violations
+      const violations = results.violations || [];
+      expect(violations, `Found ${violations.length} accessibility violations on ${route}`).toEqual([]);
+    });
+  }
+});
diff --git a/console/e2e/console.spec.ts b/console/e2e/console.spec.ts
@@ -0,0 +1,22 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Console Screen E2E", () => {
+  test("loads console, displays hero card, and filters feed", async ({ page }) => {
+    await page.goto("/");
+
+    // Assert main header brand
+    await expect(page.getByRole("link", { name: /vitals/i })).toBeVisible();
+
+    // Assert Hero verdict card or empty state
+    const heroCard = page.locator('[aria-label^="Latest verdict card"]');
+    await expect(heroCard).toBeVisible();
+
+    // Filter to CHANGED state
+    const changedChip = page.getByRole("button", { name: /changed/i });
+    if (await changedChip.isVisible()) {
+      await changedChip.click();
+      // Assert URL updated with ?state=changed
+      await expect(page).toHaveURL(/state=changed/);
+    }
+  });
+});
diff --git a/console/e2e/drawer.spec.ts b/console/e2e/drawer.spec.ts
@@ -0,0 +1,35 @@
+import { expect, test } from "@playwright/test";
+
+test.describe("Verdict Drawer E2E & SPA History Fallback", () => {
+  test("opens drawer on row click, updates URL, closes on Esc", async ({ page }) => {
+    await page.goto("/");
+
+    // Click "View full record →" link in hero card
+    const viewRecordLink = page.getByRole("link", { name: /view full record/i });
+    if (await viewRecordLink.isVisible()) {
+      await viewRecordLink.click();
+
+      // Assert URL updated to /v/:id
+      await expect(page).toHaveURL(/\/v\//);
+
+      // Assert drawer dialog is open
+      const drawer = page.getByRole("dialog", { name: /verdict details/i });
+      await expect(drawer).toBeVisible();
+
+      // Press Escape key
+      await page.keyboard.press("Escape");
+
+      // Assert URL returned to /
+      await expect(page).toHaveURL(/\/$|^\/[^v]/);
+    }
+  });
+
+  test("direct deep-link to /v/:verdictId renders drawer (SPA Fallback §0.2)", async ({ page }) => {
+    // Navigate directly to a deep link
+    await page.goto("/v/4f2a91b8e301");
+
+    // Assert console shell renders underneath and drawer opens
+    await expect(page.getByRole("link", { name: /vitals/i })).toBeVisible();
+    await expect(page.getByRole("dialog")).toBeVisible();
+  });
+});
diff --git a/console/index.html b/console/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vitals Console</title>
+    <meta name="description" content="Vitals real-time GenAI model monitor and verdict engine console." />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link
+      rel="preload"
+      href="/fonts/InterVariable.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/fonts/JetBrainsMono-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+    <link
+      rel="preload"
+      href="/fonts/JetBrainsMono-Medium.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin
+    />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>