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

package/lib/public/modules/background-tasks-ui.js

@@ -1,28 +1,17 @@
-// background-tasks-ui.js - Background task status line above the composer.
-//
-// Collapsed it reads as a quiet status line, not a button demanding attention:
-// a muted activity indicator, a count, and a chevron. Expanding lists each task
-// with its elapsed time and a Stop control.
-//
-// Elapsed time comes from `started_at` (epoch ms) which the server stamps in
-// lib/background-task-timing.js. The ticker only runs while the list is
-// expanded, so a collapsed bar costs nothing.
+import { bindAgentMessageBubble, rememberAgentMessage } from './agent-message-bubbles.js';
+import { backgroundPreviewKey } from './background-task-previews.js';
+// Native background work uses the same compact conversation chips as Workers.
 
+import { openBackgroundTask } from './background-task-viewer.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 
-var expanded = false;
-var elapsedTimer = null;
-
-// Lucide icon per vendor-neutral task type (see normalizeBackgroundTasks in
-// yoke/adapters/claude.js for where these types are assigned).
-var TASK_TYPE_ICONS = { shell: "terminal", agent: "sparkles", other: "circle-dot" };
-
 export function initBackgroundTasksUi() {
   store.subscribe(function (state, prev) {
-    if (state.activeBackgroundTasks !== prev.activeBackgroundTasks) renderBackgroundTasks();
+    if (state.sessionOriginId !== prev.sessionOriginId || state.currentSlug !== prev.currentSlug) { store.set({ activeBackgroundTasks: [], backgroundTaskCatalog: [] }); return; }
+    if (state.backgroundTaskViewer !== prev.backgroundTaskViewer) document.querySelectorAll('[data-background-task]').forEach(function (chip) { var view = state.backgroundTaskViewer; chip.setAttribute('aria-expanded', String(!!view && chip.dataset.backgroundTask === view.taskId)); });
+    if (state.activeBackgroundTasks !== prev.activeBackgroundTasks || state.backgroundTaskCatalog !== prev.backgroundTaskCatalog) renderBackgroundTasks();
   });
   renderBackgroundTasks();
 }
@@ -45,37 +34,6 @@ function pad(value) {
   return value < 10 ? "0" + value : String(value);
 }
 
-function stopElapsedTimer() {
-  if (!elapsedTimer) return;
-  clearInterval(elapsedTimer);
-  elapsedTimer = null;
-}
-
-// Ticks at most once a second and only touches the time cells, so expanding
-// the list never re-renders (and never steals focus from) the rows.
-function startElapsedTimer() {
-  stopElapsedTimer();
-  elapsedTimer = setInterval(updateElapsedCells, 1000);
-}
-
-function updateElapsedCells() {
-  var bar = document.getElementById('background-tasks-bar');
-  if (!bar || !expanded) {
-    stopElapsedTimer();
-    return;
-  }
-  var now = Date.now();
-  var cells = bar.querySelectorAll('.background-task-elapsed');
-  for (var i = 0; i < cells.length; i++) {
-    var startedAt = Number(cells[i].dataset.startedAt);
-    cells[i].textContent = formatElapsed(startedAt, now);
-  }
-}
-
-function activityDotsHtml() {
-  return '<span class="background-tasks-activity" aria-hidden="true"><i></i><i></i><i></i></span>';
-}
-
 // Ambient tasks are the CLI's own housekeeping. The SDK asks hosts to keep
 // them out of activity indicators; Clay still lists them so the user can see
 // what runs on their behalf. Absent means false (Codex has no ambient concept,
@@ -96,83 +54,34 @@ export function splitTasks(tasks) {
   return { user: user, ambient: ambient };
 }
 
-function taskRowHtml(task, now) {
-  var taskType = task.task_type || 'other';
-  var icon = TASK_TYPE_ICONS[taskType] || TASK_TYPE_ICONS.other;
-  var description = task.description || 'Background task';
-  var startedAt = typeof task.started_at === 'number' ? task.started_at : 0;
-  var elapsed = formatElapsed(startedAt, now);
-  return '<div class="background-task-row' + (isAmbientTask(task) ? ' ambient' : '') + '">' +
-    '<span class="background-task-icon" title="' + escapeHtml(taskType) + '">' + iconHtml(icon) + '</span>' +
-    '<span class="background-task-description" title="' + escapeHtml(description) + '">' +
-      escapeHtml(description) + '</span>' +
-    '<span class="background-task-meta">' +
-      '<span class="background-task-type">' + escapeHtml(taskType) + '</span>' +
-      '<span class="background-task-elapsed" data-started-at="' + startedAt + '">' + escapeHtml(elapsed) + '</span>' +
-    '</span>' +
-    '<button type="button" class="background-task-stop" data-task-id="' + escapeHtml(task.task_id || '') + '" ' +
-      'aria-label="Stop ' + escapeHtml(description) + '">Stop</button>' +
-    '</div>';
-}
-
 function renderBackgroundTasks() {
-  var tasks = store.get('activeBackgroundTasks') || [];
-  var split = splitTasks(tasks);
-  var existing = document.getElementById('background-tasks-bar');
-  // Ambient-only means nothing the user asked for is running, so the composer
-  // stays quiet: no bar, no dots, no count.
-  if (split.user.length === 0) {
-    if (existing) existing.remove();
-    expanded = false;
-    stopElapsedTimer();
-    return;
-  }
-  var inputArea = document.getElementById('input-area');
-  if (!inputArea || !inputArea.parentNode) return;
-
-  var bar = existing || document.createElement('div');
-  bar.id = 'background-tasks-bar';
-  bar.className = 'background-tasks-bar' + (expanded ? ' expanded' : '');
-
-  var taskLabel = split.user.length === 1 ? 'background task' : 'background tasks';
-  var summary = split.user.length + ' ' + taskLabel;
-  var html = '<button type="button" class="background-tasks-toggle" aria-expanded="' + expanded + '"' +
-    ' aria-controls="background-tasks-list" aria-label="' + summary + ', ' +
-    (expanded ? 'collapse' : 'expand') + ' details">' +
-    activityDotsHtml() +
-    '<span class="background-tasks-summary">' + summary + '</span>' +
-    '<span class="background-tasks-chevron" aria-hidden="true">' + iconHtml('chevron-right') + '</span>' +
-    '</button>';
-
-  if (expanded) {
-    var now = Date.now();
-    html += '<div class="background-tasks-list" id="background-tasks-list">';
-    for (var i = 0; i < split.user.length; i++) html += taskRowHtml(split.user[i], now);
-    // Housekeeping is shown, not hidden: the user can see what Clay runs on
-    // its own and stop a runaway one. Kept visually subordinate to real work.
-    if (split.ambient.length > 0) {
-      html += '<div class="background-tasks-section-label">Housekeeping</div>';
-      for (var a = 0; a < split.ambient.length; a++) html += taskRowHtml(split.ambient[a], now);
+  var existing = document.getElementById('background-tasks-bar'); if (existing) existing.remove();
+  var split = splitTasks(store.get('backgroundTaskCatalog') || store.get('activeBackgroundTasks') || []);
+  var tasks = split.user.length ? split.user.concat(split.ambient) : [];
+  var root = document.getElementById('background-task-tabs');
+  if (!tasks.length) { if (root) root.remove(); return; }
+  var messages = document.getElementById('messages'); if (!messages) return;
+  if (!root) { root = document.createElement('div'); root.id = 'background-task-tabs'; root.className = 'split-view-workers background-task-tabs'; root.setAttribute('aria-label', 'Background tasks'); messages.parentNode.insertBefore(root, messages); }
+  var signature = JSON.stringify(tasks.map(function (task) { return [task.task_id, task.run_id, task.active, task.description]; }));
+  if (root.dataset.signature === signature) return;
+  root.dataset.signature = signature; root.textContent = '';
+  tasks.forEach(function (task) {
+    var pill = document.createElement('span'); pill.className = 'split-view-worker-pill' + (task.ambient ? ' background-task-ambient' : '');
+    var button = document.createElement('button'); button.type = 'button'; button.className = 'split-view-worker-chip'; button.dataset.backgroundTask = task.task_id;
+    bindAgentMessageBubble(button, backgroundPreviewKey(task));
+    if (task.preview) rememberAgentMessage(backgroundPreviewKey(task), task.preview, false);
+    button.title = (task.ambient ? 'Housekeeping · ' : '') + (task.description || 'Background task') + (task.started_at ? ' · ' + formatElapsed(task.started_at) : '') + (task.active === false ? ' · Finished' : ' · Running'); button.setAttribute('aria-haspopup', 'dialog');
+    var view = store.get('backgroundTaskViewer'); button.setAttribute('aria-expanded', String(!!view && view.taskId === task.task_id));
+    var dot = document.createElement('span'); dot.className = 'split-view-worker-dot'; dot.dataset.state = task.active === false ? 'ready' : 'working';
+    var label = document.createElement('span'); label.className = 'split-view-worker-name'; label.textContent = task.description || 'Background task';
+    dot.setAttribute('aria-label', task.active === false ? 'Finished' : 'Running');
+    button.append(dot, label); button.addEventListener('click', function () { openBackgroundTask(task); }); pill.appendChild(button);
+    if (task.active !== false) {
+      var stop = document.createElement('button'); stop.type = 'button'; stop.className = 'split-view-worker-remove'; stop.setAttribute('aria-label', 'Stop ' + (task.description || 'background task')); stop.title = 'Stop task'; stop.innerHTML = iconHtml('square');
+      stop.addEventListener('click', function () { var ws = getWs(); if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'background_task_stop', requestId: crypto.randomUUID(), taskId: task.task_id, runId: task.run_id || null, sessionOriginId: store.get('sessionOriginId') })); });
+      pill.appendChild(stop);
     }
-    html += '</div>';
-  }
-  bar.innerHTML = html;
-  if (!existing) inputArea.parentNode.insertBefore(bar, inputArea);
-  refreshIcons();
-
-  bar.querySelector('.background-tasks-toggle').addEventListener('click', function () {
-    expanded = !expanded;
-    renderBackgroundTasks();
+    root.appendChild(pill);
   });
-
-  var stopButtons = bar.querySelectorAll('.background-task-stop');
-  for (var j = 0; j < stopButtons.length; j++) {
-    stopButtons[j].addEventListener('click', function () {
-      var ws = getWs();
-      if (ws && ws.readyState === 1) ws.send(JSON.stringify({ type: 'stop_task', taskId: this.dataset.taskId }));
-    });
-  }
-
-  if (expanded) startElapsedTimer();
-  else stopElapsedTimer();
+  refreshIcons();
 }

package/lib/public/modules/chat-bubble-renderer.js

@@ -39,7 +39,7 @@ function appendIdentity(row, options, avatarClass) {
 
 export function createAssistantBubble(options) {
   options = options || {};
-  var row = document.createElement("div");
+  var row = document.createElement(options.tagName || "div");
   row.className = "msg-assistant";
   if (options.turn !== undefined && options.turn !== null) row.dataset.turn = options.turn;
   var contentWrap = appendIdentity(row, options, "dm-bubble-avatar-mate");
@@ -52,7 +52,7 @@ export function createAssistantBubble(options) {
 
 export function createUserBubble(options) {
   options = options || {};
-  var row = document.createElement("div");
+  var row = document.createElement(options.tagName || "div");
   row.className = "msg-user";
   if (options.turn !== undefined && options.turn !== null) row.dataset.turn = options.turn;
   var contentWrap = appendIdentity(row, options, "dm-bubble-avatar-me");
@@ -70,11 +70,17 @@ function assistantContent(row) {
   return row ? row.querySelector(".md-content") : null;
 }
 
-export function renderAssistantBubbleText(row, text, highlight) {
+export function renderAssistantBubbleText(row, text, highlight, options) {
   var content = assistantContent(row);
   if (!content) return null;
-  content.innerHTML = renderMarkdown(text || "");
-  enhanceClaySessionLinks(content);
+  var html = renderMarkdown(text || "");
+  if (options && options.readOnly) html = DOMPurify.sanitize(html, {
+    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', 'class'], ALLOW_DATA_ATTR: false
+  });
+  content.innerHTML = html;
+  if (options && options.readOnly) content.querySelectorAll('[class]').forEach(function (element) { if (element.tagName !== 'CODE' && element.tagName !== 'PRE') element.removeAttribute('class'); });
+  if (!options || !options.readOnly) enhanceClaySessionLinks(content);
   if (highlight) highlightCodeBlocks(content);
   return content;
 }

package/lib/public/modules/contextual-clay-geometry.js

@@ -8,8 +8,12 @@ function state() { return store.get('contextualClayGeometry') || {}; }
 function surface() { return document.getElementById('contextual-clay'); }
 function narrow() { return window.matchMedia('(max-width: 768px)').matches; }
 function rectValue(rect) { return { left: rect.left, top: rect.top, width: rect.width, height: rect.height }; }
+function maximumWidth() {
+  var style = getComputedStyle(surface());
+  return (parseFloat(style.getPropertyValue('--mate-content-width')) || 860) + (parseFloat(style.getPropertyValue('--contextual-chat-gutter')) || 80);
+}
 function bounded(value) {
-  return { left: Math.round(Math.max(0, Math.min(16384, value.left))), top: Math.round(Math.max(0, Math.min(16384, value.top))), width: Math.round(Math.max(340, Math.min(2560, value.width))), height: Math.round(Math.max(360, Math.min(2160, value.height))) };
+  return { left: Math.round(Math.max(0, Math.min(16384, value.left))), top: Math.round(Math.max(0, Math.min(16384, value.top))), width: Math.round(Math.max(340, Math.min(maximumWidth(), value.width))), height: Math.round(Math.max(360, Math.min(2160, value.height))) };
 }
 function setState(patch) { store.set({ contextualClayGeometry: Object.assign({}, state(), patch) }); }
 function defaultGeometry() {
@@ -22,7 +26,7 @@ export function positionContextualClay() {
   var hint = renderContextualMateHint();
   if (!element || narrow() || (store.get('contextualClay') || {}).mode === 'opening') return;
   var desired = state().preview || state().desired || defaultGeometry();
-  var width = Math.min(desired.width, window.innerWidth - 16);
+  var width = Math.min(desired.width, maximumWidth(), window.innerWidth - 16);
   var height = Math.min(desired.height, window.innerHeight - 16);
   var left = Math.max(8, Math.min(desired.left, window.innerWidth - width - 8));
   var top = Math.max(8, Math.min(desired.top, window.innerHeight - height - 8));
@@ -78,7 +82,7 @@ function move(event) {
   if (!state().preview && Math.hypot(dx, dy) < 3) return;
   var value = Object.assign({}, drag.start);
   if (drag.edge) {
-    if (drag.edge.indexOf('e') >= 0) value.width = Math.max(340, Math.min(2560, window.innerWidth - value.left - 8, value.width + dx));
+    if (drag.edge.indexOf('e') >= 0) value.width = Math.max(340, Math.min(maximumWidth(), window.innerWidth - value.left - 8, value.width + dx));
     if (drag.edge.indexOf('s') >= 0) value.height = Math.max(360, Math.min(2160, window.innerHeight - value.top - 8, value.height + dy));
   } else {
     value.left = Math.max(8, Math.min(window.innerWidth - value.width - 8, value.left + dx));

package/lib/public/modules/pane-activation.js

@@ -174,7 +174,7 @@ export function paneOutgoing(data) {
   if (message.paneBinding && !samePaneBinding(binding, message.paneBinding)) return null;
   var gesture = (store.get('paneActionEvents') || []).find(function (entry) { return entry.event.isTrusted && entry.event.eventPhase && samePaneBinding(entry.binding, binding); });
   var action = store.get('paneCallbackBinding') || gesture && gesture.binding;
-  var read = /^(get_|list_)|(_get|_list|_options)$/.test(message.type) || message.type === 'load_more_history';
+  var read = /^(get_|list_)|(_get|_list|_options)$/.test(message.type) || message.type === 'load_more_history' || message.type === 'background_task_read';
   if (!message.paneBinding && !read && !samePaneBinding(action, binding)) return null;
   return JSON.stringify(Object.assign({}, message, { paneBinding: message.paneBinding || action || binding }));
 }
@@ -221,7 +221,7 @@ export function initPaneActivation() {
       event.preventDefault(); event.stopImmediatePropagation();
     }
   }, true);
-  ['click', 'input', 'change', 'keydown', 'keyup', 'submit', 'blur'].forEach(function (name) {
+  ['click', 'input', 'change', 'keydown', 'keyup', 'submit', 'blur', 'pointerup'].forEach(function (name) {
     document.addEventListener(name, function (event) {
       var keys = store.get('paneHeldKeys') || {};
       var binding = store.get('paneCommittedBinding');
@@ -229,7 +229,9 @@ export function initPaneActivation() {
       var staleKey = (name === 'keyup' || name === 'keydown' && event.repeat) && previousKey && !samePaneBinding(previousKey, binding);
       if (name === 'keydown' && !event.repeat) keys[event.code || event.key] = binding;
       if (name === 'keyup') delete keys[event.code || event.key];
-      if (staleKey || store.get('panePendingBinding') || store.get('paneSuspended') || !store.get('paneReady')) {
+      // A release from an earlier conversation must not authorize a drag mutation.
+      var stalePointer = name === 'pointerup' && !samePaneBinding(store.get('panePointerBinding'), binding);
+      if (staleKey || stalePointer || store.get('panePendingBinding') || store.get('paneSuspended') || !store.get('paneReady')) {
         event.preventDefault(); event.stopImmediatePropagation(); return;
       }
       var events = (store.get('paneActionEvents') || []).filter(function (entry) { return entry.event.eventPhase; });

package/lib/public/modules/pane-header-tooltips.js

@@ -0,0 +1,32 @@
+// Pane chrome uses the existing JS tooltip service, including lazy workbenches.
+import { registerTooltip, pruneTooltip } from './tooltip.js';
+
+var HEADERS = '.split-pane-header, .tool-pane-header, .file-viewer-tabbar, .terminal-header, .shared-browser-header, .split-view-workers, #top-bar .top-bar-actions';
+function sync(header) {
+  header.querySelectorAll('[title], button, [role="button"], a[aria-label]').forEach(function (element) {
+    var label = element.getAttribute('title') || element.getAttribute('aria-label') || element.getAttribute('data-tip');
+    if (!label || !label.trim()) return;
+    if (element.matches('button, [role="button"], a') && (!element.hasAttribute('aria-label') || element.dataset.tooltipGeneratedLabel === 'true' && element.hasAttribute('title'))) {
+      element.dataset.tooltipGeneratedLabel = 'true';
+      if (element.getAttribute('aria-label') !== label) element.setAttribute('aria-label', label);
+    }
+    if (element.getAttribute('data-tip') !== label || element.hasAttribute('title')) registerTooltip(element, label);
+  });
+}
+export function initPaneHeaderTooltips() {
+  document.querySelectorAll(HEADERS).forEach(sync);
+  var observer = new MutationObserver(function (records) {
+    pruneTooltip();
+    var headers = new Set();
+    records.forEach(function (record) {
+      var parent = record.target.nodeType === 1 && record.target.closest(HEADERS); if (parent) headers.add(parent);
+      (record.addedNodes || []).forEach(function (node) {
+        if (node.nodeType !== 1) return;
+        if (node.matches(HEADERS)) headers.add(node);
+        node.querySelectorAll(HEADERS).forEach(function (header) { headers.add(header); });
+      });
+    });
+    headers.forEach(function (header) { if (header.isConnected) sync(header); });
+  });
+  observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['title', 'aria-label'] });
+}

package/lib/public/modules/pending-message-queue-drag.js

@@ -0,0 +1,69 @@
+import { store } from './store.js';
+import { queueContext, sameQueueContext } from './pending-message-queue-recovery.js';
+
+function validDrag(drag) {
+  var queue = store.get('pendingMessageQueue') || {};
+  return drag && queueContext(store.snap()).enabled && sameQueueContext(drag.context, queueContext(store.snap())) && queue.revision === drag.revision;
+}
+
+export function paintPendingQueueDrag(element) {
+  var drag = store.get('pendingMessageQueueDrag');
+  element.classList.toggle('is-reordering', !!drag && drag.moved);
+  element.querySelectorAll('[data-pending-id]').forEach(function (row) {
+    row.classList.toggle('is-dragging', !!drag && drag.moved && row.dataset.pendingId === drag.id);
+    row.classList.toggle('is-drop-target', !!drag && drag.moved && row.dataset.pendingId === drag.targetId);
+    row.classList.toggle('is-drop-after', !!drag && drag.after && row.dataset.pendingId === drag.targetId);
+  });
+}
+
+export function bindPendingQueueDrag(element, reorder) {
+  function cleanupDrag(event) {
+    var drag = store.get('pendingMessageQueueDrag');
+    if (!drag || (event && drag.pointerId !== event.pointerId)) return null;
+    store.set({ pendingMessageQueueDrag: null });
+    if (element.hasPointerCapture(drag.pointerId)) element.releasePointerCapture(drag.pointerId);
+    paintPendingQueueDrag(element);
+    return drag;
+  }
+  element.addEventListener('pointerdown', function (event) {
+    var row = event.target.closest('[data-pending-id]');
+    var handle = row && row.querySelector('[data-action="drag"]');
+    if (event.target.closest('textarea, input, a, [contenteditable="true"]') || (event.target.closest('button') && !event.target.closest('[data-action="drag"]'))) return;
+    if (!handle || handle.disabled || !event.isPrimary || event.button !== 0) return;
+    if (store.get('pendingMessageQueueEdit') && store.get('pendingMessageQueueEdit').id === row.dataset.pendingId) return;
+    event.preventDefault();
+    handle.focus({ preventScroll: true });
+    // Rows can be replaced by a live queue refresh during this gesture.
+    element.setPointerCapture(event.pointerId);
+    store.set({ pendingMessageQueueDrag: { id: row.dataset.pendingId, pointerId: event.pointerId, targetId: null, context: queueContext(store.snap()), revision: (store.get('pendingMessageQueue') || {}).revision, startX: event.clientX, startY: event.clientY, moved: false } });
+  });
+  element.addEventListener('pointermove', function (event) {
+    var drag = store.get('pendingMessageQueueDrag');
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    if (!validDrag(drag)) { cleanupDrag(event); return; }
+    var moved = drag.moved || Math.abs(event.clientX - drag.startX) + Math.abs(event.clientY - drag.startY) > 4;
+    var hit = document.elementFromPoint(event.clientX, event.clientY);
+    var row = hit && hit.closest('[data-pending-id]');
+    var targetId = row && element.contains(row) && row.querySelector('button[data-action="drag"]:not(:disabled)') && row.dataset.pendingId !== drag.id ? row.dataset.pendingId : null;
+    var rows = Array.from(element.querySelectorAll('[data-pending-id]'));
+    var source = rows.findIndex(function (candidate) { return candidate.dataset.pendingId === drag.id; });
+    store.set({ pendingMessageQueueDrag: Object.assign({}, drag, { moved: moved, targetId: targetId, after: targetId && rows.indexOf(row) > source }) });
+    paintPendingQueueDrag(element);
+  });
+  element.addEventListener('pointerup', function (event) {
+    var drag = cleanupDrag(event);
+    if (validDrag(drag) && drag.moved && drag.targetId) reorder(drag.id, 0, drag.targetId);
+  });
+  element.addEventListener('pointercancel', cleanupDrag);
+  element.addEventListener('lostpointercapture', cleanupDrag);
+  element.addEventListener('keydown', function (event) { if (event.key === 'Escape') cleanupDrag(); });
+  window.addEventListener('blur', function () { cleanupDrag(); });
+  store.subscribe(function (state, previous) {
+    var drag = state.pendingMessageQueueDrag;
+    if (drag && !validDrag(drag)) cleanupDrag();
+    else if (!drag && previous.pendingMessageQueueDrag) {
+      if (element.hasPointerCapture(previous.pendingMessageQueueDrag.pointerId)) element.releasePointerCapture(previous.pendingMessageQueueDrag.pointerId);
+      paintPendingQueueDrag(element);
+    }
+  });
+}

package/lib/public/modules/pending-message-queue.js

@@ -5,6 +5,7 @@ import { refreshIcons } from './icons.js';
 import { activeQueueItems, hasFutureScheduledPending, moveQueueId, matchesQueueContext, canApplyQueueRevision } from './pending-message-queue-model.js';
 import { emptyQueue, queueContext, sameQueueContext, queueScopeChanged, queueReconnected, queueCanRender, createQueueHydrationRecovery, canonicalQueue } from './pending-message-queue-recovery.js';
 import { imageSrc, imageDraft, openImagePreview, chooseImages } from './pending-message-image-editor.js';
+import { bindPendingQueueDrag, paintPendingQueueDrag } from './pending-message-queue-drag.js';
 import { setScheduleBtnDisabled } from './scheduled-message-state.js';
 
 export { hasFutureScheduledPending };
@@ -391,6 +392,7 @@ function render() {
   html += '</div>';
   queueEl.innerHTML = html;
   refreshIcons();
+  paintPendingQueueDrag(queueEl);
   restoreFocus(focus);
 }
 
@@ -426,39 +428,7 @@ function bindEvents() {
     var row = handle.closest("[data-pending-id]");
     reorder(row.dataset.pendingId, event.key === "ArrowUp" ? -1 : 1, null);
   });
-  queueEl.addEventListener("pointerdown", function (event) {
-    var handle = event.target.closest('[data-action="drag"]');
-    if (!handle) return;
-    var row = handle.closest("[data-pending-id]");
-    handle.setPointerCapture(event.pointerId);
-    store.set({ pendingMessageQueueDrag: { id: row.dataset.pendingId, pointerId: event.pointerId, targetId: null } });
-    row.classList.add("is-dragging");
-  });
-  queueEl.addEventListener("pointermove", function (event) {
-    var drag = store.get('pendingMessageQueueDrag');
-    if (!drag || drag.pointerId !== event.pointerId) return;
-    var target = document.elementFromPoint(event.clientX, event.clientY);
-    var row = target && target.closest("[data-pending-id]");
-    var targetId = row && row.dataset.pendingId !== drag.id ? row.dataset.pendingId : null;
-    queueEl.querySelectorAll(".is-drop-target").forEach(function (node) { node.classList.remove("is-drop-target"); });
-    if (targetId && ownedPendingIds().indexOf(targetId) >= 0) row.classList.add("is-drop-target");
-    store.set({ pendingMessageQueueDrag: Object.assign({}, drag, { targetId: targetId }) });
-  });
-  function cleanupDrag(event) {
-    var drag = store.get('pendingMessageQueueDrag');
-    if (!drag || drag.pointerId !== event.pointerId) return null;
-    store.set({ pendingMessageQueueDrag: null });
-    queueEl.querySelectorAll(".is-dragging, .is-drop-target").forEach(function (node) { node.classList.remove("is-dragging", "is-drop-target"); });
-    return drag;
-  }
-  function finishDrag(event) {
-    var drag = cleanupDrag(event);
-    if (!drag) return;
-    if (drag.targetId && ownedPendingIds().indexOf(drag.targetId) >= 0) reorder(drag.id, 0, drag.targetId);
-  }
-  queueEl.addEventListener("pointerup", finishDrag);
-  queueEl.addEventListener("pointercancel", cleanupDrag);
-  queueEl.addEventListener("lostpointercapture", cleanupDrag);
+  bindPendingQueueDrag(queueEl, reorder);
 }
 
 export function initPendingMessageQueue() {

package/lib/public/modules/permission-control.js

@@ -46,9 +46,9 @@ export function createPermissionControl(className, ariaLabel) {
   control.setAttribute("role", "group");
   control.setAttribute("aria-label", ariaLabel || "Session permission mode");
   control.innerHTML = '<div class="session-permission-segmented">' +
-    '<button type="button" data-permission-mode="default" aria-label="Ask permissions" title="Ask permissions"><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
-    '<button type="button" data-permission-mode="auto" aria-label="Auto permissions" title="Auto permissions"><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
-    '<button type="button" data-permission-mode="bypassPermissions" aria-label="YOLO permissions" title="YOLO permissions"><span class="permission-label">YOLO</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
+    '<button type="button" data-permission-mode="default" aria-label="Ask permissions" data-tip="Ask before tool actions that need permission. Previously allowed actions can run without asking again."><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
+    '<button type="button" data-permission-mode="auto" aria-label="Auto permissions" data-tip="Let the runtime assess tool actions and approve them automatically when allowed. Some actions may still need your permission."><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
+    '<button type="button" data-permission-mode="bypassPermissions" aria-label="YOLO permissions" data-tip="Run tools, file changes and commands without asking for permission. Clay access restrictions still apply."><span class="permission-label">YOLO</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
     '</div><span class="session-permission-status" aria-live="polite"></span>';
   control.querySelector(".session-permission-status").setAttribute("aria-atomic", "true");
   return control;
@@ -102,7 +102,7 @@ export function renderPermissionControl(control, state) {
   control.classList.toggle("permission-globally-forced", globallyForced);
   control.classList.toggle("permission-runtime-fallback", state.permissionMode === "auto" && !!state.effectivePermissionMode && state.effectivePermissionMode !== "auto");
   control.setAttribute("aria-busy", pending ? "true" : "false");
-  var buttonTitles = { default: "Ask permissions", auto: "Auto permissions", bypassPermissions: "YOLO permissions" };
+  var buttonDescriptions = {"default": "Ask before tool actions that need permission. Previously allowed actions can run without asking again.", "auto": "Let the runtime assess tool actions and approve them automatically when allowed. Some actions may still need your permission.", "bypassPermissions": "Run tools, file changes and commands without asking for permission. Clay access restrictions still apply."};
   var buttons = control.querySelectorAll("[data-permission-mode]");
   for (var i = 0; i < buttons.length; i++) {
     var mode = buttons[i].dataset.permissionMode;
@@ -115,7 +115,8 @@ export function renderPermissionControl(control, state) {
     buttons[i].classList.toggle("pending", requested);
     buttons[i].setAttribute("aria-pressed", selected ? "true" : "false");
     buttons[i].setAttribute("aria-busy", requested ? "true" : "false");
-    buttons[i].title = unsupported ? "Auto permissions are unavailable for this session." : buttonTitles[mode];
+    buttons[i].setAttribute("data-tip", (unsupported ? "Auto is unavailable for this session. " : "") + buttonDescriptions[mode]);
+    buttons[i].removeAttribute("title");
   }
   var status = control.querySelector(".session-permission-status");
   if (status) {