claude-relay 2.3.0 → 2.4.0

package/lib/public/app.js

@@ -1,14 +1,15 @@
 import { showToast, copyToClipboard, escapeHtml } from './modules/utils.js';
 import { refreshIcons, iconHtml, randomThinkingVerb } from './modules/icons.js';
 import { renderMarkdown, highlightCodeBlocks, renderMermaidBlocks, closeMermaidModal } from './modules/markdown.js';
-import { initSidebar, renderSessionList, handleSearchResults, updatePageTitle, getActiveSearchQuery, buildSearchTimeline, removeSearchTimeline } from './modules/sidebar.js';
+import { initSidebar, renderSessionList, handleSearchResults, updatePageTitle, getActiveSearchQuery, buildSearchTimeline, removeSearchTimeline, populateCliSessionList } from './modules/sidebar.js';
 import { initRewind, setRewindMode, showRewindModal, clearPendingRewindUuid } from './modules/rewind.js';
 import { initNotifications, showDoneNotification, playDoneSound, isNotifAlertEnabled, isNotifSoundEnabled } from './modules/notifications.js';
 import { initInput, clearPendingImages, handleInputSync, autoResize, builtinCommands } from './modules/input.js';
 import { initQrCode } from './modules/qrcode.js';
 import { initFileBrowser, loadRootDirectory, refreshTree, handleFsList, handleFsRead, handleDirChanged, refreshIfOpen, handleFileChanged, handleFileHistory, handleGitDiff, handleFileAt, getPendingNavigate, closeFileViewer } from './modules/filebrowser.js';
 import { initTerminal, openTerminal, closeTerminal, resetTerminals, handleTermList, handleTermCreated, handleTermOutput, handleTermExited, handleTermClosed } from './modules/terminal.js';
-import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUserQuestion, markAskUserAnswered, renderPermissionRequest, markPermissionResolved, markPermissionCancelled, renderPlanBanner, renderPlanCard, handleTodoWrite, handleTaskCreate, handleTaskUpdate, startThinking, appendThinking, stopThinking, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, addTurnMeta, enableMainInput, getTools, getPlanContent, setPlanContent, isPlanFilePath, getTodoTools } from './modules/tools.js';
+import { initTheme, getThemeColor, getComputedVar, onThemeChange } from './modules/theme.js';
+import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUserQuestion, markAskUserAnswered, renderPermissionRequest, markPermissionResolved, markPermissionCancelled, renderPlanBanner, renderPlanCard, handleTodoWrite, handleTaskCreate, handleTaskUpdate, startThinking, appendThinking, stopThinking, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, addTurnMeta, enableMainInput, getTools, getPlanContent, setPlanContent, isPlanFilePath, getTodoTools, updateSubagentActivity, addSubagentToolEntry, markSubagentDone, closeToolGroup, removeToolFromGroup } from './modules/tools.js';
 
 // --- Base path for multi-project routing ---
   var slugMatch = location.pathname.match(/^\/p\/([a-z0-9_-]+)/);
@@ -21,7 +22,8 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
   var inputEl = $("input");
   var sendBtn = $("send-btn");
   var statusDot = $("status-dot");
-  var projectNameEl = $("project-name");
+  var headerTitleEl = $("header-title");
+  var headerRenameBtn = $("header-rename-btn");
   var slashMenu = $("slash-menu");
   var sidebar = $("sidebar");
   var sidebarOverlay = $("sidebar-overlay");
@@ -36,25 +38,21 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
   var connectVerbEl = $("connect-verb");
   var connectStatusEl = $("connect-status");
 
-  // --- Project Switcher ---
-  var projectSwitcher = $("project-switcher");
-  var projectSwitcherBtn = $("project-switcher-btn");
-  var projectDropdown = $("project-dropdown");
-  var projectDropdownList = $("project-dropdown-list");
-  var projectSwitcherName = $("project-switcher-name");
-  var projectSwitcherCount = $("project-switcher-count");
+  // --- Project List ---
+  var projectListSection = $("project-list-section");
+  var projectListEl = $("project-list");
+  var projectListAddBtn = $("project-list-add");
   var projectHint = $("project-hint");
   var projectHintDismiss = $("project-hint-dismiss");
   var cachedProjects = [];
   var cachedProjectCount = 0;
   var currentSlug = slugMatch ? slugMatch[1] : null;
 
-  function updateProjectSwitcher(msg) {
+  function updateProjectList(msg) {
     if (typeof msg.projectCount === "number") cachedProjectCount = msg.projectCount;
     if (msg.projects) cachedProjects = msg.projects;
     var count = cachedProjectCount || 0;
-    projectSwitcherName.textContent = projectName || "Project";
-    projectSwitcherCount.textContent = count ? count + (count === 1 ? " project" : " projects") : "";
+    renderProjectList();
     if (count === 1 && projectHint) {
       try {
         if (!localStorage.getItem("claude-relay-project-hint-dismissed")) {
@@ -66,14 +64,15 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     }
   }
 
-  function renderProjectDropdown() {
-    projectDropdownList.innerHTML = "";
+  function renderProjectList() {
+    if (!projectListEl) return;
+    projectListEl.innerHTML = "";
     for (var i = 0; i < cachedProjects.length; i++) {
       var p = cachedProjects[i];
       var isCurrent = p.slug === currentSlug;
       var displayName = p.title || p.project;
       var item = document.createElement("a");
-      item.className = "project-dropdown-item" + (isCurrent ? " current" : "");
+      item.className = "project-list-item" + (isCurrent ? " current" : "");
       item.href = "/p/" + p.slug + "/";
 
       var indicator = document.createElement("span");
@@ -85,60 +84,35 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       name.textContent = displayName;
       item.appendChild(name);
 
-      var count = document.createElement("span");
-      count.className = "pd-count";
-      count.textContent = p.sessions;
-      item.appendChild(count);
-
-      projectDropdownList.appendChild(item);
-    }
+      var removeBtn = document.createElement("button");
+      removeBtn.className = "pd-remove";
+      removeBtn.type = "button";
+      removeBtn.title = "Remove project";
+      removeBtn.innerHTML = '<i data-lucide="trash-2"></i>';
+      removeBtn.dataset.slug = p.slug;
+      removeBtn.dataset.name = displayName;
+      removeBtn.addEventListener("click", function (e) {
+        e.preventDefault();
+        e.stopPropagation();
+        var s = this.dataset.slug;
+        var n = this.dataset.name;
+        confirmRemoveProject(s, n);
+      });
+      item.appendChild(removeBtn);
 
-    // Add project button logic
-    var addBtn = document.getElementById("project-dropdown-add");
-    if (addBtn) {
-      addBtn.onclick = function () {
-        closeProjectDropdown();
-        var hint = document.getElementById("project-hint");
-        if (hint) {
-          hint.classList.remove("hidden");
-          try { localStorage.removeItem("claude-relay-project-hint-dismissed"); } catch (e) {}
-        }
-      };
+      projectListEl.appendChild(item);
     }
     refreshIcons();
   }
 
-  function toggleProjectDropdown() {
-    if (projectDropdown.classList.contains("hidden")) {
-      renderProjectDropdown();
-      projectDropdown.classList.remove("hidden");
-      projectSwitcher.classList.add("open");
-    } else {
-      closeProjectDropdown();
-    }
-  }
-
-  function closeProjectDropdown() {
-    projectDropdown.classList.add("hidden");
-    projectSwitcher.classList.remove("open");
-  }
-
-  if (projectSwitcherBtn) {
-    projectSwitcherBtn.addEventListener("click", function (e) {
-      e.stopPropagation();
-      toggleProjectDropdown();
+  if (projectListAddBtn) {
+    projectListAddBtn.addEventListener("click", function () {
+      openAddProjectModal();
     });
   }
 
-  document.addEventListener("click", function (e) {
-    if (projectSwitcher && !projectSwitcher.contains(e.target)) {
-      closeProjectDropdown();
-    }
-  });
-
   document.addEventListener("keydown", function (e) {
     if (e.key === "Escape") {
-      closeProjectDropdown();
       closeImageModal();
     }
   });
@@ -185,6 +159,8 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
   // isComposing -> modules/input.js
   var reconnectTimer = null;
   var reconnectDelay = 1000;
+  var disconnectNotifTimer = null;
+  var disconnectNotifShown = false;
   var activityEl = null;
   var currentMsgEl = null;
   var currentFullText = "";
@@ -215,6 +191,45 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
 
   // builtinCommands -> modules/input.js
 
+  // --- Header session rename ---
+  if (headerRenameBtn) {
+    headerRenameBtn.addEventListener("click", function () {
+      if (!activeSessionId) return;
+      var currentText = headerTitleEl.textContent;
+      var input = document.createElement("input");
+      input.type = "text";
+      input.className = "header-rename-input";
+      input.value = currentText;
+      headerTitleEl.style.display = "none";
+      headerRenameBtn.style.display = "none";
+      headerTitleEl.parentNode.insertBefore(input, headerTitleEl.nextSibling);
+      input.focus();
+      input.select();
+
+      function commit() {
+        var newTitle = input.value.trim();
+        if (newTitle && newTitle !== currentText && ws && ws.readyState === 1) {
+          ws.send(JSON.stringify({ type: "rename_session", id: activeSessionId, title: newTitle }));
+          headerTitleEl.textContent = newTitle;
+        }
+        input.remove();
+        headerTitleEl.style.display = "";
+        headerRenameBtn.style.display = "";
+      }
+
+      input.addEventListener("keydown", function (e) {
+        if (e.key === "Enter") { e.preventDefault(); commit(); }
+        if (e.key === "Escape") {
+          e.preventDefault();
+          input.remove();
+          headerTitleEl.style.display = "";
+          headerRenameBtn.style.display = "";
+        }
+      });
+      input.addEventListener("blur", commit);
+    });
+  }
+
   // --- Confirm modal ---
   var confirmModal = $("confirm-modal");
   var confirmText = $("confirm-text");
@@ -265,6 +280,9 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     addSystemMessage: addSystemMessage,
   });
 
+  // --- Theme (module) ---
+  initTheme();
+
   // --- Sidebar (module) ---
   initSidebar({
     $: $,
@@ -280,6 +298,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     hamburgerBtn: hamburgerBtn,
     newSessionBtn: newSessionBtn,
     resumeSessionBtn: resumeSessionBtn,
+    headerTitleEl: headerTitleEl,
     showConfirm: showConfirm,
     onFilesTabOpen: function () { loadRootDirectory(); },
   });
@@ -337,9 +356,9 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     ];
 
     var CELL = 12;
-    var accent = "#DA7756";
-    var eye = "#2F2E2B";
-    var antenna = "#E8E5DE";
+    var accent = getThemeColor("base09");
+    var eye = getThemeColor("base00");
+    var antenna = getThemeColor("base06");
 
     for (var r = 0; r < grid.length; r++) {
       for (var c = 0; c < grid[r].length; c++) {
@@ -357,6 +376,23 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     }
   })();
 
+  // Update pixel mascot colors when theme changes
+  onThemeChange(function () {
+    var newAccent = getThemeColor("base09");
+    var newEye = getThemeColor("base00");
+    var newAntenna = getThemeColor("base06");
+    for (var i = 0; i < pixelBlocks.length; i++) {
+      var el = pixelBlocks[i];
+      var bg = el.style.background;
+      if (bg === accent || bg === newAccent) el.style.background = newAccent;
+      else if (bg === eye || bg === newEye) el.style.background = newEye;
+      else if (bg === antenna || bg === newAntenna) el.style.background = newAntenna;
+    }
+    accent = newAccent;
+    eye = newEye;
+    antenna = newAntenna;
+  });
+
   function pixelScatter() {
     stopSpark();
     for (var i = 0; i < pixelBlocks.length; i++) {
@@ -396,7 +432,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           antennaBlocks[i].style.background = "#FFF";
           antennaBlocks[i].style.boxShadow = "0 0 6px 2px rgba(255,255,255,0.6)";
         } else {
-          antennaBlocks[i].style.background = "#E8E5DE";
+          antennaBlocks[i].style.background = antenna;
           antennaBlocks[i].style.boxShadow = "none";
         }
       }
@@ -411,7 +447,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       sparkTimer = null;
     }
     for (var i = 0; i < antennaBlocks.length; i++) {
-      antennaBlocks[i].style.background = "#E8E5DE";
+      antennaBlocks[i].style.background = antenna;
       antennaBlocks[i].style.boxShadow = "none";
     }
   }
@@ -456,7 +492,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       if (xhr.status === 200) faviconSvg = xhr.responseText;
       else return;
     }
-    var svg = faviconSvg.replace(/fill="#57AB5A"/, 'fill="' + bgColor + '"');
+    var svg = faviconSvg.replace(/fill="#57AB5A"/g, 'fill="' + bgColor + '"');
     faviconLink.href = "data:image/svg+xml," + encodeURIComponent(svg);
   }
 
@@ -482,9 +518,9 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     ioTimer = setTimeout(function () { statusDot.classList.remove("io"); }, 60);
 
     // Blink favicon: dim then restore
-    updateFavicon("#3D6B3E");
+    updateFavicon(getComputedVar("--sidebar-bg"));
     clearTimeout(faviconIoTimer);
-    faviconIoTimer = setTimeout(function () { updateFavicon("#57AB5A"); }, 60);
+    faviconIoTimer = setTimeout(function () { updateFavicon(getComputedVar("--success")); }, 60);
   }
 
   // --- Urgent favicon blink (permission / ask user) ---
@@ -493,7 +529,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
   function startUrgentBlink() {
     if (urgentBlinkTimer) return;
     savedTitle = document.title;
-    var colors = ["#DA7756", "#57AB5A", "#DA7756", "#E8E5DE", "#DA7756", "#57AB5A"];
+    var colors = [getComputedVar("--accent"), getComputedVar("--success"), getComputedVar("--accent"), getComputedVar("--text"), getComputedVar("--accent"), getComputedVar("--success")];
     var tick = 0;
     urgentBlinkTimer = setInterval(function () {
       updateFavicon(colors[tick % colors.length]);
@@ -505,7 +541,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     if (!urgentBlinkTimer) return;
     clearInterval(urgentBlinkTimer);
     urgentBlinkTimer = null;
-    updateFavicon("#57AB5A");
+    updateFavicon(getComputedVar("--success"));
     if (savedTitle) document.title = savedTitle;
     savedTitle = null;
   }
@@ -520,12 +556,12 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       setSendBtnMode("send");
       connectOverlay.classList.add("hidden");
       stopVerbCycle();
-      updateFavicon("#57AB5A");
+      updateFavicon(getComputedVar("--success"));
     } else if (status === "processing") {
       statusDot.classList.add("processing");
       processing = true;
       setSendBtnMode("stop");
-      updateFavicon("#57AB5A");
+      updateFavicon(getComputedVar("--success"));
     } else {
       connected = false;
       sendBtn.disabled = true;
@@ -533,7 +569,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       connectStatusEl.textContent = "Reconnecting...";
       startVerbCycle();
       startPixelAnim();
-      updateFavicon("#E5534B");
+      updateFavicon(getComputedVar("--error"));
     }
   }
 
@@ -974,6 +1010,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     div.dataset.turn = ++turnCounter;
     var bubble = document.createElement("div");
     bubble.className = "bubble";
+    bubble.dir = "auto";
 
     if (images && images.length > 0) {
       var imgRow = document.createElement("div");
@@ -1024,7 +1061,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       currentMsgEl = document.createElement("div");
       currentMsgEl.className = "msg-assistant";
       currentMsgEl.dataset.turn = turnCounter;
-      currentMsgEl.innerHTML = '<div class="md-content"></div>';
+      currentMsgEl.innerHTML = '<div class="md-content" dir="auto"></div>';
       addToMessages(currentMsgEl);
       currentFullText = "";
     }
@@ -1101,6 +1138,8 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       if (currentFullText) {
         addCopyHandler(currentMsgEl, currentFullText);
       }
+      // Assistant text appeared, so break the current tool group
+      closeToolGroup();
     }
     currentMsgEl = null;
     currentFullText = "";
@@ -1164,8 +1203,13 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
 
     ws.onopen = function () {
       if (connectTimeoutId) { clearTimeout(connectTimeoutId); connectTimeoutId = null; }
-      // Local notification on reconnect (only if not focused)
-      if (wasConnected && !document.hasFocus() && "serviceWorker" in navigator) {
+      // Cancel pending "connection lost" notification if reconnected quickly
+      if (disconnectNotifTimer) {
+        clearTimeout(disconnectNotifTimer);
+        disconnectNotifTimer = null;
+      }
+      // Only show "restored" notification if "lost" was actually shown
+      if (wasConnected && disconnectNotifShown && !document.hasFocus() && "serviceWorker" in navigator) {
         navigator.serviceWorker.ready.then(function (reg) {
           reg.showNotification("Claude Relay", {
             body: "Server connection restored",
@@ -1173,6 +1217,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           });
         }).catch(function () {});
       }
+      disconnectNotifShown = false;
       wasConnected = true;
       setStatus("connected");
       reconnectDelay = 1000;
@@ -1198,14 +1243,20 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
       setStatus("disconnected");
       processing = false;
       setActivity(null);
-      // Local notification when connection drops (only if not focused)
-      if (!document.hasFocus() && "serviceWorker" in navigator) {
-        navigator.serviceWorker.ready.then(function (reg) {
-          reg.showNotification("Claude Relay", {
-            body: "Server connection lost",
-            tag: "claude-disconnect",
-          });
-        }).catch(function () {});
+      // Delay "connection lost" notification by 5s to suppress brief disconnects
+      if (!disconnectNotifTimer) {
+        disconnectNotifTimer = setTimeout(function () {
+          disconnectNotifTimer = null;
+          disconnectNotifShown = true;
+          if (!document.hasFocus() && "serviceWorker" in navigator) {
+            navigator.serviceWorker.ready.then(function (reg) {
+              reg.showNotification("Claude Relay", {
+                body: "Server connection lost",
+                tag: "claude-disconnect",
+              });
+            }).catch(function () {});
+          }
+        }, 5000);
       }
       scheduleReconnect();
     };
@@ -1242,6 +1293,16 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           break;
 
         case "history_done":
+          // Render + finalize any incomplete turn from the replayed history
+          if (currentMsgEl && currentFullText) {
+            var replayContentEl = currentMsgEl.querySelector(".md-content");
+            if (replayContentEl) {
+              replayContentEl.innerHTML = renderMarkdown(currentFullText);
+            }
+          }
+          markAllToolsDone();
+          finalizeAssistantBlock();
+          scrollToBottom();
           var pendingQuery = getActiveSearchQuery();
           if (pendingQuery) {
             requestAnimationFrame(function() { buildSearchTimeline(pendingQuery); });
@@ -1256,6 +1317,9 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
                 target = messagesEl.querySelector('[data-uuid="' + nav.assistantUuid + '"]');
               }
               if (target) {
+                // Auto-expand parent tool group if collapsed
+                var parentGroup = target.closest(".tool-group");
+                if (parentGroup) parentGroup.classList.remove("collapsed");
                 target.scrollIntoView({ behavior: "smooth", block: "center" });
                 target.classList.add("message-blink");
                 setTimeout(function() { target.classList.remove("message-blink"); }, 2000);
@@ -1267,7 +1331,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
         case "info":
           projectName = msg.project || msg.cwd;
           if (msg.slug) currentSlug = msg.slug;
-          projectNameEl.textContent = projectName;
+          headerTitleEl.textContent = projectName;
           updatePageTitle();
           if (msg.version) {
             var vEl = $("footer-version");
@@ -1282,7 +1346,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
             var spBanner = $("skip-perms-banner");
             if (spBanner) spBanner.classList.remove("hidden");
           }
-          updateProjectSwitcher(msg);
+          updateProjectList(msg);
           break;
 
         case "update_available":
@@ -1351,6 +1415,10 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           handleSearchResults(msg);
           break;
 
+        case "cli_session_list":
+          populateCliSessionList(msg.sessions || []);
+          break;
+
         case "session_switched":
           // Save draft from outgoing session
           if (activeSessionId && inputEl.value) {
@@ -1453,6 +1521,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
             if (askTool) {
               if (askTool.el) askTool.el.style.display = "none";
               askTool.done = true;
+              removeToolFromGroup(msg.id);
             }
             renderAskUserQuestion(msg.id, msg.input);
             startUrgentBlink();
@@ -1528,10 +1597,23 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           scrollToBottom();
           break;
 
+        case "subagent_activity":
+          updateSubagentActivity(msg.parentToolId, msg.text);
+          break;
+
+        case "subagent_tool":
+          addSubagentToolEntry(msg.parentToolId, msg.toolName, msg.toolId, msg.text);
+          break;
+
+        case "subagent_done":
+          markSubagentDone(msg.parentToolId);
+          break;
+
         case "result":
           setActivity(null);
           stopThinking();
           markAllToolsDone();
+          closeToolGroup();
           finalizeAssistantBlock();
           addTurnMeta(msg.cost, msg.duration);
           accumulateUsage(msg.cost, msg.usage);
@@ -1542,6 +1624,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
           setActivity(null);
           stopThinking();
           markAllToolsDone();
+          closeToolGroup();
           finalizeAssistantBlock();
           processing = false;
           setStatus("connected");
@@ -1564,7 +1647,7 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
         case "error":
           setActivity(null);
           addSystemMessage(msg.text, true);
-          updateFavicon("#E5534B");
+          updateFavicon(getComputedVar("--error"));
           break;
 
         case "rewind_preview_result":
@@ -1635,6 +1718,22 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
         case "process_stats":
           updateStatusPanel(msg);
           break;
+
+        case "browse_dir_result":
+          handleBrowseDirResult(msg);
+          break;
+
+        case "add_project_result":
+          handleAddProjectResult(msg);
+          break;
+
+        case "remove_project_result":
+          handleRemoveProjectResult(msg);
+          break;
+
+        case "projects_updated":
+          updateProjectList(msg);
+          break;
       }
   }
 
@@ -1807,6 +1906,231 @@ import { initTools, resetToolState, saveToolState, restoreToolState, renderAskUs
     fileViewerEl: $("file-viewer"),
   });
 
+  // --- Remove project ---
+  function confirmRemoveProject(slug, name) {
+    showConfirm("Remove project \"" + name + "\"?", function () {
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({ type: "remove_project", slug: slug }));
+      }
+    });
+  }
+
+  function handleRemoveProjectResult(msg) {
+    if (msg.ok) {
+      showToast("Project removed", "success");
+      // If we removed the current project, navigate to first available
+      if (msg.slug === currentSlug) {
+        window.location.href = "/";
+      }
+    } else {
+      showToast(msg.error || "Failed to remove project", "error");
+    }
+  }
+
+  // --- Add project modal ---
+  var addProjectModal = document.getElementById("add-project-modal");
+  var addProjectInput = document.getElementById("add-project-input");
+  var addProjectSuggestions = document.getElementById("add-project-suggestions");
+  var addProjectError = document.getElementById("add-project-error");
+  var addProjectOk = document.getElementById("add-project-ok");
+  var addProjectCancel = document.getElementById("add-project-cancel");
+  var addProjectDebounce = null;
+  var addProjectActiveIdx = -1;
+
+  function openAddProjectModal() {
+    addProjectModal.classList.remove("hidden");
+    addProjectInput.value = "/";
+    addProjectError.classList.add("hidden");
+    addProjectError.textContent = "";
+    addProjectSuggestions.classList.add("hidden");
+    addProjectSuggestions.innerHTML = "";
+    addProjectActiveIdx = -1;
+    addProjectOk.disabled = false;
+    setTimeout(function () {
+      addProjectInput.focus();
+      addProjectInput.setSelectionRange(1, 1);
+    }, 50);
+  }
+
+  function closeAddProjectModal() {
+    addProjectModal.classList.add("hidden");
+    addProjectInput.value = "";
+    addProjectSuggestions.classList.add("hidden");
+    addProjectSuggestions.innerHTML = "";
+    addProjectError.classList.add("hidden");
+    addProjectActiveIdx = -1;
+    if (addProjectDebounce) { clearTimeout(addProjectDebounce); addProjectDebounce = null; }
+  }
+
+  function requestBrowseDir(val) {
+    if (!ws || ws.readyState !== 1) return;
+    ws.send(JSON.stringify({ type: "browse_dir", path: val }));
+  }
+
+  function handleBrowseDirResult(msg) {
+    addProjectSuggestions.innerHTML = "";
+    addProjectActiveIdx = -1;
+    if (msg.error) {
+      addProjectSuggestions.classList.add("hidden");
+      return;
+    }
+    var entries = msg.entries || [];
+    if (entries.length === 0) {
+      addProjectSuggestions.classList.add("hidden");
+      return;
+    }
+    for (var si = 0; si < entries.length; si++) {
+      var entry = entries[si];
+      var item = document.createElement("div");
+      item.className = "add-project-suggestion-item";
+      item.dataset.path = entry.path;
+      item.innerHTML = '<i data-lucide="folder"></i><span class="add-project-suggestion-name">' +
+        escapeHtml(entry.name) + '</span>';
+      item.addEventListener("click", function (e) {
+        var p = this.dataset.path + "/";
+        addProjectInput.value = p;
+        addProjectInput.focus();
+        addProjectError.classList.add("hidden");
+        requestBrowseDir(p);
+      });
+      addProjectSuggestions.appendChild(item);
+    }
+    addProjectSuggestions.classList.remove("hidden");
+    refreshIcons();
+  }
+
+  function handleAddProjectResult(msg) {
+    if (msg.ok) {
+      closeAddProjectModal();
+      if (msg.existing) {
+        showToast("Project already registered", "info");
+      } else {
+        showToast("Project added", "success");
+        // Navigate to the new project
+        if (msg.slug) {
+          window.location.href = "/p/" + msg.slug + "/";
+        }
+      }
+    } else {
+      addProjectError.textContent = msg.error || "Failed to add project";
+      addProjectError.classList.remove("hidden");
+      addProjectOk.disabled = false;
+    }
+  }
+
+  function setActiveIdx(idx) {
+    var items = addProjectSuggestions.querySelectorAll(".add-project-suggestion-item");
+    addProjectActiveIdx = idx;
+    for (var ai = 0; ai < items.length; ai++) {
+      if (ai === idx) {
+        items[ai].classList.add("active");
+        items[ai].scrollIntoView({ block: "nearest" });
+      } else {
+        items[ai].classList.remove("active");
+      }
+    }
+  }
+
+  addProjectInput.addEventListener("focus", function () {
+    var val = addProjectInput.value;
+    if (val && addProjectSuggestions.children.length === 0) {
+      requestBrowseDir(val);
+    } else if (addProjectSuggestions.children.length > 0) {
+      addProjectSuggestions.classList.remove("hidden");
+    }
+  });
+
+  addProjectModal.querySelector(".confirm-dialog").addEventListener("click", function (e) {
+    if (e.target === addProjectInput || addProjectInput.contains(e.target)) return;
+    if (e.target === addProjectSuggestions || addProjectSuggestions.contains(e.target)) return;
+    addProjectSuggestions.classList.add("hidden");
+    addProjectActiveIdx = -1;
+  });
+
+  addProjectInput.addEventListener("input", function () {
+    var val = addProjectInput.value;
+    addProjectError.classList.add("hidden");
+    if (addProjectDebounce) clearTimeout(addProjectDebounce);
+    addProjectDebounce = setTimeout(function () {
+      requestBrowseDir(val);
+    }, 200);
+  });
+
+  addProjectInput.addEventListener("keydown", function (e) {
+    var items = addProjectSuggestions.querySelectorAll(".add-project-suggestion-item");
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (items.length > 0) {
+        var next = addProjectActiveIdx < items.length - 1 ? addProjectActiveIdx + 1 : 0;
+        setActiveIdx(next);
+      }
+      return;
+    }
+
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (items.length > 0) {
+        var prev = addProjectActiveIdx > 0 ? addProjectActiveIdx - 1 : items.length - 1;
+        setActiveIdx(prev);
+      }
+      return;
+    }
+
+    if (e.key === "Tab") {
+      e.preventDefault();
+      var target = addProjectActiveIdx >= 0 && addProjectActiveIdx < items.length
+        ? items[addProjectActiveIdx]
+        : items.length > 0 ? items[0] : null;
+      if (target) {
+        var p = target.dataset.path + "/";
+        addProjectInput.value = p;
+        addProjectError.classList.add("hidden");
+        requestBrowseDir(p);
+      }
+      return;
+    }
+
+    if (e.key === "Enter") {
+      e.preventDefault();
+      // If a suggestion is highlighted, pick it first
+      if (addProjectActiveIdx >= 0 && addProjectActiveIdx < items.length) {
+        var picked = items[addProjectActiveIdx].dataset.path + "/";
+        addProjectInput.value = picked;
+        addProjectError.classList.add("hidden");
+        requestBrowseDir(picked);
+        return;
+      }
+      // Otherwise submit
+      submitAddProject();
+      return;
+    }
+
+    if (e.key === "Escape") {
+      e.preventDefault();
+      closeAddProjectModal();
+      return;
+    }
+  });
+
+  function submitAddProject() {
+    var val = addProjectInput.value.replace(/\/+$/, "");
+    if (!val) return;
+    addProjectOk.disabled = true;
+    addProjectError.classList.add("hidden");
+    if (ws && ws.readyState === 1) {
+      ws.send(JSON.stringify({ type: "add_project", path: val }));
+    }
+  }
+
+  addProjectOk.addEventListener("click", function () { submitAddProject(); });
+  addProjectCancel.addEventListener("click", function () { closeAddProjectModal(); });
+
+  // Close on backdrop click
+  addProjectModal.querySelector(".confirm-backdrop").addEventListener("click", function () {
+    closeAddProjectModal();
+  });
+
   // --- Init ---
   lucide.createIcons();
   startVerbCycle();