clay-server 5.2.0-beta.1 → 5.2.0-beta.11

package/lib/public/modules/clay-owner-navigation.js

@@ -0,0 +1,33 @@
+import { observeNavigationRendering } from './clay-navigation-render.js';
+import { showClayNavigationActivity, clearClayControlActivity } from './clay-control-activity.js';
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { navigateToSession } from './command-palette.js';
+function context() {
+  return JSON.stringify([store.get('currentSlug'), store.get('activeSessionId'), store.get('dmMode'), store.get('homeShellVisible'), store.get('homeChatMateId'), store.get('homeChatSessionId'), store.get('homeSubSurface'), (store.get('contextualClay') || {}).mode]);
+}
+export function handleOwnerNavigation(msg) {
+  if (msg.type !== 'clay_navigation_offer' && msg.type !== 'clay_navigation_apply') return false;
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) return true;
+  if (msg.type === 'clay_navigation_offer') {
+    if (document.hidden || store.get('paneMode')) return true;
+    store.set({ clayNavigationOffer: { id: msg.deliveryId, context: context(), socket: ws } });
+    ws.send(JSON.stringify({ type: 'clay_navigation_claim', deliveryId: msg.deliveryId }));
+    return true;
+  }
+  var offer = store.get('clayNavigationOffer');
+  store.set({ clayNavigationOffer: null });
+  var accepted = offer && offer.id === msg.deliveryId && offer.socket === ws && offer.context === context() && !document.hidden && !store.get('paneMode');
+  var status = 'refused';
+  if (accepted && msg.target && typeof msg.target.projectSlug === 'string' && Number.isSafeInteger(msg.target.sessionId)) {
+    try {
+      showClayNavigationActivity(msg.target, false); navigateToSession(msg.target, null, msg.target.entryIndex); status = 'accepted';
+    } catch (error) { showClayNavigationActivity(msg.target, true); status = 'failed'; }
+  }
+  if (status === 'refused') clearClayControlActivity();
+  // This acknowledges navigator invocation only. Rendering may finish after reconnect.
+  if (ws.readyState === 1) ws.send(JSON.stringify({ type: 'clay_navigation_ack', deliveryId: msg.deliveryId, status: status }));
+  if (status === 'accepted') observeNavigationRendering(msg, ws);
+  return true;
+}

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

@@ -0,0 +1,31 @@
+import { parseClaySessionReference, renderClaySessionLink } from './clay-log-links.js';
+
+// The prefix is a display compatibility label, never a navigation target.
+var citationPattern = /\[([A-Za-z0-9][A-Za-z0-9_-]{0,79})\/(session:[A-Za-z0-9_-]{24}(?:#entry-[0-9]+)?)(?:\s+[\u2014-]\s+([^\]\n]{1,80}))?\]/g;
+function matches(text) {
+  var pattern = new RegExp(citationPattern.source, 'g'), results = [], match;
+  while ((match = pattern.exec(text))) if (parseClaySessionReference(match[2])) results.push({ start: match.index, end: pattern.lastIndex, prefix: match[1], ref: match[2], label: match[3] || '' });
+  return results;
+}
+function button(match) {
+  var template = document.createElement('template');
+  template.innerHTML = renderClaySessionLink(match.ref, match.label);
+  return template.content.firstElementChild;
+}
+export function enhanceSessionCitations(root) {
+  // Historical assistants sometimes wrapped a whole project-labelled citation
+  // in inline code. Only that complete legacy token is a compatibility citation.
+  // Canonical code samples, mixed inline code and all fenced code stay literal.
+  if (root.closest('.msg-assistant')) root.querySelectorAll('code').forEach(function (code) {
+    if (code.closest('pre, a, button')) return;
+    var text = code.textContent || '', found = matches(text);
+    if (found.length === 1 && found[0].prefix !== 'clayos' && found[0].start === 0 && found[0].end === text.length) code.replaceWith(button(found[0]));
+  });
+  var walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT), nodes = [], node;
+  while ((node = walker.nextNode())) if (node.parentElement && !node.parentElement.closest('code, pre, a, button') && matches(node.nodeValue || '').length) nodes.push(node);
+  nodes.forEach(function (node) {
+    var text = node.nodeValue || '', fragment = document.createDocumentFragment(), offset = 0;
+    matches(text).forEach(function (match) { fragment.appendChild(document.createTextNode(text.slice(offset, match.start))); fragment.appendChild(button(match)); offset = match.end; });
+    fragment.appendChild(document.createTextNode(text.slice(offset))); node.replaceWith(fragment);
+  });
+}

package/lib/public/modules/clay-studio-bridge.js

@@ -0,0 +1,20 @@
+import { adoptDocumentSource, presentedDocument, initDocumentSource } from './clay-studio-document.js';
+import { acceptStudioForward, trustedStudioFrame, initStudioReceipts } from './clay-studio-render.js';
+import { presentMarkdownEdit, handleFileChanged } from './filebrowser.js';
+import { openWireframe } from './wireframe-workbench.js';
+
+export function initStudioBridge() {
+  initStudioReceipts(); initDocumentSource();
+  window.addEventListener('message', function (event) {
+    var data = event.data;
+    if (event.origin === location.origin && data && data.type === 'clay-studio-document-update' && data.message) {
+      var view = presentedDocument(data.message.path);
+      if (view && view.source === event.source && view.descriptor.token === data.token) handleFileChanged(data.message, view);
+      return;
+    }
+    if (!data || ['clay-pane-present-markdown', 'clay-pane-present-wireframe'].indexOf(data.type) < 0 || !data.message || !data.message.controlPresentation) return;
+    if (!trustedStudioFrame(event, data) || !acceptStudioForward(event, data)) return;
+    if (data.type === 'clay-pane-present-markdown') { adoptDocumentSource(event, data, trustedStudioFrame(event, data)); presentMarkdownEdit(data.message); }
+    else openWireframe(data.message);
+  });
+}

package/lib/public/modules/clay-studio-document.js

@@ -0,0 +1,67 @@
+import { showToast } from './utils.js';
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+
+function live(view) { var state = store.snap(); return view && state.connected && view.socket === getWs() && view.ownerId === (state.myUserId || null) && view.slug === state.currentSlug && view.sessionId === state.activeSessionId && view.origin === state.sessionOriginId && view.runtime === state.controlRuntimeId; }
+export function forwardDocumentSource(message) {
+  var old = store.get('studioDocumentSource');
+  if (old) clearTimeout(old.timer);
+  if (old && live(old)) old.socket.send(JSON.stringify({ type: 'fs_unwatch' }));
+  var state = store.snap(), view = { token: crypto.randomUUID(), socket: getWs(), ownerId: state.myUserId || null, slug: state.currentSlug, sessionId: state.activeSessionId, origin: state.sessionOriginId, runtime: state.controlRuntimeId, path: message.path, expires: Date.now() + 300000 };
+  view.timer = setTimeout(function () { if (store.get('studioDocumentSource') === view) { if (live(view)) view.socket.send(JSON.stringify({ type: 'fs_unwatch' })); store.set({ studioDocumentSource: null }); } }, 300000);
+  store.set({ studioDocumentSource: view });
+  if (live(view)) view.socket.send(JSON.stringify({ type: 'fs_watch', path: view.path }));
+  return Object.assign({}, message, { studioDocument: { token: view.token, sourceSlug: view.slug, sourceSessionId: view.sessionId, sourceOrigin: view.origin, runtimeId: view.runtime, expires: view.expires, path: view.path } });
+}
+export function adoptDocumentSource(event, data, frame) {
+  var document = data.message && data.message.studioDocument;
+  if (!frame || !document || document.path !== data.message.path || document.sourceSlug !== data.studioSource.slug || document.sourceSessionId !== data.studioSource.sessionId || document.sourceOrigin !== data.studioSource.origin || document.runtimeId !== data.studioSource.runtime) return;
+  closePresentedDocument();
+  var socket = getWs(); if (socket && socket.readyState === 1) socket.send(JSON.stringify({ type: 'fs_unwatch' }));
+  store.set({ fileReadRequest: null, pendingFileNavigation: null });
+  var view = { descriptor: document, frame: frame, document: frame.contentDocument, source: event.source, owner: store.get('myUserId'), context: store.get('currentSlug') };
+  view.timer = setTimeout(function () { if (store.get('studioDocumentView') === view) store.set({ studioDocumentView: { descriptor: view.descriptor, invalidated: true } }); }, Math.max(0, document.expires - Date.now()));
+  store.set({ studioDocumentView: view });
+}
+export function presentedDocument(path) {
+  var view = store.get('studioDocumentView');
+  if (!view || view.invalidated || !view.frame || Date.now() > view.descriptor.expires || view.descriptor.path !== path) return null;
+  var bridge = view.frame.clayStudioSource, identity = bridge && bridge.document === view.frame.contentDocument && bridge.window === view.source && bridge.identity();
+  return identity && identity.connected && identity.ownerId === view.owner && identity.slug === view.descriptor.sourceSlug && identity.sessionId === view.descriptor.sourceSessionId && identity.origin === view.descriptor.sourceOrigin && identity.runtime === view.descriptor.runtimeId && view.document === view.frame.contentDocument && view.source === view.frame.contentWindow && view.owner === store.get('myUserId') && view.context === store.get('currentSlug') ? view : null;
+}
+export function refreshPresentedDocument(path) {
+  var stored = store.get('studioDocumentView');
+  if (!stored || stored.descriptor.path !== path) return false;
+  var view = presentedDocument(path);
+  if (!view) { showToast('The source connection changed. Reopen this document from its conversation.'); return true; }
+  view.source.postMessage({ type: 'clay-studio-document-refresh', token: view.descriptor.token }, location.origin);
+  return true;
+}
+export function closePresentedDocument() {
+  var view = store.get('studioDocumentView');
+  if (view) clearTimeout(view.timer);
+  if (view && view.frame && view.source === view.frame.contentWindow && view.document === view.frame.contentDocument) view.source.postMessage({ type: 'clay-studio-document-close', token: view.descriptor.token }, location.origin);
+  store.set({ studioDocumentView: null });
+}
+export function handleStudioDocumentMessage(message) {
+  var view = store.get('studioDocumentSource');
+  if (!live(view) || Date.now() > view.expires || message.path !== view.path) return false;
+  if (message.type !== 'fs_file_changed' && !(message.type === 'fs_read_result' && message.requestId === view.requestId)) return false;
+  window.parent.postMessage({ type: 'clay-studio-document-update', token: view.token, message: message }, location.origin);
+  return true;
+}
+export function initDocumentSource() {
+  window.addEventListener('message', function (event) {
+    var data = event.data, view = store.get('studioDocumentSource');
+    if (event.origin !== location.origin || event.source !== window.parent || !data || !view || data.token !== view.token || !live(view)) return;
+    if (data.type === 'clay-studio-document-close') { clearTimeout(view.timer); view.socket.send(JSON.stringify({ type: 'fs_unwatch' })); store.set({ studioDocumentSource: null }); }
+    if (data.type === 'clay-studio-document-refresh' && Date.now() <= view.expires) {
+      view.requestId = 'studio-document-' + crypto.randomUUID();
+      view.socket.send(JSON.stringify({ type: 'fs_read', path: view.path, requestId: view.requestId, projectSlug: view.slug, sessionId: String(view.sessionId), accountId: view.ownerId }));
+    }
+  });
+  function stop() { var view = store.get('studioDocumentSource'); if (view) clearTimeout(view.timer); if (live(view)) view.socket.send(JSON.stringify({ type: 'fs_unwatch' })); store.set({ studioDocumentSource: null }); var presented = store.get('studioDocumentView'); closePresentedDocument(); if (presented) store.set({ studioDocumentView: { descriptor: presented.descriptor, invalidated: true } }); }
+  store.subscribe(function (state, old) { if (!state.connected && old.connected || state.currentSlug !== old.currentSlug || state.activeSessionId !== old.activeSessionId || state.myUserId !== old.myUserId) stop(); });
+  document.addEventListener('contextual-ask-stopped', stop, true);
+  document.addEventListener('click', function (event) { if (event.target.closest('#generation-stop, #autonomous-run-stop, #send-btn.stop')) stop(); }, true);
+}

package/lib/public/modules/clay-studio-render.js

@@ -0,0 +1,146 @@
+import { forwardDocumentSource } from './clay-studio-document.js';
+import { store } from './store.js';
+import { paneMessageBinding, livePaneBinding } from './pane-binding.js';
+import { getWs } from './ws-ref.js';
+import { contextualMateStamp } from './contextual-mate-identity.js';
+import { visibleTarget } from './clay-control-target-visibility.js';
+
+function validEvidence(evidence) {
+  var uuid = /^[a-f0-9-]{36}$/;
+  return evidence && evidence.version === 1 && uuid.test(evidence.id) && uuid.test(evidence.token) && /^activity:[a-f0-9-]{36}$/.test(evidence.activityId) && Number.isSafeInteger(evidence.deadline) &&
+    evidence.target && ['document', 'sketch', 'browser'].indexOf(evidence.target.surface) >= 0 && typeof evidence.target.key === 'string' && evidence.target.key.length <= 400 && /^[a-f0-9]{64}$/.test(evidence.target.revision);
+}
+function source(evidence, state) {
+  return validEvidence(evidence) && evidence.mateId === state.activeProjectMateId && evidence.sourceSlug === 'mate-' + evidence.mateId && evidence.ownerId === (state.myUserId || null) && evidence.runtimeId === state.controlRuntimeId && evidence.sourceSlug === state.currentSlug && evidence.sourceSessionId === state.activeSessionId && evidence.sourceSessionOriginId === state.sessionOriginId &&
+    (state.cachedMatesList || []).some(function (mate) { return mate.id === evidence.mateId && mate.builtinKey === 'clay' && !mate.archived && !mate.lifecycleDeletion && contextualMateStamp(mate) === evidence.sourceMateStamp; });
+}
+function currentActivity(evidence) {
+  var activity = store.get('clayControlActivity'), forwarded = store.get('clayControlForwarded');
+  var message = store.get('paneMode') ? forwarded : activity && activity.message;
+  return message && message.id === evidence.activityId && message.mateId === evidence.mateId && message.sourceSlug === evidence.sourceSlug && message.sourceSessionId === evidence.sourceSessionId && message.sourceSessionOriginId === evidence.sourceSessionOriginId && message.sourceMateStamp === evidence.sourceMateStamp && message.sourceQueryGeneration === evidence.sourceQueryGeneration && message.phase !== 'clear' && !(store.get('clayControlReceipts') || []).some(function (receipt) { return receipt.id === evidence.activityId && receipt.stopped; });
+}
+function binding() {
+  return { window: window, document: document, identity: function () { var s = store.snap(); return { ownerId: s.myUserId || null, slug: s.currentSlug, sessionId: s.activeSessionId, origin: s.sessionOriginId, connected: s.connected, runtime: s.controlRuntimeId, mateId: s.activeProjectMateId }; } };
+}
+export function forwardStudioPresentation(message, type) {
+  if (!store.get('paneMode') || window.parent === window) return false;
+  var frame = window.frameElement;
+  if (!frame) return false;
+  frame.clayStudioSource = binding();
+  var evidence = message.controlPresentation;
+  if (evidence && (!source(evidence, store.snap()) || !currentActivity(evidence))) return true;
+  if (type === 'clay-pane-present-markdown') message = forwardDocumentSource(message);
+  var receipts = Object.assign({}, store.get('clayStudioRelays') || {});
+  Object.keys(receipts).forEach(function (id) { if (Date.now() > receipts[id].evidence.deadline) delete receipts[id]; });
+  if (Object.keys(receipts).length >= 100) return true;
+  if (evidence) receipts[evidence.id] = { evidence: evidence, socket: getWs() };
+  store.set({ clayStudioRelays: receipts });
+  window.parent.postMessage({ type: type, message: message, paneBinding: paneMessageBinding(), studioSource: frame.clayStudioSource.identity() }, location.origin);
+  return true;
+}
+export function trustedStudioFrame(event, data) {
+  if (event.origin !== location.origin || !data || !data.studioSource) return null;
+  var frame = Array.from(document.querySelectorAll('#contextual-clay iframe, .split-pane-frame')).find(function (item) { return item.contentWindow === event.source; });
+  var bridge = frame && frame.clayStudioSource, live = bridge && bridge.window === frame.contentWindow && bridge.document === frame.contentDocument && bridge.identity();
+  var expected = data.studioSource;
+  if (!live || !live.connected || live.ownerId !== (store.get('myUserId') || null) || live.ownerId !== expected.ownerId || live.slug !== expected.slug || live.sessionId !== expected.sessionId || live.origin !== expected.origin || live.runtime !== expected.runtime) return null;
+  if (new URL(frame.src, location.href).pathname !== '/p/' + encodeURIComponent(live.slug) + '/') return null;
+  if (frame.classList.contains('split-pane-frame')) {
+    if (frame.clayPane && !livePaneBinding(frame, data)) return null;
+    var split = store.get('splitPanes');
+    if (!split || !split.panes.some(function (pane) { return pane.slug === live.slug && String(pane.sessionId) === String(live.sessionId); })) return null;
+  } else {
+    var conversation = frame.conversation, identity = conversation && conversation.document === frame.contentDocument && conversation.source === frame.contentWindow && conversation.identity();
+    if (!identity || !identity.connected || !identity.available || identity.ownerId !== live.ownerId || identity.sessionId !== live.sessionId || identity.sessionOriginId !== live.origin) return null;
+  }
+  var evidence = data.message && data.message.controlPresentation;
+  if (evidence && (!validEvidence(evidence) || evidence.sourceSlug !== 'mate-' + evidence.mateId || evidence.mateId !== live.mateId || !(store.get('cachedMatesList') || []).some(function (mate) { return mate.id === evidence.mateId && mate.builtinKey === 'clay' && !mate.archived && !mate.lifecycleDeletion && contextualMateStamp(mate) === evidence.sourceMateStamp; }) || evidence.sourceSlug !== live.slug || evidence.sourceSessionId !== live.sessionId || evidence.sourceSessionOriginId !== live.origin || evidence.ownerId !== live.ownerId || evidence.runtimeId !== live.runtime)) return null;
+  return frame;
+}
+export function acceptStudioForward(event, data) {
+  var frame = trustedStudioFrame(event, data), evidence = data.message && data.message.controlPresentation;
+  if (!frame || !evidence || !currentActivity(evidence) || Date.now() > evidence.deadline) return false;
+  var entries = Object.assign({}, store.get('clayStudioForwarded') || {});
+  Object.keys(entries).forEach(function (id) { if (Date.now() > entries[id].evidence.deadline) delete entries[id]; });
+  if (Object.keys(entries).length >= 100) return false;
+  entries[evidence.id] = { frame: frame, document: frame.contentDocument, window: event.source, data: data, evidence: evidence };
+  store.set({ clayStudioForwarded: entries });
+  return true;
+}
+function delivery(evidence) {
+  var socket = getWs(), owner = store.get('myUserId'), slug = store.get('currentSlug');
+  var relay = (store.get('clayStudioForwarded') || {})[evidence.id];
+  return {
+    valid: function () {
+      if (Date.now() > evidence.deadline || !currentActivity(evidence) || !store.get('connected') || owner !== store.get('myUserId') || slug !== store.get('currentSlug') || getWs() !== socket) return false;
+      return relay ? relay.document === relay.frame.contentDocument && relay.window === relay.frame.contentWindow && !!trustedStudioFrame({ origin: location.origin, source: relay.window }, relay.data) : source(evidence, store.snap());
+    },
+    send: function (visible) {
+      var message = { type: 'clay_studio_rendered', id: evidence.id, token: evidence.token, sessionOriginId: evidence.sourceSessionOriginId, revision: evidence.target.revision, visible: visible };
+      if (relay) { if (relay.document === relay.frame.contentDocument) relay.window.postMessage({ type: 'clay-studio-receipt', message: message }, location.origin); }
+      else if (getWs() === socket && socket && socket.readyState === 1) socket.send(JSON.stringify(message));
+    }
+  };
+}
+async function digest(value) {
+  var hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(JSON.stringify(value)));
+  return Array.from(new Uint8Array(hash)).map(function (byte) { return byte.toString(16).padStart(2, '0'); }).join('');
+}
+// Called only by the actual renderer after content has reached its real product surface.
+export function registerStudioPaint(message, element, ready, contentElement) {
+  if (!element) return;
+  delete element.dataset.controlSurface;
+  var evidence = message.controlPresentation;
+  if (!validEvidence(evidence)) return;
+  var receipt = delivery(evidence), settled = false, frame, timer, stable = 0;
+  var entry = { painted: false, evidence: evidence, target: evidence.target, element: element, valid: receipt.valid };
+  element.dataset.controlSurface = evidence.id;
+  var surfaces = Object.assign({}, store.get('clayStudioSurfaces') || {});
+  Object.keys(surfaces).forEach(function (id) { if (!surfaces[id].element.isConnected || surfaces[id].element === element || Date.now() > surfaces[id].evidence.deadline + 6000) delete surfaces[id]; });
+  surfaces[evidence.id] = entry; store.set({ clayStudioSurfaces: surfaces });
+  function finish(visible) { if (settled) return; settled = true; clearTimeout(timer); cancelAnimationFrame(frame); document.removeEventListener('visibilitychange', hidden); receipt.send(visible); }
+  entry.cancel = function () { finish(false); };
+  function hidden() { if (document.hidden) finish(false); }
+  document.addEventListener('visibilitychange', hidden);
+  timer = setTimeout(function () { finish(false); }, Math.max(0, evidence.deadline - Date.now()));
+  var content = evidence.target.surface === 'document' ? { content: message.content, exists: message.exists, size: message.size } : evidence.target.surface === 'sketch' ? message.source : message.data;
+  Promise.all([Promise.resolve(ready), digest(content)]).then(function (values) {
+    if (values[1] !== evidence.target.revision) { finish(false); return; }
+    function inspect() {
+      if (settled) return;
+      if (!receipt.valid() || document.hidden || element.dataset.controlSurface !== evidence.id) { finish(false); return; }
+      stable = painted(contentElement || element) ? stable + 1 : 0;
+      if (stable >= 2) { entry.painted = true; finish(true); } else frame = requestAnimationFrame(inspect);
+    }
+    frame = requestAnimationFrame(inspect);
+  }).catch(function () { finish(false); });
+}
+function painted(element) {
+  if (!element || !element.isConnected || element.closest('[hidden], [inert], [aria-hidden="true"]')) return false;
+  var rect = element.getBoundingClientRect(), style = getComputedStyle(element);
+  if (style.visibility !== 'visible' || Number(style.opacity) === 0) return false;
+  for (var parent = element.parentElement; parent; parent = parent.parentElement) {
+    var ancestorStyle = getComputedStyle(parent);
+    if (ancestorStyle.visibility !== 'visible' || Number(ancestorStyle.opacity) === 0) return false;
+  }
+  var left = Math.max(0, rect.left), right = Math.min(innerWidth, rect.right), top = Math.max(0, rect.top), bottom = Math.min(innerHeight, rect.bottom);
+  if (right <= left || bottom <= top) return false;
+  return [0.2, 0.5, 0.8].some(function (x) { return [0.2, 0.5, 0.8].some(function (y) { var hit = document.elementFromPoint(left + (right - left) * x, top + (bottom - top) * y); return hit && element.contains(hit); }); });
+}
+export function studioControlTarget(target) {
+  var entries = store.get('clayStudioSurfaces') || {};
+  var entry = Object.values(entries).find(function (item) { return item.painted && item.target.surface === target.surface && item.target.key === target.key && item.target.revision === target.revision && item.target.runtimeId === target.runtimeId && item.target.sourceSessionOriginId === target.sourceSessionOriginId && item.target.sourceSessionId === target.sourceSessionId && item.target.sourceSlug === target.sourceSlug && item.element.dataset.controlSurface === item.evidence.id && item.valid(); });
+  return entry && entry.element;
+}
+export function initStudioReceipts() {
+  window.addEventListener('message', function (event) {
+    if (event.origin !== location.origin || event.source !== window.parent || !event.data || event.data.type !== 'clay-studio-receipt') return;
+    var message = event.data.message, entries = Object.assign({}, store.get('clayStudioRelays') || {}), entry = message && entries[message.id];
+    if (!entry || entry.evidence.token !== message.token || !source(entry.evidence, store.snap()) || getWs() !== entry.socket || entry.socket.readyState !== 1 || Date.now() > entry.evidence.deadline) return;
+    delete entries[message.id]; store.set({ clayStudioRelays: entries }); entry.socket.send(JSON.stringify(message));
+  });
+  function stop() { Object.values(store.get('clayStudioSurfaces') || {}).forEach(function (entry) { delete entry.element.dataset.controlSurface; if (entry.cancel) entry.cancel(); }); store.set({ clayStudioRelays: {}, clayStudioForwarded: {}, clayStudioSurfaces: {} }); }
+  document.addEventListener('contextual-ask-stopped', stop, true);
+  document.addEventListener('click', function (event) { if (event.target.closest('#generation-stop, #autonomous-run-stop, #send-btn.stop')) stop(); }, true);
+  store.subscribe(function (state, prior) { if (!state.connected && prior.connected || state.currentSlug !== prior.currentSlug || state.activeSessionId !== prior.activeSessionId || state.myUserId !== prior.myUserId) stop(); });
+}

package/lib/public/modules/clay-tool-activity.js

@@ -0,0 +1,140 @@
+import { clayToolPresentation, clayToolOutcome } from './clay-tool-presentation.js';
+import { store } from './store.js';
+import { iconHtml, refreshIcons } from './icons.js';
+
+function bindDisclosure(header, toggle) {
+  header.setAttribute('role', 'button');
+  header.tabIndex = 0;
+  header.addEventListener('click', toggle);
+  header.addEventListener('keydown', function (event) {
+    if (event.key !== 'Enter' && event.key !== ' ') return;
+    event.preventDefault();
+    toggle();
+  });
+}
+
+export function syncToolGroupDisclosure(el) {
+  var expanded = !el.classList.contains('collapsed');
+  el.querySelector('.tool-group-header').setAttribute('aria-expanded', String(expanded));
+  var items = el.querySelector('.tool-group-items');
+  items.inert = !expanded;
+  items.setAttribute('aria-hidden', String(!expanded));
+}
+
+export function bindToolGroupDisclosure(el, onToggle) {
+  // History links may expand a group directly; keep disclosure semantics in sync.
+  if (typeof MutationObserver !== 'undefined') {
+    var observer = new MutationObserver(function () { syncToolGroupDisclosure(el); });
+    observer.observe(el, { attributes: true, attributeFilter: ['class'] });
+  }
+  bindDisclosure(el.querySelector('.tool-group-header'), function () {
+    el.classList.toggle('collapsed');
+    onToggle();
+    syncToolGroupDisclosure(el);
+  });
+}
+
+function detailsFor(tool) {
+  var block = tool.el.querySelector('.clay-tool-evidence');
+  if (!block) {
+    block = document.createElement('div');
+    block.className = 'tool-result-block clay-tool-evidence collapsed';
+    tool.el.appendChild(block);
+  }
+  return block;
+}
+function renderEvidence(tool, block) {
+  block.replaceChildren();
+  var name = document.createElement('div');
+  name.className = 'clay-tool-technical-name';
+  name.textContent = tool.name;
+  block.appendChild(name);
+  [['Input', tool.input], ['Output', tool.clayRawResult]].forEach(function (entry) {
+    if (entry[1] === undefined || entry[1] === null) return;
+    var heading = document.createElement('div');
+    heading.className = 'clay-tool-evidence-label';
+    heading.textContent = entry[0];
+    var pre = document.createElement('pre');
+    pre.textContent = typeof entry[1] === 'string' ? entry[1] : JSON.stringify(entry[1], null, 2);
+    block.appendChild(heading);
+    block.appendChild(pre);
+  });
+}
+function statusIcon(el, selector, phase) {
+  var icon = el.querySelector(selector);
+  var name = phase === 'error' || phase === 'cancelled' ? 'alert-triangle' : phase === 'pending' ? 'clock' : phase === 'running' ? 'loader' : phase === 'returned' ? 'circle-help' : 'check';
+  var cls = phase === 'running' ? 'icon-spin' : phase === 'error' || phase === 'cancelled' ? 'err-icon' : 'check';
+  icon.innerHTML = iconHtml(name, cls);
+}
+
+export function applyClayToolItem(tool) {
+  if (!tool || !tool.el) return false;
+  var presentation = clayToolPresentation(tool.name, tool.input, tool.clayOutcome);
+  if (!presentation) return false;
+  tool.clayActivity = presentation;
+  var el = tool.el;
+  var header = el.querySelector('.tool-header');
+  el.classList.add('clay-tool-activity');
+  el.dataset.activityPhase = presentation.phase;
+  el.classList.toggle('error', presentation.phase === 'error' || presentation.phase === 'cancelled');
+  el.querySelector('.tool-name').textContent = presentation.label;
+  el.querySelector('.tool-desc').textContent = presentation.subject;
+  el.querySelector('.tool-subtitle').hidden = true;
+  header.setAttribute('aria-label', presentation.label + (presentation.subject ? ' · ' + presentation.subject : '') + '. Show technical details');
+  if (!tool.clayDisclosureBound) {
+    tool.clayDisclosureBound = true;
+    bindDisclosure(header, function () {
+      var expanded = el.classList.toggle('expanded');
+      var block = detailsFor(tool);
+      if (expanded) renderEvidence(tool, block);
+      block.classList.toggle('collapsed', !expanded);
+      header.setAttribute('aria-expanded', String(expanded));
+    });
+  }
+  header.setAttribute('aria-expanded', String(el.classList.contains('expanded')));
+  if (el.classList.contains('expanded')) renderEvidence(tool, detailsFor(tool));
+  statusIcon(el, '.tool-status-icon', presentation.phase);
+  refreshIcons();
+  return true;
+}
+
+export function finishClayToolItem(tool, group) {
+  if (!tool || !clayToolPresentation(tool.name, tool.input)) return false;
+  if (!tool.clayOutcome) {
+    tool.clayOutcome = { phase: 'returned', status: 'result_unavailable' };
+    tool.clayEndedGroup = group;
+    var cache = store.get('clayEndedToolRecords');
+    if (!cache) { cache = new WeakMap(); store.set({ clayEndedToolRecords: cache }); }
+    cache.set(tool.el, tool);
+  }
+  return applyClayToolItem(tool);
+}
+
+// Done clears the live registry; only rows still in this transcript can receive late results.
+export function findEndedClayTool(root, id) {
+  var cache = store.get('clayEndedToolRecords');
+  if (!cache || !root) return null;
+  var rows = root.querySelectorAll('.clay-tool-activity[data-tool-id]');
+  for (var i = rows.length - 1; i >= 0; i--) {
+    if (rows[i].dataset.toolId === id && cache.has(rows[i])) return cache.get(rows[i]);
+  }
+  return null;
+}
+
+export function clayToolResultGroup(tool, liveGroup) {
+  return liveGroup && liveGroup.el.contains(tool.el) ? liveGroup : tool.clayEndedGroup;
+}
+
+export function applyClayToolResult(tool, content, isError) {
+  if (!clayToolPresentation(tool.name, tool.input)) return false;
+  tool.clayRawResult = content;
+  tool.clayOutcome = clayToolOutcome(content, isError);
+  return applyClayToolItem(tool);
+}
+
+export function syncClayToolGroup(group) {
+  if (!group.clayActivityPhase) { delete group.el.dataset.activityPhase; return; }
+  group.el.dataset.activityPhase = group.clayActivityPhase;
+  statusIcon(group.el, '.tool-group-status-icon', group.clayActivityPhase);
+  refreshIcons();
+}