@polymorphism-tech/morph-spec 8.38.0 → 8.40.0

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

@@ -1,332 +1,407 @@
-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>
-  );
-}
+import { useState, useMemo, useCallback } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { 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, standardKey } from '../components/EntityLink.jsx';
+
+// ─── Colors ───────────────────────────────────────────────────────────────────
+
+/** Token palette the categories draw from, in order; the categories come from the data. */
+const PALETTE = [
+  'var(--color-phase-implement)',
+  'var(--color-phase-uiux)',
+  'var(--color-phase-proposal)',
+  'var(--color-phase-plan)',
+  'var(--color-ok)',
+  'var(--color-warn)',
+  'var(--color-phase-review)',
+  'var(--color-dim)',
+];
+
+const tint = (color, pct = 14) => `color-mix(in srgb, ${color} ${pct}%, var(--color-core))`;
+
+/** category → color, stable by category name so a color never jumps between renders. */
+function categoryColors(standards) {
+  const cats = [...new Set(standards.map((s) => s.category || 'outros'))].sort();
+  return Object.fromEntries(cats.map((c, i) => [c, PALETTE[i % PALETTE.length]]));
+}
+
+/** Resolve `?sel=` to a standard: by id first, then by the path a task cites. */
+export function findStandard(list, sel) {
+  if (!sel) return null;
+  return list.find((s) => s.id === sel) || list.find((s) => s.path === standardKey(sel)) || null;
+}
+
+// ─── Nodes ────────────────────────────────────────────────────────────────────
+
+const HANDLE = { width: 7, height: 7, border: 0 };
+const NODE_W = 230;
+const NODE_H = 52;
+
+function StandardNode({ data }) {
+  return (
+    <div
+      className="cursor-pointer select-none rounded-xl px-3 py-1.5 transition-opacity"
+      style={{
+        width: NODE_W, height: NODE_H,
+        background: tint(data.color, data.selected ? 30 : 12),
+        boxShadow: `inset 0 0 0 ${data.selected ? 2 : 1.25}px ${data.color}`,
+        opacity: data.dimmed ? 0.18 : 1,
+      }}
+    >
+      <Handle type="target" position={Position.Top} style={{ ...HANDLE, background: data.color }} />
+      <div className="truncate text-[13px] font-medium leading-tight text-[var(--color-fg)]" title={data.label}>{data.label}</div>
+      <div className="mt-0.5 truncate text-xs text-[var(--color-dim)]" title={data.sub}>{data.sub}</div>
+    </div>
+  );
+}
+
+function AgentNode({ data }) {
+  return (
+    <div
+      className="flex cursor-pointer select-none items-center gap-2 rounded-full px-4 py-2 transition-opacity"
+      style={{
+        width: NODE_W,
+        background: data.active ? tint('var(--color-fg)', 16) : 'var(--color-raised)',
+        boxShadow: `inset 0 0 0 ${data.active ? 2 : 1}px ${data.active ? 'var(--color-fg)' : 'var(--color-hair-strong)'}`,
+        opacity: data.dimmed ? 0.3 : 1,
+      }}
+    >
+      <Robot weight="light" size={16} className="shrink-0 text-[var(--color-dim)]" />
+      <div className="min-w-0">
+        <div className="truncate font-mono text-[13px] text-[var(--color-fg)]" title={data.title}>morph-{data.agentId}</div>
+        <div className="text-xs text-[var(--color-dim)]">{data.count} standards</div>
+      </div>
+      <Handle type="source" position={Position.Bottom} style={{ ...HANDLE, background: 'var(--color-dim)' }} />
+    </div>
+  );
+}
+
+function CategoryNode({ data }) {
+  return (
+    <div
+      className="pointer-events-none rounded-2xl"
+      style={{ width: data.width, height: data.height, background: tint(data.color, 5), boxShadow: `inset 0 0 0 1px color-mix(in srgb, ${data.color} 40%, transparent)` }}
+    >
+      <div className="flex items-baseline gap-2 px-4 pt-3">
+        <span className="text-sm font-semibold" style={{ color: data.color }}>{data.label}</span>
+        <span className="text-xs text-[var(--color-dim)]">{data.count}</span>
+      </div>
+    </div>
+  );
+}
+
+const nodeTypes = { standardNode: StandardNode, agentNode: AgentNode, categoryNode: CategoryNode };
+
+// ─── Layout ───────────────────────────────────────────────────────────────────
+
+const CELL_W = NODE_W + 14;
+const CELL_H = NODE_H + 12;
+const PAD = 16;
+const HEADER = 40;
+const BLOCK_GAP = 36;
+const MAX_ROW_W = 1700;
+
+/** How many columns a category block gets: tall categories spread sideways. */
+function colsFor(n) {
+  if (n > 12) return 3;
+  if (n > 5) return 2;
+  return 1;
+}
+
+function buildGraph({ standards, agents, colors, isMatch, hasFilter, persona, selectedId }) {
+  const nodes = [];
+  const edges = [];
+
+  const byCat = new Map();
+  for (const s of standards) {
+    const c = s.category || 'outros';
+    if (!byCat.has(c)) byCat.set(c, []);
+    byCat.get(c).push(s);
+  }
+  const cats = [...byCat.entries()]
+    .map(([cat, list]) => [cat, [...list].sort((a, b) => (a.subcategory || '').localeCompare(b.subcategory || '') || a.name.localeCompare(b.name))])
+    .sort((a, b) => b[1].length - a[1].length || a[0].localeCompare(b[0]));
+
+  // Pack the category blocks into rows no wider than MAX_ROW_W.
+  const blocks = cats.map(([cat, list]) => {
+    const cols = colsFor(list.length);
+    const rows = Math.ceil(list.length / cols);
+    return { cat, list, cols, w: cols * CELL_W + PAD * 2 - 14, h: HEADER + rows * CELL_H + PAD - 12 };
+  });
+  const rows = [];
+  for (const b of blocks) {
+    const row = rows[rows.length - 1];
+    if (row && row.w + BLOCK_GAP + b.w <= MAX_ROW_W) { row.items.push(b); row.w += BLOCK_GAP + b.w; row.h = Math.max(row.h, b.h); }
+    else rows.push({ items: [b], w: b.w, h: b.h });
+  }
+  const totalW = Math.max(...rows.map((r) => r.w), 0);
+
+  const std = new Set(); // node ids present
+  let y = 180;
+  for (const row of rows) {
+    let x = (totalW - row.w) / 2;
+    for (const b of row.items) {
+      const color = colors[b.cat];
+      nodes.push({
+        id: `cat:${b.cat}`, type: 'categoryNode', position: { x, y },
+        data: { label: b.cat, count: b.list.length, color, width: b.w, height: b.h },
+        selectable: false, draggable: false, focusable: false, zIndex: -1,
+      });
+      b.list.forEach((s, i) => {
+        const col = i % b.cols;
+        const r = Math.floor(i / b.cols);
+        nodes.push({
+          id: `std:${s.id}`, type: 'standardNode',
+          position: { x: x + PAD + col * CELL_W, y: y + HEADER + r * CELL_H },
+          data: {
+            label: s.name, sub: s.subcategory || s.path, color, stdId: s.id,
+            dimmed: hasFilter && !isMatch(s), selected: s.id === selectedId,
+          },
+        });
+        std.add(s.id);
+      });
+      x += b.w + BLOCK_GAP;
+    }
+    y += row.h + BLOCK_GAP;
+  }
+
+  // The personas on top, each with an edge to every standard it consults.
+  const withStandards = agents.filter((a) => (a.standards || []).some((id) => std.has(id)));
+  const agentX0 = (totalW - withStandards.length * (NODE_W + 24)) / 2;
+  const byId = new Map(standards.map((s) => [s.id, s]));
+  withStandards.forEach((a, i) => {
+    const ids = (a.standards || []).filter((id) => std.has(id));
+    const active = persona === a.id;
+    nodes.push({
+      id: `agent:${a.id}`, type: 'agentNode', position: { x: agentX0 + i * (NODE_W + 24), y: 0 },
+      data: { agentId: a.id, title: a.title, count: ids.length, active, dimmed: Boolean(persona) && !active },
+    });
+    for (const id of ids) {
+      const s = byId.get(id);
+      const lit = persona ? active : !hasFilter || isMatch(s);
+      edges.push({
+        id: `e:${a.id}->${id}`, source: `agent:${a.id}`, target: `std:${id}`, type: 'default',
+        style: { stroke: colors[s.category || 'outros'], strokeWidth: lit && persona ? 1.5 : 1, opacity: lit ? (persona ? 0.85 : 0.22) : 0.04 },
+      });
+    }
+  });
+
+  return { nodes, edges, categories: cats.map(([c, l]) => [c, l.length]) };
+}
+
+// ─── Detail ───────────────────────────────────────────────────────────────────
+
+function Section({ title, children }) {
+  return (
+    <section className="space-y-2">
+      <h3 className="text-xs font-medium text-[var(--color-faint)]">{title}</h3>
+      {children}
+    </section>
+  );
+}
+
+function jumpTo(anchor) {
+  if (typeof document === 'undefined') return;
+  const id = decodeURIComponent(String(anchor).replace(/^#/, ''));
+  document.getElementById(id)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+}
+
+export function StandardDetail({ std, color = 'var(--color-dim)' }) {
+  const aliases = std.aliases || [];
+  const anchors = Object.entries(std.anchors || {});
+  const refs = std.referencedBy || [];
+  const provedBy = std.provedBy || [];
+  const stacks = std.stacks || [];
+  const verified = typeof std.verifiedAgainst === 'string' ? std.verifiedAgainst.trim() : '';
+
+  return (
+    <div className="space-y-6 text-sm text-[var(--color-dim)]">
+      <div className="flex flex-wrap items-center gap-1.5">
+        <span className="rounded-full px-2.5 py-0.5 text-xs font-medium" style={{ color, background: tint(color, 18), boxShadow: `inset 0 0 0 1px ${color}` }}>
+          {std.category}
+        </span>
+        {std.subcategory && (
+          <span className="rounded-full px-2.5 py-0.5 text-xs shadow-[inset_0_0_0_1px_var(--color-hair-strong)]">{std.subcategory}</span>
+        )}
+        {stacks.map((s) => (
+          <span key={s} className="rounded-full px-2 py-0.5 font-mono text-xs shadow-[inset_0_0_0_1px_var(--color-hair)]">stack {s}</span>
+        ))}
+      </div>
+
+      <div className="font-mono text-xs text-[var(--color-faint)]">
+        <div>id <span className="text-[var(--color-dim)]">{std.id}</span></div>
+        {std.path && <div>arquivo <span className="text-[var(--color-dim)]">standards/{std.path}</span></div>}
+      </div>
+
+      {std.digest && (
+        <Section title="Resumo">
+          <p className="leading-relaxed text-[var(--color-fg)]">{std.digest}</p>
+        </Section>
+      )}
+
+      {aliases.length > 0 && (
+        <Section title="Também encontrado por">
+          <div className="flex flex-wrap gap-1.5">
+            {aliases.map((a, i) => (
+              <span key={`${a}-${i}`} className="rounded-full px-2 py-0.5 text-xs shadow-[inset_0_0_0_1px_var(--color-hair)]">{a}</span>
+            ))}
+          </div>
+        </Section>
+      )}
+
+      {anchors.length > 0 && (
+        <Section title="Seções">
+          <ul className="grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1">
+            {anchors.map(([name, href]) => (
+              <li key={name} className="contents">
+                <span className="font-mono text-xs leading-6 text-[var(--color-faint)]">{name}</span>
+                <button
+                  type="button" onClick={() => jumpTo(href)}
+                  className="truncate text-left font-mono text-xs leading-6 text-[var(--color-phase-proposal)] hover:underline"
+                >
+                  {href}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </Section>
+      )}
+
+      <Section title={refs.length ? `Consultado por (${refs.length})` : 'Consultado por'}>
+        {refs.length ? (
+          <div className="flex flex-wrap gap-1.5">
+            {refs.map((r, i) => <EntityLink key={`${r.agentId}-${i}`} kind="persona" id={r.agentId} chip>{`morph-${r.agentId}`}</EntityLink>)}
+          </div>
+        ) : (
+          <p>Nenhuma persona lista este standard; ele é achado por busca (<code className="font-mono text-xs">morph-spec standards --find</code>).</p>
+        )}
+      </Section>
+
+      {provedBy.length > 0 && (
+        <Section title="Provado por">
+          <ul className="space-y-1">
+            {provedBy.map((p, i) => (
+              <li key={`${p}-${i}`} className="break-all font-mono text-xs text-[var(--color-fg)]">{p}</li>
+            ))}
+          </ul>
+        </Section>
+      )}
+
+      {verified && (
+        <Section title="Verificado contra">
+          <Markdown text={verified} size="sm" />
+        </Section>
+      )}
+
+      {std.content && (
+        <Section title="Conteúdo completo">
+          <Markdown text={std.content} size="sm" />
+        </Section>
+      )}
+    </div>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function Standards() {
+  const standards = morphData.standards?.list || [];
+  const version = morphData.standards?.version;
+  const agents = morphData.agents?.list || [];
+  const [sel, setSel] = useSelection();
+  const [search, setSearch] = useState('');
+  const [categoryFilter, setCategoryFilter] = useState('');
+  const [persona, setPersona] = useState('');
+
+  const colors = useMemo(() => categoryColors(standards), [standards]);
+  const selected = useMemo(() => findStandard(standards, sel), [standards, sel]);
+
+  const isMatch = useCallback((s) => {
+    const q = search.trim().toLowerCase();
+    if (q) {
+      const hay = [s.id, s.name, s.path, s.digest, s.category, s.subcategory, ...(s.aliases || []), ...(s.tags || [])]
+        .filter(Boolean).join(' ').toLowerCase();
+      if (!hay.includes(q)) return false;
+    }
+    if (categoryFilter && s.category !== categoryFilter) return false;
+    if (persona && !(s.referencedBy || []).some((r) => r.agentId === persona)) return false;
+    return true;
+  }, [search, categoryFilter, persona]);
+
+  const hasFilter = Boolean(search.trim() || categoryFilter || persona);
+  const matchCount = useMemo(() => standards.filter(isMatch).length, [standards, isMatch]);
+  const orphanCount = standards.filter((s) => !(s.referencedBy || []).length).length;
+
+  const graph = useMemo(
+    () => buildGraph({ standards, agents, colors, isMatch, hasFilter, persona, selectedId: selected?.id }),
+    [standards, agents, colors, isMatch, hasFilter, persona, selected?.id],
+  );
+
+  const personaOptions = useMemo(
+    () => agents.filter((a) => (a.standards || []).length).map((a) => a.id),
+    [agents],
+  );
+
+  const close = useCallback(() => setSel(null), [setSel]);
+  const onNodeClick = useCallback((_e, node) => {
+    if (node.type === 'standardNode') setSel(node.data.stdId);
+    else if (node.type === 'agentNode') setPersona((p) => (p === node.data.agentId ? '' : node.data.agentId));
+  }, [setSel]);
+
+  const filters = [
+    { name: 'category', label: 'Categoria', options: graph.categories.map(([c]) => c), value: categoryFilter },
+    { name: 'persona', label: 'Persona', options: personaOptions, value: persona },
+  ];
+
+  return (
+    <div className="flex h-full flex-col">
+      <SearchFilter
+        placeholder="Buscar standard por nome, id, caminho, resumo ou apelido"
+        filters={filters}
+        onSearchChange={setSearch}
+        onFilterChange={(name, value) => {
+          if (name === 'category') setCategoryFilter(value);
+          if (name === 'persona') setPersona(value);
+        }}
+      />
+
+      <div className="relative flex-1">
+        <FlowGraph nodes={graph.nodes} edges={graph.edges} nodeTypes={nodeTypes} onNodeClick={onNodeClick} fitView />
+
+        <div className="absolute left-3 top-3 z-10 space-y-1.5 rounded-xl bg-[var(--color-ink)]/85 p-3 text-xs text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)] backdrop-blur">
+          <p className="mb-1 text-[13px] font-medium text-[var(--color-fg)]">Categorias</p>
+          {graph.categories.map(([cat, n]) => (
+            <button
+              key={cat} type="button"
+              onClick={() => setCategoryFilter((c) => (c === cat ? '' : cat))}
+              className="flex w-full items-center gap-2 text-left hover:text-[var(--color-fg)]"
+              style={{ opacity: categoryFilter && categoryFilter !== cat ? 0.45 : 1 }}
+            >
+              <span className="inline-block h-3 w-3 shrink-0 rounded" style={{ background: tint(colors[cat], 30), boxShadow: `inset 0 0 0 1px ${colors[cat]}` }} />
+              <span>{cat}</span>
+              <span className="ml-auto pl-3 text-[var(--color-faint)]">{n}</span>
+            </button>
+          ))}
+          <p className="border-t border-[var(--color-hair)] pt-2 text-[var(--color-faint)]">clique numa persona para ver os standards dela</p>
+        </div>
+
+        <div className="absolute right-3 top-3 z-10 space-y-0.5 rounded-xl bg-[var(--color-ink)]/85 px-3 py-2 text-xs text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)] backdrop-blur">
+          <div className="text-[13px] text-[var(--color-fg)]">
+            {hasFilter ? `${matchCount} de ${standards.length} standards` : `${standards.length} standards`}
+          </div>
+          <div>{graph.categories.length} categorias{version ? ` · registro v${version}` : ''}</div>
+          <div>{orphanCount} sem persona (achados por busca)</div>
+        </div>
+      </div>
+
+      <DetailPanel open={Boolean(selected)} title={selected?.name || ''} subtitle={selected?.id || ''} onClose={close}>
+        {selected && <StandardDetail std={selected} color={colors[selected.category || 'outros']} />}
+      </DetailPanel>
+    </div>
+  );
+}