@assistkick/create 1.6.0 → 1.7.0

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

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { apiClient } from '../api/client';
 import { COLUMNS, PIPELINE_STATUS_LABELS } from '../constants/graph';
 import { useToast } from '../hooks/useToast';
+import { KanbanCard } from './ds/KanbanCard';
 
 
 interface KanbanViewProps {
@@ -344,38 +345,50 @@ 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}
@@ -385,192 +398,83 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
                 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 showResumeBtn = ['in_progress', 'in_review'].includes(card.column)
                   && !isActive
                   && ['interrupted', 'failed', 'idle'].includes(pipelineStatusValue);
 
+                // Build tool calls + meta from stage stats or flat toolCalls
+                let toolCalls: Record<string, number> | undefined;
+                let metaPills: string[] | undefined;
+                let stopReason: string | undefined;
+
+                const ss = pStatus?.stageStats;
+                const availableTabs = ss
+                  ? STAGE_TABS.filter(t => hasStageData(ss[t.key]))
+                  : [];
+
+                if (availableTabs.length > 0) {
+                  const currentTab = activeStageTab[card.id] || availableTabs[availableTabs.length - 1].key;
+                  const stage = ss[currentTab];
+                  const tc = stage?.toolCalls;
+                  if (tc && tc.total > 0) {
+                    toolCalls = {};
+                    if (tc.read > 0) toolCalls['Read'] = tc.read;
+                    if (tc.bash > 0) toolCalls['Tools'] = tc.bash;
+                    if (tc.write > 0) toolCalls['Write'] = tc.write;
+                    if (tc.edit > 0) toolCalls['Edit'] = tc.edit;
+                  }
+                  const pills: string[] = [];
+                  if (stage?.lastTurnUsage) pills.push(`Ctx ${formatContextFill(stage.lastTurnUsage, stage.contextWindow)}`);
+                  if (stage?.numTurns != null) pills.push(`${stage.numTurns}t`);
+                  if (stage?.costUsd != null) pills.push(formatCost(stage.costUsd));
+                  if (stage?.model) pills.push(formatModel(stage.model));
+                  if (pills.length > 0) metaPills = pills;
+                  if (stage?.stopReason) stopReason = stage.stopReason;
+                } else if (pStatus?.toolCalls?.total > 0) {
+                  toolCalls = {};
+                  if (pStatus.toolCalls.read > 0) toolCalls['Read'] = pStatus.toolCalls.read;
+                  if (pStatus.toolCalls.bash > 0) toolCalls['Tools'] = pStatus.toolCalls.bash;
+                  if (pStatus.toolCalls.write > 0) toolCalls['Write'] = pStatus.toolCalls.write;
+                  if (pStatus.toolCalls.edit > 0) toolCalls['Edit'] = pStatus.toolCalls.edit;
+                }
+
+                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
+                  <KanbanCard
                     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}
+                    id={card.id}
+                    name={card.name}
+                    pct={pct}
+                    kind={card.kind}
+                    rejectionCount={card.rejectionCount}
+                    blocked={card.devBlocked}
+                    pipeline={pipelineStatusValue}
+                    pipelineLabel={pStatus && pStatus.status !== 'idle' ? getPipelineBadgeText(pStatus.status, card.rejectionCount) : undefined}
+                    toolCalls={toolCalls}
+                    meta={metaPills}
+                    stopReason={stopReason}
+                    issueCount={card.notes.length}
+                    issueLabel={issueLabel}
+                    showPlay={card.column === 'todo' && !card.devBlocked}
+                    showResume={showResumeBtn}
+                    copied={copiedId === card.id}
+                    playAllActive={playAllCurrentFeature === card.id}
+                    onClick={() => onCardClick({ id: card.id, name: card.name })}
+                    onCopy={() => handleCopy(card)}
+                    onPlay={() => handleStartPipeline(card.id)}
+                    onResume={() => handleResumePipeline(card.id)}
+                    onUnblock={() => handleUnblock(card.id)}
+                    onIssuesClick={() => onIssuesClick(card.id, card.name, card.column, card.notes, card.reviews)}
                     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;
-
-                      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
-                        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>
+                  />
                 );
               })}
             </div>

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

@@ -1,21 +1,13 @@
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { apiClient } from '../api/client';
+import { useQaSheetStore } from '../stores/useQaSheetStore';
 
-interface QaIssueSheetProps {
-  isOpen: boolean;
-  featureId: string | null;
-  featureName: string;
-  column: string;
-  notes: any[];
-  reviews: any[];
-  onClose: () => void;
-  onNotesChanged: () => void;
-}
+export function QaIssueSheet() {
+  const {
+    isOpen, featureId, featureName, column, notes: initialNotes,
+    reviews: initialReviews, close,
+  } = useQaSheetStore();
 
-export function QaIssueSheet({
-  isOpen, featureId, featureName, column, notes: initialNotes, reviews: initialReviews,
-  onClose, onNotesChanged,
-}: QaIssueSheetProps) {
   const sheetRef = useRef<HTMLDivElement>(null);
   const [notes, setNotes] = useState<any[]>(initialNotes);
   const [reviews, setReviews] = useState<any[]>(initialReviews);
@@ -25,7 +17,7 @@ export function QaIssueSheet({
 
   const isEditable = column === 'qa';
 
-  // Sync when props change
+  // Sync when store data changes
   useEffect(() => {
     setNotes(initialNotes);
     setReviews(initialReviews);
@@ -39,12 +31,12 @@ export function QaIssueSheet({
     const handleClick = (e: MouseEvent) => {
       if (sheetRef.current && !sheetRef.current.contains(e.target as Node)) {
         if ((e.target as HTMLElement).closest('.kanban-issues-btn')) return;
-        onClose();
+        close();
       }
     };
     document.addEventListener('click', handleClick);
     return () => document.removeEventListener('click', handleClick);
-  }, [isOpen, onClose]);
+  }, [isOpen, close]);
 
   const refreshNotes = useCallback(async () => {
     if (!featureId) return;
@@ -55,11 +47,10 @@ export function QaIssueSheet({
         setNotes(entry.notes || []);
         setReviews(entry.reviews || []);
       }
-      onNotesChanged();
     } catch (err) {
       console.error('Failed to refresh notes:', err);
     }
-  }, [featureId, onNotesChanged]);
+  }, [featureId]);
 
   const handleAddNote = async () => {
     const text = newNoteText.trim();
@@ -108,7 +99,7 @@ export function QaIssueSheet({
     <div className={`qa-issue-sheet${isOpen ? ' open' : ''}`} ref={sheetRef}>
       <div className="qa-sheet-header">
         <span className="qa-sheet-title">{featureId} — {featureName}</span>
-        <button className="qa-sheet-close" onClick={onClose}>&times;</button>
+        <button className="qa-sheet-close" onClick={close}>&times;</button>
       </div>
       <div className="qa-sheet-body">
         <div className="qa-sheet-subtitle">

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

@@ -1,63 +1,17 @@
-import React, { useState, useCallback } from 'react';
+import React from 'react';
 import { marked } from 'marked';
-import { apiClient } from '../api/client';
-import { getTaskIcon, getTaskCssClass, shouldShowTaskList } from '../utils/task_status';
+import { useSidePanelStore } from '../stores/useSidePanelStore';
+import { useGraphStore } from '../stores/useGraphStore';
+import { useGraphUIStore } from '../stores/useGraphUIStore';
+import { getTaskCssClass, getTaskIcon, shouldShowTaskList } from '../utils/task_status';
 
-interface WorkSummary {
-  cycle: number;
-  filesCreated: string[];
-  filesUpdated: string[];
-  filesDeleted: string[];
-  approach: string;
-  decisions: string[];
-  timestamp: string;
-}
-
-interface SidePanelProps {
-  graphData: any;
-  onEdgeClick: (neighborId: string) => void;
-}
-
-export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
-  const [isOpen, setIsOpen] = useState(false);
-  const [node, setNode] = useState<any>(null);
-  const [content, setContent] = useState('');
-  const [workSummaries, setWorkSummaries] = useState<WorkSummary[]>([]);
-  const [expandedSummaries, setExpandedSummaries] = useState(false);
-  const [tasks, setTasks] = useState<{ total: number; completed: number; items: any[] } | null>(null);
-  const [expandedTasks, setExpandedTasks] = useState(false);
-
-  const open = useCallback(async (n: any) => {
-    setNode(n);
-    setWorkSummaries([]);
-    setExpandedSummaries(false);
-    setTasks(null);
-    setExpandedTasks(false);
-    try {
-      const detail = await apiClient.fetchNode(n.id);
-      setContent(detail.content);
-      setIsOpen(true);
-
-      // Fetch pipeline status for feature nodes to get work summaries
-      if (n.type === 'feature' || n.id?.startsWith('feat_')) {
-        try {
-          const pStatus = await apiClient.getPipelineStatus(n.id);
-          if (pStatus?.workSummaries?.length > 0) {
-            setWorkSummaries(pStatus.workSummaries);
-          }
-          if (pStatus?.tasks) {
-            setTasks(pStatus.tasks);
-          }
-        } catch {
-          // Pipeline status may not exist for all features
-        }
-      }
-    } catch (err) {
-      console.error('Failed to fetch node:', err);
-    }
-  }, []);
-
-  const close = useCallback(() => setIsOpen(false), []);
+export function SidePanel() {
+  const {
+    isOpen, node, content, workSummaries, expandedSummaries,
+    tasks, expandedTasks, close, toggleSummaries, toggleTasks,
+  } = useSidePanelStore();
+  const graphData = useGraphStore((s) => s.graphData);
+  const onEdgeClick = useGraphUIStore((s) => s.onEdgeClick);
 
   const renderMarkdown = (md: string) => {
     const stripped = md.replace(/^---[\s\S]*?---\n*/m, '');
@@ -78,11 +32,6 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
     return edges;
   };
 
-  // Expose open/close via ref-like approach on the component instance
-  // We'll use a callback pattern instead
-  (SidePanel as any).__open = open;
-  (SidePanel as any).__close = close;
-
   if (!node) return (
     <div className={`side-panel${isOpen ? ' open' : ''}`} id="side-panel">
       <div className="panel-header">
@@ -114,7 +63,7 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
           <div className="panel-task-list">
             <button
               className="panel-task-list-toggle"
-              onClick={() => setExpandedTasks(prev => !prev)}
+              onClick={toggleTasks}
             >
               <span className={`panel-task-list-chevron${expandedTasks ? ' expanded' : ''}`}>{'\u25B6'}</span>
               Tasks ({tasks!.completed}/{tasks!.total})
@@ -138,7 +87,7 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
           <div className="panel-work-summary">
             <button
               className="panel-work-summary-toggle"
-              onClick={() => setExpandedSummaries(prev => !prev)}
+              onClick={toggleSummaries}
             >
               {expandedSummaries ? '\u25BC' : '\u25B6'} Work Summary ({workSummaries.length} cycle{workSummaries.length !== 1 ? 's' : ''})
             </button>
@@ -211,7 +160,7 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
                   <li key={i} className="panel-edge-item">
                     <span className="panel-edge-direction">{direction}</span>
                     <span className="panel-edge-relation">{edge.relation.replace(/_/g, ' ')}</span>
-                    <a className="panel-edge-link" href="#" onClick={(e) => { e.preventDefault(); onEdgeClick(edge.neighborId); }}>
+                    <a className="panel-edge-link" href="#" onClick={(e) => { e.preventDefault(); onEdgeClick?.(edge.neighborId); }}>
                       {name}
                     </a>
                     <span className="panel-edge-id">{edge.neighborId}</span>
@@ -225,7 +174,3 @@ export function SidePanel({ graphData, onEdgeClick }: SidePanelProps) {
     </div>
   );
 }
-
-// Export the static methods for imperative use
-export const openSidePanel = (node: any) => (SidePanel as any).__open?.(node);
-export const closeSidePanel = () => (SidePanel as any).__close?.();