claude-remote-cli 1.2.0 → 1.3.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;
@@ -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.3.0",
   "description": "Remote web interface for Claude Code CLI sessions",
   "type": "module",
   "main": "dist/server/index.js",

package/public/app.js

@@ -40,6 +40,10 @@
   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 +121,7 @@
     loadRepos();
     refreshAll();
     connectEventSocket();
+    checkForUpdates();
   }
 
   // ── Terminal ────────────────────────────────────────────────────────────────
@@ -851,6 +856,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 -->

package/public/style.css

@@ -818,6 +818,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 {