@firstpick/pi-package-webui 0.2.3 → 0.2.5

package/README.md

@@ -117,18 +117,34 @@ Environment variables:
 ## Main features
 
 - Multi-tab Pi sessions with isolated processes, working directories, prompt drafts, and activity state.
+- Automatic tab naming from the first prompt, with `--name <name>` still available for an explicit initial tab name.
 - Streaming chat transcript with Markdown, thinking output, tool/bash cards, queue and compaction events, and abort controls.
-- Prompt composer with uploads, drag/drop/paste, inline image support, slash-command autocomplete, and `@` file/path references.
+- Prompt composer with uploads, drag/drop/paste, inline image support, slash-command autocomplete, and `@` file/path references with live suggestions.
 - Browser dialogs for common Pi selectors such as `/model`, `/settings`, `/theme`, `/fork`, `/clone`, `/resume`, `/tree`, `/scoped-models`, `/tools`, and `/skills`.
 - Model, thinking, session, workspace, theme, optional-feature, Codex usage, network, event, and notification controls in the side panel.
-- Per-tab cwd changes, a clickable footer cwd picker, saved path fast picks, and restart-safe restoration of open tabs.
-- Browser support for Pi extension UI prompts, widgets, status updates, and notifications.
-- Feedback reactions (`👍`, `👎`, `?`) on assistant output and action cards, which can ask Pi to create or update a LEARNING.
+- Side-panel theme picker backed by optional `@firstpick/pi-themes-bundle` themes when loaded.
+- Per-tab cwd changes, a clickable footer cwd picker, saved path fast picks, server-persisted fast picks, and restart-safe restoration of open tabs.
+- Browser support for Pi extension UI prompts, widgets, status updates, browser notifications when a tab needs an extension UI response and an optional side-panel toggle for agent-done notifications.
+- Feedback reactions (`👍`, `👎`, `?`) on final assistant output plus tool/bash action cards, which can ask Pi to create or update a LEARNING.
 - Mobile-friendly layout and PWA install support where the browser allows it.
 
-## Optional companion features
+Useful browser endpoints exposed by the local server include:
 
-A normal Pi/npm install includes the optional companion packages unless optional dependencies are disabled. If a feature is missing, the side panel shows it as install-needed. Installing from the side panel is localhost-only, limited to known packages, and requires reloading the active Pi tab after installation.
+- `GET /api/path-suggestions?tab=<tabId>&query=<path>` for `@` file/path references with live suggestions.
+- `POST /api/action-feedback?tab=<tabId>` for feedback on final assistant output and action cards.
+- `POST /api/optional-feature-install` for installing known optional companion packages from the side panel.
+
+For local development, run the checkout helper directly, for example:
+
+```bash
+./start-webui.sh --dev --cwd /path/to/project
+```
+
+## Optional companion packages
+
+A normal Pi/npm install includes the optional companion packages unless optional dependencies are disabled. Startup checks loaded Pi capabilities directly through RPC-visible commands and live widget events, then the side panel shows each optional feature as enabled, disabled, or install-needed. Installing a missing feature is an explicit, warned action; it is localhost-only, limited to known packages, and requires reloading the active Pi tab after installation.
+
+When the standalone global `pi-webui` launcher is used, optional companion installs should target the Pi agent npm root instead of the global npm prefix. Override the target explicitly with `PI_WEBUI_OPTIONAL_FEATURE_INSTALL_ROOT=/path/to/package-root` when needed.
 
 Optional companions:
 
@@ -157,7 +173,7 @@ This requires `/git-staged-msg` from `@firstpick/pi-prompts-git-pr`. Review the
 ## Mobile and PWA notes
 
 - The mobile composer starts as a compact `Ask Pi…` input and grows as you type.
-- Installable PWA support and notifications depend on browser support and usually require `localhost` or HTTPS.
+- Installable PWA support, blocked-tab browser notifications, and optional agent-done notifications require browser service-worker/notification support and usually require `localhost` or HTTPS.
 - Plain `http://<LAN-IP>` can show the app, but some browsers disable PWA install and notifications there.
 
 ## Network safety

package/bin/pi-webui.mjs

@@ -17,6 +17,7 @@ const packageRoot = path.resolve(__dirname, "..");
 const publicDir = path.join(packageRoot, "public");
 const webuiHelperExtensionPath = path.join(packageRoot, "webui-rpc-helper.mjs");
 const agentDir = process.env.PI_CODING_AGENT_DIR || path.join(homedir(), ".pi", "agent");
+const OPTIONAL_FEATURE_INSTALL_ROOT_ENV = "PI_WEBUI_OPTIONAL_FEATURE_INSTALL_ROOT";
 const packageJson = JSON.parse(await readFile(path.join(packageRoot, "package.json"), "utf8"));
 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);
@@ -40,6 +41,7 @@ const ATTACHMENT_UPLOAD_MAX_TOTAL_BYTES = 64 * 1024 * 1024;
 const INLINE_IMAGE_MAX_BYTES = 8 * 1024 * 1024;
 const INLINE_IMAGE_TOTAL_MAX_BYTES = 16 * 1024 * 1024;
 const RPC_IMAGE_MIME_TYPES = new Set(["image/png", "image/jpeg", "image/webp", "image/gif"]);
+const THINKING_LEVELS = ["off", "minimal", "low", "medium", "high", "xhigh"];
 const EVENT_HISTORY_LIMIT = 200;
 const EXTENSION_UI_BLOCKING_METHODS = new Set(["select", "confirm", "input", "editor"]);
 const STATUS_RPC_TIMEOUT_MS = 1_800;
@@ -768,14 +770,51 @@ function runCommand(command, args, { cwd, timeoutMs = 2000, maxOutputLength = 20
   });
 }
 
-function optionalDependencyInstallRoot() {
-  const parts = packageRoot.split(path.sep);
+function nodeModulesParentForPackageRoot(root = packageRoot) {
+  const parts = root.split(path.sep);
   const nodeModulesIndex = parts.lastIndexOf("node_modules");
   if (nodeModulesIndex >= 0) {
-    const root = parts.slice(0, nodeModulesIndex).join(path.sep);
-    return root || path.parse(packageRoot).root;
+    const parent = parts.slice(0, nodeModulesIndex).join(path.sep);
+    return parent || path.parse(root).root;
   }
-  return packageRoot;
+  return root;
+}
+
+function declaredDependencySpec(pkg, packageName) {
+  return firstDefined(
+    pkg?.dependencies?.[packageName],
+    pkg?.optionalDependencies?.[packageName],
+    pkg?.devDependencies?.[packageName],
+    pkg?.peerDependencies?.[packageName],
+  );
+}
+
+async function installRootDeclaresPackage(root, packageName) {
+  const pkg = await readJsonFileIfExists(path.join(root, "package.json"));
+  return declaredDependencySpec(pkg, packageName) !== undefined;
+}
+
+function configuredAgentNpmRoot() {
+  const root = process.env.PI_CODING_AGENT_DIR ? path.resolve(expandUserPath(process.env.PI_CODING_AGENT_DIR)) : agentDir;
+  return path.join(root, "npm");
+}
+
+async function optionalDependencyInstallRoot() {
+  const configuredRoot = process.env[OPTIONAL_FEATURE_INSTALL_ROOT_ENV];
+  if (configuredRoot) return path.resolve(expandUserPath(configuredRoot));
+
+  const installRoot = nodeModulesParentForPackageRoot(packageRoot);
+  if (await installRootDeclaresPackage(installRoot, "@firstpick/pi-package-webui")) return installRoot;
+
+  const agentNpmRoot = configuredAgentNpmRoot();
+  if (installRoot !== agentNpmRoot && await installRootDeclaresPackage(agentNpmRoot, "@firstpick/pi-package-webui")) return agentNpmRoot;
+
+  if (webuiDevServer) return installRoot;
+
+  throw makeHttpError(
+    500,
+    `Could not determine a safe optional feature install root. Set ${OPTIONAL_FEATURE_INSTALL_ROOT_ENV} to the Pi package root.`,
+  );
 }
 
 function formatCommandForDisplay(command, args) {
@@ -786,7 +825,7 @@ async function installOptionalFeaturePackage(featureId) {
   const packageName = OPTIONAL_FEATURE_PACKAGES.get(featureId);
   if (!packageName) throw makeHttpError(400, `Unknown optional feature: ${featureId}`);
 
-  const installRoot = optionalDependencyInstallRoot();
+  const installRoot = await optionalDependencyInstallRoot();
   const npmCommand = process.env.PI_WEBUI_NPM_BIN || "npm";
   const args = ["install", "--prefix", installRoot, packageName];
   const result = await runCommand(npmCommand, args, {
@@ -1958,7 +1997,7 @@ function commandFromPost(pathname, body) {
     }
     case "/api/thinking": {
       const level = String(body.level || "").trim();
-      if (!["off", "minimal", "low", "medium", "high", "xhigh"].includes(level)) {
+      if (!THINKING_LEVELS.includes(level)) {
         throw new Error("Invalid thinking level");
       }
       return { type: "set_thinking_level", level };
@@ -2121,10 +2160,21 @@ function rememberTabState(tab, state) {
   if (!options.noSession && Object.prototype.hasOwnProperty.call(state, "sessionFile")) tab.sessionFile = sessionFileFromState(state);
 }
 
+function stateWithPendingThinking(tab, state) {
+  if (!state || typeof state !== "object" || !tab?.pendingThinkingLevel) return state;
+  return { ...state, pendingThinkingLevel: tab.pendingThinkingLevel };
+}
+
+function responseWithPendingThinking(tab, response) {
+  if (!response || typeof response !== "object" || response.success === false || response.command !== "get_state") return response;
+  return { ...response, data: stateWithPendingThinking(tab, response.data) };
+}
+
 function forgetTabState(tab) {
   if (!tab) return;
   tab.lastState = null;
   tab.sessionFile = undefined;
+  tab.pendingThinkingLevel = undefined;
 }
 
 function tabRestorableSessionFile(tab) {
@@ -2481,6 +2531,7 @@ async function createTab({ id: requestedId, index, title, titleSource, conversat
     createdAt,
     sessionFile: options.noSession ? undefined : normalizedRestoreString(sessionFile, 4096),
     lastState: null,
+    pendingThinkingLevel: undefined,
     activity: createTabActivity(createdAt),
     pendingExtensionUiRequests: new Map(),
     webuiHelperRequests: new Map(),
@@ -2523,6 +2574,7 @@ function tabMeta(tab) {
     conversationStarted: !!tab.conversationStarted,
     cwd: tab.cwd,
     sessionFile: tabRestorableSessionFile(tab),
+    pendingThinkingLevel: tab.pendingThinkingLevel || null,
     createdAt: tab.createdAt,
     startedAt: tab.rpc.startedAt,
     pid: tab.rpc.child?.pid,
@@ -2767,10 +2819,10 @@ function fallbackRpcResponse(tab, command, error) {
 
 async function safeRpcResponse(tab, command, timeoutMs = REQUEST_TIMEOUT_MS) {
   try {
-    return await tab.rpc.send(command, timeoutMs);
+    return responseWithPendingThinking(tab, await tab.rpc.send(command, timeoutMs));
   } catch (error) {
     const message = sanitizeError(error);
-    if (/Pi RPC process is not running/i.test(message)) return fallbackRpcResponse(tab, command, error);
+    if (/Pi RPC process is not running/i.test(message)) return responseWithPendingThinking(tab, fallbackRpcResponse(tab, command, error));
     throw error;
   }
 }
@@ -3732,12 +3784,38 @@ async function safeRpcData(tab, command, timeoutMs = STATUS_RPC_TIMEOUT_MS) {
     const response = await tab.rpc.send(command, timeoutMs);
     if (response?.success === false) return { ok: false, error: response.error || `${command.type} failed` };
     if (command?.type === "get_state") rememberTabState(tab, response?.data);
-    return { ok: true, data: response?.data ?? null };
+    return { ok: true, data: command?.type === "get_state" ? stateWithPendingThinking(tab, response?.data) : response?.data ?? null };
   } catch (error) {
     return { ok: false, error: sanitizeError(error) };
   }
 }
 
+function stateIsBusyForSettings(state) {
+  return !!(state?.isStreaming || state?.isCompacting);
+}
+
+async function setThinkingLevelForTab(tab, level, { allowPending = true } = {}) {
+  if (!THINKING_LEVELS.includes(level)) throw makeHttpError(400, "Invalid thinking level");
+  const stateResult = allowPending ? await safeRpcData(tab, { type: "get_state" }, STATUS_RPC_TIMEOUT_MS) : { ok: false };
+  if (allowPending && stateResult.ok && stateIsBusyForSettings(stateResult.data)) {
+    tab.pendingThinkingLevel = level;
+    return rpcSuccess("set_thinking_level", { level, pending: true, message: `Thinking level ${level} will apply to the next prompt.` });
+  }
+  const response = await tab.rpc.send({ type: "set_thinking_level", level });
+  if (response.success !== false) tab.pendingThinkingLevel = undefined;
+  return response;
+}
+
+async function applyPendingThinkingBeforePrompt(tab) {
+  const level = tab?.pendingThinkingLevel;
+  if (!level) return null;
+  const stateResult = await safeRpcData(tab, { type: "get_state" }, STATUS_RPC_TIMEOUT_MS);
+  if (stateResult.ok && stateIsBusyForSettings(stateResult.data)) return null;
+  const response = await setThinkingLevelForTab(tab, level, { allowPending: false });
+  if (response.success === false) return response;
+  return { ...response, pendingApplied: true };
+}
+
 function providerList(models) {
   const providers = new Set();
   for (const model of Array.isArray(models) ? models : []) {
@@ -4132,6 +4210,11 @@ const server = createServer(async (req, res) => {
         return;
       }
       const command = commandFromPost(url.pathname, body);
+      const pendingThinkingResponse = await applyPendingThinkingBeforePrompt(tab);
+      if (pendingThinkingResponse?.success === false) {
+        sendJson(res, 400, responseWithTab(pendingThinkingResponse, tab));
+        return;
+      }
       const startsVisibleWork = commandStartsVisibleWork(command);
       if (startsVisibleWork) {
         maybeNameTabForConversation(tab, command);
@@ -4194,7 +4277,11 @@ const server = createServer(async (req, res) => {
           maybeNameTabForConversation(tab, command);
           markTabWorking(tab);
         }
-        const response = command.type === "bash" ? await sendQueuedBashCommand(tab, command) : await tab.rpc.send(command);
+        const response = command.type === "set_thinking_level"
+          ? await setThinkingLevelForTab(tab, command.level)
+          : command.type === "bash"
+            ? await sendQueuedBashCommand(tab, command)
+            : await tab.rpc.send(command);
         if (response.success === false && startsVisibleWork) markTabIdle(tab);
         if (response.success !== false && command.type === "new_session") {
           tab.conversationStarted = false;

package/package.json

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

@@ -43,6 +43,10 @@ const elements = {
   publishMenu: $("#publishMenu"),
   releaseNpmButton: $("#releaseNpmButton"),
   releaseAurButton: $("#releaseAurButton"),
+  nativeCommandMenuButton: $("#nativeCommandMenuButton"),
+  nativeCommandMenu: $("#nativeCommandMenu"),
+  nativeSkillsButton: $("#nativeSkillsButton"),
+  nativeToolsButton: $("#nativeToolsButton"),
   gitWorkflowPanel: $("#gitWorkflowPanel"),
   gitWorkflowTitle: $("#gitWorkflowTitle"),
   gitWorkflowHint: $("#gitWorkflowHint"),
@@ -143,6 +147,7 @@ let pathFastPicksReady = false;
 let pathFastPicksLoadPromise = null;
 let mobileTabsExpanded = false;
 let openTerminalTabGroupKey = null;
+let nativeCommandMenuOpen = false;
 let availableCommands = [];
 let rawAvailableCommands = [];
 let commandSuggestions = [];
@@ -361,6 +366,8 @@ const OPTIONAL_COMMAND_FEATURES = new Map([
   ["git-staged-msg", "gitWorkflow"],
   ["release-npm", "releaseNpm"],
   ["release-aur", "releaseAur"],
+  ["skills", "tuiSkillsCommand"],
+  ["tools", "tuiToolsCommand"],
   ["stats", "statsCommand"],
   ["git-footer-refresh", "gitFooterStatus"],
   ["todo-progress-status", "todoProgressWidget"],
@@ -3982,10 +3989,15 @@ function renderStatus() {
   const compacting = state?.isCompacting ? " · compacting" : "";
 
   elements.stateDetails.replaceChildren();
+  const pendingThinkingLevel = state?.pendingThinkingLevel || null;
+  const shownThinkingLevel = pendingThinkingLevel || state?.thinkingLevel;
+  const thinkingDetail = pendingThinkingLevel && pendingThinkingLevel !== state?.thinkingLevel
+    ? `${state?.thinkingLevel || "unknown"} → ${pendingThinkingLevel} next prompt`
+    : state?.thinkingLevel || "unknown";
   const details = {
     Status: `${running}${compacting}`,
     Model: modelLabel(state?.model),
-    Thinking: state?.thinkingLevel || "unknown",
+    Thinking: thinkingDetail,
     Session: state?.sessionName || state?.sessionId || "unknown",
     File: state?.sessionFile || "in-memory",
     Messages: String(state?.messageCount ?? "?"),
@@ -3996,7 +4008,7 @@ function renderStatus() {
     elements.stateDetails.append(make("dt", undefined, key), make("dd", undefined, value));
   }
 
-  if (state?.thinkingLevel) elements.thinkingSelect.value = state.thinkingLevel;
+  if (shownThinkingLevel) elements.thinkingSelect.value = shownThinkingLevel;
   elements.compactButton.disabled = !!state?.isCompacting;
   elements.compactButton.textContent = state?.isCompacting ? "Compacting…" : "Compact";
   syncModelSelectToState();
@@ -6938,6 +6950,13 @@ function setPublishMenuOpen(open) {
   elements.publishButton.parentElement?.classList.toggle("open", publishMenuOpen);
 }
 
+function setNativeCommandMenuOpen(open) {
+  nativeCommandMenuOpen = !!open;
+  elements.nativeCommandMenuButton.setAttribute("aria-expanded", nativeCommandMenuOpen ? "true" : "false");
+  elements.nativeCommandMenuButton.classList.toggle("menu-open", nativeCommandMenuOpen);
+  elements.nativeCommandMenuButton.parentElement?.classList.toggle("open", nativeCommandMenuOpen);
+}
+
 function optionalFeatureIdForCommand(name) {
   if (OPTIONAL_COMMAND_FEATURES.has(name)) return OPTIONAL_COMMAND_FEATURES.get(name);
   if (name === "release-toggle" || name === "release-abort" || name === "release-npm-logs") return "releaseNpm";
@@ -7091,6 +7110,18 @@ function renderOptionalFeatureControls() {
   );
   if (!hasPublishWorkflow && publishMenuOpen) setPublishMenuOpen(false);
 
+  const hasNativeCommandMenu = isOptionalFeatureEnabled("tuiSkillsCommand") || isOptionalFeatureEnabled("tuiToolsCommand");
+  elements.nativeSkillsButton.hidden = !isOptionalFeatureEnabled("tuiSkillsCommand");
+  elements.nativeToolsButton.hidden = !isOptionalFeatureEnabled("tuiToolsCommand");
+  const nativeCommandMenuContainer = elements.nativeCommandMenuButton.parentElement;
+  if (nativeCommandMenuContainer) nativeCommandMenuContainer.hidden = !hasNativeCommandMenu;
+  setOptionalControlState(
+    elements.nativeCommandMenuButton,
+    hasNativeCommandMenu,
+    "Slash command menu unavailable: enable/install TUI Skills command and/or TUI Tools command in Optional features.",
+  );
+  if (!hasNativeCommandMenu && nativeCommandMenuOpen) setNativeCommandMenuOpen(false);
+
   renderOptionalFeaturePanel();
 }
 
@@ -7154,6 +7185,23 @@ function runPublishWorkflow(command) {
   sendPrompt("prompt", command);
 }
 
+async function runNativeCommandMenu(command) {
+  setComposerActionsOpen(false);
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(false);
+  const commandName = String(command || "").replace(/^\//, "").split(/\s+/)[0].toLowerCase();
+  const featureId = optionalFeatureIdForCommand(commandName);
+  if ((featureId && !isOptionalFeatureEnabled(featureId)) || !hasAvailableCommand(commandName)) {
+    const tabContext = activeTabContext();
+    addEvent(commandUnavailableMessage(commandName), "warn");
+    refreshCommands(tabContext).catch((error) => {
+      if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+    });
+    return;
+  }
+  await handleNativeSlashSelectorCommand(command);
+}
+
 function slashCommandName(message) {
   const match = String(message || "").trim().match(/^\/([^\s]+)$/);
   return match ? match[1].toLowerCase() : "";
@@ -7207,7 +7255,8 @@ function renderNativeLoading(label = "Loading…") {
 function nativeSelectorMatches(item, query) {
   if (!query) return true;
   const needle = query.toLowerCase();
-  return [item.label, item.description, item.meta, item.badge]
+  const tags = Array.isArray(item.tags) ? item.tags.map((tag) => tag?.label) : [];
+  return [item.label, item.description, item.meta, item.badge, ...tags]
     .filter(Boolean)
     .some((value) => String(value).toLowerCase().includes(needle));
 }
@@ -7240,6 +7289,10 @@ function renderNativeSelectorItems(items, { emptyText = "No choices.", onSelect,
       }
       title.append(badge);
     }
+    for (const tag of Array.isArray(item.tags) ? item.tags : []) {
+      if (!tag?.label) continue;
+      title.append(make("span", `native-selector-badge${tag.className ? ` ${tag.className}` : ""}`, tag.label));
+    }
     const detail = make("span", "native-selector-detail", item.description || "");
     const meta = make("span", "native-selector-meta", item.meta || "");
     button.append(title);
@@ -7578,6 +7631,12 @@ function nativeResourceSourceLabel(resource) {
   return [info.source, info.scope, info.origin].filter(Boolean).join(" · ") || resource?.location || "loaded resource";
 }
 
+function nativeToolOriginTag(resource) {
+  return resource?.sourceInfo?.source === "builtin"
+    ? { label: "Pi Native", className: "native-selector-badge-pi-native" }
+    : { label: "External", className: "native-selector-badge-external" };
+}
+
 function nativeResourceCounts(resources) {
   const disabled = resources.filter((resource) => resource.enabled === false).length;
   return { total: resources.length, disabled, enabled: resources.length - disabled };
@@ -7589,19 +7648,23 @@ function nativeResourceFilterMatches(resource, filter) {
   return true;
 }
 
-function renderNativeResourceToggles(resources, { savingName, filter = "all", onToggle } = {}) {
+function renderNativeResourceToggles(resources, { savingName, filter = "all", onToggle, getResourceTag } = {}) {
   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 items = filteredResources.map((resource) => {
+    const resourceTag = getResourceTag?.(resource);
+    return {
+      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",
+      tags: resourceTag ? [resourceTag] : [],
+      disabled: Boolean(savingName),
+      resource,
+    };
+  });
   const filterLabel = filter === "enabled" ? "enabled" : filter === "disabled" ? "disabled" : "all";
   renderNativeSelectorItems(items, {
     emptyText: `No ${filterLabel} entries match this filter.`,
@@ -7626,7 +7689,7 @@ function renderNativeResourceFilterActions(filter, setFilter, render) {
 }
 
 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…" });
+  openNativeCommandDialog({ title: "Tools Setup", 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 = "";
@@ -7635,6 +7698,7 @@ async function openNativeToolsSelector() {
     renderNativeResourceToggles(tools, {
       savingName,
       filter,
+      getResourceTag: nativeToolOriginTag,
       onToggle: async (tool) => {
         if (!tool || savingName) return;
         const enabledTools = new Set(tools.filter((item) => item.enabled !== false).map((item) => item.name));
@@ -7669,7 +7733,7 @@ async function openNativeToolsSelector() {
 }
 
 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…" });
+  openNativeCommandDialog({ title: "Skills Setup", 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 = "";
@@ -7725,6 +7789,15 @@ function openNativeAuthInfo(mode) {
 async function handleNativeSlashSelectorCommand(message, { usesPromptInput = false } = {}) {
   const name = slashCommandName(message);
   if (!NATIVE_SELECTOR_COMMANDS.has(name)) return false;
+  const featureId = optionalFeatureIdForCommand(name);
+  if (featureId && !isOptionalFeatureEnabled(featureId)) {
+    const tabContext = activeTabContext();
+    addEvent(commandUnavailableMessage(name), "warn");
+    refreshCommands(tabContext).catch((error) => {
+      if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+    });
+    return true;
+  }
   setComposerActionsOpen(false);
   hideCommandSuggestions();
   if (usesPromptInput) {
@@ -9208,7 +9281,7 @@ function showNextDialog() {
       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|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 && /^Publish selected packages$/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");
@@ -9510,18 +9583,46 @@ elements.gitWorkflowButton.addEventListener("click", () => {
 });
 const publishMenuContainer = elements.publishButton.parentElement;
 elements.publishButton.addEventListener("click", () => {
+  setNativeCommandMenuOpen(false);
+  setPublishMenuOpen(true);
+});
+publishMenuContainer?.addEventListener("pointerenter", () => {
+  setNativeCommandMenuOpen(false);
   setPublishMenuOpen(true);
 });
-publishMenuContainer?.addEventListener("pointerenter", () => setPublishMenuOpen(true));
 publishMenuContainer?.addEventListener("pointerleave", () => setPublishMenuOpen(false));
-publishMenuContainer?.addEventListener("focusin", () => setPublishMenuOpen(true));
+publishMenuContainer?.addEventListener("focusin", () => {
+  setNativeCommandMenuOpen(false);
+  setPublishMenuOpen(true);
+});
 publishMenuContainer?.addEventListener("focusout", () => {
   setTimeout(() => {
     if (!publishMenuContainer?.contains(document.activeElement)) setPublishMenuOpen(false);
   }, 0);
 });
+const nativeCommandMenuContainer = elements.nativeCommandMenuButton.parentElement;
+elements.nativeCommandMenuButton.addEventListener("click", () => {
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(true);
+});
+nativeCommandMenuContainer?.addEventListener("pointerenter", () => {
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(true);
+});
+nativeCommandMenuContainer?.addEventListener("pointerleave", () => setNativeCommandMenuOpen(false));
+nativeCommandMenuContainer?.addEventListener("focusin", () => {
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(true);
+});
+nativeCommandMenuContainer?.addEventListener("focusout", () => {
+  setTimeout(() => {
+    if (!nativeCommandMenuContainer?.contains(document.activeElement)) setNativeCommandMenuOpen(false);
+  }, 0);
+});
 elements.releaseNpmButton.addEventListener("click", () => runPublishWorkflow("/release-npm"));
 elements.releaseAurButton.addEventListener("click", () => runPublishWorkflow("/release-aur"));
+elements.nativeSkillsButton.addEventListener("click", () => runNativeCommandMenu("/skills"));
+elements.nativeToolsButton.addEventListener("click", () => runNativeCommandMenu("/tools"));
 elements.gitWorkflowCancelButton.addEventListener("click", () => cancelGitWorkflow());
 elements.nativeCommandDialog.addEventListener("close", () => {
   elements.nativeCommandSearch.oninput = null;
@@ -9650,8 +9751,11 @@ elements.setModelButton.addEventListener("click", async () => {
 elements.setThinkingButton.addEventListener("click", async () => {
   const tabContext = activeTabContext();
   try {
-    await api("/api/thinking", { method: "POST", body: { level: elements.thinkingSelect.value }, tabId: tabContext.tabId });
-    if (isCurrentTabContext(tabContext)) await refreshState(tabContext);
+    const response = await api("/api/thinking", { method: "POST", body: { level: elements.thinkingSelect.value }, tabId: tabContext.tabId });
+    if (isCurrentTabContext(tabContext)) {
+      if (response.data?.pending) addEvent(response.data.message || `Thinking level ${response.data.level} will apply to the next prompt.`, "info");
+      await refreshState(tabContext);
+    }
   } catch (error) {
     if (isCurrentTabContext(tabContext)) addEvent(error.message, "error");
   }
@@ -9719,6 +9823,9 @@ document.addEventListener("pointerdown", (event) => {
   if (publishMenuOpen && !event.target?.closest?.(".composer-publish-menu")) {
     setPublishMenuOpen(false);
   }
+  if (nativeCommandMenuOpen && !event.target?.closest?.(".composer-native-command-menu")) {
+    setNativeCommandMenuOpen(false);
+  }
   if (document.body.classList.contains("mobile-tabs-expanded") && !elements.tabBar.contains(event.target) && !elements.terminalTabsToggleButton.contains(event.target)) {
     setMobileTabsExpanded(false);
   }
@@ -9805,6 +9912,10 @@ window.addEventListener("keydown", (event) => {
     setPublishMenuOpen(false);
     return;
   }
+  if (nativeCommandMenuOpen) {
+    setNativeCommandMenuOpen(false);
+    return;
+  }
   if (document.body.classList.contains("composer-actions-open")) {
     setComposerActionsOpen(false);
     return;

package/public/index.html

@@ -12,7 +12,7 @@
     <link rel="manifest" href="/manifest.webmanifest" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <link rel="stylesheet" href="/styles.css?v=20" />
+    <link rel="stylesheet" href="/styles.css?v=23" />
   </head>
   <body>
     <button id="sidePanelExpandButton" class="side-panel-expand-button" type="button" aria-controls="sidePanel" aria-expanded="false" aria-label="Expand side panel" title="Expand side panel">
@@ -133,6 +133,27 @@
                   </button>
                 </div>
               </div>
+              <div class="composer-publish-menu composer-native-command-menu">
+                <button
+                  id="nativeCommandMenuButton"
+                  class="composer-icon-button composer-publish-button composer-native-command-button"
+                  type="button"
+                  title="Open skills and tools commands"
+                  aria-label="Open /skills and /tools commands"
+                  aria-haspopup="menu"
+                  aria-expanded="false"
+                  aria-controls="nativeCommandMenu"
+                  data-tooltip="Skills/tools setup: open skill or tool setup."
+                ><svg class="composer-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M4 5h16v14H4z" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="m7 10 2.5 2L7 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 15h5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></button>
+                <div id="nativeCommandMenu" class="composer-publish-menu-panel composer-native-command-menu-panel" role="menu" aria-label="Skills and tools setup">
+                  <button id="nativeSkillsButton" class="composer-publish-menu-item composer-native-command-menu-item" type="button" role="menuitem" data-command="/skills">
+                    <span>Skills Setup</span>
+                  </button>
+                  <button id="nativeToolsButton" class="composer-publish-menu-item composer-native-command-menu-item" type="button" role="menuitem" data-command="/tools">
+                    <span>Tools Setup</span>
+                  </button>
+                </div>
+              </div>
             </div>
             <div class="spacer"></div>
             <button
@@ -364,6 +385,6 @@
       </form>
     </dialog>
 
-    <script type="module" src="/app.js?v=20"></script>
+    <script type="module" src="/app.js?v=23"></script>
   </body>
 </html>

package/public/service-worker.js

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

package/public/styles.css

@@ -3092,6 +3092,22 @@ summary { cursor: pointer; color: var(--warning); }
 .composer-publish-button.menu-open {
   background: linear-gradient(120deg, var(--ctp-peach), var(--ctp-yellow), var(--ctp-mauve));
 }
+.composer-native-command-button {
+  color: var(--ctp-mauve);
+  border-color: rgba(203, 166, 247, 0.40);
+  background:
+    linear-gradient(120deg, rgba(203, 166, 247, 0.15), rgba(137, 180, 250, 0.10)),
+    linear-gradient(180deg, rgba(var(--ctp-surface-rgb), 0.88), rgba(var(--ctp-crust-rgb), 0.88));
+}
+.composer-native-command-button:hover,
+.composer-native-command-button.menu-open {
+  color: #11111b;
+  background: linear-gradient(120deg, var(--ctp-mauve), var(--ctp-blue), var(--ctp-teal));
+  border-color: transparent;
+}
+.composer-native-command-menu.open .composer-native-command-button {
+  border-color: rgba(203, 166, 247, 0.62);
+}
 .composer-publish-menu-panel {
   position: absolute;
   z-index: 100;
@@ -3141,6 +3157,20 @@ summary { cursor: pointer; color: var(--warning); }
   background: linear-gradient(120deg, var(--ctp-peach), var(--ctp-yellow));
   box-shadow: 0 0 1rem rgba(250, 179, 135, 0.20);
 }
+.composer-native-command-menu-item {
+  color: var(--ctp-mauve);
+  border-color: rgba(203, 166, 247, 0.32);
+  background:
+    linear-gradient(120deg, rgba(203, 166, 247, 0.12), rgba(137, 180, 250, 0.08)),
+    var(--ctp-crust);
+}
+.composer-native-command-menu-item:hover,
+.composer-native-command-menu-item:focus-visible {
+  color: #11111b;
+  border-color: transparent;
+  background: linear-gradient(120deg, var(--ctp-mauve), var(--ctp-blue));
+  box-shadow: 0 0 1rem rgba(203, 166, 247, 0.20);
+}
 .composer button[data-tooltip] {
   position: relative;
 }
@@ -3213,6 +3243,15 @@ summary { cursor: pointer; color: var(--warning); }
 .composer-input-row button[data-tooltip].tooltip-open::before {
   transform: translate(-1.2rem, 0) rotate(45deg);
 }
+.composer-publish-menu:hover > .composer-publish-button[data-tooltip]::before,
+.composer-publish-menu:hover > .composer-publish-button[data-tooltip]::after,
+.composer-publish-menu:focus-within > .composer-publish-button[data-tooltip]::before,
+.composer-publish-menu:focus-within > .composer-publish-button[data-tooltip]::after,
+.composer-publish-menu.open > .composer-publish-button[data-tooltip]::before,
+.composer-publish-menu.open > .composer-publish-button[data-tooltip]::after {
+  display: none !important;
+  opacity: 0 !important;
+}
 
 .details {
   display: grid;
@@ -3489,6 +3528,18 @@ summary { cursor: pointer; color: var(--warning); }
   color: #ff9f43 !important;
   background: rgba(255, 159, 67, 0.10);
 }
+.native-selector-badge.native-selector-badge-pi-native,
+.native-command-body:has(.native-resource-summary) .native-selector-badge.native-selector-badge-pi-native {
+  border-color: rgba(137, 180, 250, 0.48);
+  color: var(--ctp-blue);
+  background: rgba(137, 180, 250, 0.10);
+}
+.native-selector-badge.native-selector-badge-external,
+.native-command-body:has(.native-resource-summary) .native-selector-badge.native-selector-badge-external {
+  border-color: rgba(203, 166, 247, 0.46);
+  color: var(--ctp-mauve);
+  background: rgba(203, 166, 247, 0.10);
+}
 .native-selector-detail,
 .native-selector-meta,
 .native-settings-hint {

package/tests/mobile-static.test.mjs

@@ -98,6 +98,10 @@ assert.doesNotMatch(html, /class="side-panel-controls"[\s\S]*id="abortButton"/,
 assert.match(html, /id="publishButton"[\s\S]*?aria-controls="publishMenu"/, "composer should expose a Publish workflow menu button");
 assert.match(html, /id="releaseNpmButton"[^>]*data-command="\/release-npm"[\s\S]*?<span>NPM Release<\/span>/, "Publish menu should include the npm release workflow by label");
 assert.match(html, /id="releaseAurButton"[^>]*data-command="\/release-aur"[\s\S]*?<span>AUR Release<\/span>/, "Publish menu should include the AUR release workflow by label");
+assert.match(html, /id="nativeCommandMenuButton"[\s\S]*?aria-controls="nativeCommandMenu"/, "composer should expose a /skills and /tools command menu button");
+assert.ok(html.indexOf('id="publishButton"') < html.indexOf('id="nativeCommandMenuButton"'), "skills/tools command menu should render immediately after the Publish workflow button");
+assert.match(html, /id="nativeSkillsButton"[^>]*data-command="\/skills"[\s\S]*?<span>Skills Setup<\/span>/, "skills/tools command menu should include Skills Setup");
+assert.match(html, /id="nativeToolsButton"[^>]*data-command="\/tools"[\s\S]*?<span>Tools Setup<\/span>/, "skills/tools command menu should include Tools Setup");
 assert.doesNotMatch(html, /<code>\/release-(?:npm|aur)<\/code>/, "Publish menu should not show slash command names as option labels");
 assert.doesNotMatch(html, /data-tooltip="[^"]*\/release-(?:npm|aur)/, "Publish tooltip should not show slash command names");
 assert.match(html, /id="steerButton"[\s\S]*?data-tooltip="Steer usage:/, "Steer should explain type-first usage in a tooltip");
@@ -180,9 +184,12 @@ assert.match(css, /\.action-feedback-controls:not\(:hover\):not\(:focus-within\)
 assert.match(css, /\.action-feedback-button\.feedback-question\.active/, "question-mark reaction should have selected styling");
 assert.match(css, /\.composer-row button\[data-tooltip\]::after/, "composer button tooltips should be shared across Git, Steer, and Follow-up buttons");
 assert.match(css, /\.composer-row button\[data-tooltip\]\.tooltip-open::after/, "composer button tooltips should be triggerable from JS for empty mobile taps");
+assert.match(css, /\.composer-publish-menu:hover > \.composer-publish-button\[data-tooltip\]::before,[\s\S]*?\.composer-publish-menu\.open > \.composer-publish-button\[data-tooltip\]::after \{[\s\S]*?display:\s*none !important;[\s\S]*?opacity:\s*0 !important;/, "dropdown button tooltips should hide while publish or setup menus are open");
 assert.match(css, /\.composer-publish-menu-panel \{[\s\S]*?display:\s*none;[\s\S]*?flex-direction:\s*column/, "Publish workflow menu should hide when closed and expand like grouped tabs");
 assert.match(css, /\.composer-publish-menu:hover \.composer-publish-menu-panel,[\s\S]*?\.composer-publish-menu:focus-within \.composer-publish-menu-panel,[\s\S]*?\.composer-publish-menu\.open \.composer-publish-menu-panel \{\n\s+display:\s*flex;/, "Publish workflow menu should open on hover, focus, or explicit open state");
-assert.match(css, /\.composer-actions-panel > \.composer-publish-menu[\s\S]*?grid-column: span 1/, "Publish workflow button should fit beside Git workflow in mobile actions");
+assert.match(css, /\.composer-native-command-button \{[\s\S]*?color:\s*var\(--ctp-mauve\)/, "skills/tools command menu should have a distinct slash-command button style");
+assert.match(css, /\.composer-native-command-menu-item \{[\s\S]*?color:\s*var\(--ctp-mauve\)/, "skills/tools command menu items should be styled separately from publish actions");
+assert.match(css, /\.composer-actions-panel > \.composer-publish-menu[\s\S]*?grid-column: span 1/, "Publish and command menu buttons should fit beside Git workflow in mobile actions");
 assert.match(css, /\.composer-actions-panel[\s\S]*?bottom:\s*calc\(100% \+ 0\.42rem\)/, "mobile composer actions should open as an above-composer sheet");
 assert.match(css, /body\.composer-actions-open \.composer-actions-panel \{ display: grid; \}/, "composer actions panel should only open when toggled");
 assert.match(css, /\.terminal-tabs-toggle-button \{ display: none; \}/, "terminal tab toggle should be hidden outside mobile CSS");
@@ -220,6 +227,8 @@ assert.match(css, /\.extension-dialog[\s\S]*?inset:\s*auto 0 0 0/, "mobile dialo
 assert.match(css, /#dialogMessage \{[\s\S]*?white-space:\s*pre-wrap/, "extension dialog messages should preserve multiline prompts");
 assert.match(css, /\.native-command-dialog \{[\s\S]*?width:\s*min\(56rem/, "native slash selector dialog should have roomy desktop layout");
 assert.match(css, /\.native-selector-item \{[\s\S]*?--tree-depth/, "native slash selector choices should support tree indentation");
+assert.match(css, /\.native-selector-badge\.native-selector-badge-pi-native[\s\S]*?color:\s*var\(--ctp-blue\)/, "Tools Setup should distinguish Pi native tools with a Pi Native tag");
+assert.match(css, /\.native-selector-badge\.native-selector-badge-external[\s\S]*?color:\s*var\(--ctp-mauve\)/, "Tools Setup should distinguish external tools with an External tag");
 assert.match(css, /\.native-settings-grid,[\s\S]*?\.native-tree-options \{[\s\S]*?grid-template-columns:/, "native settings and tree selector options should use responsive grids");
 assert.match(css, /\.extension-dialog\.guardrail-dialog[\s\S]*?border-color:\s*rgba\(249, 226, 175/, "guardrail dialogs should have warning-specific styling");
 assert.match(css, /\.extension-dialog\.release-dialog[\s\S]*?width:\s*min\(64rem/, "release confirmation dialogs should have more horizontal room");
@@ -339,6 +348,9 @@ assert.match(app, /OPTIONAL_FEATURES_STORAGE_KEY/, "optional feature disable tog
 assert.match(app, /function renderOptionalFeatureDependentDisplays\(\)[\s\S]*renderOptionalFeatureControls\(\);[\s\S]*renderThemeSelect\(\);[\s\S]*renderWidgets\(\);[\s\S]*renderStatus\(\);[\s\S]*renderCommands\(\);[\s\S]*renderAllMessages\(\{ preserveScroll: true \}\);[\s\S]*if \(streamRawText\) renderStreamingAssistantText\(\);/, "optional feature toggles should immediately refresh visible controls, commands, transcript, and live stream displays");
 assert.match(app, /function setOptionalFeatureDisabled\(featureId, disabled\)[\s\S]*renderOptionalFeatureDependentDisplays\(\);[\s\S]*const tabContext = activeTabContext\(\);[\s\S]*refreshCommands\(tabContext\)/, "optional feature enable/disable should re-render the GUI and then refresh command capabilities");
 assert.match(app, /function setOptionalControlState\(button, available, unavailableTitle\)[\s\S]*setAttribute\("aria-label", nextAriaLabel\)[\s\S]*setAttribute\("data-tooltip", nextTooltip\)/, "optional feature button disabled state should update accessible labels and visible tooltips");
+assert.match(app, /\["skills", "tuiSkillsCommand"\][\s\S]*\["tools", "tuiToolsCommand"\]/, "optional feature toggles should gate /skills and /tools command surfaces");
+assert.match(app, /function setNativeCommandMenuOpen\(open\)/, "frontend should track the skills/tools command menu open state separately from Publish");
+assert.match(app, /nativeSkillsButton\.hidden = !isOptionalFeatureEnabled\("tuiSkillsCommand"\)[\s\S]*nativeToolsButton\.hidden = !isOptionalFeatureEnabled\("tuiToolsCommand"\)/, "skills/tools menu items should be hidden by their optional feature toggles");
 assert.match(app, /function renderCommands\(\)/, "side-panel commands should be re-renderable from current optional feature state");
 assert.match(app, /function installOptionalFeature\(featureId\)/, "optional features should expose an install action");
 assert.match(app, /api\("\/api\/optional-feature-install"/, "optional feature install action should call the backend installer endpoint");
@@ -486,10 +498,18 @@ assert.match(app, /function showComposerButtonTooltip\(button\)/, "empty mode-bu
 assert.match(app, /sendPromptFromModeButton\("steer", elements\.steerButton\)/, "Steer should show tooltip instead of silently doing nothing when input is empty");
 assert.match(app, /sendPromptFromModeButton\("follow-up", elements\.followUpButton\)/, "Follow-up should show tooltip instead of silently doing nothing when input is empty");
 assert.match(app, /function runPublishWorkflow\(command\)[\s\S]*?sendPrompt\("prompt", command\)/, "Publish workflows should send slash commands directly without replacing the draft");
-assert.match(app, /publishMenuContainer\?\.addEventListener\("pointerenter", \(\) => setPublishMenuOpen\(true\)\)/, "Publish menu should expand on hover");
+assert.match(app, /async function runNativeCommandMenu\(command\)[\s\S]*?await handleNativeSlashSelectorCommand\(command\)/, "skills/tools command menu should open native selector dialogs directly");
+assert.match(app, /function nativeToolOriginTag\(resource\)[\s\S]*?sourceInfo\?\.source === "builtin"[\s\S]*?label: "Pi Native"[\s\S]*?label: "External"/, "Tools Setup should classify built-in Pi tools separately from external tools");
+assert.match(app, /renderNativeResourceToggles\(tools, \{[\s\S]*?getResourceTag: nativeToolOriginTag/, "Tools Setup should render Pi Native\/External tags");
+assert.match(app, /const tags = Array\.isArray\(item\.tags\)[\s\S]*?item\.badge, \.\.\.tags/, "native selector filtering should include extra resource tags");
+assert.match(app, /publishMenuContainer\?\.addEventListener\("pointerenter", \(\) => \{[\s\S]*?setPublishMenuOpen\(true\);[\s\S]*?\}\)/, "Publish menu should expand on hover");
 assert.match(app, /publishMenuContainer\?\.addEventListener\("pointerleave", \(\) => setPublishMenuOpen\(false\)\)/, "Publish menu should collapse after hover leaves");
+assert.match(app, /nativeCommandMenuContainer\?\.addEventListener\("pointerenter", \(\) => \{[\s\S]*?setNativeCommandMenuOpen\(true\);[\s\S]*?\}\)/, "skills/tools command menu should expand on hover");
+assert.match(app, /nativeCommandMenuContainer\?\.addEventListener\("pointerleave", \(\) => setNativeCommandMenuOpen\(false\)\)/, "skills/tools command menu should collapse after hover leaves");
 assert.match(app, /releaseNpmButton\.addEventListener\("click", \(\) => runPublishWorkflow\("\/release-npm"\)\)/, "Publish menu should launch /release-npm");
 assert.match(app, /releaseAurButton\.addEventListener\("click", \(\) => runPublishWorkflow\("\/release-aur"\)\)/, "Publish menu should launch /release-aur");
+assert.match(app, /nativeSkillsButton\.addEventListener\("click", \(\) => runNativeCommandMenu\("\/skills"\)\)/, "skills/tools command menu should launch /skills");
+assert.match(app, /nativeToolsButton\.addEventListener\("click", \(\) => runNativeCommandMenu\("\/tools"\)\)/, "skills/tools command menu should launch /tools");
 assert.match(app, /async function sendPrompt\(kind = "prompt", explicitMessage\)/, "prompt sending should accept direct messages that bypass the input field");
 assert.match(app, /const rawMessage = usesPromptInput \? elements\.promptInput\.value : explicitMessage/, "direct prompt sends should not read the input textarea");
 assert.match(app, /if \(usesPromptInput\) \{[\s\S]*?if \(targetStillActive\) \{[\s\S]*?elements\.promptInput\.value = "";/, "direct prompt sends should preserve the input textarea draft");
@@ -600,7 +620,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-v20"/, "PWA service worker should define an app-shell cache");
+assert.match(serviceWorker, /const CACHE_NAME = "pi-webui-pwa-v23"/, "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");
@@ -682,7 +702,7 @@ assert.match(app, /function triggerNativeDownload\(download\)/, "frontend should
 assert.match(server, /case "\/api\/bash": \{[\s\S]*?type: "bash", command, excludeFromContext: body\.excludeFromContext === true/, "server should expose user bash execution with exclude-from-context support");
 assert.match(server, /case "\/api\/abort-bash":[\s\S]*?type: "abort_bash"/, "server should expose user bash abort");
 assert.match(server, /function sendQueuedBashCommand\(tab, command\)/, "server should serialize user bash through a per-tab FIFO queue");
-assert.match(server, /command\.type === "bash" \? await sendQueuedBashCommand\(tab, command\) : await tab\.rpc\.send\(command\)/, "POST routing should use the bash FIFO queue before RPC send");
+assert.match(server, /command\.type === "bash"[\s\S]*?await sendQueuedBashCommand\(tab, command\)[\s\S]*?: await tab\.rpc\.send\(command\)/, "POST routing should use the bash FIFO queue before RPC send");
 assert.match(app, /function parseUserBashInput\(message\)/, "frontend should parse leading ! and !! bash commands");
 assert.match(app, /let userBashQueuesByTab = new Map\(\)/, "frontend should keep a per-tab user bash queue");
 assert.match(app, /enqueueUserBashCommand\(parsed, \{ usesPromptInput, targetTabId \}\)/, "frontend should queue additional bash commands while one is active");
@@ -720,6 +740,11 @@ assert.match(server, /const OPTIONAL_FEATURE_PACKAGES = new Map/, "server should
 assert.match(server, /\["tuiSkillsCommand", "@firstpick\/pi-extension-setup-skills"\]/, "server should allow installing the TUI skills optional feature");
 assert.match(server, /\["tuiToolsCommand", "@firstpick\/pi-extension-tools"\]/, "server should allow installing the TUI tools optional feature");
 assert.match(server, /function installOptionalFeaturePackage\(featureId\)/, "server should provide optional feature package installation helper");
+assert.match(server, /PI_WEBUI_OPTIONAL_FEATURE_INSTALL_ROOT/, "optional feature installs should support an explicit package-manager root override");
+assert.match(server, /function configuredAgentNpmRoot\(\)/, "global Web UI launches should install optional feature packages into Pi's agent npm root, not the npm global prefix");
+assert.match(server, /installRootDeclaresPackage\(.*?@firstpick\/pi-package-webui/s, "optional feature installs should only reuse a node_modules parent that declares the Web UI package dependency");
+assert.match(server, /if \(webuiDevServer\) return installRoot/, "source-checkout Web UI launches should still use the checkout root for optional feature installs");
+assert.match(server, /Could not determine a safe optional feature install root/, "optional feature installs should fail closed when no declared package root can be found");
 assert.match(server, /url\.pathname === "\/api\/optional-feature-install" && req\.method === "POST"/, "server should expose optional feature install endpoint");
 assert.match(server, /Installing optional Web UI features is only allowed from localhost/, "optional feature install endpoint should be localhost-only");
 assert.match(server, /url\.pathname === "\/api\/themes" && req\.method === "GET"/, "server should expose GET /api/themes");

package/tests/native-parity.test.mjs

@@ -146,6 +146,10 @@ assert.match(app, /api\("\/api\/abort-bash", \{ method: "POST", body: \{\}, tabI
 assert.match(server, /async function cycleTabModel\(tab, direction = "forward"\)/, "server should provide scoped\/all model cycling helper");
 assert.match(server, /url\.pathname === "\/api\/model-cycle" && req\.method === "POST"/, "server should expose model-cycle endpoint for shortcuts");
 assert.match(server, /case "\/api\/thinking-cycle":[\s\S]*?type: "cycle_thinking_level"/, "server should expose thinking-cycle endpoint for shortcuts");
+assert.match(server, /async function setThinkingLevelForTab\(tab, level, \{ allowPending = true \} = \{\}\)[\s\S]*?stateIsBusyForSettings\(stateResult\.data\)[\s\S]*?tab\.pendingThinkingLevel = level/, "server should queue side-panel thinking changes while a tab is running");
+assert.match(server, /const pendingThinkingResponse = await applyPendingThinkingBeforePrompt\(tab\)/, "server should apply queued thinking level before the next prompt");
+assert.match(app, /pendingThinkingLevel[\s\S]*?next prompt/, "frontend should show queued thinking changes as applying on the next prompt");
+assert.match(app, /response\.data\?\.pending[\s\S]*?will apply to the next prompt/, "frontend should announce queued side-panel thinking changes");
 assert.match(app, /function handleNativeAppShortcut\(event\)/, "frontend should centralize native app shortcut handling");
 assert.match(app, /openNativeModelSelector\(\)/, "Ctrl+L shortcut should open the native model selector");
 assert.match(app, /cycleModelFromShortcut\(event\.shiftKey \? "backward" : "forward"\)/, "Ctrl+P shortcuts should cycle models forward and backward");
@@ -157,6 +161,6 @@ assert.match(app, /event\.altKey && key === "ArrowUp"[\s\S]*?restoreQueuedMessag
 assert.match(app, /let userBashQueuesByTab = new Map\(\)/, "frontend should track per-tab user bash FIFO queues");
 assert.match(app, /enqueueUserBashCommand\(parsed, \{ usesPromptInput, targetTabId \}\)/, "user bash should enqueue while an active or queued bash command exists");
 assert.match(server, /function sendQueuedBashCommand\(tab, command\)/, "server should serialize user bash commands per tab");
-assert.match(server, /command\.type === "bash" \? await sendQueuedBashCommand\(tab, command\) : await tab\.rpc\.send\(command\)/, "generic POST handling should route bash through the FIFO queue");
+assert.match(server, /command\.type === "bash"[\s\S]*?await sendQueuedBashCommand\(tab, command\)[\s\S]*?: await tab\.rpc\.send\(command\)/, "generic POST handling should route bash through the FIFO queue");
 assert.ok(pkg.files.includes("WEBUI_TUI_NATIVE_PARITY.json"), "published package should include the native parity matrix");
 assert.ok(pkg.files.includes("webui-rpc-helper.mjs"), "published package should include the Web UI RPC helper extension");