@lucapimenta/copy-chief-dashboard 1.0.0

package/dashboard/src/components/squad/ExpertDetail.tsx

@@ -0,0 +1,120 @@
+'use client';
+
+import useSWR from 'swr';
+import { apiFetch, cn } from '@/lib/utils';
+import { Badge } from '@/components/ui/badge';
+
+interface ExpertProfile {
+  id: string;
+  name: string;
+  tier: string;
+  specialties: string[];
+  style: string;
+  avg_quality: number;
+  reviews_count: number;
+  voice_dna?: string;
+  anti_patterns?: string[];
+  checklists?: string[];
+  signature_moves?: string[];
+}
+
+interface ExpertDetailProps {
+  expertId: string;
+  onClose: () => void;
+}
+
+export function ExpertDetail({ expertId, onClose }: ExpertDetailProps) {
+  const { data: expert, isLoading } = useSWR<ExpertProfile>(
+    `/squad/${expertId}`,
+    apiFetch
+  );
+
+  if (isLoading) {
+    return (
+      <div className="border border-[var(--hud-border)] rounded p-4 bg-[var(--hud-bg)] animate-pulse">
+        <p className="text-xs font-mono text-[var(--hud-text-dim)]">Loading expert profile...</p>
+      </div>
+    );
+  }
+
+  if (!expert) return null;
+
+  return (
+    <div className="border border-[var(--hud-accent)]/30 rounded p-4 bg-[var(--hud-bg)] space-y-3">
+      <div className="flex items-center justify-between">
+        <h3 className="text-sm font-mono text-[var(--hud-text)] font-bold">{expert.name}</h3>
+        <button
+          onClick={onClose}
+          className="text-[10px] font-mono text-[var(--hud-text-dim)] hover:text-[var(--hud-text)]"
+        >
+          [close]
+        </button>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Badge variant={expert.tier === '**' ? 'passed' : expert.tier === '*' ? 'active' : 'info'}>
+          Tier {expert.tier}
+        </Badge>
+        {expert.style && (
+          <span className="text-[10px] font-mono text-[var(--hud-text-dim)]">{expert.style}</span>
+        )}
+      </div>
+
+      {/* All Specialties */}
+      <div>
+        <p className="text-[10px] font-mono text-[var(--hud-text-dim)] uppercase tracking-wider mb-1">Specialties</p>
+        <div className="flex flex-wrap gap-1">
+          {expert.specialties.map((s) => (
+            <Badge key={s} variant="default">{s}</Badge>
+          ))}
+        </div>
+      </div>
+
+      {/* Signature Moves */}
+      {expert.signature_moves && expert.signature_moves.length > 0 && (
+        <div>
+          <p className="text-[10px] font-mono text-[var(--hud-text-dim)] uppercase tracking-wider mb-1">Signature Moves</p>
+          <ul className="space-y-0.5">
+            {expert.signature_moves.map((m, i) => (
+              <li key={i} className="text-[10px] font-mono text-emerald-400">+ {m}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Anti-Patterns */}
+      {expert.anti_patterns && expert.anti_patterns.length > 0 && (
+        <div>
+          <p className="text-[10px] font-mono text-[var(--hud-text-dim)] uppercase tracking-wider mb-1">Anti-Patterns</p>
+          <ul className="space-y-0.5">
+            {expert.anti_patterns.slice(0, 8).map((a, i) => (
+              <li key={i} className="text-[10px] font-mono text-red-400">- {a}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Checklists */}
+      {expert.checklists && expert.checklists.length > 0 && (
+        <div>
+          <p className="text-[10px] font-mono text-[var(--hud-text-dim)] uppercase tracking-wider mb-1">Checklists</p>
+          <div className="flex flex-wrap gap-1">
+            {expert.checklists.map((c) => (
+              <Badge key={c} variant="info">{c}</Badge>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Voice DNA excerpt */}
+      {expert.voice_dna && (
+        <div>
+          <p className="text-[10px] font-mono text-[var(--hud-text-dim)] uppercase tracking-wider mb-1">Voice DNA</p>
+          <pre className="text-[10px] font-mono text-[var(--hud-text)] whitespace-pre-wrap bg-black/30 rounded p-2 max-h-40 overflow-auto">
+            {expert.voice_dna}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}

package/dashboard/src/components/squad/SquadGrid.tsx

@@ -0,0 +1,40 @@
+import { ExpertCard } from './ExpertCard';
+
+interface Expert {
+  id: string;
+  name: string;
+  tier: string;
+  specialties: string[];
+  style: string;
+  avg_quality: number;
+  reviews_count: number;
+}
+
+interface SquadGridProps {
+  experts: Expert[];
+  onExpertClick?: (id: string) => void;
+  selectedExpert?: string | null;
+}
+
+export function SquadGrid({ experts, onExpertClick, selectedExpert }: SquadGridProps) {
+  if (experts.length === 0) {
+    return (
+      <p className="text-sm font-mono text-[var(--hud-text-dim)] text-center py-8">
+        No experts match filter
+      </p>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
+      {experts.map((expert) => (
+        <ExpertCard
+          key={expert.id}
+          expert={expert}
+          onClick={onExpertClick ? () => onExpertClick(expert.id) : undefined}
+          isSelected={selectedExpert === expert.id}
+        />
+      ))}
+    </div>
+  );
+}

package/dashboard/src/components/terminals/TerminalGrid.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { TerminalPanel } from './TerminalPanel';
+import type { TerminalLine } from '@/stores/terminal-store';
+
+interface TerminalGridProps {
+  sessions: Map<string, TerminalLine[]>;
+  activeSession: string | null;
+  viewMode: 'grid' | 'single';
+  onExpand: (sessionId: string | null) => void;
+}
+
+export function TerminalGrid({ sessions, activeSession, viewMode, onExpand }: TerminalGridProps) {
+  const entries = Array.from(sessions.entries())
+    .sort(([, a], [, b]) => {
+      const lastA = a.length > 0 ? a[a.length - 1].timestamp : 0;
+      const lastB = b.length > 0 ? b[b.length - 1].timestamp : 0;
+      return lastB - lastA;
+    });
+
+  if (entries.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center py-16 text-[var(--hud-text-dim)]">
+        <p className="text-sm font-mono mb-2">No terminal sessions</p>
+        <p className="text-xs opacity-50">Terminal output will appear as agents execute tools</p>
+      </div>
+    );
+  }
+
+  if (viewMode === 'single' && activeSession) {
+    const lines = sessions.get(activeSession) || [];
+    return (
+      <TerminalPanel
+        sessionId={activeSession}
+        lines={lines}
+        expanded
+        onExpand={() => onExpand(null)}
+      />
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-3">
+      {entries.map(([sessionId, lines]) => (
+        <TerminalPanel
+          key={sessionId}
+          sessionId={sessionId}
+          lines={lines}
+          onExpand={() => onExpand(sessionId)}
+        />
+      ))}
+    </div>
+  );
+}

package/dashboard/src/components/terminals/TerminalPanel.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { useRef, useEffect } from 'react';
+import { cn } from '@/lib/utils';
+import type { TerminalLine } from '@/stores/terminal-store';
+
+interface TerminalPanelProps {
+  sessionId: string;
+  lines: TerminalLine[];
+  expanded?: boolean;
+  onExpand?: () => void;
+}
+
+export function TerminalPanel({ sessionId, lines, expanded, onExpand }: TerminalPanelProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [lines.length]);
+
+  const shortId = sessionId.split('-').slice(-2).join('-');
+
+  return (
+    <div
+      className={cn(
+        'border border-[var(--hud-border)] rounded bg-black/50 flex flex-col',
+        expanded ? 'col-span-full' : ''
+      )}
+    >
+      <div className="flex items-center justify-between px-3 py-1.5 border-b border-[var(--hud-border)] bg-[var(--hud-surface)]">
+        <span className="text-[10px] font-mono text-[var(--hud-accent)]">{shortId}</span>
+        <div className="flex items-center gap-2">
+          <span className="text-[10px] font-mono text-[var(--hud-text-dim)]">{lines.length} lines</span>
+          {onExpand && (
+            <button
+              onClick={onExpand}
+              className="text-[10px] font-mono text-[var(--hud-text-dim)] hover:text-[var(--hud-text)]"
+            >
+              {expanded ? 'Grid' : 'Expand'}
+            </button>
+          )}
+        </div>
+      </div>
+      <div
+        ref={scrollRef}
+        className={cn(
+          'overflow-auto font-mono text-[11px] p-2 space-y-0.5',
+          expanded ? 'h-[500px]' : 'h-[250px]'
+        )}
+      >
+        {lines.length === 0 ? (
+          <p className="text-[var(--hud-text-dim)] opacity-50">No output yet</p>
+        ) : (
+          lines.map((line, i) => (
+            <div key={i} className={cn('leading-tight', line.is_error ? 'text-red-400' : 'text-green-300/80')}>
+              <span className="text-[var(--hud-text-dim)] opacity-40 mr-2">
+                {new Date(line.timestamp).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
+              </span>
+              <span className="text-cyan-400/60 mr-1">[{line.tool_name?.split('__').pop() || 'sys'}]</span>
+              <span>{line.text}</span>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}

package/dashboard/src/components/ui/badge.tsx

@@ -0,0 +1,32 @@
+import { cn } from '@/lib/utils';
+
+const VARIANTS: Record<string, string> = {
+  default: 'bg-[var(--hud-surface)] text-[var(--hud-text-dim)]',
+  active: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
+  passed: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
+  success: 'bg-emerald-500/20 text-emerald-400 border-emerald-500/30',
+  failed: 'bg-red-500/20 text-red-400 border-red-500/30',
+  warning: 'bg-amber-500/20 text-amber-400 border-amber-500/30',
+  pending: 'bg-zinc-500/20 text-zinc-400 border-zinc-500/30',
+  info: 'bg-[var(--status-info-bg)] text-[var(--status-info)] border-[var(--status-info-border)]',
+};
+
+interface BadgeProps {
+  variant?: keyof typeof VARIANTS;
+  children: React.ReactNode;
+  className?: string;
+}
+
+export function Badge({ variant = 'default', children, className }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center px-2 py-0.5 text-[10px] font-mono rounded border',
+        VARIANTS[variant] || VARIANTS.default,
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}

package/dashboard/src/components/ui/error-boundary.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { Component, type ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  section?: string;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+      return (
+        <div className="border border-red-500/30 rounded p-3 bg-red-500/5">
+          <p className="text-[10px] font-mono text-red-400">
+            {this.props.section ? `[${this.props.section}] ` : ''}
+            Error: {this.state.error?.message || 'Unknown error'}
+          </p>
+          <button
+            onClick={() => this.setState({ hasError: false, error: undefined })}
+            className="text-[10px] font-mono text-[var(--hud-accent)] underline mt-1"
+          >
+            Retry
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/dashboard/src/components/ui/progress-bar.tsx

@@ -0,0 +1,45 @@
+import { cn } from '@/lib/utils';
+
+interface ProgressBarProps {
+  value: number;
+  max?: number;
+  threshold?: number;
+  className?: string;
+  showLabel?: boolean;
+}
+
+export function ProgressBar({
+  value,
+  max = 100,
+  threshold,
+  className,
+  showLabel = true,
+}: ProgressBarProps) {
+  const pct = Math.min((value / max) * 100, 100);
+  const aboveThreshold = threshold !== undefined && value >= threshold;
+
+  return (
+    <div className={cn('flex items-center gap-2', className)}>
+      <div className="relative flex-1 h-2 bg-[var(--hud-surface)] rounded-full overflow-hidden">
+        <div
+          className={cn(
+            'h-full rounded-full transition-all duration-500',
+            aboveThreshold ? 'bg-emerald-500' : pct > 60 ? 'bg-amber-500' : 'bg-red-500'
+          )}
+          style={{ width: `${pct}%` }}
+        />
+        {threshold !== undefined && (
+          <div
+            className="absolute top-0 bottom-0 w-px bg-emerald-400/50"
+            style={{ left: `${(threshold / max) * 100}%` }}
+          />
+        )}
+      </div>
+      {showLabel && (
+        <span className="text-[10px] font-mono text-[var(--hud-text-dim)] min-w-[3ch] text-right">
+          {Math.round(pct)}%
+        </span>
+      )}
+    </div>
+  );
+}

package/dashboard/src/components/ui/score-badge.tsx

@@ -0,0 +1,20 @@
+import { cn, formatScore, scoreColor } from '@/lib/utils';
+
+interface ScoreBadgeProps {
+  score: number;
+  label?: string;
+  className?: string;
+}
+
+export function ScoreBadge({ score, label, className }: ScoreBadgeProps) {
+  return (
+    <div className={cn('flex items-center gap-1', className)}>
+      {label && (
+        <span className="text-[10px] font-mono text-[var(--hud-text-dim)]">{label}</span>
+      )}
+      <span className={cn('text-sm font-mono font-bold', scoreColor(score))}>
+        {formatScore(score)}
+      </span>
+    </div>
+  );
+}

package/dashboard/src/components/ui/status-indicator.tsx

@@ -0,0 +1,25 @@
+import { cn } from '@/lib/utils';
+
+interface StatusIndicatorProps {
+  status: 'online' | 'offline' | 'warning' | 'active';
+  label?: string;
+  className?: string;
+}
+
+const COLORS: Record<string, string> = {
+  online: 'bg-emerald-400',
+  offline: 'bg-red-400',
+  warning: 'bg-amber-400',
+  active: 'bg-amber-400 animate-pulse',
+};
+
+export function StatusIndicator({ status, label, className }: StatusIndicatorProps) {
+  return (
+    <div className={cn('flex items-center gap-1.5', className)}>
+      <span className={cn('w-2 h-2 rounded-full', COLORS[status])} />
+      {label && (
+        <span className="text-[10px] font-mono text-[var(--hud-text-dim)]">{label}</span>
+      )}
+    </div>
+  );
+}

package/dashboard/src/components/ui/toast.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useState, useEffect, useCallback, createContext, useContext, type ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+interface Toast {
+  id: number;
+  message: string;
+  type: 'success' | 'error' | 'info';
+}
+
+interface ToastContextValue {
+  addToast: (message: string, type?: Toast['type']) => void;
+}
+
+const ToastContext = createContext<ToastContextValue>({ addToast: () => {} });
+
+export function useToast() {
+  return useContext(ToastContext);
+}
+
+let nextId = 0;
+
+export function ToastProvider({ children }: { children: ReactNode }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const addToast = useCallback((message: string, type: Toast['type'] = 'info') => {
+    const id = nextId++;
+    setToasts((prev) => [...prev, { id, message, type }]);
+  }, []);
+
+  const removeToast = useCallback((id: number) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ addToast }}>
+      {children}
+      <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 pointer-events-none">
+        {toasts.map((t) => (
+          <ToastItem key={t.id} toast={t} onDone={() => removeToast(t.id)} />
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}
+
+function ToastItem({ toast, onDone }: { toast: Toast; onDone: () => void }) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    requestAnimationFrame(() => setVisible(true));
+    const timer = setTimeout(() => {
+      setVisible(false);
+      setTimeout(onDone, 200);
+    }, 3000);
+    return () => clearTimeout(timer);
+  }, [onDone]);
+
+  const colors = {
+    success: 'border-[var(--status-success-border)] bg-[var(--status-success-bg)] text-[var(--status-success)]',
+    error: 'border-[var(--status-error-border)] bg-[var(--status-error-bg)] text-[var(--status-error)]',
+    info: 'border-[var(--status-info-border)] bg-[var(--status-info-bg)] text-[var(--status-info)]',
+  };
+
+  return (
+    <div
+      className={cn(
+        'pointer-events-auto px-3 py-2 rounded border text-[10px] font-mono transition-all duration-200',
+        colors[toast.type],
+        visible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-2'
+      )}
+    >
+      {toast.message}
+    </div>
+  );
+}

package/dashboard/src/components/warroom/TaskKanbanBoard.tsx

@@ -0,0 +1,149 @@
+'use client';
+
+import { cn, formatRelativeTime } from '@/lib/utils';
+import type { DispatchEntry, WorkflowStep } from '@/stores/dispatch-store';
+
+// Agent colors matching server AGENTS array
+const AGENT_COLORS: Record<string, string> = {
+  helix: '#FFD700', vox: '#10B981', atlas: '#3B82F6', blade: '#EF4444',
+  hawk: '#F59E0B', scout: '#06B6D4', forge: '#8B5CF6', echo: '#EC4899',
+  cipher: '#14B8A6', sentinel: '#E8ECF4', ops: '#78716C', strategist: '#D97706',
+};
+
+const COLUMNS = [
+  { key: 'pending', label: 'PENDING', dotClass: 'bg-yellow-500' },
+  { key: 'dispatched', label: 'IN PROGRESS', dotClass: 'bg-blue-500' },
+  { key: 'completed', label: 'COMPLETED', dotClass: 'bg-emerald-500' },
+  { key: 'failed', label: 'FAILED', dotClass: 'bg-red-500' },
+] as const;
+
+interface TaskKanbanBoardProps {
+  entries: DispatchEntry[];
+  workflowSteps: WorkflowStep[];
+  agentFilter: string | null;
+  offerFilter: string | null;
+}
+
+function normalizeStatus(status: string): string {
+  const s = status.toLowerCase();
+  if (s === 'in_progress' || s === 'dispatched' || s === 'active' || s === 'running') return 'dispatched';
+  if (s === 'done' || s === 'completed' || s === 'passed') return 'completed';
+  if (s === 'failed' || s === 'error') return 'failed';
+  if (s === 'skipped') return 'completed';
+  return 'pending';
+}
+
+export function TaskKanbanBoard({ entries, workflowSteps, agentFilter, offerFilter }: TaskKanbanBoardProps) {
+  // Merge dispatch entries and workflow steps into unified list
+  const allItems: DispatchEntry[] = [
+    ...entries,
+    ...workflowSteps.map((step) => ({
+      id: step.id,
+      offer: step.offer,
+      agent_id: step.agent_id,
+      model: '',
+      status: normalizeStatus(step.status) as DispatchEntry['status'],
+      task_summary: step.action,
+      parallel_group: null,
+      created_at: '',
+      source: `workflow:${step.phase}`,
+    })),
+  ];
+
+  // Apply filters
+  const filtered = allItems.filter((item) => {
+    if (agentFilter && item.agent_id.toLowerCase() !== agentFilter.toLowerCase()) return false;
+    if (offerFilter && item.offer !== offerFilter) return false;
+    return true;
+  });
+
+  // Group by column
+  const columns = COLUMNS.map((col) => ({
+    ...col,
+    items: filtered.filter((item) => normalizeStatus(item.status) === col.key),
+  }));
+
+  if (filtered.length === 0) {
+    const hasUnfiltered = allItems.length > 0;
+    const activeFilter = agentFilter || offerFilter;
+    return (
+      <div className="flex flex-col items-center justify-center py-12 text-[var(--hud-text-dim)] gap-2">
+        <p className="text-xs font-mono">
+          {hasUnfiltered && activeFilter
+            ? `No tasks for @${agentFilter || offerFilter} — ${allItems.length} tasks hidden by filter`
+            : 'No dispatch tasks found'}
+        </p>
+        {hasUnfiltered && activeFilter && (
+          <p className="text-[10px] font-mono opacity-50">Click the active agent again to clear filter</p>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-4 gap-3 min-h-[200px]">
+      {columns.map((col) => (
+        <div key={col.key} className="flex flex-col">
+          {/* Column header */}
+          <div className="flex items-center gap-2 mb-2 px-1">
+            <span className={cn('w-2 h-2 rounded-full', col.dotClass)} />
+            <span className="text-[10px] font-mono font-bold text-[var(--hud-text-dim)] uppercase tracking-wider">
+              {col.label}
+            </span>
+            <span className="text-[10px] font-mono text-[var(--hud-text-dim)]">
+              {col.items.length}
+            </span>
+          </div>
+
+          {/* Cards */}
+          <div className="flex-1 space-y-1.5 overflow-y-auto max-h-[400px]">
+            {col.items.map((item) => (
+              <TaskCard key={item.id} item={item} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function TaskCard({ item }: { item: DispatchEntry }) {
+  const agentColor = AGENT_COLORS[item.agent_id.toLowerCase()] || '#6B7280';
+  const offerName = item.offer.split('/').pop() || item.offer;
+
+  return (
+    <div className="p-2 rounded border border-[var(--hud-border)] bg-[var(--hud-surface)] hover:border-[var(--hud-text-dim)] transition-colors">
+      {/* Agent badge + offer */}
+      <div className="flex items-center justify-between mb-1">
+        <span
+          className="text-[9px] font-mono font-bold px-1.5 py-0.5 rounded text-black"
+          style={{ backgroundColor: agentColor }}
+        >
+          {item.agent_id}
+        </span>
+        <span className="text-[9px] font-mono text-[var(--hud-text-dim)]">
+          {offerName}
+        </span>
+      </div>
+
+      {/* Task summary */}
+      <p className="text-[10px] font-mono text-[var(--hud-text)] leading-snug line-clamp-2 mb-1">
+        {item.task_summary || 'No description'}
+      </p>
+
+      {/* Footer: timestamp + model */}
+      <div className="flex items-center justify-between">
+        {item.created_at && (
+          <span className="text-[8px] font-mono text-[var(--hud-text-dim)]">
+            {formatRelativeTime(new Date(item.created_at).getTime())}
+          </span>
+        )}
+        {item.model && (
+          <span className="text-[8px] font-mono px-1 py-0.5 rounded bg-[var(--hud-bg)] text-[var(--hud-text-dim)]">
+            {item.model}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}