@openparachute/agent 0.1.0

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

@@ -0,0 +1,233 @@
+/**
+ * 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: 'all',
+  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: 'all',
+        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

@@ -0,0 +1,403 @@
+/**
+ * /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="all">all — 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>
+  );
+}