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

package/bin/login-browser-open.js

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+// Capture the CLI's exact OAuth URL without opening a browser on the host desktop.
+var fs = require("fs");
+var file = process.env.CLAY_LOGIN_URL_FILE;
+var url = process.argv[2];
+if (!file || !url || url.length > 16384) process.exit(1);
+fs.writeFileSync(file, url, { mode: 0o600 });

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

@@ -2204,6 +2204,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,
@@ -2600,6 +2602,7 @@ function createProjectContext(opts) {
 
   // --- Destroy ---
   function destroy() {
+    _vendorLogin.destroy();
     if (_scheduledMessages) _scheduledMessages.shutdown();
     if (_autonomousRun) _autonomousRun.shutdown();
     _splitGroups.shutdown();

package/lib/public/app.js

@@ -268,6 +268,7 @@ 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,
     // session / routing
     basePath: basePath,
     wsPath: wsPath,

package/lib/public/css/vendor-login-browser.css

@@ -0,0 +1,63 @@
+.login-browser {
+  width: min(820px, calc(100vw - 48px));
+  height: min(780px, calc(100dvh - 48px));
+  max-width: none;
+  max-height: none;
+  padding: 0;
+  margin: auto;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  border-radius: 16px;
+  background: var(--bg);
+  color: var(--text);
+  box-shadow: 0 32px 100px #0005, 0 4px 16px #0003;
+}
+.login-browser[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
+.login-browser::backdrop { background: #0007; backdrop-filter: blur(6px); }
+.login-browser-header { display: flex; align-items: center; gap: 12px; padding: 17px 20px; border-bottom: 1px solid var(--border); }
+.login-browser-vendor { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }
+.login-browser-heading { flex: 1; min-width: 0; }
+.login-browser h2 { font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: -.015em; margin: 0; }
+.login-browser-origin { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; font-size: 11px; line-height: 1.5; color: var(--text-dimmer); }
+.login-browser-actions { display: flex; align-items: center; gap: 3px; }
+.login-browser button, .login-browser-more summary { font: inherit; cursor: pointer; color: var(--text-muted, var(--text)); }
+.login-browser button { border: 0; background: transparent; }
+.login-browser svg { width: 16px; height: 16px; flex-shrink: 0; stroke-width: 1.6; }
+.login-browser .login-browser-icon, .login-browser-more summary { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border-radius: 7px; }
+.login-browser button:hover, .login-browser-more summary:hover { background: var(--bg-alt); color: var(--text); }
+.login-browser button:focus-visible, .login-browser-more summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.login-browser .login-browser-keyboard-button { display: none; }
+.login-browser-more { position: relative; }
+.login-browser-more summary { list-style: none; }
+.login-browser-more summary::-webkit-details-marker { display: none; }
+.login-browser-menu { position: absolute; right: 0; top: 39px; z-index: 3; width: 180px; padding: 5px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); box-shadow: 0 8px 28px #0003; }
+.login-browser-menu button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 10px; border-radius: 6px; font-size: 12px; text-align: left; }
+.login-browser-viewport { position: relative; min-height: 0; overflow: hidden; background: #fff; line-height: 0; }
+.login-browser canvas { display: block; width: 100%; height: 100%; object-fit: contain; touch-action: none; }
+.login-browser-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--bg-alt); color: var(--text-dimmer); font-size: 12px; line-height: 1.5; }
+.login-browser-loading strong { font-size: 14px; font-weight: 500; color: var(--text); }
+.login-browser-loading[hidden] { display: none; }
+.login-browser-spinner { width: 22px; height: 22px; margin-bottom: 8px; border: 2px solid var(--border); border-top-color: var(--text-dimmer); border-radius: 50%; animation: login-browser-spin .9s linear infinite; }
+.login-browser-keyboard { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; bottom: 0; left: 50%; opacity: 0; font-size: 16px; }
+.login-browser-footer { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 18px; border-top: 1px solid var(--border); }
+.login-browser-info { min-width: 0; }
+.login-browser-status { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.login-browser-status-dot { width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: var(--text-dimmer); }
+.login-browser[data-phase="error"] .login-browser-status-dot { background: var(--warning, #d69c51); }
+.login-browser-footer p { margin: 0; font-size: 11px; color: var(--text-dimmer); line-height: 1.5; }
+.login-browser-footer .login-browser-privacy { margin-top: 5px; color: var(--text-muted, var(--text)); }
+.login-browser .login-browser-terminal { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-shrink: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 11px; font-weight: 500; color: var(--text); }
+.login-browser-terminal svg:last-child { width: 12px; height: 12px; color: var(--text-dimmer); }
+@keyframes login-browser-spin { to { transform: rotate(360deg); } }
+@media (max-width: 600px) {
+  .login-browser { width: 100vw; height: 100dvh; margin: 0; border: 0; border-radius: 0; }
+  .login-browser-header { padding: max(12px, env(safe-area-inset-top)) 12px 12px; gap: 9px; }
+  .login-browser-vendor { width: 30px; height: 30px; border-radius: 8px; }
+  .login-browser h2 { font-size: 14px; }
+  .login-browser .login-browser-keyboard-button { display: flex; }
+  .login-browser-footer { flex-direction: column; align-items: stretch; gap: 10px; padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
+  .login-browser-status { justify-content: center; }
+  .login-browser-privacy { text-align: center; }
+  .login-browser .login-browser-terminal { min-height: 40px; font-size: 12px; }
+}
+@media (prefers-reduced-motion: reduce) { .login-browser-spinner { animation: none; } }

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

@@ -92,6 +92,7 @@ import { handleSkillInstallWs } from './app-skills-install.js';
 import { handleNotificationsState, handleNotificationCreated, handleNotificationDismissed, handleNotificationDismissedAll, showUpdateBanner } from './app-notifications.js';
 import { handleUpdateSnoozed } from './update-snooze.js';
 import { autoStartLoginIfNeeded, handleVendorLoginReady, handleVendorLoginState, handleVendorLoginError, handleAuthRefreshed } from './vendor-login.js';
+import { handleLoginBrowserMessage } from './vendor-login-browser.js';
 import { handleDebatePreparing, handleDebateBriefReady, renderDebateBriefReady, handleDebateStarted, renderDebateStarted, handleDebateTurn, handleDebateActivity, handleDebateStream, handleDebateTurnDone, handleDebateCommentQueued, handleDebateCommentInjected, renderDebateCommentInjected, handleDebateResumed, handleDebateEnded, renderDebateEnded, handleDebateError, isDebateActive, renderMcpDebateProposal, renderDebateUserResume } from './debate.js';
 import { handleMentionStart, handleMentionActivity, handleMentionStream, handleMentionDone, handleMentionError, renderMentionUser, renderMentionResponse, renderUserMention } from './mention.js';
 
@@ -103,6 +104,10 @@ var connectOverlay = document.getElementById("connect-overlay");
 initMessageDeliveryUi();
 
 export function processMessage(msg) {
+  if (msg.type === "vendor_login_browser_frame" || msg.type === "vendor_login_browser_status") {
+    handleLoginBrowserMessage(msg);
+    return;
+  }
   if (handleIssuesMessage(msg)) return;
   if (handleAutonomousRunMessage(msg)) return;
   if (handleLoopInterviewMessage(msg)) return;

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

@@ -170,7 +170,7 @@ function showBanner(notif, autoDismissMs) {
   } else if (isAuthRequired) {
     actionsHtml =
       '<div class="notif-banner-actions">' +
-        '<button class="notif-banner-auth-login notif-banner-update-now">Open terminal &amp; log in</button>' +
+        '<button class="notif-banner-auth-login notif-banner-update-now">Sign in</button>' +
       '</div>';
   } else if (isTuiAttention) {
     actionsHtml =

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

@@ -0,0 +1,243 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { cancelVendorLogin, requestVendorLogin } from './vendor-login.js';
+
+function current() { return store.get('vendorLoginBrowser'); }
+
+function send(type, extra) {
+  var view = current();
+  var ws = getWs();
+  if (!view || view.slug !== store.get('currentSlug') || !ws || ws.readyState !== 1) return;
+  ws.send(JSON.stringify(Object.assign({ type: type, vendor: view.vendor, browserId: view.browserId }, extra || {})));
+}
+
+function input(event) { send("vendor_login_browser_input", { event: event }); }
+
+export function closeLoginBrowser() {
+  var view = current();
+  if (view && view.resizeObserver) view.resizeObserver.disconnect();
+  if (view && view.moveTimer) clearTimeout(view.moveTimer);
+  store.set({ vendorLoginBrowser: null });
+  var dialog = document.getElementById("vendor-login-browser");
+  if (dialog) { dialog.close(); dialog.remove(); }
+  if (view && view.previousFocus && view.previousFocus.isConnected) view.previousFocus.focus();
+}
+
+export function openLoginBrowser(msg) {
+  var existing = current();
+  if (existing && existing.browserId === msg.browserId) {
+    send("vendor_login_browser_attach");
+    return;
+  }
+  closeLoginBrowser();
+  var title = msg.vendor === "codex" ? "Sign in to Codex" : "Sign in to Claude";
+  store.set({ vendorLoginBrowser: {
+    browserId: msg.browserId, vendor: msg.vendor, slug: msg.slug || store.get('currentSlug'),
+    previousFocus: document.activeElement, decoding: false, pointerY: null, pointerId: null, mouseDown: false, moveTimer: null, pendingMove: null, resizeObserver: null, requestedSize: null, phase: "loading",
+  } });
+  var dialog = document.createElement("dialog");
+  dialog.id = "vendor-login-browser";
+  dialog.className = "login-browser";
+  dialog.setAttribute("aria-labelledby", "login-browser-title");
+  dialog.innerHTML = '<header class="login-browser-header">' +
+    '<img class="login-browser-vendor" src="/' + (msg.vendor === "codex" ? 'codex-avatar.png' : 'claude-code-avatar.png') + '" alt="">' +
+    '<div class="login-browser-heading"><h2 id="login-browser-title"></h2>' +
+    '<span class="login-browser-origin">Opening sign-in page…</span></div>' +
+    '<div class="login-browser-actions">' +
+    '<button type="button" data-action="keyboard" class="login-browser-icon login-browser-keyboard-button" aria-label="Show keyboard" title="Show keyboard">' + iconHtml("keyboard") + '</button>' +
+    '<button type="button" data-action="reload" class="login-browser-icon" aria-label="Reload page" title="Reload page">' + iconHtml("rotate-cw") + '</button>' +
+    '<details class="login-browser-more"><summary aria-label="More sign-in options" title="More sign-in options">' + iconHtml("ellipsis") + '</summary>' +
+    '<div class="login-browser-menu"><button type="button" data-action="retry">' + iconHtml("refresh-cw") + '<span>Restart sign-in</span></button></div></details>' +
+    '<button type="button" data-action="cancel" class="login-browser-icon" aria-label="Cancel sign-in" title="Cancel sign-in">' + iconHtml("x") + '</button></div></header>' +
+    '<div class="login-browser-viewport"><canvas width="1000" height="720" aria-label="Remote sign-in page"></canvas>' +
+    '<div class="login-browser-loading"><span class="login-browser-spinner" aria-hidden="true"></span><strong>Opening your sign-in page</strong><span>This may take a moment.</span></div>' +
+    '<textarea class="login-browser-keyboard" aria-label="Type into the remote sign-in page" autocomplete="off" autocapitalize="off" spellcheck="false"></textarea></div>' +
+    '<footer class="login-browser-footer"><div class="login-browser-info"><div class="login-browser-status"><span class="login-browser-status-dot" aria-hidden="true"></span><p role="status">Preparing sign-in…</p></div>' +
+    '<p class="login-browser-privacy">Browser cookies are discarded when this session ends. You stay signed in to ' + (msg.vendor === "codex" ? 'Codex' : 'Claude') + ' after this browser closes.</p></div>' +
+    '<button type="button" data-action="terminal" class="login-browser-terminal">' + iconHtml("terminal") + '<span>Use terminal sign-in</span>' + iconHtml("arrow-up-right") + '</button></footer>';
+  dialog.querySelector("h2").textContent = title;
+  document.body.appendChild(dialog);
+  var keyboard = dialog.querySelector("textarea");
+  var canvas = dialog.querySelector("canvas");
+  function cancel() { cancelVendorLogin(msg.vendor); }
+  function restart(mode) {
+    var ws = getWs();
+    if (!ws || ws.readyState !== 1) {
+      dialog.querySelector('[role="status"]').textContent = "Reconnect to Clay before switching sign-in methods.";
+      return;
+    }
+    cancel();
+    requestVendorLogin(msg.vendor, { mode: mode });
+  }
+  dialog.querySelector('[data-action="cancel"]').onclick = cancel;
+  dialog.querySelector('[data-action="retry"]').onclick = function () { restart("browser"); };
+  dialog.querySelector('[data-action="terminal"]').onclick = function () { restart("terminal"); };
+  dialog.querySelector('[data-action="reload"]').onclick = function () { input({ kind: "reload" }); };
+  dialog.querySelector('[data-action="keyboard"]').onclick = function () { keyboard.focus(); };
+  dialog.addEventListener("cancel", function (event) {
+    event.preventDefault();
+    var menu = dialog.querySelector("details");
+    if (menu.open) { menu.open = false; menu.querySelector("summary").focus(); }
+    else cancel();
+  });
+  dialog.addEventListener("click", function (event) {
+    var menu = dialog.querySelector("details");
+    if (!menu.contains(event.target)) menu.open = false;
+  });
+  function pointerPoint(event) {
+    var rect = canvas.getBoundingClientRect();
+    return { x: (event.clientX - rect.left) * canvas.width / rect.width,
+      y: (event.clientY - rect.top) * canvas.height / rect.height };
+  }
+  function flushMove() {
+    var view = current();
+    if (!view || view.browserId !== msg.browserId) return;
+    clearTimeout(view.moveTimer);
+    var point = view.pendingMove;
+    store.set({ vendorLoginBrowser: Object.assign({}, view, { moveTimer: null, pendingMove: null }) });
+    if (point) input(Object.assign({ kind: "move" }, point));
+  }
+  canvas.addEventListener("pointermove", function (event) {
+    var view = current();
+    var ws = getWs();
+    if (!view || event.pointerType === "touch" || !ws || ws.bufferedAmount > 65536) return;
+    store.set({ vendorLoginBrowser: Object.assign({}, view, {
+      pendingMove: pointerPoint(event), moveTimer: view.moveTimer || setTimeout(flushMove, 40),
+    }) });
+  });
+  canvas.addEventListener("pointerdown", function (event) {
+    if (event.button !== 0 || !event.isPrimary) return;
+    flushMove();
+    var view = current();
+    if (!view || view.pointerId !== null) return;
+    canvas.setPointerCapture(event.pointerId);
+    var touch = event.pointerType === "touch";
+    store.set({ vendorLoginBrowser: Object.assign({}, view, {
+      pointerY: event.clientY, pointerId: event.pointerId, mouseDown: !touch,
+    }) });
+    if (!touch) input(Object.assign({ kind: "down" }, pointerPoint(event)));
+  });
+  function releasePointer(event, cancelled) {
+    var view = current();
+    if (!view || view.pointerId !== event.pointerId) return;
+    flushMove();
+    view = current();
+    var distance = view.pointerY === null ? 0 : view.pointerY - event.clientY;
+    if (view.mouseDown) input(Object.assign({ kind: "up" }, pointerPoint(event)));
+    else if (!cancelled) {
+      if (Math.abs(distance) > 12) input({ kind: "wheel", deltaY: distance * 2 });
+      else input(Object.assign({ kind: "click" }, pointerPoint(event)));
+    }
+    store.set({ vendorLoginBrowser: Object.assign({}, view, { pointerY: null, pointerId: null, mouseDown: false }) });
+    if (canvas.hasPointerCapture(event.pointerId)) canvas.releasePointerCapture(event.pointerId);
+    if (!cancelled && Math.abs(distance) <= 12) keyboard.focus({ preventScroll: true });
+  }
+  canvas.addEventListener("pointerup", function (event) { releasePointer(event, false); });
+  canvas.addEventListener("pointercancel", function (event) { releasePointer(event, true); });
+  canvas.addEventListener("lostpointercapture", function (event) { releasePointer(event, true); });
+  canvas.addEventListener("wheel", function (event) {
+    event.preventDefault();
+    input({ kind: "wheel", deltaY: event.deltaY });
+  }, { passive: false });
+  keyboard.addEventListener("keydown", function (event) {
+    var key = event.key;
+    if ((event.metaKey || event.ctrlKey) && key.toLowerCase() === "a") key = "ControlOrMeta+A";
+    else if (event.shiftKey && key === "Tab") key = "Shift+Tab";
+    if (/^(Tab|Shift\+Tab|Enter|Backspace|Delete|Escape|ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Home|End|ControlOrMeta\+A)$/.test(key)) {
+      event.preventDefault();
+      event.stopPropagation();
+      input({ kind: "key", key: key });
+    }
+  });
+  function insert() {
+    if (keyboard.value) input({ kind: "text", text: keyboard.value.slice(0, 4096) });
+    keyboard.value = "";
+  }
+  keyboard.addEventListener("input", function (event) { if (!event.isComposing) insert(); });
+  keyboard.addEventListener("compositionend", insert);
+  keyboard.addEventListener("paste", function (event) {
+    event.preventDefault();
+    input({ kind: "text", text: event.clipboardData.getData("text/plain").slice(0, 4096) });
+  });
+  dialog.showModal();
+  refreshIcons();
+  if (typeof ResizeObserver !== "undefined") {
+    var observer = new ResizeObserver(function () { resizeLoginBrowser(); });
+    store.set({ vendorLoginBrowser: Object.assign({}, current(), { resizeObserver: observer }) });
+    observer.observe(dialog.querySelector(".login-browser-viewport"));
+  }
+  send("vendor_login_browser_attach");
+  resizeLoginBrowser();
+}
+
+function resizeLoginBrowser(force) {
+  var view = current();
+  var element = document.querySelector("#vendor-login-browser .login-browser-viewport");
+  if (!view || !element) return null;
+  var size = { width: Math.max(320, Math.min(1000, Math.round(element.clientWidth))),
+    height: Math.max(360, Math.min(720, Math.round(element.clientHeight))) };
+  if (force || !view.requestedSize || view.requestedSize.width !== size.width || view.requestedSize.height !== size.height) {
+    store.set({ vendorLoginBrowser: Object.assign({}, view, { requestedSize: size }) });
+    input(Object.assign({ kind: "resize" }, size));
+  }
+  return size;
+}
+
+export function handleLoginBrowserMessage(msg) {
+  var view = current();
+  if (!view || msg.browserId !== view.browserId) return;
+  var dialog = document.getElementById("vendor-login-browser");
+  if (!dialog) return;
+  if (msg.type === "vendor_login_browser_status") {
+    dialog.querySelector('[role="status"]').textContent = msg.text;
+    dialog.dataset.phase = msg.phase || "loading";
+    store.set({ vendorLoginBrowser: Object.assign({}, view, { phase: msg.phase || "loading" }) });
+    return;
+  }
+  if (view.decoding || typeof msg.data !== "string" || msg.origin === "null") return;
+  store.set({ vendorLoginBrowser: Object.assign({}, view, { decoding: true }) });
+  var image = new Image();
+  function done() {
+    var active = current();
+    if (active && active.browserId === msg.browserId) store.set({ vendorLoginBrowser: Object.assign({}, active, { decoding: false }) });
+  }
+  image.onload = function () {
+    var active = current();
+    if (active && active.browserId === msg.browserId) {
+      var size = resizeLoginBrowser();
+      if (image.naturalWidth !== size.width || image.naturalHeight !== size.height) {
+        resizeLoginBrowser(true);
+        done();
+        return;
+      }
+      var canvas = dialog.querySelector("canvas");
+      canvas.width = image.naturalWidth;
+      canvas.height = image.naturalHeight;
+      canvas.getContext("2d").drawImage(image, 0, 0, canvas.width, canvas.height);
+      dialog.querySelector(".login-browser-loading").hidden = true;
+      var origin = dialog.querySelector(".login-browser-origin");
+      try { origin.textContent = new URL(msg.origin).host; } catch (e) { origin.textContent = "Sign-in page"; }
+      origin.title = msg.origin || "";
+    }
+    done();
+  };
+  image.onerror = done;
+  image.src = "data:image/jpeg;base64," + msg.data;
+}
+
+store.subscribe(function (state, previous) {
+  var view = state.vendorLoginBrowser;
+  if (!view) return;
+  if (state.currentSlug !== previous.currentSlug && state.currentSlug !== view.slug) { closeLoginBrowser(); return; }
+  if (state.connected !== previous.connected) {
+    if (state.connected) { send("vendor_login_browser_attach"); resizeLoginBrowser(true); }
+    else {
+      var dialog = document.getElementById("vendor-login-browser");
+      if (dialog) {
+        dialog.dataset.phase = "error";
+        dialog.querySelector('[role="status"]').textContent = "Connection lost. Reconnecting…";
+      }
+    }
+  }
+});

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

@@ -15,6 +15,7 @@ import { getWs } from './ws-ref.js';
 import { refreshIcons, iconHtml } from './icons.js';
 import { openTuiModal, closeTuiModal, getTuiModalTerminalId } from './tui-attention.js';
 import { forwardPaneAuthRequired } from './pane-bridge.js';
+import { openLoginBrowser, closeLoginBrowser } from './vendor-login-browser.js';
 
 // vendor -> { terminalId, startedAt } as last broadcast by the server.
 var activeFlows = Object.create(null);
@@ -106,7 +107,7 @@ function showLoginStartedBanner(vendor) {
   showLoginBanner({
     icon: "check-circle",
     title: vendorDisplayName(vendor) + " login started",
-    text: "Finish the sign-in in the terminal. Clay reloads the credentials on its own, so your sessions keep working - no new session needed.",
+    text: "Finish sign-in in the window below. Clay reconnects your sessions automatically.",
     onDismiss: function () { cancelVendorLogin(vendor); },
   });
 }
@@ -169,6 +170,7 @@ export function requestVendorLogin(vendor, opts) {
     vendor: target,
     auto: !!options.auto,
     sessionId: options.sessionId || store.get('activeSessionId') || null,
+    mode: options.mode || ((target === "claude" || target === "codex") ? "browser" : "terminal"),
   }));
   showLoginStartedBanner(target);
   return true;
@@ -177,13 +179,17 @@ export function requestVendorLogin(vendor, opts) {
 export function cancelVendorLogin(vendor) {
   var target = vendor || modalVendor;
   if (!target) return;
+  var flow = activeFlows[target];
+  var browser = store.get('vendorLoginBrowser');
+  var browserId = flow && flow.browserId || (browser && browser.vendor === target ? browser.browserId : null);
+  if (browser && browser.vendor === target) closeLoginBrowser();
   delete pendingStarts[target];
   delete activeFlows[target];
   clearLoginBanners();
   if (modalVendor === target) closeModalInternally();
   var ws = getWs();
   if (ws && ws.readyState === 1) {
-    ws.send(JSON.stringify({ type: "vendor_login_cancel", vendor: target }));
+    ws.send(JSON.stringify({ type: "vendor_login_cancel", vendor: target, browserId: browserId }));
   }
 }
 
@@ -215,7 +221,11 @@ export function handleVendorLoginReady(msg) {
   if (!msg || typeof msg.terminalId !== "number") return;
   var vendor = msg.vendor || "claude";
   delete pendingStarts[vendor];
-  activeFlows[vendor] = { terminalId: msg.terminalId, startedAt: Date.now() };
+  activeFlows[vendor] = { terminalId: msg.terminalId, startedAt: Date.now(), browserId: msg.browserId || null };
+  if (msg.browserId) {
+    openLoginBrowser(msg);
+    return;
+  }
 
   var slug = msg.slug || currentProjectSlug();
   if (!slug) return;
@@ -239,7 +249,7 @@ export function handleVendorLoginState(msg) {
   var next = Object.create(null);
   var flows = msg.flows || [];
   for (var i = 0; i < flows.length; i++) {
-    next[flows[i].vendor] = { terminalId: flows[i].terminalId, startedAt: flows[i].startedAt };
+    next[flows[i].vendor] = { terminalId: flows[i].terminalId, startedAt: flows[i].startedAt, browserId: flows[i].browserId || null };
     delete pendingStarts[flows[i].vendor];
   }
 
@@ -253,11 +263,18 @@ export function handleVendorLoginState(msg) {
     }
   }
   activeFlows = next;
+  var browser = store.get('vendorLoginBrowser');
+  if (browser && (!next[browser.vendor] || next[browser.vendor].browserId !== browser.browserId)) {
+    closeLoginBrowser();
+    clearLoginBanners();
+  }
 }
 
 export function handleAuthRefreshed(msg) {
   if (!msg) return;
   var vendor = msg.vendor || "claude";
+  var browser = store.get('vendorLoginBrowser');
+  if (browser && browser.vendor === vendor) closeLoginBrowser();
   var flow = activeFlows[vendor];
   delete pendingStarts[vendor];
   delete activeFlows[vendor];
@@ -269,6 +286,8 @@ export function handleAuthRefreshed(msg) {
 export function handleVendorLoginError(msg) {
   if (!msg) return;
   var vendor = msg.vendor || "claude";
+  var browser = store.get('vendorLoginBrowser');
+  if (browser && browser.vendor === vendor) closeLoginBrowser();
   delete pendingStarts[vendor];
   delete activeFlows[vendor];
   if (modalVendor === vendor) closeModalInternally();

package/lib/public/style.css

@@ -1,4 +1,5 @@
 @import url("css/session-github.css");
+@import url("css/vendor-login-browser.css");
 @import url("css/issues.css");
 @import url("css/base.css?v=20260828-type1");
 @import url("css/icon-strip.css?v=20260828-surfaces4");

package/lib/terminal.js

@@ -25,6 +25,10 @@ function createTerminal(cwd, cols, rows, osUserInfo, opts) {
 
   // Build a minimal, isolated environment (no daemon env leakage)
   var termEnv = buildUserEnv(osUserInfo);
+  if (opts && opts.loginBrowserEnv) {
+    termEnv.BROWSER = opts.loginBrowserEnv.BROWSER;
+    termEnv.CLAY_LOGIN_URL_FILE = opts.loginBrowserEnv.CLAY_LOGIN_URL_FILE;
+  }
   var spawnOpts = {
     name: "xterm-256color",
     cols: cols || 80,

package/lib/vendor-login-browser-flow.js

@@ -0,0 +1,46 @@
+var createLoginBrowser = require("./vendor-login-browser").createLoginBrowser;
+
+function attachBrowserLogin(ctx) {
+  function allowed(ws, flow) {
+    var userId = ws && ws._clayUser ? String(ws._clayUser.id) : null;
+    return userId === flow.ownerId && ctx.hasTerminalPermission(ws);
+  }
+  function prepare(ws, flow, identity) {
+    if (ctx.osUsers && !identity.osUserInfo) throw new Error("OS user identity is unavailable");
+    flow.ownerId = ws && ws._clayUser ? String(ws._clayUser.id) : null;
+    flow.browser = (ctx.createLoginBrowser || createLoginBrowser)({
+      ws: ws, vendor: flow.vendor, osUserInfo: identity.osUserInfo,
+      sendTo: ctx.sendTo,
+      canAccess: function (peer) { return allowed(peer, flow); },
+    });
+    flow.expiryTimer = setTimeout(function () { ctx.cancel(flow.key); }, 15 * 60 * 1000);
+    flow.expiryTimer.unref();
+  }
+  function handle(ws, msg, flows) {
+    var flow = flows[ctx.flowKey(ws, String(msg.vendor || "claude"))];
+    if (msg.type === "vendor_login_cancel" && msg.browserId && (!flow || !flow.browser)) return true;
+    if (typeof msg.type === "string" && msg.type.indexOf("term_") === 0) {
+      var vendors = Object.keys(flows);
+      for (var i = 0; i < vendors.length; i++) {
+        var candidate = flows[vendors[i]];
+        if (candidate.terminalId === msg.id && !allowed(ws, candidate)) return true;
+      }
+    }
+    if (msg.type === "vendor_login_browser_attach" || msg.type === "vendor_login_browser_input") {
+      if (!flow || !flow.browser || flow.browser.id !== msg.browserId || !allowed(ws, flow)) return true;
+      if (msg.type === "vendor_login_browser_attach") flow.browser.attach(ws);
+      else flow.browser.input(ws, msg.event);
+      return true;
+    }
+    if (flow && flow.browser && (msg.type === "vendor_login_start" || msg.type === "vendor_login_cancel")) {
+      if (!allowed(ws, flow) || (msg.type === "vendor_login_cancel" && msg.browserId !== flow.browser.id)) {
+        ctx.sendTo(ws, { type: "vendor_login_error", vendor: msg.vendor, error: "This sign-in belongs to another request. Reopen sign-in to continue." });
+        return true;
+      }
+    }
+    return false;
+  }
+  return { prepare: prepare, handle: handle };
+}
+
+module.exports = { attachBrowserLogin: attachBrowserLogin };

package/lib/vendor-login-browser-passkeys.js

@@ -0,0 +1,27 @@
+// Runs before page scripts in each remote sign-in page, frame, and popup.
+function disableLoginPasskeys() {
+  var credentials = window.CredentialsContainer && window.CredentialsContainer.prototype;
+  if (credentials) {
+    ["get", "create"].forEach(function (method) {
+      var original = credentials[method];
+      if (typeof original !== "function") return;
+      Object.defineProperty(credentials, method, {
+        configurable: true,
+        writable: true,
+        value: function (options) {
+          if (options && "publicKey" in Object(options)) {
+            return Promise.reject(new DOMException(
+              "Passkeys are unavailable in this remote sign-in browser. Choose another sign-in method.",
+              "NotSupportedError"
+            ));
+          }
+          return original.apply(this, arguments);
+        },
+      });
+    });
+  }
+  // Feature detection should choose password/email instead of host-native authenticator UI.
+  Object.defineProperty(window, "PublicKeyCredential", { configurable: true, writable: true, value: undefined });
+}
+
+module.exports = { disableLoginPasskeys: disableLoginPasskeys };

package/lib/vendor-login-browser-worker.js

@@ -0,0 +1,149 @@
+// Runs as the same OS identity as the login CLI. Only the human supplies input.
+var readline = require("readline");
+var spawn = require("child_process").spawn;
+var chromium = require("playwright").chromium;
+var browser = null;
+var page = null;
+var installing = null;
+var viewing = true;
+var closing = false;
+var captureTimer = null;
+var inputQueue = Promise.resolve();
+var queued = 0;
+var viewport = { width: 1000, height: 720 };
+
+function emit(message) {
+  if (!closing && process.stdout.writableLength < 1024 * 1024) process.stdout.write(JSON.stringify(message) + "\n");
+}
+
+function status(text, phase) { emit({ type: "status", text: text, phase: phase || "loading" }); }
+
+async function launch() {
+  var channels = ["chrome", "msedge", null];
+  for (var i = 0; i < channels.length; i++) {
+    try {
+      return await chromium.launch({ channel: channels[i] || undefined, headless: true, chromiumSandbox: true, timeout: 20000 });
+    } catch (e) {
+      if (closing) throw e;
+    }
+  }
+  status("Preparing the sign-in browser. The first download may take a few minutes…");
+  await new Promise(function (resolve, reject) {
+    installing = spawn(process.execPath, [require("path").join(require.resolve("playwright/package.json"), "../cli.js"), "install", "chromium"], { stdio: "ignore", env: process.env });
+    var timer = setTimeout(function () { installing.kill(); reject(new Error("Install timed out")); }, 180000);
+    installing.once("error", function (err) { clearTimeout(timer); reject(err); });
+    installing.once("exit", function (code) {
+      clearTimeout(timer);
+      installing = null;
+      if (code === 0) resolve(); else reject(new Error("Browser installation failed"));
+    });
+  });
+  if (closing) throw new Error("Closed");
+  return chromium.launch({ headless: true, chromiumSandbox: true, timeout: 20000 });
+}
+
+async function capture() {
+  if (closing) return;
+  try {
+    if (page && !page.isClosed() && viewing && process.stdout.writableLength < 262144) {
+      var current = page;
+      var data = await current.screenshot({ type: "jpeg", quality: 65, caret: "initial", timeout: 3000 });
+      if (current === page) emit({ type: "frame", data: data.toString("base64"), origin: new URL(current.url()).origin,
+        width: current.viewportSize().width, height: current.viewportSize().height });
+    }
+  } catch (e) {}
+  if (!closing) captureTimer = setTimeout(capture, 250);
+}
+
+async function start(url) {
+  browser = await launch();
+  if (closing) { await browser.close(); return; }
+  var session = await browser.newBrowserCDPSession();
+  var version;
+  try { version = await session.send("Browser.getVersion"); }
+  finally { await session.detach(); }
+  // Preserve the native version/platform and replace only the headless product token.
+  var userAgent = version.userAgent.replace("HeadlessChrome/", "Chrome/");
+  var context = await browser.newContext({ viewport: viewport, acceptDownloads: false, userAgent: userAgent });
+  await context.addInitScript(require("./vendor-login-browser-passkeys").disableLoginPasskeys);
+  var callback = new URL(new URL(url).searchParams.get("redirect_uri"));
+  await context.route("**/*", function (route) {
+    var target = new URL(route.request().url());
+    if (target.protocol === "https:" || (target.origin === callback.origin && target.pathname === callback.pathname)) return route.continue();
+    return route.abort();
+  });
+  context.on("page", function (opened) {
+    page = opened;
+    opened.setViewportSize(viewport).catch(function () {});
+    opened.on("download", function (download) { download.cancel().catch(function () {}); });
+    opened.on("close", function () {
+      var pages = context.pages();
+      page = pages.length ? pages[pages.length - 1] : null;
+    });
+  });
+  page = await context.newPage();
+  capture();
+  status("Opening sign-in page…");
+  await page.goto(url, { waitUntil: "domcontentloaded", timeout: 60000 });
+  status("Sign in to connect your account.", "ready");
+}
+
+async function input(event) {
+  if (!page || page.isClosed() || closing) return;
+  if (["move", "down", "up"].indexOf(event.kind) >= 0 && Number.isFinite(event.x) && Number.isFinite(event.y)) {
+    var pointerSize = page.viewportSize();
+    var x = Math.max(0, Math.min(pointerSize.width - 1, event.x));
+    var y = Math.max(0, Math.min(pointerSize.height - 1, event.y));
+    await page.mouse.move(x, y);
+    if (event.kind === "down") await page.mouse.down();
+    if (event.kind === "up") await page.mouse.up();
+  } else if (event.kind === "click" && Number.isFinite(event.x) && Number.isFinite(event.y)) {
+    var size = page.viewportSize();
+    await page.mouse.click(Math.max(0, Math.min(size.width - 1, event.x)), Math.max(0, Math.min(size.height - 1, event.y)));
+  } else if (event.kind === "wheel" && Number.isFinite(event.deltaY)) {
+    await page.mouse.wheel(0, Math.max(-1500, Math.min(1500, event.deltaY)));
+  } else if (event.kind === "text" && typeof event.text === "string" && event.text.length <= 4096) {
+    await page.keyboard.insertText(event.text);
+  } else if (event.kind === "key" && /^(Tab|Shift\+Tab|Enter|Backspace|Delete|Escape|ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Home|End|ControlOrMeta\+A)$/.test(event.key)) {
+    await page.keyboard.press(event.key);
+  } else if (event.kind === "reload") {
+    await page.reload({ waitUntil: "domcontentloaded", timeout: 30000 });
+  } else if (event.kind === "resize" && Number.isFinite(event.width) && Number.isFinite(event.height)) {
+    viewport = { width: Math.round(Math.max(320, Math.min(1000, event.width))), height: Math.round(Math.max(360, Math.min(720, event.height))) };
+    await page.setViewportSize(viewport);
+  }
+}
+
+async function close() {
+  if (closing) return;
+  closing = true;
+  clearTimeout(captureTimer);
+  if (installing) installing.kill();
+  if (browser) await browser.close().catch(function () {});
+  process.exit(0);
+}
+
+var started = false;
+var lines = readline.createInterface({ input: process.stdin });
+lines.on("line", function (line) {
+  if (line.length > 20000 || closing) return;
+  var message;
+  try { message = JSON.parse(line); } catch (e) { return; }
+  if (message.type === "start" && !started) {
+    started = true;
+    start(message.url).catch(function () {
+      status("Unable to open the sign-in browser. The host may need browser libraries or sandbox support. Use terminal sign-in to continue.", "error");
+    });
+  } else if (message.type === "viewing") {
+    viewing = !!message.value;
+  } else if (message.type === "input" && message.event && queued < 100) {
+    if (message.event.kind === "move" && queued >= 10) return;
+    queued++;
+    inputQueue = inputQueue.then(function () { return input(message.event); }).catch(function () {
+      status("The page did not respond. Try reloading.", "error");
+    }).finally(function () { queued--; });
+  }
+});
+lines.on("close", close);
+process.on("SIGTERM", close);
+process.on("SIGINT", close);

package/lib/vendor-login-browser.js

@@ -0,0 +1,162 @@
+// Private, human-controlled browser transport for a single vendor login.
+var fs = require("fs");
+var os = require("os");
+var path = require("path");
+var crypto = require("crypto");
+var spawn = require("child_process").spawn;
+var buildUserEnv = require("./build-user-env").buildUserEnv;
+var wrapSpawnAsUser = require("./os-users").wrapSpawnAsUser;
+
+function loginUrl(value, vendor) {
+  try {
+    var url = new URL(value);
+    var hosts = vendor === "codex" ? ["auth.openai.com"] : ["claude.ai", "claude.com", "console.anthropic.com", "platform.claude.com"];
+    if (url.protocol !== "https:" || url.username || url.password || hosts.indexOf(url.hostname) < 0) return null;
+    if (!url.searchParams.get("state") || !url.searchParams.get("code_challenge")) return null;
+    var callback = new URL(url.searchParams.get("redirect_uri"));
+    if (callback.protocol !== "http:" || ["localhost", "127.0.0.1", "[::1]"].indexOf(callback.hostname) < 0) return null;
+    return url.href;
+  } catch (e) { return null; }
+}
+
+function createLoginBrowser(options) {
+  var id = crypto.randomUUID();
+  var dir = fs.mkdtempSync(path.join(os.tmpdir(), "clay-login-"));
+  fs.chmodSync(dir, 0o700);
+  var info = options.osUserInfo;
+  if (info) fs.chownSync(dir, info.uid, info.gid);
+  var urlFile = path.join(dir, "url");
+  var opener = path.resolve(__dirname, "../bin/login-browser-open.js");
+  var wrapper = path.join(dir, process.platform === "win32" ? "open.cmd" : "open");
+  var quote = function (value) { return "'" + value.replace(/'/g, "'\\''") + "'"; };
+  var script = process.platform === "win32"
+    ? '@"' + process.execPath + '" "' + opener + '" %*\r\n'
+    : "#!/bin/sh\nexec " + quote(process.execPath) + " " + quote(opener) + ' "$@"\n';
+  fs.writeFileSync(wrapper, script, { mode: 0o700 });
+  if (info) fs.chownSync(wrapper, info.uid, info.gid);
+  var child = null;
+  var peer = options.ws;
+  var closed = false;
+  var started = false;
+  var status = "Waiting for the sign-in page…";
+  var statusPhase = "loading";
+  var tail = "";
+  var pollBusy = false;
+  var waitTimer = setTimeout(function () {
+    if (!started && !closed) {
+      status = "Still waiting for the CLI sign-in page. Use terminal sign-in if it needs attention.";
+      send({ type: "vendor_login_browser_status", text: status, phase: statusPhase });
+    }
+  }, 30000);
+  waitTimer.unref();
+
+  function send(message) {
+    if (closed || !peer || peer.readyState !== 1 || !options.canAccess(peer)) return;
+    if (message.type === "vendor_login_browser_frame" && peer.bufferedAmount > 1024 * 1024) return;
+    options.sendTo(peer, Object.assign({ vendor: options.vendor, browserId: id }, message));
+  }
+  function write(message) {
+    if (child && child.stdin.writable && child.stdin.writableLength < 65536) child.stdin.write(JSON.stringify(message) + "\n");
+  }
+  function start(url) {
+    if (closed || started) return;
+    started = true;
+    clearTimeout(waitTimer);
+    status = "Opening a private sign-in browser…";
+    send({ type: "vendor_login_browser_status", text: status, phase: statusPhase });
+    var env = buildUserEnv(info);
+    if (process.platform === "win32" && !info) {
+      ["SystemRoot", "WINDIR", "TEMP", "TMP", "LOCALAPPDATA", "APPDATA", "USERPROFILE", "COMSPEC", "PATHEXT"].forEach(function (key) {
+        if (process.env[key]) env[key] = process.env[key];
+      });
+    }
+    var opts = { cwd: info ? info.home : os.homedir(), env: env, stdio: ["pipe", "pipe", "ignore"] };
+    if (info) { opts.uid = info.uid; opts.gid = info.gid; }
+    var spec = wrapSpawnAsUser(process.execPath, [path.join(__dirname, "vendor-login-browser-worker.js")], opts);
+    child = spawn(spec.command, spec.args, spec.options);
+    var buffer = "";
+    child.stdout.setEncoding("utf8");
+    child.stdout.on("data", function (chunk) {
+      buffer += chunk;
+      if (buffer.length > 4 * 1024 * 1024) { child.kill(); return; }
+      var at;
+      while ((at = buffer.indexOf("\n")) >= 0) {
+        var line = buffer.slice(0, at);
+        buffer = buffer.slice(at + 1);
+        try {
+          var message = JSON.parse(line);
+          if (message.type === "status") {
+            status = message.text;
+            statusPhase = message.phase || "loading";
+            send({ type: "vendor_login_browser_status", text: status, phase: statusPhase });
+          } else if (message.type === "frame") {
+            send({ type: "vendor_login_browser_frame", data: message.data, origin: message.origin, width: message.width, height: message.height });
+            write({ type: "viewing", value: !!(peer && peer.readyState === 1 && options.canAccess(peer)) });
+          }
+        } catch (e) {}
+      }
+    });
+    child.on("error", function () {
+      statusPhase = "error";
+      status = "The sign-in browser could not start. Use terminal sign-in to continue.";
+      send({ type: "vendor_login_browser_status", text: status, phase: statusPhase });
+    });
+    child.on("exit", function () {
+      if (closed) return;
+      statusPhase = "error";
+      status = "The sign-in browser closed. You can retry or use terminal sign-in.";
+      send({ type: "vendor_login_browser_status", text: status, phase: statusPhase });
+    });
+    child.stdin.on("error", function () {});
+    write({ type: "start", url: url });
+  }
+  function acceptUrl(value) {
+    var url = loginUrl(value, options.vendor);
+    if (url) start(url);
+  }
+  var timer = setInterval(function () {
+    if (closed || started || pollBusy) return;
+    pollBusy = true;
+    fs.readFile(urlFile, "utf8", function (err, value) {
+      pollBusy = false;
+      if (!err && value.length <= 16384) acceptUrl(value);
+    });
+  }, 250);
+  timer.unref();
+  return {
+    id: id,
+    env: { BROWSER: wrapper, CLAY_LOGIN_URL_FILE: urlFile },
+    output: function (chunk) {
+      // Codex also prints the complete URL when the platform opener ignores BROWSER.
+      tail = (tail + chunk).slice(-32768);
+      var matches = tail.match(/https:\/\/[^\s\x1b<>"']+(?=[\s\x1b<>"'])/g) || [];
+      for (var i = 0; i < matches.length; i++) acceptUrl(matches[i]);
+    },
+    attach: function (ws) {
+      peer = ws;
+      send({ type: "vendor_login_browser_status", text: status, phase: statusPhase });
+      write({ type: "viewing", value: true });
+    },
+    input: function (ws, event) {
+      if (ws !== peer || !options.canAccess(ws) || !event || typeof event !== "object") return;
+      write({ type: "input", event: event });
+    },
+    close: function () {
+      if (closed) return;
+      closed = true;
+      clearInterval(timer);
+      clearTimeout(waitTimer);
+      if (child) {
+        child.stdin.end();
+        var killTimer = setTimeout(function () { child.kill("SIGKILL"); }, 5000);
+        killTimer.unref();
+        child.once("exit", function () { clearTimeout(killTimer); });
+      }
+      fs.rmSync(dir, { recursive: true, force: true });
+      tail = "";
+      peer = null;
+    },
+  };
+}
+
+module.exports = { createLoginBrowser: createLoginBrowser, loginUrl: loginUrl };

package/lib/ws-schema.js

@@ -220,6 +220,10 @@ var schema = {
   // -----------------------------------------------------------------------
   "auth_required":            { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Authentication required (e.g. API key needed)" },
   "vendor_login_start":       { direction: "c2s", handler: "lib/project-vendor-login.js", description: "Start (or re-attach to) the per-vendor login terminal" },
+  "vendor_login_browser_attach": { direction: "c2s", handler: "lib/vendor-login-browser-flow.js", description: "Attach the sign-in owner to their private browser" },
+  "vendor_login_browser_input": { direction: "c2s", handler: "lib/vendor-login-browser-flow.js", description: "Send human input to the private sign-in browser" },
+  "vendor_login_browser_frame": { direction: "s2c", handler: "lib/public/modules/vendor-login-browser.js", description: "Private sign-in viewport; never recorded in conversation history" },
+  "vendor_login_browser_status": { direction: "s2c", handler: "lib/public/modules/vendor-login-browser.js", description: "Private sign-in browser status" },
   "vendor_login_cancel":      { direction: "c2s", handler: "lib/project-vendor-login.js", description: "Dismiss the login flow and kill its terminal" },
   "vendor_login_state_request": { direction: "c2s", handler: "lib/project-vendor-login.js", description: "Ask for the project's active login flows" },
   "vendor_login_ready":       { direction: "s2c", handler: "lib/public/modules/vendor-login.js", description: "Login terminal is available; open/re-attach the modal to it" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "4.7.1-beta.5",
+  "version": "4.8.0-beta.1",
   "description": "Self-hosted team workspace for Claude Code and Codex. Multi-user, browser-based, with persistent AI mates.",
   "bin": {
     "clay-server": "./bin/cli.js"
@@ -53,6 +53,7 @@
     "@seald-io/nedb": "^4.1.2",
     "imapflow": "^1.7.8",
     "nodemailer": "^9.1.1",
+    "playwright": "1.63.0",
     "qrcode-terminal": "^0.12.0",
     "web-push": "^3.6.7",
     "ws": "^8.18.0"