Multi-Agent Composition

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

export const meta: CompendiumMeta = {
  id: 52,
  slug: 'multi-agent-composition',
  name: 'Multi-Agent Composition',
  category: 'ai-collaboration',
  subcategory: 'composition',
  pillar: 'co',
  description: 'A planner → coder → reviewer pipeline, with each agent\'s scope and hand-off explicit.',
  spec: `## Intent
A non-trivial task is decomposed across specialised agents. Each agent has a narrow role, a scoped tool surface, and is accountable to the next. The diagram makes the composition (and its seams) inspectable so a human can intervene at any node.

## Acceptance Criteria
- [ ] Three role-specialised agent nodes
- [ ] Directed flow between them
- [ ] Each node names its single output
- [ ] Visually distinguishes roles (colour + role label)

## Constraints
- Fits in compendium preview area`,
  tags: ['list', 'real-content', 'dark-mode-tested'],
  status: 'stable',
  health: { ics: 83, a11y: 'aa', themed: true, animated: false },
};

const agents = [
  { role: 'Planner',  out: 'task graph',  tint: 'bg-do',      hint: 'decomposes' },
  { role: 'Coder',    out: 'diff',        tint: 'bg-co',      hint: 'implements' },
  { role: 'Reviewer', out: 'verdict',     tint: 'bg-go',      hint: 'gates'      },
];
---

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

  <div class="flex flex-col gap-1">
    {agents.map((a, i) => (
      <>
        <div class="flex items-stretch border-2 border-black">
          <div class:list={['px-2 py-1.5 border-e-2 border-black flex items-center font-mono text-[9px] uppercase tracking-widest w-16 shrink-0', a.tint]}>
            {`A${i + 1}`}
          </div>
          <div class="px-2 py-1.5 flex-1 min-w-0">
            <p class="text-[11px] font-black uppercase leading-none tracking-tight">{a.role}</p>
            <p class="text-[10px] opacity-70 leading-tight mt-0.5 truncate">{a.hint}</p>
          </div>
          <div class="px-2 py-1.5 border-s-2 border-black flex items-center font-mono text-[9px] uppercase tracking-widest opacity-70">
            → {a.out}
          </div>
        </div>
        {i < agents.length - 1 && (
          <div class="flex justify-center font-black text-base leading-none select-none" aria-hidden="true">↓</div>
        )}
      </>
    ))}
  </div>

  <p class="mt-3 font-mono text-[9px] uppercase tracking-widest opacity-60 text-end">
    human · sign-off at exit
  </p>
</div>