Confidence Meter

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

export const meta: CompendiumMeta = {
  id: 50,
  slug: 'confidence-meter',
  name: 'Confidence Meter',
  category: 'ai-collaboration',
  subcategory: 'status-and-budget',
  pillar: 'go',
  description: 'A self-declared confidence bar (0–100) with the threshold at which the agent must escalate.',
  spec: `## Intent
Force the agent to publish its own confidence per output. The bar makes the number visceral; the threshold marker shows the line below which the work must escalate to a human governor. This is honesty as a UI primitive.

## Acceptance Criteria
- [ ] Renders a horizontal bar filled to the confidence value
- [ ] Shows the numeric value (0–100)
- [ ] Marks the escalation threshold with a tick
- [ ] Colour shifts at threshold crossings

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

const value = 72;
const threshold = 80;
const fillClass = value >= threshold ? 'bg-success' : value >= 50 ? 'bg-do' : 'bg-attention';
const verdict = value >= threshold ? 'auto-merge eligible' : 'sign-off required';
---

<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-2">
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">declared confidence</span>
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">SPEC-019 · AC #2</span>
  </div>

  <div class="flex items-baseline gap-3 mb-2">
    <span class="text-3xl font-black tabular-nums leading-none">{value}</span>
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">/ 100</span>
  </div>

  <div class="relative h-4 border-2 border-black bg-paper overflow-hidden" role="meter" aria-valuenow={value} aria-valuemin={0} aria-valuemax={100} aria-label="declared confidence">
    <div class:list={['h-full border-e-2 border-black', fillClass]} style={`width: ${value}%`}></div>
    <div
      class="absolute top-0 bottom-0 w-0.5 bg-ink"
      style={`left: ${threshold}%`}
      aria-label={`escalation threshold ${threshold}`}
    ></div>
    <div
      class="absolute -top-1 w-2 h-2 bg-ink border-2 border-paper"
      style={`left: calc(${threshold}% - 4px)`}
      aria-hidden="true"
    ></div>
  </div>

  <div class="flex items-baseline justify-between mt-2">
    <span class="font-mono text-[9px] uppercase tracking-widest opacity-60">
      threshold · {threshold}
    </span>
    <span class:list={[
      'font-mono text-[10px] uppercase tracking-widest font-black',
      value >= threshold ? 'text-success' : 'text-attention',
    ]}>
      {verdict}
    </span>
  </div>
</div>