Token Budget Bar

---
import type { CompendiumMeta } from '../../../data/types';

export const meta: CompendiumMeta = {
  id: 54,
  slug: 'token-budget-bar',
  name: 'Token Budget Bar',
  category: 'ai-collaboration',
  subcategory: 'status-and-budget',
  pillar: 'go',
  description: 'Tokens consumed against a declared budget — a literal resource ceiling for the agent.',
  spec: `## Intent
DoCoDeGo's governance pillar demands explicit resource ceilings. A token budget is the rawest one: how much thinking is this task allowed to cost? The bar shows consumption against allocation and shifts colour as the agent nears its ceiling.

## Acceptance Criteria
- [ ] Numerator (used) and denominator (budget) shown
- [ ] Progress bar fills proportionally
- [ ] Warns visually past 75%; alarms past 95%
- [ ] Names the spec the budget is tied to

## Constraints
- Tabular-nums for token counts`,
  tags: ['gauge', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 86, a11y: 'aa', themed: true, animated: false },
};

const used = 42_300;
const budget = 60_000;
const pct = Math.min(100, Math.round((used / budget) * 100));
const fmt = (n: number) => n.toLocaleString('en-US');
const fill = pct >= 95 ? 'bg-danger' : pct >= 75 ? 'bg-attention' : 'bg-co';
const verdict = pct >= 95 ? 'ceiling imminent' : pct >= 75 ? 'tightening' : 'within ceiling';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm p-3 overflow-hidden">
  <div class="flex items-baseline justify-between mb-1">
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">token budget</span>
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">SPEC-019</span>
  </div>

  <div class="flex items-baseline gap-2 mb-2">
    <span class="text-2xl font-black tabular-nums leading-none">{fmt(used)}</span>
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-50">/ {fmt(budget)} tok</span>
  </div>

  <div class="relative h-3 border-2 border-black bg-paper overflow-hidden" role="meter" aria-valuenow={used} aria-valuemin={0} aria-valuemax={budget} aria-label="token budget consumed">
    <div class:list={['h-full', fill]} style={`width: ${pct}%`}></div>
    <div class="absolute inset-0 flex items-center justify-end pe-1 pointer-events-none">
      <span class="font-mono text-[9px] font-black tabular-nums mix-blend-difference text-paper">{pct}%</span>
    </div>
  </div>

  <div class="flex items-baseline justify-between mt-2">
    <span class="font-mono text-[9px] uppercase tracking-widest opacity-60">
      remainder · {fmt(budget - used)}
    </span>
    <span class:list={[
      'font-mono text-[10px] uppercase tracking-widest font-black',
      pct >= 95 ? 'text-danger' : pct >= 75 ? 'text-attention' : 'text-co',
    ]}>
      {verdict}
    </span>
  </div>
</div>