jettypod 4.4.98 → 4.4.100

package/apps/dashboard/components/RealTimeKanbanWrapper.tsx

@@ -1,11 +1,13 @@
 'use client';
 
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
 import { KanbanBoard } from './KanbanBoard';
+import { ClaudePanel } from './ClaudePanel';
 import { RecentDecisionsWidget } from './RecentDecisionsWidget';
 import { ToastProvider, useToast } from './Toast';
 import { useWebSocket, type WebSocketMessage } from '../hooks/useWebSocket';
-import type { InFlightItem, KanbanGroup, Decision } from '@/lib/db';
+import { useClaudeStream } from '../hooks/useClaudeStream';
+import type { InFlightItem, KanbanGroup, Decision, WorkItem } from '@/lib/db';
 import { UndoStack, type UndoAction } from '@/lib/undoStack';
 
 interface KanbanData {
@@ -62,6 +64,26 @@ function RealTimeKanbanContent({ initialData, initialDecisions }: RealTimeKanban
   const [decisions, setDecisions] = useState<Decision[]>(initialDecisions);
   const [statusError, setStatusError] = useState<string | null>(null);
 
+  // Claude panel state
+  const [claudePanelOpen, setClaudePanelOpen] = useState(false);
+  const [activeWorkItem, setActiveWorkItem] = useState<{ id: string; title: string; type?: string } | null>(null);
+  const pendingStartRef = useRef(false);
+
+  // Claude stream hook
+  const claudeStream = useClaudeStream({
+    workItemId: activeWorkItem?.id || '0',
+    title: activeWorkItem?.title,
+    type: activeWorkItem?.type,
+  });
+
+  // Start streaming after activeWorkItem state is updated (fixes race condition)
+  useEffect(() => {
+    if (pendingStartRef.current && activeWorkItem?.id) {
+      pendingStartRef.current = false;
+      claudeStream.start();
+    }
+  }, [activeWorkItem, claudeStream]);
+
   // Undo/redo stack - created once per component instance
   const [undoStack] = useState(() => new UndoStack());
   const [undoRedoVersion, setUndoRedoVersion] = useState(0); // Force re-render on stack changes
@@ -250,6 +272,28 @@ function RealTimeKanbanContent({ initialData, initialDecisions }: RealTimeKanban
   const canUndo = undoStack.canUndo();
   const canRedo = undoStack.canRedo();
 
+  // Claude panel handlers
+  const handleTriggerClaude = useCallback((id: number, title: string) => {
+    // Look up work item to get its type
+    const found = findItemById(data, id);
+    const itemType = (found?.item as WorkItem)?.type || 'chore';
+
+    pendingStartRef.current = true;
+    setActiveWorkItem({ id: String(id), title, type: itemType });
+    setClaudePanelOpen(true);
+    // useEffect will call claudeStream.start() after re-render with new workItemId
+  }, [data]);
+
+  const handleClaudeMinimize = useCallback(() => {
+    setClaudePanelOpen(false);
+  }, []);
+
+  const handleClaudeClose = useCallback(() => {
+    claudeStream.stop();
+    setClaudePanelOpen(false);
+    setActiveWorkItem(null);
+  }, [claudeStream]);
+
   const wsUrl = typeof window !== 'undefined'
     ? `ws://${window.location.hostname}:8080`
     : 'ws://localhost:8080';
@@ -300,7 +344,7 @@ function RealTimeKanbanContent({ initialData, initialDecisions }: RealTimeKanban
         </span>
       </div>
       <div className="flex-1 min-h-0 flex gap-4">
-        <div className="flex-1 min-w-0">
+        <div className={`flex-1 min-w-0 transition-all duration-300 ${claudePanelOpen ? 'mr-[480px]' : ''}`}>
           <KanbanBoard
             inFlight={data.inFlight}
             backlog={data.backlog}
@@ -309,6 +353,7 @@ function RealTimeKanbanContent({ initialData, initialDecisions }: RealTimeKanban
             onStatusChange={handleStatusChange}
             onOrderChange={handleOrderChange}
             onEpicAssign={handleEpicAssign}
+            onTriggerClaude={handleTriggerClaude}
             onUndo={handleUndo}
             onRedo={handleRedo}
             canUndo={canUndo}
@@ -319,6 +364,20 @@ function RealTimeKanbanContent({ initialData, initialDecisions }: RealTimeKanban
           <RecentDecisionsWidget decisions={decisions} />
         </div>
       </div>
+      {/* Claude Panel */}
+      <ClaudePanel
+        isOpen={claudePanelOpen}
+        workItemId={activeWorkItem?.id || ''}
+        workItemTitle={activeWorkItem?.title || ''}
+        messages={claudeStream.messages}
+        status={claudeStream.status}
+        error={claudeStream.error}
+        exitCode={claudeStream.exitCode}
+        canRetry={claudeStream.canRetry}
+        onMinimize={handleClaudeMinimize}
+        onClose={handleClaudeClose}
+        onRetry={claudeStream.retry}
+      />
     </div>
   );
 }

package/apps/dashboard/components/TestTree.tsx

@@ -0,0 +1,208 @@
+'use client';
+
+import { useState } from 'react';
+import type { TestDashboardData, TestEpic, TestFeature, TestScenario } from '@/lib/tests';
+
+const statusIcons: Record<string, string> = {
+  pass: '✅',
+  fail: '❌',
+  pending: '⏳',
+};
+
+const statusColors: Record<string, string> = {
+  pass: 'text-green-600 dark:text-green-400',
+  fail: 'text-red-600 dark:text-red-400',
+  pending: 'text-amber-600 dark:text-amber-400',
+};
+
+interface ScenarioNodeProps {
+  scenario: TestScenario;
+  depth: number;
+}
+
+function ScenarioNode({ scenario, depth }: ScenarioNodeProps) {
+  const [expanded, setExpanded] = useState(false);
+  const hasError = scenario.status === 'fail' && (scenario.error || scenario.failedStep);
+
+  return (
+    <div className="select-none">
+      <div
+        className={`flex items-center gap-2 py-1.5 px-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors ${hasError ? 'cursor-pointer' : ''}`}
+        style={{ paddingLeft: `${depth * 20 + 8}px` }}
+        onClick={() => hasError && setExpanded(!expanded)}
+      >
+        {hasError ? (
+          <button className="w-4 h-4 flex items-center justify-center text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300">
+            {expanded ? '▼' : '▶'}
+          </button>
+        ) : (
+          <span className="w-4" />
+        )}
+        <span className="text-sm">{statusIcons[scenario.status]}</span>
+        <span className={`flex-1 text-sm ${statusColors[scenario.status]}`}>
+          {scenario.title}
+        </span>
+        <span className="text-xs text-zinc-400 font-mono">{scenario.duration}</span>
+      </div>
+
+      {/* Error details panel */}
+      {expanded && hasError && (
+        <div
+          className="mt-1 mb-2 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded text-sm"
+          style={{ marginLeft: `${depth * 20 + 28}px` }}
+        >
+          {scenario.failedStep && (
+            <div className="mb-2">
+              <span className="font-semibold text-red-700 dark:text-red-300">Failed step: </span>
+              <span className="text-red-600 dark:text-red-400">{scenario.failedStep}</span>
+            </div>
+          )}
+          {scenario.error && (
+            <div>
+              <span className="font-semibold text-red-700 dark:text-red-300">Error: </span>
+              <pre className="mt-1 p-2 bg-red-100 dark:bg-red-900/40 rounded text-xs text-red-800 dark:text-red-200 overflow-x-auto whitespace-pre-wrap">
+                {scenario.error}
+              </pre>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface FeatureNodeProps {
+  feature: TestFeature;
+  depth: number;
+}
+
+function FeatureNode({ feature, depth }: FeatureNodeProps) {
+  const [expanded, setExpanded] = useState(true);
+  const hasScenarios = feature.scenarios.length > 0;
+
+  const passingCount = feature.scenarios.filter(s => s.status === 'pass').length;
+  const failingCount = feature.scenarios.filter(s => s.status === 'fail').length;
+  const allPassing = failingCount === 0 && passingCount > 0;
+
+  return (
+    <div className="select-none">
+      <div
+        className="flex items-center gap-2 py-1.5 px-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer"
+        style={{ paddingLeft: `${depth * 20 + 8}px` }}
+        onClick={() => setExpanded(!expanded)}
+      >
+        {hasScenarios ? (
+          <button className="w-4 h-4 flex items-center justify-center text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300">
+            {expanded ? '▼' : '▶'}
+          </button>
+        ) : (
+          <span className="w-4" />
+        )}
+        <span className="text-sm">✨</span>
+        <span className={`flex-1 font-medium ${allPassing ? 'text-zinc-900 dark:text-zinc-100' : 'text-red-600 dark:text-red-400'}`}>
+          {feature.title}
+        </span>
+        {/* Health badge */}
+        <span className="text-xs px-1.5 py-0.5 rounded bg-zinc-100 dark:bg-zinc-800">
+          <span className="text-green-600 dark:text-green-400">{passingCount}</span>
+          <span className="text-zinc-400 mx-1">/</span>
+          <span className={failingCount > 0 ? 'text-red-600 dark:text-red-400' : 'text-zinc-400'}>
+            {failingCount}
+          </span>
+        </span>
+      </div>
+
+      {expanded && hasScenarios && (
+        <div>
+          {feature.scenarios.map(scenario => (
+            <ScenarioNode key={scenario.id} scenario={scenario} depth={depth + 1} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface EpicNodeProps {
+  epic: TestEpic;
+}
+
+function EpicNode({ epic }: EpicNodeProps) {
+  const [expanded, setExpanded] = useState(true);
+  const hasFeatures = epic.features.length > 0;
+  const allPassing = epic.healthBadge.failing === 0;
+
+  return (
+    <div className="select-none">
+      <div
+        className="flex items-center gap-2 py-2 px-2 rounded hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors cursor-pointer"
+        onClick={() => setExpanded(!expanded)}
+      >
+        {hasFeatures ? (
+          <button className="w-4 h-4 flex items-center justify-center text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300">
+            {expanded ? '▼' : '▶'}
+          </button>
+        ) : (
+          <span className="w-4" />
+        )}
+        <span className="text-base">🎯</span>
+        <span className={`flex-1 font-semibold ${allPassing ? 'text-zinc-900 dark:text-zinc-100' : 'text-red-600 dark:text-red-400'}`}>
+          {epic.title}
+        </span>
+        {/* Health badge */}
+        <span className="text-xs px-2 py-1 rounded bg-zinc-100 dark:bg-zinc-800 font-mono">
+          <span className="text-green-600 dark:text-green-400">{epic.healthBadge.passing}</span>
+          <span className="text-zinc-400 mx-1">/</span>
+          <span className={epic.healthBadge.failing > 0 ? 'text-red-600 dark:text-red-400' : 'text-zinc-400'}>
+            {epic.healthBadge.failing}
+          </span>
+        </span>
+      </div>
+
+      {expanded && hasFeatures && (
+        <div>
+          {epic.features.map(feature => (
+            <FeatureNode key={feature.id} feature={feature} depth={1} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface TestTreeProps {
+  data: TestDashboardData;
+}
+
+export function TestTree({ data }: TestTreeProps) {
+  if (data.epics.length === 0 && data.standaloneFeatures.length === 0) {
+    return (
+      <div className="text-zinc-500 text-center py-8">
+        No test features found
+      </div>
+    );
+  }
+
+  return (
+    <div className="font-mono text-sm space-y-2">
+      {/* Epics */}
+      {data.epics.map(epic => (
+        <EpicNode key={epic.id} epic={epic} />
+      ))}
+
+      {/* Standalone Features */}
+      {data.standaloneFeatures.length > 0 && (
+        <div className="mt-4">
+          {data.epics.length > 0 && (
+            <div className="text-xs text-zinc-400 uppercase tracking-wider mb-2 px-2">
+              Standalone Features
+            </div>
+          )}
+          {data.standaloneFeatures.map(feature => (
+            <FeatureNode key={feature.id} feature={feature} depth={0} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/apps/dashboard/hooks/useClaudeSessions.ts

@@ -0,0 +1,265 @@
+'use client';
+
+import { useState, useCallback, useRef, useEffect } from 'react';
+import type { ClaudeMessage, ClaudeStreamStatus } from './useClaudeStream';
+
+export interface ClaudeSession {
+  workItemId: string;
+  title: string;
+  description?: string;
+  messages: ClaudeMessage[];
+  status: ClaudeStreamStatus;
+  error: string | null;
+  exitCode: number | null;
+  canRetry: boolean;
+  abortController: AbortController | null;
+}
+
+interface UseClaudeSessionsReturn {
+  sessions: Map<string, ClaudeSession>;
+  activeSessionId: string | null;
+  activeSession: ClaudeSession | null;
+  startSession: (workItemId: string, title: string, description?: string) => void;
+  switchSession: (workItemId: string) => void;
+  stopSession: (workItemId: string) => void;
+  retrySession: (workItemId: string) => void;
+  closeAllSessions: () => void;
+  isSessionRunning: (workItemId: string) => boolean;
+}
+
+export function useClaudeSessions(): UseClaudeSessionsReturn {
+  const [sessions, setSessions] = useState<Map<string, ClaudeSession>>(new Map());
+  const [activeSessionId, setActiveSessionId] = useState<string | null>(null);
+  const sessionsRef = useRef<Map<string, ClaudeSession>>(new Map());
+
+  // Keep ref in sync with state for cleanup
+  useEffect(() => {
+    sessionsRef.current = sessions;
+  }, [sessions]);
+
+  // Cleanup all sessions on unmount (browser close/refresh)
+  useEffect(() => {
+    return () => {
+      sessionsRef.current.forEach((session) => {
+        if (session.abortController) {
+          session.abortController.abort();
+        }
+      });
+    };
+  }, []);
+
+  const updateSession = useCallback((workItemId: string, updates: Partial<ClaudeSession>) => {
+    setSessions((prev) => {
+      const newMap = new Map(prev);
+      const session = newMap.get(workItemId);
+      if (session) {
+        newMap.set(workItemId, { ...session, ...updates });
+      }
+      return newMap;
+    });
+  }, []);
+
+  const startSession = useCallback(async (workItemId: string, title: string, description?: string) => {
+    // Check if session already exists and is running
+    const existingSession = sessionsRef.current.get(workItemId);
+    if (existingSession?.status === 'streaming') {
+      // Just switch to it
+      setActiveSessionId(workItemId);
+      return;
+    }
+
+    // Create or reset session
+    const controller = new AbortController();
+    const newSession: ClaudeSession = {
+      workItemId,
+      title,
+      description,
+      messages: [],
+      status: 'connecting',
+      error: null,
+      exitCode: null,
+      canRetry: false,
+      abortController: controller,
+    };
+
+    setSessions((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(workItemId, newSession);
+      return newMap;
+    });
+    setActiveSessionId(workItemId);
+
+    try {
+      const response = await fetch(`/api/claude/${workItemId}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ title, description }),
+        signal: controller.signal,
+      });
+
+      if (!response.ok) {
+        let errorMessage = `HTTP ${response.status}: ${response.statusText}`;
+        try {
+          const errorData = await response.json();
+          if (errorData.message) {
+            errorMessage = errorData.message;
+          }
+        } catch {
+          // Response wasn't JSON
+        }
+        const retryable = response.status >= 500 || response.status === 503;
+        updateSession(workItemId, {
+          status: 'error',
+          error: errorMessage,
+          canRetry: retryable,
+        });
+        return;
+      }
+
+      if (!response.body) {
+        updateSession(workItemId, {
+          status: 'error',
+          error: 'Response body is null',
+          canRetry: true,
+        });
+        return;
+      }
+
+      updateSession(workItemId, { status: 'streaming' });
+
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          updateSession(workItemId, { status: 'done' });
+          break;
+        }
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() || '';
+
+        for (const line of lines) {
+          if (line.startsWith('data: ')) {
+            const data = line.slice(6);
+            try {
+              const parsed = JSON.parse(data);
+              const message: ClaudeMessage = {
+                ...parsed,
+                timestamp: Date.now(),
+              };
+
+              setSessions((prev) => {
+                const newMap = new Map(prev);
+                const session = newMap.get(workItemId);
+                if (session) {
+                  newMap.set(workItemId, {
+                    ...session,
+                    messages: [...session.messages, message],
+                  });
+                }
+                return newMap;
+              });
+
+              if (parsed.type === 'done') {
+                if (parsed.exitCode !== undefined && parsed.exitCode !== 0) {
+                  updateSession(workItemId, {
+                    status: 'error',
+                    exitCode: parsed.exitCode,
+                    error: `Process exited with code ${parsed.exitCode}`,
+                    canRetry: true,
+                  });
+                } else {
+                  updateSession(workItemId, { status: 'done' });
+                }
+              } else if (parsed.type === 'error') {
+                updateSession(workItemId, {
+                  status: 'error',
+                  error: parsed.content || 'Unknown error',
+                  canRetry: true,
+                });
+              }
+            } catch {
+              // Non-JSON line, skip
+            }
+          }
+        }
+      }
+    } catch (err) {
+      if (err instanceof Error && err.name === 'AbortError') {
+        updateSession(workItemId, { status: 'idle' });
+      } else {
+        const errorMessage = err instanceof Error ? err.message : 'Unknown error';
+        const isNetworkError = err instanceof TypeError ||
+          (err instanceof Error && (
+            err.message.includes('network') ||
+            err.message.includes('fetch') ||
+            err.message.includes('Failed to fetch')
+          ));
+
+        updateSession(workItemId, {
+          status: 'error',
+          error: isNetworkError ? 'Connection lost' : errorMessage,
+          canRetry: true,
+        });
+      }
+    }
+  }, [updateSession]);
+
+  const switchSession = useCallback((workItemId: string) => {
+    if (sessions.has(workItemId)) {
+      setActiveSessionId(workItemId);
+    }
+  }, [sessions]);
+
+  const stopSession = useCallback((workItemId: string) => {
+    const session = sessions.get(workItemId);
+    if (session?.abortController) {
+      session.abortController.abort();
+    }
+    updateSession(workItemId, {
+      status: 'idle',
+      abortController: null,
+    });
+  }, [sessions, updateSession]);
+
+  const retrySession = useCallback((workItemId: string) => {
+    const session = sessions.get(workItemId);
+    if (session) {
+      startSession(workItemId, session.title, session.description);
+    }
+  }, [sessions, startSession]);
+
+  const closeAllSessions = useCallback(() => {
+    sessions.forEach((session) => {
+      if (session.abortController) {
+        session.abortController.abort();
+      }
+    });
+    setSessions(new Map());
+    setActiveSessionId(null);
+  }, [sessions]);
+
+  const isSessionRunning = useCallback((workItemId: string) => {
+    const session = sessions.get(workItemId);
+    return session?.status === 'streaming' || session?.status === 'connecting';
+  }, [sessions]);
+
+  const activeSession = activeSessionId ? sessions.get(activeSessionId) ?? null : null;
+
+  return {
+    sessions,
+    activeSessionId,
+    activeSession,
+    startSession,
+    switchSession,
+    stopSession,
+    retrySession,
+    closeAllSessions,
+    isSessionRunning,
+  };
+}