@firstpick/pi-package-webui 0.2.2 → 0.2.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "description": "Pi Web UI companion package with a local browser UI CLI plus /webui-start and /webui-status commands.",
   "license": "MIT",
   "type": "module",
@@ -20,13 +20,17 @@
       "../pi-extension-git-footer-status/index.ts",
       "../pi-extension-release-aur/index.ts",
       "../pi-extension-release-npm/index.ts",
+      "../pi-extension-setup-skills/index.ts",
       "../pi-extension-stats/index.ts",
       "../pi-extension-todo-progress/index.ts",
+      "../pi-extension-tools/index.ts",
       "node_modules/@firstpick/pi-extension-git-footer-status/index.ts",
       "node_modules/@firstpick/pi-extension-release-aur/index.ts",
       "node_modules/@firstpick/pi-extension-release-npm/index.ts",
+      "node_modules/@firstpick/pi-extension-setup-skills/index.ts",
       "node_modules/@firstpick/pi-extension-stats/index.ts",
-      "node_modules/@firstpick/pi-extension-todo-progress/index.ts"
+      "node_modules/@firstpick/pi-extension-todo-progress/index.ts",
+      "node_modules/@firstpick/pi-extension-tools/index.ts"
     ],
     "skills": [
       "../pi-extension-release-aur/skills",
@@ -45,7 +49,7 @@
     "pi-webui": "./bin/pi-webui.mjs"
   },
   "scripts": {
-    "check": "node --check public/app.js && node --check bin/pi-webui.mjs && node tests/mobile-static.test.mjs && node tests/native-parity.test.mjs",
+    "check": "node --check public/app.js && node --check bin/pi-webui.mjs && node --check webui-rpc-helper.mjs && node tests/mobile-static.test.mjs && node tests/native-parity.test.mjs",
     "test": "node tests/mobile-static.test.mjs && node tests/native-parity.test.mjs"
   },
   "dependencies": {
@@ -55,13 +59,16 @@
     "@firstpick/pi-extension-git-footer-status": "^0.2.1",
     "@firstpick/pi-extension-release-aur": "^0.1.3",
     "@firstpick/pi-extension-release-npm": "^0.3.3",
+    "@firstpick/pi-extension-setup-skills": "^0.1.5",
     "@firstpick/pi-extension-stats": "^0.2.0",
     "@firstpick/pi-extension-todo-progress": "^0.1.7",
+    "@firstpick/pi-extension-tools": "^0.1.4",
     "@firstpick/pi-prompts-git-pr": "^0.1.0",
     "@firstpick/pi-themes-bundle": "^0.1.1"
   },
   "files": [
     "index.ts",
+    "webui-rpc-helper.mjs",
     "bin",
     "public",
     "images",

package/public/app.js

@@ -144,6 +144,7 @@ let pathFastPicksLoadPromise = null;
 let mobileTabsExpanded = false;
 let openTerminalTabGroupKey = null;
 let availableCommands = [];
+let rawAvailableCommands = [];
 let commandSuggestions = [];
 let pathSuggestions = [];
 let suggestionMode = "none";
@@ -285,7 +286,9 @@ const optionalFeatureAvailability = {
   releaseAur: false,
   statsCommand: false,
   gitFooterStatus: false,
+  tuiSkillsCommand: false,
   todoProgressWidget: false,
+  tuiToolsCommand: false,
   themeBundle: false,
 };
 const OPTIONAL_FEATURES = [
@@ -310,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",
@@ -317,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",
@@ -348,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() {
@@ -2398,6 +2415,7 @@ function resetActiveTabUi() {
   liveToolRuns.clear();
   liveToolCards.clear();
   availableCommands = [];
+  rawAvailableCommands = [];
   resetOptionalFeatureAvailability();
   commandSuggestions = [];
   pathSuggestions = [];
@@ -3964,10 +3982,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 ?? "?"),
@@ -3978,7 +4001,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();
@@ -6930,6 +6953,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);
 }
@@ -6942,6 +6966,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.";
@@ -6988,7 +7016,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();
 }
@@ -7131,7 +7161,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 = "" } = {}) {
@@ -7204,7 +7234,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);
@@ -7538,6 +7578,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." });
@@ -7582,6 +7761,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);
@@ -7969,7 +8154,7 @@ function syncModelSelectToState() {
   }
 }
 
-function normalizeCommands(commands) {
+function normalizeCommands(commands, { dedupe = true } = {}) {
   const seen = new Set();
   return (commands || [])
     .map((command) => ({
@@ -7977,9 +8162,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;
     })
@@ -8358,6 +8546,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();
@@ -9466,8 +9655,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");
   }

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" />
+    <link rel="stylesheet" href="/styles.css?v=20" />
   </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">
@@ -364,6 +364,6 @@
       </form>
     </dialog>
 
-    <script type="module" src="/app.js"></script>
+    <script type="module" src="/app.js?v=20"></script>
   </body>
 </html>

package/public/service-worker.js

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

package/public/styles.css

@@ -3464,6 +3464,31 @@ summary { cursor: pointer; color: var(--warning); }
   text-transform: uppercase;
   letter-spacing: 0.07em;
 }
+.native-command-body:has(.native-resource-summary) .native-selector-badge {
+  border-color: rgba(255, 159, 67, 0.62);
+  color: #ff9f43;
+  background: rgba(255, 159, 67, 0.10);
+}
+.native-selector-badge.enabled,
+.native-selector-badge.native-selector-badge-enabled,
+.native-selector-badge[data-badge-state="enabled"],
+.native-command-body:has(.native-resource-summary) .native-selector-badge.enabled,
+.native-command-body:has(.native-resource-summary) .native-selector-badge.native-selector-badge-enabled,
+.native-command-body:has(.native-resource-summary) .native-selector-badge[data-badge-state="enabled"] {
+  border-color: rgba(166, 227, 161, 0.32);
+  color: var(--ctp-green);
+  background: transparent;
+}
+.native-selector-badge.disabled,
+.native-selector-badge.native-selector-badge-disabled,
+.native-selector-badge[data-badge-state="disabled"],
+.native-command-body:has(.native-resource-summary) .native-selector-badge.disabled,
+.native-command-body:has(.native-resource-summary) .native-selector-badge.native-selector-badge-disabled,
+.native-command-body:has(.native-resource-summary) .native-selector-badge[data-badge-state="disabled"] {
+  border-color: rgba(255, 159, 67, 0.62) !important;
+  color: #ff9f43 !important;
+  background: rgba(255, 159, 67, 0.10);
+}
 .native-selector-detail,
 .native-selector-meta,
 .native-settings-hint {

package/tests/mobile-static.test.mjs

@@ -27,8 +27,10 @@ const companionDependencies = {
   "@firstpick/pi-extension-git-footer-status": "^0.2.1",
   "@firstpick/pi-extension-release-aur": "^0.1.3",
   "@firstpick/pi-extension-release-npm": "^0.3.3",
+  "@firstpick/pi-extension-setup-skills": "^0.1.5",
   "@firstpick/pi-extension-stats": "^0.2.0",
   "@firstpick/pi-extension-todo-progress": "^0.1.7",
+  "@firstpick/pi-extension-tools": "^0.1.4",
   "@firstpick/pi-prompts-git-pr": "^0.1.0",
   "@firstpick/pi-themes-bundle": "^0.1.1",
 };
@@ -340,7 +342,9 @@ assert.match(app, /function setOptionalControlState\(button, available, unavaila
 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");
-assert.match(app, /function updateOptionalFeatureAvailability\(\)[\s\S]*hasAvailableCommand\("git-staged-msg"\)[\s\S]*hasAvailableCommand\("release-npm"\)[\s\S]*hasAvailableCommand\("release-aur"\)[\s\S]*hasAvailableCommand\("todo-progress-status"\)/, "optional feature detection should call RPC-visible commands directly");
+assert.match(app, /id: "tuiSkillsCommand"[\s\S]*?@firstpick\/pi-extension-setup-skills/, "optional features should include the TUI skills command companion");
+assert.match(app, /id: "tuiToolsCommand"[\s\S]*?@firstpick\/pi-extension-tools/, "optional features should include the TUI tools command companion");
+assert.match(app, /function updateOptionalFeatureAvailability\(\)[\s\S]*hasAvailableCommand\("git-staged-msg"\)[\s\S]*hasAvailableCommand\("release-npm"\)[\s\S]*hasAvailableCommand\("release-aur"\)[\s\S]*hasLoadedRpcCommand\("skills"\)[\s\S]*hasAvailableCommand\("todo-progress-status"\)[\s\S]*hasLoadedRpcCommand\("tools"\)/, "optional feature detection should call RPC-visible commands directly and distinguish native resource selectors from TUI companions");
 assert.match(app, /if \(!isOptionalFeatureEnabled\("todoProgressWidget"\)\) return String\(text \|\| ""\)/, "todo progress line stripping should only run when the todo feature is detected and enabled");
 assert.match(app, /const releasePrompt = detectedReleasePrompt && isOptionalFeatureEnabled\(detectedReleasePrompt\.featureId\) \? detectedReleasePrompt : null/, "release confirmation dialogs should use specialized rendering only when their release optional feature is enabled");
 assert.match(app, /case "webui_tab_reloaded":[\s\S]*resetOptionalFeatureAvailability\(\)/, "optional feature state should reset when the RPC tab reloads resources");
@@ -490,7 +494,7 @@ assert.match(app, /async function sendPrompt\(kind = "prompt", explicitMessage\)
 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");
 assert.match(app, /make\("button", "command-item"\)[\s\S]*?sendPrompt\("prompt", `\/\$\{command\.name\}`\)/, "side-panel command clicks should send the slash command directly");
-assert.match(app, /const NATIVE_SELECTOR_COMMANDS = new Set\(\["model", "settings", "theme", "fork", "clone", "resume", "tree", "login", "logout", "scoped-models"\]\)/, "frontend should route native slash commands into selector UIs");
+assert.match(app, /const NATIVE_SELECTOR_COMMANDS = new Set\(\["model", "settings", "theme", "fork", "clone", "resume", "tree", "login", "logout", "scoped-models", "tools", "skills"\]\)/, "frontend should route native slash commands into selector UIs");
 assert.match(app, /async function handleNativeSlashSelectorCommand\(message/, "frontend should intercept exact native slash commands before prompt forwarding");
 assert.match(app, /kind === "prompt" && attachments\.length === 0 && await handleNativeSlashSelectorCommand/, "prompt sending should open native selector dialogs before marking a run active");
 assert.match(app, /function openNativeModelSelector\(\)[\s\S]*?nativeCommandApi\("\/api\/models"\)/, "native /model selector should load models through the active tab API");
@@ -499,7 +503,7 @@ assert.match(app, /function openNativeForkSelector\(\)[\s\S]*?\/api\/fork-messag
 assert.match(app, /function openNativeResumeSelector\(scope = "current"\)[\s\S]*?\/api\/sessions\?scope=\$\{encodeURIComponent\(selectedScope\)\}/, "native /resume selector should list current-cwd or all sessions");
 assert.match(app, /function openNativeTreeSelector\(\)[\s\S]*?\/api\/session-tree[\s\S]*?\/api\/tree-navigate/, "native /tree selector should list tree entries and navigate through the backend helper");
 assert.match(app, /Provider credential entry is intentionally not implemented in the browser yet/, "native /login should remain a safe non-secret guidance dialog");
-assert.match(app, /const HIDDEN_COMMAND_NAMES = new Set\(\["webui-tree-navigate"\]\)/, "internal Web UI helper commands should stay out of command pickers");
+assert.match(app, /const HIDDEN_COMMAND_NAMES = new Set\(\["webui-tree-navigate", "webui-helper"\]\)/, "internal Web UI helper commands should stay out of command pickers");
 assert.match(app, /function shouldSendPromptFromEnter\(event\)/, "prompt keyboard handling should be centralized");
 assert.match(app, /const PROMPT_HISTORY_STORAGE_KEY = "pi-webui-prompt-history"/, "prompt history should be persisted per browser for keyboard recall");
 assert.match(app, /function recallPreviousPromptFromHistory\(\)/, "prompt history should support recalling older prompts from the textarea");
@@ -596,7 +600,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-v18"/, "PWA service worker should define an app-shell cache");
+assert.match(serviceWorker, /const CACHE_NAME = "pi-webui-pwa-v20"/, "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");
@@ -678,7 +682,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");
@@ -713,7 +717,14 @@ assert.match(server, /type: "set_follow_up_mode"/, "server should expose follow-
 assert.match(server, /type: "set_auto_compaction"/, "server should expose auto-compaction changes for native /settings");
 assert.match(server, /@firstpick\/pi-themes-bundle/, "server should discover themes from the optional theme package");
 assert.match(server, /const OPTIONAL_FEATURE_PACKAGES = new Map/, "server should whitelist optional feature packages for install actions");
+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");
@@ -761,13 +772,17 @@ for (const extensionPath of [
   "../pi-extension-git-footer-status/index.ts",
   "../pi-extension-release-aur/index.ts",
   "../pi-extension-release-npm/index.ts",
+  "../pi-extension-setup-skills/index.ts",
   "../pi-extension-stats/index.ts",
   "../pi-extension-todo-progress/index.ts",
+  "../pi-extension-tools/index.ts",
   "node_modules/@firstpick/pi-extension-git-footer-status/index.ts",
   "node_modules/@firstpick/pi-extension-release-aur/index.ts",
   "node_modules/@firstpick/pi-extension-release-npm/index.ts",
+  "node_modules/@firstpick/pi-extension-setup-skills/index.ts",
   "node_modules/@firstpick/pi-extension-stats/index.ts",
   "node_modules/@firstpick/pi-extension-todo-progress/index.ts",
+  "node_modules/@firstpick/pi-extension-tools/index.ts",
 ]) {
   assert.ok(pkg.pi?.extensions?.includes(extensionPath), `webui Pi manifest should load ${extensionPath} when present`);
 }

package/tests/native-parity.test.mjs

@@ -56,6 +56,8 @@ const requiredNativeCommands = [
   "model",
   "theme",
   "scoped-models",
+  "tools",
+  "skills",
   "export",
   "import",
   "share",
@@ -116,6 +118,17 @@ assert.match(server, /function nativeCommandUnavailable\(command, details = \{\}
 assert.match(server, /default:\n\s+return nativeCommandUnavailable\(parsed\.name\)/, "unsupported native commands should return structured unavailable cards instead of raw HTTP errors");
 assert.match(server, /url\.pathname === "\/api\/native-parity" && req\.method === "GET"/, "server should expose the native parity matrix for clients/tests");
 assert.match(server, /const NATIVE_DOWNLOAD_TOKEN_TTL_MS = 10 \* 60 \* 1000/, "native downloads should use short-lived tokens");
+assert.match(server, /const WEBUI_HELPER_COMMAND = "webui-helper"/, "server should declare the hidden Web UI RPC helper command");
+assert.match(server, /args\.push\("--extension", webuiHelperExtensionPath\)/, "Web UI tabs should force-load the browser-native RPC helper extension");
+assert.match(server, /url\.pathname === "\/api\/tools" && req\.method === "GET"/, "server should expose GET /api/tools for native /tools");
+assert.match(server, /url\.pathname === "\/api\/tools" && req\.method === "POST"/, "server should expose POST /api/tools for native /tools updates");
+assert.match(server, /url\.pathname === "\/api\/skills" && req\.method === "GET"/, "server should expose GET /api/skills for native /skills");
+assert.match(server, /url\.pathname === "\/api\/skills" && req\.method === "POST"/, "server should expose POST /api/skills for native /skills updates");
+assert.match(app, /const HIDDEN_COMMAND_NAMES = new Set\(\["webui-tree-navigate", "webui-helper"\]\)/, "frontend should hide Web UI internal helper commands");
+assert.match(app, /"scoped-models", "tools", "skills"/, "frontend native selector commands should include /tools and /skills");
+assert.match(app, /return match \? match\[1\]\.toLowerCase\(\) : ""/, "frontend native slash command matching should be case-insensitive");
+assert.match(app, /async function openNativeToolsSelector\(\)/, "frontend should implement a browser-native /tools selector");
+assert.match(app, /async function openNativeSkillsSelector\(\)/, "frontend should implement a browser-native /skills selector");
 assert.match(server, /function registerNativeDownload\(filePath, \{ fileName, contentType, command = "native" \} = \{\}\)/, "server should register opaque native download tokens");
 assert.match(server, /url\.pathname\.startsWith\("\/api\/native-download\/"\) && req\.method === "GET"/, "server should expose opaque native download endpoint");
 assert.match(server, /case "export": \{\n\s+return handleNativeExportCommand\(tab, parsed\.args, req\);\n\s+\}/, "native /export should route through the native command adapter");
@@ -133,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");
@@ -144,5 +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");