claude-remote-cli 1.5.0 → 1.7.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/config.js

@@ -1,4 +1,6 @@
 import fs from 'node:fs';
+import path from 'node:path';
+import crypto from 'node:crypto';
 export const DEFAULTS = {
     host: '0.0.0.0',
     port: 3456,
@@ -18,3 +20,30 @@ export function loadConfig(configPath) {
 export function saveConfig(configPath, config) {
     fs.writeFileSync(configPath, JSON.stringify(config, null, 2), 'utf8');
 }
+function metaDir(configPath) {
+    return path.join(path.dirname(configPath), 'worktree-meta');
+}
+function metaFilePath(configPath, worktreePath) {
+    const hash = crypto.createHash('sha256').update(worktreePath).digest('hex').slice(0, 16);
+    return path.join(metaDir(configPath), hash + '.json');
+}
+export function ensureMetaDir(configPath) {
+    const dir = metaDir(configPath);
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
+}
+export function readMeta(configPath, worktreePath) {
+    const fp = metaFilePath(configPath, worktreePath);
+    try {
+        return JSON.parse(fs.readFileSync(fp, 'utf8'));
+    }
+    catch (_) {
+        return null;
+    }
+}
+export function writeMeta(configPath, meta) {
+    const fp = metaFilePath(configPath, meta.worktreePath);
+    ensureMetaDir(configPath);
+    fs.writeFileSync(fp, JSON.stringify(meta, null, 2), 'utf8');
+}

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';
@@ -7,18 +8,21 @@ import { execFile } from 'node:child_process';
 import { promisify } from 'node:util';
 import express from 'express';
 import cookieParser from 'cookie-parser';
-import { loadConfig, saveConfig, DEFAULTS } from './config.js';
+import { loadConfig, saveConfig, DEFAULTS, readMeta, writeMeta, ensureMetaDir } from './config.js';
 import * as auth from './auth.js';
 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);
 // When run via CLI bin, config lives in ~/.config/claude-remote-cli/
 // When run directly (development), fall back to local config.json
 const CONFIG_PATH = process.env.CLAUDE_REMOTE_CONFIG || path.join(__dirname, '..', '..', 'config.json');
+// Ensure worktree metadata directory exists alongside config
+ensureMetaDir(CONFIG_PATH);
 const VERSION_CACHE_TTL = 5 * 60 * 1000;
 let versionCache = null;
 function getCurrentVersion() {
@@ -127,7 +131,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) => {
@@ -214,12 +218,16 @@ async function main() {
             for (const entry of entries) {
                 if (!entry.isDirectory())
                     continue;
+                const wtPath = path.join(worktreeDir, entry.name);
+                const meta = readMeta(CONFIG_PATH, wtPath);
                 worktrees.push({
                     name: entry.name,
-                    path: path.join(worktreeDir, entry.name),
+                    path: wtPath,
                     repoName: repo.name,
                     repoPath: repo.path,
                     root: repo.root,
+                    displayName: meta ? meta.displayName : '',
+                    lastActivity: meta ? meta.lastActivity : '',
                 });
             }
         }
@@ -325,8 +333,8 @@ async function main() {
         let cwd;
         let worktreeName;
         if (worktreePath) {
-            // Resume existing worktree — run claude inside the worktree directory
-            args = [...baseArgs];
+            // Resume existing worktree — run claude --continue inside the worktree directory
+            args = ['--continue', ...baseArgs];
             cwd = worktreePath;
             worktreeName = worktreePath.split('/').pop() || '';
         }
@@ -344,6 +352,7 @@ async function main() {
             displayName: worktreeName,
             command: config.claudeCommand,
             args,
+            configPath: CONFIG_PATH,
         });
         res.status(201).json(session);
     });
@@ -357,7 +366,7 @@ async function main() {
             res.status(404).json({ error: 'Session not found' });
         }
     });
-    // PATCH /sessions/:id — update displayName and send /rename through PTY
+    // PATCH /sessions/:id — update displayName and persist to metadata
     app.patch('/sessions/:id', requireAuth, (req, res) => {
         const { displayName } = req.body;
         if (!displayName) {
@@ -368,8 +377,8 @@ async function main() {
             const id = req.params['id'];
             const updated = sessions.updateDisplayName(id, displayName);
             const session = sessions.get(id);
-            if (session && session.pty) {
-                session.pty.write('/rename "' + displayName.replace(/"/g, '\\"') + '"\r');
+            if (session) {
+                writeMeta(CONFIG_PATH, { worktreePath: session.repoPath, displayName, lastActivity: session.lastActivity });
             }
             res.json(updated);
         }
@@ -377,6 +386,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,8 +1,12 @@
 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';
+import { readMeta, writeMeta } from './config.js';
 // In-memory registry: id -> Session
 const sessions = new Map();
-function create({ repoName, repoPath, root, worktreeName, displayName, command, args = [], cols = 80, rows = 24 }) {
+function create({ repoName, repoPath, root, worktreeName, displayName, command, args = [], cols = 80, rows = 24, configPath }) {
     const id = crypto.randomBytes(8).toString('hex');
     const createdAt = new Date().toISOString();
     // Strip CLAUDECODE env var to allow spawning claude inside a claude-managed server
@@ -32,6 +36,15 @@ function create({ repoName, repoPath, root, worktreeName, displayName, command,
         scrollback,
     };
     sessions.set(id, session);
+    // Load existing metadata to preserve a previously-set displayName
+    if (configPath && worktreeName) {
+        const existing = readMeta(configPath, repoPath);
+        if (existing && existing.displayName) {
+            session.displayName = existing.displayName;
+        }
+        writeMeta(configPath, { worktreePath: repoPath, displayName: session.displayName, lastActivity: createdAt });
+    }
+    let metaFlushTimer = null;
     ptyProcess.onData((data) => {
         session.lastActivity = new Date().toISOString();
         scrollback.push(data);
@@ -40,9 +53,22 @@ function create({ repoName, repoPath, root, worktreeName, displayName, command,
         while (scrollbackBytes > MAX_SCROLLBACK && scrollback.length > 1) {
             scrollbackBytes -= scrollback.shift().length;
         }
+        if (configPath && worktreeName && !metaFlushTimer) {
+            metaFlushTimer = setTimeout(() => {
+                metaFlushTimer = null;
+                writeMeta(configPath, { worktreePath: repoPath, displayName: session.displayName, lastActivity: session.lastActivity });
+            }, 5000);
+        }
     });
     ptyProcess.onExit(() => {
+        if (metaFlushTimer)
+            clearTimeout(metaFlushTimer);
+        if (configPath && worktreeName) {
+            writeMeta(configPath, { worktreePath: repoPath, displayName: session.displayName, lastActivity: session.lastActivity });
+        }
         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 +111,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.5.0",
+  "version": "1.7.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 }
@@ -316,6 +320,24 @@
     return path.split('/').filter(Boolean).pop() || path;
   }
 
+  function formatRelativeTime(isoString) {
+    if (!isoString) return '';
+    var now = Date.now();
+    var then = new Date(isoString).getTime();
+    var diffSec = Math.floor((now - then) / 1000);
+    if (diffSec < 60) return 'just now';
+    var diffMin = Math.floor(diffSec / 60);
+    if (diffMin < 60) return diffMin + ' min ago';
+    var diffHr = Math.floor(diffMin / 60);
+    if (diffHr < 24) return diffHr + (diffHr === 1 ? ' hour ago' : ' hours ago');
+    var diffDay = Math.floor(diffHr / 24);
+    if (diffDay === 1) return 'yesterday';
+    if (diffDay < 7) return diffDay + ' days ago';
+    var d = new Date(isoString);
+    var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+    return months[d.getMonth()] + ' ' + d.getDate();
+  }
+
   function renderUnifiedList() {
     var rootFilter = sidebarRootFilter.value;
     var repoFilter = sidebarRepoFilter.value;
@@ -392,6 +414,11 @@
     infoDiv.appendChild(nameSpan);
     infoDiv.appendChild(subSpan);
 
+    var timeSpan = document.createElement('span');
+    timeSpan.className = 'session-time';
+    timeSpan.textContent = formatRelativeTime(session.lastActivity);
+    infoDiv.appendChild(timeSpan);
+
     var actionsDiv = document.createElement('div');
     actionsDiv.className = 'session-actions';
 
@@ -435,8 +462,9 @@
 
     var nameSpan = document.createElement('span');
     nameSpan.className = 'session-name';
-    nameSpan.textContent = wt.name;
-    nameSpan.title = wt.name;
+    var wtDisplayName = wt.displayName || wt.name;
+    nameSpan.textContent = wtDisplayName;
+    nameSpan.title = wtDisplayName;
 
     var subSpan = document.createElement('span');
     subSpan.className = 'session-sub';
@@ -445,6 +473,11 @@
     infoDiv.appendChild(nameSpan);
     infoDiv.appendChild(subSpan);
 
+    var timeSpan = document.createElement('span');
+    timeSpan.className = 'session-time';
+    timeSpan.textContent = formatRelativeTime(wt.lastActivity);
+    infoDiv.appendChild(timeSpan);
+
     li.appendChild(infoDiv);
 
     // Click to resume (but not if context menu just opened or long-press fired)
@@ -851,6 +884,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

@@ -242,6 +242,10 @@ html, body {
   color: rgba(255, 255, 255, 0.7);
 }
 
+#session-list li.active-session.active .session-time {
+  color: rgba(255, 255, 255, 0.5);
+}
+
 /* Inactive worktree (outline) */
 #session-list li.inactive-worktree {
   background: transparent;
@@ -280,6 +284,15 @@ html, body {
   white-space: nowrap;
 }
 
+.session-time {
+  font-size: 0.65rem;
+  color: var(--text-muted);
+  opacity: 0.6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .session-actions {
   display: flex;
   align-items: center;
@@ -1013,3 +1026,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;
+}