feat: Screenshot area capture (⌘+Drag) in Design Mode

[Delqhi]

Problem

The Design Mode shows a hint "⌘/^ + Drag to screenshot area" but this feature is not implemented. Users cannot capture specific regions of the preview to share with the agent or save for documentation.

Goal

Implement a screenshot capture feature that allows users to select a rectangular area in the preview and capture it as an image.

Acceptance Criteria

• Holding ⌘ (or Ctrl) and dragging in the preview creates a selection rectangle
• On mouse-up, the selected area is captured as a PNG image
• Screenshot is saved to .sin-webui/screenshots/ with timestamp
• Screenshot appears in a gallery sidebar or modal
• User can copy screenshot to clipboard or download it
• Optional: screenshots can be attached to chat messages (send to agent)
• Selection rectangle has visual feedback (border, semi-transparent overlay)

Files to modify / create

New files

lib/workspace/screenshot.ts              # Screenshot capture logic (html2canvas or native API)
components/workspace/screenshot-tool.tsx # Selection overlay component
app/api/workspace/screenshot/route.ts   # POST to save screenshot, GET to list
components/workspace/screenshot-gallery.tsx # Gallery of captured screenshots

Files to modify

public/design-mode-agent.js               # Add ⌘+Drag handler for selection rectangle
components/workspace/design-panel.tsx     # Show screenshot gallery in inspector or sidebar
components/workspace/preview-panel.tsx    # Capture selection area from iframe

Technical Notes

• Two approaches:
  1. html2canvas inside the preview iframe (simple, but limited by CORS)
  2. Native browser API (e.g., chrome extension API or getDisplayMedia) — more complex
• The selection rectangle should be drawn with a <div> overlay in the preview iframe
• The design-mode-agent.js should handle the drag selection and send the coordinates to the parent
• The parent captures the iframe content using html2canvas or canvas API with the selected coordinates
• Store screenshots in .sin-webui/screenshots/{timestamp}.png
• Maintain a .sin-webui/screenshots.json index file with metadata

Related

• public/design-mode-agent.js: Already shows "⌘/^ + Drag to screenshot area" hint
• components/workspace/design-panel.tsx: Inspector panel where screenshot gallery could live

[Delqhi]

Implemented and merged to main via #58 (commit 30de716) and prior PRs (#56).

Includes:

• public/design-mode-agent.js — html2canvas-pro CDN integration for area capture
• app/api/workspace/screenshot/route.ts — POST dataUrl PNG, save to .sin-webui/screenshots/
• app/api/workspace/screenshot/[filename]/route.ts — GET to serve screenshot
• components/workspace/screenshot-gallery.tsx — gallery with copy/download/delete
• Wired into Workspace tabs (components/workspace/workspace.tsx + workspace-header.tsx)

Verification: pnpm tsc --noEmit → 0 errors. Build succeeds. Screenshot API routes are live.