Skip to content

Add per-agent whiteboard using tldraw#751

Closed
selfcontained wants to merge 1 commit into
mainfrom
agt_1c5704847d50/tldraw-whiteboard-implementation
Closed

Add per-agent whiteboard using tldraw#751
selfcontained wants to merge 1 commit into
mainfrom
agt_1c5704847d50/tldraw-whiteboard-implementation

Conversation

@selfcontained

Copy link
Copy Markdown
Owner

Summary

  • Adds a per-agent Whiteboard tab (alongside Terminal and Changes) powered by tldraw v5, as an alternative implementation to PR Add agent whiteboard: per-agent tab, MCP drawing tools, live SSE sync #735 (Excalidraw) for side-by-side comparison
  • Backend: DB migration, whiteboard builder (~230 LOC for server-side shape construction via @tldraw/tlschema), REST API with optimistic locking, MCP tools (whiteboard_get, whiteboard_update), SSE sync
  • Frontend: tldraw canvas (React.lazy code-split), debounced save/snapshot, theme-aware, agent-drew violet dot indicator, full routing integration
  • Tests: 31 unit tests (builder ops, simplifyElements), 3 E2E tests (tab rendering, API CRUD, deep-link routing)

Key design decisions

  • Same MCP tool interface as Add agent whiteboard: per-agent tab, MCP drawing tools, live SSE sync #735 — agents use identical WhiteboardOp operations regardless of which canvas library ships
  • Server-side shape construction uses @tldraw/tlschema directly (~230 lines vs Excalidraw's ~1,220 lines of coordinate math)
  • Optimistic locking with version checks and 3-retry loop for concurrent agent/user edits
  • Code-split via React.lazy — tldraw chunk (~1.7MB) only loads when the whiteboard tab is opened

Test plan

  • pnpm run check — all type checks pass (server + web + scripts)
  • pnpm run finalize:web — production build succeeds
  • pnpm run test — 31 whiteboard unit tests pass
  • pnpm run test:e2e — all 181 E2E tests pass (3 new whiteboard tests)
  • UI validated via Playwright: whiteboard tab renders tldraw canvas, tab switching works, deep-link routing works

Implements a per-agent whiteboard as a new center-pane tab alongside
Terminal and Changes. Uses tldraw v5 for the canvas (React.lazy
code-split) and @tldraw/tlschema for server-side shape construction,
enabling agents to draw diagrams via MCP tools without a browser.

Backend: DB migration (whiteboards table with optimistic locking),
whiteboard builder (~230 LOC translating WhiteboardOps to tldraw
records), REST API (GET/PUT/snapshot), MCP tools (whiteboard_get,
whiteboard_update), SSE sync (whiteboard.changed events).

Frontend: tldraw canvas with debounced save (2s) and snapshot export
(4s), pointer-down deferral for mid-gesture updates, theme-aware
(colorScheme prop), agent-drew violet dot indicator on tab, lazy-loaded
pane with Suspense fallback, full routing integration.

Tests: 31 unit tests (builder ops, simplifyElements), 3 E2E tests
(tab rendering, API CRUD, deep-link routing). All 181 E2E tests pass.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@selfcontained

Copy link
Copy Markdown
Owner Author

Closing — tldraw requires a commercial license for production use, so this isn't viable. Going with the Excalidraw implementation in #735 instead.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant