claude-relay 1.2.0 → 1.2.4

package/lib/public/app.js

@@ -15,6 +15,8 @@
   var sessionListEl = $("session-list");
   var newSessionBtn = $("new-session-btn");
   var hamburgerBtn = $("hamburger-btn");
+  var sidebarToggleBtn = $("sidebar-toggle-btn");
+  var sidebarExpandBtn = $("sidebar-expand-btn");
   var imagePreviewBar = $("image-preview-bar");
   var connectOverlay = $("connect-overlay");
   var connectVerbEl = $("connect-verb");
@@ -121,6 +123,32 @@
     return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
   }
 
+  // --- Confirm modal ---
+  var confirmModal = $("confirm-modal");
+  var confirmText = $("confirm-text");
+  var confirmOk = $("confirm-ok");
+  var confirmCancel = $("confirm-cancel");
+  var confirmCallback = null;
+
+  function showConfirm(text, onConfirm) {
+    confirmText.textContent = text;
+    confirmCallback = onConfirm;
+    confirmModal.classList.remove("hidden");
+  }
+
+  function hideConfirm() {
+    confirmModal.classList.add("hidden");
+    confirmCallback = null;
+  }
+
+  confirmOk.addEventListener("click", function () {
+    if (confirmCallback) confirmCallback();
+    hideConfirm();
+  });
+
+  confirmCancel.addEventListener("click", hideConfirm);
+  confirmModal.querySelector(".confirm-backdrop").addEventListener("click", hideConfirm);
+
   // --- Sidebar ---
   function renderSessionList(sessions) {
     sessionListEl.innerHTML = "";
@@ -144,14 +172,16 @@
       deleteBtn.className = "session-delete-btn";
       deleteBtn.innerHTML = iconHtml("trash-2");
       deleteBtn.title = "Delete session";
-      deleteBtn.addEventListener("click", (function(id) {
+      deleteBtn.addEventListener("click", (function(id, title) {
         return function(e) {
           e.stopPropagation();
-          if (ws && connected) {
-            ws.send(JSON.stringify({ type: "delete_session", id: id }));
-          }
+          showConfirm('Delete "' + (title || "New Session") + '"? This session and its history will be permanently removed.', function () {
+            if (ws && connected) {
+              ws.send(JSON.stringify({ type: "delete_session", id: id }));
+            }
+          });
         };
-      })(s.id));
+      })(s.id, s.title));
       el.appendChild(deleteBtn);
 
       el.addEventListener("click", (function (id) {
@@ -198,6 +228,25 @@
 
   sidebarOverlay.addEventListener("click", closeSidebar);
 
+  // --- Desktop sidebar collapse/expand ---
+  function toggleSidebarCollapse() {
+    var layout = $("layout");
+    var collapsed = layout.classList.toggle("sidebar-collapsed");
+    try { localStorage.setItem("sidebar-collapsed", collapsed ? "1" : ""); } catch (e) {}
+  }
+
+  sidebarToggleBtn.addEventListener("click", toggleSidebarCollapse);
+  sidebarExpandBtn.addEventListener("click", toggleSidebarCollapse);
+
+  // Restore collapsed state from localStorage
+  (function () {
+    try {
+      if (localStorage.getItem("sidebar-collapsed") === "1") {
+        $("layout").classList.add("sidebar-collapsed");
+      }
+    } catch (e) {}
+  })();
+
   newSessionBtn.addEventListener("click", function () {
     if (ws && connected) {
       ws.send(JSON.stringify({ type: "new_session" }));
@@ -713,14 +762,14 @@
 
     var allowBtn = document.createElement("button");
     allowBtn.className = "permission-btn permission-allow";
-    allowBtn.textContent = "Allow";
+    allowBtn.textContent = "Allow Once";
     allowBtn.addEventListener("click", function () {
       sendPermissionResponse(container, requestId, "allow");
     });
 
     var allowAlwaysBtn = document.createElement("button");
     allowAlwaysBtn.className = "permission-btn permission-allow-session";
-    allowAlwaysBtn.textContent = "Allow for Session";
+    allowAlwaysBtn.textContent = "Always Allow";
     allowAlwaysBtn.addEventListener("click", function () {
       sendPermissionResponse(container, requestId, "allow_always");
     });
@@ -1115,6 +1164,7 @@
     el.dataset.toolId = id;
     el.innerHTML =
       '<div class="tool-header">' +
+      '<span class="tool-chevron">' + iconHtml("chevron-right") + '</span>' +
       '<span class="tool-bullet"></span>' +
       '<span class="tool-name"></span>' +
       '<span class="tool-desc"></span>' +
@@ -1186,6 +1236,63 @@
     return pre;
   }
 
+  function getLanguageFromPath(filePath) {
+    if (!filePath) return null;
+    var parts = filePath.split("/");
+    var filename = parts[parts.length - 1].toLowerCase();
+    var dotIdx = filename.lastIndexOf(".");
+    if (dotIdx === -1 || dotIdx === filename.length - 1) return null;
+    var ext = filename.substring(dotIdx + 1);
+    var map = {
+      js: "javascript", jsx: "javascript", mjs: "javascript", cjs: "javascript",
+      ts: "typescript", tsx: "typescript", mts: "typescript",
+      py: "python", rb: "ruby", rs: "rust", go: "go",
+      java: "java", kt: "kotlin", kts: "kotlin",
+      cs: "csharp", cpp: "cpp", cc: "cpp", c: "c", h: "c", hpp: "cpp",
+      css: "css", scss: "scss", less: "less",
+      html: "xml", htm: "xml", xml: "xml", svg: "xml",
+      json: "json", yaml: "yaml", yml: "yaml",
+      md: "markdown", sh: "bash", bash: "bash", zsh: "bash",
+      sql: "sql", swift: "swift", php: "php",
+      toml: "ini", ini: "ini", conf: "ini",
+      lua: "lua", r: "r", pl: "perl",
+      ex: "elixir", exs: "elixir",
+      erl: "erlang", hs: "haskell",
+      graphql: "graphql", gql: "graphql",
+    };
+    return map[ext] || null;
+  }
+
+  function parseLineNumberedContent(text) {
+    var lines = text.split("\n");
+    if (lines.length > 0 && lines[lines.length - 1] === "") {
+      lines.pop();
+    }
+    if (lines.length === 0) return null;
+
+    var pattern = /^\s*(\d+)[→\t](.*)$/;
+    var checkCount = Math.min(lines.length, 5);
+    var matchCount = 0;
+    for (var i = 0; i < checkCount; i++) {
+      if (pattern.test(lines[i])) matchCount++;
+    }
+    if (matchCount < Math.ceil(checkCount * 0.6)) return null;
+
+    var numbers = [];
+    var code = [];
+    for (var i = 0; i < lines.length; i++) {
+      var m = lines[i].match(pattern);
+      if (m) {
+        numbers.push(m[1]);
+        code.push(m[2]);
+      } else {
+        numbers.push("");
+        code.push(lines[i]);
+      }
+    }
+    return { numbers: numbers, code: code };
+  }
+
   function updateToolResult(id, content, isError) {
     var tool = tools[id];
     if (!tool) return;
@@ -1196,12 +1303,64 @@
     }
 
     var resultBlock = document.createElement("div");
-    resultBlock.className = "tool-result-block";
     var displayContent = content || "(no output)";
+    displayContent = displayContent.replace(/<system-reminder>[\s\S]*?<\/system-reminder>/g, "").trim();
     if (displayContent.length > 10000) displayContent = displayContent.substring(0, 10000) + "\n... (truncated)";
 
+    var expandByDefault = !isError && tool.name === "Edit" && isDiffContent(displayContent);
+    if (expandByDefault) {
+      resultBlock.className = "tool-result-block";
+      tool.el.classList.add("expanded");
+    } else {
+      resultBlock.className = "tool-result-block collapsed";
+    }
+
     if (!isError && isDiffContent(displayContent)) {
       resultBlock.appendChild(renderDiffPre(displayContent));
+    } else if (!isError && tool.name === "Read" && tool.input && tool.input.file_path) {
+      var parsed = parseLineNumberedContent(displayContent);
+      if (parsed) {
+        var lang = getLanguageFromPath(tool.input.file_path);
+        var viewer = document.createElement("div");
+        viewer.className = "code-viewer";
+
+        var gutter = document.createElement("pre");
+        gutter.className = "code-gutter";
+        gutter.textContent = parsed.numbers.join("\n");
+
+        var codeBlock = document.createElement("pre");
+        codeBlock.className = "code-content";
+        var codeText = parsed.code.join("\n");
+
+        if (lang) {
+          try {
+            var highlighted = hljs.highlight(codeText, { language: lang });
+            var codeEl = document.createElement("code");
+            codeEl.className = "hljs language-" + lang;
+            codeEl.innerHTML = highlighted.value;
+            codeBlock.appendChild(codeEl);
+          } catch (e) {
+            codeBlock.textContent = codeText;
+          }
+        } else {
+          codeBlock.textContent = codeText;
+        }
+
+        viewer.appendChild(gutter);
+        viewer.appendChild(codeBlock);
+
+        // Sync vertical scroll between gutter and code
+        viewer.addEventListener("scroll", function () {
+          gutter.scrollTop = viewer.scrollTop;
+          codeBlock.scrollTop = viewer.scrollTop;
+        });
+
+        resultBlock.appendChild(viewer);
+      } else {
+        var pre = document.createElement("pre");
+        pre.textContent = displayContent;
+        resultBlock.appendChild(pre);
+      }
     } else {
       var pre = document.createElement("pre");
       if (isError) pre.className = "is-error";
@@ -1212,6 +1371,7 @@
 
     tool.el.querySelector(".tool-header").addEventListener("click", function () {
       resultBlock.classList.toggle("collapsed");
+      tool.el.classList.toggle("expanded");
     });
 
     markToolDone(id, isError);
@@ -1318,6 +1478,16 @@
           updatePageTitle();
           break;
 
+        case "update_available":
+          var updateBanner = $("update-banner");
+          var updateVersion = $("update-version");
+          if (updateBanner && updateVersion && msg.version) {
+            updateVersion.textContent = "v" + msg.version;
+            updateBanner.classList.remove("hidden");
+            refreshIcons();
+          }
+          break;
+
         case "slash_commands":
           slashCommands = (msg.commands || []).map(function (name) {
             return { name: name, desc: "Skill" };
@@ -1815,6 +1985,58 @@
     window.visualViewport.addEventListener("scroll", onViewportChange);
   }
 
+  // --- Update banner ---
+  (function () {
+    var banner = $("update-banner");
+    var closeBtn = $("update-banner-close");
+    var howBtn = $("update-how");
+    if (!banner) return;
+
+    // Build popover
+    var popover = document.createElement("div");
+    popover.id = "update-popover";
+    popover.innerHTML =
+      '<div class="popover-label">Run in your terminal:</div>' +
+      '<div class="popover-cmd">' +
+      '<code>npx claude-relay@latest</code>' +
+      '<button class="popover-copy" title="Copy">' + iconHtml("copy") + '</button>' +
+      '</div>';
+    banner.appendChild(popover);
+    refreshIcons();
+
+    var copyBtn = popover.querySelector(".popover-copy");
+    copyBtn.addEventListener("click", function () {
+      navigator.clipboard.writeText("npx claude-relay@latest").then(function () {
+        copyBtn.classList.add("copied");
+        copyBtn.innerHTML = iconHtml("check");
+        refreshIcons();
+        setTimeout(function () {
+          copyBtn.classList.remove("copied");
+          copyBtn.innerHTML = iconHtml("copy");
+          refreshIcons();
+        }, 1500);
+      });
+    });
+
+    howBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      popover.classList.toggle("visible");
+    });
+
+    document.addEventListener("click", function (e) {
+      if (!popover.contains(e.target) && e.target !== howBtn) {
+        popover.classList.remove("visible");
+      }
+    });
+
+    if (closeBtn) {
+      closeBtn.addEventListener("click", function () {
+        banner.classList.add("hidden");
+        popover.classList.remove("visible");
+      });
+    }
+  })();
+
   // --- HTTPS banner / auto-redirect ---
   (function () {
     if (location.protocol === "https:") return;

package/lib/public/index.html

@@ -19,8 +19,11 @@
 <div id="layout">
   <div id="sidebar">
     <div id="sidebar-header">
-      <span class="sidebar-title">Sessions</span>
-      <button id="new-session-btn" title="New session"><i data-lucide="plus"></i></button>
+      <div class="sidebar-header-top">
+        <button id="sidebar-toggle-btn" title="Close sidebar"><i data-lucide="panel-left-close"></i></button>
+        <span class="sidebar-title">Sessions</span>
+      </div>
+      <button id="new-session-btn" title="New session"><i data-lucide="plus"></i> New Session</button>
     </div>
     <div id="session-list"></div>
     <div id="sidebar-footer">
@@ -31,12 +34,18 @@
   </div>
   <div id="sidebar-overlay"></div>
   <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-banner-close" aria-label="Dismiss"><i data-lucide="x"></i></button>
+    </div>
     <div id="https-banner" class="hidden">
       <span class="https-banner-text"><i data-lucide="shield"></i> Your connection is not encrypted. <a id="https-banner-link" href="/setup">Set up HTTPS</a></span>
       <button id="https-banner-close" aria-label="Dismiss"><i data-lucide="x"></i></button>
     </div>
     <div id="header">
       <div id="header-left">
+        <button id="sidebar-expand-btn" title="Open sidebar"><i data-lucide="panel-left-open"></i></button>
         <button id="hamburger-btn" aria-label="Toggle sidebar"><i data-lucide="menu"></i></button>
         <span class="project-name" id="project-name">Connecting...</span>
       </div>
@@ -68,6 +77,17 @@
   </div>
 </div>
 
+<div id="confirm-modal" class="hidden">
+  <div class="confirm-backdrop"></div>
+  <div class="confirm-dialog">
+    <div class="confirm-text" id="confirm-text"></div>
+    <div class="confirm-actions">
+      <button class="confirm-btn confirm-cancel" id="confirm-cancel">Cancel</button>
+      <button class="confirm-btn confirm-delete" id="confirm-ok">Delete</button>
+    </div>
+  </div>
+</div>
+
 <script src="https://cdn.jsdelivr.net/npm/marked@14/marked.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/dompurify@3/dist/purify.min.js"></script>
 <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11/build/highlight.min.js"></script>

package/lib/public/style.css

@@ -82,13 +82,50 @@ html, body {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  transition: width 0.2s ease;
+}
+
+#layout.sidebar-collapsed #sidebar {
+  width: 0;
+  border: none;
 }
 
 #sidebar-header {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: calc(var(--safe-top) + 16px) 16px 12px;
+}
+
+.sidebar-header-top {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 16px 16px 12px;
+  gap: 10px;
+}
+
+#sidebar-toggle-btn {
+  width: 30px;
+  height: 30px;
+  border-radius: 8px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.15s, color 0.15s;
+  flex-shrink: 0;
+}
+
+#sidebar-toggle-btn .lucide {
+  width: 18px;
+  height: 18px;
+}
+
+#sidebar-toggle-btn:hover {
+  background: var(--sidebar-hover);
+  color: var(--text);
 }
 
 .sidebar-title {
@@ -100,27 +137,35 @@ html, body {
 }
 
 #new-session-btn {
-  width: 30px;
-  height: 30px;
+  width: 100%;
+  height: 36px;
   border-radius: 8px;
-  border: none;
+  border: 1px solid var(--border-subtle);
   background: transparent;
   color: var(--text-secondary);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background 0.15s, color 0.15s;
+  gap: 6px;
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+  white-space: nowrap;
+  overflow: hidden;
 }
 
 #new-session-btn .lucide {
-  width: 18px;
-  height: 18px;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
 }
 
 #new-session-btn:hover {
   background: var(--sidebar-hover);
   color: var(--text);
+  border-color: var(--border);
 }
 
 #session-list {
@@ -240,6 +285,34 @@ html, body {
 
 #sidebar-overlay.visible { display: block; }
 
+/* --- Sidebar expand (desktop collapsed) --- */
+#sidebar-expand-btn {
+  display: none;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  padding: 4px;
+  margin-right: 10px;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s;
+}
+
+#sidebar-expand-btn .lucide {
+  width: 20px;
+  height: 20px;
+}
+
+#sidebar-expand-btn:hover {
+  color: var(--text);
+}
+
+#layout.sidebar-collapsed #sidebar-expand-btn {
+  display: flex;
+}
+
 /* --- Hamburger --- */
 #hamburger-btn {
   display: none;
@@ -315,6 +388,189 @@ html, body {
 #https-banner-close .lucide { width: 14px; height: 14px; }
 #https-banner-close:hover { color: var(--text-secondary); }
 
+/* --- Update banner --- */
+#update-banner {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background: rgba(87, 171, 90, 0.08);
+  border-bottom: 1px solid rgba(87, 171, 90, 0.15);
+  font-size: 12px;
+  color: var(--text-secondary);
+  position: relative;
+}
+
+#update-banner.hidden { display: none; }
+
+.update-banner-text {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.update-banner-text .lucide { width: 13px; height: 13px; color: var(--success); }
+.update-banner-text strong { color: var(--text); font-weight: 600; }
+
+#update-how {
+  background: rgba(87, 171, 90, 0.15);
+  border: 1px solid rgba(87, 171, 90, 0.25);
+  border-radius: 6px;
+  color: var(--success);
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 500;
+  padding: 3px 10px;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+
+#update-how:hover { background: rgba(87, 171, 90, 0.25); }
+
+#update-popover {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: 12px 16px;
+  z-index: 200;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
+  white-space: nowrap;
+}
+
+#update-popover.visible { display: block; }
+
+#update-popover .popover-label {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-bottom: 6px;
+}
+
+#update-popover .popover-cmd {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+#update-popover .popover-cmd code {
+  font-family: "SF Mono", Menlo, Monaco, monospace;
+  font-size: 13px;
+  color: var(--text);
+  background: rgba(255, 255, 255, 0.06);
+  padding: 6px 12px;
+  border-radius: 6px;
+  user-select: all;
+  -webkit-user-select: all;
+}
+
+#update-popover .popover-copy {
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text-muted);
+  cursor: pointer;
+  padding: 5px 7px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.15s, border-color 0.15s;
+}
+
+#update-popover .popover-copy .lucide { width: 14px; height: 14px; }
+#update-popover .popover-copy:hover { color: var(--text); border-color: var(--text-dimmer); }
+#update-popover .popover-copy.copied { color: var(--success); border-color: var(--success); }
+
+#update-banner-close {
+  background: none;
+  border: none;
+  color: var(--text-dimmer);
+  cursor: pointer;
+  padding: 2px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+#update-banner-close .lucide { width: 14px; height: 14px; }
+#update-banner-close:hover { color: var(--text-secondary); }
+
+/* --- Confirm modal --- */
+#confirm-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 300;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#confirm-modal.hidden { display: none; }
+
+.confirm-backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
+}
+
+.confirm-dialog {
+  position: relative;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 20px 24px;
+  max-width: 320px;
+  width: 90%;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+}
+
+.confirm-text {
+  font-size: 14px;
+  color: var(--text);
+  line-height: 1.5;
+  margin-bottom: 18px;
+}
+
+.confirm-actions {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+}
+
+.confirm-btn {
+  padding: 7px 16px;
+  border-radius: 8px;
+  border: none;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: background 0.15s, opacity 0.15s;
+}
+
+.confirm-cancel {
+  background: var(--input-bg);
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+}
+
+.confirm-cancel:hover { background: var(--sidebar-hover); }
+
+.confirm-delete {
+  background: var(--error);
+  color: #fff;
+}
+
+.confirm-delete:hover { opacity: 0.85; }
+
 /* --- Connect overlay --- */
 #connect-overlay {
   position: absolute;
@@ -754,6 +1010,22 @@ html, body {
   transition: background 0.15s;
 }
 
+.tool-chevron {
+  color: var(--text-dimmer);
+  transition: transform 0.2s;
+  display: inline-flex;
+  flex-shrink: 0;
+}
+
+.tool-chevron .lucide {
+  width: 14px;
+  height: 14px;
+}
+
+.tool-item.expanded .tool-chevron {
+  transform: rotate(90deg);
+}
+
 .tool-header:hover {
   background: rgba(255, 255, 255, 0.05);
 }
@@ -885,6 +1157,58 @@ html, body {
 .diff-content .diff-file-header { color: #8B949E; font-weight: 600; }
 .diff-content .diff-ctx { color: var(--text-muted); }
 
+/* --- Code viewer (Read tool) --- */
+.code-viewer {
+  display: flex;
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.code-viewer pre {
+  margin: 0;
+  max-height: none;
+  overflow-y: visible;
+  font-family: "SF Mono", Menlo, Monaco, monospace;
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre;
+  word-break: normal;
+}
+
+.code-gutter {
+  flex-shrink: 0;
+  padding: 12px 12px 12px 14px;
+  text-align: right;
+  color: var(--text-dimmer);
+  user-select: none;
+  -webkit-user-select: none;
+  border-right: 1px solid var(--border-subtle);
+  min-width: 48px;
+}
+
+.code-content {
+  flex: 1;
+  padding: 12px 14px;
+  overflow-x: auto;
+  min-width: 0;
+  color: var(--text-muted);
+}
+
+.code-content code {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background: none;
+  padding: 0;
+  border-radius: 0;
+}
+
+.code-content .hljs {
+  background: transparent;
+  padding: 0;
+}
+
 /* ==========================================================================
    Plan Mode
    ========================================================================== */
@@ -1587,18 +1911,31 @@ html, body {
     z-index: 100;
     transform: translateX(-100%);
     transition: transform 0.25s ease;
+    width: 260px;
   }
 
   #sidebar.open {
     transform: translateX(0);
   }
 
+  /* On mobile, sidebar-collapsed should not affect sidebar (hamburger controls it) */
+  #layout.sidebar-collapsed #sidebar {
+    width: 260px;
+    border-right: 1px solid var(--border-subtle);
+  }
+
   #hamburger-btn {
     display: flex;
     align-items: center;
     justify-content: center;
   }
 
+  #sidebar-toggle-btn,
+  #sidebar-expand-btn,
+  #layout.sidebar-collapsed #sidebar-expand-btn {
+    display: none;
+  }
+
   .msg-user .bubble {
     max-width: 90%;
   }

package/lib/server.js

@@ -3,6 +3,7 @@ const crypto = require("crypto");
 const fs = require("fs");
 const path = require("path");
 const { WebSocketServer } = require("ws");
+const { fetchLatestVersion, isNewer } = require("./updater");
 
 // SDK loaded dynamically (ESM module)
 var sdkModule = null;
@@ -234,6 +235,17 @@ function setupPageHtml(httpsUrl) {
 function createServer(cwd, tlsOptions, caPath, pin, mainPort) {
   var authToken = pin ? generateAuthToken(pin) : null;
   const project = path.basename(cwd);
+  const currentVersion = require("../package.json").version;
+  let latestVersion = null;
+
+  // Check for updates in background
+  fetchLatestVersion().then(function(v) {
+    if (v && isNewer(v, currentVersion)) {
+      latestVersion = v;
+      // Notify already-connected clients
+      send({ type: "update_available", version: v });
+    }
+  });
 
   // --- Multi-session state ---
   let nextLocalId = 1;
@@ -382,6 +394,7 @@ function createServer(cwd, tlsOptions, caPath, pin, mainPort) {
       sentToolResults: {},
       pendingPermissions: {},
       pendingAskUser: {},
+      allowedTools: {},
       isProcessing: false,
       title: "",
       createdAt: Date.now(),
@@ -627,6 +640,11 @@ function createServer(cwd, tlsOptions, caPath, pin, mainPort) {
       });
     }
 
+    // Auto-approve if tool was previously allowed for session
+    if (session.allowedTools && session.allowedTools[toolName]) {
+      return Promise.resolve({ behavior: "allow", updatedInput: input });
+    }
+
     // Regular tool permission request: send to client and wait
     return new Promise(function(resolve) {
       var requestId = crypto.randomUUID();
@@ -895,6 +913,9 @@ function createServer(cwd, tlsOptions, caPath, pin, mainPort) {
 
     // Send cached state to this client only
     sendTo(ws, { type: "info", cwd: cwd, project: project });
+    if (latestVersion) {
+      sendTo(ws, { type: "update_available", version: latestVersion });
+    }
     if (slashCommands) {
       sendTo(ws, { type: "slash_commands", commands: slashCommands });
     }
@@ -1005,6 +1026,10 @@ function createServer(cwd, tlsOptions, caPath, pin, mainPort) {
         delete session.pendingPermissions[requestId];
 
         if (decision === "allow" || decision === "allow_always") {
+          if (decision === "allow_always") {
+            if (!session.allowedTools) session.allowedTools = {};
+            session.allowedTools[pending.toolName] = true;
+          }
           pending.resolve({ behavior: "allow", updatedInput: pending.toolInput });
         } else {
           pending.resolve({ behavior: "deny", message: "User denied permission" });

package/lib/updater.js

@@ -93,4 +93,4 @@ async function checkAndUpdate(currentVersion, skipUpdate) {
   return false;
 }
 
-module.exports = { checkAndUpdate };
+module.exports = { checkAndUpdate, fetchLatestVersion, isNewer };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "claude-relay",
-  "version": "1.2.0",
+  "version": "1.2.4",
   "description": "Access Claude Code on your machine, from anywhere. One command, no config.",
   "bin": {
     "claude-relay": "./bin/cli.js"