examples: make every gallery graph legible on load

[mikkel]

What

Loading a gallery example dropped users into an illegible canvas — the exact moment we're trying to land the first "wow":

• Intent comments clipped mid-sentence on 9 of 12 examples, and overlapped the first node on 5 of them.
• Model arena stacked its four Contender nodes into one pile — three of four were buried.
• Lyrics → song had an LLM sitting on the comment and a second LLM burying the first's system prompt.
• Style switchboard hid 3 of its 5 art styles — the whole point of the example.
• Talking avatar buried the portrait-upload node; photo → video rendered two cards flush edge-to-edge.

How

Rendered all 12 examples in a real headless browser (per the repo verify skill — zero API spend), critiqued each screenshot, measured actual node bounding boxes over CDP, and re-laid out every graph:

• comments rewritten to one short breath, sized (w + sizes.text) so they never truncate, always clear of the first node
• model arena → 2×2 contender grid, all four visible
• lyrics → song re-laid as a clean left-to-right fan with zero overlaps
• style switchboard Choice node widened + sizes.options so all five styles read one per line
• 40px+ clearance between all cards everywhere

Verified by re-rendering all 12 after the change — every comment complete, every node fully visible. Full scripts/check-*.mjs suite green.

🤖 Generated with Claude Code