clay-server 4.8.2 → 5.0.0-beta.1

package/lib/project-wireframe-http.js

@@ -0,0 +1,88 @@
+var fs = require('fs');
+var path = require('path');
+var renderer = require('./plantuml-renderer');
+var filePaths = require('./project-file-path');
+
+function error(status, message) { return Object.assign(new Error(message), { status: status }); }
+function readBody(req) {
+  return new Promise(function (resolve, reject) {
+    var chunks = [];
+    var size = 0;
+    req.on('data', function (chunk) {
+      size += Buffer.byteLength(chunk);
+      if (size > 650000) { chunks = []; reject(error(413, 'Diagram request is too large.')); return; }
+      chunks.push(chunk);
+    });
+    req.on('aborted', function () { reject(error(400, 'Request cancelled.')); });
+    req.on('error', reject);
+    req.on('end', function () {
+      if (size > 650000) return;
+      try { resolve(JSON.parse(Buffer.concat(chunks).toString('utf8'))); }
+      catch (e) { reject(error(400, 'Invalid diagram request.')); }
+    });
+  });
+}
+
+function attachWireframeHTTP(ctx) {
+  function projectAccess(req) {
+    if (!ctx.requestAccess.canAccessProject(req, ctx.slug)) throw error(403, 'Project access is not permitted.');
+  }
+  function save(req, body, source) {
+    var scope = ctx.requestAccess.fileScope(req);
+    var requested = body.path;
+    if (typeof requested !== 'string' || !/\.puml$/i.test(requested) || requested.indexOf('\0') !== -1 || path.isAbsolute(requested)) {
+      throw error(400, 'Choose a project-relative .puml path.');
+    }
+    var root = fs.realpathSync(ctx.cwd);
+    var target = path.resolve(root, requested);
+    var parent = filePaths.resolveFilePath(root, path.dirname(target), { projectBound: true });
+    target = path.join(parent, path.basename(target));
+    try {
+      if (scope.identity) ctx.fsAsUser('write', { file: target, content: source, flag: 'wx' }, scope.identity);
+      else fs.writeFileSync(target, source, { encoding: 'utf8', flag: 'wx' });
+    } catch (e) {
+      if (e.code === 'EEXIST' || /EEXIST/.test(String(e.stderr || ''))) throw error(409, 'A file already exists at this path. Choose a new name.');
+      throw e;
+    }
+    return path.relative(root, target).split(path.sep).join('/');
+  }
+  function handleHTTP(req, res, urlPath) {
+    if (urlPath !== '/api/wireframe/render' && urlPath !== '/api/wireframe/save') return false;
+    function fail(e) {
+      if (res.destroyed || res.writableEnded) return;
+      var mapped = filePaths.fileError(e);
+      res.writeHead(e.status || mapped.status, { 'Content-Type': 'text/plain; charset=utf-8', 'Cache-Control': 'no-store' });
+      res.end(e.status ? e.message : mapped.message);
+    }
+    try {
+      projectAccess(req);
+      if (req.method !== 'POST') throw error(405, 'Use POST for wireframes.');
+      if (!/^application\/json\b/i.test(req.headers['content-type'] || '') || req.headers['sec-fetch-site'] === 'cross-site') throw error(415, 'Use a same-origin JSON request.');
+    } catch (e) { fail(e); return true; }
+    var controller = new AbortController();
+    function cancel() { controller.abort(); }
+    res.once('close', cancel);
+    readBody(req).then(function (body) {
+      if (controller.signal.aborted) return;
+      projectAccess(req);
+      if (!body || typeof body.source !== 'string') throw error(400, 'Diagram source is required.');
+      var source = renderer.prepareSource(body.source, body.language === 'salt' ? 'diagram.salt' : 'diagram.puml');
+      if (urlPath === '/api/wireframe/save') {
+        var saved = save(req, body, source);
+        res.writeHead(201, { 'Content-Type': 'application/json', 'Cache-Control': 'no-store' });
+        res.end(JSON.stringify({ path: saved }));
+        return;
+      }
+      return (ctx.renderPlantUml || renderer.renderPlantUml)(source, { signal: controller.signal }).then(function (svg) {
+        if (controller.signal.aborted) return;
+        projectAccess(req);
+        res.writeHead(200, { 'Content-Type': 'image/svg+xml; charset=utf-8', 'Cache-Control': 'no-store',
+          'X-Content-Type-Options': 'nosniff', 'Content-Security-Policy': "default-src 'none'; style-src 'unsafe-inline'; sandbox" });
+        res.end(svg);
+      });
+    }).catch(fail).finally(function () { res.removeListener('close', cancel); });
+    return true;
+  }
+  return { handleHTTP: handleHTTP };
+}
+module.exports = { attachWireframeHTTP: attachWireframeHTTP };

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
@@ -360,6 +361,12 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     savedMainSlug: null,
     connected: false,
     fileReadRequest: null,
+    fileViewerIsPlantUml: false,
+    plantUmlPreviewJob: null,
+    wireframeDraft: null,
+    wireframeRenderQueue: [],
+    wireframeRenderActive: null,
+    wireframeRenderCache: [],
     pendingFileNavigation: null,
     rightWorkbenchOwner: null,
     rightWorkbenchRevision: 0,

package/lib/public/css/filebrowser.css

@@ -2629,3 +2629,8 @@
   animation: message-blink 0.5s ease 3;
   border-radius: 12px;
 }
+
+/* PlantUML is rendered locally and displayed as an inert, scalable image. */
+.file-viewer-plantuml-preview { padding: 20px; min-height: 100%; box-sizing: border-box; }
+.file-viewer-plantuml-preview img { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; border-radius: 4px; }
+.file-viewer-plantuml-preview [role="status"]:empty { display: none; }

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/css/wireframe.css

@@ -0,0 +1,95 @@
+.wireframe-card { margin: 16px 0; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg); }
+.wireframe-card header { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border-subtle); }
+.wireframe-card header strong { flex: 1; font-size: 12px; color: var(--text-secondary); }
+.wireframe-card button, #wireframe-panel button { font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; background: var(--bg-alt); color: var(--text); cursor: pointer; }
+.wireframe-card button:hover, #wireframe-panel button:hover { background: var(--bg-hover); }
+.wireframe-card :focus-visible, #wireframe-panel :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.wireframe-canvas { padding: 16px; overflow: auto; }
+.wireframe-canvas img, .wireframe-workbench-canvas img { display: block; max-width: 100%; height: auto; margin: 0 auto; background: white; border-radius: 4px; }
+.wireframe-card details { border-top: 1px solid var(--border-subtle); }
+.wireframe-card summary { padding: 8px 14px; font-size: 12px; color: var(--text-muted); cursor: pointer; }
+.wireframe-card details pre { margin: 0; border-radius: 0; }
+#wireframe-panel { position: relative; width: 50%; max-width: 720px; min-width: 360px; height: calc(100% - 16px); min-height: 0; margin: 8px 8px 8px 10px; align-self: center; flex-shrink: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 12px; }
+.wireframe-topbar { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; flex-shrink: 0; border-bottom: 1px solid var(--border-subtle); }
+.wireframe-topbar strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; }
+#wireframe-panel .lucide { width: 15px; height: 15px; flex-shrink: 0; }
+.wireframe-window-actions { display: flex; gap: 4px; margin-left: auto; }
+#wireframe-panel .wireframe-window-actions button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; }
+.wireframe-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border-subtle); }
+.wireframe-toolbar span { flex: 1; font-size: 11px; color: var(--text-muted); }
+.wireframe-workbench-canvas { flex: 1; min-height: 0; overflow: auto; padding: 20px; }
+.wireframe-workbench-canvas p, .wireframe-canvas p { color: var(--text-muted); font-size: 12px; overflow-wrap: anywhere; }
+.wireframe-save-form { padding: 12px; display: flex; flex-wrap: wrap; align-items: end; gap: 8px; background: var(--bg-alt); }
+.wireframe-save-form[hidden] { display: none; }
+.wireframe-save-form label { flex: 1; min-width: 140px; font-size: 12px; }
+.wireframe-save-form input { display: block; width: 100%; box-sizing: border-box; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 5px; padding: 8px; margin-top: 5px; font: inherit; }
+.wireframe-save-status { margin: 0; padding: 8px 12px; font-size: 12px; overflow-wrap: anywhere; }
+.wireframe-save-status:empty { display: none; }
+#wireframe-panel button:disabled { opacity: .5; cursor: wait; }
+@media (min-width: 1024px) {
+  #wireframe-panel { box-shadow: 4px 8px 18px rgba(var(--shadow-rgb), .14), 2px 2px 4px rgba(var(--shadow-rgb), .08), inset 0 1px 0 rgba(255,255,255,.04); animation: workbench-panel-in .18s cubic-bezier(.2,.8,.2,1); }
+  #wireframe-panel.wireframe-wide { width: 70%; max-width: 1200px; }
+  #wireframe-panel.panel-fullscreen { width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; box-shadow: none; animation: none; }
+}
+@media (max-width: 1023px) {
+  #wireframe-panel { position: fixed; inset: 0; width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; z-index: 210; padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; }
+  #wireframe-panel .wireframe-window-actions [data-wide], #wireframe-panel .wireframe-window-actions [data-full] { display: none; }
+}
+@media (prefers-reduced-motion: reduce) { #wireframe-panel { animation: none; } }
+
+
+
+.wireframe-toolbar { flex-wrap: wrap; }
+.wireframe-zoom { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
+.wireframe-zoom button { font: inherit; font-size: 12px; border: 1px solid var(--border); border-radius: 6px; padding: 6px 9px; background: var(--bg-alt); color: var(--text); cursor: pointer; }
+.wireframe-zoom [data-zoom-value] { min-width: 55px; font-variant-numeric: tabular-nums; }
+.wireframe-zoom [aria-pressed="true"] { background: var(--bg-hover); }
+.wireframe-zoom button:disabled, #wireframe-panel .wireframe-zoom button:disabled { opacity: .4; cursor: default; }
+.wireframe-file-canvas { overflow: auto; min-width: 0; padding-top: 16px; }
+.file-viewer-plantuml-preview > .wireframe-zoom { position: sticky; top: 0; z-index: 1; width: fit-content; padding: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; }
+@media (max-width: 700px) { .wireframe-toolbar > span { flex-basis: 100%; } }
+
+/* Shared sketch identity stays inside the existing right-panel shell. */
+.wireframe-card, #wireframe-panel, .file-viewer-plantuml-preview { --sketch-accent: #c98b64; }
+.wireframe-card { border-radius: 14px; border-top: 2px solid var(--sketch-accent); }
+.sketch-brand { display: flex; align-items: center; gap: 9px; flex-shrink: 0; }
+.wireframe-card header .sketch-brand { flex: 1; }
+.sketch-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--sketch-accent); border-radius: 8px 8px 8px 2px; color: var(--sketch-accent); font-size: 23px; line-height: 1; }
+.sketch-wordmark { font-size: 14px; font-weight: 700; letter-spacing: -.4px; color: var(--text); }
+.sketch-wordmark > span { margin-left: 3px; font-weight: 400; color: var(--sketch-accent); }
+.sketch-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); }
+.sketch-credit { font-size: 11px; color: var(--text-muted); text-decoration: none; }
+.sketch-credit:hover { color: var(--text); text-decoration: underline; }
+.sketch-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border-subtle); }
+.sketch-footer > span { font-size: 11px; color: var(--text-muted); }
+.wireframe-topbar { height: 56px; gap: 14px; border-top: 2px solid var(--sketch-accent); }
+.wireframe-topbar .sketch-title { min-width: 0; color: var(--text-secondary); font-size: 12px; font-weight: 400; }
+.wireframe-canvas, .wireframe-workbench-canvas, .wireframe-file-canvas { background-image: radial-gradient(circle, var(--border) .7px, transparent .8px); background-size: 16px 16px; }
+.wireframe-canvas img, .wireframe-workbench-canvas img, .wireframe-file-canvas img { box-shadow: 0 2px 10px rgba(0,0,0,.1); }
+.sketch-tools :focus-visible, .sketch-footer :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+@media (max-width: 480px) {
+  .wireframe-topbar { gap: 8px; }
+  .wireframe-topbar .sketch-title { display: none; }
+  .sketch-footer > span { flex-basis: 100%; }
+}
+
+/* Keep drawing controls together and give the canvas the available space. */
+.wireframe-card header { gap: 8px; padding: 8px 12px; flex-wrap: wrap; }
+.wireframe-card .sketch-mark { width: 22px; height: 22px; font-size: 19px; }
+.wireframe-card header button { padding: 5px 8px; }
+.wireframe-canvas { padding: 12px; }
+.sketch-source-footer { position: relative; border-top: 1px solid var(--border-subtle); }
+.sketch-source-footer details { border: 0; }
+.sketch-source-footer summary { padding: 8px 175px 8px 12px; }
+.sketch-source-footer > div { position: absolute; top: 7px; right: 12px; }
+.wireframe-card .sketch-credit { font-size: 10px; color: var(--text-muted); }
+.wireframe-topbar { height: 44px; }
+.wireframe-toolbar { padding: 6px 10px; gap: 6px; }
+.wireframe-workbench-canvas { padding: 12px; }
+.sketch-footer { padding: 6px 12px; }
+@media (max-width: 480px) {
+  .wireframe-card header { gap: 6px; }
+  .wireframe-card .sketch-brand { gap: 5px; }
+  .wireframe-card .sketch-wordmark { font-size: 12px; }
+  .wireframe-card header button { font-size: 11px; padding: 6px; }
+}

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

@@ -1,5 +1,6 @@
 import { handleLinearResult } from './linear-panel.js';
 import { handleSharedBrowserMessage } from './shared-browser.js';
+import { openWireframe } from './wireframe-workbench.js';
 import { syncGithubSessions } from './session-github.js';
 import { handleIssuesMessageInContext as handleIssuesMessage } from './issues-context.js';
 // app-messages.js - WebSocket message router
@@ -60,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';
@@ -106,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);
@@ -1148,7 +1150,7 @@ export function processMessage(msg) {
           getTools()[msg.id] = { el: null, name: msg.name, input: null, done: true, hidden: true };
         } else if (msg.name === "ask_user_questions") {
           getTools()[msg.id] = { el: null, name: msg.name, input: null, done: true, hidden: true };
-        } else if (msg.name === "present_markdown_edit" || (msg.name && msg.name.indexOf("present_markdown_edit") !== -1)) {
+        } else if (msg.name === "present_wireframe" || (msg.name && msg.name.endsWith("__present_wireframe")) || msg.name === "present_markdown_edit" || (msg.name && msg.name.indexOf("present_markdown_edit") !== -1)) {
           getTools()[msg.id] = { el: null, name: msg.name, input: null, done: true, hidden: true };
         } else if (getTodoTools()[msg.name]) {
           getTools()[msg.id] = { el: null, name: msg.name, input: null, done: true, hidden: true };
@@ -1584,6 +1586,12 @@ export function processMessage(msg) {
         handleFileChanged(msg);
         break;
 
+      case "wireframe_present":
+        if (!store.get('replayingHistory') && !store.get('dmMode') && (!msg.sessionId || msg.sessionId === store.get('activeSessionId'))) {
+          if (store.get('paneMode') || !store.get('splitPanes')) openWireframe(msg);
+        }
+        break;
+
       case "markdown_edit_present":
         if (!store.get('replayingHistory') && !store.get('dmMode')) {
           if (store.get('paneMode')) forwardPaneMarkdownPresentation(msg);