Kill Switch

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

export const meta: CompendiumMeta = {
  id: 36,
  slug: 'kill-switch-button',
  name: 'Kill Switch',
  category: 'governance-risk',
  subcategory: 'controls',
  pillar: 'go',
  description: 'The flip-up red button — GO\'s safety primitive for halting an autonomous agent mid-run.',
  spec: `## Intent
Provide a single, unambiguous control to halt agent execution. The hinged cover prevents accidental fire; the red dome reads as "stop everything" from across the room.

## Acceptance Criteria
- [ ] Cover visually distinct from the button beneath
- [ ] Pulsing red dome communicates armed state
- [ ] Hazard stripe surround signals criticality
- [ ] Mono caption names the action ("HALT AGENTS")

## Constraints
- Visual only; no JS handler wired
- Reads from 2m on a NOC wall display
- Respects prefers-reduced-motion`,
  tags: ['card', 'animated', 'reduced-motion', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 84, a11y: 'aa', themed: true, animated: true },
};
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 relative overflow-hidden">
  <div class="absolute inset-0 opacity-10" aria-hidden="true" style="background-image: repeating-linear-gradient(45deg, var(--color-ink) 0 10px, transparent 10px 20px);"></div>

  <div class="relative flex items-center gap-4">
    <div class="relative w-28 h-28 shrink-0">
      <div class="absolute inset-0 border-4 border-black bg-paper" style="box-shadow: 4px 4px 0 0 var(--color-ink);"></div>
      <div class="ks-dome absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-16 h-16 border-4 border-black bg-danger"></div>
      <div class="absolute start-1/2 top-1/2 -translate-x-1/2 -translate-y-[60%] w-3 h-3 bg-paper border-2 border-black" aria-hidden="true"></div>
      <div class="absolute -top-3 start-1/2 -translate-x-1/2 w-20 h-6 border-4 border-black bg-ink origin-bottom" style="transform: translateX(-50%) rotate(-22deg);">
        <div class="absolute inset-x-2 top-1 h-0.5 bg-paper opacity-60"></div>
      </div>
    </div>

    <div class="min-w-0 flex-1">
      <p class="font-mono text-[10px] uppercase tracking-widest opacity-60">GO · safety primitive</p>
      <p class="mt-1 font-black text-lg uppercase leading-none">Halt agents</p>
      <p class="mt-2 text-[11px] leading-snug">Drops autonomy ceiling to 0%. Live tasks freeze; in-flight outputs are quarantined for human review.</p>
      <div class="mt-2 inline-flex items-center gap-1 px-2 py-1 border-2 border-black bg-danger text-white text-[10px] font-black uppercase tracking-widest">
        <span class="w-1.5 h-1.5 bg-paper ks-blink"></span>
        Armed
      </div>
    </div>
  </div>
</div>

<style>
  [data-this-component] .ks-dome {
    animation: ks-pulse 1600ms ease-in-out infinite;
  }
  [data-this-component] .ks-blink {
    animation: ks-blink 900ms steps(2) infinite;
  }
  @keyframes ks-pulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--color-danger); }
    50%      { box-shadow: 0 0 0 8px transparent; }
  }
  @keyframes ks-blink {
    50% { opacity: 0.2; }
  }
  @media (prefers-reduced-motion: reduce) {
    [data-this-component] .ks-dome,
    [data-this-component] .ks-blink {
      animation: none;
    }
  }
</style>