feat: image paste (Ctrl+V) and drag-and-drop into terminal (#84)

* feat: add image paste and drag-and-drop support

Clipboard paste (Ctrl+V) and drag-and-drop of image files into the
terminal. Images are saved to {workdir}/.claude-images/ and the
absolute path is inserted into the terminal input for Claude to read.

- POST /api/sessions/:id/paste-image endpoint (hand-parsed multipart)
- image-input.js mixin with paste trap technique (works on HTTP)
- Ctrl+V intercepted at xterm keyboard level, routes through hidden
  contenteditable div to capture both image and text clipboard data
- Drag-and-drop on terminal container with visual overlay
- Session cleanup deletes .claude-images/ on destroy

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

* security: remove SVG from paste-image allowlist

Drops .svg / image/svg+xml from the paste-image endpoint. SVGs are
served as image/svg+xml via /api/sessions/:id/file-raw, same-origin,
under a CSP that permits inline scripts — which would execute on view.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: arkon <arkon.85@hotmail.com>
This commit is contained in:
aakhter
2026-05-17 05:57:07 +02:00
committed by GitHub
co-authored by Claude Opus 4.7 arkon
parent 98966def03
commit 94bcf524a2
7 changed files with 293 additions and 2 deletions
+20
View File
@@ -8591,3 +8591,23 @@ kbd {
margin-top: 4px;
font-size: 0.7rem;
}
/* Image drag-and-drop overlay */
#terminalContainer.drag-active {
outline: 2px dashed #4a9eff;
outline-offset: -2px;
position: relative;
}
#terminalContainer.drag-active::after {
content: 'Drop image here';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(74, 158, 255, 0.08);
color: #4a9eff;
font-size: 1.2rem;
pointer-events: none;
z-index: 100;
}