@openparachute/agent 0.1.1 → 0.2.0

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

@@ -1,306 +0,0 @@
-/**
- * /channels/mg/:id — per-messaging-group detail + policy editor.
- *
- * What's here:
- *   - read-only metadata (channel type, platform id, denial flag, created)
- *   - the `unknownSenderPolicy` editor as a 3-radio toggle
- *   - a read-only summary of wired agents (links to per-MGA detail land in PR3)
- *
- * The MG-id is a UUID generated server-side; the disambiguation prefix
- * `mg/` keeps the route clean against future per-MGA routes (`mga/`)
- * without needing a discriminator query param.
- */
-import { useCallback, useEffect, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
-import {
-  getMessagingGroupDetail,
-  HttpError,
-  updateMessagingGroupPolicy,
-  type MessagingGroupDetailView,
-  type UnknownSenderPolicy,
-} from '../lib/api.ts';
-
-type State =
-  | { kind: 'loading' }
-  | { kind: 'ok'; mg: MessagingGroupDetailView }
-  | { kind: 'error'; status: number | null; message: string };
-
-interface PolicyChoice {
-  value: UnknownSenderPolicy;
-  label: string;
-  blurb: string;
-}
-
-const POLICY_CHOICES: PolicyChoice[] = [
-  {
-    value: 'request_approval',
-    label: 'Request approval',
-    blurb: 'Pause the message and DM you an approve / reject card. Default for newly auto-created channels.',
-  },
-  {
-    value: 'strict',
-    label: 'Strict',
-    blurb: 'Drop messages from unknown senders silently. Use when the channel should only see vetted traffic.',
-  },
-  {
-    value: 'public',
-    label: 'Public',
-    blurb:
-      'Admit every sender and route normally. Use for channels you trust by ambient context (private servers, allowlisted chats).',
-  },
-];
-
-export function MessagingGroupDetail() {
-  const { id: rawId } = useParams<{ id: string }>();
-  const id = rawId ?? '';
-  const [state, setState] = useState<State>({ kind: 'loading' });
-  const [reloadKey, setReloadKey] = useState(0);
-  const [savingPolicy, setSavingPolicy] = useState<UnknownSenderPolicy | null>(null);
-  const [saveError, setSaveError] = useState<string | null>(null);
-
-  const reload = useCallback(() => setReloadKey((k) => k + 1), []);
-
-  useEffect(() => {
-    if (!id) {
-      setState({ kind: 'error', status: null, message: 'no messaging group id in URL' });
-      return;
-    }
-    let cancelled = false;
-    getMessagingGroupDetail(id)
-      .then((mg) => !cancelled && setState({ kind: 'ok', mg }))
-      .catch((err) => {
-        if (cancelled) return;
-        const status = err instanceof HttpError ? err.status : null;
-        setState({
-          kind: 'error',
-          status,
-          message: err instanceof Error ? err.message : String(err),
-        });
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [id, reloadKey]);
-
-  const onPick = async (next: UnknownSenderPolicy) => {
-    if (state.kind !== 'ok') return;
-    if (next === state.mg.unknownSenderPolicy) return;
-    setSavingPolicy(next);
-    setSaveError(null);
-    try {
-      const updated = await updateMessagingGroupPolicy(id, next);
-      setState({ kind: 'ok', mg: updated });
-    } catch (err) {
-      setSaveError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setSavingPolicy(null);
-    }
-  };
-
-  if (state.kind === 'loading') {
-    return (
-      <div>
-        <h2>Channel</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>Channel</h2>
-        <div className="error-banner">
-          {state.status === 404 ? (
-            <>
-              No channel with id <code>{id}</code> — it may have been removed.
-            </>
-          ) : (
-            <>
-              Couldn't load this channel: <code>{state.message}</code>
-            </>
-          )}
-        </div>
-        <div className="actions" style={{ marginTop: '1rem' }}>
-          <Link to="/channels">
-            <button className="secondary">Back to channels</button>
-          </Link>
-          {state.status !== 404 && <button onClick={reload}>Retry</button>}
-        </div>
-      </div>
-    );
-  }
-
-  const { mg } = state;
-  return (
-    <div>
-      <div className="list-header">
-        <h2 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', flexWrap: 'wrap' }}>
-          <Link to="/channels" className="muted" style={{ textDecoration: 'none' }}>
-            Channels
-          </Link>
-          <span className="dim">/</span>
-          <span style={{ textTransform: 'capitalize' }}>{mg.channelType}</span>
-          {mg.displayName && <span className="dim">· {mg.displayName}</span>}
-        </h2>
-      </div>
-
-      {mg.deniedAt && (
-        <div
-          className="banner"
-          style={{
-            background: 'var(--warn-bg, #fff7e0)',
-            border: '1px solid var(--warn, #c08a00)',
-            borderRadius: '8px',
-            padding: '0.75rem 1rem',
-            marginBottom: '1rem',
-          }}
-        >
-          <strong>Denied channel.</strong> The owner explicitly blocked this messaging group at{' '}
-          <code>{mg.deniedAt}</code>. The router drops messages here before any wiring or policy below applies — undeny
-          from the central admin surface to restore routing.
-        </div>
-      )}
-
-      <section
-        style={{
-          background: 'white',
-          border: '1px solid var(--border)',
-          borderRadius: '8px',
-          padding: '1rem 1.25rem',
-          marginBottom: '1rem',
-        }}
-      >
-        <h3 style={{ marginTop: 0 }}>Group details</h3>
-        <div className="kv">
-          <div>id</div>
-          <div>
-            <code>{mg.id}</code>
-          </div>
-          <div>channel</div>
-          <div style={{ textTransform: 'capitalize' }}>{mg.channelType}</div>
-          <div>platform id</div>
-          <div>
-            <code>{mg.platformId}</code>
-          </div>
-          <div>kind</div>
-          <div>{mg.isGroup ? 'group / channel' : 'direct message'}</div>
-          <div>name</div>
-          <div>{mg.displayName ?? <span className="dim">(unset)</span>}</div>
-          <div>created</div>
-          <div>
-            <code>{mg.createdAt}</code>
-          </div>
-        </div>
-      </section>
-
-      <section
-        style={{
-          background: 'white',
-          border: '1px solid var(--border)',
-          borderRadius: '8px',
-          padding: '1rem 1.25rem',
-          marginBottom: '1rem',
-        }}
-      >
-        <h3 style={{ marginTop: 0 }}>Unknown-sender policy</h3>
-        <p className="muted">
-          What should happen when a sender the messaging group hasn't seen before posts a message?
-        </p>
-        <div role="radiogroup" aria-label="Unknown-sender policy">
-          {POLICY_CHOICES.map((choice) => {
-            const selected = mg.unknownSenderPolicy === choice.value;
-            const saving = savingPolicy === choice.value;
-            return (
-              <label
-                key={choice.value}
-                style={{
-                  display: 'block',
-                  padding: '0.6rem 0.75rem',
-                  borderRadius: '6px',
-                  background: selected ? 'var(--accent-bg, #eef4ff)' : 'transparent',
-                  border: selected ? '1px solid var(--accent, #5076ff)' : '1px solid transparent',
-                  cursor: savingPolicy === null ? 'pointer' : 'progress',
-                  marginBottom: '0.4rem',
-                }}
-              >
-                <input
-                  type="radio"
-                  name="unknownSenderPolicy"
-                  value={choice.value}
-                  checked={selected}
-                  disabled={savingPolicy !== null}
-                  onChange={() => onPick(choice.value)}
-                />{' '}
-                <strong>{choice.label}</strong>
-                {saving && <span className="dim"> · saving…</span>}
-                <p className="muted" style={{ margin: '0.25rem 0 0 1.6rem' }}>
-                  {choice.blurb}
-                </p>
-              </label>
-            );
-          })}
-        </div>
-        {saveError && (
-          <div className="error-banner" style={{ marginTop: '0.5rem' }}>
-            Couldn't save: <code>{saveError}</code>
-          </div>
-        )}
-      </section>
-
-      <section
-        style={{
-          background: 'white',
-          border: '1px solid var(--border)',
-          borderRadius: '8px',
-          padding: '1rem 1.25rem',
-        }}
-      >
-        <h3 style={{ marginTop: 0 }}>Wired agents ({mg.wiredAgents.length})</h3>
-        {mg.wiredAgents.length === 0 ? (
-          <p className="muted" style={{ margin: 0 }}>
-            No agents wired to this group yet. Wire one from <Link to="/channels/new">Channels → New</Link>.
-          </p>
-        ) : (
-          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
-            {mg.wiredAgents.map((wa) => (
-              <li
-                key={wa.messagingGroupAgentId}
-                style={{
-                  borderTop: '1px solid var(--border)',
-                  padding: '0.6rem 0',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '0.5rem',
-                  flexWrap: 'wrap',
-                }}
-              >
-                <Link to={`/groups/${encodeURIComponent(wa.agentGroupFolder)}`}>{wa.agentGroupName}</Link>
-                <span className="tag muted">priority {wa.priority}</span>
-                <span className="dim">
-                  engage <code>{wa.engageMode}</code>
-                  {wa.engagePattern && (
-                    <>
-                      {' '}
-                      · pattern <code>{wa.engagePattern}</code>
-                    </>
-                  )}{' '}
-                  · senders <code>{wa.senderScope}</code> · ignored <code>{wa.ignoredMessagePolicy}</code>
-                </span>
-                <Link
-                  to={`/channels/mga/${encodeURIComponent(wa.messagingGroupAgentId)}`}
-                  style={{ marginLeft: 'auto' }}
-                >
-                  Routing rules →
-                </Link>
-              </li>
-            ))}
-          </ul>
-        )}
-      </section>
-    </div>
-  );
-}

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

@@ -1,390 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { Link, useNavigate } from 'react-router-dom';
-import { ScopeGrants, SCOPE_OPTIONS } from '../components/ScopeGrants.tsx';
-import { VaultPicker } from '../components/VaultPicker.tsx';
-import {
-  checkFolderAvailability,
-  createGroup,
-  fetchFolderSuggestion,
-  type FolderAvailability,
-  type VaultScope,
-} from '../lib/api.ts';
-
-type Step = 'identity' | 'vault' | 'confirm';
-
-export function NewGroupWizard() {
-  const navigate = useNavigate();
-  const [step, setStep] = useState<Step>('identity');
-
-  // Identity.
-  const [name, setName] = useState('');
-  const [folder, setFolder] = useState('');
-  const [folderTouched, setFolderTouched] = useState(false);
-  const [instructions, setInstructions] = useState('');
-  const [folderCheck, setFolderCheck] = useState<FolderAvailability | null>(null);
-  const [folderChecking, setFolderChecking] = useState(false);
-
-  // Vault.
-  const [attachVault, setAttachVault] = useState(false);
-  const [scope, setScope] = useState<VaultScope>('vault:read');
-  // Empty initial value — VaultPicker fills it in with the first registered
-  // vault's URL once /api/vaults resolves, or surfaces a free-text input
-  // when discovery is empty / errors.
-  const [vaultBaseUrl, setVaultBaseUrl] = useState('');
-  const [pickedVaultName, setPickedVaultName] = useState<string | null>(null);
-  const [pasteToken, setPasteToken] = useState('');
-  const [tokenLabel, setTokenLabel] = useState('');
-
-  // Submit.
-  const [submitting, setSubmitting] = useState(false);
-  const [submitError, setSubmitError] = useState<string | null>(null);
-
-  // Suggest a folder slug from the name when the user hasn't typed one.
-  useEffect(() => {
-    if (folderTouched) return;
-    const trimmed = name.trim();
-    if (!trimmed) {
-      setFolder('');
-      return;
-    }
-    let cancelled = false;
-    fetchFolderSuggestion(trimmed)
-      .then((slug) => {
-        if (!cancelled && !folderTouched) setFolder(slug);
-      })
-      .catch(() => {
-        // Suggestion failure is non-fatal; user can type their own.
-      });
-    return () => {
-      cancelled = true;
-    };
-  }, [name, folderTouched]);
-
-  // Debounce folder availability check.
-  const folderCheckTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  useEffect(() => {
-    if (!folder) {
-      setFolderCheck(null);
-      return;
-    }
-    if (folderCheckTimer.current) clearTimeout(folderCheckTimer.current);
-    setFolderChecking(true);
-    folderCheckTimer.current = setTimeout(async () => {
-      try {
-        const result = await checkFolderAvailability(folder);
-        setFolderCheck(result);
-      } catch (err) {
-        setFolderCheck({
-          slug: folder,
-          valid: false,
-          available: false,
-          reason: err instanceof Error ? err.message : String(err),
-        });
-      } finally {
-        setFolderChecking(false);
-      }
-    }, 250);
-    return () => {
-      if (folderCheckTimer.current) clearTimeout(folderCheckTimer.current);
-    };
-  }, [folder]);
-
-  const identityReady =
-    name.trim().length > 0 && folder.length > 0 && folderCheck?.valid === true && folderCheck?.available === true;
-
-  const onFolderChange = useCallback((next: string) => {
-    setFolderTouched(true);
-    setFolder(next);
-  }, []);
-
-  const onCreate = async () => {
-    setSubmitting(true);
-    setSubmitError(null);
-    try {
-      const result = await createGroup(
-        {
-          name: name.trim(),
-          folder,
-          instructions: instructions.trim() || undefined,
-          vault: attachVault
-            ? {
-                scope,
-                vaultBaseUrl: vaultBaseUrl.trim().replace(/\/+$/, ''),
-                tokenLabel: tokenLabel.trim() || undefined,
-                token: pasteToken.trim() || undefined,
-              }
-            : undefined,
-        },
-        {
-          // Same scope-threading as GroupDetail's attach: the create handler
-          // forwards our JWT to the vault for the implicit-mint, and a 403
-          // without this hint would loop on re-auth (paraclaw#56).
-          authExtraScopes:
-            attachVault && pickedVaultName ? [`vault:${pickedVaultName}:admin`] : undefined,
-        },
-      );
-      navigate(`/groups/${encodeURIComponent(result.group.folder)}`);
-    } catch (err) {
-      setSubmitError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setSubmitting(false);
-    }
-  };
-
-  return (
-    <div>
-      <Link to="/" className="muted">
-        ← All groups
-      </Link>
-      <h2 style={{ marginTop: '0.5rem' }}>New agent group</h2>
-      <WizardSteps current={step} />
-
-      {step === 'identity' && (
-        <div className="section">
-          <h3>Identity</h3>
-          <form
-            onSubmit={(e) => {
-              e.preventDefault();
-              if (identityReady) setStep('vault');
-            }}
-          >
-            <div className="row">
-              <label htmlFor="name">Name</label>
-              <input
-                id="name"
-                type="text"
-                value={name}
-                onChange={(e) => setName(e.target.value)}
-                placeholder="e.g. Forge"
-                autoFocus
-              />
-              <p className="dim">The display name. Folder slug is derived from this — you can override below.</p>
-            </div>
-
-            <div className="row">
-              <label htmlFor="folder">Folder slug</label>
-              <input
-                id="folder"
-                type="text"
-                value={folder}
-                onChange={(e) => onFolderChange(e.target.value)}
-                placeholder="e.g. forge"
-              />
-              <FolderHint folder={folder} checking={folderChecking} check={folderCheck} />
-            </div>
-
-            <div className="row">
-              <label htmlFor="instructions">Instructions (optional)</label>
-              <textarea
-                id="instructions"
-                value={instructions}
-                onChange={(e) => setInstructions(e.target.value)}
-                placeholder="Goes into CLAUDE.local.md. Leave blank for the default."
-              />
-              <p className="dim">What the agent should know about itself. Empty = the standard scaffold.</p>
-            </div>
-
-            <div className="actions">
-              <button type="submit" disabled={!identityReady}>
-                Next: vault
-              </button>
-              <Link to="/" className="muted" style={{ marginLeft: '0.5rem' }}>
-                Cancel
-              </Link>
-            </div>
-          </form>
-        </div>
-      )}
-
-      {step === 'vault' && (
-        <div className="section">
-          <h3>Vault attachment</h3>
-          <p className="muted">
-            Attach {pickedVaultName ? <code>{pickedVaultName}</code> : 'a'} parachute vault now, or skip and attach later
-            from the group's detail page.
-          </p>
-
-          <div className="row" style={{ marginTop: '0.5rem' }}>
-            <label className="wizard-toggle">
-              <input type="checkbox" checked={attachVault} onChange={(e) => setAttachVault(e.target.checked)} />
-              <span>Attach vault now</span>
-            </label>
-          </div>
-
-          {attachVault && (
-            <>
-              <div className="row">
-                <label htmlFor="vaultBaseUrl">Vault</label>
-                <VaultPicker
-                  inputId="vaultBaseUrl"
-                  value={vaultBaseUrl}
-                  onChange={setVaultBaseUrl}
-                  onPickedName={setPickedVaultName}
-                />
-              </div>
-
-              <div className="row">
-                <label htmlFor="scope">Scope</label>
-                <select id="scope" value={scope} onChange={(e) => setScope(e.target.value as VaultScope)}>
-                  {SCOPE_OPTIONS.map((s) => (
-                    <option key={s.value} value={s.value}>
-                      {s.label}
-                    </option>
-                  ))}
-                </select>
-                <ScopeGrants scope={scope} />
-              </div>
-
-              <div className="row">
-                <label htmlFor="tokenLabel">Token label</label>
-                <input
-                  id="tokenLabel"
-                  type="text"
-                  value={tokenLabel}
-                  onChange={(e) => setTokenLabel(e.target.value)}
-                  placeholder={`agent-${folder || '<folder>'}`}
-                />
-                <p className="dim">
-                  Used for revocation. Default: <code>agent-{folder || '<folder>'}</code>.
-                </p>
-              </div>
-
-              <div className="row">
-                <label htmlFor="pasteToken">Paste an existing token (optional)</label>
-                <input
-                  id="pasteToken"
-                  type="text"
-                  value={pasteToken}
-                  onChange={(e) => setPasteToken(e.target.value)}
-                  placeholder="pvt_…  (leave blank to mint via the parachute CLI)"
-                />
-                <p className="dim">
-                  When blank, the server runs <code>parachute vault tokens create</code> for you.
-                </p>
-              </div>
-            </>
-          )}
-
-          <div className="actions" style={{ marginTop: '1rem' }}>
-            <button className="secondary" onClick={() => setStep('identity')}>
-              Back
-            </button>
-            <button onClick={() => setStep('confirm')}>Next: confirm</button>
-          </div>
-        </div>
-      )}
-
-      {step === 'confirm' && (
-        <div className="section">
-          <h3>Confirm</h3>
-          <div className="kv">
-            <div>name</div>
-            <div>{name}</div>
-            <div>folder</div>
-            <div>
-              <code>{folder}</code>
-            </div>
-            <div>instructions</div>
-            <div>{instructions.trim() ? <em>(custom)</em> : <span className="dim">default</span>}</div>
-            <div>vault</div>
-            <div>
-              {attachVault ? (
-                <>
-                  <span className="tag">{scope}</span>{' '}
-                  {pickedVaultName ? <code>{pickedVaultName}</code> : null}{' '}
-                  <code>{vaultBaseUrl.trim().replace(/\/+$/, '')}</code>
-                </>
-              ) : (
-                <span className="dim">skip — attach later</span>
-              )}
-            </div>
-            {attachVault && (
-              <>
-                <div>token label</div>
-                <div>
-                  <code>{tokenLabel.trim() || `agent-${folder}`}</code>
-                </div>
-                <div>token</div>
-                <div>
-                  {pasteToken.trim() ? (
-                    <span className="dim">using pasted token</span>
-                  ) : (
-                    <span className="dim">server will mint a fresh token</span>
-                  )}
-                </div>
-              </>
-            )}
-          </div>
-
-          {submitError && (
-            <div className="error-banner" style={{ marginTop: '1rem' }}>
-              {submitError}
-            </div>
-          )}
-
-          <div className="actions" style={{ marginTop: '1rem' }}>
-            <button className="secondary" onClick={() => setStep('vault')} disabled={submitting}>
-              Back
-            </button>
-            <button onClick={onCreate} disabled={submitting}>
-              {submitting ? 'Creating…' : 'Create agent group'}
-            </button>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function FolderHint({
-  folder,
-  checking,
-  check,
-}: {
-  folder: string;
-  checking: boolean;
-  check: FolderAvailability | null;
-}) {
-  if (!folder) {
-    return (
-      <p className="dim">
-        Lowercase letters, digits, and dashes; ≤ 48 chars. Becomes <code>groups/&lt;slug&gt;/</code>.
-      </p>
-    );
-  }
-  if (checking || !check) {
-    return (
-      <p className="dim">
-        Checking <code>{folder}</code>…
-      </p>
-    );
-  }
-  if (!check.valid) {
-    return <p className="wizard-folder-error">{check.reason ?? 'Invalid slug.'}</p>;
-  }
-  if (!check.available) {
-    return <p className="wizard-folder-error">{check.reason ?? 'Already taken.'}</p>;
-  }
-  return (
-    <p className="wizard-folder-ok">
-      <code>groups/{folder}/</code> is available.
-    </p>
-  );
-}
-
-function WizardSteps({ current }: { current: Step }) {
-  const steps: { key: Step; label: string }[] = [
-    { key: 'identity', label: '1. Identity' },
-    { key: 'vault', label: '2. Vault' },
-    { key: 'confirm', label: '3. Confirm' },
-  ];
-  return (
-    <ol className="wizard-steps">
-      {steps.map((s) => (
-        <li key={s.key} className={`wizard-step${s.key === current ? ' active' : ''}`}>
-          {s.label}
-        </li>
-      ))}
-    </ol>
-  );
-}