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

package/lib/background-task-timing.js

@@ -0,0 +1,72 @@
+// Background task start-time tracking.
+//
+// Vendors report background tasks as a full replacement list on every change
+// and none of them carries a reliable start time today (see
+// normalizeBackgroundTasks in yoke/adapters/claude.js and mapTerminals in
+// yoke/codex-background-tasks.js). The session's previous list is the only
+// place that knows when a task was first seen, so the merge belongs here,
+// where that list is maintained, rather than in an adapter that rebuilds the
+// array from scratch each time.
+//
+// A vendor-supplied timestamp always wins when present; otherwise a task is
+// stamped the first time it appears and keeps that stamp for its whole life.
+
+// Accepts epoch milliseconds, epoch seconds, or an ISO date string, since
+// vendors are not consistent. Returns null for anything unusable so the
+// caller falls back to first-seen stamping instead of rendering 1970.
+function normalizeTimestamp(value) {
+  if (typeof value === "number" && isFinite(value) && value > 0) {
+    // Values this small are epoch seconds, not milliseconds.
+    return value < 1e12 ? Math.round(value * 1000) : Math.round(value);
+  }
+  if (typeof value === "string" && value) {
+    var parsed = Date.parse(value);
+    if (!isNaN(parsed)) return parsed;
+  }
+  return null;
+}
+
+function vendorStartedAt(task) {
+  if (!task) return null;
+  return normalizeTimestamp(task.started_at)
+    || normalizeTimestamp(task.startedAt)
+    || normalizeTimestamp(task.createdAt)
+    || normalizeTimestamp(task.created_at);
+}
+
+/**
+ * Return `nextTasks` with a `started_at` (epoch ms) on every entry.
+ * Tasks already present in `previousTasks` keep their original stamp so the
+ * elapsed time does not reset every time the list is re-emitted.
+ */
+function mergeStartTimes(previousTasks, nextTasks, now) {
+  if (!Array.isArray(nextTasks)) return [];
+  var stampedAt = typeof now === "number" ? now : Date.now();
+  // Stamps we wrote on a previous pass are already epoch milliseconds, so they
+  // are read as-is. Only vendor-supplied values go through normalizeTimestamp,
+  // whose seconds-vs-milliseconds heuristic would otherwise be re-applied to
+  // our own output.
+  var known = {};
+  var previous = Array.isArray(previousTasks) ? previousTasks : [];
+  for (var p = 0; p < previous.length; p++) {
+    var seen = previous[p];
+    if (!seen || !seen.task_id) continue;
+    if (typeof seen.started_at === "number" && isFinite(seen.started_at) && seen.started_at > 0) {
+      known[seen.task_id] = seen.started_at;
+    }
+  }
+
+  var merged = [];
+  for (var i = 0; i < nextTasks.length; i++) {
+    var task = nextTasks[i];
+    if (!task) continue;
+    var startedAt = vendorStartedAt(task) || known[task.task_id] || stampedAt;
+    merged.push(Object.assign({}, task, { started_at: startedAt }));
+  }
+  return merged;
+}
+
+module.exports = {
+  mergeStartTimes: mergeStartTimes,
+  normalizeTimestamp: normalizeTimestamp,
+};

package/lib/project-connection.js

@@ -78,6 +78,7 @@ function attachConnection(ctx) {
   var _mcp = ctx._mcp;
   var _notifications = ctx._notifications;
   var _splitGroups = ctx._splitGroups;
+  var _vendorLogin = ctx._vendorLogin;
   var hydrateImageRefs = ctx.hydrateImageRefs;
   var resolveSessionForView = ctx.resolveSessionForView;
   var broadcastClientCount = ctx.broadcastClientCount;
@@ -191,6 +192,9 @@ function attachConnection(ctx) {
     sendTo(ws, { type: "last_vendor", vendor: sm.lastVendor || "" });
     sendTo(ws, Object.assign({ type: "codex_config" }, getCodexConfig(sm)));
     sendTo(ws, { type: "term_list", terminals: tm.list() });
+    // Any login flow already running in this project, so a reconnecting client
+    // re-attaches to the existing login terminal instead of starting another.
+    if (_vendorLogin) _vendorLogin.sendStateTo(ws);
     // Context sources sent after session is resolved (per-session storage)
     // Send email accounts list for context sources picker
     var emailUserId = (wsUser && wsUser.id) || "default";

package/lib/project-vendor-login.js

@@ -0,0 +1,397 @@
+// 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
+// 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.
+//
+// Lifecycle:
+//   vendor_login_start  -> create (or re-use) a PTY running the vendor login
+//                          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
+//   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
+// child process that reads ~/.codex/auth.json once at spawn, so without a
+// restart every query after a successful login keeps hitting 401 and re-arms
+// auth_required forever.
+
+var vendorRegistry = require("./yoke/vendor-registry");
+
+// Login CLIs print a success line and then hand the shell back, so the PTY
+// itself does not exit. Watch the output stream instead. Deliberately narrow:
+// "Successfully logged out" and MCP-server logins must not match.
+var LOGIN_SUCCESS_PATTERNS = [
+  /successfully logged in(?![ \t]+to[ \t]+mcp)/i,
+  /logged in successfully/i,
+  /login successful/i,
+  /successfully authenticated/i,
+  /authentication successful/i,
+  /signed in successfully/i,
+  /signed in with your [a-z ]+ account/i,
+  /you(?:'re| are) (?:now )?(?:logged|signed) in/i,
+];
+
+// Rolling window kept per flow so a success line split across PTY chunks is
+// still matched, without buffering the whole login transcript.
+var OUTPUT_TAIL_MAX = 4096;
+
+// Grace period between detecting success and killing the terminal, so the user
+// actually sees the confirmation line before the modal closes.
+var CLOSE_AFTER_SUCCESS_MS = 2000;
+
+var ANSI_PATTERN = /\x1b\[[0-9;?]*[ -\/]*[@-~]|\x1b\][^\x07\x1b]*(?:\x07|\x1b\\)|\r/g;
+
+function stripAnsi(text) {
+  return String(text).replace(ANSI_PATTERN, "");
+}
+
+function looksLikeLoginSuccess(text) {
+  for (var i = 0; i < LOGIN_SUCCESS_PATTERNS.length; i++) {
+    if (LOGIN_SUCCESS_PATTERNS[i].test(text)) return true;
+  }
+  return false;
+}
+
+/**
+ * ctx fields:
+ *   slug, osUsers,
+ *   sm, tm, adapters,
+ *   send, sendTo,
+ *   usersModule,
+ *   getOsUserInfoForWs, getOsUserInfoForLinuxUser, getLinuxUserForSession
+ */
+function attachVendorLogin(ctx) {
+  var slug = ctx.slug;
+  var osUsers = ctx.osUsers;
+
+  var sm = ctx.sm;
+  var tm = ctx.tm;
+  var adapters = ctx.adapters || {};
+
+  var send = ctx.send;
+  var sendTo = ctx.sendTo;
+
+  var usersModule = ctx.usersModule;
+
+  var getOsUserInfoForWs = ctx.getOsUserInfoForWs;
+  var getOsUserInfoForLinuxUser = ctx.getOsUserInfoForLinuxUser;
+  var getLinuxUserForSession = ctx.getLinuxUserForSession;
+
+  // vendor -> flow record. At most one live login terminal per vendor.
+  var _flows = Object.create(null);
+
+  function loginCommandFor(vendor) {
+    var info = vendorRegistry.getVendorInfo(vendor);
+    return (info && info.loginCommand) || "claude login";
+  }
+
+  function vendorDisplayName(vendor) {
+    var info = vendorRegistry.getVendorInfo(vendor);
+    return (info && info.displayName) || vendor || "Vendor";
+  }
+
+  function listFlows() {
+    var result = [];
+    var vendors = Object.keys(_flows);
+    for (var i = 0; i < vendors.length; i++) {
+      var flow = _flows[vendors[i]];
+      result.push({
+        vendor: flow.vendor,
+        terminalId: flow.terminalId,
+        startedAt: flow.startedAt,
+        completed: !!flow.completed,
+      });
+    }
+    return result;
+  }
+
+  function broadcastState() {
+    send({ type: "vendor_login_state", slug: slug, flows: listFlows() });
+  }
+
+  function sendStateTo(ws) {
+    sendTo(ws, { type: "vendor_login_state", slug: slug, flows: listFlows() });
+  }
+
+  function hasTerminalPermission(ws) {
+    if (!ws || !ws._clayUser) return true;
+    if (!usersModule || typeof usersModule.getEffectivePermissions !== "function") return true;
+    var perms = usersModule.getEffectivePermissions(ws._clayUser, osUsers);
+    return !!(perms && perms.terminal);
+  }
+
+  // The login terminal must write credentials to the same HOME the adapter
+  // will read them from. With OS-user isolation the adapter runs as the
+  // *session owner's* Linux user, which is not necessarily the connected
+  // client, so prefer the session identity when the requester is entitled to
+  // it. Without isolation both sides run as the daemon user and this resolves
+  // to null on both paths.
+  function resolveLoginIdentity(ws, msg) {
+    if (!osUsers) return { linuxUser: null, osUserInfo: null };
+
+    var sessionLinuxUser = null;
+    var sessionId = msg && msg.sessionId;
+    if (sessionId && sm && sm.sessions && typeof getLinuxUserForSession === "function") {
+      var session = sm.sessions.get(sessionId);
+      if (session) {
+        var requesterId = ws && ws._clayUser ? ws._clayUser.id : null;
+        var isOwner = !session.ownerId || (requesterId && String(session.ownerId) === String(requesterId));
+        var isAdmin = !!(ws && ws._clayUser && ws._clayUser.role === "admin");
+        if (isOwner || isAdmin) sessionLinuxUser = getLinuxUserForSession(session);
+      }
+    }
+
+    if (sessionLinuxUser && typeof getOsUserInfoForLinuxUser === "function") {
+      return { linuxUser: sessionLinuxUser, osUserInfo: getOsUserInfoForLinuxUser(sessionLinuxUser) };
+    }
+
+    var wsInfo = typeof getOsUserInfoForWs === "function" ? getOsUserInfoForWs(ws) : null;
+    return { linuxUser: wsInfo ? wsInfo.user : null, osUserInfo: wsInfo };
+  }
+
+  function isFlowTerminalAlive(flow) {
+    return !!(flow && typeof flow.terminalId === "number" && tm.has(flow.terminalId));
+  }
+
+  function discardFlow(vendor) {
+    var flow = _flows[vendor];
+    if (!flow) return null;
+    delete _flows[vendor];
+    if (flow.closeTimer) {
+      clearTimeout(flow.closeTimer);
+      flow.closeTimer = null;
+    }
+    return flow;
+  }
+
+  // Kill the PTY and drop it from the sidebar list. `flow.closing` keeps the
+  // terminal's own exit hook from re-entering finalization.
+  function closeFlowTerminal(flow) {
+    if (!flow || typeof flow.terminalId !== "number") return;
+    flow.closing = true;
+    try { tm.close(flow.terminalId); } catch (e) {}
+    send({ type: "term_list", terminals: tm.list() });
+  }
+
+  // Restart the vendor adapter so the next query spawns a process that reads
+  // the credentials the login just wrote. Shared adapter instances (Claude) are
+  // reused by every project, so tearing one down here would kill unrelated
+  // sessions; those runtimes pick up new credentials on their own.
+  function refreshVendorAuth(vendor) {
+    var adapter = adapters[vendor];
+    if (!adapter || typeof adapter.shutdown !== "function") return Promise.resolve(false);
+    if (adapter.shared) {
+      console.log("[vendor-login] " + vendor + " adapter is shared; skipping restart for " + slug);
+      return Promise.resolve(false);
+    }
+    // adapter.shutdown() already fans out to every per-OS-user runtime it
+    // created (shutdownUserRuntimes), so one call covers isolated setups too.
+    return Promise.resolve()
+      .then(function () { return adapter.shutdown(); })
+      .then(function () {
+        console.log("[vendor-login] Restarted " + vendor + " adapter for " + slug + " after login");
+        return true;
+      })
+      .catch(function (err) {
+        console.error("[vendor-login] " + vendor + " adapter restart failed for " + slug + ":",
+          err && err.message ? err.message : err);
+        return false;
+      });
+  }
+
+  function finishFlow(vendor, succeeded) {
+    var flow = _flows[vendor];
+    if (!flow || flow.finishing) return;
+    flow.finishing = true;
+    flow.completed = !!succeeded;
+
+    var refresh = succeeded ? refreshVendorAuth(vendor) : Promise.resolve(false);
+    refresh.then(function (restarted) {
+      discardFlow(vendor);
+      closeFlowTerminal(flow);
+      if (succeeded) {
+        send({ type: "auth_refreshed", slug: slug, vendor: vendor, adapterRestarted: !!restarted });
+      }
+      broadcastState();
+    });
+  }
+
+  function handleFlowOutput(vendor, chunk) {
+    var flow = _flows[vendor];
+    if (!flow || flow.finishing || flow.succeeded) return;
+    flow.outputTail = (flow.outputTail + stripAnsi(chunk)).slice(-OUTPUT_TAIL_MAX);
+    if (!looksLikeLoginSuccess(flow.outputTail)) return;
+
+    flow.succeeded = true;
+    console.log("[vendor-login] Detected successful " + vendor + " login in " + slug);
+    // Let the success line land on screen before the terminal disappears.
+    flow.closeTimer = setTimeout(function () {
+      finishFlow(vendor, true);
+    }, CLOSE_AFTER_SUCCESS_MS);
+    if (flow.closeTimer && typeof flow.closeTimer.unref === "function") flow.closeTimer.unref();
+  }
+
+  // Fires for both a PTY that exited on its own and one the user closed from
+  // the sidebar. Either way the flow is over; refresh auth if the command had
+  // already reported success.
+  function handleFlowExit(vendor) {
+    var flow = _flows[vendor];
+    if (!flow || flow.closing || flow.finishing) return;
+    finishFlow(vendor, !!flow.succeeded);
+  }
+
+  function startFlow(ws, vendor, msg) {
+    var identity = resolveLoginIdentity(ws, msg);
+    var command = loginCommandFor(vendor);
+    var flow = {
+      vendor: vendor,
+      terminalId: null,
+      startedAt: Date.now(),
+      linuxUser: identity.linuxUser,
+      outputTail: "",
+      succeeded: false,
+      finishing: false,
+      closing: false,
+      completed: false,
+      closeTimer: null,
+    };
+    // Registered before create() so the PTY's first output chunk (hooks fire
+    // synchronously from spawn) already finds the record.
+    _flows[vendor] = flow;
+
+    var terminal = null;
+    try {
+      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); },
+      });
+    } catch (e) {
+      console.error("[vendor-login] Failed to spawn " + vendor + " login terminal in " + slug + ":",
+        e && e.message ? e.message : e);
+    }
+
+    if (!terminal) {
+      delete _flows[vendor];
+      return null;
+    }
+
+    flow.terminalId = terminal.id;
+    tm.attach(terminal.id, ws);
+    send({ type: "term_list", terminals: tm.list() });
+    return flow;
+  }
+
+  function handleVendorLoginMessage(ws, msg) {
+    if (msg.type === "vendor_login_state_request") {
+      sendStateTo(ws);
+      return true;
+    }
+
+    if (msg.type === "vendor_login_cancel") {
+      var cancelVendor = String(msg.vendor || "");
+      var cancelled = discardFlow(cancelVendor);
+      if (cancelled) closeFlowTerminal(cancelled);
+      broadcastState();
+      return true;
+    }
+
+    if (msg.type === "vendor_login_start") {
+      var vendor = String(msg.vendor || "claude");
+      if (!vendorRegistry.getVendorInfo(vendor)) {
+        sendTo(ws, { type: "vendor_login_error", vendor: vendor, error: "Unknown vendor: " + vendor });
+        return true;
+      }
+      if (!hasTerminalPermission(ws)) {
+        sendTo(ws, { type: "vendor_login_error", vendor: vendor, error: "Terminal access is not permitted" });
+        return true;
+      }
+
+      var existing = _flows[vendor];
+      if (existing && !isFlowTerminalAlive(existing)) {
+        // Terminal died without its exit hook clearing the record.
+        discardFlow(vendor);
+        existing = null;
+      }
+
+      if (existing) {
+        // An auto-triggered request (a fresh auth_required from another
+        // 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);
+          sendTo(ws, {
+            type: "vendor_login_ready",
+            slug: slug,
+            vendor: vendor,
+            terminalId: existing.terminalId,
+            reused: true,
+          });
+        }
+        sendStateTo(ws);
+        return true;
+      }
+
+      var started = startFlow(ws, vendor, msg);
+      if (!started) {
+        sendTo(ws, {
+          type: "vendor_login_error",
+          vendor: vendor,
+          error: "Cannot create terminal (node-pty not available or limit reached)",
+        });
+        return true;
+      }
+
+      console.log("[vendor-login] Started " + vendor + " login terminal " + started.terminalId + " in " + slug);
+      sendTo(ws, {
+        type: "vendor_login_ready",
+        slug: slug,
+        vendor: vendor,
+        terminalId: started.terminalId,
+        reused: false,
+      });
+      broadcastState();
+      return true;
+    }
+
+    return false;
+  }
+
+  // The sidebar "close terminal" path goes through tm.close() directly, which
+  // fires our exit hook. This is the explicit entry point for callers that
+  // remove a terminal without going through the PTY.
+  function forgetTerminal(terminalId) {
+    var vendors = Object.keys(_flows);
+    for (var i = 0; i < vendors.length; i++) {
+      if (_flows[vendors[i]].terminalId === terminalId) {
+        handleFlowExit(vendors[i]);
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function isLoginTerminal(terminalId) {
+    var vendors = Object.keys(_flows);
+    for (var i = 0; i < vendors.length; i++) {
+      if (_flows[vendors[i]].terminalId === terminalId) return true;
+    }
+    return false;
+  }
+
+  return {
+    handleVendorLoginMessage: handleVendorLoginMessage,
+    sendStateTo: sendStateTo,
+    listFlows: listFlows,
+    forgetTerminal: forgetTerminal,
+    isLoginTerminal: isLoginTerminal,
+  };
+}
+
+module.exports = { attachVendorLogin: attachVendorLogin };

package/lib/project.js

@@ -34,6 +34,7 @@ var { attachSessions } = require("./project-sessions");
 var { attachModels } = require("./project-models");
 var { attachUserMessage } = require("./project-user-message");
 var { attachShellCommand } = require("./project-shell-command");
+var { attachVendorLogin } = require("./project-vendor-login");
 var { attachConnection } = require("./project-connection");
 var { attachMcp } = require("./project-mcp");
 var { createLocalMcp } = require("./mcp-local");
@@ -1286,6 +1287,9 @@ function createProjectContext(opts) {
     // --- Shell command context ---
     if (_shellCommand.handleShellCommand(ws, msg)) return;
 
+    // --- Vendor login flow (delegated to project-vendor-login.js) ---
+    if (_vendorLogin.handleVendorLoginMessage(ws, msg)) return;
+
     // --- Notes, terminals, context, user message (delegated to project-user-message.js) ---
     if (_userMessage.handleUserMessage(ws, msg)) return;
   }
@@ -1593,6 +1597,21 @@ function createProjectContext(opts) {
     getOsUserInfoForWs: getOsUserInfoForWs,
   });
 
+  // --- Vendor login flow (delegated to project-vendor-login.js) ---
+  var _vendorLogin = attachVendorLogin({
+    slug: slug,
+    osUsers: osUsers,
+    sm: sm,
+    tm: tm,
+    adapters: adapters,
+    send: send,
+    sendTo: sendTo,
+    usersModule: usersModule,
+    getOsUserInfoForWs: getOsUserInfoForWs,
+    getOsUserInfoForLinuxUser: getOsUserInfoForLinuxUser,
+    getLinuxUserForSession: getLinuxUserForSession,
+  });
+
   // --- Filesystem handler (delegated to project-filesystem.js) ---
   var _filesystem = attachFilesystem({
     cwd: cwd,
@@ -1866,6 +1885,7 @@ function createProjectContext(opts) {
     _mcp: _mcp,
     _notifications: _notifications,
     _splitGroups: _splitGroups,
+    _vendorLogin: _vendorLogin,
     resolveSessionForView: _sessions.resolveSessionForView,
     hydrateImageRefs: hydrateImageRefs,
     broadcastClientCount: broadcastClientCount,

package/lib/public/css/input.css

@@ -667,49 +667,97 @@
   position: relative;
 }
 
+/* Sidebar session-row badge. Formerly shared its rule with the composer's
+   background-tasks chip; it is standalone now that the composer bar no longer
+   uses a filled numeric badge. */
+.session-background-task-count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  border-radius: 8px;
+  background: var(--accent);
+  color: var(--bg);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+/* --- Background tasks status line (above the composer) ---
+   Reads as a calm status line that belongs to the input surface: subtle
+   border, no fill, muted text. Progress is conveyed by the animated dots
+   rather than by color or size. */
 .background-tasks-bar {
   max-width: var(--content-width);
-  margin: 0 auto 8px;
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  background: var(--input-bg);
+  margin: 0 auto 6px;
+  border: 1px solid var(--border-subtle);
+  border-radius: 10px;
+  background: transparent;
   overflow: hidden;
+  transition: border-color .15s ease, background-color .15s ease;
+}
+
+.background-tasks-bar:hover,
+.background-tasks-bar.expanded {
+  border-color: var(--border);
+  background: var(--input-bg);
 }
 
 .background-tasks-toggle {
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 7px;
-  padding: 8px 10px;
+  gap: 9px;
+  padding: 7px 11px;
   border: 0;
   background: transparent;
-  color: var(--text-secondary);
+  color: var(--text-muted);
   cursor: pointer;
   font: inherit;
+  font-size: 12px;
   text-align: left;
 }
 
-.background-tasks-chip, .session-background-task-count {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border-radius: 8px;
-  background: var(--accent);
-  color: var(--bg);
-  font-size: 10px;
-  font-weight: 700;
+.background-tasks-toggle:hover { color: var(--text-secondary); }
+.background-tasks-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
+
+.background-tasks-summary { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* Quiet three-dot activity indicator. Same motion as the Home debate dots
+   (home-debate-planning.css) but muted instead of accent-colored, since this
+   is ambient status rather than something asking to be read. */
+.background-tasks-activity { display: inline-flex; align-items: center; gap: 3px; color: var(--text-muted); flex: none; }
+.background-tasks-activity i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: background-tasks-pulse 1.4s ease-in-out infinite; }
+.background-tasks-activity i:nth-child(2) { animation-delay: .18s; }
+.background-tasks-activity i:nth-child(3) { animation-delay: .36s; }
+@keyframes background-tasks-pulse { 0%, 70%, 100% { opacity: .28; } 35% { opacity: .95; } }
+
+.background-tasks-chevron { display: inline-flex; flex: none; color: var(--text-muted); transition: transform .15s ease; }
+.background-tasks-chevron i { width: 14px; height: 14px; }
+.background-tasks-bar.expanded .background-tasks-chevron { transform: rotate(90deg); }
+
+.background-tasks-list { padding: 0 11px 7px; }
+.background-task-row { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-top: 1px solid var(--border-subtle); font-size: 12px; }
+.background-task-icon { display: inline-flex; flex: none; color: var(--text-muted); }
+.background-task-icon i { width: 13px; height: 13px; }
+.background-task-description { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); }
+.background-task-meta { display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--text-muted); }
+.background-task-type { font-size: 11px; }
+.background-task-elapsed { font-variant-numeric: tabular-nums; font-size: 11px; min-width: 44px; text-align: right; }
+.background-task-stop { flex: none; border: 1px solid var(--border-subtle); border-radius: 6px; padding: 3px 8px; background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: 11px; }
+.background-task-stop:hover { color: var(--text); border-color: var(--border); }
+.background-task-stop:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .background-tasks-activity i { animation: none; opacity: .7; }
+  .background-tasks-bar, .background-tasks-chevron { transition: none; }
 }
 
-.background-tasks-list { padding: 0 10px 8px; }
-.background-task-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }
-.background-task-description { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.background-task-type { padding: 2px 6px; border-radius: 5px; background: var(--code-bg); color: var(--text-muted); font-size: 11px; }
-.background-task-stop { border: 1px solid var(--border); border-radius: 5px; padding: 3px 7px; background: transparent; color: var(--text-secondary); cursor: pointer; font: inherit; font-size: 12px; }
-.background-task-stop:hover { color: var(--text); border-color: var(--text-muted); }
+@media (max-width: 600px) {
+  .background-task-meta { gap: 5px; }
+  .background-task-type { display: none; }
+}
 
 #input-row {
   display: flex;