@polymorphism-tech/morph-spec 4.18.0 → 4.20.0

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

@@ -0,0 +1,410 @@
+import { useCallback, useMemo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import morphData from 'virtual:morph-data';
+import FlowGraph from '../components/FlowGraph.jsx';
+import DetailPanel from '../components/DetailPanel.jsx';
+import { useDetailPanel } from '../hooks/useDetailPanel.js';
+
+// Phase color palette by phase id
+const PHASE_COLORS = {
+  proposal:  { bg: '#166534', border: '#22c55e', text: '#bbf7d0' },
+  uiux:      { bg: '#854d0e', border: '#f59e0b', text: '#fef3c7' },
+  design:    { bg: '#1e40af', border: '#60a5fa', text: '#dbeafe' },
+  plan:      { bg: '#7c2d12', border: '#fb923c', text: '#fed7aa' },
+  tasks:     { bg: '#6d28d9', border: '#a78bfa', text: '#ede9fe' },
+  implement: { bg: '#0e7490', border: '#22d3ee', text: '#cffafe' },
+  sync:      { bg: '#374151', border: '#9ca3af', text: '#f3f4f6' },
+};
+
+const GATED_PHASES = new Set(['uiux', 'design', 'plan', 'tasks']);
+
+// Gate node: small gold square with "G" label
+function GateNode({ data }) {
+  return (
+    <div
+      title={data.label}
+      className="flex items-center justify-center rounded-sm select-none cursor-default"
+      style={{
+        width: 32,
+        height: 32,
+        background: '#78350f',
+        border: '2px solid #f59e0b',
+        boxShadow: '0 0 8px #f59e0b44',
+        color: '#fef3c7',
+        fontWeight: 700,
+        fontSize: 12,
+      }}
+    >
+      <Handle type="target" position={Position.Left} style={{ background: '#f59e0b', width: 7, height: 7 }} />
+      G
+      <Handle type="source" position={Position.Right} style={{ background: '#f59e0b', width: 7, height: 7 }} />
+    </div>
+  );
+}
+
+// Phase node: colored block with name and optional/index badge
+function PhaseNode({ data }) {
+  const c = PHASE_COLORS[data.phaseId] || PHASE_COLORS.sync;
+  const isOptional = data.optional;
+
+  return (
+    <div
+      className="rounded-lg px-4 py-3 min-w-[140px] select-none cursor-pointer"
+      style={{
+        background: c.bg,
+        border: `2px ${isOptional ? 'dashed' : 'solid'} ${c.border}`,
+        boxShadow: `0 0 10px ${c.border}33`,
+      }}
+    >
+      <Handle type="target" position={Position.Left} style={{ background: c.border, width: 8, height: 8 }} />
+
+      <div className="text-white text-sm font-bold leading-tight">{data.label}</div>
+      <div className="mt-1 text-[10px] font-medium" style={{ color: c.text }}>
+        {isOptional ? 'optional' : `index: ${data.index}`}
+      </div>
+
+      <Handle type="source" position={Position.Right} style={{ background: c.border, width: 8, height: 8 }} />
+    </div>
+  );
+}
+
+const nodeTypes = { phaseNode: PhaseNode, gateNode: GateNode };
+
+// Build nodes + edges with manual horizontal layout
+function buildPipelineGraph(phases) {
+  const nodes = [];
+  const edges = [];
+
+  // Layout constants
+  const PHASE_W = 150;
+  const PHASE_H = 68;
+  const GATE_W = 32;
+  const GATE_H = 32;
+  const GAP = 60; // gap between a phase and the next gate / phase
+  const Y_CENTER = 0;
+
+  // Pre-compute x positions for each phase and its preceding gate (if gated)
+  // Walk phases left to right, tracking current x cursor
+  let cursorX = 0;
+  const phaseLayout = []; // { phase, x, gateX? }
+
+  for (const phase of phases) {
+    if (GATED_PHASES.has(phase.id)) {
+      // Insert gate before this phase
+      const gateX = cursorX;
+      cursorX += GATE_W + GAP;
+      phaseLayout.push({ phase, x: cursorX, gateX });
+    } else {
+      phaseLayout.push({ phase, x: cursorX, gateX: null });
+    }
+    cursorX += PHASE_W + GAP;
+  }
+
+  // Build nodes
+  for (const { phase, x, gateX } of phaseLayout) {
+    const c = PHASE_COLORS[phase.id] || PHASE_COLORS.sync;
+
+    // Gate node (if any)
+    if (gateX !== null) {
+      nodes.push({
+        id: `gate-${phase.id}`,
+        type: 'gateNode',
+        data: { label: `Gate: ${phase.displayName}` },
+        position: { x: gateX, y: Y_CENTER + (PHASE_H - GATE_H) / 2 },
+      });
+    }
+
+    // Phase node
+    nodes.push({
+      id: phase.id,
+      type: 'phaseNode',
+      data: {
+        label: phase.displayName,
+        phaseId: phase.id,
+        optional: phase.optional,
+        index: phase.index,
+        color: c.border,
+        phaseRef: phase,
+      },
+      position: { x, y: Y_CENTER },
+    });
+  }
+
+  // Build edges: chain gates and phases in sequence
+  // sequence: ph0 → gate-ph1 → ph1 → gate-ph2 → ph2 → ...
+  for (let i = 0; i < phaseLayout.length; i++) {
+    const curr = phaseLayout[i];
+    const next = phaseLayout[i + 1];
+
+    if (!next) continue;
+
+    const sourceId = curr.phase.id;
+
+    if (next.gateX !== null) {
+      // phase → gate → next-phase (two edges)
+      edges.push({
+        id: `edge-${sourceId}-gate-${next.phase.id}`,
+        source: sourceId,
+        target: `gate-${next.phase.id}`,
+        type: 'smoothstep',
+        style: { stroke: '#475569', strokeWidth: 1.8 },
+      });
+      edges.push({
+        id: `edge-gate-${next.phase.id}-${next.phase.id}`,
+        source: `gate-${next.phase.id}`,
+        target: next.phase.id,
+        type: 'smoothstep',
+        style: { stroke: '#475569', strokeWidth: 1.8 },
+      });
+    } else {
+      // phase → phase (no gate)
+      edges.push({
+        id: `edge-${sourceId}-${next.phase.id}`,
+        source: sourceId,
+        target: next.phase.id,
+        type: 'smoothstep',
+        style: { stroke: '#475569', strokeWidth: 1.8 },
+      });
+    }
+  }
+
+  return { nodes, edges };
+}
+
+// Detail panel content for a phase
+function PhaseDetail({ phase, agents }) {
+  const c = PHASE_COLORS[phase.id] || PHASE_COLORS.sync;
+  const isGated = GATED_PHASES.has(phase.id);
+
+  // Agents active in this phase
+  const activeAgents = agents.filter(
+    (a) => a.activePhases?.includes(phase.id) || a.activePhases?.includes('*')
+  );
+
+  return (
+    <div className="text-sm text-gray-200 space-y-5">
+      {/* Phase badge + optional/gated indicators */}
+      <div className="flex flex-wrap items-center gap-2">
+        <span
+          className="px-2 py-0.5 rounded text-xs font-bold"
+          style={{ background: c.bg, color: c.text, border: `1px solid ${c.border}` }}
+        >
+          Phase {phase.index}
+        </span>
+        {phase.optional && (
+          <span className="px-2 py-0.5 rounded text-xs bg-gray-800 border border-dashed border-gray-600 text-gray-400">
+            optional
+          </span>
+        )}
+        {isGated && (
+          <span className="px-2 py-0.5 rounded text-xs bg-yellow-900/50 border border-yellow-600 text-yellow-300">
+            approval gate
+          </span>
+        )}
+        {phase.folder && (
+          <span className="px-2 py-0.5 rounded text-xs font-mono bg-gray-800 border border-gray-700 text-gray-400">
+            {phase.folder}
+          </span>
+        )}
+      </div>
+
+      {/* Goals */}
+      {phase.goals?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Goals</p>
+          <ul className="space-y-1.5">
+            {phase.goals.map((g, i) => (
+              <li key={i} className="flex gap-2 text-xs text-gray-300">
+                <span className="text-gray-600 flex-shrink-0">•</span>
+                {g}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {/* Required outputs */}
+      {phase.requiredOutputs?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Required Outputs</p>
+          <div className="flex flex-wrap gap-1">
+            {phase.requiredOutputs.map((o) => (
+              <span key={o} className="px-2 py-0.5 rounded text-xs bg-green-900/50 border border-green-700 text-green-300 font-mono">
+                {o}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Optional outputs */}
+      {phase.optionalOutputs?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Optional Outputs</p>
+          <div className="flex flex-wrap gap-1">
+            {phase.optionalOutputs.map((o) => (
+              <span key={o} className="px-2 py-0.5 rounded text-xs bg-gray-800 border border-gray-700 text-gray-400 font-mono">
+                {o}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Active agents */}
+      {activeAgents.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Active Agents ({activeAgents.length})</p>
+          <div className="space-y-1">
+            {activeAgents.map((a) => (
+              <div key={a.id} className="flex items-center justify-between text-xs px-2 py-1 bg-gray-800 rounded">
+                <span className="text-gray-200 font-medium truncate">{a.title}</span>
+                <span className="text-gray-500 ml-2 flex-shrink-0">T{a.tier}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Required skills */}
+      {phase.requiredSkills?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Required Skills</p>
+          <div className="space-y-1">
+            {phase.requiredSkills.map((s, i) => (
+              <div key={i} className="flex items-start gap-2 text-xs">
+                <span className="px-1.5 py-0.5 rounded bg-pink-900/50 border border-pink-700 text-pink-300 font-mono flex-shrink-0">
+                  {s.trigger}
+                </span>
+                <span className="text-gray-300 font-mono">{s.skill}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Recommended MCPs */}
+      {phase.recommendedMCPs?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Recommended MCPs</p>
+          <div className="flex flex-wrap gap-1">
+            {phase.recommendedMCPs.map((m) => (
+              <span key={m} className="px-2 py-0.5 rounded text-xs bg-blue-900/50 border border-blue-700 text-blue-300 font-mono">
+                {m}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Pause points */}
+      {phase.pausePoints?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-2">Pause Points</p>
+          <div className="space-y-1">
+            {phase.pausePoints.map((pp) => (
+              <div key={pp.id} className="flex items-center gap-2 text-xs px-2 py-1.5 bg-yellow-900/20 border border-yellow-700/50 rounded">
+                <span className="text-yellow-400 flex-shrink-0">&#x1F512;</span>
+                <span className="text-yellow-200">{pp.label}</span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function PhasePipeline() {
+  const { phases, agents } = morphData;
+  const { panel, openPanel, closePanel } = useDetailPanel();
+
+  const { nodes, edges } = useMemo(() => buildPipelineGraph(phases.list), [phases.list]);
+
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      if (node.type === 'gateNode') {
+        // Extract phase id from gate id ("gate-design" → "design")
+        const phaseId = node.id.replace('gate-', '');
+        const phase = phases.list.find((p) => p.id === phaseId);
+        if (phase) {
+          openPanel(`Gate: ${phase.displayName}`, (
+            <div className="text-sm text-gray-300 space-y-3">
+              <p className="text-yellow-300 text-xs">This gate requires explicit approval before the phase can begin.</p>
+              <p className="text-gray-400 text-xs">Gate ID: <span className="font-mono text-gray-300">{phaseId}</span></p>
+            </div>
+          ));
+        }
+        return;
+      }
+
+      if (node.type === 'phaseNode') {
+        const phase = node.data.phaseRef;
+        if (phase) {
+          openPanel(phase.displayName, (
+            <PhaseDetail phase={phase} agents={agents.list} />
+          ));
+        }
+      }
+    },
+    [openPanel, phases.list, agents.list]
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Header */}
+      <div className="px-6 py-4 border-b border-gray-800 flex-shrink-0">
+        <h1 className="text-white text-xl font-bold">Phase Pipeline</h1>
+        <p className="text-gray-400 text-sm mt-0.5">
+          Horizontal workflow of the 7 morph-spec phases. Gold gates mark required approval points. Dashed borders indicate optional phases.
+        </p>
+      </div>
+
+      {/* Flow graph */}
+      <div className="flex-1 relative">
+        <FlowGraph
+          nodes={nodes}
+          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-2 z-10">
+          <p className="text-gray-400 font-semibold uppercase tracking-wide text-[10px] mb-2">Legend</p>
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-10 h-4 rounded-sm" style={{ background: '#166534', border: '2px solid #22c55e' }} />
+            <span className="text-gray-300">Phase (solid = required)</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-10 h-4 rounded-sm" style={{ background: '#854d0e', border: '2px dashed #f59e0b' }} />
+            <span className="text-gray-300">Phase (dashed = optional)</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span
+              className="inline-flex items-center justify-center rounded-sm text-[10px] font-bold flex-shrink-0"
+              style={{ width: 20, height: 20, background: '#78350f', border: '2px solid #f59e0b', color: '#fef3c7' }}
+            >
+              G
+            </span>
+            <span className="text-gray-300">Approval Gate</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-6 border-t-2 border-gray-500" />
+            <span className="text-gray-400">Sequence</span>
+          </div>
+        </div>
+
+        {/* Phase 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">
+          {phases.list.length} phases · {phases.list.filter((p) => GATED_PHASES.has(p.id)).length} gates
+        </div>
+      </div>
+
+      <DetailPanel open={panel.open} title={panel.title} onClose={closePanel}>
+        {panel.content}
+      </DetailPanel>
+    </div>
+  );
+}

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

@@ -0,0 +1,273 @@
+import { useState, useMemo, useCallback } from 'react';
+import { Handle, Position } from '@xyflow/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 { useDetailPanel } from '../hooks/useDetailPanel.js';
+
+// ─── Node Components ──────────────────────────────────────────────────────────
+
+function RuleNode({ data }) {
+  return (
+    <div
+      className="rounded-lg px-3 py-2 min-w-[150px] max-w-[180px] cursor-pointer select-none"
+      style={{
+        background: '#451a03',
+        border: `1.5px solid ${data.dimmed ? '#78350f' : '#f59e0b'}`,
+        boxShadow: data.dimmed ? 'none' : '0 0 8px #f59e0b33',
+        opacity: data.dimmed ? 0.3 : 1,
+      }}
+    >
+      <Handle type="source" position={Position.Right} style={{ background: '#f59e0b', width: 7, height: 7 }} />
+      <div className="text-amber-100 text-xs font-semibold leading-tight truncate" title={data.label}>
+        {data.label}
+      </div>
+      <div className="text-amber-400 text-[10px] mt-0.5">
+        {data.pathCount} glob{data.pathCount !== 1 ? 's' : ''}
+        {data.stacks?.length > 0 ? ` · ${data.stacks.join(', ')}` : ''}
+      </div>
+    </div>
+  );
+}
+
+function StandardRefNode({ data }) {
+  return (
+    <div
+      className="rounded-lg px-3 py-2 min-w-[140px] max-w-[170px] select-none cursor-default"
+      style={{
+        background: '#1e3a5f',
+        border: `1.5px solid ${data.dimmed ? '#1e40af' : '#3b82f6'}`,
+        boxShadow: data.dimmed ? 'none' : '0 0 8px #3b82f633',
+        opacity: data.dimmed ? 0.3 : 1,
+      }}
+    >
+      <Handle type="target" position={Position.Left} style={{ background: '#3b82f6', width: 7, height: 7 }} />
+      <div className="text-blue-100 text-xs font-semibold leading-tight truncate" title={data.label}>
+        {data.label}
+      </div>
+      <div className="text-blue-400 text-[10px] mt-0.5">standard ref</div>
+    </div>
+  );
+}
+
+const nodeTypes = { ruleNode: RuleNode, standardRefNode: StandardRefNode };
+
+// ─── Graph Builder ────────────────────────────────────────────────────────────
+
+function buildGraph(rules, search, stackFilter, dimmed) {
+  const nodes = [];
+  const edges = [];
+
+  // Collect unique standard refs
+  const allStdRefs = [...new Set(rules.flatMap((r) => r.standardRefs))];
+
+  // Left column: rules at x=0
+  const RULE_X = 0;
+  const STD_X = 320;
+  const ROW_H = 70;
+
+  // Position rules
+  const filteredRuleIds = new Set(
+    rules
+      .filter((r) => {
+        const q = search.toLowerCase();
+        const matchSearch = !q || r.name.toLowerCase().includes(q) || r.stacks.some((s) => s.toLowerCase().includes(q));
+        const matchStack = !stackFilter || r.stacks.includes(stackFilter);
+        return matchSearch && matchStack;
+      })
+      .map((r) => r.name)
+  );
+
+  const hasFilter = search || stackFilter;
+
+  rules.forEach((rule, i) => {
+    const isDimmed = hasFilter && !filteredRuleIds.has(rule.name);
+    nodes.push({
+      id: `rule-${rule.name}`,
+      type: 'ruleNode',
+      position: { x: RULE_X, y: i * ROW_H },
+      data: {
+        label: rule.name,
+        pathCount: rule.paths.length,
+        stacks: rule.stacks,
+        ruleRef: rule,
+        dimmed: isDimmed,
+      },
+    });
+  });
+
+  // Position standard refs in right column
+  allStdRefs.forEach((ref, i) => {
+    const label = ref.replace(/\.md$/, '').split('/').pop();
+    nodes.push({
+      id: `std-${ref}`,
+      type: 'standardRefNode',
+      position: { x: STD_X, y: i * ROW_H + (rules.length * ROW_H - allStdRefs.length * ROW_H) / 2 },
+      data: { label, fullPath: ref, dimmed: false },
+    });
+  });
+
+  // Edges: rule → its standard refs
+  for (const rule of rules) {
+    const isDimmed = hasFilter && !filteredRuleIds.has(rule.name);
+    for (const ref of rule.standardRefs) {
+      edges.push({
+        id: `edge-${rule.name}-${ref}`,
+        source: `rule-${rule.name}`,
+        target: `std-${ref}`,
+        type: 'smoothstep',
+        style: {
+          stroke: isDimmed ? '#374151' : '#f59e0b',
+          strokeWidth: 1.2,
+          opacity: isDimmed ? 0.2 : 0.6,
+        },
+      });
+    }
+  }
+
+  return { nodes, edges };
+}
+
+// ─── Detail Content ───────────────────────────────────────────────────────────
+
+function RuleDetail({ rule }) {
+  const [showContent, setShowContent] = useState(false);
+  return (
+    <div className="text-sm text-gray-200 space-y-4">
+      <div>
+        <p className="text-gray-400 text-xs">File: <span className="font-mono text-gray-300">{rule.filename}</span></p>
+      </div>
+
+      {rule.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">
+            {rule.stacks.map((s) => (
+              <span key={s} className="px-2 py-0.5 bg-green-900/50 border border-green-700 rounded text-xs text-green-300">{s}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {rule.paths?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Path Globs</p>
+          <div className="space-y-1">
+            {rule.paths.map((p) => (
+              <code key={p} className="block px-2 py-1 bg-gray-950 border border-gray-800 rounded text-[10px] font-mono text-amber-300">{p}</code>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {rule.standardRefs?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Standard References</p>
+          <ul className="space-y-1">
+            {rule.standardRefs.map((ref) => (
+              <li key={ref} className="flex items-center gap-2 text-xs">
+                <span className="w-1.5 h-1.5 rounded-full bg-blue-400 flex-shrink-0" />
+                <span className="font-mono text-blue-300">{ref}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      <div>
+        <button
+          onClick={() => setShowContent((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"
+        >
+          {showContent ? 'Hide Content' : 'Show Full Content'}
+        </button>
+        {showContent && (
+          <pre className="mt-2 p-3 bg-gray-950 border border-gray-800 rounded text-[9px] text-gray-400 overflow-x-auto whitespace-pre-wrap font-mono leading-relaxed max-h-64 overflow-y-auto">
+            {rule.content}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+
+export default function RulesMap() {
+  const { rules } = morphData;
+  const [search, setSearch] = useState('');
+  const [stackFilter, setStackFilter] = useState('');
+  const { panel, openPanel, closePanel } = useDetailPanel();
+
+  const allStacks = useMemo(
+    () => [...new Set(rules.flatMap((r) => r.stacks))].sort(),
+    [rules]
+  );
+
+  const { nodes, edges } = useMemo(
+    () => buildGraph(rules, search, stackFilter),
+    [rules, search, stackFilter]
+  );
+
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      if (node.type === 'ruleNode') {
+        const rule = node.data.ruleRef;
+        if (rule) openPanel(rule.name, <RuleDetail rule={rule} />);
+      }
+    },
+    [openPanel]
+  );
+
+  const filterConfig = [
+    { name: 'stack', label: 'Stack', options: allStacks, value: stackFilter },
+  ];
+
+  return (
+    <div className="flex flex-col h-full">
+      <SearchFilter
+        placeholder="Search rules by name or stack..."
+        filters={filterConfig}
+        onSearchChange={setSearch}
+        onFilterChange={(name, value) => {
+          if (name === 'stack') setStackFilter(value);
+        }}
+      />
+
+      <div className="flex-1 relative">
+        <FlowGraph
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={nodeTypes}
+          onNodeClick={handleNodeClick}
+          fitView
+        />
+
+        <div className="absolute top-3 left-3 bg-gray-900/90 border border-gray-700 rounded-lg p-3 text-xs space-y-2 z-10">
+          <p className="text-gray-400 font-semibold uppercase tracking-wide text-[10px] mb-2">Legend</p>
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-4 h-4 rounded-sm" style={{ background: '#451a03', border: '1.5px solid #f59e0b' }} />
+            <span className="text-gray-300">Rule file</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-4 h-4 rounded-sm" style={{ background: '#1e3a5f', border: '1.5px solid #3b82f6' }} />
+            <span className="text-gray-300">Standard reference</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-6 border-t border-amber-400 opacity-60" />
+            <span className="text-gray-400">references</span>
+          </div>
+        </div>
+
+        <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">
+          {rules.length} rules
+        </div>
+      </div>
+
+      <DetailPanel open={panel.open} title={panel.title} onClose={closePanel}>
+        {panel.content}
+      </DetailPanel>
+    </div>
+  );
+}