@polymorphism-tech/morph-spec 8.38.0 → 8.40.0

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

@@ -1,273 +1,300 @@
-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>
-  );
-}
+import { useState, useMemo, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+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 Markdown from '../components/Markdown.jsx';
+import EntityLink, { useSelection, standardKey } from '../components/EntityLink.jsx';
+
+const RULE_COLOR = 'var(--color-phase-plan)';
+const STD_COLOR = 'var(--color-phase-proposal)';
+const NODE_W = 260;
+
+// ─── Standard resolution ──────────────────────────────────────────────────────
+
+/**
+ * A rule's @-import → the standard it names in the registry. `id` is what the
+ * Standards page selects by; with no registry match the path itself is passed,
+ * so the link still says which file the rule meant.
+ */
+function resolveStandard(ref, byPath) {
+  const path = standardKey(ref);
+  const std = byPath.get(path);
+  return {
+    path,
+    id: std?.id ?? path,
+    name: std?.name ?? path.replace(/\.md$/, '').split('/').pop(),
+    known: Boolean(std),
+  };
+}
+
+// ─── Node Components ──────────────────────────────────────────────────────────
+
+function RuleNode({ data }) {
+  return (
+    <div
+      className="cursor-pointer select-none rounded-xl bg-[var(--color-raised)] px-3.5 py-2.5 transition-opacity"
+      style={{
+        width: NODE_W,
+        boxShadow: data.selected
+          ? `inset 0 0 0 1.5px ${RULE_COLOR}`
+          : 'inset 0 0 0 1px var(--color-hair-strong)',
+        opacity: data.dimmed ? 0.3 : 1,
+      }}
+    >
+      <Handle type="source" position={Position.Right} style={{ background: RULE_COLOR, width: 7, height: 7, border: 'none' }} />
+      <div className="truncate text-[13px] font-medium leading-snug text-[var(--color-fg)]" title={data.label}>
+        {data.label}
+      </div>
+      <div className="mt-0.5 truncate text-xs text-[var(--color-dim)]">
+        {data.pathCount} {data.pathCount === 1 ? 'padrão de arquivo' : 'padrões de arquivo'}
+        {data.stacks.length > 0 ? ` · ${data.stacks.join(', ')}` : ''}
+      </div>
+    </div>
+  );
+}
+
+function StandardRefNode({ data }) {
+  return (
+    <div
+      className="cursor-pointer select-none rounded-xl bg-[var(--color-core)] px-3.5 py-2.5 transition-opacity"
+      style={{
+        width: NODE_W,
+        boxShadow: `inset 0 0 0 1px ${data.known ? 'var(--color-hair-strong)' : 'var(--color-hair)'}`,
+        opacity: data.dimmed ? 0.3 : 1,
+      }}
+      title={data.known ? `Abrir o standard ${data.path}` : `${data.path} (não está no registro de standards)`}
+    >
+      <Handle type="target" position={Position.Left} style={{ background: STD_COLOR, width: 7, height: 7, border: 'none' }} />
+      <div className="truncate text-[13px] font-medium leading-snug" style={{ color: STD_COLOR }}>
+        {data.label}
+      </div>
+      <div className="mt-0.5 truncate font-mono text-xs text-[var(--color-faint)]">{data.path}</div>
+    </div>
+  );
+}
+
+const nodeTypes = { ruleNode: RuleNode, standardRefNode: StandardRefNode };
+
+// ─── Graph Builder ────────────────────────────────────────────────────────────
+
+function matchesFilter(rule, search, stackFilter) {
+  const q = search.toLowerCase();
+  const matchSearch = !q || rule.name.toLowerCase().includes(q) || rule.stacks.some((s) => s.toLowerCase().includes(q));
+  const matchStack = !stackFilter || rule.stacks.includes(stackFilter);
+  return matchSearch && matchStack;
+}
+
+function buildGraph(rules, byPath, search, stackFilter, selected) {
+  const nodes = [];
+  const edges = [];
+  const RULE_X = 0;
+  const STD_X = NODE_W + 180;
+  const ROW_H = 78;
+
+  const hasFilter = Boolean(search || stackFilter);
+  const visible = new Set(rules.filter((r) => matchesFilter(r, search, stackFilter)).map((r) => r.name));
+  const isDimmed = (rule) => hasFilter && !visible.has(rule.name);
+
+  // A standard stays lit while at least one lit rule imports it.
+  const refs = new Map();
+  for (const rule of rules) {
+    for (const ref of rule.standardRefs) {
+      const entry = refs.get(ref) || { lit: false };
+      if (!isDimmed(rule)) entry.lit = true;
+      refs.set(ref, entry);
+    }
+  }
+
+  rules.forEach((rule, i) => {
+    nodes.push({
+      id: `rule-${rule.name}`,
+      type: 'ruleNode',
+      position: { x: RULE_X, y: i * ROW_H },
+      data: {
+        label: rule.name,
+        ruleName: rule.name,
+        pathCount: rule.paths.length,
+        stacks: rule.stacks,
+        dimmed: isDimmed(rule),
+        selected: rule.name === selected,
+        color: '#e0af68',
+      },
+    });
+  });
+
+  const refList = [...refs.keys()];
+  const offset = (rules.length * ROW_H - refList.length * ROW_H) / 2;
+  refList.forEach((ref, i) => {
+    const std = resolveStandard(ref, byPath);
+    nodes.push({
+      id: `std-${ref}`,
+      type: 'standardRefNode',
+      position: { x: STD_X, y: i * ROW_H + offset },
+      data: { label: std.name, path: std.path, standardId: std.id, known: std.known, dimmed: !refs.get(ref).lit, color: '#7aa2f7' },
+    });
+  });
+
+  for (const rule of rules) {
+    const dim = isDimmed(rule);
+    for (const ref of rule.standardRefs) {
+      edges.push({
+        id: `edge-${rule.name}-${ref}`,
+        source: `rule-${rule.name}`,
+        target: `std-${ref}`,
+        type: 'smoothstep',
+        style: { stroke: dim ? '#2a303b' : '#e0af68', strokeWidth: rule.name === selected ? 2 : 1.2, opacity: dim ? 0.3 : 0.6 },
+      });
+    }
+  }
+
+  return { nodes, edges };
+}
+
+// ─── Detail Content ───────────────────────────────────────────────────────────
+
+function Section({ title, children }) {
+  return (
+    <section>
+      <h3 className="mb-2 text-xs font-medium text-[var(--color-faint)]">{title}</h3>
+      {children}
+    </section>
+  );
+}
+
+function RuleDetail({ rule, byPath }) {
+  return (
+    <div className="space-y-6 text-sm text-[var(--color-dim)]">
+      <p className="leading-relaxed">
+        Regra do Claude Code: carregada quando o Claude edita arquivos que casam com um dos padrões abaixo, e traz junto
+        os standards que ela importa.
+      </p>
+
+      <Section title="Padrões de arquivo">
+        {rule.paths.length > 0 ? (
+          <div className="space-y-1">
+            {rule.paths.map((p) => (
+              <code key={p} className="block rounded-lg bg-white/[0.03] px-2.5 py-1.5 font-mono text-xs text-[var(--color-fg)] shadow-[inset_0_0_0_1px_var(--color-hair)]">{p}</code>
+            ))}
+          </div>
+        ) : (
+          <p className="text-xs">Nenhum padrão declarado: a regra vale para qualquer arquivo.</p>
+        )}
+      </Section>
+
+      <Section title="Stacks">
+        {rule.stacks.length > 0 ? (
+          <div className="flex flex-wrap gap-1.5">
+            {rule.stacks.map((s) => (
+              <span key={s} className="rounded-full px-2 py-0.5 font-mono text-[11px] text-[var(--color-ok)] shadow-[inset_0_0_0_1px_var(--color-hair)]">{s}</span>
+            ))}
+          </div>
+        ) : (
+          <p className="text-xs">Instalada em qualquer stack.</p>
+        )}
+      </Section>
+
+      <Section title="Standards importados">
+        {rule.standardRefs.length > 0 ? (
+          <div className="flex flex-wrap gap-1.5">
+            {rule.standardRefs.map((ref) => {
+              const std = resolveStandard(ref, byPath);
+              return (
+                <EntityLink key={ref} kind="standard" id={std.id} chip title={std.path}>
+                  {std.name}
+                </EntityLink>
+              );
+            })}
+          </div>
+        ) : (
+          <p className="text-xs">Esta regra não importa nenhum standard.</p>
+        )}
+      </Section>
+
+      <Section title="Conteúdo">
+        <p className="mb-3 font-mono text-xs text-[var(--color-faint)]">{rule.filename}</p>
+        <Markdown text={rule.content} size="sm" />
+      </Section>
+    </div>
+  );
+}
+
+// ─── Main Page ────────────────────────────────────────────────────────────────
+
+/** `?sel=` holds the rule `name` (the file name without `.md`). */
+export default function RulesMap() {
+  const { rules } = morphData;
+  const [search, setSearch] = useState('');
+  const [stackFilter, setStackFilter] = useState('');
+  const [sel, setSel] = useSelection();
+  const navigate = useNavigate();
+
+  const byPath = useMemo(
+    () => new Map((morphData.standards?.list || []).map((s) => [s.path, s])),
+    []
+  );
+
+  const allStacks = useMemo(() => [...new Set(rules.flatMap((r) => r.stacks))].sort(), [rules]);
+
+  const selectedRule = rules.find((r) => r.name === sel) || null;
+
+  const { nodes, edges } = useMemo(
+    () => buildGraph(rules, byPath, search, stackFilter, selectedRule?.name),
+    [rules, byPath, search, stackFilter, selectedRule]
+  );
+
+  const handleNodeClick = useCallback((_event, node) => {
+    if (node.type === 'ruleNode') setSel(node.data.ruleName);
+    else if (node.type === 'standardRefNode') navigate(`/standards?sel=${encodeURIComponent(node.data.standardId)}`);
+  }, [setSel, navigate]);
+
+  const closePanel = useCallback(() => setSel(null), [setSel]);
+
+  const filterConfig = [{ name: 'stack', label: 'Stack', options: allStacks, value: stackFilter }];
+
+  return (
+    <div className="flex h-full flex-col">
+      <SearchFilter
+        placeholder="Buscar regra por nome ou stack"
+        filters={filterConfig}
+        onSearchChange={setSearch}
+        onFilterChange={(name, value) => { if (name === 'stack') setStackFilter(value); }}
+      />
+
+      <div className="relative flex-1">
+        <FlowGraph nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodeClick={handleNodeClick} fitView />
+
+        <div className="absolute left-3 top-3 z-10 space-y-2 rounded-xl bg-[var(--color-ink)]/85 p-3 text-xs shadow-[inset_0_0_0_1px_var(--color-hair)] backdrop-blur">
+          <p className="mb-1 text-[var(--color-faint)]">Legenda</p>
+          <div className="flex items-center gap-2">
+            <span className="inline-block h-3.5 w-3.5 rounded bg-[var(--color-raised)] shadow-[inset_0_0_0_1px_var(--color-hair-strong)]" />
+            <span className="text-[var(--color-dim)]">Regra (clique para ler)</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="inline-block h-3.5 w-3.5 rounded" style={{ background: 'var(--color-core)', boxShadow: `inset 0 0 0 1px ${STD_COLOR}` }} />
+            <span className="text-[var(--color-dim)]">Standard importado (clique para abrir)</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-5 border-t" style={{ borderColor: RULE_COLOR, opacity: 0.7 }} />
+            <span className="text-[var(--color-dim)]">importa</span>
+          </div>
+        </div>
+
+        <div className="absolute right-3 top-3 z-10 rounded-full bg-[var(--color-ink)]/85 px-3 py-1.5 text-xs text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)] backdrop-blur">
+          {rules.length} {rules.length === 1 ? 'regra' : 'regras'}
+        </div>
+      </div>
+
+      <DetailPanel
+        open={Boolean(selectedRule)}
+        title={selectedRule?.name ?? ''}
+        subtitle={selectedRule ? 'Regra do Claude Code' : undefined}
+        onClose={closePanel}
+      >
+        {selectedRule && <RuleDetail rule={selectedRule} byPath={byPath} />}
+      </DetailPanel>
+    </div>
+  );
+}