@firstpick/pi-package-webui 0.2.2 → 0.2.4

package/README.md

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

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