@firstpick/pi-package-webui 0.5.5 → 0.5.6

package/bin/pi-webui.mjs

@@ -4706,6 +4706,11 @@ function extensionStatusMap(tab) {
   return tab.extensionStatuses;
 }
 
+function extensionWidgetMap(tab) {
+  if (!tab.extensionWidgets) tab.extensionWidgets = new Map();
+  return tab.extensionWidgets;
+}
+
 function rememberExtensionStatusEvent(tab, event) {
   if (event?.type !== "extension_ui_request" || event.method !== "setStatus" || !event.statusKey) return;
   const statuses = extensionStatusMap(tab);
@@ -4713,10 +4718,23 @@ function rememberExtensionStatusEvent(tab, event) {
   else statuses.delete(String(event.statusKey));
 }
 
+function rememberExtensionWidgetEvent(tab, event) {
+  if (event?.type !== "extension_ui_request" || event.method !== "setWidget") return;
+  const widgetKey = event.widgetKey || event.id;
+  if (!widgetKey) return;
+  const widgets = extensionWidgetMap(tab);
+  if (Array.isArray(event.widgetLines)) widgets.set(String(widgetKey), { ...event, widgetKey: String(widgetKey), widgetLines: event.widgetLines.map((line) => String(line)) });
+  else widgets.delete(String(widgetKey));
+}
+
 function clearExtensionStatuses(tab) {
   tab?.extensionStatuses?.clear();
 }
 
+function clearExtensionWidgets(tab) {
+  tab?.extensionWidgets?.clear();
+}
+
 function replayExtensionStatuses(tab, res) {
   for (const [statusKey, statusText] of extensionStatusMap(tab)) {
     sendSse(res, {
@@ -4734,6 +4752,24 @@ function replayExtensionStatuses(tab, res) {
   }
 }
 
+function replayExtensionWidgets(tab, res) {
+  const pendingExtensionUiRequestCount = pendingExtensionUiRequests(tab).length;
+  for (const [widgetKey, request] of extensionWidgetMap(tab)) {
+    sendSse(res, {
+      ...request,
+      type: "extension_ui_request",
+      id: randomUUID(),
+      method: "setWidget",
+      widgetKey,
+      tabId: tab.id,
+      tabTitle: tab.title,
+      replayed: true,
+      tabActivity: tabActivitySnapshot(tab),
+      pendingExtensionUiRequestCount,
+    });
+  }
+}
+
 function bashQueueForTab(tab) {
   if (!tab.bashQueue) tab.bashQueue = [];
   return tab.bashQueue;
@@ -5030,8 +5066,10 @@ function attachRpcToTab(tab, rpc) {
     if (event?.type === "pi_process_exit" || event?.type === "pi_process_error") {
       clearPendingExtensionUiRequests(tab);
       clearExtensionStatuses(tab);
+      clearExtensionWidgets(tab);
     } else {
       rememberExtensionStatusEvent(tab, scopedEvent);
+      rememberExtensionWidgetEvent(tab, scopedEvent);
       trackPendingExtensionUiRequest(tab, scopedEvent);
     }
     scopedEvent = { ...scopedEvent, tabActivity: tabActivitySnapshot(tab), pendingExtensionUiRequestCount: pendingExtensionUiRequests(tab).length };
@@ -5068,6 +5106,7 @@ async function createTab({ id: requestedId, index, title, titleSource, conversat
     activity: createTabActivity(createdAt),
     pendingExtensionUiRequests: new Map(),
     extensionStatuses: new Map(),
+    extensionWidgets: new Map(),
     webuiHelperRequests: new Map(),
     webuiHelperResponseIds: new Set(),
     bashQueue: [],
@@ -5657,6 +5696,7 @@ async function updateTabCwd(id, cwd) {
   resetTabActivity(tab);
   clearPendingExtensionUiRequests(tab);
   clearExtensionStatuses(tab);
+  clearExtensionWidgets(tab);
   const rpc = new PiRpcProcess({ ...piCommand, cwd: tab.cwd });
   attachRpcToTab(tab, rpc);
   rpc.start();
@@ -5694,6 +5734,7 @@ async function restartTabRpc(tab, reason = "reload") {
   resetTabActivity(tab);
   clearPendingExtensionUiRequests(tab);
   clearExtensionStatuses(tab);
+  clearExtensionWidgets(tab);
   const rpc = new PiRpcProcess({ ...piCommand, cwd: tab.cwd });
   attachRpcToTab(tab, rpc);
   rpc.start();
@@ -7382,6 +7423,7 @@ const server = createServer(async (req, res) => {
         activeRun: publicAppRunnerState(tab.appRunner),
       });
       replayExtensionStatuses(tab, res);
+      replayExtensionWidgets(tab, res);
       replayPendingExtensionUiRequests(tab, res);
       const keepAlive = setInterval(() => res.write(": keepalive\n\n"), 15000);
       req.on("close", () => {
@@ -7942,6 +7984,7 @@ const server = createServer(async (req, res) => {
           rememberTabState(tab, response.data);
           clearPendingExtensionUiRequests(tab);
           clearExtensionStatuses(tab);
+          clearExtensionWidgets(tab);
         }
         sendJson(res, response.success === false ? 400 : 200, responseWithTab(response, tab));
         return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "Pi Web UI companion package with a local browser UI CLI plus /webui-start and /webui-status commands.",
   "license": "MIT",
   "homepage": "https://github.com/Firstp1ck/npm-packages/tree/main/pi-package-webui#readme",
@@ -64,7 +64,7 @@
     "@firstpick/pi-extension-safety-guard": "^0.2.3",
     "@firstpick/pi-extension-setup-skills": "^0.1.8",
     "@firstpick/pi-extension-stats": "^0.2.6",
-    "@firstpick/pi-extension-todo-progress": "^0.2.4",
+    "@firstpick/pi-extension-todo-progress": "^0.2.5",
     "@firstpick/pi-extension-tools": "^0.1.6",
     "@firstpick/pi-extension-workflows": "^0.1.0",
     "@firstpick/pi-package-remote-webui": "^0.1.2",

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;
@@ -543,6 +562,8 @@ 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();
@@ -1883,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;
@@ -1890,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") {
@@ -2179,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;
 }
@@ -2516,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();
   }
@@ -4544,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;
 }
 
@@ -4554,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;
 }
 
@@ -4570,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;
 }
 
@@ -4610,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;
 }
 
@@ -4630,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) {
@@ -4752,11 +4799,42 @@ function restoreWidgetsForActiveTab() {
   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;
+  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);
@@ -4768,11 +4846,21 @@ function setWidgetForTab(tabId, widgetKey, request) {
     if (hasLines) widgets.set(widgetKey, request);
     else widgets.delete(widgetKey);
   }
+
+  return true;
 }
 
 function clearWidgetsForTab(tabId = activeTabId) {
-  if (tabId) widgetsByTab.delete(tabId);
+  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() {
@@ -5115,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();
@@ -9040,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;
@@ -9076,7 +9188,7 @@ function todoProgressStatusLabel(status) {
   return "[ ]";
 }
 
-function liveTodoProgressWidgetLinesFromText(text) {
+function liveTodoProgressWidgetLinesFromText(text, tabId = activeTabId) {
   if (!isOptionalFeatureEnabled("todoProgressWidget")) return null;
   const raw = String(text || "");
   if (!raw.trim()) return null;
@@ -9090,7 +9202,7 @@ function liveTodoProgressWidgetLinesFromText(text) {
     current = [];
   };
 
-  for (const line of raw.split(/\r?\n/)) {
+  for (const line of textLines(raw)) {
     if (/^\s*```/.test(line)) {
       inFence = !inFence;
       flush();
@@ -9114,22 +9226,61 @@ function liveTodoProgressWidgetLinesFromText(text) {
   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 (goal) lines.push(`Goal: ${goal}`);
+  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);
+  const lines = liveTodoProgressWidgetLinesFromText(text, tabId);
   if (!lines) return false;
-  setWidgetForTab(tabId, "todo-progress", { method: "setWidget", widgetKey: "todo-progress", widgetLines: lines, tabId, live: true });
-  updateOptionalFeatureAvailability();
-  if (tabId === activeTabId) renderWidgets();
-  return true;
+  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) {
@@ -13768,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 = [];
   }
@@ -14218,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;
@@ -15252,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 {
@@ -15449,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;
@@ -15459,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();
 }
 
@@ -15887,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);
 }
@@ -15900,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() {
@@ -17444,6 +17632,8 @@ function cancelStreamBubbleHide() {
 function cancelStreamingAssistantTextRender() {
   clearTimeout(streamTextRenderTimer);
   streamTextRenderTimer = null;
+  if (streamTextRenderFrame !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(streamTextRenderFrame);
+  streamTextRenderFrame = null;
 }
 
 function removeStreamBubble() {
@@ -17456,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() {
@@ -17474,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);
@@ -17484,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);
@@ -17495,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;
@@ -17542,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);
 }
 
 /**
@@ -17562,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) {
@@ -17583,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;
@@ -17627,58 +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;
-    syncLiveTodoProgressWidgetFromText(streamRawText, event.tabId || activeTabId);
+    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();
   }
 }
 
@@ -19287,7 +19670,7 @@ function handleExtensionUiRequest(request) {
           closeRemoteWebuiQrPopup();
         }
       } else {
-        setWidgetForTab(requestTabId, widgetKey, request);
+        if (!setWidgetForTab(requestTabId, widgetKey, request)) return;
       }
       updateOptionalFeatureAvailability();
       renderWidgets();
@@ -19424,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;
@@ -19595,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`);

package/tests/mobile-static.test.mjs

@@ -31,7 +31,7 @@ const companionDependencies = {
   "@firstpick/pi-extension-safety-guard": "^0.2.3",
   "@firstpick/pi-extension-setup-skills": "^0.1.8",
   "@firstpick/pi-extension-stats": "^0.2.6",
-  "@firstpick/pi-extension-todo-progress": "^0.2.4",
+  "@firstpick/pi-extension-todo-progress": "^0.2.5",
   "@firstpick/pi-extension-tools": "^0.1.6",
   "@firstpick/pi-prompts-git-pr": "^0.1.2",
   "@firstpick/pi-themes-bundle": "^0.1.4",
@@ -555,6 +555,9 @@ assert.match(app, /function parseTodoProgressWidget\(lines\)/, "todo-progress wi
 assert.ok(app.includes("const goalLine = cleanLines.find((line) => /^Goal\\s*[:：]/i.test(line));"), "todo-progress parser should preserve an optional Goal line from extension widget lines");
 assert.ok(app.includes("if (todo.goal) summary.append(make(\"div\", \"todo-widget-goal\", `Goal: ${todo.goal}`));"), "todo-progress widget should display the goal above the progress header");
 assert.match(app, /const todoProgressWidgetExpandedByTab = new Map\(\)/, "todo-progress expansion state should survive widget re-renders per tab");
+assert.match(app, /const todoProgressSignatureByTab = new Map\(\)/, "todo-progress should track per-tab signatures to avoid unchanged re-renders");
+assert.match(app, /function widgetRequestEquivalent\(a, b\)[\s\S]*?return a\.widgetLines\.every/, "todo-progress and generic widgets should no-op identical widget payloads");
+assert.match(app, /todoProgressSignatureByTab\.get\(tabId\) === signature\) return false/, "live todo-progress sync should skip unchanged checklist signatures");
 assert.match(app, /const node = make\("details", "widget todo-widget"\)/, "todo-progress widget should render collapsed by default as expandable details");
 assert.match(app, /Optional feature detection intentionally checks loaded Pi capabilities/, "optional Web UI features should be detected through loaded capabilities, not package folders");
 assert.match(app, /function resetOptionalFeatureAvailability\(\)/, "optional feature state should reset across active-tab and reload boundaries");
@@ -788,28 +791,32 @@ assert.match(app, /if \(isThinkingPart\) \{[\s\S]*?visibleThinkingText\(assistan
 assert.match(app, /message\.role === "thinking"[\s\S]*?visibleThinkingText\(message\.thinking \|\| textFromContent\(message\.content\)\)[\s\S]*?if \(thinkingOutputVisible && thinkingText\) appendText\(body, thinkingText, "thinking-text"\);/, "thinking cards should suppress empty and provider no-thinking placeholder output");
 assert.match(app, /function showStreamingThinking\(initialText = ""\)[\s\S]*?if \(initialText && !streamThinking\.textContent\) streamThinking\.textContent = initialText;/, "live thinking should not create a visible placeholder card before content arrives");
 assert.match(app, /function setStreamingThinkingText\(text\)[\s\S]*?const thinking = visibleThinkingText\(text\);[\s\S]*?if \(!thinkingOutputVisible \|\| !thinking\) return false;[\s\S]*?return true;/, "live thinking text setters should ignore empty text instead of clearing or flashing the card");
-assert.match(app, /function syncStreamingThinkingFromMessage\(event[\s\S]*?return setStreamingThinkingText\(text \|\| placeholder\);/, "partial-message thinking sync should only report success after setting visible thinking text");
+assert.match(app, /function syncStreamingThinkingFromUpdate\(event, update, \{ placeholder = "" \} = \{\}\)[\s\S]*?return setStreamingThinkingText\(streamThinkingRawText \|\| placeholder\);/, "incremental thinking sync should only report success after setting visible thinking text");
 assert.doesNotMatch(app, /text \|\| placeholder \|\| streamThinkingBubble/, "partial-message thinking sync should not clear an existing thinking card when a partial carries no visible thinking text");
 assert.match(app, /if \(thinkingOutputVisible && delta && \(!synced \|\| !streamThinking\?\.textContent\)\) \{/, "live thinking delta fallback should require visible delta text before creating a card");
 assert.match(app, /function thinkingDeltaText\(update\) \{[\s\S]*?return visibleThinkingText\(update\.delta \|\| update\.thinking \|\| update\.content \|\| ""\);/, "live thinking deltas should suppress provider no-thinking placeholders too");
 assert.match(app, /const THINKING_VISIBILITY_STORAGE_KEY = "pi-webui-thinking-visible"/, "thinking visibility should persist in browser storage");
 assert.match(app, /function setThinkingOutputVisible\(visible[\s\S]*renderAllMessages\(\{ preserveScroll: true \}\)/, "thinking visibility changes should immediately re-render the transcript");
 assert.match(app, /function assistantStreamingMessage\(event\)/, "live streaming should read the authoritative partial assistant message from RPC events like the TUI");
-assert.match(app, /assistantThinkingTextFromMessage\(assistantStreamingMessage\(event\), \{ streaming: true \}\) \|\| thinkingDeltaText\(update\)/, "live thinking end should replace deltas with the final partial-message thinking content");
-assert.match(app, /if \(typeof partialText === "string"\) streamRawText = partialText;/, "live assistant text should synchronize from partial messages instead of relying only on deltas");
+assert.match(app, /function syncStreamingThinkingFromUpdate\(event, update[\s\S]*?const fallback = streamingThinkingTextFallback\(event\);[\s\S]*?setStreamThinkingRawText\(fallback\);[\s\S]*?return setStreamingThinkingText\(streamThinkingRawText \|\| placeholder\);/, "live thinking end should replace deltas with the final partial-message thinking content");
+assert.match(app, /function setStreamRawText\(text\)[\s\S]*?streamRawText = nextText;[\s\S]*?resetStreamDerivedTextCache\(\);/, "live assistant text should synchronize from partial messages through a cache-aware setter");
 assert.match(app, /const TODO_PROGRESS_LINE_REGEX = /, "frontend should recognize live todo progress lines that will be moved into the todo widget");
 assert.match(app, /function stripTodoProgressLines\(text, \{ streaming = false \} = \{\}\)/, "live Assistant output should strip todo-progress lines before rendering final-output text");
 assert.match(app, /function syncLiveTodoProgressWidgetFromText\(text, tabId = activeTabId\)/, "live Assistant checklist text should update the todo-progress widget before tool execution events");
-assert.match(app, /syncLiveTodoProgressWidgetFromText\(streamRawText, event\.tabId \|\| activeTabId\)/, "streaming assistant text should feed the live todo-progress widget immediately");
-assert.match(app, /function renderStreamingAssistantText\(\)[\s\S]*?const assistantText = stripTodoProgressLines\(streamRawText, \{ streaming: true \}\)/, "streamed Assistant text should classify from accumulated output without flashing partial todo-progress lines");
-assert.match(app, /function syncStreamingThinkingFormat\(assistantText\)[\s\S]*?splitThinkingFormatText\(assistantText, \{ streaming: true \}\)[\s\S]*?setStreamingThinkingText\(thinking\)/, "tagged <think> streaming output should update the live thinking card instead of flashing raw tags");
-assert.match(app, /const finalText = thinkingFormat\?\.hasThinkingFormat \? stripTodoProgressLines\(thinkingFormat\.finalText, \{ streaming: true \}\) : assistantText;/, "tagged <think> streaming output should render only final response text in the Assistant card");
+assert.match(app, /scheduleLiveTodoProgressWidgetSync\(streamRawText, event\.tabId \|\| activeTabId\)/, "streaming assistant text should feed the live todo-progress widget through the coalesced sync scheduler");
+assert.match(app, /function renderStreamingAssistantText\(\)[\s\S]*?const thinkingFormat = syncStreamingThinkingFormat\(\);[\s\S]*?const finalText = thinkingFormat\?\.hasThinkingFormat \? streamDerivedText\(\)\.finalText : streamRenderableAssistantText\(\);/, "streamed Assistant text should render cached derived output without directly rescanning raw stream text");
+assert.match(app, /function syncStreamingThinkingFormat\(\)[\s\S]*?const parsed = streamDerivedText\(\)\.thinkingFormat;[\s\S]*?setStreamingThinkingText\(thinking\)/, "tagged <think> streaming output should update the live thinking card from cached parse state instead of flashing raw tags");
+assert.match(app, /const finalText = thinkingFormat\?\.hasThinkingFormat \? streamDerivedText\(\)\.finalText : streamRenderableAssistantText\(\);/, "tagged <think> streaming output should render only final response text in the Assistant card");
 assert.match(app, /const STREAM_OUTPUT_HIDE_DELAY_MS = 300/, "stream output hiding should be debounced to prevent rapid flicker");
 assert.match(app, /const STREAM_OUTPUT_TOOLCALL_GUARD_MS = 220/, "live assistant text should be briefly guarded so pre-tool-call text can be suppressed");
 assert.match(app, /function scheduleStreamBubbleHide\([\s\S]*?STREAM_OUTPUT_MIN_VISIBLE_MS/, "stream output cards should observe a minimum visible duration before hiding");
 assert.match(app, /if \(finalText\) \{[\s\S]*?renderStreamingMarkdown\(streamText, finalText\);[\s\S]*?\} else \{\n\s+scheduleStreamBubbleHide\(\);/, "empty filtered stream output should schedule hide while visible stream output renders as Markdown");
-assert.match(app, /if \(streamToolCallSeen \|\| streamBubble\) renderStreamingAssistantText\(\);\n\s+else scheduleStreamingAssistantTextRender\(\);/, "live assistant text should wait briefly before showing unless it is already visible or follows a tool call");
+assert.match(app, /scheduleStreamingAssistantTextRender\(\{ immediate: !!\(streamToolCallSeen \|\| streamBubble\) \}\);/, "live assistant text should wait briefly before showing unless it is already visible or follows a tool call");
 assert.match(app, /streamToolCallSeen = true;\n\s+suppressStreamingAssistantTextBeforeToolCall\(\);/, "tool-call starts should remove pending assistant text from the live transcript");
+assert.match(app, /function renderStreamingToolCallCard\(\{ scroll = false \} = \{\}\)[\s\S]*?appendMessage\(message, \{ streaming: true \}\)[\s\S]*?streamToolCallText\.textContent !== displayText/, "live tool-call cards should render and update the arguments stream in place");
+assert.match(app, /update\.type === "toolcall_delta"[\s\S]*?updateStreamingToolCallFromEvent\(event, \{ appendDelta: true \}\)[\s\S]*?Building tool call:/, "tool-call deltas should update visible streamed arguments instead of a static placeholder");
+assert.match(app, /case "tool_execution_start":[\s\S]*?removeStreamingToolCallCard\(\)[\s\S]*?handleToolExecutionStart\(event\)/, "the streamed tool-call argument card should be removed when the real tool execution card starts");
+assert.doesNotMatch(app, /Preparing tool call:/, "tool-call streaming should no longer show only the static preparing placeholder");
 assert.match(app, /const created = appendMessage\(\{ role: "assistant", title: "final output"/, "live Assistant cards should be created only for final output text without a noisy Assistant label");
 assert.match(app, /function renderMarkdownInto\(parent, text\)/, "assistant output should have a browser-native Markdown renderer");
 assert.match(app, /safeMarkdownLinkHref\(url\)/, "Markdown links should be sanitized before rendering");
@@ -1129,13 +1136,16 @@ assert.match(server, /const EXTENSION_UI_BLOCKING_METHODS = new Set\(\["select",
 assert.match(server, /function trackPendingExtensionUiRequest\(tab, event\)/, "server should track blocking extension UI requests per tab");
 assert.match(server, /pendingExtensionUiRequests: new Map\(\)/, "new tabs should initialize pending extension UI request storage");
 assert.match(server, /extensionStatuses: new Map\(\)/, "new tabs should initialize replayable extension status storage");
+assert.match(server, /extensionWidgets: new Map\(\)/, "new tabs should initialize replayable extension widget storage");
 assert.match(server, /function rememberExtensionStatusEvent\(tab, event\)[\s\S]*event\.method !== "setStatus"[\s\S]*statuses\.set\(String\(event\.statusKey\), String\(event\.statusText\)\)/, "server should retain extension status events for reconnects");
-assert.match(server, /rememberExtensionStatusEvent\(tab, scopedEvent\)[\s\S]*trackPendingExtensionUiRequest\(tab, scopedEvent\)/, "RPC events should retain extension statuses before broadcasting");
+assert.match(server, /function rememberExtensionWidgetEvent\(tab, event\)[\s\S]*event\.method !== "setWidget"[\s\S]*widgets\.set\(String\(widgetKey\)/, "server should retain extension widget events for reconnects");
+assert.match(server, /rememberExtensionStatusEvent\(tab, scopedEvent\)[\s\S]*rememberExtensionWidgetEvent\(tab, scopedEvent\)[\s\S]*trackPendingExtensionUiRequest\(tab, scopedEvent\)/, "RPC events should retain extension statuses and widgets before broadcasting");
 assert.match(server, /trackPendingExtensionUiRequest\(tab, scopedEvent\)/, "RPC events should populate pending extension UI storage before broadcasting");
 assert.match(server, /scopedEvent = \{ \.\.\.scopedEvent,[\s\S]*?pendingExtensionUiRequestCount: pendingExtensionUiRequests\(tab\)\.length \}/, "RPC events should broadcast pending blocker counts for tab indicators");
 assert.match(server, /function replayExtensionStatuses\(tab, res\)[\s\S]*method: "setStatus"/, "server should replay latest extension statuses on SSE reconnect");
+assert.match(server, /function replayExtensionWidgets\(tab, res\)[\s\S]*method: "setWidget"/, "server should replay latest extension widgets on SSE reconnect");
 assert.match(server, /function replayPendingExtensionUiRequests\(tab, res\)/, "server should be able to replay missed extension UI requests on SSE reconnect");
-assert.match(server, /replayExtensionStatuses\(tab, res\);\n\s+replayPendingExtensionUiRequests\(tab, res\)/, "SSE connections should replay extension statuses before pending blockers");
+assert.match(server, /replayExtensionStatuses\(tab, res\);\n\s+replayExtensionWidgets\(tab, res\);\n\s+replayPendingExtensionUiRequests\(tab, res\)/, "SSE connections should replay extension statuses and widgets before pending blockers");
 assert.match(server, /pendingExtensionUiRequests: pendingExtensionUiRequestSummaries\(tab\)/, "detailed Web UI status should expose pending extension UI blockers");
 assert.match(server, /resolvePendingExtensionUiRequest\(tab, payload\.id\)/, "extension UI responses should clear the pending blocker cache");
 assert.match(server, /type: "webui_extension_ui_resolved"[\s\S]*?pendingExtensionUiRequestCount/, "extension UI responses should notify clients that a blocker resolved");
@@ -1338,7 +1348,7 @@ assert.match(app, /pruneDisconnectedLiveToolCards\(\);/, "reconciliation must pr
 // --- Performance: incremental streaming markdown (P0-3) ---
 assert.match(app, /function streamingMarkdownStableBoundary\(text\)[\s\S]*?for \(let index = 0; index < lines\.length - 1; index \+= 1\)/, "streaming markdown boundary must never treat the final partial line as stable");
 assert.match(app, /function renderStreamingMarkdown\(block, text\)[\s\S]*?if \(!text\.startsWith\(state\.stableText\)\)/, "streaming markdown must fall back to a full re-render when earlier content changes");
-assert.match(app, /streamRawText = "";\n  streamMarkdownState = null;/, "resetting the stream bubble must clear incremental markdown state");
+assert.match(app, /streamRawText = "";\n  streamThinkingRawText = "";\n  resetStreamDerivedTextCache\(\);\n  streamMarkdownState = null;/, "resetting the stream bubble must clear incremental markdown state and derived caches");
 
 // --- Performance: delta transcript fetch (P1-1) ---
 assert.match(app, /function mergeMessagesDelta\(previous, data\)[\s\S]*?messagesLookEqual\(previous\[since\], data\.messages\[0\]\)/, "delta merges must verify the one-message overlap before applying");

package/tests/streaming-ui-coupling.test.mjs

@@ -0,0 +1,175 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const root = join(dirname(fileURLToPath(import.meta.url)), "..");
+const [app, doc] = await Promise.all([
+  readFile(join(root, "public", "app.js"), "utf8"),
+  readFile(join(root, "docs", "streaming-ui-coupling.md"), "utf8"),
+]);
+
+function findFunctionBody(source, name) {
+  const signature = new RegExp(`function\\s+${name}\\s*\\(`, "m");
+  const match = signature.exec(source);
+  assert.ok(match, `${name} should be defined`);
+  let parenDepth = 0;
+  let openBrace = -1;
+  for (let index = match.index + match[0].length - 1; index < source.length; index += 1) {
+    const char = source[index];
+    if (char === "(") parenDepth += 1;
+    else if (char === ")") parenDepth -= 1;
+    else if (char === "{" && parenDepth === 0) {
+      openBrace = index;
+      break;
+    }
+  }
+  assert.notEqual(openBrace, -1, `${name} body should open`);
+  let depth = 0;
+  for (let index = openBrace; index < source.length; index += 1) {
+    const char = source[index];
+    if (char === "{") depth += 1;
+    else if (char === "}") {
+      depth -= 1;
+      if (depth === 0) return source.slice(openBrace + 1, index);
+    }
+  }
+  assert.fail(`${name} body should close`);
+}
+
+function findCaseBody(source, caseLabel) {
+  const caseStart = source.indexOf(`case "${caseLabel}":`);
+  assert.notEqual(caseStart, -1, `case ${caseLabel} should exist`);
+  const nextCase = source.indexOf("\n    case ", caseStart + 1);
+  const defaultCase = source.indexOf("\n    default:", caseStart + 1);
+  const candidates = [nextCase, defaultCase].filter((index) => index !== -1);
+  const end = candidates.length ? Math.min(...candidates) : source.length;
+  return source.slice(caseStart, end);
+}
+
+function assertDocTheory(id, titleFragment) {
+  assert.match(doc, new RegExp(`^## ${id}\\. .*${titleFragment}`, "m"), `documentation should include theory ${id}: ${titleFragment}`);
+}
+
+const futureFailures = [];
+function futureInvariant(name, assertion) {
+  try {
+    assertion();
+  } catch (error) {
+    futureFailures.push(`${name}\n  ${error.message}`);
+  }
+}
+
+// Keep the test suite explicitly tied to the audit theories it enforces.
+assertDocTheory(0, "Live todo-progress widget rebuild");
+assertDocTheory(1, "scrollChatToBottom");
+assertDocTheory(2, "O\\(n²\\) re-parse");
+assertDocTheory(3, "markdown re-render fallback");
+assertDocTheory(4, "setRunIndicatorActivity");
+assertDocTheory(5, "ingestEventTabActivity");
+assertDocTheory(6, "markTabOutputSeen");
+assertDocTheory(7, "Skill / auto-retry tracking");
+assertDocTheory(8, "steer prompt");
+
+const syncLiveTodoProgressWidgetFromText = findFunctionBody(app, "syncLiveTodoProgressWidgetFromText");
+const scheduleLiveWidgetRender = findFunctionBody(app, "scheduleLiveWidgetRender");
+const handleMessageUpdate = findFunctionBody(app, "handleMessageUpdate");
+const scrollChatToBottom = findFunctionBody(app, "scrollChatToBottom");
+const stripTodoProgressLines = findFunctionBody(app, "stripTodoProgressLines");
+const liveTodoProgressWidgetLinesFromText = findFunctionBody(app, "liveTodoProgressWidgetLinesFromText");
+const syncStreamingThinkingFormat = findFunctionBody(app, "syncStreamingThinkingFormat");
+const renderStreamingAssistantText = findFunctionBody(app, "renderStreamingAssistantText");
+const renderStreamingMarkdown = findFunctionBody(app, "renderStreamingMarkdown");
+const setRunIndicatorActivity = findFunctionBody(app, "setRunIndicatorActivity");
+const ingestEventTabActivity = findFunctionBody(app, "ingestEventTabActivity");
+const handleEvent = findFunctionBody(app, "handleEvent");
+const markTabOutputSeen = findFunctionBody(app, "markTabOutputSeen");
+const trackSkillsFromEvent = findFunctionBody(app, "trackSkillsFromEvent");
+const trackAutoRetryStateFromEvent = findFunctionBody(app, "trackAutoRetryStateFromEvent");
+const requestGitFooterWebuiPayload = findFunctionBody(app, "requestGitFooterWebuiPayload");
+
+// Fixed theory #0 should stay fixed while the remaining tests fail until their
+// corresponding stream/UI coupling issues are removed.
+assert.doesNotMatch(
+  syncLiveTodoProgressWidgetFromText,
+  /(^|\n)\s*updateOptionalFeatureAvailability\s*\(/,
+  "fixed theory #0: live todo-progress sync must not reconcile optional-feature chrome per token",
+);
+assert.match(syncLiveTodoProgressWidgetFromText, /scheduleLiveWidgetRender\s*\(/, "fixed theory #0: live todo-progress widget rendering should remain scheduler-based");
+assert.match(scheduleLiveWidgetRender, /requestAnimationFrame\s*\(/, "fixed theory #0: live widget rebuilds should remain coalesced to animation frames");
+assert.match(scheduleLiveWidgetRender, /liveWidgetRenderFrame !== null/, "fixed theory #0: repeated tokens in one frame should not queue duplicate widget rebuilds");
+
+futureInvariant("theory #1: message_update streaming hot path must not call immediate scroll/layout work", () => {
+  assert.doesNotMatch(handleMessageUpdate, /scrollChatToBottom\s*\(/, "handleMessageUpdate should schedule/coalesce follow-scroll instead of calling scrollChatToBottom() directly");
+});
+futureInvariant("theory #1: scrollChatToBottom must not synchronously read scrollHeight and write scrollTop", () => {
+  assert.doesNotMatch(scrollChatToBottom, /setChatScrollTopInstant\(elements\.chat\.scrollHeight\)/, "scrollChatToBottom should route layout-sensitive scroll work through a frame-coalesced flusher");
+});
+futureInvariant("theory #1: disabled auto-follow must not refresh jump/sticky layout from the token path", () => {
+  assert.doesNotMatch(scrollChatToBottom, /!autoFollowChat[\s\S]*?updateJumpToLatestButton\(\)[\s\S]*?updateStickyUserPromptButton\(\)/, "jump/sticky button layout reads should be debounced or frame-coalesced, not run per token");
+});
+
+futureInvariant("theory #2: text deltas must not re-read the full accumulated assistant message", () => {
+  assert.doesNotMatch(handleMessageUpdate, /assistantTextFromMessage\(assistantStreamingMessage\(event\), \{ streaming: true \}\)/, "text_delta should process only the new delta tail or a cached parse state");
+});
+futureInvariant("theory #2: thinking deltas must not re-read the full accumulated assistant message", () => {
+  assert.doesNotMatch(handleMessageUpdate, /assistantThinkingTextFromMessage\(assistantStreamingMessage\(event\), \{ streaming: true \}\)/, "thinking_delta should process only the new delta tail or a cached parse state");
+});
+futureInvariant("theory #2: streaming todo stripping must not split the full accumulated stream each render", () => {
+  assert.doesNotMatch(stripTodoProgressLines, /raw\.split\(\/\\r\?\\n\//, "stripTodoProgressLines should be incremental/cached for streaming input");
+});
+futureInvariant("theory #2: live todo widget extraction must not split the full accumulated stream each token", () => {
+  assert.doesNotMatch(liveTodoProgressWidgetLinesFromText, /raw\.split\(\/\\r\?\\n\//, "liveTodoProgressWidgetLinesFromText should process the new tail or cached block state");
+});
+futureInvariant("theory #2: thinking-format parsing must not reparse the full accumulated assistant text", () => {
+  assert.doesNotMatch(syncStreamingThinkingFormat, /splitThinkingFormatText\(assistantText, \{ streaming: true \}\)/, "syncStreamingThinkingFormat should use incremental/cached parsing while streaming");
+});
+futureInvariant("theory #2: streaming assistant render must not derive all views from streamRawText on every render", () => {
+  assert.doesNotMatch(renderStreamingAssistantText, /stripTodoProgressLines\(streamRawText, \{ streaming: true \}\)/, "renderStreamingAssistantText should consume cached/incremental visible-text state instead of rescanning streamRawText");
+});
+
+futureInvariant("theory #3: streaming markdown must not full-rebuild when earlier derived text changes", () => {
+  assert.doesNotMatch(renderStreamingMarkdown, /!text\.startsWith\(state\.stableText\)[\s\S]*?block\.replaceChildren\(\)/, "retroactive todo/thinking rewrites should be confined to an unstable tail, not block.replaceChildren()");
+});
+
+futureInvariant("theory #4: run-indicator activity changes must not render/scroll synchronously from token paths", () => {
+  assert.doesNotMatch(setRunIndicatorActivity, /if \(needsRender\) renderRunIndicator\(\{ scroll \}\)/, "setRunIndicatorActivity should schedule/coalesce indicator rendering instead of rendering immediately");
+});
+futureInvariant("theory #4: run-indicator token updates must not touch composer chrome unconditionally", () => {
+  assert.doesNotMatch(setRunIndicatorActivity, /updateComposerModeButtons\(\)/, "composer mode button reconciliation should be gated/coalesced outside steady-state token updates");
+});
+
+futureInvariant("theory #5: tab activity ingestion must not rebuild tabs synchronously per event", () => {
+  assert.doesNotMatch(ingestEventTabActivity, /if \(changed\) renderTabs\(\)/, "tab chrome should be updated via a frame-coalesced affected-tab render, not renderTabs() directly");
+});
+futureInvariant("theory #5: handleEvent must not run tab chrome ingestion for every raw server event", () => {
+  assert.doesNotMatch(handleEvent, /^\s*ingestEventTabActivity\(event\);/m, "tab activity ingestion should be filtered/coalesced before global event dispatch touches chrome");
+});
+
+futureInvariant("theory #6: output-seen tab refresh should remain out of the message_update token path", () => {
+  assert.doesNotMatch(handleMessageUpdate, /markTabOutputSeen\s*\(/, "markTabOutputSeen should stay event-end driven, not token driven");
+});
+futureInvariant("theory #6: event-end output-seen refresh should not synchronously rebuild all tabs", () => {
+  assert.doesNotMatch(markTabOutputSeen, /renderTabs\(\)/, "output-seen serial changes should schedule/coalesce tab chrome updates");
+});
+assert.match(findCaseBody(handleEvent, "agent_end"), /markTabOutputSeen\(\)/, "theory #6: output-seen marking should still happen when a run ends");
+assert.match(findCaseBody(handleEvent, "compaction_end"), /markTabOutputSeen\(\)/, "theory #6: output-seen marking should still happen when compaction ends");
+
+futureInvariant("theory #7: skill tracking must not inspect every message_update event", () => {
+  assert.doesNotMatch(trackSkillsFromEvent, /event\.type === "message_update"/, "skill tracking should be event-filtered so plain text/thinking deltas do not enter tracking code");
+});
+futureInvariant("theory #7: auto-retry and skill tracking must not run before every event dispatch", () => {
+  assert.doesNotMatch(handleEvent, /^\s*trackAutoRetryStateFromEvent\(event\);\n\s*trackSkillsFromEvent\(event\);/m, "tracking hooks should be case-specific or pre-filtered, not invoked for every server event");
+});
+assert.match(trackAutoRetryStateFromEvent, /event\.type === "auto_retry_start"/, "theory #7: auto-retry bookkeeping should remain scoped to retry events");
+
+// Theory #8 is a correctness guard: the current design still uses a steer prompt,
+// but it must never run while the agent is active.
+assert.match(requestGitFooterWebuiPayload, /currentState\?\.isStreaming \|\| currentState\?\.isCompacting/, "theory #8: git-footer steer refresh must remain guarded during active streaming/compaction");
+assert.match(findCaseBody(handleEvent, "agent_end"), /currentState\) currentState = \{ \.\.\.currentState, isStreaming: false \};[\s\S]*?requestGitFooterWebuiPayload\(tabContext, \{ force: true \}\)/, "theory #8: forced git-footer refresh should only happen after agent_end clears streaming state");
+
+if (futureFailures.length) {
+  assert.fail(`streaming/UI coupling invariants still failing (${futureFailures.length}):\n\n${futureFailures.map((failure, index) => `${index + 1}. ${failure}`).join("\n\n")}`);
+}
+
+console.log("streaming-ui-coupling.test.mjs passed");