@aiwg/cockpit 2026.6.3

package/web/src/components/LaunchInstanceModal.tsx

@@ -0,0 +1,236 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api';
+import { fmtId } from '../util';
+import type { Instance, Loadout } from '../types';
+
+type Runtime = 'host' | 'docker' | 'qemu';
+
+const DOCKER_IMAGE_OPTIONS = [
+  { value: 'agentic/codex:latest', label: 'Codex' },
+  { value: 'agentic/claude:latest', label: 'Claude' },
+  { value: 'agentic/opencode:latest', label: 'OpenCode' },
+  { value: 'agentic/automation-control:latest', label: 'Automation control' },
+  { value: 'agentic/agent:dev', label: 'Agent dev base' },
+];
+
+const FALLBACK_LOADOUTS: Loadout[] = [
+  { id: 'host-tools', label: 'host-tools', description: 'Host tools', runtimes: ['host'] },
+  { id: 'agentic-dev', label: 'agentic-dev', description: 'Full development environment', runtimes: ['docker', 'container', 'qemu', 'vm'] },
+  { id: 'claude-only', label: 'claude-only', description: 'Claude provider loadout', runtimes: ['docker', 'container', 'qemu', 'vm'] },
+  { id: 'codex-only', label: 'codex-only', description: 'Codex provider loadout', runtimes: ['docker', 'container', 'qemu', 'vm'] },
+  { id: 'opencode-only', label: 'opencode-only', description: 'OpenCode provider loadout', runtimes: ['docker', 'container', 'qemu', 'vm'] },
+  { id: 'full-suite', label: 'full-suite', description: 'Multi-provider tool suite', runtimes: ['qemu', 'vm'] },
+];
+
+export function LaunchInstanceModal({
+  open,
+  onClose,
+  onLaunched,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onLaunched: (instanceId?: string, openSession?: boolean, operationId?: string) => Promise<void> | void;
+}) {
+  const [runtime, setRuntime] = useState<Runtime>('host');
+  const [name, setName] = useState(() => `cockpit-${Date.now().toString(36)}`.slice(0, 32));
+  const [loadout, setLoadout] = useState('host-tools');
+  const [loadouts, setLoadouts] = useState<Loadout[]>([]);
+  const [instances, setInstances] = useState<Instance[]>([]);
+  const [hostId, setHostId] = useState('');
+  const [image, setImage] = useState('agentic/codex:latest');
+  const [customImage, setCustomImage] = useState('');
+  const [profile, setProfile] = useState('');
+  const [sshKey, setSshKey] = useState('');
+  const [mounts, setMounts] = useState('');
+  const [openSession, setOpenSession] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState('');
+  const [result, setResult] = useState('');
+
+  useEffect(() => {
+    if (!open) return;
+    let cancelled = false;
+    Promise.all([
+      api<{ loadouts: Loadout[] }>('/api/loadouts').catch(() => ({ loadouts: [] as Loadout[] })),
+      api<{ instances: Instance[] }>('/api/inventory').catch(() => ({ instances: [] as Instance[] })),
+    ])
+      .then(([lo, inv]) => {
+        if (cancelled) return;
+        setLoadouts(lo.loadouts ?? []);
+        setInstances(inv.instances ?? []);
+        const firstHost = (inv.instances ?? []).find(isUsableHost);
+        setHostId((current) => current || firstHost?.id || '');
+      });
+    return () => { cancelled = true; };
+  }, [open]);
+
+  if (!open) return null;
+
+  const chooseRuntime = (next: Runtime) => {
+    setRuntime(next);
+    if (next === 'host') {
+      setLoadout('host-tools');
+    } else if (next === 'docker') {
+      setLoadout('agentic-dev');
+      setImage((current) => current || 'agentic/codex:latest');
+    } else {
+      setLoadout('profiles/basic.yaml');
+    }
+  };
+
+  const launch = async () => {
+    setBusy(true); setErr(''); setResult('');
+    try {
+      if (runtime === 'host') {
+        const host = hostTargets(instances).find((i) => i.id === hostId) ?? hostTargets(instances)[0];
+        if (!host) throw new Error('No registered host target is available. Start/register the host agent first, or choose Docker container.');
+        setResult(openSession
+          ? `Using host target ${host.launch_context?.name ?? fmtId(host.id)}; starting session...`
+          : `Using host target ${host.launch_context?.name ?? fmtId(host.id)}`);
+        await onLaunched(host.id, openSession);
+        if (openSession) onClose();
+        return;
+      }
+      const body: Record<string, unknown> = {
+        name: name.replace(/[^a-z0-9-]/g, '-').replace(/^-+/, 'a-').slice(0, 63),
+        runtime,
+        start: true,
+      };
+      if (loadout) body.loadout = loadout;
+      if (profile) body.profile = profile;
+      if (runtime === 'docker') {
+        body.image = image === '__custom__' ? customImage.trim() : image;
+        body.agentshare = true;
+      }
+      if (runtime === 'qemu' && sshKey.trim()) body.ssh_key = sshKey.trim();
+      if (runtime === 'docker' && mounts.trim()) body.mounts = mounts.split('\n').map((m) => m.trim()).filter(Boolean);
+      const op = await api<{ id?: string; instance_id?: string; instanceId?: string; operation?: { id?: string }; result?: { instance_id?: string; instanceId?: string } }>('/api/instances', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      const instanceId = op.instance_id ?? op.instanceId ?? op.result?.instance_id ?? op.result?.instanceId;
+      const operationId = op.id ?? op.operation?.id;
+      setResult(openSession
+        ? `Launch accepted: ${instanceId ?? operationId ?? 'operation pending'}; waiting for session...`
+        : `Launch accepted: ${instanceId ?? operationId ?? 'operation pending'}`);
+      await onLaunched(instanceId, openSession, operationId);
+      if (openSession) onClose();
+    } catch (e) {
+      setErr((e as Error).message);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="modal-backdrop" role="presentation" onClick={onClose}>
+      <div className="modal" role="dialog" aria-modal="true" aria-labelledby="launch-instance-title" onClick={(e) => e.stopPropagation()}>
+        <h2 id="launch-instance-title">New instance</h2>
+        <p className="hint">Create a runtime target. Existing instances and sessions keep running.</p>
+        {err && <p className="err">{err}</p>}
+        {result && <p className="hint ok-text">{result}</p>}
+        <div className="form-grid">
+          <label htmlFor="li-runtime">Runtime</label>
+          <select id="li-runtime" value={runtime} onChange={(e) => chooseRuntime(e.target.value as Runtime)}>
+            <option value="host">Host</option>
+            <option value="docker">Docker container</option>
+            <option value="qemu">VM / QEMU</option>
+          </select>
+          {runtime === 'host' ? (
+            <>
+              <label htmlFor="li-host-target">Host target</label>
+              <select id="li-host-target" value={hostId} onChange={(e) => setHostId(e.target.value)}>
+                {hostTargets(instances).map((i) => <option key={i.id} value={i.id}>{i.launch_context?.name ?? fmtId(i.id)} - {i.loadout}</option>)}
+                {!hostTargets(instances).length && <option value="">No registered host available</option>}
+              </select>
+            </>
+          ) : (
+            <>
+              <label htmlFor="li-name">Name</label>
+              <input id="li-name" value={name} onChange={(e) => setName(e.target.value)} />
+            </>
+          )}
+          <label htmlFor="li-loadout">Instance loadout</label>
+          {runtime === 'host' ? (
+            <span className="ro">host-tools</span>
+          ) : (
+            <select id="li-loadout" value={loadout} onChange={(e) => setLoadout(e.target.value)}>
+              {loadoutOptions(loadouts, runtime).map((l) => <option key={l.id} value={l.id}>{l.label}{l.description ? ` - ${l.description}` : ''}</option>)}
+            </select>
+          )}
+          {runtime !== 'host' && (
+            <>
+              <label htmlFor="li-profile">Profile</label>
+              <input id="li-profile" value={profile} onChange={(e) => setProfile(e.target.value)} placeholder="optional" />
+            </>
+          )}
+          {runtime === 'qemu' && (
+            <>
+              <label htmlFor="li-ssh-key">SSH public key</label>
+              <input
+                id="li-ssh-key"
+                value={sshKey}
+                onChange={(e) => setSshKey(e.target.value)}
+                placeholder="auto-detect, or ~/.ssh/agentic_ed25519.pub"
+              />
+            </>
+          )}
+          {runtime === 'docker' && (
+            <>
+              <label htmlFor="li-image">Container image</label>
+              <div className="field-stack">
+                <select id="li-image" value={image} onChange={(e) => setImage(e.target.value)}>
+                  {DOCKER_IMAGE_OPTIONS.map((option) => <option key={option.value} value={option.value}>{option.label} - {option.value}</option>)}
+                  <option value="__custom__">Custom image...</option>
+                </select>
+                {image === '__custom__' && (
+                  <input
+                    aria-label="Custom container image"
+                    value={customImage}
+                    onChange={(e) => setCustomImage(e.target.value)}
+                    placeholder="registry.example.com/team/agent:tag"
+                  />
+                )}
+              </div>
+              <label htmlFor="li-mounts">Mounts</label>
+              <textarea id="li-mounts" value={mounts} onChange={(e) => setMounts(e.target.value)} placeholder="/host/path:/container/path" />
+            </>
+          )}
+          <label htmlFor="li-open-session">After launch</label>
+          <label className="check-row">
+            <input id="li-open-session" type="checkbox" checked={openSession} onChange={(e) => setOpenSession(e.target.checked)} />
+            Start a session automatically when the instance is ready
+          </label>
+        </div>
+        <div className="modal-actions">
+          <button onClick={onClose} disabled={busy}>Close</button>
+          <button className="cta" onClick={launch} disabled={busy || (runtime === 'host' && !hostId) || (runtime !== 'host' && !name.trim()) || (runtime === 'docker' && image === '__custom__' && !customImage.trim())}>
+            {busy ? 'Working...' : runtime === 'host' ? (openSession ? 'Start host session' : 'Use host') : openSession ? 'Create + start session' : 'Create instance'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function loadoutOptions(loadouts: Loadout[], runtime: Runtime) {
+  if (runtime === 'host') return FALLBACK_LOADOUTS.filter((l) => l.id === 'host-tools');
+  const aliases = runtime === 'docker' ? ['docker', 'container'] : runtime === 'qemu' ? ['qemu', 'vm'] : [runtime];
+  const merged = [...loadouts, ...FALLBACK_LOADOUTS].reduce<Loadout[]>((acc, loadout) => {
+    if (!acc.some((existing) => existing.id === loadout.id)) acc.push(loadout);
+    return acc;
+  }, []);
+  const matching = merged.filter((l) => !l.runtimes?.length || l.runtimes.some((r) => aliases.includes(String(r).toLowerCase())));
+  return matching.length ? matching : merged;
+}
+
+function hostTargets(instances: Instance[]) {
+  return instances.filter(isUsableHost);
+}
+
+function isUsableHost(instance: Instance) {
+  return instance.state === 'running'
+    && instance.runtime_posture?.kind === 'host'
+    && instance.session_backends?.some((backend) => backend.available !== false);
+}

package/web/src/components/Library.tsx

@@ -0,0 +1,76 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api } from '../api';
+import { capRef } from '../util';
+import { CapabilitySearch } from './CapabilitySearch';
+import type { LibraryAsset, CapabilityResult } from '../types';
+import type { SessionApi } from '../useSession';
+
+// The user's OWN asset library — copy/clone/import. AIWG install files are never
+// written. Deploying/using an asset is an agent action (Use → inject into a session).
+export function Library({ session, setComposer, goSessions }: { session: SessionApi; setComposer: (v: string) => void; goSessions: () => void }) {
+  const [items, setItems] = useState<LibraryAsset[] | null>(null);
+  const [cloning, setCloning] = useState(false);
+  const [err, setErr] = useState('');
+
+  const load = useCallback(() => {
+    api<{ library: LibraryAsset[] }>('/api/library').then((d) => { setItems(d.library); setErr(''); }).catch((e) => setErr((e as Error).message));
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  const clone = async (r: CapabilityResult) => {
+    try {
+      await api(`/api/library/clone?type=${encodeURIComponent(r.type)}&name=${encodeURIComponent(r.name)}&path=${encodeURIComponent(r.path)}`, { method: 'POST' });
+      setCloning(false); load();
+    } catch (e) { setErr((e as Error).message); }
+  };
+  const remove = (a: LibraryAsset) => {
+    if (!confirm(`Remove "${a.name}" from your library? (Your copy only — AIWG is untouched.)`)) return;
+    api(`/api/library/${encodeURIComponent(a.name)}`, { method: 'DELETE' }).then(load).catch((e) => alert((e as Error).message));
+  };
+  const use = (a: LibraryAsset) => {
+    const cmd = capRef(a.type, a.name.replace(/\.(md|markdown|ya?ml|json)$/i, ''));
+    if (!(session.isController && session.sendInput(cmd))) setComposer(cmd);
+    goSessions();
+  };
+
+  return (
+    <>
+      <p className="hint">
+        Your <strong>own</strong> assets — copied, cloned, or imported. Edit them freely; <strong>AIWG install files are never
+        touched</strong>. Stored on disk under <code>~/.aiwg/cockpit/library</code>. Deploying one into a project is an agent
+        action (Use → inject into a session).
+      </p>
+      {err && <p className="err">{err}</p>}
+      <div className="controls">
+        <button onClick={() => setCloning((v) => !v)}>{cloning ? 'Close' : '+ Clone from catalog'}</button>
+      </div>
+      {cloning && (
+        <div className="picker">
+          <p className="hint" style={{ marginTop: 0 }}>Search the AIWG catalog and clone a copy into your library.</p>
+          <CapabilitySearch compact autoFocus onPick={clone} />
+        </div>
+      )}
+      {!items ? <p className="empty">Loading…</p>
+        : !items.length ? <p className="empty">Your library is empty. Clone a capability from the catalog to get a copy you can modify.</p>
+          : (
+            <table>
+              <caption>{items.length} asset(s) in your library</caption>
+              <thead><tr><th scope="col">Name</th><th scope="col">Type</th><th scope="col">Origin</th><th scope="col">Actions</th></tr></thead>
+              <tbody>
+                {items.map((a) => (
+                  <tr key={a.name}>
+                    <td><strong>{a.name}</strong></td>
+                    <td><span className="badge">{a.type}</span></td>
+                    <td>{a.origin}</td>
+                    <td style={{ whiteSpace: 'nowrap' }}>
+                      <button onClick={() => use(a)}>Use</button>{' '}
+                      <button onClick={() => remove(a)} aria-label={`Remove ${a.name}`}>Remove</button>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+    </>
+  );
+}

package/web/src/components/Running.tsx

@@ -0,0 +1,60 @@
+import { useCallback, useEffect, useState } from 'react';
+import { api } from '../api';
+import { fmtId } from '../util';
+import type { RunningTask, Cost } from '../types';
+
+interface Run { count: number; running: RunningTask[] }
+
+export function Running() {
+  const [run, setRun] = useState<Run | null>(null);
+  const [cost, setCost] = useState<Cost | null>(null);
+  const [err, setErr] = useState('');
+
+  const load = useCallback(() => {
+    api<Run>('/api/running').then((d) => { setRun(d); setErr(''); }).catch((e) => setErr((e as Error).message));
+    api<Cost>('/api/cost').then(setCost).catch(() => setCost(null));
+  }, []);
+  useEffect(() => { load(); }, [load]);
+
+  const stop = (t: RunningTask) =>
+    api(`/api/tasks/${encodeURIComponent(t.instance_id)}/${encodeURIComponent(t.task_id)}/cancel`, { method: 'POST' })
+      .then(load).catch((e) => alert((e as Error).message));
+
+  if (err) return <p className="err">Could not load running: {err}</p>;
+  if (!run) return <p className="empty">Loading…</p>;
+
+  return (
+    <>
+      <p className="hint">
+        <strong>Fleet overview.</strong> Every task running across all stacks — a read-only board. To
+        attach to one and observe or drive it, open it in <strong>Sessions</strong> (the attached workspace).
+      </p>
+      {cost && (
+        <p className="hint">Spend across stacks: <strong>${cost.total.usd.toFixed(2)}</strong> · {(cost.total.input_tokens + cost.total.output_tokens).toLocaleString()} tokens</p>
+      )}
+      {!run.running.length
+        ? <p className="empty">Nothing running yet — use “Start a session” (top right or Home) to put an agent to work.</p>
+        : (
+          <table>
+            <caption>Running across all stacks — {run.count} task(s)</caption>
+            <thead>
+              <tr><th scope="col">Instance</th><th scope="col">Runtime</th><th scope="col">Transport</th><th scope="col">Task</th><th scope="col">State</th><th scope="col">Tenant</th><th scope="col">Control</th></tr>
+            </thead>
+            <tbody>
+              {run.running.map((t) => (
+                <tr key={t.task_id}>
+                  <td><code title={t.instance_id}>{fmtId(t.instance_id)}</code></td>
+                  <td>{t.runtime_posture ? <span className={`badge isolation-${t.runtime_posture.isolation}`} title={t.runtime_posture.warning || t.runtime_posture.label}>{t.runtime_posture.label}</span> : <span className="badge">unknown</span>}</td>
+                  <td>{t.transport ? <span className={`badge trust-${t.transport.trust}`}>{t.transport.label}</span> : <span className="badge">unknown</span>}</td>
+                  <td><code title={t.task_id}>{fmtId(t.task_id)}</code></td>
+                  <td><span className={`state ${t.state}`}><span className="dot" aria-hidden="true" />{t.state}</span></td>
+                  <td>{t.tenant}</td>
+                  <td><button aria-label={`Stop task ${fmtId(t.task_id)}`} onClick={() => stop(t)}>Stop</button></td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+    </>
+  );
+}

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

@@ -0,0 +1,125 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, waitFor, fireEvent, cleanup } from '@testing-library/react';
+import { Sessions } from './Sessions';
+import type { SessionApi } from '../useSession';
+
+const INSTANCE = {
+  id: 'inst-1',
+  runtime: 'docker',
+  loadout: 'agentic-dev',
+  state: 'running',
+  tenant: 'default',
+  card_url: '',
+  runtime_posture: { kind: 'docker', isolation: 'shared-kernel', label: 'Container' },
+  host_daemon: { status: 'available' },
+  transport: { mode: 'mtls-agent-registration', trust: 'secure', label: 'Secure transport', source: 'test' },
+  launch_context: { name: 'docker-one', loadout: 'agentic-dev' },
+  session_backends: [{ mode: 'managed', backend: 'tmux', available: true, drive: true, keyframe: true }],
+};
+const INSTANCE_NEXT = {
+  ...INSTANCE,
+  id: 'inst-2',
+  launch_context: { name: 'docker-two', loadout: 'agentic-dev' },
+};
+
+function stubSession(): SessionApi {
+  return {
+    state: { attached: true, role: 'controller', url: 'ws://x/agents/inst-1/sessions/sess-1/attach' },
+    responseNeeded: { needed: false, prompt: '', since: null, source: 'pty' },
+    attach: vi.fn(),
+    detach: vi.fn(),
+    replay: vi.fn(),
+    requestKeyframe: vi.fn(),
+    sendInput: vi.fn(),
+    openTerminal: vi.fn(),
+    isController: true,
+  } as unknown as SessionApi;
+}
+
+beforeEach(() => {
+  (window as unknown as { __COCKPIT_TOKEN__: string }).__COCKPIT_TOKEN__ = 'test-token';
+  vi.spyOn(window, 'confirm').mockReturnValue(true);
+});
+
+afterEach(() => { cleanup(); vi.restoreAllMocks(); });
+
+describe('Sessions', () => {
+  it('ends the selected session, detaches if attached, and refreshes the list', async () => {
+    const session = stubSession();
+    const fetchMock = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+      const url = String(input);
+      if (url.includes('/api/inventory')) return jsonResponse({ instances: [INSTANCE] });
+      if (url.includes('/api/sessions?instance=')) return jsonResponse({
+        sessions: [{
+          id: 'sess-1',
+          session_name: 'terminal-main',
+          instance_id: 'inst-1',
+          attach_url: 'ws://x/agents/inst-1/sessions/sess-1/attach',
+          session_class: 'managed',
+          session_backend: 'tmux',
+        }],
+      });
+      if (url.includes('/api/instances/inst-1/sessions/sess-1') && init?.method === 'DELETE') return jsonResponse({ ended: true });
+      return new Response('{}', { status: 404 });
+    });
+    globalThis.fetch = fetchMock as unknown as typeof fetch;
+
+    render(<Sessions session={session} composer="" setComposer={() => {}} onRequestStart={() => {}} />);
+
+    const endButton = await screen.findByRole('button', { name: /end session/i });
+    await waitFor(() => expect((endButton as HTMLButtonElement).disabled).toBe(false));
+    fireEvent.click(endButton);
+
+    await waitFor(() => expect(fetchMock).toHaveBeenCalledWith(
+      expect.stringContaining('/api/instances/inst-1/sessions/sess-1'),
+      expect.objectContaining({ method: 'DELETE' }),
+    ));
+    expect(session.detach).toHaveBeenCalled();
+  });
+
+  it('refreshes stale recovered inventory and stops offering dead session attach URLs', async () => {
+    const session = stubSession();
+    const inventories = [
+      { instances: [INSTANCE] },
+      { instances: [INSTANCE_NEXT] },
+    ];
+    const fetchMock = vi.fn(async (input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.includes('/api/inventory')) return jsonResponse(inventories.shift() ?? { instances: [INSTANCE_NEXT] });
+      if (url.includes('instance=inst-1')) return jsonResponse({
+        sessions: [{
+          id: 'sess-old',
+          instance_id: 'inst-1',
+          attach_url: 'ws://x/agents/inst-1/sessions/sess-old/attach',
+          session_class: 'managed',
+          session_backend: 'tmux',
+        }],
+      });
+      if (url.includes('instance=inst-2')) return jsonResponse({
+        sessions: [{
+          id: 'sess-new',
+          instance_id: 'inst-2',
+          attach_url: 'ws://x/agents/inst-2/sessions/sess-new/attach',
+          session_class: 'managed',
+          session_backend: 'tmux',
+        }],
+      });
+      return new Response('{}', { status: 404 });
+    });
+    globalThis.fetch = fetchMock as unknown as typeof fetch;
+
+    render(<Sessions session={session} composer="" setComposer={() => {}} onRequestStart={() => {}} refreshMs={10} />);
+
+    expect(await screen.findByRole('option', { name: /docker-one/i })).toBeTruthy();
+    expect(await screen.findByRole('option', { name: /docker-two/i })).toBeTruthy();
+    expect(screen.queryByRole('option', { name: /docker-one/i })).toBeNull();
+    expect(await screen.findByRole('option', { name: /sess-new/i })).toBeTruthy();
+  });
+});
+
+function jsonResponse(body: unknown): Response {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { 'Content-Type': 'application/json' },
+  });
+}