Agent Handoff Arrow Variant

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

export const meta: CompendiumMeta = {
  id: 641,
  slug: 'agent-handoff-arrow-variant',
  name: 'Agent Handoff Arrow Variant',
  category: 'ai-collaboration',
  subcategory: 'composition',
  pillar: 'co',
  description: 'Compact agent-to-agent handoff arrow showing the artefact crossing the seam between two specialists.',
  spec: `## Intent
A variant of the human/AI handoff arrow scoped to AI-to-AI transfer. The artefact that crosses the seam is the unit of accountability — name it, show its direction, and the seam is auditable.

## Acceptance Criteria
- [ ] Source agent node and target agent node both labelled with role
- [ ] Arrow stroke uses co-pillar token
- [ ] Artefact name rides above the arrow
- [ ] Negative: does NOT imply a human in the loop

## Constraints
- Pure SVG, no JS
- Theme-aware via tokens`,
  tags: ['svg', 'navigation', 'real-content', 'dark-mode-tested', 'responsive'],
  status: 'stable',
  health: { ics: 88, a11y: 'aa', themed: true, animated: false },
};

const hop = { from: 'Planner', to: 'Coder', artefact: 'task-graph.json' };
---

<div data-this-component class="w-full bg-paper text-black border-4 border-black p-4 overflow-hidden">
  <p class="font-mono text-[10px] uppercase tracking-widest opacity-60 mb-2">// handoff variant · agent-to-agent</p>
  <svg viewBox="0 0 320 80" class="w-full block" aria-label={`Handoff from ${hop.from} to ${hop.to}`}>
    <rect x="6" y="26" width="92" height="36" fill="var(--color-co)" stroke="var(--color-ink)" stroke-width="3" />
    <text x="52" y="50" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="11" font-weight="900" fill="var(--color-ink)">{hop.from}</text>
    <line x1="104" y1="44" x2="216" y2="44" stroke="var(--color-co)" stroke-width="4" />
    <polygon points="216,36 230,44 216,52" fill="var(--color-co)" stroke="var(--color-ink)" stroke-width="2" />
    <rect x="104" y="10" width="112" height="18" fill="var(--color-paper)" stroke="var(--color-ink)" stroke-width="2" />
    <text x="160" y="23" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="9" font-weight="700" fill="var(--color-ink)" letter-spacing="1">{hop.artefact}</text>
    <rect x="222" y="26" width="92" height="36" fill="var(--color-co)" stroke="var(--color-ink)" stroke-width="3" />
    <text x="268" y="50" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="11" font-weight="900" fill="var(--color-ink)">{hop.to}</text>
  </svg>
  <div class="mt-2 font-mono text-[9px] uppercase tracking-widest opacity-60 text-center">artefact crosses the seam</div>
</div>