clay-server 4.7.1-beta.4 → 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…";
+      }
+    }
+  }
+});