@firstpick/pi-package-webui 0.4.6 → 0.4.7

package/bin/pi-webui.mjs

@@ -640,7 +640,8 @@ function makeHttpError(statusCode, message) {
 }
 
 function sendError(res, statusCode, error) {
-  sendJson(res, statusCode, { ok: false, error: sanitizeError(error) });
+  const message = statusCode >= 500 ? sanitizeError(error) : formatCliError(error);
+  sendJson(res, statusCode, { ok: false, error: message });
 }
 
 function formatBytes(bytes) {
@@ -1627,22 +1628,85 @@ function normalizeCustomRunnerDefinition(raw, projectRoot, { strict = false } =
   return { id, label, command, path: filePath, args };
 }
 
-async function readAppRunnerConfig(projectRoot) {
+function customAppRunnerDiagnostic(severity, message, runner = {}) {
+  const source = runner && typeof runner === "object" ? runner : {};
+  return {
+    severity,
+    message,
+    runnerId: source.id || "",
+    runnerLabel: source.label || "",
+    path: source.path || source.projectFile || "",
+  };
+}
+
+function directCustomRunnerUnavailableReason(filePath, stats) {
+  if (process.platform !== "win32" && stats && (stats.mode & 0o111) === 0) {
+    return `Path is not executable: ${filePath}. Run chmod +x ${filePath} or set Command to bash, python3, node, etc.`;
+  }
+  return "";
+}
+
+async function customAppRunnerUnavailableReason(projectRoot, runner) {
+  const filePath = runner.path;
+  let stats;
+  try {
+    stats = await fileStatsIfExists(resolveProjectRelativePath(projectRoot, filePath));
+  } catch (error) {
+    return `Cannot access path ${filePath}: ${formatCliError(error)}`;
+  }
+  if (!stats?.isFile()) return `Path to file does not exist: ${filePath}`;
+  const command = cleanCustomRunnerCommand(runner.command);
+  const directReason = command === "./" ? directCustomRunnerUnavailableReason(filePath, stats) : "";
+  if (directReason) return directReason;
+  const commandParts = customRunnerCommandParts(command);
+  if (command !== "./" && !await appRunnerCommandAvailable(commandParts[0], projectRoot)) return `Command is not available: ${commandParts[0]}`;
+  return "";
+}
+
+async function readAppRunnerConfig(projectRoot, { strictRead = false } = {}) {
   const configPath = path.join(projectRoot, APP_RUNNER_CONFIG_FILE);
-  const parsed = await readJsonFileIfExists(configPath);
-  const source = parsed && typeof parsed === "object" ? parsed : {};
+  let source = {};
+  const diagnostics = [];
+  try {
+    const parsed = JSON.parse(await readFile(configPath, "utf8"));
+    if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+      source = parsed;
+    } else {
+      const message = `${APP_RUNNER_CONFIG_FILE} must contain a JSON object`;
+      if (strictRead) throw makeHttpError(400, message);
+      diagnostics.push(customAppRunnerDiagnostic("error", message));
+    }
+  } catch (error) {
+    if (error?.code !== "ENOENT") {
+      const message = `Cannot read ${APP_RUNNER_CONFIG_FILE}: ${formatCliError(error)}`;
+      if (strictRead) throw makeHttpError(400, message);
+      diagnostics.push(customAppRunnerDiagnostic("error", message));
+      console.warn(`failed to read custom app runner config ${configPath}: ${sanitizeError(error)}`);
+    }
+  }
+  if (source.runners !== undefined && !Array.isArray(source.runners)) {
+    const message = `${APP_RUNNER_CONFIG_FILE} runners must be an array`;
+    if (strictRead) throw makeHttpError(400, message);
+    diagnostics.push(customAppRunnerDiagnostic("error", message));
+  }
   const rawRunners = Array.isArray(source.runners) ? source.runners : [];
   const runners = [];
   for (const raw of rawRunners) {
     try {
       const runner = normalizeCustomRunnerDefinition(raw, projectRoot);
-      if (!runners.some((item) => item.id === runner.id)) runners.push(runner);
+      if (runners.some((item) => item.id === runner.id)) {
+        diagnostics.push(customAppRunnerDiagnostic("warning", `Duplicate custom runner ignored: ${runner.label || runner.path || runner.id}`, runner));
+      } else {
+        runners.push(runner);
+      }
     } catch (error) {
+      const message = `Invalid custom runner ignored: ${formatCliError(error)}`;
+      diagnostics.push(customAppRunnerDiagnostic("error", message, raw));
       console.warn(`skipping invalid custom app runner in ${configPath}: ${sanitizeError(error)}`);
     }
     if (runners.length >= APP_RUNNER_CUSTOM_LIMIT) break;
   }
-  return { projectRoot, configPath, runners };
+  return { projectRoot, configPath, runners, diagnostics };
 }
 
 async function writeAppRunnerConfig(projectRoot, runners) {
@@ -1660,15 +1724,12 @@ async function writeAppRunnerConfig(projectRoot, runners) {
 
 async function customAppRunnerCandidate(projectRoot, configPath, runner) {
   const filePath = runner.path;
-  const absolutePath = resolveProjectRelativePath(projectRoot, filePath);
-  const stats = await fileStatsIfExists(absolutePath);
-  if (!stats?.isFile()) return null;
+  if (await customAppRunnerUnavailableReason(projectRoot, runner)) return null;
   const command = cleanCustomRunnerCommand(runner.command);
   const args = parseCustomRunnerArgs(runner.args);
   const commandParts = customRunnerCommandParts(command);
   const effectiveCommand = command === "./" ? `./${filePath}` : commandParts[0];
   const effectiveArgs = command === "./" ? args : [...commandParts.slice(1), filePath, ...args];
-  if (command !== "./" && !await appRunnerCommandAvailable(commandParts[0], projectRoot)) return null;
   return appRunnerCandidate({
     id: appRunnerId("custom", runner.id),
     label: runner.label || path.basename(filePath),
@@ -1696,24 +1757,32 @@ async function addCustomAppRunners(runners, cwd) {
 async function getCustomAppRunnerConfigData(tab) {
   const projectRoot = await findAppRunnerProjectRoot(tab?.cwd || options.cwd);
   const config = await readAppRunnerConfig(projectRoot);
+  const runners = [];
+  for (const runner of config.runners) {
+    const unavailableReason = await customAppRunnerUnavailableReason(projectRoot, runner);
+    runners.push({
+      ...publicCustomRunnerDefinition(runner),
+      available: !unavailableReason,
+      unavailableReason,
+    });
+  }
   return {
     projectRoot,
     displayProjectRoot: displayPath(projectRoot),
     configFile: config.configPath,
     displayConfigFile: displayPath(config.configPath),
     relativeConfigFile: APP_RUNNER_CONFIG_FILE,
-    runners: config.runners.map(publicCustomRunnerDefinition),
+    runners,
+    diagnostics: config.diagnostics,
   };
 }
 
 async function saveCustomAppRunner(tab, rawRunner) {
   const projectRoot = await findAppRunnerProjectRoot(tab?.cwd || options.cwd);
-  const config = await readAppRunnerConfig(projectRoot);
+  const config = await readAppRunnerConfig(projectRoot, { strictRead: true });
   const normalized = normalizeCustomRunnerDefinition(rawRunner, projectRoot, { strict: true });
-  const stats = await fileStatsIfExists(resolveProjectRelativePath(projectRoot, normalized.path));
-  if (!stats?.isFile()) throw makeHttpError(400, `Path to file does not exist: ${normalized.path}`);
-  const commandParts = customRunnerCommandParts(normalized.command);
-  if (normalized.command !== "./" && !await appRunnerCommandAvailable(commandParts[0], projectRoot)) throw makeHttpError(400, `Command is not available: ${commandParts[0]}`);
+  const unavailableReason = await customAppRunnerUnavailableReason(projectRoot, normalized);
+  if (unavailableReason) throw makeHttpError(400, unavailableReason);
   const runners = config.runners.filter((runner) => runner.id !== normalized.id);
   if (runners.length >= APP_RUNNER_CUSTOM_LIMIT) throw makeHttpError(400, `Custom runner limit reached (${APP_RUNNER_CUSTOM_LIMIT})`);
   runners.push(normalized);
@@ -3066,6 +3135,7 @@ async function getWorkspaceInfo(cwd, startedAt) {
 let activeGitWorkflowProcess = null;
 const GIT_CHANGES_COMMAND_TIMEOUT_MS = 5000;
 const GIT_CHANGES_DIFF_MAX_OUTPUT = 500_000;
+const GIT_PULL_TIMEOUT_MS = 15 * 60 * 1000;
 
 async function getGitRoot(cwd) {
   const result = await runCommand("git", ["rev-parse", "--show-toplevel"], { cwd, timeoutMs: 2000 });
@@ -3176,15 +3246,61 @@ async function readGitUntrackedFile(cwd, requestedPath) {
   return readGitUntrackedEntry(root, normalized);
 }
 
+async function gitUpstreamRef(root) {
+  try {
+    const upstream = await runGitReadCommand(root, ["rev-parse", "--abbrev-ref", "--symbolic-full-name", "@{upstream}"], { timeoutMs: 5000, maxOutputLength: 10_000 });
+    return upstream.trim();
+  } catch {
+    return "";
+  }
+}
+
+async function readGitIncomingChanges(root, summary) {
+  const upstream = await gitUpstreamRef(root);
+  const remote = {
+    upstream,
+    behind: Number(summary?.behind || 0) || 0,
+    canPull: !!upstream && (Number(summary?.behind || 0) || 0) > 0,
+  };
+  if (!remote.canPull) return { remote, section: null };
+
+  const diffArgs = ["diff", "--no-ext-diff", "--no-color", "--find-renames", "--unified=0", "--src-prefix=a/", "--dst-prefix=b/", "HEAD..@{upstream}"];
+  try {
+    const diff = await runGitReadCommand(root, diffArgs);
+    return {
+      remote,
+      section: {
+        key: "incoming",
+        label: `Incoming from ${upstream}`,
+        command: `git diff --unified=0 HEAD..${upstream}`,
+        diff: diff.trimEnd(),
+      },
+    };
+  } catch (error) {
+    return { remote: { ...remote, error: sanitizeError(error) }, section: null };
+  }
+}
+
+async function pullGitChanges(cwd) {
+  const root = await getGitRoot(cwd);
+  const payload = gitWorkflowCommandPayload(await runGitWorkflowCommand(["pull", "--ff-only"], { cwd: root, timeoutMs: GIT_PULL_TIMEOUT_MS }));
+  if (payload.data) payload.data.root = root;
+  if (payload.ok) payload.data.changes = await readGitChanges(root);
+  else payload.error = (payload.data?.stderr || payload.data?.stdout || payload.error || "git pull --ff-only failed").trim();
+  return payload;
+}
+
 async function readGitChanges(cwd) {
   const root = await getGitRoot(cwd);
-  const diffArgs = ["diff", "--no-ext-diff", "--no-color", "--find-renames", "--src-prefix=a/", "--dst-prefix=b/"];
+  const diffArgs = ["diff", "--no-ext-diff", "--no-color", "--find-renames", "--unified=0", "--src-prefix=a/", "--dst-prefix=b/"];
   const [statusText, unstagedDiff, stagedDiff, untrackedText] = await Promise.all([
     runGitReadCommand(root, ["status", "--short", "--branch", "--untracked-files=all"], { maxOutputLength: 120_000 }),
     runGitReadCommand(root, diffArgs),
-    runGitReadCommand(root, ["diff", "--cached", "--no-ext-diff", "--no-color", "--find-renames", "--src-prefix=a/", "--dst-prefix=b/"]),
+    runGitReadCommand(root, ["diff", "--cached", "--no-ext-diff", "--no-color", "--find-renames", "--unified=0", "--src-prefix=a/", "--dst-prefix=b/"]),
     runGitReadCommand(root, ["ls-files", "--others", "--exclude-standard"], { maxOutputLength: 120_000 }),
   ]);
+  const summary = summarizeGitShortStatus(statusText);
+  const incoming = await readGitIncomingChanges(root, summary);
   const untrackedFiles = untrackedText.split(/\r?\n/).map((line) => line.trim()).filter(Boolean);
   const untracked = await readGitUntrackedEntries(root, untrackedFiles);
   return {
@@ -3192,12 +3308,14 @@ async function readGitChanges(cwd) {
     root,
     branch: gitBranchFromStatus(statusText),
     generatedAt: new Date().toISOString(),
-    summary: summarizeGitShortStatus(statusText),
+    summary,
+    remote: incoming.remote,
     status: statusText.trimEnd(),
     sections: [
-      { key: "staged", label: "Staged", command: "git diff --cached", diff: stagedDiff.trimEnd() },
-      { key: "unstaged", label: "Unstaged", command: "git diff", diff: unstagedDiff.trimEnd() },
-    ],
+      incoming.section,
+      { key: "staged", label: "Staged", command: "git diff --cached --unified=0", diff: stagedDiff.trimEnd() },
+      { key: "unstaged", label: "Unstaged", command: "git diff --unified=0", diff: unstagedDiff.trimEnd() },
+    ].filter(Boolean),
     untracked,
   };
 }
@@ -7572,6 +7690,17 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/git-changes/pull" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const tab = getRequestedTab(req, url, body);
+      try {
+        sendJson(res, 200, await pullGitChanges(tab.cwd));
+      } catch (error) {
+        sendJson(res, 200, { ok: false, error: sanitizeError(error) });
+      }
+      return;
+    }
+
     if (url.pathname === "/api/git-branches" && req.method === "GET") {
       const tab = getRequestedTab(req, url);
       try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "description": "Pi Web UI companion package with a local browser UI CLI plus /webui-start and /webui-status commands.",
   "license": "MIT",
   "homepage": "https://github.com/Firstp1ck/npm-packages/tree/main/pi-package-webui#readme",
@@ -53,7 +53,7 @@
     "test": "node tests/run-all.mjs"
   },
   "dependencies": {
-    "@earendil-works/pi-coding-agent": "^0.79.5"
+    "@earendil-works/pi-coding-agent": "^0.79.7"
   },
   "optionalDependencies": {
     "@firstpick/pi-extension-btw": "^0.1.0",
@@ -66,7 +66,7 @@
     "@firstpick/pi-extension-todo-progress": "^0.2.4",
     "@firstpick/pi-extension-tools": "^0.1.6",
     "@firstpick/pi-extension-workflows": "^0.1.0",
-    "@firstpick/pi-package-remote-webui": "^0.1.0",
+    "@firstpick/pi-package-remote-webui": "^0.1.2",
     "@firstpick/pi-prompts-git-pr": "^0.1.2",
     "@firstpick/pi-themes-bundle": "^0.1.4"
   },
@@ -84,5 +84,12 @@
   ],
   "engines": {
     "node": ">=22.19.0"
+  },
+  "overrides": {
+    "@earendil-works/pi-coding-agent": {
+      "protobufjs": "7.6.3",
+      "undici": "8.5.0",
+      "ws": "8.21.0"
+    }
   }
 }

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;
@@ -285,6 +286,7 @@ 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 = [];
@@ -6382,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;
 }
@@ -6605,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;
   }
 
@@ -6624,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;
   }
@@ -6642,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) };
@@ -6668,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"));
@@ -6679,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();
 }
 
@@ -8477,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;
@@ -8491,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");
   }
 }
 
@@ -8572,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) {
@@ -8634,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();
@@ -8643,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");
   }
 }
 
@@ -8659,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");
   }
 }
 
@@ -8750,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";
@@ -8774,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." });
@@ -8798,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);
@@ -18713,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) => {
@@ -18721,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", () => {

package/public/index.html

@@ -539,7 +539,10 @@
             <h2 id="gitChangesTitle">Uncommitted Changes</h2>
             <p id="gitChangesSubtitle" class="muted">Current tab git diff</p>
           </div>
-          <button id="gitChangesRefreshButton" type="button">Refresh</button>
+          <div class="git-changes-actions">
+            <button id="gitChangesRefreshButton" type="button">Refresh</button>
+            <button id="gitChangesPullButton" class="primary" type="button" disabled>Pull</button>
+          </div>
         </div>
         <p id="gitChangesStatus" class="git-changes-status muted" role="status" aria-live="polite"></p>
         <div id="gitChangesBody" class="git-changes-body"></div>

package/public/styles.css

@@ -2294,6 +2294,14 @@ button.footer-meta {
 .git-changes-header > div:first-child {
   min-width: 0;
 }
+.git-changes-actions {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
 .git-changes-kicker {
   display: block;
   color: var(--ctp-yellow);
@@ -2314,6 +2322,7 @@ button.footer-meta {
 .git-changes-empty.error {
   color: var(--ctp-red);
 }
+.git-changes-status.success,
 .git-changes-empty.success {
   color: var(--ctp-green);
 }
@@ -5792,11 +5801,41 @@ button.composer-skill-tag:focus-visible {
   gap: 0.6rem;
   align-items: center;
 }
+.app-runner-custom-item.unavailable {
+  border-color: rgba(243, 139, 168, 0.32);
+}
 .app-runner-custom-item-details {
   display: grid;
   gap: 0.18rem;
   min-width: 0;
 }
+.app-runner-custom-warning,
+.app-runner-custom-feedback {
+  color: var(--danger);
+  line-height: 1.4;
+  font-size: 0.82rem;
+  font-weight: 700;
+}
+.app-runner-custom-feedback {
+  padding: 0.58rem 0.66rem;
+  border: 1px solid rgba(243, 139, 168, 0.26);
+  border-radius: 0.68rem;
+  background: rgba(243, 139, 168, 0.08);
+}
+.app-runner-custom-feedback.success {
+  color: var(--ctp-green);
+  border-color: rgba(166, 227, 161, 0.28);
+  background: rgba(166, 227, 161, 0.08);
+}
+.app-runner-custom-feedback.warning {
+  color: var(--ctp-yellow);
+  border-color: rgba(249, 226, 175, 0.28);
+  background: rgba(249, 226, 175, 0.08);
+}
+.app-runner-custom-diagnostics {
+  display: grid;
+  gap: 0.42rem;
+}
 .app-runner-custom-item-actions,
 .app-runner-custom-form-actions {
   display: flex;

package/tests/http-endpoints-harness.test.mjs

@@ -219,6 +219,54 @@ try {
   assert.equal(clampedMessages.body?.data?.since, 3, "since beyond the transcript should clamp to the total count");
   assert.equal((clampedMessages.body?.data?.messages || []).length, 0);
 
+  // Custom app runners: save failures must be explicit, saved runners must be runnable,
+  // and stale saved runners must explain why they are not shown in the Run menu.
+  await writeFile(path.join(cwd, "custom-runner.mjs"), "console.log('custom runner ok')\n");
+  const missingCommandRunner = await request("127.0.0.1", "/api/app-runner-config", {
+    method: "POST",
+    body: { tab: tabId, runner: { label: "Broken custom", command: "definitely-missing-pi-webui-runner", path: "custom-runner.mjs" } },
+  });
+  assert.equal(missingCommandRunner.status, 400, "saving a custom runner with a missing command should fail visibly");
+  assert.match(String(missingCommandRunner.body?.error || ""), /Command is not available: definitely-missing-pi-webui-runner/);
+
+  const savedCustomRunner = await request("127.0.0.1", "/api/app-runner-config", {
+    method: "POST",
+    body: { tab: tabId, runner: { label: "Custom node", command: process.execPath, path: "custom-runner.mjs" } },
+    timeoutMs: 10_000,
+  });
+  assert.equal(savedCustomRunner.status, 200, `saving a valid custom runner should succeed: ${savedCustomRunner.body?.error || ""}`);
+  const customConfigRunner = savedCustomRunner.body?.data?.customRunnerConfig?.runners?.find((runner) => runner.label === "Custom node");
+  assert.equal(customConfigRunner?.available, true, "saved custom runner config should mark runnable entries available");
+  const customRunner = savedCustomRunner.body?.data?.runners?.find((runner) => runner.custom === true && runner.label === "Custom node");
+  assert.ok(customRunner?.id, "saved available custom runner should appear in detected app runners");
+
+  const customRunStart = await request("127.0.0.1", "/api/app-runner", {
+    method: "POST",
+    body: { tab: tabId, runnerId: customRunner.id },
+    timeoutMs: 10_000,
+  });
+  assert.equal(customRunStart.status, 200, `custom runner start should return ok: ${customRunStart.body?.error || ""}`);
+  let customRunState = customRunStart;
+  for (let attempt = 0; attempt < 50; attempt++) {
+    if (customRunState.body?.data?.activeRun?.status && customRunState.body.data.activeRun.status !== "running") break;
+    await delay(100);
+    customRunState = await request("127.0.0.1", `/api/app-runners?tab=${encodeURIComponent(tabId)}`, { timeoutMs: 5_000 });
+  }
+  assert.equal(customRunState.body?.data?.activeRun?.status, "done", "custom runner should finish successfully");
+  assert.match((customRunState.body?.data?.activeRun?.lines || []).join("\n"), /custom runner ok/, "custom runner output should be captured");
+  await request("127.0.0.1", "/api/app-runner/clear", { method: "POST", body: { tab: tabId } });
+
+  await writeFile(path.join(cwd, ".pi-webui-runners.json"), `${JSON.stringify({
+    version: 1,
+    runners: [{ id: "broken-custom", label: "Broken custom", command: "definitely-missing-pi-webui-runner", path: "custom-runner.mjs" }],
+  }, null, 2)}\n`);
+  const staleCustomRunner = await request("127.0.0.1", `/api/app-runners?tab=${encodeURIComponent(tabId)}`, { timeoutMs: 10_000 });
+  assert.equal(staleCustomRunner.status, 200);
+  const brokenConfigRunner = staleCustomRunner.body?.data?.customRunnerConfig?.runners?.find((runner) => runner.label === "Broken custom");
+  assert.equal(brokenConfigRunner?.available, false, "unavailable saved custom runners should be flagged in config data");
+  assert.match(String(brokenConfigRunner?.unavailableReason || ""), /Command is not available: definitely-missing-pi-webui-runner/);
+  assert.equal(staleCustomRunner.body?.data?.runners?.some((runner) => runner.label === "Broken custom"), false, "unavailable custom runners should not appear in runnable menu data");
+
   // Native slash command routed through the adapter (/copy → get_last_assistant_text).
   const copy = await request("127.0.0.1", "/api/prompt", {
     method: "POST",

package/tests/mobile-static.test.mjs

@@ -346,16 +346,20 @@ assert.doesNotMatch(css, /\.footer-(?:metric|meta)-action::after/, "clickable fo
 assert.match(css, /\.extension-dialog\.git-changes-dialog \{[\s\S]*?--git-changes-dialog-size:[\s\S]*?width:\s*var\(--git-changes-dialog-size\)[\s\S]*?height:\s*var\(--git-changes-dialog-size\)[\s\S]*?aspect-ratio:\s*1 \/ 1/, "git changes modal should override the base dialog with a square wide diff layout");
 assert.match(css, /\.git-current-file-header \{[\s\S]*?position:\s*sticky[\s\S]*?top:\s*-0\.72rem/, "git changes modal should keep a sticky current-file header inside the diff scroller");
 assert.match(css, /\.git-diff-grid \{[\s\S]*?grid-template-columns:\s*3\.8rem minmax\(22rem, 1fr\) 3\.8rem minmax\(22rem, 1fr\)/, "git changes modal should render a side-by-side diff grid");
-assert.match(html, /id="gitChangesDialog"[\s\S]*id="gitChangesRefreshButton"[\s\S]*id="gitChangesBody"/, "git changes modal should expose refresh controls and a diff body");
+assert.match(html, /id="gitChangesDialog"[\s\S]*id="gitChangesRefreshButton"[\s\S]*id="gitChangesPullButton"[\s\S]*id="gitChangesBody"/, "git changes modal should expose refresh, pull controls, and a diff body");
 assert.match(app, /chip\.key === "changes"[\s\S]*?options\.onClick = openGitChangesDialog/, "footer CHANGES chip should open the git changes modal");
 assert.match(app, /async function loadGitChangesDialog[\s\S]*api\("\/api\/git-changes"/, "git changes modal should load diff data from the server endpoint");
+assert.match(app, /async function pullGitChangesDialog\(\)[\s\S]*api\("\/api\/git-changes\/pull", \{ method: "POST"/, "git changes modal should post to the pull endpoint from the Pull button");
+assert.match(app, /function gitDiffDisplayLine\(row, side\)[\s\S]*`-\$\{text\}`[\s\S]*`\+\$\{text\}`/, "git changes modal should render changed lines with +/- prefixes");
 assert.match(app, /function gitUntrackedEntryToDiffFile\(entry\)[\s\S]*?renderRowLimit:\s*Number\.POSITIVE_INFINITY[\s\S]*?type: "added"/, "untracked files should render as complete added-file diffs without the row preview cap");
 assert.match(app, /async function loadMissingGitUntrackedContent\(entry[\s\S]*?\/api\/git-changes\/untracked-file\?path=/, "untracked path-only payloads should fetch complete file contents instead of rendering as empty files");
 assert.match(app, /function updateGitChangesCurrentFileHeader\(\)[\s\S]*?querySelectorAll\("\.git-diff-file\[data-git-diff-file\]"\)/, "git changes modal should derive the sticky current-file header from visible file cards");
 assert.match(server, /async function readGitUntrackedEntry\(root, file\)[\s\S]*?content: binary \? "" : buffer\.toString\("utf8"\)/, "server should include complete text contents for untracked files");
 assert.match(server, /url\.pathname === "\/api\/git-changes\/untracked-file" && req\.method === "GET"/, "server should expose a focused untracked-file content endpoint for stale path-only payload fallbacks");
-assert.match(server, /async function readGitChanges\(cwd\)[\s\S]*?const diffArgs = \["diff", "--no-ext-diff"[\s\S]*?\["diff", "--cached"/, "server should collect both staged and unstaged git diffs for the changes modal");
+assert.match(server, /async function readGitChanges\(cwd\)[\s\S]*?const diffArgs = \["diff", "--no-ext-diff"[\s\S]*?"--unified=0"[\s\S]*?\["diff", "--cached"/, "server should collect compact staged and unstaged git diffs for the changes modal");
+assert.match(server, /async function readGitIncomingChanges\(root, summary\)[\s\S]*?"HEAD\.\.@\{upstream\}"/, "server should collect incoming upstream diffs when remote commits are behind");
 assert.match(server, /url\.pathname === "\/api\/git-changes" && req\.method === "GET"/, "server should expose GET /api/git-changes for the changes modal");
+assert.match(server, /url\.pathname === "\/api\/git-changes\/pull" && req\.method === "POST"[\s\S]*?pullGitChanges\(tab\.cwd\)/, "server should expose POST /api/git-changes/pull for the changes modal Pull button");
 assert.match(css, /@media \(max-width: 1050px\)[\s\S]*?\.footer-line-meta \{[\s\S]*?display:\s*flex;[\s\S]*?flex-wrap:\s*wrap;[\s\S]*?\.footer-line-meta \.footer-meta \{[\s\S]*?flex:\s*1 1 var\(--footer-chip-min-width\);[\s\S]*?width:\s*auto;[\s\S]*?\.footer-workspace,\n\s+\.footer-model,\n\s+\.footer-thinking \{ grid-column:\s*auto; \}/, "narrow git-footer metadata should wrap like the top metric row instead of forcing a two-column grid");
 assert.match(css, /@media \(max-width: 720px\), \(max-device-width: 720px\), \(pointer: coarse\) and \(hover: none\)[\s\S]*?\.context-meter-bar \{ display:\s*none !important; \}/, "mobile should hide the WebUI context meter that appears after high context usage");
 assert.match(css, /\.footer-line-tui \{[\s\S]*?white-space:\s*nowrap/, "default Web UI footer should use a minimal TUI-like line");
@@ -670,6 +674,9 @@ assert.doesNotMatch(app, /gitWorkflowVisibleTabId|Workflow belongs to/, "guided
 assert.match(app, /function renderReleaseNpmOutputWidget\(\)/, "release-npm live output should use a specialized Web UI renderer");
 assert.match(app, /async function refreshAppRunners\(tabContext = activeTabContext\(\)\)/, "frontend should load detected app runners for the active tab cwd");
 assert.match(app, /function renderAppRunnerWidget\(\)/, "frontend should render app runner output in the shared top widget area");
+assert.match(app, /function appRunnerFailureState\(runnerId, error[\s\S]*failed to start app runner/, "frontend should render visible app-runner start failures instead of only logging them");
+assert.match(app, /appRunnerCustomFeedback[\s\S]*Custom app runner was not saved/, "custom app-runner save failures should be shown inline in the dialog");
+assert.match(server, /function customAppRunnerUnavailableReason\(projectRoot, runner\)[\s\S]*Command is not available/, "server should explain why saved custom app runners are unavailable");
 assert.match(server, /url\.pathname === "\/api\/app-runners" && req\.method === "GET"/, "server should expose detected app runners for the active tab cwd");
 assert.match(server, /url\.pathname === "\/api\/app-runner" && req\.method === "POST"/, "server should start selected app runners directly");
 assert.match(server, /function addGoRunner\(runners, cwd\)[\s\S]*Go\/Golang app entry/, "server should detect Go\/Golang app runners");