clay-server 4.0.0-beta.1 → 4.0.0-beta.3

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

@@ -37,7 +37,7 @@ import { updateSettingsStats, updateDaemonConfig, handleSetPinResult, handleKeep
 import { handleTermList, handleTermCreated, sendTerminalCommand, handleTermOutput, handleTermResized, handleTermExited, handleTermClosed } from './terminal.js';
 import { attachTuiView, detachTuiView, setTuiSuspendedView, tuiHandleTermOutput, tuiHandleTermResized, tuiHandleTermExited, tuiHandleTermClosed } from './session-tui-view.js';
 import { handleTuiTranscriptState } from './tui-grab.js';
-import { tuiModalHandleTermOutput, tuiModalHandleTermResized, tuiModalHandleTermExited, tuiModalHandleTermClosed, openTuiModal } from './tui-attention.js';
+import { tuiModalHandleTermOutput, tuiModalHandleTermResized, tuiModalHandleTermExited, tuiModalHandleTermClosed } from './tui-attention.js';
 import { updateTerminalList, handleContextSourcesState, updateEmailAccountList, updateEmailUnreadCounts, handleEmailTestResult, handleEmailAddResult, handleEmailRemoveResult } from './context-sources.js';
 import { refreshEmailSettings } from './user-settings.js';
 import { handleNotesList, handleNoteCreated, handleNoteUpdated, handleNoteDeleted, handleNoteWritten } from './sticky-notes.js';
@@ -72,7 +72,8 @@ import { handleRemoteCursorMove, handleRemoteCursorLeave, handleRemoteSelection,
 import { showLoopBanner, updateLoopBanner, updateLoopInputVisibility, showRalphApprovalBar, updateRalphApprovalStatus, openRalphPreviewModal, showExecModal, updateExecModalStatus } from './app-loop-ui.js';
 import { showDebateSticky, showDebateConcludeConfirm, showDebateUserFloor, exitDebateFloorMode, exitDebateConcludeMode, exitDebateEndedMode, updateDebateRound, renderDebateUserFloorDone } from './app-debate-ui.js';
 import { handleSkillInstallWs } from './app-skills-install.js';
-import { handleNotificationsState, handleNotificationCreated, handleNotificationDismissed, handleNotificationDismissedAll, showUpdateBanner, autoStartLoginIfNeeded } from './app-notifications.js';
+import { handleNotificationsState, handleNotificationCreated, handleNotificationDismissed, handleNotificationDismissedAll, showUpdateBanner } from './app-notifications.js';
+import { autoStartLoginIfNeeded, handleVendorLoginReady, handleVendorLoginState, handleVendorLoginError, handleAuthRefreshed } from './vendor-login.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';
 
@@ -1299,11 +1300,28 @@ export function processMessage(msg) {
         appendDelta((msg.text || "Authentication required.") + "\n");
         setStatus("connected");
         if (!store.get('loopActive')) enableMainInput();
-        // Auto-open the login modal terminal when the session can self-login.
-        // No-op otherwise (the auth_required banner remains the manual path).
+        // Open the login flow for this vendor. The server keeps exactly one
+        // login terminal per vendor, so repeat auth_required events (other
+        // sessions, split panes, a 401 retry burst) do not stack up.
         autoStartLoginIfNeeded(msg);
         break;
 
+      case "vendor_login_ready":
+        handleVendorLoginReady(msg);
+        break;
+
+      case "vendor_login_state":
+        handleVendorLoginState(msg);
+        break;
+
+      case "vendor_login_error":
+        handleVendorLoginError(msg);
+        break;
+
+      case "auth_refreshed":
+        handleAuthRefreshed(msg);
+        break;
+
       case "rate_limit":
         handleRateLimitEvent(msg);
         break;
@@ -1492,19 +1510,8 @@ export function processMessage(msg) {
         break;
 
       case "term_created":
-        // Login-modal path: the terminal was created with the login command as
-        // its initial input; attach the modal dialog to it (replays scrollback
-        // so the login URL is visible) instead of the sidebar terminal.
-        if (store.get('pendingLoginModal')) {
-          var _lm = store.get('pendingLoginModal');
-          store.set({ pendingLoginModal: null });
-          openTuiModal(msg.id, _lm.slug, {
-            sessionTitle: (VENDOR_NAMES[_lm.vendor] || "Claude Code") + " login",
-            projectName: _lm.slug,
-            compact: true,
-          });
-          break;
-        }
+        // Login terminals never come through here: they are created by the
+        // server-owned flow and announced with vendor_login_ready instead.
         handleTermCreated(msg);
         if (store.get('pendingTermCommand')) {
           var cmd = store.get('pendingTermCommand');

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

@@ -10,8 +10,8 @@ import { showHomeHub } from './app-home-hub.js';
 import { openHomeChat } from './home-mate-chat.js';
 import { getCachedProjects, switchProject, renderProjectList } from './app-projects.js';
 import { mateAvatarUrl, userAvatarUrl } from './avatar.js';
-import { openTerminal } from './terminal.js';
 import { openTuiModal } from './tui-attention.js';
+import { requestVendorLogin } from './vendor-login.js';
 import { startUrgentBlink, stopUrgentBlink } from './app-favicon.js';
 import { playDoneSound, isNotifSoundEnabled } from './notifications.js';
 var notifications = [];
@@ -47,7 +47,6 @@ var pendingTuiTotal = 0;
 // (next hour) acts as a fresh ping.
 var pendingUpdateMsg = null;
 var activeAuthRequiredMsg = null;
-var authReminderVisible = false;
 
 // ========================================================
 // Init
@@ -91,7 +90,6 @@ function showAllBanners() {
   }
 
   if (activeAuthRequiredMsg) showAuthRequiredBanner(activeAuthRequiredMsg);
-  if (authReminderVisible) showLoginReminderBanner();
 
   // Check if any banner actually got rendered (update/auth banners can be suppressed)
   var hasVisibleBanner = bannerContainer.children.length > 0;
@@ -266,8 +264,9 @@ function showBanner(notif, autoDismissMs) {
           removeBanner(banner);
           dismissNotif(notif.id);
           var authMeta = notif.meta || {};
-          startLoginInModal(authMeta.loginCommand || getVendorLoginCommand(authMeta.vendor || "claude"), authMeta.vendor || "claude");
-          showLoginReminderBanner();
+          // Deliberate click: re-attach to a live login terminal instead of
+          // spawning a second one (the server dedups per vendor).
+          requestVendorLogin(authMeta.vendor || "claude", { sessionId: notif.sessionId || null });
         });
       }
     }
@@ -325,118 +324,6 @@ function showBanner(notif, autoDismissMs) {
   }
 }
 
-// Open the login terminal as a modal dialog (the same modal used for TUI
-// attention), running the vendor login command. The terminal is created with
-// the command as its initial input, so when the modal attaches it replays the
-// scrollback and the user sees the login URL / prompts immediately.
-// Falls back to the sidebar terminal if the current project slug is unknown
-// (the modal needs a slug to open its own WS to the project).
-function currentProjectSlug() {
-  var slug = store.get('currentSlug') || "";
-  if (slug) return slug;
-  // Fallback: derive from the URL (/p/<slug>/...).
-  try {
-    var m = (window.location.pathname || "").match(/^\/p\/([a-z0-9_-]+)/);
-    if (m) return m[1];
-  } catch (e) {}
-  return "";
-}
-
-function startLoginInModal(loginCommand, vendor) {
-  if (authReminderVisible) return;
-  var ws = getWs();
-  if (!ws || ws.readyState !== 1) return;
-  var cmd = loginCommand || getVendorLoginCommand(vendor);
-  var slug = currentProjectSlug();
-  if (!slug) { startLoginCommand(cmd); return; }
-  store.set({ pendingLoginModal: { slug: slug, vendor: vendor || "claude" } });
-  ws.send(JSON.stringify({
-    type: "term_create",
-    cols: 100,
-    rows: 30,
-    initialCommand: cmd + "\n",
-  }));
-}
-
-// Sidebar-terminal fallback (used when no slug is available for the modal).
-function startLoginCommand(loginCommand) {
-  if (authReminderVisible) return;
-  var ws = getWs();
-  if (!ws || ws.readyState !== 1) return;
-  var termCommand = (loginCommand || "claude login") + "\n";
-  store.set({ pendingTermCommand: termCommand });
-  ws.send(JSON.stringify({ type: "term_create", cols: 80, rows: 24 }));
-  openTerminal();
-}
-
-// Auto-open the login modal and run the login command when the server reports
-// the vendor isn't logged in. The popup terminal runs as the connected user's
-// own OS identity (term_create -> getOsUserInfoForWs), so login always targets
-// the right account — we pop it unconditionally rather than gating on
-// canAutoLogin. Idempotent: startLoginInModal is guarded by authReminderVisible
-// so repeat auth_required events no-op.
-export function autoStartLoginIfNeeded(msg) {
-  if (!msg) return false;
-  if (authReminderVisible) return false;
-  var vendor = msg.vendor || "claude";
-  var cmd = msg.loginCommand
-    || getVendorLoginCommand(vendor);
-  startLoginInModal(cmd, vendor);
-  showLoginReminderBanner();
-  return true;
-}
-
-function showLoginReminderBanner() {
-  if (!bannerContainer) return;
-  authReminderVisible = true;
-  var existing = bannerContainer.querySelector('[data-auth-reminder="true"]');
-  if (existing) removeBanner(existing);
-  var banner = document.createElement("div");
-  banner.className = "notif-banner notif-banner-update";
-  banner.setAttribute("data-notif-id", "_auth_reminder");
-  banner.setAttribute("data-auth-reminder", "true");
-  banner.innerHTML =
-    '<div class="notif-banner-icon">' + iconHtml("check-circle") + '</div>' +
-    '<div class="notif-banner-body">' +
-      '<div class="notif-banner-project">CLAY</div>' +
-      '<div class="notif-banner-title">Login started</div>' +
-      '<div class="notif-banner-text">After the login completes, open a new session so Clay picks up the fresh auth state.</div>' +
-      '<div class="notif-banner-actions">' +
-        '<button class="notif-banner-new-session notif-banner-update-now">Open new session</button>' +
-      '</div>' +
-    '</div>' +
-    '<button class="notif-banner-close">' + iconHtml("x") + '</button>';
-
-  bannerContainer.appendChild(banner);
-  refreshIcons();
-
-  requestAnimationFrame(function () {
-    banner.classList.add("show");
-  });
-
-  var newSessionBtn = banner.querySelector(".notif-banner-new-session");
-  if (newSessionBtn) {
-    newSessionBtn.addEventListener("click", function (e) {
-      e.stopPropagation();
-      authReminderVisible = false;
-      var ws = getWs();
-      if (ws && ws.readyState === 1) {
-        ws.send(JSON.stringify({ type: "new_session" }));
-      }
-      removeBanner(banner);
-    });
-  }
-
-  var closeBtn = banner.querySelector(".notif-banner-close");
-  if (closeBtn) {
-    closeBtn.addEventListener("click", function (e) {
-      e.stopPropagation();
-      authReminderVisible = false;
-      removeBanner(banner);
-    });
-  }
-}
-
 export function showAuthRequiredBanner(msg) {
   if (!bannerContainer) return;
   var vendor = (msg && (msg.vendor || (msg.meta && msg.meta.vendor))) || "claude";

package/lib/public/modules/background-tasks-ui.js

@@ -1,55 +1,149 @@
+// background-tasks-ui.js - Background task status line above the composer.
+//
+// Collapsed it reads as a quiet status line, not a button demanding attention:
+// a muted activity indicator, a count, and a chevron. Expanding lists each task
+// with its elapsed time and a Stop control.
+//
+// Elapsed time comes from `started_at` (epoch ms) which the server stamps in
+// lib/background-task-timing.js. The ticker only runs while the list is
+// expanded, so a collapsed bar costs nothing.
+
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { escapeHtml } from './utils.js';
+import { iconHtml, refreshIcons } from './icons.js';
 
 var expanded = false;
+var elapsedTimer = null;
+
+// Lucide icon per vendor-neutral task type (see normalizeBackgroundTasks in
+// yoke/adapters/claude.js for where these types are assigned).
+var TASK_TYPE_ICONS = { shell: "terminal", agent: "sparkles", other: "circle-dot" };
 
 export function initBackgroundTasksUi() {
-  store.subscribe(function(state, prev) {
+  store.subscribe(function (state, prev) {
     if (state.activeBackgroundTasks !== prev.activeBackgroundTasks) renderBackgroundTasks();
   });
   renderBackgroundTasks();
 }
 
+// "45s", "2m 14s", "1h 03m" - short enough to sit in a row without wrapping.
+export function formatElapsed(startedAt, now) {
+  if (typeof startedAt !== "number" || !isFinite(startedAt) || startedAt <= 0) return "";
+  var current = typeof now === "number" ? now : Date.now();
+  var totalSeconds = Math.floor((current - startedAt) / 1000);
+  if (totalSeconds < 0) totalSeconds = 0;
+  if (totalSeconds < 60) return totalSeconds + "s";
+  var minutes = Math.floor(totalSeconds / 60);
+  var seconds = totalSeconds % 60;
+  if (minutes < 60) return minutes + "m " + pad(seconds) + "s";
+  var hours = Math.floor(minutes / 60);
+  return hours + "h " + pad(minutes % 60) + "m";
+}
+
+function pad(value) {
+  return value < 10 ? "0" + value : String(value);
+}
+
+function stopElapsedTimer() {
+  if (!elapsedTimer) return;
+  clearInterval(elapsedTimer);
+  elapsedTimer = null;
+}
+
+// Ticks at most once a second and only touches the time cells, so expanding
+// the list never re-renders (and never steals focus from) the rows.
+function startElapsedTimer() {
+  stopElapsedTimer();
+  elapsedTimer = setInterval(updateElapsedCells, 1000);
+}
+
+function updateElapsedCells() {
+  var bar = document.getElementById('background-tasks-bar');
+  if (!bar || !expanded) {
+    stopElapsedTimer();
+    return;
+  }
+  var now = Date.now();
+  var cells = bar.querySelectorAll('.background-task-elapsed');
+  for (var i = 0; i < cells.length; i++) {
+    var startedAt = Number(cells[i].dataset.startedAt);
+    cells[i].textContent = formatElapsed(startedAt, now);
+  }
+}
+
+function activityDotsHtml() {
+  return '<span class="background-tasks-activity" aria-hidden="true"><i></i><i></i><i></i></span>';
+}
+
+function taskRowHtml(task, now) {
+  var taskType = task.task_type || 'other';
+  var icon = TASK_TYPE_ICONS[taskType] || TASK_TYPE_ICONS.other;
+  var description = task.description || 'Background task';
+  var startedAt = typeof task.started_at === 'number' ? task.started_at : 0;
+  var elapsed = formatElapsed(startedAt, now);
+  return '<div class="background-task-row">' +
+    '<span class="background-task-icon" title="' + escapeHtml(taskType) + '">' + iconHtml(icon) + '</span>' +
+    '<span class="background-task-description" title="' + escapeHtml(description) + '">' +
+      escapeHtml(description) + '</span>' +
+    '<span class="background-task-meta">' +
+      '<span class="background-task-type">' + escapeHtml(taskType) + '</span>' +
+      '<span class="background-task-elapsed" data-started-at="' + startedAt + '">' + escapeHtml(elapsed) + '</span>' +
+    '</span>' +
+    '<button type="button" class="background-task-stop" data-task-id="' + escapeHtml(task.task_id || '') + '" ' +
+      'aria-label="Stop ' + escapeHtml(description) + '">Stop</button>' +
+    '</div>';
+}
+
 function renderBackgroundTasks() {
   var tasks = store.get('activeBackgroundTasks') || [];
   var existing = document.getElementById('background-tasks-bar');
   if (tasks.length === 0) {
     if (existing) existing.remove();
     expanded = false;
+    stopElapsedTimer();
     return;
   }
   var inputArea = document.getElementById('input-area');
   if (!inputArea || !inputArea.parentNode) return;
+
   var bar = existing || document.createElement('div');
   bar.id = 'background-tasks-bar';
-  bar.className = 'background-tasks-bar';
+  bar.className = 'background-tasks-bar' + (expanded ? ' expanded' : '');
+
   var taskLabel = tasks.length === 1 ? 'background task' : 'background tasks';
-  var html = '<button type="button" class="background-tasks-toggle" aria-expanded="' + expanded + '">' +
-    '<span aria-hidden="true">⏳</span><span class="background-tasks-chip">' + tasks.length + '</span>' +
-    '<span>' + tasks.length + ' ' + taskLabel + '</span></button>';
+  var summary = tasks.length + ' ' + taskLabel;
+  var html = '<button type="button" class="background-tasks-toggle" aria-expanded="' + expanded + '"' +
+    ' aria-controls="background-tasks-list" aria-label="' + summary + ', ' +
+    (expanded ? 'collapse' : 'expand') + ' details">' +
+    activityDotsHtml() +
+    '<span class="background-tasks-summary">' + summary + '</span>' +
+    '<span class="background-tasks-chevron" aria-hidden="true">' + iconHtml('chevron-right') + '</span>' +
+    '</button>';
+
   if (expanded) {
-    html += '<div class="background-tasks-list">';
-    for (var i = 0; i < tasks.length; i++) {
-      var task = tasks[i];
-      html += '<div class="background-task-row"><span class="background-task-description" title="' + escapeHtml(task.description || '') + '">' +
-        escapeHtml(task.description || 'Background task') + '</span><span class="background-task-type">' +
-        escapeHtml(task.task_type || 'other') + '</span><button type="button" class="background-task-stop" data-task-id="' +
-        escapeHtml(task.task_id || '') + '">Stop</button></div>';
-    }
+    var now = Date.now();
+    html += '<div class="background-tasks-list" id="background-tasks-list">';
+    for (var i = 0; i < tasks.length; i++) html += taskRowHtml(tasks[i], now);
     html += '</div>';
   }
   bar.innerHTML = html;
   if (!existing) inputArea.parentNode.insertBefore(bar, inputArea);
-  bar.querySelector('.background-tasks-toggle').addEventListener('click', function() {
+  refreshIcons();
+
+  bar.querySelector('.background-tasks-toggle').addEventListener('click', function () {
     expanded = !expanded;
     renderBackgroundTasks();
   });
+
   var stopButtons = bar.querySelectorAll('.background-task-stop');
   for (var j = 0; j < stopButtons.length; j++) {
-    stopButtons[j].addEventListener('click', function() {
+    stopButtons[j].addEventListener('click', function () {
       var ws = getWs();
       if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'stop_task', taskId: this.dataset.taskId }));
     });
   }
+
+  if (expanded) startElapsedTimer();
+  else stopElapsedTimer();
 }

package/lib/public/modules/pane-bridge.js

@@ -23,6 +23,15 @@ export function reportPaneContext(data) {
   }, window.location.origin);
 }
 
+// A pane has no banner surface and no login modal of its own, so both panes
+// hitting auth_required would otherwise race to start their own login flow.
+// Hand the event to the parent shell, which owns the single flow.
+export function forwardPaneAuthRequired(message) {
+  if (!store.get('paneMode') || window.parent === window) return false;
+  window.parent.postMessage({ type: "clay-pane-auth-required", message: message }, window.location.origin);
+  return true;
+}
+
 export function forwardPaneMarkdownPresentation(message) {
   if (!store.get('paneMode') || window.parent === window) return false;
   window.parent.postMessage({ type: "clay-pane-present-markdown", message: message }, window.location.origin);

package/lib/public/modules/split-view.js

@@ -11,6 +11,7 @@ import { groupedSessionIds, findSplitGroup } from './split-group-helpers.js';
 import { showConfirm } from './app-misc.js';
 import { syncPairChrome } from './split-pair-ui.js';
 import { presentMarkdownEdit } from './filebrowser.js';
+import { autoStartLoginIfNeeded } from './vendor-login.js';
 
 var host = null;
 var nativeApp = null;
@@ -276,6 +277,12 @@ function handlePaneMessage(event) {
     if (present) presentMarkdownEdit(present);
     return;
   }
+  // Both panes can report auth_required for their own sessions. The shell runs
+  // one login flow for the project; repeat events are no-ops there.
+  if (msg.type === "clay-pane-auth-required") {
+    if (msg.message) autoStartLoginIfNeeded(msg.message);
+    return;
+  }
   if (msg.type !== "clay-pane-context") return;
   var frames = host.querySelectorAll(".split-pane-frame");
   for (var i = 0; i < frames.length; i++) {

package/lib/public/modules/tui-attention.js

@@ -29,6 +29,10 @@ var modalWs = null;
 var modalResizeObserver = null;
 var modalKeyHandler = null;
 var modalResizeDebounce = null;
+// Optional per-open callback fired once the modal is torn down, whatever
+// dismissed it (Esc, backdrop click, term_closed). The login flow uses it to
+// cancel a login the user walked away from.
+var modalCloseHook = null;
 // Debounced fit+redraw for the modal xterm. Same rationale as
 // session-tui-view.js: collapses rapid resize events into a single
 // SIGWINCH so claude can redraw cleanly without mid-resize corruption.
@@ -139,6 +143,7 @@ export function openTuiModal(terminalId, sourceSlug, info) {
   modalTerminalId = terminalId;
   modalSourceSlug = sourceSlug;
   var infoObj = info || {};
+  modalCloseHook = typeof infoObj.onClose === "function" ? infoObj.onClose : null;
   setModalBreadcrumb({
     projectIcon: infoObj.projectIcon || null,
     projectName: infoObj.projectName || sourceSlug,
@@ -232,6 +237,8 @@ export function openTuiModal(terminalId, sourceSlug, info) {
 
 export function closeTuiModal() {
   if (!modalEl) return;
+  var closeHook = modalCloseHook;
+  modalCloseHook = null;
   if (modalTerminalId != null && modalWs && modalWs.readyState === 1) {
     try { modalWs.send(JSON.stringify({ type: "term_detach", id: modalTerminalId })); } catch (e) {}
   }
@@ -247,6 +254,9 @@ export function closeTuiModal() {
     document.removeEventListener("keydown", modalKeyHandler);
     modalKeyHandler = null;
   }
+  if (closeHook) {
+    try { closeHook(); } catch (e) {}
+  }
 }
 
 export function isTuiModalOpen() {