Audit Search Result Row

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

export const meta: CompendiumMeta = {
  id: 543,
  slug: 'audit-search-result-row',
  name: 'Audit Search Result Row',
  category: 'governance-risk',
  subcategory: 'audits-and-logs',
  pillar: 'go',
  description: 'A search result row from the audit index — highlights the query span and shows surrounding context.',
  spec: `## Intent
Auditors hunt by keyword: a spec id, an actor handle, an action verb. This atom is the canonical search-hit row — match highlight, context line, breadcrumb back to the source log.

## Acceptance Criteria
- [ ] Query span is visually highlighted via token bg
- [ ] Shows timestamp + log source breadcrumb
- [ ] Context line wraps with no overflow
- [ ] Negative: does NOT show snippet ranks or scores

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

const hit = {
  ts: '2026-05-21 13:51',
  source: 'audit/governance.log',
  before: 'Same-Person rule waived for ',
  match: 'SPEC-204',
  after: ' release; documented in waiver register.',
};
---

<article data-this-component class="w-full bg-paper text-black border-4 border-black p-3 overflow-hidden">
  <header class="flex items-baseline justify-between gap-2 font-mono text-[10px] uppercase tracking-widest opacity-60">
    <span class="tabular-nums">{hit.ts}</span>
    <span class="truncate">{hit.source}</span>
  </header>
  <p class="mt-2 text-[12px] leading-snug font-medium">
    {hit.before}
    <mark class="bg-attention text-black border-2 border-black px-1 font-black">{hit.match}</mark>
    {hit.after}
  </p>
  <footer class="mt-3 pt-2 border-t-2 border-black flex items-baseline justify-between font-mono text-[9px] uppercase tracking-widest opacity-60">
    <span>search hit</span>
    <span>jump to log</span>
  </footer>
</article>