@firstpick/pi-package-webui 0.2.1 → 0.2.2

package/README.md

@@ -161,7 +161,7 @@ This requires `/git-staged-msg` from `@firstpick/pi-prompts-git-pr`. Review the
 ## Network safety
 
 - Default bind is localhost-only: `127.0.0.1:31415`.
-- The side-panel **Open to network** button rebinds the server to `0.0.0.0` and shows LAN URLs when available.
+- 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.
 - Treat Pi Web UI as a local companion, not a hardened multi-user web service.

package/bin/pi-webui.mjs

@@ -17,6 +17,7 @@ const packageRoot = path.resolve(__dirname, "..");
 const publicDir = path.join(packageRoot, "public");
 const packageJson = JSON.parse(await readFile(path.join(packageRoot, "package.json"), "utf8"));
 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);
 
 const DEFAULT_HOST = "127.0.0.1";
 const DEFAULT_PORT = 31415;
@@ -100,6 +101,15 @@ const MIME_TYPES = new Map([
   [".webmanifest", "application/manifest+json; charset=utf-8"],
 ]);
 
+function isTruthyEnv(value) {
+  return ["1", "true", "yes", "dev"].includes(String(value || "").trim().toLowerCase());
+}
+
+function isSourceCheckout(root) {
+  const normalized = String(root || "").replace(/\\/g, "/");
+  return normalized.includes("/npm-packages/") && !normalized.includes("/node_modules/");
+}
+
 function nativeParitySurfaces(matrix = nativeParityMatrix) {
   return Array.isArray(matrix?.surfaces) ? matrix.surfaces : [];
 }
@@ -2004,6 +2014,12 @@ if (options.version) {
   process.exit(0);
 }
 
+const startupDelayMs = Number.parseInt(process.env.PI_WEBUI_START_DELAY_MS || "", 10);
+delete process.env.PI_WEBUI_START_DELAY_MS;
+if (Number.isFinite(startupDelayMs) && startupDelayMs > 0) {
+  await delay(Math.min(startupDelayMs, 10_000));
+}
+
 const restoreTabs = readRestoreTabsFromEnv();
 
 function normalizedRestoreString(value, maxLength) {
@@ -2547,6 +2563,33 @@ function mergeRestorableTabDescriptors(...sources) {
     .slice(0, RESTORE_TAB_LIMIT);
 }
 
+async function restorableTabsForRestart() {
+  const liveDescriptors = await Promise.all([...tabs.values()].map(async (tab) => {
+    const state = await currentSessionState(tab).catch(() => tab.lastState || null);
+    return restorableTabDescriptor(tab, state);
+  }));
+  return mergeRestorableTabDescriptors(liveDescriptors, closedRestorableTabs);
+}
+
+function spawnRestartServer(restorableTabs) {
+  const env = {
+    ...process.env,
+    PI_WEBUI_RESTORE_TABS: JSON.stringify(restorableTabs || []),
+    PI_WEBUI_START_DELAY_MS: "1200",
+  };
+  if (webuiDevServer) env.PI_WEBUI_DEV = "1";
+  else delete env.PI_WEBUI_DEV;
+  const child = spawn(process.execPath, process.argv.slice(1), {
+    cwd: process.cwd(),
+    env,
+    detached: true,
+    stdio: "ignore",
+    windowsHide: true,
+  });
+  child.unref();
+  return child;
+}
+
 function rememberClosedRestorableTab(tab, state = null) {
   const descriptor = restorableTabDescriptor(tab, state);
   if (!descriptor) return;
@@ -3461,6 +3504,8 @@ async function webuiStatus({ detailed = false, eventLimit = 40 } = {}) {
   const data = {
     online: true,
     webuiVersion: packageJson.version,
+    webuiDev: webuiDevServer,
+    webuiMode: webuiDevServer ? "dev" : "production",
     webuiPid: process.pid,
     startedAt: serverStartedAt,
     cwd: options.cwd,
@@ -3537,6 +3582,8 @@ const server = createServer(async (req, res) => {
       sendSse(res, {
         type: "webui_connected",
         version: packageJson.version,
+        webuiDev: webuiDevServer,
+        webuiMode: webuiDevServer ? "dev" : "production",
         tabId: tab.id,
         tabTitle: tab.title,
         pid: tab.rpc.child?.pid,
@@ -3559,6 +3606,8 @@ const server = createServer(async (req, res) => {
       sendJson(res, 200, {
         ok: true,
         webuiVersion: status.webuiVersion,
+        webuiDev: status.webuiDev,
+        webuiMode: status.webuiMode,
         webuiPid: status.webuiPid,
         piPid: status.piPid,
         piRunning: status.piRunning,
@@ -3629,6 +3678,15 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/restart" && req.method === "POST") {
+      if (!isLocalAddress(req.socket.remoteAddress)) throw makeHttpError(403, "Restart is only allowed from localhost");
+      const restorableTabs = await restorableTabsForRestart();
+      const child = spawnRestartServer(restorableTabs);
+      sendJson(res, 200, { ok: true, message: "Pi Web UI restarting", webuiPid: process.pid, nextWebuiPid: child.pid, restorableTabCount: restorableTabs.length });
+      setTimeout(() => shutdown("api restart"), 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 });
@@ -3879,7 +3937,15 @@ server.listen(options.port, currentHost, () => {
 
 function shutdown(signal) {
   console.log(`\n${signal}: shutting down Pi Web UI...`);
-  server.close(() => process.exit(0));
+  const forceCloseTimer = setTimeout(() => {
+    server.closeAllConnections?.();
+  }, NETWORK_REBIND_FORCE_CLOSE_MS);
+  forceCloseTimer.unref?.();
+  server.close(() => {
+    clearTimeout(forceCloseTimer);
+    process.exit(0);
+  });
+  server.closeIdleConnections?.();
   for (const tab of tabs.values()) tab.rpc.stop();
   setTimeout(() => process.exit(0), 4000).unref();
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Pi Web UI companion package with a local browser UI CLI plus /webui-start and /webui-status commands.",
   "license": "MIT",
   "type": "module",

package/public/app.js

@@ -1,13 +1,16 @@
 const $ = (selector) => document.querySelector(selector);
 
 const elements = {
-  sessionLine: $("#sessionLine"),
+  webuiVersionBadge: $("#webuiVersionBadge"),
+  webuiDevBadge: $("#webuiDevBadge"),
   tabBar: $("#tabBar"),
   terminalTabsToggleButton: $("#terminalTabsToggleButton"),
   newTabButton: $("#newTabButton"),
   closeAllTabsButton: $("#closeAllTabsButton"),
   statusBar: $("#statusBar"),
   serverOfflinePanel: $("#serverOfflinePanel"),
+  serverRestartPanel: $("#serverRestartPanel"),
+  serverRestartMessage: $("#serverRestartMessage"),
   serverOfflineCommand: $("#serverOfflineCommand"),
   serverOfflineSlashCommand: $("#serverOfflineSlashCommand"),
   copyServerCommandButton: $("#copyServerCommandButton"),
@@ -60,7 +63,9 @@ const elements = {
   backgroundStatus: $("#backgroundStatus"),
   networkStatus: $("#networkStatus"),
   openNetworkButton: $("#openNetworkButton"),
-  stopServerButton: $("#stopServerButton"),
+  serverActionSelect: $("#serverActionSelect"),
+  runServerActionButton: $("#runServerActionButton"),
+  serverActionStatus: $("#serverActionStatus"),
   agentDoneNotificationsToggle: $("#agentDoneNotificationsToggle"),
   agentDoneNotificationsStatus: $("#agentDoneNotificationsStatus"),
   optionalFeaturesBox: $("#optionalFeaturesBox"),
@@ -150,12 +155,15 @@ let pathSuggestAbortController = null;
 let latestStats = null;
 let latestWorkspace = null;
 let latestNetwork = null;
+let webuiVersion = "";
+let webuiDevServer = false;
 let latestCodexUsage = null;
 let codexUsageError = null;
 let codexUsageLoading = false;
 let refreshCodexUsageTimer = null;
 let codexUsageRenderTimer = null;
 let backendOffline = false;
+let serverRestartInProgress = false;
 let backendOfflineNoticeShown = false;
 let latestMessages = [];
 let promptHistoryByTab = new Map();
@@ -263,6 +271,7 @@ const mobileViewMedia = window.matchMedia?.(MOBILE_VIEW_QUERY) || null;
 const statusEntries = new Map();
 const widgets = new Map();
 const todoProgressWidgetExpandedByTab = new Map();
+const releaseNpmOutputExpandedByTab = new Map();
 const liveToolRuns = new Map();
 const liveToolCards = new Map();
 const liveToolRenderQueue = new Map();
@@ -899,13 +908,22 @@ function renderServerOfflinePanel() {
   if (elements.serverOfflineSlashCommand) elements.serverOfflineSlashCommand.textContent = serverStartSlashCommandText();
 }
 
+function setServerRestartOverlay(active, message = "Waiting for the server to come back…") {
+  serverRestartInProgress = !!active;
+  document.body.classList.toggle("server-restarting", serverRestartInProgress);
+  if (elements.serverRestartPanel) elements.serverRestartPanel.hidden = !serverRestartInProgress;
+  if (elements.serverRestartMessage) elements.serverRestartMessage.textContent = message;
+  if (serverRestartInProgress && elements.serverOfflinePanel) elements.serverOfflinePanel.hidden = true;
+}
+
 function setBackendOffline(offline, error) {
   backendOffline = !!offline;
-  document.body.classList.toggle("server-offline", backendOffline);
-  if (elements.serverOfflinePanel) elements.serverOfflinePanel.hidden = !backendOffline;
+  const showOfflinePanel = backendOffline && !serverRestartInProgress;
+  document.body.classList.toggle("server-offline", showOfflinePanel);
+  if (elements.serverOfflinePanel) elements.serverOfflinePanel.hidden = !showOfflinePanel;
   renderServerOfflinePanel();
   if (backendOffline) {
-    if (!backendOfflineNoticeShown) {
+    if (!serverRestartInProgress && !backendOfflineNoticeShown) {
       backendOfflineNoticeShown = true;
       addEvent(`Pi Web UI server is offline${error?.message ? `: ${error.message}` : ""}`, "warn");
     }
@@ -1015,6 +1033,52 @@ async function api(path, { method = "GET", body, tabId = activeTabId, scoped = t
   return data;
 }
 
+function formatWebuiVersion(version) {
+  const text = String(version || "").trim();
+  if (!text) return "";
+  return text.startsWith("v") ? text : `v${text}`;
+}
+
+function isWebuiDevMetadata(data) {
+  return data?.webuiDev === true || String(data?.webuiMode || "").toLowerCase() === "dev";
+}
+
+function renderWebuiVersion() {
+  const badge = elements.webuiVersionBadge;
+  if (!badge) return;
+  const label = formatWebuiVersion(webuiVersion);
+  badge.hidden = !label;
+  badge.textContent = label;
+  if (label) badge.title = `Pi Web UI ${label}`;
+}
+
+function renderWebuiDevBadge() {
+  const badge = elements.webuiDevBadge;
+  if (!badge) return;
+  badge.hidden = !webuiDevServer;
+  badge.title = "Pi Web UI dev server";
+}
+
+function setWebuiVersion(version) {
+  const text = String(version || "").trim();
+  if (text === webuiVersion) return;
+  webuiVersion = text;
+  renderWebuiVersion();
+}
+
+function setWebuiDevServer(dev) {
+  const next = !!dev;
+  if (next === webuiDevServer) return;
+  webuiDevServer = next;
+  renderWebuiDevBadge();
+}
+
+async function refreshWebuiVersion() {
+  const health = await api("/api/health", { scoped: false });
+  setWebuiVersion(health.webuiVersion);
+  setWebuiDevServer(isWebuiDevMetadata(health));
+}
+
 function formatBytes(bytes) {
   const value = Number(bytes) || 0;
   if (value < 1024) return `${value} B`;
@@ -2357,7 +2421,6 @@ function resetActiveTabUi() {
   }
   elements.commandsBox.textContent = "Loading…";
   elements.commandsBox.classList.add("muted");
-  elements.sessionLine.textContent = activeTab() ? "Connecting…" : "No terminal tabs.";
   renderWidgets();
   renderGitWorkflow();
   renderFooter();
@@ -3899,13 +3962,6 @@ function renderStatus() {
   updateComposerModeButtons();
   const running = state?.isStreaming ? "running" : "idle";
   const compacting = state?.isCompacting ? " · compacting" : "";
-  const queue = state?.pendingMessageCount ? ` · queued ${state.pendingMessageCount}` : "";
-  const extra = [...statusEntries.entries()].map(([key, value]) => formatStatusEntry(key, value)).filter(Boolean).join(" · ");
-  const statusText = state?.isStreaming ? "Running" : "Idle";
-  const compactingText = state?.isCompacting ? " · Compacting" : "";
-  const queueText = state?.pendingMessageCount ? ` · Queue: ${state.pendingMessageCount}` : "";
-
-  elements.sessionLine.textContent = `Status: ${statusText}${compactingText}${queueText}${extra ? ` · ${extra}` : ""} · Model: ${modelLabel(state?.model)} · Session: ${shortSessionLabel(state)}`;
 
   elements.stateDetails.replaceChildren();
   const details = {
@@ -4181,6 +4237,26 @@ function releaseNpmStreamHeader(label, lineCount, { live = false } = {}) {
   return header;
 }
 
+function renderReleaseNpmOutputDetails(key, streamHeader, terminal, controls = null) {
+  const tabId = activeTabId || "default";
+  const stateKey = `${tabId}:${key}`;
+  const node = make("details", "release-npm-output-details");
+  node.open = releaseNpmOutputExpandedByTab.get(stateKey) !== false;
+  node.addEventListener("toggle", () => {
+    releaseNpmOutputExpandedByTab.set(stateKey, node.open);
+    if (node.open) requestAnimationFrame(() => { terminal.scrollTop = terminal.scrollHeight; });
+  });
+
+  const summary = make("summary", "release-npm-output-summary");
+  summary.title = "Expand or collapse command output in the Web UI";
+  const toggle = make("span", "release-npm-output-toggle", "›");
+  toggle.setAttribute("aria-hidden", "true");
+  summary.append(toggle, streamHeader);
+  node.append(summary, terminal);
+  if (controls) node.append(controls);
+  return node;
+}
+
 function renderReleaseNpmOutputWidget() {
   if (!isOptionalFeatureEnabled("releaseNpm")) return null;
   const outputLines = getWidgetLines("release-npm:output");
@@ -4216,8 +4292,9 @@ function renderReleaseNpmOutputWidget() {
   }
 
   const controls = make("div", "release-npm-controls", details.controls || "Controls: /release-toggle expands/collapses · /release-abort stops subprocess");
-  node.append(header, streamHeader, terminal, controls);
-  requestAnimationFrame(() => { terminal.scrollTop = terminal.scrollHeight; });
+  const outputDetails = renderReleaseNpmOutputDetails("release-npm:output", streamHeader, terminal, controls);
+  node.append(header, outputDetails);
+  requestAnimationFrame(() => { if (outputDetails.open) terminal.scrollTop = terminal.scrollHeight; });
   return node;
 }
 
@@ -4246,8 +4323,9 @@ function renderReleaseNpmLogWidget() {
   for (const line of logLines) {
     appendReleaseNpmTerminalLine(terminal, line);
   }
-  node.append(header, streamHeader, terminal);
-  requestAnimationFrame(() => { terminal.scrollTop = terminal.scrollHeight; });
+  const outputDetails = renderReleaseNpmOutputDetails("release-npm:logs", streamHeader, terminal);
+  node.append(header, outputDetails);
+  requestAnimationFrame(() => { if (outputDetails.open) terminal.scrollTop = terminal.scrollHeight; });
   return node;
 }
 
@@ -4286,8 +4364,9 @@ function renderReleaseAurOutputWidget() {
   }
 
   const controls = make("div", "release-npm-controls", details.controls || "Controls: /release-aur toggle expands/collapses · /release-aur abort stops subprocess");
-  node.append(header, streamHeader, terminal, controls);
-  requestAnimationFrame(() => { terminal.scrollTop = terminal.scrollHeight; });
+  const outputDetails = renderReleaseNpmOutputDetails("release-aur:output", streamHeader, terminal, controls);
+  node.append(header, outputDetails);
+  requestAnimationFrame(() => { if (outputDetails.open) terminal.scrollTop = terminal.scrollHeight; });
   return node;
 }
 
@@ -4316,8 +4395,9 @@ function renderReleaseAurLogWidget() {
   for (const line of logLines) {
     appendReleaseNpmTerminalLine(terminal, line);
   }
-  node.append(header, streamHeader, terminal);
-  requestAnimationFrame(() => { terminal.scrollTop = terminal.scrollHeight; });
+  const outputDetails = renderReleaseNpmOutputDetails("release-aur:logs", streamHeader, terminal);
+  node.append(header, outputDetails);
+  requestAnimationFrame(() => { if (outputDetails.open) terminal.scrollTop = terminal.scrollHeight; });
   return node;
 }
 
@@ -8293,6 +8373,7 @@ async function refreshAll(tabContext = activeTabContext()) {
     refreshStats(tabContext),
     refreshWorkspace(tabContext),
     refreshNetworkStatus(),
+    refreshWebuiVersion(),
   ]);
   if (!isCurrentTabContext(tabContext)) return;
   for (const result of results) {
@@ -8404,12 +8485,108 @@ async function closeNetworkAccess() {
   }
 }
 
+function setServerActionStatus(message = "", level = "info") {
+  const status = elements.serverActionStatus;
+  if (!status) return;
+  status.textContent = message;
+  status.hidden = !message;
+  status.className = `server-action-status ${level} ${message ? "" : "muted"}`.trim();
+}
+
+function updateServerActionButton() {
+  const action = elements.serverActionSelect?.value || "";
+  const button = elements.runServerActionButton;
+  if (!button) return;
+  button.disabled = !action;
+  button.textContent = action === "restart" ? "Restart" : 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");
+  else setServerActionStatus();
+}
+
+function setServerActionBusy(label) {
+  if (elements.serverActionSelect) elements.serverActionSelect.disabled = true;
+  if (elements.runServerActionButton) {
+    elements.runServerActionButton.disabled = true;
+    elements.runServerActionButton.textContent = label;
+  }
+}
+
+function resetServerActionControls() {
+  if (elements.serverActionSelect) {
+    elements.serverActionSelect.disabled = false;
+    elements.serverActionSelect.value = "";
+  }
+  updateServerActionButton();
+}
+
+async function waitForServerRestart() {
+  for (let attempt = 0; attempt < 40; attempt++) {
+    await delay(attempt === 0 ? 900 : 500);
+    const message = `Restarting… reconnect attempt ${attempt + 1}/40`;
+    setServerActionStatus(message, "warn");
+    setServerRestartOverlay(true, message);
+    try {
+      await api("/api/health", { scoped: false });
+      setBackendOffline(false);
+      await initializeTabs();
+      setServerRestartOverlay(false);
+      setServerActionStatus("Server restarted and reconnected.", "success");
+      addEvent("Pi Web UI server restarted", "warn");
+      return true;
+    } catch (error) {
+      setBackendOffline(true, error);
+    }
+  }
+  return false;
+}
+
+async function restartServer() {
+  if (!confirm("Restart the Pi Web UI server?\n\nThis briefly disconnects browser clients and restarts the Pi tabs managed by this Web UI.")) return;
+
+  setServerActionBusy("Restarting…");
+  setServerActionStatus("Restart requested. Waiting for the server to come back…", "warn");
+  setServerRestartOverlay(true, "Restart requested. Waiting for the server to come back…");
+  try {
+    await api("/api/restart", { method: "POST", scoped: false });
+    addEvent("Pi Web UI server restart requested", "warn");
+  } catch (error) {
+    if (!error?.backendOffline) {
+      const missingRestartEndpoint = error.statusCode === 404 || /not found/i.test(error.message || "");
+      const message = missingRestartEndpoint
+        ? "Restart is not available in the currently running server. Stop/start manually once to load the new backend."
+        : error.message || String(error);
+      addEvent(message, "error");
+      setServerRestartOverlay(false);
+      resetServerActionControls();
+      setServerActionStatus(message, "error");
+      return;
+    }
+    addEvent("Pi Web UI server connection dropped during restart request", "warn");
+  }
+
+  setBackendOffline(true, new Error("restart requested from side panel"));
+  const restarted = await waitForServerRestart();
+  if (elements.serverActionSelect) {
+    elements.serverActionSelect.disabled = false;
+    elements.serverActionSelect.value = "";
+  }
+  updateServerActionButton();
+  if (restarted) {
+    setServerActionStatus("Server restarted and reconnected.", "success");
+  } else {
+    setServerRestartOverlay(false);
+    setBackendOffline(true, new Error("restart reconnect timed out"));
+    setServerActionStatus("Restart requested, but the server did not reconnect automatically.", "error");
+    addEvent("Pi Web UI server did not come back online after restart request", "error");
+  }
+}
+
 async function stopServer() {
   if (!confirm("Stop the Pi Web UI server?\n\nThis disconnects all browser clients and stops the Pi tabs managed by this Web UI.")) return;
 
-  const button = elements.stopServerButton;
-  button.disabled = true;
-  button.textContent = "Stopping…";
+  setServerActionBusy("Stopping…");
+  setServerActionStatus("Stop requested. The Web UI will disconnect.", "warn");
   try {
     await api("/api/shutdown", { method: "POST", scoped: false });
     addEvent("Pi Web UI server stop requested", "warn");
@@ -8421,11 +8598,17 @@ async function stopServer() {
       return;
     }
     addEvent(error.message || String(error), "error");
-    button.disabled = false;
-    button.textContent = "Stop Server";
+    resetServerActionControls();
+    setServerActionStatus(error.message || String(error), "error");
   }
 }
 
+async function runSelectedServerAction() {
+  const action = elements.serverActionSelect?.value || "";
+  if (action === "restart") await restartServer();
+  else if (action === "stop") await stopServer();
+}
+
 function appShortcutModelLabel(model) {
   return model ? `${model.provider}/${model.id}` : "unknown model";
 }
@@ -8840,8 +9023,11 @@ function showNextDialog() {
       button.type = "button";
       if (isGuardrailDialog && /^Block$/i.test(optionLabel)) button.classList.add("guardrail-safe-action");
       if (isGuardrailDialog && /^Allow/i.test(optionLabel)) button.classList.add("guardrail-allow-action");
-      if (isReleaseDialog && /^Yes$/i.test(optionLabel)) button.classList.add("primary", "release-publish-action");
-      if (isReleaseDialog && /^No$/i.test(optionLabel)) button.classList.add("release-cancel-action");
+      if (isReleaseDialog && /^(?:Yes|All eligible packages\b|Publish selected packages \([1-9]\d*\))/.test(optionLabel)) button.classList.add("primary", "release-publish-action");
+      if (isReleaseDialog && /^Publish selected packages \(select at least one\)$/i.test(optionLabel)) button.classList.add("release-publish-disabled-action");
+      if (isReleaseDialog && /^\[x\]/.test(optionLabel)) button.classList.add("release-target-option", "release-target-selected");
+      if (isReleaseDialog && /^\[ \]/.test(optionLabel)) button.classList.add("release-target-option");
+      if (isReleaseDialog && /^(?:No|Cancel)$/i.test(optionLabel)) button.classList.add("release-cancel-action");
       button.addEventListener("click", () => sendDialogResponse({ type: "extension_ui_response", id: request.id, value: optionLabel, tabId: request.tabId }));
       options.append(button);
     }
@@ -8889,6 +9075,8 @@ function handleEvent(event) {
   const tabContext = activeTabContext(event.tabId || activeTabId);
   switch (event.type) {
     case "webui_connected":
+      setWebuiVersion(event.version);
+      setWebuiDevServer(isWebuiDevMetadata(event));
       addEvent(`connected to ${event.tabTitle || "terminal"} for ${event.cwd}`);
       scheduleForegroundReconcile("event stream reconnect", 0);
       break;
@@ -9299,7 +9487,9 @@ if (elements.backgroundClearButton) {
   elements.backgroundClearButton.addEventListener("click", () => clearCustomBackground().catch((error) => addEvent(error.message || String(error), "error")));
 }
 elements.openNetworkButton.addEventListener("click", openToNetwork);
-elements.stopServerButton.addEventListener("click", stopServer);
+elements.serverActionSelect.addEventListener("change", updateServerActionButton);
+elements.runServerActionButton.addEventListener("click", () => runSelectedServerAction().catch((error) => addEvent(error.message || String(error), "error")));
+updateServerActionButton();
 elements.agentDoneNotificationsToggle.addEventListener("change", () => {
   setAgentDoneNotificationsEnabled(elements.agentDoneNotificationsToggle.checked, {
     requestPermission: elements.agentDoneNotificationsToggle.checked,

package/public/index.html

@@ -36,6 +36,15 @@
       </div>
     </section>
 
+    <section id="serverRestartPanel" class="server-restart-panel" aria-live="assertive" hidden>
+      <div class="server-restart-card" role="status">
+        <div class="server-restart-spinner" aria-hidden="true"></div>
+        <span class="server-restart-kicker">Restarting</span>
+        <h1>Restarting Pi Web UI server</h1>
+        <p id="serverRestartMessage">Waiting for the server to come back…</p>
+      </div>
+    </section>
+
     <main class="layout">
       <section class="chat-panel">
         <header class="terminal-tabs-shell">
@@ -151,8 +160,11 @@
         <div class="side-panel-header">
           <div>
             <span class="side-panel-kicker">Pi Web UI</span>
-            <strong>Control Deck</strong>
-            <p id="sessionLine" class="side-panel-session-line muted">Connecting…</p>
+            <strong class="side-panel-title">
+              <span>Control Deck</span>
+              <span id="webuiVersionBadge" class="webui-version-badge" aria-label="Pi Web UI version" hidden></span>
+              <span id="webuiDevBadge" class="webui-dev-badge" aria-label="Pi Web UI dev server" hidden>DEV</span>
+            </strong>
           </div>
           <button id="toggleSidePanelButton" class="side-panel-toggle-button" type="button" aria-controls="sidePanel" aria-expanded="true" aria-label="Collapse side panel" title="Collapse side panel">
             <span class="side-panel-button-icon" aria-hidden="true">
@@ -217,8 +229,16 @@
                   <button id="openNetworkButton" type="button">Open to network</button>
                 </div>
                 <div class="control-field server-control-field">
-                  <label>Server</label>
-                  <button id="stopServerButton" class="danger" type="button" title="Stop the Pi Web UI server and disconnect all browser clients" aria-label="Stop the Pi Web UI server">Stop Server</button>
+                  <label for="serverActionSelect">Server</label>
+                  <div class="server-action-row">
+                    <select id="serverActionSelect" title="Server action" aria-label="Server action">
+                      <option value="" selected>Choose action…</option>
+                      <option value="restart">Restart Server</option>
+                      <option value="stop">Stop Server</option>
+                    </select>
+                    <button id="runServerActionButton" type="button" disabled>Run</button>
+                  </div>
+                  <div id="serverActionStatus" class="server-action-status muted" role="status" aria-live="polite"></div>
                 </div>
                 <div class="control-field notification-control-field">
                   <span class="control-label">Notifications</span>

package/public/service-worker.js

@@ -1,4 +1,4 @@
-const CACHE_NAME = "pi-webui-pwa-v16";
+const CACHE_NAME = "pi-webui-pwa-v18";
 const APP_SHELL = [
   "/",
   "/index.html",

package/public/styles.css

@@ -375,6 +375,65 @@ body.server-offline .layout {
   filter: blur(2px);
   pointer-events: none;
 }
+.server-restart-panel[hidden] {
+  display: none !important;
+}
+.server-restart-panel {
+  position: fixed;
+  inset: 1rem;
+  z-index: 62;
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  pointer-events: none;
+}
+.server-restart-card {
+  position: relative;
+  display: grid;
+  justify-items: center;
+  width: min(34rem, 100%);
+  pointer-events: auto;
+  padding: clamp(1.35rem, 4vw, 2.2rem);
+  text-align: center;
+  border: 1px solid rgba(148, 226, 213, 0.34);
+  border-radius: 1.2rem;
+  background:
+    radial-gradient(circle at 50% 0, rgba(148, 226, 213, 0.18), transparent 18rem),
+    linear-gradient(145deg, rgba(var(--ctp-base-rgb), 0.96), rgba(var(--ctp-crust-rgb), 0.98));
+  box-shadow: 0 1.2rem 4rem rgba(var(--ctp-crust-rgb), 0.74), 0 0 2rem rgba(148, 226, 213, 0.14), inset 0 1px 0 rgba(255,255,255,0.07);
+}
+.server-restart-spinner {
+  width: 2.8rem;
+  height: 2.8rem;
+  margin-bottom: 0.9rem;
+  border: 0.22rem solid rgba(148, 226, 213, 0.18);
+  border-top-color: var(--ctp-teal);
+  border-radius: 999px;
+  animation: server-restart-spin 900ms linear infinite;
+}
+.server-restart-kicker {
+  color: var(--ctp-teal);
+  font-size: 0.76rem;
+  font-weight: 900;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.server-restart-card h1 {
+  margin: 0.35rem 0 0.45rem;
+  font-size: clamp(1.35rem, 4vw, 2rem);
+}
+.server-restart-card p {
+  margin: 0;
+  color: rgba(var(--ctp-subtext-rgb), 0.9);
+}
+body.server-restarting .layout {
+  opacity: 0.56;
+  filter: blur(1.5px);
+  pointer-events: none;
+}
+@keyframes server-restart-spin {
+  to { transform: rotate(360deg); }
+}
 .side-panel-expand-button {
   position: fixed;
   top: 1rem;
@@ -504,13 +563,36 @@ body.side-panel-collapsed .terminal-tabs-shell {
   color: var(--ctp-text);
   letter-spacing: 0.03em;
 }
-.side-panel-session-line {
-  margin: 0.34rem 0 0;
-  max-width: 17rem;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-size: 0.76rem;
+.side-panel-header .side-panel-title {
+  display: flex;
+  align-items: center;
+  gap: 0.46rem;
+  flex-wrap: wrap;
+}
+.webui-version-badge,
+.webui-dev-badge {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.18rem;
+  padding: 0.05rem 0.44rem;
+  border: 1px solid rgba(180, 190, 254, 0.24);
+  border-radius: 999px;
+  color: var(--ctp-subtext);
+  background: rgba(var(--ctp-surface-rgb), 0.74);
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+  line-height: 1;
+}
+.webui-dev-badge {
+  border-color: rgba(249, 226, 175, 0.38);
+  color: var(--ctp-yellow);
+  background: rgba(249, 226, 175, 0.12);
+  box-shadow: 0 0 0.7rem rgba(249, 226, 175, 0.1);
+}
+.webui-version-badge[hidden],
+.webui-dev-badge[hidden] {
+  display: none;
 }
 .side-panel-kicker {
   display: block;
@@ -647,6 +729,35 @@ body.side-panel-collapsed .terminal-tabs-shell {
   gap: 0.42rem;
   align-items: center;
 }
+.server-action-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: 0.42rem;
+  align-items: center;
+}
+.server-action-row button {
+  width: auto;
+  min-width: 4.4rem;
+}
+.server-action-status {
+  min-height: 1.05rem;
+  color: rgba(var(--ctp-subtext-rgb), 0.82);
+  font-size: 0.72rem;
+  font-weight: 750;
+  line-height: 1.35;
+}
+.server-action-status.warn {
+  color: var(--ctp-yellow);
+}
+.server-action-status.error {
+  color: var(--ctp-red);
+}
+.server-action-status.success {
+  color: var(--ctp-green);
+}
+.server-action-status[hidden] {
+  display: none;
+}
 .background-clear-button {
   width: 44px !important;
   min-width: 44px !important;
@@ -1311,6 +1422,15 @@ body.side-panel-collapsed .terminal-tabs-shell {
   color: rgba(var(--ctp-text-rgb), 0.78);
   background: linear-gradient(90deg, rgba(203, 166, 247, 0.10), rgba(137, 180, 250, 0.05), rgba(148, 226, 213, 0.08));
 }
+.widget-area:has(.release-npm-live-widget .release-npm-output-details[open]),
+.widget-area:has(.release-aur-live-widget .release-npm-output-details[open]) {
+  flex: 0 0 min(44rem, 68dvh);
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  scrollbar-gutter: stable;
+  overflow-anchor: none;
+}
 .statusbar {
   position: relative;
   flex: 0 0 auto;
@@ -1806,6 +1926,52 @@ button.footer-meta {
   text-transform: none;
   white-space: nowrap;
 }
+.release-npm-output-details {
+  display: grid;
+  gap: 0.58rem;
+  min-width: 0;
+}
+.release-npm-output-summary {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.38rem;
+  min-width: 0;
+  color: rgba(var(--ctp-text-rgb), 0.92);
+  cursor: pointer;
+  list-style: none;
+}
+.release-npm-output-summary::-webkit-details-marker { display: none; }
+.release-npm-output-summary:focus-visible {
+  outline: 2px solid rgba(137, 180, 250, 0.72);
+  outline-offset: 0.18rem;
+  border-radius: 0.72rem;
+}
+.release-npm-output-summary:hover .release-npm-stream-header,
+.release-npm-output-summary:focus-visible .release-npm-stream-header {
+  border-color: rgba(137, 180, 250, 0.54);
+  box-shadow: inset 0 0 0 1px rgba(137, 180, 250, 0.08), 0 0 0.8rem rgba(137, 180, 250, 0.08);
+}
+.release-npm-output-toggle {
+  display: inline-grid;
+  place-items: center;
+  width: 1rem;
+  height: 1rem;
+  flex: 0 0 auto;
+  color: rgba(var(--ctp-subtext-rgb), 0.78);
+  font-size: 1rem;
+  font-weight: 950;
+  line-height: 1;
+  transition: transform 0.16s ease, color 0.16s ease;
+}
+.release-npm-output-details[open] .release-npm-output-toggle {
+  color: var(--ctp-blue);
+  transform: rotate(90deg);
+}
+.release-npm-output-summary .release-npm-stream-header {
+  min-width: 0;
+  width: 100%;
+}
 .release-npm-terminal {
   max-height: min(34rem, 42vh);
   min-height: 5.25rem;
@@ -1825,6 +1991,11 @@ button.footer-meta {
   line-height: 1.5;
   overscroll-behavior: contain;
 }
+.release-npm-live-widget .release-npm-output-details[open] .release-npm-terminal,
+.release-aur-live-widget .release-npm-output-details[open] .release-npm-terminal {
+  height: clamp(15rem, 42dvh, 31rem);
+  min-height: 0;
+}
 .release-npm-line {
   display: block;
   width: max-content;
@@ -3189,6 +3360,28 @@ summary { cursor: pointer; color: var(--warning); }
   text-align: center;
   font-weight: 800;
 }
+.extension-dialog.release-dialog .dialog-options button.release-publish-disabled-action {
+  color: rgba(var(--ctp-subtext-rgb), 0.72);
+  border-color: rgba(var(--ctp-overlay-rgb), 0.32);
+  background: linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.58), rgba(var(--ctp-crust-rgb), 0.72));
+}
+.extension-dialog.release-dialog .dialog-options button.release-target-option {
+  text-align: left;
+  border-color: rgba(137, 180, 250, 0.34);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+  font-size: 0.78rem;
+  line-height: 1.35;
+  overflow-wrap: anywhere;
+  white-space: normal;
+}
+.extension-dialog.release-dialog .dialog-options button.release-target-selected {
+  color: var(--ctp-green);
+  border-color: rgba(166, 227, 161, 0.58);
+  background:
+    linear-gradient(120deg, rgba(166, 227, 161, 0.16), rgba(137, 180, 250, 0.08)),
+    linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.80), rgba(var(--ctp-crust-rgb), 0.78));
+  box-shadow: 0 0 1rem rgba(166, 227, 161, 0.14);
+}
 .extension-dialog.release-dialog .dialog-options button.release-cancel-action {
   border-color: rgba(249, 226, 175, 0.38);
   color: var(--ctp-yellow);

package/start-webui.sh

@@ -183,51 +183,10 @@ connect_host_for_port() {
   esac
 }
 
-open_url() {
+print_manual_url() {
   local url="$1"
-  local platform=""
-  platform="$(uname -s 2>/dev/null || true)"
 
-  case "$platform" in
-    MINGW*|MSYS*|CYGWIN*)
-      if command -v cmd.exe >/dev/null 2>&1; then
-        cmd.exe /c start "" "$url" </dev/null >/dev/null 2>&1 &
-        return 0
-      fi
-      if command -v powershell.exe >/dev/null 2>&1; then
-        powershell.exe -NoProfile -Command 'Start-Process -FilePath $args[0]' "$url" </dev/null >/dev/null 2>&1 &
-        return 0
-      fi
-      ;;
-    Linux*)
-      if grep -qi microsoft /proc/version 2>/dev/null; then
-        if command -v wslview >/dev/null 2>&1; then
-          wslview "$url" </dev/null >/dev/null 2>&1 &
-          return 0
-        fi
-        if command -v cmd.exe >/dev/null 2>&1; then
-          cmd.exe /c start "" "$url" </dev/null >/dev/null 2>&1 &
-          return 0
-        fi
-      fi
-      ;;
-  esac
-
-  if command -v xdg-open >/dev/null 2>&1; then
-    xdg-open "$url" </dev/null >/dev/null 2>&1 &
-  elif command -v open >/dev/null 2>&1; then
-    open "$url" </dev/null >/dev/null 2>&1 &
-  elif command -v wslview >/dev/null 2>&1; then
-    wslview "$url" </dev/null >/dev/null 2>&1 &
-  elif command -v cmd.exe >/dev/null 2>&1; then
-    cmd.exe /c start "" "$url" </dev/null >/dev/null 2>&1 &
-  elif command -v powershell.exe >/dev/null 2>&1; then
-    powershell.exe -NoProfile -Command 'Start-Process -FilePath $args[0]' "$url" </dev/null >/dev/null 2>&1 &
-  else
-    echo "Could not find a browser opener. Open manually:" >&2
-    echo "  $url" >&2
-    return 1
-  fi
+  echo "Open manually: $url"
 }
 
 http_ok() {
@@ -456,8 +415,7 @@ main() {
     if [[ "$dev_mode" -eq 1 ]]; then
       echo "--dev only affects newly started servers; stop the existing server first to run this checkout."
     fi
-    echo "Opening: $target_url"
-    open_url "$target_url" || true
+    print_manual_url "$target_url"
     exit 0
   fi
 
@@ -474,10 +432,12 @@ main() {
   if [[ "$dev_mode" -eq 1 ]]; then
     local_webui_bin="$(local_pi_webui_bin)"
     webui_cmd=(node "$local_webui_bin")
+    export PI_WEBUI_DEV=1
     echo "Dev mode: using local Pi Web UI server: $local_webui_bin"
   else
     ensure_pi_webui
     webui_cmd=("$PI_WEBUI_COMMAND")
+    unset PI_WEBUI_DEV
   fi
 
   echo "Starting Pi Web UI in: $cwd"
@@ -491,7 +451,8 @@ main() {
   trap 'cleanup; exit 143' TERM
 
   if wait_until_ready "$url" "$SERVER_PID"; then
-    open_url "$url" || true
+    echo "Pi Web UI is ready."
+    print_manual_url "$url"
   else
     ready_status="$?"
     if [[ "$ready_status" -eq 2 ]]; then
@@ -500,8 +461,8 @@ main() {
       exit $?
     fi
 
-    echo "Server did not respond yet; opening the URL anyway." >&2
-    open_url "$url" || true
+    echo "Server did not respond yet; not opening a browser automatically." >&2
+    print_manual_url "$url"
   fi
 
   wait "$SERVER_PID"

package/tests/mobile-static.test.mjs

@@ -41,11 +41,15 @@ assert.match(html, /<link rel="apple-touch-icon" href="\/apple-touch-icon\.png"
 assert.match(html, /id="terminalTabsToggleButton"/, "mobile should expose a compact terminal-tabs toggle");
 assert.match(html, /id="closeAllTabsButton"[\s\S]*?>Close all Tabs<\/button>/, "tab header should expose a top-right close-all tabs action");
 assert.match(html, /id="sidePanelBackdrop"/, "mobile side panel needs an overlay/backdrop close target");
+assert.match(html, /<strong class="side-panel-title">[\s\S]*Control Deck[\s\S]*id="webuiVersionBadge"[\s\S]*id="webuiDevBadge"/, "Control Deck title should expose Web UI version and dev badges");
+assert.doesNotMatch(html, /id="sessionLine"/, "Control Deck title should not show verbose session status metadata");
 assert.match(html, /id="themeSelect"/, "side panel should expose a theme selector");
 assert.match(html, /<label for="themeSelect">Theme<\/label>/, "theme selector should be labeled in side-panel controls");
 assert.match(html, /id="backgroundInput"[^>]*type="file"[^>]*accept="image\/png,image\/jpeg,image\/webp,image\/gif"/, "side panel should expose an image picker for custom backgrounds");
 assert.match(html, /id="backgroundClearButton"[\s\S]*?>×<\/button>/, "side-panel background control should expose an X remove button");
-assert.match(html, /id="stopServerButton"[^>]*?>Stop Server<\/button>/, "side panel should expose a Stop Server button");
+assert.match(html, /id="serverActionSelect"[\s\S]*<option value="restart">Restart Server<\/option>[\s\S]*<option value="stop">Stop Server<\/option>/, "side panel should expose restart and stop server actions in a dropdown");
+assert.match(html, /id="runServerActionButton"[^>]*disabled[^>]*>Run<\/button>/, "side panel should expose a guarded button for selected server actions");
+assert.match(html, /id="serverActionStatus"[^>]*aria-live="polite"/, "server actions should expose visible restart feedback");
 assert.match(html, /id="agentDoneNotificationsToggle"/, "side panel should expose an agent-done notifications toggle");
 assert.match(html, /id="agentDoneNotificationsStatus"/, "agent-done notifications toggle should expose status text");
 assert.match(html, /id="thinkingVisibilityToggle"/, "side panel should expose a thinking-output visibility toggle");
@@ -56,6 +60,7 @@ assert.match(html, /id="optionalFeaturesBox"/, "side panel should expose optiona
 assert.match(html, /id="codexUsageBox"/, "side panel should expose Codex subscription usage status");
 assert.match(html, /data-side-panel-section="codex-usage"/, "Codex usage should live in a collapsible side-panel section");
 assert.match(html, /id="serverOfflinePanel"/, "PWA/offline shell should expose a backend-offline recovery panel");
+assert.match(html, /id="serverRestartPanel"[\s\S]*id="serverRestartMessage"/, "server restart should expose a loading overlay instead of the generic offline shell");
 assert.match(html, /id="copyServerCommandButton"/, "backend-offline recovery panel should expose a start-command copy button");
 assert.match(html, /id="retryServerConnectionButton"/, "backend-offline recovery panel should expose a retry button");
 assert.match(html, /data-side-panel-section="controls"/, "side panel controls should live in a collapsible section");
@@ -135,6 +140,10 @@ assert.match(css, /\.message-collapse\[open\] \+ \.tool-result-preview \{[\s\S]*
 assert.match(css, /\.run-indicator-pulse \{[\s\S]*?animation:\s*run-indicator-pulse/, "active agent run indicator should have an animated pulse");
 assert.match(css, /\.optional-features-box \{[\s\S]*?display:\s*grid/, "optional features should render as a side-panel feature list");
 assert.match(css, /\.side-panel-section-toggle \{[\s\S]*?justify-content:\s*space-between/, "side panel section toggles should align labels and chevrons");
+assert.match(css, /\.server-restart-panel \{[\s\S]*?z-index:\s*62/, "server restart overlay should render above the offline shell");
+assert.match(css, /@keyframes server-restart-spin/, "server restart overlay should show a loading spinner");
+assert.match(css, /\.webui-version-badge,\n\.webui-dev-badge \{[\s\S]*?border-radius:\s*999px/, "Web UI version and dev indicators should render as compact title badges");
+assert.match(css, /\.webui-dev-badge \{[\s\S]*?color:\s*var\(--ctp-yellow\)/, "Web UI dev indicator should have distinct warning styling");
 assert.match(css, /\.side-panel-section\.collapsed \.side-panel-section-content,\n\.side-panel-section-content\[hidden\] \{\n\s+display:\s*none;/, "collapsed side panel section content should be hidden");
 assert.match(css, /\.side-panel-section:not\(\.collapsed\) \.side-panel-section-chevron/, "expanded side panel sections should rotate the chevron");
 assert.match(css, /\.optional-feature-pill\.enabled/, "optional features should visually distinguish enabled state");
@@ -145,6 +154,10 @@ assert.match(css, /\.todo-widget-item\.partial \.todo-widget-marker/, "todo-prog
 assert.match(css, /\.todo-widget-item\.done \.todo-widget-text[\s\S]*?text-decoration:\s*line-through/, "todo-progress completed items should be visually crossed out");
 assert.match(css, /\.release-npm-widget \{[\s\S]*?border-left:\s*0\.28rem solid/, "release-npm output should stand apart from the page background");
 assert.match(css, /\.release-npm-stream-header \{[\s\S]*?text-transform:\s*uppercase/, "release-npm output should label the output stream clearly");
+assert.match(css, /\.release-npm-output-summary \{[\s\S]*?cursor:\s*pointer/, "release-npm output should expose a local expand/collapse summary");
+assert.match(css, /\.release-npm-output-details\[open\] \.release-npm-output-toggle/, "release-npm expanded output should rotate the summary chevron");
+assert.match(css, /\.widget-area:has\(\.release-npm-live-widget \.release-npm-output-details\[open\]\)[\s\S]*?flex:\s*0 0 min\(44rem, 68dvh\)/, "live release output should reserve a stable widget slot instead of resizing the transcript while streaming");
+assert.match(css, /\.release-npm-live-widget \.release-npm-output-details\[open\] \.release-npm-terminal,[\s\S]*?height:\s*clamp\(15rem, 42dvh, 31rem\)/, "live release terminals should keep a fixed viewport height while output streams");
 assert.match(css, /\.release-npm-terminal \{[\s\S]*?rgba\(3, 4, 10, 0\.98\)/, "release-npm terminal should use a high-contrast stream panel");
 assert.match(css, /\.release-aur-widget \{[\s\S]*?border-color/, "release-aur output should render as a specialized Web UI widget variant");
 assert.match(css, /\.widget-area \.widget:not\(\.todo-widget\):not\(\.release-npm-widget\)/, "mobile widget filtering should keep release workflow output visible");
@@ -239,8 +252,22 @@ assert.match(app, /Restart Web UI to load themes/, "frontend should explain when
 assert.match(app, /themeSelect\.addEventListener\("change"/, "side-panel theme selector should switch themes immediately");
 assert.match(app, /open \? "Close for network" : "Open to network"/, "network button should toggle from open to close action");
 assert.match(app, /api\("\/api\/network\/close", \{ method: "POST"/, "network close action should call the close endpoint");
-assert.match(app, /stopServerButton\.addEventListener\("click", stopServer\)/, "Stop Server button should be wired to the shutdown handler");
+assert.match(app, /webuiVersionBadge: \$\("#webuiVersionBadge"\)/, "frontend should bind the Control Deck version badge");
+assert.match(app, /webuiDevBadge: \$\("#webuiDevBadge"\)/, "frontend should bind the Control Deck dev badge");
+assert.match(app, /function refreshWebuiVersion\(\)[\s\S]*api\("\/api\/health", \{ scoped: false \}\)[\s\S]*setWebuiVersion\(health\.webuiVersion\)[\s\S]*setWebuiDevServer\(isWebuiDevMetadata\(health\)\)/, "frontend should load Web UI version and dev mode from health metadata");
+assert.match(app, /case "webui_connected":[\s\S]*setWebuiVersion\(event\.version\)[\s\S]*setWebuiDevServer\(isWebuiDevMetadata\(event\)\)/, "frontend should refresh Web UI version and dev mode from reconnect events");
+assert.match(server, /const webuiDevServer = isTruthyEnv\(process\.env\.PI_WEBUI_DEV\) \|\| isSourceCheckout\(packageRoot\)/, "server should derive dev mode from PI_WEBUI_DEV or a source checkout");
+assert.match(server, /webuiDev: webuiDevServer,[\s\S]*webuiMode: webuiDevServer \? "dev" : "production"/, "server status should expose Web UI dev mode");
+assert.match(server, /type: "webui_connected",[\s\S]*webuiDev: webuiDevServer,[\s\S]*webuiMode: webuiDevServer \? "dev" : "production"/, "SSE connect event should expose Web UI dev mode");
+assert.match(app, /serverActionSelect\.addEventListener\("change", updateServerActionButton\)/, "Server action dropdown should control the guarded run button");
+assert.match(app, /runServerActionButton\.addEventListener\("click"[\s\S]*runSelectedServerAction/, "Server action run button should execute the selected action");
+assert.match(app, /api\("\/api\/restart", \{ method: "POST", scoped: false \}\)/, "Restart Server action should call the unscoped restart endpoint");
+assert.match(app, /setServerActionStatus\(message, "warn"\);\n\s+setServerRestartOverlay\(true, message\)/, "Restart Server action should show reconnect progress in the side panel and loading overlay");
+assert.match(app, /const showOfflinePanel = backendOffline && !serverRestartInProgress/, "intentional restart should suppress the generic offline shell while reconnecting");
 assert.match(app, /api\("\/api\/shutdown", \{ method: "POST", scoped: false \}\)/, "Stop Server action should call the unscoped shutdown endpoint");
+assert.match(server, /url\.pathname === "\/api\/restart" && req\.method === "POST"/, "server should expose restart endpoint");
+assert.match(server, /PI_WEBUI_RESTORE_TABS: JSON\.stringify\(restorableTabs \|\| \[\]\)/, "server restart should preserve restorable tab metadata");
+assert.match(server, /if \(webuiDevServer\) env\.PI_WEBUI_DEV = "1";/, "server restart should explicitly preserve dev mode");
 assert.match(server, /async function closeNetworkAccess\(\)/, "server should expose a local-only rebind helper for closing network access");
 assert.match(server, /url\.pathname === "\/api\/network\/close" && req\.method === "POST"/, "server should route network close requests");
 assert.match(server, /server\.closeAllConnections\?\.\(\)/, "network rebind should force-close long-lived clients so close-to-localhost can complete");
@@ -324,7 +351,10 @@ assert.match(app, /function bindGitWorkflowToActiveTab\(\) \{\n\s+gitWorkflow =
 assert.match(app, /function setGitWorkflow\(patch, \{ tabId = activeTabId \} = \{\}\)[\s\S]*if \(tabId === activeTabId\) \{[\s\S]*renderGitWorkflow\(\);/, "guided git workflow should not render inactive terminal workflows globally");
 assert.doesNotMatch(app, /gitWorkflowVisibleTabId|Workflow belongs to/, "guided git workflow should not pin or show workflows outside their owning terminal tab");
 assert.match(app, /function renderReleaseNpmOutputWidget\(\)/, "release-npm live output should use a specialized Web UI renderer");
+assert.match(app, /const releaseNpmOutputExpandedByTab = new Map\(\)/, "release-npm output collapse state should be tracked per browser tab");
+assert.match(app, /function renderReleaseNpmOutputDetails\(key, streamHeader, terminal, controls = null\)[\s\S]*node\.open = releaseNpmOutputExpandedByTab\.get\(stateKey\) !== false[\s\S]*release-npm-output-toggle/, "release-npm output should render as a browser-side details expander");
 assert.match(app, /releaseNpmStreamHeader\("Live output stream", outputLines\.length, \{ live: true \}\)/, "release-npm live output should expose a clear stream heading");
+assert.match(app, /renderReleaseNpmOutputDetails\("release-npm:output", streamHeader, terminal, controls\)/, "release-npm live stream should be wrapped in the local expander");
 assert.match(app, /function renderReleaseAurOutputWidget\(\)/, "release-aur live output should use a specialized Web UI renderer");
 assert.match(app, /releaseNpmActionButton\("Abort", "\/release-abort", "danger"\)/, "release-npm Web UI output should expose an abort action");
 assert.match(app, /releaseNpmActionButton\("Abort", "\/release-aur abort", "danger"\)/, "release-aur Web UI output should expose an abort action");
@@ -566,7 +596,7 @@ assert.equal(manifest.start_url, "/", "PWA manifest should start at the web UI r
 assert.ok(manifest.icons?.some((icon) => icon.src === "/apple-touch-icon.png" && icon.sizes === "180x180"), "PWA manifest should include a conventional 180px apple touch icon");
 assert.ok(manifest.icons?.some((icon) => icon.src === "/icon-192.png" && icon.sizes === "192x192"), "PWA manifest should include a 192px icon");
 assert.ok(manifest.icons?.some((icon) => icon.src === "/icon-512.png" && icon.sizes === "512x512"), "PWA manifest should include a 512px icon");
-assert.match(serviceWorker, /const CACHE_NAME = "pi-webui-pwa-v16"/, "PWA service worker should define an app-shell cache");
+assert.match(serviceWorker, /const CACHE_NAME = "pi-webui-pwa-v18"/, "PWA service worker should define an app-shell cache");
 assert.match(serviceWorker, /self\.addEventListener\("notificationclick"/, "PWA service worker should focus Web UI when blocked-tab notifications are clicked");
 assert.match(serviceWorker, /event\.notification\.data\?\.url/, "blocked-tab notifications should carry a URL for service-worker click handling");
 assert.match(serviceWorker, /"\/apple-touch-icon\.png"/, "PWA service worker should cache the apple touch icon");
@@ -715,6 +745,7 @@ assert.match(readme, /\.\/start-webui\.sh --dev --cwd \/path\/to\/project/, "REA
 assert.match(startScript, /--dev\)/, "start-webui.sh should accept a --dev flag");
 assert.match(startScript, /local_pi_webui_bin\(\)/, "start-webui.sh should resolve this checkout's local server entrypoint");
 assert.match(startScript, /webui_cmd=\(node "\$local_webui_bin"\)/, "start-webui.sh --dev should run the local bin with node");
+assert.match(startScript, /export PI_WEBUI_DEV=1/, "start-webui.sh --dev should mark the Web UI server as dev mode");
 assert.match(startScript, /"\$\{webui_cmd\[@\]\}" --cwd "\$cwd" --host "\$host" --port "\$port" "\$\{pass_args\[@\]\}"/, "start-webui.sh should launch through the selected server command without forwarding --dev");
 
 assert.match(pkg.scripts?.test || "", /node tests\/mobile-static\.test\.mjs/, "package test script should run the mobile static harness");