@firstpick/pi-package-webui 0.1.7 → 0.1.9

package/public/app.js

@@ -63,6 +63,8 @@ const elements = {
   agentDoneNotificationsToggle: $("#agentDoneNotificationsToggle"),
   agentDoneNotificationsStatus: $("#agentDoneNotificationsStatus"),
   optionalFeaturesBox: $("#optionalFeaturesBox"),
+  codexUsageBox: $("#codexUsageBox"),
+  refreshCodexUsageButton: $("#refreshCodexUsageButton"),
   toggleSidePanelButton: $("#toggleSidePanelButton"),
   sidePanelExpandButton: $("#sidePanelExpandButton"),
   sidePanelBackdrop: $("#sidePanelBackdrop"),
@@ -146,6 +148,11 @@ let pathSuggestAbortController = null;
 let latestStats = null;
 let latestWorkspace = null;
 let latestNetwork = null;
+let latestCodexUsage = null;
+let codexUsageError = null;
+let codexUsageLoading = false;
+let refreshCodexUsageTimer = null;
+let codexUsageRenderTimer = null;
 let backendOffline = false;
 let backendOfflineNoticeShown = false;
 let latestMessages = [];
@@ -220,6 +227,8 @@ const STICKY_USER_PROMPT_TOP_GAP_PX = 12;
 const CHAT_FOLLOW_SETTLE_DELAY_MS = 80;
 const CHAT_PROGRAMMATIC_SCROLL_GRACE_MS = 500;
 const CHAT_USER_SCROLL_INTENT_MS = 700;
+const CODEX_USAGE_REFRESH_MS = 5 * 60 * 1000;
+const CODEX_USAGE_RENDER_TICK_MS = 30 * 1000;
 const RUN_INDICATOR_TICK_MS = 1000;
 const RUN_INDICATOR_START_GRACE_MS = 2500;
 const RUN_INDICATOR_STATE_RECHECK_MS = 5000;
@@ -319,16 +328,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 +1887,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 +1964,7 @@ function syncTabMetadata(nextTabs = []) {
       tabActivities.delete(tabId);
       tabSeenCompletionSerials.delete(tabId);
       actionFeedbackByTab.delete(tabId);
+      clearGitWorkflowForTab(tabId);
     }
   }
 }
@@ -2094,6 +2145,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 +2239,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 +2490,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 +2585,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 +3490,7 @@ async function changeActiveTabCwd() {
       return;
     }
     const nextContext = setActiveTabId(response.data?.tab?.id || activeTabId);
+    resetGitWorkflowForTab(nextContext.tabId);
     resetActiveTabUi();
     renderTabs();
     restoreActiveDraft();
@@ -3538,6 +3593,197 @@ function scheduleRefreshFooter(delay = 300, tabContext = activeTabContext()) {
   }, delay);
 }
 
+function formatCodexPlanType(value) {
+  const text = String(value || "").trim();
+  if (!text) return "unknown plan";
+  return text.replace(/[_-]+/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
+}
+
+function formatCodexPercent(value) {
+  const number = Number(value);
+  return Number.isFinite(number) ? `${Math.max(0, Math.min(100, Math.round(number)))}%` : "—";
+}
+
+function codexWindowDurationMinutes(window) {
+  const minutes = Number(window?.windowDurationMins);
+  if (Number.isFinite(minutes) && minutes > 0) return minutes;
+  const seconds = Number(window?.windowDurationSeconds);
+  return Number.isFinite(seconds) && seconds > 0 ? seconds / 60 : null;
+}
+
+function formatCodexWindowDuration(window) {
+  const minutes = codexWindowDurationMinutes(window);
+  if (!minutes) return "window";
+  if (minutes >= 280 && minutes <= 320) return "5h window";
+  if (minutes >= 9500 && minutes <= 10550) return "weekly window";
+  if (minutes >= 60 * 24) {
+    const days = minutes / (60 * 24);
+    return `${days >= 10 ? Math.round(days) : Number(days.toFixed(1))}d window`;
+  }
+  if (minutes >= 60) {
+    const hours = minutes / 60;
+    return `${Number.isInteger(hours) ? hours : Number(hours.toFixed(1))}h window`;
+  }
+  return `${Math.round(minutes)}m window`;
+}
+
+function formatDurationParts(milliseconds) {
+  if (!Number.isFinite(Number(milliseconds))) return "now";
+  const totalMinutes = Math.max(0, Math.ceil(Number(milliseconds) / 60000));
+  if (totalMinutes <= 1) return "<1m";
+  if (totalMinutes < 60) return `${totalMinutes}m`;
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  if (hours < 48) return minutes ? `${hours}h ${minutes}m` : `${hours}h`;
+  const days = Math.floor(hours / 24);
+  const remHours = hours % 24;
+  return remHours ? `${days}d ${remHours}h` : `${days}d`;
+}
+
+function codexWindowResetDate(window) {
+  const resetAt = window?.resetsAt ? new Date(window.resetsAt) : null;
+  if (resetAt && Number.isFinite(resetAt.getTime())) return resetAt;
+  const resetAfterSeconds = Number(window?.resetAfterSeconds);
+  if (Number.isFinite(resetAfterSeconds) && resetAfterSeconds >= 0) return new Date(Date.now() + resetAfterSeconds * 1000);
+  return null;
+}
+
+function formatCodexReset(window) {
+  const resetDate = codexWindowResetDate(window);
+  if (!resetDate) return "reset unknown";
+  const diff = resetDate.getTime() - Date.now();
+  if (diff <= 0) return "resetting now";
+  return `resets in ${formatDurationParts(diff)}`;
+}
+
+function codexSnapshotName(snapshot) {
+  return snapshot?.limitName || snapshot?.limitId || "codex";
+}
+
+function codexUsageBuckets(data) {
+  const buckets = [];
+  const selected = data?.selected || data?.rateLimits || null;
+  const snapshots = Array.isArray(data?.snapshots) ? data.snapshots : selected ? [selected] : [];
+  const selectedKey = selected?.limitId || selected?.limitName || "codex";
+  const pushWindow = (snapshot, kind, window, { prefix } = {}) => {
+    if (!window) return;
+    const durationLabel = formatCodexWindowDuration(window);
+    const baseLabel = kind === "secondary" && durationLabel === "window" ? "secondary window" : durationLabel;
+    buckets.push({
+      key: `${snapshot?.limitId || snapshot?.limitName || buckets.length}-${kind}`,
+      label: prefix ? `${prefix} · ${baseLabel}` : baseLabel,
+      window,
+    });
+  };
+
+  if (selected) {
+    pushWindow(selected, "primary", selected.primary);
+    pushWindow(selected, "secondary", selected.secondary);
+  }
+  for (const snapshot of snapshots) {
+    const key = snapshot?.limitId || snapshot?.limitName;
+    if (!snapshot || snapshot === selected || key === selectedKey) continue;
+    const name = codexSnapshotName(snapshot);
+    pushWindow(snapshot, "primary", snapshot.primary, { prefix: name });
+    pushWindow(snapshot, "secondary", snapshot.secondary, { prefix: name });
+  }
+  return buckets.slice(0, 6);
+}
+
+function renderCodexUsage() {
+  const box = elements.codexUsageBox;
+  if (!box) return;
+  if (elements.refreshCodexUsageButton) {
+    elements.refreshCodexUsageButton.disabled = codexUsageLoading;
+    elements.refreshCodexUsageButton.textContent = codexUsageLoading ? "Refreshing…" : "Refresh usage";
+  }
+
+  box.replaceChildren();
+  box.classList.toggle("muted", !latestCodexUsage);
+
+  if (!latestCodexUsage && codexUsageLoading) {
+    box.textContent = "Checking Codex usage…";
+    return;
+  }
+  if (!latestCodexUsage && codexUsageError) {
+    const title = make("div", "codex-usage-unavailable", "Usage unavailable");
+    const detail = make("div", "codex-usage-detail", codexUsageError.message || String(codexUsageError));
+    box.append(title, detail);
+    return;
+  }
+  if (!latestCodexUsage) {
+    box.textContent = "Codex usage has not loaded yet.";
+    return;
+  }
+
+  const header = make("div", "codex-usage-summary");
+  header.append(
+    make("span", "codex-usage-plan", formatCodexPlanType(latestCodexUsage.planType)),
+    make("span", "codex-usage-fetched", latestCodexUsage.fetchedAt ? `updated ${formatDurationParts(Date.now() - new Date(latestCodexUsage.fetchedAt).getTime())} ago` : "updated now"),
+  );
+  box.append(header);
+
+  const buckets = codexUsageBuckets(latestCodexUsage);
+  if (buckets.length === 0) {
+    box.append(make("div", "codex-usage-detail", "No Codex rate-limit windows were returned."));
+  } else {
+    for (const bucket of buckets) {
+      const usedPercent = Number(bucket.window?.usedPercent);
+      const fillPercent = Number.isFinite(usedPercent) ? Math.max(0, Math.min(100, usedPercent)) : 0;
+      const item = make("div", "codex-usage-bucket");
+      const row = make("div", "codex-usage-row");
+      row.append(
+        make("span", "codex-usage-label", bucket.label),
+        make("strong", "codex-usage-percent", formatCodexPercent(bucket.window?.usedPercent)),
+      );
+      const meter = make("div", "codex-usage-meter");
+      const fill = make("span", "codex-usage-meter-fill");
+      fill.style.width = `${fillPercent}%`;
+      meter.append(fill);
+      item.append(row, meter, make("div", "codex-usage-reset", formatCodexReset(bucket.window)));
+      box.append(item);
+    }
+  }
+
+  if (latestCodexUsage.rateLimitReachedType) {
+    box.append(make("div", "codex-usage-warning", `Limit status: ${latestCodexUsage.rateLimitReachedType}`));
+  }
+  if (codexUsageError) {
+    box.append(make("div", "codex-usage-detail", `Latest refresh failed: ${codexUsageError.message || codexUsageError}`));
+  }
+}
+
+async function refreshCodexUsage({ forceAuthRefresh = false } = {}) {
+  if (codexUsageLoading) return;
+  codexUsageLoading = true;
+  renderCodexUsage();
+  try {
+    const suffix = forceAuthRefresh ? "?refresh=1" : "";
+    const response = await api(`/api/codex-usage${suffix}`, { scoped: false });
+    latestCodexUsage = response.data || null;
+    codexUsageError = null;
+  } catch (error) {
+    codexUsageError = error;
+  } finally {
+    codexUsageLoading = false;
+    renderCodexUsage();
+  }
+}
+
+function scheduleRefreshCodexUsage(delay = CODEX_USAGE_REFRESH_MS) {
+  clearTimeout(refreshCodexUsageTimer);
+  refreshCodexUsageTimer = setTimeout(() => {
+    refreshCodexUsage().finally(() => scheduleRefreshCodexUsage());
+  }, delay);
+}
+
+function initializeCodexUsage() {
+  renderCodexUsage();
+  refreshCodexUsage().finally(() => scheduleRefreshCodexUsage());
+  clearInterval(codexUsageRenderTimer);
+  codexUsageRenderTimer = setInterval(renderCodexUsage, CODEX_USAGE_RENDER_TICK_MS);
+}
+
 function renderStatus() {
   const state = currentState;
   updateComposerModeButtons();
@@ -3964,18 +4210,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 +4333,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 +4345,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 +4379,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 +4432,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 +4471,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 +5788,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 +5877,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 +5950,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 +6010,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 +6041,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 +6260,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 +6312,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 +6320,7 @@ function renderAllMessages({ preserveScroll = false } = {}) {
       messageIndex: item.messageIndex,
       transient: item.transient,
       animateEntry: shouldAnimateActionEntry(item),
+      reusableToolCards,
     });
   }
   rememberActionEntries(transcriptItems);
@@ -7589,6 +7929,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() {
@@ -8025,9 +8366,14 @@ function handleEvent(event) {
       scheduleRefreshState();
       scheduleRefreshMessages();
       scheduleRefreshFooter();
+      scheduleRefreshCodexUsage(2200);
       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 +8460,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 +8602,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 });
@@ -8411,6 +8762,9 @@ window.addEventListener("keydown", (event) => {
   }
 });
 
+elements.refreshCodexUsageButton?.addEventListener("click", () => {
+  refreshCodexUsage({ forceAuthRefresh: true }).finally(() => scheduleRefreshCodexUsage());
+});
 elements.pathPickerAddFastPickButton.addEventListener("click", () => addCurrentFastPick().catch((error) => addEvent(error.message, "error")));
 elements.pathPickerCancelButton.addEventListener("click", () => closePathPicker(null));
 elements.pathPickerChooseButton.addEventListener("click", () => closePathPicker(pathPickerState?.cwd || null));
@@ -8507,6 +8861,7 @@ restoreThinkingVisibilitySetting();
 restoreSidePanelSectionState();
 bindSidePanelSectionToggles();
 restoreSidePanelState();
+initializeCodexUsage();
 bindMobileViewChanges();
 registerPwaServiceWorker();
 renderServerOfflinePanel();