@firstpick/pi-package-webui 0.4.2 → 0.4.4

package/public/app.js

@@ -58,6 +58,7 @@ const elements = {
   skillEditorCancelButton: $("#skillEditorCancelButton"),
   skillEditorSaveButton: $("#skillEditorSaveButton"),
   sendButton: $("#sendButton"),
+  btwButton: $("#btwButton"),
   commandSuggest: $("#commandSuggest"),
   attachmentTray: $("#attachmentTray"),
   attachButton: $("#attachButton"),
@@ -85,6 +86,7 @@ const elements = {
   optionsCommandPaletteButton: $("#optionsCommandPaletteButton"),
   optionsResumeButton: $("#optionsResumeButton"),
   optionsReloadButton: $("#optionsReloadButton"),
+  optionsRemoteButton: $("#optionsRemoteButton"),
   optionsNameButton: $("#optionsNameButton"),
   optionsCloneButton: $("#optionsCloneButton"),
   optionsSettingsButton: $("#optionsSettingsButton"),
@@ -197,6 +199,7 @@ const elements = {
   commandPaletteInput: $("#commandPaletteInput"),
   commandPaletteList: $("#commandPaletteList"),
   commandPaletteHint: $("#commandPaletteHint"),
+  commandPaletteCloseButton: $("#commandPaletteCloseButton"),
   editRetryDialog: $("#editRetryDialog"),
   editRetryMessage: $("#editRetryMessage"),
   editRetryText: $("#editRetryText"),
@@ -299,6 +302,11 @@ let statsOverlayLastScope = "14";
 let statsOverlayCalibrationMessage = "";
 let statsOverlayCalibrationBusy = "";
 let latestStatsOverlayPayload = null;
+let latestBtwWidgetPayload = null;
+let btwWidgetDismissedId = "";
+let btwWidgetComposerOpen = false;
+let btwWidgetInputDraft = "";
+let btwWidgetFocusAfterRender = false;
 let latestWorkspace = null;
 let latestNetwork = null;
 let webuiVersion = "";
@@ -316,6 +324,8 @@ let updateStatusRefreshTimer = null;
 let updateNotificationHideTimer = null;
 let backendOfflineNoticeShown = false;
 let latestMessages = [];
+let latestMessagesSessionKey = "";
+const tabMessagesCache = new Map();
 let promptHistoryByTab = new Map();
 let promptHistoryNavigation = null;
 let transientMessages = [];
@@ -340,6 +350,8 @@ let toolOutputGloballyExpanded = false;
 let agentDoneNotificationPermissionRequested = false;
 let agentDoneNotificationFallbackNoted = false;
 let agentDoneNotificationKeys = new Set();
+let pendingAgentDoneNotificationTimers = new Map();
+let autoRetryingTabs = new Set();
 let availableModels = [];
 let availableThemes = [];
 let currentThemeName = "catppuccin-mocha";
@@ -374,7 +386,17 @@ let workspaceDashboardCollapsed = false;
 let commandPaletteIndex = 0;
 let commandPaletteItems = [];
 let activeEditRetry = null;
+let activePointerActivation = null;
+let pointerActivationTimeout = null;
+let deferredChatFollowScroll = false;
+const deferredUiRenderCallbacks = new Map();
 let abortLongPressTimer = null;
+let abortLongPressTickTimer = null;
+let abortLongPressResetTimer = null;
+let abortLongPressStartedAt = 0;
+let abortLongPressDeadlineAt = 0;
+let abortLongPressSource = "long-press";
+let abortLongPressReleasePending = false;
 let abortLongPressHandled = false;
 const dialogQueue = [];
 const SIDE_PANEL_STORAGE_KEY = "pi-webui-side-panel-collapsed";
@@ -407,11 +429,21 @@ 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 BTW_WEBUI_STATUS_KEY = "btw-webui";
+const BTW_OUTPUT_WIDGET_KEY = "btw:output";
+const BTW_FOOTER_WIDGET_KEY = "btw:footer";
+const BTW_WIDGET_PAYLOAD_PREFIX = "BTW_WEBUI_PAYLOAD ";
+const BTW_WEBUI_PAYLOAD_TYPES = new Set(["firstpick.pi-extension-btw.overlay", "firstpick.pi-extension-btw.output"]);
+const WORKFLOW_WIDGET_PAYLOAD_PREFIX = "WORKFLOW_WEBUI_PAYLOAD ";
+const WORKFLOW_SUBPROCESS_PAYLOAD_TYPE = "firstpick.pi-extension-workflows.subprocess";
+const WORKFLOW_SUBPROCESS_PAYLOAD_VERSION = 1;
 const GIT_CHANGES_RENDER_ROW_LIMIT = 4000;
 const LAST_USER_PROMPT_STORAGE_KEY = "pi-webui-last-user-prompts";
 const PROMPT_HISTORY_STORAGE_KEY = "pi-webui-prompt-history";
 const PROMPT_LIST_STORAGE_KEY = "pi-webui-prompt-lists";
 const WORKSPACE_DASHBOARD_STORAGE_KEY = "pi-webui-workspace-dashboard-collapsed";
+const POINTER_ACTIVATION_SELECTOR = "button, a[href], input, select, textarea, summary, [role='button'], [tabindex]:not([tabindex='-1'])";
+const POINTER_ACTIVATION_RENDER_DEFER_MAX_MS = 1200;
 const PROMPT_HISTORY_LIMIT_PER_TAB = 50;
 const ATTACHMENT_MAX_FILES = 12;
 const ATTACHMENT_MAX_FILE_BYTES = 64 * 1024 * 1024;
@@ -444,7 +476,9 @@ const UPDATE_STATUS_INITIAL_DELAY_MS = 1800;
 const RUN_INDICATOR_TICK_MS = 1000;
 const RUN_INDICATOR_START_GRACE_MS = 2500;
 const RUN_INDICATOR_STATE_RECHECK_MS = 5000;
-const ABORT_LONG_PRESS_MS = 700;
+const ABORT_LONG_PRESS_MS = 3000;
+const ABORT_LONG_PRESS_TICK_MS = 100;
+const ABORT_LONG_PRESS_RELEASE_GRACE_MS = 350;
 const STREAM_OUTPUT_HIDE_DELAY_MS = 300;
 const STREAM_OUTPUT_TOOLCALL_GUARD_MS = 220;
 const STREAM_OUTPUT_MIN_VISIBLE_MS = 900;
@@ -454,6 +488,7 @@ const TODO_PROGRESS_LINE_REGEX = /^\s*(?:(?:[-*]|\d+[.)])\s*)?\[(?: |x|X|-)\]\s+
 const TODO_PROGRESS_PARTIAL_LINE_REGEX = /^\s*(?:(?:[-*]|\d+[.)])\s*)?\[(?: |x|X|-)?\]?\s*.*$/;
 const CHAT_SCROLL_KEYS = new Set(["ArrowDown", "ArrowUp", "End", "Home", "PageDown", "PageUp", " "]);
 const TAB_ACTIVITY_IDLE_RECONCILE_GRACE_MS = 1200;
+const AGENT_DONE_NOTIFICATION_RETRY_GRACE_MS = 1200;
 const FOREGROUND_RECONCILE_DELAY_MS = 120;
 const TAB_GROUP_STATUS_PRIORITY = ["blocked", "done", "working", "idle"];
 const EXTENSION_UI_BLOCKING_METHODS = new Set(["select", "confirm", "input", "editor"]);
@@ -475,18 +510,28 @@ let liveToolRenderTimer = null;
 // commands and live widget events), not npm package folders. This keeps local dev
 // symlinks and independently installed packages working.
 const optionalFeatureAvailability = {
+  btwCommand: false,
   gitWorkflow: false,
   releaseNpm: false,
   releaseAur: false,
+  workflows: false,
   safetyGuard: false,
   statsCommand: false,
   gitFooterStatus: false,
   tuiSkillsCommand: false,
   todoProgressWidget: false,
   tuiToolsCommand: false,
+  remoteWebui: false,
   themeBundle: false,
 };
 const OPTIONAL_FEATURES = [
+  {
+    id: "btwCommand",
+    label: "/btw side questions",
+    packageName: "@firstpick/pi-extension-btw",
+    capabilityLabel: "/btw or btw:output widget event",
+    description: "Ephemeral side-question command with TUI overlay and browser output-widget rendering.",
+  },
   {
     id: "gitWorkflow",
     label: "Guided Git workflow",
@@ -508,6 +553,13 @@ const OPTIONAL_FEATURES = [
     capabilityLabel: "/release-aur",
     description: "Publish menu action, setup helpers, skills, and AUR release widgets.",
   },
+  {
+    id: "workflows",
+    label: "Workflows",
+    packageName: "@firstpick/pi-extension-workflows",
+    capabilityLabel: "/workflow or workflow subprocess widget event",
+    description: "Modular workflow runner with live subprocess output shown in a non-blocking Web UI widget.",
+  },
   {
     id: "safetyGuard",
     label: "Safety guard",
@@ -536,6 +588,13 @@ const OPTIONAL_FEATURES = [
     capabilityLabel: "RPC /tools from tools extension",
     description: "Terminal-native active-tool manager alongside WebUI-native /tools toggles.",
   },
+  {
+    id: "remoteWebui",
+    label: "Remote WebUI",
+    packageName: "@firstpick/pi-package-remote-webui",
+    capabilityLabel: "/remote",
+    description: "Trusted-LAN QR helper for opening the Web UI from mobile browsers.",
+  },
   {
     id: "gitFooterStatus",
     label: "Git footer status",
@@ -560,20 +619,28 @@ const OPTIONAL_FEATURES = [
 ];
 const OPTIONAL_FEATURE_BY_ID = new Map(OPTIONAL_FEATURES.map((feature) => [feature.id, feature]));
 const OPTIONAL_COMMAND_FEATURES = new Map([
+  ["btw", "btwCommand"],
+  ["btw-transfer", "btwCommand"],
+  ["btw-status", "btwCommand"],
   ["git-staged-msg", "gitWorkflow"],
   ["git-branch-name", "gitWorkflow"],
   ["pr", "gitWorkflow"],
   ["release-npm", "releaseNpm"],
   ["release-aur", "releaseAur"],
+  ["workflow", "workflows"],
+  ["workflow-clear", "workflows"],
   ["safety-guard", "safetyGuard"],
   ["skills", "tuiSkillsCommand"],
   ["tools", "tuiToolsCommand"],
+  ["remote", "remoteWebui"],
   ["stats", "statsCommand"],
   ["git-footer-refresh", "gitFooterStatus"],
   ["todo-progress-status", "todoProgressWidget"],
 ]);
 const HIDDEN_COMMAND_NAMES = new Set(["webui-tree-navigate", "webui-helper"]);
 HIDDEN_COMMAND_NAMES.add("stats-webui");
+HIDDEN_COMMAND_NAMES.add("btw-status");
+HIDDEN_COMMAND_NAMES.add("btw-transfer");
 const NATIVE_SELECTOR_COMMANDS = new Set(["model", "settings", "theme", "fork", "clone", "name", "resume", "tree", "login", "logout", "scoped-models", "tools", "skills"]);
 const SETTINGS_THINKING_OPTIONS = ["off", "minimal", "low", "medium", "high", "xhigh"];
 const SETTINGS_TRANSPORT_OPTIONS = ["sse", "websocket", "websocket-cached", "auto"];
@@ -597,6 +664,7 @@ const optionalFeatureInstallInProgress = new Set();
 const optionalFeaturePackageStatuses = new Map();
 const optionalFeatureInstallMessages = new Map();
 const gitFooterPayloadRefreshInFlightByTab = new Set();
+const gitFooterPiCalibrationInFlightByTab = new Set();
 
 function createGitWorkflowActionsDone(patch = {}) {
   return {
@@ -826,6 +894,82 @@ function delay(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+function activationControlFromEvent(event) {
+  const target = event?.target instanceof Element ? event.target : null;
+  const control = target?.closest?.(POINTER_ACTIVATION_SELECTOR);
+  if (!control || control === document.body || control === document.documentElement) return null;
+  if (control.disabled || control.getAttribute("aria-disabled") === "true") return null;
+  return control;
+}
+
+function shouldDeferUiRenderForPointerActivation() {
+  return Boolean(
+    activePointerActivation
+      && performance.now() - activePointerActivation.startedAt <= POINTER_ACTIVATION_RENDER_DEFER_MAX_MS,
+  );
+}
+
+function deferUiRenderDuringPointerActivation(key, callback) {
+  if (!shouldDeferUiRenderForPointerActivation()) return false;
+  deferredUiRenderCallbacks.set(key, callback);
+  return true;
+}
+
+function deferChatFollowScrollDuringPointerActivation({ force = false } = {}) {
+  if (force || !shouldDeferUiRenderForPointerActivation()) return false;
+  deferredChatFollowScroll = true;
+  return true;
+}
+
+function flushDeferredUiRenders() {
+  const callbacks = [...deferredUiRenderCallbacks.values()];
+  deferredUiRenderCallbacks.clear();
+  const shouldScroll = deferredChatFollowScroll;
+  deferredChatFollowScroll = false;
+
+  for (const callback of callbacks) {
+    try {
+      callback();
+    } catch (error) {
+      console.error("deferred Web UI render failed", error);
+    }
+  }
+  if (shouldScroll) scrollChatToBottom();
+}
+
+function beginPointerActivation(event) {
+  if (event?.button !== undefined && event.button !== 0) return;
+  const control = activationControlFromEvent(event);
+  if (!control) return;
+  clearTimeout(pointerActivationTimeout);
+  const activation = { pointerId: event.pointerId, startedAt: performance.now(), control };
+  activePointerActivation = activation;
+  pointerActivationTimeout = setTimeout(() => {
+    if (activePointerActivation === activation) activePointerActivation = null;
+    pointerActivationTimeout = null;
+    flushDeferredUiRenders();
+  }, POINTER_ACTIVATION_RENDER_DEFER_MAX_MS);
+}
+
+function finishPointerActivation(event) {
+  if (!activePointerActivation) return;
+  if (event?.pointerId !== undefined && activePointerActivation.pointerId !== event.pointerId) return;
+  const activation = activePointerActivation;
+  clearTimeout(pointerActivationTimeout);
+  pointerActivationTimeout = null;
+  setTimeout(() => {
+    if (activePointerActivation === activation) activePointerActivation = null;
+    flushDeferredUiRenders();
+  }, 0);
+}
+
+function cancelPointerActivation() {
+  clearTimeout(pointerActivationTimeout);
+  pointerActivationTimeout = null;
+  activePointerActivation = null;
+  flushDeferredUiRenders();
+}
+
 function isMobileView() {
   return mobileViewMedia?.matches || false;
 }
@@ -834,6 +978,36 @@ function isSidePanelOverlayView() {
   return sidePanelOverlayMedia?.matches || false;
 }
 
+function mobileDropdownViewportHeight() {
+  return window.visualViewport?.height || window.innerHeight || document.documentElement.clientHeight || 0;
+}
+
+function mobileDropdownConfigs() {
+  return [
+    { menu: elements.publishButton?.parentElement, button: elements.publishButton, panel: elements.publishButton?.parentElement?.querySelector(".composer-publish-menu-panel") },
+    { menu: elements.nativeCommandMenuButton?.parentElement, button: elements.nativeCommandMenuButton, panel: elements.nativeCommandMenuButton?.parentElement?.querySelector(".composer-publish-menu-panel") },
+    { menu: elements.optionsMenuButton?.parentElement, button: elements.optionsMenuButton, panel: elements.optionsMenu },
+    { menu: elements.appRunnerMenu, button: elements.appRunnerMenuButton, panel: elements.appRunnerMenuPanel },
+  ];
+}
+
+function updateMobileDropdownScrollBounds() {
+  const viewportHeight = mobileDropdownViewportHeight();
+  for (const { menu, button, panel } of mobileDropdownConfigs()) {
+    if (!panel) continue;
+    panel.style.removeProperty("--mobile-dropdown-max-height");
+    if (!isMobileView() || !menu?.classList.contains("open") || !viewportHeight) continue;
+    const anchorRect = (button || menu).getBoundingClientRect();
+    const availableAbove = Math.floor(anchorRect.top - 8);
+    const boundedHeight = Math.max(72, Math.min(viewportHeight - 16, availableAbove));
+    panel.style.setProperty("--mobile-dropdown-max-height", `${boundedHeight}px`);
+  }
+}
+
+function scheduleMobileDropdownScrollBoundsUpdate() {
+  requestAnimationFrame(updateMobileDropdownScrollBounds);
+}
+
 function readStoredSidePanelCollapsed() {
   try {
     const stored = localStorage.getItem(SIDE_PANEL_STORAGE_KEY);
@@ -1592,6 +1766,7 @@ function setComposerActionsOpen(open) {
     setOptionsMenuOpen(false);
     setBusyPromptBehaviorMenuOpen(false);
   }
+  scheduleMobileDropdownScrollBoundsUpdate();
 }
 
 function isUserBashActive(tabId = activeTabId) {
@@ -1643,11 +1818,17 @@ function updateComposerModeButtons() {
     button.hidden = !runActive;
     button.disabled = !runActive;
   }
-  elements.abortButton.hidden = !abortAvailable;
-  elements.abortButton.disabled = !abortAvailable || abortRequestInFlight;
-  elements.abortButton.textContent = abortRequestInFlight ? "Aborting…" : "Abort";
-  elements.abortButton.title = abortAvailable ? "Abort the active Pi run (Esc or hold)" : "Abort is available while Pi is running";
-  elements.abortButton.setAttribute("aria-label", elements.abortButton.title);
+  const abortHoldActive = isAbortLongPressActive();
+  if (!abortAvailable && !abortHoldActive) resetAbortLongPressAffordance();
+  elements.abortButton.hidden = !abortAvailable && !abortHoldActive;
+  elements.abortButton.disabled = (!abortAvailable && !abortHoldActive) || abortRequestInFlight;
+  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);
+  }
   renderBusyPromptBehaviorTag();
   document.body.classList.toggle("pi-run-active", runActive || abortAvailable);
 }
@@ -1851,6 +2032,7 @@ function updateVisualViewportVars() {
     syncMobileChatToBottomForInput();
   }
   updateFooterModelPickerPosition();
+  updateMobileDropdownScrollBounds();
 }
 
 function installViewportHandlers() {
@@ -3367,6 +3549,15 @@ function setOptionalFeatureDisabled(featureId, disabled) {
     statusEntries.delete(GIT_FOOTER_WEBUI_STATUS_KEY);
     clearGitFooterWebuiPayloadCache();
   }
+  if (featureId === "btwCommand") {
+    statusEntries.delete(BTW_WEBUI_STATUS_KEY);
+    widgets.delete(BTW_OUTPUT_WIDGET_KEY);
+    widgets.delete(BTW_FOOTER_WIDGET_KEY);
+    latestBtwWidgetPayload = null;
+    btwWidgetDismissedId = "";
+    btwWidgetComposerOpen = false;
+    btwWidgetInputDraft = "";
+  }
   storeDisabledOptionalFeatures();
   renderOptionalFeatureDependentDisplays();
   const tabContext = activeTabContext();
@@ -3726,11 +3917,17 @@ function syncTabMetadata(nextTabs = []) {
     if (!liveIds.has(tabId)) {
       tabActivities.delete(tabId);
       tabSeenCompletionSerials.delete(tabId);
+      autoRetryingTabs.delete(tabId);
+      suppressPendingAgentDoneNotificationsForTab(tabId, { markSeen: false });
       actionFeedbackByTab.delete(tabId);
       skillUsageByTab.delete(tabId);
+      tabMessagesCache.delete(tabId);
       clearGitWorkflowForTab(tabId);
     }
   }
+  for (const tabId of tabMessagesCache.keys()) {
+    if (!liveIds.has(tabId)) tabMessagesCache.delete(tabId);
+  }
   pruneSkillUsageForKnownTabs(liveIds);
 }
 
@@ -3894,6 +4091,18 @@ function ingestEventTabActivity(event) {
   if (changed) renderTabs();
 }
 
+function trackAutoRetryStateFromEvent(event) {
+  const tabId = event?.tabId || activeTabId;
+  if (!tabId) return;
+  if (event.type === "auto_retry_start") {
+    autoRetryingTabs.add(tabId);
+    suppressPendingAgentDoneNotificationsForTab(tabId);
+    markTabWorkingLocally(tabId);
+  } else if (event.type === "auto_retry_end") {
+    autoRetryingTabs.delete(tabId);
+  }
+}
+
 function rememberActiveTab() {
   try {
     if (activeTabId) localStorage.setItem(TAB_STORAGE_KEY, activeTabId);
@@ -3983,8 +4192,13 @@ function resetActiveTabUi() {
   currentState = null;
   latestStats = null;
   latestStatsOverlayPayload = null;
+  latestBtwWidgetPayload = null;
+  btwWidgetDismissedId = "";
+  btwWidgetComposerOpen = false;
+  btwWidgetInputDraft = "";
   latestWorkspace = null;
   latestMessages = [];
+  latestMessagesSessionKey = "";
   clearRunIndicatorActivity({ render: false });
   statusEntries.clear();
   widgets.clear();
@@ -4016,8 +4230,10 @@ function resetActiveTabUi() {
   renderAppRunnerControls();
   renderWidgets();
   renderGitWorkflow();
-  renderFooter();
-  renderFeedbackTray();
+  if (!restoreCachedMessagesForActiveTab()) {
+    renderFooter();
+    renderFeedbackTray();
+  }
 }
 
 function tabGroupStatusRank(state) {
@@ -4256,6 +4472,7 @@ function moveNewTabMenuFocus(delta) {
 }
 
 function renderTabs() {
+  if (deferUiRenderDuringPointerActivation("tabs", renderTabs)) return;
   const active = activeTab();
   const activeIndicator = active ? tabIndicator(active) : null;
   elements.terminalTabsToggleButton.textContent = active ? `${activeIndicator.glyph} ${active.title}${tabs.length > 1 ? ` · ${tabs.length}` : ""}` : "Tabs";
@@ -4280,7 +4497,7 @@ function renderTabs() {
   updateDocumentTitle();
   renderWorkspaceDashboard();
   renderContextMeter();
-  if (elements.commandPaletteDialog?.open) renderCommandPalette();
+  if (elements.commandPaletteDialog?.open) renderCommandPalette({ preserveScroll: true });
   syncTabPolling();
 }
 
@@ -4311,6 +4528,7 @@ async function switchTab(tabId) {
   footerBranchPickerOpen = false;
   footerBranchPickerRequestSerial += 1;
   saveActiveDraft();
+  cacheMessagesForTab(activeTabId);
   const tabContext = setActiveTabId(tabId, { remember: true });
   resetActiveTabUi();
   renderTabs();
@@ -4379,6 +4597,20 @@ function tabHasActiveAgent(tab) {
   return !!activity.isWorking || indicator.state === "working" || indicator.state === "blocked";
 }
 
+function activeTabHasConversationMessages(tab = activeTab()) {
+  const tabId = tab?.id || activeTabId;
+  if (!tabId) return false;
+  if (tabId !== activeTabId && !latestMessagesSessionKey.startsWith(`${tabId}|`)) return false;
+  return latestMessages.some((message) => ["user", "assistant"].includes(message?.role));
+}
+
+function shouldOpenCwdChangeInNewTab(tab) {
+  return !!tab?.conversationStarted
+    || activeTabHasConversationMessages(tab)
+    || stateHasVisibleWork(currentState)
+    || tabHasActiveAgent(tab);
+}
+
 function confirmCloseTerminalTabs(targetTabs, label) {
   const count = targetTabs.length;
   const noun = count === 1 ? "tab" : "tabs";
@@ -4423,6 +4655,7 @@ async function closeTerminalTabs(tabIds, { label = "selected terminal tabs" } =
       clearAttachments(id);
       clearGitWorkflowForTab(id);
       appRunnerDataByTab.delete(id);
+      tabMessagesCache.delete(id);
     }
     clearOpenTerminalTabGroup(null, { force: true });
 
@@ -4689,6 +4922,36 @@ function agentDoneNotificationKey(tabId, activity = {}) {
   return `${tabId}:${Number.isFinite(serial) && serial > 0 ? serial : "done"}`;
 }
 
+function isAutoRetryingTab(tabId) {
+  return !!tabId && autoRetryingTabs.has(tabId);
+}
+
+function clearPendingAgentDoneNotification(key, { markSeen = false } = {}) {
+  const pending = pendingAgentDoneNotificationTimers.get(key);
+  if (!pending) return false;
+  clearTimeout(pending.timer);
+  pendingAgentDoneNotificationTimers.delete(key);
+  if (markSeen) agentDoneNotificationKeys.add(key);
+  return true;
+}
+
+function suppressPendingAgentDoneNotificationsForTab(tabId, { markSeen = true } = {}) {
+  if (!tabId) return;
+  for (const [key, pending] of pendingAgentDoneNotificationTimers) {
+    if (pending.tabId === tabId) clearPendingAgentDoneNotification(key, { markSeen });
+  }
+}
+
+function queueAgentDoneBrowserNotification({ key, tabId, title, body }) {
+  clearPendingAgentDoneNotification(key);
+  const timer = setTimeout(() => {
+    pendingAgentDoneNotificationTimers.delete(key);
+    if (isAutoRetryingTab(tabId)) return;
+    showAgentDoneBrowserNotification({ tabId, title, body });
+  }, AGENT_DONE_NOTIFICATION_RETRY_GRACE_MS);
+  pendingAgentDoneNotificationTimers.set(key, { tabId, timer });
+}
+
 function notifyAgentDone(tabOrId, { activity = null, tabTitle = "" } = {}) {
   if (!agentDoneNotificationsEnabled) return;
   const tabId = typeof tabOrId === "string" ? tabOrId : tabOrId?.id || activeTabId;
@@ -4699,9 +4962,11 @@ function notifyAgentDone(tabOrId, { activity = null, tabTitle = "" } = {}) {
   const key = agentDoneNotificationKey(tabId, normalizedActivity);
   if (agentDoneNotificationKeys.has(key)) return;
   agentDoneNotificationKeys.add(key);
+  if (isAutoRetryingTab(tabId)) return;
 
   const displayTitle = tabTitle || tab?.title || "terminal";
-  showAgentDoneBrowserNotification({
+  queueAgentDoneBrowserNotification({
+    key,
     tabId,
     title: "Pi finished work",
     body: `${displayTitle} finished its agent run.`,
@@ -5068,6 +5333,58 @@ async function toggleFooterAutoCompaction(tabContext = activeTabContext()) {
   }
 }
 
+function scheduleGitFooterPiCalibrationRefresh(tabContext, delays = [600, 1600]) {
+  for (const delayMs of delays) {
+    setTimeout(() => {
+      if (isCurrentTabContext(tabContext)) requestGitFooterWebuiPayload(tabContext, { force: true });
+    }, delayMs);
+  }
+}
+
+async function runGitFooterPiCalibration(mode = "current", tabContext = activeTabContext()) {
+  if (!tabContext.tabId) return;
+  if (gitFooterPiCalibrationInFlightByTab.has(tabContext.tabId)) return;
+  if (currentState?.isStreaming || currentState?.isCompacting) {
+    addEvent("PI calibration can run after the active agent work finishes.", "warn");
+    return;
+  }
+
+  const commandName = resolveAvailableCommandName("calibrate", { rpcOnly: true });
+  if (!commandName) {
+    addEvent("PI calibration unavailable: /calibrate is not loaded in this Pi tab.", "warn");
+    return;
+  }
+  if (mode === "probe" && !confirm("Start an isolated PI calibration probe? This sends one tiny model request and may incur provider token usage.")) return;
+
+  const command = mode === "probe" ? `/${commandName}` : `/${commandName} current`;
+  gitFooterPiCalibrationInFlightByTab.add(tabContext.tabId);
+  renderFooter();
+  try {
+    await sendPrompt("prompt", command, { targetTabId: tabContext.tabId, throwOnError: true });
+    if (!isCurrentTabContext(tabContext)) return;
+    addEvent(mode === "probe" ? "PI calibration probe started; refreshing git footer value after it records…" : "PI calibration requested; refreshing git footer value…", "info");
+    scheduleGitFooterPiCalibrationRefresh(tabContext, mode === "probe" ? [5000, 14000] : [600, 1600]);
+  } catch (error) {
+    if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+  } finally {
+    gitFooterPiCalibrationInFlightByTab.delete(tabContext.tabId);
+    if (isCurrentTabContext(tabContext)) renderFooter();
+  }
+}
+
+function applyGitFooterPiCalibrationOptions(chip, options) {
+  if (chip?.key !== "pi" || !FOOTER_PAYLOAD_ACTIONS.has(chip?.action)) return "";
+  const tabContext = activeTabContext();
+  const busy = !!tabContext.tabId && gitFooterPiCalibrationInFlightByTab.has(tabContext.tabId);
+  const mode = chip.action === "calibrate-probe" ? "probe" : "current";
+  options.onClick = () => runGitFooterPiCalibration(mode);
+  if (busy) options.ariaBusy = true;
+  if (busy) return "Calibrating PI estimate and refreshing this value…";
+  return mode === "probe"
+    ? "Click to start an isolated PI calibration probe, then refresh this value."
+    : "Click to calibrate this uncalibrated PI estimate from the current session, then refresh this value.";
+}
+
 function applyGitFooterContextToggleOptions(chip, options) {
   if (chip?.key !== "context") return "";
   options.onClick = () => toggleFooterAutoCompaction();
@@ -5249,6 +5566,7 @@ function footerMeta(label, value, className = "", options = {}) {
 }
 
 const FOOTER_PAYLOAD_TONES = new Set(["pink", "blue", "mauve", "yellow", "green", "teal"]);
+const FOOTER_PAYLOAD_ACTIONS = new Set(["calibrate-current", "calibrate-probe"]);
 const FOOTER_CHANGED_FILE_KINDS = new Set(["modified", "staged", "untracked", "conflicted"]);
 const FOOTER_CHANGED_FILE_KIND_ORDER = ["modified", "staged", "untracked", "conflicted"];
 const FOOTER_CHANGED_FILE_KIND_LABELS = {
@@ -5318,6 +5636,7 @@ function normalizeFooterPayloadChip(value, index) {
     tone: FOOTER_PAYLOAD_TONES.has(value.tone) ? value.tone : "",
     title: cleanFooterPayloadText(value.title, "", 4000),
   };
+  if (FOOTER_PAYLOAD_ACTIONS.has(value.action)) chip.action = value.action;
   if (Array.isArray(value.files)) {
     const files = value.files.map(normalizeFooterPayloadChangedFile).filter(Boolean).slice(0, 80);
     if (files.length) chip.files = files;
@@ -5552,7 +5871,7 @@ function applyFooterChangedFilesDropdown(node, chip) {
 
 function renderGitFooterPayloadMetric(chip) {
   const options = { tooltipAlign: gitFooterTooltipAlign(chip) };
-  const action = applyGitFooterContextToggleOptions(chip, options);
+  const action = applyGitFooterPiCalibrationOptions(chip, options) || applyGitFooterContextToggleOptions(chip, options);
   options.title = gitFooterPayloadTooltip(chip, { action });
   const node = footerMetric(chip.icon || "•", chip.label, chip.value, chip.tone ? `tone-${chip.tone}` : "", options);
   return chip.contextUsage ? applyFooterContextUsage(node, chip.contextUsage) : node;
@@ -6183,6 +6502,7 @@ async function requestManualCompaction({ triggerButton = null } = {}) {
 }
 
 function renderContextMeter() {
+  if (deferUiRenderDuringPointerActivation("context-meter", renderContextMeter)) return;
   const root = elements.contextMeterBar;
   if (!root) return;
   const tab = activeTab();
@@ -6239,6 +6559,7 @@ function dashboardAction(label, handler, className = "") {
 }
 
 function renderWorkspaceDashboard() {
+  if (deferUiRenderDuringPointerActivation("workspace-dashboard", renderWorkspaceDashboard)) return;
   const root = elements.workspaceDashboard;
   if (!root) return;
   const tab = activeTab();
@@ -7010,6 +7331,12 @@ async function changeActiveTabCwd() {
   const currentCwd = latestWorkspace?.cwd || tab.cwd || "";
   const cwd = await pickCwd(tab, currentCwd);
   if (!isCurrentTabContext(tabContext) || !cwd || cwd === currentCwd) return;
+
+  if (shouldOpenCwdChangeInNewTab(tab)) {
+    await createTerminalTab(cwd, { triggerButton: null });
+    return;
+  }
+
   if (!window.confirm(`Restart ${tab.title} in:\n${cwd}\n\nCurrent in-flight work in this tab will be stopped. The conversation continues in the new directory.`)) return;
 
   saveActiveDraft();
@@ -7037,6 +7364,7 @@ async function changeActiveTabCwd() {
 }
 
 function renderFooter() {
+  if (deferUiRenderDuringPointerActivation("footer", renderFooter)) return;
   const gitFooterPayload = parseGitFooterWebuiPayload();
   if (gitFooterPayload) {
     renderGitFooterPayload(footerPayloadWithLiveModel(gitFooterPayload));
@@ -7269,6 +7597,7 @@ function initializeCodexUsage() {
 }
 
 function renderStatus() {
+  if (deferUiRenderDuringPointerActivation("status", renderStatus)) return;
   const state = currentState;
   updateComposerModeButtons();
   const running = state?.isStreaming ? "running" : "idle";
@@ -7511,6 +7840,10 @@ function releaseNpmLineTone(line) {
   if (/^(WARN|warning)\b/i.test(clean)) return "warn";
   if (/^(INFO|npm notice|notice)\b/i.test(clean)) return "info";
   if (/^RELEASE_NPM_EVENT\b/.test(clean)) return "event";
+  if (/^\[[0-9:]+\]\s+\[[^\]]+\]\s+\$/.test(clean)) return "command";
+  if (/\b(STDERR|failed|error|exited with code)\b/i.test(clean)) return "fail";
+  if (/\b(completed|succeeded|agent completed|tool completed)\b/i.test(clean)) return "pass";
+  if (/\b(started|running|auto retry|compaction)\b/i.test(clean)) return "info";
   return "";
 }
 
@@ -7720,6 +8053,74 @@ function renderReleaseAurLogWidget() {
   return node;
 }
 
+function parseWorkflowSubprocessPayload(lines) {
+  const raw = String(lines?.[0] || "").trim();
+  if (!raw) return null;
+  const json = raw.startsWith(WORKFLOW_WIDGET_PAYLOAD_PREFIX) ? raw.slice(WORKFLOW_WIDGET_PAYLOAD_PREFIX.length) : raw;
+  try {
+    const payload = JSON.parse(json);
+    if (payload?.type !== WORKFLOW_SUBPROCESS_PAYLOAD_TYPE || payload.version !== WORKFLOW_SUBPROCESS_PAYLOAD_VERSION) return null;
+    return payload;
+  } catch {
+    return null;
+  }
+}
+
+function workflowSubprocessIsLive(payload) {
+  return payload?.status === "queued" || payload?.status === "running" || Number(payload?.taskCounts?.running || 0) > 0;
+}
+
+function workflowTaskCountLabel(payload) {
+  const counts = payload?.taskCounts || {};
+  const done = Number(counts.completed || 0);
+  const total = Number(counts.total || 0);
+  const failed = Number(counts.failed || 0);
+  const cancelled = Number(counts.cancelled || 0);
+  return `${done}/${total} done${failed ? ` · ${failed} failed` : ""}${cancelled ? ` · ${cancelled} cancelled` : ""}`;
+}
+
+function renderWorkflowSubprocessWidget() {
+  if (!isOptionalFeatureEnabled("workflows")) return null;
+  const payload = parseWorkflowSubprocessPayload(getWidgetLines("workflow:subprocess"));
+  if (!payload) return null;
+
+  const live = workflowSubprocessIsLive(payload);
+  const node = make("section", `widget release-npm-widget workflow-widget ${live ? "workflow-live-widget" : "workflow-log-widget"}`);
+  node.setAttribute("aria-label", "workflow subprocess output");
+
+  const header = make("div", "release-npm-header");
+  const titleWrap = make("div", "release-npm-title-wrap");
+  titleWrap.append(
+    make("span", "release-npm-kicker", "workflow subprocesses"),
+    make("strong", "release-npm-title", payload.workflowName || payload.workflowKey || "workflow"),
+  );
+
+  const meta = make("div", "release-npm-meta");
+  meta.append(make("span", `release-npm-pill workflow-status ${payload.status || "unknown"}`, payload.status || "unknown"));
+  if (payload.activePhase) meta.append(make("span", "release-npm-pill", payload.activePhase));
+  meta.append(make("span", "release-npm-pill elapsed", workflowTaskCountLabel(payload)));
+  if (payload.truncated) meta.append(make("span", "release-npm-pill workflow-truncated", "truncated"));
+
+  const actions = make("div", "release-npm-actions");
+  actions.append(releaseNpmActionButton("Status", "/workflow status"));
+  if (live) actions.append(releaseNpmActionButton("Abort", "/workflow abort", "danger"));
+  actions.append(releaseNpmActionButton("Clear", "/workflow-clear"));
+  header.append(titleWrap, meta, actions);
+
+  const lines = Array.isArray(payload.lines) && payload.lines.length ? payload.lines : ["Waiting for workflow subprocess output..."];
+  const streamHeader = releaseNpmStreamHeader(live ? "Live subprocess output" : "Subprocess output", lines.length, { live });
+  const terminal = make("div", "release-npm-terminal");
+  terminal.setAttribute("role", "log");
+  terminal.setAttribute("aria-live", live ? "polite" : "off");
+  for (const line of lines) appendReleaseNpmTerminalLine(terminal, line);
+
+  const controls = make("div", "release-npm-controls", "Workflow subprocess output is shown as a non-blocking Web UI widget. Use /workflow abort to stop an active run.");
+  const outputDetails = renderReleaseNpmOutputDetails("workflow:subprocess", streamHeader, terminal, controls);
+  node.append(header, outputDetails);
+  requestAnimationFrame(() => { if (outputDetails.open) terminal.scrollTop = terminal.scrollHeight; });
+  return node;
+}
+
 function activeAppRunnerData() {
   return activeTabId ? appRunnerDataByTab.get(activeTabId) || { runners: [], activeRun: null } : { runners: [], activeRun: null };
 }
@@ -8710,7 +9111,290 @@ function handleStatsWebuiStatus(statusText) {
   if (payload.open || elements.statsOverlayDialog?.open) renderStatsOverlay();
 }
 
+function parseBtwWebuiPayloadRaw(raw) {
+  if (!raw) return null;
+  const text = String(raw || "");
+  const json = text.startsWith(BTW_WIDGET_PAYLOAD_PREFIX) ? text.slice(BTW_WIDGET_PAYLOAD_PREFIX.length) : text;
+  try {
+    const parsed = JSON.parse(json);
+    if (!BTW_WEBUI_PAYLOAD_TYPES.has(parsed?.type)) return null;
+    return parsed;
+  } catch {
+    return null;
+  }
+}
+
+function parseBtwWidgetPayload(lines = []) {
+  const first = Array.isArray(lines) ? lines[0] : "";
+  return parseBtwWebuiPayloadRaw(first);
+}
+
+function currentBtwWidgetPayload() {
+  if (isOptionalFeatureDisabled("btwCommand")) return null;
+  const outputLines = widgets.get(BTW_OUTPUT_WIDGET_KEY)?.widgetLines || [];
+  const payload = parseBtwWidgetPayload(outputLines) || parseBtwWebuiPayloadRaw(statusEntries.get(BTW_WEBUI_STATUS_KEY)) || latestBtwWidgetPayload;
+  if (payload?.id && payload.id === btwWidgetDismissedId) return null;
+  return payload;
+}
+
+function btwStatusLabel(payload) {
+  switch (payload?.status) {
+    case "done": return "Done";
+    case "error": return "Error";
+    case "aborted": return "Aborted";
+    case "streaming": return "Answering…";
+    default: return "Starting…";
+  }
+}
+
+function btwAnswerLines(payload) {
+  const text = payload?.error || payload?.answer || (payload?.status === "loading" ? "Starting side request…" : "Waiting for model output…");
+  return String(text || "").replace(/\r\n?/g, "\n").split("\n");
+}
+
+function focusBtwWidgetInput() {
+  const input = document.querySelector(".btw-widget-input");
+  if (!input) return;
+  try {
+    input.focus({ preventScroll: true });
+  } catch {
+    input.focus();
+  }
+}
+
+function openBtwComposerWidget() {
+  btwWidgetComposerOpen = true;
+  btwWidgetDismissedId = "";
+  btwWidgetFocusAfterRender = true;
+  setComposerActionsOpen(false);
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
+  setOptionsMenuOpen(false);
+  renderWidgets();
+}
+
+function closeBtwOutputWidget() {
+  const payload = currentBtwWidgetPayload();
+  if (payload?.id) btwWidgetDismissedId = payload.id;
+  widgets.delete(BTW_OUTPUT_WIDGET_KEY);
+  widgets.delete(BTW_FOOTER_WIDGET_KEY);
+  statusEntries.delete(BTW_WEBUI_STATUS_KEY);
+  latestBtwWidgetPayload = null;
+  btwWidgetComposerOpen = false;
+  btwWidgetInputDraft = "";
+  renderWidgets();
+  renderStatus();
+}
+
+async function copyBtwWidgetAnswer(button) {
+  const payload = currentBtwWidgetPayload();
+  const answer = String(payload?.answer || payload?.error || "").trim();
+  if (!answer) return;
+  const original = button?.textContent || "Copy";
+  try {
+    await navigator.clipboard.writeText(answer);
+    if (button) button.textContent = "Copied";
+    setTimeout(() => { if (button) button.textContent = original; }, 1600);
+  } catch (error) {
+    addEvent(`copy /btw answer failed: ${error.message || String(error)}`, "error");
+  }
+}
+
+function base64UrlEncodeUtf8(value) {
+  const bytes = new TextEncoder().encode(String(value || ""));
+  let binary = "";
+  for (let offset = 0; offset < bytes.length; offset += 0x8000) {
+    binary += String.fromCharCode(...bytes.slice(offset, offset + 0x8000));
+  }
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, "");
+}
+
+function btwTransferPayload(payload) {
+  return {
+    question: payload?.question || "",
+    answer: payload?.answer || payload?.error || "",
+    status: payload?.status || "done",
+    model: payload?.model || "",
+    generatedAt: payload?.generatedAt || 0,
+    updatedAt: payload?.updatedAt || Date.now(),
+  };
+}
+
+function makeBtwTransferIcon() {
+  const ns = "http://www.w3.org/2000/svg";
+  const svg = document.createElementNS(ns, "svg");
+  svg.setAttribute("class", "btw-transfer-icon");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("focusable", "false");
+  const bubble = document.createElementNS(ns, "path");
+  bubble.setAttribute("d", "M4.5 5.75h8.75a2 2 0 0 1 2 2v3.5a2 2 0 0 1-2 2H9.8L6.5 15.6v-2.35h-2a2 2 0 0 1-2-2v-3.5a2 2 0 0 1 2-2Z");
+  bubble.setAttribute("fill", "none");
+  bubble.setAttribute("stroke", "currentColor");
+  bubble.setAttribute("stroke-width", "1.9");
+  bubble.setAttribute("stroke-linecap", "round");
+  bubble.setAttribute("stroke-linejoin", "round");
+  const arrow = document.createElementNS(ns, "path");
+  arrow.setAttribute("d", "M13 17h7m0 0-2.8-2.8M20 17l-2.8 2.8");
+  arrow.setAttribute("fill", "none");
+  arrow.setAttribute("stroke", "currentColor");
+  arrow.setAttribute("stroke-width", "2.15");
+  arrow.setAttribute("stroke-linecap", "round");
+  arrow.setAttribute("stroke-linejoin", "round");
+  const line = document.createElementNS(ns, "path");
+  line.setAttribute("d", "M6 9.4h5.6");
+  line.setAttribute("fill", "none");
+  line.setAttribute("stroke", "currentColor");
+  line.setAttribute("stroke-width", "1.9");
+  line.setAttribute("stroke-linecap", "round");
+  svg.append(bubble, line, arrow);
+  return svg;
+}
+
+async function transferBtwContextToMain(button) {
+  const payload = currentBtwWidgetPayload();
+  const transferPayload = btwTransferPayload(payload);
+  if (!transferPayload.question && !transferPayload.answer) return;
+  const targetTabId = activeTabId;
+  const liveSteer = !!currentState?.isStreaming;
+  const original = button?.querySelector("span")?.textContent || "Transfer Context";
+  const encoded = base64UrlEncodeUtf8(JSON.stringify(transferPayload));
+  try {
+    await sendPrompt("prompt", `/btw-transfer ${encoded}`, { targetTabId, throwOnError: true, streamingBehavior: liveSteer ? "steer" : undefined });
+    const label = button?.querySelector("span");
+    if (label) label.textContent = liveSteer ? "Steered" : "Transferred";
+    addEvent(liveSteer
+      ? "/btw context sent as live steering; it will be injected after the next agent action"
+      : "/btw context transferred into the main conversation", "info");
+    setTimeout(() => { if (label) label.textContent = original; }, 1800);
+  } catch {
+    // sendPrompt already reports the error.
+  }
+}
+
+function btwWidgetActionButton(label, handler, className = "") {
+  const button = make("button", `release-npm-action ${className}`.trim(), label);
+  button.type = "button";
+  button.addEventListener("click", () => handler(button));
+  return button;
+}
+
+function renderBtwComposerForm() {
+  const form = make("form", "btw-widget-composer");
+  const input = make("textarea", "btw-widget-input");
+  input.rows = 1;
+  input.placeholder = "Ask a /btw side question…";
+  input.value = btwWidgetInputDraft;
+  input.setAttribute("aria-label", "Ask a /btw side question");
+  input.addEventListener("input", () => { btwWidgetInputDraft = input.value; });
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      form.requestSubmit();
+    }
+  });
+
+  const submit = make("button", "release-npm-action btw-widget-send", "Ask /btw");
+  submit.type = "submit";
+  form.append(input, submit);
+  form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+    const question = input.value.trim();
+    if (!question) {
+      input.focus();
+      return;
+    }
+    submit.disabled = true;
+    const sent = await sendBtwQuestion(question);
+    submit.disabled = false;
+    if (!sent) return;
+    btwWidgetInputDraft = "";
+    input.value = "";
+    input.focus({ preventScroll: true });
+  });
+  return form;
+}
+
+function renderBtwOutputWidget() {
+  const payload = currentBtwWidgetPayload();
+  if (!payload && !btwWidgetComposerOpen) return null;
+
+  if (payload) latestBtwWidgetPayload = payload;
+  const running = payload?.status === "loading" || payload?.status === "streaming";
+  const lineCount = payload ? btwAnswerLines(payload).length : 0;
+  const node = make("section", `widget release-npm-widget btw-widget${running ? " btw-live-widget" : " btw-done-widget"}`);
+  node.setAttribute("aria-label", "/btw side-question output");
+
+  const header = make("div", "release-npm-header");
+  const titleWrap = make("div", "release-npm-title-wrap");
+  titleWrap.append(make("span", "release-npm-kicker", "/btw"), make("strong", "release-npm-title", payload ? btwStatusLabel(payload) : "Ready"));
+
+  const meta = make("div", "release-npm-meta");
+  meta.append(make("span", `release-npm-pill btw-status ${payload?.status || "ready"}`.trim(), payload?.status || "ready"));
+  if (payload?.model) meta.append(make("span", "release-npm-pill", payload.model));
+
+  const actions = make("div", "release-npm-actions");
+  const transferButton = btwWidgetActionButton("", transferBtwContextToMain, "btw-transfer-action");
+  transferButton.title = currentState?.isStreaming
+    ? "Transfer this /btw question and answer as live steering after the next agent action"
+    : "Transfer this /btw question and answer into the main conversation context";
+  transferButton.append(makeBtwTransferIcon(), make("span", undefined, "Transfer Context"));
+  transferButton.disabled = !payload || !(payload.answer || payload.error || payload.question);
+  actions.append(
+    transferButton,
+    btwWidgetActionButton("Copy", copyBtwWidgetAnswer),
+    btwWidgetActionButton("Close", closeBtwOutputWidget),
+  );
+  header.append(titleWrap, meta, actions);
+
+  const question = make("div", "btw-widget-question");
+  question.append(make("span", "btw-widget-question-label", "Question"), make("span", "btw-widget-question-text", payload?.question || "Start or continue with the /btw input below."));
+
+  const streamHeader = releaseNpmStreamHeader(running ? "Live side answer" : "Side answer", lineCount, { live: running });
+  const terminal = make("div", "release-npm-terminal btw-terminal");
+  terminal.setAttribute("role", "log");
+  terminal.setAttribute("aria-live", running ? "polite" : "off");
+  for (const line of (payload ? btwAnswerLines(payload) : ["Type a side question below and press Enter to run it as /btw."])) appendReleaseNpmTerminalLine(terminal, line);
+
+  const note = payload?.status === "error"
+    ? "The side request failed. The main conversation was not changed."
+    : "Ephemeral answer · every message in this input is sent as /btw · not appended to the main transcript.";
+  const controls = make("div", "release-npm-controls btw-controls", note);
+  const outputDetails = renderReleaseNpmOutputDetails(`btw:${payload?.id || "composer"}`, streamHeader, terminal, controls);
+  node.append(header, question, outputDetails, renderBtwComposerForm());
+  requestAnimationFrame(() => {
+    if (outputDetails.open) terminal.scrollTop = terminal.scrollHeight;
+    if (btwWidgetFocusAfterRender) {
+      btwWidgetFocusAfterRender = false;
+      focusBtwWidgetInput();
+    }
+  });
+  return node;
+}
+
+function handleBtwWebuiStatus(statusText) {
+  const payload = parseBtwWebuiPayloadRaw(statusText);
+  if (payload) latestBtwWidgetPayload = payload;
+  renderWidgets();
+}
+
+function remoteWebuiWidgetLines(lines = []) {
+  return (Array.isArray(lines) ? lines : [])
+    .map(stripAnsi)
+    .map((line) => String(line ?? ""))
+    .filter((line, index, array) => line.trim() || (index > 0 && index < array.length - 1));
+}
+
+function mirrorRemoteWebuiWidgetToTranscript(widgetKey, lines = [], request = {}) {
+  if (widgetKey !== "pi-remote-webui" || request.replayed) return;
+  const content = remoteWebuiWidgetLines(lines).join("\n").trimEnd();
+  if (!content) return;
+  addTransientMessage({ role: "extension", title: "/remote", content, level: "info", widgetKey });
+}
+
 function renderWidgets() {
+  if (deferUiRenderDuringPointerActivation("widgets", renderWidgets)) return;
   elements.widgetArea.replaceChildren();
   const releaseOutput = renderReleaseNpmOutputWidget();
   if (releaseOutput) elements.widgetArea.append(releaseOutput);
@@ -8720,14 +9404,19 @@ function renderWidgets() {
   if (releaseAurOutput) elements.widgetArea.append(releaseAurOutput);
   const releaseAurLog = renderReleaseAurLogWidget();
   if (releaseAurLog) elements.widgetArea.append(releaseAurLog);
+  const workflowSubprocessWidget = renderWorkflowSubprocessWidget();
+  if (workflowSubprocessWidget) elements.widgetArea.append(workflowSubprocessWidget);
   const appRunnerWidget = renderAppRunnerWidget();
   if (appRunnerWidget) elements.widgetArea.append(appRunnerWidget);
+  const btwWidget = renderBtwOutputWidget();
+  if (btwWidget) elements.widgetArea.append(btwWidget);
 
   for (const [key, value] of widgets) {
     const widgetFeatureId = optionalFeatureWidgetFeatureId(key);
     if (widgetFeatureId && !isOptionalFeatureEnabled(widgetFeatureId)) continue;
-    if (widgetFeatureId && key !== "todo-progress") continue;
+    if (widgetFeatureId && optionalFeatureWidgetHasSpecializedRenderer(key)) continue;
     const lines = Array.isArray(value.widgetLines) ? value.widgetLines : [];
+    if (key === "pi-remote-webui") continue;
     const specialized = key === "todo-progress" && isOptionalFeatureEnabled("todoProgressWidget") ? renderTodoProgressWidget(key, lines) : null;
     if (specialized) {
       elements.widgetArea.append(specialized);
@@ -10330,6 +11019,7 @@ function renderQueueGroup(label, items, tone) {
 }
 
 function renderQueue(event) {
+  if (deferUiRenderDuringPointerActivation("queue", () => renderQueue(event))) return;
   const snapshot = normalizeQueuedMessages(event);
   const tabId = event?.tabId || activeTabId;
   if (tabId) latestQueuedMessagesByTab.set(tabId, snapshot);
@@ -11281,6 +11971,7 @@ function renderActionFeedbackControls(bubble, message, messageIndex) {
 }
 
 function renderFeedbackTray() {
+  if (deferUiRenderDuringPointerActivation("feedback-tray", renderFeedbackTray)) return;
   const items = queuedActionFeedback();
   const hasItems = items.length > 0;
   elements.feedbackTray.hidden = !hasItems;
@@ -11753,6 +12444,7 @@ function findStickyUserPromptTarget(targets = userPromptTargets()) {
 }
 
 function updateStickyUserPromptButton() {
+  if (deferUiRenderDuringPointerActivation("sticky-user-prompt", updateStickyUserPromptButton)) return;
   const button = elements.stickyUserPromptButton;
   if (!button) return;
   const targets = userPromptTargets();
@@ -12902,6 +13594,7 @@ function pruneDisconnectedLiveToolCards() {
 }
 
 function renderAllMessages({ preserveScroll = false, forceRebuild = false } = {}) {
+  if (deferUiRenderDuringPointerActivation("messages", () => renderAllMessages({ preserveScroll, forceRebuild }))) return;
   const shouldFollow = !preserveScroll && (autoFollowChat || isChatNearBottom());
   const previousScrollTop = elements.chat.scrollTop;
   const transcriptItems = orderedTranscriptItems();
@@ -13073,6 +13766,7 @@ function scheduleChatFollowScroll() {
 }
 
 function scrollChatToBottom({ force = false } = {}) {
+  if (deferChatFollowScrollDuringPointerActivation({ force })) return;
   if (force) autoFollowChat = true;
   if (!autoFollowChat) {
     updateJumpToLatestButton();
@@ -13128,11 +13822,47 @@ function sendPromptFromModeButton(kind, button) {
   sendPrompt(kind);
 }
 
+async function sendBtwQuestion(question, { clearComposerDraft = false } = {}) {
+  const cleanQuestion = String(question || "").trim();
+  if (!cleanQuestion) return false;
+  const message = /^\/btw(?:\s|$)/.test(cleanQuestion) ? cleanQuestion : `/btw ${cleanQuestion}`;
+  const targetTabId = activeTabId;
+  btwWidgetComposerOpen = true;
+  btwWidgetDismissedId = "";
+  try {
+    await sendPrompt("prompt", message, { targetTabId, throwOnError: true });
+  } catch {
+    return false;
+  }
+  if (!targetTabId) return true;
+  if (clearComposerDraft) {
+    if (targetTabId === activeTabId) {
+      elements.promptInput.value = "";
+      resizePromptInput();
+      hideCommandSuggestions();
+      saveActiveDraft();
+    } else {
+      tabDrafts.set(targetTabId, "");
+    }
+  }
+  return true;
+}
+
+async function sendBtwPromptFromButton() {
+  const question = String(elements.promptInput.value || "").trim();
+  if (!question) {
+    openBtwComposerWidget();
+    return;
+  }
+  await sendBtwQuestion(question, { clearComposerDraft: true });
+}
+
 function setPublishMenuOpen(open) {
   publishMenuOpen = !!open;
   elements.publishButton.setAttribute("aria-expanded", publishMenuOpen ? "true" : "false");
   elements.publishButton.classList.toggle("menu-open", publishMenuOpen);
   elements.publishButton.parentElement?.classList.toggle("open", publishMenuOpen);
+  scheduleMobileDropdownScrollBoundsUpdate();
 }
 
 function setNativeCommandMenuOpen(open) {
@@ -13140,6 +13870,7 @@ function setNativeCommandMenuOpen(open) {
   elements.nativeCommandMenuButton.setAttribute("aria-expanded", nativeCommandMenuOpen ? "true" : "false");
   elements.nativeCommandMenuButton.classList.toggle("menu-open", nativeCommandMenuOpen);
   elements.nativeCommandMenuButton.parentElement?.classList.toggle("open", nativeCommandMenuOpen);
+  scheduleMobileDropdownScrollBoundsUpdate();
 }
 
 function setAppRunnerMenuOpen(open) {
@@ -13147,6 +13878,7 @@ function setAppRunnerMenuOpen(open) {
   elements.appRunnerMenuButton?.setAttribute("aria-expanded", appRunnerMenuOpen ? "true" : "false");
   elements.appRunnerMenuButton?.classList.toggle("menu-open", appRunnerMenuOpen);
   elements.appRunnerMenuButton?.parentElement?.classList.toggle("open", appRunnerMenuOpen);
+  scheduleMobileDropdownScrollBoundsUpdate();
 }
 
 function setOptionsMenuOpen(open) {
@@ -13154,6 +13886,7 @@ function setOptionsMenuOpen(open) {
   elements.optionsMenuButton.setAttribute("aria-expanded", optionsMenuOpen ? "true" : "false");
   elements.optionsMenuButton.classList.toggle("menu-open", optionsMenuOpen);
   elements.optionsMenuButton.parentElement?.classList.toggle("open", optionsMenuOpen);
+  scheduleMobileDropdownScrollBoundsUpdate();
 }
 
 function optionalFeatureIdForCommand(name) {
@@ -13309,15 +14042,18 @@ function requestGitFooterWebuiPayload(tabContext = activeTabContext(), { force =
 }
 
 function updateOptionalFeatureAvailability() {
+  optionalFeatureAvailability.btwCommand = hasAvailableCommand("btw") || optionalFeatureAvailability.btwCommand || statusEntries.has(BTW_WEBUI_STATUS_KEY) || widgets.has(BTW_OUTPUT_WIDGET_KEY);
   optionalFeatureAvailability.gitWorkflow = hasAvailableCommand("git-staged-msg");
   optionalFeatureAvailability.releaseNpm = hasAvailableCommand("release-npm");
   optionalFeatureAvailability.releaseAur = hasAvailableCommand("release-aur");
+  optionalFeatureAvailability.workflows = hasAvailableCommand("workflow") || hasAvailableCommand("workflow-clear") || optionalFeatureAvailability.workflows || widgets.has("workflow") || widgets.has("workflow:subprocess");
   optionalFeatureAvailability.safetyGuard = hasAvailableCommand("safety-guard") || optionalFeatureAvailability.safetyGuard || statusEntries.has("safety-guard");
   optionalFeatureAvailability.statsCommand = hasAvailableCommand("stats");
   optionalFeatureAvailability.gitFooterStatus = hasAvailableCommand("git-footer-refresh") || optionalFeatureAvailability.gitFooterStatus || statusEntries.has("git-footer") || statusEntries.has(GIT_FOOTER_WEBUI_STATUS_KEY);
   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.themeBundle = availableThemes.length > 0;
   requestGitFooterWebuiPayload();
   renderOptionalFeatureControls();
@@ -13339,12 +14075,19 @@ function optionalFeatureStatus(featureId) {
 }
 
 function optionalFeatureWidgetFeatureId(key) {
+  if (key.startsWith("btw:")) return "btwCommand";
   if (key.startsWith("release-npm:")) return "releaseNpm";
   if (key.startsWith("release-aur:")) return "releaseAur";
+  if (key === "workflow" || key.startsWith("workflow:")) return "workflows";
   if (key === "todo-progress") return "todoProgressWidget";
+  if (key === "pi-remote-webui") return "remoteWebui";
   return null;
 }
 
+function optionalFeatureWidgetHasSpecializedRenderer(key) {
+  return key.startsWith("btw:") || key.startsWith("release-npm:") || key.startsWith("release-aur:") || key === "workflow:subprocess";
+}
+
 function renderOptionalFeaturePanel() {
   if (!elements.optionalFeaturesBox) return;
   elements.optionalFeaturesBox.replaceChildren();
@@ -13405,6 +14148,16 @@ function renderOptionalFeaturePanel() {
 }
 
 function renderOptionalFeatureControls() {
+  const hasBtwCommand = isOptionalFeatureEnabled("btwCommand");
+  if (elements.btwButton) {
+    elements.btwButton.hidden = !hasBtwCommand;
+    setOptionalControlState(
+      elements.btwButton,
+      hasBtwCommand,
+      optionalFeatureUnavailableMessage("btwCommand"),
+    );
+  }
+
   const hasGitWorkflow = isOptionalFeatureEnabled("gitWorkflow");
   elements.gitWorkflowButton.hidden = !hasGitWorkflow;
   setOptionalControlState(
@@ -13449,6 +14202,16 @@ function renderOptionalFeatureControls() {
     );
   }
 
+  const hasRemoteWebuiCommand = isOptionalFeatureEnabled("remoteWebui") && hasAvailableCommand("remote");
+  if (elements.optionsRemoteButton) {
+    elements.optionsRemoteButton.hidden = !hasRemoteWebuiCommand;
+    setOptionalControlState(
+      elements.optionsRemoteButton,
+      hasRemoteWebuiCommand,
+      optionalFeatureUnavailableMessage("remoteWebui"),
+    );
+  }
+
   renderOptionalFeaturePanel();
 }
 
@@ -14751,6 +15514,10 @@ async function refreshState(tabContext = activeTabContext()) {
   if (!isCurrentTabContext(tabContext)) return;
   const previousState = currentState;
   currentState = response.data || null;
+  if (latestMessages.length) {
+    latestMessagesSessionKey = resolveMessagesSessionKey(tabContext.tabId);
+    cacheMessagesForTab(tabContext.tabId, latestMessages, latestMessagesSessionKey);
+  }
   const shouldRefreshGitFooter = gitFooterRelevantStateChanged(previousState, currentState);
   syncActiveTabActivityFromState(currentState);
   syncRunIndicatorFromState(currentState);
@@ -14904,7 +15671,32 @@ async function refreshFooterData(tabContext = activeTabContext()) {
 
 // Session key of the last applied transcript fetch; deltas are only
 // attempted while the tab+session is unchanged.
-let latestMessagesSessionKey = "";
+function resolveMessagesSessionKey(tabId = activeTabId) {
+  if (!tabId) return "";
+  const stateSessionId = tabId === activeTabId ? currentState?.sessionId : null;
+  if (stateSessionId) return `${tabId}|${stateSessionId}`;
+  if (latestMessagesSessionKey.startsWith(`${tabId}|`)) return latestMessagesSessionKey;
+  const cached = tabMessagesCache.get(tabId);
+  if (cached?.sessionKey?.startsWith(`${tabId}|`)) return cached.sessionKey;
+  return `${tabId}|`;
+}
+
+function cacheMessagesForTab(tabId = activeTabId, messages = latestMessages, sessionKey = latestMessagesSessionKey) {
+  if (!tabId || !Array.isArray(messages)) return;
+  const stateSessionKey = tabId === activeTabId && currentState?.sessionId ? `${tabId}|${currentState.sessionId}` : "";
+  const resolvedSessionKey = stateSessionKey || (sessionKey?.startsWith(`${tabId}|`) ? sessionKey : resolveMessagesSessionKey(tabId));
+  tabMessagesCache.set(tabId, { messages, sessionKey: resolvedSessionKey });
+}
+
+function restoreCachedMessagesForActiveTab() {
+  if (!activeTabId) return false;
+  const cached = tabMessagesCache.get(activeTabId);
+  if (!cached || !Array.isArray(cached.messages)) return false;
+  latestMessages = cached.messages;
+  latestMessagesSessionKey = cached.sessionKey || resolveMessagesSessionKey(activeTabId);
+  renderMessages(latestMessages);
+  return true;
+}
 
 function messagesLookEqual(a, b) {
   return !!a && !!b && a.role === b.role && String(a.timestamp || "") === String(b.timestamp || "")
@@ -14933,7 +15725,7 @@ function mergeMessagesDelta(previous, data) {
 async function refreshMessages(tabContext = activeTabContext()) {
   if (!tabContext.tabId) return;
   const previousMessages = latestMessages;
-  const sessionKey = `${tabContext.tabId}|${currentState?.sessionId || ""}`;
+  const sessionKey = resolveMessagesSessionKey(tabContext.tabId);
   let nextMessages = null;
   if (previousMessages.length > 1 && sessionKey === latestMessagesSessionKey) {
     // Delta fetch with a one-message overlap: the last known message is
@@ -14949,6 +15741,7 @@ async function refreshMessages(tabContext = activeTabContext()) {
   }
   latestMessages = nextMessages;
   latestMessagesSessionKey = sessionKey;
+  cacheMessagesForTab(tabContext.tabId, latestMessages, latestMessagesSessionKey);
   const preserveLiveStream = liveStreamRenderActive();
   if (!preserveLiveStream) resetStreamBubble();
   renderMessages(latestMessages);
@@ -14989,7 +15782,7 @@ async function refreshModels(tabContext = activeTabContext()) {
   syncModelSelectToState();
   renderFooter();
   renderFeedbackTray();
-  if (elements.commandPaletteDialog?.open) renderCommandPalette();
+  if (elements.commandPaletteDialog?.open) renderCommandPalette({ preserveScroll: true });
 }
 
 function syncModelSelectToState() {
@@ -15466,7 +16259,7 @@ async function refreshCommands(tabContext = activeTabContext()) {
   availableCommands = normalizeCommands(response.data?.commands || []);
   updateOptionalFeatureAvailability();
   renderCommands();
-  if (elements.commandPaletteDialog?.open) renderCommandPalette();
+  if (elements.commandPaletteDialog?.open) renderCommandPalette({ preserveScroll: true });
 }
 
 function paletteText(value) {
@@ -15563,12 +16356,14 @@ function setCommandPaletteIndex(index) {
   renderCommandPaletteList();
 }
 
-function renderCommandPaletteList() {
+function renderCommandPaletteList({ preserveScroll = false } = {}) {
   const list = elements.commandPaletteList;
   if (!list) return;
+  const scrollTop = preserveScroll ? list.scrollTop : 0;
   list.replaceChildren();
   if (!commandPaletteItems.length) {
     list.append(make("div", "command-palette-empty muted", "No matching actions."));
+    if (preserveScroll) list.scrollTop = scrollTop;
     return;
   }
   commandPaletteItems.forEach((item, index) => {
@@ -15584,14 +16379,18 @@ function renderCommandPaletteList() {
     );
     list.append(button);
   });
+  if (preserveScroll) {
+    list.scrollTop = scrollTop;
+    return;
+  }
   const active = list.children[commandPaletteIndex];
   active?.scrollIntoView({ block: "nearest" });
 }
 
-function renderCommandPalette() {
+function renderCommandPalette({ preserveScroll = false } = {}) {
   commandPaletteItems = filteredCommandPaletteItems();
   if (commandPaletteIndex >= commandPaletteItems.length) commandPaletteIndex = 0;
-  renderCommandPaletteList();
+  renderCommandPaletteList({ preserveScroll });
 }
 
 function openCommandPalette(initialQuery = "") {
@@ -16068,7 +16867,7 @@ async function sendUserBashCommand(parsed, { usesPromptInput = false, targetTabI
   await runUserBashCommand(parsed, { usesPromptInput, targetTabId });
 }
 
-async function sendPrompt(kind = "prompt", explicitMessage, { targetTabId = activeTabId, throwOnError = false } = {}) {
+async function sendPrompt(kind = "prompt", explicitMessage, { targetTabId = activeTabId, throwOnError = false, streamingBehavior } = {}) {
   const usesPromptInput = explicitMessage === undefined;
   const rawMessage = usesPromptInput ? elements.promptInput.value : explicitMessage;
   const originalMessage = String(rawMessage || "").trim();
@@ -16114,7 +16913,7 @@ async function sendPrompt(kind = "prompt", explicitMessage, { targetTabId = acti
       response = await api("/api/follow-up", { method: "POST", body: bodyBase, tabId: targetTabId });
     } else {
       const body = { ...bodyBase };
-      if (targetWasStreaming) body.streamingBehavior = busyBehavior;
+      if (targetWasStreaming) body.streamingBehavior = streamingBehavior || busyBehavior;
       response = await api("/api/prompt", { method: "POST", body, tabId: targetTabId });
     }
     applyResponseTab(response);
@@ -16167,7 +16966,7 @@ function hasQueuedDialogRequest(id) {
 
 function removeQueuedDialogRequests(ids = []) {
   const idSet = new Set(ids.map((id) => String(id)).filter(Boolean));
-  if (idSet.size === 0) return;
+  if (idSet.size === 0) return false;
   for (let i = dialogQueue.length - 1; i >= 0; i -= 1) {
     if (idSet.has(String(dialogQueue[i]?.id || ""))) dialogQueue.splice(i, 1);
   }
@@ -16175,7 +16974,9 @@ function removeQueuedDialogRequests(ids = []) {
     if (elements.dialog.open) elements.dialog.close();
     activeDialog = null;
     showNextDialog();
+    return true;
   }
+  return false;
 }
 
 function handleExtensionUiRequest(request) {
@@ -16197,16 +16998,25 @@ function handleExtensionUiRequest(request) {
         statusEntries.delete(statusKey);
       }
       if (statusKey === STATS_WEBUI_STATUS_KEY) handleStatsWebuiStatus(request.statusText);
+      if (statusKey === BTW_WEBUI_STATUS_KEY) handleBtwWebuiStatus(request.statusText);
       updateOptionalFeatureAvailability();
       renderStatus();
       return;
     }
-    case "setWidget":
-      if (Array.isArray(request.widgetLines)) widgets.set(request.widgetKey || request.id, request);
-      else widgets.delete(request.widgetKey || request.id);
+    case "setWidget": {
+      const widgetKey = request.widgetKey || request.id;
+      if (widgetKey === "pi-remote-webui") {
+        widgets.delete(widgetKey);
+        if (Array.isArray(request.widgetLines)) mirrorRemoteWebuiWidgetToTranscript(widgetKey, request.widgetLines, request);
+      } else if (Array.isArray(request.widgetLines)) {
+        widgets.set(widgetKey, request);
+      } else {
+        widgets.delete(widgetKey);
+      }
       updateOptionalFeatureAvailability();
       renderWidgets();
       return;
+    }
     case "setTitle":
       if (request.title) document.title = request.title;
       return;
@@ -16239,6 +17049,7 @@ function handleExtensionUiRequest(request) {
 async function sendDialogResponse(payload) {
   const { tabId = activeTabId, ...body } = payload;
   const tabContext = activeTabContext(tabId);
+  const responseId = String(body.id || "");
   try {
     const response = await api("/api/extension-ui-response", { method: "POST", body, tabId });
     if (!applyResponseTab(response) && decrementTabPendingBlockerCount(tabId)) renderTabs();
@@ -16246,6 +17057,7 @@ async function sendDialogResponse(payload) {
     if (isCurrentTabContext(tabContext)) addEvent(error.message, "error");
   } finally {
     if (!isCurrentTabContext(tabContext)) return;
+    if (responseId && activeDialog && String(activeDialog.id || "") !== responseId) return;
     if (elements.dialog.open) elements.dialog.close();
     activeDialog = null;
     if (runIndicatorIsActive()) setRunIndicatorActivity("Continuing after your response…");
@@ -16336,6 +17148,7 @@ function handleInactiveTabEvent(event) {
 
 function handleEvent(event) {
   ingestEventTabActivity(event);
+  trackAutoRetryStateFromEvent(event);
   trackSkillsFromEvent(event);
   if (!eventTargetsActiveTab(event)) {
     handleInactiveTabEvent(event);
@@ -16375,6 +17188,10 @@ function handleEvent(event) {
       clearContextUsageUnknownAfterCompaction(event.tabId || activeTabId);
       statusEntries.clear();
       widgets.clear();
+      latestBtwWidgetPayload = null;
+      btwWidgetDismissedId = "";
+      btwWidgetComposerOpen = false;
+      btwWidgetInputDraft = "";
       resetOptionalFeatureAvailability();
       renderStatus();
       renderWidgets();
@@ -16390,6 +17207,14 @@ function handleEvent(event) {
       removeQueuedDialogRequests(event.ids || []);
       addEvent(`cancelled ${event.ids?.length || 0} pending extension UI request(s)`, "warn");
       break;
+    case "webui_extension_ui_resolved": {
+      const closedActiveDialog = removeQueuedDialogRequests([event.id]);
+      if (closedActiveDialog) {
+        addEvent("extension UI request resolved");
+        if (runIndicatorIsActive() && !activeDialog) setRunIndicatorActivity("Continuing after extension UI response…");
+      }
+      break;
+    }
     case "webui_app_runner_update":
       setAppRunnerData(event.tabId || activeTabId, { cwd: event.cwd, activeRun: event.activeRun });
       renderAppRunnerControls();
@@ -16719,6 +17544,7 @@ elements.busyPromptBehaviorMenu?.addEventListener("keydown", (event) => {
 });
 elements.steerButton.addEventListener("click", () => sendPromptFromModeButton("steer", elements.steerButton));
 elements.followUpButton.addEventListener("click", () => sendPromptFromModeButton("follow-up", elements.followUpButton));
+elements.btwButton?.addEventListener("click", () => sendBtwPromptFromButton());
 elements.terminalTabsToggleButton.addEventListener("click", () => {
   setMobileTabsExpanded(!document.body.classList.contains("mobile-tabs-expanded"));
 });
@@ -16894,6 +17720,7 @@ elements.nativeToolsButton.addEventListener("click", () => runNativeCommandMenu(
 elements.optionsCommandPaletteButton.addEventListener("click", () => openCommandPalette());
 elements.optionsResumeButton.addEventListener("click", () => runNativeCommandMenu("/resume"));
 elements.optionsReloadButton.addEventListener("click", () => runNativeCommandMenu("/reload"));
+elements.optionsRemoteButton.addEventListener("click", () => runNativeCommandMenu("/remote"));
 elements.optionsNameButton.addEventListener("click", () => runNativeCommandMenu("/name"));
 elements.optionsCloneButton.addEventListener("click", () => runNativeCommandMenu("/clone"));
 elements.optionsSettingsButton.addEventListener("click", () => runNativeCommandMenu("/settings"));
@@ -16954,6 +17781,7 @@ elements.commandPaletteDialog?.addEventListener("cancel", (event) => {
   event.preventDefault();
   closeCommandPalette();
 });
+elements.commandPaletteCloseButton?.addEventListener("click", closeCommandPalette);
 elements.commandPaletteInput?.addEventListener("input", () => {
   commandPaletteIndex = 0;
   renderCommandPalette();
@@ -16986,11 +17814,104 @@ elements.editRetryCancelButton?.addEventListener("click", closeEditRetryDialog);
 elements.editRetryForkButton?.addEventListener("click", () => submitEditRetry({ send: false }));
 elements.editRetrySendButton?.addEventListener("click", () => submitEditRetry({ send: true }));
 
-function resetAbortLongPressAffordance() {
+function abortButtonHoldSeconds() {
+  return String(Math.round(ABORT_LONG_PRESS_MS / 1000));
+}
+
+function abortButtonReadyTitle() {
+  return `Hold Esc or the Abort button for ${abortButtonHoldSeconds()} seconds to abort the active Pi run`;
+}
+
+function clearAbortLongPressResetTimer() {
+  clearTimeout(abortLongPressResetTimer);
+  abortLongPressResetTimer = null;
+}
+
+function clearAbortLongPressCompletionTimers() {
   clearTimeout(abortLongPressTimer);
+  clearInterval(abortLongPressTickTimer);
   abortLongPressTimer = null;
+  abortLongPressTickTimer = null;
+}
+
+function isAbortLongPressActive() {
+  return abortLongPressStartedAt > 0;
+}
+
+function abortLongPressRemainingMs() {
+  if (!abortLongPressStartedAt || !abortLongPressDeadlineAt) return ABORT_LONG_PRESS_MS;
+  return Math.max(0, abortLongPressDeadlineAt - performance.now());
+}
+
+function formatAbortLongPressRemaining(ms) {
+  return (Math.ceil(Math.max(0, ms) / 100) / 10).toFixed(1);
+}
+
+function abortLongPressLabel() {
+  const remaining = formatAbortLongPressRemaining(abortLongPressRemainingMs());
+  return abortLongPressSource === "escape" ? `Hold Esc ${remaining}s` : `Hold ${remaining}s`;
+}
+
+function renderAbortLongPressAffordance() {
+  const label = abortLongPressLabel();
+  elements.abortButton.textContent = label;
+  elements.abortButton.title = `${label} more to abort the active Pi run`;
+  elements.abortButton.setAttribute("aria-label", elements.abortButton.title);
+}
+
+function completeAbortLongPress() {
+  if (!isAbortLongPressActive()) return;
+  if (abortLongPressReleasePending) return;
+  const source = abortLongPressSource;
+  clearAbortLongPressResetTimer();
+  clearAbortLongPressCompletionTimers();
+  abortLongPressHandled = true;
+  if (isAbortAvailable()) abortActiveRun({ source });
+  else {
+    resetAbortLongPressAffordance();
+    updateComposerModeButtons();
+  }
+}
+
+function tickAbortLongPressAffordance() {
+  if (!isAbortLongPressActive()) return;
+  renderAbortLongPressAffordance();
+  if (abortLongPressRemainingMs() <= 0) completeAbortLongPress();
+}
+
+function resumeAbortLongPressAffordance() {
+  if (!isAbortLongPressActive()) return;
+  clearAbortLongPressResetTimer();
+  abortLongPressReleasePending = false;
+  tickAbortLongPressAffordance();
+}
+
+function scheduleAbortLongPressReleaseReset() {
+  if (!isAbortLongPressActive()) return;
+  abortLongPressReleasePending = true;
+  clearAbortLongPressResetTimer();
+  abortLongPressResetTimer = setTimeout(() => {
+    abortLongPressResetTimer = null;
+    if (!abortLongPressReleasePending) return;
+    resetAbortLongPressAffordance();
+    updateComposerModeButtons();
+  }, ABORT_LONG_PRESS_RELEASE_GRACE_MS);
+}
+
+function resetAbortLongPressAffordance() {
+  clearAbortLongPressResetTimer();
+  clearAbortLongPressCompletionTimers();
+  abortLongPressStartedAt = 0;
+  abortLongPressDeadlineAt = 0;
+  abortLongPressSource = "long-press";
+  abortLongPressReleasePending = false;
   elements.abortButton.classList.remove("long-pressing");
-  if (!abortRequestInFlight) elements.abortButton.textContent = "Abort";
+  elements.abortButton.style.removeProperty("--abort-long-press-duration");
+  if (!abortRequestInFlight) {
+    elements.abortButton.textContent = "Abort";
+    elements.abortButton.title = isAbortAvailable() ? abortButtonReadyTitle() : "Abort is available while Pi is running";
+    elements.abortButton.setAttribute("aria-label", elements.abortButton.title);
+  }
 }
 
 async function abortActiveRun({ source = "button" } = {}) {
@@ -17026,31 +17947,41 @@ async function abortActiveRun({ source = "button" } = {}) {
   }
 }
 
-function startAbortLongPress(event) {
-  if (!isAbortAvailable() || abortRequestInFlight) return;
-  if (event.button !== undefined && event.button !== 0) return;
+function startAbortLongPress(event, { source = "long-press" } = {}) {
+  if (!isAbortAvailable() || abortRequestInFlight) return false;
+  if (source !== "escape" && event?.button !== undefined && event.button !== 0) return false;
+  if (isAbortLongPressActive()) {
+    resumeAbortLongPressAffordance();
+    return true;
+  }
   resetAbortLongPressAffordance();
   abortLongPressHandled = false;
+  abortLongPressReleasePending = false;
+  abortLongPressSource = source;
+  abortLongPressStartedAt = performance.now();
+  abortLongPressDeadlineAt = abortLongPressStartedAt + ABORT_LONG_PRESS_MS;
+  elements.abortButton.style.setProperty("--abort-long-press-duration", `${ABORT_LONG_PRESS_MS}ms`);
   elements.abortButton.classList.add("long-pressing");
-  elements.abortButton.textContent = "Hold…";
-  abortLongPressTimer = setTimeout(() => {
-    abortLongPressTimer = null;
-    abortLongPressHandled = true;
-    abortActiveRun({ source: "long-press" });
-  }, ABORT_LONG_PRESS_MS);
+  renderAbortLongPressAffordance();
+  abortLongPressTickTimer = setInterval(tickAbortLongPressAffordance, ABORT_LONG_PRESS_TICK_MS);
+  abortLongPressTimer = setTimeout(tickAbortLongPressAffordance, ABORT_LONG_PRESS_MS + 10);
+  return true;
 }
 
 elements.abortButton.addEventListener("pointerdown", startAbortLongPress);
 for (const eventName of ["pointerup", "pointerleave", "pointercancel", "blur"]) {
   elements.abortButton.addEventListener(eventName, resetAbortLongPressAffordance);
 }
+elements.abortButton.addEventListener("keydown", (event) => {
+  if (event.key !== " " && event.key !== "Enter") return;
+  if (startAbortLongPress(event)) event.preventDefault();
+});
+elements.abortButton.addEventListener("keyup", (event) => {
+  if (event.key === " " || event.key === "Enter") resetAbortLongPressAffordance();
+});
 elements.abortButton.addEventListener("click", (event) => {
-  if (abortLongPressHandled) {
-    event.preventDefault();
-    abortLongPressHandled = false;
-    return;
-  }
-  abortActiveRun({ source: "button" });
+  event.preventDefault();
+  if (abortLongPressHandled) abortLongPressHandled = false;
 });
 elements.newSessionButton.addEventListener("click", async () => {
   setComposerActionsOpen(false);
@@ -17166,6 +18097,10 @@ elements.chat.addEventListener("scroll", () => {
   markTabOutputSeen();
   updateStickyUserPromptButton();
 }, { passive: true });
+document.addEventListener("pointerdown", beginPointerActivation, { capture: true, passive: true });
+document.addEventListener("pointerup", finishPointerActivation, { capture: true, passive: true });
+document.addEventListener("pointercancel", cancelPointerActivation, { capture: true, passive: true });
+window.addEventListener("blur", cancelPointerActivation, { passive: true });
 document.addEventListener("pointerdown", (event) => {
   if (openTerminalTabGroupKey && !event.target?.closest?.(".terminal-tab-group")) {
     clearOpenTerminalTabGroup(openTerminalTabGroupKey);
@@ -17386,12 +18321,14 @@ window.addEventListener("keydown", (event) => {
 window.addEventListener("keydown", handleNativeAppShortcut, { capture: true });
 document.addEventListener("visibilitychange", () => {
   if (document.visibilityState === "visible") scheduleForegroundReconcile("visibility resume", 0);
+  else resetAbortLongPressAffordance();
 });
 window.addEventListener("pageshow", () => scheduleForegroundReconcile("page show", 0));
 window.addEventListener("focus", () => scheduleForegroundReconcile("window focus"));
 window.addEventListener("online", () => scheduleForegroundReconcile("network online", 0));
 window.addEventListener("keydown", (event) => {
   if (event.key !== "Escape") return;
+  if (event.defaultPrevented) return;
   if (elements.dialog?.open || elements.pathPickerDialog?.open || elements.gitChangesDialog?.open || elements.commandPaletteDialog?.open || elements.editRetryDialog?.open) return;
   if (publishMenuOpen) {
     setPublishMenuOpen(false);
@@ -17437,6 +18374,20 @@ window.addEventListener("keydown", (event) => {
     hideCommandSuggestions();
     return;
   }
+  if (isSidePanelOverlayView() && !document.body.classList.contains("side-panel-collapsed")) {
+    setSidePanelCollapsed(true);
+    return;
+  }
+  if (isAbortAvailable()) {
+    event.preventDefault();
+    if (abortLongPressSource === "escape" && isAbortLongPressActive()) resumeAbortLongPressAffordance();
+    else if (!event.repeat) startAbortLongPress(event, { source: "escape" });
+    return;
+  }
+  if (event.repeat) {
+    event.preventDefault();
+    return;
+  }
   if (document.activeElement === elements.promptInput && !elements.promptInput.value.trim() && doubleEscapeAction !== "none") {
     const now = Date.now();
     if (now - lastEmptyPromptEscapeTime < 500) {
@@ -17447,14 +18398,13 @@ window.addEventListener("keydown", (event) => {
     }
     lastEmptyPromptEscapeTime = now;
   }
-  if (isSidePanelOverlayView() && !document.body.classList.contains("side-panel-collapsed")) {
-    setSidePanelCollapsed(true);
-    return;
-  }
-  if (isAbortAvailable()) {
-    event.preventDefault();
-    abortActiveRun({ source: "escape" });
-  }
+});
+window.addEventListener("keyup", (event) => {
+  if (event.key === "Escape" && abortLongPressSource === "escape") scheduleAbortLongPressReleaseReset();
+}, { capture: true });
+window.addEventListener("blur", () => {
+  if (abortLongPressSource === "escape") scheduleAbortLongPressReleaseReset();
+  else resetAbortLongPressAffordance();
 });
 
 elements.gitChangesRefreshButton?.addEventListener("click", refreshGitChangesDialog);