@polymorphism-tech/morph-spec 9.0.0 → 9.2.0

package/src/dashboard/app/components/KnowledgeMarkdown.jsx

@@ -2,9 +2,6 @@ import morphData from 'virtual:morph-data';
 import Markdown from './Markdown.jsx';
 import EntityLink, { standardKey } from './EntityLink.jsx';
 
-/**
- * Names of things that have a page. Built once from the knowledge module.
- */
 const skillIds = new Set((morphData.skills || []).map((s) => s.id));
 const personaIds = new Set((morphData.agents?.list || []).map((a) => a.id));
 const standardByKey = new Map();
@@ -13,13 +10,6 @@ for (const s of morphData.standards?.list || []) {
   standardByKey.set(s.path, s.id);
 }
 
-/**
- * What an inline code span names, if it names something with a page:
- * `morph-plan` or `/morph-plan` → skill, `morph-dotnet-senior` → persona,
- * a standard id or path → standard.
- *
- * @returns {{ kind: string, id: string } | null}
- */
 export function resolveMention(text) {
   const t = String(text).trim();
   const bare = t.replace(/^\//, '');
@@ -47,7 +37,6 @@ function InlineCode({ className, children, node, ...rest }) {
   return <code className={className} {...rest}>{children}</code>;
 }
 
-/** Markdown for framework and feature text: code spans that name a skill, persona or standard become links. */
 export default function KnowledgeMarkdown({ components, ...props }) {
   return <Markdown {...props} components={{ code: InlineCode, ...components }} />;
 }

package/src/dashboard/app/components/Markdown.jsx

@@ -6,7 +6,6 @@ import { splitFrontmatter } from '../lib/format.js';
 const REMARK = [remarkGfm];
 const REHYPE = [rehypeSlug];
 
-/** Frontmatter keys worth showing, in the order a reader wants them. */
 const META_ORDER = ['name', 'description', 'when_to_use', 'user-invocable', 'stacks', 'version', 'cliVersion'];
 
 function MetaBlock({ meta }) {
@@ -26,14 +25,6 @@ function MetaBlock({ meta }) {
   );
 }
 
-/**
- * Rendered markdown for every long text in the app: feature artifacts, skills,
- * standards, the charter. Frontmatter is lifted into a metadata block instead
- * of being printed as text.
- *
- * @param {{ text: string, components?: object, className?: string, size?: 'md'|'sm' }} props
- *   `sm` is for side panels, where the reading column is narrower.
- */
 export default function Markdown({ text, components, className = '', size = 'md' }) {
   const { meta, body } = splitFrontmatter(text || '');
   return (

package/src/dashboard/app/components/PhaseRail.jsx

@@ -1,16 +1,5 @@
 import { PHASES, PHASE_INDEX, GATE_LABEL, phaseMeta } from '../lib/phases.js';
 
-/**
- * The phase rail: one segment per phase, a notch after each phase that ends in
- * an approval gate. The same motif is used in the feature list (sm) and in the
- * feature header (lg), so a feature's progress always reads the same way.
- *
- * Segment state is derived, never stored:
- *   done     — before the current phase, or the whole feature is completed
- *   current  — the derived phase of an active feature
- *   skipped  — an optional phase (uiux) the feature went past without its gate
- *   todo     — after the current phase
- */
 export function segmentStates(feature) {
   const idx = PHASE_INDEX[feature.phase] ?? 0;
   const finished = feature.status === 'completed';

package/src/dashboard/app/components/SearchFilter.jsx

@@ -1,10 +1,6 @@
 import { useState } from 'react';
 import { MagnifyingGlass } from '@phosphor-icons/react';
 
-/**
- * The toolbar of the knowledge pages: a search box and a few selects. The
- * `value` of each filter is controlled by the page; the search text is local.
- */
 export default function SearchFilter({ placeholder = 'Buscar', filters = [], onSearchChange, onFilterChange, children }) {
   const [search, setSearch] = useState('');
   function handleSearchChange(e) {

package/src/dashboard/app/components/Sidebar.jsx

@@ -30,10 +30,6 @@ const linkClass = ({ isActive }) => [
   isActive ? 'bg-white/[0.08] text-[var(--color-fg)] shadow-[inset_0_1px_0_rgb(255_255_255_/_0.06)]' : 'text-[var(--color-dim)] hover:bg-white/[0.04] hover:text-[var(--color-fg)]',
 ].join(' ');
 
-/**
- * Switching project keeps the page: from a feature's detail it lands on the
- * other project's feature list, from Activity on the other project's Activity.
- */
 function ProjectSwitcher({ portfolio, current }) {
   const navigate = useNavigate();
   const { pathname } = useLocation();
@@ -122,7 +118,6 @@ export default function Sidebar({ portfolio, current, pulse, onSearch }) {
   );
 }
 
-/** The same destinations as a compact bar for narrow screens. */
 export function MobileNav({ current, onSearch }) {
   const items = [
     { to: '/', label: 'Portfólio' },

package/src/dashboard/app/hooks/useMorphQuery.js

@@ -1,18 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 
 /**
- * Fetch a `/api/morph/*` resource and refetch it whenever the dev server
- * reports that the project's `.morph/` changed in the given scope.
- *
- * `scope` matches the server's invalidation: 'features' (feature.json,
- * slice reports, artifacts) or 'activity' (events.jsonl). A refetch keeps the old
- * data on screen until the new one arrives — no flash of "loading" while an
- * agent is working.
- *
+ * A refetch keeps the old data on screen until the new one arrives.
  * @param {string|null} url - null skips the request
- * @param {{ scope?: string|string[], project?: string }} [opts] - `scope`: 'features',
- *   'activity' or 'projects'; `project`: only changes of this project refetch
- * @returns {{ data: any, error: string|null, loading: boolean, refreshedAt: number|null, refetch: () => void }}
  */
 export function useMorphQuery(url, { scope = 'features', project } = {}) {
   const [state, setState] = useState({ data: null, error: null, loading: Boolean(url), refreshedAt: null });

package/src/dashboard/app/hooks/usePref.js

@@ -11,10 +11,7 @@ function read(key, fallback) {
   }
 }
 
-/**
- * A per-browser preference (view mode, filters). Storage can be unavailable or
- * throw (private mode, SSR); the value then simply does not persist.
- */
+/** Storage can be unavailable or throw (private mode, SSR); the value then does not persist. */
 export function usePref(key, fallback) {
   const [value, setValue] = useState(() => (typeof window === 'undefined' ? fallback : read(key, fallback)));
   const set = useCallback((next) => {
@@ -27,7 +24,6 @@ export function usePref(key, fallback) {
   return [value, set];
 }
 
-/** Re-render every `ms` so relative times ("há 30 s") and "working now" stay true. */
 export function useNow(ms = 15_000) {
   const [now, setNow] = useState(() => Date.now());
   useEffect(() => {

package/src/dashboard/app/lib/format.js

@@ -8,7 +8,6 @@ const UNITS = [
   ['minute', 60],
 ];
 
-/** "há 12 minutos" — or an em dash when there is no date. */
 export function timeAgo(iso, now = Date.now()) {
   const t = Date.parse(iso || '');
   if (Number.isNaN(t)) return '—';
@@ -56,7 +55,6 @@ export function duration(seconds) {
   return `${Math.floor(m / 60)} h ${m % 60} min`;
 }
 
-/** Strip a leading YAML frontmatter block, returning both parts. */
 export function splitFrontmatter(text) {
   const m = /^---\r?\n([\s\S]*?)\r?\n---\r?\n?/.exec(text || '');
   if (!m) return { meta: null, body: text || '' };

package/src/dashboard/app/lib/phases.js

@@ -1,8 +1,4 @@
-/**
- * Display vocabulary for the phase pipeline. The ORDER and the optional flag
- * come from framework/phases.json (morphData.phases); this file only adds the
- * words and the colour token each phase is shown with.
- */
+/** The ORDER and the optional flag come from framework/phases.json; this file only adds words and colours. */
 import morphData from 'virtual:morph-data';
 
 const LABELS = {

package/src/dashboard/app/lib/project.js

@@ -3,10 +3,8 @@ import { useLocation } from 'react-router-dom';
 import { usePref } from '../hooks/usePref.js';
 import { useMorphQuery } from '../hooks/useMorphQuery.js';
 
-/** The live API of one project. */
 export const apiBase = (id) => `/api/morph/p/${encodeURIComponent(id)}`;
 
-/** A page of one project: `/p/{id}/features`, `/p/{id}/features/{name}`, `/p/{id}/activity`. */
 export const projectHref = (id, sub = 'features') => `/p/${encodeURIComponent(id)}/${sub}`;
 
 export const featureHref = (project, name, query = '') =>
@@ -14,10 +12,8 @@ export const featureHref = (project, name, query = '') =>
 
 const PROJECTS_CHANGED = 'morph:projects-changed';
 
-/** Tell every reader of the portfolio (page, sidebar, search) to read it again. */
 export const announceProjectsChanged = () => window.dispatchEvent(new Event(PROJECTS_CHANGED));
 
-/** The portfolio: registered projects, their summaries, and the ones found next to them. */
 export function useProjects() {
   const q = useMorphQuery('/api/morph/projects', { scope: 'projects' });
   const refetch = useRef(q.refetch);
@@ -30,14 +26,6 @@ export function useProjects() {
   return q;
 }
 
-/**
- * The project the person is looking at: the one in the URL, else the last one
- * they opened, else the one the dashboard was launched from. Knowledge pages
- * have no project in the URL but the sidebar still needs one to link to.
- *
- * @param {{ launch?: string|null, projects?: Array<{id: string}> }|null} portfolio
- * @returns {{ id: string|null, inUrl: boolean }}
- */
 export function useCurrentProject(portfolio) {
   const { pathname } = useLocation();
   const m = /^\/p\/([^/]+)/.exec(pathname);

package/src/dashboard/app/main.jsx

@@ -1,13 +1,13 @@
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { BrowserRouter } from 'react-router-dom';
-import App from './App.jsx';
-import './styles/index.css';
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>
-  </StrictMode>
-);
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './styles/index.css';
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);

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

@@ -10,11 +10,7 @@ import Markdown from '../components/Markdown.jsx';
 import EntityLink, { useSelection } from '../components/EntityLink.jsx';
 import { phaseMeta } from '../lib/phases.js';
 
-/**
- * `agents.json → color` is a color NAME (blue, cyan…), the one Claude Code
- * paints the sub-agent with. The map reads the same name, so a persona looks
- * the same here and in the terminal.
- */
+/** Color NAMES, the ones Claude Code paints the sub-agent with. */
 const COLOR_HEX = {
   blue: '#60a5fa',
   cyan: '#22d3ee',
@@ -29,13 +25,11 @@ const COLOR_HEX = {
 };
 const FALLBACK_HEX = '#9ca3af';
 
-/** The ONE color lookup: nodes, edges, detail badge and legend all read it. */
 const personaColor = (agent) => COLOR_HEX[agent?.color] || FALLBACK_HEX;
 
 /** `'*'` in a persona's `stack` means "every stack" — it is not a stack of its own. */
 const UNIVERSAL_STACK = '*';
 
-/** The node of the human + main thread. Never a persona id. */
 const PRINCIPAL_ID = 'principal';
 
 const NODE_W = 220;
@@ -81,7 +75,6 @@ function buildLayout(nodes, edges) {
   });
 }
 
-/** Skills whose dispatch lines name this persona, or dispatch any implementer. */
 function dispatchingSkills(agent) {
   const implementer = (agent.activePhases || []).includes('implement');
   return (morphData.skills || []).filter((s) => (s.dispatches || []).some(

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

@@ -29,13 +29,11 @@ const SLICE_STATUS = {
   pendente: { label: 'pendente', tone: 'text-[var(--color-faint)]', icon: Circle },
 };
 
-// An unfinished slice whose dependencies all have a final report can start now.
 function isReady(sl, byId) {
   if (sl.status === 'feito') return false;
   return (sl.depends || []).every((d) => byId[d]?.status === 'feito');
 }
 
-/** `vscode://file/…` opens the file in the editor from the browser. */
 export function editorLink(absPath) {
   return `vscode://file/${encodeURI(String(absPath).replace(/\\/g, '/'))}`;
 }
@@ -62,7 +60,6 @@ function EditorButton({ path, label = 'Abrir no VS Code' }) {
   );
 }
 
-/** What a person should expect next, in one sentence. */
 export function nextAction(f) {
   if (f.status === 'completed') return `Concluída${f.archivedAt ? ` ${timeAgo(f.archivedAt)}` : ''}.`;
   if (f.status === 'abandoned') return 'Abandonada.';
@@ -579,8 +576,7 @@ export default function FeatureDetail() {
   const tab = TABS.some((t) => t.id === params.get('tab')) ? params.get('tab') : 'overview';
   const doc = params.get('doc');
   const { data, error, loading } = useMorphQuery(`${apiBase(project)}/features/${encodeURIComponent(name)}`, { project });
-  // The cost rides on the activity endpoint (it owns the event stream); one
-  // line of feed is enough to get it, and it refreshes with the log.
+  // The cost rides on the activity endpoint (it owns the event stream).
   const costQuery = useMorphQuery(`${apiBase(project)}/activity?feature=${encodeURIComponent(name)}&limit=1`, { scope: 'activity', project });
   const [slicesView, setSlicesView] = usePref('slices.view', 'list');
   const now = useNow();

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

@@ -14,7 +14,6 @@ import { isFinished } from '../../scanner/feature-status.js';
 
 const COMPLETED_PAGE = 30;
 const BOARD_DONE_LIMIT = 8;
-/** An event this recent means an agent is working on the feature right now. */
 export const WORKING_MS = 3 * 60 * 1000;
 
 const LOCATION_ICON = { worktree: GitBranch, archive: Archive, root: HouseSimple };
@@ -73,7 +72,6 @@ export function stageText(f) {
   return phaseMeta(f.phase).label;
 }
 
-/** The second line of a feature: what just happened while it is live, else where it stands. */
 function subline(f, now) {
   if (!isFinished(f) && f.lastActivity?.title) {
     return <>{isWorking(f, now) && <WorkingDot />}<span className="truncate">{f.lastActivity.title}, {timeAgo(f.lastActivity.titleTs, now)}</span></>;
@@ -243,10 +241,6 @@ const chipClass = (on) => [
   on ? 'bg-white/[0.09] text-[var(--color-fg)] shadow-[inset_0_0_0_1px_var(--color-hair-strong)]' : 'text-[var(--color-faint)] shadow-[inset_0_0_0_1px_var(--color-hair)] hover:text-[var(--color-dim)]',
 ].join(' ');
 
-/**
- * The feature home. All state comes in as props so the view renders the same
- * with the live API and with the smoke test's fixture.
- */
 export function FeaturesView({
   data, query, onQuery, completedShown, onShowMore,
   view = 'list', onView = () => {}, types = [], onTypes = () => {}, sort = 'updated', onSort = () => {},
@@ -329,7 +323,7 @@ export function FeaturesView({
       )}
       {info.initialized && !info.legacyStateOnly && features.length === 0 && (
         <Empty title="Nenhuma feature ainda">
-          No Claude Code, comece uma com <code className="font-mono text-[var(--color-fg)]">/morph-proposal</code>, que entrevista e escreve o plano. Ela aparece aqui assim que o <code className="font-mono">feature.json</code> nascer.
+          No Claude Code, comece uma com <code className="font-mono text-[var(--color-fg)]">/morph-plan</code>, que entrevista e escreve o plano. Ela aparece aqui assim que o <code className="font-mono">feature.json</code> nascer.
         </Empty>
       )}
       {features.length > 0 && visible.length === 0 && (
@@ -374,7 +368,6 @@ export default function Features() {
   const now = useNow();
   const searchRef = useRef(null);
 
-  // `/` jumps to the search, like most dev tools.
   useEffect(() => {
     const onKey = (e) => {
       if (e.key !== '/' || e.ctrlKey || e.metaKey || e.altKey) return;

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

@@ -18,7 +18,6 @@ function personasIn(phaseId) {
   return (morphData.agents?.list || []).filter((a) => a.activePhases?.includes(phaseId));
 }
 
-/** The whole flow on one screen: phase, the skill that runs it, who works in it, the gate that closes it. */
 export function Flow() {
   return (
     <section aria-label="O fluxo do morph-spec" className="bezel">

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

@@ -6,12 +6,7 @@ import FlowGraph from '../components/FlowGraph.jsx';
 import DetailPanel from '../components/DetailPanel.jsx';
 import EntityLink, { useSelection } from '../components/EntityLink.jsx';
 
-/**
- * Every event the scanner can report. `when` and `power` are what the panel
- * explains; `canBlock` is the badge on the graph (the tool-call veto).
- * Colors are the dashboard palette as hex, because the MiniMap cannot read
- * CSS variables.
- */
+/** Colors are hex because the MiniMap cannot read CSS variables. */
 const EVENTS = {
   'session-start': {
     label: 'Início da sessão', color: '#73daca',
@@ -69,12 +64,7 @@ function eventMeta(key) {
   return EVENTS[key] || { label: key, color: '#8d97a5', when: 'Evento sem descrição no dashboard.', power: '' };
 }
 
-/**
- * The URL key of one registration. A hook file can register more than once
- * under the same event with different matchers, so the name alone is not
- * unique: `?sel=` holds `event:name:matcher`. A bare hook name also works and
- * opens that hook's first registration.
- */
+/** A hook can register more than once under one event, so `?sel=` holds `event:name:matcher`. */
 export function hookKey(hook) {
   return `${hook.event}:${hook.name}:${hook.matcher || ''}`;
 }
@@ -89,8 +79,6 @@ function matcherText(hook) {
   return eventMeta(hook.event).toolEvent ? 'todas as ferramentas' : null;
 }
 
-// ─── Nodes ────────────────────────────────────────────────────────────────────
-
 const NODE_W = 280;
 const ROW_H = 26;
 const HEAD_H = 58;
@@ -161,11 +149,6 @@ function ToolNode() {
 
 const nodeTypes = { eventGroupNode: EventGroupNode, toolNode: ToolNode };
 
-// ─── Layout ───────────────────────────────────────────────────────────────────
-// Main row: session-start → user-prompt → pre-tool-use → tool → post-tool-use → stop / pre-compact
-// Second row: events outside the tool-call flow (worktree pair, teammate-idle,
-// unregistered hooks and any event this page does not know).
-
 const COL_GAP = NODE_W + 90;
 const MAIN_ROW = ['session-start', 'user-prompt', 'pre-tool-use', '__tool__', 'post-tool-use'];
 const SIDE_ROW = ['worktree-create', 'worktree-remove', 'teammate-idle', 'unregistered'];
@@ -231,8 +214,6 @@ function buildNodesAndEdges(hooksByEvent, onSelectHook, selectedKey) {
   return { nodes, edges };
 }
 
-// ─── Panels ───────────────────────────────────────────────────────────────────
-
 function Section({ title, children }) {
   return (
     <section>
@@ -369,8 +350,6 @@ function ToolDetail() {
   );
 }
 
-// ─── Main Page ────────────────────────────────────────────────────────────────
-
 export default function HookInspector() {
   const { hooks } = morphData;
   const [sel, setSel] = useSelection();

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

@@ -9,7 +9,6 @@ import { phaseMeta, GATE_LABEL } from '../lib/phases.js';
 
 const phaseColor = (id) => `var(--color-phase-${id})`;
 
-/** What each approval gate checks, in the words a reader of the pipeline needs. */
 const GATE_CHECKS = {
   plan: 'Confere o plano: o problema, o que fica de fora, os cenários com a prova de cada um e as fatias. Depois dele o plan.md congela (só a errata cresce).',
   uiux: 'Confere o design das telas (mockups e checklist de tela). É opcional: só existe quando a feature passa pela fase de UI/UX, depois do plano.',
@@ -65,7 +64,6 @@ const GATE_W = 150;
 const GATE_H = 32;
 const GAP = 48;
 
-/** Left to right: each phase, then its gate (when it has one), then the next phase. */
 function buildPipelineGraph(phases, sel) {
   const nodes = [];
   const edges = [];
@@ -131,7 +129,6 @@ function Chip({ children }) {
 // Exported for the render smoke test: no page state, only the phase and the personas.
 export function PhaseDetail({ phase, agents }) {
   const color = phaseColor(phase.id);
-  // Personas this phase's skill dispatches (derived by the agents scanner).
   const activeAgents = agents.filter((a) => a.activePhases?.includes(phase.id));
 
   return (

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

@@ -22,7 +22,6 @@ async function send(method, url, body) {
 function ProjectBlock({ p, now, onRemove }) {
   const s = p.summary;
   const working = s ? s.activeFeatures.filter((f) => isWorking(f, now)).length : 0;
-  // What waits on you is already listed at the top of the page; here, the rest, latest first.
   const rest = s ? s.activeFeatures.filter((f) => !f.awaiting) : [];
   const shown = [...rest].sort((a, b) => (b.lastActivity?.ts || '').localeCompare(a.lastActivity?.ts || '')).slice(0, ACTIVE_SHOWN);
   return (

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

@@ -12,13 +12,7 @@ const RULE_COLOR = 'var(--color-phase-plan)';
 const STD_COLOR = 'var(--color-phase-proposal)';
 const NODE_W = 260;
 
-// ─── Standard resolution ──────────────────────────────────────────────────────
-
-/**
- * A rule's route → 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.
- */
+/** With no registry match the path itself is passed, so the link still names the file. */
 function resolveStandard(ref, byPath) {
   const path = standardKey(ref);
   const std = byPath.get(path);
@@ -30,8 +24,6 @@ function resolveStandard(ref, byPath) {
   };
 }
 
-// ─── Node Components ──────────────────────────────────────────────────────────
-
 function RuleNode({ data }) {
   return (
     <div
@@ -78,8 +70,6 @@ function StandardRefNode({ data }) {
 
 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));
@@ -153,8 +143,6 @@ function buildGraph(rules, byPath, search, stackFilter, selected) {
   return { nodes, edges };
 }
 
-// ─── Detail Content ───────────────────────────────────────────────────────────
-
 function Section({ title, children }) {
   return (
     <section>
@@ -221,9 +209,6 @@ function RuleDetail({ rule, byPath }) {
   );
 }
 
-// ─── Main Page ────────────────────────────────────────────────────────────────
-
-/** `?sel=` holds the rule `name` (the file name without `.md`). */
 export default function RulesMap() {
   const { rules } = morphData;
   const [search, setSearch] = useState('');

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

@@ -22,8 +22,6 @@ 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 }) {
@@ -99,15 +97,11 @@ function GroupNode({ data }) {
 
 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 || []) {
@@ -127,7 +121,7 @@ const SUPPORT_PER_ROW = 5;
 function buildGraph({ skills, phases, agents, isMatch, hasFilter }) {
   const nodes = [];
   const edges = [];
-  const phaseSkills = new Map(); // phaseId → skill[]
+  const phaseSkills = new Map();
   const support = [];
   for (const s of skills) {
     const ph = skillPhaseOf(s, phases);
@@ -137,7 +131,6 @@ function buildGraph({ skills, phases, agents, isMatch, hasFilter }) {
     } 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;
@@ -154,7 +147,6 @@ function buildGraph({ skills, phases, agents, isMatch, hasFilter }) {
     });
   });
 
-  // 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;
@@ -173,7 +165,6 @@ function buildGraph({ skills, phases, agents, isMatch, hasFilter }) {
     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);
@@ -197,7 +188,6 @@ function buildGraph({ skills, phases, agents, isMatch, hasFilter }) {
     });
   });
 
-  // 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);
@@ -226,8 +216,6 @@ function buildGraph({ skills, phases, agents, isMatch, hasFilter }) {
   }
 }
 
-// ─── Detail ───────────────────────────────────────────────────────────────────
-
 function Section({ title, children }) {
   return (
     <section className="space-y-2">
@@ -252,7 +240,6 @@ function PromptBlock({ text, label = 'Prompt enviado ao sub-agent' }) {
   );
 }
 
-/** 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 || '';
@@ -372,8 +359,6 @@ export function SkillDetail({ skill, phases = morphData.phases?.list || [] }) {
   );
 }
 
-// ─── Page ─────────────────────────────────────────────────────────────────────
-
 export default function SkillsLibrary() {
   const skills = morphData.skills || [];
   const phases = morphData.phases?.list || [];