clay-server 5.2.0-beta.1 → 5.2.0-beta.10

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 require a runtime that supports session-bound tools. Availability follows the selected runtime’s capabilities.</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/message-delivery.js

@@ -2,6 +2,7 @@
 
 import { store } from './store.js';
 import { getWs } from './ws-ref.js';
+import { paneMessageBinding } from './pane-binding.js';
 
 var ACK_TIMEOUT_MS = 5000;
 var ACK_RETRY_LIMIT = 3;
@@ -152,7 +153,7 @@ function transmit(entry, automatic) {
   }
   socketRefs[entry.payload.clientMessageId] = socket;
   try {
-    socket.send(JSON.stringify(entry.payload));
+    if (socket.send(JSON.stringify(entry.payload)) === false) { markUnconfirmed(entry); return false; }
     armAckTimer(entry.payload.clientMessageId, socket);
     return true;
   } catch (e) {
@@ -163,6 +164,8 @@ function transmit(entry, automatic) {
 
 export function sendAcknowledgedMessage(payload) {
   var nextPayload = Object.assign({}, payload, { clientMessageId: createClientMessageId() });
+  var binding = paneMessageBinding();
+  if (binding && !nextPayload.paneBinding) nextPayload.paneBinding = binding;
   var entry = {
     projectSlug: store.get('currentSlug'),
     sessionId: store.get('activeSessionId'),
@@ -179,6 +182,7 @@ export function sendAcknowledgedMessage(payload) {
   nextPayload.cliSessionId = entry.cliSessionId;
   nextPayload.sessionOriginId = entry.sessionOriginId;
   entry.payload = nextPayload;
+  if (nextPayload.contextualSnapshot) store.set({ contextualSnapshotSubmissions: (store.get('contextualSnapshotSubmissions') || []).concat([{ clientMessageId: nextPayload.clientMessageId, accountId: entry.accountId, projectSlug: entry.projectSlug, sessionId: entry.sessionId, sessionOriginId: entry.sessionOriginId, snapshot: nextPayload.contextualSnapshot }]).slice(-64) });
   replacePending(pendingMessages().concat([entry]));
   if (!transmit(entry, false)) {
     if (!getWs() || getWs().readyState !== 1) markUnconfirmed(entry);
@@ -192,7 +196,12 @@ export function sendAcknowledgedMessage(payload) {
 export function retryPendingMessage(clientMessageId) {
   var entry = pendingEntry(clientMessageId);
   if (!matchesActivatedContext(entry) || hasKnownCliMismatch(entry)) return false;
-  var retryEntry = Object.assign({}, entry, { attempts: 0, status: "pending" });
+  // An explicit Retry in the same durable conversation may use its new live
+  // binding. Automatic retry retains the original action binding and refuses.
+  var payload = Object.assign({}, entry.payload);
+  var binding = paneMessageBinding();
+  if (binding) payload.paneBinding = binding;
+  var retryEntry = Object.assign({}, entry, { payload: payload, attempts: 0, status: "pending" });
   replacePending(pendingMessages().map(function (candidate) {
     return candidate.payload.clientMessageId === clientMessageId ? retryEntry : candidate;
   }));
@@ -204,6 +213,15 @@ export function retryPendingMessage(clientMessageId) {
   return false;
 }
 
+// Stop retains the uncertain receipt but prevents automatic retransmission.
+export function pausePendingMessage(clientMessageId) {
+  var entry = pendingEntry(clientMessageId);
+  if (!entry || !matchesCurrentContext(entry)) return false;
+  clearAckTimer(clientMessageId);
+  markUnconfirmed(entry);
+  return true;
+}
+
 export function acknowledgeMessage(clientMessageId) {
   if (typeof clientMessageId !== "string") return null;
   var pending = pendingMessages();

package/lib/public/modules/model-picker.js

@@ -50,6 +50,8 @@ export function setupModelPicker() {
 
 export function resetModelPickerState() {
   clearRequestTimer();
+  if (configPopover) configPopover.classList.add('hidden');
+  if (configChip) configChip.classList.remove('active');
   store.set({
     modelListVendor: "",
     modelListStatus: "idle",