clay-server 2.26.0-beta.5 → 2.26.0-beta.7

package/lib/public/css/overlays.css

@@ -123,6 +123,187 @@ button.top-bar-pill.pill-accent:hover { background: color-mix(in srgb, var(--acc
 }
 .pwa-standalone .top-bar-share-btn { display: none !important; }
 
+/* Extension pill button — same style as share/install pills */
+.ext-pill-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.top-bar-ext-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: color-mix(in srgb, var(--text-muted) 10%, transparent);
+  color: var(--text-secondary);
+  border: none;
+  border-radius: 10px;
+  padding: 2px 10px;
+  font-family: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+  line-height: 1;
+  transition: background 0.15s, color 0.15s;
+}
+.top-bar-ext-btn .lucide { width: 12px; height: 12px; }
+.top-bar-ext-btn:hover { background: color-mix(in srgb, var(--text-muted) 18%, transparent); color: var(--text); }
+@media (max-width: 768px) {
+  .top-bar-ext-btn span { display: none; }
+}
+
+/* Extension popover */
+.ext-popover {
+  display: none;
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 16px;
+  z-index: 200;
+  box-shadow: 0 8px 32px rgba(var(--shadow-rgb), 0.35);
+  width: 340px;
+}
+.ext-popover.visible { display: block; }
+.ext-popover-header { margin-bottom: 8px; }
+.ext-popover-title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--text);
+}
+.ext-experimental {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--warning, #f59e0b);
+  background: color-mix(in srgb, var(--warning, #f59e0b) 12%, transparent);
+  padding: 2px 6px;
+  border-radius: 6px;
+  vertical-align: middle;
+  letter-spacing: 0.3px;
+  text-transform: uppercase;
+  position: relative;
+  top: -1px;
+}
+.ext-popover-sub {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-top: 2px;
+}
+.ext-popover-sub a {
+  color: var(--accent);
+  text-decoration: none;
+}
+.ext-popover-sub a:hover { text-decoration: underline; }
+.ext-popover-desc {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin-bottom: 12px;
+}
+.ext-popover-download {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  padding: 8px 0;
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  border-radius: 8px;
+  font-family: inherit;
+  font-size: 12.5px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+.ext-popover-download .lucide { width: 14px; height: 14px; }
+.ext-popover-download:hover { opacity: 0.85; }
+.ext-popover-download:disabled { opacity: 0.5; cursor: default; }
+.ext-popover-status {
+  font-size: 11px;
+  color: var(--accent);
+  text-align: center;
+  margin-top: 6px;
+}
+.ext-popover-status.hidden { display: none; }
+.ext-popover-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 12px 0;
+}
+.ext-popover-guide-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 8px;
+}
+.ext-popover-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.ext-popover-step {
+  font-size: 12px;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  display: flex;
+  gap: 8px;
+  align-items: baseline;
+}
+.ext-snum {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  flex-shrink: 0;
+  position: relative;
+  top: 1px;
+}
+.ext-popover-code {
+  font-family: "Roboto Mono", monospace;
+  font-size: 11px;
+  background: var(--bg-tertiary);
+  padding: 1px 5px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.ext-popover-code:hover { background: color-mix(in srgb, var(--accent) 15%, var(--bg-tertiary)); }
+
+/* Extension connected state */
+.top-bar-ext-btn.ext-connected {
+  background: color-mix(in srgb, var(--success, #22c55e) 12%, transparent);
+  color: var(--success, #22c55e);
+}
+.top-bar-ext-btn.ext-connected:hover {
+  background: color-mix(in srgb, var(--success, #22c55e) 20%, transparent);
+  color: var(--success, #22c55e);
+}
+.ext-popover-connected {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  background: color-mix(in srgb, var(--success, #22c55e) 10%, transparent);
+  color: var(--success, #22c55e);
+  border-radius: 8px;
+  font-size: 12.5px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+.ext-popover-connected .lucide { width: 15px; height: 15px; }
+.ext-popover-connected.hidden { display: none; }
+
 /* PWA install modal */
 .pwa-modal {
   position: fixed;

package/lib/public/css/rewind.css

@@ -171,6 +171,85 @@
 
 .sys-msg.error .sys-text { color: var(--error); }
 
+/* ==========================================================================
+   Context Card (browser tab preview shown between user msg and assistant response)
+   ========================================================================== */
+
+.context-card {
+  max-width: 400px;
+  margin: 8px auto 12px;
+  padding: 12px;
+  background: var(--bg-alt);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.08);
+}
+
+.context-card-header {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 10px;
+  font-size: 11px;
+  color: var(--text-muted);
+  letter-spacing: 0.02em;
+  font-weight: 500;
+}
+
+.context-card-header .context-card-icon {
+  font-size: 13px;
+  opacity: 0.7;
+}
+
+.context-card-screenshot {
+  display: block;
+  width: 100%;
+  max-height: 200px;
+  object-fit: contain;
+  border-radius: 8px;
+  background: var(--bg);
+  cursor: pointer;
+  transition: transform 0.15s ease;
+}
+
+.context-card-screenshot:hover {
+  transform: scale(1.01);
+}
+
+.context-card-skeleton {
+  width: 100%;
+  height: 120px;
+  border-radius: 8px;
+  background: var(--bg);
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+}
+
+.context-card-meta {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-top: 8px;
+  gap: 12px;
+}
+
+.context-card-title {
+  font-size: 12px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+  min-width: 0;
+}
+
+.context-card-domain {
+  font-size: 11px;
+  color: var(--text-dimmer);
+  font-family: monospace;
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
 /* ==========================================================================
    Activity Indicator
    ========================================================================== */

package/lib/public/css/server-settings.css

@@ -906,3 +906,4 @@
   line-height: 1.45;
   margin-top: 2px;
 }
+

package/lib/public/css/title-bar.css

@@ -23,8 +23,8 @@
   display: inline-flex;
   align-items: center;
   gap: 4px;
-  background: color-mix(in srgb, var(--success) 12%, transparent);
-  color: var(--success);
+  background: color-mix(in srgb, #3b82f6 12%, transparent);
+  color: #3b82f6;
   border: none;
   border-radius: 10px;
   padding: 2px 10px;
@@ -38,7 +38,7 @@
 }
 
 .top-bar-update-btn .lucide { width: 12px; height: 12px; }
-.top-bar-update-btn:hover { background: color-mix(in srgb, var(--success) 20%, transparent); }
+.top-bar-update-btn:hover { background: color-mix(in srgb, #3b82f6 20%, transparent); }
 
 /* --- Top bar actions (right-aligned group) --- */
 .top-bar-actions {

package/lib/public/index.html

@@ -52,6 +52,28 @@
   <div id="top-bar">
     <div class="top-bar-left-pills">
       <button id="pwa-install-pill" class="top-bar-install-btn hidden" title="Open as app"><i data-lucide="download"></i> Open as app</button>
+      <div id="ext-pill-wrap" class="ext-pill-wrap">
+        <button id="ext-pill" class="top-bar-ext-btn" title="Chrome Extension"><i data-lucide="puzzle"></i> Extension</button>
+        <div id="ext-popover" class="ext-popover">
+          <div class="ext-popover-header">
+            <div class="ext-popover-title">Clay for Chrome <span class="ext-experimental">Experimental</span></div>
+            <div class="ext-popover-sub">v0.1.0 &middot; <a href="https://github.com/chadbyte/clay-chrome" target="_blank" rel="noopener">GitHub</a></div>
+          </div>
+          <div class="ext-popover-connected hidden" id="ext-connected-banner"><i data-lucide="check-circle"></i> Extension connected</div>
+          <div class="ext-popover-desc" id="ext-popover-desc">Connect your browser to Clay. Gives Claude visibility into open tabs, console, network, DOM, and screenshots.</div>
+          <button class="ext-popover-download" id="ext-download-btn"><i data-lucide="download"></i> Download Extension (.zip)</button>
+          <div class="ext-popover-status hidden" id="ext-download-status"></div>
+          <div class="ext-popover-divider" id="ext-popover-divider"></div>
+          <div class="ext-popover-guide-title" id="ext-popover-guide-title">Installation</div>
+          <div class="ext-popover-steps">
+            <div class="ext-popover-step"><span class="ext-snum">1</span> Download above, then unzip to a permanent folder.</div>
+            <div class="ext-popover-step"><span class="ext-snum">2</span> Open <code id="ext-copy-url" class="ext-popover-code" title="Click to copy">chrome://extensions</code></div>
+            <div class="ext-popover-step"><span class="ext-snum">3</span> Enable <strong>Developer mode</strong> (top-right toggle).</div>
+            <div class="ext-popover-step"><span class="ext-snum">4</span> <strong>Load unpacked</strong> > select the unzipped folder.</div>
+            <div class="ext-popover-step"><span class="ext-snum">5</span> Refresh this page. Done!</div>
+          </div>
+        </div>
+      </div>
       <button id="share-pill" class="top-bar-share-btn" title="Share"><i data-lucide="qr-code"></i> Share</button>
       <div id="update-pill-wrap" class="top-bar-update hidden">
         <button id="update-pill" class="top-bar-update-btn"><i data-lucide="arrow-up-circle"></i> <span id="update-version"></span> is available. Update now</button>
@@ -420,9 +442,9 @@
           <button id="context-sources-add" type="button" title="Add context source"><i data-lucide="plus"></i><span>Context Sources</span></button>
           <div id="context-sources-picker" class="hidden">
             <div class="context-picker-section" id="context-picker-terminals"></div>
+            <div class="context-picker-section" id="context-picker-tabs"></div>
           </div>
         </div>
-        <div id="suggestion-chips" class="hidden"></div>
         <div id="input-row">
           <div id="context-mini" class="hidden">
             <div class="context-mini-bar">
@@ -431,6 +453,7 @@
             <span class="context-mini-label" id="context-mini-label">0%</span>
           </div>
           <div id="image-preview-bar"></div>
+          <div id="suggestion-chips" class="hidden"></div>
           <textarea id="input" rows="1" placeholder="Message Claude Code..." enterkeyhint="send" dir="auto"></textarea>
           <div id="input-bottom">
             <div id="attach-wrap">

package/lib/public/modules/context-sources.js

@@ -1,8 +1,9 @@
-// Context Sources — attach terminal output (and future browser tabs) as context for Claude
+// Context Sources — attach terminal output and browser tabs as context for Claude
 
 var ctx = null;
 var activeSourceIds = new Set();
 var terminalList = []; // synced from terminal module's term_list
+var browserTabList = []; // synced from Chrome extension via postMessage
 
 export function initContextSources(_ctx) {
   ctx = _ctx;
@@ -79,6 +80,36 @@ export function updateTerminalList(terminals) {
   }
 }
 
+// Called when Chrome extension sends tab list via postMessage
+export function updateBrowserTabList(tabs) {
+  browserTabList = tabs || [];
+
+  // Remove active tab sources that no longer exist
+  var changed = false;
+  for (var id of activeSourceIds) {
+    if (id.startsWith("tab:")) {
+      var tabId = parseInt(id.split(":")[1], 10);
+      var found = false;
+      for (var i = 0; i < browserTabList.length; i++) {
+        if (browserTabList[i].id === tabId) { found = true; break; }
+      }
+      if (!found) {
+        activeSourceIds.delete(id);
+        changed = true;
+      }
+    }
+  }
+
+  if (changed) saveToServer();
+  renderChips();
+
+  // If picker is open, re-render it
+  var picker = document.getElementById("context-sources-picker");
+  if (!picker.classList.contains("hidden")) {
+    renderPicker();
+  }
+}
+
 function toggleSource(sourceId) {
   if (activeSourceIds.has(sourceId)) {
     activeSourceIds.delete(sourceId);
@@ -150,42 +181,87 @@ function renderChips() {
 }
 
 function renderPicker() {
-  var section = document.getElementById("context-picker-terminals");
-  section.innerHTML = "";
+  // --- Terminals section ---
+  var termSection = document.getElementById("context-picker-terminals");
+  termSection.innerHTML = "";
 
-  var sectionLabel = document.createElement("div");
-  sectionLabel.className = "context-picker-section-label";
-  sectionLabel.textContent = "Terminals";
-  section.appendChild(sectionLabel);
+  var termLabel = document.createElement("div");
+  termLabel.className = "context-picker-section-label";
+  termLabel.textContent = "Terminals";
+  termSection.appendChild(termLabel);
 
   if (terminalList.length === 0) {
-    var empty = document.createElement("div");
-    empty.className = "context-picker-empty";
-    empty.textContent = "No terminals open";
-    section.appendChild(empty);
-    return;
-  }
+    var termEmpty = document.createElement("div");
+    termEmpty.className = "context-picker-empty";
+    termEmpty.textContent = "No terminals open";
+    termSection.appendChild(termEmpty);
+  } else {
+    for (var i = 0; i < terminalList.length; i++) {
+      var term = terminalList[i];
+      var termSourceId = "term:" + term.id;
+      var termActive = activeSourceIds.has(termSourceId);
 
-  for (var i = 0; i < terminalList.length; i++) {
-    var term = terminalList[i];
-    var sourceId = "term:" + term.id;
-    var isActive = activeSourceIds.has(sourceId);
+      var termItem = document.createElement("div");
+      termItem.className = "context-picker-item" + (termActive ? " active" : "");
+      termItem.setAttribute("data-source-id", termSourceId);
 
-    var item = document.createElement("div");
-    item.className = "context-picker-item" + (isActive ? " active" : "");
-    item.setAttribute("data-source-id", sourceId);
+      termItem.innerHTML =
+        '<i data-lucide="square-terminal"></i>' +
+        '<span>' + escapeHtml(term.title || ("Terminal " + term.id)) + '</span>' +
+        '<i data-lucide="check" class="context-picker-check"></i>';
 
-    item.innerHTML =
-      '<i data-lucide="square-terminal"></i>' +
-      '<span>' + escapeHtml(term.title || ("Terminal " + term.id)) + '</span>' +
-      '<i data-lucide="check" class="context-picker-check"></i>';
+      termItem.addEventListener("click", function() {
+        toggleSource(this.getAttribute("data-source-id"));
+        if (typeof lucide !== "undefined") lucide.createIcons();
+      });
 
-    item.addEventListener("click", function() {
-      toggleSource(this.getAttribute("data-source-id"));
-      if (typeof lucide !== "undefined") lucide.createIcons();
-    });
+      termSection.appendChild(termItem);
+    }
+  }
+
+  // --- Browser Tabs section ---
+  var tabSection = document.getElementById("context-picker-tabs");
+  tabSection.innerHTML = "";
+
+  if (browserTabList.length > 0) {
+    var tabLabel = document.createElement("div");
+    tabLabel.className = "context-picker-section-label";
+    tabLabel.textContent = "Browser Tabs";
+    tabSection.appendChild(tabLabel);
+
+    for (var j = 0; j < browserTabList.length; j++) {
+      var tab = browserTabList[j];
+      var tabSourceId = "tab:" + tab.id;
+      var tabActive = activeSourceIds.has(tabSourceId);
+
+      var tabItem = document.createElement("div");
+      tabItem.className = "context-picker-item" + (tabActive ? " active" : "");
+      tabItem.setAttribute("data-source-id", tabSourceId);
+
+      var tabTitle = tab.title || tab.url || "Tab";
+      // Truncate long URLs for display
+      var tabDisplay = tabTitle.length > 50 ? tabTitle.slice(0, 47) + "..." : tabTitle;
+
+      var faviconHtml = "";
+      if (tab.favIconUrl) {
+        faviconHtml = '<img src="' + escapeHtml(tab.favIconUrl) + '" class="context-picker-favicon" onerror="this.style.display=\'none\';this.nextElementSibling.style.display=\'\'">' +
+          '<i data-lucide="globe" style="display:none"></i>';
+      } else {
+        faviconHtml = '<i data-lucide="globe"></i>';
+      }
+
+      tabItem.innerHTML =
+        faviconHtml +
+        '<span title="' + escapeHtml(tab.url || "") + '">' + escapeHtml(tabDisplay) + '</span>' +
+        '<i data-lucide="check" class="context-picker-check"></i>';
+
+      tabItem.addEventListener("click", function() {
+        toggleSource(this.getAttribute("data-source-id"));
+        if (typeof lucide !== "undefined") lucide.createIcons();
+      });
 
-    section.appendChild(item);
+      tabSection.appendChild(tabItem);
+    }
   }
 
   if (typeof lucide !== "undefined") lucide.createIcons();
@@ -201,11 +277,22 @@ function getSourceLabel(id) {
     }
     return "Terminal " + termId;
   }
+  if (id.startsWith("tab:")) {
+    var tabId = parseInt(id.split(":")[1], 10);
+    for (var j = 0; j < browserTabList.length; j++) {
+      if (browserTabList[j].id === tabId) {
+        var title = browserTabList[j].title || browserTabList[j].url || "";
+        return title.length > 30 ? title.slice(0, 27) + "..." : title;
+      }
+    }
+    return "Tab " + tabId;
+  }
   return id;
 }
 
 function getSourceIcon(id) {
   if (id.startsWith("term:")) return "square-terminal";
+  if (id.startsWith("tab:")) return "globe";
   return "circle";
 }
 

package/lib/public/modules/notifications.js

@@ -1,4 +1,4 @@
-import { copyToClipboard } from './utils.js';
+import { copyToClipboard, showToast } from './utils.js';
 import { iconHtml, refreshIcons } from './icons.js';
 
 var ctx;
@@ -155,6 +155,114 @@ export function initNotifications(_ctx) {
     });
   })();
 
+  // --- Extension pill popover ---
+  (function () {
+    var extPillWrap = $("ext-pill-wrap");
+    var extPillBtn = $("ext-pill");
+    var extPopover = $("ext-popover");
+    var extDownloadBtn = $("ext-download-btn");
+    var extDownloadStatus = $("ext-download-status");
+    var extCopyUrl = $("ext-copy-url");
+    if (!extPillWrap || !extPillBtn || !extPopover) return;
+
+    // Detect extension connection via postMessage from content.js
+    var extConnected = false;
+    var connectedBanner = $("ext-connected-banner");
+    var extDesc = $("ext-popover-desc");
+    var extDivider = $("ext-popover-divider");
+    var extGuideTitle = $("ext-popover-guide-title");
+    var extSteps = extPopover.querySelector(".ext-popover-steps");
+
+    function setExtConnected() {
+      if (extConnected) return;
+      extConnected = true;
+      extPillBtn.classList.add("ext-connected");
+      extPillBtn.innerHTML = '<i data-lucide="check"></i> Extension';
+      refreshIcons(extPillBtn);
+      if (connectedBanner) connectedBanner.classList.remove("hidden");
+      if (extDownloadBtn) extDownloadBtn.style.display = "none";
+      if (extDownloadStatus) extDownloadStatus.classList.add("hidden");
+      if (extDesc) extDesc.style.display = "none";
+      if (extDivider) extDivider.style.display = "none";
+      if (extGuideTitle) extGuideTitle.style.display = "none";
+      if (extSteps) extSteps.style.display = "none";
+    }
+
+    window.addEventListener("message", function (event) {
+      if (event.source !== window) return;
+      if (!event.data || event.data.source !== "clay-chrome-extension") return;
+      setExtConnected();
+    });
+
+    // Toggle popover
+    extPillBtn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      extPopover.classList.toggle("visible");
+      refreshIcons(extPopover);
+    });
+
+    document.addEventListener("click", function (e) {
+      if (!extPopover.contains(e.target) && e.target !== extPillBtn && !extPillBtn.contains(e.target)) {
+        extPopover.classList.remove("visible");
+      }
+    });
+
+    // Download button
+    if (extDownloadBtn) {
+      extDownloadBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        extDownloadBtn.disabled = true;
+        extDownloadBtn.innerHTML = iconHtml("loader") + " Downloading...";
+        refreshIcons(extDownloadBtn);
+        var loaderIcon = extDownloadBtn.querySelector(".lucide");
+        if (loaderIcon) loaderIcon.style.animation = "spin 1s linear infinite";
+        if (extDownloadStatus) {
+          extDownloadStatus.classList.remove("hidden");
+          extDownloadStatus.textContent = "Fetching from GitHub...";
+          extDownloadStatus.style.color = "";
+        }
+        fetch("/api/extension/download").then(function (resp) {
+          if (!resp.ok) throw new Error("Download failed (" + resp.status + ")");
+          return resp.blob();
+        }).then(function (blob) {
+          var url = URL.createObjectURL(blob);
+          var a = document.createElement("a");
+          a.href = url;
+          a.download = "clay-chrome-extension.zip";
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+          if (extDownloadStatus) {
+            extDownloadStatus.textContent = "Download complete!";
+            extDownloadStatus.style.color = "var(--accent)";
+          }
+          showToast("Extension downloaded");
+        }).catch(function (err) {
+          if (extDownloadStatus) {
+            extDownloadStatus.textContent = "Failed: " + err.message;
+            extDownloadStatus.style.color = "var(--danger, #e53935)";
+          }
+          showToast("Download failed");
+        }).finally(function () {
+          extDownloadBtn.disabled = false;
+          extDownloadBtn.innerHTML = iconHtml("download") + " Download Extension (.zip)";
+          refreshIcons(extDownloadBtn);
+        });
+      });
+    }
+
+    // Copy chrome://extensions URL
+    if (extCopyUrl) {
+      extCopyUrl.addEventListener("click", function (e) {
+        e.stopPropagation();
+        copyToClipboard("chrome://extensions").then(function () {
+          showToast("Copied chrome://extensions");
+        });
+      });
+    }
+  })();
+
   // --- Settings: Check for updates ---
   (function () {
     var settingsUpdateCheck = $("settings-update-check");

package/lib/sdk-bridge.js

@@ -134,6 +134,7 @@ function createSDKBridge(opts) {
   var mateDisplayName = opts.mateDisplayName || "";
   var isMate = opts.isMate || (slug.indexOf("mate-") === 0);
   var dangerouslySkipPermissions = opts.dangerouslySkipPermissions || false;
+  var mcpServers = opts.mcpServers || null;
   var onProcessingChanged = opts.onProcessingChanged || function () {};
   var onTurnDone = opts.onTurnDone || null;
 
@@ -1128,6 +1129,7 @@ function createSDKBridge(opts) {
       agentProgressSummaries: true,
     };
 
+    if (mcpServers) queryOptions.mcpServers = mcpServers;
     if (sm.currentModel) queryOptions.model = sm.currentModel;
     if (sm.currentEffort) queryOptions.effort = sm.currentEffort;
     if (sm.currentBetas && sm.currentBetas.length > 0) queryOptions.betas = sm.currentBetas;
@@ -1940,6 +1942,7 @@ function createSDKBridge(opts) {
       abortController: session.abortController,
       promptSuggestions: true,
       agentProgressSummaries: true,
+      mcpServers: mcpServers || undefined,
       canUseTool: function(toolName, input, toolOpts) {
         return handleCanUseTool(session, toolName, input, toolOpts);
       },