clay-server 4.2.0 → 4.3.0-beta.2

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/message-delivery-ui.js

@@ -0,0 +1,63 @@
+// message-delivery-ui.js - receipt recovery notices
+
+import { store } from './store.js';
+import { retryPendingMessage } from './message-delivery.js';
+
+var initialized = false;
+var rendered = {};
+var unsubscribe = null;
+
+function currentContext(receipt) {
+  var currentOriginId = store.get('sessionOriginId') || null;
+  return receipt && receipt.projectSlug === store.get('currentSlug') && String(receipt.sessionId) === String(store.get('activeSessionId')) && receipt.accountId === (store.get('myUserId') || "_default") && (!receipt.sessionOriginId || !currentOriginId || receipt.sessionOriginId === currentOriginId);
+}
+
+function renderReceipt(receipt) {
+  var messages = document.getElementById("messages");
+  if (!messages || !currentContext(receipt) || rendered[receipt.clientMessageId]) return;
+  var notice = document.createElement("div");
+  notice.className = "sys-msg error";
+  notice.dataset.deliveryReceipt = receipt.clientMessageId;
+  var text = document.createElement("span");
+  text.className = "sys-text";
+  text.textContent = "Receipt unconfirmed. Retry this message.";
+  notice.appendChild(text);
+  var retry = document.createElement("button");
+  retry.type = "button";
+  retry.className = "sys-retry";
+  retry.textContent = "Retry";
+  retry.addEventListener("click", function () { retryPendingMessage(receipt.clientMessageId); });
+  notice.appendChild(retry);
+  messages.appendChild(notice);
+  rendered[receipt.clientMessageId] = notice;
+}
+
+function sync(state) {
+  var receipts = state.deliveryReceipts || {};
+  Object.keys(rendered).forEach(function (id) {
+    if (!rendered[id].parentNode || !receipts[id] || !currentContext(receipts[id])) {
+      if (rendered[id] && rendered[id].parentNode) rendered[id].parentNode.removeChild(rendered[id]);
+      delete rendered[id];
+    }
+  });
+  Object.keys(receipts).forEach(function (id) { renderReceipt(receipts[id]); });
+}
+
+export function initMessageDeliveryUi() {
+  if (initialized) return;
+  initialized = true;
+  unsubscribe = store.subscribe(function (state, previous) {
+    if (state.deliveryReceipts !== previous.deliveryReceipts || state.currentSlug !== previous.currentSlug || state.activeSessionId !== previous.activeSessionId || state.sessionOriginId !== previous.sessionOriginId || state.myUserId !== previous.myUserId || state.replayingHistory !== previous.replayingHistory) sync(state);
+  });
+  sync(store.snap());
+}
+
+export function disposeMessageDeliveryUi() {
+  Object.keys(rendered).forEach(function (id) {
+    if (rendered[id] && rendered[id].parentNode) rendered[id].parentNode.removeChild(rendered[id]);
+  });
+  rendered = {};
+  if (unsubscribe) unsubscribe();
+  unsubscribe = null;
+  initialized = false;
+}

package/lib/public/modules/message-delivery.js

@@ -4,7 +4,10 @@ import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 
 var ACK_TIMEOUT_MS = 5000;
+var ACK_RETRY_LIMIT = 3;
 var ackTimers = {};
+var socketRefs = {};
+var activatedContext = null;
 
 function createClientMessageId() {
   if (window.crypto && typeof window.crypto.randomUUID === "function") {
@@ -21,6 +24,39 @@ function replacePending(messages) {
   store.set({ pendingOutboundMessages: messages });
 }
 
+function receipts() {
+  return store.get('deliveryReceipts') || {};
+}
+
+function setReceipt(entry) {
+  var next = Object.assign({}, receipts());
+  next[entry.payload.clientMessageId] = {
+    clientMessageId: entry.payload.clientMessageId,
+    projectSlug: entry.projectSlug,
+    sessionId: entry.sessionId,
+    accountId: entry.accountId,
+    sessionOriginId: entry.sessionOriginId || null,
+    attempts: entry.attempts
+  };
+  store.set({ deliveryReceipts: next });
+}
+
+function clearReceipt(clientMessageId) {
+  var current = receipts();
+  if (!current[clientMessageId]) return;
+  var next = Object.assign({}, current);
+  delete next[clientMessageId];
+  store.set({ deliveryReceipts: next });
+}
+
+function markUnconfirmed(entry) {
+  var unconfirmed = Object.assign({}, entry, { status: "unconfirmed" });
+  replacePending(pendingMessages().map(function (candidate) {
+    return candidate.payload.clientMessageId === entry.payload.clientMessageId ? unconfirmed : candidate;
+  }));
+  setReceipt(unconfirmed);
+}
+
 function clearAckTimer(clientMessageId) {
   if (!ackTimers[clientMessageId]) return;
   clearTimeout(ackTimers[clientMessageId]);
@@ -35,25 +71,92 @@ function isPending(clientMessageId) {
   return false;
 }
 
+function pendingEntry(clientMessageId) {
+  var pending = pendingMessages();
+  for (var i = 0; i < pending.length; i++) {
+    if (pending[i].payload.clientMessageId === clientMessageId) return pending[i];
+  }
+  return null;
+}
+
+function matchesCurrentContext(entry) {
+  return entry && entry.projectSlug === store.get('currentSlug') && String(entry.sessionId) === String(store.get('activeSessionId')) && entry.accountId === (store.get('myUserId') || "_default");
+}
+
+function hasAutomaticReplayIdentity(entry, socket) {
+  if (!activatedContext || activatedContext.socket !== socket) return false;
+  if (entry.sessionOriginId && activatedContext.sessionOriginId && entry.sessionOriginId !== activatedContext.sessionOriginId) return false;
+  if (entry.sessionOriginId && activatedContext.sessionOriginId && entry.sessionOriginId === activatedContext.sessionOriginId) return true;
+  if (entry.cliSessionId && activatedContext.cliSessionId) return entry.cliSessionId === activatedContext.cliSessionId;
+  return socketRefs[entry.payload.clientMessageId] === socket;
+}
+
+function hasKnownCliMismatch(entry) {
+  if (entry.sessionOriginId && activatedContext && activatedContext.sessionOriginId && entry.sessionOriginId === activatedContext.sessionOriginId) return false;
+  return !!entry.cliSessionId && !!activatedContext && !!activatedContext.cliSessionId && entry.cliSessionId !== activatedContext.cliSessionId;
+}
+
+function matchesActivatedContext(entry) {
+  var currentCliSessionId = store.get('cliSessionId') || null;
+  var sameOrigin = !!(entry.sessionOriginId && activatedContext && activatedContext.sessionOriginId && entry.sessionOriginId === activatedContext.sessionOriginId);
+  return !!activatedContext && activatedContext.socket === getWs() && matchesCurrentContext(entry) &&
+    activatedContext.projectSlug === store.get('currentSlug') && String(activatedContext.sessionId) === String(store.get('activeSessionId')) &&
+    activatedContext.accountId === (store.get('myUserId') || "_default") && (activatedContext.sessionOriginId || activatedContext.cliSessionId === currentCliSessionId) &&
+    (!entry.sessionOriginId || !activatedContext.sessionOriginId || entry.sessionOriginId === activatedContext.sessionOriginId) &&
+    (sameOrigin || !entry.cliSessionId || !activatedContext.cliSessionId || entry.cliSessionId === activatedContext.cliSessionId);
+}
+
 function armAckTimer(clientMessageId, socket) {
   clearAckTimer(clientMessageId);
   ackTimers[clientMessageId] = setTimeout(function () {
     delete ackTimers[clientMessageId];
     if (!isPending(clientMessageId) || getWs() !== socket) return;
+    var entry = pendingEntry(clientMessageId);
+    if (!matchesActivatedContext(entry)) return;
     window.dispatchEvent(new CustomEvent("clay-message-delivery-timeout", {
       detail: { socket: socket, clientMessageId: clientMessageId },
     }));
+    var attempts = entry.attempts || 0;
+    if (attempts < ACK_RETRY_LIMIT && entry && socket.readyState === 1) {
+      var nextEntry = Object.assign({}, entry, { attempts: attempts + 1 });
+      replacePending(pendingMessages().map(function (candidate) {
+        return candidate.payload.clientMessageId === clientMessageId ? nextEntry : candidate;
+      }));
+      transmit(nextEntry, false);
+      return;
+    }
+    if (attempts >= ACK_RETRY_LIMIT) {
+      markUnconfirmed(entry);
+      return;
+    }
   }, ACK_TIMEOUT_MS);
 }
 
-function transmit(entry) {
+function transmit(entry, automatic) {
   var socket = getWs();
-  if (!socket || socket.readyState !== 1) return false;
+  if (!matchesCurrentContext(entry) || !socket || socket.readyState !== 1) return false;
+  if (automatic && entry.status === "unconfirmed") return false;
+  if (automatic && !hasAutomaticReplayIdentity(entry, socket)) {
+    markUnconfirmed(entry);
+    return false;
+  }
+  if (automatic) {
+    if ((entry.attempts || 0) >= ACK_RETRY_LIMIT) {
+      markUnconfirmed(entry);
+      return false;
+    }
+    entry = Object.assign({}, entry, { attempts: (entry.attempts || 0) + 1 });
+    replacePending(pendingMessages().map(function (candidate) {
+      return candidate.payload.clientMessageId === entry.payload.clientMessageId ? entry : candidate;
+    }));
+  }
+  socketRefs[entry.payload.clientMessageId] = socket;
   try {
     socket.send(JSON.stringify(entry.payload));
     armAckTimer(entry.payload.clientMessageId, socket);
     return true;
   } catch (e) {
+    markUnconfirmed(entry);
     return false;
   }
 }
@@ -63,10 +166,22 @@ export function sendAcknowledgedMessage(payload) {
   var entry = {
     projectSlug: store.get('currentSlug'),
     sessionId: store.get('activeSessionId'),
+    accountId: store.get('myUserId') || "_default",
+    cliSessionId: store.get('cliSessionId') || null,
+    sessionOriginId: store.get('sessionOriginId') || null,
+    attempts: 0,
+    status: "pending",
     payload: nextPayload,
   };
+  nextPayload.projectSlug = entry.projectSlug;
+  nextPayload.sessionId = entry.sessionId;
+  nextPayload.accountId = entry.accountId;
+  nextPayload.cliSessionId = entry.cliSessionId;
+  nextPayload.sessionOriginId = entry.sessionOriginId;
+  entry.payload = nextPayload;
   replacePending(pendingMessages().concat([entry]));
-  if (!transmit(entry)) {
+  if (!transmit(entry, false)) {
+    if (!getWs() || getWs().readyState !== 1) markUnconfirmed(entry);
     window.dispatchEvent(new CustomEvent("clay-message-delivery-timeout", {
       detail: { socket: getWs(), clientMessageId: nextPayload.clientMessageId },
     }));
@@ -74,6 +189,21 @@ export function sendAcknowledgedMessage(payload) {
   return nextPayload.clientMessageId;
 }
 
+export function retryPendingMessage(clientMessageId) {
+  var entry = pendingEntry(clientMessageId);
+  if (!matchesActivatedContext(entry) || hasKnownCliMismatch(entry)) return false;
+  var retryEntry = Object.assign({}, entry, { attempts: 0, status: "pending" });
+  replacePending(pendingMessages().map(function (candidate) {
+    return candidate.payload.clientMessageId === clientMessageId ? retryEntry : candidate;
+  }));
+  if (transmit(retryEntry, false)) {
+    clearReceipt(clientMessageId);
+    return true;
+  }
+  markUnconfirmed(retryEntry);
+  return false;
+}
+
 export function acknowledgeMessage(clientMessageId) {
   if (typeof clientMessageId !== "string") return null;
   var pending = pendingMessages();
@@ -82,9 +212,14 @@ export function acknowledgeMessage(clientMessageId) {
     if (entry.payload.clientMessageId === clientMessageId) acknowledged = entry;
     return entry.payload.clientMessageId !== clientMessageId;
   });
-  if (next.length === pending.length) return null;
+  if (next.length === pending.length) {
+    clearReceipt(clientMessageId);
+    return null;
+  }
   clearAckTimer(clientMessageId);
   replacePending(next);
+  delete socketRefs[clientMessageId];
+  clearReceipt(clientMessageId);
   return acknowledged;
 }
 
@@ -92,8 +227,30 @@ export function replayPendingMessages(sessionId) {
   var pending = pendingMessages();
   var projectSlug = store.get('currentSlug');
   for (var i = 0; i < pending.length; i++) {
-    if (pending[i].projectSlug === projectSlug && pending[i].sessionId === sessionId) {
-      transmit(pending[i]);
+    if (pending[i].projectSlug === projectSlug && String(pending[i].sessionId) === String(sessionId) && matchesCurrentContext(pending[i])) {
+      transmit(pending[i], true);
     }
   }
 }
+
+export function activateDeliverySession(sessionId, cliSessionId, sessionOriginId) {
+  var socket = getWs();
+  activatedContext = {
+    socket: socket,
+    projectSlug: store.get('currentSlug'),
+    sessionId: sessionId,
+    accountId: store.get('myUserId') || "_default",
+    cliSessionId: cliSessionId || null,
+    sessionOriginId: sessionOriginId || null
+  };
+  replayPendingMessages(sessionId);
+}
+
+export function refreshDeliverySessionIdentity(cliSessionId, sessionOriginId) {
+  if (!activatedContext || activatedContext.socket !== getWs()) return false;
+  if (activatedContext.projectSlug !== store.get('currentSlug') || String(activatedContext.sessionId) !== String(store.get('activeSessionId')) || activatedContext.accountId !== (store.get('myUserId') || "_default")) return false;
+  if (activatedContext.sessionOriginId && sessionOriginId && activatedContext.sessionOriginId !== sessionOriginId) return false;
+  activatedContext.cliSessionId = cliSessionId || null;
+  if (!activatedContext.sessionOriginId && sessionOriginId) activatedContext.sessionOriginId = sessionOriginId;
+  return true;
+}

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");
   }