@assistkick/create 1.2.0 → 1.4.0

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

@@ -26,6 +26,44 @@ interface CardData {
 
 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;
+};
+
 export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }: KanbanViewProps) {
   const [kanbanData, setKanbanData] = useState<any>(null);
   const [error, setError] = useState<string | null>(null);
@@ -35,10 +73,11 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
   const [playAllRunning, setPlayAllRunning] = useState(false);
   const [playAllCurrentFeature, setPlayAllCurrentFeature] = useState<string | null>(null);
   const [copiedId, setCopiedId] = useState<string | null>(null);
+  const [activeStageTab, setActiveStageTab] = useState<Record<string, string>>({});
   const { showToast } = useToast();
 
   const pollersRef = useRef<Map<string, ReturnType<typeof setInterval>>>(new Map());
-  const playAllAbortedRef = useRef(false);
+  const orchestratorPollerRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const kanbanDataRef = useRef(kanbanData);
   kanbanDataRef.current = kanbanData;
 
@@ -62,6 +101,10 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
         clearInterval(intervalId);
       }
       pollersRef.current.clear();
+      if (orchestratorPollerRef.current) {
+        clearInterval(orchestratorPollerRef.current);
+        orchestratorPollerRef.current = null;
+      }
     };
   }, [fetchKanban]);
 
@@ -204,6 +247,17 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
     }
   };
 
+  const handleResumePipeline = async (featureId: string) => {
+    try {
+      await apiClient.resumePipeline(featureId);
+      startPipelinePolling(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);
@@ -222,95 +276,71 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
     } catch { /* ignore */ }
   };
 
-  // Play All
+  // Orchestrator status polling
+  const startOrchestratorPolling = useCallback(() => {
+    if (orchestratorPollerRef.current) return;
+    orchestratorPollerRef.current = setInterval(async () => {
+      try {
+        const status = await apiClient.getOrchestratorStatus();
+        setPlayAllRunning(status.active);
+        setPlayAllCurrentFeature(status.currentFeatureId);
+        if (status.active) {
+          await fetchKanban();
+        } else {
+          // Orchestrator stopped — clean up poller
+          if (orchestratorPollerRef.current) {
+            clearInterval(orchestratorPollerRef.current);
+            orchestratorPollerRef.current = null;
+          }
+          await fetchKanban();
+        }
+      } catch {
+        if (orchestratorPollerRef.current) {
+          clearInterval(orchestratorPollerRef.current);
+          orchestratorPollerRef.current = null;
+        }
+        setPlayAllRunning(false);
+        setPlayAllCurrentFeature(null);
+      }
+    }, 5000);
+  }, [fetchKanban]);
+
+  // Check orchestrator status on mount to sync with server state
+  useEffect(() => {
+    apiClient.getOrchestratorStatus().then(status => {
+      setPlayAllRunning(status.active);
+      setPlayAllCurrentFeature(status.currentFeatureId);
+      if (status.active) {
+        startOrchestratorPolling();
+      }
+    }).catch(() => { /* ignore */ });
+
+    return () => {
+      if (orchestratorPollerRef.current) {
+        clearInterval(orchestratorPollerRef.current);
+        orchestratorPollerRef.current = null;
+      }
+    };
+  }, [startOrchestratorPolling]);
+
+  // Play All — thin wrapper around backend orchestrator
   const startPlayAll = async () => {
     if (playAllRunning) return;
-    setPlayAllRunning(true);
-    playAllAbortedRef.current = false;
-    setPlayAllCurrentFeature(null);
-
     try {
-      await playAllLoop();
-    } finally {
-      setPlayAllRunning(false);
+      await apiClient.startPlayAll(projectId ?? undefined);
+      setPlayAllRunning(true);
       setPlayAllCurrentFeature(null);
+      startOrchestratorPolling();
+    } catch (err: any) {
+      showToast(err?.message || 'Failed to start Play All');
     }
   };
 
-  const stopPlayAll = () => {
-    playAllAbortedRef.current = true;
-  };
-
-  const playAllLoop = async () => {
-    while (!playAllAbortedRef.current) {
-      let freshKanban: any;
-      let freshGraph: any;
-      try {
-        freshKanban = await apiClient.fetchKanban(projectId ?? undefined);
-        freshGraph = await apiClient.fetchGraph(projectId ?? undefined);
-        setKanbanData(freshKanban);
-      } catch { break; }
-
-      const featureNodes = new Map<string, any>();
-      freshGraph.nodes
-        .filter((n: any) => n.type === 'feature')
-        .forEach((n: any) => featureNodes.set(n.id, n));
-
-      const todoCards = Object.entries(freshKanban)
-        .filter(([id, entry]: [string, any]) => entry.column === 'todo' && featureNodes.has(id) && !entry.dev_blocked)
-        .map(([id, entry]: [string, any]) => ({
-          id,
-          completeness: featureNodes.get(id).completeness || 0,
-        }))
-        .sort((a, b) => b.completeness - a.completeness);
-
-      if (todoCards.length === 0) break;
-
-      let processed = false;
-      for (const card of todoCards) {
-        if (playAllAbortedRef.current) return;
-
-        // Check deps
-        const deps = freshGraph.edges
-          .filter((e: any) => e.from === card.id && e.relation === 'depends_on')
-          .map((e: any) => e.to)
-          .filter((depId: string) => freshGraph.nodes.some((n: any) => n.id === depId && n.type === 'feature'));
-        const blocked = deps.some((depId: string) => !freshKanban[depId] || freshKanban[depId].column !== 'done');
-        if (blocked) continue;
-
-        setPlayAllCurrentFeature(card.id);
-
-        try {
-          await apiClient.startPipeline(card.id);
-        } catch (err: any) {
-          console.error(`Play All: failed to start pipeline for ${card.id}:`, err);
-          showToast(err?.message || `Failed to start pipeline for ${card.id}`);
-          break;
-        }
-
-        // Wait for pipeline completion
-        await new Promise<void>((resolve) => {
-          const poll = async () => {
-            if (playAllAbortedRef.current) { resolve(); return; }
-            try {
-              const status = await apiClient.getPipelineStatus(card.id);
-              setPipelineStatuses(prev => ({ ...prev, [card.id]: status }));
-              if (['idle', 'completed', 'blocked', 'failed', 'interrupted'].includes(status.status)) {
-                resolve();
-                return;
-              }
-            } catch { resolve(); return; }
-            setTimeout(poll, 5000);
-          };
-          poll();
-        });
-
-        if (playAllAbortedRef.current) return;
-        processed = true;
-        break;
-      }
-
-      if (!processed) break;
+  const stopPlayAll = async () => {
+    try {
+      await apiClient.stopPlayAll();
+    } catch (err: any) {
+      showToast(err?.message || 'Failed to stop Play All');
     }
   };
 
@@ -356,6 +386,10 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
                 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 showResumeBtn = ['in_progress', 'in_review'].includes(card.column)
+                  && !isActive
+                  && ['interrupted', 'failed', 'idle'].includes(pipelineStatusValue);
 
                 return (
                   <div
@@ -400,6 +434,15 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
                             {'\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>
                         )}
@@ -422,18 +465,88 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
                       </div>
                     )}
 
-                    {pStatus?.toolCalls?.total > 0 && (
-                      <div className="kanban-tool-calls" style={{ display: 'flex' }}>
-                        {[
-                          { 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>
-                    )}
+                    {(() => {
+                      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;
+
+                      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>
+                              )}
+                              {stage?.stopReason && (
+                                <span className="kanban-stage-meta-item kanban-stop-reason" title="Stop reason">
+                                  {stage.stopReason}
+                                </span>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      );
+                    })()}
 
                     {card.devBlocked && (
                       <button

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

@@ -8,10 +8,11 @@ interface ProjectSelectorProps {
   onCreate: (name: string) => Promise<any>;
   onRename: (id: string, name: string) => Promise<void>;
   onArchive: (id: string) => Promise<void>;
+  onOpenGitModal?: (project: Project) => void;
 }
 
 export function ProjectSelector({
-  projects, selectedProjectId, onSelect, onCreate, onRename, onArchive,
+  projects, selectedProjectId, onSelect, onCreate, onRename, onArchive, onOpenGitModal,
 }: ProjectSelectorProps) {
   const [open, setOpen] = useState(false);
   const [creating, setCreating] = useState(false);
@@ -123,6 +124,21 @@ export function ProjectSelector({
                       {project.name}
                     </button>
                     <div className="project-selector-item-actions">
+                      {onOpenGitModal && (
+                        <button
+                          className={`project-selector-action-btn project-selector-git-btn${project.repoUrl ? ' connected' : ''}`}
+                          title="Git Repository"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setOpen(false);
+                            onOpenGitModal(project);
+                          }}
+                        >
+                          <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor">
+                            <path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z" />
+                          </svg>
+                        </button>
+                      )}
                       <button
                         className="project-selector-action-btn"
                         title="Rename"