clay-server 5.3.0-beta.5 → 5.3.0-beta.7

package/lib/public/modules/agent-message-bubbles.js

@@ -0,0 +1,96 @@
+import { dismissTooltip } from './tooltip.js';
+import { renderMarkdown } from './markdown.js';
+import { store } from './store.js';
+
+var timer = null;
+function context() { return JSON.stringify([store.get('myUserId') || null, store.get('currentSlug'), store.get('projectSplitViewSocketGeneration') || 0]); }
+export function messagePreviewKey(kind, identities) { return JSON.stringify([context(), kind].concat(identities)); }
+function element() { return document.getElementById('agent-message-bubble'); }
+function anchor(key) { return Array.from(document.querySelectorAll('[data-message-preview]')).find(function (node) { return node.dataset.messagePreview === key && node.isConnected && node.getClientRects().length && !node.closest('[hidden], .split-pane-cached'); }); }
+function remove() {
+  if (timer) clearTimeout(timer); timer = null;
+  var node = element(); if (node) node.remove();
+  document.querySelectorAll('[aria-describedby="agent-message-bubble"]').forEach(function (chip) { chip.removeAttribute('aria-describedby'); });
+  if (store.get('agentMessageBubble')) store.set({ agentMessageBubble: null });
+}
+function position() {
+  var state = store.get('agentMessageBubble'), node = element(), chip = state && anchor(state.key);
+  if (!chip || !node) { remove(); return; }
+  var rect = chip.getBoundingClientRect(), width = Math.min(360, innerWidth - 20);
+  var left = Math.max(10, Math.min(rect.left, innerWidth - width - 10));
+  node.style.width = width + 'px'; node.style.left = left + 'px'; node.style.top = Math.min(rect.bottom + 8, innerHeight - 70) + 'px';
+  node.style.setProperty('--bubble-tip-x', Math.max(16, Math.min(width - 16, rect.left + Math.min(rect.width / 2, 40) - left)) + 'px');
+}
+function renderMetadata(node, latest) {
+  var meta = node.querySelector('.agent-message-bubble-meta');
+  if (!meta) { meta = document.createElement('div'); meta.className = 'agent-message-bubble-meta'; node.prepend(meta); }
+  meta.textContent = '';
+  var vendor = (store.get('vendorInfo') || {})[latest.vendor] || {};
+  if (vendor.avatar) {
+    var avatar = document.createElement('img'); avatar.className = 'agent-message-bubble-avatar';
+    avatar.src = vendor.avatar; avatar.alt = ''; meta.appendChild(avatar);
+  }
+  var name = document.createElement('span'); name.className = 'agent-message-bubble-vendor';
+  name.textContent = vendor.displayName || 'Assistant'; meta.appendChild(name);
+  var time = document.createElement('time'); time.className = 'agent-message-bubble-time';
+  if (latest.timestamp && Number.isFinite(new Date(latest.timestamp).getTime())) {
+    var date = new Date(latest.timestamp); time.dateTime = date.toISOString();
+    time.textContent = date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    time.setAttribute('aria-label', 'Message time: ' + date.toLocaleString());
+  } else time.textContent = 'Time unavailable';
+  meta.appendChild(time);
+}
+function show(key, held, fresh) {
+  var latest = (store.get('agentMessagePreviews') || {})[key], chip = anchor(key);
+  if (!latest || !chip || store.get('splitViewWorkerConversation') || store.get('backgroundTaskViewer') || store.get('paneSuspended') || document.hidden || !store.get('connected')) return;
+  var old = store.get('agentMessageBubble'), expires = fresh ? Date.now() + 7000 : old && old.key === key ? old.expiresAt : 0;
+  var node = element();
+  if (!node || !old || old.key !== key || fresh) {
+    if (node) node.remove();
+    document.querySelectorAll('[aria-describedby="agent-message-bubble"]').forEach(function (other) { other.removeAttribute('aria-describedby'); });
+    node = document.createElement('div'); node.id = 'agent-message-bubble'; node.className = 'agent-message-bubble';
+    node.setAttribute('role', 'tooltip'); var text = document.createElement('div'); text.className = 'agent-message-bubble-text'; node.appendChild(text); document.body.appendChild(node);
+  }
+  renderMetadata(node, latest);
+  node.querySelector('.agent-message-bubble-text').innerHTML = DOMPurify.sanitize(renderMarkdown(latest.text), { ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'code', 'pre', 'ul', 'ol', 'li', 'blockquote', 'del', 's'], ALLOWED_ATTR: [], ALLOW_DATA_ATTR: false }); node.dataset.held = String(!!held); node.dataset.live = String(expires > Date.now());
+  dismissTooltip();
+  chip.setAttribute('aria-describedby', node.id);
+  store.set({ agentMessageBubble: { key: key, expiresAt: expires, held: !!held } }); position();
+  if (timer) clearTimeout(timer);
+  if (expires > Date.now()) timer = setTimeout(function () {
+    timer = null; var state = store.get('agentMessageBubble'); if (state && state.key === key && !state.held) remove();
+  }, Math.max(0, expires - Date.now()));
+}
+export function rememberAgentMessage(key, preview, live) {
+  if (!preview || typeof preview.id !== 'string' || typeof preview.text !== 'string' || !preview.text.trim()) return;
+  var all = Object.assign({}, store.get('agentMessagePreviews') || {}), previous = all[key];
+  var fresh = !previous || previous.id !== preview.id;
+  all[key] = { id: preview.id, text: preview.text.slice(0, 1200), vendor: preview.vendor || previous && previous.vendor || null, timestamp: typeof preview.timestamp === 'number' && Number.isFinite(preview.timestamp) && preview.timestamp > 0 ? preview.timestamp : previous && previous.id === preview.id ? previous.timestamp : null };
+  var keys = Object.keys(all); while (keys.length > 128) delete all[keys.shift()];
+  store.set({ agentMessagePreviews: all });
+  var state = store.get('agentMessageBubble'), chip = anchor(key);
+  var held = !!(chip && (chip.matches(':hover') || chip.contains(document.activeElement)));
+  if (live && fresh || held || state && state.key === key) show(key, held || !!(state && state.key === key && state.held), !!live && fresh);
+}
+export function bindAgentMessageBubble(chip, key) {
+  chip.dataset.messagePreview = key;
+  if (chip.dataset.previewBound) return;
+  chip.dataset.previewBound = 'true';
+  function enter() { show(chip.dataset.messagePreview, true, false); }
+  function leave() {
+    var state = store.get('agentMessageBubble'); if (!state || state.key !== chip.dataset.messagePreview || chip.matches(':hover') || chip.contains(document.activeElement)) return;
+    if (state.expiresAt <= Date.now()) remove(); else show(state.key, false, false);
+  }
+  chip.addEventListener('pointerenter', enter); chip.addEventListener('pointerleave', leave);
+  chip.addEventListener('focusin', enter); chip.addEventListener('focusout', leave);
+  var state = store.get('agentMessageBubble'); if (state && state.key === key) requestAnimationFrame(position);
+}
+store.subscribe(function (state, previous) {
+  if (state.splitViewWorkerConversation && !previous.splitViewWorkerConversation || state.backgroundTaskViewer && !previous.backgroundTaskViewer) remove();
+  if (state.sessionOriginId !== previous.sessionOriginId || state.currentSlug !== previous.currentSlug || state.myUserId !== previous.myUserId || state.projectSplitViewSocketGeneration !== previous.projectSplitViewSocketGeneration || state.connected === false && previous.connected !== false || state.projectSplitViewActiveId !== previous.projectSplitViewActiveId || state.paneSuspended === true && previous.paneSuspended !== true) {
+    remove(); if (Object.keys(state.agentMessagePreviews || {}).length) store.set({ agentMessagePreviews: {} });
+  }
+});
+document.addEventListener('keydown', function (event) { if (event.key === 'Escape') remove(); });
+document.addEventListener('visibilitychange', function () { if (document.hidden) remove(); });
+window.addEventListener('resize', position); window.addEventListener('scroll', function (event) { if (!element() || event.target === element()) return; position(); }, true);

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

@@ -1,3 +1,4 @@
+import { highlightCodeBlocks, renderMermaidBlocks } from './markdown.js';
 import { beginProjectDebatePrepend, endProjectDebatePrepend } from './project-debate-workspace.js';
 // app-header.js - Session rename, session info popover, progressive history loading
 // Extracted from app.js (PR-34)
@@ -422,6 +423,11 @@ export function prependOlderHistory(items, meta) {
   updateContextPanel();
   updateUsagePanel();
 
+  // History prepend deliberately skipped per-message enhancements during replay.
+  // Run the same completed-replay pass after restoring the live render state.
+  highlightCodeBlocks(messagesEl);
+  renderMermaidBlocks(messagesEl);
+
   // Fix scroll: restore anchor element to same visual position
   if (anchorEl) {
     var newTop = anchorEl.getBoundingClientRect().top;

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

@@ -1,3 +1,7 @@
+import { handleSplitSessionCreated, finishPickerCreation } from './split-view-picker-actions.js';
+import { handleWorkerMessagePreview } from './worker-message-previews.js';
+import { handleBackgroundTaskPreview } from './background-task-previews.js';
+import { handleBackgroundTaskRead } from './background-task-viewer.js';
 import { showCreatedWorkerPresentation } from './worker-created-presentation.js';
 import { handleWorkerRemovalResult } from './split-view-worker-removal.js';
 import { handleStudioDocumentMessage } from './clay-studio-document.js';
@@ -152,6 +156,7 @@ export function processMessage(msg) {
   if (handleScheduledTaskMessage(msg)) return;
   if (handleKnowledgeWorkbenchMessage(msg)) return;
   if (handleSessionCreateMessage(msg)) return;
+  if (handleSplitSessionCreated(msg)) return;
   if (msg && msg.type === "new_session_result" && handleNewSessionResult(msg)) return;
   if (handleDefaultVendorMessage(msg)) return;
   if (handleContextViewMessage(msg)) return;
@@ -281,14 +286,6 @@ export function processMessage(msg) {
         if (messagesEl && msg.sessionId === store.get("activeSessionId") && msg.sessionOriginId === store.get("sessionOriginId")) { messagesEl.dataset.controlSessionId = String(msg.sessionId); messagesEl.dataset.controlSessionOrigin = msg.sessionOriginId; messagesEl.dataset.controlHistoryRevision = msg.controlHistoryRevision || ""; }
         store.set({ replayingHistory: false });
         resumeThinkingAfterReplay(store.get('sessionIsProcessing'));
-        // Batched syntax highlight + mermaid pass for the entire replayed
-        // transcript. Per-message highlights are skipped during replay
-        // (see markdown.js) to avoid cascading reflows that the sticky-
-        // bottom observer chases for several seconds on long sessions.
-        if (messagesEl) {
-          highlightCodeBlocks(messagesEl);
-          renderMermaidBlocks(messagesEl);
-        }
         // Compact dead-session todo widgets (unfinished items will never
         // resolve — the agent isn't coming back) so they don't anchor
         // visual position mid-page on resume.
@@ -314,6 +311,15 @@ export function processMessage(msg) {
           markAllToolsDone();
           finalizeAssistantBlock();
         }
+        // Enhance only after the final replay flush has finished writing Markdown.
+        // Batched syntax highlight + mermaid pass for the entire replayed
+        // transcript. Per-message highlights are skipped during replay
+        // (see markdown.js) to avoid cascading reflows that the sticky-
+        // bottom observer chases for several seconds on long sessions.
+        if (messagesEl) {
+          highlightCodeBlocks(messagesEl);
+          renderMermaidBlocks(messagesEl);
+        }
         stopUrgentBlink();
         // Clean up debate UI if debate is not active after replay
         if (!isDebateActive()) {
@@ -790,6 +796,7 @@ export function processMessage(msg) {
         renderMateSessionList(msg.sessions || []);
         renderSessionList(msg.sessions || []);
         store.set({ paneBindingSessions: msg.sessions || [] });
+        finishPickerCreation();
         requestProjectSplitViews();
         refreshPaneActivation();
         syncGithubSessions(msg.sessions || []);
@@ -1467,8 +1474,18 @@ export function processMessage(msg) {
         updateSubagentTaskStatus(msg.parentToolId, msg.patch);
         break;
 
+      case "split_worker_message_preview":
+        handleWorkerMessagePreview(msg);
+        break;
+      case "background_task_preview":
+        handleBackgroundTaskPreview(msg);
+        break;
+      case "background_task_read":
+        handleBackgroundTaskRead(msg);
+        break;
+
       case "active_background_tasks":
-        store.set({ activeBackgroundTasks: Array.isArray(msg.tasks) ? msg.tasks : [] });
+        store.set({ activeBackgroundTasks: Array.isArray(msg.tasks) ? msg.tasks : [], backgroundTaskCatalog: Array.isArray(msg.catalog) ? msg.catalog : msg.tasks || [] });
         break;
 
       case "result":

package/lib/public/modules/background-task-previews.js

@@ -0,0 +1,8 @@
+import { store } from './store.js';
+import { messagePreviewKey, rememberAgentMessage } from './agent-message-bubbles.js';
+export function backgroundPreviewKey(task) { return messagePreviewKey('background', [store.get('sessionOriginId'), task.task_id, task.run_id || null]); }
+export function handleBackgroundTaskPreview(message) {
+  if (!store.get('connected') || message.sessionOriginId !== store.get('sessionOriginId')) return;
+  var task = (store.get('backgroundTaskCatalog') || []).find(function (task) { return task.task_id === message.taskId && (task.run_id || null) === (message.runId || null); });
+  if (task) rememberAgentMessage(backgroundPreviewKey(task), message.preview, message.live === true);
+}

package/lib/public/modules/background-task-viewer.js

@@ -0,0 +1,97 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { appendWorkerTranscript } from './split-view-worker-transcript.js';
+import { captureWorkerDisclosures, restoreWorkerDisclosures, workerActivityNames } from './split-view-worker-activity.js';
+import { iconHtml, refreshIcons } from './icons.js';
+
+function panel() { return document.getElementById('background-task-viewer'); }
+function current(state) {
+  return state && store.get('connected') && state.socketGeneration === store.get('projectSplitViewSocketGeneration') && state.origin === store.get('sessionOriginId') &&
+    state.slug === store.get('currentSlug') && state.owner === store.get('myUserId') &&
+    (store.get('backgroundTaskCatalog') || []).some(function (task) { return task.task_id === state.taskId && (task.run_id || null) === state.runId; });
+}
+export function closeBackgroundTask(focus) {
+  var state = store.get('backgroundTaskViewer');
+  if (state && state.timer) clearTimeout(state.timer);
+  if (state && state.timeout) clearTimeout(state.timeout);
+  store.set({ backgroundTaskViewer: null });
+  var element = panel(); if (element) element.remove();
+  if (focus && state) {
+    var chip = document.querySelector('[data-background-task="' + CSS.escape(state.taskId) + '"]'); if (chip) chip.focus();
+  }
+}
+export function openBackgroundTask(task) {
+  closeBackgroundTask(false);
+  var state = { taskId: task.task_id, runId: task.run_id || null, title: task.description || 'Background task',
+    origin: store.get('sessionOriginId'), slug: store.get('currentSlug'), owner: store.get('myUserId'), socketGeneration: store.get('projectSplitViewSocketGeneration'), offset: 0 };
+  if (!current(state)) return;
+  store.set({ backgroundTaskViewer: state });
+  var element = document.createElement('section'); element.id = 'background-task-viewer'; element.className = 'split-view-worker-popover background-task-viewer';
+  element.setAttribute('role', 'dialog'); element.setAttribute('aria-label', 'Background task conversation');
+  element.innerHTML = '<header class="split-view-worker-popover-header"><strong></strong><button type="button" aria-label="Close background task">' + iconHtml('x') + '</button></header>' +
+    '<div class="split-view-worker-popover-source">Read-only · Native background task</div><div class="split-view-worker-popover-body readonly-session-transcript" tabindex="0"></div>' +
+    '<footer class="split-view-worker-popover-footer"><span role="status"></span><button type="button" data-page="previous">Previous</button><button type="button" data-page="next">Next</button><button type="button" data-retry>Refresh</button></footer>';
+  element.querySelector('strong').textContent = state.title;
+  element.querySelector('[aria-label="Close background task"]').addEventListener('click', function () { closeBackgroundTask(true); });
+  element.querySelector('[data-retry]').addEventListener('click', request);
+  element.querySelectorAll('[data-page]').forEach(function (button) { button.addEventListener('click', function () {
+    var live = store.get('backgroundTaskViewer'); if (!current(live) || live.pending) return;
+    store.set({ backgroundTaskViewer: Object.assign({}, live, { offset: button.dataset.page === 'next' ? live.offset + 100 : Math.max(0, live.offset - 100) }) }); request();
+  }); });
+  document.body.appendChild(element); refreshIcons(); request();
+  element.querySelector('button').focus();
+}
+function request() {
+  var state = store.get('backgroundTaskViewer');
+  if (!current(state)) { closeBackgroundTask(false); return; }
+  if (state.pending) return;
+  if (state.timer) clearTimeout(state.timer);
+  var id = crypto.randomUUID();
+  var timeout = setTimeout(function () {
+    var live = store.get('backgroundTaskViewer'); if (!live || live.requestId !== id) return;
+    store.set({ backgroundTaskViewer: Object.assign({}, live, { pending: false, timeout: null }) });
+    var element = panel(); if (element) element.querySelector('[role="status"]').textContent = 'Task read timed out. Use Refresh to retry.';
+  }, 18000);
+  store.set({ backgroundTaskViewer: Object.assign({}, state, { requestId: id, pending: true, timeout: timeout, timer: null }) });
+  var sent = getWs().send(JSON.stringify({ type: 'background_task_read', requestId: id, taskId: state.taskId, runId: state.runId, sessionOriginId: state.origin, offset: state.offset }));
+  if (sent === false) { clearTimeout(timeout); var live = store.get('backgroundTaskViewer'); if (live && live.requestId === id) { store.set({ backgroundTaskViewer: Object.assign({}, live, { pending: false, timeout: null }) }); panel().querySelector('[role="status"]').textContent = 'Task pane is not ready. Use Refresh to retry.'; } }
+}
+export function handleBackgroundTaskRead(message) {
+  var state = store.get('backgroundTaskViewer'), element = panel();
+  if (!element || !current(state) || message.requestId !== state.requestId || message.sessionOriginId !== state.origin ||
+      message.taskId !== state.taskId || (message.runId || null) !== state.runId) return;
+  clearTimeout(state.timeout);
+  var body = element.querySelector('.split-view-worker-popover-body'), footer = element.querySelector('[role="status"]');
+  var data = message.data;
+  if (message.error) { footer.textContent = message.error; state = Object.assign({}, state, { failures: (state.failures || 0) + 1 }); }
+  else if (data) {
+    var signature = JSON.stringify(data), changed = signature !== state.signature;
+    if (changed) {
+      var follow = body.scrollHeight - body.scrollTop - body.clientHeight < 48, top = body.scrollTop;
+      var disclosures = captureWorkerDisclosures(body); body.textContent = '';
+      if (data.kind === 'shell') { var pre = document.createElement('pre'); pre.textContent = data.output || 'No output yet.'; body.appendChild(pre); }
+      else appendWorkerTranscript(body, data.messages || [], { vendor: 'claude', userName: 'Parent agent', assistantName: 'Background agent' });
+      restoreWorkerDisclosures(body, disclosures);
+      body.scrollTop = follow ? body.scrollHeight : top;
+    }
+    footer.textContent = (data.active ? 'Running' : 'Finished') + (data.truncated ? ' · Last 8 KiB of output' : '') +
+      (data.kind === 'agent' && !data.messages.length ? ' · No transcript messages yet' : '');
+    element.querySelector('[data-page="previous"]').hidden = data.kind !== 'agent' || state.offset === 0;
+    element.querySelector('[data-page="next"]').hidden = !data.hasMore;
+    state = Object.assign({}, state, { signature: signature, failures: 0 });
+  }
+  var task = (store.get('backgroundTaskCatalog') || []).find(function (item) { return item.task_id === state.taskId; });
+  var timer = task && task.active !== false && (state.failures || 0) < 3 ? setTimeout(function () { if (!document.hidden) request(); else schedule(); }, 2000) : null;
+  store.set({ backgroundTaskViewer: Object.assign({}, state, { pending: false, timeout: null, timer: timer }) });
+}
+function schedule() {
+  var state = store.get('backgroundTaskViewer'); if (!current(state)) return;
+  var timer = setTimeout(function () { if (!document.hidden) request(); else schedule(); }, 2000);
+  store.set({ backgroundTaskViewer: Object.assign({}, state, { timer: timer }) });
+}
+store.subscribe(function (state, prev) {
+  if (state.backgroundTaskViewer && (state.sessionOriginId !== prev.sessionOriginId || state.currentSlug !== prev.currentSlug ||
+      state.myUserId !== prev.myUserId || state.projectSplitViewSocketGeneration !== prev.projectSplitViewSocketGeneration || !state.connected || state.backgroundTaskCatalog !== prev.backgroundTaskCatalog && !current(state.backgroundTaskViewer))) closeBackgroundTask(false);
+});
+document.addEventListener('keydown', function (event) { if (event.key === 'Escape' && panel()) { event.preventDefault(); closeBackgroundTask(true); } });
+document.addEventListener('click', function (event) { var element = panel(); if (element && !element.contains(event.target) && !event.target.closest('[data-background-task]')) closeBackgroundTask(false); });

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

@@ -1,28 +1,17 @@
-// 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 { bindAgentMessageBubble, rememberAgentMessage } from './agent-message-bubbles.js';
+import { backgroundPreviewKey } from './background-task-previews.js';
+// Native background work uses the same compact conversation chips as Workers.
 
+import { openBackgroundTask } from './background-task-viewer.js';
 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) {
-    if (state.activeBackgroundTasks !== prev.activeBackgroundTasks) renderBackgroundTasks();
+    if (state.sessionOriginId !== prev.sessionOriginId || state.currentSlug !== prev.currentSlug) { store.set({ activeBackgroundTasks: [], backgroundTaskCatalog: [] }); return; }
+    if (state.backgroundTaskViewer !== prev.backgroundTaskViewer) document.querySelectorAll('[data-background-task]').forEach(function (chip) { var view = state.backgroundTaskViewer; chip.setAttribute('aria-expanded', String(!!view && chip.dataset.backgroundTask === view.taskId)); });
+    if (state.activeBackgroundTasks !== prev.activeBackgroundTasks || state.backgroundTaskCatalog !== prev.backgroundTaskCatalog) renderBackgroundTasks();
   });
   renderBackgroundTasks();
 }
@@ -45,37 +34,6 @@ 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>';
-}
-
 // Ambient tasks are the CLI's own housekeeping. The SDK asks hosts to keep
 // them out of activity indicators; Clay still lists them so the user can see
 // what runs on their behalf. Absent means false (Codex has no ambient concept,
@@ -96,83 +54,34 @@ export function splitTasks(tasks) {
   return { user: user, ambient: ambient };
 }
 
-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' + (isAmbientTask(task) ? ' ambient' : '') + '">' +
-    '<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 split = splitTasks(tasks);
-  var existing = document.getElementById('background-tasks-bar');
-  // Ambient-only means nothing the user asked for is running, so the composer
-  // stays quiet: no bar, no dots, no count.
-  if (split.user.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' + (expanded ? ' expanded' : '');
-
-  var taskLabel = split.user.length === 1 ? 'background task' : 'background tasks';
-  var summary = split.user.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) {
-    var now = Date.now();
-    html += '<div class="background-tasks-list" id="background-tasks-list">';
-    for (var i = 0; i < split.user.length; i++) html += taskRowHtml(split.user[i], now);
-    // Housekeeping is shown, not hidden: the user can see what Clay runs on
-    // its own and stop a runaway one. Kept visually subordinate to real work.
-    if (split.ambient.length > 0) {
-      html += '<div class="background-tasks-section-label">Housekeeping</div>';
-      for (var a = 0; a < split.ambient.length; a++) html += taskRowHtml(split.ambient[a], now);
+  var existing = document.getElementById('background-tasks-bar'); if (existing) existing.remove();
+  var split = splitTasks(store.get('backgroundTaskCatalog') || store.get('activeBackgroundTasks') || []);
+  var tasks = split.user.length ? split.user.concat(split.ambient) : [];
+  var root = document.getElementById('background-task-tabs');
+  if (!tasks.length) { if (root) root.remove(); return; }
+  var messages = document.getElementById('messages'); if (!messages) return;
+  if (!root) { root = document.createElement('div'); root.id = 'background-task-tabs'; root.className = 'split-view-workers background-task-tabs'; root.setAttribute('aria-label', 'Background tasks'); messages.parentNode.insertBefore(root, messages); }
+  var signature = JSON.stringify(tasks.map(function (task) { return [task.task_id, task.run_id, task.active, task.description]; }));
+  if (root.dataset.signature === signature) return;
+  root.dataset.signature = signature; root.textContent = '';
+  tasks.forEach(function (task) {
+    var pill = document.createElement('span'); pill.className = 'split-view-worker-pill' + (task.ambient ? ' background-task-ambient' : '');
+    var button = document.createElement('button'); button.type = 'button'; button.className = 'split-view-worker-chip'; button.dataset.backgroundTask = task.task_id;
+    bindAgentMessageBubble(button, backgroundPreviewKey(task));
+    if (task.preview) rememberAgentMessage(backgroundPreviewKey(task), task.preview, false);
+    button.title = (task.ambient ? 'Housekeeping · ' : '') + (task.description || 'Background task') + (task.started_at ? ' · ' + formatElapsed(task.started_at) : '') + (task.active === false ? ' · Finished' : ' · Running'); button.setAttribute('aria-haspopup', 'dialog');
+    var view = store.get('backgroundTaskViewer'); button.setAttribute('aria-expanded', String(!!view && view.taskId === task.task_id));
+    var dot = document.createElement('span'); dot.className = 'split-view-worker-dot'; dot.dataset.state = task.active === false ? 'ready' : 'working';
+    var label = document.createElement('span'); label.className = 'split-view-worker-name'; label.textContent = task.description || 'Background task';
+    dot.setAttribute('aria-label', task.active === false ? 'Finished' : 'Running');
+    button.append(dot, label); button.addEventListener('click', function () { openBackgroundTask(task); }); pill.appendChild(button);
+    if (task.active !== false) {
+      var stop = document.createElement('button'); stop.type = 'button'; stop.className = 'split-view-worker-remove'; stop.setAttribute('aria-label', 'Stop ' + (task.description || 'background task')); stop.title = 'Stop task'; stop.innerHTML = iconHtml('square');
+      stop.addEventListener('click', function () { var ws = getWs(); if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'background_task_stop', requestId: crypto.randomUUID(), taskId: task.task_id, runId: task.run_id || null, sessionOriginId: store.get('sessionOriginId') })); });
+      pill.appendChild(stop);
     }
-    html += '</div>';
-  }
-  bar.innerHTML = html;
-  if (!existing) inputArea.parentNode.insertBefore(bar, inputArea);
-  refreshIcons();
-
-  bar.querySelector('.background-tasks-toggle').addEventListener('click', function () {
-    expanded = !expanded;
-    renderBackgroundTasks();
+    root.appendChild(pill);
   });
-
-  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 }));
-    });
-  }
-
-  if (expanded) startElapsedTimer();
-  else stopElapsedTimer();
+  refreshIcons();
 }

package/lib/public/modules/chat-bubble-renderer.js

@@ -39,7 +39,7 @@ function appendIdentity(row, options, avatarClass) {
 
 export function createAssistantBubble(options) {
   options = options || {};
-  var row = document.createElement("div");
+  var row = document.createElement(options.tagName || "div");
   row.className = "msg-assistant";
   if (options.turn !== undefined && options.turn !== null) row.dataset.turn = options.turn;
   var contentWrap = appendIdentity(row, options, "dm-bubble-avatar-mate");
@@ -52,7 +52,7 @@ export function createAssistantBubble(options) {
 
 export function createUserBubble(options) {
   options = options || {};
-  var row = document.createElement("div");
+  var row = document.createElement(options.tagName || "div");
   row.className = "msg-user";
   if (options.turn !== undefined && options.turn !== null) row.dataset.turn = options.turn;
   var contentWrap = appendIdentity(row, options, "dm-bubble-avatar-me");
@@ -70,11 +70,17 @@ function assistantContent(row) {
   return row ? row.querySelector(".md-content") : null;
 }
 
-export function renderAssistantBubbleText(row, text, highlight) {
+export function renderAssistantBubbleText(row, text, highlight, options) {
   var content = assistantContent(row);
   if (!content) return null;
-  content.innerHTML = renderMarkdown(text || "");
-  enhanceClaySessionLinks(content);
+  var html = renderMarkdown(text || "");
+  if (options && options.readOnly) html = DOMPurify.sanitize(html, {
+    ALLOWED_TAGS: ['p', 'br', 'strong', 'em', 'del', 's', 'blockquote', 'ul', 'ol', 'li', 'pre', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'a', 'wbr'],
+    ALLOWED_ATTR: ['href', 'title', 'target', 'rel', 'start', 'class'], ALLOW_DATA_ATTR: false
+  });
+  content.innerHTML = html;
+  if (options && options.readOnly) content.querySelectorAll('[class]').forEach(function (element) { if (element.tagName !== 'CODE' && element.tagName !== 'PRE') element.removeAttribute('class'); });
+  if (!options || !options.readOnly) enhanceClaySessionLinks(content);
   if (highlight) highlightCodeBlocks(content);
   return content;
 }

package/lib/public/modules/clay-file-links.js

@@ -63,10 +63,11 @@ export function renderLocalFileLink(href, title, text) {
   var label = text || target.path;
   var tooltip = target.path + (target.line ? ":" + target.line + (target.column ? ":" + target.column : "") : "");
   var state = store.snap();
+  var fragment = target.href.indexOf('#') >= 0 && !target.line ? decode(target.href.slice(target.href.indexOf('#') + 1)) : '';
   var projectAttr = state.currentSlug ? ' data-file-project-slug="' + escapeHtml(String(state.currentSlug)) + '"' : '';
   var sessionAttr = state.activeSessionId != null ? ' data-file-session-id="' + escapeHtml(String(state.activeSessionId)) + '"' : '';
   return '<button type="button" class="clay-file-link" data-file-path="' + escapeHtml(target.path) + '"' +
-    projectAttr + sessionAttr +
+    projectAttr + sessionAttr + (fragment ? ' data-file-heading="' + escapeHtml(fragment) + '"' : '') +
     (target.line ? ' data-file-line="' + target.line + '"' : '') +
     (target.column ? ' data-file-column="' + target.column + '"' : '') +
     ' title="' + escapeHtml(tooltip) + '" aria-label="Open file ' + escapeHtml(tooltip) + '">' +

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

@@ -1,3 +1,4 @@
+import { toolPaneScreen, toolPaneRendering } from './clay-tool-pane-screen.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { livePaneBinding } from './pane-binding.js';
@@ -13,6 +14,8 @@ export function splitViewScreenSnapshot() {
     viewId: view ? view.id : null, revision: view ? view.revision : 0, tree: view ? view.tree : null,
     focusOrigin: state.projectSplitViewFocusedOrigin || null, singletonOrigin: state.projectSplitViewSingletonOrigin || null,
     activeSessionId: state.activeSessionId || null,
+    tools: toolPaneScreen(view, hidden),
+    expandedPaneId: (toolPaneScreen(view, hidden).find(function (tool) { return tool.expanded; }) || {}).instanceId || null,
     panes: Array.from(document.querySelectorAll('.split-pane-frame')).slice(0, 32).map(function (frame) {
       var live = frame.clayPane && frame.clayPane.identity(), binding = live && live.binding;
       var ready = !!livePaneBinding(frame), cached = !!frame.closest('.split-pane-cached');
@@ -60,10 +63,10 @@ export function applySplitViewNavigation(target) {
 }
 function renderedTarget(snapshot, target) {
   var exact = snapshot && !snapshot.hidden && snapshot.viewId === target.view.id && snapshot.revision === target.view.revision &&
-    snapshot.focusOrigin === target.focusOrigin && JSON.stringify(snapshot.tree) === JSON.stringify(target.view.tree);
-  var expected = target.view.sessions.filter(function (session) { return !target.focusOrigin || session.sessionOriginId === target.focusOrigin; });
+    snapshot.focusOrigin === target.focusOrigin && (snapshot.expandedPaneId || null) === (target.view.workspace && target.view.workspace.presentation && target.view.workspace.presentation.expandedPaneId || null) && JSON.stringify(snapshot.tree) === JSON.stringify(target.view.tree);
+  var expected = target.view.sessions.filter(function (session) { return snapshot && !snapshot.expandedPaneId && (!target.focusOrigin || session.sessionOriginId === target.focusOrigin); });
   var shown = snapshot ? snapshot.panes.filter(function (pane) { return pane.visible; }) : [];
-  return !!(exact && shown.length === expected.length && expected.every(function (session) { return shown.some(function (pane) { return pane.origin === session.sessionOriginId && pane.sessionId === session.id && pane.ready && !pane.cached; }); }));
+  return !!(exact && toolPaneRendering(snapshot, target.view) && shown.length === expected.length && expected.every(function (session) { return shown.some(function (pane) { return pane.origin === session.sessionOriginId && pane.sessionId === session.id && pane.ready && !pane.cached; }); }));
 }
 export function observeSplitViewRendering(msg, socket) {
   var target = msg.target;

package/lib/public/modules/clay-tool-pane-screen.js

@@ -0,0 +1,35 @@
+import { TOOL_PANES } from './tool-pane-tree.js';
+import { store } from './store.js';
+import { visible } from './clay-navigation-render.js';
+import { paneOwner } from './view-workspace-state.js';
+import { filePaneState } from './file-pane-instances.js';
+export function toolPaneScreen(view, hidden) {
+  if (!view || !view.workspace) return [];
+  var run = store.get('savedWorkspaceRuntime');
+  return view.workspace.panes.filter(function (pane) { return pane.kind !== 'session'; }).slice(0, 16).map(function (pane) {
+    var name = paneOwner(pane), panel = document.getElementById(pane.kind === 'file' ? name : TOOL_PANES[name] && TOOL_PANES[name].id);
+    var file = pane.kind === 'file' ? filePaneState(pane.instanceId) : null;
+    var unavailable = !!(run && run.unavailable[name] || file && file.error);
+    var exact = false;
+    if (pane.kind === 'workbench') exact = !!(panel && !panel.classList.contains('hidden') && (store.get('rightWorkbenchOwner') === name || (store.get('rightWorkbenchDockedOwners') || []).indexOf(name) >= 0));
+    else if (pane.kind === 'file') exact = !!(file && file.resource && file.resource.path === pane.resource.path && file.resource.mode === pane.resource.mode && file.resource.rendered === pane.resource.rendered && (file.content != null || file.binary));
+    else if (pane.kind === 'terminal') {
+      var terminal = store.get('savedViewTerminalResource');
+      exact = !!(terminal && terminal.id === pane.resource.id && terminal.identity === pane.resource.identity && terminal.runtimeId === pane.resource.runtimeId && (store.get('clayControlTerminalViews') || []).some(function (item) { return item.id === terminal.id && item.identity === terminal.identity && !item.exited; }));
+    } else {
+      var browser = store.get('sharedBrowser');
+      exact = !!(browser && browser.id === pane.resource.id && browser.phase !== 'ended' && store.get('controlRuntimeId') === pane.resource.runtimeId && store.get('sessionOriginId') === pane.resource.sessionOriginId);
+    }
+    var ready = !!(pane.open && panel && !unavailable && exact);
+    var shown = !!(!hidden && pane.open && panel && visible(panel));
+    var rect = shown ? panel.getBoundingClientRect() : null;
+    function pixel(value) { return Math.max(-100000, Math.min(100000, Math.round(value))); }
+    return { instanceId: pane.instanceId, kind: pane.kind, placement: panel && panel.dataset && ['docked', 'overlay'].indexOf(panel.dataset.workbenchPlacement) >= 0 ? panel.dataset.workbenchPlacement : null, expanded: !!(pane.open && panel && panel.classList && panel.classList.contains('panel-fullscreen')), visible: shown, ready: ready, unavailable: unavailable,
+      geometry: rect ? { x: pixel(rect.x), y: pixel(rect.y), width: Math.max(0, pixel(rect.width)), height: Math.max(0, pixel(rect.height)) } : null };
+  });
+}
+export function toolPaneRendering(snapshot, view) {
+  var expected = view.workspace ? view.workspace.panes.filter(function (pane) { return pane.kind !== 'session' && pane.open && (!snapshot.focusOrigin || snapshot.expandedPaneId || pane.placement === 'overlay') && (!view.workspace.presentation || !view.workspace.presentation.expandedPaneId || view.workspace.presentation.expandedPaneId === pane.instanceId); }) : [];
+  var tools = snapshot.tools || [];
+  return expected.every(function (pane) { return tools.some(function (tool) { return tool.instanceId === pane.instanceId && tool.kind === pane.kind && tool.placement === pane.placement && !!tool.expanded === !!(view.workspace.presentation && view.workspace.presentation.expandedPaneId === pane.instanceId) && tool.visible && tool.ready && !tool.unavailable; }); }) && tools.filter(function (tool) { return tool.visible; }).length === expected.length;
+}