AAR Card

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

export const meta: CompendiumMeta = {
  id: 28,
  slug: 'aar-card',
  name: 'AAR Card',
  category: 'maturity-process',
  subcategory: 'reviews-and-logs',
  pillar: 'de',
  description: 'After-Action Review summary card — shipped / slipped / learned, in three crisp panels.',
  spec: `## Intent
DoCoDeGo's AAR ritual reduces every cycle to three honest questions: what did we ship, what slipped, what did we learn. The card surfaces all three in one glance with no narrative padding.

## Acceptance Criteria
- [ ] Three labelled sections: SHIPPED / SLIPPED / LEARNED
- [ ] Cycle id and date visible in header
- [ ] Counts / deltas where applicable

## Constraints
- Static markup, theme-aware
- Mono header, bold uppercase section labels`,
  tags: ['card', 'list', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 88, a11y: 'aa', themed: true, animated: false },
};

const aar = {
  cycle: 'CYCLE-042',
  date:  '2026-05-19',
  shipped: ['SPEC-014 ICS scorer v2', 'SPEC-021 threat validator'],
  slipped: ['SPEC-019 GTR dashboard (carry)'],
  learned: 'Threat templates need worked examples before they bind reviewers.',
};
---

<article class="w-full bg-paper text-ink border-4 border-ink">
  <header class="flex items-baseline justify-between gap-2 px-3 py-2 border-b-4 border-ink bg-do text-black">
    <span class="font-mono text-[10px] uppercase tracking-widest font-bold truncate">// AAR · {aar.cycle}</span>
    <span class="font-mono text-[10px] uppercase tracking-widest shrink-0">{aar.date}</span>
  </header>
  <div class="grid grid-cols-1">
    <section class="px-3 py-2 border-b-2 border-ink">
      <div class="flex items-baseline justify-between">
        <span class="font-black text-[10px] uppercase tracking-widest">Shipped</span>
        <span class="font-mono text-[10px] tabular-nums">{aar.shipped.length}</span>
      </div>
      <ul class="mt-1 space-y-0.5">
        {aar.shipped.map((s) => (
          <li class="font-mono text-[11px] flex gap-1.5 break-words">
            <span class="text-success font-black shrink-0" aria-hidden="true">+</span>
            <span class="min-w-0">{s}</span>
          </li>
        ))}
      </ul>
    </section>
    <section class="px-3 py-2 border-b-2 border-ink">
      <div class="flex items-baseline justify-between">
        <span class="font-black text-[10px] uppercase tracking-widest">Slipped</span>
        <span class="font-mono text-[10px] tabular-nums">{aar.slipped.length}</span>
      </div>
      <ul class="mt-1 space-y-0.5">
        {aar.slipped.map((s) => (
          <li class="font-mono text-[11px] flex gap-1.5 break-words">
            <span class="text-attention font-black shrink-0" aria-hidden="true">!</span>
            <span class="min-w-0">{s}</span>
          </li>
        ))}
      </ul>
    </section>
    <section class="px-3 py-2">
      <span class="font-black text-[10px] uppercase tracking-widest">Learned</span>
      <p class="mt-1 font-mono text-[11px] leading-snug">{aar.learned}</p>
    </section>
  </div>
</article>