@assistkick/create 1.6.0 → 1.8.0

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

@@ -0,0 +1,634 @@
+import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import {
+  ReactFlow,
+  MiniMap,
+  Background,
+  BackgroundVariant,
+  ReactFlowProvider,
+  type Node,
+  type Edge,
+  type NodeTypes,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import {
+  X, Clock, AlertTriangle, CheckCircle2, CircleDot,
+  FileText, Pencil, Terminal, Search, FolderOpen, Bot,
+  MessageSquare, ChevronDown, ChevronRight, SkipForward, RotateCcw,
+} from 'lucide-react';
+import { apiClient, type WorkflowMonitorData, type NodeExecutionData, type ToolCallEntry } from '../../api/client';
+import {
+  MonitorStartNode,
+  MonitorEndNode,
+  MonitorTransitionCardNode,
+  MonitorRunAgentNode,
+  MonitorCheckCardPositionNode,
+  MonitorCheckCycleCountNode,
+  MonitorSetCardMetadataNode,
+  MonitorGroupNode,
+} from './monitor_nodes';
+import { colorizeEdges } from './edgeColors';
+
+/* ── Types ── */
+
+interface WorkflowMonitorModalProps {
+  featureId: string;
+  featureName: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+/* ── Tool icons ── */
+
+const TOOL_ICONS: Record<string, React.ReactNode> = {
+  Read: <FileText size={12} className="text-blue-400" />,
+  Write: <Pencil size={12} className="text-emerald-400" />,
+  Edit: <Pencil size={12} className="text-amber-400" />,
+  Bash: <Terminal size={12} className="text-purple-400" />,
+  Grep: <Search size={12} className="text-cyan-400" />,
+  Glob: <FolderOpen size={12} className="text-orange-400" />,
+  __assistant__: <MessageSquare size={12} className="text-sky-400" />,
+};
+
+const CHAR_LIMIT = 200;
+
+/* ── Expandable activity row ── */
+
+function ActivityRow({ tc, isFirst }: { tc: ToolCallEntry; isFirst: boolean }) {
+  const [expanded, setExpanded] = useState(false);
+  const isAssistant = tc.toolName === '__assistant__';
+  const content = tc.target || '\u2014';
+  const isLong = content.length > CHAR_LIMIT;
+
+  return (
+    <div className={`px-4 py-2.5 ${!isFirst ? 'border-t border-edge' : ''}`}>
+      <div className="flex items-start gap-3">
+        <span className="shrink-0 mt-0.5">
+          {TOOL_ICONS[tc.toolName] || <Terminal size={12} className="text-content-muted" />}
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center gap-2">
+            <span className="text-[11px] font-mono font-semibold text-content">
+              {isAssistant ? 'Assistant' : tc.toolName}
+            </span>
+            <span className="text-[10px] font-mono text-content-muted">{formatTimeShort(tc.timestamp)}</span>
+          </div>
+          {isLong ? (
+            <div>
+              <button
+                onClick={() => setExpanded(!expanded)}
+                className="flex items-center gap-1 text-[10px] text-content-muted hover:text-content cursor-pointer mt-0.5"
+              >
+                {expanded ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
+                <span>{expanded ? 'Collapse' : 'Expand'}</span>
+              </button>
+              {expanded ? (
+                <div className="text-[11px] font-mono text-content-secondary whitespace-pre-wrap break-words mt-1">
+                  {content}
+                </div>
+              ) : (
+                <div className="text-[11px] font-mono text-content-secondary break-words mt-1">
+                  {content.slice(0, CHAR_LIMIT)}...
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="text-[11px] font-mono text-content-secondary whitespace-pre-wrap break-words">
+              {content}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/* ── Monitor Node Types map ── */
+
+const MONITOR_NODE_TYPES: NodeTypes = {
+  start: MonitorStartNode,
+  end: MonitorEndNode,
+  transitionCard: MonitorTransitionCardNode,
+  runAgent: MonitorRunAgentNode,
+  checkCardPosition: MonitorCheckCardPositionNode,
+  checkCycleCount: MonitorCheckCycleCountNode,
+  setCardMetadata: MonitorSetCardMetadataNode,
+  group: MonitorGroupNode,
+};
+
+function getNodeTypeLabel(type: string): string {
+  switch (type) {
+    case 'start': return 'Start';
+    case 'end': return 'End';
+    case 'transitionCard': return 'Transition Card';
+    case 'runAgent': return 'Run Agent';
+    case 'checkCardPosition': return 'Check Position';
+    case 'checkCycleCount': return 'Check Cycles';
+    case 'setCardMetadata': return 'Set Metadata';
+    case 'group': return 'Group';
+    default: return type;
+  }
+}
+
+function getNodeLabel(type: string, data: Record<string, unknown>): string {
+  switch (type) {
+    case 'runAgent': return (data.agentName as string) || (data.agentId as string) || '';
+    case 'transitionCard': return `${data.fromColumn || '?'} \u2192 ${data.toColumn || '?'}`;
+    case 'checkCycleCount': return `max: ${data.maxCycles || '?'}`;
+    case 'setCardMetadata': return `${data.key || '?'} = ${data.value || '?'}`;
+    case 'end': return (data.outcome as string) || (data.statusType as string) || '';
+    case 'group': return (data.groupName as string) || '';
+    default: return '';
+  }
+}
+
+function getNodeIcon(type: string, status: string): React.ReactNode {
+  if (status === 'running') return <CircleDot size={14} className="text-accent animate-pulse" />;
+  if (status === 'completed') return <CheckCircle2 size={14} className="text-emerald-400" />;
+  if (status === 'failed') return <AlertTriangle size={14} className="text-error" />;
+  switch (type) {
+    case 'runAgent': return <Bot size={14} className="text-purple-400" />;
+    default: return <Clock size={14} className="text-content-muted" />;
+  }
+}
+
+function formatContextWindow(value: number): string {
+  const pct = Math.round((value / 200_000) * 100);
+  return `${pct}%`;
+}
+
+/* ── Status badge ── */
+
+function StatusBadge({ status }: { status: string }) {
+  const cls = status === 'completed' ? 'bg-emerald-500/15 text-emerald-400'
+    : status === 'failed' ? 'bg-error/15 text-error'
+    : status === 'running' ? 'bg-accent/15 text-accent animate-pulse'
+    : 'bg-white/[0.06] text-content-muted';
+  return (
+    <span className={`rounded-full px-2.5 py-0.5 text-[10px] font-bold uppercase tracking-wider ${cls}`}>
+      {status}
+    </span>
+  );
+}
+
+/* ── Section label (matches DS pattern) ── */
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <h4 className="mb-3 text-[11px] font-bold uppercase tracking-widest text-content-muted">
+      {children}
+    </h4>
+  );
+}
+
+/* ── Side Panel ── */
+
+function NodeDetailPanel({
+  nodeId,
+  nodeType,
+  nodeData,
+  execution,
+  isCurrentNode,
+  featureId,
+  onClose,
+  onAction,
+}: {
+  nodeId: string;
+  nodeType: string;
+  nodeData: Record<string, unknown>;
+  execution: NodeExecutionData | null;
+  isCurrentNode: boolean;
+  featureId: string;
+  onClose: () => void;
+  onAction: () => void;
+}) {
+  const toolCallsRef = useRef<HTMLDivElement>(null);
+  const [actionLoading, setActionLoading] = useState<string | null>(null);
+  const statusLabel = execution?.status || 'pending';
+  const isAgent = nodeType === 'runAgent';
+  const outputData = execution?.outputData;
+  const showActions = isCurrentNode && (statusLabel === 'running' || statusLabel === 'failed');
+
+  const handleForceNext = async () => {
+    setActionLoading('force-next');
+    try {
+      await apiClient.forceNextNode(featureId, nodeId);
+      onAction();
+    } catch { /* error is non-critical — polling will pick up the state */ }
+    setActionLoading(null);
+  };
+
+  const handleRestart = async () => {
+    setActionLoading('restart');
+    try {
+      await apiClient.restartNode(featureId, nodeId);
+      onAction();
+    } catch { /* error is non-critical — polling will pick up the state */ }
+    setActionLoading(null);
+  };
+
+  return (
+    <div className="w-1/2 shrink-0 border-l border-edge bg-surface flex flex-col overflow-hidden">
+      {/* Header */}
+      <div className="flex items-center justify-between px-6 py-4 border-b border-edge bg-surface-alt">
+        <div className="flex items-center gap-3 min-w-0">
+          {getNodeIcon(nodeType, statusLabel)}
+          <span className="text-[13px] font-bold uppercase tracking-widest text-content">
+            {getNodeTypeLabel(nodeType)}
+          </span>
+          <StatusBadge status={statusLabel} />
+          {showActions && (
+            <div className="flex items-center gap-1.5 ml-2">
+              <button
+                onClick={handleRestart}
+                disabled={actionLoading !== null}
+                className="flex items-center gap-1 bg-transparent border border-edge text-content rounded px-2 py-1 text-[11px] cursor-pointer font-mono hover:bg-white/[0.08] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                title="Restart this node"
+              >
+                <RotateCcw size={11} />
+                {actionLoading === 'restart' ? 'Restarting...' : 'Restart'}
+              </button>
+              <button
+                onClick={handleForceNext}
+                disabled={actionLoading !== null}
+                className="flex items-center gap-1 bg-transparent border border-accent/40 text-accent rounded px-2 py-1 text-[11px] cursor-pointer font-mono hover:bg-accent/10 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                title="Skip to next node"
+              >
+                <SkipForward size={11} />
+                {actionLoading === 'force-next' ? 'Skipping...' : 'Force Next'}
+              </button>
+            </div>
+          )}
+        </div>
+        <button
+          onClick={onClose}
+          className="shrink-0 p-1.5 rounded-lg border border-edge text-content-muted hover:border-content/20 hover:text-content cursor-pointer outline-none transition-colors"
+        >
+          <X size={16} />
+        </button>
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto px-6 py-5 space-y-5">
+        {/* Timing */}
+        <div>
+          <SectionLabel>Timing</SectionLabel>
+          <div className="flex gap-4 text-[12px]">
+            {execution?.startedAt && (
+              <div className="rounded-2xl border border-edge px-4 py-2.5">
+                <div className="text-[10px] text-content-muted uppercase">Started</div>
+                <div className="text-content font-mono font-semibold">{formatTime(execution.startedAt)}</div>
+              </div>
+            )}
+            {execution?.completedAt && (
+              <div className="rounded-2xl border border-edge px-4 py-2.5">
+                <div className="text-[10px] text-content-muted uppercase">Duration</div>
+                <div className="text-content font-mono font-semibold">
+                  {formatDuration(execution.startedAt, execution.completedAt)}
+                </div>
+              </div>
+            )}
+            {execution?.startedAt && !execution?.completedAt && statusLabel === 'running' && (
+              <div className="rounded-2xl border border-accent/30 px-4 py-2.5">
+                <div className="text-[10px] text-accent uppercase">Elapsed</div>
+                <div className="text-accent font-mono font-semibold animate-pulse">
+                  {formatDuration(execution.startedAt, new Date().toISOString())}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Error */}
+        {execution?.error && (
+          <div>
+            <SectionLabel>Error</SectionLabel>
+            <div className="rounded-2xl bg-error/10 border border-error/20 p-4 text-[12px] text-error font-mono leading-relaxed break-all">
+              {execution.error}
+            </div>
+          </div>
+        )}
+
+        {/* Agent metrics */}
+        {isAgent && outputData && execution?.status === 'completed' && (
+          <div>
+            <SectionLabel>Agent Metrics</SectionLabel>
+            <div className="grid grid-cols-2 gap-2">
+              {outputData.costUsd != null && (
+                <MetricPill label="Cost" value={`$${outputData.costUsd.toFixed(4)}`} />
+              )}
+              {outputData.numTurns != null && (
+                <MetricPill label="Turns" value={`${outputData.numTurns}`} />
+              )}
+              {outputData.model && (
+                <MetricPill label="Model" value={outputData.model.replace(/^claude-/, '')} />
+              )}
+              {outputData.contextWindowPct != null && (
+                <MetricPill label="Context" value={formatContextWindow(outputData.contextWindowPct)} />
+              )}
+              {outputData.stopReason && (
+                <MetricPill label="Stop" value={outputData.stopReason} />
+              )}
+              {outputData.toolCalls?.total != null && (
+                <MetricPill label="Tool Calls" value={`${outputData.toolCalls.total}`} />
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Activity log (tool calls + assistant messages) */}
+        {isAgent && execution?.toolCalls && execution.toolCalls.length > 0 && (
+          <div>
+            <SectionLabel>Activity Log ({execution.toolCalls.length})</SectionLabel>
+            <div
+              ref={toolCallsRef}
+              className="max-h-[400px] overflow-y-auto rounded-2xl border border-edge bg-surface-alt"
+            >
+              {execution.toolCalls.map((tc: ToolCallEntry, i: number) => (
+                <ActivityRow key={tc.id} tc={tc} isFirst={i === 0} />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Agent label for non-completed agents */}
+        {isAgent && statusLabel === 'running' && (!execution?.toolCalls || execution.toolCalls.length === 0) && (
+          <div className="text-[12px] text-content-muted italic">
+            Agent is starting up... tool calls will appear here as they happen.
+          </div>
+        )}
+
+        {/* Agent output */}
+        {isAgent && outputData?.output && (
+          <div>
+            <SectionLabel>Agent Output</SectionLabel>
+            <div className="max-h-[300px] overflow-y-auto rounded-2xl border border-edge bg-surface-alt p-4 text-[12px] font-mono text-content-secondary leading-relaxed whitespace-pre-wrap break-words">
+              {outputData.output}
+            </div>
+          </div>
+        )}
+
+        {/* Node info for non-agent nodes */}
+        {!isAgent && (
+          <div>
+            <SectionLabel>Node Info</SectionLabel>
+            <div className="rounded-2xl border border-edge bg-surface-alt px-4 py-3 text-[12px] text-content">
+              {getNodeLabel(nodeType, nodeData) || 'No additional details'}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function MetricPill({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-2xl border border-edge px-4 py-2.5 text-center">
+      <div className="text-[10px] text-content-muted uppercase tracking-wider">{label}</div>
+      <div className="text-[12px] font-mono font-semibold text-content truncate">{value}</div>
+    </div>
+  );
+}
+
+/* ── Time helpers ── */
+
+function formatTime(iso: string): string {
+  return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function formatTimeShort(iso: string): string {
+  return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function formatDuration(start: string | null, end: string): string {
+  if (!start) return '\u2014';
+  const ms = new Date(end).getTime() - new Date(start).getTime();
+  if (ms < 1000) return `${ms}ms`;
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  const rs = s % 60;
+  if (m < 60) return `${m}m ${rs}s`;
+  const h = Math.floor(m / 60);
+  const rm = m % 60;
+  return `${h}h ${rm}m`;
+}
+
+/* ── Main Graph View ── */
+
+function MonitorGraphView({
+  monitorData,
+  onNodeClick,
+}: {
+  monitorData: WorkflowMonitorData;
+  onNodeClick: (nodeId: string) => void;
+}) {
+  const nodeTypes = useMemo(() => MONITOR_NODE_TYPES, []);
+
+  // Convert graph data to React Flow nodes/edges with execution state
+  const nodes: Node[] = useMemo(() =>
+    monitorData.graphData.nodes.map(n => {
+      const exec = monitorData.nodeExecutions[n.id];
+      const isCurrent = n.id === monitorData.currentNodeId && monitorData.status === 'running';
+      const status = exec?.status || (isCurrent ? 'running' : 'pending');
+      return {
+        ...n,
+        data: {
+          ...n.data,
+          _execStatus: status,
+          _error: exec?.error || null,
+          _onNodeClick: onNodeClick,
+        },
+      };
+    }),
+    [monitorData.graphData.nodes, monitorData.nodeExecutions, monitorData.currentNodeId, monitorData.status, onNodeClick],
+  );
+
+  const edges: Edge[] = useMemo(
+    () => colorizeEdges(monitorData.graphData.edges.map(e => ({
+      ...e,
+      type: 'smoothstep',
+      animated: monitorData.status === 'running',
+    }))),
+    [monitorData.graphData.edges, monitorData.status],
+  );
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      nodeTypes={nodeTypes}
+      fitView
+      nodesDraggable={false}
+      nodesConnectable={false}
+      elementsSelectable
+      onNodeClick={(_, node) => onNodeClick(node.id)}
+      panOnDrag
+      zoomOnScroll
+      defaultEdgeOptions={{ type: 'smoothstep', animated: true }}
+      className="workflow-monitor-canvas"
+    >
+      <Background variant={BackgroundVariant.Dots} gap={16} size={1} color="var(--border-color)" />
+      <MiniMap
+        nodeStrokeColor="var(--accent)"
+        nodeColor="var(--bg-tertiary)"
+        maskColor="rgba(0,0,0,0.3)"
+        className="!bg-surface !border !border-edge !rounded-2xl"
+      />
+    </ReactFlow>
+  );
+}
+
+/* ── Modal ── */
+
+export function WorkflowMonitorModal({ featureId, featureName, isOpen, onClose }: WorkflowMonitorModalProps) {
+  const [monitorData, setMonitorData] = useState<WorkflowMonitorData | null>(null);
+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const pollerRef = useRef<ReturnType<typeof setInterval> | null>(null);
+
+  const fetchMonitor = useCallback(async () => {
+    try {
+      const { monitor } = await apiClient.getWorkflowMonitor(featureId);
+      setMonitorData(monitor);
+      setLoading(false);
+      return monitor;
+    } catch {
+      setLoading(false);
+      return null;
+    }
+  }, [featureId]);
+
+  // Initial fetch + polling
+  useEffect(() => {
+    if (!isOpen) return;
+
+    setLoading(true);
+    setSelectedNodeId(null);
+    fetchMonitor();
+
+    pollerRef.current = setInterval(async () => {
+      const data = await fetchMonitor();
+      // Stop polling when execution is done
+      if (data && ['completed', 'failed', 'idle'].includes(data.status)) {
+        if (pollerRef.current) {
+          clearInterval(pollerRef.current);
+          pollerRef.current = null;
+        }
+      }
+    }, 5000);
+
+    return () => {
+      if (pollerRef.current) {
+        clearInterval(pollerRef.current);
+        pollerRef.current = null;
+      }
+    };
+  }, [isOpen, fetchMonitor]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    document.addEventListener('keydown', handleKey);
+    return () => document.removeEventListener('keydown', handleKey);
+  }, [isOpen, onClose]);
+
+  // Restart polling after an action (force-next/restart) re-activates the workflow
+  const ensurePolling = useCallback(() => {
+    fetchMonitor();
+    if (!pollerRef.current) {
+      pollerRef.current = setInterval(async () => {
+        const data = await fetchMonitor();
+        if (data && ['completed', 'failed', 'idle'].includes(data.status)) {
+          if (pollerRef.current) {
+            clearInterval(pollerRef.current);
+            pollerRef.current = null;
+          }
+        }
+      }, 5000);
+    }
+  }, [fetchMonitor]);
+
+  const handleNodeClick = useCallback((nodeId: string) => {
+    setSelectedNodeId(prev => prev === nodeId ? null : nodeId);
+  }, []);
+
+  if (!isOpen) return null;
+
+  const selectedNode = monitorData?.graphData.nodes.find(n => n.id === selectedNodeId);
+  const selectedExec = selectedNodeId ? monitorData?.nodeExecutions[selectedNodeId] || null : null;
+
+  return (
+    <div className="fixed inset-0 z-[300]">
+      {/* Modal — full screen */}
+      <div className="flex flex-col w-screen h-screen bg-surface text-content">
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 py-4 border-b border-edge bg-surface-alt">
+          <div className="flex items-center gap-3 min-w-0">
+            <span className="text-[14px] font-bold uppercase tracking-widest text-content">
+              Workflow Monitor
+            </span>
+            <span className="text-[12px] font-mono text-accent">{featureId}</span>
+            <span className="text-[12px] text-content-muted truncate">{featureName}</span>
+            {monitorData && <StatusBadge status={monitorData.status} />}
+          </div>
+          <button
+            onClick={onClose}
+            className="shrink-0 p-1.5 rounded-lg border border-edge text-content-muted hover:border-content/20 hover:text-content cursor-pointer outline-none transition-colors"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        {/* Body */}
+        <div className="flex flex-1 overflow-hidden">
+          {loading && !monitorData && (
+            <div className="flex-1 flex items-center justify-center text-[13px] text-content-muted">
+              Loading execution data...
+            </div>
+          )}
+
+          {!loading && !monitorData && (
+            <div className="flex-1 flex items-center justify-center text-[13px] text-content-muted">
+              No workflow execution found for this feature.
+            </div>
+          )}
+
+          {monitorData && (
+            <>
+              {/* Graph */}
+              <div className="flex-1 relative">
+                <ReactFlowProvider>
+                  <MonitorGraphView monitorData={monitorData} onNodeClick={handleNodeClick} />
+                </ReactFlowProvider>
+                {/* Hint overlay when no node selected */}
+                {!selectedNodeId && (
+                  <div className="absolute bottom-4 left-1/2 -translate-x-1/2 px-4 py-2 rounded-2xl bg-surface-alt/90 border border-edge text-[11px] text-content-muted backdrop-blur-sm pointer-events-none">
+                    Click a node to view execution details and tool usage
+                  </div>
+                )}
+              </div>
+
+              {/* Side panel */}
+              {selectedNode && (
+                <NodeDetailPanel
+                  nodeId={selectedNodeId!}
+                  nodeType={selectedNode.type}
+                  nodeData={selectedNode.data}
+                  execution={selectedExec}
+                  isCurrentNode={selectedNodeId === monitorData.currentNodeId}
+                  featureId={featureId}
+                  onClose={() => setSelectedNodeId(null)}
+                  onAction={ensurePolling}
+                />
+              )}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}