@openparachute/agent 0.1.0

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

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { StatusDot, formatRelative } from "../components/StatusDot.tsx";
+import { listGroups, type AgentGroupView } from "../lib/api.ts";
+
+const POLL_MS = 7_000;
+// Set ?bypass=1 (or hash #bypass) to suppress the auto-redirect to /setup
+// when no groups exist — useful for inspecting the empty state mid-debug
+// without getting bounced into the wizard. Spec from issue #27.
+function shouldBypassSetup(): boolean {
+  if (typeof window === 'undefined') return false;
+  if (window.location.hash === '#bypass') return true;
+  return new URLSearchParams(window.location.search).has('bypass');
+}
+
+export function GroupList() {
+  const navigate = useNavigate();
+  const [state, setState] = useState<
+    | { kind: "loading" }
+    | { kind: "ok"; groups: AgentGroupView[] }
+    | { kind: "error"; message: string }
+  >({ kind: "loading" });
+  const [reloadKey, setReloadKey] = useState(0);
+
+  const reload = useCallback(() => {
+    setState({ kind: "loading" });
+    setReloadKey((k) => k + 1);
+  }, []);
+
+  // Initial load + manual reload.
+  useEffect(() => {
+    let cancelled = false;
+    listGroups()
+      .then((groups) => {
+        if (cancelled) return;
+        if (groups.length === 0 && !shouldBypassSetup()) {
+          // Fresh install — drop the operator into the setup wizard.
+          // Bypass with /?bypass=1 if you want to see the empty state.
+          navigate('/setup', { replace: true });
+          return;
+        }
+        setState({ kind: "ok", groups });
+      })
+      .catch(
+        (err) =>
+          !cancelled &&
+          setState({
+            kind: "error",
+            message: err instanceof Error ? err.message : String(err),
+          }),
+      );
+    return () => {
+      cancelled = true;
+    };
+  }, [reloadKey, navigate]);
+
+  // Background poll — refresh status without flipping back to loading state.
+  useEffect(() => {
+    if (state.kind !== "ok") return;
+    let cancelled = false;
+    const t = setInterval(() => {
+      listGroups()
+        .then((groups) => {
+          if (!cancelled) setState({ kind: "ok", groups });
+        })
+        .catch(() => {
+          // Polling error is silent — leave the last good snapshot in view.
+        });
+    }, POLL_MS);
+    return () => {
+      cancelled = true;
+      clearInterval(t);
+    };
+  }, [state.kind]);
+
+  if (state.kind === "loading") {
+    return (
+      <div>
+        <h2>Agent groups</h2>
+        <ul className="skeleton-list" aria-busy="true" aria-label="Loading agent groups">
+          <li className="skeleton skeleton-row" />
+          <li className="skeleton skeleton-row" />
+          <li className="skeleton skeleton-row" />
+        </ul>
+      </div>
+    );
+  }
+
+  if (state.kind === "error") {
+    return (
+      <div>
+        <h2>Agent groups</h2>
+        <div className="error-banner">
+          Couldn't load groups: <code>{state.message}</code>
+        </div>
+        <p className="muted">
+          Make sure parachute-agent is running:{" "}
+          <code>parachute start agent</code>, or{" "}
+          <code>bun src/index.ts</code> from the repo root for development.
+          The central DB at <code>~/.parachute/agent/agent.db</code> is
+          created on first start.
+        </p>
+        <div className="actions" style={{ marginTop: "1rem" }}>
+          <button onClick={reload}>Retry</button>
+        </div>
+      </div>
+    );
+  }
+
+  if (state.groups.length === 0) {
+    return (
+      <div>
+        <h2>Agent groups</h2>
+        <div className="empty empty-rich">
+          <p className="empty-headline">No agent groups yet.</p>
+          <p className="muted">
+            Spin up your first agent group in a few clicks — or bootstrap from
+            the CLI if you prefer.
+          </p>
+          <ul className="empty-paths">
+            <li>
+              <strong>New agent wizard</strong> —
+              name + folder + optional vault attach.
+            </li>
+            <li>
+              <strong>Setup wizard</strong> —
+              walk to <code>/setup</code> for prereqs + first channel + agent.
+            </li>
+          </ul>
+          <div className="actions" style={{ justifyContent: "center", marginTop: "1rem" }}>
+            <Link to="/groups/new"><button>+ New agent group</button></Link>
+            <button className="secondary" onClick={reload}>Refresh</button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <div className="list-header">
+        <h2>Agent groups ({state.groups.length})</h2>
+        <Link to="/groups/new"><button>+ New agent group</button></Link>
+      </div>
+      {state.groups.map((g) => (
+        <Link
+          key={g.id}
+          to={`/groups/${encodeURIComponent(g.folder)}`}
+          className="group-row"
+        >
+          <div className="name">
+            <StatusDot status={g.status} />
+            {g.name}
+            {g.vault ? (
+              <span className="tag">{g.vault.scope}</span>
+            ) : (
+              <span className="tag muted">no vault</span>
+            )}
+          </div>
+          <div className="meta">
+            folder: <code>{g.folder}</code>
+            {g.agent_provider && (
+              <> &middot; provider: <code>{g.agent_provider}</code></>
+            )}
+            {g.status && g.status.containerRunning && (
+              <> &middot; <span className="status-text alive">
+                {g.status.activeSessionCount} session{g.status.activeSessionCount === 1 ? "" : "s"} alive
+              </span></>
+            )}
+            {g.status && !g.status.containerRunning && g.status.lastHeartbeatAt && (
+              <> &middot; <span className="status-text idle">
+                idle &middot; last active {formatRelative(g.status.lastHeartbeatAt)}
+              </span></>
+            )}
+            {g.vault && (
+              <>
+                {" "}
+                &middot; vault:{" "}
+                <code>{g.vault.vaultBaseUrl}</code>
+              </>
+            )}
+          </div>
+        </Link>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,233 @@
+/**
+ * MessagingGroupDetail tests cover the contracts the design doc names:
+ *   1. The 3-radio renders all policies; the row matching the DB is selected.
+ *   2. Picking a different radio triggers updateMessagingGroupPolicy and
+ *      reflects the new value back in the radio state.
+ *   3. Server 404 surfaces as the "no channel" 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. Wired-agents block renders one row per MGA and links to the agent
+ *      group's folder.
+ *
+ * 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 { MessagingGroupDetail } from './MessagingGroupDetail.tsx';
+
+vi.mock('../lib/api.ts', async () => {
+  const actual = await vi.importActual<typeof api>('../lib/api.ts');
+  return {
+    ...actual,
+    getMessagingGroupDetail: vi.fn(),
+    updateMessagingGroupPolicy: vi.fn(),
+  };
+});
+
+function renderAt(path: string) {
+  return render(
+    <MemoryRouter initialEntries={[path]}>
+      <Routes>
+        <Route path="/channels/mg/:id" element={<MessagingGroupDetail />} />
+        <Route path="/channels" element={<div>channels list</div>} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+const baseDetail: api.MessagingGroupDetailView = {
+  id: 'mg_1',
+  channelType: 'telegram',
+  platformId: 'telegram:111111:222222',
+  displayName: 'Aaron DM',
+  isGroup: false,
+  unknownSenderPolicy: 'request_approval',
+  deniedAt: null,
+  createdAt: '2026-04-20T10:00:00Z',
+  wiredAgents: [
+    {
+      messagingGroupAgentId: 'mga_1',
+      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.getMessagingGroupDetail).mockResolvedValue(baseDetail);
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('MessagingGroupDetail — render', () => {
+  it('renders the 3-radio policy editor with the DB value selected', async () => {
+    renderAt('/channels/mg/mg_1');
+
+    await waitFor(() => {
+      expect(screen.getByText('Unknown-sender policy')).toBeInTheDocument();
+    });
+
+    const requestRadio = screen.getByRole('radio', { name: /Request approval/ });
+    const strictRadio = screen.getByRole('radio', { name: /Strict/ });
+    const publicRadio = screen.getByRole('radio', { name: /Public/ });
+
+    expect(requestRadio).toBeChecked();
+    expect(strictRadio).not.toBeChecked();
+    expect(publicRadio).not.toBeChecked();
+  });
+
+  it('renders MG metadata block', async () => {
+    renderAt('/channels/mg/mg_1');
+
+    await waitFor(() => {
+      expect(screen.getByText('Group details')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('telegram:111111:222222')).toBeInTheDocument();
+    expect(screen.getByText('direct message')).toBeInTheDocument();
+    expect(screen.getByText('Aaron DM')).toBeInTheDocument();
+  });
+
+  it('renders wired-agents section with link to agent group folder', async () => {
+    renderAt('/channels/mg/mg_1');
+
+    await waitFor(() => {
+      expect(screen.getByText('Wired agents (1)')).toBeInTheDocument();
+    });
+
+    const link = screen.getByRole('link', { name: 'Main agent' });
+    expect(link).toHaveAttribute('href', '/groups/main');
+  });
+
+  it('renders empty wired-agents state when none exist', async () => {
+    vi.mocked(api.getMessagingGroupDetail).mockResolvedValue({
+      ...baseDetail,
+      wiredAgents: [],
+    });
+
+    renderAt('/channels/mg/mg_1');
+
+    await waitFor(() => {
+      expect(screen.getByText('Wired agents (0)')).toBeInTheDocument();
+    });
+    expect(screen.getByText(/No agents wired to this group yet/)).toBeInTheDocument();
+  });
+
+  it('shows the denied-at banner when set', async () => {
+    vi.mocked(api.getMessagingGroupDetail).mockResolvedValue({
+      ...baseDetail,
+      deniedAt: '2026-04-25T00:00:00Z',
+    });
+
+    renderAt('/channels/mg/mg_1');
+
+    await waitFor(() => {
+      expect(screen.getByText(/Denied channel\./)).toBeInTheDocument();
+    });
+    expect(screen.getByText('2026-04-25T00:00:00Z')).toBeInTheDocument();
+  });
+});
+
+describe('MessagingGroupDetail — policy edit', () => {
+  it('calls updateMessagingGroupPolicy and updates the radio when the operator picks a new value', async () => {
+    vi.mocked(api.updateMessagingGroupPolicy).mockResolvedValue({
+      ...baseDetail,
+      unknownSenderPolicy: 'public',
+    });
+
+    const user = userEvent.setup();
+    renderAt('/channels/mg/mg_1');
+
+    await waitFor(() => {
+      expect(screen.getByRole('radio', { name: /Request approval/ })).toBeChecked();
+    });
+
+    await user.click(screen.getByRole('radio', { name: /Public/ }));
+
+    await waitFor(() => {
+      expect(api.updateMessagingGroupPolicy).toHaveBeenCalledWith('mg_1', 'public');
+    });
+
+    await waitFor(() => {
+      expect(screen.getByRole('radio', { name: /Public/ })).toBeChecked();
+    });
+    expect(screen.getByRole('radio', { name: /Request approval/ })).not.toBeChecked();
+  });
+
+  it('does not call the API when the operator clicks the already-selected policy', async () => {
+    const user = userEvent.setup();
+    renderAt('/channels/mg/mg_1');
+
+    await waitFor(() => {
+      expect(screen.getByRole('radio', { name: /Request approval/ })).toBeChecked();
+    });
+
+    await user.click(screen.getByRole('radio', { name: /Request approval/ }));
+
+    // Give any async work a tick to fire — none should.
+    await new Promise((r) => setTimeout(r, 0));
+    expect(api.updateMessagingGroupPolicy).not.toHaveBeenCalled();
+  });
+
+  it('surfaces an error banner when the PATCH fails', async () => {
+    vi.mocked(api.updateMessagingGroupPolicy).mockRejectedValue(
+      new api.HttpError(400, 'invalid unknownSenderPolicy: open'),
+    );
+
+    const user = userEvent.setup();
+    renderAt('/channels/mg/mg_1');
+
+    await waitFor(() => {
+      expect(screen.getByRole('radio', { name: /Request approval/ })).toBeChecked();
+    });
+
+    await user.click(screen.getByRole('radio', { name: /Strict/ }));
+
+    await waitFor(() => {
+      expect(screen.getByText(/Couldn't save:/)).toBeInTheDocument();
+    });
+    expect(screen.getByText(/invalid unknownSenderPolicy: open/)).toBeInTheDocument();
+    // The radio should still reflect the DB value, not the rejected pick.
+    expect(screen.getByRole('radio', { name: /Request approval/ })).toBeChecked();
+  });
+});
+
+describe('MessagingGroupDetail — error states', () => {
+  it('renders 404 empty state with Back CTA only', async () => {
+    vi.mocked(api.getMessagingGroupDetail).mockRejectedValue(
+      new api.HttpError(404, 'messaging group not found: mg_missing'),
+    );
+
+    renderAt('/channels/mg/mg_missing');
+
+    await waitFor(() => {
+      expect(screen.getByText(/No channel 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.getMessagingGroupDetail).mockRejectedValue(new api.HttpError(500, 'internal'));
+
+    renderAt('/channels/mg/mg_1');
+
+    await waitFor(() => {
+      expect(screen.getByText(/Couldn't load this channel/)).toBeInTheDocument();
+    });
+    expect(screen.getByRole('button', { name: 'Retry' })).toBeInTheDocument();
+  });
+});