@firstpick/pi-package-webui 0.2.1 → 0.2.3

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 };
+  });
+}