claude-remote-cli 1.9.5 → 2.0.0

package/README.md

@@ -142,9 +142,10 @@ The PIN hash is stored in config under `pinHash`. To reset:
 ## Features
 
 - **PIN-protected access** with rate limiting
-- **Worktree isolation** — each session runs in its own Claude Code `--worktree`
+- **Branch-aware sessions** — create worktrees from new or existing branches with a type-to-search branch picker
+- **Worktree isolation** — each session runs in its own git worktree under `.worktrees/`
 - **Resume sessions** — click inactive worktrees to reconnect with `--continue`
-- **Persistent session names** — display names and timestamps survive server restarts
+- **Persistent session names** — display names, branch 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)
@@ -169,7 +170,7 @@ claude-remote-cli/
 │   ├── 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
+│   ├── watcher.ts      # File watcher for .worktrees/ changes
 │   ├── auth.ts         # PIN hashing, verification, rate limiting
 │   ├── config.ts       # Config loading/saving, worktree metadata
 │   ├── clipboard.ts    # System clipboard operations (image paste)

package/dist/server/index.js

@@ -109,6 +109,24 @@ function scanAllRepos(rootDirs) {
     }
     return repos;
 }
+function ensureGitignore(repoPath, entry) {
+    const gitignorePath = path.join(repoPath, '.gitignore');
+    try {
+        if (fs.existsSync(gitignorePath)) {
+            const content = fs.readFileSync(gitignorePath, 'utf-8');
+            if (content.split('\n').some((line) => line.trim() === entry))
+                return;
+            const prefix = content.length > 0 && !content.endsWith('\n') ? '\n' : '';
+            fs.appendFileSync(gitignorePath, prefix + entry + '\n');
+        }
+        else {
+            fs.writeFileSync(gitignorePath, entry + '\n');
+        }
+    }
+    catch (_) {
+        // Non-fatal: gitignore update failure shouldn't block session creation
+    }
+}
 async function main() {
     let config;
     try {
@@ -193,6 +211,27 @@ async function main() {
         }
         res.json(repos);
     });
+    // GET /branches?repo=<path> — list local and remote branches for a repo
+    app.get('/branches', requireAuth, async (req, res) => {
+        const repoPath = typeof req.query.repo === 'string' ? req.query.repo : undefined;
+        if (!repoPath) {
+            res.status(400).json({ error: 'repo query parameter is required' });
+            return;
+        }
+        try {
+            const { stdout } = await execFileAsync('git', ['branch', '-a', '--format=%(refname:short)'], { cwd: repoPath });
+            const branches = stdout
+                .split('\n')
+                .map((b) => b.trim())
+                .filter((b) => b && !b.includes('HEAD'))
+                .map((b) => b.replace(/^origin\//, ''));
+            const unique = [...new Set(branches)];
+            res.json(unique.sort());
+        }
+        catch (_) {
+            res.json([]);
+        }
+    });
     // GET /worktrees?repo=<path> — list worktrees; omit repo to scan all repos in all rootDirs
     app.get('/worktrees', requireAuth, (req, res) => {
         const repoParam = typeof req.query.repo === 'string' ? req.query.repo : undefined;
@@ -207,7 +246,7 @@ async function main() {
             reposToScan = scanAllRepos(roots);
         }
         for (const repo of reposToScan) {
-            const worktreeDir = path.join(repo.path, '.claude', 'worktrees');
+            const worktreeDir = path.join(repo.path, '.worktrees');
             let entries;
             try {
                 entries = fs.readdirSync(worktreeDir, { withFileTypes: true });
@@ -276,9 +315,9 @@ async function main() {
             res.status(400).json({ error: 'worktreePath and repoPath are required' });
             return;
         }
-        // Validate the path is inside a .claude/worktrees/ directory
-        if (!worktreePath.includes(path.sep + '.claude' + path.sep + 'worktrees' + path.sep)) {
-            res.status(400).json({ error: 'Path is not inside a .claude/worktrees/ directory' });
+        // Validate the path is inside a .worktrees/ directory
+        if (!worktreePath.includes(path.sep + '.worktrees' + path.sep)) {
+            res.status(400).json({ error: 'Path is not inside a .worktrees/ directory' });
             return;
         }
         // Check no active session is using this worktree
@@ -288,14 +327,16 @@ async function main() {
             res.status(409).json({ error: 'Close the active session first' });
             return;
         }
-        // Derive branch name from worktree directory name
-        const branchName = worktreePath.split('/').pop() || '';
+        // Derive branch name from metadata or worktree directory name
+        const meta = readMeta(CONFIG_PATH, worktreePath);
+        const branchName = (meta && meta.branchName) || worktreePath.split('/').pop() || '';
         try {
-            // Remove the worktree (will fail if uncommitted changes — no --force)
+            // Will fail if uncommitted changes -- no --force
             await execFileAsync('git', ['worktree', 'remove', worktreePath], { cwd: repoPath });
         }
         catch (err) {
-            const message = err instanceof Error ? err.message : 'Failed to remove worktree';
+            const execErr = err;
+            const message = (execErr.stderr || execErr.message || 'Failed to remove worktree').trim();
             res.status(500).json({ error: message });
             return;
         }
@@ -318,8 +359,8 @@ async function main() {
         res.json({ ok: true });
     });
     // POST /sessions
-    app.post('/sessions', requireAuth, (req, res) => {
-        const { repoPath, repoName, worktreePath, claudeArgs } = req.body;
+    app.post('/sessions', requireAuth, async (req, res) => {
+        const { repoPath, repoName, worktreePath, branchName, claudeArgs } = req.body;
         if (!repoPath) {
             res.status(400).json({ error: 'repoPath is required' });
             return;
@@ -333,32 +374,89 @@ async function main() {
         let cwd;
         let worktreeName;
         let sessionRepoPath;
+        let resolvedBranch = '';
         if (worktreePath) {
-            // Resume existing worktree — run claude --continue inside the worktree directory
+            // Resume existing worktree
             args = ['--continue', ...baseArgs];
             cwd = worktreePath;
             sessionRepoPath = worktreePath;
             worktreeName = worktreePath.split('/').pop() || '';
         }
         else {
-            // 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);
+            // Create new worktree via git
+            let dirName;
+            if (branchName) {
+                dirName = branchName.replace(/\//g, '-');
+                resolvedBranch = branchName;
+            }
+            else {
+                dirName = 'mobile-' + name + '-' + Date.now().toString(36);
+                resolvedBranch = dirName;
+            }
+            const worktreeDir = path.join(repoPath, '.worktrees');
+            let targetDir = path.join(worktreeDir, dirName);
+            if (fs.existsSync(targetDir)) {
+                targetDir = targetDir + '-' + Date.now().toString(36);
+                dirName = path.basename(targetDir);
+            }
+            ensureGitignore(repoPath, '.worktrees/');
+            try {
+                // Check if branch exists locally or on a remote
+                let branchExists = false;
+                if (branchName) {
+                    const localCheck = await execFileAsync('git', ['rev-parse', '--verify', branchName], { cwd: repoPath }).then(() => true, () => false);
+                    if (localCheck) {
+                        branchExists = true;
+                    }
+                    else {
+                        const remoteCheck = await execFileAsync('git', ['rev-parse', '--verify', 'origin/' + branchName], { cwd: repoPath }).then(() => true, () => false);
+                        if (remoteCheck) {
+                            branchExists = true;
+                            resolvedBranch = 'origin/' + branchName;
+                        }
+                    }
+                }
+                if (branchName && branchExists) {
+                    await execFileAsync('git', ['worktree', 'add', targetDir, resolvedBranch], { cwd: repoPath });
+                }
+                else if (branchName) {
+                    await execFileAsync('git', ['worktree', 'add', '-b', branchName, targetDir, 'HEAD'], { cwd: repoPath });
+                }
+                else {
+                    await execFileAsync('git', ['worktree', 'add', '-b', dirName, targetDir, 'HEAD'], { cwd: repoPath });
+                }
+            }
+            catch (err) {
+                const execErr = err;
+                const message = (execErr.stderr || execErr.message || 'Failed to create worktree').trim();
+                res.status(500).json({ error: message });
+                return;
+            }
+            worktreeName = dirName;
+            sessionRepoPath = targetDir;
+            cwd = targetDir;
+            args = [...baseArgs];
         }
+        const displayName = branchName || worktreeName;
         const session = sessions.create({
             repoName: name,
             repoPath: sessionRepoPath,
             cwd,
             root,
             worktreeName,
-            displayName: worktreeName,
+            displayName,
             command: config.claudeCommand,
             args,
             configPath: CONFIG_PATH,
         });
+        if (!worktreePath) {
+            writeMeta(CONFIG_PATH, {
+                worktreePath: sessionRepoPath,
+                displayName,
+                lastActivity: new Date().toISOString(),
+                branchName: branchName || worktreeName,
+            });
+        }
         res.status(201).json(session);
     });
     // DELETE /sessions/:id

package/dist/server/watcher.js

@@ -30,15 +30,13 @@ export class WorktreeWatcher extends EventEmitter {
         }
     }
     _watchRepo(repoPath) {
-        const worktreeDir = path.join(repoPath, '.claude', 'worktrees');
+        const worktreeDir = path.join(repoPath, '.worktrees');
         if (fs.existsSync(worktreeDir)) {
             this._addWatch(worktreeDir);
         }
         else {
-            const claudeDir = path.join(repoPath, '.claude');
-            if (fs.existsSync(claudeDir)) {
-                this._addWatch(claudeDir);
-            }
+            // Watch the repo root so we detect when .worktrees/ is first created
+            this._addWatch(repoPath);
         }
     }
     _addWatch(dirPath) {

package/package.json

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

package/public/app.js

@@ -37,6 +37,8 @@
   var dialogRootSelect = document.getElementById('dialog-root-select');
   var dialogRepoSelect = document.getElementById('dialog-repo-select');
   var dialogYolo = document.getElementById('dialog-yolo');
+  var dialogBranchInput = document.getElementById('dialog-branch-input');
+  var dialogBranchList = document.getElementById('dialog-branch-list');
   var contextMenu = document.getElementById('context-menu');
   var ctxResumeYolo = document.getElementById('ctx-resume-yolo');
   var ctxDeleteWorktree = document.getElementById('ctx-delete-worktree');
@@ -89,8 +91,82 @@
   var cachedSessions = [];
   var cachedWorktrees = [];
   var allRepos = [];
+  var allBranches = [];
   var attentionSessions = {};
 
+  function loadBranches(repoPath) {
+    allBranches = [];
+    dialogBranchList.innerHTML = '';
+    dialogBranchList.hidden = true;
+    if (!repoPath) return;
+
+    fetch('/branches?repo=' + encodeURIComponent(repoPath))
+      .then(function (res) {
+        if (!res.ok) return [];
+        return res.json();
+      })
+      .then(function (data) {
+        allBranches = data || [];
+      })
+      .catch(function () {
+        allBranches = [];
+      });
+  }
+
+  function filterBranches(query) {
+    dialogBranchList.innerHTML = '';
+    if (!query) {
+      dialogBranchList.hidden = true;
+      return;
+    }
+
+    var lower = query.toLowerCase();
+    var matches = allBranches.filter(function (b) {
+      return b.toLowerCase().indexOf(lower) !== -1;
+    }).slice(0, 10);
+
+    var exactMatch = allBranches.some(function (b) { return b === query; });
+
+    if (!exactMatch) {
+      var createLi = document.createElement('li');
+      createLi.className = 'branch-create-new';
+      createLi.textContent = 'Create new: ' + query;
+      createLi.addEventListener('click', function () {
+        dialogBranchInput.value = query;
+        dialogBranchList.hidden = true;
+      });
+      dialogBranchList.appendChild(createLi);
+    }
+
+    matches.forEach(function (branch) {
+      var li = document.createElement('li');
+      li.textContent = branch;
+      li.addEventListener('click', function () {
+        dialogBranchInput.value = branch;
+        dialogBranchList.hidden = true;
+      });
+      dialogBranchList.appendChild(li);
+    });
+
+    dialogBranchList.hidden = dialogBranchList.children.length === 0;
+  }
+
+  dialogBranchInput.addEventListener('input', function () {
+    filterBranches(dialogBranchInput.value.trim());
+  });
+
+  dialogBranchInput.addEventListener('focus', function () {
+    if (dialogBranchInput.value.trim()) {
+      filterBranches(dialogBranchInput.value.trim());
+    }
+  });
+
+  document.addEventListener('click', function (e) {
+    if (!dialogBranchInput.contains(e.target) && !dialogBranchList.contains(e.target)) {
+      dialogBranchList.hidden = true;
+    }
+  });
+
   // ── PIN Auth ────────────────────────────────────────────────────────────────
 
   function submitPin() {
@@ -917,6 +993,8 @@
   dialogRootSelect.addEventListener('change', function () {
     var root = dialogRootSelect.value;
     dialogRepoSelect.innerHTML = '<option value="">Select a repo...</option>';
+    dialogBranchInput.value = '';
+    allBranches = [];
 
     if (!root) {
       dialogRepoSelect.disabled = true;
@@ -934,13 +1012,20 @@
     dialogRepoSelect.disabled = false;
   });
 
-  function startSession(repoPath, worktreePath, claudeArgs) {
+  dialogRepoSelect.addEventListener('change', function () {
+    var repoPath = dialogRepoSelect.value;
+    dialogBranchInput.value = '';
+    loadBranches(repoPath);
+  });
+
+  function startSession(repoPath, worktreePath, claudeArgs, branchName) {
     var body = {
       repoPath: repoPath,
       repoName: repoPath.split('/').filter(Boolean).pop(),
     };
     if (worktreePath) body.worktreePath = worktreePath;
     if (claudeArgs) body.claudeArgs = claudeArgs;
+    if (branchName) body.branchName = branchName;
 
     fetch('/sessions', {
       method: 'POST',
@@ -961,6 +1046,9 @@
   newSessionBtn.addEventListener('click', function () {
     customPath.value = '';
     dialogYolo.checked = false;
+    dialogBranchInput.value = '';
+    dialogBranchList.hidden = true;
+    allBranches = [];
     populateDialogRootSelect();
 
     var sidebarRoot = sidebarRootFilter.value;
@@ -985,10 +1073,18 @@
   });
 
   dialogStart.addEventListener('click', function () {
-    var path = customPath.value.trim() || dialogRepoSelect.value;
-    if (!path) return;
+    var repoPathValue = customPath.value.trim() || dialogRepoSelect.value;
+    if (!repoPathValue) return;
     var args = dialogYolo.checked ? ['--dangerously-skip-permissions'] : undefined;
-    startSession(path, undefined, args);
+    var branch = dialogBranchInput.value.trim() || undefined;
+    startSession(repoPathValue, undefined, args, branch);
+  });
+
+  customPath.addEventListener('blur', function () {
+    var pathValue = customPath.value.trim();
+    if (pathValue) {
+      loadBranches(pathValue);
+    }
   });
 
   dialogCancel.addEventListener('click', function () {
@@ -1359,6 +1455,28 @@
       return count;
     }
 
+    // Batched send: accumulates payload across rapid input events (e.g. autocorrect
+    // fires deleteContentBackward + insertText ~2ms apart) and flushes in one
+    // ws.send() so the PTY receives backspaces + replacement text atomically.
+    var sendBuffer = '';
+    var sendTimer = null;
+    var SEND_DELAY = 10; // ms – enough to batch autocorrect pairs, imperceptible for typing
+
+    function scheduleSend(data) {
+      sendBuffer += data;
+      if (sendTimer !== null) clearTimeout(sendTimer);
+      sendTimer = setTimeout(flushSendBuffer, SEND_DELAY);
+    }
+
+    function flushSendBuffer() {
+      sendTimer = null;
+      if (sendBuffer && ws && ws.readyState === WebSocket.OPEN) {
+        dbg('FLUSH: "' + sendBuffer.replace(/\x7f/g, '\u232b') + '" (' + sendBuffer.length + ' bytes)');
+        ws.send(sendBuffer);
+      }
+      sendBuffer = '';
+    }
+
     // Send the diff between lastInputValue and currentValue to the terminal.
     // Handles autocorrect expansions, deletions, and same-length replacements.
     function sendInputDiff(currentValue) {
@@ -1374,11 +1492,13 @@
 
       dbg('sendInputDiff: del=' + charsToDelete + ' "' + deletedSlice + '" add="' + newChars + '"');
 
+      var payload = '';
       for (var i = 0; i < charsToDelete; i++) {
-        ws.send('\x7f'); // backspace
+        payload += '\x7f';
       }
-      if (newChars) {
-        ws.send(newChars);
+      payload += newChars;
+      if (payload) {
+        scheduleSend(payload);
       }
     }
 
@@ -1413,9 +1533,7 @@
       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.
+    // Flush any pending composed text and buffered sends to the terminal.
     function flushComposedText() {
       isComposing = false;
       if (ws && ws.readyState === WebSocket.OPEN) {
@@ -1423,6 +1541,7 @@
         sendInputDiff(currentValue);
         lastInputValue = currentValue;
       }
+      flushSendBuffer();
     }
     function clearInput() {
       mobileInput.value = '';

package/public/index.html

@@ -131,6 +131,15 @@
       <select id="dialog-repo-select" disabled><option value="">Select a repo...</option></select>
     </div>
 
+    <div class="dialog-field">
+      <label for="dialog-branch-input">Branch</label>
+      <div class="branch-input-wrapper">
+        <input type="text" id="dialog-branch-input" placeholder="Search or create branch..." autocomplete="off" />
+        <ul id="dialog-branch-list" class="branch-dropdown" hidden></ul>
+      </div>
+      <span class="dialog-option-hint">Leave empty for auto-generated name</span>
+    </div>
+
     <hr class="dialog-separator" />
     <div class="dialog-custom-path">
       <label for="custom-path-input">Or enter a local path:</label>

package/public/style.css

@@ -618,6 +618,62 @@ dialog#new-session-dialog h2 {
   cursor: not-allowed;
 }
 
+/* ===== Branch Input ===== */
+.branch-input-wrapper {
+  position: relative;
+}
+
+.branch-input-wrapper input {
+  width: 100%;
+  padding: 10px 12px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text);
+  font-size: 0.875rem;
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.branch-input-wrapper input:focus {
+  border-color: var(--accent);
+}
+
+.branch-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  max-height: 200px;
+  overflow-y: auto;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-top: none;
+  border-radius: 0 0 6px 6px;
+  list-style: none;
+  z-index: 10;
+  margin: 0;
+  padding: 0;
+}
+
+.branch-dropdown li {
+  padding: 8px 12px;
+  font-size: 0.85rem;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.branch-dropdown li:hover,
+.branch-dropdown li.highlighted {
+  background: var(--surface);
+  color: var(--accent);
+}
+
+.branch-dropdown li.branch-create-new {
+  color: var(--accent);
+  font-style: italic;
+}
+
 .repo-group-label {
   font-size: 0.75rem;
   font-weight: 600;