screenshotslisted

# Capture README Screenshots Take a fresh set of 8 numbered screenshots for the README documentation. ## When to Use After UI changes that affect any of these areas: editor layout, side panel (annotations/chat), toolbar/tab bar, status bar, review mode, toast notifications, or the onboarding tutorial card. ## Prerequisites 1. The dev server MUST already be running: ```bash npm run dev:standalone ``` 2. Verify health before proceeding: ```bash curl -sf http://127.0.0.1:3479/health && echo "Ready" || echo "Server not running — start it first" ``` ## Critical Warnings ### Stale CRDT State If Tandem is already open in Chrome, the browser tab holds a stale Y.Doc in memory. On reconnect it merges old state back, clobbering fresh content. You MUST: 1. Navigate the Chrome tab away from Tandem (e.g., go to `about:blank`) 2. Then run the screenshot script — it creates its own browser context ### Port Conflict with E2E Tests Do NOT run `npm run test:e2e` while taking screenshots. Playwright's `webServer` config calls `freePort()` which kills processes on :3478/:3479, terminating your dev server mid-screenshot. ## Run the Script ```bash node scripts/take-screenshots.mjs ``` The script: - Connects to the MCP server at `http://127.0.0.1:3479/mcp` - Opens `sample/welcome.md` and creates demo annotations (highlight, comment, suggestion, flag) - Opens extra temp documents for the multi-tab screenshot - Captures 8 screenshots with specific viewport clips - Cleans