docs(blog): redraw the voice-agent architecture figure with InputLayer as the hub - #228

Summary

The section 3 figure of Building a Voice Agent That Knows (front/public/blog/voice-agent/cascade.svg) drew the pipeline as a column with the graph as a side box, so the article's one argument was not visible in it. This PR redraws it so the message is obvious at a glance: InputLayer is the hub in the centre; every model and every tool sits around it; all coordination goes through it as facts in and subscribed deltas out; and multitasking dispatch is derived from it.

The layout follows the captain's reference diagram (inputlayer-voicestack-multitasking-dispatch.svg): the pipeline head top-left, the external world top-right, the hub in the centre, the two lanes below. It is drawn in the article's shared figure style (same palette, cards, arrowheads and legend as the other four figures), with the article's names and mechanisms:

• Facts in, as guarded programs (solid teal): goals and consents from the intent stage's write gate; world facts from the observation adapters (replacement programs with cursor guards); source_health flips from the watchdog; reservations and playback receipts from the agenda and the pump; claims, outcomes and observations from the executor.
• Conclusions out, as standing-query deltas (dashed teal): speech rows to the agenda, work rows to the executor, one row per item.
• The hub shows what it holds and derives: accepted facts (world, session, tool policy, attempts, playbacks, leases), rules and guardrails (claim, speech, work; policy → eligible; deny by default), standing results (level, not events); one guarded program per write at one revision; inserted/retracted rows per push; .why on every decision.
• Multitasking dispatch: the executor subscribes once (work ⋈ lease_owner), claims rows under a guard in parallel, runs them against the carrier API and the order system with idempotency keys and epoch fences, and writes outcomes back as facts; a row entering starts work, a row leaving cancels it; the speech lane keeps talking and corrects itself meanwhile.
• Data flow vs control flow are distinct (grey data lane, red system lane, teal programs and deltas, amber external calls, green results), every arrow is labelled with what flows, and the legend is the shared one.
• Models are generic (VAD, STT, intent model, LLM, TTS), as the article labels them.

One deliberate deviation from the reference: the bottom row is mirrored (speech loop bottom-left under the pipeline head, background work bottom-right under the external world). With the reference's placement the pipeline's continuation (voice edges on the data lane, Interrupt on the system lane, from the barge-in stage to the agenda) has to cross the adapters' arrows or loop over the top of the canvas; mirrored, the whole voice pipeline reads top to bottom on the left, the world top to bottom on the right, and the hub sits between them with no crossings. Easy to flip back if the original placement is preferred.

Companion figures

Checked the other four figures against the hub picture (names, colours, shapes) and changed only what contradicted it:

• lanes.svg: the tail stage is named "Pump (tail)" as in the hub figure (was "Tail pump").
• dispatch-sequence.svg: the three delta: arrows are dashed, as the shared legend defines engine deltas (programs stay solid).
• loop.svg and correction-timeline.svg: already consistent, unchanged.

Article text

Only the caption and the paragraph that describes the figure changed (section 3, first paragraph): the figure is now described as the hub with facts in and deltas out, and the sentence on where multitasking dispatch comes from. front/lib/content-bundle.ts is regenerated from the post (node front/scripts/bundle-content.mjs; one content line differs).

Self-critique against the captain's complaint

Reviewed the final render as a hostile reader of "InputLayer isn't clearly in the centre and multitasking dispatch isn't shown to be enabled by it": the hub is the largest element at the canvas centre with every arrow converging on it; the dispatch chain is explicit end to end (rules → work(…) standing result → work deltas, one row per item → executor claims in parallel → two tool columns → claim, outcome and observation back as facts), plus the in-flight attempts from the article (att-9f3, att-b1). Fixed during the pass: cluster titles that collided with arrows, labels under the hub that read as one block, a label over the receipts line, the executor's wording on parallel claims.

Verification

• Rendered every figure the way the blog shows it (inlined, with the site's :root and .dark variables from front/app/globals.css) in headless Chrome: dark and light themes, a 358 px phone width at 3x, and the standalone <img> fallback in both colour schemes. No overlaps or clipped text; the hub and the four groups read at phone width.
• cascade.svg is well-formed XML, starts with <svg (required by InlineSvg), uses the vkc id/class prefix like before, and declares <title>/<desc>.
• make fmt-check passes; no Rust, Python, JS package or perf-gate inputs are touched (docs and figures only), so make pre-pr would select only fmt-check plus the perf gate. Not run: make perf-gate and make front-build (no runtime change; the front build runs the same bundle script that was run here).
• Before/after PNGs (captain's reference, draft 3 on main, this figure, phone render, side by side) are in /home/sam/firstmate/data/voice-article-diagrams/ with the generator script.