claude-remote-cli 1.7.1 → 1.8.0

package/README.md

@@ -17,14 +17,14 @@ claude-remote-cli
 git clone https://github.com/donovan-yohan/claude-remote-cli.git
 cd claude-remote-cli
 npm install
-node server/index.js
+npm start
 ```
 
 On first launch you'll be prompted to set a PIN. Then open `http://localhost:3456` in your browser.
 
 ## Prerequisites
 
-- **Node.js 20+**
+- **Node.js 24+**
 - **Claude Code CLI** installed and available in your PATH (or configure `claudeCommand` in config)
 
 ## Platform Support
@@ -38,6 +38,7 @@ Usage: claude-remote-cli [options]
        claude-remote-cli <command>
 
 Commands:
+  update             Update to the latest version from npm
   install            Install as a background service (survives reboot)
   uninstall          Stop and remove the background service
   status             Show whether the service is running
@@ -106,32 +107,45 @@ The PIN hash is stored in config under `pinHash`. To reset:
 
 - **PIN-protected access** with rate limiting
 - **Worktree isolation** — each session runs in its own Claude Code `--worktree`
-- **Resume sessions** — click inactive worktrees to reconnect
+- **Resume sessions** — click inactive worktrees to reconnect with `--continue`
+- **Persistent session names** — display names and timestamps survive server restarts
+- **Clipboard image paste** — paste screenshots directly into remote terminal sessions (macOS clipboard + xclip on Linux)
+- **Yolo mode** — skip permission prompts with `--dangerously-skip-permissions` (per-session checkbox or context menu)
+- **Worktree cleanup** — delete inactive worktrees from the context menu (removes worktree, prunes refs, deletes branch)
 - **Sidebar filters** — filter by root directory, repo, or text search
-- **Inline rename** — rename sessions with the pencil icon (syncs with Claude Code's `/rename`)
+- **Inline rename** — rename sessions with the pencil icon
 - **Scrollback buffer** — reconnect to a session and see prior output
-- **Touch toolbar** — mobile-friendly buttons for special keys (arrows, Enter, Escape, Ctrl+C, Tab, y/n)
+- **Touch toolbar** — mobile-friendly buttons for special keys (hidden on desktop)
 - **Responsive layout** — works on desktop and mobile with slide-out sidebar
 - **Real-time updates** — worktree changes on disk are pushed to the browser instantly via WebSocket
+- **Update notifications** — toast notification when a new version is available, with one-click update
+- **CLI self-update** — `claude-remote-cli update` to update from npm
 
 ## Architecture
 
+TypeScript + ESM backend compiled to `dist/`. Vanilla JS frontend (no build step).
+
 ```
 claude-remote-cli/
 ├── bin/
-│   └── claude-remote-cli.js  # CLI entry point
+│   └── claude-remote-cli.ts  # CLI entry point
 ├── server/
-│   ├── index.js       # Express server, REST API routes
-│   ├── sessions.js    # PTY session manager (node-pty)
-│   ├── ws.js          # WebSocket relay (PTY ↔ browser)
-│   ├── watcher.js     # File watcher for .claude/worktrees/ changes
-│   ├── auth.js        # PIN hashing, verification, rate limiting
-│   └── config.js      # Config loading/saving
+│   ├── index.ts        # Express server, REST API routes
+│   ├── sessions.ts     # PTY session manager (node-pty)
+│   ├── ws.ts           # WebSocket relay (PTY ↔ browser)
+│   ├── watcher.ts      # File watcher for .claude/worktrees/ changes
+│   ├── auth.ts         # PIN hashing, verification, rate limiting
+│   ├── config.ts       # Config loading/saving, worktree metadata
+│   ├── clipboard.ts    # System clipboard operations (image paste)
+│   ├── service.ts      # Background service management (launchd/systemd)
+│   └── types.ts        # Shared TypeScript interfaces
 ├── public/
-│   ├── index.html     # Single-page app
-│   ├── app.js         # Frontend logic
-│   ├── style.css      # Styles (dark theme)
-│   └── vendor/        # Self-hosted xterm.js + addon-fit
+│   ├── index.html      # Single-page app
+│   ├── app.js          # Frontend logic (ES5, no build step)
+│   ├── style.css       # Styles (dark theme)
+│   └── vendor/         # Self-hosted xterm.js + addon-fit
+├── test/               # Unit tests (node:test)
+├── dist/               # Compiled output (gitignored)
 ├── config.example.json
 └── package.json
 ```

package/dist/server/index.js

@@ -332,21 +332,26 @@ async function main() {
         let args;
         let cwd;
         let worktreeName;
+        let sessionRepoPath;
         if (worktreePath) {
             // Resume existing worktree — run claude --continue inside the worktree directory
             args = ['--continue', ...baseArgs];
             cwd = worktreePath;
+            sessionRepoPath = worktreePath;
             worktreeName = worktreePath.split('/').pop() || '';
         }
         else {
-            // New worktree
+            // New worktree — PTY spawns in the repo root (so `claude --worktree X` works),
+            // but repoPath points to the expected worktree dir for identity/metadata matching
             worktreeName = 'mobile-' + name + '-' + Date.now().toString(36);
             args = ['--worktree', worktreeName, ...baseArgs];
             cwd = repoPath;
+            sessionRepoPath = path.join(repoPath, '.claude', 'worktrees', worktreeName);
         }
         const session = sessions.create({
             repoName: name,
-            repoPath: cwd,
+            repoPath: sessionRepoPath,
+            cwd,
             root,
             worktreeName,
             displayName: worktreeName,

package/dist/server/sessions.js

@@ -6,7 +6,7 @@ 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, configPath }) {
+function create({ repoName, repoPath, cwd, 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
@@ -16,7 +16,7 @@ function create({ repoName, repoPath, root, worktreeName, displayName, command,
         name: 'xterm-256color',
         cols,
         rows,
-        cwd: repoPath,
+        cwd: cwd || repoPath,
         env,
     });
     // Scrollback buffer: stores all PTY output so we can replay on WebSocket (re)connect

package/package.json

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

package/public/app.js

@@ -50,6 +50,13 @@
   var imageToastText = document.getElementById('image-toast-text');
   var imageToastInsert = document.getElementById('image-toast-insert');
   var imageToastDismiss = document.getElementById('image-toast-dismiss');
+  var imageFileInput = document.getElementById('image-file-input');
+  var uploadImageBtn = document.getElementById('upload-image-btn');
+  var terminalScrollbar = document.getElementById('terminal-scrollbar');
+  var terminalScrollbarThumb = document.getElementById('terminal-scrollbar-thumb');
+  var mobileInput = document.getElementById('mobile-input');
+  var mobileHeader = document.getElementById('mobile-header');
+  var isMobileDevice = 'ontouchstart' in window;
 
   // Context menu state
   var contextMenuTarget = null; // stores { worktreePath, repoPath, name }
@@ -149,6 +156,9 @@
     term.open(terminalContainer);
     fitAddon.fit();
 
+    term.onScroll(updateScrollbar);
+    term.onWriteParsed(updateScrollbar);
+
     term.onData(function (data) {
       if (ws && ws.readyState === WebSocket.OPEN) {
         ws.send(data);
@@ -212,6 +222,7 @@
     var resizeObserver = new ResizeObserver(function () {
       fitAddon.fit();
       sendResize();
+      updateScrollbar();
     });
     resizeObserver.observe(terminalContainer);
   }
@@ -222,6 +233,82 @@
     }
   }
 
+  // ── Terminal Scrollbar ──────────────────────────────────────────────────────
+
+  var scrollbarDragging = false;
+  var scrollbarDragStartY = 0;
+  var scrollbarDragStartTop = 0;
+
+  function updateScrollbar() {
+    if (!term || !terminalScrollbar || terminalScrollbar.style.display === 'none') return;
+    var buf = term.buffer.active;
+    var totalLines = buf.baseY + term.rows;
+    var viewportTop = buf.viewportY;
+    var trackHeight = terminalScrollbar.clientHeight;
+
+    if (totalLines <= term.rows) {
+      terminalScrollbarThumb.style.display = 'none';
+      return;
+    }
+
+    terminalScrollbarThumb.style.display = 'block';
+    var thumbHeight = Math.max(20, (term.rows / totalLines) * trackHeight);
+    var thumbTop = (viewportTop / (totalLines - term.rows)) * (trackHeight - thumbHeight);
+
+    terminalScrollbarThumb.style.height = thumbHeight + 'px';
+    terminalScrollbarThumb.style.top = thumbTop + 'px';
+  }
+
+  function scrollbarScrollToY(clientY) {
+    var rect = terminalScrollbar.getBoundingClientRect();
+    var buf = term.buffer.active;
+    var totalLines = buf.baseY + term.rows;
+    if (totalLines <= term.rows) return;
+
+    var thumbHeight = Math.max(20, (term.rows / totalLines) * terminalScrollbar.clientHeight);
+    var trackUsable = terminalScrollbar.clientHeight - thumbHeight;
+    var relativeY = clientY - rect.top - thumbHeight / 2;
+    var ratio = Math.max(0, Math.min(1, relativeY / trackUsable));
+    var targetLine = Math.round(ratio * (totalLines - term.rows));
+
+    term.scrollToLine(targetLine);
+  }
+
+  terminalScrollbarThumb.addEventListener('touchstart', function (e) {
+    e.preventDefault();
+    scrollbarDragging = true;
+    scrollbarDragStartY = e.touches[0].clientY;
+    scrollbarDragStartTop = parseInt(terminalScrollbarThumb.style.top, 10) || 0;
+  });
+
+  if (isMobileDevice) {
+    document.addEventListener('touchmove', function (e) {
+      if (!scrollbarDragging) return;
+      e.preventDefault();
+      var deltaY = e.touches[0].clientY - scrollbarDragStartY;
+      var buf = term.buffer.active;
+      var totalLines = buf.baseY + term.rows;
+      if (totalLines <= term.rows) return;
+
+      var thumbHeight = Math.max(20, (term.rows / totalLines) * terminalScrollbar.clientHeight);
+      var trackUsable = terminalScrollbar.clientHeight - thumbHeight;
+      var newTop = Math.max(0, Math.min(trackUsable, scrollbarDragStartTop + deltaY));
+      var ratio = newTop / trackUsable;
+      var targetLine = Math.round(ratio * (totalLines - term.rows));
+
+      term.scrollToLine(targetLine);
+    }, { passive: false });
+
+    document.addEventListener('touchend', function () {
+      scrollbarDragging = false;
+    });
+  }
+
+  terminalScrollbar.addEventListener('click', function (e) {
+    if (e.target === terminalScrollbarThumb) return;
+    scrollbarScrollToY(e.clientY);
+  });
+
   // ── WebSocket / Session Connection ──────────────────────────────────────────
 
   function connectToSession(sessionId) {
@@ -922,9 +1009,13 @@
 
   // ── Touch Toolbar ───────────────────────────────────────────────────────────
 
-  toolbar.addEventListener('click', function (e) {
+  function handleToolbarButton(e) {
     var btn = e.target.closest('button');
     if (!btn) return;
+    // Skip the upload button (handled separately)
+    if (btn.id === 'upload-image-btn') return;
+
+    e.preventDefault();
 
     if (!ws || ws.readyState !== WebSocket.OPEN) return;
 
@@ -936,6 +1027,19 @@
     } else if (key !== undefined) {
       ws.send(key);
     }
+
+    // Re-focus the mobile input to keep keyboard open
+    if (isMobileDevice) {
+      mobileInput.focus();
+    }
+  }
+
+  toolbar.addEventListener('touchstart', handleToolbarButton, { passive: false });
+
+  toolbar.addEventListener('click', function (e) {
+    // On non-touch devices, handle normally
+    if (isMobileDevice) return; // already handled by touchstart
+    handleToolbarButton(e);
   });
 
   // ── Image Paste Handling ─────────────────────────────────────────────────────
@@ -1062,6 +1166,162 @@
     hideImageToast();
   });
 
+  // ── Image Upload Button (mobile) ──────────────────────────────────────────
+
+  uploadImageBtn.addEventListener('click', function (e) {
+    e.preventDefault();
+    if (!activeSessionId) return;
+    imageFileInput.click();
+    if (isMobileDevice) {
+      mobileInput.focus();
+    }
+  });
+
+  imageFileInput.addEventListener('change', function () {
+    var file = imageFileInput.files[0];
+    if (file && file.type.indexOf('image/') === 0) {
+      uploadImage(file, file.type);
+    }
+    imageFileInput.value = '';
+  });
+
+  // ── Mobile Input Proxy ──────────────────────────────────────────────────────
+
+  (function () {
+    if (!isMobileDevice) return;
+
+    var lastInputValue = '';
+
+    function focusMobileInput() {
+      if (document.activeElement !== mobileInput) {
+        mobileInput.focus();
+      }
+    }
+
+    // Tap on terminal area focuses the hidden input (opens keyboard)
+    terminalContainer.addEventListener('touchend', function (e) {
+      // Don't interfere with scrollbar drag or selection
+      if (scrollbarDragging) return;
+      if (e.target === terminalScrollbarThumb || e.target === terminalScrollbar) return;
+      focusMobileInput();
+    });
+
+    // When xterm would receive focus, redirect to hidden input
+    terminalContainer.addEventListener('focus', function () {
+      focusMobileInput();
+    }, true);
+
+    // Compute the common prefix length between two strings
+    function commonPrefixLength(a, b) {
+      var len = 0;
+      while (len < a.length && len < b.length && a[len] === b[len]) {
+        len++;
+      }
+      return len;
+    }
+
+    // Count Unicode code points in a string (handles surrogate pairs)
+    function codepointCount(str) {
+      var count = 0;
+      for (var i = 0; i < str.length; i++) {
+        count++;
+        if (str.charCodeAt(i) >= 0xD800 && str.charCodeAt(i) <= 0xDBFF) {
+          i++; // skip low surrogate
+        }
+      }
+      return count;
+    }
+
+    // Send the diff between lastInputValue and currentValue to the terminal.
+    // Handles autocorrect expansions, deletions, and same-length replacements.
+    function sendInputDiff(currentValue) {
+      if (currentValue === lastInputValue) return;
+
+      var commonLen = commonPrefixLength(lastInputValue, currentValue);
+      var deletedSlice = lastInputValue.slice(commonLen);
+      var charsToDelete = codepointCount(deletedSlice);
+      var newChars = currentValue.slice(commonLen);
+
+      for (var i = 0; i < charsToDelete; i++) {
+        ws.send('\x7f'); // backspace
+      }
+      if (newChars) {
+        ws.send(newChars);
+      }
+    }
+
+    // Handle text input with autocorrect
+    var clearTimer = null;
+    mobileInput.addEventListener('input', function () {
+      // Reset the auto-clear timer to prevent unbounded growth
+      if (clearTimer) clearTimeout(clearTimer);
+      clearTimer = setTimeout(function () {
+        mobileInput.value = '';
+        lastInputValue = '';
+      }, 5000);
+
+      if (!ws || ws.readyState !== WebSocket.OPEN) return;
+
+      var currentValue = mobileInput.value;
+      sendInputDiff(currentValue);
+      lastInputValue = currentValue;
+    });
+
+    // Handle special keys (Enter, Backspace, Escape, arrows, Tab)
+    mobileInput.addEventListener('keydown', function (e) {
+      if (!ws || ws.readyState !== WebSocket.OPEN) return;
+
+      var handled = true;
+
+      switch (e.key) {
+        case 'Enter':
+          ws.send('\r');
+          mobileInput.value = '';
+          lastInputValue = '';
+          break;
+        case 'Backspace':
+          if (mobileInput.value.length === 0) {
+            // Input is empty, send backspace directly
+            ws.send('\x7f');
+          }
+          // Otherwise, let the input event handle it via diff
+          handled = false;
+          break;
+        case 'Escape':
+          ws.send('\x1b');
+          mobileInput.value = '';
+          lastInputValue = '';
+          break;
+        case 'Tab':
+          e.preventDefault();
+          ws.send('\t');
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          ws.send('\x1b[A');
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+          ws.send('\x1b[B');
+          break;
+        case 'ArrowLeft':
+          // Let input handle cursor movement for autocorrect
+          handled = false;
+          break;
+        case 'ArrowRight':
+          handled = false;
+          break;
+        default:
+          handled = false;
+      }
+
+      if (handled) {
+        e.preventDefault();
+      }
+    });
+
+  })();
+
   // ── Keyboard-Aware Viewport ─────────────────────────────────────────────────
 
   (function () {
@@ -1073,8 +1333,10 @@
       var keyboardHeight = window.innerHeight - vv.height;
       if (keyboardHeight > 50) {
         mainApp.style.height = vv.height + 'px';
+        mobileHeader.style.display = 'none';
       } else {
         mainApp.style.height = '';
+        mobileHeader.style.display = '';
       }
       if (fitAddon) {
         fitAddon.fit();

package/public/index.html

@@ -4,6 +4,11 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
   <title>Claude Remote CLI</title>
+  <link rel="manifest" href="/manifest.json" />
+  <meta name="mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+  <meta name="theme-color" content="#1a1a1a" />
   <link rel="stylesheet" href="/vendor/xterm.css" />
   <link rel="stylesheet" href="/style.css" />
 </head>
@@ -59,20 +64,23 @@
         <button id="menu-btn" class="icon-btn" aria-label="Open sessions menu">&#9776;</button>
         <span id="session-title" class="mobile-title">No session</span>
       </div>
+      <input type="text" id="mobile-input" autocomplete="on" autocorrect="on" autocapitalize="sentences" spellcheck="true" aria-label="Terminal input" />
       <div id="terminal-container"></div>
+      <div id="terminal-scrollbar"><div id="terminal-scrollbar-thumb"></div></div>
       <div id="no-session-msg">No active session. Create or select a session to begin.</div>
 
       <!-- Touch Toolbar -->
       <div id="toolbar">
         <div class="toolbar-grid">
           <button class="tb-btn" data-key="&#x09;" aria-label="Tab">Tab</button>
-          <button class="tb-btn tb-arrow" data-key="&#x1b;[A" aria-label="Up arrow">&#8593;</button>
           <button class="tb-btn" data-key="&#x1b;[Z" aria-label="Shift+Tab">&#8679;Tab</button>
+          <button class="tb-btn tb-arrow" data-key="&#x1b;[A" aria-label="Up arrow">&#8593;</button>
           <button class="tb-btn" data-key="&#x1b;" aria-label="Escape">Esc</button>
+          <button class="tb-btn" id="upload-image-btn" aria-label="Upload image">&#128247;</button>
+          <button class="tb-btn" data-key="&#x03;" aria-label="Ctrl+C">^C</button>
           <button class="tb-btn tb-arrow" data-key="&#x1b;[D" aria-label="Left arrow">&#8592;</button>
           <button class="tb-btn tb-arrow" data-key="&#x1b;[B" aria-label="Down arrow">&#8595;</button>
           <button class="tb-btn tb-arrow" data-key="&#x1b;[C" aria-label="Right arrow">&#8594;</button>
-          <button class="tb-btn" data-key="&#x03;" aria-label="Ctrl+C">^C</button>
           <button class="tb-btn tb-enter" data-key="&#x0d;" aria-label="Enter">&#9166;</button>
         </div>
       </div>
@@ -89,6 +97,9 @@
       </div>
     </div>
 
+    <!-- Hidden file input for mobile image upload -->
+    <input type="file" id="image-file-input" accept="image/*" hidden />
+
     <!-- Image Paste Toast -->
     <div id="image-toast" hidden>
       <div id="image-toast-content">

package/public/manifest.json

@@ -0,0 +1,8 @@
+{
+  "name": "Claude Remote CLI",
+  "short_name": "Claude CLI",
+  "display": "standalone",
+  "start_url": "/",
+  "background_color": "#1a1a1a",
+  "theme_color": "#1a1a1a"
+}

package/public/style.css

@@ -428,6 +428,40 @@ html, body {
   pointer-events: none;
 }
 
+#mobile-input {
+  position: absolute;
+  top: -9999px;
+  left: -9999px;
+  width: 1px;
+  height: 1px;
+  opacity: 0;
+  font-size: 16px; /* prevents iOS zoom on focus */
+  z-index: -1;
+}
+
+/* ===== Terminal Scrollbar ===== */
+#terminal-scrollbar {
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 2px;
+  bottom: 0;
+  width: 6px;
+  z-index: 10;
+  pointer-events: auto;
+}
+
+#terminal-scrollbar-thumb {
+  position: absolute;
+  right: 0;
+  width: 6px;
+  min-height: 20px;
+  background: var(--border);
+  border-radius: 3px;
+  opacity: 0.7;
+  touch-action: none;
+}
+
 /* ===== Touch Toolbar ===== */
 #toolbar {
   display: none;
@@ -440,10 +474,10 @@ html, body {
 
 .toolbar-grid {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-template-rows: auto auto auto;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: auto auto;
   gap: 4px;
-  max-width: 400px;
+  max-width: 500px;
   margin: 0 auto;
 }
 
@@ -473,12 +507,6 @@ html, body {
   font-size: 1.1rem;
 }
 
-/* Enter button: bottom-right cell only */
-.tb-btn.tb-enter {
-  grid-column: 4;
-  grid-row: 3;
-}
-
 /* ===== Dialog ===== */
 dialog#new-session-dialog {
   background: var(--surface);
@@ -999,18 +1027,22 @@ dialog#delete-worktree-dialog h2 {
   }
 
   .tb-btn {
-    padding: 16px 2px;
-    font-size: 0.8rem;
-    min-height: 48px;
+    padding: 14px 2px;
+    font-size: min(0.8rem, 3.5vw);
+    min-height: 44px;
   }
 
   .tb-btn.tb-arrow {
-    font-size: 1.2rem;
+    font-size: min(1.1rem, 4.5vw);
   }
 
   #toolbar {
     display: block;
   }
+
+  #terminal-scrollbar {
+    display: block;
+  }
 }
 
 /* ===== Scrollbar ===== */