Agent Identity Card

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

export const meta: CompendiumMeta = {
  id: 661,
  slug: 'agent-identity-card',
  name: 'Agent Identity Card',
  category: 'ai-collaboration',
  subcategory: 'profile',
  pillar: 'co',
  description: 'Identity primitive — agent name, role and autonomy level in one stamped strip.',
  spec: `## Intent
Before an agent acts, the system must answer: who is this, what does it do, and how far is it allowed to go? The identity card collapses those three answers into a single inspectable strip.

## Acceptance Criteria
- [ ] Renders agent name + role + autonomy level
- [ ] Role shown as a chip, autonomy shown as a stamped letter
- [ ] Negative: does NOT show capabilities (that is a separate atom)

## Constraints
- Self-contained, tokens only
- Theme-aware`,
  tags: ['card', 'badge', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 92, a11y: 'aa', themed: true, animated: false },
};

const a = { name: 'Spec Composer', role: 'spec drafter', autonomy: 'L2', autonomyLabel: 'BOUNDED' };
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black overflow-hidden flex items-stretch">
  <div class="w-14 shrink-0 bg-co border-e-4 border-black flex flex-col items-center justify-center py-2">
    <span class="font-black text-2xl leading-none tracking-tight">{a.autonomy}</span>
    <span class="font-mono text-[8px] uppercase tracking-widest mt-1 opacity-80">level</span>
  </div>
  <div class="px-3 py-2 flex-1 min-w-0">
    <p class="font-mono text-[9px] uppercase tracking-widest opacity-60">agent</p>
    <p class="font-black text-sm uppercase leading-tight tracking-tight truncate">{a.name}</p>
    <div class="mt-1.5 flex items-center gap-1.5 flex-wrap">
      <span class="px-1.5 py-0.5 border-2 border-black bg-paper font-mono text-[9px] uppercase tracking-widest">{a.role}</span>
      <span class="px-1.5 py-0.5 border-2 border-black bg-ink text-paper font-mono text-[9px] uppercase tracking-widest">{a.autonomyLabel}</span>
    </div>
  </div>
</article>