feat(ui): Phase 6 — MCP Console & API Docs redesign

src/main/frontend/package.json

@@ -6,29 +6,39 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test:e2e": "playwright test",
+    "test:e2e:headed": "playwright test --headed",
+    "test:e2e:report": "playwright show-report"
   },
   "dependencies": {
+    "@antv/g6": "^5.1.0",
     "@monaco-editor/react": "^4.7.0",
+    "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-dropdown-menu": "^2.1.6",
     "@radix-ui/react-scroll-area": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
+    "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.1.8",
-    "@types/d3": "^7.4.3",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "d3": "^7.9.0",
     "lucide-react": "^0.474.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-resizable-panels": "^4.8.0",
     "react-router-dom": "^7.1.5",
     "swagger-ui-react": "^5.21.0",
-    "tailwind-merge": "^3.0.2"
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss-animate": "^1.0.7"
   },
   "overrides": {
     "dompurify": "^3.3.3"
   },
   "devDependencies": {
+    "@axe-core/playwright": "^4.10.1",
+    "@playwright/test": "^1.51.1",
+    "@types/node": "^22.0.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@types/swagger-ui-react": "^4.18.3",

src/main/frontend/playwright.config.ts

@@ -0,0 +1,76 @@
+/// <reference types="node" />
+import { defineConfig, devices } from '@playwright/test';
+
+/**
+ * Playwright E2E test configuration for Code IQ UI Redesign (Phase 7).
+ *
+ * Prerequisites:
+ *   - `code-iq serve` running on localhost:8080 (Neo4j graph loaded)
+ *   - Or use `webServer` below to start the Vite dev server pointing at a real backend
+ *
+ * Run all tests:       npm run test:e2e
+ * Run headed:          npm run test:e2e:headed
+ * Show HTML report:    npm run test:e2e:report
+ */
+export default defineConfig({
+  testDir: './tests/e2e',
+  // Use the test-specific tsconfig that includes @types/node
+  tsconfig: './tsconfig.test.json',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [['html', { outputFolder: 'playwright-report' }], ['line']],
+
+  use: {
+    baseURL: process.env.BASE_URL ?? 'http://localhost:8080',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure',
+  },
+
+  // Performance threshold constants (ms) shared via env so specs can read them
+  // Actual assertions live in performance.spec.ts
+  //   PERF_THRESHOLD_100    = 500
+  //   PERF_THRESHOLD_1K     = 2000
+  //   PERF_THRESHOLD_10K    = 3000
+
+  projects: [
+    // P0 — required for release sign-off
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+
+    // P1 — run in CI when available
+    {
+      name: 'edge',
+      use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+
+    // Responsive breakpoints (chromium only — layout logic is shared)
+    {
+      name: 'desktop-1920',
+      use: { ...devices['Desktop Chrome'], viewport: { width: 1920, height: 1080 } },
+      testMatch: '**/responsive.spec.ts',
+    },
+    {
+      name: 'laptop-1440',
+      use: { ...devices['Desktop Chrome'], viewport: { width: 1440, height: 900 } },
+      testMatch: '**/responsive.spec.ts',
+    },
+    {
+      name: 'tablet-768',
+      use: { ...devices['Desktop Chrome'], viewport: { width: 768, height: 1024 } },
+      testMatch: '**/responsive.spec.ts',
+    },
+  ],
+});

src/main/frontend/src/App.tsx

@@ -1,17 +1,23 @@
+import { lazy, Suspense } from 'react';
 import { Routes, Route, Navigate } from 'react-router-dom';
 import Layout from './components/Layout';
 import Dashboard from './components/Dashboard';
-import CodeGraphView from './components/CodeGraphView';
 import ExplorerView from './components/ExplorerView';
 import McpConsole from './components/McpConsole';
 import SwaggerView from './components/SwaggerView';
 
+const CodeGraphView = lazy(() => import('./components/CodeGraphView'));
+
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<Dashboard />} />
-        <Route path="/graph" element={<CodeGraphView />} />
+        <Route path="/graph" element={
+          <Suspense fallback={<div className="flex items-center justify-center h-full text-muted-foreground">Loading graph…</div>}>
+            <CodeGraphView />
+          </Suspense>
+        } />
         <Route path="/explorer" element={<ExplorerView />} />
         <Route path="/explorer/:kind" element={<ExplorerView />} />
         <Route path="/console" element={<McpConsole />} />