@assistkick/create 1.7.0 → 1.8.0

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

@@ -1,8 +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 {
@@ -17,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[];
@@ -25,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());
@@ -94,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);
       }
@@ -111,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 || [],
@@ -139,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();
@@ -167,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) => {
@@ -237,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');
     }
   };
 
@@ -277,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;
@@ -285,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 {
@@ -302,6 +325,7 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
         }
         setPlayAllRunning(false);
         setPlayAllCurrentFeature(null);
+        setPlayAllEpicId(null);
       }
     }, 5000);
   }, [fetchKanban]);
@@ -311,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();
       }
@@ -325,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();
@@ -352,7 +377,6 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
     <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 isDragOver = dragOverColumn === col.id;
 
         return (
@@ -376,7 +400,7 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
                   <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}
+                    onClick={() => startPlayAll()}
                   >
                     {'\u25B6\u25B6'}
                   </button>
@@ -396,48 +420,12 @@ 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 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);
-
-                // 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;
-                }
+                  && workflowStatusValue === 'failed';
 
                 const issueLabel = card.notes.length > 0
                   ? `${card.notes.length} issue${card.notes.length !== 1 ? 's' : ''} reported`
@@ -446,35 +434,69 @@ export function KanbanView({ graphData, projectId, onCardClick, onIssuesClick }:
                     : 'No issues';
 
                 return (
-                  <KanbanCard
-                    key={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}
-                  />
+                  <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="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>
+                              )}
+                            </button>
+                          ))}
+                        </div>
+                      );
+                    })()}
+                  </div>
                 );
               })}
             </div>
@@ -482,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>
   );
 }

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

@@ -54,12 +54,12 @@ export function LoginPage({ onLoginSuccess }: LoginPageProps) {
   }, [email, password, onLoginSuccess]);
 
   return (
-    <div className="login-page">
-      <div className="login-card">
-        <div className="login-header">
-          <span className="login-title">login</span>
+    <div className="flex items-center justify-center w-full h-screen bg-surface">
+      <div className="w-[360px] p-8 bg-surface-alt border border-edge rounded">
+        <div className="flex items-center justify-between mb-6">
+          <span className="font-mono text-base text-content tracking-wide">login</span>
           <button
-            className="login-theme-toggle"
+            className="bg-transparent border border-edge rounded w-7 h-7 text-content-secondary text-sm cursor-pointer flex items-center justify-center transition-[border-color,color] duration-150 hover:border-content hover:text-content"
             onClick={toggleTheme}
             title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
           >
@@ -67,11 +67,11 @@ export function LoginPage({ onLoginSuccess }: LoginPageProps) {
           </button>
         </div>
 
-        <form className="login-form" onSubmit={handleSubmit}>
-          <label className="login-label" htmlFor="login-email">email</label>
+        <form className="flex flex-col gap-2" onSubmit={handleSubmit}>
+          <label className="font-mono text-[11px] text-content-secondary mt-1" htmlFor="login-email">email</label>
           <input
             id="login-email"
-            className="login-input"
+            className="bg-surface-raised border border-edge rounded text-content font-mono text-[13px] py-2 px-2.5 outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted disabled:opacity-60"
             type="email"
             value={email}
             onChange={e => setEmail(e.target.value)}
@@ -81,10 +81,10 @@ export function LoginPage({ onLoginSuccess }: LoginPageProps) {
             disabled={submitting}
           />
 
-          <label className="login-label" htmlFor="login-password">password</label>
+          <label className="font-mono text-[11px] text-content-secondary mt-1" htmlFor="login-password">password</label>
           <input
             id="login-password"
-            className="login-input"
+            className="bg-surface-raised border border-edge rounded text-content font-mono text-[13px] py-2 px-2.5 outline-none transition-[border-color] duration-150 focus:border-accent placeholder:text-content-muted disabled:opacity-60"
             type="password"
             value={password}
             onChange={e => setPassword(e.target.value)}
@@ -93,10 +93,10 @@ export function LoginPage({ onLoginSuccess }: LoginPageProps) {
             disabled={submitting}
           />
 
-          {error && <div className="login-error">{error}</div>}
+          {error && <div className="font-mono text-[11px] text-error mt-1">{error}</div>}
 
           <button
-            className="login-submit"
+            className="mt-3 bg-transparent border border-accent rounded text-accent font-mono text-[13px] py-2 px-3.5 cursor-pointer transition-[background,color] duration-150 hover:enabled:bg-accent hover:enabled:text-white disabled:opacity-50 disabled:cursor-not-allowed"
             type="submit"
             disabled={submitting}
           >
@@ -104,10 +104,10 @@ export function LoginPage({ onLoginSuccess }: LoginPageProps) {
           </button>
         </form>
 
-        <p className="login-register-link">
+        <p className="font-mono text-xs text-content-secondary mt-4 text-center">
           <Link to="/forgot-password">Forgot password?</Link>
         </p>
-        <p className="login-register-link">
+        <p className="font-mono text-xs text-content-secondary mt-2 text-center">
           No account yet? <Link to="/register">Register</Link>
         </p>
       </div>