clay-server 5.2.0-beta.3 → 5.2.0-beta.4

package/lib/public/modules/shared-browser-settings.js

@@ -0,0 +1,112 @@
+import { store } from './store.js';
+import { getWs } from './ws-ref.js';
+import { escapeHtml as escapeText } from './utils.js';
+
+function escapeHtml(value) { return escapeText(String(value)).replace(/"/g, '"').replace(/'/g, '''); }
+function state() { return store.get('sharedBrowserSettings') || {}; }
+function set(patch) { store.set({ sharedBrowserSettings: Object.assign({}, state(), patch) }); }
+function root() { return document.getElementById('shared-browser-settings'); }
+function button(label, action, target, description) {
+  return '<button type="button" data-settings-action="' + action + '" data-target="' + escapeHtml(target || '') + '" data-label="' + escapeHtml(description || target || '') + '">' + escapeHtml(label) + '</button>';
+}
+function request(operation, target) {
+  var ws = getWs();
+  if (!ws || ws.readyState !== 1) { set({ error: 'Reconnect to manage browser data.', pending: false }); renderBrowserSettings(); return; }
+  var id = crypto.randomUUID();
+  set({ pending: true, requestId: id, error: '', notice: '' });
+  ws.send(JSON.stringify({ type: 'shared_browser_settings', sessionId: store.get('activeSessionId'), requestId: id, operation: operation, target: target }));
+  renderBrowserSettings();
+  setTimeout(function () {
+    if (state().requestId === id && state().pending) { set({ pending: false, error: 'The request timed out. Refresh to check the saved state.' }); renderBrowserSettings(); }
+  }, 15000);
+}
+export function closeBrowserSettings(restoreFocus) {
+  var wasOpen = !!state().open;
+  set({ open: false, review: null }); renderBrowserSettings();
+  var trigger = document.querySelector('[data-action="settings"]'); if (trigger && wasOpen && restoreFocus !== false) trigger.focus();
+}
+export function browserSettingsHtml() {
+  return '<section id="shared-browser-settings" class="shared-browser-settings" aria-label="Browser settings" hidden></section>';
+}
+export function bindBrowserSettings(panel) {
+  panel.querySelector('[data-action="settings"]').onclick = function () {
+    set({ open: true, page: 'sites', data: null, review: null, filter: '' });
+    request('list');
+    root().querySelector('[data-settings-action="back"]').focus();
+  };
+  root().addEventListener('keydown', function (event) {
+    if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); closeBrowserSettings(); }
+  });
+  root().addEventListener('input', function (event) {
+    if (event.target.matches('[data-settings-filter]')) { set({ filter: event.target.value }); renderRows(); root().dataset.key = JSON.stringify([state(), store.get('connected')]); }
+  });
+  root().addEventListener('click', function (event) {
+    var control = event.target.closest('[data-settings-action]');
+    if (!control || control.disabled) return;
+    var action = control.dataset.settingsAction;
+    if (action === 'back') { closeBrowserSettings(); return; }
+    if (action === 'sites' || action === 'history') { set({ page: action, filter: '', review: null, notice: '', error: '' }); renderBrowserSettings(); return; }
+    if (action === 'refresh') { request('list'); return; }
+    if (action === 'cancel') { set({ review: null }); renderBrowserSettings(); root().querySelector('[data-settings-action="refresh"]').focus(); return; }
+    if (action === 'confirm') { var review = state().review; if (review) request(review.action, review.target); return; }
+    set({ notice: '', error: '', review: { action: action, target: control.dataset.target, label: control.dataset.label || control.dataset.target } });
+    renderBrowserSettings(); root().querySelector('[data-settings-action="cancel"]').focus();
+  });
+}
+function renderRows() {
+  var el = root(), s = state(); if (!el || !s.open) return;
+  var rows = el.querySelector('.browser-settings-rows'); if (!rows) return;
+  var filter = (s.filter || '').toLowerCase();
+  var data = s.data || { sites: [], history: [] };
+  if (s.page === 'history') {
+    rows.innerHTML = data.history.filter(function (entry) { return entry.url.toLowerCase().includes(filter); }).map(function (entry) {
+      return '<div class="browser-settings-row"><div><span class="browser-settings-url">' + escapeHtml(entry.url) + '</span><small>' + escapeHtml(new Date(entry.at).toLocaleString()) + '</small></div>' + button('Remove', 'delete_history', entry.id, entry.url) + '</div>';
+    }).join('');
+  } else {
+    rows.innerHTML = data.sites.filter(function (site) { return site.host.toLowerCase().includes(filter); }).map(function (site) {
+      return '<details><summary>' + escapeHtml(site.host) + '<small>' + site.cookies.length + (site.cookies.length === 1 ? ' cookie · ' : ' cookies · ') + site.origins.length + (site.origins.length === 1 ? ' storage origin' : ' storage origins') + '</small></summary><div class="browser-settings-row"><span>Cookies and site storage</span>' + button('Remove site data', 'delete_site', site.host) + '</div>' +
+        site.origins.map(function (origin) { return '<p class="browser-settings-origin">' + escapeHtml(origin.origin) + '<small>' + origin.localStorage + ' localStorage entries · ' + origin.databases + ' IndexedDB databases</small></p>'; }).join('') +
+        site.cookies.map(function (cookie) {
+          var info = cookie.domain + cookie.path + ' · ' + (cookie.expires === -1 ? 'Session cookie' : 'Expires ' + new Date(cookie.expires * 1000).toLocaleDateString()) + (cookie.httpOnly ? ' · HttpOnly' : '') + (cookie.secure ? ' · Secure' : '') + (cookie.partitioned ? ' · Partitioned' : '');
+          return '<div class="browser-settings-row"><div><span>' + escapeHtml(cookie.name) + '</span><small>' + escapeHtml(info) + '</small></div>' + button('Remove cookie', 'delete_cookie', cookie.id, cookie.name + ' · ' + cookie.domain + cookie.path) + '</div>';
+        }).join('') + '</details>';
+    }).join('');
+  }
+  if (!rows.innerHTML) rows.innerHTML = '<p class="browser-settings-muted">' + (s.pending && !s.data ? 'Loading saved data…' : filter ? 'No matching entries.' : s.page === 'history' ? 'No saved browsing history.' : 'No saved cookies or site data.') + '</p>';
+  rows.querySelectorAll('button').forEach(function (control) { control.disabled = !!s.pending || !store.get('connected'); });
+}
+export function renderBrowserSettings() {
+  var el = root(); if (!el) return;
+  var s = state(), panel = el.closest('.shared-browser-panel');
+  var browser = store.get('sharedBrowser');
+  var trigger = panel.querySelector('[data-action="settings"]');
+  trigger.hidden = !(browser && browser.personalCookiesAvailable);
+  trigger.disabled = !store.get('connected');
+  trigger.setAttribute('aria-expanded', String(!!s.open));
+  el.hidden = !s.open;
+  panel.classList.toggle('browser-settings-open', !!s.open);
+  if (!s.open) return;
+  var key = JSON.stringify([s, store.get('connected')]); if (el.dataset.key === key) return; el.dataset.key = key;
+  var page = s.page || 'sites';
+  el.innerHTML = '<div class="browser-settings-heading">' + button('Back to browser', 'back') + '<h3>Browser settings</h3></div><p class="browser-settings-muted">Personal · Shared across your Mates. Incognito tabs do not save data here.</p>' +
+    '<nav aria-label="Browser settings sections">' + button('Cookies & site data', 'sites') + button('History', 'history') + '</nav>' +
+    '<p class="browser-settings-muted">' + (page === 'sites' ? 'Cookies, localStorage and IndexedDB are saved for your account. New personal tabs restore saved site storage. Removing data may sign you out. Removals also apply to open personal tabs. Sites may create new data afterwards.' : 'Your latest 500 page visits. Clearing this list leaves open tabs, their Back/Forward navigation and conversation activity unchanged.') + '</p>' +
+    '<div class="browser-settings-tools"><input data-settings-filter aria-label="Filter saved browser data" placeholder="' + (page === 'sites' ? 'Find a site' : 'Find a page') + '" value="' + escapeHtml(s.filter || '') + '">' + button('Refresh', 'refresh') + button(page === 'sites' ? 'Clear all site data' : 'Clear history', page === 'sites' ? 'clear_data' : 'clear_history') + '</div>' +
+    '<p class="browser-settings-feedback" role="status">' + escapeHtml(s.error || (!store.get('connected') ? 'Disconnected. Reconnect and refresh to see current saved data.' : s.pending ? 'Updating…' : s.notice || '')) + '</p>' +
+    (s.review ? '<div class="browser-settings-review" role="group" aria-label="Confirm removal"><strong>' + (s.review.action.includes('history') ? 'Remove browsing history?' : 'Remove saved site data?') + '</strong><p>' + (s.review.action.includes('history') ? 'This removes ' + (s.review.action === 'clear_history' ? 'all saved visits' : 'this saved visit') + ' from your personal history.' : s.review.action === 'delete_cookie' ? 'This removes ' + escapeHtml(s.review.label) + ' across your personal Mate browsers and may sign you out.' : 'This removes ' + (s.review.action === 'clear_data' ? 'all cookies and site storage' : 'cookies and storage for ' + escapeHtml(s.review.target)) + ' across your personal Mate browsers and may sign you out.') + '</p>' + button('Cancel', 'cancel') + button('Remove', 'confirm') + '</div>' : '') +
+    '<div class="browser-settings-rows"></div>';
+  el.querySelector('[data-settings-action="' + page + '"]').setAttribute('aria-current', 'page');
+  el.querySelectorAll('button').forEach(function (control) { control.disabled = control.dataset.settingsAction !== 'back' && (!!s.pending || !store.get('connected')); });
+  renderRows();
+}
+export function handleBrowserSettingsMessage(msg) {
+  if (!msg.requestId || msg.requestId !== state().requestId) return false;
+  if (msg.type === 'shared_browser_settings') {
+    var removed = !!state().review;
+    set({ data: msg.settings, pending: false, review: null, error: '', notice: removed ? 'Removed from your saved browser data.' : '' });
+  } else if (msg.type === 'shared_browser_error') set({ pending: false, error: msg.error });
+  else return false;
+  renderBrowserSettings();
+  if (state().open && removed) root().querySelector('[data-settings-action="refresh"]').focus();
+  return true;
+}

package/lib/public/modules/shared-browser-tabs.js

@@ -1,10 +1,11 @@
+import { iconHtml, refreshIcons } from './icons.js';
 import { store } from './store.js';
 
 export function renderBrowserTabs(el, select, send) {
   var bar = el.querySelector('.shared-browser-tabs');
   var tabs = store.get('sharedBrowsers') || [];
   var selected = store.get('sharedBrowser');
-  var key = JSON.stringify([tabs.map(function (tab) { return [tab.id, tab.url, tab.control, tab.phase]; }), selected && selected.id, store.get('connected')]);
+  var key = JSON.stringify([tabs.map(function (tab) { return [tab.id, tab.url, tab.control, tab.phase, tab.incognito, tab.personalCookiesAvailable]; }), selected && selected.id, store.get('connected')]);
   if (bar.dataset.key === key) return;
   bar.dataset.key = key;
   bar.replaceChildren();
@@ -14,9 +15,9 @@ export function renderBrowserTabs(el, select, send) {
     button.setAttribute('aria-selected', String(!!selected && selected.id === tab.id));
     var title = 'Tab ' + (index + 1);
     try { if (tab.url) title = new URL(tab.url).hostname; } catch (e) {}
-    var label = document.createElement('span'); label.textContent = title;
+    var label = document.createElement('span'); label.textContent = title + (tab.personalCookiesAvailable && tab.incognito ? ' · Incognito' : '');
     var owner = document.createElement('small'); owner.textContent = tab.phase === 'ended' ? 'Ended' : tab.control === 'agent' ? 'Shared' : 'You only';
-    button.append(label, owner); button.title = title + ' · ' + (tab.phase === 'ended' ? 'Ended' : tab.control === 'agent' ? 'You and Clay can control this tab' : 'Only you can control this tab. Clay is paused.');
+    button.append(label, owner); button.title = title + ' · ' + (tab.incognito === false ? 'Personal browser' : 'Incognito') + ' · ' + (tab.phase === 'ended' ? 'Ended' : tab.control === 'agent' ? 'You and Clay can control this tab' : 'Only you can control this tab. Clay is paused.');
     button.onclick = function () { select(tab.id); };
     button.onkeydown = function (event) {
       var next = event.key === 'ArrowRight' ? (index + 1) % tabs.length : event.key === 'ArrowLeft' ? (index + tabs.length - 1) % tabs.length : event.key === 'Home' ? 0 : event.key === 'End' ? tabs.length - 1 : -1;
@@ -28,6 +29,15 @@ export function renderBrowserTabs(el, select, send) {
     item.append(button, close); bar.appendChild(item);
   });
   var add = document.createElement('button'); add.type = 'button'; add.textContent = '+'; add.setAttribute('aria-label', 'New browser tab'); add.disabled = !store.get('connected');
+  add.title = selected && selected.personalCookiesAvailable ? 'New tab · Personal browser' : 'New incognito tab';
   add.onclick = function () { send('open', { newTab: true }); };
   bar.appendChild(add);
+  if (selected && selected.personalCookiesAvailable) {
+    var incognito = document.createElement('button'); incognito.type = 'button';
+    incognito.innerHTML = iconHtml('glasses');
+    incognito.setAttribute('aria-label', 'New incognito tab'); incognito.title = 'New incognito tab · Site data is not saved';
+    incognito.disabled = !store.get('connected');
+    incognito.onclick = function () { send('open', { newTab: true, incognito: true }); };
+    bar.appendChild(incognito); refreshIcons();
+  }
 }

package/lib/public/modules/shared-browser.js

@@ -1,3 +1,5 @@
+import { browserLinkTarget, initBrowserLinks } from './clay-browser-links.js';
+import { browserSettingsHtml, bindBrowserSettings, renderBrowserSettings, closeBrowserSettings, handleBrowserSettingsMessage } from './shared-browser-settings.js';
 import { renderBrowserTabs } from './shared-browser-tabs.js';
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
@@ -50,15 +52,15 @@ function ensurePanel() {
   el.className = 'shared-browser-panel hidden';
   el.setAttribute('aria-label', 'Shared browser');
   el.innerHTML = '<header class="shared-browser-header"><span class="shared-browser-title">' + iconHtml('globe') + 'Browser</span><span class="shared-browser-phase" role="status">Ready</span><div class="shared-browser-window">' +
-    iconButton('wide', 'chevrons-left-right', 'Widen browser panel') + iconButton('fullscreen', 'maximize-2', 'Toggle browser fullscreen') + iconButton('hide', 'x', 'Hide browser panel') + '</div></header>' +
+    iconButton('settings', 'settings-2', 'Browser settings') + iconButton('wide', 'chevrons-left-right', 'Widen browser panel') + iconButton('fullscreen', 'maximize-2', 'Toggle browser fullscreen') + iconButton('hide', 'x', 'Hide browser panel') + '</div></header>' +
     '<div class="shared-browser-tabs" role="tablist" aria-label="Browser tabs"></div><form class="shared-browser-address">' + iconButton('back', 'arrow-left', 'Back') + iconButton('forward', 'arrow-right', 'Forward') + iconButton('reload', 'rotate-cw', 'Reload') +
     '<input aria-label="Browser address" placeholder="Enter a URL" type="text" autocomplete="off" spellcheck="false"><button type="submit" aria-label="Open address">' + iconHtml('arrow-right') + '</button></form>' +
-    '<div class="shared-browser-viewport"><div class="shared-browser-monitor"><div class="shared-browser-pointer-layer" aria-hidden="true"><div class="shared-browser-pointer" hidden><svg viewBox="0 0 24 28"><path d="M3 2 L3 22 L8 17 L12 26 L16 24 L12 15 L20 15 Z"/></svg><i></i></div></div><canvas width="1280" height="800" tabindex="0" aria-label="Shared browser page"></canvas>' +
-    '<div class="shared-browser-empty">' + iconHtml('globe') + '<h3>A browser you can share with your Driver</h3><p>Enter an address to browse together.<br>Localhost connects to the Clay host.</p><p class="shared-browser-private">Cookies last only for this browser session.</p></div>' +
+    browserSettingsHtml() + '<div class="shared-browser-viewport"><div class="shared-browser-monitor"><div class="shared-browser-pointer-layer" aria-hidden="true"><div class="shared-browser-pointer" hidden><svg viewBox="0 0 24 28"><path d="M3 2 L3 22 L8 17 L12 26 L16 24 L12 15 L20 15 Z"/></svg><i></i></div></div><canvas width="1280" height="800" tabindex="0" aria-label="Shared browser page"></canvas>' +
+    '<div class="shared-browser-empty">' + iconHtml('globe') + '<h3>A browser you can use with Clay</h3><p>Enter an address to browse together.<br>Localhost connects to the Clay host.</p><p class="shared-browser-private">Site data lasts only for this browser session.</p></div>' +
     '<textarea class="shared-browser-keyboard" aria-label="Type into shared browser" autocomplete="off" autocapitalize="off" spellcheck="false"></textarea><span class="shared-browser-monitor-brand" aria-hidden="true">Clay Studio</span><span class="shared-browser-monitor-detail" aria-hidden="true"></span><span class="shared-browser-monitor-stand" aria-hidden="true"></span></div><div class="shared-browser-caption"><span class="shared-browser-monitor-label"></span>' + activityHtml() + '</div></div>' +
     '<p class="shared-browser-error hidden" role="status"></p>' +
     '<footer class="shared-browser-footer"><div class="shared-browser-control"><span class="shared-browser-control-status" role="status" aria-live="polite">You and Clay can control this browser</span><button type="button" data-action="control" aria-pressed="false"></button></div>' +
-    '<div class="shared-browser-details">' + viewportMenuHtml() + '<button type="button" data-action="end">End browser</button></div></footer>';
+    '<div class="shared-browser-details"><span class="shared-browser-cookie-mode"></span>' + viewportMenuHtml() + '<button type="button" data-action="end">End browser</button></div></footer>';
   root.appendChild(el);
   el.querySelector('[data-action="hide"]').onclick = hideSharedBrowser;
   el.querySelector('[data-action="wide"]').onclick = function () { var wide = !(store.get('sharedBrowserUi') || {}).wide; ui({ wide: wide }); render(); };
@@ -69,8 +71,9 @@ function ensurePanel() {
     var browser = store.get('sharedBrowser');
     if (browser) send('control', { control: browser.control === 'user' ? 'agent' : 'user' });
   };
-  el.querySelector('[data-action="end"]').onclick = function () { var browser = store.get('sharedBrowser'); send(browser && browser.phase === 'ended' ? 'open' : 'end'); };
+  el.querySelector('[data-action="end"]').onclick = function () { var browser = store.get('sharedBrowser'); send(browser && browser.phase === 'ended' ? 'open' : 'end', browser && browser.phase === 'ended' ? { incognito: browser.incognito } : undefined); };
   bindViewportMenu(el);
+  bindBrowserSettings(el);
   var observer = new ResizeObserver(layoutMonitor);
   observer.observe(el.querySelector('.shared-browser-viewport'));
   bindBrowserInput(el.querySelector('canvas'), el.querySelector('textarea'));
@@ -141,11 +144,16 @@ function render() {
   el.querySelector('[data-action="control"]').hidden = !live;
   el.querySelector('[data-action="end"]').disabled = !browser || !connected;
   el.querySelector('[data-action="end"]').textContent = browser && browser.phase === 'ended' ? 'New browser' : 'End browser';
+  var personal = browser && browser.incognito === false;
+  el.querySelector('.shared-browser-cookie-mode').textContent = personal ? 'Personal browser' : 'Incognito';
+  el.querySelector('.shared-browser-cookie-mode').title = personal ? 'Cookies and site storage are saved for your account across your Mates.' : 'Cookies and site storage are isolated and discarded when this tab ends.';
+  el.querySelector('.shared-browser-private').textContent = personal ? 'Your cookies and site storage are remembered across your Mates and browser restarts.' : 'Site data lasts only for this browser session.';
   var error = state.error || (browser && browser.error) || '';
   el.querySelector('.shared-browser-error').textContent = error;
   el.querySelector('.shared-browser-error').classList.toggle('hidden', !error);
   el.querySelector('.shared-browser-empty').classList.toggle('hidden', !!(browser && browser.url && state.hasFrame));
   renderViewportMenu(el, browser, operable);
+  renderBrowserSettings();
   renderBrowserActivity(el, browser, connected);
   layoutMonitor();
 }
@@ -163,6 +171,16 @@ function selectBrowserTab(id) {
   setBrowserTab(browser);
   send('view', { visible: desktop() && !document.hidden }); render();
 }
+export function openSharedBrowserAt(value) {
+  var url = browserLinkTarget('browser:' + value);
+  if (!url) throw new Error('Enter a valid HTTP or HTTPS browser address.');
+  if (!desktop()) throw new Error('Clay Browser is available on desktop screens.');
+  if (!eligible()) throw new Error('Browser access is unavailable in this conversation.');
+  if (!store.get('connected')) throw new Error('Reconnect before opening this browser link.');
+  ensurePanel(); closeBrowserSettings(false);
+  claimRightWorkbench('browser'); store.set({ sharedBrowserOpen: true });
+  ui({ error: '' }); send('open', { url: url }); render();
+}
 export function openSharedBrowser() {
   if (!eligible() || !store.get('connected')) return;
   ensurePanel();
@@ -175,6 +193,7 @@ export function openSharedBrowser() {
 }
 export function hideSharedBrowser() {
   closeViewportMenu();
+  closeBrowserSettings();
   clearBrowserInput();
   if (store.get('sharedBrowserOpen')) send('view', { visible: false });
   store.set({ sharedBrowserOpen: false });
@@ -184,6 +203,7 @@ export function hideSharedBrowser() {
 export function handleSharedBrowserMessage(msg) {
   if (!msg.type || msg.type.indexOf('shared_browser_') !== 0) return false;
   if (String(msg.sessionId) !== String(store.get('activeSessionId'))) return true;
+  if (handleBrowserSettingsMessage(msg)) return true;
   if (msg.type === 'shared_browser_state') {
     var old = store.get('sharedBrowser');
     var tabs = msg.browsers || (msg.browser ? [msg.browser] : []);
@@ -217,6 +237,7 @@ export function handleSharedBrowserMessage(msg) {
   return true;
 }
 export function initSharedBrowser() {
+  initBrowserLinks();
   var button = document.getElementById('shared-browser-btn');
   if (button) button.onclick = openSharedBrowser;
   var toggle = document.getElementById('shared-browser-toggle-btn');
@@ -233,7 +254,7 @@ registerRightWorkbench('browser', hideSharedBrowser);
 store.subscribe(function (state, previous) {
   if (state.currentSlug !== previous.currentSlug || state.activeSessionId !== previous.activeSessionId || state.myUserId !== previous.myUserId) {
     clearBrowserInput(); releaseRightWorkbench('browser');
-    store.set({ sharedBrowser: null, sharedBrowsers: [], sharedBrowserOpen: false, sharedBrowserUi: {} });
+    store.set({ sharedBrowser: null, sharedBrowsers: [], sharedBrowserOpen: false, sharedBrowserUi: {}, sharedBrowserSettings: {} });
     if (state.connected) send('state_request');
     render();
   } else if (state.connected !== previous.connected) {

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

@@ -1,3 +1,4 @@
+import { handlePaneBrowserMessage } from './pane-browser-bridge.js';
 import { openWireframe } from './wireframe-workbench.js';
 // Two-pane iframe shell for the split-view spike.
 
@@ -168,6 +169,7 @@ function handlePaneMessage(event) {
     return;
   }
   if (handlePaneIssueMessage(event, host)) return;
+  if (handlePaneBrowserMessage(event, host)) return;
   if (handlePaneFileMessage(event, host, openFile, revealFilesPanel)) return;
   if (msg.type !== "clay-pane-context") return;
   var frames = host.querySelectorAll(".split-pane-frame");

package/lib/public/modules/theme.js

@@ -614,7 +614,14 @@ function rebuildPicker() {
 
 // --- Init ---
 export function initTheme() {
-  currentThemeId = getSystemMode() === 'light' ? DEFAULT_LIGHT_THEME_ID : DEFAULT_DARK_THEME_ID;
+  var seed = window.__clayAppearanceSeed;
+  if (seed && seed.configured) store.set({ appearancePreference: seed });
+  var initialMode = seed && seed.configured && (seed.mode === 'light' || seed.mode === 'dark')
+    ? seed.mode
+    : getSystemMode();
+  currentThemeId = seed && seed.configured && seed[initialMode + 'Theme']
+    ? seed[initialMode + 'Theme']
+    : (initialMode === 'light' ? DEFAULT_LIGHT_THEME_ID : DEFAULT_DARK_THEME_ID);
   document.body.classList.toggle('wide-view', isWideView());
 
   // Load all themes from server, then apply properly

package/lib/public/modules/tools.js

@@ -244,6 +244,7 @@ export function renderAskUserQuestion(toolId, input) {
 
   var container = document.createElement("div");
   container.className = "ask-user-container";
+  if (input.source === "mcp-import") container.classList.add("mcp-import-consent");
   container.dataset.toolId = toolId;
   var requestKey = getAskUserRequestKey(toolId);
   container.dataset.askUserRequestKey = requestKey;
@@ -364,7 +365,7 @@ export function renderAskUserQuestion(toolId, input) {
       }
     });
     otherDiv.appendChild(otherInput);
-    qDiv.appendChild(otherDiv);
+    if (q.allowOther !== false || !(q.options || []).length) qDiv.appendChild(otherDiv);
     container.appendChild(qDiv);
   });
 

package/lib/public/style.css

@@ -59,6 +59,7 @@
 @import url("css/home-debate-planning.css");
 @import url("css/home-mate-creation.css");
 @import url("css/home-mate-settings.css");
+@import url("css/mate-avatar-gallery.css");
 @import url("css/home-mate-model-picker.css");
 @import url("css/project-mate-creation.css");
 @import url("css/home-debate-live.css");

package/lib/public/sw.js

@@ -1,4 +1,4 @@
-var CACHE_NAME = "clay-offline-v4";
+var CACHE_NAME = "clay-offline-v5";
 
 self.addEventListener("install", function (event) {
   event.waitUntil(self.skipWaiting());
@@ -23,6 +23,8 @@ self.addEventListener("activate", function (event) {
 function shouldCache(request, response) {
   if (request.method !== "GET") return false;
   if (!response || !response.ok) return false;
+  var cacheControl = response.headers && response.headers.get("Cache-Control") || "";
+  if (/(^|,)\s*(private|no-store)(?:\s*=\s*[^,]*)?(?=\s*(?:,|$))/i.test(cacheControl)) return false;
   // Cache same-origin static assets and CDN resources (jsdelivr, fonts)
   var url = new URL(request.url);
   if (url.origin === self.location.origin) return true;

package/lib/sdk-bridge.js

@@ -1812,7 +1812,7 @@ function createSDKBridge(opts) {
     }
     var hasSharedBrowserCatalog = sessionToolDefs.some(function (definition) { return definition.name === "shared_browser"; });
     var recoverCodexBrowserTools = sessionAdapter.vendor === "codex" && !!session.cliSessionId
-      && hasSharedBrowserCatalog && Number(session.codexSharedBrowserToolCatalogVersion || 0) < 5;
+      && hasSharedBrowserCatalog && Number(session.codexSharedBrowserToolCatalogVersion || 0) < 6;
     var recoverCodexIssueTools = sessionAdapter.vendor === "codex"
       && !!session.cliSessionId
       && hasIssueCatalog
@@ -1931,6 +1931,12 @@ function createSDKBridge(opts) {
       return snapshotDef;
     }
 
+    var externalQueryBridge = require('./mcp-query-bridge').createQueryBridge({ valid: queryContextAvailable,
+      getServers: function () { return getRemoteMcpServers ? getRemoteMcpServers(session) || {} : {}; } });
+    var externalToolDefs = sessionAdapter.vendor === 'codex' ? externalQueryBridge.dynamicDefs() : [];
+    if (externalToolDefs.length) { sessionToolDefs = sessionToolDefs.concat(externalToolDefs); queryToolSnapshots.set(session, { generation: queryGeneration, defs: sessionToolDefs.slice() }); }
+    var recoverCodexExternalTools = sessionAdapter.vendor === 'codex' && !!session.cliSessionId && (externalToolDefs.length > 0 || isMate);
+
     // Give fresh queries an immediate provisional label. The visible user
     // message in history wins over `text`, which may contain an internal
     // provider wrapper rather than what the person typed.
@@ -1986,7 +1992,7 @@ function createSDKBridge(opts) {
       dynamicTools: sessionToolDefs,
       // Codex persists dynamic tools with a thread. A stale authorized Driver
       // gets this exact-query bridge; its handlers still reauthorize live.
-      sessionMcpServer: (recoverCodexIssueTools || recoverCodexQuestionTools || recoverCodexBrowserTools || recoverCodexLinearTools || recoverCodexYouTools) ? getCodexSessionMcpServer(session, queryGeneration) : undefined,
+      sessionMcpServer: (recoverCodexIssueTools || recoverCodexQuestionTools || recoverCodexBrowserTools || recoverCodexLinearTools || recoverCodexYouTools || recoverCodexExternalTools) ? getCodexSessionMcpServer(session, queryGeneration) : undefined,
       callDynamicTool: function (toolName, args) {
         var toolDef = findSessionToolDef(toolName);
         if (toolDef && typeof toolDef.handler === "function") {
@@ -2208,7 +2214,7 @@ function createSDKBridge(opts) {
       if (hasYouCatalog) codexCatalogCandidate = Object.assign({}, codexCatalogCandidate || {}, { generation: queryGeneration, youVersion: 1 });
       if (hasLinearCatalog) codexCatalogCandidate = Object.assign({}, codexCatalogCandidate || {}, { generation: queryGeneration, linearVersion: 1 });
       if (hasSharedBrowserCatalog) {
-        codexCatalogCandidate = Object.assign({}, codexCatalogCandidate || {}, { generation: queryGeneration, sharedBrowserVersion: 5 });
+        codexCatalogCandidate = Object.assign({}, codexCatalogCandidate || {}, { generation: queryGeneration, sharedBrowserVersion: 6 });
       }
       if (hasIssueCatalog) {
         codexCatalogCandidate = Object.assign({}, codexCatalogCandidate || {}, {

package/lib/server-appearance-settings.js

@@ -34,6 +34,18 @@ function attachAppearanceSettings(ctx) {
       fs.renameSync(defaultPath + '.tmp', defaultPath);
     }
   }
+  function getInitialAppearance(req) {
+    var user = identity(req);
+    if (!user) return null;
+    var saved = read(user);
+    return {
+      configured: saved.configured,
+      theme: saved.theme,
+      mode: saved.mode,
+      lightTheme: saved.lightTheme || null,
+      darkTheme: saved.darkTheme || null
+    };
+  }
   function handleRequest(req, res, url) {
     if (url !== '/api/user/appearance') return false;
     var user = identity(req);
@@ -66,6 +78,6 @@ function attachAppearanceSettings(ctx) {
     });
     return true;
   }
-  return { handleRequest: handleRequest };
+  return { handleRequest: handleRequest, getInitialAppearance: getInitialAppearance };
 }
 module.exports = { attachAppearanceSettings: attachAppearanceSettings };

package/lib/server-dm.js

@@ -69,6 +69,7 @@ function attachDm(ctx) {
             id: mate.id,
             displayName: mp.displayName || mate.name || "New Mate",
             username: mate.id,
+            avatarCatalogId: mp.avatarCatalogId || "",
             avatarStyle: mp.avatarStyle || "imprint",
             avatarSeed: mp.avatarSeed || mate.id,
             avatarColor: mp.avatarColor || "#5857fc",

package/lib/server-home-chat-events.js

@@ -3,7 +3,7 @@
 function homeDebateQuestions(input) {
   var source = input && Array.isArray(input.questions) && input.questions[0] ? input.questions[0] : null;
   if (!source) return [];
-  var question = { header: source.header || "", question: source.question || "", multiSelect: false, options: [] };
+  var question = { header: source.header || "", question: source.question || "", multiSelect: false, allowOther: source.allowOther !== false, options: [] };
   var options = Array.isArray(source.options) ? source.options.slice(0, 6) : [];
   for (var i = 0; i < options.length; i++) question.options.push({ label: options[i].label || "Option", description: options[i].description || "" });
   return [question];
@@ -36,6 +36,7 @@ function findDebateTurn(messages, event) {
 function debateIdentity(source, fallback) {
   var prior = fallback || {};
   return {
+    avatarCatalogId: source.avatarCatalogId || prior.avatarCatalogId || "",
     avatarStyle: source.avatarStyle || prior.avatarStyle || "imprint",
     avatarSeed: source.avatarSeed || prior.avatarSeed || source.mateId || "mate",
     avatarColor: source.avatarColor || prior.avatarColor || "",
@@ -112,7 +113,7 @@ function applyAssignmentHistoryEvent(messages, event) {
   messages.push({ role: "assignment", assignment: assignment });
 }
 
-function historyToHomeChat(history, debateSetupMode, mateCreationMode) {
+function historyToHomeChat(history, debateSetupMode, mateCreationMode, pendingAskUser) {
   var messages = [];
   var pending = "";
   var interviewMode = debateSetupMode === true || mateCreationMode === true;
@@ -124,6 +125,12 @@ function historyToHomeChat(history, debateSetupMode, mateCreationMode) {
   for (var i = 0; i < history.length; i++) {
     var event = history[i];
     if (!event) continue;
+    if (event.type === 'tool_executing' && event.name === 'AskUserQuestion' && event.source === 'mcp-import') {
+      flushAssistant();
+      var activeConsent = pendingAskUser === undefined || !!(pendingAskUser && pendingAskUser[event.id]);
+      messages.push({ role: 'question', flow: 'mcp_import', toolId: event.id, questions: homeDebateQuestions(event.input), status: activeConsent ? 'pending' : 'expired', error: activeConsent ? '' : 'This import consent is no longer active. Ask for a new scan and review.' });
+      continue;
+    }
     if (event.type === "project_assignment_proposal" || event.type === "project_assignment_status") {
       flushAssistant();
       applyAssignmentHistoryEvent(messages, event);
@@ -185,7 +192,7 @@ function historyToHomeChat(history, debateSetupMode, mateCreationMode) {
     } else if (interviewMode && event.type === "tool_executing" && event.name === "AskUserQuestion" && event.id && event.input) {
       flushAssistant();
       messages.push({ role: "question", flow: mateCreationMode === true ? "mate_creation" : "debate", toolId: event.id, questions: homeDebateQuestions(event.input), status: "pending", error: "" });
-    } else if ((event.type === "ask_user_answered" || event.type === "home_debate_question_expired" || event.type === "home_mate_creation_question_expired") && event.toolId) {
+    } else if ((event.type === "ask_user_answered" || event.type === "home_debate_question_expired" || event.type === "home_mate_creation_question_expired" || event.type === "mcp_import_consent_expired") && event.toolId) {
       for (var k = messages.length - 1; k >= 0; k--) {
         if (messages[k].role === "question" && messages[k].toolId === event.toolId) {
           messages[k].status = event.type === "ask_user_answered" ? "answered" : "expired";
@@ -273,7 +280,7 @@ function transformEvent(event, mateId, session, requestId, stableSessionId) {
   }
   if (session && session.homeDebatePlanning === true && HOME_DEBATE_EVENT_TYPES[event.type]) {
     var live = { type: "home_debate_event", eventType: event.type };
-    var fields = ["turnId", "decisionId", "decision", "toolName", "command", "commandTruncated", "topic", "format", "moderatorId", "moderatorName", "panelists", "mateName", "role", "round", "activity", "delta", "text", "reason", "action", "avatarStyle", "avatarSeed", "avatarColor", "avatarCustom"];
+    var fields = ["turnId", "decisionId", "decision", "toolName", "command", "commandTruncated", "topic", "format", "moderatorId", "moderatorName", "panelists", "mateName", "role", "round", "activity", "delta", "text", "reason", "action", "avatarCatalogId", "avatarStyle", "avatarSeed", "avatarColor", "avatarCustom"];
     for (var fi = 0; fi < fields.length; fi++) if (Object.prototype.hasOwnProperty.call(event, fields[fi])) live[fields[fi]] = event[fields[fi]];
     if (event.mateId) live.speakerMateId = event.mateId;
     return Object.assign(live, metadata);
@@ -298,6 +305,9 @@ function transformEvent(event, mateId, session, requestId, stableSessionId) {
   if (event.type === "debate_proposal_resolved" && event.proposalId) return Object.assign({ type: "home_debate_proposal_resolved", proposalId: event.proposalId, action: event.action || "cancel", error: event.error || "" }, metadata);
   if (session && session.mateCreationMode === true && event.type === "mate_creation_proposal" && event.proposal) return Object.assign({ type: "home_mate_creation_proposal", proposal: event.proposal }, metadata);
   if (session && session.mateCreationMode === true && event.type === "mate_creation_proposal_resolved" && event.proposalId) return Object.assign({ type: "home_mate_creation_proposal_resolved", proposalId: event.proposalId, action: event.action || "cancel", createdMateId: event.mateId || null, mateName: event.mateName || null, error: event.error || "" }, metadata);
+  if (event.type === 'tool_executing' && event.name === 'AskUserQuestion' && event.source === 'mcp-import') return Object.assign({ type: 'home_mcp_import_question', toolId: event.id, questions: homeDebateQuestions(event.input) }, metadata);
+  if (event.type === 'mcp_import_consent_expired') return Object.assign({ type: 'home_mcp_import_question_resolved', toolId: event.toolId, status: 'expired', error: event.error }, metadata);
+  if (session && event.type === 'ask_user_answered' && event.toolId && (session.history || []).some(function (item) { return item.id === event.toolId && item.source === 'mcp-import'; })) return Object.assign({ type: 'home_mcp_import_question_resolved', toolId: event.toolId, status: 'answered', answers: event.answers }, metadata);
   if (session && session.debateSetupMode === true && event.type === "tool_executing" && event.name === "AskUserQuestion" && event.id && event.input) {
     return Object.assign({ type: "home_debate_question", toolId: event.id, questions: homeDebateQuestions(event.input) }, metadata);
   }

package/lib/server-home-chat.js

@@ -184,6 +184,12 @@ function attachHomeChat(deps) {
       }
     });
     if (!unsubscribe) return;
+    var unregisterConsent = null;
+    if (openedSession && typeof found.ctx.registerMcpConsentViewer === 'function') {
+      try { unregisterConsent = found.ctx.registerMcpConsentViewer(ws, openedSession); } catch (error) {}
+    }
+    var unsubscribeEvents = unsubscribe;
+    unsubscribe = function () { if (unregisterConsent) unregisterConsent(); unsubscribeEvents(); };
     ws[tapKey] = {
       unsubscribe: unsubscribe,
       sessionId: sessionId,
@@ -238,7 +244,7 @@ function attachHomeChat(deps) {
         requestId: requestId || null,
         model: session.model || null,
         vendor: session.vendor || null,
-        messages: historyToHomeChat(session.history || [], session.debateSetupMode === true, session.mateCreationMode === true),
+        messages: historyToHomeChat(session.history || [], session.debateSetupMode === true, session.mateCreationMode === true, session.pendingAskUser),
         isProcessing: session.isProcessing === true,
       };
       if (session.homeClayEntryMode === "search") {
@@ -293,6 +299,7 @@ function attachHomeChat(deps) {
     homeModels: homeModels, isActorLive: isActorLive, persistActiveSession: persistActiveSession,
   });
   var homeMateCreation = attachHomeMateCreation({ findMateProject: findMateProject, resolveHomeSession: resolveHomeSession, sessionReference: sessionReference, setupTap: setupTap, sendHistory: sendHistory, sendSessionList: sendSessionList, sendError: sendError, sendModelError: sendModelError, homeModels: homeModels, isActorLive: isActorLive, persistActiveSession: persistActiveSession });
+  var homeMcpConsent = require('./server-home-mcp-consent').attachHomeMcpConsent({ findMateProject: findMateProject, resolveHomeSession: resolveHomeSession, messageTap: messageTap, isActorLive: isActorLive, sendError: sendError });
   var homeClayEntry = attachHomeClayEntry({ findMateProject: findMateProject, ownsSession: ownsSession, sessionReference: sessionReference, setupSearchTap: setupSearchTap, sendHistory: sendHistory, sendSessionList: sendSessionList, sendError: sendError, sendModelError: sendModelError, homeModels: homeModels, isActorLive: isActorLive });
 
   async function openExactSession(ws, found, userId, selected, msg) {
@@ -449,7 +456,7 @@ function attachHomeChat(deps) {
       }
       return true;
     }
-    if (msg.type !== "issue_reference_resolve" && msg.type !== "home_debates_list" && msg.type !== "home_clay_ask" && msg.type !== "home_clay_session_resolve" && msg.type !== "home_clay_log_resolve" && msg.type !== "home_mate_present" && msg.type !== "home_mate_open" && msg.type !== "home_mate_sessions_list" && msg.type !== "home_mate_session_open" && msg.type !== "home_mate_send" && msg.type !== "home_mate_new_session" && msg.type !== "home_mate_debate_plan" && msg.type !== "home_debate_proposal_response" && msg.type !== "home_debate_question_response" && msg.type !== "home_debate_control" && msg.type !== "home_mate_creation_plan" && msg.type !== "home_mate_creation_question_response" && msg.type !== "home_mate_creation_proposal_response" && msg.type !== "home_mate_close" && msg.type !== "home_mate_memory_list" && msg.type !== "home_mate_knowledge_list" && msg.type !== "home_mate_models_get" && msg.type !== "home_mate_model_set") {
+    if (msg.type !== "issue_reference_resolve" && msg.type !== "home_debates_list" && msg.type !== "home_clay_ask" && msg.type !== "home_clay_session_resolve" && msg.type !== "home_clay_log_resolve" && msg.type !== "home_mate_present" && msg.type !== "home_mate_open" && msg.type !== "home_mate_sessions_list" && msg.type !== "home_mate_session_open" && msg.type !== "home_mate_send" && msg.type !== "home_mate_new_session" && msg.type !== "home_mate_debate_plan" && msg.type !== "home_debate_proposal_response" && msg.type !== "home_mcp_import_response" && msg.type !== "home_debate_question_response" && msg.type !== "home_debate_control" && msg.type !== "home_mate_creation_plan" && msg.type !== "home_mate_creation_question_response" && msg.type !== "home_mate_creation_proposal_response" && msg.type !== "home_mate_close" && msg.type !== "home_mate_memory_list" && msg.type !== "home_mate_knowledge_list" && msg.type !== "home_mate_models_get" && msg.type !== "home_mate_model_set") {
       return false;
     }
 
@@ -474,6 +481,7 @@ function attachHomeChat(deps) {
       return true;
     }
 
+    if (msg.type === "home_mcp_import_response") { homeMcpConsent.respond(ws, userId, msg); return true; }
     if (msg.type === "issue_reference_resolve") { resolveIssueLink(ws, msg); return true; }
     if (homeDebates.handle(ws, userId, msg)) return true;
     if (msg.type === "home_clay_ask") { homeClayEntry.start(ws, userId, msg); return true; }

package/lib/server-home-mcp-consent.js

@@ -0,0 +1,14 @@
+// Home transcript responses retain the project's server-owned consent request.
+function attachHomeMcpConsent(ctx) {
+  function respond(ws, userId, msg) {
+    var found = ctx.findMateProject(userId, msg.mateId || null, false);
+    var session = found && ctx.resolveHomeSession(found, userId, msg.sessionId);
+    var tap = ctx.messageTap(ws, msg), pending = session && session.pendingAskUser && session.pendingAskUser[msg.toolId];
+    if (!ctx.isActorLive(ws, userId) || !found || !session || !tap || tap.mateSlug !== found.slug || tap.sessionId !== session.localId || (tap.requestId || null) !== (msg.requestId || null) || !pending || !pending.request || pending.request.source !== 'mcp-import') {
+      ctx.sendError(ws, found && found.mate.id, 'This owner import consent is unavailable or expired.', msg.requestId || null, msg.sessionId || null, 'question_expired', { toolId: msg.toolId }); return;
+    }
+    if (!found.ctx.handleHomeAskUserResponse({ type: 'ask_user_response', toolId: msg.toolId, answers: msg.answers || {} }, session, ws)) ctx.sendError(ws, found.mate.id, 'This import consent could not be submitted. No import was authorized.', msg.requestId || null, msg.sessionId, 'question_refused', { toolId: msg.toolId });
+  }
+  return { respond: respond };
+}
+module.exports = { attachHomeMcpConsent: attachHomeMcpConsent };

package/lib/server-mates.js

@@ -304,7 +304,12 @@ function attachMates(ctx) {
         return true;
       }
       var mateCtx7 = mates.buildMateCtx(userId);
-      var updated = mates.updateMate(mateCtx7, msg.mateId, msg.updates);
+      var updated;
+      try { updated = mates.updateMate(mateCtx7, msg.mateId, msg.updates); }
+      catch (error) {
+        ws.send(JSON.stringify({ type: "mate_error", mateId: msg.mateId, requestId: msg.requestId, error: "Could not save this Mate. Your changes were not acknowledged; try again." }));
+        return true;
+      }
       if (updated && updated.error) {
         ws.send(JSON.stringify({ type: "mate_error", mateId: msg.mateId, requestId: msg.requestId, error: updated.error }));
         return true;

package/lib/server-settings.js

@@ -755,7 +755,10 @@ function attachSettings(ctx) {
     return false;
   }
 
-  return { handleRequest: handleRequest };
+  return {
+    handleRequest: handleRequest,
+    getInitialAppearance: appearanceSettings.getInitialAppearance
+  };
 }
 
 module.exports = { attachSettings: attachSettings };