@openparachute/agent 0.1.2 → 0.2.0

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

@@ -1,220 +0,0 @@
-/**
- * /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

@@ -1,109 +0,0 @@
-/**
- * /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

@@ -1,234 +0,0 @@
-/**
- * /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>
-  );
-}