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/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 |
Real-time telemetry event stream monitoring tool executions, state diffs, tokens expended, and security policy checks.
ViewInteractive card-swipe approval stack for autonomous agent actions with multi-tier risk metadata, keyboard shortcuts (A/D), and sound feedback.
ViewInteractive multi-step wizard for synthesizing agent personas, custom system directives, tool clearance grants, and model tiers.
Viewpnpm dlx shadcn@latest add @spaceui/interactions-agent-usage-card