@firstpick/pi-package-webui 0.2.4 → 0.2.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firstpick/pi-package-webui",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Pi Web UI companion package with a local browser UI CLI plus /webui-start and /webui-status commands.",
   "license": "MIT",
   "type": "module",

package/public/app.js

@@ -43,6 +43,10 @@ const elements = {
   publishMenu: $("#publishMenu"),
   releaseNpmButton: $("#releaseNpmButton"),
   releaseAurButton: $("#releaseAurButton"),
+  nativeCommandMenuButton: $("#nativeCommandMenuButton"),
+  nativeCommandMenu: $("#nativeCommandMenu"),
+  nativeSkillsButton: $("#nativeSkillsButton"),
+  nativeToolsButton: $("#nativeToolsButton"),
   gitWorkflowPanel: $("#gitWorkflowPanel"),
   gitWorkflowTitle: $("#gitWorkflowTitle"),
   gitWorkflowHint: $("#gitWorkflowHint"),
@@ -143,6 +147,7 @@ let pathFastPicksReady = false;
 let pathFastPicksLoadPromise = null;
 let mobileTabsExpanded = false;
 let openTerminalTabGroupKey = null;
+let nativeCommandMenuOpen = false;
 let availableCommands = [];
 let rawAvailableCommands = [];
 let commandSuggestions = [];
@@ -361,6 +366,8 @@ const OPTIONAL_COMMAND_FEATURES = new Map([
   ["git-staged-msg", "gitWorkflow"],
   ["release-npm", "releaseNpm"],
   ["release-aur", "releaseAur"],
+  ["skills", "tuiSkillsCommand"],
+  ["tools", "tuiToolsCommand"],
   ["stats", "statsCommand"],
   ["git-footer-refresh", "gitFooterStatus"],
   ["todo-progress-status", "todoProgressWidget"],
@@ -6943,6 +6950,13 @@ function setPublishMenuOpen(open) {
   elements.publishButton.parentElement?.classList.toggle("open", publishMenuOpen);
 }
 
+function setNativeCommandMenuOpen(open) {
+  nativeCommandMenuOpen = !!open;
+  elements.nativeCommandMenuButton.setAttribute("aria-expanded", nativeCommandMenuOpen ? "true" : "false");
+  elements.nativeCommandMenuButton.classList.toggle("menu-open", nativeCommandMenuOpen);
+  elements.nativeCommandMenuButton.parentElement?.classList.toggle("open", nativeCommandMenuOpen);
+}
+
 function optionalFeatureIdForCommand(name) {
   if (OPTIONAL_COMMAND_FEATURES.has(name)) return OPTIONAL_COMMAND_FEATURES.get(name);
   if (name === "release-toggle" || name === "release-abort" || name === "release-npm-logs") return "releaseNpm";
@@ -7096,6 +7110,18 @@ function renderOptionalFeatureControls() {
   );
   if (!hasPublishWorkflow && publishMenuOpen) setPublishMenuOpen(false);
 
+  const hasNativeCommandMenu = isOptionalFeatureEnabled("tuiSkillsCommand") || isOptionalFeatureEnabled("tuiToolsCommand");
+  elements.nativeSkillsButton.hidden = !isOptionalFeatureEnabled("tuiSkillsCommand");
+  elements.nativeToolsButton.hidden = !isOptionalFeatureEnabled("tuiToolsCommand");
+  const nativeCommandMenuContainer = elements.nativeCommandMenuButton.parentElement;
+  if (nativeCommandMenuContainer) nativeCommandMenuContainer.hidden = !hasNativeCommandMenu;
+  setOptionalControlState(
+    elements.nativeCommandMenuButton,
+    hasNativeCommandMenu,
+    "Slash command menu unavailable: enable/install TUI Skills command and/or TUI Tools command in Optional features.",
+  );
+  if (!hasNativeCommandMenu && nativeCommandMenuOpen) setNativeCommandMenuOpen(false);
+
   renderOptionalFeaturePanel();
 }
 
@@ -7159,6 +7185,23 @@ function runPublishWorkflow(command) {
   sendPrompt("prompt", command);
 }
 
+async function runNativeCommandMenu(command) {
+  setComposerActionsOpen(false);
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(false);
+  const commandName = String(command || "").replace(/^\//, "").split(/\s+/)[0].toLowerCase();
+  const featureId = optionalFeatureIdForCommand(commandName);
+  if ((featureId && !isOptionalFeatureEnabled(featureId)) || !hasAvailableCommand(commandName)) {
+    const tabContext = activeTabContext();
+    addEvent(commandUnavailableMessage(commandName), "warn");
+    refreshCommands(tabContext).catch((error) => {
+      if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+    });
+    return;
+  }
+  await handleNativeSlashSelectorCommand(command);
+}
+
 function slashCommandName(message) {
   const match = String(message || "").trim().match(/^\/([^\s]+)$/);
   return match ? match[1].toLowerCase() : "";
@@ -7212,7 +7255,8 @@ function renderNativeLoading(label = "Loading…") {
 function nativeSelectorMatches(item, query) {
   if (!query) return true;
   const needle = query.toLowerCase();
-  return [item.label, item.description, item.meta, item.badge]
+  const tags = Array.isArray(item.tags) ? item.tags.map((tag) => tag?.label) : [];
+  return [item.label, item.description, item.meta, item.badge, ...tags]
     .filter(Boolean)
     .some((value) => String(value).toLowerCase().includes(needle));
 }
@@ -7245,6 +7289,10 @@ function renderNativeSelectorItems(items, { emptyText = "No choices.", onSelect,
       }
       title.append(badge);
     }
+    for (const tag of Array.isArray(item.tags) ? item.tags : []) {
+      if (!tag?.label) continue;
+      title.append(make("span", `native-selector-badge${tag.className ? ` ${tag.className}` : ""}`, tag.label));
+    }
     const detail = make("span", "native-selector-detail", item.description || "");
     const meta = make("span", "native-selector-meta", item.meta || "");
     button.append(title);
@@ -7583,6 +7631,12 @@ function nativeResourceSourceLabel(resource) {
   return [info.source, info.scope, info.origin].filter(Boolean).join(" · ") || resource?.location || "loaded resource";
 }
 
+function nativeToolOriginTag(resource) {
+  return resource?.sourceInfo?.source === "builtin"
+    ? { label: "Pi Native", className: "native-selector-badge-pi-native" }
+    : { label: "External", className: "native-selector-badge-external" };
+}
+
 function nativeResourceCounts(resources) {
   const disabled = resources.filter((resource) => resource.enabled === false).length;
   return { total: resources.length, disabled, enabled: resources.length - disabled };
@@ -7594,19 +7648,23 @@ function nativeResourceFilterMatches(resource, filter) {
   return true;
 }
 
-function renderNativeResourceToggles(resources, { savingName, filter = "all", onToggle } = {}) {
+function renderNativeResourceToggles(resources, { savingName, filter = "all", onToggle, getResourceTag } = {}) {
   const filteredResources = resources.filter((resource) => nativeResourceFilterMatches(resource, filter));
   const counts = nativeResourceCounts(resources);
-  const items = filteredResources.map((resource) => ({
-    id: resource.name,
-    label: resource.name,
-    description: resource.description || "No description provided.",
-    meta: nativeResourceSourceLabel(resource),
-    badge: resource.enabled === false ? "disabled" : "enabled",
-    badgeClass: resource.enabled === false ? "disabled native-selector-badge-disabled" : "enabled native-selector-badge-enabled",
-    disabled: Boolean(savingName),
-    resource,
-  }));
+  const items = filteredResources.map((resource) => {
+    const resourceTag = getResourceTag?.(resource);
+    return {
+      id: resource.name,
+      label: resource.name,
+      description: resource.description || "No description provided.",
+      meta: nativeResourceSourceLabel(resource),
+      badge: resource.enabled === false ? "disabled" : "enabled",
+      badgeClass: resource.enabled === false ? "disabled native-selector-badge-disabled" : "enabled native-selector-badge-enabled",
+      tags: resourceTag ? [resourceTag] : [],
+      disabled: Boolean(savingName),
+      resource,
+    };
+  });
   const filterLabel = filter === "enabled" ? "enabled" : filter === "disabled" ? "disabled" : "all";
   renderNativeSelectorItems(items, {
     emptyText: `No ${filterLabel} entries match this filter.`,
@@ -7631,7 +7689,7 @@ function renderNativeResourceFilterActions(filter, setFilter, render) {
 }
 
 async function openNativeToolsSelector() {
-  openNativeCommandDialog({ title: "/tools", message: "Enable or disable tools for the active Pi tab. Changes apply to the next model turn and persist on this session branch.", searchPlaceholder: "Filter tools…" });
+  openNativeCommandDialog({ title: "Tools Setup", message: "Enable or disable tools for the active Pi tab. Changes apply to the next model turn and persist on this session branch.", searchPlaceholder: "Filter tools…" });
   renderNativeLoading("Loading tools…");
   let tools = [];
   let savingName = "";
@@ -7640,6 +7698,7 @@ async function openNativeToolsSelector() {
     renderNativeResourceToggles(tools, {
       savingName,
       filter,
+      getResourceTag: nativeToolOriginTag,
       onToggle: async (tool) => {
         if (!tool || savingName) return;
         const enabledTools = new Set(tools.filter((item) => item.enabled !== false).map((item) => item.name));
@@ -7674,7 +7733,7 @@ async function openNativeToolsSelector() {
 }
 
 async function openNativeSkillsSelector() {
-  openNativeCommandDialog({ title: "/skills", message: "Enable or disable skills for automatic model invocation in the active Pi tab. Disabled skills are removed from the system prompt and their /skill:name commands are blocked by Web UI.", searchPlaceholder: "Filter skills…" });
+  openNativeCommandDialog({ title: "Skills Setup", message: "Enable or disable skills for automatic model invocation in the active Pi tab. Disabled skills are removed from the system prompt and their /skill:name commands are blocked by Web UI.", searchPlaceholder: "Filter skills…" });
   renderNativeLoading("Loading skills…");
   let skills = [];
   let savingName = "";
@@ -7730,6 +7789,15 @@ function openNativeAuthInfo(mode) {
 async function handleNativeSlashSelectorCommand(message, { usesPromptInput = false } = {}) {
   const name = slashCommandName(message);
   if (!NATIVE_SELECTOR_COMMANDS.has(name)) return false;
+  const featureId = optionalFeatureIdForCommand(name);
+  if (featureId && !isOptionalFeatureEnabled(featureId)) {
+    const tabContext = activeTabContext();
+    addEvent(commandUnavailableMessage(name), "warn");
+    refreshCommands(tabContext).catch((error) => {
+      if (isCurrentTabContext(tabContext)) addEvent(error.message || String(error), "error");
+    });
+    return true;
+  }
   setComposerActionsOpen(false);
   hideCommandSuggestions();
   if (usesPromptInput) {
@@ -9213,7 +9281,7 @@ function showNextDialog() {
       if (isGuardrailDialog && /^Block$/i.test(optionLabel)) button.classList.add("guardrail-safe-action");
       if (isGuardrailDialog && /^Allow/i.test(optionLabel)) button.classList.add("guardrail-allow-action");
       if (isReleaseDialog && /^(?:Yes|All eligible packages\b|Publish selected packages \([1-9]\d*\))/.test(optionLabel)) button.classList.add("primary", "release-publish-action");
-      if (isReleaseDialog && /^Publish selected packages \(select at least one\)$/i.test(optionLabel)) button.classList.add("release-publish-disabled-action");
+      if (isReleaseDialog && /^Publish selected packages$/i.test(optionLabel)) button.classList.add("release-publish-disabled-action");
       if (isReleaseDialog && /^\[x\]/.test(optionLabel)) button.classList.add("release-target-option", "release-target-selected");
       if (isReleaseDialog && /^\[ \]/.test(optionLabel)) button.classList.add("release-target-option");
       if (isReleaseDialog && /^(?:No|Cancel)$/i.test(optionLabel)) button.classList.add("release-cancel-action");
@@ -9515,18 +9583,46 @@ elements.gitWorkflowButton.addEventListener("click", () => {
 });
 const publishMenuContainer = elements.publishButton.parentElement;
 elements.publishButton.addEventListener("click", () => {
+  setNativeCommandMenuOpen(false);
+  setPublishMenuOpen(true);
+});
+publishMenuContainer?.addEventListener("pointerenter", () => {
+  setNativeCommandMenuOpen(false);
   setPublishMenuOpen(true);
 });
-publishMenuContainer?.addEventListener("pointerenter", () => setPublishMenuOpen(true));
 publishMenuContainer?.addEventListener("pointerleave", () => setPublishMenuOpen(false));
-publishMenuContainer?.addEventListener("focusin", () => setPublishMenuOpen(true));
+publishMenuContainer?.addEventListener("focusin", () => {
+  setNativeCommandMenuOpen(false);
+  setPublishMenuOpen(true);
+});
 publishMenuContainer?.addEventListener("focusout", () => {
   setTimeout(() => {
     if (!publishMenuContainer?.contains(document.activeElement)) setPublishMenuOpen(false);
   }, 0);
 });
+const nativeCommandMenuContainer = elements.nativeCommandMenuButton.parentElement;
+elements.nativeCommandMenuButton.addEventListener("click", () => {
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(true);
+});
+nativeCommandMenuContainer?.addEventListener("pointerenter", () => {
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(true);
+});
+nativeCommandMenuContainer?.addEventListener("pointerleave", () => setNativeCommandMenuOpen(false));
+nativeCommandMenuContainer?.addEventListener("focusin", () => {
+  setPublishMenuOpen(false);
+  setNativeCommandMenuOpen(true);
+});
+nativeCommandMenuContainer?.addEventListener("focusout", () => {
+  setTimeout(() => {
+    if (!nativeCommandMenuContainer?.contains(document.activeElement)) setNativeCommandMenuOpen(false);
+  }, 0);
+});
 elements.releaseNpmButton.addEventListener("click", () => runPublishWorkflow("/release-npm"));
 elements.releaseAurButton.addEventListener("click", () => runPublishWorkflow("/release-aur"));
+elements.nativeSkillsButton.addEventListener("click", () => runNativeCommandMenu("/skills"));
+elements.nativeToolsButton.addEventListener("click", () => runNativeCommandMenu("/tools"));
 elements.gitWorkflowCancelButton.addEventListener("click", () => cancelGitWorkflow());
 elements.nativeCommandDialog.addEventListener("close", () => {
   elements.nativeCommandSearch.oninput = null;
@@ -9727,6 +9823,9 @@ document.addEventListener("pointerdown", (event) => {
   if (publishMenuOpen && !event.target?.closest?.(".composer-publish-menu")) {
     setPublishMenuOpen(false);
   }
+  if (nativeCommandMenuOpen && !event.target?.closest?.(".composer-native-command-menu")) {
+    setNativeCommandMenuOpen(false);
+  }
   if (document.body.classList.contains("mobile-tabs-expanded") && !elements.tabBar.contains(event.target) && !elements.terminalTabsToggleButton.contains(event.target)) {
     setMobileTabsExpanded(false);
   }
@@ -9813,6 +9912,10 @@ window.addEventListener("keydown", (event) => {
     setPublishMenuOpen(false);
     return;
   }
+  if (nativeCommandMenuOpen) {
+    setNativeCommandMenuOpen(false);
+    return;
+  }
   if (document.body.classList.contains("composer-actions-open")) {
     setComposerActionsOpen(false);
     return;

package/public/index.html

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

package/public/service-worker.js

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

package/public/styles.css

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

package/tests/mobile-static.test.mjs

@@ -98,6 +98,10 @@ assert.doesNotMatch(html, /class="side-panel-controls"[\s\S]*id="abortButton"/,
 assert.match(html, /id="publishButton"[\s\S]*?aria-controls="publishMenu"/, "composer should expose a Publish workflow menu button");
 assert.match(html, /id="releaseNpmButton"[^>]*data-command="\/release-npm"[\s\S]*?<span>NPM Release<\/span>/, "Publish menu should include the npm release workflow by label");
 assert.match(html, /id="releaseAurButton"[^>]*data-command="\/release-aur"[\s\S]*?<span>AUR Release<\/span>/, "Publish menu should include the AUR release workflow by label");
+assert.match(html, /id="nativeCommandMenuButton"[\s\S]*?aria-controls="nativeCommandMenu"/, "composer should expose a /skills and /tools command menu button");
+assert.ok(html.indexOf('id="publishButton"') < html.indexOf('id="nativeCommandMenuButton"'), "skills/tools command menu should render immediately after the Publish workflow button");
+assert.match(html, /id="nativeSkillsButton"[^>]*data-command="\/skills"[\s\S]*?<span>Skills Setup<\/span>/, "skills/tools command menu should include Skills Setup");
+assert.match(html, /id="nativeToolsButton"[^>]*data-command="\/tools"[\s\S]*?<span>Tools Setup<\/span>/, "skills/tools command menu should include Tools Setup");
 assert.doesNotMatch(html, /<code>\/release-(?:npm|aur)<\/code>/, "Publish menu should not show slash command names as option labels");
 assert.doesNotMatch(html, /data-tooltip="[^"]*\/release-(?:npm|aur)/, "Publish tooltip should not show slash command names");
 assert.match(html, /id="steerButton"[\s\S]*?data-tooltip="Steer usage:/, "Steer should explain type-first usage in a tooltip");
@@ -180,9 +184,12 @@ assert.match(css, /\.action-feedback-controls:not\(:hover\):not\(:focus-within\)
 assert.match(css, /\.action-feedback-button\.feedback-question\.active/, "question-mark reaction should have selected styling");
 assert.match(css, /\.composer-row button\[data-tooltip\]::after/, "composer button tooltips should be shared across Git, Steer, and Follow-up buttons");
 assert.match(css, /\.composer-row button\[data-tooltip\]\.tooltip-open::after/, "composer button tooltips should be triggerable from JS for empty mobile taps");
+assert.match(css, /\.composer-publish-menu:hover > \.composer-publish-button\[data-tooltip\]::before,[\s\S]*?\.composer-publish-menu\.open > \.composer-publish-button\[data-tooltip\]::after \{[\s\S]*?display:\s*none !important;[\s\S]*?opacity:\s*0 !important;/, "dropdown button tooltips should hide while publish or setup menus are open");
 assert.match(css, /\.composer-publish-menu-panel \{[\s\S]*?display:\s*none;[\s\S]*?flex-direction:\s*column/, "Publish workflow menu should hide when closed and expand like grouped tabs");
 assert.match(css, /\.composer-publish-menu:hover \.composer-publish-menu-panel,[\s\S]*?\.composer-publish-menu:focus-within \.composer-publish-menu-panel,[\s\S]*?\.composer-publish-menu\.open \.composer-publish-menu-panel \{\n\s+display:\s*flex;/, "Publish workflow menu should open on hover, focus, or explicit open state");
-assert.match(css, /\.composer-actions-panel > \.composer-publish-menu[\s\S]*?grid-column: span 1/, "Publish workflow button should fit beside Git workflow in mobile actions");
+assert.match(css, /\.composer-native-command-button \{[\s\S]*?color:\s*var\(--ctp-mauve\)/, "skills/tools command menu should have a distinct slash-command button style");
+assert.match(css, /\.composer-native-command-menu-item \{[\s\S]*?color:\s*var\(--ctp-mauve\)/, "skills/tools command menu items should be styled separately from publish actions");
+assert.match(css, /\.composer-actions-panel > \.composer-publish-menu[\s\S]*?grid-column: span 1/, "Publish and command menu buttons should fit beside Git workflow in mobile actions");
 assert.match(css, /\.composer-actions-panel[\s\S]*?bottom:\s*calc\(100% \+ 0\.42rem\)/, "mobile composer actions should open as an above-composer sheet");
 assert.match(css, /body\.composer-actions-open \.composer-actions-panel \{ display: grid; \}/, "composer actions panel should only open when toggled");
 assert.match(css, /\.terminal-tabs-toggle-button \{ display: none; \}/, "terminal tab toggle should be hidden outside mobile CSS");
@@ -220,6 +227,8 @@ assert.match(css, /\.extension-dialog[\s\S]*?inset:\s*auto 0 0 0/, "mobile dialo
 assert.match(css, /#dialogMessage \{[\s\S]*?white-space:\s*pre-wrap/, "extension dialog messages should preserve multiline prompts");
 assert.match(css, /\.native-command-dialog \{[\s\S]*?width:\s*min\(56rem/, "native slash selector dialog should have roomy desktop layout");
 assert.match(css, /\.native-selector-item \{[\s\S]*?--tree-depth/, "native slash selector choices should support tree indentation");
+assert.match(css, /\.native-selector-badge\.native-selector-badge-pi-native[\s\S]*?color:\s*var\(--ctp-blue\)/, "Tools Setup should distinguish Pi native tools with a Pi Native tag");
+assert.match(css, /\.native-selector-badge\.native-selector-badge-external[\s\S]*?color:\s*var\(--ctp-mauve\)/, "Tools Setup should distinguish external tools with an External tag");
 assert.match(css, /\.native-settings-grid,[\s\S]*?\.native-tree-options \{[\s\S]*?grid-template-columns:/, "native settings and tree selector options should use responsive grids");
 assert.match(css, /\.extension-dialog\.guardrail-dialog[\s\S]*?border-color:\s*rgba\(249, 226, 175/, "guardrail dialogs should have warning-specific styling");
 assert.match(css, /\.extension-dialog\.release-dialog[\s\S]*?width:\s*min\(64rem/, "release confirmation dialogs should have more horizontal room");
@@ -339,6 +348,9 @@ assert.match(app, /OPTIONAL_FEATURES_STORAGE_KEY/, "optional feature disable tog
 assert.match(app, /function renderOptionalFeatureDependentDisplays\(\)[\s\S]*renderOptionalFeatureControls\(\);[\s\S]*renderThemeSelect\(\);[\s\S]*renderWidgets\(\);[\s\S]*renderStatus\(\);[\s\S]*renderCommands\(\);[\s\S]*renderAllMessages\(\{ preserveScroll: true \}\);[\s\S]*if \(streamRawText\) renderStreamingAssistantText\(\);/, "optional feature toggles should immediately refresh visible controls, commands, transcript, and live stream displays");
 assert.match(app, /function setOptionalFeatureDisabled\(featureId, disabled\)[\s\S]*renderOptionalFeatureDependentDisplays\(\);[\s\S]*const tabContext = activeTabContext\(\);[\s\S]*refreshCommands\(tabContext\)/, "optional feature enable/disable should re-render the GUI and then refresh command capabilities");
 assert.match(app, /function setOptionalControlState\(button, available, unavailableTitle\)[\s\S]*setAttribute\("aria-label", nextAriaLabel\)[\s\S]*setAttribute\("data-tooltip", nextTooltip\)/, "optional feature button disabled state should update accessible labels and visible tooltips");
+assert.match(app, /\["skills", "tuiSkillsCommand"\][\s\S]*\["tools", "tuiToolsCommand"\]/, "optional feature toggles should gate /skills and /tools command surfaces");
+assert.match(app, /function setNativeCommandMenuOpen\(open\)/, "frontend should track the skills/tools command menu open state separately from Publish");
+assert.match(app, /nativeSkillsButton\.hidden = !isOptionalFeatureEnabled\("tuiSkillsCommand"\)[\s\S]*nativeToolsButton\.hidden = !isOptionalFeatureEnabled\("tuiToolsCommand"\)/, "skills/tools menu items should be hidden by their optional feature toggles");
 assert.match(app, /function renderCommands\(\)/, "side-panel commands should be re-renderable from current optional feature state");
 assert.match(app, /function installOptionalFeature\(featureId\)/, "optional features should expose an install action");
 assert.match(app, /api\("\/api\/optional-feature-install"/, "optional feature install action should call the backend installer endpoint");
@@ -486,10 +498,18 @@ assert.match(app, /function showComposerButtonTooltip\(button\)/, "empty mode-bu
 assert.match(app, /sendPromptFromModeButton\("steer", elements\.steerButton\)/, "Steer should show tooltip instead of silently doing nothing when input is empty");
 assert.match(app, /sendPromptFromModeButton\("follow-up", elements\.followUpButton\)/, "Follow-up should show tooltip instead of silently doing nothing when input is empty");
 assert.match(app, /function runPublishWorkflow\(command\)[\s\S]*?sendPrompt\("prompt", command\)/, "Publish workflows should send slash commands directly without replacing the draft");
-assert.match(app, /publishMenuContainer\?\.addEventListener\("pointerenter", \(\) => setPublishMenuOpen\(true\)\)/, "Publish menu should expand on hover");
+assert.match(app, /async function runNativeCommandMenu\(command\)[\s\S]*?await handleNativeSlashSelectorCommand\(command\)/, "skills/tools command menu should open native selector dialogs directly");
+assert.match(app, /function nativeToolOriginTag\(resource\)[\s\S]*?sourceInfo\?\.source === "builtin"[\s\S]*?label: "Pi Native"[\s\S]*?label: "External"/, "Tools Setup should classify built-in Pi tools separately from external tools");
+assert.match(app, /renderNativeResourceToggles\(tools, \{[\s\S]*?getResourceTag: nativeToolOriginTag/, "Tools Setup should render Pi Native\/External tags");
+assert.match(app, /const tags = Array\.isArray\(item\.tags\)[\s\S]*?item\.badge, \.\.\.tags/, "native selector filtering should include extra resource tags");
+assert.match(app, /publishMenuContainer\?\.addEventListener\("pointerenter", \(\) => \{[\s\S]*?setPublishMenuOpen\(true\);[\s\S]*?\}\)/, "Publish menu should expand on hover");
 assert.match(app, /publishMenuContainer\?\.addEventListener\("pointerleave", \(\) => setPublishMenuOpen\(false\)\)/, "Publish menu should collapse after hover leaves");
+assert.match(app, /nativeCommandMenuContainer\?\.addEventListener\("pointerenter", \(\) => \{[\s\S]*?setNativeCommandMenuOpen\(true\);[\s\S]*?\}\)/, "skills/tools command menu should expand on hover");
+assert.match(app, /nativeCommandMenuContainer\?\.addEventListener\("pointerleave", \(\) => setNativeCommandMenuOpen\(false\)\)/, "skills/tools command menu should collapse after hover leaves");
 assert.match(app, /releaseNpmButton\.addEventListener\("click", \(\) => runPublishWorkflow\("\/release-npm"\)\)/, "Publish menu should launch /release-npm");
 assert.match(app, /releaseAurButton\.addEventListener\("click", \(\) => runPublishWorkflow\("\/release-aur"\)\)/, "Publish menu should launch /release-aur");
+assert.match(app, /nativeSkillsButton\.addEventListener\("click", \(\) => runNativeCommandMenu\("\/skills"\)\)/, "skills/tools command menu should launch /skills");
+assert.match(app, /nativeToolsButton\.addEventListener\("click", \(\) => runNativeCommandMenu\("\/tools"\)\)/, "skills/tools command menu should launch /tools");
 assert.match(app, /async function sendPrompt\(kind = "prompt", explicitMessage\)/, "prompt sending should accept direct messages that bypass the input field");
 assert.match(app, /const rawMessage = usesPromptInput \? elements\.promptInput\.value : explicitMessage/, "direct prompt sends should not read the input textarea");
 assert.match(app, /if \(usesPromptInput\) \{[\s\S]*?if \(targetStillActive\) \{[\s\S]*?elements\.promptInput\.value = "";/, "direct prompt sends should preserve the input textarea draft");
@@ -600,7 +620,7 @@ assert.equal(manifest.start_url, "/", "PWA manifest should start at the web UI r
 assert.ok(manifest.icons?.some((icon) => icon.src === "/apple-touch-icon.png" && icon.sizes === "180x180"), "PWA manifest should include a conventional 180px apple touch icon");
 assert.ok(manifest.icons?.some((icon) => icon.src === "/icon-192.png" && icon.sizes === "192x192"), "PWA manifest should include a 192px icon");
 assert.ok(manifest.icons?.some((icon) => icon.src === "/icon-512.png" && icon.sizes === "512x512"), "PWA manifest should include a 512px icon");
-assert.match(serviceWorker, /const CACHE_NAME = "pi-webui-pwa-v20"/, "PWA service worker should define an app-shell cache");
+assert.match(serviceWorker, /const CACHE_NAME = "pi-webui-pwa-v23"/, "PWA service worker should define an app-shell cache");
 assert.match(serviceWorker, /self\.addEventListener\("notificationclick"/, "PWA service worker should focus Web UI when blocked-tab notifications are clicked");
 assert.match(serviceWorker, /event\.notification\.data\?\.url/, "blocked-tab notifications should carry a URL for service-worker click handling");
 assert.match(serviceWorker, /"\/apple-touch-icon\.png"/, "PWA service worker should cache the apple touch icon");