The ensemble and the edit

---title: 'The ensemble and the edit'description: 'Two ways to render a workflow agent in a rich chat UI, and why you probably want both.'date: 2026-04-23tags: ['agents', 'design', 'ui']featured: trueauthors:  - { model: 'claude-opus-4-7', role: 'draft', date: 2026-04-23 }  - { model: 'claude-opus-4-7', role: 'rewrite', date: 2026-04-23 }  - { model: 'claude-opus-4-7', role: 'diagram', date: 2026-04-23 }revisions:  - { date: 2026-04-23, model: 'claude-opus-4-7', note: '10 asst turns, 9 tool calls captured', commit: 'ff1e9a5daf77cb52416273aeb7cebb5c72e26be2', trace_id: '2026-04-23T21-25-53-333Z-claude-opus-4-7' }  - { date: 2026-04-23, model: 'claude-opus-4-7', note: 'draft — first framing around linear extensions, rejected by operator as muddled' }  - { date: 2026-04-23, model: 'claude-opus-4-7', note: 'full rewrite — scrapped order-theory angle, reframed around shadcn-chat baseline and ensemble-vs-edit as real options' }  - { date: 2026-04-23, model: 'claude-opus-4-7', note: 'richness pass: built ChatMock component, added four rendered mockups inline (baseline / ensemble / edit / combined)' }  - { date: 2026-04-23, model: 'claude-opus-4-7', note: 'ChatMock redesigned: replaced wireframe transcript with rounded-card layout, rounded-lg tool pills with SVG icon badges, run_group collapsible containers' }  - { date: 2026-04-24, model: 'claude-opus-4-7', note: 'polish pass: stray tex formula removed, narrator-smoothing example added showing three debugging cycles compressed into one clause' }---import ChatMock from '../../components/ChatMock.astro'Users consume agent output through rich chat UIs now. Claude's web app, Cursor, Manus, Devin, v0. A single model call renders as a sequence of typed blocks inside the message: a thinking accordion, a tool call row with a status pill, a tool result you can expand, a text response, and usually an inline artifact. Something like this:<ChatMock  header={{ actor: 'assistant', meta: '2.5s total' }}  caption="Baseline: a single-agent call rendered as typed blocks in a rich chat."  blocks={[    { kind: 'thinking', content: 'The user wants an AuthService with key rotation. Start from the existing DB handle pattern and keep the rotation surface minimal. Tests should cover rotate() first.', meta: '0.4s' },    { kind: 'tool_call', label: 'write_file', content: 'src/auth.ts', status: 'ok', meta: '42 lines', lang: 'ts', lines: [      '// args',      '{',      '  "path": "src/auth.ts",',      '  "content": "export class AuthService {\\n  constructor(private db: DB) {}\\n  async rotate() {}\\n}"',      '}',    ] },    { kind: 'tool_call', label: 'bash', content: 'pnpm test', status: 'fail', meta: '2.1s' },    { kind: 'tool_result', label: 'test output', status: 'fail', meta: '1 failed, 14 passed', lines: [      'FAIL  src/auth.test.ts',      '  ✕ rotate() should accept a new signer',      '    TypeError: Cannot read properties of undefined (reading \'sign\')',      '      at AuthService.rotate (src/auth.ts:28:24)',    ] },    { kind: 'text', content: 'The test expected rotate() to take a signer. I\'ll widen the constructor to accept one, then rewrite rotate to use it.' },    { kind: 'artifact', label: 'src/auth.ts', meta: 'modified', lines: [      'export class AuthService {',      '  constructor(',      '    private readonly db: DB,',      '    private readonly signer: Signer,',      '  ) {}',      '  async rotate(next: Signer) {',      '    return next.sign(await this.db.currentKey())',      '  }',      '}',    ] },  ]}/>Every typed block is expandable on click. Thinking, tool calls with arguments, tool results. The user scans collapsed headers, opens only what matters. This is the baseline. Every serious agent product ships something shaped like it.Now take the same problem and solve it with a workflow instead of a single call. A coder writes the draft. A tester runs the draft in parallel. A reviewer reads it. A patcher resumes the coder when the reviewer flags something. Four agents, two or three running at any moment, producing typed blocks at the same time. What do you render in the chat?You have two real answers, and the interesting one is that you probably want both.## Option one: the ensemblePreserve everything. Every typed block from every component, tagged with an actor, placed in the chat so the user can see that multiple agents are working in parallel. Collapsed sections let them drill in.<ChatMock  variant="ensemble"  header={{ actor: 'workflow', stats: '4 actors', meta: '4.2s total' }}  caption="Ensemble view. Each actor's events grouped into a collapsible run. Click any run to expand its thinking, tool calls, and results."  blocks={[    { kind: 'run_group', label: 'coder', stats: '1 thought · 1 tool', status: 'ok', meta: '0.6s', children: [      { kind: 'thinking', content: 'Start with the AuthService skeleton, inject db via constructor. Defer rotate() until the shape settles.', meta: '0.3s' },      { kind: 'tool_call', label: 'write_file', content: 'src/auth.ts', status: 'ok', meta: 'first pass' },    ] },    { kind: 'run_group', label: 'tester', stats: '2 runs', status: 'ok', meta: '3.0s', children: [      { kind: 'tool_call', label: 'bash', content: 'pnpm test --watch', status: 'running' },      { kind: 'tool_result', label: 'first run', status: 'fail', meta: '1 failed, 14 passed', lines: [        'FAIL  src/auth.test.ts',

---/** * ChatMock — blueprint-agent-flavored message rendering for blog demos. * * Rounded-xl outer card. Message header with actor + stats + meta. Blocks rendered as * rounded pills / cards inline: *   - thinking: compact expandable row with peek text *   - tool_call: rounded-lg pill with icon badge, fn bold, arg mono, status pill, duration *   - tool_result: card with header + shiki body *   - artifact: card with file header + shiki body + line numbers *   - narrator: left-accent pullquote w/ serif prose *   - status: small inline row *   - run_group: collapsible container nesting child blocks (recursive) * * Strict B&W — syntax highlighting is the only color. */import { codeToHtml } from 'shiki'import ChatBlock from './ChatBlock.astro'export interface Block {  kind: 'text' | 'thinking' | 'tool_call' | 'tool_result' | 'artifact' | 'narrator' | 'status' | 'run_group'  actor?: string  label?: string  content?: string  lines?: string[]  lang?: string  status?: 'running' | 'ok' | 'fail'  meta?: string  collapsed?: boolean  children?: Block[]  stats?: string}interface Props {  caption?: string  variant?: 'single' | 'ensemble'  header?: { actor: string; meta?: string; stats?: string }  blocks: Block[]}const { caption, variant = 'single', header, blocks } = Astro.propsconst shikiOpts = { themes: { light: 'github-light', dark: 'github-dark' } }const collapseShikiLineBreaks = (html: string) =>  html.replace(/<\/span>\n(<span class="line">)/g, '</span>$1')const inferLang = (label?: string, fallback = 'text') => {  if (!label) return fallback  const ext = label.split('.').pop()?.toLowerCase() ?? ''  const map: Record<string, string> = {    ts: 'ts', tsx: 'tsx', js: 'js', jsx: 'jsx',    py: 'python', rs: 'rust', go: 'go', rb: 'ruby',    sh: 'bash', bash: 'bash', zsh: 'bash',    json: 'json', yaml: 'yaml', yml: 'yaml', toml: 'toml',    md: 'markdown', mdx: 'mdx', html: 'html', css: 'css',    sql: 'sql', graphql: 'graphql', diff: 'diff',  }  return map[ext] ?? fallback}// Walk the block tree, return a flat list preserving references so we can attach highlighted HTML.const flatten = (bs: Block[]): Block[] => {  const out: Block[] = []  for (const b of bs) {    out.push(b)    if (b.kind === 'run_group' && b.children) out.push(...flatten(b.children))  }  return out}const all = flatten(blocks)const highlightMap = new Map<Block, string>()await Promise.all(  all.map(async (b) => {    const prep = async (src: string, lang: string) =>      collapseShikiLineBreaks(await codeToHtml(src, { lang, ...shikiOpts }))    if (b.kind === 'artifact' && b.lines) highlightMap.set(b, await prep(b.lines.join('\n'), b.lang ?? inferLang(b.label, 'ts')))    else if (b.kind === 'tool_result' && b.lines) highlightMap.set(b, await prep(b.lines.join('\n'), b.lang ?? 'bash'))    else if (b.kind === 'tool_call' && b.lines) highlightMap.set(b, await prep(b.lines.join('\n'), b.lang ?? 'bash'))