Track C — Wire the marketplace UI

The frontend is built to fetch agents from the backend API, so the moment your agent is status: 'active' (or featured: true, coming_soon), it will appear automatically in:

• / (homepage featured carousel + browse strip)
• /agents (full catalog with filters)
• /agent/:slug (detail page)

You don't have to touch any code for it to show up. This track is for the cases where you want to customize the appearance.

What's already automatic

Frontend surface	Source	What it shows
Homepage featured carousel	useAgents() → backend /agents	First N agents where featured: true and status: 'active'
Catalog grid	useAgents()	All status: 'active' agents, filtered by tag + search
Detail page	useAgentBySlug(slug)	Full agent DTO with capabilities, steps, pricing, reviews, changelog
Pricing CTAs	useAgentPricing(agentId)	Tier cards; redirects to /pricing/:slug then to checkout
Coming-soon waitlist	NotifyDialog + useWaitlist()	Triggered for status: 'coming_soon'; persists email
Reviews tab	useAgentReviews(agentId)	Cursor-paginated reviews

No code change needed for any of this. If something isn't showing, see Troubleshooting → Agent not appearing.

Category themes

The catalog colors each agent's hero band and icon chip according to its category (the first or primary tag). Themes are defined in fleapo-marketplace/src/data/categoryThemes.ts:

export const categoryThemes: Record<string, CategoryTheme> = {
  voice:     { hex: "#2563EB", text: "text-blue-700",  softBg: "bg-blue-50",  /* ... */ },
  developer: { hex: "#7C3AED", text: "text-violet-700", /* ... */ },
  sales:     { hex: "#0EA5E9", /* ... */ },
  research:  { /* ... */ },
  support:   { /* ... */ },
  creative:  { /* ... */ },
  data:      { /* ... */ },
  productivity: { /* ... */ },
  marketing: { /* ... */ },
  finance:   { /* ... */ },
  legal:     { /* ... */ },
  hr:        { /* ... */ },
  healthcare:{ /* ... */ },
  education: { /* ... */ },
  ecommerce: { /* ... */ },
  security:  { /* ... */ },
};

export function themeFor(category: string): CategoryTheme {
  return categoryThemes[category] ?? defaultTheme;
}

If your agent's primary tag isn't in this map, it falls back to the default teal theme. Two options:

Option A — reuse an existing category

Tag your agent with one of the existing categories (voice, developer, sales, …) in Track B. No code change.

Option B — add a new category

In fleapo-marketplace/src/data/categoryThemes.ts:

categoryThemes.compliance = {
  hex: "#0D9488",
  text: "text-teal-700",
  softBg: "bg-teal-50",
  softBorder: "border-teal-200",
  solidBg: "bg-teal-600",
  solidText: "text-white",
  gradient: "from-teal-400 via-teal-500 to-emerald-500",
  glow: "bg-teal-400/30",
};

Then create the matching tag in the backend (POST /tags with name: "Compliance") and attach it to your agent. The slug must match the key in categoryThemes.

Mock data (optional, for staging the UI before backend is ready)

src/data/agents.ts historically held the static mock catalog. The UI now prefers the live API, but the file is still useful for:

• Previewing the UI without a running backend.
• Adding placeholder copy while the marketing team finalizes real copy.

If you want to stage a new agent purely client-side, push an entry into the agents array there:

{
  id: "preview-my-agent",
  slug: "my-agent",
  name: "MyAgent",
  tagline: "Short product line.",
  description: "Longer marketing copy.",
  iconUrl: "/icons/my-agent.png",
  rating: null,
  reviews: 0,
  installs: 0,
  pricing: "Freemium",
  price: "From $49 /mo",
  tags: [{ id: "compliance", name: "Compliance", slug: "compliance", createdAt: "" }],
  featured: false,
  new: true,
  comingSoon: false,
}

Warning: the live UI ignores this array once useAgents() returns data from the backend. Mock entries are only visible when the API call fails or returns empty.

Custom detail-page sections

The detail page (src/pages/AgentDetail.tsx) is generic — capabilities, steps, pricing, reviews, changelog, analytics. If your agent needs a bespoke section (e.g. a live demo widget), you have two options:

1. Embed via productDomain — the detail page links to your agent's productDomain. Put your demo there. Cleaner.
2. Add a per-agent custom tab — patch AgentDetail.tsx to conditionally render a section when slug === 'my-agent'. Avoid this if possible; it doesn't scale to N agents.

Coming-soon staging

While the agent is still in development, set status: 'coming_soon' in Track B. The UI will:

• Render the agent in the catalog with a "Coming soon" badge.
• Make the agent card non-navigable.
• Open NotifyDialog on click, capturing emails into agent_waitlist.

When you flip to active, the dialog is replaced by the normal "Get started" CTA. Waitlist signups don't auto-convert — they're just a list to email later.

Layout-id discipline

If you write any new component that renders an AgentCard, pass a unique layoutIdPrefix:

<AgentCard agent={a} variant="default" layoutIdPrefix="my-section-" />

The Framer Motion shared-element transition uses IDs of the form agent-{part}-{prefix}{slug}. Without a unique prefix, you'll get visual glitches when the same agent appears in multiple grids on the same page.

Verify the UI

cd fleapo-marketplace
pnpm install
pnpm dev

1. Open http://localhost:8080.
2. Search for your agent's name in the header.
3. Click into /agent/my-agent — verify hero, capabilities, steps, pricing tiers, reviews tab, changelog tab.
4. Sign in as a user (not admin), click "Start", confirm Stripe Checkout redirect for paid tiers.
5. Sign in as platform_admin, go to /admin/agents, verify the agent shows up in the admin table.

Continue to the end-to-end checklist.