@oddessentials/agent-guild 1.22.0 → 1.23.0

package/web/app.js

@@ -47,6 +47,7 @@ const DOCK_WIDTH_KEY = 'agentGuild.dockWidth';
 const PANES_KEY = 'agentGuild.panes';
 const SPLIT_RATIO_KEY = 'agentGuild.splitRatio';
 const TERMINAL_FONT_KEY = 'agentGuild.terminalFontSize';
+const TOOL_CARDS_KEY = 'agentGuild.toolCards';
 const RELEASES_URL = 'https://github.com/oddessentials/agent-guild/releases';
 const SUPPORT_URL = 'https://oddessentials.ai/donate/?ref=agent-guild';
 const isMac = /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
@@ -1624,6 +1625,7 @@ function selectAccount(provider, id) {
     renderAccounts(card, provider);
     renderUsage(card, provider);
     renderReportingSetup(card, provider);
+    renderMcpSetup(card, provider);
   }
   refreshPendingActions();
   notifyViews();
@@ -1966,6 +1968,7 @@ function renderAccounts(card, provider) {
         renderAccounts(card, provider);
         renderUsage(card, provider);
         renderReportingSetup(card, provider);
+        renderMcpSetup(card, provider);
       });
       return chip;
     }));
@@ -2265,51 +2268,89 @@ function renderReportingSetup(card, provider) {
   };
 }
 
-const MCP_STATES = { on: 'on', off: 'off', disabled: 'turned off in the tool', other: 'another server is named agent-guild', unknown: 'settings could not be read' };
+const openMcp = new Set();
+const mcpBusy = new Set();
 
-function mcpText(provider, mcp) {
-  if (mcp.state === 'checking') return 'Agent Guild MCP: checking';
-  if (mcp.state === 'on') return mcp.total > 1 ? `Agent Guild MCP on for all ${mcp.total} accounts` : 'Agent Guild MCP on';
-  if (mcp.state === 'partial') return `Agent Guild MCP on for ${mcp.on} of ${mcp.total} accounts`;
-  if (mcp.state === 'disabled') return `Agent Guild MCP turned off in ${provider.tool}`;
-  if (mcp.state === 'other') return 'Agent Guild MCP: another server is named agent-guild';
-  if (mcp.state === 'unknown') return 'Agent Guild MCP: settings could not be read';
-  return 'Agent Guild MCP off';
+/** What the card's Agent Guild MCP section says about one account, and the change it offers. */
+function mcpView(provider, entry) {
+  const tool = provider.tool;
+  const from = entry.from ? `${tool} takes it from ${entry.from}'s settings. ` : '';
+  const yours = !entry.managed && !entry.from ? 'You added it yourself. ' : '';
+  const typing = entry.allowInput ? ' It can also type into sessions.' : '';
+  if (entry.state === 'checking') return { label: 'Checking…', status: `Reading ${tool}'s MCP settings.` };
+  if (entry.state === 'off') {
+    return { label: 'Off', status: entry.detail ? `${entry.detail} Turn on adds Agent Guild's own server to ${tool}'s settings.` : `Not added to ${tool}.`, action: 'on', button: 'Turn on' };
+  }
+  if (entry.state === 'on') {
+    return {
+      label: 'On', status: `${from}${yours}New ${tool} sessions can use it.${typing}`, action: 'off', button: 'Turn off',
+      ask: yours ? { message: `Remove the agent-guild server you added to ${tool}'s settings?\n\n${entry.command}`, ok: 'Remove' } : null,
+    };
+  }
+  if (entry.state === 'disabled') {
+    const replace = provider.mcp.mode === 'codex' && !entry.managed;
+    return {
+      label: 'Turned off', status: `${from}${yours}It is turned off in ${tool}.`, action: replace ? 'replace' : 'on', button: replace ? 'Replace…' : 'Turn on',
+      ask: replace ? { message: `${tool} can turn this server on only by replacing it with Agent Guild's own. Replace it?\n\nNow: ${entry.command}`, ok: 'Replace' } : null,
+    };
+  }
+  if (entry.state === 'conflict') {
+    return {
+      label: 'Conflict', warn: true, action: 'replace', button: 'Replace…',
+      status: `${entry.from ? `${tool} takes a server named agent-guild from ${entry.from}'s settings that` : `${tool} already has a server named agent-guild that`} ${entry.detail}.`,
+      ask: entry.from
+        ? { message: `Add Agent Guild's own MCP server to ${tool}'s settings? ${tool} then uses it instead of the one in ${entry.from}'s settings, which stays as it is.`, ok: 'Add' }
+        : { message: `Replace the agent-guild server in ${tool}'s settings with Agent Guild's own?${entry.command ? `\n\nNow: ${entry.command}` : ''}`, ok: 'Replace' },
+    };
+  }
+  return { label: 'Unreadable', warn: true, status: `Agent Guild can't read ${tool}'s MCP settings: ${entry.detail}.` };
 }
 
 function renderMcpSetup(card, provider) {
-  const row = card.querySelector('.mcp-row');
-  const mcp = provider.mcp;
-  row.hidden = !provider.available || !mcp;
-  if (row.hidden) return;
-  const text = row.querySelector('.mcp-text');
-  text.textContent = mcpText(provider, mcp);
-  text.title = mcp.accounts.map((a) => `${a.label}: ${MCP_STATES[a.state] ?? a.state}${a.detail ? `. ${a.detail}` : ''}`).join('\n');
-  const states = new Set(mcp.accounts.map((a) => a.state));
-  const turnOn = row.querySelector('.mcp-on');
-  const turnOff = row.querySelector('.mcp-off');
-  turnOn.hidden = !states.has('off') && !states.has('disabled');
-  turnOff.hidden = !states.has('on') && !states.has('disabled');
-  turnOn.title = `Lets ${provider.tool} see your other Agent Guild sessions, read their answers and screens, and start or stop sessions when you approve. Typing into sessions stays off. Adds agent-guild to ${provider.tool}'s MCP servers for every account.`;
-  turnOff.title = `Removes Agent Guild's MCP server from ${provider.tool}'s settings. A server named agent-guild that runs something else is left as it is.`;
-  const change = async (enabled) => {
-    turnOn.disabled = turnOff.disabled = true;
-    try {
-      const { results } = await api('POST', `/providers/${provider.id}/mcp`, { enabled });
-      const problems = results.filter((r) => r.outcome === 'failed' || r.outcome === 'skipped');
-      const done = results.length - problems.length;
-      const lead = !problems.length ? `Agent Guild MCP is ${enabled ? `on for ${provider.tool}. New sessions can use it` : `off for ${provider.tool}`}.`
-        : `Agent Guild MCP is ${enabled ? 'on' : 'off'} for ${done} of ${results.length} ${provider.tool} accounts.`;
-      toast([lead, ...problems.map((r) => `${r.label}: ${r.detail ?? MCP_STATES[r.state] ?? r.state}.`)].join(' '), problems.length ? 12000 : undefined);
-    } catch (err) {
-      if (err instanceof AuthError) return showAuth(err.message);
-      toast(err.message, 10000);
-    } finally {
-      turnOn.disabled = turnOff.disabled = false;
-    }
-  };
-  turnOn.onclick = () => change(true);
-  turnOff.onclick = () => change(false);
+  const box = card.querySelector('.mcp');
+  const account = selectedAccount(provider);
+  const entry = provider.mcp?.accounts.find((a) => a.id === account.id);
+  box.hidden = !provider.available || !entry;
+  if (box.hidden) return;
+  const view = mcpView(provider, entry);
+  const key = `${provider.id}:${entry.id}`;
+  box.open = openMcp.has(provider.id);
+  box.ontoggle = () => (box.open ? openMcp.add(provider.id) : openMcp.delete(provider.id));
+  box.classList.toggle('warned', Boolean(view.warn));
+  box.querySelector('.mcp-state').textContent = view.label;
+  box.querySelector('.mcp-about').textContent = `Lets ${provider.tool} see your Agent Guild sessions, read their replies and screens, and start or stop sessions when you approve.`;
+  box.querySelector('.mcp-status').textContent = (provider.mcp.accounts.length > 1 ? `${entry.label} account: ` : '') + view.status;
+  const command = box.querySelector('.mcp-command');
+  command.hidden = !entry.command || entry.managed;
+  command.textContent = entry.command ?? '';
+  const button = box.querySelector('.mcp-action');
+  button.hidden = !view.action;
+  button.textContent = view.button ?? '';
+  button.disabled = mcpBusy.has(key);
+  button.onclick = () => changeMcp(provider, entry, view);
+}
+
+function repaintMcp(id) {
+  const provider = state.providers.find((p) => p.id === id);
+  if (!provider) return;
+  for (const card of document.querySelectorAll('.provider[data-id]')) if (card.dataset.id === id) renderMcpSetup(card, provider);
+}
+
+async function changeMcp(provider, entry, view) {
+  if (view.ask && !(await ask(view.ask.message, { ok: view.ask.ok }))) return;
+  const key = `${provider.id}:${entry.id}`;
+  mcpBusy.add(key);
+  repaintMcp(provider.id);
+  try {
+    const { result } = await api('POST', `/providers/${provider.id}/mcp`, { account: entry.id, action: view.action, expect: entry.fingerprint });
+    if (result.outcome === 'failed') toast(result.detail, 12000);
+  } catch (err) {
+    if (err instanceof AuthError) return showAuth(err.message);
+    toast(err.message, 10000);
+  } finally {
+    mcpBusy.delete(key);
+    repaintMcp(provider.id);
+  }
 }
 
 let dealt = false;
@@ -2391,11 +2432,87 @@ function buildProvider(provider) {
     return node;
 }
 
+function readToolCards() {
+  let saved = null;
+  try { saved = JSON.parse(load(TOOL_CARDS_KEY)); } catch {}
+  const ids = (list) => new Set(Array.isArray(list) ? list.filter((id) => typeof id === 'string') : []);
+  return { collapsed: ids(saved?.collapsed), hidden: ids(saved?.hidden) };
+}
+
+const toolCards = readToolCards();
+
+function saveToolCards() {
+  save(TOOL_CARDS_KEY, JSON.stringify({ collapsed: [...toolCards.collapsed], hidden: [...toolCards.hidden] }));
+}
+
+function paintCollapse(card, provider) {
+  const collapsed = toolCards.collapsed.has(provider.id);
+  card.classList.toggle('collapsed', collapsed);
+  const toggle = card.querySelector('.card-toggle');
+  toggle.hidden = false;
+  toggle.dataset.muxFocus = `${provider.id}:collapse`;
+  toggle.setAttribute('aria-expanded', String(!collapsed));
+  toggle.setAttribute('aria-label', `${collapsed ? 'Expand' : 'Collapse'} the ${provider.tool} card`);
+  toggle.title = collapsed ? 'Show everything on this card' : 'Show only what starts a session';
+  card.querySelector('.head-tools').hidden = false;
+}
+
+function setCollapsed(ids, collapsed) {
+  for (const id of ids) {
+    if (collapsed) toolCards.collapsed.add(id);
+    else toolCards.collapsed.delete(id);
+  }
+  saveToolCards();
+  for (const card of $('providers').children) {
+    const provider = state.providers.find((p) => p.id === card.dataset.id);
+    if (provider && ids.includes(provider.id)) paintCollapse(card, provider);
+  }
+}
+
+function setHidden(ids, hidden) {
+  for (const id of ids) {
+    if (hidden) toolCards.hidden.add(id);
+    else toolCards.hidden.delete(id);
+  }
+  saveToolCards();
+  renderProviders();
+}
+
+function renderCardsMenu() {
+  const hidden = state.providers.filter((p) => toolCards.hidden.has(p.id)).length;
+  const button = $('cards-open');
+  button.textContent = hidden ? `Cards · ${hidden} hidden` : 'Cards';
+  button.setAttribute('aria-label', hidden ? `Tool cards, ${hidden} hidden` : 'Tool cards');
+  $('cards-none').hidden = !state.providers.length || hidden < state.providers.length;
+  const box = $('cards-shown');
+  const rows = JSON.stringify(state.providers.map((p) => [p.id, p.vendor, p.tool]));
+  if (box.dataset.rows !== rows) {
+    const focused = box.contains(document.activeElement) ? document.activeElement.value : null;
+    box.dataset.rows = rows;
+    box.replaceChildren(box.querySelector('legend'), ...state.providers.map((provider) => {
+      const input = document.createElement('input');
+      input.type = 'checkbox';
+      input.name = 'card';
+      input.value = provider.id;
+      const label = el('label', 'choice', input, el('span', '', provider.tool));
+      label.title = `${provider.vendor} ${provider.tool}`;
+      return label;
+    }));
+    if (focused) [...box.querySelectorAll('input')].find((input) => input.value === focused)?.focus();
+  }
+  for (const input of box.querySelectorAll('input')) input.checked = !toolCards.hidden.has(input.value);
+}
+
 function renderProviders() {
   const list = $('providers');
   const focused = document.activeElement;
   const focusKey = focused?.dataset?.muxFocus;
-  list.replaceChildren(...state.providers.map(buildProvider));
+  list.replaceChildren(...state.providers.filter((p) => !toolCards.hidden.has(p.id)).map((provider) => {
+    const card = buildProvider(provider);
+    paintCollapse(card, provider);
+    return card;
+  }));
+  renderCardsMenu();
   notifyViews();
   if (focusKey) {
     const controls = [...list.querySelectorAll('[data-mux-focus]')];
@@ -8421,6 +8538,26 @@ window.addEventListener('resize', () => {
   placeMenu($('manager-menu'), $('manager'));
   placeMenu($('panel-sessions'), sessionInvoker());
   placeMenu($('panel-text-size'), $('panel-text-toggle'));
+  placeMenu($('cards-menu'), $('cards-open'));
+});
+onMenu($('cards-menu'), (menu) => {
+  placeMenu(menu, $('cards-open'));
+  menu.querySelector('input')?.focus();
+}, (menu) => returnFocus(menu, $('cards-open')));
+$('cards-menu').addEventListener('change', (e) => {
+  if (e.target.name === 'card') setHidden([e.target.value], !e.target.checked);
+});
+$('cards-collapse').addEventListener('click', () => setCollapsed(state.providers.map((p) => p.id), true));
+$('cards-expand').addEventListener('click', () => setCollapsed(state.providers.map((p) => p.id), false));
+$('cards-show-all').addEventListener('click', () => {
+  setHidden(state.providers.map((p) => p.id), false);
+  $('providers').querySelector('.card-toggle')?.focus();
+});
+$('providers').addEventListener('click', (e) => {
+  const toggle = e.target.closest('.card-toggle');
+  if (!toggle) return;
+  setCollapsed([toggle.closest('.provider').dataset.id], toggle.getAttribute('aria-expanded') === 'true');
+  toggle.scrollIntoView({ block: 'nearest' });
 });
 $('providers').addEventListener('animationend', (e) => {
   if (e.target === e.currentTarget.lastElementChild) e.currentTarget.classList.remove('deal');
@@ -8595,6 +8732,7 @@ yardUi = initYard({
         renderLaunchFlags(node, provider);
         renderUsage(node, provider);
         renderReportingSetup(node, provider);
+        renderMcpSetup(node, provider);
         renderModelStats(node, provider);
         node.dataset.contentSignature = contentSignature;
       }

package/web/index.html

@@ -98,7 +98,17 @@
   <main id="app" hidden>
     <section class="launcher" aria-labelledby="launch-heading">
       <div class="section-head">
-        <h2 id="launch-heading">Start a session</h2>
+        <div class="launch-title">
+          <h2 id="launch-heading">Start a session</h2>
+          <button id="cards-open" class="btn menu-button cards-open" type="button" popovertarget="cards-menu" aria-haspopup="dialog">Cards</button>
+          <div id="cards-menu" class="settings-menu menu cards-menu" popover role="dialog" aria-label="Tool cards">
+            <fieldset id="cards-shown"><legend>Show</legend></fieldset>
+            <fieldset>
+              <button id="cards-collapse" class="menu-item" type="button">Collapse all</button>
+              <button id="cards-expand" class="menu-item" type="button">Expand all</button>
+            </fieldset>
+          </div>
+        </div>
         <div class="launch-tools">
           <div class="cwd">
             <label for="cwd">Working folder</label>
@@ -124,6 +134,7 @@
         </div>
       </div>
       <div id="providers" class="providers" role="list"></div>
+      <p id="cards-none" class="cards-none" hidden>All tool cards are hidden. <button id="cards-show-all" class="btn" type="button">Show all</button></p>
     </section>
 
     <section id="yard" hidden aria-label="Yard">
@@ -799,6 +810,7 @@
           <span class="state"></span>
         </span>
         <span class="head-tools">
+          <button class="card-toggle" type="button" aria-expanded="true" hidden></button>
           <a class="cloud-link" target="_blank" rel="noopener noreferrer" hidden></a>
           <button class="accounts-link" type="button" aria-haspopup="dialog" aria-label="Accounts" hidden></button>
         </span>
@@ -817,12 +829,6 @@
         <span class="reporting-text"></span>
         <button class="btn reporting-toggle" type="button"></button>
       </div>
-      <div class="reporting-row mcp-row" hidden>
-        <span class="mcp-text"></span>
-        <a class="console-link mcp-docs" href="https://github.com/oddessentials/agent-guild/blob/main/docs/mcp.md" target="_blank" rel="noopener noreferrer" title="What Agent Guild's MCP server lets a coding agent do">About</a>
-        <button class="btn mcp-on" type="button">Turn on</button>
-        <button class="btn mcp-off" type="button">Turn off</button>
-      </div>
       <div class="provider-links">
         <a class="console-link usage-link" target="_blank" rel="noopener noreferrer">Usage</a>
         <a class="console-link billing-link" target="_blank" rel="noopener noreferrer">Billing</a>
@@ -838,6 +844,16 @@
         <button class="btn multiplexer-refresh" type="button">Refresh</button>
         <div class="multiplexer-list"></div>
       </details>
+      <details class="mcp" hidden>
+        <summary><span class="mcp-title">Agent Guild MCP</span><span class="mcp-state"></span></summary>
+        <p class="mcp-about"></p>
+        <p class="mcp-status"></p>
+        <code class="mcp-command" hidden></code>
+        <div class="mcp-actions">
+          <a class="console-link" href="https://github.com/oddessentials/agent-guild/blob/main/docs/mcp.md" target="_blank" rel="noopener noreferrer">How it works</a>
+          <button class="btn mcp-action" type="button" hidden></button>
+        </div>
+      </details>
       <p class="hint" hidden></p>
       <div class="provider-actions">
         <button class="btn primary new" type="button">New</button>

package/web/styles.css

@@ -243,7 +243,7 @@ main { max-width: calc(1200px + var(--dock-space, 0px)); margin: 0 auto; padding
   font: inherit; font-size: 0.78rem; text-align: left; cursor: pointer;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
-.model-stats-head::after, .console-link::after, .menu-button::after, .model-name::before, .provider .copies summary::before {
+.model-stats-head::after, .console-link::after, .menu-button::after, .model-name::before, .provider .copies summary::before, .provider .mcp summary::before {
   content: ""; display: inline-block; flex: none; width: 0.75em; height: 0.75em; margin-left: 0.3em; vertical-align: -0.05em;
   background: currentColor; mask: var(--icon-chevron) center / contain no-repeat;
 }
@@ -308,8 +308,6 @@ main { max-width: calc(1200px + var(--dock-space, 0px)); margin: 0 auto; padding
 }
 .reporting-row { display: flex; align-items: center; gap: 10px; font-size: 0.78rem; color: var(--muted); }
 .reporting-row .btn { padding: 2px 10px; font-size: 0.75rem; white-space: nowrap; }
-.mcp-row { flex-wrap: wrap; row-gap: 4px; }
-.mcp-row .mcp-text { flex-basis: 100%; }
 .console-link { color: var(--accent); text-decoration: none; }
 .console-link:hover { text-decoration: underline; }
 .console-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
@@ -317,13 +315,23 @@ main { max-width: calc(1200px + var(--dock-space, 0px)); margin: 0 auto; padding
 .memory-link, .hint-details { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
 .memory-link:hover, .hint-details:hover { text-decoration: underline; }
 .memory-link:focus-visible, .hint-details:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
-/* The bottom margin lets the second icon's padding overlap the gap below, so the header is no taller. */
 .head-tools { display: flex; flex-direction: column; flex: none; align-self: flex-start; margin: -4px -6px -6px 0; }
-.cloud-link, .accounts-link { display: block; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
-.cloud-link::before, .accounts-link::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor; mask: var(--icon-cloud) center / 20px no-repeat; }
+.card-toggle, .cloud-link, .accounts-link { display: block; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
+.card-toggle::before, .cloud-link::before, .accounts-link::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor; mask: var(--icon-cloud) center / 20px no-repeat; }
 .accounts-link::before { mask-image: var(--icon-accounts); }
-.cloud-link:hover, .accounts-link:hover { color: var(--accent); }
-.cloud-link:focus-visible, .accounts-link:focus-visible { color: var(--accent); outline: 2px solid var(--focus); outline-offset: 0; }
+.card-toggle::before { mask-image: var(--icon-chevron); mask-size: 16px; rotate: -90deg; transition: rotate 0.15s var(--ease); }
+.card-toggle[aria-expanded="false"]::before { rotate: 90deg; }
+.providers > .provider.collapsed { padding-top: 16px; align-self: start; }
+:root[data-skin="guild"][data-art="on"] .providers > .provider.collapsed { padding-top: 18px; }
+.providers > .provider.collapsed :is(.card-art, .usage, .model-stats, .reporting-row, .provider-links, .copies, .multiplexers, .mcp, .environment-summary, .hint-details) { display: none; }
+.providers > .provider.collapsed::after { background: var(--brackets, none); background-repeat: no-repeat; }
+.providers > .provider.collapsed.spent .provider-icon { filter: grayscale(1); }
+.launch-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
+.cards-open { padding: 3px 10px; font-size: 0.78rem; }
+#cards-shown .choice > span::before { content: none; }
+.cards-none { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0; color: var(--muted); font-size: 0.85rem; }
+.card-toggle:hover, .cloud-link:hover, .accounts-link:hover { color: var(--accent); }
+.card-toggle:focus-visible, .cloud-link:focus-visible, .accounts-link:focus-visible { color: var(--accent); outline: 2px solid var(--focus); outline-offset: 0; }
 .provider-actions { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
 /* A card's note sits with its buttons at the foot of the card, above them. */
 .provider .hint { margin: auto 0 0; font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
@@ -338,6 +346,17 @@ main { max-width: calc(1200px + var(--dock-space, 0px)); margin: 0 auto; padding
 .provider .copies li span { display: block; }
 .provider .copies .copy-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; }
 .provider .copies .copy-name { color: var(--text); min-width: 0; }
+.provider .mcp { font-size: 0.78rem; color: var(--muted); overflow-wrap: anywhere; }
+.provider .mcp summary { display: flex; align-items: baseline; cursor: pointer; list-style: none; white-space: nowrap; }
+.provider .mcp summary::-webkit-details-marker { display: none; }
+.provider .mcp summary::before { margin: 0 0.3em 0 0; align-self: center; transition: transform 0.15s var(--ease); }
+.provider .mcp[open] summary::before { transform: rotate(90deg); }
+.provider .mcp .mcp-state { margin-left: auto; padding-left: 8px; font-weight: 600; white-space: nowrap; }
+.provider .mcp.warned .mcp-state { color: var(--warn); }
+.provider .mcp p { margin: 6px 0 0; line-height: 1.45; }
+.provider .mcp .mcp-command { display: block; margin-top: 4px; font-size: 0.72rem; color: var(--text); }
+.provider .mcp .mcp-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
+.provider .mcp .mcp-action { padding: 2px 10px; font-size: 0.75rem; white-space: nowrap; }
 .provider .copies .copy-path { font-family: var(--font-mono); font-size: 0.72rem; }
 .provider .copies .copy-uninstall { flex: none; padding: 2px 10px; font-size: 0.75rem; }
 .provider.busy { opacity: 0.6; pointer-events: none; }
@@ -1318,7 +1337,7 @@ body:has(#terminal-panel:not([hidden]) .terminal-controls:not([hidden])) .toast
 
 @media (prefers-reduced-motion: reduce) {
   .status-pill.active::before, .agent.working::after, .model-detail .stat-fill, .toast:not([hidden]), .tip:not([hidden]), .run-failed:not([hidden]), .menu:popover-open { animation: none; }
-  .model-name::before, .provider .copies summary::before, .menu-button::after, .btn, .videos-play img, .videos-play-icon, .models, .news-panel, .models::backdrop, .news-panel::backdrop { transition: none; }
+  .model-name::before, .provider .copies summary::before, .provider .mcp summary::before, .menu-button::after, .btn, .videos-play img, .videos-play-icon, .models, .news-panel, .models::backdrop, .news-panel::backdrop { transition: none; }
   .github-waiting::before, .github-running, body:has(#app[hidden]):has(#auth[hidden]):has(#stopped[hidden])::after { animation: none; }
   .btn:active:not(:disabled):not([aria-disabled="true"]) { transform: none; }
   .btn.voice[aria-pressed="true"]::before { animation: none; }