@firstpick/pi-package-webui 0.4.7 → 0.4.9

package/public/app.js

@@ -24,6 +24,7 @@ const elements = {
   updateNotificationMessage: $("#updateNotificationMessage"),
   updateNotificationDetail: $("#updateNotificationDetail"),
   updateNotificationUpdateButton: $("#updateNotificationUpdateButton"),
+  updateNotificationUpdateAllButton: $("#updateNotificationUpdateAllButton"),
   updateNotificationDismissButton: $("#updateNotificationDismissButton"),
   serverOfflineCommand: $("#serverOfflineCommand"),
   serverOfflineSlashCommand: $("#serverOfflineSlashCommand"),
@@ -116,6 +117,9 @@ const elements = {
   gitChangesRefreshButton: $("#gitChangesRefreshButton"),
   gitChangesPullButton: $("#gitChangesPullButton"),
   gitChangesCloseButton: $("#gitChangesCloseButton"),
+  modelControlLabel: $("#modelControlLabel"),
+  modelSearchInput: $("#modelSearchInput"),
+  modelSearchResults: $("#modelSearchResults"),
   modelSelect: $("#modelSelect"),
   setModelButton: $("#setModelButton"),
   thinkingSelect: $("#thinkingSelect"),
@@ -124,11 +128,15 @@ const elements = {
   thinkingVisibilityStatus: $("#thinkingVisibilityStatus"),
   terminalTabsLayoutSelect: $("#terminalTabsLayoutSelect"),
   terminalTabsLayoutStatus: $("#terminalTabsLayoutStatus"),
+  themeControlLabel: $("#themeControlLabel"),
+  themeSearchInput: $("#themeSearchInput"),
+  themeSearchResults: $("#themeSearchResults"),
   themeSelect: $("#themeSelect"),
   backgroundInput: $("#backgroundInput"),
   backgroundChooseButton: $("#backgroundChooseButton"),
   backgroundClearButton: $("#backgroundClearButton"),
   backgroundStatus: $("#backgroundStatus"),
+  networkControlField: $("#networkControlField"),
   networkStatus: $("#networkStatus"),
   remoteAuthToggle: $("#remoteAuthToggle"),
   remoteAuthStatus: $("#remoteAuthStatus"),
@@ -347,6 +355,7 @@ let thinkingOutputVisible = true;
 let terminalTabsLayout = "top";
 let webuiSettings = {};
 let busyPromptBehavior = "followUp";
+let composerModeRenderSignature = "";
 let autocompleteMaxVisible = 12;
 let doubleEscapeAction = "none";
 let treeFilterMode = "default";
@@ -403,6 +412,8 @@ let abortLongPressDeadlineAt = 0;
 let abortLongPressSource = "long-press";
 let abortLongPressReleasePending = false;
 let abortLongPressHandled = false;
+let escapeAbortHoldSuppressesDoubleEscape = false;
+let suppressEmptyPromptEscapeUntil = 0;
 const dialogQueue = [];
 const SIDE_PANEL_STORAGE_KEY = "pi-webui-side-panel-collapsed";
 const SIDE_PANEL_SECTION_STORAGE_KEY = "pi-webui-side-panel-sections-collapsed";
@@ -436,6 +447,9 @@ const GIT_INIT_STACK_STORAGE_KEY = "pi-webui-git-init-stack";
 const STATS_WEBUI_STATUS_KEY = "stats-webui";
 const STATS_WEBUI_PAYLOAD_TYPE = "firstpick.pi-extension-stats.overlay";
 const STATS_WEBUI_PAYLOAD_VERSION = 1;
+const REMOTE_WEBUI_CONTROLS_STATUS_KEY = "pi-remote-webui:controls";
+const REMOTE_WEBUI_CONTROLS_PAYLOAD_TYPE = "firstpick.pi-package-remote-webui.controls";
+const REMOTE_WEBUI_CONTROLS_PAYLOAD_VERSION = 1;
 const BTW_WEBUI_STATUS_KEY = "btw-webui";
 const BTW_OUTPUT_WIDGET_KEY = "btw:output";
 const BTW_FOOTER_WIDGET_KEY = "btw:footer";
@@ -486,6 +500,7 @@ const RUN_INDICATOR_STATE_RECHECK_MS = 5000;
 const ABORT_LONG_PRESS_MS = 3000;
 const ABORT_LONG_PRESS_TICK_MS = 100;
 const ABORT_LONG_PRESS_RELEASE_GRACE_MS = 350;
+const EMPTY_PROMPT_ESCAPE_AFTER_ABORT_GRACE_MS = 1000;
 const STREAM_OUTPUT_HIDE_DELAY_MS = 300;
 const STREAM_OUTPUT_TOOLCALL_GUARD_MS = 220;
 const STREAM_OUTPUT_MIN_VISIBLE_MS = 900;
@@ -509,6 +524,7 @@ const widgets = new Map();
 const todoProgressWidgetExpandedByTab = new Map();
 const releaseNpmOutputExpandedByTab = new Map();
 const appRunnerDataByTab = new Map();
+const appRunnerInputDraftByRun = new Map();
 const liveToolRuns = new Map();
 const liveToolCards = new Map();
 const liveToolRenderQueue = new Map();
@@ -928,6 +944,37 @@ function deferChatFollowScrollDuringPointerActivation({ force = false } = {}) {
   return true;
 }
 
+function isInteractiveDropdownOpen() {
+  return Boolean(
+    document.body.classList.contains("composer-actions-open")
+      || publishMenuOpen
+      || nativeCommandMenuOpen
+      || appRunnerMenuOpen
+      || optionsMenuOpen
+      || busyPromptBehaviorMenuOpen
+      || newTabMenuOpen
+      || isFooterPickerOpen()
+      || elements.commandSuggest?.hidden === false
+      || elements.modelSearchInput?.hidden === false
+      || elements.themeSearchInput?.hidden === false,
+  );
+}
+
+function deferChatFollowScrollDuringInteractiveDropdown({ force = false } = {}) {
+  if (force || !isInteractiveDropdownOpen()) return false;
+  deferredChatFollowScroll = true;
+  return true;
+}
+
+function scheduleDeferredUiFlushAfterDropdownClose() {
+  if (!deferredChatFollowScroll && deferredUiRenderCallbacks.size === 0) return;
+  const flush = () => {
+    if (!isInteractiveDropdownOpen()) flushDeferredUiRenders();
+  };
+  if (typeof requestAnimationFrame === "function") requestAnimationFrame(flush);
+  else setTimeout(flush, 0);
+}
+
 function flushDeferredUiRenders() {
   const callbacks = [...deferredUiRenderCallbacks.values()];
   deferredUiRenderCallbacks.clear();
@@ -1949,7 +1996,10 @@ function setBusyPromptBehaviorMenuOpen(open, { focusCurrent = false } = {}) {
   elements.busyPromptBehaviorTag?.setAttribute("aria-expanded", busyPromptBehaviorMenuOpen ? "true" : "false");
   elements.busyPromptBehaviorTag?.classList.toggle("menu-open", busyPromptBehaviorMenuOpen);
   if (elements.busyPromptBehaviorMenu) elements.busyPromptBehaviorMenu.hidden = !busyPromptBehaviorMenuOpen;
-  if (!busyPromptBehaviorMenuOpen) return;
+  if (!busyPromptBehaviorMenuOpen) {
+    scheduleDeferredUiFlushAfterDropdownClose();
+    return;
+  }
   renderBusyPromptBehaviorMenu();
   if (focusCurrent) {
     requestAnimationFrame(() => {
@@ -2020,6 +2070,7 @@ function setComposerActionsOpen(open) {
     setBusyPromptBehaviorMenuOpen(false);
   }
   scheduleMobileDropdownScrollBoundsUpdate();
+  if (!shouldOpen) scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function isUserBashActive(tabId = activeTabId) {
@@ -2064,6 +2115,18 @@ function resizePromptInput() {
 function updateComposerModeButtons() {
   const runActive = isRunActive();
   const abortAvailable = isAbortAvailable();
+  const abortHoldSnapshot = isAbortLongPressActive();
+  const nextSignature = [
+    activeTabGeneration,
+    runActive ? "run" : "idle",
+    abortAvailable ? "abort" : "no-abort",
+    abortHoldSnapshot ? `hold:${abortLongPressLabel()}` : "no-hold",
+    abortRequestInFlight ? "aborting" : "ready",
+    busyPromptBehavior,
+  ].join("|");
+  if (nextSignature === composerModeRenderSignature) return;
+  composerModeRenderSignature = nextSignature;
+
   const target = runActive ? elements.composerRow : elements.composerActionsPanel;
   const before = runActive ? elements.abortButton : null;
   for (const button of [elements.steerButton, elements.followUpButton]) {
@@ -2078,9 +2141,11 @@ function updateComposerModeButtons() {
   if (abortHoldActive) {
     renderAbortLongPressAffordance();
   } else {
-    elements.abortButton.textContent = abortRequestInFlight ? "Aborting…" : "Abort";
-    elements.abortButton.title = abortAvailable ? abortButtonReadyTitle() : "Abort is available while Pi is running";
-    elements.abortButton.setAttribute("aria-label", elements.abortButton.title);
+    const abortText = abortRequestInFlight ? "Aborting…" : "Abort";
+    const abortTitle = abortAvailable ? abortButtonReadyTitle() : "Abort is available while Pi is running";
+    if (elements.abortButton.textContent !== abortText) elements.abortButton.textContent = abortText;
+    if (elements.abortButton.title !== abortTitle) elements.abortButton.title = abortTitle;
+    if (elements.abortButton.getAttribute("aria-label") !== abortTitle) elements.abortButton.setAttribute("aria-label", abortTitle);
   }
   renderBusyPromptBehaviorTag();
   document.body.classList.toggle("pi-run-active", runActive || abortAvailable);
@@ -2643,6 +2708,88 @@ function triggerNativeDownload(download) {
   return true;
 }
 
+function isStandalonePwaWindow() {
+  return window.matchMedia?.("(display-mode: standalone)")?.matches === true || window.navigator.standalone === true;
+}
+
+function alternateLoopbackBrowserUrl(value) {
+  const url = safeHttpUrl(value);
+  if (!url) return "";
+  try {
+    const parsed = new URL(url);
+    const hostname = parsed.hostname.toLowerCase();
+    if (hostname === "127.0.0.1" || hostname === "[::1]" || hostname === "::1") parsed.hostname = "localhost";
+    else if (hostname === "localhost") parsed.hostname = "127.0.0.1";
+    else return "";
+    return parsed.href;
+  } catch {
+    return "";
+  }
+}
+
+function nativeDownloadOpenUrl(download, { externalBrowser = false } = {}) {
+  const rawUrl = download?.openUrl || download?.url;
+  const url = safeHttpUrl(rawUrl);
+  if (!url) return "";
+  let openUrl = url;
+  if (!download?.openUrl) {
+    try {
+      const inlineUrl = new URL(url);
+      inlineUrl.searchParams.set("disposition", "inline");
+      openUrl = inlineUrl.href;
+    } catch {
+      openUrl = url;
+    }
+  }
+  return externalBrowser && isStandalonePwaWindow() ? alternateLoopbackBrowserUrl(openUrl) || openUrl : openUrl;
+}
+
+function openNativeDownloadInBrowser(download) {
+  const url = nativeDownloadOpenUrl(download, { externalBrowser: true });
+  if (!url) return false;
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.target = "_blank";
+  anchor.rel = "noopener";
+  anchor.hidden = true;
+  document.body.append(anchor);
+  anchor.click();
+  anchor.remove();
+  return true;
+}
+
+function openNativeExportDownloadPrompt(download) {
+  const url = nativeDownloadOpenUrl(download, { externalBrowser: true });
+  if (!url) return false;
+  const fileName = String(download?.fileName || "session export");
+  openNativeCommandDialog({ title: "/export", message: "Session export is ready." });
+  elements.nativeCommandBody.append(
+    make("p", "native-command-note", `File: ${fileName}`),
+    make("p", "native-command-note muted", "Open it in your browser, or cancel and use the transcript download URL later."),
+  );
+  elements.nativeCommandActions.replaceChildren();
+  addNativeCommandAction("Cancel", closeNativeCommandDialog);
+  addNativeCommandAction("Copy URL", async () => {
+    try {
+      await copyText(url);
+      addEvent("copied export browser URL", "info");
+    } catch (error) {
+      addEvent(`copy export URL failed: ${error.message || String(error)}`, "error");
+    }
+  });
+  addNativeCommandAction("Open in browser", () => {
+    if (openNativeDownloadInBrowser(download)) addEvent(`opened export: ${fileName}`, "info");
+    else addEvent("could not open export URL", "error");
+    closeNativeCommandDialog();
+  }, "primary");
+  return true;
+}
+
+function handleNativeDownloadResponse(download, command) {
+  if (String(command || "").toLowerCase() === "export") return openNativeExportDownloadPrompt(download);
+  return triggerNativeDownload(download);
+}
+
 async function copyServerStartCommand() {
   const command = serverStartCommandText();
   try {
@@ -2825,22 +2972,34 @@ function renderUpdateNotification(status = latestUpdateStatus, { force = false }
   }
 
   const canRunUpdate = latestUpdateStatus.canRunUpdate !== false;
+  const hasPiUpdate = !!latestUpdateStatus.pi?.updateAvailable;
+  const hasPackageUpdate = !!latestUpdateStatus.webui?.updateAvailable;
   if (elements.updateNotificationTitle) elements.updateNotificationTitle.textContent = items.length === 1 ? `${items[0]} available` : "Pi updates available";
   if (elements.updateNotificationMessage) {
-    elements.updateNotificationMessage.textContent = canRunUpdate
-      ? "Run Pi and Web UI package updates now, then restart this Web UI server automatically."
-      : "Updates are available. Direct Web UI updates are only enabled from localhost on the host machine.";
+    let message = "Updates are available. Direct Web UI updates are only enabled from localhost on the host machine.";
+    if (canRunUpdate) {
+      if (hasPiUpdate && hasPackageUpdate) message = "Run pi update for Pi only, or pi update --all to include Web UI/package updates, then restart this Web UI server automatically.";
+      else if (hasPackageUpdate) message = "Run pi update --all to update Web UI/package entries, then restart this Web UI server automatically.";
+      else message = "Run pi update for Pi only, then restart this Web UI server automatically.";
+    }
+    elements.updateNotificationMessage.textContent = message;
   }
   const details = [
     items.join(" · "),
-    latestUpdateStatus.webuiDev && latestUpdateStatus.webui?.updateAvailable ? "The current Web UI is a dev checkout; update also refreshes this checkout's Web UI/Pi package dependencies when possible." : "",
+    latestUpdateStatus.webuiDev && latestUpdateStatus.webui?.updateAvailable ? "The current Web UI is a dev checkout; pi update --all refreshes configured package dependencies when possible." : "",
     latestUpdateStatus.packages?.note || "",
   ].filter(Boolean).join(" ");
   if (elements.updateNotificationDetail) elements.updateNotificationDetail.textContent = details;
   if (elements.updateNotificationUpdateButton) {
-    elements.updateNotificationUpdateButton.hidden = !canRunUpdate;
+    elements.updateNotificationUpdateButton.hidden = !canRunUpdate || !hasPiUpdate;
     elements.updateNotificationUpdateButton.disabled = updateRequestInProgress || latestUpdateStatus.updateInProgress;
-    elements.updateNotificationUpdateButton.textContent = latestUpdateStatus.updateInProgress ? "Updating…" : "Update & restart";
+    elements.updateNotificationUpdateButton.textContent = latestUpdateStatus.updateInProgress ? "Updating…" : "Update Pi & restart";
+  }
+  if (elements.updateNotificationUpdateAllButton) {
+    elements.updateNotificationUpdateAllButton.hidden = !canRunUpdate || !hasPackageUpdate;
+    elements.updateNotificationUpdateAllButton.disabled = updateRequestInProgress || latestUpdateStatus.updateInProgress;
+    elements.updateNotificationUpdateAllButton.classList.toggle("primary", !hasPiUpdate);
+    elements.updateNotificationUpdateAllButton.textContent = latestUpdateStatus.updateInProgress ? "Updating…" : "Update all & restart";
   }
   clearTimeout(updateNotificationHideTimer);
   panel.hidden = false;
@@ -2871,30 +3030,33 @@ function initializeUpdateNotifications() {
   }, UPDATE_STATUS_INITIAL_DELAY_MS);
 }
 
-function piUpdateConfirmationText() {
+function piUpdateConfirmationText({ all = false } = {}) {
   const items = updateNotificationItems();
   const workingWarning = hasWorkingTab() ? "\n\nOne or more Pi tabs look busy or blocked. Finish or abort in-flight work before updating if you need to preserve it." : "";
   const versionText = items.length ? `\n\nDetected update: ${items.join(" · ")}.` : "";
-  return `Run Pi/Web UI package updates now?${versionText}\n\nThis will run \"pi update\" plus detected local and global Web UI/Pi package-manager updates on the Web UI host. After it finishes, Pi Web UI will restart itself. Browser clients will briefly disconnect, and managed Pi tabs/RPC processes will be restarted from saved session state when possible.${workingWarning}`;
+  const command = all ? "pi update --all" : "pi update";
+  const scope = all ? "Pi and configured package updates" : "Pi only";
+  return `Run ${scope} now?${versionText}\n\nThis will run \"${command}\" on the Web UI host. After it finishes, Pi Web UI will restart itself. Browser clients will briefly disconnect, and managed Pi tabs/RPC processes will be restarted from saved session state when possible.${workingWarning}`;
 }
 
-async function runPiUpdateAndRestart() {
+async function runPiUpdateAndRestart({ all = false } = {}) {
   if (updateRequestInProgress) return;
   if (latestUpdateStatus?.canRunUpdate === false) {
-    addEvent("Pi/Web UI package updates can only be started from localhost on the Web UI host", "warn");
+    addEvent("Pi updates can only be started from localhost on the Web UI host", "warn");
     renderUpdateNotification(latestUpdateStatus, { force: true });
     return;
   }
-  if (!confirm(piUpdateConfirmationText())) return;
+  if (!confirm(piUpdateConfirmationText({ all }))) return;
 
+  const updateLabel = all ? "Pi and package updates" : "Pi update";
   updateRequestInProgress = true;
   hideUpdateNotification();
   setServerActionBusy("Updating…");
-  setServerActionStatus("Running Pi/Web UI package updates. The server will restart after the update completes…", "warn");
-  setServerRestartOverlay(true, "Running Pi/Web UI package updates. The server will restart after the update completes…");
+  setServerActionStatus(`Running ${updateLabel}. The server will restart after the update completes…`, "warn");
+  setServerRestartOverlay(true, `Running ${updateLabel}. The server will restart after the update completes…`);
   try {
-    await api("/api/update", { method: "POST", scoped: false });
-    addEvent("Pi/Web UI package updates completed; Pi Web UI server restart requested", "warn");
+    await api(all ? "/api/update?all=1" : "/api/update", { method: "POST", scoped: false });
+    addEvent(`${updateLabel} completed; Pi Web UI server restart requested`, "warn");
   } catch (error) {
     if (!error?.backendOffline) {
       updateRequestInProgress = false;
@@ -3766,6 +3928,23 @@ function storeDisabledOptionalFeatures() {
   }
 }
 
+function reconcileDisabledOptionalFeaturesFromStorage() {
+  const nextDisabled = new Set(loadDisabledOptionalFeatures());
+  let changed = nextDisabled.size !== disabledOptionalFeatures.size;
+  if (!changed) {
+    for (const featureId of nextDisabled) {
+      if (!disabledOptionalFeatures.has(featureId)) {
+        changed = true;
+        break;
+      }
+    }
+  }
+  if (!changed) return false;
+  disabledOptionalFeatures = nextDisabled;
+  renderOptionalFeatureDependentDisplays();
+  return true;
+}
+
 function isOptionalFeatureDetected(featureId) {
   return optionalFeatureAvailability[featureId] === true;
 }
@@ -3798,6 +3977,7 @@ function setOptionalFeatureDisabled(featureId, disabled) {
   if (!OPTIONAL_FEATURE_BY_ID.has(featureId)) return;
   if (disabled) disabledOptionalFeatures.add(featureId);
   else disabledOptionalFeatures.delete(featureId);
+  if (featureId === "remoteWebui") syncRemoteWebuiControlVisibility(false);
   if (featureId === "gitFooterStatus") {
     statusEntries.delete(GIT_FOOTER_WEBUI_STATUS_KEY);
     clearGitFooterWebuiPayloadCache();
@@ -3811,6 +3991,11 @@ function setOptionalFeatureDisabled(featureId, disabled) {
     btwWidgetComposerOpen = false;
     btwWidgetInputDraft = "";
   }
+  if (featureId === "remoteWebui") {
+    statusEntries.delete(REMOTE_WEBUI_CONTROLS_STATUS_KEY);
+    statusEntries.delete("pi-remote-webui");
+    widgets.delete("pi-remote-webui");
+  }
   storeDisabledOptionalFeatures();
   renderOptionalFeatureDependentDisplays();
   const tabContext = activeTabContext();
@@ -4020,6 +4205,79 @@ function applyTheme(theme, { persist = false, announce = false } = {}) {
   if (announce) addEvent(`theme changed to ${theme.label || displayThemeName(theme.name) || theme.name}`);
 }
 
+function themeDisplayLabel(theme) {
+  return theme?.label || displayThemeName(theme?.name) || theme?.name || "";
+}
+
+function themeSearchText(theme) {
+  return [themeDisplayLabel(theme), theme?.name, theme?.author].filter(Boolean).join(" ");
+}
+
+function renderThemeSearchResults(themes = []) {
+  if (!elements.themeSearchResults) return;
+  elements.themeSearchResults.replaceChildren();
+  if (elements.themeSearchInput?.hidden) return;
+  if (!themes.length) {
+    elements.themeSearchResults.append(make("div", "model-search-empty", "No themes match the search"));
+    elements.themeSearchResults.hidden = false;
+    return;
+  }
+  for (const theme of themes) {
+    const selected = theme.name === currentThemeName;
+    const button = make("button", `model-search-result theme-search-result${selected ? " active" : ""}`);
+    button.type = "button";
+    button.setAttribute("role", "option");
+    button.setAttribute("aria-selected", String(selected));
+    button.title = themeSearchText(theme);
+    button.append(make("span", "model-search-result-main", themeDisplayLabel(theme)));
+    button.addEventListener("click", () => {
+      if (elements.themeSelect) elements.themeSelect.value = theme.name;
+      setThemeByName(theme.name, { persist: true, announce: true }).catch((error) => addEvent(error.message || String(error), "error"));
+    });
+    elements.themeSearchResults.append(button);
+  }
+  elements.themeSearchResults.hidden = false;
+}
+
+function populateThemeSelect(themes = availableThemes, query = "") {
+  if (!elements.themeSelect) return [];
+  const normalizedQuery = String(query || "").trim().toLowerCase();
+  const matchingThemes = themes.filter((theme) => !normalizedQuery || themeSearchText(theme).toLowerCase().includes(normalizedQuery));
+  renderThemeSearchResults(matchingThemes);
+  return matchingThemes;
+}
+
+function showThemeSearchInput({ focus = true } = {}) {
+  if (!elements.themeSearchInput) return;
+  elements.themeSearchInput.hidden = false;
+  elements.themeSearchResults.hidden = false;
+  elements.themeSelect.classList.add("model-select-expanded");
+  populateThemeSelect(availableThemes, elements.themeSearchInput.value);
+  if (focus) {
+    requestAnimationFrame(() => {
+      elements.themeSearchInput.focus();
+      elements.themeSearchInput.select();
+    });
+  }
+}
+
+function hideThemeSearchInput() {
+  if (!elements.themeSearchInput) return;
+  elements.themeSearchInput.hidden = true;
+  elements.themeSearchInput.value = "";
+  if (elements.themeSearchResults) {
+    elements.themeSearchResults.hidden = true;
+    elements.themeSearchResults.replaceChildren();
+  }
+  elements.themeSelect?.classList.remove("model-select-expanded");
+  scheduleDeferredUiFlushAfterDropdownClose();
+}
+
+function toggleThemeSearchInput() {
+  if (elements.themeSearchInput?.hidden) showThemeSearchInput();
+  else hideThemeSearchInput();
+}
+
 function renderThemeSelect({ unavailableLabel = "Theme bundle unavailable" } = {}) {
   if (!elements.themeSelect) return;
   elements.themeSelect.replaceChildren();
@@ -4044,6 +4302,7 @@ function renderThemeSelect({ unavailableLabel = "Theme bundle unavailable" } = {
     elements.themeSelect.append(option);
   }
   elements.themeSelect.value = currentThemeName;
+  populateThemeSelect(availableThemes, elements.themeSearchInput?.value || "");
 }
 
 async function setThemeByName(name, options = {}) {
@@ -4052,6 +4311,7 @@ async function setThemeByName(name, options = {}) {
   if (!theme) return;
   currentThemeName = theme.name;
   if (elements.themeSelect && elements.themeSelect.value !== theme.name) elements.themeSelect.value = theme.name;
+  populateThemeSelect(availableThemes, elements.themeSearchInput?.value || "");
   setCustomBackgroundRecord(null);
   customBackgroundLoading = true;
   applyTheme(theme, options);
@@ -4752,6 +5012,7 @@ function setNewTabMenuOpen(open) {
   elements.newTabButton?.setAttribute("aria-expanded", newTabMenuOpen ? "true" : "false");
   elements.newTabButton?.classList.toggle("menu-open", newTabMenuOpen);
   elements.newTabMenu?.classList.toggle("open", newTabMenuOpen);
+  if (!newTabMenuOpen) scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function openNewTabMenu() {
@@ -5978,6 +6239,57 @@ function parseGitFooterWebuiPayloadRaw(raw) {
   }
 }
 
+function parseRemoteWebuiControlsPayloadRaw(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || parsed.type !== REMOTE_WEBUI_CONTROLS_PAYLOAD_TYPE || parsed.version !== REMOTE_WEBUI_CONTROLS_PAYLOAD_VERSION) return null;
+    if (parsed.featureId !== "remoteWebui") return null;
+    const commands = parsed.commands && typeof parsed.commands === "object" ? parsed.commands : {};
+    return {
+      title: cleanFooterPayloadText(parsed.title, "Remote WebUI", 80),
+      description: cleanFooterPayloadText(parsed.description, "Trusted-LAN browser access controlled by the Remote WebUI package.", 240),
+      commands: {
+        open: typeof commands.open === "string" ? commands.open : "/remote",
+        close: typeof commands.close === "string" ? commands.close : "/remote close",
+        refresh: typeof commands.refresh === "string" ? commands.refresh : "/remote refresh",
+        status: typeof commands.status === "string" ? commands.status : "/remote status",
+        authOn: typeof commands.authOn === "string" ? commands.authOn : "/remote auth on",
+        authOff: typeof commands.authOff === "string" ? commands.authOff : "/remote auth off",
+      },
+    };
+  } catch {
+    return null;
+  }
+}
+
+function remoteWebuiControlsPayload() {
+  if (isOptionalFeatureDisabled("remoteWebui")) return null;
+  return parseRemoteWebuiControlsPayloadRaw(statusEntries.get(REMOTE_WEBUI_CONTROLS_STATUS_KEY));
+}
+
+function remoteWebuiDefaultPortArg() {
+  const port = Number.parseInt(String(latestNetwork?.port || DEFAULT_WEBUI_PORT), 10);
+  return Number.isFinite(port) && port > 0 && port <= 65535 && String(port) !== DEFAULT_WEBUI_PORT ? ` --port ${port}` : "";
+}
+
+function remoteWebuiFallbackCommand(name, fallback) {
+  const portArg = remoteWebuiDefaultPortArg();
+  const commands = {
+    open: `/remote${portArg}`,
+    close: `/remote close${portArg}`,
+    refresh: `/remote refresh${portArg}`,
+    status: `/remote status${portArg}`,
+    authOn: `/remote auth on${portArg}`,
+    authOff: `/remote auth off${portArg}`,
+  };
+  return commands[name] || fallback;
+}
+
+function remoteWebuiCommand(name, fallback) {
+  return remoteWebuiControlsPayload()?.commands?.[name] || remoteWebuiFallbackCommand(name, fallback);
+}
+
 function readCachedGitFooterWebuiPayloadRaw() {
   try {
     const cached = JSON.parse(localStorage.getItem(GIT_FOOTER_WEBUI_PAYLOAD_CACHE_KEY) || "null");
@@ -6218,29 +6530,90 @@ function renderGitFooterPayloadMeta(chip, tab) {
   return chip.contextUsage ? applyFooterContextUsage(node, chip.contextUsage) : node;
 }
 
+// Shape key for a footer chip with the frequently-changing fields removed, so
+// live streaming metrics (token counts, tok/s, cost, context %) can be updated
+// in place without tearing down the footer DOM (and any open dropdown inside it).
+function gitFooterChipShapeKey(chip) {
+  const shape = {};
+  for (const [key, value] of Object.entries(chip || {})) {
+    if (key === "value") continue;
+    if (key === "contextUsage") {
+      shape.contextUsage = value ? true : false;
+      continue;
+    }
+    shape[key] = value;
+  }
+  return JSON.stringify(shape);
+}
+
+function gitFooterPickerStateKey() {
+  return `${footerModelPickerOpen ? 1 : 0}|${footerThinkingPickerOpen ? 1 : 0}|${footerBranchPickerOpen ? 1 : 0}|${mobileFooterExpanded ? 1 : 0}`;
+}
+
+function updateGitFooterChipNodeValue(node, chip, valueSelector) {
+  if (!node) return;
+  const valueNode = node.querySelector(valueSelector);
+  if (valueNode && valueNode.textContent !== String(chip.value ?? "")) valueNode.textContent = String(chip.value ?? "");
+  if (chip.contextUsage) applyFooterContextUsage(node, chip.contextUsage);
+}
+
+let gitFooterRenderCache = null;
+
+function invalidateGitFooterRenderCache() {
+  gitFooterRenderCache = null;
+}
+
 function renderGitFooterPayload(payload) {
   const tab = activeTab();
+  const pickerKey = gitFooterPickerStateKey();
+  const mainKeys = payload.main.map(gitFooterChipShapeKey);
+  const metaKeys = payload.meta.map(gitFooterChipShapeKey);
+
+  // Fast path: only live metric values changed. Update text in place instead of
+  // rebuilding the footer so buttons do not flicker and an open dropdown is not
+  // destroyed/recreated/repositioned during streaming.
+  const cache = gitFooterRenderCache;
+  if (
+    cache &&
+    elements.statusBar.classList.contains("statusbar-git-footer") &&
+    cache.pickerKey === pickerKey &&
+    cache.mainKeys.length === mainKeys.length &&
+    cache.metaKeys.length === metaKeys.length &&
+    cache.mainKeys.every((key, index) => key === mainKeys[index]) &&
+    cache.metaKeys.every((key, index) => key === metaKeys[index]) &&
+    cache.mainNodes.every((node) => node.isConnected) &&
+    cache.metaNodes.every((node) => node.isConnected)
+  ) {
+    payload.main.forEach((chip, index) => updateGitFooterChipNodeValue(cache.mainNodes[index], chip, ".footer-metric-value"));
+    payload.meta.forEach((chip, index) => updateGitFooterChipNodeValue(cache.metaNodes[index], chip, ".footer-meta-value"));
+    if (isFooterPickerOpen()) updateFooterModelPickerPosition();
+    return;
+  }
+
   hideFooterTooltip();
   elements.statusBar.replaceChildren();
   elements.statusBar.classList.remove("statusbar-tui-footer");
   elements.statusBar.classList.add("statusbar-git-footer");
   document.body.classList.toggle("footer-model-picker-open", isFooterPickerOpen());
 
+  const mainNodes = payload.main.map(renderGitFooterPayloadMetric);
   const row1 = make("div", "footer-line footer-line-main");
-  row1.append(...payload.main.map(renderGitFooterPayloadMetric));
+  row1.append(...mainNodes);
 
   const footerToggle = make("button", "footer-details-toggle", mobileFooterExpanded ? "Less" : "Details");
   footerToggle.type = "button";
   footerToggle.setAttribute("aria-expanded", mobileFooterExpanded ? "true" : "false");
   footerToggle.addEventListener("click", () => setMobileFooterExpanded(!mobileFooterExpanded));
 
+  const metaNodes = payload.meta.map((chip) => renderGitFooterPayloadMeta(chip, tab));
   const row2 = make("div", "footer-line footer-line-meta");
-  row2.append(...payload.meta.map((chip) => renderGitFooterPayloadMeta(chip, tab)), footerToggle);
+  row2.append(...metaNodes, footerToggle);
 
   elements.statusBar.append(row1, row2);
   if (footerModelPickerOpen) elements.statusBar.append(renderFooterModelPicker());
   if (footerThinkingPickerOpen) elements.statusBar.append(renderFooterThinkingPicker());
   if (footerBranchPickerOpen) elements.statusBar.append(renderFooterBranchPicker());
+  gitFooterRenderCache = { pickerKey, mainKeys, metaKeys, mainNodes, metaNodes };
   setMobileFooterExpanded(mobileFooterExpanded);
   updateFooterModelPickerPosition();
 }
@@ -6577,9 +6950,36 @@ function renderGitUntrackedSection(untracked) {
   return wrapper;
 }
 
+function renderGitChangesFileList(parsedSections, untracked) {
+  const items = [];
+  for (const entry of parsedSections || []) {
+    for (const file of entry.files || []) {
+      items.push({ path: file.path || "diff", stats: file.statsText || `+${file.additions || 0} −${file.deletions || 0}`, section: entry.section?.label || "Diff" });
+    }
+  }
+  for (const entry of untracked || []) {
+    items.push({ path: entry.path, stats: entry.binary ? "binary" : "new", section: "Untracked" });
+  }
+  if (!items.length) return null;
+  const list = make("nav", "git-changes-file-list");
+  list.setAttribute("aria-label", "Changed files");
+  list.append(make("span", "git-changes-file-list-label", `${items.length} file${items.length === 1 ? "" : "s"}`));
+  for (const item of items) {
+    const button = make("button", "git-changes-file-jump");
+    button.type = "button";
+    button.dataset.gitChangesJumpFile = item.path;
+    button.title = `${item.section}: ${item.path}`;
+    button.append(make("span", "git-changes-file-jump-name", item.path), make("span", "git-changes-file-jump-meta", `${item.section} · ${item.stats}`));
+    list.append(button);
+  }
+  return list;
+}
+
 function renderGitCurrentFileHeader() {
-  const header = make("div", "git-current-file-header");
-  header.append(make("span", "git-current-file-label", "Current file"), make("span", "git-current-file-name", "—"));
+  const header = make("button", "git-current-file-header");
+  header.type = "button";
+  header.title = "Collapse or expand the current file diff";
+  header.append(make("span", "git-current-file-label", "Current file"), make("span", "git-current-file-name", "—"), make("span", "git-current-file-toggle", "Toggle"));
   return header;
 }
 
@@ -6606,7 +7006,10 @@ function updateGitChangesCurrentFileHeader() {
     if (rect.top <= markerY) current = file;
     else break;
   }
-  name.textContent = current?.dataset.gitDiffFile || "—";
+  const currentPath = current?.dataset.gitDiffFile || "—";
+  name.textContent = currentPath;
+  header.dataset.gitCurrentFile = currentPath;
+  header.setAttribute("aria-expanded", String(current?.open !== false));
 }
 
 function gitChangesGeneratedLabel(data) {
@@ -6663,7 +7066,11 @@ function renderGitChangesDialog() {
     .filter((entry) => entry.files.length > 0);
   const untracked = gitUntrackedEntries(data.untracked);
   const hasVisibleFiles = parsedSections.length > 0 || untracked.length > 0;
-  if (hasVisibleFiles) body.append(renderGitCurrentFileHeader());
+  if (hasVisibleFiles) {
+    const fileList = renderGitChangesFileList(parsedSections, untracked);
+    if (fileList) body.append(fileList);
+    body.append(renderGitCurrentFileHeader());
+  }
   for (const entry of parsedSections) body.append(renderGitDiffSection(entry.section, entry.files));
   if (untracked.length) body.append(renderGitUntrackedSection(untracked));
   if (!hasVisibleFiles) {
@@ -6761,6 +7168,7 @@ function gitFooterFallbackMessage() {
 }
 
 function renderMinimalFooter() {
+  invalidateGitFooterRenderCache();
   hideFooterTooltip();
   const tab = activeTab();
   const workspaceLabel = latestWorkspace?.displayCwd || (tab?.cwd ? normalizeDisplayPath(tab.cwd) : "loading…");
@@ -6912,10 +7320,66 @@ function renderContextMeter() {
   root.replaceChildren(summary, meter, actions);
 }
 
-function dashboardMetric(label, value, detail = "") {
-  const item = make("div", "workspace-dashboard-metric");
-  item.append(make("span", "workspace-dashboard-metric-label", label), make("strong", undefined, value || "—"));
-  if (detail) item.append(make("span", "workspace-dashboard-metric-detail", detail));
+function compactDashboardText(value, maxLength = 34) {
+  const text = String(value || "").trim();
+  if (!text || text.length <= maxLength) return text;
+  const available = Math.max(8, maxLength - 1);
+  const headLength = Math.max(4, Math.ceil(available * 0.58));
+  const tailLength = Math.max(4, available - headLength);
+  return `${text.slice(0, headLength)}…${text.slice(-tailLength)}`;
+}
+
+function compactDashboardPath(value, maxLength = 52) {
+  const text = normalizeDisplayPath(value || "").trim();
+  if (!text || text.length <= maxLength) return text;
+  const segments = text.split("/").filter(Boolean);
+  if (segments.length >= 3) {
+    const tail = `…/${segments.slice(-3).join("/")}`;
+    if (tail.length <= maxLength) return tail;
+  }
+  return compactDashboardText(text, maxLength);
+}
+
+function contextDashboardTone(snapshot) {
+  if (!snapshot) return "muted";
+  if (typeof snapshot.percent !== "number") return "neutral";
+  if (snapshot.percent >= 85) return "danger";
+  if (snapshot.percent >= 70) return "warning";
+  return "ok";
+}
+
+function dashboardSessionSummary() {
+  const rawSession = currentState?.sessionName || currentState?.sessionId || "";
+  const rawFile = currentState?.sessionFile || "in-memory";
+  const sessionLabel = rawSession ? compactDashboardText(rawSession, 28) : "loading…";
+  const fileLabel = rawFile === "in-memory" ? rawFile : compactDashboardPath(rawFile, 58);
+  return {
+    value: sessionLabel,
+    detail: fileLabel,
+    title: [rawSession || "Session loading…", rawFile].filter(Boolean).join("\n"),
+  };
+}
+
+function dashboardMetric(label, value, detail = "", options = {}) {
+  const tone = options.tone || "neutral";
+  const item = make("div", `workspace-dashboard-metric tone-${tone}${options.meterSnapshot ? " with-meter" : ""}`);
+  const valueText = value || "—";
+  const title = options.title || [label, valueText, detail].filter(Boolean).join(" · ");
+  item.title = title;
+  item.setAttribute("aria-label", title);
+
+  const icon = make("span", "workspace-dashboard-metric-icon", options.icon || "•");
+  icon.setAttribute("aria-hidden", "true");
+  const copy = make("span", "workspace-dashboard-metric-copy");
+  copy.append(make("span", "workspace-dashboard-metric-label", label), make("strong", undefined, valueText));
+  if (detail) copy.append(make("span", "workspace-dashboard-metric-detail", detail));
+  item.append(icon, copy);
+
+  if (options.meterSnapshot) {
+    const meter = make("span", "workspace-dashboard-mini-meter");
+    appendContextMeterFill(meter, options.meterSnapshot);
+    item.append(meter);
+  }
   return item;
 }
 
@@ -6926,6 +7390,8 @@ function dashboardAction(label, handler, className = "") {
   return button;
 }
 
+let workspaceDashboardSignature = null;
+
 function renderWorkspaceDashboard() {
   if (deferUiRenderDuringPointerActivation("workspace-dashboard", renderWorkspaceDashboard)) return;
   const root = elements.workspaceDashboard;
@@ -6934,11 +7400,51 @@ function renderWorkspaceDashboard() {
   const snapshot = contextUsageSnapshot();
   const workspaceLabel = latestWorkspace?.displayCwd || (tab?.cwd ? normalizeDisplayPath(tab.cwd) : "Choose or create a tab to start");
   const queueCount = Number(currentState?.pendingMessageCount || 0) || 0;
+  const tabIndicatorState = tab ? tabIndicator(tab) : null;
+  const sessionSummary = dashboardSessionSummary();
+  const modelLabel = currentState?.model ? shortModelLabel(currentState.model) : "loading…";
+  const queueDetail = queueCount === 0 ? "idle" : queueCount === 1 ? "pending message" : "pending messages";
+
+  // Skip rebuilding the dashboard (and its buttons) when nothing it shows has
+  // changed. Extension status pushes during streaming would otherwise rebuild
+  // every workspace button on each token, causing flicker.
+  const signature = JSON.stringify({
+    title: tab?.title || "Pi Web UI",
+    workspaceLabel,
+    tabIndicatorState,
+    tabsLength: tabs.length,
+    queueCount,
+    modelLabel,
+    modelTitle: currentState?.model ? shortModelLabel(currentState.model) : "Model loading…",
+    thinking: currentState?.thinkingLevel || "",
+    context: { display: contextUsageDisplay(snapshot), detail: contextUsageDetail(snapshot), tone: contextDashboardTone(snapshot) },
+    session: sessionSummary,
+    activeTabId,
+    tabs: tabs.slice(0, 8).map((item) => ({ id: item.id, title: item.title, state: tabIndicator(item).state, active: item.id === activeTabId, cwd: item.cwd ? normalizeDisplayPath(item.cwd) : "" })),
+    overflow: tabs.length > 8 ? tabs.length - 8 : 0,
+  });
+  if (signature === workspaceDashboardSignature && root.childElementCount > 0) return;
+  workspaceDashboardSignature = signature;
   root.replaceChildren();
 
   const header = make("div", "workspace-dashboard-header");
   const title = make("div", "workspace-dashboard-title");
-  title.append(make("span", "workspace-dashboard-kicker", "Workspace"), make("h2", undefined, tab?.title || "Pi Web UI"), make("p", "muted", workspaceLabel));
+  const heading = make("h2", undefined, tab?.title || "Pi Web UI");
+  heading.title = tab?.title || "Pi Web UI";
+  const cwd = make("p", "workspace-dashboard-cwd muted", workspaceLabel);
+  cwd.title = workspaceLabel;
+  const meta = make("div", "workspace-dashboard-title-meta");
+  if (tabIndicatorState) {
+    const statusChip = make("span", `workspace-dashboard-chip activity-${tabIndicatorState.state}`);
+    statusChip.title = tabIndicatorState.label;
+    statusChip.append(make("span", "workspace-dashboard-chip-dot", tabIndicatorState.glyph), make("span", undefined, tabIndicatorState.label));
+    meta.append(statusChip);
+  }
+  meta.append(
+    make("span", "workspace-dashboard-chip", `${tabs.length} tab${tabs.length === 1 ? "" : "s"}`),
+    make("span", `workspace-dashboard-chip ${queueCount ? "attention" : ""}`.trim(), queueCount ? `${queueCount} queued` : "queue clear"),
+  );
+  title.append(make("span", "workspace-dashboard-kicker", "Workspace"), heading, cwd, meta);
   const actions = make("div", "workspace-dashboard-actions");
   actions.append(
     dashboardAction("Command palette", () => openCommandPalette(), "primary"),
@@ -6951,24 +7457,45 @@ function renderWorkspaceDashboard() {
 
   const metrics = make("div", "workspace-dashboard-metrics");
   metrics.append(
-    dashboardMetric("Model", currentState?.model ? shortModelLabel(currentState.model) : "loading…", currentState?.thinkingLevel ? `thinking ${currentState.thinkingLevel}` : ""),
-    dashboardMetric("Context", contextUsageDisplay(snapshot), contextUsageDetail(snapshot)),
-    dashboardMetric("Session", currentState?.sessionName || currentState?.sessionId || "loading…", currentState?.sessionFile || "in-memory"),
-    dashboardMetric("Queue", `${queueCount}`, queueCount === 1 ? "pending message" : "pending messages"),
+    dashboardMetric("Model", modelLabel, currentState?.thinkingLevel ? `thinking ${currentState.thinkingLevel}` : "ready", {
+      icon: "◌",
+      tone: currentState?.model ? "neutral" : "muted",
+      title: currentState?.model ? shortModelLabel(currentState.model) : "Model loading…",
+    }),
+    dashboardMetric("Context", contextUsageDisplay(snapshot), contextUsageDetail(snapshot), {
+      icon: "◐",
+      tone: contextDashboardTone(snapshot),
+      meterSnapshot: snapshot,
+    }),
+    dashboardMetric("Session", sessionSummary.value, sessionSummary.detail, {
+      icon: "#",
+      tone: currentState?.sessionId || currentState?.sessionName ? "neutral" : "muted",
+      title: sessionSummary.title,
+    }),
+    dashboardMetric("Queue", `${queueCount}`, queueDetail, {
+      icon: queueCount ? "↳" : "✓",
+      tone: queueCount ? "warning" : "ok",
+    }),
   );
 
   const tabsPanel = make("div", "workspace-dashboard-tabs");
-  tabsPanel.append(make("span", "workspace-dashboard-tabs-title", `Open tabs (${tabs.length})`));
+  const tabsHeader = make("div", "workspace-dashboard-tabs-header");
+  tabsHeader.append(
+    make("span", "workspace-dashboard-tabs-title", `Open tabs (${tabs.length})`),
+    make("span", "workspace-dashboard-tabs-hint", tabs.length ? "Click a tab to switch" : "No tabs yet"),
+  );
+  tabsPanel.append(tabsHeader);
   const tabList = make("div", "workspace-dashboard-tab-list");
   for (const item of tabs.slice(0, 8)) {
     const indicator = tabIndicator(item);
     const button = make("button", `workspace-dashboard-tab activity-${indicator.state}${item.id === activeTabId ? " active" : ""}`);
     button.type = "button";
-    button.title = `${item.title} · ${indicator.label}`;
-    button.append(make("span", "workspace-dashboard-tab-dot", indicator.glyph), make("span", undefined, item.title));
+    button.title = `${item.title} · ${indicator.label}${item.cwd ? ` · ${normalizeDisplayPath(item.cwd)}` : ""}`;
+    button.append(make("span", "workspace-dashboard-tab-dot", indicator.glyph), make("span", "workspace-dashboard-tab-label", item.title));
     button.addEventListener("click", () => switchTab(item.id));
     tabList.append(button);
   }
+  if (!tabs.length) tabList.append(make("span", "workspace-dashboard-tab-empty", "Create a tab to start a workspace."));
   if (tabs.length > 8) tabList.append(make("span", "workspace-dashboard-tab-more", `+${tabs.length - 8} more`));
   tabsPanel.append(tabList);
 
@@ -6976,6 +7503,7 @@ function renderWorkspaceDashboard() {
 }
 
 function setFooterModelPickerOpen(open) {
+  const wasOpen = footerModelPickerOpen;
   footerModelPickerOpen = !!open;
   if (footerModelPickerOpen) {
     footerThinkingPickerOpen = false;
@@ -6991,9 +7519,11 @@ function setFooterModelPickerOpen(open) {
   document.body.classList.toggle("footer-model-picker-open", isFooterPickerOpen());
   renderFooter();
   updateFooterModelPickerPosition();
+  if (wasOpen && !footerModelPickerOpen) scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function setFooterThinkingPickerOpen(open) {
+  const wasOpen = footerThinkingPickerOpen;
   footerThinkingPickerOpen = !!open;
   if (footerThinkingPickerOpen) {
     footerModelPickerOpen = false;
@@ -7009,6 +7539,7 @@ function setFooterThinkingPickerOpen(open) {
   document.body.classList.toggle("footer-model-picker-open", isFooterPickerOpen());
   renderFooter();
   updateFooterModelPickerPosition();
+  if (wasOpen && !footerThinkingPickerOpen) scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function normalizeFooterGitBranches(data = {}) {
@@ -7078,6 +7609,7 @@ async function loadFooterBranchPicker(tabContext = activeTabContext()) {
 }
 
 function setFooterBranchPickerOpen(open) {
+  const wasOpen = footerBranchPickerOpen;
   footerBranchPickerOpen = !!open;
   if (footerBranchPickerOpen) {
     footerModelPickerOpen = false;
@@ -7095,6 +7627,7 @@ function setFooterBranchPickerOpen(open) {
   document.body.classList.toggle("footer-model-picker-open", isFooterPickerOpen());
   renderFooter();
   updateFooterModelPickerPosition();
+  if (wasOpen && !footerBranchPickerOpen) scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function pathLooksInside(parentPath, childPath) {
@@ -8615,9 +9148,67 @@ async function clearAppRunner() {
   }
 }
 
+async function sendAppRunnerInput(run, form, { closeStdin = false } = {}) {
+  const tabContext = activeTabContext();
+  const input = form?.querySelector?.(".app-runner-stdin-input");
+  if (!tabContext.tabId || !input || !appRunnerIsRunning(run)) return;
+  const draftKey = appRunnerInputDraftKey(run);
+  const text = input.value || "";
+  const buttons = [...form.querySelectorAll("button")];
+  buttons.forEach((button) => { button.disabled = true; });
+  try {
+    const response = await api("/api/app-runner/input", { method: "POST", body: { text, newline: !closeStdin || Boolean(text), closeStdin }, tabId: tabContext.tabId });
+    if (!isCurrentTabContext(tabContext)) return;
+    appRunnerInputDraftByRun.set(draftKey, "");
+    input.value = "";
+    setAppRunnerData(tabContext.tabId, response.data || {});
+    renderAppRunnerControls();
+    renderWidgets();
+    addEvent(closeStdin ? "sent app runner EOF" : text ? "sent app runner input" : "sent app runner Enter", "info");
+  } catch (error) {
+    if (isCurrentTabContext(tabContext)) addEvent(`app runner input failed: ${error.message || String(error)}`, "error");
+  } finally {
+    buttons.forEach((button) => { button.disabled = false; });
+  }
+}
+
+function appRunnerOutputLines(run) {
+  const lines = Array.isArray(run?.lines) ? [...run.lines] : [];
+  if (appRunnerIsRunning(run) && run?.pendingLine) lines.push(run.pendingLine);
+  return lines;
+}
+
 function appRunnerOutputText(run) {
-  const lines = Array.isArray(run?.lines) ? run.lines : [];
-  return lines.join("\n").trimEnd();
+  return appRunnerOutputLines(run).join("\n").trimEnd();
+}
+
+function appRunnerInputDraftKey(run) {
+  return run?.id || run?.runnerId || "active";
+}
+
+function captureAppRunnerInputFocus() {
+  const input = document.activeElement;
+  if (!input?.classList?.contains("app-runner-stdin-input")) return null;
+  return {
+    runId: input.dataset.runId || "",
+    value: input.value || "",
+    selectionStart: input.selectionStart ?? input.value.length,
+    selectionEnd: input.selectionEnd ?? input.value.length,
+  };
+}
+
+function restoreAppRunnerInputFocus(state) {
+  if (!state?.runId) return;
+  const input = document.querySelector(".app-runner-stdin-input");
+  if (!input || input.dataset.runId !== state.runId) return;
+  appRunnerInputDraftByRun.set(state.runId, state.value);
+  input.value = state.value;
+  try {
+    input.focus({ preventScroll: true });
+    input.setSelectionRange(state.selectionStart, state.selectionEnd);
+  } catch {
+    input.focus();
+  }
 }
 
 async function copyAppRunnerOutput(run) {
@@ -8994,6 +9585,7 @@ function renderAppRunnerInfoDialog() {
     "Detection is scoped to the active terminal tab's current working directory.",
     "Only commands/files that exist and runner binaries available on this system are shown.",
     "Starting a runner keeps live output pinned above the chat/terminal area.",
+    "While a runner is active, the widget can send line-oriented stdin to interactive scripts.",
     "Only one app runner can be active per tab; Close/Stop terminates the process/server.",
   ]) howList.append(make("li", "", line));
   how.append(howList);
@@ -9018,6 +9610,42 @@ function closeAppRunnerInfoDialog() {
   if (elements.appRunnerInfoDialog?.open) elements.appRunnerInfoDialog.close();
 }
 
+function renderAppRunnerInputForm(run) {
+  if (!appRunnerIsRunning(run)) return null;
+  const key = appRunnerInputDraftKey(run);
+  const form = make("form", "app-runner-stdin-form");
+  form.dataset.runId = key;
+  const input = make("textarea", "app-runner-stdin-input");
+  input.rows = 1;
+  input.value = appRunnerInputDraftByRun.get(key) || "";
+  input.placeholder = run.stdinClosed ? "stdin is closed" : "Send stdin… Enter sends, Shift+Enter inserts a newline";
+  input.disabled = run.stdinClosed === true;
+  input.dataset.runId = key;
+  input.setAttribute("aria-label", "Send input to app runner stdin");
+  input.addEventListener("input", () => { appRunnerInputDraftByRun.set(key, input.value); });
+  input.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter" || event.shiftKey) return;
+    event.preventDefault();
+    form.requestSubmit();
+  });
+  const send = make("button", "release-npm-action app-runner-stdin-send", input.value ? "Send input" : "Send Enter");
+  send.type = "submit";
+  send.disabled = run.stdinClosed === true;
+  send.title = run.stdinClosed ? (run.stdinError || "App runner stdin is closed") : "Send this text followed by Enter to the running app runner";
+  const eof = make("button", "release-npm-action app-runner-stdin-eof", "EOF");
+  eof.type = "button";
+  eof.disabled = run.stdinClosed === true;
+  eof.title = run.stdinClosed ? (run.stdinError || "App runner stdin is closed") : "Close stdin after optionally sending the current text";
+  eof.addEventListener("click", () => sendAppRunnerInput(run, form, { closeStdin: true }));
+  input.addEventListener("input", () => { send.textContent = input.value ? "Send input" : "Send Enter"; });
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    sendAppRunnerInput(run, form);
+  });
+  form.append(input, send, eof);
+  return form;
+}
+
 function renderAppRunnerWidget() {
   const data = activeAppRunnerData();
   const run = data.activeRun;
@@ -9034,14 +9662,15 @@ function renderAppRunnerWidget() {
   const elapsed = appRunnerElapsedLabel(run);
   header.append(titleWrap);
 
-  const lines = Array.isArray(run.lines) && run.lines.length ? run.lines : [run.displayCommand ? `$ ${run.displayCommand}` : "Waiting for app runner output..."];
-  const streamHeader = releaseNpmStreamHeader(running ? "Live app output" : "App output", run.lineCount || lines.length, { live: running });
+  const outputLines = appRunnerOutputLines(run);
+  const lines = outputLines.length ? outputLines : [run.displayCommand ? `$ ${run.displayCommand}` : "Waiting for app runner output..."];
+  const streamHeader = releaseNpmStreamHeader(running ? "Live app output" : "App output", Math.max(run.lineCount || 0, lines.length), { live: running });
   const terminal = make("div", "release-npm-terminal");
   terminal.setAttribute("role", "log");
   terminal.setAttribute("aria-live", running ? "polite" : "off");
   for (const line of lines) appendReleaseNpmTerminalLine(terminal, line);
 
-  const controlParts = [run.displayCommand, run.cwd, run.truncated ? "output truncated" : ""].map(cleanStatusText).filter(Boolean);
+  const controlParts = [run.displayCommand, run.cwd, run.truncated ? "output truncated" : "", run.stdinError ? `stdin: ${run.stdinError}` : ""].map(cleanStatusText).filter(Boolean);
   const controls = make("div", "release-npm-controls app-runner-output-controls");
   const actions = make("div", "app-runner-output-actions");
   const closeButton = appRunnerActionButton("Close", running ? stopAppRunner : clearAppRunner, running ? "danger app-runner-close-action" : "app-runner-close-action");
@@ -9056,11 +9685,14 @@ function renderAppRunnerWidget() {
     if (canRunAgain) actions.append(appRunnerActionButton("Run again", () => runAppRunner(run.runnerId)));
     actions.append(appRunnerActionButton("Clear", clearAppRunner));
   }
+  const inputForm = running ? renderAppRunnerInputForm(run) : null;
   const pills = make("div", "app-runner-output-pills");
   if (run.kind) pills.append(make("span", "release-npm-pill", run.kind));
   pills.append(make("span", `release-npm-pill app-runner-status ${run.status || "running"}`.trim(), status));
   if (elapsed) pills.append(make("span", "release-npm-pill elapsed", elapsed));
-  controls.append(actions, pills, make("span", "app-runner-output-meta", controlParts.join(" · ")));
+  controls.append(actions);
+  if (inputForm) controls.append(inputForm);
+  controls.append(pills, make("span", "app-runner-output-meta", controlParts.join(" · ")));
   const outputDetails = renderReleaseNpmOutputDetails(`app-runner:${run.id || run.runnerId || "active"}`, streamHeader, terminal, controls);
   node.append(header, outputDetails);
   requestAnimationFrame(() => { if (outputDetails.open) terminal.scrollTop = terminal.scrollHeight; });
@@ -9817,6 +10449,7 @@ function mirrorRemoteWebuiWidgetToTranscript(widgetKey, lines = [], request = {}
 
 function renderWidgets() {
   if (deferUiRenderDuringPointerActivation("widgets", renderWidgets)) return;
+  const appRunnerInputFocus = captureAppRunnerInputFocus();
   elements.widgetArea.replaceChildren();
   const releaseOutput = renderReleaseNpmOutputWidget();
   if (releaseOutput) elements.widgetArea.append(releaseOutput);
@@ -9850,6 +10483,7 @@ function renderWidgets() {
     node.textContent = `${key}\n${cleanLines.join("\n")}`;
     elements.widgetArea.append(node);
   }
+  restoreAppRunnerInputFocus(appRunnerInputFocus);
 }
 
 function setGitWorkflow(patch, { tabId = activeTabId } = {}) {
@@ -10142,7 +10776,7 @@ function renderGitInitStackInput() {
   elements.gitWorkflowActions.append(row);
 }
 
-function renderGitWorkflowManualCommitInput() {
+function renderGitWorkflowManualCommitInput({ appendCommitButton = true } = {}) {
   const tabId = gitWorkflowActionTabId();
   const workflow = gitWorkflowForTab(tabId, { create: false }) || gitWorkflow;
   const defaultCommitMessage = String(workflow?.manualCommitMessageDefault || "").trim();
@@ -10187,8 +10821,10 @@ function renderGitWorkflowManualCommitInput() {
   loadGitWorkflowDefaultCommitMessage({ runId: workflow?.runId, tabId });
 
   field.append(input);
-  row.append(field, commitButton);
+  row.append(field);
+  if (appendCommitButton) row.append(commitButton);
   elements.gitWorkflowActions.append(row);
+  return commitButton;
 }
 
 function setGitPrDialogStatus(message = "", level = "muted") {
@@ -10527,9 +11163,10 @@ function renderGitWorkflow() {
   if (gitWorkflow.step === "add") {
     addGitWorkflowAction("Run git add .", () => runGitAdd(), "primary", false);
   } else if (gitWorkflow.step === "generate") {
-    renderGitWorkflowManualCommitInput();
+    const commitInputButton = renderGitWorkflowManualCommitInput({ appendCommitButton: false });
     addGitWorkflowAction("Run /git-staged-msg", () => runGitMessagePrompt(), "primary", false);
     addGitWorkflowAction("Preview current message files", () => loadGitWorkflowMessage({ requireFresh: false }), "", false);
+    elements.gitWorkflowActions.append(commitInputButton);
   } else if (gitWorkflow.step === "generating") {
     addGitWorkflowAction("Refresh message preview", () => loadGitWorkflowMessage({ requireFresh: true }), "", false);
   } else if (gitWorkflow.step === "message") {
@@ -10537,10 +11174,11 @@ function renderGitWorkflow() {
       addGitWorkflowAction("Create PR", () => createGitPrBranch(), "primary", false, GIT_WORKFLOW_CREATE_PR_TOOLTIP);
       addGitWorkflowAction("Manual branch", () => createGitPrBranchManually(), "", false, GIT_WORKFLOW_MANUAL_BRANCH_TOOLTIP);
     }
-    renderGitWorkflowManualCommitInput();
+    const commitInputButton = renderGitWorkflowManualCommitInput({ appendCommitButton: false });
     addGitWorkflowAction("Commit short", () => commitGitWorkflow("short"), gitWorkflow.prMode ? "primary" : "", false);
     addGitWorkflowAction("Commit long", () => commitGitWorkflow("long"), gitWorkflow.prMode ? "primary" : "", false);
     addGitWorkflowAction("Regenerate", () => runGitMessagePrompt(), "", false);
+    elements.gitWorkflowActions.append(commitInputButton);
   } else if (gitWorkflow.step === "branchNaming") {
     addGitWorkflowAction("Refresh branch name", () => loadGitWorkflowBranchName({ requireFresh: true }), "", false);
     addGitWorkflowAction("Manual branch", () => createGitPrBranchManually(), "", !!gitWorkflow.busy, GIT_WORKFLOW_MANUAL_BRANCH_TOOLTIP);
@@ -13746,12 +14384,17 @@ function renderRunIndicator({ scroll = false } = {}) {
 }
 
 function setRunIndicatorActivity(activity, { active = true, scroll = true } = {}) {
+  const wasLocallyActive = runIndicatorLocallyActive;
+  const previousActivity = runIndicatorActivity;
+  const hadRunIndicatorBubble = runIndicatorBubble?.parentElement === elements.chat;
   if (active) {
     runIndicatorLocallyActive = true;
     if (!runIndicatorStartedAt) runIndicatorStartedAt = performance.now();
   }
   runIndicatorActivity = activity || runIndicatorActivity || "Waiting for output or action…";
-  renderRunIndicator({ scroll });
+  const needsRender = scroll || !hadRunIndicatorBubble || wasLocallyActive !== runIndicatorLocallyActive || previousActivity !== runIndicatorActivity;
+  if (needsRender) renderRunIndicator({ scroll });
+  else if (runIndicatorIsActive()) startRunIndicatorTicker();
   updateComposerModeButtons();
   if (active) scheduleRunIndicatorGraceCheck();
 }
@@ -14080,8 +14723,8 @@ function applyNativeSlashCommandEffects(response, message, tabContext = activeTa
     });
   }
 
-  if (data.download && triggerNativeDownload(data.download)) {
-    addEvent(`download started: ${data.download.fileName || data.download.url}`, "info");
+  if (data.download && handleNativeDownloadResponse(data.download, data.command)) {
+    addEvent(data.command === "export" ? `export ready: ${data.download.fileName || data.download.url}` : `download started: ${data.download.fileName || data.download.url}`, "info");
   }
 
   const cards = Array.isArray(data.cards) && data.cards.length ? data.cards : null;
@@ -14189,6 +14832,7 @@ function scheduleChatFollowScroll() {
 
 function scrollChatToBottom({ force = false } = {}) {
   if (deferChatFollowScrollDuringPointerActivation({ force })) return;
+  if (deferChatFollowScrollDuringInteractiveDropdown({ force })) return;
   if (force) autoFollowChat = true;
   if (!autoFollowChat) {
     updateJumpToLatestButton();
@@ -14285,6 +14929,7 @@ function setPublishMenuOpen(open) {
   elements.publishButton.classList.toggle("menu-open", publishMenuOpen);
   elements.publishButton.parentElement?.classList.toggle("open", publishMenuOpen);
   scheduleMobileDropdownScrollBoundsUpdate();
+  if (!publishMenuOpen) scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function setNativeCommandMenuOpen(open) {
@@ -14293,6 +14938,7 @@ function setNativeCommandMenuOpen(open) {
   elements.nativeCommandMenuButton.classList.toggle("menu-open", nativeCommandMenuOpen);
   elements.nativeCommandMenuButton.parentElement?.classList.toggle("open", nativeCommandMenuOpen);
   scheduleMobileDropdownScrollBoundsUpdate();
+  if (!nativeCommandMenuOpen) scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function setAppRunnerMenuOpen(open) {
@@ -14301,6 +14947,7 @@ function setAppRunnerMenuOpen(open) {
   elements.appRunnerMenuButton?.classList.toggle("menu-open", appRunnerMenuOpen);
   elements.appRunnerMenuButton?.parentElement?.classList.toggle("open", appRunnerMenuOpen);
   scheduleMobileDropdownScrollBoundsUpdate();
+  if (!appRunnerMenuOpen) scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function setOptionsMenuOpen(open) {
@@ -14309,6 +14956,7 @@ function setOptionsMenuOpen(open) {
   elements.optionsMenuButton.classList.toggle("menu-open", optionsMenuOpen);
   elements.optionsMenuButton.parentElement?.classList.toggle("open", optionsMenuOpen);
   scheduleMobileDropdownScrollBoundsUpdate();
+  if (!optionsMenuOpen) scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function optionalFeatureIdForCommand(name) {
@@ -14475,7 +15123,7 @@ function updateOptionalFeatureAvailability() {
   optionalFeatureAvailability.tuiSkillsCommand = hasLoadedRpcCommand("skills");
   optionalFeatureAvailability.todoProgressWidget = hasAvailableCommand("todo-progress-status") || optionalFeatureAvailability.todoProgressWidget || widgets.has("todo-progress");
   optionalFeatureAvailability.tuiToolsCommand = hasLoadedRpcCommand("tools");
-  optionalFeatureAvailability.remoteWebui = hasAvailableCommand("remote") || optionalFeatureAvailability.remoteWebui || statusEntries.has("pi-remote-webui") || widgets.has("pi-remote-webui");
+  optionalFeatureAvailability.remoteWebui = hasAvailableCommand("remote") || optionalFeatureAvailability.remoteWebui || statusEntries.has("pi-remote-webui") || statusEntries.has(REMOTE_WEBUI_CONTROLS_STATUS_KEY) || widgets.has("pi-remote-webui");
   optionalFeatureAvailability.themeBundle = availableThemes.length > 0;
   requestGitFooterWebuiPayload();
   renderOptionalFeatureControls();
@@ -14496,6 +15144,19 @@ function optionalFeatureStatus(featureId) {
   return { label: "Install needed", className: "missing", detail: installMessage || "Package is not installed or not visible from the Web UI package root" };
 }
 
+function optionalFeatureTooltip(feature, status) {
+  return [
+    feature.label,
+    `Status: ${status.label}`,
+    status.detail,
+    "",
+    feature.description,
+    "",
+    `Check: ${feature.capabilityLabel}`,
+    `Package: ${feature.packageName}`,
+  ].join("\n");
+}
+
 function optionalFeatureWidgetFeatureId(key) {
   if (key.startsWith("btw:")) return "btwCommand";
   if (key.startsWith("release-npm:")) return "releaseNpm";
@@ -14522,26 +15183,17 @@ function renderOptionalFeaturePanel() {
     const packageStatus = optionalFeaturePackageStatus(feature.id);
     const status = optionalFeatureStatus(feature.id);
     const row = make("div", `optional-feature-row ${status.className}`);
+    const tooltip = optionalFeatureTooltip(feature, status);
+    row.dataset.tooltip = tooltip;
+    row.setAttribute("aria-label", tooltip.replace(/\s+/g, " "));
+    row.tabIndex = 0;
 
     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);
+    main.append(title);
 
     const actions = make("div", "optional-feature-actions");
-    if (feature.id === "gitFooterStatus") {
-      const setup = make("button", "optional-feature-action setup", "git-footer-status-setup");
-      setup.type = "button";
-      setup.title = GIT_FOOTER_STATUS_SETUP_TOOLTIP;
-      setup.dataset.tooltip = GIT_FOOTER_STATUS_SETUP_TOOLTIP;
-      setup.disabled = installing;
-      setup.addEventListener("click", () => configureGitFooterStatusSetup({ force: true }));
-      actions.append(setup);
-    }
-
     const action = make("button", "optional-feature-action");
     action.type = "button";
     action.disabled = installing;
@@ -14633,10 +15285,23 @@ function renderOptionalFeatureControls() {
       optionalFeatureUnavailableMessage("remoteWebui"),
     );
   }
+  syncRemoteWebuiControlVisibility(hasRemoteWebuiCommand);
 
   renderOptionalFeaturePanel();
 }
 
+function syncRemoteWebuiControlVisibility(hasRemoteWebuiCommand = isOptionalFeatureEnabled("remoteWebui") && hasAvailableCommand("remote")) {
+  if (!elements.networkControlField) return;
+  elements.networkControlField.hidden = !hasRemoteWebuiCommand;
+  elements.networkControlField.classList.toggle("feature-unavailable", !hasRemoteWebuiCommand);
+  const label = elements.networkControlField.querySelector("label");
+  const payload = remoteWebuiControlsPayload();
+  if (label) label.textContent = payload?.title || "Remote WebUI";
+  elements.networkControlField.title = hasRemoteWebuiCommand
+    ? payload?.description || "Remote WebUI controls are provided by @firstpick/pi-package-remote-webui."
+    : optionalFeatureUnavailableMessage("remoteWebui");
+}
+
 function commandUnavailableMessage(commandName) {
   const featureId = optionalFeatureIdForCommand(commandName);
   if (featureId) return optionalFeatureUnavailableMessage(featureId);
@@ -14791,7 +15456,7 @@ function nativeSelectorMatches(item, query) {
     .some((value) => String(value).toLowerCase().includes(needle));
 }
 
-function renderNativeSelectorItems(items, { emptyText = "No choices.", onSelect, activeId } = {}) {
+function renderNativeSelectorItems(items, { emptyText = "No choices.", onSelect, activeId, numbered = false } = {}) {
   const query = elements.nativeCommandSearch.value.trim();
   const filtered = items.filter((item) => nativeSelectorMatches(item, query));
   elements.nativeCommandBody.replaceChildren();
@@ -14800,13 +15465,13 @@ function renderNativeSelectorItems(items, { emptyText = "No choices.", onSelect,
     return;
   }
   const list = make("div", "native-selector-list");
-  for (const item of filtered) {
+  for (const [index, item] of filtered.entries()) {
     const button = make("button", `native-selector-item${item.id === activeId ? " active" : ""}`);
     button.type = "button";
-    if (item.depth !== undefined) button.style.setProperty("--tree-depth", String(item.depth));
     button.disabled = item.disabled === true;
     button.addEventListener("click", () => onSelect?.(item));
     const title = make("span", "native-selector-title");
+    if (numbered) title.append(make("span", "native-selector-index", `${index + 1}.`));
     title.append(make("strong", undefined, item.label || item.id || "choice"));
     if (item.badge) {
       const badgeState = String(item.badge).toLowerCase();
@@ -15376,7 +16041,6 @@ async function openNativeTreeSelector() {
       description: node.text || "",
       meta: `${node.timestamp || ""}${node.childCount ? ` · ${node.childCount} child${node.childCount === 1 ? "" : "ren"}` : ""}`,
       badge: node.currentLeaf ? "leaf" : "",
-      depth: node.depth || 0,
       node,
     }));
     const navigate = async (item) => {
@@ -15399,7 +16063,7 @@ async function openNativeTreeSelector() {
       }
     };
     const render = () => {
-      renderNativeSelectorItems(toItems(), { emptyText: "No session tree entries match this filter.", onSelect: navigate });
+      renderNativeSelectorItems(toItems(), { emptyText: "No session tree entries match this filter.", onSelect: navigate, numbered: true });
       elements.nativeCommandBody.prepend(options);
     };
     filterField.select.addEventListener("change", () => {
@@ -15889,7 +16553,6 @@ function handleMessageUpdate(event) {
       if (streamThinking?.textContent === "Thinking…") streamThinking.textContent = "";
       if (streamThinking) streamThinking.textContent += delta;
     }
-    renderFooter();
     scrollChatToBottom();
   } else if (update.type === "thinking_end") {
     const finalThinking = assistantThinkingTextFromMessage(assistantStreamingMessage(event)) || thinkingDeltaText(update);
@@ -15905,7 +16568,8 @@ function handleMessageUpdate(event) {
     setRunIndicatorActivity("Writing response…", { scroll: false });
     if (streamToolCallSeen || streamBubble) renderStreamingAssistantText();
     else scheduleStreamingAssistantTextRender();
-    renderFooter();
+    // Streaming output must stay transcript-local. Full footer/status
+    // reconciliation happens on message/state refreshes, not per token.
     scrollChatToBottom();
   } else if (update.type === "toolcall_start") {
     streamToolCallSeen = true;
@@ -15991,6 +16655,7 @@ function renderNetworkStatus() {
   const rebinding = opening || closing;
   const localUrl = network?.localUrl || `${window.location.origin}/`;
   const networkUrls = Array.isArray(network?.networkUrls) ? network.networkUrls : [];
+  syncRemoteWebuiControlVisibility();
   elements.networkStatus.className = `network-status ${opening ? "opening" : closing ? "closing" : open ? "open" : "closed"}`;
   elements.networkStatus.title = closing
     ? "Closing network access and returning to local-only"
@@ -16064,21 +16729,25 @@ async function refreshNetworkStatus() {
   renderNetworkStatus();
 }
 
-async function toggleRemoteAuth() {
-  const enable = !latestNetwork?.auth?.enabled;
-  const message = enable
-    ? "Enable remote PIN authentication?\n\nA random 4-digit PIN will be required for non-local browser clients. The PIN is shown in Controls."
-    : "Disable remote PIN authentication?\n\nNon-local browser clients will no longer need a PIN while the network listener is open.";
-  if (!confirm(message)) {
-    renderNetworkStatus();
-    return;
+async function runRemoteWebuiCommand(command) {
+  const commandName = String(command || "").replace(/^\//, "").split(/\s+/, 1)[0] || "remote";
+  if (!isOptionalFeatureEnabled("remoteWebui") || !hasAvailableCommand(commandName)) {
+    const message = commandUnavailableMessage(commandName);
+    addEvent(message, "warn");
+    refreshCommands(activeTabContext()).catch((error) => addEvent(error.message || String(error), "error"));
+    return false;
   }
+  await runNativeCommandMenu(command);
+  return true;
+}
 
+async function toggleRemoteAuth() {
+  const enable = !latestNetwork?.auth?.enabled;
   elements.remoteAuthToggle.disabled = true;
   try {
-    const response = await api("/api/remote-auth/settings", { method: "POST", body: { enabled: enable }, scoped: false });
-    latestNetwork = response.data?.network || { ...(latestNetwork || {}), auth: response.data?.auth };
-    addEvent(enable ? "remote PIN auth enabled" : "remote PIN auth disabled", enable ? "warn" : "info");
+    await runRemoteWebuiCommand(remoteWebuiCommand(enable ? "authOn" : "authOff", enable ? "/remote auth on" : "/remote auth off"));
+    await delay(250);
+    await refreshNetworkStatus();
   } catch (error) {
     addEvent(error.message || String(error), "error");
   } finally {
@@ -16194,17 +16863,122 @@ async function refreshModels(tabContext = activeTabContext()) {
   footerScopedModelPatterns = scopedModelPatterns;
   footerScopedModelSource = scopedModelSource;
   if (scopedModelError) addEvent(`failed to load scoped models: ${scopedModelError.message}`, "warn");
-  elements.modelSelect.replaceChildren();
+  populateModelSelect(models, elements.modelSearchInput?.value || "");
+  syncModelSelectToState();
+  renderFooter();
+  renderFeedbackTray();
+  if (elements.commandPaletteDialog?.open) renderCommandPalette({ preserveScroll: true });
+}
+
+function modelSelectOptionText(model) {
+  return `${model.provider}/${model.id}${model.name ? ` · ${model.name}` : ""}`;
+}
+
+function modelSelectValue(model) {
+  return JSON.stringify({ provider: model.provider, modelId: model.id });
+}
+
+function modelSearchDisplayParts(model) {
+  const id = `${model.provider}/${model.id}`;
+  const name = String(model.name || "").trim();
+  if (!name) return { primary: id, secondary: "" };
+  const match = name.match(/^(.*?)(\s+\([^)]+\))$/);
+  return { primary: (match?.[1] || name).trim(), secondary: `${id}${match?.[2] || ""}` };
+}
+
+let modelSearchResultsSignature = null;
+
+function renderModelSearchResults(models = []) {
+  if (!elements.modelSearchResults) return;
+  // Skip redundant rebuilds (e.g. extension status pushes during streaming that
+  // funnel through renderStatus -> syncModelSelectToState) so the Controls-panel
+  // model list does not flicker or drop an in-progress interaction.
+  const signature = JSON.stringify({
+    hidden: !!elements.modelSearchInput?.hidden,
+    selected: elements.modelSelect?.value || "",
+    models: models.map((model) => `${modelSelectValue(model)}\u0000${modelSelectOptionText(model)}`),
+  });
+  if (signature === modelSearchResultsSignature) return;
+  modelSearchResultsSignature = signature;
+  elements.modelSearchResults.replaceChildren();
+  if (elements.modelSearchInput?.hidden) return;
+  if (!models.length) {
+    elements.modelSearchResults.append(make("div", "model-search-empty", "No models match the search"));
+    elements.modelSearchResults.hidden = false;
+    return;
+  }
   for (const model of models) {
+    const value = modelSelectValue(model);
+    const selected = elements.modelSelect?.value === value;
+    const button = make("button", `model-search-result${selected ? " active" : ""}`);
+    button.type = "button";
+    button.setAttribute("role", "option");
+    button.setAttribute("aria-selected", String(selected));
+    button.title = modelSelectOptionText(model);
+    const display = modelSearchDisplayParts(model);
+    button.append(
+      make("span", "model-search-result-main", display.primary),
+      make("span", "model-search-result-name", display.secondary),
+    );
+    button.addEventListener("click", () => {
+      if (elements.modelSelect) elements.modelSelect.value = value;
+      renderModelSearchResults(models);
+    });
+    button.addEventListener("dblclick", () => elements.setModelButton?.click());
+    elements.modelSearchResults.append(button);
+  }
+  elements.modelSearchResults.hidden = false;
+}
+
+function populateModelSelect(models = availableModels, query = "") {
+  if (!elements.modelSelect) return;
+  const previousValue = elements.modelSelect.value;
+  const normalizedQuery = String(query || "").trim().toLowerCase();
+  const matchingModels = models.filter((model) => !normalizedQuery || modelSelectOptionText(model).toLowerCase().includes(normalizedQuery));
+  elements.modelSelect.replaceChildren();
+  for (const model of matchingModels) {
     const option = document.createElement("option");
-    option.value = JSON.stringify({ provider: model.provider, modelId: model.id });
-    option.textContent = `${model.provider}/${model.id}${model.name ? ` · ${model.name}` : ""}`;
+    option.value = modelSelectValue(model);
+    option.textContent = modelSelectOptionText(model);
     elements.modelSelect.append(option);
   }
+  if (!matchingModels.length) {
+    const option = document.createElement("option");
+    option.value = "";
+    option.textContent = "No models match the search";
+    option.disabled = true;
+    elements.modelSelect.append(option);
+  }
+  if (previousValue && [...elements.modelSelect.options].some((option) => option.value === previousValue)) elements.modelSelect.value = previousValue;
+  renderModelSearchResults(matchingModels);
+}
+
+function showModelSearchInput({ focus = true } = {}) {
+  if (!elements.modelSearchInput) return;
+  elements.modelSearchInput.hidden = false;
+  elements.modelSearchResults.hidden = false;
+  elements.modelSelect.classList.add("model-select-expanded");
+  populateModelSelect(availableModels, elements.modelSearchInput.value);
+  if (focus) {
+    requestAnimationFrame(() => {
+      elements.modelSearchInput.focus();
+      elements.modelSearchInput.select();
+    });
+  }
+}
+
+function hideModelSearchInput() {
+  if (!elements.modelSearchInput) return;
+  elements.modelSearchInput.hidden = true;
+  elements.modelSearchInput.value = "";
+  if (elements.modelSearchResults) {
+    elements.modelSearchResults.hidden = true;
+    elements.modelSearchResults.replaceChildren();
+  }
+  elements.modelSelect?.classList.remove("model-select-expanded");
+  populateModelSelect(availableModels, "");
   syncModelSelectToState();
-  renderFooter();
-  renderFeedbackTray();
-  if (elements.commandPaletteDialog?.open) renderCommandPalette({ preserveScroll: true });
+  scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function syncModelSelectToState() {
@@ -16213,6 +16987,7 @@ function syncModelSelectToState() {
   for (const option of elements.modelSelect.options) {
     if (option.value === value) {
       elements.modelSelect.value = value;
+      renderModelSearchResults(availableModels.filter((model) => !elements.modelSearchInput?.value.trim() || modelSelectOptionText(model).toLowerCase().includes(elements.modelSearchInput.value.trim().toLowerCase())));
       break;
     }
   }
@@ -16402,6 +17177,7 @@ function hideCommandSuggestions() {
   pathSuggestions = [];
   suggestionMode = "none";
   commandSuggestIndex = 0;
+  scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function setActiveCommandSuggestion(index) {
@@ -16896,35 +17672,15 @@ function scheduleForegroundReconcile(reason = "resume", delay = FOREGROUND_RECON
 }
 
 async function openToNetwork() {
-  if (latestNetwork?.open) {
-    await closeNetworkAccess();
-    return;
-  }
-  if (!confirm(`Open Pi Web UI to your local network?\n\nRemote PIN auth is ${latestNetwork?.auth?.enabled ? "ON" : "OFF"}. The Web UI can control Pi/tools, so only do this on a trusted LAN.`)) return;
-
+  const open = !!latestNetwork?.open;
   elements.openNetworkButton.disabled = true;
-  elements.openNetworkButton.textContent = "Opening…";
+  elements.openNetworkButton.textContent = open ? "Closing…" : "Opening…";
   try {
-    await api("/api/network/open", { method: "POST", scoped: false });
-    latestNetwork = { ...(latestNetwork || {}), opening: true, closing: false };
-    renderNetworkStatus();
-    addEvent("opening webui to local network", "warn");
-    for (let attempt = 0; attempt < 20; attempt++) {
-      await delay(350);
-      try {
-        await refreshNetworkStatus();
-        if (latestNetwork?.open && !latestNetwork?.opening) {
-          const url = latestNetwork.networkUrls?.[0];
-          addEvent(`webui open to local network${url ? `: ${url}` : ""}`, "warn");
-          return;
-        }
-      } catch {
-        // The listener briefly drops while rebinding; retry.
-      }
-    }
+    await runRemoteWebuiCommand(remoteWebuiCommand(open ? "close" : "open", open ? "/remote close" : "/remote"));
+    await delay(350);
     await refreshNetworkStatus();
   } catch (error) {
-    addEvent(error.message, "error");
+    addEvent(error.message || String(error), "error");
   } finally {
     renderNetworkStatus();
   }
@@ -16932,41 +17688,7 @@ async function openToNetwork() {
 
 async function closeNetworkAccess() {
   if (!latestNetwork?.open) return;
-  if (!confirm("Close Pi Web UI network access?\n\nThe local browser can keep using the UI, but LAN clients will disconnect.")) return;
-
-  elements.openNetworkButton.disabled = true;
-  elements.openNetworkButton.textContent = "Closing…";
-  try {
-    await api("/api/network/close", { method: "POST", scoped: false });
-    latestNetwork = { ...(latestNetwork || {}), opening: false, closing: true };
-    renderNetworkStatus();
-    addEvent("closing webui network access", "warn");
-    let refreshFailed = false;
-    for (let attempt = 0; attempt < 20; attempt++) {
-      await delay(350);
-      try {
-        await refreshNetworkStatus();
-        if (!latestNetwork?.open && !latestNetwork?.closing) {
-          addEvent("webui closed to local-only access", "warn");
-          return;
-        }
-      } catch {
-        refreshFailed = true;
-        // Remote tabs will lose access after the listener returns to localhost.
-      }
-    }
-    if (refreshFailed) {
-      latestNetwork = { ...(latestNetwork || {}), open: false, opening: false, closing: false, networkUrls: [] };
-      renderNetworkStatus();
-      addEvent("webui network access closed; reconnect from this machine if this tab loses access", "warn");
-      return;
-    }
-    addEvent("network close requested, but the server still reports network access open", "warn");
-  } catch (error) {
-    addEvent(error.message, "error");
-  } finally {
-    renderNetworkStatus();
-  }
+  await openToNetwork();
 }
 
 function setServerActionStatus(message = "", level = "info") {
@@ -16982,10 +17704,11 @@ function updateServerActionButton() {
   const button = elements.runServerActionButton;
   if (!button) return;
   button.disabled = !action;
-  button.textContent = action === "restart" ? "Restart" : action === "update" ? "Update" : action === "stop" ? "Stop" : "Run";
+  button.textContent = action === "restart" ? "Restart" : action === "update" || action === "update-all" ? "Update" : action === "stop" ? "Stop" : "Run";
   button.classList.toggle("danger", action === "stop");
   if (action === "restart") setServerActionStatus("Ready to restart the Web UI server.", "info");
-  else if (action === "update") setServerActionStatus("Ready to run pi update, then restart the Web UI server.", "info");
+  else if (action === "update") setServerActionStatus("Ready to run pi update for Pi only, then restart the Web UI server.", "info");
+  else if (action === "update-all") setServerActionStatus("Ready to run pi update --all for Pi and configured packages, then restart the Web UI server.", "info");
   else if (action === "stop") setServerActionStatus("Ready to stop the Web UI server.", "info");
   else setServerActionStatus();
 }
@@ -17093,6 +17816,7 @@ async function runSelectedServerAction() {
   const action = elements.serverActionSelect?.value || "";
   if (action === "restart") await restartServer();
   else if (action === "update") await runPiUpdateAndRestart();
+  else if (action === "update-all") await runPiUpdateAndRestart({ all: true });
   else if (action === "stop") await stopServer();
 }
 
@@ -17422,6 +18146,15 @@ function handleExtensionUiRequest(request) {
       if (statusKey === STATS_WEBUI_STATUS_KEY) handleStatsWebuiStatus(request.statusText);
       if (statusKey === BTW_WEBUI_STATUS_KEY) handleBtwWebuiStatus(request.statusText);
       updateOptionalFeatureAvailability();
+      if (statusKey === GIT_FOOTER_WEBUI_STATUS_KEY) {
+        if (currentState?.isStreaming || runIndicatorLocallyActive) return;
+        if (isInteractiveDropdownOpen()) {
+          deferredUiRenderCallbacks.set("footer", renderFooter);
+          return;
+        }
+        renderFooter();
+        return;
+      }
       renderStatus();
       return;
     }
@@ -18244,6 +18977,25 @@ function abortButtonReadyTitle() {
   return `Hold Esc or the Abort button for ${abortButtonHoldSeconds()} seconds to abort the active Pi run`;
 }
 
+function suppressEmptyPromptEscapeAction({ untilKeyup = false, graceMs = EMPTY_PROMPT_ESCAPE_AFTER_ABORT_GRACE_MS } = {}) {
+  lastEmptyPromptEscapeTime = 0;
+  suppressEmptyPromptEscapeUntil = Math.max(suppressEmptyPromptEscapeUntil, Date.now() + graceMs);
+  if (untilKeyup) escapeAbortHoldSuppressesDoubleEscape = true;
+}
+
+function finishEscapeAbortHoldSuppression() {
+  if (!escapeAbortHoldSuppressesDoubleEscape) return;
+  escapeAbortHoldSuppressesDoubleEscape = false;
+  suppressEmptyPromptEscapeAction();
+}
+
+function shouldSuppressEmptyPromptEscapeAction() {
+  if (escapeAbortHoldSuppressesDoubleEscape) return true;
+  if (suppressEmptyPromptEscapeUntil > Date.now()) return true;
+  suppressEmptyPromptEscapeUntil = 0;
+  return false;
+}
+
 function clearAbortLongPressResetTimer() {
   clearTimeout(abortLongPressResetTimer);
   abortLongPressResetTimer = null;
@@ -18285,6 +19037,7 @@ function completeAbortLongPress() {
   if (!isAbortLongPressActive()) return;
   if (abortLongPressReleasePending) return;
   const source = abortLongPressSource;
+  if (source === "escape") suppressEmptyPromptEscapeAction({ untilKeyup: true });
   clearAbortLongPressResetTimer();
   clearAbortLongPressCompletionTimers();
   abortLongPressHandled = true;
@@ -18372,6 +19125,7 @@ async function abortActiveRun({ source = "button" } = {}) {
 function startAbortLongPress(event, { source = "long-press" } = {}) {
   if (!isAbortAvailable() || abortRequestInFlight) return false;
   if (source !== "escape" && event?.button !== undefined && event.button !== 0) return false;
+  if (source === "escape") suppressEmptyPromptEscapeAction({ untilKeyup: true, graceMs: ABORT_LONG_PRESS_MS + EMPTY_PROMPT_ESCAPE_AFTER_ABORT_GRACE_MS });
   if (isAbortLongPressActive()) {
     resumeAbortLongPressAffordance();
     return true;
@@ -18425,6 +19179,41 @@ elements.compactButton.addEventListener("click", async () => {
   setComposerActionsOpen(false);
   await requestManualCompaction({ triggerButton: elements.compactButton });
 });
+function toggleModelSearchInput() {
+  if (elements.modelSearchInput?.hidden) showModelSearchInput();
+  else hideModelSearchInput();
+}
+
+elements.modelControlLabel?.addEventListener("click", (event) => {
+  event.preventDefault();
+  toggleModelSearchInput();
+});
+elements.modelControlLabel?.addEventListener("keydown", (event) => {
+  if (event.key !== "Enter" && event.key !== " ") return;
+  event.preventDefault();
+  toggleModelSearchInput();
+});
+elements.modelSelect?.addEventListener("pointerdown", (event) => {
+  if (!elements.modelSearchInput || !elements.modelSearchInput.hidden) return;
+  event.preventDefault();
+  showModelSearchInput();
+});
+elements.modelSelect?.addEventListener("focus", () => showModelSearchInput());
+elements.modelSearchInput?.addEventListener("input", () => {
+  populateModelSelect(availableModels, elements.modelSearchInput.value);
+  syncModelSelectToState();
+});
+elements.modelSearchInput?.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    elements.setModelButton?.click();
+  } else if (event.key === "Escape") {
+    elements.modelSearchInput.value = "";
+    populateModelSelect(availableModels, "");
+    syncModelSelectToState();
+    elements.modelSearchInput.focus();
+  }
+});
 elements.setModelButton.addEventListener("click", async () => {
   if (!elements.modelSelect.value) return;
   const tabContext = activeTabContext();
@@ -18458,6 +19247,33 @@ elements.setThinkingButton.addEventListener("click", async () => {
     if (isCurrentTabContext(tabContext)) addEvent(error.message, "error");
   }
 });
+elements.themeControlLabel?.addEventListener("click", (event) => {
+  event.preventDefault();
+  toggleThemeSearchInput();
+});
+elements.themeControlLabel?.addEventListener("keydown", (event) => {
+  if (event.key !== "Enter" && event.key !== " ") return;
+  event.preventDefault();
+  toggleThemeSearchInput();
+});
+elements.themeSelect?.addEventListener("pointerdown", (event) => {
+  if (!elements.themeSearchInput || !elements.themeSearchInput.hidden) return;
+  event.preventDefault();
+  showThemeSearchInput();
+});
+elements.themeSelect?.addEventListener("focus", () => showThemeSearchInput());
+elements.themeSearchInput?.addEventListener("input", () => populateThemeSelect(availableThemes, elements.themeSearchInput.value));
+elements.themeSearchInput?.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    const [theme] = populateThemeSelect(availableThemes, elements.themeSearchInput.value);
+    if (theme) setThemeByName(theme.name, { persist: true, announce: true }).catch((error) => addEvent(error.message || String(error), "error"));
+  } else if (event.key === "Escape") {
+    elements.themeSearchInput.value = "";
+    populateThemeSelect(availableThemes, "");
+    elements.themeSearchInput.focus();
+  }
+});
 elements.themeSelect.addEventListener("change", () => {
   setThemeByName(elements.themeSelect.value, { persist: true, announce: true }).catch((error) => addEvent(error.message || String(error), "error"));
 });
@@ -18477,6 +19293,7 @@ elements.openNetworkButton.addEventListener("click", openToNetwork);
 elements.serverActionSelect.addEventListener("change", updateServerActionButton);
 elements.runServerActionButton.addEventListener("click", () => runSelectedServerAction().catch((error) => addEvent(error.message || String(error), "error")));
 elements.updateNotificationUpdateButton?.addEventListener("click", () => runPiUpdateAndRestart().catch((error) => addEvent(error.message || String(error), "error")));
+elements.updateNotificationUpdateAllButton?.addEventListener("click", () => runPiUpdateAndRestart({ all: true }).catch((error) => addEvent(error.message || String(error), "error")));
 elements.updateNotificationDismissButton?.addEventListener("click", () => hideUpdateNotification({ remember: true }));
 updateServerActionButton();
 elements.agentDoneNotificationsToggle.addEventListener("change", () => {
@@ -18748,6 +19565,9 @@ document.addEventListener("visibilitychange", () => {
 window.addEventListener("pageshow", () => scheduleForegroundReconcile("page show", 0));
 window.addEventListener("focus", () => scheduleForegroundReconcile("window focus"));
 window.addEventListener("online", () => scheduleForegroundReconcile("network online", 0));
+window.addEventListener("storage", (event) => {
+  if (event.key === OPTIONAL_FEATURES_STORAGE_KEY) reconcileDisabledOptionalFeaturesFromStorage();
+});
 window.addEventListener("keydown", (event) => {
   if (event.key !== "Escape") return;
   if (event.defaultPrevented) return;
@@ -18806,6 +19626,10 @@ window.addEventListener("keydown", (event) => {
     else if (!event.repeat) startAbortLongPress(event, { source: "escape" });
     return;
   }
+  if (shouldSuppressEmptyPromptEscapeAction()) {
+    event.preventDefault();
+    return;
+  }
   if (event.repeat) {
     event.preventDefault();
     return;
@@ -18822,17 +19646,39 @@ window.addEventListener("keydown", (event) => {
   }
 });
 window.addEventListener("keyup", (event) => {
-  if (event.key === "Escape" && abortLongPressSource === "escape") scheduleAbortLongPressReleaseReset();
+  if (event.key !== "Escape") return;
+  if (abortLongPressSource === "escape") scheduleAbortLongPressReleaseReset();
+  finishEscapeAbortHoldSuppression();
 }, { capture: true });
 window.addEventListener("blur", () => {
   if (abortLongPressSource === "escape") scheduleAbortLongPressReleaseReset();
   else resetAbortLongPressAffordance();
+  finishEscapeAbortHoldSuppression();
 });
 
 elements.gitChangesRefreshButton?.addEventListener("click", refreshGitChangesDialog);
 elements.gitChangesPullButton?.addEventListener("click", () => pullGitChangesDialog().catch((error) => addEvent(error.message || String(error), "error")));
 elements.gitChangesCloseButton?.addEventListener("click", closeGitChangesDialog);
 elements.gitChangesBody?.addEventListener("scroll", updateGitChangesCurrentFileHeader, { passive: true });
+elements.gitChangesBody?.addEventListener("click", (event) => {
+  const currentHeader = event.target.closest(".git-current-file-header[data-git-current-file]");
+  if (currentHeader) {
+    const path = currentHeader.dataset.gitCurrentFile || "";
+    const file = elements.gitChangesBody?.querySelector(`.git-diff-file[data-git-diff-file=\"${CSS.escape(path)}\"]`);
+    if (!file) return;
+    file.open = !file.open;
+    updateGitChangesCurrentFileHeader();
+    return;
+  }
+  const button = event.target.closest("[data-git-changes-jump-file]");
+  if (!button) return;
+  const path = button.dataset.gitChangesJumpFile || "";
+  const file = elements.gitChangesBody?.querySelector(`.git-diff-file[data-git-diff-file=\"${CSS.escape(path)}\"]`);
+  if (!file) return;
+  file.open = true;
+  file.scrollIntoView({ block: "start", behavior: "smooth" });
+  requestAnimationFrame(updateGitChangesCurrentFileHeader);
+});
 elements.gitChangesDialog?.addEventListener("cancel", (event) => {
   event.preventDefault();
   closeGitChangesDialog();