@firstpick/pi-package-webui 0.2.0 → 0.2.2

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",