@firstpick/pi-package-webui 0.3.9 → 0.4.0

package/public/app.js

@@ -28,6 +28,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"),
@@ -80,7 +86,9 @@ const elements = {
   optionsExportButton: $("#optionsExportButton"),
   optionsForkButton: $("#optionsForkButton"),
   optionsTreeButton: $("#optionsTreeButton"),
+  optionsStatsButton: $("#optionsStatsButton"),
   gitWorkflowPanel: $("#gitWorkflowPanel"),
+  gitWorkflowKicker: $("#gitWorkflowKicker"),
   gitWorkflowTitle: $("#gitWorkflowTitle"),
   gitWorkflowHint: $("#gitWorkflowHint"),
   gitWorkflowSteps: $("#gitWorkflowSteps"),
@@ -188,6 +196,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 +274,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 = "";
@@ -356,6 +380,11 @@ 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";
@@ -493,10 +522,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 +550,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"];
@@ -545,9 +575,15 @@ 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,
   };
@@ -564,13 +600,22 @@ function gitWorkflowActionDonePatch(workflow, process) {
 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: "",
     messageRequestedAt: 0,
     branchName: "",
     branchNameRequestedAt: 0,
@@ -629,6 +674,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 +705,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 +739,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);
@@ -2072,12 +2177,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 +2208,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 +2224,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 +2239,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 +3139,7 @@ function renderOptionalFeatureDependentDisplays() {
   streamBubble = null;
   streamText = null;
   streamBubbleVisibleSince = 0;
-  renderAllMessages({ preserveScroll: true });
+  renderAllMessages({ preserveScroll: true, forceRebuild: true });
   if (streamRawText) renderStreamingAssistantText();
 }
 
@@ -3661,6 +3766,7 @@ function resetActiveTabUi() {
   eventSource = null;
   currentState = null;
   latestStats = null;
+  latestStatsOverlayPayload = null;
   latestWorkspace = null;
   latestMessages = [];
   clearRunIndicatorActivity({ render: false });
@@ -5239,7 +5345,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 +5366,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");
   }
@@ -7726,6 +7835,472 @@ function renderAppRunnerWidget() {
   return node;
 }
 
+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" },
+];
+
+function statsNumber(value, fallback = 0) {
+  const number = Number(value);
+  return Number.isFinite(number) ? number : fallback;
+}
+
+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 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 formatStatsPercent(value) {
+  return `${statsNumber(value).toFixed(1)}%`;
+}
+
+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;
+  }
+}
+
+function currentStatsOverlayPayload() {
+  if (isOptionalFeatureDisabled("statsCommand")) return null;
+  return parseStatsWebuiPayloadRaw(statusEntries.get(STATS_WEBUI_STATUS_KEY)) || latestStatsOverlayPayload;
+}
+
+function statsScopeDaysFromPayload(payload) {
+  return payload?.scope?.mode === "range" && statsNumber(payload.scope.days) > 0 ? String(payload.scope.days) : "";
+}
+
+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 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 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 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;
+  }
+}
+
+function statsPromptEstimateSourceLabel(estimate = {}) {
+  if (estimate.source === "export-html") return "export-backed";
+  if (estimate.source === "fallback") return "live fallback";
+  return estimate.source || "estimate";
+}
+
+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();
@@ -7798,6 +8373,10 @@ function formatCommitMessagePreview(message) {
   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";
 }
@@ -7827,6 +8406,148 @@ function formatGitPrPreview(pr) {
   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";
@@ -7841,6 +8562,110 @@ function addGitWorkflowAction(label, handler, className = "", disabled = gitWork
   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 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 = "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 });
+    commitButton.disabled = !currentWorkflow || !!currentWorkflow.busy || !input.value.trim();
+  };
+  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();
+
+  field.append(input);
+  row.append(field, commitButton);
+  elements.gitWorkflowActions.append(row);
+}
+
 function setGitPrDialogStatus(message = "", level = "muted") {
   if (!elements.gitPrStatus) return;
   elements.gitPrStatus.textContent = message;
@@ -7869,6 +8694,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 +8737,88 @@ 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 selectGitWorkflowProcess(processValue, tabId = gitWorkflowActionTabId()) {
-  const workflow = gitWorkflowForTab(tabId);
-  if (!workflow) return;
-  const process = GIT_WORKFLOW_PROCESS_VALUES.has(processValue) ? processValue : "stage";
+function selectGitInitWorkflowProcess(processValue, tabId, workflow) {
+  const process = GIT_INIT_WORKFLOW_PROCESS_VALUES.has(processValue) ? processValue : "init";
   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 };
-
-  if (process === "stage") {
-    setGitWorkflow({ ...base, step: "add", message: null, output: "Ready to stage all changes with git add ." }, { tabId });
-    return;
-  }
+  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: "",
+    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 = { mode: "standard", active: true, process, busy: false, error: "", githubUsername: "", repoName: "", remoteUrl: "", stack: "", readmeRequestedAt: 0, gitignoreRequestedAt: 0, initFilesStatus: null, manualCommitMessage: "", 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 +8831,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 +8859,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 +8967,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 +8993,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 +9011,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 +9042,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 +9086,21 @@ 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: "",
     messageRequestedAt: 0,
     branchName: "",
     branchNameRequestedAt: 0,
@@ -8082,11 +9112,308 @@ function startGitWorkflow(tabId = activeTabId) {
   }, { 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: "",
+    messageRequestedAt: 0,
+    branchName: "",
+    branchNameRequestedAt: 0,
+    actionsDone: createGitWorkflowActionsDone(),
+    prMode: false,
+    prBranch: "",
+    pr: null,
+    prRequestedAt: 0,
+  }, { 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 });
@@ -8300,7 +9627,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 +9641,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" ? String(workflow.manualCommitMessage || "").trim() : "";
+  if (variant === "input" && !inputMessage) {
+    failGitWorkflow(new Error("Type a commit message before using Commit input."), 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 +9825,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 +10576,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 +11264,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 +11949,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 +11963,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;
@@ -10598,9 +12015,9 @@ function appendMessage(message, { streaming = false, messageIndex = -1, transien
   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 +12047,7 @@ function appendTranscriptMessage(message, { streaming = false, messageIndex = -1
       transient: false,
       animateEntry: animateEntry && isActionTranscriptMessage(transcriptMessage),
       reusableToolCards,
+      itemKey,
     });
     if (transcriptMessage.role === "assistant") finalOutput = created;
   });
@@ -10901,20 +12319,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 });
@@ -11319,6 +12886,17 @@ 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;
@@ -11332,8 +12910,9 @@ function renderOptionalFeaturePanel() {
       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 +12952,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();
 }
 
@@ -12472,7 +14061,7 @@ function renderStreamingAssistantText() {
   const assistantText = stripTodoProgressLines(streamRawText, { streaming: true });
   if (assistantText) {
     ensureStreamBubble();
-    renderMarkdown(streamText, assistantText);
+    renderStreamingMarkdown(streamText, assistantText);
   } else {
     scheduleStreamBubbleHide();
   }
@@ -12525,6 +14114,7 @@ function resetStreamBubble() {
   streamBubble = null;
   streamText = null;
   streamRawText = "";
+  streamMarkdownState = null;
   streamBubbleVisibleSince = 0;
   streamToolCallSeen = false;
   streamThinkingBubble = null;
@@ -12776,11 +14366,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);
@@ -13871,6 +15503,7 @@ function handleExtensionUiRequest(request) {
       } else {
         statusEntries.delete(statusKey);
       }
+      if (statusKey === STATS_WEBUI_STATUS_KEY) handleStatsWebuiStatus(request.statusText);
       updateOptionalFeatureAvailability();
       renderStatus();
       return;
@@ -14174,7 +15807,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":
@@ -14564,6 +16199,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]");
@@ -14900,6 +16554,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);