From ee0b0ef7c612d66ede1b8519ad1025134cf14b49 Mon Sep 17 00:00:00 2001 From: Mohamed Boudra Date: Fri, 2 Oct 2026 16:40:10 +0100 Subject: [PATCH] Feature OMP on the homepage, give /agents icons, and use Inter on the website (#5918) * feat(website): feature OMP, add agent icons to /agents, and use Inter Featured agents on the homepage are now Claude Code, Codex, OpenCode, Pi, OMP, Cursor, Muse Code, and Antigravity, driven by one list so the hero badges, the provider cards, and the "+N more" count stay in sync. The count previously subtracted a stale constant (5) while 7 agents were shown. /agents moves onto the shared SiteShell like Hub and Changelog and lists every agent as an icon and name. Icons for ACP agents are vendored from the app's provider catalog rather than imported across packages. The site switches to self-hosted Inter so typography no longer depends on the visitor's OS; system-ui fell back to DejaVu Sans on many Linux setups. * fix(website): keep vendored agent marks out of the homepage bundle The homepage only shows the eight featured agents, which have inline icon components, but importing AgentPageIcon pulled all 31 vendored SVGs into its bundle. AgentPageIcon now lives in its own module used only by /agents. The Codebuddy mark drew past its 16x16 viewBox and was clipped; the viewBox now matches the artwork's bounds. --- package-lock.json | 10 + packages/website/package.json | 1 + .../src/assets/agent-icons/agoragentic.svg | 5 + .../website/src/assets/agent-icons/amp.svg | 6 + .../website/src/assets/agent-icons/auggie.svg | 4 + .../src/assets/agent-icons/autohand.svg | 26 ++ .../website/src/assets/agent-icons/cline.svg | 6 + .../src/assets/agent-icons/codebuddy.svg | 5 + .../src/assets/agent-icons/copilot.svg | 5 + .../src/assets/agent-icons/cortex-code.svg | 3 + .../website/src/assets/agent-icons/corust.svg | 10 + .../website/src/assets/agent-icons/crow.svg | 9 + .../src/assets/agent-icons/deepagents.svg | 6 + .../src/assets/agent-icons/dimcode.svg | 3 + .../website/src/assets/agent-icons/dirac.svg | 6 + .../src/assets/agent-icons/factory-droid.svg | 1 + .../src/assets/agent-icons/fast-agent.svg | 293 ++++++++++++++++++ .../website/src/assets/agent-icons/gemini.svg | 3 + .../website/src/assets/agent-icons/glm.svg | 1 + .../website/src/assets/agent-icons/goose.svg | 3 + .../website/src/assets/agent-icons/grok.svg | 4 + .../website/src/assets/agent-icons/junie.svg | 5 + .../website/src/assets/agent-icons/kilo.svg | 3 + .../website/src/assets/agent-icons/kimi.svg | 3 + .../src/assets/agent-icons/minion-code.svg | 19 ++ .../src/assets/agent-icons/mistral-vibe.svg | 12 + .../website/src/assets/agent-icons/nova.svg | 10 + .../src/assets/agent-icons/poolside.svg | 3 + .../website/src/assets/agent-icons/qoder.svg | 3 + .../src/assets/agent-icons/qwen-code.svg | 1 + .../website/src/assets/agent-icons/sigit.svg | 98 ++++++ .../src/assets/agent-icons/stakpak.svg | 3 + .../website/src/assets/agent-icons/vtcode.svg | 4 + .../website/src/components/agent-icons.tsx | 16 +- .../src/components/agent-page-icon.tsx | 57 ++++ .../website/src/components/landing-page.tsx | 63 ++-- packages/website/src/data/agent-pages.ts | 56 ++-- packages/website/src/routes/agents.tsx | 87 +++--- packages/website/src/styles.css | 3 + 39 files changed, 745 insertions(+), 111 deletions(-) create mode 100644 packages/website/src/assets/agent-icons/agoragentic.svg create mode 100644 packages/website/src/assets/agent-icons/amp.svg create mode 100644 packages/website/src/assets/agent-icons/auggie.svg create mode 100644 packages/website/src/assets/agent-icons/autohand.svg create mode 100644 packages/website/src/assets/agent-icons/cline.svg create mode 100644 packages/website/src/assets/agent-icons/codebuddy.svg create mode 100644 packages/website/src/assets/agent-icons/copilot.svg create mode 100644 packages/website/src/assets/agent-icons/cortex-code.svg create mode 100644 packages/website/src/assets/agent-icons/corust.svg create mode 100644 packages/website/src/assets/agent-icons/crow.svg create mode 100644 packages/website/src/assets/agent-icons/deepagents.svg create mode 100644 packages/website/src/assets/agent-icons/dimcode.svg create mode 100644 packages/website/src/assets/agent-icons/dirac.svg create mode 100644 packages/website/src/assets/agent-icons/factory-droid.svg create mode 100644 packages/website/src/assets/agent-icons/fast-agent.svg create mode 100644 packages/website/src/assets/agent-icons/gemini.svg create mode 100644 packages/website/src/assets/agent-icons/glm.svg create mode 100644 packages/website/src/assets/agent-icons/goose.svg create mode 100644 packages/website/src/assets/agent-icons/grok.svg create mode 100644 packages/website/src/assets/agent-icons/junie.svg create mode 100644 packages/website/src/assets/agent-icons/kilo.svg create mode 100644 packages/website/src/assets/agent-icons/kimi.svg create mode 100644 packages/website/src/assets/agent-icons/minion-code.svg create mode 100644 packages/website/src/assets/agent-icons/mistral-vibe.svg create mode 100644 packages/website/src/assets/agent-icons/nova.svg create mode 100644 packages/website/src/assets/agent-icons/poolside.svg create mode 100644 packages/website/src/assets/agent-icons/qoder.svg create mode 100644 packages/website/src/assets/agent-icons/qwen-code.svg create mode 100644 packages/website/src/assets/agent-icons/sigit.svg create mode 100644 packages/website/src/assets/agent-icons/stakpak.svg create mode 100644 packages/website/src/assets/agent-icons/vtcode.svg create mode 100644 packages/website/src/components/agent-page-icon.tsx diff --git a/package-lock.json b/package-lock.json index 0e65c23a46..102b534819 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6330,6 +6330,15 @@ "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==", "license": "MIT" }, + "node_modules/@fontsource-variable/inter": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.3.0.tgz", + "integrity": "sha512-OupL48va4JNofb97w6NYeF9S7W/kHNKM0Er8Dem5nqi4jeOLrVJDoE8tZEpnMJmtkvNbB1EIPPwHcdkF6b1oUA==", + "license": "OFL-1.1", + "funding": { + "url": "https://github.com/sponsors/ayuhito" + } + }, "node_modules/@getpaseo/app": { "resolved": "packages/app", "link": true @@ -40135,6 +40144,7 @@ "dependencies": { "@cloudflare/vite-plugin": "^1.29.1", "@cloudflare/workers-types": "^4.20260317.1", + "@fontsource-variable/inter": "^5.3.0", "@tanstack/react-router": "^1.170.16", "@tanstack/react-start": "^1.168.26", "framer-motion": "^12.35.2", diff --git a/packages/website/package.json b/packages/website/package.json index dcc25b32fa..63924d5a7a 100644 --- a/packages/website/package.json +++ b/packages/website/package.json @@ -14,6 +14,7 @@ "dependencies": { "@cloudflare/vite-plugin": "^1.29.1", "@cloudflare/workers-types": "^4.20260317.1", + "@fontsource-variable/inter": "^5.3.0", "@tanstack/react-router": "^1.170.16", "@tanstack/react-start": "^1.168.26", "framer-motion": "^12.35.2", diff --git a/packages/website/src/assets/agent-icons/agoragentic.svg b/packages/website/src/assets/agent-icons/agoragentic.svg new file mode 100644 index 0000000000..b1372e6835 --- /dev/null +++ b/packages/website/src/assets/agent-icons/agoragentic.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/website/src/assets/agent-icons/amp.svg b/packages/website/src/assets/agent-icons/amp.svg new file mode 100644 index 0000000000..314881aff8 --- /dev/null +++ b/packages/website/src/assets/agent-icons/amp.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/website/src/assets/agent-icons/auggie.svg b/packages/website/src/assets/agent-icons/auggie.svg new file mode 100644 index 0000000000..215107744a --- /dev/null +++ b/packages/website/src/assets/agent-icons/auggie.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/website/src/assets/agent-icons/autohand.svg b/packages/website/src/assets/agent-icons/autohand.svg new file mode 100644 index 0000000000..f3bc983c4d --- /dev/null +++ b/packages/website/src/assets/agent-icons/autohand.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/src/assets/agent-icons/cline.svg b/packages/website/src/assets/agent-icons/cline.svg new file mode 100644 index 0000000000..aeeafbc61e --- /dev/null +++ b/packages/website/src/assets/agent-icons/cline.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/website/src/assets/agent-icons/codebuddy.svg b/packages/website/src/assets/agent-icons/codebuddy.svg new file mode 100644 index 0000000000..d1f4b1d74f --- /dev/null +++ b/packages/website/src/assets/agent-icons/codebuddy.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/website/src/assets/agent-icons/copilot.svg b/packages/website/src/assets/agent-icons/copilot.svg new file mode 100644 index 0000000000..626d33badc --- /dev/null +++ b/packages/website/src/assets/agent-icons/copilot.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/website/src/assets/agent-icons/cortex-code.svg b/packages/website/src/assets/agent-icons/cortex-code.svg new file mode 100644 index 0000000000..28f87a258e --- /dev/null +++ b/packages/website/src/assets/agent-icons/cortex-code.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/src/assets/agent-icons/corust.svg b/packages/website/src/assets/agent-icons/corust.svg new file mode 100644 index 0000000000..9f30636cb0 --- /dev/null +++ b/packages/website/src/assets/agent-icons/corust.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/website/src/assets/agent-icons/crow.svg b/packages/website/src/assets/agent-icons/crow.svg new file mode 100644 index 0000000000..1169116cd9 --- /dev/null +++ b/packages/website/src/assets/agent-icons/crow.svg @@ -0,0 +1,9 @@ + + + diff --git a/packages/website/src/assets/agent-icons/deepagents.svg b/packages/website/src/assets/agent-icons/deepagents.svg new file mode 100644 index 0000000000..abd818ec47 --- /dev/null +++ b/packages/website/src/assets/agent-icons/deepagents.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/packages/website/src/assets/agent-icons/dimcode.svg b/packages/website/src/assets/agent-icons/dimcode.svg new file mode 100644 index 0000000000..1fa31ce884 --- /dev/null +++ b/packages/website/src/assets/agent-icons/dimcode.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/src/assets/agent-icons/dirac.svg b/packages/website/src/assets/agent-icons/dirac.svg new file mode 100644 index 0000000000..4fbb06ceea --- /dev/null +++ b/packages/website/src/assets/agent-icons/dirac.svg @@ -0,0 +1,6 @@ + + δ + + + + diff --git a/packages/website/src/assets/agent-icons/factory-droid.svg b/packages/website/src/assets/agent-icons/factory-droid.svg new file mode 100644 index 0000000000..5c6fb8d1ff --- /dev/null +++ b/packages/website/src/assets/agent-icons/factory-droid.svg @@ -0,0 +1 @@ + diff --git a/packages/website/src/assets/agent-icons/fast-agent.svg b/packages/website/src/assets/agent-icons/fast-agent.svg new file mode 100644 index 0000000000..a07fab2886 --- /dev/null +++ b/packages/website/src/assets/agent-icons/fast-agent.svg @@ -0,0 +1,293 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/src/assets/agent-icons/gemini.svg b/packages/website/src/assets/agent-icons/gemini.svg new file mode 100644 index 0000000000..588d89c52a --- /dev/null +++ b/packages/website/src/assets/agent-icons/gemini.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/src/assets/agent-icons/glm.svg b/packages/website/src/assets/agent-icons/glm.svg new file mode 100644 index 0000000000..d552d2a3d0 --- /dev/null +++ b/packages/website/src/assets/agent-icons/glm.svg @@ -0,0 +1 @@ +Z.ai diff --git a/packages/website/src/assets/agent-icons/goose.svg b/packages/website/src/assets/agent-icons/goose.svg new file mode 100644 index 0000000000..c492885426 --- /dev/null +++ b/packages/website/src/assets/agent-icons/goose.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/src/assets/agent-icons/grok.svg b/packages/website/src/assets/agent-icons/grok.svg new file mode 100644 index 0000000000..35db840319 --- /dev/null +++ b/packages/website/src/assets/agent-icons/grok.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/website/src/assets/agent-icons/junie.svg b/packages/website/src/assets/agent-icons/junie.svg new file mode 100644 index 0000000000..54ce5ff9a9 --- /dev/null +++ b/packages/website/src/assets/agent-icons/junie.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/website/src/assets/agent-icons/kilo.svg b/packages/website/src/assets/agent-icons/kilo.svg new file mode 100644 index 0000000000..8af6e96f34 --- /dev/null +++ b/packages/website/src/assets/agent-icons/kilo.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/src/assets/agent-icons/kimi.svg b/packages/website/src/assets/agent-icons/kimi.svg new file mode 100644 index 0000000000..4f7547cf79 --- /dev/null +++ b/packages/website/src/assets/agent-icons/kimi.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/src/assets/agent-icons/minion-code.svg b/packages/website/src/assets/agent-icons/minion-code.svg new file mode 100644 index 0000000000..eb3d8eb31d --- /dev/null +++ b/packages/website/src/assets/agent-icons/minion-code.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/packages/website/src/assets/agent-icons/mistral-vibe.svg b/packages/website/src/assets/agent-icons/mistral-vibe.svg new file mode 100644 index 0000000000..b13631b96d --- /dev/null +++ b/packages/website/src/assets/agent-icons/mistral-vibe.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/packages/website/src/assets/agent-icons/nova.svg b/packages/website/src/assets/agent-icons/nova.svg new file mode 100644 index 0000000000..5e19f58879 --- /dev/null +++ b/packages/website/src/assets/agent-icons/nova.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/packages/website/src/assets/agent-icons/poolside.svg b/packages/website/src/assets/agent-icons/poolside.svg new file mode 100644 index 0000000000..91de4c46d4 --- /dev/null +++ b/packages/website/src/assets/agent-icons/poolside.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/src/assets/agent-icons/qoder.svg b/packages/website/src/assets/agent-icons/qoder.svg new file mode 100644 index 0000000000..417d83693d --- /dev/null +++ b/packages/website/src/assets/agent-icons/qoder.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/src/assets/agent-icons/qwen-code.svg b/packages/website/src/assets/agent-icons/qwen-code.svg new file mode 100644 index 0000000000..6a33da557a --- /dev/null +++ b/packages/website/src/assets/agent-icons/qwen-code.svg @@ -0,0 +1 @@ + diff --git a/packages/website/src/assets/agent-icons/sigit.svg b/packages/website/src/assets/agent-icons/sigit.svg new file mode 100644 index 0000000000..334fc95cba --- /dev/null +++ b/packages/website/src/assets/agent-icons/sigit.svg @@ -0,0 +1,98 @@ + + + + + + + + + + + + + diff --git a/packages/website/src/assets/agent-icons/stakpak.svg b/packages/website/src/assets/agent-icons/stakpak.svg new file mode 100644 index 0000000000..64425076ed --- /dev/null +++ b/packages/website/src/assets/agent-icons/stakpak.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/website/src/assets/agent-icons/vtcode.svg b/packages/website/src/assets/agent-icons/vtcode.svg new file mode 100644 index 0000000000..5ae616428c --- /dev/null +++ b/packages/website/src/assets/agent-icons/vtcode.svg @@ -0,0 +1,4 @@ + + + VT + diff --git a/packages/website/src/components/agent-icons.tsx b/packages/website/src/components/agent-icons.tsx index 8488050b12..fda21cf176 100644 --- a/packages/website/src/components/agent-icons.tsx +++ b/packages/website/src/components/agent-icons.tsx @@ -1,4 +1,4 @@ -// Agent provider brand marks, shared by the landing page and the Hub page. +// Agent provider brand marks, shared by the landing page, the Hub page, and /agents. import type * as React from "react"; @@ -83,6 +83,20 @@ export function PiIcon(props: React.SVGProps) { ); } +export function OmpIcon(props: React.SVGProps) { + return ( + + ); +} + export function MuseCodeIcon(props: React.SVGProps) { return ( > = { + "claude-code": ClaudeCodeIcon, + codex: CodexIcon, + opencode: OpenCodeIcon, + pi: PiIcon, + omp: OmpIcon, + cursor: CursorIcon, + "muse-code": MuseCodeIcon, + antigravity: AntigravityIcon, +}; + +// Marks vendored from the app's ACP provider catalog, named by agent page slug. +const VENDORED_AGENT_PAGE_SVGS = import.meta.glob("../assets/agent-icons/*.svg", { + eager: true, + query: "?raw", + import: "default", +}) as Record; + +const VENDORED_AGENT_PAGE_MARKUP = new Map( + Object.entries(VENDORED_AGENT_PAGE_SVGS).map(([path, svg]) => [ + path.slice(path.lastIndexOf("/") + 1, -".svg".length), + { __html: svg }, + ]), +); + +/** The mark for an agent page, falling back to a generic bot for agents without one. */ +export function AgentPageIcon({ slug, className }: { slug: string; className?: string }) { + const Icon = AGENT_PAGE_ICONS[slug]; + if (Icon) return ; + const markup = VENDORED_AGENT_PAGE_MARKUP.get(slug); + if (markup) { + return ( +