Agent Card

AI · AgentCard, AgentDetails, Button

One agent at a glance (AgentCard) and everything about it beside a chat (AgentDetails).

AgentCard: name, role, tint, status + statusLabel, model, cost, last, onClick, onChat.
AgentDetails: name, role, tint, status + statusLabel, sections ({title, meta, items (KeyValue) or children, open}), actions.

PreviewCode

AtlasSupport triage

Working

Model: Claude Sonnet 5.5
Cost today: €1.84
Last action: Drafted a reply to Northwind

LedgerBookkeeping

Waiting for approval

Model: Claude Haiku 5.5
Cost today: €0.22
Last action: Proposed 3 bookings

AtlasSupport triage · NorthwindWorking

Model: Claude Sonnet 5.5
Today: €1.84
This month: €38.20
Runs: 142

Mailbox: read, draft
Knowledge base: read

Props

AgentCard

Prop	Type	Notes
`name`	`string`	Required
`role?`	`string`
`tint?`	`Tint`
`status?`	`Status`
`statusLabel?`	`string`
`model?`	`string`
`cost?`	`string`
`last?`	`ReactNode`
`onClick?`	`() => void`
`onChat?`	`() => void`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

AgentDetails

Prop	Type	Notes
`name`	`string`	Required
`role?`	`string`
`tint?`	`Tint`
`status?`	`Status`
`statusLabel?`	`string`
`sections?`	`{ title: string; meta?: ReactNode; items?: KeyValueItem[]; children?: ReactNode; open?: boolean; }[]`
`actions?`	`ReactNode[]`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.

Button

Prop	Type	Notes
`variant?`	`"primary" \| "secondary" \| "soft" \| "ghost" \| "danger" \| "danger-solid"`
`size?`	`"md" \| "sm"`
`icon?`	`IconName`
`iconRight?`	`IconName`
`disabled?`	`boolean`
`type?`	`"button" \| "submit"`
`onClick?`	`(e: MouseEvent<HTMLButtonElement>) => void`
`children?`	`ReactNode`
`className?`	`string`	Extra class on the root element.
`style?`	`CSSProperties`	Inline style on the root element.