clay-server 3.4.0-beta.14 → 3.4.0-beta.15

package/lib/project-connection.js

@@ -282,6 +282,7 @@ function attachConnection(ctx) {
       if (active.isProcessing) {
         sendTo(ws, { type: "status", status: "processing" });
       }
+      sendTo(ws, { type: "active_background_tasks", tasks: active.activeBackgroundTasks || [] });
       var pendingIds = Object.keys(active.pendingPermissions);
       for (var pi = 0; pi < pendingIds.length; pi++) {
         var p = active.pendingPermissions[pendingIds[pi]];

package/lib/public/app.js

@@ -65,6 +65,7 @@ import { initMisc, flushPendingExtMessages, showImageModal as _miscShowImageModa
 import { initSkillInstall, requireSkills as _siRequireSkills, requireClayMateInterview as _siRequireClayMateInterview, handleSkillInstallWs as _siHandleSkillInstallWs } from './modules/app-skills-install.js';
 import { initDebateUi, showDebateConcludeConfirm as _debShowDebateConcludeConfirm, exitDebateConcludeMode as _debExitDebateConcludeMode, handleDebateConcludeSend as _debHandleDebateConcludeSend, showDebateEndedMode as _debShowDebateEndedMode, exitDebateEndedMode as _debExitDebateEndedMode, showDebateUserFloor as _debShowDebateUserFloor, exitDebateFloorMode as _debExitDebateFloorMode, handleDebateFloorSend as _debHandleDebateFloorSend, renderDebateUserFloorDone as _debRenderDebateUserFloorDone, showDebateSticky as _debShowDebateSticky, showDebateBottomBar as _debShowDebateBottomBar, removeDebateBottomBar as _debRemoveDebateBottomBar, sendDebateStickyComment as _debSendDebateStickyComment, updateDebateRound as _debUpdateDebateRound } from './modules/app-debate-ui.js';
 import { initLoopUi, updateLoopInputVisibility as _loopUpdateLoopInputVisibility, updateLoopButton as _loopUpdateLoopButton, showLoopBanner as _loopShowLoopBanner, updateLoopBanner as _loopUpdateLoopBanner, updateRalphBars as _loopUpdateRalphBars, showRalphCraftingBar as _loopShowRalphCraftingBar, showRalphApprovalBar as _loopShowRalphApprovalBar, updateRalphApprovalStatus as _loopUpdateRalphApprovalStatus, openRalphPreviewModal as _loopOpenRalphPreviewModal, showExecModal as _loopShowExecModal, closeExecModal as _loopCloseExecModal, updateExecModalStatus as _loopUpdateExecModalStatus } from './modules/app-loop-ui.js';
+import { initBackgroundTasksUi } from './modules/background-tasks-ui.js';
 import { initLoopWizard, openRalphWizard as _loopOpenRalphWizard, closeRalphWizard as _loopCloseRalphWizard, getWizardSource as _loopGetWizardSource } from './modules/app-loop-wizard.js';
 import { initAppNotifications, handleNotificationsState as _notifHandleState, handleNotificationCreated as _notifHandleCreated, handleNotificationDismissed as _notifHandleDismissed, handleNotificationDismissedAll as _notifHandleDismissedAll } from './modules/app-notifications.js';
 import { initWhatsNew, handleWhatsNewState as _wnHandleState, handleWhatsNewSeenResult as _wnHandleSeenResult } from './modules/whats-new.js';
@@ -296,6 +297,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
     slashCommands: [],
     processing: false,
     activeSessionId: null,
+    activeBackgroundTasks: [],
     sessionVendorBound: false,
     cliSessionId: null,
     isHeadlessMode: false,
@@ -649,6 +651,7 @@ import { initDebate, handleDebatePreparing, handleDebateStarted, handleDebateRes
   initDebateUi();
 
   initLoopUi();
+  initBackgroundTasksUi();
   initLoopWizard();
 
   // --- Notifications module ---

package/lib/public/css/input.css

@@ -667,6 +667,50 @@
   position: relative;
 }
 
+.background-tasks-bar {
+  max-width: var(--content-width);
+  margin: 0 auto 8px;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--input-bg);
+  overflow: hidden;
+}
+
+.background-tasks-toggle {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  padding: 8px 10px;
+  border: 0;
+  background: transparent;
+  color: var(--text-secondary);
+  cursor: pointer;
+  font: inherit;
+  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-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); }
+
 #input-row {
   display: flex;
   flex-direction: column;

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

@@ -1128,6 +1128,10 @@ export function processMessage(msg) {
         updateSubagentTaskStatus(msg.parentToolId, msg.patch);
         break;
 
+      case "active_background_tasks":
+        store.set({ activeBackgroundTasks: Array.isArray(msg.tasks) ? msg.tasks : [] });
+        break;
+
       case "result":
         // Result marks turn end. Drop pre-thinking even if no delta/tool
         // event ever arrived (e.g. tool-only turn whose progress signals

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

@@ -0,0 +1,55 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { escapeHtml } from './utils.js';
+
+var expanded = false;
+
+export function initBackgroundTasksUi() {
+  store.subscribe(function(state, prev) {
+    if (state.activeBackgroundTasks !== prev.activeBackgroundTasks) renderBackgroundTasks();
+  });
+  renderBackgroundTasks();
+}
+
+function renderBackgroundTasks() {
+  var tasks = store.get('activeBackgroundTasks') || [];
+  var existing = document.getElementById('background-tasks-bar');
+  if (tasks.length === 0) {
+    if (existing) existing.remove();
+    expanded = false;
+    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';
+  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>';
+  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>';
+    }
+    html += '</div>';
+  }
+  bar.innerHTML = html;
+  if (!existing) inputArea.parentNode.insertBefore(bar, inputArea);
+  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() {
+      var ws = getWs();
+      if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'stop_task', taskId: this.dataset.taskId }));
+    });
+  }
+}

package/lib/public/modules/sidebar-sessions.js

@@ -977,6 +977,9 @@ function renderLoopChild(s) {
   if (s.isProcessing) {
     textHtml += '<span class="session-processing"></span>';
   }
+  if (s.backgroundTaskCount) {
+    textHtml += '<span class="session-background-task-count">' + s.backgroundTaskCount + '</span>';
+  }
   if (s.loop) {
     var isRalphChild = s.loop.source === "ralph";
     var roleName = s.loop.role === "crafting" ? "Crafting" : s.loop.role === "judge" ? "Judge" : (isRalphChild ? "Coder" : "Run");
@@ -1096,6 +1099,9 @@ function renderLoopGroup(loopId, children, groupKey) {
   if (anyProcessing) {
     textHtml += '<span class="session-processing"></span>';
   }
+  var groupBackgroundTaskCount = 0;
+  for (var bi = 0; bi < children.length; bi++) groupBackgroundTaskCount += children[bi].backgroundTaskCount || 0;
+  if (groupBackgroundTaskCount) textHtml += '<span class="session-background-task-count">' + groupBackgroundTaskCount + '</span>';
   var groupIcon = isDebate ? "mic" : (isRalph ? "repeat" : "calendar-clock");
   var iconClass = isDebate ? " debate" : (isRalph ? "" : " scheduled");
   textHtml += '<span class="session-loop-icon' + iconClass + '">' + iconHtml(groupIcon) + '</span>';
@@ -1205,6 +1211,9 @@ function renderLoopRun(parentGk, startedAtKey, sessions, isRalph) {
   if (anyProcessing) {
     textHtml += '<span class="session-processing"></span>';
   }
+  var runBackgroundTaskCount = 0;
+  for (var bi = 0; bi < sessions.length; bi++) runBackgroundTaskCount += sessions[bi].backgroundTaskCount || 0;
+  if (runBackgroundTaskCount) textHtml += '<span class="session-background-task-count">' + runBackgroundTaskCount + '</span>';
   textHtml += '<span class="session-loop-run-time">' + escapeHtml(timeLabel) + '</span>';
   textHtml += '<span class="session-loop-count' + (isRalph ? "" : " scheduled") + '">' + sessions.length + '</span>';
   textSpan.innerHTML = textHtml;
@@ -1254,6 +1263,9 @@ function renderSessionItem(s) {
   if (s.isProcessing) {
     textHtml += '<span class="session-processing"></span>';
   }
+  if (s.backgroundTaskCount) {
+    textHtml += '<span class="session-background-task-count">' + s.backgroundTaskCount + '</span>';
+  }
   if (s.loop && s.loop.source === "debate") {
     textHtml += '<span class="session-debate-icon" title="Debate">' + iconHtml("mic") + '</span>';
   }
@@ -1322,6 +1334,8 @@ function renderSplitGroupItem(group, members) {
   }
   html += "</span>";
   if (members[0].isProcessing || members[1].isProcessing) html += '<span class="session-processing"></span>';
+  var splitBackgroundTaskCount = (members[0].backgroundTaskCount || 0) + (members[1].backgroundTaskCount || 0);
+  if (splitBackgroundTaskCount) html += '<span class="session-background-task-count">' + splitBackgroundTaskCount + '</span>';
   html += '<span class="split-group-name">' + highlightMatch(group.name || "Split", searchQuery) + "</span>";
   text.innerHTML = html;
   el.appendChild(text);

package/lib/sdk-message-processor.js

@@ -175,6 +175,10 @@ function attachMessageProcessor(ctx) {
 
     // Cache slash_commands and model from CLI init message
     if (parsed.yokeType === "init") {
+      var previousBackgroundTaskCount = (session.activeBackgroundTasks || []).length;
+      session.activeBackgroundTasks = [];
+      sendToSession(session, { type: "active_background_tasks", tasks: [] });
+      if (previousBackgroundTaskCount !== 0) sm.broadcastSessionList();
       var fsSkills = discoverSkillDirs();
       sm.skillNames = mergeSkills(parsed.skills, fsSkills);
       if (parsed.slashCommands) {
@@ -612,6 +616,15 @@ function attachMessageProcessor(ctx) {
         });
       }
 
+    } else if (parsed.yokeType === "background_tasks_changed") {
+      var previousBackgroundTaskCount = (session.activeBackgroundTasks || []).length;
+      var activeBackgroundTasks = Array.isArray(parsed.tasks) ? parsed.tasks : [];
+      session.activeBackgroundTasks = activeBackgroundTasks;
+      sendToSession(session, { type: "active_background_tasks", tasks: activeBackgroundTasks });
+      if (previousBackgroundTaskCount !== activeBackgroundTasks.length) {
+        sm.broadcastSessionList();
+      }
+
     } else if (parsed.yokeType === "tool_progress") {
       // Sub-agent tool_progress: forward as activity update
       var parentId = parsed.parentToolId;

package/lib/sessions.js

@@ -495,6 +495,7 @@ function createSessionManager(opts) {
       title: s.title || "New Session",
       active: isActive,
       isProcessing: s.isProcessing,
+      backgroundTaskCount: (s.activeBackgroundTasks || []).length,
       lastActivity: s.lastActivity || s.createdAt || 0,
       loop: loop,
       spawn: s.spawn || null,
@@ -717,6 +718,7 @@ function createSessionManager(opts) {
     if (session.isProcessing) {
       _send({ type: "status", status: "processing" });
     }
+    _send({ type: "active_background_tasks", tasks: session.activeBackgroundTasks || [] });
 
     // Re-send any pending permission requests
     var pendingIds = Object.keys(session.pendingPermissions);

package/lib/ws-schema.js

@@ -114,6 +114,7 @@ var schema = {
   "subagent_done":            { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Subagent task completed" },
   "task_started":             { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Background task started" },
   "task_progress":            { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Background task progress update" },
+  "active_background_tasks":  { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Current background tasks for the active session (full replacement)" },
   "markdown_edit_present":    { direction: "s2c", handler: "lib/public/modules/app-messages.js", description: "Open a user-requested Markdown edit with a before snapshot" },
 
   // -----------------------------------------------------------------------

package/lib/yoke/adapters/claude.js

@@ -197,6 +197,26 @@ function flattenEvent(raw) {
       base.summary = raw.summary || null;
       return base;
     }
+    if (raw.subtype === "background_tasks_changed") {
+      base.yokeType = "background_tasks_changed";
+      base.tasks = normalizeBackgroundTasks(raw.tasks);
+      return base;
+    }
+    if (raw.subtype === "task_updated") {
+      base.yokeType = "task_updated";
+      base.task_id = raw.task_id;
+      base.patch = raw.patch || {};
+      return base;
+    }
+    if (raw.subtype === "task_notification") {
+      base.yokeType = "task_notification";
+      base.parentToolId = raw.parent_tool_use_id;
+      base.taskId = raw.task_id;
+      base.status = raw.status || "completed";
+      base.summary = raw.summary || "";
+      base.usage = raw.usage || null;
+      return base;
+    }
     // Model refusal: the model declined and the CLI either fell back to
     // another model or ended the turn. Translate to a vendor-neutral
     // yokeType so the relay never sees SDK subtype strings.
@@ -343,6 +363,20 @@ function flattenEvent(raw) {
   return base;
 }
 
+function normalizeBackgroundTasks(tasks) {
+  if (!Array.isArray(tasks)) return [];
+  return tasks.map(function(task) {
+    var nativeType = task && task.task_type;
+    var taskType = nativeType === "local_bash" ? "shell"
+      : nativeType === "local_agent" ? "agent" : "other";
+    return {
+      task_id: task && task.task_id,
+      task_type: taskType,
+      description: (task && task.description) || "",
+    };
+  });
+}
+
 // --- QueryHandle ---
 // Wraps a raw SDK query object with the YOKE QueryHandle interface.
 // Events are flattened via flattenEvent before yielding.

package/lib/yoke/interface.js

@@ -9,6 +9,17 @@
 //   2. QueryHandle (returned by adapter.createQuery)
 
 var TOOL_POLICIES = ["ask", "allow-all"];
+var BACKGROUND_TASK_TYPES = ["shell", "agent", "monitor", "other"];
+
+/*
+ * Optional adapter event contract:
+ *   { yokeType: "background_tasks_changed", tasks: [{ task_id, task_type, description }] }
+ *
+ * Each event replaces the complete live set. An adapter that emits this event
+ * must reset it to an empty set when its CLI process restarts. task_type uses
+ * BACKGROUND_TASK_TYPES; adapters without a level signal may synthesize one,
+ * and adapters that emit nothing simply have no background-task indicator.
+ */
 
 /**
  * Validate that an adapter object implements all required methods.
@@ -93,6 +104,7 @@ function validateQueryHandle(handle) {
 
 module.exports = {
   TOOL_POLICIES: TOOL_POLICIES,
+  BACKGROUND_TASK_TYPES: BACKGROUND_TASK_TYPES,
   ADAPTER_METHODS: ADAPTER_METHODS,
   QUERY_HANDLE_METHODS: QUERY_HANDLE_METHODS,
   validateAdapter: validateAdapter,

package/package.json

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