jettypod 4.4.118 → 4.4.121

package/apps/dashboard/components/settings/ProjectStackSection.tsx

@@ -0,0 +1,948 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { Button } from '@/components/ui/Button';
+import { useSessionActions, useSessionState } from '@/contexts/ClaudeSessionContext';
+import { getRegistry } from '@/lib/stream-manager-registry';
+import type { StreamState } from '@/lib/session-stream-manager';
+import { dataBridge } from '@/lib/data-bridge';
+import { invoke } from '@/lib/tauri';
+import type { EnvironmentConfig, ServiceDefinition, ServiceCategory, ContextItem } from '@/lib/environment-config';
+import { validateCategory, validateFaIcon } from '@/lib/environment-config';
+import { runVerification } from '@/lib/environment-verification';
+import type { VerificationResult } from '@/lib/environment-verification';
+import type { ServiceStatus } from '@/lib/proof-run';
+
+/** Extended service with optional role from Claude analysis */
+interface ProposedService extends ServiceDefinition {
+  role?: string;
+}
+
+interface ProjectStackSectionProps {
+  initialConfig: EnvironmentConfig | null;
+  onConfigSaved?: (config: EnvironmentConfig) => void;
+}
+
+/** Group services by their launch order */
+function groupByOrder<T extends { order: number }>(services: T[]): Map<number, T[]> {
+  const groups = new Map<number, T[]>();
+  const sorted = [...services].sort((a, b) => a.order - b.order);
+  for (const svc of sorted) {
+    const existing = groups.get(svc.order);
+    if (existing) existing.push(svc);
+    else groups.set(svc.order, [svc]);
+  }
+  return groups;
+}
+
+/** QA-launchable categories (Zone 1) */
+const LAUNCH_CATEGORIES: ServiceCategory[] = ['infrastructure', 'server'];
+/** Context categories (Zone 2) */
+const CONTEXT_CATEGORIES: ServiceCategory[] = ['managed', 'test-runner', 'build-tool'];
+
+/** Split services into launch zone and context zone */
+function splitByZone(services: ServiceDefinition[]) {
+  const launch = services.filter(s => LAUNCH_CATEGORIES.includes(s.category));
+  const context = services.filter(s => CONTEXT_CATEGORIES.includes(s.category));
+  return { launch, context };
+}
+
+/** Default FA icon per category */
+const DEFAULT_ICONS: Record<ServiceCategory, string> = {
+  server: 'fa-server',
+  infrastructure: 'fa-cubes',
+  managed: 'fa-cloud',
+  'test-runner': 'fa-flask',
+  'build-tool': 'fa-hammer',
+};
+
+/** Category display labels */
+const CATEGORY_LABELS: Record<ServiceCategory, string> = {
+  server: 'Dev Server',
+  infrastructure: 'Infrastructure',
+  managed: 'Managed Service',
+  'test-runner': 'Test Runner',
+  'build-tool': 'Build Tool',
+};
+
+function faIcon(svc: { faIcon?: string; category: ServiceCategory }): string {
+  return svc.faIcon || DEFAULT_ICONS[svc.category] || 'fa-gear';
+}
+
+export function ProjectStackSection({ initialConfig, onConfigSaved }: ProjectStackSectionProps) {
+  const { createSkillSession, createFixServiceSession } = useSessionActions();
+  const { sessions } = useSessionState();
+  const sessionsRef = useRef(sessions);
+  useEffect(() => { sessionsRef.current = sessions; }, [sessions]);
+  const [config, setConfig] = useState<EnvironmentConfig | null>(initialConfig);
+  const [uiState, setUiState] = useState<'empty' | 'analyzing' | 'proposal' | 'verifying' | 'verification-failed' | 'configured'>(
+    initialConfig ? 'configured' : 'empty'
+  );
+  const [proposedServices, setProposedServices] = useState<ProposedService[]>([]);
+  const [analysisMessages, setAnalysisMessages] = useState<string[]>([]);
+  const [verificationServices, setVerificationServices] = useState<ServiceStatus[]>([]);
+  const [verificationResult, setVerificationResult] = useState<VerificationResult | null>(null);
+  const [expandedService, setExpandedService] = useState<string | null>(null);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [connectionStatus, setConnectionStatus] = useState<Record<string, 'testing' | 'connected' | 'failed'>>({});
+  const [testingConnections, setTestingConnections] = useState(false);
+
+  const handleTestAllConnections = async (services: Array<{ name: string; port?: number; connectionUrl?: string }>) => {
+    setTestingConnections(true);
+    const newStatus: Record<string, 'testing'> = {};
+    for (const svc of services) newStatus[svc.name] = 'testing';
+    setConnectionStatus(prev => ({ ...prev, ...newStatus }));
+
+    await Promise.all(services.map(async (svc) => {
+      try {
+        // Extract host and port from connectionUrl or fall back to localhost:port
+        let host = 'localhost';
+        let port = svc.port;
+        if (svc.connectionUrl) {
+          try {
+            const parsed = new URL(svc.connectionUrl);
+            host = parsed.hostname || 'localhost';
+            if (parsed.port) port = parseInt(parsed.port, 10);
+          } catch {
+            // Not a valid URL — treat as host:port or just use defaults
+          }
+        }
+        if (!port) {
+          setConnectionStatus(prev => ({ ...prev, [svc.name]: 'failed' }));
+          return;
+        }
+        const ok = await invoke<boolean>('test_tcp_connection', { host, port, timeoutMs: 3000 });
+        setConnectionStatus(prev => ({ ...prev, [svc.name]: ok ? 'connected' : 'failed' }));
+      } catch {
+        setConnectionStatus(prev => ({ ...prev, [svc.name]: 'failed' }));
+      }
+    }));
+    setTestingConnections(false);
+  };
+  const isAnalyzing = useRef(false);
+
+  // On mount: reconnect to in-progress analysis, or fetch saved config
+  useEffect(() => {
+    // Check if there's an active analysis session still running
+    for (const [id, session] of sessions) {
+      if (session.title === 'Project Stack Analysis' && (session.status === 'streaming' || session.status === 'connecting')) {
+        // Reconnect: show analyzing state and wait for completion
+        setUiState('analyzing');
+        setAnalysisMessages(['Claude is analyzing your codebase...']);
+        isAnalyzing.current = true;
+
+        waitForSession(id).then(() => {
+          setAnalysisMessages(prev => [...prev, 'Parsing results...']);
+          const services = parseServicesFromMessages(id);
+          if (services && services.length > 0) {
+            setProposedServices(services);
+            setUiState('proposal');
+          } else {
+            setErrorMessage("We couldn't find any services in your project. Make sure your project has a package.json or config files, then try again.");
+            setUiState('empty');
+          }
+        }).catch(() => {
+          setErrorMessage('Analysis failed. Please try again.');
+          setUiState('empty');
+        }).finally(() => {
+          isAnalyzing.current = false;
+        });
+        return; // Found active session, don't check saved config
+      }
+    }
+
+    // No active analysis — check for saved config if initialConfig was stale
+    if (!initialConfig) {
+      dataBridge.getEnvironmentConfig().then(freshConfig => {
+        if (freshConfig && freshConfig.services.length > 0) {
+          setConfig(freshConfig);
+          setUiState('configured');
+        }
+      });
+    }
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const waitForSession = useCallback((sessionId: string, timeoutMs = 300000): Promise<void> => {
+    return new Promise((resolve, reject) => {
+      const registry = getRegistry();
+      let settled = false;
+
+      const settle = (fn: () => void) => {
+        if (settled) return;
+        settled = true;
+        registry.off('stateChange', handler);
+        clearInterval(pollTimer);
+        clearTimeout(timeoutTimer);
+        fn();
+      };
+
+      // Check status from stream manager directly (source of truth, no React delay)
+      const checkStatus = () => {
+        const manager = registry.get(sessionId);
+        if (manager?.status === 'done') { settle(() => resolve()); return true; }
+        if (manager?.status === 'error') { settle(() => reject(new Error('Session failed'))); return true; }
+        // Fallback: check React state
+        const session = sessionsRef.current.get(sessionId);
+        if (session?.status === 'done') { settle(() => resolve()); return true; }
+        if (session?.status === 'error') { settle(() => reject(new Error(session.error || 'Session failed'))); return true; }
+        return false;
+      };
+
+      // Check immediately
+      if (checkStatus()) return;
+
+      // Listen for registry events (primary path)
+      const handler = (changedId: string, state: StreamState) => {
+        if (changedId !== sessionId) return;
+        if (state.status === 'done') settle(() => resolve());
+        else if (state.status === 'error') settle(() => reject(new Error(state.error || 'Session failed')));
+      };
+      registry.on('stateChange', handler);
+
+      // Poll stream manager status every 1s as backup (catches missed events)
+      const pollTimer = setInterval(() => { checkStatus(); }, 1000);
+
+      // Timeout
+      const timeoutTimer = setTimeout(() => {
+        if (!checkStatus()) {
+          settle(() => reject(new Error('Analysis timed out.')));
+        }
+      }, timeoutMs);
+    });
+  }, []);
+
+  const parseServicesFromMessages = useCallback((sessionId: string): ProposedService[] | null => {
+    // Read directly from stream manager (source of truth, no React state delay)
+    const registry = getRegistry();
+    const manager = registry.get(sessionId);
+    const messages = manager?.messages ?? [];
+    if (messages.length === 0) return null;
+
+    // Look through assistant messages for a JSON block
+    for (const msg of [...messages].reverse()) {
+      if (msg.type !== 'assistant' || !msg.content) continue;
+
+      // Try to extract JSON from code block first
+      const codeBlockMatch = msg.content.match(/```(?:json)?\s*\n?([\s\S]*?)\n?```/);
+      const jsonStr = codeBlockMatch ? codeBlockMatch[1].trim() : msg.content.trim();
+
+      try {
+        const parsed = JSON.parse(jsonStr);
+        if (parsed?.services && Array.isArray(parsed.services)) {
+          return parsed.services.map((s: Record<string, unknown>, i: number) => ({
+            name: String(s.name || `Service ${i + 1}`),
+            command: String(s.command || ''),
+            port: Number(s.port) || 0,
+            healthCheck: String(s.healthCheck || 'http'),
+            readyPattern: String(s.readyPattern || ''),
+            optional: Boolean(s.optional),
+            order: Number(s.order) || i + 1,
+            role: s.role ? String(s.role) : undefined,
+            category: validateCategory(s.category),
+            faIcon: validateFaIcon(s.faIcon),
+          }));
+        }
+      } catch {
+        // Not valid JSON, try next message
+      }
+    }
+    return null;
+  }, []);
+
+  const handleAnalyze = async () => {
+    if (isAnalyzing.current) return;
+    isAnalyzing.current = true;
+    setUiState('analyzing');
+    setAnalysisMessages([]);
+    setErrorMessage(null);
+
+    try {
+      const analysisPrompt = `Analyze this project's codebase to identify all services and processes needed for development and testing.
+
+Look at:
+- package.json (scripts, workspaces)
+- docker-compose files
+- Procfile, Makefile
+- Any configuration files
+
+For each service found, determine the startup command, port, how to check if it's running, and startup order.
+
+Classify each service into one of these categories:
+- "server" — Dev servers that serve the app (Next.js, Vite, Express API servers)
+- "infrastructure" — Local infrastructure that must start before servers (Docker containers, local databases, Redis)
+- "managed" — External managed services not started locally (Supabase, AWS RDS, Firebase, Stripe)
+- "test-runner" — Test frameworks (Jest, Vitest, Playwright, Cypress)
+- "build-tool" — Build tools and bundlers (Webpack, Turbopack, esbuild, TypeScript compiler)
+
+Pick a FontAwesome icon class for each service (e.g. "fa-server", "fa-database", "fa-cloud", "fa-flask", "fa-hammer").
+
+Respond with ONLY a JSON code block in this exact format (no other text before or after):
+
+\`\`\`json
+{
+  "services": [
+    {
+      "name": "Human-friendly name",
+      "command": "shell command to start",
+      "port": 3000,
+      "healthCheck": "http or tcp or ws or stdout",
+      "readyPattern": "stdout text when ready or empty string",
+      "optional": false,
+      "order": 1,
+      "role": "What this service does",
+      "category": "server",
+      "faIcon": "fa-server"
+    }
+  ]
+}
+\`\`\``;
+
+      setAnalysisMessages(['Starting Claude analysis...']);
+
+      const sessionId = await createSkillSession('analyze-project-stack', 'Project Stack Analysis', analysisPrompt);
+      if (!sessionId) {
+        throw new Error('Failed to create analysis session');
+      }
+
+      setAnalysisMessages(prev => [...prev, 'Claude is reading your code...']);
+
+      // Wait for Claude to finish (up to 2 minutes)
+      await waitForSession(sessionId);
+
+      setAnalysisMessages(prev => [...prev, 'Parsing results...']);
+
+      // Parse services from Claude's response
+      const services = parseServicesFromMessages(sessionId);
+      if (services && services.length > 0) {
+        setProposedServices(services);
+        setUiState('proposal');
+      } else {
+        // Fallback: check if Claude wrote directly to config
+        const updatedConfig = await dataBridge.getEnvironmentConfig();
+        if (updatedConfig && updatedConfig.services.length > 0) {
+          setProposedServices(updatedConfig.services);
+          setUiState('proposal');
+        } else {
+          setErrorMessage("We couldn't find any services in your project. Make sure your project has a package.json or config files, then try again.");
+          setUiState('empty');
+        }
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Something went wrong analyzing your project. Please try again.';
+      setErrorMessage(message);
+      setUiState('empty');
+    } finally {
+      isAnalyzing.current = false;
+    }
+  };
+
+  const handleAccept = async () => {
+    const { launch, context } = splitByZone(proposedServices);
+    const newConfig: EnvironmentConfig = {
+      services: launch.map(svc => ({
+        name: svc.name,
+        command: svc.command,
+        port: svc.port,
+        healthCheck: svc.healthCheck,
+        readyPattern: svc.readyPattern,
+        optional: svc.optional ?? false,
+        order: svc.order,
+        category: svc.category || 'server',
+        faIcon: svc.faIcon,
+      })),
+      contextItems: context.map(svc => ({
+        name: svc.name,
+        category: svc.category as ContextItem['category'],
+        faIcon: svc.faIcon,
+        command: svc.command || undefined,
+      })),
+      readyWhen: 'required',
+      teardownOnClose: true,
+    };
+    try {
+      const success = await dataBridge.setEnvironmentConfig(newConfig);
+      if (!success) throw new Error('Save returned false');
+      setConfig(newConfig);
+      onConfigSaved?.(newConfig);
+
+      // Verify the environment actually launches
+      setUiState('verifying');
+      setVerificationServices([]);
+      setVerificationResult(null);
+      const projectRoot = await dataBridge.getProjectRoot();
+      const result = await runVerification(newConfig, projectRoot, (update) => {
+        setVerificationServices([...update.services]);
+        if (update.result) setVerificationResult(update.result);
+      });
+
+      if (result.allPassed) {
+        setUiState('configured');
+      } else {
+        setVerificationResult(result);
+        setUiState('verification-failed');
+      }
+    } catch {
+      setErrorMessage('Failed to save your configuration. Please try again.');
+    }
+  };
+
+  const handleRemoveService = (serviceName: string) => {
+    setProposedServices(prev => prev.filter(s => s.name !== serviceName));
+  };
+
+  const handleRescan = () => {
+    handleAnalyze();
+  };
+
+  // ── Empty state ──
+  if (uiState === 'empty') {
+    return (
+      <section id="project-stack">
+        <div className="text-center py-16">
+          <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">
+            What does your project need to run?
+          </h3>
+          <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-7 max-w-md mx-auto leading-relaxed">
+            Every project has pieces that work together — a website, an API, a database.
+            Claude can figure out what yours needs so QA testing just works.
+          </p>
+          {errorMessage && (
+            <div className="mb-5 mx-auto max-w-md rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 px-4 py-3">
+              <p className="text-sm text-red-600 dark:text-red-400">{errorMessage}</p>
+            </div>
+          )}
+          <Button onClick={handleAnalyze}>
+            Let Claude figure it out
+          </Button>
+          <p className="text-xs text-zinc-400 dark:text-zinc-600 mt-4">
+            Claude will analyze your codebase. You&apos;ll review everything before it&apos;s saved.
+          </p>
+        </div>
+      </section>
+    );
+  }
+
+  // ── Analyzing state ──
+  if (uiState === 'analyzing') {
+    return (
+      <section id="project-stack">
+        <div className="text-center py-12">
+          <div className="w-16 h-16 rounded-full mx-auto mb-6 flex items-center justify-center bg-blue-100 dark:bg-blue-950" style={{ animation: 'pulse 2s ease-in-out infinite' }}>
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-blue-500 dark:text-blue-400">
+              <circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/>
+            </svg>
+          </div>
+          <h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
+            Learning about your project...
+          </h3>
+          <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-8">
+            Claude is reading your code to understand how everything fits together
+          </p>
+          <div className="max-w-sm mx-auto text-left space-y-3">
+            {analysisMessages.map((msg, i) => (
+              <div key={i} className="flex items-center gap-3 text-sm">
+                <span className="text-green-500 flex-shrink-0">✓</span>
+                <span className="text-zinc-700 dark:text-zinc-300">{msg}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // ── Proposal state ──
+  if (uiState === 'proposal') {
+    const { launch, context } = splitByZone(proposedServices);
+    const launchGroups = groupByOrder(launch);
+    const launchSteps = [...launchGroups.keys()];
+    const managed = context.filter(s => s.category === 'managed');
+    const runners = context.filter(s => s.category === 'test-runner');
+    const buildTools = context.filter(s => s.category === 'build-tool');
+
+    return (
+      <section id="project-stack">
+        {/* Intro card */}
+        <div className="rounded-xl p-5 mb-6 border" style={{ background: 'linear-gradient(135deg, #eff6ff 0%, #eef2ff 100%)', borderColor: '#bfdbfe' }}>
+          <div className="dark:hidden">
+            <h2 className="text-base font-semibold text-zinc-900 mb-1">Here&apos;s what makes your project run</h2>
+            <p className="text-sm text-zinc-600 leading-relaxed">
+              Claude found {proposedServices.length} piece{proposedServices.length !== 1 ? 's' : ''} in your stack.
+              Look them over — you can remove anything that doesn&apos;t belong.
+            </p>
+          </div>
+        </div>
+        <div className="hidden dark:block rounded-xl p-5 mb-6 border" style={{ background: 'linear-gradient(135deg, #172554 0%, #1e1b4b 100%)', borderColor: '#1e40af' }}>
+          <h2 className="text-base font-semibold text-zinc-100 mb-1">Here&apos;s what makes your project run</h2>
+          <p className="text-sm text-zinc-400 leading-relaxed">
+            Claude found {proposedServices.length} piece{proposedServices.length !== 1 ? 's' : ''} in your stack.
+            Look them over — you can remove anything that doesn&apos;t belong.
+          </p>
+        </div>
+
+        {proposedServices.length === 0 ? (
+          <div className="text-center py-8">
+            <p className="text-sm text-amber-600 dark:text-amber-400 mb-4">
+              You&apos;ve removed all services. At least one service is needed to save your project stack.
+            </p>
+          </div>
+        ) : (
+          <>
+            {/* Zone 1: QA Launch */}
+            {launch.length > 0 && (
+              <div className="mb-8">
+                <div className="flex items-center gap-2 mb-4">
+                  <i className="fa-solid fa-rocket text-xs text-blue-500" />
+                  <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">JettyPod starts these for QA</h3>
+                </div>
+                <div className="ml-1">
+                  {launchSteps.map((order, stepIdx) => {
+                    const services = launchGroups.get(order)!;
+                    const isLast = stepIdx === launchSteps.length - 1;
+                    return (
+                      <div key={order} className="flex gap-4">
+                        <div className="flex flex-col items-center w-5 flex-shrink-0">
+                          <div className="w-2.5 h-2.5 rounded-full bg-blue-500 mt-5 flex-shrink-0" />
+                          {!isLast && <div className="w-0.5 flex-1 bg-zinc-200 dark:bg-zinc-700" />}
+                        </div>
+                        <div className="flex-1 pb-4">
+                          <div className="text-xs font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wide mb-2">
+                            {stepIdx === 0 ? 'Starts first' : `Step ${stepIdx + 1}`}{services.length > 1 ? ' — in parallel' : ''}
+                          </div>
+                          <div className="space-y-2">
+                            {services.map(svc => (
+                              <div key={svc.name} className="p-4 rounded-xl border border-dashed border-blue-300 dark:border-blue-800 bg-white dark:bg-zinc-800/50 hover:border-blue-400 dark:hover:border-blue-600 transition-colors">
+                                <div className="flex items-start justify-between">
+                                  <div className="flex items-center gap-3">
+                                    <div className="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 bg-blue-50 dark:bg-blue-950 text-blue-500 dark:text-blue-400">
+                                      <i className={`fa-solid ${faIcon(svc)}`} />
+                                    </div>
+                                    <div>
+                                      <div className="text-base font-semibold text-zinc-900 dark:text-zinc-100">{svc.name}</div>
+                                      {(svc as ProposedService).role && <div className="text-xs text-zinc-500 dark:text-zinc-400 mt-0.5">{(svc as ProposedService).role}</div>}
+                                    </div>
+                                  </div>
+                                  <div className="flex gap-1">
+                                    <button onClick={() => setExpandedService(expandedService === svc.name ? null : svc.name)} className="px-3 py-1 text-xs text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-700 rounded-lg cursor-pointer">Details</button>
+                                    <button onClick={() => handleRemoveService(svc.name)} className="px-3 py-1 text-xs text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg cursor-pointer">Remove</button>
+                                  </div>
+                                </div>
+                                <div className="flex gap-1.5 mt-2 flex-wrap">
+                                  <span className="text-xs px-2.5 py-0.5 rounded-full bg-zinc-100 text-zinc-500 dark:bg-zinc-700 dark:text-zinc-400">{CATEGORY_LABELS[svc.category]}</span>
+                                  <span className="text-xs px-2.5 py-0.5 rounded-full bg-zinc-100 text-zinc-500 dark:bg-zinc-700 dark:text-zinc-400">{svc.command}</span>
+                                </div>
+                                {expandedService === svc.name && (
+                                  <div className="mt-3 pt-3 border-t border-zinc-200 dark:border-zinc-700 grid grid-cols-2 gap-2 text-xs">
+                                    <div><span className="text-zinc-400">Port: </span><span className="font-mono text-zinc-600 dark:text-zinc-400">{svc.port}</span></div>
+                                    <div><span className="text-zinc-400">Check: </span><span className="font-mono text-zinc-600 dark:text-zinc-400">{svc.healthCheck}</span></div>
+                                    {svc.readyPattern && <div className="col-span-2"><span className="text-zinc-400">Ready signal: </span><span className="font-mono text-zinc-600 dark:text-zinc-400">&quot;{svc.readyPattern}&quot;</span></div>}
+                                  </div>
+                                )}
+                              </div>
+                            ))}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                  {/* Ready for QA indicator */}
+                  <div className="flex gap-4">
+                    <div className="flex flex-col items-center w-5 flex-shrink-0">
+                      <div className="w-3 h-3 rounded-full bg-green-500 mt-1 flex-shrink-0 ring-4 ring-green-500/20" />
+                    </div>
+                    <div className="text-xs font-semibold text-green-600 dark:text-green-400 uppercase tracking-wide">Ready for QA</div>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Zone 2: Context */}
+            {context.length > 0 && (
+              <div className="mb-6">
+                <div className="flex items-center gap-2 mb-4">
+                  <i className="fa-solid fa-layer-group text-xs text-zinc-400" />
+                  <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Also part of your stack</h3>
+                </div>
+
+                {/* Managed services */}
+                {managed.length > 0 && (
+                  <div className="mb-4">
+                    <div className="flex items-center justify-between mb-2">
+                      <div className="text-xs font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wide">Managed Services</div>
+                      <button onClick={() => handleTestAllConnections(managed.map(s => ({ name: s.name, port: s.port })))} disabled={testingConnections} className="px-3 py-1.5 text-xs text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-950/50 hover:bg-purple-100 dark:hover:bg-purple-900/50 rounded-lg cursor-pointer disabled:opacity-50">{testingConnections ? 'Testing...' : 'Test Connections'}</button>
+                    </div>
+                    <div className="space-y-2">
+                      {managed.map(svc => (
+                        <div key={svc.name} className="p-4 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50">
+                          <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-3">
+                              <div className="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 bg-purple-50 dark:bg-purple-950 text-purple-500 dark:text-purple-400">
+                                <i className={`fa-solid ${faIcon(svc)}`} />
+                              </div>
+                              <div>
+                                <div className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{svc.name}</div>
+                                {connectionStatus[svc.name] && (
+                                  <div className="flex items-center gap-1.5 mt-0.5">
+                                    <span className={`w-2 h-2 rounded-full ${connectionStatus[svc.name] === 'connected' ? 'bg-green-500' : connectionStatus[svc.name] === 'failed' ? 'bg-red-500' : 'bg-amber-400 animate-pulse'}`} />
+                                    <span className="text-xs text-zinc-400">
+                                      {connectionStatus[svc.name] === 'connected' ? 'Connected' : connectionStatus[svc.name] === 'failed' ? 'Connection failed' : 'Testing...'}
+                                    </span>
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+                            <button onClick={() => handleRemoveService(svc.name)} className="px-3 py-1 text-xs text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg cursor-pointer">Remove</button>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Test runners */}
+                {runners.length > 0 && (
+                  <div className="mb-4">
+                    <div className="text-xs font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wide mb-2">Test Runners</div>
+                    <div className="grid grid-cols-2 gap-2">
+                      {runners.map(svc => (
+                        <div key={svc.name} className="p-3 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50 flex items-center justify-between">
+                          <div className="flex items-center gap-2.5">
+                            <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-amber-50 dark:bg-amber-950 text-amber-500 dark:text-amber-400 text-sm">
+                              <i className={`fa-solid ${faIcon(svc)}`} />
+                            </div>
+                            <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{svc.name}</span>
+                          </div>
+                          <div className="flex gap-1">
+                            <button className="px-2.5 py-1 text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/50 hover:bg-amber-100 dark:hover:bg-amber-900/50 rounded-lg cursor-pointer">Run</button>
+                            <button onClick={() => handleRemoveService(svc.name)} className="px-2 py-1 text-xs text-red-400 hover:bg-red-50 dark:hover:bg-red-950/30 rounded-lg cursor-pointer">&times;</button>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Build tools */}
+                {buildTools.length > 0 && (
+                  <div className="mb-4">
+                    <div className="text-xs font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wide mb-2">Build Tools</div>
+                    <div className="flex gap-2 flex-wrap">
+                      {buildTools.map(svc => (
+                        <div key={svc.name} className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 text-sm text-zinc-600 dark:text-zinc-400">
+                          <i className={`fa-solid ${faIcon(svc)} text-xs`} />
+                          <span>{svc.name}</span>
+                          <button onClick={() => handleRemoveService(svc.name)} className="text-xs text-red-400 hover:text-red-500 cursor-pointer ml-1">&times;</button>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </>
+        )}
+
+        {launch.length === 0 && proposedServices.length > 0 && (
+          <div className="mb-4 rounded-lg bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 px-4 py-3">
+            <p className="text-sm text-amber-600 dark:text-amber-400">
+              No launchable services found. QA needs at least one server or infrastructure service to start.
+            </p>
+          </div>
+        )}
+        {errorMessage && (
+          <div className="mb-4 rounded-lg bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-800 px-4 py-3">
+            <p className="text-sm text-red-600 dark:text-red-400">{errorMessage}</p>
+          </div>
+        )}
+        <div className="flex gap-3 mt-4">
+          <Button onClick={handleAccept} disabled={proposedServices.length === 0 || launch.length === 0}>
+            Looks good, save it
+          </Button>
+          <Button onClick={handleRescan} variant="ghost">
+            Scan again
+          </Button>
+        </div>
+      </section>
+    );
+  }
+
+  // ── Verifying state ──
+  if (uiState === 'verifying') {
+    return (
+      <section id="project-stack">
+        <div className="text-center py-12">
+          <div className="w-16 h-16 rounded-full mx-auto mb-6 flex items-center justify-center bg-green-100 dark:bg-green-950" style={{ animation: 'pulse 2s ease-in-out infinite' }}>
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="text-green-500 dark:text-green-400">
+              <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
+            </svg>
+          </div>
+          <h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-1">
+            Verifying your environment...
+          </h3>
+          <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-8">
+            Starting each service to make sure everything launches correctly
+          </p>
+          <div className="max-w-sm mx-auto text-left space-y-3">
+            {verificationServices.map(svc => (
+              <div key={svc.name} className="flex items-center gap-3 text-sm">
+                {svc.status === 'running' ? (
+                  <span className="text-green-500 flex-shrink-0">✓</span>
+                ) : svc.status === 'crashed' ? (
+                  <span className="text-red-500 flex-shrink-0">✗</span>
+                ) : (
+                  <span className="text-amber-400 flex-shrink-0 animate-pulse">●</span>
+                )}
+                <span className="text-zinc-700 dark:text-zinc-300">{svc.name}</span>
+                {svc.port && <span className="text-zinc-400 text-xs">:{svc.port}</span>}
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // ── Verification failed state ──
+  if (uiState === 'verification-failed' && verificationResult) {
+    return (
+      <section id="project-stack">
+        <div className="py-8">
+          <div className="rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-950/30 p-6 mb-6">
+            <div className="flex items-start gap-3 mb-4">
+              <div className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 bg-red-100 dark:bg-red-900/50 text-red-500">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                  <circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/>
+                </svg>
+              </div>
+              <div>
+                <h3 className="text-base font-semibold text-red-800 dark:text-red-300 mb-1">
+                  Some services didn&apos;t start
+                </h3>
+                <p className="text-sm text-red-600 dark:text-red-400">
+                  Fix the issues below, then re-scan to try again.
+                </p>
+              </div>
+            </div>
+            <div className="space-y-2">
+              {verificationResult.services.map(svc => (
+                <div key={svc.name} className="flex items-center gap-3 text-sm">
+                  {svc.passed ? (
+                    <span className="text-green-500 flex-shrink-0">✓</span>
+                  ) : (
+                    <span className="text-red-500 flex-shrink-0">✗</span>
+                  )}
+                  <span className={svc.passed ? 'text-zinc-700 dark:text-zinc-300' : 'text-red-700 dark:text-red-300 font-medium'}>
+                    {svc.name}
+                  </span>
+                  {svc.port && <span className="text-zinc-400 text-xs">:{svc.port}</span>}
+                  {svc.error && <span className="text-red-500 dark:text-red-400 text-xs ml-auto">{svc.error}</span>}
+                </div>
+              ))}
+            </div>
+          </div>
+          <div className="flex gap-3">
+            <Button onClick={handleRescan}>
+              Re-scan project
+            </Button>
+            <Button
+              onClick={() => {
+                const failedServices = verificationResult.services
+                  .filter(s => !s.passed)
+                  .map(s => ({ name: s.name, port: s.port }));
+                if (failedServices.length > 0) {
+                  createFixServiceSession(failedServices);
+                }
+              }}
+              variant="secondary"
+            >
+              Fix with Claude
+            </Button>
+            <Button onClick={() => setUiState('configured')} variant="ghost">
+              Proceed anyway
+            </Button>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
+  // ── Configured state ──
+  if (uiState === 'configured' && config) {
+    const { launch, context } = splitByZone(config.services);
+    const launchGroups = groupByOrder(launch);
+    const launchSteps = [...launchGroups.keys()];
+    const managed = context.filter(s => s.category === 'managed');
+    const runners = context.filter(s => s.category === 'test-runner');
+    const buildTools = context.filter(s => s.category === 'build-tool');
+    const contextItems = config.contextItems || [];
+    const managedContext = contextItems.filter(c => c.category === 'managed');
+    const runnerContext = contextItems.filter(c => c.category === 'test-runner');
+    const buildContext = contextItems.filter(c => c.category === 'build-tool');
+
+    return (
+      <section id="project-stack">
+        <div className="flex items-center justify-between mb-2">
+          <h2 className="text-lg font-medium text-zinc-900 dark:text-zinc-100">
+            Your Project Stack
+          </h2>
+          <Button onClick={handleRescan} variant="secondary" size="sm">
+            Re-scan project
+          </Button>
+        </div>
+        <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-6 leading-relaxed">
+          These services start up automatically when you run a QA test.
+        </p>
+
+        {/* Zone 1: QA Launch Sequence */}
+        {launch.length > 0 && (
+          <div className="mb-8">
+            <div className="flex items-center gap-2 mb-4">
+              <i className="fa-solid fa-rocket text-xs text-blue-500" />
+              <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">JettyPod starts these for QA</h3>
+            </div>
+            <div className="ml-1">
+              {launchSteps.map((order, stepIdx) => {
+                const services = launchGroups.get(order)!;
+                const isLast = stepIdx === launchSteps.length - 1;
+                return (
+                  <div key={order} className="flex gap-4">
+                    <div className="flex flex-col items-center w-5 flex-shrink-0">
+                      <div className="w-2.5 h-2.5 rounded-full bg-green-500 mt-5 flex-shrink-0" />
+                      {!isLast && <div className="w-0.5 flex-1 bg-zinc-200 dark:bg-zinc-700" />}
+                    </div>
+                    <div className="flex-1 pb-4">
+                      <div className="text-xs font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wide mb-2">
+                        Step {stepIdx + 1}{services.length > 1 ? ' — starts together' : ''}
+                      </div>
+                      <div className="flex gap-2 flex-wrap">
+                        {services.map(svc => (
+                          <div key={svc.name} className="flex-1 min-w-[200px] p-4 rounded-xl bg-zinc-50 dark:bg-zinc-800/50 border border-zinc-200 dark:border-zinc-700">
+                            <div className="flex items-start justify-between">
+                              <div className="flex items-center gap-3">
+                                <div className="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 bg-blue-50 dark:bg-blue-950 text-blue-500 dark:text-blue-400">
+                                  <i className={`fa-solid ${faIcon(svc)}`} />
+                                </div>
+                                <div>
+                                  <div className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{svc.name}</div>
+                                  <span className="text-xs text-zinc-400">{CATEGORY_LABELS[svc.category]}</span>
+                                </div>
+                              </div>
+                              <button onClick={() => setExpandedService(expandedService === svc.name ? null : svc.name)} className="text-xs text-zinc-400 dark:text-zinc-500 hover:text-zinc-600 dark:hover:text-zinc-300 cursor-pointer">
+                                {expandedService === svc.name ? 'Hide' : 'Details'}
+                              </button>
+                            </div>
+                            {expandedService === svc.name && (
+                              <div className="mt-3 pt-3 border-t border-zinc-200 dark:border-zinc-700 space-y-1 text-xs">
+                                <div><span className="text-zinc-400">Command: </span><code className="font-mono text-zinc-600 dark:text-zinc-400">{svc.command}</code></div>
+                                <div><span className="text-zinc-400">Port: </span><span className="text-zinc-600 dark:text-zinc-400">{svc.port}</span></div>
+                                <div><span className="text-zinc-400">Check: </span><span className="text-zinc-600 dark:text-zinc-400">{svc.healthCheck}</span></div>
+                              </div>
+                            )}
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+              {/* Ready for QA indicator */}
+              <div className="flex gap-4">
+                <div className="flex flex-col items-center w-5 flex-shrink-0">
+                  <div className="w-3 h-3 rounded-full bg-green-500 mt-1 flex-shrink-0 ring-4 ring-green-500/20" />
+                </div>
+                <div className="text-xs font-semibold text-green-600 dark:text-green-400 uppercase tracking-wide">Ready for QA</div>
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Zone 2: Context */}
+        {(context.length > 0 || contextItems.length > 0) && (
+          <div className="mb-6">
+            <div className="flex items-center gap-2 mb-4">
+              <i className="fa-solid fa-layer-group text-xs text-zinc-400" />
+              <h3 className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">Also part of your stack</h3>
+            </div>
+
+            {/* Managed services (from services + contextItems) */}
+            {(managed.length > 0 || managedContext.length > 0) && (
+              <div className="mb-4">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="text-xs font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wide">Managed Services</div>
+                  <button onClick={() => handleTestAllConnections([...managed, ...managedContext].map(s => ({ name: s.name, port: 'port' in s ? (s as ServiceDefinition).port : undefined, connectionUrl: 'connectionUrl' in s ? (s as ContextItem).connectionUrl : undefined })))} disabled={testingConnections} className="px-3 py-1.5 text-xs text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-950/50 hover:bg-purple-100 dark:hover:bg-purple-900/50 rounded-lg cursor-pointer disabled:opacity-50">{testingConnections ? 'Testing...' : 'Test Connections'}</button>
+                </div>
+                <div className="space-y-2">
+                  {[...managed, ...managedContext].map(svc => (
+                    <div key={svc.name} className="p-4 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50">
+                      <div className="flex items-center gap-3">
+                        <div className="w-9 h-9 rounded-lg flex items-center justify-center flex-shrink-0 bg-purple-50 dark:bg-purple-950 text-purple-500 dark:text-purple-400">
+                          <i className={`fa-solid ${faIcon(svc as ServiceDefinition)}`} />
+                        </div>
+                        <div>
+                          <div className="text-sm font-semibold text-zinc-900 dark:text-zinc-100">{svc.name}</div>
+                          {connectionStatus[svc.name] && (
+                            <div className="flex items-center gap-1.5 mt-0.5">
+                              <span className={`w-2 h-2 rounded-full ${connectionStatus[svc.name] === 'connected' ? 'bg-green-500' : connectionStatus[svc.name] === 'failed' ? 'bg-red-500' : 'bg-amber-400 animate-pulse'}`} />
+                              <span className="text-xs text-zinc-400">
+                                {connectionStatus[svc.name] === 'connected' ? 'Connected' : connectionStatus[svc.name] === 'failed' ? 'Connection failed' : 'Testing...'}
+                              </span>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Test runners */}
+            {(runners.length > 0 || runnerContext.length > 0) && (
+              <div className="mb-4">
+                <div className="text-xs font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wide mb-2">Test Runners</div>
+                <div className="grid grid-cols-2 gap-2">
+                  {[...runners, ...runnerContext].map(svc => (
+                    <div key={svc.name} className="p-3 rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-800/50 flex items-center justify-between">
+                      <div className="flex items-center gap-2.5">
+                        <div className="w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 bg-amber-50 dark:bg-amber-950 text-amber-500 dark:text-amber-400 text-sm">
+                          <i className={`fa-solid ${faIcon(svc as ServiceDefinition)}`} />
+                        </div>
+                        <span className="text-sm font-medium text-zinc-900 dark:text-zinc-100">{svc.name}</span>
+                      </div>
+                      <button className="px-2.5 py-1 text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-950/50 hover:bg-amber-100 dark:hover:bg-amber-900/50 rounded-lg cursor-pointer">Run</button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            {/* Build tools */}
+            {(buildTools.length > 0 || buildContext.length > 0) && (
+              <div className="mb-4">
+                <div className="text-xs font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wide mb-2">Build Tools</div>
+                <div className="flex gap-2 flex-wrap">
+                  {[...buildTools, ...buildContext].map(svc => (
+                    <div key={svc.name} className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800/50 text-sm text-zinc-600 dark:text-zinc-400">
+                      <i className={`fa-solid ${faIcon(svc as ServiceDefinition)} text-xs`} />
+                      <span>{svc.name}</span>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </section>
+    );
+  }
+
+  return null;
+}