clay-server 4.2.0 → 4.3.0-beta.1

package/lib/public/css/overlays.css

@@ -523,8 +523,8 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
   display: inline-flex;
   align-items: center;
   flex: 0 1 auto;
-  flex-wrap: wrap;
-  gap: 7px;
+  flex-wrap: nowrap;
+  gap: 5px;
   max-width: 100%;
   min-width: 0;
 }
@@ -533,52 +533,80 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
   display: inline-flex;
   align-items: center;
   flex: 0 0 auto;
-  gap: 2px;
+  gap: 1px;
   padding: 2px;
-  border: 1px solid var(--border, rgba(255,255,255,.18));
-  border-radius: 999px;
-  background: var(--surface-raised, rgba(0,0,0,.18));
+  border: 1px solid color-mix(in srgb, var(--border, #45484f) 88%, transparent);
+  border-radius: 10px;
+  background: color-mix(in srgb, var(--surface-raised, rgba(0,0,0,.18)) 86%, transparent);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 2px 8px rgba(0,0,0,.12);
 }
 .session-permission-segmented button {
+  position: relative;
   flex: 0 0 auto;
   border: 0;
-  border-radius: 999px;
-  padding: 3px 8px;
+  border-radius: 7px;
+  padding: 4px 9px;
   color: var(--text-muted, inherit);
   background: transparent;
   font: inherit;
   font-size: 11px;
+  line-height: 1;
   white-space: nowrap;
   cursor: pointer;
+  transition: color .15s ease, background .15s ease, box-shadow .15s ease;
 }
-.session-permission-segmented button.active { background: var(--accent, #6f8cff); color: #fff; }
+.session-permission-segmented button:hover:not(:disabled) { color: var(--text, #fff); background: rgba(255,255,255,.07); }
+.session-permission-segmented button:focus-visible { outline: 2px solid var(--accent, #6f8cff); outline-offset: 1px; z-index: 1; }
+.session-permission-segmented button.active { background: var(--accent, #6f8cff); color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
 .session-permission-segmented button:disabled { cursor: not-allowed; opacity: .5; }
 .session-permission-control.permission-pending .session-permission-segmented button:disabled { cursor: wait; }
+.session-permission-segmented button.pending { color: #fff; }
+.permission-spinner { display: inline-block; visibility: hidden; width: 10px; height: 10px; margin-left: 4px; vertical-align: -1px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; }
+.session-permission-segmented button.pending .permission-spinner { visibility: visible; animation: permission-spin .7s linear infinite; }
+@keyframes permission-spin { to { transform: rotate(360deg); } }
 .session-permission-status {
-  flex: 1 1 118px;
+  flex: 0 1 auto;
   min-width: 0;
-  max-width: 190px;
-  overflow-wrap: anywhere;
-  white-space: normal;
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 3px 6px;
+  border: 1px solid transparent;
+  border-radius: 6px;
   color: var(--text-dimmer, var(--text-muted));
   font-size: 10px;
   line-height: 1.2;
 }
 .session-permission-status.hidden { display: none; }
+.session-permission-control.permission-pending .session-permission-status:not(.hidden) {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
 .permission-runtime-fallback .session-permission-status { color: var(--warning, #d49a55); }
 .permission-globally-forced .session-permission-status { color: var(--warning, #d49a55); }
 .permission-label-short { display: none; }
 @media (max-width: 760px) {
   .permission-label-long { display: none; }
   .permission-label-short { display: inline; }
-  .session-permission-control { column-gap: 5px; row-gap: 2px; }
+  .session-permission-control { column-gap: 4px; }
   .session-permission-segmented button { padding-inline: 7px; }
   .session-permission-status {
-    flex-basis: 96px;
-    max-width: 170px;
+    max-width: 132px;
     font-size: 9px;
   }
 }
+@media (prefers-reduced-motion: reduce) {
+  .session-permission-segmented button { transition: none; }
+  .session-permission-segmented button.pending .permission-spinner { animation: none; opacity: .7; }
+}
 #skip-perms-pill .lucide { width: 12px; height: 12px; flex-shrink: 0; }
 
 /* --- Confirm modal --- */

package/lib/public/css/pane.css

@@ -370,12 +370,12 @@ body.pane-mode #input-area {
    tie and keep the pill at its 22px title-bar size inside the 24px pane
    header. Scope under .split-pane-header to outrank them. */
 .split-pane-header .split-pane-full-access {
-  height: auto;
+  height: 22px;
   align-self: center;
   margin-left: 0;
   padding: 0;
   gap: 4px;
-  font-size: 8px;
+  font-size: 10px;
   letter-spacing: 0.02em;
   flex-wrap: nowrap;
   flex: 0 0 auto;
@@ -383,10 +383,14 @@ body.pane-mode #input-area {
 }
 
 .split-pane-header .session-permission-segmented button {
-  padding: 1px 5px;
-  font-size: 8px;
+  min-height: 18px;
+  padding: 3px 6px;
+  font-size: 10px;
 }
 
+.split-pane-header .permission-label-long { display: none; }
+.split-pane-header .permission-label-short { display: inline; }
+
 .split-pane-header .session-permission-status {
   flex: 0 0 auto;
   min-width: 40px;
@@ -394,7 +398,7 @@ body.pane-mode #input-area {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  font-size: 8px;
+  font-size: 10px;
 }
 
 .split-pane-header .session-full-access-track {

package/lib/public/index.html

@@ -410,9 +410,9 @@
           <button id="header-info-btn" type="button" title="Session info"><i data-lucide="info"></i></button>
           <div id="header-full-access-btn" class="session-permission-control hidden" role="group" aria-label="Session permission mode">
             <div class="session-permission-segmented">
-              <button type="button" data-permission-mode="default">Ask</button>
-              <button type="button" data-permission-mode="auto">Auto</button>
-              <button type="button" data-permission-mode="bypassPermissions" aria-label="Skip permissions"><span class="permission-label-long">Skip permissions</span><span class="permission-label-short" aria-hidden="true">Skip</span></button>
+              <button type="button" data-permission-mode="default"><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>
+              <button type="button" data-permission-mode="auto"><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>
+              <button type="button" data-permission-mode="bypassPermissions" aria-label="Skip permissions" title="Skip permissions"><span class="permission-label-long permission-label">Skip permissions</span><span class="permission-label-short permission-label" aria-hidden="true">Skip</span><span class="permission-spinner" aria-hidden="true"></span></button>
             </div>
             <span class="session-permission-status hidden" aria-live="polite"></span>
           </div>

package/lib/public/modules/app-messages.js

@@ -30,6 +30,7 @@ import { syncPaneTitles, maybeRestoreSplitGroup, openGroup } from './split-view.
 import { showPairDialog, handlePairCreated, handleSplitDelegation, showWorkerDelegationNotice, hideWorkerDelegationNotice } from './split-pair-ui.js';
 import { handleSessionActionMessage } from './session-actions.js';
 import { renderWorkerProposal, updateWorkerProposal } from './worker-proposal.js';
+import { renderDriverContinuation, updateDriverContinuation, renderDriverContinuationContext } from './driver-continuation.js';
 import { handleInputSync, autoResize, builtinCommands, setScheduleBtnDisabled, sendShellResultToAgent, handleAcceptedOrdinaryMessage, handleScheduleMessageResult } from './input.js';
 import { startThinking, appendThinking, stopThinking, resetThinkingGroup, createToolItem, updateToolExecuting, updateToolResult, markAllToolsDone, closeToolGroup, removeToolFromGroup, resetToolState, getTools, getPlanContent, setPlanContent, renderPlanBanner, renderPlanCard, getTodoTools, handleTodoWrite, handleTaskCreate, handleTaskUpdate, applyDeadSessionTodoCompaction, isPlanFilePath, enableMainInput, addTurnMeta, updateSubagentActivity, addSubagentToolEntry, markSubagentDone, initSubagentStop, updateSubagentProgress, updateSubagentTaskStatus, renderAskUserQuestion, markAskUserAnswered, renderPermissionRequest, markPermissionCancelled, markPermissionResolved, renderElicitationRequest, markElicitationResolved, renderUserDialogRequest, markUserDialogResolved, updateThinkingTokens } from './tools.js';
 import { finishThinkingTurn, resumeThinkingAfterReplay } from './thinking-lifecycle.js';
@@ -756,6 +757,19 @@ export function processMessage(msg) {
         updateWorkerProposal(msg);
         break;
 
+      case "driver_continuation_proposal":
+        renderDriverContinuation(msg);
+        break;
+
+      case "driver_continuation_update":
+      case "driver_continuation_result":
+        updateDriverContinuation(msg);
+        break;
+
+      case "driver_continuation_context":
+        renderDriverContinuationContext(msg);
+        break;
+
       case "split_delegation":
         handleSplitDelegation(msg);
         syncPaneTitles();

package/lib/public/modules/driver-continuation-state.js

@@ -0,0 +1,76 @@
+function clean(value) {
+  return value === undefined || value === null ? "" : String(value);
+}
+
+export function continuationKey(message) {
+  if (!message) return "";
+  var projectSlug = clean(message.projectSlug);
+  var sourceOriginId = clean(message.sourceOriginId);
+  var proposalId = clean(message.proposalId);
+  if (!projectSlug || !sourceOriginId || !proposalId) return "";
+  return projectSlug + "\n" + sourceOriginId + "\n" + proposalId;
+}
+
+export function authoritativeState(message) {
+  return {
+    key: continuationKey(message),
+    projectSlug: clean(message.projectSlug),
+    sourceOriginId: clean(message.sourceOriginId),
+    proposalId: clean(message.proposalId),
+    sourceSessionId: Number(message.sourceSessionId),
+    status: message.status || "pending",
+    requestId: "",
+    requestKind: "",
+    inflight: false,
+    error: message.error || "",
+  };
+}
+
+export function beginRequest(state, kind, requestId, connected) {
+  if (!state || !state.key || state.inflight || connected !== true) return null;
+  if (kind === "decision" && state.status !== "pending") return null;
+  var next = Object.assign({}, state, {
+    inflight: true,
+    requestId: clean(requestId),
+    requestKind: kind,
+    error: "",
+  });
+  return next.requestId ? next : null;
+}
+
+export function applyResponse(state, message) {
+  if (!state || !message || continuationKey(message) !== state.key) return null;
+  if (message.requestId && clean(message.requestId) !== state.requestId) return null;
+  var next = Object.assign({}, state, { inflight: false, requestId: "", requestKind: "" });
+  var sourceSessionId = Number(message.sourceSessionId);
+  if (Number.isInteger(sourceSessionId) && sourceSessionId > 0) next.sourceSessionId = sourceSessionId;
+  if (message.status) next.status = message.status;
+  next.error = message.error || "";
+  return next;
+}
+
+export function failRequest(state, requestId, error) {
+  if (!state || !state.inflight || clean(requestId) !== state.requestId) return null;
+  return Object.assign({}, state, {
+    inflight: false,
+    requestId: "",
+    requestKind: "",
+    error: clean(error) || "The request could not be sent. Try again.",
+  });
+}
+
+export function sendContinuationPayload(ws, payload) {
+  if (!ws || ws.readyState !== 1) return { ok: false, error: "The connection is unavailable. Try again." };
+  try {
+    if (ws.send(JSON.stringify(payload)) === false) {
+      return { ok: false, error: "The request was not accepted by the connection. Try again." };
+    }
+  } catch (error) {
+    return { ok: false, error: "The request could not be sent. Try again." };
+  }
+  return { ok: true };
+}
+
+export function continuationCanAct(state, connected) {
+  return !!state && state.status === "pending" && !state.inflight && connected === true;
+}

package/lib/public/modules/driver-continuation.js

@@ -0,0 +1,260 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { addToMessages, scrollToBottom } from './app-rendering.js';
+import { iconHtml, refreshIcons } from './icons.js';
+import { continuationKey, authoritativeState, beginRequest, applyResponse, failRequest, sendContinuationPayload, continuationCanAct } from './driver-continuation-state.js';
+
+var REQUEST_TIMEOUT_MS = 12000;
+
+function states() {
+  return store.get("driverContinuations") || {};
+}
+
+function stateFor(key) {
+  return states()[key] || null;
+}
+
+function setState(key, value) {
+  var next = Object.assign({}, states());
+  next[key] = value;
+  store.set({ driverContinuations: next });
+}
+
+function currentProjectAllows(message) {
+  var current = store.get("currentSlug");
+  return !current || !message.projectSlug || current === message.projectSlug;
+}
+
+function hydrate(message) {
+  if (!currentProjectAllows(message)) return null;
+  var normalized = message;
+  var activeSessionId = store.get("activeSessionId");
+  if (message.type === "driver_continuation_proposal" && activeSessionId !== undefined && activeSessionId !== null) {
+    normalized = Object.assign({}, message, { sourceSessionId: activeSessionId });
+  }
+  var state = authoritativeState(normalized);
+  if (!state.key) return null;
+  setState(state.key, state);
+  return state;
+}
+
+function cardsFor(key) {
+  var cards = document.querySelectorAll("[data-driver-continuation-key]");
+  var found = [];
+  for (var i = 0; i < cards.length; i++) {
+    if (cards[i].dataset.driverContinuationKey === key) found.push(cards[i]);
+  }
+  return found;
+}
+
+function statusLabel(status) {
+  if (status === "starting") return "Starting new session";
+  if (status === "accepted") return "Continued in new session";
+  if (status === "declined") return "Staying here";
+  if (status === "superseded") return "Work changed";
+  return "Your choice";
+}
+
+function syncCard(card) {
+  var state = stateFor(card.dataset.driverContinuationKey);
+  if (!state) return;
+  card.dataset.status = state.status;
+  card.dataset.inflight = state.inflight ? "true" : "false";
+  var badge = card.querySelector(".driver-continuation-status");
+  var error = card.querySelector(".driver-continuation-error");
+  if (badge) badge.textContent = statusLabel(state.status);
+  if (error) {
+    error.textContent = state.error;
+    error.hidden = !state.error;
+  }
+  var enabled = continuationCanAct(state, store.get("connected"));
+  var buttons = card.querySelectorAll(".driver-continuation-action");
+  for (var i = 0; i < buttons.length; i++) buttons[i].disabled = !enabled;
+  var sourceButton = card.querySelector(".driver-continuation-source");
+  if (sourceButton) sourceButton.disabled = state.inflight || store.get("connected") !== true;
+}
+
+function syncKey(key) {
+  var cards = cardsFor(key);
+  for (var i = 0; i < cards.length; i++) syncCard(cards[i]);
+}
+
+function requestId() {
+  if (globalThis.crypto && typeof globalThis.crypto.randomUUID === "function") return globalThis.crypto.randomUUID();
+  return "continuation_" + Date.now() + "_" + Math.random().toString(16).slice(2);
+}
+
+function fail(key, exactRequestId, message) {
+  var next = failRequest(stateFor(key), exactRequestId, message);
+  if (!next) return false;
+  setState(key, next);
+  return true;
+}
+
+function sendRequest(key, kind, payload) {
+  var ws = getWs();
+  var id = requestId();
+  var next = beginRequest(stateFor(key), kind, id, store.get("connected"));
+  if (!next || !ws || ws.readyState !== 1) return false;
+  setState(key, next);
+  payload.requestId = id;
+  payload.projectSlug = next.projectSlug;
+  payload.sourceOriginId = next.sourceOriginId;
+  payload.proposalId = next.proposalId;
+  var sent = sendContinuationPayload(ws, payload);
+  if (!sent.ok) {
+    fail(key, id, sent.error);
+    return false;
+  }
+  setTimeout(function () {
+    fail(key, id, "Clay did not confirm the request. Check the connection and try again.");
+  }, REQUEST_TIMEOUT_MS);
+  return true;
+}
+
+function sendChoice(card, accepted) {
+  sendRequest(card.dataset.driverContinuationKey, "decision", {
+    type: "driver_continuation_response",
+    accepted: accepted === true,
+  });
+}
+
+function addDetail(details, label, value) {
+  if (!value) return;
+  var term = document.createElement("dt");
+  term.textContent = label;
+  var description = document.createElement("dd");
+  description.textContent = value;
+  details.appendChild(term);
+  details.appendChild(description);
+}
+
+function evidenceText(evidence) {
+  if (!evidence) return "";
+  if (evidence.kind === "current_context_pressure" && typeof evidence.usedRatio === "number") {
+    var percent = Math.round(evidence.usedRatio * 100);
+    var threshold = Math.round(Number(evidence.thresholdRatio || 0) * 100);
+    return percent + "% of the current context is in use (proposal threshold: " + threshold + "%).";
+  }
+  if (evidence.kind === "recorded_compaction") {
+    var count = Number(evidence.observedCount || 0);
+    return "Clay recorded " + count + " completed context compaction" + (count === 1 ? "" : "s") + " in this session.";
+  }
+  return "";
+}
+
+export function renderDriverContinuation(msg) {
+  var state = hydrate(msg);
+  if (!state) return;
+  var existing = cardsFor(state.key);
+  if (existing.length) { syncKey(state.key); return; }
+  var handoff = msg.handoff || {};
+  var card = document.createElement("section");
+  card.className = "driver-continuation-card";
+  card.dataset.driverContinuationKey = state.key;
+  card.innerHTML = '<header><span class="driver-continuation-mark">' + iconHtml("arrow-up-right") + '</span><div><span class="driver-continuation-kicker">DRIVER CONTINUATION</span><strong>Carry this work into a fresh session?</strong></div><span class="driver-continuation-status"></span></header>';
+  var reason = document.createElement("p");
+  reason.className = "driver-continuation-reason";
+  reason.textContent = msg.reason || "The Driver identified a safe boundary for a compact handoff.";
+  card.appendChild(reason);
+  var summary = document.createElement("div");
+  summary.className = "driver-continuation-summary";
+  addDetail(summary, "Observed evidence", evidenceText(msg.triggerEvidence));
+  addDetail(summary, "Completed milestone", msg.milestone);
+  addDetail(summary, "Why a fresh session helps", msg.benefit);
+  addDetail(summary, "Goal", handoff.goal);
+  addDetail(summary, "Next action", handoff.nextAction);
+  card.appendChild(summary);
+  var disclosure = document.createElement("details");
+  disclosure.className = "driver-continuation-details";
+  disclosure.innerHTML = "<summary>Review inherited context</summary>";
+  var details = document.createElement("dl");
+  addDetail(details, "Constraints", handoff.constraints);
+  addDetail(details, "Decisions and why", handoff.decisions);
+  addDetail(details, "Rejected approaches", handoff.rejectedApproaches);
+  addDetail(details, "Unresolved", handoff.unresolved);
+  addDetail(details, "Repository state", handoff.repositoryState);
+  addDetail(details, "Verification", handoff.verification);
+  disclosure.appendChild(details);
+  card.appendChild(disclosure);
+  var error = document.createElement("p");
+  error.className = "driver-continuation-error";
+  error.hidden = true;
+  card.appendChild(error);
+  var actions = document.createElement("div");
+  actions.className = "driver-continuation-actions";
+  var stay = document.createElement("button");
+  stay.type = "button";
+  stay.className = "driver-continuation-action secondary";
+  stay.textContent = "Stay here";
+  stay.addEventListener("click", function () { sendChoice(card, false); });
+  var proceed = document.createElement("button");
+  proceed.type = "button";
+  proceed.className = "driver-continuation-action primary";
+  proceed.innerHTML = iconHtml("arrow-right") + "<span>Continue in new session</span>";
+  proceed.addEventListener("click", function () { sendChoice(card, true); });
+  actions.appendChild(stay);
+  actions.appendChild(proceed);
+  card.appendChild(actions);
+  addToMessages(card);
+  syncCard(card);
+  refreshIcons();
+  scrollToBottom();
+}
+
+export function updateDriverContinuation(msg) {
+  if (!currentProjectAllows(msg)) return false;
+  var key = continuationKey(msg);
+  var current = stateFor(key);
+  if (!current) return false;
+  var next = applyResponse(current, msg);
+  if (!next) return false;
+  setState(key, next);
+  return true;
+}
+
+export function renderDriverContinuationContext(msg) {
+  var seed = Object.assign({ status: "accepted" }, msg);
+  var key = continuationKey(seed);
+  if (!stateFor(key)) hydrate(seed);
+  var card = document.createElement("section");
+  card.className = "driver-continuation-context";
+  card.dataset.driverContinuationKey = key;
+  card.innerHTML = '<span class="driver-continuation-mark">' + iconHtml("history") + '</span><div class="driver-continuation-context-copy"><span class="driver-continuation-kicker">INHERITED CONTEXT</span></div>';
+  var copy = card.querySelector(".driver-continuation-context-copy");
+  var title = document.createElement("strong");
+  title.textContent = msg.goal || "Continued Driver work";
+  var next = document.createElement("p");
+  next.textContent = "Next: " + (msg.nextAction || "Revalidate the current state and continue.");
+  var error = document.createElement("p");
+  error.className = "driver-continuation-error";
+  error.hidden = true;
+  var source = document.createElement("button");
+  source.type = "button";
+  source.className = "driver-continuation-source";
+  source.textContent = "Open original session";
+  source.addEventListener("click", function () {
+    sendRequest(key, "open_source", { type: "driver_continuation_open_source" });
+  });
+  copy.appendChild(title);
+  copy.appendChild(next);
+  copy.appendChild(error);
+  copy.appendChild(source);
+  addToMessages(card);
+  syncCard(card);
+  refreshIcons();
+}
+
+store.subscribe(function (state, previous) {
+  if (state.connected === previous.connected &&
+      state.driverContinuations === previous.driverContinuations) return;
+  if (state.connected === false && previous.connected === true) {
+    var current = states();
+    var keys = Object.keys(current);
+    for (var i = 0; i < keys.length; i++) {
+      if (current[keys[i]].inflight) fail(keys[i], current[keys[i]].requestId, "Connection lost before Clay confirmed the request. Try again after reconnecting.");
+    }
+  }
+  var cards = document.querySelectorAll("[data-driver-continuation-key]");
+  for (var j = 0; j < cards.length; j++) syncCard(cards[j]);
+});

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

@@ -46,10 +46,11 @@ 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">Ask</button>' +
-    '<button type="button" data-permission-mode="auto">Auto</button>' +
-    '<button type="button" data-permission-mode="bypassPermissions" aria-label="Skip permissions"><span class="permission-label-long">Skip permissions</span><span class="permission-label-short" aria-hidden="true">Skip</span></button>' +
+    '<button type="button" data-permission-mode="default"><span class="permission-label">Ask</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
+    '<button type="button" data-permission-mode="auto"><span class="permission-label">Auto</span><span class="permission-spinner" aria-hidden="true"></span></button>' +
+    '<button type="button" data-permission-mode="bypassPermissions" aria-label="Skip permissions" title="Skip permissions"><span class="permission-label-long permission-label">Skip permissions</span><span class="permission-label-short permission-label" aria-hidden="true">Skip</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;
 }
 
@@ -99,15 +100,19 @@ export function renderPermissionControl(control, state) {
   control.classList.toggle("permission-auto-unsupported", autoVisible && !autoSupported);
   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 buttons = control.querySelectorAll("[data-permission-mode]");
   for (var i = 0; i < buttons.length; i++) {
     var mode = buttons[i].dataset.permissionMode;
     var unsupported = mode === "auto" && autoVisible && !autoSupported;
+    var requested = !!pending && pending.mode === mode;
     buttons[i].hidden = mode === "auto" && !autoVisible;
     var selected = globallyForced ? mode === "bypassPermissions" : mode === state.permissionMode;
     buttons[i].disabled = globallyForced || unsupported || !!pending || !connected || state.locked === true;
     buttons[i].classList.toggle("active", selected);
+    buttons[i].classList.toggle("pending", requested);
     buttons[i].setAttribute("aria-pressed", selected ? "true" : "false");
+    buttons[i].setAttribute("aria-busy", requested ? "true" : "false");
     if (unsupported) buttons[i].title = "Auto permissions are unavailable for this Claude session.";
     else buttons[i].removeAttribute("title");
   }

package/lib/public/style.css

@@ -26,6 +26,7 @@
 @import url("css/loop.css");
 @import url("css/scheduler.css");
 @import url("css/project-logs.css");
+@import url("css/driver-continuation.css");
 @import url("css/scheduled-tasks.css");
 @import url("css/scheduler-modal.css");
 @import url("css/home-hub.css");