@polymorphism-tech/morph-spec 8.37.1 → 8.40.0

package/src/commands/tasks/dag.js

@@ -6,6 +6,15 @@ import { planDispatch } from '../../lib/tasks/dispatch-planner.js';
 import { renderMermaidFlowchart } from '../../lib/tasks/mermaid-renderer.js';
 import { checkUseCases } from '../../lib/specs/usecase-check.js';
 import { checkArtifactCriteria } from '../../lib/specs/done-criteria-check.js';
+import { checkLifecycle } from '../../lib/specs/acervo-lifecycle.js';
+
+/** Shared by `dag` and `usecase check` — the two surfaces of the same finding. */
+export function printLifecycleWarnings(lifecycle) {
+  if (!lifecycle?.warnings?.length) return;
+  const n = lifecycle.warnings.length;
+  console.error(chalk.yellow(`\n⚠ Ciclo de vida do acervo — ${n} ${n === 1 ? 'aviso' : 'avisos'}`));
+  for (const w of lifecycle.warnings) console.error(chalk.yellow(`  ${w}`));
+}
 
 /**
  * `morph-spec dag <feature>` — analyze the tasks.json DAG and print the
@@ -19,7 +28,8 @@ import { checkArtifactCriteria } from '../../lib/specs/done-criteria-check.js';
  */
 export async function dagCommand(featureName, options = {}) {
   try {
-    const planDir = join(process.cwd(), '.morph', 'features', featureName, '2-plan');
+    const featureDir = join(process.cwd(), '.morph', 'features', featureName);
+    const planDir = join(featureDir, '2-plan');
     const tasksPath = join(planDir, 'tasks.json');
     if (!existsSync(tasksPath)) {
       console.error(chalk.red(`\n❌ tasks.json not found for feature "${featureName}"`));
@@ -58,10 +68,14 @@ export async function dagCommand(featureName, options = {}) {
     // own doneCriteria can describe an artifact with no use case in sight.
     const artifactCriteria = checkArtifactCriteria(data, join(planDir, 'usecases'));
 
+    // Acervo lifecycle: a task citing a superseded use case, and the spec.md
+    // revocation rows the finish would fail to apply. Warnings only.
+    const lifecycle = checkLifecycle({ cwd: process.cwd(), featureDir, tasksData: data });
+
     const plan = planDispatch(data);
 
     if (options.json) {
-      console.log(JSON.stringify({ ...plan, useCases: ucCheck, artifactCriteria }, null, 2));
+      console.log(JSON.stringify({ ...plan, useCases: ucCheck, artifactCriteria, lifecycle }, null, 2));
       if (ucCheck.errors.length) process.exit(1);
       return;
     }
@@ -83,6 +97,7 @@ export async function dagCommand(featureName, options = {}) {
       for (const w of artifactCriteria.warnings) console.error(chalk.yellow(`  ${w}`));
       console.error(chalk.gray('  Teste que lê texto de arquivo não prova comportamento (morph-plan §2, "Por que artefato").'));
     }
+    printLifecycleWarnings(lifecycle);
 
     console.log(chalk.bold(`\n📊 DAG — ${featureName}`));
     console.log('━'.repeat(60));

package/src/commands/validation/validate-feature.js

@@ -36,7 +36,7 @@ import { validateTasksJson } from '../../lib/tasks/tasks-json-parser.js';
  */
 const OUTPUT_SECTIONS = {
   // morph-brainstorming emits: Problema, Escopo, Usuários e fluxos críticos,
-  // Stack, Riscos e dependências, Compliance de stack.
+  // Stack, Riscos e dependências, Compliance de stack, Conflitos com o acervo.
   //
   // "Critérios de aceite" is now OPTIONAL, not required: the behaviour layer
   // moved to the use cases (2-plan/usecases/), whose post-conditions must be
@@ -44,6 +44,10 @@ const OUTPUT_SECTIONS = {
   // `optional` — not `recommended` — precisely because the skill never emits it
   // anymore: a warning on every new proposal would be systematic noise. Legacy
   // proposals that DO carry the section keep validating exactly as before.
+  //
+  // "Conflitos com o acervo" is recommended: morph-brainstorming always emits
+  // it ("nenhum" included), so its absence means the acervo check never ran.
+  // Not required — proposals written before the section existed stay valid.
   'proposal.md': {
     required: [
       ['Problema', 'Problem'],
@@ -51,6 +55,7 @@ const OUTPUT_SECTIONS = {
     ],
     recommended: [
       ['Riscos', 'Risks'],
+      ['Conflitos', 'Conflicts'],
     ],
     optional: [
       ['Critérios de aceite', 'Critério', 'Aceite', 'Acceptance Criteria', 'Acceptance', 'Success Criteria', 'Success Metrics'],

package/src/commands/validation/verify.js

@@ -6,6 +6,8 @@ import { runVerify, readTask, VerifyUsageError } from '../../lib/validators/veri
 import { resolvePrimaryRoot } from '../project/worktree.js';
 import { getHeadSha } from '../../lib/git/default-branch.js';
 import { EVAL_RUNNER } from '../../lib/tasks/eval-node.js';
+import { buildVerifyEvent, recordVerifyEvent, findRepeatedVerify } from '../../lib/telemetry/verify-event.js';
+import { treeFingerprint } from '../../lib/git/tree-fingerprint.js';
 
 /** ✓ pass · ✗ fail · – skip */
 function statusIcon(status) {
@@ -237,6 +239,9 @@ export async function verifyCommand(featureName, taskId, options = {}) {
     }
   }
 
+  // Taken before the run: it is the tree the run is about to read.
+  const fingerprint = treeFingerprint(process.cwd());
+
   let result;
   try {
     result = await runVerify(process.cwd(), featureName, taskId || null, {
@@ -335,6 +340,16 @@ export async function verifyCommand(featureName, taskId, options = {}) {
     await updateFeature(featureName, 'verification', stamp);
   }
 
+  // A feature-scope run over the exact tree of the previous one proves nothing
+  // new. Advisory only: the stamp and the exit code are the same either way.
+  let repeatOf = null;
+  try {
+    const cwd = process.cwd();
+    if (!taskId && persist) repeatOf = findRepeatedVerify(cwd, { feature: featureName, task: null, scope: result.scope, fingerprint });
+    const tree = resolve(cwd).replace(/\\/g, '/') === resolvePrimaryRoot(cwd) ? 'root' : 'worktree';
+    recordVerifyEvent(cwd, buildVerifyEvent(result, { sha: getHeadSha(cwd), tree, persisted: persist, reason, fingerprint }));
+  } catch { /* telemetry never changes the verdict */ }
+
   // The refusal always goes to stderr, so it survives --json (whose stdout has
   // to stay parseable) and is never something the reader has to go looking for.
   if (result.baseline && !result.baseline.recorded) {
@@ -344,10 +359,14 @@ export async function verifyCommand(featureName, taskId, options = {}) {
   }
 
   if (options.json) {
-    const output = { ...result, persisted: persist, ...(persist ? {} : { reason }) };
+    const output = { ...result, persisted: persist, ...(persist ? {} : { reason }), repeatOf };
     console.log(JSON.stringify(output, null, 2));
   } else {
     console.log(formatVerifyResult(result));
+    if (repeatOf) {
+      console.log(chalk.yellow(`⚠️  Mesma árvore do verify de feature de ${repeatOf.ts} (${repeatOf.status}): nada mudou fora de .morph/ desde então. `
+        + 'Esta rodada não prova nada novo — reuse o resultado anterior, a menos que o ambiente (Docker, banco, serviço externo) tenha mudado.\n'));
+    }
     if (result.baseline?.recorded) {
       for (const u of result.baseline.updates) {
         console.log(chalk.green(`  baseline ${u.id}: ${u.from ?? '—'} → ${u.to}`));

package/src/dashboard/app/App.jsx

@@ -1,28 +1,92 @@
-import { Routes, Route, Navigate } from 'react-router-dom';
-import Sidebar from './components/Sidebar.jsx';
+import { useEffect, useState } from 'react';
+import { Routes, Route, Navigate, useLocation, useParams } from 'react-router-dom';
+import Sidebar, { MobileNav } from './components/Sidebar.jsx';
+import ErrorBoundary from './components/ErrorBoundary.jsx';
+import CommandPalette from './components/CommandPalette.jsx';
+import Portfolio from './pages/Portfolio.jsx';
+import Features, { isWorking } from './pages/Features.jsx';
+import FeatureDetail from './pages/FeatureDetail.jsx';
+import Activity from './pages/Activity.jsx';
 import AgentMap from './pages/AgentMap.jsx';
 import PhasePipeline from './pages/PhasePipeline.jsx';
 import HookInspector from './pages/HookInspector.jsx';
 import SkillsLibrary from './pages/SkillsLibrary.jsx';
 import RulesMap from './pages/RulesMap.jsx';
 import Standards from './pages/Standards.jsx';
-import LiveState from './pages/LiveState.jsx';
+import Guide from './pages/Guide.jsx';
+import Rubrics from './pages/Rubrics.jsx';
+import { useNow } from './hooks/usePref.js';
+import { useProjects, useCurrentProject, projectHref } from './lib/project.js';
+
+/**
+ * What the sidebar and the tab title say at a glance, from the portfolio:
+ * per project, how many features are active, waiting on you and being worked
+ * on right now.
+ */
+function usePulse(portfolio) {
+  const now = useNow();
+  const byProject = {};
+  for (const p of portfolio?.projects || []) {
+    const s = p.summary;
+    byProject[p.id] = s
+      ? { active: s.active, awaiting: s.awaiting, working: s.activeFeatures.filter((f) => isWorking(f, now)).length }
+      : null;
+  }
+  const awaiting = Object.values(byProject).reduce((n, x) => n + (x?.awaiting || 0), 0);
+  useEffect(() => {
+    document.title = awaiting ? `(${awaiting}) morph-spec` : 'morph-spec';
+  }, [awaiting]);
+  return { byProject, awaiting };
+}
+
+function ProjectIndex() {
+  const { project } = useParams();
+  return <Navigate to={projectHref(project)} replace />;
+}
 
 export default function App() {
+  const { pathname } = useLocation();
+  const { data: portfolio } = useProjects();
+  const current = useCurrentProject(portfolio);
+  const pulse = usePulse(portfolio);
+  const [palette, setPalette] = useState(false);
+  // Ctrl+K / Cmd+K opens the search from anywhere.
+  useEffect(() => {
+    const onKey = (e) => {
+      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'k') { e.preventDefault(); setPalette((o) => !o); }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+  const nav = { portfolio, current: current.id, pulse, onSearch: () => setPalette(true) };
   return (
-    <div className="flex h-screen bg-gray-950 text-gray-100 overflow-hidden">
-      <Sidebar />
-      <main className="flex-1 overflow-auto">
-        <Routes>
-          <Route path="/" element={<Navigate to="/agents" replace />} />
-          <Route path="/agents" element={<AgentMap />} />
-          <Route path="/phases" element={<PhasePipeline />} />
-          <Route path="/hooks" element={<HookInspector />} />
-          <Route path="/skills" element={<SkillsLibrary />} />
-          <Route path="/rules" element={<RulesMap />} />
-          <Route path="/standards" element={<Standards />} />
-          <Route path="/state" element={<LiveState />} />
-        </Routes>
+    <div className="flex h-full overflow-hidden">
+      <div className="ambient" aria-hidden="true" />
+      <Sidebar {...nav} />
+      <CommandPalette open={palette} onClose={() => setPalette(false)} portfolio={portfolio} project={current.id} />
+      <main className="relative z-10 flex-1 overflow-auto">
+        <MobileNav {...nav} />
+        {/* Inside <main>, keyed by route: a page that throws leaves the
+            sidebar alive, and navigating away remounts a clean boundary. */}
+        <ErrorBoundary key={pathname} page={pathname}>
+          <Routes>
+            <Route path="/" element={<Portfolio />} />
+            <Route path="/p/:project" element={<ProjectIndex />} />
+            <Route path="/p/:project/features" element={<Features />} />
+            <Route path="/p/:project/features/:name" element={<FeatureDetail />} />
+            <Route path="/p/:project/activity" element={<Activity />} />
+            <Route path="/guide" element={<Guide />} />
+            <Route path="/guide/:doc" element={<Guide />} />
+            <Route path="/rubrics" element={<Rubrics />} />
+            <Route path="/agents" element={<AgentMap />} />
+            <Route path="/phases" element={<PhasePipeline />} />
+            <Route path="/hooks" element={<HookInspector />} />
+            <Route path="/skills" element={<SkillsLibrary />} />
+            <Route path="/rules" element={<RulesMap />} />
+            <Route path="/standards" element={<Standards />} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </ErrorBoundary>
       </main>
     </div>
   );

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>
+  );
+}