@firstpick/pi-package-webui 0.3.9 → 0.4.1

package/public/app.js

@@ -11,7 +11,11 @@ const elements = {
   newTabCurrentDirectoryButton: $("#newTabCurrentDirectoryButton"),
   newTabChooseDirectoryButton: $("#newTabChooseDirectoryButton"),
   closeAllTabsButton: $("#closeAllTabsButton"),
+  commandPaletteButton: $("#commandPaletteButton"),
+  workspaceDashboardToggleButton: $("#workspaceDashboardToggleButton"),
+  workspaceDashboard: $("#workspaceDashboard"),
   statusBar: $("#statusBar"),
+  contextMeterBar: $("#contextMeterBar"),
   serverOfflinePanel: $("#serverOfflinePanel"),
   serverRestartPanel: $("#serverRestartPanel"),
   serverRestartMessage: $("#serverRestartMessage"),
@@ -28,6 +32,12 @@ const elements = {
   widgetArea: $("#widgetArea"),
   stickyUserPromptButton: $("#stickyUserPromptButton"),
   chat: $("#chat"),
+  chatSearchBar: $("#chatSearchBar"),
+  chatSearchInput: $("#chatSearchInput"),
+  chatSearchCount: $("#chatSearchCount"),
+  chatSearchPrevButton: $("#chatSearchPrevButton"),
+  chatSearchNextButton: $("#chatSearchNextButton"),
+  chatSearchCloseButton: $("#chatSearchCloseButton"),
   feedbackTray: $("#feedbackTray"),
   feedbackTraySummary: $("#feedbackTraySummary"),
   sendFeedbackButton: $("#sendFeedbackButton"),
@@ -72,6 +82,7 @@ const elements = {
   appRunnerMenuPanel: $("#appRunnerMenuPanel"),
   optionsMenuButton: $("#optionsMenuButton"),
   optionsMenu: $("#optionsMenu"),
+  optionsCommandPaletteButton: $("#optionsCommandPaletteButton"),
   optionsResumeButton: $("#optionsResumeButton"),
   optionsReloadButton: $("#optionsReloadButton"),
   optionsNameButton: $("#optionsNameButton"),
@@ -80,7 +91,9 @@ const elements = {
   optionsExportButton: $("#optionsExportButton"),
   optionsForkButton: $("#optionsForkButton"),
   optionsTreeButton: $("#optionsTreeButton"),
+  optionsStatsButton: $("#optionsStatsButton"),
   gitWorkflowPanel: $("#gitWorkflowPanel"),
+  gitWorkflowKicker: $("#gitWorkflowKicker"),
   gitWorkflowTitle: $("#gitWorkflowTitle"),
   gitWorkflowHint: $("#gitWorkflowHint"),
   gitWorkflowSteps: $("#gitWorkflowSteps"),
@@ -178,6 +191,17 @@ const elements = {
   pathPickerError: $("#pathPickerError"),
   pathPickerCancelButton: $("#pathPickerCancelButton"),
   pathPickerChooseButton: $("#pathPickerChooseButton"),
+  commandPaletteDialog: $("#commandPaletteDialog"),
+  commandPaletteInput: $("#commandPaletteInput"),
+  commandPaletteList: $("#commandPaletteList"),
+  commandPaletteHint: $("#commandPaletteHint"),
+  editRetryDialog: $("#editRetryDialog"),
+  editRetryMessage: $("#editRetryMessage"),
+  editRetryText: $("#editRetryText"),
+  editRetryStatus: $("#editRetryStatus"),
+  editRetryCancelButton: $("#editRetryCancelButton"),
+  editRetryForkButton: $("#editRetryForkButton"),
+  editRetrySendButton: $("#editRetrySendButton"),
   nativeCommandDialog: $("#nativeCommandDialog"),
   nativeCommandTitle: $("#nativeCommandTitle"),
   nativeCommandMessage: $("#nativeCommandMessage"),
@@ -188,6 +212,15 @@ const elements = {
   appRunnerInfoDialog: $("#appRunnerInfoDialog"),
   appRunnerInfoBody: $("#appRunnerInfoBody"),
   appRunnerInfoCloseButton: $("#appRunnerInfoCloseButton"),
+  statsOverlayDialog: $("#statsOverlayDialog"),
+  statsOverlaySubtitle: $("#statsOverlaySubtitle"),
+  statsOverlayScope: $("#statsOverlayScope"),
+  statsOverlayCustomDays: $("#statsOverlayCustomDays"),
+  statsOverlayRefreshButton: $("#statsOverlayRefreshButton"),
+  statsOverlayStatus: $("#statsOverlayStatus"),
+  statsOverlayTabs: $("#statsOverlayTabs"),
+  statsOverlayBody: $("#statsOverlayBody"),
+  statsOverlayCloseButton: $("#statsOverlayCloseButton"),
 };
 
 let currentState = null;
@@ -257,6 +290,13 @@ let pathSuggestActiveQuery = null;
 let pathSuggestRequestSerial = 0;
 let pathSuggestAbortController = null;
 let latestStats = null;
+let statsOverlayActiveTab = "overview";
+let statsOverlayLoading = false;
+let statsOverlayError = "";
+let statsOverlayLastScope = "14";
+let statsOverlayCalibrationMessage = "";
+let statsOverlayCalibrationBusy = "";
+let latestStatsOverlayPayload = null;
 let latestWorkspace = null;
 let latestNetwork = null;
 let webuiVersion = "";
@@ -328,6 +368,10 @@ let userBashQueuesByTab = new Map();
 let latestQueuedMessagesByTab = new Map();
 let loadedPromptList = null;
 let promptListRunning = false;
+let workspaceDashboardCollapsed = false;
+let commandPaletteIndex = 0;
+let commandPaletteItems = [];
+let activeEditRetry = null;
 let abortLongPressTimer = null;
 let abortLongPressHandled = false;
 const dialogQueue = [];
@@ -356,10 +400,16 @@ const GIT_FOOTER_WEBUI_STATUS_KEY = "git-footer-webui";
 const GIT_FOOTER_WEBUI_PAYLOAD_TYPE = "firstpick.git-footer-status.footer";
 const GIT_FOOTER_WEBUI_PAYLOAD_VERSION = 1;
 const GIT_FOOTER_WEBUI_PAYLOAD_CACHE_KEY = "pi-webui-git-footer-webui-payload-cache";
+const GIT_FOOTER_STATUS_SETUP_STORAGE_KEY = "pi-webui-git-footer-status-setup";
+const GIT_INIT_STACK_STORAGE_KEY = "pi-webui-git-init-stack";
+const STATS_WEBUI_STATUS_KEY = "stats-webui";
+const STATS_WEBUI_PAYLOAD_TYPE = "firstpick.pi-extension-stats.overlay";
+const STATS_WEBUI_PAYLOAD_VERSION = 1;
 const GIT_CHANGES_RENDER_ROW_LIMIT = 4000;
 const LAST_USER_PROMPT_STORAGE_KEY = "pi-webui-last-user-prompts";
 const PROMPT_HISTORY_STORAGE_KEY = "pi-webui-prompt-history";
 const PROMPT_LIST_STORAGE_KEY = "pi-webui-prompt-lists";
+const WORKSPACE_DASHBOARD_STORAGE_KEY = "pi-webui-workspace-dashboard-collapsed";
 const PROMPT_HISTORY_LIMIT_PER_TAB = 50;
 const ATTACHMENT_MAX_FILES = 12;
 const ATTACHMENT_MAX_FILE_BYTES = 64 * 1024 * 1024;
@@ -493,10 +543,10 @@ const OPTIONAL_FEATURES = [
   },
   {
     id: "statsCommand",
-    label: "Stats command",
+    label: "Stats dashboard",
     packageName: "@firstpick/pi-extension-stats",
     capabilityLabel: "/stats",
-    description: "Token and cost usage analytics commands.",
+    description: "Token and cost usage analytics commands plus the browser dashboard overlay.",
   },
   {
     id: "themeBundle",
@@ -521,6 +571,7 @@ const OPTIONAL_COMMAND_FEATURES = new Map([
   ["todo-progress-status", "todoProgressWidget"],
 ]);
 const HIDDEN_COMMAND_NAMES = new Set(["webui-tree-navigate", "webui-helper"]);
+HIDDEN_COMMAND_NAMES.add("stats-webui");
 const NATIVE_SELECTOR_COMMANDS = new Set(["model", "settings", "theme", "fork", "clone", "name", "resume", "tree", "login", "logout", "scoped-models", "tools", "skills"]);
 const SETTINGS_THINKING_OPTIONS = ["off", "minimal", "low", "medium", "high", "xhigh"];
 const SETTINGS_TRANSPORT_OPTIONS = ["sse", "websocket", "websocket-cached", "auto"];
@@ -541,13 +592,21 @@ const SETTINGS_IMAGE_WIDTH_OPTIONS = ["60", "80", "120"];
 const SETTINGS_EDITOR_PADDING_OPTIONS = ["0", "1", "2", "3"];
 const SETTINGS_AUTOCOMPLETE_OPTIONS = ["3", "5", "7", "10", "15", "20"];
 const optionalFeatureInstallInProgress = new Set();
+const optionalFeaturePackageStatuses = new Map();
+const optionalFeatureInstallMessages = new Map();
 const gitFooterPayloadRefreshInFlightByTab = new Set();
 
 function createGitWorkflowActionsDone(patch = {}) {
   return {
+    init: false,
+    stack: false,
+    readme: false,
+    gitignore: false,
     stage: false,
     message: false,
     commit: false,
+    branch: false,
+    remote: false,
     push: false,
     ...patch,
   };
@@ -561,16 +620,41 @@ function gitWorkflowActionDonePatch(workflow, process) {
   return { actionsDone: createGitWorkflowActionsDone({ ...workflow?.actionsDone, [process]: true }) };
 }
 
+function resetGitWorkflowManualCommitDefaultPatch() {
+  return {
+    manualCommitMessageDefault: "",
+    manualCommitMessageDefaultReason: "",
+    manualCommitMessageDefaultPath: "",
+    manualCommitMessageDefaultAction: "",
+    manualCommitMessageDefaultRequestedAt: 0,
+    manualCommitMessageDefaultLoading: false,
+  };
+}
+
+function gitWorkflowManualCommitInputMessage(workflow) {
+  return String(workflow?.manualCommitMessage || "").trim() || String(workflow?.manualCommitMessageDefault || "").trim();
+}
+
 function createGitWorkflowState() {
   return {
     active: false,
+    mode: "standard",
     step: "idle",
     process: "stage",
     busy: false,
     runId: 0,
     output: "",
     error: "",
+    githubUsername: "",
+    repoName: "",
+    remoteUrl: "",
+    stack: "",
+    readmeRequestedAt: 0,
+    gitignoreRequestedAt: 0,
+    initFilesStatus: null,
     message: null,
+    manualCommitMessage: "",
+    ...resetGitWorkflowManualCommitDefaultPatch(),
     messageRequestedAt: 0,
     branchName: "",
     branchNameRequestedAt: 0,
@@ -629,6 +713,16 @@ const GIT_WORKFLOW_PROCESSES = [
   { value: "push", label: "Push" },
 ];
 const GIT_WORKFLOW_PROCESS_VALUES = new Set(GIT_WORKFLOW_PROCESSES.map((process) => process.value));
+const GIT_INIT_WORKFLOW_PROCESSES = [
+  { value: "init", label: "Init" },
+  { value: "stack", label: "Stack" },
+  { value: "readme", label: "Files" },
+  { value: "commit", label: "Commit" },
+  { value: "branch", label: "Main" },
+  { value: "remote", label: "Remote" },
+  { value: "push", label: "Push" },
+];
+const GIT_INIT_WORKFLOW_PROCESS_VALUES = new Set(GIT_INIT_WORKFLOW_PROCESSES.map((process) => process.value));
 const ACTION_FEEDBACK_REACTIONS = {
   up: { icon: "👍", label: "Good job", title: "Good job!" },
   down: { icon: "👎", label: "Avoid this", title: "Avoid this" },
@@ -650,13 +744,32 @@ const GIT_WORKFLOW_ACTIVE_INDEX = {
   prCreating: 3,
   done: 4,
 };
+const GIT_INIT_WORKFLOW_ACTIVE_INDEX = {
+  initSetup: 0,
+  initRepo: 0,
+  initializingRepo: 0,
+  initStack: 1,
+  readme: 2,
+  readmeCreating: 2,
+  readmeGenerating: 2,
+  gitignoreGenerating: 2,
+  initialCommit: 3,
+  initialCommitting: 3,
+  mainBranch: 4,
+  mainBranching: 4,
+  remote: 5,
+  remoteAdding: 5,
+  initialPush: 6,
+  initialPushing: 6,
+  done: 7,
+};
 const GIT_WORKFLOW_CREATE_PR_TOOLTIP = [
   "Create PR branch:",
   "1. Ask Pi to generate a type/feature-name branch from staged changes.",
   "2. Read dev/COMMIT/staged-branch-name.txt.",
   "3. Let you confirm or edit the generated branch name.",
   "4. Run git switch -c <branch>.",
-  "5. Return here to commit short or long on that branch.",
+  "5. Return here to commit short, long, or typed input on that branch.",
   "6. Push and Create PR will push upstream, run /pr, let you review, then run gh pr create.",
 ].join("\n");
 const GIT_WORKFLOW_MANUAL_BRANCH_TOOLTIP = [
@@ -665,9 +778,40 @@ const GIT_WORKFLOW_MANUAL_BRANCH_TOOLTIP = [
   "2. Prefill a branch from the commit message if possible.",
   "3. Let you type or edit the type/feature-name branch name.",
   "4. Run git switch -c <branch>.",
-  "5. Return here to commit short or long on that branch.",
+  "5. Return here to commit short, long, or typed input on that branch.",
   "6. Push and Create PR will push upstream, run /pr, let you review, then run gh pr create.",
 ].join("\n");
+const GIT_FOOTER_STATUS_SETUP_TOOLTIP = [
+  "git-footer-status-setup:",
+  "Store the GitHub username used when the Web UI initializes a no-repo directory.",
+  "The remote URL is https://github.com/USERNAME/REPO_NAME.git.",
+  "The repository name is asked per initialization and defaults to the current folder name.",
+].join("\n");
+const GIT_INIT_REMOTE_TOOLTIP = [
+  "Add origin remote:",
+  "1. Confirm the GitHub username from git-footer-status-setup.",
+  "2. Ask for the repository name if needed.",
+  "3. Run git remote add origin https://github.com/USERNAME/REPO_NAME.git.",
+].join("\n");
+const GIT_INIT_STACK_OPTIONS = [
+  { value: "", label: "Auto-detect from codebase" },
+  { value: "Node.js / TypeScript", label: "Node.js / TypeScript" },
+  { value: "React / Vite", label: "React / Vite" },
+  { value: "Next.js", label: "Next.js" },
+  { value: "Python", label: "Python" },
+  { value: "Django", label: "Django" },
+  { value: "FastAPI", label: "FastAPI" },
+  { value: "Rust", label: "Rust" },
+  { value: "Go", label: "Go" },
+  { value: "Java / Gradle", label: "Java / Gradle" },
+  { value: "Docker", label: "Docker" },
+  { value: "Custom", label: "Custom…" },
+];
+const GIT_INIT_STACK_TOOLTIP = [
+  "Repository stack:",
+  "Choose a known stack or type one. The value is saved in this browser.",
+  "If left blank, Pi will inspect the codebase and fall back to sane default .gitignore patterns.",
+].join("\n");
 
 function make(tag, className, text) {
   const node = document.createElement(tag);
@@ -1617,6 +1761,41 @@ function restoreSidePanelState() {
   setSidePanelCollapsed(stored ?? false, { persist: stored !== null });
 }
 
+function readStoredWorkspaceDashboardCollapsed() {
+  try {
+    const stored = localStorage.getItem(WORKSPACE_DASHBOARD_STORAGE_KEY);
+    return stored === null ? true : stored === "1";
+  } catch {
+    return true;
+  }
+}
+
+function persistWorkspaceDashboardCollapsed(collapsed) {
+  try {
+    localStorage.setItem(WORKSPACE_DASHBOARD_STORAGE_KEY, collapsed ? "1" : "0");
+  } catch {
+    // Ignore storage failures; this is only a browser preference.
+  }
+}
+
+function setWorkspaceDashboardCollapsed(collapsed, { persist = true } = {}) {
+  workspaceDashboardCollapsed = !!collapsed;
+  if (elements.workspaceDashboard) elements.workspaceDashboard.hidden = workspaceDashboardCollapsed;
+  if (elements.workspaceDashboardToggleButton) {
+    elements.workspaceDashboardToggleButton.setAttribute("aria-expanded", workspaceDashboardCollapsed ? "false" : "true");
+    const tooltip = workspaceDashboardCollapsed ? "Show workspace overview" : "Hide workspace overview";
+    const tooltipDetail = `${tooltip}:\n• Shows current tab, cwd, model, context, session, and queue.\n• Opens common workspace/session actions from one place.`;
+    elements.workspaceDashboardToggleButton.title = tooltip;
+    elements.workspaceDashboardToggleButton.setAttribute("aria-label", tooltip);
+    elements.workspaceDashboardToggleButton.setAttribute("data-tooltip", tooltipDetail);
+  }
+  if (persist) persistWorkspaceDashboardCollapsed(workspaceDashboardCollapsed);
+}
+
+function restoreWorkspaceDashboardState() {
+  setWorkspaceDashboardCollapsed(readStoredWorkspaceDashboardCollapsed(), { persist: false });
+}
+
 function bindMobileViewChanges() {
   if (!mobileViewMedia) return;
   const syncForViewport = (event) => {
@@ -1866,6 +2045,142 @@ function attachMessageCopyButton(bubble, message, body) {
   return button;
 }
 
+function userMessageEditText(message) {
+  return textFromContent(message?.content).trim();
+}
+
+function messageEntryId(message) {
+  for (const key of ["entryId", "id", "sessionEntryId", "messageId"]) {
+    const value = message?.[key];
+    if (typeof value === "string" && value.trim()) return value.trim();
+  }
+  return "";
+}
+
+function userMessageOrdinalAtIndex(messageIndex) {
+  if (!Number.isInteger(messageIndex) || messageIndex < 0) return -1;
+  let ordinal = -1;
+  for (let index = 0; index <= messageIndex && index < latestMessages.length; index += 1) {
+    if (latestMessages[index]?.role === "user") ordinal += 1;
+  }
+  return ordinal;
+}
+
+async function resolveForkMessageForEdit(message, messageIndex, tabId = activeTabId) {
+  const directEntryId = messageEntryId(message);
+  const text = userMessageEditText(message);
+  if (directEntryId) return { entryId: directEntryId, text };
+  const response = await api("/api/fork-messages", { tabId });
+  const forkMessages = Array.isArray(response.data?.messages) ? response.data.messages : [];
+  const ordinal = userMessageOrdinalAtIndex(messageIndex);
+  const ordinalMatch = ordinal >= 0 ? forkMessages[ordinal] : null;
+  if (ordinalMatch?.entryId && userMessageEditText({ content: ordinalMatch.text }) === text) return ordinalMatch;
+  const exactMatches = forkMessages.filter((item) => item?.entryId && String(item.text || "").trim() === text);
+  if (exactMatches.length === 1) return exactMatches[0];
+  if (exactMatches.length > 1 && ordinalMatch?.entryId) return ordinalMatch;
+  throw new Error("Could not map this transcript message to a fork point. Use /fork for the full selector.");
+}
+
+function setEditRetryStatus(message = "", level = "info") {
+  if (!elements.editRetryStatus) return;
+  elements.editRetryStatus.textContent = message;
+  elements.editRetryStatus.hidden = !message;
+  elements.editRetryStatus.className = `edit-retry-status ${level} ${message ? "" : "muted"}`.trim();
+}
+
+function setEditRetryBusy(busy, label = "Working…") {
+  for (const button of [elements.editRetryForkButton, elements.editRetrySendButton, elements.editRetryCancelButton].filter(Boolean)) button.disabled = !!busy;
+  if (elements.editRetrySendButton) elements.editRetrySendButton.textContent = busy ? label : "Fork & run";
+  if (elements.editRetryForkButton) elements.editRetryForkButton.textContent = busy ? "Forking…" : "Fork only";
+}
+
+function openEditRetryDialog(message, messageIndex = -1) {
+  const text = userMessageEditText(message);
+  if (!text) {
+    addEvent("user message has no editable text", "warn");
+    return;
+  }
+  activeEditRetry = { message, messageIndex, tabId: activeTabId };
+  if (elements.editRetryMessage) elements.editRetryMessage.textContent = `Fork from user message #${messageIndex >= 0 ? messageIndex + 1 : "?"}, edit it, then run or leave the edited prompt in the composer.`;
+  if (elements.editRetryText) {
+    elements.editRetryText.value = text;
+    elements.editRetryText.style.height = "auto";
+  }
+  setEditRetryStatus();
+  setEditRetryBusy(false);
+  if (!elements.editRetryDialog.open) elements.editRetryDialog.showModal();
+  queueMicrotask(() => {
+    elements.editRetryText?.focus();
+    elements.editRetryText?.select();
+  });
+}
+
+function closeEditRetryDialog() {
+  activeEditRetry = null;
+  if (elements.editRetryDialog?.open) elements.editRetryDialog.close();
+}
+
+async function submitEditRetry({ send = false } = {}) {
+  if (!activeEditRetry) return;
+  const editedText = String(elements.editRetryText?.value || "").trim();
+  if (!editedText) {
+    setEditRetryStatus("Prompt cannot be empty.", "error");
+    elements.editRetryText?.focus();
+    return;
+  }
+  const { message, messageIndex, tabId } = activeEditRetry;
+  const tabContext = activeTabContext(tabId || activeTabId);
+  setEditRetryBusy(true, "Forking…");
+  setEditRetryStatus("Resolving fork point…");
+  try {
+    const forkMessage = await resolveForkMessageForEdit(message, messageIndex, tabContext.tabId);
+    setEditRetryStatus("Forking session…");
+    const result = await api("/api/fork", { method: "POST", body: { entryId: forkMessage.entryId }, tabId: tabContext.tabId });
+    applyResponseTab(result);
+    if (!isCurrentTabContext(tabContext)) return;
+    closeEditRetryDialog();
+    await refreshAll(tabContext);
+    if (!isCurrentTabContext(tabContext)) return;
+    if (send) {
+      addEvent("forked session; sending edited prompt", "info");
+      await sendPrompt("prompt", editedText, { targetTabId: tabContext.tabId, throwOnError: true });
+    } else {
+      elements.promptInput.value = editedText;
+      resizePromptInput();
+      focusPromptInput({ defer: true });
+      addEvent("forked session; edited prompt restored in composer", "info");
+    }
+  } catch (error) {
+    setEditRetryStatus(error.message || String(error), "error");
+    if (send) {
+      elements.promptInput.value = editedText;
+      resizePromptInput();
+    }
+  } finally {
+    setEditRetryBusy(false);
+  }
+}
+
+function attachMessageEditRetryButton(bubble, message, messageIndex, { streaming = false, transient = false } = {}) {
+  if (!bubble || streaming || transient || message?.role !== "user") return null;
+  const text = userMessageEditText(message);
+  if (!text) return null;
+  const existing = bubble.querySelector(":scope > .message-edit-retry-button");
+  if (existing) return existing;
+  const button = make("button", "message-edit-retry-button", "↺");
+  button.type = "button";
+  button.title = "Edit this prompt and retry from here";
+  button.setAttribute("aria-label", button.title);
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    openEditRetryDialog(message, messageIndex);
+  });
+  bubble.classList.add("has-edit-retry-action");
+  bubble.append(button);
+  return button;
+}
+
 function safeHttpUrl(value, base = window.location.href) {
   const text = String(value || "").trim();
   if (!text) return "";
@@ -2072,12 +2387,12 @@ function renderUpdateNotification(status = latestUpdateStatus, { force = false }
   if (elements.updateNotificationTitle) elements.updateNotificationTitle.textContent = items.length === 1 ? `${items[0]} available` : "Pi updates available";
   if (elements.updateNotificationMessage) {
     elements.updateNotificationMessage.textContent = canRunUpdate
-      ? "Run pi update now, then restart this Web UI server automatically."
+      ? "Run Pi and Web UI package updates now, then restart this Web UI server automatically."
       : "Updates are available. Direct Web UI updates are only enabled from localhost on the host machine.";
   }
   const details = [
     items.join(" · "),
-    latestUpdateStatus.webuiDev && latestUpdateStatus.webui?.updateAvailable ? "The current Web UI is a dev checkout; pi update updates installed Pi packages, not this checkout." : "",
+    latestUpdateStatus.webuiDev && latestUpdateStatus.webui?.updateAvailable ? "The current Web UI is a dev checkout; update also refreshes this checkout's Web UI/Pi package dependencies when possible." : "",
     latestUpdateStatus.packages?.note || "",
   ].filter(Boolean).join(" ");
   if (elements.updateNotificationDetail) elements.updateNotificationDetail.textContent = details;
@@ -2103,14 +2418,14 @@ function scheduleUpdateStatusRefresh() {
   clearTimeout(updateStatusRefreshTimer);
   updateStatusRefreshTimer = setTimeout(() => {
     updateStatusRefreshTimer = null;
-    refreshUpdateStatus({ force: true }).catch((error) => addEvent(`Pi update check failed: ${error.message || String(error)}`, "warn"));
+    refreshUpdateStatus({ force: true }).catch((error) => addEvent(`Pi/Web UI update check failed: ${error.message || String(error)}`, "warn"));
     scheduleUpdateStatusRefresh();
   }, UPDATE_STATUS_REFRESH_MS);
 }
 
 function initializeUpdateNotifications() {
   setTimeout(() => {
-    refreshUpdateStatus().catch((error) => addEvent(`Pi update check failed: ${error.message || String(error)}`, "warn"));
+    refreshUpdateStatus().catch((error) => addEvent(`Pi/Web UI update check failed: ${error.message || String(error)}`, "warn"));
     scheduleUpdateStatusRefresh();
   }, UPDATE_STATUS_INITIAL_DELAY_MS);
 }
@@ -2119,13 +2434,13 @@ function piUpdateConfirmationText() {
   const items = updateNotificationItems();
   const workingWarning = hasWorkingTab() ? "\n\nOne or more Pi tabs look busy or blocked. Finish or abort in-flight work before updating if you need to preserve it." : "";
   const versionText = items.length ? `\n\nDetected update: ${items.join(" · ")}.` : "";
-  return `Run pi update now?${versionText}\n\nThis will run \"pi update\" on the Web UI host. After it finishes, Pi Web UI will restart itself. Browser clients will briefly disconnect, and managed Pi tabs/RPC processes will be restarted from saved session state when possible.${workingWarning}`;
+  return `Run Pi/Web UI package updates now?${versionText}\n\nThis will run \"pi update\" plus detected local and global Web UI/Pi package-manager updates on the Web UI host. After it finishes, Pi Web UI will restart itself. Browser clients will briefly disconnect, and managed Pi tabs/RPC processes will be restarted from saved session state when possible.${workingWarning}`;
 }
 
 async function runPiUpdateAndRestart() {
   if (updateRequestInProgress) return;
   if (latestUpdateStatus?.canRunUpdate === false) {
-    addEvent("Pi update can only be started from localhost on the Web UI host", "warn");
+    addEvent("Pi/Web UI package updates can only be started from localhost on the Web UI host", "warn");
     renderUpdateNotification(latestUpdateStatus, { force: true });
     return;
   }
@@ -2134,11 +2449,11 @@ async function runPiUpdateAndRestart() {
   updateRequestInProgress = true;
   hideUpdateNotification();
   setServerActionBusy("Updating…");
-  setServerActionStatus("Running pi update. The server will restart after the update completes…", "warn");
-  setServerRestartOverlay(true, "Running pi update. The server will restart after the update completes…");
+  setServerActionStatus("Running Pi/Web UI package updates. The server will restart after the update completes…", "warn");
+  setServerRestartOverlay(true, "Running Pi/Web UI package updates. The server will restart after the update completes…");
   try {
     await api("/api/update", { method: "POST", scoped: false });
-    addEvent("Pi update completed; Pi Web UI server restart requested", "warn");
+    addEvent("Pi/Web UI package updates completed; Pi Web UI server restart requested", "warn");
   } catch (error) {
     if (!error?.backendOffline) {
       updateRequestInProgress = false;
@@ -3034,7 +3349,7 @@ function renderOptionalFeatureDependentDisplays() {
   streamBubble = null;
   streamText = null;
   streamBubbleVisibleSince = 0;
-  renderAllMessages({ preserveScroll: true });
+  renderAllMessages({ preserveScroll: true, forceRebuild: true });
   if (streamRawText) renderStreamingAssistantText();
 }
 
@@ -3617,7 +3932,7 @@ function restoreActiveDraft() {
 
 function focusPromptInput({ defer = false } = {}) {
   const focus = () => {
-    if (!elements.promptInput || elements.dialog.open || elements.pathPickerDialog.open || elements.gitChangesDialog?.open || elements.nativeCommandDialog.open || elements.appRunnerInfoDialog?.open || elements.promptListDialog?.open || elements.attachmentTextDialog?.open || elements.skillEditorDialog?.open || document.visibilityState === "hidden") return;
+    if (!elements.promptInput || elements.dialog.open || elements.pathPickerDialog.open || elements.gitChangesDialog?.open || elements.commandPaletteDialog?.open || elements.editRetryDialog?.open || elements.nativeCommandDialog.open || elements.appRunnerInfoDialog?.open || elements.promptListDialog?.open || elements.attachmentTextDialog?.open || elements.skillEditorDialog?.open || document.visibilityState === "hidden") return;
     try {
       elements.promptInput.focus({ preventScroll: true });
     } catch {
@@ -3661,6 +3976,7 @@ function resetActiveTabUi() {
   eventSource = null;
   currentState = null;
   latestStats = null;
+  latestStatsOverlayPayload = null;
   latestWorkspace = null;
   latestMessages = [];
   clearRunIndicatorActivity({ render: false });
@@ -3956,6 +4272,9 @@ function renderTabs() {
   updateTerminalTabGroupOpenState();
   setMobileTabsExpanded(mobileTabsExpanded);
   updateDocumentTitle();
+  renderWorkspaceDashboard();
+  renderContextMeter();
+  if (elements.commandPaletteDialog?.open) renderCommandPalette();
   syncTabPolling();
 }
 
@@ -5239,7 +5558,10 @@ function renderGitFooterPayloadMeta(chip, tab) {
   if (chip.key === "cwd" && tab) {
     options.onClick = changeActiveTabCwd;
     action = `Click to change the working directory for ${tab.title}.`;
-  } else if (chip.key === "git" && chip.value !== "no repo") {
+  } else if (chip.key === "git" && cleanFooterPayloadText(chip.value, "").toLowerCase() === "no repo") {
+    options.onClick = () => startGitInitWorkflow();
+    action = "No Git repository detected. Click to initialize a repo, create README.md, add origin, and push main.";
+  } else if (chip.key === "git") {
     options.onClick = () => setFooterBranchPickerOpen(!footerBranchPickerOpen);
     action = "Click to switch to another local branch.";
   } else if (chip.key === "changes") {
@@ -5257,7 +5579,7 @@ function renderGitFooterPayloadMeta(chip, tab) {
   options.tooltipAlign = gitFooterTooltipAlign(chip);
   const node = footerMeta(chip.label, chip.value, footerMetaClassForPayload(chip), options);
   applyFooterChangedFilesDropdown(node, chip);
-  if (chip.key === "git" && options.onClick) {
+  if (chip.key === "git" && options.onClick && cleanFooterPayloadText(chip.value, "").toLowerCase() !== "no repo") {
     node.setAttribute("aria-haspopup", "listbox");
     node.setAttribute("aria-expanded", footerBranchPickerOpen ? "true" : "false");
   }
@@ -5770,6 +6092,194 @@ function renderMinimalFooter() {
   updateFooterModelPickerPosition();
 }
 
+function contextUsageSnapshot() {
+  const usage = latestStats?.contextUsage || currentState?.contextUsage || null;
+  const contextWindow = contextWindowFromSources(usage, currentState?.model?.contextWindow);
+  if (!contextWindow) return null;
+  const rawPercent = Number(usage?.percent);
+  const unknown = contextUsageUnknownAfterCompaction() || !Number.isFinite(rawPercent);
+  const rawTokens = Number(usage?.tokens);
+  return {
+    tokens: Number.isFinite(rawTokens) && rawTokens >= 0 ? rawTokens : null,
+    contextWindow,
+    percent: unknown ? null : Math.max(0, Math.min(100, rawPercent)),
+    unknown,
+    autoCompactionEnabled: footerAutoCompactionEnabled(),
+  };
+}
+
+function contextUsageDisplay(snapshot = contextUsageSnapshot()) {
+  if (!snapshot) return "Context unknown";
+  const windowText = formatFooterTokenCount(snapshot.contextWindow);
+  if (typeof snapshot.percent === "number") return `${snapshot.percent.toFixed(1)}% of ${windowText}`;
+  return `?/${windowText}`;
+}
+
+function contextUsageDetail(snapshot = contextUsageSnapshot()) {
+  if (!snapshot) return "Waiting for model context-window data.";
+  const tokenText = snapshot.tokens === null ? "tokens unknown" : `${formatFooterTokenCount(snapshot.tokens)} tokens`;
+  const autoText = snapshot.autoCompactionEnabled ? "auto-compaction on" : "auto-compaction off";
+  return `${tokenText} · ${formatFooterTokenCount(snapshot.contextWindow)} window · ${autoText}`;
+}
+
+function appendContextMeterFill(meter, snapshot) {
+  const fill = make("span", "context-meter-fill");
+  const percent = typeof snapshot?.percent === "number" ? snapshot.percent : 0;
+  fill.style.width = `${Math.max(0, Math.min(100, percent)).toFixed(1)}%`;
+  if (typeof snapshot?.percent === "number") {
+    const activeColor = contextUsageActiveColor(snapshot.percent);
+    fill.style.setProperty("--context-active-color", activeColor.color);
+    fill.style.setProperty("--context-active-glow", activeColor.glow);
+  }
+  meter.append(fill);
+}
+
+async function requestManualCompaction({ triggerButton = null } = {}) {
+  const tabContext = activeTabContext();
+  if (!tabContext.tabId) return;
+  const buttons = [...new Set([elements.compactButton, triggerButton].filter(Boolean))];
+  try {
+    for (const button of buttons) {
+      button.disabled = true;
+      button.textContent = "Compacting…";
+    }
+    setRunIndicatorActivity("Requesting context compaction…");
+    scrollChatToBottom({ force: true });
+    markContextUsageUnknownAfterCompaction(tabContext.tabId);
+    renderFooter();
+    renderContextMeter();
+    renderWorkspaceDashboard();
+    addEvent("manual compaction requested");
+    await api("/api/compact", { method: "POST", body: {}, tabId: tabContext.tabId });
+    if (!isCurrentTabContext(tabContext)) return;
+    scheduleRefreshState(120, tabContext);
+    scheduleRefreshMessages(600, tabContext);
+    scheduleRefreshFooter(600, tabContext);
+  } catch (error) {
+    if (isCurrentTabContext(tabContext)) {
+      clearContextUsageUnknownAfterCompaction(tabContext.tabId);
+      clearRunIndicatorActivity();
+      renderFooter();
+      renderContextMeter();
+      renderWorkspaceDashboard();
+      addEvent(error.message, "error");
+    }
+  } finally {
+    if (isCurrentTabContext(tabContext)) {
+      for (const button of buttons) {
+        button.disabled = !!currentState?.isCompacting;
+        button.textContent = button === elements.compactButton && currentState?.isCompacting ? "Compacting…" : button === elements.compactButton ? "Compact" : "Compact now";
+      }
+      renderContextMeter();
+      renderWorkspaceDashboard();
+    }
+  }
+}
+
+function renderContextMeter() {
+  const root = elements.contextMeterBar;
+  if (!root) return;
+  const tab = activeTab();
+  if (!tab) {
+    root.hidden = true;
+    root.replaceChildren();
+    return;
+  }
+  root.hidden = false;
+  const snapshot = contextUsageSnapshot();
+  if (!snapshot || typeof snapshot.percent !== "number" || snapshot.percent <= 50) {
+    root.hidden = true;
+    root.replaceChildren();
+    return;
+  }
+  const meter = make("div", `context-meter${snapshot?.unknown ? " unknown" : ""}`);
+  appendContextMeterFill(meter, snapshot);
+
+  const summary = make("div", "context-meter-summary");
+  summary.append(
+    make("strong", undefined, contextUsageDisplay(snapshot)),
+    make("span", "muted", contextUsageDetail(snapshot)),
+  );
+
+  const actions = make("div", "context-meter-actions");
+  const compact = make("button", "context-meter-compact", currentState?.isCompacting ? "Compacting…" : "Compact now");
+  compact.type = "button";
+  compact.disabled = !!currentState?.isCompacting;
+  compact.title = "Manually compact this tab's conversation context";
+  compact.addEventListener("click", () => requestManualCompaction({ triggerButton: compact }));
+  const auto = make("button", "context-meter-auto", footerAutoCompactionEnabled() ? "Auto on" : "Auto off");
+  auto.type = "button";
+  auto.setAttribute("aria-pressed", footerAutoCompactionEnabled() ? "true" : "false");
+  auto.disabled = footerAutoCompactionToggleInFlight;
+  auto.title = footerAutoCompactionToggleInFlight ? "Updating auto-compaction…" : footerAutoCompactionToggleAction();
+  auto.addEventListener("click", () => toggleFooterAutoCompaction());
+  actions.append(compact, auto);
+
+  root.replaceChildren(summary, meter, actions);
+}
+
+function dashboardMetric(label, value, detail = "") {
+  const item = make("div", "workspace-dashboard-metric");
+  item.append(make("span", "workspace-dashboard-metric-label", label), make("strong", undefined, value || "—"));
+  if (detail) item.append(make("span", "workspace-dashboard-metric-detail", detail));
+  return item;
+}
+
+function dashboardAction(label, handler, className = "") {
+  const button = make("button", `workspace-dashboard-action ${className}`.trim(), label);
+  button.type = "button";
+  button.addEventListener("click", handler);
+  return button;
+}
+
+function renderWorkspaceDashboard() {
+  const root = elements.workspaceDashboard;
+  if (!root) return;
+  const tab = activeTab();
+  const snapshot = contextUsageSnapshot();
+  const workspaceLabel = latestWorkspace?.displayCwd || (tab?.cwd ? normalizeDisplayPath(tab.cwd) : "Choose or create a tab to start");
+  const queueCount = Number(currentState?.pendingMessageCount || 0) || 0;
+  root.replaceChildren();
+
+  const header = make("div", "workspace-dashboard-header");
+  const title = make("div", "workspace-dashboard-title");
+  title.append(make("span", "workspace-dashboard-kicker", "Workspace"), make("h2", undefined, tab?.title || "Pi Web UI"), make("p", "muted", workspaceLabel));
+  const actions = make("div", "workspace-dashboard-actions");
+  actions.append(
+    dashboardAction("Command palette", () => openCommandPalette(), "primary"),
+    dashboardAction("New tab", () => createTerminalTab()),
+    dashboardAction("Resume", () => runNativeCommandMenu("/resume")),
+    dashboardAction("Model", () => runNativeCommandMenu("/model")),
+    dashboardAction("Settings", () => runNativeCommandMenu("/settings")),
+  );
+  header.append(title, actions);
+
+  const metrics = make("div", "workspace-dashboard-metrics");
+  metrics.append(
+    dashboardMetric("Model", currentState?.model ? shortModelLabel(currentState.model) : "loading…", currentState?.thinkingLevel ? `thinking ${currentState.thinkingLevel}` : ""),
+    dashboardMetric("Context", contextUsageDisplay(snapshot), contextUsageDetail(snapshot)),
+    dashboardMetric("Session", currentState?.sessionName || currentState?.sessionId || "loading…", currentState?.sessionFile || "in-memory"),
+    dashboardMetric("Queue", `${queueCount}`, queueCount === 1 ? "pending message" : "pending messages"),
+  );
+
+  const tabsPanel = make("div", "workspace-dashboard-tabs");
+  tabsPanel.append(make("span", "workspace-dashboard-tabs-title", `Open tabs (${tabs.length})`));
+  const tabList = make("div", "workspace-dashboard-tab-list");
+  for (const item of tabs.slice(0, 8)) {
+    const indicator = tabIndicator(item);
+    const button = make("button", `workspace-dashboard-tab activity-${indicator.state}${item.id === activeTabId ? " active" : ""}`);
+    button.type = "button";
+    button.title = `${item.title} · ${indicator.label}`;
+    button.append(make("span", "workspace-dashboard-tab-dot", indicator.glyph), make("span", undefined, item.title));
+    button.addEventListener("click", () => switchTab(item.id));
+    tabList.append(button);
+  }
+  if (tabs.length > 8) tabList.append(make("span", "workspace-dashboard-tab-more", `+${tabs.length - 8} more`));
+  tabsPanel.append(tabList);
+
+  root.append(header, metrics, tabsPanel);
+}
+
 function setFooterModelPickerOpen(open) {
   footerModelPickerOpen = !!open;
   if (footerModelPickerOpen) {
@@ -6783,6 +7293,8 @@ function renderStatus() {
   elements.compactButton.textContent = state?.isCompacting ? "Compacting…" : "Compact";
   syncModelSelectToState();
   renderFooter();
+  renderContextMeter();
+  renderWorkspaceDashboard();
   renderFeedbackTray();
 }
 
@@ -7726,130 +8238,851 @@ function renderAppRunnerWidget() {
   return node;
 }
 
-function renderWidgets() {
-  elements.widgetArea.replaceChildren();
-  const releaseOutput = renderReleaseNpmOutputWidget();
-  if (releaseOutput) elements.widgetArea.append(releaseOutput);
-  const releaseLog = renderReleaseNpmLogWidget();
-  if (releaseLog) elements.widgetArea.append(releaseLog);
-  const releaseAurOutput = renderReleaseAurOutputWidget();
-  if (releaseAurOutput) elements.widgetArea.append(releaseAurOutput);
-  const releaseAurLog = renderReleaseAurLogWidget();
-  if (releaseAurLog) elements.widgetArea.append(releaseAurLog);
-  const appRunnerWidget = renderAppRunnerWidget();
-  if (appRunnerWidget) elements.widgetArea.append(appRunnerWidget);
-
-  for (const [key, value] of widgets) {
-    const widgetFeatureId = optionalFeatureWidgetFeatureId(key);
-    if (widgetFeatureId && !isOptionalFeatureEnabled(widgetFeatureId)) continue;
-    if (widgetFeatureId && key !== "todo-progress") continue;
-    const lines = Array.isArray(value.widgetLines) ? value.widgetLines : [];
-    const specialized = key === "todo-progress" && isOptionalFeatureEnabled("todoProgressWidget") ? renderTodoProgressWidget(key, lines) : null;
-    if (specialized) {
-      elements.widgetArea.append(specialized);
-      continue;
-    }
+const STATS_OVERLAY_TABS = [
+  { id: "overview", label: "Overview" },
+  { id: "daily", label: "Daily" },
+  { id: "models", label: "Models" },
+  { id: "sessions", label: "Sessions" },
+  { id: "cost-cache", label: "Cost & cache" },
+  { id: "prompt", label: "Prompt/context" },
+  { id: "raw", label: "Command outputs" },
+];
 
-    const node = make("div", "widget");
-    const cleanLines = lines.map(stripAnsi);
-    node.textContent = `${key}\n${cleanLines.join("\n")}`;
-    elements.widgetArea.append(node);
-  }
+function statsNumber(value, fallback = 0) {
+  const number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
 }
 
-function setGitWorkflow(patch, { tabId = activeTabId } = {}) {
-  const workflow = gitWorkflowForTab(tabId);
-  if (!workflow) return null;
-  Object.assign(workflow, patch);
-  workflow.actionsDone = createGitWorkflowActionsDone(workflow.actionsDone);
-  if (patch.step && !("process" in patch)) workflow.process = gitWorkflowProcessForStep(workflow.step, workflow.process);
-  if (tabId === activeTabId) {
-    gitWorkflow = workflow;
-    renderGitWorkflow();
-  }
-  return workflow;
+function formatStatsTokens(value) {
+  const number = statsNumber(value);
+  const abs = Math.abs(number);
+  const sign = number < 0 ? "-" : "";
+  if (abs >= 1_000_000_000) return `${sign}${(abs / 1_000_000_000).toFixed(2)}B`;
+  if (abs >= 1_000_000) return `${sign}${(abs / 1_000_000).toFixed(2)}M`;
+  if (abs >= 10_000) return `${sign}${Math.round(abs / 1000)}k`;
+  if (abs >= 1000) return `${sign}${(abs / 1000).toFixed(1)}k`;
+  return `${number.toLocaleString()}`;
 }
 
-function isCurrentGitWorkflowRun(runId, tabId = activeTabId) {
-  const workflow = gitWorkflowForTab(tabId, { create: false });
-  return !!workflow?.active && workflow.runId === runId;
+function formatStatsCost(value) {
+  const cost = statsNumber(value);
+  if (cost <= 0) return "$0.000";
+  if (cost < 0.01) return `$${cost.toFixed(4)}`;
+  if (cost < 10) return `$${cost.toFixed(3)}`;
+  return `$${cost.toFixed(2)}`;
 }
 
-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 formatStatsPercent(value) {
+  return `${statsNumber(value).toFixed(1)}%`;
 }
 
-function formatGitCommandResult(result) {
-  if (!result) return "";
-  const lines = [`$ ${result.command || "git"}`];
-  if (result.stdout?.trim()) lines.push("", result.stdout.trimEnd());
-  if (result.stderr?.trim()) lines.push("", result.stderr.trimEnd());
-  if (result.exitCode !== 0 || result.signal || result.timedOut || result.cancelled) {
-    lines.push("", `[exit: ${result.exitCode ?? result.signal ?? "unknown"}${result.timedOut ? ", timed out" : ""}${result.cancelled ? ", cancelled" : ""}]`);
+function parseStatsWebuiPayloadRaw(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || parsed.type !== STATS_WEBUI_PAYLOAD_TYPE || parsed.version !== STATS_WEBUI_PAYLOAD_VERSION) return null;
+    return parsed;
+  } catch {
+    return null;
   }
-  return lines.join("\n");
 }
 
-function formatCommitMessagePreview(message) {
-  if (!message) return "No commit message loaded yet.";
-  return [`=== SHORT ===`, message.short || "(empty)", "", "=== LONG ===", message.long || "(empty)"].join("\n");
+function currentStatsOverlayPayload() {
+  if (isOptionalFeatureDisabled("statsCommand")) return null;
+  return parseStatsWebuiPayloadRaw(statusEntries.get(STATS_WEBUI_STATUS_KEY)) || latestStatsOverlayPayload;
 }
 
-function gitWorkflowMessageTitle(message) {
-  return String(message?.short || message?.long || "").split("\n").find((line) => line.trim())?.trim() || "Pull request";
+function statsScopeDaysFromPayload(payload) {
+  return payload?.scope?.mode === "range" && statsNumber(payload.scope.days) > 0 ? String(payload.scope.days) : "";
 }
 
-function slugifyGitBranchPart(value) {
-  return String(value || "")
-    .normalize("NFKD")
-    .replace(/[\u0300-\u036f]/g, "")
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "")
-    .slice(0, 48);
+function statsScopeValueFromPayload(payload) {
+  if (payload?.scope?.mode === "all") return "all";
+  const days = statsScopeDaysFromPayload(payload);
+  if (!days) return statsOverlayLastScope;
+  return ["14", "30", "90"].includes(days) ? days : "custom";
 }
 
-function defaultGitPrBranchName(message = gitWorkflow.message) {
-  const title = gitWorkflowMessageTitle(message);
-  const match = title.match(/^([a-z][a-z0-9-]*)(?:\([^)]*\))?:\s*(.+)$/i);
-  const type = slugifyGitBranchPart(match?.[1] || "feat") || "feat";
-  const summary = slugifyGitBranchPart(match?.[2] || title) || "feature";
-  return `${type}/${summary}`;
+function statsCustomDaysValue() {
+  const fromInput = Number.parseInt(elements.statsOverlayCustomDays?.value || "", 10);
+  if (Number.isFinite(fromInput) && fromInput > 0) return Math.max(1, Math.min(3650, fromInput));
+  const fromPayload = Number.parseInt(statsScopeDaysFromPayload(currentStatsOverlayPayload()), 10);
+  if (Number.isFinite(fromPayload) && fromPayload > 0) return Math.max(1, Math.min(3650, fromPayload));
+  return 14;
 }
 
-function formatGitPrPreview(pr) {
-  if (!pr) return "No PR description loaded yet.";
-  const header = [`=== PR DESCRIPTION ===`, `Branch: ${pr.branch || gitWorkflow.prBranch || "current branch"}`];
-  if (pr.path) header.push(`File: ${pr.path}`);
-  return [...header, "", pr.body || "(empty)"].join("\n");
+function statsScopeCommandArg() {
+  const value = elements.statsOverlayScope?.value || statsOverlayLastScope || "14";
+  if (value === "all") return "all";
+  const days = value === "custom" ? statsCustomDaysValue() : Math.max(1, Math.min(3650, Number.parseInt(value, 10) || 14));
+  return String(days);
 }
 
-function addGitWorkflowAction(label, handler, className = "", disabled = gitWorkflow.busy, tooltip = "") {
-  const button = make("button", className, label);
-  button.type = "button";
-  button.disabled = disabled;
-  if (tooltip) {
-    button.title = tooltip;
-    button.dataset.tooltip = tooltip;
-    button.setAttribute("aria-label", `${label}. ${tooltip.replace(/\s+/g, " ")}`);
+function syncStatsScopeControls(payload = currentStatsOverlayPayload()) {
+  if (!elements.statsOverlayScope) return;
+  const nextValue = payload ? statsScopeValueFromPayload(payload) : statsOverlayLastScope;
+  elements.statsOverlayScope.value = ["14", "30", "90", "all", "custom"].includes(nextValue) ? nextValue : "custom";
+  const custom = elements.statsOverlayScope.value === "custom";
+  if (elements.statsOverlayCustomDays) {
+    const payloadDays = statsScopeDaysFromPayload(payload);
+    if (payloadDays && !["14", "30", "90"].includes(payloadDays)) elements.statsOverlayCustomDays.value = payloadDays;
+    else if (!elements.statsOverlayCustomDays.value) elements.statsOverlayCustomDays.value = "14";
+    elements.statsOverlayCustomDays.hidden = !custom;
   }
-  button.addEventListener("click", handler);
-  elements.gitWorkflowActions.append(button);
-  return button;
 }
 
-function setGitPrDialogStatus(message = "", level = "muted") {
-  if (!elements.gitPrStatus) return;
-  elements.gitPrStatus.textContent = message;
-  elements.gitPrStatus.className = `git-pr-status ${level || "muted"}`;
+function statsPromptEstimateSourceLabel(estimate = {}) {
+  if (estimate.source === "export-html") return "export-backed";
+  if (estimate.source === "fallback") return "live fallback";
+  return estimate.source || "estimate";
 }
 
-function resolveGitPrDialog(value) {
-  const resolve = activeGitPrDialogResolve;
-  activeGitPrDialogResolve = null;
+function statsMetricCard(label, value, detail = "", tone = "") {
+  const node = make("div", `stats-overlay-card ${tone}`.trim());
+  node.append(make("span", "stats-overlay-card-label", label), make("strong", undefined, value));
+  if (detail) node.append(make("span", "stats-overlay-card-detail", detail));
+  return node;
+}
+
+function statsLineBlock(lines = []) {
+  const pre = make("pre", "stats-overlay-lines");
+  pre.textContent = (Array.isArray(lines) ? lines : []).map(stripAnsi).join("\n") || "No data.";
+  return pre;
+}
+
+function renderStatsTable(headers, rows, emptyText = "No data.") {
+  if (!rows.length) return make("p", "stats-overlay-empty muted", emptyText);
+  const wrapper = make("div", "stats-overlay-table-wrap");
+  const table = make("table", "stats-overlay-table");
+  const thead = make("thead");
+  const headRow = make("tr");
+  for (const header of headers) headRow.append(make("th", undefined, header));
+  thead.append(headRow);
+  const tbody = make("tbody");
+  for (const row of rows) {
+    const tr = make("tr");
+    for (const cell of row) tr.append(make("td", undefined, cell));
+    tbody.append(tr);
+  }
+  table.append(thead, tbody);
+  wrapper.append(table);
+  return wrapper;
+}
+
+function renderStatsBarRows(daily = []) {
+  const rows = daily.filter((row) => statsNumber(row.total) > 0 || statsNumber(row.cost) > 0);
+  if (!rows.length) return make("p", "stats-overlay-empty muted", "No non-zero usage in this range.");
+  const maxTokens = Math.max(1, ...rows.map((row) => statsNumber(row.total)));
+  const list = make("div", "stats-overlay-bars");
+  for (const row of rows) {
+    const tokenRatio = Math.max(0.015, statsNumber(row.total) / maxTokens);
+    const item = make("div", "stats-overlay-bar-row");
+    const bar = make("span", "stats-overlay-bar");
+    const fill = make("span", "stats-overlay-bar-fill");
+    fill.style.width = `${Math.min(100, tokenRatio * 100)}%`;
+    bar.append(fill);
+    item.append(
+      make("span", "stats-overlay-bar-day", row.day || "—"),
+      bar,
+      make("span", "stats-overlay-bar-value", `${formatStatsTokens(row.total)} tok`),
+      make("span", "stats-overlay-bar-cost", formatStatsCost(row.cost)),
+    );
+    list.append(item);
+  }
+  return list;
+}
+
+function renderStatsOverview(payload) {
+  const node = make("div", "stats-overlay-pane stats-overlay-overview");
+  const totals = payload?.totals || {};
+  const summary = payload?.summary || {};
+  const highest = summary.highestDay;
+  const cards = make("div", "stats-overlay-cards");
+  cards.append(
+    statsMetricCard("Total tokens", formatStatsTokens(totals.total), `↑${formatStatsTokens(totals.input)} ↓${formatStatsTokens(totals.output)}`, "tone-blue"),
+    statsMetricCard("Cost", formatStatsCost(totals.cost), `projected 30d ${formatStatsCost(summary.projected30DayCost)}`, "tone-green"),
+    statsMetricCard("Messages", String(statsNumber(totals.messages)), `${payload?.sessionCount ?? 0} sessions`, "tone-mauve"),
+    statsMetricCard("PI initial prompt", `~${formatStatsTokens(payload?.promptEstimate?.total)} tok`, `${statsPromptEstimateSourceLabel(payload?.promptEstimate)} · ${payload?.promptEstimate?.confidence || "estimate"}`, "tone-yellow"),
+    statsMetricCard("Cache hit", formatStatsPercent(summary.cacheHitRate), `reads ${formatStatsTokens(totals.cacheRead)} · writes ${formatStatsTokens(totals.cacheWrite)}`, "tone-teal"),
+    statsMetricCard("Active days", `${payload?.activeDayCount ?? 0}/${payload?.dayCount ?? 0}`, highest ? `peak ${highest.day} · ${formatStatsCost(highest.cost)}` : "no peak yet", "tone-pink"),
+  );
+  node.append(cards, make("h3", undefined, "Daily usage"), renderStatsBarRows(payload?.daily || []));
+  return node;
+}
+
+function renderStatsDaily(payload) {
+  const node = make("div", "stats-overlay-pane");
+  node.append(make("h3", undefined, "Daily token and cost trend"), renderStatsBarRows(payload?.daily || []));
+  node.append(renderStatsTable(
+    ["Day", "Tokens", "Cost", "Input", "Output", "Cache R/W", "Msgs"],
+    (payload?.daily || []).map((row) => [
+      row.day || "—",
+      formatStatsTokens(row.total),
+      formatStatsCost(row.cost),
+      formatStatsTokens(row.input),
+      formatStatsTokens(row.output),
+      `${formatStatsTokens(row.cacheRead)} / ${formatStatsTokens(row.cacheWrite)}`,
+      String(statsNumber(row.messages)),
+    ]),
+  ));
+  return node;
+}
+
+function renderStatsModels(payload) {
+  return renderStatsTable(
+    ["Model", "Tokens", "Token %", "Cost", "Spend %", "$/1M", "Avg out", "Msgs"],
+    (payload?.models || []).map((model) => [
+      model.model || "unknown",
+      formatStatsTokens(model.tokens),
+      formatStatsPercent(model.percent),
+      formatStatsCost(model.cost),
+      formatStatsPercent(model.costPercent),
+      formatStatsCost(model.avgCostPerMillion),
+      formatStatsTokens(Math.round(statsNumber(model.avgOutputTokens))),
+      String(statsNumber(model.messages)),
+    ]),
+    "No model usage in this range.",
+  );
+}
+
+function renderStatsSessions(payload) {
+  return renderStatsTable(
+    ["Day", "Session", "Cost", "Tokens", "Model"],
+    (payload?.expensiveSessions || []).map((session) => [
+      session.day || "—",
+      session.displayName || session.sessionId || "unknown",
+      formatStatsCost(session.cost),
+      formatStatsTokens(session.tokens),
+      session.model || "unknown",
+    ]),
+    "No session usage in this range.",
+  );
+}
+
+function renderStatsCostCache(payload) {
+  const node = make("div", "stats-overlay-pane");
+  const totals = payload?.totals || {};
+  const summary = payload?.summary || {};
+  const cards = make("div", "stats-overlay-cards compact");
+  cards.append(
+    statsMetricCard("Avg/day", formatStatsCost(summary.calendarAvgCost), "calendar average", "tone-green"),
+    statsMetricCard("Active avg", formatStatsCost(summary.activeAvgCost), "per active day", "tone-teal"),
+    statsMetricCard("Non-cache", formatStatsTokens(summary.nonCacheTokens), `${formatStatsTokens(totals.total)} total`, "tone-blue"),
+    statsMetricCard("Cache hit", formatStatsPercent(summary.cacheHitRate), `${formatStatsTokens(totals.cacheRead)} read tokens`, "tone-yellow"),
+  );
+  node.append(cards, make("h3", undefined, "Cost trend"), statsLineBlock(payload?.lines?.costTrend), make("h3", undefined, "Cache efficiency"), statsLineBlock(payload?.lines?.cache));
+  return node;
+}
+
+function statsCalibrationButton(label, mode, className = "") {
+  const button = make("button", className, statsOverlayCalibrationBusy === mode ? "Running…" : label);
+  button.type = "button";
+  button.disabled = statsOverlayLoading || !!statsOverlayCalibrationBusy;
+  button.addEventListener("click", () => runStatsCalibration(mode));
+  return button;
+}
+
+function renderStatsCalibrationPanel(payload) {
+  const estimate = payload?.promptEstimate || {};
+  const panel = make("section", "stats-overlay-calibration-panel");
+  const text = make("div", "stats-overlay-calibration-copy");
+  text.append(
+    make("strong", undefined, "Calibration"),
+    make("span", undefined, `${statsNumber(estimate.calibrationSamples)} sample${statsNumber(estimate.calibrationSamples) === 1 ? "" : "s"} · scale ×${statsNumber(estimate.calibrationMultiplier, 1).toFixed(2)} · ${statsPromptEstimateSourceLabel(estimate)}`),
+  );
+  if (estimate.warning) text.append(make("span", "warning", estimate.warning));
+  if (statsOverlayCalibrationMessage) text.append(make("span", "muted", statsOverlayCalibrationMessage));
+  const actions = make("div", "stats-overlay-calibration-actions");
+  actions.append(
+    statsCalibrationButton("Calibrate current", "current"),
+    statsCalibrationButton("Start probe", "probe", "primary"),
+  );
+  panel.append(text, actions);
+  return panel;
+}
+
+function renderStatsPrompt(payload) {
+  const node = make("div", "stats-overlay-pane");
+  const cards = make("div", "stats-overlay-cards compact");
+  cards.append(
+    statsMetricCard("PI estimate", `~${formatStatsTokens(payload?.promptEstimate?.total)} tok`, `${statsPromptEstimateSourceLabel(payload?.promptEstimate)} · ${payload?.promptEstimate?.confidence || "estimate"}`, "tone-yellow"),
+    statsMetricCard("Prompt chars", statsNumber(payload?.promptEstimate?.systemPromptChars).toLocaleString(), `${statsNumber(payload?.promptEstimate?.activeToolSchemas)} active tool schemas`, "tone-blue"),
+    statsMetricCard("Calibration", `×${statsNumber(payload?.promptEstimate?.calibrationMultiplier, 1).toFixed(2)}`, `${statsNumber(payload?.promptEstimate?.calibrationSamples)} samples`, "tone-teal"),
+    statsMetricCard("Attempts", String(statsNumber(payload?.promptEstimate?.attempts)), payload?.promptEstimate?.settled ? "settled" : "live fallback", "tone-mauve"),
+  );
+  node.append(
+    cards,
+    renderStatsCalibrationPanel(payload),
+    make("h3", undefined, "PI prompt estimate"),
+    statsLineBlock(payload?.lines?.promptInjection),
+    make("h3", undefined, "Detailed prompt snapshot"),
+    statsLineBlock(payload?.lines?.promptDetailed),
+    make("h3", undefined, "Current context token breakdown"),
+    statsLineBlock(payload?.lines?.tokenBreakdown),
+  );
+  return node;
+}
+
+function statsCommandOutputSection(title, command, description, lines = []) {
+  const section = make("section", "stats-overlay-command-section");
+  const header = make("div", "stats-overlay-command-header");
+  const text = make("div", "stats-overlay-command-title");
+  text.append(make("h3", undefined, title), make("p", "muted", description));
+  header.append(text, make("code", "stats-overlay-command-pill", command));
+  section.append(header, statsLineBlock(lines));
+  return section;
+}
+
+function renderStatsRaw(payload) {
+  const node = make("div", "stats-overlay-pane");
+  node.append(
+    statsCommandOutputSection("Daily usage graph", "/stats-last [days|all]", "Non-zero daily token/cost graph for the selected range.", payload?.lines?.graph),
+    statsCommandOutputSection("Model comparison", "/stats-model-compare [days|all]", "Token share, spend share, average cost, and average output by model.", payload?.lines?.modelComparison),
+    statsCommandOutputSection("Most expensive sessions", "/stats-most-expense [days|all]", "Highest-cost sessions in the selected range.", payload?.lines?.expensiveSessions),
+    statsCommandOutputSection("Cost trend", "/stats-cost-trend [days|all]", "Daily averages, 30-day projection, highest day, and latest active day.", payload?.lines?.costTrend),
+    statsCommandOutputSection("Cache efficiency", "/stats-cache [days|all]", "Cache hit rate, cache read/write tokens, estimated savings, and token mix.", payload?.lines?.cache),
+    statsCommandOutputSection("PI prompt breakdown", "/stats-pi detailed", "Export-backed initial prompt estimate with detailed prompt snapshot sections.", [...(payload?.lines?.promptInjection || []), "", ...(payload?.lines?.promptDetailed || [])]),
+  );
+  return node;
+}
+
+function renderStatsOverlayPane(payload) {
+  if (!payload) return make("p", "stats-overlay-empty muted", statsOverlayLoading ? "Loading stats…" : "No stats payload loaded yet.");
+  switch (statsOverlayActiveTab) {
+    case "daily": return renderStatsDaily(payload);
+    case "models": return renderStatsModels(payload);
+    case "sessions": return renderStatsSessions(payload);
+    case "cost-cache": return renderStatsCostCache(payload);
+    case "prompt": return renderStatsPrompt(payload);
+    case "raw": return renderStatsRaw(payload);
+    default: return renderStatsOverview(payload);
+  }
+}
+
+function renderStatsOverlay() {
+  const payload = currentStatsOverlayPayload();
+  if (!elements.statsOverlayDialog) return;
+
+  if (payload) statsOverlayLastScope = statsScopeValueFromPayload(payload);
+  syncStatsScopeControls(statsOverlayLoading ? null : payload);
+
+  const generated = payload?.generatedAt ? new Date(payload.generatedAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" }) : "not loaded";
+  elements.statsOverlaySubtitle.textContent = payload
+    ? `${payload.scopeLabel || "stats"} · ${payload.sessionCount ?? 0} sessions · updated ${generated}`
+    : "Run stats to load the browser dashboard.";
+
+  elements.statsOverlayStatus.textContent = statsOverlayError || (statsOverlayLoading ? "Loading stats from the Pi stats extension…" : statsOverlayCalibrationMessage || (payload ? "" : "No stats payload loaded yet."));
+  elements.statsOverlayStatus.hidden = !elements.statsOverlayStatus.textContent;
+  elements.statsOverlayStatus.classList.toggle("error", !!statsOverlayError);
+
+  elements.statsOverlayTabs.replaceChildren();
+  for (const tab of STATS_OVERLAY_TABS) {
+    const button = make("button", tab.id === statsOverlayActiveTab ? "active" : "", tab.label);
+    button.type = "button";
+    button.setAttribute("role", "tab");
+    button.setAttribute("aria-selected", tab.id === statsOverlayActiveTab ? "true" : "false");
+    button.addEventListener("click", () => {
+      statsOverlayActiveTab = tab.id;
+      renderStatsOverlay();
+    });
+    elements.statsOverlayTabs.append(button);
+  }
+
+  elements.statsOverlayRefreshButton.disabled = statsOverlayLoading;
+  elements.statsOverlayBody.replaceChildren(renderStatsOverlayPane(payload));
+}
+
+function scheduleStatsRefreshAfterCalibration(tabContext, delays = [1200]) {
+  for (const delayMs of delays) {
+    setTimeout(() => {
+      if (!isCurrentTabContext(tabContext)) return;
+      requestStatsOverlayRefresh();
+    }, delayMs);
+  }
+}
+
+async function runStatsCalibration(mode) {
+  const tabContext = activeTabContext();
+  if (!tabContext.tabId) return;
+  const commandName = resolveAvailableCommandName("calibrate", { rpcOnly: true });
+  if (!commandName) {
+    statsOverlayError = "Calibration command unavailable: /calibrate is not loaded in this Pi tab.";
+    renderStatsOverlay();
+    return;
+  }
+  if (mode === "probe" && !confirm("Start an isolated calibration probe? This sends one tiny model request and may incur provider token usage.")) return;
+
+  const command = mode === "current" ? `/${commandName} current` : `/${commandName}`;
+  statsOverlayCalibrationBusy = mode;
+  statsOverlayCalibrationMessage = mode === "current"
+    ? "Calibrating from the current session…"
+    : "Starting isolated calibration probe…";
+  statsOverlayError = "";
+  renderStatsOverlay();
+  try {
+    await sendPrompt("prompt", command, { targetTabId: tabContext.tabId, throwOnError: true });
+    statsOverlayCalibrationMessage = mode === "current"
+      ? "Calibration command finished; refreshing stats…"
+      : "Probe started; stats will refresh after the probe response is recorded…";
+    statsOverlayCalibrationBusy = "";
+    renderStatsOverlay();
+    scheduleStatsRefreshAfterCalibration(tabContext, mode === "probe" ? [5000, 14000] : [1000]);
+  } catch (error) {
+    if (!isCurrentTabContext(tabContext)) return;
+    statsOverlayCalibrationBusy = "";
+    statsOverlayCalibrationMessage = "";
+    statsOverlayError = error.message || String(error);
+    renderStatsOverlay();
+  }
+}
+
+async function requestStatsOverlayRefresh() {
+  const tabContext = activeTabContext();
+  if (!tabContext.tabId) return;
+  const statsWebuiCommand = resolveAvailableCommandName("stats-webui", { rpcOnly: true });
+  const fallbackStatsCommand = resolveAvailableCommandName("stats", { rpcOnly: true });
+  const scopeArg = statsScopeCommandArg();
+  const command = statsWebuiCommand
+    ? `/${statsWebuiCommand}${scopeArg ? ` ${scopeArg}` : ""}`
+    : fallbackStatsCommand
+      ? `/${fallbackStatsCommand}${scopeArg ? ` ${scopeArg}` : ""} --webui`
+      : "";
+  if (!command) {
+    statsOverlayError = "Stats command unavailable: enable/install @firstpick/pi-extension-stats in Optional features.";
+    statsOverlayLoading = false;
+    renderStatsOverlay();
+    return;
+  }
+
+  statsOverlayLastScope = scopeArg;
+  statsOverlayLoading = true;
+  statsOverlayError = "";
+  renderStatsOverlay();
+  try {
+    await sendPrompt("prompt", command, { targetTabId: tabContext.tabId, throwOnError: true });
+    setTimeout(() => {
+      if (!isCurrentTabContext(tabContext) || !statsOverlayLoading) return;
+      statsOverlayLoading = false;
+      if (!currentStatsOverlayPayload()) statsOverlayError = "Stats command returned without a WebUI payload. Try /reload, then open Stats again.";
+      renderStatsOverlay();
+    }, 2500);
+  } catch (error) {
+    if (!isCurrentTabContext(tabContext)) return;
+    statsOverlayLoading = false;
+    statsOverlayError = error.message || String(error);
+    renderStatsOverlay();
+  }
+}
+
+function openStatsOverlay({ refresh = true } = {}) {
+  setComposerActionsOpen(false);
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
+  setOptionsMenuOpen(false);
+  statsOverlayError = "";
+  if (!elements.statsOverlayDialog.open) elements.statsOverlayDialog.showModal();
+  renderStatsOverlay();
+  if (refresh || !currentStatsOverlayPayload()) requestStatsOverlayRefresh();
+}
+
+function handleStatsWebuiStatus(statusText) {
+  const payload = parseStatsWebuiPayloadRaw(statusText);
+  if (!payload) {
+    if (elements.statsOverlayDialog?.open) {
+      statsOverlayLoading = false;
+      renderStatsOverlay();
+    }
+    return;
+  }
+  latestStatsOverlayPayload = payload;
+  statsOverlayLoading = false;
+  statsOverlayError = "";
+  statsOverlayCalibrationMessage = "";
+  statsOverlayLastScope = statsScopeValueFromPayload(payload);
+  if (payload.open && !elements.statsOverlayDialog?.open) elements.statsOverlayDialog?.showModal();
+  if (payload.open || elements.statsOverlayDialog?.open) renderStatsOverlay();
+}
+
+function renderWidgets() {
+  elements.widgetArea.replaceChildren();
+  const releaseOutput = renderReleaseNpmOutputWidget();
+  if (releaseOutput) elements.widgetArea.append(releaseOutput);
+  const releaseLog = renderReleaseNpmLogWidget();
+  if (releaseLog) elements.widgetArea.append(releaseLog);
+  const releaseAurOutput = renderReleaseAurOutputWidget();
+  if (releaseAurOutput) elements.widgetArea.append(releaseAurOutput);
+  const releaseAurLog = renderReleaseAurLogWidget();
+  if (releaseAurLog) elements.widgetArea.append(releaseAurLog);
+  const appRunnerWidget = renderAppRunnerWidget();
+  if (appRunnerWidget) elements.widgetArea.append(appRunnerWidget);
+
+  for (const [key, value] of widgets) {
+    const widgetFeatureId = optionalFeatureWidgetFeatureId(key);
+    if (widgetFeatureId && !isOptionalFeatureEnabled(widgetFeatureId)) continue;
+    if (widgetFeatureId && key !== "todo-progress") continue;
+    const lines = Array.isArray(value.widgetLines) ? value.widgetLines : [];
+    const specialized = key === "todo-progress" && isOptionalFeatureEnabled("todoProgressWidget") ? renderTodoProgressWidget(key, lines) : null;
+    if (specialized) {
+      elements.widgetArea.append(specialized);
+      continue;
+    }
+
+    const node = make("div", "widget");
+    const cleanLines = lines.map(stripAnsi);
+    node.textContent = `${key}\n${cleanLines.join("\n")}`;
+    elements.widgetArea.append(node);
+  }
+}
+
+function setGitWorkflow(patch, { tabId = activeTabId } = {}) {
+  const workflow = gitWorkflowForTab(tabId);
+  if (!workflow) return null;
+  Object.assign(workflow, patch);
+  workflow.actionsDone = createGitWorkflowActionsDone(workflow.actionsDone);
+  if (patch.step && !("process" in patch)) workflow.process = gitWorkflowProcessForStep(workflow.step, workflow.process);
+  if (tabId === activeTabId) {
+    gitWorkflow = workflow;
+    renderGitWorkflow();
+  }
+  return workflow;
+}
+
+function isCurrentGitWorkflowRun(runId, tabId = activeTabId) {
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  return !!workflow?.active && workflow.runId === runId;
+}
+
+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) {
+  if (!result) return "";
+  const lines = [`$ ${result.command || "git"}`];
+  if (result.stdout?.trim()) lines.push("", result.stdout.trimEnd());
+  if (result.stderr?.trim()) lines.push("", result.stderr.trimEnd());
+  if (result.exitCode !== 0 || result.signal || result.timedOut || result.cancelled) {
+    lines.push("", `[exit: ${result.exitCode ?? result.signal ?? "unknown"}${result.timedOut ? ", timed out" : ""}${result.cancelled ? ", cancelled" : ""}]`);
+  }
+  return lines.join("\n");
+}
+
+function formatCommitMessagePreview(message) {
+  if (!message) return "No commit message loaded yet.";
+  return [`=== SHORT ===`, message.short || "(empty)", "", "=== LONG ===", message.long || "(empty)"].join("\n");
+}
+
+function formatInputCommitMessagePreview(message) {
+  return [`=== INPUT ===`, String(message || "").trim() || "(empty)"].join("\n");
+}
+
+function gitWorkflowMessageTitle(message) {
+  return String(message?.short || message?.long || "").split("\n").find((line) => line.trim())?.trim() || "Pull request";
+}
+
+function slugifyGitBranchPart(value) {
+  return String(value || "")
+    .normalize("NFKD")
+    .replace(/[\u0300-\u036f]/g, "")
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "")
+    .slice(0, 48);
+}
+
+function defaultGitPrBranchName(message = gitWorkflow.message) {
+  const title = gitWorkflowMessageTitle(message);
+  const match = title.match(/^([a-z][a-z0-9-]*)(?:\([^)]*\))?:\s*(.+)$/i);
+  const type = slugifyGitBranchPart(match?.[1] || "feat") || "feat";
+  const summary = slugifyGitBranchPart(match?.[2] || title) || "feature";
+  return `${type}/${summary}`;
+}
+
+function formatGitPrPreview(pr) {
+  if (!pr) return "No PR description loaded yet.";
+  const header = [`=== PR DESCRIPTION ===`, `Branch: ${pr.branch || gitWorkflow.prBranch || "current branch"}`];
+  if (pr.path) header.push(`File: ${pr.path}`);
+  return [...header, "", pr.body || "(empty)"].join("\n");
+}
+
+function readGitFooterStatusSetup() {
+  try {
+    const parsed = JSON.parse(localStorage.getItem(GIT_FOOTER_STATUS_SETUP_STORAGE_KEY) || "{}");
+    const githubUsername = typeof parsed?.githubUsername === "string" ? parsed.githubUsername.trim() : "";
+    return { githubUsername };
+  } catch {
+    return { githubUsername: "" };
+  }
+}
+
+function cleanGitHubUsernameInput(value) {
+  const username = String(value || "").trim().replace(/^@+/, "");
+  if (!username) throw new Error("GitHub username is required.");
+  if (username.length > 39 || !/^[A-Za-z0-9](?:[A-Za-z0-9-]*[A-Za-z0-9])?$/.test(username) || username.includes("--")) {
+    throw new Error("GitHub username must be 1-39 letters/numbers/hyphens, without leading/trailing or repeated hyphens.");
+  }
+  return username;
+}
+
+function cleanGitHubRepoNameInput(value) {
+  let repoName = String(value || "").trim();
+  const githubUrlMatch = repoName.match(/github\.com[:/][^/\s]+\/([^/\s]+?)(?:\.git)?\/?$/i);
+  if (githubUrlMatch) repoName = githubUrlMatch[1];
+  if (repoName.includes("/")) repoName = repoName.split("/").filter(Boolean).pop() || "";
+  repoName = repoName.replace(/\.git$/i, "");
+  if (!repoName) throw new Error("GitHub repository name is required.");
+  if (repoName.length > 100 || repoName === "." || repoName === ".." || !/^[A-Za-z0-9._-]+$/.test(repoName)) {
+    throw new Error("GitHub repository name may only contain letters, numbers, dots, underscores, and hyphens.");
+  }
+  return repoName;
+}
+
+function writeGitFooterStatusSetup(setup) {
+  try {
+    localStorage.setItem(GIT_FOOTER_STATUS_SETUP_STORAGE_KEY, JSON.stringify({ githubUsername: setup.githubUsername }));
+  } catch {
+    addEvent("Could not persist git-footer-status-setup in browser storage; it will be asked again next time.", "warn");
+  }
+}
+
+function cleanGitInitStack(value) {
+  return String(value || "").replace(/\s+/g, " ").trim().slice(0, 160);
+}
+
+function readStoredGitInitStack() {
+  try {
+    return cleanGitInitStack(localStorage.getItem(GIT_INIT_STACK_STORAGE_KEY) || "");
+  } catch {
+    return "";
+  }
+}
+
+function writeStoredGitInitStack(stack) {
+  const cleanStack = cleanGitInitStack(stack);
+  try {
+    if (cleanStack) localStorage.setItem(GIT_INIT_STACK_STORAGE_KEY, cleanStack);
+    else localStorage.removeItem(GIT_INIT_STACK_STORAGE_KEY);
+  } catch {
+    addEvent("Could not persist the repository stack in browser storage.", "warn");
+  }
+  return cleanStack;
+}
+
+function gitInitStackDisplay(stack = "") {
+  const cleanStack = cleanGitInitStack(stack);
+  return cleanStack || "Auto-detect from codebase";
+}
+
+function gitInitFilesStatusSummary(status) {
+  if (!status) return "README.md and .gitignore status: not checked yet.";
+  const readme = status.readmeExists ? "README.md exists; it will be staged without overwriting." : "README.md is missing; it will be created.";
+  const gitignore = status.gitignoreExists ? ".gitignore exists; it will be staged without overwriting." : ".gitignore is missing; Pi will be prompted to generate it.";
+  const detected = status.detectedStack ? `Detected stack hint: ${status.detectedStack}` : "Detected stack hint: none yet.";
+  return [readme, gitignore, detected].join("\n");
+}
+
+function configureGitFooterStatusSetup({ force = true } = {}) {
+  const current = readGitFooterStatusSetup();
+  if (current.githubUsername && !force) return current;
+  const value = window.prompt("git-footer-status-setup: GitHub username for origin remotes", current.githubUsername || "");
+  if (value === null) return null;
+  try {
+    const setup = { githubUsername: cleanGitHubUsernameInput(value) };
+    writeGitFooterStatusSetup(setup);
+    addEvent(`git-footer-status-setup saved GitHub username ${setup.githubUsername}`, "success");
+    return setup;
+  } catch (error) {
+    addEvent(error.message || String(error), "error");
+    return null;
+  }
+}
+
+function ensureGitFooterStatusSetup() {
+  const setup = readGitFooterStatusSetup();
+  if (setup.githubUsername) return setup;
+  return configureGitFooterStatusSetup({ force: true });
+}
+
+function defaultGitInitRepoName(tab = activeTab()) {
+  const cwd = latestWorkspace?.cwd || tab?.cwd || latestWorkspace?.displayCwd || "";
+  const lastPart = String(cwd).split(/[\\/]+/).filter(Boolean).pop() || "new-repo";
+  try {
+    return cleanGitHubRepoNameInput(lastPart);
+  } catch {
+    return "new-repo";
+  }
+}
+
+function gitInitRemoteUrl(username, repoName) {
+  return `https://github.com/${username}/${repoName}.git`;
+}
+
+function promptGitInitRepoName(workflow = gitWorkflow) {
+  const fallback = workflow?.repoName || defaultGitInitRepoName();
+  const value = window.prompt("GitHub repository name for origin remote", fallback);
+  if (value === null) return null;
+  try {
+    return cleanGitHubRepoNameInput(value);
+  } catch (error) {
+    addEvent(error.message || String(error), "error");
+    return null;
+  }
+}
+
+function ensureGitInitRemoteDetails(tabId = activeTabId) {
+  const workflow = gitWorkflowForTab(tabId, { create: false }) || gitWorkflow;
+  const setup = ensureGitFooterStatusSetup();
+  if (!setup?.githubUsername) return null;
+  const repoName = workflow.repoName ? cleanGitHubRepoNameInput(workflow.repoName) : promptGitInitRepoName(workflow);
+  if (!repoName) return null;
+  const remoteUrl = gitInitRemoteUrl(setup.githubUsername, repoName);
+  setGitWorkflow({ githubUsername: setup.githubUsername, repoName, remoteUrl }, { tabId });
+  return { username: setup.githubUsername, repoName, remoteUrl };
+}
+
+function gitInitWorkflowSetupSummary(workflow = gitWorkflow) {
+  const username = workflow.githubUsername || readGitFooterStatusSetup().githubUsername || "not set";
+  const repoName = workflow.repoName || defaultGitInitRepoName();
+  const remoteUrl = username !== "not set" ? gitInitRemoteUrl(username, repoName) : "not configured";
+  return [`GitHub username: ${username}`, `Repository name: ${repoName}`, `Stack: ${gitInitStackDisplay(workflow.stack)}`, `Origin URL: ${remoteUrl}`].join("\n");
+}
+
+function addGitWorkflowAction(label, handler, className = "", disabled = gitWorkflow.busy, tooltip = "") {
+  const button = make("button", className, label);
+  button.type = "button";
+  button.disabled = disabled;
+  if (tooltip) {
+    button.title = tooltip;
+    button.dataset.tooltip = tooltip;
+    button.setAttribute("aria-label", `${label}. ${tooltip.replace(/\s+/g, " ")}`);
+  }
+  button.addEventListener("click", handler);
+  elements.gitWorkflowActions.append(button);
+  return button;
+}
+
+function renderGitInitStackInput() {
+  const tabId = gitWorkflowActionTabId();
+  const workflow = gitWorkflowForTab(tabId, { create: false }) || gitWorkflow;
+  const storedStack = workflow?.stack || readStoredGitInitStack();
+  const row = make("div", "git-workflow-message-input-row git-workflow-stack-input-row");
+
+  const selectField = make("label", "git-workflow-message-input-field");
+  selectField.setAttribute("for", "gitWorkflowStackSelect");
+  selectField.append(make("span", "git-workflow-message-input-label", "Stack preset"));
+  const select = make("select", "git-workflow-message-input");
+  select.id = "gitWorkflowStackSelect";
+  for (const option of GIT_INIT_STACK_OPTIONS) {
+    const node = make("option", undefined, option.label);
+    node.value = option.value;
+    select.append(node);
+  }
+  const matching = GIT_INIT_STACK_OPTIONS.some((option) => option.value === storedStack);
+  select.value = matching ? storedStack : storedStack ? "Custom" : "";
+  selectField.append(select);
+
+  const inputField = make("label", "git-workflow-message-input-field");
+  inputField.setAttribute("for", "gitWorkflowStackInput");
+  inputField.append(make("span", "git-workflow-message-input-label", "Stack input"));
+  const input = make("input", "git-workflow-message-input");
+  input.id = "gitWorkflowStackInput";
+  input.type = "text";
+  input.value = storedStack;
+  input.placeholder = "e.g. Node.js + Vite + React, Python + FastAPI, Rust CLI";
+  input.autocomplete = "off";
+  input.spellcheck = false;
+  inputField.append(input);
+
+  const saveButton = make("button", "git-workflow-message-input-commit", "Save stack");
+  saveButton.type = "button";
+  saveButton.title = GIT_INIT_STACK_TOOLTIP;
+  saveButton.dataset.tooltip = GIT_INIT_STACK_TOOLTIP;
+  const saveStack = () => {
+    const stack = writeStoredGitInitStack(input.value);
+    const current = gitWorkflowForTab(tabId, { create: false });
+    if (!current) return;
+    setGitWorkflow({ step: "readme", stack, ...gitWorkflowActionDonePatch(current, "stack"), output: `Stack saved: ${gitInitStackDisplay(stack)}\n\nNext: check README.md and .gitignore before staging. ${stack ? "Pi will use this stack for .gitignore." : "Pi will inspect the codebase and fall back to sane defaults for .gitignore."}` }, { tabId });
+  };
+  select.addEventListener("change", () => {
+    if (select.value === "Custom") {
+      input.focus();
+      input.select();
+    } else {
+      input.value = select.value;
+    }
+  });
+  input.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    saveStack();
+  });
+  saveButton.addEventListener("click", saveStack);
+  row.append(selectField, inputField, saveButton);
+  elements.gitWorkflowActions.append(row);
+}
+
+function renderGitWorkflowManualCommitInput() {
+  const tabId = gitWorkflowActionTabId();
+  const workflow = gitWorkflowForTab(tabId, { create: false }) || gitWorkflow;
+  const defaultCommitMessage = String(workflow?.manualCommitMessageDefault || "").trim();
+  const row = make("div", "git-workflow-message-input-row");
+  const field = make("label", "git-workflow-message-input-field");
+  field.setAttribute("for", "gitWorkflowManualCommitMessage");
+  field.append(make("span", "git-workflow-message-input-label", "Input commit message"));
+
+  const input = make("input", "git-workflow-message-input");
+  input.id = "gitWorkflowManualCommitMessage";
+  input.type = "text";
+  input.value = workflow?.manualCommitMessage || "";
+  input.placeholder = defaultCommitMessage || "Type a commit message to use instead of short/long";
+  input.autocomplete = "off";
+  input.spellcheck = true;
+
+  const commitButton = make("button", "git-workflow-message-input-commit", "Commit input");
+  commitButton.type = "button";
+  const updateCommitState = () => {
+    const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+    const message = String(input.value || "").trim() || String(currentWorkflow?.manualCommitMessageDefault || "").trim();
+    commitButton.disabled = !currentWorkflow || !!currentWorkflow.busy || !message;
+    if (message && !String(input.value || "").trim()) commitButton.title = `Use default commit message: ${message}`;
+    else commitButton.removeAttribute("title");
+  };
+  input.addEventListener("input", () => {
+    const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+    if (currentWorkflow) currentWorkflow.manualCommitMessage = input.value;
+    updateCommitState();
+  });
+  input.addEventListener("keydown", (event) => {
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    if (!commitButton.disabled) commitGitWorkflow("input", tabId);
+  });
+  commitButton.addEventListener("click", () => {
+    const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+    if (currentWorkflow) currentWorkflow.manualCommitMessage = input.value;
+    commitGitWorkflow("input", tabId);
+  });
+  updateCommitState();
+  loadGitWorkflowDefaultCommitMessage({ runId: workflow?.runId, tabId });
+
+  field.append(input);
+  row.append(field, commitButton);
+  elements.gitWorkflowActions.append(row);
+}
+
+function setGitPrDialogStatus(message = "", level = "muted") {
+  if (!elements.gitPrStatus) return;
+  elements.gitPrStatus.textContent = message;
+  elements.gitPrStatus.className = `git-pr-status ${level || "muted"}`;
+}
+
+function resolveGitPrDialog(value) {
+  const resolve = activeGitPrDialogResolve;
+  activeGitPrDialogResolve = null;
   if (elements.gitPrDialog?.open) elements.gitPrDialog.close();
   if (resolve) resolve(value);
 }
@@ -7869,6 +9102,29 @@ function openGitPrReviewDialog(pr, { title = "" } = {}) {
 
 function gitWorkflowProcessForStep(step = gitWorkflow.step, fallback = gitWorkflow.process || "stage") {
   switch (step) {
+    case "initSetup":
+    case "initRepo":
+    case "initializingRepo":
+      return "init";
+    case "initStack":
+      return "stack";
+    case "readme":
+    case "readmeCreating":
+    case "readmeGenerating":
+    case "gitignoreGenerating":
+      return "readme";
+    case "initialCommit":
+    case "initialCommitting":
+      return "commit";
+    case "mainBranch":
+    case "mainBranching":
+      return "branch";
+    case "remote":
+    case "remoteAdding":
+      return "remote";
+    case "initialPush":
+    case "initialPushing":
+      return "push";
     case "generate":
     case "generating":
       return "message";
@@ -7889,26 +9145,89 @@ function gitWorkflowProcessForStep(step = gitWorkflow.step, fallback = gitWorkfl
       return "stage";
     case "cancelled":
     case "error":
-      return GIT_WORKFLOW_PROCESS_VALUES.has(fallback) ? fallback : "stage";
+      return GIT_WORKFLOW_PROCESS_VALUES.has(fallback) || GIT_INIT_WORKFLOW_PROCESS_VALUES.has(fallback) ? fallback : "stage";
     default:
       return "stage";
   }
 }
 
+function selectGitInitWorkflowProcess(processValue, tabId, workflow) {
+  const process = GIT_INIT_WORKFLOW_PROCESS_VALUES.has(processValue) ? processValue : "init";
+  workflow.runId += 1;
+  const username = workflow.githubUsername || readGitFooterStatusSetup().githubUsername || "";
+  const repoName = workflow.repoName || defaultGitInitRepoName();
+  const remoteUrl = username ? gitInitRemoteUrl(username, repoName) : "";
+  const stack = workflow.stack || readStoredGitInitStack();
+  const base = {
+    mode: "initRepo",
+    active: true,
+    process,
+    busy: false,
+    error: "",
+    githubUsername: username,
+    repoName,
+    remoteUrl,
+    stack,
+    readmeRequestedAt: 0,
+    gitignoreRequestedAt: 0,
+    initFilesStatus: null,
+    message: null,
+    manualCommitMessage: "",
+    ...resetGitWorkflowManualCommitDefaultPatch(),
+    messageRequestedAt: 0,
+    branchName: "",
+    branchNameRequestedAt: 0,
+    prMode: false,
+    prBranch: "",
+    pr: null,
+    prRequestedAt: 0,
+  };
+
+  if (process === "init") {
+    setGitWorkflow({ ...base, step: username ? "initRepo" : "initSetup", output: username ? `Ready to initialize a Git repository.\n\n${gitInitWorkflowSetupSummary(base)}` : "No GitHub username stored yet. Run git-footer-status-setup first." }, { tabId });
+    return;
+  }
+  if (process === "stack") {
+    setGitWorkflow({ ...base, step: "initStack", output: `Choose a repository stack before README/.gitignore preparation.\n\nCurrent stack: ${gitInitStackDisplay(stack)}` }, { tabId });
+    return;
+  }
+  if (process === "readme") {
+    setGitWorkflow({ ...base, step: "readme", output: "Ready to check README.md and .gitignore before staging them." }, { tabId });
+    return;
+  }
+  if (process === "commit") {
+    setGitWorkflow({ ...base, step: "initialCommit", output: "Ready to create the initial commit with message: Initial commit." }, { tabId });
+    return;
+  }
+  if (process === "branch") {
+    setGitWorkflow({ ...base, step: "mainBranch", output: "Ready to rename the current branch to main with git branch -M main." }, { tabId });
+    return;
+  }
+  if (process === "remote") {
+    setGitWorkflow({ ...base, step: "remote", output: `Ready to add origin.\n\n${gitInitWorkflowSetupSummary(base)}` }, { tabId });
+    return;
+  }
+  setGitWorkflow({ ...base, step: "initialPush", output: "Ready to run git push -u origin main." }, { tabId });
+}
+
 function selectGitWorkflowProcess(processValue, tabId = gitWorkflowActionTabId()) {
   const workflow = gitWorkflowForTab(tabId);
   if (!workflow) return;
+  if (workflow.mode === "initRepo") {
+    selectGitInitWorkflowProcess(processValue, tabId, workflow);
+    return;
+  }
   const process = GIT_WORKFLOW_PROCESS_VALUES.has(processValue) ? processValue : "stage";
   workflow.runId += 1;
   const runId = workflow.runId;
-  const base = { active: true, process, busy: false, error: "", messageRequestedAt: 0, branchName: "", branchNameRequestedAt: 0, prMode: false, prBranch: "", pr: null, prRequestedAt: 0 };
+  const base = { mode: "standard", active: true, process, busy: false, error: "", githubUsername: "", repoName: "", remoteUrl: "", stack: "", readmeRequestedAt: 0, gitignoreRequestedAt: 0, initFilesStatus: null, manualCommitMessage: "", ...resetGitWorkflowManualCommitDefaultPatch(), messageRequestedAt: 0, branchName: "", branchNameRequestedAt: 0, prMode: false, prBranch: "", pr: null, prRequestedAt: 0 };
 
   if (process === "stage") {
     setGitWorkflow({ ...base, step: "add", message: null, output: "Ready to stage all changes with git add ." }, { tabId });
     return;
   }
   if (process === "message") {
-    setGitWorkflow({ ...base, step: "generate", message: null, output: "Ready to generate a commit message from the currently staged changes." }, { tabId });
+    setGitWorkflow({ ...base, step: "generate", message: null, output: "Ready to generate a commit message from the currently staged changes, or type one and commit it directly." }, { tabId });
     return;
   }
   if (process === "commit") {
@@ -7921,6 +9240,22 @@ function selectGitWorkflowProcess(processValue, tabId = gitWorkflowActionTabId()
 
 function gitWorkflowTitle() {
   switch (gitWorkflow.step) {
+    case "initSetup": return "Set up GitHub username";
+    case "initRepo": return "Initialize Git repository";
+    case "initializingRepo": return "Running git init";
+    case "initStack": return "Choose repository stack";
+    case "readme": return "Prepare README and .gitignore";
+    case "readmeCreating": return "Preparing README and .gitignore";
+    case "readmeGenerating": return "Waiting for README";
+    case "gitignoreGenerating": return "Waiting for .gitignore";
+    case "initialCommit": return "Create initial commit";
+    case "initialCommitting": return "Committing initial files";
+    case "mainBranch": return "Rename branch to main";
+    case "mainBranching": return "Running git branch -M main";
+    case "remote": return "Add origin remote";
+    case "remoteAdding": return "Adding origin remote";
+    case "initialPush": return "Push main upstream";
+    case "initialPushing": return "Pushing main";
     case "add": return "Stage all changes";
     case "generate": return "Generate staged commit message";
     case "generating": return "Waiting for /git-staged-msg";
@@ -7933,31 +9268,107 @@ function gitWorkflowTitle() {
     case "prGenerating": return "Waiting for /pr";
     case "prReview": return "Review PR description";
     case "prCreating": return "Creating pull request";
-    case "done": return "Git workflow complete";
-    case "cancelled": return "Git workflow cancelled";
-    case "error": return "Git workflow needs attention";
-    default: return "Git workflow";
+    case "done": return gitWorkflow.mode === "initRepo" ? "Git repository setup complete" : "Git workflow complete";
+    case "cancelled": return gitWorkflow.mode === "initRepo" ? "Git repository setup cancelled" : "Git workflow cancelled";
+    case "error": return gitWorkflow.mode === "initRepo" ? "Git repository setup needs attention" : "Git workflow needs attention";
+    default: return gitWorkflow.mode === "initRepo" ? "Git repository setup" : "Git workflow";
   }
 }
 
 function gitWorkflowHint() {
   switch (gitWorkflow.step) {
+    case "initSetup": return "First-time setup: save the GitHub username used in https://github.com/USERNAME/REPO_NAME.git.";
+    case "initRepo": return "Step 1: run git init in the current Pi working directory.";
+    case "initializingRepo": return "Running git init. Cancel will terminate the git command.";
+    case "initStack": return "Step 2: choose a stack preset or type one; leave blank to let Pi infer it from the codebase.";
+    case "readme": return "Step 3: check README.md and .gitignore, prompt Pi for missing files, then stage them.";
+    case "readmeCreating": return "Checking README.md/.gitignore, creating missing files if needed, and staging them.";
+    case "readmeGenerating": return "Pi is filling out README.md from the selected stack and repository contents.";
+    case "gitignoreGenerating": return "Pi is generating .gitignore from the selected stack or by inspecting the codebase.";
+    case "initialCommit": return "Step 4: run git commit -m \"Initial commit\".";
+    case "initialCommitting": return "Creating the initial commit.";
+    case "mainBranch": return "Step 5: run git branch -M main.";
+    case "mainBranching": return "Renaming the current branch to main.";
+    case "remote": return "Step 6: add origin as https://github.com/USERNAME/REPO_NAME.git.";
+    case "remoteAdding": return "Adding the GitHub origin remote.";
+    case "initialPush": return "Step 7: run git push -u origin main.";
+    case "initialPushing": return "Pushing main upstream. Authentication must already be available to git.";
     case "add": return "Step 1: run git add . in the current Pi working directory.";
-    case "generate": return "Step 2: run /git-staged-msg, then preview the generated files.";
+    case "generate": return "Step 2: run /git-staged-msg, or type a commit message and use Commit input.";
     case "generating": return "Pi is generating dev/COMMIT/staged-commit-short.txt and staged-commit-long.txt.";
-    case "message": return gitWorkflow.prMode ? `Branch ${gitWorkflow.prBranch || "created"}: choose short or long commit before opening a PR.` : "Step 3/4: preview the native g-msg output, commit here, or create a PR branch first.";
+    case "message": return gitWorkflow.prMode ? `Branch ${gitWorkflow.prBranch || "created"}: choose short, long, or typed input before opening a PR.` : "Step 3/4: preview the native g-msg output, type a commit message if needed, commit here, or create a PR branch first.";
     case "branchNaming": return "Pi is generating dev/COMMIT/staged-branch-name.txt. Cancel will request Pi abort.";
     case "branching": return "Creating a new branch with git switch -c before committing.";
-    case "committing": return "Running native git commit from the generated message file.";
+    case "committing": return "Running native git commit with the selected message.";
     case "push": return gitWorkflow.prMode ? "Push the PR branch, generate /pr, review the description, then create the pull request." : "Step 5: push the new commit to the configured remote.";
     case "pushing": return "Running git push. Cancel will request process termination.";
     case "prGenerating": return "Pi is generating dev/PR/<current-branch>.md with /pr.";
     case "prReview": return "Review or edit the generated PR description before creating the pull request.";
     case "prCreating": return "Running gh pr create with the confirmed description.";
-    case "done": return gitWorkflow.prMode ? "PR workflow finished. Review the output below." : "Push finished. Review the output below.";
+    case "done": return gitWorkflow.mode === "initRepo" ? "Initial repository workflow finished. Review the output below." : gitWorkflow.prMode ? "PR workflow finished. Review the output below." : "Push finished. Review the output below.";
     case "cancelled": return "No further workflow steps will run.";
     case "error": return gitWorkflow.error || "Fix the issue, then retry or restart.";
-    default: return "Stage changes, generate a commit message, commit, and push.";
+    default: return gitWorkflow.mode === "initRepo" ? "Initialize a repository, create README.md, commit, add origin, and push main." : "Stage changes, generate a commit message, commit, and push.";
+  }
+}
+
+function renderGitInitWorkflowActions() {
+  if (gitWorkflow.step === "initSetup") {
+    addGitWorkflowAction("git-footer-status-setup", () => {
+      const setup = configureGitFooterStatusSetup({ force: true });
+      if (!setup?.githubUsername) return;
+      const repoName = gitWorkflow.repoName || defaultGitInitRepoName();
+      const stack = gitWorkflow.stack || readStoredGitInitStack();
+      setGitWorkflow({ step: "initRepo", githubUsername: setup.githubUsername, repoName, stack, remoteUrl: gitInitRemoteUrl(setup.githubUsername, repoName), output: `Ready to initialize a Git repository.\n\n${gitInitWorkflowSetupSummary({ githubUsername: setup.githubUsername, repoName, stack })}` });
+    }, "primary", false, GIT_FOOTER_STATUS_SETUP_TOOLTIP);
+  } else if (gitWorkflow.step === "initRepo") {
+    addGitWorkflowAction("Run git init", () => runGitInitRepository(), "primary", false, "Run git init in the current Pi working directory.");
+  } else if (gitWorkflow.step === "initializingRepo") {
+    addGitWorkflowAction("Running git init…", () => {}, "primary", true);
+  } else if (gitWorkflow.step === "initStack") {
+    renderGitInitStackInput();
+    addGitWorkflowAction("Skip / auto-detect", () => {
+      const workflow = gitWorkflowForTab(gitWorkflowActionTabId(), { create: false }) || gitWorkflow;
+      writeStoredGitInitStack("");
+      setGitWorkflow({ step: "readme", stack: "", ...gitWorkflowActionDonePatch(workflow, "stack"), output: "Stack left blank. Pi will inspect the codebase for .gitignore and fallback to sane defaults.\n\nNext: check README.md and .gitignore before staging." });
+    }, "", false, GIT_INIT_STACK_TOOLTIP);
+  } else if (gitWorkflow.step === "readme") {
+    addGitWorkflowAction("Check and prepare files", () => prepareGitInitFiles(), "primary", false, "Check README.md and .gitignore first; create missing README.md; prompt Pi to generate missing .gitignore.");
+  } else if (gitWorkflow.step === "readmeCreating") {
+    addGitWorkflowAction("Preparing files…", () => {}, "primary", true);
+  } else if (gitWorkflow.step === "readmeGenerating") {
+    addGitWorkflowAction("Waiting for Pi…", () => {}, "primary", true);
+  } else if (gitWorkflow.step === "gitignoreGenerating") {
+    addGitWorkflowAction("Waiting for Pi…", () => {}, "primary", true);
+  } else if (gitWorkflow.step === "initialCommit") {
+    addGitWorkflowAction("Commit initial files", () => commitGitInitialReadme(), "primary", false, "Run git commit -m \"Initial commit\".");
+  } else if (gitWorkflow.step === "initialCommitting") {
+    addGitWorkflowAction("Committing…", () => {}, "primary", true);
+  } else if (gitWorkflow.step === "mainBranch") {
+    addGitWorkflowAction("Run git branch -M main", () => branchGitInitMain(), "primary", false, "Rename the current branch to main.");
+  } else if (gitWorkflow.step === "mainBranching") {
+    addGitWorkflowAction("Renaming branch…", () => {}, "primary", true);
+  } else if (gitWorkflow.step === "remote") {
+    addGitWorkflowAction("Add origin remote", () => addGitInitRemote(), "primary", false, GIT_INIT_REMOTE_TOOLTIP);
+    addGitWorkflowAction("git-footer-status-setup", () => {
+      const setup = configureGitFooterStatusSetup({ force: true });
+      if (!setup?.githubUsername) return;
+      const repoName = gitWorkflow.repoName || defaultGitInitRepoName();
+      const stack = gitWorkflow.stack || readStoredGitInitStack();
+      setGitWorkflow({ githubUsername: setup.githubUsername, repoName, stack, remoteUrl: gitInitRemoteUrl(setup.githubUsername, repoName), output: `Ready to add origin.\n\n${gitInitWorkflowSetupSummary({ githubUsername: setup.githubUsername, repoName, stack })}` });
+    }, "", false, GIT_FOOTER_STATUS_SETUP_TOOLTIP);
+  } else if (gitWorkflow.step === "remoteAdding") {
+    addGitWorkflowAction("Adding origin…", () => {}, "primary", true);
+  } else if (gitWorkflow.step === "initialPush") {
+    addGitWorkflowAction("Run git push -u origin main", () => pushGitInitWorkflow(), "primary", false, "Push main to origin and set upstream tracking.");
+  } else if (gitWorkflow.step === "initialPushing") {
+    addGitWorkflowAction("Pushing main…", () => {}, "primary", true);
+  } else if (gitWorkflow.step === "done") {
+    addGitWorkflowAction("Close", () => setGitWorkflow({ active: false }), "primary", false);
+    addGitWorkflowAction("Initialize another", () => startGitInitWorkflow(), "", false);
+  } else if (["cancelled", "error"].includes(gitWorkflow.step)) {
+    addGitWorkflowAction("Close", () => setGitWorkflow({ active: false }), "primary", false);
+    addGitWorkflowAction("Restart setup", () => startGitInitWorkflow(), "", false);
   }
 }
 
@@ -7965,15 +9376,19 @@ function renderGitWorkflow() {
   elements.gitWorkflowPanel.hidden = !gitWorkflow.active;
   if (!gitWorkflow.active) return;
 
+  elements.gitWorkflowPanel.dataset.mode = gitWorkflow.mode || "standard";
+  if (elements.gitWorkflowKicker) elements.gitWorkflowKicker.textContent = gitWorkflow.mode === "initRepo" ? "Git repository setup" : "Git workflow";
   elements.gitWorkflowTitle.textContent = gitWorkflowTitle();
   elements.gitWorkflowHint.textContent = gitWorkflowHint();
   elements.gitWorkflowOutput.textContent = gitWorkflow.output || "Ready.";
   elements.gitWorkflowSteps.replaceChildren();
   elements.gitWorkflowActions.replaceChildren();
 
-  const activeIndex = GIT_WORKFLOW_ACTIVE_INDEX[gitWorkflow.step] ?? 0;
+  const processes = gitWorkflow.mode === "initRepo" ? GIT_INIT_WORKFLOW_PROCESSES : GIT_WORKFLOW_PROCESSES;
+  const activeIndexMap = gitWorkflow.mode === "initRepo" ? GIT_INIT_WORKFLOW_ACTIVE_INDEX : GIT_WORKFLOW_ACTIVE_INDEX;
+  const activeIndex = activeIndexMap[gitWorkflow.step] ?? 0;
   const activeProcess = gitWorkflowProcessForStep(gitWorkflow.step, gitWorkflow.process);
-  for (const [index, process] of GIT_WORKFLOW_PROCESSES.entries()) {
+  for (const [index, process] of processes.entries()) {
     const item = make("button", "git-workflow-step", process.label);
     item.type = "button";
     item.dataset.gitWorkflowProcess = process.value;
@@ -7987,9 +9402,15 @@ function renderGitWorkflow() {
   elements.gitWorkflowCancelButton.hidden = ["done", "cancelled"].includes(gitWorkflow.step);
   elements.gitWorkflowCancelButton.disabled = false;
 
+  if (gitWorkflow.mode === "initRepo") {
+    renderGitInitWorkflowActions();
+    return;
+  }
+
   if (gitWorkflow.step === "add") {
     addGitWorkflowAction("Run git add .", () => runGitAdd(), "primary", false);
   } else if (gitWorkflow.step === "generate") {
+    renderGitWorkflowManualCommitInput();
     addGitWorkflowAction("Run /git-staged-msg", () => runGitMessagePrompt(), "primary", false);
     addGitWorkflowAction("Preview current message files", () => loadGitWorkflowMessage({ requireFresh: false }), "", false);
   } else if (gitWorkflow.step === "generating") {
@@ -7999,6 +9420,7 @@ function renderGitWorkflow() {
       addGitWorkflowAction("Create PR", () => createGitPrBranch(), "primary", false, GIT_WORKFLOW_CREATE_PR_TOOLTIP);
       addGitWorkflowAction("Manual branch", () => createGitPrBranchManually(), "", false, GIT_WORKFLOW_MANUAL_BRANCH_TOOLTIP);
     }
+    renderGitWorkflowManualCommitInput();
     addGitWorkflowAction("Commit short", () => commitGitWorkflow("short"), gitWorkflow.prMode ? "primary" : "", false);
     addGitWorkflowAction("Commit long", () => commitGitWorkflow("long"), gitWorkflow.prMode ? "primary" : "", false);
     addGitWorkflowAction("Regenerate", () => runGitMessagePrompt(), "", false);
@@ -8029,7 +9451,15 @@ function renderGitWorkflow() {
 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 });
+  let response;
+  try {
+    response = await api(path, method === "GET" ? { method, tabId } : { method, body, tabId });
+  } catch (error) {
+    if (error?.statusCode === 404 && path.startsWith("/api/git-workflow/")) {
+      throw new Error("Git workflow endpoint not found. Restart Pi Web UI so the browser and backend both load the latest git repository setup endpoints.");
+    }
+    throw error;
+  }
   if (expectedRunId !== undefined && !isCurrentGitWorkflowRun(expectedRunId, tabId)) return null;
   if (!response.ok) {
     const detail = response.data ? `\n\n${formatGitCommandResult(response.data)}` : "";
@@ -8065,12 +9495,62 @@ function startGitWorkflow(tabId = activeTabId) {
   workflow.runId += 1;
   setGitWorkflow({
     active: true,
+    mode: "standard",
     step: "add",
     process: "stage",
     busy: false,
-    output: "Ready to stage all changes with git add .\n\nNative mode is used for g-msg/g-short/g-long: dev/COMMIT message files are read directly and git commit is run without fish. After the message is generated, use Create PR to switch to a new branch before committing.",
+    output: "Ready to stage all changes with git add .\n\nNative mode is used for g-msg/g-short/g-long: dev/COMMIT message files are read directly and git commit is run without fish. In the Message stage you can also type a commit message and use Commit input. After the message is generated, use Create PR to switch to a new branch before committing.",
+    error: "",
+    githubUsername: "",
+    repoName: "",
+    remoteUrl: "",
+    stack: "",
+    readmeRequestedAt: 0,
+    gitignoreRequestedAt: 0,
+    initFilesStatus: null,
+    message: null,
+    manualCommitMessage: "",
+    ...resetGitWorkflowManualCommitDefaultPatch(),
+    messageRequestedAt: 0,
+    branchName: "",
+    branchNameRequestedAt: 0,
+    actionsDone: createGitWorkflowActionsDone(),
+    prMode: false,
+    prBranch: "",
+    pr: null,
+    prRequestedAt: 0,
+  }, { tabId });
+}
+
+function startGitInitWorkflow(tabId = activeTabId) {
+  if (!tabId) return;
+  const workflow = gitWorkflowForTab(tabId);
+  if (workflow.active && !["done", "cancelled", "error"].includes(workflow.step) && !confirm("Restart the active git repository setup workflow?")) return;
+  const setup = readGitFooterStatusSetup().githubUsername ? readGitFooterStatusSetup() : configureGitFooterStatusSetup({ force: true });
+  const githubUsername = setup?.githubUsername || "";
+  const repoName = defaultGitInitRepoName(tabs.find((tab) => tab.id === tabId) || activeTab());
+  const stack = readStoredGitInitStack();
+  workflow.runId += 1;
+  setGitWorkflow({
+    active: true,
+    mode: "initRepo",
+    step: githubUsername ? "initRepo" : "initSetup",
+    process: "init",
+    busy: false,
+    output: githubUsername
+      ? `Ready to initialize a Git repository.\n\n${gitInitWorkflowSetupSummary({ githubUsername, repoName, stack })}`
+      : "No GitHub username stored yet. Run git-footer-status-setup to save the username for https://github.com/USERNAME/REPO_NAME.git.",
     error: "",
+    githubUsername,
+    repoName,
+    remoteUrl: githubUsername ? gitInitRemoteUrl(githubUsername, repoName) : "",
+    stack,
+    readmeRequestedAt: 0,
+    gitignoreRequestedAt: 0,
+    initFilesStatus: null,
     message: null,
+    manualCommitMessage: "",
+    ...resetGitWorkflowManualCommitDefaultPatch(),
     messageRequestedAt: 0,
     branchName: "",
     branchNameRequestedAt: 0,
@@ -8082,11 +9562,269 @@ function startGitWorkflow(tabId = activeTabId) {
   }, { tabId });
 }
 
+async function runGitInitRepository(tabId = gitWorkflowActionTabId()) {
+  const tabContext = activeTabContext(tabId);
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const runId = workflow.runId;
+  setGitWorkflow({ step: "initializingRepo", busy: true, error: "", output: "Running git init…" }, { tabId });
+  try {
+    const result = await gitWorkflowRequest("/api/git-workflow/init", { runId, tabId });
+    if (!result) return;
+    const stack = workflow.stack || readStoredGitInitStack();
+    setGitWorkflow({ step: "initStack", busy: false, stack, ...gitWorkflowActionDonePatch(workflow, "init"), output: `${formatGitCommandResult(result)}\n\nRepository initialized. Next: choose the stack used for .gitignore generation.\n\nCurrent stack: ${gitInitStackDisplay(stack)}` }, { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "initRepo", { tabId });
+  }
+}
+
+function gitInitFilesResultSummary(result) {
+  const readme = result?.readme?.created
+    ? "Created README.md."
+    : result?.readme?.exists
+      ? "README.md already existed; staged without overwriting."
+      : "README.md was checked.";
+  const gitignore = result?.gitignore?.created
+    ? `Created .gitignore${result.gitignore.source ? ` (${result.gitignore.source})` : ""}.`
+    : result?.gitignore?.exists
+      ? ".gitignore already existed; staged without overwriting."
+      : ".gitignore was checked.";
+  return [readme, gitignore].join("\n");
+}
+
+function gitInitReadmePromptMessage({ stack = "", status = null, repoName = "" } = {}) {
+  const cleanStack = cleanGitInitStack(stack);
+  return [
+    "Create a useful README.md for this new repository.",
+    "Write or update only README.md in the current repository root. Do not commit, push, or run git add.",
+    repoName ? `Repository name: ${repoName}` : "",
+    cleanStack
+      ? `User-provided stack: ${cleanStack}`
+      : "No user stack was provided. Inspect the codebase (package manifests, lockfiles, framework configs, file extensions, build files) and infer the project purpose/stack.",
+    !cleanStack && status?.detectedStack ? `Web UI detected stack hint: ${status.detectedStack}` : "",
+    "Include a clear title, short description, basic setup/install instructions, common development commands, and usage notes that match the detected repository.",
+    "If the repository is mostly empty or unclear, create a concise README with placeholders/TODOs rather than inventing unsupported project details.",
+  ].filter(Boolean).join("\n");
+}
+
+function gitInitGitignorePromptMessage({ stack = "", status = null, repoName = "" } = {}) {
+  const cleanStack = cleanGitInitStack(stack);
+  return [
+    "Create a practical .gitignore file for this repository initialization.",
+    "Write or update only .gitignore in the current repository root. Do not commit, push, or run git add.",
+    repoName ? `Repository name: ${repoName}` : "",
+    cleanStack
+      ? `User-provided stack: ${cleanStack}`
+      : "No user stack was provided. Inspect the codebase (package manifests, lockfiles, framework configs, file extensions, build files) and infer the stack.",
+    !cleanStack && status?.detectedStack ? `Web UI detected stack hint: ${status.detectedStack}` : "",
+    "If the stack is still unclear, use sane defaults for OS/editor files, local env/secrets, dependency folders, build outputs, logs, caches, coverage, and temporary files.",
+    "Keep useful generated/project files trackable; do not ignore source files or lockfiles by default.",
+  ].filter(Boolean).join("\n");
+}
+
+async function promptGitInitReadme(status, { runId, tabId }) {
+  const tabContext = activeTabContext(tabId);
+  const targetTab = tabs.find((tab) => tab.id === tabId);
+  const targetBusy = tabId === activeTabId ? !!currentState?.isStreaming : activityForTab(targetTab).isWorking;
+  if (targetBusy) {
+    failGitWorkflow(new Error("Pi is currently running. Wait for it to finish or abort before filling out README.md."), "readme", { tabId });
+    return;
+  }
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const requestedAt = Date.now();
+  const repoName = workflow.repoName || defaultGitInitRepoName();
+  const stack = workflow.stack || "";
+  setGitWorkflow({
+    step: "readmeGenerating",
+    busy: true,
+    error: "",
+    readmeRequestedAt: requestedAt,
+    initFilesStatus: status,
+    output: `${gitInitFilesStatusSummary(status)}\n\nSending README.md fill-out request to Pi.\n\nStack: ${gitInitStackDisplay(stack)}\nCancel will request Pi abort.`,
+  }, { tabId });
+  if (isCurrentTabContext(tabContext)) setRunIndicatorActivity("Sending README.md fill-out request to Pi…");
+  try {
+    await api("/api/prompt", { method: "POST", body: { message: gitInitReadmePromptMessage({ stack, status, repoName }) }, tabId });
+    if (!isCurrentGitWorkflowRun(runId, tabId)) return;
+    appendGitWorkflowOutput("README.md request accepted. Waiting for agent_end, then README.md/.gitignore will be checked and staged. If Pi does not create README.md, Web UI will use a minimal fallback README.", { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshState(120, tabContext);
+    setTimeout(() => {
+      const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+      const targetStillBusy = tabId === activeTabId && currentState?.isStreaming;
+      if (isCurrentGitWorkflowRun(runId, tabId) && currentWorkflow?.step === "readmeGenerating" && !targetStillBusy) {
+        prepareGitInitFiles({ afterReadmePrompt: true, runId, tabId });
+      }
+    }, 2500);
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(runId, tabId)) {
+      if (isCurrentTabContext(tabContext)) clearRunIndicatorActivity();
+      failGitWorkflow(error, "readme", { tabId });
+    }
+  }
+}
+
+async function promptGitInitGitignore(status, { runId, tabId }) {
+  const tabContext = activeTabContext(tabId);
+  const targetTab = tabs.find((tab) => tab.id === tabId);
+  const targetBusy = tabId === activeTabId ? !!currentState?.isStreaming : activityForTab(targetTab).isWorking;
+  if (targetBusy) {
+    failGitWorkflow(new Error("Pi is currently running. Wait for it to finish or abort before generating .gitignore."), "readme", { tabId });
+    return;
+  }
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const requestedAt = Date.now();
+  const repoName = workflow.repoName || defaultGitInitRepoName();
+  const stack = workflow.stack || "";
+  setGitWorkflow({
+    step: "gitignoreGenerating",
+    busy: true,
+    error: "",
+    gitignoreRequestedAt: requestedAt,
+    initFilesStatus: status,
+    output: `${gitInitFilesStatusSummary(status)}\n\nSending .gitignore generation request to Pi.\n\nStack: ${gitInitStackDisplay(stack)}\nCancel will request Pi abort.`,
+  }, { tabId });
+  if (isCurrentTabContext(tabContext)) setRunIndicatorActivity("Sending .gitignore generation request to Pi…");
+  try {
+    await api("/api/prompt", { method: "POST", body: { message: gitInitGitignorePromptMessage({ stack, status, repoName }) }, tabId });
+    if (!isCurrentGitWorkflowRun(runId, tabId)) return;
+    appendGitWorkflowOutput(".gitignore request accepted. Waiting for agent_end, then README.md/.gitignore will be staged. If Pi does not create .gitignore, Web UI will use sane fallback patterns.", { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshState(120, tabContext);
+    setTimeout(() => {
+      const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+      const targetStillBusy = tabId === activeTabId && currentState?.isStreaming;
+      if (isCurrentGitWorkflowRun(runId, tabId) && currentWorkflow?.step === "gitignoreGenerating" && !targetStillBusy) {
+        prepareGitInitFiles({ afterGitignorePrompt: true, runId, tabId });
+      }
+    }, 2500);
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(runId, tabId)) {
+      if (isCurrentTabContext(tabContext)) clearRunIndicatorActivity();
+      failGitWorkflow(error, "readme", { tabId });
+    }
+  }
+}
+
+async function prepareGitInitFiles({ afterReadmePrompt = false, afterGitignorePrompt = false, runId, tabId = gitWorkflowActionTabId() } = {}) {
+  const tabContext = activeTabContext(tabId);
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const expectedRunId = runId ?? workflow.runId;
+  const repoName = workflow.repoName || defaultGitInitRepoName();
+  const stack = cleanGitInitStack(workflow.stack || readStoredGitInitStack());
+  setGitWorkflow({ step: "readmeCreating", busy: true, error: "", output: afterReadmePrompt || afterGitignorePrompt ? "Checking generated files, preparing README.md/.gitignore, and staging files…" : "Checking whether README.md and .gitignore already exist…" }, { tabId });
+  try {
+    const status = await gitWorkflowRequest("/api/git-workflow/init-files-status", { method: "GET", runId: expectedRunId, tabId });
+    if (!status) return;
+    setGitWorkflow({ initFilesStatus: status, output: `${gitInitFilesStatusSummary(status)}\n\nStack: ${gitInitStackDisplay(stack)}` }, { tabId });
+    if (!status.readmeExists && !afterReadmePrompt) {
+      await promptGitInitReadme(status, { runId: expectedRunId, tabId });
+      return;
+    }
+    if (!status.gitignoreExists && !afterGitignorePrompt) {
+      await promptGitInitGitignore(status, { runId: expectedRunId, tabId });
+      return;
+    }
+    const result = await gitWorkflowRequest("/api/git-workflow/readme", { body: { repoName, stack }, runId: expectedRunId, tabId });
+    if (!result) return;
+    const current = gitWorkflowForTab(tabId, { create: false }) || workflow;
+    setGitWorkflow({
+      step: "initialCommit",
+      busy: false,
+      repoName,
+      stack,
+      initFilesStatus: status,
+      actionsDone: createGitWorkflowActionsDone({ ...current.actionsDone, readme: true, gitignore: true }),
+      output: `${gitInitFilesStatusSummary(status)}\n\n${formatGitCommandResult(result)}\n\n${gitInitFilesResultSummary(result)}\nNext: commit the initial files.`,
+    }, { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(expectedRunId, tabId)) failGitWorkflow(error, "readme", { tabId });
+  }
+}
+
+async function commitGitInitialReadme(tabId = gitWorkflowActionTabId()) {
+  const tabContext = activeTabContext(tabId);
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const runId = workflow.runId;
+  setGitWorkflow({ step: "initialCommitting", busy: true, error: "", output: "Running git commit -m \"Initial commit\"…" }, { tabId });
+  try {
+    const result = await gitWorkflowRequest("/api/git-workflow/initial-commit", { runId, tabId });
+    if (!result) return;
+    setGitWorkflow({ step: "mainBranch", busy: false, ...gitWorkflowActionDonePatch(workflow, "commit"), output: `${formatGitCommandResult(result)}\n\nInitial commit created. Next: rename the branch to main.` }, { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "initialCommit", { tabId });
+  }
+}
+
+async function branchGitInitMain(tabId = gitWorkflowActionTabId()) {
+  const tabContext = activeTabContext(tabId);
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const runId = workflow.runId;
+  setGitWorkflow({ step: "mainBranching", busy: true, error: "", output: "Running git branch -M main…" }, { tabId });
+  try {
+    const result = await gitWorkflowRequest("/api/git-workflow/main-branch", { runId, tabId });
+    if (!result) return;
+    setGitWorkflow({ step: "remote", busy: false, ...gitWorkflowActionDonePatch(workflow, "branch"), output: `${formatGitCommandResult(result)}\n\nBranch is main. Next: add origin.\n\n${gitInitWorkflowSetupSummary(gitWorkflowForTab(tabId, { create: false }) || workflow)}` }, { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "mainBranch", { tabId });
+  }
+}
+
+async function addGitInitRemote(tabId = gitWorkflowActionTabId()) {
+  const tabContext = activeTabContext(tabId);
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  let details;
+  try {
+    details = ensureGitInitRemoteDetails(tabId);
+  } catch (error) {
+    addEvent(error.message || String(error), "error");
+    return;
+  }
+  if (!details) {
+    setGitWorkflow({ step: "remote", busy: false, output: `Origin setup cancelled.\n\n${gitInitWorkflowSetupSummary(workflow)}` }, { tabId });
+    return;
+  }
+  const runId = workflow.runId;
+  setGitWorkflow({ step: "remoteAdding", busy: true, error: "", githubUsername: details.username, repoName: details.repoName, remoteUrl: details.remoteUrl, output: `Running git remote add origin ${details.remoteUrl}…` }, { tabId });
+  try {
+    const result = await gitWorkflowRequest("/api/git-workflow/remote", { body: details, runId, tabId });
+    if (!result) return;
+    setGitWorkflow({ step: "initialPush", busy: false, ...gitWorkflowActionDonePatch(workflow, "remote"), output: `${formatGitCommandResult(result)}\n\nOrigin added: ${result.remoteUrl || details.remoteUrl}\nNext: git push -u origin main.` }, { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "remote", { tabId });
+  }
+}
+
+async function pushGitInitWorkflow(tabId = gitWorkflowActionTabId()) {
+  const tabContext = activeTabContext(tabId);
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  if (!workflow) return;
+  const runId = workflow.runId;
+  setGitWorkflow({ step: "initialPushing", busy: true, error: "", output: "Running git push -u origin main…" }, { tabId });
+  try {
+    const result = await gitWorkflowRequest("/api/git-workflow/init-push", { runId, tabId });
+    if (!result) return;
+    setGitWorkflow({ step: "done", busy: false, ...gitWorkflowActionDonePatch(workflow, "push"), output: `${formatGitCommandResult(result)}\n\nInitial repository pushed to origin/main.` }, { tabId });
+    if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
+  } catch (error) {
+    if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "initialPush", { tabId });
+  }
+}
+
 async function cancelGitWorkflow(tabId = gitWorkflowActionTabId()) {
   const tabContext = activeTabContext(tabId);
   const workflow = gitWorkflowForTab(tabId, { create: false });
   if (!workflow?.active) return;
-  const shouldAbortPi = workflow.step === "generating" || workflow.step === "branchNaming" || workflow.step === "prGenerating";
+  const shouldAbortPi = workflow.step === "generating" || workflow.step === "branchNaming" || workflow.step === "prGenerating" || workflow.step === "readmeGenerating" || workflow.step === "gitignoreGenerating";
   if (activeGitPrDialogResolve) resolveGitPrDialog(null);
   workflow.runId += 1;
   setGitWorkflow({ step: "cancelled", busy: false, error: "", output: `${workflow.output || ""}${workflow.output ? "\n\n" : ""}Cancelled by user.` }, { tabId });
@@ -8103,17 +9841,47 @@ async function runGitAdd(tabId = gitWorkflowActionTabId()) {
   const workflow = gitWorkflowForTab(tabId, { create: false });
   if (!workflow) return;
   const runId = workflow.runId;
-  setGitWorkflow({ step: "add", busy: true, error: "", output: "Running git add ." }, { tabId });
+  setGitWorkflow({ step: "add", busy: true, error: "", ...resetGitWorkflowManualCommitDefaultPatch(), output: "Running git add ." }, { tabId });
   try {
     const result = await gitWorkflowRequest("/api/git-workflow/add", { runId, tabId });
     if (!result) return;
-    setGitWorkflow({ step: "generate", busy: false, ...gitWorkflowActionDonePatch(workflow, "stage"), output: `${formatGitCommandResult(result)}\n\nStaged. Next: run /git-staged-msg.` }, { tabId });
+    setGitWorkflow({ step: "generate", busy: false, ...resetGitWorkflowManualCommitDefaultPatch(), ...gitWorkflowActionDonePatch(workflow, "stage"), output: `${formatGitCommandResult(result)}\n\nStaged. Next: run /git-staged-msg.` }, { tabId });
     if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
   } catch (error) {
     if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "add", { tabId });
   }
 }
 
+async function loadGitWorkflowDefaultCommitMessage({ runId, tabId = activeTabId } = {}) {
+  const workflow = gitWorkflowForTab(tabId, { create: false });
+  const expectedRunId = runId ?? workflow?.runId;
+  if (!workflow || workflow.manualCommitMessageDefaultLoading || workflow.manualCommitMessageDefaultRequestedAt) return;
+  workflow.manualCommitMessageDefaultLoading = true;
+  workflow.manualCommitMessageDefaultRequestedAt = Date.now();
+  try {
+    const data = await gitWorkflowRequest("/api/git-workflow/default-commit-message", { method: "GET", runId: expectedRunId, tabId });
+    const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+    if (!data || !currentWorkflow || !isCurrentGitWorkflowRun(expectedRunId, tabId)) return;
+    setGitWorkflow({
+      manualCommitMessageDefault: String(data.message || "").trim(),
+      manualCommitMessageDefaultReason: String(data.reason || ""),
+      manualCommitMessageDefaultPath: String(data.path || ""),
+      manualCommitMessageDefaultAction: String(data.action || ""),
+      manualCommitMessageDefaultLoading: false,
+    }, { tabId });
+  } catch (error) {
+    const currentWorkflow = gitWorkflowForTab(tabId, { create: false });
+    if (!currentWorkflow || !isCurrentGitWorkflowRun(expectedRunId, tabId)) return;
+    setGitWorkflow({
+      manualCommitMessageDefault: "",
+      manualCommitMessageDefaultReason: error?.message || String(error),
+      manualCommitMessageDefaultPath: "",
+      manualCommitMessageDefaultAction: "",
+      manualCommitMessageDefaultLoading: false,
+    }, { tabId });
+  }
+}
+
 async function runGitMessagePrompt(tabId = gitWorkflowActionTabId()) {
   const tabContext = activeTabContext(tabId);
   const targetTab = tabs.find((tab) => tab.id === tabId);
@@ -8300,7 +10068,7 @@ async function createGitPrBranchWithSuggestion(suggestion, tabId = gitWorkflowAc
   try {
     const result = await gitWorkflowRequest("/api/git-workflow/branch", { body: { branch }, runId, tabId });
     if (!result) return;
-    setGitWorkflow({ step: "message", prMode: true, prBranch: result.branch || branch, branchName: result.branch || branch, busy: false, output: `${formatGitCommandResult(result)}\n\nCreated PR branch ${result.branch || branch}. Choose Commit short or Commit long to commit on this branch.` }, { tabId });
+    setGitWorkflow({ step: "message", prMode: true, prBranch: result.branch || branch, branchName: result.branch || branch, busy: false, output: `${formatGitCommandResult(result)}\n\nCreated PR branch ${result.branch || branch}. Choose Commit short, Commit long, or Commit input to commit on this branch.` }, { tabId });
   } catch (error) {
     if (isCurrentGitWorkflowRun(runId, tabId)) {
       setGitWorkflow({ prMode: false, prBranch: "" }, { tabId });
@@ -8314,15 +10082,26 @@ async function commitGitWorkflow(variant, tabId = gitWorkflowActionTabId()) {
   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 });
+  const failureStep = variant === "input" && workflow.step === "generate" ? "generate" : "message";
+  const inputMessage = variant === "input" ? gitWorkflowManualCommitInputMessage(workflow) : "";
+  if (variant === "input" && !inputMessage) {
+    failGitWorkflow(new Error("Type a commit message, or stage exactly one created/updated/deleted file to use the default."), failureStep, { tabId });
+    return;
+  }
+  const preview = variant === "input" ? formatInputCommitMessagePreview(inputMessage) : formatCommitMessagePreview(workflow.message);
+  setGitWorkflow({ step: "committing", busy: true, error: "", output: `${preview}\n\nRunning native ${variant} commit…` }, { tabId });
   try {
-    const result = await gitWorkflowRequest("/api/git-workflow/commit", { body: { variant }, runId, tabId });
+    const body = variant === "input" ? { variant, message: inputMessage } : { variant };
+    const result = await gitWorkflowRequest("/api/git-workflow/commit", { body, runId, tabId });
     if (!result) return;
     const nextAction = workflow.prMode ? "Push and Create PR." : "git push.";
-    setGitWorkflow({ step: "push", busy: false, ...gitWorkflowActionDonePatch(workflow, "commit"), output: `${formatGitCommandResult(result)}\n\nCommit created. Next: ${nextAction}` }, { tabId });
+    const donePatch = variant === "input"
+      ? { actionsDone: createGitWorkflowActionsDone({ ...workflow.actionsDone, message: true, commit: true }) }
+      : gitWorkflowActionDonePatch(workflow, "commit");
+    setGitWorkflow({ step: "push", busy: false, ...donePatch, output: `${formatGitCommandResult(result)}\n\nCommit created. Next: ${nextAction}` }, { tabId });
     if (isCurrentTabContext(tabContext)) scheduleRefreshFooter();
   } catch (error) {
-    if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, "message", { tabId });
+    if (isCurrentGitWorkflowRun(runId, tabId)) failGitWorkflow(error, failureStep, { tabId });
   }
 }
 
@@ -8487,6 +10266,22 @@ function resumeGitWorkflowForActiveTab(tabContext = activeTabContext()) {
     }
     loadGitWorkflowPr({ requireFresh: true, retries: 3, runId: gitWorkflow.runId, tabId: workflowTabId });
   }
+  if (workflowTabId === tabContext.tabId && gitWorkflow.active && gitWorkflow.step === "readmeGenerating" && !currentState?.isStreaming) {
+    const retryDelayMs = Math.max(0, 2500 - (Date.now() - (gitWorkflow.readmeRequestedAt || 0)));
+    if (retryDelayMs > 0) {
+      setTimeout(() => resumeGitWorkflowForActiveTab(tabContext), retryDelayMs);
+      return;
+    }
+    prepareGitInitFiles({ afterReadmePrompt: true, runId: gitWorkflow.runId, tabId: workflowTabId });
+  }
+  if (workflowTabId === tabContext.tabId && gitWorkflow.active && gitWorkflow.step === "gitignoreGenerating" && !currentState?.isStreaming) {
+    const retryDelayMs = Math.max(0, 2500 - (Date.now() - (gitWorkflow.gitignoreRequestedAt || 0)));
+    if (retryDelayMs > 0) {
+      setTimeout(() => resumeGitWorkflowForActiveTab(tabContext), retryDelayMs);
+      return;
+    }
+    prepareGitInitFiles({ afterGitignorePrompt: true, runId: gitWorkflow.runId, tabId: workflowTabId });
+  }
 }
 
 function normalizeQueuedMessages(event) {
@@ -9222,6 +11017,64 @@ function renderMarkdown(block, text) {
   renderMarkdownInto(block, text);
 }
 
+/**
+ * Incremental renderer for streaming assistant markdown. The block-based
+ * parser in renderMarkdownInto only ever closes a block at a blank line
+ * outside a code fence, so everything before the last such boundary is
+ * stable: it is parsed exactly once and its DOM is never rebuilt. Only the
+ * open tail is re-parsed per streaming tick, keeping per-tick cost flat
+ * instead of O(message length).
+ */
+let streamMarkdownState = null;
+
+function streamingMarkdownStableBoundary(text) {
+  const lines = text.split("\n");
+  let inFence = false;
+  let boundary = 0;
+  let offset = 0;
+  // Exclude the final line: it may still be streaming in.
+  for (let index = 0; index < lines.length - 1; index += 1) {
+    const line = lines[index];
+    if (inFence) {
+      if (/^\s*```\s*$/.test(line)) inFence = false;
+    } else if (/^\s*```\s*[\w.+-]*\s*$/.test(line)) {
+      inFence = true;
+    }
+    offset += line.length + 1;
+    if (!inFence && !line.trim()) boundary = offset;
+  }
+  return boundary;
+}
+
+function renderStreamingMarkdown(block, text) {
+  let state = streamMarkdownState;
+  if (!state || state.block !== block) {
+    block.replaceChildren();
+    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();
+    state.stableText = "";
+    state.tailNodes = [];
+  }
+  for (const node of state.tailNodes) node.remove();
+  state.tailNodes = [];
+  const boundary = streamingMarkdownStableBoundary(text);
+  if (boundary > state.stableText.length) {
+    renderMarkdownInto(block, text.slice(state.stableText.length, boundary));
+    state.stableText = text.slice(0, boundary);
+  }
+  const tail = text.slice(state.stableText.length);
+  if (tail.trim()) {
+    const fragment = document.createDocumentFragment();
+    renderMarkdownInto(fragment, tail);
+    state.tailNodes = [...fragment.childNodes];
+    block.append(fragment);
+  }
+}
+
 function appendImage(parent, part) {
   const wrapper = make("div", "image-block");
   const img = document.createElement("img");
@@ -9852,6 +11705,7 @@ function stickyUserPromptViewportGap() {
 
 function resetChatOutput() {
   liveToolCards.clear();
+  renderedTranscriptState = { epoch: "", entries: [] };
   const preservedNodes = [];
   if (elements.stickyUserPromptButton) preservedNodes.push(elements.stickyUserPromptButton);
   if (runIndicatorBubble?.parentElement === elements.chat) preservedNodes.push(runIndicatorBubble);
@@ -10536,9 +12390,12 @@ function jumpToStickyUserPrompt() {
   requestAnimationFrame(updateStickyUserPromptButton);
 }
 
-function appendMessage(message, { streaming = false, messageIndex = -1, transient = false, animateEntry = false, reusableToolCards = null } = {}) {
+function appendMessage(message, { streaming = false, messageIndex = -1, transient = false, animateEntry = false, reusableToolCards = null, itemKey = "" } = {}) {
   const reused = reuseToolExecutionBubble(reusableToolCards, message, { streaming, messageIndex, transient });
-  if (reused) return reused;
+  if (reused) {
+    if (itemKey) reused.bubble.dataset.itemKey = itemKey;
+    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" : ""}`);
@@ -10547,6 +12404,7 @@ function appendMessage(message, { streaming = false, messageIndex = -1, transien
     bubble.dataset.messageIndex = String(messageIndex);
     if (role === "user") bubble.dataset.userPrompt = "true";
   }
+  if (itemKey) bubble.dataset.itemKey = itemKey;
   const isCollapsibleOutput = !streaming && (message.role === "toolResult" || message.role === "bashExecution" || message.role === "compactionSummary");
 
   const hideMessageHeader = message.role === "assistant" && !isCollapsibleOutput;
@@ -10593,14 +12451,15 @@ function appendMessage(message, { streaming = false, messageIndex = -1, transien
     bubble.append(header, body);
   }
   attachMessageCopyButton(bubble, message, body);
+  attachMessageEditRetryButton(bubble, message, messageIndex, { streaming, transient });
   if (!streaming && !transient) renderActionFeedbackControls(bubble, message, messageIndex);
   appendChatMessageBubble(bubble);
   return { bubble, body };
 }
 
-function appendTranscriptMessage(message, { streaming = false, messageIndex = -1, transient = false, animateEntry = false, reusableToolCards = null } = {}) {
+function appendTranscriptMessage(message, { streaming = false, messageIndex = -1, transient = false, animateEntry = false, reusableToolCards = null, itemKey = "" } = {}) {
   if (streaming || transient || message?.role !== "assistant") {
-    return appendMessage(message, { streaming, messageIndex, transient, animateEntry, reusableToolCards });
+    return appendMessage(message, { streaming, messageIndex, transient, animateEntry, reusableToolCards, itemKey });
   }
 
   let finalOutput = null;
@@ -10630,6 +12489,7 @@ function appendTranscriptMessage(message, { streaming = false, messageIndex = -1
       transient: false,
       animateEntry: animateEntry && isActionTranscriptMessage(transcriptMessage),
       reusableToolCards,
+      itemKey,
     });
     if (transcriptMessage.role === "assistant") finalOutput = created;
   });
@@ -10901,20 +12761,169 @@ function orderedTranscriptItems() {
   return items.sort((a, b) => a.timestampMs - b.timestampMs || a.order - b.order);
 }
 
-function renderAllMessages({ preserveScroll = false } = {}) {
+/**
+ * Keyed transcript reconciliation state. Each transcript item gets a stable
+ * key plus a cheap content signature; renders reuse the longest common
+ * prefix of unchanged items and only rebuild DOM from the first divergence
+ * (typically the last one or two items), instead of rebuilding every bubble.
+ */
+let renderedTranscriptState = { epoch: "", entries: [] };
+
+function transcriptRenderEpoch() {
+  return `${activeTabId || ""}|${thinkingOutputVisible ? 1 : 0}`;
+}
+
+function transcriptItemKey(item) {
+  if (!item.transient) return `m:${item.messageIndex}`;
+  if (item.messageIndex >= 0) return `t:${item.messageIndex}`;
+  return `live:${item.message?.toolCallId || `o${item.order}`}`;
+}
+
+function safeJsonLength(value) {
+  if (value === undefined || value === null) return 0;
+  try {
+    return JSON.stringify(value).length;
+  } catch {
+    return -1;
+  }
+}
+
+function contentSignature(content) {
+  if (content === undefined || content === null) return "";
+  if (typeof content === "string") return `s${content.length}`;
+  if (!Array.isArray(content)) return `o${safeJsonLength(content)}`;
+  let sig = `a${content.length}`;
+  for (const part of content) {
+    if (!part || typeof part !== "object") {
+      sig += ";x";
+      continue;
+    }
+    const text = typeof part.text === "string" ? part.text
+      : typeof part.thinking === "string" ? part.thinking
+        : typeof part.data === "string" ? part.data
+          : typeof part.content === "string" ? part.content : "";
+    sig += `;${part.type || "?"}:${text.length}:${part.toolCallId || part.id || ""}`;
+  }
+  return sig;
+}
+
+function toolCallLiveStateSignature(toolCallId) {
+  if (!toolCallId) return "";
+  const id = String(toolCallId);
+  const result = toolResultForCallId(id);
+  const run = liveToolRuns.get(id);
+  let sig = "";
+  if (result) sig += `r:${contentSignature(result.content)}:${result.isError ? "e" : ""}`;
+  if (run) sig += `|l:${run.isPartial ? "p" : ""}${run.isError ? "e" : ""}:${run.endedAt || ""}:${contentSignature(run.result?.content)}:${safeJsonLength(run.arguments)}`;
+  return sig;
+}
+
+function actionFeedbackSignature(messageIndex) {
+  const map = actionFeedbackByTab.get(activeTabId);
+  if (!map?.size) return "";
+  let sig = "";
+  for (const entry of map.values()) {
+    if (entry.messageIndex === messageIndex) sig += `${entry.key}=${entry.reaction};`;
+  }
+  return sig;
+}
+
+// Cache of the message-object-derived part of an item signature. Session
+// messages are append-only and treated as immutable, and delta merges keep
+// previous object identities, so cached entries stay valid until a full
+// fetch replaces the array (when the cache simply rebuilds).
+const messageStaticSignatureCache = new WeakMap();
+
+function messageStaticSignature(message) {
+  const cacheable = message && typeof message === "object";
+  if (cacheable) {
+    const cached = messageStaticSignatureCache.get(message);
+    if (cached !== undefined) return cached;
+  }
+  const sig = [
+    message.role || "",
+    String(message.timestamp || ""),
+    message.level || "",
+    String(message.title || ""),
+    contentSignature(message.content),
+    typeof message.command === "string" ? `c${message.command.length}` : "",
+    typeof message.output === "string" ? `out${message.output.length}` : "",
+    typeof message.summary === "string" ? `sum${message.summary.length}` : "",
+    typeof message.thinking === "string" ? `th${message.thinking.length}` : "",
+  ];
+  if (message.role === "toolExecution") {
+    sig.push(
+      message.live ? "live" : "",
+      message.isPartial ? "p" : "",
+      message.isError ? "e" : "",
+      String(message.startedAt || ""),
+      String(message.endedAt || ""),
+      contentSignature(message.result?.content),
+      String(safeJsonLength(message.arguments)),
+    );
+  }
+  const joined = sig.join("|");
+  if (cacheable) messageStaticSignatureCache.set(message, joined);
+  return joined;
+}
+
+function transcriptItemSignature(item) {
+  const message = item.message || {};
+  const sig = [messageStaticSignature(message)];
+  if (message.role === "toolExecution") sig.push(toolCallLiveStateSignature(message.toolCallId));
+  if (message.role === "assistant" && Array.isArray(message.content)) {
+    for (const part of message.content) {
+      if (isAssistantToolCallPart(part)) sig.push(toolCallLiveStateSignature(assistantToolCallId(part)));
+    }
+  }
+  if (!item.transient && item.messageIndex >= 0) sig.push(actionFeedbackSignature(item.messageIndex));
+  return sig.join("|");
+}
+
+function removeChatBubblesAfterPrefix(keptKeys) {
+  for (const child of [...elements.chat.children]) {
+    if (child === elements.stickyUserPromptButton || child === runIndicatorBubble) continue;
+    const key = child.dataset?.itemKey;
+    if (key && keptKeys.has(key)) continue;
+    child.remove();
+  }
+}
+
+function pruneDisconnectedLiveToolCards() {
+  for (const [id, bubble] of liveToolCards) {
+    if (!bubble.isConnected) liveToolCards.delete(id);
+  }
+}
+
+function renderAllMessages({ preserveScroll = false, forceRebuild = false } = {}) {
   const shouldFollow = !preserveScroll && (autoFollowChat || isChatNearBottom());
   const previousScrollTop = elements.chat.scrollTop;
-  const reusableToolCards = captureReusableToolCards();
-  resetChatOutput();
   const transcriptItems = orderedTranscriptItems();
-  for (const item of transcriptItems) {
-    appendTranscriptMessage(item.message, {
-      messageIndex: item.messageIndex,
-      transient: item.transient,
-      animateEntry: shouldAnimateActionEntry(item),
+  const epoch = transcriptRenderEpoch();
+  const nextEntries = transcriptItems.map((item) => ({ item, key: transcriptItemKey(item), sig: transcriptItemSignature(item) }));
+  let prefixLength = 0;
+  if (!forceRebuild && epoch === renderedTranscriptState.epoch) {
+    const previous = renderedTranscriptState.entries;
+    const limit = Math.min(previous.length, nextEntries.length);
+    while (prefixLength < limit && previous[prefixLength].key === nextEntries[prefixLength].key && previous[prefixLength].sig === nextEntries[prefixLength].sig) {
+      prefixLength += 1;
+    }
+  }
+  const reusableToolCards = captureReusableToolCards();
+  if (prefixLength === 0) resetChatOutput();
+  else removeChatBubblesAfterPrefix(new Set(nextEntries.slice(0, prefixLength).map((entry) => entry.key)));
+  for (let index = prefixLength; index < nextEntries.length; index += 1) {
+    const entry = nextEntries[index];
+    appendTranscriptMessage(entry.item.message, {
+      messageIndex: entry.item.messageIndex,
+      transient: entry.item.transient,
+      animateEntry: shouldAnimateActionEntry(entry.item),
       reusableToolCards,
+      itemKey: entry.key,
     });
   }
+  pruneDisconnectedLiveToolCards();
+  renderedTranscriptState = { epoch, entries: nextEntries.map(({ key, sig }) => ({ key, sig })) };
   rememberActionEntries(transcriptItems);
   applyToolOutputExpansionToDom();
   renderRunIndicator({ scroll: false });
@@ -11248,6 +13257,30 @@ function resetOptionalFeatureAvailability() {
   renderOptionalFeatureControls();
 }
 
+function optionalFeaturePackageStatus(featureId) {
+  return optionalFeaturePackageStatuses.get(featureId) || null;
+}
+
+function optionalFeaturePackageVersionLabel(status) {
+  if (!status?.installedVersion) return "";
+  return status.declaredSpec ? `${status.installedVersion} (expects ${status.declaredSpec})` : status.installedVersion;
+}
+
+async function refreshOptionalFeaturePackageStatuses({ announce = false } = {}) {
+  try {
+    const response = await api("/api/optional-features", { scoped: false });
+    optionalFeaturePackageStatuses.clear();
+    for (const status of response.data?.features || []) {
+      if (status?.featureId) optionalFeaturePackageStatuses.set(status.featureId, status);
+    }
+    renderOptionalFeatureControls();
+    return true;
+  } catch (error) {
+    if (announce) addEvent(`optional feature package status check failed: ${error.message || String(error)}`, "warn");
+    return false;
+  }
+}
+
 function requestGitFooterWebuiPayload(tabContext = activeTabContext(), { force = false } = {}) {
   if (!tabContext.tabId || isOptionalFeatureDisabled("gitFooterStatus")) return;
   if (currentState?.isStreaming || currentState?.isCompacting) return;
@@ -11287,9 +13320,16 @@ function updateOptionalFeatureAvailability() {
 function optionalFeatureStatus(featureId) {
   const detected = isOptionalFeatureDetected(featureId);
   const disabled = isOptionalFeatureDisabled(featureId);
-  if (detected && !disabled) return { label: "Enabled", className: "enabled", detail: "Detected and enabled in Web UI" };
-  if (detected && disabled) return { label: "Disabled", className: "disabled", detail: "Detected, but disabled in Web UI" };
-  return { label: "Install needed", className: "missing", detail: "Not detected in the active Pi tab" };
+  const packageStatus = optionalFeaturePackageStatus(featureId);
+  const installMessage = optionalFeatureInstallMessages.get(featureId);
+  const versionLabel = optionalFeaturePackageVersionLabel(packageStatus);
+  const versionSuffix = versionLabel ? ` · package ${versionLabel}` : "";
+  if (optionalFeatureInstallInProgress.has(featureId)) return { label: "Installing", className: "updating", detail: installMessage || "npm install is running; waiting for the package manager to finish" };
+  if (packageStatus?.updateAvailable) return { label: "Update available", className: "updating", detail: packageStatus.updateReason || `Installed package is older than the Web UI expects${versionSuffix}` };
+  if (detected && !disabled) return { label: "Enabled", className: "enabled", detail: `Detected and enabled in Web UI${versionSuffix}` };
+  if (detected && disabled) return { label: "Disabled", className: "disabled", detail: `Detected, but disabled in Web UI${versionSuffix}` };
+  if (packageStatus?.installed) return { label: "Installed", className: "installed", detail: `Package is installed but not loaded in the active Pi tab${versionSuffix}` };
+  return { label: "Install needed", className: "missing", detail: installMessage || "Package is not installed or not visible from the Web UI package root" };
 }
 
 function optionalFeatureWidgetFeatureId(key) {
@@ -11308,6 +13348,7 @@ function renderOptionalFeaturePanel() {
     const detected = isOptionalFeatureDetected(feature.id);
     const enabled = isOptionalFeatureEnabled(feature.id);
     const installing = optionalFeatureInstallInProgress.has(feature.id);
+    const packageStatus = optionalFeaturePackageStatus(feature.id);
     const status = optionalFeatureStatus(feature.id);
     const row = make("div", `optional-feature-row ${status.className}`);
 
@@ -11319,21 +13360,40 @@ function renderOptionalFeaturePanel() {
     const packageLine = make("code", "optional-feature-package", feature.packageName);
     main.append(title, detail, description, packageLine);
 
+    const actions = make("div", "optional-feature-actions");
+    if (feature.id === "gitFooterStatus") {
+      const setup = make("button", "optional-feature-action setup", "git-footer-status-setup");
+      setup.type = "button";
+      setup.title = GIT_FOOTER_STATUS_SETUP_TOOLTIP;
+      setup.dataset.tooltip = GIT_FOOTER_STATUS_SETUP_TOOLTIP;
+      setup.disabled = installing;
+      setup.addEventListener("click", () => configureGitFooterStatusSetup({ force: true }));
+      actions.append(setup);
+    }
+
     const action = make("button", "optional-feature-action");
     action.type = "button";
     action.disabled = installing;
     if (installing) {
       action.textContent = "Installing…";
+    } else if (packageStatus?.updateAvailable) {
+      action.textContent = "Update…";
+      action.classList.add("update");
+      action.addEventListener("click", () => installOptionalFeature(feature.id, { update: true }));
     } else if (detected) {
       action.textContent = enabled ? "Disable" : "Enable";
       action.addEventListener("click", () => setOptionalFeatureDisabled(feature.id, enabled));
+    } else if (packageStatus?.installed) {
+      action.textContent = "Reload";
+      action.addEventListener("click", () => sendPrompt("prompt", "/reload"));
     } else {
       action.textContent = "Install…";
       action.classList.add("install");
       action.addEventListener("click", () => installOptionalFeature(feature.id));
     }
+    actions.append(action);
 
-    row.append(main, action);
+    row.append(main, actions);
     elements.optionalFeaturesBox.append(row);
   }
 }
@@ -11373,6 +13433,16 @@ function renderOptionalFeatureControls() {
   );
   if (!hasNativeCommandMenu && nativeCommandMenuOpen) setNativeCommandMenuOpen(false);
 
+  const hasStatsCommand = isOptionalFeatureEnabled("statsCommand");
+  if (elements.optionsStatsButton) {
+    elements.optionsStatsButton.hidden = !hasStatsCommand;
+    setOptionalControlState(
+      elements.optionsStatsButton,
+      hasStatsCommand,
+      optionalFeatureUnavailableMessage("statsCommand"),
+    );
+  }
+
   renderOptionalFeaturePanel();
 }
 
@@ -11382,15 +13452,17 @@ function commandUnavailableMessage(commandName) {
   return `Command unavailable: /${commandName} is not loaded in the active Pi tab.`;
 }
 
-async function installOptionalFeature(featureId) {
+async function installOptionalFeature(featureId, { update = false } = {}) {
   const feature = OPTIONAL_FEATURE_BY_ID.get(featureId);
   if (!feature || optionalFeatureInstallInProgress.has(featureId)) return;
 
+  const actionLabel = update ? "Update" : "Install";
   const warning = [
-    `Install optional feature: ${feature.label}?`,
+    `${actionLabel} optional feature: ${feature.label}?`,
     "",
     `This will run npm install for ${feature.packageName} in the Web UI package install root.`,
     "It can download code from npm and modify the local Pi/Web UI npm installation.",
+    "Progress and failures will be shown in the optional-features row and activity log.",
     "If this feature is already installed but disabled in Pi settings, cancel and enable it there instead.",
     "",
     "Continue?",
@@ -11398,14 +13470,20 @@ async function installOptionalFeature(featureId) {
   if (!confirm(warning)) return;
 
   optionalFeatureInstallInProgress.add(featureId);
+  optionalFeatureInstallMessages.set(featureId, `${actionLabel} running via npm; waiting for package-manager output…`);
   renderOptionalFeatureControls();
-  addEvent(`installing optional feature ${feature.label} (${feature.packageName})…`, "warn");
+  addEvent(`${update ? "updating" : "installing"} optional feature ${feature.label} (${feature.packageName})…`, "warn");
   try {
     const response = await api("/api/optional-feature-install", { method: "POST", body: { featureId }, scoped: false });
     disabledOptionalFeatures.delete(featureId);
     storeDisabledOptionalFeatures();
-    addEvent(response.data?.message || `installed ${feature.packageName}`, "info");
-    if (confirm(`${feature.label} install finished. Reload the active Pi tab now to enable newly loaded resources?`)) {
+    const command = response.data?.command ? ` · ${response.data.command}` : "";
+    optionalFeatureInstallMessages.set(featureId, `${response.data?.message || `${actionLabel} finished`}${command}`);
+    addEvent(response.data?.message || `${update ? "updated" : "installed"} ${feature.packageName}`, "info");
+    const output = [response.data?.stderr, response.data?.stdout].filter(Boolean).join("\n").trim();
+    if (output) addEvent(`npm output for ${feature.packageName}:\n${output.slice(-4000)}`, "info");
+    await refreshOptionalFeaturePackageStatuses({ announce: true });
+    if (confirm(`${feature.label} ${actionLabel.toLowerCase()} finished. Reload the active Pi tab now to enable newly loaded resources?`)) {
       sendPrompt("prompt", "/reload");
     } else {
       const tabContext = activeTabContext();
@@ -11413,6 +13491,7 @@ async function installOptionalFeature(featureId) {
       if (isCurrentTabContext(tabContext)) renderOptionalFeatureControls();
     }
   } catch (error) {
+    optionalFeatureInstallMessages.set(featureId, `${actionLabel} failed: ${error.message || String(error)}`);
     addEvent(error.message || String(error), "error");
   } finally {
     optionalFeatureInstallInProgress.delete(featureId);
@@ -12472,7 +14551,7 @@ function renderStreamingAssistantText() {
   const assistantText = stripTodoProgressLines(streamRawText, { streaming: true });
   if (assistantText) {
     ensureStreamBubble();
-    renderMarkdown(streamText, assistantText);
+    renderStreamingMarkdown(streamText, assistantText);
   } else {
     scheduleStreamBubbleHide();
   }
@@ -12525,6 +14604,7 @@ function resetStreamBubble() {
   streamBubble = null;
   streamText = null;
   streamRawText = "";
+  streamMarkdownState = null;
   streamBubbleVisibleSince = 0;
   streamToolCallSeen = false;
   streamThinkingBubble = null;
@@ -12678,6 +14758,8 @@ async function refreshStats(tabContext = activeTabContext()) {
   if (!isCurrentTabContext(tabContext)) return;
   latestStats = response.data || null;
   renderFooter();
+  renderContextMeter();
+  renderWorkspaceDashboard();
 }
 
 async function refreshWorkspace(tabContext = activeTabContext()) {
@@ -12703,6 +14785,7 @@ async function refreshWorkspace(tabContext = activeTabContext()) {
   latestWorkspace = nextWorkspace;
   rememberServerStartCwd(nextWorkspace?.cwd);
   renderFooter();
+  renderWorkspaceDashboard();
 }
 
 function renderNetworkStatus() {
@@ -12776,11 +14859,53 @@ async function refreshFooterData(tabContext = activeTabContext()) {
   await Promise.allSettled([refreshStats(tabContext), refreshWorkspace(tabContext)]);
 }
 
+// Session key of the last applied transcript fetch; deltas are only
+// attempted while the tab+session is unchanged.
+let latestMessagesSessionKey = "";
+
+function messagesLookEqual(a, b) {
+  return !!a && !!b && a.role === b.role && String(a.timestamp || "") === String(b.timestamp || "")
+    && contentSignature(a.content) === contentSignature(b.content);
+}
+
+/**
+ * Merge a /api/messages?since= delta into the previous transcript. Returns
+ * null whenever the delta cannot be applied safely — history shrank
+ * (compaction), counts are inconsistent, or the one-message overlap no
+ * longer matches (fork/resume/retroactive edit) — in which case the caller
+ * falls back to a full fetch. Merged arrays keep previous message object
+ * identities, which keeps the WeakMap signature cache hot.
+ */
+function mergeMessagesDelta(previous, data) {
+  if (!data || !Array.isArray(data.messages)) return null;
+  const since = Number(data.since);
+  const totalCount = Number(data.totalCount);
+  if (!Number.isInteger(since) || !Number.isInteger(totalCount)) return null;
+  if (since > previous.length || totalCount < previous.length) return null;
+  if (totalCount !== since + data.messages.length) return null;
+  if (since < previous.length && !messagesLookEqual(previous[since], data.messages[0])) return null;
+  return previous.slice(0, since).concat(data.messages);
+}
+
 async function refreshMessages(tabContext = activeTabContext()) {
   if (!tabContext.tabId) return;
-  const response = await api("/api/messages", { tabId: tabContext.tabId });
-  if (!isCurrentTabContext(tabContext)) return;
-  latestMessages = response.data?.messages || [];
+  const previousMessages = latestMessages;
+  const sessionKey = `${tabContext.tabId}|${currentState?.sessionId || ""}`;
+  let nextMessages = null;
+  if (previousMessages.length > 1 && sessionKey === latestMessagesSessionKey) {
+    // Delta fetch with a one-message overlap: the last known message is
+    // re-requested so retroactive changes are detected via mergeMessagesDelta.
+    const response = await api(`/api/messages?since=${previousMessages.length - 1}`, { tabId: tabContext.tabId });
+    if (!isCurrentTabContext(tabContext)) return;
+    nextMessages = mergeMessagesDelta(previousMessages, response.data);
+  }
+  if (!nextMessages) {
+    const response = await api("/api/messages", { tabId: tabContext.tabId });
+    if (!isCurrentTabContext(tabContext)) return;
+    nextMessages = response.data?.messages || [];
+  }
+  latestMessages = nextMessages;
+  latestMessagesSessionKey = sessionKey;
   const preserveLiveStream = liveStreamRenderActive();
   if (!preserveLiveStream) resetStreamBubble();
   renderMessages(latestMessages);
@@ -12821,6 +14946,7 @@ async function refreshModels(tabContext = activeTabContext()) {
   syncModelSelectToState();
   renderFooter();
   renderFeedbackTray();
+  if (elements.commandPaletteDialog?.open) renderCommandPalette();
 }
 
 function syncModelSelectToState() {
@@ -13297,6 +15423,162 @@ async function refreshCommands(tabContext = activeTabContext()) {
   availableCommands = normalizeCommands(response.data?.commands || []);
   updateOptionalFeatureAvailability();
   renderCommands();
+  if (elements.commandPaletteDialog?.open) renderCommandPalette();
+}
+
+function paletteText(value) {
+  return String(value || "").toLowerCase();
+}
+
+function paletteItemMatches(item, query) {
+  const text = [item.label, item.description, item.kind, item.keywords].map(paletteText).join(" ");
+  return query.split(/\s+/).filter(Boolean).every((token) => text.includes(token));
+}
+
+function commandPaletteCoreItems() {
+  const items = [
+    { kind: "Action", label: "New tab", description: "Start an isolated Pi terminal in the current directory", keywords: "workspace session", run: () => createTerminalTab() },
+    { kind: "Action", label: "Choose directory for new tab", description: "Pick a cwd before starting a tab", keywords: "cwd folder workspace", run: () => createTerminalTabFromChosenDirectory({ triggerButton: elements.commandPaletteButton }) },
+    { kind: "Action", label: "New session", description: "Start a fresh session in the active tab", keywords: "/new clear", run: () => elements.newSessionButton.click() },
+    { kind: "Action", label: "Compact context", description: contextUsageDetail(), keywords: "/compact context window tokens", run: () => requestManualCompaction() },
+    { kind: "Action", label: footerAutoCompactionEnabled() ? "Disable auto-compaction" : "Enable auto-compaction", description: footerAutoCompactionToggleAction(), keywords: "context automatic", run: () => toggleFooterAutoCompaction() },
+    { kind: "Action", label: workspaceDashboardCollapsed ? "Show workspace dashboard" : "Hide workspace dashboard", description: "Toggle the launch/workspace overview", keywords: "home overview", run: () => setWorkspaceDashboardCollapsed(!workspaceDashboardCollapsed) },
+    { kind: "Action", label: document.body.classList.contains("side-panel-collapsed") ? "Show side panel" : "Hide side panel", description: "Toggle the Control Deck", keywords: "controls settings", run: () => setSidePanelCollapsed(!document.body.classList.contains("side-panel-collapsed"), { focusPanel: true }) },
+    { kind: "Action", label: "Change working directory", description: "Restart active tab in another cwd", keywords: "cwd folder workspace", run: () => changeActiveTabCwd() },
+    { kind: "Action", label: "Search transcript", description: "Open transcript search", keywords: "find", run: () => openChatSearch() },
+    { kind: "Pi", label: "/model", description: "Select the active model", keywords: "provider llm", run: () => runNativeCommandMenu("/model") },
+    { kind: "Pi", label: "/resume", description: "Resume a previous session", keywords: "sessions history", run: () => runNativeCommandMenu("/resume") },
+    { kind: "Pi", label: "/fork", description: "Fork from a previous user message", keywords: "branch edit retry", run: () => runNativeCommandMenu("/fork") },
+    { kind: "Pi", label: "/tree", description: "Navigate the session tree", keywords: "branch history", run: () => runNativeCommandMenu("/tree") },
+    { kind: "Pi", label: "/settings", description: "Open settings", keywords: "configuration", run: () => runNativeCommandMenu("/settings") },
+    { kind: "Pi", label: "/scoped-models", description: "Manage model cycling scope", keywords: "models cycle ctrl p", run: () => runNativeCommandMenu("/scoped-models") },
+    { kind: "Pi", label: "/tools", description: "Manage active tools", keywords: "capabilities", run: () => runNativeCommandMenu("/tools") },
+    { kind: "Pi", label: "/skills", description: "Manage active skills", keywords: "system prompt", run: () => runNativeCommandMenu("/skills") },
+  ];
+  if (isOptionalFeatureEnabled("statsCommand")) items.push({ kind: "Pi", label: "/stats-webui", description: "Open usage dashboard", keywords: "tokens cost budget", run: () => openStatsOverlay({ refresh: true }) });
+  return items;
+}
+
+function commandPaletteTabItems() {
+  return tabs.map((tab) => {
+    const indicator = tabIndicator(tab);
+    return {
+      kind: "Tab",
+      label: tab.id === activeTabId ? `Current tab: ${tab.title}` : `Switch to tab: ${tab.title}`,
+      description: `${indicator.label} · ${normalizeDisplayPath(tab.cwd || "")}`,
+      keywords: `${tab.id} ${tab.cwd || ""}`,
+      run: () => switchTab(tab.id),
+    };
+  });
+}
+
+function commandPaletteModelItems() {
+  return availableModels.map((model) => ({
+    kind: "Model",
+    label: `${model.provider}/${model.id}`,
+    description: model.name || (model.contextWindow ? `context ${formatFooterTokenCount(model.contextWindow)}` : "Set active model"),
+    keywords: `${model.provider} ${model.id} ${model.name || ""}`,
+    run: async () => {
+      const tabContext = activeTabContext();
+      const response = await api("/api/model", { method: "POST", body: { provider: model.provider, modelId: model.id }, tabId: tabContext.tabId });
+      if (!isCurrentTabContext(tabContext)) return;
+      applyOptimisticModelSelection(response.data || model, tabContext);
+      await refreshState(tabContext);
+      await refreshModels(tabContext);
+    },
+  }));
+}
+
+function commandPaletteSlashItems() {
+  return visibleCommands().slice(0, 140).map((command) => ({
+    kind: command.source || "Command",
+    label: `/${command.name}`,
+    description: command.description || "Run slash command",
+    keywords: `${command.location || ""} ${command.path || ""}`,
+    run: () => sendPrompt("prompt", `/${command.name}`),
+  }));
+}
+
+function buildCommandPaletteItems() {
+  return [
+    ...commandPaletteCoreItems(),
+    ...commandPaletteTabItems(),
+    ...commandPaletteModelItems(),
+    ...commandPaletteSlashItems(),
+  ];
+}
+
+function filteredCommandPaletteItems() {
+  const query = paletteText(elements.commandPaletteInput?.value || "").trim();
+  const items = buildCommandPaletteItems();
+  return (query ? items.filter((item) => paletteItemMatches(item, query)) : items).slice(0, 80);
+}
+
+function setCommandPaletteIndex(index) {
+  const count = commandPaletteItems.length;
+  commandPaletteIndex = count ? (index + count) % count : 0;
+  renderCommandPaletteList();
+}
+
+function renderCommandPaletteList() {
+  const list = elements.commandPaletteList;
+  if (!list) return;
+  list.replaceChildren();
+  if (!commandPaletteItems.length) {
+    list.append(make("div", "command-palette-empty muted", "No matching actions."));
+    return;
+  }
+  commandPaletteItems.forEach((item, index) => {
+    const button = make("button", `command-palette-item${index === commandPaletteIndex ? " active" : ""}`);
+    button.type = "button";
+    button.setAttribute("role", "option");
+    button.setAttribute("aria-selected", index === commandPaletteIndex ? "true" : "false");
+    button.addEventListener("click", () => executeCommandPaletteItem(item));
+    button.append(
+      make("span", "command-palette-item-kind", item.kind || "Action"),
+      make("span", "command-palette-item-label", item.label || "Untitled action"),
+      make("span", "command-palette-item-description", item.description || ""),
+    );
+    list.append(button);
+  });
+  const active = list.children[commandPaletteIndex];
+  active?.scrollIntoView({ block: "nearest" });
+}
+
+function renderCommandPalette() {
+  commandPaletteItems = filteredCommandPaletteItems();
+  if (commandPaletteIndex >= commandPaletteItems.length) commandPaletteIndex = 0;
+  renderCommandPaletteList();
+}
+
+function openCommandPalette(initialQuery = "") {
+  setComposerActionsOpen(false);
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(false);
+  setAppRunnerMenuOpen(false);
+  setOptionsMenuOpen(false);
+  if (elements.commandPaletteInput) elements.commandPaletteInput.value = initialQuery;
+  commandPaletteIndex = 0;
+  renderCommandPalette();
+  if (!elements.commandPaletteDialog.open) elements.commandPaletteDialog.showModal();
+  queueMicrotask(() => {
+    elements.commandPaletteInput?.focus();
+    elements.commandPaletteInput?.select();
+  });
+}
+
+function closeCommandPalette() {
+  if (elements.commandPaletteDialog?.open) elements.commandPaletteDialog.close();
+}
+
+async function executeCommandPaletteItem(item = commandPaletteItems[commandPaletteIndex]) {
+  if (!item) return;
+  closeCommandPalette();
+  try {
+    await item.run?.();
+  } catch (error) {
+    addEvent(error.message || String(error), "error");
+  }
 }
 
 async function refreshAll(tabContext = activeTabContext()) {
@@ -13871,6 +16153,7 @@ function handleExtensionUiRequest(request) {
       } else {
         statusEntries.delete(statusKey);
       }
+      if (statusKey === STATS_WEBUI_STATUS_KEY) handleStatsWebuiStatus(request.statusText);
       updateOptionalFeatureAvailability();
       renderStatus();
       return;
@@ -14174,7 +16457,9 @@ function handleEvent(event) {
       handleToolExecutionEnd(event);
       setRunIndicatorActivity(`Tool ${runIndicatorToolName(event.toolName)} ${event.isError ? "failed" : "finished"}; waiting for the agent's next step…`);
       addEvent(`tool ${event.toolName} ${event.isError ? "failed" : "finished"}`, event.isError ? "error" : "info");
-      scheduleRefreshMessages();
+      // No transcript refresh here: the live tool card already shows the
+      // result via renderLiveToolRun, and message_end/agent_end reconcile the
+      // transcript. This avoids one fetch+render per tool call.
       scheduleRefreshFooter();
       break;
     case "compaction_start":
@@ -14431,6 +16716,8 @@ elements.newTabMenu?.addEventListener("focusout", () => {
 elements.newTabCurrentDirectoryButton?.addEventListener("click", () => createTerminalTab(currentDirectoryForNewTab(), { triggerButton: elements.newTabCurrentDirectoryButton }));
 elements.newTabChooseDirectoryButton?.addEventListener("click", () => createTerminalTabFromChosenDirectory({ triggerButton: elements.newTabChooseDirectoryButton }));
 elements.closeAllTabsButton.addEventListener("click", () => closeAllTerminalTabs());
+elements.commandPaletteButton?.addEventListener("click", () => openCommandPalette());
+elements.workspaceDashboardToggleButton?.addEventListener("click", () => setWorkspaceDashboardCollapsed(!workspaceDashboardCollapsed));
 elements.gitWorkflowButton.addEventListener("click", () => {
   setComposerActionsOpen(false);
   startGitWorkflow();
@@ -14556,6 +16843,7 @@ elements.releaseNpmButton.addEventListener("click", () => runPublishWorkflow("/r
 elements.releaseAurButton.addEventListener("click", () => runPublishWorkflow("/release-aur"));
 elements.nativeSkillsButton.addEventListener("click", () => runNativeCommandMenu("/skills"));
 elements.nativeToolsButton.addEventListener("click", () => runNativeCommandMenu("/tools"));
+elements.optionsCommandPaletteButton.addEventListener("click", () => openCommandPalette());
 elements.optionsResumeButton.addEventListener("click", () => runNativeCommandMenu("/resume"));
 elements.optionsReloadButton.addEventListener("click", () => runNativeCommandMenu("/reload"));
 elements.optionsNameButton.addEventListener("click", () => runNativeCommandMenu("/name"));
@@ -14564,6 +16852,25 @@ elements.optionsSettingsButton.addEventListener("click", () => runNativeCommandM
 elements.optionsExportButton.addEventListener("click", () => runNativeCommandMenu("/export"));
 elements.optionsForkButton.addEventListener("click", () => runNativeCommandMenu("/fork"));
 elements.optionsTreeButton.addEventListener("click", () => runNativeCommandMenu("/tree"));
+elements.optionsStatsButton?.addEventListener("click", () => openStatsOverlay({ refresh: true }));
+elements.statsOverlayRefreshButton?.addEventListener("click", () => requestStatsOverlayRefresh());
+elements.statsOverlayScope?.addEventListener("change", () => {
+  const custom = elements.statsOverlayScope?.value === "custom";
+  if (elements.statsOverlayCustomDays) elements.statsOverlayCustomDays.hidden = !custom;
+  if (custom) {
+    elements.statsOverlayCustomDays?.focus();
+    return;
+  }
+  requestStatsOverlayRefresh();
+});
+elements.statsOverlayCustomDays?.addEventListener("change", () => requestStatsOverlayRefresh());
+elements.statsOverlayCustomDays?.addEventListener("keydown", (event) => {
+  if (event.key !== "Enter") return;
+  event.preventDefault();
+  requestStatsOverlayRefresh();
+});
+elements.statsOverlayCloseButton?.addEventListener("click", () => elements.statsOverlayDialog?.close());
+elements.statsOverlayDialog?.querySelector("form")?.addEventListener("submit", (event) => event.preventDefault());
 elements.gitWorkflowSteps.addEventListener("click", (event) => {
   const target = event.target instanceof Element ? event.target : null;
   const button = target?.closest("[data-git-workflow-process]");
@@ -14594,6 +16901,42 @@ elements.nativeCommandDialog.addEventListener("close", () => {
   elements.nativeCommandSearch.oninput = null;
   nativeCommandTabId = null;
 });
+elements.commandPaletteDialog?.querySelector("form")?.addEventListener("submit", (event) => event.preventDefault());
+elements.commandPaletteDialog?.addEventListener("cancel", (event) => {
+  event.preventDefault();
+  closeCommandPalette();
+});
+elements.commandPaletteInput?.addEventListener("input", () => {
+  commandPaletteIndex = 0;
+  renderCommandPalette();
+});
+elements.commandPaletteInput?.addEventListener("keydown", (event) => {
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    setCommandPaletteIndex(commandPaletteIndex + 1);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    setCommandPaletteIndex(commandPaletteIndex - 1);
+  } else if (event.key === "Enter") {
+    event.preventDefault();
+    executeCommandPaletteItem();
+  } else if (event.key === "Escape") {
+    event.preventDefault();
+    closeCommandPalette();
+  }
+});
+elements.editRetryDialog?.querySelector("form")?.addEventListener("submit", (event) => event.preventDefault());
+elements.editRetryDialog?.addEventListener("cancel", (event) => {
+  event.preventDefault();
+  closeEditRetryDialog();
+});
+elements.editRetryDialog?.addEventListener("close", () => {
+  activeEditRetry = null;
+  setEditRetryBusy(false);
+});
+elements.editRetryCancelButton?.addEventListener("click", closeEditRetryDialog);
+elements.editRetryForkButton?.addEventListener("click", () => submitEditRetry({ send: false }));
+elements.editRetrySendButton?.addEventListener("click", () => submitEditRetry({ send: true }));
 
 function resetAbortLongPressAffordance() {
   clearTimeout(abortLongPressTimer);
@@ -14679,33 +17022,7 @@ elements.newSessionButton.addEventListener("click", async () => {
 });
 elements.compactButton.addEventListener("click", async () => {
   setComposerActionsOpen(false);
-  const tabContext = activeTabContext();
-  try {
-    elements.compactButton.disabled = true;
-    elements.compactButton.textContent = "Compacting…";
-    setRunIndicatorActivity("Requesting context compaction…");
-    scrollChatToBottom({ force: true });
-    markContextUsageUnknownAfterCompaction(tabContext.tabId);
-    renderFooter();
-    addEvent("manual compaction requested");
-    await api("/api/compact", { method: "POST", body: {}, tabId: tabContext.tabId });
-    if (!isCurrentTabContext(tabContext)) return;
-    scheduleRefreshState(120, tabContext);
-    scheduleRefreshMessages(600, tabContext);
-    scheduleRefreshFooter(600, tabContext);
-  } catch (error) {
-    if (isCurrentTabContext(tabContext)) {
-      clearContextUsageUnknownAfterCompaction(tabContext.tabId);
-      clearRunIndicatorActivity();
-      renderFooter();
-      addEvent(error.message, "error");
-    }
-  } finally {
-    if (isCurrentTabContext(tabContext)) {
-      elements.compactButton.disabled = !!currentState?.isCompacting;
-      elements.compactButton.textContent = currentState?.isCompacting ? "Compacting…" : "Compact";
-    }
-  }
+  await requestManualCompaction({ triggerButton: elements.compactButton });
 });
 elements.setModelButton.addEventListener("click", async () => {
   if (!elements.modelSelect.value) return;
@@ -14850,7 +17167,7 @@ function isTextEntryTarget(target) {
 
 function shouldHandleNativeAppShortcut(event) {
   if (event.defaultPrevented) return false;
-  if (elements.dialog?.open || elements.pathPickerDialog?.open || elements.gitChangesDialog?.open || elements.nativeCommandDialog?.open || elements.appRunnerInfoDialog?.open) return false;
+  if (elements.dialog?.open || elements.pathPickerDialog?.open || elements.gitChangesDialog?.open || elements.commandPaletteDialog?.open || elements.editRetryDialog?.open || elements.nativeCommandDialog?.open || elements.appRunnerInfoDialog?.open) return false;
   return event.target === elements.promptInput || !isTextEntryTarget(event.target);
 }
 
@@ -14860,6 +17177,11 @@ function handleNativeAppShortcut(event) {
   const lowerKey = String(key || "").toLowerCase();
   const ctrlOrMeta = event.ctrlKey || event.metaKey;
 
+  if (ctrlOrMeta && !event.altKey && !event.shiftKey && lowerKey === "k") {
+    event.preventDefault();
+    openCommandPalette();
+    return;
+  }
   if (ctrlOrMeta && !event.altKey && lowerKey === "l") {
     event.preventDefault();
     openNativeModelSelector();
@@ -14900,6 +17222,118 @@ function handleNativeAppShortcut(event) {
   }
 }
 
+// --- Transcript search (Ctrl/Cmd+F) ---
+let chatSearchMatches = [];
+let chatSearchIndex = -1;
+let chatSearchTimer = null;
+
+function chatSearchQueryText() {
+  return (elements.chatSearchInput?.value || "").trim().toLowerCase();
+}
+
+function collectChatSearchMatches(query) {
+  if (!query) return [];
+  const matches = [];
+  for (const bubble of elements.chat.querySelectorAll(".message")) {
+    if (bubble === runIndicatorBubble || bubble.classList.contains("runIndicator")) continue;
+    if ((bubble.textContent || "").toLowerCase().includes(query)) matches.push(bubble);
+  }
+  return matches;
+}
+
+function clearChatSearchHighlights() {
+  for (const bubble of elements.chat.querySelectorAll(".message.search-current")) bubble.classList.remove("search-current");
+}
+
+function updateChatSearchCount() {
+  if (!elements.chatSearchCount) return;
+  const query = chatSearchQueryText();
+  elements.chatSearchCount.textContent = !query ? "" : chatSearchMatches.length === 0 ? "0/0" : `${chatSearchIndex + 1}/${chatSearchMatches.length}`;
+}
+
+function focusChatSearchMatch() {
+  const bubble = chatSearchMatches[chatSearchIndex];
+  if (!bubble) return;
+  if (!bubble.isConnected) {
+    runChatSearch({ navigate: false });
+    return;
+  }
+  clearChatSearchHighlights();
+  bubble.classList.add("search-current");
+  const query = chatSearchQueryText();
+  for (const details of bubble.querySelectorAll("details")) {
+    if (!details.open && (details.textContent || "").toLowerCase().includes(query)) details.open = true;
+  }
+  autoFollowChat = false;
+  lastChatProgrammaticScrollAt = performance.now();
+  bubble.scrollIntoView({ block: "center", behavior: "instant" });
+  updateJumpToLatestButton();
+  updateChatSearchCount();
+}
+
+function runChatSearch({ navigate = false } = {}) {
+  const query = chatSearchQueryText();
+  clearChatSearchHighlights();
+  chatSearchMatches = collectChatSearchMatches(query);
+  if (chatSearchIndex >= chatSearchMatches.length || chatSearchIndex < 0) chatSearchIndex = chatSearchMatches.length - 1;
+  updateChatSearchCount();
+  if (navigate) focusChatSearchMatch();
+}
+
+function stepChatSearch(step) {
+  if (chatSearchMatches.some((bubble) => !bubble.isConnected)) runChatSearch();
+  if (!chatSearchMatches.length) {
+    runChatSearch();
+    if (!chatSearchMatches.length) return;
+  }
+  chatSearchIndex = (chatSearchIndex + step + chatSearchMatches.length) % chatSearchMatches.length;
+  focusChatSearchMatch();
+}
+
+function openChatSearch() {
+  if (!elements.chatSearchBar) return;
+  elements.chatSearchBar.hidden = false;
+  elements.chatSearchInput?.focus();
+  elements.chatSearchInput?.select();
+  if (chatSearchQueryText()) runChatSearch();
+}
+
+function closeChatSearch() {
+  if (!elements.chatSearchBar || elements.chatSearchBar.hidden) return;
+  elements.chatSearchBar.hidden = true;
+  clearChatSearchHighlights();
+  chatSearchMatches = [];
+  chatSearchIndex = -1;
+  updateChatSearchCount();
+}
+
+elements.chatSearchInput?.addEventListener("input", () => {
+  clearTimeout(chatSearchTimer);
+  chatSearchTimer = setTimeout(() => {
+    chatSearchIndex = -1;
+    runChatSearch({ navigate: true });
+  }, 150);
+});
+elements.chatSearchInput?.addEventListener("keydown", (event) => {
+  if (event.key === "Enter") {
+    event.preventDefault();
+    stepChatSearch(event.shiftKey ? -1 : 1);
+  } else if (event.key === "Escape") {
+    event.preventDefault();
+    event.stopPropagation();
+    closeChatSearch();
+  }
+});
+elements.chatSearchPrevButton?.addEventListener("click", () => stepChatSearch(-1));
+elements.chatSearchNextButton?.addEventListener("click", () => stepChatSearch(1));
+elements.chatSearchCloseButton?.addEventListener("click", closeChatSearch);
+window.addEventListener("keydown", (event) => {
+  if ((event.ctrlKey || event.metaKey) && !event.altKey && !event.shiftKey && event.key.toLowerCase() === "f") {
+    event.preventDefault();
+    openChatSearch();
+  }
+});
+
 window.addEventListener("keydown", handleNativeAppShortcut, { capture: true });
 document.addEventListener("visibilitychange", () => {
   if (document.visibilityState === "visible") scheduleForegroundReconcile("visibility resume", 0);
@@ -14909,7 +17343,7 @@ window.addEventListener("focus", () => scheduleForegroundReconcile("window focus
 window.addEventListener("online", () => scheduleForegroundReconcile("network online", 0));
 window.addEventListener("keydown", (event) => {
   if (event.key !== "Escape") return;
-  if (elements.dialog?.open || elements.pathPickerDialog?.open || elements.gitChangesDialog?.open) return;
+  if (elements.dialog?.open || elements.pathPickerDialog?.open || elements.gitChangesDialog?.open || elements.commandPaletteDialog?.open || elements.editRetryDialog?.open) return;
   if (publishMenuOpen) {
     setPublishMenuOpen(false);
     return;
@@ -15100,6 +17534,7 @@ restoreStoredSkillUsage();
 restoreBusyPromptBehaviorSetting();
 updateComposerModeButtons();
 updateOptionalFeatureAvailability();
+refreshOptionalFeaturePackageStatuses({ announce: true });
 renderAppRunnerControls();
 renderLoadedPromptListPreview();
 loadLastUserPromptCache();
@@ -15116,6 +17551,7 @@ restoreAgentDoneNotificationsSetting();
 restoreThinkingVisibilitySetting();
 restoreTerminalTabsLayoutSetting();
 restoreToolOutputExpansionSetting();
+restoreWorkspaceDashboardState();
 restoreSidePanelSectionState();
 bindSidePanelSectionToggles();
 restoreSidePanelState();