clay-server 4.0.0-beta.2 → 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/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;

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/sdk-message-processor.js

@@ -1,5 +1,6 @@
 var usersModule = require("./users");
 var yoke = require("./yoke");
+var backgroundTaskTiming = require("./background-task-timing");
 
 function attachMessageProcessor(ctx) {
   var sm = ctx.sm;
@@ -686,8 +687,15 @@ function attachMessageProcessor(ctx) {
       }
 
     } else if (parsed.yokeType === "background_tasks_changed") {
-      var previousBackgroundTaskCount = (session.activeBackgroundTasks || []).length;
-      var activeBackgroundTasks = Array.isArray(parsed.tasks) ? parsed.tasks : [];
+      var previousBackgroundTasks = session.activeBackgroundTasks || [];
+      var previousBackgroundTaskCount = previousBackgroundTasks.length;
+      // Vendors re-send the whole list on every change, so carry each task's
+      // first-seen time forward; otherwise the composer's elapsed timer would
+      // restart whenever any other task starts or finishes.
+      var activeBackgroundTasks = backgroundTaskTiming.mergeStartTimes(
+        previousBackgroundTasks,
+        Array.isArray(parsed.tasks) ? parsed.tasks : []
+      );
       session.activeBackgroundTasks = activeBackgroundTasks;
       sendToSession(session, { type: "active_background_tasks", tasks: activeBackgroundTasks });
       if (previousBackgroundTaskCount !== activeBackgroundTasks.length) {

package/lib/yoke/adapters/claude.js

@@ -400,11 +400,16 @@ function normalizeBackgroundTasks(tasks) {
     var nativeType = task && task.task_type;
     var taskType = nativeType === "local_bash" ? "shell"
       : nativeType === "local_agent" ? "agent" : "other";
-    return {
+    var normalized = {
       task_id: task && task.task_id,
       task_type: taskType,
       description: (task && task.description) || "",
     };
+    // The SDK does not report a start time today. Forward one if a future
+    // version adds it; otherwise the session stamps first-seen time.
+    var startedAt = task && (task.started_at || task.startedAt || task.created_at);
+    if (startedAt) normalized.started_at = startedAt;
+    return normalized;
   });
 }
 

package/lib/yoke/codex-background-tasks.js

@@ -19,11 +19,17 @@ function mapTerminals(result) {
     var terminal = terminals[i] || {};
     var taskId = terminal.id || terminal.terminalId || terminal.taskId || "";
     if (!taskId || !isLiveTerminal(terminal)) continue;
-    tasks.push({
+    var task = {
       task_id: String(taskId),
       task_type: "shell",
       description: terminal.commandLine || terminal.command || terminal.name || "",
-    });
+    };
+    // Forward the terminal's own start time when the app-server reports one,
+    // so elapsed time survives a Clay restart. Falls back to first-seen
+    // stamping in background-task-timing.js when absent.
+    var startedAt = terminal.startedAt || terminal.started_at || terminal.createdAt || terminal.created_at;
+    if (startedAt) task.started_at = startedAt;
+    tasks.push(task);
   }
   return tasks;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clay-server",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.3",
   "description": "Self-hosted team workspace for Claude Code and Codex. Multi-user, browser-based, with persistent AI mates.",
   "bin": {
     "clay-server": "./bin/cli.js",