fa-mcp-sdk 0.4.121 → 0.4.122

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.122",
   "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;