Agent Fan-out Arrow

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

export const meta: CompendiumMeta = {
  id: 643,
  slug: 'agent-fanout-arrow',
  name: 'Agent Fan-out Arrow',
  category: 'ai-collaboration',
  subcategory: 'composition',
  pillar: 'co',
  description: 'One orchestrator dispatching parallel work to many specialists — fan-out topology made visible.',
  spec: `## Intent
Parallelism without a visible fan-out is a hidden coupling. This arrow shows the dispatching agent, the count of fan-out branches, and the destination labels — so reviewers can audit the breadth of concurrent work.

## Acceptance Criteria
- [ ] Single source node, three target nodes
- [ ] Three SVG arrows branching from the source
- [ ] Each target labelled with its role
- [ ] Negative: does NOT imply ordering between targets

## Constraints
- Pure SVG
- 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 src = 'Orchestrator';
const targets = ['Coder', 'Tester', 'Doc-writer'];
---

<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">// fan-out · {targets.length} branches</p>
  <svg viewBox="0 0 320 140" class="w-full block" aria-label={`Fan-out from ${src} to ${targets.length} agents`}>
    <rect x="10" y="58" width="92" height="32" fill="var(--color-co)" stroke="var(--color-ink)" stroke-width="3" />
    <text x="56" y="79" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="10" font-weight="900" fill="var(--color-ink)">{src}</text>
    {targets.map((t, i) => {
      const y = 18 + i * 44;
      return (
        <>
          <path d={`M 102 74 C 160 74, 160 ${y + 16}, 218 ${y + 16}`} stroke="var(--color-co)" stroke-width="3" fill="none" />
          <polygon points={`218,${y + 8} 232,${y + 16} 218,${y + 24}`} fill="var(--color-co)" stroke="var(--color-ink)" stroke-width="2" />
          <rect x={236} y={y} width={82} height={32} fill="var(--color-paper)" stroke="var(--color-ink)" stroke-width="3" />
          <text x={277} y={y + 21} text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="10" font-weight="900" fill="var(--color-ink)">{t}</text>
        </>
      );
    })}
  </svg>
  <div class="mt-2 font-mono text-[9px] uppercase tracking-widest opacity-60 text-center">one to many &middot; parallel dispatch</div>
</div>