jettypod 4.4.120 → 4.4.121

package/apps/dashboard/components/RealTimeTestsWrapper.tsx

@@ -1,11 +1,13 @@
-'use client';
 
 import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { useWebSocket, type WebSocketMessage } from '../hooks/useWebSocket';
 import { useSessionActions } from '../contexts/ClaudeSessionContext';
-import type { TestDashboardData, TestFeature } from '@/lib/tests';
+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;
@@ -43,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('');
@@ -55,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 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') {
@@ -83,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;
@@ -96,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}`;
@@ -116,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;
@@ -276,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,
   });
 
@@ -357,7 +500,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
           </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-[color,background-color,box-shadow] duration-200 ease-out ${
+            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"
@@ -369,7 +512,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
           </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-[color,background-color,box-shadow] duration-200 ease-out ${
+            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"
@@ -381,7 +524,7 @@ export function RealTimeTestsWrapper({ initialData }: RealTimeTestsWrapperProps)
           </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-[color,background-color,box-shadow] duration-200 ease-out ${
+            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"

package/apps/dashboard/components/ReviewFooter.tsx

@@ -1,16 +1,17 @@
-'use client';
 
 import { useState } from 'react';
 import { Button } from '@/components/ui/Button';
 import { Input } from '@/components/ui/Input';
+import { dataBridge } from '@/lib/data-bridge';
 
 interface ReviewFooterProps {
   workItemId: string;
   onAccepted: () => void;
   onRejected: (reason: string) => void;
+  onAskQuestion: () => void;
 }
 
-export function ReviewFooter({ workItemId, onAccepted, onRejected }: ReviewFooterProps) {
+export function ReviewFooter({ workItemId, onAccepted, onRejected, onAskQuestion }: ReviewFooterProps) {
   const [showRejectInput, setShowRejectInput] = useState(false);
   const [rejectReason, setRejectReason] = useState('');
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -20,12 +21,7 @@ export function ReviewFooter({ workItemId, onAccepted, onRejected }: ReviewFoote
     setErrorMessage(null);
     setIsSubmitting(true);
     try {
-      const res = await fetch(`/api/work/${workItemId}/status`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ status: 'done' }),
-      });
-      if (!res.ok) throw new Error('Failed to update status');
+      await dataBridge.updateStatus(parseInt(workItemId, 10), 'done');
       onAccepted();
     } catch {
       setErrorMessage('Failed to accept. Please try again.');
@@ -42,12 +38,7 @@ export function ReviewFooter({ workItemId, onAccepted, onRejected }: ReviewFoote
     setErrorMessage(null);
     setIsSubmitting(true);
     try {
-      const res = await fetch(`/api/work/${workItemId}/status`, {
-        method: 'PATCH',
-        headers: { 'Content-Type': 'application/json' },
-        body: JSON.stringify({ status: 'in_progress', rejectionReason: rejectReason.trim() }),
-      });
-      if (!res.ok) throw new Error('Failed to update status');
+      await dataBridge.updateStatus(parseInt(workItemId, 10), 'in_progress', rejectReason.trim());
       const reason = rejectReason.trim();
       setIsSubmitting(false);
       setShowRejectInput(false);
@@ -93,6 +84,13 @@ export function ReviewFooter({ workItemId, onAccepted, onRejected }: ReviewFoote
           >
             Reject
           </Button>
+          <Button
+            onClick={onAskQuestion}
+            variant="ghost"
+            data-testid="review-ask-question-button"
+          >
+            Ask a question
+          </Button>
         </div>
       ) : (
         <div data-testid="review-reject-input-area">

package/apps/dashboard/components/SessionList.tsx

@@ -1,4 +1,3 @@
-'use client';
 
 import { m } from 'framer-motion';
 import { Button } from '@/components/ui/Button';