claude-relay 2.4.0 → 2.4.1

package/bin/cli.js

@@ -41,6 +41,7 @@ var removePath = null;
 var listMode = false;
 var dangerouslySkipPermissions = false;
 var headlessMode = false;
+var watchMode = false;
 
 for (var i = 0; i < args.length; i++) {
   if (args[i] === "-p" || args[i] === "--port") {
@@ -56,6 +57,8 @@ for (var i = 0; i < args.length; i++) {
     skipUpdate = true;
   } else if (args[i] === "--dev") {
     // Already handled above for CLAUDE_RELAY_HOME, just skip
+  } else if (args[i] === "--watch" || args[i] === "-w") {
+    watchMode = true;
   } else if (args[i] === "--debug") {
     debugMode = true;
   } else if (args[i] === "-y" || args[i] === "--yes") {
@@ -406,9 +409,13 @@ async function restartDaemonFromConfig() {
   newConfig.pid = child.pid;
   saveConfig(newConfig);
 
-  // Wait and verify
-  await new Promise(function (resolve) { setTimeout(resolve, 1200); });
-  var alive = await isDaemonAliveAsync(newConfig);
+  // Wait and verify (retry up to 5 seconds)
+  var alive = false;
+  for (var rc = 0; rc < 10; rc++) {
+    await new Promise(function (resolve) { setTimeout(resolve, 500); });
+    alive = await isDaemonAliveAsync(newConfig);
+    if (alive) break;
+  }
   if (!alive) {
     log(a.red + "     Restart failed. Check logs: " + a.reset + logFile);
     process.exit(1);
@@ -1266,11 +1273,13 @@ async function forkDaemon(pin, keepAwake, extraProjects, addCwd) {
   config.pid = child.pid;
   saveConfig(config);
 
-  // Wait for daemon to start
-  await new Promise(function (resolve) { setTimeout(resolve, 800); });
-
-  // Verify daemon is alive
-  var alive = await isDaemonAliveAsync(config);
+  // Wait for daemon to start (retry up to 5 seconds)
+  var alive = false;
+  for (var attempt = 0; attempt < 10; attempt++) {
+    await new Promise(function (resolve) { setTimeout(resolve, 500); });
+    alive = await isDaemonAliveAsync(config);
+    if (alive) break;
+  }
   if (!alive) {
     log(a.red + "Failed to start daemon. Check logs:" + a.reset);
     log(a.dim + logFile + a.reset);
@@ -1363,6 +1372,13 @@ async function devMode(pin, keepAwake, existingPinHash) {
         intentionalKill = false;
         return;
       }
+      // Exit code 120 = update restart — respawn daemon with current dev code
+      if (code === 120) {
+        console.log("\x1b[36m[dev]\x1b[0m Update restart — respawning daemon...");
+        console.log("");
+        setTimeout(spawnDaemon, 500);
+        return;
+      }
       // Unexpected exit — auto restart
       console.log("\x1b[33m[dev] Daemon exited (code " + code + "), restarting...\x1b[0m");
       setTimeout(spawnDaemon, 500);
@@ -1382,37 +1398,46 @@ async function devMode(pin, keepAwake, existingPinHash) {
   }
 
   console.log("\x1b[36m[dev]\x1b[0m Starting relay on port " + port + "...");
-  console.log("\x1b[36m[dev]\x1b[0m Watching lib/ for changes (excluding lib/public/)");
+  if (watchMode) {
+    console.log("\x1b[36m[dev]\x1b[0m Watching lib/ for changes (excluding lib/public/)");
+  }
   console.log("");
 
   spawnDaemon();
 
   // Wait for daemon to be ready, then show CLI menu
-  await new Promise(function (resolve) { setTimeout(resolve, 1000); });
   config.pid = child ? child.pid : null;
   saveConfig(config);
 
-  var daemonReady = await isDaemonAliveAsync(config);
+  var daemonReady = false;
+  for (var da = 0; da < 10; da++) {
+    await new Promise(function (resolve) { setTimeout(resolve, 500); });
+    daemonReady = await isDaemonAliveAsync(config);
+    if (daemonReady) break;
+  }
   if (daemonReady) {
     showServerStarted(config, ip);
   }
 
-  // Watch lib/ for server-side file changes
-  var watcher = fs.watch(libDir, { recursive: true }, function (eventType, filename) {
-    if (!filename) return;
-    // Skip client-side files — they're served from disk
-    if (filename.startsWith("public" + path.sep) || filename.startsWith("public/")) return;
-    // Skip non-JS files
-    if (!filename.endsWith(".js")) return;
-
-    if (debounceTimer) clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(function () {
-      console.log("\x1b[36m[dev]\x1b[0m File changed: lib/" + filename);
-      console.log("\x1b[36m[dev]\x1b[0m Restarting...");
-      console.log("");
-      restartDaemon();
-    }, 300);
-  });
+  // Watch lib/ for server-side file changes (only with --watch)
+  var watcher = null;
+  if (watchMode) {
+    watcher = fs.watch(libDir, { recursive: true }, function (eventType, filename) {
+      if (!filename) return;
+      // Skip client-side files — they're served from disk
+      if (filename.startsWith("public" + path.sep) || filename.startsWith("public/")) return;
+      // Skip non-JS files
+      if (!filename.endsWith(".js")) return;
+
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(function () {
+        console.log("\x1b[36m[dev]\x1b[0m File changed: lib/" + filename);
+        console.log("\x1b[36m[dev]\x1b[0m Restarting...");
+        console.log("");
+        restartDaemon();
+      }, 300);
+    });
+  }
 
   // Clean exit on Ctrl+C
   var shuttingDown = false;
@@ -1420,7 +1445,7 @@ async function devMode(pin, keepAwake, existingPinHash) {
     if (shuttingDown) return;
     shuttingDown = true;
     console.log("\n\x1b[36m[dev]\x1b[0m Shutting down...");
-    watcher.close();
+    if (watcher) watcher.close();
     if (debounceTimer) clearTimeout(debounceTimer);
     intentionalKill = true;
     if (child) {
@@ -1498,9 +1523,12 @@ async function restartDaemonWithTLS(config, callback) {
   newConfig.pid = child.pid;
   saveConfig(newConfig);
 
-  await new Promise(function (resolve) { setTimeout(resolve, 800); });
-
-  var alive = await isDaemonAliveAsync(newConfig);
+  var alive = false;
+  for (var ra = 0; ra < 10; ra++) {
+    await new Promise(function (resolve) { setTimeout(resolve, 500); });
+    alive = await isDaemonAliveAsync(newConfig);
+    if (alive) break;
+  }
   if (!alive) {
     log(sym.warn + "  " + a.yellow + "Failed to restart with HTTPS, falling back to HTTP..." + a.reset);
     // Re-fork without TLS so the server is at least running
@@ -1519,7 +1547,11 @@ async function restartDaemonWithTLS(config, callback) {
     fs.closeSync(logFd2);
     newConfig.pid = child2.pid;
     saveConfig(newConfig);
-    await new Promise(function (resolve) { setTimeout(resolve, 800); });
+    for (var rb = 0; rb < 10; rb++) {
+      await new Promise(function (resolve) { setTimeout(resolve, 500); });
+      var retryAlive = await isDaemonAliveAsync(newConfig);
+      if (retryAlive) break;
+    }
     startDaemonWatcher();
     callback(newConfig);
     return;
@@ -2204,6 +2236,17 @@ var currentVersion = require("../package.json").version;
   }
 
   if (alive) {
+    // Headless mode — daemon already running, just report and exit
+    if (headlessMode) {
+      var protocol = config.tls ? "https" : "http";
+      var ip = getLocalIP();
+      var url = protocol + "://" + ip + ":" + config.port;
+      console.log("  " + sym.done + "  Daemon already running (PID " + config.pid + ")");
+      console.log("  " + sym.done + "  " + url);
+      process.exit(0);
+      return;
+    }
+
     // Daemon is running — auto-add cwd if needed, then show menu
     var ip = getLocalIP();
 

package/lib/daemon.js

@@ -234,13 +234,103 @@ var ipc = createIPCServer(socketPath(), function (msg) {
       gracefulShutdown();
       return { ok: true };
 
+    case "update": {
+      console.log("[daemon] Update & restart requested via IPC");
+
+      // Dev mode (config.debug): just exit with code 120, cli.js dev watcher respawns daemon
+      if (config.debug) {
+        console.log("[daemon] Dev mode — restarting via dev watcher");
+        updateHandoff = true;
+        setTimeout(function () { gracefulShutdown(); }, 100);
+        return { ok: true };
+      }
+
+      // Production: fetch latest via npx, then spawn updated daemon
+      var { execSync: execSyncUpd, spawn: spawnUpd } = require("child_process");
+      var updDaemonScript;
+      try {
+        // npx downloads the package and puts a bin symlink; `which` prints its path
+        var binPath = execSyncUpd(
+          "npx --yes --package=claude-relay@latest -- which claude-relay",
+          { stdio: ["ignore", "pipe", "pipe"], timeout: 120000, encoding: "utf8" }
+        ).trim();
+        // Resolve symlink to get the actual package directory
+        var realBin = fs.realpathSync(binPath);
+        updDaemonScript = path.join(path.dirname(realBin), "..", "lib", "daemon.js");
+        updDaemonScript = path.resolve(updDaemonScript);
+        console.log("[daemon] Resolved updated daemon:", updDaemonScript);
+      } catch (updErr) {
+        console.log("[daemon] npx resolve failed:", updErr.message);
+        // Fallback: restart with current code
+        updDaemonScript = path.join(__dirname, "daemon.js");
+      }
+      // Spawn new daemon process — it will retry if port is still in use
+      var { logPath: updLogPath, configPath: updConfigPath } = require("./config");
+      var updLogFd = fs.openSync(updLogPath(), "a");
+      var updChild = spawnUpd(process.execPath, [updDaemonScript], {
+        detached: true,
+        windowsHide: true,
+        stdio: ["ignore", updLogFd, updLogFd],
+        env: Object.assign({}, process.env, {
+          CLAUDE_RELAY_CONFIG: updConfigPath(),
+        }),
+      });
+      updChild.unref();
+      fs.closeSync(updLogFd);
+      config.pid = updChild.pid;
+      saveConfig(config);
+      console.log("[daemon] Spawned new daemon (PID " + updChild.pid + "), shutting down...");
+      updateHandoff = true;
+      setTimeout(function () { gracefulShutdown(); }, 100);
+      return { ok: true };
+    }
+
     default:
       return { ok: false, error: "unknown command: " + msg.cmd };
   }
 });
 
-// --- Start listening ---
+// --- Start listening (with retry for port-in-use during update handoff) ---
+var listenRetries = 0;
+var MAX_LISTEN_RETRIES = 15;
+
+function startListening() {
+  relay.server.listen(config.port, function () {
+    var protocol = tlsOptions ? "https" : "http";
+    console.log("[daemon] Listening on " + protocol + "://0.0.0.0:" + config.port);
+    console.log("[daemon] PID:", process.pid);
+    console.log("[daemon] Projects:", config.projects.length);
+
+    // Update PID in config
+    config.pid = process.pid;
+    saveConfig(config);
+
+    // Check for crash info from a previous crash and notify clients
+    var crashInfo = readCrashInfo();
+    if (crashInfo) {
+      console.log("[daemon] Recovered from crash at", new Date(crashInfo.time).toISOString());
+      console.log("[daemon] Crash reason:", crashInfo.reason);
+      // Delay notification so clients have time to reconnect
+      setTimeout(function () {
+        relay.broadcastAll({
+          type: "toast",
+          level: "warn",
+          message: "Server recovered from a crash and was automatically restarted.",
+          detail: crashInfo.reason || null,
+        });
+      }, 3000);
+      clearCrashInfo();
+    }
+  });
+}
+
 relay.server.on("error", function (err) {
+  if (err.code === "EADDRINUSE" && listenRetries < MAX_LISTEN_RETRIES) {
+    listenRetries++;
+    console.log("[daemon] Port " + config.port + " in use, retrying (" + listenRetries + "/" + MAX_LISTEN_RETRIES + ")...");
+    setTimeout(startListening, 1000);
+    return;
+  }
   console.error("[daemon] Server error:", err.message);
   writeCrashInfo({
     reason: "Server error: " + err.message,
@@ -250,33 +340,7 @@ relay.server.on("error", function (err) {
   process.exit(1);
 });
 
-relay.server.listen(config.port, function () {
-  var protocol = tlsOptions ? "https" : "http";
-  console.log("[daemon] Listening on " + protocol + "://0.0.0.0:" + config.port);
-  console.log("[daemon] PID:", process.pid);
-  console.log("[daemon] Projects:", config.projects.length);
-
-  // Update PID in config
-  config.pid = process.pid;
-  saveConfig(config);
-
-  // Check for crash info from a previous crash and notify clients
-  var crashInfo = readCrashInfo();
-  if (crashInfo) {
-    console.log("[daemon] Recovered from crash at", new Date(crashInfo.time).toISOString());
-    console.log("[daemon] Crash reason:", crashInfo.reason);
-    // Delay notification so clients have time to reconnect
-    setTimeout(function () {
-      relay.broadcastAll({
-        type: "toast",
-        level: "warn",
-        message: "Server recovered from a crash and was automatically restarted.",
-        detail: crashInfo.reason || null,
-      });
-    }, 3000);
-    clearCrashInfo();
-  }
-});
+startListening();
 
 // --- HTTP onboarding server (only when TLS is active) ---
 if (relay.onboardingServer) {
@@ -300,8 +364,11 @@ if (config.keepAwake && process.platform === "darwin") {
 }
 
 // --- Graceful shutdown ---
+var updateHandoff = false; // true when shutting down for update (new daemon already spawned)
+
 function gracefulShutdown() {
   console.log("[daemon] Shutting down...");
+  var exitCode = updateHandoff ? 120 : 0; // 120 = update handoff, don't auto-restart
 
   if (caffeinateProc) {
     try { caffeinateProc.kill(); } catch (e) {}
@@ -309,14 +376,16 @@ function gracefulShutdown() {
 
   ipc.close();
 
-  // Remove PID from config
-  try {
-    var c = loadConfig();
-    if (c && c.pid === process.pid) {
-      delete c.pid;
-      saveConfig(c);
-    }
-  } catch (e) {}
+  // Remove PID from config (skip if update handoff — new daemon PID is already saved)
+  if (!updateHandoff) {
+    try {
+      var c = loadConfig();
+      if (c && c.pid === process.pid) {
+        delete c.pid;
+        saveConfig(c);
+      }
+    } catch (e) {}
+  }
 
   relay.destroyAll();
 
@@ -326,7 +395,7 @@ function gracefulShutdown() {
 
   relay.server.close(function () {
     console.log("[daemon] Server closed");
-    process.exit(0);
+    process.exit(exitCode);
   });
 
   // Force exit after 5 seconds

package/lib/project.js

@@ -346,7 +346,7 @@ function createProjectContext(opts) {
         if (s.cliSessionId) relayIds[s.cliSessionId] = true;
       });
       try {
-        var sessDir = _path.join(cwd, ".claude-relay", "sessions");
+        var sessDir = sm.sessionsDir;
         var diskFiles = _fs.readdirSync(sessDir);
         for (var fi = 0; fi < diskFiles.length; fi++) {
           if (diskFiles[fi].endsWith(".jsonl")) {
@@ -406,6 +406,14 @@ function createProjectContext(opts) {
       return;
     }
 
+    if (msg.type === "update_now") {
+      send({ type: "update_started", version: latestVersion || "" });
+      var _ipc = require("./ipc");
+      var _config = require("./config");
+      _ipc.sendIPCCommand(_config.socketPath(), { cmd: "update" });
+      return;
+    }
+
     if (msg.type === "process_stats") {
       var sessionCount = sm.sessions.size;
       var processingCount = 0;

package/lib/public/app.js

@@ -1355,6 +1355,12 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           if (updateBanner && updateVersion && msg.version) {
             updateVersion.textContent = "v" + msg.version;
             updateBanner.classList.remove("hidden");
+            // Reset button state (may be stuck on "Updating..." after restart)
+            var updResetBtn = $("update-now");
+            if (updResetBtn) {
+              updResetBtn.textContent = "Update now";
+              updResetBtn.disabled = false;
+            }
             refreshIcons();
           }
           // Show badge on footer update check item
@@ -1373,6 +1379,18 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           }
           break;
 
+        case "update_started":
+          var updNowBtn = $("update-now");
+          if (updNowBtn) {
+            updNowBtn.textContent = "Updating...";
+            updNowBtn.disabled = true;
+          }
+          // Block the entire screen with the connect overlay
+          connectStatusEl.textContent = "Updating" + (msg.version ? " to v" + msg.version : "") + "...";
+          connectOverlay.classList.remove("hidden");
+          startPixelAnim();
+          break;
+
         case "slash_commands":
           var reserved = new Set(builtinCommands.map(function (c) { return c.name; }));
           slashCommands = (msg.commands || []).filter(function (name) {

package/lib/public/css/filebrowser.css

@@ -74,9 +74,14 @@
   align-items: center;
   justify-content: center;
   width: 16px;
+  height: 16px;
   flex-shrink: 0;
-  font-size: 14px;
-  line-height: 1;
+  line-height: 0;
+}
+
+.file-tree-icon svg {
+  width: 16px;
+  height: 16px;
 }
 
 .file-tree-chevron {

package/lib/public/css/overlays.css

@@ -91,7 +91,7 @@
 .update-banner-text .lucide { width: 13px; height: 13px; color: var(--success); }
 .update-banner-text strong { color: var(--text); font-weight: 600; }
 
-#update-how {
+#update-now {
   background: var(--success-15);
   border: 1px solid var(--success-25);
   border-radius: 6px;
@@ -105,7 +105,24 @@
   transition: background 0.15s;
 }
 
-#update-how:hover { background: var(--success-25); }
+#update-now:hover { background: var(--success-25); }
+#update-now:disabled { opacity: 0.6; cursor: default; }
+
+#update-how {
+  background: transparent;
+  border: 1px solid var(--text-dimmer);
+  border-radius: 6px;
+  color: var(--text-dimmer);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  padding: 3px 7px;
+  flex-shrink: 0;
+  transition: background 0.15s, color 0.15s;
+}
+
+#update-how:hover { background: rgba(var(--overlay-rgb), 0.05); color: var(--text-secondary); }
 
 #update-popover {
   display: none;

package/lib/public/css/sidebar.css

@@ -432,13 +432,15 @@
   display: flex;
   align-items: center;
   gap: 4px;
-  padding: 7px 12px;
+  padding: 0 36px 0 12px;
+  height: 34px;
   border-radius: 10px;
   cursor: pointer;
   font-size: 13px;
   color: var(--text-secondary);
   margin-bottom: 0;
-  transition: background 0.15s, color 0.15s;
+  transition: background 0.35s ease, color 0.35s ease;
+  contain: size layout;
 }
 
 .session-item-text {
@@ -471,7 +473,11 @@
 }
 
 .session-more-btn {
-  display: none;
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
   width: 24px;
   height: 24px;
   border-radius: 6px;
@@ -479,15 +485,16 @@
   background: transparent;
   color: var(--text-muted);
   cursor: pointer;
-  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   padding: 0;
-  transition: color 0.15s, background 0.15s;
+  opacity: 0;
+  transition: opacity 0.35s ease, color 0.15s, background 0.15s;
 }
 
-.session-more-btn .lucide { width: 14px; height: 14px; }
-.session-item:hover .session-more-btn { display: flex; }
+.session-more-btn .lucide,
+.session-more-btn svg { width: 14px; height: 14px; display: block; }
+.session-item:hover .session-more-btn { opacity: 1; }
 .session-more-btn:hover { color: var(--text); background: rgba(var(--overlay-rgb), 0.06); }
 
 /* --- Session context menu --- */
@@ -540,7 +547,7 @@
 }
 
 @media (hover: none) {
-  .session-more-btn { display: flex; }
+  .session-more-btn { opacity: 1; }
   .msg-copy-hint { opacity: 1; }
   .msg-user[data-uuid] .bubble::after { display: none; }
   .mermaid-diagram::after { display: none; }

package/lib/public/index.html

@@ -13,7 +13,6 @@
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 <link href="https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600&family=Styrene+A+Web:wght@400;500&display=swap" rel="stylesheet">
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/file-icons-js@1/css/style.css">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5/css/xterm.min.css">
 <script>
 (function(){try{var k="claude-relay-theme-vars",v=localStorage.getItem(k);if(!v)return;var o=JSON.parse(v),r=document.documentElement,p;for(p in o)r.style.setProperty(p,o[p]);var vt=localStorage.getItem(k.replace("-vars","-variant"));if(vt==="light"){r.classList.add("light-theme");r.classList.remove("dark-theme")}else{r.classList.add("dark-theme");r.classList.remove("light-theme")}var m=document.querySelector('meta[name="theme-color"]');if(m&&o["--bg"])m.setAttribute("content",o["--bg"])}catch(e){}})();
@@ -107,7 +106,8 @@
   <div id="app">
     <div id="update-banner" class="hidden">
       <span class="update-banner-text"><i data-lucide="arrow-up-circle"></i> A new version of Claude Relay is available: <strong id="update-version"></strong></span>
-      <button id="update-how" title="How to update">How to update</button>
+      <button id="update-now">Update now</button>
+      <button id="update-how" title="Manual update instructions">?</button>
       <button id="update-banner-close" aria-label="Dismiss"><i data-lucide="x"></i></button>
     </div>
     <div id="onboarding-banner" class="hidden">
@@ -453,7 +453,6 @@
 <script src="https://cdn.jsdelivr.net/npm/lucide@0.468.0/dist/umd/lucide.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
-<script src="https://cdn.jsdelivr.net/npm/file-icons-js@1/index.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5/lib/xterm.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0/lib/addon-fit.min.js"></script>
 <script type="module" src="app.js"></script>

package/lib/public/modules/filebrowser.js

@@ -3,6 +3,7 @@ import { escapeHtml, copyToClipboard } from './utils.js';
 import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks } from './markdown.js';
 import { closeSidebar } from './sidebar.js';
 import { renderUnifiedDiff, renderSplitDiff } from './diff.js';
+import { initFileIcons, getFileIconSvg, getFolderIconSvg } from './fileicons.js';
 
 var ctx;
 var treeData = {};  // path -> { loaded, children }
@@ -24,6 +25,14 @@ var pendingFileAt = null;    // callback for pending file-at
 export function initFileBrowser(_ctx) {
   ctx = _ctx;
 
+  // Load material file icons in background
+  initFileIcons().then(function () {
+    // Re-render tree if already loaded, so file icons appear
+    if (treeData["."] && treeData["."].loaded) {
+      renderTree();
+    }
+  });
+
   // Close button
   document.getElementById("file-viewer-close").addEventListener("click", function () {
     closeFileViewer();
@@ -329,14 +338,21 @@ function renderEntries(container, entries, depth) {
     if (entry.type === "dir") {
       row.innerHTML =
         '<span class="file-tree-chevron">' + iconHtml("chevron-right") + '</span>' +
-        iconHtml("folder") +
+        '<span class="file-tree-icon file-tree-folder-icon"></span>' +
         '<span class="file-tree-name">' + escapeHtml(entry.name) + '</span>';
 
+      // Async-load folder icon SVG
+      (function (iconEl, name) {
+        getFolderIconSvg(name, false, function (svg) {
+          iconEl.innerHTML = svg;
+        });
+      })(row.querySelector(".file-tree-folder-icon"), entry.name);
+
       var childContainer = document.createElement("div");
       childContainer.className = "file-tree-children hidden";
       childContainer.dataset.parentPath = entry.path;
 
-      (function (dirPath, childEl, rowEl) {
+      (function (dirPath, childEl, rowEl, folderName) {
         rowEl.addEventListener("click", function (e) {
           e.stopPropagation();
           var isExpanded = rowEl.classList.contains("expanded");
@@ -356,16 +372,23 @@ function renderEntries(container, entries, depth) {
               refreshIcons();
             }
           }
+          // Swap folder icon open/closed
+          var folderIconEl = rowEl.querySelector(".file-tree-folder-icon");
+          if (folderIconEl) {
+            getFolderIconSvg(folderName, !isExpanded, function (svg) {
+              folderIconEl.innerHTML = svg;
+            });
+          }
         });
-      })(entry.path, childContainer, row);
+      })(entry.path, childContainer, row, entry.name);
 
       container.appendChild(row);
       container.appendChild(childContainer);
     } else {
-      var iconClass = getFileIconClass(entry.name);
+      var fileSvg = getFileIconSvg(entry.name);
       row.innerHTML =
         '<span class="file-tree-spacer"></span>' +
-        '<span class="file-tree-icon ' + iconClass + '"></span>' +
+        '<span class="file-tree-icon">' + fileSvg + '</span>' +
         '<span class="file-tree-name">' + escapeHtml(entry.name) + '</span>';
 
       (function (filePath, rowEl) {
@@ -388,12 +411,6 @@ function renderEntries(container, entries, depth) {
   }
 }
 
-function getFileIconClass(name) {
-  if (typeof FileIcons !== "undefined") {
-    return FileIcons.getClassWithColor(name) || "default-icon";
-  }
-  return "default-icon";
-}
 
 // --- File viewer ---
 

package/lib/public/modules/fileicons.js

@@ -0,0 +1,172 @@
+// Material Icon Theme file & folder icons
+// Files:   material-file-icons via esm.sh (dynamic import, ~475KB lazy-loaded)
+// Folders: material-icon-theme SVGs via jsdelivr CDN (fetched & cached)
+
+var materialIcons = null;
+var folderSvgCache = {};
+var loadPromise = null;
+
+var FOLDER_CDN = "https://cdn.jsdelivr.net/npm/material-icon-theme@5/icons/";
+
+var FOLDER_MAP = {
+  "src":            "folder-src",
+  "lib":            "folder-lib",
+  "dist":           "folder-dist",
+  "build":          "folder-dist",
+  "out":            "folder-dist",
+  "output":         "folder-dist",
+  "node_modules":   "folder-node",
+  "test":           "folder-test",
+  "tests":          "folder-test",
+  "__tests__":      "folder-test",
+  "spec":           "folder-test",
+  "docs":           "folder-docs",
+  "doc":            "folder-docs",
+  "config":         "folder-config",
+  ".config":        "folder-config",
+  "public":         "folder-public",
+  "static":         "folder-public",
+  "assets":         "folder-images",
+  "images":         "folder-images",
+  "img":            "folder-images",
+  "icons":          "folder-images",
+  "media":          "folder-images",
+  "components":     "folder-components",
+  "hooks":          "folder-hook",
+  "utils":          "folder-utils",
+  "util":           "folder-utils",
+  "helpers":        "folder-helper",
+  "helper":         "folder-helper",
+  "api":            "folder-api",
+  "routes":         "folder-routes",
+  "router":         "folder-routes",
+  "pages":          "folder-layout",
+  "views":          "folder-views",
+  "styles":         "folder-css",
+  "css":            "folder-css",
+  "scss":           "folder-sass",
+  "sass":           "folder-sass",
+  "scripts":        "folder-scripts",
+  "bin":            "folder-scripts",
+  ".git":           "folder-git",
+  ".github":        "folder-github",
+  ".vscode":        "folder-vscode",
+  "docker":         "folder-docker",
+  ".docker":        "folder-docker",
+  "database":       "folder-database",
+  "db":             "folder-database",
+  "server":         "folder-server",
+  "client":         "folder-client",
+  "types":          "folder-typescript",
+  "typings":        "folder-typescript",
+  "@types":         "folder-typescript",
+  "modules":        "folder-node",
+  "packages":       "folder-packages",
+  "vendor":         "folder-lib",
+  "env":            "folder-environment",
+  ".env":           "folder-environment",
+  "mock":           "folder-mock",
+  "mocks":          "folder-mock",
+  "__mocks__":      "folder-mock",
+  "middleware":      "folder-middleware",
+  "i18n":           "folder-i18n",
+  "locale":         "folder-i18n",
+  "locales":        "folder-i18n",
+  "fonts":          "folder-font",
+  "font":           "folder-font",
+  "logs":           "folder-log",
+  "log":            "folder-log",
+  "tmp":            "folder-temp",
+  "temp":           "folder-temp",
+  "templates":      "folder-template",
+  "template":       "folder-template",
+  "ref":            "folder-resource",
+  "resources":      "folder-resource",
+  "res":            "folder-resource",
+  "themes":         "folder-theme",
+  "theme":          "folder-theme",
+  "plugins":        "folder-plugin",
+  "plugin":         "folder-plugin",
+  "context":        "folder-context",
+  "contexts":       "folder-context",
+  "redux":          "folder-redux-store",
+  "store":          "folder-redux-store",
+  "stores":         "folder-redux-store",
+  "controllers":    "folder-controller",
+  "controller":     "folder-controller",
+  "models":         "folder-database",
+  "model":          "folder-database",
+  "services":       "folder-server",
+  "service":        "folder-server",
+  ".claude":        "folder-config"
+};
+
+// --- Public API ---
+
+export function initFileIcons() {
+  if (loadPromise) return loadPromise;
+  loadPromise = import("https://esm.sh/material-file-icons@2").then(function (mod) {
+    materialIcons = mod;
+  }).catch(function (err) {
+    console.warn("[fileicons] Failed to load material-file-icons:", err);
+  });
+  // Pre-fetch default folder icons
+  fetchFolderSvg("folder.svg");
+  fetchFolderSvg("folder-open.svg");
+  return loadPromise;
+}
+
+export function getFileIconSvg(filename) {
+  if (!materialIcons) return "";
+  try {
+    var icon = materialIcons.getIcon(filename);
+    return icon && icon.svg ? icon.svg : "";
+  } catch (e) {
+    return "";
+  }
+}
+
+export function getFolderIconSvg(folderName, isOpen, callback) {
+  var lower = folderName.toLowerCase();
+  var base = FOLDER_MAP[lower] || "folder";
+  var svgName = isOpen ? (base + "-open.svg") : (base + ".svg");
+
+  // Cache hit
+  if (folderSvgCache[svgName]) {
+    callback(folderSvgCache[svgName]);
+    return;
+  }
+
+  fetchFolderSvg(svgName).then(function (svg) {
+    if (svg) {
+      callback(svg);
+    } else {
+      // Fallback to default folder icon
+      var fallback = isOpen ? "folder-open.svg" : "folder.svg";
+      if (folderSvgCache[fallback]) {
+        callback(folderSvgCache[fallback]);
+      } else {
+        fetchFolderSvg(fallback).then(function (fb) {
+          callback(fb || "");
+        });
+      }
+    }
+  });
+}
+
+// --- Internal ---
+
+function fetchFolderSvg(svgName) {
+  if (folderSvgCache[svgName]) {
+    return Promise.resolve(folderSvgCache[svgName]);
+  }
+  return fetch(FOLDER_CDN + svgName).then(function (res) {
+    if (!res.ok) return null;
+    return res.text();
+  }).then(function (text) {
+    if (text) folderSvgCache[svgName] = text;
+    return text;
+  }).catch(function () {
+    return null;
+  });
+}

package/lib/public/modules/notifications.js

@@ -85,9 +85,10 @@ export function initNotifications(_ctx) {
     var banner = $("update-banner");
     var closeBtn = $("update-banner-close");
     var howBtn = $("update-how");
+    var updateNowBtn = $("update-now");
     if (!banner) return;
 
-    // Build popover
+    // Build popover (manual update instructions)
     var popover = document.createElement("div");
     popover.id = "update-popover";
     popover.innerHTML =
@@ -113,6 +114,18 @@ export function initNotifications(_ctx) {
       });
     });
 
+    // "Update now" button — trigger server-side update + restart
+    if (updateNowBtn) {
+      updateNowBtn.addEventListener("click", function () {
+        if (ctx.ws && ctx.connected) {
+          ctx.ws.send(JSON.stringify({ type: "update_now" }));
+          updateNowBtn.textContent = "Updating...";
+          updateNowBtn.disabled = true;
+        }
+      });
+    }
+
+    // "?" button — toggle manual instructions popover
     howBtn.addEventListener("click", function (e) {
       e.stopPropagation();
       popover.classList.toggle("visible");

package/lib/public/modules/theme.js

@@ -151,8 +151,8 @@ function computeVars(theme) {
     "--success":        b.base0B,
     "--warning":        b.base0A,
     "--sidebar-bg":     isLight ? darken(b.base00, 0.02) : darken(b.base00, 0.10),
-    "--sidebar-hover":  mixColors(b.base00, b.base01, 0.5),
-    "--sidebar-active": mixColors(b.base01, b.base02, 0.5),
+    "--sidebar-hover":  isLight ? darken(b.base00, 0.06) : mixColors(b.base00, b.base01, 0.5),
+    "--sidebar-active": isLight ? darken(b.base01, 0.05) : mixColors(b.base01, b.base02, 0.5),
     "--accent-8":       hexToRgba(b.base09, 0.08),
     "--accent-12":      hexToRgba(b.base09, 0.12),
     "--accent-15":      hexToRgba(b.base09, 0.15),

package/lib/server.js

@@ -90,7 +90,7 @@ function serveStatic(urlPath, res) {
     var content = fs.readFileSync(filePath);
     var ext = path.extname(filePath);
     var mime = MIME_TYPES[ext] || "application/octet-stream";
-    res.writeHead(200, { "Content-Type": mime + "; charset=utf-8" });
+    res.writeHead(200, { "Content-Type": mime + "; charset=utf-8", "Cache-Control": "no-cache" });
     res.end(content);
     return true;
   } catch (e) {

package/lib/sessions.js

@@ -1,5 +1,6 @@
 const fs = require("fs");
 const path = require("path");
+const config = require("./config");
 
 function createSessionManager(opts) {
   var cwd = opts.cwd;
@@ -13,10 +14,47 @@ function createSessionManager(opts) {
   var slashCommands = null;     // shared across sessions
   var skillNames = null;        // Claude-only skills to filter from slash menu
 
-  // --- Session persistence ---
-  var sessionsDir = path.join(cwd, ".claude-relay", "sessions");
+  // --- Session persistence (centralized in ~/.claude-relay/sessions/{encoded-cwd}/) ---
+  var encodedCwd = cwd.replace(/\//g, "-");
+  var sessionsDir = path.join(config.CONFIG_DIR, "sessions", encodedCwd);
   fs.mkdirSync(sessionsDir, { recursive: true });
 
+  // Auto-migrate from old per-project location ({cwd}/.claude-relay/sessions/)
+  var oldSessionsDir = path.join(cwd, ".claude-relay", "sessions");
+  try {
+    var oldFiles = fs.readdirSync(oldSessionsDir);
+    var migrated = 0;
+    for (var mi = 0; mi < oldFiles.length; mi++) {
+      if (!oldFiles[mi].endsWith(".jsonl")) continue;
+      var oldFilePath = path.join(oldSessionsDir, oldFiles[mi]);
+      var newFilePath = path.join(sessionsDir, oldFiles[mi]);
+      if (fs.existsSync(newFilePath)) continue;
+      try {
+        fs.renameSync(oldFilePath, newFilePath);
+        migrated++;
+      } catch (renameErr) {
+        try {
+          fs.copyFileSync(oldFilePath, newFilePath);
+          fs.unlinkSync(oldFilePath);
+          migrated++;
+        } catch (copyErr) {}
+      }
+    }
+    if (migrated > 0) {
+      console.log("[sessions] Migrated " + migrated + " session(s) to " + sessionsDir);
+    }
+    // Clean up old directory if empty
+    try {
+      if (fs.readdirSync(oldSessionsDir).length === 0) {
+        fs.rmdirSync(oldSessionsDir);
+        var parentDir = path.join(cwd, ".claude-relay");
+        if (fs.readdirSync(parentDir).length === 0) fs.rmdirSync(parentDir);
+      }
+    } catch (e) {}
+  } catch (e) {
+    // Old directory doesn't exist — that's fine
+  }
+
   function sessionFilePath(cliSessionId) {
     return path.join(sessionsDir, cliSessionId + ".jsonl");
   }
@@ -344,6 +382,7 @@ function createSessionManager(opts) {
     get skillNames() { return skillNames; },
     set skillNames(v) { skillNames = v; },
     sessions: sessions,
+    sessionsDir: sessionsDir,
     HISTORY_PAGE_SIZE: HISTORY_PAGE_SIZE,
     getActiveSession: getActiveSession,
     createSession: createSession,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-relay",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Web UI for Claude Code. Any device. Push notifications.",
   "bin": {
     "claude-relay": "./bin/cli.js"