Autonomy Slider

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

export const meta: CompendiumMeta = {
  id: 37,
  slug: 'autonomy-slider',
  name: 'Autonomy Slider',
  category: 'governance-risk',
  subcategory: 'controls',
  pillar: 'go',
  description: 'Sets the AI autonomy ceiling — how much an agent may decide before a human must sign off.',
  spec: `## Intent
Communicate that autonomy is a dial, not a switch. Risk zones along the track make it physically obvious when the operator is pushing into territory that needs more guardrails.

## Acceptance Criteria
- [ ] Track is colour-banded: safe / review / restricted
- [ ] Thumb position maps to a numeric percentage
- [ ] Zone label updates with the value
- [ ] DoCoDeGo language: "Suggest", "Review", "Autonomous"

## Constraints
- Static SSR render of a representative value
- No external libs`,
  tags: ['gauge', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 82, a11y: 'aa', themed: true, animated: false },
};

const value = 62;
const zone =
  value < 33 ? { label: 'Suggest-only',  tone: 'bg-success'   } :
  value < 75 ? { label: 'Review-gated',  tone: 'bg-attention' } :
               { label: 'Autonomous',    tone: 'bg-danger'    };
---

<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">
    <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">Autonomy ceiling</p>
    <p class="font-black text-2xl leading-none">{value}<span class="text-xs opacity-50">%</span></p>
  </div>

  <div class="relative mt-4 h-6 border-4 border-black flex">
    <div class="flex-[33] bg-success"></div>
    <div class="flex-[42] bg-attention"></div>
    <div class="flex-[25] bg-danger"></div>

    <div class="absolute top-1/2 -translate-y-1/2 -translate-x-1/2" style={`left:${value}%`}>
      <div class="w-5 h-8 border-4 border-black bg-paper" style="box-shadow: 3px 3px 0 0 var(--color-ink);"></div>
    </div>
  </div>

  <div class="mt-2 grid grid-cols-3 text-[9px] font-mono uppercase tracking-widest opacity-70">
    <span>0 · Suggest</span>
    <span class="text-center">33 · Review</span>
    <span class="text-end">75 · Auto</span>
  </div>

  <div class:list={['mt-3 inline-flex items-center gap-2 px-2 py-1 border-2 border-black text-white', zone.tone]}>
    <span class="font-black text-[10px] uppercase tracking-widest">{zone.label}</span>
  </div>
</div>