jettypod 4.4.98 → 4.4.100

package/apps/dashboard/app/api/claude/[workItemId]/route.ts

@@ -0,0 +1,127 @@
+import { spawn, spawnSync } from 'child_process';
+import { NextRequest, NextResponse } from 'next/server';
+import path from 'path';
+
+// Import worktree facade for worktree management
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const worktreeFacade = require('../../../../../../lib/worktree-facade');
+
+export const dynamic = 'force-dynamic';
+
+function isClaudeCliAvailable(): boolean {
+  const result = spawnSync('which', ['claude'], { encoding: 'utf-8' });
+  return result.status === 0 && result.stdout.trim().length > 0;
+}
+
+function isValidWorkItemId(id: string): boolean {
+  const parsed = parseInt(id, 10);
+  return !isNaN(parsed) && parsed > 0 && String(parsed) === id;
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ workItemId: string }> }
+) {
+  const { workItemId } = await params;
+
+  // Validate work item ID
+  if (!isValidWorkItemId(workItemId)) {
+    return NextResponse.json(
+      { type: 'error', message: 'Invalid work item' },
+      { status: 400 }
+    );
+  }
+
+  // Check if Claude CLI is available
+  if (!isClaudeCliAvailable()) {
+    return NextResponse.json(
+      { type: 'error', message: 'Claude CLI not found' },
+      { status: 503 }
+    );
+  }
+
+  // Get the work item context to build the prompt
+  const body = await request.json().catch(() => ({}));
+  const { title, description, type } = body;
+
+  // Determine work item type label for the prompt
+  const workItemType = type || 'chore';
+
+  // Get or create worktree for this work item
+  const workItem = {
+    id: parseInt(workItemId, 10),
+    title: title || `Work item ${workItemId}`
+  };
+
+  // Determine the repo path (go up from the API route to project root)
+  const repoPath = path.resolve(process.cwd());
+
+  // Check for existing worktree or create one
+  const workResult = await worktreeFacade.startWork(workItem, { repoPath });
+
+  // Use worktree path if available, otherwise fall back to main repo
+  const claudeCwd = workResult.path;
+
+  // Build the prompt for Claude based on work item type
+  const prompt = `You are working on ${workItemType} #${workItemId}: ${title || 'Unknown task'}
+${description ? `\nDescription: ${description}` : ''}
+
+Please start working on this ${workItemType}. Use the appropriate tools to implement the required changes.`;
+
+  // Create a readable stream that we'll pipe Claude's output to
+  const encoder = new TextEncoder();
+
+  const stream = new ReadableStream({
+    start(controller) {
+      // Spawn Claude CLI with streaming JSON output in the worktree directory
+      const claude = spawn('claude', [
+        '-p', prompt,
+        '--output-format', 'stream-json'
+      ], {
+        cwd: claudeCwd,
+        env: { ...process.env },
+      });
+
+      claude.stdout.on('data', (data: Buffer) => {
+        // Parse each line of streaming JSON and send as SSE
+        const lines = data.toString().split('\n').filter(line => line.trim());
+        for (const line of lines) {
+          try {
+            const parsed = JSON.parse(line);
+            const sseData = `data: ${JSON.stringify(parsed)}\n\n`;
+            controller.enqueue(encoder.encode(sseData));
+          } catch {
+            // If not valid JSON, send as raw text
+            const sseData = `data: ${JSON.stringify({ type: 'text', content: line })}\n\n`;
+            controller.enqueue(encoder.encode(sseData));
+          }
+        }
+      });
+
+      claude.stderr.on('data', (data: Buffer) => {
+        const sseData = `data: ${JSON.stringify({ type: 'error', content: data.toString() })}\n\n`;
+        controller.enqueue(encoder.encode(sseData));
+      });
+
+      claude.on('close', (code) => {
+        const sseData = `data: ${JSON.stringify({ type: 'done', exitCode: code })}\n\n`;
+        controller.enqueue(encoder.encode(sseData));
+        controller.close();
+      });
+
+      claude.on('error', (err) => {
+        const sseData = `data: ${JSON.stringify({ type: 'error', content: err.message })}\n\n`;
+        controller.enqueue(encoder.encode(sseData));
+        controller.close();
+      });
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      'Content-Type': 'text/event-stream',
+      'Cache-Control': 'no-cache',
+      'Connection': 'keep-alive',
+    },
+  });
+}

package/apps/dashboard/app/page.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { getKanbanData, getProjectName, getRecentDecisions } from '@/lib/db';
 import { RealTimeKanbanWrapper } from '@/components/RealTimeKanbanWrapper';
 
@@ -27,6 +28,15 @@ export default function Home() {
             <span className="px-2.5 py-1 text-sm bg-zinc-100 text-zinc-600 rounded-full border border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700">
               {projectName}
             </span>
+            <span className="px-2.5 py-1 text-sm text-zinc-900 dark:text-zinc-100 font-medium">
+              Backlog
+            </span>
+            <Link
+              href="/tests"
+              className="px-2.5 py-1 text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+            >
+              Tests
+            </Link>
           </div>
         </div>
       </header>

package/apps/dashboard/app/tests/page.tsx

@@ -0,0 +1,73 @@
+import Link from 'next/link';
+import { getTestDashboardData } from '@/lib/tests';
+import { getProjectName } from '@/lib/db';
+import { TestTree } from '@/components/TestTree';
+
+export default function TestsPage() {
+  const data = getTestDashboardData();
+  const projectName = getProjectName();
+
+  return (
+    <div className="h-screen flex flex-col bg-zinc-50 dark:bg-zinc-950">
+      <header className="sticky top-0 z-10 border-b border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 flex-shrink-0">
+        <div className="max-w-6xl mx-auto px-4 py-4">
+          <div className="flex items-center gap-3">
+            <h1 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100">
+              JettyPod Dashboard
+            </h1>
+            <span className="px-2.5 py-1 text-sm bg-zinc-100 text-zinc-600 rounded-full border border-zinc-200 dark:bg-zinc-800 dark:text-zinc-400 dark:border-zinc-700">
+              {projectName}
+            </span>
+            <Link
+              href="/"
+              className="px-2.5 py-1 text-sm text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100 transition-colors"
+            >
+              Backlog
+            </Link>
+            <span className="px-2.5 py-1 text-sm text-zinc-900 dark:text-zinc-100 font-medium">
+              Tests
+            </span>
+          </div>
+        </div>
+      </header>
+
+      <main className="flex-1 overflow-auto max-w-6xl w-full mx-auto px-4 py-4">
+        {/* Summary Bar */}
+        <div className="flex gap-4 mb-6">
+          <div className="flex items-center gap-2 px-4 py-2 bg-zinc-100 dark:bg-zinc-800 rounded-lg">
+            <span className="text-sm text-zinc-500 dark:text-zinc-400">Total</span>
+            <span className="font-mono font-semibold text-zinc-900 dark:text-zinc-100">
+              {data.summary.total}
+            </span>
+          </div>
+          <div className="flex items-center gap-2 px-4 py-2 bg-green-50 dark:bg-green-900/20 rounded-lg">
+            <span className="text-sm text-green-600 dark:text-green-400">Passing</span>
+            <span className="font-mono font-semibold text-green-700 dark:text-green-300">
+              {data.summary.passing}
+            </span>
+          </div>
+          <div className="flex items-center gap-2 px-4 py-2 bg-red-50 dark:bg-red-900/20 rounded-lg">
+            <span className="text-sm text-red-600 dark:text-red-400">Failing</span>
+            <span className="font-mono font-semibold text-red-700 dark:text-red-300">
+              {data.summary.failing}
+            </span>
+          </div>
+          <div className="flex items-center gap-2 px-4 py-2 bg-amber-50 dark:bg-amber-900/20 rounded-lg">
+            <span className="text-sm text-amber-600 dark:text-amber-400">Pending</span>
+            <span className="font-mono font-semibold text-amber-700 dark:text-amber-300">
+              {data.summary.pending}
+            </span>
+          </div>
+          {data.summary.lastRun && (
+            <div className="flex items-center gap-2 px-4 py-2 text-sm text-zinc-500 dark:text-zinc-400">
+              Last run: {new Date(data.summary.lastRun).toLocaleString()}
+            </div>
+          )}
+        </div>
+
+        {/* Test Tree */}
+        <TestTree data={data} />
+      </main>
+    </div>
+  );
+}

package/apps/dashboard/components/CardMenu.tsx

@@ -4,11 +4,13 @@ import { useState, useRef, useEffect } from 'react';
 
 interface CardMenuProps {
   itemId: number;
+  itemTitle?: string;
   currentStatus: string;
   onStatusChange: (id: number, newStatus: string) => Promise<void>;
+  onTriggerClaude?: (id: number, title: string) => void;
 }
 
-export function CardMenu({ itemId, currentStatus, onStatusChange }: CardMenuProps) {
+export function CardMenu({ itemId, itemTitle = '', currentStatus, onStatusChange, onTriggerClaude }: CardMenuProps) {
   const [isOpen, setIsOpen] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const menuRef = useRef<HTMLDivElement>(null);
@@ -42,6 +44,21 @@ export function CardMenu({ itemId, currentStatus, onStatusChange }: CardMenuProp
     }
   };
 
+  const handleStart = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsOpen(false);
+    setError(null);
+    try {
+      await onStatusChange(itemId, 'in_progress');
+      // Trigger Claude panel after status change succeeds
+      if (onTriggerClaude) {
+        onTriggerClaude(itemId, itemTitle);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update status');
+    }
+  };
+
   return (
     <div className="relative" ref={menuRef} data-testid="card-menu">
       <button
@@ -75,7 +92,7 @@ export function CardMenu({ itemId, currentStatus, onStatusChange }: CardMenuProp
         >
           {(currentStatus === 'backlog' || currentStatus === 'cancelled') && (
             <button
-              onClick={(e) => handleAction(e, 'in_progress')}
+              onClick={handleStart}
               className="w-full px-3 py-2 text-left text-sm text-zinc-700 dark:text-zinc-300 hover:bg-zinc-100 dark:hover:bg-zinc-700 flex items-center gap-2"
               data-testid="start-button"
             >

package/apps/dashboard/components/ClaudePanel.tsx

@@ -0,0 +1,271 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import type { ClaudeMessage, ClaudeStreamStatus } from '../hooks/useClaudeStream';
+
+interface ClaudePanelProps {
+  isOpen: boolean;
+  workItemId: string;
+  workItemTitle: string;
+  messages: ClaudeMessage[];
+  status: ClaudeStreamStatus;
+  error: string | null;
+  exitCode: number | null;
+  canRetry: boolean;
+  onMinimize: () => void;
+  onClose: () => void;
+  onRetry: () => void;
+}
+
+export function ClaudePanel({
+  isOpen,
+  workItemId,
+  workItemTitle,
+  messages,
+  status,
+  error,
+  exitCode,
+  canRetry,
+  onMinimize,
+  onClose,
+  onRetry,
+}: ClaudePanelProps) {
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  // Auto-scroll to bottom when new messages arrive
+  useEffect(() => {
+    if (contentRef.current) {
+      contentRef.current.scrollTop = contentRef.current.scrollHeight;
+    }
+  }, [messages]);
+
+  return (
+    <AnimatePresence>
+      {isOpen && (
+        <motion.div
+          initial={{ x: '100%' }}
+          animate={{ x: 0 }}
+          exit={{ x: '100%' }}
+          transition={{ type: 'spring', damping: 25, stiffness: 200 }}
+          className="fixed right-0 top-0 h-full w-[480px] bg-zinc-900 border-l border-zinc-800 flex flex-col z-50"
+          data-testid="claude-panel"
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-zinc-800">
+            <div className="flex items-center gap-3 min-w-0">
+              <StatusIndicator status={status} />
+              <div className="min-w-0">
+                <h2 className="text-sm font-semibold text-white truncate" data-testid="panel-title">
+                  #{workItemId} {workItemTitle}
+                </h2>
+                <p className="text-xs text-zinc-500">
+                  {status === 'connecting' && 'Connecting...'}
+                  {status === 'streaming' && 'Claude is working...'}
+                  {status === 'done' && 'Complete'}
+                  {status === 'error' && 'Error occurred'}
+                  {status === 'idle' && 'Ready'}
+                </p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                onClick={onMinimize}
+                className="p-1.5 rounded hover:bg-zinc-800 text-zinc-400 hover:text-white transition-colors"
+                aria-label="Minimize panel"
+                data-testid="minimize-button"
+              >
+                <MinimizeIcon />
+              </button>
+              <button
+                onClick={onClose}
+                className="p-1.5 rounded hover:bg-zinc-800 text-zinc-400 hover:text-white transition-colors"
+                aria-label="Close panel"
+                data-testid="close-button"
+              >
+                <CloseIcon />
+              </button>
+            </div>
+          </div>
+
+          {/* Progress bar */}
+          {status === 'streaming' && (
+            <div className="h-0.5 bg-zinc-800 overflow-hidden">
+              <motion.div
+                className="h-full bg-blue-500"
+                initial={{ x: '-100%' }}
+                animate={{ x: '100%' }}
+                transition={{ duration: 1.5, repeat: Infinity, ease: 'linear' }}
+                style={{ width: '50%' }}
+              />
+            </div>
+          )}
+
+          {/* Error banner */}
+          {status === 'error' && error && (
+            <div className="bg-red-900/50 border-b border-red-800/50 px-4 py-3" data-testid="error-banner">
+              <div className="flex items-start gap-3">
+                <ErrorIcon />
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-medium text-red-300" data-testid="error-message">{error}</p>
+                  {exitCode !== null && (
+                    <p className="text-xs text-red-400/70 mt-1">Exit code: {exitCode}</p>
+                  )}
+                  {error === 'Claude CLI not found' && (
+                    <div className="mt-2 text-xs text-red-200/70" data-testid="install-instructions">
+                      <p className="font-medium mb-1">To install Claude CLI:</p>
+                      <code className="block bg-red-950/50 rounded px-2 py-1 mt-1">
+                        npm install -g @anthropic-ai/claude-code
+                      </code>
+                    </div>
+                  )}
+                </div>
+                {canRetry && (
+                  <button
+                    onClick={onRetry}
+                    className="px-3 py-1.5 text-xs font-medium bg-red-800/50 hover:bg-red-800 text-red-200 rounded transition-colors"
+                    data-testid="retry-button"
+                  >
+                    Retry
+                  </button>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Content */}
+          <div
+            ref={contentRef}
+            className="flex-1 overflow-y-auto p-4 space-y-3"
+            data-testid="panel-content"
+          >
+            {messages.map((message, index) => (
+              <MessageBlock key={index} message={message} />
+            ))}
+            {messages.length === 0 && status === 'idle' && (
+              <div className="text-zinc-500 text-sm text-center py-8">
+                Click Start to begin working on this item
+              </div>
+            )}
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}
+
+function StatusIndicator({ status }: { status: ClaudeStreamStatus }) {
+  const colorClass = {
+    idle: 'bg-zinc-500',
+    connecting: 'bg-yellow-500 animate-pulse',
+    streaming: 'bg-blue-500 animate-pulse',
+    done: 'bg-green-500',
+    error: 'bg-red-500',
+  }[status];
+
+  return <div className={`w-2 h-2 rounded-full ${colorClass}`} />;
+}
+
+function MessageBlock({ message }: { message: ClaudeMessage }) {
+  if (message.type === 'assistant' || message.type === 'text') {
+    return (
+      <div className="bg-zinc-800/50 rounded-lg p-3" data-testid="output-block">
+        <div className="prose prose-invert prose-sm max-w-none">
+          <p className="text-zinc-200 text-sm whitespace-pre-wrap">{message.content}</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (message.type === 'tool_use') {
+    return (
+      <div className="bg-purple-900/30 border border-purple-800/50 rounded-lg p-3" data-testid="tool-call">
+        <div className="flex items-center gap-2 mb-2">
+          <ToolIcon />
+          <span className="text-xs font-medium text-purple-300">{message.tool_name}</span>
+        </div>
+        {message.tool_input && (
+          <pre className="text-xs text-purple-200/70 overflow-x-auto">
+            {JSON.stringify(message.tool_input, null, 2)}
+          </pre>
+        )}
+      </div>
+    );
+  }
+
+  if (message.type === 'tool_result') {
+    return (
+      <div className="bg-zinc-800/30 border border-zinc-700/50 rounded-lg p-3">
+        <pre className="text-xs text-zinc-400 overflow-x-auto whitespace-pre-wrap">
+          {message.result || message.content}
+        </pre>
+      </div>
+    );
+  }
+
+  if (message.type === 'error') {
+    return (
+      <div className="bg-red-900/30 border border-red-800/50 rounded-lg p-3">
+        <div className="flex items-center gap-2 mb-1">
+          <ErrorIcon />
+          <span className="text-xs font-medium text-red-300">Error</span>
+        </div>
+        <p className="text-sm text-red-200">{message.content}</p>
+      </div>
+    );
+  }
+
+  if (message.type === 'done') {
+    return (
+      <div className="bg-green-900/30 border border-green-800/50 rounded-lg p-3 flex items-center gap-2">
+        <CheckIcon />
+        <span className="text-sm text-green-300">
+          Completed {message.exitCode === 0 ? 'successfully' : `with exit code ${message.exitCode}`}
+        </span>
+      </div>
+    );
+  }
+
+  return null;
+}
+
+function MinimizeIcon() {
+  return (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+    </svg>
+  );
+}
+
+function CloseIcon() {
+  return (
+    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+    </svg>
+  );
+}
+
+function ToolIcon() {
+  return (
+    <svg className="w-3.5 h-3.5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+    </svg>
+  );
+}
+
+function ErrorIcon() {
+  return (
+    <svg className="w-3.5 h-3.5 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg className="w-3.5 h-3.5 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
+    </svg>
+  );
+}

package/apps/dashboard/components/KanbanBoard.tsx

@@ -93,9 +93,10 @@ interface KanbanCardProps {
   isInFlight?: boolean;
   onTitleSave?: (id: number, newTitle: string) => Promise<void>;
   onStatusChange?: (id: number, newStatus: string) => Promise<void | { success: boolean; notFound?: boolean }>;
+  onTriggerClaude?: (id: number, title: string) => void;
 }
 
-function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onTitleSave, onStatusChange }: KanbanCardProps) {
+function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onTitleSave, onStatusChange, onTriggerClaude }: KanbanCardProps) {
   const [expanded, setExpanded] = useState(false);
   const router = useRouter();
 
@@ -185,8 +186,10 @@ function KanbanCard({ item, epicTitle, showEpic = false, isInFlight = false, onT
           {onStatusChange && (
             <CardMenu
               itemId={item.id}
+              itemTitle={item.title}
               currentStatus={item.status}
               onStatusChange={handleStatusChange}
+              onTriggerClaude={onTriggerClaude}
             />
           )}
         </div>
@@ -302,9 +305,10 @@ interface EpicGroupProps {
   onStatusChange?: (id: number, newStatus: string) => Promise<void | { success: boolean; notFound?: boolean }>;
   onEpicAssign?: (id: number, epicId: number | null) => Promise<void>;
   onOrderChange?: (id: number, newOrder: number) => Promise<void>;
+  onTriggerClaude?: (id: number, title: string) => void;
 }
 
-function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable = true, onTitleSave, onStatusChange, onEpicAssign, onOrderChange }: EpicGroupProps) {
+function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable = true, onTitleSave, onStatusChange, onEpicAssign, onOrderChange, onTriggerClaude }: EpicGroupProps) {
   const containerRef = useRef<HTMLDivElement>(null);
   const { isDragging, draggedItem, activeEpicZone, activeDropZone, dragPosition, draggedCardHeight, registerEpicDropZone, unregisterEpicDropZone, getCardPositions } = useDragContext();
 
@@ -511,7 +515,7 @@ function EpicGroup({ epicId, epicTitle, items, isInFlight = false, isDraggable =
         {items.map((item) => (
           <div key={item.id}>
             <DraggableCard item={item} disabled={!isDraggable}>
-              <KanbanCard item={item} onTitleSave={onTitleSave} onStatusChange={onStatusChange} />
+              <KanbanCard item={item} onTitleSave={onTitleSave} onStatusChange={onStatusChange} onTriggerClaude={onTriggerClaude} />
             </DraggableCard>
             {/* Placeholder after this card */}
             <AnimatePresence>
@@ -634,6 +638,7 @@ interface KanbanBoardProps {
   onStatusChange?: (id: number, newStatus: string) => Promise<void | { success: boolean; notFound?: boolean }>;
   onOrderChange?: (id: number, newOrder: number) => Promise<void>;
   onEpicAssign?: (id: number, epicId: number | null) => Promise<void>;
+  onTriggerClaude?: (id: number, title: string) => void;
   // Undo/redo support
   onUndo?: () => Promise<UndoAction | null>;
   onRedo?: () => Promise<UndoAction | null>;
@@ -641,7 +646,7 @@ interface KanbanBoardProps {
   canRedo?: boolean;
 }
 
-export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChange, onOrderChange, onEpicAssign, onUndo, onRedo, canUndo, canRedo }: KanbanBoardProps) {
+export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChange, onOrderChange, onEpicAssign, onTriggerClaude, onUndo, onRedo, canUndo, canRedo }: KanbanBoardProps) {
   const backlogCount = inFlight.length + Array.from(backlog.values()).reduce((sum, g) => sum + g.items.length, 0);
   const doneCount = Array.from(done.values()).reduce((sum, g) => sum + g.items.length, 0);
 
@@ -734,6 +739,7 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
                       isInFlight={true}
                       onTitleSave={onTitleSave}
                       onStatusChange={onStatusChange}
+                      onTriggerClaude={onTriggerClaude}
                     />
                   </DraggableCard>
                 ))}
@@ -771,6 +777,7 @@ export function KanbanBoard({ inFlight, backlog, done, onTitleSave, onStatusChan
                 onStatusChange={onStatusChange}
                 onEpicAssign={onEpicAssign}
                 onOrderChange={onOrderChange}
+                onTriggerClaude={onTriggerClaude}
               />
             ))}