jettypod 4.4.118 → 4.4.121

package/apps/dashboard/app/work/[id]/proof/page.tsx

@@ -0,0 +1,1489 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useParams, Link, useNavigate } from 'react-router-dom';
+import { dataBridge } from '@/lib/data-bridge';
+import type { WorkItemData } from '@/lib/data-bridge';
+import type { TestScenario, TestFeature } from '@/lib/db';
+import { shadow } from '@/lib/shadows';
+import { ProofRunManager } from '@/lib/proof-run';
+import type { ProofRunStatus } from '@/lib/proof-run';
+import { loadEnvironmentConfig } from '@/lib/environment-config';
+import type { EnvironmentConfig } from '@/lib/environment-config';
+import { ScenarioRunner } from '@/lib/proof-scenario-runner';
+import type { ScenarioRunnerStatus } from '@/lib/proof-scenario-runner';
+import { useWebSocket } from '@/hooks/useWebSocket';
+import type { WebSocketMessage } from '@/hooks/useWebSocket';
+import { getWebSocketUrl } from '@/lib/utils';
+import { openShell } from '@/lib/tauri';
+import { ProjectStackSection } from '@/components/settings/ProjectStackSection';
+import { useSessionActions } from '@/contexts/ClaudeSessionContext';
+
+// ─── Types ───────────────────────────────────────────────────
+
+interface ServiceStatus {
+  name: string;
+  port: number | null;
+  status: 'stopped' | 'starting' | 'running' | 'crashed';
+  startTime?: number;
+}
+
+interface ScenarioStep {
+  keyword: string;
+  text: string;
+  status: 'passed' | 'running' | 'pending' | 'failed';
+  duration?: number;
+}
+
+interface Scenario {
+  title: string;
+  status: 'passed' | 'running' | 'pending' | 'failed';
+  steps: ScenarioStep[];
+  duration?: number;
+}
+
+interface DbChange {
+  table: string;
+  op: string;
+  field: string;
+  from: string | null;
+  to: string;
+  time: string;
+}
+
+interface EventLogEntry {
+  time: string;
+  from: string;
+  to: string;
+  label: string;
+  color: string;
+}
+
+interface ChecklistItem {
+  id: string;
+  text: string;
+  detail?: string;
+  section: string;
+  status: 'pending' | 'passed' | 'failed';
+  scenarioRef?: string;
+  note?: string;
+  failReason?: string;
+}
+
+interface HistoricalScenario {
+  title: string;
+  status: 'pass' | 'fail' | 'pending';
+  lastRun: string | null;
+  ranBy: string;
+  duration: string;
+  steps: string[];
+}
+
+function formatRelativeTime(isoDate: string): string {
+  const now = Date.now();
+  const then = new Date(isoDate).getTime();
+  const diffMs = now - then;
+  const diffSec = Math.floor(diffMs / 1000);
+  const diffMin = Math.floor(diffSec / 60);
+  const diffHour = Math.floor(diffMin / 60);
+  const diffDay = Math.floor(diffHour / 24);
+
+  if (diffSec < 60) return 'just now';
+  if (diffMin < 60) return `${diffMin}m ago`;
+  if (diffHour < 24) return `${diffHour}h ago`;
+  if (diffDay < 7) return `${diffDay}d ago`;
+  return new Date(isoDate).toLocaleDateString();
+}
+
+// ─── Default state ──────────────────────────────────────────
+
+const DEFAULT_SERVICES: ServiceStatus[] = [];
+
+// ─── Shared primitives ──────────────────────────────────────
+
+const STATUS_COLORS: Record<string, string> = {
+  passed: '#22c55e',
+  running: '#3b82f6',
+  pending: '#a1a1aa',
+  failed: '#ef4444',
+  starting: '#f59e0b',
+  stopped: '#a1a1aa',
+  crashed: '#ef4444',
+};
+
+function StatusIcon({ status, size = 16 }: { status: string; size?: number }) {
+  const color = STATUS_COLORS[status] || '#a1a1aa';
+
+  if (status === 'passed') {
+    return (
+      <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+        <circle cx="8" cy="8" r="7" fill={color} fillOpacity={0.12} />
+        <path d="M5 8l2 2 4-4" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+      </svg>
+    );
+  }
+  if (status === 'failed') {
+    return (
+      <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
+        <circle cx="8" cy="8" r="7" fill={color} fillOpacity={0.12} />
+        <path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke={color} strokeWidth="1.5" strokeLinecap="round" />
+      </svg>
+    );
+  }
+  if (status === 'running' || status === 'starting') {
+    return (
+      <span className="relative inline-flex" style={{ width: size, height: size }}>
+        <span
+          className="absolute inline-flex rounded-full opacity-30"
+          style={{
+            width: size, height: size,
+            backgroundColor: color,
+            animation: 'ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite',
+          }}
+        />
+        <span
+          className="relative inline-flex rounded-full"
+          style={{ width: size, height: size, backgroundColor: color }}
+        />
+      </span>
+    );
+  }
+  return (
+    <span
+      className="inline-flex rounded-full"
+      style={{
+        width: size, height: size,
+        backgroundColor: 'transparent',
+        border: `1.5px solid ${color}`,
+      }}
+    />
+  );
+}
+
+// ─── Environment Status Bar ─────────────────────────────────
+
+function EnvironmentBar({ services, proofState, onLaunch, onFixWithClaude }: { services: ServiceStatus[]; proofState: ProofRunStatus['state']; onLaunch?: () => void; onFixWithClaude?: () => void }) {
+  const runningCount = services.filter(s => s.status === 'running').length;
+  const total = services.length;
+  const isIdle = proofState === 'idle';
+  const isLaunching = proofState === 'launching';
+  const isReady = proofState === 'healthy';
+  const isFailed = proofState === 'failed';
+  const hasCrashed = services.some(s => s.status === 'crashed');
+  const progress = total > 0 ? (runningCount / total) * 100 : 0;
+
+  // Determine dot color per service state
+  const dotColor = (status: string) => {
+    if (status === 'running') return '#22c55e';
+    if (status === 'starting') return '#f59e0b';
+    if (status === 'crashed') return '#ef4444';
+    return '#a1a1aa';
+  };
+
+  // Animated dot for launching/starting states
+  const shouldAnimate = (status: string) => status === 'starting';
+
+  return (
+    <div
+      className="bg-white dark:bg-zinc-800 rounded-xl overflow-hidden mb-4"
+      style={{ boxShadow: shadow.sm }}
+      data-testid="environment-bar"
+    >
+      {/* Progress bar during launch */}
+      {isLaunching && (
+        <div className="h-[3px] bg-zinc-100 dark:bg-zinc-700">
+          <div
+            className="h-full transition-all duration-500 ease-out"
+            style={{ width: `${progress}%`, backgroundColor: '#22c55e' }}
+          />
+        </div>
+      )}
+      <div className="flex items-center gap-4 px-5 py-3">
+        <span className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider">Environment</span>
+        <div className="flex items-center gap-1.5 flex-1 flex-wrap">
+          {services.map(svc => (
+            <span
+              key={svc.name}
+              className="flex items-center gap-1.5 text-[12px] rounded-md px-2 py-0.5"
+              style={{
+                color: !isIdle && svc.status === 'running' ? '#52525b' : '#a1a1aa',
+                backgroundColor: 'rgba(0,0,0,0.03)',
+              }}
+            >
+              {!isIdle && (
+                <span className="relative inline-flex" style={{ width: 7, height: 7 }}>
+                  {shouldAnimate(svc.status) && (
+                    <span
+                      className="absolute inline-flex rounded-full opacity-30"
+                      style={{
+                        width: 7, height: 7,
+                        backgroundColor: dotColor(svc.status),
+                        animation: 'ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite',
+                      }}
+                    />
+                  )}
+                  <span
+                    className="relative inline-flex rounded-full"
+                    style={{ width: 7, height: 7, backgroundColor: dotColor(svc.status) }}
+                    data-testid={`svc-indicator-${svc.name.toLowerCase().replace(/\s+/g, '-')}`}
+                  />
+                </span>
+              )}
+              {svc.name}
+              {svc.port && <span className="font-mono text-[11px]" style={{ color: '#819D9F' }}>:{svc.port}</span>}
+            </span>
+          ))}
+        </div>
+        {/* Right side: Open in App button when idle, status badges when active */}
+        {isIdle ? (
+          <button
+            className="px-4 py-2 text-[13px] font-medium rounded-xl transition-colors duration-200"
+            style={{ backgroundColor: '#819D9F', color: 'white' }}
+            onClick={onLaunch}
+            data-testid="open-in-app-button"
+          >
+            Open in App
+          </button>
+        ) : isLaunching ? (
+          <span className="flex items-center gap-1.5 text-[12px] font-semibold" style={{ color: '#f59e0b' }} data-testid="env-status-badge">
+            <svg width="14" height="14" viewBox="0 0 16 16" className="animate-spin">
+              <circle cx="8" cy="8" r="6" fill="none" stroke="currentColor" strokeWidth="2" strokeDasharray="32" strokeDashoffset="8" strokeLinecap="round" />
+            </svg>
+            Starting services
+          </span>
+        ) : isFailed ? (
+          <span className="flex items-center gap-1.5 text-[12px] font-semibold" style={{ color: '#ef4444' }} data-testid="env-status-badge">
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+              <circle cx="8" cy="8" r="7" fill="currentColor" fillOpacity={0.12} />
+              <path d="M5.5 5.5l5 5M10.5 5.5l-5 5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+            </svg>
+            Launch failed
+          </span>
+        ) : isReady && hasCrashed ? (
+          <div className="flex items-center gap-2">
+            <span className="flex items-center gap-1.5 text-[12px] font-semibold" style={{ color: '#f59e0b' }} data-testid="env-status-badge">
+              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+                <circle cx="8" cy="8" r="7" fill="currentColor" fillOpacity={0.12} />
+                <path d="M8 5v3M8 10v.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
+              </svg>
+              Ready (degraded)
+            </span>
+            <button
+              className="px-3 py-1.5 text-[12px] font-medium rounded-lg transition-colors duration-200"
+              style={{ backgroundColor: 'rgba(59,130,246,0.1)', color: '#3b82f6' }}
+              onClick={onFixWithClaude}
+              data-testid="fix-with-claude-button"
+            >
+              Fix with Claude
+            </button>
+          </div>
+        ) : isReady ? (
+          <span className="flex items-center gap-1.5 text-[12px] font-semibold" style={{ color: '#22c55e' }} data-testid="env-ready-badge">
+            <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
+              <circle cx="8" cy="8" r="7" fill="currentColor" fillOpacity={0.12} />
+              <path d="M5 8l2 2 4-4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+            Ready for QA
+          </span>
+        ) : (
+          <span className="text-[12px] text-zinc-400">
+            {runningCount}/{total} services
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── QA Checklist ───────────────────────────────────────────
+
+function QAChecklist({
+  items,
+  onPass,
+  onFail,
+  onReset,
+  onResetAll,
+  onApprove,
+  onReject,
+}: {
+  items: ChecklistItem[];
+  onPass: (id: string) => void;
+  onFail: (id: string, reason: string) => void;
+  onReset: (id: string) => void;
+  onResetAll: () => void;
+  onApprove: () => void;
+  onReject: () => void;
+}) {
+  const [failReasonInputId, setFailReasonInputId] = useState<string | null>(null);
+  const [failReasonText, setFailReasonText] = useState('');
+  const completedCount = items.filter(i => i.status === 'passed').length;
+  const failedCount = items.filter(i => i.status === 'failed').length;
+  const hasFailed = failedCount > 0;
+  const sections = [...new Set(items.map(i => i.section))];
+
+  return (
+    <div
+      className="bg-white dark:bg-zinc-800 rounded-xl overflow-hidden flex flex-col"
+      style={{ boxShadow: shadow.md }}
+      data-testid="qa-checklist"
+    >
+      <div className="px-5 py-4 border-b border-zinc-100 dark:border-zinc-700 flex items-center justify-between">
+        <span className="text-[15px] font-semibold text-zinc-900 dark:text-zinc-100">QA Checklist</span>
+        <div className="flex items-center gap-3">
+          <span className="text-[12px] text-zinc-400" data-testid="checklist-progress">{completedCount} of {items.length} verified</span>
+          {items.some(i => i.status !== 'pending') && (
+            <button
+              className="px-2 py-1 text-[11px] font-medium rounded-md transition-colors duration-150"
+              style={{ color: '#a1a1aa' }}
+              onClick={onResetAll}
+              data-testid="reset-all-btn"
+            >
+              Reset All
+            </button>
+          )}
+          <button
+            className="px-3 py-1.5 text-[12px] font-semibold rounded-lg transition-all duration-200"
+            style={{
+              backgroundColor: hasFailed ? 'rgba(34,197,94,0.06)' : 'rgba(34,197,94,0.1)',
+              color: hasFailed ? '#a1a1aa' : '#22c55e',
+              cursor: hasFailed ? 'not-allowed' : 'pointer',
+            }}
+            onClick={() => { if (!hasFailed) onApprove(); }}
+            disabled={hasFailed}
+            data-testid="approve-btn"
+          >
+            Approve
+          </button>
+          <button
+            className="px-3 py-1.5 text-[12px] font-semibold rounded-lg transition-all duration-200"
+            style={{ backgroundColor: 'rgba(239,68,68,0.1)', color: '#ef4444' }}
+            onClick={onReject}
+            data-testid="reject-btn"
+          >
+            Reject
+          </button>
+        </div>
+      </div>
+
+      {/* Progress bar */}
+      <div className="h-1 bg-zinc-100 dark:bg-zinc-700">
+        <div
+          className="h-full rounded-r-full transition-all duration-500 ease-out"
+          style={{
+            width: items.length > 0 ? `${(completedCount / items.length) * 100}%` : '0%',
+            backgroundColor: '#22c55e',
+          }}
+          data-testid="checklist-progress-bar"
+        />
+      </div>
+
+      <div className="flex-1 overflow-auto">
+        {sections.map(section => (
+          <div key={section}>
+            <div
+              className="px-5 py-2 text-[11px] font-semibold text-zinc-400 uppercase tracking-wider bg-zinc-50 dark:bg-zinc-800/50 sticky top-0 z-10"
+            >
+              {section}
+            </div>
+            {items.filter(i => i.section === section).map(item => {
+              const isPassed = item.status === 'passed';
+              const isFailed = item.status === 'failed';
+              const isPending = item.status === 'pending';
+              return (
+                <div
+                  key={item.id}
+                  className="group flex items-start gap-3 px-5 py-3.5 border-b border-zinc-50 dark:border-zinc-700/30 transition-colors duration-150 hover:bg-zinc-50/50 dark:hover:bg-zinc-700/20"
+                  style={{
+                    ...(isPassed ? { opacity: 0.5 } : {}),
+                    ...(isFailed ? { borderLeft: '3px solid #ef4444' } : {}),
+                  }}
+                  data-testid={`checklist-item-${item.id}`}
+                >
+                  {/* Checkbox */}
+                  <button
+                    className="w-[22px] h-[22px] rounded-md flex items-center justify-center shrink-0 mt-0.5 transition-all duration-200"
+                    style={{
+                      backgroundColor: isPassed ? '#22c55e' : isFailed ? 'rgba(239,68,68,0.08)' : 'transparent',
+                      border: isPassed ? '2px solid #22c55e' : isFailed ? '2px solid #ef4444' : '2px solid #e4e4e7',
+                    }}
+                    onClick={() => {
+                      if (isPending) onPass(item.id);
+                    }}
+                  >
+                    {isPassed && (
+                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+                        <path d="M3.5 7l2.5 2.5 4.5-4.5" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                      </svg>
+                    )}
+                    {isFailed && (
+                      <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+                        <path d="M3 3l6 6M9 3l-6 6" stroke="#ef4444" strokeWidth="1.5" strokeLinecap="round" />
+                      </svg>
+                    )}
+                  </button>
+
+                  {/* Content */}
+                  <div className="flex-1 min-w-0">
+                    <div className="text-[14px] leading-relaxed text-zinc-800 dark:text-zinc-200" style={isPassed ? { textDecoration: 'line-through' } : undefined}>
+                      {item.text}
+                    </div>
+                    {item.detail && (
+                      <div className="text-[12px] text-zinc-400 mt-0.5">{item.detail}</div>
+                    )}
+                    {item.scenarioRef && (
+                      <div className="flex items-center gap-1.5 mt-1.5 px-2.5 py-1 rounded-md inline-flex" style={{ backgroundColor: 'rgba(129,157,159,0.08)' }}>
+                        <svg width="10" height="10" viewBox="0 0 16 16" fill="none">
+                          <rect x="2" y="2" width="12" height="12" rx="3" stroke="#4A6365" strokeWidth="1.5" />
+                        </svg>
+                        <span className="text-[11px]" style={{ color: '#4A6365' }}>Scenario: {item.scenarioRef}</span>
+                      </div>
+                    )}
+                    {/* Fail reason display */}
+                    {isFailed && item.failReason && (
+                      <div
+                        className="mt-1.5 px-2.5 py-1.5 rounded-md text-[12px]"
+                        style={{ backgroundColor: 'rgba(239,68,68,0.06)', color: '#ef4444' }}
+                        data-testid={`fail-reason-${item.id}`}
+                      >
+                        {item.failReason}
+                      </div>
+                    )}
+                    {/* Fail reason input */}
+                    {failReasonInputId === item.id && (
+                      <div className="mt-1.5 flex gap-1.5">
+                        <input
+                          type="text"
+                          className="flex-1 px-2.5 py-1.5 text-[12px] rounded-md border border-red-300 dark:border-red-600 bg-white dark:bg-zinc-700 text-zinc-800 dark:text-zinc-200 outline-none focus:ring-1 focus:ring-red-400"
+                          value={failReasonText}
+                          onChange={e => setFailReasonText(e.target.value)}
+                          onKeyDown={e => {
+                            if (e.key === 'Enter' && failReasonText.trim()) {
+                              onFail(item.id, failReasonText.trim());
+                              setFailReasonInputId(null);
+                              setFailReasonText('');
+                            } else if (e.key === 'Escape') {
+                              setFailReasonInputId(null);
+                              setFailReasonText('');
+                            }
+                          }}
+                          placeholder="Why did this fail?"
+                          autoFocus
+                          data-testid={`fail-reason-input-${item.id}`}
+                        />
+                        <button
+                          className="px-2 py-1 text-[11px] font-medium rounded-md text-white transition-opacity duration-150"
+                          style={{
+                            backgroundColor: '#ef4444',
+                            opacity: failReasonText.trim() ? 1 : 0.4,
+                            cursor: failReasonText.trim() ? 'pointer' : 'not-allowed',
+                          }}
+                          disabled={!failReasonText.trim()}
+                          onClick={() => {
+                            if (failReasonText.trim()) {
+                              onFail(item.id, failReasonText.trim());
+                              setFailReasonInputId(null);
+                              setFailReasonText('');
+                            }
+                          }}
+                          data-testid={`fail-reason-confirm-${item.id}`}
+                        >
+                          Confirm
+                        </button>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* Actions */}
+                  {isPending && (
+                    <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150 shrink-0">
+                      <button
+                        className="px-2.5 py-1 text-[11px] font-medium rounded-md border transition-colors duration-150"
+                        style={{ color: '#22c55e', borderColor: 'rgba(34,197,94,0.3)', background: 'transparent' }}
+                        onMouseEnter={e => { (e.target as HTMLElement).style.background = 'rgba(34,197,94,0.08)'; }}
+                        onMouseLeave={e => { (e.target as HTMLElement).style.background = 'transparent'; }}
+                        onClick={() => onPass(item.id)}
+                        data-testid={`pass-btn-${item.id}`}
+                      >
+                        Pass
+                      </button>
+                      <button
+                        className="px-2.5 py-1 text-[11px] font-medium rounded-md border transition-colors duration-150"
+                        style={{ color: '#ef4444', borderColor: 'rgba(239,68,68,0.3)', background: 'transparent' }}
+                        onMouseEnter={e => { (e.target as HTMLElement).style.background = 'rgba(239,68,68,0.08)'; }}
+                        onMouseLeave={e => { (e.target as HTMLElement).style.background = 'transparent'; }}
+                        onClick={() => { setFailReasonInputId(item.id); setFailReasonText(''); }}
+                        data-testid={`fail-btn-${item.id}`}
+                      >
+                        Fail
+                      </button>
+                    </div>
+                  )}
+                  {/* Reset button for completed items */}
+                  {!isPending && (
+                    <div className="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-150 shrink-0">
+                      <button
+                        className="px-2.5 py-1 text-[11px] font-medium rounded-md border transition-colors duration-150"
+                        style={{ color: '#a1a1aa', borderColor: 'rgba(161,161,170,0.3)', background: 'transparent' }}
+                        onMouseEnter={e => { (e.target as HTMLElement).style.background = 'rgba(161,161,170,0.08)'; }}
+                        onMouseLeave={e => { (e.target as HTMLElement).style.background = 'transparent'; }}
+                        onClick={() => onReset(item.id)}
+                        data-testid={`reset-btn-${item.id}`}
+                      >
+                        Reset
+                      </button>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ─── Scenario Sidebar ───────────────────────────────────────
+
+function ScenarioSidebar({
+  scenarios,
+  historicalScenarios,
+}: {
+  scenarios: Scenario[];
+  historicalScenarios: HistoricalScenario[];
+}) {
+  const hasLive = scenarios.length > 0;
+  const hasHistorical = historicalScenarios.length > 0;
+
+  if (!hasLive && !hasHistorical) {
+    return (
+      <div
+        className="bg-white dark:bg-zinc-800 rounded-xl overflow-hidden"
+        style={{ boxShadow: shadow.md }}
+        data-testid="scenario-sidebar"
+      >
+        <div className="px-4 py-3 border-b border-zinc-100 dark:border-zinc-700">
+          <span className="text-[13px] font-semibold text-zinc-900 dark:text-zinc-100">BDD Scenarios</span>
+        </div>
+        <div className="px-4 py-6 text-center text-[12px] text-zinc-400 italic">
+          No BDD scenarios linked to this work item
+        </div>
+      </div>
+    );
+  }
+
+  // Show live scenarios when running, otherwise show historical
+  const showLive = hasLive;
+  const displayScenarios = showLive ? scenarios : [];
+
+  // Find the most recent run timestamp across all historical scenarios
+  const lastRunTimestamp = historicalScenarios
+    .filter(s => s.lastRun)
+    .sort((a, b) => new Date(b.lastRun!).getTime() - new Date(a.lastRun!).getTime())[0]?.lastRun;
+
+  const lastRunner = historicalScenarios[0]?.ranBy || 'Claude';
+
+  const totalCount = showLive ? scenarios.length : historicalScenarios.length;
+
+  return (
+    <div
+      className="bg-white dark:bg-zinc-800 rounded-xl overflow-hidden"
+      style={{ boxShadow: shadow.md }}
+      data-testid="scenario-sidebar"
+    >
+      {/* Header */}
+      <div className="px-4 py-3 border-b border-zinc-100 dark:border-zinc-700">
+        <div className="flex items-center justify-between mb-1">
+          <span className="text-[13px] font-semibold text-zinc-900 dark:text-zinc-100">BDD Scenarios</span>
+          <span className="text-[11px] text-zinc-400">{totalCount} scenarios</span>
+        </div>
+        {lastRunTimestamp && !showLive && (
+          <div className="flex items-center gap-1.5 text-[11px] text-zinc-400" data-testid="scenario-last-run-info">
+            <svg width="12" height="12" viewBox="0 0 16 16" fill="none">
+              <circle cx="8" cy="8" r="6.5" stroke="currentColor" strokeWidth="1.2" />
+              <path d="M8 4.5V8l2.5 1.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
+            </svg>
+            Last run {formatRelativeTime(lastRunTimestamp)} by {lastRunner}
+          </div>
+        )}
+      </div>
+
+      <div className="divide-y divide-zinc-50 dark:divide-zinc-700/30 max-h-[500px] overflow-auto">
+        {/* Live execution scenarios */}
+        {showLive && displayScenarios.map((scenario, i) => (
+          <div key={`live-${i}`} className="px-4 py-2.5">
+            <div className="flex items-center gap-1.5 mb-1.5">
+              <StatusIcon status={scenario.status} size={13} />
+              <span className="text-[12px] font-medium text-zinc-800 dark:text-zinc-200 flex-1 leading-snug">
+                {scenario.title}
+              </span>
+            </div>
+            <div className="flex items-center gap-1 ml-5">
+              {scenario.steps.map((step, si) => (
+                <div key={si} className="flex items-center gap-1">
+                  <div
+                    className="w-[5px] h-[5px] rounded-full"
+                    style={{ backgroundColor: STATUS_COLORS[step.status] }}
+                  />
+                  {si < scenario.steps.length - 1 && (
+                    <div className="w-2 h-[1px] bg-zinc-200 dark:bg-zinc-700" />
+                  )}
+                </div>
+              ))}
+            </div>
+            {scenario.duration != null && (
+              <div className="mt-1 ml-5 font-mono text-[10px] text-zinc-400">{scenario.duration}ms</div>
+            )}
+          </div>
+        ))}
+
+        {/* Historical scenarios (shown when not running live) */}
+        {!showLive && historicalScenarios.map((scenario, i) => {
+          const statusColor = scenario.status === 'pass' ? '#22c55e' : scenario.status === 'fail' ? '#ef4444' : '#a1a1aa';
+          const statusForIcon = scenario.status === 'pass' ? 'passed' : scenario.status === 'fail' ? 'failed' : 'pending';
+
+          return (
+            <div key={`hist-${i}`} className="px-4 py-3" data-testid={`scenario-item-${i}`}>
+              <div className="flex items-center gap-1.5 mb-1">
+                <StatusIcon status={statusForIcon} size={13} />
+                <span className="text-[12px] font-medium text-zinc-800 dark:text-zinc-200 flex-1 leading-snug">
+                  {scenario.title}
+                </span>
+              </div>
+
+              {/* Step dots */}
+              {scenario.steps.length > 0 && (
+                <div className="flex items-center gap-1 ml-5 mb-1.5">
+                  {scenario.steps.map((_step, si) => (
+                    <div key={si} className="flex items-center gap-1">
+                      <div
+                        className="w-[5px] h-[5px] rounded-full"
+                        style={{ backgroundColor: statusColor }}
+                      />
+                      {si < scenario.steps.length - 1 && (
+                        <div className="w-2 h-[1px] bg-zinc-200 dark:bg-zinc-700" />
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+
+              {/* Meta: duration + last run */}
+              <div className="flex items-center gap-3 ml-5 text-[10px] text-zinc-400">
+                {scenario.duration && (
+                  <span className="font-mono">{scenario.duration}</span>
+                )}
+                {scenario.lastRun && (
+                  <span data-testid={`scenario-last-run-${i}`}>
+                    {formatRelativeTime(scenario.lastRun)}
+                  </span>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+// ─── Inspector Drawer ───────────────────────────────────────
+
+type InspectorTab = 'flow' | 'db' | 'logs';
+
+const INSPECTOR_TABS: { id: InspectorTab; label: string }[] = [
+  { id: 'flow', label: 'Flow' },
+  { id: 'db', label: 'DB' },
+  { id: 'logs', label: 'Logs' },
+];
+
+function InspectorDrawer({
+  dbChanges,
+  eventLog,
+  logs,
+  isOpen,
+  onToggle,
+}: {
+  dbChanges: DbChange[];
+  eventLog: EventLogEntry[];
+  logs: string[];
+  isOpen: boolean;
+  onToggle: () => void;
+}) {
+  const [tab, setTab] = useState<InspectorTab>('flow');
+
+  return (
+    <div
+      className="fixed bottom-0 left-0 right-0 bg-white dark:bg-zinc-800 border-t border-zinc-200 dark:border-zinc-700 transition-transform duration-300 ease-out z-50"
+      style={{
+        transform: isOpen ? 'translateY(0)' : 'translateY(calc(100% - 40px))',
+        borderRadius: '16px 16px 0 0',
+        boxShadow: '0 -4px 16px rgba(0,0,0,0.06)',
+      }}
+      data-testid="inspector-drawer"
+    >
+      {/* Handle */}
+      <button
+        className="w-full h-10 flex items-center justify-center gap-2 cursor-pointer"
+        onClick={onToggle}
+        data-testid="inspector-drawer-toggle"
+      >
+        <span className="w-8 h-1 bg-zinc-300 dark:bg-zinc-600 rounded-full" />
+        <span className="text-[11px] font-semibold text-zinc-400 uppercase tracking-wider">Inspector</span>
+        {eventLog.length > 0 && (
+          <span className="text-[10px] px-1.5 py-0.5 rounded" style={{ backgroundColor: 'rgba(59,130,246,0.08)', color: '#3b82f6' }}>
+            {eventLog.length} events
+          </span>
+        )}
+        {dbChanges.length > 0 && (
+          <span className="text-[10px] px-1.5 py-0.5 rounded" style={{ backgroundColor: 'rgba(34,197,94,0.08)', color: '#22c55e' }}>
+            {dbChanges.length} DB ops
+          </span>
+        )}
+        <span className="w-8 h-1 bg-zinc-300 dark:bg-zinc-600 rounded-full" />
+      </button>
+
+      {/* Tabs */}
+      <div className="flex px-4 gap-0.5 border-b border-zinc-100 dark:border-zinc-700">
+        {INSPECTOR_TABS.map(t => (
+          <button
+            key={t.id}
+            onClick={() => setTab(t.id)}
+            className="px-3 py-2 text-[12px] font-medium transition-colors duration-200"
+            style={{
+              color: tab === t.id ? '#4A6365' : '#a1a1aa',
+              borderBottom: tab === t.id ? '2px solid #819D9F' : '2px solid transparent',
+            }}
+            data-testid={`inspector-tab-${t.id}`}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Content */}
+      <div className="h-[260px] overflow-auto">
+        {/* Flow tab */}
+        {tab === 'flow' && (
+          <div data-testid="inspector-flow">
+            {eventLog.length === 0 ? (
+              <div className="px-4 py-8 text-center text-[12px] text-zinc-400 italic">
+                Event flow will appear during proof run
+              </div>
+            ) : (
+              eventLog.map((evt, i) => (
+                <div
+                  key={i}
+                  className="px-4 py-2 border-b border-zinc-50 dark:border-zinc-700/30 hover:bg-zinc-50 dark:hover:bg-zinc-700/30 transition-colors duration-200"
+                >
+                  <div className="flex items-center gap-2 text-[12px]">
+                    <span className="font-mono text-zinc-400 w-16 shrink-0">{evt.time}</span>
+                    <span
+                      className="font-mono text-[10px] font-semibold px-1.5 py-0.5 rounded shrink-0"
+                      style={{ backgroundColor: 'rgba(59,130,246,0.08)', color: '#3b82f6' }}
+                    >
+                      {evt.from}
+                    </span>
+                    <svg width="12" height="6" viewBox="0 0 12 6" className="shrink-0">
+                      <path d="M0 3h9M7 0.5l2.5 2.5-2.5 2.5" fill="none" stroke={evt.color} strokeWidth="1" strokeLinecap="round" strokeLinejoin="round" />
+                    </svg>
+                    <span className="font-mono text-zinc-600 dark:text-zinc-300 flex-1">{evt.label}</span>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        )}
+
+        {/* DB tab */}
+        {tab === 'db' && (
+          <div data-testid="inspector-db">
+            {dbChanges.length === 0 ? (
+              <div className="px-4 py-8 text-center text-[12px] text-zinc-400 italic">
+                DB changes will appear during proof run
+              </div>
+            ) : (
+              dbChanges.map((change, i) => (
+                <div key={i} className="px-4 py-2.5 border-b border-zinc-50 dark:border-zinc-700/30 hover:bg-zinc-50 dark:hover:bg-zinc-700/30 transition-colors duration-200">
+                  <div className="flex items-center gap-2">
+                    <span
+                      className="font-mono text-[10px] font-bold px-1.5 py-0.5 rounded"
+                      style={{
+                        backgroundColor: change.op === 'INSERT' ? 'rgba(34,197,94,0.1)' : 'rgba(59,130,246,0.1)',
+                        color: change.op === 'INSERT' ? '#22c55e' : '#3b82f6',
+                      }}
+                    >
+                      {change.op}
+                    </span>
+                    <span className="font-mono text-[12px] text-zinc-700 dark:text-zinc-300">{change.table}</span>
+                    <span className="font-mono text-zinc-400 ml-auto text-[10px]">{change.time}</span>
+                  </div>
+                  <div className="mt-1 ml-2 font-mono text-[11px]">
+                    <span className="text-zinc-400">{change.field}: </span>
+                    {change.from && <span className="text-red-400 line-through">{change.from}</span>}
+                    {change.from && <span className="text-zinc-500"> &rarr; </span>}
+                    <span className="text-green-500">{change.to}</span>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        )}
+
+        {/* Logs tab */}
+        {tab === 'logs' && (
+          <div className="px-4 py-3 font-mono text-[11px] leading-relaxed text-zinc-500 space-y-0.5" data-testid="inspector-logs">
+            {logs.length === 0 ? (
+              <div className="py-5 text-center text-[12px] text-zinc-400 italic font-sans">
+                Service logs will appear during proof run
+              </div>
+            ) : (
+              logs.map((line, i) => (
+                <div key={i} dangerouslySetInnerHTML={{ __html: line }} />
+              ))
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Checklist generation ────────────────────────────────────
+
+interface QaStep {
+  section: string;
+  text: string;
+  detail?: string;
+}
+
+function parseQaSteps(qaStepsJson: string): ChecklistItem[] {
+  try {
+    const steps: QaStep[] = JSON.parse(qaStepsJson);
+    if (!Array.isArray(steps)) return [];
+    return steps.map((step, i) => ({
+      id: `qa-${i}`,
+      text: step.text,
+      detail: step.detail,
+      section: step.section || 'Core Functionality',
+      status: 'pending' as const,
+    }));
+  } catch {
+    return [];
+  }
+}
+
+function generateDefaultChecklist(): ChecklistItem[] {
+  return [
+    {
+      id: 'nav-1',
+      text: 'Navigate to the feature and verify it loads',
+      detail: 'Page renders without console errors',
+      section: 'Navigation & Access',
+      status: 'pending',
+    },
+    {
+      id: 'visual-1',
+      text: 'UI displays cleanly without layout issues',
+      detail: 'No overflow, alignment issues, or missing elements',
+      section: 'Visual Quality',
+      status: 'pending',
+    },
+  ];
+}
+
+// ─── localStorage persistence ───────────────────────────────
+
+function getStorageKey(workItemId: string) {
+  return `qa-checklist-${workItemId}`;
+}
+
+interface StoredItemState {
+  status: ChecklistItem['status'];
+  note?: string;
+  failReason?: string;
+}
+
+function loadChecklistState(workItemId: string): Record<string, StoredItemState> | null {
+  const stored = localStorage.getItem(getStorageKey(workItemId));
+  if (!stored) return null;
+  try {
+    return JSON.parse(stored);
+  } catch {
+    return null;
+  }
+}
+
+function saveChecklistState(workItemId: string, items: ChecklistItem[]) {
+  const state: Record<string, StoredItemState> = {};
+  for (const item of items) {
+    if (item.status !== 'pending' || item.note) {
+      state[item.id] = { status: item.status };
+      if (item.note) state[item.id].note = item.note;
+      if (item.failReason) state[item.id].failReason = item.failReason;
+    }
+  }
+  localStorage.setItem(getStorageKey(workItemId), JSON.stringify(state));
+}
+
+function applyStoredState(items: ChecklistItem[], stored: Record<string, StoredItemState>): ChecklistItem[] {
+  return items.map(item => {
+    const saved = stored[item.id];
+    if (saved) {
+      // Handle legacy format (plain status string) and new format (object)
+      if (typeof saved === 'string') {
+        return { ...item, status: saved as ChecklistItem['status'] };
+      }
+      return { ...item, status: saved.status, ...(saved.note ? { note: saved.note } : {}), ...(saved.failReason ? { failReason: saved.failReason } : {}) };
+    }
+    return item;
+  });
+}
+
+// ─── Build checklist from work item ─────────────────────────
+
+function buildChecklist(item: WorkItemData): ChecklistItem[] {
+  // Primary: use AI-generated QA steps if available
+  if (item.qa_steps) {
+    const steps = parseQaSteps(item.qa_steps);
+    if (steps.length > 0) return steps;
+  }
+
+  // Fallback: generic default checklist
+  return generateDefaultChecklist();
+}
+
+// ─── Main Page ──────────────────────────────────────────────
+
+export default function ProofDashboardPage() {
+  const { id } = useParams<{ id: string }>();
+  const navigate = useNavigate();
+  const { createFixServiceSession } = useSessionActions();
+  const [item, setItem] = useState<WorkItemData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [services, setServices] = useState<ServiceStatus[]>(DEFAULT_SERVICES);
+  const [proofState, setProofState] = useState<ProofRunStatus['state']>('idle');
+  const [scenarios, setScenarios] = useState<Scenario[]>([]);
+  const [scenarioRunState, setScenarioRunState] = useState<ScenarioRunnerStatus['state']>('idle');
+  const [dbChanges, setDbChanges] = useState<DbChange[]>([]);
+  const [eventLog, setEventLog] = useState<EventLogEntry[]>([]);
+  const [logs, setLogs] = useState<string[]>([]);
+  const [checklist, setChecklist] = useState<ChecklistItem[]>([]);
+  const [historicalScenarios, setHistoricalScenarios] = useState<HistoricalScenario[]>([]);
+  const [inspectorOpen, setInspectorOpen] = useState(false);
+  const [envConfig, setEnvConfig] = useState<EnvironmentConfig | null | undefined>(undefined); // undefined = loading, null = not configured
+  const [showStackModal, setShowStackModal] = useState(false);
+  const managerRef = useRef<ProofRunManager | null>(null);
+  const scenarioRunnerRef = useRef<ScenarioRunner | null>(null);
+  const proofActiveRef = useRef(false);
+  const browserOpenedRef = useRef(false);
+
+  // Open the primary service in the browser when all services go healthy
+  useEffect(() => {
+    if (proofState === 'healthy' && envConfig && !browserOpenedRef.current) {
+      browserOpenedRef.current = true;
+      const primaryService = envConfig.services.find(
+        s => s.category === 'server' && s.healthCheck === 'http'
+      ) || envConfig.services.find(s => s.port);
+      if (primaryService) {
+        openShell(`http://localhost:${primaryService.port}`);
+      }
+    }
+    if (proofState === 'idle') {
+      browserOpenedRef.current = false;
+    }
+  }, [proofState, envConfig]);
+
+  // Persist checklist state to localStorage whenever it changes
+  useEffect(() => {
+    if (id && checklist.length > 0) {
+      saveChecklistState(id, checklist);
+    }
+  }, [id, checklist]);
+
+  // Checklist actions
+  const handlePass = useCallback((itemId: string) => {
+    setChecklist(prev => prev.map(i => i.id === itemId ? { ...i, status: 'passed' as const } : i));
+  }, []);
+
+  const handleFail = useCallback((itemId: string, reason: string) => {
+    setChecklist(prev => prev.map(i => i.id === itemId ? { ...i, status: 'failed' as const, failReason: reason } : i));
+  }, []);
+
+  const handleReset = useCallback((itemId: string) => {
+    setChecklist(prev => prev.map(i => i.id === itemId ? { ...i, status: 'pending' as const, failReason: undefined } : i));
+  }, []);
+
+  const handleResetAll = useCallback(() => {
+    setChecklist(prev => prev.map(i => ({ ...i, status: 'pending' as const, failReason: undefined })));
+  }, []);
+
+  const handleApprove = useCallback(async () => {
+    if (!id) return;
+    const workItemId = parseInt(id, 10);
+    await dataBridge.updateStatus(workItemId, 'done');
+    setItem(prev => prev ? { ...prev, status: 'done' } : prev);
+  }, [id]);
+
+  const handleReject = useCallback(async () => {
+    if (!id) return;
+    const workItemId = parseInt(id, 10);
+    const failedItems = checklist.filter(i => i.status === 'failed' && i.failReason);
+    const reasons = failedItems.map(i => i.failReason!).join('; ');
+    await dataBridge.updateStatus(workItemId, 'in_progress', reasons || undefined);
+    setItem(prev => prev ? { ...prev, status: 'in_progress' } : prev);
+    // Navigate to kanban with rejection params so chat opens and reason is sent to Claude
+    if (reasons) {
+      navigate(`/?rejected=${workItemId}&reason=${encodeURIComponent(reasons)}`);
+    }
+  }, [id, checklist, navigate]);
+
+  // Wire WebSocket to DB and Flow tabs
+  const handleWsMessage = useCallback((msg: WebSocketMessage) => {
+    if (!proofActiveRef.current) return;
+
+    const time = new Date(msg.timestamp).toLocaleTimeString('en-US', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+
+    if (msg.type === 'db_delta' && msg.table && msg.action) {
+      setDbChanges(prev => {
+        const entry: DbChange = {
+          table: msg.table!,
+          op: msg.action!.toUpperCase(),
+          field: `rowid:${msg.rowid ?? '?'}`,
+          from: null,
+          to: msg.action!,
+          time,
+        };
+        const next = [...prev, entry];
+        return next.length > 200 ? next.slice(-200) : next;
+      });
+
+      setEventLog(prev => {
+        const entry: EventLogEntry = {
+          time,
+          from: 'SQLite',
+          to: msg.table!,
+          label: `${msg.action!.toUpperCase()} rowid:${msg.rowid ?? '?'}`,
+          color: msg.action === 'insert' ? '#22c55e' : msg.action === 'delete' ? '#ef4444' : '#3b82f6',
+        };
+        const next = [...prev, entry];
+        return next.length > 200 ? next.slice(-200) : next;
+      });
+    } else if (msg.type === 'db_change') {
+      setEventLog(prev => {
+        const entry: EventLogEntry = {
+          time,
+          from: 'SQLite',
+          to: 'App',
+          label: 'db_change',
+          color: '#3b82f6',
+        };
+        const next = [...prev, entry];
+        return next.length > 200 ? next.slice(-200) : next;
+      });
+    } else if (msg.type === 'test_change') {
+      setEventLog(prev => {
+        const entry: EventLogEntry = {
+          time,
+          from: 'Tests',
+          to: 'App',
+          label: 'test results updated',
+          color: '#22c55e',
+        };
+        const next = [...prev, entry];
+        return next.length > 200 ? next.slice(-200) : next;
+      });
+    }
+  }, []);
+
+  useWebSocket({ url: getWebSocketUrl(), onMessage: handleWsMessage });
+
+  const handleScenarioUpdate = useCallback((status: ScenarioRunnerStatus) => {
+    setScenarios(status.scenarios);
+    setLogs(status.logs);
+    setScenarioRunState(status.state);
+  }, []);
+
+  const handleProofUpdate = useCallback((status: ProofRunStatus) => {
+    setProofState(status.state);
+    setServices(status.services.map(s => ({
+      name: s.name,
+      port: s.port,
+      status: s.status,
+      startTime: s.startTime,
+    })));
+
+    const now = new Date().toLocaleTimeString('en-US', {
+      hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit',
+    });
+    for (const svc of status.services) {
+      if (svc.status === 'running') {
+        setEventLog(prev => {
+          if (prev.some(e => e.from === svc.name && e.label === 'running')) return prev;
+          return [...prev, {
+            time: now,
+            from: svc.name,
+            to: 'Proof',
+            label: 'running',
+            color: '#22c55e',
+          }];
+        });
+      }
+    }
+
+    if (status.state === 'healthy') {
+      proofActiveRef.current = true;
+
+      setEventLog(prev => [...prev, {
+        time: now,
+        from: 'Proof',
+        to: 'Runner',
+        label: 'all services healthy — starting scenarios',
+        color: '#3b82f6',
+      }]);
+
+      if (scenarioRunnerRef.current) {
+        scenarioRunnerRef.current.run(item?.scenario_file || null);
+      }
+    }
+  }, [item?.scenario_file]);
+
+  const isRunning = proofState === 'launching' || proofState === 'running' || scenarioRunState === 'running' || scenarios.some(s => s.status === 'running');
+
+  const initEnvironmentWithConfig = useCallback(async (config: EnvironmentConfig | null, projectCwd?: string | null) => {
+    // Tear down any existing managers — await to ensure old processes are killed
+    if (managerRef.current) {
+      await managerRef.current.stopServices();
+      managerRef.current.destroy();
+    }
+    if (scenarioRunnerRef.current) {
+      scenarioRunnerRef.current.stop();
+      scenarioRunnerRef.current.destroy();
+    }
+
+    const manager = new ProofRunManager(undefined, handleProofUpdate, config, projectCwd);
+    managerRef.current = manager;
+
+    const runner = new ScenarioRunner(handleScenarioUpdate);
+    scenarioRunnerRef.current = runner;
+  }, [handleProofUpdate, handleScenarioUpdate]);
+
+  useEffect(() => {
+    let cancelled = false;
+
+    async function initEnvironment() {
+      // Load user-configured environment and project root in parallel
+      const [config, projectCwd] = await Promise.all([
+        loadEnvironmentConfig(),
+        dataBridge.getProjectRoot(),
+      ]);
+      if (cancelled) return;
+
+      setEnvConfig(config);
+      await initEnvironmentWithConfig(config, projectCwd);
+    }
+
+    initEnvironment();
+
+    return () => {
+      cancelled = true;
+      if (managerRef.current) {
+        managerRef.current.stopServices();
+        managerRef.current.destroy();
+      }
+      if (scenarioRunnerRef.current) {
+        scenarioRunnerRef.current.stop();
+        scenarioRunnerRef.current.destroy();
+      }
+    };
+  }, [initEnvironmentWithConfig]);
+
+  useEffect(() => {
+    async function loadData() {
+      const workItemId = parseInt(id || '', 10);
+      if (isNaN(workItemId)) {
+        setLoading(false);
+        return;
+      }
+
+      try {
+        const workItem = await dataBridge.getWorkItem(workItemId);
+        setItem(workItem);
+
+        // Load checklist from stored QA steps or defaults
+        let items = buildChecklist(workItem);
+
+        // Restore saved state from localStorage
+        const stored = loadChecklistState(String(workItemId));
+        if (stored) {
+          items = applyStoredState(items, stored);
+        }
+
+        setChecklist(items);
+
+        // Load historical test results if this work item has a scenario file
+        if (workItem.scenario_file) {
+          try {
+            const testData = await dataBridge.getTestDashboardData();
+            const allFeatures = [
+              ...testData.epics.flatMap((e: { features: TestFeature[] }) => e.features),
+              ...testData.standaloneFeatures,
+            ];
+            // Find the feature matching this work item's scenario file
+            const matchingFeature = allFeatures.find(
+              (f: TestFeature) => f.featureFile === workItem.scenario_file
+            );
+            if (matchingFeature) {
+              const historical: HistoricalScenario[] = matchingFeature.scenarios.map(
+                (s: TestScenario) => ({
+                  title: s.title,
+                  status: s.status,
+                  lastRun: s.lastRun,
+                  ranBy: 'Claude',
+                  duration: s.duration,
+                  steps: s.steps,
+                })
+              );
+              setHistoricalScenarios(historical);
+            }
+          } catch {
+            // Test data not available — that's fine, sidebar stays empty
+          }
+        }
+      } catch {
+        setItem(null);
+      }
+      setLoading(false);
+    }
+    loadData();
+  }, [id]);
+
+  // When ProjectStackSection saves config from the modal, reinit ProofRunManager
+  const handleConfigSaved = useCallback(async (config: EnvironmentConfig) => {
+    setEnvConfig(config);
+    setShowStackModal(false);
+
+    // Tear down old manager and create a new one with the saved config
+    if (managerRef.current) {
+      managerRef.current.stopServices();
+      managerRef.current.destroy();
+    }
+    const projectCwd = await dataBridge.getProjectRoot();
+    const manager = new ProofRunManager(undefined, handleProofUpdate, config, projectCwd);
+    managerRef.current = manager;
+  }, [handleProofUpdate]);
+
+  // Launch environment on user action (Open in App button)
+  const handleLaunch = useCallback(() => {
+    const manager = managerRef.current;
+    if (manager) {
+      manager.startServices();
+      proofActiveRef.current = true;
+    }
+  }, []);
+
+  // Fix with Claude: open chat session with crashed service context
+  const handleFixWithClaude = useCallback(() => {
+    const crashedServices = services
+      .filter(s => s.status === 'crashed')
+      .map(s => ({ name: s.name, port: s.port }));
+    if (crashedServices.length > 0) {
+      createFixServiceSession(crashedServices);
+    }
+  }, [services, createFixServiceSession]);
+
+  if (loading) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <div className="text-zinc-400">Loading QA environment...</div>
+      </div>
+    );
+  }
+
+  if (!item) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <div className="text-center">
+          <div className="text-zinc-400 mb-3" data-testid="not-found-message">Work item not found</div>
+          <Link
+            to="/"
+            viewTransition
+            className="text-[13px] font-medium transition-colors duration-200"
+            style={{ color: '#819D9F' }}
+            data-testid="return-to-board-link"
+          >
+            &larr; Return to kanban board
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+
+  const completedCount = checklist.filter(i => i.status === 'passed').length;
+
+  // Gate: no environment config configured yet
+  if (envConfig === null && item) {
+    return (
+      <div className="h-full overflow-auto" style={{ padding: '24px 32px' }}>
+        {/* Header */}
+        <div
+          className="bg-white dark:bg-zinc-800 rounded-xl px-5 py-4 mb-6"
+          style={{ boxShadow: shadow.md }}
+        >
+          <div className="flex items-center gap-3">
+            <Link
+              to={`/work/${item.id}`}
+              viewTransition
+              className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors duration-200"
+            >
+              &larr;
+            </Link>
+            <div>
+              <div className="text-[11px] text-zinc-400 font-mono">#{item.id} QA Environment</div>
+              <span className="text-[16px] font-semibold text-zinc-900 dark:text-zinc-100">
+                {item.title}
+              </span>
+            </div>
+          </div>
+        </div>
+
+        {/* Empty state */}
+        <div className="flex items-center justify-center" style={{ minHeight: 400 }}>
+          <div className="text-center max-w-md">
+            <svg viewBox="0 0 120 120" fill="none" className="w-28 h-28 mx-auto mb-6">
+              <rect x="20" y="60" width="30" height="40" rx="6" className="fill-zinc-100 stroke-zinc-300 dark:fill-zinc-800 dark:stroke-zinc-600" strokeWidth="2"/>
+              <rect x="45" y="40" width="30" height="60" rx="6" className="fill-zinc-100 stroke-zinc-300 dark:fill-zinc-800 dark:stroke-zinc-600" strokeWidth="2"/>
+              <rect x="70" y="50" width="30" height="50" rx="6" className="fill-zinc-100 stroke-zinc-300 dark:fill-zinc-800 dark:stroke-zinc-600" strokeWidth="2"/>
+              <circle cx="35" cy="75" r="4" className="fill-zinc-300 dark:fill-zinc-600"/>
+              <circle cx="60" cy="55" r="4" className="fill-zinc-300 dark:fill-zinc-600"/>
+              <circle cx="85" cy="65" r="4" className="fill-zinc-300 dark:fill-zinc-600"/>
+              <path d="M39 75 L56 55" className="stroke-zinc-300 dark:stroke-zinc-600" strokeWidth="1.5" strokeDasharray="4 3"/>
+              <path d="M64 55 L81 65" className="stroke-zinc-300 dark:stroke-zinc-600" strokeWidth="1.5" strokeDasharray="4 3"/>
+            </svg>
+            <h3 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
+              Set up your project stack first
+            </h3>
+            <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-7 leading-relaxed">
+              QA needs to know what services your project runs — a dev server, a database, an API.
+              Let Claude figure it out so testing just works.
+            </p>
+            <button
+              className="px-5 py-2.5 text-[14px] font-medium rounded-xl transition-colors duration-200"
+              style={{ backgroundColor: '#819D9F', color: 'white' }}
+              onClick={() => setShowStackModal(true)}
+              data-testid="setup-stack-button"
+            >
+              Set up project stack
+            </button>
+          </div>
+        </div>
+
+        {/* Modal */}
+        {showStackModal && createPortal(
+          <div
+            className="fixed inset-0 z-50 flex items-center justify-center"
+            onClick={(e) => { if (e.target === e.currentTarget) setShowStackModal(false); }}
+          >
+            <div className="absolute inset-0 bg-black/40" />
+            <div
+              className="relative bg-white dark:bg-zinc-900 rounded-2xl w-full max-w-2xl max-h-[80vh] overflow-auto p-6"
+              style={{ boxShadow: shadow.lg }}
+            >
+              <button
+                className="absolute top-4 right-4 text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 text-lg cursor-pointer"
+                onClick={() => setShowStackModal(false)}
+              >
+                &times;
+              </button>
+              <ProjectStackSection initialConfig={null} onConfigSaved={handleConfigSaved} />
+            </div>
+          </div>,
+          document.body
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <style>{`
+        @keyframes ping {
+          75%, 100% { transform: scale(2); opacity: 0; }
+        }
+      `}</style>
+
+      <div className="h-full overflow-auto" style={{ padding: '24px 32px', paddingBottom: inspectorOpen ? 340 : 80 }}>
+        {/* Header */}
+        <div
+          className="bg-white dark:bg-zinc-800 rounded-xl px-5 py-4 mb-4"
+          style={{ boxShadow: shadow.md }}
+        >
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Link
+                to={`/work/${item.id}`}
+                viewTransition
+                className="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300 transition-colors duration-200"
+              >
+                &larr;
+              </Link>
+              <div>
+                <div className="text-[11px] text-zinc-400 font-mono">#{item.id} QA Environment</div>
+                <span className="text-[16px] font-semibold text-zinc-900 dark:text-zinc-100">
+                  {item.title}
+                </span>
+              </div>
+              {item.mode && (
+                <span
+                  className="px-2 py-0.5 text-[11px] font-medium rounded-lg"
+                  style={{ backgroundColor: '#FCEEE6', color: '#9E4A1E' }}
+                >
+                  {item.mode}
+                </span>
+              )}
+            </div>
+            <span className="text-[13px] text-zinc-500">{completedCount}/{checklist.length} verified</span>
+          </div>
+        </div>
+
+        {/* Environment Status Bar */}
+        <EnvironmentBar services={services} proofState={proofState} onLaunch={handleLaunch} onFixWithClaude={handleFixWithClaude} />
+
+        {/* Main Content: Checklist + Scenario Sidebar */}
+        <div className="flex gap-4" style={{ minHeight: 420 }}>
+          {/* Checklist (Primary) */}
+          <div className="flex-1">
+            <QAChecklist
+              items={checklist}
+              onPass={handlePass}
+              onFail={handleFail}
+              onReset={handleReset}
+              onResetAll={handleResetAll}
+              onApprove={handleApprove}
+              onReject={handleReject}
+            />
+          </div>
+
+          {/* Scenario Sidebar */}
+          <div className="w-[320px] shrink-0">
+            <ScenarioSidebar scenarios={scenarios} historicalScenarios={historicalScenarios} />
+          </div>
+        </div>
+      </div>
+
+      {/* Inspector Drawer */}
+      <InspectorDrawer
+        dbChanges={dbChanges}
+        eventLog={eventLog}
+        logs={logs}
+        isOpen={inspectorOpen}
+        onToggle={() => setInspectorOpen(prev => !prev)}
+      />
+    </>
+  );
+}