@oddessentials/agent-guild 1.21.2 → 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,6 +2267,91 @@ function renderReportingSetup(card, provider) {
   };
 }
 
+const openMcp = new Set();
+const mcpBusy = new Set();
+
+/** 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 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;
 
 // Both layouts mount these same controls with these same command handlers.
@@ -2311,7 +2398,8 @@ function buildProvider(provider) {
     if (provider.available && provider.instructionsSource && !instructionCounts.has(instructionKey(provider))) refreshInstructionCounts();
     const install = node.querySelector('.install');
     install.hidden = provider.available || !provider.installable;
-    install.title = provider.installCommand ? `Downloads the latest ${provider.tool} release into Docker's plugin folder, in a session.` : `Install ${provider.tool} using npm.${provider.npmNote ? ` ${provider.npmNote}` : ''}`;
+    install.title = provider.plugin ? `Downloads the latest ${provider.tool} release into Docker's plugin folder, in a session.`
+      : provider.installCommand ? `Run "${provider.installCommand}" in a session` : `Install ${provider.tool} using npm.${provider.npmNote ? ` ${provider.npmNote}` : ''}`;
     install.addEventListener('click', () => installProvider(provider, node));
     const update = node.querySelector('.update');
     update.hidden = !(provider.available && provider.updateCommand && (provider.updateAvailable || checkFailed));
@@ -2336,6 +2424,7 @@ function buildProvider(provider) {
     renderMultiplexers(node, provider);
     renderUsage(node, provider);
     renderReportingSetup(node, provider);
+    renderMcpSetup(node, provider);
     renderModelStats(node, provider);
     renderProviderPending(node, provider);
     paintManagerActions(node);
@@ -3830,7 +3919,7 @@ function installNote(provider) {
   }
   if (last.kind === 'uninstall') return last.outcome === 'remaining' ? 'Uninstalled copy is still present' : '';
   if (last.verification === 'failed') return `Installation completed, but ${provider.tool} verification failed`;
-  if (last.outcome === 'missing') return provider.installCommand ? 'Installed, but docker does not list it' : 'Installed, but not found on PATH';
+  if (last.outcome === 'missing') return provider.plugin ? 'Installed, but docker does not list it' : 'Installed, but not found on PATH';
   if (last.outcome === 'unchanged') return 'No version change after update';
   return '';
 }
@@ -8546,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

@@ -137,7 +137,7 @@
           <div class="yard-overlay">
             <div id="yard-loading" class="yard-loading" role="status" data-mode="scene"><span id="yard-loading-text">Preparing your yard…</span><span id="yard-loading-size" class="yard-loading-size" aria-hidden="true"></span><span class="yard-loading-bar" aria-hidden="true"></span></div>
             <div id="yard-swap-failure" class="yard-swap-failure" hidden role="status"><span id="yard-swap-failure-text"></span><button id="yard-swap-retry" class="btn" type="button">Retry</button></div>
-            <div class="yard-camera" role="group" aria-label="Camera"><button id="yard-zoom-in" type="button" class="btn" aria-label="Zoom in">+</button><button id="yard-zoom-out" type="button" class="btn" aria-label="Zoom out">−</button><button id="yard-fit" type="button" class="btn">Overview</button><button id="yard-focus" type="button" class="btn" disabled>Focus selected</button><button id="yard-photo" type="button" class="btn" aria-haspopup="dialog" aria-label="Save a picture of the Yard" title="Save a picture of the Yard" disabled hidden><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 8.5A1.5 1.5 0 0 1 5.5 7h2.3l1.4-2h5.6l1.4 2h2.3A1.5 1.5 0 0 1 20 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5z"/><circle cx="12" cy="12.75" r="3.25"/></svg></button></div>
+            <div class="yard-camera" role="group" aria-label="Yard controls"><button id="yard-zoom-in" type="button" class="btn" aria-label="Zoom in">+</button><button id="yard-zoom-out" type="button" class="btn" aria-label="Zoom out">−</button><button id="yard-fit" type="button" class="btn">Overview</button><button id="yard-focus" type="button" class="btn" disabled>Focus selected</button><button id="yard-photo" type="button" class="btn" aria-haspopup="dialog" aria-label="Save a picture of the Yard" title="Save a picture of the Yard" disabled hidden><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M4 8.5A1.5 1.5 0 0 1 5.5 7h2.3l1.4-2h5.6l1.4 2h2.3A1.5 1.5 0 0 1 20 8.5v9a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 4 17.5z"/><circle cx="12" cy="12.75" r="3.25"/></svg></button><button id="yard-fireworks" type="button" class="btn" aria-label="Fireworks in this Yard only" title="Fireworks in this Yard only" disabled><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" aria-hidden="true" focusable="false"><path d="M12 3v3m0 9v6M3 10h3m12 0h3M5.6 3.6l2.2 2.2m8.4 8.4 2.2 2.2M18.4 3.6l-2.2 2.2m-8.4 8.4-2.2 2.2"/><circle cx="12" cy="10" r="1"/></svg></button></div>
             <p id="yard-help"><span class="yard-help-pointer">Drag to explore · Scroll to zoom · Select to inspect · Double-click a session to open</span><span class="yard-help-touch">Drag to explore · Pinch to zoom · Tap to inspect · Open from the Inspector</span></p>
           </div>
         </div>
@@ -832,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;
 }
@@ -336,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; }
@@ -1316,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; }