Confidence Indicator Pip

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

export const meta: CompendiumMeta = {
  id: 666,
  slug: 'confidence-indicator-pip',
  name: 'Confidence Indicator Pip',
  category: 'ai-collaboration',
  subcategory: 'profile',
  pillar: 'co',
  description: 'A 5-pip indicator showing the agent’s self-declared confidence on the last response.',
  spec: `## Intent
Confidence is meta-information. Five pips render an agent's self-declared confidence on its last action so a reviewer can prioritise low-confidence outputs.

## Acceptance Criteria
- [ ] Five pips, N filled = confidence/20
- [ ] Below 3: attention; below 2: danger
- [ ] Negative: does NOT round below 0 or above 5`,
  tags: ['badge', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 90, a11y: 'aa', themed: true, animated: false },
};

const confidence = 72;
const filled = Math.max(0, Math.min(5, Math.round(confidence / 20)));
const colour = filled >= 4 ? 'bg-success' : filled >= 3 ? 'bg-co' : filled >= 2 ? 'bg-attention' : 'bg-danger';
const label = filled >= 4 ? 'HIGH' : filled >= 3 ? 'MEDIUM' : filled >= 2 ? 'LOW' : 'GUESSING';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <p class="font-mono text-[9px] uppercase tracking-widest opacity-60">confidence</p>
  <div class="mt-2 flex items-center gap-1.5">
    {[0, 1, 2, 3, 4].map((i) => (
      <span class={`w-4 h-4 border-2 border-black ${i < filled ? colour : 'bg-paper'}`}></span>
    ))}
  </div>
  <div class="mt-3 flex items-baseline justify-between">
    <span class="font-black text-2xl tabular-nums leading-none">{confidence}%</span>
    <span class="font-mono text-[10px] uppercase tracking-widest font-black">{label}</span>
  </div>
</div>