clay-server 3.4.0-beta.9 → 3.4.0

package/lib/public/modules/model-picker.js

@@ -0,0 +1,263 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+
+var configModelList = null;
+var configPopover = null;
+var configChip = null;
+var requestCounter = 0;
+var selectionCounter = 0;
+var requestTimer = null;
+
+export function modelEntryValue(entry) {
+  if (!entry) return "";
+  if (typeof entry === "string") return entry;
+  return entry.value || entry.id || "";
+}
+
+export function modelEntryMatches(entry, value) {
+  if (!entry || !value) return false;
+  if (typeof entry === "string") return entry === value;
+  return entry.value === value || entry.id === value || entry.resolvedModel === value;
+}
+
+export function modelDisplayName(value, models) {
+  if (!value) return "";
+  var list = models || [];
+  for (var i = 0; i < list.length; i++) {
+    if (modelEntryMatches(list[i], value)) {
+      return typeof list[i] === "string" ? list[i] : (list[i].displayName || modelEntryValue(list[i]));
+    }
+  }
+  return value;
+}
+
+function vendorDisplayName(vendor) {
+  var info = store.get('vendorInfo') || {};
+  return info[vendor] && info[vendor].displayName ? info[vendor].displayName : vendor;
+}
+
+function clearRequestTimer() {
+  if (!requestTimer) return;
+  clearTimeout(requestTimer);
+  requestTimer = null;
+}
+
+export function setupModelPicker() {
+  configModelList = document.getElementById("config-model-list");
+  configPopover = document.getElementById("config-popover");
+  configChip = document.getElementById("config-chip");
+}
+
+export function resetModelPickerState() {
+  clearRequestTimer();
+  store.set({
+    modelListVendor: "",
+    modelListStatus: "idle",
+    modelListError: "",
+    modelRequestId: "",
+    modelSelectionPending: null,
+    modelSelectionError: "",
+  });
+}
+
+export function requestVendorModels(vendor, force) {
+  if (!vendor) return null;
+  var s = store.snap();
+  if (!force && s.modelListVendor === vendor) {
+    if (s.modelListStatus === "loading") return s.modelRequestId || null;
+    if (s.modelListStatus === "ready" && s.currentModels && s.currentModels.length > 0) return null;
+  }
+
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) {
+    store.set({
+      modelListVendor: vendor,
+      modelListStatus: "error",
+      modelListError: "The connection is not ready. Reconnect and retry.",
+    });
+    return null;
+  }
+
+  requestCounter++;
+  var requestId = "models-" + Date.now().toString(36) + "-" + requestCounter;
+  clearRequestTimer();
+  store.set({
+    modelListVendor: vendor,
+    modelListStatus: "loading",
+    modelListError: "",
+    modelRequestId: requestId,
+  });
+  ws.send(JSON.stringify({ type: "get_vendor_models", vendor: vendor, requestId: requestId }));
+  requestTimer = setTimeout(function() {
+    var current = store.snap();
+    if (current.modelRequestId !== requestId || current.modelListStatus !== "loading") return;
+    store.set({
+      modelListStatus: "error",
+      modelListError: vendorDisplayName(vendor) + " model loading timed out. Retry to try again.",
+    });
+  }, 35000);
+  return requestId;
+}
+
+export function prepareModelPickerOpen() {
+  var s = store.snap();
+  var vendor = s.currentVendor || "claude";
+  var needsModels = !s.currentModels || s.currentModels.length === 0;
+  var wrongVendor = s.modelListVendor !== vendor;
+  var retryable = s.modelListStatus === "error" || s.modelListStatus === "empty" || s.modelListStatus === "idle";
+  requestVendorModels(vendor, needsModels || wrongVendor || retryable);
+}
+
+export function getModelInfoUpdate(msg) {
+  var vendor = msg.vendor || store.get('currentVendor') || "claude";
+  var currentVendor = store.get('currentVendor');
+  if (currentVendor && vendor !== currentVendor) return null;
+  if (msg.sessionId != null && msg.sessionId !== store.get('activeSessionId')) return null;
+
+  var s = store.snap();
+  if (msg.requestId && s.modelRequestId && msg.requestId !== s.modelRequestId) return null;
+
+  var models = Array.isArray(msg.models) ? msg.models : [];
+  var unsolicitedEmptyWhileLoading = s.modelListStatus === "loading"
+    && s.modelListVendor === vendor
+    && !msg.requestId
+    && !msg.modelStatus
+    && !msg.error
+    && models.length === 0;
+  if (unsolicitedEmptyWhileLoading) {
+    return {
+      modelListVendor: vendor,
+      modelListStatus: "loading",
+      modelListError: "",
+    };
+  }
+
+  clearRequestTimer();
+  var status = msg.modelStatus || (msg.error ? "error" : (models.length > 0 ? "ready" : "empty"));
+  return {
+    modelListVendor: vendor,
+    modelListStatus: status,
+    modelListError: msg.error || "",
+    modelRequestId: "",
+  };
+}
+
+export function requestModelSelection(model) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) {
+    store.set({ modelSelectionError: "The connection is not ready. Reconnect before selecting a model." });
+    return;
+  }
+  var s = store.snap();
+  selectionCounter++;
+  var requestId = "model-select-" + Date.now().toString(36) + "-" + selectionCounter;
+  store.set({
+    currentModel: model,
+    modelSelectionPending: { requestId: requestId, model: model, previousModel: s.currentModel || "" },
+    modelSelectionError: "",
+  });
+  ws.send(JSON.stringify({
+    type: "set_model",
+    model: model,
+    vendor: s.currentVendor || "claude",
+    requestId: requestId,
+  }));
+}
+
+export function handleModelSelectionResult(msg) {
+  var pending = store.get('modelSelectionPending');
+  if (!pending || (msg.requestId && msg.requestId !== pending.requestId)) return false;
+  if (msg.ok) {
+    store.set({
+      currentModel: msg.model || pending.model,
+      modelSelectionPending: null,
+      modelSelectionError: "",
+    });
+    if (configPopover) configPopover.classList.add("hidden");
+    if (configChip) configChip.classList.remove("active");
+  } else {
+    store.set({
+      currentModel: pending.previousModel,
+      modelSelectionPending: null,
+      modelSelectionError: msg.error || "The model could not be selected.",
+    });
+  }
+  return true;
+}
+
+function appendState(title, detail, retry) {
+  var stateEl = document.createElement("div");
+  stateEl.className = "config-model-state";
+  if (title === "Loading models…") {
+    var spinner = document.createElement("span");
+    spinner.className = "config-model-spinner";
+    spinner.setAttribute("aria-hidden", "true");
+    stateEl.appendChild(spinner);
+  }
+  var textWrap = document.createElement("div");
+  var titleEl = document.createElement("div");
+  titleEl.className = "config-model-state-title";
+  titleEl.textContent = title;
+  textWrap.appendChild(titleEl);
+  if (detail) {
+    var detailEl = document.createElement("div");
+    detailEl.className = "config-model-state-detail";
+    detailEl.textContent = detail;
+    textWrap.appendChild(detailEl);
+  }
+  stateEl.appendChild(textWrap);
+  if (retry) {
+    var retryBtn = document.createElement("button");
+    retryBtn.type = "button";
+    retryBtn.className = "config-model-retry";
+    retryBtn.textContent = "Retry";
+    retryBtn.addEventListener("click", function() {
+      requestVendorModels(store.get('currentVendor') || "claude", true);
+    });
+    stateEl.appendChild(retryBtn);
+  }
+  configModelList.appendChild(stateEl);
+}
+
+export function renderModelPicker() {
+  if (!configModelList) return;
+  var s = store.snap();
+  var vendor = s.currentVendor || "claude";
+  var status = s.modelListVendor === vendor ? s.modelListStatus : "idle";
+  configModelList.innerHTML = "";
+
+  if (status === "loading") {
+    appendState("Loading models…", "Starting " + vendorDisplayName(vendor) + " and requesting its model catalog.", false);
+    return;
+  }
+  if (status === "error") {
+    appendState("Couldn’t load models", s.modelListError || "An unexpected error occurred.", true);
+    return;
+  }
+  if (status === "empty" || !s.currentModels || s.currentModels.length === 0) {
+    appendState("No models available", s.modelListError || "The vendor returned an empty model catalog.", true);
+    return;
+  }
+
+  for (var i = 0; i < s.currentModels.length; i++) {
+    var item = s.currentModels[i];
+    var value = modelEntryValue(item);
+    if (!value) continue;
+    var button = document.createElement("button");
+    button.className = "config-radio-item";
+    if (modelEntryMatches(item, s.currentModel)) button.classList.add("active");
+    button.dataset.model = value;
+    button.textContent = typeof item === "string" ? item : (item.displayName || value);
+    if (s.modelSelectionPending && s.modelSelectionPending.model === value) {
+      button.classList.add("pending");
+      button.textContent += " · Selecting…";
+    }
+    button.disabled = !!s.modelSelectionPending;
+    button.addEventListener("click", function() { requestModelSelection(this.dataset.model); });
+    configModelList.appendChild(button);
+  }
+
+  if (s.modelSelectionError) {
+    appendState("Model selection failed", s.modelSelectionError, false);
+  }
+}

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

@@ -23,6 +23,12 @@ export function reportPaneContext(data) {
   }, window.location.origin);
 }
 
+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);
+  return true;
+}
+
 // Toggle without setContextView: panes share localStorage with the main app,
 // so persisting here would silently rewrite the user's main-view preference.
 function togglePaneContextPanel() {

package/lib/public/modules/session-actions.js

@@ -0,0 +1,294 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { refreshIcons, iconHtml } from './icons.js';
+import { addSystemMessage, VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
+import { openPairDialog } from './split-pair-ui.js';
+import { buildAgentVendorSelect, fillAgentModels, buildAgentEffortSelect, fillAgentEffort } from './agent-config-selects.js';
+import { showToast } from './utils.js';
+
+var menu = null;
+var button = null;
+var outsideHandler = null;
+var escapeHandler = null;
+var handoffDialog = null;
+var handoffEscapeHandler = null;
+var handoffSubmitButton = null;
+
+function closeMenu() {
+  if (menu) menu.remove();
+  menu = null;
+  if (button) button.setAttribute("aria-expanded", "false");
+  if (outsideHandler) document.removeEventListener("pointerdown", outsideHandler, true);
+  if (escapeHandler) document.removeEventListener("keydown", escapeHandler);
+  outsideHandler = null;
+  escapeHandler = null;
+}
+
+function positionMenu() {
+  if (!menu || !button) return;
+  var rect = button.getBoundingClientRect();
+  var width = menu.offsetWidth;
+  menu.style.top = Math.round(rect.bottom + 6) + "px";
+  menu.style.left = Math.max(8, Math.round(rect.right - width)) + "px";
+}
+
+function actionRow(icon, label, description) {
+  var row = document.createElement("button");
+  row.type = "button";
+  row.className = "session-actions-row";
+  row.innerHTML = iconHtml(icon, "session-actions-row-icon") +
+    '<span class="session-actions-row-copy"><strong></strong><span></span></span>' +
+    iconHtml("chevron-right", "session-actions-row-chevron");
+  row.querySelector("strong").textContent = label;
+  row.querySelector(".session-actions-row-copy > span").textContent = description;
+  return row;
+}
+
+function menuShell(label) {
+  var el = document.createElement("div");
+  el.className = "session-actions-menu";
+  el.setAttribute("role", "menu");
+  el.setAttribute("aria-label", label);
+  document.body.appendChild(el);
+  menu = el;
+  button.setAttribute("aria-expanded", "true");
+  return el;
+}
+
+function installCloseHandlers() {
+  outsideHandler = function (event) {
+    if (menu && !menu.contains(event.target) && event.target !== button && !button.contains(event.target)) closeMenu();
+  };
+  escapeHandler = function (event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeMenu();
+      if (button) button.focus();
+    }
+  };
+  setTimeout(function () {
+    document.addEventListener("pointerdown", outsideHandler, true);
+    document.addEventListener("keydown", escapeHandler);
+  }, 0);
+}
+
+function closeHandoffDialog() {
+  if (handoffDialog) handoffDialog.remove();
+  if (handoffEscapeHandler) document.removeEventListener("keydown", handoffEscapeHandler);
+  handoffDialog = null;
+  handoffEscapeHandler = null;
+  handoffSubmitButton = null;
+}
+
+function handoffField(labelText, control) {
+  var field = document.createElement("div");
+  field.className = "handoff-modal-field";
+  var label = document.createElement("label");
+  label.className = "wt-modal-label";
+  label.textContent = labelText;
+  field.appendChild(label);
+  field.appendChild(control);
+  return field;
+}
+
+function requestHandoffDialog() {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) return;
+  closeMenu();
+  ws.send(JSON.stringify({ type: "handoff_session_options" }));
+}
+
+function showHandoffDialog(options) {
+  closeHandoffDialog();
+  var installed = options.installedVendors || [];
+  var vendorInfo = store.get('vendorInfo') || {};
+  if (store.get('isOsUsers')) {
+    installed = installed.filter(function (vendor) {
+      return !vendorInfo[vendor] || vendorInfo[vendor].osUserIsolation !== false;
+    });
+  }
+  if (installed.length < 1) {
+    showToast("Install a coding agent before continuing this session.", "error");
+    return;
+  }
+
+  var currentVendor = store.get('currentVendor') || "claude";
+  var currentModel = store.get('currentModel') || "";
+  var currentEffort = store.get('currentEffort') || "";
+  var container = document.createElement("div");
+  var overlay = document.createElement("div");
+  overlay.className = "wt-modal-overlay";
+  container.appendChild(overlay);
+  var modal = document.createElement("div");
+  modal.className = "wt-modal handoff-modal";
+  modal.setAttribute("role", "dialog");
+  modal.setAttribute("aria-modal", "true");
+  modal.setAttribute("aria-labelledby", "handoff-modal-title");
+
+  var title = document.createElement("div");
+  title.id = "handoff-modal-title";
+  title.className = "wt-modal-title";
+  title.textContent = "Continue in a new agent";
+  modal.appendChild(title);
+  var desc = document.createElement("div");
+  desc.className = "handoff-modal-desc";
+  desc.textContent = "Start an independent session with a focused copy of this conversation's context.";
+  modal.appendChild(desc);
+
+  var source = document.createElement("div");
+  source.className = "handoff-modal-source";
+  var sourceAvatar = document.createElement("img");
+  sourceAvatar.src = VENDOR_AVATARS[currentVendor] || VENDOR_AVATARS.claude;
+  sourceAvatar.alt = "";
+  source.appendChild(sourceAvatar);
+  var sourceCopy = document.createElement("span");
+  var sourceTitle = document.createElement("strong");
+  sourceTitle.textContent = document.getElementById("header-title").textContent || "Current session";
+  var sourceMeta = document.createElement("span");
+  sourceMeta.textContent = "From " + (VENDOR_NAMES[currentVendor] || currentVendor);
+  sourceCopy.appendChild(sourceTitle);
+  sourceCopy.appendChild(sourceMeta);
+  source.appendChild(sourceCopy);
+  modal.appendChild(source);
+
+  var vendorSelect = buildAgentVendorSelect(installed, currentVendor);
+  var modelSelect = document.createElement("select");
+  modelSelect.className = "wt-modal-input";
+  var effortSelect = buildAgentEffortSelect();
+  var vendorField = handoffField("Agent", vendorSelect);
+  var modelField = handoffField("Model", modelSelect);
+  var effortField = handoffField("Reasoning effort", effortSelect);
+  modal.appendChild(vendorField);
+  modal.appendChild(modelField);
+  modal.appendChild(effortField);
+
+  function syncEffort(preferred) {
+    fillAgentEffort(effortSelect, vendorSelect.value, options, modelSelect.value, preferred);
+    var capabilities = (options.capabilitiesByVendor && options.capabilitiesByVendor[vendorSelect.value]) || {};
+    effortField.style.display = capabilities.effort === false ? "none" : "";
+  }
+  fillAgentModels(modelSelect, vendorSelect.value, options, vendorSelect.value === currentVendor ? currentModel : "");
+  syncEffort(vendorSelect.value === currentVendor ? currentEffort : "");
+  vendorSelect.addEventListener("change", function () {
+    fillAgentModels(modelSelect, vendorSelect.value, options, "");
+    syncEffort("");
+  });
+  modelSelect.addEventListener("change", function () { syncEffort(effortSelect.value); });
+
+  var actions = document.createElement("div");
+  actions.className = "wt-modal-actions";
+  var cancel = document.createElement("button");
+  cancel.type = "button";
+  cancel.className = "wt-modal-btn";
+  cancel.textContent = "Cancel";
+  var submit = document.createElement("button");
+  submit.type = "button";
+  submit.className = "wt-modal-btn primary";
+  submit.textContent = "Continue";
+  actions.appendChild(cancel);
+  actions.appendChild(submit);
+  modal.appendChild(actions);
+  container.appendChild(modal);
+  document.body.appendChild(container);
+  handoffDialog = container;
+  handoffSubmitButton = submit;
+
+  cancel.addEventListener("click", closeHandoffDialog);
+  overlay.addEventListener("click", closeHandoffDialog);
+  handoffEscapeHandler = function (event) {
+    if (event.key === "Escape") closeHandoffDialog();
+  };
+  document.addEventListener("keydown", handoffEscapeHandler);
+  submit.addEventListener("click", function () {
+    var ws = getWs();
+    if (!ws || ws.readyState !== 1) return;
+    ws.send(JSON.stringify({
+      type: "handoff_session",
+      targetVendor: vendorSelect.value,
+      model: modelSelect.value,
+      effort: effortSelect.value,
+    }));
+    submit.disabled = true;
+    submit.textContent = "Continuing…";
+  });
+  vendorSelect.focus();
+}
+
+function showMainMenu() {
+  closeMenu();
+  var el = menuShell("Session actions");
+  var addWorker = actionRow("bot", "Add AI Worker", "Open a second agent beside this session.");
+  addWorker.addEventListener("click", function () {
+    var sessionId = store.get('activeSessionId');
+    if (!sessionId) return;
+    closeMenu();
+    openPairDialog({
+      sessionId: sessionId,
+      title: document.getElementById("header-title").textContent,
+      vendor: store.get('currentVendor') || "claude",
+    });
+  });
+  var handoff = actionRow("forward", "Continue in another agent", "Carry this conversation into a new session.");
+  var unavailable = !store.get('sessionHasHistory') || store.get('sessionIsProcessing');
+  handoff.disabled = unavailable;
+  handoff.title = unavailable ? "Available after the current turn is complete" : "";
+  handoff.addEventListener("click", requestHandoffDialog);
+  el.appendChild(addWorker);
+  el.appendChild(handoff);
+  refreshIcons();
+  positionMenu();
+  installCloseHandlers();
+}
+
+function updateVisibility() {
+  if (!button) return;
+  var state = store.snap();
+  var hidden = !state.activeSessionId || state.dmMode || state.paneMode || !!state.splitPanes || state.activeSessionMode !== "gui";
+  button.classList.toggle("hidden", hidden);
+  if (hidden) closeMenu();
+}
+
+export function initSessionActions() {
+  button = document.getElementById("header-session-actions-btn");
+  if (!button) return;
+  button.addEventListener("click", function () {
+    if (menu) closeMenu();
+    else showMainMenu();
+  });
+  store.subscribe(function (state, prev) {
+    if (state.activeSessionId !== prev.activeSessionId || state.dmMode !== prev.dmMode ||
+        state.paneMode !== prev.paneMode || state.splitPanes !== prev.splitPanes ||
+        state.activeSessionMode !== prev.activeSessionMode) updateVisibility();
+  });
+  window.addEventListener("resize", closeMenu);
+  updateVisibility();
+}
+
+export function handleSessionActionMessage(msg) {
+  if (msg.type === "handoff_session_options") {
+    showHandoffDialog(msg);
+    return true;
+  }
+  if (msg.type === "session_handoff_result") {
+    if (msg.ok) closeHandoffDialog();
+    else {
+      showToast(msg.error || "Could not continue the session in another agent.", "error");
+      if (handoffSubmitButton) {
+        handoffSubmitButton.disabled = false;
+        handoffSubmitButton.textContent = "Continue";
+      }
+    }
+    return true;
+  }
+  if (msg.type === "handoff_context") {
+    var sourceName = VENDOR_NAMES[msg.sourceVendor] || msg.sourceVendor || "another agent";
+    addSystemMessage("Continued from “" + (msg.sourceTitle || "Untitled session") + "” in " + sourceName + ".", false);
+    return true;
+  }
+  if (msg.type === "handoff_created") {
+    var targetName = VENDOR_NAMES[msg.targetVendor] || msg.targetVendor || "another agent";
+    addSystemMessage("Continued in a new " + targetName + " session.", false);
+    return true;
+  }
+  return false;
+}

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

@@ -15,7 +15,7 @@ import {
   resolveDefaultVendor,
   startNewSession
 } from './sidebar-sessions.js';
-import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES } from './app-rendering.js';
+import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES, isExperimentalVendor } from './app-rendering.js';
 import {
   getCachedProjectList,
   getCachedCurrentSlug,
@@ -754,6 +754,7 @@ function renderMobileSessionsInto(container) {
       if (vendor === mobileDefaultVendor) vBtn.classList.add("active");
       vBtn.innerHTML = '<img src="' + VENDOR_AVATARS[vendor] + '" class="mobile-session-new-icon" alt="">' +
         '<span>' + name + '</span>' +
+        (isExperimentalVendor(vendor) ? '<span class="vendor-experimental-badge" aria-label="Experimental integration" title="Experimental integration; not yet validated through direct use testing">🧪</span>' : '') +
         (isInstalled ? "" : '<span class="mobile-vendor-note">Not installed</span>');
       vBtn.addEventListener("click", function () {
         if (!isInstalled) {

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

@@ -12,7 +12,7 @@ import { dismissOverlayPanels, closeSidebar, updatePageTitle, spawnDustParticles
 import { showConfirm } from './app-misc.js';
 import { getUpcomingSchedules } from './scheduler.js';
 import { refreshMobileChatSheet } from './sidebar-mobile.js';
-import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES } from './app-rendering.js';
+import { VENDOR_AVATARS, VENDOR_NAMES, VENDOR_ORDER, VENDOR_HOMEPAGES, isExperimentalVendor } from './app-rendering.js';
 import { openGroup, separateGroup } from './split-view.js';
 import { groupedSessionIds } from './split-group-helpers.js';
 import { openPairDialog } from './split-pair-ui.js';
@@ -394,10 +394,12 @@ function showNewSessionMenu(anchorBtn, defaultVendor) {
       item.type = "button";
       item.innerHTML = '<img src="' + VENDOR_AVATARS[vendor] + '" class="session-top-action-icon" alt="">' +
         '<span class="session-new-vendor-name">' + name + '</span>' +
+        (isExperimentalVendor(vendor) ? '<span class="vendor-experimental-badge" aria-label="Experimental integration" title="Experimental integration; not yet validated through direct use testing">🧪</span>' : '') +
         (isInstalled ? "" : '<span class="session-new-vendor-note">Not installed</span>' + iconHtml("external-link"));
       item.title = isInstalled
         ? "New " + name + " session"
         : name + " is not installed - open " + VENDOR_HOMEPAGES[vendor];
+      if (isExperimentalVendor(vendor)) item.title += " · Experimental integration; not yet validated through direct use testing";
       item.addEventListener("click", function (e) {
         e.stopPropagation();
         closeSessionCtxMenu();
@@ -975,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");
@@ -1094,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>';
@@ -1203,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;
@@ -1252,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>';
   }
@@ -1320,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);