@openparachute/agent 0.1.2 → 0.2.2

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

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

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

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