@openparachute/agent 0.1.0

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

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

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