clay-server 4.8.0-beta.1 → 4.8.0-beta.3

package/lib/public/modules/skills.js

@@ -1,29 +1,14 @@
+import { skillState, basePath, getInstalledInfo, scopeLabel } from './skills-state.js';
+import { renderDetail } from './skills-detail.js';
+import { uninstallSkill } from './skills-actions.js';
+export { handleSkillInstalled, handleSkillUninstalled } from './skills-actions.js';
+import { openMcpSkillsWorkbench, closeMcpSkillsWorkbench } from './mcp-skills-workbench.js';
 import { iconHtml, refreshIcons } from './icons.js';
-import { escapeHtml, copyToClipboard, showToast } from './utils.js';
+import { escapeHtml } from './utils.js';
 import { store } from './store.js';
-import { getWs } from './ws-ref.js';
-
-// Ask the active session to hot-reload skills so a just-installed/uninstalled
-// skill takes effect without restarting the session. No-op if no live session.
-function reloadActiveSessionSkills() {
-  var ws = getWs();
-  if (ws && ws.readyState === 1) {
-    ws.send(JSON.stringify({ type: "reload_skills" }));
-  }
-}
 
 var modal;
 var contentEl;
-var activeTab = "all";
-var currentView = "list"; // "list" or "detail"
-var skillsData = {}; // cache per tab
-var installedSkills = {}; // { skillName: { scope: "global"|"project"|"both" } }
-var searchQuery = "";
-var searchTimer = null;
-var searchCache = {}; // cache per query
-
-function basePath() { return store.get('basePath') || ""; }
-
 export function initSkills() {
 
   modal = document.getElementById("skills-modal");
@@ -44,6 +29,7 @@ export function initSkills() {
   }
 
   if (backBtn) {
+    backBtn.setAttribute("aria-label", "Back to skills");
     backBtn.addEventListener("click", showListView);
   }
 
@@ -51,6 +37,12 @@ export function initSkills() {
     backdrop.addEventListener("click", closeSkillsModal);
   }
 
+  store.subscribe(function (state, previous) {
+    var next = state.mcpSkillsWorkbench || {}; var old = previous.mcpSkillsWorkbench || {};
+    if (state.skillsRefreshVersion !== previous.skillsRefreshVersion && skillState().activeTab === 'installed' && skillState().currentView === 'list') loadInstalledSkills();
+    if (next.open && next.tab === 'skills' && (!old.open || old.tab !== 'skills')) activateSkills();
+  });
+
   // Search input
   var searchInput = document.getElementById("skills-search-input");
   var searchHint = document.getElementById("skills-search-hint");
@@ -66,22 +58,23 @@ export function initSkills() {
   }
 
   if (searchInput) {
+    searchInput.setAttribute("aria-label", "Search skills");
     searchInput.addEventListener("input", function () {
       var q = searchInput.value.trim();
-      searchQuery = q;
+      skillState().searchQuery = q;
       updateSearchControls();
-      if (searchTimer) clearTimeout(searchTimer);
+      if (skillState().searchTimer) clearTimeout(skillState().searchTimer);
       if (!q) {
         // Clear search — restore tab view
         var tabsEl = modal.querySelector(".skills-tabs");
         if (tabsEl) tabsEl.style.display = "";
-        loadSkills(activeTab);
+        loadSkills(skillState().activeTab);
         return;
       }
       // Hide tabs during search
       var tabsEl2 = modal.querySelector(".skills-tabs");
       if (tabsEl2) tabsEl2.style.display = "none";
-      searchTimer = setTimeout(function () {
+      skillState().searchTimer = setTimeout(function () {
         loadSearchResults(q);
       }, 300);
     });
@@ -90,19 +83,20 @@ export function initSkills() {
   if (searchClear) {
     searchClear.addEventListener("click", function () {
       if (searchInput) { searchInput.value = ""; }
-      searchQuery = "";
+      skillState().searchQuery = "";
       updateSearchControls();
-      if (searchTimer) clearTimeout(searchTimer);
+      if (skillState().searchTimer) clearTimeout(skillState().searchTimer);
       var tabsEl = modal.querySelector(".skills-tabs");
       if (tabsEl) tabsEl.style.display = "";
-      loadSkills(activeTab);
+      loadSkills(skillState().activeTab);
       if (searchInput) searchInput.focus();
     });
   }
 
   // "/" key focuses search when modal is open
   document.addEventListener("keydown", function (e) {
-    if (e.key === "/" && modal && !modal.classList.contains("hidden") && currentView === "list") {
+    if (e.target && (e.target.matches("input, textarea") || e.target.isContentEditable)) return;
+    if (e.key === "/" && modal && !modal.classList.contains("hidden") && skillState().currentView === "list") {
       if (document.activeElement !== searchInput) {
         e.preventDefault();
         if (searchInput) searchInput.focus();
@@ -116,11 +110,11 @@ export function initSkills() {
     (function (tab) {
       tab.addEventListener("click", function () {
         var tabName = tab.dataset.tab;
-        if (tabName === activeTab && currentView === "list" && !searchQuery) return;
-        activeTab = tabName;
-        currentView = "list";
+        if (tabName === skillState().activeTab && skillState().currentView === "list" && !skillState().searchQuery) return;
+        skillState().activeTab = tabName;
+        skillState().currentView = "list";
         // Clear search when switching tabs
-        searchQuery = "";
+        skillState().searchQuery = "";
         var si = document.getElementById("skills-search-input");
         if (si) si.value = "";
         updateSearchControls();
@@ -133,7 +127,7 @@ export function initSkills() {
   // Esc key
   document.addEventListener("keydown", function (e) {
     if (e.key === "Escape" && modal && !modal.classList.contains("hidden")) {
-      if (currentView === "detail") {
+      if (skillState().currentView === "detail") {
         showListView();
       } else {
         closeSkillsModal();
@@ -146,28 +140,23 @@ function fetchInstalledSkills() {
   return fetch(basePath() + "api/installed-skills")
     .then(function (res) { return res.json(); })
     .then(function (data) {
-      installedSkills = data.installed || {};
+      skillState().installedSkills = data.installed || {};
     })
     .catch(function () {
-      installedSkills = {};
+      skillState().installedSkills = {};
     });
 }
 
-function getInstalledInfo(skillId) {
-  return installedSkills[skillId] || null;
-}
-
-function scopeLabel(scope) {
-  if (scope === "both") return "Global + Project";
-  if (scope === "project") return "Project";
-  return "Global";
-}
+function openSkillsModal() { openMcpSkillsWorkbench("skills"); }
 
-function openSkillsModal() {
+function activateSkills() {
   if (!modal) return;
-  modal.classList.remove("hidden");
+  var target = String(store.get('currentSlug')) + ':' + String(store.get('myUserId'));
+  if (skillState().loadedFor === target) return;
+  skillState().loadedFor = target;
+  updateTabUI();
   refreshIcons(modal);
-  currentView = "list";
+  skillState().currentView = "list";
   var backBtn = document.getElementById("skills-back-btn");
   if (backBtn) backBtn.classList.add("hidden");
   var tabsEl = modal.querySelector(".skills-tabs");
@@ -175,22 +164,22 @@ function openSkillsModal() {
   var searchEl = document.getElementById("skills-search");
   if (searchEl) searchEl.style.display = "";
   var searchInput = document.getElementById("skills-search-input");
-  if (searchInput) { searchInput.value = ""; searchQuery = ""; }
-  // Always refresh installed status on open
+  if (searchInput) { searchInput.value = ""; skillState().searchQuery = ""; }
+  // Load the current project inventory once; installation events refresh it.
   fetchInstalledSkills().then(function () {
-    loadSkills(activeTab);
+    loadSkills(skillState().activeTab);
   });
 }
 
 function closeSkillsModal() {
   if (!modal) return;
-  modal.classList.add("hidden");
+  closeMcpSkillsWorkbench();
 }
 
 function updateTabUI() {
   var tabs = modal.querySelectorAll(".skills-tab");
   for (var i = 0; i < tabs.length; i++) {
-    if (tabs[i].dataset.tab === activeTab) {
+    if (tabs[i].dataset.tab === skillState().activeTab) {
       tabs[i].classList.add("active");
     } else {
       tabs[i].classList.remove("active");
@@ -201,7 +190,7 @@ function updateTabUI() {
 function loadSkills(tab) {
   // Always ensure tabs and search are visible when loading list view
   var tabsEl = modal.querySelector(".skills-tabs");
-  if (tabsEl && !searchQuery) tabsEl.style.display = "";
+  if (tabsEl && !skillState().searchQuery) tabsEl.style.display = "";
   var searchEl = document.getElementById("skills-search");
   if (searchEl) searchEl.style.display = "";
 
@@ -212,8 +201,8 @@ function loadSkills(tab) {
   }
 
   // Check cache
-  if (skillsData[tab]) {
-    renderList(skillsData[tab], tab);
+  if (skillState().skillsData[tab]) {
+    renderList(skillState().skillsData[tab], tab);
     return;
   }
 
@@ -223,7 +212,7 @@ function loadSkills(tab) {
     .then(function (res) { return res.json(); })
     .then(function (data) {
       var skills = data.skills || [];
-      skillsData[tab] = skills;
+      skillState().skillsData[tab] = skills;
       renderList(skills, tab);
     })
     .catch(function (err) {
@@ -237,8 +226,8 @@ function loadInstalledSkills() {
   fetch(basePath() + "api/installed-skills")
     .then(function (res) { return res.json(); })
     .then(function (data) {
-      installedSkills = data.installed || {};
-      renderInstalledList(installedSkills);
+      skillState().installedSkills = data.installed || {};
+      renderInstalledList(skillState().installedSkills);
     })
     .catch(function () {
       contentEl.innerHTML = '<div class="skills-empty">Failed to load installed skills</div>';
@@ -263,12 +252,12 @@ function renderInstalledList(installed) {
       '<div class="skills-installed-item-info">' +
         '<div class="skills-installed-item-header">' +
           '<span class="skills-installed-item-name">' + escapeHtml(name) + '</span>' +
-          '<span class="skills-installed-badge">' + iconHtml("check") + ' ' + scopeLabel(info.scope) + '</span>' +
+          '<span class="skills-installed-badge">' + iconHtml("check") + ' ' + (info.source === "clay-builtin" ? "Built-in" : scopeLabel(info.scope)) + '</span>' +
         '</div>' +
         (desc ? '<div class="skills-installed-item-desc">' + escapeHtml(desc) + '</div>' : '') +
       '</div>' +
       '<div class="skills-installed-item-actions">' +
-        buildUninstallButtons(name, info.scope) +
+        (info.source === "clay-builtin" ? "" : buildUninstallButtons(name, info.scope)) +
       '</div>' +
     '</div>';
   }
@@ -301,11 +290,11 @@ function buildUninstallButtons(skillName, scope) {
 
 function loadSearchResults(q) {
   // Stale check — if query changed since this was scheduled, skip
-  if (q !== searchQuery) return;
+  if (q !== skillState().searchQuery) return;
 
   // Check cache
-  if (searchCache[q]) {
-    renderList(searchCache[q], "search");
+  if (skillState().searchCache[q]) {
+    renderList(skillState().searchCache[q], "search");
     return;
   }
 
@@ -314,13 +303,13 @@ function loadSearchResults(q) {
   fetch("/api/skills/search?q=" + encodeURIComponent(q))
     .then(function (res) { return res.json(); })
     .then(function (data) {
-      if (q !== searchQuery) return; // stale
+      if (q !== skillState().searchQuery) return; // stale
       var skills = data.skills || [];
-      searchCache[q] = skills;
+      skillState().searchCache[q] = skills;
       renderList(skills, "search");
     })
     .catch(function (err) {
-      if (q !== searchQuery) return;
+      if (q !== skillState().searchQuery) return;
       contentEl.innerHTML = '<div class="skills-empty">Search failed</div>';
     });
 }
@@ -334,7 +323,7 @@ function formatInstalls(n) {
 
 function renderList(skills, tab) {
   if (!skills.length) {
-    contentEl.innerHTML = '<div class="skills-empty">' + (searchQuery ? "No matching skills" : "No skills found") + '</div>';
+    contentEl.innerHTML = '<div class="skills-empty">' + (skillState().searchQuery ? "No matching skills" : "No skills found") + '</div>';
     return;
   }
 
@@ -353,7 +342,7 @@ function renderList(skills, tab) {
 
     var installedBadge = "";
     if (info) {
-      installedBadge = '<span class="skills-installed-badge">' + iconHtml("check") + ' ' + scopeLabel(info.scope) + '</span>';
+      installedBadge = '<span class="skills-installed-badge">' + iconHtml("check") + ' ' + (info.source === "clay-builtin" ? "Built-in" : scopeLabel(info.scope)) + '</span>';
     }
 
     html += '<div class="skills-item' + (info ? " installed" : "") + '" data-source="' + escapeHtml(s.source) + '" data-skill="' + escapeHtml(s.skillId) + '">' +
@@ -387,7 +376,7 @@ function renderList(skills, tab) {
 }
 
 function loadDetail(source, skill) {
-  currentView = "detail";
+  skillState().currentView = "detail";
 
   // Hide tabs and search
   var tabsEl = modal.querySelector(".skills-tabs");
@@ -410,400 +399,16 @@ function loadDetail(source, skill) {
 }
 
 function showListView() {
-  currentView = "list";
+  skillState().currentView = "list";
   var tabsEl = modal.querySelector(".skills-tabs");
-  if (tabsEl) tabsEl.style.display = searchQuery ? "none" : "";
+  if (tabsEl) tabsEl.style.display = skillState().searchQuery ? "none" : "";
   var searchEl = document.getElementById("skills-search");
   if (searchEl) searchEl.style.display = "";
   var backBtn = document.getElementById("skills-back-btn");
   if (backBtn) backBtn.classList.add("hidden");
-  if (searchQuery) {
-    loadSearchResults(searchQuery);
+  if (skillState().searchQuery) {
+    loadSearchResults(skillState().searchQuery);
   } else {
-    loadSkills(activeTab);
-  }
-}
-
-function renderDetail(data) {
-  var name = data.name || data._skill || "Unknown";
-  var desc = data.description || "";
-  var cmd = data.command || "npx skills add https://github.com/" + data._source + " --skill " + data._skill;
-  var skillId = data._skill || name;
-  var info = getInstalledInfo(skillId);
-
-  // Show back button in header
-  var backBtn = document.getElementById("skills-back-btn");
-  if (backBtn) backBtn.classList.remove("hidden");
-
-  var html = '<div class="skills-detail">';
-
-  // --- Main content (left) ---
-  html += '<div class="skills-detail-main">';
-  html += '<div class="skills-detail-name">' + escapeHtml(name) + '</div>';
-
-  if (desc) {
-    html += '<div class="skills-detail-desc">' + escapeHtml(desc) + '</div>';
-  }
-
-  html += '<div class="skills-detail-cmd">' +
-    '<code>' + escapeHtml(cmd) + '</code>' +
-    '<button class="skills-copy-btn" data-cmd="' + escapeHtml(cmd) + '">' + iconHtml("copy") + '</button>' +
-  '</div>';
-
-  // SKILL.md content (already rendered HTML from skills.sh)
-  if (data.skillMd) {
-    html += '<div class="skills-detail-md-wrap">' +
-      '<div class="skills-detail-section-title">SKILL.md</div>' +
-      '<div class="skills-detail-md">' + sanitizeSkillHtml(data.skillMd) + '</div>' +
-    '</div>';
-  }
-
-  html += '</div>'; // end main
-
-  // --- Sidebar (right) ---
-  html += '<div class="skills-detail-sidebar">';
-
-  // Weekly installs
-  if (data.weeklyInstalls) {
-    html += '<div class="skills-meta-block">' +
-      '<div class="skills-meta-label">Weekly Installs</div>' +
-      '<div class="skills-meta-value">' + escapeHtml(data.weeklyInstalls) + '</div>' +
-    '</div>';
-  }
-
-  // Repository
-  if (data.repository || data._source) {
-    var repo = data.repository || data._source;
-    html += '<div class="skills-meta-block">' +
-      '<div class="skills-meta-label">Repository</div>' +
-      '<div class="skills-meta-value small">' +
-        '<div class="skills-meta-repo">' +
-          iconHtml("external-link") +
-          '<a href="https://github.com/' + escapeHtml(repo) + '" target="_blank" rel="noopener">' + escapeHtml(repo) + '</a>' +
-        '</div>' +
-      '</div>' +
-    '</div>';
-  }
-
-  // GitHub stars
-  if (data.githubStars) {
-    html += '<div class="skills-meta-block">' +
-      '<div class="skills-meta-label">GitHub Stars</div>' +
-      '<div class="skills-meta-value">' + escapeHtml(data.githubStars) + '</div>' +
-    '</div>';
-  }
-
-  // First seen
-  if (data.firstSeen) {
-    html += '<div class="skills-meta-block">' +
-      '<div class="skills-meta-label">First Seen</div>' +
-      '<div class="skills-meta-value small">' + escapeHtml(data.firstSeen) + '</div>' +
-    '</div>';
-  }
-
-  // Security audits
-  if (data.audits && data.audits.length) {
-    html += '<div class="skills-meta-block">' +
-      '<div class="skills-meta-label">Security Audits</div>' +
-      '<div class="skills-audit-list">';
-    for (var a = 0; a < data.audits.length; a++) {
-      var audit = data.audits[a];
-      html += '<div class="skills-audit-item">' +
-        '<span>' + escapeHtml(audit.name) + '</span>' +
-        '<span class="skills-audit-badge ' + escapeHtml(audit.status) + '">' + escapeHtml(audit.status.toUpperCase()) + '</span>' +
-      '</div>';
-    }
-    html += '</div></div>';
-  }
-
-  // Installed on
-  if (data.installedOn && data.installedOn.length) {
-    html += '<div class="skills-meta-block">' +
-      '<div class="skills-meta-label">Installed On</div>' +
-      '<div class="skills-platform-list">';
-    for (var p = 0; p < data.installedOn.length; p++) {
-      var plat = data.installedOn[p];
-      html += '<div class="skills-platform-item">' +
-        '<span>' + escapeHtml(plat.name) + '</span>' +
-        '<span class="skills-platform-count">' + escapeHtml(plat.installs) + '</span>' +
-      '</div>';
-    }
-    html += '</div></div>';
-  }
-
-  // Install buttons or installed status
-  html += '<div class="skills-meta-block">' +
-    buildInstallButtonsHtml(skillId, data._source, data._skill) +
-  '</div>';
-
-  html += '</div>'; // end sidebar
-  html += '</div>'; // end detail
-
-  contentEl.innerHTML = html;
-  refreshIcons(contentEl);
-
-  // Copy button handler
-  var copyBtn = contentEl.querySelector(".skills-copy-btn");
-  if (copyBtn) {
-    copyBtn.addEventListener("click", function (e) {
-      e.stopPropagation();
-      var cmdText = copyBtn.dataset.cmd;
-      copyToClipboard(cmdText);
-      copyBtn.classList.add("copied");
-      setTimeout(function () { copyBtn.classList.remove("copied"); }, 1500);
-    });
-  }
-
-  // Install button handlers
-  var installActions = contentEl.querySelector(".skills-install-actions");
-  if (installActions) {
-    attachInstallHandlers(installActions, data._source, data._skill);
-  }
-}
-
-function installSkill(source, skill, scope) {
-  var url = "https://github.com/" + source;
-
-  // Set all install buttons in the detail view to installing state
-  var btns = contentEl.querySelectorAll(".skills-install-btn:not(.installed-state)");
-  for (var i = 0; i < btns.length; i++) {
-    btns[i].disabled = true;
-    btns[i].classList.add("installing");
-    btns[i].innerHTML = '<div class="skills-btn-spinner"></div> Installing...';
-  }
-
-  fetch(basePath() + "api/install-skill", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ url: url, skill: skill, scope: scope }),
-  }).catch(function () {
-    // Re-enable buttons on fetch error
-    for (var j = 0; j < btns.length; j++) {
-      btns[j].disabled = false;
-      btns[j].classList.remove("installing");
-    }
-  });
-}
-
-export function handleSkillInstalled(msg) {
-  var skill = msg.skill;
-  var scope = msg.scope;
-  var success = msg.success;
-
-  if (success) {
-    // Update installedSkills cache
-    var existing = installedSkills[skill];
-    if (existing) {
-      if (existing.scope !== scope && existing.scope !== "both") {
-        existing.scope = "both";
-      }
-    } else {
-      installedSkills[skill] = { scope: scope };
-    }
-
-    // Invalidate skills data cache so list refreshes with updated badges
-    skillsData = {};
-
-    // If we're on the detail view for this skill, re-render it
-    if (currentView === "detail") {
-      var detailEl = contentEl.querySelector(".skills-detail");
-      if (detailEl) {
-        // Re-render the install section in the sidebar
-        updateDetailInstallButtons(skill);
-      }
-    }
-
-    // If we're on the installed tab, refresh it
-    if (activeTab === "installed" && currentView === "list") {
-      loadInstalledSkills();
-    }
-
-    // Hot-reload skills in the active session so it's usable immediately
-    reloadActiveSessionSkills();
-  } else {
-    // Show error toast
-    showToast("Failed to install " + skill + (msg.error ? ": " + msg.error : ""), "error");
-    // Re-enable buttons
-    var btns = contentEl.querySelectorAll(".skills-install-btn.installing");
-    for (var i = 0; i < btns.length; i++) {
-      btns[i].disabled = false;
-      btns[i].classList.remove("installing");
-      // We can't easily restore the original text, so just set generic labels
-      btns[i].innerHTML = iconHtml("download") + " Install";
-    }
-  }
-}
-
-function uninstallSkill(skill, scope) {
-  // Set the uninstall button to loading state
-  var unBtn = contentEl.querySelector('.skills-uninstall-btn[data-scope="' + scope + '"]');
-  if (unBtn) {
-    unBtn.disabled = true;
-    unBtn.classList.add("uninstalling");
-    unBtn.innerHTML = '<div class="skills-btn-spinner small"></div>';
-  }
-
-  fetch(basePath() + "api/uninstall-skill", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ skill: skill, scope: scope }),
-  }).catch(function () {
-    if (unBtn) {
-      unBtn.disabled = false;
-      unBtn.classList.remove("uninstalling");
-      unBtn.innerHTML = iconHtml("x");
-    }
-  });
-}
-
-export function handleSkillUninstalled(msg) {
-  var skill = msg.skill;
-  var scope = msg.scope;
-  var success = msg.success;
-
-  if (success) {
-    // Update installedSkills cache
-    var existing = installedSkills[skill];
-    if (existing) {
-      if (existing.scope === "both") {
-        // Downgrade from "both" to whichever scope remains
-        existing.scope = scope === "global" ? "project" : "global";
-      } else {
-        // Fully uninstalled
-        delete installedSkills[skill];
-      }
-    }
-
-    // Invalidate skills data cache so list refreshes
-    skillsData = {};
-
-    // If we're on the detail view, re-render buttons
-    if (currentView === "detail") {
-      var detailEl = contentEl.querySelector(".skills-detail");
-      if (detailEl) {
-        updateDetailInstallButtons(skill);
-      }
-    }
-
-    // If we're on the installed tab, refresh it
-    if (activeTab === "installed" && currentView === "list") {
-      loadInstalledSkills();
-    }
-
-    // Hot-reload skills in the active session so the change applies immediately
-    reloadActiveSessionSkills();
-  } else {
-    showToast("Failed to uninstall " + skill + (msg.error ? ": " + msg.error : ""), "error");
-    // Re-enable the uninstall button
-    var unBtn = contentEl.querySelector('.skills-uninstall-btn[data-scope="' + scope + '"]');
-    if (unBtn) {
-      unBtn.disabled = false;
-      unBtn.classList.remove("uninstalling");
-      unBtn.innerHTML = iconHtml("x");
-      refreshIcons(unBtn);
-    }
-  }
-}
-
-function updateDetailInstallButtons(skillId) {
-  var info = getInstalledInfo(skillId);
-  var sidebar = contentEl.querySelector(".skills-detail-sidebar");
-  if (!sidebar) return;
-
-  // Find the install actions or installed status block (last .skills-meta-block)
-  var blocks = sidebar.querySelectorAll(".skills-meta-block");
-  var lastBlock = blocks[blocks.length - 1];
-  if (!lastBlock) return;
-
-  // Get source/skill from the current detail view data attributes
-  var sourceEl = sidebar.querySelector("[data-detail-source]");
-  if (!sourceEl) sourceEl = contentEl.querySelector("[data-detail-source]");
-  var source = sourceEl ? sourceEl.dataset.detailSource : "";
-  var skill = sourceEl ? sourceEl.dataset.detailSkill : skillId;
-
-  lastBlock.innerHTML = buildInstallButtonsHtml(skillId, source, skill);
-  refreshIcons(lastBlock);
-  attachInstallHandlers(lastBlock, source, skill);
-}
-
-function buildInstallButtonsHtml(skillId, source, skill) {
-  var info = getInstalledInfo(skillId);
-
-  var html = '<div class="skills-install-actions" data-detail-source="' + escapeHtml(source) + '" data-detail-skill="' + escapeHtml(skill) + '">';
-
-  if (info && info.scope === "both") {
-    // Both scopes installed — show status + uninstall for each
-    html += '<div class="skills-installed-row">' +
-      '<div class="skills-installed-status compact">' +
-        iconHtml("circle-check") + ' Installed (Project)' +
-      '</div>' +
-      '<button class="skills-uninstall-btn" data-scope="project" title="Uninstall (Project)">' +
-        iconHtml("x") +
-      '</button>' +
-    '</div>';
-    html += '<div class="skills-installed-row">' +
-      '<div class="skills-installed-status compact">' +
-        iconHtml("circle-check") + ' Installed (Global)' +
-      '</div>' +
-      '<button class="skills-uninstall-btn" data-scope="global" title="Uninstall (Global)">' +
-        iconHtml("x") +
-      '</button>' +
-    '</div>';
-  } else if (info) {
-    // One scope installed — show status with uninstall + install button for other scope
-    html += '<div class="skills-installed-row">' +
-      '<div class="skills-installed-status compact">' +
-        iconHtml("circle-check") + ' Installed (' + scopeLabel(info.scope) + ')' +
-      '</div>' +
-      '<button class="skills-uninstall-btn" data-scope="' + escapeHtml(info.scope) + '" title="Uninstall (' + scopeLabel(info.scope) + ')">' +
-        iconHtml("x") +
-      '</button>' +
-    '</div>';
-
-    // Show install button for the other scope
-    var otherScope = info.scope === "global" ? "project" : "global";
-    var otherLabel = info.scope === "global" ? "Project" : "Global";
-    html += '<button class="skills-install-btn secondary" data-scope="' + otherScope + '">' +
-      iconHtml("download") + ' Install (' + otherLabel + ')' +
-    '</button>';
-  } else {
-    // Not installed — show both install buttons
-    html += '<button class="skills-install-btn" data-scope="project">' +
-      iconHtml("download") + ' Install (Project)' +
-    '</button>';
-    html += '<button class="skills-install-btn secondary" data-scope="global">' +
-      iconHtml("download") + ' Install (Global)' +
-    '</button>';
-  }
-
-  html += '</div>';
-  return html;
-}
-
-function attachInstallHandlers(container, source, skill) {
-  var btns = container.querySelectorAll(".skills-install-btn");
-  for (var i = 0; i < btns.length; i++) {
-    (function (btn) {
-      btn.addEventListener("click", function () {
-        var scope = btn.dataset.scope;
-        installSkill(source, skill, scope);
-      });
-    })(btns[i]);
-  }
-  var unBtns = container.querySelectorAll(".skills-uninstall-btn");
-  for (var j = 0; j < unBtns.length; j++) {
-    (function (btn) {
-      btn.addEventListener("click", function () {
-        var scope = btn.dataset.scope;
-        uninstallSkill(skill, scope);
-      });
-    })(unBtns[j]);
-  }
-}
-
-function sanitizeSkillHtml(rawHtml) {
-  if (typeof DOMPurify !== "undefined") {
-    return DOMPurify.sanitize(rawHtml);
+    loadSkills(skillState().activeTab);
   }
-  return rawHtml;
 }