Agent Status Card

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

export const meta: CompendiumMeta = {
  id: 46,
  slug: 'agent-status-card',
  name: 'Agent Status Card',
  category: 'ai-collaboration',
  subcategory: 'status-and-budget',
  pillar: 'co',
  description: 'Live status of an AI agent — idle, reasoning, acting, or blocked-on-human — with its last verifiable action.',
  spec: `## Intent
Make an AI agent's current state legible to the human governor. An agent that is "reasoning" is not idle; one that is "blocked-on-human" must surface that clearly so a person knows to act. Borrows the visual language of a build-status badge.

## Acceptance Criteria
- [ ] Shows one of four states with a distinct colour
- [ ] Renders an animated pulse for active states
- [ ] Shows the timestamp of the last action
- [ ] Names the agent and its current task

## Constraints
- Theme-aware
- States readable at a glance from 2m away`,
  tags: ['card', 'animated', 'reduced-motion', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 84, a11y: 'aa', themed: true, animated: true },
};

const state = 'reasoning'; // idle | reasoning | acting | blocked
const stateConf = {
  idle:      { label: 'Idle',             dot: 'bg-paper border-2 border-black', pulse: false },
  reasoning: { label: 'Reasoning',        dot: 'bg-co',                           pulse: true  },
  acting:    { label: 'Acting',           dot: 'bg-success',                      pulse: true  },
  blocked:   { label: 'Blocked on Human', dot: 'bg-attention',                    pulse: true  },
}[state];
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm overflow-hidden">
  <header class="flex items-center justify-between px-3 py-2 border-b-2 border-black bg-ink text-paper">
    <span class="font-mono text-[10px] uppercase tracking-widest">agent · 04A</span>
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-70">ceiling · L2</span>
  </header>

  <div class="px-3 py-3 flex items-start gap-3">
    <div class="relative shrink-0 mt-0.5">
      <span class:list={['inline-block w-4 h-4', stateConf.dot]} aria-hidden="true"></span>
      {stateConf.pulse && (
        <span class:list={['absolute inset-0 w-4 h-4', stateConf.dot, 'opacity-60 animate-pulse-ring']} aria-hidden="true"></span>
      )}
    </div>
    <div class="min-w-0 flex-1">
      <p class="text-[10px] font-mono uppercase tracking-widest opacity-60">status</p>
      <p class="text-sm font-black uppercase tracking-tight leading-tight">{stateConf.label}</p>
      <p class="text-[11px] leading-snug opacity-80 mt-1 truncate">consuming SPEC-019 · drafting auth handler</p>
    </div>
  </div>

  <footer class="px-3 py-2 border-t-2 border-black flex items-baseline justify-between">
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60">last action</span>
    <span class="font-mono text-[10px] tabular-nums">14:02:11 · 12s ago</span>
  </footer>
</article>

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