@openparachute/agent 0.1.2 → 0.2.0

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

@@ -1,187 +0,0 @@
-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

@@ -1,233 +0,0 @@
-/**
- * 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: 'unrestricted',
-      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();
-  });
-});