clay-server 4.0.0-beta.9 → 4.0.1-beta.1

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,29 +99,38 @@ 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 || "";
     error.classList.toggle("hidden", !msg.error);
   }
-  var preview = card.querySelector(".worker-proposal-result");
-  if (preview && msg.resultPreview) {
-    preview.textContent = msg.resultPreview;
-    preview.classList.remove("hidden");
-  }
   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 +160,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 +185,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 +218,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,31 +229,32 @@ 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";
   card.appendChild(error);
-  var result = document.createElement("div");
-  result.className = "worker-proposal-result hidden";
-  card.appendChild(result);
 
   var actions = document.createElement("div");
   actions.className = "worker-proposal-actions";
   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=20260910-ask-clay-controls1");
 @import url("css/mention.css");
 @import url("css/debate.css");
 @import url("css/home-debate-planning.css");