clay-server 4.9.0-beta.1 → 5.0.0-beta.2

package/lib/public/modules/skills.js

@@ -1,414 +1,119 @@
-import { skillState, basePath, getInstalledInfo, scopeLabel } from './skills-state.js';
+import { skillState, patchSkills, basePath, content } from './skills-state.js';
 import { renderDetail } from './skills-detail.js';
-import { uninstallSkill } from './skills-actions.js';
+import { renderSkillList, renderSkillFeedback } from './skills-list-view.js';
 export { handleSkillInstalled, handleSkillUninstalled } from './skills-actions.js';
 import { openMcpSkillsWorkbench, closeMcpSkillsWorkbench } from './mcp-skills-workbench.js';
-import { iconHtml, refreshIcons } from './icons.js';
-import { escapeHtml } from './utils.js';
 import { store } from './store.js';
 
-var modal;
-var contentEl;
-export function initSkills() {
-
-  modal = document.getElementById("skills-modal");
-  contentEl = document.getElementById("skills-content");
-  var btn = document.getElementById("skills-btn");
-  var closeBtn = document.getElementById("skills-modal-close");
-  var backBtn = document.getElementById("skills-back-btn");
-  var backdrop = modal ? modal.querySelector(".confirm-backdrop") : null;
-
-  if (btn) {
-    btn.addEventListener("click", function () {
-      openSkillsModal();
-    });
-  }
-
-  if (closeBtn) {
-    closeBtn.addEventListener("click", closeSkillsModal);
-  }
-
-  if (backBtn) {
-    backBtn.setAttribute("aria-label", "Back to skills");
-    backBtn.addEventListener("click", showListView);
-  }
-
-  if (backdrop) {
-    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");
-  var searchClear = document.getElementById("skills-search-clear");
-
-  function updateSearchControls() {
-    var hasValue = searchInput && searchInput.value.length > 0;
-    if (searchHint) searchHint.style.display = hasValue ? "none" : "";
-    if (searchClear) {
-      if (hasValue) { searchClear.classList.remove("hidden"); }
-      else { searchClear.classList.add("hidden"); }
-    }
-  }
-
-  if (searchInput) {
-    searchInput.setAttribute("aria-label", "Search skills");
-    searchInput.addEventListener("input", function () {
-      var q = searchInput.value.trim();
-      skillState().searchQuery = q;
-      updateSearchControls();
-      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(skillState().activeTab);
-        return;
-      }
-      // Hide tabs during search
-      var tabsEl2 = modal.querySelector(".skills-tabs");
-      if (tabsEl2) tabsEl2.style.display = "none";
-      skillState().searchTimer = setTimeout(function () {
-        loadSearchResults(q);
-      }, 300);
-    });
-  }
-
-  if (searchClear) {
-    searchClear.addEventListener("click", function () {
-      if (searchInput) { searchInput.value = ""; }
-      skillState().searchQuery = "";
-      updateSearchControls();
-      if (skillState().searchTimer) clearTimeout(skillState().searchTimer);
-      var tabsEl = modal.querySelector(".skills-tabs");
-      if (tabsEl) tabsEl.style.display = "";
-      loadSkills(skillState().activeTab);
-      if (searchInput) searchInput.focus();
-    });
-  }
-
-  // "/" key focuses search when modal is open
-  document.addEventListener("keydown", function (e) {
-    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();
-      }
-    }
-  });
-
-  // Tab clicks
-  var tabs = modal ? modal.querySelectorAll(".skills-tab") : [];
-  for (var i = 0; i < tabs.length; i++) {
-    (function (tab) {
-      tab.addEventListener("click", function () {
-        var tabName = tab.dataset.tab;
-        if (tabName === skillState().activeTab && skillState().currentView === "list" && !skillState().searchQuery) return;
-        skillState().activeTab = tabName;
-        skillState().currentView = "list";
-        // Clear search when switching tabs
-        skillState().searchQuery = "";
-        var si = document.getElementById("skills-search-input");
-        if (si) si.value = "";
-        updateSearchControls();
-        updateTabUI();
-        loadSkills(tabName);
-      });
-    })(tabs[i]);
-  }
-
-  // Esc key
-  document.addEventListener("keydown", function (e) {
-    if (e.key === "Escape" && modal && !modal.classList.contains("hidden")) {
-      if (skillState().currentView === "detail") {
-        showListView();
-      } else {
-        closeSkillsModal();
-      }
-    }
-  });
+function target() { return String(store.get('currentSlug')) + ':' + String(store.get('myUserId')); }
+function modal() { return document.getElementById('skills-modal'); }
+function requestGuard() {
+  var version = (skillState().requestVersion || 0) + 1, owner = target();
+  patchSkills({ requestVersion: version });
+  return function () { return target() === owner && skillState().requestVersion === version; };
 }
-
-function fetchInstalledSkills() {
-  return fetch(basePath() + "api/installed-skills")
-    .then(function (res) { return res.json(); })
-    .then(function (data) {
-      skillState().installedSkills = data.installed || {};
-    })
-    .catch(function () {
-      skillState().installedSkills = {};
-    });
-}
-
-function openSkillsModal() { openMcpSkillsWorkbench("skills"); }
-
-function activateSkills() {
-  if (!modal) return;
-  var target = String(store.get('currentSlug')) + ':' + String(store.get('myUserId'));
-  if (skillState().loadedFor === target) return;
-  skillState().loadedFor = target;
-  updateTabUI();
-  refreshIcons(modal);
-  skillState().currentView = "list";
-  var backBtn = document.getElementById("skills-back-btn");
-  if (backBtn) backBtn.classList.add("hidden");
-  var tabsEl = modal.querySelector(".skills-tabs");
-  if (tabsEl) tabsEl.style.display = "";
-  var searchEl = document.getElementById("skills-search");
-  if (searchEl) searchEl.style.display = "";
-  var searchInput = document.getElementById("skills-search-input");
-  if (searchInput) { searchInput.value = ""; skillState().searchQuery = ""; }
-  // Load the current project inventory once; installation events refresh it.
-  fetchInstalledSkills().then(function () {
-    loadSkills(skillState().activeTab);
+function json(url) { return fetch(url).then(function (res) { if (!res.ok) throw new Error('Request failed'); return res.json(); }); }
+function chrome() {
+  var state = skillState(), detail = state.currentView === 'detail', root = modal();
+  root.querySelector('.skills-library-heading').hidden = detail;
+  document.getElementById('skills-back-btn').classList.toggle('hidden', !detail);
+  root.querySelector('.skills-tabs').hidden = detail;
+  root.querySelector('.skills-toolbar').hidden = detail;
+  root.querySelector('.skills-discovery-views').hidden = detail || state.activeTab === 'installed' || !!state.searchQuery;
+  root.querySelectorAll('.skills-tab').forEach(function (button) {
+    var active = button.dataset.tab === state.activeTab;
+    button.classList.toggle('active', active); button.setAttribute('aria-selected', String(active)); button.tabIndex = active ? 0 : -1;
+  });
+  var input = document.getElementById('skills-search-input');
+  input.placeholder = state.activeTab === 'installed' ? 'Search installed skills' : 'Search community skills';
+  input.setAttribute('aria-label', input.placeholder);
+  if (input.value !== state.searchQuery) input.value = state.searchQuery;
+  document.getElementById('skills-search-clear').classList.toggle('hidden', !state.searchQuery);
+  document.getElementById('skills-installed-count').textContent = Object.keys(state.installedSkills).length || '';
+  root.querySelectorAll('[data-discovery]').forEach(function (button) {
+    button.setAttribute('aria-pressed', String(button.dataset.discovery === (state.discoverySort || 'all')));
   });
 }
-
-function closeSkillsModal() {
-  if (!modal) return;
-  closeMcpSkillsWorkbench();
-}
-
-function updateTabUI() {
-  var tabs = modal.querySelectorAll(".skills-tab");
-  for (var i = 0; i < tabs.length; i++) {
-    if (tabs[i].dataset.tab === skillState().activeTab) {
-      tabs[i].classList.add("active");
-    } else {
-      tabs[i].classList.remove("active");
-    }
-  }
-}
-
-function loadSkills(tab) {
-  // Always ensure tabs and search are visible when loading list view
-  var tabsEl = modal.querySelector(".skills-tabs");
-  if (tabsEl && !skillState().searchQuery) tabsEl.style.display = "";
-  var searchEl = document.getElementById("skills-search");
-  if (searchEl) searchEl.style.display = "";
-
-  // Installed tab — uses local data, not skills.sh
-  if (tab === "installed") {
-    loadInstalledSkills();
-    return;
-  }
-
-  // Check cache
-  if (skillState().skillsData[tab]) {
-    renderList(skillState().skillsData[tab], tab);
-    return;
-  }
-
-  contentEl.innerHTML = '<div class="skills-loading"><div class="skills-spinner"></div> Loading skills...</div>';
-
-  fetch("/api/skills?tab=" + encodeURIComponent(tab))
-    .then(function (res) { return res.json(); })
-    .then(function (data) {
-      var skills = data.skills || [];
-      skillState().skillsData[tab] = skills;
-      renderList(skills, tab);
-    })
-    .catch(function (err) {
-      contentEl.innerHTML = '<div class="skills-empty">Failed to load skills</div>';
-    });
-}
-
-function loadInstalledSkills() {
-  contentEl.innerHTML = '<div class="skills-loading"><div class="skills-spinner"></div> Loading installed skills...</div>';
-
-  fetch(basePath() + "api/installed-skills")
-    .then(function (res) { return res.json(); })
-    .then(function (data) {
-      skillState().installedSkills = data.installed || {};
-      renderInstalledList(skillState().installedSkills);
-    })
-    .catch(function () {
-      contentEl.innerHTML = '<div class="skills-empty">Failed to load installed skills</div>';
-    });
-}
-
-function renderInstalledList(installed) {
-  var names = Object.keys(installed);
-  if (!names.length) {
-    contentEl.innerHTML = '<div class="skills-empty">No skills installed<div class="skills-empty-hint">Browse the other tabs to discover and install skills</div></div>';
+function renderList(rows) { chrome(); renderSkillList(rows || [], openSkill, function () { selectTab('discover'); }); }
+function loadList(refresh) {
+  chrome();
+  var state = skillState(), valid = requestGuard();
+  if (state.activeTab === 'installed') {
+    if (!refresh && state.inventoryLoaded) { renderList(); return; }
+    renderSkillFeedback('Loading your skills…');
+    json(basePath() + 'api/installed-skills').then(function (data) {
+      if (!valid()) return;
+      patchSkills({ installedSkills: data.installed || {}, inventoryLoaded: true }); renderList();
+    }).catch(function () { if (valid()) renderSkillFeedback('Could not load your skills.', function () { loadList(true); }); });
     return;
   }
-
-  var html = '<div class="skills-list">';
-
-  for (var i = 0; i < names.length; i++) {
-    var name = names[i];
-    var info = installed[name];
-    var desc = info.description || "";
-
-    html += '<div class="skills-installed-item">' +
-      '<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") + ' ' + (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">' +
-        (info.source === "clay-builtin" ? "" : buildUninstallButtons(name, info.scope)) +
-      '</div>' +
-    '</div>';
-  }
-
-  html += '</div>';
-  contentEl.innerHTML = html;
-  refreshIcons(contentEl);
-
-  // Attach uninstall handlers
-  var unBtns = contentEl.querySelectorAll(".skills-uninstall-btn");
-  for (var j = 0; j < unBtns.length; j++) {
-    (function (btn) {
-      btn.addEventListener("click", function () {
-        uninstallSkill(btn.dataset.skill, btn.dataset.scope);
-      });
-    })(unBtns[j]);
-  }
+  var query = state.searchQuery, sort = state.discoverySort || 'all';
+  var cache = query ? state.searchCache[query] : state.skillsData[sort];
+  if (cache && !refresh) { renderList(cache); return; }
+  renderSkillFeedback(query ? 'Searching community skills…' : 'Loading community skills…');
+  json(query ? '/api/skills/search?q=' + encodeURIComponent(query) : '/api/skills?tab=' + sort).then(function (data) {
+    if (!valid()) return;
+    var rows = data.skills || [], update = {};
+    if (query) update.searchCache = Object.assign({}, skillState().searchCache, { [query]: rows });
+    else update.skillsData = Object.assign({}, skillState().skillsData, { [sort]: rows });
+    patchSkills(update); renderList(rows);
+  }).catch(function () { if (valid()) renderSkillFeedback('Could not load community skills.', function () { loadList(true); }); });
 }
-
-function buildUninstallButtons(skillName, scope) {
-  var html = '';
-  if (scope === "both") {
-    html += '<button class="skills-uninstall-btn" data-skill="' + escapeHtml(skillName) + '" data-scope="project" title="Uninstall (Project)">' + iconHtml("x") + '</button>';
-    html += '<button class="skills-uninstall-btn" data-skill="' + escapeHtml(skillName) + '" data-scope="global" title="Uninstall (Global)">' + iconHtml("x") + '</button>';
-  } else {
-    html += '<button class="skills-uninstall-btn" data-skill="' + escapeHtml(skillName) + '" data-scope="' + escapeHtml(scope) + '" title="Uninstall">' + iconHtml("x") + '</button>';
-  }
-  return html;
+function selectTab(tab) {
+  clearTimeout(skillState().searchTimer);
+  patchSkills({ activeTab: tab, currentView: 'list', searchQuery: '', selectedSkill: null }); loadList();
 }
-
-function loadSearchResults(q) {
-  // Stale check — if query changed since this was scheduled, skip
-  if (q !== skillState().searchQuery) return;
-
-  // Check cache
-  if (skillState().searchCache[q]) {
-    renderList(skillState().searchCache[q], "search");
-    return;
-  }
-
-  contentEl.innerHTML = '<div class="skills-loading"><div class="skills-spinner"></div> Searching...</div>';
-
-  fetch("/api/skills/search?q=" + encodeURIComponent(q))
-    .then(function (res) { return res.json(); })
-    .then(function (data) {
-      if (q !== skillState().searchQuery) return; // stale
-      var skills = data.skills || [];
-      skillState().searchCache[q] = skills;
-      renderList(skills, "search");
-    })
-    .catch(function (err) {
-      if (q !== skillState().searchQuery) return;
-      contentEl.innerHTML = '<div class="skills-empty">Search failed</div>';
-    });
+function showList() { patchSkills({ currentView: 'list', selectedSkill: null }); loadList(); document.getElementById('skills-search-input').focus(); }
+function openSkill(row, installed) {
+  clearTimeout(skillState().searchTimer);
+  patchSkills({ currentView: 'detail', selectedSkill: row.skillId || row.name }); chrome();
+  var valid = requestGuard(); content().scrollTop = 0;
+  if (installed) {
+    renderDetail(Object.assign({}, row, { _skill: row.name, _installed: true })); return;
+  }
+  renderSkillFeedback('Loading skill details…');
+  json('/api/skills/detail?source=' + encodeURIComponent(row.source) + '&skill=' + encodeURIComponent(row.skillId || row.name)).then(function (data) {
+    if (valid()) renderDetail(Object.assign({}, data, { _source: row.source, _skill: row.skillId || row.name }));
+  }).catch(function () { if (valid()) renderSkillFeedback('Could not load this skill.', function () { openSkill(row, false); }); });
 }
-
-function formatInstalls(n) {
-  if (typeof n !== "number") return n || "0";
-  if (n >= 1000000) return (n / 1000000).toFixed(1).replace(/\.0$/, "") + "M";
-  if (n >= 1000) return (n / 1000).toFixed(1).replace(/\.0$/, "") + "K";
-  return n.toString();
+function activate() {
+  if (skillState().loadedFor === target()) return;
+  clearTimeout(skillState().searchTimer);
+  patchSkills({ loadedFor: target(), activeTab: 'installed', currentView: 'list', searchQuery: '', installedSkills: {}, inventoryLoaded: false, selectedSkill: null });
+  loadList(true);
 }
-
-function renderList(skills, tab) {
-  if (!skills.length) {
-    contentEl.innerHTML = '<div class="skills-empty">' + (skillState().searchQuery ? "No matching skills" : "No skills found") + '</div>';
-    return;
-  }
-
-  var isHot = tab === "hot";
-  var html = '<div class="skills-list">';
-
-  for (var i = 0; i < skills.length; i++) {
-    var s = skills[i];
-    var info = getInstalledInfo(s.skillId || s.name);
-    var changeHtml = "";
-    if (isHot && typeof s.change === "number" && s.change !== 0) {
-      var cls = s.change > 0 ? "" : " negative";
-      changeHtml = '<span class="skills-item-change' + cls + '">' +
-        (s.change > 0 ? "+" : "") + formatInstalls(s.change) + '</span>';
-    }
-
-    var installedBadge = "";
-    if (info) {
-      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) + '">' +
-      '<span class="skills-item-rank">' + (i + 1) + '</span>' +
-      '<div class="skills-item-info">' +
-        '<div class="skills-item-name">' + escapeHtml(s.name) + installedBadge + '</div>' +
-        '<div class="skills-item-source">' + escapeHtml(s.source) + '</div>' +
-      '</div>' +
-      '<div class="skills-item-stats">' +
-        '<span class="skills-item-installs">' + formatInstalls(s.installs) + '</span>' +
-        changeHtml +
-      '</div>' +
-    '</div>';
-  }
-
-  html += '</div>';
-  contentEl.innerHTML = html;
-  refreshIcons(contentEl);
-
-  // Attach click handlers
-  var items = contentEl.querySelectorAll(".skills-item");
-  for (var j = 0; j < items.length; j++) {
-    (function (item) {
-      item.addEventListener("click", function () {
-        var source = item.dataset.source;
-        var skill = item.dataset.skill;
-        loadDetail(source, skill);
-      });
-    })(items[j]);
-  }
-}
-
-function loadDetail(source, skill) {
-  skillState().currentView = "detail";
-
-  // Hide tabs and search
-  var tabsEl = modal.querySelector(".skills-tabs");
-  if (tabsEl) tabsEl.style.display = "none";
-  var searchEl = document.getElementById("skills-search");
-  if (searchEl) searchEl.style.display = "none";
-
-  contentEl.innerHTML = '<div class="skills-loading"><div class="skills-spinner"></div> Loading skill details...</div>';
-
-  fetch("/api/skills/detail?source=" + encodeURIComponent(source) + "&skill=" + encodeURIComponent(skill))
-    .then(function (res) { return res.json(); })
-    .then(function (data) {
-      data._source = source;
-      data._skill = skill;
-      renderDetail(data);
-    })
-    .catch(function (err) {
-      contentEl.innerHTML = '<div class="skills-empty">Failed to load skill details</div>';
-    });
-}
-
-function showListView() {
-  skillState().currentView = "list";
-  var tabsEl = modal.querySelector(".skills-tabs");
-  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 (skillState().searchQuery) {
-    loadSearchResults(skillState().searchQuery);
-  } else {
-    loadSkills(skillState().activeTab);
-  }
+export function initSkills() {
+  if (!modal()) return;
+  var input = document.getElementById('skills-search-input');
+  document.getElementById('skills-back-btn').onclick = showList;
+  var legacy = document.getElementById('skills-btn'); if (legacy) legacy.onclick = function () { openMcpSkillsWorkbench('skills'); };
+  modal().querySelectorAll('.skills-tab').forEach(function (button) {
+    button.onclick = function () { selectTab(button.dataset.tab); };
+    button.onkeydown = function (event) {
+      if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) return;
+      event.preventDefault(); var tab = event.key === 'Home' ? 'installed' : event.key === 'End' ? 'discover' : skillState().activeTab === 'installed' ? 'discover' : 'installed';
+      selectTab(tab); modal().querySelector('[data-tab="' + tab + '"]').focus();
+    };
+  });
+  input.oninput = function () {
+    clearTimeout(skillState().searchTimer); requestGuard(); patchSkills({ searchQuery: input.value }); chrome();
+    if (skillState().activeTab === 'installed') loadList();
+    else patchSkills({ searchTimer: setTimeout(function () { loadList(); }, 250) });
+  };
+  document.getElementById('skills-search-clear').onclick = function () { input.value = ''; input.oninput(); input.focus(); };
+  modal().querySelectorAll('[data-discovery]').forEach(function (button) {
+    button.onclick = function () { patchSkills({ discoverySort: button.dataset.discovery }); loadList(); };
+  });
+  document.addEventListener('keydown', function (event) {
+    var panel = store.get('mcpSkillsWorkbench') || {};
+    if (!panel.open || panel.tab !== 'skills' || (event.target && (event.target.matches('input,textarea,select') || event.target.isContentEditable))) return;
+    if (event.key === '/' && skillState().currentView === 'list') { event.preventDefault(); input.focus(); }
+    if (event.key === 'Escape') { if (skillState().currentView === 'detail') showList(); else closeMcpSkillsWorkbench(); }
+  });
+  store.subscribe(function (state, previous) {
+    var next = state.mcpSkillsWorkbench || {}, old = previous.mcpSkillsWorkbench || {};
+    if (state.currentSlug !== previous.currentSlug || state.myUserId !== previous.myUserId) { clearTimeout(skillState().searchTimer); requestGuard(); }
+    if (state.skillsRefreshVersion !== previous.skillsRefreshVersion && skillState().currentView === 'list') loadList(true);
+    if (next.open && next.tab === 'skills' && (!old.open || old.tab !== 'skills')) activate();
+  });
 }

package/lib/public/modules/vendor-login-browser.js

@@ -9,7 +9,8 @@ function send(type, extra) {
   var view = current();
   var ws = getWs();
   if (!view || view.slug !== store.get('currentSlug') || !ws || ws.readyState !== 1) return;
-  ws.send(JSON.stringify(Object.assign({ type: type, vendor: view.vendor, browserId: view.browserId }, extra || {})));
+  if (view.kind === 'mcp') type = type.replace('vendor_login_', 'mcp_login_');
+  ws.send(JSON.stringify(Object.assign({ type: type, vendor: view.vendor, browserId: view.browserId, connectionId: view.connectionId }, extra || {})));
 }
 
 function input(event) { send("vendor_login_browser_input", { event: event }); }
@@ -31,9 +32,10 @@ export function openLoginBrowser(msg) {
     return;
   }
   closeLoginBrowser();
-  var title = msg.vendor === "codex" ? "Sign in to Codex" : "Sign in to Claude";
+  var isMcp = msg.kind === 'mcp';
+  var title = isMcp ? 'Sign in to ' + (msg.label || 'MCP server') : (msg.vendor === "codex" ? "Sign in to Codex" : "Sign in to Claude");
   store.set({ vendorLoginBrowser: {
-    browserId: msg.browserId, vendor: msg.vendor, slug: msg.slug || store.get('currentSlug'),
+    browserId: msg.browserId, vendor: msg.vendor, kind: msg.kind, connectionId: msg.connectionId, slug: msg.slug || store.get('currentSlug'),
     previousFocus: document.activeElement, decoding: false, pointerY: null, pointerId: null, mouseDown: false, moveTimer: null, pendingMove: null, resizeObserver: null, requestedSize: null, phase: "loading",
   } });
   var dialog = document.createElement("dialog");
@@ -60,7 +62,15 @@ export function openLoginBrowser(msg) {
   document.body.appendChild(dialog);
   var keyboard = dialog.querySelector("textarea");
   var canvas = dialog.querySelector("canvas");
-  function cancel() { cancelVendorLogin(msg.vendor); }
+  if (isMcp) {
+    dialog.querySelector('.login-browser-vendor').hidden = true;
+    dialog.querySelector('[data-action="terminal"]').hidden = true;
+    dialog.querySelector('.login-browser-privacy').textContent = 'This private browser is controlled only by you. Cookies are discarded when sign-in ends.';
+  }
+  function cancel() {
+    if (isMcp) { send('vendor_login_cancel'); closeLoginBrowser(); }
+    else cancelVendorLogin(msg.vendor);
+  }
   function restart(mode) {
     var ws = getWs();
     if (!ws || ws.readyState !== 1) {
@@ -68,7 +78,8 @@ export function openLoginBrowser(msg) {
       return;
     }
     cancel();
-    requestVendorLogin(msg.vendor, { mode: mode });
+    if (isMcp) ws.send(JSON.stringify({ type: 'mcp_connection_action', action: 'signin', id: msg.connectionId }));
+    else requestVendorLogin(msg.vendor, { mode: mode });
   }
   dialog.querySelector('[data-action="cancel"]').onclick = cancel;
   dialog.querySelector('[data-action="retry"]').onclick = function () { restart("browser"); };

package/lib/public/style.css

@@ -1,4 +1,5 @@
 @import url("css/wireframe.css");
+@import url("css/mcp-connections.css");
 @import url("css/session-github.css");
 @import url("css/vendor-login-browser.css");
 @import url("css/issues.css");
@@ -69,5 +70,6 @@
 @import url("./css/shared-browser.css");
 
 @import url("./css/mcp-skills-workbench.css");
+@import url("css/skills-workbench.css");
 
 @import url("css/right-workbench.css");