@oddessentials/agent-guild 1.22.0 → 1.22.1

package/web/app.js

@@ -1624,6 +1624,7 @@ function selectAccount(provider, id) {
     renderAccounts(card, provider);
     renderUsage(card, provider);
     renderReportingSetup(card, provider);
+    renderMcpSetup(card, provider);
   }
   refreshPendingActions();
   notifyViews();
@@ -1966,6 +1967,7 @@ function renderAccounts(card, provider) {
         renderAccounts(card, provider);
         renderUsage(card, provider);
         renderReportingSetup(card, provider);
+        renderMcpSetup(card, provider);
       });
       return chip;
     }));
@@ -2265,51 +2267,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;
@@ -8595,6 +8635,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

@@ -817,12 +817,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 +832,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; }
@@ -338,6 +336,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 +1327,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; }