Screenshot Paste

The Screenshot Paste widget is an interactive clipboard paste utility that runs inside the Adom Viewer. It provides the fastest way to get screenshots from your browser into the Docker container — one paste instead of save-to-file and drag-drop.

How to use

  1. Call av_screenshot_paste (MCP tool) to open the widget in AV
  2. Click anywhere in the widget to focus the paste area
  3. Press Ctrl+V (or Cmd+V on Mac) to paste a screenshot from your clipboard
  4. The system automatically processes and saves the image

What happens on paste

  1. Resize — If the image exceeds Claude's ideal 1568px max dimension, it's resized proportionally. If already small enough, it's kept as-is with an informational message ("Original still in clipboard").
  2. Compress — PNGs are compressed with sharp (level 9) for minimal file size while preserving quality.
  3. AI Name — Haiku analyzes the image and generates a descriptive kebab-case filename including dimensions (e.g. dart-green-line-route-editor-1568x975.png).
  4. Dual Save — Both the Claude-optimized version and the original are saved to screenshots/sp/.

Widget UX

Focus tracking

  • Teal border + "READY FOR PASTE" label when the paste area has focus
  • Click anywhere in the widget to give focus to the paste area
  • Paste detection triggers an immediate teal flash animation + status bar update

Two-card layout

After processing, two cards appear side by side:

  • Claude card — The resized/optimized version (what Claude will see)
  • Original card — The full-size original

Click either card to open a fullscreen preview overlay.

Smart clipboard badges

The widget shows context-aware clipboard status:

  • "Original still in clipboard" — Image didn't need resizing, your clipboard is unchanged
  • "Clipboard updated" — Successfully wrote the optimized image back to clipboard
  • "Right-click preview to copy" — Clipboard write failed (VS Code webview limitation) and the image was resized. Auto-opens the fullscreen preview with a "Right-click → Copy image" hint so you can manually copy.

Clipboard limitation

VS Code webviews block clipboard-write at the Permissions-Policy level. This means the widget cannot programmatically update your clipboard with the resized image. When this happens and the image was resized, the widget gracefully falls back to showing a fullscreen preview you can right-click to copy.

Architecture

Component Location Purpose
Widget HTML viewer/screenshot-paste.js Generates the interactive paste UI
HTTP endpoint GET /screenshot-paste Serves fresh HTML (bypasses module cache)
Server handler handleScreenshot() in viewer/server.js Resize, compress, save, AI naming
MCP tool av_screenshot_paste Opens the widget in AV
Storage project-content/screenshots/sp/ Saved screenshots (isolated from avShot/tabShot)

Rendering

The widget is rendered as html_interactive content in a non-sandboxed <iframe srcdoc> with allow="clipboard-write". This gives the widget its own document for paste events while avoiding sandbox restrictions.

Tab metadata

The MCP tool sets tab metadata for proper attribution:

  • source: 'av_screenshot_paste'
  • skill: 'screenshot-paste'
  • author: 'Adom'

The skill field maps to a clipboard icon in the AV tab bar.

MCP Tool

mcp__adom-viewer__av_screenshot_paste({ title: 'Paste Screenshots' })

No parameters are required. The widget opens immediately in the active AV panel.

File naming convention

Stage Pattern Example
Initial (before AI) sp-{timestamp}-{width}x{height}.png sp-20260307-152030-1568x975.png
After AI naming {ai-name}-{width}x{height}.png dart-green-line-route-editor-1568x975.png
Original (after AI) {ai-name}-{width}x{height}-original.png dart-green-line-route-editor-2400x1493-original.png