@openparachute/agent 0.1.2 → 0.2.2

package/web/ui/src/routes/ChannelWireDetail.test.tsx

@@ -1,233 +0,0 @@
-/**
- * ChannelWireDetail tests cover the contracts the design doc names for
- * the per-MGA route:
- *   1. The 3-radio engage-mode editor renders all options; the row matching
- *      the DB is selected. "Only when mentioned" is the surface for Aaron's
- *      "respond only to mentions" toggle.
- *   2. Saving the form calls updateChannelWire with the right input shape
- *      and reflects the new wire state back in the form.
- *   3. Server 404 surfaces as the "no wire" empty state with a Back CTA
- *      (no Retry — there's nothing to come back from).
- *   4. Unknown errors surface as the load-error banner with a Retry button.
- *   5. Metadata block links back to the parent /channels/mg/:id route and
- *      to the /groups/:folder route.
- *   6. Delete confirms via window.confirm and calls deleteChannelWire.
- *
- * The api module is mocked so we don't need a live server.
- */
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-
-import * as api from '../lib/api.ts';
-import { ChannelWireDetail } from './ChannelWireDetail.tsx';
-
-vi.mock('../lib/api.ts', async () => {
-  const actual = await vi.importActual<typeof api>('../lib/api.ts');
-  return {
-    ...actual,
-    getChannelWireDetail: vi.fn(),
-    updateChannelWire: vi.fn(),
-    deleteChannelWire: vi.fn(),
-  };
-});
-
-function renderAt(path: string) {
-  return render(
-    <MemoryRouter initialEntries={[path]}>
-      <Routes>
-        <Route path="/channels/mga/:id" element={<ChannelWireDetail />} />
-        <Route path="/channels" element={<div>channels list</div>} />
-      </Routes>
-    </MemoryRouter>,
-  );
-}
-
-const baseWire: api.ChannelWireView = {
-  id: 'mga_1',
-  channelType: 'telegram',
-  messagingGroupId: 'mg_1',
-  platformId: 'telegram:111111:222222',
-  displayName: 'Aaron DM',
-  agentGroupId: 'ag_1',
-  agentGroupFolder: 'main',
-  agentGroupName: 'Main agent',
-  engageMode: 'mention',
-  engagePattern: null,
-  senderScope: 'unrestricted',
-  ignoredMessagePolicy: 'drop',
-  priority: 0,
-  createdAt: '2026-04-20T10:00:00Z',
-};
-
-beforeEach(() => {
-  vi.mocked(api.getChannelWireDetail).mockResolvedValue(baseWire);
-});
-
-afterEach(() => {
-  vi.clearAllMocks();
-});
-
-describe('ChannelWireDetail — render', () => {
-  it('renders the engage-mode radios with the DB value selected', async () => {
-    renderAt('/channels/mga/mga_1');
-
-    await waitFor(() => {
-      expect(screen.getByText('Routing rules')).toBeInTheDocument();
-    });
-
-    const mention = screen.getByRole('radio', { name: /Only when mentioned/ });
-    const all = screen.getByRole('radio', { name: /Every message/ });
-    const pattern = screen.getByRole('radio', { name: /Pattern match/ });
-
-    expect(mention).toBeChecked();
-    expect(all).not.toBeChecked();
-    expect(pattern).not.toBeChecked();
-  });
-
-  it('shows the regex input only when pattern mode is selected', async () => {
-    vi.mocked(api.getChannelWireDetail).mockResolvedValue({
-      ...baseWire,
-      engageMode: 'pattern',
-      engagePattern: '^/ask\\b',
-    });
-    renderAt('/channels/mga/mga_1');
-
-    await waitFor(() => {
-      expect(screen.getByLabelText(/Engage pattern/)).toBeInTheDocument();
-    });
-    expect(screen.getByLabelText(/Engage pattern/)).toHaveValue('^/ask\\b');
-  });
-
-  it('renders the metadata block with links back to MG and to the agent group', async () => {
-    renderAt('/channels/mga/mga_1');
-
-    await waitFor(() => {
-      expect(screen.getByText('Wire details')).toBeInTheDocument();
-    });
-
-    const mgLink = screen.getByRole('link', { name: 'mg_1' });
-    expect(mgLink).toHaveAttribute('href', '/channels/mg/mg_1');
-
-    const groupLinks = screen.getAllByRole('link', { name: 'Main agent' });
-    expect(groupLinks[0]).toHaveAttribute('href', '/groups/main');
-  });
-});
-
-describe('ChannelWireDetail — save', () => {
-  it('calls updateChannelWire with the engage-mode change', async () => {
-    vi.mocked(api.updateChannelWire).mockResolvedValue({
-      ...baseWire,
-      engageMode: 'all',
-    });
-
-    const user = userEvent.setup();
-    renderAt('/channels/mga/mga_1');
-
-    await waitFor(() => {
-      expect(screen.getByRole('radio', { name: /Only when mentioned/ })).toBeChecked();
-    });
-
-    await user.click(screen.getByRole('radio', { name: /Every message/ }));
-    await user.click(screen.getByRole('button', { name: /Save routing rules/ }));
-
-    await waitFor(() => {
-      expect(api.updateChannelWire).toHaveBeenCalledWith('mga_1', {
-        engageMode: 'all',
-        engagePattern: null,
-        senderScope: 'unrestricted',
-        ignoredMessagePolicy: 'drop',
-        priority: 0,
-      });
-    });
-
-    await waitFor(() => {
-      expect(screen.getByRole('radio', { name: /Every message/ })).toBeChecked();
-    });
-  });
-
-  it('surfaces an error banner when the PATCH fails', async () => {
-    vi.mocked(api.updateChannelWire).mockRejectedValue(new api.HttpError(400, 'invalid engageMode: xyz'));
-
-    const user = userEvent.setup();
-    renderAt('/channels/mga/mga_1');
-
-    await waitFor(() => {
-      expect(screen.getByRole('radio', { name: /Only when mentioned/ })).toBeChecked();
-    });
-
-    await user.click(screen.getByRole('radio', { name: /Every message/ }));
-    await user.click(screen.getByRole('button', { name: /Save routing rules/ }));
-
-    await waitFor(() => {
-      expect(screen.getByText(/Couldn't save:/)).toBeInTheDocument();
-    });
-    expect(screen.getByText(/invalid engageMode: xyz/)).toBeInTheDocument();
-  });
-});
-
-describe('ChannelWireDetail — delete', () => {
-  it('calls deleteChannelWire after confirm', async () => {
-    vi.mocked(api.deleteChannelWire).mockResolvedValue(undefined);
-    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(true);
-
-    const user = userEvent.setup();
-    renderAt('/channels/mga/mga_1');
-
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: /Remove wire/ })).toBeInTheDocument();
-    });
-
-    await user.click(screen.getByRole('button', { name: /Remove wire/ }));
-
-    await waitFor(() => {
-      expect(api.deleteChannelWire).toHaveBeenCalledWith('mga_1');
-    });
-
-    confirmSpy.mockRestore();
-  });
-
-  it('does not call deleteChannelWire when confirm is dismissed', async () => {
-    const confirmSpy = vi.spyOn(window, 'confirm').mockReturnValue(false);
-
-    const user = userEvent.setup();
-    renderAt('/channels/mga/mga_1');
-
-    await waitFor(() => {
-      expect(screen.getByRole('button', { name: /Remove wire/ })).toBeInTheDocument();
-    });
-
-    await user.click(screen.getByRole('button', { name: /Remove wire/ }));
-
-    expect(api.deleteChannelWire).not.toHaveBeenCalled();
-    confirmSpy.mockRestore();
-  });
-});
-
-describe('ChannelWireDetail — error states', () => {
-  it('renders 404 empty state with Back CTA only', async () => {
-    vi.mocked(api.getChannelWireDetail).mockRejectedValue(
-      new api.HttpError(404, 'channel wire not found: mga_missing'),
-    );
-
-    renderAt('/channels/mga/mga_missing');
-
-    await waitFor(() => {
-      expect(screen.getByText(/No wire with id/)).toBeInTheDocument();
-    });
-    expect(screen.getByRole('button', { name: 'Back to channels' })).toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: 'Retry' })).not.toBeInTheDocument();
-  });
-
-  it('renders generic load error with Retry button on non-404', async () => {
-    vi.mocked(api.getChannelWireDetail).mockRejectedValue(new api.HttpError(500, 'internal'));
-
-    renderAt('/channels/mga/mga_1');
-
-    await waitFor(() => {
-      expect(screen.getByText(/Couldn't load this wire/)).toBeInTheDocument();
-    });
-    expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument();
-  });
-});

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

@@ -1,403 +0,0 @@
-/**
- * /channels/mga/:id — per-wire (messaging-group ↔ agent-group) detail +
- * routing-rules editor.
- *
- * What's here:
- *   - read-only metadata (linked target group, parent messaging group, channel,
- *     platform id, priority, created)
- *   - the routing rules editor: engage mode (mention | all | pattern), pattern,
- *     sender scope, ignored-message policy, priority
- *   - delete-wire action with native confirm
- *
- * The MGA-id is a UUID generated server-side; the disambiguation prefix
- * `mga/` keeps the route clean against per-MG routes (`mg/`).
- *
- * `engageMode = 'mention'` is the surface for "respond only to mentions".
- * The DB-side enum has a third state `mention-sticky` that the server
- * collapses to `'mention'` for display and preserves on PATCH so a future
- * sticky-aware editor doesn't silently downgrade existing wires.
- */
-import { useCallback, useEffect, useState } from 'react';
-import { Link, useParams } from 'react-router-dom';
-import {
-  deleteChannelWire,
-  getChannelWireDetail,
-  HttpError,
-  updateChannelWire,
-  type ChannelWireView,
-  type EngageMode,
-  type IgnoredMessagePolicy,
-  type SenderScope,
-  type UpdateChannelWireInput,
-} from '../lib/api.ts';
-
-type State =
-  | { kind: 'loading' }
-  | { kind: 'ok'; wire: ChannelWireView }
-  | { kind: 'error'; status: number | null; message: string };
-
-export function ChannelWireDetail() {
-  const { id: rawId } = useParams<{ id: string }>();
-  const id = rawId ?? '';
-  const [state, setState] = useState<State>({ kind: 'loading' });
-  const [reloadKey, setReloadKey] = useState(0);
-  const [saving, setSaving] = useState(false);
-  const [saveError, setSaveError] = useState<string | null>(null);
-  const [deleting, setDeleting] = useState(false);
-
-  const reload = useCallback(() => setReloadKey((k) => k + 1), []);
-
-  useEffect(() => {
-    if (!id) {
-      setState({ kind: 'error', status: null, message: 'no wire id in URL' });
-      return;
-    }
-    let cancelled = false;
-    getChannelWireDetail(id)
-      .then((wire) => !cancelled && setState({ kind: 'ok', wire }))
-      .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]);
-
-  if (state.kind === 'loading') {
-    return (
-      <div>
-        <h2>Channel wire</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 wire</h2>
-        <div className="error-banner">
-          {state.status === 404 ? (
-            <>
-              No wire with id <code>{id}</code> — it may have been removed.
-            </>
-          ) : (
-            <>
-              Couldn't load this wire: <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 { wire } = state;
-
-  const onSave = async (input: UpdateChannelWireInput) => {
-    setSaving(true);
-    setSaveError(null);
-    try {
-      const updated = await updateChannelWire(id, input);
-      setState({ kind: 'ok', wire: updated });
-    } catch (err) {
-      setSaveError(err instanceof Error ? err.message : String(err));
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const onDelete = async () => {
-    if (
-      !confirm(
-        `Remove ${wire.channelType} wire to ${wire.agentGroupName}? Inbound messages on this thread will fall back to the unwired-channel guard (silently dropped).`,
-      )
-    ) {
-      return;
-    }
-    setDeleting(true);
-    setSaveError(null);
-    try {
-      await deleteChannelWire(id);
-      setState({ kind: 'error', status: 404, message: 'wire deleted' });
-    } catch (err) {
-      setSaveError(err instanceof Error ? err.message : String(err));
-      setDeleting(false);
-    }
-  };
-
-  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' }}>{wire.channelType}</span>
-          <span className="dim">→</span>
-          <Link to={`/groups/${encodeURIComponent(wire.agentGroupFolder)}`}>{wire.agentGroupName}</Link>
-        </h2>
-      </div>
-
-      <section
-        style={{
-          background: 'white',
-          border: '1px solid var(--border)',
-          borderRadius: '8px',
-          padding: '1rem 1.25rem',
-          marginBottom: '1rem',
-        }}
-      >
-        <h3 style={{ marginTop: 0 }}>Wire details</h3>
-        <div className="kv">
-          <div>id</div>
-          <div>
-            <code>{wire.id}</code>
-          </div>
-          <div>channel</div>
-          <div style={{ textTransform: 'capitalize' }}>{wire.channelType}</div>
-          <div>messaging group</div>
-          <div>
-            <Link to={`/channels/mg/${encodeURIComponent(wire.messagingGroupId)}`}>
-              <code>{wire.messagingGroupId}</code>
-            </Link>
-            {wire.displayName && <span className="dim"> · {wire.displayName}</span>}
-          </div>
-          <div>platform id</div>
-          <div>
-            <code>{wire.platformId}</code>
-          </div>
-          <div>agent group</div>
-          <div>
-            <Link to={`/groups/${encodeURIComponent(wire.agentGroupFolder)}`}>{wire.agentGroupName}</Link>
-          </div>
-          <div>created</div>
-          <div>
-            <code>{wire.createdAt}</code>
-          </div>
-        </div>
-      </section>
-
-      <RoutingRulesEditor wire={wire} saving={saving} onSave={onSave} />
-
-      {saveError && (
-        <div className="error-banner" style={{ marginTop: '0.5rem' }}>
-          Couldn't save: <code>{saveError}</code>
-        </div>
-      )}
-
-      <section
-        style={{
-          background: 'white',
-          border: '1px solid var(--border)',
-          borderRadius: '8px',
-          padding: '1rem 1.25rem',
-          marginTop: '1rem',
-        }}
-      >
-        <h3 style={{ marginTop: 0 }}>Danger zone</h3>
-        <p className="muted">
-          Removing this wire stops the agent from receiving inbound messages on this thread. The messaging group itself
-          stays — you can re-wire it later from <Link to="/channels/new">Channels → New</Link>.
-        </p>
-        <button
-          className="secondary"
-          onClick={onDelete}
-          disabled={deleting || saving}
-          style={{ borderColor: 'var(--error)', color: 'var(--error)' }}
-        >
-          {deleting ? 'Removing…' : 'Remove wire'}
-        </button>
-      </section>
-    </div>
-  );
-}
-
-interface EngageChoice {
-  value: EngageMode;
-  label: string;
-  blurb: string;
-}
-
-const ENGAGE_CHOICES: EngageChoice[] = [
-  {
-    value: 'mention',
-    label: 'Only when mentioned',
-    blurb: 'The agent responds only when @-tagged. Best for shared channels where the agent is one of many participants.',
-  },
-  {
-    value: 'all',
-    label: 'Every message',
-    blurb: 'The agent responds to every message in this thread. Right for DMs and dedicated channels.',
-  },
-  {
-    value: 'pattern',
-    label: 'Pattern match',
-    blurb: 'The agent responds when the message text matches a regex. Use for command-prefix channels (e.g. ^/ask\\b).',
-  },
-];
-
-function RoutingRulesEditor({
-  wire,
-  saving,
-  onSave,
-}: {
-  wire: ChannelWireView;
-  saving: boolean;
-  onSave: (input: UpdateChannelWireInput) => void;
-}) {
-  const [engageMode, setEngageMode] = useState<EngageMode>(wire.engageMode);
-  const [engagePattern, setEngagePattern] = useState(wire.engagePattern ?? '');
-  const [senderScope, setSenderScope] = useState<SenderScope>(wire.senderScope);
-  const [ignoredMessagePolicy, setIgnoredMessagePolicy] = useState<IgnoredMessagePolicy>(wire.ignoredMessagePolicy);
-  const [priority, setPriority] = useState(String(wire.priority));
-
-  useEffect(() => {
-    setEngageMode(wire.engageMode);
-    setEngagePattern(wire.engagePattern ?? '');
-    setSenderScope(wire.senderScope);
-    setIgnoredMessagePolicy(wire.ignoredMessagePolicy);
-    setPriority(String(wire.priority));
-  }, [wire]);
-
-  const onSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    const parsedPriority = Number.parseInt(priority, 10);
-    onSave({
-      engageMode,
-      engagePattern: engageMode === 'pattern' ? engagePattern.trim() || null : null,
-      senderScope,
-      ignoredMessagePolicy,
-      priority: Number.isFinite(parsedPriority) ? parsedPriority : wire.priority,
-    });
-  };
-
-  return (
-    <form
-      onSubmit={onSubmit}
-      style={{
-        background: 'white',
-        border: '1px solid var(--border)',
-        borderRadius: '8px',
-        padding: '1rem 1.25rem',
-        marginBottom: '1rem',
-      }}
-    >
-      <h3 style={{ marginTop: 0 }}>Routing rules</h3>
-
-      <div role="radiogroup" aria-label="Engage mode" style={{ marginBottom: '1rem' }}>
-        <label htmlFor="engageMode-mention" className="muted" style={{ display: 'block', marginBottom: '0.4rem' }}>
-          When should this agent engage?
-        </label>
-        {ENGAGE_CHOICES.map((choice) => {
-          const selected = engageMode === choice.value;
-          return (
-            <label
-              key={choice.value}
-              htmlFor={`engageMode-${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: saving ? 'progress' : 'pointer',
-                marginBottom: '0.4rem',
-              }}
-            >
-              <input
-                id={`engageMode-${choice.value}`}
-                type="radio"
-                name="engageMode"
-                value={choice.value}
-                checked={selected}
-                disabled={saving}
-                onChange={() => setEngageMode(choice.value)}
-              />{' '}
-              <strong>{choice.label}</strong>
-              <p className="muted" style={{ margin: '0.25rem 0 0 1.6rem' }}>
-                {choice.blurb}
-              </p>
-            </label>
-          );
-        })}
-      </div>
-
-      {engageMode === 'pattern' && (
-        <div className="row">
-          <label htmlFor="engagePattern">Engage pattern (regex)</label>
-          <input
-            id="engagePattern"
-            type="text"
-            value={engagePattern}
-            onChange={(e) => setEngagePattern(e.target.value)}
-            placeholder="^/ask\b"
-            disabled={saving}
-          />
-        </div>
-      )}
-
-      <div className="row">
-        <label htmlFor="senderScope">Who can talk to this agent?</label>
-        <select
-          id="senderScope"
-          value={senderScope}
-          onChange={(e) => setSenderScope(e.target.value as SenderScope)}
-          disabled={saving}
-        >
-          <option value="unrestricted">unrestricted — anyone in the thread</option>
-          <option value="allowlist">allowlist — only members of the agent group</option>
-        </select>
-      </div>
-
-      <div className="row">
-        <label htmlFor="ignoredMessagePolicy">What about messages the agent ignores?</label>
-        <select
-          id="ignoredMessagePolicy"
-          value={ignoredMessagePolicy}
-          onChange={(e) => setIgnoredMessagePolicy(e.target.value as IgnoredMessagePolicy)}
-          disabled={saving}
-        >
-          <option value="drop">drop — discard, no record</option>
-          <option value="silent">silent — log them in the conversation but don't reply</option>
-        </select>
-      </div>
-
-      <div className="row">
-        <label htmlFor="priority">Priority</label>
-        <input
-          id="priority"
-          type="number"
-          value={priority}
-          onChange={(e) => setPriority(e.target.value)}
-          disabled={saving}
-          style={{ width: '6rem' }}
-        />
-        <p className="dim" style={{ marginTop: '0.25rem', fontSize: '0.8rem' }}>
-          Higher wins when multiple wires could match the same inbound.
-        </p>
-      </div>
-
-      <div className="actions">
-        <button type="submit" disabled={saving}>
-          {saving ? 'Saving…' : 'Save routing rules'}
-        </button>
-      </div>
-    </form>
-  );
-}