claude-remote-cli 1.2.0 → 1.4.0

package/dist/server/index.js

@@ -12,12 +12,49 @@ import * as auth from './auth.js';
 import * as sessions from './sessions.js';
 import { setupWebSocket } from './ws.js';
 import { WorktreeWatcher } from './watcher.js';
+import { isInstalled as serviceIsInstalled } from './service.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 const execFileAsync = promisify(execFile);
 // When run via CLI bin, config lives in ~/.config/claude-remote-cli/
 // When run directly (development), fall back to local config.json
 const CONFIG_PATH = process.env.CLAUDE_REMOTE_CONFIG || path.join(__dirname, '..', '..', 'config.json');
+const VERSION_CACHE_TTL = 5 * 60 * 1000;
+let versionCache = null;
+function getCurrentVersion() {
+    const pkgPath = path.join(__dirname, '..', '..', 'package.json');
+    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'));
+    return pkg.version;
+}
+function semverLessThan(a, b) {
+    const parse = (v) => v.split('.').map(Number);
+    const [aMaj = 0, aMin = 0, aPat = 0] = parse(a);
+    const [bMaj = 0, bMin = 0, bPat = 0] = parse(b);
+    if (aMaj !== bMaj)
+        return aMaj < bMaj;
+    if (aMin !== bMin)
+        return aMin < bMin;
+    return aPat < bPat;
+}
+async function getLatestVersion() {
+    const now = Date.now();
+    if (versionCache && now - versionCache.fetchedAt < VERSION_CACHE_TTL) {
+        return versionCache.latest;
+    }
+    try {
+        const res = await fetch('https://registry.npmjs.org/claude-remote-cli/latest');
+        if (!res.ok)
+            return null;
+        const data = await res.json();
+        if (!data.version)
+            return null;
+        versionCache = { latest: data.version, fetchedAt: now };
+        return data.version;
+    }
+    catch (_) {
+        return null;
+    }
+}
 function parseTTL(ttl) {
     if (typeof ttl !== 'string')
         return 24 * 60 * 60 * 1000;
@@ -280,7 +317,7 @@ async function main() {
             return;
         }
         const name = repoName || repoPath.split('/').filter(Boolean).pop() || 'session';
-        const baseArgs = claudeArgs || config.claudeArgs || [];
+        const baseArgs = [...(config.claudeArgs || []), ...(claudeArgs || [])];
         // Compute root by matching repoPath against configured rootDirs
         const roots = config.rootDirs || [];
         const root = roots.find(function (r) { return repoPath.startsWith(r); }) || '';
@@ -340,6 +377,28 @@ async function main() {
             res.status(404).json({ error: 'Session not found' });
         }
     });
+    // GET /version — check current vs latest
+    app.get('/version', requireAuth, async (_req, res) => {
+        const current = getCurrentVersion();
+        const latest = await getLatestVersion();
+        const updateAvailable = latest !== null && semverLessThan(current, latest);
+        res.json({ current, latest, updateAvailable });
+    });
+    // POST /update — install latest version from npm
+    app.post('/update', requireAuth, async (_req, res) => {
+        try {
+            await execFileAsync('npm', ['install', '-g', 'claude-remote-cli@latest']);
+            const restarting = serviceIsInstalled();
+            res.json({ ok: true, restarting });
+            if (restarting) {
+                setTimeout(() => process.exit(0), 1000);
+            }
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : 'Update failed';
+            res.status(500).json({ ok: false, error: message });
+        }
+    });
     server.listen(config.port, config.host, () => {
         console.log(`claude-remote-cli listening on ${config.host}:${config.port}`);
     });

package/package.json

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

package/public/app.js

@@ -34,12 +34,18 @@
   var sidebarRepoFilter = document.getElementById('sidebar-repo-filter');
   var dialogRootSelect = document.getElementById('dialog-root-select');
   var dialogRepoSelect = document.getElementById('dialog-repo-select');
+  var dialogYolo = document.getElementById('dialog-yolo');
   var contextMenu = document.getElementById('context-menu');
+  var ctxResumeYolo = document.getElementById('ctx-resume-yolo');
   var ctxDeleteWorktree = document.getElementById('ctx-delete-worktree');
   var deleteWtDialog = document.getElementById('delete-worktree-dialog');
   var deleteWtName = document.getElementById('delete-wt-name');
   var deleteWtCancel = document.getElementById('delete-wt-cancel');
   var deleteWtConfirm = document.getElementById('delete-wt-confirm');
+  var updateToast = document.getElementById('update-toast');
+  var updateToastText = document.getElementById('update-toast-text');
+  var updateToastBtn = document.getElementById('update-toast-btn');
+  var updateToastDismiss = document.getElementById('update-toast-dismiss');
 
   // Context menu state
   var contextMenuTarget = null; // stores { worktreePath, repoPath, name }
@@ -117,6 +123,7 @@
     loadRepos();
     refreshAll();
     connectEventSocket();
+    checkForUpdates();
   }
 
   // ── Terminal ────────────────────────────────────────────────────────────────
@@ -545,7 +552,18 @@
       .catch(function () {});
   }
 
-  // ── Delete Worktree ────────────────────────────────────────────────────────
+  // ── Context Menu Actions ──────────────────────────────────────────────────
+
+  ctxResumeYolo.addEventListener('click', function (e) {
+    e.stopPropagation();
+    hideContextMenu();
+    if (!contextMenuTarget) return;
+    startSession(
+      contextMenuTarget.repoPath,
+      contextMenuTarget.worktreePath,
+      ['--dangerously-skip-permissions']
+    );
+  });
 
   ctxDeleteWorktree.addEventListener('click', function (e) {
     e.stopPropagation();
@@ -653,12 +671,13 @@
     dialogRepoSelect.disabled = false;
   });
 
-  function startSession(repoPath, worktreePath) {
+  function startSession(repoPath, worktreePath, claudeArgs) {
     var body = {
       repoPath: repoPath,
       repoName: repoPath.split('/').filter(Boolean).pop(),
     };
     if (worktreePath) body.worktreePath = worktreePath;
+    if (claudeArgs) body.claudeArgs = claudeArgs;
 
     fetch('/sessions', {
       method: 'POST',
@@ -678,6 +697,7 @@
 
   newSessionBtn.addEventListener('click', function () {
     customPath.value = '';
+    dialogYolo.checked = false;
     populateDialogRootSelect();
 
     var sidebarRoot = sidebarRootFilter.value;
@@ -704,7 +724,8 @@
   dialogStart.addEventListener('click', function () {
     var path = customPath.value.trim() || dialogRepoSelect.value;
     if (!path) return;
-    startSession(path);
+    var args = dialogYolo.checked ? ['--dangerously-skip-permissions'] : undefined;
+    startSession(path, undefined, args);
   });
 
   dialogCancel.addEventListener('click', function () {
@@ -851,6 +872,73 @@
     vv.addEventListener('scroll', onViewportResize);
   })();
 
+  // ── Update Toast ─────────────────────────────────────────────────────────────
+
+  function checkForUpdates() {
+    fetch('/version')
+      .then(function (res) {
+        if (!res.ok) return;
+        return res.json();
+      })
+      .then(function (data) {
+        if (data && data.updateAvailable) {
+          showUpdateToast(data.current, data.latest);
+        }
+      })
+      .catch(function () {
+        // Silently ignore version check errors
+      });
+  }
+
+  function showUpdateToast(current, latest) {
+    updateToastText.textContent = 'Update available: v' + current + ' \u2192 v' + latest;
+    updateToast.hidden = false;
+    updateToastBtn.disabled = false;
+    updateToastBtn.textContent = 'Update Now';
+
+    updateToastBtn.onclick = function () {
+      triggerUpdate(latest);
+    };
+  }
+
+  function triggerUpdate(latest) {
+    updateToastBtn.disabled = true;
+    updateToastBtn.textContent = 'Updating\u2026';
+
+    fetch('/update', { method: 'POST' })
+      .then(function (res) {
+        return res.json().then(function (data) {
+          return { ok: res.ok, data: data };
+        });
+      })
+      .then(function (result) {
+        if (result.ok && result.data.restarting) {
+          updateToastText.textContent = 'Updated! Restarting server\u2026';
+          updateToastBtn.hidden = true;
+          updateToastDismiss.hidden = true;
+          setTimeout(function () {
+            location.reload();
+          }, 5000);
+        } else if (result.ok) {
+          updateToastText.textContent = 'Updated! Please restart the server manually.';
+          updateToastBtn.hidden = true;
+        } else {
+          updateToastText.textContent = 'Update failed: ' + (result.data.error || 'Unknown error');
+          updateToastBtn.disabled = false;
+          updateToastBtn.textContent = 'Retry';
+        }
+      })
+      .catch(function () {
+        updateToastText.textContent = 'Update failed. Please try again.';
+        updateToastBtn.disabled = false;
+        updateToastBtn.textContent = 'Retry';
+      });
+  }
+
+  updateToastDismiss.addEventListener('click', function () {
+    updateToast.hidden = true;
+  });
+
   // ── Auto-auth Check ─────────────────────────────────────────────────────────
 
   fetch('/sessions')

package/public/index.html

@@ -78,6 +78,17 @@
       </div>
     </div>
 
+    <!-- Update Toast -->
+    <div id="update-toast" hidden>
+      <div id="update-toast-content">
+        <span id="update-toast-text"></span>
+        <div id="update-toast-actions">
+          <button id="update-toast-btn" class="btn-accent">Update Now</button>
+          <button id="update-toast-dismiss" aria-label="Dismiss">&times;</button>
+        </div>
+      </div>
+    </div>
+
   </div>
 
   <!-- New Session Dialog -->
@@ -99,6 +110,13 @@
       <label for="custom-path-input">Or enter a local path:</label>
       <input type="text" id="custom-path-input" placeholder="/Users/you/code/my-repo" />
     </div>
+    <div class="dialog-option">
+      <label>
+        <input type="checkbox" id="dialog-yolo" />
+        Yolo mode
+      </label>
+      <span class="dialog-option-hint">Skip all permission prompts</span>
+    </div>
     <div class="dialog-actions">
       <button id="dialog-cancel">Cancel</button>
       <button id="dialog-start" class="btn-accent">New Worktree</button>
@@ -124,7 +142,8 @@
 
   <!-- Context Menu -->
   <div id="context-menu" class="context-menu" hidden>
-    <button id="ctx-delete-worktree" class="context-menu-item">Delete worktree</button>
+    <button id="ctx-resume-yolo" class="context-menu-item">Resume in yolo mode</button>
+    <button id="ctx-delete-worktree" class="context-menu-item ctx-danger">Delete worktree</button>
   </div>
 
   <!-- Delete Worktree Confirmation Dialog -->

package/public/style.css

@@ -590,6 +590,35 @@ dialog#new-session-dialog h2 {
   border-color: var(--accent);
 }
 
+.dialog-option {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin-bottom: 1rem;
+}
+
+.dialog-option label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 0.875rem;
+  color: var(--text);
+  cursor: pointer;
+}
+
+.dialog-option input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  accent-color: var(--accent);
+  cursor: pointer;
+}
+
+.dialog-option-hint {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  padding-left: 24px;
+}
+
 .dialog-actions {
   display: flex;
   gap: 8px;
@@ -769,6 +798,11 @@ dialog#settings-dialog h2 {
   color: var(--accent);
 }
 
+.context-menu-item.ctx-danger:hover,
+.context-menu-item.ctx-danger:active {
+  color: #c0392b;
+}
+
 /* ===== Delete Worktree Dialog ===== */
 dialog#delete-worktree-dialog {
   background: var(--surface);
@@ -818,6 +852,84 @@ dialog#delete-worktree-dialog h2 {
   opacity: 0.85;
 }
 
+/* ===== Update Toast ===== */
+
+#update-toast {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 150;
+  display: flex;
+  justify-content: center;
+  padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
+  pointer-events: none;
+  animation: toast-slide-up 0.25s ease-out;
+}
+
+@keyframes toast-slide-up {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+#update-toast-content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 12px 16px;
+  max-width: 500px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  pointer-events: auto;
+}
+
+#update-toast-text {
+  flex: 1;
+  font-size: 0.85rem;
+  color: var(--text);
+}
+
+#update-toast-actions {
+  display: flex;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+#update-toast-btn {
+  padding: 8px 14px;
+  border-radius: 6px;
+  font-size: 0.8rem;
+  border: none;
+  white-space: nowrap;
+}
+
+#update-toast-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+#update-toast-dismiss {
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 1.2rem;
+  padding: 4px 6px;
+  cursor: pointer;
+}
+
+#update-toast-dismiss:hover {
+  color: var(--text);
+}
+
 /* ===== Mobile Responsive ===== */
 @media (max-width: 600px) {
   #mobile-header {