Components

Agent

Agent-identity building blocks: avatars, pixel pawns, and attribution chips for rows and cells.

AgentAvatarInline identity chip: agent logo + bold name label. Resolves the name against the known-agent registry (components/agent/registry.js) for the logo and canonical label; unknown agents fall back to the generic spark mark + raw name.
AgentBinaryAnimated binary block — the pawn's "working" decoration rebuilt from two glyph paths (0 and 1). Digits swap within rows and purple highlight runs re-roll on independent, tweakable clocks.
AgentInlineCompact inline agent identity — pixel pawn beside a bold name (idle keeps its zzz; other decorations suppressed) and a "Vendor / kind / ● status" sub-line. Status drives both the pawn body (idle sleeps) and the dot; stopped dims the pawn and hollows the dot.
AgentInputBubbleDark "waiting for your input" callout with an action button and a stepped pixel tail — hangs above an AgentPawn in the needs-input state.
AgentMiniCardCompact agent summary card — AgentPawn state at a glance, workspace + provider identity, request/file stats inside pixel-frame icons, tools & skills, and navigation links. Pixel icons render via UxPixelArt (theme-aware).
AgentPawnThe "Agent" pixel pawn — composes a base body (awake or sleeping) with a state decoration floated above the head (binary while working, red alert on error). Art renders via UxPixelArt, so it is theme-aware (--px-* vars flip under .dark).
AgentPillAgent identity pill: pixel-pawn face in its own bordered cell + agent name and user in grape ("Claude Code / sofia"). Inline (one line) or stacked (name bold over user in italic). Pawn art via <img> — carries its own colors, never UxIcon.
AgentAvatar
AgentBinary
AgentInline
AgentInputBubble
AgentMiniCard
AgentPawn
AgentPill

Qpoint Brand Style Guide