@openparachute/agent 0.1.0

package/web/ui/src/components/AgentGroupPicker.tsx

@@ -0,0 +1,263 @@
+/**
+ * Picker that resolves an agent group — either an existing one (selected
+ * from the list) or a new one created inline. Lifted out of the setup
+ * wizard's step-6 component so the new /channels/new page can reuse the
+ * same UX without duplicating the folder-availability + slug-suggestion
+ * dance.
+ *
+ * The wizard's AgentGroupStep now thin-wraps this picker; the surface
+ * isn't aware of wizard steps, just "give me a group, then call onPicked".
+ *
+ * What this component is NOT:
+ *   - A vault-attach UI. Vault attach is offered on the group's detail page
+ *     after creation. Keeping the picker minimal means the wire-channel
+ *     flow stays under a minute.
+ *   - A pre-existing group editor. Click-through to /groups/:folder for that.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import {
+  checkFolderAvailability,
+  createGroup,
+  fetchFolderSuggestion,
+  listGroups,
+  type AgentGroupView,
+  type FolderAvailability,
+} from '../lib/api.ts';
+
+type Mode = 'pick' | 'create';
+
+export interface PickedGroup {
+  id: string;
+  folder: string;
+  name: string;
+}
+
+export interface AgentGroupPickerProps {
+  /** Called once a group is picked or created. The caller decides what's next. */
+  onPicked: (group: PickedGroup) => void;
+  /** When true, hides the "Pick existing" affordance — used in flows that
+   *  always want a fresh group. Default: false (offer pick when groups exist). */
+  forceCreate?: boolean;
+  /** Optional initial mode preference; ignored when there are 0 existing groups. */
+  initialMode?: Mode;
+}
+
+export function AgentGroupPicker({ onPicked, forceCreate = false, initialMode }: AgentGroupPickerProps) {
+  const [groups, setGroups] = useState<AgentGroupView[] | null>(null);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [mode, setMode] = useState<Mode>(initialMode ?? 'pick');
+
+  useEffect(() => {
+    let cancelled = false;
+    listGroups()
+      .then((g) => {
+        if (cancelled) return;
+        setGroups(g);
+        if (g.length === 0 || forceCreate) setMode('create');
+      })
+      .catch((err) => {
+        if (!cancelled) setLoadError(err instanceof Error ? err.message : String(err));
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [forceCreate]);
+
+  if (loadError) {
+    return (
+      <div className="error-banner">
+        Couldn't load groups: <code>{loadError}</code>
+      </div>
+    );
+  }
+  if (!groups) {
+    return (
+      <ul className="skeleton-list" aria-busy="true">
+        <li className="skeleton skeleton-row" />
+      </ul>
+    );
+  }
+
+  const onPick = (g: AgentGroupView) => onPicked({ id: g.id, folder: g.folder, name: g.name });
+
+  return (
+    <div>
+      {!forceCreate && groups.length > 0 && (
+        <div className="row" style={{ marginTop: '0.5rem' }}>
+          <div style={{ display: 'flex', gap: '0.5rem' }}>
+            <button className={mode === 'pick' ? '' : 'secondary'} onClick={() => setMode('pick')}>
+              Pick existing ({groups.length})
+            </button>
+            <button className={mode === 'create' ? '' : 'secondary'} onClick={() => setMode('create')}>
+              Create new
+            </button>
+          </div>
+        </div>
+      )}
+
+      {mode === 'pick' && groups.length > 0 && (
+        <ul style={{ listStyle: 'none', padding: 0, marginTop: '0.5rem' }}>
+          {groups.map((g) => (
+            <li key={g.id} style={{ padding: '0.6rem 0', borderBottom: '1px solid var(--border)' }}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: '0.75rem',
+                }}
+              >
+                <div>
+                  <strong>{g.name}</strong> <code className="dim">{g.folder}</code>
+                  {g.vault && (
+                    <span className="tag" style={{ marginLeft: '0.5rem' }}>
+                      {g.vault.scope}
+                    </span>
+                  )}
+                </div>
+                <button onClick={() => onPick(g)}>Use this group</button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      {mode === 'create' && <CreateGroupInline onCreated={onPicked} />}
+    </div>
+  );
+}
+
+function CreateGroupInline({ onCreated }: { onCreated: (g: PickedGroup) => void }) {
+  const [name, setName] = useState('');
+  const [folder, setFolder] = useState('');
+  const [folderTouched, setFolderTouched] = useState(false);
+  const [folderCheck, setFolderCheck] = useState<FolderAvailability | null>(null);
+  const [folderChecking, setFolderChecking] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Auto-suggest folder slug from name.
+  useEffect(() => {
+    if (folderTouched) return;
+    const trimmed = name.trim();
+    if (!trimmed) {
+      setFolder('');
+      return;
+    }
+    let cancelled = false;
+    fetchFolderSuggestion(trimmed)
+      .then((slug) => !cancelled && !folderTouched && setFolder(slug))
+      .catch(() => {
+        // Suggestion failure is non-fatal; operator can type their own slug.
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [name, folderTouched]);
+
+  // Debounced folder availability.
+  const checkTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+  useEffect(() => {
+    if (!folder) {
+      setFolderCheck(null);
+      return;
+    }
+    if (checkTimer.current) clearTimeout(checkTimer.current);
+    setFolderChecking(true);
+    checkTimer.current = setTimeout(async () => {
+      try {
+        setFolderCheck(await checkFolderAvailability(folder));
+      } catch (err) {
+        setFolderCheck({
+          slug: folder,
+          valid: false,
+          available: false,
+          reason: err instanceof Error ? err.message : String(err),
+        });
+      } finally {
+        setFolderChecking(false);
+      }
+    }, 250);
+    return () => {
+      if (checkTimer.current) clearTimeout(checkTimer.current);
+    };
+  }, [folder]);
+
+  const onFolderChange = useCallback((next: string) => {
+    setFolderTouched(true);
+    setFolder(next);
+  }, []);
+
+  const ready =
+    name.trim().length > 0 &&
+    folder.length > 0 &&
+    folderCheck?.valid === true &&
+    folderCheck?.available === true;
+
+  const onCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!ready) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      const r = await createGroup({ name: name.trim(), folder });
+      onCreated({ id: r.group.id, folder: r.group.folder, name: r.group.name });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={onCreate} style={{ marginTop: '0.5rem' }}>
+      <div className="row">
+        <label htmlFor="newName">Name</label>
+        <input
+          id="newName"
+          type="text"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          placeholder="e.g. Forge"
+          autoFocus
+        />
+      </div>
+      <div className="row">
+        <label htmlFor="newFolder">Folder slug</label>
+        <input
+          id="newFolder"
+          type="text"
+          value={folder}
+          onChange={(e) => onFolderChange(e.target.value)}
+          placeholder="e.g. forge"
+        />
+        {folder && folderChecking && (
+          <p className="dim">
+            Checking <code>{folder}</code>…
+          </p>
+        )}
+        {folder && !folderChecking && folderCheck && !folderCheck.valid && (
+          <p className="wizard-folder-error">{folderCheck.reason ?? 'Invalid slug.'}</p>
+        )}
+        {folder && !folderChecking && folderCheck && folderCheck.valid && !folderCheck.available && (
+          <p className="wizard-folder-error">{folderCheck.reason ?? 'Already taken.'}</p>
+        )}
+        {folder && !folderChecking && folderCheck && folderCheck.valid && folderCheck.available && (
+          <p className="wizard-folder-ok">
+            <code>groups/{folder}/</code> is available.
+          </p>
+        )}
+      </div>
+      <p className="dim">
+        Vault attach skipped here — you can do it from the group's detail page after setup. Keeps this flow short.
+      </p>
+      {error && <div className="error-banner">{error}</div>}
+      <div className="actions" style={{ marginTop: '0.75rem' }}>
+        <button type="submit" disabled={!ready || submitting}>
+          {submitting ? 'Creating…' : 'Create + use this group'}
+        </button>
+      </div>
+    </form>
+  );
+}

package/web/ui/src/components/AgentProviderCards.tsx

@@ -0,0 +1,220 @@
+/**
+ * Three paste-only agent-provider cards reused at install-wide
+ * (`/settings/agent-provider`) and per-group (`/groups/<folder>`)
+ * scopes. Each card consumes the same `AgentProviderView` shape and
+ * fires `onSubmit` with the matching `SetAgentProviderInput` slice.
+ *
+ * The card never displays the secret — it accepts a paste and
+ * forwards it to the caller, which writes through the encrypted
+ * provider-credentials store. `view.hasApiKey` is a boolean only.
+ */
+import { useState } from 'react';
+
+import type { AgentProviderSource, AgentProviderView } from '../lib/api.ts';
+
+interface CardProps {
+  active: boolean;
+  title: string;
+  children: React.ReactNode;
+}
+
+function Card({ active, title, children }: CardProps) {
+  return (
+    <div
+      style={{
+        background: 'white',
+        border: active ? '2px solid var(--accent, #2563eb)' : '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>{title}</strong>
+        {active && <span className="tag">active</span>}
+      </div>
+      <div style={{ marginTop: '0.5rem' }}>{children}</div>
+    </div>
+  );
+}
+
+interface SubmitInput {
+  source: AgentProviderSource;
+  apiKey?: string;
+  serverUrl?: string;
+}
+
+interface AgentProviderCardsProps {
+  view: AgentProviderView;
+  busy: boolean;
+  onSubmit: (input: SubmitInput) => void;
+}
+
+export function AgentProviderCards({ view, busy, onSubmit }: AgentProviderCardsProps) {
+  return (
+    <>
+      <ClaudeSetupTokenCard
+        view={view}
+        busy={busy}
+        onSubmit={(apiKey) => onSubmit({ source: 'claude_setup_token', apiKey })}
+      />
+      <ApiKeyCard view={view} busy={busy} onSubmit={(apiKey) => onSubmit({ source: 'anthropic_api_key', apiKey })} />
+      <ExternalServerCard
+        view={view}
+        busy={busy}
+        onSubmit={(apiKey, serverUrl) => onSubmit({ source: 'external_server', apiKey, serverUrl })}
+      />
+    </>
+  );
+}
+
+function ClaudeSetupTokenCard({
+  view,
+  busy,
+  onSubmit,
+}: {
+  view: AgentProviderView;
+  busy: boolean;
+  onSubmit: (apiKey: string) => void;
+}) {
+  const active = view.source === 'claude_setup_token';
+  const [token, setToken] = useState('');
+  return (
+    <Card active={active} title="Claude setup token (recommended)">
+      <p className="muted" style={{ margin: '0 0 0.5rem' }}>
+        Generate a Claude setup token with <code>claude setup-token</code> on a host where you've authenticated to your
+        Pro / Max / Team / Enterprise subscription. The command walks you through OAuth and prints a one-year token (
+        <code>sk-ant-oat01-…</code>). Inference-only — paste it here.
+        {active && view.hasApiKey && ' A token is currently stored.'}
+      </p>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (token.trim()) {
+            onSubmit(token.trim());
+            setToken('');
+          }
+        }}
+        style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}
+      >
+        <input
+          type="password"
+          autoComplete="off"
+          placeholder="sk-ant-oat01-…"
+          value={token}
+          onChange={(e) => setToken(e.target.value)}
+          disabled={busy}
+          style={{ flex: '1 1 24rem', minWidth: '16rem' }}
+        />
+        <button type="submit" disabled={busy || !token.trim()}>
+          {active ? 'Replace token' : 'Use setup token'}
+        </button>
+      </form>
+    </Card>
+  );
+}
+
+function ApiKeyCard({
+  view,
+  busy,
+  onSubmit,
+}: {
+  view: AgentProviderView;
+  busy: boolean;
+  onSubmit: (apiKey: string) => void;
+}) {
+  const active = view.source === 'anthropic_api_key';
+  const [apiKey, setApiKey] = useState('');
+  return (
+    <Card active={active} title="Anthropic API key">
+      <p className="muted" style={{ margin: '0 0 0.5rem' }}>
+        Paste an API key from console.anthropic.com. Per-token billing.
+        {active && view.hasApiKey && ' A key is currently stored.'}
+      </p>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (apiKey.trim()) {
+            onSubmit(apiKey.trim());
+            setApiKey('');
+          }
+        }}
+        style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}
+      >
+        <input
+          type="password"
+          autoComplete="off"
+          placeholder="sk-ant-api03-…"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          disabled={busy}
+          style={{ flex: '1 1 24rem', minWidth: '16rem' }}
+        />
+        <button type="submit" disabled={busy || !apiKey.trim()}>
+          {active ? 'Replace key' : 'Use API key'}
+        </button>
+      </form>
+    </Card>
+  );
+}
+
+function ExternalServerCard({
+  view,
+  busy,
+  onSubmit,
+}: {
+  view: AgentProviderView;
+  busy: boolean;
+  onSubmit: (apiKey: string, serverUrl: string) => void;
+}) {
+  const active = view.source === 'external_server';
+  const [serverUrl, setServerUrl] = useState(active ? (view.serverUrl ?? '') : '');
+  const [apiKey, setApiKey] = useState('');
+  const ready = serverUrl.trim() && apiKey.trim();
+  return (
+    <Card active={active} title="External provider server">
+      <p className="muted" style={{ margin: '0 0 0.5rem' }}>
+        A self-hosted Claude proxy or a vendor that speaks the Anthropic API (e.g. OpenRouter). Sets{' '}
+        <code>ANTHROPIC_BASE_URL</code> + API key inside the container.
+        {active && view.serverUrl && (
+          <>
+            {' '}
+            Pointed at <code>{view.serverUrl}</code>.
+          </>
+        )}
+      </p>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          if (ready) {
+            onSubmit(apiKey.trim(), serverUrl.trim());
+            setApiKey('');
+            setServerUrl('');
+          }
+        }}
+        style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}
+      >
+        <input
+          type="url"
+          placeholder="https://openrouter.ai/api/v1"
+          value={serverUrl}
+          onChange={(e) => setServerUrl(e.target.value)}
+          disabled={busy}
+        />
+        <input
+          type="password"
+          autoComplete="off"
+          placeholder="API key"
+          value={apiKey}
+          onChange={(e) => setApiKey(e.target.value)}
+          disabled={busy}
+        />
+        <div>
+          <button type="submit" disabled={busy || !ready}>
+            {active ? 'Replace' : 'Use external server'}
+          </button>
+        </div>
+      </form>
+    </Card>
+  );
+}

package/web/ui/src/components/CredentialForm.tsx

@@ -0,0 +1,214 @@
+/**
+ * Generic credential form — posts to the paraclaw-native /api/secrets.
+ *
+ * Repurposed from the original setup-wizard CredentialFormStep when the
+ * night/ui rebirth pulled credential capture out of the wizard and into
+ * its own /secrets surface. The shape is the same — name + value, optional
+ * pre-flight validation against a channel API — but the backend is
+ * paraclaw's encrypted-at-rest secrets store, not the OneCLI gateway.
+ *
+ * Modes:
+ *   - `mode: 'free'`     — free-form. User picks the secret name, kind, and
+ *                          (optionally) the agent_group_id. No pre-flight
+ *                          validation — used for arbitrary api keys.
+ *   - `mode: 'channel'`  — channel-scoped. Caller provides `channel`
+ *                          ('discord' | 'telegram') and we hard-pin the
+ *                          secret name (DISCORD_TOKEN / TELEGRAM_BOT_TOKEN)
+ *                          and run POST /channels/<adapter>/test before
+ *                          saving. Capture the validated identity via
+ *                          `onValidated` so callers (the wizard) can reuse
+ *                          it without making the user paste twice.
+ *
+ * The raw value is held in component state only as long as needed to
+ * validate + submit, then dropped. We never persist it to localStorage.
+ */
+import { useState } from 'react';
+import {
+  putSecret,
+  testDiscordToken,
+  testTelegramToken,
+  type DiscordIdentity,
+  type SecretKind,
+  type TelegramIdentity,
+} from '../lib/api.ts';
+
+type ChannelKind = 'discord' | 'telegram';
+
+interface ChannelMode {
+  mode: 'channel';
+  channel: ChannelKind;
+  /** Optional: bind the secret to a specific agent group instead of leaving it global. */
+  agentGroupId?: string | null;
+  /** Called once both validation + putSecret resolved. Identity is the
+   *  channel API's view of the bot — caller can stash it in wizard state. */
+  onValidated?: (identity: DiscordIdentity | TelegramIdentity, secretName: string) => void;
+}
+
+interface FreeMode {
+  mode: 'free';
+  /** Optional: pre-fill the name field. */
+  defaultName?: string;
+  defaultKind?: SecretKind;
+  defaultAgentGroupId?: string | null;
+  onCreated?: (name: string) => void;
+}
+
+type Props = (ChannelMode | FreeMode) & {
+  onCancel?: () => void;
+  /** Compact rendering — drops the help blurb (used inside the wizard). */
+  compact?: boolean;
+};
+
+const CHANNEL_SECRET_NAME: Record<ChannelKind, string> = {
+  discord: 'DISCORD_TOKEN',
+  telegram: 'TELEGRAM_BOT_TOKEN',
+};
+
+export function CredentialForm(props: Props) {
+  const [name, setName] = useState(
+    props.mode === 'channel' ? CHANNEL_SECRET_NAME[props.channel] : props.defaultName ?? '',
+  );
+  const [kind, setKind] = useState<SecretKind>(
+    props.mode === 'channel' ? 'channel-token' : props.defaultKind ?? 'generic',
+  );
+  const [value, setValue] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const channelMode = props.mode === 'channel' ? props : null;
+  const channel = channelMode?.channel ?? null;
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim() || !value.trim()) return;
+    setSubmitting(true);
+    setError(null);
+    try {
+      // Channel mode: validate against the platform first so a bad token
+      // surfaces here, not four steps later as a "no inbound message arrived".
+      let identity: DiscordIdentity | TelegramIdentity | null = null;
+      if (channel === 'discord') {
+        const r = await testDiscordToken(value.trim());
+        identity = r.identity;
+      } else if (channel === 'telegram') {
+        const r = await testTelegramToken(value.trim());
+        identity = r.identity;
+      }
+      const agentGroupId =
+        props.mode === 'channel' ? props.agentGroupId : props.defaultAgentGroupId;
+      await putSecret({
+        name: name.trim(),
+        value: value.trim(),
+        kind,
+        agentGroupId: agentGroupId ?? null,
+      });
+      setValue('');
+      if (channelMode?.onValidated && identity) {
+        channelMode.onValidated(identity, name.trim());
+      } else if (props.mode === 'free' && props.onCreated) {
+        props.onCreated(name.trim());
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const lockName = props.mode === 'channel';
+  const helpBlurb = !props.compact && channel === 'discord' && (
+    <p className="dim">
+      Don't have a bot yet? Create one at{' '}
+      <a href="https://discord.com/developers/applications" target="_blank" rel="noreferrer">
+        discord.com/developers/applications
+      </a>{' '}
+      — New Application → Bot → Copy token.
+    </p>
+  );
+  const telegramHelp = !props.compact && channel === 'telegram' && (
+    <p className="dim">
+      Don't have a bot yet? Open Telegram → message{' '}
+      <a href="https://t.me/BotFather" target="_blank" rel="noreferrer">@BotFather</a>{' '}
+      → <code>/newbot</code> → name + handle → copy the token.
+    </p>
+  );
+
+  return (
+    <form onSubmit={onSubmit}>
+      {helpBlurb}
+      {telegramHelp}
+
+      <div className="row">
+        <label htmlFor="secretName">Name</label>
+        <input
+          id="secretName"
+          type="text"
+          autoComplete="off"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          disabled={lockName || submitting}
+          placeholder={lockName ? undefined : 'OPENAI_API_KEY'}
+        />
+        {lockName && (
+          <p className="dim" style={{ marginTop: '0.25rem', fontSize: '0.8rem' }}>
+            Pinned for the {channel} adapter — agent containers look up this exact name at spawn.
+          </p>
+        )}
+      </div>
+
+      {props.mode === 'free' && (
+        <div className="row">
+          <label htmlFor="secretKind">Kind</label>
+          <select
+            id="secretKind"
+            value={kind}
+            onChange={(e) => setKind(e.target.value as SecretKind)}
+            disabled={submitting}
+          >
+            <option value="generic">generic</option>
+            <option value="api-key">api-key</option>
+            <option value="channel-token">channel-token</option>
+          </select>
+          <p className="dim" style={{ marginTop: '0.25rem', fontSize: '0.8rem' }}>
+            Hint for the secrets list. Doesn't change behavior.
+          </p>
+        </div>
+      )}
+
+      <div className="row">
+        <label htmlFor="secretValue">Value</label>
+        <input
+          id="secretValue"
+          type="password"
+          autoComplete="off"
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          disabled={submitting}
+          placeholder={
+            channel === 'discord'
+              ? 'MT…  (Discord bot token)'
+              : channel === 'telegram'
+              ? '123456789:ABCdef…'
+              : 'paste secret value'
+          }
+        />
+        <p className="dim" style={{ marginTop: '0.25rem', fontSize: '0.8rem' }}>
+          Stored AES-256-GCM encrypted under <code>~/.parachute/agent/master.key</code>. Never written to your browser's storage.
+        </p>
+      </div>
+
+      {error && <div className="error-banner">{error}</div>}
+
+      <div className="actions" style={{ marginTop: '0.75rem' }}>
+        {props.onCancel && (
+          <button type="button" className="secondary" onClick={props.onCancel} disabled={submitting}>
+            Cancel
+          </button>
+        )}
+        <button type="submit" disabled={submitting || !name.trim() || !value.trim()}>
+          {submitting ? (channel ? 'Validating…' : 'Saving…') : channel ? 'Validate + save' : 'Save secret'}
+        </button>
+      </div>
+    </form>
+  );
+}