@aiwg/cockpit 2026.6.3

package/web/src/components/Sessions.tsx

@@ -0,0 +1,189 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { api } from '../api';
+import { fmtId, capRef } from '../util';
+import { CapabilitySearch } from './CapabilitySearch';
+import type { Instance, SessionInfo, CapabilityResult } from '../types';
+import type { SessionApi } from '../useSession';
+
+export function Sessions({ session, composer, setComposer, onRequestStart, refreshMs = 5_000 }: { session: SessionApi; composer: string; setComposer: (v: string) => void; onRequestStart: (instanceId?: string) => void; refreshMs?: number }) {
+  const [instances, setInstances] = useState<Instance[]>([]);
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const [instId, setInstId] = useState('');
+  const [attachUrl, setAttachUrl] = useState('');
+  const [backendKey, setBackendKey] = useState('');
+  const [showPicker, setShowPicker] = useState(false);
+  const [endingSession, setEndingSession] = useState('');
+  const [sessionErr, setSessionErr] = useState('');
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const insertCap = (r: CapabilityResult) => {
+    const sep = composer && !composer.endsWith(' ') ? ' ' : '';
+    setComposer(composer + sep + capRef(r.type, r.name));
+    setShowPicker(false);
+    inputRef.current?.focus();
+  };
+
+  const refreshInventory = useCallback(() => {
+    return api<{ instances: Instance[] }>('/api/inventory')
+      .then((d) => {
+        const sessionable = dedupeInstances(d.instances).filter((i) => i.state === 'running' && i.session_backends?.some((b) => b.available));
+        setInstances(sessionable);
+        setInstId((currentId) => {
+          if (currentId && sessionable.some((i) => i.id === currentId)) return currentId;
+          return sessionable[0]?.id ?? '';
+        });
+        setBackendKey((currentBackend) => {
+          if (currentBackend && sessionable.some((i) => i.session_backends.some((b) => `${b.mode}:${b.backend}` === currentBackend && b.available))) return currentBackend;
+          const firstBackend = sessionable[0]?.session_backends.find((b) => b.available) ?? sessionable[0]?.session_backends[0];
+          return firstBackend ? `${firstBackend.mode}:${firstBackend.backend}` : '';
+        });
+      })
+      .catch(() => {});
+  }, []);
+
+  useEffect(() => {
+    refreshInventory();
+    const timer = window.setInterval(refreshInventory, refreshMs);
+    return () => window.clearInterval(timer);
+  }, [refreshInventory, refreshMs]);
+
+  const loadSessions = useCallback((id: string) => {
+    if (!id) return;
+    api<{ sessions: SessionInfo[] }>(`/api/sessions?instance=${encodeURIComponent(id)}`)
+      .then((d) => {
+        const nextSessions = d.sessions ?? [];
+        setSessions(nextSessions);
+        setAttachUrl((currentUrl) => {
+          if (currentUrl && nextSessions.some((s) => s.attach_url === currentUrl)) return currentUrl;
+          return nextSessions[0]?.attach_url ?? '';
+        });
+      })
+      .catch((e) => { setSessions([]); setAttachUrl(''); setSessionErr((e as Error).message); });
+  }, []);
+  useEffect(() => { loadSessions(instId); }, [instId, loadSessions]);
+
+  const send = () => { if (session.sendInput(composer)) setComposer(''); };
+  const attached = session.state.attached;
+  const requestedReplayRole = session.state.role === 'controller' ? 'controller' : 'observer';
+  const current = instances.find((i) => i.id === instId);
+  const backends = current?.session_backends ?? [];
+  const selectedBackend = backends.find((b) => `${b.mode}:${b.backend}` === backendKey) ?? backends.find((b) => b.available) ?? backends[0];
+  const selectedSession = sessions.find((s) => s.attach_url === attachUrl);
+  useEffect(() => {
+    if (!session.state.url) return;
+    const sessionStillListed = sessions.some((s) => s.attach_url === session.state.url);
+    if (sessions.length && !sessionStillListed) session.detach();
+  }, [session.state.url, session.detach, sessions]);
+  useEffect(() => {
+    if (!current) return;
+    const valid = current.session_backends.some((b) => `${b.mode}:${b.backend}` === backendKey);
+    if (!valid) {
+      const next = current.session_backends.find((b) => b.available) ?? current.session_backends[0];
+      setBackendKey(next ? `${next.mode}:${next.backend}` : '');
+    }
+  }, [backendKey, current]);
+  // Starting now routes through the shared picker (#1640/#1641) so this tab and the
+  // dashboard verb share one params/clobber/error path. The selects below remain for
+  // attaching to / observing / driving sessions that already exist.
+  const endSelectedSession = async () => {
+    if (!current || !selectedSession) return;
+    const label = selectedSession.session_name ?? selectedSession.id;
+    if (!confirm(`End session ${label}? This closes the PTY and detaches connected views.`)) return;
+    setEndingSession(selectedSession.id);
+    setSessionErr('');
+    try {
+      await api(`/api/instances/${encodeURIComponent(current.id)}/sessions/${encodeURIComponent(selectedSession.id)}`, { method: 'DELETE' });
+      if (session.state.url === selectedSession.attach_url) session.detach();
+      await loadSessions(current.id);
+    } catch (e) {
+      setSessionErr((e as Error).message);
+    } finally {
+      setEndingSession('');
+    }
+  };
+
+  return (
+    <>
+      <p className="hint">
+        <strong>Workspace.</strong> Attach to a single session on one instance to observe or drive it. Start a
+        new session above, or pick a live task from the <strong>Running</strong> fleet board and open it here.
+      </p>
+      <div className="controls">
+        <label htmlFor="sel-instance">Instance</label>
+        <select id="sel-instance" value={instId} onChange={(e) => setInstId(e.target.value)}>
+          {instances.map((i) => <option key={i.id} value={i.id}>{i.launch_context?.name ?? fmtId(i.id)} · {i.loadout}</option>)}
+          {!instances.length && <option value="">— no session-capable running instances —</option>}
+        </select>
+        <label htmlFor="sel-backend">Mode</label>
+        <select id="sel-backend" value={backendKey} onChange={(e) => setBackendKey(e.target.value)}>
+          {backends.length
+            ? backends.map((b) => <option key={`${b.mode}:${b.backend}`} value={`${b.mode}:${b.backend}`} disabled={!b.available}>{b.mode} · {b.backend}{b.available ? '' : ` — ${b.reason ?? 'unsupported'}`}</option>)
+            : <option value="">— not advertised —</option>}
+        </select>
+        <button onClick={() => onRequestStart(instId)}>Start…</button>
+        <label htmlFor="sel-session">Session</label>
+        <select id="sel-session" value={attachUrl} onChange={(e) => setAttachUrl(e.target.value)}>
+          {sessions.length
+            ? sessions.map((s) => <option key={s.id} value={s.attach_url}>{s.id} · {s.mode ?? s.session_class ?? 'managed'}/{s.backend ?? s.session_backend ?? 'tmux'} · {current?.launch_context?.name ?? fmtId(instId)}</option>)
+            : <option value="">— no sessions —</option>}
+        </select>
+        <button disabled={!attachUrl || (attached && session.state.role === 'observer')} onClick={() => session.attach(attachUrl, false, 'observer')}>Observe</button>
+        <button disabled={!attachUrl || selectedBackend?.drive === false || (attached && session.state.role === 'controller')} onClick={() => session.attach(attachUrl, false, 'controller')}>
+          {attached && session.state.role === 'observer' ? 'Take Control' : 'Drive'}
+        </button>
+        <button disabled={!attached || selectedBackend?.keyframe === false} onClick={session.requestKeyframe}>Keyframe</button>
+        <button disabled={!attached} onClick={() => session.replay(attachUrl, requestedReplayRole)}>Reattach + replay</button>
+        <button
+          disabled={!selectedSession || endingSession === selectedSession?.id}
+          onClick={endSelectedSession}
+          title="Terminate the selected PTY session on the agent"
+        >
+          {endingSession === selectedSession?.id ? 'Ending…' : 'End Session'}
+        </button>
+        <button disabled={!attached} onClick={session.detach}>Detach</button>
+        {session.state.role && <span className={`badge ${session.state.role}`}>{session.state.role}</span>}
+      </div>
+      {sessionErr && <p className="err">Session action failed: {sessionErr}</p>}
+      {current && (
+        <p className="hint">
+          {current.runtime_posture.label} · {current.transport.label} ({current.transport.mode}) · attach starts as observe unless control is explicitly granted.
+          {attached && session.state.role === 'observer' ? ' Click Take Control to re-attach with write access.' : ''}
+          {selectedBackend && !selectedBackend.available ? ` ${selectedBackend.reason ?? 'Selected backend is unavailable.'}` : ''}
+        </p>
+      )}
+      <div className="terminal" ref={session.openTerminal} role="log" aria-label="Session output" />
+      {showPicker && (
+        <div className="picker">
+          <p className="hint" style={{ marginTop: 0 }}>Pick a capability to insert into the command — then Send to inject it. (Lookup is UI; the agent runs it.)</p>
+          <CapabilitySearch compact autoFocus onPick={insertCap} />
+        </div>
+      )}
+      <div className="inputrow">
+        <button aria-label="Insert a capability" title="Insert a capability (search)" onClick={() => setShowPicker((v) => !v)}>＋</button>
+        <input
+          ref={inputRef}
+          value={composer}
+          onChange={(e) => setComposer(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') send(); }}
+          placeholder={session.isController ? 'Type to drive the session…' : 'Observing — input is read-only'}
+          disabled={!session.isController}
+          aria-label="Session input"
+        />
+        <button disabled={!session.isController} onClick={send}>Send</button>
+      </div>
+      <p className="hint">
+        Pick or start a session, then Attach. Cockpit requests observe-first access; drive/control is explicit and denial reasons stay visible through the session stream.
+        Actions inject their command right here.
+      </p>
+    </>
+  );
+}
+
+function dedupeInstances(instances: Instance[]) {
+  const seen = new Set<string>();
+  return instances.filter((instance) => {
+    if (seen.has(instance.id)) return false;
+    seen.add(instance.id);
+    return true;
+  });
+}

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

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, cleanup, waitFor, fireEvent } from '@testing-library/react';
+import { StartSessionModal } from './StartSessionModal';
+import type { SessionApi } from '../useSession';
+
+// Minimal routed fetch mock: inventory on open, POST session on start.
+const INSTANCE = {
+  id: 'inst-aaaaaaaa-1111', runtime: 'container', loadout: 'agentic-dev', state: 'running', tenant: 'default',
+  card_url: '', runtime_posture: { kind: 'container', isolation: 'shared-kernel', label: 'container' },
+  host_daemon: { status: 'unknown' }, transport: { mode: 'mtls', trust: 'secure', label: 'mTLS', source: 't' },
+  launch_context: { loadout: 'agentic-dev' },
+  session_backends: [{ mode: 'managed', backend: 'tmux', available: true, drive: true }],
+};
+function mockFetch(postImpl?: () => Response | Promise<Response>) {
+  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/inventory')) return ok({ instances: [INSTANCE] });
+    if (url.includes('/sessions') && init?.method === 'POST') {
+      return postImpl ? postImpl() : ok({ id: 'sess-x', attach_url: 'ws://x/agents/i/sessions/sess-x/attach' });
+    }
+    return new Response('{}', { status: 404 });
+  }) as unknown as typeof fetch;
+}
+
+function stubSession(attached = false): SessionApi {
+  return {
+    state: { attached, role: null, url: null },
+    attach: vi.fn(), detach: vi.fn(), replay: vi.fn(), requestKeyframe: vi.fn(),
+    sendInput: vi.fn(), openTerminal: vi.fn(), isController: false,
+  } as unknown as SessionApi;
+}
+
+beforeEach(() => { (window as unknown as { __COCKPIT_TOKEN__: string }).__COCKPIT_TOKEN__ = 't'; });
+afterEach(() => { cleanup(); vi.restoreAllMocks(); });
+
+describe('StartSessionModal (#1640/#1641)', () => {
+  it('renders nothing when closed', () => {
+    globalThis.fetch = mockFetch();
+    const { container } = render(<StartSessionModal open={false} onClose={() => {}} session={stubSession()} onStarted={() => {}} />);
+    expect(container.querySelector('[role="dialog"]')).toBeNull();
+  });
+
+  it('surfaces the selected instance loadout when opened', async () => {
+    globalThis.fetch = mockFetch();
+    render(<StartSessionModal open onClose={() => {}} session={stubSession()} onStarted={() => {}} />);
+    expect(await screen.findByRole('dialog', { name: /start a session/i })).toBeTruthy();
+    expect(screen.getByText('Instance loadout')).toBeTruthy();
+    expect(screen.getByText('agentic-dev')).toBeTruthy();
+    expect(screen.queryByRole('option', { name: /Security Audit/ })).toBeNull();
+  });
+
+  it('explains that attached sessions stay running when starting another session', async () => {
+    globalThis.fetch = mockFetch();
+    render(<StartSessionModal open onClose={() => {}} session={stubSession(true)} onStarted={() => {}} />);
+    expect(await screen.findByText(/existing sessions keep running/i)).toBeTruthy();
+    expect(screen.getByRole('button', { name: /start another session/i })).toBeTruthy();
+  });
+
+  it('starts: POSTs with explicit params, attaches, then closes', async () => {
+    globalThis.fetch = mockFetch();
+    const session = stubSession();
+    const onStarted = vi.fn(), onClose = vi.fn();
+    render(<StartSessionModal open onClose={onClose} session={session} onStarted={onStarted} />);
+    const startBtn = await screen.findByRole('button', { name: /start session/i });
+    await waitFor(() => expect((startBtn as HTMLButtonElement).disabled).toBe(false));
+    fireEvent.click(startBtn);
+    await waitFor(() => expect(session.attach).toHaveBeenCalledWith(expect.stringContaining('/attach'), false, 'observer'));
+    const postCall = (globalThis.fetch as unknown as ReturnType<typeof vi.fn>).mock.calls.find((c) => String(c[0]).includes('/sessions') && c[1]?.method === 'POST');
+    expect(String(postCall?.[0])).toMatch(/mode=managed&backend=tmux/);
+    expect(String(postCall?.[0])).not.toContain('loadout=');
+    expect(onStarted).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
+  });
+
+  it('shows the failure inline instead of an alert()', async () => {
+    globalThis.fetch = mockFetch(() => new Response('{"error":"boom"}', { status: 500 }));
+    const alertSpy = vi.spyOn(window, 'alert').mockImplementation(() => {});
+    render(<StartSessionModal open onClose={() => {}} session={stubSession()} onStarted={() => {}} />);
+    const startBtn = await screen.findByRole('button', { name: /start session/i });
+    await waitFor(() => expect((startBtn as HTMLButtonElement).disabled).toBe(false));
+    fireEvent.click(startBtn);
+    await waitFor(() => expect(screen.getByText(/→ 500/)).toBeTruthy());
+    expect(alertSpy).not.toHaveBeenCalled();
+  });
+});

package/web/src/components/StartSessionModal.tsx

@@ -0,0 +1,168 @@
+import { useEffect, useState } from 'react';
+import { api } from '../api';
+import { fmtId } from '../util';
+import type { Instance } from '../types';
+import type { SessionApi } from '../useSession';
+
+// The single home for starting a session (#1640/#1641). Both the dashboard "Start a
+// session" verb and the Sessions-tab Start button open this picker, so neither launches
+// blind with defaults. Operator picks instance · runtime · backend · posture,
+// confirms, and only then do we POST with explicit params and attach. Failures render
+// inline here — never an alert() that reads as "nothing happened".
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  session: SessionApi;
+  onStarted: () => void;          // switch to the Sessions workspace after attach
+  initialInstanceId?: string;     // pre-select when opened from a specific instance/board
+}
+
+export function StartSessionModal({ open, onClose, session, onStarted, initialInstanceId }: Props) {
+  const [instances, setInstances] = useState<Instance[]>([]);
+  const [instId, setInstId] = useState('');
+  const [loadoutId, setLoadoutId] = useState('');
+  const [backendKey, setBackendKey] = useState('');
+  const [posture, setPosture] = useState<'observer' | 'controller'>('observer');
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState('');
+
+  // Load instances when the picker opens (not on mount, so a
+  // closed modal never fetches — keeps the app shell test/inert).
+  useEffect(() => {
+    if (!open) return;
+    setErr('');
+    let cancelled = false;
+    (async () => {
+      try {
+        const inv = await api<{ instances: Instance[] }>('/api/inventory');
+        if (cancelled) return;
+        const sessionable = dedupeInstances(inv.instances).filter((i) => i.state === 'running');
+        setInstances(sessionable);
+        const pick = sessionable.find((i) => i.id === initialInstanceId)
+          ?? sessionable.find((i) => i.session_backends?.some((b) => b.available))
+          ?? sessionable[0];
+        if (pick) {
+          setInstId(pick.id);
+          setLoadoutId(pick.launch_context?.loadout ?? pick.loadout ?? '');
+          const first = pick.session_backends?.find((b) => b.available) ?? pick.session_backends?.[0];
+          setBackendKey(first ? `${first.mode}:${first.backend}` : '');
+        } else {
+          setErr('No stack connected — start an executor first.');
+        }
+      } catch (e) {
+        if (!cancelled) setErr((e as Error).message);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [open, initialInstanceId]);
+
+  const current = instances.find((i) => i.id === instId);
+  const backends = current?.session_backends ?? [];
+  const selectedBackend = backends.find((b) => `${b.mode}:${b.backend}` === backendKey)
+    ?? backends.find((b) => b.available) ?? backends[0];
+
+  // When the chosen instance changes, default loadout + backend to that instance.
+  useEffect(() => {
+    if (!current) return;
+    setLoadoutId(current.launch_context?.loadout ?? current.loadout ?? '');
+    const first = current.session_backends?.find((b) => b.available) ?? current.session_backends?.[0];
+    setBackendKey(first ? `${first.mode}:${first.backend}` : '');
+  }, [instId]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  if (!open) return null;
+
+  const replacing = session.state.attached;
+  const canStart = !busy && !!current && !!selectedBackend?.available;
+
+  const start = async () => {
+    if (!current || !selectedBackend) return;
+    setBusy(true); setErr('');
+    try {
+      const qs = new URLSearchParams({ mode: selectedBackend.mode, backend: selectedBackend.backend });
+      const s = await api<{ id: string; attach_url: string }>(
+        `/api/instances/${encodeURIComponent(current.id)}/sessions?${qs}`, { method: 'POST' },
+      );
+      session.attach(s.attach_url, false, posture);
+      onStarted();
+      onClose();
+    } catch (e) {
+      setErr((e as Error).message);   // inline — the operator sees exactly why
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="modal-backdrop" role="presentation" onClick={onClose}>
+      <div
+        className="modal"
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby="start-session-title"
+        onClick={(e) => e.stopPropagation()}
+        onKeyDown={(e) => { if (e.key === 'Escape') onClose(); }}
+      >
+        <h2 id="start-session-title">Start a session</h2>
+
+        {err && <p className="err">{err}</p>}
+        {replacing && (
+          <p className="hint warn">You have an attached view. Starting creates another managed session and switches Cockpit to it; existing sessions keep running.</p>
+        )}
+
+        <div className="form-grid">
+          <label htmlFor="ss-instance">Instance</label>
+          <select id="ss-instance" value={instId} onChange={(e) => setInstId(e.target.value)}>
+            {instances.map((i) => (
+              <option key={i.id} value={i.id}>{fmtId(i.id)} · {i.runtime} · {i.state}</option>
+            ))}
+          </select>
+
+          <label>Runtime</label>
+          <span className="ro">{current ? `${current.runtime_posture.label} (${current.runtime})` : '—'}</span>
+
+          <label>Instance loadout</label>
+          <span className="ro">{loadoutId || 'unknown'}{current?.launch_context?.image_ref ? ` · ${current.launch_context.image_ref}` : ''}</span>
+
+          <label htmlFor="ss-backend">Backend</label>
+          <select id="ss-backend" value={backendKey} onChange={(e) => setBackendKey(e.target.value)}>
+            {backends.length
+              ? backends.map((b) => (
+                <option key={`${b.mode}:${b.backend}`} value={`${b.mode}:${b.backend}`} disabled={!b.available}>
+                  {b.mode} · {b.backend}{b.available ? '' : ` — ${b.reason ?? 'unsupported'}`}
+                </option>))
+              : <option value="">— not advertised —</option>}
+          </select>
+
+          <label htmlFor="ss-posture">Posture</label>
+          <select
+            id="ss-posture"
+            value={posture}
+            onChange={(e) => setPosture(e.target.value as 'observer' | 'controller')}
+          >
+            <option value="observer">Observe (read-only)</option>
+            <option value="controller" disabled={selectedBackend?.drive === false}>Drive (control)</option>
+          </select>
+        </div>
+
+        {selectedBackend && !selectedBackend.available && (
+          <p className="hint">{selectedBackend.reason ?? 'Selected backend is unavailable on this instance.'}</p>
+        )}
+
+        <div className="modal-actions">
+          <button onClick={onClose} disabled={busy}>Cancel</button>
+          <button className="cta" onClick={start} disabled={!canStart}>
+            {busy ? 'Starting…' : replacing ? 'Start another session' : 'Start session'}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function dedupeInstances(instances: Instance[]) {
+  const seen = new Set<string>();
+  return instances.filter((instance) => {
+    if (seen.has(instance.id)) return false;
+    seen.add(instance.id);
+    return true;
+  });
+}