interface Props {
id: string;
size?: number;
className?: string;
}
interface Visual {
bg: string;
fg: string;
glyph: (size: number) => JSX.Element;
}
function star4(size: number, color: string) {
// Sparkle / 4-point star — used for Claude.
const s = size;
const c = s / 2;
const r = s * 0.36;
const t = s * 0.08;
return (
);
}
function qoderGlyph(size: number) {
return (
);
}
const VISUALS: Record = {
// Claude — warm Anthropic terracotta with sparkle.
claude: {
bg: 'linear-gradient(135deg, #d97757 0%, #b85a3b 100%)',
fg: '#fff7ef',
glyph: (s) => star4(s, '#fff7ef'),
},
// Codex — OpenAI signature dark green knot.
codex: {
bg: 'linear-gradient(135deg, #1a1a1a 0%, #303030 100%)',
fg: '#10a37f',
glyph: (s) => {
const c = s / 2;
const r = s * 0.32;
return (
);
},
},
// Gemini — Google blue/purple with diamond spark.
gemini: {
bg: 'linear-gradient(135deg, #4285f4 0%, #9b72cb 60%, #d96570 100%)',
fg: '#ffffff',
glyph: (s) => star4(s, '#ffffff'),
},
// OpenCode — terminal green angle brackets.
opencode: {
bg: 'linear-gradient(135deg, #064e3b 0%, #0f766e 100%)',
fg: '#a7f3d0',
glyph: (s) => {
const c = s / 2;
const off = s * 0.16;
const arm = s * 0.12;
return (
);
},
},
// Cursor — clean black with a cursor arrow.
'cursor-agent': {
bg: 'linear-gradient(135deg, #18181b 0%, #3f3f46 100%)',
fg: '#ffffff',
glyph: (s) => {
const c = s / 2;
const o = s * 0.22;
return (
);
},
},
// GitHub Copilot — GitHub-dark with the Copilot two-eye mark.
copilot: {
bg: 'linear-gradient(135deg, #0d1117 0%, #1f2937 100%)',
fg: '#ffffff',
glyph: (s) => {
const c = s / 2;
const eyeOff = s * 0.14;
const eyeRx = s * 0.075;
const eyeRy = s * 0.12;
return (
);
},
},
// Qwen — Alibaba indigo with stylized Q.
qwen: {
bg: 'linear-gradient(135deg, #615ced 0%, #8b5cf6 100%)',
fg: '#ffffff',
glyph: (s) => {
const c = s / 2;
const r = s * 0.26;
return (
);
},
},
// Qoder — black app tile with the official green/white Qoder mark.
qoder: {
bg: '#111113',
fg: '#ffffff',
glyph: qoderGlyph,
},
// DeepSeek — DeepSeek-blue with abstract whale-tail / wave glyph.
deepseek: {
bg: 'linear-gradient(135deg, #4d6bfe 0%, #1f3fce 100%)',
fg: '#ffffff',
glyph: (s) => {
const c = s / 2;
const r = s * 0.3;
return (
);
},
},
// MiMo — Xiaomi orange with "Mi" stylized mark.
mimo: {
bg: 'linear-gradient(135deg, #FF6900 0%, #FF4D00 100%)',
fg: '#ffffff',
glyph: (s) => {
const c = s / 2;
const r = s * 0.22;
return (
{/* Stylized "Mi" — three vertical bars */}
{/* Connecting roof */}
);
},
},
};
const FALLBACK: Visual = {
bg: 'linear-gradient(135deg, #6b7280 0%, #4b5563 100%)',
fg: '#ffffff',
glyph: (s) => {
const c = s / 2;
const r = s * 0.18;
return ;
},
};
export function AgentIcon({ id, size = 36, className }: Props) {
const v = VISUALS[id] ?? FALLBACK;
return (
);
}