Agent State Pip

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

export const meta: CompendiumMeta = {
  id: 601,
  slug: 'agent-state-pip',
  name: 'Agent State Pip',
  category: 'ai-collaboration',
  subcategory: 'status-and-budget',
  pillar: 'co',
  description: 'A 4-state pip — idle, thinking, working, blocked — the smallest unit of agent legibility.',
  spec: `## Intent
The lowest-resolution agent status indicator: a single pip that says which of four states the agent is currently in. Composable into rosters, dashboards and inline status lines.

## Acceptance Criteria
- [ ] Renders one of four states: idle / thinking / working / blocked
- [ ] State maps to a distinct token colour
- [ ] State label visible as a monospace caption
- [ ] Negative: does NOT animate when idle

## Constraints
- Pure markup, theme-aware via tokens
- Reduced-motion suppresses pulse`,
  tags: ['badge', 'real-content', 'dark-mode-tested', 'animated', 'reduced-motion'],
  status: 'stable',
  health: { ics: 88, a11y: 'aa', themed: true, animated: true },
};

const state = 'working' as 'idle' | 'thinking' | 'working' | 'blocked';
const conf = {
  idle:     { label: 'IDLE',     dot: 'bg-paper border-2 border-black', pulse: false },
  thinking: { label: 'THINKING', dot: 'bg-co',                           pulse: true  },
  working:  { label: 'WORKING',  dot: 'bg-success',                      pulse: true  },
  blocked:  { label: 'BLOCKED',  dot: 'bg-attention',                    pulse: true  },
}[state];
---

<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">agent state</p>
  <div class="mt-3 flex items-center gap-3">
    <div class="relative shrink-0">
      <span class:list={['inline-block w-5 h-5 border-2 border-black', conf.dot]} aria-hidden="true"></span>
      {conf.pulse && (
        <span class:list={['absolute inset-0 w-5 h-5 border-2 border-black', conf.dot, 'opacity-60 animate-pip-ring']} aria-hidden="true"></span>
      )}
    </div>
    <span class="font-black text-[14px] uppercase tracking-tight">{conf.label}</span>
  </div>
  <p class="mt-3 font-mono text-[9px] uppercase tracking-widest opacity-60">primitive · status-and-budget</p>
</div>

<style>
  @keyframes pip-ring {
    0%   { transform: scale(1);   opacity: 0.6; }
    100% { transform: scale(2.2); opacity: 0;   }
  }
  [data-this-component] .animate-pip-ring {
    animation: pip-ring 1.6s ease-out infinite;
  }
  @media (prefers-reduced-motion: reduce) {
    [data-this-component] .animate-pip-ring { animation: none; opacity: 0.35; }
  }
</style>