Usage meter

A quota bar that appears at three-quarters rather than at the wall, with the reset time, the per-action cost at the point of choice, and a colleague's share on a team plan. Reasoning and tool calls count, and are invisible.

npx shadcn@latest add button

Tokens this needs: --card, --card-foreground, --muted, --muted-foreground, --border, --chart-1, --scale-seq-2, --scale-seq-3
The status, chart, scale, state and direction names are an extension,
not a rename. shadcn has --destructive and five --chart-* and nothing
else in this territory.

────────────────────────────────────────────────────────────────────────
// UsageMeter.tsx
────────────────────────────────────────────────────────────────────────

import { Button } from "@/components/ui/button";

/** Who consumed what. On a team plan the colleague's share is the difference
 *  between a product problem and a people problem. */
export type Share = { who: string; used: number };

/** A thing the viewer can choose, with what it costs. The cost is required:
 *  marking it here, while they can still decide, is worth more than any
 *  accuracy in the bar. */
export type Action = { id: string; label: string; cost: number };

/** Shown from three-quarters consumed. Always-on is ignored, and makes an
 *  unbounded product feel metered. */
const APPEARS_AT = 0.75;

const SHARE_COLOR = ["bg-scale-seq-3", "bg-scale-seq-2", "bg-scale-seq-1"];

const resetLabel = (at: Date, now: Date) => {
  const days = (at.getTime() - now.getTime()) / 86_400_000;
  return days < 7
    ? at.toLocaleString("en-GB", { weekday: "short", hour: "2-digit", minute: "2-digit", hour12: false, timeZone: "UTC" })
    : at.toLocaleDateString("en-GB", { day: "numeric", month: "short", timeZone: "UTC" });
};

export function UsageMeter({ limit, unit = "credit", shares, resetsAt, now = new Date(), actions, onChoose, fallback, stoppedCost }: {
  limit: number;
  /** Something the viewer can turn into work. "credit", not "token". */
  unit?: string;
  /** The viewer first. */
  shares: Share[];
  /** A limit with no reset is a wall. */
  resetsAt: Date;
  /** The clock to count against. Pass one to render on a server. */
  now?: Date;
  actions: Action[];
  onChoose: (id: string) => void;
  /** What still works once the budget is gone. Exhaustion is a designed state. */
  fallback: string;
  /** What the last stopped response cost, if one was stopped. It counted. */
  stoppedCost?: number;
}) {
  const used = shares.reduce((n, s) => n + s.used, 0);
  if (used / limit < APPEARS_AT) return null;
  const left = Math.max(0, limit - used);
  const plural = (n: number) => `${n} ${unit}${n === 1 ? "" : "s"}`;

  return (
    <div className="text-xs text-muted-foreground">
      <div className="flex h-4 w-full overflow-hidden rounded-sm bg-muted" role="progressbar" aria-valuenow={used} aria-valuemax={limit}
        aria-label={`${used} of ${limit} ${unit}s used`}>
        {shares.map((s, i) => (
          <span key={s.who} className={SHARE_COLOR[i % SHARE_COLOR.length]} style={{ width: `${(s.used / limit) * 100}%` }} />
        ))}
      </div>
      <div className="mt-2 flex flex-wrap gap-x-4 tabular-nums">
        {shares.map((s) => <span key={s.who}>{s.who}, {s.used}</span>)}
        <span className="ml-auto">resets {resetLabel(resetsAt, now)}</span>
      </div>

      <div className="mt-4 flex flex-wrap gap-3 border-t pt-4">
        {actions.map((a) => {
          const dear = a.cost > left;
          return (
            <Button key={a.id} variant="outline" onClick={() => onChoose(a.id)} disabled={dear}
              className={`h-auto flex-col items-start gap-1 px-3 py-2 ${a.cost > 1 ? "border-chart-1 bg-chart-1/10 text-chart-1 hover:bg-chart-1/20 hover:text-chart-1" : "bg-muted"}`}>
              <span>{a.label}</span>
              <span className="text-[11px] font-normal tabular-nums">{plural(a.cost)}{dear && ", more than is left"}</span>
            </Button>
          );
        })}
        <p className="flex-1 basis-40 self-stretch rounded-md border bg-muted px-3 py-2 text-card-foreground">
          at the limit, {fallback} still answers
        </p>
      </div>

      {stoppedCost !== undefined && (
        <p className="mt-4">a stopped response still consumed what it wrote: {plural(stoppedCost)}</p>
      )}
    </div>
  );
}

────────────────────────────────────────────────────────────────────────
// demo.tsx
────────────────────────────────────────────────────────────────────────

import { useState } from "react";
import { UsageMeter, type Share } from "./UsageMeter";

/**
 * A team plan of 600 credits with 452 gone, so the meter has appeared. The
 * viewer used 300, a colleague 152, and a response stopped a moment ago still
 * cost 6. Choosing an action spends its cost against the viewer's share.
 */
const NOW = new Date("2026-09-15T10:00:00Z");

export default function Demo() {
  const [shares, setShares] = useState<Share[]>([
    { who: "you", used: 300 },
    { who: "a colleague", used: 152 },
  ]);
  const spend = (cost: number) =>
    setShares(([you, ...rest]) => [{ ...you, used: you.used + cost }, ...rest]);

  return (
    <div className="rounded-lg border bg-card p-4">
      <UsageMeter
        limit={600}
        shares={shares}
        resetsAt={new Date("2026-09-22T09:00:00Z")}
        now={NOW}
        actions={[
          { id: "answer", label: "answer now", cost: 1 },
          { id: "research", label: "research", cost: 40 },
        ]}
        onChoose={(id) => spend(id === "research" ? 40 : 1)}
        fallback="the fast model"
        stoppedCost={6}
      />
    </div>
  );
}