Agent Fan-in Arrow

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

export const meta: CompendiumMeta = {
  id: 644,
  slug: 'agent-fanin-arrow',
  name: 'Agent Fan-in Arrow',
  category: 'ai-collaboration',
  subcategory: 'composition',
  pillar: 'co',
  description: 'Many specialists converging into a single reducer agent — fan-in topology made visible.',
  spec: `## Intent
The dual of fan-out: many parallel outputs reduced into a single artefact. The reducer agent is the accountability point; the arrow makes that explicit.

## Acceptance Criteria
- [ ] Three source nodes, one target reducer node
- [ ] Three SVG arrows converging on the target
- [ ] Reducer node labelled with its merge role
- [ ] Negative: does NOT show source ordering

## 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 sources = ['Search', 'Index', 'Recall'];
const sink = 'Synthesiser';
---

<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-in · {sources.length} sources</p>
  <svg viewBox="0 0 320 140" class="w-full block" aria-label={`Fan-in from ${sources.length} agents to ${sink}`}>
    {sources.map((s, i) => {
      const y = 18 + i * 44;
      return (
        <>
          <rect x={2} y={y} width={82} height={32} fill="var(--color-paper)" stroke="var(--color-ink)" stroke-width="3" />
          <text x={43} y={y + 21} text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="10" font-weight="900" fill="var(--color-ink)">{s}</text>
          <path d={`M 84 ${y + 16} C 160 ${y + 16}, 160 74, 200 74`} stroke="var(--color-co)" stroke-width="3" fill="none" />
        </>
      );
    })}
    <polygon points="200,66 214,74 200,82" fill="var(--color-co)" stroke="var(--color-ink)" stroke-width="2" />
    <rect x="218" y="58" width="98" height="32" fill="var(--color-co)" stroke="var(--color-ink)" stroke-width="3" />
    <text x="267" y="79" text-anchor="middle" font-family="JetBrains Mono, monospace" font-size="10" font-weight="900" fill="var(--color-ink)">{sink}</text>
  </svg>
  <div class="mt-2 font-mono text-[9px] uppercase tracking-widest opacity-60 text-center">many to one &middot; reduction</div>
</div>