Scratchpad visual design: text metrics foundation + research doc#26
Open
molefrog wants to merge 1 commit into
Open
Scratchpad visual design: text metrics foundation + research doc#26molefrog wants to merge 1 commit into
molefrog wants to merge 1 commit into
Conversation
The agent's scratchpad drawings overflow labels and misalign because nothing measures text server-side. Add server/scratchpad-metrics.ts: exact measurement with the real canvas font (Shantell Sans Informal via @tldraw/assets + fontkit), word wrap, and fitRectToLabel. Document the three approach branches this anchors in docs/scratchpad-visual-design.md. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01A4d4g5CV89L1AanPrEYp7p
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Agent-drawn scratchpad diagrams don't look human-made: labels overflow their boxes mid-word ("localhost:30 00"), the title overlaps shapes, nothing aligns. Root causes: no server-side text measurement, absolute-coordinate drawing, and no feedback loop (
viewneeds an open tab).This PR (foundation for three approach branches)
server/scratchpad-metrics.ts— text measurement with the actual canvas font: Shantell Sans Informal woff2 from@tldraw/assets(version-matched to our tldraw), read viafontkit. ExposesmeasureLine,wrapText,textBlockSize, andfitRectToLabel(smallest grid-rounded rect whose label fits, using tldraw's real font sizes, 1.35 line height, and 16px label padding — those constants aren't exported by tldraw, so they're pinned with provenance comments). Heuristic char-width fallback if the font can't load.docs/scratchpad-visual-design.md— the research/comparison doc: root causes, how D2/Mermaid/Graphviz vs. humans solve layout, and the three composable approach bets, each implemented end-to-end on a branch stacked on this one:moi scratch diagram— declarative diagrams with ELK auto-layout #27 — Approach A: declarativemoi scratch diagramvia ELK auto-layoutviewrendering +moi scratch lintfeedback loop #29 — Approach C: headlessviewrendering +moi scratch lintMerge this first; the three approach PRs target this branch. To compare them, ask each to reproduce the "expose a Tailscale service" diagram from the motivating screenshot and judge: no overlaps, no clipped text, straight rows, consistent gaps, and how many agent turns it took.
🤖 Generated with Claude Code
https://claude.ai/code/session_01A4d4g5CV89L1AanPrEYp7p