[Marketplace] Browse + install UI — agent discovery page

[samxu01]

Context

The marketplace backend (issue #[marketplace backend]) will expose the agent registry. This issue is the UI layer — a browsable, filterable agent directory with a one-click install flow.

What to build

1. Marketplace browse page (/marketplace)

Layout:

┌──────────────────────────────────────────────────────┐
│  🛍 Agent Marketplace                    [Submit →]  │
│  Find and install agents for your pods              │
│                                                      │
│  [Search agents...]  [Runtime ▾] [Tags ▾] [⭐ Top]  │
│                                                      │
│  ✨ Featured                                         │
│  ┌──────────┐ ┌──────────┐ ┌──────────┐            │
│  │ 🤖 Nova  │ │ 🎨 Pixel │ │ 📋 Theo  │            │
│  │ Backend  │ │ Frontend │ │ PM       │            │
│  │ ★★★★★   │ │ ★★★★★   │ │ ★★★★★   │            │
│  │[Install] │ │[Install] │ │[Install] │            │
│  └──────────┘ └──────────┘ └──────────┘            │
│                                                      │
│  All Agents (6)                                      │
│  [grid of agent cards...]                            │
└──────────────────────────────────────────────────────┘

Agent card:

• Avatar (circular)
• Name + version badge
• Runtime badge (OpenClaw, Codex, etc.)
• Description (2 lines max)
• Tags (up to 3 shown)
• Star rating + install count
• [Install] / [Installed ✓] button

Filters:

• Search: full-text search on name + description + tags
• Runtime: All / OpenClaw / Codex / Claude Code / Custom
• Tags: multi-select from available tags
• Sort: Featured / Most installed / Newest / Top rated

2. Agent detail page (/marketplace/:agentId)

┌────────────────────────────────────────────┐
│ [← Back]                                  │
│                                           │
│ 🤖 Nova — Backend Engineer      [Install] │
│ by Team Commonly · v1.0.0 · MIT           │
│ ★★★★★ 4.9 (12 reviews)                   │
│                                           │
│ Capabilities                              │
│ [code-review] [test-writing] [github]     │
│                                           │
│ About                                     │
│ Nova is an autonomous backend engineer... │
│                                           │
│ Supported runtimes: OpenClaw 2026.3+     │
│ Primary model: openai-codex/gpt-5.4-mini │
│                                           │
│ Example interactions                      │
│ "@nova can you add tests for auth.js?"   │
│ "Nova claimed TASK-007..."              │
│                                           │
│ [View on GitHub →]                        │
└────────────────────────────────────────────┘

3. Install flow modal

Clicking [Install] opens a modal:

Install Nova

Select pods:
☑ Engineering (Backend Tasks)
☐ General
☐ Frontend Tasks

[Cancel]  [Install to 1 pod →]

On confirm: calls POST /api/marketplace/agents/:id/install, shows success toast, button changes to [Installed ✓].

4. Navigation integration

• Add "Marketplace" link to sidebar navigation
• Add marketplace shortcut to onboarding step 2

5. "Installed" state management

Track which agents are installed in which pods (from AgentInstallation records). Show installed badge on card.

Acceptance criteria

• Marketplace page loads and shows all agents from API
• Search + filter works client-side
• Agent detail page shows full information
• Install flow modal lets user select pods and installs correctly
• Installed agents show [Installed ✓] state
• Page is responsive (mobile 390px)
• Empty states handled (no results for search)

Assignee

Pixel (frontend agent)