@polymorphism-tech/morph-spec 4.19.0 → 4.21.0

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

@@ -0,0 +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';
+
+// Tier color palette: bg color, border color
+const TIER_COLORS = {
+  user: { bg: '#78350f', border: '#f59e0b', label: 'User' },
+  1:    { bg: '#991b1b', border: '#ef4444', label: 'T1' },
+  2:    { bg: '#9a3412', border: '#f97316', label: 'T2' },
+  3:    { bg: '#1e40af', border: '#3b82f6', label: 'T3' },
+  4:    { bg: '#6d28d9', border: '#8b5cf6', label: 'T4' },
+};
+
+// Custom AgentNode component
+function AgentNode({ data }) {
+  const colors = data.isUser ? TIER_COLORS.user : (TIER_COLORS[data.tier] || TIER_COLORS[4]);
+  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.group || ''}`}
+      </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 tierColors = TIER_COLORS[agent.tier] || TIER_COLORS[4];
+
+  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: tierColors.bg, color: tierColors.border, border: `1px solid ${tierColors.border}` }}>
+            Tier {agent.tier}
+          </span>
+          <span className="text-gray-400 text-xs">{agent.group}</span>
+        </div>
+        <p className="text-gray-400 text-xs">ID: <span className="text-gray-300 font-mono">{agent.id}</span></p>
+        {agent.reportsTo && (
+          <p className="text-gray-400 text-xs mt-0.5">Reports to: <span className="text-blue-300 font-mono">{agent.reportsTo}</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 [tierFilter, setTierFilter] = 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.group).filter(Boolean))].sort(), [agents.list]);
+  const allTiers = useMemo(() => [...new Set(agents.list.map((a) => String(a.tier)))].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 matchesTier = !tierFilter || String(a.tier) === tierFilter;
+          const matchesGroup = !groupFilter || a.group === groupFilter;
+          const matchesPhase = !phaseFilter || (a.activePhases || []).includes('*') || (a.activePhases || []).includes(phaseFilter);
+          const matchesStack = !stackFilter || (a.stacks || []).includes(stackFilter);
+          return matchesSearch && matchesTier && matchesGroup && matchesPhase && matchesStack;
+        })
+        .map((a) => a.id)
+    );
+  }, [agents.list, search, tierFilter, groupFilter, phaseFilter, stackFilter]);
+
+  const hasFilter = search || tierFilter || 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 tierColors = TIER_COLORS[agent.tier] || TIER_COLORS[4];
+      rawNodes.push({
+        id: agent.id,
+        type: 'agentNode',
+        data: {
+          label: agent.title,
+          tier: agent.tier,
+          group: agent.group,
+          color: tierColors.border,
+          agentRef: agent,
+        },
+        style: dimmed ? { opacity: 0.2 } : {},
+        position: { x: 0, y: 0 },
+      });
+    }
+
+    // reports_to edges (solid, tier-colored)
+    for (const agent of agents.list) {
+      const source = agent.reportsTo === 'user' ? '__user__' : agent.reportsTo;
+      if (!source) continue;
+      const tierColors = TIER_COLORS[agent.tier] || TIER_COLORS[4];
+      rawEdges.push({
+        id: `rt-${agent.id}`,
+        source,
+        target: agent.id,
+        type: 'smoothstep',
+        style: { stroke: tierColors.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>
+  );
+}