fa-mcp-sdk 0.4.121 → 0.4.124

package/dist/core/web/static/agent-tester/script.js

@@ -393,13 +393,10 @@ class McpAgentTester {
   }
 
   initializeElements() {
-    this.sidebar = document.getElementById('sidebar');
-    this.sidebarToggle = document.getElementById('sidebarToggle');
-    this.sidebarToggleMobile = document.getElementById('sidebarToggleMobile');
-
     this.mcpConnectionForm = document.getElementById('mcpConnectionForm');
     this.serverUrlInput = document.getElementById('serverUrl');
     this.transportSelect = document.getElementById('transport');
+    this.connectionToggleBtn = document.getElementById('connectionToggleBtn');
 
     this.serverUrlDropdown = document.getElementById('serverUrlDropdown');
     this.serverUrlDropdownList = document.getElementById('serverUrlDropdownList');
@@ -410,6 +407,11 @@ class McpAgentTester {
     this.headersSection = document.getElementById('headersSection');
     this.dynamicHeaders = document.getElementById('dynamicHeaders');
 
+    // Settings modal (former sidebar)
+    this.settingsModal = document.getElementById('settingsModal');
+    this.settingsBtn = document.getElementById('settingsBtn');
+    this.settingsModalClose = document.getElementById('settingsModalClose');
+
     // LLM settings — collapsed view + modal
     this.modelDisplay = document.getElementById('modelDisplay');
     this.llmSettingsBtn = document.getElementById('llmSettingsBtn');
@@ -438,8 +440,6 @@ class McpAgentTester {
     this.promptModifiedBadge = document.getElementById('promptModifiedBadge');
     this.originalAgentPrompt = null;
 
-    this.connectedServersContainer = document.getElementById('connectedServers');
-
     this.chatMessages = document.getElementById('chatMessages');
     this.messageInput = document.getElementById('messageInput');
     this.sendButton = document.getElementById('sendButton');
@@ -479,13 +479,6 @@ class McpAgentTester {
   }
 
   bindEvents() {
-    if (this.sidebarToggle) {
-      this.sidebarToggle.addEventListener('click', () => this.toggleSidebar());
-    }
-    if (this.sidebarToggleMobile) {
-      this.sidebarToggleMobile.addEventListener('click', () => this.toggleSidebar());
-    }
-
     if (this.themeToggle) {
       this.themeToggle.addEventListener('click', () => this.toggleTheme());
     }
@@ -551,20 +544,23 @@ class McpAgentTester {
       sdkVersionBtn.addEventListener('click', (e) => this.toggleSdkVersionTooltip(e));
     }
 
-    document.addEventListener('click', (e) => {
-      if (
-        window.innerWidth <= 768 &&
-        !this.sidebar.contains(e.target) &&
-        !this.sidebarToggleMobile.contains(e.target) &&
-        this.sidebar.classList.contains('open')
-      ) {
-        this.toggleSidebar();
-      }
-    });
-
-    window.addEventListener('resize', () => {
-      if (window.innerWidth > 768) {
-        this.sidebar.classList.remove('open');
+    // --- Settings modal (former sidebar) ---
+    if (this.settingsBtn) {
+      this.settingsBtn.addEventListener('click', () => this.openSettingsModal());
+    }
+    if (this.settingsModalClose) {
+      this.settingsModalClose.addEventListener('click', () => this.closeSettingsModal());
+    }
+    if (this.settingsModal) {
+      this.settingsModal.addEventListener('click', (e) => {
+        if (e.target === this.settingsModal) {
+          this.closeSettingsModal();
+        }
+      });
+    }
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && this.settingsModal && this.settingsModal.style.display === 'flex') {
+        this.closeSettingsModal();
       }
     });
 
@@ -668,8 +664,18 @@ class McpAgentTester {
     });
   }
 
-  toggleSidebar() {
-    this.sidebar.classList.toggle('open');
+  openSettingsModal() {
+    if (!this.settingsModal) {
+      return;
+    }
+    this.settingsModal.style.display = 'flex';
+  }
+
+  closeSettingsModal() {
+    if (!this.settingsModal) {
+      return;
+    }
+    this.settingsModal.style.display = 'none';
   }
 
   async loadInitialData() {
@@ -788,6 +794,12 @@ class McpAgentTester {
   async handleMcpConnection(event) {
     event.preventDefault();
 
+    // Combined Connect/Disconnect button: disconnect when already connected
+    if (this.currentServer && this.currentServer.isConnected) {
+      await this.disconnectServer();
+      return;
+    }
+
     const serverUrl = this.serverUrlInput.value.trim();
     const transport = this.transportSelect.value;
 
@@ -1348,35 +1360,42 @@ class McpAgentTester {
 
   renderServerInfo() {
     this.refreshToolList();
-    if (!this.currentServer) {
-      this.connectedServersContainer.innerHTML = '';
+    this.updateConnectionToggleBtn();
+  }
+
+  updateConnectionToggleBtn() {
+    const btn = this.connectionToggleBtn;
+    if (!btn) {
       return;
     }
+    const iconEl = btn.querySelector('.connect-icon');
+    const countEl = btn.querySelector('.tools-count');
+    const connected = !!(this.currentServer && this.currentServer.isConnected);
 
-    const server = this.currentServer;
-    const toolCount = server.tools ? server.tools.length : 0;
-
-    if (server.isConnected) {
-      this.connectedServersContainer.innerHTML = `
-        <div class="server-status-row" data-testid="at-server-status-row">
-          <span class="server-status connected" data-testid="at-server-status-connected">${toolCount} tools <span class="material-icons-round">check_circle</span> connected</span>
-          <button type="button" class="btn btn-danger disconnect-btn" data-testid="at-disconnect-btn"><span class="material-icons-round">link_off</span>Disconnect</button>
-        </div>`;
+    if (connected) {
+      const toolCount = Array.isArray(this.currentServer.tools) ? this.currentServer.tools.length : 0;
+      btn.classList.add('connected');
+      btn.classList.remove('disconnected');
+      btn.title = `Disconnect (${toolCount} tools)`;
+      btn.setAttribute('aria-label', 'Disconnect');
+      if (iconEl) {
+        iconEl.textContent = 'stop';
+      }
+      if (countEl) {
+        countEl.textContent = `${toolCount} tools`;
+      }
     } else {
-      this.connectedServersContainer.innerHTML = `
-        <div class="server-status-row" data-testid="at-server-status-row">
-          <span class="server-status disconnected" data-testid="at-server-status-disconnected"><span class="material-icons-round">cancel</span>Disconnected</span>
-          <button type="button" class="btn btn-secondary reconnect-btn" data-testid="at-reconnect-btn"><span class="material-icons-round">refresh</span>Reconnect</button>
-        </div>`;
+      btn.classList.add('disconnected');
+      btn.classList.remove('connected');
+      btn.title = 'Connect';
+      btn.setAttribute('aria-label', 'Connect');
+      if (iconEl) {
+        iconEl.textContent = 'play_arrow';
+      }
+      if (countEl) {
+        countEl.textContent = '';
+      }
     }
-
-    this.connectedServersContainer.querySelector('.disconnect-btn')?.addEventListener('click', () => {
-      this.disconnectServer();
-    });
-
-    this.connectedServersContainer.querySelector('.reconnect-btn')?.addEventListener('click', () => {
-      this.handleReconnect();
-    });
   }
 
   async disconnectServer() {
@@ -2226,6 +2245,11 @@ class McpAgentTester {
       btn.classList.toggle('active', btn.dataset.tab === tabName);
     });
 
+    const appEl = document.querySelector('.app');
+    if (appEl) {
+      appEl.setAttribute('data-active-tab', tabName);
+    }
+
     if (tabName === 'chat') {
       this.tabPaneChat.style.display = '';
       this.tabPaneChat.classList.add('active');

package/dist/core/web/static/agent-tester/styles.css

@@ -138,41 +138,6 @@ body {
   height: 100vh;
 }
 
-/* --- Sidebar --- */
-.sidebar {
-  width: 384px;
-  flex-shrink: 0;
-  background: var(--bg-sidebar);
-  border-right: 1px solid var(--border);
-  display: flex;
-  flex-direction: column;
-  transition: transform 0.3s ease;
-  z-index: 1000;
-  overflow: hidden;
-}
-
-.sidebar-content {
-  flex: 1;
-  padding: 16px;
-  overflow-y: auto;
-}
-
-.sidebar-toggle {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  cursor: pointer;
-  padding: 8px;
-  border-radius: 50%;
-  transition: background-color 0.2s;
-  display: none;
-  line-height: 1;
-}
-
-.sidebar-toggle:hover {
-  background-color: var(--bg-input);
-}
-
 /* --- Section Labels --- */
 .section-label {
   font-size: 0.68rem;
@@ -204,6 +169,116 @@ body {
   gap: 12px;
 }
 
+/* --- Header connection bar (compact, inline) --- */
+.connection-form.header-connection {
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  flex: 1 1 320px;
+  min-width: 0;
+  margin: 0;
+}
+
+.connection-form.header-connection .form-group {
+  flex: 1 1 auto;
+  min-width: 0;
+  gap: 0;
+}
+
+.connection-form.header-connection input[type="url"] {
+  padding: 6px 32px 6px 10px;
+  font-size: 0.8rem;
+  width: 100%;
+  height: 32px;
+}
+
+.connection-form.header-connection .dropdown-toggle .material-icons-round {
+  font-size: 18px;
+}
+
+.header-transport {
+  height: 32px;
+  padding: 4px 6px;
+  border: 1px solid var(--border-input);
+  border-radius: var(--radius);
+  background: var(--bg-input);
+  color: var(--text);
+  font-size: 0.78rem;
+  font-family: inherit;
+  outline: none;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+
+.header-transport:focus {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px var(--primary-glow);
+}
+
+/* --- Combined Connect / Disconnect toggle button --- */
+.btn-connect-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 10px;
+  min-width: 36px;
+  border: none;
+  border-radius: var(--radius);
+  cursor: pointer;
+  font-weight: 600;
+  font-size: 0.8rem;
+  font-family: inherit;
+  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
+  flex-shrink: 0;
+  line-height: 1;
+}
+
+.btn-connect-toggle:active {
+  transform: scale(0.97);
+}
+
+.btn-connect-toggle.disconnected {
+  background: var(--success);
+  color: #fff;
+  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.35);
+}
+
+.btn-connect-toggle.disconnected:hover {
+  background: #16a34a;
+}
+
+.btn-connect-toggle.connected {
+  background: var(--success-bg);
+  color: var(--success);
+  border: 1px solid var(--success-border);
+  box-shadow: 0 1px 3px rgba(34, 197, 94, 0.15);
+}
+
+.btn-connect-toggle.connected:hover {
+  background: rgba(34, 197, 94, 0.16);
+}
+
+.btn-connect-toggle .material-icons-round {
+  font-size: 18px;
+}
+
+.btn-connect-toggle.connected .material-icons-round {
+  color: var(--error);
+}
+
+.btn-connect-toggle .tools-count {
+  display: none;
+  font-size: 0.75rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.btn-connect-toggle.connected .tools-count {
+  display: inline;
+}
+
 .form-group {
   display: flex;
   flex-direction: column;
@@ -687,29 +762,24 @@ body {
 
 /* --- Chat Header --- */
 .chat-header {
-  height: 56px;
+  min-height: 56px;
   flex-shrink: 0;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0 20px;
+  flex-wrap: wrap;
+  gap: 12px;
+  padding: 8px 16px;
   background: var(--bg-header);
   border-bottom: 1px solid var(--border);
   backdrop-filter: blur(8px);
   z-index: 10;
 }
 
-.chat-info {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 16px;
-}
-
 .chat-title {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-shrink: 0;
 }
 
 .chat-title .header-icon {
@@ -778,6 +848,13 @@ body {
   display: flex;
   align-items: center;
   gap: 4px;
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+/* Hide chat-only controls when not on the Chat tab */
+.app[data-active-tab="tool-tester"] .chat-only {
+  display: none !important;
 }
 
 .header-format-select {
@@ -1264,26 +1341,26 @@ body {
 
 /* --- Scrollbar --- */
 .chat-messages::-webkit-scrollbar,
-.sidebar-content::-webkit-scrollbar,
+.settings-modal-body::-webkit-scrollbar,
 .dropdown-list::-webkit-scrollbar {
   width: 6px;
 }
 
 .chat-messages::-webkit-scrollbar-track,
-.sidebar-content::-webkit-scrollbar-track,
+.settings-modal-body::-webkit-scrollbar-track,
 .dropdown-list::-webkit-scrollbar-track {
   background: transparent;
 }
 
 .chat-messages::-webkit-scrollbar-thumb,
-.sidebar-content::-webkit-scrollbar-thumb,
+.settings-modal-body::-webkit-scrollbar-thumb,
 .dropdown-list::-webkit-scrollbar-thumb {
   background: var(--scrollbar-thumb);
   border-radius: 3px;
 }
 
 .chat-messages::-webkit-scrollbar-thumb:hover,
-.sidebar-content::-webkit-scrollbar-thumb:hover,
+.settings-modal-body::-webkit-scrollbar-thumb:hover,
 .dropdown-list::-webkit-scrollbar-thumb:hover {
   background: var(--scrollbar-hover);
 }
@@ -1330,24 +1407,6 @@ body {
 
 /* --- Responsive --- */
 @media (max-width: 768px) {
-  .sidebar {
-    position: fixed;
-    height: 100vh;
-    left: 0;
-    top: 0;
-    transform: translateX(-100%);
-    z-index: 1000;
-    box-shadow: var(--shadow-lg);
-  }
-
-  .sidebar.open {
-    transform: translateX(0);
-  }
-
-  .sidebar-toggle {
-    display: flex;
-  }
-
   .mobile-only {
     display: flex !important;
   }
@@ -1356,6 +1415,15 @@ body {
     font-size: 1rem;
   }
 
+  .connection-form.header-connection {
+    flex: 1 1 100%;
+    order: 10;
+  }
+
+  .tabs-bar.header-tabs {
+    order: 5;
+  }
+
   .message {
     max-width: 90%;
   }
@@ -1608,6 +1676,59 @@ textarea.prompt-modified {
   color: #f28b82;
 }
 
+/* ============================================
+   Settings Modal (former sidebar)
+   ============================================ */
+
+.settings-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 900;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+}
+
+.settings-modal {
+  background: var(--bg-sidebar);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  width: 100%;
+  max-width: 560px;
+  max-height: 90vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+}
+
+.settings-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 20px;
+  border-bottom: 1px solid var(--border);
+}
+
+.settings-modal-header h3 {
+  font-size: 0.95rem;
+  font-weight: 600;
+  color: var(--text);
+  margin: 0;
+}
+
+.settings-modal-body {
+  padding: 16px 20px;
+  overflow-y: auto;
+  flex: 1;
+}
+
+.settings-modal-body .config-section:last-child {
+  margin-bottom: 0;
+}
+
 /* ============================================
    LLM Settings Modal
    ============================================ */
@@ -1867,41 +1988,45 @@ textarea.prompt-modified {
    ============================================ */
 .tabs-bar {
   display: flex;
-  gap: 4px;
-  padding: 0 16px;
-  border-bottom: 1px solid var(--border);
-  background: var(--bg-header);
+  gap: 2px;
   flex-shrink: 0;
 }
 
+.tabs-bar.header-tabs {
+  background: var(--bg-input);
+  border-radius: var(--radius);
+  padding: 2px;
+}
+
 .tab-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  padding: 10px 16px;
+  padding: 6px 12px;
   background: transparent;
   border: none;
-  border-bottom: 2px solid transparent;
+  border-radius: calc(var(--radius) - 2px);
   color: var(--text-secondary);
   cursor: pointer;
-  font-size: 0.85rem;
+  font-size: 0.8rem;
   font-weight: 500;
   font-family: inherit;
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
+  transition: color 0.15s, background 0.15s;
+  line-height: 1;
 }
 
 .tab-btn:hover {
   color: var(--text);
-  background: var(--bg-input);
 }
 
 .tab-btn.active {
   color: var(--primary);
-  border-bottom-color: var(--primary);
+  background: var(--bg-surface);
+  box-shadow: var(--shadow-sm);
 }
 
 .tab-btn .material-icons-round {
-  font-size: 18px;
+  font-size: 16px;
 }
 
 .tab-pane {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "fa-mcp-sdk",
   "productName": "FA MCP SDK",
-  "version": "0.4.121",
+  "version": "0.4.124",
   "description": "Core infrastructure and templates for building Model Context Protocol (MCP) servers with TypeScript",
   "type": "module",
   "main": "dist/core/index.js",

package/src/template/tools/handle-tool-call.ts

@@ -1,12 +1,23 @@
 import chalk from 'chalk';
 
-import { logger as lgr, formatToolResult, ToolExecutionError, TToolHandlerResponse } from '../../core/index.js';
+import {
+  debugMcpTool,
+  formatToolResult,
+  logger as lgr,
+  ToolExecutionError,
+  TToolHandlerResponse,
+} from '../../core/index.js';
 
 const logger = lgr.getSubLogger({ name: chalk.bgGrey('tools') });
 
 /**
  * Template tool handler - customize this for your specific tools
  * This handles MCP tool execution requests
+ *
+ * Debug output for tool requests/responses is wired up centrally by the SDK
+ * (see `init-mcp-server.ts`) and activated with `DEBUG=mcp:tool`. Other MCP
+ * channels have their own switches: `DEBUG=mcp:resource`, `DEBUG=mcp:prompt`,
+ * `DEBUG=mcp:notification`. Use `DEBUG=mcp:*` to enable them all at once.
  */
 export const handleToolCall = async (params: { name: string; arguments?: any }): Promise<any> => {
   const { name, arguments: args } = params;
@@ -14,14 +25,26 @@ export const handleToolCall = async (params: { name: string; arguments?: any }):
   logger.info(`Tool called: ${name}`);
 
   try {
+    let result: TToolHandlerResponse;
     // TODO: Implement your tool routing logic here
     switch (name) {
       case 'example_tool':
-        return await handleExampleTool(args);
+        result = await handleExampleTool(args);
+        break;
 
       default:
         throw new ToolExecutionError(name, `Unknown tool: ${name}`);
     }
+
+    // Optional: per-handler debug hook, in addition to the SDK-level wrapper.
+    // Useful if you want to inspect intermediate (pre-format) values inside a
+    // specific tool — define a new Debug category in `src/lib/debug.ts` and
+    // call it here. The example below piggybacks on the built-in switch.
+    if (debugMcpTool.enabled) {
+      debugMcpTool(`handler[${name}] returned\n${JSON.stringify(result, null, 2)}`);
+    }
+
+    return result;
   } catch (error: Error | any) {
     logger.error(`Tool execution failed for ${name}:`, error);
     error.printed = true;