@firstpick/pi-package-webui 0.4.6 → 0.4.8

package/public/app.js

@@ -24,6 +24,7 @@ const elements = {
   updateNotificationMessage: $("#updateNotificationMessage"),
   updateNotificationDetail: $("#updateNotificationDetail"),
   updateNotificationUpdateButton: $("#updateNotificationUpdateButton"),
+  updateNotificationUpdateAllButton: $("#updateNotificationUpdateAllButton"),
   updateNotificationDismissButton: $("#updateNotificationDismissButton"),
   serverOfflineCommand: $("#serverOfflineCommand"),
   serverOfflineSlashCommand: $("#serverOfflineSlashCommand"),
@@ -114,6 +115,7 @@ const elements = {
   gitChangesStatus: $("#gitChangesStatus"),
   gitChangesBody: $("#gitChangesBody"),
   gitChangesRefreshButton: $("#gitChangesRefreshButton"),
+  gitChangesPullButton: $("#gitChangesPullButton"),
   gitChangesCloseButton: $("#gitChangesCloseButton"),
   modelSelect: $("#modelSelect"),
   setModelButton: $("#setModelButton"),
@@ -128,6 +130,7 @@ const elements = {
   backgroundChooseButton: $("#backgroundChooseButton"),
   backgroundClearButton: $("#backgroundClearButton"),
   backgroundStatus: $("#backgroundStatus"),
+  networkControlField: $("#networkControlField"),
   networkStatus: $("#networkStatus"),
   remoteAuthToggle: $("#remoteAuthToggle"),
   remoteAuthStatus: $("#remoteAuthStatus"),
@@ -265,7 +268,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 +288,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 = [];
@@ -434,6 +438,9 @@ const GIT_INIT_STACK_STORAGE_KEY = "pi-webui-git-init-stack";
 const STATS_WEBUI_STATUS_KEY = "stats-webui";
 const STATS_WEBUI_PAYLOAD_TYPE = "firstpick.pi-extension-stats.overlay";
 const STATS_WEBUI_PAYLOAD_VERSION = 1;
+const REMOTE_WEBUI_CONTROLS_STATUS_KEY = "pi-remote-webui:controls";
+const REMOTE_WEBUI_CONTROLS_PAYLOAD_TYPE = "firstpick.pi-package-remote-webui.controls";
+const REMOTE_WEBUI_CONTROLS_PAYLOAD_VERSION = 1;
 const BTW_WEBUI_STATUS_KEY = "btw-webui";
 const BTW_OUTPUT_WIDGET_KEY = "btw:output";
 const BTW_FOOTER_WIDGET_KEY = "btw:footer";
@@ -2823,22 +2830,34 @@ function renderUpdateNotification(status = latestUpdateStatus, { force = false }
   }
 
   const canRunUpdate = latestUpdateStatus.canRunUpdate !== false;
+  const hasPiUpdate = !!latestUpdateStatus.pi?.updateAvailable;
+  const hasPackageUpdate = !!latestUpdateStatus.webui?.updateAvailable;
   if (elements.updateNotificationTitle) elements.updateNotificationTitle.textContent = items.length === 1 ? `${items[0]} available` : "Pi updates available";
   if (elements.updateNotificationMessage) {
-    elements.updateNotificationMessage.textContent = canRunUpdate
-      ? "Run Pi and Web UI package updates now, then restart this Web UI server automatically."
-      : "Updates are available. Direct Web UI updates are only enabled from localhost on the host machine.";
+    let message = "Updates are available. Direct Web UI updates are only enabled from localhost on the host machine.";
+    if (canRunUpdate) {
+      if (hasPiUpdate && hasPackageUpdate) message = "Run pi update for Pi only, or pi update --all to include Web UI/package updates, then restart this Web UI server automatically.";
+      else if (hasPackageUpdate) message = "Run pi update --all to update Web UI/package entries, then restart this Web UI server automatically.";
+      else message = "Run pi update for Pi only, then restart this Web UI server automatically.";
+    }
+    elements.updateNotificationMessage.textContent = message;
   }
   const details = [
     items.join(" · "),
-    latestUpdateStatus.webuiDev && latestUpdateStatus.webui?.updateAvailable ? "The current Web UI is a dev checkout; update also refreshes this checkout's Web UI/Pi package dependencies when possible." : "",
+    latestUpdateStatus.webuiDev && latestUpdateStatus.webui?.updateAvailable ? "The current Web UI is a dev checkout; pi update --all refreshes configured package dependencies when possible." : "",
     latestUpdateStatus.packages?.note || "",
   ].filter(Boolean).join(" ");
   if (elements.updateNotificationDetail) elements.updateNotificationDetail.textContent = details;
   if (elements.updateNotificationUpdateButton) {
-    elements.updateNotificationUpdateButton.hidden = !canRunUpdate;
+    elements.updateNotificationUpdateButton.hidden = !canRunUpdate || !hasPiUpdate;
     elements.updateNotificationUpdateButton.disabled = updateRequestInProgress || latestUpdateStatus.updateInProgress;
-    elements.updateNotificationUpdateButton.textContent = latestUpdateStatus.updateInProgress ? "Updating…" : "Update & restart";
+    elements.updateNotificationUpdateButton.textContent = latestUpdateStatus.updateInProgress ? "Updating…" : "Update Pi & restart";
+  }
+  if (elements.updateNotificationUpdateAllButton) {
+    elements.updateNotificationUpdateAllButton.hidden = !canRunUpdate || !hasPackageUpdate;
+    elements.updateNotificationUpdateAllButton.disabled = updateRequestInProgress || latestUpdateStatus.updateInProgress;
+    elements.updateNotificationUpdateAllButton.classList.toggle("primary", !hasPiUpdate);
+    elements.updateNotificationUpdateAllButton.textContent = latestUpdateStatus.updateInProgress ? "Updating…" : "Update all & restart";
   }
   clearTimeout(updateNotificationHideTimer);
   panel.hidden = false;
@@ -2869,30 +2888,33 @@ function initializeUpdateNotifications() {
   }, UPDATE_STATUS_INITIAL_DELAY_MS);
 }
 
-function piUpdateConfirmationText() {
+function piUpdateConfirmationText({ all = false } = {}) {
   const items = updateNotificationItems();
   const workingWarning = hasWorkingTab() ? "\n\nOne or more Pi tabs look busy or blocked. Finish or abort in-flight work before updating if you need to preserve it." : "";
   const versionText = items.length ? `\n\nDetected update: ${items.join(" · ")}.` : "";
-  return `Run Pi/Web UI package updates now?${versionText}\n\nThis will run \"pi update\" plus detected local and global Web UI/Pi package-manager updates on the Web UI host. After it finishes, Pi Web UI will restart itself. Browser clients will briefly disconnect, and managed Pi tabs/RPC processes will be restarted from saved session state when possible.${workingWarning}`;
+  const command = all ? "pi update --all" : "pi update";
+  const scope = all ? "Pi and configured package updates" : "Pi only";
+  return `Run ${scope} now?${versionText}\n\nThis will run \"${command}\" on the Web UI host. After it finishes, Pi Web UI will restart itself. Browser clients will briefly disconnect, and managed Pi tabs/RPC processes will be restarted from saved session state when possible.${workingWarning}`;
 }
 
-async function runPiUpdateAndRestart() {
+async function runPiUpdateAndRestart({ all = false } = {}) {
   if (updateRequestInProgress) return;
   if (latestUpdateStatus?.canRunUpdate === false) {
-    addEvent("Pi/Web UI package updates can only be started from localhost on the Web UI host", "warn");
+    addEvent("Pi updates can only be started from localhost on the Web UI host", "warn");
     renderUpdateNotification(latestUpdateStatus, { force: true });
     return;
   }
-  if (!confirm(piUpdateConfirmationText())) return;
+  if (!confirm(piUpdateConfirmationText({ all }))) return;
 
+  const updateLabel = all ? "Pi and package updates" : "Pi update";
   updateRequestInProgress = true;
   hideUpdateNotification();
   setServerActionBusy("Updating…");
-  setServerActionStatus("Running Pi/Web UI package updates. The server will restart after the update completes…", "warn");
-  setServerRestartOverlay(true, "Running Pi/Web UI package updates. The server will restart after the update completes…");
+  setServerActionStatus(`Running ${updateLabel}. The server will restart after the update completes…`, "warn");
+  setServerRestartOverlay(true, `Running ${updateLabel}. The server will restart after the update completes…`);
   try {
-    await api("/api/update", { method: "POST", scoped: false });
-    addEvent("Pi/Web UI package updates completed; Pi Web UI server restart requested", "warn");
+    await api(all ? "/api/update?all=1" : "/api/update", { method: "POST", scoped: false });
+    addEvent(`${updateLabel} completed; Pi Web UI server restart requested`, "warn");
   } catch (error) {
     if (!error?.backendOffline) {
       updateRequestInProgress = false;
@@ -3809,6 +3831,11 @@ function setOptionalFeatureDisabled(featureId, disabled) {
     btwWidgetComposerOpen = false;
     btwWidgetInputDraft = "";
   }
+  if (featureId === "remoteWebui") {
+    statusEntries.delete(REMOTE_WEBUI_CONTROLS_STATUS_KEY);
+    statusEntries.delete("pi-remote-webui");
+    widgets.delete("pi-remote-webui");
+  }
   storeDisabledOptionalFeatures();
   renderOptionalFeatureDependentDisplays();
   const tabContext = activeTabContext();
@@ -5976,6 +6003,57 @@ function parseGitFooterWebuiPayloadRaw(raw) {
   }
 }
 
+function parseRemoteWebuiControlsPayloadRaw(raw) {
+  if (!raw) return null;
+  try {
+    const parsed = JSON.parse(raw);
+    if (!parsed || parsed.type !== REMOTE_WEBUI_CONTROLS_PAYLOAD_TYPE || parsed.version !== REMOTE_WEBUI_CONTROLS_PAYLOAD_VERSION) return null;
+    if (parsed.featureId !== "remoteWebui") return null;
+    const commands = parsed.commands && typeof parsed.commands === "object" ? parsed.commands : {};
+    return {
+      title: cleanFooterPayloadText(parsed.title, "Remote WebUI", 80),
+      description: cleanFooterPayloadText(parsed.description, "Trusted-LAN browser access controlled by the Remote WebUI package.", 240),
+      commands: {
+        open: typeof commands.open === "string" ? commands.open : "/remote",
+        close: typeof commands.close === "string" ? commands.close : "/remote close",
+        refresh: typeof commands.refresh === "string" ? commands.refresh : "/remote refresh",
+        status: typeof commands.status === "string" ? commands.status : "/remote status",
+        authOn: typeof commands.authOn === "string" ? commands.authOn : "/remote auth on",
+        authOff: typeof commands.authOff === "string" ? commands.authOff : "/remote auth off",
+      },
+    };
+  } catch {
+    return null;
+  }
+}
+
+function remoteWebuiControlsPayload() {
+  if (isOptionalFeatureDisabled("remoteWebui")) return null;
+  return parseRemoteWebuiControlsPayloadRaw(statusEntries.get(REMOTE_WEBUI_CONTROLS_STATUS_KEY));
+}
+
+function remoteWebuiDefaultPortArg() {
+  const port = Number.parseInt(String(latestNetwork?.port || DEFAULT_WEBUI_PORT), 10);
+  return Number.isFinite(port) && port > 0 && port <= 65535 && String(port) !== DEFAULT_WEBUI_PORT ? ` --port ${port}` : "";
+}
+
+function remoteWebuiFallbackCommand(name, fallback) {
+  const portArg = remoteWebuiDefaultPortArg();
+  const commands = {
+    open: `/remote${portArg}`,
+    close: `/remote close${portArg}`,
+    refresh: `/remote refresh${portArg}`,
+    status: `/remote status${portArg}`,
+    authOn: `/remote auth on${portArg}`,
+    authOff: `/remote auth off${portArg}`,
+  };
+  return commands[name] || fallback;
+}
+
+function remoteWebuiCommand(name, fallback) {
+  return remoteWebuiControlsPayload()?.commands?.[name] || remoteWebuiFallbackCommand(name, fallback);
+}
+
 function readCachedGitFooterWebuiPayloadRaw() {
   try {
     const cached = JSON.parse(localStorage.getItem(GIT_FOOTER_WEBUI_PAYLOAD_CACHE_KEY) || "null");
@@ -6382,13 +6460,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 +6693,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 +6724,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 +6742,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 +6771,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 +6782,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 +8616,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 +8653,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 +8739,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 +8806,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 +8817,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 +8838,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 +8934,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 +8959,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 +8990,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);
@@ -14358,7 +14551,7 @@ function updateOptionalFeatureAvailability() {
   optionalFeatureAvailability.tuiSkillsCommand = hasLoadedRpcCommand("skills");
   optionalFeatureAvailability.todoProgressWidget = hasAvailableCommand("todo-progress-status") || optionalFeatureAvailability.todoProgressWidget || widgets.has("todo-progress");
   optionalFeatureAvailability.tuiToolsCommand = hasLoadedRpcCommand("tools");
-  optionalFeatureAvailability.remoteWebui = hasAvailableCommand("remote") || optionalFeatureAvailability.remoteWebui || statusEntries.has("pi-remote-webui") || widgets.has("pi-remote-webui");
+  optionalFeatureAvailability.remoteWebui = hasAvailableCommand("remote") || optionalFeatureAvailability.remoteWebui || statusEntries.has("pi-remote-webui") || statusEntries.has(REMOTE_WEBUI_CONTROLS_STATUS_KEY) || widgets.has("pi-remote-webui");
   optionalFeatureAvailability.themeBundle = availableThemes.length > 0;
   requestGitFooterWebuiPayload();
   renderOptionalFeatureControls();
@@ -14516,6 +14709,14 @@ function renderOptionalFeatureControls() {
       optionalFeatureUnavailableMessage("remoteWebui"),
     );
   }
+  if (elements.networkControlField) {
+    elements.networkControlField.hidden = !hasRemoteWebuiCommand;
+    elements.networkControlField.classList.toggle("feature-unavailable", !hasRemoteWebuiCommand);
+    const label = elements.networkControlField.querySelector("label");
+    const payload = remoteWebuiControlsPayload();
+    if (label) label.textContent = payload?.title || "Remote WebUI";
+    elements.networkControlField.title = hasRemoteWebuiCommand ? payload?.description || "Remote WebUI controls are provided by @firstpick/pi-package-remote-webui." : optionalFeatureUnavailableMessage("remoteWebui");
+  }
 
   renderOptionalFeaturePanel();
 }
@@ -15947,21 +16148,25 @@ async function refreshNetworkStatus() {
   renderNetworkStatus();
 }
 
-async function toggleRemoteAuth() {
-  const enable = !latestNetwork?.auth?.enabled;
-  const message = enable
-    ? "Enable remote PIN authentication?\n\nA random 4-digit PIN will be required for non-local browser clients. The PIN is shown in Controls."
-    : "Disable remote PIN authentication?\n\nNon-local browser clients will no longer need a PIN while the network listener is open.";
-  if (!confirm(message)) {
-    renderNetworkStatus();
-    return;
+async function runRemoteWebuiCommand(command) {
+  const commandName = String(command || "").replace(/^\//, "").split(/\s+/, 1)[0] || "remote";
+  if (!isOptionalFeatureEnabled("remoteWebui") || !hasAvailableCommand(commandName)) {
+    const message = commandUnavailableMessage(commandName);
+    addEvent(message, "warn");
+    refreshCommands(activeTabContext()).catch((error) => addEvent(error.message || String(error), "error"));
+    return false;
   }
+  await runNativeCommandMenu(command);
+  return true;
+}
 
+async function toggleRemoteAuth() {
+  const enable = !latestNetwork?.auth?.enabled;
   elements.remoteAuthToggle.disabled = true;
   try {
-    const response = await api("/api/remote-auth/settings", { method: "POST", body: { enabled: enable }, scoped: false });
-    latestNetwork = response.data?.network || { ...(latestNetwork || {}), auth: response.data?.auth };
-    addEvent(enable ? "remote PIN auth enabled" : "remote PIN auth disabled", enable ? "warn" : "info");
+    await runRemoteWebuiCommand(remoteWebuiCommand(enable ? "authOn" : "authOff", enable ? "/remote auth on" : "/remote auth off"));
+    await delay(250);
+    await refreshNetworkStatus();
   } catch (error) {
     addEvent(error.message || String(error), "error");
   } finally {
@@ -16779,35 +16984,15 @@ function scheduleForegroundReconcile(reason = "resume", delay = FOREGROUND_RECON
 }
 
 async function openToNetwork() {
-  if (latestNetwork?.open) {
-    await closeNetworkAccess();
-    return;
-  }
-  if (!confirm(`Open Pi Web UI to your local network?\n\nRemote PIN auth is ${latestNetwork?.auth?.enabled ? "ON" : "OFF"}. The Web UI can control Pi/tools, so only do this on a trusted LAN.`)) return;
-
+  const open = !!latestNetwork?.open;
   elements.openNetworkButton.disabled = true;
-  elements.openNetworkButton.textContent = "Opening…";
+  elements.openNetworkButton.textContent = open ? "Closing…" : "Opening…";
   try {
-    await api("/api/network/open", { method: "POST", scoped: false });
-    latestNetwork = { ...(latestNetwork || {}), opening: true, closing: false };
-    renderNetworkStatus();
-    addEvent("opening webui to local network", "warn");
-    for (let attempt = 0; attempt < 20; attempt++) {
-      await delay(350);
-      try {
-        await refreshNetworkStatus();
-        if (latestNetwork?.open && !latestNetwork?.opening) {
-          const url = latestNetwork.networkUrls?.[0];
-          addEvent(`webui open to local network${url ? `: ${url}` : ""}`, "warn");
-          return;
-        }
-      } catch {
-        // The listener briefly drops while rebinding; retry.
-      }
-    }
+    await runRemoteWebuiCommand(remoteWebuiCommand(open ? "close" : "open", open ? "/remote close" : "/remote"));
+    await delay(350);
     await refreshNetworkStatus();
   } catch (error) {
-    addEvent(error.message, "error");
+    addEvent(error.message || String(error), "error");
   } finally {
     renderNetworkStatus();
   }
@@ -16815,41 +17000,7 @@ async function openToNetwork() {
 
 async function closeNetworkAccess() {
   if (!latestNetwork?.open) return;
-  if (!confirm("Close Pi Web UI network access?\n\nThe local browser can keep using the UI, but LAN clients will disconnect.")) return;
-
-  elements.openNetworkButton.disabled = true;
-  elements.openNetworkButton.textContent = "Closing…";
-  try {
-    await api("/api/network/close", { method: "POST", scoped: false });
-    latestNetwork = { ...(latestNetwork || {}), opening: false, closing: true };
-    renderNetworkStatus();
-    addEvent("closing webui network access", "warn");
-    let refreshFailed = false;
-    for (let attempt = 0; attempt < 20; attempt++) {
-      await delay(350);
-      try {
-        await refreshNetworkStatus();
-        if (!latestNetwork?.open && !latestNetwork?.closing) {
-          addEvent("webui closed to local-only access", "warn");
-          return;
-        }
-      } catch {
-        refreshFailed = true;
-        // Remote tabs will lose access after the listener returns to localhost.
-      }
-    }
-    if (refreshFailed) {
-      latestNetwork = { ...(latestNetwork || {}), open: false, opening: false, closing: false, networkUrls: [] };
-      renderNetworkStatus();
-      addEvent("webui network access closed; reconnect from this machine if this tab loses access", "warn");
-      return;
-    }
-    addEvent("network close requested, but the server still reports network access open", "warn");
-  } catch (error) {
-    addEvent(error.message, "error");
-  } finally {
-    renderNetworkStatus();
-  }
+  await openToNetwork();
 }
 
 function setServerActionStatus(message = "", level = "info") {
@@ -16865,10 +17016,11 @@ function updateServerActionButton() {
   const button = elements.runServerActionButton;
   if (!button) return;
   button.disabled = !action;
-  button.textContent = action === "restart" ? "Restart" : action === "update" ? "Update" : action === "stop" ? "Stop" : "Run";
+  button.textContent = action === "restart" ? "Restart" : action === "update" || action === "update-all" ? "Update" : action === "stop" ? "Stop" : "Run";
   button.classList.toggle("danger", action === "stop");
   if (action === "restart") setServerActionStatus("Ready to restart the Web UI server.", "info");
-  else if (action === "update") setServerActionStatus("Ready to run pi update, then restart the Web UI server.", "info");
+  else if (action === "update") setServerActionStatus("Ready to run pi update for Pi only, then restart the Web UI server.", "info");
+  else if (action === "update-all") setServerActionStatus("Ready to run pi update --all for Pi and configured packages, then restart the Web UI server.", "info");
   else if (action === "stop") setServerActionStatus("Ready to stop the Web UI server.", "info");
   else setServerActionStatus();
 }
@@ -16976,6 +17128,7 @@ async function runSelectedServerAction() {
   const action = elements.serverActionSelect?.value || "";
   if (action === "restart") await restartServer();
   else if (action === "update") await runPiUpdateAndRestart();
+  else if (action === "update-all") await runPiUpdateAndRestart({ all: true });
   else if (action === "stop") await stopServer();
 }
 
@@ -18360,6 +18513,7 @@ elements.openNetworkButton.addEventListener("click", openToNetwork);
 elements.serverActionSelect.addEventListener("change", updateServerActionButton);
 elements.runServerActionButton.addEventListener("click", () => runSelectedServerAction().catch((error) => addEvent(error.message || String(error), "error")));
 elements.updateNotificationUpdateButton?.addEventListener("click", () => runPiUpdateAndRestart().catch((error) => addEvent(error.message || String(error), "error")));
+elements.updateNotificationUpdateAllButton?.addEventListener("click", () => runPiUpdateAndRestart({ all: true }).catch((error) => addEvent(error.message || String(error), "error")));
 elements.updateNotificationDismissButton?.addEventListener("click", () => hideUpdateNotification({ remember: true }));
 updateServerActionButton();
 elements.agentDoneNotificationsToggle.addEventListener("change", () => {
@@ -18713,6 +18867,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 +18876,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", () => {