Token Budget Remaining Bar

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

export const meta: CompendiumMeta = {
  id: 603,
  slug: 'token-budget-remaining-bar',
  name: 'Token Budget Remaining Bar',
  category: 'ai-collaboration',
  subcategory: 'status-and-budget',
  pillar: 'co',
  description: 'Inverse of the spend bar — what is left, not what is gone. The remainder is the headroom.',
  spec: `## Intent
Reviewers often need to know how much budget is LEFT, not how much has been spent. This bar fills from the right and depletes as the agent works — green when comfortable, attention when narrow, danger when nearly empty.

## Acceptance Criteria
- [ ] Bar depletes from full to empty as headroom shrinks
- [ ] Numeric remainder rendered with tabular-nums
- [ ] Colour shifts at 25% (attention) and 5% (danger) remaining
- [ ] Negative: does NOT show spend (only remainder)

## Constraints
- Tokens only, no personal references
- Theme-aware`,
  tags: ['gauge', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 88, a11y: 'aa', themed: true, animated: false },
};

const remaining = 17_700;
const budget = 60_000;
const pct = Math.max(0, Math.min(100, Math.round((remaining / budget) * 100)));
const fmt = (n: number) => n.toLocaleString('en-US');
const fill = pct <= 5 ? 'bg-danger' : pct <= 25 ? 'bg-attention' : 'bg-success';
const verdict = pct <= 5 ? 'depleted' : pct <= 25 ? 'narrowing' : 'comfortable';
---

<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">headroom</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(remaining)}</span>
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-50">tok remaining</span>
  </div>

  <div class="relative h-3 border-2 border-black bg-paper overflow-hidden" role="meter" aria-valuenow={remaining} aria-valuemin={0} aria-valuemax={budget} aria-label="token budget remaining">
    <div class:list={['h-full', fill]} style={`width: ${pct}%`}></div>
  </div>

  <div class="flex items-baseline justify-between mt-2">
    <span class="font-mono text-[9px] uppercase tracking-widest opacity-60 tabular-nums">{pct}% of {fmt(budget)}</span>
    <span class:list={[
      'font-mono text-[10px] uppercase tracking-widest font-black',
      pct <= 5 ? 'text-danger' : pct <= 25 ? 'text-attention' : 'text-success',
    ]}>{verdict}</span>
  </div>
</div>