Merge branch 'main' into cli-and-config-file-support
This commit is contained in:
Nicolas Barraud
GitHub
commit
bbff5c5883
43 changed files with 2005 additions and 793 deletions
|
|
@ -7,7 +7,7 @@ Thanks for your interest in contributing! This guide explains how to get involve
|
|||
1. Fork the repository and clone it locally
|
||||
2. Install dependencies with `npm install`
|
||||
3. Run `npm run dev` to start both client and server in development mode
|
||||
4. Use the web UI at http://127.0.0.1:5173 to interact with the inspector
|
||||
4. Use the web UI at http://127.0.0.1:6274 to interact with the inspector
|
||||
|
||||
## Development Process & Pull Requests
|
||||
|
||||
|
|
|
|||
15
README.md
15
README.md
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
The MCP inspector is a developer tool for testing and debugging MCP servers.
|
||||
|
||||
|
||||
|
||||
|
||||
## Running the Inspector
|
||||
|
||||
|
|
@ -30,7 +30,7 @@ npx @modelcontextprotocol/inspector -e key=value -e key2=$VALUE2 node build/inde
|
|||
npx @modelcontextprotocol/inspector -e key=$VALUE -- node build/index.js -e server-flag
|
||||
```
|
||||
|
||||
The inspector runs both a client UI (default port 5173) and an MCP proxy server (default port 3000). Open the client UI in your browser to use the inspector. You can customize the ports if needed:
|
||||
The inspector runs both an MCP Inspector (MCPI) client UI (default port 6274) and an MCP Proxy (MCPP) server (default port 6277). Open the MCPI client UI in your browser to use the inspector. (These ports are derived from the T9 dialpad mapping of MCPI and MCPP respectively, as a mnemonic). You can customize the ports if needed:
|
||||
|
||||
```bash
|
||||
CLIENT_PORT=8080 SERVER_PORT=9000 npx @modelcontextprotocol/inspector node build/index.js
|
||||
|
|
@ -50,9 +50,14 @@ The MCP Inspector includes a proxy server that can run and communicate with loca
|
|||
|
||||
The MCP Inspector supports the following configuration settings. To change them, click on the `Configuration` button in the MCP Inspector UI:
|
||||
|
||||
| Name | Purpose | Default Value |
|
||||
| -------------------------- | ----------------------------------------------------------------------------------------- | ------------- |
|
||||
| MCP_SERVER_REQUEST_TIMEOUT | Maximum time in milliseconds to wait for a response from the MCP server before timing out | 10000 |
|
||||
| Setting | Description | Default |
|
||||
| --------------------------------------- | ------------------------------------------------------------------------------------------------------------ | ------- |
|
||||
| `MCP_SERVER_REQUEST_TIMEOUT` | Timeout for requests to the MCP server (ms) | 10000 |
|
||||
| `MCP_REQUEST_TIMEOUT_RESET_ON_PROGRESS` | Reset timeout on progress notifications | true |
|
||||
| `MCP_REQUEST_MAX_TOTAL_TIMEOUT` | Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications) | 60000 |
|
||||
| `MCP_PROXY_FULL_ADDRESS` | Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577 | "" |
|
||||
|
||||
These settings can be adjusted in real-time through the UI and will persist across sessions.
|
||||
|
||||
The inspector also supports configuration files to store settings for different MCP servers. This is useful when working with multiple servers or complex configurations:
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ function handleError(error) {
|
|||
process.exit(1);
|
||||
}
|
||||
function delay(ms) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms));
|
||||
return new Promise((resolve) => setTimeout(resolve, ms, true));
|
||||
}
|
||||
async function runWebClient(args) {
|
||||
const inspectorServerPath = resolve(
|
||||
|
|
|
|||
|
|
@ -15,5 +15,19 @@ const server = http.createServer((request, response) => {
|
|||
});
|
||||
});
|
||||
|
||||
const port = process.env.PORT || 5173;
|
||||
server.listen(port, () => {});
|
||||
const port = process.env.PORT || 6274;
|
||||
server.on("listening", () => {
|
||||
console.log(
|
||||
`🔍 MCP Inspector is up and running at http://127.0.0.1:${port} 🚀`,
|
||||
);
|
||||
});
|
||||
server.on("error", (err) => {
|
||||
if (err.message.includes(`EADDRINUSE`)) {
|
||||
console.error(
|
||||
`❌ MCP Inspector PORT IS IN USE at http://127.0.0.1:${port} ❌ `,
|
||||
);
|
||||
} else {
|
||||
throw err;
|
||||
}
|
||||
});
|
||||
server.listen(port);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@modelcontextprotocol/inspector-client",
|
||||
"version": "0.7.0",
|
||||
"version": "0.8.2",
|
||||
"description": "Client-side application for the Model Context Protocol inspector",
|
||||
"license": "MIT",
|
||||
"author": "Anthropic, PBC (https://anthropic.com)",
|
||||
|
|
@ -18,12 +18,12 @@
|
|||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview",
|
||||
"preview": "vite preview --port 6274",
|
||||
"test": "jest --config jest.config.cjs",
|
||||
"test:watch": "jest --config jest.config.cjs --watch"
|
||||
},
|
||||
"dependencies": {
|
||||
"@modelcontextprotocol/sdk": "^1.6.1",
|
||||
"@modelcontextprotocol/sdk": "^1.9.0",
|
||||
"@radix-ui/react-checkbox": "^1.1.4",
|
||||
"@radix-ui/react-dialog": "^1.1.3",
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
|
|
@ -32,7 +32,8 @@
|
|||
"@radix-ui/react-select": "^2.1.2",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@radix-ui/react-tabs": "^1.1.1",
|
||||
"@types/prismjs": "^1.26.5",
|
||||
"@radix-ui/react-toast": "^1.2.6",
|
||||
"@radix-ui/react-tooltip": "^1.1.8",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.0.4",
|
||||
|
|
@ -42,7 +43,6 @@
|
|||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"react-simple-code-editor": "^0.14.1",
|
||||
"react-toastify": "^10.0.6",
|
||||
"serve-handler": "^6.1.6",
|
||||
"tailwind-merge": "^2.5.3",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
|
|
@ -54,6 +54,7 @@
|
|||
"@testing-library/react": "^16.2.0",
|
||||
"@types/jest": "^29.5.14",
|
||||
"@types/node": "^22.7.5",
|
||||
"@types/prismjs": "^1.26.5",
|
||||
"@types/react": "^18.3.10",
|
||||
"@types/react-dom": "^18.3.0",
|
||||
"@types/serve-handler": "^6.1.4",
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@ import {
|
|||
import React, { Suspense, useEffect, useRef, useState } from "react";
|
||||
import { useConnection } from "./lib/hooks/useConnection";
|
||||
import { useDraggablePane } from "./lib/hooks/useDraggablePane";
|
||||
|
||||
import { StdErrNotification } from "./lib/notificationTypes";
|
||||
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
|
@ -33,7 +32,6 @@ import {
|
|||
MessageSquare,
|
||||
} from "lucide-react";
|
||||
|
||||
import { toast } from "react-toastify";
|
||||
import { z } from "zod";
|
||||
import "./App.css";
|
||||
import ConsoleTab from "./components/ConsoleTab";
|
||||
|
|
@ -47,13 +45,14 @@ import Sidebar from "./components/Sidebar";
|
|||
import ToolsTab from "./components/ToolsTab";
|
||||
import { DEFAULT_INSPECTOR_CONFIG } from "./lib/constants";
|
||||
import { InspectorConfig } from "./lib/configurationTypes";
|
||||
import { getMCPProxyAddress } from "./utils/configUtils";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
const params = new URLSearchParams(window.location.search);
|
||||
const PROXY_PORT = params.get("proxyPort") ?? "3000";
|
||||
const PROXY_SERVER_URL = `http://${window.location.hostname}:${PROXY_PORT}`;
|
||||
const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
|
||||
|
||||
const App = () => {
|
||||
const { toast } = useToast();
|
||||
// Handle OAuth callback route
|
||||
const [resources, setResources] = useState<Resource[]>([]);
|
||||
const [resourceTemplates, setResourceTemplates] = useState<
|
||||
|
|
@ -95,7 +94,24 @@ const App = () => {
|
|||
|
||||
const [config, setConfig] = useState<InspectorConfig>(() => {
|
||||
const savedConfig = localStorage.getItem(CONFIG_LOCAL_STORAGE_KEY);
|
||||
return savedConfig ? JSON.parse(savedConfig) : DEFAULT_INSPECTOR_CONFIG;
|
||||
if (savedConfig) {
|
||||
// merge default config with saved config
|
||||
const mergedConfig = {
|
||||
...DEFAULT_INSPECTOR_CONFIG,
|
||||
...JSON.parse(savedConfig),
|
||||
} as InspectorConfig;
|
||||
|
||||
// update description of keys to match the new description (in case of any updates to the default config description)
|
||||
Object.entries(mergedConfig).forEach(([key, value]) => {
|
||||
mergedConfig[key as keyof InspectorConfig] = {
|
||||
...value,
|
||||
label: DEFAULT_INSPECTOR_CONFIG[key as keyof InspectorConfig].label,
|
||||
};
|
||||
});
|
||||
|
||||
return mergedConfig;
|
||||
}
|
||||
return DEFAULT_INSPECTOR_CONFIG;
|
||||
});
|
||||
const [bearerToken, setBearerToken] = useState<string>(() => {
|
||||
return localStorage.getItem("lastBearerToken") || "";
|
||||
|
|
@ -140,11 +156,12 @@ const App = () => {
|
|||
serverCapabilities,
|
||||
mcpClient,
|
||||
requestHistory,
|
||||
makeRequest: makeConnectionRequest,
|
||||
makeRequest,
|
||||
sendNotification,
|
||||
handleCompletion,
|
||||
completionsSupported,
|
||||
connect: connectMcpServer,
|
||||
disconnect: disconnectMcpServer,
|
||||
} = useConnection({
|
||||
transportType,
|
||||
command,
|
||||
|
|
@ -152,8 +169,7 @@ const App = () => {
|
|||
sseUrl,
|
||||
env,
|
||||
bearerToken,
|
||||
proxyServerUrl: PROXY_SERVER_URL,
|
||||
requestTimeout: config.MCP_SERVER_REQUEST_TIMEOUT.value as number,
|
||||
config,
|
||||
onNotification: (notification) => {
|
||||
setNotifications((prev) => [...prev, notification as ServerNotification]);
|
||||
},
|
||||
|
|
@ -196,8 +212,13 @@ const App = () => {
|
|||
localStorage.setItem(CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config));
|
||||
}, [config]);
|
||||
|
||||
const hasProcessedRef = useRef(false);
|
||||
// Auto-connect if serverUrl is provided in URL params (e.g. after OAuth callback)
|
||||
useEffect(() => {
|
||||
if (hasProcessedRef.current) {
|
||||
// Only try to connect once
|
||||
return;
|
||||
}
|
||||
const serverUrl = params.get("serverUrl");
|
||||
if (serverUrl) {
|
||||
setSseUrl(serverUrl);
|
||||
|
|
@ -207,14 +228,18 @@ const App = () => {
|
|||
newUrl.searchParams.delete("serverUrl");
|
||||
window.history.replaceState({}, "", newUrl.toString());
|
||||
// Show success toast for OAuth
|
||||
toast.success("Successfully authenticated with OAuth");
|
||||
toast({
|
||||
title: "Success",
|
||||
description: "Successfully authenticated with OAuth",
|
||||
});
|
||||
hasProcessedRef.current = true;
|
||||
// Connect to the server
|
||||
connectMcpServer();
|
||||
}
|
||||
}, [connectMcpServer]);
|
||||
}, [connectMcpServer, toast]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${PROXY_SERVER_URL}/config`)
|
||||
fetch(`${getMCPProxyAddress(config)}/config`)
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setEnv(data.defaultEnvironment);
|
||||
|
|
@ -228,6 +253,7 @@ const App = () => {
|
|||
.catch((error) =>
|
||||
console.error("Error fetching default environment:", error),
|
||||
);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -260,13 +286,13 @@ const App = () => {
|
|||
setErrors((prev) => ({ ...prev, [tabKey]: null }));
|
||||
};
|
||||
|
||||
const makeRequest = async <T extends z.ZodType>(
|
||||
const sendMCPRequest = async <T extends z.ZodType>(
|
||||
request: ClientRequest,
|
||||
schema: T,
|
||||
tabKey?: keyof typeof errors,
|
||||
) => {
|
||||
try {
|
||||
const response = await makeConnectionRequest(request, schema);
|
||||
const response = await makeRequest(request, schema);
|
||||
if (tabKey !== undefined) {
|
||||
clearError(tabKey);
|
||||
}
|
||||
|
|
@ -284,7 +310,7 @@ const App = () => {
|
|||
};
|
||||
|
||||
const listResources = async () => {
|
||||
const response = await makeRequest(
|
||||
const response = await sendMCPRequest(
|
||||
{
|
||||
method: "resources/list" as const,
|
||||
params: nextResourceCursor ? { cursor: nextResourceCursor } : {},
|
||||
|
|
@ -297,7 +323,7 @@ const App = () => {
|
|||
};
|
||||
|
||||
const listResourceTemplates = async () => {
|
||||
const response = await makeRequest(
|
||||
const response = await sendMCPRequest(
|
||||
{
|
||||
method: "resources/templates/list" as const,
|
||||
params: nextResourceTemplateCursor
|
||||
|
|
@ -314,7 +340,7 @@ const App = () => {
|
|||
};
|
||||
|
||||
const readResource = async (uri: string) => {
|
||||
const response = await makeRequest(
|
||||
const response = await sendMCPRequest(
|
||||
{
|
||||
method: "resources/read" as const,
|
||||
params: { uri },
|
||||
|
|
@ -327,7 +353,7 @@ const App = () => {
|
|||
|
||||
const subscribeToResource = async (uri: string) => {
|
||||
if (!resourceSubscriptions.has(uri)) {
|
||||
await makeRequest(
|
||||
await sendMCPRequest(
|
||||
{
|
||||
method: "resources/subscribe" as const,
|
||||
params: { uri },
|
||||
|
|
@ -343,7 +369,7 @@ const App = () => {
|
|||
|
||||
const unsubscribeFromResource = async (uri: string) => {
|
||||
if (resourceSubscriptions.has(uri)) {
|
||||
await makeRequest(
|
||||
await sendMCPRequest(
|
||||
{
|
||||
method: "resources/unsubscribe" as const,
|
||||
params: { uri },
|
||||
|
|
@ -358,7 +384,7 @@ const App = () => {
|
|||
};
|
||||
|
||||
const listPrompts = async () => {
|
||||
const response = await makeRequest(
|
||||
const response = await sendMCPRequest(
|
||||
{
|
||||
method: "prompts/list" as const,
|
||||
params: nextPromptCursor ? { cursor: nextPromptCursor } : {},
|
||||
|
|
@ -371,7 +397,7 @@ const App = () => {
|
|||
};
|
||||
|
||||
const getPrompt = async (name: string, args: Record<string, string> = {}) => {
|
||||
const response = await makeRequest(
|
||||
const response = await sendMCPRequest(
|
||||
{
|
||||
method: "prompts/get" as const,
|
||||
params: { name, arguments: args },
|
||||
|
|
@ -383,7 +409,7 @@ const App = () => {
|
|||
};
|
||||
|
||||
const listTools = async () => {
|
||||
const response = await makeRequest(
|
||||
const response = await sendMCPRequest(
|
||||
{
|
||||
method: "tools/list" as const,
|
||||
params: nextToolCursor ? { cursor: nextToolCursor } : {},
|
||||
|
|
@ -396,21 +422,34 @@ const App = () => {
|
|||
};
|
||||
|
||||
const callTool = async (name: string, params: Record<string, unknown>) => {
|
||||
const response = await makeRequest(
|
||||
{
|
||||
method: "tools/call" as const,
|
||||
params: {
|
||||
name,
|
||||
arguments: params,
|
||||
_meta: {
|
||||
progressToken: progressTokenRef.current++,
|
||||
try {
|
||||
const response = await sendMCPRequest(
|
||||
{
|
||||
method: "tools/call" as const,
|
||||
params: {
|
||||
name,
|
||||
arguments: params,
|
||||
_meta: {
|
||||
progressToken: progressTokenRef.current++,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
CompatibilityCallToolResultSchema,
|
||||
"tools",
|
||||
);
|
||||
setToolResult(response);
|
||||
CompatibilityCallToolResultSchema,
|
||||
"tools",
|
||||
);
|
||||
setToolResult(response);
|
||||
} catch (e) {
|
||||
const toolResult: CompatibilityCallToolResult = {
|
||||
content: [
|
||||
{
|
||||
type: "text",
|
||||
text: (e as Error).message ?? String(e),
|
||||
},
|
||||
],
|
||||
isError: true,
|
||||
};
|
||||
setToolResult(toolResult);
|
||||
}
|
||||
};
|
||||
|
||||
const handleRootsChange = async () => {
|
||||
|
|
@ -418,7 +457,7 @@ const App = () => {
|
|||
};
|
||||
|
||||
const sendLogLevelRequest = async (level: LoggingLevel) => {
|
||||
await makeRequest(
|
||||
await sendMCPRequest(
|
||||
{
|
||||
method: "logging/setLevel" as const,
|
||||
params: { level },
|
||||
|
|
@ -458,6 +497,7 @@ const App = () => {
|
|||
bearerToken={bearerToken}
|
||||
setBearerToken={setBearerToken}
|
||||
onConnect={connectMcpServer}
|
||||
onDisconnect={disconnectMcpServer}
|
||||
stdErrNotifications={stdErrNotifications}
|
||||
logLevel={logLevel}
|
||||
sendLogLevelRequest={sendLogLevelRequest}
|
||||
|
|
@ -617,9 +657,10 @@ const App = () => {
|
|||
setTools([]);
|
||||
setNextToolCursor(undefined);
|
||||
}}
|
||||
callTool={(name, params) => {
|
||||
callTool={async (name, params) => {
|
||||
clearError("tools");
|
||||
callTool(name, params);
|
||||
setToolResult(null);
|
||||
await callTool(name, params);
|
||||
}}
|
||||
selectedTool={selectedTool}
|
||||
setSelectedTool={(tool) => {
|
||||
|
|
@ -634,7 +675,7 @@ const App = () => {
|
|||
<ConsoleTab />
|
||||
<PingTab
|
||||
onPingClick={() => {
|
||||
void makeRequest(
|
||||
void sendMCPRequest(
|
||||
{
|
||||
method: "ping" as const,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,33 +3,9 @@ import { Button } from "@/components/ui/button";
|
|||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import JsonEditor from "./JsonEditor";
|
||||
import { updateValueAtPath, JsonObject } from "@/utils/jsonPathUtils";
|
||||
import { updateValueAtPath } from "@/utils/jsonUtils";
|
||||
import { generateDefaultValue, formatFieldLabel } from "@/utils/schemaUtils";
|
||||
|
||||
export type JsonValue =
|
||||
| string
|
||||
| number
|
||||
| boolean
|
||||
| null
|
||||
| undefined
|
||||
| JsonValue[]
|
||||
| { [key: string]: JsonValue };
|
||||
|
||||
export type JsonSchemaType = {
|
||||
type:
|
||||
| "string"
|
||||
| "number"
|
||||
| "integer"
|
||||
| "boolean"
|
||||
| "array"
|
||||
| "object"
|
||||
| "null";
|
||||
description?: string;
|
||||
required?: boolean;
|
||||
default?: JsonValue;
|
||||
properties?: Record<string, JsonSchemaType>;
|
||||
items?: JsonSchemaType;
|
||||
};
|
||||
import type { JsonValue, JsonSchemaType, JsonObject } from "@/utils/jsonUtils";
|
||||
|
||||
interface DynamicJsonFormProps {
|
||||
schema: JsonSchemaType;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import { ServerNotification } from "@modelcontextprotocol/sdk/types.js";
|
||||
import { Copy } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import JsonView from "./JsonView";
|
||||
|
||||
|
|
@ -25,10 +24,6 @@ const HistoryAndNotifications = ({
|
|||
setExpandedNotifications((prev) => ({ ...prev, [index]: !prev[index] }));
|
||||
};
|
||||
|
||||
const copyToClipboard = (text: string) => {
|
||||
navigator.clipboard.writeText(text);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-card overflow-hidden flex h-full">
|
||||
<div className="flex-1 overflow-y-auto p-4 border-r">
|
||||
|
|
@ -68,16 +63,12 @@ const HistoryAndNotifications = ({
|
|||
<span className="font-semibold text-blue-600">
|
||||
Request:
|
||||
</span>
|
||||
<button
|
||||
onClick={() => copyToClipboard(request.request)}
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
<Copy size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-background p-2 rounded">
|
||||
<JsonView data={request.request} />
|
||||
</div>
|
||||
|
||||
<JsonView
|
||||
data={request.request}
|
||||
className="bg-background"
|
||||
/>
|
||||
</div>
|
||||
{request.response && (
|
||||
<div className="mt-2">
|
||||
|
|
@ -85,16 +76,11 @@ const HistoryAndNotifications = ({
|
|||
<span className="font-semibold text-green-600">
|
||||
Response:
|
||||
</span>
|
||||
<button
|
||||
onClick={() => copyToClipboard(request.response!)}
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
<Copy size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-background p-2 rounded">
|
||||
<JsonView data={request.response} />
|
||||
</div>
|
||||
<JsonView
|
||||
data={request.response}
|
||||
className="bg-background"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
|
@ -134,20 +120,11 @@ const HistoryAndNotifications = ({
|
|||
<span className="font-semibold text-purple-600">
|
||||
Details:
|
||||
</span>
|
||||
<button
|
||||
onClick={() =>
|
||||
copyToClipboard(JSON.stringify(notification))
|
||||
}
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
<Copy size={16} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="bg-background p-2 rounded">
|
||||
<JsonView
|
||||
data={JSON.stringify(notification, null, 2)}
|
||||
/>
|
||||
</div>
|
||||
<JsonView
|
||||
data={JSON.stringify(notification, null, 2)}
|
||||
className="bg-background"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
|
|
|
|||
|
|
@ -1,45 +1,96 @@
|
|||
import { useState, memo } from "react";
|
||||
import { JsonValue } from "./DynamicJsonForm";
|
||||
import { useState, memo, useMemo, useCallback, useEffect } from "react";
|
||||
import type { JsonValue } from "@/utils/jsonUtils";
|
||||
import clsx from "clsx";
|
||||
import { Copy, CheckCheck } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { getDataType, tryParseJson } from "@/utils/jsonUtils";
|
||||
|
||||
interface JsonViewProps {
|
||||
data: unknown;
|
||||
name?: string;
|
||||
initialExpandDepth?: number;
|
||||
}
|
||||
|
||||
function tryParseJson(str: string): { success: boolean; data: JsonValue } {
|
||||
const trimmed = str.trim();
|
||||
if (
|
||||
!(trimmed.startsWith("{") && trimmed.endsWith("}")) &&
|
||||
!(trimmed.startsWith("[") && trimmed.endsWith("]"))
|
||||
) {
|
||||
return { success: false, data: str };
|
||||
}
|
||||
try {
|
||||
return { success: true, data: JSON.parse(str) };
|
||||
} catch {
|
||||
return { success: false, data: str };
|
||||
}
|
||||
className?: string;
|
||||
withCopyButton?: boolean;
|
||||
isError?: boolean;
|
||||
}
|
||||
|
||||
const JsonView = memo(
|
||||
({ data, name, initialExpandDepth = 3 }: JsonViewProps) => {
|
||||
const normalizedData =
|
||||
typeof data === "string"
|
||||
({
|
||||
data,
|
||||
name,
|
||||
initialExpandDepth = 3,
|
||||
className,
|
||||
withCopyButton = true,
|
||||
isError = false,
|
||||
}: JsonViewProps) => {
|
||||
const { toast } = useToast();
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
let timeoutId: NodeJS.Timeout;
|
||||
if (copied) {
|
||||
timeoutId = setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 500);
|
||||
}
|
||||
return () => {
|
||||
if (timeoutId) {
|
||||
clearTimeout(timeoutId);
|
||||
}
|
||||
};
|
||||
}, [copied]);
|
||||
|
||||
const normalizedData = useMemo(() => {
|
||||
return typeof data === "string"
|
||||
? tryParseJson(data).success
|
||||
? tryParseJson(data).data
|
||||
: data
|
||||
: data;
|
||||
}, [data]);
|
||||
|
||||
const handleCopy = useCallback(() => {
|
||||
try {
|
||||
navigator.clipboard.writeText(
|
||||
typeof normalizedData === "string"
|
||||
? normalizedData
|
||||
: JSON.stringify(normalizedData, null, 2),
|
||||
);
|
||||
setCopied(true);
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: `There was an error coping result into the clipboard: ${error instanceof Error ? error.message : String(error)}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
}, [toast, normalizedData]);
|
||||
|
||||
return (
|
||||
<div className="font-mono text-sm transition-all duration-300 ">
|
||||
<JsonNode
|
||||
data={normalizedData as JsonValue}
|
||||
name={name}
|
||||
depth={0}
|
||||
initialExpandDepth={initialExpandDepth}
|
||||
/>
|
||||
<div className={clsx("p-4 border rounded relative", className)}>
|
||||
{withCopyButton && (
|
||||
<Button
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="absolute top-2 right-2"
|
||||
onClick={handleCopy}
|
||||
>
|
||||
{copied ? (
|
||||
<CheckCheck className="size-4 dark:text-green-700 text-green-600" />
|
||||
) : (
|
||||
<Copy className="size-4 text-foreground" />
|
||||
)}
|
||||
</Button>
|
||||
)}
|
||||
<div className="font-mono text-sm transition-all duration-300">
|
||||
<JsonNode
|
||||
data={normalizedData as JsonValue}
|
||||
name={name}
|
||||
depth={0}
|
||||
initialExpandDepth={initialExpandDepth}
|
||||
isError={isError}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
|
@ -52,28 +103,28 @@ interface JsonNodeProps {
|
|||
name?: string;
|
||||
depth: number;
|
||||
initialExpandDepth: number;
|
||||
isError?: boolean;
|
||||
}
|
||||
|
||||
const JsonNode = memo(
|
||||
({ data, name, depth = 0, initialExpandDepth }: JsonNodeProps) => {
|
||||
({
|
||||
data,
|
||||
name,
|
||||
depth = 0,
|
||||
initialExpandDepth,
|
||||
isError = false,
|
||||
}: JsonNodeProps) => {
|
||||
const [isExpanded, setIsExpanded] = useState(depth < initialExpandDepth);
|
||||
|
||||
const getDataType = (value: JsonValue): string => {
|
||||
if (Array.isArray(value)) return "array";
|
||||
if (value === null) return "null";
|
||||
return typeof value;
|
||||
};
|
||||
|
||||
const dataType = getDataType(data);
|
||||
|
||||
const typeStyleMap: Record<string, string> = {
|
||||
const [typeStyleMap] = useState<Record<string, string>>({
|
||||
number: "text-blue-600",
|
||||
boolean: "text-amber-600",
|
||||
null: "text-purple-600",
|
||||
undefined: "text-gray-600",
|
||||
string: "text-green-600 break-all whitespace-pre-wrap",
|
||||
string: "text-green-600 group-hover:text-green-500",
|
||||
error: "text-red-600 group-hover:text-red-500",
|
||||
default: "text-gray-700",
|
||||
};
|
||||
});
|
||||
const dataType = getDataType(data);
|
||||
|
||||
const renderCollapsible = (isArray: boolean) => {
|
||||
const items = isArray
|
||||
|
|
@ -174,7 +225,14 @@ const JsonNode = memo(
|
|||
{name}:
|
||||
</span>
|
||||
)}
|
||||
<pre className={typeStyleMap.string}>"{value}"</pre>
|
||||
<pre
|
||||
className={clsx(
|
||||
typeStyleMap.string,
|
||||
"break-all whitespace-pre-wrap",
|
||||
)}
|
||||
>
|
||||
"{value}"
|
||||
</pre>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -188,8 +246,8 @@ const JsonNode = memo(
|
|||
)}
|
||||
<pre
|
||||
className={clsx(
|
||||
typeStyleMap.string,
|
||||
"cursor-pointer group-hover:text-green-500",
|
||||
isError ? typeStyleMap.error : typeStyleMap.string,
|
||||
"cursor-pointer break-all whitespace-pre-wrap",
|
||||
)}
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
title={isExpanded ? "Click to collapse" : "Click to expand"}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const ListPane = <T extends object>({
|
|||
isButtonDisabled,
|
||||
}: ListPaneProps<T>) => (
|
||||
<div className="bg-card rounded-lg shadow">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-700">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-800">
|
||||
<h3 className="font-semibold dark:text-white">{title}</h3>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
|
|
|
|||
|
|
@ -3,14 +3,16 @@ import { Button } from "@/components/ui/button";
|
|||
|
||||
const PingTab = ({ onPingClick }: { onPingClick: () => void }) => {
|
||||
return (
|
||||
<TabsContent value="ping" className="grid grid-cols-2 gap-4">
|
||||
<div className="col-span-2 flex justify-center items-center">
|
||||
<Button
|
||||
onClick={onPingClick}
|
||||
className="font-bold py-6 px-12 rounded-full"
|
||||
>
|
||||
Ping Server
|
||||
</Button>
|
||||
<TabsContent value="ping">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="col-span-2 flex justify-center items-center">
|
||||
<Button
|
||||
onClick={onPingClick}
|
||||
className="font-bold py-6 px-12 rounded-full"
|
||||
>
|
||||
Ping Server
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -84,86 +84,88 @@ const PromptsTab = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<TabsContent value="prompts" className="grid grid-cols-2 gap-4">
|
||||
<ListPane
|
||||
items={prompts}
|
||||
listItems={listPrompts}
|
||||
clearItems={clearPrompts}
|
||||
setSelectedItem={(prompt) => {
|
||||
setSelectedPrompt(prompt);
|
||||
setPromptArgs({});
|
||||
}}
|
||||
renderItem={(prompt) => (
|
||||
<>
|
||||
<span className="flex-1">{prompt.name}</span>
|
||||
<span className="text-sm text-gray-500">{prompt.description}</span>
|
||||
</>
|
||||
)}
|
||||
title="Prompts"
|
||||
buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
|
||||
isButtonDisabled={!nextCursor && prompts.length > 0}
|
||||
/>
|
||||
|
||||
<div className="bg-card rounded-lg shadow">
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<h3 className="font-semibold">
|
||||
{selectedPrompt ? selectedPrompt.name : "Select a prompt"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{error ? (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
) : selectedPrompt ? (
|
||||
<div className="space-y-4">
|
||||
{selectedPrompt.description && (
|
||||
<p className="text-sm text-gray-600">
|
||||
{selectedPrompt.description}
|
||||
</p>
|
||||
)}
|
||||
{selectedPrompt.arguments?.map((arg) => (
|
||||
<div key={arg.name}>
|
||||
<Label htmlFor={arg.name}>{arg.name}</Label>
|
||||
<Combobox
|
||||
id={arg.name}
|
||||
placeholder={`Enter ${arg.name}`}
|
||||
value={promptArgs[arg.name] || ""}
|
||||
onChange={(value) => handleInputChange(arg.name, value)}
|
||||
onInputChange={(value) =>
|
||||
handleInputChange(arg.name, value)
|
||||
}
|
||||
options={completions[arg.name] || []}
|
||||
/>
|
||||
|
||||
{arg.description && (
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{arg.description}
|
||||
{arg.required && (
|
||||
<span className="text-xs mt-1 ml-1">(Required)</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<Button onClick={handleGetPrompt} className="w-full">
|
||||
Get Prompt
|
||||
</Button>
|
||||
{promptContent && (
|
||||
<div className="p-4 border rounded">
|
||||
<JsonView data={promptContent} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
Select a prompt from the list to view and use it
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<TabsContent value="prompts">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<ListPane
|
||||
items={prompts}
|
||||
listItems={listPrompts}
|
||||
clearItems={clearPrompts}
|
||||
setSelectedItem={(prompt) => {
|
||||
setSelectedPrompt(prompt);
|
||||
setPromptArgs({});
|
||||
}}
|
||||
renderItem={(prompt) => (
|
||||
<>
|
||||
<span className="flex-1">{prompt.name}</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
{prompt.description}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
title="Prompts"
|
||||
buttonText={nextCursor ? "List More Prompts" : "List Prompts"}
|
||||
isButtonDisabled={!nextCursor && prompts.length > 0}
|
||||
/>
|
||||
|
||||
<div className="bg-card rounded-lg shadow">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-800">
|
||||
<h3 className="font-semibold">
|
||||
{selectedPrompt ? selectedPrompt.name : "Select a prompt"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{error ? (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
) : selectedPrompt ? (
|
||||
<div className="space-y-4">
|
||||
{selectedPrompt.description && (
|
||||
<p className="text-sm text-gray-600">
|
||||
{selectedPrompt.description}
|
||||
</p>
|
||||
)}
|
||||
{selectedPrompt.arguments?.map((arg) => (
|
||||
<div key={arg.name}>
|
||||
<Label htmlFor={arg.name}>{arg.name}</Label>
|
||||
<Combobox
|
||||
id={arg.name}
|
||||
placeholder={`Enter ${arg.name}`}
|
||||
value={promptArgs[arg.name] || ""}
|
||||
onChange={(value) => handleInputChange(arg.name, value)}
|
||||
onInputChange={(value) =>
|
||||
handleInputChange(arg.name, value)
|
||||
}
|
||||
options={completions[arg.name] || []}
|
||||
/>
|
||||
|
||||
{arg.description && (
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{arg.description}
|
||||
{arg.required && (
|
||||
<span className="text-xs mt-1 ml-1">(Required)</span>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<Button onClick={handleGetPrompt} className="w-full">
|
||||
Get Prompt
|
||||
</Button>
|
||||
{promptContent && (
|
||||
<JsonView data={promptContent} withCopyButton={false} />
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
Select a prompt from the list to view and use it
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
|
|
|||
|
|
@ -111,154 +111,158 @@ const ResourcesTab = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<TabsContent value="resources" className="grid grid-cols-3 gap-4">
|
||||
<ListPane
|
||||
items={resources}
|
||||
listItems={listResources}
|
||||
clearItems={clearResources}
|
||||
setSelectedItem={(resource) => {
|
||||
setSelectedResource(resource);
|
||||
readResource(resource.uri);
|
||||
setSelectedTemplate(null);
|
||||
}}
|
||||
renderItem={(resource) => (
|
||||
<div className="flex items-center w-full">
|
||||
<FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
|
||||
<span className="flex-1 truncate" title={resource.uri.toString()}>
|
||||
{resource.name}
|
||||
</span>
|
||||
<ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
title="Resources"
|
||||
buttonText={nextCursor ? "List More Resources" : "List Resources"}
|
||||
isButtonDisabled={!nextCursor && resources.length > 0}
|
||||
/>
|
||||
|
||||
<ListPane
|
||||
items={resourceTemplates}
|
||||
listItems={listResourceTemplates}
|
||||
clearItems={clearResourceTemplates}
|
||||
setSelectedItem={(template) => {
|
||||
setSelectedTemplate(template);
|
||||
setSelectedResource(null);
|
||||
setTemplateValues({});
|
||||
}}
|
||||
renderItem={(template) => (
|
||||
<div className="flex items-center w-full">
|
||||
<FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
|
||||
<span className="flex-1 truncate" title={template.uriTemplate}>
|
||||
{template.name}
|
||||
</span>
|
||||
<ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
title="Resource Templates"
|
||||
buttonText={
|
||||
nextTemplateCursor ? "List More Templates" : "List Templates"
|
||||
}
|
||||
isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
|
||||
/>
|
||||
|
||||
<div className="bg-card rounded-lg shadow">
|
||||
<div className="p-4 border-b border-gray-200 flex justify-between items-center">
|
||||
<h3
|
||||
className="font-semibold truncate"
|
||||
title={selectedResource?.name || selectedTemplate?.name}
|
||||
>
|
||||
{selectedResource
|
||||
? selectedResource.name
|
||||
: selectedTemplate
|
||||
? selectedTemplate.name
|
||||
: "Select a resource or template"}
|
||||
</h3>
|
||||
{selectedResource && (
|
||||
<div className="flex row-auto gap-1 justify-end w-2/5">
|
||||
{resourceSubscriptionsSupported &&
|
||||
!resourceSubscriptions.has(selectedResource.uri) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => subscribeToResource(selectedResource.uri)}
|
||||
>
|
||||
Subscribe
|
||||
</Button>
|
||||
)}
|
||||
{resourceSubscriptionsSupported &&
|
||||
resourceSubscriptions.has(selectedResource.uri) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
unsubscribeFromResource(selectedResource.uri)
|
||||
}
|
||||
>
|
||||
Unsubscribe
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => readResource(selectedResource.uri)}
|
||||
>
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Refresh
|
||||
</Button>
|
||||
<TabsContent value="resources">
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<ListPane
|
||||
items={resources}
|
||||
listItems={listResources}
|
||||
clearItems={clearResources}
|
||||
setSelectedItem={(resource) => {
|
||||
setSelectedResource(resource);
|
||||
readResource(resource.uri);
|
||||
setSelectedTemplate(null);
|
||||
}}
|
||||
renderItem={(resource) => (
|
||||
<div className="flex items-center w-full">
|
||||
<FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
|
||||
<span className="flex-1 truncate" title={resource.uri.toString()}>
|
||||
{resource.name}
|
||||
</span>
|
||||
<ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{error ? (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
) : selectedResource ? (
|
||||
<div className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 text-gray-900 dark:text-gray-100">
|
||||
<JsonView data={resourceContent} />
|
||||
title="Resources"
|
||||
buttonText={nextCursor ? "List More Resources" : "List Resources"}
|
||||
isButtonDisabled={!nextCursor && resources.length > 0}
|
||||
/>
|
||||
|
||||
<ListPane
|
||||
items={resourceTemplates}
|
||||
listItems={listResourceTemplates}
|
||||
clearItems={clearResourceTemplates}
|
||||
setSelectedItem={(template) => {
|
||||
setSelectedTemplate(template);
|
||||
setSelectedResource(null);
|
||||
setTemplateValues({});
|
||||
}}
|
||||
renderItem={(template) => (
|
||||
<div className="flex items-center w-full">
|
||||
<FileText className="w-4 h-4 mr-2 flex-shrink-0 text-gray-500" />
|
||||
<span className="flex-1 truncate" title={template.uriTemplate}>
|
||||
{template.name}
|
||||
</span>
|
||||
<ChevronRight className="w-4 h-4 flex-shrink-0 text-gray-400" />
|
||||
</div>
|
||||
) : selectedTemplate ? (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
{selectedTemplate.description}
|
||||
</p>
|
||||
{selectedTemplate.uriTemplate
|
||||
.match(/{([^}]+)}/g)
|
||||
?.map((param) => {
|
||||
const key = param.slice(1, -1);
|
||||
return (
|
||||
<div key={key}>
|
||||
<Label htmlFor={key}>{key}</Label>
|
||||
<Combobox
|
||||
id={key}
|
||||
placeholder={`Enter ${key}`}
|
||||
value={templateValues[key] || ""}
|
||||
onChange={(value) =>
|
||||
handleTemplateValueChange(key, value)
|
||||
}
|
||||
onInputChange={(value) =>
|
||||
handleTemplateValueChange(key, value)
|
||||
}
|
||||
options={completions[key] || []}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<Button
|
||||
onClick={handleReadTemplateResource}
|
||||
disabled={Object.keys(templateValues).length === 0}
|
||||
>
|
||||
Read Resource
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
Select a resource or template from the list to view its contents
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
title="Resource Templates"
|
||||
buttonText={
|
||||
nextTemplateCursor ? "List More Templates" : "List Templates"
|
||||
}
|
||||
isButtonDisabled={!nextTemplateCursor && resourceTemplates.length > 0}
|
||||
/>
|
||||
|
||||
<div className="bg-card rounded-lg shadow">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-800 flex justify-between items-center">
|
||||
<h3
|
||||
className="font-semibold truncate"
|
||||
title={selectedResource?.name || selectedTemplate?.name}
|
||||
>
|
||||
{selectedResource
|
||||
? selectedResource.name
|
||||
: selectedTemplate
|
||||
? selectedTemplate.name
|
||||
: "Select a resource or template"}
|
||||
</h3>
|
||||
{selectedResource && (
|
||||
<div className="flex row-auto gap-1 justify-end w-2/5">
|
||||
{resourceSubscriptionsSupported &&
|
||||
!resourceSubscriptions.has(selectedResource.uri) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => subscribeToResource(selectedResource.uri)}
|
||||
>
|
||||
Subscribe
|
||||
</Button>
|
||||
)}
|
||||
{resourceSubscriptionsSupported &&
|
||||
resourceSubscriptions.has(selectedResource.uri) && (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() =>
|
||||
unsubscribeFromResource(selectedResource.uri)
|
||||
}
|
||||
>
|
||||
Unsubscribe
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => readResource(selectedResource.uri)}
|
||||
>
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Refresh
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{error ? (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
) : selectedResource ? (
|
||||
<JsonView
|
||||
data={resourceContent}
|
||||
className="bg-gray-50 dark:bg-gray-800 p-4 rounded text-sm overflow-auto max-h-96 text-gray-900 dark:text-gray-100"
|
||||
/>
|
||||
) : selectedTemplate ? (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
{selectedTemplate.description}
|
||||
</p>
|
||||
{selectedTemplate.uriTemplate
|
||||
.match(/{([^}]+)}/g)
|
||||
?.map((param) => {
|
||||
const key = param.slice(1, -1);
|
||||
return (
|
||||
<div key={key}>
|
||||
<Label htmlFor={key}>{key}</Label>
|
||||
<Combobox
|
||||
id={key}
|
||||
placeholder={`Enter ${key}`}
|
||||
value={templateValues[key] || ""}
|
||||
onChange={(value) =>
|
||||
handleTemplateValueChange(key, value)
|
||||
}
|
||||
onInputChange={(value) =>
|
||||
handleTemplateValueChange(key, value)
|
||||
}
|
||||
options={completions[key] || []}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
<Button
|
||||
onClick={handleReadTemplateResource}
|
||||
disabled={Object.keys(templateValues).length === 0}
|
||||
>
|
||||
Read Resource
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
Select a resource or template from the list to view its
|
||||
contents
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
|
|
|||
|
|
@ -35,40 +35,42 @@ const RootsTab = ({
|
|||
};
|
||||
|
||||
return (
|
||||
<TabsContent value="roots" className="space-y-4">
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
Configure the root directories that the server can access
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<TabsContent value="roots">
|
||||
<div className="space-y-4">
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
Configure the root directories that the server can access
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
|
||||
{roots.map((root, index) => (
|
||||
<div key={index} className="flex gap-2 items-center">
|
||||
<Input
|
||||
placeholder="file:// URI"
|
||||
value={root.uri}
|
||||
onChange={(e) => updateRoot(index, "uri", e.target.value)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => removeRoot(index)}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
{roots.map((root, index) => (
|
||||
<div key={index} className="flex gap-2 items-center">
|
||||
<Input
|
||||
placeholder="file:// URI"
|
||||
value={root.uri}
|
||||
onChange={(e) => updateRoot(index, "uri", e.target.value)}
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => removeRoot(index)}
|
||||
>
|
||||
<Minus className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={addRoot}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Root
|
||||
</Button>
|
||||
<Button onClick={handleSave}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={addRoot}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Root
|
||||
</Button>
|
||||
<Button onClick={handleSave}>
|
||||
<Save className="h-4 w-4 mr-2" />
|
||||
Save Changes
|
||||
</Button>
|
||||
</div>
|
||||
</TabsContent>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -33,31 +33,37 @@ const SamplingTab = ({ pendingRequests, onApprove, onReject }: Props) => {
|
|||
};
|
||||
|
||||
return (
|
||||
<TabsContent value="sampling" className="h-96">
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
When the server requests LLM sampling, requests will appear here for
|
||||
approval.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<div className="mt-4 space-y-4">
|
||||
<h3 className="text-lg font-semibold">Recent Requests</h3>
|
||||
{pendingRequests.map((request) => (
|
||||
<div key={request.id} className="p-4 border rounded-lg space-y-4">
|
||||
<div className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 p-2 rounded">
|
||||
<JsonView data={JSON.stringify(request.request)} />
|
||||
<TabsContent value="sampling">
|
||||
<div className="h-96">
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
When the server requests LLM sampling, requests will appear here for
|
||||
approval.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
<div className="mt-4 space-y-4">
|
||||
<h3 className="text-lg font-semibold">Recent Requests</h3>
|
||||
{pendingRequests.map((request) => (
|
||||
<div key={request.id} className="p-4 border rounded-lg space-y-4">
|
||||
<JsonView
|
||||
className="bg-gray-50 dark:bg-gray-800 dark:text-gray-100 rounded"
|
||||
data={JSON.stringify(request.request)}
|
||||
/>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<Button onClick={() => handleApprove(request.id)}>
|
||||
Approve
|
||||
</Button>
|
||||
<Button variant="outline" onClick={() => onReject(request.id)}>
|
||||
Reject
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex space-x-2">
|
||||
<Button onClick={() => handleApprove(request.id)}>Approve</Button>
|
||||
<Button variant="outline" onClick={() => onReject(request.id)}>
|
||||
Reject
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
{pendingRequests.length === 0 && (
|
||||
<p className="text-gray-500">No pending requests</p>
|
||||
)}
|
||||
))}
|
||||
{pendingRequests.length === 0 && (
|
||||
<p className="text-gray-500">No pending requests</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -8,7 +8,10 @@ import {
|
|||
Github,
|
||||
Eye,
|
||||
EyeOff,
|
||||
RotateCcw,
|
||||
Settings,
|
||||
HelpCircle,
|
||||
RefreshCwOff,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
|
|
@ -25,12 +28,17 @@ import {
|
|||
LoggingLevelSchema,
|
||||
} from "@modelcontextprotocol/sdk/types.js";
|
||||
import { InspectorConfig } from "@/lib/configurationTypes";
|
||||
|
||||
import { ConnectionStatus } from "@/lib/constants";
|
||||
import useTheme from "../lib/useTheme";
|
||||
import { version } from "../../../package.json";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipTrigger,
|
||||
TooltipContent,
|
||||
} from "@/components/ui/tooltip";
|
||||
|
||||
interface SidebarProps {
|
||||
connectionStatus: "disconnected" | "connected" | "error";
|
||||
connectionStatus: ConnectionStatus;
|
||||
transportType: "stdio" | "sse";
|
||||
setTransportType: (type: "stdio" | "sse") => void;
|
||||
command: string;
|
||||
|
|
@ -44,6 +52,7 @@ interface SidebarProps {
|
|||
bearerToken: string;
|
||||
setBearerToken: (token: string) => void;
|
||||
onConnect: () => void;
|
||||
onDisconnect: () => void;
|
||||
stdErrNotifications: StdErrNotification[];
|
||||
logLevel: LoggingLevel;
|
||||
sendLogLevelRequest: (level: LoggingLevel) => void;
|
||||
|
|
@ -67,6 +76,7 @@ const Sidebar = ({
|
|||
bearerToken,
|
||||
setBearerToken,
|
||||
onConnect,
|
||||
onDisconnect,
|
||||
stdErrNotifications,
|
||||
logLevel,
|
||||
sendLogLevelRequest,
|
||||
|
|
@ -82,7 +92,7 @@ const Sidebar = ({
|
|||
|
||||
return (
|
||||
<div className="w-80 bg-card border-r border-border flex flex-col h-full">
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200">
|
||||
<div className="flex items-center justify-between p-4 border-b border-gray-200 dark:border-gray-800">
|
||||
<div className="flex items-center">
|
||||
<h1 className="ml-2 text-lg font-semibold">
|
||||
MCP Inspector v{version}
|
||||
|
|
@ -93,14 +103,19 @@ const Sidebar = ({
|
|||
<div className="p-4 flex-1 overflow-auto">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Transport Type</label>
|
||||
<label
|
||||
className="text-sm font-medium"
|
||||
htmlFor="transport-type-select"
|
||||
>
|
||||
Transport Type
|
||||
</label>
|
||||
<Select
|
||||
value={transportType}
|
||||
onValueChange={(value: "stdio" | "sse") =>
|
||||
setTransportType(value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectTrigger id="transport-type-select">
|
||||
<SelectValue placeholder="Select transport type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -113,8 +128,11 @@ const Sidebar = ({
|
|||
{transportType === "stdio" ? (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Command</label>
|
||||
<label className="text-sm font-medium" htmlFor="command-input">
|
||||
Command
|
||||
</label>
|
||||
<Input
|
||||
id="command-input"
|
||||
placeholder="Command"
|
||||
value={command}
|
||||
onChange={(e) => setCommand(e.target.value)}
|
||||
|
|
@ -122,8 +140,14 @@ const Sidebar = ({
|
|||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Arguments</label>
|
||||
<label
|
||||
className="text-sm font-medium"
|
||||
htmlFor="arguments-input"
|
||||
>
|
||||
Arguments
|
||||
</label>
|
||||
<Input
|
||||
id="arguments-input"
|
||||
placeholder="Arguments (space-separated)"
|
||||
value={args}
|
||||
onChange={(e) => setArgs(e.target.value)}
|
||||
|
|
@ -134,8 +158,11 @@ const Sidebar = ({
|
|||
) : (
|
||||
<>
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">URL</label>
|
||||
<label className="text-sm font-medium" htmlFor="sse-url-input">
|
||||
URL
|
||||
</label>
|
||||
<Input
|
||||
id="sse-url-input"
|
||||
placeholder="URL"
|
||||
value={sseUrl}
|
||||
onChange={(e) => setSseUrl(e.target.value)}
|
||||
|
|
@ -147,6 +174,7 @@ const Sidebar = ({
|
|||
variant="outline"
|
||||
onClick={() => setShowBearerToken(!showBearerToken)}
|
||||
className="flex items-center w-full"
|
||||
aria-expanded={showBearerToken}
|
||||
>
|
||||
{showBearerToken ? (
|
||||
<ChevronDown className="w-4 h-4 mr-2" />
|
||||
|
|
@ -157,8 +185,14 @@ const Sidebar = ({
|
|||
</Button>
|
||||
{showBearerToken && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Bearer Token</label>
|
||||
<label
|
||||
className="text-sm font-medium"
|
||||
htmlFor="bearer-token-input"
|
||||
>
|
||||
Bearer Token
|
||||
</label>
|
||||
<Input
|
||||
id="bearer-token-input"
|
||||
placeholder="Bearer Token"
|
||||
value={bearerToken}
|
||||
onChange={(e) => setBearerToken(e.target.value)}
|
||||
|
|
@ -176,6 +210,8 @@ const Sidebar = ({
|
|||
variant="outline"
|
||||
onClick={() => setShowEnvVars(!showEnvVars)}
|
||||
className="flex items-center w-full"
|
||||
data-testid="env-vars-button"
|
||||
aria-expanded={showEnvVars}
|
||||
>
|
||||
{showEnvVars ? (
|
||||
<ChevronDown className="w-4 h-4 mr-2" />
|
||||
|
|
@ -190,6 +226,7 @@ const Sidebar = ({
|
|||
<div key={idx} className="space-y-2 pb-4">
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
aria-label={`Environment variable key ${idx + 1}`}
|
||||
placeholder="Key"
|
||||
value={key}
|
||||
onChange={(e) => {
|
||||
|
|
@ -232,6 +269,7 @@ const Sidebar = ({
|
|||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
aria-label={`Environment variable value ${idx + 1}`}
|
||||
type={shownEnvVars.has(key) ? "text" : "password"}
|
||||
placeholder="Value"
|
||||
value={value}
|
||||
|
|
@ -297,6 +335,8 @@ const Sidebar = ({
|
|||
variant="outline"
|
||||
onClick={() => setShowConfig(!showConfig)}
|
||||
className="flex items-center w-full"
|
||||
data-testid="config-button"
|
||||
aria-expanded={showConfig}
|
||||
>
|
||||
{showConfig ? (
|
||||
<ChevronDown className="w-4 h-4 mr-2" />
|
||||
|
|
@ -312,11 +352,25 @@ const Sidebar = ({
|
|||
const configKey = key as keyof InspectorConfig;
|
||||
return (
|
||||
<div key={key} className="space-y-2">
|
||||
<label className="text-sm font-medium">
|
||||
{configItem.description}
|
||||
</label>
|
||||
<div className="flex items-center gap-1">
|
||||
<label
|
||||
className="text-sm font-medium text-green-600 break-all"
|
||||
htmlFor={`${configKey}-input`}
|
||||
>
|
||||
{configItem.label}
|
||||
</label>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<HelpCircle className="h-4 w-4 text-muted-foreground" />
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
{configItem.description}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</div>
|
||||
{typeof configItem.value === "number" ? (
|
||||
<Input
|
||||
id={`${configKey}-input`}
|
||||
type="number"
|
||||
data-testid={`${configKey}-input`}
|
||||
value={configItem.value}
|
||||
|
|
@ -343,7 +397,7 @@ const Sidebar = ({
|
|||
setConfig(newConfig);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectTrigger id={`${configKey}-input`}>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
@ -353,6 +407,7 @@ const Sidebar = ({
|
|||
</Select>
|
||||
) : (
|
||||
<Input
|
||||
id={`${configKey}-input`}
|
||||
data-testid={`${configKey}-input`}
|
||||
value={configItem.value}
|
||||
onChange={(e) => {
|
||||
|
|
@ -374,40 +429,77 @@ const Sidebar = ({
|
|||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Button className="w-full" onClick={onConnect}>
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
Connect
|
||||
</Button>
|
||||
{connectionStatus === "connected" && (
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Button
|
||||
data-testid="connect-button"
|
||||
onClick={() => {
|
||||
onDisconnect();
|
||||
onConnect();
|
||||
}}
|
||||
>
|
||||
<RotateCcw className="w-4 h-4 mr-2" />
|
||||
{transportType === "stdio" ? "Restart" : "Reconnect"}
|
||||
</Button>
|
||||
<Button onClick={onDisconnect}>
|
||||
<RefreshCwOff className="w-4 h-4 mr-2" />
|
||||
Disconnect
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{connectionStatus !== "connected" && (
|
||||
<Button className="w-full" onClick={onConnect}>
|
||||
<Play className="w-4 h-4 mr-2" />
|
||||
Connect
|
||||
</Button>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-center space-x-2 mb-4">
|
||||
<div
|
||||
className={`w-2 h-2 rounded-full ${
|
||||
connectionStatus === "connected"
|
||||
? "bg-green-500"
|
||||
: connectionStatus === "error"
|
||||
? "bg-red-500"
|
||||
: "bg-gray-500"
|
||||
}`}
|
||||
className={`w-2 h-2 rounded-full ${(() => {
|
||||
switch (connectionStatus) {
|
||||
case "connected":
|
||||
return "bg-green-500";
|
||||
case "error":
|
||||
return "bg-red-500";
|
||||
case "error-connecting-to-proxy":
|
||||
return "bg-red-500";
|
||||
default:
|
||||
return "bg-gray-500";
|
||||
}
|
||||
})()}`}
|
||||
/>
|
||||
<span className="text-sm text-gray-600">
|
||||
{connectionStatus === "connected"
|
||||
? "Connected"
|
||||
: connectionStatus === "error"
|
||||
? "Connection Error"
|
||||
: "Disconnected"}
|
||||
{(() => {
|
||||
switch (connectionStatus) {
|
||||
case "connected":
|
||||
return "Connected";
|
||||
case "error":
|
||||
return "Connection Error, is your MCP server running?";
|
||||
case "error-connecting-to-proxy":
|
||||
return "Error Connecting to MCP Inspector Proxy - Check Console logs";
|
||||
default:
|
||||
return "Disconnected";
|
||||
}
|
||||
})()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{loggingSupported && connectionStatus === "connected" && (
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Logging Level</label>
|
||||
<label
|
||||
className="text-sm font-medium"
|
||||
htmlFor="logging-level-select"
|
||||
>
|
||||
Logging Level
|
||||
</label>
|
||||
<Select
|
||||
value={logLevel}
|
||||
onValueChange={(value: LoggingLevel) =>
|
||||
sendLogLevelRequest(value)
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectTrigger id="logging-level-select">
|
||||
<SelectValue placeholder="Select logging level" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
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";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { TabsContent } from "@/components/ui/tabs";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import DynamicJsonForm, { JsonSchemaType, JsonValue } from "./DynamicJsonForm";
|
||||
import DynamicJsonForm from "./DynamicJsonForm";
|
||||
import type { JsonValue, JsonSchemaType } from "@/utils/jsonUtils";
|
||||
import { generateDefaultValue } from "@/utils/schemaUtils";
|
||||
import {
|
||||
CallToolResultSchema,
|
||||
|
|
@ -13,7 +14,7 @@ import {
|
|||
ListToolsResult,
|
||||
Tool,
|
||||
} from "@modelcontextprotocol/sdk/types.js";
|
||||
import { AlertCircle, Send } from "lucide-react";
|
||||
import { Loader2, Send } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import ListPane from "./ListPane";
|
||||
import JsonView from "./JsonView";
|
||||
|
|
@ -27,12 +28,11 @@ const ToolsTab = ({
|
|||
setSelectedTool,
|
||||
toolResult,
|
||||
nextCursor,
|
||||
error,
|
||||
}: {
|
||||
tools: Tool[];
|
||||
listTools: () => void;
|
||||
clearTools: () => void;
|
||||
callTool: (name: string, params: Record<string, unknown>) => void;
|
||||
callTool: (name: string, params: Record<string, unknown>) => Promise<void>;
|
||||
selectedTool: Tool | null;
|
||||
setSelectedTool: (tool: Tool | null) => void;
|
||||
toolResult: CompatibilityCallToolResult | null;
|
||||
|
|
@ -40,6 +40,8 @@ const ToolsTab = ({
|
|||
error: string | null;
|
||||
}) => {
|
||||
const [params, setParams] = useState<Record<string, unknown>>({});
|
||||
const [isToolRunning, setIsToolRunning] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setParams({});
|
||||
}, [selectedTool]);
|
||||
|
|
@ -53,14 +55,10 @@ const ToolsTab = ({
|
|||
return (
|
||||
<>
|
||||
<h4 className="font-semibold mb-2">Invalid Tool Result:</h4>
|
||||
<div className="p-4 border rounded">
|
||||
<JsonView data={toolResult} />
|
||||
</div>
|
||||
<JsonView data={toolResult} />
|
||||
<h4 className="font-semibold mb-2">Errors:</h4>
|
||||
{parsedResult.error.errors.map((error, idx) => (
|
||||
<div key={idx} className="p-4 border rounded">
|
||||
<JsonView data={error} />
|
||||
</div>
|
||||
<JsonView data={error} key={idx} />
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
|
@ -71,14 +69,17 @@ const ToolsTab = ({
|
|||
return (
|
||||
<>
|
||||
<h4 className="font-semibold mb-2">
|
||||
Tool Result: {isError ? "Error" : "Success"}
|
||||
Tool Result:{" "}
|
||||
{isError ? (
|
||||
<span className="text-red-600 font-semibold">Error</span>
|
||||
) : (
|
||||
<span className="text-green-600 font-semibold">Success</span>
|
||||
)}
|
||||
</h4>
|
||||
{structuredResult.content.map((item, index) => (
|
||||
<div key={index} className="mb-2">
|
||||
{item.type === "text" && (
|
||||
<div className="p-4 border rounded">
|
||||
<JsonView data={item.text} />
|
||||
</div>
|
||||
<JsonView data={item.text} isError={isError} />
|
||||
)}
|
||||
{item.type === "image" && (
|
||||
<img
|
||||
|
|
@ -97,9 +98,7 @@ const ToolsTab = ({
|
|||
<p>Your browser does not support audio playback</p>
|
||||
</audio>
|
||||
) : (
|
||||
<div className="p-4 border rounded">
|
||||
<JsonView data={item.resource} />
|
||||
</div>
|
||||
<JsonView data={item.resource} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
|
|
@ -109,157 +108,176 @@ const ToolsTab = ({
|
|||
return (
|
||||
<>
|
||||
<h4 className="font-semibold mb-2">Tool Result (Legacy):</h4>
|
||||
<div className="p-4 border rounded">
|
||||
<JsonView data={toolResult.toolResult} />
|
||||
</div>
|
||||
|
||||
<JsonView data={toolResult.toolResult} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<TabsContent value="tools" className="grid grid-cols-2 gap-4">
|
||||
<ListPane
|
||||
items={tools}
|
||||
listItems={listTools}
|
||||
clearItems={() => {
|
||||
clearTools();
|
||||
setSelectedTool(null);
|
||||
}}
|
||||
setSelectedItem={setSelectedTool}
|
||||
renderItem={(tool) => (
|
||||
<>
|
||||
<span className="flex-1">{tool.name}</span>
|
||||
<span className="text-sm text-gray-500 text-right">
|
||||
{tool.description}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
title="Tools"
|
||||
buttonText={nextCursor ? "List More Tools" : "List Tools"}
|
||||
isButtonDisabled={!nextCursor && tools.length > 0}
|
||||
/>
|
||||
<TabsContent value="tools">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<ListPane
|
||||
items={tools}
|
||||
listItems={listTools}
|
||||
clearItems={() => {
|
||||
clearTools();
|
||||
setSelectedTool(null);
|
||||
}}
|
||||
setSelectedItem={setSelectedTool}
|
||||
renderItem={(tool) => (
|
||||
<>
|
||||
<span className="flex-1">{tool.name}</span>
|
||||
<span className="text-sm text-gray-500 text-right">
|
||||
{tool.description}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
title="Tools"
|
||||
buttonText={nextCursor ? "List More Tools" : "List Tools"}
|
||||
isButtonDisabled={!nextCursor && tools.length > 0}
|
||||
/>
|
||||
|
||||
<div className="bg-card rounded-lg shadow">
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<h3 className="font-semibold">
|
||||
{selectedTool ? selectedTool.name : "Select a tool"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{error ? (
|
||||
<Alert variant="destructive">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Error</AlertTitle>
|
||||
<AlertDescription>{error}</AlertDescription>
|
||||
</Alert>
|
||||
) : selectedTool ? (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
{selectedTool.description}
|
||||
</p>
|
||||
{Object.entries(selectedTool.inputSchema.properties ?? []).map(
|
||||
([key, value]) => {
|
||||
const prop = value as JsonSchemaType;
|
||||
return (
|
||||
<div key={key}>
|
||||
<Label
|
||||
htmlFor={key}
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
{key}
|
||||
</Label>
|
||||
{prop.type === "boolean" ? (
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
<Checkbox
|
||||
<div className="bg-card rounded-lg shadow">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-800">
|
||||
<h3 className="font-semibold">
|
||||
{selectedTool ? selectedTool.name : "Select a tool"}
|
||||
</h3>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{selectedTool ? (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
{selectedTool.description}
|
||||
</p>
|
||||
{Object.entries(selectedTool.inputSchema.properties ?? []).map(
|
||||
([key, value]) => {
|
||||
const prop = value as JsonSchemaType;
|
||||
return (
|
||||
<div key={key}>
|
||||
<Label
|
||||
htmlFor={key}
|
||||
className="block text-sm font-medium text-gray-700"
|
||||
>
|
||||
{key}
|
||||
</Label>
|
||||
{prop.type === "boolean" ? (
|
||||
<div className="flex items-center space-x-2 mt-2">
|
||||
<Checkbox
|
||||
id={key}
|
||||
name={key}
|
||||
checked={!!params[key]}
|
||||
onCheckedChange={(checked: boolean) =>
|
||||
setParams({
|
||||
...params,
|
||||
[key]: checked,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<label
|
||||
htmlFor={key}
|
||||
className="text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
{prop.description || "Toggle this option"}
|
||||
</label>
|
||||
</div>
|
||||
) : prop.type === "string" ? (
|
||||
<Textarea
|
||||
id={key}
|
||||
name={key}
|
||||
checked={!!params[key]}
|
||||
onCheckedChange={(checked: boolean) =>
|
||||
placeholder={prop.description}
|
||||
value={(params[key] as string) ?? ""}
|
||||
onChange={(e) =>
|
||||
setParams({
|
||||
...params,
|
||||
[key]: checked,
|
||||
[key]: e.target.value,
|
||||
})
|
||||
}
|
||||
className="mt-1"
|
||||
/>
|
||||
<label
|
||||
htmlFor={key}
|
||||
className="text-sm font-medium text-gray-700 dark:text-gray-300"
|
||||
>
|
||||
{prop.description || "Toggle this option"}
|
||||
</label>
|
||||
</div>
|
||||
) : prop.type === "string" ? (
|
||||
<Textarea
|
||||
id={key}
|
||||
name={key}
|
||||
placeholder={prop.description}
|
||||
value={(params[key] as string) ?? ""}
|
||||
onChange={(e) =>
|
||||
setParams({
|
||||
...params,
|
||||
[key]: e.target.value,
|
||||
})
|
||||
}
|
||||
className="mt-1"
|
||||
/>
|
||||
) : prop.type === "object" || prop.type === "array" ? (
|
||||
<div className="mt-1">
|
||||
<DynamicJsonForm
|
||||
schema={{
|
||||
type: prop.type,
|
||||
properties: prop.properties,
|
||||
description: prop.description,
|
||||
items: prop.items,
|
||||
}}
|
||||
value={
|
||||
(params[key] as JsonValue) ??
|
||||
generateDefaultValue(prop)
|
||||
) : prop.type === "object" || prop.type === "array" ? (
|
||||
<div className="mt-1">
|
||||
<DynamicJsonForm
|
||||
schema={{
|
||||
type: prop.type,
|
||||
properties: prop.properties,
|
||||
description: prop.description,
|
||||
items: prop.items,
|
||||
}}
|
||||
value={
|
||||
(params[key] as JsonValue) ??
|
||||
generateDefaultValue(prop)
|
||||
}
|
||||
onChange={(newValue: JsonValue) => {
|
||||
setParams({
|
||||
...params,
|
||||
[key]: newValue,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Input
|
||||
type={
|
||||
prop.type === "number" || prop.type === "integer"
|
||||
? "number"
|
||||
: "text"
|
||||
}
|
||||
onChange={(newValue: JsonValue) => {
|
||||
id={key}
|
||||
name={key}
|
||||
placeholder={prop.description}
|
||||
value={(params[key] as string) ?? ""}
|
||||
onChange={(e) =>
|
||||
setParams({
|
||||
...params,
|
||||
[key]: newValue,
|
||||
});
|
||||
}}
|
||||
[key]:
|
||||
prop.type === "number" ||
|
||||
prop.type === "integer"
|
||||
? Number(e.target.value)
|
||||
: e.target.value,
|
||||
})
|
||||
}
|
||||
className="mt-1"
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<Input
|
||||
type={prop.type === "number" ? "number" : "text"}
|
||||
id={key}
|
||||
name={key}
|
||||
placeholder={prop.description}
|
||||
value={(params[key] as string) ?? ""}
|
||||
onChange={(e) =>
|
||||
setParams({
|
||||
...params,
|
||||
[key]:
|
||||
prop.type === "number"
|
||||
? Number(e.target.value)
|
||||
: e.target.value,
|
||||
})
|
||||
}
|
||||
className="mt-1"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
)}
|
||||
<Button onClick={() => callTool(selectedTool.name, params)}>
|
||||
<Send className="w-4 h-4 mr-2" />
|
||||
Run Tool
|
||||
</Button>
|
||||
{toolResult && renderToolResult()}
|
||||
</div>
|
||||
) : (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
Select a tool from the list to view its details and run it
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
},
|
||||
)}
|
||||
<Button
|
||||
onClick={async () => {
|
||||
try {
|
||||
setIsToolRunning(true);
|
||||
await callTool(selectedTool.name, params);
|
||||
} finally {
|
||||
setIsToolRunning(false);
|
||||
}
|
||||
}}
|
||||
disabled={isToolRunning}
|
||||
>
|
||||
{isToolRunning ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Running...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Send className="w-4 h-4 mr-2" />
|
||||
Run Tool
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
{toolResult && renderToolResult()}
|
||||
</div>
|
||||
) : (
|
||||
<Alert>
|
||||
<AlertDescription>
|
||||
Select a tool from the list to view its details and run it
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import { describe, it, expect, jest } from "@jest/globals";
|
||||
import DynamicJsonForm from "../DynamicJsonForm";
|
||||
import type { JsonSchemaType } from "../DynamicJsonForm";
|
||||
import type { JsonSchemaType } from "@/utils/jsonUtils";
|
||||
|
||||
describe("DynamicJsonForm String Fields", () => {
|
||||
const renderForm = (props = {}) => {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import { describe, it, beforeEach, jest } from "@jest/globals";
|
||||
import Sidebar from "../Sidebar";
|
||||
import { DEFAULT_INSPECTOR_CONFIG } from "../../lib/constants";
|
||||
import { InspectorConfig } from "../../lib/configurationTypes";
|
||||
import { DEFAULT_INSPECTOR_CONFIG } from "@/lib/constants";
|
||||
import { InspectorConfig } from "@/lib/configurationTypes";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
|
||||
// Mock theme hook
|
||||
jest.mock("../../lib/useTheme", () => ({
|
||||
|
|
@ -26,6 +27,7 @@ describe("Sidebar Environment Variables", () => {
|
|||
bearerToken: "",
|
||||
setBearerToken: jest.fn(),
|
||||
onConnect: jest.fn(),
|
||||
onDisconnect: jest.fn(),
|
||||
stdErrNotifications: [],
|
||||
logLevel: "info" as const,
|
||||
sendLogLevelRequest: jest.fn(),
|
||||
|
|
@ -35,11 +37,15 @@ describe("Sidebar Environment Variables", () => {
|
|||
};
|
||||
|
||||
const renderSidebar = (props = {}) => {
|
||||
return render(<Sidebar {...defaultProps} {...props} />);
|
||||
return render(
|
||||
<TooltipProvider>
|
||||
<Sidebar {...defaultProps} {...props} />
|
||||
</TooltipProvider>,
|
||||
);
|
||||
};
|
||||
|
||||
const openEnvVarsSection = () => {
|
||||
const button = screen.getByText("Environment Variables");
|
||||
const button = screen.getByTestId("env-vars-button");
|
||||
fireEvent.click(button);
|
||||
};
|
||||
|
||||
|
|
@ -215,7 +221,11 @@ describe("Sidebar Environment Variables", () => {
|
|||
const updatedEnv = setEnv.mock.calls[0][0] as Record<string, string>;
|
||||
|
||||
// Rerender with the updated env
|
||||
rerender(<Sidebar {...defaultProps} env={updatedEnv} setEnv={setEnv} />);
|
||||
rerender(
|
||||
<TooltipProvider>
|
||||
<Sidebar {...defaultProps} env={updatedEnv} setEnv={setEnv} />
|
||||
</TooltipProvider>,
|
||||
);
|
||||
|
||||
// Second key edit
|
||||
const secondKeyInput = screen.getByDisplayValue("SECOND_KEY");
|
||||
|
|
@ -246,7 +256,11 @@ describe("Sidebar Environment Variables", () => {
|
|||
fireEvent.change(keyInput, { target: { value: "NEW_KEY" } });
|
||||
|
||||
// Rerender with updated env
|
||||
rerender(<Sidebar {...defaultProps} env={{ NEW_KEY: "test_value" }} />);
|
||||
rerender(
|
||||
<TooltipProvider>
|
||||
<Sidebar {...defaultProps} env={{ NEW_KEY: "test_value" }} />
|
||||
</TooltipProvider>,
|
||||
);
|
||||
|
||||
// Value should still be visible
|
||||
const updatedValueInput = screen.getByDisplayValue("test_value");
|
||||
|
|
@ -311,7 +325,7 @@ describe("Sidebar Environment Variables", () => {
|
|||
|
||||
describe("Configuration Operations", () => {
|
||||
const openConfigSection = () => {
|
||||
const button = screen.getByText("Configuration");
|
||||
const button = screen.getByTestId("config-button");
|
||||
fireEvent.click(button);
|
||||
};
|
||||
|
||||
|
|
@ -326,12 +340,65 @@ describe("Sidebar Environment Variables", () => {
|
|||
);
|
||||
fireEvent.change(timeoutInput, { target: { value: "5000" } });
|
||||
|
||||
expect(setConfig).toHaveBeenCalledWith({
|
||||
MCP_SERVER_REQUEST_TIMEOUT: {
|
||||
description: "Timeout for requests to the MCP server (ms)",
|
||||
value: 5000,
|
||||
},
|
||||
expect(setConfig).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
MCP_SERVER_REQUEST_TIMEOUT: {
|
||||
label: "Request Timeout",
|
||||
description: "Timeout for requests to the MCP server (ms)",
|
||||
value: 5000,
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it("should update MCP server proxy address", () => {
|
||||
const setConfig = jest.fn();
|
||||
renderSidebar({ config: DEFAULT_INSPECTOR_CONFIG, setConfig });
|
||||
|
||||
openConfigSection();
|
||||
|
||||
const proxyAddressInput = screen.getByTestId(
|
||||
"MCP_PROXY_FULL_ADDRESS-input",
|
||||
);
|
||||
fireEvent.change(proxyAddressInput, {
|
||||
target: { value: "http://localhost:8080" },
|
||||
});
|
||||
|
||||
expect(setConfig).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
MCP_PROXY_FULL_ADDRESS: {
|
||||
label: "Inspector Proxy Address",
|
||||
description:
|
||||
"Set this if you are running the MCP Inspector Proxy on a non-default address. Example: http://10.1.1.22:5577",
|
||||
value: "http://localhost:8080",
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it("should update max total timeout", () => {
|
||||
const setConfig = jest.fn();
|
||||
renderSidebar({ config: DEFAULT_INSPECTOR_CONFIG, setConfig });
|
||||
|
||||
openConfigSection();
|
||||
|
||||
const maxTotalTimeoutInput = screen.getByTestId(
|
||||
"MCP_REQUEST_MAX_TOTAL_TIMEOUT-input",
|
||||
);
|
||||
fireEvent.change(maxTotalTimeoutInput, {
|
||||
target: { value: "10000" },
|
||||
});
|
||||
|
||||
expect(setConfig).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
MCP_REQUEST_MAX_TOTAL_TIMEOUT: {
|
||||
label: "Maximum Total Timeout",
|
||||
description:
|
||||
"Maximum total timeout for requests sent to the MCP server (ms) (Use with progress notifications)",
|
||||
value: 10000,
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it("should handle invalid timeout values entered by user", () => {
|
||||
|
|
@ -345,12 +412,15 @@ describe("Sidebar Environment Variables", () => {
|
|||
);
|
||||
fireEvent.change(timeoutInput, { target: { value: "abc1" } });
|
||||
|
||||
expect(setConfig).toHaveBeenCalledWith({
|
||||
MCP_SERVER_REQUEST_TIMEOUT: {
|
||||
description: "Timeout for requests to the MCP server (ms)",
|
||||
value: 0,
|
||||
},
|
||||
});
|
||||
expect(setConfig).toHaveBeenCalledWith(
|
||||
expect.objectContaining({
|
||||
MCP_SERVER_REQUEST_TIMEOUT: {
|
||||
label: "Request Timeout",
|
||||
description: "Timeout for requests to the MCP server (ms)",
|
||||
value: 0,
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
it("should maintain configuration state after multiple updates", () => {
|
||||
|
|
@ -361,7 +431,6 @@ describe("Sidebar Environment Variables", () => {
|
|||
});
|
||||
|
||||
openConfigSection();
|
||||
|
||||
// First update
|
||||
const timeoutInput = screen.getByTestId(
|
||||
"MCP_SERVER_REQUEST_TIMEOUT-input",
|
||||
|
|
@ -373,11 +442,13 @@ describe("Sidebar Environment Variables", () => {
|
|||
|
||||
// Rerender with the updated config
|
||||
rerender(
|
||||
<Sidebar
|
||||
{...defaultProps}
|
||||
config={updatedConfig}
|
||||
setConfig={setConfig}
|
||||
/>,
|
||||
<TooltipProvider>
|
||||
<Sidebar
|
||||
{...defaultProps}
|
||||
config={updatedConfig}
|
||||
setConfig={setConfig}
|
||||
/>
|
||||
</TooltipProvider>,
|
||||
);
|
||||
|
||||
// Second update
|
||||
|
|
@ -387,12 +458,15 @@ describe("Sidebar Environment Variables", () => {
|
|||
fireEvent.change(updatedTimeoutInput, { target: { value: "3000" } });
|
||||
|
||||
// Verify the final state matches what we expect
|
||||
expect(setConfig).toHaveBeenLastCalledWith({
|
||||
MCP_SERVER_REQUEST_TIMEOUT: {
|
||||
description: "Timeout for requests to the MCP server (ms)",
|
||||
value: 3000,
|
||||
},
|
||||
});
|
||||
expect(setConfig).toHaveBeenLastCalledWith(
|
||||
expect.objectContaining({
|
||||
MCP_SERVER_REQUEST_TIMEOUT: {
|
||||
label: "Request Timeout",
|
||||
description: "Timeout for requests to the MCP server (ms)",
|
||||
value: 3000,
|
||||
},
|
||||
}),
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import { render, screen, fireEvent, act } 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";
|
||||
|
|
@ -16,6 +17,16 @@ describe("ToolsTab", () => {
|
|||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "tool3",
|
||||
description: "Integer tool",
|
||||
inputSchema: {
|
||||
type: "object" as const,
|
||||
properties: {
|
||||
count: { type: "integer" as const },
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "tool2",
|
||||
description: "Second tool",
|
||||
|
|
@ -32,7 +43,7 @@ describe("ToolsTab", () => {
|
|||
tools: mockTools,
|
||||
listTools: jest.fn(),
|
||||
clearTools: jest.fn(),
|
||||
callTool: jest.fn(),
|
||||
callTool: jest.fn(async () => {}),
|
||||
selectedTool: null,
|
||||
setSelectedTool: jest.fn(),
|
||||
toolResult: null,
|
||||
|
|
@ -48,20 +59,22 @@ describe("ToolsTab", () => {
|
|||
);
|
||||
};
|
||||
|
||||
it("should reset input values when switching tools", () => {
|
||||
it("should reset input values when switching tools", async () => {
|
||||
const { rerender } = renderToolsTab({
|
||||
selectedTool: mockTools[0],
|
||||
});
|
||||
|
||||
// Enter a value in the first tool's input
|
||||
const input = screen.getByRole("spinbutton") as HTMLInputElement;
|
||||
fireEvent.change(input, { target: { value: "42" } });
|
||||
await act(async () => {
|
||||
fireEvent.change(input, { target: { value: "42" } });
|
||||
});
|
||||
expect(input.value).toBe("42");
|
||||
|
||||
// Switch to second tool
|
||||
rerender(
|
||||
<Tabs defaultValue="tools">
|
||||
<ToolsTab {...defaultProps} selectedTool={mockTools[1]} />
|
||||
<ToolsTab {...defaultProps} selectedTool={mockTools[2]} />
|
||||
</Tabs>,
|
||||
);
|
||||
|
||||
|
|
@ -69,4 +82,63 @@ describe("ToolsTab", () => {
|
|||
const newInput = screen.getByRole("spinbutton") as HTMLInputElement;
|
||||
expect(newInput.value).toBe("");
|
||||
});
|
||||
|
||||
it("should handle integer type inputs", async () => {
|
||||
renderToolsTab({
|
||||
selectedTool: mockTools[1], // Use the tool with integer type
|
||||
});
|
||||
|
||||
const input = screen.getByRole("spinbutton", {
|
||||
name: /count/i,
|
||||
}) as HTMLInputElement;
|
||||
expect(input).toHaveProperty("type", "number");
|
||||
fireEvent.change(input, { target: { value: "42" } });
|
||||
expect(input.value).toBe("42");
|
||||
|
||||
const submitButton = screen.getByRole("button", { name: /run tool/i });
|
||||
await act(async () => {
|
||||
fireEvent.click(submitButton);
|
||||
});
|
||||
|
||||
expect(defaultProps.callTool).toHaveBeenCalledWith(mockTools[1].name, {
|
||||
count: 42,
|
||||
});
|
||||
});
|
||||
|
||||
it("should disable button and change text while tool is running", async () => {
|
||||
// Create a promise that we can resolve later
|
||||
let resolvePromise: ((value: unknown) => void) | undefined;
|
||||
const mockPromise = new Promise((resolve) => {
|
||||
resolvePromise = resolve;
|
||||
});
|
||||
|
||||
// Mock callTool to return our promise
|
||||
const mockCallTool = jest.fn().mockReturnValue(mockPromise);
|
||||
|
||||
renderToolsTab({
|
||||
selectedTool: mockTools[0],
|
||||
callTool: mockCallTool,
|
||||
});
|
||||
|
||||
const submitButton = screen.getByRole("button", { name: /run tool/i });
|
||||
expect(submitButton.getAttribute("disabled")).toBeNull();
|
||||
|
||||
// Click the button and verify immediate state changes
|
||||
await act(async () => {
|
||||
fireEvent.click(submitButton);
|
||||
});
|
||||
|
||||
// Verify button is disabled and text changed
|
||||
expect(submitButton.getAttribute("disabled")).not.toBeNull();
|
||||
expect(submitButton.textContent).toBe("Running...");
|
||||
|
||||
// Resolve the promise to simulate tool completion
|
||||
await act(async () => {
|
||||
if (resolvePromise) {
|
||||
await resolvePromise({});
|
||||
}
|
||||
});
|
||||
|
||||
expect(submitButton.getAttribute("disabled")).toBeNull();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue