@openparachute/agent 0.1.1 → 0.1.2

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

@@ -0,0 +1,206 @@
+/**
+ * GroupDetail "Secrets" panel — paraclaw#104.
+ *
+ * Asserts the three contracts the panel must hold:
+ *   1. Each row's `scope` field renders a visible badge (`scoped` / `assigned`
+ *      / `global`). Drift between badge text and panel intent would defeat
+ *      the entire point of #104.
+ *   2. Empty state distinguishes between mode='selective' (read as "by
+ *      design") and mode='all' (read as "create a secret").
+ *   3. Click-through builds `/secrets?edit=<id>`. SecretsList's deep-link
+ *      handler is exercised separately; we just check the link target.
+ *
+ * Tests mock the api module — no live server, no auth state needed.
+ */
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+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 { GroupDetail } from './GroupDetail.tsx';
+
+vi.mock('../lib/api.ts', async () => {
+  const actual = await vi.importActual<typeof api>('../lib/api.ts');
+  return {
+    ...actual,
+    getGroup: vi.fn(),
+    getGroupAgentProvider: vi.fn(),
+    listGroupInjectableSecrets: vi.fn(),
+  };
+});
+
+function renderAt(path: string) {
+  return render(
+    <MemoryRouter initialEntries={[path]}>
+      <Routes>
+        <Route path="/groups/:folder" element={<GroupDetail />} />
+      </Routes>
+    </MemoryRouter>,
+  );
+}
+
+const baseGroup: api.AgentGroupView = {
+  id: 'g1',
+  name: 'research',
+  folder: 'research',
+  agent_provider: null,
+  secret_mode: 'all',
+  created_at: '2026-04-20T10:00:00Z',
+  vault: null,
+  status: null,
+};
+
+const emptyProvider: api.AgentProviderView = {
+  source: null,
+  hasApiKey: false,
+  serverUrl: null,
+  updatedAt: null,
+};
+
+beforeEach(() => {
+  vi.mocked(api.getGroupAgentProvider).mockResolvedValue({
+    agentGroupId: 'g1',
+    overridden: false,
+    override: emptyProvider,
+    effective: emptyProvider,
+  });
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('GroupDetail — Secrets panel (paraclaw#104)', () => {
+  it('renders one badge per scope (scoped / assigned / global)', async () => {
+    vi.mocked(api.getGroup).mockResolvedValue({ ...baseGroup, secret_mode: 'all' });
+    vi.mocked(api.listGroupInjectableSecrets).mockResolvedValue([
+      {
+        id: 'sec-scoped',
+        name: 'SCOPED_TOKEN',
+        kind: 'channel-token',
+        agentGroupId: 'g1',
+        scope: 'scoped',
+        createdAt: '2026-05-01T00:00:00Z',
+        updatedAt: '2026-05-01T00:00:00Z',
+      },
+      {
+        id: 'sec-assigned',
+        name: 'ASSIGNED_TOKEN',
+        kind: 'api-key',
+        agentGroupId: null,
+        scope: 'assigned',
+        createdAt: '2026-05-01T00:00:00Z',
+        updatedAt: '2026-05-01T00:00:00Z',
+      },
+      {
+        id: 'sec-global',
+        name: 'GLOBAL_TOKEN',
+        kind: 'generic',
+        agentGroupId: null,
+        scope: 'global',
+        createdAt: '2026-05-01T00:00:00Z',
+        updatedAt: '2026-05-01T00:00:00Z',
+      },
+    ]);
+
+    renderAt('/groups/research');
+
+    await waitFor(() => {
+      expect(screen.getByText('SCOPED_TOKEN')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('SCOPED_TOKEN')).toBeInTheDocument();
+    expect(screen.getByText('ASSIGNED_TOKEN')).toBeInTheDocument();
+    expect(screen.getByText('GLOBAL_TOKEN')).toBeInTheDocument();
+
+    // Each scope label appears exactly once — the badge text must match the
+    // wire `scope` field one-to-one.
+    expect(screen.getByText('scoped')).toBeInTheDocument();
+    expect(screen.getByText('assigned')).toBeInTheDocument();
+    expect(screen.getByText('global')).toBeInTheDocument();
+  });
+
+  it('click-through targets /secrets?edit=<id>', async () => {
+    vi.mocked(api.getGroup).mockResolvedValue({ ...baseGroup, secret_mode: 'all' });
+    vi.mocked(api.listGroupInjectableSecrets).mockResolvedValue([
+      {
+        id: 'sec-1',
+        name: 'TOKEN',
+        kind: 'generic',
+        agentGroupId: 'g1',
+        scope: 'scoped',
+        createdAt: '2026-05-01T00:00:00Z',
+        updatedAt: '2026-05-01T00:00:00Z',
+      },
+    ]);
+
+    renderAt('/groups/research');
+
+    await waitFor(() => {
+      expect(screen.getByText('TOKEN')).toBeInTheDocument();
+    });
+
+    const link = screen.getByText('TOKEN').closest('a');
+    expect(link).toHaveAttribute('href', '/secrets?edit=sec-1');
+  });
+
+  it('empty state under selective mode reads as by-design, not broken', async () => {
+    vi.mocked(api.getGroup).mockResolvedValue({ ...baseGroup, secret_mode: 'selective' });
+    vi.mocked(api.listGroupInjectableSecrets).mockResolvedValue([]);
+
+    renderAt('/groups/research');
+
+    await waitFor(() => {
+      expect(screen.getByText(/No secrets reach this group/)).toBeInTheDocument();
+    });
+
+    // selective-mode copy mentions assignment rows, not "create a secret".
+    expect(screen.getByText(/explicit assignment row/)).toBeInTheDocument();
+  });
+
+  it('empty state under mode=all suggests creating a secret', async () => {
+    vi.mocked(api.getGroup).mockResolvedValue({ ...baseGroup, secret_mode: 'all' });
+    vi.mocked(api.listGroupInjectableSecrets).mockResolvedValue([]);
+
+    renderAt('/groups/research');
+
+    await waitFor(() => {
+      expect(screen.getByText(/No secrets reach this group/)).toBeInTheDocument();
+    });
+
+    expect(screen.getByText(/Create a scoped secret/)).toBeInTheDocument();
+  });
+
+  it('error state surfaces a Retry button that re-invokes the fetch (paraclaw#128)', async () => {
+    vi.mocked(api.getGroup).mockResolvedValue({ ...baseGroup, secret_mode: 'all' });
+    vi.mocked(api.listGroupInjectableSecrets)
+      .mockRejectedValueOnce(new Error('boom: transient 500'))
+      .mockResolvedValueOnce([
+        {
+          id: 'sec-1',
+          name: 'TOKEN',
+          kind: 'generic',
+          agentGroupId: 'g1',
+          scope: 'scoped',
+          createdAt: '2026-05-01T00:00:00Z',
+          updatedAt: '2026-05-01T00:00:00Z',
+        },
+      ]);
+
+    renderAt('/groups/research');
+
+    await waitFor(() => {
+      expect(screen.getByText(/Couldn't load secrets/)).toBeInTheDocument();
+    });
+    expect(screen.getByText('boom: transient 500')).toBeInTheDocument();
+
+    const retry = screen.getByRole('button', { name: 'Retry' });
+    fireEvent.click(retry);
+
+    await waitFor(() => {
+      expect(screen.getByText('TOKEN')).toBeInTheDocument();
+    });
+    expect(screen.queryByText(/Couldn't load secrets/)).not.toBeInTheDocument();
+    expect(api.listGroupInjectableSecrets).toHaveBeenCalledTimes(2);
+  });
+});

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

@@ -12,12 +12,15 @@ import {
   detachVault,
   getGroup,
   getGroupAgentProvider,
+  listGroupInjectableSecrets,
   setGroupAgentProvider,
   spawnSession,
   type AgentGroupView,
   type AgentProviderSource,
   type GroupAgentProviderView,
   type GroupStatus,
+  type InjectableSecretView,
+  type SecretInclusionScope,
   type VaultScope,
 } from '../lib/api.ts';
 
@@ -437,6 +440,8 @@ export function GroupDetail() {
             </div>
           )}
 
+          {folder && <SecretsSection folder={folder} secretMode={group.secret_mode} />}
+
           <div className="section">
             <h3>What the agent gets</h3>
             <p className="muted">
@@ -448,7 +453,7 @@ export function GroupDetail() {
             <p className="muted">
               Parachute Agent doesn't impose a vault-note layout — the agent decides how to use vault access. (See{' '}
               <a
-                href="https://github.com/ParachuteComputer/paraclaw/blob/main/docs/parachute-integration.md"
+                href="https://github.com/ParachuteComputer/parachute-agent/blob/main/docs/parachute-integration.md"
                 target="_blank"
                 rel="noreferrer"
               >
@@ -463,6 +468,126 @@ export function GroupDetail() {
   );
 }
 
+const SCOPE_LABEL: Record<SecretInclusionScope, string> = {
+  scoped: 'scoped',
+  assigned: 'assigned',
+  global: 'global',
+};
+
+const SCOPE_HINT: Record<SecretInclusionScope, string> = {
+  scoped: 'Owned by this agent group — never injected into peers.',
+  assigned: 'Global secret routed here via an explicit assignment row.',
+  global: "Global secret reaching this group only because secret_mode='all'.",
+};
+
+/**
+ * "Secrets" panel — the env vars this group will receive at the next session
+ * spawn. Read-only; mirrors `resolveInjectableSecrets()` on the host. Click a
+ * row to jump to the SecretEditor (paraclaw#104).
+ *
+ * The list is fetched once per mount and on remount-driven reloads — there's
+ * no live poll because mid-life secret changes don't reach a running
+ * container anyway (env vars are spawn-time-only). Operators who want a
+ * fresher view can navigate away and back.
+ */
+function SecretsSection({ folder, secretMode }: { folder: string; secretMode?: 'all' | 'selective' | null }) {
+  const [state, setState] = useState<
+    | { kind: 'loading' }
+    | { kind: 'ok'; secrets: InjectableSecretView[] }
+    | { kind: 'error'; message: string }
+  >({ kind: 'loading' });
+
+  const reload = useCallback(async () => {
+    setState({ kind: 'loading' });
+    try {
+      const secrets = await listGroupInjectableSecrets(folder);
+      setState({ kind: 'ok', secrets });
+    } catch (err) {
+      setState({ kind: 'error', message: err instanceof Error ? err.message : String(err) });
+    }
+  }, [folder]);
+
+  useEffect(() => {
+    void reload();
+  }, [reload]);
+
+  return (
+    <div className="section">
+      <h3 style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', margin: 0 }}>
+        Secrets
+        {secretMode && <span className="tag muted">mode: {secretMode}</span>}
+      </h3>
+      <p className="muted" style={{ marginTop: '0.5rem' }}>
+        Env vars injected into this group's containers at the next session spawn — same set the agent-runner sees.
+        Values never leave the encrypted DB; this list is metadata only.
+      </p>
+
+      {state.kind === 'loading' && (
+        <ul className="skeleton-list" aria-busy="true" style={{ marginTop: '0.75rem' }}>
+          <li className="skeleton skeleton-row" />
+          <li className="skeleton skeleton-row" />
+        </ul>
+      )}
+
+      {state.kind === 'error' && (
+        <>
+          <div className="error-banner" style={{ marginTop: '0.75rem' }}>
+            Couldn't load secrets: <code>{state.message}</code>
+          </div>
+          <div className="actions" style={{ marginTop: '0.75rem' }}>
+            <button onClick={reload}>Retry</button>
+          </div>
+        </>
+      )}
+
+      {state.kind === 'ok' && state.secrets.length === 0 && (
+        <div className="empty" style={{ marginTop: '0.75rem' }}>
+          No secrets reach this group.{' '}
+          {secretMode === 'selective' ? (
+            <>Mode is <code>selective</code> — only globals with an explicit assignment row will land here.</>
+          ) : (
+            <>Create a scoped secret or a global one with mode <code>all</code> to populate this list.</>
+          )}{' '}
+          <Link to="/secrets">Manage secrets →</Link>
+        </div>
+      )}
+
+      {state.kind === 'ok' && state.secrets.length > 0 && (
+        <div style={{ marginTop: '0.75rem' }}>
+          {state.secrets.map((s) => (
+            <Link
+              key={s.id}
+              to={`/secrets?edit=${encodeURIComponent(s.id)}`}
+              className="row clickable"
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '0.6rem',
+                padding: '0.4rem 0',
+                borderBottom: '1px solid var(--border-dim)',
+                textDecoration: 'none',
+                color: 'inherit',
+              }}
+            >
+              <code style={{ flex: '1 1 auto', minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>
+                {s.name}
+              </code>
+              <span className="tag muted" title={`Kind: ${s.kind}`}>{s.kind}</span>
+              <span className="tag" title={SCOPE_HINT[s.scope]}>{SCOPE_LABEL[s.scope]}</span>
+              <span className="dim" style={{ fontSize: '0.78rem' }} title={new Date(s.updatedAt).toLocaleString()}>
+                {formatRelative(s.updatedAt)}
+              </span>
+            </Link>
+          ))}
+          <p className="dim" style={{ marginTop: '0.5rem' }}>
+            <Link to="/secrets">Manage all secrets →</Link>
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
+
 function describeSource(source: AgentProviderSource | null, serverUrl: string | null): string {
   switch (source) {
     case 'claude_setup_token':

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

@@ -56,7 +56,7 @@ const baseDetail: api.MessagingGroupDetailView = {
       agentGroupName: 'Main agent',
       engageMode: 'mention',
       engagePattern: null,
-      senderScope: 'all',
+      senderScope: 'unrestricted',
       ignoredMessagePolicy: 'drop',
       priority: 0,
       createdAt: '2026-04-20T10:00:00Z',

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

@@ -21,7 +21,7 @@
  * the value because the server's POST upsert wire requires `value`.
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import { CredentialForm } from '../components/CredentialForm.tsx';
 import { formatRelative } from '../components/StatusDot.tsx';
 import {
@@ -76,6 +76,7 @@ export function SecretsList() {
   const [query, setQuery] = useState('');
   const [collapsed, setCollapsed] = useState<Set<SecretKind>>(new Set());
   const [editing, setEditing] = useState<SecretView | null>(null);
+  const [searchParams, setSearchParams] = useSearchParams();
 
   const reload = useCallback(() => setReloadKey((k) => k + 1), []);
 
@@ -95,6 +96,26 @@ export function SecretsList() {
     };
   }, [reloadKey]);
 
+  // Deep-link: `/secrets?edit=<id>` opens the editor for a specific secret
+  // on mount. Used by GroupDetail's "Secrets" panel to jump straight from a
+  // row to its editor (paraclaw#104). Strip the param after consuming it so
+  // a manual reload doesn't keep popping the same dialog open.
+  useEffect(() => {
+    if (state.kind !== 'ok') return;
+    const editId = searchParams.get('edit');
+    if (!editId) return;
+    const target = state.secrets.find((s) => s.id === editId);
+    if (target) setEditing(target);
+    setSearchParams(
+      (prev) => {
+        const p = new URLSearchParams(prev);
+        p.delete('edit');
+        return p;
+      },
+      { replace: true },
+    );
+  }, [state, searchParams, setSearchParams]);
+
   const onDelete = async (s: SecretView) => {
     if (!confirm(`Delete secret "${s.name}"? Containers using it will start failing on next session spawn.`)) return;
     setBusyId(s.id);

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

@@ -264,6 +264,7 @@ describe('VaultDetail — detach modal', () => {
         name: 'research',
         folder: 'research',
         agent_provider: null,
+        secret_mode: 'selective',
         created_at: '2026-04-20T10:00:00Z',
         vault: null,
         status: null,
@@ -302,6 +303,7 @@ describe('VaultDetail — detach modal', () => {
         name: 'research',
         folder: 'research',
         agent_provider: null,
+        secret_mode: 'selective',
         created_at: '2026-04-20T10:00:00Z',
         vault: null,
         status: null,