Agent Card

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

export const meta: CompendiumMeta = {
  id: 55,
  slug: 'agent-card',
  name: 'Agent Card',
  category: 'ai-collaboration',
  subcategory: 'profile',
  pillar: 'go',
  description: 'An agent profile — capabilities, autonomy ceiling, accountable owner — like a passport for an AI.',
  spec: `## Intent
An agent is not anonymous labour. It has a name, a defined capability set, a hard autonomy ceiling, and a named human owner who is accountable for its outputs. The card collects that identity into a single inspectable surface — closer to a passport than a profile picture.

## Acceptance Criteria
- [ ] Names the agent and its model
- [ ] Lists 3+ declared capabilities as chips
- [ ] Shows the autonomy ceiling explicitly
- [ ] Names the accountable human owner

## Constraints
- Compact; resembles a passport / id card`,
  tags: ['card', 'badge', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 88, a11y: 'aa', themed: true, animated: false },
};

const capabilities = ['read-spec', 'write-code', 'run-tests', 'open-pr'];
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm overflow-hidden">
  <header class="flex items-stretch border-b-4 border-black">
    <div class="w-14 shrink-0 bg-co border-e-4 border-black flex items-center justify-center">
      <span class="font-black text-xl leading-none tracking-tight">04A</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 profile</p>
      <p class="text-sm font-black uppercase leading-tight tracking-tight truncate">Auth Composer</p>
      <p class="font-mono text-[10px] opacity-70 truncate">model · sonnet-4.7 · 1M ctx</p>
    </div>
  </header>

  <section class="px-3 py-2 border-b-2 border-black">
    <p class="font-mono text-[9px] uppercase tracking-widest opacity-60 mb-1">capabilities</p>
    <ul class="flex flex-wrap gap-1">
      {capabilities.map(c => (
        <li class="px-1.5 py-0.5 border-2 border-black bg-paper font-mono text-[9px] uppercase tracking-widest">
          {c}
        </li>
      ))}
    </ul>
  </section>

  <section class="grid grid-cols-2 text-[10px] font-mono uppercase tracking-widest">
    <div class="px-3 py-2 border-e-2 border-black">
      <p class="opacity-60">ceiling</p>
      <p class="font-black normal-case tracking-tight text-[11px]">L2 · PR draft</p>
    </div>
    <div class="px-3 py-2">
      <p class="opacity-60">owner</p>
      <p class="font-black normal-case tracking-tight text-[11px]">@platform</p>
    </div>
  </section>

  <footer class="px-3 py-1.5 border-t-2 border-black bg-ink text-paper flex items-center justify-between font-mono text-[9px] uppercase tracking-widest">
    <span>id · agt-04A-7b3f</span>
    <span class="opacity-70">issued · 2026-04-02</span>
  </footer>
</article>