@agile-vibe-coding/avc 0.3.4 → 0.4.0

package/kanban/client/src/components/kanban/CardDetailModal.jsx

@@ -169,12 +169,12 @@ export function CardDetailModal({ workItem, open, onOpenChange, onNavigate, onIt
     loadFullDetails();
   };
 
-  // Load full details when modal opens
+  // Load full details when modal opens or work item status changes
   useEffect(() => {
     if (open && workItem) {
       loadFullDetails();
     }
-  }, [open, workItem?.id]);
+  }, [open, workItem?.id, workItem?.status]);
 
   // Fall back to 'details' tab if no doc.md available
   useEffect(() => {
@@ -304,7 +304,7 @@ export function CardDetailModal({ workItem, open, onOpenChange, onNavigate, onIt
                   <FileText className="w-4 h-4 mr-2" />
                   Details
                 </TabsTrigger>
-                {fullDetails?.children && fullDetails.children.length > 0 && (
+                {fullDetails?.children && fullDetails.children.length > 0 && workItem.type !== 'task' && (
                   <TabsTrigger value="children">
                     <Users className="w-4 h-4 mr-2" />
                     Children ({fullDetails.children.length})
@@ -355,7 +355,7 @@ export function CardDetailModal({ workItem, open, onOpenChange, onNavigate, onIt
                   )}
                   {/* Run button — tasks that are planned, ready, or failed */}
                   {workItem.type === 'task' && (workItem.status === 'planned' || workItem.status === 'ready' || workItem.status === 'failed') && (
-                    <RunButton taskId={workItem.id} onStarted={loadFullDetails} />
+                    <RunButton taskId={workItem.id} taskName={workItem.name} />
                   )}
                   <button
                     onClick={() => setRefineOpen(true)}
@@ -482,33 +482,107 @@ export function CardDetailModal({ workItem, open, onOpenChange, onNavigate, onIt
                         ? fullDetails?.features
                         : fullDetails?.acceptance;
                       if (!items || items.length === 0) return null;
+                      const acStatus = fullDetails?.acceptanceStatus;
+                      const hasPassed = acStatus?.some(s => s.passed);
                       return (
                         <div>
                           <div className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-2">
                             <ListChecks className="w-4 h-4" />
                             <span>Acceptance Criteria</span>
-                            <span className="ml-auto flex items-center gap-1 text-xs font-normal text-slate-400">
-                              <Lock className="w-3 h-3" />
-                              updated by tests
-                            </span>
+                            {hasPassed ? (
+                              <span className="ml-auto text-xs font-normal text-green-600">verified by tests</span>
+                            ) : (
+                              <span className="ml-auto flex items-center gap-1 text-xs font-normal text-slate-400">
+                                <Lock className="w-3 h-3" />
+                                updated by tests
+                              </span>
+                            )}
                           </div>
                           <ul className="space-y-1.5">
-                            {items.map((ac, idx) => (
-                              <li key={idx} className="flex items-start gap-2.5 text-sm text-slate-700">
-                                <input
-                                  type="checkbox"
-                                  readOnly
-                                  disabled
-                                  className="mt-0.5 h-4 w-4 flex-shrink-0 rounded border-slate-300 text-indigo-600 cursor-not-allowed opacity-60"
-                                />
-                                <span className="leading-snug">{ac}</span>
-                              </li>
-                            ))}
+                            {items.map((ac, idx) => {
+                              const passed = acStatus?.[idx]?.passed;
+                              return (
+                                <li key={idx} className="flex items-start gap-2.5 text-sm text-slate-700">
+                                  <input
+                                    type="checkbox"
+                                    checked={!!passed}
+                                    readOnly
+                                    disabled
+                                    className={`mt-0.5 h-4 w-4 flex-shrink-0 rounded border-slate-300 cursor-not-allowed ${passed ? 'text-green-600 opacity-100' : 'text-indigo-600 opacity-60'}`}
+                                  />
+                                  <span className={`leading-snug ${passed ? 'text-green-700' : ''}`}>{ac}</span>
+                                </li>
+                              );
+                            })}
                           </ul>
                         </div>
                       );
                     })()}
 
+                    {/* Test Results (shown after Run ceremony for review) */}
+                    {fullDetails?.testResults && (
+                      <div>
+                        <div className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-2">
+                          <span>{fullDetails.testResults.passed ? '✅' : '❌'}</span>
+                          <span>Test Results</span>
+                          <span className={`ml-auto text-xs font-normal ${fullDetails.testResults.passed ? 'text-green-600' : 'text-red-600'}`}>
+                            {fullDetails.testResults.passed ? 'All tests passed' : 'Tests failed'}
+                          </span>
+                        </div>
+                        {fullDetails.testResults.command && (
+                          <p className="text-xs text-slate-500 mb-1 font-mono">$ {fullDetails.testResults.command}</p>
+                        )}
+                        <pre className="bg-slate-900 text-slate-300 text-xs font-mono rounded-lg p-3 max-h-40 overflow-y-auto whitespace-pre-wrap">
+                          {fullDetails.testResults.output || '(no output)'}
+                        </pre>
+                      </div>
+                    )}
+
+                    {/* Subtasks (inline checklist for task cards) */}
+                    {workItem.type === 'task' && fullDetails?.children && fullDetails.children.length > 0 && (
+                      <div>
+                        <div className="flex items-center gap-2 text-sm font-semibold text-slate-700 mb-2">
+                          <ListChecks className="w-4 h-4" />
+                          <span>Subtasks</span>
+                          <span className="ml-auto text-xs font-normal text-slate-400">
+                            {fullDetails.children.filter(c => c.status === 'completed').length}/{fullDetails.children.length} done
+                          </span>
+                        </div>
+                        <div className="space-y-2">
+                          {fullDetails.children.map((child) => {
+                            const done = child.status === 'completed';
+                            const fullChild = allItems?.find((i) => i.id === child.id);
+                            return (
+                              <button
+                                key={child.id}
+                                onClick={() => fullChild && onItemClick?.(fullChild)}
+                                className={`w-full text-left border rounded-lg p-3 transition-colors cursor-pointer ${done ? 'border-green-200 bg-green-50/50 hover:border-green-300' : 'border-slate-200 hover:border-blue-300 hover:bg-blue-50'}`}
+                              >
+                                <div className="flex items-start gap-2.5">
+                                  <input type="checkbox" checked={done} readOnly tabIndex={-1}
+                                    className={`mt-0.5 h-4 w-4 flex-shrink-0 rounded pointer-events-none ${done ? 'text-green-600 opacity-100' : 'text-slate-400 opacity-60'}`}
+                                  />
+                                  <div className="flex-1 min-w-0">
+                                    <p className={`text-sm font-medium ${done ? 'text-green-700' : 'text-slate-700'}`}>{child.name}</p>
+                                    {child.acceptance && child.acceptance.length > 0 && (
+                                      <ul className="mt-1 space-y-0.5">
+                                        {child.acceptance.map((ac, i) => (
+                                          <li key={i} className="flex items-start gap-1.5 text-xs text-slate-500">
+                                            <span className="flex-shrink-0 mt-0.5">{done ? '✓' : '·'}</span>
+                                            <span>{ac}</span>
+                                          </li>
+                                        ))}
+                                      </ul>
+                                    )}
+                                  </div>
+                                </div>
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    )}
+
                     {/* Dependencies */}
                     {fullDetails?.dependencies && fullDetails.dependencies.length > 0 && (
                       <div>
@@ -527,8 +601,8 @@ export function CardDetailModal({ workItem, open, onOpenChange, onNavigate, onIt
                   </div>
                 </TabsContent>
 
-                {/* Children Tab */}
-                {fullDetails?.children && fullDetails.children.length > 0 && (
+                {/* Children Tab (epics/stories only — subtasks shown inline for tasks) */}
+                {fullDetails?.children && fullDetails.children.length > 0 && workItem.type !== 'task' && (
                   <TabsContent value="children">
                     <div className="space-y-2">
                       {fullDetails.children.map((child) => {

package/kanban/client/src/components/kanban/RunButton.jsx

@@ -1,162 +1,43 @@
-import { useState, useEffect, useRef } from 'react';
-import { Play, Loader2, AlertTriangle, X, ChevronDown, ChevronUp } from 'lucide-react';
-import { getDependencyStatus, startRunTask } from '../../lib/api';
-import { cn } from '../../lib/utils';
+import { Play, Loader2 } from 'lucide-react';
+import { useRunStore } from '../../store/runStore';
 
 /**
- * Run Button — runs a task in a git worktree (implement + test + commit).
- * Shows dependency check, and streaming progress log.
+ * Run Button — thin trigger that opens the RunModal.
+ * If a run is already active for this task, shows "View Run" instead.
  */
-export function RunButton({ taskId, onStarted }) {
-  const [state, setState] = useState('idle'); // idle | checking | blocked | running | complete | error
-  const [blockers, setBlockers] = useState([]);
-  const [error, setError] = useState(null);
-  const [progress, setProgress] = useState([]);
-  const [showLog, setShowLog] = useState(false);
-  const [processId, setProcessId] = useState(null);
-  const logRef = useRef(null);
-
-  useEffect(() => {
-    if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;
-  }, [progress]);
-
-  // Listen for WebSocket run-task events dispatched by App.jsx
-  useEffect(() => {
-    if (!processId) return;
-
-    const handler = (event) => {
-      const msg = event.detail;
-      if (!msg || msg.processId !== processId) return;
-
-      if (msg.type === 'run-task:progress') {
-        setProgress(prev => [...prev, msg.message]);
-      } else if (msg.type === 'run-task:complete') {
-        setState('complete');
-        setProgress(prev => [...prev, 'Task complete — code committed.']);
-        onStarted?.();
-      } else if (msg.type === 'run-task:error') {
-        setState('error');
-        setError(msg.error || 'Run failed');
-        setProgress(prev => [...prev, `Error: ${msg.error}`]);
-      }
-    };
-
-    window.addEventListener('avc-ws-message', handler);
-    return () => window.removeEventListener('avc-ws-message', handler);
-  }, [processId, onStarted]);
-
-  const handleClick = async () => {
-    if (state === 'checking' || state === 'running') return;
-
-    setState('checking');
-    setError(null);
-    setBlockers([]);
-    setProgress([]);
-
-    try {
-      const depStatus = await getDependencyStatus(taskId);
-      if (!depStatus.ready) {
-        setState('blocked');
-        setBlockers(depStatus.blockers || []);
-        return;
-      }
-
-      setState('running');
-      setShowLog(true);
-      setProgress(['Starting task implementation...']);
-      const result = await startRunTask(taskId);
-      setProcessId(result.processId);
-      setProgress(prev => [...prev, `Process started: ${result.processId}`]);
-    } catch (err) {
-      setError(err.message);
-      setState('error');
+export function RunButton({ taskId, taskName }) {
+  const { sessions, openModal, reopenModal } = useRunStore();
+  const session = sessions[taskId];
+  const isActive = session && (session.status === 'running' || session.status === 'checking');
+
+  const handleClick = () => {
+    if (isActive) {
+      reopenModal(taskId);
+    } else {
+      openModal(taskId, taskName || taskId);
     }
   };
 
-  const dismiss = () => {
-    setState('idle');
-    setBlockers([]);
-    setError(null);
-    setProgress([]);
-    setShowLog(false);
-    setProcessId(null);
-  };
-
-  if (state === 'blocked') {
-    return (
-      <div className="space-y-2">
-        <div className="flex items-center gap-2 text-amber-700 text-sm bg-amber-50 border border-amber-200 rounded-lg px-3 py-2">
-          <AlertTriangle className="w-4 h-4 flex-shrink-0" />
-          <div>
-            <div className="font-medium">Dependencies not met</div>
-            <ul className="mt-1 text-xs space-y-0.5">
-              {blockers.map((b) => (<li key={b.id}>{b.id}: {b.name} ({b.status})</li>))}
-            </ul>
-          </div>
-        </div>
-        <button onClick={dismiss} className="text-xs text-slate-500 hover:text-slate-700">Dismiss</button>
-      </div>
-    );
-  }
-
-  if ((state === 'running' || state === 'complete' || state === 'error') && showLog) {
-    return (
-      <div className="space-y-2">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2 text-sm font-medium">
-            {state === 'running' && <Loader2 className="w-4 h-4 animate-spin text-blue-600" />}
-            {state === 'complete' && <Play className="w-4 h-4 text-green-600" />}
-            {state === 'error' && <AlertTriangle className="w-4 h-4 text-red-600" />}
-            <span className={cn(
-              state === 'running' && 'text-blue-700',
-              state === 'complete' && 'text-green-700',
-              state === 'error' && 'text-red-700',
-            )}>
-              {state === 'running' ? 'Implementing...' : state === 'complete' ? 'Complete' : 'Failed'}
-            </span>
-          </div>
-          <div className="flex items-center gap-1">
-            <button onClick={() => setShowLog(!showLog)} className="p-1 text-slate-400 hover:text-slate-600">
-              {showLog ? <ChevronUp className="w-3.5 h-3.5" /> : <ChevronDown className="w-3.5 h-3.5" />}
-            </button>
-            {state !== 'running' && (
-              <button onClick={dismiss} className="p-1 text-slate-400 hover:text-slate-600">
-                <X className="w-3.5 h-3.5" />
-              </button>
-            )}
-          </div>
-        </div>
-        {showLog && (
-          <div ref={logRef} className="max-h-32 overflow-y-auto bg-slate-900 text-slate-300 text-xs font-mono rounded-md p-2 space-y-0.5">
-            {progress.map((msg, i) => (
-              <div key={i} className={cn(
-                msg.startsWith('Error') && 'text-red-400',
-                msg.includes('complete') && 'text-green-400',
-              )}>{msg}</div>
-            ))}
-            {state === 'running' && <div className="text-slate-500 animate-pulse">...</div>}
-          </div>
-        )}
-      </div>
-    );
-  }
-
   return (
-    <div className="space-y-1">
-      <button
-        onClick={handleClick}
-        disabled={state === 'checking'}
-        className={cn(
-          'flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors',
-          state === 'checking'
-            ? 'bg-blue-100 text-blue-700 cursor-wait'
-            : 'bg-blue-600 text-white hover:bg-blue-700'
-        )}
-      >
-        {state === 'checking' ? <Loader2 className="w-4 h-4 animate-spin" /> : <Play className="w-4 h-4" />}
-        {state === 'checking' ? 'Checking...' : 'Run'}
-      </button>
-      {error && <p className="text-xs text-red-600">{error}</p>}
-    </div>
+    <button
+      onClick={handleClick}
+      className={`flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors ${
+        isActive
+          ? 'bg-blue-100 text-blue-700 hover:bg-blue-200'
+          : 'bg-blue-600 text-white hover:bg-blue-700'
+      }`}
+    >
+      {isActive ? (
+        <>
+          <Loader2 className="w-4 h-4 animate-spin" />
+          View Run
+        </>
+      ) : (
+        <>
+          <Play className="w-4 h-4" />
+          Run
+        </>
+      )}
+    </button>
   );
 }

package/kanban/client/src/components/process/ProcessMonitorBar.jsx

@@ -3,6 +3,7 @@ import { useProcessStore } from '../../store/processStore';
 import { useSprintPlanningStore } from '../../store/sprintPlanningStore';
 import { useCeremonyStore } from '../../store/ceremonyStore';
 import { useSeedStore } from '../../store/seedStore';
+import { useRunStore } from '../../store/runStore';
 
 const STATUS_PILL = {
   running:   'bg-blue-50 text-blue-700 border-blue-200 hover:bg-blue-100',
@@ -51,6 +52,9 @@ export function ProcessMonitorBar() {
     } else if (p.type === 'seed') {
       const storyId = useSeedStore.getState().getStoryIdByProcessId(p.id);
       if (storyId) useSeedStore.getState().reopenModal(storyId);
+    } else if (p.type === 'run-task') {
+      const taskId = useRunStore.getState().getTaskIdByProcessId(p.id);
+      if (taskId) useRunStore.getState().reopenModal(taskId);
     }
   };
 

package/kanban/client/src/lib/api.js

@@ -95,6 +95,16 @@ export async function getWorkItem(id) {
   return apiFetch(`/work-items/${id}`);
 }
 
+/**
+ * Get file content from a task's worktree
+ * @param {string} taskId - Task ID
+ * @param {string} filePath - Relative file path
+ * @returns {Promise<{path, content, size}>}
+ */
+export async function getWorktreeFile(taskId, filePath) {
+  return apiFetch(`/work-items/${taskId}/worktree-file?path=${encodeURIComponent(filePath)}`);
+}
+
 /**
  * Get rendered documentation (doc.md) as HTML
  * @param {string} id - Work item ID

package/kanban/client/src/store/filterStore.js

@@ -14,7 +14,7 @@ export const useFilterStore = create(
         epic: true,
         story: true,
         task: true,
-        subtask: true,
+        subtask: false,
       },
       columnVisibility: {
         Backlog: true,
@@ -174,7 +174,7 @@ export const useFilterStore = create(
             epic: true,
             story: true,
             task: true,
-            subtask: true,
+            subtask: false,
           },
           columnVisibility: {
             Backlog: true,
@@ -190,12 +190,19 @@ export const useFilterStore = create(
     }),
     {
       name: 'avc-kanban-filters', // localStorage key
+      version: 2, // bump to reset persisted subtask:true → false
       partialize: (state) => ({
-        // Only persist these fields
         typeFilters: state.typeFilters,
         columnVisibility: state.columnVisibility,
         groupBy: state.groupBy,
       }),
+      migrate: (persisted, version) => {
+        if (version < 2) {
+          // Force subtask filter to false on upgrade
+          return { ...persisted, typeFilters: { ...persisted.typeFilters, subtask: false } };
+        }
+        return persisted;
+      },
     }
   )
 );

package/kanban/client/src/store/runStore.js

@@ -0,0 +1,103 @@
+import { create } from 'zustand';
+
+/**
+ * Run Ceremony Store — manages multiple concurrent run sessions.
+ * Each session is keyed by taskId and tracks its own progress/status.
+ */
+export const useRunStore = create((set, get) => ({
+  sessions: {},         // { [taskId]: { status, progressLog, processId, taskName, error, reviewInfo, startedAt } }
+  activeTaskId: null,   // which run modal is showing
+  isOpen: false,        // modal visibility
+
+  openModal: (taskId, taskName) => set((s) => ({
+    isOpen: true,
+    activeTaskId: taskId,
+    sessions: {
+      ...s.sessions,
+      [taskId]: s.sessions[taskId] || {
+        status: 'idle',
+        progressLog: [],
+        processId: null,
+        taskName: taskName || taskId,
+        error: null,
+        reviewInfo: null,
+        startedAt: null,
+      },
+    },
+  })),
+
+  closeModal: () => set({ isOpen: false }),
+
+  reopenModal: (taskId) => set({ isOpen: true, activeTaskId: taskId }),
+
+  setStatus: (taskId, status) => set((s) => {
+    const session = s.sessions[taskId];
+    if (!session) return {};
+    return {
+      sessions: {
+        ...s.sessions,
+        [taskId]: { ...session, status, ...(status === 'running' ? { startedAt: Date.now() } : {}) },
+      },
+    };
+  }),
+
+  appendProgress: (taskId, message) => set((s) => {
+    const session = s.sessions[taskId];
+    if (!session) return {};
+    return {
+      sessions: {
+        ...s.sessions,
+        [taskId]: { ...session, progressLog: [...session.progressLog, message] },
+      },
+    };
+  }),
+
+  setProcessId: (taskId, processId) => set((s) => {
+    const session = s.sessions[taskId];
+    if (!session) return {};
+    return {
+      sessions: {
+        ...s.sessions,
+        [taskId]: { ...session, processId },
+      },
+    };
+  }),
+
+  setError: (taskId, error) => set((s) => {
+    const session = s.sessions[taskId];
+    if (!session) return {};
+    return {
+      sessions: {
+        ...s.sessions,
+        [taskId]: { ...session, error, status: 'error' },
+      },
+    };
+  }),
+
+  setReviewInfo: (taskId, reviewInfo) => set((s) => {
+    const session = s.sessions[taskId];
+    if (!session) return {};
+    return {
+      sessions: {
+        ...s.sessions,
+        [taskId]: { ...session, reviewInfo },
+      },
+    };
+  }),
+
+  removeSession: (taskId) => set((s) => {
+    const { [taskId]: _, ...rest } = s.sessions;
+    return {
+      sessions: rest,
+      ...(s.activeTaskId === taskId ? { activeTaskId: null, isOpen: false } : {}),
+    };
+  }),
+
+  getTaskIdByProcessId: (processId) => {
+    const sessions = get().sessions;
+    for (const [taskId, session] of Object.entries(sessions)) {
+      if (session.processId === processId) return taskId;
+    }
+    return null;
+  },
+}));