@polymorphism-tech/morph-spec 8.38.0 → 8.40.0

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

@@ -1,366 +1,483 @@
-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 categories (v5 — all skills in skills/core/)
-const LEVEL_COLORS = {
-  'core': { bg: '#134e4a', border: '#14b8a6', label: 'Core' },
-};
-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>
-  );
-}
+import { useState, useMemo, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Handle, Position } from '@xyflow/react';
+import { Terminal, Robot, UsersThree } 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, entityHref } from '../components/EntityLink.jsx';
+import { phaseMeta } from '../lib/phases.js';
+import { splitFrontmatter } from '../lib/format.js';
+
+const SUPPORT_LABEL = 'Skills de apoio';
+const GENERIC_ID = 'persona:*';
+const GENERIC_LABEL = 'implementadores (morph-{id})';
+const SUPPORT_COLOR = 'var(--color-dim)';
+const PERSONA_COLOR = 'var(--color-ok)';
+
+const INVOKE_YES = 'invocável por você';
+const INVOKE_NO = 'só interna';
+
+const tint = (color, pct = 14) => `color-mix(in srgb, ${color} ${pct}%, var(--color-core))`;
+
+// ─── Nodes ────────────────────────────────────────────────────────────────────
+
+const HANDLE = { width: 7, height: 7, border: 0 };
+
+function PhaseNode({ data }) {
+  return (
+    <div
+      className="w-[220px] cursor-pointer select-none rounded-xl px-4 py-2.5"
+      style={{ background: tint(data.color, 18), boxShadow: `inset 0 0 0 1.5px ${data.color}` }}
+    >
+      <div className="text-[13px] font-semibold leading-tight text-[var(--color-fg)]">{data.label}</div>
+      <div className="mt-0.5 text-xs" style={{ color: data.color }}>
+        fase{data.optional ? ' opcional' : ''}
+      </div>
+      <Handle type="source" position={Position.Bottom} style={{ ...HANDLE, background: data.color }} />
+    </div>
+  );
+}
+
+function SkillNode({ data }) {
+  return (
+    <div
+      className="w-[220px] cursor-pointer select-none rounded-xl px-3.5 py-2 transition-opacity"
+      style={{
+        background: tint(data.color, 12),
+        boxShadow: `inset 0 0 0 1.5px ${data.color}`,
+        opacity: data.dimmed ? 0.2 : 1,
+      }}
+    >
+      <Handle type="target" position={Position.Top} id="top-in" style={{ ...HANDLE, background: data.color }} />
+      <div className="flex items-center gap-1.5">
+        <span className="truncate font-mono text-[13px] font-medium text-[var(--color-fg)]" title={data.label}>{data.label}</span>
+        {data.userInvocable && <Terminal weight="light" size={13} className="shrink-0 text-[var(--color-dim)]" aria-label="invocável por você" />}
+      </div>
+      <div className="mt-0.5 text-xs text-[var(--color-dim)]">
+        {data.dispatchCount > 0 ? `${data.dispatchCount} prompt${data.dispatchCount > 1 ? 's' : ''} a sub-agents` : data.sub}
+      </div>
+      <Handle type="source" position={Position.Bottom} id="bottom-out" style={{ ...HANDLE, background: data.color }} />
+      <Handle type="source" position={Position.Top} id="top-out" style={{ ...HANDLE, background: data.color, left: '70%' }} />
+    </div>
+  );
+}
+
+function PersonaNode({ data }) {
+  const Icon = data.generic ? UsersThree : Robot;
+  return (
+    <div
+      className="w-[220px] cursor-pointer select-none rounded-full px-4 py-2 transition-opacity"
+      style={{
+        background: tint(PERSONA_COLOR, 10),
+        boxShadow: `inset 0 0 0 1.5px ${PERSONA_COLOR}`,
+        opacity: data.dimmed ? 0.25 : 1,
+      }}
+    >
+      <Handle type="target" position={Position.Top} id="top-in" style={{ ...HANDLE, background: PERSONA_COLOR }} />
+      <div className="flex items-center gap-2">
+        <Icon weight="light" size={15} className="shrink-0 text-[var(--color-ok)]" />
+        <span className="truncate font-mono text-[13px] text-[var(--color-fg)]" title={data.label}>{data.label}</span>
+      </div>
+      <Handle type="target" position={Position.Bottom} id="bottom-in" style={{ ...HANDLE, background: PERSONA_COLOR }} />
+    </div>
+  );
+}
+
+function GroupNode({ data }) {
+  return (
+    <div
+      className="pointer-events-none rounded-2xl"
+      style={{ width: data.width, height: data.height, boxShadow: 'inset 0 0 0 1px var(--color-hair-strong)', background: 'rgb(255 255 255 / 0.015)' }}
+    >
+      <div className="px-4 pt-3 text-[13px] font-medium text-[var(--color-dim)]">{data.label}</div>
+    </div>
+  );
+}
+
+const nodeTypes = { phaseNode: PhaseNode, skillNode: SkillNode, personaNode: PersonaNode, groupNode: GroupNode };
+
+// ─── Graph model ──────────────────────────────────────────────────────────────
+
+/** The phase a skill belongs to: its own `phase`, or the phase whose `skill` it is. */
+function skillPhaseOf(skill, phases) {
+  if (skill.phase) return skill.phase;
+  return phases.find((p) => p.skill === skill.id)?.id || null;
+}
+
+/** The persona targets of a skill's dispatches: generic ones go to the one "implementadores" node. */
+function dispatchTargets(skill) {
+  const out = new Set();
+  for (const d of skill.dispatches || []) {
+    if (d.generic) out.add(GENERIC_ID);
+    else for (const p of d.personas || []) out.add(p);
+  }
+  return [...out];
+}
+
+const COL = 250;
+const ROW_PHASE = 0;
+const ROW_SKILL = 120;
+const ROW_PERSONA = 290;
+const ROW_SUPPORT = 440;
+const SUPPORT_PER_ROW = 5;
+
+function buildGraph({ skills, phases, agents, isMatch, hasFilter }) {
+  const nodes = [];
+  const edges = [];
+  const phaseSkills = new Map(); // phaseId → skill[]
+  const support = [];
+  for (const s of skills) {
+    const ph = skillPhaseOf(s, phases);
+    if (ph && phases.some((p) => p.id === ph)) {
+      if (!phaseSkills.has(ph)) phaseSkills.set(ph, []);
+      phaseSkills.get(ph).push(s);
+    } else support.push(s);
+  }
+
+  // Row 0 + 1: one column per phase, its skill(s) below it.
+  phases.forEach((p, i) => {
+    const meta = phaseMeta(p.id);
+    const x = i * COL;
+    nodes.push({
+      id: `phase:${p.id}`, type: 'phaseNode', position: { x, y: ROW_PHASE },
+      data: { label: meta.label, color: meta.color, optional: p.optional, phaseId: p.id },
+    });
+    (phaseSkills.get(p.id) || []).forEach((s, j) => {
+      nodes.push(skillNode(s, x, ROW_SKILL + j * 70, meta.color, meta.label));
+      edges.push({
+        id: `e:phase:${p.id}->${s.id}`, source: `phase:${p.id}`, target: s.id, targetHandle: 'top-in',
+        style: { stroke: meta.color, strokeWidth: 1.5, opacity: hasFilter && !isMatch(s) ? 0.12 : 0.8 },
+      });
+    });
+  });
+
+  // Row 3+: the support skills, in a labelled group under the personas.
+  const supportCols = Math.min(SUPPORT_PER_ROW, Math.max(1, support.length));
+  const supportRows = Math.ceil(support.length / supportCols);
+  const supportWidth = supportCols * COL;
+  const gridWidth = Math.max(phases.length * COL, supportWidth);
+  const supportX0 = (gridWidth - supportWidth) / 2;
+  if (support.length) {
+    nodes.push({
+      id: 'group:support', type: 'groupNode', position: { x: supportX0 - 15, y: ROW_SUPPORT - 45 },
+      data: { label: `${SUPPORT_LABEL} (fora do pipeline de fases)`, width: supportWidth, height: supportRows * 80 + 45 },
+      selectable: false, draggable: false, focusable: false, zIndex: -1,
+    });
+  }
+  support.forEach((s, i) => {
+    const x = supportX0 + (i % supportCols) * COL;
+    const y = ROW_SUPPORT + Math.floor(i / supportCols) * 80;
+    nodes.push(skillNode(s, x, y, SUPPORT_COLOR, SUPPORT_LABEL));
+  });
+
+  // Row 2: the personas the skills dispatch prompts to.
+  const personaIds = new Set();
+  for (const s of skills) for (const t of dispatchTargets(s)) personaIds.add(t);
+  const agentOrder = agents.map((a) => a.id);
+  const personas = [...personaIds].sort((a, b) => {
+    if (a === GENERIC_ID) return 1;
+    if (b === GENERIC_ID) return -1;
+    return (agentOrder.indexOf(a) + 1 || 99) - (agentOrder.indexOf(b) + 1 || 99);
+  });
+  const personaX0 = (gridWidth - personas.length * COL) / 2;
+  personas.forEach((pid, i) => {
+    const touched = skills.filter((s) => dispatchTargets(s).includes(pid));
+    nodes.push({
+      id: `persona:${pid}`, type: 'personaNode', position: { x: personaX0 + i * COL, y: ROW_PERSONA },
+      data: {
+        label: pid === GENERIC_ID ? GENERIC_LABEL : `morph-${pid}`,
+        personaId: pid === GENERIC_ID ? null : pid,
+        generic: pid === GENERIC_ID,
+        color: PERSONA_COLOR,
+        dimmed: hasFilter && !touched.some(isMatch),
+      },
+    });
+  });
+
+  // skill → persona, from the dispatch prompts.
+  const supportIds = new Set(support.map((s) => s.id));
+  for (const s of skills) {
+    const fromSupport = supportIds.has(s.id);
+    for (const pid of dispatchTargets(s)) {
+      edges.push({
+        id: `e:${s.id}->persona:${pid}`,
+        source: s.id, sourceHandle: fromSupport ? 'top-out' : 'bottom-out',
+        target: `persona:${pid}`, targetHandle: fromSupport ? 'bottom-in' : 'top-in',
+        style: { stroke: PERSONA_COLOR, strokeWidth: 1.25, strokeDasharray: '5 4', opacity: hasFilter && !isMatch(s) ? 0.1 : 0.6 },
+      });
+    }
+  }
+
+  return { nodes, edges, supportCount: support.length, linkedCount: skills.length - support.length };
+
+  function skillNode(s, x, y, color, sub) {
+    return {
+      id: s.id, type: 'skillNode', position: { x, y },
+      data: {
+        label: s.id, sub, color, skillId: s.id,
+        userInvocable: Boolean(s.userInvocable),
+        dispatchCount: (s.dispatches || []).length,
+        dimmed: hasFilter && !isMatch(s),
+      },
+    };
+  }
+}
+
+// ─── 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 PromptBlock({ text, label = 'Prompt enviado ao sub-agent' }) {
+  return (
+    <div
+      className="overflow-hidden rounded-xl"
+      style={{ background: tint('var(--color-phase-implement)', 8), boxShadow: 'inset 0 0 0 1px color-mix(in srgb, var(--color-phase-implement) 45%, transparent)' }}
+    >
+      <div className="flex items-center gap-1.5 border-b border-[var(--color-hair)] px-3 py-1.5 text-xs text-[var(--color-phase-implement)]">
+        <Robot weight="light" size={14} />
+        {label}
+      </div>
+      <pre className="m-0 overflow-x-auto whitespace-pre-wrap px-3 py-2.5 font-mono text-xs leading-relaxed text-[var(--color-fg)]">{text}</pre>
+    </div>
+  );
+}
+
+/** Plain text of a hast node (the `node` react-markdown hands to overrides). */
+function hastText(node) {
+  if (!node) return '';
+  if (node.type === 'text') return node.value || '';
+  return (node.children || []).map(hastText).join('');
+}
+
+function isDispatchBlock(text) {
+  const t = text.trimStart();
+  return t.startsWith('dispatch Agent') || t.includes('subagent_type');
+}
+
+const SKILL_MD_COMPONENTS = {
+  pre({ node, ...rest }) {
+    const text = hastText(node);
+    if (isDispatchBlock(text)) return <PromptBlock text={text.replace(/\n$/, '')} />;
+    return <pre {...rest} />;
+  },
+};
+
+function DispatchItem({ d }) {
+  const personas = d.personas || [];
+  return (
+    <li className="space-y-2 rounded-xl bg-white/[0.02] p-3 shadow-[inset_0_0_0_1px_var(--color-hair)]">
+      <div className="flex flex-wrap items-center gap-1.5 text-xs text-[var(--color-dim)]">
+        <span>Para</span>
+        {d.generic ? (
+          <span className="rounded-full px-2 py-0.5 font-mono text-xs text-[var(--color-fg)] shadow-[inset_0_0_0_1px_var(--color-hair-strong)]">
+            qualquer implementador (morph-{'{id}'})
+          </span>
+        ) : personas.length ? (
+          personas.map((p) => <EntityLink key={p} kind="persona" id={p} chip>{`morph-${p}`}</EntityLink>)
+        ) : d.builtin?.length ? (
+          d.builtin.map((b) => (
+            <span key={b} className="rounded-full px-2 py-0.5 font-mono text-xs text-[var(--color-fg)] shadow-[inset_0_0_0_1px_var(--color-hair-strong)]" title="sub-agent nativo do Claude Code, não uma persona do morph-spec">
+              {b}
+            </span>
+          ))
+        ) : (
+          <span>sub-agent não identificado</span>
+        )}
+      </div>
+      {d.context && (
+        <div className="text-sm text-[var(--color-dim)]">
+          <Markdown text={d.context} size="sm" />
+        </div>
+      )}
+      {d.text && <PromptBlock text={d.text} />}
+    </li>
+  );
+}
+
+export function SkillDetail({ skill, phases = morphData.phases?.list || [] }) {
+  const phaseId = skillPhaseOf(skill, phases);
+  const dispatches = skill.dispatches || [];
+  const stacks = skill.stacks || [];
+  const body = useMemo(() => splitFrontmatter(skill.content || '').body, [skill.content]);
+
+  return (
+    <div className="space-y-6 text-sm text-[var(--color-dim)]">
+      {skill.description && <p className="leading-relaxed text-[var(--color-fg)]">{skill.description}</p>}
+
+      <dl className="grid grid-cols-[max-content_1fr] gap-x-4 gap-y-2 rounded-xl bg-white/[0.03] px-4 py-3 shadow-[inset_0_0_0_1px_var(--color-hair)]">
+        {skill.whenToInvoke && (
+          <>
+            <dt className="text-xs leading-6 text-[var(--color-faint)]">Quando usar</dt>
+            <dd className="leading-6">{skill.whenToInvoke}</dd>
+          </>
+        )}
+        <dt className="text-xs leading-6 text-[var(--color-faint)]">Fase</dt>
+        <dd className="leading-6">
+          {phaseId
+            ? <EntityLink kind="phase" id={phaseId}>{phaseMeta(phaseId).label}</EntityLink>
+            : <span>Skill de apoio (não pertence a uma fase)</span>}
+        </dd>
+        <dt className="text-xs leading-6 text-[var(--color-faint)]">Invocação</dt>
+        <dd className="leading-6">
+          {skill.userInvocable
+            ? <>você pode rodar <code className="rounded bg-white/[0.06] px-1.5 py-0.5 font-mono text-xs text-[var(--color-fg)]">/{skill.id}</code></>
+            : 'interna: o orquestrador a carrega, você não a chama direto'}
+        </dd>
+        {stacks.length > 0 && (
+          <>
+            <dt className="text-xs leading-6 text-[var(--color-faint)]">Stacks</dt>
+            <dd className="flex flex-wrap gap-1.5 py-0.5">
+              {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)]">{s}</span>
+              ))}
+            </dd>
+          </>
+        )}
+        {skill.allowedTools?.length > 0 && (
+          <>
+            <dt className="text-xs leading-6 text-[var(--color-faint)]">Ferramentas</dt>
+            <dd className="flex flex-wrap gap-1.5 py-0.5">
+              {skill.allowedTools.map((t) => (
+                <span key={t} className="rounded-full px-2 py-0.5 font-mono text-xs shadow-[inset_0_0_0_1px_var(--color-hair)]">{t}</span>
+              ))}
+            </dd>
+          </>
+        )}
+      </dl>
+
+      {dispatches.length > 0 && (
+        <Section title={`Prompts enviados a sub-agents (${dispatches.length})`}>
+          <ul className="space-y-3">
+            {dispatches.map((d) => <DispatchItem key={d.index} d={d} />)}
+          </ul>
+        </Section>
+      )}
+
+      {body.trim() && (
+        <Section title="SKILL.md completo">
+          <Markdown text={body} size="sm" components={SKILL_MD_COMPONENTS} />
+        </Section>
+      )}
+    </div>
+  );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function SkillsLibrary() {
+  const skills = morphData.skills || [];
+  const phases = morphData.phases?.list || [];
+  const agents = morphData.agents?.list || [];
+  const navigate = useNavigate();
+  const [sel, setSel] = useSelection();
+  const [search, setSearch] = useState('');
+  const [phaseFilter, setPhaseFilter] = useState('');
+  const [invokeFilter, setInvokeFilter] = useState('');
+
+  const phaseOptions = useMemo(() => [...phases.map((p) => phaseMeta(p.id).label), SUPPORT_LABEL], [phases]);
+
+  const isMatch = useCallback((s) => {
+    const q = search.trim().toLowerCase();
+    if (q) {
+      const hay = [s.id, s.name, s.description, s.whenToInvoke].filter(Boolean).join(' ').toLowerCase();
+      if (!hay.includes(q)) return false;
+    }
+    if (phaseFilter) {
+      const ph = skillPhaseOf(s, phases);
+      const label = ph ? phaseMeta(ph).label : SUPPORT_LABEL;
+      if (label !== phaseFilter) return false;
+    }
+    if (invokeFilter === INVOKE_YES && !s.userInvocable) return false;
+    if (invokeFilter === INVOKE_NO && s.userInvocable) return false;
+    return true;
+  }, [search, phaseFilter, invokeFilter, phases]);
+
+  const hasFilter = Boolean(search.trim() || phaseFilter || invokeFilter);
+  const matchCount = useMemo(() => skills.filter(isMatch).length, [skills, isMatch]);
+
+  const graph = useMemo(
+    () => buildGraph({ skills, phases, agents, isMatch, hasFilter }),
+    [skills, phases, agents, isMatch, hasFilter],
+  );
+  const dispatchingCount = skills.filter((s) => (s.dispatches || []).length > 0).length;
+
+  const selected = sel ? skills.find((s) => s.id === sel) : null;
+  const selectedPhase = selected ? skillPhaseOf(selected, phases) : null;
+  const close = useCallback(() => setSel(null), [setSel]);
+
+  const onNodeClick = useCallback((_e, node) => {
+    if (node.type === 'skillNode') setSel(node.data.skillId);
+    else if (node.type === 'phaseNode') navigate(entityHref('phase', node.data.phaseId));
+    else if (node.type === 'personaNode' && node.data.personaId) navigate(entityHref('persona', node.data.personaId));
+  }, [setSel, navigate]);
+
+  const filters = [
+    { name: 'phase', label: 'Fase', options: phaseOptions, value: phaseFilter },
+    { name: 'invoke', label: 'Invocação', options: [INVOKE_YES, INVOKE_NO], value: invokeFilter },
+  ];
+
+  return (
+    <div className="flex h-full flex-col">
+      <SearchFilter
+        placeholder="Buscar skill por nome, descrição ou quando usar"
+        filters={filters}
+        onSearchChange={setSearch}
+        onFilterChange={(name, value) => {
+          if (name === 'phase') setPhaseFilter(value);
+          if (name === 'invoke') setInvokeFilter(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-2 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="text-[13px] font-medium text-[var(--color-fg)]">Legenda</p>
+          <div className="flex items-center gap-2">
+            <span className="inline-block h-3 w-8 rounded" style={{ boxShadow: 'inset 0 0 0 1.5px var(--color-phase-plan)' }} />
+            fase → skill que a conduz
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="inline-block h-3 w-8 rounded" style={{ boxShadow: `inset 0 0 0 1.5px ${SUPPORT_COLOR}` }} />
+            skill de apoio (sem fase)
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="inline-block w-8 border-t-2 border-dashed" style={{ borderColor: PERSONA_COLOR }} />
+            skill → sub-agent que ela despacha
+          </div>
+          <div className="flex items-center gap-2">
+            <Terminal weight="light" size={13} className="ml-2.5 mr-2.5" />
+            você pode rodar com /nome
+          </div>
+        </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 ${skills.length} skills` : `${skills.length} skills`}
+          </div>
+          <div>{graph.linkedCount} conduzem uma fase · {graph.supportCount} de apoio</div>
+          <div>{dispatchingCount} despacham sub-agents</div>
+        </div>
+      </div>
+
+      <DetailPanel
+        open={Boolean(selected)}
+        title={selected?.name || ''}
+        subtitle={selected ? (selectedPhase ? `Skill da fase ${phaseMeta(selectedPhase).label}` : 'Skill de apoio') : ''}
+        onClose={close}
+      >
+        {selected && <SkillDetail skill={selected} phases={phases} />}
+      </DetailPanel>
+    </div>
+  );
+}