@firstpick/pi-package-webui 0.2.2 → 0.2.3

package/README.md

@@ -119,7 +119,7 @@ Environment variables:
 - Multi-tab Pi sessions with isolated processes, working directories, prompt drafts, and activity state.
 - 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.
-- Browser dialogs for common Pi selectors such as `/model`, `/settings`, `/theme`, `/fork`, `/clone`, `/resume`, `/tree`, and `/scoped-models`.
+- 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.
@@ -135,7 +135,9 @@ Optional companions:
 - `@firstpick/pi-prompts-git-pr` — guided Git commit/push workflow.
 - `@firstpick/pi-extension-release-npm` — NPM publish menu and release widgets.
 - `@firstpick/pi-extension-release-aur` — AUR publish menu and release widgets.
+- `@firstpick/pi-extension-setup-skills` — TUI `/skills` setup command alongside WebUI-native skill toggles.
 - `@firstpick/pi-extension-todo-progress` — todo-progress rendering.
+- `@firstpick/pi-extension-tools` — TUI `/tools` active-tool manager alongside WebUI-native tool toggles.
 - `@firstpick/pi-extension-git-footer-status` — richer git/footer status.
 - `@firstpick/pi-extension-stats` — stats commands and status data.
 - `@firstpick/pi-themes-bundle` — Web UI and Pi theme resources.

package/WEBUI_TUI_NATIVE_PARITY.json

@@ -56,6 +56,32 @@
       "currentBehavior": "Informational dialog plus footer scoped picker.",
       "targetBehavior": "Searchable model table, provider toggles, ordered explicit provider/model IDs, advanced patterns, and safe global/project persistence."
     },
+    {
+      "id": "/tools",
+      "kind": "slash-command",
+      "category": "native-command",
+      "title": "Tool enable/disable selector",
+      "command": { "name": "tools", "description": "Enable/disable tools for the active tab" },
+      "webStatus": "implemented",
+      "priority": "P1",
+      "sensitive": false,
+      "guards": ["confirmation"],
+      "currentBehavior": "Browser-native selector uses a hidden Web UI RPC helper extension to read all tools, set active tools, and persist selection on the session branch.",
+      "targetBehavior": "Keep browser-native runtime tool toggles in parity with Pi's TUI tools extension while exposing provenance and branch-persistent state."
+    },
+    {
+      "id": "/skills",
+      "kind": "slash-command",
+      "category": "native-command",
+      "title": "Skill enable/disable selector",
+      "command": { "name": "skills", "description": "Enable/disable skills for automatic model invocation" },
+      "webStatus": "implemented",
+      "priority": "P1",
+      "sensitive": false,
+      "guards": ["confirmation"],
+      "currentBehavior": "Browser-native selector uses a hidden Web UI RPC helper extension to filter disabled skills out of the system prompt, block disabled /skill:name invocations, and persist selection on the session branch.",
+      "targetBehavior": "Keep browser-native skill toggles runtime-scoped with clear distinction from package-level pi config enable/disable."
+    },
     {
       "id": "/export",
       "kind": "slash-command",

package/bin/pi-webui.mjs

@@ -8,13 +8,15 @@ import { access, copyFile, mkdir, readFile, readdir, rename, stat, writeFile } f
 import { homedir, networkInterfaces, tmpdir } from "node:os";
 import path from "node:path";
 import { StringDecoder } from "node:string_decoder";
-import { fileURLToPath } from "node:url";
-import { AuthStorage, SessionManager } from "@earendil-works/pi-coding-agent";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { AuthStorage, SessionManager, SettingsManager } from "@earendil-works/pi-coding-agent";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 const require = createRequire(import.meta.url);
 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 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);
@@ -22,6 +24,9 @@ const webuiDevServer = isTruthyEnv(process.env.PI_WEBUI_DEV) || isSourceCheckout
 const DEFAULT_HOST = "127.0.0.1";
 const DEFAULT_PORT = 31415;
 const REQUEST_TIMEOUT_MS = 5 * 60 * 1000;
+const WEBUI_HELPER_TIMEOUT_MS = 8 * 1000;
+const WEBUI_HELPER_COMMAND = "webui-helper";
+const WEBUI_HELPER_RESPONSE_PREFIX = "__PI_WEBUI_HELPER_RESPONSE__:";
 const CODEX_USAGE_TIMEOUT_MS = 15 * 1000;
 const CODEX_TOKEN_REFRESH_SKEW_MS = 5 * 60 * 1000;
 const OPENAI_CODEX_PROVIDER_ID = "openai-codex";
@@ -141,7 +146,9 @@ const OPTIONAL_FEATURE_PACKAGES = new Map([
   ["gitWorkflow", "@firstpick/pi-prompts-git-pr"],
   ["releaseNpm", "@firstpick/pi-extension-release-npm"],
   ["releaseAur", "@firstpick/pi-extension-release-aur"],
+  ["tuiSkillsCommand", "@firstpick/pi-extension-setup-skills"],
   ["todoProgressWidget", "@firstpick/pi-extension-todo-progress"],
+  ["tuiToolsCommand", "@firstpick/pi-extension-tools"],
   ["gitFooterStatus", "@firstpick/pi-extension-git-footer-status"],
   ["statsCommand", "@firstpick/pi-extension-stats"],
   ["themeBundle", "@firstpick/pi-themes-bundle"],
@@ -2067,6 +2074,11 @@ function buildPiArgsForTab(tabIndex, title) {
   const args = ["--mode", "rpc"];
   if (options.noSession) args.push("--no-session");
 
+  // Load a browser-safe RPC helper into every Web UI tab. It exposes hidden
+  // extension commands for Web UI-native /tools and /skills selectors without
+  // depending on TUI-only extension UIs.
+  args.push("--extension", webuiHelperExtensionPath);
+
   // Keep tab naming inside Web UI metadata. Some bundled Pi CLI versions do not
   // support --name, and passing Web UI-generated tab titles through to child
   // RPC processes makes every tab after the first exit immediately.
@@ -2434,6 +2446,7 @@ function attachRpcToTab(tab, rpc) {
   tab.rpcUnsubscribe?.();
   tab.rpc = rpc;
   tab.rpcUnsubscribe = rpc.onEvent((event) => {
+    if (resolveWebuiHelperResponse(tab, event) || resolveWebuiHelperRpcResponse(tab, event)) return;
     updateTabActivityFromEvent(tab, event);
     let scopedEvent = { ...event, tabId: tab.id, tabTitle: tab.title, tabActivity: tabActivitySnapshot(tab) };
     if (event?.type === "pi_process_exit" || event?.type === "pi_process_error") clearPendingExtensionUiRequests(tab);
@@ -2470,6 +2483,8 @@ async function createTab({ id: requestedId, index, title, titleSource, conversat
     lastState: null,
     activity: createTabActivity(createdAt),
     pendingExtensionUiRequests: new Map(),
+    webuiHelperRequests: new Map(),
+    webuiHelperResponseIds: new Set(),
     bashQueue: [],
     bashQueueDraining: false,
     rpc: undefined,
@@ -2760,11 +2775,271 @@ async function safeRpcResponse(tab, command, timeoutMs = REQUEST_TIMEOUT_MS) {
   }
 }
 
+function parseWebuiHelperResponseEvent(event) {
+  if (event?.type !== "extension_ui_request" || event.method !== "notify") return undefined;
+  const message = String(event.message || "");
+  if (!message.startsWith(WEBUI_HELPER_RESPONSE_PREFIX)) return undefined;
+  try {
+    return JSON.parse(message.slice(WEBUI_HELPER_RESPONSE_PREFIX.length));
+  } catch (error) {
+    return { ok: false, error: `Invalid Web UI helper response: ${sanitizeError(error)}` };
+  }
+}
+
+function resolveWebuiHelperResponse(tab, event) {
+  const payload = parseWebuiHelperResponseEvent(event);
+  if (!payload) return false;
+  const requestId = String(payload.requestId || "");
+  const pending = tab?.webuiHelperRequests?.get(requestId);
+  if (pending) {
+    tab.webuiHelperRequests.delete(requestId);
+    clearTimeout(pending.timeout);
+    if (payload.ok === false) pending.reject(makeHttpError(400, payload.error || "Web UI helper command failed"));
+    else pending.resolve(payload.data || {});
+  }
+  return true;
+}
+
+function resolveWebuiHelperRpcResponse(tab, event) {
+  if (event?.type !== "response" || event.command !== "prompt" || !event.id) return false;
+  return tab?.webuiHelperResponseIds?.delete(String(event.id)) === true;
+}
+
+function webuiHelperRequestMap(tab) {
+  if (!tab.webuiHelperRequests) tab.webuiHelperRequests = new Map();
+  return tab.webuiHelperRequests;
+}
+
+async function sendWebuiHelperCommand(tab, action, payload = {}, timeoutMs = WEBUI_HELPER_TIMEOUT_MS) {
+  const requestId = randomUUID();
+  const pending = new Promise((resolve, reject) => {
+    const timeout = setTimeout(() => {
+      webuiHelperRequestMap(tab).delete(requestId);
+      tab.webuiHelperResponseIds?.delete(requestId);
+      reject(makeHttpError(504, `Timed out waiting for Web UI helper action: ${action}. Try /reload in this tab, then retry.`));
+    }, timeoutMs);
+    webuiHelperRequestMap(tab).set(requestId, { resolve, reject, timeout });
+  });
+  pending.catch(() => {});
+
+  try {
+    tab.webuiHelperResponseIds?.add(requestId);
+    const response = await tab.rpc.send({
+      id: requestId,
+      type: "prompt",
+      message: `/${WEBUI_HELPER_COMMAND} ${JSON.stringify({ requestId, action, payload })}`,
+    }, timeoutMs);
+    if (response.success === false) throw makeHttpError(400, response.error || `Web UI helper action failed: ${action}`);
+    return await pending;
+  } catch (error) {
+    tab.webuiHelperResponseIds?.delete(requestId);
+    const request = webuiHelperRequestMap(tab).get(requestId);
+    if (request) {
+      clearTimeout(request.timeout);
+      webuiHelperRequestMap(tab).delete(requestId);
+    }
+    throw error;
+  }
+}
+
+async function getToolConfigData(tab) {
+  return sendWebuiHelperCommand(tab, "tools-state");
+}
+
+let packageManagerModulePromise;
+async function loadPackageManagerModule() {
+  if (!packageManagerModulePromise) {
+    const packageMain = fileURLToPath(import.meta.resolve("@earendil-works/pi-coding-agent"));
+    const codingAgentRoot = path.dirname(path.dirname(packageMain));
+    packageManagerModulePromise = import(pathToFileURL(path.join(codingAgentRoot, "dist", "core", "package-manager.js")).href);
+  }
+  return packageManagerModulePromise;
+}
+
+function parseSkillFrontmatter(text, filePath) {
+  const frontmatter = String(text || "").match(/^---\s*\n([\s\S]*?)\n---/);
+  const fields = {};
+  if (frontmatter) {
+    for (const line of frontmatter[1].split(/\r?\n/)) {
+      const match = line.match(/^([A-Za-z0-9_-]+):\s*(.*)$/);
+      if (match) fields[match[1]] = match[2].replace(/^['"]|['"]$/g, "").trim();
+    }
+  }
+  const parent = path.basename(path.dirname(filePath));
+  const base = path.basename(filePath, path.extname(filePath));
+  return {
+    name: fields.name || (path.basename(filePath) === "SKILL.md" ? parent : base),
+    description: fields.description || "",
+  };
+}
+
+function sourceInfoFromResolvedResource(resource) {
+  const metadata = resource?.metadata || {};
+  return {
+    path: resource?.path,
+    source: metadata.source,
+    scope: metadata.scope,
+    origin: metadata.origin,
+    baseDir: metadata.baseDir,
+  };
+}
+
+async function resolveSkillResources(tab) {
+  const { DefaultPackageManager } = await loadPackageManagerModule();
+  const settingsManager = SettingsManager.create(tab?.cwd || options.cwd, agentDir);
+  const packageManager = new DefaultPackageManager({ cwd: tab?.cwd || options.cwd, agentDir, settingsManager });
+  const resolved = await packageManager.resolve();
+  const skills = [];
+  for (const resource of resolved.skills || []) {
+    try {
+      const metadata = parseSkillFrontmatter(await readFile(resource.path, "utf8"), resource.path);
+      skills.push({
+        ...metadata,
+        filePath: resource.path,
+        enabled: resource.enabled === true,
+        configEnabled: resource.enabled === true,
+        configManaged: true,
+        sourceInfo: sourceInfoFromResolvedResource(resource),
+      });
+    } catch {
+      // Ignore unreadable skill candidates; Pi will also skip invalid resources.
+    }
+  }
+  return { skills, settingsManager };
+}
+
+function skillResourceKey(skill) {
+  return skill.filePath || skill.name;
+}
+
+function mergeRuntimeAndResolvedSkills(runtimeSkills, resolvedSkills) {
+  const byName = new Map();
+  for (const skill of resolvedSkills) byName.set(skill.name, { ...skill });
+  for (const skill of runtimeSkills || []) {
+    const existing = byName.get(skill.name);
+    byName.set(skill.name, existing ? { ...existing, ...skill, configManaged: existing.configManaged, configEnabled: existing.configEnabled, filePath: existing.filePath || skill.filePath, sourceInfo: existing.sourceInfo || skill.sourceInfo } : { ...skill, configManaged: false, configEnabled: true });
+  }
+  return [...byName.values()].sort((a, b) => a.name.localeCompare(b.name));
+}
+
+async function getMergedSkillConfigData(tab) {
+  const [runtime, resolved] = await Promise.all([
+    getSkillConfigDataFromRuntime(tab).catch(() => ({ skills: [] })),
+    resolveSkillResources(tab).catch((error) => {
+      console.warn(`failed to resolve configured skills: ${sanitizeError(error)}`);
+      return { skills: [] };
+    }),
+  ]);
+  return { skills: mergeRuntimeAndResolvedSkills(runtime.skills || [], resolved.skills || []) };
+}
+
+function getResourcePatternForSkill(tab, skill) {
+  const info = skill.sourceInfo || {};
+  const baseDir = info.baseDir || (info.scope === "project" ? path.join(tab?.cwd || options.cwd, ".pi") : agentDir);
+  return path.relative(baseDir, skill.filePath);
+}
+
+async function setToolConfigData(tab, body) {
+  return sendWebuiHelperCommand(tab, "tools-set", {
+    enabledTools: Array.isArray(body.enabledTools) ? body.enabledTools : undefined,
+    disabledTools: Array.isArray(body.disabledTools) ? body.disabledTools : undefined,
+  });
+}
+
+async function getSkillConfigDataFromRuntime(tab) {
+  return sendWebuiHelperCommand(tab, "skills-state");
+}
+
+function desiredSkillEnabledFromBody(skillName, body) {
+  if (Array.isArray(body.enabledSkills)) return body.enabledSkills.map(String).includes(skillName);
+  if (Array.isArray(body.disabledSkills)) return !body.disabledSkills.map(String).includes(skillName);
+  throw makeHttpError(400, "Skill update requires enabledSkills or disabledSkills");
+}
+
+function updatePatternListForResource(current, pattern, enabled) {
+  const updated = (current || []).filter((item) => {
+    const text = String(item || "");
+    const stripped = text.startsWith("!") || text.startsWith("+") || text.startsWith("-") ? text.slice(1) : text;
+    return stripped !== pattern;
+  });
+  updated.push(`${enabled ? "+" : "-"}${pattern}`);
+  return updated;
+}
+
+function setSkillPathsForScope(settingsManager, scope, updated) {
+  if (scope === "project") settingsManager.setProjectSkillPaths(updated);
+  else settingsManager.setSkillPaths(updated);
+}
+
+function toggleConfiguredSkill(tab, settingsManager, skill, enabled) {
+  const info = skill.sourceInfo || {};
+  const scope = info.scope === "project" ? "project" : "user";
+  if (info.origin === "package") {
+    const settings = scope === "project" ? settingsManager.getProjectSettings() : settingsManager.getGlobalSettings();
+    const packages = [...(settings.packages || [])];
+    const packageIndex = packages.findIndex((item) => (typeof item === "string" ? item : item?.source) === info.source);
+    if (packageIndex < 0) return false;
+    let packageEntry = packages[packageIndex];
+    if (typeof packageEntry === "string") {
+      packageEntry = { source: packageEntry };
+      packages[packageIndex] = packageEntry;
+    }
+    const pattern = path.relative(info.baseDir || path.dirname(skill.filePath), skill.filePath);
+    packageEntry.skills = updatePatternListForResource(packageEntry.skills || [], pattern, enabled);
+    if (scope === "project") settingsManager.setProjectPackages(packages);
+    else settingsManager.setPackages(packages);
+    return true;
+  }
+
+  const settings = scope === "project" ? settingsManager.getProjectSettings() : settingsManager.getGlobalSettings();
+  const pattern = getResourcePatternForSkill(tab, skill);
+  setSkillPathsForScope(settingsManager, scope, updatePatternListForResource(settings.skills || [], pattern, enabled));
+  return true;
+}
+
+async function setSkillConfigData(tab, body) {
+  const { skills, settingsManager } = await resolveSkillResources(tab);
+  let configChanged = false;
+  for (const skill of skills) {
+    const desiredEnabled = desiredSkillEnabledFromBody(skill.name, body);
+    if (skill.configEnabled !== desiredEnabled && toggleConfiguredSkill(tab, settingsManager, skill, desiredEnabled)) configChanged = true;
+  }
+
+  const runtimeOnly = skills.length === 0;
+  if (runtimeOnly) {
+    await sendWebuiHelperCommand(tab, "skills-set", {
+      enabledSkills: Array.isArray(body.enabledSkills) ? body.enabledSkills : undefined,
+      disabledSkills: Array.isArray(body.disabledSkills) ? body.disabledSkills : undefined,
+    });
+  }
+
+  const activeTab = configChanged ? await restartTabRpc(tab, "skills-config") : tab;
+  return getMergedSkillConfigData(activeTab);
+}
+
+async function annotateSkillCommandState(tab, commands) {
+  let disabledSkills = new Set();
+  try {
+    const state = await getMergedSkillConfigData(tab);
+    disabledSkills = new Set((state.skills || []).filter((skill) => skill.enabled === false).map((skill) => skill.name));
+  } catch {
+    // Commands should remain available even if an older tab has not loaded the helper yet.
+  }
+
+  return commands
+    .filter((command) => command?.name !== WEBUI_HELPER_COMMAND)
+    .map((command) => {
+      const skillName = command?.source === "skill" && String(command.name || "").startsWith("skill:") ? String(command.name).slice("skill:".length) : "";
+      return skillName ? { ...command, enabled: !disabledSkills.has(skillName) } : command;
+    });
+}
+
 async function getCommandData(tab) {
   try {
     const response = await tab.rpc.send({ type: "get_commands" });
     if (response.success === false) throw makeHttpError(400, response.error || "failed to load commands");
-    return { commands: [...NATIVE_SLASH_COMMANDS, ...(response.data?.commands || [])], rpcRunning: true };
+    const rpcCommands = await annotateSkillCommandState(tab, response.data?.commands || []);
+    return { commands: [...NATIVE_SLASH_COMMANDS, ...rpcCommands], rpcRunning: true };
   } catch (error) {
     const message = sanitizeError(error);
     if (!/Pi RPC process is not running/i.test(message)) throw error;
@@ -3808,6 +4083,32 @@ const server = createServer(async (req, res) => {
       return;
     }
 
+    if (url.pathname === "/api/tools" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
+      sendJson(res, 200, { ok: true, data: await getToolConfigData(tab) });
+      return;
+    }
+
+    if (url.pathname === "/api/tools" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const tab = getRequestedTab(req, url, body);
+      sendJson(res, 200, { ok: true, data: await setToolConfigData(tab, body) });
+      return;
+    }
+
+    if (url.pathname === "/api/skills" && req.method === "GET") {
+      const tab = getRequestedTab(req, url);
+      sendJson(res, 200, { ok: true, data: await getMergedSkillConfigData(tab) });
+      return;
+    }
+
+    if (url.pathname === "/api/skills" && req.method === "POST") {
+      const body = await readJsonBody(req);
+      const tab = getRequestedTab(req, url, body);
+      sendJson(res, 200, { ok: true, data: await setSkillConfigData(tab, body) });
+      return;
+    }
+
     if (url.pathname === "/api/commands" && req.method === "GET") {
       const tab = getRequestedTab(req, url);
       sendJson(res, 200, { type: "response", command: "get_commands", success: true, data: await getCommandData(tab) });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "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 = [];
@@ -6930,6 +6948,7 @@ function optionalFeatureIdForCommand(name) {
 
 function isCommandVisible(command) {
   if (HIDDEN_COMMAND_NAMES.has(command.name)) return false;
+  if (command.enabled === false) return false;
   const featureId = optionalFeatureIdForCommand(command.name);
   return !featureId || isOptionalFeatureEnabled(featureId);
 }
@@ -6942,6 +6961,10 @@ function hasAvailableCommand(name) {
   return availableCommands.some((command) => command.name === name);
 }
 
+function hasLoadedRpcCommand(name) {
+  return rawAvailableCommands.some((command) => command.name === name && command.source !== "native");
+}
+
 function optionalFeatureUnavailableMessage(featureId) {
   const feature = OPTIONAL_FEATURE_BY_ID.get(featureId);
   if (!feature) return "Optional feature unavailable.";
@@ -6988,7 +7011,9 @@ function updateOptionalFeatureAvailability() {
   optionalFeatureAvailability.releaseAur = hasAvailableCommand("release-aur");
   optionalFeatureAvailability.statsCommand = hasAvailableCommand("stats");
   optionalFeatureAvailability.gitFooterStatus = hasAvailableCommand("git-footer-refresh") || optionalFeatureAvailability.gitFooterStatus || statusEntries.has("git-footer");
+  optionalFeatureAvailability.tuiSkillsCommand = hasLoadedRpcCommand("skills");
   optionalFeatureAvailability.todoProgressWidget = hasAvailableCommand("todo-progress-status") || optionalFeatureAvailability.todoProgressWidget || widgets.has("todo-progress");
+  optionalFeatureAvailability.tuiToolsCommand = hasLoadedRpcCommand("tools");
   optionalFeatureAvailability.themeBundle = availableThemes.length > 0;
   renderOptionalFeatureControls();
 }
@@ -7131,7 +7156,7 @@ function runPublishWorkflow(command) {
 
 function slashCommandName(message) {
   const match = String(message || "").trim().match(/^\/([^\s]+)$/);
-  return match ? match[1] : "";
+  return match ? match[1].toLowerCase() : "";
 }
 
 function openNativeCommandDialog({ title, message = "", searchPlaceholder = "" } = {}) {
@@ -7204,7 +7229,17 @@ function renderNativeSelectorItems(items, { emptyText = "No choices.", onSelect,
     button.addEventListener("click", () => onSelect?.(item));
     const title = make("span", "native-selector-title");
     title.append(make("strong", undefined, item.label || item.id || "choice"));
-    if (item.badge) title.append(make("span", "native-selector-badge", item.badge));
+    if (item.badge) {
+      const badgeState = String(item.badge).toLowerCase();
+      const badge = make("span", `native-selector-badge${item.badgeClass ? ` ${item.badgeClass}` : ""}`, item.badge);
+      badge.dataset.badgeState = badgeState;
+      if (badgeState === "disabled" || String(item.badgeClass || "").includes("disabled")) {
+        badge.style.borderColor = "rgba(255, 159, 67, 0.62)";
+        badge.style.color = "#ff9f43";
+        badge.style.background = "rgba(255, 159, 67, 0.10)";
+      }
+      title.append(badge);
+    }
     const detail = make("span", "native-selector-detail", item.description || "");
     const meta = make("span", "native-selector-meta", item.meta || "");
     button.append(title);
@@ -7538,6 +7573,145 @@ function openNativeScopedModelsInfo() {
   elements.nativeCommandBody.append(make("p", "native-command-note", "Use the footer model chip to choose among scoped models. The full native scoped-models editor is still TUI-only."));
 }
 
+function nativeResourceSourceLabel(resource) {
+  const info = resource?.sourceInfo || {};
+  return [info.source, info.scope, info.origin].filter(Boolean).join(" · ") || resource?.location || "loaded resource";
+}
+
+function nativeResourceCounts(resources) {
+  const disabled = resources.filter((resource) => resource.enabled === false).length;
+  return { total: resources.length, disabled, enabled: resources.length - disabled };
+}
+
+function nativeResourceFilterMatches(resource, filter) {
+  if (filter === "enabled") return resource.enabled !== false;
+  if (filter === "disabled") return resource.enabled === false;
+  return true;
+}
+
+function renderNativeResourceToggles(resources, { savingName, filter = "all", onToggle } = {}) {
+  const filteredResources = resources.filter((resource) => nativeResourceFilterMatches(resource, filter));
+  const counts = nativeResourceCounts(resources);
+  const items = filteredResources.map((resource) => ({
+    id: resource.name,
+    label: resource.name,
+    description: resource.description || "No description provided.",
+    meta: nativeResourceSourceLabel(resource),
+    badge: resource.enabled === false ? "disabled" : "enabled",
+    badgeClass: resource.enabled === false ? "disabled native-selector-badge-disabled" : "enabled native-selector-badge-enabled",
+    disabled: Boolean(savingName),
+    resource,
+  }));
+  const filterLabel = filter === "enabled" ? "enabled" : filter === "disabled" ? "disabled" : "all";
+  renderNativeSelectorItems(items, {
+    emptyText: `No ${filterLabel} entries match this filter.`,
+    onSelect: (item) => onToggle?.(item.resource),
+  });
+  elements.nativeCommandBody.prepend(make("div", "native-resource-summary muted", `${counts.total} total · ${counts.enabled} enabled · ${counts.disabled} disabled · showing ${filterLabel}`));
+}
+
+function renderNativeResourceFilterActions(filter, setFilter, render) {
+  elements.nativeCommandActions.replaceChildren();
+  for (const option of [
+    { value: "all", label: "All" },
+    { value: "enabled", label: "Enabled" },
+    { value: "disabled", label: "Disabled" },
+  ]) {
+    addNativeCommandAction(option.label, () => {
+      setFilter(option.value);
+      render();
+    }, filter === option.value ? "primary" : undefined);
+  }
+  addNativeCommandAction("Cancel", closeNativeCommandDialog);
+}
+
+async function openNativeToolsSelector() {
+  openNativeCommandDialog({ title: "/tools", message: "Enable or disable tools for the active Pi tab. Changes apply to the next model turn and persist on this session branch.", searchPlaceholder: "Filter tools…" });
+  renderNativeLoading("Loading tools…");
+  let tools = [];
+  let savingName = "";
+  let filter = "all";
+  const render = () => {
+    renderNativeResourceToggles(tools, {
+      savingName,
+      filter,
+      onToggle: async (tool) => {
+        if (!tool || savingName) return;
+        const enabledTools = new Set(tools.filter((item) => item.enabled !== false).map((item) => item.name));
+        if (tool.enabled === false) enabledTools.add(tool.name);
+        else enabledTools.delete(tool.name);
+        savingName = tool.name;
+        setNativeCommandError("");
+        render();
+        try {
+          const response = await nativeCommandApi("/api/tools", { method: "POST", body: { enabledTools: [...enabledTools] } });
+          tools = Array.isArray(response.data?.tools) ? response.data.tools : [];
+          addTransientMessage({ role: "native", title: "/tools", content: `Tool ${tool.name} ${enabledTools.has(tool.name) ? "enabled" : "disabled"}.`, level: "info" });
+        } catch (error) {
+          setNativeCommandError(error.message || String(error));
+        } finally {
+          savingName = "";
+          render();
+        }
+      },
+    });
+    renderNativeResourceFilterActions(filter, (value) => { filter = value; }, render);
+  };
+  try {
+    const response = await nativeCommandApi("/api/tools");
+    tools = Array.isArray(response.data?.tools) ? response.data.tools : [];
+    elements.nativeCommandSearch.oninput = render;
+    render();
+  } catch (error) {
+    setNativeCommandError(error.message || String(error));
+    elements.nativeCommandBody.replaceChildren();
+  }
+}
+
+async function openNativeSkillsSelector() {
+  openNativeCommandDialog({ title: "/skills", message: "Enable or disable skills for automatic model invocation in the active Pi tab. Disabled skills are removed from the system prompt and their /skill:name commands are blocked by Web UI.", searchPlaceholder: "Filter skills…" });
+  renderNativeLoading("Loading skills…");
+  let skills = [];
+  let savingName = "";
+  let filter = "all";
+  const render = () => {
+    renderNativeResourceToggles(skills, {
+      savingName,
+      filter,
+      onToggle: async (skill) => {
+        if (!skill || savingName) return;
+        const enabledSkills = new Set(skills.filter((item) => item.enabled !== false).map((item) => item.name));
+        if (skill.enabled === false) enabledSkills.add(skill.name);
+        else enabledSkills.delete(skill.name);
+        savingName = skill.name;
+        setNativeCommandError("");
+        render();
+        try {
+          const response = await nativeCommandApi("/api/skills", { method: "POST", body: { enabledSkills: [...enabledSkills] } });
+          skills = Array.isArray(response.data?.skills) ? response.data.skills : [];
+          addTransientMessage({ role: "native", title: "/skills", content: `Skill ${skill.name} ${enabledSkills.has(skill.name) ? "enabled" : "disabled"}.`, level: "info" });
+          refreshCommands(activeTabContext()).catch((error) => addEvent(error.message || String(error), "error"));
+        } catch (error) {
+          setNativeCommandError(error.message || String(error));
+        } finally {
+          savingName = "";
+          render();
+        }
+      },
+    });
+    renderNativeResourceFilterActions(filter, (value) => { filter = value; }, render);
+  };
+  try {
+    const response = await nativeCommandApi("/api/skills");
+    skills = Array.isArray(response.data?.skills) ? response.data.skills : [];
+    elements.nativeCommandSearch.oninput = render;
+    render();
+  } catch (error) {
+    setNativeCommandError(error.message || String(error));
+    elements.nativeCommandBody.replaceChildren();
+  }
+}
+
 function openNativeAuthInfo(mode) {
   const command = mode === "logout" ? "/logout" : "/login";
   openNativeCommandDialog({ title: command, message: "Provider credential entry is intentionally not implemented in the browser yet." });
@@ -7582,6 +7756,12 @@ async function handleNativeSlashSelectorCommand(message, { usesPromptInput = fal
     case "scoped-models":
       openNativeScopedModelsInfo();
       return true;
+    case "tools":
+      await openNativeToolsSelector();
+      return true;
+    case "skills":
+      await openNativeSkillsSelector();
+      return true;
     case "login":
     case "logout":
       openNativeAuthInfo(name);
@@ -7969,7 +8149,7 @@ function syncModelSelectToState() {
   }
 }
 
-function normalizeCommands(commands) {
+function normalizeCommands(commands, { dedupe = true } = {}) {
   const seen = new Set();
   return (commands || [])
     .map((command) => ({
@@ -7977,9 +8157,12 @@ function normalizeCommands(commands) {
       description: String(command.description || "").trim(),
       source: String(command.source || "command").trim(),
       location: String(command.location || "").trim(),
+      enabled: command.enabled !== false,
     }))
     .filter((command) => {
-      if (!command.name || seen.has(command.name)) return false;
+      if (!command.name) return false;
+      if (!dedupe) return true;
+      if (seen.has(command.name)) return false;
       seen.add(command.name);
       return true;
     })
@@ -8358,6 +8541,7 @@ async function refreshCommands(tabContext = activeTabContext()) {
   if (!tabContext.tabId) return;
   const response = await api("/api/commands", { tabId: tabContext.tabId });
   if (!isCurrentTabContext(tabContext)) return;
+  rawAvailableCommands = normalizeCommands(response.data?.commands || [], { dedupe: false });
   availableCommands = normalizeCommands(response.data?.commands || []);
   updateOptionalFeatureAvailability();
   renderCommands();

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");
@@ -713,6 +717,8 @@ 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, /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");
@@ -761,13 +767,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");
@@ -146,3 +159,4 @@ assert.match(app, /enqueueUserBashCommand\(parsed, \{ usesPromptInput, targetTab
 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.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");

package/webui-rpc-helper.mjs

@@ -0,0 +1,231 @@
+import { formatSkillsForPrompt } from "@earendil-works/pi-coding-agent";
+
+const HELPER_COMMAND = "webui-helper";
+const RESPONSE_PREFIX = "__PI_WEBUI_HELPER_RESPONSE__:";
+const TOOLS_CONFIG_TYPE = "webui-tools-config";
+const SKILLS_CONFIG_TYPE = "webui-skills-config";
+
+function responseMessage(payload) {
+  return `${RESPONSE_PREFIX}${JSON.stringify(payload)}`;
+}
+
+function safeSourceInfo(sourceInfo) {
+  if (!sourceInfo || typeof sourceInfo !== "object") return undefined;
+  return {
+    path: typeof sourceInfo.path === "string" ? sourceInfo.path : undefined,
+    source: typeof sourceInfo.source === "string" ? sourceInfo.source : undefined,
+    scope: typeof sourceInfo.scope === "string" ? sourceInfo.scope : undefined,
+    origin: typeof sourceInfo.origin === "string" ? sourceInfo.origin : undefined,
+    baseDir: typeof sourceInfo.baseDir === "string" ? sourceInfo.baseDir : undefined,
+  };
+}
+
+function lastBranchConfig(ctx, customType) {
+  let found;
+  for (const entry of ctx.sessionManager.getBranch()) {
+    if (entry?.type === "custom" && entry.customType === customType && entry.data && typeof entry.data === "object") {
+      found = entry.data;
+    }
+  }
+  return found;
+}
+
+function normalizeNameList(value) {
+  if (!Array.isArray(value)) return [];
+  const names = [];
+  const seen = new Set();
+  for (const item of value) {
+    const name = String(item || "").trim();
+    if (!name || seen.has(name)) continue;
+    seen.add(name);
+    names.push(name);
+  }
+  return names;
+}
+
+function parseHelperArgs(args) {
+  let parsed;
+  try {
+    parsed = JSON.parse(args || "{}");
+  } catch (error) {
+    throw new Error(`Invalid ${HELPER_COMMAND} payload: ${error instanceof Error ? error.message : String(error)}`);
+  }
+  if (!parsed || typeof parsed !== "object") throw new Error(`${HELPER_COMMAND} payload must be an object`);
+  const requestId = String(parsed.requestId || "").trim();
+  const action = String(parsed.action || "").trim();
+  if (!requestId) throw new Error(`${HELPER_COMMAND} payload requires requestId`);
+  if (!action) throw new Error(`${HELPER_COMMAND} payload requires action`);
+  return { requestId, action, payload: parsed.payload && typeof parsed.payload === "object" ? parsed.payload : {} };
+}
+
+function skillBlockPattern(name) {
+  const escaped = String(name).replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`\\n?  <skill>\\n    <name>${escaped}<\\/name>[\\s\\S]*?  <\\/skill>`, "g");
+}
+
+function replaceAvailableSkillsSection(systemPrompt, skills) {
+  const nextSection = formatSkillsForPrompt(skills);
+  const replacement = nextSection ? `\n${nextSection}\n` : "\n";
+  if (systemPrompt.includes("<available_skills>")) {
+    return systemPrompt.replace(/\n?The following skills provide[\s\S]*?<\/available_skills>\n?/m, replacement);
+  }
+  return systemPrompt;
+}
+
+export default function webuiRpcHelper(pi) {
+  let enabledTools = new Set();
+  let disabledSkills = new Set();
+
+  function allToolNames() {
+    return pi.getAllTools().map((tool) => tool.name);
+  }
+
+  function persistToolsState() {
+    pi.appendEntry(TOOLS_CONFIG_TYPE, { enabledTools: [...enabledTools] });
+  }
+
+  function applyTools() {
+    const existing = new Set(allToolNames());
+    pi.setActiveTools([...enabledTools].filter((name) => existing.has(name)));
+  }
+
+  function restoreToolsFromBranch(ctx) {
+    const saved = lastBranchConfig(ctx, TOOLS_CONFIG_TYPE)?.enabledTools;
+    if (Array.isArray(saved)) {
+      const existing = new Set(allToolNames());
+      enabledTools = new Set(normalizeNameList(saved).filter((name) => existing.has(name)));
+      applyTools();
+      return;
+    }
+    enabledTools = new Set(pi.getActiveTools());
+  }
+
+  function toolState() {
+    const active = new Set(pi.getActiveTools());
+    enabledTools = new Set([...active]);
+    return {
+      tools: pi.getAllTools().map((tool) => ({
+        name: tool.name,
+        description: tool.description || "",
+        enabled: active.has(tool.name),
+        sourceInfo: safeSourceInfo(tool.sourceInfo),
+      })),
+    };
+  }
+
+  function setToolState(payload) {
+    const existing = new Set(allToolNames());
+    if (Array.isArray(payload.enabledTools)) {
+      enabledTools = new Set(normalizeNameList(payload.enabledTools).filter((name) => existing.has(name)));
+    } else if (Array.isArray(payload.disabledTools)) {
+      const disabled = new Set(normalizeNameList(payload.disabledTools));
+      enabledTools = new Set([...existing].filter((name) => !disabled.has(name)));
+    } else {
+      throw new Error("Tool update requires enabledTools or disabledTools");
+    }
+    applyTools();
+    persistToolsState();
+    return toolState();
+  }
+
+  function persistSkillsState() {
+    pi.appendEntry(SKILLS_CONFIG_TYPE, { disabledSkills: [...disabledSkills] });
+  }
+
+  function restoreSkillsFromBranch(ctx) {
+    const saved = lastBranchConfig(ctx, SKILLS_CONFIG_TYPE)?.disabledSkills;
+    disabledSkills = new Set(normalizeNameList(saved));
+  }
+
+  function skillsFromContext(ctx) {
+    const options = ctx.getSystemPromptOptions?.();
+    const skills = Array.isArray(options?.skills) ? options.skills : [];
+    return skills.map((skill) => ({
+      name: skill.name,
+      description: skill.description || "",
+      enabled: !disabledSkills.has(skill.name),
+      disableModelInvocation: skill.disableModelInvocation === true,
+      filePath: skill.filePath,
+      sourceInfo: safeSourceInfo(skill.sourceInfo),
+    }));
+  }
+
+  function skillState(ctx) {
+    const known = new Set(skillsFromContext(ctx).map((skill) => skill.name));
+    disabledSkills = new Set([...disabledSkills].filter((name) => known.has(name)));
+    return { skills: skillsFromContext(ctx) };
+  }
+
+  function setSkillState(ctx, payload) {
+    const allNames = new Set(skillsFromContext(ctx).map((skill) => skill.name));
+    if (Array.isArray(payload.enabledSkills)) {
+      const enabled = new Set(normalizeNameList(payload.enabledSkills));
+      disabledSkills = new Set([...allNames].filter((name) => !enabled.has(name)));
+    } else if (Array.isArray(payload.disabledSkills)) {
+      disabledSkills = new Set(normalizeNameList(payload.disabledSkills).filter((name) => allNames.has(name)));
+    } else {
+      throw new Error("Skill update requires enabledSkills or disabledSkills");
+    }
+    persistSkillsState();
+    return skillState(ctx);
+  }
+
+  function executeAction(action, payload, ctx) {
+    switch (action) {
+      case "tools-state":
+        return toolState();
+      case "tools-set":
+        return setToolState(payload);
+      case "skills-state":
+        return skillState(ctx);
+      case "skills-set":
+        return setSkillState(ctx, payload);
+      default:
+        throw new Error(`Unknown ${HELPER_COMMAND} action: ${action}`);
+    }
+  }
+
+  pi.registerCommand(HELPER_COMMAND, {
+    description: "Internal Web UI helper for browser-native tools and skills configuration",
+    handler: async (args, ctx) => {
+      let requestId = "";
+      try {
+        const request = parseHelperArgs(args);
+        requestId = request.requestId;
+        const data = executeAction(request.action, request.payload, ctx);
+        ctx.ui.notify(responseMessage({ requestId, ok: true, data }), "info");
+      } catch (error) {
+        ctx.ui.notify(responseMessage({ requestId, ok: false, error: error instanceof Error ? error.message : String(error) }), "error");
+      }
+    },
+  });
+
+  pi.on("session_start", async (_event, ctx) => {
+    restoreToolsFromBranch(ctx);
+    restoreSkillsFromBranch(ctx);
+  });
+
+  pi.on("session_tree", async (_event, ctx) => {
+    restoreToolsFromBranch(ctx);
+    restoreSkillsFromBranch(ctx);
+  });
+
+  pi.on("input", async (event, ctx) => {
+    const match = String(event.text || "").trim().match(/^\/skill:([^\s]+)/i);
+    if (!match) return { action: "continue" };
+    const skillName = match[1];
+    if (!disabledSkills.has(skillName)) return { action: "continue" };
+    ctx.ui.notify(`Skill /skill:${skillName} is disabled in the Web UI /skills selector.`, "warning");
+    return { action: "handled" };
+  });
+
+  pi.on("before_agent_start", async (event) => {
+    if (disabledSkills.size === 0) return;
+    const allSkills = Array.isArray(event.systemPromptOptions?.skills) ? event.systemPromptOptions.skills : [];
+    if (allSkills.length === 0) return;
+    const filteredSkills = allSkills.filter((skill) => !disabledSkills.has(skill.name));
+    let nextPrompt = replaceAvailableSkillsSection(event.systemPrompt, filteredSkills);
+    for (const name of disabledSkills) nextPrompt = nextPrompt.replace(skillBlockPattern(name), "");
+    return { systemPrompt: nextPrompt };
+  });
+}