Agent marks

The marks of the agent CLIs and the dot of an account's color.

tsx

import type { AgentKind, UsageProvider } from '@adecore/agent-contracts';
import { AccountDot } from '@adecore/agents-react/agents/AccountDot';
import { AgentIcon } from '@adecore/agents-react/agents/AgentIcon';
import { ProviderLogo } from '@adecore/agents-react/agents/ProviderLogo';
import { CliMark, CliTile } from '@adecore/agents-react/providers/parts';
import '../shared/agents-host.ts';

const KINDS: AgentKind[] = ['claude', 'codex', 'gemini', 'copilot', 'apple'];
const PROVIDERS: UsageProvider[] = ['claude', 'codex'];

export default function MarksDemo() {
    return (
        <div className="grid grid-cols-[auto_1fr] items-center gap-x-6 gap-y-3 text-xs text-text-muted">
            <span>AgentIcon</span>
            <span className="flex items-center gap-3 text-text">
                {KINDS.map((kind) => (
                    <AgentIcon key={kind} kind={kind} size={20} />
                ))}
            </span>
            <span>CliMark</span>
            <span className="flex items-center gap-3">
                {KINDS.map((kind) => (
                    <CliMark key={kind} kind={kind} size={20} />
                ))}
            </span>
            <span>CliTile</span>
            <span className="flex items-center gap-3">
                <CliTile kind="claude" />
                <CliTile kind="codex" />
            </span>
            <span>ProviderLogo</span>
            <span className="flex items-center gap-3 text-text">
                {PROVIDERS.map((provider) => (
                    <ProviderLogo key={provider} provider={provider} size={20} />
                ))}
            </span>
            <span>AccountDot</span>
            <span className="flex items-center gap-3">
                <AccountDot color="blue" />
                <AccountDot color="amber" />
                <AccountDot color="teal" />
                <AccountDot color={undefined} />
            </span>
        </div>
    );
}

Component	Import
`AgentIcon({ kind, size?, className? })`	`agents/AgentIcon`	The mark of an `AgentKind` in the current text color, with a label for screen readers. A kind without a mark gets a robot.
`CliMark({ kind, size?, className? })`	`providers/parts`	The same mark in the CLI's chart color, so it matches the usage page.
`CliTile({ kind })`	`providers/parts`	A 24 pixel mark as tall as a title's first line, for a list row.
`ProviderLogo({ provider, size?, className? })`	`agents/ProviderLogo`	The mark of a `UsageProvider`, decorative.
`AccountDot({ color, className? })`	`agents/AccountDot`	An account's color: one of the host's `accents` by id, or the app's accent for any other.

size is in pixels, 14 by default. PROVIDER_PATHS holds the SVG paths of the usage providers' marks, and accountColor(id) the CSS color of an accent.

Agent marks ​

Agent marks