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

package/lib/project.js

@@ -47,7 +47,6 @@ var { attachConnection } = require("./project-connection");
 var { attachProjectScheduledMessages } = require("./project-scheduled-messages");
 var { attachMcp } = require("./project-mcp");
 var { createSessionSkillCatalog } = require("./yoke/session-skill-catalog");
-var { createLocalMcp } = require("./mcp-local");
 var { attachEmail: attachEmailModule } = require("./project-email");
 var { attachSessionSpawn } = require("./project-session-spawn");
 var { attachDelegatedSession } = require("./project-delegated-session");
@@ -696,27 +695,30 @@ function createProjectContext(opts) {
   sm.defaultModelByVendor = sm.defaultModelByVendor || {};
   if (savedDefaultModel) sm.defaultModelByVendor[sm.defaultVendor || "claude"] = savedDefaultModel;
 
-  // --- Local MCP (direct process management for localhost clients) ---
-  var _localMcp = createLocalMcp();
-
-  // --- MCP bridge (remote MCP servers via Chrome Extension) ---
+  // Personal computer tools use the extension; remote URLs are owner-bound.
   var _mcp = attachMcp({
-    send: send,
-    sendTo: sendTo,
-    slug: slug,
-    isMate: isMate,
-    getExtensionWs: function () { return browserState._extensionWs; },
-    getExtensionId: function () { return browserState._extensionId || null; },
-    getEnabledMcpServers: function () {
-      return typeof opts.onGetProjectMcpServers === "function"
-        ? opts.onGetProjectMcpServers(slug) : [];
+    sendTo: sendTo, slug: slug, clients: clients,
+    root: require("./config").CONFIG_DIR,
+    isMultiUser: function () { return usersModule.isMultiUser(); },
+    canAccess: function (ws) { return _requestAccess.canAccessProject(ws, slug); },
+    canUseOwner: function (owner) {
+      if (!usersModule.isMultiUser()) return owner === "default";
+      var user = usersModule.findUserById(owner);
+      return !!user && _requestAccess.canAccessProject({ _clayUser: user }, slug);
     },
-    setEnabledMcpServers: function (servers) {
-      if (typeof opts.onSetProjectMcpServers === "function") {
-        opts.onSetProjectMcpServers(slug, servers);
-      }
+    canUseSession: function (session) {
+      if (!session || sm.sessions.get(session.localId) !== session) return false;
+      if (!usersModule.isMultiUser()) return true;
+      if (!require("./mcp-session-access").canUsePersonalConnections(session, sm.sessions)) return false;
+      var user = session.ownerId && usersModule.findUserById(session.ownerId);
+      return !!user && _requestAccess.canAccessProject({ _clayUser: user }, slug) &&
+        usersModule.canAccessSession(user.id, session, opts.getProjectAccess ? opts.getProjectAccess() : { visibility: "public" });
+    },
+    identity: function (ws) { return _requestAccess.osIdentity(ws); },
+    extensionId: function (ws) { return ws._clayMcpExtensionId || null; },
+    getEnabledMcpServers: function () {
+      return typeof opts.onGetProjectMcpServers === "function" ? opts.onGetProjectMcpServers(slug) : [];
     },
-    localMcp: _localMcp,
   });
 
   // --- Email module (delegated to project-email.js) ---
@@ -1372,7 +1374,7 @@ function createProjectContext(opts) {
     osUsers: osUsers,
     dangerouslySkipPermissions: dangerouslySkipPermissions,
     mcpServers: getLocalMcpServers,
-    getRemoteMcpServers: function () { return _mcp.getMcpServers(); },
+    getRemoteMcpServers: function (session) { return _mcp.getMcpServers(session); },
     clayPort: serverPort,
     clayTls: serverTls,
     clayAuthToken: serverAuthToken,
@@ -1706,14 +1708,6 @@ function createProjectContext(opts) {
   // --- WS connection handler (delegated to project-connection.js) ---
   function handleConnection(ws, wsUser) {
     _connection.handleConnection(ws, wsUser, handleMessage, handleDisconnection);
-
-    // Initialize local MCP when a localhost client connects
-    if (ws._clayLocal && _localMcp && !_localMcp.isReady()) {
-      _localMcp.initialize(function () {
-        // Rebuild proxy servers and broadcast state when local servers are ready
-        _mcp.rebuildAndBroadcast();
-      });
-    }
   }
 
   // --- WS message handler ---
@@ -2028,6 +2022,7 @@ function createProjectContext(opts) {
 
   // --- WS disconnection handler (delegated to project-connection.js) ---
   function handleDisconnection(ws) {
+    _mcp.handleExtensionDisconnect(ws);
     // Clean up extension WS reference if this was the extension client
     if (browserState._extensionWs === ws) {
       browserState._extensionWs = null;
@@ -2316,17 +2311,6 @@ function createProjectContext(opts) {
         && sm.sessions.get(boundSession.localId) === boundSession
         && Number(boundSession._sdkQueryGeneration || 0) === queryGeneration;
     }
-    // Build set of local MCP server names to exclude (Codex handles these natively)
-    var localMcpNames = {};
-    try {
-      var mcpLocalModule = require("./mcp-local");
-      var localConfig = mcpLocalModule.readMergedServers();
-      var lcNames = Object.keys(localConfig);
-      for (var li = 0; li < lcNames.length; li++) {
-        localMcpNames[lcNames[li]] = true;
-      }
-    } catch (e) { /* no local MCP config */ }
-
     return {
       listTools: function () {
         var tools = [];
@@ -2352,7 +2336,7 @@ function createProjectContext(opts) {
           var toolNames = Object.keys(server.instance._registeredTools);
           for (var j = 0; j < toolNames.length; j++) {
             var toolDef = server.instance._registeredTools[toolNames[j]];
-            var inputSchema = normalizeToolSchema(toolDef.inputSchema);
+            var inputSchema = toolDef._clayInputSchema || normalizeToolSchema(toolDef.inputSchema);
             tools.push({
               server: serverName,
               name: toolNames[j],
@@ -2459,13 +2443,11 @@ function createProjectContext(opts) {
           }
         }
 
-        // Remote MCP servers (extension-proxied only, skip local proxy servers)
-        var remoteServers = _mcp.getMcpServers();
+        // Personal computer and remote URL connections.
+        var remoteServers = _mcp.getMcpServers(boundSession);
         if (remoteServers) {
           var remoteNames = Object.keys(remoteServers);
           for (var ri = 0; ri < remoteNames.length; ri++) {
-            // Skip servers that Codex manages natively via Track 1
-            if (localMcpNames[remoteNames[ri]]) continue;
             extractServerTools(remoteNames[ri], remoteServers[remoteNames[ri]]);
           }
         }
@@ -2571,7 +2553,7 @@ function createProjectContext(opts) {
           }
         }
         // Try remote/local proxy servers
-        var remoteServers = _mcp.getMcpServers();
+        var remoteServers = _mcp.getMcpServers(boundSession);
         if (remoteServers && remoteServers[serverName]) {
           var rServer = remoteServers[serverName];
           if (rServer.instance && rServer.instance._registeredTools && rServer.instance._registeredTools[toolName]) {
@@ -2673,6 +2655,7 @@ function createProjectContext(opts) {
 
   // --- Destroy ---
   function destroy() {
+    _mcp.destroy();
     _sharedBrowser.destroy();
     _vendorLogin.destroy();
     if (_scheduledMessages) _scheduledMessages.shutdown();

package/lib/public/app.js

@@ -273,6 +273,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     sharedBrowser: null,
     sharedBrowsers: [],
     mcpSkillsWorkbench: {},
+    mcpConnections: { screen: "list", servers: [], search: "", loaded: false },
     sharedBrowserOpen: false,
     sharedBrowserUi: {},
     // session / routing

package/lib/public/css/mcp-connections.css

@@ -0,0 +1,86 @@
+/* Personal connections share the existing workbench's typography and theme. */
+#mcp-skills-workbench .ext-pill-wrap[hidden] { display:none; }
+.mc-screen { max-width:640px; margin:0 auto; padding:4px 4px 24px; font-size:13px; color:var(--text); }
+.mc-screen button,.mc-screen input,.mc-screen select { font:inherit; }
+.mc-screen button { cursor:pointer; }
+.mc-screen button:disabled { opacity:.5; cursor:wait; }
+.mc-screen svg { width:16px; height:16px; flex-shrink:0; }
+.mc-heading { margin:16px 0 28px; }
+.mc-heading h2 { font-size:22px; font-weight:600; letter-spacing:-.5px; margin:12px 0 8px; overflow-wrap:anywhere; }
+.mc-heading p,.mc-muted,.mc-footnote { color:var(--text-muted); line-height:1.7; margin:0; }
+.mc-emblem { display:inline-flex; padding:12px; background:var(--bg-alt); border:1px solid var(--border); border-radius:12px; }
+.mc-emblem svg { width:24px; height:24px; }
+.mc-button { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:9px 13px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); line-height:1.4; }
+.mc-button:hover { background:var(--bg-alt); }
+.mc-primary { background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:600; }
+.mc-primary:hover { background:var(--accent); filter:brightness(.95); }
+.mc-back { display:inline-flex; align-items:center; gap:7px; padding:4px 0; background:none; border:0; color:var(--text-muted); }
+.mc-back:hover { color:var(--text); }
+.mc-empty { display:flex; flex-direction:column; align-items:center; text-align:center; padding:64px 18px; }
+.mc-empty .mc-heading { margin-bottom:24px; }
+.mc-empty>p { max-width:260px; color:var(--text-muted); line-height:1.7; margin-top:18px; font-size:12px; }
+.mc-search { display:flex; align-items:center; gap:8px; border:1px solid var(--border); background:var(--bg-alt); border-radius:8px; padding:0 10px; color:var(--text-muted); }
+.mc-search input { width:100%; min-width:0; background:transparent; border:0; padding:10px 0; color:var(--text); outline:none; }
+.mc-search:focus-within { outline:2px solid var(--accent); outline-offset:2px; }
+.mc-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:24px 0 8px; }
+.mc-section-heading h2 { font-size:13px; font-weight:600; margin:0; }
+.mc-row { display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--border); padding:16px 0; }
+.mc-row-open { display:flex; align-items:flex-start; gap:12px; flex:1; min-width:0; text-align:left; color:var(--text); border:0; background:none; padding:0; border-radius:6px; }
+.mc-server-icon { display:flex; border:1px solid var(--border); border-radius:9px; padding:9px; color:var(--text-muted); }
+.mc-row-info { display:flex; flex-direction:column; gap:5px; min-width:0; }
+.mc-row-info strong { overflow-wrap:anywhere; font-size:14px; font-weight:550; }
+.mc-row-info>span { font-size:11px; color:var(--text-muted); }
+.mc-status { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-muted); }
+.mc-status>span { width:6px; height:6px; border-radius:50%; background:var(--text-muted); }
+.mc-status[data-status="ready"]>span { background:var(--success,#55a881); }
+.mc-status[data-status="auth_required"]>span,.mc-status[data-status="unavailable"]>span { background:#c28c42; }
+.mc-switch { flex-shrink:0; width:32px; height:19px; padding:2px; border:1px solid var(--border); border-radius:12px; background:var(--bg-alt); }
+.mc-switch>span { display:block; height:13px; width:13px; border-radius:50%; background:var(--text-muted); transition:transform .15s; }
+.mc-switch[aria-checked="true"] { background:var(--accent); border-color:var(--accent); }
+.mc-switch[aria-checked="true"]>span { background:var(--bg); transform:translateX(13px); }
+.mc-footnote { margin-top:22px; font-size:11px; }
+.mc-choices { display:flex; flex-direction:column; gap:12px; }
+.mc-choice { display:flex; align-items:center; gap:14px; padding:20px 16px; text-align:left; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:12px; }
+.mc-choice:hover { background:var(--bg-alt); border-color:var(--text-muted); }
+.mc-choice>span:nth-child(2) { flex:1; }
+.mc-choice strong { display:block; margin-bottom:6px; font-size:14px; }
+.mc-choice small { display:block; color:var(--text-muted); line-height:1.6; font-size:12px; }
+.mc-choice-icon { display:flex; padding:10px; background:var(--bg-alt); border-radius:9px; }
+.mc-form { display:flex; flex-direction:column; gap:16px; }
+.mc-form label,.mc-permissions label { display:flex; flex-direction:column; gap:8px; font-weight:500; }
+.mc-form input,.mc-permissions select { width:100%; min-width:0; box-sizing:border-box; padding:11px 12px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); }
+.mc-form>.mc-button { align-self:flex-end; margin-top:4px; }
+.mc-enable { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:20px 0; margin-top:8px; border-bottom:1px solid var(--border); }
+.mc-metadata { display:grid; grid-template-columns:70px minmax(0,1fr); gap:12px; padding:8px 0; font-size:12px; }
+.mc-metadata dt { color:var(--text-muted); }
+.mc-metadata dd { margin:0; overflow-wrap:anywhere; }
+.mc-alert { display:flex; align-items:flex-start; gap:10px; border:1px solid var(--border); border-left:3px solid #c28c42; background:var(--bg-alt); border-radius:8px; padding:12px; line-height:1.6; margin:12px 0; }
+.mc-alert svg { margin-top:3px; }
+.mc-notice { color:var(--text-muted); line-height:1.6; padding:12px; background:var(--bg-alt); border-radius:8px; }
+.mc-auth { margin:20px 0; }
+.mc-auth p { font-size:11px; margin-top:8px; }
+.mc-token,.mc-manage { margin:20px 0; }
+.mc-token summary,.mc-manage summary { color:var(--text-muted); cursor:pointer; font-size:12px; }
+.mc-token form,.mc-manage form { margin:16px 0; }
+.mc-detail-tabs { display:flex; gap:20px; border-bottom:1px solid var(--border); margin:26px 0 18px; }
+.mc-detail-tabs button { color:var(--text-muted); background:none; border:0; border-bottom:2px solid transparent; padding:10px 0; }
+.mc-detail-tabs button[aria-selected="true"] { color:var(--text); border-bottom-color:var(--accent); }
+.mc-tools details { border-bottom:1px solid var(--border); padding:14px 0; }
+.mc-tools summary { cursor:pointer; overflow-wrap:anywhere; }
+.mc-tools p,.mc-permissions p { line-height:1.7; color:var(--text-muted); white-space:pre-wrap; overflow-wrap:anywhere; }
+.mc-tools pre { padding:12px; border-radius:8px; background:var(--bg-alt); overflow:auto; max-height:240px; font-size:11px; }
+.mc-tools h4 { font-size:11px; color:var(--text-muted); }
+.mc-detail-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
+.mc-steps { list-style:none; padding:0; margin:0 0 24px; }
+.mc-steps li { display:flex; gap:12px; padding:0 0 26px; }
+.mc-step-marker { width:24px; height:24px; display:flex; align-items:center; justify-content:center; flex-shrink:0; border:1px solid var(--border); border-radius:50%; font-size:11px; }
+.mc-steps li>div { min-width:0; flex:1; }
+.mc-steps strong { font-weight:550; line-height:24px; }
+.mc-steps p { color:var(--text-muted); line-height:1.7; margin:6px 0 12px; }
+.mc-command { border:1px solid var(--border); border-radius:8px; padding:10px; background:var(--bg-alt); }
+.mc-command code { display:block; white-space:pre-wrap; overflow-wrap:anywhere; margin-bottom:8px; font-size:11px; }
+.mc-working { display:flex; gap:8px; align-items:center; color:var(--text-muted); font-size:12px; margin-top:16px; }
+.mc-working svg { animation:mc-spin 1s linear infinite; }
+@keyframes mc-spin { to { transform:rotate(360deg); } }
+@media (prefers-reduced-motion:reduce) { .mc-working svg { animation:none; } .mc-switch>span { transition:none; } }
+@media (max-width:480px) { .mc-screen { padding:0 0 20px; } .mc-empty { padding:40px 12px; } .mc-heading h2 { font-size:21px; } }

package/lib/public/css/skills-workbench.css

@@ -0,0 +1,74 @@
+/* A compact library inside the existing workbench. */
+#mcp-skills-workbench #skills-modal [hidden] { display:none; }
+#mcp-skills-workbench #skills-modal .skills-header { padding:24px 20px 16px; }
+.skills-library-heading h2 { margin:0 0 7px; font-size:22px; letter-spacing:-.5px; font-weight:600; color:var(--text); }
+.skills-library-heading p { margin:0; font-size:12px; color:var(--text-muted); line-height:1.6; }
+#mcp-skills-workbench #skills-modal .skills-back-btn { gap:7px; font-size:12px; padding:0; color:var(--text-muted); background:none; border:0; }
+#mcp-skills-workbench #skills-modal .skills-tabs { margin:0 20px; padding:0; gap:24px; border-bottom:1px solid var(--border); }
+#mcp-skills-workbench #skills-modal .skills-tab { padding:10px 0; font-size:12px; }
+#mcp-skills-workbench #skills-modal .skills-tab.active { color:var(--text); }
+#skills-installed-count { margin-left:5px; color:var(--text-muted); font-size:10px; }
+.skills-toolbar { display:flex; gap:10px; align-items:center; padding:16px 20px 0; }
+#mcp-skills-workbench #skills-modal .skills-search { flex:1; min-width:0; margin:0; padding:9px 10px; border-radius:8px; background:var(--bg-alt); }
+#mcp-skills-workbench #skills-modal .skills-search input { min-width:0; width:100%; font-size:12px; }
+.skills-discovery-views { display:flex; gap:6px; flex-wrap:wrap; padding:12px 20px 0; }
+.skills-discovery-views button { padding:7px 10px; border:1px solid transparent; border-radius:6px; background:none; color:var(--text-muted); font:inherit; font-size:11px; cursor:pointer; }
+.skills-discovery-views button:hover { background:var(--bg-alt); color:var(--text); }
+.skills-discovery-views button[aria-pressed="true"] { background:var(--bg-alt); border-color:var(--border); color:var(--text); }
+.skills-discovery-views button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
+#mcp-skills-workbench #skills-modal .skills-content { padding:20px; }
+.skills-list-intro { display:flex; justify-content:space-between; gap:12px; color:var(--text-muted); font-size:11px; margin-bottom:6px; }
+.skills-library-row { display:flex; align-items:flex-start; width:100%; gap:12px; padding:17px 0; text-align:left; background:none; border:0; border-bottom:1px solid var(--border); color:var(--text); font:inherit; cursor:pointer; border-radius:4px; }
+.skills-library-row:hover { background:var(--bg-alt); }
+.skills-library-icon,.skills-detail-icon { display:inline-flex; padding:9px; border:1px solid var(--border); border-radius:9px; color:var(--text-muted); flex-shrink:0; }
+.skills-library-icon svg { width:16px; height:16px; }
+.skills-library-info { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
+.skills-library-name { font-size:13px; font-weight:550; overflow-wrap:anywhere; }
+.skills-library-desc { font-size:12px; line-height:1.65; color:var(--text-muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
+.skills-library-meta { font-size:10px; color:var(--text-dimmer); overflow-wrap:anywhere; }
+.skills-library-end { display:flex; align-items:center; gap:8px; flex-shrink:0; padding-top:3px; color:var(--text-muted); }
+.skills-library-end>svg { width:14px; height:14px; }
+.skills-library-badge { font-size:10px; color:var(--text-muted); }
+.skills-library-installs { display:flex; gap:4px; align-items:center; font-size:10px; }
+.skills-library-installs svg { width:12px; height:12px; }
+.skills-library-empty { padding:48px 16px; text-align:center; color:var(--text-muted); }
+.skills-library-empty>svg { width:28px; height:28px; margin-bottom:12px; }
+.skills-library-empty h3 { color:var(--text); font-size:17px; font-weight:550; }
+.skills-library-empty p { font-size:12px; line-height:1.7; max-width:300px; margin:12px auto; }
+.skills-browse-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:10px; padding:10px 14px; border:1px solid var(--border); border-radius:8px; background:var(--bg-alt); color:var(--text); font:inherit; font-size:12px; cursor:pointer; }
+.skills-browse-btn svg { width:14px; height:14px; }
+.skills-catalog-credit { margin:22px 0 0; font-size:11px; color:var(--text-dimmer); }
+.skills-catalog-credit a,.skills-metadata a { color:var(--text-muted); }
+#mcp-skills-workbench #skills-modal .skills-detail { display:flex; flex-direction:column; gap:24px; max-width:780px; margin:auto; }
+.skills-detail-icon svg { width:22px; height:22px; }
+#mcp-skills-workbench #skills-modal .skills-detail-name { margin:14px 0 10px; font-size:23px; letter-spacing:-.5px; font-weight:600; }
+#mcp-skills-workbench #skills-modal .skills-detail-desc { margin:0; font-size:13px; line-height:1.8; color:var(--text-muted); }
+.skills-detail-byline { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; font-size:11px; color:var(--text-dimmer); overflow-wrap:anywhere; }
+.skills-placement { border:1px solid var(--border); border-radius:10px; padding:16px; background:var(--bg-alt); }
+.skills-placement h3 { margin:0 0 7px; font-size:13px; font-weight:550; color:var(--text); }
+.skills-placement-heading>p { font-size:11px; line-height:1.7; color:var(--text-muted); margin:0 0 16px; }
+.skills-placement .skills-install-actions { display:flex; flex-wrap:wrap; flex-direction:row; gap:8px; }
+.skills-placement .skills-install-btn { width:auto; flex:1; min-width:150px; border-radius:7px; padding:10px 12px; font-size:12px; }
+.skills-placement .skills-installed-row { width:100%; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
+.skills-placement .skills-uninstall-btn,.skills-cancel-remove { width:auto; height:auto; padding:6px 9px; font:inherit; font-size:11px; color:var(--text-muted); border:1px solid var(--border); border-radius:6px; background:none; cursor:pointer; }
+.skills-placement .skills-installed-status { flex:1; width:auto; font-size:12px; font-weight:500; padding:0; background:none; border:0; justify-content:flex-start; }
+.skills-placement .skills-installed-status svg { width:15px; height:15px; }
+.skills-removed-status { font-size:12px; color:var(--text-muted); }
+#mcp-skills-workbench #skills-modal .skills-detail-md-wrap { flex:none; overflow:visible; padding:0; }
+.skills-detail-section-title { font-size:11px; font-weight:550; letter-spacing:.04em; color:var(--text-muted); margin:0 0 16px; }
+.skills-detail-md { overflow-wrap:anywhere; min-width:0; }
+.skills-detail-md pre { max-width:100%; overflow:auto; }
+.skills-detail-md table { display:block; overflow:auto; }
+.skills-metadata,.skills-manual { border-top:1px solid var(--border); padding-top:16px; }
+.skills-metadata summary,.skills-manual summary { cursor:pointer; font-size:12px; color:var(--text-muted); }
+.skills-metadata dl { display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px; font-size:11px; line-height:1.7; }
+.skills-metadata dt { color:var(--text-muted); }
+.skills-metadata dd { margin:0; overflow-wrap:anywhere; }
+.skills-manual .skills-detail-cmd { margin:12px 0 0; }
+.skills-local-note { display:flex; gap:10px; align-items:flex-start; color:var(--text-muted); }
+.skills-local-note svg { width:16px; height:16px; flex-shrink:0; margin-top:3px; }
+.skills-local-note p { margin:0; font-size:12px; line-height:1.7; }
+@media(max-width:480px) { .skills-toolbar { flex-wrap:wrap; }.skills-library-icon { padding:7px; }.skills-library-row { gap:9px; }.skills-library-badge { max-width:48px; }.skills-library-end { gap:3px; } }
+
+.skills-library-row:focus-visible,.skills-browse-btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
+.skills-search:focus-within { box-shadow:0 0 0 1px var(--accent); }

package/lib/public/index.html

@@ -1733,23 +1733,24 @@
   <div class="confirm-backdrop"></div>
   <div class="confirm-dialog skills-dialog">
     <div class="skills-header">
-      <span class="skills-title"><i data-lucide="puzzle"></i> Skills <span class="skills-powered-by">powered by <a href="https://skills.sh" target="_blank" rel="noopener noreferrer">skills.sh</a></span></span>
-      <div class="skills-header-actions">
-        <button class="skills-back-btn hidden" id="skills-back-btn"><i data-lucide="arrow-left"></i></button>
-        <button class="skills-close" id="skills-modal-close"><i data-lucide="x"></i></button>
+      <div class="skills-library-heading"><h2>Your skills</h2><p>Reusable instructions for the way you work.</p></div>
+      <button class="skills-back-btn hidden" id="skills-back-btn" aria-label="Back to skills"><i data-lucide="arrow-left"></i><span>Skills</span></button>
+    </div>
+    <div class="skills-tabs" role="tablist" aria-label="Skill library">
+      <button class="skills-tab active" role="tab" aria-selected="true" data-tab="installed">Installed <span id="skills-installed-count"></span></button>
+      <button class="skills-tab" role="tab" aria-selected="false" tabindex="-1" data-tab="discover">Discover</button>
+    </div>
+    <div class="skills-toolbar">
+      <div class="skills-search" id="skills-search">
+        <i data-lucide="search"></i>
+        <input type="search" id="skills-search-input" placeholder="Search installed skills" aria-label="Search installed skills" spellcheck="false" />
+        <button class="skills-search-clear hidden" id="skills-search-clear" aria-label="Clear skill search"><i data-lucide="x"></i></button>
       </div>
     </div>
-    <div class="skills-search" id="skills-search">
-      <i data-lucide="search"></i>
-      <input type="text" id="skills-search-input" placeholder="Search skills ..." spellcheck="false" />
-      <kbd class="skills-search-hint" id="skills-search-hint">/</kbd>
-      <button class="skills-search-clear hidden" id="skills-search-clear"><i data-lucide="x"></i></button>
-    </div>
-    <div class="skills-tabs">
-      <button class="skills-tab active" data-tab="all">All Time</button>
-      <button class="skills-tab" data-tab="trending">Trending</button>
-      <button class="skills-tab" data-tab="hot">Hot</button>
-      <button class="skills-tab" data-tab="installed">Installed</button>
+    <div class="skills-discovery-views" role="group" aria-label="Discover skills by" hidden>
+      <button type="button" data-discovery="all" aria-pressed="true">Most installed</button>
+      <button type="button" data-discovery="trending" aria-pressed="false">Trending</button>
+      <button type="button" data-discovery="hot" aria-pressed="false">Growing fast</button>
     </div>
     <div class="skills-content" id="skills-content">
       <div class="skills-loading"><div class="skills-spinner"></div> Loading skills...</div>

package/lib/public/modules/app-messages.js

@@ -61,7 +61,7 @@ import { showRewindModal, onRewindComplete, setRewindMode, onRewindError, clearP
 import { checkAdminAccess } from './admin.js';
 import { mateAvatarUrl } from './avatar.js';
 import { showImageModal, sendExtensionCommand, handleMcpToolCallMessage } from './app-misc.js';
-import { handleMcpServersState, handleMcpPermissionModeResult } from './mcp-ui.js';
+import { handleMcpServersState, handleMcpPermissionModeResult, handleMcpConnectionMessage } from './mcp-ui.js';
 import { handlePermissionModeResult } from './permission-control.js';
 import { handleShellCommandResult } from './shell-command.js';
 import { handleLoopRegistryUpdated, handleScheduleRunStarted, handleScheduleRunFinished, handleLoopScheduled, isSchedulerOpen, enterCraftingMode, exitCraftingMode, handleLoopRegistryFiles } from './scheduler.js';
@@ -107,6 +107,7 @@ var connectOverlay = document.getElementById("connect-overlay");
 initMessageDeliveryUi();
 
 export function processMessage(msg) {
+  if (handleMcpConnectionMessage(msg)) return;
   if (handleSharedBrowserMessage(msg)) return;
   if (msg.type === "vendor_login_browser_frame" || msg.type === "vendor_login_browser_status") {
     handleLoginBrowserMessage(msg);

package/lib/public/modules/mcp-connection-view.js

@@ -0,0 +1,136 @@
+import { escapeHtml } from './utils.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { store } from './store.js';
+import { mcpPermissionModeApplicability, sendMcpPermissionMode } from './mcp-permissions.js';
+
+var labels = { ready: 'Ready', idle: 'Saved · connects when used', connecting: 'Connecting…', auth_required: 'Sign-in required', unavailable: 'Unavailable' };
+function text(value) { return escapeHtml(String(value || '')); }
+function button(label, action, primary, icon) {
+  return '<button type="button" class="mc-button' + (primary ? ' mc-primary' : '') + '" data-action="' + action + '">' + (icon ? iconHtml(icon) : '') + text(label) + '</button>';
+}
+function heading(title, subtitle, icon) {
+  return '<div class="mc-heading">' + (icon ? '<span class="mc-emblem">' + iconHtml(icon) + '</span>' : '') + '<h2 tabindex="-1">' + text(title) + '</h2><p>' + text(subtitle) + '</p></div>';
+}
+function status(row) { return '<span class="mc-status" data-status="' + text(row.status) + '"><span aria-hidden="true"></span>' + text(labels[row.status] || 'Unavailable') + '</span>'; }
+function switchControl(row, busy) {
+  return '<button type="button" class="mc-switch" role="switch" aria-checked="' + !!row.projectEnabled + '" aria-label="Enable ' + text(row.label || row.name) + ' in this project" data-toggle="' + text(row.id) + '"' + (busy ? ' disabled' : '') + '><span></span></button>';
+}
+function rows(servers, busy) {
+  return '<div class="mc-list">' + servers.map(function (row) {
+    return '<div class="mc-row"><button type="button" class="mc-row-open" data-open="' + text(row.id) + '"><span class="mc-server-icon">' + iconHtml(row.source === 'url' ? 'globe' : 'monitor') + '</span><span class="mc-row-info"><strong>' + text(row.label || row.name) + '</strong><span>' + (row.source === 'url' ? 'Remote' : 'Your computer') + ' · ' + row.toolCount + ' tools</span>' + status(row) + '</span></button>' + switchControl(row, busy) + '</div>';
+  }).join('') + '</div>';
+}
+function search(value, placeholder) { return '<label class="mc-search">' + iconHtml('search') + '<input type="search" data-search value="' + text(value) + '" placeholder="' + placeholder + '" aria-label="' + placeholder + '"></label>'; }
+function listView(state) {
+  if (!state.loaded) return heading('Your connections', 'Loading your MCP servers…', 'cable');
+  if (!state.servers.length) return '<div class="mc-empty">' + heading('Connect tools to Clay', 'Let your agent work with the services and tools you choose.', 'cable') + button('Add connection', 'add', true, 'plus') + '<p>Connect a remote service or tools on your computer.</p></div>';
+  var servers = state.servers.filter(function (row) { return (row.label || row.name).toLowerCase().includes((state.search || '').toLowerCase()); });
+  return search(state.search, 'Search servers…') + '<div class="mc-section-heading"><h2>Your connections</h2>' + button('Add', 'add', false, 'plus') + '</div>' + rows(servers, !!state.pending) + (!servers.length ? '<p class="mc-muted">No matching connections.</p>' : '') + '<p class="mc-footnote">Enabled connections are available to your private sessions in this project. In multi-user Clay, shared conversations cannot use personal connections.</p>';
+}
+function addView() {
+  return heading('Add connection', 'Choose where your tools are available.') + '<div class="mc-choices">' +
+    '<button class="mc-choice" data-action="remote"><span class="mc-choice-icon">' + iconHtml('globe') + '</span><span><strong>Remote MCP URL</strong><small>Connect a hosted service using its MCP server address.</small></span>' + iconHtml('arrow-right') + '</button>' +
+    '<button class="mc-choice" data-action="computer"><span class="mc-choice-icon">' + iconHtml('monitor') + '</span><span><strong>On your computer</strong><small>Connect local tools through the Clay browser extension.</small></span>' + iconHtml('arrow-right') + '</button></div>';
+}
+function remoteView(state) {
+  return heading('Connect a remote server', 'Use the MCP address supplied by your service provider.', 'globe') +
+    '<form data-form="remote" class="mc-form"><label>Server URL<input name="url" type="url" required maxlength="4096" placeholder="https://mcp.example.com/mcp" value="' + text(store.get('mcpConnectionDraft')) + '" autocomplete="off" spellcheck="false"></label>' +
+    '<p class="mc-muted">Public HTTPS servers are supported. You can sign in with Clay’s private browser if the service requires it.</p><button class="mc-button mc-primary" type="submit"' + (state.pending ? ' disabled' : '') + '>' + (state.pending ? 'Checking server…' : 'Continue') + '</button></form>';
+}
+function computerView(state) {
+  var servers = state.servers.filter(function (row) { return row.source === 'computer'; });
+  var command = 'npx clay-mcp-bridge install ' + (state.extensionId || '<extension-id>');
+  return heading('Tools on your computer', 'Your local tools connect through the Clay extension.', 'monitor') +
+    '<ol class="mc-steps"><li><span class="mc-step-marker">' + (state.extensionConnected ? iconHtml('check') : '1') + '</span><div><strong>Browser extension</strong><p>' + (state.extensionConnected ? 'Connected to this browser.' : 'Install Clay for Chrome, then refresh this page.') + '</p>' + (!state.extensionConnected ? button('Set up extension', 'setup', false, 'puzzle') : '') + '</div></li>' +
+    '<li><span class="mc-step-marker">' + (state.hostConnected ? iconHtml('check') : '2') + '</span><div><strong>Local bridge</strong><p>' + (state.hostConnected ? 'Connected to your computer.' : 'Run this command on your computer, then restart your browser.') + '</p>' + (!state.hostConnected ? '<div class="mc-command"><code>' + text(command) + '</code>' + button('Copy', 'copy', false) + '</div>' : '') + '</div></li>' +
+    '<li><span class="mc-step-marker">3</span><div><strong>Choose your tools</strong><p>Add servers from the extension popup. They appear here when connected.</p></div></li></ol>' + rows(servers, !!state.pending) + button('Refresh connections', 'refresh', false, 'refresh-cw');
+}
+function permissionsView(row) {
+  var current = store.snap(), availability = mcpPermissionModeApplicability(current);
+  var selected = (current.mcpPermissionModeOverrides || {})[row.name] || '';
+  var pending = Object.values(current.mcpPermissionModePendingByTarget || {}).some(function (item) { return item.serverName === row.name && item.sessionId === current.activeSessionId; });
+  return '<div class="mc-permissions"><h3>Tool approvals</h3><p>Calls follow the active session’s permission policy. Enabling a connection does not automatically approve every action.</p><label>AI review<select data-permission' + (!availability.applicable || pending ? ' disabled' : '') + '>' +
+    [['', 'Use session default'], ['auto', 'AI review'], ['default', 'Ask every time']].map(function (item) { return '<option value="' + item[0] + '"' + (selected === item[0] ? ' selected' : '') + '>' + item[1] + '</option>'; }).join('') + '</select></label>' + (!availability.applicable ? '<p class="mc-muted">' + text(availability.reason) + '</p>' : '') + '</div>';
+}
+function detailView(state, row) {
+  var remote = row.source === 'url';
+  var html = heading(row.label || row.name, remote ? 'Remote MCP connection' : 'Connected through your browser extension', remote ? 'globe' : 'monitor');
+  html += status(row) + '<div class="mc-enable"><span>Enabled in this project</span>' + switchControl(row, !!state.pending) + '</div>';
+  html += '<dl class="mc-metadata"><dt>Access</dt><dd>Your account only</dd><dt>' + (remote ? 'Server' : 'Location') + '</dt><dd>' + (remote ? text(row.url) : 'Your computer') + '</dd></dl>';
+  if (row.error) html += '<div class="mc-alert" role="status">' + iconHtml('circle-alert') + '<span>' + text(row.error) + '</span></div>';
+  if (remote && row.status === 'auth_required') html += '<div class="mc-auth">' + button('Sign in with Clay browser', 'signin', true, 'log-in') + '<p class="mc-muted">Only you can view and control this sign-in browser.</p></div>';
+  if (remote) html += '<details class="mc-token"><summary>Use an access token</summary><form data-form="token" class="mc-form"><label>Access token<input name="token" type="password" required maxlength="8192" autocomplete="new-password" placeholder="Paste your access token"></label><button type="submit" class="mc-button">Save and connect</button></form></details>';
+  html += '<div class="mc-detail-tabs" role="tablist" aria-label="Connection details"><button role="tab" data-tab="tools" aria-selected="' + (state.detailTab !== 'permissions') + '">Tools (' + row.toolCount + ')</button><button role="tab" data-tab="permissions" aria-selected="' + (state.detailTab === 'permissions') + '">Permissions</button></div>';
+  if (state.detailTab === 'permissions') html += permissionsView(row);
+  else {
+    html += search(state.search, 'Search tools…');
+    var tools = (row.tools || []).filter(function (tool) { return (tool.name + ' ' + (tool.description || '')).toLowerCase().includes((state.search || '').toLowerCase()); });
+    html += '<div class="mc-tools">' + tools.map(function (tool) { return '<details><summary>' + text(tool.name) + '</summary><p>' + text(tool.description || 'No description provided.') + '</p><h4>Inputs</h4><pre>' + text(JSON.stringify(tool.inputSchema || {}, null, 2)) + '</pre></details>'; }).join('') + (!tools.length ? '<p class="mc-muted">' + (row.toolCount ? 'No matching tools.' : 'No tools available. Test the connection to refresh its catalog.') + '</p>' : '') + '</div>';
+  }
+  html += '<div class="mc-detail-actions">' + (remote ? button('Test connection', 'test', false, 'refresh-cw') + (row.status === 'auth_required' ? '' : button('Sign in again', 'signin', false, 'log-in')) : button('Computer setup', 'computer', false, 'monitor')) + '</div>';
+  if (remote) html += '<details class="mc-manage"><summary>Manage connection</summary><form data-form="rename" class="mc-form"><label>Name<input name="label" required maxlength="100" value="' + text(row.label) + '"></label><button type="submit" class="mc-button">Save name</button></form>' + button('Remove connection', 'remove', false, 'trash-2') + '</details>';
+  return html;
+}
+export function renderConnections(root, state, events) {
+  var sameScreen = root.dataset.screenKey === (state.screen || 'list') + ':' + (state.selected || '');
+  var disclosures = sameScreen ? Array.from(root.querySelectorAll('details[open]')).map(function (el) { return el.className || el.querySelector('summary').textContent; }) : [];
+  var drafts = {};
+  if (sameScreen) root.querySelectorAll('input[name]').forEach(function (el) { drafts[el.name] = el.value; });
+  var focused = root.contains(document.activeElement) ? document.activeElement : null;
+  var searchFocused = focused && focused.hasAttribute('data-search');
+  var start = focused && focused.tagName === 'INPUT' ? focused.selectionStart : null;
+  var focusedName = focused && focused.name;
+  var row = state.servers.find(function (item) { return item.id === state.selected; });
+  var screen = state.screen || 'list';
+  var html = screen !== 'list' ? '<button type="button" class="mc-back" data-action="back">' + iconHtml('arrow-left') + 'MCP Servers</button>' : '';
+  if (state.error) html += '<div class="mc-alert" role="alert">' + iconHtml('circle-alert') + '<span>' + text(state.error) + '</span></div>';
+  if (state.notice) html += '<p class="mc-notice" role="status">' + text(state.notice) + '</p>';
+  if (screen === 'add') html += addView();
+  else if (screen === 'remote') html += remoteView(state);
+  else if (screen === 'computer') html += computerView(state);
+  else if (screen === 'remove' && row) html += heading('Remove ' + row.label + '?', 'This removes saved credentials and disables its tools in this project.') + '<div role="group" aria-label="Confirm removal">' + button('Cancel', 'cancel-remove', false) + button('Remove connection', 'confirm-remove', true, 'trash-2') + '</div>';
+  else if (screen === 'detail' && row) html += detailView(state, row);
+  else html += listView(state);
+  if (state.pending && screen !== 'remote') html += '<p class="mc-working" role="status">' + iconHtml('loader-circle') + 'Updating connection…</p>';
+  root.innerHTML = '<div class="mc-screen">' + html + '</div>';
+  root.dataset.screenKey = screen + ':' + (state.selected || '');
+  root.querySelectorAll('details').forEach(function (el) { el.open = disclosures.indexOf(el.className || el.querySelector('summary').textContent) >= 0; });
+  root.querySelectorAll('input[name]').forEach(function (el) {
+    if (Object.prototype.hasOwnProperty.call(drafts, el.name)) el.value = drafts[el.name];
+    if (focusedName === el.name) { el.focus(); try { el.setSelectionRange(start, start); } catch (error) {} }
+  });
+  if (!sameScreen) { var title = root.querySelector('h2'); if (title) title.focus({ preventScroll: true }); }
+  root.querySelectorAll('[data-action]').forEach(function (el) {
+    var action = el.dataset.action;
+    if (action === 'copy' && !state.extensionId) el.disabled = true;
+    if (state.pending && ['signin', 'test', 'remove', 'confirm-remove'].includes(action)) el.disabled = true;
+    el.onclick = function () {
+      if (action === 'back') events.navigate('list');
+      else if (['add', 'remote', 'computer'].includes(action)) events.navigate(action);
+      else if (action === 'remove' && row) events.remove(row);
+      else if (action === 'cancel-remove') events.navigate('detail', row.id);
+      else if (action === 'confirm-remove') events.action('remove', { id: row.id });
+      else if (action === 'refresh') events.refresh();
+      else if (action === 'setup') events.setup();
+      else if (action === 'copy') navigator.clipboard.writeText('npx clay-mcp-bridge install ' + (state.extensionId || '<extension-id>')).then(function () { el.textContent = 'Copied'; }).catch(function () { el.textContent = 'Select command to copy'; });
+      else events.action(action);
+    };
+  });
+  root.querySelectorAll('[data-open]').forEach(function (el) { el.onclick = function () { events.navigate('detail', el.dataset.open); }; });
+  root.querySelectorAll('[data-toggle]').forEach(function (el) { el.onclick = function () { var item = state.servers.find(function (server) { return server.id === el.dataset.toggle; }); if (item) events.toggle(item, !item.projectEnabled); }; });
+  root.querySelectorAll('[data-tab]').forEach(function (el) { el.onclick = function () { store.set({ mcpConnections: Object.assign({}, store.get('mcpConnections'), { detailTab: el.dataset.tab, search: '' }) }); }; });
+  var input = root.querySelector('[data-search]');
+  if (input) { input.oninput = function () { events.search(input.value); }; if (searchFocused) { input.focus(); try { input.setSelectionRange(start, start); } catch (error) {} } }
+  var urlInput = root.querySelector('[name="url"]'); if (urlInput) urlInput.oninput = function () { events.draft(urlInput.value); };
+  root.querySelectorAll('form').forEach(function (form) {
+    form.onsubmit = function (event) {
+      event.preventDefault(); if (state.pending) return;
+      if (form.dataset.form === 'remote') events.action('add', { url: form.elements.url.value });
+      if (form.dataset.form === 'token') { var token = form.elements.token.value; form.reset(); events.action('token', { token: token }); }
+      if (form.dataset.form === 'rename') events.action('rename', { label: form.elements.label.value });
+    };
+  });
+  var permission = root.querySelector('[data-permission]');
+  if (permission) permission.onchange = function () { sendMcpPermissionMode(store.get('currentSlug'), store.get('activeSessionId'), row.name, permission.value); };
+  refreshIcons(root);
+}