An interactive agent status and usage card with segmented progress tracking, live telemetry hours advancement, morph icon controls, squircle buttons, squishmoji status avatar, and a collapsible cost breakdown.
pnpm dlx shadcn@latest add @spaceui/components-spaceui-interactions-agent-usage-cardimport { AgentUsageCard } from '@/components/interactions/agent-usage-card'<AgentUsageCard
title="Site Reliability Agent"
description="Autonomous incident mitigation and cluster telemetry."
usedHours={185}
totalHours={320}
resetLabel="Resets in 8 days"
defaultWorking={true}
/>| Prop | Type | Default | Description |
|---|---|---|---|
title | string | Site Reliability Agent | Title of the agent or service |
description | string | Autonomous incident mitigation and cluster telemetry. | Subtitle description beneath the title |
usedHours | number | 185 | Number of hours consumed so far |
totalHours | number | 320 | Total monthly quota in hours |
resetLabel | string | Resets in 8 days | Helper text indicating when the billing quota resets |
costItems | CostItem[] | DEFAULT_COST_ITEMS | Breakdown of hourly costs per component/model |
defaultWorking | boolean | false | Initial working / running state |
defaultExpanded | boolean | false | Initial expanded state of the cost breakdown accordion |
onWorkingChange | (working: boolean) => void | - | Callback triggered when the agent is started or paused |
className | string | - | Additional class name applied to outer card container |
An interactive multi-agent pipeline visualization with real-time physics, event logs, and playback controls.
ViewAn interactive currency converter and token swap card with real-time exchange rates, NumberFlow spring animations, Space UI Select with flags, and a liquid metal squircle button.
ViewA self-playing deploy pipeline that advances on its own, pauses on hover, and reveals per-step detail — drop it in to turn a static log into a living status feed.
Viewpnpm dlx shadcn@latest add @spaceui/components-spaceui-interactions-agent-usage-card