@polymorphism-tech/morph-spec 8.38.0 → 8.40.0

package/src/dashboard/app/pages/AgentMap.jsx

@@ -1,370 +1,371 @@
-import { useState, useMemo, useCallback } from 'react';
-import { Handle, Position } from '@xyflow/react';
-import dagre from '@dagrejs/dagre';
-import morphData from 'virtual:morph-data';
-import FlowGraph from '../components/FlowGraph.jsx';
-import DetailPanel from '../components/DetailPanel.jsx';
-import SearchFilter from '../components/SearchFilter.jsx';
-import { useDetailPanel } from '../hooks/useDetailPanel.js';
-
-// Domain persona color palette (v5 — flat, no tiers)
-const PERSONA_COLORS = {
-  user:           { bg: '#78350f', border: '#f59e0b', label: 'User' },
-  'dotnet-senior':{ bg: '#991b1b', border: '#ef4444', label: 'Backend' },
-  'ef-modeler':   { bg: '#7c2d12', border: '#fb923c', label: 'Data' },
-  'maf-expert':   { bg: '#1e3a5f', border: '#38bdf8', label: 'Agents' },
-  'nextjs-expert':{ bg: '#064e3b', border: '#34d399', label: 'Frontend' },
-  'ui-designer':  { bg: '#4a1d96', border: '#a78bfa', label: 'Design' },
-  'infra-engineer':{ bg: '#1e3a5f', border: '#60a5fa', label: 'Infra' },
-  'evaluator':    { bg: '#374151', border: '#9ca3af', label: 'Eval' },
-};
-const FALLBACK_PERSONA = { bg: '#1e40af', border: '#3b82f6', label: 'Persona' };
-
-// Custom AgentNode component
-function AgentNode({ data }) {
-  const colors = data.isUser ? PERSONA_COLORS.user : (PERSONA_COLORS[data.personaId] || FALLBACK_PERSONA);
-  return (
-    <div
-      className="rounded-lg px-3 py-2 min-w-[130px] max-w-[160px] cursor-pointer select-none"
-      style={{ background: colors.bg, border: `1.5px solid ${colors.border}`, boxShadow: `0 0 8px ${colors.border}22` }}
-    >
-      <Handle type="target" position={Position.Top} style={{ background: colors.border, width: 8, height: 8 }} />
-      <div className="text-white text-xs font-semibold leading-tight truncate" title={data.label}>
-        {data.label}
-      </div>
-      <div className="text-gray-300 text-[10px] mt-0.5 truncate">
-        {data.isUser ? 'Principal' : `${colors.label} · ${data.domains?.[0] || ''}`}
-      </div>
-      <Handle type="source" position={Position.Bottom} style={{ background: colors.border, width: 8, height: 8 }} />
-    </div>
-  );
-}
-
-const nodeTypes = { agentNode: AgentNode };
-
-// Dagre layout helpers
-function buildLayout(nodes, edges) {
-  const g = new dagre.graphlib.Graph();
-  g.setDefaultEdgeLabel(() => ({}));
-  g.setGraph({ rankdir: 'TB', nodesep: 40, ranksep: 60, marginx: 20, marginy: 20 });
-
-  nodes.forEach((n) => g.setNode(n.id, { width: 160, height: 60 }));
-  edges.forEach((e) => g.setEdge(e.source, e.target));
-
-  dagre.layout(g);
-
-  return nodes.map((n) => {
-    const pos = g.node(n.id);
-    return { ...n, position: { x: pos.x - 80, y: pos.y - 30 } };
-  });
-}
-
-// AgentDetail shown inside the panel
-function AgentDetail({ agent }) {
-  const [showPrompt, setShowPrompt] = useState(false);
-  const personaColors = PERSONA_COLORS[agent.id] || FALLBACK_PERSONA;
-
-  return (
-    <div className="text-sm text-gray-200 space-y-4">
-      {/* Header */}
-      <div>
-        <div className="flex items-center gap-2 mb-1">
-          <span className="px-2 py-0.5 rounded text-xs font-bold" style={{ background: personaColors.bg, color: personaColors.border, border: `1px solid ${personaColors.border}` }}>
-            {personaColors.label}
-          </span>
-          <span className="text-gray-400 text-xs">{agent.domains?.[0] || ''}</span>
-        </div>
-        <p className="text-gray-400 text-xs">ID: <span className="text-gray-300 font-mono">{agent.id}</span></p>
-      </div>
-
-      {/* Active Phases */}
-      {agent.activePhases?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Active Phases</p>
-          <div className="flex flex-wrap gap-1">
-            {agent.activePhases.map((p) => (
-              <span key={p} className="px-2 py-0.5 bg-blue-900/50 border border-blue-700 rounded text-xs text-blue-300">{p}</span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Validators */}
-      {agent.validators?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Validators</p>
-          <div className="flex flex-wrap gap-1">
-            {agent.validators.map((v) => (
-              <span key={v} className="px-2 py-0.5 bg-purple-900/50 border border-purple-700 rounded text-xs text-purple-300">{v}</span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Standards */}
-      {agent.standards?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Standards</p>
-          <ul className="space-y-1">
-            {agent.standards.map((s) => (
-              <li key={s.id} className="flex items-center justify-between text-xs">
-                <span className="font-mono text-gray-300">{s.id}</span>
-                <div className="flex gap-1">
-                  {s.scope && <span className="px-1.5 py-0.5 bg-gray-800 rounded text-gray-400">{s.scope}</span>}
-                  {s.priority && <span className="px-1.5 py-0.5 bg-gray-800 rounded text-gray-400">{s.priority}</span>}
-                </div>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-
-      {/* Domains */}
-      {agent.domains?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Domains</p>
-          <p className="text-gray-300 text-xs">{agent.domains.join(', ')}</p>
-        </div>
-      )}
-
-      {/* Keywords */}
-      {agent.keywords?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Keywords</p>
-          <div className="flex flex-wrap gap-1">
-            {agent.keywords.map((k) => (
-              <span key={k} className="px-1.5 py-0.5 bg-gray-800 border border-gray-700 rounded text-xs text-gray-400">{k}</span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Stacks */}
-      {agent.stacks?.length > 0 && (
-        <div>
-          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Stacks</p>
-          <div className="flex flex-wrap gap-1">
-            {agent.stacks.map((s) => (
-              <span key={s} className="px-1.5 py-0.5 bg-green-900/50 border border-green-700 rounded text-xs text-green-300">{s}</span>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {/* Full Prompt toggle */}
-      {agent.prompt && (
-        <div>
-          <button
-            onClick={() => setShowPrompt((v) => !v)}
-            className="w-full text-left px-3 py-1.5 bg-gray-800 hover:bg-gray-700 border border-gray-700 rounded text-xs text-gray-300 transition-colors"
-          >
-            {showPrompt ? 'Hide Full Prompt' : 'Show Full Prompt'}
-          </button>
-          {showPrompt && (
-            <pre className="mt-2 p-3 bg-gray-950 border border-gray-800 rounded text-[10px] text-gray-400 overflow-x-auto whitespace-pre-wrap font-mono leading-relaxed max-h-64 overflow-y-auto">
-              {agent.prompt}
-            </pre>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-export default function AgentMap() {
-  const { agents } = morphData;
-  const [search, setSearch] = useState('');
-  const [domainFilter, setDomainFilter] = useState('');
-  const [groupFilter, setGroupFilter] = useState('');
-  const [phaseFilter, setPhaseFilter] = useState('');
-  const [stackFilter, setStackFilter] = useState('');
-  const { panel, openPanel, closePanel } = useDetailPanel();
-
-  // Derive unique groups, tiers, phases, and stacks for filters
-  const allGroups = useMemo(() => [...new Set(agents.list.map((a) => a.domains?.[0]).filter(Boolean))].sort(), [agents.list]);
-  const allDomains = useMemo(() => [...new Set(agents.list.flatMap((a) => a.domains || []))].sort(), [agents.list]);
-  const allPhases = useMemo(() => {
-    const phases = new Set();
-    for (const a of agents.list) {
-      for (const p of a.activePhases || []) {
-        if (p !== '*') phases.add(p);
-      }
-    }
-    return [...phases].sort();
-  }, [agents.list]);
-  const allStacks = useMemo(() => {
-    const stacks = new Set();
-    for (const a of agents.list) {
-      for (const s of a.stacks || []) {
-        stacks.add(s);
-      }
-    }
-    return [...stacks].sort();
-  }, [agents.list]);
-
-  // Filtered agent ids (for highlight — we always show all nodes but dim non-matching)
-  const matchedIds = useMemo(() => {
-    const q = search.toLowerCase();
-    return new Set(
-      agents.list
-        .filter((a) => {
-          const matchesSearch = !q || a.title.toLowerCase().includes(q) || a.id.toLowerCase().includes(q) || a.keywords?.some((k) => k.toLowerCase().includes(q));
-          const matchesDomain = !domainFilter || (a.domains || []).includes(domainFilter);
-          const matchesGroup = !groupFilter || (a.domains || []).includes(groupFilter);
-          const matchesPhase = !phaseFilter || (a.activePhases || []).includes('*') || (a.activePhases || []).includes(phaseFilter);
-          const matchesStack = !stackFilter || (a.stacks || []).includes(stackFilter);
-          return matchesSearch && matchesDomain && matchesGroup && matchesPhase && matchesStack;
-        })
-        .map((a) => a.id)
-    );
-  }, [agents.list, search, tierFilter, groupFilter, phaseFilter, stackFilter]);
-
-  const hasFilter = search || domainFilter || groupFilter || phaseFilter || stackFilter;
-
-  // Build React Flow nodes and edges
-  const { nodes: layoutNodes, edges } = useMemo(() => {
-    const rawNodes = [];
-    const rawEdges = [];
-
-    // User node at top
-    rawNodes.push({
-      id: '__user__',
-      type: 'agentNode',
-      data: { label: 'User', isUser: true, color: '#78350f' },
-      position: { x: 0, y: 0 },
-    });
-
-    // Agent nodes
-    for (const agent of agents.list) {
-      const dimmed = hasFilter && !matchedIds.has(agent.id);
-      const personaColors = PERSONA_COLORS[agent.id] || FALLBACK_PERSONA;
-      rawNodes.push({
-        id: agent.id,
-        type: 'agentNode',
-        data: {
-          label: agent.title,
-          personaId: agent.id,
-          domains: agent.domains,
-          color: personaColors.border,
-          agentRef: agent,
-        },
-        style: dimmed ? { opacity: 0.2 } : {},
-        position: { x: 0, y: 0 },
-      });
-    }
-
-    // user → agent edges (flat — no hierarchy in v5)
-    for (const agent of agents.list) {
-      const personaColors = PERSONA_COLORS[agent.id] || FALLBACK_PERSONA;
-      rawEdges.push({
-        id: `rt-${agent.id}`,
-        source: '__user__',
-        target: agent.id,
-        type: 'smoothstep',
-        style: { stroke: personaColors.border, strokeWidth: 1.5 },
-        animated: false,
-      });
-    }
-
-    // validators edges (dashed purple) — Tier 4 validator agent → validated agent
-    // agent.validators contains runner names like "architecture", "design-system", "nextjs-component"
-    // which map to Tier 4 agent IDs like "architecture-expert", "design-system-validator", etc.
-    // Match by finding the Tier 4 agent whose ID contains the validator runner name.
-    const tier4Agents = agents.list.filter((a) => a.tier === 4);
-    for (const agent of agents.list) {
-      for (const v of agent.validators || []) {
-        const validatorAgent = tier4Agents.find((a) => a.id.includes(v));
-        if (validatorAgent) {
-          rawEdges.push({
-            id: `val-${validatorAgent.id}-${agent.id}`,
-            source: validatorAgent.id,
-            target: agent.id,
-            type: 'smoothstep',
-            style: { stroke: '#8b5cf6', strokeWidth: 1, strokeDasharray: '4 3' },
-            animated: false,
-          });
-        }
-      }
-    }
-
-    const layouted = buildLayout(rawNodes, rawEdges);
-    return { nodes: layouted, edges: rawEdges };
-  }, [agents.list, matchedIds, hasFilter]);
-
-  const handleNodeClick = useCallback(
-    (_event, node) => {
-      if (node.id === '__user__') {
-        openPanel('User (Principal)', <div className="text-gray-400 text-sm">The human operator. All Tier 1 orchestrators report to this node.</div>);
-        return;
-      }
-      const agent = node.data.agentRef;
-      if (agent) {
-        openPanel(agent.title, <AgentDetail agent={agent} />);
-      }
-    },
-    [openPanel]
-  );
-
-  const filterConfig = [
-    { name: 'tier', label: 'Tier', options: allTiers, value: tierFilter },
-    { name: 'group', label: 'Group', options: allGroups, value: groupFilter },
-    { name: 'phase', label: 'Phase', options: allPhases, value: phaseFilter },
-    { name: 'stack', label: 'Stack', options: allStacks, value: stackFilter },
-  ];
-
-  return (
-    <div className="flex flex-col h-full">
-      <SearchFilter
-        placeholder="Search agents by name or keyword..."
-        filters={filterConfig}
-        onSearchChange={setSearch}
-        onFilterChange={(name, value) => {
-          if (name === 'tier') setTierFilter(value);
-          if (name === 'group') setGroupFilter(value);
-          if (name === 'phase') setPhaseFilter(value);
-          if (name === 'stack') setStackFilter(value);
-        }}
-      />
-
-      <div className="flex-1 relative">
-        <FlowGraph
-          nodes={layoutNodes}
-          edges={edges}
-          nodeTypes={nodeTypes}
-          onNodeClick={handleNodeClick}
-          fitView
-        />
-
-        {/* Legend */}
-        <div className="absolute top-3 left-3 bg-gray-900/90 border border-gray-700 rounded-lg p-3 text-xs space-y-1.5 z-10">
-          <p className="text-gray-400 font-semibold uppercase tracking-wide text-[10px] mb-2">Legend</p>
-          {Object.entries(TIER_COLORS).map(([key, c]) => (
-            <div key={key} className="flex items-center gap-2">
-              <span className="inline-block w-3 h-3 rounded-sm flex-shrink-0" style={{ background: c.bg, border: `1px solid ${c.border}` }} />
-              <span className="text-gray-300">{key === 'user' ? 'User' : `Tier ${key} — ${c.label}`}</span>
-            </div>
-          ))}
-          <div className="border-t border-gray-700 mt-2 pt-2 space-y-1">
-            <div className="flex items-center gap-2">
-              <span className="inline-block w-6 border-t-2 border-blue-400" />
-              <span className="text-gray-400">reports_to</span>
-            </div>
-            <div className="flex items-center gap-2">
-              <span className="inline-block w-6 border-t-2 border-purple-400 border-dashed" />
-              <span className="text-gray-400">validates</span>
-            </div>
-          </div>
-        </div>
-
-        {/* Agent count badge */}
-        <div className="absolute top-3 right-3 bg-gray-900/90 border border-gray-700 rounded-lg px-3 py-1.5 text-xs text-gray-400 z-10">
-          {hasFilter ? `${matchedIds.size} / ${agents.list.length}` : agents.list.length} agents
-        </div>
-      </div>
-
-      <DetailPanel open={panel.open} title={panel.title} onClose={closePanel}>
-        {panel.content}
-      </DetailPanel>
-    </div>
-  );
-}
+import { useState, useMemo, useCallback } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import dagre from '@dagrejs/dagre';
+import { UserCircle, Robot } from '@phosphor-icons/react';
+import morphData from 'virtual:morph-data';
+import FlowGraph from '../components/FlowGraph.jsx';
+import DetailPanel from '../components/DetailPanel.jsx';
+import SearchFilter from '../components/SearchFilter.jsx';
+import Markdown from '../components/Markdown.jsx';
+import EntityLink, { useSelection } from '../components/EntityLink.jsx';
+import { phaseMeta } from '../lib/phases.js';
+
+/**
+ * `agents.json → color` is a color NAME (blue, cyan…), the one Claude Code
+ * paints the sub-agent with. The map reads the same name, so a persona looks
+ * the same here and in the terminal.
+ */
+const COLOR_HEX = {
+  blue: '#60a5fa',
+  cyan: '#22d3ee',
+  purple: '#a78bfa',
+  green: '#34d399',
+  magenta: '#f472b6',
+  yellow: '#fbbf24',
+  red: '#f87171',
+  gray: '#9ca3af',
+  orange: '#fb923c',
+  pink: '#f472b6',
+};
+const FALLBACK_HEX = '#9ca3af';
+
+/** The ONE color lookup: nodes, edges, detail badge and legend all read it. */
+const personaColor = (agent) => COLOR_HEX[agent?.color] || FALLBACK_HEX;
+
+/** `'*'` in a persona's `stack` means "every stack" — it is not a stack of its own. */
+const UNIVERSAL_STACK = '*';
+
+/** The node of the human + main thread. Never a persona id. */
+const PRINCIPAL_ID = 'principal';
+
+const NODE_W = 220;
+const NODE_H = 64;
+
+function AgentNode({ data }) {
+  const color = data.color;
+  const Icon = data.isUser ? UserCircle : Robot;
+  return (
+    <div
+      className="fluid flex cursor-pointer select-none items-start gap-2.5 rounded-xl bg-[var(--color-raised)] px-3.5 py-2.5 transition-shadow hover:shadow-[0_0_0_1px_var(--color-hair-strong)]"
+      style={{
+        width: NODE_W,
+        boxShadow: data.selected ? `0 0 0 2px ${color}` : `inset 0 0 0 1px var(--color-hair)`,
+        borderLeft: `3px solid ${color}`,
+      }}
+    >
+      <Handle type="target" position={Position.Top} style={{ background: color, width: 7, height: 7, border: 0 }} />
+      <Icon weight="light" size={18} className="mt-0.5 shrink-0" style={{ color }} />
+      <div className="min-w-0">
+        <div className="text-[13px] font-semibold leading-snug text-[var(--color-fg)]" title={data.label}>
+          {data.label}
+        </div>
+        <div className="mt-0.5 truncate text-[12px] text-[var(--color-dim)]">{data.sub}</div>
+      </div>
+      <Handle type="source" position={Position.Bottom} style={{ background: color, width: 7, height: 7, border: 0 }} />
+    </div>
+  );
+}
+
+const nodeTypes = { agentNode: AgentNode };
+
+function buildLayout(nodes, edges) {
+  const g = new dagre.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  g.setGraph({ rankdir: 'TB', nodesep: 28, ranksep: 80, marginx: 20, marginy: 20 });
+  nodes.forEach((n) => g.setNode(n.id, { width: NODE_W, height: NODE_H }));
+  edges.forEach((e) => g.setEdge(e.source, e.target));
+  dagre.layout(g);
+  return nodes.map((n) => {
+    const pos = g.node(n.id);
+    return { ...n, position: { x: pos.x - NODE_W / 2, y: pos.y - NODE_H / 2 } };
+  });
+}
+
+/** Skills whose dispatch lines name this persona, or dispatch any implementer. */
+function dispatchingSkills(agent) {
+  const implementer = (agent.activePhases || []).includes('implement');
+  return (morphData.skills || []).filter((s) => (s.dispatches || []).some(
+    (d) => (d.personas || []).includes(agent.id) || (d.generic && implementer),
+  ));
+}
+
+function toolsText(tools) {
+  if (!tools || (Array.isArray(tools) && tools.length === 0)) return 'todas as da sessão (herda)';
+  return Array.isArray(tools) ? tools.join(', ') : String(tools);
+}
+
+function Section({ title, children }) {
+  return (
+    <section>
+      <h3 className="mb-2 text-xs font-medium text-[var(--color-faint)]">{title}</h3>
+      {children}
+    </section>
+  );
+}
+
+function Chip({ children, mono = false }) {
+  return (
+    <span className={`inline-flex items-center rounded-full px-2 py-0.5 text-[12px] text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)] ${mono ? 'font-mono' : ''}`}>
+      {children}
+    </span>
+  );
+}
+
+// Exported for the render smoke test: no page state, only the persona.
+export function AgentDetail({ agent }) {
+  const [tab, setTab] = useState('persona');
+  const color = personaColor(agent);
+  const stack = agent.stack || [];
+  const universal = stack.includes(UNIVERSAL_STACK);
+  const skills = dispatchingSkills(agent);
+  const standardName = (id) => (morphData.standards?.list || []).find((s) => s.id === id)?.name;
+
+  const facts = [
+    ['Modelo', agent.model || 'herda da sessão'],
+    ['Limite de turnos', agent.maxTurns != null ? String(agent.maxTurns) : 'sem limite declarado'],
+    ['Ferramentas', toolsText(agent.tools)],
+    ['Stack', universal ? 'universal (todas as stacks)' : (stack.join(', ') || '—')],
+  ];
+
+  return (
+    <div className="space-y-6 text-sm text-[var(--color-fg)]">
+      <div className="flex flex-wrap items-center gap-2">
+        <span className="inline-block h-2.5 w-2.5 rounded-full" style={{ background: color }} />
+        <span className="font-mono text-[12px] text-[var(--color-dim)]">morph-{agent.id}</span>
+        {(agent.domains || []).map((d) => <Chip key={d}>{d}</Chip>)}
+      </div>
+
+      <dl className="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5 rounded-xl bg-white/[0.03] px-4 py-3 shadow-[inset_0_0_0_1px_var(--color-hair)]">
+        {facts.map(([k, v]) => (
+          <div key={k} className="contents">
+            <dt className="text-xs leading-6 text-[var(--color-faint)]">{k}</dt>
+            <dd className="leading-6 text-[var(--color-dim)]">{v}</dd>
+          </div>
+        ))}
+      </dl>
+
+      <Section title="Fases em que trabalha">
+        {agent.activePhases?.length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {agent.activePhases.map((p) => (
+              <EntityLink key={p} kind="phase" id={p} chip>{phaseMeta(p).label}</EntityLink>
+            ))}
+          </div>
+        ) : (
+          <p className="text-[var(--color-dim)]">Nenhuma skill de fase despacha esta persona.</p>
+        )}
+      </Section>
+
+      <Section title="Despachada por">
+        {skills.length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {skills.map((s) => <EntityLink key={s.id} kind="skill" id={s.id} chip>{s.id}</EntityLink>)}
+          </div>
+        ) : (
+          <p className="text-[var(--color-dim)]">Nenhuma skill a despacha pelo nome.</p>
+        )}
+      </Section>
+
+      {agent.mcp?.length > 0 && (
+        <Section title="Servidores MCP">
+          <div className="flex flex-wrap gap-2">
+            {agent.mcp.map((m) => <Chip key={String(m)} mono>{String(m)}</Chip>)}
+          </div>
+        </Section>
+      )}
+
+      {agent.standards?.length > 0 && (
+        <Section title={`Standards que segue (${agent.standards.length})`}>
+          <div className="flex flex-wrap gap-2">
+            {agent.standards.map((id) => (
+              <EntityLink key={id} kind="standard" id={id} chip title={standardName(id)}>{id}</EntityLink>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {agent.keywords?.length > 0 && (
+        <Section title="Palavras-chave">
+          <div className="flex flex-wrap gap-1.5">
+            {agent.keywords.map((k) => <Chip key={k}>{k}</Chip>)}
+          </div>
+        </Section>
+      )}
+
+      <section>
+        <div role="tablist" className="mb-3 inline-flex rounded-full bg-white/[0.04] p-1 shadow-[inset_0_0_0_1px_var(--color-hair)]">
+          {[['persona', 'Persona'], ['prompt', 'Prompt gerado']].map(([id, label]) => (
+            <button
+              key={id}
+              type="button"
+              role="tab"
+              aria-selected={tab === id}
+              onClick={() => setTab(id)}
+              className={`fluid rounded-full px-3 py-1 text-[13px] transition-colors ${tab === id ? 'bg-white/[0.1] text-[var(--color-fg)]' : 'text-[var(--color-dim)] hover:text-[var(--color-fg)]'}`}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+        {tab === 'persona' ? (
+          agent.persona
+            ? <Markdown text={agent.persona} size="sm" />
+            : <p className="text-[var(--color-dim)]">Esta persona não tem texto de persona.</p>
+        ) : (
+          <>
+            <p className="mb-3 text-[13px] text-[var(--color-dim)]">
+              É o arquivo <code className="font-mono">.claude/agents/morph-{agent.id}.md</code> exatamente como o sub-agent o recebe.
+            </p>
+            {agent.prompt
+              ? <Markdown text={agent.prompt} size="sm" />
+              : <p className="text-[var(--color-dim)]">O prompt não foi gerado.</p>}
+          </>
+        )}
+      </section>
+    </div>
+  );
+}
+
+function PrincipalDetail() {
+  return (
+    <div className="space-y-3 text-sm text-[var(--color-dim)]">
+      <p>
+        Você conversa com a thread principal do Claude Code, que faz o papel de orquestrador. É ela que
+        despacha cada persona como sub-agent, com o prompt gerado de cada uma.
+      </p>
+      <p>As personas são planas: nenhuma manda na outra, e todas respondem à thread principal.</p>
+    </div>
+  );
+}
+
+export default function AgentMap() {
+  const { agents } = morphData;
+  const [search, setSearch] = useState('');
+  const [domainFilter, setDomainFilter] = useState('');
+  const [phaseFilter, setPhaseFilter] = useState('');
+  const [stackFilter, setStackFilter] = useState('');
+  const [sel, setSel] = useSelection();
+
+  const allDomains = useMemo(() => [...new Set(agents.list.flatMap((a) => a.domains || []))].sort(), [agents.list]);
+  const allPhases = useMemo(() => {
+    const phases = new Set(agents.list.flatMap((a) => a.activePhases || []));
+    // Pipeline order, not alphabetical.
+    return morphData.phases.list.map((p) => p.id).filter((id) => phases.has(id));
+  }, [agents.list]);
+  const allStacks = useMemo(() => {
+    const stacks = new Set(agents.list.flatMap((a) => a.stack || []));
+    stacks.delete(UNIVERSAL_STACK);
+    return [...stacks].sort();
+  }, [agents.list]);
+
+  const matchedIds = useMemo(() => {
+    const q = search.toLowerCase();
+    return new Set(agents.list.filter((a) => {
+      const matchesSearch = !q || a.title.toLowerCase().includes(q) || a.id.toLowerCase().includes(q) || a.keywords?.some((k) => k.toLowerCase().includes(q));
+      const matchesDomain = !domainFilter || (a.domains || []).includes(domainFilter);
+      const matchesPhase = !phaseFilter || (a.activePhases || []).includes(phaseFilter);
+      const matchesStack = !stackFilter || (a.stack || []).includes(UNIVERSAL_STACK) || (a.stack || []).includes(stackFilter);
+      return matchesSearch && matchesDomain && matchesPhase && matchesStack;
+    }).map((a) => a.id));
+  }, [agents.list, search, domainFilter, phaseFilter, stackFilter]);
+
+  const hasFilter = Boolean(search || domainFilter || phaseFilter || stackFilter);
+
+  const { nodes, edges } = useMemo(() => {
+    const rawNodes = [{
+      id: PRINCIPAL_ID,
+      type: 'agentNode',
+      data: { label: 'Você e a thread principal', sub: 'orquestra e despacha', isUser: true, color: 'var(--color-phase-proposal)', selected: sel === PRINCIPAL_ID },
+      position: { x: 0, y: 0 },
+    }];
+    const rawEdges = [];
+    for (const agent of agents.list) {
+      const dimmed = hasFilter && !matchedIds.has(agent.id);
+      const color = personaColor(agent);
+      rawNodes.push({
+        id: agent.id,
+        type: 'agentNode',
+        data: {
+          label: agent.title,
+          sub: [agent.domains?.[0], agent.model].filter(Boolean).join(' · '),
+          color,
+          selected: sel === agent.id,
+        },
+        style: dimmed ? { opacity: 0.25 } : {},
+        position: { x: 0, y: 0 },
+      });
+      rawEdges.push({
+        id: `rt-${agent.id}`,
+        source: PRINCIPAL_ID,
+        target: agent.id,
+        type: 'smoothstep',
+        style: { stroke: color, strokeWidth: 1.5, opacity: dimmed ? 0.25 : 0.7 },
+      });
+    }
+    return { nodes: buildLayout(rawNodes, rawEdges), edges: rawEdges };
+  }, [agents.list, matchedIds, hasFilter, sel]);
+
+  const handleNodeClick = useCallback((_event, node) => setSel(node.id), [setSel]);
+  const close = useCallback(() => setSel(null), [setSel]);
+
+  const selected = agents.list.find((a) => a.id === sel) || null;
+  const isPrincipal = sel === PRINCIPAL_ID;
+  const panelOpen = Boolean(selected || isPrincipal);
+
+  const filterConfig = [
+    { name: 'domain', label: 'Domínio', options: allDomains, value: domainFilter },
+    { name: 'phase', label: 'Fase', options: allPhases, value: phaseFilter },
+    { name: 'stack', label: 'Stack', options: allStacks, value: stackFilter },
+  ];
+
+  return (
+    <div className="flex h-full flex-col">
+      <SearchFilter
+        placeholder="Buscar persona por nome ou palavra-chave"
+        filters={filterConfig}
+        onSearchChange={setSearch}
+        onFilterChange={(name, value) => {
+          if (name === 'domain') setDomainFilter(value);
+          if (name === 'phase') setPhaseFilter(value);
+          if (name === 'stack') setStackFilter(value);
+        }}
+      />
+
+      <div className="relative flex-1">
+        <FlowGraph nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodeClick={handleNodeClick} fitView />
+
+        <div className="bezel absolute left-3 top-3 z-10 max-w-[18rem]">
+          <div className="bezel-core space-y-1.5 px-3.5 py-3 text-[12px]">
+            <p className="mb-1 font-medium text-[var(--color-faint)]">Personas</p>
+            {agents.list.map((a) => (
+              <button
+                key={a.id}
+                type="button"
+                onClick={() => setSel(a.id)}
+                className="fluid flex w-full items-center gap-2 text-left text-[var(--color-dim)] transition-colors hover:text-[var(--color-fg)]"
+              >
+                <span className="inline-block h-2.5 w-2.5 shrink-0 rounded-full" style={{ background: personaColor(a) }} />
+                <span className="truncate">{a.title}</span>
+              </button>
+            ))}
+            <p className="mt-2 border-t border-[var(--color-hair)] pt-2 text-[var(--color-faint)]">A linha liga quem despacha a quem é despachado.</p>
+          </div>
+        </div>
+
+        <div className="absolute right-3 top-3 z-10 rounded-full bg-[var(--color-ink)]/80 px-3 py-1.5 text-[12px] text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)]">
+          {hasFilter ? `${matchedIds.size} de ${agents.list.length}` : agents.list.length} personas
+        </div>
+      </div>
+
+      <DetailPanel
+        open={panelOpen}
+        title={selected ? selected.title : isPrincipal ? 'Você e a thread principal' : ''}
+        subtitle={selected ? `morph-${selected.id}` : isPrincipal ? 'Orquestrador' : undefined}
+        onClose={close}
+      >
+        {selected && <AgentDetail key={selected.id} agent={selected} />}
+        {isPrincipal && <PrincipalDetail />}
+      </DetailPanel>
+    </div>
+  );
+}