claude-remote-cli 0.1.1 → 0.2.0

package/README.md

@@ -27,6 +27,10 @@ On first launch you'll be prompted to set a PIN. Then open `http://localhost:345
 - **Node.js 20+**
 - **Claude Code CLI** installed and available in your PATH (or configure `claudeCommand` in config)
 
+## Platform Support
+
+Tested on **macOS** and **Linux**. Windows is not currently tested — file watching and PTY spawning may behave differently.
+
 ## CLI Usage
 
 ```
@@ -75,6 +79,7 @@ The PIN hash is stored in config under `pinHash`. To reset:
 - **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)
 - **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
 
 ## Architecture
 
@@ -86,6 +91,7 @@ claude-remote-cli/
 │   ├── 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
 ├── public/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-remote-cli",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Remote web interface for Claude Code CLI sessions",
   "main": "server/index.js",
   "bin": {

package/public/app.js

@@ -85,6 +85,7 @@
     initTerminal();
     loadRepos();
     refreshAll();
+    connectEventSocket();
   }
 
   // ── Terminal ────────────────────────────────────────────────────────────────
@@ -164,13 +165,43 @@
 
   // ── Sessions & Worktrees ────────────────────────────────────────────────────
 
+  var eventWs = null;
+
+  function connectEventSocket() {
+    if (eventWs) {
+      eventWs.close();
+      eventWs = null;
+    }
+
+    var url = wsProtocol + '//' + location.host + '/ws/events';
+    eventWs = new WebSocket(url);
+
+    eventWs.onmessage = function (event) {
+      try {
+        var msg = JSON.parse(event.data);
+        if (msg.type === 'worktrees-changed') {
+          loadRepos();
+          refreshAll();
+        }
+      } catch (_) {}
+    };
+
+    eventWs.onclose = function () {
+      setTimeout(function () {
+        connectEventSocket();
+      }, 3000);
+    };
+
+    eventWs.onerror = function () {};
+  }
+
   function refreshAll() {
     Promise.all([
       fetch('/sessions').then(function (res) { return res.json(); }),
       fetch('/worktrees').then(function (res) { return res.json(); }),
     ])
       .then(function (results) {
-        cachedSessions = results[0].sessions || results[0] || [];
+        cachedSessions = results[0] || [];
         cachedWorktrees = results[1] || [];
         populateSidebarFilters();
         renderUnifiedList();
@@ -531,8 +562,8 @@
       .then(function (data) {
         if (dialog.open) dialog.close();
         refreshAll();
-        if (data.id || data.sessionId) {
-          connectToSession(data.id || data.sessionId);
+        if (data.id) {
+          connectToSession(data.id);
         }
       })
       .catch(function () {});
@@ -566,7 +597,7 @@
   dialogStart.addEventListener('click', function () {
     var path = customPath.value.trim() || dialogRepoSelect.value;
     if (!path) return;
-    startSession(path, null);
+    startSession(path);
   });
 
   dialogCancel.addEventListener('click', function () {
@@ -668,6 +699,7 @@
   settingsClose.addEventListener('click', function () {
     settingsDialog.close();
     loadRepos();
+    refreshAll();
   });
 
   // ── Touch Toolbar ───────────────────────────────────────────────────────────

package/server/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+const fs = require('fs');
 const http = require('http');
 const path = require('path');
 const readline = require('readline');
@@ -11,6 +12,7 @@ const { loadConfig, saveConfig, DEFAULTS } = require('./config');
 const auth = require('./auth');
 const sessions = require('./sessions');
 const { setupWebSocket } = require('./ws');
+const { WorktreeWatcher } = require('./watcher');
 
 // When run via CLI bin, config lives in ~/.config/claude-remote-cli/
 // When run directly (development), fall back to local config.json
@@ -40,6 +42,32 @@ function promptPin(question) {
   });
 }
 
+function scanReposInRoot(rootDir) {
+  const repos = [];
+  let entries;
+  try {
+    entries = fs.readdirSync(rootDir, { withFileTypes: true });
+  } catch (_) {
+    return repos;
+  }
+  for (const entry of entries) {
+    if (!entry.isDirectory() || entry.name.startsWith('.')) continue;
+    const fullPath = path.join(rootDir, entry.name);
+    if (fs.existsSync(path.join(fullPath, '.git'))) {
+      repos.push({ name: entry.name, path: fullPath, root: rootDir });
+    }
+  }
+  return repos;
+}
+
+function scanAllRepos(rootDirs) {
+  const repos = [];
+  for (const rootDir of rootDirs) {
+    repos.push(...scanReposInRoot(rootDir));
+  }
+  return repos;
+}
+
 async function main() {
   let config;
   try {
@@ -75,6 +103,12 @@ async function main() {
     next();
   }
 
+  const watcher = new WorktreeWatcher();
+  watcher.rebuild(config.rootDirs || []);
+
+  const server = http.createServer(app);
+  const { broadcastEvent } = setupWebSocket(server, authenticatedTokens, watcher);
+
   // POST /auth
   app.post('/auth', async (req, res) => {
     const ip = req.ip || req.connection.remoteAddress;
@@ -116,24 +150,7 @@ async function main() {
 
   // GET /repos — scan root dirs for repos
   app.get('/repos', requireAuth, (req, res) => {
-    const fs = require('fs');
-    const roots = config.rootDirs || [];
-    const repos = [];
-    for (const rootDir of roots) {
-      try {
-        const entries = fs.readdirSync(rootDir, { withFileTypes: true });
-        for (const entry of entries) {
-          if (!entry.isDirectory() || entry.name.startsWith('.')) continue;
-          const fullPath = path.join(rootDir, entry.name);
-          const hasGit = fs.existsSync(path.join(fullPath, '.git'));
-          if (hasGit) {
-            repos.push({ name: entry.name, path: fullPath, root: rootDir });
-          }
-        }
-      } catch (_) {
-        // skip unreadable dirs
-      }
-    }
+    const repos = scanAllRepos(config.rootDirs || []);
     // Also include legacy manually-added repos
     if (config.repos) {
       for (const repo of config.repos) {
@@ -147,51 +164,35 @@ async function main() {
 
   // GET /worktrees?repo=<path> — list worktrees; omit repo to scan all repos in all rootDirs
   app.get('/worktrees', requireAuth, (req, res) => {
-    const fs = require('fs');
     const repoParam = req.query.repo;
     const roots = config.rootDirs || [];
     const worktrees = [];
 
-    // Build list of repos to scan
-    const reposToScan = [];
+    let reposToScan;
     if (repoParam) {
-      // Single repo mode (used by new session dialog)
       const root = roots.find(function (r) { return repoParam.startsWith(r); }) || '';
-      reposToScan.push({ path: repoParam, name: repoParam.split('/').filter(Boolean).pop(), root });
+      reposToScan = [{ path: repoParam, name: repoParam.split('/').filter(Boolean).pop(), root }];
     } else {
-      // Scan all repos in all roots
-      for (const rootDir of roots) {
-        try {
-          const entries = fs.readdirSync(rootDir, { withFileTypes: true });
-          for (const entry of entries) {
-            if (!entry.isDirectory() || entry.name.startsWith('.')) continue;
-            const fullPath = path.join(rootDir, entry.name);
-            if (fs.existsSync(path.join(fullPath, '.git'))) {
-              reposToScan.push({ path: fullPath, name: entry.name, root: rootDir });
-            }
-          }
-        } catch (_) {
-          // skip unreadable dirs
-        }
-      }
+      reposToScan = scanAllRepos(roots);
     }
 
     for (const repo of reposToScan) {
       const worktreeDir = path.join(repo.path, '.claude', 'worktrees');
+      let entries;
       try {
-        const entries = fs.readdirSync(worktreeDir, { withFileTypes: true });
-        for (const entry of entries) {
-          if (!entry.isDirectory()) continue;
-          worktrees.push({
-            name: entry.name,
-            path: path.join(worktreeDir, entry.name),
-            repoName: repo.name,
-            repoPath: repo.path,
-            root: repo.root,
-          });
-        }
+        entries = fs.readdirSync(worktreeDir, { withFileTypes: true });
       } catch (_) {
-        // no worktrees dir — that's fine
+        continue;
+      }
+      for (const entry of entries) {
+        if (!entry.isDirectory()) continue;
+        worktrees.push({
+          name: entry.name,
+          path: path.join(worktreeDir, entry.name),
+          repoName: repo.name,
+          repoPath: repo.path,
+          root: repo.root,
+        });
       }
     }
 
@@ -215,6 +216,8 @@ async function main() {
     }
     config.rootDirs.push(rootPath);
     saveConfig(CONFIG_PATH, config);
+    watcher.rebuild(config.rootDirs);
+    broadcastEvent('worktrees-changed');
     res.status(201).json(config.rootDirs);
   });
 
@@ -226,6 +229,8 @@ async function main() {
     }
     config.rootDirs = config.rootDirs.filter((r) => r !== rootPath);
     saveConfig(CONFIG_PATH, config);
+    watcher.rebuild(config.rootDirs);
+    broadcastEvent('worktrees-changed');
     res.json(config.rootDirs);
   });
 
@@ -295,9 +300,6 @@ async function main() {
     }
   });
 
-  const server = http.createServer(app);
-  setupWebSocket(server, authenticatedTokens);
-
   server.listen(config.port, config.host, () => {
     console.log(`claude-remote-cli listening on ${config.host}:${config.port}`);
   });

package/server/watcher.js

@@ -0,0 +1,78 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const EventEmitter = require('events');
+
+class WorktreeWatcher extends EventEmitter {
+  constructor() {
+    super();
+    this._watchers = [];
+    this._debounceTimer = null;
+  }
+
+  rebuild(rootDirs) {
+    this._closeAll();
+
+    for (const rootDir of rootDirs) {
+      let entries;
+      try {
+        entries = fs.readdirSync(rootDir, { withFileTypes: true });
+      } catch (_) {
+        continue;
+      }
+      for (const entry of entries) {
+        if (!entry.isDirectory() || entry.name.startsWith('.')) continue;
+        const repoPath = path.join(rootDir, entry.name);
+        if (!fs.existsSync(path.join(repoPath, '.git'))) continue;
+        this._watchRepo(repoPath);
+      }
+    }
+  }
+
+  _watchRepo(repoPath) {
+    const worktreeDir = path.join(repoPath, '.claude', 'worktrees');
+    if (fs.existsSync(worktreeDir)) {
+      this._addWatch(worktreeDir);
+    } else {
+      const claudeDir = path.join(repoPath, '.claude');
+      if (fs.existsSync(claudeDir)) {
+        this._addWatch(claudeDir);
+      }
+    }
+  }
+
+  _addWatch(dirPath) {
+    try {
+      const watcher = fs.watch(dirPath, { persistent: false }, () => {
+        this._debouncedEmit();
+      });
+      watcher.on('error', () => {});
+      this._watchers.push(watcher);
+    } catch (_) {}
+  }
+
+  _debouncedEmit() {
+    if (this._debounceTimer) clearTimeout(this._debounceTimer);
+    this._debounceTimer = setTimeout(() => {
+      this.emit('worktrees-changed');
+    }, 500);
+  }
+
+  _closeAll() {
+    for (const w of this._watchers) {
+      try { w.close(); } catch (_) {}
+    }
+    this._watchers = [];
+    if (this._debounceTimer) {
+      clearTimeout(this._debounceTimer);
+      this._debounceTimer = null;
+    }
+  }
+
+  close() {
+    this._closeAll();
+  }
+}
+
+module.exports = { WorktreeWatcher };

package/server/ws.js

@@ -16,11 +16,26 @@ function parseCookies(cookieHeader) {
   return cookies;
 }
 
-function setupWebSocket(server, authenticatedTokens) {
+function setupWebSocket(server, authenticatedTokens, watcher) {
   const wss = new WebSocketServer({ noServer: true });
+  const eventClients = new Set();
+
+  function broadcastEvent(type) {
+    const msg = JSON.stringify({ type });
+    for (const client of eventClients) {
+      if (client.readyState === client.OPEN) {
+        client.send(msg);
+      }
+    }
+  }
+
+  if (watcher) {
+    watcher.on('worktrees-changed', function () {
+      broadcastEvent('worktrees-changed');
+    });
+  }
 
   server.on('upgrade', (request, socket, head) => {
-    // Authenticate via cookie
     const cookies = parseCookies(request.headers.cookie);
     if (!authenticatedTokens.has(cookies.token)) {
       socket.write('HTTP/1.1 401 Unauthorized\r\n\r\n');
@@ -28,7 +43,16 @@ function setupWebSocket(server, authenticatedTokens) {
       return;
     }
 
-    // Extract sessionId from URL /ws/:sessionId
+    // Event channel: /ws/events
+    if (request.url === '/ws/events') {
+      wss.handleUpgrade(request, socket, head, (ws) => {
+        eventClients.add(ws);
+        ws.on('close', () => { eventClients.delete(ws); });
+      });
+      return;
+    }
+
+    // PTY channel: /ws/:sessionId
     const match = request.url && request.url.match(/^\/ws\/([a-f0-9]+)$/);
     if (!match) {
       socket.write('HTTP/1.1 404 Not Found\r\n\r\n');
@@ -52,21 +76,16 @@ function setupWebSocket(server, authenticatedTokens) {
   wss.on('connection', (ws, request, session) => {
     const ptyProcess = session.pty;
 
-    // Replay scrollback buffer so client sees all prior output
-    if (session.scrollback && session.scrollback.length > 0) {
-      for (const chunk of session.scrollback) {
-        ws.send(chunk);
-      }
+    for (const chunk of session.scrollback) {
+      ws.send(chunk);
     }
 
-    // PTY output -> WebSocket
     const dataHandler = ptyProcess.onData((data) => {
       if (ws.readyState === ws.OPEN) {
         ws.send(data);
       }
     });
 
-    // WebSocket input -> PTY
     ws.on('message', (msg) => {
       const str = msg.toString();
       try {
@@ -75,18 +94,14 @@ function setupWebSocket(server, authenticatedTokens) {
           sessions.resize(session.id, parsed.cols, parsed.rows);
           return;
         }
-      } catch (_) {
-        // Not JSON — fall through to write
-      }
+      } catch (_) {}
       ptyProcess.write(str);
     });
 
-    // Cleanup on WebSocket close
     ws.on('close', () => {
       dataHandler.dispose();
     });
 
-    // Close WebSocket when PTY exits
     ptyProcess.onExit(() => {
       if (ws.readyState === ws.OPEN) {
         ws.close(1000);
@@ -94,7 +109,7 @@ function setupWebSocket(server, authenticatedTokens) {
     });
   });
 
-  return wss;
+  return { wss, broadcastEvent };
 }
 
 module.exports = { setupWebSocket };