claude-remote-cli 1.8.0 → 1.9.1

package/dist/server/sessions.js

@@ -6,6 +6,11 @@ import path from 'node:path';
 import { readMeta, writeMeta } from './config.js';
 // In-memory registry: id -> Session
 const sessions = new Map();
+const IDLE_TIMEOUT_MS = 5000;
+let idleChangeCallback = null;
+function onIdleChange(cb) {
+    idleChangeCallback = cb;
+}
 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();
@@ -34,6 +39,7 @@ function create({ repoName, repoPath, cwd, root, worktreeName, displayName, comm
         createdAt,
         lastActivity: createdAt,
         scrollback,
+        idle: false,
     };
     sessions.set(id, session);
     // Load existing metadata to preserve a previously-set displayName
@@ -45,8 +51,26 @@ function create({ repoName, repoPath, cwd, root, worktreeName, displayName, comm
         writeMeta(configPath, { worktreePath: repoPath, displayName: session.displayName, lastActivity: createdAt });
     }
     let metaFlushTimer = null;
+    let idleTimer = null;
+    function resetIdleTimer() {
+        if (session.idle) {
+            session.idle = false;
+            if (idleChangeCallback)
+                idleChangeCallback(session.id, false);
+        }
+        if (idleTimer)
+            clearTimeout(idleTimer);
+        idleTimer = setTimeout(() => {
+            if (!session.idle) {
+                session.idle = true;
+                if (idleChangeCallback)
+                    idleChangeCallback(session.id, true);
+            }
+        }, IDLE_TIMEOUT_MS);
+    }
     ptyProcess.onData((data) => {
         session.lastActivity = new Date().toISOString();
+        resetIdleTimer();
         scrollback.push(data);
         scrollbackBytes += data.length;
         // Trim oldest entries if over limit
@@ -61,6 +85,8 @@ function create({ repoName, repoPath, cwd, root, worktreeName, displayName, comm
         }
     });
     ptyProcess.onExit(() => {
+        if (idleTimer)
+            clearTimeout(idleTimer);
         if (metaFlushTimer)
             clearTimeout(metaFlushTimer);
         if (configPath && worktreeName) {
@@ -70,14 +96,14 @@ function create({ repoName, repoPath, cwd, root, worktreeName, displayName, comm
         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 };
+    return { id, root: session.root, repoName: session.repoName, repoPath, worktreeName: session.worktreeName, displayName: session.displayName, pid: ptyProcess.pid, createdAt, lastActivity: createdAt, idle: false };
 }
 function get(id) {
     return sessions.get(id);
 }
 function list() {
     return Array.from(sessions.values())
-        .map(({ id, root, repoName, repoPath, worktreeName, displayName, createdAt, lastActivity }) => ({
+        .map(({ id, root, repoName, repoPath, worktreeName, displayName, createdAt, lastActivity, idle }) => ({
         id,
         root,
         repoName,
@@ -86,6 +112,7 @@ function list() {
         displayName,
         createdAt,
         lastActivity,
+        idle,
     }))
         .sort((a, b) => b.lastActivity.localeCompare(a.lastActivity));
 }
@@ -118,4 +145,4 @@ function write(id, data) {
     }
     session.pty.write(data);
 }
-export { create, get, list, kill, resize, updateDisplayName, write };
+export { create, get, list, kill, resize, updateDisplayName, write, onIdleChange };

package/dist/server/ws.js

@@ -17,8 +17,8 @@ function parseCookies(cookieHeader) {
 function setupWebSocket(server, authenticatedTokens, watcher) {
     const wss = new WebSocketServer({ noServer: true });
     const eventClients = new Set();
-    function broadcastEvent(type) {
-        const msg = JSON.stringify({ type });
+    function broadcastEvent(type, data) {
+        const msg = JSON.stringify({ type, ...data });
         for (const client of eventClients) {
             if (client.readyState === client.OPEN) {
                 client.send(msg);
@@ -40,8 +40,10 @@ function setupWebSocket(server, authenticatedTokens, watcher) {
         // Event channel: /ws/events
         if (request.url === '/ws/events') {
             wss.handleUpgrade(request, socket, head, (ws) => {
+                const cleanup = () => { eventClients.delete(ws); };
                 eventClients.add(ws);
-                ws.on('close', () => { eventClients.delete(ws); });
+                ws.on('close', cleanup);
+                ws.on('error', cleanup);
             });
             return;
         }
@@ -99,6 +101,9 @@ function setupWebSocket(server, authenticatedTokens, watcher) {
             }
         });
     });
+    sessions.onIdleChange((sessionId, idle) => {
+        broadcastEvent('session-idle-changed', { sessionId, idle });
+    });
     return { wss, broadcastEvent };
 }
 export { setupWebSocket };

package/package.json

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

package/public/app.js

@@ -6,6 +6,8 @@
   var ws = null;
   var term = null;
   var fitAddon = null;
+  var reconnectTimer = null;
+  var reconnectAttempt = 0;
 
   var wsProtocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
 
@@ -87,6 +89,7 @@
   var cachedSessions = [];
   var cachedWorktrees = [];
   var allRepos = [];
+  var attentionSessions = {};
 
   // ── PIN Auth ────────────────────────────────────────────────────────────────
 
@@ -159,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();
@@ -312,38 +309,98 @@
   // ── WebSocket / Session Connection ──────────────────────────────────────────
 
   function connectToSession(sessionId) {
+    if (reconnectTimer) {
+      clearTimeout(reconnectTimer);
+      reconnectTimer = null;
+    }
+    reconnectAttempt = 0;
+
     if (ws) {
+      ws.onclose = null;
       ws.close();
       ws = null;
     }
 
     activeSessionId = sessionId;
+    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();
 
+    openPtyWebSocket(sessionId);
+  }
+
+  function openPtyWebSocket(sessionId) {
     var url = wsProtocol + '//' + location.host + '/ws/' + sessionId;
-    ws = new WebSocket(url);
+    var socket = new WebSocket(url);
 
-    ws.onopen = function () {
+    socket.onopen = function () {
+      ws = socket;
+      reconnectAttempt = 0;
       sendResize();
     };
 
-    ws.onmessage = function (event) {
+    socket.onmessage = function (event) {
       term.write(event.data);
     };
 
-    ws.onclose = function () {
-      term.write('\r\n[Connection closed]\r\n');
-    };
+    socket.onclose = function (event) {
+      if (event.code === 1000) {
+        term.write('\r\n[Session ended]\r\n');
+        ws = null;
+        return;
+      }
+
+      if (activeSessionId !== sessionId) return;
 
-    ws.onerror = function () {
-      term.write('\r\n[WebSocket error]\r\n');
+      ws = null;
+      if (reconnectAttempt === 0) {
+        term.write('\r\n[Reconnecting...]\r\n');
+      }
+      scheduleReconnect(sessionId);
     };
 
-    highlightActiveSession();
+    socket.onerror = function () {};
+  }
+
+  var MAX_RECONNECT_ATTEMPTS = 30;
+
+  function scheduleReconnect(sessionId) {
+    if (reconnectAttempt >= MAX_RECONNECT_ATTEMPTS) {
+      term.write('\r\n[Gave up reconnecting after ' + MAX_RECONNECT_ATTEMPTS + ' attempts]\r\n');
+      return;
+    }
+    var delay = Math.min(1000 * Math.pow(2, reconnectAttempt), 10000);
+    reconnectAttempt++;
+
+    reconnectTimer = setTimeout(function () {
+      reconnectTimer = null;
+      if (activeSessionId !== sessionId) return;
+      fetch('/sessions').then(function (res) {
+        return res.json();
+      }).then(function (sessions) {
+        var exists = sessions.some(function (s) { return s.id === sessionId; });
+        if (!exists || activeSessionId !== sessionId) {
+          term.write('\r\n[Session ended]\r\n');
+          return;
+        }
+        term.clear();
+        openPtyWebSocket(sessionId);
+      }).catch(function () {
+        if (activeSessionId === sessionId) {
+          scheduleReconnect(sessionId);
+        }
+      });
+    }, delay);
   }
 
   // ── Sessions & Worktrees ────────────────────────────────────────────────────
@@ -365,6 +422,14 @@
         if (msg.type === 'worktrees-changed') {
           loadRepos();
           refreshAll();
+        } else if (msg.type === 'session-idle-changed') {
+          if (msg.idle && msg.sessionId !== activeSessionId) {
+            attentionSessions[msg.sessionId] = true;
+          }
+          if (!msg.idle) {
+            delete attentionSessions[msg.sessionId];
+          }
+          renderUnifiedList();
         }
       } catch (_) {}
     };
@@ -386,6 +451,14 @@
       .then(function (results) {
         cachedSessions = results[0] || [];
         cachedWorktrees = results[1] || [];
+
+        // Prune attention flags for sessions that no longer exist
+        var activeIds = {};
+        cachedSessions.forEach(function (s) { activeIds[s.id] = true; });
+        Object.keys(attentionSessions).forEach(function (id) {
+          if (!activeIds[id]) delete attentionSessions[id];
+        });
+
         populateSidebarFilters();
         renderUnifiedList();
       })
@@ -534,6 +607,12 @@
     highlightActiveSession();
   }
 
+  function getSessionStatus(session) {
+    if (attentionSessions[session.id]) return 'attention';
+    if (session.idle) return 'idle';
+    return 'running';
+  }
+
   function createActiveSessionLi(session) {
     var li = document.createElement('li');
     li.className = 'active-session';
@@ -552,6 +631,10 @@
     subSpan.className = 'session-sub';
     subSpan.textContent = (session.root ? rootShortName(session.root) : '') + ' · ' + (session.repoName || '');
 
+    var status = getSessionStatus(session);
+    var dot = document.createElement('span');
+    dot.className = 'status-dot status-dot--' + status;
+    infoDiv.appendChild(dot);
     infoDiv.appendChild(nameSpan);
     infoDiv.appendChild(subSpan);
 
@@ -611,6 +694,9 @@
     subSpan.className = 'session-sub';
     subSpan.textContent = (wt.root ? rootShortName(wt.root) : '') + ' · ' + (wt.repoName || '');
 
+    var dot = document.createElement('span');
+    dot.className = 'status-dot status-dot--inactive';
+    infoDiv.appendChild(dot);
     infoDiv.appendChild(nameSpan);
     infoDiv.appendChild(subSpan);
 
@@ -1191,6 +1277,7 @@
     if (!isMobileDevice) return;
 
     var lastInputValue = '';
+    var isComposing = false;
 
     function focusMobileInput() {
       if (document.activeElement !== mobileInput) {
@@ -1250,6 +1337,31 @@
       }
     }
 
+    mobileInput.addEventListener('compositionstart', function () {
+      isComposing = true;
+    });
+
+    mobileInput.addEventListener('compositionend', function () {
+      if (ws && ws.readyState === WebSocket.OPEN) {
+        var currentValue = mobileInput.value;
+        sendInputDiff(currentValue);
+        lastInputValue = currentValue;
+      }
+      setTimeout(function () { isComposing = false; }, 0);
+    });
+
+    mobileInput.addEventListener('blur', function () {
+      if (isComposing) {
+        isComposing = false;
+        lastInputValue = mobileInput.value;
+      }
+    });
+
+    mobileInput.addEventListener('sessionchange', function () {
+      isComposing = false;
+      lastInputValue = '';
+    });
+
     // Handle text input with autocorrect
     var clearTimer = null;
     mobileInput.addEventListener('input', function () {
@@ -1262,6 +1374,8 @@
 
       if (!ws || ws.readyState !== WebSocket.OPEN) return;
 
+      if (isComposing) return;
+
       var currentValue = mobileInput.value;
       sendInputDiff(currentValue);
       lastInputValue = currentValue;
@@ -1293,24 +1407,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.svg" />
   <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>

package/public/manifest.json

@@ -4,5 +4,13 @@
   "display": "standalone",
   "start_url": "/",
   "background_color": "#1a1a1a",
-  "theme_color": "#1a1a1a"
+  "theme_color": "#1a1a1a",
+  "icons": [
+    {
+      "src": "/icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    }
+  ]
 }

package/public/style.css

@@ -261,10 +261,12 @@ html, body {
 
 .session-info {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  flex-wrap: wrap;
   gap: 2px;
   min-width: 0;
   flex: 1;
+  align-items: center;
 }
 
 .session-name {
@@ -276,6 +278,39 @@ html, body {
   color: var(--text);
 }
 
+.status-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-right: 8px;
+  margin-top: 2px;
+}
+
+.status-dot--running {
+  background: #4ade80;
+}
+
+.status-dot--idle {
+  background: #60a5fa;
+}
+
+.status-dot--attention {
+  background: #f59e0b;
+  box-shadow: 0 0 6px 2px rgba(245, 158, 11, 0.5);
+  animation: attention-glow 2s ease-in-out infinite;
+}
+
+@keyframes attention-glow {
+  0%, 100% { box-shadow: 0 0 4px 1px rgba(245, 158, 11, 0.3); }
+  50% { box-shadow: 0 0 8px 3px rgba(245, 158, 11, 0.6); }
+}
+
+.status-dot--inactive {
+  background: #6b7280;
+}
+
 .session-sub {
   font-size: 0.7rem;
   color: var(--text-muted);
@@ -293,6 +328,11 @@ html, body {
   white-space: nowrap;
 }
 
+.session-sub, .session-time {
+  width: 100%;
+  padding-left: 16px; /* aligns with name text: status-dot 8px + margin-right 8px */
+}
+
 .session-actions {
   display: flex;
   align-items: center;
@@ -430,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 ===== */