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

package/lib/public/modules/home-mate-settings.js

@@ -8,7 +8,7 @@ import { store } from './store.js';
 import { getWs } from './ws-ref.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { confirmMateRemoval } from './mate-management.js';
-import { renderHomeMateAvatarEditor, confirmHomeMateAvatar, failHomeMateAvatar, clearHomeMateAvatarEditor } from './home-mate-avatar-editor.js';
+import { hasHomeMateAvatarDraft, homeMateAvatarSaving, renderHomeMateAvatarEditor, confirmHomeMateAvatar, failHomeMateAvatar, clearHomeMateAvatarEditor } from './home-mate-avatar-editor.js';
 import { resetHomeMateModelPicker, clearHomeMateModelPicker, hasHomeMateModelDraft, requestHomeMateModels, renderHomeMateModelPicker, applyHomeMateModelsState, applyHomeMateModelResult } from './home-mate-model-picker.js';
 
 var dialog = null;
@@ -73,16 +73,19 @@ function renderGeneral(body, mate) {
   description.textContent = "Manage " + getMateName(mate) + "’s identity and appearance.";
   body.appendChild(description);
   renderMateProfile(body, mate, renderDialogContent, function () {
+    if (homeMateAvatarSaving()) return;
+    if (store.get('mateSettingsAvatarOpen') && hasHomeMateAvatarDraft()) {
+      showConfirm('Discard this avatar choice?', function () { clearHomeMateAvatarEditor(); store.set({mateSettingsAvatarOpen:false}); renderDialogContent(); document.getElementById('mate-profile-avatar').focus(); }, 'Discard choice');
+      return;
+    }
+    clearHomeMateAvatarEditor();
     store.set({mateSettingsAvatarOpen: !store.get('mateSettingsAvatarOpen')});
     renderDialogContent();
   });
   if (store.get('mateSettingsAvatarOpen')) {
     var appearance = document.createElement("section");
     appearance.className = "mate-settings-appearance";
-    renderHomeMateAvatarEditor(appearance, mate, renderDialogContent);
-    var done = document.createElement('button'); done.type = 'button'; done.className = 'mate-settings-button'; done.textContent = 'Done';
-    done.addEventListener('click',function () { store.set({mateSettingsAvatarOpen:false}); renderDialogContent(); document.getElementById('mate-profile-avatar').focus(); });
-    appearance.appendChild(done);
+    renderHomeMateAvatarEditor(appearance, mate, renderDialogContent, store.get('mateSettingsAvatarDirect') ? function () { clearHomeMateAvatarEditor(); renderDialogContent(); closeHomeMateSettings(); } : null);
     body.appendChild(appearance);
   }
   renderMateColorPicker(body, mate, renderDialogContent);
@@ -118,7 +121,7 @@ function requestSection(section) {
 function savePending() {
   var prompt = store.get('mateInstructionsDraft');
   var model = store.get('mateModelDraft');
-  return mateColorSaving() || mateProfileSaving() || !!((prompt && prompt.status === 'saving') || (model && model.saveId));
+  return homeMateAvatarSaving() || mateColorSaving() || mateProfileSaving() || !!((prompt && prompt.status === 'saving') || (model && model.saveId));
 }
 
 function renderDialogContent() {
@@ -199,7 +202,7 @@ function handleDialogKeydown(event) {
 
 export function closeHomeMateSettings(force) {
   if (force !== true && savePending()) return false;
-  if (force !== true && (hasMateProfileDraft() || hasMateInstructionDraft() || hasHomeMateModelDraft())) {
+  if (force !== true && (hasHomeMateAvatarDraft() || hasMateProfileDraft() || hasMateInstructionDraft() || hasHomeMateModelDraft())) {
     var previous = document.activeElement;
     showConfirm("Discard unsaved Mate settings?", function () { closeHomeMateSettings(true); }, "Discard changes", false, function () { if (previous && previous.isConnected) previous.focus(); });
     document.getElementById("confirm-cancel").focus();
@@ -215,7 +218,7 @@ export function closeHomeMateSettings(force) {
   memoryState = null;
   knowledgeState = null;
   modelRequested = false;
-  store.set({mateSettingsAvatarOpen:false});
+  store.set({mateSettingsAvatarOpen:false, mateSettingsAvatarDirect:false});
   resetMateProfile();
   resetMateColor();
   clearHomeMateModelPicker();
@@ -230,12 +233,13 @@ export function closeHomeMateSettings(force) {
 export function openHomeMateSettings(mateId, opener, options) {
   var mate = getMate(mateId);
   if (!mate || (dialog && savePending())) return false;
-  if (dialog && (hasMateProfileDraft() || hasMateInstructionDraft() || hasHomeMateModelDraft())) {
+  if (dialog && (hasHomeMateAvatarDraft() || hasMateProfileDraft() || hasMateInstructionDraft() || hasHomeMateModelDraft())) {
     showConfirm("Discard unsaved Mate settings?", function () { closeHomeMateSettings(true); openHomeMateSettings(mateId, opener, options); }, "Discard changes", false);
     return false;
   }
   closeHomeMateSettings(true);
   resetMateInstructions(mateId);
+  store.set({ mateSettingsAvatarOpen: !!(options && options.avatar && !(mate.profile || {}).avatarLocked), mateSettingsAvatarDirect: !!(options && options.avatar) });
   dialogMateId = mateId;
   dialogOpener = opener || document.activeElement;
   dialogSection = options && ["model", "prompt"].indexOf(options.section) !== -1 ? options.section : "general";
@@ -308,7 +312,10 @@ export function openHomeMateSettings(mateId, opener, options) {
   requestSection(dialogSection);
   loadMateInstructions(renderDialogContent);
   refreshIcons();
-  requestAnimationFrame(function () { close.focus({ preventScroll: true }); });
+  requestAnimationFrame(function () {
+    var first = options && options.avatar && dialog ? (dialog.querySelector('.home-mate-avatar-choice[aria-pressed="true"]:not(:disabled)') || dialog.querySelector('.home-mate-avatar-choice:not(:disabled)')) : null;
+    (first || close).focus();
+  });
   return true;
 }
 
@@ -354,7 +361,7 @@ export function syncHomeMateSettingsTarget(msg) {
   var mate = getMate(dialogMateId);
   if (!mate) closeHomeMateSettings();
   else {
-    confirmHomeMateAvatar(mate);
+    confirmHomeMateAvatar(mate, msg && msg.requestId);
     dialog.querySelector(".home-mate-settings-header span").textContent = getMateName(mate);
     renderDialogContent();
   }
@@ -364,7 +371,7 @@ export function handleHomeMateAvatarError(msg) {
   if (!dialog || !msg) return false;
   var colorHandled = applyMateColorResult(msg);
   var profileHandled = applyMateProfile(msg);
-  if (!colorHandled && !profileHandled && !failHomeMateAvatar(msg.mateId, msg.error)) return false;
+  if (!colorHandled && !profileHandled && !failHomeMateAvatar(msg.mateId, msg.error, msg.requestId)) return false;
   renderDialogContent();
   return true;
 }

package/lib/public/modules/markdown.js

@@ -1,3 +1,4 @@
+import { renderBrowserLink, enhanceBrowserLinks } from './clay-browser-links.js';
 import { renderWireframeBlocks } from './wireframe-chat.js';
 import { copyToClipboard, escapeHtml } from './utils.js';
 import { refreshIcons } from './icons.js';
@@ -14,6 +15,8 @@ marked.use({ gfm: true, breaks: false });
 marked.use({
   renderer: {
     link({ href, title, tokens, text }) {
+      var browserLink = renderBrowserLink(href, title, text);
+      if (browserLink) return browserLink;
       var recordLink = renderClayRecordLink(href, text);
       if (recordLink) return recordLink;
       var localLink = renderLocalFileLink(href, title, text);
@@ -103,6 +106,7 @@ export function enhanceClaySessionLinks(root) {
   }
   enhanceClayLogLinks(root);
   enhanceClayFileLinks(root);
+  enhanceBrowserLinks(root);
 }
 
 /**

package/lib/public/modules/mate-avatar-catalog.js

@@ -0,0 +1,97 @@
+// Shared appearance names; stable IDs remain internal catalog identities.
+export var MATE_AVATAR_COLLECTIONS = [{"id":"B","name":"Oddballs","avatars":[{"id":"B01","name":"Indigo Cyclops"},
+{"id":"B02","name":"Coral Sentinel"},
+{"id":"B03","name":"Golden Visor"},
+{"id":"B04","name":"Mint Wide Eyes"},
+{"id":"B05","name":"Ivory Grin"},
+{"id":"B06","name":"Blue Teardrop"},
+{"id":"B07","name":"Peach Orbit"},
+{"id":"B08","name":"Lilac Sleeper"},
+{"id":"B09","name":"Coral Prism"},
+{"id":"B10","name":"Mint Spring"},
+{"id":"B11","name":"Golden Pebbles"},
+{"id":"B12","name":"Periwinkle Orbit"},
+{"id":"B13","name":"Coral Horizon"},
+{"id":"B14","name":"Indigo Stack"},
+{"id":"B15","name":"Mint Button Box"},
+{"id":"B16","name":"Golden Curve"},
+{"id":"B17","name":"Loop Listener"},
+{"id":"B18","name":"Blue Twin Antenna"},
+{"id":"B19","name":"Lilac Daydream"},
+{"id":"B20","name":"Coral Toothsome"},
+{"id":"B21","name":"Ivory Satellite"},
+{"id":"B22","name":"Mint Coil"},
+{"id":"B23","name":"Golden Wonder"},
+{"id":"B24","name":"Slate Smile"},
+{"id":"B25","name":"Lilac Shield"},
+{"id":"B26","name":"Mint Diamond"},
+{"id":"B27","name":"Coral Pebble"},
+{"id":"B28","name":"Golden Horns"},
+{"id":"B29","name":"Blue Trio"},
+{"id":"B30","name":"Ivory Tower"},
+{"id":"B31","name":"Charcoal Grin"},
+{"id":"B32","name":"Teal Cheer"},
+{"id":"B33","name":"Rose Satellite"},
+{"id":"B34","name":"Blue Spool"},
+{"id":"B35","name":"Golden Band"},
+{"id":"B36","name":"Mint Beacon"},
+{"id":"B37","name":"Charcoal Crescent"},
+{"id":"B38","name":"Coral Cyclops"},
+{"id":"B39","name":"Blue Scout"},
+{"id":"B40","name":"Ivory Navigator"},
+{"id":"B41","name":"Golden Porthole"},
+{"id":"B42","name":"Lilac Windup"},
+{"id":"B43","name":"Mint Receiver"},
+{"id":"B44","name":"Coral Stack"},
+{"id":"B45","name":"Indigo Porthole"},
+{"id":"B46","name":"Stone Sprout"},
+{"id":"B47","name":"Mint Sunbeam"},
+{"id":"B48","name":"Golden Cubby"}]},
+{"id":"C","name":"Kindred Bots","avatars":[{"id":"C01","name":"Violet Smile"},
+{"id":"C02","name":"Apricot Joy"},
+{"id":"C03","name":"Sage Curious"},
+{"id":"C04","name":"Golden Wink"},
+{"id":"C05","name":"Blue Sideglance"},
+{"id":"C06","name":"Charcoal Wonder"},
+{"id":"C07","name":"Lilac Specs"},
+{"id":"C08","name":"Coral Giggle"},
+{"id":"C09","name":"Mint Blush"},
+{"id":"C10","name":"Golden Button"},
+{"id":"C11","name":"Sky Smile"},
+{"id":"C12","name":"Plum Joy"},
+{"id":"C13","name":"Teal Diamond"},
+{"id":"C14","name":"Peach Dimple"},
+{"id":"C15","name":"Indigo Delight"},
+{"id":"C16","name":"Sage Sprout"},
+{"id":"C17","name":"Golden Specs"},
+{"id":"C18","name":"Lilac Stargaze"},
+{"id":"C19","name":"Blue Curiosity"},
+{"id":"C20","name":"Coral Heart"},
+{"id":"C21","name":"Mint Bud"},
+{"id":"C22","name":"Ivory Surprise"},
+{"id":"C23","name":"Rose Wink"},
+{"id":"C24","name":"Sky Giggle"},
+{"id":"C25","name":"Ivory Dreamer"},
+{"id":"C26","name":"Mint Loop"},
+{"id":"C27","name":"Violet Glasses"},
+{"id":"C28","name":"Coral Sunshine"},
+{"id":"C29","name":"Slate Sideglance"},
+{"id":"C30","name":"Golden Dimple"},
+{"id":"C31","name":"Teal Listener"},
+{"id":"C32","name":"Peach Cheer"},
+{"id":"C33","name":"Indigo Blush"},
+{"id":"C34","name":"Sage Daydream"},
+{"id":"C35","name":"Rose Wonder"},
+{"id":"C36","name":"Sky Blush"},
+{"id":"C37","name":"Peach Heart"},
+{"id":"C38","name":"Blue Button"},
+{"id":"C39","name":"Lilac Wink"},
+{"id":"C40","name":"Mint Dish"},
+{"id":"C41","name":"Ivory Wonder"},
+{"id":"C42","name":"Violet Cheer"},
+{"id":"C43","name":"Rose Specs"},
+{"id":"C44","name":"Teal Delight"},
+{"id":"C45","name":"Golden Diamond"},
+{"id":"C46","name":"Lilac Surprise"},
+{"id":"C47","name":"Sage Listener"},
+{"id":"C48","name":"Coral Crown"}]}];

package/lib/public/modules/mate-management.js

@@ -1,12 +1,14 @@
 // Shared Mate profile and removal flows used by project and Home surfaces.
 
 import { getWs } from './ws-ref.js';
-import { showMateProfilePopover } from './profile.js';
+import { store } from './store.js';
+import { openHomeMateSettings } from './home-mate-settings.js';
 import { showToast } from './utils.js';
 import { showConfirm, hideConfirm } from './app-misc.js';
 import { iconHtml, refreshIcons } from './icons.js';
 
 var mateMenu = null;
+var mateMenuOpener = null;
 
 function send(message) {
   var ws = getWs();
@@ -15,9 +17,13 @@ function send(message) {
 
 export function editMateProfile(anchorEl, mate) {
   if (!anchorEl || !mate || mate.primary) return;
-  showMateProfilePopover(anchorEl, mate, function (updates) {
-    send({ type: "mate_update", mateId: mate.id, updates: updates });
-  });
+  openHomeMateSettings(mate.id, anchorEl);
+}
+
+export function changeMateAvatar(anchorEl, mate) {
+  var current = (store.get('cachedMatesList') || []).find(function (item) { return mate && item.id === mate.id; });
+  if (!anchorEl || !current || current.primary || current.builtinKey === 'clay' || (current.profile || {}).avatarLocked) return false;
+  return openHomeMateSettings(current.id, anchorEl, { avatar: true });
 }
 
 export function confirmMateRemoval(anchorEl, mate, onRemoved) {
@@ -76,9 +82,12 @@ export function confirmMateRemoval(anchorEl, mate, onRemoved) {
   input.focus();
 }
 
-export function closeMateManagementMenu() {
+export function closeMateManagementMenu(restoreFocus) {
+  var opener = mateMenuOpener;
   if (mateMenu) mateMenu.remove();
-  mateMenu = null;
+  mateMenu = null; mateMenuOpener = null;
+  document.removeEventListener("keydown", handleMateMenuKeydown, true);
+  if (restoreFocus && opener && opener.isConnected) opener.focus({ preventScroll: true });
   document.removeEventListener("click", handleMateMenuOutside, true);
 }
 
@@ -86,6 +95,18 @@ function handleMateMenuOutside(event) {
   if (mateMenu && !mateMenu.contains(event.target)) closeMateManagementMenu();
 }
 
+function handleMateMenuKeydown(event) {
+  if (!mateMenu) return;
+  if (event.key === 'Escape') {
+    event.preventDefault(); event.stopPropagation(); closeMateManagementMenu(true); return;
+  }
+  if (event.key === 'Tab') { closeMateManagementMenu(true); return; }
+  var items = Array.from(mateMenu.querySelectorAll('[role="menuitem"]:not(:disabled)'));
+  var index = items.indexOf(document.activeElement);
+  var next = event.key === 'ArrowDown' ? (index + 1) % items.length : event.key === 'ArrowUp' ? (index + items.length - 1) % items.length : event.key === 'Home' ? 0 : event.key === 'End' ? items.length - 1 : -1;
+  if (next >= 0) { event.preventDefault(); event.stopPropagation(); items[next].focus(); }
+}
+
 export function showMateManagementMenu(anchorEl, mate, options) {
   if (!anchorEl || !mate || mate.primary) return;
   options = options || {};
@@ -93,7 +114,16 @@ export function showMateManagementMenu(anchorEl, mate, options) {
   if (options.beforeOpen) options.beforeOpen();
   var menu = document.createElement("div");
   menu.className = "project-ctx-menu";
+  menu.setAttribute('role', 'menu');
+  menu.setAttribute('aria-label', 'Actions for ' + ((mate.profile || {}).displayName || mate.name || 'Mate'));
+  if (!(mate.profile || {}).avatarLocked && mate.builtinKey !== 'clay') {
+    var avatar = document.createElement('button'); avatar.type = 'button'; avatar.className = 'project-ctx-item'; avatar.setAttribute('role', 'menuitem');
+    avatar.innerHTML = iconHtml('image') + ' <span>Change avatar</span>';
+    avatar.addEventListener('click', function (event) { event.stopPropagation(); closeMateManagementMenu(); changeMateAvatar(anchorEl, mate); });
+    menu.appendChild(avatar);
+  }
   var edit = document.createElement("button");
+  edit.type = "button"; edit.setAttribute("role", "menuitem");
   edit.className = "project-ctx-item";
   edit.innerHTML = iconHtml("edit-2") + " <span>Edit Profile</span>";
   edit.addEventListener("click", function (event) {
@@ -102,6 +132,7 @@ export function showMateManagementMenu(anchorEl, mate, options) {
     editMateProfile(anchorEl, mate);
   });
   var remove = document.createElement("button");
+  remove.type = "button"; remove.setAttribute("role", "menuitem");
   remove.className = "project-ctx-item project-ctx-delete";
   remove.innerHTML = iconHtml(mate.builtinKey ? "minus-circle" : "trash-2")
     + " <span>" + (mate.builtinKey ? "Remove mate" : "Delete mate") + "</span>";
@@ -113,7 +144,9 @@ export function showMateManagementMenu(anchorEl, mate, options) {
   menu.appendChild(edit);
   menu.appendChild(remove);
   document.body.appendChild(menu);
-  mateMenu = menu;
+  mateMenu = menu; mateMenuOpener = anchorEl;
+  document.addEventListener("keydown", handleMateMenuKeydown, true);
+  menu.querySelector("[role=menuitem]").focus();
   refreshIcons();
   requestAnimationFrame(function () {
     var rect = anchorEl.getBoundingClientRect();

package/lib/public/modules/mcp-connection-view.js

@@ -1,3 +1,5 @@
+import { enhanceSettingsSelects } from './settings-select.js';
+import { discoveryView, credentialsView } from './mcp-discovery-view.js';
 import { escapeHtml } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 import { store } from './store.js';
@@ -13,11 +15,11 @@ function heading(title, subtitle, icon) {
 }
 function status(row) { return '<span class="mc-status" data-status="' + text(row.status) + '"><span aria-hidden="true"></span>' + text(labels[row.status] || 'Unavailable') + '</span>'; }
 function switchControl(row, busy) {
-  return '<button type="button" class="mc-switch" role="switch" aria-checked="' + !!row.projectEnabled + '" aria-label="Enable ' + text(row.label || row.name) + ' in this project" data-toggle="' + text(row.id) + '"' + (busy ? ' disabled' : '') + '><span></span></button>';
+  return '<button type="button" class="mc-switch" role="switch" aria-checked="' + !!row.projectEnabled + '" aria-label="Enable ' + text(row.label || row.name) + (row.source === 'computer' ? ' in this project' : ' for your private sessions and Mates') + '" data-toggle="' + text(row.id) + '"' + (busy ? ' disabled' : '') + '><span></span></button>';
 }
 function rows(servers, busy) {
   return '<div class="mc-list">' + servers.map(function (row) {
-    return '<div class="mc-row"><button type="button" class="mc-row-open" data-open="' + text(row.id) + '"><span class="mc-server-icon">' + iconHtml(row.source === 'url' ? 'globe' : 'monitor') + '</span><span class="mc-row-info"><strong>' + text(row.label || row.name) + '</strong><span>' + (row.source === 'url' ? 'Remote' : 'Your computer') + ' · ' + row.toolCount + ' tools</span>' + status(row) + '</span></button>' + switchControl(row, busy) + '</div>';
+    return '<div class="mc-row"><button type="button" class="mc-row-open" data-open="' + text(row.id) + '"><span class="mc-server-icon">' + iconHtml(row.source === 'url' ? 'globe' : 'monitor') + '</span><span class="mc-row-info"><strong>' + text(row.label || row.name) + '</strong><span>' + (row.source === 'url' ? 'Remote' : row.source === 'local' ? 'Clay server' : 'Your computer') + ' · ' + row.toolCount + ' tools</span>' + status(row) + '</span></button>' + switchControl(row, busy) + '</div>';
   }).join('') + '</div>';
 }
 function search(value, placeholder) { return '<label class="mc-search">' + iconHtml('search') + '<input type="search" data-search value="' + text(value) + '" placeholder="' + placeholder + '" aria-label="' + placeholder + '"></label>'; }
@@ -25,11 +27,12 @@ function listView(state) {
   if (!state.loaded) return heading('Your connections', 'Loading your MCP servers…', 'cable');
   if (!state.servers.length) return '<div class="mc-empty">' + heading('Connect tools to Clay', 'Let your agent work with the services and tools you choose.', 'cable') + button('Add connection', 'add', true, 'plus') + '<p>Connect a remote service or tools on your computer.</p></div>';
   var servers = state.servers.filter(function (row) { return (row.label || row.name).toLowerCase().includes((state.search || '').toLowerCase()); });
-  return search(state.search, 'Search servers…') + '<div class="mc-section-heading"><h2>Your connections</h2>' + button('Add', 'add', false, 'plus') + '</div>' + rows(servers, !!state.pending) + (!servers.length ? '<p class="mc-muted">No matching connections.</p>' : '') + '<p class="mc-footnote">Enabled connections are available to your private sessions in this project. In multi-user Clay, shared conversations cannot use personal connections.</p>';
+  return search(state.search, 'Search servers…') + '<div class="mc-section-heading"><h2>Your connections</h2>' + button('Add', 'add', false, 'plus') + '</div>' + rows(servers, !!state.pending) + (!servers.length ? '<p class="mc-muted">No matching connections.</p>' : '') + '<p class="mc-footnote">Imported and remote connections are available to your private sessions and Mates. Computer preferences are scoped to this project. In multi-user Clay, shared conversations cannot use personal connections.</p>';
 }
 function addView() {
   return heading('Add connection', 'Choose where your tools are available.') + '<div class="mc-choices">' +
     '<button class="mc-choice" data-action="remote"><span class="mc-choice-icon">' + iconHtml('globe') + '</span><span><strong>Remote MCP URL</strong><small>Connect a hosted service using its MCP server address.</small></span>' + iconHtml('arrow-right') + '</button>' +
+    '<button class="mc-choice" data-action="discovery"><span class="mc-choice-icon">' + iconHtml('folder-search') + '</span><span><strong>Import vendor config</strong><small>Inspect Claude, Codex, Kiro and other supported runtime sources.</small></span>' + iconHtml('arrow-right') + '</button>' +
     '<button class="mc-choice" data-action="computer"><span class="mc-choice-icon">' + iconHtml('monitor') + '</span><span><strong>On your computer</strong><small>Connect local tools through the Clay browser extension.</small></span>' + iconHtml('arrow-right') + '</button></div>';
 }
 function remoteView(state) {
@@ -53,10 +56,12 @@ function permissionsView(row) {
     [['', 'Use session default'], ['auto', 'AI review'], ['default', 'Ask every time']].map(function (item) { return '<option value="' + item[0] + '"' + (selected === item[0] ? ' selected' : '') + '>' + item[1] + '</option>'; }).join('') + '</select></label>' + (!availability.applicable ? '<p class="mc-muted">' + text(availability.reason) + '</p>' : '') + '</div>';
 }
 function detailView(state, row) {
-  var remote = row.source === 'url';
-  var html = heading(row.label || row.name, remote ? 'Remote MCP connection' : 'Connected through your browser extension', remote ? 'globe' : 'monitor');
-  html += status(row) + '<div class="mc-enable"><span>Enabled in this project</span>' + switchControl(row, !!state.pending) + '</div>';
-  html += '<dl class="mc-metadata"><dt>Access</dt><dd>Your account only</dd><dt>' + (remote ? 'Server' : 'Location') + '</dt><dd>' + (remote ? text(row.url) : 'Your computer') + '</dd></dl>';
+  var remote = row.source === 'url', local = row.source === 'local', managed = remote || local;
+  var html = heading(row.label || row.name, remote ? 'Remote MCP connection' : local ? 'MCP process on the Clay server' : 'Connected through your browser extension', remote ? 'globe' : 'monitor');
+  html += status(row) + '<div class="mc-enable"><span>' + (managed ? 'Enabled for your private sessions and Mates' : 'Enabled in this project') + '</span>' + switchControl(row, !!state.pending) + '</div>';
+  html += '<dl class="mc-metadata"><dt>Access</dt><dd>Your account only</dd><dt>' + (remote ? 'Server' : 'Location') + '</dt><dd>' + (remote ? text(row.url) : (local ? 'Clay server · your account' : 'Your computer')) + '</dd></dl>';
+  if (row.provenance) html += '<p class="mc-muted">Imported from ' + text(row.provenance.vendor + ' · ' + row.provenance.scope + ' · ' + row.provenance.file) + '</p>';
+  html += credentialsView(row);
   if (row.error) html += '<div class="mc-alert" role="status">' + iconHtml('circle-alert') + '<span>' + text(row.error) + '</span></div>';
   if (remote && row.status === 'auth_required') html += '<div class="mc-auth">' + button('Sign in with Clay browser', 'signin', true, 'log-in') + '<p class="mc-muted">Only you can view and control this sign-in browser.</p></div>';
   if (remote) html += '<details class="mc-token"><summary>Use an access token</summary><form data-form="token" class="mc-form"><label>Access token<input name="token" type="password" required maxlength="8192" autocomplete="new-password" placeholder="Paste your access token"></label><button type="submit" class="mc-button">Save and connect</button></form></details>';
@@ -67,15 +72,15 @@ function detailView(state, row) {
     var tools = (row.tools || []).filter(function (tool) { return (tool.name + ' ' + (tool.description || '')).toLowerCase().includes((state.search || '').toLowerCase()); });
     html += '<div class="mc-tools">' + tools.map(function (tool) { return '<details><summary>' + text(tool.name) + '</summary><p>' + text(tool.description || 'No description provided.') + '</p><h4>Inputs</h4><pre>' + text(JSON.stringify(tool.inputSchema || {}, null, 2)) + '</pre></details>'; }).join('') + (!tools.length ? '<p class="mc-muted">' + (row.toolCount ? 'No matching tools.' : 'No tools available. Test the connection to refresh its catalog.') + '</p>' : '') + '</div>';
   }
-  html += '<div class="mc-detail-actions">' + (remote ? button('Test connection', 'test', false, 'refresh-cw') + (row.status === 'auth_required' ? '' : button('Sign in again', 'signin', false, 'log-in')) : button('Computer setup', 'computer', false, 'monitor')) + '</div>';
-  if (remote) html += '<details class="mc-manage"><summary>Manage connection</summary><form data-form="rename" class="mc-form"><label>Name<input name="label" required maxlength="100" value="' + text(row.label) + '"></label><button type="submit" class="mc-button">Save name</button></form>' + button('Remove connection', 'remove', false, 'trash-2') + '</details>';
+  html += '<div class="mc-detail-actions">' + (managed ? button('Test connection', 'test', false, 'refresh-cw') + (!remote || row.status === 'auth_required' ? '' : button('Sign in again', 'signin', false, 'log-in')) : button('Computer setup', 'computer', false, 'monitor')) + '</div>';
+  if (managed) html += '<details class="mc-manage"><summary>Manage connection</summary><form data-form="rename" class="mc-form"><label>Name<input name="label" required maxlength="100" value="' + text(row.label) + '"></label><button type="submit" class="mc-button">Save name</button></form>' + button('Remove connection', 'remove', false, 'trash-2') + '</details>';
   return html;
 }
 export function renderConnections(root, state, events) {
   var sameScreen = root.dataset.screenKey === (state.screen || 'list') + ':' + (state.selected || '');
   var disclosures = sameScreen ? Array.from(root.querySelectorAll('details[open]')).map(function (el) { return el.className || el.querySelector('summary').textContent; }) : [];
   var drafts = {};
-  if (sameScreen) root.querySelectorAll('input[name]').forEach(function (el) { drafts[el.name] = el.value; });
+  if (sameScreen) root.querySelectorAll('input[name]:not([type="password"])').forEach(function (el) { drafts[el.name] = el.value; });
   var focused = root.contains(document.activeElement) ? document.activeElement : null;
   var searchFocused = focused && focused.hasAttribute('data-search');
   var start = focused && focused.tagName === 'INPUT' ? focused.selectionStart : null;
@@ -84,18 +89,20 @@ export function renderConnections(root, state, events) {
   var screen = state.screen || 'list';
   var html = screen !== 'list' ? '<button type="button" class="mc-back" data-action="back">' + iconHtml('arrow-left') + 'MCP Servers</button>' : '';
   if (state.error) html += '<div class="mc-alert" role="alert">' + iconHtml('circle-alert') + '<span>' + text(state.error) + '</span></div>';
+  html += '<p class="mc-muted">Clay connections work in supported native and ACP sessions. Antigravity’s current agy stream-json adapter cannot mount session-bound Clay tools; use another runtime for these connections.</p>';
   if (state.notice) html += '<p class="mc-notice" role="status">' + text(state.notice) + '</p>';
   if (screen === 'add') html += addView();
   else if (screen === 'remote') html += remoteView(state);
+  else if (screen === 'discovery') html += discoveryView(state);
   else if (screen === 'computer') html += computerView(state);
-  else if (screen === 'remove' && row) html += heading('Remove ' + row.label + '?', 'This removes saved credentials and disables its tools in this project.') + '<div role="group" aria-label="Confirm removal">' + button('Cancel', 'cancel-remove', false) + button('Remove connection', 'confirm-remove', true, 'trash-2') + '</div>';
+  else if (screen === 'remove' && row) html += heading('Remove ' + row.label + '?', 'This removes saved credentials and disables this connection for your private sessions and Mates.') + '<div role="group" aria-label="Confirm removal">' + button('Cancel', 'cancel-remove', false) + button('Remove connection', 'confirm-remove', true, 'trash-2') + '</div>';
   else if (screen === 'detail' && row) html += detailView(state, row);
   else html += listView(state);
   if (state.pending && screen !== 'remote') html += '<p class="mc-working" role="status">' + iconHtml('loader-circle') + 'Updating connection…</p>';
   root.innerHTML = '<div class="mc-screen">' + html + '</div>';
   root.dataset.screenKey = screen + ':' + (state.selected || '');
   root.querySelectorAll('details').forEach(function (el) { el.open = disclosures.indexOf(el.className || el.querySelector('summary').textContent) >= 0; });
-  root.querySelectorAll('input[name]').forEach(function (el) {
+  root.querySelectorAll('input[name]:not([type="password"])').forEach(function (el) {
     if (Object.prototype.hasOwnProperty.call(drafts, el.name)) el.value = drafts[el.name];
     if (focusedName === el.name) { el.focus(); try { el.setSelectionRange(start, start); } catch (error) {} }
   });
@@ -106,31 +113,42 @@ export function renderConnections(root, state, events) {
     if (state.pending && ['signin', 'test', 'remove', 'confirm-remove'].includes(action)) el.disabled = true;
     el.onclick = function () {
       if (action === 'back') events.navigate('list');
-      else if (['add', 'remote', 'computer'].includes(action)) events.navigate(action);
+      else if (['add', 'remote', 'computer', 'discovery'].includes(action)) events.navigate(action);
       else if (action === 'remove' && row) events.remove(row);
       else if (action === 'cancel-remove') events.navigate('detail', row.id);
       else if (action === 'confirm-remove') events.action('remove', { id: row.id });
+      else if (action === 'discover') events.discover();
       else if (action === 'refresh') events.refresh();
       else if (action === 'setup') events.setup();
       else if (action === 'copy') navigator.clipboard.writeText('npx clay-mcp-bridge install ' + (state.extensionId || '<extension-id>')).then(function () { el.textContent = 'Copied'; }).catch(function () { el.textContent = 'Select command to copy'; });
       else events.action(action);
     };
   });
+  root.querySelectorAll('[data-import]').forEach(function (el) { el.onclick = function () { events.action('import', { scanId: state.discovery.scanId, candidateId: el.dataset.import }); }; });
   root.querySelectorAll('[data-open]').forEach(function (el) { el.onclick = function () { events.navigate('detail', el.dataset.open); }; });
   root.querySelectorAll('[data-toggle]').forEach(function (el) { el.onclick = function () { var item = state.servers.find(function (server) { return server.id === el.dataset.toggle; }); if (item) events.toggle(item, !item.projectEnabled); }; });
   root.querySelectorAll('[data-tab]').forEach(function (el) { el.onclick = function () { store.set({ mcpConnections: Object.assign({}, store.get('mcpConnections'), { detailTab: el.dataset.tab, search: '' }) }); }; });
   var input = root.querySelector('[data-search]');
   if (input) { input.oninput = function () { events.search(input.value); }; if (searchFocused) { input.focus(); try { input.setSelectionRange(start, start); } catch (error) {} } }
+  var discoveryForm = root.querySelector('[data-form="discovery"]');
+  if (discoveryForm) {
+    function saveSourceDraft() { events.sourceDraft({ vendor: discoveryForm.elements.vendor.value, file: discoveryForm.elements.file.value }); }
+    discoveryForm.elements.vendor.onchange = saveSourceDraft;
+    discoveryForm.elements.file.oninput = saveSourceDraft;
+  }
   var urlInput = root.querySelector('[name="url"]'); if (urlInput) urlInput.oninput = function () { events.draft(urlInput.value); };
   root.querySelectorAll('form').forEach(function (form) {
     form.onsubmit = function (event) {
       event.preventDefault(); if (state.pending) return;
       if (form.dataset.form === 'remote') events.action('add', { url: form.elements.url.value });
       if (form.dataset.form === 'token') { var token = form.elements.token.value; form.reset(); events.action('token', { token: token }); }
+      if (form.dataset.form === 'discovery') events.discover({ vendor: form.elements.vendor.value.trim(), file: form.elements.file.value.trim() });
+      if (form.dataset.form === 'credentials') { var values = {}; Array.from(form.querySelectorAll('input')).forEach(function (input) { values[input.name] = input.value; }); form.reset(); events.action('credentials', { values: values }); }
       if (form.dataset.form === 'rename') events.action('rename', { label: form.elements.label.value });
     };
   });
   var permission = root.querySelector('[data-permission]');
   if (permission) permission.onchange = function () { sendMcpPermissionMode(store.get('currentSlug'), store.get('activeSessionId'), row.name, permission.value); };
+  enhanceSettingsSelects(root);
   refreshIcons(root);
 }

package/lib/public/modules/mcp-discovery-view.js

@@ -0,0 +1,31 @@
+import { escapeHtml } from './utils.js';
+import { iconHtml } from './icons.js';
+function text(value) { return escapeHtml(String(value || '')); }
+export function discoveryView(state) {
+  var discovery = state.discovery || {}, pending = !!state.pending;
+  var draft = state.sourceDraft || {};
+  var vendors = { claude: 'Claude Code', codex: 'Codex', kiro: 'Kiro', opencode: 'OpenCode', kimi: 'Kimi Code', copilot: 'GitHub Copilot', qwen: 'Qwen Code', junie: 'Junie', grok: 'Grok', antigravity: 'Antigravity', acp: 'ACP' };
+  var options = Object.keys(vendors).map(function (key) { return '<option value="' + key + '"' + ((draft.vendor || 'claude') === key ? ' selected' : '') + '>' + vendors[key] + '</option>'; }).join('');
+  var html = '<div class="mc-heading"><h2 tabindex="-1">Import vendor connections</h2><p>Inspect MCP configurations on the Clay server. Import saves a disabled copy for your account; enabling or testing can start its command or contact its service.</p></div>' +
+    '<button type="button" class="mc-button" data-action="discover"' + (pending ? ' disabled' : '') + '>' + iconHtml('refresh-cw') + 'Scan vendor configurations</button>' +
+    '<details class="mc-manage"><summary>Configured source file</summary><form data-form="discovery" class="mc-form"><label>Vendor format<select name="vendor" aria-label="Vendor format">' + options + '</select></label><label>Absolute config path<input name="file" value="' + text(draft.file) + '" required placeholder="/home/you/agent/mcp.json" maxlength="4096"></label><button type="submit" class="mc-button"' + (pending ? ' disabled' : '') + '>Inspect source</button></form></details>';
+  if (!discovery.scanId) return html + '<p class="mc-muted">Vendor OAuth tokens stay with their vendor. Use Clay sign-in or enter credentials after importing.</p>';
+  html += '<div class="mc-list">' + (discovery.candidates || []).map(function (row) {
+    return '<div class="mc-row"><span class="mc-row-info"><strong>' + text(row.name) + '</strong><span>' + text(row.vendor + ' · ' + row.scope + ' · ' + row.transport) + '</span><small>' + text(row.file) + '</small><small>' + text('Dependency: ' + row.dependency) + '</small>' +
+      (row.references.length ? '<small>Requires: ' + text(row.references.join(', ')) + '</small>' : '') +
+      (row.blocked ? '<small>' + text(row.blocked) + '</small>' : '') +
+      (row.pluginVersion ? '<small>Plugin version: ' + text(row.pluginVersion) + '</small>' : '') +
+      (row.conflict ? '<small>Different definitions use this name. Import the source you intend to use.</small>' : row.duplicate ? '<small>Matching definition found in another source.</small>' : '') +
+      '<small>' + (row.sourceEnabled === true ? 'Enabled in source' : row.sourceEnabled === false ? 'Disabled in source' : 'Source enablement unknown') + ' · imports disabled</small></span><button class="mc-button" type="button" data-import="' + text(row.id) + '"' + (pending || row.imported || row.blocked ? ' disabled' : '') + '>' + (row.imported ? 'Imported' : row.blocked ? 'Blocked' : 'Import') + '</button></div>';
+  }).join('') + '</div>';
+  if (!(discovery.candidates || []).length) html += '<p class="mc-muted">No supported MCP definitions found.</p>';
+  html += (discovery.diagnostics || []).map(function (item) { return '<p class="mc-muted">' + text(item.vendor + ' · ' + item.scope + (item.name ? ' · ' + item.name : '') + ': ' + item.message) + '</p>'; }).join('');
+  return html;
+}
+export function credentialsView(row) {
+  if (!row.references || !row.references.length) return '';
+  if (row.references.indexOf('Unsupported reference') >= 0) return '<p class="mc-muted">This definition needs a vendor-specific helper or file reference. Configure a direct Clay connection instead.</p>';
+  return '<details class="mc-token"><summary>Required credentials</summary><form data-form="credentials" class="mc-form">' + row.references.map(function (name) {
+    return '<label>' + text(name) + '<input type="password" name="' + text(name) + '" required maxlength="8192" autocomplete="new-password"></label>';
+  }).join('') + '<button type="submit" class="mc-button">Save credentials</button></form></details>';
+}

package/lib/public/modules/mcp-ui.js

@@ -9,7 +9,8 @@ function patch(value) { store.set({ mcpConnections: Object.assign({}, state(), v
 function send(message) {
   var ws = getWs();
   if (!ws || ws.readyState !== 1) { patch({ error: 'Reconnect to Clay to manage connections.' }); return false; }
-  ws.send(JSON.stringify(message)); return true;
+  try { if (ws.send(JSON.stringify(message)) === false) throw new Error('Not sent'); return true; }
+  catch (error) { patch({ error: 'Could not send the request. Reconnect and try again.' }); return false; }
 }
 function requestState() { send({ type: 'mcp_state_request' }); }
 function clearActionTimer() { var timer = store.get('mcpActionTimer'); if (timer) clearTimeout(timer); store.set({ mcpActionTimer: null }); }
@@ -24,8 +25,18 @@ function action(name, args) {
   }, 90000) });
   if (!send(Object.assign({ type: 'mcp_connection_action', action: name, requestId: requestId, id: state().selected }, args || {}))) { clearActionTimer(); patch({ pending: null }); }
 }
+function discover(options) {
+  if (state().pending) return;
+  var requestId = crypto.randomUUID();
+  patch({ pending: { requestId: requestId, action: 'discover' }, error: '' });
+  clearActionTimer();
+  store.set({ mcpActionTimer: setTimeout(function () {
+    if (state().pending && state().pending.requestId === requestId) { clearActionTimer(); patch({ pending: null, error: 'The scan did not respond. Your draft and previous results are retained. Reconnect or scan again.' }); }
+  }, 30000) });
+  if (!send(Object.assign({ type: 'mcp_discovery_request', requestId: requestId }, options || {}))) { clearActionTimer(); patch({ pending: null }); }
+}
 function toggle(row, value) {
-  if (row.source === 'url') action('enable', { id: row.id, enabled: value });
+  if (row.source !== 'computer') action('enable', { id: row.id, enabled: value });
   else send({ type: 'mcp_toggle_server', name: row.name, enabled: value });
 }
 function render() {
@@ -35,7 +46,8 @@ function render() {
   var extension = document.getElementById('ext-pill-wrap');
   if (extension) extension.hidden = current.screen !== 'computer';
   renderConnections(element, current, {
-    navigate: navigate, action: action, toggle: toggle,
+    navigate: navigate, action: action, toggle: toggle, discover: discover,
+    sourceDraft: function (value) { patch({ sourceDraft: value }); },
     search: function (value) { patch({ search: value }); },
     draft: function (value) { store.set({ mcpConnectionDraft: value }); },
     refresh: requestState,
@@ -72,12 +84,19 @@ export function setExtensionConnected(value) { patch({ extensionConnected: !!val
 export function getMcpServers() { return state().servers; }
 export function handleMcpConnectionMessage(msg) {
   if (msg.slug && msg.slug !== store.get('currentSlug')) return false;
+  if (msg.type === 'mcp_discovery_result') {
+    var scanPending = state().pending;
+    if (!scanPending || scanPending.requestId !== msg.requestId) return true;
+    clearActionTimer();
+    patch({ pending: null, discovery: msg.ok ? { scanId: msg.scanId, candidates: msg.candidates, diagnostics: msg.diagnostics } : state().discovery, error: msg.ok ? '' : msg.error });
+    return true;
+  }
   if (msg.type === 'mcp_action_result') {
     var pending = state().pending;
     if (msg.requestId && (!pending || msg.requestId !== pending.requestId)) return true;
     clearActionTimer();
     patch({ pending: null, error: msg.ok ? '' : msg.error || 'Could not update connection.' });
-    if (msg.ok && msg.action === 'add') { store.set({ mcpConnectionDraft: '' }); navigate('detail', msg.id); }
+    if (msg.ok && (msg.action === 'add' || msg.action === 'import')) { store.set({ mcpConnectionDraft: '' }); navigate('detail', msg.id); }
     if (msg.ok && msg.action === 'remove') navigate('list');
     if (msg.ok && msg.action === 'enable') patch({ notice: 'Saved. Tool availability updates on the next turn; some runtimes may need a new session.' });
     return true;

package/lib/public/modules/mention.js

@@ -482,6 +482,8 @@ export function handleMentionStart(msg) {
     mateId: msg.mateId,
     mateName: msg.mateName,
     avatarColor: msg.avatarColor,
+    avatarCatalogId: msg.avatarCatalogId,
+    avatarCustom: msg.avatarCustom,
     avatarStyle: msg.avatarStyle,
     avatarSeed: msg.avatarSeed,
   };
@@ -762,6 +764,7 @@ function buildMentionAvatarUrl(meta) {
   return mateAvatarUrl({
     id: meta.mateId,
     profile: {
+      avatarCatalogId: meta.avatarCatalogId || "",
       avatarStyle: meta.avatarStyle || "imprint",
       avatarSeed: meta.avatarSeed || meta.mateId,
       avatarColor: meta.avatarColor || "#5857fc",

package/lib/public/modules/pane-browser-bridge.js

@@ -0,0 +1,20 @@
+import { store } from './store.js';
+import { showToast } from './utils.js';
+
+export function forwardPaneBrowserLink(url) {
+  if (!store.get('paneMode') || window.parent === window) return false;
+  window.parent.postMessage({ type: 'clay-pane-open-browser', url: url, projectSlug: store.get('currentSlug'), sessionId: String(store.get('activeSessionId')) }, window.location.origin);
+  return true;
+}
+export function handlePaneBrowserMessage(event, host) {
+  if (!event || event.origin !== window.location.origin || !host || !event.data || event.data.type !== 'clay-pane-open-browser') return false;
+  var msg = event.data, s = store.snap();
+  var frame = Array.from(host.querySelectorAll('.split-pane-frame')).find(function (item) { return item.contentWindow === event.source; });
+  var pane = frame && s.splitPanes && s.splitPanes.panes && s.splitPanes.panes.find(function (item) { return String(item.slug) === frame.dataset.projectSlug && String(item.sessionId) === frame.dataset.sessionId; });
+  if (!pane || msg.projectSlug !== s.currentSlug || msg.projectSlug !== frame.dataset.projectSlug || String(msg.sessionId) !== frame.dataset.sessionId) return true;
+  var expected = new URL('/p/' + encodeURIComponent(pane.slug) + '/?pane=1&session=' + encodeURIComponent(pane.sessionId), window.location.href).href;
+  if (frame.src !== expected) return true;
+  // The authenticated host owns the browser; a live same-project pane supplies only a URL.
+  import('./shared-browser.js').then(function (module) { module.openSharedBrowserAt(msg.url); }).catch(function (error) { showToast(error.message || 'Could not open the browser.', 'warn'); });
+  return true;
+}