@polymorphism-tech/morph-spec 4.19.0 → 4.20.0

package/src/commands/dashboard/dashboard.js

@@ -0,0 +1,53 @@
+import { spawn } from 'child_process';
+import { existsSync } from 'fs';
+import { resolve, dirname } from 'path';
+import { fileURLToPath } from 'url';
+import chalk from 'chalk';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+export async function dashboardCommand(options = {}) {
+  const port = options.port || '3200';
+  const dashboardDir = resolve(__dirname, '..', '..', 'dashboard');
+  const nodeModules = resolve(dashboardDir, 'node_modules');
+
+  // Check if dashboard dependencies are installed
+  if (!existsSync(nodeModules)) {
+    console.log(chalk.yellow('Installing dashboard dependencies...'));
+    const install = spawn('npm', ['install'], {
+      cwd: dashboardDir,
+      stdio: 'inherit',
+      shell: true,
+    });
+    await new Promise((res, rej) => {
+      install.on('close', (code) => (code === 0 ? res() : rej(new Error(`npm install failed with code ${code}`))));
+    });
+  }
+
+  console.log(chalk.cyan(`\n  Starting morph-spec dashboard at http://localhost:${port}\n`));
+
+  const env = {
+    ...process.env,
+    MORPH_PROJECT_DIR: process.cwd(),
+  };
+
+  const viteArgs = ['vite', '--port', port];
+  if (options.open !== false) viteArgs.push('--open');
+
+  const vite = spawn('npx', viteArgs, {
+    cwd: dashboardDir,
+    stdio: 'inherit',
+    shell: true,
+    env,
+  });
+
+  vite.on('error', (err) => {
+    console.error(chalk.red(`Failed to start dashboard: ${err.message}`));
+    process.exit(1);
+  });
+
+  process.on('SIGINT', () => {
+    vite.kill();
+    process.exit(0);
+  });
+}

package/src/dashboard/app/App.jsx

@@ -0,0 +1,31 @@
+import { Routes, Route, Navigate } from 'react-router-dom';
+import Sidebar from './components/Sidebar.jsx';
+import AgentMap from './pages/AgentMap.jsx';
+import PhasePipeline from './pages/PhasePipeline.jsx';
+import HookInspector from './pages/HookInspector.jsx';
+import SkillsLibrary from './pages/SkillsLibrary.jsx';
+import RulesMap from './pages/RulesMap.jsx';
+import Standards from './pages/Standards.jsx';
+import Workflows from './pages/Workflows.jsx';
+import LiveState from './pages/LiveState.jsx';
+
+export default function App() {
+  return (
+    <div className="flex h-screen bg-gray-950 text-gray-100 overflow-hidden">
+      <Sidebar />
+      <main className="flex-1 overflow-auto">
+        <Routes>
+          <Route path="/" element={<Navigate to="/agents" replace />} />
+          <Route path="/agents" element={<AgentMap />} />
+          <Route path="/phases" element={<PhasePipeline />} />
+          <Route path="/hooks" element={<HookInspector />} />
+          <Route path="/skills" element={<SkillsLibrary />} />
+          <Route path="/rules" element={<RulesMap />} />
+          <Route path="/standards" element={<Standards />} />
+          <Route path="/workflows" element={<Workflows />} />
+          <Route path="/state" element={<LiveState />} />
+        </Routes>
+      </main>
+    </div>
+  );
+}

package/src/dashboard/app/components/DetailPanel.jsx

@@ -0,0 +1,11 @@
+export default function DetailPanel({ open, title, onClose, children }) {
+  return (
+    <div className={`fixed top-0 right-0 h-full w-96 bg-gray-900 border-l border-gray-700 shadow-2xl transform transition-transform duration-200 ease-in-out z-50 ${open ? 'translate-x-0' : 'translate-x-full'}`}>
+      <div className="flex items-center justify-between p-4 border-b border-gray-700">
+        <h2 className="text-white font-semibold text-lg truncate">{title}</h2>
+        <button onClick={onClose} className="text-gray-400 hover:text-white text-xl leading-none">×</button>
+      </div>
+      <div className="p-4 overflow-y-auto h-[calc(100%-57px)]">{children}</div>
+    </div>
+  );
+}

package/src/dashboard/app/components/FlowGraph.jsx

@@ -0,0 +1,17 @@
+import { ReactFlow, Controls, MiniMap, Background } from '@xyflow/react';
+
+export default function FlowGraph({ nodes, edges, nodeTypes, onNodeClick, fitView = true, className = '' }) {
+  return (
+    <div className={`w-full h-full ${className}`} style={{ minHeight: '500px' }}>
+      <ReactFlow
+        nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodeClick={onNodeClick}
+        fitView={fitView} proOptions={{ hideAttribution: true }}
+        defaultEdgeOptions={{ type: 'smoothstep', animated: false, style: { stroke: '#475569', strokeWidth: 1.5 } }}
+      >
+        <Background color="#1e293b" gap={20} />
+        <Controls position="bottom-right" />
+        <MiniMap nodeColor={(node) => node.data?.color || '#475569'} maskColor="rgba(0, 0, 0, 0.7)" position="bottom-left" />
+      </ReactFlow>
+    </div>
+  );
+}

package/src/dashboard/app/components/SearchFilter.jsx

@@ -0,0 +1,22 @@
+import { useState } from 'react';
+
+export default function SearchFilter({ placeholder = 'Search...', filters = [], onSearchChange, onFilterChange }) {
+  const [search, setSearch] = useState('');
+  function handleSearchChange(e) {
+    setSearch(e.target.value);
+    onSearchChange?.(e.target.value);
+  }
+  return (
+    <div className="flex items-center gap-3 p-3 bg-gray-900 border-b border-gray-800">
+      <input type="text" value={search} onChange={handleSearchChange} placeholder={placeholder}
+        className="flex-1 bg-gray-800 border border-gray-700 rounded-md px-3 py-1.5 text-sm text-gray-100 placeholder-gray-500 focus:outline-none focus:border-blue-500" />
+      {filters.map(({ name, label, options, value }) => (
+        <select key={name} value={value} onChange={(e) => onFilterChange?.(name, e.target.value)}
+          className="bg-gray-800 border border-gray-700 rounded-md px-2 py-1.5 text-sm text-gray-300 focus:outline-none focus:border-blue-500">
+          <option value="">{label}: All</option>
+          {options.map((opt) => (<option key={opt} value={opt}>{opt}</option>))}
+        </select>
+      ))}
+    </div>
+  );
+}

package/src/dashboard/app/components/Sidebar.jsx

@@ -0,0 +1,45 @@
+import { NavLink } from 'react-router-dom';
+
+const NAV_ITEMS = [
+  { to: '/agents', label: 'Agent Map', icon: '🗺️' },
+  { to: '/phases', label: 'Phases', icon: '⚡' },
+  { to: '/hooks', label: 'Hooks', icon: '🔗' },
+  { to: '/skills', label: 'Skills', icon: '🧩' },
+  { to: '/rules', label: 'Rules', icon: '📏' },
+  { to: '/standards', label: 'Standards', icon: '📋' },
+  { to: '/workflows', label: 'Workflows', icon: '🔄' },
+  { to: '/state', label: 'Live State', icon: '📊' },
+];
+
+export default function Sidebar() {
+  return (
+    <nav className="w-52 flex-shrink-0 bg-gray-900 border-r border-gray-800 flex flex-col">
+      <div className="px-4 py-4 border-b border-gray-800">
+        <h1 className="text-sm font-semibold text-gray-300 tracking-wide uppercase">
+          morph-spec
+        </h1>
+        <p className="text-xs text-gray-500 mt-0.5">Dashboard</p>
+      </div>
+      <ul className="flex-1 py-2">
+        {NAV_ITEMS.map(({ to, label, icon }) => (
+          <li key={to}>
+            <NavLink
+              to={to}
+              className={({ isActive }) =>
+                [
+                  'flex items-center gap-2.5 px-4 py-2 text-sm transition-colors',
+                  isActive
+                    ? 'bg-blue-900/40 border-r-2 border-blue-500 text-blue-300'
+                    : 'text-gray-400 hover:bg-gray-800 hover:text-gray-200',
+                ].join(' ')
+              }
+            >
+              <span className="text-base leading-none">{icon}</span>
+              <span>{label}</span>
+            </NavLink>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/src/dashboard/app/hooks/useDetailPanel.js

@@ -0,0 +1,15 @@
+import { useState, useCallback } from 'react';
+
+export function useDetailPanel() {
+  const [panel, setPanel] = useState({ open: false, title: '', content: null });
+
+  const openPanel = useCallback((title, content) => {
+    setPanel({ open: true, title, content });
+  }, []);
+
+  const closePanel = useCallback(() => {
+    setPanel((prev) => ({ ...prev, open: false }));
+  }, []);
+
+  return { panel, openPanel, closePanel };
+}

package/src/dashboard/app/main.jsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './styles/index.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);

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>
+  );
+}