@firstpick/pi-package-webui 0.4.5 → 0.4.7

package/public/app.js

@@ -114,6 +114,7 @@ const elements = {
   gitChangesStatus: $("#gitChangesStatus"),
   gitChangesBody: $("#gitChangesBody"),
   gitChangesRefreshButton: $("#gitChangesRefreshButton"),
+  gitChangesPullButton: $("#gitChangesPullButton"),
   gitChangesCloseButton: $("#gitChangesCloseButton"),
   modelSelect: $("#modelSelect"),
   setModelButton: $("#setModelButton"),
@@ -265,7 +266,7 @@ let foregroundReconcileTimer = null;
 let eventSource = null;
 let activeDialog = null;
 let activeGitPrDialogResolve = null;
-let gitChangesState = { loading: false, error: "", data: null, tabId: null };
+let gitChangesState = { loading: false, pulling: false, error: "", message: "", data: null, tabId: null };
 let gitChangesRequestSerial = 0;
 const gitChangesUntrackedContentRequests = new Set();
 let nativeCommandTabId = null;
@@ -276,12 +277,16 @@ let pathFastPicksReady = false;
 let pathFastPicksLoadPromise = null;
 let mobileTabsExpanded = false;
 let openTerminalTabGroupKey = null;
+let terminalCustomGroups = new Map();
+let terminalCustomGroupSerial = 1;
+let terminalTabDragId = null;
 let newTabMenuOpen = false;
 let nativeCommandMenuOpen = false;
 let appRunnerMenuOpen = false;
 let busyPromptBehaviorMenuOpen = false;
 const skillUsageByTab = new Map();
 let appRunnerCustomDraft = { id: "", label: "", command: "./", path: "", args: "" };
+let appRunnerCustomFeedback = { type: "", message: "" };
 let appRunnerFileBrowserState = { open: false, loading: false, path: "", data: null, error: "" };
 let optionsMenuOpen = false;
 let availableCommands = [];
@@ -409,6 +414,8 @@ const THINKING_VISIBILITY_STORAGE_KEY = "pi-webui-thinking-visible";
 const BUSY_PROMPT_BEHAVIOR_STORAGE_KEY = "pi-webui-busy-prompt-behavior";
 const SKILL_USAGE_STORAGE_KEY = "pi-webui-skill-usage-v1";
 const TERMINAL_TABS_LAYOUT_STORAGE_KEY = "pi-webui-terminal-tabs-layout";
+const TERMINAL_CUSTOM_GROUPS_STORAGE_KEY = "pi-webui-terminal-custom-groups-v1";
+const TERMINAL_TAB_DRAG_MIME = "application/x-pi-terminal-tab-id";
 const TOOL_OUTPUT_EXPANDED_STORAGE_KEY = "pi-webui-tool-output-expanded";
 const THEME_STORAGE_KEY = "pi-webui-theme";
 const CUSTOM_BACKGROUND_STORAGE_KEY = "pi-webui-custom-background";
@@ -1245,6 +1252,252 @@ function restoreTerminalTabsLayoutSetting() {
   setTerminalTabsLayout(readStoredTerminalTabsLayout(), { persist: false });
 }
 
+function normalizeTerminalCustomGroupTitle(value, fallback = "Custom group") {
+  const title = String(value || "").replace(/\s+/g, " ").trim();
+  return (title || fallback).slice(0, 40);
+}
+
+function normalizeTerminalCustomGroupTabIds(value) {
+  const ids = [];
+  const seen = new Set();
+  for (const item of Array.isArray(value) ? value : []) {
+    const id = String(item || "").trim();
+    if (!id || seen.has(id)) continue;
+    seen.add(id);
+    ids.push(id);
+  }
+  return ids;
+}
+
+function nextTerminalCustomGroupId() {
+  const id = `group-${Date.now().toString(36)}-${terminalCustomGroupSerial.toString(36)}`;
+  terminalCustomGroupSerial += 1;
+  return id;
+}
+
+function restoreTerminalCustomGroups() {
+  terminalCustomGroups = new Map();
+  terminalCustomGroupSerial = 1;
+  let parsed = null;
+  try {
+    parsed = JSON.parse(localStorage.getItem(TERMINAL_CUSTOM_GROUPS_STORAGE_KEY) || "null");
+  } catch {
+    return;
+  }
+  const records = Array.isArray(parsed?.groups) ? parsed.groups : Array.isArray(parsed) ? parsed : [];
+  const usedTabIds = new Set();
+  for (const record of records) {
+    const rawId = String(record?.id || "").trim();
+    const id = rawId && !terminalCustomGroups.has(rawId) ? rawId : nextTerminalCustomGroupId();
+    const title = normalizeTerminalCustomGroupTitle(record?.title, `Group ${terminalCustomGroups.size + 1}`);
+    const tabIds = normalizeTerminalCustomGroupTabIds(record?.tabIds).filter((tabId) => {
+      if (usedTabIds.has(tabId)) return false;
+      usedTabIds.add(tabId);
+      return true;
+    });
+    if (tabIds.length < 2) continue;
+    terminalCustomGroups.set(id, { id, title, tabIds });
+    const serialMatch = /^Group\s+(\d+)$/i.exec(title);
+    if (serialMatch) terminalCustomGroupSerial = Math.max(terminalCustomGroupSerial, Number(serialMatch[1]) + 1);
+  }
+}
+
+function persistTerminalCustomGroups() {
+  try {
+    const groups = [...terminalCustomGroups.values()].map((group) => ({
+      id: group.id,
+      title: normalizeTerminalCustomGroupTitle(group.title),
+      tabIds: normalizeTerminalCustomGroupTabIds(group.tabIds),
+    })).filter((group) => group.tabIds.length >= 2);
+    localStorage.setItem(TERMINAL_CUSTOM_GROUPS_STORAGE_KEY, JSON.stringify({ version: 1, groups }));
+  } catch {
+    // Ignore storage failures; custom tab groups still work for this page load.
+  }
+}
+
+function terminalCustomGroupByTabId() {
+  const map = new Map();
+  for (const [groupId, group] of terminalCustomGroups) {
+    for (const tabId of group.tabIds || []) {
+      if (!map.has(tabId)) map.set(tabId, groupId);
+    }
+  }
+  return map;
+}
+
+function terminalCustomGroupIdForTab(tabId) {
+  const id = String(tabId || "").trim();
+  if (!id) return null;
+  for (const [groupId, group] of terminalCustomGroups) {
+    if (group.tabIds?.includes(id)) return groupId;
+  }
+  return null;
+}
+
+function syncTerminalCustomGroupsWithTabs(currentTabs = tabs, { persist = true } = {}) {
+  const validTabIds = new Set((currentTabs || []).map((tab) => tab.id).filter(Boolean));
+  const claimedTabIds = new Set();
+  let changed = false;
+  for (const [groupId, group] of [...terminalCustomGroups]) {
+    const filtered = [];
+    for (const tabId of normalizeTerminalCustomGroupTabIds(group.tabIds)) {
+      if (!validTabIds.has(tabId) || claimedTabIds.has(tabId)) {
+        changed = true;
+        continue;
+      }
+      claimedTabIds.add(tabId);
+      filtered.push(tabId);
+    }
+    if (filtered.length < 2) {
+      terminalCustomGroups.delete(groupId);
+      changed = true;
+      continue;
+    }
+    if (filtered.length !== group.tabIds.length || filtered.some((tabId, index) => tabId !== group.tabIds[index])) {
+      group.tabIds = filtered;
+      changed = true;
+    }
+  }
+  if (changed && persist) persistTerminalCustomGroups();
+  return changed;
+}
+
+function removeTabsFromOtherTerminalCustomGroups(tabIds, keepGroupId = null) {
+  const moving = new Set(normalizeTerminalCustomGroupTabIds(tabIds));
+  if (!moving.size) return false;
+  let changed = false;
+  for (const [groupId, group] of [...terminalCustomGroups]) {
+    if (groupId === keepGroupId) continue;
+    const filtered = normalizeTerminalCustomGroupTabIds(group.tabIds).filter((tabId) => !moving.has(tabId));
+    if (filtered.length === group.tabIds.length) continue;
+    changed = true;
+    if (filtered.length < 2) terminalCustomGroups.delete(groupId);
+    else group.tabIds = filtered;
+  }
+  return changed;
+}
+
+function createTerminalCustomGroup(tabIds) {
+  const validTabIds = new Set(tabs.map((tab) => tab.id).filter(Boolean));
+  const unique = normalizeTerminalCustomGroupTabIds(tabIds).filter((tabId) => validTabIds.has(tabId));
+  if (unique.length < 2) return null;
+  removeTabsFromOtherTerminalCustomGroups(unique);
+  const title = `Group ${terminalCustomGroupSerial}`;
+  const id = nextTerminalCustomGroupId();
+  const group = { id, title, tabIds: unique };
+  terminalCustomGroups.set(id, group);
+  syncTerminalCustomGroupsWithTabs(tabs, { persist: false });
+  persistTerminalCustomGroups();
+  return terminalCustomGroups.get(id) || group;
+}
+
+function addTabsToTerminalCustomGroup(groupId, tabIds) {
+  const group = terminalCustomGroups.get(groupId);
+  if (!group) return null;
+  const validTabIds = new Set(tabs.map((tab) => tab.id).filter(Boolean));
+  const unique = normalizeTerminalCustomGroupTabIds(tabIds).filter((tabId) => validTabIds.has(tabId) && !group.tabIds.includes(tabId));
+  if (!unique.length) return group;
+  removeTabsFromOtherTerminalCustomGroups(unique, groupId);
+  group.tabIds = normalizeTerminalCustomGroupTabIds([...group.tabIds, ...unique]);
+  syncTerminalCustomGroupsWithTabs(tabs, { persist: false });
+  persistTerminalCustomGroups();
+  return terminalCustomGroups.get(groupId) || null;
+}
+
+function terminalTabById(tabId) {
+  return tabs.find((tab) => tab.id === tabId) || null;
+}
+
+function terminalTabDragIdFromEvent(event) {
+  return event?.dataTransfer?.getData?.(TERMINAL_TAB_DRAG_MIME) || terminalTabDragId || "";
+}
+
+function canDropTerminalTabOnTarget(sourceTabId, target) {
+  if (!sourceTabId || !terminalTabById(sourceTabId) || !target) return false;
+  if (target.type === "group") {
+    const groupTabs = target.group?.tabs || [];
+    return groupTabs.length > 0 && !groupTabs.some((tab) => tab.id === sourceTabId);
+  }
+  return Boolean(target.tabId && target.tabId !== sourceTabId && terminalTabById(target.tabId));
+}
+
+function clearTerminalTabDragState() {
+  terminalTabDragId = null;
+  document.body.classList.remove("terminal-tab-dragging");
+  elements.tabBar?.querySelectorAll(".terminal-tab-dragging, .terminal-tab-drag-over").forEach((item) => {
+    item.classList.remove("terminal-tab-dragging", "terminal-tab-drag-over");
+  });
+}
+
+function bindTerminalTabDragAndDrop(element, { sourceTabId = "", target = null } = {}) {
+  if (!element) return;
+  if (sourceTabId) {
+    element.draggable = true;
+    element.dataset.dragTabId = sourceTabId;
+    element.addEventListener("dragstart", (event) => {
+      if (event.target?.closest?.(".terminal-tab-close, .terminal-tab-group-add")) {
+        event.preventDefault();
+        return;
+      }
+      terminalTabDragId = sourceTabId;
+      document.body.classList.add("terminal-tab-dragging");
+      element.classList.add("terminal-tab-dragging");
+      try {
+        event.dataTransfer?.setData(TERMINAL_TAB_DRAG_MIME, sourceTabId);
+        event.dataTransfer?.setData("text/plain", terminalTabById(sourceTabId)?.title || sourceTabId);
+        if (event.dataTransfer) event.dataTransfer.effectAllowed = "move";
+      } catch {
+        // Ignore browser drag payload restrictions; same-page state still carries the tab id.
+      }
+    });
+    element.addEventListener("dragend", clearTerminalTabDragState);
+  }
+  if (!target) return;
+  element.addEventListener("dragover", (event) => {
+    const sourceTabIdFromEvent = terminalTabDragIdFromEvent(event);
+    if (!canDropTerminalTabOnTarget(sourceTabIdFromEvent, target)) return;
+    event.preventDefault();
+    if (event.dataTransfer) event.dataTransfer.dropEffect = "move";
+    element.classList.add("terminal-tab-drag-over");
+    if (target.type === "group") setOpenTerminalTabGroup(target.group?.key);
+  });
+  element.addEventListener("dragleave", (event) => {
+    if (event.relatedTarget && element.contains(event.relatedTarget)) return;
+    element.classList.remove("terminal-tab-drag-over");
+  });
+  element.addEventListener("drop", (event) => {
+    const sourceTabIdFromEvent = terminalTabDragIdFromEvent(event);
+    element.classList.remove("terminal-tab-drag-over");
+    if (!canDropTerminalTabOnTarget(sourceTabIdFromEvent, target)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    handleTerminalTabDrop(sourceTabIdFromEvent, target);
+  });
+}
+
+function handleTerminalTabDrop(sourceTabId, target) {
+  const sourceTab = terminalTabById(sourceTabId);
+  if (!sourceTab) return;
+  let group = null;
+  if (target.type === "group" && target.group) {
+    if (target.group.custom && target.group.customGroupId) {
+      group = addTabsToTerminalCustomGroup(target.group.customGroupId, [sourceTabId]);
+    } else {
+      group = createTerminalCustomGroup([...target.group.tabs.map((tab) => tab.id), sourceTabId]);
+    }
+  } else if (target.tabId) {
+    const targetTab = terminalTabById(target.tabId);
+    if (!targetTab || targetTab.id === sourceTabId) return;
+    const targetGroupId = terminalCustomGroupIdForTab(targetTab.id);
+    group = targetGroupId ? addTabsToTerminalCustomGroup(targetGroupId, [sourceTabId]) : createTerminalCustomGroup([targetTab.id, sourceTabId]);
+  }
+  if (!group) return;
+  clearOpenTerminalTabGroup(null, { force: true });
+  clearTerminalTabDragState();
+  renderTabs();
+  addEvent(`added ${sourceTab.title || "tab"} to ${normalizeTerminalCustomGroupTitle(group.title).toLowerCase()}`, "info");
+}
+
 function removeStreamingThinkingBubble() {
   streamThinkingBubble?.remove();
   streamThinkingBubble = null;
@@ -4261,13 +4514,39 @@ function tabCwdGroupKey(tab) {
 }
 
 function tabCwdGroups() {
+  syncTerminalCustomGroupsWithTabs(tabs);
   const groups = [];
   const byKey = new Map();
+  const customByTab = terminalCustomGroupByTabId();
+  const customGroups = new Map([...terminalCustomGroups.values()].map((group) => [group.id, {
+    key: `custom:${group.id}`,
+    custom: true,
+    customGroupId: group.id,
+    title: normalizeTerminalCustomGroupTitle(group.title),
+    tabs: [],
+    cwd: "",
+  }]));
+
   for (const tab of tabs) {
+    const customGroupId = customByTab.get(tab.id);
+    if (customGroupId) customGroups.get(customGroupId)?.tabs.push(tab);
+  }
+
+  const emittedCustomGroups = new Set();
+  for (const tab of tabs) {
+    const customGroupId = customByTab.get(tab.id);
+    if (customGroupId) {
+      const customGroup = customGroups.get(customGroupId);
+      if (customGroup && !emittedCustomGroups.has(customGroupId)) {
+        groups.push(customGroup);
+        emittedCustomGroups.add(customGroupId);
+      }
+      continue;
+    }
     const key = tabCwdGroupKey(tab);
     let group = byKey.get(key);
     if (!group) {
-      group = { key, cwd: tab.cwd || "", tabs: [] };
+      group = { key, custom: false, cwd: tab.cwd || "", tabs: [] };
       byKey.set(key, group);
       groups.push(group);
     }
@@ -4282,6 +4561,18 @@ function tabGroupTitle(cwd, fallback = "cwd") {
   return leaf.length > 26 ? `…${leaf.slice(-25)}` : leaf;
 }
 
+function terminalDisplayGroupTitle(group, fallback = "group") {
+  return group?.custom ? normalizeTerminalCustomGroupTitle(group.title, "Custom group") : tabGroupTitle(group?.cwd, fallback);
+}
+
+function terminalDisplayGroupDetail(group, fallback = "group") {
+  if (!group?.custom) return normalizeDisplayPath(group?.cwd || fallback);
+  const cwdLabels = [...new Set((group.tabs || []).map((tab) => normalizeDisplayPath(tab.cwd || "")).filter(Boolean))];
+  if (!cwdLabels.length) return "custom group";
+  if (cwdLabels.length === 1) return cwdLabels[0];
+  return `${cwdLabels[0]} + ${cwdLabels.length - 1} cwd${cwdLabels.length === 2 ? "" : "s"}`;
+}
+
 function terminalTabMeta(tab, indicator) {
   return tab.running ? `${indicator.meta} · pid ${tab.pid || "…"}` : "stopped";
 }
@@ -4299,12 +4590,15 @@ function renderTerminalTab(tab) {
   const isActive = tab.id === activeTabId;
   const indicator = tabIndicator(tab);
   const wrapper = make("div", `terminal-tab activity-${indicator.state}${isActive ? " active" : ""}${tab.running ? "" : " stopped"}`);
+  wrapper.dataset.tabId = tab.id;
+  bindTerminalTabDragAndDrop(wrapper, { sourceTabId: tab.id, target: { type: "tab", tabId: tab.id } });
   const button = make("button", "terminal-tab-button");
   button.type = "button";
+  button.draggable = false;
   button.setAttribute("role", "tab");
   button.setAttribute("aria-selected", isActive ? "true" : "false");
   button.setAttribute("aria-label", `${tab.title}: ${indicator.label}`);
-  button.title = `${tab.title} · ${indicator.label}${tab.running ? ` · pid ${tab.pid || "starting"}` : " · stopped"}`;
+  button.title = `${tab.title} · ${indicator.label}${tab.running ? ` · pid ${tab.pid || "starting"}` : " · stopped"} · drag onto another tab or group to group`;
   appendTerminalTabContent(button, { title: tab.title, indicator, meta: terminalTabMeta(tab, indicator) });
   button.addEventListener("click", () => switchTab(tab.id));
   wrapper.append(button);
@@ -4312,6 +4606,7 @@ function renderTerminalTab(tab) {
   if (tabs.length > 1) {
     const close = make("button", "terminal-tab-close", "×");
     close.type = "button";
+    close.draggable = false;
     close.title = `Close ${tab.title}`;
     close.setAttribute("aria-label", `Close ${tab.title}`);
     close.addEventListener("click", (event) => {
@@ -4324,16 +4619,19 @@ function renderTerminalTab(tab) {
   return wrapper;
 }
 
-function renderTerminalTabGroupItem(tab) {
+function renderTerminalTabGroupItem(tab, group) {
   const isActive = tab.id === activeTabId;
   const indicator = tabIndicator(tab);
   const item = make("div", `terminal-tab-group-item activity-${indicator.state}${isActive ? " active" : ""}${tab.running ? "" : " stopped"}`);
+  item.dataset.tabId = tab.id;
+  bindTerminalTabDragAndDrop(item, { sourceTabId: tab.id, target: group?.custom ? { type: "group", group } : { type: "tab", tabId: tab.id } });
   const button = make("button", "terminal-tab-button terminal-tab-group-item-button");
   button.type = "button";
+  button.draggable = false;
   button.setAttribute("role", "tab");
   button.setAttribute("aria-selected", isActive ? "true" : "false");
   button.setAttribute("aria-label", `${tab.title}: ${indicator.label}`);
-  button.title = `${tab.title} · ${indicator.label}${tab.running ? ` · pid ${tab.pid || "starting"}` : " · stopped"}`;
+  button.title = `${tab.title} · ${indicator.label}${tab.running ? ` · pid ${tab.pid || "starting"}` : " · stopped"} · drag onto another tab or group to group`;
   appendTerminalTabContent(button, { title: tab.title, indicator, meta: terminalTabMeta(tab, indicator) });
   button.addEventListener("click", (event) => {
     event.stopPropagation();
@@ -4344,6 +4642,7 @@ function renderTerminalTabGroupItem(tab) {
   if (tabs.length > 1) {
     const close = make("button", "terminal-tab-close terminal-tab-group-item-close", "×");
     close.type = "button";
+    close.draggable = false;
     close.title = `Close ${tab.title}`;
     close.setAttribute("aria-label", `Close ${tab.title}`);
     close.addEventListener("click", (event) => {
@@ -4357,6 +4656,7 @@ function renderTerminalTabGroupItem(tab) {
 }
 
 function shouldRenderTerminalTabGroup(group, groupCount) {
+  if (group.custom) return group.tabs.length > 1;
   return groupCount > 1 && group.tabs.length > 1 && Boolean(group.cwd);
 }
 
@@ -4366,11 +4666,13 @@ function renderTerminalTabGroup(group, groupCount = 1) {
   const isActive = groupTabs.some((tab) => tab.id === activeTabId);
   const isStopped = groupTabs.every((tab) => !tab.running);
   const indicator = tabGroupIndicator(groupTabs);
-  const cwdTitle = tabGroupTitle(group.cwd, activeGroupTab?.title || "cwd");
-  const activeTitle = activeGroupTab?.title || cwdTitle;
-  const displayCwd = normalizeDisplayPath(group.cwd || cwdTitle);
-  const wrapper = make("div", `terminal-tab terminal-tab-group activity-${indicator.state}${isActive ? " active" : ""}${isStopped ? " stopped" : ""}`);
+  const groupTitle = terminalDisplayGroupTitle(group, activeGroupTab?.title || "group");
+  const activeTitle = activeGroupTab?.title || groupTitle;
+  const groupDetail = terminalDisplayGroupDetail(group, groupTitle);
+  const wrapper = make("div", `terminal-tab terminal-tab-group${group.custom ? " terminal-tab-custom-group" : ""} activity-${indicator.state}${isActive ? " active" : ""}${isStopped ? " stopped" : ""}`);
   wrapper.dataset.groupKey = group.key;
+  if (group.customGroupId) wrapper.dataset.customGroupId = group.customGroupId;
+  bindTerminalTabDragAndDrop(wrapper, { sourceTabId: activeGroupTab?.id || "", target: { type: "group", group } });
   wrapper.addEventListener("pointerenter", () => setOpenTerminalTabGroup(group.key));
   wrapper.addEventListener("pointerleave", () => clearOpenTerminalTabGroup(group.key));
   wrapper.addEventListener("focusin", () => setOpenTerminalTabGroup(group.key));
@@ -4381,21 +4683,23 @@ function renderTerminalTabGroup(group, groupCount = 1) {
   });
   const button = make("button", "terminal-tab-button terminal-tab-group-button");
   button.type = "button";
+  button.draggable = false;
   button.setAttribute("role", "tab");
   button.setAttribute("aria-selected", isActive ? "true" : "false");
   button.setAttribute("aria-haspopup", "true");
   button.setAttribute("aria-expanded", group.key === openTerminalTabGroupKey ? "true" : "false");
-  button.setAttribute("aria-label", `${cwdTitle} group: ${groupTabs.length} tabs, ${indicator.label}. Active ${activeTitle}`);
-  button.title = `${activeTitle} · ${displayCwd} · ${groupTabs.length} tabs · ${indicator.label}`;
-  appendTerminalTabContent(button, { title: activeTitle, indicator, meta: `${cwdTitle} · ${indicator.meta}`, count: groupTabs.length });
+  button.setAttribute("aria-label", `${groupTitle} ${group.custom ? "custom" : "cwd"} group: ${groupTabs.length} tabs, ${indicator.label}. Active ${activeTitle}`);
+  button.title = `${activeTitle} · ${groupTitle} · ${groupDetail} · ${groupTabs.length} tabs · ${indicator.label} · drop tabs here to add to group`;
+  appendTerminalTabContent(button, { title: activeTitle, indicator, meta: `${groupTitle} · ${indicator.meta}`, count: groupTabs.length });
   button.addEventListener("click", () => switchTab(activeGroupTab.id));
   wrapper.append(button);
 
-  if (groupCount > 1) {
+  if (groupCount > 1 || group.custom) {
     const close = make("button", "terminal-tab-close terminal-tab-group-close", "×");
     close.type = "button";
-    close.title = `Close ${displayCwd} group`;
-    close.setAttribute("aria-label", `Close ${displayCwd} group`);
+    close.draggable = false;
+    close.title = `Close ${groupTitle} group`;
+    close.setAttribute("aria-label", `Close ${groupTitle} group`);
     close.addEventListener("click", (event) => {
       event.stopPropagation();
       closeTerminalTabGroup(group);
@@ -4405,16 +4709,17 @@ function renderTerminalTabGroup(group, groupCount = 1) {
 
   const menu = make("div", "terminal-tab-group-menu");
   menu.setAttribute("role", "group");
-  menu.setAttribute("aria-label", `${displayCwd} tabs`);
-  for (const tab of groupTabs) menu.append(renderTerminalTabGroupItem(tab));
+  menu.setAttribute("aria-label", `${groupTitle} tabs`);
+  for (const tab of groupTabs) menu.append(renderTerminalTabGroupItem(tab, group));
 
   const add = make("button", "terminal-tab-group-add", "+ Tab");
   add.type = "button";
-  add.title = `Add tab in ${displayCwd}`;
-  add.setAttribute("aria-label", `Add tab in ${displayCwd}`);
+  add.draggable = false;
+  add.title = `Add tab in ${groupTitle}`;
+  add.setAttribute("aria-label", `Add tab in ${groupTitle}`);
   add.addEventListener("click", (event) => {
     event.stopPropagation();
-    createTerminalTab(group.cwd, { triggerButton: add });
+    createTerminalTab(activeGroupTab?.cwd || group.cwd || currentDirectoryForNewTab(), { triggerButton: add, customGroupId: group.customGroupId || null });
   });
   menu.append(add);
   wrapper.append(menu);
@@ -4543,7 +4848,7 @@ function currentDirectoryForNewTab() {
   return latestWorkspace?.cwd || activeTab()?.cwd || "";
 }
 
-async function createTerminalTab(cwd = currentDirectoryForNewTab(), { triggerButton = elements.newTabButton } = {}) {
+async function createTerminalTab(cwd = currentDirectoryForNewTab(), { triggerButton = elements.newTabButton, customGroupId = null } = {}) {
   setMobileTabsExpanded(false);
   setNewTabMenuOpen(false);
   const resolvedCwd = cwd || currentDirectoryForNewTab();
@@ -4558,6 +4863,7 @@ async function createTerminalTab(cwd = currentDirectoryForNewTab(), { triggerBut
     tabs = response.data?.tabs || tabs;
     syncTabMetadata(tabs);
     const tab = response.data?.tab;
+    if (tab?.id && customGroupId && terminalCustomGroups.has(customGroupId)) addTabsToTerminalCustomGroup(customGroupId, [tab.id]);
     renderTabs();
     if (tab?.id) {
       await switchTab(tab.id);
@@ -4657,6 +4963,7 @@ async function closeTerminalTabs(tabIds, { label = "selected terminal tabs" } =
       appRunnerDataByTab.delete(id);
       tabMessagesCache.delete(id);
     }
+    syncTerminalCustomGroupsWithTabs(tabs);
     clearOpenTerminalTabGroup(null, { force: true });
 
     const activeTabNeedsFallback = closedIds.includes(activeTabId) || !tabs.some((item) => item.id === activeTabId);
@@ -4689,7 +4996,7 @@ async function closeTerminalTab(tabId) {
 }
 
 async function closeTerminalTabGroup(group) {
-  const title = tabGroupTitle(group.cwd, group.tabs[0]?.title || "cwd");
+  const title = terminalDisplayGroupTitle(group, group.tabs[0]?.title || "group");
   await closeTerminalTabs(group.tabs.map((tab) => tab.id), { label: `${title} group` });
 }
 
@@ -6077,13 +6384,23 @@ function renderGitChangesOverview(data) {
   return overview;
 }
 
+function gitDiffDisplayLine(row, side) {
+  const type = row.type || "context";
+  if (side === "old") {
+    const text = row.left ?? "";
+    return row.oldNumber !== "" && (type === "removed" || type === "changed") ? `-${text}` : text;
+  }
+  const text = row.right ?? "";
+  return row.newNumber !== "" && (type === "added" || type === "changed") ? `+${text}` : text;
+}
+
 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("code", "git-diff-line old", gitDiffDisplayLine(row, "old")),
     make("span", "git-diff-line-number new", row.newNumber === "" ? "" : String(row.newNumber)),
-    make("code", "git-diff-line new", row.right ?? ""),
+    make("code", "git-diff-line new", gitDiffDisplayLine(row, "new")),
   );
   return node;
 }
@@ -6300,16 +6617,28 @@ function gitChangesGeneratedLabel(data) {
 
 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";
+  const { loading, pulling, error, message, data } = gitChangesState;
+  const behind = Number(data?.remote?.behind ?? data?.summary?.behind ?? 0) || 0;
+  const canPull = behind > 0 && data?.remote?.canPull !== false;
+  const remoteNotice = !error && data?.remote?.error ? `Incoming diff unavailable: ${data.remote.error}` : "";
+  if (elements.gitChangesTitle) elements.gitChangesTitle.textContent = "Git Changes";
+  if (elements.gitChangesSubtitle) {
+    const base = data?.root ? `${data.branch || "detached"} · ${data.root}` : "Current tab git diff";
+    elements.gitChangesSubtitle.textContent = data?.remote?.upstream ? `${base} · upstream ${data.remote.upstream}` : base;
+  }
   if (elements.gitChangesRefreshButton) {
-    elements.gitChangesRefreshButton.disabled = loading;
+    elements.gitChangesRefreshButton.disabled = loading || pulling;
     elements.gitChangesRefreshButton.textContent = loading ? "Refreshing…" : "Refresh";
   }
+  if (elements.gitChangesPullButton) {
+    elements.gitChangesPullButton.disabled = loading || pulling || !canPull;
+    elements.gitChangesPullButton.textContent = pulling ? "Pulling…" : behind > 0 ? `Pull ↓${behind}` : "Pull";
+    elements.gitChangesPullButton.title = canPull ? "Run git pull --ff-only for the current repository" : "No remote commits to pull";
+  }
   if (elements.gitChangesStatus) {
-    elements.gitChangesStatus.className = `git-changes-status ${error ? "error" : "muted"}`;
-    elements.gitChangesStatus.textContent = error || (loading ? "Loading git diff…" : data ? gitChangesGeneratedLabel(data) : "");
+    const statusText = error || (pulling ? "Pulling changes…" : loading ? "Loading git diff…" : message || remoteNotice || (data ? gitChangesGeneratedLabel(data) : ""));
+    elements.gitChangesStatus.className = `git-changes-status ${error || remoteNotice ? "error" : message ? "success" : "muted"}`;
+    elements.gitChangesStatus.textContent = statusText;
     elements.gitChangesStatus.hidden = !elements.gitChangesStatus.textContent;
   }
 
@@ -6319,7 +6648,7 @@ function renderGitChangesDialog() {
     body.append(make("div", "git-changes-empty", "Loading git diff…"));
     return;
   }
-  if (error) {
+  if (error && !data) {
     body.append(make("div", "git-changes-empty error", error));
     return;
   }
@@ -6337,20 +6666,23 @@ function renderGitChangesDialog() {
   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) {
+    const emptyMessage = behind > 0 ? "No textual incoming diff was available for the remote commits." : "Working tree is clean. No staged, unstaged, untracked, or incoming diff.";
+    body.append(make("div", "git-changes-empty success", emptyMessage));
+  }
   if (hasVisibleFiles) requestAnimationFrame(updateGitChangesCurrentFileHeader);
 }
 
 async function loadGitChangesDialog(tabContext = activeTabContext()) {
   const requestSerial = ++gitChangesRequestSerial;
   gitChangesUntrackedContentRequests.clear();
-  gitChangesState = { ...gitChangesState, loading: true, error: "", tabId: tabContext.tabId || activeTabId };
+  gitChangesState = { ...gitChangesState, loading: true, error: "", message: "", 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 };
+    gitChangesState = { loading: false, pulling: false, error: "", message: "", data: response.data || null, tabId: tabContext.tabId || activeTabId };
   } catch (error) {
     if (requestSerial !== gitChangesRequestSerial) return;
     gitChangesState = { ...gitChangesState, loading: false, error: error.message || String(error) };
@@ -6363,7 +6695,7 @@ function openGitChangesDialog() {
   hideFooterTooltip();
   const tabContext = activeTabContext();
   const tabId = tabContext.tabId || activeTabId;
-  gitChangesState = { loading: true, error: "", data: gitChangesState.tabId === tabId ? gitChangesState.data : null, tabId };
+  gitChangesState = { loading: true, pulling: false, error: "", message: "", 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"));
@@ -6374,10 +6706,46 @@ function refreshGitChangesDialog() {
   loadGitChangesDialog(tabContext).catch((error) => addEvent(error.message || String(error), "error"));
 }
 
+async function pullGitChangesDialog() {
+  const tabContext = { tabId: gitChangesState.tabId || activeTabId };
+  const behind = Number(gitChangesState.data?.remote?.behind ?? gitChangesState.data?.summary?.behind ?? 0) || 0;
+  if (behind <= 0 || gitChangesState.pulling || gitChangesState.loading) return;
+  const root = gitChangesState.data?.root || "the current repository";
+  if (!window.confirm(`Run git pull --ff-only in ${root}?`)) return;
+
+  const requestSerial = ++gitChangesRequestSerial;
+  gitChangesState = { ...gitChangesState, pulling: true, loading: false, error: "", message: "", tabId: tabContext.tabId };
+  renderGitChangesDialog();
+  try {
+    const response = await api("/api/git-changes/pull", { method: "POST", body: {}, tabId: tabContext.tabId });
+    if (requestSerial !== gitChangesRequestSerial) return;
+    if (!response.ok) {
+      const detail = [response.error, response.data?.stderr || response.data?.stdout].filter(Boolean).join("\n").trim();
+      throw new Error(detail || "Failed to pull git changes");
+    }
+    const output = String(response.data?.stdout || response.data?.stderr || "").trim();
+    gitChangesState = {
+      loading: false,
+      pulling: false,
+      error: "",
+      message: output || "Pulled remote changes successfully.",
+      data: response.data?.changes || gitChangesState.data,
+      tabId: tabContext.tabId,
+    };
+    addEvent("Pulled remote git changes.", "success");
+    requestGitFooterWebuiPayload(tabContext, { force: true });
+  } catch (error) {
+    if (requestSerial !== gitChangesRequestSerial) return;
+    gitChangesState = { ...gitChangesState, pulling: false, error: error.message || String(error) };
+    addEvent(error.message || String(error), "error");
+  }
+  renderGitChangesDialog();
+}
+
 function closeGitChangesDialog() {
   gitChangesRequestSerial += 1;
   gitChangesUntrackedContentRequests.clear();
-  gitChangesState = { ...gitChangesState, loading: false };
+  gitChangesState = { ...gitChangesState, loading: false, pulling: false };
   if (elements.gitChangesDialog?.open) elements.gitChangesDialog.close();
 }
 
@@ -8172,6 +8540,29 @@ async function refreshAppRunners(tabContext = activeTabContext()) {
   renderWidgets();
 }
 
+function appRunnerFailureState(runnerId, error, data = activeAppRunnerData()) {
+  const runners = Array.isArray(data.runners) ? data.runners : [];
+  const runner = runners.find((item) => item.id === runnerId) || {};
+  const message = cleanStatusText(error?.message || String(error) || "Unknown app runner error");
+  const command = runner.displayCommand || runner.shortDisplayCommand || runner.label || runnerId || "app runner";
+  const timestamp = new Date().toISOString();
+  return {
+    id: `start-error:${Date.now()}`,
+    runnerId,
+    kind: runner.kind || "custom",
+    label: runner.label || "App runner failed",
+    command: runner.command || "",
+    args: Array.isArray(runner.args) ? runner.args : [],
+    displayCommand: command,
+    cwd: data.cwd || "",
+    status: "error",
+    startedAt: timestamp,
+    endedAt: timestamp,
+    lineCount: 3,
+    lines: [`$ ${command}`, "# failed to start app runner", `# ${message}`],
+  };
+}
+
 async function runAppRunner(runnerId) {
   const tabContext = activeTabContext();
   if (!tabContext.tabId || !runnerId) return;
@@ -8186,7 +8577,12 @@ async function runAppRunner(runnerId) {
     const command = response.data?.activeRun?.displayCommand || "app runner";
     addEvent(`started ${command}`, "info");
   } catch (error) {
-    if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+    if (!isCurrentTabContext(tabContext)) return;
+    const message = cleanStatusText(error.message || String(error));
+    setAppRunnerData(tabContext.tabId, { activeRun: appRunnerFailureState(runnerId, error, activeAppRunnerData()) });
+    renderAppRunnerControls();
+    renderWidgets();
+    addEvent(`app runner failed: ${message}`, "error");
   }
 }
 
@@ -8267,9 +8663,14 @@ function activeAppRunnerCustomConfig() {
   return activeAppRunnerData().customRunnerConfig || { runners: [], projectRoot: "", displayProjectRoot: "", displayConfigFile: "" };
 }
 
-function resetAppRunnerCustomDraft() {
+function resetAppRunnerCustomDraft({ clearFeedback = true } = {}) {
   appRunnerCustomDraft = { id: "", label: "", command: "./", path: "", args: "" };
   appRunnerFileBrowserState = { open: false, loading: false, path: "", data: null, error: "" };
+  if (clearFeedback) appRunnerCustomFeedback = { type: "", message: "" };
+}
+
+function setAppRunnerCustomFeedback(type, message) {
+  appRunnerCustomFeedback = { type, message: cleanStatusText(message || "") };
 }
 
 function appRunnerRelativeDir(filePath) {
@@ -8329,8 +8730,10 @@ async function saveAppRunnerCustomRunner(form) {
   updateAppRunnerCustomDraftFrom(form);
   const payload = appRunnerCustomDraftPayload();
   if (!payload.path) {
+    setAppRunnerCustomFeedback("warning", "Custom app runner path is required.");
+    renderAppRunnerInfoDialog();
+    requestAnimationFrame(() => document.querySelector("#appRunnerCustomPathInput")?.focus());
     addEvent("custom app runner path is required", "warn");
-    form?.querySelector("#appRunnerCustomPathInput")?.focus();
     return;
   }
   const tabContext = activeTabContext();
@@ -8338,13 +8741,18 @@ async function saveAppRunnerCustomRunner(form) {
     const response = await api("/api/app-runner-config", { method: "POST", body: { runner: payload }, tabId: tabContext.tabId });
     if (!isCurrentTabContext(tabContext)) return;
     setAppRunnerData(tabContext.tabId, response.data || {});
-    resetAppRunnerCustomDraft();
+    resetAppRunnerCustomDraft({ clearFeedback: false });
+    setAppRunnerCustomFeedback("success", "Saved custom app runner. It should now appear in the Run menu when available.");
     renderAppRunnerControls();
     renderWidgets();
     renderAppRunnerInfoDialog();
     addEvent("saved custom app runner", "info");
   } catch (error) {
-    if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+    if (!isCurrentTabContext(tabContext)) return;
+    const message = error.message || String(error);
+    setAppRunnerCustomFeedback("error", `Custom app runner was not saved: ${message}`);
+    renderAppRunnerInfoDialog();
+    addEvent(`custom app runner was not saved: ${message}`, "error");
   }
 }
 
@@ -8354,13 +8762,18 @@ async function deleteAppRunnerCustomRunner(id) {
     const response = await api("/api/app-runner-config", { method: "DELETE", body: { id }, tabId: tabContext.tabId });
     if (!isCurrentTabContext(tabContext)) return;
     setAppRunnerData(tabContext.tabId, response.data || {});
-    if (appRunnerCustomDraft.id === id) resetAppRunnerCustomDraft();
+    if (appRunnerCustomDraft.id === id) resetAppRunnerCustomDraft({ clearFeedback: false });
+    setAppRunnerCustomFeedback("success", "Deleted custom app runner.");
     renderAppRunnerControls();
     renderWidgets();
     renderAppRunnerInfoDialog();
     addEvent("deleted custom app runner", "warn");
   } catch (error) {
-    if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+    if (!isCurrentTabContext(tabContext)) return;
+    const message = error.message || String(error);
+    setAppRunnerCustomFeedback("error", `Custom app runner was not deleted: ${message}`);
+    renderAppRunnerInfoDialog();
+    addEvent(`custom app runner was not deleted: ${message}`, "error");
   }
 }
 
@@ -8445,9 +8858,10 @@ function renderAppRunnerCustomSection() {
     existing.append(make("div", "app-runner-custom-empty muted", "No custom runners saved for this project yet."));
   } else {
     for (const runner of customRunners) {
-      const row = make("div", "app-runner-custom-item");
+      const row = make("div", `app-runner-custom-item${runner.available === false ? " unavailable" : ""}`);
       const details = make("div", "app-runner-custom-item-details");
       details.append(make("strong", "", runner.label || runner.path || "custom runner"), make("code", "", runner.displayCommand || runner.path || ""));
+      if (runner.unavailableReason) details.append(make("span", "app-runner-custom-warning", `Not available: ${runner.unavailableReason}`));
       const actions = make("div", "app-runner-custom-item-actions");
       const edit = make("button", "", "Edit");
       edit.type = "button";
@@ -8469,6 +8883,13 @@ function renderAppRunnerCustomSection() {
   }
   section.append(existing);
 
+  const diagnostics = Array.isArray(config.diagnostics) ? config.diagnostics.filter((item) => item?.message) : [];
+  if (diagnostics.length) {
+    const diagnosticList = make("div", "app-runner-custom-diagnostics");
+    for (const item of diagnostics) diagnosticList.append(make("div", `app-runner-custom-feedback ${item.severity || "warning"}`, item.message));
+    section.append(diagnosticList);
+  }
+
   const form = make("div", "app-runner-custom-form");
   const labelField = appRunnerInputField({ id: "appRunnerCustomLabelInput", label: "Label", value: appRunnerCustomDraft.label, placeholder: "My app" });
   const commandField = appRunnerInputField({ id: "appRunnerCustomCommandInput", label: "Command", value: appRunnerCustomDraft.command || "./", placeholder: "./", hint: "Use ./ to execute the selected file directly, or use bash, python3, node, bun, uv run, etc." });
@@ -8493,6 +8914,7 @@ function renderAppRunnerCustomSection() {
   reset.addEventListener("click", () => { resetAppRunnerCustomDraft(); renderAppRunnerInfoDialog(); });
   formActions.append(save, reset);
   form.append(formActions);
+  if (appRunnerCustomFeedback.message) form.append(make("div", `app-runner-custom-feedback ${appRunnerCustomFeedback.type || "info"}`, appRunnerCustomFeedback.message));
   const browser = renderAppRunnerFileBrowser();
   if (browser) form.append(browser);
   section.append(form);
@@ -18408,6 +18830,7 @@ window.addEventListener("blur", () => {
 });
 
 elements.gitChangesRefreshButton?.addEventListener("click", refreshGitChangesDialog);
+elements.gitChangesPullButton?.addEventListener("click", () => pullGitChangesDialog().catch((error) => addEvent(error.message || String(error), "error")));
 elements.gitChangesCloseButton?.addEventListener("click", closeGitChangesDialog);
 elements.gitChangesBody?.addEventListener("scroll", updateGitChangesCurrentFileHeader, { passive: true });
 elements.gitChangesDialog?.addEventListener("cancel", (event) => {
@@ -18416,7 +18839,7 @@ elements.gitChangesDialog?.addEventListener("cancel", (event) => {
 });
 elements.gitChangesDialog?.addEventListener("close", () => {
   gitChangesRequestSerial += 1;
-  gitChangesState = { ...gitChangesState, loading: false };
+  gitChangesState = { ...gitChangesState, loading: false, pulling: false };
 });
 
 elements.refreshCodexUsageButton?.addEventListener("click", () => {
@@ -18549,6 +18972,7 @@ initializeFastPicks().catch((error) => addEvent(`failed to initialize path fast
 restoreAgentDoneNotificationsSetting();
 restoreThinkingVisibilitySetting();
 restoreTerminalTabsLayoutSetting();
+restoreTerminalCustomGroups();
 restoreToolOutputExpansionSetting();
 restoreWorkspaceDashboardState();
 restoreSidePanelSectionState();