clay-server 5.5.0-beta.2 → 5.5.0-beta.3

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

@@ -1,3 +1,4 @@
+import { activateSettingsSections, deactivateSettingsSections } from './settings-section-nav.js';
 // Unified full-screen settings: one shell for Personal, Project and Server
 // settings. Scope modules register a controller; the shell owns routing,
 // access, project target binding, focus, close restoration and draft guards.
@@ -134,6 +135,7 @@ function applyRoute(route, focus) {
   var resolved = resolveRoute(route, shell.access);
   var ctrl = controllers[resolved.scope];
   if (!ctrl) return;
+  deactivateSettingsSections();
   if (shell.scope && shell.scope !== resolved.scope && controllers[shell.scope].leave) controllers[shell.scope].leave();
   var entering = shell.scope !== resolved.scope;
   shell.scope = resolved.scope;
@@ -152,7 +154,8 @@ function applyRoute(route, focus) {
   markActivePage(page);
   store.set({ settingsLastRoute: { scope: resolved.scope, page: page, slug: shell.slug } });
   enhanceSettingsSelects(root); refreshIcons(root);
-  if (focus) focusHeading(ctrl);
+  if (focus && !resolved.anchor) focusHeading(ctrl);
+  activateSettingsSections(page, resolved.anchor);
 }
 
 function onScopeSelect(scope) {
@@ -160,12 +163,18 @@ function onScopeSelect(scope) {
   guard('scope', function () { applyRoute({ scope: scope, page: shell.pages[scope], slug: scope === 'project' ? currentRoute().slug : null }, true); });
 }
 function onPageSelect(page) {
-  if (page === shell.pages[shell.scope]) { focusHeading(controller()); return; }
+  var route = resolveRoute({scope:shell.scope,page:page}, shell.access);
+  if (route.page === shell.pages[shell.scope]) {
+    if (!route.anchor) focusHeading(controller());
+    activateSettingsSections(route.page, route.anchor); return;
+  }
   guard('page', function () {
     var ctrl = controller();
-    shell.pages[shell.scope] = page; ctrl.activate(page, { access: shell.access, scope: shell.scope });
-    markActivePage(page); store.set({ settingsLastRoute: { scope: shell.scope, page: page, slug: shell.slug } });
-    focusHeading(ctrl);
+    deactivateSettingsSections();
+    shell.pages[shell.scope] = route.page; ctrl.activate(route.page, {access:shell.access,scope:shell.scope});
+    markActivePage(route.page); store.set({settingsLastRoute:{scope:shell.scope,page:route.page,slug:shell.slug}});
+    if (!route.anchor) focusHeading(ctrl);
+    activateSettingsSections(route.page, route.anchor);
   }, shell.pages[shell.scope]);
 }
 // A project switch retargets only the settings view, never the workspace.
@@ -181,7 +190,8 @@ export function navigateSettings(route) {
   var resolved = resolveRoute(route, shell.access);
   if (resolved.scope === shell.scope && resolved.page === shell.pages[shell.scope] && (resolved.scope !== 'project' || !route.slug || route.slug === shell.slug)) {
     setShellStatus(redirectNote(resolved), resolved.redirected ? 'error' : undefined);
-    focusHeading(controller()); return;
+    if (!resolved.anchor) focusHeading(controller());
+    activateSettingsSections(resolved.page, resolved.anchor); return;
   }
   guard(resolved.scope === shell.scope ? (route.slug && route.slug !== shell.slug ? 'project' : 'page') : 'scope', function () { applyRoute(route, true); }, shell.pages[shell.scope]);
 }
@@ -251,6 +261,7 @@ export function closeSettings(opts) {
   function finish() {
     shell.token += 1; binding.invalidate();
     var ctrl = controller();
+    deactivateSettingsSections();
     if (ctrl && ctrl.leave) ctrl.leave();
     Object.keys(controllers).forEach(function (id) { if (controllers[id].close) controllers[id].close(); });
     root.classList.add('hidden');

package/lib/public/modules/sidebar-projects.js

@@ -1,3 +1,4 @@
+import { reviewWorktreeRemoval } from './worktree-controls.js';
 // sidebar-projects.js - Project icon strip, context menus, emoji picker, drag-and-drop, worktree modal
 // Extracted from sidebar.js (PR-36)
 
@@ -433,8 +434,9 @@ export function showProjectCtxMenu(anchorEl, slug, name, icon, position, options
   }
 
   var isWorktree = slug.indexOf("--") !== -1;
-  var canRemoveTarget = !isWorktree || options.canRemoveWorktree !== false;
-  var canDeleteTarget = canRemoveTarget && (!store.get('permissions') || store.get('permissions').deleteProject !== false);
+  var ownsWorktree = !isWorktree || !store.get('isMultiUserMode') || !!(targetProject && targetProject.projectOwnerId === store.get('myUserId'));
+  if (!ownsWorktree) iconItem.disabled = true;
+  var canDeleteTarget = ownsWorktree && (!store.get('permissions') || store.get('permissions').deleteProject !== false);
   if (!isWorktree || canDeleteTarget) {
     var sep2 = document.createElement("div");
     sep2.className = "project-ctx-separator";
@@ -465,15 +467,26 @@ export function showProjectCtxMenu(anchorEl, slug, name, icon, position, options
     var deleteItem = document.createElement("button");
     deleteItem.className = "project-ctx-item project-ctx-delete";
     deleteItem.setAttribute("role", "menuitem");
-    deleteItem.innerHTML = iconHtml("trash-2") + " <span>" + (isWorktree ? "Remove Worktree" : "Remove Project") + "</span>";
+    deleteItem.innerHTML = iconHtml("trash-2") + " <span>" + (isWorktree ? "Exclude worktree (keep files)" : "Remove Project") + "</span>";
     deleteItem.addEventListener("click", function (e) {
       e.stopPropagation();
       closeProjectCtxMenu();
-      if (getWs() && store.get('connected')) {
+      if (isWorktree) reviewWorktreeRemoval(slug, "exclude", anchorEl);
+      else if (getWs() && store.get('connected')) {
         getWs().send(JSON.stringify({ type: "remove_project_check", slug: slug, name: name }));
       }
     });
     menu.appendChild(deleteItem);
+    if (isWorktree) {
+      var diskItem = document.createElement("button");
+      diskItem.className = "project-ctx-item project-ctx-delete";
+      diskItem.setAttribute("role", "menuitem");
+      diskItem.innerHTML = iconHtml("trash-2") + " <span>Delete worktree…</span>";
+      diskItem.addEventListener("click", function (event) {
+        event.stopPropagation(); closeProjectCtxMenu(); reviewWorktreeRemoval(slug, "delete", anchorEl);
+      });
+      menu.appendChild(diskItem);
+    }
   }
 
   document.body.appendChild(menu);
@@ -1103,7 +1116,7 @@ export function renderIconStrip(projects, currentSlug) {
         } else {
           var abbrev = document.createElement("span");
           abbrev.className = "wt-branch-abbrev";
-          abbrev.textContent = getProjectAbbrev(wt.name);
+          abbrev.innerHTML = iconHtml("git-branch");
           wtEl.appendChild(abbrev);
         }
 
@@ -1124,13 +1137,13 @@ export function renderIconStrip(projects, currentSlug) {
           });
         })(wt.slug);
 
-        (function (slug, name, elem, external) {
+        (function (slug, name, elem) {
           elem.addEventListener("contextmenu", function (e) {
             e.preventDefault();
             e.stopPropagation();
-            showProjectCtxMenu(elem, slug, name, null, null, { shareTargetSlug: true, canRemoveWorktree: !external });
+            showProjectCtxMenu(elem, slug, name, null, null, { shareTargetSlug: true });
           });
-        })(wt.slug, wt.name, wtEl, isExternal);
+        })(wt.slug, wt.name, wtEl);
 
         if (!isWtActive && (wt.pendingPermissions > 0 || getPendingTuiAttention(wt.slug) > 0)) {
           wtEl.classList.add("has-pending-perm");
@@ -1250,7 +1263,8 @@ function createMobileProjectItem(p, currentSlug, isWorktree) {
     abbrev.textContent = p.icon;
     parseEmojis(abbrev);
   } else {
-    abbrev.textContent = getProjectAbbrev(p.name);
+    if (p.isWorktree) abbrev.innerHTML = iconHtml("git-branch");
+    else abbrev.textContent = getProjectAbbrev(p.name);
   }
   el.appendChild(abbrev);
 

package/lib/public/modules/split-pane-force-stop.js

@@ -0,0 +1,47 @@
+import { iconHtml } from './icons.js';
+import { livePaneBinding, samePaneBinding } from './pane-binding.js';
+import { syncPaneHeaderState } from './split-pane-header-state.js';
+import { showConfirm, hideConfirm } from './app-misc.js';
+
+export function createPaneForceStop(paneEl, frame) {
+  var button = document.createElement('button');
+  button.type = 'button'; button.className = 'split-pane-force-stop';
+  button.setAttribute('aria-label', 'Force stop session'); button.title = 'Force stop session and all its Workers';
+  button.innerHTML = iconHtml('power');
+  button.addEventListener('click', function (event) {
+    event.stopPropagation();
+    if (!syncPaneHeaderState(paneEl) || button.disabled || !frame.contentWindow || !frame.clayPane || !livePaneBinding(frame)) return;
+    var binding = frame.clayPane.identity().binding, sourceDocument = frame.contentDocument, settled = false;
+    var title = paneEl.querySelector('.split-pane-title');
+    var text = 'Force stop all work in ' + (title && title.textContent || 'this session') + ' and all of its Workers? Queued messages will be paused. The pane and conversation history will stay open. Commands or external requests already sent may still be running.';
+    function current() {
+      return paneEl.isConnected && !paneEl.hidden && !paneEl.inert && frame.contentDocument === sourceDocument &&
+        syncPaneHeaderState(paneEl) && !button.disabled && livePaneBinding(frame, { paneBinding: binding }) && samePaneBinding(binding, frame.clayPane.identity().binding);
+    }
+    var modal = document.getElementById('confirm-modal'), panel = modal && modal.querySelector('.confirm-dialog');
+    var cancel = document.getElementById('confirm-cancel'), ok = document.getElementById('confirm-ok');
+    function cleanup() {
+      settled = true;
+      window.removeEventListener('keydown', onKey, true);
+      if (panel) { panel.removeAttribute('role'); panel.removeAttribute('aria-modal'); panel.removeAttribute('aria-labelledby'); }
+      if (current()) button.focus();
+    }
+    function onKey(event) {
+      if (event.key === 'Escape') { event.preventDefault(); event.stopImmediatePropagation(); hideConfirm(); return; }
+      if (event.key !== 'Tab') return;
+      event.preventDefault(); event.stopImmediatePropagation();
+      var controls = [cancel, ok].filter(Boolean), index = controls.indexOf(document.activeElement);
+      controls[(index + (event.shiftKey ? controls.length - 1 : 1)) % controls.length].focus();
+    }
+    showConfirm(text, function () {
+      if (settled) return;
+      var valid = current(); cleanup();
+      if (!valid) return;
+      frame.contentWindow.postMessage({ type: 'clay-pane-force-stop', paneBinding: binding }, window.location.origin);
+    }, 'Force stop all work', true, cleanup);
+    if (panel) { panel.setAttribute('role', 'dialog'); panel.setAttribute('aria-modal', 'true'); panel.setAttribute('aria-labelledby', 'confirm-text'); }
+    window.addEventListener('keydown', onKey, true);
+    if (cancel) cancel.focus();
+  });
+  return button;
+}

package/lib/public/modules/split-pane-header-state.js

@@ -20,7 +20,7 @@ export function syncPaneHeaderState(paneEl) {
   header.setAttribute('aria-busy', ready ? 'false' : 'true');
   header.dataset.paneLoading = ready ? 'false' : 'true';
   header.inert = !ready;
-  var actions = header.querySelectorAll('.split-pane-info, .split-pane-search, .split-pane-context, .split-pane-sidebar, .split-view-arrange-trigger');
+  var actions = header.querySelectorAll('.split-pane-info, .split-pane-force-stop, .split-pane-search, .split-pane-context, .split-pane-sidebar, .split-view-arrange-trigger');
   for (var i = 0; i < actions.length; i++) {
     var action = actions[i];
     if (!ready) {
@@ -31,6 +31,16 @@ export function syncPaneHeaderState(paneEl) {
       delete action.dataset.panePriorDisabled;
     }
   }
+  var force = header.querySelector('.split-pane-force-stop');
+  if (force) {
+    var session = getCachedSessions().find(function (item) { return item.id === Number(paneEl.dataset.sessionId); });
+    var support = session && session.forceTermination;
+    var reason = support && support.reason || 'Force termination is not yet supported for this vendor';
+    force.disabled = !ready || !support || support.supported !== true;
+    force.title = support && support.supported === true ? 'Force stop session and all its Workers' : reason;
+    force.setAttribute('aria-label', 'Force stop session' + (support && support.supported === true ? '' : ': ' + reason));
+    force.setAttribute('aria-disabled', force.disabled ? 'true' : 'false');
+  }
   var close = paneEl.querySelector('.split-pane-close');
   if (close) {
     var host = paneEl.parentNode;

package/lib/public/modules/split-pane-renderer.js

@@ -1,3 +1,4 @@
+import { createPaneForceStop } from './split-pane-force-stop.js';
 import { renderPaneRuntime } from './split-pane-runtime.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
@@ -201,7 +202,6 @@ function createPaneSearchPopover(paneEl, frame, searchButton) {
     throw error;
   }
 }
-
 export function handlePaneSearchMessage(event, host) {
   var frames = host ? host.querySelectorAll(".split-pane-frame") : [];
   for (var i = 0; i < frames.length; i++) {
@@ -287,7 +287,6 @@ function isConfiguredWorker(groups, sessionId) {
 export function updatePaneFullAccessButton(button, session) {
   if (button) renderPermissionControl(button, permissionState(session));
 }
-
 export function createSplitPane(pane, closePane) {
   var paneEl = document.createElement("section"); paneEl.className = "split-pane";
   var header = document.createElement("header"); header.className = "split-pane-header"; header.title = pane.title;
@@ -345,6 +344,7 @@ export function createSplitPane(pane, closePane) {
   }); header.appendChild(sidebarButton);
   var search = document.createElement("button"); search.type = "button"; search.className = "split-pane-search"; search.setAttribute("aria-label", "Search this session"); search.title = "Search this session"; search.innerHTML = iconHtml("search");
   header.insertBefore(search, close);
+  header.insertBefore(createPaneForceStop(paneEl, frame), close);
   function refreshReadyHeader() {
     if (paneEl.classList.contains('split-pane-cached')) return;
     var id = Number(frame.dataset.requestedSessionId || frame.dataset.sessionId), current = sessionById(id);

package/lib/public/modules/split-view-workers.js

@@ -1,3 +1,5 @@
+import { appendWorkerStopControls, syncWorkerForceStop } from './worker-stop-controls.js';
+import { createWorkerActivityIndicator, syncWorkerActivityIndicator, setWorkerActivityRuntime } from './worker-activity-indicator.js';
 import { syncWorkerMessagePreviews } from './worker-message-previews.js';
 import { appendWorkerRemoval, reconcileWorkerRemoval } from './split-view-worker-removal.js';
 import { workerCursorKey, workerCursorAdvances, shouldLoadWorkerPage, captureWorkerAnchor, restoreWorkerAnchor } from './split-view-worker-scroll.js';
@@ -52,14 +54,14 @@ function presentationSource(container, driver, connectionErrorBinding) {
   var inSingleton = !view && store.get('projectSplitViewSingletonOrigin') === driver.sessionOriginId;
   return inView || inSingleton ? { frame: frame, live: live, binding: binding, view: view, singleton: inSingleton } : null;
 }
-export function workerRemovalTarget(container, driverOrigin, workerOrigin, generation) {
+export function workerRemovalTarget(container, driverOrigin, workerOrigin, generation, stopping) {
   var driver = exactDriver(driverOrigin), worker = exactWorker(driver, workerOrigin, generation);
   var source = presentationSource(container, driver);
   if (!worker || worker.hidden || !driver || driver.hidden || (driver.ownerId || null) !== (store.get('myUserId') || null) ||
       document.hidden || !source || !store.get('connected') || !container.isConnected || container.hidden || container.inert ||
-      source.frame.hidden || source.frame.inert || store.get('permissions') && store.get('permissions').sessionDelete === false) return null;
+      source.frame.hidden || source.frame.inert || !stopping && store.get('permissions') && store.get('permissions').sessionDelete === false) return null;
   return { projectSlug: store.get('currentSlug'), ownerId: store.get('myUserId') || null, driverId: driver.id,
-    driverOriginId: driverOrigin, workerId: worker.id, workerOriginId: workerOrigin, generation: generation,
+    driverOriginId: driverOrigin, workerId: worker.id, workerOriginId: workerOrigin, generation: generation, forceTermination: worker.forceTermination,
     bindingGeneration: source.binding.generation, bindingRequestId: source.binding.requestId,
     viewRevision: store.get('projectSplitViewRevision'), socketGeneration: store.get('projectSplitViewSocketGeneration') };
 }
@@ -204,6 +206,12 @@ function ensurePopover() {
     element.setAttribute("role", "dialog"); element.setAttribute("aria-label", "Read-only Worker conversation"); document.body.appendChild(element);
     var header = document.createElement("header"); header.className = "split-view-worker-popover-header";
     var title = document.createElement("strong"); title.className = "worker-popover-title"; header.appendChild(title);
+    appendWorkerStopControls(header, function () {
+      var state = store.get('splitViewWorkerConversation');
+      if (!state || state.status === 'error') return null;
+      var pane = document.querySelector('.split-pane[data-session-origin="' + CSS.escape(state.driverOriginId) + '"]');
+      return workerRemovalTarget(pane, state.driverOriginId, state.workerOriginId, state.generation, true);
+    });
     var closeButton = document.createElement("button"); closeButton.type = "button"; closeButton.setAttribute("aria-label", "Close Worker conversation"); closeButton.innerHTML = iconHtml("x");
     closeButton.addEventListener("click", function () { close(true); }); header.appendChild(closeButton); element.appendChild(header);
     var source = document.createElement("div"); source.className = "split-view-worker-popover-source"; element.appendChild(source);
@@ -227,6 +235,9 @@ function ensurePopover() {
     body.addEventListener('touchstart', scrollIntent, { passive: true });
     var footer = document.createElement("footer"); footer.className = "split-view-worker-popover-footer"; element.appendChild(footer);
   }
+  syncWorkerForceStop(element, worker);
+  var stopButtons = element.querySelectorAll('.worker-conversation-stop');
+  for (var i = 0; i < stopButtons.length; i++) stopButtons[i].disabled = stopButtons[i].dataset.workerForceStop === 'true' && stopButtons[i].disabled || !store.get('connected') || state.status === 'error';
   return element;
 }
 function renderContent() {
@@ -330,9 +341,9 @@ export function handleWorkerConversationChanged(message) {
       message.subscriptionId !== state.subscriptionId || message.parentSessionOriginId !== state.driverOriginId ||
       message.workerSessionOriginId !== state.workerOriginId || message.generation !== state.generation || !ensurePopover()) return false;
   document.querySelectorAll('.split-view-worker-chip').forEach(function (chip) {
-    if (chip.dataset.workerOrigin === state.workerOriginId) {
-      var dot = chip.querySelector('.split-view-worker-dot');
-      if (dot) dot.dataset.state = message.isProcessing ? 'working' : 'ready';
+    if (chip.dataset.workerParent === state.driverOriginId && chip.dataset.workerOrigin === state.workerOriginId && Number(chip.dataset.workerGeneration) === state.generation) {
+      setWorkerActivityRuntime(chip.dataset.messagePreview, message.isProcessing === true);
+      syncWorkerActivityIndicator(chip, { isProcessing: message.isProcessing === true });
     }
   });
   refreshWorkerConversation();
@@ -341,11 +352,6 @@ export function handleWorkerConversationChanged(message) {
 export function handleWorkerSessionActivity(message) {
   var worker = sessions().find(function (item) { return item.id === message.id && item.sessionRole === 'worker'; });
   if (!worker || !store.get('connected')) return;
-  document.querySelectorAll('.split-view-worker-chip').forEach(function (chip) {
-    if (chip.dataset.workerOrigin !== worker.sessionOriginId) return;
-    var dot = chip.querySelector('.split-view-worker-dot');
-    if (dot) { dot.dataset.state = 'working'; dot.setAttribute('aria-label', 'Worker activity received'); }
-  });
   var state = store.get('splitViewWorkerConversation');
   if (state && state.workerOriginId === worker.sessionOriginId && state.generation === worker.workerGeneration) refreshWorkerConversation();
 }
@@ -359,8 +365,12 @@ export function renderPaneWorkers(container, driver) {
   var source = presentationSource(container, driver);
   root.hidden = !source || data.items.length === 0;
   if (!source) { if (store.get('splitViewWorkerConversation') && store.get('splitViewWorkerConversation').driverOriginId === driver.sessionOriginId) ensurePopover(); return; }
-  root.textContent = "";
-  data.items.forEach(function (worker) {
+  var signature = JSON.stringify([store.get('myUserId'), store.get('currentSlug'), driver.sessionOriginId, driver.title, store.get('projectSplitViewSocketGeneration'), data.items.map(function (worker) {
+    return [worker.id, worker.sessionOriginId, worker.workerGeneration, worker.vendor, worker.model, worker.title, data.currentIds.has(worker.id)];
+  })]);
+  var rebuild = root.dataset.workerSignature !== signature;
+  if (rebuild) { root.textContent = ''; root.dataset.workerSignature = signature; }
+  if (rebuild) data.items.forEach(function (worker) {
     var pill = document.createElement("span"); pill.className = "split-view-worker-pill";
     var button = document.createElement("button"); button.type = "button"; button.className = "split-view-worker-chip";
     button.dataset.workerParent = driver.sessionOriginId; button.dataset.workerOrigin = worker.sessionOriginId; button.dataset.workerGeneration = String(worker.workerGeneration);
@@ -369,8 +379,7 @@ export function renderPaneWorkers(container, driver) {
     button.title = (VENDOR_NAMES[worker.vendor] || worker.vendor || "Unknown vendor") + " · " + modelLabel + " · Split Worker #" + worker.id +
       (current ? "" : " · Archived · Gen " + worker.workerGeneration) + " · " + (worker.title || "Worker");
     button.setAttribute("aria-label", button.title + " conversation");
-    var dot = document.createElement("span"); dot.className = "split-view-worker-dot"; dot.dataset.state = !store.get('connected') ? 'disconnected' : worker.isProcessing ? 'working' : 'ready';
-    dot.setAttribute('aria-label', !store.get('connected') ? 'Disconnected' : worker.isProcessing ? 'Worker is working' : 'Worker is idle');
+    var dot = createWorkerActivityIndicator();
     if (VENDOR_AVATARS[worker.vendor]) {
       var vendorIcon = document.createElement("img"); vendorIcon.className = "split-view-worker-vendor";
       vendorIcon.src = VENDOR_AVATARS[worker.vendor]; vendorIcon.alt = ""; vendorIcon.setAttribute("aria-hidden", "true"); button.appendChild(vendorIcon);
@@ -389,8 +398,15 @@ export function renderPaneWorkers(container, driver) {
     button.addEventListener("click", function () { if (presentationSource(container, exactDriver(driver.sessionOriginId))) open(button, driver, worker); }); pill.appendChild(button); root.appendChild(pill);
     appendWorkerRemoval(pill, button, container, driver, worker);
   });
+  root.querySelectorAll('.split-view-worker-chip').forEach(function (chip) {
+    var worker = data.items.find(function (item) { return item.sessionOriginId === chip.dataset.workerOrigin; });
+    syncWorkerActivityIndicator(chip, worker);
+    var conversation = store.get('splitViewWorkerConversation');
+    chip.setAttribute('aria-expanded', conversation && conversation.driverOriginId === driver.sessionOriginId && conversation.workerOriginId === chip.dataset.workerOrigin ? 'true' : 'false');
+  });
   introduceWorkerViewer(container, driver);
   syncWorkerMessagePreviews();
+  if (rebuild) refreshIcons();
   var conversation = store.get('splitViewWorkerConversation');
   if (conversation) ensurePopover();
 }
@@ -417,8 +433,7 @@ store.subscribe(function (state, previous) {
   if (state.paneBindingSessions !== previous.paneBindingSessions || state.connected !== previous.connected) {
     document.querySelectorAll('.split-view-worker-chip').forEach(function (chip) {
       var worker = sessions().find(function (item) { return item.sessionOriginId === chip.dataset.workerOrigin; });
-      var dot = chip.querySelector('.split-view-worker-dot');
-      if (dot) dot.dataset.state = !state.connected ? 'disconnected' : worker && worker.isProcessing ? 'working' : 'ready';
+      syncWorkerActivityIndicator(chip, worker);
     });
     if (state.connected && state.splitViewWorkerConversation) refreshWorkerConversation();
   }

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

@@ -1,3 +1,4 @@
+import { getWs } from './ws-ref.js';
 import { store } from './store.js';
 import { stopSTT } from './stt-controller.js';
 export var speechLanguages = [
@@ -16,35 +17,51 @@ export function voiceProvider(id) {
   var settings = store.get('speechSettings');
   return settings && settings.providers.find(function (provider) { return provider.id === id; });
 }
+function context() { return JSON.stringify([store.get('myUserId'), store.get('speechSettingsContextGeneration')]); }
+function lostAccess() {
+  store.set({speechPopup:null,speechRetry:null,speechSettings:null,speechSettingsSaving:false,speechSettingsError:'Sign in again to manage audio transcription keys.',speechSettingsContextGeneration:(store.get('speechSettingsContextGeneration') || 0)+1,speechSettingsRequest:(store.get('speechSettingsRequest') || 0)+1});
+}
 export async function loadSpeechSettings() {
   if (store.get('speechSettingsSaving')) return;
+  var actor = context(), socket = getWs();
   var request = (store.get('speechSettingsRequest') || 0) + 1;
   store.set({ speechSettingsRequest: request });
   try {
     var response = await fetch('/api/speech/settings');
+    if ((response.status === 401 || response.status === 403) && actor === context() && socket === getWs() && store.get('speechSettingsRequest') === request) { lostAccess(); return; }
     if (!response.ok) throw new Error('Voice settings unavailable. Please try again.');
     var settings = await response.json();
-    if (store.get('speechSettingsRequest') !== request) return;
+    if (actor !== context() || socket !== getWs() || store.get('speechSettingsRequest') !== request) return;
     var previous = store.get('speechSettings');
     if ((previous && JSON.stringify(previous) !== JSON.stringify(settings)) ||
         (!previous && settings.selected !== 'browser')) stopSTT();
     if (!previous || JSON.stringify(previous) !== JSON.stringify(settings)) store.set({ speechSettings: settings, speechLang: settings.language || 'en-US', speechSettingsError: '' });
     else if (store.get('speechSettingsError')) store.set({ speechSettingsError: '' });
-  } catch (error) { if (store.get('speechSettingsRequest') === request) store.set({ speechSettingsError: 'Voice settings unavailable. Please try again.' }); }
+  } catch (error) { if (actor === context() && socket === getWs() && store.get('speechSettingsRequest') === request) store.set({ speechSettingsError: 'Voice settings unavailable. Please try again.' }); }
 }
 export async function saveSpeechSettings(change) {
   if (store.get('speechSettingsSaving')) throw new Error('Voice settings are being saved. Please wait.');
+  var actor = context(), socket = getWs(), request = (store.get('speechSettingsRequest') || 0) + 1;
   stopSTT();
-  store.set({ speechRetry: null, speechSettingsSaving: true, speechSettingsRequest: (store.get('speechSettingsRequest') || 0) + 1 });
+  store.set({ speechRetry: null, speechSettingsSaving: true, speechSettingsRequest: request });
   try {
     var response = await fetch('/api/speech/settings', { method: 'PUT', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(change) });
     var result = await response.json();
+    if (actor !== context() || socket !== getWs() || store.get('speechSettingsRequest') !== request) throw new Error('Account or connection changed. Reopen API connections.');
+    if (response.status === 401 || response.status === 403) { lostAccess(); throw new Error('Sign in again to manage audio transcription keys.'); }
     if (!response.ok) throw new Error(result.error || 'Could not save voice settings.');
     store.set({ speechSettings: result, speechLang: result.language || 'en-US', speechSettingsError: '' });
-  } finally { store.set({ speechSettingsSaving: false }); }
+  } finally { if (actor === context() && store.get('speechSettingsRequest') === request) store.set({ speechSettingsSaving: false }); }
   try { window.top.document.dispatchEvent(new window.top.Event('clay:speech-settings-saved')); } catch (error) { /* Standalone host. */ }
 }
 export async function saveSpeechLanguage(code) {
   await saveSpeechSettings({ language: code });
   window.dispatchEvent(new CustomEvent('clay:speech-language-saved', { detail: code }));
 }
+
+store.subscribe(function (state, previous) {
+  if (state.myUserId !== previous.myUserId || state.projectSplitViewSocketGeneration !== previous.projectSplitViewSocketGeneration || state.currentSlug !== previous.currentSlug || state.connected === false && previous.connected !== false) {
+    stopSTT();
+    store.set({speechPopup:null,speechRetry:null,speechSettings:null,speechSettingsSaving:false,speechSettingsError:state.connected === false ? 'Reconnect before loading audio transcription providers.' : 'Account or connection changed. Reload providers to continue.',speechSettingsContextGeneration:(state.speechSettingsContextGeneration || 0)+1,speechSettingsRequest:(state.speechSettingsRequest || 0)+1});
+  }
+});

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

@@ -1,3 +1,4 @@
+import { initPersonalProviders, loadPersonalProviders, leavePersonalProviders } from './user-settings-providers.js';
 import { initPersonalIntegrations, loadPersonalIntegrations } from './user-settings-integrations.js';
 import { getWs } from './ws-ref.js';
 import { store } from './store.js';
@@ -20,13 +21,14 @@ export function buildUserSettingsLayout() {
   var push=document.getElementById('settings-notif-push').closest('label');
   heading(notifications,'This device','Browser permission and push delivery are configured separately on each browser.');notifications.appendChild(push);
   var accountNotifications=document.createElement('h3');accountNotifications.textContent='Account preferences';notifications.querySelector('.settings-card').before(accountNotifications);
-  var chat = section('us-chat'); chat.querySelector('h2').textContent = 'Conversation';
-  var voice = document.getElementById('us-lang-select').closest('.settings-card');
-  voice.innerHTML = '<div id="us-voice-settings"></div>';
+  var chat = section('us-chat');
+  var providers = document.createElement('div'); providers.className = 'us-section'; providers.dataset.section = 'us-providers';
+  providers.innerHTML = '<h2>AI providers</h2><p class="settings-hint">Set up coding agents on the server and manage your personal audio transcription API keys.</p><div class="settings-section-heading"><h3 id="coding-agents" data-settings-section>Coding agents</h3><span id="us-provider-refresh"></span></div><div id="us-coding-agents"></div><h3 id="api-connections" data-settings-section>API connections</h3><div id="us-voice-settings"></div>';
+  root.querySelector('.us-modal-content').appendChild(providers);
   var ai = document.createElement('div'); ai.className = 'us-section'; ai.dataset.section = 'us-ai';
   ai.innerHTML = '<h2>AI preferences</h2><p class="settings-hint">Defaults for new Clay interviews and built-in AI assistance. Project defaults, individual Mates and existing conversation runtimes stay separate.</p><div id="us-default-ai"></div>';
   root.querySelector('.us-modal-content').appendChild(ai);
-  heading(ai, 'Execution behavior');
+  heading(ai, 'Execution behavior'); ai.lastElementChild.id = 'execution-behavior';
   ['us-auto-continue'].forEach(function (id) {ai.appendChild(document.getElementById(id).closest('.settings-card'));});
   document.getElementById('us-auto-continue').closest('label').querySelector('.settings-hint').textContent = 'When a rate-limited conversation becomes eligible to retry, Clay can send a continuation automatically. This may resume work and consume usage without another message from you.';
   heading(ai, 'Command permissions', 'These are personal Claude CLI allow rules, separate from model selection and Clay session approval modes. Managed defaults are shown for reference. Server access restrictions still apply. On an OS-user server these install in your OS home; otherwise they install in the shared server process home and can affect other Claude CLI launches there.');
@@ -36,7 +38,8 @@ export function buildUserSettingsLayout() {
   root.querySelector('.us-modal-content').appendChild(agent);
   section('us-mates').remove();
   var experiments = document.createElement('details'); experiments.className = 'us-experiments'; experiments.innerHTML = '<summary>Experimental features</summary><p class="settings-hint">Personal opt-ins for features that may change.</p>';
-  experiments.appendChild(document.getElementById('us-capsules-enabled').closest('.settings-card'));chat.appendChild(experiments);section('us-experimental').remove();
+  experiments.appendChild(document.getElementById('us-capsules-enabled').closest('.settings-card'));ai.appendChild(experiments);experiments.id = 'experimental-features';section('us-experimental').remove();chat.remove();
+  initPersonalProviders();
   section('us-email').remove();
   initPersonalIntegrations();
   var account = section('us-account');heading(account, 'Sign out');account.appendChild(document.getElementById('us-logout-btn').closest('.settings-card'));section('us-logout').remove();
@@ -47,12 +50,12 @@ export function buildUserSettingsLayout() {
 }
 export function loadUserSettingsExtras(page) {
   if (page === 'us-integrations') loadPersonalIntegrations();
-  if (page === 'us-chat') loadSpeechSettings();
+  if (page === 'us-providers') { loadSpeechSettings(); loadPersonalProviders(); } else leavePersonalProviders();
   if (page === 'us-agent') mountAgentBehavior(document.getElementById('us-agent-behavior'));
   if (page === 'us-ai') { mountDefaultAi(document.getElementById('us-default-ai')); requestDefaultAi(); var ws=getWs();if(ws && ws.readyState===1)ws.send(JSON.stringify({type:'get_claude_allow_list'})); }
 }
 export function leaveAgentBehaviorPage() {unmountAgentBehavior();resetAgentBehavior();}
-export function finishUserSettingsExtras() {leaveAgentBehaviorPage();closeSpeechPicker();unmountDefaultAi(document.getElementById('us-default-ai'));}
+export function finishUserSettingsExtras() {leavePersonalProviders();leaveAgentBehaviorPage();closeSpeechPicker();unmountDefaultAi(document.getElementById('us-default-ai'));}
 // Returns the draft prompt for leaving one personal page (or every page when
 // pageId is omitted); the shell shows it with the shared confirmation.
 export function personalLeavePrompt(pageId) {
@@ -64,7 +67,7 @@ export function personalLeavePrompt(pageId) {
   var key = document.getElementById('us-linear-key');
   var keyDraft = key && key.value && store.get('personalLinearEditing') && !(key.form && key.form.hidden);
   var dirty = leaving('us-integrations') && (store.get('personalEmailDirty') || store.get('personalLinearDirty') || keyDraft) ||
-    leaving('us-chat') && store.get('userVoiceDirty') ||
+    leaving('us-providers') && store.get('userVoiceDirty') ||
     leaving('us-notifications') && store.get('notificationDraft') ||
     leaving('us-appearance') && (store.get('appearanceDraft') || store.get('userTerminalDirty')) ||
     leaving('us-account') && (store.get('userProfileDirty') || pinDirty) ||

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

@@ -0,0 +1,42 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { personalProviderContext } from './personal-provider-context.js';
+function send(type,provider,reviewId,render) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1 || !store.get('personalProvidersOpen') || store.get('personalProviderContext') !== personalProviderContext()) return false;
+  var requestId = type === 'stop' || type === 'cancel' ? store.get('personalProviderInstallRequest') : crypto.randomUUID();
+  store.set({personalProviderInstallRequest:requestId});
+  ws.send(JSON.stringify({requestId:requestId,type:'personal_provider_install_'+type,vendor:provider.id,personalRequestId:store.get('personalProviderRevision'),reviewId:reviewId}));
+  if (type === 'review' || type === 'start') setTimeout(function () { if (store.get('personalProviderInstallRequest') === requestId && store.get('personalProviderInstallAwaiting') === requestId) { store.set({personalProviderInstallBusy:false,personalProviderInstall:{vendor:provider.id,state:'unknown',message:'Installation response timed out. Reopen settings and refresh status; never assume an installation completed.'}}); if (render) render(); } },10000);
+  store.set({personalProviderInstallAwaiting:requestId}); return true;
+}
+export function resetProviderInstall() { store.set({personalProviderInstall:null,personalProviderInstallBusy:false,personalProviderInstallRequest:null,personalProviderInstallAwaiting:null}); }
+export function handleProviderInstall(message,render) {
+  if (message.type !== 'personal_provider_install') return false;
+  if (!store.get('personalProvidersOpen') || !store.get('personalProviderRevision') || message.requestId !== store.get('personalProviderInstallRequest') || message.personalRequestId !== store.get('personalProviderRevision') || store.get('personalProviderContext') !== personalProviderContext()) return true;
+  store.set({personalProviderInstallAwaiting:null,personalProviderInstall:message,personalProviderInstallBusy:['review','started','stopping','unknown'].indexOf(message.state)>=0}); render();
+  var editor=document.getElementById('provider-setup-'+message.vendor); var status=editor && editor.querySelector('[data-install-status]'); if (status) status.focus({preventScroll:true}); return true;
+}
+export function renderProviderInstall(editor,provider,render) {
+  if (!provider.canInstall) return;
+  var item = store.get('personalProviderInstall');
+  var actions = document.createElement('div'); actions.className = 'settings-form-actions';
+  if (!item || item.vendor !== provider.id || ['review','started','stopping','unknown'].indexOf(item.state)<0) {
+    var review = document.createElement('button'); review.type='button'; review.className='settings-btn-sm'; review.textContent='Review installation'; review.disabled=!!store.get('personalProviderInstallBusy') || !!store.get('personalProviderSigningIn');
+    review.onclick=function () { if (send('review',provider,null,render)) { store.set({personalProviderInstallBusy:true}); review.disabled=true; } }; actions.appendChild(review);
+  }
+  if (item && item.vendor === provider.id) {
+    var status=document.createElement('p'); status.className='settings-status'; status.role='status'; status.tabIndex=-1; status.dataset.installStatus=''; status.textContent=item.message; editor.appendChild(status);
+    if (item.state==='review') {
+      var details=document.createElement('p'); details.className='settings-hint'; details.textContent='Runtime account: '+item.runtime.user+' (UID '+item.runtime.uid+'), HOME '+item.runtime.home+'. '+item.effects; editor.appendChild(details);
+      var command=document.createElement('pre'); command.className='settings-hint'; command.style.whiteSpace='pre-wrap'; command.style.overflowWrap='anywhere'; command.textContent=item.command; editor.appendChild(command);
+      var source=document.createElement('a'); source.className='settings-link'; source.href=item.source; source.target='_blank'; source.rel='noopener noreferrer'; source.textContent='Official setup instructions'; editor.appendChild(source);
+      var confirm=document.createElement('button'); confirm.type='button'; confirm.className='settings-btn-sm'; confirm.textContent='Install for this account'; confirm.onclick=function () { if (send('start',provider,item.reviewId,render)) { confirm.disabled=true; } }; actions.appendChild(confirm);
+      var cancel=document.createElement('button'); cancel.type='button'; cancel.className='settings-btn-sm'; cancel.textContent='Cancel installation'; cancel.onclick=function () { send('cancel',provider,item.reviewId); resetProviderInstall(); render(); }; actions.appendChild(cancel);
+    }
+    if (item.state==='started') {
+      var stop=document.createElement('button'); stop.type='button'; stop.className='settings-btn-sm'; stop.textContent='Stop installation'; stop.onclick=function () { send('stop',provider); stop.disabled=true; }; actions.appendChild(stop);
+    }
+  }
+  editor.appendChild(actions);
+}