DesignX
Agent Ops@paxeer/agent-ops/budget-panelimplemented

Budget panel

Session spend against a cap.

Install

$pnpm exec designx add @paxeer/agent-ops/budget-panel

Preview

Loading preview...

Source code

components/designx/agent-ops/budget-panel.tsxtsx
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
  Progress,
} from "@paxeer/core";

export function BudgetPanel({
  spent = 38,
  cap = 120,
  unit = "USD",
}: {
  spent?: number;
  cap?: number;
  unit?: string;
}) {
  const pct = cap === 0 ? 0 : Math.min(100, (spent / cap) * 100);

  return (
    <Card className="gap-3 py-4" data-slot="budget-panel">
      <CardHeader className="px-4">
        <CardTitle className="text-[length:var(--md-sys-typescale-label-large-size)]">
          Budget panel
        </CardTitle>
        <CardDescription>
          {spent} / {cap} {unit} spent this session
        </CardDescription>
      </CardHeader>
      <CardContent className="px-4">
        <Progress value={pct} />
      </CardContent>
    </Card>
  );
}

Dependencies