"use client"; import { type ComponentType, type SVGProps, useId } from "react"; /** * Brand glyphs for connected-agent backends. The real marks (Claude's sunburst, * Codex's gradient app icon) so a connected agent reads as itself everywhere it * appears — selector chip, cards, message references. Rendered in brand colours * (not `currentColor`) so they look authentic rather than tinted. Resolve a * backend kind to its glyph with `agentGlyph(kind)`; unknown kinds return null * and callers fall back to a generic icon. */ type GlyphProps = { size?: number } & Omit< SVGProps, "width" | "height" >; // Claude / Anthropic sunburst, in the brand clay. export function ClaudeGlyph({ size = 16, ...props }: GlyphProps) { return ( ); } // Official Codex app icon (white tile + blue→purple gradient cloud with a // terminal prompt). Gradient id is per-instance (useId) so multiple icons on a // page don't collide. export function CodexGlyph({ size = 16, ...props }: GlyphProps) { const gradientId = useId(); return ( ); } // A connected partner: a filled heart in the Partners accent, so a consulted // partner reads as a companion (not a CLI) everywhere a connected agent appears. export function PartnerGlyph({ size = 16, ...props }: GlyphProps) { return ( ); } export type AgentGlyph = ComponentType; export function agentGlyph(kind: string | undefined): AgentGlyph | null { if (kind === "claude_code") return ClaudeGlyph; if (kind === "codex") return CodexGlyph; if (kind === "partner") return PartnerGlyph; return null; }