@firstpick/pi-package-webui 0.1.7 → 0.1.8

package/README.md

@@ -2,6 +2,8 @@
 
 Local browser companion for [Pi coding agent](https://www.npmjs.com/package/@earendil-works/pi-coding-agent).
 
+![Pi Web UI main window showing multi-tab chat, controls, theme picker, and local status](https://unpkg.com/@firstpick/pi-package-webui/images/Main_Window_v0.1.7.png)
+
 This package provides:
 
 - `pi-webui`: a local HTTP/SSE server that starts `pi --mode rpc`, serves the static browser UI, and proxies browser actions to Pi RPC commands.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Pi Web UI companion package with a local browser UI CLI plus /webui-start and /webui-status commands.",
   "license": "MIT",
   "type": "module",
@@ -14,6 +14,7 @@
     "extension"
   ],
   "pi": {
+    "image": "https://unpkg.com/@firstpick/pi-package-webui/images/Main_Window_v0.1.7.png",
     "extensions": [
       "./index.ts",
       "../pi-extension-git-footer-status/index.ts",
@@ -63,6 +64,7 @@
     "index.ts",
     "bin",
     "public",
+    "images",
     "tests",
     "README.md",
     "LICENSE"

package/public/app.js

@@ -319,16 +319,56 @@ const OPTIONAL_COMMAND_FEATURES = new Map([
 const HIDDEN_COMMAND_NAMES = new Set(["webui-tree-navigate"]);
 const NATIVE_SELECTOR_COMMANDS = new Set(["model", "settings", "theme", "fork", "clone", "resume", "tree", "login", "logout", "scoped-models"]);
 const optionalFeatureInstallInProgress = new Set();
-const gitWorkflow = {
-  active: false,
-  step: "idle",
-  busy: false,
-  runId: 0,
-  output: "",
-  error: "",
-  message: null,
-  messageRequestedAt: 0,
-};
+
+function createGitWorkflowState() {
+  return {
+    active: false,
+    step: "idle",
+    busy: false,
+    runId: 0,
+    output: "",
+    error: "",
+    message: null,
+    messageRequestedAt: 0,
+  };
+}
+
+const gitWorkflowsByTab = new Map();
+let gitWorkflow = createGitWorkflowState();
+
+function gitWorkflowForTab(tabId = activeTabId, { create = true } = {}) {
+  if (!tabId) return null;
+  let workflow = gitWorkflowsByTab.get(tabId);
+  if (!workflow && create) {
+    workflow = createGitWorkflowState();
+    gitWorkflowsByTab.set(tabId, workflow);
+  }
+  return workflow || null;
+}
+
+function bindGitWorkflowToActiveTab() {
+  gitWorkflow = gitWorkflowForTab(activeTabId) || createGitWorkflowState();
+  return gitWorkflow;
+}
+
+function resetGitWorkflowForTab(tabId = activeTabId) {
+  if (!tabId) return;
+  gitWorkflowsByTab.set(tabId, createGitWorkflowState());
+  if (tabId === activeTabId) {
+    bindGitWorkflowToActiveTab();
+    renderGitWorkflow();
+  }
+}
+
+function clearGitWorkflowForTab(tabId) {
+  if (!tabId) return;
+  gitWorkflowsByTab.delete(tabId);
+  if (tabId === activeTabId) {
+    bindGitWorkflowToActiveTab();
+    renderGitWorkflow();
+  }
+}
+
 const GIT_WORKFLOW_STEPS = ["Stage", "Message", "Commit", "Push"];
 const ACTION_FEEDBACK_REACTIONS = {
   up: { icon: "👍", label: "Good job", title: "Good job!" },
@@ -1838,6 +1878,7 @@ function setActiveTabId(tabId, { remember = false } = {}) {
   const nextTabId = tabId || null;
   if (nextTabId !== activeTabId) activeTabGeneration += 1;
   activeTabId = nextTabId;
+  bindGitWorkflowToActiveTab();
   if (remember) rememberActiveTab();
   return activeTabContext(nextTabId);
 }
@@ -1914,6 +1955,7 @@ function syncTabMetadata(nextTabs = []) {
       tabActivities.delete(tabId);
       tabSeenCompletionSerials.delete(tabId);
       actionFeedbackByTab.delete(tabId);
+      clearGitWorkflowForTab(tabId);
     }
   }
 }
@@ -2094,6 +2136,15 @@ function restoreStoredTabId() {
   }
 }
 
+function requestedTabIdFromUrl() {
+  try {
+    const params = new URLSearchParams(window.location.search);
+    return params.get("tab") || params.get("tabId") || null;
+  } catch {
+    return null;
+  }
+}
+
 function updateDocumentTitle() {
   const tab = activeTab();
   document.title = tab ? `Pi Web UI · ${tab.title}` : "Pi Web UI";
@@ -2179,15 +2230,7 @@ function resetActiveTabUi() {
   cancelPendingDialogs();
   if (elements.nativeCommandDialog.open) closeNativeCommandDialog();
   if (pathPickerState) closePathPicker(null);
-  Object.assign(gitWorkflow, {
-    active: false,
-    step: "idle",
-    busy: false,
-    output: "",
-    error: "",
-    message: null,
-    messageRequestedAt: 0,
-  });
+  bindGitWorkflowToActiveTab();
   resetChatOutput();
   elements.stateDetails.replaceChildren();
   elements.eventLog.replaceChildren();
@@ -2438,9 +2481,10 @@ async function refreshTabs({ selectStored = false } = {}) {
   syncTabMetadata(tabs);
   syncBlockedTabNotificationsFromTabs(tabs, previousTabs);
   syncAgentDoneNotificationsFromTabs(tabs, previousTabs);
+  const requested = selectStored ? requestedTabIdFromUrl() : null;
   const stored = selectStored ? restoreStoredTabId() : null;
   if (!activeTabId || !tabs.some((tab) => tab.id === activeTabId)) {
-    setActiveTabId((stored && tabs.some((tab) => tab.id === stored) ? stored : tabs[0]?.id) || null, { remember: true });
+    setActiveTabId((requested && tabs.some((tab) => tab.id === requested) ? requested : stored && tabs.some((tab) => tab.id === stored) ? stored : tabs[0]?.id) || null, { remember: true });
   }
   rememberServerStartCwd(tabs.find((tab) => tab.id === activeTabId)?.cwd || tabs[0]?.cwd);
   renderTabs();
@@ -2532,6 +2576,7 @@ async function closeTerminalTabs(tabIds, { label = "selected terminal tabs" } =
     for (const id of closedIds) {
       tabDrafts.delete(id);
       clearAttachments(id);
+      clearGitWorkflowForTab(id);
     }
     clearOpenTerminalTabGroup(null, { force: true });
 
@@ -3436,6 +3481,7 @@ async function changeActiveTabCwd() {
       return;
     }
     const nextContext = setActiveTabId(response.data?.tab?.id || activeTabId);
+    resetGitWorkflowForTab(nextContext.tabId);
     resetActiveTabUi();
     renderTabs();
     restoreActiveDraft();
@@ -3964,18 +4010,27 @@ function renderWidgets() {
   }
 }
 
-function setGitWorkflow(patch) {
-  Object.assign(gitWorkflow, patch);
-  renderGitWorkflow();
+function setGitWorkflow(patch, { tabId = activeTabId } = {}) {
+  const workflow = gitWorkflowForTab(tabId);
+  if (!workflow) return null;
+  Object.assign(workflow, patch);
+  if (tabId === activeTabId) {
+    gitWorkflow = workflow;
+    renderGitWorkflow();
+  }
+  return workflow;
 }
 
-function isCurrentGitWorkflowRun(runId) {
-  return gitWorkflow.active && gitWorkflow.runId === runId;
+function isCurrentGitWorkflowRun(runId, tabId = activeTabId) {
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  return !!workflow?.active && workflow.runId === runId;
 }
 
-function appendGitWorkflowOutput(text) {
-  const next = `${gitWorkflow.output || ""}${gitWorkflow.output ? "\n" : ""}${text}`;
-  setGitWorkflow({ output: next.slice(-60000) });
+function appendGitWorkflowOutput(text, { tabId = activeTabId } = {}) {
+  const workflow = gitWorkflowForTab(tabId);
+  if (!workflow) return;
+  const next = `${workflow.output || ""}${workflow.output ? "\n" : ""}${text}`;
+  setGitWorkflow({ output: next.slice(-60000) }, { tabId });
 }
 
 function formatGitCommandResult(result) {
@@ -4078,9 +4133,11 @@ function renderGitWorkflow() {
   }
 }
 
-async function gitWorkflowRequest(path, { method = "POST", body = {}, runId = gitWorkflow.runId } = {}) {
-  const response = await api(path, method === "GET" ? { method } : { method, body });
-  if (!isCurrentGitWorkflowRun(runId)) return null;
+async function gitWorkflowRequest(path, { method = "POST", body = {}, runId, tabId = activeTabId } = {}) {
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  const expectedRunId = runId ?? workflow?.runId;
+  const response = await api(path, method === "GET" ? { method, tabId } : { method, body, tabId });
+  if (expectedRunId !== undefined && !isCurrentGitWorkflowRun(expectedRunId, tabId)) return null;
   if (!response.ok) {
     const detail = response.data ? `\n\n${formatGitCommandResult(response.data)}` : "";
     throw new Error(`${response.error || "Git workflow request failed"}${detail}`);
@@ -4088,27 +4145,32 @@ async function gitWorkflowRequest(path, { method = "POST", body = {}, runId = gi
   return response.data;
 }
 
-function failGitWorkflow(error, step = gitWorkflow.step) {
+function failGitWorkflow(error, step, { tabId = activeTabId } = {}) {
+  const workflow = gitWorkflowForTab(tabId);
+  if (!workflow) return;
   const message = error?.message || String(error);
   setGitWorkflow({
-    step,
+    step: step || workflow.step || "error",
     busy: false,
     error: message,
-    output: `${gitWorkflow.output || ""}${gitWorkflow.output ? "\n\n" : ""}ERROR: ${message}`.slice(-60000),
-  });
+    output: `${workflow.output || ""}${workflow.output ? "\n\n" : ""}ERROR: ${message}`.slice(-60000),
+  }, { tabId });
 }
 
 function startGitWorkflow() {
+  const tabId = activeTabId;
+  if (!tabId) return;
   if (!isOptionalFeatureEnabled("gitWorkflow")) {
-    const tabContext = activeTabContext();
+    const tabContext = activeTabContext(tabId);
     addEvent(commandUnavailableMessage("git-staged-msg"), "warn");
     refreshCommands(tabContext).catch((error) => {
       if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
     });
     return;
   }
-  if (gitWorkflow.active && !["done", "cancelled", "error"].includes(gitWorkflow.step) && !confirm("Restart the active git workflow?")) return;
-  gitWorkflow.runId += 1;
+  const workflow = gitWorkflowForTab(tabId);
+  if (workflow.active && !["done", "cancelled", "error"].includes(workflow.step) && !confirm("Restart the active git workflow?")) return;
+  workflow.runId += 1;
   setGitWorkflow({
     active: true,
     step: "add",
@@ -4117,40 +4179,52 @@ function startGitWorkflow() {
     error: "",
     message: null,
     messageRequestedAt: 0,
-  });
+  }, { tabId });
 }
 
 async function cancelGitWorkflow() {
-  const shouldAbortPi = gitWorkflow.step === "generating";
-  gitWorkflow.runId += 1;
-  setGitWorkflow({ step: "cancelled", busy: false, error: "", output: `${gitWorkflow.output || ""}${gitWorkflow.output ? "\n\n" : ""}Cancelled by user.` });
-  if (shouldAbortPi) setRunIndicatorActivity("Abort requested; checking whether Pi stopped…");
+  const tabId = activeTabId;
+  const tabContext = activeTabContext(tabId);
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow?.active) return;
+  const shouldAbortPi = workflow.step === "generating";
+  workflow.runId += 1;
+  setGitWorkflow({ step: "cancelled", busy: false, error: "", output: `${workflow.output || ""}${workflow.output ? "\n\n" : ""}Cancelled by user.` }, { tabId });
+  if (shouldAbortPi && isCurrentTabContext(tabContext)) setRunIndicatorActivity("Abort requested; checking whether Pi stopped…");
   await Promise.allSettled([
-    api("/api/git-workflow/cancel", { method: "POST", body: {} }),
-    shouldAbortPi ? api("/api/abort", { method: "POST", body: {} }) : Promise.resolve(),
+    api("/api/git-workflow/cancel", { method: "POST", body: {}, tabId }),
+    shouldAbortPi ? api("/api/abort", { method: "POST", body: {}, tabId }) : Promise.resolve(),
   ]);
-  if (shouldAbortPi) scheduleAbortStateChecks();
+  if (shouldAbortPi && isCurrentTabContext(tabContext)) scheduleAbortStateChecks();
 }
 
 async function runGitAdd() {
-  const runId = gitWorkflow.runId;
-  setGitWorkflow({ step: "add", busy: true, error: "", output: "Running git add ." });
+  const tabId = activeTabId;
+  const tabContext = activeTabContext(tabId);
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const runId = workflow.runId;
+  setGitWorkflow({ step: "add", busy: true, error: "", output: "Running git add ." }, { tabId });
   try {
-    const result = await gitWorkflowRequest("/api/git-workflow/add", { runId });
+    const result = await gitWorkflowRequest("/api/git-workflow/add", { runId, tabId });
     if (!result) return;
-    setGitWorkflow({ step: "generate", busy: false, output: `${formatGitCommandResult(result)}\n\nStaged. Next: run /git-staged-msg.` });
-    scheduleRefreshFooter();
+    setGitWorkflow({ step: "generate", busy: false, output: `${formatGitCommandResult(result)}\n\nStaged. Next: run /git-staged-msg.` }, { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
   } catch (error) {
-    if (isCurrentGitWorkflowRun(runId)) failGitWorkflow(error, "add");
+    if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "add", { tabId });
   }
 }
 
 async function runGitMessagePrompt() {
+  const tabId = activeTabId;
+  const tabContext = activeTabContext(tabId);
   if (currentState?.isStreaming) {
-    failGitWorkflow(new Error("Pi is currently running. Wait for it to finish or abort before generating a staged commit message."), "generate");
+    failGitWorkflow(new Error("Pi is currently running. Wait for it to finish or abort before generating a staged commit message."), "generate", { tabId });
     return;
   }
-  const runId = gitWorkflow.runId;
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const runId = workflow.runId;
   const requestedAt = Date.now();
   setGitWorkflow({
     step: "generating",
@@ -4158,32 +4232,37 @@ async function runGitMessagePrompt() {
     error: "",
     messageRequestedAt: requestedAt,
     output: "Sending /git-staged-msg to Pi.\n\nCancel will request Pi abort.",
-  });
-  setRunIndicatorActivity("Sending /git-staged-msg to Pi…");
+  }, { tabId });
+  if (isCurrentTabContext(tabContext)) setRunIndicatorActivity("Sending /git-staged-msg to Pi…");
   try {
-    await api("/api/prompt", { method: "POST", body: { message: "/git-staged-msg" } });
-    if (!isCurrentGitWorkflowRun(runId)) return;
-    appendGitWorkflowOutput("/git-staged-msg accepted. Waiting for agent_end, then the message files will be loaded.");
-    scheduleRefreshState();
+    await api("/api/prompt", { method: "POST", body: { message: "/git-staged-msg" }, tabId });
+    if (!isCurrentGitWorkflowRun(runId, tabId)) return;
+    appendGitWorkflowOutput("/git-staged-msg accepted. Waiting for agent_end, then the message files will be loaded.", { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshState(120, tabContext);
     setTimeout(() => {
-      if (isCurrentGitWorkflowRun(runId) && gitWorkflow.step === "generating" && !currentState?.isStreaming) {
-        loadGitWorkflowMessage({ requireFresh: true, retries: 1, runId });
+      const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+      if (isCurrentTabContext(tabContext) && isCurrentGitWorkflowRun(runId, tabId) && currentWorkflow?.step === "generating" && !currentState?.isStreaming) {
+        loadGitWorkflowMessage({ requireFresh: true, retries: 1, runId, tabId });
       }
     }, 2500);
   } catch (error) {
-    if (isCurrentGitWorkflowRun(runId)) {
-      clearRunIndicatorActivity();
-      failGitWorkflow(error, "generate");
+    if (isCurrentGitWorkflowRun(runId, tabId)) {
+      if (isCurrentTabContext(tabContext)) clearRunIndicatorActivity();
+      failGitWorkflow(error, "generate", { tabId });
     }
   }
 }
 
-async function loadGitWorkflowMessage({ requireFresh = false, retries = 0, runId = gitWorkflow.runId } = {}) {
+async function loadGitWorkflowMessage({ requireFresh = false, retries = 0, runId, tabId = activeTabId } = {}) {
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  const expectedRunId = runId ?? workflow?.runId;
   try {
-    const message = await gitWorkflowRequest("/api/git-workflow/message", { method: "GET", runId });
+    const message = await gitWorkflowRequest("/api/git-workflow/message", { method: "GET", runId: expectedRunId, tabId });
     if (!message) return;
+    const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+    if (!currentWorkflow) return;
     const newestMtime = Math.max(message.shortMtimeMs || 0, message.longMtimeMs || 0);
-    if (requireFresh && gitWorkflow.messageRequestedAt && newestMtime + 10000 < gitWorkflow.messageRequestedAt) {
+    if (requireFresh && currentWorkflow.messageRequestedAt && newestMtime + 10000 < currentWorkflow.messageRequestedAt) {
       throw new Error("Generated message files have not refreshed yet.");
     }
     setGitWorkflow({
@@ -4192,40 +4271,63 @@ async function loadGitWorkflowMessage({ requireFresh = false, retries = 0, runId
       error: "",
       message,
       output: formatCommitMessagePreview(message),
-    });
+    }, { tabId });
   } catch (error) {
-    if (!isCurrentGitWorkflowRun(runId)) return;
+    if (!isCurrentGitWorkflowRun(expectedRunId, tabId)) return;
     if (retries > 0) {
-      setTimeout(() => loadGitWorkflowMessage({ requireFresh, retries: retries - 1, runId }), 1400);
+      setTimeout(() => loadGitWorkflowMessage({ requireFresh, retries: retries - 1, runId: expectedRunId, tabId }), 1400);
       return;
     }
-    failGitWorkflow(error, gitWorkflow.step === "generating" ? "generate" : gitWorkflow.step);
+    const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+    failGitWorkflow(error, currentWorkflow?.step === "generating" ? "generate" : currentWorkflow?.step, { tabId });
   }
 }
 
 async function commitGitWorkflow(variant) {
-  const runId = gitWorkflow.runId;
-  setGitWorkflow({ step: "committing", busy: true, error: "", output: `${formatCommitMessagePreview(gitWorkflow.message)}\n\nRunning native ${variant} commit…` });
+  const tabId = activeTabId;
+  const tabContext = activeTabContext(tabId);
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const runId = workflow.runId;
+  setGitWorkflow({ step: "committing", busy: true, error: "", output: `${formatCommitMessagePreview(workflow.message)}\n\nRunning native ${variant} commit…` }, { tabId });
   try {
-    const result = await gitWorkflowRequest("/api/git-workflow/commit", { body: { variant }, runId });
+    const result = await gitWorkflowRequest("/api/git-workflow/commit", { body: { variant }, runId, tabId });
     if (!result) return;
-    setGitWorkflow({ step: "push", busy: false, output: `${formatGitCommandResult(result)}\n\nCommit created. Next: git push.` });
-    scheduleRefreshFooter();
+    setGitWorkflow({ step: "push", busy: false, output: `${formatGitCommandResult(result)}\n\nCommit created. Next: git push.` }, { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
   } catch (error) {
-    if (isCurrentGitWorkflowRun(runId)) failGitWorkflow(error, "message");
+    if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "message", { tabId });
   }
 }
 
 async function pushGitWorkflow() {
-  const runId = gitWorkflow.runId;
-  setGitWorkflow({ step: "pushing", busy: true, error: "", output: "Running git push…" });
+  const tabId = activeTabId;
+  const tabContext = activeTabContext(tabId);
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const runId = workflow.runId;
+  setGitWorkflow({ step: "pushing", busy: true, error: "", output: "Running git push…" }, { tabId });
   try {
-    const result = await gitWorkflowRequest("/api/git-workflow/push", { runId });
+    const result = await gitWorkflowRequest("/api/git-workflow/push", { runId, tabId });
     if (!result) return;
-    setGitWorkflow({ step: "done", busy: false, output: formatGitCommandResult(result) || "git push finished." });
-    scheduleRefreshFooter();
+    setGitWorkflow({ step: "done", busy: false, output: formatGitCommandResult(result) || "git push finished." }, { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
   } catch (error) {
-    if (isCurrentGitWorkflowRun(runId)) failGitWorkflow(error, "push");
+    if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "push", { tabId });
+  }
+}
+
+function resumeGitWorkflowForActiveTab(tabContext = activeTabContext()) {
+  if (!isCurrentTabContext(tabContext)) return;
+  bindGitWorkflowToActiveTab();
+  renderGitWorkflow();
+  if (gitWorkflow.active && gitWorkflow.step === "generating" && !currentState?.isStreaming) {
+    const retryDelayMs = Math.max(0, 2500 - (Date.now() - (gitWorkflow.messageRequestedAt || 0)));
+    if (retryDelayMs > 0) {
+      setTimeout(() => resumeGitWorkflowForActiveTab(tabContext), retryDelayMs);
+      return;
+    }
+    loadGitWorkflowMessage({ requireFresh: true, retries: 3, runId: gitWorkflow.runId, tabId: tabContext.tabId });
   }
 }
 
@@ -5486,8 +5588,39 @@ function restoreToolDetailsOpenState(root, state) {
   }
 }
 
+function captureReusableToolCards() {
+  const cards = new Map();
+  for (const bubble of elements.chat.querySelectorAll(".message.toolExecution[data-tool-call-id]")) {
+    const id = bubble.dataset.toolCallId;
+    if (id) cards.set(id, bubble);
+  }
+  return cards;
+}
+
+function reuseToolExecutionBubble(reusableToolCards, message, { streaming = false, messageIndex = -1, transient = false } = {}) {
+  if (streaming || message?.role !== "toolExecution" || !message.toolCallId || !reusableToolCards) return null;
+  const id = String(message.toolCallId);
+  const bubble = reusableToolCards.get(id);
+  if (!bubble) return null;
+  reusableToolCards.delete(id);
+  const body = bubble.querySelector(":scope > .message-body");
+  if (!body || !updateLiveToolCard(bubble, message)) return null;
+  bubble.classList.remove("action-enter", "streaming", "has-action-feedback");
+  bubble.querySelector(":scope > .action-feedback-controls")?.remove();
+  if (!transient && messageIndex >= 0) {
+    bubble.dataset.messageIndex = String(messageIndex);
+    bubble.removeAttribute("data-user-prompt");
+  } else {
+    bubble.removeAttribute("data-message-index");
+    bubble.removeAttribute("data-user-prompt");
+  }
+  if (!streaming && !transient) renderActionFeedbackControls(bubble, message, messageIndex);
+  elements.chat.append(bubble);
+  return { bubble, body };
+}
+
 function updateLiveToolCard(bubble, message) {
-  if (!bubble?.isConnected) return false;
+  if (!bubble) return false;
   const header = bubble.querySelector(":scope > .message-header");
   const body = bubble.querySelector(":scope > .message-body");
   if (!body) return false;
@@ -5544,6 +5677,7 @@ function renderLiveToolRun(run, { scroll = true } = {}) {
   const existingConnected = !!(existing?.isConnected && existing.parentElement === elements.chat);
   const shouldFollow = scroll && (autoFollowChat || isChatNearBottom());
   const message = liveToolRunMessage(run);
+  rememberActionEntries([{ message, messageIndex: -1, transient: true }]);
   if (existingConnected && updateLiveToolCard(existing, message)) {
     renderRunIndicator({ scroll: false });
     if (shouldFollow) scrollChatToBottom();
@@ -5616,7 +5750,9 @@ function jumpToStickyUserPrompt() {
   requestAnimationFrame(updateStickyUserPromptButton);
 }
 
-function appendMessage(message, { streaming = false, messageIndex = -1, transient = false, animateEntry = false } = {}) {
+function appendMessage(message, { streaming = false, messageIndex = -1, transient = false, animateEntry = false, reusableToolCards = null } = {}) {
+  const reused = reuseToolExecutionBubble(reusableToolCards, message, { streaming, messageIndex, transient });
+  if (reused) return reused;
   const role = String(message.role || "message");
   const safeRole = role.replace(/[^a-z0-9_-]/gi, "");
   const bubble = make("article", `message ${safeRole}${message.level ? ` ${message.level}` : ""}${streaming ? " streaming" : ""}${animateEntry ? " action-enter" : ""}`);
@@ -5674,9 +5810,9 @@ function appendMessage(message, { streaming = false, messageIndex = -1, transien
   return { bubble, body };
 }
 
-function appendTranscriptMessage(message, { streaming = false, messageIndex = -1, transient = false, animateEntry = false } = {}) {
+function appendTranscriptMessage(message, { streaming = false, messageIndex = -1, transient = false, animateEntry = false, reusableToolCards = null } = {}) {
   if (streaming || transient || message?.role !== "assistant") {
-    return appendMessage(message, { streaming, messageIndex, transient, animateEntry });
+    return appendMessage(message, { streaming, messageIndex, transient, animateEntry, reusableToolCards });
   }
 
   let finalOutput = null;
@@ -5705,6 +5841,7 @@ function appendTranscriptMessage(message, { streaming = false, messageIndex = -1
       messageIndex: ["assistant", "toolExecution"].includes(transcriptMessage.role) ? messageIndex : -1,
       transient: false,
       animateEntry: animateEntry && isActionTranscriptMessage(transcriptMessage),
+      reusableToolCards,
     });
     if (transcriptMessage.role === "assistant") finalOutput = created;
   });
@@ -5923,16 +6060,17 @@ function actionEntrySeenKeys(tabId = activeTabId) {
 
 function actionEntryKey(item) {
   const message = item?.message || {};
+  const keyedToolExecution = message.role === "toolExecution" && message.toolCallId;
   return [
-    item?.transient ? "transient" : "message",
-    item?.messageIndex ?? -1,
+    keyedToolExecution ? "toolExecution" : item?.transient ? "transient" : "message",
+    keyedToolExecution ? "" : (item?.messageIndex ?? -1),
     message.role || "message",
     message.toolName || "",
     message.toolCallId || "",
-    message.command || "",
-    message.title || "",
-    message.timestamp || "",
-    textFromContent(message.content).slice(0, 240),
+    keyedToolExecution ? "" : message.command || "",
+    keyedToolExecution ? "" : message.title || "",
+    keyedToolExecution ? "" : message.timestamp || "",
+    keyedToolExecution ? "" : textFromContent(message.content).slice(0, 240),
   ].join("|");
 }
 
@@ -5974,6 +6112,7 @@ function orderedTranscriptItems() {
 function renderAllMessages({ preserveScroll = false } = {}) {
   const shouldFollow = !preserveScroll && (autoFollowChat || isChatNearBottom());
   const previousScrollTop = elements.chat.scrollTop;
+  const reusableToolCards = captureReusableToolCards();
   resetChatOutput();
   const transcriptItems = orderedTranscriptItems();
   for (const item of transcriptItems) {
@@ -5981,6 +6120,7 @@ function renderAllMessages({ preserveScroll = false } = {}) {
       messageIndex: item.messageIndex,
       transient: item.transient,
       animateEntry: shouldAnimateActionEntry(item),
+      reusableToolCards,
     });
   }
   rememberActionEntries(transcriptItems);
@@ -7589,6 +7729,7 @@ async function refreshAll(tabContext = activeTabContext()) {
   for (const result of results) {
     if (result.status === "rejected") addEvent(result.reason.message || String(result.reason), "error");
   }
+  resumeGitWorkflowForActiveTab(tabContext);
 }
 
 async function openToNetwork() {
@@ -8026,8 +8167,12 @@ function handleEvent(event) {
       scheduleRefreshMessages();
       scheduleRefreshFooter();
       renderFeedbackTray();
-      if (gitWorkflow.active && gitWorkflow.step === "generating") {
-        loadGitWorkflowMessage({ requireFresh: true, retries: 3 });
+      {
+        const workflowTabId = event.tabId || activeTabId;
+        const workflow = gitWorkflowForTab(workflowTabId, { create: false });
+        if (workflow?.active && workflow.step === "generating") {
+          loadGitWorkflowMessage({ requireFresh: true, retries: 3, runId: workflow.runId, tabId: workflowTabId });
+        }
       }
       break;
     case "message_start":
@@ -8114,7 +8259,11 @@ function handleEvent(event) {
         syncRunIndicatorFromState(currentState);
         renderStatus();
       } else if (["set_model", "set_thinking_level", "new_session", "compact"].includes(event.command)) {
-        if (event.command === "new_session") forgetLastUserPrompt(event.tabId || activeTabId);
+        if (event.command === "new_session") {
+          const tabId = event.tabId || activeTabId;
+          forgetLastUserPrompt(tabId);
+          resetGitWorkflowForTab(tabId);
+        }
         scheduleRefreshState();
         scheduleRefreshMessages();
         scheduleRefreshFooter();
@@ -8252,6 +8401,7 @@ elements.newSessionButton.addEventListener("click", async () => {
     const response = await api("/api/new-session", { method: "POST", body: {}, tabId: tabContext.tabId });
     applyResponseTab(response);
     forgetLastUserPrompt(tabContext.tabId);
+    resetGitWorkflowForTab(tabContext.tabId);
     if (!isCurrentTabContext(tabContext)) return;
     await refreshAll(tabContext);
     if (isCurrentTabContext(tabContext)) focusPromptInput({ defer: true });

package/tests/mobile-static.test.mjs

@@ -291,6 +291,10 @@ assert.match(app, /const TOOL_LIVE_UPDATE_THROTTLE_MS = 80/, "live tool cards sh
 assert.match(app, /function updateLiveToolCard\(bubble, message\)[\s\S]*?body\.replaceChildren\(\);[\s\S]*?renderToolExecution\(body, message\);/, "live tool card updates should re-render the existing card body in place");
 assert.match(app, /function scheduleLiveToolRunRender\(run[\s\S]*?liveToolRenderQueue\.set[\s\S]*?TOOL_LIVE_UPDATE_THROTTLE_MS/, "live tool update events should be queued and throttled for smoother browser output");
 assert.match(app, /function handleToolExecutionUpdate\(event\)[\s\S]*?event\.partialResult[\s\S]*?scheduleLiveToolRunRender\(run, \{ scroll: false \}\)/, "live tool_execution_update events should update transcript-visible tool cards without replacing them per event");
+assert.match(app, /function captureReusableToolCards\(\)[\s\S]*?\.message\.toolExecution\[data-tool-call-id\]/, "full transcript re-renders should capture existing tool cards before clearing the chat");
+assert.match(app, /function appendMessage\(message,[\s\S]*?reusableToolCards = null[\s\S]*?reuseToolExecutionBubble\(reusableToolCards, message/, "message rendering should reuse matching tool cards instead of replacing them during refreshes");
+assert.match(app, /function renderAllMessages\(\{ preserveScroll = false \} = \{\}\)[\s\S]*?const reusableToolCards = captureReusableToolCards\(\);[\s\S]*?appendTranscriptMessage\(item\.message,[\s\S]*?reusableToolCards,/, "transcript refreshes should pass reusable tool cards through to item rendering");
+assert.match(app, /const keyedToolExecution = message\.role === "toolExecution" && message\.toolCallId[\s\S]*?keyedToolExecution \? "toolExecution"[\s\S]*?keyedToolExecution \? "" : message\.title[\s\S]*?keyedToolExecution \? "" : message\.timestamp/, "tool action entry identity should stay stable when live transient cards become persisted transcript cards");
 assert.match(app, /appendText\(preview, toolResultPreviewText\(message, 10\), "code-block tool-result-preview-text"\)/, "collapsed tool results should render the first ten preview lines by default");
 assert.match(app, /function assistantDisplayMessages\(message\)/, "assistant history should split thinking and tool-call parts out of the final Assistant output card");
 assert.match(app, /function assistantHasToolCallAfter\(content, index\)/, "assistant text that precedes a tool call should be detectable and suppressible");