AAR Row

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

export const meta: CompendiumMeta = {
  id: 461,
  slug: 'aar-row',
  name: 'AAR Row',
  category: 'maturity-process',
  subcategory: 'reviews-and-logs',
  pillar: 'de',
  description: 'A single After-Action Review row — cycle id, verdict glyph, one-line lesson.',
  spec: `## Intent
The AAR ledger compresses each cycle to one line: what cycle, did it converge, what did we learn. This row is that line — the atom of the AAR log.

## Acceptance Criteria
- [ ] Cycle id, date, verdict glyph and lesson all visible on one row
- [ ] Verdict glyph colour-coded via tokens (success / attention / danger)
- [ ] Truncates the lesson without wrapping
- [ ] Negative: does NOT include a narrative paragraph

## Constraints
- Pure markup, no JS
- Theme-aware via tokens
- Self-contained — no shared imports`,
  tags: ['list', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 90, a11y: 'aa', themed: true, animated: false },
};

const row = {
  cycle: 'CYCLE-042',
  date: '2026-05-19',
  verdict: 'success' as const,
  glyph: '+',
  lesson: 'Threat templates need worked examples before they bind reviewers.',
};
const verdictText = row.verdict === 'success' ? 'CONVERGED' : row.verdict === 'attention' ? 'PARTIAL' : 'MISSED';
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black px-3 py-2 overflow-hidden">
  <div class="flex items-baseline gap-2 min-w-0">
    <span class="font-mono text-[10px] uppercase tracking-widest font-black shrink-0">{row.cycle}</span>
    <span class="font-mono text-[10px] uppercase tracking-widest opacity-60 shrink-0">{row.date}</span>
    <span class={`font-black text-[10px] uppercase tracking-widest px-1.5 py-0.5 border-2 border-black bg-${row.verdict} ${row.verdict === 'danger' || row.verdict === 'attention' ? 'text-white' : 'text-black'} shrink-0`}>
      <span aria-hidden="true">{row.glyph}</span>
      <span class="ms-1">{verdictText}</span>
    </span>
  </div>
  <p class="mt-1 font-mono text-[11px] leading-snug truncate">{row.lesson}</p>
  <div class="mt-1 flex items-baseline justify-between font-mono text-[9px] uppercase tracking-widest opacity-60">
    <span>aar row</span>
    <span>@author</span>
  </div>
</article>