clay-server 4.7.1-beta.5 → 4.8.0-beta.2

package/lib/project-vendor-login.js

@@ -1,7 +1,7 @@
 // Vendor login flow coordinator.
 //
 // Owns the "the vendor CLI is not logged in" recovery path end to end so the
-// client never has to guess. One login terminal per vendor per project is the
+// client never has to guess. One login terminal per vendor per requester is the
 // single source of truth: repeated auth_required events (other sessions, split
 // panes, a burst of 401 retries) re-use that record instead of spawning more
 // terminals.
@@ -11,7 +11,7 @@
 //                          command, reply with vendor_login_ready
 //   PTY output/exit     -> detect a successful login, restart the vendor's
 //                          YOKE adapter so it re-reads the credential file,
-//                          broadcast auth_refreshed, close the terminal
+//                          send auth_refreshed, close the terminal and browser
 //   vendor_login_cancel -> user dismissed the flow; kill the terminal
 //
 // The adapter restart is the actual bug fix: a Codex app-server is a long-lived
@@ -84,10 +84,20 @@ function attachVendorLogin(ctx) {
   var getLinuxUserForSession = ctx.getLinuxUserForSession;
   var refreshVendorAuthEverywhere = ctx.refreshVendorAuthEverywhere;
 
-  // vendor -> flow record. At most one live login terminal per vendor.
+  // Requester + vendor -> flow. Credentials and sign-in views stay user-bound.
   var _flows = Object.create(null);
+  function flowKey(ws, vendor) {
+    return JSON.stringify([ws && ws._clayUser ? String(ws._clayUser.id) : null, vendor]);
+  }
+  var browserLogin = require("./vendor-login-browser-flow").attachBrowserLogin({
+    osUsers: osUsers, sendTo: sendTo, hasTerminalPermission: hasTerminalPermission,
+    createLoginBrowser: ctx.createLoginBrowser,
+    flowKey: flowKey,
+    cancel: function (vendor) { closeFlowTerminal(discardFlow(vendor)); broadcastState(); },
+  });
 
   function loginCommandFor(vendor) {
+    if (vendor === "claude") return "claude auth login";
     var info = vendorRegistry.getVendorInfo(vendor);
     return (info && info.loginCommand) || "claude login";
   }
@@ -97,30 +107,34 @@ function attachVendorLogin(ctx) {
     return (info && info.displayName) || vendor || "Vendor";
   }
 
-  function listFlows() {
+  function listFlows(ws) {
     var result = [];
     var vendors = Object.keys(_flows);
     for (var i = 0; i < vendors.length; i++) {
       var flow = _flows[vendors[i]];
+      if (ws && flowKey(ws, flow.vendor) !== vendors[i]) continue;
       result.push({
         vendor: flow.vendor,
         terminalId: flow.terminalId,
         startedAt: flow.startedAt,
         completed: !!flow.completed,
+        browserId: flow.browser ? flow.browser.id : null,
       });
     }
     return result;
   }
 
   function broadcastState() {
+    if (ctx.clients) { ctx.clients.forEach(sendStateTo); return; }
     send({ type: "vendor_login_state", slug: slug, flows: listFlows() });
   }
 
   function sendStateTo(ws) {
-    sendTo(ws, { type: "vendor_login_state", slug: slug, flows: listFlows() });
+    sendTo(ws, { type: "vendor_login_state", slug: slug, flows: hasTerminalPermission(ws) ? listFlows(ws) : [] });
   }
 
   function hasTerminalPermission(ws) {
+    if (ctx.requestAccess) return ctx.requestAccess.canAccessProject(ws, slug) && ctx.requestAccess.hasPermission(ws, "terminal");
     if (!ws || !ws._clayUser) return true;
     if (!usersModule || typeof usersModule.getEffectivePermissions !== "function") return true;
     var perms = usersModule.getEffectivePermissions(ws._clayUser, osUsers);
@@ -164,6 +178,8 @@ function attachVendorLogin(ctx) {
     var flow = _flows[vendor];
     if (!flow) return null;
     delete _flows[vendor];
+    if (flow.browser) flow.browser.close();
+    if (flow.expiryTimer) clearTimeout(flow.expiryTimer);
     if (flow.closeTimer) {
       clearTimeout(flow.closeTimer);
       flow.closeTimer = null;
@@ -223,14 +239,17 @@ function attachVendorLogin(ctx) {
     var refresh = Promise.resolve(false);
     if (succeeded) {
       refresh = typeof refreshVendorAuthEverywhere === "function"
-        ? refreshVendorAuthEverywhere(vendor, flow.linuxUser || null)
-        : refreshVendorAuth(vendor, flow.linuxUser || null);
+        ? refreshVendorAuthEverywhere(flow.vendor, flow.linuxUser || null)
+        : refreshVendorAuth(flow.vendor, flow.linuxUser || null);
     }
     refresh.then(function (restarted) {
+      if (_flows[vendor] !== flow) return;
       discardFlow(vendor);
       closeFlowTerminal(flow);
       if (succeeded) {
-        send({ type: "auth_refreshed", slug: slug, vendor: vendor, adapterRestarted: !!restarted });
+        var message = { type: "auth_refreshed", slug: slug, vendor: flow.vendor, adapterRestarted: !!restarted };
+        if (ctx.clients) ctx.clients.forEach(function (ws) { if (flowKey(ws, flow.vendor) === vendor && hasTerminalPermission(ws)) sendTo(ws, message); });
+        else send(message);
       }
       broadcastState();
     });
@@ -240,10 +259,11 @@ function attachVendorLogin(ctx) {
     var flow = _flows[vendor];
     if (!flow || flow.finishing || flow.succeeded) return;
     flow.outputTail = (flow.outputTail + stripAnsi(chunk)).slice(-OUTPUT_TAIL_MAX);
+    if (flow.browser) flow.browser.output(stripAnsi(chunk));
     if (!looksLikeLoginSuccess(flow.outputTail)) return;
 
     flow.succeeded = true;
-    console.log("[vendor-login] Detected successful " + vendor + " login in " + slug);
+    console.log("[vendor-login] Detected successful " + flow.vendor + " login in " + slug);
     // Let the success line land on screen before the terminal disappears.
     flow.closeTimer = setTimeout(function () {
       finishFlow(vendor, true);
@@ -261,10 +281,15 @@ function attachVendorLogin(ctx) {
   }
 
   function startFlow(ws, vendor, msg) {
+    var key = flowKey(ws, vendor);
     var identity = resolveLoginIdentity(ws, msg);
     var command = loginCommandFor(vendor);
+    var browserMode = msg.mode === "browser" && (vendor === "claude" || vendor === "codex");
+    if (browserMode) command = vendor === "codex" ? "codex login" : "claude auth login";
     var flow = {
       vendor: vendor,
+      key: key,
+      ownerId: ws && ws._clayUser ? String(ws._clayUser.id) : null,
       terminalId: null,
       startedAt: Date.now(),
       linuxUser: identity.linuxUser,
@@ -277,16 +302,18 @@ function attachVendorLogin(ctx) {
     };
     // Registered before create() so the PTY's first output chunk (hooks fire
     // synchronously from spawn) already finds the record.
-    _flows[vendor] = flow;
+    _flows[key] = flow;
 
     var terminal = null;
     try {
+      if (browserMode) browserLogin.prepare(ws, flow, identity);
       terminal = tm.create(100, 30, identity.osUserInfo, ws, {
         initialInput: command + "\n",
         title: vendorDisplayName(vendor) + " login",
         kind: "vendor-login",
-        onData: function (data) { handleFlowOutput(vendor, data); },
-        onExit: function () { handleFlowExit(vendor); },
+        loginBrowserEnv: flow.browser ? flow.browser.env : null,
+        onData: function (data) { if (_flows[key] === flow) handleFlowOutput(key, data); },
+        onExit: function () { if (_flows[key] === flow) handleFlowExit(key); },
       });
     } catch (e) {
       console.error("[vendor-login] Failed to spawn " + vendor + " login terminal in " + slug + ":",
@@ -294,17 +321,18 @@ function attachVendorLogin(ctx) {
     }
 
     if (!terminal) {
-      delete _flows[vendor];
+      discardFlow(key);
       return null;
     }
 
     flow.terminalId = terminal.id;
-    tm.attach(terminal.id, ws);
+    if (!flow.browser) tm.attach(terminal.id, ws);
     send({ type: "term_list", terminals: tm.list() });
     return flow;
   }
 
   function handleVendorLoginMessage(ws, msg) {
+    if (browserLogin.handle(ws, msg, _flows)) return true;
     if (msg.type === "vendor_login_state_request") {
       sendStateTo(ws);
       return true;
@@ -312,7 +340,7 @@ function attachVendorLogin(ctx) {
 
     if (msg.type === "vendor_login_cancel") {
       var cancelVendor = String(msg.vendor || "");
-      var cancelled = discardFlow(cancelVendor);
+      var cancelled = discardFlow(flowKey(ws, cancelVendor));
       if (cancelled) closeFlowTerminal(cancelled);
       broadcastState();
       return true;
@@ -329,10 +357,11 @@ function attachVendorLogin(ctx) {
         return true;
       }
 
-      var existing = _flows[vendor];
+      var key = flowKey(ws, vendor);
+      var existing = _flows[key];
       if (existing && !isFlowTerminalAlive(existing)) {
         // Terminal died without its exit hook clearing the record.
-        discardFlow(vendor);
+        discardFlow(key);
         existing = null;
       }
 
@@ -341,13 +370,14 @@ function attachVendorLogin(ctx) {
         // session or split pane) must not pop a second prompt; it only learns
         // that a flow is already running. A deliberate request re-attaches.
         if (!msg.auto) {
-          tm.attach(existing.terminalId, ws);
+          if (!existing.browser) tm.attach(existing.terminalId, ws);
           sendTo(ws, {
             type: "vendor_login_ready",
             slug: slug,
             vendor: vendor,
             terminalId: existing.terminalId,
             reused: true,
+            browserId: existing.browser ? existing.browser.id : null,
           });
         }
         sendStateTo(ws);
@@ -371,6 +401,7 @@ function attachVendorLogin(ctx) {
         vendor: vendor,
         terminalId: started.terminalId,
         reused: false,
+        browserId: started.browser ? started.browser.id : null,
       });
       broadcastState();
       return true;
@@ -408,6 +439,9 @@ function attachVendorLogin(ctx) {
     forgetTerminal: forgetTerminal,
     isLoginTerminal: isLoginTerminal,
     refreshVendorAuth: refreshVendorAuth,
+    destroy: function () {
+      Object.keys(_flows).forEach(function (vendor) { closeFlowTerminal(discardFlow(vendor)); });
+    },
   };
 }
 

package/lib/project.js

@@ -62,6 +62,7 @@ var { attachDriverContinuation } = require("./project-driver-continuation");
 var driverContinuationAccess = require("./driver-continuation-access");
 var { attachSessionNotes, composeSystemPrompts } = require("./project-session-notes");
 var { attachSessionDocument } = require("./project-session-document");
+var { attachSharedBrowser } = require("./project-shared-browser");
 var { attachCapsuleCatalog } = require("./project-capsule-catalog");
 var { attachProjectWorkspaceQuery } = require("./project-workspace-query");
 var { attachProjectLogs } = require("./project-logs");
@@ -753,6 +754,15 @@ function createProjectContext(opts) {
       }
     },
   });
+  var _sharedBrowser = attachSharedBrowser({
+    slug: slug, isMate: isMate, sm: sm, clients: clients, sendTo: sendTo,
+    usersModule: usersModule, requestAccess: _requestAccess, osUsers: osUsers,
+    getSessionForWs: getSessionForWs,
+    getIdentity: function (session) {
+      var linuxUser = getLinuxUserForSession(session);
+      return linuxUser ? resolveOsUserInfo(linuxUser) : null;
+    },
+  });
   var _sessionDocument = attachSessionDocument({
     cwd: cwd,
     isMate: isMate,
@@ -1045,6 +1055,9 @@ function createProjectContext(opts) {
       }
     }
 
+    var sharedBrowserConfig = _sharedBrowser.createMcpServer(adapter);
+    if (sharedBrowserConfig) servers["clay-shared-browser"] = sharedBrowserConfig;
+
     // Explicit agent signal for user-requested Markdown presentation.
     if (!isMate) {
       try {
@@ -1263,6 +1276,11 @@ function createProjectContext(opts) {
         }
         continue;
       }
+      if (name === "clay-shared-browser" && forSession) {
+        var boundBrowser = _sharedBrowser.createMcpServer(adapter, forSession);
+        if (boundBrowser) { filtered[name] = boundBrowser; hasAny = true; }
+        continue;
+      }
       if (name === "clay-documents" && forSession) {
         try {
           var boundDocuments = _sessionDocument.createMcpServer(adapter, forSession);
@@ -1374,6 +1392,7 @@ function createProjectContext(opts) {
         _sessionHandoff.getSystemPrompt(session),
         _driverContinuation.getSystemPrompt(session),
         _sessionDocument.getSystemPrompt(session),
+        _sharedBrowser.getSystemPrompt(session),
         _capsuleCatalog.getSystemPrompt(session),
         _projectLogs.getSystemPrompt(session),
         _issues.getSystemPrompt(session),
@@ -1393,6 +1412,7 @@ function createProjectContext(opts) {
         .concat(_sessionHandoff.getToolDefs(session))
         .concat(_driverContinuation.getToolDefs(session, Number(session._sdkQueryGeneration || 0)))
         .concat(_sessionDocument.getToolDefs(session))
+        .concat(_sharedBrowser.getToolDefs(session))
         .concat(_debateProposal.getToolDefs(session))
         .concat(_mateCreationProposal.getToolDefs(session))
         .concat(_workspaceQuery.getDynamicToolDefs(session))
@@ -1821,6 +1841,7 @@ function createProjectContext(opts) {
     if (_shellCommand.handleShellCommand(ws, msg)) return;
 
     // --- Vendor login flow (delegated to project-vendor-login.js) ---
+    if (_sharedBrowser.handleMessage(ws, msg)) return;
     if (_vendorLogin.handleVendorLoginMessage(ws, msg)) return;
 
     // --- Notes, terminals, context, user message (delegated to project-user-message.js) ---
@@ -2204,6 +2225,8 @@ function createProjectContext(opts) {
 
   // --- Vendor login flow (delegated to project-vendor-login.js) ---
   var _vendorLogin = attachVendorLogin({
+    requestAccess: _requestAccess,
+    clients: clients,
     slug: slug,
     osUsers: osUsers,
     sm: sm,
@@ -2342,6 +2365,11 @@ function createProjectContext(opts) {
               inputSchema: normalizeToolSchema(continuationTools[cti].inputSchema),
             });
           }
+          var sharedTools = _sharedBrowser.getToolDefs(boundSession);
+          sharedTools.forEach(function (definition) {
+            tools.push({ server: "clay-shared-browser", name: definition.name, description: definition.description,
+              inputSchema: normalizeToolSchema(definition.inputSchema) });
+          });
           var documentTools = _sessionDocument.getToolDefs(boundSession);
           for (var dti = 0; dti < documentTools.length; dti++) {
             tools.push({
@@ -2385,6 +2413,7 @@ function createProjectContext(opts) {
           var inAppNames = Object.keys(localMcp);
           for (var i = 0; i < inAppNames.length; i++) {
             if (inAppNames[i] === "clay-sessions" || inAppNames[i] === "clay-notes" || inAppNames[i] === "clay-handoff" || inAppNames[i] === "clay-documents") continue;
+            if (inAppNames[i] === "clay-shared-browser") continue;
             // Debate tools were added above only when this request had an
             // exact session. Never duplicate them or advertise the static,
             // intentionally unbound proposal server.
@@ -2444,6 +2473,12 @@ function createProjectContext(opts) {
             }
           }
         }
+        if (boundSession && serverName === "clay-shared-browser") {
+          var sharedTools = _sharedBrowser.getToolDefs(boundSession);
+          for (var bti = 0; bti < sharedTools.length; bti++) {
+            if (sharedTools[bti].name === toolName) return Promise.resolve(sharedTools[bti].handler(args || {}));
+          }
+        }
         if (boundSession && serverName === "clay-documents") {
           var documentTools = _sessionDocument.getToolDefs(boundSession);
           for (var dti = 0; dti < documentTools.length; dti++) {
@@ -2482,7 +2517,7 @@ function createProjectContext(opts) {
         if (boundSession && serverName === "clay-knowledge") {
           return _mateKnowledge.callBridgeTool(boundSession, toolName, args);
         }
-        if (serverName === "clay-sessions" || serverName === "clay-notes" || serverName === "clay-handoff" || serverName === "clay-documents" || serverName === "clay-debate" || serverName === "clay-mate-creation" || serverName === "clay-workspace" || serverName === "clay-history" || serverName === "clay-github" || serverName === "clay-issues" || serverName === "clay-logs" || serverName === "clay-knowledge") {
+        if (serverName === "clay-sessions" || serverName === "clay-notes" || serverName === "clay-handoff" || serverName === "clay-documents" || serverName === "clay-shared-browser" || serverName === "clay-debate" || serverName === "clay-mate-creation" || serverName === "clay-workspace" || serverName === "clay-history" || serverName === "clay-github" || serverName === "clay-issues" || serverName === "clay-logs" || serverName === "clay-knowledge") {
           return Promise.reject(new Error("Session-bound tool requires a valid Clay session: " + serverName + "/" + toolName));
         }
         if (sessionOnly) return Promise.reject(new Error("Session tool not found: " + serverName + "/" + toolName));
@@ -2600,6 +2635,8 @@ function createProjectContext(opts) {
 
   // --- Destroy ---
   function destroy() {
+    _sharedBrowser.destroy();
+    _vendorLogin.destroy();
     if (_scheduledMessages) _scheduledMessages.shutdown();
     if (_autonomousRun) _autonomousRun.shutdown();
     _splitGroups.shutdown();

package/lib/public/app.js

@@ -1,3 +1,4 @@
+import { initSharedBrowser } from './modules/shared-browser.js';
 import { initGenerationStop } from './modules/generation-stop.js';
 import { initIssueLinks } from './modules/clay-issue-links.js';
 import { initIssues, closeIssues } from './modules/issues.js';
@@ -268,6 +269,12 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   // --- Initialize store (single source of truth for client state) ---
   createStore({
     networkSettings: { loaded: false, busy: false, confirming: false, draft: "", saved: "", status: "", errorKind: "", requestId: 0 },
+    vendorLoginBrowser: null,
+    sharedBrowser: null,
+    sharedBrowsers: [],
+    mcpSkillsWorkbench: {},
+    sharedBrowserOpen: false,
+    sharedBrowserUi: {},
     // session / routing
     basePath: basePath,
     wsPath: wsPath,
@@ -1174,6 +1181,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     fileViewerEl: $("file-viewer"),
   });
   initGitPanel();
+  initSharedBrowser();
   initWorkerPaneLock();
 
   // --- Terminal ---

package/lib/public/css/filebrowser.css

@@ -1054,12 +1054,6 @@
     flex-direction: column;
     overflow: hidden;
     flex-shrink: 0;
-    box-shadow:
-      4px 8px 18px rgba(var(--shadow-rgb), 0.14),
-      2px 2px 4px rgba(var(--shadow-rgb), 0.08),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04);
-    animation: workbench-panel-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
-    transition: max-width 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
   }
   #file-viewer.hidden { display: none; }
   #file-viewer.file-viewer-wide {
@@ -1078,15 +1072,10 @@
     border: 0;
     border-radius: 0;
     background: var(--bg);
-    box-shadow: none;
-    animation: none;
   }
 }
 
-@keyframes workbench-panel-in {
-  from { opacity: 0; transform: translateX(10px) scale(0.995); }
-  to { opacity: 1; transform: translateX(0) scale(1); }
-}
+
 
 /* Narrow screens: full overlay */
 @media (max-width: 1023px) {
@@ -2026,11 +2015,6 @@
     flex-direction: column;
     overflow: hidden;
     flex-shrink: 0;
-    box-shadow:
-      4px 8px 18px rgba(var(--shadow-rgb), 0.14),
-      2px 2px 4px rgba(var(--shadow-rgb), 0.08),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04);
-    animation: workbench-panel-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
   }
   #terminal-container.hidden { display: none; }
   #terminal-container.panel-fullscreen {
@@ -2041,17 +2025,10 @@
     margin: 0;
     border: 0;
     border-radius: 0;
-    box-shadow: none;
-    animation: none;
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  #file-viewer,
-  #terminal-container {
-    animation: none;
-  }
-}
+
 
 /* Narrow screens: full overlay */
 @media (max-width: 1023px) {

package/lib/public/css/issues.css

@@ -1,20 +1,7 @@
 #issues-panel { position: relative; width: 50%; max-width: 720px; min-width: 360px; height: calc(100% - 16px); margin: 8px 8px 8px 10px; min-height: 0; align-self: center; display: flex; flex-direction: column; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; flex-shrink: 0; }
-@media (min-width: 1024px) {
-  #issues-panel {
-    box-shadow:
-      4px 8px 18px rgba(var(--shadow-rgb), 0.14),
-      2px 2px 4px rgba(var(--shadow-rgb), 0.08),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04);
-    animation: workbench-panel-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
-    transition: max-width 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  #issues-panel { animation: none; }
-}
 #issues-panel.hidden { display: none; }
 #issues-panel.issues-wide { width: 70%; max-width: 1200px; }
-#issues-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; }
+#issues-panel.panel-fullscreen { width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; }
 #issues-panel header { height: 48px; box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 0 16px; border-bottom: 1px solid var(--border-subtle); flex: 0 0 auto; }
 #issues-panel .issues-title { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
 #issues-panel .issues-title .lucide { width: 15px; color: var(--accent); }

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

@@ -0,0 +1,51 @@
+.mcp-skills-workbench { display:flex; flex-direction:column; flex-shrink:0; width:50%; max-width:720px; min-width:360px; height:calc(100% - 16px); align-self:center; margin:8px 8px 8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--bg); overflow:hidden; }
+.mcp-skills-workbench.hidden { display:none; }
+.mcp-skills-workbench.workbench-wide { width:70%; max-width:1200px; }
+.mcp-skills-workbench.panel-fullscreen { width:100%; max-width:none; min-width:0; height:100%; margin:0; border:0; border-radius:0; }
+.mcp-skills-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); }
+.mcp-skills-header strong,.mcp-skills-header>div { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; }
+.mcp-skills-header svg { width:15px; height:15px; }
+.mcp-skills-header button { display:flex; padding:6px; background:transparent; border:0; border-radius:6px; color:var(--text-muted); cursor:pointer; }
+.mcp-skills-header button:hover { background:var(--bg-alt); color:var(--text); }
+.mcp-skills-tabs { display:flex; padding:0 16px; border-bottom:1px solid var(--border); gap:24px; flex-shrink:0; }
+.mcp-skills-tabs button { padding:13px 0 11px; background:none; border:0; border-bottom:2px solid transparent; color:var(--text-muted); font:inherit; font-size:12px; cursor:pointer; }
+.mcp-skills-tabs button[aria-selected="true"] { color:var(--text); border-bottom-color:var(--accent); }
+.mcp-skills-tabs button[hidden] { display:none; }
+#mcp-skills-workbench #skills-modal,#mcp-skills-workbench #mcp-modal { position:static; inset:auto; z-index:auto; display:flex; flex:1; min-height:0; align-items:stretch; justify-content:stretch; }
+#mcp-skills-workbench #skills-modal.hidden,#mcp-skills-workbench #mcp-modal.hidden { display:none; }
+#mcp-skills-workbench .skills-dialog,#mcp-skills-workbench .mcp-dialog { width:100%; max-width:none; min-width:0; height:100%; max-height:none; padding:0; display:flex; flex-direction:column; overflow:hidden; }
+#mcp-skills-workbench .mcp-header,#mcp-skills-workbench #skills-modal-close { display:none; }
+#mcp-skills-workbench .skills-header { padding:12px 16px 0; }
+#mcp-skills-workbench .skills-title { font-size:12px; font-weight:500; }
+#mcp-skills-workbench .skills-powered-by { font-size:10px; }
+#mcp-skills-workbench .skills-search { margin:12px 16px 0; }
+#mcp-skills-workbench .skills-tabs { padding:8px 16px 0; gap:0; overflow-x:auto; }
+#mcp-skills-workbench .skills-tab { padding:9px 10px; font-size:11px; white-space:nowrap; }
+#mcp-skills-workbench .skills-content,#mcp-skills-workbench .mcp-content { flex:1; min-height:0; overflow-y:auto; padding:16px; }
+#mcp-skills-workbench .skills-detail { display:flex; flex-direction:column; gap:24px; height:auto; min-height:0; }
+#mcp-skills-workbench .skills-detail-main { min-width:0; flex:none; border-right:0; overflow:visible; }
+#mcp-skills-workbench .skills-detail-sidebar { width:auto; border-left:0; padding-left:0; border-top:1px solid var(--border); padding-top:20px; }
+#mcp-skills-workbench .skills-detail-name { font-size:24px; overflow-wrap:anywhere; }
+#mcp-skills-workbench .skills-installed-item { align-items:flex-start; }
+#mcp-skills-workbench .skills-item { padding:12px 0; }
+#mcp-skills-workbench .mcp-server-row { flex-wrap:wrap; }
+#mcp-skills-workbench .mcp-server-perm-reason { flex-basis:100%; padding-left:26px; }
+#mcp-skills-workbench button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
+@media (max-width:1023px) { .mcp-skills-workbench,.mcp-skills-workbench.workbench-wide { position:fixed; inset:0; z-index:160; width:100%; max-width:none; min-width:0; height:100dvh; margin:0; border:0; border-radius:0; padding-top:env(safe-area-inset-top); padding-bottom:env(safe-area-inset-bottom); } }
+
+#mcp-skills-workbench .skills-detail-main > .skills-detail-md-wrap { flex:none; overflow:visible; padding:0; }
+#mcp-skills-workbench .skills-detail-main > .skills-detail-name,#mcp-skills-workbench .skills-detail-main > .skills-detail-desc,#mcp-skills-workbench .skills-detail-main > .skills-detail-cmd { margin-left:0; margin-right:0; }
+
+#mcp-skills-workbench .skills-detail-cmd code { min-width:0; overflow-x:auto; }
+
+#mcp-skills-workbench .ext-pill-wrap { display:block; flex-shrink:0; padding:12px 16px; border-bottom:1px solid var(--border); max-height:55%; overflow-y:auto; }
+#mcp-skills-workbench .top-bar-ext-btn { padding:8px 10px; border-radius:6px; gap:6px; }
+#mcp-skills-workbench .top-bar-ext-btn::after { content:"Setup"; margin-left:8px; color:var(--text-muted); font-weight:400; }
+#mcp-skills-workbench .top-bar-ext-btn.ext-connected::after { content:"Connected"; color:var(--success); }
+#mcp-skills-workbench .ext-popover { position:static; width:auto; margin-top:12px; padding:12px; box-shadow:none; border-radius:8px; }
+
+#mcp-skills-workbench .ext-feature-summary { margin:8px 0 0; font-size:12px; line-height:1.5; color:var(--text-muted); }
+#mcp-skills-workbench .ext-popover-desc p { margin:0 0 8px; }
+#mcp-skills-workbench .ext-feature-list { margin:0 0 16px; padding-left:18px; }
+#mcp-skills-workbench .ext-feature-list li { margin-bottom:8px; line-height:1.6; }
+#mcp-skills-workbench .ext-feature-list strong { color:var(--text); font-weight:500; }

package/lib/public/css/project-logs.css

@@ -18,12 +18,6 @@
     flex-direction: column;
     overflow: hidden;
     flex-shrink: 0;
-    box-shadow:
-      4px 8px 18px rgba(var(--shadow-rgb), 0.14),
-      2px 2px 4px rgba(var(--shadow-rgb), 0.08),
-      inset 0 1px 0 rgba(255, 255, 255, 0.04);
-    animation: workbench-panel-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
-    transition: max-width 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
   }
   #project-logs-panel.hidden { display: none; }
   #project-logs-panel.project-logs-wide {
@@ -38,14 +32,9 @@
     margin: 0;
     border: 0;
     border-radius: 0;
-    box-shadow: none;
-    animation: none;
   }
 }
 
-@media (prefers-reduced-motion: reduce) {
-  #project-logs-panel { animation: none; }
-}
 
 /* Narrow screens: full overlay, like the other workbench tools. */
 @media (max-width: 1023px) {

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

@@ -0,0 +1,28 @@
+/* Shared desktop workbench elevation and motion. Keep panel content styles local. */
+@keyframes workbench-panel-in {
+  from { opacity: 0; transform: translateX(10px) scale(0.995); }
+  to { opacity: 1; transform: translateX(0) scale(1); }
+}
+
+@media (min-width: 1024px) {
+  :is(#file-viewer, #terminal-container, #project-logs-panel, #issues-panel, #notes-browser, #scheduled-tasks-panel, #shared-browser-panel, #mcp-skills-workbench):not(.panel-fullscreen) {
+    box-shadow:
+      4px 8px 18px rgba(var(--shadow-rgb), 0.14),
+      2px 2px 4px rgba(var(--shadow-rgb), 0.08),
+      inset 0 1px 0 rgba(255, 255, 255, 0.04);
+    animation: workbench-panel-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
+    transition: max-width 0.2s ease, width 0.2s ease, box-shadow 0.2s ease;
+  }
+}
+
+:is(#file-viewer, #terminal-container, #project-logs-panel, #issues-panel, #notes-browser, #scheduled-tasks-panel, #shared-browser-panel, #mcp-skills-workbench).panel-fullscreen {
+  box-shadow: none;
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :is(#file-viewer, #terminal-container, #project-logs-panel, #issues-panel, #notes-browser, #scheduled-tasks-panel, #shared-browser-panel, #mcp-skills-workbench):not(.panel-fullscreen) {
+    animation: none;
+    transition: none;
+  }
+}

package/lib/public/css/scheduled-tasks.css

@@ -1,5 +1,5 @@
 @media (min-width: 1024px) {
-  #scheduled-tasks-panel { width: 50%; max-width: 760px; min-width: 380px; height: calc(100% - 16px); min-height: 0; align-self: center; margin: 8px 8px 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; box-shadow: 4px 8px 18px rgba(var(--shadow-rgb), .14), 2px 2px 4px rgba(var(--shadow-rgb), .08); animation: workbench-panel-in .18s cubic-bezier(.2,.8,.2,1); }
+  #scheduled-tasks-panel { width: 50%; max-width: 760px; min-width: 380px; height: calc(100% - 16px); min-height: 0; align-self: center; margin: 8px 8px 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; flex-shrink: 0; }
   #scheduled-tasks-panel.hidden { display: none; }
   #scheduled-tasks-panel.scheduled-tasks-wide { width: 70%; max-width: 1200px; }
   #scheduled-tasks-panel.panel-fullscreen { width: 100%; max-width: none; min-width: 0; height: 100%; margin: 0; border: 0; border-radius: 0; }

package/lib/public/css/shared-browser-skins.css

@@ -0,0 +1,28 @@
+/* Device silhouettes follow viewport dimensions; they do not emulate an OS. */
+.shared-browser-viewport[data-skin="laptop"] .shared-browser-monitor { border: 9px solid #252729; border-bottom: 30px solid #c8cbcc; border-radius: 12px 12px 5px 5px; box-shadow: 0 0 0 2px #acb0b2, 0 20px 32px #0005; }
+.shared-browser-viewport[data-skin="laptop"] .shared-browser-monitor-brand { left: 0; right: 0; text-align: center; color: #53585a; }
+.shared-browser-viewport[data-skin="laptop"] .shared-browser-monitor-stand { bottom: -49px; height: 18px; width: calc(100% + 60px); background: linear-gradient(#dfe1e2, #babfc2); border-radius: 2px 2px 45% 45%; box-shadow: 0 3px 0 #858b8e, 0 12px 15px #0005; }
+.shared-browser-viewport[data-skin="laptop"] .shared-browser-monitor-stand::before { top: 0; bottom: auto; height: 5px; left: 42%; right: 42%; clip-path: none; background: #9ba1a4; border-radius: 0 0 5px 5px; }
+.shared-browser-viewport[data-skin="laptop"] .shared-browser-monitor-stand::after { display: none; }
+.shared-browser-viewport[data-skin="crt"] { background: #183638; }
+.shared-browser-viewport[data-skin="crt"] .shared-browser-monitor { border: 22px solid #c9c7b9; border-bottom-width: 42px; border-radius: 24px; box-shadow: inset 0 0 0 3px #797b72, 0 0 0 2px #e4e1d4, 8px 10px 0 #999b90, 12px 24px 30px #0005; }
+.shared-browser-viewport[data-skin="crt"] .shared-browser-monitor::before { inset: -5px; border: 5px solid; border-color: #8a8b80 #b4b5a8 #e3e1d4 #9c9e91; border-radius: 6px; }
+.shared-browser-viewport[data-skin="crt"] .shared-browser-monitor-brand { bottom: -33px; }
+.shared-browser-viewport[data-skin="crt"] .shared-browser-monitor::after { bottom: -28px; right: 6px; width: 9px; height: 9px; border: 3px solid #afb1a3; }
+.shared-browser-viewport[data-skin="crt"] .shared-browser-monitor-stand { bottom: -66px; width: 35%; height: 24px; }
+.shared-browser-viewport[data-skin="crt"] .shared-browser-monitor-detail { position: absolute; bottom: -27px; right: 35px; width: 40px; height: 4px; background: repeating-linear-gradient(90deg, #85897e 0 6px, transparent 6px 12px); }
+.shared-browser-viewport[data-skin="mac"] { background: #292824; gap: 28px; }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor { border: 24px solid #d7cfbb; border-top-width: 30px; border-bottom-width: 78px; border-radius: 15px 15px 7px 7px; box-shadow: 0 5px 0 #afa68f, 0 7px 0 #e6ddc9, 0 22px 30px #0005; }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor::before { inset: -6px; border: 6px solid; border-color: #aaa18c #bcb39d #ede4cf #bab099; border-radius: 9px; }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor-brand { bottom: -51px; left: 1px; color: #696250; }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor-stand { display: none; }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor-detail { position: absolute; bottom: -43px; right: 2px; width: 30%; height: 5px; background: #625f54; border-bottom: 2px solid #efe6d3; border-radius: 1px; }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor-detail::after { content: ""; position: absolute; top: 15px; right: 0; width: 65%; height: 10px; background: repeating-linear-gradient(90deg, #aaa08a 0 2px, transparent 2px 5px); }
+.shared-browser-viewport[data-skin="mac"] .shared-browser-monitor::after { bottom: -67px; }
+.shared-browser-viewport[data-skin="phone"] { background: #23282d; gap: 24px; }
+.shared-browser-viewport[data-skin="phone"] .shared-browser-monitor { border: 12px solid #141517; border-top-width: 48px; border-bottom-width: 54px; border-radius: 38px; box-shadow: 0 0 0 2px #9a9d9f, 0 0 0 4px #46494c, 0 20px 35px #0006; }
+.shared-browser-viewport[data-skin="phone"] .shared-browser-monitor::before { inset: auto auto -44px 50%; width: 32px; height: 32px; transform: translateX(-50%); border: 1px solid #666a6e; border-radius: 50%; background: #191b1d; box-shadow: inset 0 0 0 2px #111; }
+.shared-browser-viewport[data-skin="phone"] .shared-browser-monitor::after { top: -27px; bottom: auto; right: calc(50% + 39px); width: 6px; height: 6px; background: #283d52; box-shadow: 0 0 0 2px #08090a; }
+.shared-browser-viewport[data-skin="phone"] .shared-browser-monitor-detail { position: absolute; top: -26px; left: 50%; transform: translateX(-50%); width: 42px; height: 5px; border-radius: 4px; background: #08090a; box-shadow: 0 1px 0 #383b3d; }
+.shared-browser-viewport[data-skin="phone"] .shared-browser-monitor-brand { left: auto; right: 10px; bottom: -34px; font-size: 10px; color: #92979c; }
+.shared-browser-viewport[data-skin="phone"] .shared-browser-monitor-stand { display: none; }