jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/RealTimeTestsWrapper.tsx

@@ -1,9 +1,13 @@
-'use client';
 
 import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { useWebSocket, type WebSocketMessage } from '../hooks/useWebSocket';
-import { useClaudeSession } from '../contexts/ClaudeSessionContext';
-import type { TestDashboardData, TestFeature } from '@/lib/tests';
+import { useSessionActions } from '../contexts/ClaudeSessionContext';
+import type { TestDashboardData, TestFeature } from '@/lib/db';
+import { Input } from '@/components/ui/Input';
+import { Button } from '@/components/ui/Button';
+import { dataBridge } from '@/lib/data-bridge';
+import { invoke, listen } from '@/lib/tauri';
+import { getWebSocketUrl } from '@/lib/utils';
 
 interface RealTimeTestsWrapperProps {
   initialData: TestDashboardData;
@@ -41,7 +45,6 @@ type StepStatus = 'pending' | 'running' | 'passed' | 'failed';
 export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps) {
   const [data, setData] = useState<TestDashboardData>(initialData);
   const [selectedFeatureId, setSelectedFeatureId] = useState<string | null>(() => {
-    if (typeof window === 'undefined') return null;
     return localStorage.getItem(SELECTED_FEATURE_KEY);
   });
   const [searchText, setSearchText] = useState('');
@@ -53,27 +56,35 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
   const [elapsedDisplay, setElapsedDisplay] = useState<Record<string, number>>({});
 
   const elapsedStartRef = useRef<Record<string, number>>({});
+  const activeProcessesRef = useRef<Set<number>>(new Set());
+  const unlistenersRef = useRef<(() => void)[]>([]);
   const allFeaturesRef = useRef<TestFeature[]>([]);
-  const { createFixScenarioSession } = useClaudeSession();
+  const projectRootRef = useRef<string | null>(null);
+  const { createFixScenarioSession } = useSessionActions();
 
-  const refreshUndefinedSteps = useCallback(() => {
-    fetch('/api/tests/undefined')
-      .then(res => res.json())
-      .then(setUndefinedStepsMap)
-      .catch(() => {});
+  // Get project root on mount (needed for spawn_process cwd)
+  useEffect(() => {
+    dataBridge.getProjectRoot().then(root => {
+      projectRootRef.current = root;
+    });
   }, []);
 
-  // Fetch undefined steps asynchronously (slow operation, don't block page load)
+  // Kill active test processes and remove event listeners on unmount
   useEffect(() => {
-    refreshUndefinedSteps();
-  }, [refreshUndefinedSteps]);
+    return () => {
+      for (const pid of activeProcessesRef.current) {
+        invoke('kill_process', { pid }).catch(() => {});
+      }
+      activeProcessesRef.current.clear();
+      for (const unlisten of unlistenersRef.current) unlisten();
+      unlistenersRef.current = [];
+    };
+  }, []);
 
   const refreshData = useCallback(async () => {
-    const response = await fetch('/api/tests');
-    const newData = await response.json();
+    const newData = await dataBridge.getTestDashboardData();
     setData(newData);
-    refreshUndefinedSteps();
-  }, [refreshUndefinedSteps]);
+  }, []);
 
   const handleMessage = useCallback(async (message: WebSocketMessage) => {
     if (message.type === 'test_change') {
@@ -81,8 +92,10 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
     }
   }, [refreshData]);
 
-  // Elapsed timer tick
+  // Elapsed timer tick — only runs when scenarios are actively running
+  const hasRunning = runningScenarios.size > 0;
   useEffect(() => {
+    if (!hasRunning) return;
     const interval = setInterval(() => {
       const starts = elapsedStartRef.current;
       if (Object.keys(starts).length === 0) return;
@@ -94,7 +107,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
       );
     }, 1000);
     return () => clearInterval(interval);
-  }, []);
+  }, [hasRunning]);
 
   const runScenario = useCallback(async (featureFile: string, scenarioTitle: string) => {
     const key = `${featureFile}::${scenarioTitle}`;
@@ -114,155 +127,250 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
     elapsedStartRef.current = { ...elapsedStartRef.current, [key]: Date.now() };
     setElapsedDisplay(prev => ({ ...prev, [key]: 0 }));
 
-    return new Promise<void>((resolve) => {
-      const params = new URLSearchParams({ featureFile, scenarioTitle });
-      const eventSource = new EventSource(`/api/tests/run/stream?${params}`);
-
-      const steps = scenario?.steps || [];
-
-      eventSource.addEventListener('step_start', (e: MessageEvent) => {
-        const eventData = JSON.parse(e.data);
-        const stepIndex = steps.findIndex(s => stripKeyword(s) === eventData.step);
-        if (stepIndex >= 0) {
-          setStepProgress(prev => {
-            const arr = [...(prev[key] || [])];
-            arr[stepIndex] = 'running';
-            return { ...prev, [key]: arr };
-          });
+    const steps = scenario?.steps || [];
+
+    // Cucumber NDJSON message parsing state
+    const pickleSteps = new Map<string, { text: string }>();
+    const testCaseSteps = new Map<string, { id: string; pickleStepId?: string }[]>();
+    let activeTestCaseId: string | null = null;
+    let outputBuffer = '';
+
+    function resolveStepText(testStepId: string): string | null {
+      if (!activeTestCaseId) return null;
+      const tcSteps = testCaseSteps.get(activeTestCaseId);
+      if (!tcSteps) return null;
+      const testStep = tcSteps.find(s => s.id === testStepId);
+      if (!testStep?.pickleStepId) return null;
+      const ps = pickleSteps.get(testStep.pickleStepId);
+      return ps ? ps.text : null;
+    }
+
+    function processLine(line: string) {
+      const trimmed = line.trim();
+      if (!trimmed || !trimmed.startsWith('{')) return;
+      let msg: Record<string, any>;
+      try { msg = JSON.parse(trimmed); } catch { return; }
+
+      if (msg.pickle) {
+        for (const s of msg.pickle.steps) pickleSteps.set(s.id, s);
+      }
+      if (msg.testCase) {
+        testCaseSteps.set(msg.testCase.id, msg.testCase.testSteps);
+      }
+      if (msg.testCaseStarted) {
+        activeTestCaseId = msg.testCaseStarted.testCaseId;
+      }
+      if (msg.testStepStarted) {
+        const stepText = resolveStepText(msg.testStepStarted.testStepId);
+        if (stepText) {
+          const stepIndex = steps.findIndex(s => stripKeyword(s) === stepText);
+          if (stepIndex >= 0) {
+            setStepProgress(prev => {
+              const arr = [...(prev[key] || [])];
+              arr[stepIndex] = 'running';
+              return { ...prev, [key]: arr };
+            });
+          }
         }
-      });
-
-      eventSource.addEventListener('step_end', (e: MessageEvent) => {
-        const eventData = JSON.parse(e.data);
-        const stepIndex = steps.findIndex(s => stripKeyword(s) === eventData.step);
-        if (stepIndex >= 0) {
-          setStepProgress(prev => {
-            const arr = [...(prev[key] || [])];
-            arr[stepIndex] = eventData.result === 'passed' ? 'passed' : 'failed';
-            return { ...prev, [key]: arr };
-          });
+      }
+      if (msg.testStepFinished) {
+        const stepText = resolveStepText(msg.testStepFinished.testStepId);
+        if (stepText) {
+          const status = msg.testStepFinished.testStepResult.status.toLowerCase();
+          const stepIndex = steps.findIndex(s => stripKeyword(s) === stepText);
+          if (stepIndex >= 0) {
+            setStepProgress(prev => {
+              const arr = [...(prev[key] || [])];
+              arr[stepIndex] = status === 'passed' ? 'passed' : 'failed';
+              return { ...prev, [key]: arr };
+            });
+          }
         }
-      });
+      }
+    }
 
+    return new Promise<void>(async (resolve) => {
       function cleanup() {
-        eventSource.close();
-        // Stop timer
         const { [key]: _, ...restStarts } = elapsedStartRef.current;
         elapsedStartRef.current = restStarts;
-        setElapsedDisplay(prev => {
-          const { [key]: _, ...rest } = prev;
-          return rest;
-        });
-        // Clear step progress
-        setStepProgress(prev => {
-          const { [key]: _, ...rest } = prev;
-          return rest;
-        });
-        setRunningScenarios(prev => {
-          const next = new Set(prev);
-          next.delete(key);
-          return next;
-        });
+        setElapsedDisplay(prev => { const { [key]: _, ...rest } = prev; return rest; });
+        setStepProgress(prev => { const { [key]: _, ...rest } = prev; return rest; });
+        setRunningScenarios(prev => { const next = new Set(prev); next.delete(key); return next; });
       }
 
-      eventSource.addEventListener('test_complete', async () => {
-        cleanup();
-        await refreshData();
-        resolve();
-      });
-
-      eventSource.onerror = async () => {
+      try {
+        const escapedTitle = scenarioTitle.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+        const resultsPath = projectRootRef.current
+          ? `${projectRootRef.current}/cucumber-results.json`
+          : 'cucumber-results.json';
+
+        // Spawn cucumber-js first, then set up listeners
+        const pid = await invoke<number>('spawn_process', {
+          command: 'npx',
+          args: [
+            'cucumber-js', featureFile,
+            '--name', `^${escapedTitle}$`,
+            '--format', 'message',
+            '--format', `json:${resultsPath}`,
+          ],
+          label: 'test-runner',
+          kind: null,
+          cwd: projectRootRef.current,
+          env: null,
+        });
+        activeProcessesRef.current.add(pid);
+
+        // Listen for stdout lines to parse NDJSON
+        const outputUnlisten = await listen<{ pid: number; lines: string[] }>(
+          'process-output-batch',
+          (event) => {
+            if (event.payload.pid !== pid) return;
+            for (const line of event.payload.lines) {
+              outputBuffer += line + '\n';
+              const bufLines = outputBuffer.split('\n');
+              outputBuffer = bufLines.pop() || '';
+              for (const l of bufLines) processLine(l);
+            }
+          },
+        );
+        unlistenersRef.current.push(outputUnlisten);
+
+        // Listen for process exit
+        const exitUnlisten = await listen<{ pid: number; code: number | null }>(
+          'process-exit',
+          async (event) => {
+            if (event.payload.pid !== pid) return;
+            activeProcessesRef.current.delete(pid);
+            // Process remaining buffer
+            if (outputBuffer.trim()) processLine(outputBuffer);
+            // Ingest results into SQLite and refresh
+            try { await dataBridge.ingestTestResults(); } catch { /* best effort */ }
+            cleanup();
+            await refreshData();
+            resolve();
+          },
+        );
+        unlistenersRef.current.push(exitUnlisten);
+      } catch {
         cleanup();
         await refreshData();
         resolve();
-      };
+      }
     });
   }, [refreshData]);
 
   const runAllScenarios = useCallback(async (feature: TestFeature) => {
     setRunningAll(true);
 
-    return new Promise<void>((resolve) => {
-      const params = new URLSearchParams({ featureFile: feature.featureFile });
-      const eventSource = new EventSource(`/api/tests/run/stream?${params}`);
-
-      // Track which scenario is currently active
-      let activeScenarioKey: string | null = null;
-
-      eventSource.addEventListener('scenario_start', (e: MessageEvent) => {
-        const { scenario } = JSON.parse(e.data);
-        const key = `${feature.featureFile}::${scenario}`;
-        activeScenarioKey = key;
-
-        // Find matching scenario for step count
-        const matchedScenario = feature.scenarios.find(s => s.title === scenario);
-        setRunningScenarios(prev => new Set(prev).add(key));
-        if (matchedScenario?.steps?.length) {
-          setStepProgress(prev => ({
-            ...prev,
-            [key]: matchedScenario.steps.map(() => 'pending' as StepStatus),
-          }));
+    // Cucumber NDJSON message parsing state
+    const pickleSteps = new Map<string, { text: string }>();
+    const pickleNames = new Map<string, string>();
+    const testCaseSteps = new Map<string, { id: string; pickleStepId?: string }[]>();
+    const testCasePickleIds = new Map<string, string>();
+    const testCaseStartedIds = new Map<string, string>();
+    let activeTestCaseId: string | null = null;
+    let outputBuffer = '';
+
+    function getScenarioName(testCaseId: string): string | null {
+      const pickleId = testCasePickleIds.get(testCaseId);
+      return pickleId ? pickleNames.get(pickleId) ?? null : null;
+    }
+
+    function resolveStepText(testStepId: string): string | null {
+      if (!activeTestCaseId) return null;
+      const tcSteps = testCaseSteps.get(activeTestCaseId);
+      if (!tcSteps) return null;
+      const testStep = tcSteps.find(s => s.id === testStepId);
+      if (!testStep?.pickleStepId) return null;
+      const ps = pickleSteps.get(testStep.pickleStepId);
+      return ps ? ps.text : null;
+    }
+
+    function processLine(line: string) {
+      const trimmed = line.trim();
+      if (!trimmed || !trimmed.startsWith('{')) return;
+      let msg: Record<string, any>;
+      try { msg = JSON.parse(trimmed); } catch { return; }
+
+      if (msg.pickle) {
+        pickleNames.set(msg.pickle.id, msg.pickle.name);
+        for (const s of msg.pickle.steps) pickleSteps.set(s.id, s);
+      }
+      if (msg.testCase) {
+        testCaseSteps.set(msg.testCase.id, msg.testCase.testSteps);
+        testCasePickleIds.set(msg.testCase.id, msg.testCase.pickleId);
+      }
+      if (msg.testCaseStarted) {
+        const tcs = msg.testCaseStarted;
+        activeTestCaseId = tcs.testCaseId;
+        testCaseStartedIds.set(tcs.id, tcs.testCaseId);
+        const scenario = getScenarioName(tcs.testCaseId);
+        if (scenario) {
+          const key = `${feature.featureFile}::${scenario}`;
+          const matchedScenario = feature.scenarios.find(s => s.title === scenario);
+          setRunningScenarios(prev => new Set(prev).add(key));
+          if (matchedScenario?.steps?.length) {
+            setStepProgress(prev => ({
+              ...prev,
+              [key]: matchedScenario.steps.map(() => 'pending' as StepStatus),
+            }));
+          }
+          elapsedStartRef.current = { ...elapsedStartRef.current, [key]: Date.now() };
+          setElapsedDisplay(prev => ({ ...prev, [key]: 0 }));
         }
-        elapsedStartRef.current = { ...elapsedStartRef.current, [key]: Date.now() };
-        setElapsedDisplay(prev => ({ ...prev, [key]: 0 }));
-      });
-
-      eventSource.addEventListener('step_start', (e: MessageEvent) => {
-        const eventData = JSON.parse(e.data);
-        const key = eventData.scenario ? `${feature.featureFile}::${eventData.scenario}` : activeScenarioKey;
-        if (!key) return;
-        const matchedScenario = feature.scenarios.find(s => s.title === (eventData.scenario || activeScenarioKey?.split('::')[1]));
-        const steps = matchedScenario?.steps || [];
-        const stepIndex = steps.findIndex(s => stripKeyword(s) === eventData.step);
-        if (stepIndex >= 0) {
-          setStepProgress(prev => {
-            const arr = [...(prev[key] || [])];
-            arr[stepIndex] = 'running';
-            return { ...prev, [key]: arr };
-          });
+      }
+      if (msg.testStepStarted) {
+        const stepText = resolveStepText(msg.testStepStarted.testStepId);
+        const scenario = activeTestCaseId ? getScenarioName(activeTestCaseId) : null;
+        if (stepText && scenario) {
+          const key = `${feature.featureFile}::${scenario}`;
+          const matchedScenario = feature.scenarios.find(s => s.title === scenario);
+          const steps = matchedScenario?.steps || [];
+          const stepIndex = steps.findIndex(s => stripKeyword(s) === stepText);
+          if (stepIndex >= 0) {
+            setStepProgress(prev => {
+              const arr = [...(prev[key] || [])];
+              arr[stepIndex] = 'running';
+              return { ...prev, [key]: arr };
+            });
+          }
         }
-      });
-
-      eventSource.addEventListener('step_end', (e: MessageEvent) => {
-        const eventData = JSON.parse(e.data);
-        const key = eventData.scenario ? `${feature.featureFile}::${eventData.scenario}` : activeScenarioKey;
-        if (!key) return;
-        const matchedScenario = feature.scenarios.find(s => s.title === (eventData.scenario || activeScenarioKey?.split('::')[1]));
-        const steps = matchedScenario?.steps || [];
-        const stepIndex = steps.findIndex(s => stripKeyword(s) === eventData.step);
-        if (stepIndex >= 0) {
-          setStepProgress(prev => {
-            const arr = [...(prev[key] || [])];
-            arr[stepIndex] = eventData.result === 'passed' ? 'passed' : 'failed';
-            return { ...prev, [key]: arr };
-          });
+      }
+      if (msg.testStepFinished) {
+        const stepText = resolveStepText(msg.testStepFinished.testStepId);
+        const scenario = activeTestCaseId ? getScenarioName(activeTestCaseId) : null;
+        if (stepText && scenario) {
+          const key = `${feature.featureFile}::${scenario}`;
+          const status = msg.testStepFinished.testStepResult.status.toLowerCase();
+          const matchedScenario = feature.scenarios.find(s => s.title === scenario);
+          const steps = matchedScenario?.steps || [];
+          const stepIndex = steps.findIndex(s => stripKeyword(s) === stepText);
+          if (stepIndex >= 0) {
+            setStepProgress(prev => {
+              const arr = [...(prev[key] || [])];
+              arr[stepIndex] = status === 'passed' ? 'passed' : 'failed';
+              return { ...prev, [key]: arr };
+            });
+          }
         }
-      });
-
-      eventSource.addEventListener('scenario_end', (e: MessageEvent) => {
-        const { scenario } = JSON.parse(e.data);
-        const key = `${feature.featureFile}::${scenario}`;
-        // Stop timer and clean up for this scenario
-        const { [key]: _, ...restStarts } = elapsedStartRef.current;
-        elapsedStartRef.current = restStarts;
-        setElapsedDisplay(prev => {
-          const { [key]: _, ...rest } = prev;
-          return rest;
-        });
-        setStepProgress(prev => {
-          const { [key]: _, ...rest } = prev;
-          return rest;
-        });
-        setRunningScenarios(prev => {
-          const next = new Set(prev);
-          next.delete(key);
-          return next;
-        });
-      });
+      }
+      if (msg.testCaseFinished) {
+        const tcf = msg.testCaseFinished;
+        const testCaseId = testCaseStartedIds.get(tcf.testCaseStartedId);
+        const scenario = testCaseId ? getScenarioName(testCaseId) : null;
+        if (scenario) {
+          const key = `${feature.featureFile}::${scenario}`;
+          const { [key]: _, ...restStarts } = elapsedStartRef.current;
+          elapsedStartRef.current = restStarts;
+          setElapsedDisplay(prev => { const { [key]: _, ...rest } = prev; return rest; });
+          setStepProgress(prev => { const { [key]: _, ...rest } = prev; return rest; });
+          setRunningScenarios(prev => { const next = new Set(prev); next.delete(key); return next; });
+        }
+      }
+    }
 
+    return new Promise<void>(async (resolve) => {
       function cleanup() {
-        eventSource.close();
-        // Clean up any remaining scenario state
         for (const scenario of feature.scenarios) {
           const key = `${feature.featureFile}::${scenario.title}`;
           const { [key]: _, ...restStarts } = elapsedStartRef.current;
@@ -274,26 +382,63 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
         setRunningAll(false);
       }
 
-      eventSource.addEventListener('test_complete', async () => {
-        cleanup();
-        await refreshData();
-        resolve();
-      });
-
-      eventSource.onerror = async () => {
+      try {
+        const resultsPath = projectRootRef.current
+          ? `${projectRootRef.current}/cucumber-results.json`
+          : 'cucumber-results.json';
+
+        // Spawn cucumber-js first, then set up listeners
+        const pid = await invoke<number>('spawn_process', {
+          command: 'npx',
+          args: [
+            'cucumber-js', feature.featureFile,
+            '--format', 'message',
+            '--format', `json:${resultsPath}`,
+          ],
+          label: 'test-runner',
+          kind: null,
+          cwd: projectRootRef.current,
+          env: null,
+        });
+        activeProcessesRef.current.add(pid);
+
+        const outputUnlisten = await listen<{ pid: number; lines: string[] }>(
+          'process-output-batch',
+          (event) => {
+            if (event.payload.pid !== pid) return;
+            for (const line of event.payload.lines) {
+              outputBuffer += line + '\n';
+              const bufLines = outputBuffer.split('\n');
+              outputBuffer = bufLines.pop() || '';
+              for (const l of bufLines) processLine(l);
+            }
+          },
+        );
+        unlistenersRef.current.push(outputUnlisten);
+
+        const exitUnlisten = await listen<{ pid: number; code: number | null }>(
+          'process-exit',
+          async (event) => {
+            if (event.payload.pid !== pid) return;
+            activeProcessesRef.current.delete(pid);
+            if (outputBuffer.trim()) processLine(outputBuffer);
+            try { await dataBridge.ingestTestResults(); } catch { /* best effort */ }
+            cleanup();
+            await refreshData();
+            resolve();
+          },
+        );
+        unlistenersRef.current.push(exitUnlisten);
+      } catch {
         cleanup();
         await refreshData();
         resolve();
-      };
+      }
     });
   }, [refreshData]);
 
-  const wsUrl = typeof window !== 'undefined'
-    ? `ws://${window.location.hostname}:8080`
-    : 'ws://localhost:8080';
-
   useWebSocket({
-    url: wsUrl,
+    url: getWebSocketUrl(),
     onMessage: handleMessage,
   });
 
@@ -348,43 +493,43 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
       <div className="flex-shrink-0 px-6 py-4 border-b border-zinc-200">
         <div className="flex gap-4">
           <div className="flex items-center gap-2 px-4 py-2 bg-zinc-100 rounded-lg">
-            <span className="text-sm text-zinc-500">Total</span>
+            <span className="text-base text-zinc-500">Total</span>
             <span className="font-mono font-semibold text-zinc-900">
               {data.summary.total}
             </span>
           </div>
           <button
             onClick={() => setStatusFilter(statusFilter === 'pass' ? null : 'pass')}
-            className={`flex items-center gap-2 px-4 py-2 bg-green-50 rounded-lg cursor-pointer transition-all ${
+            className={`flex items-center gap-2 px-4 py-2 bg-green-50 rounded-lg cursor-pointer transition-[color,background-color] duration-200 ease-out ${
               statusFilter === 'pass' ? 'ring-2 ring-green-500' : 'hover:bg-green-100'
             }`}
             data-testid="status-badge-passing"
           >
-            <span className="text-sm text-green-600">Passing</span>
+            <span className="text-base text-green-600">Passing</span>
             <span className="font-mono font-semibold text-green-700">
               {data.summary.passing}
             </span>
           </button>
           <button
             onClick={() => setStatusFilter(statusFilter === 'fail' ? null : 'fail')}
-            className={`flex items-center gap-2 px-4 py-2 bg-red-50 rounded-lg cursor-pointer transition-all ${
+            className={`flex items-center gap-2 px-4 py-2 bg-red-50 rounded-lg cursor-pointer transition-[color,background-color] duration-200 ease-out ${
               statusFilter === 'fail' ? 'ring-2 ring-red-500' : 'hover:bg-red-100'
             }`}
             data-testid="status-badge-failing"
           >
-            <span className="text-sm text-red-600">Failing</span>
+            <span className="text-base text-red-600">Failing</span>
             <span className="font-mono font-semibold text-red-700">
               {data.summary.failing}
             </span>
           </button>
           <button
             onClick={() => setStatusFilter(statusFilter === 'pending' ? null : 'pending')}
-            className={`flex items-center gap-2 px-4 py-2 bg-amber-50 rounded-lg cursor-pointer transition-all ${
+            className={`flex items-center gap-2 px-4 py-2 bg-amber-50 rounded-lg cursor-pointer transition-[color,background-color] duration-200 ease-out ${
               statusFilter === 'pending' ? 'ring-2 ring-amber-500' : 'hover:bg-amber-100'
             }`}
             data-testid="status-badge-pending"
           >
-            <span className="text-sm text-amber-600">Pending</span>
+            <span className="text-base text-amber-600">Pending</span>
             <span className="font-mono font-semibold text-amber-700">
               {data.summary.pending}
             </span>
@@ -392,7 +537,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
           {statusFilter && (
             <button
               onClick={() => setStatusFilter(null)}
-              className="flex items-center gap-1 px-3 py-2 text-sm text-zinc-500 hover:text-zinc-700 rounded-lg hover:bg-zinc-100 transition-colors"
+              className="flex items-center gap-1 px-3 py-2 text-base text-zinc-500 hover:text-zinc-700 rounded-lg hover:bg-zinc-100 transition-colors duration-200 ease-out"
               data-testid="clear-status-filter"
             >
               <svg width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
@@ -402,7 +547,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
             </button>
           )}
           {data.summary.lastRun && (
-            <div className="flex items-center gap-2 px-4 py-2 text-sm text-zinc-500">
+            <div className="flex items-center gap-2 px-4 py-2 text-base text-zinc-500">
               Last run: {parseUtcDate(data.summary.lastRun).toLocaleString()}
             </div>
           )}
@@ -414,13 +559,13 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
         {/* Left Sidebar - Feature List */}
         <div className="w-80 flex-shrink-0 border-r border-zinc-200 flex flex-col overflow-hidden">
           {/* Search */}
-          <div className="p-3 border-b border-zinc-200">
-            <input
+          <div className="p-4 border-b border-zinc-200">
+            <Input
               type="text"
               placeholder="Search features..."
               value={searchText}
               onChange={(e) => setSearchText(e.target.value)}
-              className="w-full px-3 py-2 text-sm border border-zinc-200 rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-zinc-300 focus:border-transparent placeholder:text-zinc-400"
+              size="sm"
             />
           </div>
 
@@ -430,17 +575,17 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
               <div className="flex flex-col items-center justify-center h-full px-6 text-center">
                 {statusFilter && searchText ? (
                   <>
-                    <span className="text-zinc-400 text-sm">No {statusFilter === 'pass' ? 'passing' : statusFilter === 'fail' ? 'failing' : 'pending'} features matching &ldquo;{searchText}&rdquo;</span>
+                    <span className="text-zinc-400 text-base">No {statusFilter === 'pass' ? 'passing' : statusFilter === 'fail' ? 'failing' : 'pending'} features matching &ldquo;{searchText}&rdquo;</span>
                     <div className="flex gap-2 mt-2">
                       <button
                         onClick={() => setStatusFilter(null)}
-                        className="text-xs text-zinc-500 hover:text-zinc-700 underline"
+                        className="text-base text-zinc-500 hover:text-zinc-700 underline"
                       >
                         Clear filter
                       </button>
                       <button
                         onClick={() => setSearchText('')}
-                        className="text-xs text-zinc-500 hover:text-zinc-700 underline"
+                        className="text-base text-zinc-500 hover:text-zinc-700 underline"
                       >
                         Clear search
                       </button>
@@ -448,28 +593,28 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                   </>
                 ) : statusFilter ? (
                   <>
-                    <span className="text-zinc-400 text-sm">No {statusFilter === 'pass' ? 'passing' : statusFilter === 'fail' ? 'failing' : 'pending'} features</span>
+                    <span className="text-zinc-400 text-base">No {statusFilter === 'pass' ? 'passing' : statusFilter === 'fail' ? 'failing' : 'pending'} features</span>
                     <button
                       onClick={() => setStatusFilter(null)}
-                      className="mt-2 text-xs text-zinc-500 hover:text-zinc-700 underline"
+                      className="mt-2 text-base text-zinc-500 hover:text-zinc-700 underline"
                     >
                       Clear filter
                     </button>
                   </>
                 ) : searchText ? (
                   <>
-                    <span className="text-zinc-400 text-sm">No results for &ldquo;{searchText}&rdquo;</span>
+                    <span className="text-zinc-400 text-base">No results for &ldquo;{searchText}&rdquo;</span>
                     <button
                       onClick={() => setSearchText('')}
-                      className="mt-2 text-xs text-zinc-500 hover:text-zinc-700 underline"
+                      className="mt-2 text-base text-zinc-500 hover:text-zinc-700 underline"
                     >
                       Clear search
                     </button>
                   </>
                 ) : (
                   <>
-                    <span className="text-zinc-400 text-sm">No features found</span>
-                    <span className="text-zinc-300 text-xs mt-1">Add .feature files to get started</span>
+                    <span className="text-zinc-400 text-base">No features found</span>
+                    <span className="text-zinc-300 text-base mt-1">Add .feature files to get started</span>
                   </>
                 )}
               </div>
@@ -484,21 +629,21 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                 <button
                   key={feature.id}
                   onClick={() => setSelectedFeatureId(feature.id)}
-                  className={`w-full text-left px-4 py-3 border-b border-zinc-100 hover:bg-zinc-50 transition-colors ${
+                  className={`w-full text-left px-4 py-3 border-b border-zinc-100 hover:bg-zinc-50 transition-colors duration-200 ease-out ${
                     isSelected ? 'bg-zinc-100 border-l-2 border-l-zinc-900' : ''
                   }`}
                 >
-                  <div className="flex items-center justify-between gap-2">
-                    <span className={`text-sm font-medium truncate ${
+                  <div className="flex items-center justify-between gap-3">
+                    <span className={`text-base font-medium truncate ${
                       status === 'fail' ? 'text-red-700' : 'text-zinc-900'
                     }`}>
                       {feature.title}
                     </span>
-                    <span className={`flex-shrink-0 text-xs font-mono px-2 py-0.5 rounded-full ${statusColors[status]}`}>
+                    <span className={`flex-shrink-0 text-xs font-mono px-2.5 py-1 rounded-full ${statusColors[status]}`}>
                       {passingCount}/{totalCount}
                     </span>
                   </div>
-                  <div className="text-xs text-zinc-400 mt-0.5 truncate">
+                  <div className="text-base text-zinc-400 mt-0.5 truncate">
                     {feature.featureFile}
                   </div>
                 </button>
@@ -510,42 +655,33 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
         {/* Right Panel - Detail */}
         <div className="flex-1 overflow-y-auto">
           {selectedFeature ? (
-            <div className="p-6">
-              <div className="mb-6">
-                <div className="flex items-start justify-between gap-4">
+            <div className="p-8">
+              <div className="mb-8">
+                <div className="flex items-start justify-between gap-5">
                   <div>
                     <h2 className="text-lg font-semibold text-zinc-900">{selectedFeature.title}</h2>
-                    <p className="text-sm text-zinc-500 font-mono mt-1">{selectedFeature.featureFile}</p>
+                    <p className="text-base text-zinc-500 font-mono mt-1">{selectedFeature.featureFile}</p>
                     {selectedFeature.description && (
-                      <p className="text-sm text-zinc-600 mt-2">{selectedFeature.description}</p>
+                      <p className="text-base text-zinc-600 mt-2">{selectedFeature.description}</p>
                     )}
                   </div>
-                  <button
+                  <Button
                     onClick={() => {
                       if (!runningAll && runningScenarios.size === 0) {
                         runAllScenarios(selectedFeature);
                       }
                     }}
                     disabled={runningAll || runningScenarios.size > 0}
-                    className={`flex-shrink-0 px-3 py-1.5 text-sm font-medium rounded-lg transition-colors ${
-                      runningAll || runningScenarios.size > 0
-                        ? 'text-zinc-400 bg-zinc-50 cursor-not-allowed'
-                        : 'text-white bg-zinc-900 hover:bg-zinc-800'
-                    }`}
+                    loading={runningAll}
+                    size="sm"
+                    className="flex-shrink-0"
                   >
-                    {runningAll ? (
-                      <span className="flex items-center gap-2">
-                        <span className="inline-block w-3.5 h-3.5 border-2 border-zinc-300 border-t-white rounded-full animate-spin" />
-                        Running All...
-                      </span>
-                    ) : (
-                      'Run All'
-                    )}
-                  </button>
+                    {runningAll ? 'Running All...' : 'Run All'}
+                  </Button>
                 </div>
               </div>
 
-              <div className="space-y-4">
+              <div className="space-y-5">
                 {selectedFeature.scenarios.map(scenario => {
                   const scenarioKey = `${selectedFeature.featureFile}::${scenario.title}`;
                   const isRunning = runningScenarios.has(scenarioKey);
@@ -554,32 +690,32 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                   return (
                   <div
                     key={scenario.id}
-                    className={`rounded-lg border ${
+                    className={`rounded-lg ${
                       isRunning
-                        ? 'border-blue-200 bg-blue-50'
+                        ? 'border-2 border-[#819D9F]/30 bg-[#e8f0f0]'
                         : scenario.status === 'fail'
-                        ? 'border-red-200 bg-red-50'
+                        ? 'border-2 border-red-200 bg-red-50'
                         : scenario.status === 'pending'
-                        ? 'border-amber-200 bg-amber-50'
-                        : 'border-zinc-200 bg-white'
+                        ? 'border-2 border-amber-200 bg-amber-50'
+                        : 'bg-white'
                     }`}
                   >
-                    <div className="flex items-center justify-between p-4">
-                      <div className="flex items-center gap-2">
-                        <span className="text-sm">
+                    <div className="flex items-center justify-between p-5">
+                      <div className="flex items-center gap-3">
+                        <span className="text-base">
                           {isRunning ? '🔄' : scenario.status === 'pass' ? '✅' : scenario.status === 'fail' ? '❌' : '⏳'}
                         </span>
-                        <span className={`text-sm font-medium ${
-                          isRunning ? 'text-blue-700' : scenario.status === 'fail' ? 'text-red-700' : 'text-zinc-900'
+                        <span className={`text-base font-medium ${
+                          isRunning ? 'text-[#5a7d7f]' : scenario.status === 'fail' ? 'text-red-700' : 'text-zinc-900'
                         }`}>
                           {scenario.title}
                         </span>
                       </div>
-                      <div className="flex items-center gap-2">
+                      <div className="flex items-center gap-3">
                         {isRunning && elapsed !== undefined ? (
-                          <span className="text-xs font-mono text-blue-500">{elapsed}s</span>
+                          <span className="text-xs font-mono text-[#819D9F]">{elapsed}s</span>
                         ) : (
-                          <div className="flex items-center gap-2">
+                          <div className="flex items-center gap-3">
                             <span className="text-xs font-mono text-zinc-400">{scenario.duration}</span>
                             {scenario.lastRun && (
                               <span className="text-xs text-zinc-400" title={parseUtcDate(scenario.lastRun).toLocaleString()}>
@@ -596,7 +732,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                             }
                           }}
                           disabled={isRunning}
-                          className={`px-2 py-1 text-xs font-medium rounded transition-colors ${
+                          className={`px-3 py-1.5 text-base font-medium rounded transition-colors duration-200 ease-out ${
                             isRunning
                               ? 'text-zinc-400 bg-zinc-50 cursor-not-allowed'
                               : 'text-zinc-600 bg-zinc-100 hover:bg-zinc-200'
@@ -604,7 +740,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                         >
                           {isRunning ? (
                             <span className="flex items-center gap-1">
-                              <span className="inline-block w-3 h-3 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin" />
+                              <span className="inline-block w-3 h-3 border-2 border-[#819D9F]/50 border-t-[#5a7d7f] rounded-full animate-spin" />
                               Running...
                             </span>
                           ) : (
@@ -616,8 +752,8 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
 
                     {/* Gherkin Steps */}
                     {scenario.steps && scenario.steps.length > 0 && (
-                      <div className="px-4 pb-3 border-t border-zinc-100">
-                        <div className="mt-3 space-y-1">
+                      <div className="px-5 pb-4 border-t border-zinc-100">
+                        <div className="mt-4 space-y-1.5">
                           {scenario.steps.map((step: string, i: number) => {
                             const isFailedStep = scenario.failedStep && step.includes(scenario.failedStep.replace(/^(Given |When |Then |And |But )/, ''));
                             const scenarioUndefined = undefinedStepsMap[scenario.title] || [];
@@ -626,9 +762,9 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                             return (
                               <div
                                 key={i}
-                                className={`text-xs font-mono py-1 px-2 rounded flex items-center gap-1.5 ${
+                                className={`text-xs font-mono py-1.5 px-3 rounded flex items-center gap-2 ${
                                   stepStatus === 'running'
-                                    ? 'bg-blue-100 text-blue-900 border-l-2 border-blue-500'
+                                    ? 'bg-[#e8f0f0] text-zinc-900 border-l-2 border-[#819D9F]'
                                     : stepStatus === 'passed'
                                     ? 'bg-green-50 text-green-800 border-l-2 border-green-400'
                                     : stepStatus === 'failed'
@@ -644,7 +780,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                               >
                                 {stepStatus === 'running' && (
                                   <span className="flex-shrink-0">
-                                    <span className="inline-block w-2.5 h-2.5 border-2 border-blue-300 border-t-blue-600 rounded-full animate-spin" />
+                                    <span className="inline-block w-2.5 h-2.5 border-2 border-[#819D9F]/50 border-t-[#5a7d7f] rounded-full animate-spin" />
                                   </span>
                                 )}
                                 {stepStatus === 'passed' && (
@@ -673,18 +809,18 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
 
                     {/* Error Details */}
                     {scenario.status === 'fail' && scenario.error && (
-                      <div className="px-4 pb-4">
+                      <div className="px-5 pb-5">
                         {scenario.failedStep && (
-                          <div className="mb-2 text-xs font-medium text-red-700">
+                          <div className="mb-3 text-base font-medium text-red-700">
                             Failed at: {scenario.failedStep}
                           </div>
                         )}
-                        <div className="p-3 bg-red-100 rounded border border-red-200">
+                        <div className="p-4 bg-red-100 rounded border-2 border-red-200">
                           <pre className="text-xs text-red-800 whitespace-pre-wrap font-mono">
                             {scenario.error}
                           </pre>
                         </div>
-                        <button
+                        <Button
                           onClick={(e) => {
                             e.stopPropagation();
                             createFixScenarioSession(
@@ -695,10 +831,12 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
                               scenario.steps
                             );
                           }}
-                          className="mt-3 px-3 py-1.5 text-xs font-medium rounded-lg transition-colors text-violet-700 bg-violet-100 hover:bg-violet-200 border border-violet-200"
+                          className="mt-4"
+                          variant="accent"
+                          size="sm"
                         >
                           Fix with Claude
-                        </button>
+                        </Button>
                       </div>
                     )}
                   </div>
@@ -710,11 +848,11 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
             <div className="flex flex-col items-center justify-center h-full text-center px-6">
               {allFeatures.length === 0 ? (
                 <>
-                  <span className="text-zinc-400 text-sm">No test features available</span>
-                  <span className="text-zinc-300 text-xs mt-1">Create BDD feature files in the features/ directory to see test results here.</span>
+                  <span className="text-zinc-400 text-base">No test features available</span>
+                  <span className="text-zinc-300 text-base mt-1">Create BDD feature files in the features/ directory to see test results here.</span>
                 </>
               ) : (
-                <span className="text-zinc-400 text-sm">Select a feature from the sidebar to view its scenarios</span>
+                <span className="text-zinc-400 text-base">Select a feature from the sidebar to view its scenarios</span>
               )}
             </div>
           )}