@firstpick/pi-package-webui 0.3.6 → 0.3.8

package/public/app.js

@@ -93,6 +93,13 @@ const elements = {
   gitPrStatus: $("#gitPrStatus"),
   gitPrCancelButton: $("#gitPrCancelButton"),
   gitPrCreateButton: $("#gitPrCreateButton"),
+  gitChangesDialog: $("#gitChangesDialog"),
+  gitChangesTitle: $("#gitChangesTitle"),
+  gitChangesSubtitle: $("#gitChangesSubtitle"),
+  gitChangesStatus: $("#gitChangesStatus"),
+  gitChangesBody: $("#gitChangesBody"),
+  gitChangesRefreshButton: $("#gitChangesRefreshButton"),
+  gitChangesCloseButton: $("#gitChangesCloseButton"),
   modelSelect: $("#modelSelect"),
   setModelButton: $("#setModelButton"),
   thinkingSelect: $("#thinkingSelect"),
@@ -202,6 +209,7 @@ let streamTextRenderTimer = null;
 let streamToolCallSeen = false;
 let streamThinkingBubble = null;
 let streamThinking = null;
+let streamMessageActive = false;
 let runIndicatorBubble = null;
 let runIndicatorText = null;
 let runIndicatorMeta = null;
@@ -219,6 +227,9 @@ let foregroundReconcileTimer = null;
 let eventSource = null;
 let activeDialog = null;
 let activeGitPrDialogResolve = null;
+let gitChangesState = { loading: false, error: "", data: null, tabId: null };
+let gitChangesRequestSerial = 0;
+const gitChangesUntrackedContentRequests = new Set();
 let nativeCommandTabId = null;
 let pathPickerState = null;
 let firstTerminalCwdPromptShown = false;
@@ -305,6 +316,10 @@ let chatUserScrollIntentUntil = 0;
 let mobileFooterExpanded = false;
 let footerModelPickerOpen = false;
 let footerThinkingPickerOpen = false;
+let footerAutoCompactionToggleInFlight = false;
+let footerBranchPickerOpen = false;
+let footerBranchPickerState = { loading: false, error: "", branches: [], current: "", root: "", switching: "", tabId: null };
+let footerBranchPickerRequestSerial = 0;
 let publishMenuOpen = false;
 let maxVisualViewportHeight = 0;
 let abortRequestInFlight = false;
@@ -341,6 +356,7 @@ 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_CHANGES_RENDER_ROW_LIMIT = 4000;
 const LAST_USER_PROMPT_STORAGE_KEY = "pi-webui-last-user-prompts";
 const PROMPT_HISTORY_STORAGE_KEY = "pi-webui-prompt-history";
 const PROMPT_LIST_STORAGE_KEY = "pi-webui-prompt-lists";
@@ -410,6 +426,7 @@ const optionalFeatureAvailability = {
   gitWorkflow: false,
   releaseNpm: false,
   releaseAur: false,
+  safetyGuard: false,
   statsCommand: false,
   gitFooterStatus: false,
   tuiSkillsCommand: false,
@@ -439,6 +456,13 @@ const OPTIONAL_FEATURES = [
     capabilityLabel: "/release-aur",
     description: "Publish menu action, setup helpers, skills, and AUR release widgets.",
   },
+  {
+    id: "safetyGuard",
+    label: "Safety guard",
+    packageName: "@firstpick/pi-extension-safety-guard",
+    capabilityLabel: "/safety-guard command or safety-guard status event",
+    description: "Interactive guardrails for dangerous bash commands and protected file edits.",
+  },
   {
     id: "tuiSkillsCommand",
     label: "TUI Skills command",
@@ -489,6 +513,7 @@ const OPTIONAL_COMMAND_FEATURES = new Map([
   ["pr", "gitWorkflow"],
   ["release-npm", "releaseNpm"],
   ["release-aur", "releaseAur"],
+  ["safety-guard", "safetyGuard"],
   ["skills", "tuiSkillsCommand"],
   ["tools", "tuiToolsCommand"],
   ["stats", "statsCommand"],
@@ -626,20 +651,22 @@ const GIT_WORKFLOW_ACTIVE_INDEX = {
   done: 4,
 };
 const GIT_WORKFLOW_CREATE_PR_TOOLTIP = [
-  "Create PR:",
+  "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 so you can choose Commit short or Commit long on that branch.",
+  "5. Return here to commit short or long 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 = [
-  "Manual branch:",
+  "Manual PR branch:",
   "1. Skip agent branch-name generation.",
   "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 so you can choose Commit short or Commit long on that branch.",
+  "5. Return here to commit short or long on that branch.",
+  "6. Push and Create PR will push upstream, run /pr, let you review, then run gh pr create.",
 ].join("\n");
 
 function make(tag, className, text) {
@@ -1480,10 +1507,11 @@ function updateComposerModeButtons() {
 }
 
 function isFooterPickerOpen() {
-  return footerModelPickerOpen || footerThinkingPickerOpen;
+  return footerModelPickerOpen || footerThinkingPickerOpen || footerBranchPickerOpen;
 }
 
 function footerActivePickerTarget() {
+  if (footerBranchPickerOpen) return elements.statusBar.querySelector(".footer-branch.footer-meta-action");
   if (footerThinkingPickerOpen) return elements.statusBar.querySelector(".footer-thinking.footer-meta-action");
   if (footerModelPickerOpen) return elements.statusBar.querySelector(".footer-model.footer-meta-action, .footer-tui-model");
   return null;
@@ -1534,6 +1562,7 @@ function setMobileFooterExpanded(expanded) {
   if (mobileFooterExpanded && isFooterPickerOpen()) {
     footerModelPickerOpen = false;
     footerThinkingPickerOpen = false;
+    footerBranchPickerOpen = false;
     document.body.classList.remove("footer-model-picker-open");
     elements.statusBar.querySelectorAll(".footer-model-picker").forEach((node) => node.remove());
   }
@@ -1637,6 +1666,7 @@ function updateVisualViewportVars() {
     setMobileTabsExpanded(false);
     setMobileFooterExpanded(false);
     setFooterModelPickerOpen(false);
+    setFooterBranchPickerOpen(false);
     syncMobileChatToBottomForInput();
   }
   updateFooterModelPickerPosition();
@@ -1836,11 +1866,22 @@ function attachMessageCopyButton(bubble, message, body) {
   return button;
 }
 
+function safeHttpUrl(value, base = window.location.href) {
+  const text = String(value || "").trim();
+  if (!text) return "";
+  try {
+    const url = new URL(text, base);
+    return url.protocol === "http:" || url.protocol === "https:" ? url.href : "";
+  } catch {
+    return "";
+  }
+}
+
 function triggerNativeDownload(download) {
-  const url = String(download?.url || "").trim();
+  const url = safeHttpUrl(download?.url);
   if (!url) return false;
   const anchor = document.createElement("a");
-  anchor.href = new URL(url, window.location.href).href;
+  anchor.href = url;
   anchor.download = String(download.fileName || "");
   anchor.rel = "noopener";
   anchor.hidden = true;
@@ -3576,7 +3617,7 @@ function restoreActiveDraft() {
 
 function focusPromptInput({ defer = false } = {}) {
   const focus = () => {
-    if (!elements.promptInput || elements.dialog.open || elements.pathPickerDialog.open || elements.nativeCommandDialog.open || elements.appRunnerInfoDialog?.open || elements.promptListDialog?.open || elements.attachmentTextDialog?.open || elements.skillEditorDialog?.open || document.visibilityState === "hidden") return;
+    if (!elements.promptInput || elements.dialog.open || elements.pathPickerDialog.open || elements.gitChangesDialog?.open || elements.nativeCommandDialog.open || elements.appRunnerInfoDialog?.open || elements.promptListDialog?.open || elements.attachmentTextDialog?.open || elements.skillEditorDialog?.open || document.visibilityState === "hidden") return;
     try {
       elements.promptInput.focus({ preventScroll: true });
     } catch {
@@ -3942,6 +3983,8 @@ async function switchTab(tabId) {
   setMobileTabsExpanded(false);
   footerModelPickerOpen = false;
   footerThinkingPickerOpen = false;
+  footerBranchPickerOpen = false;
+  footerBranchPickerRequestSerial += 1;
   saveActiveDraft();
   const tabContext = setActiveTabId(tabId, { remember: true });
   resetActiveTabUi();
@@ -4645,11 +4688,15 @@ function footerStatsCostDisplay(stats = latestStats) {
   return `$${Number(stats.cost || 0).toFixed(3)} (${footerCostAuthLabel()})`;
 }
 
+function footerAutoCompactionEnabled(state = currentState) {
+  return state?.autoCompactionEnabled !== false;
+}
+
 function footerContextDisplayWithAuto(value, state = currentState) {
   const text = cleanStatusText(value);
   if (!text) return "";
   const withoutAuto = text.replace(/\s*\(auto\)\s*$/i, "");
-  return state?.autoCompactionEnabled !== false ? `${withoutAuto} (auto)` : withoutAuto;
+  return footerAutoCompactionEnabled(state) ? `${withoutAuto} (auto)` : withoutAuto;
 }
 
 function footerStatsContextDisplay(stats = latestStats) {
@@ -4662,6 +4709,48 @@ function footerStatsContextDisplay(stats = latestStats) {
   return footerContextDisplayWithAuto(`${percent}/${formatFooterTokenCount(contextWindow)}`);
 }
 
+function footerAutoCompactionToggleAction(state = currentState) {
+  return `Click to ${footerAutoCompactionEnabled(state) ? "disable" : "enable"} auto-compaction.`;
+}
+
+async function toggleFooterAutoCompaction(tabContext = activeTabContext()) {
+  if (footerAutoCompactionToggleInFlight || !tabContext.tabId) return;
+  const previousState = currentState;
+  const enabled = !footerAutoCompactionEnabled(previousState);
+  footerAutoCompactionToggleInFlight = true;
+  if (isCurrentTabContext(tabContext) && currentState) {
+    currentState = { ...currentState, autoCompactionEnabled: enabled };
+    renderStatus();
+  }
+  try {
+    await api("/api/auto-compaction", { method: "POST", body: { enabled }, tabId: tabContext.tabId });
+    if (!isCurrentTabContext(tabContext)) return;
+    addEvent(`Auto-compaction ${enabled ? "enabled" : "disabled"}`, "info");
+    try {
+      await refreshState(tabContext);
+    } catch (error) {
+      if (isCurrentTabContext(tabContext)) addEvent(`Auto-compaction updated, but state refresh failed: ${error.message || String(error)}`, "warn");
+    }
+  } catch (error) {
+    if (isCurrentTabContext(tabContext)) {
+      if (previousState) currentState = previousState;
+      addEvent(error.message || String(error), "error");
+      renderStatus();
+    }
+  } finally {
+    footerAutoCompactionToggleInFlight = false;
+    if (isCurrentTabContext(tabContext)) renderStatus();
+  }
+}
+
+function applyGitFooterContextToggleOptions(chip, options) {
+  if (chip?.key !== "context") return "";
+  options.onClick = () => toggleFooterAutoCompaction();
+  options.ariaPressed = footerAutoCompactionEnabled();
+  if (footerAutoCompactionToggleInFlight) options.ariaBusy = true;
+  return footerAutoCompactionToggleInFlight ? "Updating auto-compaction…" : footerAutoCompactionToggleAction();
+}
+
 function fallbackFooterStats() {
   return [footerStatsTokensDisplay(), footerStatsCostDisplay(), footerStatsContextDisplay()].filter(Boolean);
 }
@@ -4774,7 +4863,14 @@ function applyFooterTooltip(node, tooltip, options = {}) {
 }
 
 function footerMetric(icon, label, value, tone = "", options = {}) {
-  const node = make("span", `footer-metric ${tone}`.trim());
+  const isAction = typeof options.onClick === "function";
+  const node = make(isAction ? "button" : "span", ["footer-metric", tone, isAction ? "footer-metric-action" : ""].filter(Boolean).join(" "));
+  if (isAction) {
+    node.type = "button";
+    node.addEventListener("click", options.onClick);
+    if (options.ariaPressed !== undefined) node.setAttribute("aria-pressed", options.ariaPressed ? "true" : "false");
+    if (options.ariaBusy) node.setAttribute("aria-busy", "true");
+  }
   node.append(make("span", "footer-metric-icon", icon), make("span", "footer-metric-label", label), make("span", "footer-metric-value", value));
   return applyFooterTooltip(node, options.title || `${label}: ${value}`, { align: options.tooltipAlign });
 }
@@ -4816,16 +4912,26 @@ function applyFooterContextUsage(node, contextUsage) {
 
 function footerMeta(label, value, className = "", options = {}) {
   const isAction = typeof options.onClick === "function";
-  const node = make(isAction ? "button" : "span", `footer-meta ${className}${isAction ? " footer-meta-action" : ""}`.trim());
+  const node = make(isAction ? "button" : "span", ["footer-meta", className, isAction ? "footer-meta-action" : ""].filter(Boolean).join(" "));
   if (isAction) {
     node.type = "button";
     node.addEventListener("click", options.onClick);
+    if (options.ariaPressed !== undefined) node.setAttribute("aria-pressed", options.ariaPressed ? "true" : "false");
+    if (options.ariaBusy) node.setAttribute("aria-busy", "true");
   }
   node.append(make("span", "footer-meta-label", label), make("span", "footer-meta-value", value));
   return applyFooterTooltip(node, options.title || `${label}: ${value}`, { align: options.tooltipAlign });
 }
 
 const FOOTER_PAYLOAD_TONES = new Set(["pink", "blue", "mauve", "yellow", "green", "teal"]);
+const FOOTER_CHANGED_FILE_KINDS = new Set(["modified", "staged", "untracked", "conflicted"]);
+const FOOTER_CHANGED_FILE_KIND_ORDER = ["modified", "staged", "untracked", "conflicted"];
+const FOOTER_CHANGED_FILE_KIND_LABELS = {
+  modified: "Modified",
+  staged: "Staged",
+  untracked: "Untracked",
+  conflicted: "Conflicted",
+};
 const FOOTER_META_CLASS_BY_KEY = new Map([
   ["cwd", "footer-workspace"],
   ["git", "footer-branch"],
@@ -4860,6 +4966,21 @@ function cleanFooterPayloadText(value, fallback = "", maxLength = 240) {
   return text || fallback;
 }
 
+function normalizeFooterPayloadChangedFile(value) {
+  if (!value || typeof value !== "object") return null;
+  const path = cleanFooterPayloadText(value.path, "", 1000);
+  if (!path) return null;
+  const kind = FOOTER_CHANGED_FILE_KINDS.has(value.kind) ? value.kind : "modified";
+  const file = {
+    kind,
+    path,
+    status: cleanFooterPayloadText(value.status, "", 12),
+  };
+  const oldPath = cleanFooterPayloadText(value.oldPath, "", 1000);
+  if (oldPath) file.oldPath = oldPath;
+  return file;
+}
+
 function normalizeFooterPayloadChip(value, index) {
   if (!value || typeof value !== "object") return null;
   const key = cleanFooterPayloadText(value.key, `item-${index}`).replace(/[^a-z0-9_.:-]/gi, "-").slice(0, 64) || `item-${index}`;
@@ -4872,6 +4993,10 @@ function normalizeFooterPayloadChip(value, index) {
     tone: FOOTER_PAYLOAD_TONES.has(value.tone) ? value.tone : "",
     title: cleanFooterPayloadText(value.title, "", 4000),
   };
+  if (Array.isArray(value.files)) {
+    const files = value.files.map(normalizeFooterPayloadChangedFile).filter(Boolean).slice(0, 80);
+    if (files.length) chip.files = files;
+  }
   if (value.contextUsage && typeof value.contextUsage === "object") {
     const percent = typeof value.contextUsage.percent === "number" ? value.contextUsage.percent : Number.NaN;
     const contextWindow = Number(value.contextUsage.contextWindow);
@@ -5034,11 +5159,77 @@ function renderTuiFooterLine({ cwd, cwdTitle, message = "", stats = [], model =
   return line;
 }
 
-function renderGitFooterPayloadMetric(chip) {
-  const node = footerMetric(chip.icon || "•", chip.label, chip.value, chip.tone ? `tone-${chip.tone}` : "", {
-    title: gitFooterPayloadTooltip(chip),
-    tooltipAlign: gitFooterTooltipAlign(chip),
+function insertChangedFilePathReference(path) {
+  const input = elements.promptInput;
+  if (!input) return;
+  const reference = formatPathReference(path);
+  const start = input.selectionStart ?? input.value.length;
+  const end = input.selectionEnd ?? start;
+  const before = input.value.slice(0, start);
+  const after = input.value.slice(end);
+  const prefix = before && !/\s$/.test(before) ? " " : "";
+  const suffix = after && !/^\s/.test(after) ? " " : "";
+  input.value = `${before}${prefix}${reference}${suffix}${after}`;
+  const cursor = before.length + prefix.length + reference.length + suffix.length;
+  input.setSelectionRange(cursor, cursor);
+  input.focus();
+  resizePromptInput();
+  addEvent(`Added ${reference} to the prompt`, "info");
+}
+
+function changedFileDisplayPath(file) {
+  if (!file?.oldPath) return file?.path || "";
+  return `${file.oldPath} → ${file.path}`;
+}
+
+function renderChangedFileButton(file) {
+  const button = make("button", `footer-changed-file ${file.kind}`.trim());
+  button.type = "button";
+  button.title = `Add ${file.path} as an @ reference`;
+  button.addEventListener("click", (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    insertChangedFilePathReference(file.path);
   });
+  button.append(
+    make("span", "footer-changed-file-status", file.status || ""),
+    make("span", "footer-changed-file-path", changedFileDisplayPath(file)),
+  );
+  return button;
+}
+
+function renderChangedFilesGroup(kind, files) {
+  if (!files.length) return null;
+  const group = make("span", "footer-changed-files-group");
+  group.append(make("span", "footer-changed-files-heading", `${FOOTER_CHANGED_FILE_KIND_LABELS[kind] || kind} (${files.length})`));
+  const list = make("span", "footer-changed-files-list");
+  list.append(...files.map(renderChangedFileButton));
+  group.append(list);
+  return group;
+}
+
+function applyFooterChangedFilesDropdown(node, chip) {
+  if (chip?.key !== "changes" || !Array.isArray(chip.files) || chip.files.length === 0) return node;
+  node.classList.add("footer-changes-with-files");
+  node.tabIndex = 0;
+  node.removeAttribute("data-tooltip");
+  node.setAttribute("aria-label", `changes: ${chip.value}. Hover or focus to choose changed files. Click a file to add it as an @ reference.`);
+
+  const popover = make("span", "footer-changed-files-popover");
+  popover.append(make("span", "footer-changed-files-title", "Changed files"));
+  for (const kind of FOOTER_CHANGED_FILE_KIND_ORDER) {
+    const group = renderChangedFilesGroup(kind, chip.files.filter((file) => file.kind === kind));
+    if (group) popover.append(group);
+  }
+  node.append(popover);
+  return node;
+}
+
+function renderGitFooterPayloadMetric(chip) {
+  const options = { tooltipAlign: gitFooterTooltipAlign(chip) };
+  const action = applyGitFooterContextToggleOptions(chip, options);
+  options.title = gitFooterPayloadTooltip(chip, { action });
+  const node = footerMetric(chip.icon || "•", chip.label, chip.value, chip.tone ? `tone-${chip.tone}` : "", options);
   return chip.contextUsage ? applyFooterContextUsage(node, chip.contextUsage) : node;
 }
 
@@ -5048,6 +5239,12 @@ 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") {
+    options.onClick = () => setFooterBranchPickerOpen(!footerBranchPickerOpen);
+    action = "Click to switch to another local branch.";
+  } else if (chip.key === "changes") {
+    options.onClick = openGitChangesDialog;
+    action = "Click to view the current git diff.";
   } else if (chip.key === "model") {
     options.onClick = () => setFooterModelPickerOpen(!footerModelPickerOpen);
     action = "Click to choose another model.";
@@ -5055,9 +5252,15 @@ function renderGitFooterPayloadMeta(chip, tab) {
     options.onClick = () => setFooterThinkingPickerOpen(!footerThinkingPickerOpen);
     action = "Click to change thinking effort.";
   }
+  action = applyGitFooterContextToggleOptions(chip, options) || action;
   options.title = gitFooterPayloadTooltip(chip, { action });
   options.tooltipAlign = gitFooterTooltipAlign(chip);
   const node = footerMeta(chip.label, chip.value, footerMetaClassForPayload(chip), options);
+  applyFooterChangedFilesDropdown(node, chip);
+  if (chip.key === "git" && options.onClick) {
+    node.setAttribute("aria-haspopup", "listbox");
+    node.setAttribute("aria-expanded", footerBranchPickerOpen ? "true" : "false");
+  }
   return chip.contextUsage ? applyFooterContextUsage(node, chip.contextUsage) : node;
 }
 
@@ -5083,10 +5286,450 @@ function renderGitFooterPayload(payload) {
   elements.statusBar.append(row1, row2);
   if (footerModelPickerOpen) elements.statusBar.append(renderFooterModelPicker());
   if (footerThinkingPickerOpen) elements.statusBar.append(renderFooterThinkingPicker());
+  if (footerBranchPickerOpen) elements.statusBar.append(renderFooterBranchPicker());
   setMobileFooterExpanded(mobileFooterExpanded);
   updateFooterModelPickerPosition();
 }
 
+function cleanGitDiffPath(value = "") {
+  let text = String(value || "").trim();
+  if (!text || text === "/dev/null") return "";
+  if ((text.startsWith("a/") || text.startsWith("b/")) && text.length > 2) text = text.slice(2);
+  return text;
+}
+
+function gitDiffPathFromHeader(line) {
+  const match = String(line || "").match(/^diff --git\s+(.+?)\s+(.+)$/);
+  return cleanGitDiffPath(match?.[2] || match?.[1] || "");
+}
+
+function parseGitUnifiedDiff(diffText = "") {
+  const normalized = String(diffText || "").replace(/\r\n?/g, "\n");
+  const lines = normalized.split("\n");
+  const files = [];
+  let file = null;
+  let hunk = null;
+  let oldLineNumber = 0;
+  let newLineNumber = 0;
+  let deleteBuffer = [];
+  let addBuffer = [];
+
+  const flushChangeRows = () => {
+    if (!hunk || (!deleteBuffer.length && !addBuffer.length)) return;
+    if (file) {
+      file.deletions += deleteBuffer.length;
+      file.additions += addBuffer.length;
+    }
+    const rowCount = Math.max(deleteBuffer.length, addBuffer.length);
+    for (let i = 0; i < rowCount; i++) {
+      const left = deleteBuffer[i] || null;
+      const right = addBuffer[i] || null;
+      hunk.rows.push({
+        type: left && right ? "changed" : left ? "removed" : "added",
+        oldNumber: left?.number ?? "",
+        newNumber: right?.number ?? "",
+        left: left?.text ?? "",
+        right: right?.text ?? "",
+      });
+    }
+    deleteBuffer = [];
+    addBuffer = [];
+  };
+
+  const finishFile = () => {
+    flushChangeRows();
+    if (!file) return;
+    file.path = file.newPath || file.oldPath || file.headerPath || "diff";
+    files.push(file);
+    file = null;
+    hunk = null;
+  };
+
+  for (let index = 0; index < lines.length; index++) {
+    const line = lines[index] || "";
+    if (index === lines.length - 1 && !line && normalized.endsWith("\n")) continue;
+
+    if (line.startsWith("diff --git ")) {
+      finishFile();
+      file = { path: "", oldPath: "", newPath: "", headerPath: gitDiffPathFromHeader(line), headers: [line], hunks: [], additions: 0, deletions: 0 };
+      continue;
+    }
+
+    if (!file) {
+      if (!line.trim()) continue;
+      file = { path: "diff", oldPath: "", newPath: "", headerPath: "diff", headers: [], hunks: [], additions: 0, deletions: 0 };
+    }
+
+    if (line.startsWith("@@ ")) {
+      flushChangeRows();
+      const match = line.match(/^@@ -(\d+)(?:,\d+)? \+(\d+)(?:,\d+)? @@/);
+      oldLineNumber = Number.parseInt(match?.[1] || "0", 10) || 0;
+      newLineNumber = Number.parseInt(match?.[2] || "0", 10) || 0;
+      hunk = { header: line, rows: [] };
+      file.hunks.push(hunk);
+      continue;
+    }
+
+    if (!hunk) {
+      file.headers.push(line);
+      if (line.startsWith("--- ")) file.oldPath = cleanGitDiffPath(line.slice(4));
+      if (line.startsWith("+++ ")) file.newPath = cleanGitDiffPath(line.slice(4));
+      continue;
+    }
+
+    if (line.startsWith("-")) {
+      deleteBuffer.push({ number: oldLineNumber, text: line.slice(1) });
+      oldLineNumber += 1;
+      continue;
+    }
+    if (line.startsWith("+")) {
+      addBuffer.push({ number: newLineNumber, text: line.slice(1) });
+      newLineNumber += 1;
+      continue;
+    }
+
+    flushChangeRows();
+    if (line.startsWith(" ")) {
+      const text = line.slice(1);
+      hunk.rows.push({ type: "context", oldNumber: oldLineNumber, newNumber: newLineNumber, left: text, right: text });
+      oldLineNumber += 1;
+      newLineNumber += 1;
+    } else if (line.startsWith("\\")) {
+      hunk.rows.push({ type: "meta", oldNumber: "", newNumber: "", left: line, right: line });
+    } else {
+      hunk.rows.push({ type: "meta", oldNumber: "", newNumber: "", left: line, right: line });
+    }
+  }
+
+  finishFile();
+  return files;
+}
+
+function gitChangesChip(label, value, className = "") {
+  const chip = make("div", `git-changes-chip ${className}`.trim());
+  chip.append(make("span", "git-changes-chip-label", label), make("span", "git-changes-chip-value", String(value ?? "—")));
+  return chip;
+}
+
+function renderGitChangesOverview(data) {
+  const summary = data?.summary || {};
+  const untrackedCount = Array.isArray(data?.untracked) ? data.untracked.length : Number(summary.untracked || 0);
+  const overview = make("div", "git-changes-overview");
+  overview.append(
+    gitChangesChip("repo", data?.root || "—", "wide"),
+    gitChangesChip("branch", data?.branch || "detached"),
+    gitChangesChip("staged", summary.staged || 0, "success"),
+    gitChangesChip("modified", summary.unstaged || 0, "warning"),
+    gitChangesChip("untracked", untrackedCount, "muted"),
+    gitChangesChip("conflicts", summary.conflicted || 0, (summary.conflicted || 0) > 0 ? "danger" : "muted"),
+  );
+  return overview;
+}
+
+function renderGitDiffRow(row) {
+  const node = make("div", `git-diff-row ${row.type || "context"}`.trim());
+  node.append(
+    make("span", "git-diff-line-number old", row.oldNumber === "" ? "" : String(row.oldNumber)),
+    make("code", "git-diff-line old", row.left ?? ""),
+    make("span", "git-diff-line-number new", row.newNumber === "" ? "" : String(row.newNumber)),
+    make("code", "git-diff-line new", row.right ?? ""),
+  );
+  return node;
+}
+
+function renderGitDiffGrid(file) {
+  const grid = make("div", "git-diff-grid");
+  const rowLimit = file.renderRowLimit ?? GIT_CHANGES_RENDER_ROW_LIMIT;
+  let renderedRows = 0;
+  let truncated = false;
+  for (const hunk of file.hunks || []) {
+    if (renderedRows >= rowLimit) {
+      truncated = true;
+      break;
+    }
+    grid.append(renderGitDiffRow({ type: "hunk", oldNumber: "", newNumber: "", left: hunk.header, right: hunk.header }));
+    renderedRows += 1;
+    for (const row of hunk.rows || []) {
+      if (renderedRows >= rowLimit) {
+        truncated = true;
+        break;
+      }
+      grid.append(renderGitDiffRow(row));
+      renderedRows += 1;
+    }
+    if (truncated) break;
+  }
+  if (truncated) {
+    grid.append(renderGitDiffRow({ type: "meta", oldNumber: "", newNumber: "", left: `Diff preview truncated after ${rowLimit} rows.`, right: "Use git diff in the terminal for the full output." }));
+  }
+  return grid;
+}
+
+function renderGitDiffFile(file) {
+  const details = make("details", `git-diff-file ${file.className || ""}`.trim());
+  details.open = true;
+  details.dataset.gitDiffFile = file.path || "diff";
+  const summary = make("summary", "git-diff-file-summary");
+  summary.append(
+    make("span", "git-diff-file-name", file.path || "diff"),
+    make("span", "git-diff-file-stats", file.statsText || `+${file.additions || 0} −${file.deletions || 0}`),
+  );
+  details.append(summary);
+  if (file.hunks?.length) {
+    details.append(renderGitDiffGrid(file));
+  } else {
+    details.append(make("pre", "git-diff-raw", (file.headers || []).join("\n") || "No textual diff for this file."));
+  }
+  return details;
+}
+
+function renderGitDiffSection(section, files) {
+  const key = String(section?.key || "diff").replace(/[^a-z0-9_-]/gi, "-");
+  const wrapper = make("section", `git-diff-section git-diff-section-${key}`);
+  const header = make("div", "git-diff-section-heading");
+  header.append(
+    make("div", "git-diff-section-title", section?.label || "Git diff"),
+    make("div", "git-diff-section-meta", `${files.length} file${files.length === 1 ? "" : "s"} · ${section?.command || "git diff"}`),
+  );
+  wrapper.append(header, ...files.map(renderGitDiffFile));
+  return wrapper;
+}
+
+function normalizeGitUntrackedEntry(value) {
+  if (typeof value === "string") return { path: value, size: 0, binary: false, content: "", contentMissing: true };
+  if (!value || typeof value !== "object") return null;
+  const path = String(value.path || "").trim();
+  if (!path) return null;
+  const hasContent = Object.prototype.hasOwnProperty.call(value, "content");
+  const binary = value.binary === true;
+  const error = value.error ? String(value.error) : "";
+  return {
+    path,
+    size: Number(value.size || 0) || 0,
+    binary,
+    content: hasContent && typeof value.content === "string" ? value.content : "",
+    contentMissing: !hasContent && !binary && !error,
+    error,
+  };
+}
+
+function gitUntrackedEntries(untracked) {
+  return Array.isArray(untracked) ? untracked.map(normalizeGitUntrackedEntry).filter(Boolean) : [];
+}
+
+function gitUntrackedContentLines(content = "") {
+  const normalized = String(content || "").replace(/\r\n?/g, "\n");
+  if (!normalized) return [];
+  const withoutFinalNewline = normalized.endsWith("\n") ? normalized.slice(0, -1) : normalized;
+  return withoutFinalNewline ? withoutFinalNewline.split("\n") : [""];
+}
+
+function gitUntrackedEntryToDiffFile(entry) {
+  const lines = gitUntrackedContentLines(entry.content);
+  return {
+    path: entry.path,
+    className: "git-untracked-full-file",
+    additions: lines.length,
+    deletions: 0,
+    statsText: `${entry.binary ? "binary" : `+${lines.length}`} · ${formatBytes(entry.size)}`,
+    renderRowLimit: Number.POSITIVE_INFINITY,
+    headers: lines.length ? [] : ["Empty untracked file."],
+    hunks: lines.length ? [{
+      header: `@@ -0,0 +1,${lines.length} @@`,
+      rows: lines.map((line, index) => ({ type: "added", oldNumber: "", newNumber: index + 1, left: "", right: line })),
+    }] : [],
+  };
+}
+
+function renderGitUntrackedRawFile(entry) {
+  const details = make("details", "git-diff-file git-untracked-full-file");
+  details.open = true;
+  details.dataset.gitDiffFile = entry.path;
+  const summary = make("summary", "git-diff-file-summary");
+  summary.append(
+    make("span", "git-diff-file-name", entry.path),
+    make("span", "git-diff-file-stats", entry.error ? "unreadable" : `binary · ${formatBytes(entry.size)}`),
+  );
+  details.append(summary, make("pre", "git-diff-raw", entry.error || "Binary untracked file; text preview unavailable."));
+  return details;
+}
+
+function renderGitUntrackedLoadingFile(entry) {
+  const details = make("details", "git-diff-file git-untracked-full-file git-untracked-loading-file");
+  details.open = true;
+  details.dataset.gitDiffFile = entry.path;
+  const summary = make("summary", "git-diff-file-summary");
+  summary.append(make("span", "git-diff-file-name", entry.path), make("span", "git-diff-file-stats", "loading content"));
+  details.append(summary, make("pre", "git-diff-raw", "Loading complete untracked file content…"));
+  return details;
+}
+
+function renderGitUntrackedFile(entry) {
+  if (entry.contentMissing) return renderGitUntrackedLoadingFile(entry);
+  if (entry.error || entry.binary) return renderGitUntrackedRawFile(entry);
+  return renderGitDiffFile(gitUntrackedEntryToDiffFile(entry));
+}
+
+function replaceGitUntrackedEntry(entry, tabId = gitChangesState.tabId) {
+  const data = gitChangesState.data;
+  if (!data || tabId !== gitChangesState.tabId) return;
+  const entries = gitUntrackedEntries(data.untracked);
+  const nextEntries = entries.map((item) => item.path === entry.path ? normalizeGitUntrackedEntry(entry) : item);
+  gitChangesState = { ...gitChangesState, data: { ...data, untracked: nextEntries } };
+  renderGitChangesDialog();
+}
+
+async function loadMissingGitUntrackedContent(entry, tabId = gitChangesState.tabId) {
+  const key = `${tabId || ""}\u0000${entry.path}`;
+  if (!entry.contentMissing || gitChangesUntrackedContentRequests.has(key)) return;
+  gitChangesUntrackedContentRequests.add(key);
+  try {
+    const response = await api(`/api/git-changes/untracked-file?path=${encodeURIComponent(entry.path)}`, { tabId });
+    if (!response.ok) throw new Error(response.error || "Failed to load untracked file content");
+    replaceGitUntrackedEntry(response.data, tabId);
+  } catch (error) {
+    replaceGitUntrackedEntry({ ...entry, contentMissing: false, error: error.message || String(error) }, tabId);
+  } finally {
+    gitChangesUntrackedContentRequests.delete(key);
+  }
+}
+
+function renderGitUntrackedSection(untracked) {
+  const entries = gitUntrackedEntries(untracked);
+  const wrapper = make("section", "git-diff-section git-diff-section-untracked");
+  const header = make("div", "git-diff-section-heading");
+  header.append(
+    make("div", "git-diff-section-title", "Untracked"),
+    make("div", "git-diff-section-meta", `${entries.length} file${entries.length === 1 ? "" : "s"} · complete file contents`),
+  );
+  wrapper.append(header, ...entries.map(renderGitUntrackedFile));
+  for (const entry of entries) {
+    if (entry.contentMissing) queueMicrotask(() => loadMissingGitUntrackedContent(entry));
+  }
+  return wrapper;
+}
+
+function renderGitCurrentFileHeader() {
+  const header = make("div", "git-current-file-header");
+  header.append(make("span", "git-current-file-label", "Current file"), make("span", "git-current-file-name", "—"));
+  return header;
+}
+
+function updateGitChangesCurrentFileHeader() {
+  const body = elements.gitChangesBody;
+  const header = body?.querySelector(".git-current-file-header");
+  const name = header?.querySelector(".git-current-file-name");
+  if (!body || !header || !name) return;
+  const files = Array.from(body.querySelectorAll(".git-diff-file[data-git-diff-file]"));
+  if (!files.length) {
+    name.textContent = "—";
+    return;
+  }
+  const bodyRect = body.getBoundingClientRect();
+  const headerRect = header.getBoundingClientRect();
+  const markerY = Math.min(bodyRect.bottom - 1, Math.max(bodyRect.top, headerRect.bottom + 8));
+  let current = files[0];
+  for (const file of files) {
+    const rect = file.getBoundingClientRect();
+    if (rect.top <= markerY && rect.bottom > markerY) {
+      current = file;
+      break;
+    }
+    if (rect.top <= markerY) current = file;
+    else break;
+  }
+  name.textContent = current?.dataset.gitDiffFile || "—";
+}
+
+function gitChangesGeneratedLabel(data) {
+  const timestamp = Date.parse(data?.generatedAt || "");
+  if (!Number.isFinite(timestamp)) return "";
+  return `Updated ${new Date(timestamp).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" })}`;
+}
+
+function renderGitChangesDialog() {
+  if (!elements.gitChangesDialog || !elements.gitChangesBody) return;
+  const { loading, error, data } = gitChangesState;
+  if (elements.gitChangesTitle) elements.gitChangesTitle.textContent = "Uncommitted Changes";
+  if (elements.gitChangesSubtitle) elements.gitChangesSubtitle.textContent = data?.root ? `${data.branch || "detached"} · ${data.root}` : "Current tab git diff";
+  if (elements.gitChangesRefreshButton) {
+    elements.gitChangesRefreshButton.disabled = loading;
+    elements.gitChangesRefreshButton.textContent = loading ? "Refreshing…" : "Refresh";
+  }
+  if (elements.gitChangesStatus) {
+    elements.gitChangesStatus.className = `git-changes-status ${error ? "error" : "muted"}`;
+    elements.gitChangesStatus.textContent = error || (loading ? "Loading git diff…" : data ? gitChangesGeneratedLabel(data) : "");
+    elements.gitChangesStatus.hidden = !elements.gitChangesStatus.textContent;
+  }
+
+  const body = elements.gitChangesBody;
+  body.replaceChildren();
+  if (loading && !data) {
+    body.append(make("div", "git-changes-empty", "Loading git diff…"));
+    return;
+  }
+  if (error) {
+    body.append(make("div", "git-changes-empty error", error));
+    return;
+  }
+  if (!data) {
+    body.append(make("div", "git-changes-empty", "Open from the footer CHANGES chip to load the current git diff."));
+    return;
+  }
+
+  body.append(renderGitChangesOverview(data));
+  const parsedSections = (Array.isArray(data.sections) ? data.sections : [])
+    .map((section) => ({ section, files: parseGitUnifiedDiff(section.diff || "") }))
+    .filter((entry) => entry.files.length > 0);
+  const untracked = gitUntrackedEntries(data.untracked);
+  const hasVisibleFiles = parsedSections.length > 0 || untracked.length > 0;
+  if (hasVisibleFiles) body.append(renderGitCurrentFileHeader());
+  for (const entry of parsedSections) body.append(renderGitDiffSection(entry.section, entry.files));
+  if (untracked.length) body.append(renderGitUntrackedSection(untracked));
+  if (!hasVisibleFiles) body.append(make("div", "git-changes-empty success", "Working tree is clean. No staged or unstaged diff."));
+  if (hasVisibleFiles) requestAnimationFrame(updateGitChangesCurrentFileHeader);
+}
+
+async function loadGitChangesDialog(tabContext = activeTabContext()) {
+  const requestSerial = ++gitChangesRequestSerial;
+  gitChangesUntrackedContentRequests.clear();
+  gitChangesState = { ...gitChangesState, loading: true, error: "", tabId: tabContext.tabId || activeTabId };
+  renderGitChangesDialog();
+  try {
+    const response = await api("/api/git-changes", { tabId: tabContext.tabId });
+    if (requestSerial !== gitChangesRequestSerial) return;
+    if (!response.ok) throw new Error(response.error || "Failed to load git changes");
+    gitChangesState = { loading: false, error: "", data: response.data || null, tabId: tabContext.tabId || activeTabId };
+  } catch (error) {
+    if (requestSerial !== gitChangesRequestSerial) return;
+    gitChangesState = { ...gitChangesState, loading: false, error: error.message || String(error) };
+  }
+  renderGitChangesDialog();
+}
+
+function openGitChangesDialog() {
+  if (!elements.gitChangesDialog) return;
+  hideFooterTooltip();
+  const tabContext = activeTabContext();
+  const tabId = tabContext.tabId || activeTabId;
+  gitChangesState = { loading: true, error: "", data: gitChangesState.tabId === tabId ? gitChangesState.data : null, tabId };
+  renderGitChangesDialog();
+  if (!elements.gitChangesDialog.open) elements.gitChangesDialog.showModal();
+  loadGitChangesDialog(tabContext).catch((error) => addEvent(error.message || String(error), "error"));
+}
+
+function refreshGitChangesDialog() {
+  const tabContext = { tabId: gitChangesState.tabId || activeTabId };
+  loadGitChangesDialog(tabContext).catch((error) => addEvent(error.message || String(error), "error"));
+}
+
+function closeGitChangesDialog() {
+  gitChangesRequestSerial += 1;
+  gitChangesUntrackedContentRequests.clear();
+  gitChangesState = { ...gitChangesState, loading: false };
+  if (elements.gitChangesDialog?.open) elements.gitChangesDialog.close();
+}
+
 function gitFooterFallbackMessage() {
   if (isOptionalFeatureDisabled("gitFooterStatus")) return "";
   const tabContext = activeTabContext();
@@ -5118,13 +5761,18 @@ function renderMinimalFooter() {
   }));
   if (footerModelPickerOpen) elements.statusBar.append(renderFooterModelPicker());
   if (footerThinkingPickerOpen) elements.statusBar.append(renderFooterThinkingPicker());
+  if (footerBranchPickerOpen) elements.statusBar.append(renderFooterBranchPicker());
   setMobileFooterExpanded(false);
   updateFooterModelPickerPosition();
 }
 
 function setFooterModelPickerOpen(open) {
   footerModelPickerOpen = !!open;
-  if (footerModelPickerOpen) footerThinkingPickerOpen = false;
+  if (footerModelPickerOpen) {
+    footerThinkingPickerOpen = false;
+    footerBranchPickerOpen = false;
+    footerBranchPickerRequestSerial += 1;
+  }
   if (footerModelPickerOpen && isMobileView()) {
     mobileFooterExpanded = false;
     document.body.classList.remove("footer-details-expanded");
@@ -5138,7 +5786,11 @@ function setFooterModelPickerOpen(open) {
 
 function setFooterThinkingPickerOpen(open) {
   footerThinkingPickerOpen = !!open;
-  if (footerThinkingPickerOpen) footerModelPickerOpen = false;
+  if (footerThinkingPickerOpen) {
+    footerModelPickerOpen = false;
+    footerBranchPickerOpen = false;
+    footerBranchPickerRequestSerial += 1;
+  }
   if (footerThinkingPickerOpen && isMobileView()) {
     mobileFooterExpanded = false;
     document.body.classList.remove("footer-details-expanded");
@@ -5150,6 +5802,239 @@ function setFooterThinkingPickerOpen(open) {
   updateFooterModelPickerPosition();
 }
 
+function normalizeFooterGitBranches(data = {}) {
+  const current = cleanStatusText(data.current || "");
+  const seen = new Set();
+  const branches = [];
+  for (const item of Array.isArray(data.branches) ? data.branches : []) {
+    const name = cleanStatusText(typeof item === "string" ? item : item?.name);
+    if (!name || seen.has(name)) continue;
+    seen.add(name);
+    branches.push({ name, current: Boolean(item?.current) || (!!current && name === current) });
+  }
+  return {
+    root: cleanFooterPayloadText(data.root, "", 4000),
+    current,
+    branches,
+  };
+}
+
+function applyOptimisticGitFooterBranch(branch, tabContext = activeTabContext()) {
+  const nextBranch = cleanStatusText(branch);
+  if (!nextBranch) return;
+  const raw = statusEntries.get(GIT_FOOTER_WEBUI_STATUS_KEY) || readCachedGitFooterWebuiPayloadRaw();
+  const payload = parseGitFooterWebuiPayloadRaw(raw);
+  if (!payload) return;
+  const nextPayload = {
+    type: GIT_FOOTER_WEBUI_PAYLOAD_TYPE,
+    version: GIT_FOOTER_WEBUI_PAYLOAD_VERSION,
+    generatedAt: Date.now(),
+    main: payload.main,
+    meta: payload.meta.map((chip) => chip.key === "git" ? { ...chip, value: nextBranch, title: `git branch: ${nextBranch}` } : chip),
+  };
+  const nextRaw = JSON.stringify(nextPayload);
+  statusEntries.set(GIT_FOOTER_WEBUI_STATUS_KEY, nextRaw);
+  cacheGitFooterWebuiPayload(nextRaw, tabContext.tabId);
+}
+
+async function loadFooterBranchPicker(tabContext = activeTabContext()) {
+  const requestSerial = ++footerBranchPickerRequestSerial;
+  const tabId = tabContext.tabId || activeTabId;
+  footerBranchPickerState = {
+    loading: true,
+    error: "",
+    branches: footerBranchPickerState.tabId === tabId ? footerBranchPickerState.branches : [],
+    current: footerBranchPickerState.tabId === tabId ? footerBranchPickerState.current : "",
+    root: footerBranchPickerState.tabId === tabId ? footerBranchPickerState.root : "",
+    switching: "",
+    tabId,
+  };
+  if (isCurrentTabContext(tabContext)) {
+    renderFooter();
+    updateFooterModelPickerPosition();
+  }
+  try {
+    const response = await api("/api/git-branches", { tabId });
+    if (requestSerial !== footerBranchPickerRequestSerial || !footerBranchPickerOpen || !isCurrentTabContext(tabContext)) return;
+    if (!response.ok) throw new Error(response.error || "Failed to load git branches");
+    footerBranchPickerState = { loading: false, error: "", switching: "", tabId, ...normalizeFooterGitBranches(response.data || {}) };
+  } catch (error) {
+    if (requestSerial !== footerBranchPickerRequestSerial || !footerBranchPickerOpen || !isCurrentTabContext(tabContext)) return;
+    footerBranchPickerState = { ...footerBranchPickerState, loading: false, switching: "", error: error.message || String(error) };
+  }
+  if (isCurrentTabContext(tabContext)) {
+    renderFooter();
+    updateFooterModelPickerPosition();
+  }
+}
+
+function setFooterBranchPickerOpen(open) {
+  footerBranchPickerOpen = !!open;
+  if (footerBranchPickerOpen) {
+    footerModelPickerOpen = false;
+    footerThinkingPickerOpen = false;
+    if (isMobileView()) {
+      mobileFooterExpanded = false;
+      document.body.classList.remove("footer-details-expanded");
+      setComposerActionsOpen(false);
+      setMobileTabsExpanded(false);
+    }
+    loadFooterBranchPicker(activeTabContext()).catch((error) => addEvent(error.message || String(error), "error"));
+  } else {
+    footerBranchPickerRequestSerial += 1;
+  }
+  document.body.classList.toggle("footer-model-picker-open", isFooterPickerOpen());
+  renderFooter();
+  updateFooterModelPickerPosition();
+}
+
+function pathLooksInside(parentPath, childPath) {
+  const normalizePath = (value) => String(value || "").replace(/\\+/g, "/").replace(/\/+$/, "");
+  const parent = normalizePath(parentPath);
+  const child = normalizePath(childPath);
+  return !!parent && !!child && (child === parent || child.startsWith(`${parent}/`));
+}
+
+function footerBranchActiveAgentTabs(tabContext = activeTabContext()) {
+  const active = activeTab();
+  const activeCwd = latestWorkspace?.cwd || active?.cwd || "";
+  const root = footerBranchPickerState.root || "";
+  return tabs.filter((tab) => {
+    const sameWorktree = root ? pathLooksInside(root, tab.cwd) : !!activeCwd && tab.cwd === activeCwd;
+    if (!sameWorktree) return false;
+    if (tab.id === tabContext.tabId) return currentState?.isStreaming || currentState?.isCompacting || tabHasActiveAgent(tab);
+    return tabHasActiveAgent(tab);
+  });
+}
+
+function footerBranchAgentWarningLines(tabContext = activeTabContext()) {
+  const busyTabs = footerBranchActiveAgentTabs(tabContext);
+  if (!busyTabs.length) return [];
+  const list = busyTabs.slice(0, 4).map((tab) => `- ${tab.title || tab.id}`).join("\n");
+  const extra = busyTabs.length > 4 ? `\n- … +${busyTabs.length - 4} more` : "";
+  return [
+    "",
+    `WARNING: ${busyTabs.length === 1 ? "An agent is" : "Agents are"} still running or waiting for input in this Git working tree:`,
+    `${list}${extra}`,
+    "Switching branches can change files underneath the running agent.",
+  ];
+}
+
+function confirmFooterGitBranchAction(branch, { create = false, requireConfirm = false, tabContext = activeTabContext() } = {}) {
+  const branchName = cleanStatusText(branch);
+  const warningLines = footerBranchAgentWarningLines(tabContext);
+  if (!requireConfirm && warningLines.length === 0) return true;
+  const action = create ? "Create and switch to new git branch" : "Switch git branch";
+  const message = [
+    `${action}: ${branchName}?`,
+    "",
+    `Repository: ${footerBranchPickerState.root || currentGitFooterCacheCwd(tabContext.tabId) || "current tab"}`,
+    ...warningLines,
+    "",
+    "Continue?",
+  ].join("\n");
+  return window.confirm(message);
+}
+
+function promptFooterGitBranchName() {
+  const value = window.prompt("New git branch name:", "");
+  if (value === null) return "";
+  return cleanStatusText(value);
+}
+
+async function createFooterGitBranch() {
+  const branchName = promptFooterGitBranchName();
+  if (!branchName) return;
+  const tabContext = activeTabContext();
+  if (!confirmFooterGitBranchAction(branchName, { create: true, requireConfirm: true, tabContext })) return;
+  await applyFooterGitBranch(branchName, { create: true, tabContext, skipConfirm: true });
+}
+
+async function applyFooterGitBranch(branch, { create = false, tabContext = activeTabContext(), skipConfirm = false } = {}) {
+  const branchName = cleanStatusText(branch);
+  if (!branchName) return;
+  const tabId = tabContext.tabId || activeTabId;
+  if (!skipConfirm && !confirmFooterGitBranchAction(branchName, { create, tabContext })) return;
+  try {
+    footerBranchPickerState = { ...footerBranchPickerState, loading: true, error: "", switching: branchName, tabId };
+    renderFooter();
+    const response = await api("/api/git-branch", { method: "POST", body: { branch: branchName, create }, tabId });
+    if (!isCurrentTabContext(tabContext)) return;
+    if (!response.ok) throw new Error(response.error || `Failed to ${create ? "create and switch to" : "switch to"} ${branchName}`);
+    const switchedBranch = cleanStatusText(response.data?.branch || branchName);
+    footerBranchPickerOpen = false;
+    footerBranchPickerRequestSerial += 1;
+    footerBranchPickerState = { ...footerBranchPickerState, loading: false, switching: "", current: switchedBranch };
+    applyOptimisticGitFooterBranch(switchedBranch, tabContext);
+    addEvent(response.data?.created ? `Created and switched to git branch ${switchedBranch}.` : response.data?.switched === false ? `Already on git branch ${switchedBranch}.` : `Switched git branch to ${switchedBranch}.`, "info");
+    requestGitFooterWebuiPayload(tabContext, { force: true });
+  } catch (error) {
+    if (isCurrentTabContext(tabContext)) {
+      footerBranchPickerState = { ...footerBranchPickerState, loading: false, switching: "", error: error.message || String(error) };
+      addEvent(error.message || String(error), "error");
+    }
+  } finally {
+    if (isCurrentTabContext(tabContext)) {
+      document.body.classList.toggle("footer-model-picker-open", isFooterPickerOpen());
+      renderFooter();
+      updateFooterModelPickerPosition();
+    }
+  }
+}
+
+function renderFooterBranchPicker() {
+  const picker = make("div", "footer-model-picker footer-branch-picker");
+  picker.setAttribute("role", "listbox");
+  picker.setAttribute("aria-label", "Git branches");
+  const state = footerBranchPickerState;
+  const current = state.current || "detached";
+  picker.append(make("div", "footer-model-picker-title", "Git branches"));
+  picker.append(make("div", "footer-model-picker-source", `${state.loading ? "Refreshing" : "Current"}: ${state.switching || current}${state.root ? ` · ${state.root}` : ""}`));
+
+  if (state.error) {
+    const error = make("div", "footer-model-picker-empty error");
+    error.append(make("strong", undefined, "Cannot load branches."), make("span", undefined, ` ${state.error}`));
+    picker.append(error);
+    return picker;
+  }
+  if (state.loading && state.branches.length === 0) {
+    picker.append(make("div", "footer-model-picker-empty muted", "Loading local branches…"));
+    return picker;
+  }
+
+  const hasOtherBranches = state.branches.some((branch) => !branch.current && branch.name !== state.current);
+  if (!state.loading && !hasOtherBranches) {
+    const empty = make("div", "footer-model-picker-empty muted");
+    empty.append(make("strong", undefined, "No other local branches available."), make("span", undefined, " Create a branch from the current HEAD to continue."));
+    const createButton = make("button", "footer-model-option footer-branch-create-option");
+    createButton.type = "button";
+    createButton.append(
+      make("span", "footer-model-option-main", "Create new branch"),
+      make("span", "footer-model-option-name", "prompts for a name, confirms, then runs git switch -c"),
+    );
+    createButton.addEventListener("click", () => createFooterGitBranch().catch((error) => addEvent(error.message || String(error), "error")));
+    picker.append(empty, createButton);
+  }
+
+  for (const branch of state.branches) {
+    const selected = branch.current || (!!state.current && branch.name === state.current);
+    const disabled = selected || state.loading || !!state.switching;
+    const button = make("button", `footer-model-option footer-branch-option${selected ? " active" : ""}`);
+    button.type = "button";
+    button.disabled = disabled;
+    button.setAttribute("role", "option");
+    button.setAttribute("aria-selected", selected ? "true" : "false");
+    button.title = selected ? `Current branch: ${branch.name}` : `git switch ${branch.name}`;
+    button.append(
+      make("span", "footer-model-option-main", branch.name),
+      make("span", "footer-model-option-name", selected ? "current branch" : state.switching === branch.name ? "switching…" : "switch to this branch"),
+    );
+    if (!disabled) button.addEventListener("click", () => applyFooterGitBranch(branch.name));
+    picker.append(button);
+  }
+  return picker;
+}
+
 async function applyFooterModel(model) {
   if (!model?.provider || !model?.id) return;
   const tabContext = activeTabContext();
@@ -5605,7 +6490,7 @@ async function changeActiveTabCwd() {
   const currentCwd = latestWorkspace?.cwd || tab.cwd || "";
   const cwd = await pickCwd(tab, currentCwd);
   if (!isCurrentTabContext(tabContext) || !cwd || cwd === currentCwd) return;
-  if (!window.confirm(`Restart ${tab.title} in:\n${cwd}\n\nCurrent in-flight work in this tab will be stopped.`)) return;
+  if (!window.confirm(`Restart ${tab.title} in:\n${cwd}\n\nCurrent in-flight work in this tab will be stopped. The conversation continues in the new directory.`)) return;
 
   saveActiveDraft();
   try {
@@ -5881,7 +6766,7 @@ function renderStatus() {
     File: state?.sessionFile || "in-memory",
     Messages: String(state?.messageCount ?? "?"),
     Queue: String(state?.pendingMessageCount ?? 0),
-    "Auto compact": state?.autoCompactionEnabled ? "on" : "off",
+    "Auto compact": footerAutoCompactionEnabled(state) ? "on" : "off",
   };
   for (const [key, value] of Object.entries(details)) {
     elements.stateDetails.append(make("dt", undefined, key), make("dd", undefined, value));
@@ -6115,8 +7000,9 @@ function appendReleaseNpmTerminalLine(parent, line) {
 
 async function sendReleaseNpmCommand(command) {
   const tabContext = activeTabContext();
+  const resolvedCommand = resolveRpcSlashCommandMessage(command);
   try {
-    await api("/api/prompt", { method: "POST", body: { message: command }, tabId: tabContext.tabId });
+    await api("/api/prompt", { method: "POST", body: { message: resolvedCommand }, tabId: tabContext.tabId });
     if (!isCurrentTabContext(tabContext)) return;
     addEvent(`${command} sent`, "info");
     scheduleRefreshState(120, tabContext);
@@ -10036,6 +10922,59 @@ function renderAllMessages({ preserveScroll = false } = {}) {
   updateStickyUserPromptButton();
 }
 
+function applyNativeSlashCommandEffects(response, message, tabContext = activeTabContext()) {
+  const data = response?.data || {};
+  if (!isCurrentTabContext(tabContext)) return;
+
+  for (const warning of data.warnings || []) {
+    if (warning) addEvent(String(warning), "warn");
+  }
+  for (const toast of data.toasts || []) {
+    if (toast?.message) addEvent(String(toast.message), toast.level || "info");
+  }
+
+  if (data.copyText) {
+    copyText(data.copyText).catch((error) => {
+      addTransientMessage({
+        role: "native",
+        title: message.split(/\s+/, 1)[0],
+        content: `${data.message || "Copy requested, but clipboard access failed."}\n\nClipboard access failed: ${error.message}\n\n${data.copyText}`,
+        level: "warn",
+      });
+    });
+  }
+
+  if (data.download && triggerNativeDownload(data.download)) {
+    addEvent(`download started: ${data.download.fileName || data.download.url}`, "info");
+  }
+
+  const cards = Array.isArray(data.cards) && data.cards.length ? data.cards : null;
+  if (cards) {
+    for (const card of cards) {
+      addTransientMessage({
+        role: "native",
+        title: card.title || message.split(/\s+/, 1)[0],
+        content: card.content,
+        level: card.level || data.level || "info",
+      });
+    }
+  } else if (data.message) {
+    addTransientMessage({
+      role: "native",
+      title: message.split(/\s+/, 1)[0],
+      content: data.message,
+      level: data.level || "info",
+    });
+  }
+
+  const refresh = Array.isArray(data.refresh) ? data.refresh : ["state"];
+  if (refresh.includes("state")) scheduleRefreshState(120, tabContext);
+  if (refresh.includes("tabs")) scheduleRefreshTabs(300);
+  if (refresh.includes("commands")) refreshCommands(tabContext).catch((error) => addEvent(error.message || String(error), "error"));
+  if (refresh.includes("workspace")) scheduleRefreshState(120, tabContext);
+  if (refresh.includes("themes")) initializeThemes().catch((error) => addEvent(error.message || String(error), "error"));
+}
+
 function addTransientMessage({ role = "notice", title, content, level = "info", ...details }) {
   transientMessages.push({
     role,
@@ -10197,10 +11136,11 @@ function setOptionsMenuOpen(open) {
 }
 
 function optionalFeatureIdForCommand(name) {
-  if (OPTIONAL_COMMAND_FEATURES.has(name)) return OPTIONAL_COMMAND_FEATURES.get(name);
-  if (name === "release-toggle" || name === "release-abort" || name === "release-npm-logs") return "releaseNpm";
-  if (name === "release-aur" || name.startsWith("release-aur-")) return "releaseAur";
-  if (name === "stats" || name.startsWith("stats-") || name === "calibrate") return "statsCommand";
+  const baseName = commandBaseName(name);
+  if (OPTIONAL_COMMAND_FEATURES.has(baseName)) return OPTIONAL_COMMAND_FEATURES.get(baseName);
+  if (baseName === "release-toggle" || baseName === "release-abort" || baseName === "release-npm-logs") return "releaseNpm";
+  if (baseName === "release-aur" || baseName.startsWith("release-aur-")) return "releaseAur";
+  if (baseName === "stats" || baseName.startsWith("stats-") || baseName === "calibrate") return "statsCommand";
   return null;
 }
 
@@ -10215,12 +11155,51 @@ function visibleCommands() {
   return availableCommands.filter(isCommandVisible);
 }
 
+function commandBaseName(name) {
+  return String(name || "").replace(/:\d+$/, "");
+}
+
+function commandNameMatches(commandName, requestedName) {
+  const commandText = String(commandName || "");
+  const requested = String(requestedName || "");
+  if (!requested) return false;
+  if (commandText === requested) return true;
+  if (!commandText.startsWith(`${requested}:`)) return false;
+  return /^\d+$/.test(commandText.slice(requested.length + 1));
+}
+
+function canUseCommandBaseAlias(name) {
+  return availableCommands.some((command) => commandBaseName(command.name) === name && command.invokeName && command.duplicateCount > 1);
+}
+
+function resolveAvailableCommand(name, { rpcOnly = false } = {}) {
+  const requested = String(name || "").trim();
+  if (!requested) return null;
+  const commands = (rpcOnly ? rawAvailableCommands : availableCommands).filter((command) => !rpcOnly || command.source !== "native");
+  const exact = commands.find((command) => command.name === requested || command.invokeName === requested || command.duplicateNames?.includes(requested));
+  if (exact) return exact;
+  if (!canUseCommandBaseAlias(requested)) return null;
+  return commands.find((command) => commandNameMatches(command?.name, requested)) || null;
+}
+
+function resolveAvailableCommandName(name, options = {}) {
+  return resolveAvailableCommand(name, options)?.name || "";
+}
+
+function resolveRpcSlashCommandMessage(message) {
+  const text = String(message || "");
+  const match = text.match(/^\/([^\s]+)([\s\S]*)$/);
+  if (!match) return text;
+  const resolvedName = resolveAvailableCommandName(match[1], { rpcOnly: true });
+  return resolvedName && resolvedName !== match[1] ? `/${resolvedName}${match[2]}` : text;
+}
+
 function hasAvailableCommand(name) {
-  return availableCommands.some((command) => command.name === name);
+  return !!resolveAvailableCommand(name);
 }
 
 function hasLoadedRpcCommand(name) {
-  return rawAvailableCommands.some((command) => command.name === name && command.source !== "native");
+  return !!resolveAvailableCommand(name, { rpcOnly: true });
 }
 
 function optionalFeatureUnavailableMessage(featureId) {
@@ -10266,14 +11245,15 @@ function resetOptionalFeatureAvailability() {
 function requestGitFooterWebuiPayload(tabContext = activeTabContext(), { force = false } = {}) {
   if (!tabContext.tabId || isOptionalFeatureDisabled("gitFooterStatus")) return;
   if (currentState?.isStreaming || currentState?.isCompacting) return;
-  if (!hasAvailableCommand("git-footer-refresh") || (!force && statusEntries.has(GIT_FOOTER_WEBUI_STATUS_KEY))) return;
+  const refreshCommand = resolveAvailableCommandName("git-footer-refresh", { rpcOnly: true });
+  if (!refreshCommand || (!force && statusEntries.has(GIT_FOOTER_WEBUI_STATUS_KEY))) return;
   if (gitFooterPayloadRefreshInFlightByTab.has(tabContext.tabId)) return;
 
   gitFooterPayloadRefreshInFlightByTab.add(tabContext.tabId);
   if (isCurrentTabContext(tabContext)) renderFooter();
   api("/api/prompt", {
     method: "POST",
-    body: { message: "/git-footer-refresh --webui-silent", streamingBehavior: "steer" },
+    body: { message: `/${refreshCommand} --webui-silent`, streamingBehavior: "steer" },
     tabId: tabContext.tabId,
   }).catch((error) => {
     if (isCurrentTabContext(tabContext)) addEvent(`git footer payload refresh failed: ${error.message || String(error)}`, "warn");
@@ -10287,6 +11267,7 @@ function updateOptionalFeatureAvailability() {
   optionalFeatureAvailability.gitWorkflow = hasAvailableCommand("git-staged-msg");
   optionalFeatureAvailability.releaseNpm = hasAvailableCommand("release-npm");
   optionalFeatureAvailability.releaseAur = hasAvailableCommand("release-aur");
+  optionalFeatureAvailability.safetyGuard = hasAvailableCommand("safety-guard") || optionalFeatureAvailability.safetyGuard || statusEntries.has("safety-guard");
   optionalFeatureAvailability.statsCommand = hasAvailableCommand("stats");
   optionalFeatureAvailability.gitFooterStatus = hasAvailableCommand("git-footer-refresh") || optionalFeatureAvailability.gitFooterStatus || statusEntries.has("git-footer") || statusEntries.has(GIT_FOOTER_WEBUI_STATUS_KEY);
   optionalFeatureAvailability.tuiSkillsCommand = hasLoadedRpcCommand("skills");
@@ -10438,9 +11419,13 @@ function runPublishWorkflow(command) {
   setPublishMenuOpen(false);
   setAppRunnerMenuOpen(false);
   setOptionsMenuOpen(false);
-  const commandName = String(command || "").replace(/^\//, "").split(/\s+/)[0];
+  const commandText = String(command || "");
+  const commandWithoutSlash = commandText.replace(/^\//, "");
+  const commandName = commandWithoutSlash.split(/\s+/)[0];
+  const commandRest = commandWithoutSlash.slice(commandName.length);
   const featureId = OPTIONAL_COMMAND_FEATURES.get(commandName);
-  if ((featureId && !isOptionalFeatureEnabled(featureId)) || !hasAvailableCommand(commandName)) {
+  const resolvedCommandName = resolveAvailableCommandName(commandName, { rpcOnly: true });
+  if ((featureId && !isOptionalFeatureEnabled(featureId)) || !resolvedCommandName) {
     const tabContext = activeTabContext();
     addEvent(commandUnavailableMessage(commandName), "warn");
     refreshCommands(tabContext).catch((error) => {
@@ -10448,7 +11433,7 @@ function runPublishWorkflow(command) {
     });
     return;
   }
-  sendPrompt("prompt", command);
+  sendPrompt("prompt", `/${resolvedCommandName}${commandRest}`);
 }
 
 async function runNativeCommandMenu(command) {
@@ -10976,9 +11961,69 @@ function openNativeNameDialog() {
 }
 
 async function openNativeResumeSelector(scope = "current") {
-  openNativeCommandDialog({ title: "/resume", message: "Resume another persisted Pi session.", searchPlaceholder: "Filter sessions…" });
+  openNativeCommandDialog({ title: "/resume", message: "Select a session, then resume, rename metadata, or delete it.", searchPlaceholder: "Filter sessions…" });
   renderNativeLoading("Loading sessions…");
   const selectedScope = scope === "all" ? "all" : "current";
+  let selectedItem = null;
+  let resumeDeleteArmed = false;
+
+  const renderActions = () => {
+    elements.nativeCommandActions.replaceChildren();
+    const resumeButton = addNativeCommandAction("Resume", async () => {
+      if (!selectedItem || selectedItem.disabled) return;
+      setNativeCommandError("");
+      try {
+        const result = await nativeCommandApi("/api/switch-session", { method: "POST", body: { sessionPath: selectedItem.session.path } });
+        applyResponseTab(result);
+        addTransientMessage({ role: "native", title: "/resume", content: result.data?.message || "Resumed selected session.", level: "info" });
+        closeNativeCommandDialog();
+        await refreshAll();
+      } catch (error) {
+        setNativeCommandError(error.message || String(error));
+      }
+    }, selectedItem && !selectedItem.disabled ? "primary" : undefined);
+    resumeButton.disabled = !selectedItem || selectedItem.disabled;
+
+    const renameButton = addNativeCommandAction("Rename", async () => {
+      if (!selectedItem) return;
+      const nextName = window.prompt("Session display name", selectedItem.session.name || selectedItem.label || "");
+      if (nextName === null) return;
+      setNativeCommandError("");
+      try {
+        const result = await nativeCommandApi("/api/session-rename", { method: "POST", body: { sessionPath: selectedItem.session.path, name: nextName } });
+        addTransientMessage({ role: "native", title: "/resume", content: result.data?.message || "Renamed session metadata.", level: "info" });
+        await openNativeResumeSelector(selectedScope);
+      } catch (error) {
+        setNativeCommandError(error.message || String(error));
+      }
+    });
+    renameButton.disabled = !selectedItem;
+
+    const deleteButton = addNativeCommandAction(resumeDeleteArmed ? "Confirm delete" : "Delete", async () => {
+      if (!selectedItem || selectedItem.disabled) return;
+      if (!resumeDeleteArmed) {
+        resumeDeleteArmed = true;
+        setNativeCommandError("Delete is permanent when trash is unavailable. Click Confirm delete to proceed.");
+        renderActions();
+        return;
+      }
+      setNativeCommandError("");
+      try {
+        const result = await nativeCommandApi("/api/session-delete", { method: "POST", body: { sessionPath: selectedItem.session.path, confirmed: true } });
+        addTransientMessage({ role: "native", title: "/resume", content: result.data?.message || "Session deleted.", level: "warn" });
+        await openNativeResumeSelector(selectedScope);
+      } catch (error) {
+        setNativeCommandError(error.message || String(error));
+        resumeDeleteArmed = false;
+        renderActions();
+      }
+    }, resumeDeleteArmed ? "danger" : undefined);
+    deleteButton.disabled = !selectedItem || selectedItem.disabled;
+
+    addNativeCommandAction(selectedScope === "all" ? "Current cwd" : "All sessions", () => openNativeResumeSelector(selectedScope === "all" ? "current" : "all"));
+    addNativeCommandAction("Cancel", closeNativeCommandDialog);
+  };
+
   try {
     const response = await nativeCommandApi(`/api/sessions?scope=${encodeURIComponent(selectedScope)}`);
     const items = (response.data?.sessions || []).map((session) => ({
@@ -10990,25 +12035,26 @@ async function openNativeResumeSelector(scope = "current") {
       disabled: session.current,
       session,
     }));
-    const render = () => renderNativeSelectorItems(items, {
-      emptyText: selectedScope === "all" ? "No sessions match this filter." : "No sessions for this working directory match this filter.",
-      onSelect: async (item) => {
-        setNativeCommandError("");
-        try {
-          const result = await nativeCommandApi("/api/switch-session", { method: "POST", body: { sessionPath: item.session.path } });
-          applyResponseTab(result);
-          addTransientMessage({ role: "native", title: "/resume", content: result.data?.message || "Resumed selected session.", level: "info" });
-          closeNativeCommandDialog();
-          await refreshAll();
-        } catch (error) {
-          setNativeCommandError(error.message || String(error));
-        }
-      },
-    });
-    elements.nativeCommandSearch.oninput = render;
-    elements.nativeCommandActions.replaceChildren();
-    addNativeCommandAction(selectedScope === "all" ? "Current cwd" : "All sessions", () => openNativeResumeSelector(selectedScope === "all" ? "current" : "all"));
-    addNativeCommandAction("Cancel", closeNativeCommandDialog);
+    const render = () => {
+      resumeDeleteArmed = false;
+      renderNativeSelectorItems(items, {
+        emptyText: selectedScope === "all" ? "No sessions match this filter." : "No sessions for this working directory match this filter.",
+        activeId: selectedItem?.id,
+        onSelect: (item) => {
+          selectedItem = item;
+          setNativeCommandError("");
+          render();
+          renderActions();
+        },
+      });
+    };
+    elements.nativeCommandSearch.oninput = () => {
+      selectedItem = null;
+      resumeDeleteArmed = false;
+      render();
+      renderActions();
+    };
+    renderActions();
     render();
   } catch (error) {
     setNativeCommandError(error.message || String(error));
@@ -11247,14 +12293,63 @@ async function openNativeSkillsSelector() {
   }
 }
 
-function openNativeAuthInfo(mode) {
+async function openNativeAuthSelector(mode) {
   const command = mode === "logout" ? "/logout" : "/login";
-  openNativeCommandDialog({ title: command, message: "Provider credential entry is intentionally not implemented in the browser yet." });
-  const note = [
-    "Use native Pi TUI authentication for now, or configure provider credentials through environment variables or models.json.",
-    "This avoids accepting or storing API keys in the Web UI until the credential flow has a dedicated security design.",
-  ].join("\n\n");
-  elements.nativeCommandBody.append(make("p", "native-command-note", note));
+  openNativeCommandDialog({
+    title: command,
+    message: mode === "logout" ? "Remove stored provider credentials from auth.json." : "Provider login still requires the Pi TUI.",
+    searchPlaceholder: "Filter providers…",
+  });
+  renderNativeLoading("Loading provider auth status…");
+  try {
+    const response = await nativeCommandApi("/api/auth-providers");
+    const providers = mode === "logout" ? response.data?.logoutProviders || [] : response.data?.loginProviders || [];
+    const guidance = String(response.data?.guidance || "").trim();
+    const items = providers.map((provider) => ({
+      id: provider.id,
+      label: provider.name || provider.id,
+      description: provider.authType === "oauth" ? "OAuth / subscription" : "API key",
+      meta: provider.status?.configured
+        ? `configured via ${provider.status.source || "stored"}`
+        : "not configured in auth.json",
+      badge: provider.status?.configured ? "configured" : "",
+      provider,
+    }));
+    if (!items.length) {
+      elements.nativeCommandBody.replaceChildren(make("p", "native-command-note", mode === "logout"
+        ? "No stored credentials to remove. /logout only removes credentials saved by /login."
+        : "No providers are currently available."));
+      if (guidance) elements.nativeCommandBody.append(make("p", "native-command-note muted", guidance));
+      return;
+    }
+    const render = () => renderNativeSelectorItems(items, {
+      emptyText: "No providers match this filter.",
+      onSelect: async (item) => {
+        if (mode === "login") {
+          setNativeCommandError(`Run /login in the Pi TUI for ${item.label}. Browser login is not implemented yet.`);
+          return;
+        }
+        if (!window.confirm(`Remove stored credentials for ${item.label}?`)) return;
+        setNativeCommandError("");
+        try {
+          const result = await nativeCommandApi("/api/auth-logout", {
+            method: "POST",
+            body: { provider: item.provider.id, confirmed: true },
+          });
+          addTransientMessage({ role: "native", title: "/logout", content: result.data?.message || "Provider credentials removed.", level: "info" });
+          closeNativeCommandDialog();
+          scheduleRefreshState(120);
+        } catch (error) {
+          setNativeCommandError(error.message || String(error));
+        }
+      },
+    });
+    elements.nativeCommandSearch.oninput = render;
+    render();
+  } catch (error) {
+    setNativeCommandError(error.message || String(error));
+    elements.nativeCommandBody.replaceChildren();
+  }
 }
 
 async function handleNativeSlashSelectorCommand(message, { usesPromptInput = false } = {}) {
@@ -11311,7 +12406,7 @@ async function handleNativeSlashSelectorCommand(message, { usesPromptInput = fal
       return true;
     case "login":
     case "logout":
-      openNativeAuthInfo(name);
+      await openNativeAuthSelector(name);
       return true;
     default:
       return false;
@@ -11428,6 +12523,30 @@ function resetStreamBubble() {
   streamToolCallSeen = false;
   streamThinkingBubble = null;
   streamThinking = null;
+  streamMessageActive = false;
+}
+
+function liveStreamRenderActive() {
+  return streamMessageActive && currentState?.isStreaming === true && Boolean(streamBubble || streamThinkingBubble || streamRawText);
+}
+
+/**
+ * The chat DOM was rebuilt while an assistant message is still streaming:
+ * drop references to the detached nodes but keep stream text state, then
+ * re-append the live thinking/text bubbles so no partial output is lost.
+ */
+function restoreStreamRenderAfterChatRebuild() {
+  const thinkingText = streamThinking?.textContent || "";
+  const thinkingComplete = streamThinkingBubble?.classList.contains("complete") === true;
+  streamBubble = null;
+  streamText = null;
+  streamThinkingBubble = null;
+  streamThinking = null;
+  streamBubbleVisibleSince = 0;
+  if (thinkingText && setStreamingThinkingText(thinkingText) && thinkingComplete) {
+    streamThinkingBubble?.classList.add("complete");
+  }
+  if (stripTodoProgressLines(streamRawText, { streaming: true })) renderStreamingAssistantText();
 }
 
 function thinkingDeltaText(update) {
@@ -11612,11 +12731,12 @@ function renderNetworkStatus() {
   const list = make("div", "network-url-list");
 
   const addUrl = (label, url) => {
-    if (!url) return;
+    const href = safeHttpUrl(url);
+    if (!href) return;
     const row = make("div", "network-status-url-row");
     const labelNode = make("span", "network-status-url-label", label);
     const link = make("a", "network-status-url", url);
-    link.href = url;
+    link.href = href;
     link.target = "_blank";
     link.rel = "noreferrer";
     row.append(labelNode, link);
@@ -11655,8 +12775,10 @@ async function refreshMessages(tabContext = activeTabContext()) {
   const response = await api("/api/messages", { tabId: tabContext.tabId });
   if (!isCurrentTabContext(tabContext)) return;
   latestMessages = response.data?.messages || [];
-  resetStreamBubble();
+  const preserveLiveStream = liveStreamRenderActive();
+  if (!preserveLiveStream) resetStreamBubble();
   renderMessages(latestMessages);
+  if (preserveLiveStream) restoreStreamRenderAfterChatRebuild();
   markTabOutputSeen();
   renderFooter();
 }
@@ -11706,23 +12828,67 @@ function syncModelSelectToState() {
   }
 }
 
+function normalizedCommandIdentity(command) {
+  return [commandBaseName(command.name), command.description, command.source, command.enabled ? "enabled" : "disabled"].join("\u0000");
+}
+
+function combineIdenticalDuplicateCommands(commands) {
+  const duplicateGroups = new Map();
+  for (const command of commands) {
+    if (commandBaseName(command.name) === command.name) continue;
+    const key = normalizedCommandIdentity(command);
+    if (!duplicateGroups.has(key)) duplicateGroups.set(key, []);
+    duplicateGroups.get(key).push(command);
+  }
+  const combinedKeys = new Set([...duplicateGroups.entries()].filter(([, group]) => group.length > 1).map(([key]) => key));
+  const emittedKeys = new Set();
+  const emittedNames = new Set();
+  const result = [];
+
+  for (const command of commands) {
+    const key = normalizedCommandIdentity(command);
+    if (!combinedKeys.has(key)) {
+      if (emittedNames.has(command.name)) continue;
+      emittedNames.add(command.name);
+      result.push(command);
+      continue;
+    }
+
+    if (emittedKeys.has(key)) continue;
+    emittedKeys.add(key);
+    const group = duplicateGroups.get(key);
+    const baseName = commandBaseName(command.name);
+    const displayName = emittedNames.has(baseName) ? command.name : baseName;
+    emittedNames.add(displayName);
+    result.push({
+      ...command,
+      name: displayName,
+      invokeName: command.name,
+      duplicateNames: group.map((item) => item.name),
+      duplicateCount: group.length,
+      location: command.location || `${group.length} identical loaded commands`,
+    });
+  }
+
+  return result;
+}
+
 function normalizeCommands(commands, { dedupe = true } = {}) {
-  const seen = new Set();
-  return (commands || [])
-    .map((command) => ({
-      name: String(command.name || "").trim(),
-      description: String(command.description || "").trim(),
-      source: String(command.source || "command").trim(),
-      location: String(command.location || "").trim(),
-      enabled: command.enabled !== false,
-    }))
-    .filter((command) => {
-      if (!command.name) return false;
-      if (!dedupe) return true;
-      if (seen.has(command.name)) return false;
-      seen.add(command.name);
-      return true;
+  const normalized = (commands || [])
+    .map((command) => {
+      const name = String(command.name || "").trim();
+      return {
+        name,
+        invokeName: name,
+        description: String(command.description || "").trim(),
+        source: String(command.source || "command").trim(),
+        location: String(command.location || "").trim(),
+        enabled: command.enabled !== false,
+      };
     })
+    .filter((command) => command.name);
+
+  return (dedupe ? combineIdenticalDuplicateCommands(normalized) : normalized)
     .sort((a, b) => a.name.localeCompare(b.name));
 }
 
@@ -11789,11 +12955,13 @@ function getPathTrigger() {
 function scoreCommandSuggestion(command, query) {
   if (!query) return 0;
   const q = query.toLowerCase();
-  const name = command.name.toLowerCase();
+  const names = [command.name, command.invokeName, ...(command.duplicateNames || [])]
+    .filter(Boolean)
+    .map((name) => name.toLowerCase());
   const description = command.description.toLowerCase();
-  if (name === q) return 0;
-  if (name.startsWith(q)) return 1;
-  if (name.includes(q)) return 2;
+  if (names.some((name) => name === q)) return 0;
+  if (names.some((name) => name.startsWith(q))) return 1;
+  if (names.some((name) => name.includes(q))) return 2;
   if (description.includes(q)) return 3;
   return Number.POSITIVE_INFINITY;
 }
@@ -11813,7 +12981,7 @@ function commandSearchQuery() {
 
 function commandMatchesSearch(command, query) {
   if (!query) return true;
-  return [command.name, command.description, command.source, command.location]
+  return [command.name, command.invokeName, ...(command.duplicateNames || []), command.description, command.source, command.location]
     .filter(Boolean)
     .join(" ")
     .toLowerCase()
@@ -12516,6 +13684,9 @@ async function runUserBashCommand(parsed, { usesPromptInput = false, targetTabId
     const result = response.data || {};
     applyResponseTab(response);
     if (isCurrentTabContext(tabContext)) {
+      for (const warning of response.warnings || []) {
+        if (warning) addEvent(String(warning), "warn");
+      }
       addTransientMessage({
         role: "bashExecution",
         title: excludeFromContext ? "bash (!! complete)" : "bash (! complete)",
@@ -12596,6 +13767,7 @@ async function sendPrompt(kind = "prompt", explicitMessage, { targetTabId = acti
   try {
     const prepared = attachments.length ? await prepareAttachmentsForPrompt(attachments, targetTabId) : { images: [], uploadedFiles: [], inlineImageIds: new Set() };
     message = composeMessageWithAttachments(originalMessage, prepared.uploadedFiles, prepared.inlineImageIds);
+    if (kind === "prompt" && attachments.length === 0) message = resolveRpcSlashCommandMessage(message);
     const bodyBase = { message };
     if (prepared.images.length) bodyBase.images = prepared.images;
     if (!message.startsWith("/")) {
@@ -12625,19 +13797,8 @@ async function sendPrompt(kind = "prompt", explicitMessage, { targetTabId = acti
     } else if (targetStillActive && kind === "follow-up" && currentState?.isStreaming) {
       setRunIndicatorActivity("Follow-up queued; current agent run is still active…");
     }
-    if (targetStillActive && response?.command === "native_slash_command" && response.data?.copyText) {
-      try {
-        await copyText(response.data.copyText);
-      } catch (error) {
-        response.data.message = `${response.data.message || "Copy requested, but clipboard access failed."}\n\nClipboard access failed: ${error.message}\n\n${response.data.copyText}`;
-        response.data.level = "warn";
-      }
-    }
-    if (targetStillActive && response?.command === "native_slash_command" && response.data?.download) {
-      if (triggerNativeDownload(response.data.download)) addEvent(`download started: ${response.data.download.fileName || response.data.download.url}`, "info");
-    }
-    if (targetStillActive && response?.command === "native_slash_command" && response.data?.message) {
-      addTransientMessage({ role: "native", title: message.split(/\s+/, 1)[0], content: response.data.message, level: response.data.level || "info" });
+    if (targetStillActive && response?.command === "native_slash_command") {
+      applyNativeSlashCommandEffects(response, message, tabContext);
     }
     if (usesPromptInput) {
       clearAttachments(targetTabId);
@@ -12650,8 +13811,8 @@ async function sendPrompt(kind = "prompt", explicitMessage, { targetTabId = acti
     }
     if (targetStillActive) {
       hideCommandSuggestions();
-      scheduleRefreshState(120, tabContext);
-    } else {
+      if (response?.command !== "native_slash_command") scheduleRefreshState(120, tabContext);
+    } else if (response?.command !== "native_slash_command") {
       scheduleRefreshTabs(300);
     }
   } catch (error) {
@@ -12950,12 +14111,14 @@ function handleEvent(event) {
       renderFeedbackTray();
       break;
     case "agent_end":
+      streamMessageActive = false;
       addEvent("agent finished");
       notifyAgentDone(event.tabId || activeTabId, { activity: event.tabActivity, tabTitle: event.tabTitle });
       clearContextUsageUnknownAfterCompaction(event.tabId || activeTabId);
       if (currentState) currentState = { ...currentState, isStreaming: false };
       clearRunIndicatorActivity();
       markTabOutputSeen();
+      requestGitFooterWebuiPayload(tabContext, { force: true });
       scheduleRefreshState();
       scheduleRefreshMessages();
       scheduleRefreshFooter();
@@ -12976,6 +14139,7 @@ function handleEvent(event) {
     case "message_start":
       if (event.message?.role === "assistant") {
         resetStreamBubble();
+        streamMessageActive = true;
         setRunIndicatorActivity("Starting assistant message…", { scroll: false });
       }
       break;
@@ -12983,6 +14147,7 @@ function handleEvent(event) {
       handleMessageUpdate(event);
       break;
     case "message_end":
+      streamMessageActive = false;
       if (runIndicatorIsActive()) setRunIndicatorActivity("Assistant message finished; waiting for the next step…", { scroll: false });
       scheduleRefreshMessages();
       scheduleRefreshState();
@@ -13661,6 +14826,7 @@ document.addEventListener("pointerdown", (event) => {
   if (isFooterPickerOpen() && !elements.statusBar.contains(event.target)) {
     setFooterModelPickerOpen(false);
     setFooterThinkingPickerOpen(false);
+    setFooterBranchPickerOpen(false);
   }
 }, { passive: true });
 document.addEventListener("pointermove", (event) => {
@@ -13678,7 +14844,7 @@ function isTextEntryTarget(target) {
 
 function shouldHandleNativeAppShortcut(event) {
   if (event.defaultPrevented) return false;
-  if (elements.dialog?.open || elements.pathPickerDialog?.open || elements.nativeCommandDialog?.open || elements.appRunnerInfoDialog?.open) return false;
+  if (elements.dialog?.open || elements.pathPickerDialog?.open || elements.gitChangesDialog?.open || elements.nativeCommandDialog?.open || elements.appRunnerInfoDialog?.open) return false;
   return event.target === elements.promptInput || !isTextEntryTarget(event.target);
 }
 
@@ -13737,7 +14903,7 @@ window.addEventListener("focus", () => scheduleForegroundReconcile("window focus
 window.addEventListener("online", () => scheduleForegroundReconcile("network online", 0));
 window.addEventListener("keydown", (event) => {
   if (event.key !== "Escape") return;
-  if (elements.dialog?.open || elements.pathPickerDialog?.open) return;
+  if (elements.dialog?.open || elements.pathPickerDialog?.open || elements.gitChangesDialog?.open) return;
   if (publishMenuOpen) {
     setPublishMenuOpen(false);
     return;
@@ -13775,6 +14941,7 @@ window.addEventListener("keydown", (event) => {
   if (isFooterPickerOpen()) {
     setFooterModelPickerOpen(false);
     setFooterThinkingPickerOpen(false);
+    setFooterBranchPickerOpen(false);
     return;
   }
   if (!elements.commandSuggest.hidden) {
@@ -13801,6 +14968,18 @@ window.addEventListener("keydown", (event) => {
   }
 });
 
+elements.gitChangesRefreshButton?.addEventListener("click", refreshGitChangesDialog);
+elements.gitChangesCloseButton?.addEventListener("click", closeGitChangesDialog);
+elements.gitChangesBody?.addEventListener("scroll", updateGitChangesCurrentFileHeader, { passive: true });
+elements.gitChangesDialog?.addEventListener("cancel", (event) => {
+  event.preventDefault();
+  closeGitChangesDialog();
+});
+elements.gitChangesDialog?.addEventListener("close", () => {
+  gitChangesRequestSerial += 1;
+  gitChangesState = { ...gitChangesState, loading: false };
+});
+
 elements.refreshCodexUsageButton?.addEventListener("click", () => {
   refreshCodexUsage({ forceAuthRefresh: true }).finally(() => scheduleRefreshCodexUsage());
 });