@firstpick/pi-package-webui 0.1.3 → 0.1.5

package/public/app.js

@@ -5,6 +5,7 @@ const elements = {
   tabBar: $("#tabBar"),
   terminalTabsToggleButton: $("#terminalTabsToggleButton"),
   newTabButton: $("#newTabButton"),
+  closeAllTabsButton: $("#closeAllTabsButton"),
   statusBar: $("#statusBar"),
   widgetArea: $("#widgetArea"),
   stickyUserPromptButton: $("#stickyUserPromptButton"),
@@ -27,6 +28,10 @@ const elements = {
   newSessionButton: $("#newSessionButton"),
   compactButton: $("#compactButton"),
   gitWorkflowButton: $("#gitWorkflowButton"),
+  publishButton: $("#publishButton"),
+  publishMenu: $("#publishMenu"),
+  releaseNpmButton: $("#releaseNpmButton"),
+  releaseAurButton: $("#releaseAurButton"),
   gitWorkflowPanel: $("#gitWorkflowPanel"),
   gitWorkflowTitle: $("#gitWorkflowTitle"),
   gitWorkflowHint: $("#gitWorkflowHint"),
@@ -41,6 +46,9 @@ const elements = {
   themeSelect: $("#themeSelect"),
   networkStatus: $("#networkStatus"),
   openNetworkButton: $("#openNetworkButton"),
+  agentDoneNotificationsToggle: $("#agentDoneNotificationsToggle"),
+  agentDoneNotificationsStatus: $("#agentDoneNotificationsStatus"),
+  optionalFeaturesBox: $("#optionalFeaturesBox"),
   toggleSidePanelButton: $("#toggleSidePanelButton"),
   sidePanelExpandButton: $("#sidePanelExpandButton"),
   sidePanelBackdrop: $("#sidePanelBackdrop"),
@@ -75,6 +83,10 @@ let tabSeenCompletionSerials = new Map();
 let streamBubble = null;
 let streamText = null;
 let streamRawText = "";
+let streamBubbleVisibleSince = 0;
+let streamBubbleHideTimer = null;
+let streamTextRenderTimer = null;
+let streamToolCallSeen = false;
 let streamThinkingBubble = null;
 let streamThinking = null;
 let runIndicatorBubble = null;
@@ -103,6 +115,8 @@ let commandSuggestions = [];
 let pathSuggestions = [];
 let suggestionMode = "none";
 let commandSuggestIndex = 0;
+let lastPointerPosition = null;
+let pathSuggestActiveQuery = null;
 let pathSuggestRequestSerial = 0;
 let pathSuggestAbortController = null;
 let latestStats = null;
@@ -110,12 +124,18 @@ let latestWorkspace = null;
 let latestNetwork = null;
 let latestMessages = [];
 let transientMessages = [];
+let actionEntrySeenKeysByTab = new Map();
+let actionEntryAnimationPrimedTabs = new Set();
 let lastUserPromptByTab = new Map();
 let actionFeedbackByTab = new Map();
 let actionFeedbackSendBusy = false;
 let blockedTabNotificationKeys = new Set();
 let blockedTabNotificationPermissionRequested = false;
 let blockedTabNotificationFallbackNoted = false;
+let agentDoneNotificationsEnabled = false;
+let agentDoneNotificationPermissionRequested = false;
+let agentDoneNotificationFallbackNoted = false;
+let agentDoneNotificationKeys = new Set();
 let availableModels = [];
 let availableThemes = [];
 let currentThemeName = "catppuccin-mocha";
@@ -129,6 +149,7 @@ let lastChatProgrammaticScrollAt = 0;
 let chatUserScrollIntentUntil = 0;
 let mobileFooterExpanded = false;
 let footerModelPickerOpen = false;
+let publishMenuOpen = false;
 let maxVisualViewportHeight = 0;
 let currentRunStartedAt = null;
 let currentRunStreamChars = 0;
@@ -137,7 +158,9 @@ const dialogQueue = [];
 const SIDE_PANEL_STORAGE_KEY = "pi-webui-side-panel-collapsed";
 const TAB_STORAGE_KEY = "pi-webui-active-tab";
 const PATH_FAST_PICKS_STORAGE_KEY = "pi-webui-path-fast-picks";
+const AGENT_DONE_NOTIFICATIONS_STORAGE_KEY = "pi-webui-agent-done-notifications";
 const THEME_STORAGE_KEY = "pi-webui-theme";
+const OPTIONAL_FEATURES_STORAGE_KEY = "pi-webui-optional-features-disabled";
 const LAST_USER_PROMPT_STORAGE_KEY = "pi-webui-last-user-prompts";
 const DEFAULT_THEME_NAME = "catppuccin-mocha";
 const MOBILE_VIEW_QUERY = "(max-width: 720px), (max-device-width: 720px), (pointer: coarse) and (hover: none)";
@@ -150,6 +173,9 @@ const CHAT_USER_SCROLL_INTENT_MS = 700;
 const RUN_INDICATOR_TICK_MS = 1000;
 const RUN_INDICATOR_START_GRACE_MS = 2500;
 const RUN_INDICATOR_STATE_RECHECK_MS = 5000;
+const STREAM_OUTPUT_HIDE_DELAY_MS = 300;
+const STREAM_OUTPUT_TOOLCALL_GUARD_MS = 220;
+const STREAM_OUTPUT_MIN_VISIBLE_MS = 900;
 const TODO_PROGRESS_LINE_REGEX = /^\s*(?:(?:[-*]|\d+[.)])\s*)?\[(?: |x|X|-)\]\s+.+$/;
 const TODO_PROGRESS_PARTIAL_LINE_REGEX = /^\s*(?:(?:[-*]|\d+[.)])\s*)?\[(?: |x|X|-)?\]?\s*.*$/;
 const CHAT_SCROLL_KEYS = new Set(["ArrowDown", "ArrowUp", "End", "Home", "PageDown", "PageUp", " "]);
@@ -157,10 +183,84 @@ const TAB_ACTIVITY_IDLE_RECONCILE_GRACE_MS = 1200;
 const TAB_GROUP_STATUS_PRIORITY = ["blocked", "done", "idle", "working"];
 const EXTENSION_UI_BLOCKING_METHODS = new Set(["select", "confirm", "input", "editor"]);
 const BLOCKED_TAB_NOTIFICATION_TAG_PREFIX = "pi-webui-blocked-tab";
+const AGENT_DONE_NOTIFICATION_TAG_PREFIX = "pi-webui-agent-done";
 const BLOCKED_TAB_NOTIFICATION_ICON = "/icon-192.png";
 const mobileViewMedia = window.matchMedia?.(MOBILE_VIEW_QUERY) || null;
 const statusEntries = new Map();
 const widgets = new Map();
+// Optional feature detection intentionally checks loaded Pi capabilities (RPC-visible
+// commands and live widget events), not npm package folders. This keeps local dev
+// symlinks and independently installed packages working.
+const optionalFeatureAvailability = {
+  gitWorkflow: false,
+  releaseNpm: false,
+  releaseAur: false,
+  statsCommand: false,
+  gitFooterStatus: false,
+  todoProgressWidget: false,
+  themeBundle: false,
+};
+const OPTIONAL_FEATURES = [
+  {
+    id: "gitWorkflow",
+    label: "Guided Git workflow",
+    packageName: "@firstpick/pi-prompts-git-pr",
+    capabilityLabel: "/git-staged-msg",
+    description: "Generate staged commit messages for the guided Git workflow.",
+  },
+  {
+    id: "releaseNpm",
+    label: "NPM Release",
+    packageName: "@firstpick/pi-extension-release-npm",
+    capabilityLabel: "/release-npm",
+    description: "Publish menu action and live npm release widgets.",
+  },
+  {
+    id: "releaseAur",
+    label: "AUR Release",
+    packageName: "@firstpick/pi-extension-release-aur",
+    capabilityLabel: "/release-aur",
+    description: "Publish menu action, setup helpers, skills, and AUR release widgets.",
+  },
+  {
+    id: "todoProgressWidget",
+    label: "Todo progress widget",
+    packageName: "@firstpick/pi-extension-todo-progress",
+    capabilityLabel: "/todo-progress-status or todo-progress widget event",
+    description: "Styled live checklist rendering for assistant todo updates.",
+  },
+  {
+    id: "gitFooterStatus",
+    label: "Git footer status",
+    packageName: "@firstpick/pi-extension-git-footer-status",
+    capabilityLabel: "/git-footer-refresh or git-footer status event",
+    description: "Enhanced Pi footer/status telemetry when loaded by Pi.",
+  },
+  {
+    id: "statsCommand",
+    label: "Stats command",
+    packageName: "@firstpick/pi-extension-stats",
+    capabilityLabel: "/stats",
+    description: "Token and cost usage analytics commands.",
+  },
+  {
+    id: "themeBundle",
+    label: "Theme bundle",
+    packageName: "@firstpick/pi-themes-bundle",
+    capabilityLabel: "/api/themes returned themes",
+    description: "Additional browser theme-picker and Pi theme resources.",
+  },
+];
+const OPTIONAL_FEATURE_BY_ID = new Map(OPTIONAL_FEATURES.map((feature) => [feature.id, feature]));
+const OPTIONAL_COMMAND_FEATURES = new Map([
+  ["git-staged-msg", "gitWorkflow"],
+  ["release-npm", "releaseNpm"],
+  ["release-aur", "releaseAur"],
+  ["stats", "statsCommand"],
+  ["git-footer-refresh", "gitFooterStatus"],
+  ["todo-progress-status", "todoProgressWidget"],
+]);
+const optionalFeatureInstallInProgress = new Set();
 const gitWorkflow = {
   active: false,
   step: "idle",
@@ -213,10 +313,77 @@ function readStoredSidePanelCollapsed() {
   }
 }
 
+function readStoredAgentDoneNotificationsEnabled() {
+  try {
+    return localStorage.getItem(AGENT_DONE_NOTIFICATIONS_STORAGE_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+
+function persistAgentDoneNotificationsEnabled(enabled) {
+  try {
+    localStorage.setItem(AGENT_DONE_NOTIFICATIONS_STORAGE_KEY, enabled ? "1" : "0");
+  } catch {
+    // Ignore storage failures; the toggle should still work for this page load.
+  }
+}
+
+function agentDoneNotificationsStatusText() {
+  if (!browserNotificationSupported()) return "Unavailable here";
+  const permission = browserNotificationPermission();
+  if (permission === "denied") return "Permission denied";
+  if (agentDoneNotificationsEnabled) return permission === "granted" ? "On" : "Permission needed";
+  return permission === "granted" ? "Off · permission granted" : "Off";
+}
+
+function renderAgentDoneNotificationsToggle() {
+  if (!elements.agentDoneNotificationsToggle) return;
+  const supported = browserNotificationSupported();
+  const permission = browserNotificationPermission();
+  elements.agentDoneNotificationsToggle.checked = agentDoneNotificationsEnabled;
+  elements.agentDoneNotificationsToggle.disabled = !supported || permission === "denied";
+  elements.agentDoneNotificationsToggle.setAttribute("aria-describedby", "agentDoneNotificationsStatus");
+  if (elements.agentDoneNotificationsStatus) elements.agentDoneNotificationsStatus.textContent = agentDoneNotificationsStatusText();
+}
+
+async function setAgentDoneNotificationsEnabled(enabled, { requestPermission = false, announce = false } = {}) {
+  let next = !!enabled;
+  if (next) {
+    if (!browserNotificationSupported()) {
+      addEvent("agent-done notifications require HTTPS or localhost", "warn");
+      next = false;
+    } else if (browserNotificationPermission() === "denied") {
+      addEvent("agent-done notifications are blocked by browser permission", "warn");
+      next = false;
+    } else if (requestPermission && browserNotificationPermission() !== "granted") {
+      next = await ensureAgentDoneNotificationPermission();
+      if (!next) addEvent("agent-done notifications not enabled; browser permission was not granted", "warn");
+    } else if (browserNotificationPermission() !== "granted") {
+      next = false;
+    }
+  }
+  agentDoneNotificationsEnabled = next;
+  persistAgentDoneNotificationsEnabled(next);
+  renderAgentDoneNotificationsToggle();
+  if (announce) addEvent(next ? "agent-done notifications enabled" : "agent-done notifications disabled", next ? "info" : "warn");
+  return next;
+}
+
+function restoreAgentDoneNotificationsSetting() {
+  agentDoneNotificationsEnabled = readStoredAgentDoneNotificationsEnabled();
+  if (agentDoneNotificationsEnabled && (!browserNotificationSupported() || browserNotificationPermission() !== "granted")) {
+    agentDoneNotificationsEnabled = false;
+    persistAgentDoneNotificationsEnabled(false);
+  }
+  renderAgentDoneNotificationsToggle();
+}
+
 function setComposerActionsOpen(open) {
   const shouldOpen = open && isMobileView();
   document.body.classList.toggle("composer-actions-open", shouldOpen);
   elements.composerActionsButton.setAttribute("aria-expanded", shouldOpen ? "true" : "false");
+  if (!shouldOpen) setPublishMenuOpen(false);
 }
 
 function isRunActive() {
@@ -411,6 +578,49 @@ function storeThemeName(name) {
   }
 }
 
+function loadDisabledOptionalFeatures() {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(OPTIONAL_FEATURES_STORAGE_KEY) || "[]");
+    return Array.isArray(parsed) ? parsed.filter((id) => OPTIONAL_FEATURE_BY_ID.has(id)) : [];
+  } catch {
+    return [];
+  }
+}
+
+let disabledOptionalFeatures = new Set(loadDisabledOptionalFeatures());
+
+function storeDisabledOptionalFeatures() {
+  try {
+    localStorage.setItem(OPTIONAL_FEATURES_STORAGE_KEY, JSON.stringify([...disabledOptionalFeatures].sort()));
+  } catch {
+    // Optional feature toggles should still work for this page load.
+  }
+}
+
+function isOptionalFeatureDetected(featureId) {
+  return optionalFeatureAvailability[featureId] === true;
+}
+
+function isOptionalFeatureDisabled(featureId) {
+  return disabledOptionalFeatures.has(featureId);
+}
+
+function isOptionalFeatureEnabled(featureId) {
+  return isOptionalFeatureDetected(featureId) && !isOptionalFeatureDisabled(featureId);
+}
+
+function setOptionalFeatureDisabled(featureId, disabled) {
+  if (!OPTIONAL_FEATURE_BY_ID.has(featureId)) return;
+  if (disabled) disabledOptionalFeatures.add(featureId);
+  else disabledOptionalFeatures.delete(featureId);
+  storeDisabledOptionalFeatures();
+  renderOptionalFeatureControls();
+  renderThemeSelect();
+  renderWidgets();
+  renderStatus();
+  refreshCommands().catch((error) => addEvent(error.message || String(error), "error"));
+}
+
 function displayThemeName(name) {
   return String(name || "")
     .split(/[-_]+/)
@@ -599,6 +809,13 @@ function applyTheme(theme, { persist = false, announce = false } = {}) {
 function renderThemeSelect({ unavailableLabel = "Theme bundle unavailable" } = {}) {
   if (!elements.themeSelect) return;
   elements.themeSelect.replaceChildren();
+  if (isOptionalFeatureDisabled("themeBundle")) {
+    const option = make("option", undefined, "Theme feature disabled");
+    option.value = "";
+    elements.themeSelect.append(option);
+    elements.themeSelect.disabled = true;
+    return;
+  }
   if (!availableThemes.length) {
     const option = make("option", undefined, unavailableLabel);
     option.value = "";
@@ -616,6 +833,7 @@ function renderThemeSelect({ unavailableLabel = "Theme bundle unavailable" } = {
 }
 
 function setThemeByName(name, options = {}) {
+  if (!isOptionalFeatureEnabled("themeBundle")) return;
   const theme = availableThemes.find((item) => item.name === name);
   if (!theme) return;
   applyTheme(theme, options);
@@ -627,16 +845,20 @@ async function initializeThemes() {
     response = await api("/api/themes", { scoped: false });
   } catch (error) {
     availableThemes = [];
+    optionalFeatureAvailability.themeBundle = false;
+    renderOptionalFeatureControls();
     const label = error.statusCode === 404 ? "Restart Web UI to load themes" : "Theme bundle unavailable";
     renderThemeSelect({ unavailableLabel: label });
     throw error;
   }
   availableThemes = Array.isArray(response.data?.themes) ? response.data.themes : [];
+  optionalFeatureAvailability.themeBundle = availableThemes.length > 0;
+  renderOptionalFeatureControls();
   const stored = storedThemeName();
   currentThemeName = availableThemes.some((theme) => theme.name === stored) ? stored : DEFAULT_THEME_NAME;
   renderThemeSelect();
   setThemeByName(currentThemeName, { persist: false });
-  if (!availableThemes.some((theme) => theme.name === currentThemeName) && availableThemes[0]) applyTheme(availableThemes[0], { persist: false });
+  if (isOptionalFeatureEnabled("themeBundle") && !availableThemes.some((theme) => theme.name === currentThemeName) && availableThemes[0]) applyTheme(availableThemes[0], { persist: false });
   if (!availableThemes.length) addEvent("theme bundle unavailable; using built-in default theme", "warn");
 }
 
@@ -958,6 +1180,7 @@ function resetActiveTabUi() {
   widgets.clear();
   transientMessages = [];
   availableCommands = [];
+  resetOptionalFeatureAvailability();
   commandSuggestions = [];
   pathSuggestions = [];
   suggestionMode = "none";
@@ -1113,7 +1336,7 @@ function shouldRenderTerminalTabGroup(group, groupCount) {
   return groupCount > 1 && group.tabs.length > 1 && Boolean(group.cwd);
 }
 
-function renderTerminalTabGroup(group) {
+function renderTerminalTabGroup(group, groupCount = 1) {
   const groupTabs = group.tabs;
   const activeGroupTab = groupTabs.find((tab) => tab.id === activeTabId) || groupTabs[0];
   const isActive = groupTabs.some((tab) => tab.id === activeTabId);
@@ -1143,6 +1366,18 @@ function renderTerminalTabGroup(group) {
   button.addEventListener("click", () => switchTab(activeGroupTab.id));
   wrapper.append(button);
 
+  if (groupCount > 1) {
+    const close = make("button", "terminal-tab-close terminal-tab-group-close", "×");
+    close.type = "button";
+    close.title = `Close ${displayCwd} group`;
+    close.setAttribute("aria-label", `Close ${displayCwd} group`);
+    close.addEventListener("click", (event) => {
+      event.stopPropagation();
+      closeTerminalTabGroup(group);
+    });
+    wrapper.append(close);
+  }
+
   const menu = make("div", "terminal-tab-group-menu");
   menu.setAttribute("role", "group");
   menu.setAttribute("aria-label", `${displayCwd} tabs`);
@@ -1193,12 +1428,13 @@ function renderTabs() {
   if (openTerminalTabGroupKey && !renderedGroupKeys.has(openTerminalTabGroupKey)) openTerminalTabGroupKey = null;
   for (const group of groups) {
     if (shouldRenderTerminalTabGroup(group, groups.length)) {
-      elements.tabBar.append(renderTerminalTabGroup(group));
+      elements.tabBar.append(renderTerminalTabGroup(group, groups.length));
     } else {
       for (const tab of group.tabs) elements.tabBar.append(renderTerminalTab(tab));
     }
   }
   elements.tabBar.append(elements.newTabButton);
+  elements.closeAllTabsButton.disabled = tabs.length === 0;
   updateTerminalTabGroupOpenState();
   setMobileTabsExpanded(mobileTabsExpanded);
   updateDocumentTitle();
@@ -1211,6 +1447,7 @@ async function refreshTabs({ selectStored = false } = {}) {
   tabs = response.data?.tabs || [];
   syncTabMetadata(tabs);
   syncBlockedTabNotificationsFromTabs(tabs, previousTabs);
+  syncAgentDoneNotificationsFromTabs(tabs, previousTabs);
   const stored = selectStored ? restoreStoredTabId() : null;
   if (!activeTabId || !tabs.some((tab) => tab.id === activeTabId)) {
     activeTabId = (stored && tabs.some((tab) => tab.id === stored) ? stored : tabs[0]?.id) || null;
@@ -1258,21 +1495,58 @@ async function createTerminalTab(cwd = activeTab()?.cwd, { triggerButton = eleme
   }
 }
 
-async function closeTerminalTab(tabId) {
-  const tab = tabs.find((item) => item.id === tabId);
-  if (!tab || tabs.length <= 1) return;
-  if (!confirm(`Close ${tab.title}? This terminates its isolated Pi process.`)) return;
+function tabHasActiveAgent(tab) {
+  const activity = activityForTab(tab);
+  const indicator = tabIndicator(tab);
+  return !!activity.isWorking || indicator.state === "working" || indicator.state === "blocked";
+}
 
-  const wasActive = tabId === activeTabId;
-  const fallbackTabId = tabs.find((item) => item.id !== tabId)?.id || null;
+function confirmCloseTerminalTabs(targetTabs, label) {
+  const count = targetTabs.length;
+  const noun = count === 1 ? "tab" : "tabs";
+  const activeAgentTabs = targetTabs.filter(tabHasActiveAgent);
+  const tabList = targetTabs.map((tab) => `- ${tab.title}`).join("\n");
+  const activeList = activeAgentTabs.map((tab) => `- ${tab.title} (${tabIndicator(tab).label})`).join("\n");
+  const base = [
+    `Close ${label || `${count} terminal ${noun}`}?`,
+    "",
+    `This terminates ${count === 1 ? "its isolated Pi process" : "their isolated Pi processes"}.`,
+    count > 1 ? `\nTabs to close:\n${tabList}` : "",
+  ].filter(Boolean).join("\n");
+  const warning = activeAgentTabs.length
+    ? [
+        `WARNING: ${activeAgentTabs.length} ${activeAgentTabs.length === 1 ? "tab has an agent" : "tabs have agents"} still running or waiting for input:`,
+        activeList,
+        "",
+        base,
+        "",
+        "Close anyway?",
+      ].join("\n")
+    : base;
+  return confirm(warning);
+}
+
+async function closeTerminalTabs(tabIds, { label = "selected terminal tabs" } = {}) {
+  const targetIds = [...new Set(tabIds.filter(Boolean))];
+  const targetTabs = targetIds.map((id) => tabs.find((item) => item.id === id)).filter(Boolean);
+  if (!targetTabs.length) return;
+  if (!confirmCloseTerminalTabs(targetTabs, label)) return;
+
+  const closedActiveTab = targetTabs.some((tab) => tab.id === activeTabId);
+  const fallbackTabId = tabs.find((item) => !targetIds.includes(item.id))?.id || null;
   try {
-    if (wasActive) eventSource?.close();
-    const response = await api(`/api/tabs/${encodeURIComponent(tabId)}`, { method: "DELETE", scoped: false });
-    tabs = response.data?.tabs || tabs.filter((item) => item.id !== tabId);
+    if (closedActiveTab) eventSource?.close();
+    const response = await api("/api/tabs/close", { method: "POST", body: { ids: targetIds }, scoped: false });
+    const closedIds = response.data?.closedIds || targetIds;
+    tabs = response.data?.tabs || tabs.filter((item) => !closedIds.includes(item.id));
     syncTabMetadata(tabs);
-    tabDrafts.delete(tabId);
-    if (wasActive) {
-      activeTabId = (fallbackTabId && tabs.some((item) => item.id === fallbackTabId) ? fallbackTabId : tabs[0]?.id) || null;
+    for (const id of closedIds) tabDrafts.delete(id);
+    clearOpenTerminalTabGroup(null, { force: true });
+
+    if (closedActiveTab || !tabs.some((item) => item.id === activeTabId)) {
+      activeTabId = (response.data?.activeTabId && tabs.some((item) => item.id === response.data.activeTabId)
+        ? response.data.activeTabId
+        : (fallbackTabId && tabs.some((item) => item.id === fallbackTabId) ? fallbackTabId : tabs[0]?.id)) || null;
       rememberActiveTab();
       resetActiveTabUi();
       renderTabs();
@@ -1286,11 +1560,27 @@ async function closeTerminalTab(tabId) {
     } else {
       renderTabs();
     }
+    addEvent(`closed ${closedIds.length || targetTabs.length} terminal ${closedIds.length === 1 ? "tab" : "tabs"}`, "warn");
   } catch (error) {
     addEvent(error.message, "error");
   }
 }
 
+async function closeTerminalTab(tabId) {
+  const tab = tabs.find((item) => item.id === tabId);
+  if (!tab) return;
+  await closeTerminalTabs([tabId], { label: tab.title });
+}
+
+async function closeTerminalTabGroup(group) {
+  const title = tabGroupTitle(group.cwd, group.tabs[0]?.title || "cwd");
+  await closeTerminalTabs(group.tabs.map((tab) => tab.id), { label: `${title} group` });
+}
+
+async function closeAllTerminalTabs() {
+  await closeTerminalTabs(tabs.map((tab) => tab.id), { label: "all terminal tabs" });
+}
+
 async function initializeTabs() {
   await refreshTabs({ selectStored: true });
   resetActiveTabUi();
@@ -1312,15 +1602,23 @@ function addEvent(message, level = "info") {
   while (elements.eventLog.children.length > 120) elements.eventLog.lastElementChild?.remove();
 }
 
-function blockedTabNotificationSupported() {
+function browserNotificationSupported() {
   return "Notification" in window && window.isSecureContext;
 }
 
-function blockedTabNotificationPermission() {
+function browserNotificationPermission() {
   if (!("Notification" in window)) return "unsupported";
   return Notification.permission || "default";
 }
 
+function blockedTabNotificationSupported() {
+  return browserNotificationSupported();
+}
+
+function blockedTabNotificationPermission() {
+  return browserNotificationPermission();
+}
+
 async function ensureBlockedTabNotificationPermission() {
   if (!blockedTabNotificationSupported()) return false;
   if (Notification.permission === "granted") return true;
@@ -1339,6 +1637,24 @@ async function ensureBlockedTabNotificationPermission() {
   return false;
 }
 
+async function ensureAgentDoneNotificationPermission() {
+  if (!browserNotificationSupported()) return false;
+  if (Notification.permission === "granted") return true;
+  if (Notification.permission === "denied" || agentDoneNotificationPermissionRequested || typeof Notification.requestPermission !== "function") return false;
+
+  agentDoneNotificationPermissionRequested = true;
+  try {
+    const permission = await Notification.requestPermission();
+    if (permission === "granted") {
+      addEvent("browser notifications enabled for completed agent work", "info");
+      return true;
+    }
+  } catch (error) {
+    addEvent(`agent-done notification permission request failed: ${error.message}`, "warn");
+  }
+  return false;
+}
+
 function noteBlockedTabNotificationFallback(reason) {
   if (blockedTabNotificationFallbackNoted) return;
   blockedTabNotificationFallbackNoted = true;
@@ -1423,6 +1739,97 @@ function notifyBlockedTab(tabOrId, { request = null, count } = {}) {
   showBlockedTabBrowserNotification({ tabId, title, body, method, count: pendingCount });
 }
 
+function noteAgentDoneNotificationFallback(reason) {
+  if (agentDoneNotificationFallbackNoted) return;
+  agentDoneNotificationFallbackNoted = true;
+  addEvent(`browser notifications unavailable for completed agent work: ${reason}`, "warn");
+}
+
+async function showAgentDoneBrowserNotification({ tabId, title, body }) {
+  if (!agentDoneNotificationsEnabled) return false;
+  if (!browserNotificationSupported()) {
+    noteAgentDoneNotificationFallback("requires HTTPS or localhost");
+    renderAgentDoneNotificationsToggle();
+    return false;
+  }
+  if (!(await ensureAgentDoneNotificationPermission())) {
+    const permission = browserNotificationPermission();
+    noteAgentDoneNotificationFallback(permission === "denied" ? "permission denied" : "permission not granted");
+    if (permission !== "granted") {
+      agentDoneNotificationsEnabled = false;
+      persistAgentDoneNotificationsEnabled(false);
+    }
+    renderAgentDoneNotificationsToggle();
+    return false;
+  }
+
+  const options = {
+    body,
+    tag: `${AGENT_DONE_NOTIFICATION_TAG_PREFIX}:${tabId}`,
+    renotify: true,
+    requireInteraction: false,
+    icon: BLOCKED_TAB_NOTIFICATION_ICON,
+    badge: BLOCKED_TAB_NOTIFICATION_ICON,
+    data: { tabId, url: location.href },
+  };
+
+  try {
+    let registration = null;
+    if ("serviceWorker" in navigator) {
+      registration = await Promise.race([navigator.serviceWorker.ready, delay(1200).then(() => null)]).catch(() => null);
+    }
+    if (registration?.showNotification) {
+      await registration.showNotification(title, options);
+      return true;
+    }
+
+    const notification = new Notification(title, options);
+    notification.onclick = () => {
+      window.focus();
+      if (tabId && tabId !== activeTabId) switchTab(tabId).catch((error) => addEvent(error.message, "error"));
+      notification.close();
+    };
+    return true;
+  } catch (error) {
+    noteAgentDoneNotificationFallback(error.message || "notification failed");
+    return false;
+  }
+}
+
+function agentDoneNotificationKey(tabId, activity = {}) {
+  const serial = Number(activity?.completionSerial);
+  return `${tabId}:${Number.isFinite(serial) && serial > 0 ? serial : "done"}`;
+}
+
+function notifyAgentDone(tabOrId, { activity = null, tabTitle = "" } = {}) {
+  if (!agentDoneNotificationsEnabled) return;
+  const tabId = typeof tabOrId === "string" ? tabOrId : tabOrId?.id || activeTabId;
+  if (!tabId) return;
+  const tab = typeof tabOrId === "object" && tabOrId !== null ? tabOrId : tabs.find((item) => item.id === tabId);
+  const normalizedActivity = normalizeTabActivity(activity || tab?.activity || activityForTab(tab));
+  if (!normalizedActivity.completionSerial) return;
+  const key = agentDoneNotificationKey(tabId, normalizedActivity);
+  if (agentDoneNotificationKeys.has(key)) return;
+  agentDoneNotificationKeys.add(key);
+
+  const displayTitle = tabTitle || tab?.title || "terminal";
+  showAgentDoneBrowserNotification({
+    tabId,
+    title: "Pi finished work",
+    body: `${displayTitle} finished its agent run.`,
+  });
+}
+
+function syncAgentDoneNotificationsFromTabs(nextTabs = [], previousTabs = []) {
+  if (!agentDoneNotificationsEnabled || previousTabs.length === 0) return;
+  const previousSerials = new Map(previousTabs.filter((tab) => tab?.id).map((tab) => [tab.id, normalizeTabActivity(tab.activity).completionSerial]));
+  for (const tab of nextTabs) {
+    if (!tab?.id || !previousSerials.has(tab.id)) continue;
+    const activity = normalizeTabActivity(tab.activity);
+    if (!activity.isWorking && activity.completionSerial > previousSerials.get(tab.id)) notifyAgentDone(tab, { activity });
+  }
+}
+
 function syncBlockedTabNotificationsFromTabs(nextTabs = [], previousTabs = []) {
   if (previousTabs.length === 0) return;
   const previousCounts = new Map(previousTabs.filter((tab) => tab?.id).map((tab) => [tab.id, tabPendingBlockerCount(tab)]));
@@ -1587,6 +1994,7 @@ function formatStatusEntry(key, value) {
   const cleanKey = cleanStatusText(key);
   const cleanValue = cleanStatusText(value);
   if (!cleanValue) return "";
+  if (cleanKey === "git-footer" && !isOptionalFeatureEnabled("gitFooterStatus")) return "";
   if (cleanKey === "plan-mode") return `Plan: ${cleanValue}`;
   if (cleanKey === "extension") return cleanValue;
   return `${cleanKey}: ${cleanValue}`;
@@ -2185,7 +2593,53 @@ function isGuardrailDialogPrompt(prompt) {
   return /(?:dangerous|high-risk|protected).*(?:command|file)|safety rule|execute anyway\?/i.test(`${plainTitle}\n${plainMessage}`);
 }
 
+function releaseDialogPromptParts(prompt) {
+  const combined = [prompt.title, prompt.message].filter((part) => stripAnsi(part).trim()).join("\n").trimEnd();
+  const lines = combined.split("\n");
+  const questionIndex = lines.findIndex((line) => /^(Publish eligible packages now\?|Publish to AUR\?|Publish newly created\/converged AUR package\?)$/i.test(stripAnsi(line).trim()));
+  const question = questionIndex === -1 ? "Publish eligible packages now?" : stripAnsi(lines[questionIndex]).trim();
+  const isNpmReleasePrompt = /Release preflight summary:/i.test(combined) && /Publish eligible packages now\?/i.test(combined);
+  const isAurReleasePrompt = /AUR release summary:/i.test(combined) && questionIndex !== -1;
+  if (!isNpmReleasePrompt && !isAurReleasePrompt) return null;
+
+  const summaryLines = questionIndex === -1 ? lines : [...lines.slice(0, questionIndex), ...lines.slice(questionIndex + 1)];
+  const message = summaryLines.join("\n").replace(/\n+$/, "");
+  return {
+    title: question,
+    message,
+    plainMessage: stripAnsi(message),
+  };
+}
+
+function releaseDialogLineClass(plainLine, section) {
+  const text = plainLine.trim();
+  if (!text) return "release-dialog-spacer";
+  if (/^(Release preflight summary|AUR release summary|Version changes|Bump summary|Will publish|Will skip|Blocked|Other|Publish targets after confirmation|Missing local package dirs):$/i.test(text)) {
+    return "release-dialog-heading";
+  }
+  if (/^none$/i.test(text)) return "release-dialog-muted";
+  if (/->\s*error\b|\bfailed\b|\bmissing\b|\berrors?:\s*[1-9]/i.test(text) || /^blocked$/i.test(section)) return "release-dialog-danger";
+  if (/publish-(?:first|update)|would bump up|first release/i.test(text) || /^(will publish|publish targets after confirmation)$/i.test(section)) return "release-dialog-success";
+  if (/\bskip(?:ped)?\b|\bunchanged\b|would reduce down|already published/i.test(text) || /^will skip$/i.test(section)) return "release-dialog-warning";
+  return "";
+}
+
+function renderReleaseDialogMessage(parent, text) {
+  parent.replaceChildren();
+  let section = "";
+  for (const line of String(text || "").split("\n")) {
+    const plainLine = stripAnsi(line);
+    const heading = plainLine.trim().match(/^(Release preflight summary|Version changes|Bump summary|Will publish|Will skip|Blocked|Other|Publish targets after confirmation|Missing local package dirs):$/i);
+    const rowClass = ["release-dialog-line", releaseDialogLineClass(plainLine, section)].filter(Boolean).join(" ");
+    const row = make("span", rowClass);
+    renderAnsiText(row, line || " ");
+    parent.append(row);
+    if (heading) section = heading[1].toLowerCase();
+  }
+}
+
 function stripTodoProgressLines(text, { streaming = false } = {}) {
+  if (!isOptionalFeatureEnabled("todoProgressWidget")) return String(text || "");
   let inFence = false;
   const kept = [];
   const raw = String(text || "");
@@ -2272,11 +2726,209 @@ function renderTodoProgressWidget(_key, lines) {
   return node;
 }
 
+function getWidgetLines(key) {
+  const value = widgets.get(key);
+  return Array.isArray(value?.widgetLines) ? value.widgetLines : [];
+}
+
+function releaseNpmFooterDetails(lines) {
+  const primary = cleanStatusText(lines[0] || "").replace(/^release-(?:npm|aur):\s*/i, "");
+  const parts = primary.split(/\s+·\s+/).map((part) => part.trim()).filter(Boolean);
+  return {
+    phase: parts[0] || "release workflow",
+    mode: parts[1] || "",
+    elapsed: parts[2] || "",
+    controls: lines.slice(1).map(cleanStatusText).filter(Boolean).join(" · "),
+  };
+}
+
+function releaseNpmLineTone(line) {
+  const clean = stripAnsi(line).trim();
+  if (/^\$\s+/.test(clean)) return "command";
+  if (/^==>/.test(clean)) return "target";
+  if (/^(PASS|✓|Published)\b/i.test(clean)) return "pass";
+  if (/^(FAIL|ERROR|ERR|✗)\b/i.test(clean)) return "fail";
+  if (/^(WARN|warning)\b/i.test(clean)) return "warn";
+  if (/^(INFO|npm notice|notice)\b/i.test(clean)) return "info";
+  if (/^RELEASE_NPM_EVENT\b/.test(clean)) return "event";
+  return "";
+}
+
+function appendReleaseNpmTerminalLine(parent, line) {
+  const tone = releaseNpmLineTone(line);
+  const row = make("div", `release-npm-line${tone ? ` ${tone}` : ""}`);
+  if (String(line ?? "") === "") row.textContent = "\u00a0";
+  else renderAnsiText(row, line);
+  parent.append(row);
+}
+
+async function sendReleaseNpmCommand(command) {
+  try {
+    await api("/api/prompt", { method: "POST", body: { message: command }, tabId: activeTabId });
+    addEvent(`${command} sent`, "info");
+    scheduleRefreshState();
+  } catch (error) {
+    addEvent(error.message, "error");
+    addTransientMessage({ role: "error", title: command, content: error.message, level: "error" });
+  }
+}
+
+function releaseNpmActionButton(label, command, className = "") {
+  const button = make("button", `release-npm-action ${className}`.trim(), label);
+  button.type = "button";
+  button.addEventListener("click", () => sendReleaseNpmCommand(command));
+  return button;
+}
+
+function renderReleaseNpmOutputWidget() {
+  if (!isOptionalFeatureEnabled("releaseNpm")) return null;
+  const outputLines = getWidgetLines("release-npm:output");
+  const footerLines = getWidgetLines("release-npm:footer");
+  if (outputLines.length === 0 && footerLines.length === 0) return null;
+
+  const details = releaseNpmFooterDetails(footerLines);
+  const node = make("section", "widget release-npm-widget release-npm-live-widget");
+  node.setAttribute("aria-label", "npm release output");
+
+  const header = make("div", "release-npm-header");
+  const titleWrap = make("div", "release-npm-title-wrap");
+  titleWrap.append(make("span", "release-npm-kicker", "npm release"), make("strong", "release-npm-title", details.phase));
+
+  const meta = make("div", "release-npm-meta");
+  if (details.mode) meta.append(make("span", "release-npm-pill", details.mode));
+  if (details.elapsed) meta.append(make("span", "release-npm-pill elapsed", details.elapsed));
+
+  const actions = make("div", "release-npm-actions");
+  actions.append(
+    releaseNpmActionButton("Toggle output", "/release-toggle"),
+    releaseNpmActionButton("Abort", "/release-abort", "danger"),
+  );
+  header.append(titleWrap, meta, actions);
+
+  const terminal = make("div", "release-npm-terminal");
+  terminal.setAttribute("role", "log");
+  terminal.setAttribute("aria-live", "polite");
+  for (const line of (outputLines.length ? outputLines : ["Waiting for release output..."])) {
+    appendReleaseNpmTerminalLine(terminal, line);
+  }
+
+  const controls = make("div", "release-npm-controls", details.controls || "Controls: /release-toggle expands/collapses · /release-abort stops subprocess");
+  node.append(header, terminal, controls);
+  requestAnimationFrame(() => { terminal.scrollTop = terminal.scrollHeight; });
+  return node;
+}
+
+function renderReleaseNpmLogWidget() {
+  if (!isOptionalFeatureEnabled("releaseNpm")) return null;
+  const lines = getWidgetLines("release-npm:logs");
+  if (lines.length === 0) return null;
+
+  const node = make("section", "widget release-npm-widget release-npm-log-widget");
+  node.setAttribute("aria-label", "npm release log");
+  const header = make("div", "release-npm-header");
+  const titleWrap = make("div", "release-npm-title-wrap");
+  titleWrap.append(
+    make("span", "release-npm-kicker", "saved log"),
+    make("strong", "release-npm-title", stripAnsi(lines[0] || "release-npm log")),
+  );
+  const meta = make("div", "release-npm-meta");
+  if (lines[1]) meta.append(make("span", "release-npm-pill", stripAnsi(lines[1])));
+  const actions = make("div", "release-npm-actions");
+  actions.append(releaseNpmActionButton("Close log", "/release-npm-logs close"));
+  header.append(titleWrap, meta, actions);
+
+  const terminal = make("div", "release-npm-terminal");
+  for (const line of lines.slice(2).filter((line, index) => index > 0 || stripAnsi(line).trim())) {
+    appendReleaseNpmTerminalLine(terminal, line);
+  }
+  node.append(header, terminal);
+  requestAnimationFrame(() => { terminal.scrollTop = terminal.scrollHeight; });
+  return node;
+}
+
+function renderReleaseAurOutputWidget() {
+  if (!isOptionalFeatureEnabled("releaseAur")) return null;
+  const outputLines = getWidgetLines("release-aur:output");
+  const footerLines = getWidgetLines("release-aur:footer");
+  if (outputLines.length === 0 && footerLines.length === 0) return null;
+
+  const details = releaseNpmFooterDetails(footerLines);
+  const node = make("section", "widget release-npm-widget release-aur-widget release-aur-live-widget");
+  node.setAttribute("aria-label", "AUR release output");
+
+  const header = make("div", "release-npm-header");
+  const titleWrap = make("div", "release-npm-title-wrap");
+  titleWrap.append(make("span", "release-npm-kicker", "AUR release"), make("strong", "release-npm-title", details.phase));
+
+  const meta = make("div", "release-npm-meta");
+  if (details.mode) meta.append(make("span", "release-npm-pill", details.mode));
+  if (details.elapsed) meta.append(make("span", "release-npm-pill elapsed", details.elapsed));
+
+  const actions = make("div", "release-npm-actions");
+  actions.append(
+    releaseNpmActionButton("Toggle output", "/release-aur toggle"),
+    releaseNpmActionButton("Abort", "/release-aur abort", "danger"),
+  );
+  header.append(titleWrap, meta, actions);
+
+  const terminal = make("div", "release-npm-terminal");
+  terminal.setAttribute("role", "log");
+  terminal.setAttribute("aria-live", "polite");
+  for (const line of (outputLines.length ? outputLines : ["Waiting for release-aur output..."])) {
+    appendReleaseNpmTerminalLine(terminal, line);
+  }
+
+  const controls = make("div", "release-npm-controls", details.controls || "Controls: /release-aur toggle expands/collapses · /release-aur abort stops subprocess");
+  node.append(header, terminal, controls);
+  requestAnimationFrame(() => { terminal.scrollTop = terminal.scrollHeight; });
+  return node;
+}
+
+function renderReleaseAurLogWidget() {
+  if (!isOptionalFeatureEnabled("releaseAur")) return null;
+  const lines = getWidgetLines("release-aur:logs");
+  if (lines.length === 0) return null;
+
+  const node = make("section", "widget release-npm-widget release-aur-widget release-aur-log-widget");
+  node.setAttribute("aria-label", "AUR release log");
+  const header = make("div", "release-npm-header");
+  const titleWrap = make("div", "release-npm-title-wrap");
+  titleWrap.append(
+    make("span", "release-npm-kicker", "saved AUR log"),
+    make("strong", "release-npm-title", stripAnsi(lines[0] || "release-aur log")),
+  );
+  const meta = make("div", "release-npm-meta");
+  if (lines[1]) meta.append(make("span", "release-npm-pill", stripAnsi(lines[1])));
+  const actions = make("div", "release-npm-actions");
+  actions.append(releaseNpmActionButton("Close log", "/release-aur logs close"));
+  header.append(titleWrap, meta, actions);
+
+  const terminal = make("div", "release-npm-terminal");
+  for (const line of lines.slice(2).filter((line, index) => index > 0 || stripAnsi(line).trim())) {
+    appendReleaseNpmTerminalLine(terminal, line);
+  }
+  node.append(header, terminal);
+  requestAnimationFrame(() => { terminal.scrollTop = terminal.scrollHeight; });
+  return node;
+}
+
 function renderWidgets() {
   elements.widgetArea.replaceChildren();
+  const releaseOutput = renderReleaseNpmOutputWidget();
+  if (releaseOutput) elements.widgetArea.append(releaseOutput);
+  const releaseLog = renderReleaseNpmLogWidget();
+  if (releaseLog) elements.widgetArea.append(releaseLog);
+  const releaseAurOutput = renderReleaseAurOutputWidget();
+  if (releaseAurOutput) elements.widgetArea.append(releaseAurOutput);
+  const releaseAurLog = renderReleaseAurLogWidget();
+  if (releaseAurLog) elements.widgetArea.append(releaseAurLog);
+
   for (const [key, value] of widgets) {
+    const widgetFeatureId = optionalFeatureWidgetFeatureId(key);
+    if (widgetFeatureId && !isOptionalFeatureEnabled(widgetFeatureId)) continue;
+    if (widgetFeatureId && key !== "todo-progress") continue;
     const lines = Array.isArray(value.widgetLines) ? value.widgetLines : [];
-    const specialized = key === "todo-progress" ? renderTodoProgressWidget(key, lines) : null;
+    const specialized = key === "todo-progress" && isOptionalFeatureEnabled("todoProgressWidget") ? renderTodoProgressWidget(key, lines) : null;
     if (specialized) {
       elements.widgetArea.append(specialized);
       continue;
@@ -2424,6 +3076,11 @@ function failGitWorkflow(error, step = gitWorkflow.step) {
 }
 
 function startGitWorkflow() {
+  if (!isOptionalFeatureEnabled("gitWorkflow")) {
+    addEvent(commandUnavailableMessage("git-staged-msg"), "warn");
+    refreshCommands().catch((error) => addEvent(error.message || String(error), "error"));
+    return;
+  }
   if (gitWorkflow.active && !["done", "cancelled", "error"].includes(gitWorkflow.step) && !confirm("Restart the active git workflow?")) return;
   gitWorkflow.runId += 1;
   setGitWorkflow({
@@ -2864,6 +3521,14 @@ function assistantThinkingText(part) {
   return typeof part.content === "string" ? part.content : "";
 }
 
+function isAssistantToolCallPart(part) {
+  return !!(part && typeof part === "object" && (part.type === "toolCall" || part.toolCall));
+}
+
+function assistantHasToolCallAfter(content, index) {
+  return Array.isArray(content) && content.slice(index + 1).some(isAssistantToolCallPart);
+}
+
 function assistantToolCallName(part) {
   return String(part?.name || part?.toolName || part?.toolCall?.name || "unknown");
 }
@@ -2900,14 +3565,15 @@ function assistantDisplayMessages(message) {
 
   const displayMessages = [];
   const finalParts = [];
-  for (const part of content) {
+  for (let index = 0; index < content.length; index += 1) {
+    const part = content[index];
     const isThinkingPart = part && typeof part === "object" && (part.type === "thinking" || typeof part.thinking === "string");
     if (isThinkingPart) {
       const thinking = assistantThinkingText(part) || "No thinking content was exposed by the provider.";
       displayMessages.push({ ...base, role: "thinking", title: "thinking", content: thinking, thinking });
       continue;
     }
-    if (part?.type === "toolCall") {
+    if (isAssistantToolCallPart(part)) {
       const toolName = assistantToolCallName(part);
       const args = assistantToolCallArguments(part);
       displayMessages.push({ ...base, role: "toolCall", title: `tool call: ${toolName}`, toolName, arguments: args, content: args });
@@ -2915,7 +3581,7 @@ function assistantDisplayMessages(message) {
     }
     const finalPart = assistantFinalOutputPart(part);
     if (finalPart) {
-      finalParts.push(finalPart);
+      if (!assistantHasToolCallAfter(content, index)) finalParts.push(finalPart);
       continue;
     }
     if (part !== undefined && part !== null) {
@@ -3078,6 +3744,15 @@ function updateStickyUserPromptButton() {
   );
 }
 
+function toolResultPreviewText(message, lineLimit = 10) {
+  const text = textFromContent(message?.content).replace(/\s+$/g, "");
+  if (!text) return "(empty tool result)";
+  const lines = text.split(/\r?\n/);
+  const preview = lines.slice(0, lineLimit).join("\n");
+  const remaining = Math.max(0, lines.length - lineLimit);
+  return remaining > 0 ? `${preview}\n… ${remaining} more line${remaining === 1 ? "" : "s"}; expand for full output` : preview;
+}
+
 function jumpToStickyUserPrompt() {
   const button = elements.stickyUserPromptButton;
   const index = Number(button?.dataset.messageIndex);
@@ -3092,10 +3767,10 @@ function jumpToStickyUserPrompt() {
   requestAnimationFrame(updateStickyUserPromptButton);
 }
 
-function appendMessage(message, { streaming = false, messageIndex = -1, transient = false } = {}) {
+function appendMessage(message, { streaming = false, messageIndex = -1, transient = false, animateEntry = false } = {}) {
   const role = String(message.role || "message");
   const safeRole = role.replace(/[^a-z0-9_-]/gi, "");
-  const bubble = make("article", `message ${safeRole}${message.level ? ` ${message.level}` : ""}${streaming ? " streaming" : ""}`);
+  const bubble = make("article", `message ${safeRole}${message.level ? ` ${message.level}` : ""}${streaming ? " streaming" : ""}${animateEntry ? " action-enter" : ""}`);
   if (!transient && messageIndex >= 0) {
     bubble.dataset.messageIndex = String(messageIndex);
     if (role === "user") bubble.dataset.userPrompt = "true";
@@ -3115,7 +3790,8 @@ function appendMessage(message, { streaming = false, messageIndex = -1, transien
     renderContent(body, message.content);
     if (message.isError) bubble.classList.add("error");
   } else if (message.role === "thinking") {
-    appendText(body, message.thinking || textFromContent(message.content) || "No thinking content was exposed by the provider.", "thinking-text");
+    const thinkingText = message.thinking || textFromContent(message.content);
+    if (thinkingText || !streaming) appendText(body, thinkingText || "No thinking content was exposed by the provider.", "thinking-text");
   } else if (message.role === "toolCall") {
     appendText(body, JSON.stringify(message.arguments ?? message.content ?? {}, null, 2), "code-block");
   } else if (message.role === "assistantEvent") {
@@ -3129,6 +3805,11 @@ function appendMessage(message, { streaming = false, messageIndex = -1, transien
     if (message.isError) details.open = true;
     details.append(header, body);
     bubble.append(details);
+    if (message.role === "toolResult" && !message.isError) {
+      const preview = make("div", "tool-result-preview");
+      appendText(preview, toolResultPreviewText(message, 10), "code-block tool-result-preview-text");
+      bubble.append(preview);
+    }
   } else {
     bubble.append(header, body);
   }
@@ -3137,9 +3818,9 @@ function appendMessage(message, { streaming = false, messageIndex = -1, transien
   return { bubble, body };
 }
 
-function appendTranscriptMessage(message, { streaming = false, messageIndex = -1, transient = false } = {}) {
+function appendTranscriptMessage(message, { streaming = false, messageIndex = -1, transient = false, animateEntry = false } = {}) {
   if (streaming || transient || message?.role !== "assistant") {
-    return appendMessage(message, { streaming, messageIndex, transient });
+    return appendMessage(message, { streaming, messageIndex, transient, animateEntry });
   }
 
   let finalOutput = null;
@@ -3149,6 +3830,7 @@ function appendTranscriptMessage(message, { streaming = false, messageIndex = -1
       streaming: false,
       messageIndex: displayMessage.role === "assistant" ? messageIndex : -1,
       transient: false,
+      animateEntry: animateEntry && isActionTranscriptMessage(displayMessage),
     });
     if (displayMessage.role === "assistant") finalOutput = created;
   });
@@ -3199,7 +3881,7 @@ function formatRunIndicatorElapsed() {
 
 function runIndicatorHeadline() {
   if (currentState?.isCompacting && !currentState?.isStreaming) return "Pi is compacting context:";
-  return "Agent is still runing: ";
+  return "Agent is running: ";
 }
 
 function runIndicatorShowsElapsed() {
@@ -3233,7 +3915,7 @@ function ensureRunIndicatorBubble() {
   if (runIndicatorBubble?.parentElement !== elements.chat) {
     runIndicatorBubble = make("article", "message runIndicator run-indicator-message streaming");
     runIndicatorBubble.setAttribute("aria-live", "polite");
-    runIndicatorBubble.setAttribute("aria-label", "Agent is still runing:");
+    runIndicatorBubble.setAttribute("aria-label", "Agent is running:");
 
     const body = make("div", "message-body");
     const row = make("div", "run-indicator-row");
@@ -3324,12 +4006,87 @@ function scheduleAbortStateChecks() {
   }
 }
 
+function messageTimestampMs(message) {
+  const timestamp = message?.timestamp;
+  const date = typeof timestamp === "number" ? new Date(timestamp) : new Date(String(timestamp || ""));
+  const time = date.getTime();
+  return Number.isFinite(time) ? time : 0;
+}
+
+function isActionTranscriptMessage(message) {
+  return ["assistantEvent", "bashExecution", "toolCall", "toolResult"].includes(message?.role);
+}
+
+function assistantMessageHasActionContent(message) {
+  return message?.role === "assistant" && Array.isArray(message.content) && message.content.some(isAssistantToolCallPart);
+}
+
+function isActionEntryItem(item) {
+  return isActionTranscriptMessage(item?.message) || assistantMessageHasActionContent(item?.message);
+}
+
+function actionEntrySeenKeys(tabId = activeTabId) {
+  if (!tabId) return new Set();
+  let keys = actionEntrySeenKeysByTab.get(tabId);
+  if (!keys) {
+    keys = new Set();
+    actionEntrySeenKeysByTab.set(tabId, keys);
+  }
+  return keys;
+}
+
+function actionEntryKey(item) {
+  const message = item?.message || {};
+  return [
+    item?.transient ? "transient" : "message",
+    item?.messageIndex ?? -1,
+    message.role || "message",
+    message.toolName || "",
+    message.command || "",
+    message.title || "",
+    message.timestamp || "",
+    textFromContent(message.content).slice(0, 240),
+  ].join("|");
+}
+
+function shouldAnimateActionEntry(item) {
+  if (!activeTabId || !actionEntryAnimationPrimedTabs.has(activeTabId) || !isActionEntryItem(item)) return false;
+  return !actionEntrySeenKeys(activeTabId).has(actionEntryKey(item));
+}
+
+function rememberActionEntries(items) {
+  if (!activeTabId) return;
+  const keys = actionEntrySeenKeys(activeTabId);
+  for (const item of items) {
+    if (isActionEntryItem(item)) keys.add(actionEntryKey(item));
+  }
+  actionEntryAnimationPrimedTabs.add(activeTabId);
+}
+
+function orderedTranscriptItems() {
+  const items = [];
+  latestMessages.forEach((message, index) => {
+    items.push({ message, messageIndex: index, transient: false, timestampMs: messageTimestampMs(message), order: index });
+  });
+  transientMessages.forEach((message, index) => {
+    items.push({ message, messageIndex: index, transient: true, timestampMs: messageTimestampMs(message), order: latestMessages.length + index });
+  });
+  return items.sort((a, b) => a.timestampMs - b.timestampMs || a.order - b.order);
+}
+
 function renderAllMessages({ preserveScroll = false } = {}) {
   const shouldFollow = !preserveScroll && (autoFollowChat || isChatNearBottom());
   const previousScrollTop = elements.chat.scrollTop;
   resetChatOutput();
-  latestMessages.forEach((message, index) => appendTranscriptMessage(message, { messageIndex: index }));
-  transientMessages.forEach((message, index) => appendTranscriptMessage(message, { messageIndex: index, transient: true }));
+  const transcriptItems = orderedTranscriptItems();
+  for (const item of transcriptItems) {
+    appendTranscriptMessage(item.message, {
+      messageIndex: item.messageIndex,
+      transient: item.transient,
+      animateEntry: shouldAnimateActionEntry(item),
+    });
+  }
+  rememberActionEntries(transcriptItems);
   renderRunIndicator({ scroll: false });
   updateStickyUserPromptButton();
   if (shouldFollow) scrollChatToBottom({ force: true });
@@ -3353,6 +4110,21 @@ function addTransientMessage({ role = "notice", title, content, level = "info" }
   renderAllMessages();
 }
 
+function addAbortTranscriptNotice({ activeRun = false, errorMessage = "" } = {}) {
+  if (errorMessage) {
+    addTransientMessage({ role: "error", title: "Abort failed", content: `Abort request failed: ${errorMessage}`, level: "error" });
+    return;
+  }
+  addTransientMessage({
+    role: "native",
+    title: activeRun ? "Agent aborted" : "Abort requested",
+    content: activeRun
+      ? "⛔ Agent run aborted by user from the Web UI. Pi was told to stop; this transcript marks the run as aborted."
+      : "⛔ Abort requested from the Web UI, but no active agent run was visible in this tab.",
+    level: activeRun ? "warn" : "info",
+  });
+}
+
 function isChatNearBottom() {
   const remaining = elements.chat.scrollHeight - elements.chat.scrollTop - elements.chat.clientHeight;
   return remaining <= CHAT_BOTTOM_THRESHOLD_PX;
@@ -3457,6 +4229,199 @@ function sendPromptFromModeButton(kind, button) {
   sendPrompt(kind);
 }
 
+function setPublishMenuOpen(open) {
+  publishMenuOpen = !!open;
+  elements.publishButton.setAttribute("aria-expanded", publishMenuOpen ? "true" : "false");
+  elements.publishButton.classList.toggle("menu-open", publishMenuOpen);
+  elements.publishButton.parentElement?.classList.toggle("open", publishMenuOpen);
+}
+
+function optionalFeatureIdForCommand(name) {
+  if (OPTIONAL_COMMAND_FEATURES.has(name)) return OPTIONAL_COMMAND_FEATURES.get(name);
+  if (name === "release-toggle" || name === "release-abort" || name === "release-npm-logs") return "releaseNpm";
+  if (name === "release-aur" || name.startsWith("release-aur-")) return "releaseAur";
+  if (name === "stats" || name.startsWith("stats-") || name === "calibrate") return "statsCommand";
+  return null;
+}
+
+function isCommandVisible(command) {
+  const featureId = optionalFeatureIdForCommand(command.name);
+  return !featureId || isOptionalFeatureEnabled(featureId);
+}
+
+function visibleCommands() {
+  return availableCommands.filter(isCommandVisible);
+}
+
+function hasAvailableCommand(name) {
+  return availableCommands.some((command) => command.name === name);
+}
+
+function optionalFeatureUnavailableMessage(featureId) {
+  const feature = OPTIONAL_FEATURE_BY_ID.get(featureId);
+  if (!feature) return "Optional feature unavailable.";
+  if (isOptionalFeatureDisabled(featureId)) return `${feature.label} is disabled in the Web UI optional-features panel.`;
+  return `${feature.label} unavailable: ${feature.capabilityLabel} is not loaded. Install or enable ${feature.packageName}.`;
+}
+
+function setOptionalControlState(button, available, unavailableTitle) {
+  if (!button) return;
+  if (!button.dataset.defaultTitle) button.dataset.defaultTitle = button.getAttribute("title") || "";
+  button.disabled = !available;
+  button.setAttribute("aria-disabled", available ? "false" : "true");
+  button.classList.toggle("feature-unavailable", !available);
+  button.setAttribute("title", available ? button.dataset.defaultTitle : unavailableTitle);
+}
+
+function resetOptionalFeatureAvailability() {
+  for (const key of Object.keys(optionalFeatureAvailability)) optionalFeatureAvailability[key] = false;
+  optionalFeatureAvailability.themeBundle = availableThemes.length > 0;
+  renderOptionalFeatureControls();
+}
+
+function updateOptionalFeatureAvailability() {
+  optionalFeatureAvailability.gitWorkflow = hasAvailableCommand("git-staged-msg");
+  optionalFeatureAvailability.releaseNpm = hasAvailableCommand("release-npm");
+  optionalFeatureAvailability.releaseAur = hasAvailableCommand("release-aur");
+  optionalFeatureAvailability.statsCommand = hasAvailableCommand("stats");
+  optionalFeatureAvailability.gitFooterStatus = hasAvailableCommand("git-footer-refresh") || optionalFeatureAvailability.gitFooterStatus || statusEntries.has("git-footer");
+  optionalFeatureAvailability.todoProgressWidget = hasAvailableCommand("todo-progress-status") || optionalFeatureAvailability.todoProgressWidget || widgets.has("todo-progress");
+  optionalFeatureAvailability.themeBundle = availableThemes.length > 0;
+  renderOptionalFeatureControls();
+}
+
+function optionalFeatureStatus(featureId) {
+  const detected = isOptionalFeatureDetected(featureId);
+  const disabled = isOptionalFeatureDisabled(featureId);
+  if (detected && !disabled) return { label: "Enabled", className: "enabled", detail: "Detected and enabled in Web UI" };
+  if (detected && disabled) return { label: "Disabled", className: "disabled", detail: "Detected, but disabled in Web UI" };
+  return { label: "Install needed", className: "missing", detail: "Not detected in the active Pi tab" };
+}
+
+function optionalFeatureWidgetFeatureId(key) {
+  if (key.startsWith("release-npm:")) return "releaseNpm";
+  if (key.startsWith("release-aur:")) return "releaseAur";
+  if (key === "todo-progress") return "todoProgressWidget";
+  return null;
+}
+
+function renderOptionalFeaturePanel() {
+  if (!elements.optionalFeaturesBox) return;
+  elements.optionalFeaturesBox.replaceChildren();
+  elements.optionalFeaturesBox.classList.remove("muted");
+
+  for (const feature of OPTIONAL_FEATURES) {
+    const detected = isOptionalFeatureDetected(feature.id);
+    const enabled = isOptionalFeatureEnabled(feature.id);
+    const installing = optionalFeatureInstallInProgress.has(feature.id);
+    const status = optionalFeatureStatus(feature.id);
+    const row = make("div", `optional-feature-row ${status.className}`);
+
+    const main = make("div", "optional-feature-main");
+    const title = make("div", "optional-feature-title");
+    title.append(make("strong", undefined, feature.label), make("span", `optional-feature-pill ${status.className}`, status.label));
+    const detail = make("div", "optional-feature-detail", `${status.detail} · checks ${feature.capabilityLabel}`);
+    const description = make("div", "optional-feature-description", feature.description);
+    const packageLine = make("code", "optional-feature-package", feature.packageName);
+    main.append(title, detail, description, packageLine);
+
+    const action = make("button", "optional-feature-action");
+    action.type = "button";
+    action.disabled = installing;
+    if (installing) {
+      action.textContent = "Installing…";
+    } else if (detected) {
+      action.textContent = enabled ? "Disable" : "Enable";
+      action.addEventListener("click", () => setOptionalFeatureDisabled(feature.id, enabled));
+    } else {
+      action.textContent = "Install…";
+      action.classList.add("install");
+      action.addEventListener("click", () => installOptionalFeature(feature.id));
+    }
+
+    row.append(main, action);
+    elements.optionalFeaturesBox.append(row);
+  }
+}
+
+function renderOptionalFeatureControls() {
+  setOptionalControlState(
+    elements.gitWorkflowButton,
+    isOptionalFeatureEnabled("gitWorkflow"),
+    optionalFeatureUnavailableMessage("gitWorkflow"),
+  );
+
+  elements.releaseNpmButton.hidden = !isOptionalFeatureEnabled("releaseNpm");
+  elements.releaseAurButton.hidden = !isOptionalFeatureEnabled("releaseAur");
+  const hasPublishWorkflow = isOptionalFeatureEnabled("releaseNpm") || isOptionalFeatureEnabled("releaseAur");
+  const publishContainer = elements.publishButton.parentElement;
+  if (publishContainer) publishContainer.hidden = !hasPublishWorkflow;
+  setOptionalControlState(
+    elements.publishButton,
+    hasPublishWorkflow,
+    "Publish workflows unavailable: enable/install NPM Release and/or AUR Release in Optional features.",
+  );
+  if (!hasPublishWorkflow && publishMenuOpen) setPublishMenuOpen(false);
+
+  renderOptionalFeaturePanel();
+}
+
+function commandUnavailableMessage(commandName) {
+  const featureId = optionalFeatureIdForCommand(commandName);
+  if (featureId) return optionalFeatureUnavailableMessage(featureId);
+  return `Command unavailable: /${commandName} is not loaded in the active Pi tab.`;
+}
+
+async function installOptionalFeature(featureId) {
+  const feature = OPTIONAL_FEATURE_BY_ID.get(featureId);
+  if (!feature || optionalFeatureInstallInProgress.has(featureId)) return;
+
+  const warning = [
+    `Install optional feature: ${feature.label}?`,
+    "",
+    `This will run npm install for ${feature.packageName} in the Web UI package install root.`,
+    "It can download code from npm and modify the local Pi/Web UI npm installation.",
+    "If this feature is already installed but disabled in Pi settings, cancel and enable it there instead.",
+    "",
+    "Continue?",
+  ].join("\n");
+  if (!confirm(warning)) return;
+
+  optionalFeatureInstallInProgress.add(featureId);
+  renderOptionalFeatureControls();
+  addEvent(`installing optional feature ${feature.label} (${feature.packageName})…`, "warn");
+  try {
+    const response = await api("/api/optional-feature-install", { method: "POST", body: { featureId }, scoped: false });
+    disabledOptionalFeatures.delete(featureId);
+    storeDisabledOptionalFeatures();
+    addEvent(response.data?.message || `installed ${feature.packageName}`, "info");
+    if (confirm(`${feature.label} install finished. Reload the active Pi tab now to enable newly loaded resources?`)) {
+      sendPrompt("prompt", "/reload");
+    } else {
+      await Promise.allSettled([refreshCommands(), initializeThemes()]);
+      renderOptionalFeatureControls();
+    }
+  } catch (error) {
+    addEvent(error.message || String(error), "error");
+  } finally {
+    optionalFeatureInstallInProgress.delete(featureId);
+    renderOptionalFeatureControls();
+  }
+}
+
+function runPublishWorkflow(command) {
+  setComposerActionsOpen(false);
+  setPublishMenuOpen(false);
+  const commandName = String(command || "").replace(/^\//, "").split(/\s+/)[0];
+  const featureId = OPTIONAL_COMMAND_FEATURES.get(commandName);
+  if ((featureId && !isOptionalFeatureEnabled(featureId)) || !hasAvailableCommand(commandName)) {
+    addEvent(commandUnavailableMessage(commandName), "warn");
+    refreshCommands().catch((error) => addEvent(error.message || String(error), "error"));
+    return;
+  }
+  sendPrompt("prompt", command);
+}
+
 function shouldSendPromptFromEnter(event) {
   if (event.key !== "Enter" || event.shiftKey || event.isComposing) return false;
   if (event.ctrlKey || event.metaKey) return true;
@@ -3471,11 +4436,68 @@ function renderMessages(messages) {
   renderFeedbackTray();
 }
 
+function cancelStreamBubbleHide() {
+  clearTimeout(streamBubbleHideTimer);
+  streamBubbleHideTimer = null;
+}
+
+function cancelStreamingAssistantTextRender() {
+  clearTimeout(streamTextRenderTimer);
+  streamTextRenderTimer = null;
+}
+
+function removeStreamBubble() {
+  cancelStreamingAssistantTextRender();
+  cancelStreamBubbleHide();
+  streamBubble?.remove();
+  streamBubble = null;
+  streamText = null;
+  streamBubbleVisibleSince = 0;
+  renderRunIndicator({ scroll: false });
+}
+
+function scheduleStreamBubbleHide() {
+  if (!streamBubble) return;
+  const visibleForMs = streamBubbleVisibleSince ? performance.now() - streamBubbleVisibleSince : STREAM_OUTPUT_MIN_VISIBLE_MS;
+  const delayMs = Math.max(STREAM_OUTPUT_HIDE_DELAY_MS, STREAM_OUTPUT_MIN_VISIBLE_MS - visibleForMs);
+  clearTimeout(streamBubbleHideTimer);
+  streamBubbleHideTimer = setTimeout(() => {
+    streamBubbleHideTimer = null;
+    if (stripTodoProgressLines(streamRawText, { streaming: true }) || !streamBubble) return;
+    removeStreamBubble();
+  }, delayMs);
+}
+
+function renderStreamingAssistantText() {
+  const assistantText = stripTodoProgressLines(streamRawText, { streaming: true });
+  if (assistantText) {
+    ensureStreamBubble();
+    streamText.textContent = assistantText;
+  } else {
+    scheduleStreamBubbleHide();
+  }
+}
+
+function scheduleStreamingAssistantTextRender() {
+  if (streamTextRenderTimer) return;
+  streamTextRenderTimer = setTimeout(() => {
+    streamTextRenderTimer = null;
+    renderStreamingAssistantText();
+  }, STREAM_OUTPUT_TOOLCALL_GUARD_MS);
+}
+
+function suppressStreamingAssistantTextBeforeToolCall() {
+  streamRawText = "";
+  removeStreamBubble();
+}
+
 function ensureStreamBubble() {
+  cancelStreamBubbleHide();
   if (streamBubble) return;
   const created = appendMessage({ role: "assistant", title: "Assistant", timestamp: Date.now(), content: "" }, { streaming: true });
   streamBubble = created.bubble;
   streamText = appendText(created.body, "");
+  streamBubbleVisibleSince = performance.now();
   renderRunIndicator({ scroll: false });
   scrollChatToBottom();
 }
@@ -3495,9 +4517,13 @@ function showStreamingThinking(placeholder = "Thinking…") {
 }
 
 function resetStreamBubble() {
+  cancelStreamingAssistantTextRender();
+  cancelStreamBubbleHide();
   streamBubble = null;
   streamText = null;
   streamRawText = "";
+  streamBubbleVisibleSince = 0;
+  streamToolCallSeen = false;
   streamThinkingBubble = null;
   streamThinking = null;
 }
@@ -3516,9 +4542,13 @@ function assistantTextFromMessage(message) {
   const content = message?.content;
   if (typeof content === "string") return content;
   if (!Array.isArray(content)) return null;
-  const parts = content
-    .filter((part) => part && typeof part === "object" && part.type === "text" && typeof part.text === "string")
-    .map((part) => part.text);
+  const parts = [];
+  for (let index = 0; index < content.length; index += 1) {
+    const part = content[index];
+    if (part && typeof part === "object" && part.type === "text" && typeof part.text === "string" && !assistantHasToolCallAfter(content, index)) {
+      parts.push(part.text);
+    }
+  }
   return parts.length ? parts.join("\n\n") : "";
 }
 
@@ -3574,20 +4604,14 @@ function handleMessageUpdate(event) {
     if (typeof partialText === "string") streamRawText = partialText;
     else if (update.type === "text_end" && typeof update.content === "string") streamRawText = update.content;
     else streamRawText += delta;
-    const assistantText = stripTodoProgressLines(streamRawText, { streaming: true });
     setRunIndicatorActivity("Writing response…", { scroll: false });
-    if (assistantText) {
-      ensureStreamBubble();
-      streamText.textContent = assistantText;
-    } else if (streamBubble) {
-      streamBubble.remove();
-      streamBubble = null;
-      streamText = null;
-      renderRunIndicator({ scroll: false });
-    }
+    if (streamToolCallSeen || streamBubble) renderStreamingAssistantText();
+    else scheduleStreamingAssistantTextRender();
     renderFooter();
     scrollChatToBottom();
   } else if (update.type === "toolcall_start") {
+    streamToolCallSeen = true;
+    suppressStreamingAssistantTextBeforeToolCall();
     const name = runIndicatorToolName(update.name || update.toolName || update.toolCall?.name);
     setRunIndicatorActivity(`Preparing tool call: ${name}…`);
     addEvent(`tool call started in assistant message`, "info");
@@ -3839,7 +4863,7 @@ function scoreCommandSuggestion(command, query) {
 }
 
 function getCommandMatches(query) {
-  return availableCommands
+  return visibleCommands()
     .map((command) => ({ command, score: scoreCommandSuggestion(command, query) }))
     .filter((item) => Number.isFinite(item.score))
     .sort((a, b) => a.score - b.score || a.command.name.localeCompare(b.command.name))
@@ -3858,12 +4882,14 @@ function abortPathSuggestionRequest() {
 
 function cancelPathSuggestionRequest() {
   pathSuggestRequestSerial++;
+  pathSuggestActiveQuery = null;
   abortPathSuggestionRequest();
 }
 
 function hideCommandSuggestions() {
   cancelPathSuggestionRequest();
   elements.commandSuggest.hidden = true;
+  elements.commandSuggest.removeAttribute("aria-busy");
   elements.commandSuggest.replaceChildren();
   commandSuggestions = [];
   pathSuggestions = [];
@@ -3884,6 +4910,33 @@ function setActiveCommandSuggestion(index) {
   }
 }
 
+function pointerPositionFromEvent(event) {
+  if (!Number.isFinite(event.clientX) || !Number.isFinite(event.clientY)) return null;
+  return { x: event.clientX, y: event.clientY };
+}
+
+function rememberPointerPosition(event) {
+  lastPointerPosition = pointerPositionFromEvent(event);
+}
+
+function commandSuggestionPointerActuallyMoved(event) {
+  const movementX = Number.isFinite(event.movementX) ? event.movementX : 0;
+  const movementY = Number.isFinite(event.movementY) ? event.movementY : 0;
+  if (movementX !== 0 || movementY !== 0) return true;
+
+  const position = pointerPositionFromEvent(event);
+  return Boolean(
+    position &&
+      lastPointerPosition &&
+      (position.x !== lastPointerPosition.x || position.y !== lastPointerPosition.y),
+  );
+}
+
+function setActiveCommandSuggestionFromPointerMove(index, event) {
+  if (!commandSuggestionPointerActuallyMoved(event)) return;
+  setActiveCommandSuggestion(index);
+}
+
 function renderCommandSuggestionItems(trigger, { keepIndex = false } = {}) {
   suggestionMode = "command";
   pathSuggestions = [];
@@ -3901,7 +4954,7 @@ function renderCommandSuggestionItems(trigger, { keepIndex = false } = {}) {
     item.type = "button";
     item.setAttribute("role", "option");
     item.addEventListener("mousedown", (event) => event.preventDefault());
-    item.addEventListener("mouseenter", () => setActiveCommandSuggestion(index));
+    item.addEventListener("pointermove", (event) => setActiveCommandSuggestionFromPointerMove(index, event));
     item.addEventListener("click", () => insertCommandSuggestion(index));
 
     item.append(
@@ -3943,7 +4996,7 @@ function renderPathSuggestionItems(trigger, { keepIndex = false } = {}) {
     item.type = "button";
     item.setAttribute("role", "option");
     item.addEventListener("mousedown", (event) => event.preventDefault());
-    item.addEventListener("mouseenter", () => setActiveCommandSuggestion(index));
+    item.addEventListener("pointermove", (event) => setActiveCommandSuggestionFromPointerMove(index, event));
     item.addEventListener("click", () => insertPathSuggestion(index));
 
     item.append(
@@ -3959,15 +5012,25 @@ function renderPathSuggestionItems(trigger, { keepIndex = false } = {}) {
 }
 
 async function renderPathSuggestions(trigger, { keepIndex = false } = {}) {
+  if (suggestionMode === "path" && pathSuggestActiveQuery === trigger.query && !elements.commandSuggest.hidden) {
+    if (keepIndex && activeSuggestionCount() > 0) setActiveCommandSuggestion(commandSuggestIndex);
+    return;
+  }
+
+  const keepExistingPathMenu = suggestionMode === "path" && !elements.commandSuggest.hidden && elements.commandSuggest.childElementCount > 0;
   abortPathSuggestionRequest();
   const requestSerial = ++pathSuggestRequestSerial;
   const controller = new AbortController();
+  pathSuggestActiveQuery = trigger.query;
   pathSuggestAbortController = controller;
   suggestionMode = "path";
   commandSuggestions = [];
-  pathSuggestions = [];
-  elements.commandSuggest.replaceChildren(make("div", "command-suggest-empty", "Finding paths…"));
+  if (!keepExistingPathMenu) {
+    pathSuggestions = [];
+    elements.commandSuggest.replaceChildren(make("div", "command-suggest-empty", "Finding paths…"));
+  }
   elements.commandSuggest.hidden = false;
+  elements.commandSuggest.setAttribute("aria-busy", "true");
 
   try {
     const response = await api(`/api/path-suggestions?query=${encodeURIComponent(trigger.query)}`, { signal: controller.signal });
@@ -3980,7 +5043,10 @@ async function renderPathSuggestions(trigger, { keepIndex = false } = {}) {
     elements.commandSuggest.replaceChildren(make("div", "command-suggest-empty", `Path suggestions unavailable: ${error.message}`));
     elements.commandSuggest.hidden = false;
   } finally {
-    if (requestSerial === pathSuggestRequestSerial) pathSuggestAbortController = null;
+    if (requestSerial === pathSuggestRequestSerial) {
+      pathSuggestAbortController = null;
+      elements.commandSuggest.removeAttribute("aria-busy");
+    }
   }
 }
 
@@ -4064,6 +5130,7 @@ function insertPathSuggestion(index = commandSuggestIndex) {
 async function refreshCommands() {
   const response = await api("/api/commands");
   availableCommands = normalizeCommands(response.data?.commands || []);
+  updateOptionalFeatureAvailability();
   elements.commandsBox.replaceChildren();
   if (!availableCommands.length) {
     elements.commandsBox.textContent = "No RPC-visible commands.";
@@ -4071,8 +5138,15 @@ async function refreshCommands() {
     hideCommandSuggestions();
     return;
   }
+  const commandsToShow = visibleCommands();
+  if (!commandsToShow.length) {
+    elements.commandsBox.textContent = "No enabled commands visible. Re-enable optional features to show their commands.";
+    elements.commandsBox.classList.add("muted");
+    hideCommandSuggestions();
+    return;
+  }
   elements.commandsBox.classList.remove("muted");
-  for (const command of availableCommands.slice(0, 80)) {
+  for (const command of commandsToShow.slice(0, 80)) {
     const item = make("button", "command-item");
     item.type = "button";
     item.title = `Send /${command.name}`;
@@ -4265,11 +5339,13 @@ function handleExtensionUiRequest(request) {
     case "setStatus":
       if (request.statusText) statusEntries.set(request.statusKey || "extension", request.statusText);
       else statusEntries.delete(request.statusKey || "extension");
+      updateOptionalFeatureAvailability();
       renderStatus();
       return;
     case "setWidget":
       if (Array.isArray(request.widgetLines)) widgets.set(request.widgetKey || request.id, request);
       else widgets.delete(request.widgetKey || request.id);
+      updateOptionalFeatureAvailability();
       renderWidgets();
       return;
     case "setTitle":
@@ -4330,11 +5406,16 @@ function showNextDialog() {
   const request = activeDialog;
 
   const prompt = normalizeDialogPrompt(request);
-  const isGuardrailDialog = isGuardrailDialogPrompt(prompt);
+  const releasePrompt = request.method === "select" ? releaseDialogPromptParts(prompt) : null;
+  const displayPrompt = releasePrompt || prompt;
+  const isGuardrailDialog = isGuardrailDialogPrompt(displayPrompt);
+  const isReleaseDialog = !!releasePrompt;
   elements.dialog.classList.toggle("guardrail-dialog", isGuardrailDialog);
-  elements.dialogTitle.textContent = prompt.title;
-  renderAnsiText(elements.dialogMessage, prompt.message);
-  elements.dialogMessage.hidden = !prompt.plainMessage;
+  elements.dialog.classList.toggle("release-dialog", isReleaseDialog);
+  elements.dialogTitle.textContent = displayPrompt.title;
+  if (isReleaseDialog) renderReleaseDialogMessage(elements.dialogMessage, displayPrompt.message);
+  else renderAnsiText(elements.dialogMessage, displayPrompt.message);
+  elements.dialogMessage.hidden = !displayPrompt.plainMessage;
   elements.dialogBody.replaceChildren();
   elements.dialogActions.replaceChildren();
 
@@ -4348,6 +5429,8 @@ function showNextDialog() {
       button.type = "button";
       if (isGuardrailDialog && /^Block$/i.test(optionLabel)) button.classList.add("guardrail-safe-action");
       if (isGuardrailDialog && /^Allow/i.test(optionLabel)) button.classList.add("guardrail-allow-action");
+      if (isReleaseDialog && /^Yes$/i.test(optionLabel)) button.classList.add("primary", "release-publish-action");
+      if (isReleaseDialog && /^No$/i.test(optionLabel)) button.classList.add("release-cancel-action");
       button.addEventListener("click", () => sendDialogResponse({ type: "extension_ui_response", id: request.id, value: optionLabel, tabId: request.tabId }));
       options.append(button);
     }
@@ -4402,6 +5485,11 @@ function handleEvent(event) {
     case "webui_tab_reloaded":
       addEvent(`${event.tabTitle || "terminal"} reloaded`);
       addTransientMessage({ role: "native", title: "/reload", content: `${event.tabTitle || "terminal"} reloaded. Keybindings, extensions, skills, prompts, and themes were refreshed by restarting the RPC tab${event.sessionFile ? ` and resuming ${event.sessionFile}` : ""}.`, level: "info" });
+      statusEntries.clear();
+      widgets.clear();
+      resetOptionalFeatureAvailability();
+      renderStatus();
+      renderWidgets();
       refreshTabs().catch((error) => addEvent(error.message, "error"));
       setTimeout(() => refreshAll().catch((error) => addEvent(error.message, "error")), 500);
       break;
@@ -4459,6 +5547,7 @@ function handleEvent(event) {
       break;
     case "agent_end":
       addEvent("agent finished");
+      notifyAgentDone(event.tabId || activeTabId, { activity: event.tabActivity, tabTitle: event.tabTitle });
       currentRunStartedAt = null;
       if (currentState) currentState = { ...currentState, isStreaming: false };
       clearRunIndicatorActivity();
@@ -4563,18 +5652,36 @@ elements.terminalTabsToggleButton.addEventListener("click", () => {
   setMobileTabsExpanded(!document.body.classList.contains("mobile-tabs-expanded"));
 });
 elements.newTabButton.addEventListener("click", () => createTerminalTab());
+elements.closeAllTabsButton.addEventListener("click", () => closeAllTerminalTabs());
 elements.gitWorkflowButton.addEventListener("click", () => {
   setComposerActionsOpen(false);
   startGitWorkflow();
 });
+const publishMenuContainer = elements.publishButton.parentElement;
+elements.publishButton.addEventListener("click", () => {
+  setPublishMenuOpen(true);
+});
+publishMenuContainer?.addEventListener("pointerenter", () => setPublishMenuOpen(true));
+publishMenuContainer?.addEventListener("pointerleave", () => setPublishMenuOpen(false));
+publishMenuContainer?.addEventListener("focusin", () => setPublishMenuOpen(true));
+publishMenuContainer?.addEventListener("focusout", () => {
+  setTimeout(() => {
+    if (!publishMenuContainer?.contains(document.activeElement)) setPublishMenuOpen(false);
+  }, 0);
+});
+elements.releaseNpmButton.addEventListener("click", () => runPublishWorkflow("/release-npm"));
+elements.releaseAurButton.addEventListener("click", () => runPublishWorkflow("/release-aur"));
 elements.gitWorkflowCancelButton.addEventListener("click", cancelGitWorkflow);
 elements.abortButton.addEventListener("click", async () => {
+  const hadActiveRun = runIndicatorIsActive();
   try {
-    if (runIndicatorIsActive()) setRunIndicatorActivity("Abort requested; checking whether Pi stopped…");
+    if (hadActiveRun) setRunIndicatorActivity("Abort requested; checking whether Pi stopped…");
     await api("/api/abort", { method: "POST", body: {} });
+    addAbortTranscriptNotice({ activeRun: hadActiveRun });
     scheduleAbortStateChecks();
   } catch (error) {
     addEvent(error.message, "error");
+    addAbortTranscriptNotice({ errorMessage: error.message });
   }
 });
 elements.newSessionButton.addEventListener("click", async () => {
@@ -4630,6 +5737,15 @@ elements.setThinkingButton.addEventListener("click", async () => {
 });
 elements.themeSelect.addEventListener("change", () => setThemeByName(elements.themeSelect.value, { persist: true, announce: true }));
 elements.openNetworkButton.addEventListener("click", openToNetwork);
+elements.agentDoneNotificationsToggle.addEventListener("change", () => {
+  setAgentDoneNotificationsEnabled(elements.agentDoneNotificationsToggle.checked, {
+    requestPermission: elements.agentDoneNotificationsToggle.checked,
+    announce: true,
+  }).catch((error) => {
+    addEvent(error.message, "error");
+    renderAgentDoneNotificationsToggle();
+  });
+});
 elements.toggleSidePanelButton.addEventListener("click", () => {
   setSidePanelCollapsed(true);
 });
@@ -4658,6 +5774,9 @@ document.addEventListener("pointerdown", (event) => {
   if (document.body.classList.contains("composer-actions-open") && !elements.composer.contains(event.target)) {
     setComposerActionsOpen(false);
   }
+  if (publishMenuOpen && !event.target?.closest?.(".composer-publish-menu")) {
+    setPublishMenuOpen(false);
+  }
   if (document.body.classList.contains("mobile-tabs-expanded") && !elements.tabBar.contains(event.target) && !elements.terminalTabsToggleButton.contains(event.target)) {
     setMobileTabsExpanded(false);
   }
@@ -4669,9 +5788,14 @@ document.addEventListener("pointermove", (event) => {
   if (openTerminalTabGroupKey && !event.target?.closest?.(".terminal-tab-group")) {
     clearOpenTerminalTabGroup(openTerminalTabGroupKey);
   }
+  rememberPointerPosition(event);
 }, { passive: true });
 window.addEventListener("keydown", (event) => {
   if (event.key !== "Escape") return;
+  if (publishMenuOpen) {
+    setPublishMenuOpen(false);
+    return;
+  }
   if (document.body.classList.contains("composer-actions-open")) {
     setComposerActionsOpen(false);
     return;
@@ -4758,10 +5882,12 @@ elements.promptInput.addEventListener("blur", () => {
 resizePromptInput();
 focusPromptInput({ defer: true });
 updateComposerModeButtons();
+updateOptionalFeatureAvailability();
 loadLastUserPromptCache();
 installViewportHandlers();
 initializeThemes().catch((error) => addEvent(`failed to load themes: ${error.message}`, "warn"));
 initializeFastPicks().catch((error) => addEvent(`failed to initialize path fast picks: ${error.message}`, "error"));
+restoreAgentDoneNotificationsSetting();
 restoreSidePanelState();
 bindMobileViewChanges();
 registerPwaServiceWorker();