claude-remote-cli 1.9.0 → 1.9.2

package/README.md

@@ -2,30 +2,66 @@
 
 Remote web interface for interacting with Claude Code CLI sessions from any device.
 
-## Quick Start
+## Getting Started
 
-### Install from npm
+### 1. Install
 
 ```bash
 npm install -g claude-remote-cli
+```
+
+Requires **Node.js 24+** and **[Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code)** installed and available in your PATH.
+
+### 2. Start the server
+
+```bash
 claude-remote-cli
 ```
 
-### Or run from source
+On first launch you'll be prompted to set a PIN. This PIN protects access to your Claude sessions.
+
+Open `http://localhost:3456` in your browser and enter your PIN.
+
+### 3. Add your project directories
+
+Click **Settings** in the app to add root directories — these are parent folders that contain your git repos (scanned one level deep).
+
+You can also edit `~/.config/claude-remote-cli/config.json` directly:
+
+```json
+{
+  "rootDirs": ["/home/you/projects", "/home/you/work"]
+}
+```
+
+### 4. Run as a background service (recommended)
+
+To keep the server running after you close your terminal and auto-start on login:
 
 ```bash
-git clone https://github.com/donovan-yohan/claude-remote-cli.git
-cd claude-remote-cli
-npm install
-npm start
+claude-remote-cli --bg
 ```
 
-On first launch you'll be prompted to set a PIN. Then open `http://localhost:3456` in your browser.
+This installs a persistent service (launchd on macOS, systemd on Linux) that restarts on crash. See [Background Service](#background-service) for more options.
+
+### 5. Access from your phone with Tailscale
+
+claude-remote-cli binds to `0.0.0.0` by default, but you should **not** expose it to the public internet. Use [Tailscale](https://tailscale.com/) to create a private encrypted network between your devices.
+
+1. **Install Tailscale** on your computer (the one running claude-remote-cli) and on your phone/tablet
+   - macOS: `brew install tailscale` or download from [tailscale.com/download](https://tailscale.com/download)
+   - Linux: follow the [install guide](https://tailscale.com/download/linux)
+   - iOS/Android: install the Tailscale app from your app store
+
+2. **Sign in** to the same Tailscale account on both devices
 
-## Prerequisites
+3. **Find your computer's Tailscale IP** — run `tailscale ip` on your computer, or check the Tailscale admin console. It will look like `100.x.y.z`.
 
-- **Node.js 24+**
-- **Claude Code CLI** installed and available in your PATH (or configure `claudeCommand` in config)
+4. **Open the app** on your phone at `http://100.x.y.z:3456`
+
+That's it. Your traffic is encrypted end-to-end via WireGuard, no ports are exposed to the internet, and only devices on your Tailscale network can reach the server.
+
+> **Alternatives:** You can also use [Cloudflare Tunnel](https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/) (`cloudflared tunnel --url http://localhost:3456`) or [ngrok](https://ngrok.com/) (`ngrok http 3456`), but these expose your server to the public internet and rely on the PIN as your only layer of defense. Tailscale keeps everything private.
 
 ## Platform Support
 
@@ -150,14 +186,6 @@ claude-remote-cli/
 └── package.json
 ```
 
-## Remote Access
-
-To access from your phone or another device, expose the server via a tunnel or VPN:
-
-- **Tailscale** (recommended): Install on both devices, access via Tailscale IP
-- **Cloudflare Tunnel**: `cloudflared tunnel --url http://localhost:3456`
-- **ngrok**: `ngrok http 3456`
-
 ## License
 
 MIT

package/package.json

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

package/public/app.js

@@ -162,65 +162,59 @@
     term.onScroll(updateScrollbar);
     term.onWriteParsed(updateScrollbar);
 
-    term.onData(function (data) {
-      if (ws && ws.readyState === WebSocket.OPEN) {
-        ws.send(data);
+    var isMac = /Mac|iPhone|iPad|iPod/.test(navigator.platform || '');
+    term.attachCustomKeyEventHandler(function (e) {
+      if (isMobileDevice) {
+        return false;
       }
-    });
 
-    // On Windows/Linux, Ctrl+V is the paste shortcut but xterm.js intercepts it
-    // internally without firing a native paste event, so our image paste handler
-    // on terminalContainer never runs. Intercept Ctrl+V here to check for images.
-    // On macOS, Ctrl+V sends a raw \x16 to the terminal (used by vim etc.), so
-    // we only intercept on non-Mac platforms.
-    var isMac = /Mac|iPhone|iPad|iPod/.test(navigator.platform || '');
-    if (!isMac) {
-      term.attachCustomKeyEventHandler(function (e) {
-        if (e.type === 'keydown' && e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey &&
-            (e.key === 'v' || e.key === 'V')) {
-          if (navigator.clipboard && navigator.clipboard.read) {
-            navigator.clipboard.read().then(function (clipboardItems) {
-              var imageBlob = null;
-              var imageType = null;
-
-              for (var i = 0; i < clipboardItems.length; i++) {
-                var types = clipboardItems[i].types;
-                for (var j = 0; j < types.length; j++) {
-                  if (types[j].indexOf('image/') === 0) {
-                    imageType = types[j];
-                    imageBlob = clipboardItems[i];
-                    break;
-                  }
+      if (!isMac && e.type === 'keydown' && e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey &&
+          (e.key === 'v' || e.key === 'V')) {
+        if (navigator.clipboard && navigator.clipboard.read) {
+          navigator.clipboard.read().then(function (clipboardItems) {
+            var imageBlob = null;
+            var imageType = null;
+
+            for (var i = 0; i < clipboardItems.length; i++) {
+              var types = clipboardItems[i].types;
+              for (var j = 0; j < types.length; j++) {
+                if (types[j].indexOf('image/') === 0) {
+                  imageType = types[j];
+                  imageBlob = clipboardItems[i];
+                  break;
                 }
-                if (imageBlob) break;
               }
+              if (imageBlob) break;
+            }
 
-              if (imageBlob) {
-                imageBlob.getType(imageType).then(function (blob) {
-                  uploadImage(blob, imageType);
-                });
-              } else {
-                navigator.clipboard.readText().then(function (text) {
-                  if (text) term.paste(text);
-                });
-              }
-            }).catch(function () {
-              // Clipboard read failed (permission denied, etc.) — fall back to text.
-              // If readText also fails, paste is lost for this keypress; this only
-              // happens when clipboard permission is fully denied, which is rare
-              // for user-gesture-triggered reads on HTTPS origins.
-              if (navigator.clipboard.readText) {
-                navigator.clipboard.readText().then(function (text) {
-                  if (text) term.paste(text);
-                }).catch(function () {});
-              }
-            });
-            return false; // Prevent xterm from handling Ctrl+V
-          }
+            if (imageBlob) {
+              imageBlob.getType(imageType).then(function (blob) {
+                uploadImage(blob, imageType);
+              });
+            } else {
+              navigator.clipboard.readText().then(function (text) {
+                if (text) term.paste(text);
+              });
+            }
+          }).catch(function () {
+            if (navigator.clipboard.readText) {
+              navigator.clipboard.readText().then(function (text) {
+                if (text) term.paste(text);
+              }).catch(function () {});
+            }
+          });
+          return false;
         }
-        return true; // Let xterm handle all other keys
-      });
-    }
+      }
+
+      return true;
+    });
+
+    term.onData(function (data) {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        ws.send(data);
+      }
+    });
 
     var resizeObserver = new ResizeObserver(function () {
       fitAddon.fit();
@@ -255,7 +249,7 @@
     }
 
     terminalScrollbarThumb.style.display = 'block';
-    var thumbHeight = Math.max(20, (term.rows / totalLines) * trackHeight);
+    var thumbHeight = Math.max(isMobileDevice ? 44 : 20, (term.rows / totalLines) * trackHeight);
     var thumbTop = (viewportTop / (totalLines - term.rows)) * (trackHeight - thumbHeight);
 
     terminalScrollbarThumb.style.height = thumbHeight + 'px';
@@ -268,7 +262,7 @@
     var totalLines = buf.baseY + term.rows;
     if (totalLines <= term.rows) return;
 
-    var thumbHeight = Math.max(20, (term.rows / totalLines) * terminalScrollbar.clientHeight);
+    var thumbHeight = Math.max(isMobileDevice ? 44 : 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));
@@ -293,7 +287,7 @@
       var totalLines = buf.baseY + term.rows;
       if (totalLines <= term.rows) return;
 
-      var thumbHeight = Math.max(20, (term.rows / totalLines) * terminalScrollbar.clientHeight);
+      var thumbHeight = Math.max(isMobileDevice ? 44 : 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;
@@ -331,7 +325,13 @@
     delete attentionSessions[sessionId];
     noSessionMsg.hidden = true;
     term.clear();
-    term.focus();
+    if (isMobileDevice) {
+      mobileInput.value = '';
+      mobileInput.dispatchEvent(new Event('sessionchange'));
+      mobileInput.focus();
+    } else {
+      term.focus();
+    }
     closeSidebar();
     updateSessionTitle();
     highlightActiveSession();
@@ -1108,12 +1108,22 @@
     var text = btn.dataset.text;
     var key = btn.dataset.key;
 
+    // Flush composed text before sending Enter so pending input isn't lost
+    if (key === '\r' && mobileInput.flushComposedText) {
+      mobileInput.flushComposedText();
+    }
+
     if (text !== undefined) {
       ws.send(text);
     } else if (key !== undefined) {
       ws.send(key);
     }
 
+    // Clear input after Enter to reset state
+    if (key === '\r' && mobileInput.clearInput) {
+      mobileInput.clearInput();
+    }
+
     // Re-focus the mobile input to keep keyboard open
     if (isMobileDevice) {
       mobileInput.focus();
@@ -1277,6 +1287,7 @@
     if (!isMobileDevice) return;
 
     var lastInputValue = '';
+    var isComposing = false;
 
     function focusMobileInput() {
       if (document.activeElement !== mobileInput) {
@@ -1336,6 +1347,50 @@
       }
     }
 
+    mobileInput.addEventListener('compositionstart', function () {
+      isComposing = true;
+    });
+
+    mobileInput.addEventListener('compositionend', function () {
+      isComposing = false;
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        var currentValue = mobileInput.value;
+        sendInputDiff(currentValue);
+        lastInputValue = currentValue;
+      }
+    });
+
+    mobileInput.addEventListener('blur', function () {
+      if (isComposing) {
+        isComposing = false;
+        lastInputValue = mobileInput.value;
+      }
+    });
+
+    mobileInput.addEventListener('sessionchange', function () {
+      isComposing = false;
+      lastInputValue = '';
+    });
+
+    // Flush any pending composed text to the terminal.
+    // Safe to call even if compositionend already ran: sendInputDiff
+    // is a no-op when lastInputValue === mobileInput.value.
+    function flushComposedText() {
+      isComposing = false;
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        var currentValue = mobileInput.value;
+        sendInputDiff(currentValue);
+        lastInputValue = currentValue;
+      }
+    }
+    function clearInput() {
+      mobileInput.value = '';
+      lastInputValue = '';
+    }
+    // Expose for toolbar handler
+    mobileInput.flushComposedText = flushComposedText;
+    mobileInput.clearInput = clearInput;
+
     // Handle text input with autocorrect
     var clearTimer = null;
     mobileInput.addEventListener('input', function () {
@@ -1348,6 +1403,8 @@
 
       if (!ws || ws.readyState !== WebSocket.OPEN) return;
 
+      if (isComposing) return;
+
       var currentValue = mobileInput.value;
       sendInputDiff(currentValue);
       lastInputValue = currentValue;
@@ -1361,6 +1418,7 @@
 
       switch (e.key) {
         case 'Enter':
+          flushComposedText();
           ws.send('\r');
           mobileInput.value = '';
           lastInputValue = '';
@@ -1379,24 +1437,14 @@
           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;
       }

package/public/icon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect width="512" height="512" rx="64" fill="#1a1a1a"/>
+  <text x="256" y="200" text-anchor="middle" font-family="monospace" font-size="72" font-weight="bold" fill="#d97757">&gt;_</text>
+  <text x="256" y="320" text-anchor="middle" font-family="-apple-system,sans-serif" font-size="56" font-weight="600" fill="#ececec">Claude</text>
+  <text x="256" y="390" text-anchor="middle" font-family="-apple-system,sans-serif" font-size="40" fill="#9b9b9b">Remote CLI</text>
+</svg>

package/public/index.html

@@ -5,6 +5,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" />
+  <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+  <link rel="apple-touch-icon" href="/icon-192.png" />
   <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" />
@@ -64,7 +66,7 @@
         <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" />
+      <input type="text" id="mobile-input" dir="ltr" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" 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>
@@ -182,5 +184,6 @@
   <script src="/vendor/xterm.js"></script>
   <script src="/vendor/addon-fit.js"></script>
   <script src="/app.js"></script>
+  <script>if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js');</script>
 </body>
 </html>

package/public/manifest.json

@@ -4,5 +4,22 @@
   "display": "standalone",
   "start_url": "/",
   "background_color": "#1a1a1a",
-  "theme_color": "#1a1a1a"
+  "theme_color": "#1a1a1a",
+  "icons": [
+    {
+      "src": "/icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml"
+    }
+  ]
 }

package/public/style.css

@@ -470,13 +470,20 @@ html, body {
 
 #mobile-input {
   position: absolute;
-  top: -9999px;
-  left: -9999px;
+  left: 0;
+  top: 0;
   width: 1px;
   height: 1px;
   opacity: 0;
   font-size: 16px; /* prevents iOS zoom on focus */
   z-index: -1;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  color: transparent;
+  caret-color: transparent;
+  background: transparent;
 }
 
 /* ===== Terminal Scrollbar ===== */
@@ -1082,6 +1089,16 @@ dialog#delete-worktree-dialog h2 {
 
   #terminal-scrollbar {
     display: block;
+    width: 24px;
+    right: 0;
+  }
+
+  #terminal-scrollbar-thumb {
+    width: 24px;
+    min-height: 44px;
+    border-radius: 12px;
+    background: var(--text-muted);
+    opacity: 0.5;
   }
 }
 

package/public/sw.js

@@ -0,0 +1,5 @@
+// Minimal service worker for PWA install prompt support.
+// Does not cache — all requests pass through to the network.
+self.addEventListener('fetch', function (event) {
+  event.respondWith(fetch(event.request));
+});