clay-server 5.2.0-beta.9 → 5.2.1-beta.1

package/lib/public/modules/pair-result-status.js

@@ -1,8 +1,13 @@
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { showConfirm } from './app-misc.js';
+import { iconHtml, refreshIcons } from './icons.js';
 
 var statusGeneration = 0;
+// Whether the review tray is open lives in the store (pairResultTrayOpen), so it
+// survives server re-renders and resets on clear or session switch.
+function isTrayOpen() { return !!store.get("pairResultTrayOpen"); }
+function setTrayOpen(open) { if (isTrayOpen() !== open) store.set({ pairResultTrayOpen: open }); }
 
 function retrySource(item) {
   return { item: item, generation: statusGeneration, projectSlug: store.get("currentSlug") || store.get("activeProjectSlug") || null,
@@ -43,56 +48,100 @@ function dismiss(items) {
   });
 }
 
+function worstState(items) {
+  if (items.some(function (item) { return item.state === "blocked"; })) return "blocked";
+  if (items.some(function (item) { return item.state === "uncertain"; })) return "uncertain";
+  return "pending";
+}
+
+function stateWords(state) {
+  return state === "blocked" ? "blocked" : (state === "uncertain" ? "delivery uncertain" : "pending");
+}
+
+function button(className, label, icon) {
+  var node = document.createElement("button");
+  node.type = "button"; node.className = className;
+  if (label) node.setAttribute("aria-label", label);
+  if (icon) node.innerHTML = iconHtml(icon);
+  return node;
+}
+
+function renderCard(item) {
+  var card = document.createElement("div");
+  card.className = "pair-result-status-card pair-result-status-" + item.state;
+  var title = document.createElement("strong");
+  title.textContent = item.state === "blocked" ? "Split Worker result blocked" :
+    (item.state === "uncertain" ? (item.hasCompletedResult === false ? "Split Worker recovery uncertain" : "Split Worker result delivery uncertain") : "Split Worker result pending");
+  var message = document.createElement("span");
+  message.textContent = item.message || "The completed result is retained.";
+  card.appendChild(title); card.appendChild(message);
+  if (item.hasCompletedResult !== false) {
+    var details = document.createElement("details"), summary = document.createElement("summary"), body = document.createElement("pre");
+    summary.textContent = "View completed result";
+    body.textContent = item.error ? "Error: " + item.error : (item.response || "No text response was recorded.");
+    details.appendChild(summary); details.appendChild(body); card.appendChild(details);
+  }
+  if (item.canRetry) {
+    var retryButton = button("pair-result-status-retry", null, null);
+    retryButton.textContent = "Retry delivery";
+    retryButton.addEventListener("click", retry.bind(null, item));
+    card.appendChild(retryButton);
+  }
+  return card;
+}
+
 function renderPairResultStatus() {
   var existing = document.getElementById("pair-result-status");
+  var focusedToggle = !!(existing && existing.ownerDocument.activeElement && existing.ownerDocument.activeElement.className === "pair-result-status-toggle");
   if (existing) existing.remove();
   var items = store.get("pairResultStatus") || [];
-  if (!items.length) return;
+  if (!items.length) { setTrayOpen(false); return; }
   var messages = document.getElementById("messages");
   if (!messages || !messages.parentElement) return;
+  var trayOpen = isTrayOpen();
+  var state = worstState(items);
+  var label = items.length === 1 ? "Worker update" : items.length + " Worker updates";
   var section = document.createElement("section");
   section.id = "pair-result-status";
-  section.className = "pair-result-status";
-  section.setAttribute("role", "status");
-  var header = document.createElement("div");
-  header.className = "pair-result-status-header";
-  var heading = document.createElement("span");
-  heading.textContent = items.length === 1 ? "Worker update needs attention" : items.length + " Worker updates need attention";
-  var close = document.createElement("button");
-  close.type = "button"; close.className = "pair-result-status-dismiss";
-  close.textContent = "×";
-  close.setAttribute("aria-label", "Dismiss Worker notices");
+  section.className = "pair-result-status pair-result-status-tone-" + state + (trayOpen ? " is-open" : "");
+  var bar = document.createElement("div");
+  bar.className = "pair-result-status-bar";
+  var toggle = button("pair-result-status-toggle", null, null);
+  toggle.setAttribute("aria-expanded", trayOpen ? "true" : "false");
+  toggle.setAttribute("aria-controls", "pair-result-status-tray");
+  toggle.innerHTML = '<span class="pair-result-status-icon" aria-hidden="true">' + iconHtml(state === "pending" ? "clock" : "triangle-alert") + '</span>' +
+    '<span class="pair-result-status-label">' + label + '</span>' +
+    '<span class="pair-result-status-state">, ' + stateWords(state) + '.</span>' +
+    '<span class="pair-result-status-review">Review</span>' +
+    '<span class="pair-result-status-chevron" aria-hidden="true">' + iconHtml("chevron-down") + '</span>';
+  // One short polite announcement; the details stay in the tray.
+  var live = document.createElement("span");
+  live.className = "pair-result-status-live"; live.setAttribute("role", "status"); live.textContent = label;
+  bar.appendChild(live);
+  var close = button("pair-result-status-dismiss", "Dismiss Worker notices", "x");
   close.title = "Dismiss notices. Retained tasks and results are kept.";
   close.addEventListener("click", dismiss.bind(null, items));
-  header.appendChild(heading); header.appendChild(close); section.appendChild(header);
-  var content = document.createElement("details"), toggle = document.createElement("summary");
-  content.className = "pair-result-status-details";
-  toggle.textContent = "Review updates";
-  content.appendChild(toggle); section.appendChild(content);
-  for (var i = 0; i < items.length; i++) {
-    var item = items[i], card = document.createElement("div");
-    card.className = "pair-result-status-card pair-result-status-" + item.state;
-    var title = document.createElement("strong");
-    title.textContent = item.state === "blocked" ? "Split Worker result blocked" :
-      (item.state === "uncertain" ? (item.hasCompletedResult === false ? "Split Worker recovery uncertain" : "Split Worker result delivery uncertain") : "Split Worker result pending");
-    var message = document.createElement("span");
-    message.textContent = item.message || "The completed result is retained.";
-    card.appendChild(title); card.appendChild(message);
-    if (item.hasCompletedResult !== false) {
-      var details = document.createElement("details"), summary = document.createElement("summary"), body = document.createElement("pre");
-      summary.textContent = "View completed result";
-      body.textContent = item.error ? "Error: " + item.error : (item.response || "No text response was recorded.");
-      details.appendChild(summary); details.appendChild(body); card.appendChild(details);
-    }
-    if (item.canRetry) {
-      var button = document.createElement("button");
-      button.type = "button"; button.className = "pair-result-status-retry"; button.textContent = "Retry delivery";
-      button.addEventListener("click", retry.bind(null, item));
-      card.appendChild(button);
-    }
-    content.appendChild(card);
-  }
+  bar.appendChild(toggle); bar.appendChild(close); section.appendChild(bar);
+  var tray = document.createElement("div");
+  tray.id = "pair-result-status-tray"; tray.className = "pair-result-status-tray";
+  tray.hidden = !trayOpen;
+  for (var i = 0; i < items.length; i++) tray.appendChild(renderCard(items[i]));
+  section.appendChild(tray);
+  toggle.addEventListener("click", function () {
+    trayOpen = !isTrayOpen(); setTrayOpen(trayOpen);
+    toggle.setAttribute("aria-expanded", trayOpen ? "true" : "false");
+    tray.hidden = !trayOpen;
+    section.className = section.className.replace(/ is-open/g, "") + (trayOpen ? " is-open" : "");
+  });
+  section.addEventListener("keydown", function (event) {
+    if (event.key !== "Escape" || !isTrayOpen()) return;
+    trayOpen = false; setTrayOpen(false); toggle.setAttribute("aria-expanded", "false"); tray.hidden = true;
+    section.className = section.className.replace(/ is-open/g, "");
+    if (toggle.focus) toggle.focus();
+  });
   messages.parentElement.insertBefore(section, messages);
+  refreshIcons();
+  if (focusedToggle && toggle.focus) toggle.focus();
 }
 
 function handlePairResultStatus(msg) {
@@ -105,6 +154,7 @@ function handlePairResultStatus(msg) {
 
 function clearPairResultStatus() {
   statusGeneration++;
+  setTrayOpen(false);
   store.set({ pairResultStatus: [] });
   renderPairResultStatus();
 }

package/lib/public/modules/pane-appearance-bridge.js

@@ -0,0 +1,59 @@
+// Live appearance sync between the app shell and its pane iframes (split
+// Driver/Worker panes and the contextual Mate window). Each iframe runs its own
+// theme module and only reads the persisted preference at load, so the shell
+// pushes the applied appearance down on every change and when a frame loads.
+// Same-origin only, shell to child only; nothing is saved from either side.
+
+import { store } from './store.js';
+import { onThemeChange, getAppearanceSnapshot, applyExternalAppearance } from './theme.js';
+
+var ID = /^[a-zA-Z0-9_-]{1,120}$/;
+
+function paneFrames() {
+  return Array.prototype.filter.call(document.querySelectorAll('iframe'), function (frame) {
+    try { var url = new URL(frame.src, window.location.href); return url.origin === window.location.origin && url.searchParams.get('pane') === '1'; }
+    catch (error) { return false; }
+  });
+}
+
+function push(frame) {
+  var snapshot = getAppearanceSnapshot();
+  try { if (frame.contentWindow) frame.contentWindow.postMessage({ type: 'clay-appearance', snapshot: snapshot }, window.location.origin); } catch (error) {}
+}
+
+function isId(value) { return typeof value === 'string' && ID.test(value); }
+function isIdOrNull(value) { return value === null || isId(value); }
+
+// Exact shape only: strings or null, never coerced values.
+function validSnapshot(value) {
+  var pref = value && typeof value === 'object' ? value.preference : null;
+  if (!pref || typeof pref !== 'object' || !isId(value.themeId)) return false;
+  if (value.userId !== null && (typeof value.userId !== 'string' || !value.userId || value.userId.length > 200)) return false;
+  if (typeof pref.configured !== 'boolean') return false;
+  if (pref.mode !== null && pref.mode !== 'light' && pref.mode !== 'dark') return false;
+  return isIdOrNull(pref.theme) && isIdOrNull(pref.lightTheme) && isIdOrNull(pref.darkTheme);
+}
+
+export function initPaneAppearanceBridge() {
+  if (store.get('paneMode')) {
+    if (window.parent === window) return;
+    window.addEventListener('message', function (event) {
+      if (event.origin !== window.location.origin || event.source !== window.parent) return;
+      var msg = event.data;
+      if (!msg || msg.type !== 'clay-appearance' || !validSnapshot(msg.snapshot)) return;
+      // Once this frame knows its owner the snapshot must name exactly that owner (null is a mismatch).
+      // Before identity is known, or in solo mode without one, any well-formed snapshot applies.
+      var owner = store.get('myUserId') || null;
+      if (owner !== null && msg.snapshot.userId !== owner) return;
+      applyExternalAppearance(msg.snapshot);
+    });
+    return;
+  }
+  onThemeChange(function () { paneFrames().forEach(push); });
+  // Frames that rejected an early snapshot (identity not yet known here) get it again once it is.
+  store.subscribe(function (state, previous) { if (state.myUserId !== previous.myUserId) paneFrames().forEach(push); });
+  // A frame that finished loading may have been seeded before a pending save.
+  document.addEventListener('load', function (event) {
+    if (event.target && event.target.tagName === 'IFRAME' && paneFrames().indexOf(event.target) >= 0) push(event.target);
+  }, true);
+}

package/lib/public/modules/profile.js

@@ -135,9 +135,12 @@ export function uploadAvatarBlob(blob) {
 }
 
 // --- Avatar position picker ---
-export function showAvatarPositioner(img, objectUrl, onDone) {
+// With a host element the editor mounts inline as a settings subview instead
+// of a page-level overlay.
+export function showAvatarPositioner(img, objectUrl, onDone, host) {
   var outputSize = 256;
   var viewSize = 220;
+  var priorFocus = document.activeElement;
 
   // State
   var scale = 1;
@@ -169,7 +172,7 @@ export function showAvatarPositioner(img, objectUrl, onDone) {
 
   // Build overlay
   var overlay = document.createElement('div');
-  overlay.className = 'avatar-positioner-overlay';
+  overlay.className = host ? 'avatar-positioner-inline settings-subview' : 'avatar-positioner-overlay';
 
   var container = document.createElement('div');
   container.className = 'avatar-positioner-container';
@@ -225,8 +228,10 @@ export function showAvatarPositioner(img, objectUrl, onDone) {
   container.appendChild(btnRow);
 
   overlay.appendChild(container);
-  document.body.appendChild(overlay);
+  if (host) { host.classList.add('has-subview'); host.appendChild(overlay); overlay.setAttribute('role', 'region'); overlay.setAttribute('aria-label', 'Position your avatar'); }
+  else document.body.appendChild(overlay);
   updatePreview();
+  if (host) doneFocus();
 
   // Drag
   var dragging = false;
@@ -288,9 +293,12 @@ export function showAvatarPositioner(img, objectUrl, onDone) {
     updatePreview();
   }, { passive: false });
 
+  function doneFocus() { closeBtn.focus(); }
+
   function cleanup(revoke) {
     document.removeEventListener('keydown', onOverlayKeydown);
     overlay.remove();
+    if (host) { host.classList.remove('has-subview'); if (priorFocus && priorFocus.isConnected) priorFocus.focus(); }
     if (revoke) URL.revokeObjectURL(objectUrl);
   }
 

package/lib/public/modules/project-mate-creation-workspace.js

@@ -81,6 +81,9 @@ function startMateCreation() {
   maybeStartPendingCreation();
 }
 
+// Entry for the zero-project welcome: the same Clay-guided flow the add button's Mate choice runs.
+export function startClayMateCreation() { startMateCreation(); }
+
 function maybeStartPendingCreation() {
   var state = store.snap();
   if (!state.projectMateCreationPendingStart || !state.connected || state.activeProjectSlug !== 'mate-' + state.projectMateCreationMateId) return;
@@ -89,11 +92,17 @@ function maybeStartPendingCreation() {
   store.set({ projectMateCreationPendingStart: false, projectMateCreationAwaitingHistory: true, projectMateCreationRequestId: requestId });
 }
 
-function choiceButton(icon, title, description) {
+function choiceButton(artwork, title, description) {
   var button = document.createElement('button');
   button.type = 'button';
   button.className = 'project-create-choice-option';
-  button.innerHTML = iconHtml(icon);
+  var image = document.createElement('img');
+  image.src = '/welcome-art/' + artwork + '.png';
+  image.alt = '';
+  image.width = 1536;
+  image.height = 1024;
+  image.decoding = 'async';
+  button.appendChild(image);
   var copy = document.createElement('span');
   var heading = document.createElement('strong');
   heading.textContent = title;
@@ -121,9 +130,9 @@ export function openProjectCreateChoice(opener, openProject) {
   var title = document.createElement('h2');
   title.id = 'project-create-choice-title';
   title.textContent = 'What would you like to add?';
-  var mate = choiceButton('users', 'Mate', 'Shape a new collaborator with Clay');
+  var mate = choiceButton('mate-clay', 'Create a Mate', 'A specialist to work alongside you.');
   mate.addEventListener('click', startMateCreation);
-  var project = choiceButton('folder-plus', 'Project', 'Add a local workspace');
+  var project = choiceButton('project-clay', 'Start a project', 'Work on code or files together.');
   project.addEventListener('click', function () {
     closeChoice(false);
     openProject();

package/lib/public/modules/project-session-visibility-settings.js

@@ -27,12 +27,10 @@ function setSelectState(select, value, disabled) {
   select.disabled = !!disabled;
 }
 
-function isCurrentProject(active) {
-  return !!(active && active.slug && active.slug === store.get('currentSlug'));
-}
-
+// Editable for any authorised selected project: the server re-authorises the
+// exact slug (owner, permission, access, worktree) and echoes it back.
 function isReadOnly(active) {
-  return !active || !active.authorized || active.isWorktree || !isCurrentProject(active);
+  return !active || !active.authorized || active.isWorktree;
 }
 
 function renderActiveState() {
@@ -40,23 +38,26 @@ function renderActiveState() {
   var pending = pendingState();
   var select = selectElement();
   var inheritedHint = document.getElementById("ps-session-visibility-default-inherited-hint");
-  var nonCurrentHint = document.getElementById("ps-session-visibility-default-non-current-hint");
   if (inheritedHint) inheritedHint.classList.toggle("hidden", !(active && active.isWorktree));
-  if (nonCurrentHint) nonCurrentHint.classList.toggle("hidden", !(active && active.authorized && !active.isWorktree && !isCurrentProject(active)));
   if (!select || !active) return;
-  setSelectState(select, active.effectiveValue, isReadOnly(active) || !!(pending && pending.slug === active.slug));
+  // One request at a time: a pending change for any project holds the control.
+  setSelectState(select, active.effectiveValue, isReadOnly(active) || !!pending);
 }
 
-function isAuthorized(project) {
+// The server requires the project owner plus the projectSettings permission.
+// An administrator who is not the owner may see the value but not change it.
+function visibilityAccess(project) {
   var users = store.get('cachedAllUsers') || [];
   var userId = store.get('myUserId');
   var currentUser = null;
   for (var i = 0; i < users.length; i++) {
     if (users[i].id === userId) { currentUser = users[i]; break; }
   }
-  return !!(store.get('isMultiUserMode') && project &&
-    ((project.projectOwnerId && project.projectOwnerId === userId) || (currentUser && currentUser.role === "admin")) &&
-    (!store.get('permissions') || store.get('permissions').projectSettings !== false));
+  var permitted = !store.get('permissions') || store.get('permissions').projectSettings !== false;
+  var owner = !!(project && project.projectOwnerId && project.projectOwnerId === userId);
+  var admin = !!(currentUser && currentUser.role === "admin");
+  var multi = !!(store.get('isMultiUserMode') && project && permitted);
+  return { visible: multi && (owner || admin), editable: multi && owner };
 }
 
 export function initProjectSessionVisibilitySettings() {
@@ -80,7 +81,6 @@ export function initProjectSessionVisibilitySettings() {
   });
 
   store.subscribe(function (state, previous) {
-    if (state.currentSlug !== previous.currentSlug) renderActiveState();
     if (state.connected || previous.connected !== true) return;
     var pending = pendingState();
     if (!pending) return;
@@ -95,10 +95,13 @@ export function initProjectSessionVisibilitySettings() {
 export function populateProjectSessionVisibilitySettings(slug, project) {
   var field = document.getElementById("ps-session-visibility-default-field");
   var select = selectElement();
-  if (field) field.style.display = isAuthorized(project) ? "" : "none";
+  var access = visibilityAccess(project);
+  if (field) field.style.display = access.visible ? "" : "none";
+  var ownerHint = document.getElementById("ps-session-visibility-default-owner-hint");
+  if (ownerHint) ownerHint.classList.toggle("hidden", !(access.visible && !access.editable));
   if (!select) return;
   var value = project && project.sessionVisibilityDefault === "shared" ? "shared" : "private";
-  var active = { slug: slug || "", effectiveValue: value, isWorktree: !!(project && project.isWorktree), authorized: isAuthorized(project) };
+  var active = { slug: slug || "", effectiveValue: value, isWorktree: !!(project && project.isWorktree), authorized: access.editable };
   var pending = pendingState();
   setVisibilityState(active, pending);
   renderActiveState();
@@ -124,7 +127,7 @@ export function handleProjectSessionVisibilityDefault(msg) {
   var active = activeState();
   setVisibilityState(active, null);
   var select = selectElement();
-  if (!select || !active || active.slug !== msg.slug) return;
+  if (!select || !active || active.slug !== msg.slug) { renderActiveState(); return; }
   if (!msg.ok) {
     active = Object.assign({}, active, { effectiveValue: pending.previous });
     setVisibilityState(active, null);

package/lib/public/modules/project-settings-environment.js

@@ -31,7 +31,18 @@ export function handleProjectEnv(msg) {
   update({ loaded: true, saved: msg.envrc || '', rows: parseEnvString(msg.envrc || '') });
   render(); status('');
 }
-function changeRows(rows) { update({ rows: rows, dirty: true }); document.getElementById('ps-env-save').disabled = false; status('Unsaved changes'); }
+// A draft exists only while the rows differ from the saved variables; blank rows and edits that are
+// reverted by hand leave nothing to save.
+function rowsSignature(rows) {
+  return (rows || []).filter(function (row) { return row.key.trim() || row.value; }).map(function (row) { return row.key.trim() + '\u0000' + row.value; }).join('\n');
+}
+function changeRows(rows) {
+  var dirty = rowsSignature(rows) !== rowsSignature(parseEnvString(state().saved || ''));
+  update({ rows: rows, dirty: dirty });
+  document.getElementById('ps-env-save').disabled = !dirty || !!state().saving;
+  if (!dirty) clearCachedDraft();
+  status(dirty ? 'Unsaved changes' : '');
+}
 function render() {
   var editor = state();
   var list = document.getElementById('ps-env-list'); list.replaceChildren();