npm - @aiwg/cockpit - Versions diffs - 2026.6.3 - Mend

@aiwg/cockpit 2026.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (49) hide show

package/README.md +337 -0
package/bridge/package.json +13 -0
package/bridge/src/public/index.html +395 -0
package/bridge/src/server.mjs +1132 -0
package/bridge/src/smoke.mjs +158 -0
package/contrib/aiwg-core.json +15 -0
package/contrib/contribution.schema.json +69 -0
package/desktop/README.md +42 -0
package/desktop/src-tauri/Cargo.toml +17 -0
package/desktop/src-tauri/build.rs +3 -0
package/desktop/src-tauri/frontend/index.html +11 -0
package/desktop/src-tauri/src/main.rs +55 -0
package/desktop/src-tauri/tauri.conf.json +20 -0
package/package.json +49 -0
package/runtime-docs/README.md +38 -0
package/shell-core/runtime.mjs +45 -0
package/shell-core/smoke.mjs +36 -0
package/vscode/README.md +25 -0
package/vscode/extension.js +59 -0
package/vscode/package.json +29 -0
package/web/dist/assets/index-B5anpdS1.js +67 -0
package/web/dist/assets/index-CP3BF6uZ.css +32 -0
package/web/dist/index.html +14 -0
package/web/index.html +13 -0
package/web/package.json +31 -0
package/web/src/App.test.tsx +237 -0
package/web/src/App.tsx +255 -0
package/web/src/api.ts +20 -0
package/web/src/components/Actions.tsx +60 -0
package/web/src/components/Approvals.tsx +62 -0
package/web/src/components/CapabilitySearch.tsx +73 -0
package/web/src/components/Explore.tsx +41 -0
package/web/src/components/Inventory.tsx +124 -0
package/web/src/components/LaunchInstanceModal.test.tsx +97 -0
package/web/src/components/LaunchInstanceModal.tsx +236 -0
package/web/src/components/Library.tsx +76 -0
package/web/src/components/Running.tsx +60 -0
package/web/src/components/Sessions.test.tsx +125 -0
package/web/src/components/Sessions.tsx +189 -0
package/web/src/components/StartSessionModal.test.tsx +86 -0
package/web/src/components/StartSessionModal.tsx +168 -0
package/web/src/components/Welcome.tsx +474 -0
package/web/src/main.tsx +11 -0
package/web/src/styles.css +254 -0
package/web/src/types.ts +47 -0
package/web/src/useDebounce.ts +10 -0
package/web/src/useSession.ts +220 -0
package/web/src/util.test.ts +30 -0
package/web/src/util.ts +17 -0

package/bridge/src/public/index.html ADDED Viewed

@@ -0,0 +1,395 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>AIWG Cockpit</title>
+  <style>
+    :root { color-scheme: light dark; --bg:#0f1115; --panel:#171a21; --fg:#e6e8ec; --muted:#9aa3b2; --line:#2a2f3a; --ok:#3fb950; --warn:#d29922; --idle:#6b7280; --accent:#818cf8; --err:#f85149; }
+    * { box-sizing: border-box; }
+    body { margin:0; font:15px/1.5 system-ui, sans-serif; background:var(--bg); color:var(--fg); }
+    header { padding:14px 22px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
+    header h1 { font-size:18px; margin:0; font-weight:650; }
+    header .mark { color:var(--accent); font-size:20px; }
+    header .meta { margin-left:auto; color:var(--muted); font-size:13px; }
+    [role=tablist] { display:flex; gap:4px; padding:0 22px; border-bottom:1px solid var(--line); }
+    [role=tab] { background:none; border:0; border-bottom:2px solid transparent; color:var(--muted); padding:10px 14px; cursor:pointer; font:inherit; }
+    [role=tab][aria-selected=true] { color:var(--fg); border-bottom-color:var(--accent); }
+    [role=tab]:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
+    main { padding:22px; }
+    button, select, input { background:var(--panel); color:var(--fg); border:1px solid var(--line); border-radius:7px; padding:7px 12px; font:inherit; }
+    button { cursor:pointer; }
+    button:hover:not(:disabled) { border-color:var(--accent); }
+    button:disabled { opacity:.45; cursor:not-allowed; }
+    button:focus-visible, select:focus-visible, input:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
+    table { width:100%; border-collapse:collapse; background:var(--panel); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
+    caption { text-align:left; color:var(--muted); padding:10px 14px; font-size:13px; }
+    th, td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); }
+    th { color:var(--muted); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
+    tr:last-child td { border-bottom:0; }
+    code { font:13px ui-monospace, monospace; color:var(--muted); }
+    .badge { display:inline-block; padding:2px 8px; border-radius:999px; border:1px solid var(--line); font-size:12px; }
+    .badge.controller { border-color:var(--ok); color:var(--ok); }
+    .badge.observer { border-color:var(--accent); color:var(--accent); }
+    .state { display:inline-flex; align-items:center; gap:7px; }
+    .dot { width:8px; height:8px; border-radius:50%; flex:0 0 auto; background:var(--idle); }
+    .state.running .dot, .state.working .dot { background:var(--ok); } .state.provisioning .dot { background:var(--warn); }
+    .empty { color:var(--muted); padding:22px; } .err { color:var(--err); padding:12px 0; }
+    .controls { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:14px; }
+    .controls label { color:var(--muted); font-size:13px; }
+    #terminal { background:#0a0c10; border:1px solid var(--line); border-radius:10px; padding:14px; min-height:240px; max-height:48vh; overflow:auto; white-space:pre-wrap; word-break:break-word; font:13px/1.55 ui-monospace, monospace; color:#cdd3de; }
+    .inputrow { display:flex; gap:8px; margin-top:12px; }
+    .inputrow input { flex:1; font-family:ui-monospace, monospace; }
+    .hint { color:var(--muted); font-size:13px; margin:6px 0 0; }
+  </style>
+</head>
+<body>
+  <header>
+    <span class="mark" aria-hidden="true">◆</span>
+    <h1>AIWG&nbsp;Cockpit</h1>
+    <span class="meta" id="meta" aria-live="polite"></span>
+    <button id="refresh" type="button">Refresh</button>
+  </header>
+  <div role="tablist" aria-label="Cockpit views">
+    <button role="tab" id="tab-inventory" aria-controls="panel-inventory" aria-selected="true">Inventory</button>
+    <button role="tab" id="tab-running" aria-controls="panel-running" aria-selected="false" tabindex="-1">Running</button>
+    <button role="tab" id="tab-sessions" aria-controls="panel-sessions" aria-selected="false" tabindex="-1">Sessions</button>
+    <button role="tab" id="tab-explore" aria-controls="panel-explore" aria-selected="false" tabindex="-1">Explore</button>
+    <button role="tab" id="tab-approvals" aria-controls="panel-approvals" aria-selected="false" tabindex="-1">Approvals</button>
+    <button role="tab" id="tab-actions" aria-controls="panel-actions" aria-selected="false" tabindex="-1">Actions</button>
+  </div>
+  <main>
+    <section id="panel-inventory" role="tabpanel" aria-labelledby="tab-inventory">
+      <div id="inventory-view" role="region" aria-label="Agent instance inventory">Loading…</div>
+    </section>
+    <section id="panel-running" role="tabpanel" aria-labelledby="tab-running" hidden>
+      <div id="running-view" role="region" aria-label="Running agents">Loading…</div>
+    </section>
+    <section id="panel-sessions" role="tabpanel" aria-labelledby="tab-sessions" hidden>
+      <div class="controls">
+        <label for="sel-instance">Instance</label>
+        <select id="sel-instance"></select>
+        <label for="sel-session">Session</label>
+        <select id="sel-session"></select>
+        <button id="attach-drive" type="button">Attach · drive</button>
+        <button id="attach-observe" type="button">Attach · observe</button>
+        <button id="btn-keyframe" type="button" disabled>Keyframe</button>
+        <button id="btn-replay" type="button" disabled>Reattach + replay</button>
+        <button id="btn-detach" type="button" disabled>Detach</button>
+        <span id="role-badge"></span>
+      </div>
+      <div id="terminal" role="log" aria-live="polite" aria-label="Session output"></div>
+      <div class="inputrow">
+        <input id="cmd" type="text" placeholder="Type to drive the session…" autocomplete="off" disabled aria-label="Session input" />
+        <button id="cmd-send" type="button" disabled>Send</button>
+      </div>
+      <p class="hint" id="session-hint">Pick a session, then attach. The first attach drives; later attaches observe. Output mirrors to every viewer — that's the awareness model.</p>
+    </section>
+    <section id="panel-explore" role="tabpanel" aria-labelledby="tab-explore" hidden>
+      <form class="controls" id="explore-form">
+        <label for="ex-q">Capability</label>
+        <input id="ex-q" type="search" placeholder="e.g. deploy production, audit security…" autocomplete="off" style="min-width:280px" />
+        <label for="ex-type">Type</label>
+        <select id="ex-type">
+          <option value="all">all</option><option value="skill">skill</option><option value="agent">agent</option>
+          <option value="command">command</option><option value="rule">rule</option><option value="flow">flow</option>
+        </select>
+        <button type="submit">Discover</button>
+      </form>
+      <p class="hint">Live from the AIWG registry via <code>aiwg discover</code> — every query re-reads the index, no app restart. The UI is data-driven from the same capability graph the agents use.</p>
+      <div style="display:grid;grid-template-columns:minmax(260px,1fr) 1.4fr;gap:16px;align-items:start">
+        <div id="ex-results" role="region" aria-label="Discovery results"></div>
+        <div id="ex-body" role="region" aria-label="Capability detail"><p class="empty">Select a result to inspect its definition.</p></div>
+      </div>
+    </section>
+    <section id="panel-approvals" role="tabpanel" aria-labelledby="tab-approvals" hidden>
+      <p class="hint">Unified approval inbox — <code>hitl-prompt/v1</code> requests from every stack, in one place. Decisions are operator authorization, not the agent's.</p>
+      <div id="approvals-view" role="region" aria-label="Pending approvals">Loading…</div>
+    </section>
+    <section id="panel-actions" role="tabpanel" aria-labelledby="tab-actions" hidden>
+      <p class="hint">Actions are <strong>contributed declaratively</strong> — first-party and (soon) any installed AIWG extension. Clicking one <strong>injects a command into an agentic session</strong> (the focused one, else it offers a new one); the agent there runs it. The Cockpit never runs the CLI — agents do.</p>
+      <div class="controls" id="actions-bar" role="group" aria-label="Contributed actions"></div>
+      <div id="action-out" role="region" aria-label="About actions"><p class="empty">Output appears in the session terminal — actions drop a command into a session and the agent executes it.</p></div>
+    </section>
+  </main>
+  <script type="module">
+    // --- view switching (ARIA tabs) ---
+    const tabs = [...document.querySelectorAll('[role=tab]')];
+    function show(tabId) {
+      for (const t of tabs) {
+        const sel = t.id === tabId;
+        t.setAttribute('aria-selected', String(sel));
+        t.tabIndex = sel ? 0 : -1;
+        document.getElementById(t.getAttribute('aria-controls')).hidden = !sel;
+      }
+      if (tabId === 'tab-running') loadRunning();
+      if (tabId === 'tab-sessions') loadInstances();
+      if (tabId === 'tab-actions') loadActions();
+      if (tabId === 'tab-approvals') loadApprovals();
+    }
+    tabs.forEach((t) => t.addEventListener('click', () => show(t.id)));
+    // shared: POST/DELETE a control-plane call, then re-run a loader
+    async function control(path, method, reload) {
+      try { await api(path, { method }); } catch (e) { alert(e.message); }
+      if (reload) reload();
+    }
+    const meta = document.getElementById('meta');
+    const fmt = (id) => (id && id.length > 12) ? id.slice(0, 8) + '…' : id;
+    const esc = (s) => String(s).replace(/[&<>]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;' }[c]));
+    // per-launch token injected by the Bridge for the gated control surface
+    const TOKEN = window.__COCKPIT_TOKEN__ || '';
+    const api = (u, o = {}) => fetch(u, { ...o, headers: { ...(o.headers || {}), authorization: 'Bearer ' + TOKEN } });
+    // --- Inventory ---
+    async function loadInventory() {
+      const view = document.getElementById('inventory-view');
+      view.textContent = 'Loading…';
+      try {
+        const inv = await (await api('/api/inventory')).json();
+        meta.textContent = `${inv.count} instance(s) · ${new Date(inv.fetched_at).toLocaleTimeString()}`;
+        if (!inv.instances.length) { view.innerHTML = '<p class="empty">No instances.</p>'; return; }
+        view.innerHTML = `<table><caption>Agent instances (live from the executor)</caption>
+          <thead><tr><th scope="col">Instance</th><th scope="col">Runtime</th><th scope="col">Loadout</th><th scope="col">State</th><th scope="col">Tenant</th><th scope="col">Manage</th></tr></thead>
+          <tbody>${inv.instances.map((i) => `<tr>
+            <td><code title="${esc(i.id)}">${esc(fmt(i.id))}</code></td>
+            <td><span class="badge">${esc(i.runtime)}</span></td><td>${esc(i.loadout)}</td>
+            <td><span class="state ${esc(i.state)}"><span class="dot" aria-hidden="true"></span>${esc(i.state)}</span></td>
+            <td>${esc(i.tenant)}</td>
+            <td style="white-space:nowrap">
+              ${i.state === 'running'
+                ? `<button class="mng" data-act="stop" data-id="${esc(i.id)}" aria-label="Stop ${esc(fmt(i.id))}">Stop</button>`
+                : `<button class="mng" data-act="start" data-id="${esc(i.id)}" aria-label="Start ${esc(fmt(i.id))}">Start</button>`}
+              <button class="mng" data-act="destroy" data-id="${esc(i.id)}" aria-label="Destroy ${esc(fmt(i.id))}">Destroy</button>
+            </td></tr>`).join('')}</tbody></table>`;
+        view.querySelectorAll('.mng').forEach((b) => b.addEventListener('click', () => {
+          const { act, id } = b.dataset;
+          if (act === 'destroy' && !confirm(`Destroy instance ${fmt(id)}? This cannot be undone.`)) return;
+          const path = act === 'destroy' ? `/api/instances/${encodeURIComponent(id)}` : `/api/instances/${encodeURIComponent(id)}/${act}`;
+          control(path, act === 'destroy' ? 'DELETE' : 'POST', loadInventory);
+        }));
+      } catch (e) { view.innerHTML = `<p class="err">Could not load inventory: ${esc(e.message)}</p>`; }
+    }
+    // --- Running board ---
+    async function loadRunning() {
+      const view = document.getElementById('running-view');
+      view.textContent = 'Loading…';
+      try {
+        const r = await (await api('/api/running')).json();
+        let costLine = '';
+        try {
+          const c = await (await api('/api/cost')).json();
+          costLine = `<p class="hint">Spend across stacks: <strong>$${c.total.usd.toFixed(2)}</strong> · ${(c.total.input_tokens + c.total.output_tokens).toLocaleString()} tokens</p>`;
+        } catch { /* cost optional */ }
+        if (!r.running.length) { view.innerHTML = costLine + '<p class="empty">Nothing running.</p>'; return; }
+        view.innerHTML = costLine + `<table><caption>Running across all stacks — ${r.count} task(s)</caption>
+          <thead><tr><th scope="col">Instance</th><th scope="col">Task</th><th scope="col">State</th><th scope="col">Tenant</th><th scope="col">Control</th></tr></thead>
+          <tbody>${r.running.map((t) => `<tr>
+            <td><code title="${esc(t.instance_id)}">${esc(fmt(t.instance_id))}</code></td>
+            <td><code title="${esc(t.task_id)}">${esc(fmt(t.task_id))}</code></td>
+            <td><span class="state ${esc(t.state)}"><span class="dot" aria-hidden="true"></span>${esc(t.state)}</span></td>
+            <td>${esc(t.tenant)}</td>
+            <td><button class="stop" data-i="${esc(t.instance_id)}" data-t="${esc(t.task_id)}" aria-label="Stop task ${esc(fmt(t.task_id))}">Stop</button></td>
+          </tr>`).join('')}</tbody></table>`;
+        view.querySelectorAll('.stop').forEach((b) => b.addEventListener('click', () =>
+          control(`/api/tasks/${encodeURIComponent(b.dataset.i)}/${encodeURIComponent(b.dataset.t)}/cancel`, 'POST', loadRunning)));
+      } catch (e) { view.innerHTML = `<p class="err">Could not load running: ${esc(e.message)}</p>`; }
+    }
+    // --- Session view (live pty-ws) ---
+    const selInstance = document.getElementById('sel-instance');
+    const selSession = document.getElementById('sel-session');
+    const terminal = document.getElementById('terminal');
+    const cmd = document.getElementById('cmd');
+    const roleBadge = document.getElementById('role-badge');
+    const btn = {
+      drive: document.getElementById('attach-drive'), observe: document.getElementById('attach-observe'),
+      keyframe: document.getElementById('btn-keyframe'), replay: document.getElementById('btn-replay'),
+      detach: document.getElementById('btn-detach'), send: document.getElementById('cmd-send'),
+    };
+    let ws = null, role = null, lastSeq = 0, attachUrl = null;
+    const decode = (b64) => { try { return atob(b64); } catch { return b64; } };
+    function write(text) { terminal.textContent += text; terminal.scrollTop = terminal.scrollHeight; }
+    function setRole(r) {
+      role = r;
+      roleBadge.innerHTML = r ? `<span class="badge ${r}">${r}</span>` : '';
+      const driving = r === 'controller';
+      cmd.disabled = !driving; btn.send.disabled = !driving;
+      cmd.placeholder = driving ? 'Type to drive the session…' : 'Observing — input is read-only';
+    }
+    function setAttached(on) {
+      btn.keyframe.disabled = !on; btn.replay.disabled = !on; btn.detach.disabled = !on;
+      btn.drive.disabled = on; btn.observe.disabled = on;
+    }
+    async function loadInstances() {
+      try {
+        const inv = await (await api('/api/inventory')).json();
+        selInstance.innerHTML = inv.instances.map((i) => `<option value="${esc(i.id)}">${esc(fmt(i.id))} · ${esc(i.loadout)}</option>`).join('');
+        await loadSessions();
+      } catch (e) { document.getElementById('session-hint').innerHTML = `<span class="err">${esc(e.message)}</span>`; }
+    }
+    async function loadSessions() {
+      const inst = selInstance.value; if (!inst) return;
+      try {
+        const r = await (await api('/api/sessions?instance=' + encodeURIComponent(inst))).json();
+        if (!r.sessions.length) { selSession.innerHTML = '<option value="">— no sessions —</option>'; return; }
+        selSession.innerHTML = r.sessions.map((s) => `<option value="${esc(s.attach_url)}">${esc(s.id)} · seq ${s.seq} · ${s.members} viewer(s)</option>`).join('');
+      } catch (e) { selSession.innerHTML = `<option value="">${esc(e.message)}</option>`; }
+    }
+    selInstance.addEventListener('change', loadSessions);
+    function attach(replay) {
+      attachUrl = selSession.value;
+      if (!attachUrl) return;
+      const url = replay ? attachUrl + '?replay_from=' + lastSeq : attachUrl;
+      if (replay) terminal.textContent = '';
+      ws = new WebSocket(url);
+      ws.addEventListener('open', () => setAttached(true));
+      ws.addEventListener('close', () => { setAttached(false); setRole(null); });
+      ws.addEventListener('error', () => write('\n[connection error]\n'));
+      ws.addEventListener('message', (ev) => {
+        let m; try { m = JSON.parse(ev.data); } catch { return; }
+        switch (m.op) {
+          case 'binding_hello': ws.send(JSON.stringify({ op: 'pty.join_session' })); break;
+          case 'role_assigned': setRole(m.payload.role); break;
+          case 'output': if (m.seq) lastSeq = Math.max(lastSeq, m.seq); write(decode(m.payload.data)); break;
+          case 'keyframe':
+            for (const f of (m.payload.frames || [])) { if (f.seq) lastSeq = Math.max(lastSeq, f.seq); write(decode(f.payload.data)); }
+            if (m.seq) lastSeq = Math.max(lastSeq, m.seq);
+            break;
+          case 'error': write(`\n[${m.payload.code}]\n`); break;
+        }
+      });
+    }
+    function detach() { if (ws) { ws.close(); ws = null; } }
+    function sendInput() {
+      const text = cmd.value; if (!text || !ws || role !== 'controller') return;
+      ws.send(JSON.stringify({ op: 'pty.session_input', payload: { data: btoa(text + '\r\n') } }));
+      cmd.value = '';
+    }
+    btn.drive.addEventListener('click', () => { terminal.textContent = ''; lastSeq = 0; attach(false); });
+    btn.observe.addEventListener('click', () => { terminal.textContent = ''; lastSeq = 0; attach(false); });
+    btn.keyframe.addEventListener('click', () => ws && ws.send(JSON.stringify({ op: 'pty.request_keyframe' })));
+    btn.replay.addEventListener('click', () => { detach(); setTimeout(() => attach(true), 50); });
+    btn.detach.addEventListener('click', detach);
+    btn.send.addEventListener('click', sendInput);
+    cmd.addEventListener('keydown', (e) => { if (e.key === 'Enter') sendInput(); });
+    // --- Explore (registry-bound, live) ---
+    const exResults = document.getElementById('ex-results');
+    const exBody = document.getElementById('ex-body');
+    async function discover(ev) {
+      if (ev) ev.preventDefault();
+      const q = document.getElementById('ex-q').value.trim();
+      const type = document.getElementById('ex-type').value;
+      if (!q) return;
+      exResults.innerHTML = '<p class="empty">Searching…</p>';
+      try {
+        const u = `/api/capabilities?q=${encodeURIComponent(q)}&type=${encodeURIComponent(type)}&limit=10`;
+        const data = await (await api(u)).json();
+        const rs = data.results || [];
+        if (!rs.length) { exResults.innerHTML = '<p class="empty">No matches.</p>'; return; }
+        exResults.innerHTML = `<table><caption>${rs.length} capabilit${rs.length === 1 ? 'y' : 'ies'}</caption><tbody>${rs.map((r, i) => `
+          <tr><td>
+            <button type="button" class="ex-pick" data-i="${i}" style="width:100%;text-align:left">
+              <span class="badge">${esc(r.type)}</span> <strong>${esc(r.name)}</strong>
+              <span style="color:var(--muted);font-size:12px"> · ${(r.score ?? 0).toFixed(2)}</span><br>
+              <span style="color:var(--muted);font-size:13px">${esc((r.capability || r.title || '').slice(0, 90))}</span>
+            </button>
+          </td></tr>`).join('')}</tbody></table>`;
+        exResults.querySelectorAll('.ex-pick').forEach((b) => b.addEventListener('click', () => showCap(rs[+b.dataset.i])));
+      } catch (e) { exResults.innerHTML = `<p class="err">${esc(e.message)}</p>`; }
+    }
+    async function showCap(r) {
+      exBody.innerHTML = '<p class="empty">Loading…</p>';
+      try {
+        const d = await (await api(`/api/show?type=${encodeURIComponent(r.type)}&name=${encodeURIComponent(r.name)}`)).json();
+        exBody.innerHTML = `<div style="margin-bottom:8px"><span class="badge">${esc(r.type)}</span> <strong>${esc(r.name)}</strong></div>
+          <div id="terminal" style="max-height:52vh">${esc(d.body)}</div>`;
+      } catch (e) { exBody.innerHTML = `<p class="err">${esc(e.message)}</p>`; }
+    }
+    document.getElementById('explore-form').addEventListener('submit', discover);
+    // --- Approvals (unified HITL inbox) ---
+    async function loadApprovals() {
+      const view = document.getElementById('approvals-view');
+      view.textContent = 'Loading…';
+      try {
+        const a = await (await api('/api/approvals?status=pending')).json();
+        if (!a.approvals.length) { view.innerHTML = '<p class="empty">No pending approvals.</p>'; return; }
+        view.innerHTML = `<table><caption>${a.approvals.length} awaiting your decision</caption>
+          <thead><tr><th scope="col">Request</th><th scope="col">Risk</th><th scope="col">Instance</th><th scope="col">Decision</th></tr></thead>
+          <tbody>${a.approvals.map((p) => `<tr>
+            <td>${esc(p.prompt)}</td>
+            <td><span class="badge ${p.risk === 'high' ? 'observer' : ''}">${esc(p.risk)}</span></td>
+            <td><code title="${esc(p.instance_id)}">${esc(fmt(p.instance_id))}</code></td>
+            <td style="white-space:nowrap">
+              <button class="apr" data-id="${esc(p.id)}" data-d="approve">Approve</button>
+              <button class="apr" data-id="${esc(p.id)}" data-d="deny">Deny</button>
+            </td></tr>`).join('')}</tbody></table>`;
+        view.querySelectorAll('.apr').forEach((b) => b.addEventListener('click', () =>
+          control(`/api/approvals/${encodeURIComponent(b.dataset.id)}?decision=${b.dataset.d}`, 'POST', loadApprovals)));
+      } catch (e) { view.innerHTML = `<p class="err">Could not load approvals: ${esc(e.message)}</p>`; }
+    }
+    // --- Actions (declaratively contributed) — inject a command INTO a session ---
+    // The Cockpit never runs the CLI. An action drops its command into an agentic
+    // session (the focused one, else offers a new one) and the agent runs it.
+    const actionsBar = document.getElementById('actions-bar');
+    let contribActions = [];
+    async function loadActions() {
+      try {
+        const c = await (await api('/api/contributions')).json();
+        contribActions = c.actions || [];
+        if (!contribActions.length) { actionsBar.innerHTML = '<p class="empty">No contributed actions.</p>'; return; }
+        actionsBar.innerHTML = contribActions.map((a) =>
+          `<button type="button" class="act" data-id="${esc(a.id)}" title="injects: ${esc(a.inject.command)}">${a.icon ? esc(a.icon) + ' ' : ''}${esc(a.title)}</button>`).join('');
+        actionsBar.querySelectorAll('.act').forEach((b) => b.addEventListener('click', () => injectAction(contribActions.find((a) => a.id === b.dataset.id))));
+      } catch (e) { actionsBar.innerHTML = `<p class="err">${esc(e.message)}</p>`; }
+    }
+    function injectAction(action) {
+      if (!action) return;
+      let command = action.inject.command;
+      if (action.inject.needs_args) {
+        const extra = prompt(`Arguments for ${action.title}${action.inject.args_hint ? ' (' + action.inject.args_hint + ')' : ''}:`, '');
+        if (extra === null) return;               // cancelled
+        if (extra.trim()) command += ' ' + extra.trim();
+      }
+      show('tab-sessions');                        // actions target the sessions surface
+      cmd.value = command;
+      const hint = document.getElementById('session-hint');
+      if (ws && role === 'controller') {
+        sendInput();
+        hint.textContent = `Injected "${command}" into the attached session — the agent runs it (the Cockpit never runs the CLI).`;
+      } else {
+        cmd.focus();
+        hint.textContent = `Ready to inject "${command}". Attach to a session (drive), or start one, then Send — the agent runs it.`;
+      }
+    }
+    document.getElementById('refresh').addEventListener('click', () => {
+      const active = tabs.find((t) => t.getAttribute('aria-selected') === 'true').id;
+      if (active === 'tab-inventory') loadInventory();
+      else if (active === 'tab-running') loadRunning();
+      else if (active === 'tab-sessions') loadSessions();
+      else if (active === 'tab-approvals') loadApprovals();
+      else if (active === 'tab-actions') loadActions();
+      else discover();
+    });
+    loadInventory();
+  </script>
+</body>
+</html>