Merge branch 'main' into ksinder/main

Resolved conflicts in ToolsTab.tsx by combining:
- Error alert display from main
- Description styling improvements from PR #823 (whitespace-pre-wrap, max-h-48, overflow-y-auto)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

client/src/components/ListPane.tsx

@@ -1,4 +1,7 @@
+import { Search } from "lucide-react";
 import { Button } from "./ui/button";
+import { Input } from "./ui/input";
+import { useState, useMemo, useRef } from "react";
 
 type ListPaneProps<T> = {
   items: T[];
@@ -20,41 +23,111 @@ const ListPane = <T extends object>({
   title,
   buttonText,
   isButtonDisabled,
-}: ListPaneProps<T>) => (
-  <div className="bg-card border border-border rounded-lg shadow">
-    <div className="p-4 border-b border-gray-200 dark:border-border">
-      <h3 className="font-semibold dark:text-white">{title}</h3>
-    </div>
-    <div className="p-4">
-      <Button
-        variant="outline"
-        className="w-full mb-4"
-        onClick={listItems}
-        disabled={isButtonDisabled}
-      >
-        {buttonText}
-      </Button>
-      <Button
-        variant="outline"
-        className="w-full mb-4"
-        onClick={clearItems}
-        disabled={items.length === 0}
-      >
-        Clear
-      </Button>
-      <div className="space-y-2 overflow-y-auto max-h-96">
-        {items.map((item, index) => (
-          <div
-            key={index}
-            className="flex items-center py-2 px-4 rounded hover:bg-gray-50 dark:hover:bg-secondary cursor-pointer"
-            onClick={() => setSelectedItem(item)}
-          >
-            {renderItem(item)}
+}: ListPaneProps<T>) => {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isSearchExpanded, setIsSearchExpanded] = useState(false);
+  const searchInputRef = useRef<HTMLInputElement>(null);
+
+  const filteredItems = useMemo(() => {
+    if (!searchQuery.trim()) return items;
+
+    return items.filter((item) => {
+      const searchableText = [
+        (item as { name?: string }).name || "",
+        (item as { description?: string }).description || "",
+      ]
+        .join(" ")
+        .toLowerCase();
+      return searchableText.includes(searchQuery.toLowerCase());
+    });
+  }, [items, searchQuery]);
+
+  const handleSearchClick = () => {
+    setIsSearchExpanded(true);
+    setTimeout(() => {
+      searchInputRef.current?.focus();
+    }, 100);
+  };
+
+  const handleSearchBlur = () => {
+    if (!searchQuery.trim()) {
+      setIsSearchExpanded(false);
+    }
+  };
+
+  return (
+    <div className="bg-card border border-border rounded-lg shadow">
+      <div className="p-4 border-b border-gray-200 dark:border-border">
+        <div className="flex items-center justify-between gap-4">
+          <h3 className="font-semibold dark:text-white flex-shrink-0">
+            {title}
+          </h3>
+          <div className="flex items-center justify-end min-w-0 flex-1">
+            {!isSearchExpanded ? (
+              <button
+                name="search"
+                aria-label="Search"
+                onClick={handleSearchClick}
+                className="p-2 hover:bg-gray-100 dark:hover:bg-secondary rounded-md transition-all duration-300 ease-in-out"
+              >
+                <Search className="w-4 h-4 text-muted-foreground" />
+              </button>
+            ) : (
+              <div className="flex items-center w-full max-w-xs">
+                <div className="relative w-full">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground pointer-events-none z-10" />
+                  <Input
+                    ref={searchInputRef}
+                    name="search"
+                    type="text"
+                    placeholder="Search..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    onBlur={handleSearchBlur}
+                    className="pl-10 w-full transition-all duration-300 ease-in-out"
+                  />
+                </div>
+              </div>
+            )}
           </div>
-        ))}
+        </div>
+      </div>
+      <div className="p-4">
+        <Button
+          variant="outline"
+          className="w-full mb-4"
+          onClick={listItems}
+          disabled={isButtonDisabled}
+        >
+          {buttonText}
+        </Button>
+        <Button
+          variant="outline"
+          className="w-full mb-4"
+          onClick={clearItems}
+          disabled={items.length === 0}
+        >
+          Clear
+        </Button>
+        <div className="space-y-2 overflow-y-auto max-h-96">
+          {filteredItems.map((item, index) => (
+            <div
+              key={index}
+              className="flex items-center py-2 px-4 rounded hover:bg-gray-50 dark:hover:bg-secondary cursor-pointer"
+              onClick={() => setSelectedItem(item)}
+            >
+              {renderItem(item)}
+            </div>
+          ))}
+          {filteredItems.length === 0 && searchQuery && items.length > 0 && (
+            <div className="text-center py-4 text-muted-foreground">
+              No items found matching &quot;{searchQuery}&quot;
+            </div>
+          )}
+        </div>
       </div>
     </div>
-  </div>
-);
+  );
+};
 
 export default ListPane;

client/src/components/OAuthFlowProgress.tsx

@@ -181,8 +181,8 @@ export const OAuthFlowProgress = ({
                   </p>
                   <p className="text-xs text-blue-600 mt-1">
                     Resource metadata was added in the{" "}
-                    <a href="https://modelcontextprotocol.io/specification/draft/basic/authorization#2-3-1-authorization-server-location">
-                      2025-DRAFT-v2 specification update
+                    <a href="https://modelcontextprotocol.io/specification/2025-06-18/basic/authorization#authorization-server-location">
+                      2025-06-18 specification update
                     </a>
                     <br />
                     {authState.resourceMetadataError.message}

client/src/components/PromptsTab.tsx

@@ -63,9 +63,7 @@ const PromptsTab = ({
     clearCompletions();
   }, [clearCompletions, selectedPrompt]);
 
-  const handleInputChange = async (argName: string, value: string) => {
-    setPromptArgs((prev) => ({ ...prev, [argName]: value }));
-
+  const triggerCompletions = (argName: string, value: string) => {
     if (selectedPrompt) {
       requestCompletions(
         {
@@ -79,6 +77,16 @@ const PromptsTab = ({
     }
   };
 
+  const handleInputChange = async (argName: string, value: string) => {
+    setPromptArgs((prev) => ({ ...prev, [argName]: value }));
+    triggerCompletions(argName, value);
+  };
+
+  const handleFocus = async (argName: string) => {
+    const currentValue = promptArgs[argName] || "";
+    triggerCompletions(argName, currentValue);
+  };
+
   const handleGetPrompt = () => {
     if (selectedPrompt) {
       getPrompt(selectedPrompt.name, promptArgs);
@@ -143,6 +151,7 @@ const PromptsTab = ({
                       onInputChange={(value) =>
                         handleInputChange(arg.name, value)
                       }
+                      onFocus={() => handleFocus(arg.name)}
                       options={completions[arg.name] || []}
                     />
 

client/src/components/ToolsTab.tsx

@@ -1,11 +1,11 @@
-import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { TabsContent } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
-import DynamicJsonForm from "./DynamicJsonForm";
+import DynamicJsonForm, { DynamicJsonFormRef } from "./DynamicJsonForm";
 import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
 import {
   generateDefaultValue,
@@ -22,10 +22,11 @@ import {
   Send,
   ChevronDown,
   ChevronUp,
+  AlertCircle,
   Copy,
   CheckCheck,
 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useEffect, useState, useRef } from "react";
 import ListPane from "./ListPane";
 import JsonView from "./JsonView";
 import ToolResults from "./ToolResults";
@@ -45,6 +46,7 @@ const ToolsTab = ({
   setSelectedTool,
   toolResult,
   nextCursor,
+  error,
   resourceContent,
   onReadResource,
 }: {
@@ -64,9 +66,20 @@ const ToolsTab = ({
   const [isToolRunning, setIsToolRunning] = useState(false);
   const [isOutputSchemaExpanded, setIsOutputSchemaExpanded] = useState(false);
   const [isMetaExpanded, setIsMetaExpanded] = useState(false);
+  const [hasValidationErrors, setHasValidationErrors] = useState(false);
+  const formRefs = useRef<Record<string, DynamicJsonFormRef | null>>({});
   const { toast } = useToast();
   const { copied, setCopied } = useCopy();
 
+  // Function to check if any form has validation errors
+  const checkValidationErrors = () => {
+    const errors = Object.values(formRefs.current).some(
+      (ref) => ref && !ref.validateJson().isValid,
+    );
+    setHasValidationErrors(errors);
+    return errors;
+  };
+
   useEffect(() => {
     const params = Object.entries(
       selectedTool?.inputSchema.properties ?? [],
@@ -79,6 +92,12 @@ const ToolsTab = ({
       ),
     ]);
     setParams(Object.fromEntries(params));
+
+    // Reset validation errors when switching tools
+    setHasValidationErrors(false);
+
+    // Clear form refs for the previous tool
+    formRefs.current = {};
   }, [selectedTool]);
 
   return (
@@ -114,12 +133,16 @@ const ToolsTab = ({
           <div className="p-4">
             {selectedTool ? (
               <div className="space-y-4">
-                <div className="text-sm font-medium">Description</div>
-                <div className="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap max-h-48 overflow-y-auto">
+                {error && (
+                  <Alert variant="destructive">
+                    <AlertCircle className="h-4 w-4" />
+                    <AlertTitle>Error</AlertTitle>
+                    <AlertDescription>{error}</AlertDescription>
+                  </Alert>
+                )}
+                <p className="text-sm text-gray-600 dark:text-gray-400 whitespace-pre-wrap max-h-48 overflow-y-auto">
                   {selectedTool.description}
-                </div>
-                <hr className="border-t border-gray-300 my-4" />
-                <div className="text-sm font-medium">Inputs & Outputs</div>
+                </p>
                 {Object.entries(selectedTool.inputSchema.properties ?? []).map(
                   ([key, value]) => {
                     const prop = normalizeUnionType(value as JsonSchemaType);
@@ -162,21 +185,33 @@ const ToolsTab = ({
                             id={key}
                             name={key}
                             placeholder={prop.description}
-                            value={(params[key] as string) ?? ""}
-                            onChange={(e) =>
-                              setParams({
-                                ...params,
-                                [key]:
-                                  e.target.value === ""
-                                    ? undefined
-                                    : e.target.value,
-                              })
+                            value={
+                              params[key] === undefined
+                                ? ""
+                                : String(params[key])
                             }
+                            onChange={(e) => {
+                              const value = e.target.value;
+                              if (value === "") {
+                                // Field cleared - set to undefined
+                                setParams({
+                                  ...params,
+                                  [key]: undefined,
+                                });
+                              } else {
+                                // Field has value - keep as string
+                                setParams({
+                                  ...params,
+                                  [key]: value,
+                                });
+                              }
+                            }}
                             className="mt-1"
                           />
                         ) : prop.type === "object" || prop.type === "array" ? (
                           <div className="mt-1">
                             <DynamicJsonForm
+                              ref={(ref) => (formRefs.current[key] = ref)}
                               schema={{
                                 type: prop.type,
                                 properties: prop.properties,
@@ -192,6 +227,8 @@ const ToolsTab = ({
                                   ...params,
                                   [key]: newValue,
                                 });
+                                // Check validation after a short delay to allow form to update
+                                setTimeout(checkValidationErrors, 100);
                               }}
                             />
                           </div>
@@ -202,19 +239,42 @@ const ToolsTab = ({
                             id={key}
                             name={key}
                             placeholder={prop.description}
-                            value={(params[key] as string) ?? ""}
+                            value={
+                              params[key] === undefined
+                                ? ""
+                                : String(params[key])
+                            }
                             onChange={(e) => {
                               const value = e.target.value;
-                              setParams({
-                                ...params,
-                                [key]: value === "" ? "" : Number(value),
-                              });
+                              if (value === "") {
+                                // Field cleared - set to undefined
+                                setParams({
+                                  ...params,
+                                  [key]: undefined,
+                                });
+                              } else {
+                                // Field has value - try to convert to number, but store input either way
+                                const num = Number(value);
+                                if (!isNaN(num)) {
+                                  setParams({
+                                    ...params,
+                                    [key]: num,
+                                  });
+                                } else {
+                                  // Store invalid input as string - let server validate
+                                  setParams({
+                                    ...params,
+                                    [key]: value,
+                                  });
+                                }
+                              }
                             }}
                             className="mt-1"
                           />
                         ) : (
                           <div className="mt-1">
                             <DynamicJsonForm
+                              ref={(ref) => (formRefs.current[key] = ref)}
                               schema={{
                                 type: prop.type,
                                 properties: prop.properties,
@@ -227,6 +287,8 @@ const ToolsTab = ({
                                   ...params,
                                   [key]: newValue,
                                 });
+                                // Check validation after a short delay to allow form to update
+                                setTimeout(checkValidationErrors, 100);
                               }}
                             />
                           </div>
@@ -308,6 +370,9 @@ const ToolsTab = ({
                 <div className="flex gap-2">
                   <Button
                     onClick={async () => {
+                      // Validate JSON inputs before calling tool
+                      if (checkValidationErrors()) return;
+
                       try {
                         setIsToolRunning(true);
                         await callTool(selectedTool.name, params);
@@ -315,7 +380,7 @@ const ToolsTab = ({
                         setIsToolRunning(false);
                       }
                     }}
-                    disabled={isToolRunning}
+                    disabled={isToolRunning || hasValidationErrors}
                   >
                     {isToolRunning ? (
                       <>

client/src/components/__tests__/DynamicJsonForm.test.tsx

@@ -1,7 +1,8 @@
 import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import { describe, it, expect, jest } from "@jest/globals";
-import DynamicJsonForm from "../DynamicJsonForm";
+import { useRef } from "react";
+import DynamicJsonForm, { DynamicJsonFormRef } from "../DynamicJsonForm";
 import type { JsonSchemaType } from "@/utils/jsonUtils";
 
 describe("DynamicJsonForm String Fields", () => {
@@ -663,3 +664,221 @@ describe("DynamicJsonForm Copy JSON Functionality", () => {
     });
   });
 });
+
+describe("DynamicJsonForm Validation Functionality", () => {
+  const renderFormWithRef = (props = {}) => {
+    const TestComponent = () => {
+      const formRef = useRef<DynamicJsonFormRef>(null);
+      const defaultProps = {
+        schema: {
+          type: "object",
+          properties: {
+            nested: { oneOf: [{ type: "string" }, { type: "integer" }] },
+          },
+        } as unknown as JsonSchemaType,
+        value: { nested: "test value" },
+        onChange: jest.fn(),
+        ref: formRef,
+      };
+
+      return (
+        <div>
+          <DynamicJsonForm {...defaultProps} {...props} />
+          <button
+            onClick={() => {
+              const result = formRef.current?.validateJson();
+              // Add data attributes to make validation result testable
+              const button = document.querySelector(
+                '[data-testid="validate-button"]',
+              ) as HTMLElement;
+              if (button && result) {
+                button.setAttribute(
+                  "data-validation-valid",
+                  result.isValid.toString(),
+                );
+                button.setAttribute(
+                  "data-validation-error",
+                  result.error || "",
+                );
+              }
+            }}
+            data-testid="validate-button"
+          >
+            Validate
+          </button>
+        </div>
+      );
+    };
+
+    return render(<TestComponent />);
+  };
+
+  describe("validateJson method", () => {
+    it("should return valid for form mode", () => {
+      const simpleSchema = {
+        type: "string" as const,
+        description: "Test string field",
+      };
+
+      const TestComponent = () => {
+        const formRef = useRef<DynamicJsonFormRef>(null);
+
+        return (
+          <div>
+            <DynamicJsonForm
+              ref={formRef}
+              schema={simpleSchema}
+              value="test"
+              onChange={jest.fn()}
+            />
+            <button
+              onClick={() => {
+                const result = formRef.current?.validateJson();
+                const button = document.querySelector(
+                  '[data-testid="validate-button"]',
+                ) as HTMLElement;
+                if (button && result) {
+                  button.setAttribute(
+                    "data-validation-valid",
+                    result.isValid.toString(),
+                  );
+                  button.setAttribute(
+                    "data-validation-error",
+                    result.error || "",
+                  );
+                }
+              }}
+              data-testid="validate-button"
+            >
+              Validate
+            </button>
+          </div>
+        );
+      };
+
+      render(<TestComponent />);
+
+      const validateButton = screen.getByTestId("validate-button");
+      fireEvent.click(validateButton);
+
+      expect(validateButton.getAttribute("data-validation-valid")).toBe("true");
+      expect(validateButton.getAttribute("data-validation-error")).toBe("");
+    });
+
+    it("should return valid for valid JSON in JSON mode", () => {
+      renderFormWithRef();
+
+      const validateButton = screen.getByTestId("validate-button");
+      fireEvent.click(validateButton);
+
+      expect(validateButton.getAttribute("data-validation-valid")).toBe("true");
+      expect(validateButton.getAttribute("data-validation-error")).toBe("");
+    });
+
+    it("should return invalid for malformed JSON in JSON mode", async () => {
+      renderFormWithRef();
+
+      // Enter invalid JSON
+      const textarea = screen.getByRole("textbox");
+      fireEvent.change(textarea, { target: { value: '{ "invalid": json }' } });
+
+      // Wait a bit for any debounced updates
+      await waitFor(() => {
+        const validateButton = screen.getByTestId("validate-button");
+        fireEvent.click(validateButton);
+
+        expect(validateButton.getAttribute("data-validation-valid")).toBe(
+          "false",
+        );
+        expect(validateButton.getAttribute("data-validation-error")).toContain(
+          "JSON",
+        );
+      });
+    });
+
+    it("should return valid for empty JSON in JSON mode", () => {
+      renderFormWithRef();
+
+      // Clear the textarea
+      const textarea = screen.getByRole("textbox");
+      fireEvent.change(textarea, { target: { value: "" } });
+
+      const validateButton = screen.getByTestId("validate-button");
+      fireEvent.click(validateButton);
+
+      expect(validateButton.getAttribute("data-validation-valid")).toBe("true");
+      expect(validateButton.getAttribute("data-validation-error")).toBe("");
+    });
+
+    it("should set error state when validation fails", async () => {
+      renderFormWithRef();
+
+      // Enter invalid JSON
+      const textarea = screen.getByRole("textbox");
+      fireEvent.change(textarea, {
+        target: { value: '{ "trailing": "comma", }' },
+      });
+
+      // Trigger validation
+      const validateButton = screen.getByTestId("validate-button");
+      fireEvent.click(validateButton);
+
+      // Check that validation result shows error
+      expect(validateButton.getAttribute("data-validation-valid")).toBe(
+        "false",
+      );
+      expect(validateButton.getAttribute("data-validation-error")).toContain(
+        "JSON",
+      );
+    });
+  });
+
+  describe("forwardRef functionality", () => {
+    it("should expose validateJson method through ref", () => {
+      const TestComponent = () => {
+        const formRef = useRef<DynamicJsonFormRef>(null);
+
+        return (
+          <div>
+            <DynamicJsonForm
+              ref={formRef}
+              schema={{
+                type: "object",
+                properties: {
+                  test: { type: "string" },
+                },
+              }}
+              value={{ test: "value" }}
+              onChange={jest.fn()}
+            />
+            <button
+              onClick={() => {
+                const hasValidateMethod =
+                  typeof formRef.current?.validateJson === "function";
+                const button = document.querySelector(
+                  '[data-testid="ref-test-button"]',
+                ) as HTMLElement;
+                if (button) {
+                  button.setAttribute(
+                    "data-has-validate-method",
+                    hasValidateMethod.toString(),
+                  );
+                }
+              }}
+              data-testid="ref-test-button"
+            >
+              Test Ref
+            </button>
+          </div>
+        );
+      };
+
+      render(<TestComponent />);
+
+      const testButton = screen.getByTestId("ref-test-button");
+      fireEvent.click(testButton);
+
+      expect(testButton.getAttribute("data-has-validate-method")).toBe("true");
+    });
+  });
+});

client/src/components/__tests__/ListPane.test.tsx

@@ -0,0 +1,203 @@
+import { render, screen, fireEvent, act } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { describe, it, beforeEach, jest } from "@jest/globals";
+import ListPane from "../ListPane";
+
+describe("ListPane", () => {
+  const mockItems = [
+    { id: 1, name: "Tool 1", description: "First tool" },
+    { id: 2, name: "Tool 2", description: "Second tool" },
+    { id: 3, name: "Another Tool", description: "Third tool" },
+  ];
+
+  const defaultProps = {
+    items: mockItems,
+    listItems: jest.fn(),
+    clearItems: jest.fn(),
+    setSelectedItem: jest.fn(),
+    renderItem: (item: (typeof mockItems)[0]) => <div>{item.name}</div>,
+    title: "List tools",
+    buttonText: "Load Tools",
+  };
+
+  const renderListPane = (props = {}) => {
+    return render(<ListPane {...defaultProps} {...props} />);
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Rendering", () => {
+    it("should render with title and button", () => {
+      renderListPane();
+
+      expect(screen.getByText("List tools")).toBeInTheDocument();
+      expect(
+        screen.getByRole("button", { name: "Load Tools" }),
+      ).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Clear" })).toBeInTheDocument();
+    });
+
+    it("should render items when provided", () => {
+      renderListPane();
+
+      expect(screen.getByText("Tool 1")).toBeInTheDocument();
+      expect(screen.getByText("Tool 2")).toBeInTheDocument();
+      expect(screen.getByText("Another Tool")).toBeInTheDocument();
+    });
+
+    it("should render empty state when no items", () => {
+      renderListPane({ items: [] });
+
+      expect(screen.queryByText("Tool 1")).not.toBeInTheDocument();
+      expect(screen.queryByText("Tool 2")).not.toBeInTheDocument();
+    });
+
+    it("should render custom item content", () => {
+      const customRenderItem = (item: (typeof mockItems)[0]) => (
+        <div>
+          <span>{item.name}</span>
+          <small>{item.description}</small>
+        </div>
+      );
+
+      renderListPane({ renderItem: customRenderItem });
+
+      expect(screen.getByText("Tool 1")).toBeInTheDocument();
+      expect(screen.getByText("First tool")).toBeInTheDocument();
+    });
+  });
+
+  describe("Search Functionality", () => {
+    it("should show search icon initially", () => {
+      renderListPane();
+
+      const searchButton = screen.getByRole("button", { name: "Search" });
+      expect(searchButton).toBeInTheDocument();
+      expect(searchButton.querySelector("svg")).toBeInTheDocument();
+    });
+
+    it("should expand search input when search icon is clicked", async () => {
+      renderListPane();
+
+      const searchButton = screen.getByRole("button", { name: "Search" });
+      await act(async () => {
+        fireEvent.click(searchButton);
+      });
+
+      const searchInput = screen.getByPlaceholderText("Search...");
+      expect(searchInput).toBeInTheDocument();
+
+      // Wait for the setTimeout to complete and focus to be set
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 150));
+      });
+
+      expect(searchInput).toHaveFocus();
+    });
+
+    it("should filter items based on search query", async () => {
+      renderListPane();
+
+      const searchButton = screen.getByRole("button", { name: "Search" });
+      await act(async () => {
+        fireEvent.click(searchButton);
+      });
+
+      const searchInput = screen.getByPlaceholderText("Search...");
+      await act(async () => {
+        fireEvent.change(searchInput, { target: { value: "Tool" } });
+      });
+
+      expect(screen.getByText("Tool 1")).toBeInTheDocument();
+      expect(screen.getByText("Tool 2")).toBeInTheDocument();
+      expect(screen.getByText("Another Tool")).toBeInTheDocument();
+
+      await act(async () => {
+        fireEvent.change(searchInput, { target: { value: "Another" } });
+      });
+
+      expect(screen.queryByText("Tool 1")).not.toBeInTheDocument();
+      expect(screen.queryByText("Tool 2")).not.toBeInTheDocument();
+      expect(screen.getByText("Another Tool")).toBeInTheDocument();
+    });
+
+    it("should show 'No items found of matching \"NonExistent\"' when search has no results", async () => {
+      renderListPane();
+
+      const searchButton = screen.getByRole("button", { name: "Search" });
+      await act(async () => {
+        fireEvent.click(searchButton);
+      });
+
+      const searchInput = screen.getByPlaceholderText("Search...");
+
+      await act(async () => {
+        fireEvent.change(searchInput, { target: { value: "NonExistent" } });
+      });
+
+      expect(
+        screen.getByText('No items found matching "NonExistent"'),
+      ).toBeInTheDocument();
+      expect(screen.queryByText("Tool 1")).not.toBeInTheDocument();
+    });
+
+    it("should collapse search when input is empty and loses focus", async () => {
+      renderListPane();
+
+      const searchButton = screen.getByRole("button", { name: "Search" });
+      await act(async () => {
+        fireEvent.click(searchButton);
+      });
+
+      const searchInput = screen.getByPlaceholderText("Search...");
+
+      await act(async () => {
+        fireEvent.change(searchInput, { target: { value: "test" } });
+        fireEvent.change(searchInput, { target: { value: "" } });
+        fireEvent.blur(searchInput);
+      });
+
+      const searchButtonAfterCollapse = screen.getByRole("button", {
+        name: "Search",
+      });
+      expect(searchButtonAfterCollapse).toBeInTheDocument();
+      expect(searchButtonAfterCollapse).not.toHaveClass("opacity-0");
+    });
+
+    it("should keep search expanded when input has content and loses focus", async () => {
+      renderListPane();
+
+      const searchButton = screen.getByRole("button", { name: "Search" });
+      await act(async () => {
+        fireEvent.click(searchButton);
+      });
+
+      const searchInput = screen.getByPlaceholderText("Search...");
+      await act(async () => {
+        fireEvent.change(searchInput, { target: { value: "test" } });
+        fireEvent.blur(searchInput);
+      });
+
+      expect(screen.getByPlaceholderText("Search...")).toBeInTheDocument();
+    });
+
+    it("should search through all item properties (description)", async () => {
+      renderListPane();
+
+      const searchButton = screen.getByRole("button", { name: "Search" });
+      await act(async () => {
+        fireEvent.click(searchButton);
+      });
+
+      const searchInput = screen.getByPlaceholderText("Search...");
+      await act(async () => {
+        fireEvent.change(searchInput, { target: { value: "First tool" } });
+      });
+
+      expect(screen.getByText("Tool 1")).toBeInTheDocument();
+      expect(screen.queryByText("Tool 2")).not.toBeInTheDocument();
+    });
+  });
+});

client/src/components/__tests__/ToolsTab.test.tsx

@@ -637,4 +637,189 @@ describe("ToolsTab", () => {
       expect(screen.getByText(/version/i)).toBeInTheDocument();
     });
   });
+
+  describe("JSON Validation Integration", () => {
+    const toolWithJsonParams: Tool = {
+      name: "jsonTool",
+      description: "Tool with JSON parameters",
+      inputSchema: {
+        type: "object" as const,
+        required: ["config", "data"], // Make them required so they render as form fields
+        properties: {
+          config: {
+            type: "object" as const,
+            // No properties defined - this will force JSON mode
+          },
+          data: {
+            type: "array" as const,
+            // No items defined - this will force JSON mode
+          },
+        },
+      },
+    };
+
+    it("should prevent tool execution when JSON validation fails", async () => {
+      const mockCallTool = jest.fn();
+      renderToolsTab({
+        tools: [toolWithJsonParams],
+        selectedTool: toolWithJsonParams,
+        callTool: mockCallTool,
+      });
+
+      // Find JSON editor textareas (there should be at least 1 for JSON parameters)
+      const textareas = screen.getAllByRole("textbox");
+      expect(textareas.length).toBeGreaterThanOrEqual(1);
+
+      // Enter invalid JSON in the first textarea
+      const configTextarea = textareas[0];
+      fireEvent.change(configTextarea, {
+        target: { value: '{ "invalid": json }' },
+      });
+
+      // Try to run the tool
+      const runButton = screen.getByRole("button", { name: /run tool/i });
+      await act(async () => {
+        fireEvent.click(runButton);
+      });
+
+      // Tool should not have been called due to validation failure
+      expect(mockCallTool).not.toHaveBeenCalled();
+    });
+
+    it("should allow tool execution when JSON validation passes", async () => {
+      const mockCallTool = jest.fn();
+      renderToolsTab({
+        tools: [toolWithJsonParams],
+        selectedTool: toolWithJsonParams,
+        callTool: mockCallTool,
+      });
+
+      // Find JSON editor textareas (should have one for each required field: config and data)
+      const textareas = screen.getAllByRole("textbox");
+      expect(textareas.length).toBe(2);
+
+      // Enter valid JSON in each textarea
+      fireEvent.change(textareas[0], {
+        target: { value: '{ "setting": "value" }' },
+      });
+      fireEvent.change(textareas[1], {
+        target: { value: '["item1", "item2"]' },
+      });
+
+      // Wait for debounced updates
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 350));
+      });
+
+      // Try to run the tool
+      const runButton = screen.getByRole("button", { name: /run tool/i });
+      await act(async () => {
+        fireEvent.click(runButton);
+      });
+
+      // Tool should have been called successfully
+      expect(mockCallTool).toHaveBeenCalled();
+    });
+
+    it("should handle mixed valid and invalid JSON parameters", async () => {
+      const mockCallTool = jest.fn();
+      renderToolsTab({
+        tools: [toolWithJsonParams],
+        selectedTool: toolWithJsonParams,
+        callTool: mockCallTool,
+      });
+
+      const textareas = screen.getAllByRole("textbox");
+
+      // Enter invalid JSON that contains both valid and invalid parts
+      fireEvent.change(textareas[0], {
+        target: {
+          value:
+            '{ "config": { "setting": "value" }, "data": ["unclosed array" }',
+        },
+      });
+
+      // Try to run the tool
+      const runButton = screen.getByRole("button", { name: /run tool/i });
+      await act(async () => {
+        fireEvent.click(runButton);
+      });
+
+      // Tool should not have been called due to validation failure
+      expect(mockCallTool).not.toHaveBeenCalled();
+    });
+
+    it("should work with tools that have no JSON parameters", async () => {
+      const mockCallTool = jest.fn();
+      const simpleToolWithStringParam: Tool = {
+        name: "simpleTool",
+        description: "Tool with simple parameters",
+        inputSchema: {
+          type: "object" as const,
+          properties: {
+            message: { type: "string" as const },
+            count: { type: "number" as const },
+          },
+        },
+      };
+
+      renderToolsTab({
+        tools: [simpleToolWithStringParam],
+        selectedTool: simpleToolWithStringParam,
+        callTool: mockCallTool,
+      });
+
+      // Fill in the simple parameters
+      const messageInput = screen.getByRole("textbox");
+      const countInput = screen.getByRole("spinbutton");
+
+      fireEvent.change(messageInput, { target: { value: "test message" } });
+      fireEvent.change(countInput, { target: { value: "5" } });
+
+      // Run the tool
+      const runButton = screen.getByRole("button", { name: /run tool/i });
+      await act(async () => {
+        fireEvent.click(runButton);
+      });
+
+      // Tool should have been called successfully (no JSON validation needed)
+      expect(mockCallTool).toHaveBeenCalledWith(
+        simpleToolWithStringParam.name,
+        {
+          message: "test message",
+          count: 5,
+        },
+      );
+    });
+
+    it("should handle empty JSON parameters correctly", async () => {
+      const mockCallTool = jest.fn();
+      renderToolsTab({
+        tools: [toolWithJsonParams],
+        selectedTool: toolWithJsonParams,
+        callTool: mockCallTool,
+      });
+
+      const textareas = screen.getAllByRole("textbox");
+      expect(textareas.length).toBe(2);
+
+      // Clear both textareas (empty JSON should be valid)
+      fireEvent.change(textareas[0], { target: { value: "{}" } });
+      fireEvent.change(textareas[1], { target: { value: "[]" } });
+
+      // Wait for debounced updates
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 350));
+      });
+
+      // Try to run the tool
+      const runButton = screen.getByRole("button", { name: /run tool/i });
+      await act(async () => {
+        fireEvent.click(runButton);
+      });
+
+      // Tool should have been called (empty JSON is considered valid)
+      expect(mockCallTool).toHaveBeenCalled();
+    });
+  });
 });

client/src/components/ui/combobox.tsx

@@ -19,6 +19,7 @@ interface ComboboxProps {
   value: string;
   onChange: (value: string) => void;
   onInputChange: (value: string) => void;
+  onFocus?: () => void;
   options: string[];
   placeholder?: string;
   emptyMessage?: string;
@@ -29,6 +30,7 @@ export function Combobox({
   value,
   onChange,
   onInputChange,
+  onFocus,
   options = [],
   placeholder = "Select...",
   emptyMessage = "No results found.",
@@ -36,6 +38,16 @@ export function Combobox({
 }: ComboboxProps) {
   const [open, setOpen] = React.useState(false);
 
+  const handleOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      setOpen(newOpen);
+      if (newOpen && onFocus) {
+        onFocus();
+      }
+    },
+    [onFocus],
+  );
+
   const handleSelect = React.useCallback(
     (option: string) => {
       onChange(option);
@@ -52,7 +64,7 @@ export function Combobox({
   );
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover open={open} onOpenChange={handleOpenChange}>
       <PopoverTrigger asChild>
         <Button
           variant="outline"