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

package/lib/public/modules/tool-pane-drag.js

@@ -0,0 +1,134 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { livePaneBinding, samePaneBinding } from './pane-binding.js';
+import { insertWindow } from './tool-pane-tree.js';
+import { resize } from './split-view-layout-client.js';
+import { repaintToolPanes, saveToolPaneTree, toolPaneContext } from './tool-pane-layout.js';
+
+function receiptCurrent(drag) {
+  var current = store.get('toolPaneWindowGeometry');
+  return current && current.key === toolPaneContext() && store.get('connected') && current.key === drag.receipt.key && current.socket === getWs() && current.socket === drag.receipt.socket &&
+    current.scope === drag.receipt.scope && current.scope === JSON.stringify([store.get('myUserId'), store.get('currentSlug'), store.get('currentProjectOwnerId'), store.get('projectSplitViewSocketGeneration')]) && current.revision === drag.receipt.revision &&
+    JSON.stringify(current.windows.map(function (entry) { return entry.id; }).sort()) === JSON.stringify(drag.windows.map(function (entry) { return entry.id; }).sort()) && JSON.stringify(current.base) === JSON.stringify(drag.receipt.base) &&
+    current.host.clientWidth === drag.width && current.host.clientHeight === drag.height &&
+    drag.windows.every(function (entry) {
+      if (!entry.element.isConnected || entry.element.classList.contains('hidden')) return false;
+      if (!entry.frame) return entry.element.dataset.toolWindowId === entry.id;
+      var live = entry.frame.clayPane && entry.frame.clayPane.identity();
+      return entry.frame.contentDocument === entry.document && entry.frame.contentWindow === entry.window &&
+        live && samePaneBinding(live.binding, entry.binding) && livePaneBinding(entry.frame);
+    });
+}
+function capture(event, source, divider) {
+  var receipt = store.get('toolPaneWindowGeometry'), preference = store.get('workbenchLayoutPreference') || {};
+  if (!receipt || (!store.get('projectSplitViewActiveId') && (!preference.ready || preference.loading || preference.saving)) || store.get('projectSplitViewDrag') || store.get('projectSplitViewPending')) return null;
+  var drag = { pointerId: event.pointerId, receipt: receipt, source: source, divider: divider, startX: event.clientX, startY: event.clientY,
+    width: receipt.host.clientWidth, height: receipt.host.clientHeight, tree: receipt.tree, moved: false, windows: receipt.windows.map(function (item) {
+      var live = item.frame && item.frame.clayPane && item.frame.clayPane.identity();
+      return Object.assign({}, item, { rect: item.element.getBoundingClientRect(), document: item.frame && item.frame.contentDocument,
+        window: item.frame && item.frame.contentWindow, binding: live && live.binding, pointerEvents: item.frame && item.frame.style.pointerEvents });
+    }) };
+  return receiptCurrent(drag) ? drag : null;
+}
+function begin(drag) {
+  drag.moved = true;
+  drag.windows.forEach(function (item) { if (item.frame) item.frame.style.pointerEvents = 'none'; });
+  if (drag.source) drag.source.element.classList.add('tool-pane-drag-source');
+  document.body.classList.add('tool-pane-dragging'); drag.receipt.host.classList.add('split-view-drag-preview');
+  try { document.documentElement.setPointerCapture(drag.pointerId); } catch (error) {}
+}
+function pointerDown(event) {
+  if (event.button !== 0 || event.isPrimary === false || store.get('toolPaneDrag')) return;
+  var header = event.target.closest && event.target.closest('.tool-pane-window > .tool-pane-header, #split-host > .split-pane > .split-pane-header');
+  if (!header || event.target.closest('button, input, a, .tool-pane-title, .tool-pane-kind, .split-pane-title, .split-view-runtime, .split-worker-runtime')) return;
+  var receipt = store.get('toolPaneWindowGeometry');
+  if (!receipt || !receipt.windows.some(function (item) { return !!item.tool; })) return;
+  var source = receipt.windows.find(function (item) { return item.element === header.parentNode; });
+  var drag = source && capture(event, source);
+  if (!drag) return;
+  store.set({ toolPaneDrag: drag }); event.preventDefault(); event.stopImmediatePropagation();
+}
+function preview(drag, tree) {
+  drag.tree = tree;
+  store.set({ toolPaneLayoutPreview: { key: drag.receipt.key, base: drag.receipt.base, tree: tree, socket: drag.receipt.socket } });
+  repaintToolPanes();
+}
+function move(event) {
+  var drag = store.get('toolPaneDrag');
+  if (!drag || drag.pointerId !== event.pointerId) return;
+  if (!receiptCurrent(drag)) { finish(false); return; }
+  if (!drag.moved && Math.hypot(event.clientX - drag.startX, event.clientY - drag.startY) < 6) return;
+  if (!drag.moved) begin(drag);
+  event.preventDefault();
+  if (drag.divider) {
+    var entry = drag.divider, horizontal = entry.axis === 'horizontal';
+    var delta = horizontal ? event.clientX - drag.startX : event.clientY - drag.startY;
+    var next = resize(drag.receipt.tree, entry.path, Math.max(.05, Math.min(.95, entry.ratio + delta / Math.max(1, entry.available))));
+    if (next) preview(drag, next);
+    return;
+  }
+  var target = drag.windows.find(function (entry) { var r = entry.rect; return event.clientX >= r.left && event.clientX <= r.right && event.clientY >= r.top && event.clientY <= r.bottom; });
+  var nextTree = drag.receipt.tree;
+  if (target && target.id !== drag.source.id) {
+    var r = target.rect, x = (event.clientX - r.left) / r.width, y = (event.clientY - r.top) / r.height;
+    var edge = Math.min(x, 1 - x, y, 1 - y), side = 'center';
+    if (edge < .25) side = edge === x ? 'left' : edge === 1 - x ? 'right' : edge === y ? 'top' : 'bottom';
+    nextTree = insertWindow(drag.receipt.tree, drag.source.id, target.id, side);
+  }
+  preview(drag, nextTree);
+  var ghost = document.getElementById('tool-pane-drag-ghost');
+  if (!ghost) { ghost = document.createElement('div'); ghost.id = 'tool-pane-drag-ghost'; ghost.className = 'split-view-drag-ghost'; document.body.appendChild(ghost); }
+  ghost.textContent = drag.source.element.querySelector('.tool-pane-title, .split-pane-title').textContent;
+  ghost.style.left = event.clientX + 12 + 'px'; ghost.style.top = event.clientY + 12 + 'px'; ghost.hidden = false;
+}
+async function finish(commit) {
+  var drag = store.get('toolPaneDrag');
+  if (!drag) return;
+  var allowed = commit && drag.moved && receiptCurrent(drag) && JSON.stringify(drag.tree) !== JSON.stringify(drag.receipt.tree);
+  store.set({ toolPaneDrag: null });
+  drag.windows.forEach(function (entry) { if (entry.frame && entry.frame.isConnected) entry.frame.style.pointerEvents = entry.pointerEvents; });
+  if (drag.source) drag.source.element.classList.remove('tool-pane-drag-source');
+  document.body.classList.remove('tool-pane-dragging');
+  var ghost = document.getElementById('tool-pane-drag-ghost'); if (ghost) ghost.hidden = true;
+  try { if (document.documentElement.hasPointerCapture(drag.pointerId)) document.documentElement.releasePointerCapture(drag.pointerId); } catch (error) {}
+  var saved = allowed ? await saveToolPaneTree(drag.receipt, drag.tree) : false;
+  if (!store.get('toolPaneDrag')) { store.set({ toolPaneLayoutPreview: null }); repaintToolPanes(); }
+  setTimeout(function () { if (!store.get('toolPaneDrag')) drag.receipt.host.classList.remove('split-view-drag-preview'); }, 320);
+  return saved;
+}
+function up(event) {
+  var drag = store.get('toolPaneDrag');
+  if (!drag || drag.pointerId !== event.pointerId) return;
+  if (drag.moved) move(event);
+  finish(true);
+}
+export function bindToolPaneDivider(divider, entry, tree) {
+  divider.addEventListener('pointerdown', function (event) {
+    if (event.button !== 0 || store.get('toolPaneDrag')) return;
+    var drag = capture(event, null, entry);
+    if (!drag) return;
+    store.set({ toolPaneDrag: drag }); begin(drag); event.preventDefault(); event.stopImmediatePropagation();
+  });
+  divider.addEventListener('keydown', function (event) {
+    var direction = ['ArrowLeft', 'ArrowUp'].indexOf(event.key) >= 0 ? -1 : ['ArrowRight', 'ArrowDown'].indexOf(event.key) >= 0 ? 1 : 0;
+    if (!direction) return;
+    var receipt = store.get('toolPaneWindowGeometry'), next = resize(tree, entry.path, Math.max(.05, Math.min(.95, entry.ratio + direction * .03)));
+    if (receipt && next) { event.preventDefault(); saveToolPaneTree(receipt, next); }
+  });
+}
+export function initToolPaneDrag() {
+  if (store.get('toolPaneDragInitialized')) return;
+  store.set({ toolPaneDragInitialized: true });
+  document.addEventListener('pointerdown', pointerDown, true);
+  document.addEventListener('pointermove', move, true); document.addEventListener('pointerup', up, true);
+  document.addEventListener('pointercancel', function () { finish(false); }, true);
+  document.addEventListener('keydown', function (event) { if (event.key === 'Escape' && store.get('toolPaneDrag')) { event.preventDefault(); finish(false); } }, true);
+  window.addEventListener('blur', function () { finish(false); });
+}
+
+store.subscribe(function (state, previous) {
+  if (state.toolPaneDrag && (state.myUserId !== previous.myUserId || state.currentSlug !== previous.currentSlug ||
+      state.currentProjectOwnerId !== previous.currentProjectOwnerId || state.splitPanes !== previous.splitPanes ||
+      state.connected !== previous.connected || state.projectSplitViewActiveId !== previous.projectSplitViewActiveId ||
+      state.projectSplitViewSocketGeneration !== previous.projectSplitViewSocketGeneration)) finish(false);
+});

package/lib/public/modules/tool-pane-layout.js

@@ -0,0 +1,95 @@
+import { boundLegacyCoordinates } from './view-legacy-coordinates.js';
+import { pairDisplayTree, pairBase } from './view-pair-presentation.js';
+import { activeSavedView, displayTree, fromDisplayTree, copy, workspaceKey } from './view-workspace-state.js';
+import { persistWorkspace } from './view-workspace-controller.js';
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { TOOL_PANES, toolWindowId, workspaceWindowTree } from './tool-pane-tree.js';
+import { renderPresentationSplitView } from './split-view-presentations.js';
+import { ensureWorkbenchLayoutPreference } from './workbench-layout-preference.js';
+import { showToast } from './utils.js';
+import { initToolPaneDrag, bindToolPaneDivider } from './tool-pane-drag.js';
+
+export function toolPaneContext() {
+  var state = store.snap(), view = (state.projectSplitViews || []).find(function (item) { return item.id === state.projectSplitViewActiveId; });
+  var split = state.splitPanes;
+  var origin = view ? view.id : split && split.panes ? 'legacy-' + (split.groupId || split.panes.map(function (pane) { return pane.sessionId; }).join('-')) : state.projectSplitViewSingletonOrigin;
+  return origin && state.currentSlug && JSON.stringify([state.currentSlug, state.currentProjectOwnerId || null, origin]);
+}
+export function dockedToolPanes() {
+  if (window.innerWidth < 1024 || store.get('paneMode')) return [];
+  return (store.get('rightWorkbenchDockedOwners') || []).filter(function (name) {
+    var definition = TOOL_PANES[name], panel = definition && document.getElementById(definition.id);
+    return panel && !panel.classList.contains('hidden') && !panel.classList.contains('panel-fullscreen');
+  });
+}
+export function toolPaneLayoutTree(view, base) {
+  initToolPaneDrag();
+  var owners = dockedToolPanes(), key = toolPaneContext(), preference = store.get('workbenchLayoutPreference') || {};
+  var draft = store.get('toolPaneLayoutPreview'), saved = preference.layouts && preference.layouts[key];
+  if (view && view.workspace) {
+    var legacy = store.get('savedWorkspaceLegacyLayout');
+    saved = legacy && legacy.key === workspaceKey(view) ? boundLegacyCoordinates(legacy.record, view.workspace) : { base: view.workspace.linkedPair ? pairBase(view.workspace.linkedPair, view.tree) : view.tree, tree: pairDisplayTree(view.workspace) };
+  }
+  if (draft && draft.key === key && JSON.stringify(draft.base) === JSON.stringify(base) && draft.socket === getWs()) return draft.tree;
+  return owners.length || saved ? workspaceWindowTree(base, saved, owners) : base;
+}
+export function paintToolPaneWindows(host, view, base, tree, geometry, inset) {
+  var owners = dockedToolPanes(), key = toolPaneContext(), main = document.getElementById('main-panels');
+  if (!main) return;
+  main.classList.toggle('view-session-focused', !!store.get('projectSplitViewFocusedOrigin'));
+  var hostRect = host.getBoundingClientRect(), mainRect = main.getBoundingClientRect();
+  var windows = Array.from(host.querySelectorAll(':scope > .split-pane:not(.split-pane-cached)')).map(function (pane) {
+    var frame = pane.querySelector('.split-pane-frame'); return { id: frame && frame.dataset.sessionOriginId, element: pane, frame: frame };
+  });
+  Object.keys(TOOL_PANES).forEach(function (name) {
+    var panel = document.getElementById(TOOL_PANES[name].id), rect = geometry.panes[toolWindowId(name)];
+    if (!panel) return;
+    if (!panel.dataset.toolPaneFullscreenObserved) {
+      panel.dataset.toolPaneFullscreenObserved = 'true';
+      var observer = new MutationObserver(function (records) {
+        if (records.some(function (record) { return (String(record.oldValue || '').split(/\s+/).indexOf('panel-fullscreen') >= 0) !== panel.classList.contains('panel-fullscreen'); })) requestAnimationFrame(repaintToolPanes);
+      });
+      observer.observe(panel, { attributes: true, attributeOldValue: true, attributeFilter: ['class'] });
+      panel.addEventListener('clay-tool-pane-dispose', function () { observer.disconnect(); }, { once: true });
+    }
+    var mounted = owners.indexOf(name) >= 0 && !!rect;
+    var wasMounted = panel.classList.contains('tool-pane-window');
+    panel.classList.toggle('tool-pane-window', mounted);
+    if (!mounted) {
+      if (wasMounted) ['left', 'top', 'width', 'height', 'right', 'maxHeight'].forEach(function (field) { panel.style[field] = ''; });
+      delete panel.dataset.toolWindowId; return;
+    }
+    panel.dataset.toolWindowId = toolWindowId(name);
+    panel.style.left = hostRect.left - mainRect.left + inset.left + rect.x + 'px';
+    panel.style.top = hostRect.top - mainRect.top + inset.top + rect.y + 'px';
+    panel.style.width = rect.width + 'px'; panel.style.height = rect.height + 'px'; panel.style.right = 'auto'; panel.style.maxHeight = 'none';
+    windows.push({ id: toolWindowId(name), element: panel, tool: name });
+  });
+  main.classList.toggle('has-tool-pane-windows', owners.length > 0);
+  if (Math.abs(host.clientWidth - hostRect.width) > 1) requestAnimationFrame(repaintToolPanes);
+  store.set({ toolPaneWindowGeometry: { key: key, base: base, tree: tree, view: view, windows: windows,
+    host: host, socket: getWs(), revision: view && view.workspace ? view.revision : (store.get('workbenchLayoutPreference') || {}).revision,
+    scope: JSON.stringify([store.get('myUserId'), store.get('currentSlug'), store.get('currentProjectOwnerId'), store.get('projectSplitViewSocketGeneration')]) } });
+}
+export function bindWorkspaceDivider(divider, entry, tree) { bindToolPaneDivider(divider, entry, tree); }
+export function repaintToolPanes() { renderPresentationSplitView(); }
+export async function saveToolPaneTree(receipt, tree) {
+  var live = store.get('toolPaneWindowGeometry');
+  if (!live || live.key !== toolPaneContext() || live.key !== receipt.key || live.socket !== receipt.socket || live.scope !== receipt.scope || live.revision !== receipt.revision || !store.get('connected')) return false;
+  var view = activeSavedView();
+  if (view) { var value = copy(view.workspace); value.tree = fromDisplayTree(value, tree); if (value.linkedPair) value.linkedPair.tree = copy(tree); return persistWorkspace(value); }
+  showToast('Wait for the saved View before changing pane positions.', 'warn');
+  return false;
+}
+store.subscribe(function (state, previous) {
+  if (state.paneMode) return;
+  var changed = state.rightWorkbenchDockedOwners !== previous.rightWorkbenchDockedOwners || state.workbenchLayoutPreference !== previous.workbenchLayoutPreference ||
+    state.toolPaneLayoutPreview !== previous.toolPaneLayoutPreview;
+  if (!changed) return;
+  if (!state.toolPaneRepaintQueued) {
+    store.set({ toolPaneRepaintQueued: true });
+    requestAnimationFrame(function () { store.set({ toolPaneRepaintQueued: false }); renderPresentationSplitView(); });
+  }
+  if ((state.rightWorkbenchDockedOwners || []).some(function (name) { return !!TOOL_PANES[name]; }) && !(state.workbenchLayoutPreference || {}).ready && !(state.workbenchLayoutPreference || {}).loading && !(state.workbenchLayoutPreference || {}).saving && !(state.workbenchLayoutPreference || {}).error) ensureWorkbenchLayoutPreference();
+});

package/lib/public/modules/tool-pane-legacy.js

@@ -0,0 +1,60 @@
+import { ensureArrangeTrigger } from './split-view-presentation-renderer.js';
+import { pairBase } from './view-pair-presentation.js';
+import { activeSavedView } from './view-workspace-state.js';
+// Legacy Driver/Worker pairs use the same display-only window geometry.
+import { store } from './store.js';
+import { rectangles } from './split-view-layout-client.js';
+import { toolPaneLayoutTree, paintToolPaneWindows, bindWorkspaceDivider, dockedToolPanes } from './tool-pane-layout.js';
+
+export function clearToolPaneWindows() {
+  document.querySelectorAll('.tool-pane-window').forEach(function (panel) {
+    panel.classList.remove('tool-pane-window'); delete panel.dataset.toolWindowId;
+    ['left', 'top', 'width', 'height', 'right', 'maxHeight'].forEach(function (field) { panel.style[field] = ''; });
+  });
+  var main = document.getElementById('main-panels');
+  if (main) main.classList.remove('has-tool-pane-windows');
+  store.set({ toolPaneWindowGeometry: null });
+}
+export function paintLegacyToolPanes(host) {
+  var split = store.get('splitPanes');
+  if (!host || !split || !split.panes || split.panes.length < 2) return false;
+  var panes = Array.from(host.querySelectorAll(':scope > .split-pane:not(.split-pane-cached)'));
+  var ids = panes.map(function (pane) {
+    var frame = pane.querySelector('.split-pane-frame');
+    if (frame && !frame.dataset.toolPaneGeometryReadyBound) {
+      frame.dataset.toolPaneGeometryReadyBound = 'true';
+      frame.addEventListener('clay-pane-ready', function () { queueMicrotask(function () { if (frame.isConnected) paintLegacyToolPanes(host); }); });
+    }
+    return frame && frame.dataset.sessionOriginId;
+  });
+  if (ids.length < split.panes.length || ids.some(function (id) { return !id; }) || new Set(ids).size !== ids.length) return false;
+  var base = { id: ids[0] };
+  ids.slice(1).forEach(function (id) { base = { axis: 'horizontal', ratio: .5, left: base, right: { id: id } }; });
+  var view = activeSavedView() || { id: 'legacy-' + (split.groupId || ids.join('-')), activeSessionOriginId: ids[0] };
+  if (view.workspace && view.workspace.linkedPair) base = pairBase(view.workspace.linkedPair, view.tree);
+  host.classList.add('split-view-canvas'); host.dataset.positioned = 'true'; delete host.dataset.singlePane;
+  var style = getComputedStyle(host), left = parseFloat(style.paddingLeft) || 0, top = parseFloat(style.paddingTop) || 0;
+  var width = host.clientWidth - left - (parseFloat(style.paddingRight) || 0), height = host.clientHeight - top - (parseFloat(style.paddingBottom) || 0);
+  var tree = toolPaneLayoutTree(view, base), geometry = rectangles(tree, Math.max(0, width), Math.max(0, height), 7);
+  paintToolPaneWindows(host, view, base, tree, geometry, { left: left, top: top });
+  var focused = store.get('projectSplitViewFocusedOrigin');
+  panes.forEach(function (pane, index) {
+    var rect = geometry.panes[ids[index]];
+    pane.hidden = !!focused && ids[index] !== focused; pane.style.display = pane.hidden ? 'none' : '';
+    if (focused === ids[index]) rect = { x: 0, y: 0, width: width, height: height };
+    if (!rect) return;
+    if (view.sessions && view.sessions.some(function (s) { return s.sessionOriginId === ids[index]; })) ensureArrangeTrigger(pane.querySelector('.split-pane-header'));
+    pane.style.left = left + rect.x + 'px'; pane.style.top = top + rect.y + 'px';
+    pane.style.width = rect.width + 'px'; pane.style.height = rect.height + 'px';
+  });
+  host.querySelectorAll(':scope > .split-view-divider').forEach(function (divider) { divider.remove(); });
+  (focused ? [] : geometry.dividers).forEach(function (entry) {
+    var divider = document.createElement('div'); divider.className = 'split-view-divider'; divider.dataset.axis = entry.axis;
+    divider.setAttribute('role', 'separator'); divider.setAttribute('tabindex', '0'); divider.setAttribute('aria-label', 'Resize pane windows');
+    divider.setAttribute('aria-orientation', entry.axis === 'horizontal' ? 'vertical' : 'horizontal');
+    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';
+    bindWorkspaceDivider(divider, entry, tree); host.appendChild(divider);
+  });
+  return true;
+}

package/lib/public/modules/tool-pane-tree.js

@@ -0,0 +1,51 @@
+import { WORKBENCH_PANELS } from './workbench-panels.js';
+import { listIds, remove, pairTree, swap } from './split-view-layout-client.js';
+
+export var TOOL_PANES = { terminal: { id: 'terminal-container', label: 'Terminal', icon: 'terminal' },
+  browser: { id: 'shared-browser-panel', label: 'Browser', icon: 'globe' }, 'file-viewer': { id: 'file-viewer', label: 'Files', icon: 'file-text' } };
+Object.assign(TOOL_PANES, WORKBENCH_PANELS);
+export function toolWindowId(name) { return 'tool-' + name; }
+export function isToolWindow(id) { return /^tool-file-[A-Za-z0-9_-]+$/.test(id) || Object.keys(TOOL_PANES).some(function (name) { return toolWindowId(name) === id; }); }
+export function insertWindow(tree, source, target, side, ratio) {
+  if (source === target) return tree;
+  if (side === 'center' && isToolWindow(source) && isToolWindow(target)) return swap(tree, source, target).tree;
+  side = side === 'center' ? 'right' : side;
+  var base = remove(tree, source), found = false;
+  function walk(node) {
+    if (!node) return node;
+    if (node.id) {
+      if (node.id !== target) return node;
+      found = true;
+      var result = pairTree(target, source, side);
+      result.ratio = ratio || .5;
+      return result;
+    }
+    return { axis: node.axis, ratio: node.ratio, left: walk(node.left), right: walk(node.right) };
+  }
+  var next = walk(base);
+  return found && listIds(next).length <= 24 ? next : tree;
+}
+function stripUnknown(tree, allowed) {
+  var result = tree;
+  listIds(tree).forEach(function (id) { if (allowed.indexOf(id) < 0) result = remove(result, id); });
+  return result;
+}
+function placements(tree, output) {
+  if (!tree || tree.id) return;
+  var left = listIds(tree.left), right = listIds(tree.right);
+  if (tree.left.id && isToolWindow(tree.left.id)) output.push({ id: tree.left.id, target: right[0], side: tree.axis === 'horizontal' ? 'left' : 'top', ratio: tree.ratio });
+  else if (tree.right.id && isToolWindow(tree.right.id)) output.push({ id: tree.right.id, target: left[0], side: tree.axis === 'horizontal' ? 'right' : 'bottom', ratio: tree.ratio });
+  placements(tree.left, output); placements(tree.right, output);
+}
+export function workspaceWindowTree(base, saved, owners) {
+  var sessions = listIds(base), tools = owners.map(toolWindowId), allowed = sessions.concat(tools), tree = base;
+  if (saved && saved.tree && JSON.stringify(saved.base) === JSON.stringify(base)) tree = stripUnknown(saved.tree, allowed);
+  else if (saved && saved.tree) {
+    var attached = []; placements(saved.tree, attached);
+    attached.reverse().forEach(function (item) { if (tools.indexOf(item.id) >= 0 && listIds(tree).indexOf(item.target) >= 0) tree = insertWindow(tree, item.id, item.target, item.side, item.ratio); });
+  }
+  tools.forEach(function (id) {
+    if (listIds(tree).indexOf(id) < 0) tree = tree ? { axis: 'horizontal', ratio: .66, left: tree, right: { id: id } } : { id: id };
+  });
+  return tree;
+}

package/lib/public/modules/tools.js

@@ -1,5 +1,5 @@
+import { createSessionToolItem, createSessionToolGroup, sessionToolGroupSummary } from './session-tool-item.js';
 import { renderProductReview } from './product-review.js';
-import { clayToolGroupSummary } from './clay-tool-presentation.js';
 import { applyClayToolItem, applyClayToolResult, finishClayToolItem, findEndedClayTool, clayToolResultGroup, bindToolGroupDisclosure, syncToolGroupDisclosure, syncClayToolGroup } from './clay-tool-activity.js';
 import { rememberMountedToolGroup, mountedToolGroup, transcriptToolGroups, popupChatRenderingEnabled, popupChatRenderingActive, syncPopupActivityGroup, syncPopupChatToolGroups as syncPopupGroups } from './popup-chat-rendering.js';
 import { escapeHtml, copyToClipboard } from './utils.js';
@@ -80,61 +80,12 @@ function findToolGroup(groupId) {
   return toolGroups[groupId] || null;
 }
 
-function toolGroupSummary(group) {
-  var claySummary = clayToolGroupSummary(group, tools);
-  if (claySummary) return claySummary;
-  var names = group.toolNames;
-  var count = names.length;
-  var allDone = group.doneCount >= count;
-
-  // Count by tool name
-  var counts = {};
-  for (var i = 0; i < names.length; i++) {
-    counts[names[i]] = (counts[names[i]] || 0) + 1;
-  }
-  var uniqueNames = Object.keys(counts);
-
-  if (uniqueNames.length === 1) {
-    var name = uniqueNames[0];
-    var n = counts[name];
-    if (allDone) {
-      switch (name) {
-        case "Read": return "Read " + n + " file" + (n > 1 ? "s" : "");
-        case "Edit": return "Edited " + n + " file" + (n > 1 ? "s" : "");
-        case "Write": return "Wrote " + n + " file" + (n > 1 ? "s" : "");
-        case "Bash": return "Ran " + n + " command" + (n > 1 ? "s" : "");
-        case "Grep": return "Searched " + n + " pattern" + (n > 1 ? "s" : "");
-        case "Glob": return "Found " + n + " pattern" + (n > 1 ? "s" : "");
-        case "Task": return "Ran " + n + " task" + (n > 1 ? "s" : "");
-        case "WebSearch": return "Searched " + n + " quer" + (n > 1 ? "ies" : "y");
-        case "WebFetch": return "Fetched " + n + " URL" + (n > 1 ? "s" : "");
-        default: return "Ran " + n + " tool" + (n > 1 ? "s" : "");
-      }
-    }
-    switch (name) {
-      case "Read": return "Reading " + n + " file" + (n > 1 ? "s" : "") + "...";
-      case "Edit": return "Editing " + n + " file" + (n > 1 ? "s" : "") + "...";
-      case "Write": return "Writing " + n + " file" + (n > 1 ? "s" : "") + "...";
-      case "Bash": return "Running " + n + " command" + (n > 1 ? "s" : "") + "...";
-      case "Grep": return "Searching " + n + " pattern" + (n > 1 ? "s" : "") + "...";
-      case "Glob": return "Finding " + n + " pattern" + (n > 1 ? "s" : "") + "...";
-      case "Task": return "Running " + n + " task" + (n > 1 ? "s" : "") + "...";
-      case "WebSearch": return "Searching " + n + " quer" + (n > 1 ? "ies" : "y") + "...";
-      case "WebFetch": return "Fetching " + n + " URL" + (n > 1 ? "s" : "") + "...";
-      default: return "Running " + n + " tool" + (n > 1 ? "s" : "") + "...";
-    }
-  }
-
-  // Mixed tools
-  if (allDone) return "Ran " + count + " tools";
-  return "Running " + count + " tools...";
-}
 
 function updateToolGroupHeader(group) {
   if (!group || !group.el) return;
   var popupChat = group.popupChat && popupChatRenderingActive();
   var label = group.el.querySelector(".tool-group-label");
-  var summary = toolGroupSummary(group);
+  var summary = sessionToolGroupSummary(group, tools);
   if (label && !popupChat) label.textContent = summary;
 
   var allDone = group.doneCount >= group.toolCount;
@@ -1644,31 +1595,12 @@ export function createToolItem(id, name) {
   // Group management: create new group or reuse existing open group
   if (!currentToolGroup || currentToolGroup.closed) {
     toolGroupCounter++;
-    var groupEl = document.createElement("div");
-    groupEl.className = "tool-group";
     var identity = resolveProjectAssistantIdentity();
     var isMateToolGroup = identity.kind === 'mate';
-    if (isMateToolGroup) groupEl.classList.add("mate-tool-group");
+    var groupEl = createSessionToolGroup(isMateToolGroup ? identity.avatarUrl : null);
+    if (isMateToolGroup) groupEl.classList.add('mate-tool-group');
     groupEl.dataset.groupId = "g" + toolGroupCounter;
 
-    var toolGroupInner =
-      '<div class="tool-group-header" style="display:none">' +
-      '<span class="tool-group-chevron">' + iconHtml("chevron-right") + '</span>' +
-      '<span class="tool-group-bullet"></span>' +
-      '<span class="tool-group-label">Running...</span>' +
-      '<span class="tool-group-status-icon">' + iconHtml("loader", "icon-spin") + '</span>' +
-      '</div>' +
-      '<div class="tool-group-items"></div>';
-
-    if (isMateToolGroup) {
-      var mateAvatar = identity.avatarUrl;
-      groupEl.innerHTML =
-        '<img class="dm-bubble-avatar dm-bubble-avatar-mate" src="' + escapeHtml(mateAvatar) + '" alt="">' +
-        '<div class="dm-bubble-content">' + toolGroupInner + '</div>';
-    } else {
-      groupEl.innerHTML = toolGroupInner;
-    }
-
     applyProjectAssistantIdentity(groupEl, identity);
     bindToolGroupDisclosure(groupEl, function () {
       var group = mountedToolGroup(groupEl);
@@ -1694,23 +1626,7 @@ export function createToolItem(id, name) {
     rememberMountedToolGroup(currentToolGroup);
   }
 
-  var el = document.createElement("div");
-  el.className = "tool-item";
-  el.dataset.toolId = id;
-  el.innerHTML =
-    '<div class="tool-header">' +
-    '<span class="tool-chevron">' + iconHtml("chevron-right") + '</span>' +
-    '<span class="tool-bullet"></span>' +
-    '<span class="tool-name"></span>' +
-    '<span class="tool-desc"></span>' +
-    '<span class="tool-status-icon">' + iconHtml("loader", "icon-spin") + '</span>' +
-    '</div>' +
-    '<div class="tool-subtitle">' +
-    '<span class="tool-connector">&#9492;</span>' +
-    '<span class="tool-subtitle-text">Running...</span>' +
-    '</div>';
-
-  el.querySelector(".tool-name").textContent = name;
+  var el = createSessionToolItem(id, name);
 
   tools[id] = { el: el, name: name, input: null, done: false, groupId: currentToolGroup.id };
   applyClayToolItem(tools[id]);

package/lib/public/modules/tooltip.js

@@ -1,3 +1,5 @@
+import { initPaneHeaderTooltips } from './pane-header-tooltips.js';
+
 // --- Global JS tooltip system ---
 // Unified tooltip using [data-tip] attribute.
 // Usage: initTooltips() auto-binds, converts [title] to [data-tip].
@@ -9,13 +11,15 @@ var SHOW_DELAY = 120;
 var currentTarget = null;
 
 function initTooltips() {
+  if (tooltipEl) return;
   // Create singleton tooltip element
   tooltipEl = document.createElement("div");
-  tooltipEl.className = "tooltip";
+  tooltipEl.className = "tooltip"; tooltipEl.id = "clay-tooltip"; tooltipEl.setAttribute("role", "tooltip"); tooltipEl.setAttribute("aria-hidden", "true");
   document.body.appendChild(tooltipEl);
 
   // Convert existing title attributes to data-tip in target areas
   convertTitles();
+  initPaneHeaderTooltips();
 
   // Delegate hover events on document for [data-tip]
   document.addEventListener("mouseover", function (e) {
@@ -34,6 +38,13 @@ function initTooltips() {
     hideTooltip();
   });
 
+  document.addEventListener("focusin", function (event) {
+    var target = event.target.closest("[data-tip], [data-tip-html]");
+    if (target) scheduleShow(target);
+  });
+  document.addEventListener("focusout", function () { cancelShow(); hideTooltip(); });
+  document.addEventListener("keydown", function (event) { if (event.key === "Escape") { cancelShow(); hideTooltip(); } });
+  window.addEventListener("blur", function () { cancelShow(); hideTooltip(); });
   document.addEventListener("pointerdown", function () {
     cancelShow();
     hideTooltip();
@@ -58,8 +69,8 @@ function convertTitles() {
     var el = els[i];
     if (!el.getAttribute("data-tip")) {
       el.setAttribute("data-tip", el.getAttribute("title"));
-      el.removeAttribute("title");
     }
+    el.removeAttribute("title");
   }
 }
 
@@ -83,17 +94,23 @@ function cancelShow() {
 }
 
 function showTooltipAt(target) {
-  if (!tooltipEl) return;
+  if (!tooltipEl || !target.isConnected || !target.getClientRects().length) return;
+  // A message preview already describes this Worker/task tab.
+  if (target.getAttribute('aria-describedby') === 'agent-message-bubble' && document.getElementById('agent-message-bubble')) return;
   // Suppress tooltip when an associated popover/picker is open
   var suppressSel = target.getAttribute("data-tip-suppress-when-open");
   if (suppressSel) {
     var openEl = document.querySelector(suppressSel);
-    if (openEl && !openEl.classList.contains("hidden")) return;
+    if (openEl && !openEl.hidden && !openEl.classList.contains("hidden")) return;
   }
   var html = target.getAttribute("data-tip-html");
   var text = target.getAttribute("data-tip");
   if (!html && !text) return;
+  if (currentTarget && currentTarget !== target) hideTooltip();
   currentTarget = target;
+  var described = (target.getAttribute('aria-describedby') || '').split(/\s+/).filter(Boolean);
+  if (described.indexOf('clay-tooltip') < 0) described.push('clay-tooltip');
+  target.setAttribute('aria-describedby', described.join(' '));
 
   if (html) {
     tooltipEl.innerHTML = html;
@@ -113,6 +130,7 @@ function showTooltipAt(target) {
   tooltipEl.style.top = "-9999px";
   tooltipEl.style.left = "0";
   tooltipEl.style.right = "";
+  tooltipEl.setAttribute("aria-hidden", "false");
   tooltipEl.classList.add("visible");
 
   // Position after layout
@@ -144,9 +162,17 @@ function showTooltipAt(target) {
 
 function hideTooltip() {
   if (tooltipEl) {
-    tooltipEl.classList.remove("visible");
+    tooltipEl.classList.remove("visible"); tooltipEl.setAttribute("aria-hidden", "true");
+  }
+  if (currentTarget) {
+    var described = (currentTarget.getAttribute('aria-describedby') || '').split(/\s+/).filter(function (id) { return id && id !== 'clay-tooltip'; });
+    if (described.length) currentTarget.setAttribute('aria-describedby', described.join(' ')); else currentTarget.removeAttribute('aria-describedby');
   }
   currentTarget = null;
 }
 
-export { initTooltips, registerTooltip };
+function pruneTooltip() { if (currentTarget && (!currentTarget.isConnected || !currentTarget.getClientRects().length)) { cancelShow(); hideTooltip(); } }
+
+function dismissTooltip() { cancelShow(); hideTooltip(); }
+
+export { initTooltips, registerTooltip, pruneTooltip, dismissTooltip };

package/lib/public/modules/view-legacy-coordinates.js

@@ -0,0 +1,16 @@
+import { copy, mapWorkspaceTree, paneOwner } from './view-workspace-state.js';
+import { listIds } from './split-view-layout-client.js';
+// Coordinates never create resources. Resolve the old singleton Files slot only
+// after a real file instance exists; leave other delayed slots intact.
+export function boundLegacyCoordinates(record, value) {
+  var next = copy(record), mapping = {};
+  listIds(record.tree).forEach(function (id) { mapping[id] = id; });
+  var files = value.panes.filter(function (pane) { return pane.kind === 'file' && pane.open && pane.placement === 'docked'; });
+  if (files.length === 1) mapping['tool-file-viewer'] = 'tool-' + paneOwner(files[0]);
+  next.tree = mapWorkspaceTree(next.tree, mapping);
+  return next;
+}
+export function legacyCoordinatesReady(record, value) {
+  var ids = value.panes.filter(function (p) { return p.open && p.placement === 'docked'; }).map(function (p) { return 'tool-' + paneOwner(p); });
+  return listIds(boundLegacyCoordinates(record, value).tree).filter(function (id) { return id.indexOf('tool-') === 0; }).every(function (id) { return ids.indexOf(id) >= 0; });
+}

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

@@ -0,0 +1,24 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { showToast } from './utils.js';
+import { prepareViewMutation } from './view-workspace-state.js';
+function contextKey(state) { return [state.currentSlug || '', state.currentProjectOwnerId || '', state.myUserId || '', state.projectSplitViewSocketGeneration || 0].join('|'); }
+function projectReady(state) { return getWs() !== state.splitIdentityBlockedSocket && !state.paneMode && !state.dmMode && state.connected && state.authIdentityLoaded && state.currentSlug === state.activeProjectSlug && state.currentSlug === state.sessionListProjectSlug; }
+function sendMessage(message) { var ws = getWs(); if (!ws || ws.readyState !== 1 || !projectReady(store.snap())) return false; try { ws.send(JSON.stringify(message)); return true; } catch (error) { return false; } }
+export 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 = prepareViewMutation(type, Object.assign({ type: type, requestId: requestId, expectedRevision: state.projectSplitViewRevision }, body || {}));
+  if (!message) return false;
+  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;
+}