GTR Event Row

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

export const meta: CompendiumMeta = {
  id: 462,
  slug: 'gtr-event-row',
  name: 'GTR Event Row',
  category: 'maturity-process',
  subcategory: 'reviews-and-logs',
  pillar: 'go',
  description: 'A single governance-trigger event row — when a threshold tripped, who routed it, what it became.',
  spec: `## Intent
The GTR ledger records every time a green metric crossed into red. Each row is one trigger: timestamp, signal, threshold, route. The row is the audit unit.

## Acceptance Criteria
- [ ] Timestamp, signal id, value vs threshold, route handle visible
- [ ] Value tinted with a danger token when over threshold
- [ ] Route handle is a generic @governor (no personal names)
- [ ] Negative: does NOT include a free-text comment

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

const evt = {
  ts: '2026-05-21 09:14',
  signal: 'ICS-LATENCY',
  value: 142,
  threshold: 90,
  unit: 'ms',
  route: '@governor',
};
const tripped = evt.value > evt.threshold;
---

<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 font-mono text-[10px] uppercase tracking-widest min-w-0">
    <span class="opacity-60 shrink-0 tabular-nums">{evt.ts}</span>
    <span class="font-black truncate">{evt.signal}</span>
  </div>
  <div class="mt-1 flex items-baseline gap-2 font-mono text-[11px] tabular-nums">
    <span class={tripped ? 'text-danger font-black' : 'font-black'}>{evt.value}{evt.unit}</span>
    <span class="opacity-50">/</span>
    <span class="opacity-70">{evt.threshold}{evt.unit}</span>
    <span class="ms-auto opacity-80">{evt.route}</span>
  </div>
  <div class="mt-1 h-1 border-2 border-black bg-paper relative overflow-hidden">
    <div class={`absolute inset-y-0 start-0 ${tripped ? 'bg-danger' : 'bg-success'}`} style={`width: ${Math.min(100, Math.round((evt.value / evt.threshold) * 50))}%`}></div>
  </div>
</article>