@polymorphism-tech/morph-spec 8.38.0 → 8.41.0

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

@@ -0,0 +1,172 @@
+import { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import {
+  ChatCircleText, Question, BookOpenText, PaperPlaneTilt, ArrowBendDownLeft, CheckSquare, ShieldCheck, Flag, WarningOctagon,
+  PencilSimpleLine, Eye, TerminalWindow, Wrench,
+} from '@phosphor-icons/react';
+import { useMorphQuery } from '../hooks/useMorphQuery.js';
+import EntityLink from './EntityLink.jsx';
+import { apiBase, featureHref } from '../lib/project.js';
+import { clock, dayLabel } from '../lib/format.js';
+import { phaseMeta } from '../lib/phases.js';
+
+export const KIND_META = {
+  prompt: { label: 'Você', icon: ChatCircleText },
+  question: { label: 'Perguntas', icon: Question },
+  skill: { label: 'Skills', icon: BookOpenText },
+  dispatch: { label: 'Despachos', icon: PaperPlaneTilt },
+  handback: { label: 'Retornos', icon: ArrowBendDownLeft },
+  task: { label: 'Tasks', icon: CheckSquare },
+  verify: { label: 'Verify', icon: ShieldCheck },
+  gate: { label: 'Gates', icon: Flag },
+  failure: { label: 'Falhas', icon: WarningOctagon },
+  write: { label: 'Escritas', icon: PencilSimpleLine },
+  read: { label: 'Leituras', icon: Eye },
+  command: { label: 'Comandos', icon: TerminalWindow },
+  tool: { label: 'Outras tools', icon: Wrench },
+};
+const DEFAULT = ['prompt', 'question', 'skill', 'dispatch', 'handback', 'task', 'verify', 'gate', 'failure'];
+
+const NODE_TONE = { pass: 'text-[var(--color-ok)]', fail: 'text-[var(--color-bad)]', skip: 'text-[var(--color-faint)]' };
+
+function Line({ item, showFeature, project }) {
+  const Icon = KIND_META[item.kind]?.icon || Wrench;
+  const tone = item.status === 'fail' ? 'text-[var(--color-bad)]' : item.status === 'ok' ? 'text-[var(--color-ok)]' : 'text-[var(--color-dim)]';
+  return (
+    <li className="grid grid-cols-[3rem_1.25rem_minmax(0,1fr)] gap-3 py-2.5">
+      <time className="pt-px font-mono text-xs tabular-nums text-[var(--color-faint)]" dateTime={item.ts}>{clock(item.ts)}</time>
+      <Icon weight="light" size={17} className={tone} aria-hidden="true" />
+      <div className="min-w-0">
+        <p className="text-sm text-[var(--color-fg)]">
+          {item.refs?.persona ? (
+            <>{item.title.replace(`morph-${item.refs.persona}`, '')}<EntityLink kind="persona" id={item.refs.persona}>morph-{item.refs.persona}</EntityLink></>
+          ) : item.refs?.skill ? (
+            <>Carregou a skill <EntityLink kind="skill" id={item.refs.skill} /></>
+          ) : item.title}
+          {showFeature && item.feature && (
+            <Link to={featureHref(project, item.feature)} className="ml-2 text-xs text-[var(--color-faint)] hover:text-[var(--color-dim)]">{item.feature}</Link>
+          )}
+          {item.phase && (
+            <span className="ml-2 text-xs" style={{ color: phaseMeta(item.phase).color }}>{phaseMeta(item.phase).label.toLowerCase()}</span>
+          )}
+          {item.agent && item.kind !== 'handback' && (
+            <span className="ml-2 text-xs text-[var(--color-faint)]">por {item.agent}</span>
+          )}
+        </p>
+        {item.detail && <p className="mt-0.5 line-clamp-2 break-words text-sm text-[var(--color-dim)]">{item.detail}</p>}
+        {item.nodes?.length > 0 && (
+          <p className="mt-1 flex flex-wrap gap-x-3 gap-y-1 font-mono text-xs">
+            {item.nodes.map((n) => (
+              <span key={n.name} className={NODE_TONE[n.status] || 'text-[var(--color-dim)]'}>{n.name} {n.status}</span>
+            ))}
+          </p>
+        )}
+      </div>
+    </li>
+  );
+}
+
+/** Group consecutive items by calendar day, newest day first. */
+function byDay(items) {
+  const groups = [];
+  for (const it of items) {
+    const key = (it.ts || '').slice(0, 10);
+    const last = groups[groups.length - 1];
+    if (last && last.key === key) last.items.push(it);
+    else groups.push({ key, ts: it.ts, items: [it] });
+  }
+  return groups;
+}
+
+export function FeedView({ items, kinds, onToggleKind, showFeature, onMore, hasMore, total, project }) {
+  return (
+    <div>
+      <div className="mb-5 flex flex-wrap gap-2" role="group" aria-label="Tipos de evento">
+        {Object.entries(KIND_META).map(([kind, meta]) => {
+          const on = kinds.includes(kind);
+          return (
+            <button
+              key={kind}
+              type="button"
+              aria-pressed={on}
+              onClick={() => onToggleKind(kind)}
+              className={[
+                'fluid rounded-full px-3 py-1 text-xs transition-colors active:scale-[0.98]',
+                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(' ')}
+            >
+              {meta.label}
+            </button>
+          );
+        })}
+      </div>
+      {items.length === 0 && (
+        <p className="text-sm text-[var(--color-dim)]">
+          Nada registrado com esses filtros. A telemetria vem de <code className="font-mono">.morph/logs/events.jsonl</code>, gravada pelos hooks enquanto o Claude trabalha.
+        </p>
+      )}
+      {byDay(items).map((g) => (
+        <section key={g.key} className="mb-6">
+          <h3 className="sticky top-0 z-10 -mx-1 bg-[var(--color-core)] px-1 py-1.5 text-xs font-medium text-[var(--color-dim)] first-letter:uppercase">{dayLabel(g.ts)}</h3>
+          <ul className="divide-y divide-[var(--color-hair)]">
+            {g.items.map((it) => <Line key={it.id} item={it} showFeature={showFeature} project={project} />)}
+          </ul>
+        </section>
+      ))}
+      {hasMore && (
+        <button
+          type="button"
+          onClick={onMore}
+          className="fluid rounded-full px-4 py-2 text-sm text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)] transition-colors hover:text-[var(--color-fg)] active:scale-[0.98]"
+        >
+          Carregar anteriores
+        </button>
+      )}
+      {typeof total === 'number' && items.length > 0 && (
+        <p className="mt-3 text-xs text-[var(--color-faint)]">{items.length} de {total} eventos</p>
+      )}
+    </div>
+  );
+}
+
+/**
+ * Live activity feed. The first page follows the server's `morph:changed`
+ * pushes; older pages are fetched on demand and appended.
+ */
+export default function ActivityFeed({ project, feature, showFeature = false }) {
+  const [kinds, setKinds] = useState(DEFAULT);
+  const [older, setOlder] = useState([]);
+  const [cursor, setCursor] = useState(null);
+  const params = new URLSearchParams({ kinds: kinds.join(','), limit: '80' });
+  if (feature) params.set('feature', feature);
+  const { data, error } = useMorphQuery(`${apiBase(project)}/activity?${params}`, { scope: 'activity', project });
+
+  useEffect(() => { setOlder([]); setCursor(null); }, [feature, kinds.join(',')]);
+
+  const next = cursor === null ? data?.next : cursor;
+  const loadMore = async () => {
+    if (!next) return;
+    const p = new URLSearchParams(params);
+    p.set('before', next);
+    const res = await fetch(`${apiBase(project)}/activity?${p}`);
+    const page = await res.json();
+    setOlder((o) => [...o, ...page.items]);
+    setCursor(page.next || '');
+  };
+
+  if (error) return <p className="text-sm text-[var(--color-bad)]">Não consegui ler a atividade: {error}</p>;
+  if (!data) return <p className="text-sm text-[var(--color-faint)]">Lendo a telemetria…</p>;
+  const toggle = (k) => setKinds((ks) => (ks.includes(k) ? ks.filter((x) => x !== k) : [...ks, k]));
+  return (
+    <FeedView
+      items={[...data.items, ...older]}
+      kinds={kinds}
+      onToggleKind={toggle}
+      showFeature={showFeature}
+      onMore={loadMore}
+      hasMore={Boolean(next)}
+      total={data.total}
+      project={project}
+    />
+  );
+}

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

@@ -0,0 +1,155 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import morphData from 'virtual:morph-data';
+import { MagnifyingGlass } from '@phosphor-icons/react';
+import { entityHref } from './EntityLink.jsx';
+import { tocOf } from '../pages/Guide.jsx';
+import { useMorphQuery } from '../hooks/useMorphQuery.js';
+import { apiBase, projectHref, featureHref } from '../lib/project.js';
+
+const KIND_LABEL = {
+  page: 'Página', project: 'Projeto', feature: 'Feature', task: 'Task', skill: 'Skill', persona: 'Persona',
+  standard: 'Standard', rule: 'Rule', hook: 'Hook', guide: 'Guia', rubric: 'Rubrica',
+};
+
+const PAGES = [
+  ['Portfólio', '/'], ['Guia', '/guide'], ['Fases', '/phases'], ['Skills', '/skills'],
+  ['Personas', '/agents'], ['Standards', '/standards'], ['Rules', '/rules'], ['Hooks', '/hooks'], ['Rubricas', '/rubrics'],
+];
+
+/** Everything the framework knows that has a page — built once. */
+function knowledgeIndex() {
+  const out = PAGES.map(([title, to]) => ({ kind: 'page', title, to, hay: title }));
+  for (const s of morphData.skills || []) out.push({ kind: 'skill', title: s.id, hint: s.description, to: entityHref('skill', s.id), hay: `${s.id} ${s.description}` });
+  for (const a of morphData.agents?.list || []) out.push({ kind: 'persona', title: `morph-${a.id}`, hint: a.title, to: entityHref('persona', a.id), hay: `${a.id} ${a.title} ${(a.keywords || []).join(' ')}` });
+  for (const s of morphData.standards?.list || []) out.push({ kind: 'standard', title: s.name, hint: s.id, to: entityHref('standard', s.id), hay: `${s.name} ${s.id} ${(s.aliases || []).join(' ')} ${(s.tags || []).join(' ')}` });
+  for (const r of morphData.rules || []) out.push({ kind: 'rule', title: r.name, hint: (r.paths || []).join(', '), to: entityHref('rule', r.name), hay: `${r.name} ${(r.paths || []).join(' ')}` });
+  const hooks = new Set();
+  for (const h of morphData.hooks || []) {
+    if (hooks.has(h.name)) continue;
+    hooks.add(h.name);
+    out.push({ kind: 'hook', title: h.name, hint: h.description, to: entityHref('hook', h.name), hay: `${h.name} ${h.description || ''}` });
+  }
+  for (const d of morphData.docs?.guide || []) {
+    for (const h of tocOf(d).filter((x) => x.depth >= 2)) {
+      out.push({ kind: 'guide', title: h.text, hint: d.title, to: `/guide/${d.id}#${h.slug}`, hay: `${h.text} ${d.title}` });
+    }
+  }
+  for (const r of morphData.docs?.rubrics || []) out.push({ kind: 'rubric', title: r.title, to: `/rubrics?sel=${encodeURIComponent(`dim:${r.id}`)}`, hay: r.title });
+  return out;
+}
+
+function projectIndex(portfolio) {
+  return (portfolio?.projects || []).map((p) => ({ kind: 'project', title: p.name, hint: p.dir, to: projectHref(p.id), hay: `${p.name} ${p.dir}` }));
+}
+
+/**
+ * Features and their tasks. `projectName` is set for another project's
+ * features, so a hit says where it lives.
+ */
+function featureIndex(project, features, projectName = null) {
+  const out = [];
+  const where = (text) => (projectName ? (text ? `${projectName}: ${text}` : projectName) : text);
+  for (const f of features || []) {
+    out.push({ kind: 'feature', title: f.name, hint: where(f.description), to: featureHref(project, f.name), hay: `${f.name} ${f.description || ''} ${projectName || ''}` });
+    for (const t of f.taskIndex || []) {
+      out.push({ kind: 'task', title: `${t.id} ${t.title}`, hint: where(f.name), to: featureHref(project, f.name, '?tab=tasks'), hay: `${t.id} ${t.title} ${f.name} ${projectName || ''}` });
+    }
+  }
+  return out;
+}
+
+/** The active features of the other projects, from the portfolio's summaries. */
+function otherProjectsIndex(portfolio, project) {
+  return (portfolio?.projects || [])
+    .filter((p) => p.id !== project && p.summary)
+    .flatMap((p) => featureIndex(p.id, p.summary.activeFeatures, p.name));
+}
+
+/** Every query word must appear; a title that starts with the query ranks first. */
+export function searchIndex(index, query, limit = 40) {
+  const words = query.toLowerCase().split(/\s+/).filter(Boolean);
+  if (!words.length) return [];
+  const scored = [];
+  for (const item of index) {
+    const hay = item.hay.toLowerCase();
+    if (!words.every((w) => hay.includes(w))) continue;
+    const title = item.title.toLowerCase();
+    const score = (title.startsWith(words[0]) ? 0 : title.includes(words[0]) ? 1 : 2) + (item.kind === 'page' ? -1 : 0);
+    scored.push({ item, score });
+  }
+  return scored.sort((a, b) => a.score - b.score || a.item.title.length - b.item.title.length).slice(0, limit).map((s) => s.item);
+}
+
+export default function CommandPalette({ open, onClose, portfolio, project }) {
+  const navigate = useNavigate();
+  const [query, setQuery] = useState('');
+  const [active, setActive] = useState(0);
+  const inputRef = useRef(null);
+  const knowledge = useMemo(knowledgeIndex, []);
+  const { data } = useMorphQuery(open && project ? `${apiBase(project)}/features` : null, { project });
+  const index = useMemo(
+    () => [...featureIndex(project, data?.features), ...otherProjectsIndex(portfolio, project), ...projectIndex(portfolio), ...knowledge],
+    [data, knowledge, portfolio, project],
+  );
+  const results = useMemo(() => searchIndex(index, query), [index, query]);
+
+  useEffect(() => {
+    if (open) { setQuery(''); setActive(0); setTimeout(() => inputRef.current?.focus(), 0); }
+  }, [open]);
+  useEffect(() => { setActive(0); }, [query]);
+
+  if (!open) return null;
+  const go = (item) => { onClose(); navigate(item.to); };
+  const onKey = (e) => {
+    if (e.key === 'Escape') onClose();
+    else if (e.key === 'ArrowDown') { e.preventDefault(); setActive((i) => Math.min(i + 1, results.length - 1)); }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); setActive((i) => Math.max(i - 1, 0)); }
+    else if (e.key === 'Enter' && results[active]) go(results[active]);
+  };
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-start justify-center bg-black/60 px-4 pt-[12vh] backdrop-blur-sm" onMouseDown={onClose} role="presentation">
+      <div role="dialog" aria-modal="true" aria-label="Busca" className="bezel w-full max-w-2xl" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="bezel-core overflow-hidden">
+          <label className="flex items-center gap-3 border-b border-[var(--color-hair)] px-5 py-4">
+            <MagnifyingGlass weight="light" size={18} className="text-[var(--color-faint)]" />
+            <span className="sr-only">Buscar em tudo</span>
+            <input
+              ref={inputRef}
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              onKeyDown={onKey}
+              placeholder="Buscar features, tasks, skills, personas, standards, seções do guia…"
+              className="w-full bg-transparent text-base text-[var(--color-fg)] outline-none focus-visible:outline-none placeholder:text-[var(--color-faint)]"
+              aria-controls="palette-results"
+              aria-activedescendant={results[active] ? `palette-${active}` : undefined}
+            />
+            <kbd className="rounded-md px-1.5 font-mono text-[11px] text-[var(--color-faint)] shadow-[inset_0_0_0_1px_var(--color-hair)]">Esc</kbd>
+          </label>
+          <ul id="palette-results" role="listbox" className="max-h-[55vh] overflow-y-auto p-2">
+            {query && results.length === 0 && <li className="px-3 py-6 text-center text-sm text-[var(--color-dim)]">Nada encontrado para “{query}”.</li>}
+            {!query && <li className="px-3 py-6 text-center text-sm text-[var(--color-faint)]">Digite para buscar. Setas navegam, Enter abre.</li>}
+            {results.map((r, i) => (
+              <li
+                key={`${r.kind}:${r.to}:${r.title}`}
+                id={`palette-${i}`}
+                role="option"
+                aria-selected={i === active}
+                onMouseEnter={() => setActive(i)}
+                onClick={() => go(r)}
+                className={['flex cursor-pointer items-baseline gap-3 rounded-lg px-3 py-2', i === active ? 'bg-white/[0.07]' : ''].join(' ')}
+              >
+                <span className="w-16 shrink-0 text-xs text-[var(--color-faint)]">{KIND_LABEL[r.kind]}</span>
+                <span className="min-w-0 flex-1">
+                  <span className="block truncate text-sm text-[var(--color-fg)]">{r.title}</span>
+                  {r.hint && <span className="block truncate text-xs text-[var(--color-dim)]">{r.hint}</span>}
+                </span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,11 +1,47 @@
-export default function DetailPanel({ open, title, onClose, children }) {
-  return (
-    <div className={`fixed top-0 right-0 h-full w-96 bg-gray-900 border-l border-gray-700 shadow-2xl transform transition-transform duration-200 ease-in-out z-50 ${open ? 'translate-x-0' : 'translate-x-full'}`}>
-      <div className="flex items-center justify-between p-4 border-b border-gray-700">
-        <h2 className="text-white font-semibold text-lg truncate">{title}</h2>
-        <button onClick={onClose} className="text-gray-400 hover:text-white text-xl leading-none">×</button>
-      </div>
-      <div className="p-4 overflow-y-auto h-[calc(100%-57px)]">{children}</div>
-    </div>
-  );
-}
+import { useEffect } from 'react';
+import { X } from '@phosphor-icons/react';
+
+/**
+ * The reading drawer of the knowledge pages. Wide enough for rendered markdown,
+ * closes on Escape, and sits over the graph without a backdrop so the graph
+ * stays visible beside it.
+ */
+export default function DetailPanel({ open, title, subtitle, onClose, children }) {
+  useEffect(() => {
+    if (!open) return undefined;
+    const onKey = (e) => { if (e.key === 'Escape') onClose?.(); };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [open, onClose]);
+
+  return (
+    <aside
+      aria-hidden={!open}
+      aria-label={title}
+      className={[
+        'fluid fixed inset-y-0 right-0 z-40 flex w-full max-w-[44rem] flex-col p-3 transition-transform',
+        open ? 'translate-x-0' : 'pointer-events-none translate-x-full',
+      ].join(' ')}
+    >
+      <div className="bezel flex min-h-0 flex-1 flex-col bg-[var(--color-ink)]/80 backdrop-blur-xl">
+        <div className="bezel-core flex min-h-0 flex-1 flex-col">
+          <header className="flex items-start justify-between gap-4 border-b border-[var(--color-hair)] px-6 py-4">
+            <div className="min-w-0">
+              <h2 className="truncate text-lg font-semibold tracking-tight">{title}</h2>
+              {subtitle && <p className="mt-0.5 truncate text-sm text-[var(--color-dim)]">{subtitle}</p>}
+            </div>
+            <button
+              type="button"
+              onClick={onClose}
+              aria-label="Fechar painel"
+              className="fluid flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-white/[0.05] text-[var(--color-dim)] transition-colors hover:bg-white/[0.1] hover:text-[var(--color-fg)]"
+            >
+              <X weight="light" size={16} />
+            </button>
+          </header>
+          <div className="min-h-0 flex-1 overflow-y-auto px-6 py-5">{children}</div>
+        </div>
+      </div>
+    </aside>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { Link, useSearchParams } from 'react-router-dom';
+import { useCallback } from 'react';
+
+/**
+ * Where each kind of thing lives in the app. The ONE map of entity → URL, so a
+ * persona, standard or skill reads as a link everywhere it is mentioned.
+ * A feature belongs to a project: its links come from `featureHref` (lib/project.js).
+ */
+export function entityHref(kind, id) {
+  const q = (page) => `/${page}?sel=${encodeURIComponent(id)}`;
+  switch (kind) {
+    case 'persona': return q('agents');
+    case 'skill': return q('skills');
+    case 'standard': return q('standards');
+    case 'rule': return q('rules');
+    case 'hook': return q('hooks');
+    case 'phase': return q('phases');
+    case 'guide': return `/guide/${encodeURIComponent(id)}`;
+    case 'rubric': return q('rubrics');
+    default: return '#';
+  }
+}
+
+/** `standards/backend/dotnet/testing.md` (as tasks.json cites it) → the registry `path`. */
+export function standardKey(ref) {
+  return String(ref).replace(/^\.?\/?(\.morph\/framework\/)?standards\//, '');
+}
+
+const TONE = 'text-[var(--color-phase-proposal)] hover:underline underline-offset-2';
+
+export default function EntityLink({ kind, id, children, className = '', chip = false, plain = false, title }) {
+  const cls = chip
+    ? `inline-flex items-center rounded-full px-2 py-0.5 font-mono text-[11px] text-[var(--color-dim)] shadow-[inset_0_0_0_1px_var(--color-hair)] transition-colors hover:text-[var(--color-fg)] hover:shadow-[inset_0_0_0_1px_var(--color-hair-strong)] ${className}`
+    : plain ? className : `${TONE} ${className}`;
+  return <Link to={entityHref(kind, id)} className={cls} title={title}>{children ?? id}</Link>;
+}
+
+/**
+ * The selected item of a knowledge page, kept in `?sel=` so a panel can be
+ * linked, bookmarked and reached from anywhere with EntityLink.
+ *
+ * @returns {[string|null, (id: string|null) => void]}
+ */
+export function useSelection() {
+  const [params, setParams] = useSearchParams();
+  const sel = params.get('sel');
+  const setSel = useCallback((id) => {
+    setParams((p) => {
+      const n = new URLSearchParams(p);
+      if (id) n.set('sel', id); else n.delete('sel');
+      return n;
+    }, { replace: false });
+  }, [setParams]);
+  return [sel, setSel];
+}

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

@@ -0,0 +1,54 @@
+import { Component } from 'react';
+
+/**
+ * Catches a page that throws while rendering and shows the error in place of
+ * the page, so the rest of the layout (the sidebar) keeps working.
+ *
+ * Without it one broken page unmounts the whole tree: 8.38.0 opened on
+ * /agents, which threw a ReferenceError, and the dashboard was a black screen.
+ *
+ * Mount it with `key={location.pathname}`: a boundary that already caught an
+ * error stays in fallback until it remounts, and the key remounts it when the
+ * sidebar navigates to another page.
+ */
+export default class ErrorBoundary extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+
+  componentDidCatch(error, info) {
+    console.error(`[dashboard] ${this.props.page || 'page'} failed to render:`, error, info?.componentStack);
+  }
+
+  render() {
+    const { error } = this.state;
+    if (!error) return this.props.children;
+    return (
+      <div role="alert" className="p-6 max-w-3xl">
+        <h2 className="text-red-400 text-sm font-semibold uppercase tracking-wide mb-2">
+          This page failed to render
+        </h2>
+        <p className="text-gray-300 text-sm mb-3">
+          <span className="font-mono text-gray-400">{this.props.page}</span> threw while rendering.
+          The other pages still work — pick one in the sidebar.
+        </p>
+        <pre className="p-3 bg-gray-900 border border-red-900 rounded text-xs text-red-300 whitespace-pre-wrap font-mono overflow-x-auto">
+          {error.name}: {error.message}
+        </pre>
+        {error.stack && (
+          <details className="mt-2">
+            <summary className="text-gray-500 text-xs cursor-pointer">Stack trace</summary>
+            <pre className="mt-1 p-3 bg-gray-950 border border-gray-800 rounded text-[10px] text-gray-500 whitespace-pre-wrap font-mono overflow-x-auto">
+              {error.stack}
+            </pre>
+          </details>
+        )}
+      </div>
+    );
+  }
+}

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

@@ -1,17 +1,19 @@
-import { ReactFlow, Controls, MiniMap, Background } from '@xyflow/react';
-
-export default function FlowGraph({ nodes, edges, nodeTypes, onNodeClick, fitView = true, className = '' }) {
-  return (
-    <div className={`w-full h-full ${className}`} style={{ minHeight: '500px' }}>
-      <ReactFlow
-        nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodeClick={onNodeClick}
-        fitView={fitView} proOptions={{ hideAttribution: true }}
-        defaultEdgeOptions={{ type: 'smoothstep', animated: false, style: { stroke: '#475569', strokeWidth: 1.5 } }}
-      >
-        <Background color="#1e293b" gap={20} />
-        <Controls position="bottom-right" />
-        <MiniMap nodeColor={(node) => node.data?.color || '#475569'} maskColor="rgba(0, 0, 0, 0.7)" position="bottom-left" />
-      </ReactFlow>
-    </div>
-  );
-}
+import { ReactFlow, Controls, MiniMap, Background } from '@xyflow/react';
+
+// The React Flow attribution stays: hiding it is licensed to Pro subscribers only.
+export default function FlowGraph({ nodes, edges, nodeTypes, onNodeClick, fitView = true, className = '' }) {
+  return (
+    <div className={`w-full h-full ${className}`} style={{ minHeight: '500px' }}>
+      <ReactFlow
+        nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodeClick={onNodeClick}
+        fitView={fitView} fitViewOptions={{ padding: 0.15, maxZoom: 1.1 }} minZoom={0.2}
+       
+        defaultEdgeOptions={{ type: 'smoothstep', animated: false, style: { stroke: '#3a4250', strokeWidth: 1.5 } }}
+      >
+        <Background color="rgb(255 255 255 / 0.05)" gap={22} />
+        <Controls position="bottom-right" />
+        <MiniMap nodeColor={(node) => node.data?.color || '#4a5260'} maskColor="rgba(5, 5, 5, 0.72)" position="bottom-left" pannable zoomable />
+      </ReactFlow>
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+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();
+for (const s of morphData.standards?.list || []) {
+  standardByKey.set(s.id, s.id);
+  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(/^\//, '');
+  if (skillIds.has(bare)) return { kind: 'skill', id: bare };
+  const persona = /^morph-(.+)$/.exec(bare);
+  if (persona && personaIds.has(persona[1])) return { kind: 'persona', id: persona[1] };
+  const std = standardByKey.get(standardKey(t));
+  if (std) return { kind: 'standard', id: std };
+  return null;
+}
+
+function InlineCode({ className, children, node, ...rest }) {
+  const text = Array.isArray(children) ? children.join('') : String(children ?? '');
+  const block = Boolean(className) || text.includes('\n');
+  if (!block) {
+    const hit = resolveMention(text);
+    if (hit) {
+      return (
+        <EntityLink kind={hit.kind} id={hit.id} className="no-underline">
+          <code>{text}</code>
+        </EntityLink>
+      );
+    }
+  }
+  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

@@ -0,0 +1,47 @@
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import rehypeSlug from 'rehype-slug';
+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-invoke', 'user-invokable', 'stacks', 'version', 'cliVersion'];
+
+function MetaBlock({ meta }) {
+  const keys = Object.keys(meta).sort((a, b) => {
+    const ia = META_ORDER.indexOf(a); const ib = META_ORDER.indexOf(b);
+    return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib);
+  });
+  return (
+    <dl className="mb-6 grid grid-cols-[max-content_1fr] gap-x-4 gap-y-1.5 rounded-xl bg-white/[0.03] px-4 py-3 text-sm shadow-[inset_0_0_0_1px_var(--color-hair)]">
+      {keys.map((k) => (
+        <div key={k} className="contents">
+          <dt className="font-mono text-xs leading-6 text-[var(--color-faint)]">{k}</dt>
+          <dd className="leading-6 text-[var(--color-dim)]">{meta[k] || '—'}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+/**
+ * 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 (
+    <article className={`prose-morph ${size === 'sm' ? 'prose-morph-sm' : ''} ${className}`}>
+      {meta && Object.keys(meta).length > 0 && <MetaBlock meta={meta} />}
+      <ReactMarkdown remarkPlugins={REMARK} rehypePlugins={REHYPE} components={components}>
+        {body}
+      </ReactMarkdown>
+    </article>
+  );
+}