Autonomy Level Badge

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

export const meta: CompendiumMeta = {
  id: 665,
  slug: 'autonomy-level-badge',
  name: 'Autonomy Level Badge',
  category: 'ai-collaboration',
  subcategory: 'profile',
  pillar: 'go',
  description: 'Autonomy tier badge — Augmented / Supervised / Bounded / Strategic — the agent’s ceiling.',
  spec: `## Intent
Autonomy is not a switch — it is a tier. This badge encodes the four DoCoDeGo ceilings so any consumer can see what an agent is allowed to do without reading a policy.

## Acceptance Criteria
- [ ] One of: AUGMENTED / SUPERVISED / BOUNDED / STRATEGIC
- [ ] Carries a tier number L1..L4
- [ ] Negative: does NOT show capabilities`,
  tags: ['badge', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 93, a11y: 'aa', themed: true, animated: false },
};

const levels = [
  { tier: 'L1', label: 'AUGMENTED', bg: 'bg-do' },
  { tier: 'L2', label: 'SUPERVISED', bg: 'bg-co' },
  { tier: 'L3', label: 'BOUNDED', bg: 'bg-de' },
  { tier: 'L4', label: 'STRATEGIC', bg: 'bg-go' },
] as const;
const active = 2;
---

<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">autonomy ceiling</p>
  <div class="mt-2 grid grid-cols-4 gap-0">
    {levels.map((l, i) => (
      <div class={`border-4 border-black ${i === active ? l.bg : 'bg-paper'} ${i === active ? 'shadow-[2px_2px_0_0_var(--color-ink)]' : 'opacity-40'} ${i > 0 ? '-ms-1' : ''} p-1.5 text-center`}>
        <p class="font-black text-[11px] leading-none tabular-nums">{l.tier}</p>
        <p class="font-mono text-[7px] uppercase tracking-widest mt-1 leading-none">{l.label}</p>
      </div>
    ))}
  </div>
  <p class="mt-2 font-mono text-[10px] uppercase tracking-widest">current &rarr; <span class="font-black">{levels[active].label}</span></p>
</div>