@firstpick/pi-package-webui 0.4.8 → 0.5.0

package/public/app.js

@@ -117,6 +117,9 @@ const elements = {
   gitChangesRefreshButton: $("#gitChangesRefreshButton"),
   gitChangesPullButton: $("#gitChangesPullButton"),
   gitChangesCloseButton: $("#gitChangesCloseButton"),
+  modelControlLabel: $("#modelControlLabel"),
+  modelSearchInput: $("#modelSearchInput"),
+  modelSearchResults: $("#modelSearchResults"),
   modelSelect: $("#modelSelect"),
   setModelButton: $("#setModelButton"),
   thinkingSelect: $("#thinkingSelect"),
@@ -125,6 +128,9 @@ const elements = {
   thinkingVisibilityStatus: $("#thinkingVisibilityStatus"),
   terminalTabsLayoutSelect: $("#terminalTabsLayoutSelect"),
   terminalTabsLayoutStatus: $("#terminalTabsLayoutStatus"),
+  themeControlLabel: $("#themeControlLabel"),
+  themeSearchInput: $("#themeSearchInput"),
+  themeSearchResults: $("#themeSearchResults"),
   themeSelect: $("#themeSelect"),
   backgroundInput: $("#backgroundInput"),
   backgroundChooseButton: $("#backgroundChooseButton"),
@@ -349,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";
@@ -405,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";
@@ -491,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;
@@ -514,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();
@@ -933,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();
@@ -1954,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(() => {
@@ -2025,6 +2070,7 @@ function setComposerActionsOpen(open) {
     setBusyPromptBehaviorMenuOpen(false);
   }
   scheduleMobileDropdownScrollBoundsUpdate();
+  if (!shouldOpen) scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function isUserBashActive(tabId = activeTabId) {
@@ -2069,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]) {
@@ -2083,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);
@@ -2648,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 {
@@ -3786,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;
 }
@@ -3818,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();
@@ -4045,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();
@@ -4069,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 = {}) {
@@ -4077,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);
@@ -4777,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() {
@@ -6294,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();
 }
@@ -6653,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;
 }
 
@@ -6682,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) {
@@ -6739,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) {
@@ -6837,6 +7168,7 @@ function gitFooterFallbackMessage() {
 }
 
 function renderMinimalFooter() {
+  invalidateGitFooterRenderCache();
   hideFooterTooltip();
   const tab = activeTab();
   const workspaceLabel = latestWorkspace?.displayCwd || (tab?.cwd ? normalizeDisplayPath(tab.cwd) : "loading…");
@@ -6988,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;
 }
 
@@ -7002,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;
@@ -7010,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"),
@@ -7027,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);
 
@@ -7052,6 +7503,7 @@ function renderWorkspaceDashboard() {
 }
 
 function setFooterModelPickerOpen(open) {
+  const wasOpen = footerModelPickerOpen;
   footerModelPickerOpen = !!open;
   if (footerModelPickerOpen) {
     footerThinkingPickerOpen = false;
@@ -7067,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;
@@ -7085,6 +7539,7 @@ function setFooterThinkingPickerOpen(open) {
   document.body.classList.toggle("footer-model-picker-open", isFooterPickerOpen());
   renderFooter();
   updateFooterModelPickerPosition();
+  if (wasOpen && !footerThinkingPickerOpen) scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function normalizeFooterGitBranches(data = {}) {
@@ -7154,6 +7609,7 @@ async function loadFooterBranchPicker(tabContext = activeTabContext()) {
 }
 
 function setFooterBranchPickerOpen(open) {
+  const wasOpen = footerBranchPickerOpen;
   footerBranchPickerOpen = !!open;
   if (footerBranchPickerOpen) {
     footerModelPickerOpen = false;
@@ -7171,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) {
@@ -8691,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) {
@@ -9070,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);
@@ -9094,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;
@@ -9110,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");
@@ -9132,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; });
@@ -9893,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);
@@ -9926,6 +10483,7 @@ function renderWidgets() {
     node.textContent = `${key}\n${cleanLines.join("\n")}`;
     elements.widgetArea.append(node);
   }
+  restoreAppRunnerInputFocus(appRunnerInputFocus);
 }
 
 function setGitWorkflow(patch, { tabId = activeTabId } = {}) {
@@ -10218,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();
@@ -10263,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") {
@@ -10603,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") {
@@ -10613,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);
@@ -13822,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();
 }
@@ -14156,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;
@@ -14265,6 +14832,7 @@ function scheduleChatFollowScroll() {
 
 function scrollChatToBottom({ force = false } = {}) {
   if (deferChatFollowScrollDuringPointerActivation({ force })) return;
+  if (deferChatFollowScrollDuringInteractiveDropdown({ force })) return;
   if (force) autoFollowChat = true;
   if (!autoFollowChat) {
     updateJumpToLatestButton();
@@ -14361,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) {
@@ -14369,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) {
@@ -14377,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) {
@@ -14385,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) {
@@ -14572,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";
@@ -14598,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;
@@ -14709,18 +15285,23 @@ function renderOptionalFeatureControls() {
       optionalFeatureUnavailableMessage("remoteWebui"),
     );
   }
-  if (elements.networkControlField) {
-    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");
-  }
+  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);
@@ -14875,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();
@@ -14884,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();
@@ -15460,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) => {
@@ -15483,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", () => {
@@ -15973,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);
@@ -15989,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;
@@ -16075,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"
@@ -16282,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() {
@@ -16301,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;
     }
   }
@@ -16490,6 +17177,7 @@ function hideCommandSuggestions() {
   pathSuggestions = [];
   suggestionMode = "none";
   commandSuggestIndex = 0;
+  scheduleDeferredUiFlushAfterDropdownClose();
 }
 
 function setActiveCommandSuggestion(index) {
@@ -17458,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;
     }
@@ -18280,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;
@@ -18321,6 +19037,7 @@ function completeAbortLongPress() {
   if (!isAbortLongPressActive()) return;
   if (abortLongPressReleasePending) return;
   const source = abortLongPressSource;
+  if (source === "escape") suppressEmptyPromptEscapeAction({ untilKeyup: true });
   clearAbortLongPressResetTimer();
   clearAbortLongPressCompletionTimers();
   abortLongPressHandled = true;
@@ -18408,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;
@@ -18461,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();
@@ -18494,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"));
 });
@@ -18785,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;
@@ -18843,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;
@@ -18859,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();