clay-server 4.0.0-beta.2 → 4.0.0-beta.21

package/lib/public/modules/update-snooze.js

@@ -0,0 +1,169 @@
+// Snooze control for the update-available banner.
+//
+// Lives outside app-notifications.js so the banner module does not grow
+// further, and because this is a self-contained concern: one compact menu, one
+// message out, one message in.
+//
+// The client decides nothing. It sends an allowlisted duration key and, as a
+// hint only, the browser's UTC offset so "Tomorrow" lands on the user's
+// morning rather than the server's. The deadline, the target version and the
+// user identity are all resolved server-side, so a tampered payload can only
+// ever produce a refusal or a shorter snooze.
+
+import { getWs } from './ws-ref.js';
+import { iconHtml, refreshIcons } from './icons.js';
+
+// Must match SNOOZE_OPTIONS in lib/update-snooze.js. The server re-validates
+// every key, so this list is presentation, not policy.
+var SNOOZE_CHOICES = [
+  { id: "3h", label: "3 hours" },
+  { id: "8h", label: "8 hours" },
+  { id: "tomorrow", label: "Tomorrow" },
+];
+
+var openMenu = null;
+var bannerRemover = null;
+
+// app-notifications.js owns banner teardown (it runs the exit animation and
+// keeps the clear-all button in sync). Registering the remover here keeps the
+// dependency one-way, so the two modules never form a cycle.
+export function setSnoozeBannerRemover(fn) {
+  bannerRemover = typeof fn === "function" ? fn : null;
+}
+
+export function isSnoozeChoice(id) {
+  for (var i = 0; i < SNOOZE_CHOICES.length; i++) {
+    if (SNOOZE_CHOICES[i].id === id) return true;
+  }
+  return false;
+}
+
+function closeMenu() {
+  if (!openMenu) return;
+  var trigger = openMenu.trigger;
+  if (openMenu.menu && openMenu.menu.parentNode) {
+    openMenu.menu.parentNode.removeChild(openMenu.menu);
+  }
+  openMenu = null;
+  if (trigger) trigger.setAttribute("aria-expanded", "false");
+}
+
+function sendSnooze(duration) {
+  if (!isSnoozeChoice(duration)) return;
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) return;
+  // A hint, not an instruction: the server validates the range, computes the
+  // instant itself, and clamps the result to its own maximum.
+  var offset = -new Date().getTimezoneOffset();
+  ws.send(JSON.stringify({ type: "update_snooze", duration: duration, tzOffsetMinutes: offset }));
+}
+
+function buildMenu(trigger) {
+  var menu = document.createElement("div");
+  menu.className = "notif-banner-snooze-menu";
+  menu.setAttribute("role", "menu");
+  menu.setAttribute("aria-label", "Snooze this update");
+
+  for (var i = 0; i < SNOOZE_CHOICES.length; i++) {
+    (function (choice) {
+      var item = document.createElement("button");
+      item.type = "button";
+      item.className = "notif-banner-snooze-item";
+      item.setAttribute("role", "menuitem");
+      item.textContent = choice.label;
+      item.addEventListener("click", function (e) {
+        e.stopPropagation();
+        closeMenu();
+        sendSnooze(choice.id);
+      });
+      menu.appendChild(item);
+    })(SNOOZE_CHOICES[i]);
+  }
+
+  // Roving focus with the arrow keys, Escape back to the trigger. Enough for a
+  // three-item menu to be usable without a pointer.
+  menu.addEventListener("keydown", function (e) {
+    var items = menu.querySelectorAll(".notif-banner-snooze-item");
+    var index = -1;
+    for (var i = 0; i < items.length; i++) {
+      if (items[i] === document.activeElement) { index = i; break; }
+    }
+    if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+      e.preventDefault();
+      var next = e.key === "ArrowDown" ? index + 1 : index - 1;
+      if (next < 0) next = items.length - 1;
+      if (next >= items.length) next = 0;
+      if (items[next]) items[next].focus();
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      closeMenu();
+      if (trigger) trigger.focus();
+    }
+  });
+
+  return menu;
+}
+
+// Append a compact Snooze control to an existing update banner's action row.
+// Reuses the banner's own button shape rather than introducing a new one.
+export function attachSnoozeControl(actionsEl) {
+  if (!actionsEl) return null;
+
+  var wrap = document.createElement("div");
+  wrap.className = "notif-banner-snooze";
+
+  var trigger = document.createElement("button");
+  trigger.type = "button";
+  trigger.className = "notif-banner-snooze-btn";
+  trigger.setAttribute("aria-haspopup", "menu");
+  trigger.setAttribute("aria-expanded", "false");
+  trigger.setAttribute("aria-label", "Snooze this update notification");
+  trigger.innerHTML = iconHtml("clock") + "<span>Snooze</span>";
+
+  trigger.addEventListener("click", function (e) {
+    e.stopPropagation();
+    if (openMenu && openMenu.trigger === trigger) {
+      closeMenu();
+      return;
+    }
+    closeMenu();
+    var menu = buildMenu(trigger);
+    wrap.appendChild(menu);
+    openMenu = { menu: menu, trigger: trigger };
+    trigger.setAttribute("aria-expanded", "true");
+    var first = menu.querySelector(".notif-banner-snooze-item");
+    if (first) first.focus();
+  });
+
+  wrap.appendChild(trigger);
+  actionsEl.appendChild(wrap);
+  refreshIcons();
+  return wrap;
+}
+
+// The server confirms a snooze to every device of that user, so each one drops
+// the banner rather than only the device the user acted on.
+export function handleUpdateSnoozed(msg) {
+  closeMenu();
+  if (!msg || !msg.ok) return;
+  var banner = document.querySelector('.notif-banner[data-notif-id="_update"]');
+  if (!banner) return;
+  if (msg.version && banner.getAttribute("data-update-version") !== msg.version) return;
+  if (bannerRemover) bannerRemover(banner);
+  else if (banner.parentNode) banner.parentNode.removeChild(banner);
+}
+
+// Dismiss on click-away, blur, or a viewport change so the menu never lingers
+// invisibly. Registered defensively because importing this module must stay
+// side-effect-safe: several suites load the client graph against a partial
+// document/window stub, and a dismiss convenience must not be what breaks them.
+function onGlobal(target, name, fn) {
+  if (target && typeof target.addEventListener === "function") target.addEventListener(name, fn);
+}
+
+onGlobal(typeof document !== "undefined" ? document : null, "click", function () { closeMenu(); });
+onGlobal(typeof window !== "undefined" ? window : null, "blur", function () { closeMenu(); });
+onGlobal(typeof window !== "undefined" ? window : null, "resize", function () { closeMenu(); });

package/lib/public/modules/user-settings.js

@@ -10,6 +10,7 @@ import { setSTTLang } from './stt.js';
 import { userAvatarUrl } from './avatar.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
+import { initCapsulePreference, syncCapsulePreference } from './capsule-preference.js';
 
 var ctx = null;
 var settingsEl = null;
@@ -34,6 +35,8 @@ export function initUserSettings(appCtx) {
 
   if (!settingsEl || !openBtn) return;
 
+  initCapsulePreference();
+
   navItems = settingsEl.querySelectorAll('.us-nav-item');
   sections = settingsEl.querySelectorAll('.us-section');
   pinForm = document.getElementById('us-pin-form');
@@ -466,6 +469,7 @@ function populateAccount() {
     if (matesToggle) matesToggle.checked = matesOn;
     store.set({ projectMateDmsEnabled: matesOn });
     applyProjectMateDmsClass(matesOn);
+    syncCapsulePreference(data.capsulesEnabled === true);
     if (data.chatLayout) {
       setChatLayout(data.chatLayout); // update local cache + CSS
     }

package/lib/public/modules/worker-pane-lock.js

@@ -0,0 +1,176 @@
+// Driver-operated Split Worker surface.
+//
+// A configured Split Worker executes work its Driver delegated, so its pane is
+// an execution surface rather than a chat the person types into. This module
+// takes the composer's footprint away and replaces it with one compact,
+// non-interactive status line.
+//
+// What stays, deliberately: the transcript, streaming status, tool and
+// permission progress, scrolling, and the stop control — the human keeps their
+// emergency brake. What goes: the text input, attachments, send, the composer
+// context row, and any Worker-local permission-mode affordance.
+//
+// The role is read from pair state only (`splitGroups` + the displayed
+// session), which is server-broadcast and therefore correct across reconnect,
+// project switch, session switch, dissolve, replacement and role change. There
+// is no second copy of the role and nothing in localStorage. A plain ad-hoc
+// side-by-side split has no pair roles, so it is never locked and keeps its
+// composer.
+//
+// Accessibility: locked controls are removed from the tab order with `disabled`
+// and `tabindex="-1"`, and the composer region is `aria-hidden` while the
+// status line carries the explanation, so a screen reader is told the pane is
+// Driver-controlled instead of finding focusable inputs that do nothing.
+
+import { store } from './store.js';
+
+var STATUS_ID = "worker-pane-status";
+var LOCK_CLASS = "worker-pane-locked";
+
+// Every interactive composer affordance. Queried lazily: a pane iframe and the
+// main window share this markup, and some ids are mobile-only.
+var LOCKED_CONTROL_IDS = [
+  "input",
+  "send-btn",
+  "attach-file-btn",
+  "attach-image-btn",
+  "input-more-btn",
+  "shell-command-btn",
+  "stt-btn",
+  "schedule-btn",
+  "ask-mate-btn",
+  "context-sources-add",
+  "composer-add-worker-btn",
+  "composer-handoff-btn",
+];
+
+function lockedControls() {
+  var found = [];
+  for (var i = 0; i < LOCKED_CONTROL_IDS.length; i++) {
+    var el = document.getElementById(LOCKED_CONTROL_IDS[i]);
+    if (el) found.push(el);
+  }
+  return found;
+}
+
+// The configured Worker of a live pair, for the session actually on screen.
+// Returns false for an ad-hoc split, for the Driver, and for any ordinary
+// session, so the composer is only ever taken away in the one real case.
+export function isDriverOperatedView(state) {
+  var snapshot = state || store.snap();
+  var sessionId = snapshot.paneMode && snapshot.paneSessionId
+    ? snapshot.paneSessionId
+    : snapshot.activeSessionId;
+  if (!sessionId) return false;
+  var groups = snapshot.splitGroups || [];
+  for (var i = 0; i < groups.length; i++) {
+    var pair = groups[i] && groups[i].pair;
+    if (!pair) continue;
+    if (pair.workerId === sessionId) return true;
+  }
+  return false;
+}
+
+function ensureStatusLine(inputArea) {
+  var existing = document.getElementById(STATUS_ID);
+  if (existing) return existing;
+  var line = document.createElement("div");
+  line.id = STATUS_ID;
+  line.className = "worker-pane-status";
+  // A status region, not a live region: it states a standing condition rather
+  // than announcing a change, so it should not interrupt.
+  line.setAttribute("role", "status");
+  var mark = document.createElement("span");
+  mark.className = "worker-pane-status-mark";
+  mark.setAttribute("aria-hidden", "true");
+  var label = document.createElement("span");
+  label.className = "worker-pane-status-label";
+  label.textContent = "Controlled by Driver";
+  line.appendChild(mark);
+  line.appendChild(label);
+  inputArea.appendChild(line);
+  return line;
+}
+
+function applyLock(locked) {
+  var inputArea = document.getElementById("input-area");
+  var inputWrapper = document.getElementById("input-wrapper");
+  if (!inputArea) return;
+
+  document.body.classList.toggle(LOCK_CLASS, locked);
+
+  if (inputWrapper) {
+    // Hidden from assistive tech as well as sight; the status line speaks for
+    // the region instead.
+    if (locked) inputWrapper.setAttribute("aria-hidden", "true");
+    else inputWrapper.removeAttribute("aria-hidden");
+  }
+
+  var controls = lockedControls();
+  for (var i = 0; i < controls.length; i++) {
+    var el = controls[i];
+    if (locked) {
+      if (el.dataset.workerLockPrev === undefined) {
+        el.dataset.workerLockPrev = el.disabled ? "1" : "0";
+      }
+      el.disabled = true;
+      el.setAttribute("tabindex", "-1");
+    } else if (el.dataset.workerLockPrev !== undefined) {
+      // Restore exactly what was there before the lock, so an independently
+      // disabled send button stays disabled when the pair dissolves.
+      el.disabled = el.dataset.workerLockPrev === "1";
+      el.removeAttribute("tabindex");
+      delete el.dataset.workerLockPrev;
+    }
+  }
+
+  var status = document.getElementById(STATUS_ID);
+  if (locked) {
+    status = ensureStatusLine(inputArea);
+    status.classList.add("visible");
+  } else if (status) {
+    status.classList.remove("visible");
+  }
+}
+
+// Skip permissions and any other Worker-local permission-mode affordance are
+// the Driver's to set, so they are removed from this pane only. The Driver pane
+// and ordinary sessions are untouched.
+function applyPermissionChrome(locked) {
+  var ids = ["skip-perms-pill", "config-chip-wrap"];
+  for (var i = 0; i < ids.length; i++) {
+    var el = document.getElementById(ids[i]);
+    if (!el) continue;
+    if (locked) {
+      if (el.dataset.workerLockHidden === undefined) {
+        el.dataset.workerLockHidden = el.classList.contains("hidden") ? "1" : "0";
+      }
+      el.classList.add("hidden");
+      el.setAttribute("aria-hidden", "true");
+    } else if (el.dataset.workerLockHidden !== undefined) {
+      if (el.dataset.workerLockHidden === "0") el.classList.remove("hidden");
+      el.removeAttribute("aria-hidden");
+      delete el.dataset.workerLockHidden;
+    }
+  }
+}
+
+export function syncWorkerPaneLock(state) {
+  var locked = isDriverOperatedView(state);
+  applyLock(locked);
+  applyPermissionChrome(locked);
+  return locked;
+}
+
+export function initWorkerPaneLock() {
+  syncWorkerPaneLock();
+  // Pair state is the source of truth, so every input that could change the
+  // role re-runs the same resolution: a dissolve, a replacement, a role swap,
+  // switching to another session, or a reconnect that reloads the groups.
+  store.subscribe(function (state, prev) {
+    if (state.splitGroups === prev.splitGroups
+      && state.activeSessionId === prev.activeSessionId
+      && state.paneSessionId === prev.paneSessionId) return;
+    syncWorkerPaneLock(state);
+  });
+}

package/lib/public/modules/worker-proposal-state.js

@@ -0,0 +1,16 @@
+export function workerProposalSelection(msg) {
+  var hasSelection = typeof msg.selectedVendor === "string" ||
+    typeof msg.selectedModel === "string" || typeof msg.selectedEffort === "string";
+  return {
+    selected: hasSelection,
+    vendor: hasSelection ? (msg.selectedVendor || "") : (msg.recommendedVendor || ""),
+    model: hasSelection ? (msg.selectedModel || "") : (msg.recommendedModel || ""),
+    effort: hasSelection ? (msg.selectedEffort || "") : (msg.recommendedEffort || "medium"),
+  };
+}
+
+export function syncWorkerProposalSelection(msg, sync) {
+  var selection = workerProposalSelection(msg);
+  if (selection.selected && typeof sync === "function") sync(selection);
+  return selection;
+}

package/lib/public/modules/worker-proposal.js

@@ -2,6 +2,7 @@ import { getWs } from './ws-ref.js';
 import { addToMessages, scrollToBottom, VENDOR_AVATARS, VENDOR_NAMES } from './app-rendering.js';
 import { effortLevelsFor, effortDisplayName } from './app-panels.js';
 import { iconHtml, refreshIcons } from './icons.js';
+import { workerProposalSelection, syncWorkerProposalSelection } from './worker-proposal-state.js';
 
 function optionValue(entry) {
   if (typeof entry === "string") return entry;
@@ -27,7 +28,7 @@ function planSteps(plan) {
   }).filter(Boolean).slice(0, 8);
 }
 
-function buildVendorSelect(msg) {
+function buildVendorSelect(msg, preferred) {
   var select = document.createElement("select");
   select.className = "worker-proposal-select worker-proposal-vendor";
   var installed = (msg.options && msg.options.installedVendors) || [];
@@ -37,7 +38,7 @@ function buildVendorSelect(msg) {
     option.textContent = VENDOR_NAMES[installed[i]] || installed[i];
     select.appendChild(option);
   }
-  if (installed.indexOf(msg.recommendedVendor) !== -1) select.value = msg.recommendedVendor;
+  if (installed.indexOf(preferred) !== -1) select.value = preferred;
   return select;
 }
 
@@ -98,16 +99,30 @@ function statusLabel(status) {
   if (status === "interrupted") return "Interrupted";
   if (status === "declined") return "Continuing here";
   if (status === "error") return "Needs attention";
-  return "Suggested by Fable";
+  return "Awaiting your choice";
+}
+
+function decisionLabel(status, autoAccepted) {
+  if (autoAccepted) return "Driver recommendation auto-accepted under Full auto";
+  if (status === "pending") return "Runtime choice remains with you";
+  if (status === "declined") return "Runtime proposal declined by user";
+  return "Runtime configuration accepted by user";
 }
 
 function applyState(card, msg) {
   var status = msg.status || "pending";
   card.dataset.status = status;
-  if (msg.autoApproved) card.dataset.autoApproved = "true";
-  var autoApproved = card.dataset.autoApproved === "true";
+  if (msg.autoAccepted || msg.autoApproved) card.dataset.autoAccepted = "true";
+  if (msg.autoAccepted === false || msg.autoApproved === false) card.dataset.autoAccepted = "false";
+  var autoAccepted = card.dataset.autoAccepted === "true";
+  syncWorkerProposalSelection(msg, card._syncWorkerProposalSelection);
   var badge = card.querySelector(".worker-proposal-status");
-  if (badge) badge.textContent = statusLabel(status) + (autoApproved ? " · auto-approved" : "");
+  if (badge) badge.textContent = statusLabel(status) + (autoAccepted ? " · auto-accepted" : "");
+  var decision = card.querySelector(".worker-proposal-decision");
+  if (decision) {
+    decision.textContent = decisionLabel(status, autoAccepted);
+    decision.classList.toggle("automatic", autoAccepted);
+  }
   var error = card.querySelector(".worker-proposal-error");
   if (error) {
     error.textContent = msg.error || "";
@@ -120,7 +135,7 @@ function applyState(card, msg) {
   }
   setControlsDisabled(card, status !== "pending");
   var actions = card.querySelector(".worker-proposal-actions");
-  if (actions) actions.classList.toggle("hidden", autoApproved);
+  if (actions) actions.classList.toggle("hidden", autoAccepted);
 }
 
 function sendDecision(card, accepted) {
@@ -150,10 +165,12 @@ export function renderWorkerProposal(msg) {
   card.className = "worker-proposal-card";
   card.dataset.proposalId = msg.proposalId;
   card.dataset.status = msg.status || "pending";
+  var runtimeSelection = workerProposalSelection(msg);
 
   var header = document.createElement("div");
   header.className = "worker-proposal-header";
-  header.innerHTML = '<div class="worker-proposal-mark">' + iconHtml("git-branch") + '</div><div class="worker-proposal-heading"><span class="worker-proposal-kicker">DRIVER / WORKER</span><strong>Let a Worker handle the execution</strong></div><span class="worker-proposal-status"></span>';
+  var replacing = msg.action === "replace";
+  header.innerHTML = '<div class="worker-proposal-mark">' + iconHtml("git-branch") + '</div><div class="worker-proposal-heading"><span class="worker-proposal-kicker">DRIVER / SPLIT WORKER</span><strong>' + (replacing ? "Configure a replacement Split Worker" : "Configure a Split Worker") + '</strong></div><span class="worker-proposal-status"></span>';
   card.appendChild(header);
 
   var summary = document.createElement("p");
@@ -173,12 +190,24 @@ export function renderWorkerProposal(msg) {
     card.appendChild(plan);
   }
 
+  if (msg.recommendationRationale) {
+    var rationale = document.createElement("div");
+    rationale.className = "worker-proposal-rationale";
+    var rationaleLabel = document.createElement("span");
+    rationaleLabel.textContent = "Driver's recommendation rationale";
+    var rationaleText = document.createElement("p");
+    rationaleText.textContent = msg.recommendationRationale;
+    rationale.appendChild(rationaleLabel);
+    rationale.appendChild(rationaleText);
+    card.appendChild(rationale);
+  }
+
   var config = document.createElement("div");
   config.className = "worker-proposal-config";
   var vendorField = document.createElement("label");
   vendorField.className = "worker-proposal-field worker-proposal-vendor-field";
   vendorField.innerHTML = '<span>Worker</span><span class="worker-proposal-vendor-control"><img alt=""></span>';
-  var vendorSelect = buildVendorSelect(msg);
+  var vendorSelect = buildVendorSelect(msg, runtimeSelection.vendor);
   vendorField.querySelector(".worker-proposal-vendor-control").appendChild(vendorSelect);
   config.appendChild(vendorField);
   var modelField = document.createElement("label");
@@ -194,6 +223,10 @@ export function renderWorkerProposal(msg) {
   config.appendChild(effortField);
   card.appendChild(config);
 
+  var decision = document.createElement("div");
+  decision.className = "worker-proposal-decision";
+  card.appendChild(decision);
+
   function syncVendor(preferredModel, preferredEffort) {
     var vendor = vendorSelect.value;
     var avatar = vendorField.querySelector("img");
@@ -201,12 +234,16 @@ export function renderWorkerProposal(msg) {
     fillModels(modelSelect, vendor, msg, preferredModel);
     fillEffort(card, vendor, modelSelect.value, msg, preferredEffort);
   }
+  card._syncWorkerProposalSelection = function (selection) {
+    if (selection.vendor && vendorSelect.value !== selection.vendor) vendorSelect.value = selection.vendor;
+    syncVendor(selection.model, selection.effort);
+  };
   vendorSelect.addEventListener("change", function () { syncVendor("", "medium"); });
   modelSelect.addEventListener("change", function () {
     var active = card.querySelector(".worker-proposal-effort-btn.active");
     fillEffort(card, vendorSelect.value, modelSelect.value, msg, active ? active.dataset.effort : "medium");
   });
-  syncVendor(msg.recommendedModel || "", msg.recommendedEffort || "medium");
+  syncVendor(runtimeSelection.model, runtimeSelection.effort);
 
   var error = document.createElement("div");
   error.className = "worker-proposal-error hidden";
@@ -220,12 +257,12 @@ export function renderWorkerProposal(msg) {
   var decline = document.createElement("button");
   decline.type = "button";
   decline.className = "worker-proposal-action secondary";
-  decline.textContent = "Continue here";
+  decline.textContent = replacing ? "Keep current Worker" : "Continue here";
   decline.addEventListener("click", function () { sendDecision(card, false); });
   var accept = document.createElement("button");
   accept.type = "button";
   accept.className = "worker-proposal-action primary";
-  accept.innerHTML = iconHtml("panel-right-open") + "<span>Run with Split Worker</span>";
+  accept.innerHTML = iconHtml("panel-right-open") + "<span>" + (replacing ? "Replace Split Worker" : "Run with Split Worker") + "</span>";
   accept.addEventListener("click", function () { sendDecision(card, true); });
   actions.appendChild(decline);
   actions.appendChild(accept);

package/lib/public/style.css

@@ -14,6 +14,7 @@
 @import url("css/input.css?v=20260828-composer-depth1");
 @import url("css/filebrowser.css?v=20260829-terminal-canvas1");
 @import url("css/git-panel.css");
+@import url("css/git-placard.css");
 @import url("css/diff.css");
 @import url("css/highlight.css");
 @import url("css/server-settings.css");
@@ -22,6 +23,7 @@
 @import url("css/mobile-nav.css?v=20260407");
 @import url("css/loop.css");
 @import url("css/scheduler.css");
+@import url("css/project-logs.css");
 @import url("css/scheduler-modal.css");
 @import url("css/home-hub.css");
 @import url("css/home-sidebar.css");
@@ -39,7 +41,7 @@
 @import url("css/session-search.css");
 @import url("css/tooltip.css");
 @import url("css/mates.css?v=20260407");
-@import url("css/command-palette.css?v=20260901-clay-chat2");
+@import url("css/command-palette.css?v=20260908-log-links2");
 @import url("css/mention.css");
 @import url("css/debate.css");
 @import url("css/home-debate-planning.css");