@firstpick/pi-package-webui 0.2.1 → 0.2.3

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"),
@@ -139,6 +144,7 @@ let pathFastPicksLoadPromise = null;
 let mobileTabsExpanded = false;
 let openTerminalTabGroupKey = null;
 let availableCommands = [];
+let rawAvailableCommands = [];
 let commandSuggestions = [];
 let pathSuggestions = [];
 let suggestionMode = "none";
@@ -150,12 +156,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 +272,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();
@@ -276,7 +286,9 @@ const optionalFeatureAvailability = {
   releaseAur: false,
   statsCommand: false,
   gitFooterStatus: false,
+  tuiSkillsCommand: false,
   todoProgressWidget: false,
+  tuiToolsCommand: false,
   themeBundle: false,
 };
 const OPTIONAL_FEATURES = [
@@ -301,6 +313,13 @@ const OPTIONAL_FEATURES = [
     capabilityLabel: "/release-aur",
     description: "Publish menu action, setup helpers, skills, and AUR release widgets.",
   },
+  {
+    id: "tuiSkillsCommand",
+    label: "TUI Skills command",
+    packageName: "@firstpick/pi-extension-setup-skills",
+    capabilityLabel: "RPC /skills from setup-skills extension",
+    description: "Terminal-native skill setup command alongside WebUI-native /skills toggles.",
+  },
   {
     id: "todoProgressWidget",
     label: "Todo progress widget",
@@ -308,6 +327,13 @@ const OPTIONAL_FEATURES = [
     capabilityLabel: "/todo-progress-status or todo-progress widget event",
     description: "Styled live checklist rendering for assistant todo updates.",
   },
+  {
+    id: "tuiToolsCommand",
+    label: "TUI Tools command",
+    packageName: "@firstpick/pi-extension-tools",
+    capabilityLabel: "RPC /tools from tools extension",
+    description: "Terminal-native active-tool manager alongside WebUI-native /tools toggles.",
+  },
   {
     id: "gitFooterStatus",
     label: "Git footer status",
@@ -339,8 +365,8 @@ const OPTIONAL_COMMAND_FEATURES = new Map([
   ["git-footer-refresh", "gitFooterStatus"],
   ["todo-progress-status", "todoProgressWidget"],
 ]);
-const HIDDEN_COMMAND_NAMES = new Set(["webui-tree-navigate"]);
-const NATIVE_SELECTOR_COMMANDS = new Set(["model", "settings", "theme", "fork", "clone", "resume", "tree", "login", "logout", "scoped-models"]);
+const HIDDEN_COMMAND_NAMES = new Set(["webui-tree-navigate", "webui-helper"]);
+const NATIVE_SELECTOR_COMMANDS = new Set(["model", "settings", "theme", "fork", "clone", "resume", "tree", "login", "logout", "scoped-models", "tools", "skills"]);
 const optionalFeatureInstallInProgress = new Set();
 
 function createGitWorkflowState() {
@@ -899,13 +925,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 +1050,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`;
@@ -2334,6 +2415,7 @@ function resetActiveTabUi() {
   liveToolRuns.clear();
   liveToolCards.clear();
   availableCommands = [];
+  rawAvailableCommands = [];
   resetOptionalFeatureAvailability();
   commandSuggestions = [];
   pathSuggestions = [];
@@ -2357,7 +2439,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 +3980,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 +4255,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 +4310,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 +4341,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 +4382,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 +4413,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;
 }
 
@@ -6850,6 +6948,7 @@ function optionalFeatureIdForCommand(name) {
 
 function isCommandVisible(command) {
   if (HIDDEN_COMMAND_NAMES.has(command.name)) return false;
+  if (command.enabled === false) return false;
   const featureId = optionalFeatureIdForCommand(command.name);
   return !featureId || isOptionalFeatureEnabled(featureId);
 }
@@ -6862,6 +6961,10 @@ function hasAvailableCommand(name) {
   return availableCommands.some((command) => command.name === name);
 }
 
+function hasLoadedRpcCommand(name) {
+  return rawAvailableCommands.some((command) => command.name === name && command.source !== "native");
+}
+
 function optionalFeatureUnavailableMessage(featureId) {
   const feature = OPTIONAL_FEATURE_BY_ID.get(featureId);
   if (!feature) return "Optional feature unavailable.";
@@ -6908,7 +7011,9 @@ function updateOptionalFeatureAvailability() {
   optionalFeatureAvailability.releaseAur = hasAvailableCommand("release-aur");
   optionalFeatureAvailability.statsCommand = hasAvailableCommand("stats");
   optionalFeatureAvailability.gitFooterStatus = hasAvailableCommand("git-footer-refresh") || optionalFeatureAvailability.gitFooterStatus || statusEntries.has("git-footer");
+  optionalFeatureAvailability.tuiSkillsCommand = hasLoadedRpcCommand("skills");
   optionalFeatureAvailability.todoProgressWidget = hasAvailableCommand("todo-progress-status") || optionalFeatureAvailability.todoProgressWidget || widgets.has("todo-progress");
+  optionalFeatureAvailability.tuiToolsCommand = hasLoadedRpcCommand("tools");
   optionalFeatureAvailability.themeBundle = availableThemes.length > 0;
   renderOptionalFeatureControls();
 }
@@ -7051,7 +7156,7 @@ function runPublishWorkflow(command) {
 
 function slashCommandName(message) {
   const match = String(message || "").trim().match(/^\/([^\s]+)$/);
-  return match ? match[1] : "";
+  return match ? match[1].toLowerCase() : "";
 }
 
 function openNativeCommandDialog({ title, message = "", searchPlaceholder = "" } = {}) {
@@ -7124,7 +7229,17 @@ function renderNativeSelectorItems(items, { emptyText = "No choices.", onSelect,
     button.addEventListener("click", () => onSelect?.(item));
     const title = make("span", "native-selector-title");
     title.append(make("strong", undefined, item.label || item.id || "choice"));
-    if (item.badge) title.append(make("span", "native-selector-badge", item.badge));
+    if (item.badge) {
+      const badgeState = String(item.badge).toLowerCase();
+      const badge = make("span", `native-selector-badge${item.badgeClass ? ` ${item.badgeClass}` : ""}`, item.badge);
+      badge.dataset.badgeState = badgeState;
+      if (badgeState === "disabled" || String(item.badgeClass || "").includes("disabled")) {
+        badge.style.borderColor = "rgba(255, 159, 67, 0.62)";
+        badge.style.color = "#ff9f43";
+        badge.style.background = "rgba(255, 159, 67, 0.10)";
+      }
+      title.append(badge);
+    }
     const detail = make("span", "native-selector-detail", item.description || "");
     const meta = make("span", "native-selector-meta", item.meta || "");
     button.append(title);
@@ -7458,6 +7573,145 @@ function openNativeScopedModelsInfo() {
   elements.nativeCommandBody.append(make("p", "native-command-note", "Use the footer model chip to choose among scoped models. The full native scoped-models editor is still TUI-only."));
 }
 
+function nativeResourceSourceLabel(resource) {
+  const info = resource?.sourceInfo || {};
+  return [info.source, info.scope, info.origin].filter(Boolean).join(" · ") || resource?.location || "loaded resource";
+}
+
+function nativeResourceCounts(resources) {
+  const disabled = resources.filter((resource) => resource.enabled === false).length;
+  return { total: resources.length, disabled, enabled: resources.length - disabled };
+}
+
+function nativeResourceFilterMatches(resource, filter) {
+  if (filter === "enabled") return resource.enabled !== false;
+  if (filter === "disabled") return resource.enabled === false;
+  return true;
+}
+
+function renderNativeResourceToggles(resources, { savingName, filter = "all", onToggle } = {}) {
+  const filteredResources = resources.filter((resource) => nativeResourceFilterMatches(resource, filter));
+  const counts = nativeResourceCounts(resources);
+  const items = filteredResources.map((resource) => ({
+    id: resource.name,
+    label: resource.name,
+    description: resource.description || "No description provided.",
+    meta: nativeResourceSourceLabel(resource),
+    badge: resource.enabled === false ? "disabled" : "enabled",
+    badgeClass: resource.enabled === false ? "disabled native-selector-badge-disabled" : "enabled native-selector-badge-enabled",
+    disabled: Boolean(savingName),
+    resource,
+  }));
+  const filterLabel = filter === "enabled" ? "enabled" : filter === "disabled" ? "disabled" : "all";
+  renderNativeSelectorItems(items, {
+    emptyText: `No ${filterLabel} entries match this filter.`,
+    onSelect: (item) => onToggle?.(item.resource),
+  });
+  elements.nativeCommandBody.prepend(make("div", "native-resource-summary muted", `${counts.total} total · ${counts.enabled} enabled · ${counts.disabled} disabled · showing ${filterLabel}`));
+}
+
+function renderNativeResourceFilterActions(filter, setFilter, render) {
+  elements.nativeCommandActions.replaceChildren();
+  for (const option of [
+    { value: "all", label: "All" },
+    { value: "enabled", label: "Enabled" },
+    { value: "disabled", label: "Disabled" },
+  ]) {
+    addNativeCommandAction(option.label, () => {
+      setFilter(option.value);
+      render();
+    }, filter === option.value ? "primary" : undefined);
+  }
+  addNativeCommandAction("Cancel", closeNativeCommandDialog);
+}
+
+async function openNativeToolsSelector() {
+  openNativeCommandDialog({ title: "/tools", message: "Enable or disable tools for the active Pi tab. Changes apply to the next model turn and persist on this session branch.", searchPlaceholder: "Filter tools…" });
+  renderNativeLoading("Loading tools…");
+  let tools = [];
+  let savingName = "";
+  let filter = "all";
+  const render = () => {
+    renderNativeResourceToggles(tools, {
+      savingName,
+      filter,
+      onToggle: async (tool) => {
+        if (!tool || savingName) return;
+        const enabledTools = new Set(tools.filter((item) => item.enabled !== false).map((item) => item.name));
+        if (tool.enabled === false) enabledTools.add(tool.name);
+        else enabledTools.delete(tool.name);
+        savingName = tool.name;
+        setNativeCommandError("");
+        render();
+        try {
+          const response = await nativeCommandApi("/api/tools", { method: "POST", body: { enabledTools: [...enabledTools] } });
+          tools = Array.isArray(response.data?.tools) ? response.data.tools : [];
+          addTransientMessage({ role: "native", title: "/tools", content: `Tool ${tool.name} ${enabledTools.has(tool.name) ? "enabled" : "disabled"}.`, level: "info" });
+        } catch (error) {
+          setNativeCommandError(error.message || String(error));
+        } finally {
+          savingName = "";
+          render();
+        }
+      },
+    });
+    renderNativeResourceFilterActions(filter, (value) => { filter = value; }, render);
+  };
+  try {
+    const response = await nativeCommandApi("/api/tools");
+    tools = Array.isArray(response.data?.tools) ? response.data.tools : [];
+    elements.nativeCommandSearch.oninput = render;
+    render();
+  } catch (error) {
+    setNativeCommandError(error.message || String(error));
+    elements.nativeCommandBody.replaceChildren();
+  }
+}
+
+async function openNativeSkillsSelector() {
+  openNativeCommandDialog({ title: "/skills", message: "Enable or disable skills for automatic model invocation in the active Pi tab. Disabled skills are removed from the system prompt and their /skill:name commands are blocked by Web UI.", searchPlaceholder: "Filter skills…" });
+  renderNativeLoading("Loading skills…");
+  let skills = [];
+  let savingName = "";
+  let filter = "all";
+  const render = () => {
+    renderNativeResourceToggles(skills, {
+      savingName,
+      filter,
+      onToggle: async (skill) => {
+        if (!skill || savingName) return;
+        const enabledSkills = new Set(skills.filter((item) => item.enabled !== false).map((item) => item.name));
+        if (skill.enabled === false) enabledSkills.add(skill.name);
+        else enabledSkills.delete(skill.name);
+        savingName = skill.name;
+        setNativeCommandError("");
+        render();
+        try {
+          const response = await nativeCommandApi("/api/skills", { method: "POST", body: { enabledSkills: [...enabledSkills] } });
+          skills = Array.isArray(response.data?.skills) ? response.data.skills : [];
+          addTransientMessage({ role: "native", title: "/skills", content: `Skill ${skill.name} ${enabledSkills.has(skill.name) ? "enabled" : "disabled"}.`, level: "info" });
+          refreshCommands(activeTabContext()).catch((error) => addEvent(error.message || String(error), "error"));
+        } catch (error) {
+          setNativeCommandError(error.message || String(error));
+        } finally {
+          savingName = "";
+          render();
+        }
+      },
+    });
+    renderNativeResourceFilterActions(filter, (value) => { filter = value; }, render);
+  };
+  try {
+    const response = await nativeCommandApi("/api/skills");
+    skills = Array.isArray(response.data?.skills) ? response.data.skills : [];
+    elements.nativeCommandSearch.oninput = render;
+    render();
+  } catch (error) {
+    setNativeCommandError(error.message || String(error));
+    elements.nativeCommandBody.replaceChildren();
+  }
+}
+
 function openNativeAuthInfo(mode) {
   const command = mode === "logout" ? "/logout" : "/login";
   openNativeCommandDialog({ title: command, message: "Provider credential entry is intentionally not implemented in the browser yet." });
@@ -7502,6 +7756,12 @@ async function handleNativeSlashSelectorCommand(message, { usesPromptInput = fal
     case "scoped-models":
       openNativeScopedModelsInfo();
       return true;
+    case "tools":
+      await openNativeToolsSelector();
+      return true;
+    case "skills":
+      await openNativeSkillsSelector();
+      return true;
     case "login":
     case "logout":
       openNativeAuthInfo(name);
@@ -7889,7 +8149,7 @@ function syncModelSelectToState() {
   }
 }
 
-function normalizeCommands(commands) {
+function normalizeCommands(commands, { dedupe = true } = {}) {
   const seen = new Set();
   return (commands || [])
     .map((command) => ({
@@ -7897,9 +8157,12 @@ function normalizeCommands(commands) {
       description: String(command.description || "").trim(),
       source: String(command.source || "command").trim(),
       location: String(command.location || "").trim(),
+      enabled: command.enabled !== false,
     }))
     .filter((command) => {
-      if (!command.name || seen.has(command.name)) return false;
+      if (!command.name) return false;
+      if (!dedupe) return true;
+      if (seen.has(command.name)) return false;
       seen.add(command.name);
       return true;
     })
@@ -8278,6 +8541,7 @@ async function refreshCommands(tabContext = activeTabContext()) {
   if (!tabContext.tabId) return;
   const response = await api("/api/commands", { tabId: tabContext.tabId });
   if (!isCurrentTabContext(tabContext)) return;
+  rawAvailableCommands = normalizeCommands(response.data?.commands || [], { dedupe: false });
   availableCommands = normalizeCommands(response.data?.commands || []);
   updateOptionalFeatureAvailability();
   renderCommands();
@@ -8293,6 +8557,7 @@ async function refreshAll(tabContext = activeTabContext()) {
     refreshStats(tabContext),
     refreshWorkspace(tabContext),
     refreshNetworkStatus(),
+    refreshWebuiVersion(),
   ]);
   if (!isCurrentTabContext(tabContext)) return;
   for (const result of results) {
@@ -8404,12 +8669,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 +8782,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 +9207,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 +9259,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 +9671,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,