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

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

package/lib/public/modules/terminal.js

@@ -8,6 +8,7 @@ import { copyToClipboard } from './utils.js';
 import { getTerminalTheme } from './theme.js';
 import { getTerminalFontFamily, getTerminalFontSize, onTerminalFontChange } from './terminal-prefs.js';
 import { createKeyToolbar } from './terminal-toolbar.js';
+import { applyTerminalSize, hasTerminalViewport } from './terminal-viewport.js';
 
 var ctx;
 var tabs = new Map(); // termId -> { id, title, exited, xterm, fitAddon, bodyEl }
@@ -482,7 +483,7 @@ function fitTerminal() {
     fitRafId = null;
     if (!activeTabId) return;
     var tab = tabs.get(activeTabId);
-    if (!tab || !tab.fitAddon || !tab.xterm) return;
+    if (!isOpen || !tab || !tab.fitAddon || !tab.xterm || !hasTerminalViewport(tab)) return;
 
     try {
       tab.fitAddon.fit();
@@ -787,9 +788,7 @@ export function handleTermResized(msg) {
   handleTerminalProjection(msg);
   if (!msg.id) return;
   var tab = tabs.get(msg.id);
-  if (tab && tab.xterm && msg.cols > 0 && msg.rows > 0) {
-    tab.xterm.resize(msg.cols, msg.rows);
-  }
+  applyTerminalSize(tab, msg, isOpen && msg.id === activeTabId, fitTerminal);
 }
 
 export function handleTermExited(msg) {

package/lib/public/modules/theme-palette.js

@@ -0,0 +1,177 @@
+// --- Color utilities ---
+
+function hexToRgb(hex) {
+  var h = hex.replace("#", "");
+  return {
+    r: parseInt(h.substring(0, 2), 16),
+    g: parseInt(h.substring(2, 4), 16),
+    b: parseInt(h.substring(4, 6), 16)
+  };
+}
+
+function rgbToHex(r, g, b) {
+  return "#" + [r, g, b].map(function (v) {
+    var c = Math.max(0, Math.min(255, Math.round(v)));
+    return c.toString(16).padStart(2, "0");
+  }).join("");
+}
+
+function darken(hex, amount) {
+  var c = hexToRgb(hex);
+  var f = 1 - amount;
+  return rgbToHex(c.r * f, c.g * f, c.b * f);
+}
+
+function lighten(hex, amount) {
+  var c = hexToRgb(hex);
+  return rgbToHex(
+    c.r + (255 - c.r) * amount,
+    c.g + (255 - c.g) * amount,
+    c.b + (255 - c.b) * amount
+  );
+}
+
+function mixColors(hex1, hex2, weight) {
+  var c1 = hexToRgb(hex1);
+  var c2 = hexToRgb(hex2);
+  var w = weight;
+  return rgbToHex(
+    c1.r * w + c2.r * (1 - w),
+    c1.g * w + c2.g * (1 - w),
+    c1.b * w + c2.b * (1 - w)
+  );
+}
+
+function hexToRgba(hex, alpha) {
+  var c = hexToRgb(hex);
+  return "rgba(" + c.r + ", " + c.g + ", " + c.b + ", " + alpha + ")";
+}
+
+function luminance(hex) {
+  var c = hexToRgb(hex);
+  return (0.299 * c.r + 0.587 * c.g + 0.114 * c.b) / 255;
+}
+
+var DEFAULT_DARK_THEME_ID = "clay-dark";
+var DEFAULT_LIGHT_THEME_ID = "clay-light";
+
+// Embedded defaults keep the first render branded before /api/themes loads.
+var defaultDarkFallback = {
+  name: "Clay Studio Dark", variant: "dark",
+  base00: "171715", base01: "20201D", base02: "393934", base03: "686861",
+  base04: "A0A098", base05: "D1D1CA", base06: "E8E8E2", base07: "FAFAF5",
+  base08: "FF7479", base09: "7776FF", base0A: "E0B45B", base0B: "07E5A3",
+  base0C: "5FD2C0", base0D: "8AA7FF", base0E: "C39AF3", base0F: "D69A7D",
+  accent2: "07E5A3", link: "7F7EC8"
+};
+
+var defaultLightFallback = {
+  name: "Clay Studio Light", variant: "light",
+  base00: "F7F7F3", base01: "EEEEEA", base02: "D7D7D0", base03: "A2A29B",
+  base04: "73736C", base05: "44443F", base06: "252522", base07: "151513",
+  base08: "C84B50", base09: "5857FC", base0A: "956A19", base0B: "087B59",
+  base0C: "187A7C", base0D: "3F62B4", base0E: "7A52A8", base0F: "9A5A46",
+  accent2: "07E5A3", link: "4948B8"
+};
+
+// --- Compute CSS variables from a base16 palette ---
+function computeVars(theme) {
+  var b = {};
+  var keys = ["base00","base01","base02","base03","base04","base05","base06","base07",
+              "base08","base09","base0A","base0B","base0C","base0D","base0E","base0F"];
+  for (var i = 0; i < keys.length; i++) {
+    b[keys[i]] = "#" + theme[keys[i]];
+  }
+
+  var isLight = theme.variant === "light";
+  var accent2 = theme.accent2 ? "#" + theme.accent2 : b.base0D;
+  var link = theme.link ? "#" + theme.link : b.base0D;
+
+  return {
+    "--bg":             b.base00,
+    "--bg-alt":         b.base01,
+    "--text":           b.base06,
+    "--text-secondary": b.base05,
+    "--text-muted":     b.base04,
+    "--text-dimmer":    b.base03,
+    "--accent":         b.base09,
+    "--accent-hover":   isLight ? darken(b.base09, 0.12) : lighten(b.base09, 0.12),
+    "--accent-bg":      hexToRgba(b.base09, 0.12),
+    "--link":           link,
+    "--link-hover":     isLight ? darken(link, 0.10) : lighten(link, 0.10),
+    "--code-bg":        isLight ? darken(b.base00, 0.03) : darken(b.base00, 0.15),
+    "--border":         b.base02,
+    "--border-subtle":  mixColors(b.base00, b.base02, 0.6),
+    "--input-bg":       isLight ? darken(b.base00, 0.04) : mixColors(b.base01, b.base02, 0.5),
+    "--ask-mate-bg":    isLight ? mixColors("#ffffff", darken(b.base00, 0.04), 0.6) : mixColors(b.base00, mixColors(b.base01, b.base02, 0.5), 0.6),
+    "--user-bubble":    isLight ? darken(b.base01, 0.03) : mixColors(b.base01, b.base02, 0.3),
+    "--error":          b.base08,
+    "--success":        b.base0B,
+    "--warning":        b.base0A,
+    "--sidebar-bg":     isLight ? darken(b.base00, 0.02) : darken(b.base00, 0.10),
+    "--sidebar-hover":  isLight ? darken(b.base00, 0.06) : mixColors(b.base00, b.base01, 0.5),
+    "--sidebar-active": isLight ? darken(b.base01, 0.05) : mixColors(b.base01, b.base02, 0.5),
+    "--filebrowser-bg": isLight ? lighten(b.base00, 0.03) : lighten(b.base00, 0.04),
+    "--filebrowser-border": isLight ? darken(b.base00, 0.08) : mixColors(b.base02, b.base00, 0.5),
+    "--accent-8":       hexToRgba(b.base09, 0.08),
+    "--accent-12":      hexToRgba(b.base09, 0.12),
+    "--accent-15":      hexToRgba(b.base09, 0.15),
+    "--accent-20":      hexToRgba(b.base09, 0.20),
+    "--accent-25":      hexToRgba(b.base09, 0.25),
+    "--accent-30":      hexToRgba(b.base09, 0.30),
+    "--accent2":        accent2,
+    "--accent2-hover":  isLight ? darken(accent2, 0.12) : lighten(accent2, 0.12),
+    "--accent2-bg":     hexToRgba(accent2, 0.12),
+    "--accent2-8":      hexToRgba(accent2, 0.08),
+    "--accent2-12":     hexToRgba(accent2, 0.12),
+    "--accent2-15":     hexToRgba(accent2, 0.15),
+    "--accent2-20":     hexToRgba(accent2, 0.20),
+    "--accent2-25":     hexToRgba(accent2, 0.25),
+    "--accent2-30":     hexToRgba(accent2, 0.30),
+    "--error-8":        hexToRgba(b.base08, 0.08),
+    "--error-12":       hexToRgba(b.base08, 0.12),
+    "--error-15":       hexToRgba(b.base08, 0.15),
+    "--error-25":       hexToRgba(b.base08, 0.25),
+    "--success-8":      hexToRgba(b.base0B, 0.08),
+    "--success-12":     hexToRgba(b.base0B, 0.12),
+    "--success-15":     hexToRgba(b.base0B, 0.15),
+    "--success-25":     hexToRgba(b.base0B, 0.25),
+    "--warning-bg":     hexToRgba(b.base0A, 0.12),
+    "--overlay-rgb":    isLight ? "0,0,0" : "255,255,255",
+    "--shadow-rgb":     "0,0,0",
+    "--hl-comment":     b.base03,
+    "--hl-keyword":     b.base0E,
+    "--hl-string":      b.base0B,
+    "--hl-number":      b.base09,
+    "--hl-function":    b.base0D,
+    "--hl-variable":    b.base08,
+    "--hl-type":        b.base0A,
+    "--hl-constant":    b.base09,
+    "--hl-tag":         b.base08,
+    "--hl-attr":        b.base0D,
+    "--hl-regexp":      b.base0C,
+    "--hl-meta":        b.base0F,
+    "--hl-builtin":     b.base09,
+    "--hl-symbol":      b.base0F,
+    "--hl-addition":    b.base0B,
+    "--hl-deletion":    b.base08
+  };
+}
+
+function validateTheme(t) {
+  if (!t || typeof t !== "object") return false;
+  if (!t.name || typeof t.name !== "string") return false;
+  var keys = ["base00","base01","base02","base03","base04","base05","base06","base07",
+              "base08","base09","base0A","base0B","base0C","base0D","base0E","base0F"];
+  for (var i = 0; i < keys.length; i++) {
+    if (!t[keys[i]] || !/^[0-9a-fA-F]{6}$/.test(t[keys[i]])) return false;
+  }
+  if (t.variant && t.variant !== "dark" && t.variant !== "light") return false;
+  if (!t.variant) {
+    t.variant = luminance("#" + t.base00) > 0.5 ? "light" : "dark";
+  }
+  return true;
+}
+
+
+export { hexToRgb, rgbToHex, darken, lighten, mixColors, hexToRgba, luminance, computeVars, validateTheme, defaultDarkFallback, defaultLightFallback, DEFAULT_DARK_THEME_ID, DEFAULT_LIGHT_THEME_ID };

package/lib/public/modules/theme.js

@@ -5,165 +5,7 @@ import { setTuiSessionTheme } from './session-tui-view.js';
 import { setTuiAttentionTheme } from './tui-attention.js';
 import { updateMermaidTheme } from './markdown.js';
 
-// --- Color utilities ---
-
-function hexToRgb(hex) {
-  var h = hex.replace("#", "");
-  return {
-    r: parseInt(h.substring(0, 2), 16),
-    g: parseInt(h.substring(2, 4), 16),
-    b: parseInt(h.substring(4, 6), 16)
-  };
-}
-
-function rgbToHex(r, g, b) {
-  return "#" + [r, g, b].map(function (v) {
-    var c = Math.max(0, Math.min(255, Math.round(v)));
-    return c.toString(16).padStart(2, "0");
-  }).join("");
-}
-
-function darken(hex, amount) {
-  var c = hexToRgb(hex);
-  var f = 1 - amount;
-  return rgbToHex(c.r * f, c.g * f, c.b * f);
-}
-
-function lighten(hex, amount) {
-  var c = hexToRgb(hex);
-  return rgbToHex(
-    c.r + (255 - c.r) * amount,
-    c.g + (255 - c.g) * amount,
-    c.b + (255 - c.b) * amount
-  );
-}
-
-function mixColors(hex1, hex2, weight) {
-  var c1 = hexToRgb(hex1);
-  var c2 = hexToRgb(hex2);
-  var w = weight;
-  return rgbToHex(
-    c1.r * w + c2.r * (1 - w),
-    c1.g * w + c2.g * (1 - w),
-    c1.b * w + c2.b * (1 - w)
-  );
-}
-
-function hexToRgba(hex, alpha) {
-  var c = hexToRgb(hex);
-  return "rgba(" + c.r + ", " + c.g + ", " + c.b + ", " + alpha + ")";
-}
-
-function luminance(hex) {
-  var c = hexToRgb(hex);
-  return (0.299 * c.r + 0.587 * c.g + 0.114 * c.b) / 255;
-}
-
-var DEFAULT_DARK_THEME_ID = "clay-dark";
-var DEFAULT_LIGHT_THEME_ID = "clay-light";
-
-// Embedded defaults keep the first render branded before /api/themes loads.
-var defaultDarkFallback = {
-  name: "Clay Studio Dark", variant: "dark",
-  base00: "171715", base01: "20201D", base02: "393934", base03: "686861",
-  base04: "A0A098", base05: "D1D1CA", base06: "E8E8E2", base07: "FAFAF5",
-  base08: "FF7479", base09: "7776FF", base0A: "E0B45B", base0B: "07E5A3",
-  base0C: "5FD2C0", base0D: "8AA7FF", base0E: "C39AF3", base0F: "D69A7D",
-  accent2: "07E5A3", link: "7F7EC8"
-};
-
-var defaultLightFallback = {
-  name: "Clay Studio Light", variant: "light",
-  base00: "F7F7F3", base01: "EEEEEA", base02: "D7D7D0", base03: "A2A29B",
-  base04: "73736C", base05: "44443F", base06: "252522", base07: "151513",
-  base08: "C84B50", base09: "5857FC", base0A: "956A19", base0B: "087B59",
-  base0C: "187A7C", base0D: "3F62B4", base0E: "7A52A8", base0F: "9A5A46",
-  accent2: "07E5A3", link: "4948B8"
-};
-
-// --- Compute CSS variables from a base16 palette ---
-function computeVars(theme) {
-  var b = {};
-  var keys = ["base00","base01","base02","base03","base04","base05","base06","base07",
-              "base08","base09","base0A","base0B","base0C","base0D","base0E","base0F"];
-  for (var i = 0; i < keys.length; i++) {
-    b[keys[i]] = "#" + theme[keys[i]];
-  }
-
-  var isLight = theme.variant === "light";
-  var accent2 = theme.accent2 ? "#" + theme.accent2 : b.base0D;
-  var link = theme.link ? "#" + theme.link : b.base0D;
-
-  return {
-    "--bg":             b.base00,
-    "--bg-alt":         b.base01,
-    "--text":           b.base06,
-    "--text-secondary": b.base05,
-    "--text-muted":     b.base04,
-    "--text-dimmer":    b.base03,
-    "--accent":         b.base09,
-    "--accent-hover":   isLight ? darken(b.base09, 0.12) : lighten(b.base09, 0.12),
-    "--accent-bg":      hexToRgba(b.base09, 0.12),
-    "--link":           link,
-    "--link-hover":     isLight ? darken(link, 0.10) : lighten(link, 0.10),
-    "--code-bg":        isLight ? darken(b.base00, 0.03) : darken(b.base00, 0.15),
-    "--border":         b.base02,
-    "--border-subtle":  mixColors(b.base00, b.base02, 0.6),
-    "--input-bg":       isLight ? darken(b.base00, 0.04) : mixColors(b.base01, b.base02, 0.5),
-    "--ask-mate-bg":    isLight ? mixColors("#ffffff", darken(b.base00, 0.04), 0.6) : mixColors(b.base00, mixColors(b.base01, b.base02, 0.5), 0.6),
-    "--user-bubble":    isLight ? darken(b.base01, 0.03) : mixColors(b.base01, b.base02, 0.3),
-    "--error":          b.base08,
-    "--success":        b.base0B,
-    "--warning":        b.base0A,
-    "--sidebar-bg":     isLight ? darken(b.base00, 0.02) : darken(b.base00, 0.10),
-    "--sidebar-hover":  isLight ? darken(b.base00, 0.06) : mixColors(b.base00, b.base01, 0.5),
-    "--sidebar-active": isLight ? darken(b.base01, 0.05) : mixColors(b.base01, b.base02, 0.5),
-    "--filebrowser-bg": isLight ? lighten(b.base00, 0.03) : lighten(b.base00, 0.04),
-    "--filebrowser-border": isLight ? darken(b.base00, 0.08) : mixColors(b.base02, b.base00, 0.5),
-    "--accent-8":       hexToRgba(b.base09, 0.08),
-    "--accent-12":      hexToRgba(b.base09, 0.12),
-    "--accent-15":      hexToRgba(b.base09, 0.15),
-    "--accent-20":      hexToRgba(b.base09, 0.20),
-    "--accent-25":      hexToRgba(b.base09, 0.25),
-    "--accent-30":      hexToRgba(b.base09, 0.30),
-    "--accent2":        accent2,
-    "--accent2-hover":  isLight ? darken(accent2, 0.12) : lighten(accent2, 0.12),
-    "--accent2-bg":     hexToRgba(accent2, 0.12),
-    "--accent2-8":      hexToRgba(accent2, 0.08),
-    "--accent2-12":     hexToRgba(accent2, 0.12),
-    "--accent2-15":     hexToRgba(accent2, 0.15),
-    "--accent2-20":     hexToRgba(accent2, 0.20),
-    "--accent2-25":     hexToRgba(accent2, 0.25),
-    "--accent2-30":     hexToRgba(accent2, 0.30),
-    "--error-8":        hexToRgba(b.base08, 0.08),
-    "--error-12":       hexToRgba(b.base08, 0.12),
-    "--error-15":       hexToRgba(b.base08, 0.15),
-    "--error-25":       hexToRgba(b.base08, 0.25),
-    "--success-8":      hexToRgba(b.base0B, 0.08),
-    "--success-12":     hexToRgba(b.base0B, 0.12),
-    "--success-15":     hexToRgba(b.base0B, 0.15),
-    "--success-25":     hexToRgba(b.base0B, 0.25),
-    "--warning-bg":     hexToRgba(b.base0A, 0.12),
-    "--overlay-rgb":    isLight ? "0,0,0" : "255,255,255",
-    "--shadow-rgb":     "0,0,0",
-    "--hl-comment":     b.base03,
-    "--hl-keyword":     b.base0E,
-    "--hl-string":      b.base0B,
-    "--hl-number":      b.base09,
-    "--hl-function":    b.base0D,
-    "--hl-variable":    b.base08,
-    "--hl-type":        b.base0A,
-    "--hl-constant":    b.base09,
-    "--hl-tag":         b.base08,
-    "--hl-attr":        b.base0D,
-    "--hl-regexp":      b.base0C,
-    "--hl-meta":        b.base0F,
-    "--hl-builtin":     b.base09,
-    "--hl-symbol":      b.base0F,
-    "--hl-addition":    b.base0B,
-    "--hl-deletion":    b.base08
-  };
-}
+import { hexToRgb, rgbToHex, darken, lighten, mixColors, hexToRgba, luminance, computeVars, validateTheme, defaultDarkFallback, defaultLightFallback, DEFAULT_DARK_THEME_ID, DEFAULT_LIGHT_THEME_ID } from './theme-palette.js';
 
 var defaultExactVars = computeVars(defaultDarkFallback);
 
@@ -396,21 +238,6 @@ function loadThemes() {
   });
 }
 
-function validateTheme(t) {
-  if (!t || typeof t !== "object") return false;
-  if (!t.name || typeof t.name !== "string") return false;
-  var keys = ["base00","base01","base02","base03","base04","base05","base06","base07",
-              "base08","base09","base0A","base0B","base0C","base0D","base0E","base0F"];
-  for (var i = 0; i < keys.length; i++) {
-    if (!t[keys[i]] || !/^[0-9a-fA-F]{6}$/.test(t[keys[i]])) return false;
-  }
-  if (t.variant && t.variant !== "dark" && t.variant !== "light") return false;
-  if (!t.variant) {
-    t.variant = luminance("#" + t.base00) > 0.5 ? "light" : "dark";
-  }
-  return true;
-}
-
 // --- Light / Dark mode toggle ---
 
 // Returns the system preferred mode

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

@@ -31,7 +31,13 @@ export function renderToolPaneChrome(panel, name) {
     var actions = original.querySelector('.terminal-header-actions, .shared-browser-window, .file-viewer-window-actions');
     header.append(kind, title, space); if (actions) header.appendChild(actions);
     panel.insertBefore(header, panel.firstChild);
-    if (name === 'browser') { original.hidden = true; var close = header.querySelector('[data-action="hide"]'); if (close) { close.title = 'Close browser pane'; close.setAttribute('aria-label', 'Close browser pane'); } }
+    if (name === 'browser') {
+      header.classList.add('browser-pane-header');
+      var tabs = panel.querySelector('.shared-browser-tabs');
+      if (tabs) header.insertBefore(tabs, space);
+      kind.setAttribute('aria-label', 'Browser'); kind.setAttribute('data-tip', 'Browser');
+      original.hidden = true; var close = header.querySelector('[data-action="hide"]'); if (close) { close.title = 'Close browser pane'; close.setAttribute('aria-label', 'Close browser pane'); }
+    }
     else original.classList.add('tool-pane-tab-row');
     var observer = new MutationObserver(function () { update(); });
     observer.observe(panel, { childList: true, characterData: true, subtree: true, attributes: true, attributeFilter: ['aria-selected'] });

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