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

package/lib/public/css/split-view-layout.css

@@ -405,13 +405,23 @@ body.split-view-resizing .split-pane-frame { pointer-events: none; }
 .split-view-worker-popover-header strong { flex: 1; min-width: 0; font-size: 12px; }
 .split-view-worker-popover-source { padding: 0 13px 10px; color: var(--text-dimmer); font-size: 10px; }
 .split-view-worker-popover-body { flex: 1; min-height: 0; overflow: auto; padding: 14px; }
-.split-view-worker-popover-body .message { display: flex; flex-direction: column; align-items: stretch; margin: 0 0 18px; padding: 0; max-width: none; }
-.split-view-worker-popover-body .author { display: block; margin-bottom: 4px; font-size: 11px; color: var(--text-muted); }
-.split-view-worker-popover-body .message-body { white-space: normal; overflow-wrap: anywhere; font-size: 12px; line-height: 1.65; }
-.split-view-worker-popover-body .message-body pre { white-space: pre-wrap; }
-.split-view-worker-popover-body .worker-tool-message pre { max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
-.split-view-worker-popover-body .worker-tool-message summary { cursor: pointer; font-size: 13px; }
-.split-view-worker-popover-body .worker-tool-message { padding: 6px 8px; border-radius: 5px; background: var(--bg-alt); }
+/* Use session anatomy unchanged; only transcript typography is reduced. */
+.readonly-session-transcript { --content-width: 100%; font-size: 12px; }
+.readonly-session-transcript .md-content,
+.readonly-session-transcript .msg-user .bubble,
+body.wide-view .readonly-session-transcript .msg-user .bubble,
+.readonly-session-transcript .dm-bubble-name,
+.readonly-session-transcript .tool-name,
+.readonly-session-transcript .tool-desc,
+.readonly-session-transcript .tool-group-label { font-size: 12px; }
+.readonly-session-transcript .dm-bubble-time,
+.readonly-session-transcript .tool-subtitle,
+.readonly-session-transcript .tool-subtitle-text,
+.readonly-session-transcript .clay-tool-evidence-label { font-size: 9.6px; }
+.readonly-session-transcript .tool-result-block,
+.readonly-session-transcript .tool-result-block pre { font-size: 10.4px; }
+.readonly-session-transcript .clay-tool-technical-name,
+.readonly-session-transcript .msg-copy-hint { font-size: 8.8px; }
 .split-view-worker-popover-footer { padding: 8px 13px; border-top: 1px solid var(--border-subtle); color: var(--text-dimmer); font-size: 10px; }
 .split-view-worker-page-status { display: block; margin-top: 3px; line-height: 1.4; }
 .split-view-worker-popover-footer button { margin-left: 8px; padding: 4px 6px; font-size: 10px; }
@@ -496,3 +506,78 @@ body.is-dragging .split-pane-header, body.is-dragging .split-pane-drag-space { c
   box-shadow: inset 0 0 0 1px var(--accent-20);
   pointer-events: none;
 }
+
+/* Native tasks use the same compact conversation affordance as Split Workers. */
+.background-task-tabs { border-bottom: 1px solid var(--border-subtle); }
+.background-task-tabs .split-view-worker-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.background-task-viewer { top: 42px; right: 12px; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 58px); }
+.background-task-viewer .split-view-worker-popover-body > pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
+.background-task-viewer [hidden] { display: none; }
+.background-task-ambient { opacity: .65; }
+
+.agent-message-bubble {
+  position: fixed; z-index: 60; box-sizing: border-box; padding: 10px 12px;
+  border: 1px solid var(--border); border-radius: 9px; background: var(--bg);
+  color: var(--text); box-shadow: 0 5px 16px rgba(0, 0, 0, .16);
+  font-size: 12px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
+  pointer-events: none; max-height: 180px;
+}
+.agent-message-bubble::before {
+  content: ''; position: absolute; top: -5px; left: var(--bubble-tip-x, 20px); width: 8px; height: 8px;
+  background: var(--bg); border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg);
+}
+.agent-message-bubble[data-live="true"] { animation: agent-message-fade 7s linear forwards; }
+.agent-message-bubble[data-held="true"] { opacity: 1 !important; }
+@keyframes agent-message-fade { from { opacity: 1; } to { opacity: 0; } }
+@media (prefers-reduced-motion: reduce) { .agent-message-bubble[data-live="true"] { animation: none; } }
+
+.agent-message-bubble-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
+
+/* Shared compact, anchored session insertion picker. */
+.split-session-picker { padding: 5px; color: var(--text); }
+.split-session-picker[data-stage="direction"] { width: min(212px, calc(100vw - 16px)); }
+.split-session-picker[data-stage="sessions"] { width: min(360px, calc(100vw - 16px)); }
+.split-session-directions { display: flex; flex-direction: column; gap: 2px; }
+.split-session-directions button { display: flex; align-items: center; gap: 8px; height: 29px; padding: 4px 8px; text-align: left; font-size: 12px; }
+.split-session-picker svg { width: 15px; height: 15px; flex-shrink: 0; }
+.split-session-search { display: flex; align-items: center; gap: 7px; margin: 0 4px 5px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); }
+.split-session-search:focus-within { outline: 2px solid var(--accent); outline-offset: -1px; }
+.split-session-search input { width: 100%; min-width: 0; border: 0; padding: 0; background: transparent; color: var(--text); font: inherit; font-size: 13px; outline: 0; }
+.split-session-section { padding: 7px 8px 4px; font-size: 10px; color: var(--text-muted); }
+.split-session-results { max-height: min(260px, 35dvh); overflow-y: auto; }
+.split-session-picker .split-session-result { display: flex; align-items: center; width: 100%; min-height: 34px; gap: 8px; padding: 6px 8px; font-size: 12px; text-align: left; }
+.split-session-result img { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; }
+.split-session-result-title { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.split-session-result small { font-size: 10px; color: var(--text-muted); flex-shrink: 0; }
+.split-session-move { display: block; overflow: hidden; text-overflow: ellipsis; }
+.split-session-new { margin-top: 5px; border-top: 1px solid var(--border-subtle); }
+.split-session-vendors { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 7px 7px; }
+.split-session-vendors button { display: flex; align-items: center; justify-content: center; height: 30px; min-width: 30px; padding: 5px; border: 1px solid var(--border); border-radius: 6px; }
+.split-session-vendors img { width: 20px; height: 20px; }
+.split-session-empty { padding: 8px; font-size: 11px; color: var(--text-muted); }
+.split-session-status { margin: 0; padding: 0 7px; font-size: 11px; color: var(--text-secondary); }
+.split-session-hint { display: block; border-top: 1px solid var(--border-subtle); padding: 6px 7px 2px; font-size: 10px; color: var(--text-muted); }
+
+.agent-message-bubble-text { white-space: normal; max-height: 55.8px; }
+.agent-message-bubble-text p { margin: 0 0 4px; }
+.agent-message-bubble-text > :last-child { margin-bottom: 0; }
+.agent-message-bubble-text :is(ul, ol) { margin: 3px 0; padding-left: 18px; }
+.agent-message-bubble-text code { font-size: 11px; background: var(--bg-alt); border-radius: 3px; padding: 1px 3px; }
+.agent-message-bubble-text pre { margin: 4px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
+.agent-message-bubble-text pre code { padding: 0; }
+.agent-message-bubble-text blockquote { margin: 4px 0; padding-left: 8px; border-left: 2px solid var(--border); }
+
+/* A split reserves its destination before a session is selected. */
+.split-session-empty-pane { position: absolute; display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--bg); }
+.split-session-empty-body { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: safe center; justify-content: center; padding: 16px; overflow: auto; }
+.split-session-empty-body > .split-session-picker { position: relative; flex: 0 1 360px; width: 360px; min-width: 0; max-width: 100%; max-height: 100%; margin: auto 0; display: flex; flex-direction: column; }
+.split-session-empty-body .split-session-results { flex: 1 1 auto; min-height: 36px; max-height: 220px; }
+.split-session-empty-body .split-view-arrange-header, .split-session-empty-body .split-session-search, .split-session-empty-body .split-session-section, .split-session-empty-body .split-session-vendors, .split-session-empty-body .split-session-status, .split-session-empty-body .split-session-hint { flex-shrink: 0; }
+.split-session-reserved-divider { position: absolute; pointer-events: none; }
+@media (max-width: 700px) { .split-session-empty-body { padding: 8px; } }
+.split-session-empty-body > .split-session-picker[hidden] { display: none; }
+
+.agent-message-bubble-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; color: var(--text-muted); font-size: 10px; line-height: 16px; white-space: nowrap; }
+.agent-message-bubble-avatar { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; flex: none; }
+.agent-message-bubble-vendor { overflow: hidden; text-overflow: ellipsis; }
+.agent-message-bubble-time { margin-left: auto; flex: none; font-variant-numeric: tabular-nums; }

package/lib/public/css/tool-pane.css

@@ -9,21 +9,18 @@
 .tool-pane-header .workbench-layout-toggle { width: 24px !important; height: 24px !important; flex-basis: 24px !important; }
 .tool-pane-header .workbench-layout-toggle svg { width: 13px !important; height: 13px !important; }
 /* Tabs use the compact inset pills of the Split Worker row. */
-.tool-pane-tab-row, .tool-pane-header ~ .shared-browser-tabs {
+.tool-pane-tab-row {
   display: flex; align-items: center; gap: 5px; padding: 4px 11px; min-height: 30px; height: auto;
   flex-shrink: 0; overflow-x: auto; background: var(--bg); border-bottom: 0; scrollbar-width: thin;
 }
 .tool-pane-tab-row .terminal-tabs, .tool-pane-tab-row .file-viewer-tabs { display: flex; gap: 5px; min-width: 0; overflow: auto; border: 0; }
-.tool-pane-tab-row :is(.terminal-tab, .file-viewer-tab), .tool-pane-header ~ .shared-browser-tabs .shared-browser-tab {
+.tool-pane-tab-row :is(.terminal-tab, .file-viewer-tab) {
   display: inline-flex; align-items: center; flex: 0 0 auto; gap: 5px; min-width: 0; max-width: 284px;
   height: 22px; min-height: 22px; padding: 0 6px; border: 1px solid var(--border-subtle); border-radius: 5px;
   background: var(--bg-alt); color: var(--text-muted); font-size: 11px; line-height: 20px;
 }
-.tool-pane-tab-row :is(.terminal-tab.active, .file-viewer-tab.active), .tool-pane-header ~ .shared-browser-tabs .shared-browser-tab:has([aria-selected="true"]) { border-color: var(--accent-20); background: var(--accent-bg); color: var(--text-secondary); }
-.tool-pane-header ~ .shared-browser-tabs .shared-browser-tab { padding: 0; gap: 0; }
-.tool-pane-header ~ .shared-browser-tabs .shared-browser-tab > [role="tab"] { min-width: 0; padding: 0 6px; height: 20px; border: 0; background: transparent; font-size: 11px; }
-.tool-pane-header ~ .shared-browser-tabs .shared-browser-tab small { display: none; }
-.tool-pane-tab-row :is(.terminal-tab-more, .file-viewer-tab-close), .tool-pane-header ~ .shared-browser-tabs .shared-browser-tab > button:not([role="tab"]) { width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: var(--text-dimmer); }
+.tool-pane-tab-row :is(.terminal-tab.active, .file-viewer-tab.active) { border-color: var(--accent-20); background: var(--accent-bg); color: var(--text-secondary); }
+.tool-pane-tab-row :is(.terminal-tab-more, .file-viewer-tab-close) { width: 20px; height: 20px; padding: 0; border: 0; background: transparent; color: var(--text-dimmer); }
 .tool-pane-tab-row .terminal-tab-more svg { width: 11px; height: 11px; }
 .tool-pane-tab-row .terminal-new-tab-btn { height: 22px; width: 22px; padding: 3px; flex-shrink: 0; }
 @media (min-width: 1024px) {

package/lib/public/index.html

@@ -75,8 +75,8 @@ body { background: transparent; color: inherit; }
     <button id="cmd-palette-btn" class="cmd-palette-searchbar" data-tip="Search conversations across all vendors.&#10;Ask Clay to find past work, reviews, decisions, and unfinished sessions." data-tip-suppress-when-open=".cmd-palette" aria-label="Search or ask Clay"><i data-lucide="search" aria-hidden="true"></i><span class="cmd-palette-searchbar-text">Search or ask Clay, like “What was I working on recently?”</span><kbd class="cmd-palette-searchbar-kbd"></kbd></button>
     <div class="top-bar-actions">
       <!-- Pill badges -->
-      <div id="skip-perms-pill" class="top-bar-pill pill-error hidden"><i data-lucide="shield-off"></i> <span>Skip perms</span></div>
-      <div id="client-count" class="top-bar-pill pill-accent hidden"><i data-lucide="users"></i> <span id="client-count-text"></span></div>
+      <div id="skip-perms-pill" class="top-bar-pill pill-error hidden" data-tip="Permission prompts are skipped"><i data-lucide="shield-off"></i> <span>Skip perms</span></div>
+      <div id="client-count" class="top-bar-pill pill-accent hidden" data-tip="Browsers connected to this project"><i data-lucide="users"></i> <span id="client-count-text"></span></div>
       <!-- Right workbench controls: same nodes and handlers as before; app JS returns them to the title bar on mobile. -->
       <button type="button" id="shared-browser-toggle-btn" class="hidden" title="Browser" aria-label="Browser" aria-controls="shared-browser-panel" aria-expanded="false" disabled><i data-lucide="globe"></i><span class="shared-browser-count hidden" aria-hidden="true"></span></button>
       <button id="terminal-toggle-btn" title="Terminal"><i data-lucide="square-terminal"></i><span id="terminal-count" class="hidden"></span></button>
@@ -307,9 +307,9 @@ body { background: transparent; color: inherit; }
           <button id="header-info-btn" type="button" title="Session info"><i data-lucide="info"></i></button>
           <div id="header-full-access-btn" class="session-permission-control hidden" role="group" aria-label="Session permission mode">
             <div class="session-permission-segmented">
-              <button type="button" data-permission-mode="default" aria-label="Ask permissions" title="Ask permissions"><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>
-              <button type="button" data-permission-mode="auto" aria-label="Auto permissions" title="Auto permissions"><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>
-              <button type="button" data-permission-mode="bypassPermissions" aria-label="YOLO permissions" title="YOLO permissions"><span class="permission-label">YOLO</span><span class="permission-spinner" aria-hidden="true"></span></button>
+              <button type="button" data-permission-mode="default" aria-label="Ask permissions" data-tip="Ask before tool actions that need permission. Previously allowed actions can run without asking again."><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>
+              <button type="button" data-permission-mode="auto" aria-label="Auto permissions" data-tip="Let the runtime assess tool actions and approve them automatically when allowed. Some actions may still need your permission."><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>
+              <button type="button" data-permission-mode="bypassPermissions" aria-label="YOLO permissions" data-tip="Run tools, file changes and commands without asking for permission. Clay access restrictions still apply."><span class="permission-label">YOLO</span><span class="permission-spinner" aria-hidden="true"></span></button>
             </div>
             <span class="session-permission-status hidden" aria-live="polite"></span>
           </div>

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); });