@lucapimenta/copy-chief-dashboard 1.0.0

package/dashboard/src/components/kanban/OfferCard.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import { useState } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { formatRelativeTime } from '@/lib/utils';
+import { getNichoColor } from '@/lib/nicho-colors';
+import { Badge } from '@/components/ui/badge';
+import { ScoreBadge } from '@/components/ui/score-badge';
+import { useOfferStore, type OfferStatus } from '@/stores/offer-store';
+import { useDispatchStore } from '@/stores/dispatch-store';
+
+const MECANISMO_ICONS: Record<string, { icon: string; label: string }> = {
+  UNDEFINED: { icon: '○', label: 'Undefined' },
+  DRAFT: { icon: '✎', label: 'Draft' },
+  PENDING_VALIDATION: { icon: '◔', label: 'Pending' },
+  VALIDATED: { icon: '✓', label: 'Validated' },
+  APPROVED: { icon: '✓✓', label: 'Approved' },
+};
+
+const DELIVERABLE_LABELS: Record<string, string> = {
+  vsl: 'VSL',
+  lp: 'LP',
+  criativos: 'ADS',
+  emails: 'EM',
+};
+
+interface OfferCardProps {
+  offer: OfferStatus;
+}
+
+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 STATUS_DOT: Record<string, string> = {
+  pending: 'bg-yellow-500',
+  dispatched: 'bg-blue-500',
+  completed: 'bg-emerald-500',
+  failed: 'bg-red-500',
+  skipped: 'bg-gray-500',
+};
+
+export function OfferCard({ offer }: OfferCardProps) {
+  const { selectedOffer, selectOffer } = useOfferStore();
+  const [tasksExpanded, setTasksExpanded] = useState(false);
+  const dispatchEntries = useDispatchStore((s) => s.entries);
+  const offerSlug = `${offer.nicho}/${offer.name}`;
+  const offerTasks = dispatchEntries.filter((e) => e.offer === offerSlug);
+  const isSelected = selectedOffer === offerSlug;
+  const mec = MECANISMO_ICONS[offer.mecanismo_state] || MECANISMO_ICONS.UNDEFINED;
+  const nichoColor = getNichoColor(offer.nicho);
+  const isActive = !!offer.active_agent;
+
+  return (
+    <div
+      onClick={() => selectOffer(`${offer.nicho}/${offer.name}`)}
+      className={cn(
+        'p-3 rounded border cursor-pointer transition-all relative',
+        isSelected
+          ? 'border-[var(--hud-accent)] bg-[var(--hud-accent)]/5 shadow-[0_0_8px_var(--hud-accent-dim)]'
+          : 'border-[var(--hud-border)] bg-[var(--hud-surface)] hover:border-[var(--hud-text-dim)]'
+      )}
+    >
+      {/* Active pulse indicator */}
+      {isActive && (
+        <span className="absolute top-2 right-2 flex h-2 w-2">
+          <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75" />
+          <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500" />
+        </span>
+      )}
+
+      <div className="flex items-start justify-between mb-2">
+        <h3 className="text-sm font-mono text-[var(--hud-text)] leading-tight">
+          {offer.name}
+        </h3>
+        <span className={cn('px-1.5 py-0.5 rounded text-[9px] font-mono font-bold border', nichoColor.bg, nichoColor.border, nichoColor.text)}>
+          {offer.nicho}
+        </span>
+      </div>
+
+      <div className="flex items-center gap-2 mb-2">
+        <span className="text-[10px] font-mono text-[var(--hud-text-dim)]">MEC:</span>
+        <Badge
+          variant={
+            offer.mecanismo_state === 'APPROVED' ? 'passed' :
+            offer.mecanismo_state === 'VALIDATED' ? 'passed' :
+            offer.mecanismo_state === 'DRAFT' ? 'active' : 'pending'
+          }
+        >
+          {mec.icon} {mec.label}
+        </Badge>
+      </div>
+
+      {/* Deliverables breakdown */}
+      {offer.deliverables && offer.production_count > 0 && (
+        <div className="flex items-center gap-1.5 mb-2">
+          {Object.entries(offer.deliverables).map(([key, count]) => (
+            count > 0 && (
+              <span
+                key={key}
+                className="text-[9px] font-mono px-1.5 py-0.5 rounded bg-[var(--hud-bg)] border border-[var(--hud-border)] text-[var(--hud-text-dim)]"
+              >
+                {DELIVERABLE_LABELS[key] || key}:{count}
+              </span>
+            )
+          ))}
+        </div>
+      )}
+
+      {/* Active agent */}
+      {isActive && (
+        <div className="flex items-center gap-1.5 mb-2">
+          <span className="text-[9px] font-mono text-emerald-400">
+            {offer.active_agent} working
+          </span>
+          {offer.last_activity && (
+            <span className="text-[9px] font-mono text-[var(--hud-text-dim)]">
+              {formatRelativeTime(offer.last_activity)}
+            </span>
+          )}
+        </div>
+      )}
+
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] font-mono text-[var(--hud-text-dim)]">
+          {offer.production_count} produced
+        </span>
+        {offer.avg_quality > 0 && (
+          <ScoreBadge score={offer.avg_quality} label="Q:" />
+        )}
+      </div>
+
+      {/* RMBC mini-bars */}
+      {offer.rmbc && Object.keys(offer.rmbc).length > 0 && (
+        <div className="mt-2 pt-2 border-t border-[var(--hud-border)]">
+          <p className="text-[9px] font-mono text-[var(--hud-text-dim)] mb-1 uppercase tracking-wider">RMBC</p>
+          <div className="space-y-1">
+            {(['digerivel', 'unico', 'provavel', 'conectado'] as const).map((key) => {
+              const val = offer.rmbc?.[key];
+              if (val === undefined) return null;
+              return (
+                <div key={key} className="flex items-center gap-1.5">
+                  <span className="text-[8px] font-mono text-[var(--hud-text-dim)] w-[14px]">
+                    {key[0].toUpperCase()}
+                  </span>
+                  <div className="flex-1 h-1 bg-[var(--hud-bg)] rounded-full overflow-hidden">
+                    <div
+                      className={cn(
+                        'h-full rounded-full',
+                        val >= 8 ? 'bg-emerald-500' : val >= 7 ? 'bg-amber-500' : 'bg-red-500'
+                      )}
+                      style={{ width: `${(val / 10) * 100}%` }}
+                    />
+                  </div>
+                  <span className="text-[8px] font-mono text-[var(--hud-text-dim)] w-3 text-right">{val}</span>
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Quality scores */}
+      {(offer.blind_critic_score || offer.est_score) && (
+        <div className="mt-1.5 flex gap-2">
+          {offer.blind_critic_score !== undefined && (
+            <span className={cn(
+              'text-[9px] font-mono',
+              offer.blind_critic_score >= 8 ? 'text-emerald-400' : offer.blind_critic_score >= 7 ? 'text-amber-400' : 'text-red-400'
+            )}>
+              BC:{offer.blind_critic_score}
+            </span>
+          )}
+          {offer.est_score !== undefined && (
+            <span className={cn(
+              'text-[9px] font-mono',
+              offer.est_score >= 8 ? 'text-emerald-400' : offer.est_score >= 7 ? 'text-amber-400' : 'text-red-400'
+            )}>
+              EST:{offer.est_score}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Dispatch Tasks (expandable) */}
+      {offerTasks.length > 0 && (
+        <div className="mt-2 pt-2 border-t border-[var(--hud-border)]">
+          <button
+            onClick={(e) => { e.stopPropagation(); setTasksExpanded(!tasksExpanded); }}
+            className="flex items-center gap-1 text-[9px] font-mono text-[var(--hud-text-dim)] hover:text-[var(--hud-text)] w-full"
+          >
+            {tasksExpanded ? <ChevronDown size={10} /> : <ChevronRight size={10} />}
+            <span className="uppercase tracking-wider">{offerTasks.length} tasks</span>
+          </button>
+          {tasksExpanded && (
+            <div className="mt-1 space-y-1">
+              {offerTasks.slice(0, 8).map((task) => (
+                <div key={task.id} className="flex items-center gap-1.5 text-[9px] font-mono">
+                  <span
+                    className="w-3 h-3 rounded-full shrink-0 flex items-center justify-center text-[6px] font-bold text-black"
+                    style={{ backgroundColor: AGENT_COLORS[task.agent_id.toLowerCase()] || '#6B7280' }}
+                  >
+                    {task.agent_id[0]?.toUpperCase()}
+                  </span>
+                  <span className="truncate flex-1 text-[var(--hud-text)]">
+                    {task.task_summary || 'No description'}
+                  </span>
+                  <span className={cn('w-1.5 h-1.5 rounded-full shrink-0', STATUS_DOT[task.status] || 'bg-gray-500')} />
+                </div>
+              ))}
+              {offerTasks.length > 8 && (
+                <p className="text-[8px] text-[var(--hud-text-dim)]">+{offerTasks.length - 8} more</p>
+              )}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/dashboard/src/components/kanban/SortableOfferCard.tsx

@@ -0,0 +1,33 @@
+'use client';
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { OfferCard } from './OfferCard';
+import type { OfferStatus } from '@/stores/offer-store';
+
+interface SortableOfferCardProps {
+  offer: OfferStatus;
+}
+
+export function SortableOfferCard({ offer }: SortableOfferCardProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: `${offer.nicho}/${offer.name}` });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
+      <OfferCard offer={offer} />
+    </div>
+  );
+}

package/dashboard/src/components/layout/KeyboardShortcuts.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
+
+export function KeyboardShortcuts() {
+  useKeyboardShortcuts();
+  return null;
+}

package/dashboard/src/components/layout/Providers.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import { useOffers } from '@/hooks/use-offers';
+import { useMonitorEvents } from '@/hooks/use-monitor-events';
+import { useOfferStore } from '@/stores/offer-store';
+import { useHelixStore } from '@/stores/helix-store';
+import { useEffect } from 'react';
+
+/**
+ * Global data providers — initialized once in the root layout.
+ * - Loads offers from /offers API (refreshes every 30s)
+ * - Connects WebSocket for live events (always-on)
+ * - Syncs selectedOffer phase to helixStore.currentPhase
+ */
+export function Providers({ children }: { children: React.ReactNode }) {
+  // Always fetch offers globally (populates offer-store)
+  useOffers();
+
+  // Always connect WebSocket globally (populates monitor-store)
+  useMonitorEvents();
+
+  // Sync selected offer's phase to helix store for StatusBar display
+  const selectedOffer = useOfferStore((s) => s.selectedOffer);
+  const offers = useOfferStore((s) => s.offers);
+  const setCurrentPhase = useHelixStore((s) => s.setCurrentPhase);
+
+  useEffect(() => {
+    if (selectedOffer && offers.length > 0) {
+      const match = offers.find(
+        (o) => `${o.nicho}/${o.name}` === selectedOffer
+      );
+      if (match) {
+        setCurrentPhase(match.phase.toUpperCase());
+      }
+    } else if (!selectedOffer) {
+      setCurrentPhase('IDLE');
+    }
+  }, [selectedOffer, offers, setCurrentPhase]);
+
+  return <>{children}</>;
+}

package/dashboard/src/components/layout/Sidebar.tsx

@@ -0,0 +1,91 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import {
+  Activity, Columns3, GitBranch, Users, TrendingUp, Play, Link2,
+  Bot, Terminal, FileCode, Settings, Github, Map, Shield,
+  PanelLeftClose, PanelLeft,
+} from 'lucide-react';
+import { useUIStore } from '@/stores/ui-store';
+import { cn } from '@/lib/utils';
+import { PendingBadge } from '@/components/clickup/PendingBadge';
+
+const NAV_ITEMS = [
+  { href: '/warroom', label: 'War Room', icon: Shield },
+  { href: '/monitor', label: 'Monitor', icon: Activity },
+  { href: '/kanban', label: 'Kanban', icon: Columns3 },
+  { href: '/agents', label: 'Agents', icon: Bot },
+  { href: '/terminals', label: 'Terminals', icon: Terminal },
+  { href: '/helix', label: 'HELIX', icon: GitBranch },
+  { href: '/pipeline', label: 'Pipeline', icon: Play },
+  { href: '/context', label: 'Context', icon: FileCode },
+  { href: '/squad', label: 'Squad', icon: Users },
+  { href: '/insights', label: 'Insights', icon: TrendingUp },
+  { href: '/github', label: 'GitHub', icon: Github },
+  { href: '/roadmap', label: 'Roadmap', icon: Map },
+  { href: '/clickup', label: 'ClickUp', icon: Link2 },
+  { href: '/settings', label: 'Settings', icon: Settings },
+];
+
+export function Sidebar() {
+  const pathname = usePathname();
+  const { sidebarCollapsed, toggleSidebar } = useUIStore();
+
+  return (
+    <aside
+      className={cn(
+        'flex flex-col border-r border-[var(--hud-border)] bg-[var(--hud-bg)] transition-all duration-200',
+        sidebarCollapsed ? 'w-16' : 'w-52'
+      )}
+    >
+      <div className="flex items-center justify-between px-3 py-4 border-b border-[var(--hud-border)]">
+        {!sidebarCollapsed && (
+          <span className="text-xs font-mono text-[var(--hud-accent)] tracking-widest uppercase">
+            Copy Chief
+          </span>
+        )}
+        <button
+          onClick={toggleSidebar}
+          className="p-1.5 rounded hover:bg-[var(--hud-surface)] text-[var(--hud-text-dim)] hover:text-[var(--hud-text)]"
+        >
+          {sidebarCollapsed ? <PanelLeft size={16} /> : <PanelLeftClose size={16} />}
+        </button>
+      </div>
+
+      <nav className="flex-1 py-2 overflow-y-auto">
+        {NAV_ITEMS.map(({ href, label, icon: Icon }) => {
+          const active = pathname === href;
+          return (
+            <Link
+              key={href}
+              href={href}
+              className={cn(
+                'flex items-center gap-3 px-4 py-2 text-sm font-mono transition-colors',
+                active
+                  ? 'text-[var(--hud-accent)] bg-[var(--hud-accent)]/10 border-r-2 border-[var(--hud-accent)]'
+                  : 'text-[var(--hud-text-dim)] hover:text-[var(--hud-text)] hover:bg-[var(--hud-surface)]'
+              )}
+            >
+              <Icon size={16} />
+              {!sidebarCollapsed && (
+                <span className="flex items-center gap-2">
+                  {label}
+                  {label === 'ClickUp' && <PendingBadge />}
+                </span>
+              )}
+            </Link>
+          );
+        })}
+      </nav>
+
+      <div className="px-3 py-3 border-t border-[var(--hud-border)]">
+        {!sidebarCollapsed && (
+          <p className="text-[10px] font-mono text-[var(--hud-text-dim)] opacity-50">
+            BLACK v10.5
+          </p>
+        )}
+      </div>
+    </aside>
+  );
+}

package/dashboard/src/components/layout/StatusBar.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { Circle } from 'lucide-react';
+import { useOfferStore } from '@/stores/offer-store';
+import { useHelixStore } from '@/stores/helix-store';
+import { useMonitorStore } from '@/stores/monitor-store';
+import { CurrentToolIndicator } from '@/components/monitor/CurrentToolIndicator';
+import { cn, formatRelativeTime } from '@/lib/utils';
+
+export function StatusBar() {
+  const selectedOffer = useOfferStore((s) => s.selectedOffer);
+  const currentPhase = useHelixStore((s) => s.currentPhase);
+  const connected = useMonitorStore((s) => s.connected);
+  const events = useMonitorStore((s) => s.events);
+  const lastEvent = events[0];
+
+  return (
+    <header className="flex items-center justify-between px-4 py-2 border-b border-[var(--hud-border)] bg-[var(--hud-bg)]">
+      <div className="flex items-center gap-4">
+        <span className="text-xs font-mono text-[var(--hud-text-dim)]">
+          OFFER:{' '}
+          <span className="text-[var(--hud-text)]">
+            {selectedOffer || 'none'}
+          </span>
+        </span>
+        <span className="text-xs font-mono text-[var(--hud-text-dim)]">
+          PHASE:{' '}
+          <span className="text-[var(--hud-accent)]">{currentPhase}</span>
+        </span>
+        <CurrentToolIndicator />
+      </div>
+
+      <div className="flex items-center gap-4">
+        {lastEvent && (
+          <span className="text-[10px] font-mono text-[var(--hud-text-dim)]">
+            Last: {formatRelativeTime(lastEvent.timestamp)}
+          </span>
+        )}
+        <div className="flex items-center gap-1.5">
+          <Circle
+            size={8}
+            className={cn(
+              'fill-current',
+              connected ? 'text-emerald-400' : 'text-red-400'
+            )}
+          />
+          <span className="text-[10px] font-mono text-[var(--hud-text-dim)]">
+            {connected ? 'LIVE' : 'OFFLINE'}
+          </span>
+        </div>
+      </div>
+    </header>
+  );
+}

package/dashboard/src/components/mermaidcn/mermaid.tsx

@@ -0,0 +1,125 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { mermaidThemes, type MermaidCustomTheme } from "@/lib/mermaid-themes";
+
+export type MermaidBuiltinTheme = "default" | "dark" | "forest" | "neutral" | "base";
+export type MermaidTheme = MermaidBuiltinTheme | MermaidCustomTheme;
+
+const BUILTIN_THEMES = new Set<string>(["default", "dark", "forest", "neutral", "base"]);
+
+export interface MermaidConfig {
+  theme?: MermaidTheme;
+  darkMode?: boolean;
+  look?: "classic" | "handdrawn";
+  themeVariables?: Record<string, string>;
+  flowchart?: { curve?: "linear" | "cardinal"; padding?: number; htmlLabels?: boolean };
+  fontFamily?: string;
+  fontSize?: number;
+}
+
+export interface MermaidProps {
+  chart: string;
+  config?: MermaidConfig;
+  className?: string;
+  onError?: (error: string) => void;
+  debounceTime?: number;
+}
+
+function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = React.useState(value);
+  React.useEffect(() => {
+    const handler = setTimeout(() => setDebouncedValue(value), delay);
+    return () => clearTimeout(handler);
+  }, [value, delay]);
+  return debouncedValue;
+}
+
+export function Mermaid({ chart, config, className, onError, debounceTime = 300 }: MermaidProps) {
+  const [svg, setSvg] = React.useState<string | null>(null);
+  const [error, setError] = React.useState<string | null>(null);
+  const [status, setStatus] = React.useState<"idle" | "loading" | "success" | "error">("idle");
+  const id = React.useId().replace(/:/g, "");
+  const renderRef = React.useRef<HTMLDivElement>(null);
+  const debouncedChart = useDebounce(chart, debounceTime);
+  const configString = React.useMemo(() => JSON.stringify(config ?? {}), [config]);
+
+  React.useEffect(() => {
+    if (!debouncedChart.trim()) { setStatus("idle"); setSvg(null); setError(null); return; }
+    let isCancelled = false;
+
+    const render = async () => {
+      setStatus("loading");
+      setError(null);
+      try {
+        const mermaid = (await import("mermaid")).default;
+        if (isCancelled) return;
+
+        const parsedConfig: MermaidConfig = JSON.parse(configString);
+        const isCustomTheme = parsedConfig.theme && !BUILTIN_THEMES.has(parsedConfig.theme);
+        const resolvedThemeVars = isCustomTheme
+          ? { ...mermaidThemes[parsedConfig.theme as MermaidCustomTheme], ...parsedConfig.themeVariables }
+          : parsedConfig.themeVariables;
+        const resolvedMermaidTheme = isCustomTheme ? "base"
+          : (parsedConfig.theme as MermaidBuiltinTheme) || (parsedConfig.darkMode ? "dark" : "dark");
+
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: resolvedMermaidTheme,
+          themeVariables: resolvedThemeVars,
+          flowchart: { htmlLabels: parsedConfig.flowchart?.htmlLabels ?? true },
+          fontFamily: parsedConfig.fontFamily ?? "JetBrains Mono, monospace",
+          fontSize: parsedConfig.fontSize ?? 12,
+          logLevel: "error" as const,
+          securityLevel: "loose",
+        });
+
+        if (!renderRef.current) return;
+        renderRef.current.innerHTML = "";
+        const uniqueId = `mermaid-${id}-${Date.now()}`;
+        const { svg: svgOutput } = await mermaid.render(uniqueId, debouncedChart.trim(), renderRef.current);
+        if (!isCancelled) { setSvg(svgOutput); setStatus("success"); renderRef.current.innerHTML = ""; }
+      } catch (err) {
+        if (!isCancelled) {
+          const message = err instanceof Error ? err.message : "Failed to render diagram";
+          setError(message);
+          setStatus("error");
+          setSvg(null);
+          onError?.(message);
+        }
+      }
+    };
+    render();
+    return () => { isCancelled = true; };
+  }, [debouncedChart, configString, id, onError]);
+
+  return (
+    <div className={cn("relative w-full min-h-[100px]", className)}>
+      {status === "success" && svg && (
+        <div
+          className="flex items-center justify-center w-full h-full overflow-auto [&_svg]:max-w-full [&_svg]:h-auto"
+          dangerouslySetInnerHTML={{ __html: svg }}
+          role="img"
+          aria-label="Mermaid diagram"
+        />
+      )}
+      <div ref={renderRef} className="absolute inset-0 invisible -z-50 w-full h-full pointer-events-none overflow-hidden" aria-hidden="true" />
+      {status === "loading" && (
+        <div className="absolute inset-0 flex items-center justify-center">
+          <span className="text-xs font-mono text-[var(--hud-text-dim)] animate-pulse">Rendering...</span>
+        </div>
+      )}
+      {status === "error" && error && (
+        <div className="flex items-center justify-center w-full p-4 border border-red-500/20 bg-red-500/5 rounded">
+          <code className="text-[10px] text-red-400 font-mono">{error.split("\n")[0]}</code>
+        </div>
+      )}
+      {status === "idle" && (
+        <div className="flex items-center justify-center w-full h-full min-h-[100px] border border-dashed border-[var(--hud-border)] rounded">
+          <p className="text-xs font-mono text-[var(--hud-text-dim)]">No diagram</p>
+        </div>
+      )}
+    </div>
+  );
+}