@firstpick/pi-package-webui 0.5.4 → 0.5.6

package/public/app.js

@@ -257,10 +257,20 @@ let tabSeenCompletionSerials = new Map();
 let streamBubble = null;
 let streamText = null;
 let streamRawText = "";
+let streamThinkingRawText = "";
+let streamDerivedTextCache = { rawText: null, assistantText: "", thinkingFormat: null, finalText: "" };
 let streamBubbleVisibleSince = 0;
 let streamBubbleHideTimer = null;
 let streamTextRenderTimer = null;
+let streamTextRenderFrame = null;
 let streamToolCallSeen = false;
+let streamToolCallBubble = null;
+let streamToolCallText = null;
+let streamToolCallRawArguments = "";
+let streamToolCallName = "";
+let streamToolCallId = "";
+let streamToolCallContentIndex = null;
+let streamToolCallComplete = false;
 let streamThinkingBubble = null;
 let streamThinking = null;
 let streamMessageActive = false;
@@ -268,6 +278,8 @@ let runIndicatorBubble = null;
 let runIndicatorText = null;
 let runIndicatorMeta = null;
 let runIndicatorTimer = null;
+let runIndicatorRenderFrame = null;
+let runIndicatorRenderScroll = false;
 let runIndicatorGraceCheckTimer = null;
 let runIndicatorLastStateCheckAt = 0;
 let runIndicatorLocallyActive = false;
@@ -277,6 +289,7 @@ let refreshMessagesTimer = null;
 let refreshStateTimer = null;
 let refreshFooterTimer = null;
 let refreshTabsTimer = null;
+let tabsRenderFrame = null;
 let foregroundReconcileTimer = null;
 let eventSource = null;
 let activeDialog = null;
@@ -366,6 +379,7 @@ let terminalTabsLayout = "top";
 let webuiSettings = {};
 let busyPromptBehavior = "followUp";
 let composerModeRenderSignature = "";
+let composerModeButtonsFrame = null;
 let autocompleteMaxVisible = 12;
 let doubleEscapeAction = "none";
 let treeFilterMode = "default";
@@ -389,6 +403,11 @@ const contextUsageUnknownAfterCompactionByTab = new Map();
 let autoFollowChat = true;
 let chatFollowFrame = null;
 let chatFollowSettleTimer = null;
+let chatFollowNeedsSettle = false;
+let liveWidgetRenderFrame = null;
+let liveTodoProgressSyncFrame = null;
+let liveTodoProgressPendingText = "";
+let liveTodoProgressPendingTabId = null;
 let lastChatProgrammaticScrollAt = 0;
 let chatUserScrollIntentUntil = 0;
 let mobileFooterExpanded = false;
@@ -397,7 +416,12 @@ let footerThinkingPickerOpen = false;
 let footerAutoCompactionToggleInFlight = false;
 let footerBranchPickerOpen = false;
 let footerBranchPickerState = { loading: false, error: "", branches: [], current: "", root: "", switching: "", tabId: null };
+let footerBranchCreateDraft = { type: "", name: "" };
 let footerBranchPickerRequestSerial = 0;
+let footerScopedModelDragKey = "";
+let footerScopedModelLastDragOverKey = "";
+let footerScopedModelPointerDrag = null;
+let footerScopedModelSuppressClickUntil = 0;
 let publishMenuOpen = false;
 let maxVisualViewportHeight = 0;
 let abortRequestInFlight = false;
@@ -437,6 +461,8 @@ const SKILL_USAGE_STORAGE_KEY = "pi-webui-skill-usage-v1";
 const TERMINAL_TABS_LAYOUT_STORAGE_KEY = "pi-webui-terminal-tabs-layout";
 const TERMINAL_CUSTOM_GROUPS_STORAGE_KEY = "pi-webui-terminal-custom-groups-v1";
 const TERMINAL_TAB_DRAG_MIME = "application/x-pi-terminal-tab-id";
+const FOOTER_SCOPED_MODEL_ORDER_STORAGE_KEY = "pi-webui-footer-scoped-model-order-v1";
+const FOOTER_SCOPED_MODEL_POINTER_DRAG_THRESHOLD_PX = 6;
 const TOOL_OUTPUT_EXPANDED_STORAGE_KEY = "pi-webui-tool-output-expanded";
 const THEME_STORAGE_KEY = "pi-webui-theme";
 const CUSTOM_BACKGROUND_STORAGE_KEY = "pi-webui-custom-background";
@@ -534,7 +560,10 @@ const mobileViewMedia = window.matchMedia?.(MOBILE_VIEW_QUERY) || null;
 const sidePanelOverlayMedia = window.matchMedia?.(SIDE_PANEL_OVERLAY_QUERY) || mobileViewMedia;
 const statusEntries = new Map();
 const widgets = new Map();
+const widgetsByTab = new Map();
 const todoProgressWidgetExpandedByTab = new Map();
+const todoProgressGoalByTab = new Map();
+const todoProgressSignatureByTab = new Map();
 const releaseNpmOutputExpandedByTab = new Map();
 const appRunnerDataByTab = new Map();
 const appRunnerInputDraftByRun = new Map();
@@ -887,6 +916,7 @@ const GIT_WORKFLOW_MANUAL_BRANCH_TOOLTIP = [
   "5. Return here to commit short, long, or typed input on that branch.",
   "6. Push and Create PR will push upstream, run /pr, let you review, then run gh pr create.",
 ].join("\n");
+const GIT_BRANCH_TYPE_SUGGESTIONS = ["feat", "fix", "change", "perf", "test", "chore", "refactor", "docs", "style", "build", "ci", "revert"];
 const GIT_FOOTER_STATUS_SETUP_TOOLTIP = [
   "git-footer-status-setup:",
   "Store the GitHub username used when the Web UI initializes a no-repo directory.",
@@ -918,6 +948,12 @@ const GIT_INIT_STACK_TOOLTIP = [
   "Choose a known stack or type one. The value is saved in this browser.",
   "If left blank, Pi will inspect the codebase and fall back to sane default .gitignore patterns.",
 ].join("\n");
+const MERMAID_MODULE_URL = "/vendor/mermaid/mermaid.esm.min.mjs";
+const MERMAID_LANGUAGES = new Set(["mermaid", "mmd"]);
+const MERMAID_MAX_TEXT_SIZE = 100_000;
+let mermaidModulePromise = null;
+let mermaidThemeSignature = "";
+let mermaidRenderSequence = 0;
 
 function make(tag, className, text) {
   const node = document.createElement(tag);
@@ -1868,6 +1904,17 @@ function trackSkillsFromMessages(messages = latestMessages, tabId = activeTabId)
   for (const message of messages || []) trackSkillsFromMessage(tabId, message);
 }
 
+function assistantMessageUpdateType(event) {
+  return event?.assistantMessageEvent?.type || "";
+}
+
+function eventMayAffectSkillUsage(event) {
+  const type = event?.type || "";
+  return ["tool_execution_start", "tool_execution_update", "tool_execution_end"].includes(type)
+    || (type === "message_update" && assistantMessageUpdateType(event) === "toolcall_start")
+    || (type === "response" && event.command === "new_session");
+}
+
 function trackSkillsFromEvent(event) {
   const tabId = event?.tabId || activeTabId;
   if (!tabId || !event) return;
@@ -1875,11 +1922,9 @@ function trackSkillsFromEvent(event) {
     trackSkillsFromToolInvocation(tabId, event.toolName, event.args, { sourcePrefix: `event:${event.type}` });
     return;
   }
-  if (event.type === "message_update") {
+  if (assistantMessageUpdateType(event) === "toolcall_start") {
     const update = event.assistantMessageEvent || {};
-    if (update.type === "toolcall_start") {
-      trackSkillsFromToolInvocation(tabId, update.name || update.toolName || update.toolCall?.name, update.arguments || update.args || update.toolCall?.arguments || {}, { sourcePrefix: "event:message_update" });
-    }
+    trackSkillsFromToolInvocation(tabId, update.name || update.toolName || update.toolCall?.name, update.arguments || update.args || update.toolCall?.arguments || {}, { sourcePrefix: "event:message_update" });
     return;
   }
   if (event.type === "response" && event.command === "new_session") {
@@ -2164,6 +2209,16 @@ function updateComposerModeButtons() {
   document.body.classList.toggle("pi-run-active", runActive || abortAvailable);
 }
 
+function scheduleComposerModeButtonsUpdate() {
+  if (composerModeButtonsFrame !== null) return;
+  const flush = () => {
+    composerModeButtonsFrame = null;
+    updateComposerModeButtons();
+  };
+  if (typeof requestAnimationFrame === "function") composerModeButtonsFrame = requestAnimationFrame(flush);
+  else composerModeButtonsFrame = setTimeout(flush, 0);
+}
+
 function isFooterPickerOpen() {
   return footerModelPickerOpen || footerThinkingPickerOpen || footerBranchPickerOpen;
 }
@@ -2501,7 +2556,7 @@ function messageCopyText(message, body = null) {
     return sections.join("\n\n").trimEnd() || messageCopyFallbackText(body);
   }
   if (message.role === "thinking") return visibleThinkingText(message.thinking || textFromContent(message.content)).trimEnd() || messageCopyFallbackText(body);
-  if (message.role === "toolCall") return JSON.stringify(message.arguments ?? message.content ?? {}, null, 2);
+  if (message.role === "toolCall") return toolCallDisplayText(message).trimEnd() || messageCopyFallbackText(body);
   if (message.role === "assistantEvent") {
     return (typeof message.content === "string" ? message.content : JSON.stringify(message.content ?? {}, null, 2)).trimEnd();
   }
@@ -4448,6 +4503,7 @@ function syncTabMetadata(nextTabs = []) {
       actionFeedbackByTab.delete(tabId);
       skillUsageByTab.delete(tabId);
       tabMessagesCache.delete(tabId);
+      widgetsByTab.delete(tabId);
       clearGitWorkflowForTab(tabId);
     }
   }
@@ -4528,7 +4584,7 @@ function markTabWorkingLocally(tabId = activeTabId) {
   const previous = activityForTab(tab);
   const next = normalizeTabActivity({ ...previous, status: "working", isWorking: true });
   tabActivities.set(tabId, next);
-  if (tabActivityStateChanged(previous, next)) renderTabs();
+  if (tabActivityStateChanged(previous, next)) scheduleTabsRender();
   return true;
 }
 
@@ -4538,7 +4594,7 @@ function markTabIdleLocally(tabId = activeTabId) {
   const previous = activityForTab(tab);
   const next = normalizeTabActivity({ ...previous, status: "idle", isWorking: false });
   tabActivities.set(tabId, next);
-  if (tabActivityStateChanged(previous, next)) renderTabs();
+  if (tabActivityStateChanged(previous, next)) scheduleTabsRender();
   return true;
 }
 
@@ -4554,7 +4610,7 @@ function markTabDoneLocally(tabId = activeTabId) {
     lastCompletedAt: new Date().toISOString(),
   });
   tabActivities.set(tabId, next);
-  if (tabActivityStateChanged(previous, next)) renderTabs();
+  if (tabActivityStateChanged(previous, next)) scheduleTabsRender();
   return true;
 }
 
@@ -4594,7 +4650,7 @@ function markTabOutputSeen(tabId = activeTabId, { force = false } = {}) {
   const previousSerial = tabSeenCompletionSerials.get(tabId) ?? 0;
   if (previousSerial >= completionSerial) return false;
   tabSeenCompletionSerials.set(tabId, completionSerial);
-  renderTabs();
+  scheduleTabsRender();
   return true;
 }
 
@@ -4614,7 +4670,14 @@ function ingestEventTabActivity(event) {
     const next = setTabActivity(event.tabId, event.tabActivity);
     changed = tabActivityStateChanged(previous, next) || changed;
   }
-  if (changed) renderTabs();
+  if (changed) scheduleTabsRender();
+}
+
+function eventHasTabActivityPayload(event) {
+  return !!(
+    event?.tabId &&
+    (event.tabTitle || event.tabActivity || Object.prototype.hasOwnProperty.call(event, "pendingExtensionUiRequestCount"))
+  );
 }
 
 function trackAutoRetryStateFromEvent(event) {
@@ -4710,6 +4773,96 @@ function cancelPendingDialogs() {
   if (elements.dialog.open) elements.dialog.close();
 }
 
+function widgetCacheForTab(tabId = activeTabId, { create = true } = {}) {
+  if (!tabId) return null;
+  let cache = widgetsByTab.get(tabId);
+  if (!cache && create) {
+    cache = new Map();
+    widgetsByTab.set(tabId, cache);
+  }
+  return cache || null;
+}
+
+function cacheWidgetsForTab(tabId = activeTabId) {
+  if (!tabId) return;
+  if (widgets.size === 0) {
+    widgetsByTab.delete(tabId);
+    return;
+  }
+  widgetsByTab.set(tabId, new Map(widgets));
+}
+
+function restoreWidgetsForActiveTab() {
+  widgets.clear();
+  const cache = widgetCacheForTab(activeTabId, { create: false });
+  if (!cache) return;
+  for (const [key, value] of cache) widgets.set(key, value);
+}
+
+function todoProgressSignatureFromLines(lines = []) {
+  const parsed = parseTodoProgressWidget(lines);
+  if (!parsed) return JSON.stringify(lines.map(stripAnsi));
+  return JSON.stringify({ goal: parsed.goal, done: parsed.done, total: parsed.total, partial: parsed.partial, items: parsed.items, footer: parsed.footer });
+}
+
+function rememberTodoProgressGoalForTab(tabId, widgetKey, request) {
+  if (widgetKey !== "todo-progress" || !tabId) return;
+  if (!Array.isArray(request?.widgetLines)) {
+    todoProgressGoalByTab.delete(tabId);
+    todoProgressSignatureByTab.delete(tabId);
+    return;
+  }
+  const parsed = parseTodoProgressWidget(request.widgetLines);
+  if (parsed?.goal) todoProgressGoalByTab.set(tabId, parsed.goal);
+  todoProgressSignatureByTab.set(tabId, todoProgressSignatureFromLines(request.widgetLines));
+}
+
+function widgetRequestEquivalent(a, b) {
+  const aHasLines = Array.isArray(a?.widgetLines);
+  const bHasLines = Array.isArray(b?.widgetLines);
+  if (aHasLines !== bHasLines) return false;
+  if (!aHasLines) return true;
+  if (a.widgetLines.length !== b.widgetLines.length) return false;
+  return a.widgetLines.every((line, index) => String(line) === String(b.widgetLines[index]));
+}
+
+function setWidgetForTab(tabId, widgetKey, request) {
+  if (!widgetKey) return false;
+  const targetTabId = tabId || activeTabId;
+  const cache = widgetCacheForTab(targetTabId);
+  const hasLines = Array.isArray(request?.widgetLines);
+  const current = cache?.get(widgetKey) || (targetTabId === activeTabId ? widgets.get(widgetKey) : undefined);
+  if (widgetRequestEquivalent(current, request)) return false;
+
+  rememberTodoProgressGoalForTab(targetTabId, widgetKey, request);
+
+  if (cache) {
+    if (hasLines) cache.set(widgetKey, request);
+    else cache.delete(widgetKey);
+    if (cache.size === 0) widgetsByTab.delete(targetTabId);
+  }
+
+  if (targetTabId === activeTabId) {
+    if (hasLines) widgets.set(widgetKey, request);
+    else widgets.delete(widgetKey);
+  }
+
+  return true;
+}
+
+function clearWidgetsForTab(tabId = activeTabId) {
+  if (tabId) {
+    widgetsByTab.delete(tabId);
+    todoProgressGoalByTab.delete(tabId);
+    todoProgressSignatureByTab.delete(tabId);
+  }
+  if (!tabId || tabId === activeTabId) widgets.clear();
+  if (!tabId) {
+    todoProgressGoalByTab.clear();
+    todoProgressSignatureByTab.clear();
+  }
+}
+
 function resetActiveTabUi() {
   clearRefreshTimers();
   clearLiveToolRenderQueue();
@@ -4727,7 +4880,7 @@ function resetActiveTabUi() {
   latestMessagesSessionKey = "";
   clearRunIndicatorActivity({ render: false });
   statusEntries.clear();
-  widgets.clear();
+  restoreWidgetsForActiveTab();
   transientMessages = [];
   liveToolRuns.clear();
   liveToolCards.clear();
@@ -5050,6 +5203,16 @@ function moveNewTabMenuFocus(delta) {
   items[nextIndex].focus({ preventScroll: true });
 }
 
+function scheduleTabsRender() {
+  if (tabsRenderFrame !== null) return;
+  const flush = () => {
+    tabsRenderFrame = null;
+    renderTabs();
+  };
+  if (typeof requestAnimationFrame === "function") tabsRenderFrame = requestAnimationFrame(flush);
+  else tabsRenderFrame = setTimeout(flush, 0);
+}
+
 function renderTabs() {
   if (deferUiRenderDuringPointerActivation("tabs", renderTabs)) return;
   const active = activeTab();
@@ -5108,6 +5271,7 @@ async function switchTab(tabId) {
   footerBranchPickerRequestSerial += 1;
   saveActiveDraft();
   cacheMessagesForTab(activeTabId);
+  cacheWidgetsForTab(activeTabId);
   const tabContext = setActiveTabId(tabId, { remember: true });
   resetActiveTabUi();
   renderTabs();
@@ -7691,15 +7855,71 @@ function confirmFooterGitBranchAction(branch, { create = false, requireConfirm =
   return window.confirm(message);
 }
 
-function promptFooterGitBranchName() {
-  const value = window.prompt("New git branch name:", "");
-  if (value === null) return "";
-  return cleanStatusText(value);
+function footerBranchCreateType(value = footerBranchCreateDraft.type) {
+  return slugifyGitBranchPart(value);
 }
 
-async function createFooterGitBranch() {
-  const branchName = promptFooterGitBranchName();
-  if (!branchName) return;
+function slugifyGitBranchName(value) {
+  return cleanStatusText(value)
+    .split("/")
+    .map((part) => slugifyGitBranchPart(part))
+    .filter(Boolean)
+    .join("/");
+}
+
+function footerBranchCreateName() {
+  const type = footerBranchCreateType();
+  const rawName = cleanStatusText(footerBranchCreateDraft.name);
+  if (!type || !rawName) return "";
+  return slugifyGitBranchName(`${type}/${rawName}`);
+}
+
+function footerBranchCreatePreviewName() {
+  const type = footerBranchCreateType() || "<type>";
+  const rawName = cleanStatusText(footerBranchCreateDraft.name);
+  const name = rawName ? slugifyGitBranchName(rawName) : "<branch-name>";
+  return `${type}/${name}`;
+}
+
+function updateFooterBranchCreateDraft(patch = {}) {
+  const has = (key) => Object.prototype.hasOwnProperty.call(patch, key);
+  footerBranchCreateDraft = {
+    type: has("type") ? footerBranchCreateType(patch.type) : footerBranchCreateType(),
+    name: has("name") ? String(patch.name || "") : footerBranchCreateDraft.name,
+  };
+}
+
+function quoteGitBranchForDisplay(branch) {
+  return `'${String(branch || "").replace(/'/g, `'\\''`)}'`;
+}
+
+function gitSwitchCreateCommandDisplay(branch) {
+  return `git switch -c ${quoteGitBranchForDisplay(branch)}`;
+}
+
+function footerBranchCreateTooltip(branchName = footerBranchCreateName()) {
+  const command = gitSwitchCreateCommandDisplay(branchName || footerBranchCreatePreviewName());
+  return [
+    "Create new branch",
+    "A branch is a safe workspace for your changes.",
+    "",
+    `This will run: ${command}`,
+    "",
+    "What happens:",
+    "• creates the branch from the current code",
+    "• switches this tab to that branch",
+    "• does not commit, push, or delete anything",
+    "",
+    "Tip: use short lowercase words, e.g. fix/login-button.",
+  ].join("\n");
+}
+
+async function createFooterGitBranch(branch = footerBranchCreateName()) {
+  const branchName = cleanStatusText(branch);
+  if (!branchName) {
+    addEvent("Enter a branch name before creating a new git branch.", "warn");
+    return;
+  }
   const tabContext = activeTabContext();
   if (!confirmFooterGitBranchAction(branchName, { create: true, requireConfirm: true, tabContext })) return;
   await applyFooterGitBranch(branchName, { create: true, tabContext, skipConfirm: true });
@@ -7720,6 +7940,7 @@ async function applyFooterGitBranch(branch, { create = false, tabContext = activ
     footerBranchPickerOpen = false;
     footerBranchPickerRequestSerial += 1;
     footerBranchPickerState = { ...footerBranchPickerState, loading: false, switching: "", current: switchedBranch };
+    if (create) updateFooterBranchCreateDraft({ name: "" });
     applyOptimisticGitFooterBranch(switchedBranch, tabContext);
     addEvent(response.data?.created ? `Created and switched to git branch ${switchedBranch}.` : response.data?.switched === false ? `Already on git branch ${switchedBranch}.` : `Switched git branch to ${switchedBranch}.`, "info");
     requestGitFooterWebuiPayload(tabContext, { force: true });
@@ -7737,6 +7958,124 @@ async function applyFooterGitBranch(branch, { create = false, tabContext = activ
   }
 }
 
+function renderFooterBranchCreateForm(state = footerBranchPickerState) {
+  const form = make("form", "footer-branch-create-form");
+  form.setAttribute("aria-label", "Create new git branch");
+
+  const header = make("div", "footer-branch-create-header");
+  header.append(make("strong", "footer-branch-create-title", "Create new branch"));
+
+  const fields = make("div", "footer-branch-create-fields");
+  const typeField = make("div", "footer-branch-create-type-field");
+  const typeInput = make("input", "footer-branch-create-dropdown-inputfield");
+  typeInput.type = "text";
+  typeInput.value = footerBranchCreateType();
+  typeInput.placeholder = "type";
+  typeInput.setAttribute("aria-label", "Branch type suggestion or custom prefix");
+  typeInput.setAttribute("aria-haspopup", "listbox");
+  typeInput.autocomplete = "off";
+  typeInput.autocapitalize = "none";
+  typeInput.spellcheck = false;
+
+  const typeSuggestions = make("div", "footer-branch-type-suggestions");
+  typeSuggestions.setAttribute("role", "listbox");
+  typeSuggestions.hidden = true;
+  const renderTypeSuggestions = () => {
+    const filter = slugifyGitBranchPart(typeInput.value);
+    const matches = GIT_BRANCH_TYPE_SUGGESTIONS.filter((type) => !filter || type.includes(filter));
+    const shown = matches.length ? matches : GIT_BRANCH_TYPE_SUGGESTIONS;
+    typeSuggestions.replaceChildren(...shown.map((type) => {
+      const button = make("button", `footer-branch-type-suggestion${footerBranchCreateType(typeInput.value) === type ? " active" : ""}`, type);
+      button.type = "button";
+      button.setAttribute("role", "option");
+      button.setAttribute("aria-selected", footerBranchCreateType(typeInput.value) === type ? "true" : "false");
+      button.addEventListener("pointerdown", (event) => event.preventDefault());
+      button.addEventListener("click", () => {
+        typeInput.value = type;
+        updateFooterBranchCreateDraft({ type });
+        updatePreview();
+        typeSuggestions.hidden = true;
+        nameInput.focus();
+      });
+      return button;
+    }));
+  };
+
+  const slash = make("span", "footer-branch-create-slash", "/");
+
+  const nameInput = make("input", "footer-branch-create-input-field");
+  nameInput.type = "text";
+  nameInput.value = footerBranchCreateDraft.name;
+  nameInput.placeholder = "short-feature-name";
+  nameInput.autocomplete = "off";
+  nameInput.autocapitalize = "none";
+  nameInput.spellcheck = false;
+  nameInput.setAttribute("aria-label", "New branch name");
+
+  const submitButton = make("button", "footer-branch-create-submit", state.switching ? "Creating…" : "Create new branch");
+  submitButton.type = "submit";
+
+  const preview = make("div", "footer-branch-create-preview");
+  const updatePreview = () => {
+    const branchName = footerBranchCreateName();
+    preview.textContent = gitSwitchCreateCommandDisplay(branchName || footerBranchCreatePreviewName());
+    const submitDisabled = Boolean(state.switching) || !branchName;
+    submitButton.disabled = false;
+    submitButton.classList.toggle("footer-branch-create-submit-disabled", submitDisabled);
+    submitButton.setAttribute("aria-disabled", submitDisabled ? "true" : "false");
+    submitButton.dataset.tooltip = footerBranchCreateTooltip(branchName);
+    submitButton.setAttribute("aria-label", branchName ? `Create and switch to ${branchName}` : "Create new branch: enter both a branch type and name first");
+    submitButton.removeAttribute("title");
+  };
+
+  typeInput.addEventListener("focus", () => {
+    renderTypeSuggestions();
+    typeSuggestions.hidden = false;
+  });
+  typeInput.addEventListener("blur", () => {
+    setTimeout(() => { typeSuggestions.hidden = true; }, 120);
+  });
+  typeInput.addEventListener("input", () => {
+    updateFooterBranchCreateDraft({ type: typeInput.value });
+    updatePreview();
+    renderTypeSuggestions();
+    typeSuggestions.hidden = false;
+  });
+  typeInput.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") {
+      typeSuggestions.hidden = true;
+      return;
+    }
+    if (event.key !== "/" && event.key !== "Enter") return;
+    event.preventDefault();
+    typeSuggestions.hidden = true;
+    nameInput.focus();
+    nameInput.select();
+  });
+  nameInput.addEventListener("input", () => {
+    updateFooterBranchCreateDraft({ name: nameInput.value });
+    updatePreview();
+  });
+  nameInput.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    form.requestSubmit();
+  });
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    if (state.switching) return;
+    const branchName = footerBranchCreateName();
+    createFooterGitBranch(branchName).catch((error) => addEvent(error.message || String(error), "error"));
+  });
+
+  updatePreview();
+  renderTypeSuggestions();
+  typeField.append(typeInput, typeSuggestions);
+  fields.append(typeField, slash, nameInput, submitButton);
+  form.append(header, fields, preview);
+  return form;
+}
+
 function renderFooterBranchPicker() {
   const picker = make("div", "footer-model-picker footer-branch-picker");
   picker.setAttribute("role", "listbox");
@@ -7753,7 +8092,7 @@ function renderFooterBranchPicker() {
     return picker;
   }
   if (state.loading && state.branches.length === 0) {
-    picker.append(make("div", "footer-model-picker-empty muted", "Loading local branches…"));
+    picker.append(make("div", "footer-model-picker-empty muted", "Loading existing local branches… New branch creation is available."), renderFooterBranchCreateForm(state));
     return picker;
   }
 
@@ -7761,16 +8100,11 @@ function renderFooterBranchPicker() {
   if (!state.loading && !hasOtherBranches) {
     const empty = make("div", "footer-model-picker-empty muted");
     empty.append(make("strong", undefined, "No other local branches available."), make("span", undefined, " Create a branch from the current HEAD to continue."));
-    const createButton = make("button", "footer-model-option footer-branch-create-option");
-    createButton.type = "button";
-    createButton.append(
-      make("span", "footer-model-option-main", "Create new branch"),
-      make("span", "footer-model-option-name", "prompts for a name, confirms, then runs git switch -c"),
-    );
-    createButton.addEventListener("click", () => createFooterGitBranch().catch((error) => addEvent(error.message || String(error), "error")));
-    picker.append(empty, createButton);
+    picker.append(empty);
   }
 
+  picker.append(renderFooterBranchCreateForm(state));
+
   for (const branch of state.branches) {
     const selected = branch.current || (!!state.current && branch.name === state.current);
     const disabled = selected || state.loading || !!state.switching;
@@ -7790,6 +8124,162 @@ function renderFooterBranchPicker() {
   return picker;
 }
 
+function footerScopedModelKey(model) {
+  return model?.provider && model?.id ? `${model.provider}/${model.id}` : "";
+}
+
+function readFooterScopedModelOrder() {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(FOOTER_SCOPED_MODEL_ORDER_STORAGE_KEY) || "[]");
+    return Array.isArray(parsed) ? parsed.filter((key) => typeof key === "string" && key.trim()) : [];
+  } catch {
+    return [];
+  }
+}
+
+function writeFooterScopedModelOrder(order) {
+  try {
+    localStorage.setItem(FOOTER_SCOPED_MODEL_ORDER_STORAGE_KEY, JSON.stringify([...new Set(order.filter(Boolean))]));
+  } catch {}
+}
+
+function orderedFooterScopedModels() {
+  const order = readFooterScopedModelOrder();
+  if (!order.length) return footerScopedModels;
+  const rank = new Map(order.map((key, index) => [key, index]));
+  return [...footerScopedModels].sort((a, b) => {
+    const aRank = rank.has(footerScopedModelKey(a)) ? rank.get(footerScopedModelKey(a)) : Number.MAX_SAFE_INTEGER;
+    const bRank = rank.has(footerScopedModelKey(b)) ? rank.get(footerScopedModelKey(b)) : Number.MAX_SAFE_INTEGER;
+    return aRank - bRank;
+  });
+}
+
+function commitFooterScopedModelOrder(order, { render = true, focusKey = "" } = {}) {
+  writeFooterScopedModelOrder(order);
+  footerScopedModels = orderedFooterScopedModels();
+  if (render) renderFooter();
+  if (focusKey) {
+    const movedButton = document.querySelector(`[data-footer-model-key="${CSS.escape(focusKey)}"]`);
+    if (movedButton) movedButton.focus();
+  }
+}
+
+function reorderFooterScopedModel(fromKey, toKey, { focus = true } = {}) {
+  if (!fromKey || !toKey || fromKey === toKey) return false;
+  const models = orderedFooterScopedModels();
+  const fromIndex = models.findIndex((model) => footerScopedModelKey(model) === fromKey);
+  const toIndex = models.findIndex((model) => footerScopedModelKey(model) === toKey);
+  if (fromIndex < 0 || toIndex < 0) return false;
+  const [moved] = models.splice(fromIndex, 1);
+  models.splice(toIndex, 0, moved);
+  commitFooterScopedModelOrder(models.map(footerScopedModelKey), { focusKey: focus ? fromKey : "" });
+  return true;
+}
+
+function moveFooterScopedModelByOffset(modelKey, offset) {
+  const models = orderedFooterScopedModels();
+  const fromIndex = models.findIndex((model) => footerScopedModelKey(model) === modelKey);
+  const toIndex = fromIndex + offset;
+  if (fromIndex < 0 || toIndex < 0 || toIndex >= models.length) return false;
+  const [moved] = models.splice(fromIndex, 1);
+  models.splice(toIndex, 0, moved);
+  commitFooterScopedModelOrder(models.map(footerScopedModelKey), { focusKey: modelKey });
+  return true;
+}
+
+function footerScopedModelButtons() {
+  return [...document.querySelectorAll(".footer-model-picker .footer-model-option[data-footer-model-key]")];
+}
+
+function footerScopedModelButtonFromPoint(clientX, clientY) {
+  return document.elementFromPoint(clientX, clientY)?.closest?.(".footer-model-option[data-footer-model-key]") || null;
+}
+
+function clearFooterScopedModelDragMarkers() {
+  for (const button of footerScopedModelButtons()) {
+    button.classList.remove("drag-over", "drag-over-before", "drag-over-after");
+  }
+}
+
+function commitVisibleFooterScopedModelOrder({ render = false, focusKey = "" } = {}) {
+  const order = footerScopedModelButtons().map((button) => button.dataset.footerModelKey).filter(Boolean);
+  if (!order.length) return;
+  commitFooterScopedModelOrder(order, { render, focusKey });
+}
+
+function moveVisibleFooterScopedModel(fromKey, targetButton, clientY) {
+  if (!fromKey || !targetButton) return false;
+  const sourceButton = document.querySelector(`[data-footer-model-key="${CSS.escape(fromKey)}"]`);
+  if (!sourceButton || sourceButton === targetButton) return false;
+  const parent = sourceButton.parentElement;
+  if (!parent || targetButton.parentElement !== parent) return false;
+  const targetKey = targetButton.dataset.footerModelKey || "";
+  const rect = targetButton.getBoundingClientRect();
+  const insertBefore = clientY < rect.top + rect.height / 2;
+
+  clearFooterScopedModelDragMarkers();
+  targetButton.classList.add("drag-over", insertBefore ? "drag-over-before" : "drag-over-after");
+  footerScopedModelLastDragOverKey = `${targetKey}:${insertBefore ? "before" : "after"}`;
+
+  if (insertBefore) parent.insertBefore(sourceButton, targetButton);
+  else parent.insertBefore(sourceButton, targetButton.nextSibling);
+  commitVisibleFooterScopedModelOrder({ render: false });
+  return true;
+}
+
+function beginFooterScopedModelPointerDrag(event, modelKey) {
+  if (event.button !== 0 || !modelKey) return;
+  footerScopedModelPointerDrag = { modelKey, pointerId: event.pointerId, startX: event.clientX, startY: event.clientY, active: false };
+  window.addEventListener("pointermove", updateFooterScopedModelPointerDrag, { capture: true });
+  window.addEventListener("pointerup", endFooterScopedModelPointerDrag, { capture: true });
+  window.addEventListener("pointercancel", endFooterScopedModelPointerDrag, { capture: true });
+}
+
+function updateFooterScopedModelPointerDrag(event) {
+  const drag = footerScopedModelPointerDrag;
+  if (!drag || drag.pointerId !== event.pointerId) return;
+  const distance = Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY);
+  if (!drag.active && distance < FOOTER_SCOPED_MODEL_POINTER_DRAG_THRESHOLD_PX) return;
+  event.preventDefault();
+  if (!drag.active) {
+    drag.active = true;
+    footerScopedModelDragKey = drag.modelKey;
+    footerScopedModelLastDragOverKey = "";
+    clearTimeout(pointerActivationTimeout);
+    pointerActivationTimeout = null;
+    activePointerActivation = null;
+    deferredUiRenderCallbacks.delete("footer");
+    const sourceButton = document.querySelector(`[data-footer-model-key="${CSS.escape(drag.modelKey)}"]`);
+    if (sourceButton) sourceButton.classList.add("dragging");
+  }
+  const targetButton = footerScopedModelButtonFromPoint(event.clientX, event.clientY);
+  if (!targetButton || targetButton.dataset.footerModelKey === drag.modelKey) return;
+  const rect = targetButton.getBoundingClientRect();
+  const markerKey = `${targetButton.dataset.footerModelKey}:${event.clientY < rect.top + rect.height / 2 ? "before" : "after"}`;
+  if (markerKey === footerScopedModelLastDragOverKey) return;
+  moveVisibleFooterScopedModel(drag.modelKey, targetButton, event.clientY);
+}
+
+function endFooterScopedModelPointerDrag(event) {
+  const drag = footerScopedModelPointerDrag;
+  if (!drag || drag.pointerId !== event.pointerId) return;
+  window.removeEventListener("pointermove", updateFooterScopedModelPointerDrag, { capture: true });
+  window.removeEventListener("pointerup", endFooterScopedModelPointerDrag, { capture: true });
+  window.removeEventListener("pointercancel", endFooterScopedModelPointerDrag, { capture: true });
+  const wasActive = drag.active;
+  const sourceButton = document.querySelector(`[data-footer-model-key="${CSS.escape(drag.modelKey)}"]`);
+  footerScopedModelPointerDrag = null;
+  footerScopedModelDragKey = "";
+  footerScopedModelLastDragOverKey = "";
+  clearFooterScopedModelDragMarkers();
+  if (sourceButton) sourceButton.classList.remove("dragging");
+  if (wasActive) {
+    footerScopedModelSuppressClickUntil = Date.now() + 250;
+    event.preventDefault();
+    commitVisibleFooterScopedModelOrder({ render: false, focusKey: drag.modelKey });
+  }
+}
+
 async function applyFooterModel(model) {
   if (!model?.provider || !model?.id) return;
   const tabContext = activeTabContext();
@@ -7815,7 +8305,7 @@ function renderFooterModelPicker() {
   picker.setAttribute("role", "listbox");
   picker.setAttribute("aria-label", "Scoped models");
   picker.append(make("div", "footer-model-picker-title", "Scoped models"));
-  picker.append(make("div", "footer-model-picker-source", footerScopedModelSource === "none" ? "No saved scope" : `Source: ${footerScopedModelSource}${footerScopedModelPatterns.length ? ` · ${footerScopedModelPatterns.join(", ")}` : ""}`));
+  picker.append(make("div", "footer-model-picker-source", "Drag models to reorder · Alt+↑/↓ moves focused model"));
   if (footerScopedModels.length === 0) {
     const empty = make("div", "footer-model-picker-empty muted");
     empty.append(
@@ -7826,10 +8316,16 @@ function renderFooterModelPicker() {
     return picker;
   }
   const current = currentState?.model;
+  footerScopedModels = orderedFooterScopedModels();
   for (const model of footerScopedModels) {
     const selected = current?.provider === model.provider && current?.id === model.id;
-    const button = make("button", `footer-model-option${selected ? " active" : ""}`);
+    const modelKey = footerScopedModelKey(model);
+    const dragging = footerScopedModelDragKey === modelKey;
+    const dragOver = footerScopedModelDragKey && footerScopedModelLastDragOverKey === modelKey;
+    const button = make("button", `footer-model-option${selected ? " active" : ""}${dragging ? " dragging" : ""}${dragOver ? " drag-over" : ""}`);
     button.type = "button";
+    button.draggable = false;
+    button.dataset.footerModelKey = modelKey;
     button.setAttribute("role", "option");
     button.setAttribute("aria-selected", selected ? "true" : "false");
     button.title = `${model.provider}/${model.id}${model.name ? ` · ${model.name}` : ""}`;
@@ -7837,7 +8333,19 @@ function renderFooterModelPicker() {
       make("span", "footer-model-option-main", `${model.provider}/${model.id}`),
       make("span", "footer-model-option-name", model.name || ""),
     );
-    button.addEventListener("click", () => applyFooterModel(model));
+    button.addEventListener("click", (event) => {
+      if (Date.now() < footerScopedModelSuppressClickUntil) {
+        event.preventDefault();
+        return;
+      }
+      applyFooterModel(model);
+    });
+    button.addEventListener("keydown", (event) => {
+      if (!event.altKey || (event.key !== "ArrowUp" && event.key !== "ArrowDown")) return;
+      event.preventDefault();
+      moveFooterScopedModelByOffset(modelKey, event.key === "ArrowUp" ? -1 : 1);
+    });
+    button.addEventListener("pointerdown", (event) => beginFooterScopedModelPointerDrag(event, modelKey));
     picker.append(button);
   }
   return picker;
@@ -8630,13 +9138,27 @@ function renderReleaseDialogMessage(parent, text) {
   }
 }
 
+function textLines(raw) {
+  const value = String(raw || "");
+  const lines = [];
+  let start = 0;
+  for (let index = 0; index < value.length; index += 1) {
+    if (value[index] !== "\n") continue;
+    const end = index > start && value[index - 1] === "\r" ? index - 1 : index;
+    lines.push(value.slice(start, end));
+    start = index + 1;
+  }
+  if (start <= value.length) lines.push(value.slice(start));
+  return lines;
+}
+
 function stripTodoProgressLines(text, { streaming = false } = {}) {
   if (!isOptionalFeatureEnabled("todoProgressWidget")) return String(text || "");
   let inFence = false;
   const kept = [];
   const raw = String(text || "");
   const hasTrailingNewline = /\r?\n$/.test(raw);
-  const lines = raw.split(/\r?\n/);
+  const lines = textLines(raw);
 
   lines.forEach((line, index) => {
     const isUnfinishedTail = streaming && !hasTrailingNewline && index === lines.length - 1;
@@ -8653,8 +9175,118 @@ function stripTodoProgressLines(text, { streaming = false } = {}) {
   return kept.join("\n").replace(/\n{3,}/g, "\n\n").trim();
 }
 
+function parseTodoProgressItemLine(line) {
+  const match = String(line || "").match(/^\s*(?:(?:[-*]|\d+[.)])\s*)?\[( |x|X|-)\]\s+(.+)$/);
+  if (!match) return null;
+  const mark = match[1].toLowerCase();
+  return { status: mark === "x" ? "done" : mark === "-" ? "partial" : "todo", text: match[2].trim() };
+}
+
+function todoProgressStatusLabel(status) {
+  if (status === "done") return "[x]";
+  if (status === "partial") return "[-]";
+  return "[ ]";
+}
+
+function liveTodoProgressWidgetLinesFromText(text, tabId = activeTabId) {
+  if (!isOptionalFeatureEnabled("todoProgressWidget")) return null;
+  const raw = String(text || "");
+  if (!raw.trim()) return null;
+
+  let inFence = false;
+  let goal = "";
+  let current = [];
+  const blocks = [];
+  const flush = () => {
+    if (current.length) blocks.push(current);
+    current = [];
+  };
+
+  for (const line of textLines(raw)) {
+    if (/^\s*```/.test(line)) {
+      inFence = !inFence;
+      flush();
+      continue;
+    }
+    if (inFence) continue;
+
+    const clean = stripAnsi(line).trim();
+    const goalMatch = clean.match(/^Goal\s*[:：]\s*(.+)$/i);
+    if (goalMatch?.[1]?.trim()) goal = goalMatch[1].trim();
+
+    const item = parseTodoProgressItemLine(clean);
+    if (item) {
+      current.push(item);
+      continue;
+    }
+    flush();
+  }
+  flush();
+
+  const items = blocks.at(-1) || [];
+  if (!items.length) return null;
+
+  if (goal && tabId) todoProgressGoalByTab.set(tabId, goal);
+  const displayGoal = goal || (tabId ? todoProgressGoalByTab.get(tabId) : "") || "";
+  const done = items.filter((item) => item.status === "done").length;
+  const partial = items.filter((item) => item.status === "partial").length;
+  const lines = [];
+  if (displayGoal) lines.push(`Goal: ${displayGoal}`);
+  lines.push(`Todo ${done}/${items.length} done${partial ? `, ${partial} partial` : ""}`);
+  for (const item of items) lines.push(`${todoProgressStatusLabel(item.status)} ${item.text}`);
+  return lines;
+}
+
+// Coalesce live widget rebuilds to one per animation frame. The streaming
+// output handler calls into here on every text token, but the widget area
+// must not be torn down/rebuilt per token (that is UI reacting to the agent
+// output stream). One render per frame keeps streaming transcript-local.
+function scheduleLiveWidgetRender() {
+  if (liveWidgetRenderFrame !== null) return;
+  const flush = () => {
+    liveWidgetRenderFrame = null;
+    renderWidgets();
+  };
+  if (typeof requestAnimationFrame === "function") liveWidgetRenderFrame = requestAnimationFrame(flush);
+  else liveWidgetRenderFrame = setTimeout(flush, 0);
+}
+
+function scheduleLiveTodoProgressWidgetSync(text, tabId = activeTabId) {
+  liveTodoProgressPendingText = String(text || "");
+  liveTodoProgressPendingTabId = tabId || activeTabId;
+  if (liveTodoProgressSyncFrame !== null) return;
+  const flush = () => {
+    const pendingText = liveTodoProgressPendingText;
+    const pendingTabId = liveTodoProgressPendingTabId || activeTabId;
+    liveTodoProgressSyncFrame = null;
+    liveTodoProgressPendingText = "";
+    liveTodoProgressPendingTabId = null;
+    syncLiveTodoProgressWidgetFromText(pendingText, pendingTabId);
+  };
+  if (typeof requestAnimationFrame === "function") liveTodoProgressSyncFrame = requestAnimationFrame(flush);
+  else liveTodoProgressSyncFrame = setTimeout(flush, 0);
+}
+
+function syncLiveTodoProgressWidgetFromText(text, tabId = activeTabId) {
+  const lines = liveTodoProgressWidgetLinesFromText(text, tabId);
+  if (!lines) return false;
+  const signature = todoProgressSignatureFromLines(lines);
+  if (tabId && todoProgressSignatureByTab.get(tabId) === signature) return false;
+  // liveTodoProgressWidgetLinesFromText already short-circuits unless the
+  // feature is enabled, so detection is settled here. Do NOT run
+  // updateOptionalFeatureAvailability() per token: it triggers git-footer
+  // payload reconciliation and a full optional-feature control rebuild.
+  // Availability is reconciled on command/state refreshes and RPC widget
+  // updates instead, keeping streaming output decoupled from chrome UI.
+  const changed = setWidgetForTab(tabId, "todo-progress", { method: "setWidget", widgetKey: "todo-progress", widgetLines: lines, tabId, live: true });
+  if (changed && tabId === activeTabId) scheduleLiveWidgetRender();
+  return changed;
+}
+
 function parseTodoProgressWidget(lines) {
   const cleanLines = lines.map(stripAnsi).map((line) => line.trim()).filter(Boolean);
+  const goalLine = cleanLines.find((line) => /^Goal\s*[:：]/i.test(line));
+  const goal = goalLine ? goalLine.replace(/^Goal\s*[:：]\s*/i, "").trim() : "";
   const headerIndex = cleanLines.findIndex((line) => /^Todo\s+\d+\/\d+\s+done/i.test(line));
   if (headerIndex === -1) return null;
 
@@ -8665,16 +9297,16 @@ function parseTodoProgressWidget(lines) {
   const items = [];
   let footer = "";
   for (const line of cleanLines.slice(headerIndex + 1)) {
-    const item = line.match(/^\[( |x|X|-)\]\s+(.+)$/);
+    const item = parseTodoProgressItemLine(line);
     if (item) {
-      const mark = item[1].toLowerCase();
-      items.push({ status: mark === "x" ? "done" : mark === "-" ? "partial" : "todo", text: item[2].trim() });
+      items.push(item);
     } else if (/^Scroll\s+/i.test(line)) {
       footer = line;
     }
   }
 
   return {
+    goal,
     done: Number.parseInt(match[1], 10) || 0,
     total: Number.parseInt(match[2], 10) || items.length,
     partial: Number.parseInt(match[3] || "0", 10) || 0,
@@ -8709,6 +9341,7 @@ function renderTodoProgressWidget(_key, lines) {
   const fill = make("span", "todo-widget-progress-fill");
   fill.style.width = `${percent}%`;
   progress.append(fill);
+  if (todo.goal) summary.append(make("div", "todo-widget-goal", `Goal: ${todo.goal}`));
   summary.append(header, progress);
 
   const body = make("div", "todo-widget-body");
@@ -12888,14 +13521,201 @@ function appendMarkdownParagraph(parent, lines) {
   parent.append(paragraph);
 }
 
-function appendMarkdownCodeBlock(parent, code, language = "") {
+function setMarkdownCodeCopyButtonState(button, copied) {
+  clearTimeout(button._markdownCodeCopyResetTimer);
+  const label = button._markdownCodeCopyDefaultLabel || "Copy";
+  button.classList.toggle("copied", copied);
+  button.textContent = copied ? "Copied" : label;
+  button.title = copied ? "Copied code block" : `${label} code block`;
+  button.setAttribute("aria-label", button.title);
+  if (copied) {
+    button._markdownCodeCopyResetTimer = setTimeout(() => setMarkdownCodeCopyButtonState(button, false), 1400);
+  }
+}
+
+async function copyMarkdownCodeBlock(button) {
+  const wrapper = button.closest(".markdown-code-block");
+  const codeNode = wrapper?.querySelector(":scope > pre.markdown-code > code, :scope > details.markdown-mermaid-source pre.markdown-code > code");
+  const text = codeNode?.textContent || "";
+  if (!text) {
+    addEvent("code block has no text to copy", "warn");
+    return;
+  }
+  button.disabled = true;
+  try {
+    await copyText(text);
+    setMarkdownCodeCopyButtonState(button, true);
+  } catch (error) {
+    addEvent(`code block copy failed: ${error.message || String(error)}`, "warn");
+  } finally {
+    button.disabled = false;
+  }
+}
+
+function attachMarkdownCodeCopyButton(wrapper, label = "Copy") {
+  if (!wrapper) return null;
+  const existing = wrapper.querySelector(":scope > .markdown-code-copy-button");
+  if (existing) return existing;
+  const button = make("button", "markdown-code-copy-button", label);
+  button.type = "button";
+  button._markdownCodeCopyDefaultLabel = label;
+  setMarkdownCodeCopyButtonState(button, false);
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    copyMarkdownCodeBlock(button);
+  });
+  wrapper.classList.add("has-code-copy-action");
+  wrapper.append(button);
+  return button;
+}
+
+function normalizedMarkdownLanguage(language) {
+  return String(language || "").trim().toLowerCase();
+}
+
+function isMermaidLanguage(language) {
+  return MERMAID_LANGUAGES.has(normalizedMarkdownLanguage(language));
+}
+
+function mermaidCssVar(styles, name, fallback) {
+  return styles.getPropertyValue(name).trim() || fallback;
+}
+
+function mermaidConfig() {
+  const styles = getComputedStyle(document.documentElement);
+  const text = mermaidCssVar(styles, "--ctp-text", "#cdd6f4");
+  const subtext = mermaidCssVar(styles, "--ctp-subtext", "#bac2de");
+  const surface = mermaidCssVar(styles, "--ctp-surface", "#313244");
+  const base = mermaidCssVar(styles, "--ctp-base", "#1e1e2e");
+  const crust = mermaidCssVar(styles, "--ctp-crust", "#11111b");
+  const mauve = mermaidCssVar(styles, "--ctp-mauve", "#cba6f7");
+  const blue = mermaidCssVar(styles, "--ctp-blue", "#89b4fa");
+  const teal = mermaidCssVar(styles, "--ctp-teal", "#94e2d5");
+  const yellow = mermaidCssVar(styles, "--ctp-yellow", "#f9e2af");
+  const red = mermaidCssVar(styles, "--ctp-red", "#f38ba8");
+  return {
+    startOnLoad: false,
+    securityLevel: "strict",
+    logLevel: "error",
+    maxTextSize: MERMAID_MAX_TEXT_SIZE,
+    theme: "base",
+    flowchart: { htmlLabels: false },
+    themeVariables: {
+      darkMode: true,
+      background: "transparent",
+      mainBkg: base,
+      secondBkg: surface,
+      primaryColor: surface,
+      primaryTextColor: text,
+      primaryBorderColor: mauve,
+      secondaryColor: base,
+      secondaryTextColor: text,
+      secondaryBorderColor: blue,
+      tertiaryColor: crust,
+      tertiaryTextColor: text,
+      tertiaryBorderColor: teal,
+      lineColor: subtext,
+      textColor: text,
+      titleColor: teal,
+      nodeTextColor: text,
+      clusterBkg: crust,
+      clusterBorder: mauve,
+      edgeLabelBackground: base,
+      noteBkgColor: crust,
+      noteTextColor: text,
+      noteBorderColor: yellow,
+      errorBkgColor: crust,
+      errorTextColor: red,
+      fontFamily: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    },
+  };
+}
+
+function initializeMermaid(mermaid) {
+  const config = mermaidConfig();
+  const signature = JSON.stringify(config);
+  if (signature !== mermaidThemeSignature) {
+    mermaid.initialize(config);
+    mermaidThemeSignature = signature;
+  }
+}
+
+async function loadMermaid() {
+  if (!mermaidModulePromise) {
+    mermaidModulePromise = import(MERMAID_MODULE_URL)
+      .then((module) => module.default || module)
+      .catch((error) => {
+        mermaidModulePromise = null;
+        throw error;
+      });
+  }
+  const mermaid = await mermaidModulePromise;
+  initializeMermaid(mermaid);
+  return mermaid;
+}
+
+function mermaidRenderErrorMessage(error) {
+  return String(error?.str || error?.message || error || "Unknown Mermaid render error").trim();
+}
+
+async function renderMermaidDiagram(diagram, status, source) {
+  const token = `${Date.now().toString(36)}-${++mermaidRenderSequence}`;
+  diagram.dataset.mermaidRenderToken = token;
+  try {
+    if (source.length > MERMAID_MAX_TEXT_SIZE) throw new Error(`Mermaid diagram is too large (${source.length} characters, max ${MERMAID_MAX_TEXT_SIZE}).`);
+    const mermaid = await loadMermaid();
+    const id = `mermaid-${token.replace(/[^a-z0-9_-]/gi, "-")}`;
+    const { svg, bindFunctions } = await mermaid.render(id, source);
+    if (!diagram.isConnected || diagram.dataset.mermaidRenderToken !== token) return;
+    diagram.innerHTML = svg;
+    bindFunctions?.(diagram);
+    diagram.classList.add("rendered");
+    status.textContent = "";
+    status.hidden = true;
+  } catch (error) {
+    if (!diagram.isConnected || diagram.dataset.mermaidRenderToken !== token) return;
+    diagram.classList.add("render-error");
+    status.hidden = false;
+    status.classList.add("error");
+    status.textContent = `Mermaid render failed: ${mermaidRenderErrorMessage(error)}`;
+  }
+}
+
+function appendMarkdownMermaidBlock(parent, code) {
+  const source = String(code || "").replace(/\n+$/g, "");
+  const wrapper = make("div", "markdown-code-block markdown-mermaid-block");
+  wrapper.append(make("div", "markdown-code-language", "mermaid"));
+  const diagram = make("div", "markdown-mermaid-diagram");
+  diagram.setAttribute("role", "img");
+  diagram.setAttribute("aria-label", "Mermaid diagram");
+  const status = make("div", "markdown-mermaid-status muted", "Rendering Mermaid diagram…");
+  const sourceDetails = make("details", "markdown-mermaid-source");
+  sourceDetails.append(make("summary", undefined, "Mermaid source"));
+  const pre = make("pre", "code-block markdown-code");
+  const codeNode = make("code", "language-mermaid");
+  codeNode.textContent = source;
+  pre.append(codeNode);
+  sourceDetails.append(pre);
+  wrapper.append(diagram, status, sourceDetails);
+  attachMarkdownCodeCopyButton(wrapper, "Copy source");
+  parent.append(wrapper);
+  queueMicrotask(() => renderMermaidDiagram(diagram, status, source));
+}
+
+function appendMarkdownCodeBlock(parent, code, language = "", { closed = true } = {}) {
+  if (closed && isMermaidLanguage(language)) {
+    appendMarkdownMermaidBlock(parent, code);
+    return;
+  }
   const wrapper = make("div", "markdown-code-block");
   if (language) wrapper.append(make("div", "markdown-code-language", language));
   const pre = make("pre", "code-block markdown-code");
   const codeNode = make("code", language ? `language-${language.replace(/[^a-z0-9_-]/gi, "")}` : "");
-  codeNode.textContent = code.replace(/\n+$/g, "");
+  codeNode.textContent = String(code || "").replace(/\n+$/g, "");
   pre.append(codeNode);
   wrapper.append(pre);
+  attachMarkdownCodeCopyButton(wrapper);
   parent.append(wrapper);
 }
 
@@ -12993,8 +13813,9 @@ function renderMarkdownInto(parent, text) {
         codeLines.push(lines[index]);
         index += 1;
       }
-      if (index < lines.length) index += 1;
-      appendMarkdownCodeBlock(parent, codeLines.join("\n"), language);
+      const closed = index < lines.length;
+      if (closed) index += 1;
+      appendMarkdownCodeBlock(parent, codeLines.join("\n"), language, { closed });
       continue;
     }
     if (markdownTableSeparator(lines[index + 1]) && line.includes("|")) {
@@ -13098,16 +13919,21 @@ function streamingMarkdownStableBoundary(text) {
   return boundary;
 }
 
+function clearStreamingMarkdownBlock(block) {
+  while (block.firstChild) block.firstChild.remove();
+}
+
 function renderStreamingMarkdown(block, text) {
   let state = streamMarkdownState;
   if (!state || state.block !== block) {
-    block.replaceChildren();
+    clearStreamingMarkdownBlock(block);
     state = streamMarkdownState = { block, stableText: "", tailNodes: [] };
   }
   if (!text.startsWith(state.stableText)) {
-    // Earlier content changed retroactively (e.g. todo-progress stripping);
-    // fall back to a full re-render for correctness.
-    block.replaceChildren();
+    // Derived streaming text should be append-only; if a provider still sends a
+    // retroactive rewrite, reset the streaming renderer without replaceChildren
+    // so this path cannot tear down external chrome or widget nodes.
+    clearStreamingMarkdownBlock(block);
     state.stableText = "";
     state.tailNodes = [];
   }
@@ -13548,6 +14374,30 @@ function assistantToolCallArguments(part) {
   return part?.arguments || part?.args || part?.input || part?.toolCall?.arguments || {};
 }
 
+function toolCallArgumentsText(value, { includeEmptyObject = true } = {}) {
+  if (typeof value === "string") return value;
+  if (value === undefined || value === null) return includeEmptyObject ? "{}" : "";
+  if (typeof value === "object") {
+    if (!includeEmptyObject && !Array.isArray(value) && Object.keys(value).length === 0) return "";
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch {
+      return String(value);
+    }
+  }
+  return String(value);
+}
+
+function toolCallDisplayText(message, options = {}) {
+  if (typeof message?.rawArguments === "string" && message.rawArguments.length > 0) return message.rawArguments;
+  return toolCallArgumentsText(message?.arguments ?? message?.content ?? {}, options);
+}
+
+function renderToolCallMessageBody(body, message, { placeholder = "{}" } = {}) {
+  const text = toolCallDisplayText(message).trimEnd() || placeholder;
+  appendText(body, text, "code-block tool-call-arguments");
+}
+
 function assistantTextPartText(part) {
   if (!part || typeof part !== "object" || part.type !== "text") return "";
   if (typeof part.text === "string") return part.text;
@@ -14582,7 +15432,7 @@ function appendMessage(message, { streaming = false, messageIndex = -1, transien
     const thinkingText = visibleThinkingText(message.thinking || textFromContent(message.content));
     if (thinkingOutputVisible && thinkingText) appendText(body, thinkingText, "thinking-text");
   } else if (message.role === "toolCall") {
-    appendText(body, JSON.stringify(message.arguments ?? message.content ?? {}, null, 2), "code-block");
+    renderToolCallMessageBody(body, message);
   } else if (message.role === "assistantEvent") {
     appendText(body, typeof message.content === "string" ? message.content : JSON.stringify(message.content ?? {}, null, 2), "code-block");
   } else {
@@ -14779,6 +15629,19 @@ function renderRunIndicator({ scroll = false } = {}) {
   if (shouldFollow) scrollChatToBottom();
 }
 
+function scheduleRunIndicatorRender({ scroll = false } = {}) {
+  runIndicatorRenderScroll = runIndicatorRenderScroll || scroll;
+  if (runIndicatorRenderFrame !== null) return;
+  const flush = () => {
+    const shouldScroll = runIndicatorRenderScroll;
+    runIndicatorRenderFrame = null;
+    runIndicatorRenderScroll = false;
+    renderRunIndicator({ scroll: shouldScroll });
+  };
+  if (typeof requestAnimationFrame === "function") runIndicatorRenderFrame = requestAnimationFrame(flush);
+  else runIndicatorRenderFrame = setTimeout(flush, 0);
+}
+
 function setRunIndicatorActivity(activity, { active = true, scroll = true } = {}) {
   const wasLocallyActive = runIndicatorLocallyActive;
   const previousActivity = runIndicatorActivity;
@@ -14789,9 +15652,9 @@ function setRunIndicatorActivity(activity, { active = true, scroll = true } = {}
   }
   runIndicatorActivity = activity || runIndicatorActivity || "Waiting for output or action…";
   const needsRender = scroll || !hadRunIndicatorBubble || wasLocallyActive !== runIndicatorLocallyActive || previousActivity !== runIndicatorActivity;
-  if (needsRender) renderRunIndicator({ scroll });
+  if (needsRender) scheduleRunIndicatorRender({ scroll });
   else if (runIndicatorIsActive()) startRunIndicatorTicker();
-  updateComposerModeButtons();
+  scheduleComposerModeButtonsUpdate();
   if (active) scheduleRunIndicatorGraceCheck();
 }
 
@@ -15217,11 +16080,15 @@ function applyChatFollowScroll() {
   updateStickyUserPromptButton();
 }
 
-function scheduleChatFollowScroll() {
+function scheduleChatFollowScroll({ settle = true } = {}) {
   if (chatFollowFrame === null) chatFollowFrame = requestAnimationFrame(applyChatFollowScroll);
+  if (!settle) return;
+  chatFollowNeedsSettle = true;
   clearTimeout(chatFollowSettleTimer);
   chatFollowSettleTimer = setTimeout(() => {
     chatFollowSettleTimer = null;
+    if (!chatFollowNeedsSettle) return;
+    chatFollowNeedsSettle = false;
     applyChatFollowScroll();
   }, CHAT_FOLLOW_SETTLE_DELAY_MS);
 }
@@ -15230,16 +16097,7 @@ function scrollChatToBottom({ force = false } = {}) {
   if (deferChatFollowScrollDuringPointerActivation({ force })) return;
   if (deferChatFollowScrollDuringInteractiveDropdown({ force })) return;
   if (force) autoFollowChat = true;
-  if (!autoFollowChat) {
-    updateJumpToLatestButton();
-    updateStickyUserPromptButton();
-    return;
-  }
-  lastChatProgrammaticScrollAt = performance.now();
-  setChatScrollTopInstant(elements.chat.scrollHeight);
   scheduleChatFollowScroll();
-  updateJumpToLatestButton();
-  updateStickyUserPromptButton();
 }
 
 function syncAutoFollowFromChatScroll() {
@@ -16774,6 +17632,8 @@ function cancelStreamBubbleHide() {
 function cancelStreamingAssistantTextRender() {
   clearTimeout(streamTextRenderTimer);
   streamTextRenderTimer = null;
+  if (streamTextRenderFrame !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(streamTextRenderFrame);
+  streamTextRenderFrame = null;
 }
 
 function removeStreamBubble() {
@@ -16786,10 +17646,54 @@ function removeStreamBubble() {
   renderRunIndicator({ scroll: false });
 }
 
-function streamRenderableAssistantText() {
+function resetStreamDerivedTextCache() {
+  streamDerivedTextCache = { rawText: null, assistantText: "", thinkingFormat: null, finalText: "" };
+}
+
+function setStreamRawText(text) {
+  const nextText = String(text || "");
+  if (nextText === streamRawText) return false;
+  streamRawText = nextText;
+  resetStreamDerivedTextCache();
+  return true;
+}
+
+function appendStreamRawText(delta) {
+  const text = String(delta || "");
+  if (!text) return false;
+  streamRawText += text;
+  resetStreamDerivedTextCache();
+  return true;
+}
+
+function streamingAssistantTextFallback(event) {
+  // Fallback for legacy/summary events that do not carry a delta. The hot
+  // text_delta path appends update.delta and avoids this accumulated-message scan.
+  return assistantTextFromMessage(assistantStreamingMessage(event), { streaming: true });
+}
+
+function syncStreamRawTextFromUpdate(event, update) {
+  if (update.type === "text_delta") {
+    const delta = update.delta ?? update.text ?? update.content ?? "";
+    if (appendStreamRawText(delta)) return true;
+  }
+  if (typeof update.content === "string") return setStreamRawText(update.content);
+  if (typeof update.text === "string") return setStreamRawText(update.text);
+  const partialText = streamingAssistantTextFallback(event);
+  return typeof partialText === "string" ? setStreamRawText(partialText) : false;
+}
+
+function streamDerivedText() {
+  if (streamDerivedTextCache.rawText === streamRawText) return streamDerivedTextCache;
   const assistantText = stripTodoProgressLines(streamRawText, { streaming: true });
-  const parsed = splitThinkingFormatText(assistantText, { streaming: true });
-  return parsed?.hasThinkingFormat ? stripTodoProgressLines(parsed.finalText, { streaming: true }) : assistantText;
+  const thinkingFormat = splitThinkingFormatText(assistantText, { streaming: true });
+  const finalText = thinkingFormat?.hasThinkingFormat ? stripTodoProgressLines(thinkingFormat.finalText, { streaming: true }) : assistantText;
+  streamDerivedTextCache = { rawText: streamRawText, assistantText, thinkingFormat, finalText };
+  return streamDerivedTextCache;
+}
+
+function streamRenderableAssistantText() {
+  return streamDerivedText().finalText;
 }
 
 function scheduleStreamBubbleHide() {
@@ -16804,8 +17708,8 @@ function scheduleStreamBubbleHide() {
   }, delayMs);
 }
 
-function syncStreamingThinkingFormat(assistantText) {
-  const parsed = splitThinkingFormatText(assistantText, { streaming: true });
+function syncStreamingThinkingFormat() {
+  const parsed = streamDerivedText().thinkingFormat;
   if (!parsed?.hasThinkingFormat) return null;
   const thinking = visibleThinkingText(parsed.thinkingText);
   if (thinking) setStreamingThinkingText(thinking);
@@ -16814,9 +17718,8 @@ function syncStreamingThinkingFormat(assistantText) {
 }
 
 function renderStreamingAssistantText() {
-  const assistantText = stripTodoProgressLines(streamRawText, { streaming: true });
-  const thinkingFormat = syncStreamingThinkingFormat(assistantText);
-  const finalText = thinkingFormat?.hasThinkingFormat ? stripTodoProgressLines(thinkingFormat.finalText, { streaming: true }) : assistantText;
+  const thinkingFormat = syncStreamingThinkingFormat();
+  const finalText = thinkingFormat?.hasThinkingFormat ? streamDerivedText().finalText : streamRenderableAssistantText();
   if (finalText) {
     ensureStreamBubble();
     renderStreamingMarkdown(streamText, finalText);
@@ -16825,19 +17728,72 @@ function renderStreamingAssistantText() {
   }
 }
 
-function scheduleStreamingAssistantTextRender() {
-  if (streamTextRenderTimer) return;
-  streamTextRenderTimer = setTimeout(() => {
+function scheduleStreamingAssistantTextRender({ immediate = false } = {}) {
+  if (streamTextRenderTimer || streamTextRenderFrame !== null) return;
+  const flush = () => {
     streamTextRenderTimer = null;
+    streamTextRenderFrame = null;
     renderStreamingAssistantText();
-  }, STREAM_OUTPUT_TOOLCALL_GUARD_MS);
+    scheduleChatFollowScroll();
+  };
+  if (immediate && typeof requestAnimationFrame === "function") streamTextRenderFrame = requestAnimationFrame(flush);
+  else streamTextRenderTimer = setTimeout(flush, immediate ? 0 : STREAM_OUTPUT_TOOLCALL_GUARD_MS);
 }
 
 function suppressStreamingAssistantTextBeforeToolCall() {
-  streamRawText = "";
+  setStreamRawText("");
   removeStreamBubble();
 }
 
+function resetStreamingToolCallState({ remove = true } = {}) {
+  if (remove) streamToolCallBubble?.remove();
+  streamToolCallBubble = null;
+  streamToolCallText = null;
+  streamToolCallRawArguments = "";
+  streamToolCallName = "";
+  streamToolCallId = "";
+  streamToolCallContentIndex = null;
+  streamToolCallComplete = false;
+}
+
+function streamingToolCallTitle() {
+  const name = streamToolCallName || "tool";
+  return `tool call: ${name}${streamToolCallComplete ? " (ready)" : " (building)"}`;
+}
+
+function streamingToolCallMessage() {
+  return {
+    role: "toolCall",
+    title: streamingToolCallTitle(),
+    timestamp: Date.now(),
+    toolName: streamToolCallName || "tool",
+    toolCallId: streamToolCallId,
+    rawArguments: streamToolCallRawArguments,
+    content: streamToolCallRawArguments,
+  };
+}
+
+function renderStreamingToolCallCard({ scroll = false } = {}) {
+  const message = streamingToolCallMessage();
+  const displayText = streamToolCallRawArguments || (streamToolCallComplete ? "{}" : "(waiting for argument stream…)");
+  if (!streamToolCallBubble?.parentElement || !streamToolCallText) {
+    const created = appendMessage(message, { streaming: true });
+    streamToolCallBubble = created.bubble;
+    streamToolCallText = created.body.querySelector(".tool-call-arguments") || created.body.querySelector(".code-block");
+  }
+  streamToolCallBubble._copyMessage = message;
+  const role = streamToolCallBubble.querySelector(":scope > .message-header .message-role");
+  if (role && role.textContent !== message.title) role.textContent = message.title;
+  if (streamToolCallText && streamToolCallText.textContent !== displayText) streamToolCallText.textContent = displayText;
+  renderRunIndicator({ scroll: false });
+  if (scroll) scrollChatToBottom();
+}
+
+function removeStreamingToolCallCard() {
+  resetStreamingToolCallState({ remove: true });
+  renderRunIndicator({ scroll: false });
+}
+
 function ensureStreamBubble() {
   cancelStreamBubbleHide();
   if (streamBubble?.parentElement === elements.chat) return;
@@ -16872,16 +17828,19 @@ function resetStreamBubble() {
   streamBubble = null;
   streamText = null;
   streamRawText = "";
+  streamThinkingRawText = "";
+  resetStreamDerivedTextCache();
   streamMarkdownState = null;
   streamBubbleVisibleSince = 0;
   streamToolCallSeen = false;
+  resetStreamingToolCallState({ remove: true });
   streamThinkingBubble = null;
   streamThinking = null;
   streamMessageActive = false;
 }
 
 function liveStreamRenderActive() {
-  return streamMessageActive && currentState?.isStreaming === true && Boolean(streamBubble || streamThinkingBubble || streamRawText);
+  return streamMessageActive && currentState?.isStreaming === true && Boolean(streamBubble || streamThinkingBubble || streamToolCallBubble || streamRawText || streamToolCallRawArguments);
 }
 
 /**
@@ -16892,15 +17851,19 @@ function liveStreamRenderActive() {
 function restoreStreamRenderAfterChatRebuild() {
   const thinkingText = streamThinking?.textContent || "";
   const thinkingComplete = streamThinkingBubble?.classList.contains("complete") === true;
+  const toolCallWasVisible = !!(streamToolCallBubble?.parentElement === elements.chat || streamToolCallRawArguments || streamToolCallName);
   streamBubble = null;
   streamText = null;
   streamThinkingBubble = null;
   streamThinking = null;
+  streamToolCallBubble = null;
+  streamToolCallText = null;
   streamBubbleVisibleSince = 0;
   if (thinkingText && setStreamingThinkingText(thinkingText) && thinkingComplete) {
     streamThinkingBubble?.classList.add("complete");
   }
-  if (stripTodoProgressLines(streamRawText, { streaming: true })) renderStreamingAssistantText();
+  if (toolCallWasVisible) renderStreamingToolCallCard();
+  if (streamRenderableAssistantText()) renderStreamingAssistantText();
 }
 
 function thinkingDeltaText(update) {
@@ -16913,6 +17876,56 @@ function assistantStreamingMessage(event) {
   return partial?.role === "assistant" ? partial : null;
 }
 
+function assistantToolCallPartFromUpdate(event, update = event?.assistantMessageEvent || {}) {
+  if (isAssistantToolCallPart(update.toolCall)) return update.toolCall;
+  const message = assistantStreamingMessage(event);
+  const content = message?.content;
+  if (!Array.isArray(content)) return null;
+  const contentIndex = Number(update.contentIndex);
+  if (Number.isInteger(contentIndex) && isAssistantToolCallPart(content[contentIndex])) return content[contentIndex];
+  for (let index = content.length - 1; index >= 0; index -= 1) {
+    if (isAssistantToolCallPart(content[index])) return content[index];
+  }
+  return null;
+}
+
+function streamToolCallNameFromUpdate(update, part) {
+  const rawName = update.name || update.toolName || update.toolCall?.name || assistantToolCallName(part);
+  const name = runIndicatorToolName(rawName);
+  return name === "unknown" ? "tool" : name;
+}
+
+function streamingToolCallContentIndexFromUpdate(update) {
+  const contentIndex = Number(update.contentIndex);
+  return Number.isInteger(contentIndex) ? contentIndex : null;
+}
+
+function updateStreamingToolCallFromEvent(event, { reset = false, appendDelta = false, complete = false, scroll = false } = {}) {
+  const update = event.assistantMessageEvent || {};
+  const part = assistantToolCallPartFromUpdate(event, update);
+  const contentIndex = streamingToolCallContentIndexFromUpdate(update);
+  if (reset || (contentIndex !== null && streamToolCallContentIndex !== null && contentIndex !== streamToolCallContentIndex)) {
+    resetStreamingToolCallState({ remove: true });
+  }
+  streamToolCallContentIndex = contentIndex ?? streamToolCallContentIndex;
+  streamToolCallName = streamToolCallNameFromUpdate(update, part) || streamToolCallName || "tool";
+  streamToolCallId = assistantToolCallId(update.toolCall || part) || streamToolCallId;
+  streamToolCallComplete = !!complete;
+
+  const partArgumentText = toolCallArgumentsText(assistantToolCallArguments(update.toolCall || part), { includeEmptyObject: false });
+  if (reset) streamToolCallRawArguments = partArgumentText || "";
+  if (appendDelta && update.delta !== undefined && update.delta !== null) streamToolCallRawArguments += typeof update.delta === "string" ? update.delta : String(update.delta);
+  if (!streamToolCallRawArguments && partArgumentText) streamToolCallRawArguments = partArgumentText;
+  if (complete) {
+    const finalArgumentText = toolCallArgumentsText(assistantToolCallArguments(update.toolCall || part), { includeEmptyObject: true });
+    if (finalArgumentText && (finalArgumentText !== "{}" || !streamToolCallRawArguments)) streamToolCallRawArguments = finalArgumentText;
+    if (!streamToolCallRawArguments) streamToolCallRawArguments = "{}";
+  }
+
+  renderStreamingToolCallCard({ scroll });
+  return streamToolCallName || "tool";
+}
+
 function assistantTextFromMessage(message, { streaming = false } = {}) {
   void streaming;
   const content = message?.content;
@@ -16957,57 +17970,98 @@ function setStreamingThinkingText(text) {
   return true;
 }
 
-function syncStreamingThinkingFromMessage(event, { placeholder = "" } = {}) {
+function streamingThinkingTextFallback(event) {
+  return assistantThinkingTextFromMessage(assistantStreamingMessage(event), { streaming: true });
+}
+
+function setStreamThinkingRawText(text) {
+  const thinking = visibleThinkingText(text);
+  if (thinking === streamThinkingRawText) return false;
+  streamThinkingRawText = thinking;
+  return true;
+}
+
+function appendStreamThinkingText(delta) {
+  const thinking = visibleThinkingText(delta);
+  if (!thinking) return false;
+  streamThinkingRawText += thinking;
+  return true;
+}
+
+function syncStreamingThinkingFromUpdate(event, update, { placeholder = "" } = {}) {
   if (!thinkingOutputVisible) return true;
-  const text = assistantThinkingTextFromMessage(assistantStreamingMessage(event), { streaming: true });
-  if (text === null) return false;
-  return setStreamingThinkingText(text || placeholder);
+  const delta = thinkingDeltaText(update);
+  if (update.type === "thinking_delta" && delta) {
+    appendStreamThinkingText(delta);
+    return setStreamingThinkingText(streamThinkingRawText || placeholder);
+  }
+  if (update.type === "thinking_start") {
+    if (delta) setStreamThinkingRawText(delta);
+    return streamThinkingRawText ? setStreamingThinkingText(streamThinkingRawText || placeholder) : false;
+  }
+  if (update.type === "thinking_end") {
+    if (delta) setStreamThinkingRawText(delta);
+    else {
+      const fallback = streamingThinkingTextFallback(event);
+      if (fallback !== null) setStreamThinkingRawText(fallback);
+    }
+    return setStreamingThinkingText(streamThinkingRawText || placeholder);
+  }
+  const fallback = streamingThinkingTextFallback(event);
+  if (fallback === null) return false;
+  setStreamThinkingRawText(fallback);
+  return setStreamingThinkingText(streamThinkingRawText || placeholder);
 }
 
 function handleMessageUpdate(event) {
   const update = event.assistantMessageEvent || {};
   if (update.type === "thinking_start") {
     setRunIndicatorActivity("Thinking…", { scroll: false });
-    syncStreamingThinkingFromMessage(event);
-    scrollChatToBottom();
+    syncStreamingThinkingFromUpdate(event, update);
+    scheduleChatFollowScroll();
   } else if (update.type === "thinking_delta") {
     const delta = thinkingDeltaText(update);
     setRunIndicatorActivity("Thinking…", { scroll: false });
-    const synced = syncStreamingThinkingFromMessage(event);
+    const synced = syncStreamingThinkingFromUpdate(event, update);
     if (thinkingOutputVisible && delta && (!synced || !streamThinking?.textContent)) {
       showStreamingThinking("");
       if (streamThinking?.textContent === "Thinking…") streamThinking.textContent = "";
       if (streamThinking) streamThinking.textContent += delta;
     }
-    scrollChatToBottom();
+    scheduleChatFollowScroll();
   } else if (update.type === "thinking_end") {
-    const finalThinking = assistantThinkingTextFromMessage(assistantStreamingMessage(event), { streaming: true }) || thinkingDeltaText(update);
-    if (finalThinking) setStreamingThinkingText(finalThinking);
-    streamThinkingBubble?.classList.add("complete");
+    if (syncStreamingThinkingFromUpdate(event, update)) streamThinkingBubble?.classList.add("complete");
     setRunIndicatorActivity("Finished thinking; waiting for the next output or action…", { scroll: false });
   } else if (update.type === "text_delta" || update.type === "text_end") {
-    const delta = update.type === "text_delta" ? update.delta || "" : "";
-    const partialText = assistantTextFromMessage(assistantStreamingMessage(event), { streaming: true });
-    if (typeof partialText === "string") streamRawText = partialText;
-    else if (update.type === "text_end" && typeof update.content === "string") streamRawText = update.content;
-    else streamRawText += delta;
+    syncStreamRawTextFromUpdate(event, update);
+    scheduleLiveTodoProgressWidgetSync(streamRawText, event.tabId || activeTabId);
     setRunIndicatorActivity("Writing response…", { scroll: false });
-    if (streamToolCallSeen || streamBubble) renderStreamingAssistantText();
-    else scheduleStreamingAssistantTextRender();
+    scheduleStreamingAssistantTextRender({ immediate: !!(streamToolCallSeen || streamBubble) });
     // Streaming output must stay transcript-local. Full footer/status
     // reconciliation happens on message/state refreshes, not per token.
-    scrollChatToBottom();
+    scheduleChatFollowScroll();
   } else if (update.type === "toolcall_start") {
     streamToolCallSeen = true;
     suppressStreamingAssistantTextBeforeToolCall();
-    const name = runIndicatorToolName(update.name || update.toolName || update.toolCall?.name);
-    setRunIndicatorActivity(`Preparing tool call: ${name}…`);
+    const name = updateStreamingToolCallFromEvent(event, { reset: true, scroll: true });
+    setRunIndicatorActivity(`Building tool call: ${name}…`, { scroll: false });
     addEvent(`tool call started in assistant message`, "info");
+  } else if (update.type === "toolcall_delta") {
+    streamToolCallSeen = true;
+    suppressStreamingAssistantTextBeforeToolCall();
+    const name = updateStreamingToolCallFromEvent(event, { appendDelta: true });
+    setRunIndicatorActivity(`Building tool call: ${name}…`, { scroll: false });
+    scheduleChatFollowScroll();
+  } else if (update.type === "toolcall_end") {
+    streamToolCallSeen = true;
+    suppressStreamingAssistantTextBeforeToolCall();
+    const name = updateStreamingToolCallFromEvent(event, { complete: true, scroll: true });
+    setRunIndicatorActivity(`Tool call ready: ${name}; waiting to run…`, { scroll: false });
   } else if (update.type === "error") {
     setRunIndicatorActivity("Assistant stream reported an error…");
     appendMessage({ role: "error", title: "assistant error", timestamp: Date.now(), content: update.reason || update.errorMessage || "assistant error", level: "error" }, { streaming: true });
     renderRunIndicator({ scroll: false });
-    scrollChatToBottom();
+    scheduleChatFollowScroll();
   }
 }
 
@@ -17304,6 +18358,7 @@ async function refreshModels(tabContext = activeTabContext()) {
   if (!isCurrentTabContext(tabContext)) return;
   availableModels = models;
   footerScopedModels = scopedModels;
+  footerScopedModels = orderedFooterScopedModels();
   footerScopedModelPatterns = scopedModelPatterns;
   footerScopedModelSource = scopedModelSource;
   if (scopedModelError) addEvent(`failed to load scoped models: ${scopedModelError.message}`, "warn");
@@ -18605,18 +19660,17 @@ function handleExtensionUiRequest(request) {
     }
     case "setWidget": {
       const widgetKey = request.widgetKey || request.id;
+      const requestTabId = request.tabId || activeTabId;
       if (widgetKey === "pi-remote-webui") {
-        widgets.delete(widgetKey);
+        setWidgetForTab(requestTabId, widgetKey, { ...request, widgetLines: undefined });
         if (Array.isArray(request.widgetLines)) {
           mirrorRemoteWebuiWidgetToTranscript(widgetKey, request.widgetLines, request);
           showRemoteWebuiQrPopup(widgetKey, request.widgetLines, request);
         } else {
           closeRemoteWebuiQrPopup();
         }
-      } else if (Array.isArray(request.widgetLines)) {
-        widgets.set(widgetKey, request);
       } else {
-        widgets.delete(widgetKey);
+        if (!setWidgetForTab(requestTabId, widgetKey, request)) return;
       }
       updateOptionalFeatureAvailability();
       renderWidgets();
@@ -18753,9 +19807,9 @@ function handleInactiveTabEvent(event) {
 }
 
 function handleEvent(event) {
-  ingestEventTabActivity(event);
-  trackAutoRetryStateFromEvent(event);
-  trackSkillsFromEvent(event);
+  if (eventHasTabActivityPayload(event)) ingestEventTabActivity(event);
+  if (event?.type === "auto_retry_start" || event?.type === "auto_retry_end") trackAutoRetryStateFromEvent(event);
+  if (eventMayAffectSkillUsage(event)) trackSkillsFromEvent(event);
   if (!eventTargetsActiveTab(event)) {
     handleInactiveTabEvent(event);
     return;
@@ -18793,7 +19847,7 @@ function handleEvent(event) {
       addTransientMessage({ role: "native", title: "/reload", content: `${event.tabTitle || "terminal"} reloaded. Keybindings, extensions, skills, prompts, and themes were refreshed by restarting the RPC tab${event.sessionFile ? ` and resuming ${event.sessionFile}` : ""}.`, level: "info" });
       clearContextUsageUnknownAfterCompaction(event.tabId || activeTabId);
       statusEntries.clear();
-      widgets.clear();
+      clearWidgetsForTab(event.tabId || activeTabId);
       latestBtwWidgetPayload = null;
       btwWidgetDismissedId = "";
       btwWidgetComposerOpen = false;
@@ -18924,6 +19978,7 @@ function handleEvent(event) {
     case "tool_execution_start":
       streamToolCallSeen = true;
       suppressStreamingAssistantTextBeforeToolCall();
+      removeStreamingToolCallCard();
       handleToolExecutionStart(event);
       setRunIndicatorActivity(`Running tool: ${runIndicatorToolName(event.toolName)}…`);
       addEvent(`tool ${event.toolName} started`);