@openparachute/agent 0.1.0

package/web/ui/src/routes/SessionsList.tsx

@@ -0,0 +1,220 @@
+/**
+ * /sessions — global session listing across every agent group.
+ *
+ * The per-group view is on /groups/:folder; this is the flat
+ * cross-group inventory the operator uses to spot stuck containers,
+ * compare activity, and reap idle sessions.
+ *
+ * "Close" is a hard-stop: the server flips status to closed and signals
+ * the container to exit. Re-opening a closed session is a re-spawn (new
+ * container, new id) — the button copy reflects that.
+ *
+ * The list polls every 7s like /groups so heartbeat freshness stays
+ * accurate without a manual refresh. Unlike /groups, sessions don't
+ * dedupe — each row is its own thing — so we sort by lastActiveAt desc
+ * to keep the most recent at the top.
+ */
+import { useCallback, useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { formatRelative } from '../components/StatusDot.tsx';
+import { closeSession, listSessions, type SessionView } from '../lib/api.ts';
+
+const POLL_MS = 7_000;
+
+export function SessionsList() {
+  const [state, setState] = useState<
+    | { kind: 'loading' }
+    | { kind: 'ok'; sessions: SessionView[] }
+    | { kind: 'error'; message: string }
+  >({ kind: 'loading' });
+  const [busyId, setBusyId] = useState<string | null>(null);
+  const [actionError, setActionError] = useState<string | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+
+  const reload = useCallback(() => setReloadKey((k) => k + 1), []);
+
+  useEffect(() => {
+    let cancelled = false;
+    listSessions()
+      .then((sessions) => !cancelled && setState({ kind: 'ok', sessions }))
+      .catch((err) => {
+        if (!cancelled) {
+          setState({
+            kind: 'error',
+            message: err instanceof Error ? err.message : String(err),
+          });
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [reloadKey]);
+
+  useEffect(() => {
+    if (state.kind !== 'ok') return;
+    let cancelled = false;
+    const t = setInterval(() => {
+      listSessions()
+        .then((sessions) => !cancelled && setState({ kind: 'ok', sessions }))
+        .catch(() => {});
+    }, POLL_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(t);
+    };
+  }, [state.kind]);
+
+  const onClose = async (s: SessionView) => {
+    if (!confirm(`Close session ${s.id.slice(0, 8)}… for ${s.agentGroupName}? The container will be stopped.`)) {
+      return;
+    }
+    setBusyId(s.id);
+    setActionError(null);
+    try {
+      await closeSession(s.id);
+      reload();
+    } catch (err) {
+      setActionError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusyId(null);
+    }
+  };
+
+  if (state.kind === 'loading') {
+    return (
+      <div>
+        <h2>Sessions</h2>
+        <ul className="skeleton-list" aria-busy="true">
+          <li className="skeleton skeleton-row" />
+          <li className="skeleton skeleton-row" />
+        </ul>
+      </div>
+    );
+  }
+
+  if (state.kind === 'error') {
+    return (
+      <div>
+        <h2>Sessions</h2>
+        <div className="error-banner">
+          Couldn't load sessions: <code>{state.message}</code>
+        </div>
+        <div className="actions" style={{ marginTop: '1rem' }}>
+          <button onClick={reload}>Retry</button>
+        </div>
+      </div>
+    );
+  }
+
+  const active = state.sessions.filter((s) => s.status === 'active');
+  const closed = state.sessions.filter((s) => s.status !== 'active');
+  const sortByActive = (a: SessionView, b: SessionView) => {
+    const aT = a.lastActiveAt ? Date.parse(a.lastActiveAt) : 0;
+    const bT = b.lastActiveAt ? Date.parse(b.lastActiveAt) : 0;
+    return bT - aT;
+  };
+  active.sort(sortByActive);
+  closed.sort(sortByActive);
+
+  return (
+    <div>
+      <div className="list-header">
+        <h2>Sessions ({active.length} active)</h2>
+        <button className="secondary" onClick={reload}>Refresh</button>
+      </div>
+
+      <p className="muted">
+        Per-session containers across every agent group. Stuck containers can be hard-closed here; re-opening is a
+        new spawn from the agent group page.
+      </p>
+
+      {actionError && <div className="error-banner">{actionError}</div>}
+
+      {state.sessions.length === 0 && (
+        <div className="empty empty-rich" style={{ marginTop: '1rem' }}>
+          <p className="empty-headline">No sessions yet.</p>
+          <p className="muted">
+            Sessions are spawned when a wired channel receives an inbound message, or via the spawn button on an{' '}
+            <Link to="/">agent group</Link>.
+          </p>
+        </div>
+      )}
+
+      {active.length > 0 && (
+        <div style={{ marginTop: '1rem' }}>
+          {active.map((s) => (
+            <SessionRow key={s.id} s={s} busy={busyId === s.id} onClose={onClose} />
+          ))}
+        </div>
+      )}
+
+      {closed.length > 0 && (
+        <div style={{ marginTop: '2rem' }}>
+          <h3 style={{ fontSize: '0.85rem', color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 500 }}>
+            Closed (recent)
+          </h3>
+          {closed.slice(0, 20).map((s) => (
+            <SessionRow key={s.id} s={s} busy={false} onClose={() => {}} closed />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SessionRow({
+  s,
+  busy,
+  onClose,
+  closed,
+}: {
+  s: SessionView;
+  busy: boolean;
+  onClose: (s: SessionView) => void;
+  closed?: boolean;
+}) {
+  const containerColor =
+    s.containerStatus === 'running' ? 'var(--accent)' : s.containerStatus === 'idle' ? 'var(--warn)' : 'var(--fg-dim)';
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '1rem',
+        padding: '0.75rem 1rem',
+        background: 'white',
+        border: '1px solid var(--border)',
+        borderRadius: '8px',
+        marginBottom: '0.5rem',
+        opacity: closed ? 0.7 : 1,
+      }}
+    >
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
+          <Link to={`/groups/${encodeURIComponent(s.agentGroupFolder)}`} style={{ fontWeight: 500 }}>
+            {s.agentGroupName}
+          </Link>
+          <span style={{ color: containerColor, fontSize: '0.85rem' }}>● {s.containerStatus}</span>
+          {!s.alive && s.status === 'active' && <span className="tag warn">no heartbeat</span>}
+        </div>
+        <div className="dim" style={{ marginTop: '0.25rem', fontSize: '0.85rem' }}>
+          <code>{s.id.slice(0, 12)}…</code>
+          {s.messagingGroupId && <> · channel <code>{s.messagingGroupId.slice(0, 8)}…</code></>}
+          {s.lastActiveAt && <> · last active {formatRelative(s.lastActiveAt)}</>}
+          {!s.lastActiveAt && <> · created {formatRelative(s.createdAt)}</>}
+        </div>
+      </div>
+      {!closed && (
+        <button
+          type="button"
+          className="secondary"
+          onClick={() => onClose(s)}
+          disabled={busy}
+          style={{ borderColor: 'var(--error)', color: 'var(--error)' }}
+        >
+          {busy ? 'Closing…' : 'Close'}
+        </button>
+      )}
+    </div>
+  );
+}

package/web/ui/src/routes/SettingsAgentProvider.tsx

@@ -0,0 +1,109 @@
+/**
+ * /settings/agent-provider — install-wide agent provider source.
+ *
+ * Three options, all paste-only:
+ *   - Claude setup token (`claude setup-token` on a subscription host).
+ *   - Anthropic API key (Console).
+ *   - External provider server (self-hosted proxy or vendor speaking the
+ *     Anthropic API).
+ *
+ * The page never displays plaintext secrets — the API returns a `hasApiKey`
+ * boolean only. Per-agent-group overrides live on each group's detail page
+ * (paraclaw#86).
+ */
+import { useCallback, useEffect, useState } from 'react';
+
+import { AgentProviderCards } from '../components/AgentProviderCards.tsx';
+import { getAgentProvider, setAgentProvider, type AgentProviderSource, type AgentProviderView } from '../lib/api.ts';
+
+type SaveState = { kind: 'idle' } | { kind: 'saving' } | { kind: 'error'; message: string };
+
+export function SettingsAgentProvider() {
+  const [state, setState] = useState<
+    { kind: 'loading' } | { kind: 'ok'; view: AgentProviderView } | { kind: 'error'; message: string }
+  >({ kind: 'loading' });
+  const [save, setSave] = useState<SaveState>({ kind: 'idle' });
+  const [reloadKey, setReloadKey] = useState(0);
+
+  const reload = useCallback(() => setReloadKey((k) => k + 1), []);
+
+  useEffect(() => {
+    let cancelled = false;
+    getAgentProvider()
+      .then((view) => !cancelled && setState({ kind: 'ok', view }))
+      .catch((err) => {
+        if (!cancelled) {
+          setState({ kind: 'error', message: err instanceof Error ? err.message : String(err) });
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [reloadKey]);
+
+  const submit = async (input: { source: AgentProviderSource; apiKey?: string; serverUrl?: string }) => {
+    setSave({ kind: 'saving' });
+    try {
+      const view = await setAgentProvider(input);
+      setState({ kind: 'ok', view });
+      setSave({ kind: 'idle' });
+    } catch (err) {
+      setSave({ kind: 'error', message: err instanceof Error ? err.message : String(err) });
+    }
+  };
+
+  if (state.kind === 'loading') {
+    return (
+      <div>
+        <h2>Settings · Agent provider</h2>
+        <ul className="skeleton-list" aria-busy="true">
+          <li className="skeleton skeleton-row" />
+          <li className="skeleton skeleton-row" />
+          <li className="skeleton skeleton-row" />
+        </ul>
+      </div>
+    );
+  }
+  if (state.kind === 'error') {
+    return (
+      <div>
+        <h2>Settings · Agent provider</h2>
+        <div className="error-banner">
+          Couldn't load settings: <code>{state.message}</code>
+        </div>
+        <div className="actions" style={{ marginTop: '1rem' }}>
+          <button onClick={reload}>Retry</button>
+        </div>
+      </div>
+    );
+  }
+
+  const { view } = state;
+  return (
+    <div>
+      <div className="list-header">
+        <h2>Settings · Agent provider</h2>
+        <button className="secondary" onClick={reload}>
+          Refresh
+        </button>
+      </div>
+      <nav className="muted" style={{ marginBottom: '0.75rem' }}>
+        <a href="approvals">Approval routing</a>
+        {' · '}
+        <a href="agent-provider">Agent provider</a>
+      </nav>
+      <p className="muted">
+        Where the agent gets its Claude credentials. One source per install — applies to every agent group unless a
+        specific group sets an override on its detail page. Changing the source takes effect on the next session spawn.
+      </p>
+
+      {save.kind === 'error' && (
+        <div className="error-banner" style={{ marginBottom: '1rem' }}>
+          {save.message}
+        </div>
+      )}
+
+      <AgentProviderCards view={view} busy={save.kind === 'saving'} onSubmit={submit} />
+    </div>
+  );
+}

package/web/ui/src/routes/SettingsApprovals.tsx

@@ -0,0 +1,234 @@
+/**
+ * /settings/approvals — default approval-routing bot per (approver, channel).
+ *
+ * Backs the `bot_id = ''` channel-default slot in `user_dms`. When an
+ * approval card needs to land for a given approver and the inbound
+ * came in on a bot we don't have a cached DM for, the picker falls
+ * through to this configured default. Without a default the picker
+ * cold-resolves through whichever adapter happens to be registered
+ * first — fine on single-bot installs, surprising on multi-bot.
+ *
+ * One row per (approver, channel) pair where either the approver has a
+ * cached DM or there's at least one active adapter for the channel.
+ * Operator changes the default by picking from the channel's active
+ * bots; the server cold-resolves through the chosen bot to confirm it
+ * can DM the user before re-pointing the slot.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  listApprovalRouting,
+  setApprovalRoutingDefault,
+  type ApprovalRoutingRow,
+} from '../lib/api.ts';
+
+interface SaveError {
+  rowKey: string;
+  message: string;
+}
+
+function rowKey(r: ApprovalRoutingRow): string {
+  return `${r.userId}|${r.channelType}`;
+}
+
+export function SettingsApprovals() {
+  const [state, setState] = useState<
+    | { kind: 'loading' }
+    | { kind: 'ok'; rows: ApprovalRoutingRow[] }
+    | { kind: 'error'; message: string }
+  >({ kind: 'loading' });
+  const [busyKey, setBusyKey] = useState<string | null>(null);
+  const [saveError, setSaveError] = useState<SaveError | null>(null);
+  const [reloadKey, setReloadKey] = useState(0);
+
+  const reload = useCallback(() => setReloadKey((k) => k + 1), []);
+
+  useEffect(() => {
+    let cancelled = false;
+    listApprovalRouting()
+      .then((rows) => !cancelled && setState({ kind: 'ok', rows }))
+      .catch((err) => {
+        if (!cancelled) {
+          setState({
+            kind: 'error',
+            message: err instanceof Error ? err.message : String(err),
+          });
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [reloadKey]);
+
+  const onPickBot = async (row: ApprovalRoutingRow, botId: string) => {
+    if (botId === (row.currentBotId ?? '')) return;
+    const key = rowKey(row);
+    setBusyKey(key);
+    setSaveError(null);
+    try {
+      const updated = await setApprovalRoutingDefault(row.userId, row.channelType, botId);
+      setState((s) => {
+        if (s.kind !== 'ok') return s;
+        return {
+          kind: 'ok',
+          rows: s.rows.map((r) => (rowKey(r) === key ? updated : r)),
+        };
+      });
+    } catch (err) {
+      setSaveError({ rowKey: key, message: err instanceof Error ? err.message : String(err) });
+    } finally {
+      setBusyKey(null);
+    }
+  };
+
+  if (state.kind === 'loading') {
+    return (
+      <div>
+        <h2>Settings · Approval routing</h2>
+        <ul className="skeleton-list" aria-busy="true">
+          <li className="skeleton skeleton-row" />
+          <li className="skeleton skeleton-row" />
+        </ul>
+      </div>
+    );
+  }
+
+  if (state.kind === 'error') {
+    return (
+      <div>
+        <h2>Settings · Approval routing</h2>
+        <div className="error-banner">
+          Couldn't load settings: <code>{state.message}</code>
+        </div>
+        <div className="actions" style={{ marginTop: '1rem' }}>
+          <button onClick={reload}>Retry</button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="list-header">
+        <h2>Settings · Approval routing</h2>
+        <button className="secondary" onClick={reload}>Refresh</button>
+      </div>
+
+      <nav className="muted" style={{ marginBottom: '0.75rem' }}>
+        <a href="approvals">Approval routing</a>
+        {' · '}
+        <a href="agent-provider">Agent provider</a>
+      </nav>
+
+      <p className="muted">
+        Pick the bot that should deliver approval cards when the inbound bot can't reach you. Each
+        approver has their own per-channel default. Adding a new bot? Wire it from{' '}
+        <a href="channels/new">Channels → New</a> first — only running adapters appear here.
+      </p>
+
+      {state.rows.length === 0 && (
+        <div className="empty empty-rich" style={{ marginTop: '1rem' }}>
+          <p className="empty-headline">Nothing to configure yet.</p>
+          <p className="muted">
+            Add an owner or admin (and wire at least one channel) and they'll show up here.
+          </p>
+        </div>
+      )}
+
+      {state.rows.map((row) => (
+        <SettingsRow
+          key={rowKey(row)}
+          row={row}
+          busy={busyKey === rowKey(row)}
+          error={saveError && saveError.rowKey === rowKey(row) ? saveError.message : null}
+          onPick={(botId) => onPickBot(row, botId)}
+        />
+      ))}
+    </div>
+  );
+}
+
+function SettingsRow({
+  row,
+  busy,
+  error,
+  onPick,
+}: {
+  row: ApprovalRoutingRow;
+  busy: boolean;
+  error: string | null;
+  onPick: (botId: string) => void;
+}) {
+  const value = row.currentBotId ?? '';
+  // Multi-bot install OR a default already pinned to a specific bot.
+  // If there's only one available bot AND the default is either unset
+  // or already that bot, we render an info row — there's no choice
+  // to be made and a dropdown of one option is just visual noise.
+  const trivial = useMemo(() => {
+    if (row.availableBots.length <= 1) {
+      const only = row.availableBots[0]?.botId ?? '';
+      if (!value || value === only) return true;
+    }
+    return false;
+  }, [row.availableBots, value]);
+
+  return (
+    <div
+      style={{
+        background: 'white',
+        border: '1px solid var(--border)',
+        borderRadius: '8px',
+        padding: '1rem 1.25rem',
+        marginBottom: '0.75rem',
+      }}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
+        <strong>{row.channelType}</strong>
+        <span className="tag muted">{row.userId}</span>
+      </div>
+
+      <div style={{ marginTop: '0.5rem' }}>
+        {trivial ? (
+          <p className="muted" style={{ margin: 0 }}>
+            {row.availableBots.length === 0 ? (
+              <>No active bot for this channel — wire one to enable routing.</>
+            ) : (
+              <>
+                Routing through <code>{row.availableBots[0]!.label}</code> (the only active bot).
+              </>
+            )}
+          </p>
+        ) : (
+          <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            <span className="muted">Default bot:</span>
+            <select
+              value={value}
+              disabled={busy}
+              onChange={(e) => onPick(e.target.value)}
+              style={{ minWidth: '14rem' }}
+            >
+              {value === '' && <option value="">(unset — first adapter wins)</option>}
+              {row.availableBots.map((b) => (
+                <option key={b.botId} value={b.botId}>
+                  {b.label}
+                </option>
+              ))}
+              {/* Surface a stale current selection (e.g. its adapter was
+                  taken offline) so the operator sees what's there before
+                  switching it. */}
+              {value !== '' && !row.availableBots.find((b) => b.botId === value) && (
+                <option value={value}>{value} (offline)</option>
+              )}
+            </select>
+            {busy && <span className="dim">saving…</span>}
+          </label>
+        )}
+      </div>
+
+      {error && (
+        <div className="error-banner" style={{ marginTop: '0.5rem' }}>
+          {error}
+        </div>
+      )}
+    </div>
+  );
+}