@polymorphism-tech/morph-spec 4.18.0 → 4.20.0

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

@@ -0,0 +1,367 @@
+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';
+
+// Colors for skill levels
+const LEVEL_COLORS = {
+  'level-0-meta':       { bg: '#134e4a', border: '#14b8a6', label: 'L0 Meta' },
+  'level-1-workflows':  { bg: '#1e3a5f', border: '#38bdf8', label: 'L1 Workflows' },
+};
+const FALLBACK_LEVEL = { bg: '#1a2e1a', border: '#4ade80', label: 'Skill' };
+
+// Phase color (indigo)
+const PHASE_COLOR = { bg: '#1e1b4b', border: '#818cf8', text: '#e0e7ff' };
+
+// SkillNode: teal/green border
+function SkillNode({ data }) {
+  const c = LEVEL_COLORS[data.level] || FALLBACK_LEVEL;
+  return (
+    <div
+      className="rounded-lg px-3 py-2 min-w-[140px] max-w-[170px] cursor-pointer select-none"
+      style={{ background: c.bg, border: `1.5px solid ${c.border}`, boxShadow: `0 0 8px ${c.border}22` }}
+    >
+      <Handle type="target" position={Position.Top} style={{ background: c.border, width: 7, height: 7 }} />
+      <div className="text-white text-xs font-semibold leading-tight truncate" title={data.label}>
+        {data.label}
+      </div>
+      <div className="mt-0.5 text-[10px] font-medium" style={{ color: c.border }}>
+        {(LEVEL_COLORS[data.level] || FALLBACK_LEVEL).label}
+      </div>
+      <Handle type="source" position={Position.Bottom} style={{ background: c.border, width: 7, height: 7 }} />
+    </div>
+  );
+}
+
+// PhaseRefNode: indigo border, shows phase name
+function PhaseRefNode({ data }) {
+  return (
+    <div
+      className="rounded-lg px-4 py-2.5 min-w-[130px] select-none cursor-default"
+      style={{ background: PHASE_COLOR.bg, border: `1.5px solid ${PHASE_COLOR.border}`, boxShadow: `0 0 8px ${PHASE_COLOR.border}33` }}
+    >
+      <Handle type="source" position={Position.Bottom} style={{ background: PHASE_COLOR.border, width: 7, height: 7 }} />
+      <div className="text-white text-xs font-bold leading-tight truncate" title={data.label}>
+        {data.label}
+      </div>
+      <div className="mt-0.5 text-[10px]" style={{ color: PHASE_COLOR.text }}>
+        phase
+      </div>
+    </div>
+  );
+}
+
+const nodeTypes = { skillNode: SkillNode, phaseRefNode: PhaseRefNode };
+
+// Shorten a trigger string for use as edge label
+function shortTrigger(trigger) {
+  if (!trigger) return '';
+  // "on:task:start" → "task:start", "/morph-proposal" → "morph-proposal"
+  return trigger.replace(/^on:/, '').replace(/^\//, '');
+}
+
+// Build dagre layout for the skills graph
+function buildLayout(nodes, edges) {
+  const g = new dagre.graphlib.Graph();
+  g.setDefaultEdgeLabel(() => ({}));
+  g.setGraph({ rankdir: 'TB', nodesep: 50, ranksep: 80, marginx: 20, marginy: 20 });
+
+  for (const n of nodes) {
+    const w = n.type === 'phaseRefNode' ? 150 : 170;
+    const h = n.type === 'phaseRefNode' ? 52 : 58;
+    g.setNode(n.id, { width: w, height: h });
+  }
+  for (const e of edges) {
+    g.setEdge(e.source, e.target);
+  }
+
+  dagre.layout(g);
+
+  return nodes.map((n) => {
+    const pos = g.node(n.id);
+    const halfW = n.type === 'phaseRefNode' ? 75 : 85;
+    const halfH = n.type === 'phaseRefNode' ? 26 : 29;
+    return { ...n, position: { x: pos.x - halfW, y: pos.y - halfH } };
+  });
+}
+
+// Detail panel for a skill
+function SkillDetail({ skill }) {
+  const c = LEVEL_COLORS[skill.level] || FALLBACK_LEVEL;
+
+  return (
+    <div className="text-sm text-gray-200 space-y-4">
+      {/* Header badges */}
+      <div className="flex flex-wrap gap-2">
+        <span
+          className="px-2 py-0.5 rounded text-xs font-bold"
+          style={{ background: c.bg, color: c.border, border: `1px solid ${c.border}` }}
+        >
+          {c.label}
+        </span>
+        <span
+          className={`px-2 py-0.5 rounded text-xs font-medium border ${
+            skill.userInvocable
+              ? 'bg-green-900/40 border-green-600 text-green-300'
+              : 'bg-gray-800 border-gray-600 text-gray-400'
+          }`}
+        >
+          {skill.userInvocable ? 'User-invocable' : 'Internal'}
+        </span>
+      </div>
+
+      {/* ID */}
+      <div>
+        <p className="text-gray-500 text-xs uppercase tracking-wide mb-1">Skill ID</p>
+        <p className="font-mono text-xs text-gray-300">{skill.id}</p>
+      </div>
+
+      {/* Description */}
+      {skill.description && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1">Description</p>
+          <p className="text-gray-300 text-xs leading-relaxed">{skill.description}</p>
+        </div>
+      )}
+
+      {/* Allowed tools */}
+      {skill.allowedTools?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Allowed Tools</p>
+          <div className="flex flex-wrap gap-1">
+            {skill.allowedTools.map((t) => (
+              <span key={t} className="px-1.5 py-0.5 bg-gray-800 border border-gray-600 rounded text-xs text-gray-300 font-mono">
+                {t}
+              </span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Full content */}
+      {skill.content && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Full Content</p>
+          <pre className="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-72 overflow-y-auto">
+            {skill.content}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default function SkillsLibrary() {
+  const { skills, phases } = morphData;
+  const [search, setSearch] = useState('');
+  const [levelFilter, setLevelFilter] = useState('');
+  const { panel, openPanel, closePanel } = useDetailPanel();
+
+  // All unique levels for filter dropdown
+  const allLevels = useMemo(
+    () => [...new Set(skills.map((s) => s.level).filter(Boolean))].sort(),
+    [skills]
+  );
+
+  // Matched skill IDs based on search + level filter
+  const matchedIds = useMemo(() => {
+    const q = search.toLowerCase();
+    return new Set(
+      skills
+        .filter((s) => {
+          const matchesSearch =
+            !q ||
+            s.name.toLowerCase().includes(q) ||
+            s.id.toLowerCase().includes(q) ||
+            s.description.toLowerCase().includes(q);
+          const matchesLevel = !levelFilter || s.level === levelFilter;
+          return matchesSearch && matchesLevel;
+        })
+        .map((s) => s.id)
+    );
+  }, [skills, search, levelFilter]);
+
+  const hasFilter = search || levelFilter;
+
+  // Build a map: skillId → [{ phaseId, trigger }] for all connected phases
+  const skillToPhases = useMemo(() => {
+    const map = new Map();
+    for (const phase of phases.list) {
+      for (const rs of phase.requiredSkills || []) {
+        if (!rs.skill) continue;
+        if (!map.has(rs.skill)) map.set(rs.skill, []);
+        map.get(rs.skill).push({ phaseId: phase.id, trigger: rs.trigger });
+      }
+    }
+    return map;
+  }, [phases.list]);
+
+  // Set of phase IDs that actually connect to at least one skill
+  const connectedPhaseIds = useMemo(() => {
+    const ids = new Set();
+    for (const phase of phases.list) {
+      if (phase.requiredSkills?.some((rs) => rs.skill)) {
+        ids.add(phase.id);
+      }
+    }
+    return ids;
+  }, [phases.list]);
+
+  // Build nodes + edges
+  const { nodes: layoutNodes, edges } = useMemo(() => {
+    const rawNodes = [];
+    const rawEdges = [];
+
+    // Phase nodes (top row) — only phases with required skills
+    const connectedPhases = phases.list.filter((p) => connectedPhaseIds.has(p.id));
+    for (const phase of connectedPhases) {
+      rawNodes.push({
+        id: `phase:${phase.id}`,
+        type: 'phaseRefNode',
+        data: {
+          label: phase.displayName,
+          phaseId: phase.id,
+          color: PHASE_COLOR.border,
+        },
+        position: { x: 0, y: 0 },
+      });
+    }
+
+    // Skill nodes
+    for (const skill of skills) {
+      const dimmed = hasFilter && !matchedIds.has(skill.id);
+      const c = LEVEL_COLORS[skill.level] || FALLBACK_LEVEL;
+      rawNodes.push({
+        id: skill.id,
+        type: 'skillNode',
+        data: {
+          label: skill.name,
+          level: skill.level,
+          skillRef: skill,
+          color: c.border,
+        },
+        style: dimmed ? { opacity: 0.2 } : {},
+        position: { x: 0, y: 0 },
+      });
+    }
+
+    // Edges: phase → skill with trigger label
+    const edgeIndex = new Map(); // track (phaseId,skillId) pairs to avoid duplicates
+    for (const phase of phases.list) {
+      for (const rs of phase.requiredSkills || []) {
+        if (!rs.skill) continue;
+        const key = `${phase.id}::${rs.skill}`;
+        if (edgeIndex.has(key)) continue;
+        edgeIndex.set(key, true);
+
+        const label = shortTrigger(rs.trigger);
+        rawEdges.push({
+          id: `edge-${phase.id}-${rs.skill}`,
+          source: `phase:${phase.id}`,
+          target: rs.skill,
+          type: 'smoothstep',
+          label: label || undefined,
+          labelStyle: { fontSize: 9, fill: '#94a3b8' },
+          labelBgStyle: { fill: '#0f172a', fillOpacity: 0.85 },
+          labelBgPadding: [3, 2],
+          style: { stroke: PHASE_COLOR.border, strokeWidth: 1.5, opacity: 0.7 },
+        });
+      }
+    }
+
+    const layouted = buildLayout(rawNodes, rawEdges);
+    return { nodes: layouted, edges: rawEdges };
+  }, [skills, phases.list, matchedIds, hasFilter, connectedPhaseIds]);
+
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      if (node.type === 'phaseRefNode') {
+        // No detail panel for phase nodes per spec
+        return;
+      }
+      const skill = node.data.skillRef;
+      if (skill) {
+        openPanel(skill.name, <SkillDetail skill={skill} />);
+      }
+    },
+    [openPanel]
+  );
+
+  const filterConfig = [
+    { name: 'level', label: 'Level', options: allLevels, value: levelFilter },
+  ];
+
+  // Unconnected skill count
+  const unconnectedCount = useMemo(
+    () => skills.filter((s) => !skillToPhases.has(s.id)).length,
+    [skills, skillToPhases]
+  );
+
+  return (
+    <div className="flex flex-col h-full">
+      <SearchFilter
+        placeholder="Search skills by name or description..."
+        filters={filterConfig}
+        onSearchChange={setSearch}
+        onFilterChange={(name, value) => {
+          if (name === 'level') setLevelFilter(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-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 flex-shrink-0"
+              style={{ background: PHASE_COLOR.bg, border: `1.5px solid ${PHASE_COLOR.border}` }}
+            />
+            <span className="text-gray-300">Phase</span>
+          </div>
+          {Object.entries(LEVEL_COLORS).map(([level, c]) => (
+            <div key={level} className="flex items-center gap-2">
+              <span
+                className="inline-block w-10 h-4 rounded-sm flex-shrink-0"
+                style={{ background: c.bg, border: `1.5px solid ${c.border}` }}
+              />
+              <span className="text-gray-300">{c.label}</span>
+            </div>
+          ))}
+          <div className="border-t border-gray-700 mt-2 pt-2">
+            <div className="flex items-center gap-2">
+              <span className="inline-block w-6 border-t-2 border-indigo-400" style={{ opacity: 0.7 }} />
+              <span className="text-gray-400">phase → skill</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Stats 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 space-y-0.5">
+          <div>
+            {hasFilter ? `${matchedIds.size} / ${skills.length}` : skills.length} skills
+          </div>
+          {unconnectedCount > 0 && (
+            <div className="text-gray-600">{unconnectedCount} unlinked</div>
+          )}
+        </div>
+      </div>
+
+      <DetailPanel open={panel.open} title={panel.title} onClose={closePanel}>
+        {panel.content}
+      </DetailPanel>
+    </div>
+  );
+}

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

@@ -0,0 +1,332 @@
+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';
+
+// ─── Category Color Palette ───────────────────────────────────────────────────
+
+const CATEGORY_COLORS = {
+  'ai-agents':      '#34d399',
+  'architecture':   '#f97316',
+  'backend':        '#3b82f6',
+  'data':           '#8b5cf6',
+  'frontend':       '#f472b6',
+  'infrastructure': '#fbbf24',
+  'integration':    '#06b6d4',
+};
+
+const CATEGORY_BG = {
+  'ai-agents':      '#064e3b',
+  'architecture':   '#431407',
+  'backend':        '#1e3a5f',
+  'data':           '#2e1065',
+  'frontend':       '#500724',
+  'infrastructure': '#451a03',
+  'integration':    '#083344',
+};
+
+function getCategoryColor(category) {
+  return CATEGORY_COLORS[category] || '#94a3b8';
+}
+function getCategoryBg(category) {
+  return CATEGORY_BG[category] || '#1e293b';
+}
+
+// ─── Node Components ──────────────────────────────────────────────────────────
+
+function StandardNode({ data }) {
+  const color = getCategoryColor(data.category);
+  const bg = getCategoryBg(data.category);
+  return (
+    <div
+      className="rounded-lg px-3 py-2 min-w-[160px] max-w-[190px] cursor-pointer select-none"
+      style={{
+        background: bg,
+        border: `1.5px solid ${data.dimmed ? bg : color}`,
+        boxShadow: data.dimmed ? 'none' : `0 0 8px ${color}33`,
+        opacity: data.dimmed ? 0.25 : 1,
+      }}
+    >
+      <Handle type="target" position={Position.Left} style={{ background: color, width: 7, height: 7 }} />
+      <Handle type="source" position={Position.Right} style={{ background: color, width: 7, height: 7 }} />
+      <div className="text-white text-xs font-semibold leading-tight truncate" title={data.label}>
+        {data.label}
+      </div>
+      <div className="text-[10px] mt-0.5 font-mono truncate" style={{ color }}>
+        {data.category}
+        {data.subcategory ? ` / ${data.subcategory}` : ''}
+      </div>
+    </div>
+  );
+}
+
+function AgentRefNode({ data }) {
+  return (
+    <div
+      className="rounded px-2 py-1 select-none cursor-default"
+      style={{
+        background: '#1e293b',
+        border: '1px solid #334155',
+        opacity: data.dimmed ? 0.2 : 1,
+      }}
+    >
+      <Handle type="source" position={Position.Right} style={{ background: '#475569', width: 6, height: 6 }} />
+      <div className="text-gray-400 text-[10px] font-mono truncate max-w-[110px]" title={data.label}>
+        {data.label}
+      </div>
+    </div>
+  );
+}
+
+const nodeTypes = { standardNode: StandardNode, agentRefNode: AgentRefNode };
+
+// ─── Graph Builder ────────────────────────────────────────────────────────────
+
+function buildGraph(standards, search, categoryFilter) {
+  const nodes = [];
+  const edges = [];
+
+  const filtered = standards.filter((s) => {
+    const q = search.toLowerCase();
+    const matchSearch = !q || s.name.toLowerCase().includes(q) || s.id.toLowerCase().includes(q) || s.category.toLowerCase().includes(q);
+    const matchCat = !categoryFilter || s.category === categoryFilter;
+    return matchSearch && matchCat;
+  });
+  const filteredIds = new Set(filtered.map((s) => s.id));
+  const hasFilter = search || categoryFilter;
+
+  // Group by category
+  const byCategory = {};
+  for (const std of standards) {
+    if (!byCategory[std.category]) byCategory[std.category] = [];
+    byCategory[std.category].push(std);
+  }
+
+  const STD_X = 180;
+  const AGENT_X = 0;
+  const ROW_H = 75;
+  const CAT_GAP = 40;
+
+  let globalY = 0;
+
+  // Track all agent refs that need separate nodes
+  const agentNodeMap = {}; // agentId → { x, y }
+  const agentYTracker = {};
+
+  for (const [cat, catStandards] of Object.entries(byCategory)) {
+    catStandards.forEach((std, i) => {
+      const isDimmed = hasFilter && !filteredIds.has(std.id);
+      nodes.push({
+        id: `std-${std.id}`,
+        type: 'standardNode',
+        position: { x: STD_X, y: globalY + i * ROW_H },
+        data: {
+          label: std.name,
+          category: std.category,
+          subcategory: std.subcategory,
+          stdRef: std,
+          dimmed: isDimmed,
+        },
+      });
+
+      // Agent ref nodes on the left
+      std.referencedBy.forEach((ref, j) => {
+        const agentNodeId = `agent-${ref.agentId}`;
+        if (!agentNodeMap[agentNodeId]) {
+          const ay = agentYTracker[ref.agentId] ?? globalY + i * ROW_H;
+          agentYTracker[ref.agentId] = ay + 55;
+          agentNodeMap[agentNodeId] = { x: AGENT_X, y: ay };
+          nodes.push({
+            id: agentNodeId,
+            type: 'agentRefNode',
+            position: { x: AGENT_X, y: ay },
+            data: { label: ref.agentId, dimmed: isDimmed },
+          });
+        }
+        const edgeLabel = [ref.scope, ref.priority].filter(Boolean).join('/');
+        edges.push({
+          id: `edge-${ref.agentId}-${std.id}-${j}`,
+          source: agentNodeId,
+          target: `std-${std.id}`,
+          type: 'smoothstep',
+          label: edgeLabel || undefined,
+          labelStyle: { fill: '#64748b', fontSize: 9 },
+          labelBgStyle: { fill: '#0f172a', fillOpacity: 0.85 },
+          style: {
+            stroke: isDimmed ? '#1e293b' : getCategoryColor(std.category),
+            strokeWidth: 1,
+            opacity: isDimmed ? 0.15 : 0.4,
+          },
+        });
+      });
+    });
+
+    globalY += catStandards.length * ROW_H + CAT_GAP;
+  }
+
+  return { nodes, edges };
+}
+
+// ─── Detail Content ───────────────────────────────────────────────────────────
+
+function StandardDetail({ std }) {
+  const [showContent, setShowContent] = useState(false);
+  const color = getCategoryColor(std.category);
+
+  return (
+    <div className="text-sm text-gray-200 space-y-4">
+      <div>
+        <p className="text-gray-400 text-xs">ID: <span className="font-mono text-gray-300">{std.id}</span></p>
+        <p className="text-gray-400 text-xs mt-0.5">Path: <span className="font-mono text-gray-300">{std.path}</span></p>
+      </div>
+
+      <div className="flex flex-wrap gap-1">
+        <span className="px-2 py-0.5 rounded text-xs font-bold" style={{ background: getCategoryBg(std.category), color, border: `1px solid ${color}` }}>
+          {std.category}
+        </span>
+        {std.subcategory && (
+          <span className="px-2 py-0.5 rounded text-xs bg-gray-800 border border-gray-700 text-gray-400">
+            {std.subcategory}
+          </span>
+        )}
+      </div>
+
+      {std.digest && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Digest</p>
+          <p className="text-gray-300 text-xs leading-relaxed">{std.digest}</p>
+        </div>
+      )}
+
+      {std.tags?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Tags</p>
+          <div className="flex flex-wrap gap-1">
+            {std.tags.map((t) => (
+              <span key={t} className="px-1.5 py-0.5 bg-gray-800 border border-gray-700 rounded text-xs text-gray-400">{t}</span>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {std.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">
+            {std.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>
+      )}
+
+      {std.referencedBy?.length > 0 && (
+        <div>
+          <p className="text-gray-500 text-xs uppercase tracking-wide mb-1.5">Referenced By ({std.referencedBy.length})</p>
+          <div className="space-y-1">
+            {std.referencedBy.map((ref, i) => (
+              <div key={i} className="flex items-center justify-between text-xs px-2 py-1 bg-gray-800 rounded">
+                <span className="font-mono text-gray-300 truncate">{ref.agentId}</span>
+                <div className="flex gap-1 ml-2 flex-shrink-0">
+                  {ref.scope && <span className="px-1.5 py-0.5 bg-gray-700 rounded text-gray-400">{ref.scope}</span>}
+                  {ref.priority && <span className="px-1.5 py-0.5 bg-gray-700 rounded text-gray-400">{ref.priority}</span>}
+                </div>
+              </div>
+            ))}
+          </div>
+        </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">
+            {std.content}
+          </pre>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+
+export default function Standards() {
+  const { standards } = morphData;
+  const [search, setSearch] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState('');
+  const { panel, openPanel, closePanel } = useDetailPanel();
+
+  const allCategories = useMemo(
+    () => [...new Set(standards.list.map((s) => s.category))].sort(),
+    [standards.list]
+  );
+
+  const { nodes, edges } = useMemo(
+    () => buildGraph(standards.list, search, categoryFilter),
+    [standards.list, search, categoryFilter]
+  );
+
+  const handleNodeClick = useCallback(
+    (_event, node) => {
+      if (node.type === 'standardNode') {
+        const std = node.data.stdRef;
+        if (std) openPanel(std.name, <StandardDetail std={std} />);
+      }
+    },
+    [openPanel]
+  );
+
+  const filterConfig = [
+    { name: 'category', label: 'Category', options: allCategories, value: categoryFilter },
+  ];
+
+  return (
+    <div className="flex flex-col h-full">
+      <SearchFilter
+        placeholder="Search standards by name, ID, or category..."
+        filters={filterConfig}
+        onSearchChange={setSearch}
+        onFilterChange={(name, value) => {
+          if (name === 'category') setCategoryFilter(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-1.5 z-10">
+          <p className="text-gray-400 font-semibold uppercase tracking-wide text-[10px] mb-2">Categories</p>
+          {Object.entries(CATEGORY_COLORS).map(([cat, color]) => (
+            <div key={cat} className="flex items-center gap-2">
+              <span className="inline-block w-3 h-3 rounded-sm flex-shrink-0" style={{ background: getCategoryBg(cat), border: `1px solid ${color}` }} />
+              <span className="text-gray-300">{cat}</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">
+          {standards.list.length} standards · v{standards.version}
+        </div>
+      </div>
+
+      <DetailPanel open={panel.open} title={panel.title} onClose={closePanel}>
+        {panel.content}
+      </DetailPanel>
+    </div>
+  );
+}