claude-remote-cli 1.4.3 → 1.6.0

package/dist/server/clipboard.js

@@ -0,0 +1,56 @@
+import { execFile, execFileSync } from 'node:child_process';
+import { promisify } from 'node:util';
+const execFileAsync = promisify(execFile);
+const SUPPORTED_MIME = {
+    'image/png': { ext: '.png', osascriptClass: '«class PNGf»' },
+    'image/jpeg': { ext: '.jpg', osascriptClass: '«class JPEG»' },
+    'image/gif': { ext: '.gif', osascriptClass: '«class GIFf»' },
+    'image/webp': { ext: '.webp', osascriptClass: '«class PNGf»' },
+};
+let cachedTool;
+export function detectClipboardTool() {
+    if (cachedTool !== undefined)
+        return cachedTool;
+    if (process.platform === 'darwin') {
+        cachedTool = 'osascript';
+        return cachedTool;
+    }
+    if (process.env['DISPLAY'] || process.env['WAYLAND_DISPLAY']) {
+        try {
+            execFileSync('which', ['xclip'], { stdio: 'ignore' });
+            cachedTool = 'xclip';
+            return cachedTool;
+        }
+        catch {
+            // xclip not found
+        }
+    }
+    cachedTool = null;
+    return cachedTool;
+}
+function mimeInfo(mimeType) {
+    const info = SUPPORTED_MIME[mimeType];
+    if (!info)
+        throw new Error(`Unsupported MIME type: ${mimeType}`);
+    return info;
+}
+export function extensionForMime(mimeType) {
+    return mimeInfo(mimeType).ext;
+}
+export async function setClipboardImage(filePath, mimeType) {
+    const tool = detectClipboardTool();
+    const info = mimeInfo(mimeType); // throws if unsupported
+    if (tool === 'osascript') {
+        const script = `set the clipboard to (read (POSIX file "${filePath}") as ${info.osascriptClass})`;
+        await execFileAsync('osascript', ['-e', script]);
+        return true;
+    }
+    if (tool === 'xclip') {
+        await execFileAsync('xclip', ['-selection', 'clipboard', '-t', mimeType, '-i', filePath]);
+        return true;
+    }
+    return false;
+}
+export function _resetForTesting() {
+    cachedTool = undefined;
+}

package/dist/server/index.js

@@ -1,5 +1,6 @@
 import fs from 'node:fs';
 import http from 'node:http';
+import os from 'node:os';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import readline from 'node:readline';
@@ -13,6 +14,7 @@ import * as sessions from './sessions.js';
 import { setupWebSocket } from './ws.js';
 import { WorktreeWatcher } from './watcher.js';
 import { isInstalled as serviceIsInstalled } from './service.js';
+import { extensionForMime, setClipboardImage } from './clipboard.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const execFileAsync = promisify(execFile);
@@ -127,7 +129,7 @@ async function main() {
     }
     const authenticatedTokens = new Set();
     const app = express();
-    app.use(express.json());
+    app.use(express.json({ limit: '15mb' }));
     app.use(cookieParser());
     app.use(express.static(path.join(__dirname, '..', '..', 'public')));
     const requireAuth = (req, res, next) => {
@@ -377,6 +379,51 @@ async function main() {
             res.status(404).json({ error: 'Session not found' });
         }
     });
+    // POST /sessions/:id/image — upload clipboard image, proxy to system clipboard
+    const ALLOWED_IMAGE_TYPES = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
+    app.post('/sessions/:id/image', requireAuth, async (req, res) => {
+        const { data, mimeType } = req.body;
+        if (!data || !mimeType) {
+            res.status(400).json({ error: 'data and mimeType are required' });
+            return;
+        }
+        if (!ALLOWED_IMAGE_TYPES.includes(mimeType)) {
+            res.status(400).json({ error: 'Unsupported image type: ' + mimeType });
+            return;
+        }
+        // base64 is ~33% larger than binary; 10MB binary ≈ 13.3MB base64
+        if (data.length > 14 * 1024 * 1024) {
+            res.status(413).json({ error: 'Image too large (max 10MB)' });
+            return;
+        }
+        const sessionId = req.params['id'];
+        if (!sessions.get(sessionId)) {
+            res.status(404).json({ error: 'Session not found' });
+            return;
+        }
+        try {
+            const ext = extensionForMime(mimeType);
+            const dir = path.join(os.tmpdir(), 'claude-remote-cli', sessionId);
+            fs.mkdirSync(dir, { recursive: true });
+            const filePath = path.join(dir, 'paste-' + Date.now() + ext);
+            fs.writeFileSync(filePath, Buffer.from(data, 'base64'));
+            let clipboardSet = false;
+            try {
+                clipboardSet = await setClipboardImage(filePath, mimeType);
+            }
+            catch {
+                // Clipboard tools failed — fall back to path
+            }
+            if (clipboardSet) {
+                sessions.write(sessionId, '\x16');
+            }
+            res.json({ path: filePath, clipboardSet });
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Image upload failed';
+            res.status(500).json({ error: message });
+        }
+    });
     // GET /version — check current vs latest
     app.get('/version', requireAuth, async (_req, res) => {
         const current = getCurrentVersion();

package/dist/server/sessions.js

@@ -1,5 +1,8 @@
 import pty from 'node-pty';
 import crypto from 'node:crypto';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
 // In-memory registry: id -> Session
 const sessions = new Map();
 function create({ repoName, repoPath, root, worktreeName, displayName, command, args = [], cols = 80, rows = 24 }) {
@@ -43,6 +46,8 @@ function create({ repoName, repoPath, root, worktreeName, displayName, command,
     });
     ptyProcess.onExit(() => {
         sessions.delete(id);
+        const tmpDir = path.join(os.tmpdir(), 'claude-remote-cli', id);
+        fs.rm(tmpDir, { recursive: true, force: true }, () => { });
     });
     return { id, root: session.root, repoName: session.repoName, repoPath, worktreeName: session.worktreeName, displayName: session.displayName, pid: ptyProcess.pid, createdAt, lastActivity: createdAt };
 }
@@ -85,4 +90,11 @@ function resize(id, cols, rows) {
     }
     session.pty.resize(cols, rows);
 }
-export { create, get, list, kill, resize, updateDisplayName };
+function write(id, data) {
+    const session = sessions.get(id);
+    if (!session) {
+        throw new Error(`Session not found: ${id}`);
+    }
+    session.pty.write(data);
+}
+export { create, get, list, kill, resize, updateDisplayName, write };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-remote-cli",
-  "version": "1.4.3",
+  "version": "1.6.0",
   "description": "Remote web interface for Claude Code CLI sessions",
   "type": "module",
   "main": "dist/server/index.js",

package/public/app.js

@@ -46,6 +46,10 @@
   var updateToastText = document.getElementById('update-toast-text');
   var updateToastBtn = document.getElementById('update-toast-btn');
   var updateToastDismiss = document.getElementById('update-toast-dismiss');
+  var imageToast = document.getElementById('image-toast');
+  var imageToastText = document.getElementById('image-toast-text');
+  var imageToastInsert = document.getElementById('image-toast-insert');
+  var imageToastDismiss = document.getElementById('image-toast-dismiss');
 
   // Context menu state
   var contextMenuTarget = null; // stores { worktreePath, repoPath, name }
@@ -851,6 +855,130 @@
     }
   });
 
+  // ── Image Paste Handling ─────────────────────────────────────────────────────
+
+  var imageUploadInProgress = false;
+  var pendingImagePath = null;
+
+  function showImageToast(text, showInsert) {
+    imageToastText.textContent = text;
+    imageToastInsert.hidden = !showInsert;
+    imageToast.hidden = false;
+  }
+
+  function hideImageToast() {
+    imageToast.hidden = true;
+    pendingImagePath = null;
+  }
+
+  function autoDismissImageToast(ms) {
+    setTimeout(function () {
+      if (!pendingImagePath) {
+        hideImageToast();
+      }
+    }, ms);
+  }
+
+  function uploadImage(blob, mimeType) {
+    if (imageUploadInProgress) return;
+    if (!activeSessionId) return;
+
+    imageUploadInProgress = true;
+    showImageToast('Pasting image\u2026', false);
+
+    var reader = new FileReader();
+    reader.onload = function () {
+      var base64 = reader.result.split(',')[1];
+
+      fetch('/sessions/' + activeSessionId + '/image', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ data: base64, mimeType: mimeType }),
+      })
+        .then(function (res) {
+          if (res.status === 413) {
+            showImageToast('Image too large (max 10MB)', false);
+            autoDismissImageToast(4000);
+            return;
+          }
+          if (!res.ok) {
+            return res.json().then(function (data) {
+              showImageToast(data.error || 'Image upload failed', false);
+              autoDismissImageToast(4000);
+            });
+          }
+          return res.json().then(function (data) {
+            if (data.clipboardSet) {
+              showImageToast('Image pasted', false);
+              autoDismissImageToast(2000);
+            } else {
+              pendingImagePath = data.path;
+              showImageToast(data.path, true);
+            }
+          });
+        })
+        .catch(function () {
+          showImageToast('Image upload failed', false);
+          autoDismissImageToast(4000);
+        })
+        .then(function () {
+          imageUploadInProgress = false;
+        });
+    };
+
+    reader.readAsDataURL(blob);
+  }
+
+  terminalContainer.addEventListener('paste', function (e) {
+    if (!e.clipboardData || !e.clipboardData.items) return;
+
+    var items = e.clipboardData.items;
+    for (var i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image/') === 0) {
+        e.preventDefault();
+        e.stopPropagation();
+        var blob = items[i].getAsFile();
+        if (blob) {
+          uploadImage(blob, items[i].type);
+        }
+        return;
+      }
+    }
+  });
+
+  terminalContainer.addEventListener('dragover', function (e) {
+    if (e.dataTransfer && e.dataTransfer.types.indexOf('Files') !== -1) {
+      e.preventDefault();
+      terminalContainer.classList.add('drag-over');
+    }
+  });
+
+  terminalContainer.addEventListener('dragleave', function () {
+    terminalContainer.classList.remove('drag-over');
+  });
+
+  terminalContainer.addEventListener('drop', function (e) {
+    e.preventDefault();
+    terminalContainer.classList.remove('drag-over');
+    if (!e.dataTransfer || !e.dataTransfer.files.length) return;
+
+    var file = e.dataTransfer.files[0];
+    if (file.type.indexOf('image/') === 0) {
+      uploadImage(file, file.type);
+    }
+  });
+
+  imageToastInsert.addEventListener('click', function () {
+    if (pendingImagePath && ws && ws.readyState === WebSocket.OPEN) {
+      ws.send(pendingImagePath);
+    }
+    hideImageToast();
+  });
+
+  imageToastDismiss.addEventListener('click', function () {
+    hideImageToast();
+  });
+
   // ── Keyboard-Aware Viewport ─────────────────────────────────────────────────
 
   (function () {

package/public/index.html

@@ -89,6 +89,17 @@
       </div>
     </div>
 
+    <!-- Image Paste Toast -->
+    <div id="image-toast" hidden>
+      <div id="image-toast-content">
+        <span id="image-toast-text"></span>
+        <div id="image-toast-actions">
+          <button id="image-toast-insert" class="btn-accent" hidden>Insert Path</button>
+          <button id="image-toast-dismiss" aria-label="Dismiss">&times;</button>
+        </div>
+      </div>
+    </div>
+
   </div>
 
   <!-- New Session Dialog -->

package/public/style.css

@@ -417,6 +417,7 @@ html, body {
 
 /* ===== Touch Toolbar ===== */
 #toolbar {
+  display: none;
   flex-shrink: 0;
   background: var(--surface);
   border-top: 1px solid var(--border);
@@ -993,6 +994,10 @@ dialog#delete-worktree-dialog h2 {
   .tb-btn.tb-arrow {
     font-size: 1.2rem;
   }
+
+  #toolbar {
+    display: block;
+  }
 }
 
 /* ===== Scrollbar ===== */
@@ -1008,3 +1013,46 @@ dialog#delete-worktree-dialog h2 {
   background: var(--border);
   border-radius: 4px;
 }
+
+/* ===== Image Paste Toast ===== */
+#image-toast {
+  position: fixed;
+  bottom: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+  background: #2d2d2d;
+  border: 1px solid #555;
+  border-radius: 8px;
+  padding: 8px 14px;
+  color: #d4d4d4;
+  font-size: 13px;
+  max-width: 90vw;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
+
+#image-toast-content {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+#image-toast-actions {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+
+#image-toast-dismiss {
+  background: none;
+  border: none;
+  color: #999;
+  cursor: pointer;
+  font-size: 16px;
+  padding: 2px 6px;
+}
+
+#terminal-container.drag-over {
+  outline: 2px dashed #007acc;
+  outline-offset: -2px;
+}