[JohnD-EE]

What

A Signal routing toggle on the panel's top rail turns the panel over to a diagram of how the synth is wired, for any synth that has a routing (Model D today). Synths without one show no toggle.

• Layout. Left to right: the sources, then mixer, filter, amplifier and output on one straight line. Pitch, modulation and the contours sit in a band beneath, each one column left of what it feeds. A link that skips a column runs along the channel between the bands, so it never passes behind a block and looks joined to it. Links that run against the flow (the output fed back to the external input, Oscillator 3 and noise into the mod bus) go round the top or the bottom, each in its own lane.
• Look. Blocks are coloured by module, matching the panel's lesson highlights. The live path from routingState() is lit, with dashes running in the signal's direction; everything else is dimmed. Audio lines are thick, CV thin, gate dotted, and cables are drawn in their patch colours. The key names all four, and says that "lit" means wired to be used, which is not the same as heard.
• Follows the panel. The diagram is drawn from the session as the panel shows it, plus the mod wheel. Changing a mixer level, a switch or a cable relights the path, including while the diagram is showing (Undo, glides).
• Flip. The flip is a view transition (routing-flip). Only the browser's snapshots rotate, so nothing that holds the panel ever carries a transform, which the fixed info cards and magnifier depend on. With reduced motion, or in a browser without view transitions, it simply swaps. The panel stays laid out underneath (hidden and inert), so its fit and scroll are unchanged when it comes back.
• Phones. On narrow screens the diagram keeps a readable size (900px wide at least) and scrolls sideways in its own scroller.
• Turning back automatically. Anything that works on the panel turns it face up again as it starts: a find, a lesson step, the tour, Explain sections, or the Inspector (as a card or as a sheet).

Why this shape

• Hand-rolled layout, not a library. No layout library is installed. A routing is a dozen or two blocks in a known shape. A pure layered layout (lib/app/synths/lib/routing-layout.ts) draws the same routing the same way every time, so a test can hold it.
• View transition, not a CSS transform on a wrapper. A transform on anything holding the panel breaks its fixed-position cards. The existing synth-change turntable already uses this mechanism.

Review rounds

There were two /code-review rounds, with the fixes in their own commits.

• Round 1 fixed: the hidden panel stranding find, lessons and tour; the layout being redone on every knob turn; a possible crash when a cable's block is missing; small routings being blown up; dead-end blocks; overlapping back links; and the missing cable entry in the key.
• Round 2 fixed: a new find while one is shown; the Inspector sheet below lg; sinks fed by other sinks; back-link lanes leaving the margin; and the memo key.
• Declined:
  • Using panelValues for synths with sequencer buttons: those values only add the sequencer's lamps, and the routing should read the patch.
  • Animating the automatic flip-back: it is decided during render, where a transition can't start, and a plain swap is fine there.
  • Channel lanes for audio-only routings: no routing is audio-only yet.
• Dim unused and Sensitive deliberately don't flip the view back. They point at nothing, and they come from stored settings that can arrive after the view is open.

Gates

• /pre-pr:
  • Type-check, eslint and prettier pass, scoped to the changed files.
  • The synth suites pass: 1,407 tests in 58 files.
  • Coverage of the new files: routing-layout.ts 98% lines and 93% branches, routing-view.tsx 100% lines and 92% branches.
  • The repo's test:changed:coverage run failed with timeouts while the machine's load average was about 22. The slow test it hit ("opens every one of Model D's 200 sounds") takes about 33–43s alone both with and without this change, against a 90s budget.
• /security-review: no findings.
• /code-review: two rounds, as above.
• npm run format: clean.

Still open

• Showing a block's specs on hover or tap is t-143.
• Modular and pin-matrix synths are t-145.
• In-app look on Model D, in a real browser, is left for the owner's batched eye checks. I looked at the diagram rendered headless, in light and dark.

🤖 Generated with Claude Code