Autonomy Rung Indicator

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

export const meta: CompendiumMeta = {
  id: 442,
  slug: 'autonomy-rung-indicator',
  name: 'Autonomy Rung Indicator',
  category: 'maturity-process',
  subcategory: 'indicators',
  pillar: 'go',
  description: 'Four-rung indicator for AI autonomy level — Augmented, Supervised, Bounded, Strategic.',
  spec: `## Intent
Maturity stages describe the team; autonomy rungs describe the AI. This indicator names the current rung so reviewers know how much agency the system holds before they read the change.

## Acceptance Criteria
- [ ] Four rungs labelled in canonical order
- [ ] Current rung filled with go-pillar token
- [ ] Rungs below current marked complete; above are faded
- [ ] Negative: does NOT imply higher is always better

## Constraints
- Pure CSS, no JS
- Theme-aware`,
  tags: ['list', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 90, a11y: 'aa', themed: true, animated: false },
};

const rungs = [
  { n: 1, name: 'Augmented',  note: 'human drives' },
  { n: 2, name: 'Supervised', note: 'review each' },
  { n: 3, name: 'Bounded',    note: 'scoped autonomy' },
  { n: 4, name: 'Strategic',  note: 'agent-led' },
];
const here = 3;
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black overflow-hidden">
  <header class="flex items-baseline justify-between px-3 py-2 border-b-2 border-black">
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">// autonomy</span>
    <span class="font-mono text-[10px] uppercase tracking-widest">rung {here}/4</span>
  </header>
  <ol class="p-3 flex flex-col gap-1">
    {rungs.map((r) => {
      const state = r.n === here ? 'here' : r.n < here ? 'done' : 'future';
      return (
        <li
          class:list={[
            'border-4 border-black px-2.5 py-1.5 flex items-center justify-between gap-2',
            state === 'here'   && 'bg-go text-black',
            state === 'done'   && 'bg-paper text-black',
            state === 'future' && 'bg-paper text-black opacity-40',
          ]}
          aria-current={state === 'here' ? 'step' : undefined}
        >
          <div class="flex items-center gap-2 min-w-0">
            <span class:list={[
              'w-4 h-4 border-2 border-black flex items-center justify-center font-black text-[9px] shrink-0 tabular-nums',
              state === 'done' ? 'bg-black text-paper' : 'bg-paper text-black',
            ]}>{state === 'done' ? '✓' : r.n}</span>
            <span class="font-black uppercase text-[11px] tracking-wide truncate">{r.name}</span>
          </div>
          <span class="font-mono text-[9px] uppercase tracking-widest opacity-70 shrink-0">{r.note}</span>
        </li>
      );
    })}
  </ol>
</div>
</content>
</invoke>