claude-remote-cli 2.1.0 → 2.2.0

package/README.md

@@ -142,8 +142,10 @@ The PIN hash is stored in config under `pinHash`. To reset:
 ## Features
 
 - **PIN-protected access** with rate limiting
-- **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/`
+- **Repo sessions** — open Claude directly in any repo root, with fresh or `--continue` mode (one session per repo)
+- **Branch-aware worktrees** — create worktrees from new or existing branches with a type-to-search branch picker
+- **Tabbed sidebar** — switch between Repos and Worktrees views with shared filters and item counts
+- **Worktree isolation** — each worktree session runs in its own git worktree under `.worktrees/`
 - **Resume sessions** — click inactive worktrees to reconnect with `--continue`
 - **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)

package/dist/server/index.js

@@ -440,6 +440,7 @@ async function main() {
         }
         const displayName = branchName || worktreeName;
         const session = sessions.create({
+            type: 'worktree',
             repoName: name,
             repoPath: sessionRepoPath,
             cwd,
@@ -460,6 +461,36 @@ async function main() {
         }
         res.status(201).json(session);
     });
+    // POST /sessions/repo — start a session in the repo root (no worktree)
+    app.post('/sessions/repo', requireAuth, (req, res) => {
+        const { repoPath, repoName, continue: continueSession, claudeArgs } = req.body;
+        if (!repoPath) {
+            res.status(400).json({ error: 'repoPath is required' });
+            return;
+        }
+        // One repo session at a time
+        const existing = sessions.findRepoSession(repoPath);
+        if (existing) {
+            res.status(409).json({ error: 'A session already exists for this repo', sessionId: existing.id });
+            return;
+        }
+        const name = repoName || repoPath.split('/').filter(Boolean).pop() || 'session';
+        const baseArgs = [...(config.claudeArgs || []), ...(claudeArgs || [])];
+        const args = continueSession ? ['--continue', ...baseArgs] : [...baseArgs];
+        const roots = config.rootDirs || [];
+        const root = roots.find(function (r) { return repoPath.startsWith(r); }) || '';
+        const session = sessions.create({
+            type: 'repo',
+            repoName: name,
+            repoPath,
+            cwd: repoPath,
+            root,
+            displayName: name,
+            command: config.claudeCommand,
+            args,
+        });
+        res.status(201).json(session);
+    });
     // DELETE /sessions/:id
     app.delete('/sessions/:id', requireAuth, (req, res) => {
         try {

package/dist/server/sessions.js

@@ -11,7 +11,7 @@ let idleChangeCallback = null;
 function onIdleChange(cb) {
     idleChangeCallback = cb;
 }
-function create({ repoName, repoPath, cwd, root, worktreeName, displayName, command, args = [], cols = 80, rows = 24, configPath }) {
+function create({ type, 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
@@ -30,6 +30,7 @@ function create({ repoName, repoPath, cwd, root, worktreeName, displayName, comm
     const MAX_SCROLLBACK = 256 * 1024; // 256KB max
     const session = {
         id,
+        type: type || 'worktree',
         root: root || '',
         repoName: repoName || '',
         repoPath,
@@ -96,15 +97,16 @@ 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, idle: false };
+    return { id, type: session.type, 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, idle }) => ({
+        .map(({ id, type, root, repoName, repoPath, worktreeName, displayName, createdAt, lastActivity, idle }) => ({
         id,
+        type,
         root,
         repoName,
         repoPath,
@@ -145,4 +147,7 @@ function write(id, data) {
     }
     session.pty.write(data);
 }
-export { create, get, list, kill, resize, updateDisplayName, write, onIdleChange };
+function findRepoSession(repoPath) {
+    return list().find((s) => s.type === 'repo' && s.repoPath === repoPath);
+}
+export { create, get, list, kill, resize, updateDisplayName, write, onIdleChange, findRepoSession };

package/package.json

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

package/public/app.js

@@ -39,6 +39,8 @@
   var dialogYolo = document.getElementById('dialog-yolo');
   var dialogBranchInput = document.getElementById('dialog-branch-input');
   var dialogBranchList = document.getElementById('dialog-branch-list');
+  var dialogContinue = document.getElementById('dialog-continue');
+  var dialogContinueField = document.getElementById('dialog-continue-field');
   var contextMenu = document.getElementById('context-menu');
   var ctxResumeYolo = document.getElementById('ctx-resume-yolo');
   var ctxDeleteWorktree = document.getElementById('ctx-delete-worktree');
@@ -60,6 +62,10 @@
   var terminalScrollbarThumb = document.getElementById('terminal-scrollbar-thumb');
   var mobileInput = document.getElementById('mobile-input');
   var mobileHeader = document.getElementById('mobile-header');
+  var sidebarTabs = document.querySelectorAll('.sidebar-tab');
+  var tabReposCount = document.getElementById('tab-repos-count');
+  var tabWorktreesCount = document.getElementById('tab-worktrees-count');
+  var activeTab = 'repos';
   var isMobileDevice = 'ontouchstart' in window;
 
   // Context menu state
@@ -92,6 +98,7 @@
   var cachedWorktrees = [];
   var allRepos = [];
   var allBranches = [];
+  var cachedRepos = [];
   var attentionSessions = {};
 
   function loadBranches(repoPath) {
@@ -523,10 +530,12 @@
     Promise.all([
       fetch('/sessions').then(function (res) { return res.json(); }),
       fetch('/worktrees').then(function (res) { return res.json(); }),
+      fetch('/repos').then(function (res) { return res.json(); }),
     ])
       .then(function (results) {
         cachedSessions = results[0] || [];
         cachedWorktrees = results[1] || [];
+        cachedRepos = results[2] || [];
 
         // Prune attention flags for sessions that no longer exist
         var activeIds = {};
@@ -606,6 +615,16 @@
     renderUnifiedList();
   });
 
+  sidebarTabs.forEach(function (tab) {
+    tab.addEventListener('click', function () {
+      activeTab = tab.dataset.tab;
+      sidebarTabs.forEach(function (t) { t.classList.remove('active'); });
+      tab.classList.add('active');
+      newSessionBtn.textContent = activeTab === 'repos' ? '+ New Session' : '+ New Worktree';
+      renderUnifiedList();
+    });
+  });
+
   function rootShortName(path) {
     return path.split('/').filter(Boolean).pop() || path;
   }
@@ -633,7 +652,42 @@
     var repoFilter = sidebarRepoFilter.value;
     var textFilter = sessionFilter.value.toLowerCase();
 
-    var filteredSessions = cachedSessions.filter(function (s) {
+    // Split sessions by type
+    var repoSessions = cachedSessions.filter(function (s) { return s.type === 'repo'; });
+    var worktreeSessions = cachedSessions.filter(function (s) { return s.type !== 'repo'; });
+
+    // Filtered repo sessions
+    var filteredRepoSessions = repoSessions.filter(function (s) {
+      if (rootFilter && s.root !== rootFilter) return false;
+      if (repoFilter && s.repoName !== repoFilter) return false;
+      if (textFilter) {
+        var name = (s.displayName || s.repoName || s.id).toLowerCase();
+        if (name.indexOf(textFilter) === -1) return false;
+      }
+      return true;
+    });
+
+    // Idle repos: all repos without an active repo session
+    var activeRepoPathSet = new Set();
+    repoSessions.forEach(function (s) { activeRepoPathSet.add(s.repoPath); });
+
+    var filteredIdleRepos = cachedRepos.filter(function (r) {
+      if (activeRepoPathSet.has(r.path)) return false;
+      if (rootFilter && r.root !== rootFilter) return false;
+      if (repoFilter && r.name !== repoFilter) return false;
+      if (textFilter) {
+        var name = (r.name || '').toLowerCase();
+        if (name.indexOf(textFilter) === -1) return false;
+      }
+      return true;
+    });
+
+    filteredIdleRepos.sort(function (a, b) {
+      return (a.name || '').localeCompare(b.name || '');
+    });
+
+    // Filtered worktree sessions
+    var filteredWorktreeSessions = worktreeSessions.filter(function (s) {
       if (rootFilter && s.root !== rootFilter) return false;
       if (repoFilter && s.repoName !== repoFilter) return false;
       if (textFilter) {
@@ -643,8 +697,9 @@
       return true;
     });
 
+    // Inactive worktrees (deduped against active sessions)
     var activeWorktreePaths = new Set();
-    cachedSessions.forEach(function (s) {
+    worktreeSessions.forEach(function (s) {
       if (s.repoPath) activeWorktreePaths.add(s.repoPath);
     });
 
@@ -663,23 +718,35 @@
       return (a.name || '').localeCompare(b.name || '');
     });
 
-    sessionList.innerHTML = '';
+    // Update tab counts
+    tabReposCount.textContent = filteredRepoSessions.length + filteredIdleRepos.length;
+    tabWorktreesCount.textContent = filteredWorktreeSessions.length + filteredWorktrees.length;
 
-    filteredSessions.forEach(function (session) {
-      sessionList.appendChild(createActiveSessionLi(session));
-    });
+    // Render based on active tab
+    sessionList.innerHTML = '';
 
-    if (filteredSessions.length > 0 && filteredWorktrees.length > 0) {
-      var divider = document.createElement('li');
-      divider.className = 'session-divider';
-      divider.textContent = 'Available';
-      sessionList.appendChild(divider);
+    if (activeTab === 'repos') {
+      filteredRepoSessions.forEach(function (session) {
+        sessionList.appendChild(createActiveSessionLi(session));
+      });
+      if (filteredRepoSessions.length > 0 && filteredIdleRepos.length > 0) {
+        sessionList.appendChild(createSectionDivider('Available'));
+      }
+      filteredIdleRepos.forEach(function (repo) {
+        sessionList.appendChild(createIdleRepoLi(repo));
+      });
+    } else {
+      filteredWorktreeSessions.forEach(function (session) {
+        sessionList.appendChild(createActiveSessionLi(session));
+      });
+      if (filteredWorktreeSessions.length > 0 && filteredWorktrees.length > 0) {
+        sessionList.appendChild(createSectionDivider('Available'));
+      }
+      filteredWorktrees.forEach(function (wt) {
+        sessionList.appendChild(createInactiveWorktreeLi(wt));
+      });
     }
 
-    filteredWorktrees.forEach(function (wt) {
-      sessionList.appendChild(createInactiveWorktreeLi(wt));
-    });
-
     highlightActiveSession();
   }
 
@@ -824,6 +891,45 @@
     return li;
   }
 
+  function createSectionDivider(label) {
+    var divider = document.createElement('li');
+    divider.className = 'session-divider';
+    divider.textContent = label;
+    return divider;
+  }
+
+  function createIdleRepoLi(repo) {
+    var li = document.createElement('li');
+    li.className = 'inactive-worktree';
+    li.title = repo.path;
+
+    var infoDiv = document.createElement('div');
+    infoDiv.className = 'session-info';
+
+    var nameSpan = document.createElement('span');
+    nameSpan.className = 'session-name';
+    nameSpan.textContent = repo.name;
+    nameSpan.title = repo.name;
+
+    var dot = document.createElement('span');
+    dot.className = 'status-dot status-dot--inactive';
+
+    var subSpan = document.createElement('span');
+    subSpan.className = 'session-sub';
+    subSpan.textContent = repo.root ? rootShortName(repo.root) : repo.path;
+
+    infoDiv.appendChild(dot);
+    infoDiv.appendChild(nameSpan);
+    infoDiv.appendChild(subSpan);
+    li.appendChild(infoDiv);
+
+    li.addEventListener('click', function () {
+      openNewSessionDialogForRepo(repo);
+    });
+
+    return li;
+  }
+
   function startRename(li, session) {
     var nameSpan = li.querySelector('.session-name');
     if (!nameSpan) return;
@@ -1043,13 +1149,74 @@
       .catch(function () {});
   }
 
-  newSessionBtn.addEventListener('click', function () {
+  function resetDialogFields() {
     customPath.value = '';
     dialogYolo.checked = false;
+    dialogContinue.checked = false;
     dialogBranchInput.value = '';
     dialogBranchList.hidden = true;
     allBranches = [];
     populateDialogRootSelect();
+  }
+
+  function showDialogForTab(tab) {
+    var dialogBranchField = dialogBranchInput.closest('.dialog-field');
+    if (tab === 'repos') {
+      dialogBranchField.hidden = true;
+      dialogContinueField.hidden = false;
+      dialogStart.textContent = 'New Session';
+    } else {
+      dialogBranchField.hidden = false;
+      dialogContinueField.hidden = true;
+      dialogStart.textContent = 'New Worktree';
+    }
+  }
+
+  function openNewSessionDialogForRepo(repo) {
+    resetDialogFields();
+
+    if (repo.root) {
+      dialogRootSelect.value = repo.root;
+      dialogRootSelect.dispatchEvent(new Event('change'));
+      dialogRepoSelect.value = repo.path;
+    }
+
+    showDialogForTab('repos');
+    dialog.showModal();
+  }
+
+  function startRepoSession(repoPath, continueSession, claudeArgs) {
+    var body = { repoPath: repoPath };
+    if (continueSession) body.continue = true;
+    if (claudeArgs) body.claudeArgs = claudeArgs;
+
+    fetch('/sessions/repo', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(body),
+    })
+      .then(function (res) {
+        if (res.status === 409) {
+          return res.json().then(function (data) {
+            if (dialog.open) dialog.close();
+            refreshAll();
+            if (data.sessionId) connectToSession(data.sessionId);
+            return null;
+          });
+        }
+        return res.json();
+      })
+      .then(function (data) {
+        if (!data) return;
+        if (dialog.open) dialog.close();
+        refreshAll();
+        if (data.id) connectToSession(data.id);
+      })
+      .catch(function () {});
+  }
+
+  newSessionBtn.addEventListener('click', function () {
+    resetDialogFields();
 
     var sidebarRoot = sidebarRootFilter.value;
     if (sidebarRoot) {
@@ -1069,6 +1236,7 @@
       dialogRepoSelect.disabled = true;
     }
 
+    showDialogForTab(activeTab);
     dialog.showModal();
   });
 
@@ -1076,8 +1244,13 @@
     var repoPathValue = customPath.value.trim() || dialogRepoSelect.value;
     if (!repoPathValue) return;
     var args = dialogYolo.checked ? ['--dangerously-skip-permissions'] : undefined;
-    var branch = dialogBranchInput.value.trim() || undefined;
-    startSession(repoPathValue, undefined, args, branch);
+
+    if (activeTab === 'repos') {
+      startRepoSession(repoPathValue, dialogContinue.checked, args);
+    } else {
+      var branch = dialogBranchInput.value.trim() || undefined;
+      startSession(repoPathValue, undefined, args, branch);
+    }
   });
 
   customPath.addEventListener('blur', function () {

package/public/index.html

@@ -52,6 +52,10 @@
         </select>
         <input type="text" id="session-filter" placeholder="Filter..." />
       </div>
+      <div class="sidebar-tabs">
+        <button class="sidebar-tab active" data-tab="repos">Repos (<span id="tab-repos-count">0</span>)</button>
+        <button class="sidebar-tab" data-tab="worktrees">Worktrees (<span id="tab-worktrees-count">0</span>)</button>
+      </div>
       <ul id="session-list"></ul>
       <button id="new-session-btn">+ New Session</button>
       <button id="settings-btn">Settings</button>
@@ -140,6 +144,14 @@
       <span class="dialog-option-hint">Leave empty for auto-generated name</span>
     </div>
 
+    <div class="dialog-field" id="dialog-continue-field" hidden>
+      <label>
+        <input type="checkbox" id="dialog-continue" />
+        Continue previous conversation
+      </label>
+      <span class="dialog-option-hint">Resume where you left off (--continue)</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

@@ -202,6 +202,36 @@ html, body {
   border-color: var(--accent);
 }
 
+/* Sidebar Tabs */
+.sidebar-tabs {
+  display: flex;
+  gap: 0;
+  padding: 0 8px;
+  border-bottom: 1px solid var(--border);
+}
+
+.sidebar-tab {
+  flex: 1;
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--text-muted);
+  font-size: 0.7rem;
+  padding: 6px 4px;
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+  text-align: center;
+}
+
+.sidebar-tab:hover {
+  color: var(--text);
+}
+
+.sidebar-tab.active {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
 #session-list {
   list-style: none;
   flex: 1;