Confidence T-Bar

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

export const meta: CompendiumMeta = {
  id: 43,
  slug: 'confidence-threshold',
  name: 'Confidence T-Bar',
  category: 'governance-risk',
  subcategory: 'thresholds',
  pillar: 'go',
  description: 'AI confidence vs the required threshold to act autonomously — a T-bar comparator.',
  spec: `## Intent
Autonomy is gated by confidence. Show the agent's self-reported confidence alongside the operator-set "act autonomously" threshold so a human can see, instantly, whether the agent gets to proceed or must escalate.

## Acceptance Criteria
- [ ] Two vertical bars: current confidence + required threshold
- [ ] If confidence < threshold, agent must escalate (visual)
- [ ] Percent readouts beneath each bar
- [ ] T-bar form factor (two stems on a baseline)

## Constraints
- SVG-free; pure flex layout
- Compact enough for an inspector panel`,
  tags: ['chart', 'gauge', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 82, a11y: 'aa', themed: true, animated: false },
};

const confidence = 71;
const threshold  = 85;
const gated = confidence < threshold;
const confTone = gated ? 'bg-attention' : 'bg-success';
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <div class="flex items-baseline justify-between mb-2">
    <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">Agent · self-reported confidence</p>
    <span class:list={['px-2 py-0.5 border-2 border-black text-white font-black text-[10px] uppercase tracking-widest', confTone]}>
      {gated ? 'Escalate' : 'Proceed'}
    </span>
  </div>

  <div class="flex items-end gap-6 h-32 border-b-4 border-black">
    <div class="flex-1 flex flex-col items-center justify-end h-full">
      <span class="font-mono text-[10px] mb-1 tabular-nums">{confidence}%</span>
      <div class:list={['w-12 border-4 border-black', confTone]} style={`height:${confidence}%`}></div>
    </div>
    <div class="flex-1 flex flex-col items-center justify-end h-full">
      <span class="font-mono text-[10px] mb-1 tabular-nums">{threshold}%</span>
      <div class="w-12 border-4 border-black bg-ink" style={`height:${threshold}%`}>
        <div class="w-full h-1 bg-paper mt-1" aria-hidden="true"></div>
      </div>
    </div>
  </div>
  <div class="grid grid-cols-2 mt-1 text-[10px] font-mono uppercase tracking-widest opacity-70">
    <span class="text-center">Have</span>
    <span class="text-center">Need</span>
  </div>

  <p class="mt-2 text-[11px] leading-snug">
    {gated
      ? <>Gap of <b>{threshold - confidence}pts</b> — agent must request sign-off.</>
      : <>Above threshold — agent may act under standing authority.</>}
  </p>
</div>