@aiwg/cockpit 2026.7.7 → 2026.7.9

package/contrib/contribution.schema.json

@@ -45,6 +45,7 @@
           "items": {
             "type": "object",
             "required": ["id", "title", "source"],
+            "additionalProperties": false,
             "properties": {
               "id": { "type": "string", "pattern": "^[a-z0-9][a-z0-9._-]{0,63}$" },
               "title": { "type": "string" },
@@ -52,11 +53,38 @@
             }
           }
         },
+        "workflows": {
+          "type": "array",
+          "items": {
+            "type": "object",
+            "required": ["id", "title", "steps"],
+            "additionalProperties": false,
+            "properties": {
+              "id": { "type": "string", "pattern": "^[a-z0-9][a-z0-9._-]{0,63}$" },
+              "title": { "type": "string" },
+              "description": { "type": "string" },
+              "steps": {
+                "type": "array",
+                "minItems": 1,
+                "items": {
+                  "type": "object",
+                  "required": ["action"],
+                  "additionalProperties": false,
+                  "properties": {
+                    "action": { "type": "string", "pattern": "^[a-z0-9][a-z0-9._-]{0,63}$" },
+                    "label": { "type": "string" }
+                  }
+                }
+              }
+            }
+          }
+        },
         "hooks": {
           "type": "array",
           "items": {
             "type": "object",
             "required": ["on", "action"],
+            "additionalProperties": false,
             "properties": {
               "on": { "type": "string", "description": "event name, e.g. session.output, instance.state-changed" },
               "action": { "type": "string", "pattern": "^[a-z0-9][a-z0-9._-]{0,63}$", "description": "id of a contributed action to run" }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiwg/cockpit",
-  "version": "2026.7.7",
+  "version": "2026.7.9",
   "description": "AIWG Cockpit — UX-first control plane over AIWG + multi-stack agentic sessions. Opt-in, separately published; NOT shipped in the base aiwg npm package (guarded by test/smoke/cockpit-base-footprint.test.js).",
   "type": "module",
   "license": "MIT",

package/shell-core/keychain.mjs

@@ -38,6 +38,9 @@ async function canRun(cmd) {
 }
 
 export async function storeCockpitToken(token, account = `bridge-${process.pid}`) {
+  if (process.env.AIWG_COCKPIT_KEYCHAIN_DISABLED === '1') {
+    throw new Error('OS keychain disabled by AIWG_COCKPIT_KEYCHAIN_DISABLED');
+  }
   const os = platform();
   if (os === 'darwin' && await canRun('security')) {
     await collect('security', ['add-generic-password', '-a', account, '-s', SERVICE, '-w', token, '-U']);

package/shell-core/runtime.mjs

@@ -14,6 +14,9 @@ export const RUNTIME_FILE = join(homedir(), '.aiwg', 'cockpit', 'runtime', 'brid
 /** Read the per-launch Bridge connection (token, port, url). Throws if not launched. */
 export async function readRuntime(file = RUNTIME_FILE) {
   const r = JSON.parse(await readFile(file, 'utf8'));
+  if (process.env.AIWG_COCKPIT_KEYCHAIN_STRICT === '1' && !r.token_ref) {
+    throw new Error(`runtime file ${file} is not keychain-backed in strict mode`);
+  }
   const token = r.token || await readCockpitToken(r.token_ref);
   if (!token || !r.port) throw new Error(`runtime file ${file} missing token/port`);
   return { ...r, token, url: `http://127.0.0.1:${r.port}` };

package/web/src/App.test.tsx

@@ -12,10 +12,10 @@ beforeEach(() => {
 });
 afterEach(() => { cleanup(); vi.restoreAllMocks(); });
 
-const TAB_LABELS = ['Home', 'Inventory', 'Running', 'Sessions', 'Approvals', 'Explore', 'Library', 'Actions'];
+const TAB_LABELS = ['Home', 'Inventory', 'Running', 'Missions', 'Sessions', 'Approvals', 'Explore', 'Library', 'Telemetry', 'Memory', 'Actions'];
 
 describe('App shell (rendered DOM)', () => {
-  it('renders an ARIA tablist with all eight tabs', () => {
+  it('renders an ARIA tablist with all Cockpit tabs', () => {
     render(<App />);
     expect(screen.getByRole('tablist', { name: /cockpit views/i })).toBeTruthy();
     expect(screen.getAllByRole('tab')).toHaveLength(TAB_LABELS.length);
@@ -45,6 +45,108 @@ describe('App shell (rendered DOM)', () => {
     expect(screen.getByText(/start a session automatically/i)).toBeTruthy();
   });
 
+  it('renders durable Missions projection from aiwg mc state and live executor work', async () => {
+    globalThis.fetch = vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.includes('/api/health')) return jsonResponse({ executor_url: 'http://127.0.0.1:8122' });
+      if (url.includes('/api/inventory')) return jsonResponse({ instances: [instance('host-1', 'host', 'Codex host')] });
+      if (url.includes('/api/running')) return jsonResponse({ count: 1, running: [{ instance_id: 'host-1', task_id: 'task-abc', state: 'working', tenant: 'local' }] });
+      if (url.includes('/api/approvals')) return jsonResponse({ approvals: [] });
+      if (url.includes('/api/cost')) return jsonResponse({ total: { input_tokens: 0, output_tokens: 0, usd: 0 }, per_instance: [] });
+      if (url.includes('/api/missions')) return jsonResponse({
+        source: 'aiwg-mc + agentic-sandbox',
+        fetched_at: new Date().toISOString(),
+        count: 2,
+        sessions: [{
+          id: 'mc-1',
+          name: 'Release hardening',
+          state: 'active',
+          source: 'aiwg-mc',
+          audit_count: 1,
+          audit_tail: [{ event: 'mission_dispatched', ts: '2026-07-04T12:00:00.000Z', missionId: 'm-1' }],
+          missions: [{ id: 'm-1', session_id: 'mc-1', source: 'aiwg-mc', title: 'Finish cockpit', status: 'running', loop: 1, max_iterations: 5, terminal: false }],
+        }, {
+          id: 'executor-live',
+          name: 'Executor live tasks',
+          state: 'active',
+          source: 'agentic-sandbox',
+          audit_count: 0,
+          audit_tail: [],
+          missions: [{ id: 'host-1::task-abc', session_id: 'executor-live', source: 'executor-task', title: 'Task task-abc', status: 'working', instance_id: 'host-1', task_id: 'task-abc', terminal: false }],
+        }],
+        missions: [
+          { id: 'm-1', session_id: 'mc-1', source: 'aiwg-mc', title: 'Finish cockpit', status: 'running', terminal: false },
+          { id: 'host-1::task-abc', session_id: 'executor-live', source: 'executor-task', title: 'Task task-abc', status: 'working', terminal: false },
+        ],
+      });
+      return jsonResponse({});
+    }) as typeof fetch;
+
+    render(<App />);
+    fireEvent.click(screen.getByRole('tab', { name: 'Missions' }));
+
+    expect((await screen.findAllByText('Release hardening')).length).toBeGreaterThanOrEqual(1);
+    expect(screen.getByLabelText('Mission status summary').textContent).toContain('2 total');
+    expect(screen.getByText('Finish cockpit')).toBeTruthy();
+    expect(screen.getByText(/mission_dispatched/)).toBeTruthy();
+  });
+
+  it('renders Bridge-backed Telemetry from unified events and cost', async () => {
+    globalThis.fetch = vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.includes('/api/health')) return jsonResponse({ executor_url: 'http://127.0.0.1:8122' });
+      if (url.includes('/api/inventory')) return jsonResponse({ instances: [instance('host-1', 'host', 'Codex host')] });
+      if (url.includes('/api/running')) return jsonResponse({ count: 1, running: [{ instance_id: 'host-1', task_id: 'task-abc', state: 'working', tenant: 'local' }] });
+      if (url.includes('/api/approvals')) return jsonResponse({ approvals: [] });
+      if (url.includes('/api/cost')) return jsonResponse({ total: { input_tokens: 1000, output_tokens: 2000, usd: 0.42 }, per_instance: [] });
+      if (url.includes('/api/missions')) return jsonResponse({ count: 1, sessions: [], missions: [{ id: 'm-1', session_id: 'mc-1', source: 'aiwg-mc', title: 'Mission', status: 'completed', terminal: true }] });
+      if (url.includes('/api/events/snapshot')) return jsonResponse({
+        source: 'cockpit.unified-event-model/v1',
+        fetched_at: new Date().toISOString(),
+        count: 2,
+          events: [
+            { id: 'mission:m-1', type: 'mission.lifecycle', source: 'aiwg-mc', subject: 'm-1', state: 'completed', ts: new Date().toISOString() },
+            { id: 'session:host-1:sess-1', type: 'session.lifecycle', source: 'pty-session', subject: 'sess-1', state: 'available', ts: new Date().toISOString() },
+            { id: 'task:task-abc', type: 'task.lifecycle', source: 'a2a', subject: 'task-abc', state: 'working', ts: new Date().toISOString() },
+          ],
+      });
+      return jsonResponse({});
+    }) as typeof fetch;
+
+    render(<App />);
+    fireEvent.click(screen.getByRole('tab', { name: 'Telemetry' }));
+
+    expect(await screen.findByText('cockpit.unified-event-model/v1')).toBeTruthy();
+    expect(screen.getByText('$0.42')).toBeTruthy();
+    expect(screen.getByText('mission.lifecycle')).toBeTruthy();
+    fireEvent.click(screen.getByRole('button', { name: 'session' }));
+    expect(screen.getByText('session.lifecycle')).toBeTruthy();
+  });
+
+  it('renders local Memory and auto-notes terminal Missions', async () => {
+    localStorage.clear();
+    globalThis.fetch = vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.includes('/api/health')) return jsonResponse({ executor_url: 'http://127.0.0.1:8122' });
+      if (url.includes('/api/inventory')) return jsonResponse({ instances: [instance('host-1', 'host', 'Codex host')] });
+      if (url.includes('/api/running')) return jsonResponse({ count: 0, running: [] });
+      if (url.includes('/api/approvals')) return jsonResponse({ approvals: [] });
+      if (url.includes('/api/cost')) return jsonResponse({ total: { input_tokens: 0, output_tokens: 0, usd: 0 }, per_instance: [] });
+      if (url.includes('/api/missions')) return jsonResponse({
+        count: 1,
+        sessions: [],
+        missions: [{ id: 'm-done', session_id: 'mc-1', source: 'aiwg-mc', title: 'Closed release gate', status: 'completed', completed_at: '2026-07-04T12:00:00.000Z', terminal: true }],
+      });
+      return jsonResponse({});
+    }) as typeof fetch;
+
+    render(<App />);
+    fireEvent.click(screen.getByRole('tab', { name: 'Memory' }));
+
+    expect(await screen.findByText('Closed release gate')).toBeTruthy();
+    expect(screen.getByText(/1 saved/i)).toBeTruthy();
+  });
+
   it('renders the welcome heading and its tabpanel (not blank)', () => {
     render(<App />);
     expect(screen.getByRole('heading', { name: /work alongside your agents/i })).toBeTruthy();
@@ -158,18 +260,60 @@ describe('App shell (rendered DOM)', () => {
           source: 'test',
           inject: { command: 'aiwg doctor' },
         }],
+        screens: [{ id: 'index-live', title: 'Live Index', source: 'cockpit://index/live', contribution: 'test' }],
+        workflows: [{
+          id: 'maintenance-check',
+          title: 'Maintenance Check',
+          description: 'Run doctor through an agentic session.',
+          source: 'test',
+          steps: [{ action: 'doctor', label: 'Doctor' }],
+        }],
       });
       return jsonResponse({});
     }) as typeof fetch;
 
     render(<App />);
     fireEvent.click(screen.getByRole('tab', { name: 'Actions' }));
+    expect(await screen.findByText('Live Index')).toBeTruthy();
+    expect(screen.getByText('Maintenance Check')).toBeTruthy();
     fireEvent.click(await screen.findByRole('button', { name: /copy CLI command for run doctor/i }));
 
     expect(writeText).toHaveBeenCalledWith('aiwg doctor');
     await waitFor(() => expect(screen.getByText(/copied "aiwg doctor"/i)).toBeTruthy());
   });
 
+  it('renders live index status and query results in Explore', async () => {
+    globalThis.fetch = vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.includes('/api/health')) return jsonResponse({ executor_url: 'http://127.0.0.1:8122' });
+      if (url.includes('/api/inventory')) return jsonResponse({ instances: [instance('host-1', 'host', 'Codex host')] });
+      if (url.includes('/api/running')) return jsonResponse({ count: 0, running: [] });
+      if (url.includes('/api/approvals')) return jsonResponse({ approvals: [] });
+      if (url.includes('/api/cost')) return jsonResponse({ total: { input_tokens: 0, output_tokens: 0, usd: 0 }, per_instance: [] });
+      if (url.includes('/api/index/status')) return jsonResponse({
+        graphs: [{ name: 'project', origin: 'builtin', shared: false, defaultBuild: true, location: '.aiwg/.index/project', built: true, builtAt: '2026-07-04T12:00:00.000Z', ageHours: 1, entries: 42, missing: false }],
+        orphanIndexDirs: [],
+        warnings: [],
+        summary: { total: 1, built: 1, missing: 0, orphans: 0, warnings: 0 },
+      });
+      if (url.includes('/api/index/query')) return jsonResponse({
+        results: [{ path: '.aiwg/requirements/UC-001.md', title: 'Mission requirements', type: 'use-case', phase: 'requirements', summary: 'Operator workflow coverage', score: 0.91 }],
+        total: 1,
+      });
+      return jsonResponse({});
+    }) as typeof fetch;
+
+    render(<App />);
+    fireEvent.click(screen.getByRole('tab', { name: 'Explore' }));
+
+    expect(await screen.findByText(/1\/1 graphs built/i)).toBeTruthy();
+    fireEvent.change(screen.getByLabelText(/index query/i), { target: { value: 'mission' } });
+    fireEvent.click(screen.getByRole('button', { name: /search index/i }));
+
+    expect(await screen.findByText('Mission requirements')).toBeTruthy();
+    expect(screen.getByText(/operator workflow coverage/i)).toBeTruthy();
+  });
+
   it('can open the mission-handoff review layout from a shareable URL', async () => {
     window.history.replaceState({}, '', '/?wall=handoff');
     globalThis.fetch = vi.fn(async (input: RequestInfo | URL) => {

package/web/src/App.tsx

@@ -5,11 +5,14 @@ import type { Approval, Instance, ResponseNeeded } from './types';
 import { Welcome } from './components/Welcome';
 import { Inventory } from './components/Inventory';
 import { Running } from './components/Running';
+import { Missions } from './components/Missions';
 import { Sessions } from './components/Sessions';
 import { Approvals } from './components/Approvals';
 import { Explore } from './components/Explore';
 import { Library } from './components/Library';
 import { Actions } from './components/Actions';
+import { Telemetry } from './components/Telemetry';
+import { Memory } from './components/Memory';
 import { StartSessionModal } from './components/StartSessionModal';
 import { LaunchInstanceModal } from './components/LaunchInstanceModal';
 
@@ -17,10 +20,13 @@ const TABS = [
   { id: 'welcome', label: 'Home' },
   { id: 'inventory', label: 'Inventory' },
   { id: 'running', label: 'Running' },
+  { id: 'missions', label: 'Missions' },
   { id: 'sessions', label: 'Sessions' },
   { id: 'approvals', label: 'Approvals' },
   { id: 'explore', label: 'Explore' },
   { id: 'library', label: 'Library' },
+  { id: 'telemetry', label: 'Telemetry' },
+  { id: 'memory', label: 'Memory' },
   { id: 'actions', label: 'Actions' },
 ] as const;
 type TabId = (typeof TABS)[number]['id'];
@@ -165,6 +171,7 @@ export function App() {
         <Panel id="welcome" tab={tab}><Welcome onStartSession={() => requestStart()} onLaunchInstance={() => setLaunchOpen(true)} goTo={(t) => setTab(t as TabId)} /></Panel>
         <Panel id="inventory" tab={tab}><Inventory onStartSession={requestStart} onLaunchInstance={() => setLaunchOpen(true)} /></Panel>
         <Panel id="running" tab={tab}><Running refreshTick={refreshTick} /></Panel>
+        <Panel id="missions" tab={tab}><Missions refreshTick={refreshTick} /></Panel>
         {/* Sessions stays mounted so the WebSocket survives tab switches */}
         <section id="panel-sessions" role="tabpanel" aria-labelledby="tab-sessions" hidden={tab !== 'sessions'}>
           <Sessions session={session} composer={composer} setComposer={setComposer} onRequestStart={requestStart} />
@@ -174,6 +181,8 @@ export function App() {
         <Panel id="library" tab={tab}>
           <Library session={session} setComposer={setComposer} goSessions={() => setTab('sessions')} />
         </Panel>
+        <Panel id="telemetry" tab={tab}><Telemetry refreshTick={refreshTick} /></Panel>
+        <Panel id="memory" tab={tab}><Memory refreshTick={refreshTick} /></Panel>
         <Panel id="actions" tab={tab}>
           <Actions refreshTick={refreshTick} session={session} setComposer={setComposer} goSessions={() => setTab('sessions')} />
         </Panel>

package/web/src/components/Actions.tsx

@@ -1,25 +1,45 @@
 import { useEffect, useState } from 'react';
 import { api } from '../api';
-import type { ContribAction } from '../types';
+import type { ContribAction, ContribScreen, ContribWorkflow, ContributionsResponse } from '../types';
 import type { SessionApi } from '../useSession';
 
 // Actions INJECT a command into an agentic session — the Cockpit never runs the CLI.
 export function Actions({ refreshTick = 0, session, setComposer, goSessions }: { refreshTick?: number; session: SessionApi; setComposer: (v: string) => void; goSessions: () => void }) {
   const [actions, setActions] = useState<ContribAction[]>([]);
+  const [screens, setScreens] = useState<ContribScreen[]>([]);
+  const [workflows, setWorkflows] = useState<ContribWorkflow[]>([]);
   const [err, setErr] = useState('');
   const [note, setNote] = useState('');
 
   useEffect(() => {
-    api<{ actions: ContribAction[] }>('/api/contributions').then((d) => setActions(d.actions)).catch((e) => setErr((e as Error).message));
+    api<ContributionsResponse>('/api/contributions').then((d) => {
+      setActions(d.actions ?? []);
+      setScreens(d.screens ?? []);
+      setWorkflows(d.workflows ?? []);
+    }).catch((e) => setErr((e as Error).message));
   }, [refreshTick]);
 
-  const inject = (a: ContribAction) => {
+  const inject = async (a: ContribAction) => {
     let command = a.inject.command;
     if (a.inject.needs_args) {
       const extra = prompt(`Arguments for ${a.title}${a.inject.args_hint ? ` (${a.inject.args_hint})` : ''}:`, '');
       if (extra === null) return;
       if (extra.trim()) command += ' ' + extra.trim();
     }
+    await api('/api/audit/intent', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({
+        event: 'action.inject.requested',
+        detail: {
+          action_id: a.id,
+          source: a.source,
+          target: a.inject.target ?? 'focused',
+          command,
+          controller_attached: session.isController,
+        },
+      }),
+    }).catch(() => undefined);
     if (session.isController && session.sendInput(command)) {
       setNote(`Injected "${command}" into the attached session — the agent runs it.`);
     } else {
@@ -32,6 +52,20 @@ export function Actions({ refreshTick = 0, session, setComposer, goSessions }: {
     await navigator.clipboard?.writeText(a.inject.command);
     setNote(`Copied "${a.inject.command}" to the clipboard.`);
   };
+  const actionById = new Map(actions.map((a) => [a.id, a]));
+  const openScreen = (screen: ContribScreen) => {
+    if (screen.source === 'cockpit://index/live') {
+      window.location.hash = '#explore';
+      setNote('Opened the contributed Live Index screen.');
+      return;
+    }
+    if (screen.source === 'cockpit://issues/workbench') {
+      window.location.hash = '#actions';
+      setNote('Issue Workbench is available here through the contributed issue actions and workflows.');
+      return;
+    }
+    setNote(`Unsupported contributed screen source: ${screen.source}`);
+  };
 
   return (
     <>
@@ -54,6 +88,49 @@ export function Actions({ refreshTick = 0, session, setComposer, goSessions }: {
           ))
           : <p className="empty">No contributed actions.</p>}
       </div>
+      <div className="contrib-layout">
+        <section aria-label="Contributed screens">
+          <div className="section-toolbar">
+            <h2>Screens</h2>
+          </div>
+          <div className="contrib-grid">
+            {screens.length
+              ? screens.map((s) => (
+                <article className="contrib-item" key={s.id}>
+                  <strong>{s.title}</strong>
+                  <p>{s.source}</p>
+                  <button onClick={() => openScreen(s)}>Open</button>
+                </article>
+              ))
+              : <p className="empty">No contributed screens.</p>}
+          </div>
+        </section>
+        <section aria-label="Contributed workflows">
+          <div className="section-toolbar">
+            <h2>Workflows</h2>
+          </div>
+          <div className="contrib-grid">
+            {workflows.length
+              ? workflows.map((w) => (
+                <article className="contrib-item" key={w.id}>
+                  <strong>{w.title}</strong>
+                  {w.description && <p>{w.description}</p>}
+                  <div className="workflow-steps">
+                    {w.steps.map((step, idx) => {
+                      const action = actionById.get(step.action);
+                      return (
+                        <button key={`${w.id}-${idx}-${step.action}`} disabled={!action} onClick={() => action && inject(action)}>
+                          {step.label || action?.title || step.action}
+                        </button>
+                      );
+                    })}
+                  </div>
+                </article>
+              ))
+              : <p className="empty">No contributed workflows.</p>}
+          </div>
+        </section>
+      </div>
       <p className="empty">{note || 'Output appears in the session terminal — actions drop a command into a session and the agent executes it.'}</p>
     </>
   );

package/web/src/components/Explore.tsx

@@ -1,12 +1,22 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { api } from '../api';
 import { CapabilitySearch } from './CapabilitySearch';
-import type { CapabilityResult } from '../types';
+import type { CapabilityResult, IndexQueryResponse, IndexStatusResponse } from '../types';
 
 export function Explore() {
   const [body, setBody] = useState<{ type: string; name: string; body: string } | null>(null);
+  const [status, setStatus] = useState<IndexStatusResponse | null>(null);
+  const [query, setQuery] = useState('requirements');
+  const [queryResults, setQueryResults] = useState<IndexQueryResponse | null>(null);
+  const [busy, setBusy] = useState('');
   const [err, setErr] = useState('');
 
+  const loadStatus = () => {
+    api<IndexStatusResponse>('/api/index/status').then(setStatus).catch((e) => setErr((e as Error).message));
+  };
+
+  useEffect(() => { loadStatus(); }, []);
+
   const show = (r: CapabilityResult) => {
     setBody(null); setErr('');
     // Fetch by the discovered path — deterministic even when a name is shared by two
@@ -16,6 +26,39 @@ export function Explore() {
       .then(setBody).catch((e) => setErr((e as Error).message));
   };
 
+  const runIndexQuery = async () => {
+    const q = query.trim();
+    if (!q) return;
+    setBusy('query'); setErr('');
+    try {
+      setQueryResults(await api<IndexQueryResponse>(`/api/index/query?q=${encodeURIComponent(q)}&limit=8`));
+    } catch (e) {
+      setErr((e as Error).message);
+    } finally {
+      setBusy('');
+    }
+  };
+
+  const rebuild = async () => {
+    setBusy('rebuild'); setErr('');
+    try {
+      const result = await api<{ status: IndexStatusResponse }>('/api/index/rebuild', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify({ all: true }),
+      });
+      setStatus(result.status);
+      setQueryResults(null);
+    } catch (e) {
+      setErr((e as Error).message);
+    } finally {
+      setBusy('');
+    }
+  };
+
+  const graphs = status?.graphs ?? [];
+  const queryItems = queryResults?.results ?? [];
+
   return (
     <>
       <p className="hint">
@@ -23,6 +66,50 @@ export function Explore() {
         session (Actions/Sessions). Search modeled on the fortemi-react patterns.
       </p>
       {err && <p className="err">{err}</p>}
+      <section className="index-live" aria-label="Live index status">
+        <div className="section-toolbar">
+          <div>
+            <h2>Live Index</h2>
+            <p className="hint">
+              {status
+                ? `${status.summary.built}/${status.summary.total} graphs built, ${status.summary.missing} missing, ${status.summary.orphans} orphan dirs.`
+                : 'Loading index status.'}
+            </p>
+          </div>
+          <div className="manage-actions">
+            <button onClick={loadStatus} disabled={busy === 'rebuild'}>Refresh</button>
+            <button onClick={rebuild} disabled={busy === 'rebuild'}>{busy === 'rebuild' ? 'Rebuilding...' : 'Rebuild all'}</button>
+          </div>
+        </div>
+        <div className="index-grid">
+          {graphs.map((g) => (
+            <article className={g.missing ? 'index-graph missing' : 'index-graph'} key={g.name}>
+              <div><strong>{g.name}</strong> <span className="badge">{g.origin}</span></div>
+              <p>{g.built ? `${g.entries ?? 0} entries` : 'not built'}{g.ageHours !== null ? ` · ${g.ageHours}h old` : ''}</p>
+            </article>
+          ))}
+        </div>
+        <div className="index-query">
+          <label>
+            Index query
+            <input value={query} onChange={(e) => setQuery(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter') void runIndexQuery(); }} />
+          </label>
+          <button onClick={runIndexQuery} disabled={busy === 'query'}>{busy === 'query' ? 'Searching...' : 'Search index'}</button>
+        </div>
+        {queryResults && (
+          <div className="index-results" aria-label="Index query results">
+            {queryItems.length
+              ? queryItems.map((r) => (
+                <article key={r.path}>
+                  <strong>{r.title || r.path}</strong>
+                  <p>{r.summary || r.path}</p>
+                  <small>{r.type || 'artifact'}{r.phase ? ` · ${r.phase}` : ''}{typeof r.score === 'number' ? ` · ${r.score.toFixed(2)}` : ''}</small>
+                </article>
+              ))
+              : <p className="empty">No index hits.</p>}
+          </div>
+        )}
+      </section>
       <div className="grid2">
         <CapabilitySearch onPick={show} autoFocus />
         <div role="region" aria-label="Capability detail">