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

package/lib/public/modules/split-view-presentation-drop.js

@@ -5,13 +5,25 @@ import { checkComposerDeparture } from './session-rich-drafts.js';
 import { showToast } from './utils.js';
 import { listIds, place, swap, pairTree } from './split-view-layout-client.js';
 
+// Preview and persistence must resolve the same tree for every drop region.
+export function presentationDropTree(drag, target, sourceView, targetView) {
+  if (!target || target.folderId || drag.origin === target.origin) return null;
+  var sameView = sourceView && targetView && sourceView.id === targetView.id;
+  if (target.sidebar && sameView) return null;
+  var side = target.side === "center" ? (sameView ? "center" : "right") : target.side;
+  if (!targetView) return pairTree(target.origin, drag.origin, side);
+  var result = side === "center" ? swap(targetView.tree, drag.origin, target.origin) : place(targetView.tree, drag.origin, target.origin, side, 0.5);
+  return result.ok ? result.tree : null;
+}
+
 export function applyPresentationDrop(drag, target, mutation, checkMountedPaneDrafts) {
   var views = store.get('projectSplitViews') || [], sourceView = views.find(function (view) { return view.id === drag.sourceViewId; }), targetView = views.find(function (view) { return view.id === target.viewId; });
   var sessions = getCachedSessions() || [], sourceSession = exactDriverForOrigin(drag.origin, sessions), targetSession = exactDriverForOrigin(target.origin, sessions);
   if (!sourceSession || !targetSession || sourceSession.id !== drag.sessionId) return;
   var sameView = sourceView && targetView && sourceView.id === targetView.id;
   if (target.sidebar && sameView) return;
-  var side = target.side === "center" ? (sameView ? "center" : "right") : target.side;
+  var plannedTree = presentationDropTree(drag, target, sourceView, targetView);
+  if (!plannedTree) return false;
   function checkDeparture() {
     try {
       if (sourceView && sourceView.id === store.get('projectSplitViewActiveId')) checkMountedPaneDrafts();
@@ -22,36 +34,27 @@ export function applyPresentationDrop(drag, target, mutation, checkMountedPaneDr
   if (!targetView) {
     if (sourceView) {
       if (!checkDeparture()) return;
-      var newTree = pairTree(target.origin, drag.origin, side);
-      mutation("project_split_view_move", { sourceViewId: sourceView.id, sourceSessionOriginId: drag.origin,
+      var newTree = plannedTree;
+      return mutation("project_split_view_move", { sourceViewId: sourceView.id, sourceSessionOriginId: drag.origin,
         targetSessionOriginId: target.origin, targetSessionOrigins: listIds(newTree), tree: newTree, layout: "balanced",
         activeSessionOriginId: target.origin, name: "Split view" }, { activateCreatedView: true });
     } else {
       if (!checkDeparture()) return;
-      var createdTree = pairTree(target.origin, drag.origin, side);
-      mutation("project_split_view_create", { name: "Split view", sessionOrigins: listIds(createdTree), tree: createdTree,
+      var createdTree = plannedTree;
+      return mutation("project_split_view_create", { name: "Split view", sessionOrigins: listIds(createdTree), tree: createdTree,
         layout: "balanced", activeSessionOriginId: target.origin }, { activateCreatedView: true });
     }
-    return;
   }
   if (sourceView && targetView.id !== sourceView.id) {
     if (targetView.sessions.length >= 8) { showToast("Eight sessions are already open. Close a pane to add another.", "warn"); return; }
-    var movedTree = place(targetView.tree, drag.origin, target.origin, side, 0.5);
-    if (!movedTree.ok) return;
-    mutation("project_split_view_move", { sourceViewId: sourceView.id, sourceSessionOriginId: drag.origin,
+    var movedTree = { tree: plannedTree };
+    return mutation("project_split_view_move", { sourceViewId: sourceView.id, sourceSessionOriginId: drag.origin,
       targetViewId: targetView.id, targetSessionOrigins: listIds(movedTree.tree), tree: movedTree.tree,
       layout: targetView.layout, activeSessionOriginId: targetView.activeSessionOriginId }, target.sidebar ? { activateCreatedView: true, createdViewId: targetView.id } : null);
-    return;
-  }
-  var nextTree;
-  if (side === "center" && sourceView) nextTree = swap(targetView.tree, drag.origin, target.origin).tree;
-  else {
-    var placed = place(targetView.tree, drag.origin, target.origin, side, 0.5);
-    if (!placed.ok) return;
-    nextTree = placed.tree;
   }
+  var nextTree = plannedTree;
   var origins = listIds(nextTree);
   if (origins.length > 8) { showToast("Eight sessions are already open. Close a pane to add another.", "warn"); return; }
-  mutation("project_split_view_update", { id: targetView.id, sessionOrigins: origins, tree: nextTree,
+  return mutation("project_split_view_update", { id: targetView.id, sessionOrigins: origins, tree: nextTree,
     layout: targetView.layout, activeSessionOriginId: targetView.activeSessionOriginId }, target.sidebar ? { activateCreatedView: true, createdViewId: targetView.id } : null);
 }

package/lib/public/modules/split-view-presentation-renderer.js

@@ -1,4 +1,7 @@
-import { layoutScope, currentLayoutScope, presentationTree } from './split-view-layout-scope.js';
+import { paintLegacyToolPanes, clearToolPaneWindows } from './tool-pane-legacy.js';
+import { toolPaneLayoutTree, paintToolPaneWindows, bindWorkspaceDivider, dockedToolPanes } from './tool-pane-layout.js';
+import { afterPaneMotion } from './split-view-drag-preview.js';
+import { layoutScope, currentLayoutScope, presentationTree, bindingMatches } from './split-view-layout-scope.js';
 // Flat, stable pane presentation for persisted binary trees. Geometry is
 // applied to existing direct-child .split-pane nodes; iframes are never moved
 // below a nested layout wrapper.
@@ -14,6 +17,7 @@ import { syncPaneHeaderState } from './split-pane-header-state.js';
 import { rectangles, resize, validateTree, listIds } from './split-view-layout-client.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { appendLayoutOption } from './split-view-layout-icons.js';
+import { reserveEmptySplit, clearEmptySplit } from './split-session-empty-pane.js';
 
 var host = null;
 var app = null;
@@ -21,7 +25,6 @@ var menuTrigger = null;
 var resizeObserver = null;
 var geometryToken = 0;
 var stickyStatusOrigins = null;
-
 function relocateStickyStatus(enabled) {
   var ids = ['todo-sticky', 'ralph-sticky', 'debate-sticky'];
   var main = document.getElementById('main-panels'), appElement = document.getElementById('app');
@@ -41,7 +44,6 @@ function relocateStickyStatus(enabled) {
     });
   }
 }
-
 function dispatch(name, detail) {
   document.dispatchEvent(new CustomEvent(name, { detail: detail }));
 }
@@ -50,6 +52,7 @@ export function initPresentationRenderer(hostElement) {
   host = hostElement;
   app = document.getElementById("app");
   ensureArrangeMenu();
+  document.addEventListener('clay-split-picker-layout', renderCurrentGeometry);
   document.addEventListener("click", onClick, true);
   document.addEventListener("keydown", onKeyDown, true);
   document.addEventListener("pointermove", onPointerMove, true);
@@ -67,6 +70,7 @@ export function initPresentationRenderer(hostElement) {
 
 export function hidePresentationView() {
   if (!host) return;
+  clearEmptySplit(host);
   var legacySplit = store.get('splitPanes');
   if (legacySplit) releaseRetainedPanes(host);
   else clearRetainedPanes(host);
@@ -84,6 +88,7 @@ export function hidePresentationView() {
   delete host.dataset.positioned;
   delete host.dataset.singlePane;
   if (!legacySplit) {
+    clearToolPaneWindows();
     host.classList.remove("visible");
     if (app) app.classList.remove("split-native-hidden");
   }
@@ -98,7 +103,7 @@ export function hidePresentationView() {
   if (legacySplit) {
     Array.from(host.querySelectorAll(':scope > .split-view-divider, :scope > .split-view-drop-preview')).forEach(function (item) { item.remove(); });
     Array.from(host.querySelectorAll('.split-view-arrange-trigger')).forEach(function (trigger) { trigger.remove(); });
-    closePresentationArrange(false);
+    closePresentationArrange(false); paintLegacyToolPanes(host);
     return;
   }
   var frames = host.querySelectorAll('.split-pane-frame');
@@ -169,8 +174,9 @@ function currentSingletonGeometry() {
 }
 
 function renderCurrentGeometry() {
+  if (paintLegacyToolPanes(host)) return;
   var view = currentView(), tree = activeTree();
-  if (view && tree) { applyGeometry(view, tree); return; }
+  if (view && (tree || !view.sessions.length)) { applyGeometry(view, tree); return; }
   var singleton = currentSingletonGeometry();
   if (singleton) applyGeometry(singleton.view, { id: singleton.origin }, function () {
     var current = currentSingletonGeometry();
@@ -211,12 +217,15 @@ function applyGeometry(view, tree, stillCurrent) {
   });
   var style = window.getComputedStyle(host), left = parseFloat(style.paddingLeft) || 0, top = parseFloat(style.paddingTop) || 0;
   var right = parseFloat(style.paddingRight) || 0, bottom = parseFloat(style.paddingBottom) || 0;
-  var geometry = rectangles(tree, Math.max(0, host.clientWidth - left - right), Math.max(0, host.clientHeight - top - bottom), 7);
+  var windowTree = toolPaneLayoutTree(view, tree);
+  var geometry = rectangles(windowTree, Math.max(0, host.clientWidth - left - right), Math.max(0, host.clientHeight - top - bottom), 7);
+  paintToolPaneWindows(host, view, tree, windowTree, geometry, { left: left, top: top });
+  var reserving = reserveEmptySplit(host, geometry, { left: left, top: top });
   var focused = store.get('projectSplitViewFocusedOrigin');
   var panes = host.querySelectorAll(':scope > .split-pane');
   for (var i = 0; i < panes.length; i++) {
     var frame = panes[i].querySelector('.split-pane-frame'), origin = panes[i].dataset.presentationOrigin || frame && frame.dataset.sessionOriginId;
-    var rect = host.dataset.singlePane === 'true' && panes.length === 1 ?
+    var rect = !reserving && host.dataset.singlePane === 'true' && panes.length === 1 && !dockedToolPanes().length ?
       { x: 0, y: 0, width: Math.max(0, host.clientWidth - left - right), height: Math.max(0, host.clientHeight - top - bottom) } : geometry.panes[origin];
     if (!rect) continue;
     if (focused && geometry.panes[focused]) {
@@ -239,13 +248,15 @@ function applyGeometry(view, tree, stillCurrent) {
     divider.setAttribute("role", "separator"); divider.setAttribute("tabindex", "0");
     divider.setAttribute("aria-orientation", entry.axis === "horizontal" ? "vertical" : "horizontal");
     divider.setAttribute("aria-label", "Resize Split view panels");
+    if (reserving) { divider.inert = true; divider.tabIndex = -1; divider.setAttribute('aria-disabled', 'true'); }
     divider.style.left = (left + entry.rect.x) + "px"; divider.style.top = (top + entry.rect.y) + "px";
     divider.style.width = entry.rect.width + "px"; divider.style.height = entry.rect.height + "px";
-    bindDivider(divider, entry, tree, listIds(tree), scope); host.appendChild(divider);
+    if (dockedToolPanes().length) bindWorkspaceDivider(divider, entry, windowTree);
+    else bindDivider(divider, entry, tree, listIds(tree), scope); host.appendChild(divider);
     if (focusedDividerPath && divider.dataset.path === focusedDividerPath) divider.focus();
   }
   ensureDropPreview();
-  window.requestAnimationFrame(function () {
+  afterPaneMotion(host, function () {
     if (resizeToken !== 'split-view-layout-' + geometryToken || (stillCurrent ? !stillCurrent() : !currentLayoutScope(scope))) return;
     resizeFrames.forEach(function (item) {
       var live = item.frame.clayPane && item.frame.clayPane.identity();
@@ -254,17 +265,11 @@ function applyGeometry(view, tree, stillCurrent) {
     });
   });
 }
-
-function bindingMatches(left, right) {
-  return !!left && !!right && left.sessionId === right.sessionId && left.sessionOriginId === right.sessionOriginId &&
-    left.generation === right.generation && left.requestId === right.requestId;
-}
-
-function ensureArrangeTrigger(header) {
+export function ensureArrangeTrigger(header) {
   if (!header) return;
   if (!header.querySelector('[data-action="arrange"]')) {
     var trigger = document.createElement("button"); trigger.type = "button"; trigger.className = "split-view-arrange-trigger";
-    trigger.dataset.action = "arrange"; trigger.setAttribute("aria-label", "Arrange sessions");
+    trigger.dataset.action = "arrange"; trigger.setAttribute("aria-label", "Split view options");
     trigger.setAttribute("aria-expanded", "false"); trigger.setAttribute("aria-controls", "split-view-arrange-menu");
     trigger.innerHTML = iconHtml("columns-2");
     var close = header.querySelector(".split-pane-close"); header.insertBefore(trigger, close || null);

package/lib/public/modules/split-view-presentations.js

@@ -1,3 +1,9 @@
+import { workspaceChanged } from './view-workspace-state.js';
+import { restoreViewPair } from './view-pair-presentation.js';
+import { repaintLegacySplit } from './split-view.js';
+import { validWorkspaceView } from './view-workspace-validation.js';
+import { mutation } from './view-mutations.js';
+import { initSavedWorkspace } from './view-workspace-controller.js';
 import { preserveReconnectingPresentation } from './split-pane-retention.js';
 import { layoutScope, currentLayoutScope, presentationTree } from './split-view-layout-scope.js';
 import { validPresentationClose } from './split-view-presentation-close.js';
@@ -99,7 +105,7 @@ export function handleProjectSplitViews(msg) {
   var invalidView = false;
   msg.views.forEach(function (view) {
     var ids = view && Array.isArray(view.sessions) ? view.sessions.map(function (session) { return session.sessionOriginId; }) : [];
-    if (ids.length < 2 || ids.length > 8 || viewSessions(view).length !== ids.length || !validateTree(view.tree, ids).ok) invalidView = true;
+    if (ids.length > 8 || viewSessions(view).length !== ids.length || !validateTree(view.tree, ids).ok || !validWorkspaceView(view)) invalidView = true;
     else nextViews.push(view);
   });
   if (invalidView) {
@@ -115,7 +121,7 @@ export function handleProjectSplitViews(msg) {
   if (state.projectSplitViewDrag || state.projectSplitViewDividerDrag) cleanupTransientInteractions(state);
   var activeId = state.projectSplitViewActiveId;
   if (!viewExists(nextViews, activeId)) {
-    var restored = restorablePresentation(state, nextViews, getCachedSessions());
+    var restored = nextViews.find(function (view) { return view.id === msg.activeViewId && !view.sessions.length; }) || restorablePresentation(state, nextViews, getCachedSessions());
     if (restored) activeId = restored.id;
   }
   var removedActive = activeId && !viewExists(nextViews, activeId) ? activeId : null;
@@ -126,7 +132,7 @@ export function handleProjectSplitViews(msg) {
     var survivor = exactDriverForOrigin(completedPending.meta.activeOrigin, getCachedSessions());
     if (survivor) standaloneTarget = { id: survivor.id, origin: survivor.sessionOriginId, previousSessionId: state.activeSessionId, contextKey: contextKey(state) };
   }
-  store.set({ projectSplitViews: nextViews, projectSplitViewRevision: msg.revision, projectSplitViewHydrated: true,
+  store.set({ projectSplitViews: nextViews, projectSplitViewRevision: msg.revision, projectSplitViewSavedActiveId: msg.activeViewId || null, projectSplitViewHydrated: true,
     projectSplitViewError: msg.error || "", projectSplitViewStandaloneTarget: standaloneTarget, projectSplitViewActiveId: viewExists(nextViews, activeId) ? activeId : null,
     projectSplitViewFocusedOrigin: viewExists(nextViews, activeId) ? state.projectSplitViewFocusedOrigin : null,
     projectSplitViewPending: readyPending, projectSplitViewPreviewTree: readyPending ? state.projectSplitViewPreviewTree : null,
@@ -182,22 +188,6 @@ export function organizePresentationView(id, revision, folderId, favorite) {
   if (!view || view.revision !== revision) return false;
   return mutation('project_split_view_organize', { id: id, expectedViewRevision: revision, projectSlug: store.get('currentSlug'), folderId: folderId, favorite: favorite });
 }
-function mutation(type, body, meta) {
-  var state = store.snap();
-  if (!projectReady(state) || !state.projectSplitViewHydrated || state.projectSplitViewError || state.projectSplitViewPending) return false;
-  var requestId = "split-view-" + Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 10);
-  var ws = getWs();
-  var message = Object.assign({ type: type, requestId: requestId, expectedRevision: state.projectSplitViewRevision }, body || {});
-  var pending = { requestId: requestId, type: type, socket: ws, contextKey: contextKey(state), expectedRevision: state.projectSplitViewRevision, meta: meta || null,
-    awaitingBroadcast: false, resultRevision: null };
-  store.set({ projectSplitViewPending: pending, projectSplitViewError: "" });
-  if (!sendMessage(message)) {
-    store.set({ projectSplitViewPending: null, projectSplitViewError: "Split view change could not be sent. Refresh before trying again." });
-    showToast("Split view change could not be sent. Refresh before trying again.", "error");
-    return false;
-  }
-  return true;
-}
 export function setActiveView(id, preferredOrigin) {
   var state = store.snap(), view = viewExists(state.projectSplitViews, id);
   if (!view) return false;
@@ -235,6 +225,7 @@ export function switchToStandalone(sessionId) {
   return true;
 }
 function renderActive() {
+  if (store.get('splitPanes')) { repaintLegacySplit(); return; }
   if (!host || !nativeApp || preserveReconnectingPresentation(host)) return;
   var state = store.snap(), view = viewExists(state.projectSplitViews, state.projectSplitViewActiveId);
   if (state.splitIdentityBlockedSocket === getWs()) { hidePresentationView(); return; }
@@ -246,9 +237,11 @@ function renderActive() {
     }
     var singleton = currentSingletonPresentation(state, getCachedSessions());
     if (singleton) {
-      store.set({ projectSplitViewSingletonOrigin: singleton.origin });
-      if (stickyContainer && mainPanels) mainPanels.appendChild(stickyContainer);
-      renderPresentationView(singleton.view, { id: singleton.origin }, [singleton.session]);
+      if (state.projectSplitViewHydrated && !state.projectSplitViewPending && !state.projectSplitViewError) mutation("project_split_view_create", { name: "View", sessionOrigins: [singleton.origin], tree: { id: singleton.origin }, layout: "balanced", activeSessionOriginId: singleton.origin }, { activateCreatedView: true });
+      return;
+    }
+    if (state.projectSplitViewHydrated && projectReady(state) && !(getCachedSessions() || []).length && !state.projectSplitViewPending && !state.projectSplitViewError) {
+      mutation('project_split_view_create', { name: 'View', sessionOrigins: [], tree: null, layout: 'balanced', activeSessionOriginId: null }, { activateCreatedView: true });
       return;
     }
     if (state.projectSplitViewSingletonOrigin) store.set({ projectSplitViewSingletonOrigin: null });
@@ -257,10 +250,11 @@ function renderActive() {
     return;
   }
   if (state.projectSplitViewSingletonOrigin) store.set({ projectSplitViewSingletonOrigin: null });
+  if (restoreViewPair(view)) return;
   var sessions = viewSessions(view);
   var tree = presentationTree(view);
   var ids = listIds(tree);
-  if (sessions.length !== view.sessions.length || ids.length < 2 || ids.length > 8 || !validateTree(tree, ids).ok) return;
+  if (sessions.length !== view.sessions.length || ids.length > 8 || !validateTree(tree, ids).ok) return;
   if (stickyContainer && mainPanels) mainPanels.appendChild(stickyContainer);
   renderPresentationView(view, tree, sessions);
 }
@@ -424,14 +418,9 @@ function onClosePane(event) {
   if (!session || !view.sessions.some(function (item) { return item.sessionOriginId === session.sessionOriginId; })) return;
   try { checkMountedPaneDrafts(); } catch (error) { showToast(error.message, "warn"); return; }
   var origins = view.sessions.map(function (item) { return item.sessionOriginId; }).filter(function (origin) { return origin !== session.sessionOriginId; });
-  if (origins.length < 2) {
-    var remaining = view.sessions.filter(function (item) { return item.sessionOriginId !== session.sessionOriginId; })[0];
-    if (remaining) mutation("project_split_view_separate", { id: view.id }, { separateViewId: view.id, activeOrigin: remaining.sessionOriginId });
-    return;
-  }
   var nextTree = remove(view.tree, session.sessionOriginId);
-  if (!nextTree || !validateTree(nextTree, origins).ok) return;
-  var nextActive = view.activeSessionOriginId === session.sessionOriginId ? origins[0] : view.activeSessionOriginId;
+  if (!validateTree(nextTree, origins).ok) return;
+  var nextActive = view.activeSessionOriginId === session.sessionOriginId ? origins[0] || null : view.activeSessionOriginId;
   mutation("project_split_view_update", { id: view.id, sessionOrigins: origins, tree: nextTree,
     layout: view.layout, activeSessionOriginId: nextActive }, { closedOrigin: session.sessionOriginId, activeOrigin: nextActive });
 }
@@ -442,13 +431,15 @@ function onFocus(event) {
   if (event.detail && event.detail.focused && !source) return;
   store.set({ projectSplitViewFocusedOrigin: event.detail && event.detail.focused ? source.sessionOriginId : null });
   renderActive();
+  if (!store.get('savedWorkspaceApplying')) workspaceChanged();
 }
 function init(hostElement) {
   host = hostElement; nativeApp = document.getElementById("app"); mainPanels = document.getElementById("main-panels");
   stickyContainer = document.getElementById("sticky-notes-container");
   if (stickyContainer) { stickyHome = stickyContainer.parentNode; stickyAnchor = stickyContainer.nextSibling; }
   initPresentationRenderer(host);
-  initPresentationDrag(host, function (drag, target) { applyPresentationDrop(drag, target, mutation, checkMountedPaneDrafts); });
+  initSavedWorkspace();
+  initPresentationDrag(host, function (drag, target) { return applyPresentationDrop(drag, target, mutation, checkMountedPaneDrafts); });
   initSplitViewCreateMenu();
   document.addEventListener('clay-split-view-create', function (event) { handleSplitViewCreateEvent(event, mutation, checkMountedPaneDrafts); });
   document.addEventListener("click", onClick, true);
@@ -476,7 +467,7 @@ function init(hostElement) {
         state.paneBindingSessions !== previous.paneBindingSessions || state.sessionActivatedProjectSlug !== previous.sessionActivatedProjectSlug) renderActive();
     if (state.activeSessionId !== previous.activeSessionId && state.projectSplitViewActiveId) {
       var activeView = viewExists(state.projectSplitViews, state.projectSplitViewActiveId);
-      if (activeView && !activeView.sessions.some(function (session) { return session.id === state.activeSessionId; })) {
+      if (activeView && activeView.sessions.length && !activeView.sessions.some(function (session) { return session.id === state.activeSessionId; })) {
         store.set({ projectSplitViewActiveId: null, projectSplitViewPreviewTree: null });
       }
     }
@@ -493,6 +484,7 @@ export function applyReviewedSplitView(target) {
   var view = viewExists(store.get('projectSplitViews'), target.view.id);
   if (!projectReady(store.snap()) || store.get('projectSplitViewPending') || !view || JSON.stringify(view) !== JSON.stringify(target.view)) return false;
   if (!setActiveView(view.id, view.activeSessionOriginId)) return false;
-  onFocus({ detail: { focused: !!target.focusOrigin, sessionOriginId: target.focusOrigin } });
+  store.set({ savedWorkspaceApplying: true });
+  try { onFocus({ detail: { focused: !!target.focusOrigin, sessionOriginId: target.focusOrigin } }); } finally { store.set({ savedWorkspaceApplying: false }); }
   return true;
 }

package/lib/public/modules/split-view-worker-activity.js

@@ -22,14 +22,14 @@ export function workerActivityLabel(message, names) {
 }
 export function captureWorkerDisclosures(body) {
   return {
-    open: Array.from(body.querySelectorAll('details[open]')).map(function (node) { return node.dataset.disclosureKey; }),
+    open: Array.from(body.querySelectorAll('details[open], [data-disclosure-key][aria-expanded="true"]')).map(function (node) { return node.dataset.disclosureKey; }),
     focus: document.activeElement && body.contains(document.activeElement) && (document.activeElement.dataset.disclosureKey || document.activeElement.parentElement && document.activeElement.parentElement.dataset.disclosureKey)
   };
 }
 export function restoreWorkerDisclosures(body, saved) {
   Array.from(body.querySelectorAll('[data-disclosure-key]')).forEach(function (node) {
     var key = node.dataset.disclosureKey;
-    if (saved.open.indexOf(key) >= 0) node.open = true;
+    if (saved.open.indexOf(key) >= 0) { if (node.tagName === 'DETAILS') node.open = true; else if (node.getAttribute('aria-expanded') !== 'true') node.click(); }
     if (saved.focus === key) {
       var target = node.tagName === 'DETAILS' ? node.querySelector('summary') : node;
       if (target) target.focus({ preventScroll: true });

package/lib/public/modules/split-view-worker-transcript.js

@@ -1,5 +1,9 @@
-import { workerActivityLabel, workerActivityNames } from './split-view-worker-activity.js';
-import { renderMarkdown } from './markdown.js';
+import { workerActivityNames } from './split-view-worker-activity.js';
+import { createAssistantBubble, createUserBubble, renderAssistantBubbleText } from './chat-bubble-renderer.js';
+import { createSessionToolItem, createSessionToolGroup, sessionToolGroupSummary } from './session-tool-item.js';
+import { applyClayToolItem, bindToolGroupDisclosure } from './clay-tool-activity.js';
+import { iconHtml } from './icons.js';
+import { VENDOR_AVATARS } from './chat-render-runtime.js';
 
 // Reassemble bounded record fragments and contiguous streaming deltas before
 // parsing Markdown, including fences and lists that cross a page boundary.
@@ -17,38 +21,71 @@ export function workerTranscriptRows(messages) {
   return rows;
 }
 
-export function appendWorkerMessage(body, message, names) {
+function inputFor(message) {
+  if (message.recordType !== 'tool_use' && message.recordType !== 'tool_executing') return null;
+  try { var start = message.text.indexOf('{'); return start >= 0 ? JSON.parse(message.text.slice(start)) : null; } catch (error) { return null; }
+}
+export function appendWorkerMessage(body, message, names, options) {
+  options = options || {};
   if (message.role === 'tool') {
-    var article = document.createElement('article');
-    article.className = 'message worker-readonly-message worker-tool-message';
-    article.dataset.recordIndex = String(message.recordIndex);
-    article.dataset.phase = message.isError ? 'failed' : message.recordType === 'tool_result' ? 'returned' : 'recorded';
-    var details = document.createElement('details');
-    details.dataset.disclosureKey = 'record-' + message.recordIndex;
-    var summary = document.createElement('summary');
-    summary.textContent = workerActivityLabel(message, names || workerActivityNames([message])) +
-      (message.isError ? ' · Failed' : message.recordType === 'tool_result' ? ' · Result returned' : ' · Call recorded');
-    var output = document.createElement('pre'); output.textContent = message.text;
-    details.append(summary, output); article.appendChild(details); body.appendChild(article);
-    return;
+    var name = message.toolName || names && names[message.toolId] && names[message.toolId].name || 'Tool activity';
+    var el = createSessionToolItem(message.toolId, name);
+    el.classList.add('worker-readonly-message', 'worker-tool-message'); el.dataset.recordIndex = String(message.recordIndex);
+    el.dataset.phase = message.isError ? 'failed' : message.recordType === 'tool_result' ? 'returned' : 'recorded';
+    var input = inputFor(message), output = message.resultText;
+    var tool = { el: el, name: name, input: input, clayRawResult: output, clayOutcome: output !== undefined ? { phase: message.isError ? 'error' : 'done' } : { phase: 'returned', status: 'result_unavailable' } };
+    var header = el.querySelector('.tool-header'); header.dataset.disclosureKey = 'record-' + message.recordIndex;
+    if (!applyClayToolItem(tool)) {
+      var terminal = message.isError ? 'Failed' : output !== undefined || message.recordType === 'tool_result' ? 'Result returned' : 'Call recorded';
+      el.querySelector('.tool-desc').textContent = input && (input.file_path || input.command || input.pattern) || '';
+      el.querySelector('.tool-subtitle-text').textContent = terminal;
+      el.querySelector('.tool-status-icon').innerHTML = iconHtml(message.isError ? 'alert-triangle' : output !== undefined ? 'check' : 'circle-help');
+      el.classList.toggle('done', output !== undefined); el.classList.toggle('error', !!message.isError);
+      var block = document.createElement('div'); block.className = 'tool-result-block collapsed';
+      var pre = document.createElement('pre'); pre.textContent = output !== undefined ? output : message.text; block.appendChild(pre); el.appendChild(block);
+      header.setAttribute('role', 'button'); header.tabIndex = 0; header.setAttribute('aria-expanded', 'false');
+      function toggle() { var expanded = el.classList.toggle('expanded'); block.classList.toggle('collapsed', !expanded); header.setAttribute('aria-expanded', String(expanded)); }
+      header.addEventListener('click', toggle); header.addEventListener('keydown', function (event) { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); toggle(); } });
+    }
+    body.appendChild(el); return;
   }
-  var article = document.createElement('article');
-  article.className = 'message worker-readonly-message ' + (message.role === 'user' ? 'msg-user' : 'msg-assistant');
-  if (Number.isInteger(message.recordIndex)) article.dataset.recordIndex = String(message.recordIndex);
-  var author = document.createElement('strong'); author.className = 'author';
-  author.textContent = message.role === 'user' ? 'Driver' : 'Worker';
-  var content = document.createElement('div'); content.className = 'message-body md-content';
-  // Recorded HTML must not create controls, scoped overlays or active embeds.
-  // Keep the shared Markdown parser and its sanitization, with a narrower
-  // read-only prose vocabulary for this secondary history surface.
-  content.innerHTML = DOMPurify.sanitize(renderMarkdown(message.text), {
-    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'], ALLOW_DATA_ATTR: false
-  });
-  article.append(author, content); body.appendChild(article);
+  var user = message.role === 'user';
+  var label = message.authorLabel || (user ? options.userName || 'Driver' : options.assistantName || 'Worker');
+  var config = { tagName: 'article', name: label, avatarUrl: user ? options.userAvatar || '/icon-192.png' : VENDOR_AVATARS[options.vendor || 'claude'], text: message.text };
+  var article = user ? createUserBubble(config) : createAssistantBubble(config);
+  article.classList.add('worker-readonly-message'); article.dataset.recordIndex = String(message.recordIndex);
+  if (!user) renderAssistantBubbleText(article, message.text, true, { readOnly: true });
+  body.appendChild(article);
 }
-
-export function appendWorkerTranscript(body, messages) {
-  var rows = workerTranscriptRows(messages), names = workerActivityNames(rows);
-  rows.forEach(function (message) { appendWorkerMessage(body, message, names); });
+export function appendWorkerTranscript(body, messages, options) {
+  var rows = workerTranscriptRows(messages), names = workerActivityNames(rows), consumed = new Set(), visible = [];
+  rows.forEach(function (message, index) {
+    if (consumed.has(index)) return;
+    var row = message;
+    if (message.role === 'tool' && names[message.toolId] && names[message.toolId].index === message.recordIndex) {
+      var later = rows.slice(index + 1), executing = later.find(function (item) { return item.toolId === message.toolId && item.recordType === 'tool_executing'; });
+      var result = later.find(function (item) { return item.toolId === message.toolId && item.recordType === 'tool_result'; });
+      row = Object.assign({}, message, executing ? { text: executing.text, recordType: executing.recordType } : {}, result ? { resultText: result.text, isError: result.isError } : {});
+      [executing, result].forEach(function (item) { if (item) consumed.add(rows.indexOf(item)); });
+    }
+    visible.push(row);
+  });
+  var group = null, groupRows = [];
+  function finish() {
+    if (!group) return;
+    var header = group.querySelector('.tool-group-header'), done = groupRows.every(function (row) { return row.resultText !== undefined || row.recordType === 'tool_result'; });
+    var meta = { toolNames: groupRows.map(function (row) { return row.toolName || names[row.toolId] && names[row.toolId].name || 'Tool'; }), doneCount: done ? groupRows.length : 0 };
+    header.style.display = groupRows.length > 1 ? '' : 'none';
+    header.dataset.disclosureKey = 'group-' + groupRows[0].recordIndex;
+    group.querySelector('.tool-group-label').textContent = done ? sessionToolGroupSummary(meta, {}) : groupRows.length + ' tool calls recorded';
+    group.classList.toggle('done', done); group.classList.toggle('collapsed', groupRows.length > 1);
+    group.querySelector('.tool-group-status-icon').innerHTML = iconHtml(done ? 'check' : 'circle-help');
+    bindToolGroupDisclosure(group, function () {}); group = null; groupRows = [];
+  }
+  visible.forEach(function (row) {
+    if (row.role !== 'tool') { finish(); appendWorkerMessage(body, row, names, options); return; }
+    if (!group) { group = createSessionToolGroup(); body.appendChild(group); }
+    groupRows.push(row); appendWorkerMessage(group.querySelector('.tool-group-items'), row, names, options);
+  });
+  finish();
 }

package/lib/public/modules/split-view-workers.js

@@ -1,3 +1,4 @@
+import { syncWorkerMessagePreviews } from './worker-message-previews.js';
 import { appendWorkerRemoval, reconcileWorkerRemoval } from './split-view-worker-removal.js';
 import { workerCursorKey, workerCursorAdvances, shouldLoadWorkerPage, captureWorkerAnchor, restoreWorkerAnchor } from './split-view-worker-scroll.js';
 import { appendWorkerTranscript } from './split-view-worker-transcript.js';
@@ -189,7 +190,7 @@ function open(chip, driver, worker, takeFocus) {
   if (existing && existing.driverOriginId === driver.sessionOriginId && existing.workerOriginId === worker.sessionOriginId && existing.generation === worker.workerGeneration) { close(true); return; }
   if (existing) close(false);
   var state = { requestId: null, driverOriginId: driver.sessionOriginId, workerOriginId: worker.sessionOriginId,
-    generation: worker.workerGeneration, driverTitle: driver.title || "Driver session", workerTitle: worker.title || "Worker",
+    generation: worker.workerGeneration, workerVendor: worker.vendor, driverTitle: driver.title || "Driver session", workerTitle: worker.title || "Worker",
     sourceBinding: chip.closest('.split-pane').querySelector('.split-pane-frame').clayPane.identity().binding,
     status: "loading", messages: [], hasMore: false, nextBefore: null, append: false, inFlight: false, initialPage: true };
   store.set({ splitViewWorkerConversation: state }); ensurePopover(); renderContent();
@@ -217,7 +218,7 @@ function ensurePopover() {
     var closeButton = document.createElement("button"); closeButton.type = "button"; closeButton.setAttribute("aria-label", "Close Worker conversation"); closeButton.innerHTML = iconHtml("x");
     closeButton.addEventListener("click", function () { close(true); }); header.appendChild(closeButton); element.appendChild(header);
     var source = document.createElement("div"); source.className = "split-view-worker-popover-source"; element.appendChild(source);
-    var body = document.createElement("div"); body.className = "split-view-worker-popover-body"; body.tabIndex = 0; body.setAttribute("aria-label", "Read-only Worker transcript"); element.appendChild(body);
+    var body = document.createElement("div"); body.className = "split-view-worker-popover-body readonly-session-transcript"; body.tabIndex = 0; body.setAttribute("aria-label", "Read-only Worker transcript"); element.appendChild(body);
     body.addEventListener('scroll', function () { loadEarlier(body, true); }, { passive: true });
     body.addEventListener('wheel', function (event) { if (event.deltaY < 0) loadEarlier(body, true); }, { passive: true });
     var footer = document.createElement("footer"); footer.className = "split-view-worker-popover-footer"; element.appendChild(footer);
@@ -241,7 +242,7 @@ function renderContent() {
     if (state.status === "loading" && !state.messages.length) body.textContent = "Loading conversation…";
     else if (state.status === "error" && !state.messages.length) body.textContent = state.error || "Conversation is unavailable.";
     else if (!state.messages.length) body.textContent = "No recorded conversation.";
-    appendWorkerTranscript(body, state.messages);
+    appendWorkerTranscript(body, state.messages, { vendor: state.workerVendor, assistantName: state.workerTitle });
     restoreWorkerDisclosures(body, disclosures);
     if ((state.initialPage || state.liveRefresh && followTail) && state.status === 'ready') body.scrollTop = body.scrollHeight;
     else if (anchor) restoreWorkerAnchor(body, anchor);
@@ -370,7 +371,7 @@ export function renderPaneWorkers(container, driver) {
   data.items.forEach(function (worker) {
     var pill = document.createElement("span"); pill.className = "split-view-worker-pill";
     var button = document.createElement("button"); button.type = "button"; button.className = "split-view-worker-chip";
-    button.dataset.workerOrigin = worker.sessionOriginId; button.dataset.workerGeneration = String(worker.workerGeneration);
+    button.dataset.workerParent = driver.sessionOriginId; button.dataset.workerOrigin = worker.sessionOriginId; button.dataset.workerGeneration = String(worker.workerGeneration);
     var current = data.currentIds.has(worker.id);
     var modelLabel = worker.model || "Default model";
     button.title = (VENDOR_NAMES[worker.vendor] || worker.vendor || "Unknown vendor") + " · " + modelLabel + " · Split Worker #" + worker.id +
@@ -419,6 +420,7 @@ export function renderPaneWorkers(container, driver) {
     root.appendChild(controls);
   }
   introduceWorkerViewer(container, driver);
+  syncWorkerMessagePreviews();
   var conversation = store.get('splitViewWorkerConversation');
   if (conversation) ensurePopover();
 }

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

@@ -1,3 +1,5 @@
+import { syncPairView, pairPresentationPanes, pairViewCapacity } from './view-pair-presentation.js';
+import { paintLegacyToolPanes } from './tool-pane-legacy.js';
 import { adoptDocumentSource } from './clay-studio-document.js';
 import { trustedStudioFrame } from './clay-studio-render.js';
 import { handlePaneBrowserMessage } from './pane-browser-bridge.js';
@@ -185,7 +187,8 @@ function renderSplit(split) {
     singleton || split && split.panes && split.panes.length >= 2 || !!state.projectSplitViewActiveId);
   // The exact singleton presentation is verified before the redundant cache catches up.
   if (singleton) { renderPresentationSplitView(); return; }
-  if (split && split.panes && store.get('projectSplitViewActiveId')) {
+  var savedPair = split && split.panes && syncPairView();
+  if (split && split.panes && !savedPair && store.get('projectSplitViewActiveId')) {
     store.set({ projectSplitViewActiveId: null, projectSplitViewFocusedOrigin: null, projectSplitViewPreviewTree: null });
   }
   var expectedPresentationContext = [store.get('currentSlug') || "", store.get('currentProjectOwnerId') || "", store.get('myUserId') || "", store.get('projectSplitViewSocketGeneration') || 0].join("|");
@@ -213,8 +216,10 @@ function renderSplit(split) {
   placeStickyNotesOverlay(true);
   nativeApp.classList.add("split-native-hidden");
   host.classList.add("visible");
+  if (savedPair) panes = pairPresentationPanes(panes);
   reconcileSplitPanes(host, panes, function (pane) { return createSplitPane(pane, closePane); }, updateSplitPaneMetadata);
   syncPairChrome(host, split);
+  paintLegacyToolPanes(host);
   refreshIcons();
 }
 
@@ -246,7 +251,7 @@ function openSplit(side, draggedId) {
 
 export function openGroup(group) {
   if (!canLeavePanes()) return false;
-  if (!group || !Array.isArray(group.members) || group.members.length < 2) return false;
+  if (!group || !Array.isArray(group.members) || group.members.length < 2 || !pairViewCapacity(group)) return false;
   var memberIds = splitGroupMemberIds(group);
   if (memberIds.length !== group.members.length) return false;
   for (var mi = 0; mi < memberIds.length; mi++) if (!sessionById(memberIds[mi])) return false;
@@ -491,3 +496,5 @@ export function initSplitView() {
   initSplitViewPresentations(host);
   renderSplit(store.get('splitPanes'));
 }
+
+export function repaintLegacySplit() { if (store.get('splitPanes')) renderSplit(store.get('splitPanes')); }

package/lib/public/modules/sticky-notes-browser.js

@@ -14,7 +14,7 @@ import { enhanceClayLogLinks } from './clay-log-links.js';
 import { closeHumanNote } from './sticky-notes-actions.js';
 import { send, getNoteUiState } from './sticky-notes-shared.js';
 import { listNoteData, focusNoteOnCanvas, hideNotes, showNotes } from './sticky-notes.js';
-import { claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
+import { handlesWorkbenchKey, claimRightWorkbench, registerRightWorkbench, releaseRightWorkbench } from './right-workbench.js';
 
 var panel = null;
 var gridEl = null;
@@ -427,7 +427,7 @@ export function isNotesBrowserOpen() {
 export function initNotesBrowser() {
   registerRightWorkbench("notes-browser", closeNotesBrowser);
   document.addEventListener("keydown", function (e) {
-    if (e.key !== "Escape") return;
+    if (e.key !== "Escape" || !handlesWorkbenchKey("notes-browser", e)) return;
     if (deleteDialog && !deleteDialog.classList.contains("hidden")) return;
     if (!store.get('notesBrowserOpen')) return;
     closeNotesBrowser();

package/lib/public/modules/terminal-viewport.js

@@ -0,0 +1,14 @@
+// Attachment snapshots describe the previous PTY size, not the current pane.
+export function hasTerminalViewport(tab) {
+  var rect = tab && tab.bodyEl && tab.bodyEl.getBoundingClientRect();
+  return !!(rect && rect.width > 0 && rect.height > 0);
+}
+
+export function applyTerminalSize(tab, message, active, refit) {
+  if (!tab || !tab.xterm || !(message.cols > 0 && message.rows > 0)) return;
+  if (message.initial === true && active) {
+    if (hasTerminalViewport(tab)) refit();
+    return;
+  }
+  tab.xterm.resize(message.cols, message.rows);
+}