From 0726f2692727e970dcc30c6356cfe55f61d03dcb Mon Sep 17 00:00:00 2001
From: Glen Maddern <glen@cloudflare.com>
Date: Tue, 10 Jun 2025 19:11:38 +1000
Subject: [PATCH] wip

---
 .../inspector/src/components/McpServers.tsx   | 44 ++++++++++---------
 1 file changed, 23 insertions(+), 21 deletions(-)

diff --git a/examples/inspector/src/components/McpServers.tsx b/examples/inspector/src/components/McpServers.tsx
index 7f0d28e..14ae0d5 100644
--- a/examples/inspector/src/components/McpServers.tsx
+++ b/examples/inspector/src/components/McpServers.tsx
@@ -254,7 +254,7 @@ export function McpServers({
       return (
         <input
           type="number"
-          className="w-1/4 p-2 pr-6 mr-3 border border-gray-200 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-300 placeholder-gray-300"
+          className="w-32 p-2 pr-6 mr-3 border border-gray-200 rounded text-sm focus:outline-none focus:ring-1 focus:ring-blue-300 placeholder-gray-300"
           value={value}
           step={schema.type === 'integer' ? 1 : 'any'}
           required={isRequired}
@@ -364,7 +364,7 @@ export function McpServers({
               No tools available. Connect to an MCP server to see available tools.
             </div>
           ) : (
-            <div className="space-y-6">
+            <div className="border border-gray-200 rounded p-4 bg-gray-50 space-y-6">
               {tools.map((tool: Tool, index: number) => (
                 <div key={index}>
                   {/* Tool title outside the card */}
@@ -399,7 +399,7 @@ export function McpServers({
                                   </div>
                                 )}
                               </div>
-                              <div className={schema.type === 'number' || schema.type === 'integer' ? 'flex flex-wrap items-center' : ''}>
+                              <div className={schema.type === 'number' || schema.type === 'integer' ? 'inline-block' : ''}>
                                 {renderFormField(tool.name, fieldName, schema, isRequired)}
                               </div>
                             </div>
@@ -417,25 +417,27 @@ export function McpServers({
                       Run
                     </button>
                     
-                    {/* Per-tool execution log */}
-                    <div className="border-t border-gray-100 pt-4">
-                      <div className="flex items-center justify-between mb-2">
-                        <h5 className="font-medium text-sm text-gray-700">Execution Log</h5>
-                        <button
-                          onClick={() => clearExecutionLog(tool.name)}
-                          className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700"
-                        >
-                          <X size={12} />
-                          Clear
-                        </button>
+                    {/* Per-tool execution log - only show if there's content */}
+                    {toolExecutionLogs[tool.name] && (
+                      <div className="border-t border-gray-100 pt-4">
+                        <div className="flex items-center justify-between mb-2">
+                          <h5 className="font-medium text-sm text-gray-700">Execution Log</h5>
+                          <button
+                            onClick={() => clearExecutionLog(tool.name)}
+                            className="flex items-center gap-1 text-xs text-gray-500 hover:text-gray-700"
+                          >
+                            <X size={12} />
+                            Clear
+                          </button>
+                        </div>
+                        <textarea
+                          value={toolExecutionLogs[tool.name]}
+                          readOnly
+                          className="w-full h-32 p-2 border border-gray-200 rounded text-xs font-mono bg-gray-50 resize-none placeholder-gray-300"
+                          placeholder="Tool execution results will appear here..."
+                        />
                       </div>
-                      <textarea
-                        value={toolExecutionLogs[tool.name] || ''}
-                        readOnly
-                        className="w-full h-32 p-2 border border-gray-200 rounded text-xs font-mono bg-gray-50 resize-none placeholder-gray-300"
-                        placeholder="Tool execution results will appear here..."
-                      />
-                    </div>
+                    )}
                   </div>
                 </div>
               ))}