@firstpick/pi-package-webui 0.2.0 → 0.2.2

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.ps1

@@ -32,7 +32,52 @@ function Get-LaunchCwd {
     return $cwd
 }
 
+function Get-PiManagedPiWebui {
+    $node = Get-Command "node" -ErrorAction SilentlyContinue
+    if (-not $node) {
+        return $null
+    }
+
+    $script = @'
+const { homedir } = require("node:os");
+const { join } = require("node:path");
+
+let agentDir = process.env.PI_CODING_AGENT_DIR || join(homedir(), ".pi", "agent");
+if (agentDir === "~") {
+  agentDir = homedir();
+} else if (agentDir.startsWith("~/") || (process.platform === "win32" && agentDir.startsWith("~\\"))) {
+  agentDir = join(homedir(), agentDir.slice(2));
+}
+
+const binName = process.platform === "win32" ? "pi-webui.cmd" : "pi-webui";
+for (const candidate of [
+  join(agentDir, "npm", "node_modules", ".bin", binName),
+  join(agentDir, "npm", "node_modules", ".bin", "pi-webui"),
+]) {
+  process.stdout.write(`${candidate}\n`);
+}
+'@
+
+    $candidates = @(& $node.Source -e $script 2>$null)
+    if ($LASTEXITCODE -ne 0) {
+        return $null
+    }
+
+    foreach ($candidate in $candidates) {
+        if (-not [string]::IsNullOrWhiteSpace($candidate) -and (Test-Path -LiteralPath $candidate -PathType Leaf)) {
+            return $candidate
+        }
+    }
+
+    return $null
+}
+
 function Ensure-PiWebui {
+    $managed = Get-PiManagedPiWebui
+    if ($managed) {
+        return $managed
+    }
+
     $command = Get-Command "pi-webui" -ErrorAction SilentlyContinue
     if ($command) {
         return $command.Source

package/start-webui.sh

@@ -6,6 +6,7 @@ PACKAGE_NAME="@firstpick/pi-package-webui"
 DEFAULT_HOST="127.0.0.1"
 DEFAULT_PORT="31415"
 SERVER_PID=""
+PI_WEBUI_COMMAND=""
 
 script_dir() {
   local source dir
@@ -37,6 +38,44 @@ local_pi_webui_bin() {
   printf '%s\n' "$candidate"
 }
 
+pi_managed_pi_webui_bin() {
+  local candidates candidate
+
+  if ! command -v node >/dev/null 2>&1; then
+    return 1
+  fi
+
+  candidates="$(node <<'NODE'
+const { homedir } = require("node:os");
+const { join } = require("node:path");
+
+let agentDir = process.env.PI_CODING_AGENT_DIR || join(homedir(), ".pi", "agent");
+if (agentDir === "~") {
+  agentDir = homedir();
+} else if (agentDir.startsWith("~/") || (process.platform === "win32" && agentDir.startsWith("~\\"))) {
+  agentDir = join(homedir(), agentDir.slice(2));
+}
+
+const binName = process.platform === "win32" ? "pi-webui.cmd" : "pi-webui";
+for (const candidate of [
+  join(agentDir, "npm", "node_modules", ".bin", "pi-webui"),
+  join(agentDir, "npm", "node_modules", ".bin", binName),
+]) {
+  process.stdout.write(`${candidate.replace(/\\/g, "/")}\n`);
+}
+NODE
+)"
+
+  while IFS= read -r candidate; do
+    if [[ -n "$candidate" && -f "$candidate" ]]; then
+      printf '%s\n' "$candidate"
+      return 0
+    fi
+  done <<< "$candidates"
+
+  return 1
+}
+
 cleanup() {
   if [[ -n "${SERVER_PID:-}" ]] && kill -0 "$SERVER_PID" 2>/dev/null; then
     kill "$SERVER_PID" 2>/dev/null || true
@@ -66,7 +105,15 @@ choose_cwd() {
 }
 
 ensure_pi_webui() {
+  local managed_bin
+
+  if managed_bin="$(pi_managed_pi_webui_bin 2>/dev/null)" && [[ -n "$managed_bin" ]]; then
+    PI_WEBUI_COMMAND="$managed_bin"
+    return 0
+  fi
+
   if command -v pi-webui >/dev/null 2>&1; then
+    PI_WEBUI_COMMAND="$(command -v pi-webui)"
     return 0
   fi
 
@@ -105,6 +152,8 @@ ensure_pi_webui() {
     echo "Installed, but pi-webui is still not on PATH. Check your npm global bin directory." >&2
     return 1
   fi
+
+  PI_WEBUI_COMMAND="$(command -v pi-webui)"
 }
 
 browser_host_for_url() {
@@ -134,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() {
@@ -407,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
 
@@ -425,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)
+    webui_cmd=("$PI_WEBUI_COMMAND")
+    unset PI_WEBUI_DEV
   fi
 
   echo "Starting Pi Web UI in: $cwd"
@@ -442,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
@@ -451,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");