Handoff Arrow

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

export const meta: CompendiumMeta = {
  id: 48,
  slug: 'handoff-arrow',
  name: 'Handoff Arrow',
  category: 'ai-collaboration',
  subcategory: 'composition',
  pillar: 'co',
  description: 'A human → AI → human relay diagram — making explicit who acts at each step of a composed task.',
  spec: `## Intent
Visualise the choreography of a single piece of work as it moves between human and AI. DoCoDeGo refuses the "AI does everything" framing: a human authors the spec, the AI composes the artefact, a human gatekeeps the merge. The arrow makes that explicit so accountability is never ambient.

## Acceptance Criteria
- [ ] Three role nodes: human → AI → human
- [ ] Each node labelled with the specific action
- [ ] Arrow visualises direction of handoff
- [ ] Distinguishes human vs AI by shape/colour

## Constraints
- Compact horizontal layout`,
  tags: ['list', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 82, a11y: 'aa', themed: true, animated: false },
};

const steps = [
  { who: 'Human',  role: 'Author',     act: 'Writes SPEC-019', kind: 'human' },
  { who: 'Agent',  role: 'Composer',   act: 'Drafts auth.ts',  kind: 'ai'    },
  { who: 'Human',  role: 'Gatekeeper', act: 'Approves merge',  kind: 'human' },
];
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black shadow-nb-sm p-3 overflow-hidden">
  <p class="text-[10px] font-mono uppercase tracking-widest opacity-60 mb-3">handoff · SPEC-019</p>

  <ol class="flex items-stretch gap-1">
    {steps.map((s, i) => (
      <>
        <li class:list={[
          'flex-1 border-2 border-black px-2 py-2 flex flex-col justify-between min-w-0',
          s.kind === 'human' ? 'bg-paper' : 'bg-co',
        ]}>
          <div class="flex items-center gap-1">
            <span class:list={[
              'inline-block w-2 h-2 border-2 border-black shrink-0',
              s.kind === 'human' ? 'bg-ink' : 'bg-paper',
            ]} aria-hidden="true"></span>
            <span class="font-mono text-[9px] uppercase tracking-widest opacity-70 truncate">{s.role}</span>
          </div>
          <p class="text-[11px] font-black uppercase leading-tight tracking-tight mt-1">{s.who}</p>
          <p class="text-[10px] leading-snug opacity-80 truncate">{s.act}</p>
        </li>
        {i < steps.length - 1 && (
          <li class="flex items-center text-base font-black select-none" aria-hidden="true">→</li>
        )}
      </>
    ))}
  </ol>

  <p class="mt-3 font-mono text-[9px] uppercase tracking-widest opacity-60 flex items-center gap-2">
    <span class="inline-flex items-center gap-1"><span class="inline-block w-2 h-2 bg-ink"></span> human</span>
    <span class="inline-flex items-center gap-1"><span class="inline-block w-2 h-2 bg-co border-2 border-black"></span> agent</span>
  </p>
</div>