From dada1c4ba6742bf8b0c49f1f03da978a37f9fd32 Mon Sep 17 00:00:00 2001 From: NicolasMontone Date: Tue, 1 Apr 2025 10:59:30 -0300 Subject: [PATCH 1/7] do not remove form with alert --- client/src/components/ToolsTab.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx index eb91c98..3bd3da9 100644 --- a/client/src/components/ToolsTab.tsx +++ b/client/src/components/ToolsTab.tsx @@ -147,17 +147,11 @@ const ToolsTab = ({
- {error ? ( - - - Error - {error} - - ) : selectedTool ? ( + {selectedTool ? (
-

- {selectedTool.description} -

+

+ {selectedTool.description} +

{Object.entries(selectedTool.inputSchema.properties ?? []).map( ([key, value]) => { const prop = value as JsonSchemaType; @@ -252,6 +246,13 @@ const ToolsTab = ({ Run Tool {toolResult && renderToolResult()} + {error && ( + + + Error + {error} + + )}
) : ( From d2db697d894706500a4eaf562e168c1060d420fd Mon Sep 17 00:00:00 2001 From: NicolasMontone Date: Tue, 1 Apr 2025 11:00:13 -0300 Subject: [PATCH 2/7] fix: prettier. --- client/src/components/ToolsTab.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx index 3bd3da9..6a6f9f5 100644 --- a/client/src/components/ToolsTab.tsx +++ b/client/src/components/ToolsTab.tsx @@ -149,9 +149,9 @@ const ToolsTab = ({
{selectedTool ? (
-

- {selectedTool.description} -

+

+ {selectedTool.description} +

{Object.entries(selectedTool.inputSchema.properties ?? []).map( ([key, value]) => { const prop = value as JsonSchemaType; From 51f2f726779253a07928bf1a323628a8d1166ac5 Mon Sep 17 00:00:00 2001 From: NicolasMontone Date: Tue, 1 Apr 2025 11:07:43 -0300 Subject: [PATCH 3/7] fix: add tests --- client/src/components/__tests__/ToolsTab.test.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx index 2a45065..41501db 100644 --- a/client/src/components/__tests__/ToolsTab.test.tsx +++ b/client/src/components/__tests__/ToolsTab.test.tsx @@ -1,5 +1,6 @@ import { render, screen, fireEvent } from "@testing-library/react"; import { describe, it, expect, jest } from "@jest/globals"; +import "@testing-library/jest-dom"; import ToolsTab from "../ToolsTab"; import { Tool } from "@modelcontextprotocol/sdk/types.js"; import { Tabs } from "@/components/ui/tabs"; @@ -69,4 +70,16 @@ describe("ToolsTab", () => { const newInput = screen.getByRole("spinbutton") as HTMLInputElement; expect(newInput.value).toBe(""); }); + + it("should display error message when error prop is provided", () => { + const errorMessage = "Test error message"; + renderToolsTab({ + selectedTool: mockTools[0], + error: errorMessage, + }); + + // Verify error message is displayed + expect(screen.getByText("Error")).toBeTruthy(); + expect(screen.getByText(errorMessage)).toBeTruthy(); + }); }); From c48670f426cd7443c85a01c90fd782140958e5e6 Mon Sep 17 00:00:00 2001 From: NicolasMontone Date: Tue, 1 Apr 2025 16:43:23 -0300 Subject: [PATCH 4/7] Add copy button to JSON & fix button styles override. --- client/src/components/JsonView.tsx | 2 +- client/src/components/ToolsTab.tsx | 31 ++++++++++++++++--- .../components/__tests__/ToolsTab.test.tsx | 1 - client/src/index.css | 26 ---------------- 4 files changed, 27 insertions(+), 33 deletions(-) diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx index e2922f0..3b9ec25 100644 --- a/client/src/components/JsonView.tsx +++ b/client/src/components/JsonView.tsx @@ -33,7 +33,7 @@ const JsonView = memo( : data; return ( -
+
{ + try { + navigator.clipboard.writeText(JSON.stringify(toolResult)) + setCopied(true) + setTimeout(() => { + setCopied(false) + }, 500) + } catch (error) { + toast.error(`There was an error coping result into the clipboard: ${error instanceof Error ? error.message : String(error)}`) + } + }, [toolResult]) + const renderToolResult = () => { if (!toolResult) return null; @@ -53,7 +68,8 @@ const ToolsTab = ({ return ( <>

Invalid Tool Result:

-
+
+

Errors:

@@ -76,7 +92,12 @@ const ToolsTab = ({ {structuredResult.content.map((item, index) => (
{item.type === "text" && ( -
+
+
)} @@ -234,7 +255,7 @@ const ToolsTab = ({ ...params, [key]: prop.type === "number" || - prop.type === "integer" + prop.type === "integer" ? Number(e.target.value) : e.target.value, }) diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx index e1b306d..1c24a6c 100644 --- a/client/src/components/__tests__/ToolsTab.test.tsx +++ b/client/src/components/__tests__/ToolsTab.test.tsx @@ -81,7 +81,6 @@ describe("ToolsTab", () => { expect(newInput.value).toBe(""); }); - it("should display error message when error prop is provided", () => { const errorMessage = "Test error message"; renderToolsTab({ diff --git a/client/src/index.css b/client/src/index.css index 1795f58..11c6f23 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -38,29 +38,6 @@ h1 { line-height: 1.1; } -button { - border-radius: 8px; - border: 1px solid transparent; - padding: 0.6em 1.2em; - font-size: 1em; - font-weight: 500; - font-family: inherit; - background-color: #1a1a1a; - cursor: pointer; - transition: border-color 0.25s; -} -button:hover { - border-color: #646cff; -} -button:focus, -button:focus-visible { - outline: 4px auto -webkit-focus-ring-color; -} - -button[role="checkbox"] { - padding: 0; -} - @media (prefers-color-scheme: light) { :root { color: #213547; @@ -69,9 +46,6 @@ button[role="checkbox"] { a:hover { color: #747bff; } - button { - background-color: #f9f9f9; - } } @layer base { From d1e155f984b44699378d309d651b07e68a46bab4 Mon Sep 17 00:00:00 2001 From: NicolasMontone Date: Tue, 1 Apr 2025 16:48:01 -0300 Subject: [PATCH 5/7] Revert "Add copy button to JSON & fix button styles override." This reverts commit c48670f426cd7443c85a01c90fd782140958e5e6. --- client/src/components/JsonView.tsx | 2 +- client/src/components/ToolsTab.tsx | 31 +++---------------- .../components/__tests__/ToolsTab.test.tsx | 1 + client/src/index.css | 26 ++++++++++++++++ 4 files changed, 33 insertions(+), 27 deletions(-) diff --git a/client/src/components/JsonView.tsx b/client/src/components/JsonView.tsx index 3b9ec25..e2922f0 100644 --- a/client/src/components/JsonView.tsx +++ b/client/src/components/JsonView.tsx @@ -33,7 +33,7 @@ const JsonView = memo( : data; return ( -
+
{ - try { - navigator.clipboard.writeText(JSON.stringify(toolResult)) - setCopied(true) - setTimeout(() => { - setCopied(false) - }, 500) - } catch (error) { - toast.error(`There was an error coping result into the clipboard: ${error instanceof Error ? error.message : String(error)}`) - } - }, [toolResult]) - const renderToolResult = () => { if (!toolResult) return null; @@ -68,8 +53,7 @@ const ToolsTab = ({ return ( <>

Invalid Tool Result:

-
- +

Errors:

@@ -92,12 +76,7 @@ const ToolsTab = ({ {structuredResult.content.map((item, index) => (
{item.type === "text" && ( -
- +
)} @@ -255,7 +234,7 @@ const ToolsTab = ({ ...params, [key]: prop.type === "number" || - prop.type === "integer" + prop.type === "integer" ? Number(e.target.value) : e.target.value, }) diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx index 1c24a6c..e1b306d 100644 --- a/client/src/components/__tests__/ToolsTab.test.tsx +++ b/client/src/components/__tests__/ToolsTab.test.tsx @@ -81,6 +81,7 @@ describe("ToolsTab", () => { expect(newInput.value).toBe(""); }); + it("should display error message when error prop is provided", () => { const errorMessage = "Test error message"; renderToolsTab({ diff --git a/client/src/index.css b/client/src/index.css index 11c6f23..1795f58 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -38,6 +38,29 @@ h1 { line-height: 1.1; } +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +button[role="checkbox"] { + padding: 0; +} + @media (prefers-color-scheme: light) { :root { color: #213547; @@ -46,6 +69,9 @@ h1 { a:hover { color: #747bff; } + button { + background-color: #f9f9f9; + } } @layer base { From 1504d1307e2dc30752d38f2c90aa3c319ee22027 Mon Sep 17 00:00:00 2001 From: NicolasMontone Date: Tue, 1 Apr 2025 16:49:10 -0300 Subject: [PATCH 6/7] Remove error --- client/src/components/ToolsTab.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/client/src/components/ToolsTab.tsx b/client/src/components/ToolsTab.tsx index 7958664..6e85531 100644 --- a/client/src/components/ToolsTab.tsx +++ b/client/src/components/ToolsTab.tsx @@ -1,4 +1,4 @@ -import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"; +import { Alert, AlertDescription } from "@/components/ui/alert"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Input } from "@/components/ui/input"; @@ -13,7 +13,7 @@ import { ListToolsResult, Tool, } from "@modelcontextprotocol/sdk/types.js"; -import { AlertCircle, Send } from "lucide-react"; +import { Send } from "lucide-react"; import { useEffect, useState } from "react"; import ListPane from "./ListPane"; import JsonView from "./JsonView"; @@ -27,7 +27,6 @@ const ToolsTab = ({ setSelectedTool, toolResult, nextCursor, - error, }: { tools: Tool[]; listTools: () => void; @@ -251,13 +250,6 @@ const ToolsTab = ({ Run Tool {toolResult && renderToolResult()} - {error && ( - - - Error - {error} - - )}
) : ( From 80f2986fd6dbc0803249d7cd08d08a782f107c66 Mon Sep 17 00:00:00 2001 From: NicolasMontone Date: Tue, 1 Apr 2025 16:58:32 -0300 Subject: [PATCH 7/7] remove unneeded test --- client/src/components/__tests__/ToolsTab.test.tsx | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/client/src/components/__tests__/ToolsTab.test.tsx b/client/src/components/__tests__/ToolsTab.test.tsx index e1b306d..349977a 100644 --- a/client/src/components/__tests__/ToolsTab.test.tsx +++ b/client/src/components/__tests__/ToolsTab.test.tsx @@ -80,20 +80,6 @@ describe("ToolsTab", () => { const newInput = screen.getByRole("spinbutton") as HTMLInputElement; expect(newInput.value).toBe(""); }); - - - it("should display error message when error prop is provided", () => { - const errorMessage = "Test error message"; - renderToolsTab({ - selectedTool: mockTools[0], - error: errorMessage, - }); - - // Verify error message is displayed - expect(screen.getByText("Error")).toBeTruthy(); - expect(screen.getByText(errorMessage)).toBeTruthy(); - }); - it("should handle integer type inputs", () => { renderToolsTab({ selectedTool: mockTools[1], // Use the tool with integer type