@aiwg/cockpit 2026.6.3

package/web/src/api.ts

@@ -0,0 +1,20 @@
+// Authed control-surface client. The Bridge injects window.__COCKPIT_TOKEN__ into
+// the served page; every /api call carries it as a bearer token.
+declare global {
+  interface Window { __COCKPIT_TOKEN__?: string }
+}
+
+const TOKEN = (typeof window !== 'undefined' && window.__COCKPIT_TOKEN__) || '';
+
+export function apiRaw(path: string, opts: RequestInit = {}): Promise<Response> {
+  return fetch(path, { ...opts, headers: { ...(opts.headers || {}), authorization: `Bearer ${TOKEN}` } });
+}
+
+export async function api<T = unknown>(path: string, opts: RequestInit = {}): Promise<T> {
+  const r = await apiRaw(path, opts);
+  if (!r.ok) throw new Error(`${path} → ${r.status}`);
+  if (r.status === 204) return {} as T;
+  return r.json() as Promise<T>;
+}
+
+export { TOKEN };

package/web/src/components/Actions.tsx

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api';
+import type { ContribAction } from '../types';
+import type { SessionApi } from '../useSession';
+
+// Actions INJECT a command into an agentic session — the Cockpit never runs the CLI.
+export function Actions({ session, setComposer, goSessions }: { session: SessionApi; setComposer: (v: string) => void; goSessions: () => void }) {
+  const [actions, setActions] = useState<ContribAction[]>([]);
+  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));
+  }, []);
+
+  const inject = (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();
+    }
+    if (session.isController && session.sendInput(command)) {
+      setNote(`Injected "${command}" into the attached session — the agent runs it.`);
+    } else {
+      setComposer(command); // prefill the session composer; attach (drive) or start one, then Send
+      setNote(`Ready to inject "${command}". Attach to a session (drive) or start one, then Send.`);
+    }
+    goSessions(); // actions target the sessions surface
+  };
+  const copyCommand = async (a: ContribAction) => {
+    await navigator.clipboard?.writeText(a.inject.command);
+    setNote(`Copied "${a.inject.command}" to the clipboard.`);
+  };
+
+  return (
+    <>
+      <p className="hint">
+        Actions are <strong>contributed declaratively</strong>. Clicking one <strong>injects a command into an agentic session</strong>
+        {' '}(focused, else it offers a new one); the agent runs it. The Cockpit never runs the CLI — agents do.
+      </p>
+      {err && <p className="err">{err}</p>}
+      <div className="controls" role="group" aria-label="Contributed actions">
+        {actions.length
+          ? actions.map((a) => (
+            <span className="action-cluster" key={a.id}>
+              <button className="act" title={`injects: ${a.inject.command}`} onClick={() => inject(a)}>
+                {a.icon ? a.icon + ' ' : ''}{a.title}
+              </button>
+              <button className="copy-command" aria-label={`Copy CLI command for ${a.title}`} title={a.inject.command} onClick={() => copyCommand(a)}>
+                Copy CLI
+              </button>
+            </span>
+          ))
+          : <p className="empty">No contributed actions.</p>}
+      </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/Approvals.tsx

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api } from '../api';
+import { fmtId } from '../util';
+import type { Approval, ResponseNeeded } from '../types';
+
+export function Approvals({ responses = [], goSessions }: { responses?: ResponseNeeded[]; goSessions?: () => void }) {
+  const [items, setItems] = useState<Approval[] | null>(null);
+  const [err, setErr] = useState('');
+
+  const load = useCallback(() => {
+    api<{ approvals: Approval[] }>('/api/approvals?status=pending')
+      .then((d) => { setItems(d.approvals); setErr(''); }).catch((e) => setErr((e as Error).message));
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  const decide = (id: string, decision: 'approve' | 'deny') =>
+    api(`/api/approvals/${encodeURIComponent(id)}?decision=${decision}`, { method: 'POST' })
+      .then(load).catch((e) => alert((e as Error).message));
+
+  return (
+    <>
+      <p className="hint">Unified response-needed inbox — formal <code>hitl-prompt/v1</code> approvals, provider prompts, and agent sessions waiting for human input.</p>
+      {err && <p className="err">{err}</p>}
+      {responses.length > 0 && (
+        <section className="response-needed" aria-label="Sessions waiting for response">
+          <h2>Response Needed</h2>
+          {responses.map((r) => (
+            <article key={r.id} className="response-item">
+              <div>
+                <strong>{r.source === 'pty' ? 'Interactive session prompt' : r.source}</strong>
+                <p>{r.prompt}</p>
+                <span><code>{fmtId(r.instance_id)}</code> · {r.status}</span>
+              </div>
+              {goSessions && <button onClick={goSessions}>Open Session</button>}
+            </article>
+          ))}
+        </section>
+      )}
+      {!items ? <p className="empty">Loading…</p>
+        : !items.length && !responses.length ? <p className="empty">No pending approvals or responses.</p>
+          : items.length ? (
+            <table>
+              <caption>{items.length} approval request(s) 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>
+                {items.map((p) => (
+                  <tr key={p.id}>
+                    <td>{p.prompt}</td>
+                    <td><span className={`badge ${p.risk === 'high' ? 'high' : ''}`}>{p.risk}</span></td>
+                    <td><code title={p.instance_id}>{fmtId(p.instance_id)}</code></td>
+                    <td style={{ whiteSpace: 'nowrap' }}>
+                      <button onClick={() => decide(p.id, 'approve')}>Approve</button>{' '}
+                      <button onClick={() => decide(p.id, 'deny')}>Deny</button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          ) : null}
+    </>
+  );
+}

package/web/src/components/CapabilitySearch.tsx

@@ -0,0 +1,73 @@
+import { useEffect, useRef, useState } from 'react';
+import { api } from '../api';
+import { useDebounced } from '../useDebounce';
+import type { CapabilityResult } from '../types';
+
+const TYPES = ['all', 'skill', 'agent', 'command', 'rule', 'flow'];
+
+// Tenor-style capability search — modeled on fortemi-react's SearchBar + SearchResults
+// (debounced input, Ctrl/⌘-K focus, card grid with rank + snippet + trigger tags),
+// wired to the AIWG registry via the Bridge (read-only catalog data; never execution).
+export function CapabilitySearch({ onPick, autoFocus, compact }: {
+  onPick: (c: CapabilityResult) => void;
+  autoFocus?: boolean;
+  compact?: boolean;
+}) {
+  const [q, setQ] = useState('');
+  const [type, setType] = useState('all');
+  const [results, setResults] = useState<CapabilityResult[] | null>(null);
+  const [err, setErr] = useState('');
+  const debounced = useDebounced(q, 300);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => { if (autoFocus) inputRef.current?.focus(); }, [autoFocus]);
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') { e.preventDefault(); inputRef.current?.focus(); }
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, []);
+  useEffect(() => {
+    const term = debounced.trim();
+    if (!term) { setResults(null); return; }
+    let live = true;
+    api<{ results: CapabilityResult[] }>(`/api/capabilities?q=${encodeURIComponent(term)}&type=${encodeURIComponent(type)}&limit=12`)
+      .then((d) => { if (live) { setResults(d.results); setErr(''); } })
+      .catch((e) => { if (live) setErr((e as Error).message); });
+    return () => { live = false; };
+  }, [debounced, type]);
+
+  return (
+    <div>
+      <div className="controls">
+        <input ref={inputRef} type="search" value={q} onChange={(e) => setQ(e.target.value)}
+          placeholder="Search capabilities…  (Ctrl/⌘-K)" aria-label="Search capabilities" style={{ minWidth: compact ? 220 : 300 }} />
+        <select value={type} onChange={(e) => setType(e.target.value)} aria-label="Capability type filter">
+          {TYPES.map((t) => <option key={t} value={t}>{t}</option>)}
+        </select>
+      </div>
+      {err && <p className="err">{err}</p>}
+      {results === null
+        ? <p className="hint">Type to search skills, agents, commands, rules, flows.</p>
+        : !results.length
+          ? <p className="empty">No matches.</p>
+          : (
+            <div className="capgrid" role="listbox" aria-label="Capability results">
+              {results.map((r) => (
+                <button key={r.path} className="capcard" role="option" aria-selected={false} onClick={() => onPick(r)}>
+                  <div className="capcard-head">
+                    <span className="badge">{r.type}</span> <strong>{r.name}</strong>
+                    <span className="capcard-score">{(r.score ?? 0).toFixed(2)}</span>
+                  </div>
+                  <div className="capcard-cap">{(r.capability || r.title || '').slice(0, 110)}</div>
+                  {r.triggers?.length
+                    ? <div className="capcard-tags">{r.triggers.slice(0, 3).map((t) => <span key={t} className="tag">{t}</span>)}</div>
+                    : null}
+                </button>
+              ))}
+            </div>
+          )}
+    </div>
+  );
+}

package/web/src/components/Explore.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { api } from '../api';
+import { CapabilitySearch } from './CapabilitySearch';
+import type { CapabilityResult } from '../types';
+
+export function Explore() {
+  const [body, setBody] = useState<{ type: string; name: string; body: string } | null>(null);
+  const [err, setErr] = useState('');
+
+  const show = (r: CapabilityResult) => {
+    setBody(null); setErr('');
+    // Fetch by the discovered path — deterministic even when a name is shared by two
+    // artifacts (e.g. two `aiwg-steward` agents), which would otherwise 502 (#1643).
+    const qs = `type=${encodeURIComponent(r.type)}&name=${encodeURIComponent(r.name)}&path=${encodeURIComponent(r.path)}`;
+    api<{ type: string; name: string; body: string }>(`/api/show?${qs}`)
+      .then(setBody).catch((e) => setErr((e as Error).message));
+  };
+
+  return (
+    <>
+      <p className="hint">
+        Read-only catalog from the AIWG registry — display, not execution. To <em>run</em> a capability, inject it into a
+        session (Actions/Sessions). Search modeled on the fortemi-react patterns.
+      </p>
+      {err && <p className="err">{err}</p>}
+      <div className="grid2">
+        <CapabilitySearch onPick={show} autoFocus />
+        <div role="region" aria-label="Capability detail">
+          {!body
+            ? <p className="empty">Select a capability to inspect its definition.</p>
+            : (
+              <>
+                <div style={{ marginBottom: 8 }}><span className="badge">{body.type}</span> <strong>{body.name}</strong></div>
+                <div className="terminal" style={{ maxHeight: '52vh' }}>{body.body}</div>
+              </>
+            )}
+        </div>
+      </div>
+    </>
+  );
+}

package/web/src/components/Inventory.tsx

@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api } from '../api';
+import { fmtId } from '../util';
+import type { Instance } from '../types';
+
+interface Inv { count: number; fetched_at: string; instances: Instance[] }
+
+export function Inventory({ onStartSession, onLaunchInstance }: { onStartSession?: (instanceId?: string) => void; onLaunchInstance?: () => void }) {
+  const [data, setData] = useState<Inv | null>(null);
+  const [err, setErr] = useState('');
+  const [actionErr, setActionErr] = useState('');
+
+  const load = useCallback(() => {
+    api<Inv>('/api/inventory').then((d) => { setData(d); setErr(''); }).catch((e) => setErr((e as Error).message));
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  const control = (path: string, method: string) =>
+    api(path, { method }).then(() => { setActionErr(''); load(); }).catch((e) => setActionErr((e as Error).message));
+
+  if (err) return <p className="err">Could not load inventory: {err}</p>;
+  if (!data) return <p className="empty">Loading…</p>;
+  if (!data.instances.length) {
+    return (
+      <section className="empty-state">
+        <h2>No instances</h2>
+        <p className="hint">Bridge is connected, but no host, Docker, or VM targets are registered.</p>
+        {onLaunchInstance && <button className="cta" onClick={onLaunchInstance}>＋ New instance + session</button>}
+      </section>
+    );
+  }
+
+  return (
+    <>
+      <div className="section-toolbar">
+        <div>
+          <h2>Agent instances</h2>
+          <p className="hint">{data.count} target(s) · {new Date(data.fetched_at).toLocaleTimeString()}</p>
+        </div>
+        {onLaunchInstance && <button className="cta" onClick={onLaunchInstance}>＋ New instance + session</button>}
+      </div>
+      {actionErr && <p className="err">Action failed: {actionErr}</p>}
+      <table>
+        <caption>Available instance deployments</caption>
+        <thead>
+          <tr>
+            <th scope="col">Instance</th><th scope="col">Runtime</th><th scope="col">Loadout</th>
+            <th scope="col">Transport</th><th scope="col">Host daemon</th><th scope="col">State</th><th scope="col">Tenant</th><th scope="col">Manage</th>
+          </tr>
+        </thead>
+        <tbody>
+          {data.instances.map((i) => (
+            <tr key={i.id}>
+              {/*
+                Runtime state and session readiness are separate: Docker can be
+                running while the embedded agent is still failing registration.
+              */}
+              {(() => {
+                const sessionReady = i.session_backends?.some((b) => b.available);
+                const unavailableReason = i.session_backends?.find((b) => !b.available)?.reason;
+                return (
+            <>
+              <td>
+                <code title={i.id}>{i.launch_context?.name ?? fmtId(i.id)}</code>
+                {i.launch_context?.name && <div className="cell-note">{fmtId(i.id)}</div>}
+              </td>
+              <td>
+                <span className={`badge isolation-${i.runtime_posture.isolation}`} title={i.runtime_posture.warning || i.runtime_posture.label}>
+                  {i.runtime_posture.label}
+                </span>
+                {i.runtime_posture.warning && <div className="cell-note">{i.runtime_posture.warning}</div>}
+              </td>
+              <td>
+                {i.loadout}
+                {i.launch_context?.image_ref && <div className="cell-note">{i.launch_context.image_ref}</div>}
+                {i.launch_context?.source && <div className="cell-note">{i.launch_context.source}</div>}
+              </td>
+              <td>
+                <span className={`badge trust-${i.transport.trust}`} title={`${i.transport.source}${i.transport.evidence ? `: ${i.transport.evidence}` : ''}`}>
+                  {i.transport.label}
+                </span>
+                <div className="cell-note">{i.transport.mode}{i.transport.stale ? ' · stale' : ''}</div>
+              </td>
+              <td>
+                <span className={`badge daemon-${i.host_daemon.status}`}>{i.host_daemon.status.replace('_', ' ')}</span>
+                {i.host_daemon.detail && <div className="cell-note">{i.host_daemon.detail}</div>}
+                {i.host_daemon.operator_command && <code title="Operator start command">{i.host_daemon.operator_command}</code>}
+              </td>
+              <td><span className={`state ${i.state}`}><span className="dot" aria-hidden="true" />{i.state}</span></td>
+              <td>{i.tenant}</td>
+              <td className="manage-actions">
+                {i.state === 'running' && onStartSession && (
+                  <button
+                    className="cta"
+                    aria-label={`Start session on ${fmtId(i.id)}`}
+                    disabled={!sessionReady}
+                    title={!sessionReady ? unavailableReason : undefined}
+                    onClick={() => onStartSession(i.id)}
+                  >
+                    New Session
+                  </button>
+                )}{' '}
+                {i.state === 'running'
+                  ? <button aria-label={`Stop instance ${fmtId(i.id)}`} onClick={() => control(`/api/instances/${encodeURIComponent(i.id)}/stop`, 'POST')}>Stop Instance</button>
+                  : <button aria-label={`Start instance ${fmtId(i.id)}`} onClick={() => control(`/api/instances/${encodeURIComponent(i.id)}/start`, 'POST')}>Start Instance</button>}{' '}
+                <button
+                  aria-label={`Destroy instance ${fmtId(i.id)}`}
+                  disabled={i.state !== 'running' && i.runtime === 'docker'}
+                  title={i.state !== 'running' && i.runtime === 'docker' ? 'Sandbox reports this stopped Docker row but admin-v2 no longer has a destroyable instance record.' : undefined}
+                  onClick={() => { if (confirm(`Destroy ${fmtId(i.id)}? This cannot be undone.`)) control(`/api/instances/${encodeURIComponent(i.id)}`, 'DELETE'); }}
+                >
+                  Destroy
+                </button>
+              </td>
+            </>
+                );
+              })()}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}

package/web/src/components/LaunchInstanceModal.test.tsx

@@ -0,0 +1,97 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, waitFor, fireEvent } from '@testing-library/react';
+import { LaunchInstanceModal } from './LaunchInstanceModal';
+
+const HOST_INSTANCE = {
+  id: 'host-aaaaaaaa-1111',
+  runtime: 'host',
+  loadout: 'host-tools',
+  state: 'running',
+  tenant: 'default',
+  card_url: '',
+  runtime_posture: { kind: 'host', isolation: 'least', label: 'host' },
+  host_daemon: { status: 'available' },
+  transport: { mode: 'mtls', trust: 'secure', label: 'mTLS', source: 'test' },
+  launch_context: { name: 'local-host', loadout: 'host-tools' },
+  session_backends: [{ mode: 'managed', backend: 'tmux', available: true, drive: true }],
+};
+
+const LOADOUTS = [
+  { id: 'host-tools', label: 'host-tools', description: 'Host tools', runtimes: ['host'] },
+  { id: 'full-suite', label: 'full-suite', description: 'All providers', runtimes: ['docker', 'container', 'qemu', 'vm'] },
+  { id: 'agentic-dev', label: 'agentic-dev', description: 'Developer tools', runtimes: ['docker', 'container'] },
+];
+
+function mockFetch() {
+  return vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = String(input);
+    const ok = (body: unknown) => new Response(JSON.stringify(body), { status: 200, headers: { 'content-type': 'application/json' } });
+    if (url.includes('/api/loadouts')) return ok({ loadouts: LOADOUTS });
+    if (url.includes('/api/inventory')) return ok({ instances: [HOST_INSTANCE] });
+    if (url.includes('/api/instances') && init?.method === 'POST') return ok({ instance_id: 'docker-1' });
+    return new Response('{}', { status: 404 });
+  }) as unknown as typeof fetch;
+}
+
+beforeEach(() => { (window as unknown as { __COCKPIT_TOKEN__: string }).__COCKPIT_TOKEN__ = 't'; });
+afterEach(() => { cleanup(); vi.restoreAllMocks(); });
+
+describe('LaunchInstanceModal', () => {
+  it('uses an existing host target instead of provisioning unsupported host instances', async () => {
+    globalThis.fetch = mockFetch();
+    const onLaunched = vi.fn();
+    const onClose = vi.fn();
+    render(<LaunchInstanceModal open onClose={onClose} onLaunched={onLaunched} />);
+
+    expect(await screen.findByRole('dialog', { name: /new instance/i })).toBeTruthy();
+    expect(await screen.findByRole('option', { name: /local-host - host-tools/i })).toBeTruthy();
+    expect(screen.getByText('host-tools')).toBeTruthy();
+    expect(screen.queryByRole('option', { name: /full-suite/i })).toBeNull();
+
+    fireEvent.click(screen.getByRole('button', { name: /start host session/i }));
+    await waitFor(() => expect(onLaunched).toHaveBeenCalledWith('host-aaaaaaaa-1111', true));
+    const postCall = (globalThis.fetch as unknown as ReturnType<typeof vi.fn>).mock.calls
+      .find((call) => String(call[0]).includes('/api/instances') && call[1]?.method === 'POST');
+    expect(postCall).toBeUndefined();
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('keeps Docker on the real provisioning path with Docker loadouts and images', async () => {
+    globalThis.fetch = mockFetch();
+    const onLaunched = vi.fn();
+    render(<LaunchInstanceModal open onClose={() => {}} onLaunched={onLaunched} />);
+
+    fireEvent.change(await screen.findByLabelText('Runtime'), { target: { value: 'docker' } });
+    expect(await screen.findByRole('option', { name: /agentic-dev/i })).toBeTruthy();
+    expect(screen.getByRole('option', { name: /Codex - agentic\/codex:latest/i })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole('button', { name: /create \+ start session/i }));
+    await waitFor(() => expect(onLaunched).toHaveBeenCalledWith('docker-1', true, undefined));
+    const postCall = (globalThis.fetch as unknown as ReturnType<typeof vi.fn>).mock.calls
+      .find((call) => String(call[0]).includes('/api/instances') && call[1]?.method === 'POST');
+    expect(JSON.parse(String(postCall?.[1]?.body))).toMatchObject({
+      runtime: 'docker',
+      loadout: 'agentic-dev',
+      image: 'agentic/codex:latest',
+      agentshare: true,
+    });
+  });
+
+  it('passes a VM SSH public key path when launching QEMU', async () => {
+    globalThis.fetch = mockFetch();
+    const onLaunched = vi.fn();
+    render(<LaunchInstanceModal open onClose={() => {}} onLaunched={onLaunched} />);
+
+    fireEvent.change(await screen.findByLabelText('Runtime'), { target: { value: 'qemu' } });
+    fireEvent.change(await screen.findByLabelText('SSH public key'), { target: { value: '~/.ssh/agentic_ed25519.pub' } });
+    fireEvent.click(screen.getByRole('button', { name: /create \+ start session/i }));
+
+    await waitFor(() => expect(onLaunched).toHaveBeenCalledWith('docker-1', true, undefined));
+    const postCall = (globalThis.fetch as unknown as ReturnType<typeof vi.fn>).mock.calls
+      .find((call) => String(call[0]).includes('/api/instances') && call[1]?.method === 'POST');
+    expect(JSON.parse(String(postCall?.[1]?.body))).toMatchObject({
+      runtime: 'qemu',
+      ssh_key: '~/.ssh/agentic_ed25519.pub',
+    });
+  });
+});