@lucapimenta/copy-chief-dashboard 1.0.0

package/dashboard/src/app/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from 'next/navigation';
+
+export default function Home() {
+  redirect('/monitor');
+}

package/dashboard/src/app/pipeline/page.tsx

@@ -0,0 +1,329 @@
+'use client';
+
+import { useState } from 'react';
+import useSWR from 'swr';
+import { apiFetch, formatRelativeTime, cn } from '@/lib/utils';
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:4001';
+import { useOfferStore } from '@/stores/offer-store';
+import { useOffers } from '@/hooks/use-offers';
+import { Badge } from '@/components/ui/badge';
+import { ProgressBar } from '@/components/ui/progress-bar';
+import { ScoreBadge } from '@/components/ui/score-badge';
+import { PipelineStagePills } from '@/components/pipeline/PipelineStagePills';
+import { ErrorBoundary } from '@/components/ui/error-boundary';
+import { getNichoColor } from '@/lib/nicho-colors';
+
+interface PipelineState {
+  offer: string;
+  pipeline: {
+    status: string;
+    mode: string;
+    started_at: string;
+    current_step: number;
+    total_steps: number;
+    current_deliverable: string;
+    iteration: number;
+    max_iterations: number;
+    last_score: number;
+    paused_at?: string;
+    crashed_at?: string;
+    completed_at?: string;
+    // Bob orchestrator format fields
+    current_phase?: string;
+    steps_completed?: Array<{ id: string; phase: string; description: string; result: string }>;
+    steps_remaining?: string[];
+    overnight_mode?: boolean;
+  } | null;
+  handoffs: Array<{
+    deliverable: string;
+    status: string;
+    completed_tasks: number;
+    total_tasks: number;
+    current_task?: string;
+  }>;
+  loops: Array<{
+    file: string;
+    deliverable: string;
+    offer_path: string;
+    iteration: number;
+    max_iterations: number;
+    last_score: number;
+    status: string;
+    feedback_categories: string[];
+  }>;
+}
+
+interface PipelineSummary {
+  offer: string;
+  status: string;
+  mode?: string;
+  current_deliverable?: string;
+  started_at?: string;
+}
+
+const STATUS_COLORS: Record<string, string> = {
+  'IN_PROGRESS': 'text-[var(--hud-accent)]',
+  'COMPLETED': 'text-emerald-400',
+  'CRASHED': 'text-red-400',
+  'PAUSED': 'text-yellow-400',
+  'ABORTED': 'text-red-300',
+  'STALE': 'text-orange-400',
+  'IDLE': 'text-zinc-500',
+  'HUMAN_GATE': 'text-amber-400',
+};
+
+const STATUS_BADGE: Record<string, 'active' | 'passed' | 'failed' | 'info'> = {
+  'IN_PROGRESS': 'active',
+  'COMPLETED': 'passed',
+  'CRASHED': 'failed',
+  'PAUSED': 'info',
+  'ABORTED': 'failed',
+  'STALE': 'info',
+  'HUMAN_GATE': 'info',
+};
+
+export default function PipelinePage() {
+  const { offers } = useOffers();
+  const { selectedOffer, selectOffer } = useOfferStore();
+
+  const { data: pipelines = [] } = useSWR<PipelineSummary[]>(
+    '/pipelines',
+    apiFetch,
+    { refreshInterval: 10_000 }
+  );
+
+  const { data: detail, mutate: refreshDetail } = useSWR<PipelineState>(
+    selectedOffer ? `/pipeline/${selectedOffer}` : null,
+    apiFetch,
+    { refreshInterval: 5_000 }
+  );
+
+  const sendCommand = async (command: 'pause' | 'resume' | 'abort') => {
+    if (!selectedOffer) return;
+    try {
+      const res = await fetch(`${API_BASE}/pipeline/command`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ offer: selectedOffer, command }),
+      });
+      if (!res.ok) {
+        console.error(`Pipeline command failed: ${res.status}`);
+      }
+      refreshDetail();
+    } catch (err) {
+      console.error('Pipeline command error:', err);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h1 className="text-lg font-mono text-[var(--hud-text)]">Pipeline Monitor</h1>
+        <select
+          value={selectedOffer || ''}
+          onChange={(e) => selectOffer(e.target.value || null)}
+          className="text-xs font-mono bg-[var(--hud-surface)] border border-[var(--hud-border)] text-[var(--hud-text)] rounded px-2 py-1"
+        >
+          <option value="">Select offer...</option>
+          {offers.map((o) => (
+            <option key={`${o.nicho}/${o.name}`} value={`${o.nicho}/${o.name}`}>{o.nicho}/{o.name}</option>
+          ))}
+        </select>
+      </div>
+
+      {/* Active Pipelines Summary */}
+      <ErrorBoundary section="Pipelines">
+      {pipelines.length > 0 && (
+        <div>
+          <h2 className="text-sm font-mono text-[var(--hud-text)] mb-2">Active Pipelines</h2>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+            {pipelines.map((p) => (
+              <button
+                key={p.offer}
+                onClick={() => selectOffer(p.offer)}
+                className={cn(
+                  'border rounded p-3 text-left transition-colors',
+                  'border-[var(--hud-border)] bg-[var(--hud-surface)] hover:border-[var(--hud-accent)]'
+                )}
+              >
+                <div className="flex items-center justify-between mb-1">
+                  <span className="text-xs font-mono text-[var(--hud-text)]">
+                    {(() => {
+                      const nicho = p.offer.split('/')[0];
+                      const nc = getNichoColor(nicho);
+                      return <span className={nc.text}>{p.offer}</span>;
+                    })()}
+                  </span>
+                  <Badge variant={STATUS_BADGE[p.status] || 'info'}>{p.status}</Badge>
+                </div>
+                {p.current_deliverable && (
+                  <p className="text-[10px] font-mono text-[var(--hud-text-dim)]">
+                    {p.current_deliverable} ({p.mode || 'interactive'})
+                  </p>
+                )}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      </ErrorBoundary>
+
+      {/* Offer Detail */}
+      <ErrorBoundary section="Pipeline Detail">
+      {!selectedOffer ? (
+        <div className="flex flex-col items-center justify-center py-16 text-[var(--hud-text-dim)]">
+          <p className="text-sm font-mono">Select an offer to monitor its pipeline</p>
+          {pipelines.length === 0 && (
+            <p className="text-xs opacity-50 mt-2">No active pipelines. Start one with /pipeline [offer]</p>
+          )}
+        </div>
+      ) : !detail ? (
+        <p className="text-xs font-mono text-[var(--hud-text-dim)] animate-pulse">Loading pipeline state...</p>
+      ) : (
+        <div className="space-y-4">
+          {/* Pipeline State */}
+          {detail.pipeline ? (
+            <div className="border border-[var(--hud-border)] rounded p-4 bg-[var(--hud-surface)]">
+              <div className="flex items-center justify-between mb-3">
+                <div className="flex items-center gap-2">
+                  <span className={cn('text-sm font-mono font-bold', STATUS_COLORS[detail.pipeline.status] || '')}>
+                    {detail.pipeline.status}
+                  </span>
+                  <Badge variant="info">{detail.pipeline.mode}</Badge>
+                </div>
+                <div className="flex gap-1">
+                  {detail.pipeline.status === 'IN_PROGRESS' && (
+                    <button
+                      onClick={() => sendCommand('pause')}
+                      className="text-[10px] font-mono px-2 py-1 rounded border border-yellow-500/30 text-yellow-400 hover:bg-yellow-500/10"
+                    >
+                      Pause
+                    </button>
+                  )}
+                  {detail.pipeline.status === 'PAUSED' && (
+                    <button
+                      onClick={() => sendCommand('resume')}
+                      className="text-[10px] font-mono px-2 py-1 rounded border border-[var(--hud-border)] text-[var(--hud-accent)] hover:bg-[var(--hud-accent-bg)]"
+                    >
+                      Resume
+                    </button>
+                  )}
+                  {['IN_PROGRESS', 'PAUSED'].includes(detail.pipeline.status) && (
+                    <button
+                      onClick={() => sendCommand('abort')}
+                      className="text-[10px] font-mono px-2 py-1 rounded border border-red-500/30 text-red-400 hover:bg-red-500/10"
+                    >
+                      Abort
+                    </button>
+                  )}
+                </div>
+              </div>
+
+              <ProgressBar
+                value={Math.round((detail.pipeline.current_step / detail.pipeline.total_steps) * 100)}
+                className="mb-2"
+              />
+
+              <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-[10px] font-mono">
+                <div>
+                  <p className="text-[var(--hud-text-dim)]">Step</p>
+                  <p className="text-[var(--hud-text)]">{detail.pipeline.current_step}/{detail.pipeline.total_steps}</p>
+                </div>
+                <div>
+                  <p className="text-[var(--hud-text-dim)]">Deliverable</p>
+                  <p className="text-[var(--hud-text)]">{detail.pipeline.current_deliverable}</p>
+                </div>
+                <div>
+                  <p className="text-[var(--hud-text-dim)]">Iteration</p>
+                  <p className="text-[var(--hud-text)]">{detail.pipeline.iteration}/{detail.pipeline.max_iterations}</p>
+                </div>
+                <div>
+                  <p className="text-[var(--hud-text-dim)]">Last Score</p>
+                  <p className={cn((detail.pipeline.last_score || 0) >= 8 ? 'text-emerald-400' : 'text-yellow-400')}>
+                    {(detail.pipeline.last_score || 0).toFixed(1)}
+                  </p>
+                </div>
+              </div>
+
+              {/* Pipeline Stage Pills (Bob Orchestrator) */}
+              {(detail.pipeline.steps_completed?.length || detail.pipeline.steps_remaining?.length) ? (
+                <div className="mt-3 border-t border-[var(--hud-border)] pt-3">
+                  <PipelineStagePills
+                    stepsCompleted={detail.pipeline.steps_completed || []}
+                    stepsRemaining={detail.pipeline.steps_remaining || []}
+                    currentPhase={detail.pipeline.current_phase}
+                  />
+                </div>
+              ) : null}
+            </div>
+          ) : (
+            <div className="border border-[var(--hud-border)] rounded p-4 bg-[var(--hud-surface)]">
+              <p className="text-xs font-mono text-[var(--hud-text-dim)]">
+                No pipeline state for this offer. Start with: /pipeline {selectedOffer}
+              </p>
+            </div>
+          )}
+
+          {/* Handoff Tasks */}
+          {detail.handoffs.length > 0 && (
+            <div>
+              <h2 className="text-sm font-mono text-[var(--hud-text)] mb-2">Handoff Tasks</h2>
+              <div className="space-y-2">
+                {detail.handoffs.map((h) => (
+                  <div
+                    key={h.deliverable}
+                    className="border border-[var(--hud-border)] rounded p-3 bg-[var(--hud-surface)]"
+                  >
+                    <div className="flex items-center justify-between mb-1">
+                      <span className="text-xs font-mono text-[var(--hud-text)]">{h.deliverable}</span>
+                      <Badge variant={h.status === 'completed' ? 'passed' : 'active'}>{h.status}</Badge>
+                    </div>
+                    <ProgressBar
+                      value={h.total_tasks > 0 ? Math.round((h.completed_tasks / h.total_tasks) * 100) : 0}
+                    />
+                    <p className="text-[10px] font-mono text-[var(--hud-text-dim)] mt-1">
+                      {h.completed_tasks}/{h.total_tasks} tasks
+                      {h.current_task ? ` — Current: ${h.current_task}` : ''}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Production Loops */}
+          {detail.loops.length > 0 && (
+            <div>
+              <h2 className="text-sm font-mono text-[var(--hud-text)] mb-2">Auto-Corrective Loops</h2>
+              <div className="space-y-2">
+                {detail.loops.map((l, i) => (
+                  <div
+                    key={i}
+                    className="border border-[var(--hud-border)] rounded p-3 bg-[var(--hud-surface)]"
+                  >
+                    <div className="flex items-center justify-between mb-1">
+                      <span className="text-xs font-mono text-[var(--hud-text)]">{l.deliverable}</span>
+                      <div className="flex items-center gap-2">
+                        <ScoreBadge score={l.last_score} />
+                        <Badge variant={l.status === 'approved' ? 'passed' : l.status === 'escalated' ? 'failed' : 'active'}>
+                          {l.status}
+                        </Badge>
+                      </div>
+                    </div>
+                    <p className="text-[10px] font-mono text-[var(--hud-text-dim)]">
+                      Iteration {l.iteration}/{l.max_iterations}
+                      {l.feedback_categories?.length > 0 && ` — Issues: ${l.feedback_categories.join(', ')}`}
+                    </p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+      </ErrorBoundary>
+    </div>
+  );
+}

package/dashboard/src/app/roadmap/page.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useMemo } from 'react';
+import { useOfferStore } from '@/stores/offer-store';
+import { Badge } from '@/components/ui/badge';
+import { ScoreBadge } from '@/components/ui/score-badge';
+import { ErrorBoundary } from '@/components/ui/error-boundary';
+
+type Priority = 'must' | 'should' | 'could' | 'wont';
+
+const PRIORITY_LABELS: Record<Priority, string> = {
+  must: 'Must Have',
+  should: 'Should Have',
+  could: 'Could Have',
+  wont: "Won't Have",
+};
+
+const PRIORITY_COLORS: Record<Priority, string> = {
+  must: 'border-red-500/30 bg-red-500/5',
+  should: 'border-yellow-500/30 bg-yellow-500/5',
+  could: 'border-blue-500/30 bg-blue-500/5',
+  wont: 'border-[var(--hud-border)] bg-[var(--hud-surface)] opacity-50',
+};
+
+function classifyPriority(offer: { status?: string; phase: string; mecanismo_state: string }): Priority {
+  if (offer.status === 'standby' || offer.status === 'archived') return 'wont';
+  if (offer.mecanismo_state === 'APPROVED' || offer.mecanismo_state === 'VALIDATED') return 'must';
+  if (offer.phase === 'research' || offer.phase === 'briefing') return 'should';
+  return 'could';
+}
+
+export default function RoadmapPage() {
+  const offers = useOfferStore((s) => s.offers);
+
+  const grouped = useMemo(() => {
+    const groups: Record<Priority, typeof offers> = { must: [], should: [], could: [], wont: [] };
+    for (const o of offers) {
+      const priority = classifyPriority(o);
+      groups[priority].push(o);
+    }
+    return groups;
+  }, [offers]);
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-lg font-mono text-[var(--hud-text)]">Roadmap</h1>
+
+      <ErrorBoundary section="Roadmap">
+        <div className="space-y-4">
+          {(Object.keys(PRIORITY_LABELS) as Priority[]).map(priority => {
+            const items = grouped[priority];
+            if (items.length === 0) return null;
+            return (
+              <div key={priority}>
+                <h2 className="text-xs font-mono text-[var(--hud-text-dim)] uppercase tracking-wider mb-2">
+                  {PRIORITY_LABELS[priority]} ({items.length})
+                </h2>
+                <div className="space-y-2">
+                  {items.map(o => (
+                    <div
+                      key={`${o.nicho}/${o.name}`}
+                      className={`border rounded p-3 ${PRIORITY_COLORS[priority]}`}
+                    >
+                      <div className="flex items-center justify-between mb-1">
+                        <div className="flex items-center gap-2">
+                          <span className="text-sm font-mono text-[var(--hud-text)]">{o.name}</span>
+                          <Badge variant="default">{o.nicho}</Badge>
+                        </div>
+                        {o.avg_quality > 0 && <ScoreBadge score={o.avg_quality} />}
+                      </div>
+                      <div className="flex items-center gap-3 text-[10px] font-mono text-[var(--hud-text-dim)]">
+                        <span>Phase: {o.phase}</span>
+                        <span>Mec: {o.mecanismo_state}</span>
+                        {o.deliverables && (
+                          <span>
+                            VSL:{o.deliverables.vsl} LP:{o.deliverables.lp} Ads:{o.deliverables.criativos} Email:{o.deliverables.emails}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </ErrorBoundary>
+
+      <p className="text-[10px] font-mono text-[var(--hud-text-dim)]">
+        {offers.length} offers — Priority based on phase + mecanismo state
+      </p>
+    </div>
+  );
+}

package/dashboard/src/app/settings/page.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import { useSettingsStore } from '@/stores/settings-store';
+
+const INTERVALS = [
+  { label: '5s', value: 5_000 },
+  { label: '10s', value: 10_000 },
+  { label: '30s', value: 30_000 },
+  { label: '1m', value: 60_000 },
+];
+
+export default function SettingsPage() {
+  const {
+    theme, autoRefresh, refreshInterval, showStandbyOffers,
+    setTheme, setAutoRefresh, setRefreshInterval, setShowStandbyOffers,
+  } = useSettingsStore();
+
+  return (
+    <div className="space-y-6 max-w-lg">
+      <h1 className="text-lg font-mono text-[var(--hud-text)]">Settings</h1>
+
+      {/* Theme */}
+      <div className="space-y-2">
+        <label className="text-xs font-mono text-[var(--hud-text-dim)] uppercase tracking-wider">Theme</label>
+        <div className="flex gap-2">
+          {(['dark', 'light', 'system'] as const).map(t => (
+            <button
+              key={t}
+              onClick={() => setTheme(t)}
+              className={`text-xs font-mono px-3 py-1.5 rounded border transition-colors ${
+                theme === t
+                  ? 'border-[var(--hud-accent)] text-[var(--hud-accent)] bg-[var(--hud-accent)]/10'
+                  : 'border-[var(--hud-border)] text-[var(--hud-text-dim)] hover:text-[var(--hud-text)]'
+              }`}
+            >
+              {t.charAt(0).toUpperCase() + t.slice(1)}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Auto Refresh */}
+      <div className="space-y-2">
+        <label className="text-xs font-mono text-[var(--hud-text-dim)] uppercase tracking-wider">Auto Refresh</label>
+        <div className="flex items-center gap-4">
+          <button
+            onClick={() => setAutoRefresh(!autoRefresh)}
+            className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+              autoRefresh ? 'bg-[var(--hud-accent)]' : 'bg-[var(--hud-border)]'
+            }`}
+          >
+            <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform ${
+              autoRefresh ? 'translate-x-4' : 'translate-x-1'
+            }`} />
+          </button>
+          <span className="text-xs font-mono text-[var(--hud-text)]">
+            {autoRefresh ? 'Enabled' : 'Disabled'}
+          </span>
+        </div>
+      </div>
+
+      {/* Refresh Interval */}
+      {autoRefresh && (
+        <div className="space-y-2">
+          <label className="text-xs font-mono text-[var(--hud-text-dim)] uppercase tracking-wider">Refresh Interval</label>
+          <div className="flex gap-2">
+            {INTERVALS.map(({ label, value }) => (
+              <button
+                key={value}
+                onClick={() => setRefreshInterval(value)}
+                className={`text-xs font-mono px-3 py-1.5 rounded border transition-colors ${
+                  refreshInterval === value
+                    ? 'border-[var(--hud-accent)] text-[var(--hud-accent)] bg-[var(--hud-accent)]/10'
+                    : 'border-[var(--hud-border)] text-[var(--hud-text-dim)] hover:text-[var(--hud-text)]'
+                }`}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Show Standby Offers */}
+      <div className="space-y-2">
+        <label className="text-xs font-mono text-[var(--hud-text-dim)] uppercase tracking-wider">Show Standby Offers</label>
+        <div className="flex items-center gap-4">
+          <button
+            onClick={() => setShowStandbyOffers(!showStandbyOffers)}
+            className={`relative inline-flex h-5 w-9 items-center rounded-full transition-colors ${
+              showStandbyOffers ? 'bg-[var(--hud-accent)]' : 'bg-[var(--hud-border)]'
+            }`}
+          >
+            <span className={`inline-block h-3.5 w-3.5 transform rounded-full bg-white transition-transform ${
+              showStandbyOffers ? 'translate-x-4' : 'translate-x-1'
+            }`} />
+          </button>
+          <span className="text-xs font-mono text-[var(--hud-text)]">
+            {showStandbyOffers ? 'Showing all' : 'Active only'}
+          </span>
+        </div>
+      </div>
+
+      {/* Info */}
+      <div className="border-t border-[var(--hud-border)] pt-4 space-y-1">
+        <p className="text-[10px] font-mono text-[var(--hud-text-dim)]">Dashboard Port: 4001</p>
+        <p className="text-[10px] font-mono text-[var(--hud-text-dim)]">Settings persisted in localStorage</p>
+      </div>
+    </div>
+  );
+}

package/dashboard/src/app/squad/page.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import useSWR from 'swr';
+import { apiFetch } from '@/lib/utils';
+import { SquadGrid } from '@/components/squad/SquadGrid';
+import { ExpertDetail } from '@/components/squad/ExpertDetail';
+import { ErrorBoundary } from '@/components/ui/error-boundary';
+import { Search } from 'lucide-react';
+
+interface Expert {
+  id: string;
+  name: string;
+  tier: string;
+  specialties: string[];
+  style: string;
+  avg_quality: number;
+  reviews_count: number;
+}
+
+const TIER_ORDER: Record<string, number> = { '**': 0, '*': 1, '': 2, 'unknown': 3 };
+
+export default function SquadPage() {
+  const { data: experts = [], isLoading } = useSWR<Expert[]>('/squad', apiFetch, {
+    refreshInterval: 120_000,
+  });
+  const [search, setSearch] = useState('');
+  const [tierFilter, setTierFilter] = useState('all');
+  const [selectedExpert, setSelectedExpert] = useState<string | null>(null);
+
+  // Group by tier
+  const tiers = useMemo(() => {
+    const set = new Set(experts.map((e) => e.tier));
+    return ['all', ...Array.from(set).sort((a, b) => (TIER_ORDER[a] ?? 9) - (TIER_ORDER[b] ?? 9))];
+  }, [experts]);
+
+  const filtered = useMemo(() => {
+    return experts
+      .filter((e) => {
+        if (search && !e.name.toLowerCase().includes(search.toLowerCase()) &&
+            !e.specialties.some((s) => s.toLowerCase().includes(search.toLowerCase()))) return false;
+        if (tierFilter !== 'all' && e.tier !== tierFilter) return false;
+        return true;
+      })
+      .sort((a, b) => (TIER_ORDER[a.tier] ?? 9) - (TIER_ORDER[b.tier] ?? 9));
+  }, [experts, search, tierFilter]);
+
+  return (
+    <div className="space-y-4">
+      <h1 className="text-lg font-mono text-[var(--hud-text)]">Copy Squad</h1>
+
+      <div className="flex gap-2">
+        <div className="relative flex-1 max-w-xs">
+          <Search size={14} className="absolute left-2 top-1/2 -translate-y-1/2 text-[var(--hud-text-dim)]" />
+          <input
+            type="text"
+            placeholder="Search expert or specialty..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full text-xs font-mono bg-[var(--hud-surface)] border border-[var(--hud-border)] text-[var(--hud-text)] rounded px-2 py-1.5 pl-7"
+          />
+        </div>
+        <select
+          value={tierFilter}
+          onChange={(e) => setTierFilter(e.target.value)}
+          className="text-xs font-mono bg-[var(--hud-surface)] border border-[var(--hud-border)] text-[var(--hud-text)] rounded px-2 py-1"
+        >
+          {tiers.map((t) => (
+            <option key={t} value={t}>{t === 'all' ? 'All Tiers' : `Tier ${t}`}</option>
+          ))}
+        </select>
+      </div>
+
+      {isLoading ? (
+        <p className="text-xs font-mono text-[var(--hud-text-dim)] animate-pulse">Loading experts...</p>
+      ) : (
+        <ErrorBoundary section="Squad Grid">
+          <SquadGrid
+            experts={filtered}
+            onExpertClick={(id) => setSelectedExpert(selectedExpert === id ? null : id)}
+            selectedExpert={selectedExpert}
+          />
+        </ErrorBoundary>
+      )}
+
+      {/* Expert Detail Inline */}
+      {selectedExpert && (
+        <ErrorBoundary section="Expert Detail">
+          <ExpertDetail
+            expertId={selectedExpert}
+            onClose={() => setSelectedExpert(null)}
+          />
+        </ErrorBoundary>
+      )}
+
+      <p className="text-[10px] font-mono text-[var(--hud-text-dim)]">
+        {experts.length} experts loaded — Click card to expand details
+      </p>
+    </div>
+  );
+}