Foundation · Agentic Components

Agentic Component Playground

Interactive reference for all 10 core agentic pattern components. Each tab includes live prop controls, all documented variants and edge states, a prop table, and token reference. No external Storybook dependency.

01 Identity02 Provenance03 Streaming04 Approval05 Conflict06 Chart07 Confidence08 Consent09 Escalation10 Thinking

AgentIdentityBadge

The primary trust signal for agent identity. Renders in three surfaces (inline, card, panel) with role-tier color semantics. Handles offline state and timeout detection.

Controls

role

surface

state

edge states

Live Preview

Treasury AgentORCHESTRATOR

claude-opus-4.6· 4m ago

▾

All Edge States

Offline (agentOnline=false)

✕AGENT UNAVAILABLE

Settlement AgentEXECUTOR

claude-sonnet-4-6

Timeout (timeoutAt set)

⏱AGENT TIMEOUT — NO RESPONSE · 30s

Risk MonitorVALIDATOR

claude-opus-4.6

Prop	Type	Default	Description
name	string	—	Agent display name. Used to derive monogram initial.
role	AgentRole	—	ORCHESTRATOR \| EXECUTOR \| VALIDATOR \| ADVISOR \| OBSERVER — drives color tier.
surface	"inline" \| "card" \| "panel"	"card"	Layout context. Inline for mentions, card for sidebars, panel for full-width.
state	DotState	"idle"	Current execution state shown via StatusDot.
agentOnline	boolean	true	False renders degraded state — never hides identity.
timeoutAt	string (ISO)	—	When set, shows no-response timeout UI with elapsed time.
capabilities	AgentCapability[]	—	Shown in card/panel surfaces. requiresApproval locks chip with gold border.

Token Reference

--ds-color-agencyORCHESTRATOR role color

--ds-color-temporalEXECUTOR role color, active link state

--ds-color-validationVALIDATOR role color, requiresApproval chip border

--ds-text-primaryADVISOR role color (neutral authority)

--ds-text-mutedOBSERVER role color, idle/passive state

--ds-color-outcome-negativeOffline state border and status

--ds-surface-raisedCard and panel container background

See also

Agent Identity

Avatar system, role badges, capability indicators

See also

Trust & Provenance

Approval ceremony and provenance trail patterns

See also

LLM Latency States

Streaming, tool-calling, and thinking states

See also

Agentic Design Language

Full interaction standard reference

See also

Patterns

Full component catalog — 86 AI-native patterns