feat: add browseable ACP agent catalog to settings

e2e/acp-agents-catalog.spec.ts

@@ -0,0 +1,44 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { test, expect } from '@playwright/test'
+import { collectPageErrors, loginViaOidc } from './helpers'
+
+test.describe('Agents catalog', () => {
+  test('browse, link out, search, and empty state work without page errors', async ({ page }) => {
+    const errors = collectPageErrors(page)
+    await loginViaOidc(page)
+
+    await page.goto('/settings/agents')
+
+    // The bundled ACP registry snapshot renders immediately — no live network needed.
+    // Assert a few known registry cards by id.
+    const geminiCard = page.getByTestId('agent-catalog-card-gemini')
+    await expect(geminiCard).toBeVisible({ timeout: 10_000 })
+    await expect(page.getByTestId('agent-catalog-card-claude-acp')).toBeVisible()
+    await expect(page.getByTestId('agent-catalog-card-goose')).toBeVisible()
+
+    // At least one link-out is present on a card.
+    await expect(geminiCard.getByRole('link').first()).toBeVisible()
+
+    // Search filters the grid: 'gemini' keeps the gemini card, drops claude-acp.
+    const search = page.getByPlaceholder('Search agents')
+    await search.fill('gemini')
+    await expect(page.getByTestId('agent-catalog-card-gemini')).toBeVisible()
+    await expect(page.getByTestId('agent-catalog-card-claude-acp')).toHaveCount(0)
+
+    // The clear (X) button resets the query and restores the filtered-out card.
+    await page.getByRole('button', { name: /clear search/i }).click()
+    await expect(search).toHaveValue('')
+    await expect(page.getByTestId('agent-catalog-card-claude-acp')).toBeVisible()
+
+    // A guaranteed-no-match query shows the empty state.
+    await search.fill('zzzqqqxx')
+    await expect(page.getByText(/no agents found/i)).toBeVisible()
+
+    // The background CDN fetch must not surface page errors even if it fails —
+    // the snapshot fallback covers it.
+    expect(errors).toEqual([])
+  })
+})

src/components/settings/agents/agent-catalog-card.tsx

@@ -0,0 +1,79 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { Code2, ExternalLink, Terminal } from 'lucide-react'
+import { useState } from 'react'
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader } from '@/components/ui/card'
+import { distributionLabel, primaryDistributionKind } from '@/lib/agent-registry-filter'
+import type { RegistryEntry } from '@/types/registry'
+
+type AgentCatalogCardProps = {
+  entry: RegistryEntry
+}
+
+/** A read-only catalogue card for a "bridge" agent: shows the agent's identity
+ *  and metadata and links out to its website and source. There's no install
+ *  action — these CLIs run on the user's own machine, not inside Thunderbolt. */
+export const AgentCatalogCard = ({ entry }: AgentCatalogCardProps) => {
+  const [iconFailed, setIconFailed] = useState(false)
+
+  const distributionKind = primaryDistributionKind(entry)
+  const websiteUrl = entry.website ?? entry.repository
+  const sourceUrl = entry.repository && entry.repository !== websiteUrl ? entry.repository : null
+  const showIcon = entry.icon && !iconFailed
+  const metadata = [entry.version ? `v${entry.version}` : null, entry.authors.join(', ') || null, entry.license || null]
+    .filter(Boolean)
+    .join(' · ')
+
+  return (
+    <Card data-testid={`agent-catalog-card-${entry.id}`} className="border border-border gap-3 py-4">
+      <CardHeader className="px-4">
+        <div className="flex items-center gap-3 min-w-0">
+          {showIcon ? (
+            <img
+              src={entry.icon}
+              alt=""
+              className="size-8 rounded-md shrink-0"
+              draggable={false}
+              onError={() => setIconFailed(true)}
+            />
+          ) : (
+            <Terminal className="size-8 text-muted-foreground shrink-0" aria-hidden="true" />
+          )}
+          <div className="flex items-center gap-2 min-w-0">
+            <span className="font-medium truncate">{entry.name}</span>
+            {distributionKind && (
+              <span className="text-[length:var(--font-size-xs)] text-muted-foreground rounded-md border border-border px-2 py-0.5 shrink-0">
+                {distributionLabel(distributionKind)}
+              </span>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="px-4 flex flex-col gap-3">
+        <p className="text-[length:var(--font-size-sm)] text-muted-foreground">{entry.description}</p>
+        <p className="text-[length:var(--font-size-xs)] text-muted-foreground">{metadata}</p>
+        <div className="flex flex-wrap gap-2">
+          {websiteUrl && (
+            <Button asChild variant="outline" size="sm">
+              <a href={websiteUrl} target="_blank" rel="noopener noreferrer">
+                <ExternalLink />
+                Website
+              </a>
+            </Button>
+          )}
+          {sourceUrl && (
+            <Button asChild variant="outline" size="sm">
+              <a href={sourceUrl} target="_blank" rel="noopener noreferrer">
+                <Code2 />
+                Source
+              </a>
+            </Button>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

src/components/settings/agents/agent-catalog-view.test.tsx

@@ -0,0 +1,147 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import '@testing-library/jest-dom'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
+import { afterEach, describe, expect, it } from 'bun:test'
+import type { RegistryEntry } from '@/types/registry'
+import { AgentCatalogView } from './agent-catalog-view'
+
+const entry = (overrides: Partial<RegistryEntry> & Pick<RegistryEntry, 'id' | 'name'>): RegistryEntry => ({
+  version: '1.2.3',
+  description: `${overrides.name} description`,
+  authors: ['Author Inc.'],
+  license: 'Apache-2.0',
+  website: `https://example.com/${overrides.id}`,
+  repository: `https://github.com/example/${overrides.id}`,
+  distribution: { npx: { package: `${overrides.id}@1.2.3` } },
+  ...overrides,
+})
+
+const fixtures: ReadonlyArray<RegistryEntry> = [
+  entry({ id: 'goose', name: 'goose', description: 'Extensible agent from Block', icon: 'https://cdn/goose.svg' }),
+  entry({ id: 'gemini', name: 'Gemini CLI', description: 'Google terminal agent' }),
+]
+
+const renderCatalog = (entries: ReadonlyArray<RegistryEntry> = fixtures) =>
+  render(<AgentCatalogView entries={entries} />)
+
+describe('AgentCatalogView', () => {
+  afterEach(cleanup)
+
+  it('renders one card per entry', () => {
+    renderCatalog()
+    expect(screen.getByTestId('agent-catalog-card-goose')).toBeInTheDocument()
+    expect(screen.getByTestId('agent-catalog-card-gemini')).toBeInTheDocument()
+  })
+
+  it('renders a distribution badge per card', () => {
+    renderCatalog()
+    expect(screen.getAllByText('Node.js')).toHaveLength(fixtures.length)
+  })
+
+  it('renders Website and Source link-outs with correct attributes', () => {
+    renderCatalog([entry({ id: 'goose', name: 'goose' })])
+    const card = screen.getByTestId('agent-catalog-card-goose')
+    const links = card.querySelectorAll('a')
+    expect(links).toHaveLength(2)
+
+    const website = card.querySelector('a[href="https://example.com/goose"]')
+    const source = card.querySelector('a[href="https://github.com/example/goose"]')
+    expect(website).toBeInTheDocument()
+    expect(source).toBeInTheDocument()
+
+    for (const link of [website, source]) {
+      expect(link).toHaveAttribute('target', '_blank')
+      expect(link?.getAttribute('rel')).toContain('noopener')
+      expect(link?.getAttribute('rel')).toContain('noreferrer')
+    }
+  })
+
+  it('falls back the Website link to the repository when no website is set, and hides the duplicate Source link', () => {
+    renderCatalog([entry({ id: 'claude-acp', name: 'Claude Agent', website: undefined })])
+    const card = screen.getByTestId('agent-catalog-card-claude-acp')
+    const links = card.querySelectorAll('a')
+    expect(links).toHaveLength(1)
+    expect(card.querySelector('a[href="https://github.com/example/claude-acp"]')).toBeInTheDocument()
+  })
+
+  it('filters by search query', () => {
+    renderCatalog()
+    fireEvent.change(screen.getByPlaceholderText('Search agents'), { target: { value: 'gemini' } })
+
+    expect(screen.getByTestId('agent-catalog-card-gemini')).toBeInTheDocument()
+    expect(screen.queryByTestId('agent-catalog-card-goose')).not.toBeInTheDocument()
+  })
+
+  it('clears the query and restores every card when the clear button is clicked', () => {
+    renderCatalog()
+    const input = screen.getByPlaceholderText('Search agents') as HTMLInputElement
+
+    fireEvent.change(input, { target: { value: 'gemini' } })
+    expect(input.value).toBe('gemini')
+    expect(screen.queryByTestId('agent-catalog-card-goose')).not.toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('button', { name: /clear search/i }))
+
+    expect(input.value).toBe('')
+    expect(screen.getByTestId('agent-catalog-card-gemini')).toBeInTheDocument()
+    expect(screen.getByTestId('agent-catalog-card-goose')).toBeInTheDocument()
+  })
+
+  it('shows a no-results message when nothing matches', () => {
+    renderCatalog()
+    fireEvent.change(screen.getByPlaceholderText('Search agents'), { target: { value: 'zzzqqqxx' } })
+
+    expect(screen.getByText(/no agents found/i)).toBeInTheDocument()
+    expect(screen.queryByTestId('agent-catalog-card-goose')).not.toBeInTheDocument()
+  })
+
+  it('renders an icon image when icon is set', () => {
+    renderCatalog([entry({ id: 'goose', name: 'goose', icon: 'https://cdn/goose.svg' })])
+    const header = screen.getByTestId('agent-catalog-card-goose').querySelector('[data-slot="card-header"]')
+    const img = header?.querySelector('img')
+    expect(img).toBeInTheDocument()
+    expect(img).toHaveAttribute('src', 'https://cdn/goose.svg')
+    // The Terminal fallback (an svg) must not render while the icon image loads cleanly.
+    expect(header?.querySelector('svg')).not.toBeInTheDocument()
+  })
+
+  it('falls back to the Terminal icon when the image fails to load', () => {
+    renderCatalog([entry({ id: 'goose', name: 'goose', icon: 'https://cdn/broken.svg' })])
+    const header = screen.getByTestId('agent-catalog-card-goose').querySelector('[data-slot="card-header"]')
+    const img = header?.querySelector('img')
+    expect(img).toBeInTheDocument()
+
+    fireEvent.error(img as HTMLImageElement)
+
+    expect(header?.querySelector('img')).not.toBeInTheDocument()
+    expect(header?.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('renders the Terminal icon when no icon is set', () => {
+    renderCatalog([entry({ id: 'goose', name: 'goose', icon: undefined })])
+    const header = screen.getByTestId('agent-catalog-card-goose').querySelector('[data-slot="card-header"]')
+    expect(header?.querySelector('img')).not.toBeInTheDocument()
+    expect(header?.querySelector('svg')).toBeInTheDocument()
+  })
+
+  it('exposes only link-out actions per card, never an install action', () => {
+    renderCatalog([entry({ id: 'goose', name: 'goose' })])
+    const card = screen.getByTestId('agent-catalog-card-goose')
+
+    expect(card.querySelectorAll('a').length).toBeGreaterThan(0)
+    expect(card.querySelector('button')).not.toBeInTheDocument()
+    expect(card.querySelector('button[type="submit"]')).not.toBeInTheDocument()
+  })
+
+  it('keeps all cards visible for a whitespace-only query', () => {
+    renderCatalog()
+    fireEvent.change(screen.getByPlaceholderText('Search agents'), { target: { value: '   ' } })
+
+    expect(screen.queryByText(/no agents found/i)).not.toBeInTheDocument()
+    expect(screen.getByTestId('agent-catalog-card-goose')).toBeInTheDocument()
+    expect(screen.getByTestId('agent-catalog-card-gemini')).toBeInTheDocument()
+  })
+})

src/components/settings/agents/agent-catalog-view.tsx

@@ -0,0 +1,45 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { SearchInput } from '@/components/ui/search-input'
+import { useAgentRegistrySearch } from '@/hooks/use-agent-registry-search'
+import type { RegistryEntry } from '@/types/registry'
+import { useRef } from 'react'
+import { AgentCatalogCard } from './agent-catalog-card'
+
+type AgentCatalogViewProps = {
+  /** The agents to render. Always non-empty in production (the snapshot seeds it). */
+  entries: ReadonlyArray<RegistryEntry>
+}
+
+/** Presentational catalogue: search + grid of read-only agent cards. Takes its
+ *  entries as a prop and owns no data fetching, so it renders purely from inputs
+ *  and is unit-testable without react-query. */
+export const AgentCatalogView = ({ entries }: AgentCatalogViewProps) => {
+  const { query, setQuery, results, isEmpty } = useAgentRegistrySearch(entries)
+  const showEmptyState = isEmpty && query.trim().length > 0
+  const searchRef = useRef<HTMLInputElement>(null)
+
+  return (
+    <section className="flex flex-col gap-3">
+      <h2 className="text-lg font-medium">Browse agents</h2>
+      <SearchInput
+        ref={searchRef}
+        showIcon
+        placeholder="Search agents"
+        value={query}
+        onChange={(event) => setQuery(event.target.value)}
+      />
+      {showEmptyState ? (
+        <p className="text-[length:var(--font-size-sm)] text-muted-foreground py-6 text-center">No agents found</p>
+      ) : (
+        <div className="grid gap-3 sm:grid-cols-2">
+          {results.map((entry) => (
+            <AgentCatalogCard key={entry.id} entry={entry} />
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}

src/components/settings/agents/agent-catalog.tsx

@@ -0,0 +1,14 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import { useAgentRegistry } from '@/hooks/use-agent-registry'
+import { AgentCatalogView } from './agent-catalog-view'
+
+/** Container for the bridgeable-agent catalogue: reads the live registry hook
+ *  (snapshot-seeded, so always non-empty) and hands the entries to the
+ *  presentational view. */
+export const AgentCatalog = () => {
+  const entries = useAgentRegistry()
+  return <AgentCatalogView entries={entries} />
+}