@assistkick/create 1.6.0 → 1.8.0

package/templates/assistkick-product-system/packages/frontend/src/components/KanbanView.tsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { apiClient } from '../api/client';
-import { COLUMNS, PIPELINE_STATUS_LABELS } from '../constants/graph';
+import { COLUMNS, WORKFLOW_STATUS_LABELS } from '../constants/graph';
 import { useToast } from '../hooks/useToast';
+import { KanbanCard } from './ds/KanbanCard';
+import { WorkflowMonitorModal } from './workflow/WorkflowMonitorModal';
 
 
 interface KanbanViewProps {
@@ -16,6 +18,10 @@ interface CardData {
   name: string;
   completeness: number;
   kind: string;
+  nodeType: string;
+  featureType: string | null;
+  isEpicChild: boolean;
+  epicParentId: string | null;
   rejectionCount: number;
   notes: any[];
   reviews: any[];
@@ -24,56 +30,39 @@ interface CardData {
   movedAt: string | null;
 }
 
-const ALL_COLUMNS = COLUMNS.map(c => c.id);
-
-const STAGE_TABS = [
-  { key: 'in_progress', label: 'Dev' },
-  { key: 'in_review', label: 'Review' },
-  { key: 'qa', label: 'QA' },
-] as const;
-
-const hasStageData = (stage: any): boolean => {
-  if (!stage) return false;
-  const tc = stage.toolCalls;
-  return (tc && tc.total > 0)
-    || stage.numTurns != null
-    || stage.costUsd != null
-    || stage.usage != null
-    || stage.stopReason != null;
-};
-
-const formatContextFill = (lastTurnUsage: any, contextWindow: number | null): string => {
-  if (!lastTurnUsage) return '';
-  const fill = (lastTurnUsage.input_tokens || 0)
-    + (lastTurnUsage.cache_creation_input_tokens || 0)
-    + (lastTurnUsage.cache_read_input_tokens || 0);
-  const denom = contextWindow || 200_000;
-  const pct = Math.round((fill / denom) * 100);
-  return `${pct}%`;
-};
-
-const formatCost = (costUsd: number | null): string => {
-  if (costUsd == null) return '';
-  return `$${costUsd.toFixed(4)}`;
-};
-
-const formatModel = (model: string | null): string => {
-  if (!model) return '';
-  // Shorten long model names: "claude-sonnet-4-20250514" → "sonnet-4"
-  const match = model.match(/(opus|sonnet|haiku)-(\d[\d.]*)/);
-  return match ? `${match[1]}-${match[2]}` : model;
-};
+interface WorkflowStatus {
+  executionId?: string;
+  status: string;
+  featureId: string;
+  currentNodeId?: string | null;
+  currentNodeType?: string | null;
+  currentAgentName?: string | null;
+  error?: string | null;
+  completedNodes?: string[];
+  failedNodes?: string[];
+  pendingNodes?: string[];
+}
+
+interface WorkflowListItem {
+  id: string;
+  name: string;
+  featureType: string | null;
+  isDefault: number;
+}
 
 export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }: KanbanViewProps) {
   const [kanbanData, setKanbanData] = useState<any>(null);
   const [error, setError] = useState<string | null>(null);
   const [draggedCard, setDraggedCard] = useState<string | null>(null);
   const [dragOverColumn, setDragOverColumn] = useState<string | null>(null);
-  const [pipelineStatuses, setPipelineStatuses] = useState<Record<string, any>>({});
+  const [workflowStatuses, setWorkflowStatuses] = useState<Record<string, WorkflowStatus>>({});
   const [playAllRunning, setPlayAllRunning] = useState(false);
   const [playAllCurrentFeature, setPlayAllCurrentFeature] = useState<string | null>(null);
+  const [playAllEpicId, setPlayAllEpicId] = useState<string | null>(null);
   const [copiedId, setCopiedId] = useState<string | null>(null);
-  const [activeStageTab, setActiveStageTab] = useState<Record<string, string>>({});
+  const [availableWorkflows, setAvailableWorkflows] = useState<WorkflowListItem[]>([]);
+  const [dropdownOpen, setDropdownOpen] = useState<string | null>(null);
+  const [monitorTarget, setMonitorTarget] = useState<{ featureId: string; featureName: string } | null>(null);
   const { showToast } = useToast();
 
   const pollersRef = useRef<Map<string, ReturnType<typeof setInterval>>>(new Map());
@@ -93,10 +82,16 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
     }
   }, [projectId]);
 
+  // Load available workflows for the dropdown
+  useEffect(() => {
+    apiClient.fetchWorkflows(projectId ?? undefined).then(data => {
+      setAvailableWorkflows(data.workflows || []);
+    }).catch(() => { /* ignore */ });
+  }, [projectId]);
+
   useEffect(() => {
     fetchKanban();
     return () => {
-      // Cleanup all pollers
       for (const intervalId of pollersRef.current.values()) {
         clearInterval(intervalId);
       }
@@ -110,18 +105,33 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
 
   const getCardsForColumn = useCallback((columnId: string): CardData[] => {
     if (!kanbanData || !graphData) return [];
-    const featureNodes = new Map<string, any>();
+    const kanbanNodes = new Map<string, any>();
     graphData.nodes
-      .filter((n: any) => n.type === 'feature')
-      .forEach((n: any) => featureNodes.set(n.id, n));
+      .filter((n: any) => n.type === 'feature' || n.type === 'epic')
+      .forEach((n: any) => kanbanNodes.set(n.id, n));
+
+    // Build epic → children map from backend-provided epic_parent_id
+    const epicChildrenMap = new Map<string, Set<string>>();
+    for (const [id, entry] of Object.entries(kanbanData) as [string, any][]) {
+      if (entry.epic_parent_id) {
+        if (!epicChildrenMap.has(entry.epic_parent_id)) {
+          epicChildrenMap.set(entry.epic_parent_id, new Set());
+        }
+        epicChildrenMap.get(entry.epic_parent_id)!.add(id);
+      }
+    }
 
     const cards: CardData[] = Object.entries(kanbanData)
-      .filter(([id, entry]: [string, any]) => entry.column === columnId && featureNodes.has(id))
+      .filter(([id, entry]: [string, any]) => entry.column === columnId && kanbanNodes.has(id))
       .map(([id, entry]: [string, any]) => ({
         id,
-        name: featureNodes.get(id).name,
-        completeness: featureNodes.get(id).completeness,
-        kind: featureNodes.get(id).kind || 'new',
+        name: kanbanNodes.get(id).name,
+        completeness: kanbanNodes.get(id).completeness,
+        kind: kanbanNodes.get(id).kind || 'new',
+        nodeType: kanbanNodes.get(id).type || 'feature',
+        featureType: kanbanNodes.get(id).feature_type || null,
+        isEpicChild: false,
+        epicParentId: entry.epic_parent_id || null,
         rejectionCount: entry.rejection_count || 0,
         notes: entry.notes || [],
         reviews: entry.reviews || [],
@@ -138,22 +148,45 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
       cards.sort((a, b) => (a.movedAt || '').localeCompare(b.movedAt || ''));
     }
 
-    return cards;
+    // Sort-order-independent grouping: epics first, then their children, then ungrouped
+    const epicCards = cards.filter(c => c.nodeType === 'epic');
+    const childIds = new Set<string>();
+    const grouped: CardData[] = [];
+
+    for (const epic of epicCards) {
+      grouped.push(epic);
+      const children = epicChildrenMap.get(epic.id);
+      if (children) {
+        const childCards = cards.filter(c => children.has(c.id));
+        for (const child of childCards) {
+          child.isEpicChild = true;
+          grouped.push(child);
+          childIds.add(child.id);
+        }
+      }
+    }
+
+    // Add ungrouped cards (not an epic and not an epic child)
+    for (const card of cards) {
+      if (card.nodeType !== 'epic' && !childIds.has(card.id)) {
+        grouped.push(card);
+      }
+    }
+
+    return grouped;
   }, [kanbanData, graphData]);
 
-  const getPipelineBadgeText = (status: string, rejectionCount: number) => {
-    const label = (PIPELINE_STATUS_LABELS as any)[status] || status;
-    if (rejectionCount >= 1) return `Retry ${rejectionCount + 1}`;
-    return label;
+  const getStatusBadgeText = (status: string) => {
+    return (WORKFLOW_STATUS_LABELS as any)[status] || status;
   };
 
-  const startPipelinePolling = useCallback((featureId: string) => {
+  const startWorkflowPolling = useCallback((featureId: string) => {
     if (pollersRef.current.has(featureId)) return;
     const intervalId = setInterval(async () => {
       try {
-        const status = await apiClient.getPipelineStatus(featureId);
-        setPipelineStatuses(prev => ({ ...prev, [featureId]: status }));
-        if (['idle', 'completed', 'blocked', 'failed', 'interrupted'].includes(status.status)) {
+        const status: WorkflowStatus = await apiClient.getWorkflowStatus(featureId);
+        setWorkflowStatuses(prev => ({ ...prev, [featureId]: status }));
+        if (['idle', 'completed', 'failed'].includes(status.status)) {
           clearInterval(pollersRef.current.get(featureId)!);
           pollersRef.current.delete(featureId);
           await fetchKanban();
@@ -166,35 +199,22 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
     pollersRef.current.set(featureId, intervalId);
   }, [fetchKanban]);
 
-  // Fetch initial pipeline statuses for all cards
+  // Fetch initial workflow statuses for all cards
   useEffect(() => {
     if (!kanbanData || !graphData) return;
     const featureIds = Object.keys(kanbanData);
     featureIds.forEach(async (id) => {
       try {
-        const status = await apiClient.getPipelineStatus(id);
+        const status: WorkflowStatus = await apiClient.getWorkflowStatus(id);
         if (status.status !== 'idle') {
-          setPipelineStatuses(prev => ({ ...prev, [id]: status }));
-          if (!['completed', 'failed', 'blocked', 'interrupted'].includes(status.status)) {
-            startPipelinePolling(id);
+          setWorkflowStatuses(prev => ({ ...prev, [id]: status }));
+          if (!['completed', 'failed'].includes(status.status)) {
+            startWorkflowPolling(id);
           }
         }
       } catch { /* ignore */ }
     });
-  }, [kanbanData, graphData, startPipelinePolling]);
-
-  const checkDependencies = useCallback((featureId: string) => {
-    if (!graphData || !kanbanData) return { blocked: false, blockedBy: [] as string[] };
-    const deps = graphData.edges
-      .filter((e: any) => e.from === featureId && e.relation === 'depends_on')
-      .map((e: any) => e.to)
-      .filter((depId: string) => graphData.nodes.some((n: any) => n.id === depId && n.type === 'feature'));
-    const blockedBy = deps.filter((depId: string) => {
-      const entry = kanbanData[depId];
-      return !entry || entry.column !== 'done';
-    });
-    return { blocked: blockedBy.length > 0, blockedBy };
-  }, [graphData, kanbanData]);
+  }, [kanbanData, graphData, startWorkflowPolling]);
 
   // Drag handlers
   const handleDragStart = (e: React.DragEvent, featureId: string) => {
@@ -236,34 +256,25 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
     }
   };
 
-  const handleStartPipeline = async (featureId: string) => {
+  const handleStartWorkflow = async (featureId: string, workflowId?: string) => {
     try {
-      await apiClient.startPipeline(featureId);
-      startPipelinePolling(featureId);
+      await apiClient.startWorkflow(featureId, workflowId, projectId ?? undefined);
+      startWorkflowPolling(featureId);
       await fetchKanban();
     } catch (err: any) {
-      console.error('Failed to start pipeline:', err);
-      showToast(err?.message || 'Failed to start pipeline');
+      console.error('Failed to start workflow:', err);
+      showToast(err?.message || 'Failed to start workflow');
     }
   };
 
-  const handleResumePipeline = async (featureId: string) => {
+  const handleResumeWorkflow = async (featureId: string) => {
     try {
-      await apiClient.resumePipeline(featureId);
-      startPipelinePolling(featureId);
+      await apiClient.resumeWorkflow(featureId);
+      startWorkflowPolling(featureId);
       await fetchKanban();
     } catch (err: any) {
-      console.error('Failed to resume pipeline:', err);
-      showToast(err?.message || 'Failed to resume pipeline');
-    }
-  };
-
-  const handleUnblock = async (featureId: string) => {
-    try {
-      await apiClient.unblockCard(featureId);
-      await fetchKanban();
-    } catch (err) {
-      console.error('Failed to unblock card:', err);
+      console.error('Failed to resume workflow:', err);
+      showToast(err?.message || 'Failed to resume workflow');
     }
   };
 
@@ -276,6 +287,18 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
     } catch { /* ignore */ }
   };
 
+  const handlePlayDropdown = (featureId: string) => {
+    setDropdownOpen(prev => prev === featureId ? null : featureId);
+  };
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    if (!dropdownOpen) return;
+    const handler = () => setDropdownOpen(null);
+    document.addEventListener('click', handler);
+    return () => document.removeEventListener('click', handler);
+  }, [dropdownOpen]);
+
   // Orchestrator status polling
   const startOrchestratorPolling = useCallback(() => {
     if (orchestratorPollerRef.current) return;
@@ -284,14 +307,15 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
         const status = await apiClient.getOrchestratorStatus();
         setPlayAllRunning(status.active);
         setPlayAllCurrentFeature(status.currentFeatureId);
+        setPlayAllEpicId(status.epicId || null);
         if (status.active) {
           await fetchKanban();
         } else {
-          // Orchestrator stopped — clean up poller
           if (orchestratorPollerRef.current) {
             clearInterval(orchestratorPollerRef.current);
             orchestratorPollerRef.current = null;
           }
+          setPlayAllEpicId(null);
           await fetchKanban();
         }
       } catch {
@@ -301,6 +325,7 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
         }
         setPlayAllRunning(false);
         setPlayAllCurrentFeature(null);
+        setPlayAllEpicId(null);
       }
     }, 5000);
   }, [fetchKanban]);
@@ -310,6 +335,7 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
     apiClient.getOrchestratorStatus().then(status => {
       setPlayAllRunning(status.active);
       setPlayAllCurrentFeature(status.currentFeatureId);
+      setPlayAllEpicId(status.epicId || null);
       if (status.active) {
         startOrchestratorPolling();
       }
@@ -324,10 +350,10 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
   }, [startOrchestratorPolling]);
 
   // Play All — thin wrapper around backend orchestrator
-  const startPlayAll = async () => {
+  const startPlayAll = async (epicId?: string) => {
     if (playAllRunning) return;
     try {
-      await apiClient.startPlayAll(projectId ?? undefined);
+      await apiClient.startPlayAll(projectId ?? undefined, epicId);
       setPlayAllRunning(true);
       setPlayAllCurrentFeature(null);
       startOrchestratorPolling();
@@ -344,38 +370,49 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
     }
   };
 
-  if (error) return <div className="error-msg">{error}</div>;
-  if (!kanbanData) return <div className="kanban-loading">Loading...</div>;
+  if (error) return <div className="p-4 text-error text-[13px]">{error}</div>;
+  if (!kanbanData) return <div className="p-4 text-content-muted text-[13px]">Loading...</div>;
 
   return (
-    <div className="kanban-board">
+    <div className="flex h-full w-full gap-2 overflow-x-auto">
       {COLUMNS.map(col => {
         const cards = getCardsForColumn(col.id);
-        const sourceColumn = draggedCard ? kanbanData?.[draggedCard]?.column : null;
-        const isDropTarget = draggedCard && col.id !== sourceColumn;
         const isDragOver = dragOverColumn === col.id;
 
         return (
-          <div key={col.id} className="kanban-column" data-column={col.id}>
-            <div className="kanban-column-header">
-              <div className="kanban-column-header-left">
-                <span className="kanban-column-title">{col.label}</span>
-                <span className="kanban-column-count">{cards.length}</span>
+          <div key={col.id} className="flex shrink-0 basis-[calc(20%-0.4rem)] flex-col rounded-xl border border-edge bg-surface-alt overflow-hidden" data-column={col.id}>
+            {/* Column header */}
+            <div className="flex items-center justify-between px-3 py-2.5 border-b border-edge bg-surface-raised">
+              <div className="flex items-center gap-2">
+                <span className="text-[12px] font-bold uppercase tracking-wider text-content">{col.label}</span>
+                <span className="rounded-md bg-surface px-1.5 py-0.5 text-[11px] font-mono text-content-muted">{cards.length}</span>
               </div>
               {col.id === 'todo' && (
                 playAllRunning ? (
-                  <button className="kanban-play-all-btn stop" title="Stop processing" onClick={stopPlayAll}>
+                  <button
+                    className="flex h-6 w-6 items-center justify-center rounded-full border border-error text-error text-[12px] hover:bg-error hover:text-surface transition-colors cursor-pointer"
+                    title="Stop processing"
+                    onClick={stopPlayAll}
+                  >
                     {'\u25A0'}
                   </button>
                 ) : (
-                  <button className="kanban-play-all-btn" title="Start automated development for all TODO features" onClick={startPlayAll}>
+                  <button
+                    className="flex h-6 w-6 items-center justify-center rounded-full border border-accent text-accent text-[9px] tracking-[-2px] pl-0.5 hover:bg-accent hover:text-surface transition-colors cursor-pointer"
+                    title="Start automated development for all TODO features"
+                    onClick={() => startPlayAll()}
+                  >
                     {'\u25B6\u25B6'}
                   </button>
                 )
               )}
             </div>
+            {/* Column body */}
             <div
-              className={`kanban-column-body${isDropTarget ? ' drop-target' : ''}${isDragOver ? ' drag-over' : ''}`}
+              className={[
+                'flex flex-1 flex-col gap-2 overflow-y-auto p-2',
+                isDragOver ? 'bg-accent/10' : '',
+              ].join(' ')}
               data-column={col.id}
               onDragOver={(e) => handleDragOver(e, col.id)}
               onDragLeave={handleDragLeave}
@@ -383,193 +420,82 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
             >
               {cards.map(card => {
                 const pct = Math.round((card.completeness || 0) * 100);
-                const pStatus = pipelineStatuses[card.id];
-                const isActive = pStatus && !['idle', 'completed', 'blocked', 'failed', 'interrupted'].includes(pStatus.status);
-                const isTerminal = pStatus && ['completed', 'failed', 'blocked', 'interrupted'].includes(pStatus.status);
-                const pipelineStatusValue = pStatus?.status ?? 'idle';
+                const wStatus = workflowStatuses[card.id];
+                const workflowStatusValue = wStatus?.status ?? 'idle';
+                const isActive = workflowStatusValue === 'running';
                 const showResumeBtn = ['in_progress', 'in_review'].includes(card.column)
                   && !isActive
-                  && ['interrupted', 'failed', 'idle'].includes(pipelineStatusValue);
+                  && workflowStatusValue === 'failed';
 
-                return (
-                  <div
-                    key={card.id}
-                    className={`kanban-card${card.rejectionCount >= 3 ? ' problematic' : ''}${card.devBlocked ? ' dev-blocked' : ''}${playAllCurrentFeature === card.id ? ' play-all-active' : ''}`}
-                    data-feature-id={card.id}
-                    draggable
-                    onDragStart={(e) => handleDragStart(e, card.id)}
-                    onDragEnd={handleDragEnd}
-                    onClick={(e) => {
-                      if ((e.target as HTMLElement).closest('button, textarea, .kanban-note-form')) return;
-                      onCardClick({ id: card.id, name: card.name });
-                    }}
-                    style={{ cursor: 'pointer' }}
-                  >
-                    <div className="kanban-card-header">
-                      <span className="kanban-card-id">
-                        {card.id}
-                        {card.kind && card.kind !== 'new' && (
-                          <> <span className={`kanban-card-kind kind-${card.kind}`}>{card.kind}</span></>
-                        )}
-                      </span>
-                      <button
-                        className={`kanban-copy-btn${copiedId === card.id ? ' copied' : ''}`}
-                        title="Copy feature ID and name"
-                        onClick={(e) => { e.stopPropagation(); handleCopy(card); }}
-                      >
-                        {copiedId === card.id ? '\u2713' : '\uD83D\uDCCB'}
-                      </button>
-                      <span className="kanban-card-header-right">
-                        {card.rejectionCount > 0 && (
-                          <span className={`kanban-card-rejections${card.rejectionCount >= 3 ? ' high' : ''}`}>
-                            {card.rejectionCount}x rejected
-                          </span>
-                        )}
-                        {card.column === 'todo' && !card.devBlocked && (
-                          <button
-                            className="kanban-play-btn"
-                            title="Start automated development pipeline"
-                            onClick={(e) => { e.stopPropagation(); handleStartPipeline(card.id); }}
-                          >
-                            {'\u25B6'}
-                          </button>
-                        )}
-                        {showResumeBtn && (
-                          <button
-                            className="kanban-play-btn kanban-resume-btn"
-                            title="Resume pipeline from last completed step"
-                            onClick={(e) => { e.stopPropagation(); handleResumePipeline(card.id); }}
-                          >
-                            {'\u25B6'}
-                          </button>
-                        )}
-                        {card.devBlocked && (
-                          <span className="kanban-blocked-badge">Blocked</span>
-                        )}
-                      </span>
-                    </div>
-
-                    <div className="kanban-card-name">{card.name}</div>
-
-                    <div className="kanban-card-completeness-row">
-                      <span className="kanban-card-completeness-prefix">Spec</span>
-                      <div className="kanban-card-completeness">
-                        <div className="kanban-card-completeness-fill" style={{ width: `${pct}%` }} />
-                      </div>
-                      <span className="kanban-card-completeness-label">{pct}%</span>
-                    </div>
-
-                    {pStatus && pStatus.status !== 'idle' && (
-                      <div className={`kanban-pipeline-status${isActive ? ' pipeline-active' : ''}${isTerminal ? ` pipeline-${pStatus.status}` : ''}`}>
-                        {getPipelineBadgeText(pStatus.status, card.rejectionCount)}
-                      </div>
-                    )}
-
-                    {(() => {
-                      const ss = pStatus?.stageStats;
-                      const availableTabs = ss
-                        ? STAGE_TABS.filter(t => hasStageData(ss[t.key]))
-                        : [];
-                      // Fall back to flat toolCalls for old data without stageStats
-                      if (availableTabs.length === 0 && pStatus?.toolCalls?.total > 0) {
-                        return (
-                          <div className="kanban-tool-calls">
-                            {[
-                              { label: 'Write', count: pStatus.toolCalls.write },
-                              { label: 'Edit', count: pStatus.toolCalls.edit },
-                              { label: 'Read', count: pStatus.toolCalls.read },
-                              { label: 'Bash', count: pStatus.toolCalls.bash },
-                            ].filter(i => i.count > 0).map(i => (
-                              <span key={i.label} className="kanban-tool-badge">{i.label}: {i.count}</span>
-                            ))}
-                          </div>
-                        );
-                      }
-                      if (availableTabs.length === 0) return null;
-
-                      const currentTab = activeStageTab[card.id] || availableTabs[availableTabs.length - 1].key;
-                      const stage = ss[currentTab];
-                      const tc = stage?.toolCalls;
+                const issueLabel = card.notes.length > 0
+                  ? `${card.notes.length} issue${card.notes.length !== 1 ? 's' : ''} reported`
+                  : card.column === 'qa'
+                    ? '+ Report Issue'
+                    : 'No issues';
 
+                return (
+                  <div key={card.id} className={['relative', card.isEpicChild ? 'ml-3' : ''].join(' ')}>
+                    <KanbanCard
+                      id={card.id}
+                      name={card.name}
+                      pct={pct}
+                      kind={card.kind}
+                      isEpic={card.nodeType === 'epic'}
+                      rejectionCount={card.rejectionCount}
+                      blocked={card.devBlocked}
+                      pipeline={workflowStatusValue}
+                      pipelineLabel={wStatus && wStatus.status !== 'idle' ? getStatusBadgeText(wStatus.status) : undefined}
+                      issueCount={card.notes.length}
+                      issueLabel={issueLabel}
+                      showPlay={card.column === 'todo' && !card.devBlocked && !(card.nodeType === 'epic' && playAllRunning && playAllEpicId === card.id)}
+                      showPlayDropdown={card.nodeType !== 'epic' && availableWorkflows.length > 1}
+                      showStop={card.nodeType === 'epic' && playAllRunning && playAllEpicId === card.id}
+                      showResume={showResumeBtn}
+                      copied={copiedId === card.id}
+                      playAllActive={playAllCurrentFeature === card.id || (card.nodeType === 'epic' && playAllRunning && playAllEpicId === card.id)}
+                      agentName={isActive ? wStatus?.currentAgentName : null}
+                      errorMessage={workflowStatusValue === 'failed' ? wStatus?.error : null}
+                      onClick={() => onCardClick({ id: card.id, name: card.name })}
+                      onCopy={() => handleCopy(card)}
+                      onPlay={() => card.nodeType === 'epic' ? startPlayAll(card.id) : handleStartWorkflow(card.id)}
+                      onPlayDropdown={() => handlePlayDropdown(card.id)}
+                      onStop={stopPlayAll}
+                      onResume={() => handleResumeWorkflow(card.id)}
+                      onIssuesClick={() => onIssuesClick(card.id, card.name, card.column, card.notes, card.reviews)}
+                      onMonitorClick={() => setMonitorTarget({ featureId: card.id, featureName: card.name })}
+                      draggable
+                      onDragStart={(e) => handleDragStart(e, card.id)}
+                      onDragEnd={handleDragEnd}
+                    />
+                    {/* Workflow selection dropdown — filtered by feature type */}
+                    {dropdownOpen === card.id && (() => {
+                      const cardFeatureType = card.featureType || 'code';
+                      const filteredWorkflows = availableWorkflows.filter(wf =>
+                        !wf.featureType || wf.featureType === cardFeatureType
+                      );
                       return (
-                        <div className="kanban-stage-stats" onClick={(e) => e.stopPropagation()}>
-                          <div className="kanban-stage-tabs">
-                            {availableTabs.map(t => (
-                              <button
-                                key={t.key}
-                                className={`kanban-stage-tab${currentTab === t.key ? ' active' : ''}`}
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  setActiveStageTab(prev => ({ ...prev, [card.id]: t.key }));
-                                }}
-                              >
-                                {t.label}
-                              </button>
-                            ))}
-                          </div>
-                          <div className="kanban-stage-body">
-                            {tc && tc.total > 0 && (
-                              <div className="kanban-tool-calls">
-                                {[
-                                  { label: 'Write', count: tc.write },
-                                  { label: 'Edit', count: tc.edit },
-                                  { label: 'Read', count: tc.read },
-                                  { label: 'Bash', count: tc.bash },
-                                ].filter(i => i.count > 0).map(i => (
-                                  <span key={i.label} className="kanban-tool-badge">{i.label}: {i.count}</span>
-                                ))}
-                              </div>
-                            )}
-                            <div className="kanban-stage-meta">
-                              {stage?.lastTurnUsage && (
-                                <span className="kanban-stage-meta-item" title="Peak context window utilization">
-                                  Ctx: {formatContextFill(stage.lastTurnUsage, stage.contextWindow)}
-                                </span>
-                              )}
-                              {stage?.numTurns != null && (
-                                <span className="kanban-stage-meta-item" title="Agentic turns">
-                                  {stage.numTurns} turns
-                                </span>
-                              )}
-                              {stage?.costUsd != null && (
-                                <span className="kanban-stage-meta-item" title={`Model: ${stage.model || 'unknown'}`}>
-                                  {formatCost(stage.costUsd)}
-                                  {stage.model && <span className="kanban-stage-model"> {formatModel(stage.model)}</span>}
-                                </span>
+                        <div
+                          className="absolute right-0 top-8 z-50 min-w-[180px] rounded-lg border border-edge bg-surface-raised shadow-xl shadow-black/20 py-1"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          {filteredWorkflows.map(wf => (
+                            <button
+                              key={wf.id}
+                              className="flex w-full items-center gap-2 px-3 py-2 text-left text-[12px] text-content hover:bg-white/[0.08] transition-colors cursor-pointer"
+                              onClick={() => {
+                                setDropdownOpen(null);
+                                handleStartWorkflow(card.id, wf.id);
+                              }}
+                            >
+                              <span className="flex-1">{wf.name}</span>
+                              {wf.isDefault === 1 && (
+                                <span className="rounded-full bg-accent/15 px-1.5 py-0.5 text-[9px] font-bold text-accent">Default</span>
                               )}
-                              {stage?.stopReason && (
-                                <span className="kanban-stage-meta-item kanban-stop-reason" title="Stop reason">
-                                  {stage.stopReason}
-                                </span>
-                              )}
-                            </div>
-                          </div>
+                            </button>
+                          ))}
                         </div>
                       );
                     })()}
-
-                    {card.devBlocked && (
-                      <button
-                        className="kanban-unblock-btn"
-                        onClick={(e) => { e.stopPropagation(); handleUnblock(card.id); }}
-                      >
-                        Unblock
-                      </button>
-                    )}
-
-                    <button
-                      className={`kanban-issues-btn${card.notes.length > 0 ? ' has-issues' : ''}`}
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        onIssuesClick(card.id, card.name, card.column, card.notes, card.reviews);
-                      }}
-                    >
-                      {card.notes.length > 0
-                        ? `${card.notes.length} issue${card.notes.length !== 1 ? 's' : ''} reported`
-                        : card.column === 'qa'
-                          ? '+ Report Issue'
-                          : 'No issues'}
-                    </button>
                   </div>
                 );
               })}
@@ -578,6 +504,15 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
         );
       })}
 
+      {/* Workflow Monitor Modal */}
+      {monitorTarget && (
+        <WorkflowMonitorModal
+          featureId={monitorTarget.featureId}
+          featureName={monitorTarget.featureName}
+          isOpen={true}
+          onClose={() => setMonitorTarget(null)}
+        />
+      )}
     </div>
   );
 }