@firstpick/pi-package-webui 0.3.5 → 0.3.6

package/README.md

@@ -125,11 +125,12 @@ Environment variables:
 - Streaming chat transcript with Markdown, thinking output, tool/bash cards, queue and compaction events, and abort controls.
 - Prompt composer with uploads, drag/drop/paste, inline image support, slash-command autocomplete, and `@` file/path references with live suggestions.
 - Browser dialogs for common Pi selectors such as `/model`, `/settings`, `/theme`, `/fork`, `/clone`, `/resume`, `/tree`, `/scoped-models`, `/tools`, and `/skills`.
-- Model, thinking, session, workspace, theme, optional-feature, Codex usage, network, event, and notification controls in the side panel.
+- Model, thinking, session, workspace, theme, optional-feature, Codex usage, network, update/restart, event, and notification controls in the side panel.
 - Side-panel theme picker backed by optional `@firstpick/pi-themes-bundle` themes when loaded.
 - Per-tab cwd changes, a clickable footer cwd picker, saved path fast picks, server-persisted fast picks, and restart-safe restoration of open tabs.
 - Detected app runner dropdown for the active tab cwd, including Cargo, Bun, npm/npx/pnpm, Python/uv, Go/Golang, Zig, C/C++, Docker Compose, root/dev/scripts shell scripts, and other common project runners with live output pinned at the top of the terminal. Projects can add browseable custom runners in `.pi-webui-runners.json` with a command (default `./`) plus a relative path to the file to run.
 - Browser support for Pi extension UI prompts, widgets, status updates, browser notifications when a tab needs an extension UI response and an optional side-panel toggle for agent-done notifications.
+- Localhost-only Pi update checks with a top-right update notification and a confirmed **Update & restart** action that runs `pi update`, then restarts the Web UI server.
 - Feedback reactions (`👍`, `👎`, `?`) on final assistant output plus tool/bash action cards, which can ask Pi to create or update a LEARNING.
 - Mobile-friendly layout and PWA install support where the browser allows it.
 
@@ -138,6 +139,7 @@ Useful browser endpoints exposed by the local server include:
 - `GET /api/path-suggestions?tab=<tabId>&query=<path>` for `@` file/path references with live suggestions.
 - `POST /api/action-feedback?tab=<tabId>` for feedback on final assistant output and action cards.
 - `POST /api/optional-feature-install` for installing known optional companion packages from the side panel.
+- `GET /api/update-status` and localhost-only `POST /api/update` for checking Pi/Web UI updates and running `pi update` followed by a Web UI server restart.
 
 For local development, run the checkout helper directly, for example:
 
@@ -191,6 +193,7 @@ This requires `/git-staged-msg` and `/pr` from `@firstpick/pi-prompts-git-pr`; b
 - The side-panel **Open to network** button rebinds the server to `0.0.0.0`, shows LAN URLs when available, and toggles to "Close for network".
 - `--host 0.0.0.0` also exposes the Web UI to the local network.
 - Any connected browser client can control Pi and run Web UI bash actions as the Web UI process user.
+- The Web UI update endpoint is restricted to localhost, because it runs `pi update` and restarts the server.
 - Treat Pi Web UI as a local companion, not a hardened multi-user web service.
 
 ## Troubleshooting

package/bin/pi-webui.mjs

@@ -19,6 +19,13 @@ const webuiHelperExtensionPath = path.join(packageRoot, "webui-rpc-helper.mjs");
 const agentDir = process.env.PI_CODING_AGENT_DIR || path.join(homedir(), ".pi", "agent");
 const OPTIONAL_FEATURE_INSTALL_ROOT_ENV = "PI_WEBUI_OPTIONAL_FEATURE_INSTALL_ROOT";
 const packageJson = JSON.parse(await readFile(path.join(packageRoot, "package.json"), "utf8"));
+let piPackageJson = {};
+try {
+  const piPackageJsonPath = require.resolve("@earendil-works/pi-coding-agent/package.json", { paths: [packageRoot] });
+  piPackageJson = JSON.parse(await readFile(piPackageJsonPath, "utf8"));
+} catch {
+  piPackageJson = {};
+}
 const nativeParityMatrix = JSON.parse(await readFile(path.join(packageRoot, "WEBUI_TUI_NATIVE_PARITY.json"), "utf8"));
 const webuiDevServer = isTruthyEnv(process.env.PI_WEBUI_DEV) || isSourceCheckout(packageRoot);
 
@@ -28,6 +35,14 @@ const REQUEST_TIMEOUT_MS = 5 * 60 * 1000;
 const WEBUI_HELPER_TIMEOUT_MS = 8 * 1000;
 const WEBUI_HELPER_COMMAND = "webui-helper";
 const WEBUI_HELPER_RESPONSE_PREFIX = "__PI_WEBUI_HELPER_RESPONSE__:";
+const PI_CODING_AGENT_PACKAGE = "@earendil-works/pi-coding-agent";
+const WEBUI_PACKAGE = packageJson.name || "@firstpick/pi-package-webui";
+const PI_LATEST_VERSION_URL = process.env.PI_WEBUI_PI_LATEST_VERSION_URL || "https://pi.dev/api/latest-version";
+const NPM_REGISTRY_URL = (process.env.PI_WEBUI_NPM_REGISTRY_URL || "https://registry.npmjs.org").replace(/\/+$/, "");
+const UPDATE_STATUS_CACHE_MS = 10 * 60 * 1000;
+const UPDATE_STATUS_TIMEOUT_MS = 10 * 1000;
+const PI_UPDATE_TIMEOUT_MS = 15 * 60 * 1000;
+const PI_UPDATE_OUTPUT_MAX_CHARS = 120_000;
 const CODEX_USAGE_TIMEOUT_MS = 15 * 1000;
 const CODEX_TOKEN_REFRESH_SKEW_MS = 5 * 60 * 1000;
 const OPENAI_CODEX_PROVIDER_ID = "openai-codex";
@@ -363,6 +378,51 @@ function delay(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
+function truncateLongText(value, maxLength = 8000) {
+  const text = String(value || "");
+  if (text.length <= maxLength) return text;
+  return `${text.slice(0, Math.max(0, maxLength - 1))}…`;
+}
+
+function parsePackageVersion(version) {
+  const match = String(version || "").trim().match(/^v?(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?(?:\+.*)?$/);
+  if (!match) return undefined;
+  return {
+    major: Number.parseInt(match[1], 10),
+    minor: Number.parseInt(match[2], 10),
+    patch: Number.parseInt(match[3], 10),
+    prerelease: match[4],
+  };
+}
+
+function comparePackageVersions(leftVersion, rightVersion) {
+  const left = parsePackageVersion(leftVersion);
+  const right = parsePackageVersion(rightVersion);
+  if (!left || !right) return undefined;
+  if (left.major !== right.major) return left.major - right.major;
+  if (left.minor !== right.minor) return left.minor - right.minor;
+  if (left.patch !== right.patch) return left.patch - right.patch;
+  if (left.prerelease === right.prerelease) return 0;
+  if (!left.prerelease) return 1;
+  if (!right.prerelease) return -1;
+  return left.prerelease.localeCompare(right.prerelease);
+}
+
+function isNewerPackageVersion(candidateVersion, currentVersion) {
+  const comparison = comparePackageVersions(candidateVersion, currentVersion);
+  if (comparison !== undefined) return comparison > 0;
+  return String(candidateVersion || "").trim() !== String(currentVersion || "").trim();
+}
+
+async function fetchJsonWithTimeout(url, { timeoutMs = UPDATE_STATUS_TIMEOUT_MS, headers = {} } = {}) {
+  const response = await fetch(url, {
+    headers,
+    signal: AbortSignal.timeout(timeoutMs),
+  });
+  if (!response.ok) throw new Error(`${response.status}${response.statusText ? ` ${response.statusText}` : ""}`);
+  return response.json();
+}
+
 class PiRpcProcess {
   constructor({ command, args, displayCommand, cwd }) {
     this.command = command;
@@ -3912,6 +3972,173 @@ function spawnRestartServer(restorableTabs) {
   return child;
 }
 
+let updateStatusCache = null;
+let updateStatusCacheAt = 0;
+let piUpdateInProgress = false;
+
+function updateChecksSkippedReason() {
+  if (process.env.PI_OFFLINE) return "PI_OFFLINE is set";
+  if (process.env.PI_SKIP_VERSION_CHECK) return "PI_SKIP_VERSION_CHECK is set";
+  return "";
+}
+
+function basePackageUpdateStatus(packageName, currentVersion) {
+  return {
+    packageName,
+    currentVersion: String(currentVersion || ""),
+    latestVersion: null,
+    updateAvailable: false,
+    checked: false,
+    skipped: false,
+    skippedReason: "",
+    error: "",
+  };
+}
+
+async function checkLatestPiReleaseStatus() {
+  const status = basePackageUpdateStatus(PI_CODING_AGENT_PACKAGE, piPackageJson.version);
+  const skippedReason = updateChecksSkippedReason();
+  if (skippedReason) {
+    status.skipped = true;
+    status.skippedReason = skippedReason;
+    return status;
+  }
+  try {
+    const data = await fetchJsonWithTimeout(PI_LATEST_VERSION_URL, {
+      headers: {
+        "User-Agent": `pi-webui/${packageJson.version} pi/${piPackageJson.version || "unknown"}`,
+        accept: "application/json",
+      },
+    });
+    const latestVersion = typeof data.version === "string" ? data.version.trim() : "";
+    if (!latestVersion) throw new Error("latest-version response did not include a version");
+    status.latestVersion = latestVersion;
+    status.packageName = typeof data.packageName === "string" && data.packageName.trim() ? data.packageName.trim() : PI_CODING_AGENT_PACKAGE;
+    status.note = typeof data.note === "string" && data.note.trim() ? data.note.trim() : "";
+    status.updateAvailable = status.currentVersion ? isNewerPackageVersion(latestVersion, status.currentVersion) : false;
+    status.checked = true;
+  } catch (error) {
+    status.error = sanitizeError(error);
+  }
+  return status;
+}
+
+function npmLatestPackageUrl(packageName) {
+  return `${NPM_REGISTRY_URL}/${encodeURIComponent(packageName)}/latest`;
+}
+
+async function checkLatestNpmPackageStatus(packageName, currentVersion) {
+  const status = basePackageUpdateStatus(packageName, currentVersion);
+  const skippedReason = updateChecksSkippedReason();
+  if (skippedReason) {
+    status.skipped = true;
+    status.skippedReason = skippedReason;
+    return status;
+  }
+  try {
+    const data = await fetchJsonWithTimeout(npmLatestPackageUrl(packageName), {
+      headers: {
+        "User-Agent": `pi-webui/${packageJson.version}`,
+        accept: "application/json",
+      },
+    });
+    const latestVersion = typeof data.version === "string" ? data.version.trim() : "";
+    if (!latestVersion) throw new Error(`${packageName} latest metadata did not include a version`);
+    status.latestVersion = latestVersion;
+    status.updateAvailable = status.currentVersion ? isNewerPackageVersion(latestVersion, status.currentVersion) : false;
+    status.checked = true;
+  } catch (error) {
+    status.error = sanitizeError(error);
+  }
+  return status;
+}
+
+function updateStatusForRequest(status, req) {
+  return {
+    ...status,
+    canRunUpdate: isLocalAddress(req?.socket?.remoteAddress),
+    updateInProgress: piUpdateInProgress,
+  };
+}
+
+async function getUpdateStatus({ force = false } = {}) {
+  const now = Date.now();
+  if (!force && updateStatusCache && now - updateStatusCacheAt < UPDATE_STATUS_CACHE_MS) return updateStatusCache;
+  const [piStatus, webuiStatus] = await Promise.all([
+    checkLatestPiReleaseStatus(),
+    checkLatestNpmPackageStatus(WEBUI_PACKAGE, packageJson.version),
+  ]);
+  const updateAvailable = !!(piStatus.updateAvailable || webuiStatus.updateAvailable);
+  updateStatusCache = {
+    checkedAt: new Date(now).toISOString(),
+    updateAvailable,
+    restartRequired: true,
+    command: "pi update",
+    webuiDev: webuiDevServer,
+    pi: piStatus,
+    webui: webuiStatus,
+    packages: {
+      checked: false,
+      note: "pi update will also update configured unpinned Pi packages.",
+    },
+  };
+  updateStatusCacheAt = now;
+  return updateStatusCache;
+}
+
+async function resolvePiUpdateCommand() {
+  if (options.piBinExplicit) {
+    return { command: options.piBin, args: ["update"], displayCommand: formatCommandForDisplay(options.piBin, ["update"]) };
+  }
+
+  const pathPi = await runCommand(options.piBin, ["--version"], { timeoutMs: 3000, maxOutputLength: 4000 });
+  if (pathPi.exitCode === 0 && !pathPi.timedOut && !pathPi.error) {
+    return { command: options.piBin, args: ["update"], displayCommand: formatCommandForDisplay(options.piBin, ["update"]) };
+  }
+
+  return resolvePiCommand(["update"]);
+}
+
+async function runPiUpdateAndPrepareRestart() {
+  if (piUpdateInProgress) throw makeHttpError(409, "A Pi update is already running.");
+  piUpdateInProgress = true;
+  let restartPrepared = false;
+  try {
+    const restorableTabs = await restorableTabsForRestart();
+    const piCommand = await resolvePiUpdateCommand();
+    const command = piCommand.displayCommand || formatCommandForDisplay(piCommand.command, piCommand.args || []);
+    recordEvent({ type: "webui_update_started", command, restorableTabCount: restorableTabs.length });
+    const result = await runCommand(piCommand.command, piCommand.args || [], {
+      cwd: process.cwd(),
+      timeoutMs: PI_UPDATE_TIMEOUT_MS,
+      maxOutputLength: PI_UPDATE_OUTPUT_MAX_CHARS,
+    });
+    const ok = result.exitCode === 0 && !result.timedOut && !result.error;
+    if (!ok) {
+      const details = [result.error, result.timedOut ? "timed out" : undefined, result.stderr?.trim(), result.stdout?.trim()].filter(Boolean).join("\n");
+      recordEvent({ type: "webui_update_failed", command, error: truncateStatusText(details || `exit code ${result.exitCode ?? "unknown"}`) });
+      throw makeHttpError(500, truncateLongText(`Pi update failed: ${command}${details ? `\n${details}` : ""}`));
+    }
+
+    updateStatusCache = null;
+    updateStatusCacheAt = 0;
+    const child = spawnRestartServer(restorableTabs);
+    restartPrepared = true;
+    recordEvent({ type: "webui_update_restarting", command, nextWebuiPid: child.pid, restorableTabCount: restorableTabs.length });
+    return {
+      message: "Pi update completed. Pi Web UI is restarting.",
+      command,
+      stdout: result.stdout,
+      stderr: result.stderr,
+      webuiPid: process.pid,
+      nextWebuiPid: child.pid,
+      restorableTabCount: restorableTabs.length,
+    };
+  } finally {
+    if (!restartPrepared) piUpdateInProgress = false;
+  }
+}
+
 function rememberClosedRestorableTab(tab, state = null) {
   const descriptor = restorableTabDescriptor(tab, state);
   if (!descriptor) return;
@@ -5517,6 +5744,13 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/update-status" && req.method === "GET") {
+      const force = ["1", "true", "yes", "refresh"].includes(String(url.searchParams.get("refresh") || "").toLowerCase());
+      const status = await getUpdateStatus({ force });
+      sendJson(res, 200, { ok: true, data: updateStatusForRequest(status, req) });
+      return;
+    }
+
     if (url.pathname === "/api/native-parity" && req.method === "GET") {
       sendJson(res, 200, { ok: true, data: nativeParityMatrix });
       return;
@@ -5577,6 +5811,14 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/update" && req.method === "POST") {
+      if (!isLocalAddress(req.socket.remoteAddress)) throw makeHttpError(403, "Updating Pi from the Web UI is only allowed from localhost");
+      const data = await runPiUpdateAndPrepareRestart();
+      sendJson(res, 200, { ok: true, data });
+      setTimeout(() => shutdown("api update"), 20).unref();
+      return;
+    }
+
     if (url.pathname === "/api/shutdown" && req.method === "POST") {
       if (!isLocalAddress(req.socket.remoteAddress)) throw makeHttpError(403, "Shutdown is only allowed from localhost");
       sendJson(res, 200, { ok: true, message: "Pi Web UI shutting down", webuiPid: process.pid });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "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",

package/public/app.js

@@ -15,6 +15,12 @@ const elements = {
   serverOfflinePanel: $("#serverOfflinePanel"),
   serverRestartPanel: $("#serverRestartPanel"),
   serverRestartMessage: $("#serverRestartMessage"),
+  updateNotification: $("#updateNotification"),
+  updateNotificationTitle: $("#updateNotificationTitle"),
+  updateNotificationMessage: $("#updateNotificationMessage"),
+  updateNotificationDetail: $("#updateNotificationDetail"),
+  updateNotificationUpdateButton: $("#updateNotificationUpdateButton"),
+  updateNotificationDismissButton: $("#updateNotificationDismissButton"),
   serverOfflineCommand: $("#serverOfflineCommand"),
   serverOfflineSlashCommand: $("#serverOfflineSlashCommand"),
   copyServerCommandButton: $("#copyServerCommandButton"),
@@ -251,6 +257,10 @@ let refreshCodexUsageTimer = null;
 let codexUsageRenderTimer = null;
 let backendOffline = false;
 let serverRestartInProgress = false;
+let updateRequestInProgress = false;
+let latestUpdateStatus = null;
+let updateStatusRefreshTimer = null;
+let updateNotificationHideTimer = null;
 let backendOfflineNoticeShown = false;
 let latestMessages = [];
 let promptHistoryByTab = new Map();
@@ -311,6 +321,7 @@ const SIDE_PANEL_SECTION_STORAGE_KEY = "pi-webui-side-panel-sections-collapsed";
 const TAB_STORAGE_KEY = "pi-webui-active-tab";
 const PATH_FAST_PICKS_STORAGE_KEY = "pi-webui-path-fast-picks";
 const AGENT_DONE_NOTIFICATIONS_STORAGE_KEY = "pi-webui-agent-done-notifications";
+const UPDATE_NOTIFICATION_DISMISS_STORAGE_KEY = "pi-webui-update-notification-dismissed";
 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";
@@ -360,6 +371,8 @@ const CHAT_PROGRAMMATIC_SCROLL_GRACE_MS = 500;
 const CHAT_USER_SCROLL_INTENT_MS = 700;
 const CODEX_USAGE_REFRESH_MS = 5 * 60 * 1000;
 const CODEX_USAGE_RENDER_TICK_MS = 30 * 1000;
+const UPDATE_STATUS_REFRESH_MS = 6 * 60 * 60 * 1000;
+const UPDATE_STATUS_INITIAL_DELAY_MS = 1800;
 const RUN_INDICATOR_TICK_MS = 1000;
 const RUN_INDICATOR_START_GRACE_MS = 2500;
 const RUN_INDICATOR_STATE_RECHECK_MS = 5000;
@@ -1698,6 +1711,7 @@ function setServerRestartOverlay(active, message = "Waiting for the server to co
   document.body.classList.toggle("server-restarting", serverRestartInProgress);
   if (elements.serverRestartPanel) elements.serverRestartPanel.hidden = !serverRestartInProgress;
   if (elements.serverRestartMessage) elements.serverRestartMessage.textContent = message;
+  if (serverRestartInProgress) hideUpdateNotification();
   if (serverRestartInProgress && elements.serverOfflinePanel) elements.serverOfflinePanel.hidden = true;
 }
 
@@ -1708,6 +1722,7 @@ function setBackendOffline(offline, error) {
   if (elements.serverOfflinePanel) elements.serverOfflinePanel.hidden = !showOfflinePanel;
   renderServerOfflinePanel();
   if (backendOffline) {
+    hideUpdateNotification();
     if (!serverRestartInProgress && !backendOfflineNoticeShown) {
       backendOfflineNoticeShown = true;
       addEvent(`Pi Web UI server is offline${error?.message ? `: ${error.message}` : ""}`, "warn");
@@ -1950,6 +1965,169 @@ async function refreshWebuiVersion() {
   setWebuiDevServer(isWebuiDevMetadata(health));
 }
 
+function packageUpdateText(label, status = {}) {
+  const current = formatWebuiVersion(status.currentVersion || "");
+  const latest = formatWebuiVersion(status.latestVersion || "");
+  if (current && latest) return `${label} ${current} → ${latest}`;
+  if (latest) return `${label} ${latest}`;
+  return label;
+}
+
+function updateNotificationItems(status = latestUpdateStatus) {
+  const items = [];
+  if (status?.pi?.updateAvailable) items.push(packageUpdateText("Pi", status.pi));
+  if (status?.webui?.updateAvailable) items.push(packageUpdateText("Web UI", status.webui));
+  return items;
+}
+
+function updateNotificationDismissKey(status = latestUpdateStatus) {
+  const parts = [status?.pi?.latestVersion, status?.webui?.latestVersion]
+    .map((value) => String(value || "").trim())
+    .filter(Boolean);
+  return parts.length ? parts.join("|") : "";
+}
+
+function storedDismissedUpdateKey() {
+  try {
+    return localStorage.getItem(UPDATE_NOTIFICATION_DISMISS_STORAGE_KEY) || "";
+  } catch {
+    return "";
+  }
+}
+
+function rememberDismissedUpdateKey(key) {
+  if (!key) return;
+  try {
+    localStorage.setItem(UPDATE_NOTIFICATION_DISMISS_STORAGE_KEY, key);
+  } catch {
+    // Ignore private-mode storage failures.
+  }
+}
+
+function hideUpdateNotification({ remember = false } = {}) {
+  const panel = elements.updateNotification;
+  if (!panel) return;
+  clearTimeout(updateNotificationHideTimer);
+  if (remember) rememberDismissedUpdateKey(updateNotificationDismissKey());
+  panel.classList.remove("show");
+  updateNotificationHideTimer = setTimeout(() => {
+    panel.hidden = true;
+  }, 360);
+}
+
+function renderUpdateNotification(status = latestUpdateStatus, { force = false } = {}) {
+  const panel = elements.updateNotification;
+  if (!panel) return;
+  latestUpdateStatus = status || latestUpdateStatus;
+  const items = updateNotificationItems(latestUpdateStatus);
+  const dismissKey = updateNotificationDismissKey(latestUpdateStatus);
+  const shouldShow = !!latestUpdateStatus?.updateAvailable && items.length > 0 && !updateRequestInProgress;
+  if (!shouldShow || (!force && dismissKey && storedDismissedUpdateKey() === dismissKey)) {
+    hideUpdateNotification();
+    return;
+  }
+
+  const canRunUpdate = latestUpdateStatus.canRunUpdate !== false;
+  if (elements.updateNotificationTitle) elements.updateNotificationTitle.textContent = items.length === 1 ? `${items[0]} available` : "Pi updates available";
+  if (elements.updateNotificationMessage) {
+    elements.updateNotificationMessage.textContent = canRunUpdate
+      ? "Run pi update now, then restart this Web UI server automatically."
+      : "Updates are available. Direct Web UI updates are only enabled from localhost on the host machine.";
+  }
+  const details = [
+    items.join(" · "),
+    latestUpdateStatus.webuiDev && latestUpdateStatus.webui?.updateAvailable ? "The current Web UI is a dev checkout; pi update updates installed Pi packages, not this checkout." : "",
+    latestUpdateStatus.packages?.note || "",
+  ].filter(Boolean).join(" ");
+  if (elements.updateNotificationDetail) elements.updateNotificationDetail.textContent = details;
+  if (elements.updateNotificationUpdateButton) {
+    elements.updateNotificationUpdateButton.hidden = !canRunUpdate;
+    elements.updateNotificationUpdateButton.disabled = updateRequestInProgress || latestUpdateStatus.updateInProgress;
+    elements.updateNotificationUpdateButton.textContent = latestUpdateStatus.updateInProgress ? "Updating…" : "Update & restart";
+  }
+  clearTimeout(updateNotificationHideTimer);
+  panel.hidden = false;
+  requestAnimationFrame(() => panel.classList.add("show"));
+}
+
+async function refreshUpdateStatus({ force = false, notify = true } = {}) {
+  const path = force ? "/api/update-status?refresh=1" : "/api/update-status";
+  const response = await api(path, { scoped: false });
+  latestUpdateStatus = response.data || null;
+  if (notify) renderUpdateNotification(latestUpdateStatus);
+  return latestUpdateStatus;
+}
+
+function scheduleUpdateStatusRefresh() {
+  clearTimeout(updateStatusRefreshTimer);
+  updateStatusRefreshTimer = setTimeout(() => {
+    updateStatusRefreshTimer = null;
+    refreshUpdateStatus({ force: true }).catch((error) => addEvent(`Pi update check failed: ${error.message || String(error)}`, "warn"));
+    scheduleUpdateStatusRefresh();
+  }, UPDATE_STATUS_REFRESH_MS);
+}
+
+function initializeUpdateNotifications() {
+  setTimeout(() => {
+    refreshUpdateStatus().catch((error) => addEvent(`Pi update check failed: ${error.message || String(error)}`, "warn"));
+    scheduleUpdateStatusRefresh();
+  }, UPDATE_STATUS_INITIAL_DELAY_MS);
+}
+
+function piUpdateConfirmationText() {
+  const items = updateNotificationItems();
+  const workingWarning = hasWorkingTab() ? "\n\nOne or more Pi tabs look busy or blocked. Finish or abort in-flight work before updating if you need to preserve it." : "";
+  const versionText = items.length ? `\n\nDetected update: ${items.join(" · ")}.` : "";
+  return `Run pi update now?${versionText}\n\nThis will run \"pi update\" on the Web UI host. After it finishes, Pi Web UI will restart itself. Browser clients will briefly disconnect, and managed Pi tabs/RPC processes will be restarted from saved session state when possible.${workingWarning}`;
+}
+
+async function runPiUpdateAndRestart() {
+  if (updateRequestInProgress) return;
+  if (latestUpdateStatus?.canRunUpdate === false) {
+    addEvent("Pi update can only be started from localhost on the Web UI host", "warn");
+    renderUpdateNotification(latestUpdateStatus, { force: true });
+    return;
+  }
+  if (!confirm(piUpdateConfirmationText())) return;
+
+  updateRequestInProgress = true;
+  hideUpdateNotification();
+  setServerActionBusy("Updating…");
+  setServerActionStatus("Running pi update. The server will restart after the update completes…", "warn");
+  setServerRestartOverlay(true, "Running pi update. The server will restart after the update completes…");
+  try {
+    await api("/api/update", { method: "POST", scoped: false });
+    addEvent("Pi update completed; Pi Web UI server restart requested", "warn");
+  } catch (error) {
+    if (!error?.backendOffline) {
+      updateRequestInProgress = false;
+      setServerRestartOverlay(false);
+      resetServerActionControls();
+      const message = error.message || String(error);
+      setServerActionStatus(message, "error");
+      addEvent(message, "error");
+      renderUpdateNotification(latestUpdateStatus, { force: true });
+      return;
+    }
+    addEvent("Pi Web UI server connection dropped during update restart request", "warn");
+  }
+
+  setBackendOffline(true, new Error("update requested from side panel"));
+  const restarted = await waitForServerRestart();
+  updateRequestInProgress = false;
+  resetServerActionControls();
+  if (restarted) {
+    hideUpdateNotification({ remember: true });
+    setServerActionStatus("Updated, restarted, and reconnected.", "success");
+    refreshUpdateStatus({ force: true, notify: false }).catch(() => {});
+  } else {
+    setServerRestartOverlay(false);
+    setBackendOffline(true, new Error("update restart reconnect timed out"));
+    setServerActionStatus("Update completed, but the server did not reconnect automatically.", "error");
+    addEvent("Pi Web UI server did not come back online after update request", "error");
+  }
+}
+
 function formatBytes(bytes) {
   const value = Number(bytes) || 0;
   if (value < 1024) return `${value} B`;
@@ -12084,9 +12262,11 @@ function updateServerActionButton() {
   const button = elements.runServerActionButton;
   if (!button) return;
   button.disabled = !action;
-  button.textContent = action === "restart" ? "Restart" : action === "stop" ? "Stop" : "Run";
+  button.textContent = action === "restart" ? "Restart" : action === "update" ? "Update" : action === "stop" ? "Stop" : "Run";
   button.classList.toggle("danger", action === "stop");
-  if (action) setServerActionStatus(action === "restart" ? "Ready to restart the Web UI server." : "Ready to stop the Web UI server.", "info");
+  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 === "stop") setServerActionStatus("Ready to stop the Web UI server.", "info");
   else setServerActionStatus();
 }
 
@@ -12192,6 +12372,7 @@ async function stopServer() {
 async function runSelectedServerAction() {
   const action = elements.serverActionSelect?.value || "";
   if (action === "restart") await restartServer();
+  else if (action === "update") await runPiUpdateAndRestart();
   else if (action === "stop") await stopServer();
 }
 
@@ -13405,6 +13586,8 @@ if (elements.backgroundClearButton) {
 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.updateNotificationDismissButton?.addEventListener("click", () => hideUpdateNotification({ remember: true }));
 updateServerActionButton();
 elements.agentDoneNotificationsToggle.addEventListener("change", () => {
   setAgentDoneNotificationsEnabled(elements.agentDoneNotificationsToggle.checked, {
@@ -13752,6 +13935,7 @@ restoreSidePanelSectionState();
 bindSidePanelSectionToggles();
 restoreSidePanelState();
 initializeCodexUsage();
+initializeUpdateNotifications();
 bindMobileViewChanges();
 bindSidePanelOverlayViewChanges();
 registerPwaServiceWorker();

package/public/index.html

@@ -12,7 +12,7 @@
     <link rel="manifest" href="/manifest.webmanifest" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="stylesheet" href="/styles.css?v=36" />
+    <link rel="stylesheet" href="/styles.css?v=39" />
   </head>
   <body>
     <button id="sidePanelExpandButton" class="side-panel-expand-button" type="button" aria-controls="sidePanel" aria-expanded="false" aria-label="Expand side panel" title="Expand side panel">
@@ -45,6 +45,19 @@
       </div>
     </section>
 
+    <section id="updateNotification" class="update-notification" aria-live="polite" hidden>
+      <div class="update-notification-card" role="status">
+        <span class="update-notification-kicker">Update available</span>
+        <h2 id="updateNotificationTitle">Pi update available</h2>
+        <p id="updateNotificationMessage">A newer Pi version is available.</p>
+        <p id="updateNotificationDetail" class="update-notification-detail muted"></p>
+        <div class="update-notification-actions">
+          <button id="updateNotificationUpdateButton" class="primary" type="button">Update &amp; restart</button>
+          <button id="updateNotificationDismissButton" type="button">Later</button>
+        </div>
+      </div>
+    </section>
+
     <main class="layout">
       <section class="chat-panel">
         <header class="terminal-tabs-shell">
@@ -84,6 +97,7 @@
           <div id="gitWorkflowActions" class="git-workflow-actions"></div>
         </section>
         <form id="composer" class="composer">
+          <div id="commandSuggest" class="command-suggest" role="listbox" aria-label="Command and path suggestions" hidden></div>
           <div class="composer-input-row">
             <div class="composer-context-tags">
               <button
@@ -118,7 +132,6 @@
             ><svg class="composer-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M21.44 11.05 12.25 20.24a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.82-2.82l8.48-8.49" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
             <input id="attachmentInput" class="attachment-input" type="file" multiple accept="image/*,video/*,audio/*,text/*,application/pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/json,application/xml,.md,.markdown,.csv,.ts,.tsx,.js,.jsx,.mjs,.cjs,.py,.rs,.go,.java,.c,.cpp,.h,.hpp,.sh,.bash,.zsh,.fish,.yaml,.yml,.toml,.ini,.log" />
           </div>
-          <div id="commandSuggest" class="command-suggest" role="listbox" aria-label="Command and path suggestions" hidden></div>
           <div id="attachmentTray" class="attachment-tray" aria-live="polite" hidden></div>
           <div class="composer-row">
             <button id="composerActionsButton" class="composer-actions-button" type="button" aria-controls="composerActionsPanel" aria-expanded="false" title="Open session, workflow, and follow-up actions">Actions</button>
@@ -348,6 +361,7 @@
                     <select id="serverActionSelect" title="Server action" aria-label="Server action">
                       <option value="" selected>Choose action…</option>
                       <option value="restart">Restart Server</option>
+                      <option value="update">Update Pi &amp; Restart</option>
                       <option value="stop">Stop Server</option>
                     </select>
                     <button id="runServerActionButton" type="button" disabled>Run</button>
@@ -584,6 +598,6 @@
       </form>
     </dialog>
 
-    <script type="module" src="/app.js?v=37"></script>
+    <script type="module" src="/app.js?v=38"></script>
   </body>
 </html>

package/public/styles.css

@@ -434,6 +434,79 @@ body.server-restarting .layout {
 @keyframes server-restart-spin {
   to { transform: rotate(360deg); }
 }
+.update-notification[hidden] {
+  display: none !important;
+}
+.update-notification {
+  position: fixed;
+  top: calc(env(safe-area-inset-top, 0px) + 1rem);
+  right: calc(env(safe-area-inset-right, 0px) + 1rem);
+  z-index: 64;
+  width: min(28rem, calc(100vw - 2rem));
+  opacity: 0;
+  transform: translateY(-1.6rem);
+  pointer-events: none;
+  transition: opacity 320ms ease, transform 1050ms cubic-bezier(0.18, 0.92, 0.24, 1);
+}
+.update-notification.show {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: auto;
+  animation: update-notification-slide-down 1100ms cubic-bezier(0.18, 0.92, 0.24, 1);
+}
+.update-notification-card {
+  position: relative;
+  overflow: hidden;
+  padding: 1rem;
+  border: 1px solid rgba(166, 227, 161, 0.42);
+  border-radius: 1rem;
+  background:
+    radial-gradient(circle at 100% 0, rgba(166, 227, 161, 0.18), transparent 13rem),
+    linear-gradient(145deg, rgba(var(--ctp-base-rgb), 0.96), rgba(var(--ctp-crust-rgb), 0.98));
+  box-shadow: 0 1.1rem 3.2rem rgba(var(--ctp-crust-rgb), 0.72), 0 0 1.8rem rgba(166, 227, 161, 0.16), inset 0 1px 0 rgba(255,255,255,0.08);
+  backdrop-filter: blur(18px) saturate(145%);
+}
+.update-notification-card::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 auto;
+  height: 2px;
+  background: linear-gradient(90deg, var(--ctp-green), var(--ctp-teal), var(--ctp-blue));
+  box-shadow: 0 0 1rem rgba(166, 227, 161, 0.42);
+}
+.update-notification-kicker {
+  display: inline-block;
+  margin-bottom: 0.45rem;
+  color: var(--ok);
+  font-size: 0.72rem;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.update-notification h2 {
+  margin: 0 0 0.45rem;
+  font-size: 1.1rem;
+}
+.update-notification p {
+  margin: 0 0 0.65rem;
+  color: rgba(var(--ctp-text-rgb), 0.88);
+  line-height: 1.45;
+}
+.update-notification-detail {
+  font-size: 0.86rem;
+}
+.update-notification-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+  justify-content: flex-end;
+  margin-top: 0.85rem;
+}
+@keyframes update-notification-slide-down {
+  0% { opacity: 0; transform: translateY(-2.4rem); }
+  70% { opacity: 1; transform: translateY(0.18rem); }
+  100% { opacity: 1; transform: translateY(0); }
+}
 .side-panel-expand-button {
   position: fixed;
   top: 1rem;
@@ -1362,39 +1435,39 @@ body.side-panel-collapsed .terminal-tabs-shell {
   background: rgba(var(--ctp-subtext-rgb), 0.38);
   box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 0 0.45rem rgba(var(--ctp-subtext-rgb), 0.10);
 }
-.terminal-tab.activity-working .terminal-tab-activity-indicator {
+.terminal-tab.activity-working > .terminal-tab-button .terminal-tab-activity-indicator {
   background: var(--ctp-yellow);
   box-shadow: 0 0 0 1px rgba(249, 226, 175, 0.34), 0 0 0.8rem rgba(249, 226, 175, 0.52);
   animation: terminal-tab-working-pulse 1.15s ease-in-out infinite;
 }
-.terminal-tab.activity-blocked .terminal-tab-activity-indicator {
+.terminal-tab.activity-blocked > .terminal-tab-button .terminal-tab-activity-indicator {
   background: var(--ctp-peach);
   box-shadow: 0 0 0 1px rgba(250, 179, 135, 0.38), 0 0 0.85rem rgba(250, 179, 135, 0.58);
   animation: terminal-tab-working-pulse 1.35s ease-in-out infinite;
 }
-.terminal-tab.activity-done .terminal-tab-activity-indicator {
+.terminal-tab.activity-done > .terminal-tab-button .terminal-tab-activity-indicator {
   background: var(--ctp-green);
   box-shadow: 0 0 0 1px rgba(166, 227, 161, 0.34), 0 0 0.8rem rgba(166, 227, 161, 0.48);
 }
-.terminal-tab.stopped .terminal-tab-activity-indicator {
+.terminal-tab.stopped > .terminal-tab-button .terminal-tab-activity-indicator {
   background: var(--ctp-red);
   box-shadow: 0 0 0 1px rgba(243, 139, 168, 0.28), 0 0 0.6rem rgba(243, 139, 168, 0.24);
 }
-.terminal-tab-group-item.activity-working .terminal-tab-activity-indicator {
+.terminal-tab-group-item.activity-working > .terminal-tab-button .terminal-tab-activity-indicator {
   background: var(--ctp-yellow);
   box-shadow: 0 0 0 1px rgba(249, 226, 175, 0.34), 0 0 0.8rem rgba(249, 226, 175, 0.52);
   animation: terminal-tab-working-pulse 1.15s ease-in-out infinite;
 }
-.terminal-tab-group-item.activity-blocked .terminal-tab-activity-indicator {
+.terminal-tab-group-item.activity-blocked > .terminal-tab-button .terminal-tab-activity-indicator {
   background: var(--ctp-peach);
   box-shadow: 0 0 0 1px rgba(250, 179, 135, 0.38), 0 0 0.85rem rgba(250, 179, 135, 0.58);
   animation: terminal-tab-working-pulse 1.35s ease-in-out infinite;
 }
-.terminal-tab-group-item.activity-done .terminal-tab-activity-indicator {
+.terminal-tab-group-item.activity-done > .terminal-tab-button .terminal-tab-activity-indicator {
   background: var(--ctp-green);
   box-shadow: 0 0 0 1px rgba(166, 227, 161, 0.34), 0 0 0.8rem rgba(166, 227, 161, 0.48);
 }
-.terminal-tab-group-item.stopped .terminal-tab-activity-indicator {
+.terminal-tab-group-item.stopped > .terminal-tab-button .terminal-tab-activity-indicator {
   background: var(--ctp-red);
   box-shadow: 0 0 0 1px rgba(243, 139, 168, 0.28), 0 0 0.6rem rgba(243, 139, 168, 0.24);
 }
@@ -1426,17 +1499,17 @@ body.side-panel-collapsed .terminal-tabs-shell {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
   font-size: 0.68rem;
 }
-.terminal-tab.active .terminal-tab-title,
-.terminal-tab-group-item.active .terminal-tab-title {
+.terminal-tab.active > .terminal-tab-button .terminal-tab-title,
+.terminal-tab-group-item.active > .terminal-tab-button .terminal-tab-title {
   color: var(--ctp-teal);
   text-shadow: 0 0 0.8rem var(--glow-teal);
 }
-.terminal-tab.activity-working .terminal-tab-meta,
-.terminal-tab-group-item.activity-working .terminal-tab-meta { color: rgba(249, 226, 175, 0.82); }
-.terminal-tab.activity-blocked .terminal-tab-meta,
-.terminal-tab-group-item.activity-blocked .terminal-tab-meta { color: rgba(250, 179, 135, 0.88); }
-.terminal-tab.activity-done .terminal-tab-meta,
-.terminal-tab-group-item.activity-done .terminal-tab-meta { color: rgba(166, 227, 161, 0.82); }
+.terminal-tab.activity-working > .terminal-tab-button .terminal-tab-meta,
+.terminal-tab-group-item.activity-working > .terminal-tab-button .terminal-tab-meta { color: rgba(249, 226, 175, 0.82); }
+.terminal-tab.activity-blocked > .terminal-tab-button .terminal-tab-meta,
+.terminal-tab-group-item.activity-blocked > .terminal-tab-button .terminal-tab-meta { color: rgba(250, 179, 135, 0.88); }
+.terminal-tab.activity-done > .terminal-tab-button .terminal-tab-meta,
+.terminal-tab-group-item.activity-done > .terminal-tab-button .terminal-tab-meta { color: rgba(166, 227, 161, 0.82); }
 .terminal-tab-close {
   flex: 0 0 2.1rem;
   color: rgba(var(--ctp-subtext-rgb), 0.72);
@@ -3599,7 +3672,7 @@ button.composer-skill-tag:focus-visible {
   background: linear-gradient(180deg, rgba(137, 180, 250, 0.14), rgba(var(--ctp-crust-rgb), 0.86));
 }
 .command-suggest {
-  margin-top: 0.5rem;
+  margin: 0 0 0.5rem;
   max-height: 15rem;
   overflow: auto;
   background: rgba(var(--ctp-crust-rgb), 0.94);
@@ -5491,14 +5564,21 @@ button.composer-skill-tag:focus-visible {
   }
   .terminal-tab { min-width: min(11rem, 100%); max-width: 100%; flex: 1 1 9rem; }
   .terminal-tab-group {
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: stretch;
   }
   .terminal-tab-group:hover,
   .terminal-tab-group:focus-within,
   .terminal-tab-group.menu-open {
     flex-basis: 100%;
   }
+  .terminal-tab-group-button {
+    width: auto;
+    min-width: 0;
+  }
   .terminal-tab-group-menu {
+    grid-column: 1 / -1;
     position: static;
     flex-direction: column;
     flex-wrap: nowrap;
@@ -5506,7 +5586,7 @@ button.composer-skill-tag:focus-visible {
     max-width: none;
     max-height: none;
     min-width: 0;
-    margin: 0.34rem;
+    margin: 0.34rem 0 0;
     padding-top: 0;
     overflow: visible;
   }
@@ -5780,6 +5860,7 @@ button.composer-skill-tag:focus-visible {
   .composer {
     position: sticky;
     bottom: 0;
+    z-index: 50;
     padding: 0.55rem 0.55rem calc(0.55rem + env(safe-area-inset-bottom));
     background: linear-gradient(180deg, rgba(var(--ctp-crust-rgb), 0.92), rgba(var(--ctp-crust-rgb), 0.98));
     box-shadow: 0 -0.85rem 1.8rem rgba(var(--ctp-crust-rgb), 0.56), inset 0 1px 0 rgba(255,255,255,0.04);
@@ -5843,12 +5924,12 @@ button.composer-skill-tag:focus-visible {
     left: 0.55rem;
     right: 0.55rem;
     bottom: calc(100% + 0.42rem);
-    z-index: 8;
+    z-index: 55;
     display: none;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 0.45rem;
     max-height: min(42dvh, 22rem);
-    overflow: auto;
+    overflow: visible;
     padding: 0.68rem;
     border: 1px solid rgba(249, 226, 175, 0.24);
     border-radius: 0.95rem;
@@ -5881,8 +5962,17 @@ button.composer-skill-tag:focus-visible {
     font-size: 0.92rem;
   }
   body:not(.pi-run-active):not(.mobile-keyboard-open) .composer-row button.primary { grid-column: span 4; }
-  body.pi-run-active:not(.mobile-keyboard-open) .composer-abort-button:not([hidden]) { grid-column: span 2; }
-  body.pi-run-active:not(.mobile-keyboard-open) .composer-row button.primary { grid-column: span 4; }
+  body.pi-run-active:not(.mobile-keyboard-open) .composer-abort-button:not([hidden]) {
+    order: 1;
+    grid-column: span 2;
+  }
+  body.pi-run-active:not(.mobile-keyboard-open) .composer-row > #steerButton { order: 2; }
+  body.pi-run-active:not(.mobile-keyboard-open) .composer-row > #followUpButton { order: 3; }
+  body.pi-run-active:not(.mobile-keyboard-open) .composer-actions-button { order: 4; }
+  body.pi-run-active:not(.mobile-keyboard-open) .composer-row button.primary {
+    order: 5;
+    grid-column: span 4;
+  }
   .composer-row > #followUpButton,
   .composer-row > #steerButton,
   .composer-actions-button { grid-column: span 2; }
@@ -5896,31 +5986,49 @@ button.composer-skill-tag:focus-visible {
     width: 100%;
     margin-right: 0;
   }
+  .composer-actions-panel > .composer-publish-menu::after {
+    content: "";
+    position: absolute;
+    left: -0.32rem;
+    right: -0.32rem;
+    bottom: 100%;
+    display: none;
+    height: 0.8rem;
+    pointer-events: auto;
+  }
+  .composer-actions-panel > .composer-publish-menu:hover::after,
+  .composer-actions-panel > .composer-publish-menu:focus-within::after,
+  .composer-actions-panel > .composer-publish-menu.open::after {
+    display: block;
+  }
   .composer-actions-panel > .composer-publish-menu.open {
-    display: grid;
-    grid-column: 1 / -1;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 0.42rem;
+    z-index: 120;
   }
-  .composer-actions-panel > .composer-publish-menu.open .composer-publish-button,
-  .composer-actions-panel > .composer-publish-menu .composer-publish-menu-panel {
-    grid-column: 1 / -1;
+  .composer-actions-panel > .composer-publish-menu.open .composer-publish-button {
+    min-width: 0;
   }
   .composer-actions-panel > .composer-publish-menu .composer-publish-menu-panel {
-    position: static;
+    position: absolute;
+    inset: auto auto calc(100% + 0.38rem) 0;
     flex-direction: column;
     width: 100%;
     min-width: 0;
     max-width: 100%;
-    max-height: none;
-    margin-left: 0;
+    max-height: min(34dvh, 18rem);
+    margin: 0;
     padding-bottom: 0;
-    overflow: visible;
+    overflow: auto;
+  }
+  .composer-actions-panel > .composer-options-menu .composer-publish-menu-panel {
+    inset-inline: auto 0;
+    max-height: min(76dvh, 34rem);
   }
   .composer-actions-panel > .composer-publish-menu .composer-publish-menu-item {
     width: 100%;
+    min-width: 0;
     max-width: 100%;
-    flex: 1 1 0;
+    flex: 1 1 auto;
+    white-space: normal;
   }
   .command-suggest {
     max-height: 35dvh;

package/tests/mobile-static.test.mjs

@@ -106,6 +106,7 @@ assert.match(html, /id="stickyUserPromptButton"/, "chat should expose a fixed la
 assert.match(html, /id="feedbackTray"/, "chat should expose a queued action-feedback tray");
 assert.match(html, /id="sendFeedbackButton"/, "action feedback should be submittable after the agent finishes");
 assert.match(html, /<textarea id="promptInput"[^>]*rows="1"[^>]*enterkeyhint="enter"/, "prompt textarea should start at one row and hint that Return inserts a newline");
+assert.ok(html.includes('id="commandSuggest"') && html.indexOf('id="commandSuggest"') < html.indexOf('id="promptInput"'), "slash-command and @ path suggestions should render above the prompt input");
 assert.match(html, /id="busyPromptBehaviorTag"[\s\S]*class="composer-busy-mode-tag"[\s\S]*aria-controls="busyPromptBehaviorMenu"/, "composer should expose a clickable busy prompt behavior tag on the input frame");
 assert.doesNotMatch(html, /Busy send:/i, "busy prompt behavior tag should show only the current mode label");
 assert.match(html, /id="sessionSkillTags" class="composer-skill-tags"[\s\S]*hidden/, "composer should expose a hidden-until-used skill tag strip beside the busy mode tag");
@@ -175,7 +176,8 @@ assert.match(css, /button, select, input \{ min-height: 44px; \}/, "base control
 assert.match(css, /\.composer-row button[\s\S]*?min-height:\s*44px/, "mobile composer buttons should keep 44px touch targets");
 assert.match(css, /\.composer-abort-button,\n\.composer-row button\.primary \{[\s\S]*?min-width:/, "Abort and Send should share stable bottom-row sizing");
 assert.match(css, /\.composer-abort-button\.long-pressing::after[\s\S]*?animation:\s*abort-long-press-fill 700ms linear forwards/, "Abort should expose a visible long-press progress affordance");
-assert.match(css, /body\.pi-run-active:not\(\.mobile-keyboard-open\) \.composer-abort-button:not\(\[hidden\]\) \{ grid-column: span 2; \}/, "active mobile runs should keep Abort beside Send in the bottom controls");
+assert.match(css, /body\.pi-run-active:not\(\.mobile-keyboard-open\) \.composer-abort-button:not\(\[hidden\]\) \{\n\s+order:\s*1;\n\s+grid-column:\s*span 2;/, "active mobile runs should move Abort to the top row");
+assert.match(css, /body\.pi-run-active:not\(\.mobile-keyboard-open\) \.composer-actions-button \{ order:\s*4; \}[\s\S]*?body\.pi-run-active:not\(\.mobile-keyboard-open\) \.composer-row button\.primary \{\n\s+order:\s*5;\n\s+grid-column:\s*span 4;/, "active mobile runs should keep Actions beside Send on the bottom row");
 assert.match(css, /#promptInput \{[\s\S]*?min-height:\s*calc\(1\.5em \+ 1\.8rem\)/, "prompt input should default to a compact single-line height");
 assert.match(css, /#promptInput \{[\s\S]*?overflow-y:\s*hidden/, "prompt input should be JS-resized instead of showing a scrollbar by default");
 assert.match(css, /\.composer-context-tags \{[\s\S]*?top:\s*-0\.48rem;[\s\S]*?left:\s*0\.75rem;/, "busy prompt behavior and skill tags should sit at the top-left of the input frame");
@@ -243,6 +245,7 @@ assert.match(css, /\.command-item \{[\s\S]*?width:\s*100%/, "side-panel commands
 assert.match(css, /\.toggle-control \{[\s\S]*?grid-template-columns:\s*auto minmax\(0, 1fr\)/, "side-panel notification toggle should align checkbox and label text");
 assert.match(css, /\.toggle-control:has\(input:checked\)/, "side-panel notification toggle should style the enabled state");
 assert.match(css, /\.command-item:hover,[\s\S]*?\.command-item:focus-visible/, "side-panel commands should have hover and keyboard focus affordances");
+assert.match(css, /\.command-suggest \{\n\s+margin:\s*0 0 0\.5rem;[\s\S]*?max-height:\s*15rem/, "slash-command and @ path suggestions should reserve spacing below themselves above the prompt input");
 assert.match(css, /\.command-suggest-item:hover \{\n\s+box-shadow: none;\n\s+transform: none;\n\}\n\.command-suggest-item\.active \{/, "autocomplete hover should not render as the selected suggestion unless JS marks it active");
 assert.doesNotMatch(css, /\.command-suggest-item:hover,\n\.command-suggest-item\.active/, "autocomplete hover and active selection styles should stay separate");
 assert.match(css, /\.feedback-tray\[hidden\] \{ display: none; \}/, "queued action-feedback tray should hide when empty");
@@ -286,9 +289,11 @@ assert.match(css, /\.terminal-tab-group\.active \{[\s\S]*?background:[\s\S]*?var
 assert.match(css, /\.terminal-tab-group\.stopped \{[\s\S]*?opacity:\s*1/, "stopped terminal tab groups should not become transparent");
 assert.match(css, /\.terminal-tabs:has\(\.terminal-tab-group\.menu-open\)/, "open terminal tab groups should keep the tab strip usable across rerenders");
 assert.match(css, /\.terminal-tab-group\.menu-open \.terminal-tab-group-menu \{[\s\S]*?display:\s*flex/, "open terminal tab group menus should remain visible without hover");
-assert.match(css, /\.terminal-tab\.activity-working[\s\S]*?terminal-tab-working-pulse/, "working tab indicators should be visibly animated");
+assert.match(css, /\.terminal-tab\.activity-working > \.terminal-tab-button \.terminal-tab-activity-indicator[\s\S]*?terminal-tab-working-pulse/, "working tab indicators should be visibly animated");
+assert.match(css, /\.terminal-tab-group-item\.activity-working > \.terminal-tab-button \.terminal-tab-activity-indicator[\s\S]*?terminal-tab-working-pulse/, "working indicators should still animate on grouped tab menu items themselves");
 assert.match(css, /\.terminal-tab\.activity-blocked[\s\S]*?rgba\(250, 179, 135/, "blocked tab indicators should use orange styling");
-assert.match(css, /\.terminal-tab\.activity-blocked \.terminal-tab-activity-indicator[\s\S]*?background:\s*var\(--ctp-peach\)/, "blocked tab indicator dots should be orange");
+assert.match(css, /\.terminal-tab\.activity-blocked > \.terminal-tab-button \.terminal-tab-activity-indicator[\s\S]*?background:\s*var\(--ctp-peach\)/, "blocked tab indicator dots should be orange");
+assert.doesNotMatch(css, /\.terminal-tab\.activity-(?:working|blocked|done)\s+\.terminal-tab-activity-indicator/, "group status styling should not cascade into child tabs in the group menu");
 assert.match(css, /\.terminal-tab\.activity-done/, "completed unseen work should have a distinct tab style");
 assert.match(css, /\.terminal-tabs[\s\S]*?position:\s*absolute/, "expanded mobile tabs should overlay instead of consuming transcript space");
 assert.match(css, /body\.mobile-keyboard-open \.terminal-tabs-shell,[\s\S]*?body\.mobile-keyboard-open \.widget-area,[\s\S]*?body\.mobile-keyboard-open \.statusbar/, "mobile keyboard mode should hide header, widgets, and footer");
@@ -795,7 +800,18 @@ assert.match(app, /function syncLastUserPromptFromMessages\(messages = latestMes
 assert.match(app, /dataset\.compacted/, "sticky prompt should expose a compacted fallback state when its source message was summarized away");
 assert.match(app, /stickyUserPromptButton\?\.addEventListener\("click", jumpToStickyUserPrompt\)/, "last user prompt header should be clickable without breaking stale cached HTML");
 assert.match(app, /function setComposerActionsOpen\(/, "mobile composer actions panel should be JS-toggleable");
+assert.match(css, /@media \(max-width: 720px\), \(max-device-width: 720px\), \(pointer: coarse\) and \(hover: none\) \{[\s\S]*?\.composer \{[\s\S]*?z-index:\s*50;/, "mobile composer should stack above transcript reaction controls while Actions are open");
+assert.match(css, /\.composer-actions-panel \{[\s\S]*?z-index:\s*55;[\s\S]*?overflow:\s*visible;/, "mobile Actions panel should stay above message reactions and allow submenu overlays instead of clipping them into the panel layout");
+assert.match(css, /\.composer-actions-panel > \.composer-publish-menu\.open \{\n\s+z-index:\s*120;\n\s+\}/, "opened mobile Actions dropdowns should overlay neighboring controls without taking grid space");
+assert.match(css, /\.composer-actions-panel > \.composer-publish-menu::after \{[\s\S]*?bottom:\s*100%;[\s\S]*?height:\s*0\.8rem;[\s\S]*?pointer-events:\s*auto;/, "mobile Actions dropdowns should keep a hover bridge above the trigger and below the floating submenu");
+assert.match(css, /\.composer-actions-panel > \.composer-publish-menu:hover::after,[\s\S]*?\.composer-actions-panel > \.composer-publish-menu:focus-within::after,[\s\S]*?\.composer-actions-panel > \.composer-publish-menu\.open::after \{\n\s+display:\s*block;/, "mobile Actions dropdown hover bridge should activate while hovered, focused, or opened");
+assert.match(css, /\.composer-actions-panel > \.composer-publish-menu \.composer-publish-menu-panel \{[\s\S]*?position:\s*absolute;[\s\S]*?inset:\s*auto auto calc\(100% \+ 0\.38rem\) 0;[\s\S]*?max-height:\s*min\(34dvh, 18rem\);[\s\S]*?overflow:\s*auto;/, "opened mobile Actions dropdown panels should float upward over the Actions controls with their own scrollbar");
+assert.match(css, /\.composer-actions-panel > \.composer-publish-menu \.composer-publish-menu-panel \{[\s\S]*?width:\s*100%;[\s\S]*?min-width:\s*0;[\s\S]*?max-width:\s*100%;/, "mobile Actions dropdown panels should align to the width of their trigger buttons");
+assert.match(css, /\.composer-actions-panel > \.composer-publish-menu \.composer-publish-menu-item \{[\s\S]*?width:\s*100%;[\s\S]*?min-width:\s*0;[\s\S]*?white-space:\s*normal;/, "mobile Actions dropdown option buttons should not keep desktop min-widths that misalign with triggers");
+assert.match(css, /\.composer-actions-panel > \.composer-options-menu \.composer-publish-menu-panel \{[\s\S]*?inset-inline:\s*auto 0;[\s\S]*?max-height:\s*min\(76dvh, 34rem\);/, "mobile Options dropdown should be tall enough to avoid scrolling for the standard option list");
 assert.match(app, /function setMobileTabsExpanded\(/, "mobile tab strip should be JS-toggleable");
+assert.match(css, /@media \(max-width: 720px\), \(max-device-width: 720px\), \(pointer: coarse\) and \(hover: none\) \{[\s\S]*?\.terminal-tab-group \{\n\s+display:\s*grid;\n\s+grid-template-columns:\s*minmax\(0, 1fr\) auto;/, "mobile terminal tab groups should use a stable grid row for the tab and close button when expanded");
+assert.match(css, /@media \(max-width: 720px\), \(max-device-width: 720px\), \(pointer: coarse\) and \(hover: none\) \{[\s\S]*?\.terminal-tab-group-menu \{[\s\S]*?grid-column:\s*1 \/ -1;[\s\S]*?margin:\s*0\.34rem 0 0;/, "mobile terminal tab group menus should not add horizontal margins that overflow and distort the tab card");
 assert.match(app, /let openTerminalTabGroupKey = null/, "frontend should track the open terminal tab group across tab bar rerenders");
 assert.match(app, /function updateTerminalTabGroupOpenState\(\)/, "frontend should be able to reapply open terminal tab group state after rerenders");
 assert.match(app, /classList\.toggle\("terminal-tabs-dense", tabs\.length >= 10\)/, "frontend should enable dense tab layout before tab names become unreadable");