@polymorphism-tech/morph-spec 8.38.0 → 8.40.0

package/src/commands/mcp/mcp-setup.js

@@ -64,21 +64,49 @@ export async function detectStack(targetPath) {
   }
 }
 
+/**
+ * Detect the project's integrations (`neon`, `stripe`...), same sources and
+ * order as detectStack. The detectors never fold them into the stack string, so
+ * without this an MCP scoped to an integration (neon, asaas) is never offered.
+ *
+ * @param {string} targetPath
+ * @returns {Promise<string[]>}
+ */
+export async function detectIntegrations(targetPath) {
+  try {
+    const configPath = join(targetPath, '.morph', 'config', 'config.json');
+    if (existsSync(configPath)) {
+      const integrations = JSON.parse(readFileSync(configPath, 'utf-8')).project?.integrations;
+      if (Array.isArray(integrations)) return integrations;
+    }
+  } catch {
+    // Fall through to filesystem detection
+  }
+
+  try {
+    const results = await detectProject(targetPath, { conversation: false, generateStandards: false });
+    return results.structure?.integrations ?? [];
+  } catch {
+    return [];
+  }
+}
+
 export async function mcpSetupCommand(name, options) {
   const targetPath = process.cwd();
 
   try {
     // Detect current environment
     const stack = await detectStack(targetPath);
+    const integrations = await detectIntegrations(targetPath);
     const claudeConfig = await detectClaudeConfig(targetPath);
     const existingMcps = claudeConfig.mcpServers || [];
 
     if (options.list) {
-      return showStatusList(targetPath, stack, existingMcps);
+      return showStatusList(targetPath, stack, existingMcps, integrations);
     }
 
     if (options.auto) {
-      return autoInstall(targetPath, stack, existingMcps);
+      return autoInstall(targetPath, stack, existingMcps, integrations);
     }
 
     if (name) {
@@ -86,7 +114,7 @@ export async function mcpSetupCommand(name, options) {
     }
 
     // Interactive wizard
-    return interactiveWizard(targetPath, stack, existingMcps);
+    return interactiveWizard(targetPath, stack, existingMcps, integrations);
   } catch (err) {
     console.error(chalk.red(`Error: ${err.message}`));
     process.exit(1);
@@ -96,8 +124,8 @@ export async function mcpSetupCommand(name, options) {
 /**
  * Show MCP status list (--list)
  */
-async function showStatusList(targetPath, stack, existingMcps) {
-  const orchestration = orchestrateMcpSetup(targetPath, stack, existingMcps);
+async function showStatusList(targetPath, stack, existingMcps, integrations) {
+  const orchestration = orchestrateMcpSetup(targetPath, stack, existingMcps, { integrations });
   const statusRows = formatMcpStatusTable(orchestration, {});
 
   console.log(chalk.cyan('\n  MCP Server Status\n'));
@@ -130,8 +158,8 @@ async function showStatusList(targetPath, stack, existingMcps) {
 /**
  * Auto-install credential-free MCPs (--auto)
  */
-async function autoInstall(targetPath, stack, existingMcps) {
-  const orchestration = orchestrateMcpSetup(targetPath, stack, existingMcps, { autoOnly: true });
+async function autoInstall(targetPath, stack, existingMcps, integrations) {
+  const orchestration = orchestrateMcpSetup(targetPath, stack, existingMcps, { autoOnly: true, integrations });
   const autoNames = Object.keys(orchestration.autoInstallable);
 
   if (autoNames.length === 0) {
@@ -391,8 +419,8 @@ async function setupSpecificMcp(targetPath, name, stack, existingMcps) {
 /**
  * Interactive wizard showing all MCPs
  */
-async function interactiveWizard(targetPath, stack, existingMcps) {
-  const orchestration = orchestrateMcpSetup(targetPath, stack, existingMcps);
+async function interactiveWizard(targetPath, stack, existingMcps, integrations) {
+  const orchestration = orchestrateMcpSetup(targetPath, stack, existingMcps, { integrations });
 
   console.log(chalk.cyan('\n  MCP Setup Wizard'));
   console.log(chalk.gray(`  Stack: ${stack}`));

package/src/commands/project/doctor.js

@@ -44,10 +44,10 @@ function normCwd(root, cwd) {
 /**
  * Check which required Claude Code plugins are installed.
  * @param {Object} pluginsData - The `plugins` object from installed_plugins.json
- * @returns {{ superpowers: boolean, context7: boolean }}
+ * @returns {{ context7: boolean }}
  */
 export function checkInstalledPlugins(pluginsData) {
-  const REQUIRED = ['superpowers', 'context7'];
+  const REQUIRED = ['context7'];
   return Object.fromEntries(
     REQUIRED.map(name => [name, `${name}@claude-plugins-official` in (pluginsData || {})])
   );
@@ -1330,15 +1330,13 @@ export async function doctorCommand(options = {}) {
       } catch { /* non-fatal */ }
 
       // ── Claude Code Plugins ──────────────────────────────────────────────────
-      console.log(chalk.cyan('\n  Claude Code Plugins (required for /morph-init)'));
+      console.log(chalk.cyan('\n  Claude Code Plugins (required by morph-spec init)'));
       const pluginsFile = join(homedir(), '.claude', 'plugins', 'installed_plugins.json');
       let pluginData = { plugins: {} };
       try {
         pluginData = JSON.parse(await fs.readFile(pluginsFile, 'utf8'));
       } catch { /* file may not exist */ }
       const pluginStatus = checkInstalledPlugins(pluginData.plugins || {});
-      check('superpowers plugin', pluginStatus.superpowers, false,
-        'Run: morph-spec install-plugin superpowers');
       check('context7 plugin', pluginStatus.context7, false,
         'Run: morph-spec install-plugin context7');
     } else {

package/src/commands/project/init.js

@@ -34,6 +34,7 @@ import { installAgents, installDomainAgents } from '../../utils/agents-installer
 import { getProjectTags } from '../../lib/stack-filter.js';
 import { updateCommand } from './update.js';
 import { resolvePrimaryRoot } from './worktree.js';
+import { registerProject } from '../../lib/projects/registry.js';
 
 /**
  * Guard against running a full `init` install from inside a secondary
@@ -135,8 +136,7 @@ export async function initCommand(options) {
     try {
       claudeConfigDetected = await detectClaudeConfig(targetPath);
       const hasIntegrations = claudeConfigDetected.plugins.length > 0
-        || claudeConfigDetected.mcpServers.length > 0
-        || claudeConfigDetected.superpowers.installed;
+        || claudeConfigDetected.mcpServers.length > 0;
 
       if (hasIntegrations) {
         spinner.stop();
@@ -287,7 +287,8 @@ export async function initCommand(options) {
       try {
         spinner.stop();
         const existingMcps = claudeConfigDetected?.mcpServers || [];
-        const orchestration = orchestrateMcpSetup(targetPath, detectedStack, existingMcps);
+        const orchestration = orchestrateMcpSetup(targetPath, detectedStack, existingMcps,
+          { integrations: config.project?.integrations ?? [] });
 
         const autoNames = Object.keys(orchestration.autoInstallable);
         const manualNames = Object.keys(orchestration.needsManualSetup);
@@ -467,6 +468,8 @@ export async function initCommand(options) {
     }
 
     spinner.succeed('MORPH-SPEC installed successfully!');
+    // The dashboard's portfolio learns about the project here (fail-open).
+    registerProject(targetPath, 'init');
 
     // Show next steps
     logger.blank();

package/src/commands/project/install-plugin-cmd.js

@@ -5,7 +5,7 @@ import { logger } from '../../utils/logger.js';
 export async function installPluginCommand(pluginName, _options) {
   if (!pluginName) {
     logger.error('Plugin name required. Usage: morph-spec install-plugin <name>');
-    logger.dim('  Available: superpowers, context7');
+    logger.dim('  Available: context7');
     process.exit(1);
   }
   try {

package/src/commands/project/update.js

@@ -33,6 +33,7 @@ import { getProjectTags } from '../../lib/stack-filter.js';
 import { updateClaudeMdAgentsBlock, installRulesForStack } from '../../scripts/setup-infra.js';
 import { reconcileLegacyTemplatesCopy } from '../../lib/installers/templates-reconcile.js';
 import { createEffects } from '../../lib/installers/effects.js';
+import { registerProject } from '../../lib/projects/registry.js';
 import {
   writeGraphifyignore, describeOutdatedIgnore, graphifyignoreTracked,
 } from '../../lib/graph/graphifyignore.js';
@@ -758,6 +759,10 @@ export async function updateCommand(options = {}) {
     logger.blank();
 
     if (!dryRun) {
+      // The dashboard's portfolio learns about the project here (fail-open;
+      // outside the project, so not an effect of the update itself).
+      registerProject(targetPath, 'update');
+
       // Show version change
       if (projectCheck.current && projectCheck.current !== cliCheck.current) {
         logger.success(`Updated: ${projectCheck.current} → ${cliCheck.current}`);

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