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

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

@@ -0,0 +1,102 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { requestVendorLogin, cancelVendorLogin } from './vendor-login.js';
+import { renderProviderInstall, handleProviderInstall, resetProviderInstall } from './user-settings-provider-install.js';
+import { personalProviderContext } from './personal-provider-context.js';
+
+function render() {
+  var root = document.getElementById('us-coding-agents'); if (!root) return;
+  root.replaceChildren();
+  var status = document.createElement('p'); status.className = 'settings-status'; status.role = 'status';
+  status.textContent = store.get('personalProvidersError') || store.get('personalProvidersNotice') || (store.get('personalProvidersLoading') ? 'Checking installations…' : '');
+  status.dataset.state = store.get('personalProvidersError') ? 'error' : store.get('personalProvidersNotice') ? 'info' : ''; root.appendChild(status);
+  var refresh = document.createElement('button'); refresh.type = 'button'; refresh.className = 'settings-btn-sm';
+  refresh.textContent = 'Refresh status'; refresh.disabled = !!store.get('personalProvidersLoading') || !!store.get('personalProviderSigningIn') || !!store.get('personalProviderInstallBusy');
+  refresh.onclick = loadPersonalProviders;
+  var headingActions=document.getElementById('us-provider-refresh'); if (headingActions) headingActions.replaceChildren(refresh);
+  var catalog = store.get('personalProviderCatalog'); if (!catalog) return;
+  var runtime=catalog.runtime;
+  var scope = document.createElement('p'); scope.className = 'settings-hint'; scope.textContent = 'Account: ' + (catalog.accountName || catalog.owner) + ' · ' + (runtime.shared ? 'Shared server OS account: ' : 'Mapped OS account: ') + runtime.user; root.appendChild(scope);
+  if (runtime.shared) { var shared=document.createElement('p'); shared.className='settings-hint'; shared.textContent='Provider credentials are shared across Clay Studio accounts.'; root.appendChild(shared); }
+  var details=document.createElement('details'); details.className='settings-runtime-details settings-hint'; details.open=!!store.get('personalProviderRuntimeDetailsOpen');
+  var summary=document.createElement('summary'); summary.textContent='Runtime details';
+  var exact=document.createElement('p'); exact.className='settings-hint'; exact.dataset.providerRuntime=''; exact.textContent='OS account: '+runtime.user+' · UID '+runtime.uid+' · HOME '+runtime.home;
+  details.append(summary,exact); details.ontoggle=function () { if (details.isConnected && store.get('personalProviderCatalog') === catalog) store.set({personalProviderRuntimeDetailsOpen:details.open}); }; root.appendChild(details);
+  catalog.providers.forEach(function (provider) {
+    var row = document.createElement('div'); row.className = 'us-voice-row'; row.dataset.codingProvider = provider.id;
+    var controls = document.createElement('div'); controls.className = 'us-voice-row-controls';
+    var logo = document.createElement('img'); logo.src = provider.icon; logo.alt = ''; logo.className = 'us-voice-provider-logo';
+    var copy = document.createElement('div'); copy.className = 'us-voice-provider-copy';
+    var name = document.createElement('strong'); name.textContent = provider.name;
+    var state = document.createElement('small'); state.textContent = (provider.installed === true ? 'Installed' : provider.installed === false ? 'Not installed' : 'Installation unavailable') + ((store.get('personalProviderSignInResults') || {})[provider.id] ? ' · Sign-in reported success · Not tested' : ' · Authentication unknown · Not tested');
+    copy.append(name, state);
+    var manage = document.createElement('button'); manage.type = 'button'; manage.className = 'settings-btn-sm';
+    manage.textContent = provider.installed ? 'Manage' : provider.canInstall ? 'Install' : 'Setup instructions'; manage.setAttribute('aria-label', manage.textContent + ' ' + provider.name);
+    manage.setAttribute('aria-expanded', String(store.get('personalProviderEditing') === provider.id));
+    manage.setAttribute('aria-controls', 'provider-setup-' + provider.id);
+    manage.onclick = function () { store.set({personalProviderEditing:store.get('personalProviderEditing') === provider.id ? null : provider.id}); render(); var button = root.querySelector('[data-coding-provider="' + provider.id + '"] button'); if (button) button.focus(); };
+    controls.append(logo, copy, manage); row.appendChild(controls);
+    var editor = document.createElement('div'); editor.id = 'provider-setup-' + provider.id; editor.className = 'settings-card'; editor.hidden = store.get('personalProviderEditing') !== provider.id;
+    var detail = document.createElement('p'); detail.className = 'settings-hint'; detail.textContent = provider.reason || (provider.installed ? 'Runtime: '+runtime.user+' · HOME '+runtime.home+'. Sign-in uses this account. It can replace that OS account’s provider credentials. Sign-in does not send or replay any task. Provider logout and credential inspection are unavailable here.' : provider.setup); editor.appendChild(detail);
+    if (provider.reason && !provider.installed) { var setup = document.createElement('p'); setup.className = 'settings-hint'; setup.textContent = provider.setup; editor.appendChild(setup); }
+    if (!provider.installed && !provider.canInstall && provider.setupUrl) { var source=document.createElement('a'); source.className='settings-link'; source.href=provider.setupUrl; source.target='_blank'; source.rel='noopener noreferrer'; source.textContent='Official setup instructions'; editor.appendChild(source); }
+    renderProviderInstall(editor,provider,render);
+    if (provider.canSignIn) {
+      function signIn(mode) {
+        if (store.get('personalProviderSigningIn') || !store.get('personalProviderRevision') || store.get('personalProvidersLoading')) return;
+        var results=Object.assign({},store.get('personalProviderSignInResults') || {}); delete results[provider.id];
+        store.set({personalProviderSigningIn:provider.id,personalProvidersError:'',personalProvidersNotice:'',personalProviderSignInResults:results});
+        if (!requestVendorLogin(provider.id, {personalRequestId:store.get('personalProviderRevision'),mode:mode})) {
+          store.set({personalProviderSigningIn:null,personalProvidersError:'Reconnect the workspace and refresh status before signing in.'}); render();
+        }
+        render();
+      }
+      var actions = document.createElement('div'); actions.className = 'settings-form-actions';
+      var button = document.createElement('button'); button.type = 'button'; button.className = 'settings-btn-sm'; button.textContent = 'Sign in'; button.disabled = !!store.get('personalProviderSigningIn') || !store.get('personalProviderRevision');
+      button.onclick = function () { signIn(provider.browser ? 'browser' : 'terminal'); }; actions.appendChild(button);
+      if (provider.browser) { var terminal = document.createElement('button'); terminal.type = 'button'; terminal.className = 'settings-btn-sm'; terminal.textContent = 'Use terminal sign-in'; terminal.disabled = !!store.get('personalProviderSigningIn') || !store.get('personalProviderRevision'); terminal.onclick = function () { signIn('terminal'); }; actions.appendChild(terminal); }
+      if (store.get('personalProviderSigningIn') === provider.id) { var cancel = document.createElement('button'); cancel.type = 'button'; cancel.className = 'settings-btn-sm'; cancel.textContent = 'Cancel sign-in'; cancel.onclick = function () { cancelVendorLogin(provider.id); store.set({personalProviderSigningIn:null}); render(); }; actions.appendChild(cancel); }
+      editor.appendChild(actions);
+    }
+    row.appendChild(editor); root.appendChild(row);
+  });
+}
+export function loadPersonalProviders() {
+  resetProviderInstall();
+  var ws = getWs();
+  var id = crypto.randomUUID();
+  store.set({personalProvidersOpen:true,personalProviderRequest:id,personalProviderContext:personalProviderContext(),personalProviderRevision:null,personalProvidersLoading:true,personalProvidersError:'',personalProvidersNotice:'',personalProviderSignInResults:{}});
+  if (!ws || ws.readyState !== 1) { store.set({personalProvidersLoading:false,personalProvidersError:'Connect to a project workspace to check provider installations and sign in.'}); render(); return; }
+  ws.send(JSON.stringify({type:'vendor_login_catalog_request', requestId:id})); render();
+  setTimeout(function () { if (store.get('personalProviderRequest') === id && store.get('personalProvidersLoading')) { store.set({personalProvidersLoading:false,personalProvidersError:'Provider status timed out. Reconnect, then refresh status.'}); render(); } },10000);
+}
+export function handlePersonalProviderMessage(message) {
+  if (handleProviderInstall(message,render)) return true;
+  if (message.type !== 'vendor_login_catalog') {
+    if (message.personalRequestId && store.get('personalProvidersOpen') && store.get('personalProviderContext') === personalProviderContext() && message.personalRequestId === store.get('personalProviderRevision') && ['vendor_login_ready','vendor_login_error','auth_refreshed'].indexOf(message.type) >= 0) {
+      var succeeded=message.type === 'auth_refreshed' && !message.error;
+      var results=Object.assign({},store.get('personalProviderSignInResults') || {});
+      if (succeeded) results[message.vendor]=true; else if (message.type === 'vendor_login_error') delete results[message.vendor];
+      store.set({personalProviderSigningIn:message.type === 'vendor_login_ready' ? message.vendor : null,personalProviderSignInResults:results,personalProvidersError:message.error || '',personalProvidersNotice:succeeded ? 'Sign-in reported success. Explicitly retry your task to test provider access.' : ''}); render();
+    }
+    if (message.type === 'vendor_login_state' && store.get('personalProviderSigningIn') && !(message.flows || []).some(function (flow) { return flow.personalRequestId === store.get('personalProviderRevision'); })) { store.set({personalProviderSigningIn:null}); render(); }
+    return false;
+  }
+  if (!store.get('personalProvidersOpen') || message.requestId !== store.get('personalProviderRequest') || store.get('personalProviderContext') !== personalProviderContext()) return true;
+  store.set({personalProvidersLoading:false,personalProvidersError:message.error || '',personalProviderCatalog:message.error ? null : message,personalProviderRevision:message.revision || null}); render(); return true;
+}
+export function leavePersonalProviders() {
+  if (!store.get('personalProvidersOpen')) return;
+  resetProviderInstall();
+  var signing = store.get('personalProviderSigningIn'); if (signing) cancelVendorLogin(signing);
+  var ws = getWs(); if (ws && ws.readyState === 1) ws.send(JSON.stringify({type:'vendor_login_personal_release'}));
+  store.set({personalProvidersOpen:false,personalProviderRequest:null,personalProviderRevision:null,personalProviderSigningIn:null,personalProvidersLoading:false});
+}
+export function initPersonalProviders() {
+  store.subscribe(function (state, previous) {
+    if (state.myUserId !== previous.myUserId || state.currentSlug !== previous.currentSlug || state.projectSplitViewSocketGeneration !== previous.projectSplitViewSocketGeneration || state.connected === false && previous.connected !== false) {
+      leavePersonalProviders(); store.set({personalProviderCatalog:null,personalProviderEditing:null,personalProviderRuntimeDetailsOpen:false,personalProvidersNotice:'',personalProviderSignInResults:{},personalProvidersError:'Connection or account changed. Refresh status to continue.'}); render();
+    }
+  });
+  render();
+}

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

@@ -3,73 +3,82 @@ import { saveSpeechSettings, loadSpeechSettings } from './stt-settings.js';
 import { confirmSettingsAction } from './server-settings-state.js';
 
 export function initPersonalVoice() {
-  var root = document.getElementById('us-voice-settings');
-  root.innerHTML = '<h3>Voice providers</h3><p class="settings-hint">Manage your personal API keys here. Choose the voice model, transcription mode and language from the microphone menu in the composer. Browser speech needs no API key.</p><div class="us-voice-providers" aria-label="Voice providers"></div><div id="us-voice-connection" hidden><form id="us-voice-key-form"><label class="settings-label" for="us-voice-key">API key</label><input id="us-voice-key" class="us-text-input" type="password" autocomplete="off" spellcheck="false" maxlength="4096" required><p id="us-voice-privacy" class="settings-hint"></p><div class="settings-form-actions"><button type="submit" class="settings-btn-sm">Save key</button><button type="button" id="us-voice-key-cancel" class="settings-btn-sm">Cancel</button><a id="us-voice-get-key" target="_blank" rel="noopener noreferrer">Get API key ↗</a></div></form><button type="button" id="us-voice-remove" class="settings-btn-sm">Remove saved key</button></div><p class="settings-status" role="status" id="us-voice-status"></p><button type="button" class="settings-btn-sm" id="us-voice-retry" hidden>Reload providers</button>';
-  var list = root.querySelector('.us-voice-providers'); var editor = root.querySelector('#us-voice-connection');
-  var form = root.querySelector('form'); var key = form.querySelector('input'); var status = root.querySelector('[role=status]');
-  var remove = root.querySelector('#us-voice-remove'); var retry = root.querySelector('#us-voice-retry');
+  var root = document.getElementById('us-voice-settings'); if (!root) return;
+  root.innerHTML = '<p class="settings-hint">Audio transcription: convert microphone audio into text for voice input. Choose the model, mode and language in the microphone menu. Browser speech needs no API key.</p><h4>Your connections</h4><div id="us-api-connections"></div><p id="us-api-empty" class="settings-hint">No API connections yet. Choose a provider below to add an audio transcription key.</p><section class="us-integration-catalog"><h4>Available providers</h4><div class="us-integration-tiles"></div></section><div id="us-api-setup"></div><div id="us-voice-connection" hidden><form id="us-voice-key-form"><label class="settings-label" for="us-voice-key">API key</label><input id="us-voice-key" class="us-text-input" type="password" autocomplete="off" spellcheck="false" maxlength="4096"><p id="us-voice-key-help" class="settings-hint"></p><p id="us-voice-privacy" class="settings-hint"></p><div class="settings-form-actions"><button type="submit" class="settings-btn-sm">Save connection</button><button type="button" id="us-voice-key-cancel" class="settings-btn-sm">Cancel</button><button type="button" id="us-voice-remove" class="settings-btn-sm">Remove saved key</button><a id="us-voice-get-key" target="_blank" rel="noopener noreferrer">Get API key ↗</a></div></form></div><p class="settings-status" role="status" aria-live="polite" id="us-voice-status"></p><button type="button" class="settings-btn-sm" id="us-voice-retry" hidden>Reload providers</button>';
+  var list = root.querySelector('#us-api-connections'), tiles = root.querySelector('.us-integration-tiles');
+  var editor = root.querySelector('#us-voice-connection'), form = root.querySelector('form');
+  var key = form.querySelector('input'), status = root.querySelector('[role=status]');
+  var remove = root.querySelector('#us-voice-remove'), retry = root.querySelector('#us-voice-retry');
   function sync() {
-    var settings = store.get('speechSettings'); var busy = !!store.get('speechSettingsSaving');
+    var settings = store.get('speechSettings'), busy = !!store.get('speechSettingsSaving');
+    root.appendChild(editor); retry.before(status); list.replaceChildren(); tiles.replaceChildren();
     if (settings) {
-      var signature = settings.providers.map(function (provider) { return provider.id; }).join(',');
-      if (list.dataset.catalog !== signature) {
-        root.appendChild(editor); list.replaceChildren(); list.dataset.catalog = signature;
-        settings.providers.forEach(function (provider) {
-          var row = document.createElement('div'); row.className = 'us-voice-row'; row.dataset.voiceProvider = provider.id;
-          var controls = document.createElement('div'); controls.className = 'us-voice-row-controls';
-          var image = document.createElement('img'); image.className = 'us-voice-provider-logo'; image.src = provider.icon; image.alt = '';
-          var copy = document.createElement('div'); copy.className = 'us-voice-provider-copy';
-          var name = document.createElement('strong'); name.textContent = provider.name;
-          var state = document.createElement('small'); state.className = 'us-voice-key-state'; copy.appendChild(name); copy.appendChild(state);
-          var button = document.createElement('button'); button.type = 'button'; button.className = 'settings-btn-sm us-voice-key-action'; button.dataset.voiceKey = provider.id;
-          button.setAttribute('aria-controls','us-voice-connection');
-          button.onclick = function () { discardThen(function () { store.set({userVoiceKeyProvider:provider.id}); status.textContent = ''; sync(); key.focus(); }); };
-          controls.appendChild(image); controls.appendChild(copy); controls.appendChild(button); row.appendChild(controls); list.appendChild(row);
-        });
-      }
-      list.querySelectorAll('[data-voice-provider]').forEach(function (row) {
-        var id = row.dataset.voiceProvider; var connected = settings.configured.indexOf(id) >= 0; var button = row.querySelector('[data-voice-key]');
-        row.querySelector('.us-voice-key-state').textContent = connected ? 'Key saved' : 'Not connected';
-        button.textContent = connected ? 'API key' : 'Connect'; button.disabled = busy;
-        button.setAttribute('aria-label', (connected ? 'Manage ' : 'Connect ') + row.querySelector('strong').textContent + ' API key');
-        button.setAttribute('aria-expanded',String(store.get('userVoiceKeyProvider') === id));
+      root.querySelector('#us-api-empty').hidden = !!settings.configured.length;
+      settings.providers.forEach(function (provider) {
+        var connected = settings.configured.indexOf(provider.id) >= 0;
+        var row = document.createElement('div'); row.className = 'us-voice-row'; row.dataset.voiceProvider = provider.id;
+        var controls = document.createElement('div'); controls.className = 'us-voice-row-controls';
+        var image = document.createElement('img'); image.className = 'us-voice-provider-logo'; image.src = provider.icon; image.alt = '';
+        var copy = document.createElement('div'); copy.className = 'us-voice-provider-copy';
+        var name = document.createElement('strong'); name.textContent = provider.name; copy.appendChild(name);
+        var button = document.createElement('button'); button.type = 'button'; button.className = connected ? 'settings-btn-sm' : 'us-integration-tile'; button.dataset.voiceKey = provider.id;
+        button.setAttribute('aria-label', (connected ? 'Manage ' : 'Add ') + provider.name + ' API key');
+        button.setAttribute('aria-controls','us-voice-connection'); button.setAttribute('aria-expanded',String(store.get('userVoiceKeyProvider') === provider.id)); button.disabled = busy;
+        button.onclick = function () { discardThen(function () { key.value = ''; store.set({userVoiceKeyProvider:provider.id,userVoiceDirty:false}); status.textContent = ''; sync(); key.focus(); }); };
+        if (connected) {
+          var purpose = document.createElement('small'); purpose.textContent = 'Audio transcription'; copy.appendChild(purpose);
+          var saved = document.createElement('span'); saved.className = 'us-integration-state'; saved.textContent = 'Key saved'; button.textContent = 'Manage';
+          controls.append(image,copy,saved,button); row.appendChild(controls); list.appendChild(row);
+        } else {
+          var title = document.createElement('span'); title.textContent = provider.name; button.append(image,title); tiles.appendChild(button);
+        }
       });
       var provider = settings.providers.find(function (item) { return item.id === store.get('userVoiceKeyProvider'); });
       editor.hidden = !provider;
       if (provider) {
         var connected = settings.configured.indexOf(provider.id) >= 0;
         var row = Array.from(list.children).find(function (item) { return item.dataset.voiceProvider === provider.id; });
-        if (editor.parentElement !== row) row.appendChild(editor);
-        if (status.parentElement !== editor) editor.appendChild(status);
+        (row || root.querySelector('#us-api-setup')).appendChild(editor); editor.appendChild(status);
         form.querySelector('label').textContent = provider.name + ' API key';
-        key.placeholder = connected ? 'Enter a replacement key' : 'Enter API key'; remove.hidden = !connected;
-        root.querySelector('#us-voice-privacy').textContent = 'Stored privately on your Clay server and shared by all ' + provider.name + ' voice models. Audio is sent to ' + provider.name + '; usage is billed to your account.';
+        key.required = !connected; key.placeholder = connected ? '•••••••• — saved key' : 'Enter API key'; remove.hidden = !connected;
+        root.querySelector('#us-voice-key-help').textContent = connected ? 'Leave blank to keep the saved key. Key saved does not verify provider access.' : 'Enter an API key for audio transcription. Saving does not verify provider access.';
+        root.querySelector('#us-voice-privacy').textContent = 'Stored privately on your Clay Studio server for your account and shared by all ' + provider.name + ' voice models. Audio is sent to ' + provider.name + '; usage is billed to your provider account.';
         root.querySelector('#us-voice-get-key').href = provider.url;
-      } else { if (editor.parentElement !== root) root.appendChild(editor); retry.before(status); }
-    } else list.textContent = 'Loading providers…';
+      }
+    } else { list.textContent = store.get('speechSettingsError') ? 'Provider collection unavailable.' : 'Loading providers…'; root.querySelector('#us-api-empty').hidden = true; editor.hidden = true; }
     editor.querySelectorAll('input,button').forEach(function (control) { control.disabled = busy || !settings; });
     retry.hidden = !store.get('speechSettingsError'); retry.disabled = busy;
-    if (store.get('speechSettingsError')) { status.textContent = store.get('speechSettingsError'); status.dataset.state = 'error'; }
+    if (store.get('speechSettingsError')) { status.textContent = store.get('speechSettingsError'); status.dataset.state = 'error'; status.dataset.loadError = 'true'; }
+    else if (status.dataset.loadError) { status.textContent = ''; status.dataset.state = ''; delete status.dataset.loadError; }
   }
   function discardThen(action) {
     if (!key.value) { action(); return; }
-    confirmSettingsAction('Discard the unsaved voice API key?', 'Discard', function () { key.value = ''; store.set({userVoiceDirty:false}); action(); });
+    confirmSettingsAction('Discard the unsaved audio transcription API key?', 'Discard', function () { key.value = ''; store.set({userVoiceDirty:false}); action(); });
   }
   function closeEditor() {
     var id = store.get('userVoiceKeyProvider'); key.value = ''; store.set({userVoiceKeyProvider:null,userVoiceDirty:false}); sync();
     var button = root.querySelector('[data-voice-key="' + id + '"]'); if (button) button.focus();
   }
   async function save(value) {
-    var provider = store.get('userVoiceKeyProvider'); if (!provider) return;
+    var provider = store.get('userVoiceKeyProvider'); if (!provider || store.get('speechSettingsSaving')) return;
+    var actor = store.get('myUserId'), generation = store.get('speechSettingsContextGeneration');
+    var configured = (store.get('speechSettings') || {}).configured || [];
+    if (value === '' && configured.indexOf(provider) >= 0) { closeEditor(); status.textContent = 'No key changes. Your voice model and language are unchanged.'; return; }
     status.textContent = 'Saving…'; status.dataset.state = '';
-    try { await saveSpeechSettings({provider:provider,key:value}); closeEditor(); status.textContent = value === null ? 'Key removed. Reconnect this provider before using its voice models.' : 'Key saved. Your voice model and language are unchanged.'; }
-    catch (error) { status.textContent = error.message; status.dataset.state = 'error'; sync(); }
+    try {
+      await saveSpeechSettings({provider:provider,key:value});
+      if (actor !== store.get('myUserId') || generation !== store.get('speechSettingsContextGeneration')) return;
+      closeEditor(); status.textContent = value === null ? 'Key removed. Reconnect this provider before using its voice models.' : 'Key saved. Your voice model and language are unchanged.';
+    } catch (error) { if (actor === store.get('myUserId') && generation === store.get('speechSettingsContextGeneration')) { status.textContent = error.message; status.dataset.state = 'error'; sync(); } }
   }
   key.oninput = function () { store.set({userVoiceDirty:!!key.value}); };
   form.onsubmit = function (event) { event.preventDefault(); save(key.value); };
   root.querySelector('#us-voice-key-cancel').onclick = function () { discardThen(function () { closeEditor(); status.textContent = ''; }); };
-  remove.onclick = function () { confirmSettingsAction('Remove this provider’s saved voice key? Models using it will require reconnection.', 'Remove key', function () { save(null); }); };
+  remove.onclick = function () { confirmSettingsAction('Remove this provider’s saved audio transcription key? Models using it will require reconnection.', 'Remove key', function () { save(null); }); };
   retry.onclick = loadSpeechSettings;
-  store.subscribe(function (state, previous) { if (state.speechSettings !== previous.speechSettings || state.speechSettingsSaving !== previous.speechSettingsSaving || state.speechSettingsError !== previous.speechSettingsError) sync(); });
+  store.subscribe(function (state, previous) {
+    if (state.speechSettingsContextGeneration !== previous.speechSettingsContextGeneration) { key.value = ''; status.textContent = ''; store.set({userVoiceKeyProvider:null,userVoiceDirty:false}); }
+    if (state.speechSettings !== previous.speechSettings || state.speechSettingsSaving !== previous.speechSettingsSaving || state.speechSettingsError !== previous.speechSettingsError || state.speechSettingsContextGeneration !== previous.speechSettingsContextGeneration) sync();
+  });
   sync();
 }

package/lib/public/modules/vendor-login-browser.js

@@ -81,7 +81,7 @@ export function openLoginBrowser(msg) {
     }
     cancel();
     if (isMcp) ws.send(JSON.stringify({ type: 'mcp_connection_action', action: 'signin', id: msg.connectionId }));
-    else requestVendorLogin(msg.vendor, { mode: mode });
+    else requestVendorLogin(msg.vendor, { mode: mode, sessionId: msg.sessionId, workerAuthRequestId: msg.workerAuthRequestId, personalRequestId: msg.personalRequestId });
   }
   dialog.querySelector('[data-action="cancel"]').onclick = cancel;
   dialog.querySelector('[data-action="retry"]').onclick = function () { restart("browser"); };

package/lib/public/modules/vendor-login.js

@@ -1,3 +1,4 @@
+import { personalLoginCurrent } from './personal-provider-context.js';
 // vendor-login.js - Vendor login (auth_required) recovery flow.
 //
 // The server owns the login terminal (see lib/project-vendor-login.js): exactly
@@ -16,6 +17,7 @@ import { refreshIcons, iconHtml } from './icons.js';
 import { openTuiModal, closeTuiModal, getTuiModalTerminalId } from './tui-attention.js';
 import { forwardPaneAuthRequired } from './pane-bridge.js';
 import { openLoginBrowser, closeLoginBrowser } from './vendor-login-browser.js';
+import { escapeHtml } from './utils.js';
 
 // vendor -> { terminalId, startedAt } as last broadcast by the server.
 var activeFlows = Object.create(null);
@@ -45,6 +47,17 @@ function currentProjectSlug() {
   return "";
 }
 
+function workerContextMatches(target) {
+  return !!target && target.slug === store.get('currentSlug') && target.selectedSessionId === store.get('activeSessionId') &&
+    target.selectedOrigin === store.get('sessionOriginId') && target.socketGeneration === store.get('projectSplitViewSocketGeneration');
+}
+
+function forgetWorkerRequest(vendor) {
+  var requests = Object.assign({}, store.get('workerVendorLoginRequests') || {});
+  delete requests[vendor];
+  store.set({ workerVendorLoginRequests: requests });
+}
+
 // The banner surface belongs to the notification center. Query it rather than
 // importing app-notifications so the dependency stays one-directional
 // (app-notifications -> vendor-login).
@@ -80,8 +93,8 @@ function showLoginBanner(opts) {
     '<div class="notif-banner-icon">' + iconHtml(opts.icon || "check-circle") + '</div>' +
     '<div class="notif-banner-body">' +
       '<div class="notif-banner-project">CLAY</div>' +
-      '<div class="notif-banner-title">' + opts.title + '</div>' +
-      '<div class="notif-banner-text">' + opts.text + '</div>' +
+      '<div class="notif-banner-title">' + escapeHtml(opts.title) + '</div>' +
+      '<div class="notif-banner-text">' + escapeHtml(opts.text) + '</div>' +
     '</div>' +
     '<button class="notif-banner-close">' + iconHtml("x") + '</button>';
 
@@ -107,7 +120,7 @@ function showLoginStartedBanner(vendor) {
   showLoginBanner({
     icon: "check-circle",
     title: vendorDisplayName(vendor) + " login started",
-    text: "Finish sign-in in the window below. Clay reconnects your sessions automatically.",
+    text: "Finish sign-in below, then explicitly retry your task.",
     onDismiss: function () { cancelVendorLogin(vendor); },
   });
 }
@@ -159,17 +172,28 @@ function closeModalForVendor(vendor, terminalId) {
 export function requestVendorLogin(vendor, opts) {
   var options = opts || {};
   var target = vendor || "claude";
+  if (options.personalRequestId && !personalLoginCurrent({personalRequestId:options.personalRequestId})) return false;
   if (options.auto && (activeFlows[target] || pendingStarts[target])) return false;
 
   var ws = getWs();
   if (!ws || ws.readyState !== 1) return false;
+  if (options.workerAuthRequestId) {
+    var requests = Object.assign({}, store.get('workerVendorLoginRequests') || {});
+    requests[target] = { requestId: options.workerAuthRequestId, slug: store.get('currentSlug'),
+      selectedSessionId: store.get('activeSessionId'), selectedOrigin: store.get('sessionOriginId'),
+      socketGeneration: store.get('projectSplitViewSocketGeneration') };
+    store.set({ workerVendorLoginRequests: requests });
+  }
 
+  if (options.personalRequestId) store.set({personalProviderSigningIn:target});
   pendingStarts[target] = true;
   ws.send(JSON.stringify({
     type: "vendor_login_start",
     vendor: target,
     auto: !!options.auto,
-    sessionId: options.sessionId || store.get('activeSessionId') || null,
+    sessionId: options.personalRequestId ? null : options.sessionId || store.get('activeSessionId') || null,
+    personalRequestId: options.personalRequestId || null,
+    workerAuthRequestId: options.workerAuthRequestId || null,
     mode: options.mode || ((((store.get("vendorInfo") || {})[target] || {}).browserLoginSupported === true) ? "browser" : "terminal"),
   }));
   showLoginStartedBanner(target);
@@ -180,6 +204,7 @@ export function cancelVendorLogin(vendor) {
   var target = vendor || modalVendor;
   if (!target) return;
   var flow = activeFlows[target];
+  forgetWorkerRequest(target);
   var browser = store.get('vendorLoginBrowser');
   var browserId = flow && flow.browserId || (browser && browser.vendor === target ? browser.browserId : null);
   if (browser && browser.vendor === target) closeLoginBrowser();
@@ -189,7 +214,7 @@ export function cancelVendorLogin(vendor) {
   if (modalVendor === target) closeModalInternally();
   var ws = getWs();
   if (ws && ws.readyState === 1) {
-    ws.send(JSON.stringify({ type: "vendor_login_cancel", vendor: target, browserId: browserId }));
+    ws.send(JSON.stringify({ type: "vendor_login_cancel", vendor: target, browserId: browserId, workerAuthRequestId: flow && flow.workerAuthRequestId, personalRequestId: store.get('personalProviderSigningIn') === target ? store.get('personalProviderRevision') : null }));
   }
 }
 
@@ -205,12 +230,24 @@ export function autoStartLoginIfNeeded(msg) {
   if (store.get('paneMode')) {
     return forwardPaneAuthRequired({
       vendor: msg.vendor || "claude",
-      sessionId: store.get('activeSessionId') || null,
+      sessionId: msg.sessionId || store.get('activeSessionId') || null,
+      workerAuthRequestId: msg.workerAuthRequestId || null,
+      loginCommand: msg.loginCommand,
+      canAutoLogin: msg.canAutoLogin,
     });
   }
+  if (msg.canAutoLogin === false || msg.loginCommand === '') {
+    showLoginErrorBanner(msg.vendor, 'Automatic sign-in is unavailable. Sign in manually on the server, then explicitly retry the task.');
+    return false;
+  }
   var vendor = msg.vendor || "claude";
   if (activeFlows[vendor] || pendingStarts[vendor]) return false;
-  return requestVendorLogin(vendor, { auto: true, sessionId: msg.sessionId || null });
+  return requestVendorLogin(vendor, { auto: true, sessionId: msg.sessionId || null, workerAuthRequestId: msg.workerAuthRequestId || null });
+}
+
+export function handleWorkerAuthRequired(msg) {
+  if (!msg || store.get('replayingHistory') || msg.slug !== store.get('currentSlug') || store.get('paneMode')) return false;
+  return autoStartLoginIfNeeded(msg);
 }
 
 // ========================================================
@@ -218,10 +255,12 @@ export function autoStartLoginIfNeeded(msg) {
 // ========================================================
 
 export function handleVendorLoginReady(msg) {
-  if (!msg || typeof msg.terminalId !== "number") return;
+  if (!msg || typeof msg.terminalId !== "number" || !personalLoginCurrent(msg)) return;
   var vendor = msg.vendor || "claude";
+  var request = (store.get('workerVendorLoginRequests') || {})[vendor];
+  if (msg.workerAuthRequestId && (!workerContextMatches(request) || request.requestId !== msg.workerAuthRequestId)) return;
   delete pendingStarts[vendor];
-  activeFlows[vendor] = { terminalId: msg.terminalId, startedAt: Date.now(), browserId: msg.browserId || null };
+  activeFlows[vendor] = { terminalId: msg.terminalId, startedAt: Date.now(), browserId: msg.browserId || null, workerAuthRequestId: msg.workerAuthRequestId || null };
   if (msg.browserId) {
     openLoginBrowser(msg);
     return;
@@ -246,10 +285,12 @@ export function handleVendorLoginReady(msg) {
 
 export function handleVendorLoginState(msg) {
   if (!msg) return;
+  pendingStarts = Object.create(null);
   var next = Object.create(null);
   var flows = msg.flows || [];
   for (var i = 0; i < flows.length; i++) {
-    next[flows[i].vendor] = { terminalId: flows[i].terminalId, startedAt: flows[i].startedAt, browserId: flows[i].browserId || null };
+    if (!personalLoginCurrent(flows[i])) continue;
+    next[flows[i].vendor] = { terminalId: flows[i].terminalId, startedAt: flows[i].startedAt, browserId: flows[i].browserId || null, workerAuthRequestId: flows[i].workerAuthRequestId || null };
     delete pendingStarts[flows[i].vendor];
   }
 
@@ -271,8 +312,11 @@ export function handleVendorLoginState(msg) {
 }
 
 export function handleAuthRefreshed(msg) {
-  if (!msg) return;
+  if (!msg || !personalLoginCurrent(msg)) return;
   var vendor = msg.vendor || "claude";
+  var request = (store.get('workerVendorLoginRequests') || {})[vendor];
+  if (msg.workerAuthRequestId && (!workerContextMatches(request) || request.requestId !== msg.workerAuthRequestId)) return;
+  forgetWorkerRequest(vendor);
   var browser = store.get('vendorLoginBrowser');
   if (browser && browser.vendor === vendor) closeLoginBrowser();
   var flow = activeFlows[vendor];
@@ -284,8 +328,9 @@ export function handleAuthRefreshed(msg) {
 }
 
 export function handleVendorLoginError(msg) {
-  if (!msg) return;
+  if (!msg || !personalLoginCurrent(msg)) return;
   var vendor = msg.vendor || "claude";
+  forgetWorkerRequest(vendor);
   var browser = store.get('vendorLoginBrowser');
   if (browser && browser.vendor === vendor) closeLoginBrowser();
   delete pendingStarts[vendor];
@@ -304,3 +349,18 @@ export function requestVendorLoginState() {
 export function getActiveLoginFlow(vendor) {
   return activeFlows[vendor] || null;
 }
+
+store.subscribe(function (state, previous) {
+  var requests = state.workerVendorLoginRequests || {};
+  Object.keys(requests).forEach(function (vendor) {
+    if (workerContextMatches(requests[vendor]) && state.connected !== false) return;
+    if (requests[vendor].slug === state.currentSlug && requests[vendor].socketGeneration === state.projectSplitViewSocketGeneration) cancelVendorLogin(vendor);
+    else forgetWorkerRequest(vendor);
+  });
+  if (state.connected !== false || previous.connected === false) return;
+  pendingStarts = Object.create(null);
+  activeFlows = Object.create(null);
+  closeLoginBrowser();
+  closeModalInternally();
+  clearLoginBanners();
+});

package/lib/public/modules/worker-activity-indicator.js

@@ -0,0 +1,49 @@
+import { store } from './store.js';
+import { iconHtml } from './icons.js';
+
+export function validActivity(value) {
+  return !!(value && typeof value.epoch === 'string' && value.epoch.length <= 64 && Number.isSafeInteger(value.sequence) && value.sequence > 0 &&
+    Number.isSafeInteger(value.queryGeneration) && value.queryGeneration >= 0 && Number.isFinite(value.timestamp) && value.timestamp > 0 &&
+    typeof value.summary === 'string' && value.summary.length <= 80);
+}
+export function observeWorkerActivity(key, activity, live) {
+  var all = Object.assign({}, store.get('workerActivityIndicators') || {}), previous = all[key];
+  if (activity && !validActivity(activity)) return null;
+  if (previous && activity && previous.cursor && activity.epoch === previous.cursor.epoch &&
+      (activity.sequence <= previous.cursor.sequence || activity.queryGeneration < previous.cursor.queryGeneration)) return null;
+  // Initial subscriptions/reconnects establish a baseline; never animate cached activity.
+  var fresh = !!(live && previous && activity);
+  if (previous && previous.activity && activity && previous.activity.epoch !== activity.epoch) fresh = false;
+  var generationChanged = previous && previous.activity && (!activity || previous.activity.queryGeneration !== activity.queryGeneration);
+  var angle = previous && !generationChanged ? previous.angle : 0, now = performance.now();
+  var nextStepAt = previous && !generationChanged ? previous.nextStepAt : 0;
+  if (fresh && now >= nextStepAt) { angle += 30; nextStepAt = now + 350; }
+  all[key] = { processing: previous && previous.processing, fresh: fresh, cursor: activity || previous && previous.cursor || null, activity: activity || null, angle: angle, nextStepAt: nextStepAt };
+  store.set({ workerActivityIndicators: all });
+  return fresh;
+}
+export function setWorkerActivityRuntime(key, processing) {
+  var all = Object.assign({}, store.get('workerActivityIndicators') || {}), previous = all[key];
+  if (!previous || typeof processing !== 'boolean' || previous.processing === processing) return;
+  all[key] = Object.assign({}, previous, { processing: processing }); store.set({ workerActivityIndicators: all });
+}
+export function syncWorkerActivityIndicator(chip, worker) {
+  var icon = chip.querySelector('.split-view-worker-loop'); if (!icon) return;
+  var state = (store.get('workerActivityIndicators') || {})[chip.dataset.messagePreview];
+  var angle = state ? state.angle : 0;
+  var scope = chip.dataset.messagePreview + ':' + (state && state.activity ? state.activity.epoch + ':' + state.activity.queryGeneration : 'unknown');
+  if (icon.dataset.activityScope !== scope) {
+    var initial = icon.dataset.activityScope == null ? angle : state && state.fresh ? 0 : angle;
+    icon.style.transition = 'none'; icon.style.transform = 'rotate(' + initial + 'deg)';
+    void icon.offsetWidth;
+    icon.style.transition = ''; icon.dataset.activityScope = scope;
+  }
+  icon.style.transform = 'rotate(' + angle + 'deg)';
+  var processing = state && typeof state.processing === 'boolean' ? state.processing : worker && worker.isProcessing;
+  icon.dataset.state = !store.get('connected') ? 'disconnected' : processing ? 'working' : 'ready';
+  icon.setAttribute('aria-label', !store.get('connected') ? 'Disconnected' : processing ? 'Worker running; motion indicates received activity' : 'Worker idle');
+}
+export function createWorkerActivityIndicator() {
+  var icon = document.createElement('span'); icon.className = 'split-view-worker-loop';
+  icon.innerHTML = iconHtml('refresh-cw'); icon.setAttribute('role', 'img'); return icon;
+}

package/lib/public/modules/worker-message-previews.js

@@ -1,39 +1,75 @@
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
-import { bindAgentMessageBubble, messagePreviewKey, rememberAgentMessage } from './agent-message-bubbles.js';
+import { getCachedSessions } from './sidebar-sessions.js';
+import { bindAgentMessageBubble, messagePreviewKey, rememberAgentMessage, rememberAgentActivity, forgetAgentMessage } from './agent-message-bubbles.js';
+import { observeWorkerActivity, syncWorkerActivityIndicator, setWorkerActivityRuntime } from './worker-activity-indicator.js';
 
 var scheduled = false;
+function key(target) { return messagePreviewKey('worker', [target.parentSessionOriginId, target.workerSessionOriginId, target.generation]); }
+function exactWorker(target) {
+  var list = getCachedSessions() || [];
+  var driver = list.find(function (item) { return item.sessionOriginId === target.parentSessionOriginId && item.sessionRole === 'driver' && (item.ownerId || null) === (store.get('myUserId') || null); });
+  return driver && list.find(function (item) { return item.sessionOriginId === target.workerSessionOriginId && item.sessionRole === 'worker' &&
+    item.parentAvailable && item.parentSessionId === driver.id && item.workerGeneration === target.generation && !item.hidden && (item.ownerId || null) === (driver.ownerId || null); });
+}
 function targets() {
   var found = [];
+  if (document.hidden) return found;
   document.querySelectorAll('.split-view-worker-chip[data-worker-parent]').forEach(function (chip) {
     if (!chip.getClientRects().length || chip.closest('[hidden], .split-pane-cached')) return;
     var target = { parentSessionOriginId: chip.dataset.workerParent, workerSessionOriginId: chip.dataset.workerOrigin, generation: Number(chip.dataset.workerGeneration) };
-    bindAgentMessageBubble(chip, messagePreviewKey('worker', [target.parentSessionOriginId, target.workerSessionOriginId, target.generation]));
+    var worker = exactWorker(target); if (!worker) return;
+    bindAgentMessageBubble(chip, key(target)); syncWorkerActivityIndicator(chip, worker);
     found.push(target);
   });
   return found.slice(0, 32);
 }
+function cleanup(list) {
+  var keep = new Set(list.map(key)), all = Object.assign({}, store.get('workerActivityIndicators') || {}), changed = false;
+  Object.keys(all).forEach(function (id) { if (!keep.has(id)) { delete all[id]; forgetAgentMessage(id); changed = true; } });
+  if (changed) store.set({ workerActivityIndicators: all });
+}
 export function syncWorkerMessagePreviews() {
   if (scheduled || store.get('paneMode')) return;
   scheduled = true;
   requestAnimationFrame(function () {
-    scheduled = false; var socket = getWs(); if (!store.get('connected') || !socket || socket.readyState !== 1) return;
-    var list = targets(), signature = JSON.stringify([store.get('currentSlug'), store.get('myUserId'), store.get('projectSplitViewSocketGeneration'), list]);
-    var previous = store.get('workerMessagePreviewSubscription'); if (previous && previous.signature === signature) return;
-    var requestId = crypto.randomUUID(); store.set({ workerMessagePreviewSubscription: { requestId: requestId, signature: signature, targets: list } });
+    scheduled = false; var socket = getWs(), connected = store.get('connected') && socket && socket.readyState === 1;
+    var list = connected ? targets() : []; cleanup(list);
+    if (!connected) { store.set({ workerMessagePreviewSubscription: null }); return; }
+    var signature = JSON.stringify([store.get('currentSlug'), store.get('myUserId'), store.get('projectSplitViewSocketGeneration'), list]);
+    var previous = store.get('workerMessagePreviewSubscription'); if (previous && previous.signature === signature && previous.socket === socket) return;
+    var requestId = crypto.randomUUID();
+    store.set({ workerMessagePreviewSubscription: { requestId: requestId, signature: signature, targets: list, socket: socket,
+      slug: store.get('currentSlug'), owner: store.get('myUserId'), socketGeneration: store.get('projectSplitViewSocketGeneration') } });
     socket.send(JSON.stringify({ type: 'split_worker_preview_request', requestId: requestId, targets: list }));
   });
 }
 export function handleWorkerMessagePreview(message) {
-  var state = store.get('workerMessagePreviewSubscription'); if (!state || !store.get('connected') || message.requestId !== state.requestId) return;
+  var state = store.get('workerMessagePreviewSubscription');
+  if (!state || !store.get('connected') || document.hidden || message.requestId !== state.requestId || state.socket !== getWs() ||
+      state.slug !== store.get('currentSlug') || state.owner !== store.get('myUserId') || state.socketGeneration !== store.get('projectSplitViewSocketGeneration')) return;
   if (!state.targets.some(function (target) { return target.parentSessionOriginId === message.parentSessionOriginId && target.workerSessionOriginId === message.workerSessionOriginId && target.generation === message.generation; })) return;
-  var chip = Array.from(document.querySelectorAll('.split-view-worker-chip[data-worker-parent]')).find(function (chip) { return chip.dataset.workerParent === message.parentSessionOriginId && chip.dataset.workerOrigin === message.workerSessionOriginId && Number(chip.dataset.workerGeneration) === message.generation; });
-  if (!chip || !chip.getClientRects().length) return;
-  rememberAgentMessage(messagePreviewKey('worker', [message.parentSessionOriginId, message.workerSessionOriginId, message.generation]), message.preview, message.live === true);
+  var worker = exactWorker(message); if (!worker) return;
+  var chips = Array.from(document.querySelectorAll('.split-view-worker-chip[data-worker-parent]')).filter(function (chip) {
+    return chip.dataset.workerParent === message.parentSessionOriginId && chip.dataset.workerOrigin === message.workerSessionOriginId &&
+      Number(chip.dataset.workerGeneration) === message.generation && chip.getClientRects().length && !chip.closest('[hidden], .split-pane-cached');
+  });
+  if (!chips.length) return;
+  var id = key(message), observed = observeWorkerActivity(id, message.activity || null, message.live === true);
+  var current = (store.get('workerActivityIndicators') || {})[id];
+  if (observed !== null || current && current.cursor && message.activity && current.cursor.epoch === message.activity.epoch && current.cursor.sequence === message.activity.sequence && current.cursor.queryGeneration === message.activity.queryGeneration) setWorkerActivityRuntime(id, message.isProcessing);
+  if (observed !== null) rememberAgentActivity(id, message.activity || null, message.vendor, message.observedAt);
+  rememberAgentMessage(id, message.preview, message.live === true);
+  chips.forEach(function (chip) { syncWorkerActivityIndicator(chip, Object.assign({}, worker, { isProcessing: typeof message.isProcessing === 'boolean' ? message.isProcessing : worker.isProcessing })); });
 }
 store.subscribe(function (state, previous) {
-  if (state.splitPanes !== previous.splitPanes || state.projectSplitViewActiveId !== previous.projectSplitViewActiveId || state.paneBindingSessions !== previous.paneBindingSessions || state.connected !== previous.connected || state.projectSplitViewSocketGeneration !== previous.projectSplitViewSocketGeneration) syncWorkerMessagePreviews();
+  if (state.paneBindingSessions !== previous.paneBindingSessions && state.connected) targets().forEach(function (target) {
+    var worker = exactWorker(target); if (worker) setWorkerActivityRuntime(key(target), worker.isProcessing === true);
+  });
+  if (state.splitPanes !== previous.splitPanes || state.projectSplitViewActiveId !== previous.projectSplitViewActiveId || state.paneBindingSessions !== previous.paneBindingSessions ||
+      state.currentSlug !== previous.currentSlug || state.myUserId !== previous.myUserId || state.connected !== previous.connected || state.projectSplitViewSocketGeneration !== previous.projectSplitViewSocketGeneration) syncWorkerMessagePreviews();
 });
 var observer = new MutationObserver(syncWorkerMessagePreviews);
 function observe() { var root = document.getElementById('split-host'); if (root) observer.observe(root, { childList: true, subtree: true, attributes: true, attributeFilter: ['hidden'] }); }
 if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', observe); else observe();
+document.addEventListener('visibilitychange', syncWorkerMessagePreviews);