agent-relay 1.6.0 → 2.0.0

package/packages/dashboard/ui/react-components/TrajectoryViewer.tsx

@@ -0,0 +1,698 @@
+/**
+ * TrajectoryViewer Component
+ *
+ * Displays an agent's action history as a refined timeline,
+ * with a distinctive futuristic aesthetic emphasizing clarity and flow.
+ * Uses Tailwind CSS with Mission Control theme.
+ */
+
+import React, { useState, useMemo, useEffect } from 'react';
+
+export interface TrajectoryStep {
+  id: string;
+  timestamp: string | number;
+  type: 'tool_call' | 'decision' | 'message' | 'state_change' | 'error' | 'phase_transition';
+  phase?: 'plan' | 'design' | 'execute' | 'review' | 'observe';
+  title: string;
+  description?: string;
+  metadata?: Record<string, unknown>;
+  duration?: number;
+  status?: 'pending' | 'running' | 'success' | 'error';
+}
+
+export interface TrajectoryHistoryEntry {
+  id: string;
+  title: string;
+  status: 'active' | 'completed' | 'abandoned';
+  startedAt: string;
+  completedAt?: string;
+  agents?: string[];
+  summary?: string;
+  confidence?: number;
+}
+
+export interface TrajectoryViewerProps {
+  agentName: string;
+  steps: TrajectoryStep[];
+  history?: TrajectoryHistoryEntry[];
+  selectedTrajectoryId?: string | null;
+  onSelectTrajectory?: (id: string | null) => void;
+  isLoading?: boolean;
+  onStepClick?: (step: TrajectoryStep) => void;
+  compact?: boolean;
+}
+
+export function TrajectoryViewer({
+  agentName,
+  steps,
+  history = [],
+  selectedTrajectoryId,
+  onSelectTrajectory,
+  isLoading = false,
+  onStepClick,
+  compact = false,
+}: TrajectoryViewerProps) {
+  const [expandedSteps, setExpandedSteps] = useState<Set<string>>(new Set());
+  const [filter, setFilter] = useState<TrajectoryStep['type'] | 'all'>('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  // Show history list when no trajectory is selected, allowing users to browse all trajectories
+  // When a trajectory is selected, show its steps instead
+  const isHistoryView = selectedTrajectoryId === null && history.length > 0;
+
+  useEffect(() => {
+    setFilter('all');
+  }, [selectedTrajectoryId]);
+
+  // Filter steps
+  const filteredSteps = useMemo(() => {
+    if (filter === 'all') return steps;
+    return steps.filter((s) => s.type === filter);
+  }, [steps, filter]);
+
+  const filteredHistory = useMemo(() => {
+    const query = searchQuery.trim().toLowerCase();
+    if (!query) return history;
+
+    return history.filter((entry) => {
+      const inTitle = entry.title?.toLowerCase().includes(query);
+      const inSummary = entry.summary?.toLowerCase().includes(query);
+      const inAgents = entry.agents?.some((agent) => agent.toLowerCase().includes(query));
+      const inStatus = entry.status?.toLowerCase().includes(query);
+      const inId = entry.id?.toLowerCase().includes(query);
+      return inTitle || inSummary || inAgents || inStatus || inId;
+    });
+  }, [history, searchQuery]);
+
+  // Toggle step expansion
+  const toggleStep = (stepId: string) => {
+    setExpandedSteps((prev) => {
+      const next = new Set(prev);
+      if (next.has(stepId)) {
+        next.delete(stepId);
+      } else {
+        next.add(stepId);
+      }
+      return next;
+    });
+  };
+
+  const typeFilters: { value: TrajectoryStep['type'] | 'all'; label: string; icon: React.ReactNode }[] = [
+    { value: 'all', label: 'All', icon: <FilterAllIcon /> },
+    { value: 'tool_call', label: 'Tools', icon: <ToolIcon /> },
+    { value: 'decision', label: 'Decisions', icon: <DecisionIcon /> },
+    { value: 'message', label: 'Messages', icon: <MessageIcon /> },
+    { value: 'state_change', label: 'State', icon: <StateIcon /> },
+    { value: 'phase_transition', label: 'Phases', icon: <PhaseIcon /> },
+    { value: 'error', label: 'Errors', icon: <ErrorIcon /> },
+  ];
+
+  // Calculate phase distribution for the mini progress bar
+  const phaseStats = useMemo(() => {
+    const phases = steps.filter(s => s.phase).reduce((acc, s) => {
+      if (s.phase) acc[s.phase] = (acc[s.phase] || 0) + 1;
+      return acc;
+    }, {} as Record<string, number>);
+    const total = Object.values(phases).reduce((a, b) => a + b, 0);
+    return { phases, total };
+  }, [steps]);
+
+  return (
+    <div className="h-full flex flex-col bg-gradient-to-b from-bg-card to-bg-tertiary rounded-xl border border-border/50 overflow-hidden shadow-lg backdrop-blur-sm">
+      {/* Header with gradient accent line */}
+      <div className="relative">
+        <div className="absolute top-0 left-0 right-0 h-[2px] bg-gradient-to-r from-blue-500 via-accent-cyan to-blue-500 opacity-60" />
+        
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border/30">
+          <div className="flex items-center gap-3">
+            {/* Back button when viewing a specific trajectory */}
+            {selectedTrajectoryId && onSelectTrajectory && (
+              <button
+                onClick={() => onSelectTrajectory(null)}
+                className="flex items-center gap-1.5 px-2 py-1.5 text-[11px] font-medium text-text-muted hover:text-accent-cyan bg-bg-elevated/50 hover:bg-bg-elevated rounded-lg border border-border/30 hover:border-accent-cyan/30 transition-all duration-200"
+                title="Back to trajectory list"
+              >
+                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <path d="M19 12H5M12 19l-7-7 7-7" strokeLinecap="round" strokeLinejoin="round" />
+                </svg>
+                <span>List</span>
+              </button>
+            )}
+            <div className="relative">
+              <div className="w-9 h-9 rounded-lg bg-gradient-to-br from-blue-500/20 to-accent-cyan/20 flex items-center justify-center border border-blue-500/30">
+                <TrajectoryHeaderIcon />
+              </div>
+              {steps.some(s => s.status === 'running') && (
+                <span className="absolute -top-1 -right-1 w-3 h-3 bg-accent-cyan rounded-full animate-pulse shadow-[0_0_8px_rgba(0,217,255,0.6)]" />
+              )}
+            </div>
+            <div className="flex flex-col">
+              <span className="font-semibold text-sm text-text-primary tracking-wide">Trajectory</span>
+              <div className="flex items-center gap-2">
+                <span className="text-[11px] text-text-muted font-mono">
+                  {steps.length} {steps.length === 1 ? 'step' : 'steps'}
+                </span>
+                {agentName && (
+                  <>
+                    <span className="text-text-dim">|</span>
+                    <span className="text-[11px] text-accent-cyan/80 font-medium truncate max-w-[120px]">{agentName}</span>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+          
+          {/* Mini phase progress indicator */}
+          {phaseStats.total > 0 && !compact && (
+            <div className="flex items-center gap-1.5">
+              {(['plan', 'design', 'execute', 'review', 'observe'] as const).map(phase => {
+                const count = phaseStats.phases[phase] || 0;
+                const color = getPhaseColor(phase);
+                return count > 0 ? (
+                  <div
+                    key={phase}
+                    className="h-1.5 rounded-full transition-all duration-300"
+                    style={{
+                      width: `${Math.max(8, (count / phaseStats.total) * 48)}px`,
+                      backgroundColor: color || 'var(--color-border)',
+                    }}
+                    title={`${phase}: ${count}`}
+                  />
+                ) : null;
+              })}
+            </div>
+          )}
+        </div>
+
+        {/* Filter tabs */}
+        {!compact && !isHistoryView && (
+          <div className="flex items-center gap-1 px-4 py-2 bg-bg-elevated/50 border-b border-border/20 overflow-x-auto scrollbar-thin">
+            {typeFilters.map((f) => (
+              <button
+                key={f.value}
+                className={`flex items-center gap-1.5 px-3 py-1.5 text-[11px] font-medium rounded-lg transition-all duration-200 whitespace-nowrap ${
+                  filter === f.value
+                    ? 'bg-blue-500/20 text-blue-500 border border-blue-500/30 shadow-[0_0_12px_rgba(59,130,246,0.15)]'
+                    : 'text-text-muted hover:text-text-secondary hover:bg-bg-hover/50'
+                }`}
+                onClick={() => setFilter(f.value)}
+              >
+                <span className="opacity-70">{f.icon}</span>
+                {f.label}
+              </button>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Timeline */}
+      <div className="flex-1 min-h-0 overflow-y-auto px-4 py-3 scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent">
+        {isLoading ? (
+          <div className="flex flex-col items-center justify-center gap-4 py-12 text-text-muted">
+            <div className="relative">
+              <Spinner />
+              <div className="absolute inset-0 bg-accent-cyan/10 rounded-full blur-xl" />
+            </div>
+            <span className="text-sm font-medium">Loading trajectory...</span>
+          </div>
+        ) : isHistoryView ? (
+          /* Show trajectory history list - allows browsing all trajectories */
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center justify-between gap-3 px-2">
+              <span className="text-xs font-medium text-text-secondary uppercase tracking-wider">All Trajectories</span>
+              <input
+                type="search"
+                value={searchQuery}
+                onChange={(event) => setSearchQuery(event.target.value)}
+                placeholder="Search trajectories..."
+                className="text-[11px] text-text-secondary bg-bg-elevated/60 border border-border/30 rounded-md px-2 py-1 w-40 focus:outline-none focus:border-accent-cyan/40"
+              />
+            </div>
+            <div className="flex flex-col gap-1">
+              {filteredHistory.map((entry) => (
+                <button
+                  key={entry.id}
+                  onClick={() => onSelectTrajectory?.(entry.id)}
+                  className={`w-full text-left px-3 py-2.5 rounded-lg transition-all duration-200 border ${
+                    entry.status === 'active'
+                      ? 'bg-blue-500/10 border-blue-500/30 hover:bg-blue-500/20'
+                      : 'bg-bg-tertiary/50 border-transparent hover:bg-bg-elevated/60 hover:border-border/40'
+                  }`}
+                >
+                  <div className="flex items-center justify-between gap-2">
+                    <span className="text-[13px] font-medium text-text-primary truncate flex-1">
+                      {entry.title}
+                    </span>
+                    <span className={`text-[10px] px-1.5 py-0.5 rounded font-medium flex-shrink-0 ${
+                      entry.status === 'completed'
+                        ? 'bg-green-500/15 text-green-500'
+                        : entry.status === 'active'
+                        ? 'bg-blue-500/15 text-blue-500'
+                        : 'bg-amber-500/15 text-amber-500'
+                    }`}>
+                      {entry.status}
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2 mt-1">
+                    <span className="text-[10px] text-text-dim">
+                      {formatRelativeTime(entry.startedAt)}
+                    </span>
+                    {entry.confidence && (
+                      <span className="text-[10px] text-text-dim">
+                        • {Math.round(entry.confidence * 100)}% confidence
+                      </span>
+                    )}
+                  </div>
+                  {entry.summary && (
+                    <p className="text-[11px] text-text-muted mt-1 line-clamp-2">
+                      {entry.summary}
+                    </p>
+                  )}
+                </button>
+              ))}
+              {filteredHistory.length === 0 && (
+                <div className="px-3 py-4 text-[11px] text-text-muted">
+                  No matching trajectories. Try a different search.
+                </div>
+              )}
+            </div>
+          </div>
+        ) : filteredSteps.length === 0 ? (
+          <div className="flex flex-col gap-4 py-4 text-text-muted">
+            {steps.length === 0 ? (
+              <div className="flex flex-col items-center justify-center gap-4 py-8">
+                <div className="w-16 h-16 rounded-2xl bg-bg-elevated/50 flex items-center justify-center border border-border/30">
+                  <EmptyIcon />
+                </div>
+                <div className="text-center">
+                  <p className="text-sm font-medium text-text-secondary">No steps recorded</p>
+                  <p className="text-xs text-text-dim mt-1">Steps will appear here as the agent works</p>
+                </div>
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center gap-4 py-8">
+                <div className="w-16 h-16 rounded-2xl bg-bg-elevated/50 flex items-center justify-center border border-border/30">
+                  <EmptyIcon />
+                </div>
+                <div className="text-center">
+                  <p className="text-sm font-medium text-text-secondary">No matching steps</p>
+                  <p className="text-xs text-text-dim mt-1">Try a different filter or select "All"</p>
+                </div>
+              </div>
+            )}
+          </div>
+        ) : (
+          <div className="flex flex-col gap-0.5">
+            {filteredSteps.map((step, index) => (
+              <TrajectoryStepItem
+                key={step.id}
+                step={step}
+                isExpanded={expandedSteps.has(step.id)}
+                isLast={index === filteredSteps.length - 1}
+                isFirst={index === 0}
+                compact={compact}
+                onToggle={() => toggleStep(step.id)}
+                onClick={onStepClick ? () => onStepClick(step) : undefined}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface TrajectoryStepItemProps {
+  step: TrajectoryStep;
+  isExpanded: boolean;
+  isLast: boolean;
+  isFirst?: boolean;
+  compact?: boolean;
+  onToggle: () => void;
+  onClick?: () => void;
+}
+
+function TrajectoryStepItem({
+  step,
+  isExpanded,
+  isLast,
+  isFirst = false,
+  compact = false,
+  onToggle,
+  onClick,
+}: TrajectoryStepItemProps) {
+  const timestamp = formatTimestamp(step.timestamp);
+  const icon = getStepIcon(step.type);
+  const statusColor = getStatusColor(step.status);
+  const phaseColor = getPhaseColor(step.phase);
+  const typeColor = getTypeColor(step.type);
+  const hasMetadata = step.metadata && Object.keys(step.metadata).length > 0;
+  const hasDetailContent = !!step.description || hasMetadata || !!onClick;
+
+  return (
+    <div className="flex gap-3 group">
+      {/* Timeline line and node */}
+      <div className="flex flex-col items-center w-7 relative">
+        {/* Connecting line above (if not first) */}
+        {!isFirst && (
+          <div 
+            className="absolute top-0 w-px h-2 transition-colors"
+            style={{ backgroundColor: phaseColor ? `${phaseColor}40` : 'var(--color-border)' }}
+          />
+        )}
+        
+        {/* Node */}
+        <div
+          className={`w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0 z-10 mt-2 transition-all duration-200 ${
+            step.status === 'running' 
+              ? 'animate-pulse shadow-[0_0_12px_rgba(0,217,255,0.4)]' 
+              : 'group-hover:scale-110'
+          }`}
+          style={{
+            background: statusColor 
+              ? `linear-gradient(135deg, ${statusColor}40, ${statusColor}20)`
+              : phaseColor 
+                ? `linear-gradient(135deg, ${phaseColor}30, ${phaseColor}10)`
+                : `linear-gradient(135deg, ${typeColor}30, ${typeColor}10)`,
+            borderWidth: '1px',
+            borderStyle: 'solid',
+            borderColor: statusColor || phaseColor || typeColor || 'var(--color-border)',
+            color: statusColor || phaseColor || typeColor || 'var(--color-text-secondary)',
+          }}
+        >
+          {icon}
+        </div>
+        
+        {/* Connecting line below (if not last) */}
+        {!isLast && (
+          <div 
+            className="w-px flex-1 mt-1 transition-colors"
+            style={{ 
+              background: `linear-gradient(to bottom, ${phaseColor || typeColor || 'var(--color-border)'}40, transparent)` 
+            }}
+          />
+        )}
+      </div>
+
+      {/* Content */}
+      <div className={`flex-1 min-w-0 pt-1 ${isLast ? 'pb-1' : 'pb-3'}`}>
+        <button
+          className={`w-full flex items-center justify-between gap-3 px-3 py-2.5 rounded-lg transition-all duration-200 text-left border ${
+            isExpanded 
+              ? 'bg-bg-elevated/80 border-border/60 shadow-sm' 
+              : 'bg-bg-tertiary/50 border-transparent hover:bg-bg-elevated/60 hover:border-border/40'
+          }`}
+          onClick={onToggle}
+        >
+          <div className="flex items-center gap-2 min-w-0 flex-1">
+            <span className="text-[13px] font-medium text-text-primary truncate">
+              {step.title}
+            </span>
+            <span 
+              className="text-[10px] px-1.5 py-0.5 rounded font-medium flex-shrink-0"
+              style={{
+                backgroundColor: `${typeColor}15`,
+                color: typeColor,
+              }}
+            >
+              {formatType(step.type)}
+            </span>
+            {step.phase && phaseColor && (
+              <span
+                className="text-[10px] px-1.5 py-0.5 rounded font-medium flex-shrink-0"
+                style={{
+                  backgroundColor: `${phaseColor}15`,
+                  color: phaseColor,
+                }}
+              >
+                {step.phase}
+              </span>
+            )}
+          </div>
+          <div className="flex items-center gap-2 flex-shrink-0">
+            {step.duration !== undefined && (
+              <span className="text-[10px] font-mono text-text-muted px-1.5 py-0.5 bg-bg-elevated/50 rounded">
+                {formatDuration(step.duration)}
+              </span>
+            )}
+            <span className="text-[10px] text-text-dim">{timestamp}</span>
+            {!compact && <ChevronIcon isExpanded={isExpanded} />}
+          </div>
+        </button>
+
+        {/* Expanded details */}
+        {isExpanded && !compact && hasDetailContent && (
+          <div className="mt-2 ml-1 pl-3 border-l-2 border-border/30">
+            {step.description && (
+              <p className="text-[13px] text-text-secondary mb-3 leading-relaxed">
+                {step.description}
+              </p>
+            )}
+            {hasMetadata && (
+              <div className="bg-bg-elevated/50 rounded-lg p-3 mb-3 overflow-x-auto border border-border/20">
+                <pre className="text-[11px] font-mono text-text-muted whitespace-pre-wrap break-words leading-relaxed">
+                  {JSON.stringify(step.metadata, null, 2)}
+                </pre>
+              </div>
+            )}
+            {onClick && (
+              <button
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-[11px] font-medium text-accent-cyan bg-accent-cyan/10 border border-accent-cyan/20 rounded-md hover:bg-accent-cyan/20 hover:border-accent-cyan/30 transition-colors"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onClick();
+                }}
+              >
+                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+                  <polyline points="15 3 21 3 21 9" />
+                  <line x1="10" y1="14" x2="21" y2="3" />
+                </svg>
+                View Details
+              </button>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// Helper functions
+function formatTimestamp(ts: string | number): string {
+  const date = new Date(ts);
+  return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit' });
+}
+
+function formatRelativeTime(dateStr: string): string {
+  const date = new Date(dateStr);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60000).toFixed(1)}m`;
+}
+
+function formatType(type: TrajectoryStep['type']): string {
+  const labels: Record<TrajectoryStep['type'], string> = {
+    tool_call: 'Tool',
+    decision: 'Decision',
+    message: 'Message',
+    state_change: 'State',
+    phase_transition: 'Phase',
+    error: 'Error',
+  };
+  return labels[type];
+}
+
+function getStatusColor(status?: TrajectoryStep['status']): string | null {
+  switch (status) {
+    case 'running':
+      return '#ff6b35'; // warning/orange
+    case 'success':
+      return '#00ffc8'; // success/green
+    case 'error':
+      return '#ff4757'; // error/red
+    default:
+      return null;
+  }
+}
+
+function getPhaseColor(phase?: TrajectoryStep['phase']): string | null {
+  switch (phase) {
+    case 'plan':
+      return '#3b82f6'; // blue
+    case 'design':
+      return '#00d9ff'; // cyan
+    case 'execute':
+      return '#ff6b35'; // orange
+    case 'review':
+      return '#00ffc8'; // green
+    case 'observe':
+      return '#fbbf24'; // yellow
+    default:
+      return null;
+  }
+}
+
+function getTypeColor(type: TrajectoryStep['type']): string {
+  switch (type) {
+    case 'tool_call':
+      return '#00d9ff'; // cyan
+    case 'decision':
+      return '#3b82f6'; // blue
+    case 'message':
+      return '#3b82f6'; // blue
+    case 'state_change':
+      return '#10b981'; // emerald
+    case 'phase_transition':
+      return '#f59e0b'; // amber
+    case 'error':
+      return '#ef4444'; // red
+    default:
+      return '#6b7280'; // gray
+  }
+}
+
+function getStepIcon(type: TrajectoryStep['type']): React.ReactNode {
+  switch (type) {
+    case 'tool_call':
+      return <ToolIcon />;
+    case 'decision':
+      return <DecisionIcon />;
+    case 'message':
+      return <MessageIcon />;
+    case 'state_change':
+      return <StateIcon />;
+    case 'phase_transition':
+      return <PhaseIcon />;
+    case 'error':
+      return <ErrorIcon />;
+    default:
+      return null;
+  }
+}
+
+// Icon components
+function TrajectoryHeaderIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-blue-500">
+      <path d="M3 12h4l3 9 4-18 3 9h4" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function FilterAllIcon() {
+  return (
+    <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+      <circle cx="12" cy="12" r="3" />
+      <path d="M12 2v4m0 12v4m-7.07-14.93l2.83 2.83m8.48 8.48l2.83 2.83M2 12h4m12 0h4M4.93 19.07l2.83-2.83m8.48-8.48l2.83-2.83" />
+    </svg>
+  );
+}
+
+function ToolIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
+    </svg>
+  );
+}
+
+function DecisionIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M12 2l2.4 7.4H22l-6 4.6 2.3 7-6.3-4.6L5.7 21l2.3-7-6-4.6h7.6z" />
+    </svg>
+  );
+}
+
+function MessageIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+    </svg>
+  );
+}
+
+function StateIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+      <path d="M9 12h6m-3-3v6" />
+    </svg>
+  );
+}
+
+function PhaseIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10" />
+      <path d="M12 6v6l4 2" />
+    </svg>
+  );
+}
+
+function ErrorIcon() {
+  return (
+    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="12" y1="8" x2="12" y2="12" />
+      <circle cx="12" cy="16" r="0.5" fill="currentColor" />
+    </svg>
+  );
+}
+
+function ChevronIcon({ isExpanded }: { isExpanded: boolean }) {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      className={`text-text-muted transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
+    >
+      <polyline points="6 9 12 15 18 9" />
+    </svg>
+  );
+}
+
+function EmptyIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="text-text-dim">
+      <circle cx="12" cy="12" r="10" />
+      <line x1="8" y1="12" x2="16" y2="12" />
+    </svg>
+  );
+}
+
+function Spinner() {
+  return (
+    <svg className="animate-spin" width="20" height="20" viewBox="0 0 24 24">
+      <circle
+        cx="12"
+        cy="12"
+        r="10"
+        stroke="currentColor"
+        strokeWidth="2"
+        fill="none"
+        strokeDasharray="32"
+        strokeLinecap="round"
+        className="text-accent"
+      />
+    </svg>
+  );
+}