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

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) {

package/lib/public/modules/plantuml-preview.js

@@ -6,17 +6,17 @@ export function isPlantUmlFile(path) {
   return /\.(puml|plantuml|pu|uml|salt)$/i.test(String(path || ""));
 }
 
-export function cancelPlantUmlPreview() {
-  var job = store.get('plantUmlPreviewJob');
+export function cancelPlantUmlPreview(instanceId) {
+  var job = store.get(instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob');
   if (!job) return;
   clearTimeout(job.timer);
   job.observer.disconnect();
   job.controller.abort();
-  store.set({ plantUmlPreviewJob: null });
+  var cleared = {}; cleared[instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob'] = null; store.set(cleared);
 }
 
-export function renderPlantUmlPreview(body, source, path) {
-  cancelPlantUmlPreview();
+export function renderPlantUmlPreview(body, source, path, instanceId) {
+  cancelPlantUmlPreview(instanceId);
   body.innerHTML = "";
   var preview = document.createElement("div");
   preview.className = "file-viewer-plantuml-preview";
@@ -36,22 +36,22 @@ export function renderPlantUmlPreview(body, source, path) {
 
   var job = { controller: new AbortController(), observer: null, timer: null };
   job.observer = new MutationObserver(function () {
-    if (!preview.isConnected && store.get('plantUmlPreviewJob') === job) cancelPlantUmlPreview();
+    if (!preview.isConnected && store.get(instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob') === job) cancelPlantUmlPreview(instanceId);
   });
   job.observer.observe(body, { childList: true });
   job.timer = setTimeout(function () {
-    if (store.get('plantUmlPreviewJob') !== job) return;
+    if (store.get(instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob') !== job) return;
     showError("The diagram preview timed out.");
-    cancelPlantUmlPreview();
+    cancelPlantUmlPreview(instanceId);
   }, 20000);
-  store.set({ plantUmlPreviewJob: job });
+  var patch = {}; patch[instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob'] = job; store.set(patch);
   fetch("api/file/plantuml?path=" + encodeURIComponent(path), { signal: job.controller.signal, cache: "no-store" }).then(function (response) {
     return response.text().then(function (text) {
       if (!response.ok) throw new Error(text || "Unable to render this diagram.");
       return text;
     });
   }).then(function (svg) {
-    if (store.get('plantUmlPreviewJob') !== job || !preview.isConnected) return;
+    if (store.get(instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob') !== job || !preview.isConnected) return;
     if (svg.length > 8 * 1024 * 1024 || !/<svg[\s>]/i.test(svg)) throw new Error("The renderer returned an invalid diagram.");
     var image = document.createElement("img");
     image.alt = "Diagram preview of " + path;
@@ -69,8 +69,8 @@ export function renderPlantUmlPreview(body, source, path) {
     mountWireframeViewport(viewport, image, toolbar);
 
   }).catch(function (error) {
-    if (store.get('plantUmlPreviewJob') === job && error.name !== "AbortError") showError(error.message);
+    if (store.get(instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob') === job && error.name !== "AbortError") showError(error.message);
   }).finally(function () {
-    if (store.get('plantUmlPreviewJob') === job) cancelPlantUmlPreview();
+    if (store.get(instanceId ? 'plantUmlPreviewJob:' + instanceId : 'plantUmlPreviewJob') === job) cancelPlantUmlPreview(instanceId);
   });
 }

package/lib/public/modules/project-admin-overview.js

@@ -1,21 +1,136 @@
-// This page never opens a project socket or loads project content modules.
+// Restricted projects use public shell primitives without opening a project socket.
+import { createStore, store } from './store.js';
+import { groupProjects, getProjectAbbrev } from './project-grouping.js';
+import { computeVars, validateTheme, defaultDarkFallback, defaultLightFallback } from './theme-palette.js';
+import { initTooltips } from './tooltip.js';
+
+var data = JSON.parse(document.getElementById('project-admin-data').textContent);
+createStore({ adminOverview: data, adminUsage: null, adminUsageLoading: false, adminUsageTimer: null, adminUsageGeneration: 0, adminRailCollapsed: {}, adminThemes: null });
+
+function applyAppearance() {
+  var seed = window.__clayAppearanceSeed;
+  var mode = seed && seed.configured && seed.mode || (matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+  var id = seed && (seed[mode + 'Theme'] || seed.theme);
+  var themes = store.get('adminThemes') || {};
+  var theme = themes[id] && themes[id].variant === mode ? themes[id] : (mode === 'light' ? defaultLightFallback : defaultDarkFallback);
+  if (!validateTheme(theme)) return;
+  var vars = computeVars(theme);
+  Object.keys(vars).forEach(function (name) { document.documentElement.style.setProperty(name, vars[name]); });
+  document.documentElement.classList.toggle('light-theme', theme.variant === 'light');
+  document.documentElement.classList.toggle('dark-theme', theme.variant !== 'light');
+}
+applyAppearance();
+fetch('/api/themes', { credentials: 'same-origin' }).then(function (response) { if (!response.ok) throw new Error('Themes unavailable'); return response.json(); }).then(function (themes) {
+  var valid = {};
+  Object.entries(Object.assign({}, themes.bundled, themes.custom)).forEach(function (entry) { if (validateTheme(entry[1])) valid[entry[0]] = entry[1]; });
+  store.set({ adminThemes: valid }); applyAppearance();
+}).catch(function () {});
+matchMedia('(prefers-color-scheme: light)').addEventListener('change', applyAppearance);
+
+function projectLink(project, worktree) {
+  var link = document.createElement('a');
+  link.className = (worktree ? 'icon-strip-wt-item' : 'icon-strip-item') + (project.slug === data.project.slug ? ' active' : '');
+  link.href = '/p/' + encodeURIComponent(project.slug) + '/';
+  link.dataset.slug = project.slug;
+  link.dataset.tip = project.title + (project.contentAccess === false ? ' · Administrative overview' : '');
+  link.setAttribute('aria-label', link.dataset.tip);
+  if (project.slug === data.project.slug) link.setAttribute('aria-current', 'page');
+  var label = document.createElement('span');
+  label.className = worktree ? 'wt-branch-abbrev' : 'icon-strip-name';
+  if (project.icon) label.classList.add('project-emoji');
+  label.textContent = project.icon || getProjectAbbrev(project.title);
+  link.appendChild(label);
+  return link;
+}
+function renderNavigation() {
+  var container = document.getElementById('icon-strip-projects');
+  var grouped = groupProjects(data.projects);
+  grouped.parents.forEach(function (project) {
+    var children = grouped.wtByParent[project.slug] || [];
+    var link = projectLink(project, false);
+    if (!children.length) { container.appendChild(link); return; }
+    var group = document.createElement('div');
+    group.className = 'icon-strip-group'; group.dataset.parentSlug = project.slug;
+    var header = document.createElement('div'); header.className = 'project-admin-rail-header';
+    header.appendChild(link); link.classList.add('folder-header');
+    var toggle = document.createElement('button');
+    toggle.type = 'button'; toggle.className = 'icon-strip-group-chevron'; toggle.dataset.tip = 'Toggle worktrees';
+    toggle.setAttribute('aria-label', 'Toggle ' + project.title + ' worktrees'); toggle.setAttribute('aria-expanded', 'true');
+    var list = document.createElement('div'); list.className = 'icon-strip-group-items'; list.id = 'worktrees-' + project.slug;
+    toggle.setAttribute('aria-controls', list.id);
+    toggle.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M6 3v12a6 6 0 0 0 12 0V6M6 7h0"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="6" r="3"/></svg>';
+    toggle.addEventListener('click', function () {
+      var collapsed = group.classList.toggle('collapsed'); list.inert = collapsed;
+      toggle.setAttribute('aria-expanded', String(!collapsed));
+      var state = Object.assign({}, store.get('adminRailCollapsed')); state[project.slug] = collapsed; store.set({ adminRailCollapsed: state });
+    });
+    children.forEach(function (child) { list.appendChild(projectLink(child, true)); });
+    header.appendChild(toggle); group.append(header, list); container.appendChild(group);
+  });
+  var parent = data.projects.find(function (project) { return project.slug === data.project.parentSlug; });
+  var label = document.getElementById('project-admin-parent');
+  if (parent) { label.hidden = false; label.textContent = 'Worktree of ' + parent.title; }
+}
+renderNavigation();
+initTooltips();
+
 var tabs = Array.from(document.querySelectorAll('[role="tab"]'));
 function select(tab) {
   tabs.forEach(function (item) {
     var active = item === tab;
-    item.setAttribute("aria-selected", String(active));
-    item.tabIndex = active ? 0 : -1;
-    document.getElementById(item.getAttribute("aria-controls")).hidden = !active;
+    item.setAttribute('aria-selected', String(active)); item.tabIndex = active ? 0 : -1;
+    document.getElementById(item.getAttribute('aria-controls')).hidden = !active;
   });
 }
 tabs.forEach(function (tab, index) {
-  tab.addEventListener("click", function () { select(tab); });
-  tab.addEventListener("keydown", function (event) {
-    if (["ArrowLeft", "ArrowRight", "Home", "End"].indexOf(event.key) === -1) return;
+  tab.addEventListener('click', function () { select(tab); });
+  tab.addEventListener('keydown', function (event) {
+    if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].indexOf(event.key) === -1) return;
     event.preventDefault();
-    var target = event.key === "Home" ? tabs[0] : event.key === "End" ? tabs[tabs.length - 1] : tabs[(index + (event.key === "ArrowRight" ? 1 : tabs.length - 1)) % tabs.length];
-    select(target);
-    target.focus();
+    var target = event.key === 'Home' ? tabs[0] : event.key === 'End' ? tabs[tabs.length - 1] : tabs[(index + (event.key === 'ArrowRight' ? 1 : tabs.length - 1)) % tabs.length];
+    select(target); target.focus();
   });
 });
 select(tabs[0]);
+
+function size(bytes) {
+  if (!Number.isFinite(bytes) || bytes < 0) return 'Unavailable';
+  var units = ['B', 'KiB', 'MiB', 'GiB', 'TiB'], index = 0;
+  while (bytes >= 1024 && index < units.length - 1) { bytes /= 1024; index++; }
+  return bytes.toFixed(index ? 1 : 0) + ' ' + units[index];
+}
+function clearUsage() {
+  ['bytes', 'files', 'free', 'capacity'].forEach(function (field) { document.getElementById('usage-' + field).textContent = '—'; });
+  store.set({ adminUsage: null });
+}
+async function loadUsage(refresh) {
+  if (store.get('adminUsageLoading')) return;
+  clearTimeout(store.get('adminUsageTimer'));
+  var generation = store.get('adminUsageGeneration');
+  store.set({ adminUsageLoading: true });
+  var button = document.getElementById('project-admin-refresh'), status = document.getElementById('usage-status');
+  button.disabled = true; document.getElementById('project-admin-usage').setAttribute('aria-busy', 'true');
+  try {
+    var response = await fetch('/api/server/storage/project/' + encodeURIComponent(data.project.slug) + (refresh ? '?refresh=1' : ''), { credentials: 'same-origin' });
+    var result = await response.json();
+    if (generation !== store.get('adminUsageGeneration')) return;
+    if (!response.ok) { if ([401, 403, 404, 409].indexOf(response.status) >= 0) clearUsage(); throw new Error(result.error || 'Storage measurement failed.'); }
+    if (result.slug !== data.project.slug) throw new Error('Storage response belongs to another project.');
+    store.set({ adminUsage: result });
+    var usage = result.usage;
+    if (usage && usage.available) {
+      document.getElementById('usage-bytes').textContent = (result.partial || result.scanning ? 'At least ' : '') + size(usage.bytes);
+      document.getElementById('usage-files').textContent = (result.partial || result.scanning ? 'At least ' : '') + Number(usage.files).toLocaleString();
+      document.getElementById('usage-free').textContent = size(usage.availableBytes);
+      document.getElementById('usage-capacity').textContent = size(usage.capacityBytes);
+    } else clearUsage();
+    status.textContent = result.scanning ? 'Scan in progress. Totals are not final.' : !usage || !usage.available ? 'Storage is unavailable: the directory is missing, unreadable or shared by multiple registrations.' : (result.partial ? 'Partial scan; some paths could not be measured. ' : '') + 'Measured ' + new Date(result.checkedAt).toLocaleString() + '. Cached for up to 5 minutes.';
+    if (result.scanning && !document.hidden) store.set({ adminUsageTimer: setTimeout(function () { loadUsage(false); }, 1500) });
+  } catch (error) { if (generation === store.get('adminUsageGeneration')) status.textContent = error.message + (store.get('adminUsage') ? ' Previous measurement retained.' : ''); }
+  finally { if (generation === store.get('adminUsageGeneration')) { store.set({ adminUsageLoading: false }); button.disabled = false; document.getElementById('project-admin-usage').setAttribute('aria-busy', 'false'); } }
+}
+document.getElementById('project-admin-refresh').addEventListener('click', function () { loadUsage(true); });
+document.addEventListener('visibilitychange', function () { if (document.hidden) clearTimeout(store.get('adminUsageTimer')); else if (store.get('adminUsage') && store.get('adminUsage').scanning) loadUsage(false); });
+window.addEventListener('pagehide', function () { clearTimeout(store.get('adminUsageTimer')); store.set({ adminUsageGeneration: store.get('adminUsageGeneration') + 1 }); });
+window.addEventListener('pageshow', function (event) { if (event.persisted) { clearUsage(); store.set({ adminUsageLoading: false }); loadUsage(false); } });
+loadUsage(false);

package/lib/public/modules/project-grouping.js

@@ -20,3 +20,12 @@ export function groupProjects(projects) {
   }
   return { parents: parents, wtByParent: wtByParent };
 }
+
+export function getProjectAbbrev(name) {
+  if (!name) return "?";
+  var words = name.replace(/[^a-zA-Z0-9\s]/g, "").trim().split(/\s+/);
+  if (words.length >= 2) {
+    return (words[0][0] + words[1][0]).toUpperCase();
+  }
+  return name.substring(0, 2).toUpperCase();
+}

package/lib/public/modules/right-workbench.js

@@ -1,14 +1,15 @@
+import { WORKBENCH_PANELS } from './workbench-panels.js';
+import { activeSavedView, workspaceChanged } from './view-workspace-state.js';
 // Shared arbitration for docked background panes and one foreground overlay.
 
+import { renderToolPaneChrome } from './tool-pane-chrome.js';
 import { store } from './store.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { showToast } from './utils.js';
 
 var closers = {};
-var panelIds = { terminal: 'terminal-container', browser: 'shared-browser-panel', 'file-viewer': 'file-viewer',
-  'project-logs': 'project-logs-panel', you: 'you-panel', issues: 'issues-panel', linear: 'linear-panel',
-  'notes-browser': 'notes-browser', 'scheduled-tasks': 'scheduled-tasks-panel', debates: 'debates-workbench',
-  'mcp-skills': 'mcp-skills-workbench', 'mate-knowledge': 'mate-knowledge-workbench', wireframe: 'wireframe-panel' };
+var panelIds = { terminal: 'terminal-container', browser: 'shared-browser-panel', 'file-viewer': 'file-viewer' };
+Object.keys(WORKBENCH_PANELS).forEach(function (name) { panelIds[name] = WORKBENCH_PANELS[name].id; });
 
 // Pane startup does not need account settings for a closed workbench.
 function ensureLayoutPreference() {
@@ -34,6 +35,7 @@ export function rightWorkbenchRevisionFor(name) {
 function publish(owner, docked, revisions) {
   store.set({ rightWorkbenchOwner: owner, rightWorkbenchDockedOwners: docked,
     rightWorkbenchPanelRevisions: revisions, rightWorkbenchRevision: (store.get('rightWorkbenchRevision') || 0) + 1 });
+  workspaceChanged();
 }
 function setDocked(name, docked) {
   if (!openOwner(name)) return;
@@ -53,16 +55,18 @@ function renderLayoutControls() {
     var panel = document.getElementById(panelIds[name]);
     if (!panel) return;
     var docked = owners.indexOf(name) !== -1;
+    renderToolPaneChrome(panel, name);
     panel.dataset.workbenchPlacement = docked ? 'docked' : 'overlay';
     panel.dataset.workbenchActive = store.get('rightWorkbenchOwner') === name ? 'true' : 'false';
     if (!openOwner(name)) return;
-    var header = panel.querySelector(':scope > header, :scope > .file-viewer-header .file-viewer-tabbar, :scope > .terminal-header');
+    var header = panel.querySelector(':scope > .tool-pane-header, :scope > header, :scope > .file-viewer-header .file-viewer-tabbar, :scope > .terminal-header');
     if (!header) return;
     var button = panel.querySelector('.workbench-layout-toggle');
     if (!button) {
-      var actions = header.querySelector('[class*="window-actions"], .terminal-header-actions, .shared-browser-window, :scope.mcp-skills-header > div') || header;
+      var actions = header.querySelector('[class*="window-actions"], .terminal-header-actions, .shared-browser-window, .file-viewer-window-actions, .workbench-pane-actions, :scope.mcp-skills-header > div') || header;
       button = document.createElement('button'); button.type = 'button'; button.className = 'workbench-layout-toggle';
       button.addEventListener('click', function () {
+        if (activeSavedView()) { setDocked(name, dockedOwners().indexOf(name) < 0); return; }
         var current = store.get('workbenchLayoutPreference') || {};
         if (!current.ready || current.loading || current.saving) { ensureLayoutPreference(); return; }
         var owner = store.get('myUserId'), project = store.get('currentSlug'), revision = rightWorkbenchRevisionFor(name);
@@ -83,6 +87,7 @@ function renderLayoutControls() {
         });
       });
       var anchor = actions === header ? header.querySelector('[data-knowledge-wide]') : actions.firstElementChild;
+      if (panel.dataset.fileInstance) { var pin = actions.querySelector('[data-action="pin"]'); anchor = pin && pin.nextSibling; }
       actions.insertBefore(button, anchor || null);
     }
     if (button.dataset.mode !== (docked ? 'docked' : 'overlay')) {
@@ -92,20 +97,26 @@ function renderLayoutControls() {
     button.setAttribute('aria-label', docked ? 'Float workbench over sessions' : 'Dock workbench beside sessions');
     button.title = state.error || button.getAttribute('aria-label');
     button.setAttribute('aria-pressed', docked ? 'true' : 'false');
-    button.disabled = !!state.loading || !!state.saving;
+    // View edits are queued by the workspace controller. Disabling this button
+    // for an unrelated in-flight save can swallow a click between down and up.
+    button.disabled = activeSavedView() ? false : !!state.loading || !!state.saving;
     button.setAttribute('aria-busy', state.loading || state.saving ? 'true' : 'false');
   });
 }
 
-export function registerRightWorkbench(name, close) {
+export function registerRightWorkbench(name, close, panelId) {
+  if (panelId) panelIds[name] = panelId;
   if (!name || typeof close !== "function") return;
   closers[name] = close;
 }
 
+export function unregisterRightWorkbench(name) {
+  delete closers[name];
+  if (name.indexOf('file-') === 0 && name !== 'file-viewer') delete panelIds[name];
+}
 export function claimRightWorkbench(name) {
   if (typeof document !== 'undefined') ensureLayoutPreference();
-  var owner = store.get('rightWorkbenchOwner'), docked = dockedOwners().slice(), preference = store.get('workbenchLayoutPreference') || {};
-  if (!owner && !docked.length && preference.ready && preference.mode === 'docked') docked.push(name);
+  var owner = store.get('rightWorkbenchOwner'), docked = dockedOwners().slice();
   var retained = docked.indexOf(name) !== -1 && owner && docked.indexOf(owner) === -1 ? owner : name;
   var revision = (store.get('rightWorkbenchRevision') || 0) + 1, revisions = Object.assign({}, store.get('rightWorkbenchPanelRevisions') || {});
   Object.keys(revisions).forEach(function (key) { if (key !== retained && docked.indexOf(key) === -1) delete revisions[key]; });
@@ -133,10 +144,18 @@ export function resetRightWorkbench() {
 }
 store.subscribe(function (state, previous) {
   if (state.currentSlug !== previous.currentSlug || state.myUserId !== previous.myUserId) { resetRightWorkbench(); return; }
-  var preference = state.workbenchLayoutPreference || {}, before = previous.workbenchLayoutPreference || {};
-  if (!before.ready && preference.ready && preference.mode === 'docked' && !dockedOwners().length && state.rightWorkbenchOwner) {
-    setDocked(state.rightWorkbenchOwner, true); return;
-  }
-  if (state.workbenchLayoutPreference !== previous.workbenchLayoutPreference || state.rightWorkbenchOwner !== previous.rightWorkbenchOwner ||
+  if (state.projectSplitViewPending !== previous.projectSplitViewPending || state.workbenchLayoutPreference !== previous.workbenchLayoutPreference || state.rightWorkbenchOwner !== previous.rightWorkbenchOwner ||
       state.rightWorkbenchDockedOwners !== previous.rightWorkbenchDockedOwners) renderLayoutControls();
 });
+
+export function restoreWorkbenchDock(name) { setDocked(name, true); }
+
+// Document-level shortcuts belong to the focused pane, then the foreground overlay.
+export function handlesWorkbenchKey(name, event) {
+  if (event.defaultPrevented) return false;
+  var target = event.target, focused = Object.keys(panelIds).find(function (owner) {
+    var panel = document.getElementById(panelIds[owner]);
+    return panel && target && panel.contains(target);
+  });
+  return (focused || store.get('rightWorkbenchOwner')) === name;
+}

package/lib/public/modules/scheduled-tasks.js

@@ -65,18 +65,19 @@ function ensurePanel() {
   panel.innerHTML =
     '<header class="scheduled-tasks-topbar">' +
       '<span class="scheduled-tasks-title">' + iconHtml("calendar-clock") + 'Scheduled</span>' +
-      '<div class="scheduled-tasks-create-group">' +
-        '<button class="scheduled-tasks-new" type="button" data-action="new">' + iconHtml("plus") + 'New</button>' +
-        '<button id="scheduled-tasks-create-menu-trigger" class="scheduled-tasks-new-menu" type="button" data-action="new-menu" aria-label="More task creation options" aria-haspopup="menu" aria-expanded="false" aria-controls="scheduled-tasks-create-menu">' + iconHtml("chevron-down") + '</button>' +
-        '<div id="scheduled-tasks-create-menu" class="scheduled-tasks-create-menu hidden" role="menu" aria-labelledby="scheduled-tasks-create-menu-trigger"><button type="button" role="menuitem" data-action="manual">Manual creation</button></div>' +
-      '</div>' +
       '<div class="scheduled-tasks-window-actions">' +
         '<button class="scheduled-tasks-icon-btn" type="button" data-action="wide" title="Widen panel" aria-label="Widen Scheduled panel" aria-pressed="false">' + iconHtml("chevrons-left-right") + '</button>' +
         '<button class="scheduled-tasks-icon-btn" type="button" data-action="fullscreen" title="Toggle fullscreen" aria-label="Toggle Scheduled fullscreen" aria-pressed="false">' + iconHtml("maximize-2") + '</button>' +
         '<button class="scheduled-tasks-icon-btn" type="button" data-action="close" title="Close" aria-label="Close Scheduled">' + iconHtml("x") + '</button>' +
       '</div>' +
     '</header>' +
-    '<div class="scheduled-task-default-ai"><span>New interviews use your shared Default AI.</span><button type="button" data-action="default-ai">Change default</button></div>' +
+    '<div class="scheduled-tasks-toolbar" role="toolbar" aria-label="Scheduled task actions">' +
+      '<div class="scheduled-tasks-create-group">' +
+        '<button class="scheduled-tasks-new" type="button" data-action="new">' + iconHtml("plus") + 'New</button>' +
+        '<button id="scheduled-tasks-create-menu-trigger" class="scheduled-tasks-new-menu" type="button" data-action="new-menu" aria-label="More task creation options" aria-haspopup="menu" aria-expanded="false" aria-controls="scheduled-tasks-create-menu">' + iconHtml("chevron-down") + '</button>' +
+        '<div id="scheduled-tasks-create-menu" class="scheduled-tasks-create-menu hidden" role="menu" aria-labelledby="scheduled-tasks-create-menu-trigger"><button type="button" role="menuitem" data-action="manual">Manual creation</button></div>' +
+      '</div>' +
+    '<div class="scheduled-task-default-ai"><span>New interviews use your shared Default AI.</span><button type="button" data-action="default-ai">Change default</button></div></div>' +
     '<div class="scheduled-task-draft-slot"></div>' +
     '<div class="scheduled-tasks-list" role="list"></div>';
   host.appendChild(panel);