clay-server 2.27.1 → 2.28.0-beta.2

package/lib/public/index.html

@@ -191,6 +191,7 @@
             <button id="file-browser-btn"><i data-lucide="folder-tree"></i> <span>File browser</span></button>
             <button id="terminal-sidebar-btn"><i data-lucide="square-terminal"></i> <span>Terminal</span><span id="terminal-sidebar-count" class="sidebar-badge hidden"></span></button>
             <button id="sticky-notes-sidebar-btn"><i data-lucide="sticky-note"></i> <span>Sticky Notes</span><span id="sticky-notes-sidebar-count" class="sidebar-badge hidden"></span></button>
+            <button id="mcp-btn"><i data-lucide="cable"></i> <span>MCP Servers</span><span id="mcp-sidebar-count" class="sidebar-badge hidden"></span></button>
             <button id="skills-btn"><i data-lucide="puzzle"></i> <span>Skills</span></button>
             <button id="scheduler-btn"><i data-lucide="calendar-clock"></i> <span>Scheduled Tasks</span></button>
           </div>
@@ -255,6 +256,7 @@
         <button id="mate-memory-btn"><i data-lucide="brain"></i> <span>Memory</span><span id="mate-memory-count" class="sidebar-badge hidden"></span></button>
         <button id="mate-knowledge-btn"><i data-lucide="book-open"></i> <span>Knowledge</span><span id="mate-knowledge-count" class="sidebar-badge hidden"></span></button>
         <button id="mate-sticky-notes-btn"><i data-lucide="sticky-note"></i> <span>Sticky Notes</span></button>
+        <button id="mate-mcp-btn"><i data-lucide="cable"></i> <span>MCP Servers</span><span id="mate-mcp-sidebar-count" class="sidebar-badge hidden"></span></button>
         <button id="mate-skills-btn"><i data-lucide="puzzle"></i> <span>Skills</span></button>
         <button id="mate-scheduler-btn"><i data-lucide="calendar-clock"></i> <span>Scheduled Tasks</span></button>
       </div>
@@ -1507,6 +1509,20 @@
   </div>
 </div>
 
+<!-- MCP Servers Modal -->
+<div id="mcp-modal" class="hidden">
+  <div class="confirm-backdrop"></div>
+  <div class="confirm-dialog mcp-dialog">
+    <div class="mcp-header">
+      <span class="mcp-title"><i data-lucide="cable"></i> MCP Servers</span>
+      <button class="skills-close" id="mcp-modal-close"><i data-lucide="x"></i></button>
+    </div>
+    <div class="mcp-content" id="mcp-content">
+      <p class="mcp-no-servers">No MCP servers detected. Configure in Clay Chrome Extension.</p>
+    </div>
+  </div>
+</div>
+
 <!-- Debate Modal (Wizard) -->
 <div id="debate-modal" class="hidden">
   <div class="debate-modal-backdrop"></div>
@@ -1672,6 +1688,7 @@
     <div class="ralph-preview-tabs">
       <button class="ralph-tab active" data-tab="prompt">PROMPT.md</button>
       <button class="ralph-tab" data-tab="judge">JUDGE.md</button>
+      <button class="ralph-tab" data-tab="model">Model</button>
     </div>
     <div id="ralph-preview-body" class="ralph-preview-body"></div>
     <div class="ralph-preview-footer" id="ralph-preview-footer">
@@ -1899,8 +1916,6 @@
     <div class="sched-create-date-chips">
       <input type="date" class="sched-create-date-input" id="sched-create-date-picker" value="">
       <input type="time" class="sched-create-time-input" id="sched-create-time" value="09:00">
-      <button class="sched-create-recurrence-btn" id="sched-create-recurrence-btn" title="Recurrence"><i data-lucide="repeat"></i></button>
-      <button class="sched-create-interval-btn" id="sched-create-interval-btn" title="Interval"><i data-lucide="timer"></i></button>
     </div>
     <button class="sched-create-close-btn" id="sched-create-cancel" title="Close"><i data-lucide="x"></i></button>
   </div>
@@ -1925,7 +1940,7 @@
     </div>
     <input type="text" class="sched-create-title-input" id="sched-create-title" placeholder="Schedule Title" maxlength="80" spellcheck="false" autocomplete="off">
   </div>
-  <!-- Task (JS dropdown) -->
+  <!-- Task -->
   <div class="sched-create-row">
     <i data-lucide="list-todo" class="sched-create-row-icon"></i>
     <div class="sched-create-task-dropdown" id="sched-create-task-wrap">
@@ -1937,31 +1952,40 @@
       <div class="sched-create-task-list hidden" id="sched-create-task-list"></div>
     </div>
   </div>
-  <!-- Description -->
+  <!-- Review toggle -->
   <div class="sched-create-row">
+    <div class="sched-create-row-icon-spacer"></div>
+    <label class="sched-review-toggle">
+      <input type="checkbox" id="sched-review-check">
+      <span class="sched-review-label">Review multiple times</span>
+      <span class="sched-review-count hidden" id="sched-review-count">
+        <input type="number" id="sched-create-iterations" min="2" max="100" value="3" class="sched-create-iter-input">
+        <span class="sched-create-iter-hint">x</span>
+      </span>
+    </label>
+  </div>
+  <!-- Description (shown only when editing a record that has one) -->
+  <div class="sched-create-row hidden" id="sched-create-desc-row">
     <i data-lucide="align-left" class="sched-create-row-icon"></i>
-    <textarea class="sched-create-row-textarea" id="sched-create-desc" rows="3" placeholder="Description"></textarea>
+    <textarea class="sched-create-row-textarea" id="sched-create-desc" rows="2" placeholder="Description"></textarea>
   </div>
-  <!-- Bottom bar -->
-  <div class="sched-create-bottom">
-    <div class="sched-create-bottom-left">
-      <div class="sched-create-run-mode">
-        <button type="button" class="sched-run-mode-btn active" data-mode="single" title="Run once without iteration"><i data-lucide="play"></i> Single run</button>
-        <button type="button" class="sched-run-mode-btn" data-mode="multi" title="Run multiple iterations with a judge reviewing each round"><i data-lucide="repeat"></i> Multi-round</button>
-        <label class="sched-create-iter-label hidden" id="sched-create-iter-group">
-          <input type="number" id="sched-create-iterations" min="2" max="100" value="3" class="sched-create-iter-input">
-          <span class="sched-create-iter-hint">rounds</span>
-        </label>
+  <!-- Repeat accordion -->
+  <div class="sched-accordion" id="sched-accordion-repeat">
+    <div class="sched-accordion-divider"></div>
+    <button class="sched-accordion-header" id="sched-accordion-repeat-header" type="button">
+      <div class="sched-accordion-header-left">
+        <i data-lucide="repeat" class="sched-accordion-icon"></i>
+        <div class="sched-accordion-text">
+          <span class="sched-accordion-title">Repeat</span>
+          <span class="sched-accordion-subtitle" id="sched-accordion-repeat-subtitle">Which days to run</span>
+        </div>
       </div>
-    </div>
-    <div class="sched-create-bottom-right">
-      <button class="sched-create-delete-btn hidden" id="sched-create-delete" title="Delete"><i data-lucide="trash-2"></i></button>
-      <button class="sched-create-save-btn" id="sched-create-submit">Save</button>
-    </div>
-  </div>
-  <!-- Recurrence dropdown -->
-  <div class="sched-create-recurrence-dropdown hidden" id="sched-create-recurrence-dropdown">
-    <div class="sched-custom-repeat-panel" id="sched-custom-repeat-panel">
+      <div class="sched-accordion-header-right">
+        <span class="sched-accordion-clear hidden" id="sched-accordion-repeat-clear" title="Clear"><i data-lucide="x"></i></span>
+        <i data-lucide="chevron-right" class="sched-accordion-chevron"></i>
+      </div>
+    </button>
+    <div class="sched-accordion-body hidden" id="sched-accordion-repeat-body">
       <div class="sched-custom-row">
         <span class="sched-custom-label">Every</span>
         <input type="number" class="sched-custom-interval" id="sched-custom-interval" value="1" min="1" max="99">
@@ -2006,7 +2030,6 @@
           <span class="sched-custom-end-after-suffix">times</span>
         </div>
       </div>
-      <!-- Inline calendar for "Until" date picking -->
       <div class="sched-custom-end-calendar hidden" id="sched-custom-end-calendar">
         <div class="sched-cal-header">
           <span class="sched-cal-title" id="sched-cal-title">April 2026</span>
@@ -2020,48 +2043,65 @@
         </div>
         <div class="sched-cal-grid" id="sched-cal-grid"></div>
       </div>
-      <div class="sched-custom-actions">
-        <button class="sched-btn sched-btn-cancel" id="sched-custom-cancel">Cancel</button>
-        <button class="sched-btn sched-btn-save" id="sched-custom-ok">OK</button>
-      </div>
     </div>
   </div>
-  <!-- Interval dropdown -->
-  <div class="sched-create-interval-dropdown hidden" id="sched-create-interval-dropdown">
-    <div class="sched-interval-custom-row">
-      <span class="sched-custom-label">Every</span>
-      <input type="number" class="sched-custom-interval" id="sched-interval-custom-value" value="10" min="1" max="999">
-      <div class="sched-interval-unit-toggle" id="sched-interval-custom-unit">
-        <button type="button" class="sched-interval-seg active" data-unit="minute">min</button><button type="button" class="sched-interval-seg" data-unit="hour">hrs</button>
+  <!-- Interval accordion -->
+  <div class="sched-accordion" id="sched-accordion-interval">
+    <div class="sched-accordion-divider"></div>
+    <button class="sched-accordion-header" id="sched-accordion-interval-header" type="button">
+      <div class="sched-accordion-header-left">
+        <i data-lucide="timer" class="sched-accordion-icon"></i>
+        <div class="sched-accordion-text">
+          <span class="sched-accordion-title">Interval</span>
+          <span class="sched-accordion-subtitle" id="sched-accordion-interval-subtitle">How often within each day</span>
+        </div>
       </div>
-    </div>
-    <div class="sched-interval-end-section hidden" id="sched-interval-end-section">
-      <div class="sched-interval-end-divider"></div>
-      <div class="sched-interval-end-options">
-        <button class="sched-interval-end-opt active" data-iend="allday">All day</button>
-        <button class="sched-interval-end-opt" data-iend="after">Stop after</button>
-        <button class="sched-interval-end-opt" data-iend="until">Stop at</button>
+      <div class="sched-accordion-header-right">
+        <span class="sched-accordion-clear hidden" id="sched-accordion-interval-clear" title="Clear"><i data-lucide="x"></i></span>
+        <i data-lucide="chevron-right" class="sched-accordion-chevron"></i>
       </div>
-      <div class="sched-interval-end-after hidden" id="sched-interval-end-after-row">
-        <input type="number" class="sched-interval-end-input" id="sched-interval-end-after" value="5" min="1" max="999">
-        <span class="sched-interval-end-label">runs</span>
+    </button>
+    <div class="sched-accordion-body hidden" id="sched-accordion-interval-body">
+      <div class="sched-interval-custom-row">
+        <span class="sched-custom-label">Every</span>
+        <input type="number" class="sched-custom-interval" id="sched-interval-custom-value" value="10" min="1" max="999">
+        <div class="sched-interval-unit-toggle" id="sched-interval-custom-unit">
+          <button type="button" class="sched-interval-seg active" data-unit="minute">min</button><button type="button" class="sched-interval-seg" data-unit="hour">hrs</button>
+        </div>
       </div>
-      <div class="sched-interval-end-until hidden" id="sched-interval-end-until-row">
-        <input type="time" class="sched-interval-end-time" id="sched-interval-end-time" value="18:00">
+      <div class="sched-interval-end-section hidden" id="sched-interval-end-section">
+        <div class="sched-interval-end-divider"></div>
+        <div class="sched-interval-end-options">
+          <button class="sched-interval-end-opt active" data-iend="allday">All day</button>
+          <button class="sched-interval-end-opt" data-iend="after">Stop after</button>
+          <button class="sched-interval-end-opt" data-iend="until">Stop at</button>
+        </div>
+        <div class="sched-interval-end-after hidden" id="sched-interval-end-after-row">
+          <input type="number" class="sched-interval-end-input" id="sched-interval-end-after" value="5" min="1" max="999">
+          <span class="sched-interval-end-label">runs</span>
+        </div>
+        <div class="sched-interval-end-until hidden" id="sched-interval-end-until-row">
+          <input type="time" class="sched-interval-end-time" id="sched-interval-end-time" value="18:00">
+        </div>
+      </div>
+      <div class="sched-skip-running-row" id="sched-skip-running-row">
+        <label class="sched-switch-label" for="sched-skip-running">
+          <div class="sched-switch">
+            <input type="checkbox" id="sched-skip-running" checked>
+            <span class="sched-switch-slider"></span>
+          </div>
+          <span class="sched-switch-text">Skip if previous run still active</span>
+        </label>
       </div>
     </div>
-    <div class="sched-skip-running-row" id="sched-skip-running-row">
-      <label class="sched-switch-label" for="sched-skip-running">
-        <div class="sched-switch">
-          <input type="checkbox" id="sched-skip-running" checked>
-          <span class="sched-switch-slider"></span>
-        </div>
-        <span class="sched-switch-text">Skip if previous run still active</span>
-      </label>
+  </div>
+  <!-- Bottom bar -->
+  <div class="sched-create-bottom">
+    <div class="sched-create-bottom-left">
+      <button class="sched-create-delete-btn hidden" id="sched-create-delete" title="Delete"><i data-lucide="trash-2"></i></button>
     </div>
-    <div class="sched-custom-actions">
-      <button class="sched-btn sched-btn-cancel" id="sched-interval-cancel">Cancel</button>
-      <button class="sched-btn sched-btn-save" id="sched-interval-ok">OK</button>
+    <div class="sched-create-bottom-right">
+      <button class="sched-create-save-btn" id="sched-create-submit">Save</button>
     </div>
   </div>
 </div>

package/lib/public/modules/app-loop-ui.js

@@ -8,6 +8,7 @@ import { getWs } from './ws-ref.js';
 import { showConfirm } from './app-misc.js';
 import { openRalphWizard } from './app-loop-wizard.js';
 import { openSchedulerToTab } from './scheduler.js';
+import { renderModelList, renderModeList, renderEffortBar, renderThinkingBar } from './settings-defaults.js';
 import { showDebateSticky } from './app-debate-ui.js';
 
 // Execution modal: module-internal UI var (not in store)
@@ -128,7 +129,11 @@ function startLoopFromUi() {
 function sendLoopStart() {
   var ws = getWs();
   if (ws && ws.readyState === 1) {
-    ws.send(JSON.stringify({ type: "loop_start", maxIterations: pendingIterations }));
+    var msg = { type: "loop_start", maxIterations: pendingIterations };
+    if (Object.keys(_previewLoopSettings).length > 0) {
+      msg.settings = _previewLoopSettings;
+    }
+    ws.send(JSON.stringify(msg));
   }
 }
 
@@ -526,10 +531,14 @@ export function updateExecModalStatus() {
 }
 
 export function openRalphPreviewModal() {
+  // Only show for loop (ralph) source, not scheduled tasks
+  var st = store.getState();
+  if (st.ralphCraftingSource !== "ralph") return;
+
   var modal = document.getElementById("ralph-preview-modal");
   if (!modal) return;
 
-  var wizData = store.getState().wizardData || {};
+  var wizData = st.wizardData || {};
   var isSimple = wizData.loopMode === "simple";
 
   // Set defaults if not yet set
@@ -557,6 +566,7 @@ export function openRalphPreviewModal() {
   var runBtn = document.getElementById("ralph-preview-run");
   if (runBtn) runBtn.disabled = !store.getState().ralphFilesReady.bothReady;
 
+  _previewLoopSettings = {};
   showRalphPreviewTab("prompt");
   modal.classList.remove("hidden");
   refreshIcons();
@@ -568,6 +578,11 @@ function closeRalphPreviewModal() {
   if (modal) modal.classList.add("hidden");
 }
 
+// Pending loop settings for the preview modal (saved to LOOP.json on launch)
+var _previewLoopSettings = {};
+
+function getPreviewLoopSettings() { return _previewLoopSettings; }
+
 function showRalphPreviewTab(tab) {
   var tabs = document.querySelectorAll("#ralph-preview-modal .ralph-tab");
   for (var i = 0; i < tabs.length; i++) {
@@ -579,6 +594,12 @@ function showRalphPreviewTab(tab) {
   }
   var body = document.getElementById("ralph-preview-body");
   if (!body) return;
+
+  if (tab === "model") {
+    renderPreviewModelTab(body);
+    return;
+  }
+
   var _rpc = store.getState().ralphPreviewContent;
   var content = tab === "prompt" ? _rpc.prompt : _rpc.judge;
   if (typeof marked !== "undefined" && marked.parse) {
@@ -587,3 +608,65 @@ function showRalphPreviewTab(tab) {
     body.textContent = content;
   }
 }
+
+function renderPreviewModelTab(bodyEl) {
+  var s = store.getState();
+
+  bodyEl.innerHTML =
+    '<div class="scheduler-model-settings">' +
+      '<div class="settings-card"><div class="settings-field">' +
+        '<label class="settings-label">Model</label>' +
+        '<div class="settings-hint">Choose the Claude model for this loop.</div>' +
+        '<div id="rp-model-list" class="settings-model-list"></div>' +
+      '</div></div>' +
+      '<div class="settings-card"><div class="settings-field">' +
+        '<label class="settings-label">Mode</label>' +
+        '<div class="settings-hint">Controls how Claude handles tool use and file edits.</div>' +
+        '<div id="rp-mode-list" class="settings-model-list"></div>' +
+      '</div></div>' +
+      '<div class="settings-card"><div class="settings-field">' +
+        '<label class="settings-label">Effort</label>' +
+        '<div class="settings-hint">Controls how much thinking effort Claude puts into responses.</div>' +
+        '<div class="settings-btn-group" id="rp-effort-bar"></div>' +
+      '</div></div>' +
+      '<div class="settings-card"><div class="settings-field">' +
+        '<label class="settings-label">Thinking</label>' +
+        '<div class="settings-hint">Controls whether Claude shows its reasoning process.</div>' +
+        '<div class="settings-btn-group" id="rp-thinking-bar"></div>' +
+        '<div id="rp-thinking-budget-row" class="settings-budget-row" style="display:none">' +
+          '<label class="settings-budget-label">Budget tokens</label>' +
+          '<input id="rp-thinking-budget" type="number" class="settings-budget-input" min="1024" max="128000" step="1024" value="10000">' +
+        '</div>' +
+      '</div></div>' +
+    '</div>';
+
+  function savePreviewSetting(key, value) {
+    _previewLoopSettings[key] = value;
+  }
+
+  var opts = {
+    models: s.currentModels || [],
+    currentModel: _previewLoopSettings.model || "",
+    currentMode: _previewLoopSettings.permissionMode || "default",
+    currentEffort: _previewLoopSettings.effort || "medium",
+    currentThinking: _previewLoopSettings.thinking || "adaptive",
+    currentThinkingBudget: _previewLoopSettings.thinkingBudget || 10000,
+    sendMsg: function (msgType, data) {
+      if (msgType === "rp_set_model") savePreviewSetting("model", data.model);
+      else if (msgType === "rp_set_mode") savePreviewSetting("permissionMode", data.mode);
+      else if (msgType === "rp_set_effort") savePreviewSetting("effort", data.effort);
+      else if (msgType === "set_thinking") {
+        savePreviewSetting("thinking", data.thinking);
+        if (data.budgetTokens) savePreviewSetting("thinkingBudget", data.budgetTokens);
+      }
+    },
+    modelMsgType: "rp_set_model",
+    modeMsgType: "rp_set_mode",
+    effortMsgType: "rp_set_effort",
+  };
+
+  renderModelList("rp", opts);
+  renderModeList("rp", opts);
+  renderEffortBar("rp", opts);
+  renderThinkingBar("rp", opts);
+}

package/lib/public/modules/app-messages.js

@@ -31,7 +31,8 @@ import { handleSkillInstalled, handleSkillUninstalled } from './skills.js';
 import { showRewindModal, onRewindComplete, setRewindMode, onRewindError, clearPendingRewindUuid, addRewindButton } from './rewind.js';
 import { checkAdminAccess } from './admin.js';
 import { mateAvatarUrl } from './avatar.js';
-import { showImageModal, sendExtensionCommand } from './app-misc.js';
+import { showImageModal, sendExtensionCommand, handleMcpToolCallMessage } from './app-misc.js';
+import { handleMcpServersState } from './mcp-ui.js';
 import { handleLoopRegistryUpdated, handleScheduleRunStarted, handleScheduleRunFinished, handleLoopScheduled, isSchedulerOpen, enterCraftingMode, exitCraftingMode, handleLoopRegistryFiles } from './scheduler.js';
 
 // --- App module imports ---
@@ -999,6 +1000,14 @@ export function processMessage(msg) {
         sendExtensionCommand(msg.command, msg.args, msg.requestId);
         break;
 
+      case "mcp_tool_call":
+        handleMcpToolCallMessage(msg);
+        break;
+
+      case "mcp_servers_state":
+        handleMcpServersState(msg);
+        break;
+
       case "term_created":
         handleTermCreated(msg);
         if (store.getState().pendingTermCommand) {
@@ -1467,6 +1476,7 @@ export function processMessage(msg) {
         showLoopBanner(false);
         updateLoopButton();
         enableMainInput();
+        updateLoopInputVisibility(null);
         var loopLabel = _lfbn || "Loop";
         var finishMsg = msg.reason === "pass"
           ? loopLabel + " completed successfully after " + msg.iterations + " iteration(s)."

package/lib/public/modules/app-misc.js

@@ -5,6 +5,7 @@ import { refreshIcons, iconHtml } from './icons.js';
 import { escapeHtml, copyToClipboard } from './utils.js';
 import { getWs } from './ws-ref.js';
 import { updateBrowserTabList } from './context-sources.js';
+import { setExtensionConnected } from './mcp-ui.js';
 
 // --- Module-owned state ---
 var confirmCallback = null;
@@ -95,6 +96,7 @@ export function initMisc() {
     var msg = event.data.payload;
 
     if (msg.type === "clay_ext_tab_list") {
+      setExtensionConnected(true);
       updateBrowserTabList(msg.tabs);
       // Also inform server about tab list
       var ws = getWs();
@@ -108,9 +110,111 @@ export function initMisc() {
     if (msg.type === "clay_ext_result") {
       handleExtensionResult(msg.requestId, msg.result);
     }
+    if (msg.type === "clay_ext_disconnected") {
+      setExtensionConnected(false);
+    }
+
+    // MCP bridge: extension reports available MCP servers
+    if (msg.type === "mcp_servers_available") {
+      var ws2 = getWs();
+      if (ws2 && ws2.readyState === 1) {
+        ws2.send(JSON.stringify({
+          type: "mcp_servers_available",
+          servers: msg.servers,
+          hostConnected: msg.hostConnected
+        }));
+      }
+    }
+
+    // MCP bridge: tool result from extension
+    if (msg.type === "mcp_tool_result") {
+      var ws3 = getWs();
+      if (ws3 && ws3.readyState === 1) {
+        ws3.send(JSON.stringify({
+          type: msg.error ? "mcp_tool_error" : "mcp_tool_result",
+          callId: msg.callId,
+          result: msg.result || null,
+          error: msg.error || null
+        }));
+      }
+    }
   });
 }
 
+// Forward an MCP tool call from the server to the Chrome extension
+export function forwardMcpToolCall(msg) {
+  window.postMessage({
+    source: "clay-page",
+    payload: {
+      type: "clay_mcp_tool_call",
+      callId: msg.callId,
+      server: msg.server,
+      method: msg.method,
+      params: msg.params,
+    }
+  }, "*");
+}
+
+// Forward an MCP tool call directly via HTTP for HTTP-transport servers
+var _httpMcpServers = {}; // name -> url
+export function setHttpMcpServers(servers) {
+  _httpMcpServers = {};
+  for (var i = 0; i < servers.length; i++) {
+    if (servers[i].transport === "http" && servers[i].url) {
+      _httpMcpServers[servers[i].name] = servers[i].url;
+    }
+  }
+}
+
+export function handleMcpToolCallMessage(msg) {
+  var httpUrl = _httpMcpServers[msg.server];
+  if (httpUrl) {
+    // HTTP transport: call directly via fetch
+    fetch(httpUrl, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        id: msg.callId,
+        method: msg.method,
+        params: msg.params,
+      }),
+    })
+    .then(function (resp) { return resp.json(); })
+    .then(function (data) {
+      var ws = getWs();
+      if (ws && ws.readyState === 1) {
+        if (data.error) {
+          ws.send(JSON.stringify({
+            type: "mcp_tool_error",
+            callId: msg.callId,
+            error: data.error.message || JSON.stringify(data.error),
+          }));
+        } else {
+          ws.send(JSON.stringify({
+            type: "mcp_tool_result",
+            callId: msg.callId,
+            result: data.result,
+          }));
+        }
+      }
+    })
+    .catch(function (err) {
+      var ws = getWs();
+      if (ws && ws.readyState === 1) {
+        ws.send(JSON.stringify({
+          type: "mcp_tool_error",
+          callId: msg.callId,
+          error: "HTTP MCP fetch failed: " + err.message,
+        }));
+      }
+    });
+  } else {
+    // stdio transport: forward to extension
+    forwardMcpToolCall(msg);
+  }
+}
+
 export function showImageModal(src) {
   var modal = document.getElementById("image-modal");
   var img = document.getElementById("image-modal-img");