Merge branch 'main' into completion-support-default
This commit is contained in:
Ola Hungerford
GitHub
commit
e106194b40
41 changed files with 5383 additions and 929 deletions
|
|
@ -1,5 +1,6 @@
|
|||
#!/usr/bin/env node
|
||||
|
||||
import open from "open";
|
||||
import { join, dirname } from "path";
|
||||
import { fileURLToPath } from "url";
|
||||
import handler from "serve-handler";
|
||||
|
|
@ -39,19 +40,23 @@ const server = http.createServer((request, response) => {
|
|||
return handler(request, response, handlerOptions);
|
||||
});
|
||||
|
||||
const port = process.env.PORT || 6274;
|
||||
const port = parseInt(process.env.CLIENT_PORT || "6274", 10);
|
||||
const host = process.env.HOST || "localhost";
|
||||
server.on("listening", () => {
|
||||
console.log(
|
||||
`🔍 MCP Inspector is up and running at http://127.0.0.1:${port} 🚀`,
|
||||
);
|
||||
const url = process.env.INSPECTOR_URL || `http://${host}:${port}`;
|
||||
console.log(`\n🚀 MCP Inspector is up and running at:\n ${url}\n`);
|
||||
if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
|
||||
console.log(`🌐 Opening browser...`);
|
||||
open(url);
|
||||
}
|
||||
});
|
||||
server.on("error", (err) => {
|
||||
if (err.message.includes(`EADDRINUSE`)) {
|
||||
console.error(
|
||||
`❌ MCP Inspector PORT IS IN USE at http://127.0.0.1:${port} ❌ `,
|
||||
`❌ MCP Inspector PORT IS IN USE at http://${host}:${port} ❌ `,
|
||||
);
|
||||
} else {
|
||||
throw err;
|
||||
}
|
||||
});
|
||||
server.listen(port);
|
||||
server.listen(port, host);
|
||||
|
|
|
|||
|
|
@ -2,15 +2,202 @@
|
|||
|
||||
import open from "open";
|
||||
import { resolve, dirname } from "path";
|
||||
import { spawnPromise } from "spawn-rx";
|
||||
import { spawnPromise, spawn } from "spawn-rx";
|
||||
import { fileURLToPath } from "url";
|
||||
import { randomBytes } from "crypto";
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
const DEFAULT_MCP_PROXY_LISTEN_PORT = "6277";
|
||||
|
||||
function delay(ms) {
|
||||
return new Promise((resolve) => setTimeout(resolve, ms, true));
|
||||
}
|
||||
|
||||
function getClientUrl(port, authDisabled, sessionToken, serverPort) {
|
||||
const host = process.env.HOST || "localhost";
|
||||
const baseUrl = `http://${host}:${port}`;
|
||||
|
||||
const params = new URLSearchParams();
|
||||
if (serverPort && serverPort !== DEFAULT_MCP_PROXY_LISTEN_PORT) {
|
||||
params.set("MCP_PROXY_PORT", serverPort);
|
||||
}
|
||||
if (!authDisabled) {
|
||||
params.set("MCP_PROXY_AUTH_TOKEN", sessionToken);
|
||||
}
|
||||
return params.size > 0 ? `${baseUrl}/?${params.toString()}` : baseUrl;
|
||||
}
|
||||
|
||||
async function startDevServer(serverOptions) {
|
||||
const { SERVER_PORT, CLIENT_PORT, sessionToken, envVars, abort } =
|
||||
serverOptions;
|
||||
const serverCommand = "npx";
|
||||
const serverArgs = ["tsx", "watch", "--clear-screen=false", "src/index.ts"];
|
||||
const isWindows = process.platform === "win32";
|
||||
|
||||
const spawnOptions = {
|
||||
cwd: resolve(__dirname, "../..", "server"),
|
||||
env: {
|
||||
...process.env,
|
||||
SERVER_PORT,
|
||||
CLIENT_PORT,
|
||||
MCP_PROXY_TOKEN: sessionToken,
|
||||
MCP_ENV_VARS: JSON.stringify(envVars),
|
||||
},
|
||||
signal: abort.signal,
|
||||
echoOutput: true,
|
||||
};
|
||||
|
||||
// For Windows, we need to use stdin: 'ignore' to simulate < NUL
|
||||
if (isWindows) {
|
||||
spawnOptions.stdin = "ignore";
|
||||
}
|
||||
|
||||
const server = spawn(serverCommand, serverArgs, spawnOptions);
|
||||
|
||||
// Give server time to start
|
||||
const serverOk = await Promise.race([
|
||||
new Promise((resolve) => {
|
||||
server.subscribe({
|
||||
complete: () => resolve(false),
|
||||
error: () => resolve(false),
|
||||
next: () => {}, // We're using echoOutput
|
||||
});
|
||||
}),
|
||||
delay(3000).then(() => true),
|
||||
]);
|
||||
|
||||
return { server, serverOk };
|
||||
}
|
||||
|
||||
async function startProdServer(serverOptions) {
|
||||
const {
|
||||
SERVER_PORT,
|
||||
CLIENT_PORT,
|
||||
sessionToken,
|
||||
envVars,
|
||||
abort,
|
||||
command,
|
||||
mcpServerArgs,
|
||||
} = serverOptions;
|
||||
const inspectorServerPath = resolve(
|
||||
__dirname,
|
||||
"../..",
|
||||
"server",
|
||||
"build",
|
||||
"index.js",
|
||||
);
|
||||
|
||||
const server = spawnPromise(
|
||||
"node",
|
||||
[
|
||||
inspectorServerPath,
|
||||
...(command ? [`--env`, command] : []),
|
||||
...(mcpServerArgs ? [`--args=${mcpServerArgs.join(" ")}`] : []),
|
||||
],
|
||||
{
|
||||
env: {
|
||||
...process.env,
|
||||
SERVER_PORT,
|
||||
CLIENT_PORT,
|
||||
MCP_PROXY_TOKEN: sessionToken,
|
||||
MCP_ENV_VARS: JSON.stringify(envVars),
|
||||
},
|
||||
signal: abort.signal,
|
||||
echoOutput: true,
|
||||
},
|
||||
);
|
||||
|
||||
// Make sure server started before starting client
|
||||
const serverOk = await Promise.race([server, delay(2 * 1000)]);
|
||||
|
||||
return { server, serverOk };
|
||||
}
|
||||
|
||||
async function startDevClient(clientOptions) {
|
||||
const {
|
||||
CLIENT_PORT,
|
||||
SERVER_PORT,
|
||||
authDisabled,
|
||||
sessionToken,
|
||||
abort,
|
||||
cancelled,
|
||||
} = clientOptions;
|
||||
const clientCommand = "npx";
|
||||
const host = process.env.HOST || "localhost";
|
||||
const clientArgs = ["vite", "--port", CLIENT_PORT, "--host", host];
|
||||
|
||||
const client = spawn(clientCommand, clientArgs, {
|
||||
cwd: resolve(__dirname, ".."),
|
||||
env: { ...process.env, CLIENT_PORT },
|
||||
signal: abort.signal,
|
||||
echoOutput: true,
|
||||
});
|
||||
|
||||
const url = getClientUrl(
|
||||
CLIENT_PORT,
|
||||
authDisabled,
|
||||
sessionToken,
|
||||
SERVER_PORT,
|
||||
);
|
||||
|
||||
// Give vite time to start before opening or logging the URL
|
||||
setTimeout(() => {
|
||||
console.log(`\n🚀 MCP Inspector is up and running at:\n ${url}\n`);
|
||||
if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
|
||||
console.log("🌐 Opening browser...");
|
||||
open(url);
|
||||
}
|
||||
}, 3000);
|
||||
|
||||
await new Promise((resolve) => {
|
||||
client.subscribe({
|
||||
complete: resolve,
|
||||
error: (err) => {
|
||||
if (!cancelled || process.env.DEBUG) {
|
||||
console.error("Client error:", err);
|
||||
}
|
||||
resolve(null);
|
||||
},
|
||||
next: () => {}, // We're using echoOutput
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
async function startProdClient(clientOptions) {
|
||||
const {
|
||||
CLIENT_PORT,
|
||||
SERVER_PORT,
|
||||
authDisabled,
|
||||
sessionToken,
|
||||
abort,
|
||||
cancelled,
|
||||
} = clientOptions;
|
||||
const inspectorClientPath = resolve(
|
||||
__dirname,
|
||||
"../..",
|
||||
"client",
|
||||
"bin",
|
||||
"client.js",
|
||||
);
|
||||
|
||||
const url = getClientUrl(
|
||||
CLIENT_PORT,
|
||||
authDisabled,
|
||||
sessionToken,
|
||||
SERVER_PORT,
|
||||
);
|
||||
|
||||
await spawnPromise("node", [inspectorClientPath], {
|
||||
env: {
|
||||
...process.env,
|
||||
CLIENT_PORT,
|
||||
INSPECTOR_URL: url,
|
||||
},
|
||||
signal: abort.signal,
|
||||
echoOutput: true,
|
||||
});
|
||||
}
|
||||
|
||||
async function main() {
|
||||
// Parse command line arguments
|
||||
const args = process.argv.slice(2);
|
||||
|
|
@ -18,6 +205,7 @@ async function main() {
|
|||
const mcpServerArgs = [];
|
||||
let command = null;
|
||||
let parsingFlags = true;
|
||||
let isDev = false;
|
||||
|
||||
for (let i = 0; i < args.length; i++) {
|
||||
const arg = args[i];
|
||||
|
|
@ -27,6 +215,11 @@ async function main() {
|
|||
continue;
|
||||
}
|
||||
|
||||
if (parsingFlags && arg === "--dev") {
|
||||
isDev = true;
|
||||
continue;
|
||||
}
|
||||
|
||||
if (parsingFlags && arg === "-e" && i + 1 < args.length) {
|
||||
const envVar = args[++i];
|
||||
const equalsIndex = envVar.indexOf("=");
|
||||
|
|
@ -38,34 +231,25 @@ async function main() {
|
|||
} else {
|
||||
envVars[envVar] = "";
|
||||
}
|
||||
} else if (!command) {
|
||||
} else if (!command && !isDev) {
|
||||
command = arg;
|
||||
} else {
|
||||
} else if (!isDev) {
|
||||
mcpServerArgs.push(arg);
|
||||
}
|
||||
}
|
||||
|
||||
const inspectorServerPath = resolve(
|
||||
__dirname,
|
||||
"../..",
|
||||
"server",
|
||||
"build",
|
||||
"index.js",
|
||||
);
|
||||
|
||||
// Path to the client entry point
|
||||
const inspectorClientPath = resolve(
|
||||
__dirname,
|
||||
"../..",
|
||||
"client",
|
||||
"bin",
|
||||
"client.js",
|
||||
);
|
||||
|
||||
const CLIENT_PORT = process.env.CLIENT_PORT ?? "6274";
|
||||
const SERVER_PORT = process.env.SERVER_PORT ?? "6277";
|
||||
const SERVER_PORT = process.env.SERVER_PORT ?? DEFAULT_MCP_PROXY_LISTEN_PORT;
|
||||
|
||||
console.log("Starting MCP inspector...");
|
||||
console.log(
|
||||
isDev
|
||||
? "Starting MCP inspector in development mode..."
|
||||
: "Starting MCP inspector...",
|
||||
);
|
||||
|
||||
// Generate session token for authentication
|
||||
const sessionToken = randomBytes(32).toString("hex");
|
||||
const authDisabled = !!process.env.DANGEROUSLY_OMIT_AUTH;
|
||||
|
||||
const abort = new AbortController();
|
||||
|
||||
|
|
@ -74,40 +258,42 @@ async function main() {
|
|||
cancelled = true;
|
||||
abort.abort();
|
||||
});
|
||||
let server, serverOk;
|
||||
try {
|
||||
server = spawnPromise(
|
||||
"node",
|
||||
[
|
||||
inspectorServerPath,
|
||||
...(command ? [`--env`, command] : []),
|
||||
...(mcpServerArgs ? [`--args=${mcpServerArgs.join(" ")}`] : []),
|
||||
],
|
||||
{
|
||||
env: {
|
||||
...process.env,
|
||||
PORT: SERVER_PORT,
|
||||
MCP_ENV_VARS: JSON.stringify(envVars),
|
||||
},
|
||||
signal: abort.signal,
|
||||
echoOutput: true,
|
||||
},
|
||||
);
|
||||
|
||||
// Make sure server started before starting client
|
||||
serverOk = await Promise.race([server, delay(2 * 1000)]);
|
||||
let server, serverOk;
|
||||
|
||||
try {
|
||||
const serverOptions = {
|
||||
SERVER_PORT,
|
||||
CLIENT_PORT,
|
||||
sessionToken,
|
||||
envVars,
|
||||
abort,
|
||||
command,
|
||||
mcpServerArgs,
|
||||
};
|
||||
|
||||
const result = isDev
|
||||
? await startDevServer(serverOptions)
|
||||
: await startProdServer(serverOptions);
|
||||
|
||||
server = result.server;
|
||||
serverOk = result.serverOk;
|
||||
} catch (error) {}
|
||||
|
||||
if (serverOk) {
|
||||
try {
|
||||
if (process.env.MCP_AUTO_OPEN_ENABLED !== "false") {
|
||||
open(`http://127.0.0.1:${CLIENT_PORT}`);
|
||||
}
|
||||
await spawnPromise("node", [inspectorClientPath], {
|
||||
env: { ...process.env, PORT: CLIENT_PORT },
|
||||
signal: abort.signal,
|
||||
echoOutput: true,
|
||||
});
|
||||
const clientOptions = {
|
||||
CLIENT_PORT,
|
||||
SERVER_PORT,
|
||||
authDisabled,
|
||||
sessionToken,
|
||||
abort,
|
||||
cancelled,
|
||||
};
|
||||
|
||||
await (isDev
|
||||
? startDevClient(clientOptions)
|
||||
: startProdClient(clientOptions));
|
||||
} catch (e) {
|
||||
if (!cancelled || process.env.DEBUG) throw e;
|
||||
}
|
||||
|
|
|
|||
18
client/e2e/global-teardown.js
Normal file
18
client/e2e/global-teardown.js
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { rimraf } from "rimraf";
|
||||
|
||||
async function globalTeardown() {
|
||||
if (!process.env.CI) {
|
||||
console.log("Cleaning up test-results directory...");
|
||||
// Add a small delay to ensure all Playwright files are written
|
||||
await new Promise((resolve) => setTimeout(resolve, 100));
|
||||
await rimraf("./e2e/test-results");
|
||||
console.log("Test-results directory cleaned up.");
|
||||
}
|
||||
}
|
||||
|
||||
export default globalTeardown;
|
||||
|
||||
// Call the function when this script is run directly
|
||||
if (import.meta.url === `file://${process.argv[1]}`) {
|
||||
globalTeardown().catch(console.error);
|
||||
}
|
||||
113
client/e2e/transport-type-dropdown.spec.ts
Normal file
113
client/e2e/transport-type-dropdown.spec.ts
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import { test, expect } from "@playwright/test";
|
||||
|
||||
// Adjust the URL if your dev server runs on a different port
|
||||
const APP_URL = "http://localhost:6274/";
|
||||
|
||||
test.describe("Transport Type Dropdown", () => {
|
||||
test("should have options for STDIO, SSE, and Streamable HTTP", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto(APP_URL);
|
||||
|
||||
// Wait for the Transport Type dropdown to be visible
|
||||
const selectTrigger = page.getByLabel("Transport Type");
|
||||
await expect(selectTrigger).toBeVisible();
|
||||
|
||||
// Open the dropdown
|
||||
await selectTrigger.click();
|
||||
|
||||
// Check for the three options
|
||||
await expect(page.getByRole("option", { name: "STDIO" })).toBeVisible();
|
||||
await expect(page.getByRole("option", { name: "SSE" })).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("option", { name: "Streamable HTTP" }),
|
||||
).toBeVisible();
|
||||
});
|
||||
|
||||
test("should show Command and Arguments fields and hide URL field when Transport Type is STDIO", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto(APP_URL);
|
||||
|
||||
// Wait for the Transport Type dropdown to be visible
|
||||
const selectTrigger = page.getByLabel("Transport Type");
|
||||
await expect(selectTrigger).toBeVisible();
|
||||
|
||||
// Open the dropdown and select STDIO
|
||||
await selectTrigger.click();
|
||||
await page.getByRole("option", { name: "STDIO" }).click();
|
||||
|
||||
// Wait for the form to update
|
||||
await page.waitForTimeout(100);
|
||||
|
||||
// Check that Command and Arguments fields are visible
|
||||
await expect(page.locator("#command-input")).toBeVisible();
|
||||
await expect(page.locator("#arguments-input")).toBeVisible();
|
||||
|
||||
// Check that URL field is not visible
|
||||
await expect(page.locator("#sse-url-input")).not.toBeVisible();
|
||||
|
||||
// Also verify the labels are present
|
||||
await expect(page.getByText("Command")).toBeVisible();
|
||||
await expect(page.getByText("Arguments")).toBeVisible();
|
||||
await expect(page.getByText("URL")).not.toBeVisible();
|
||||
});
|
||||
|
||||
test("should show URL field and hide Command and Arguments fields when Transport Type is SSE", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto(APP_URL);
|
||||
|
||||
// Wait for the Transport Type dropdown to be visible
|
||||
const selectTrigger = page.getByLabel("Transport Type");
|
||||
await expect(selectTrigger).toBeVisible();
|
||||
|
||||
// Open the dropdown and select SSE
|
||||
await selectTrigger.click();
|
||||
await page.getByRole("option", { name: "SSE" }).click();
|
||||
|
||||
// Wait for the form to update
|
||||
await page.waitForTimeout(100);
|
||||
|
||||
// Check that URL field is visible
|
||||
await expect(page.locator("#sse-url-input")).toBeVisible();
|
||||
|
||||
// Check that Command and Arguments fields are not visible
|
||||
await expect(page.locator("#command-input")).not.toBeVisible();
|
||||
await expect(page.locator("#arguments-input")).not.toBeVisible();
|
||||
|
||||
// Also verify the labels are present/absent
|
||||
await expect(page.getByText("URL")).toBeVisible();
|
||||
await expect(page.getByText("Command")).not.toBeVisible();
|
||||
await expect(page.getByText("Arguments")).not.toBeVisible();
|
||||
});
|
||||
|
||||
test("should show URL field and hide Command and Arguments fields when Transport Type is Streamable HTTP", async ({
|
||||
page,
|
||||
}) => {
|
||||
await page.goto(APP_URL);
|
||||
|
||||
// Wait for the Transport Type dropdown to be visible
|
||||
const selectTrigger = page.getByLabel("Transport Type");
|
||||
await expect(selectTrigger).toBeVisible();
|
||||
|
||||
// Open the dropdown and select Streamable HTTP
|
||||
await selectTrigger.click();
|
||||
await page.getByRole("option", { name: "Streamable HTTP" }).click();
|
||||
|
||||
// Wait for the form to update
|
||||
await page.waitForTimeout(100);
|
||||
|
||||
// Check that URL field is visible
|
||||
await expect(page.locator("#sse-url-input")).toBeVisible();
|
||||
|
||||
// Check that Command and Arguments fields are not visible
|
||||
await expect(page.locator("#command-input")).not.toBeVisible();
|
||||
await expect(page.locator("#arguments-input")).not.toBeVisible();
|
||||
|
||||
// Also verify the labels are present/absent
|
||||
await expect(page.getByText("URL")).toBeVisible();
|
||||
await expect(page.getByText("Command")).not.toBeVisible();
|
||||
await expect(page.getByText("Arguments")).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<title>MCP Inspector</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<div id="root" class="w-full"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ module.exports = {
|
|||
"/node_modules/",
|
||||
"/dist/",
|
||||
"/bin/",
|
||||
"/e2e/",
|
||||
"\\.config\\.(js|ts|cjs|mjs)$",
|
||||
],
|
||||
// Exclude the same patterns from coverage reports
|
||||
|
|
@ -28,6 +29,7 @@ module.exports = {
|
|||
"/node_modules/",
|
||||
"/dist/",
|
||||
"/bin/",
|
||||
"/e2e/",
|
||||
"\\.config\\.(js|ts|cjs|mjs)$",
|
||||
],
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "@modelcontextprotocol/inspector-client",
|
||||
"version": "0.13.0",
|
||||
"version": "0.15.0",
|
||||
"description": "Client-side application for the Model Context Protocol inspector",
|
||||
"license": "MIT",
|
||||
"author": "Anthropic, PBC (https://anthropic.com)",
|
||||
|
|
@ -20,11 +20,14 @@
|
|||
"lint": "eslint .",
|
||||
"preview": "vite preview --port 6274",
|
||||
"test": "jest --config jest.config.cjs",
|
||||
"test:watch": "jest --config jest.config.cjs --watch"
|
||||
"test:watch": "jest --config jest.config.cjs --watch",
|
||||
"test:e2e": "playwright test e2e && npm run cleanup:e2e",
|
||||
"cleanup:e2e": "node e2e/global-teardown.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@modelcontextprotocol/sdk": "^1.11.5",
|
||||
"@modelcontextprotocol/sdk": "^1.13.1",
|
||||
"@radix-ui/react-checkbox": "^1.1.4",
|
||||
"ajv": "^6.12.6",
|
||||
"@radix-ui/react-dialog": "^1.1.3",
|
||||
"@radix-ui/react-icons": "^1.3.0",
|
||||
"@radix-ui/react-label": "^2.1.0",
|
||||
|
|
@ -37,7 +40,7 @@
|
|||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"cmdk": "^1.0.4",
|
||||
"lucide-react": "^0.447.0",
|
||||
"lucide-react": "^0.523.0",
|
||||
"pkce-challenge": "^4.1.0",
|
||||
"prismjs": "^1.30.0",
|
||||
"react": "^18.3.1",
|
||||
|
|
|
|||
70
client/playwright.config.ts
Normal file
70
client/playwright.config.ts
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import { defineConfig, devices } from "@playwright/test";
|
||||
|
||||
/**
|
||||
* @see https://playwright.dev/docs/test-configuration
|
||||
*/
|
||||
export default defineConfig({
|
||||
/* Run your local dev server before starting the tests */
|
||||
webServer: {
|
||||
cwd: "..",
|
||||
command: "npm run dev",
|
||||
url: "http://localhost:6274",
|
||||
reuseExistingServer: !process.env.CI,
|
||||
},
|
||||
|
||||
testDir: "./e2e",
|
||||
outputDir: "./e2e/test-results",
|
||||
/* Run tests in files in parallel */
|
||||
fullyParallel: true,
|
||||
/* Fail the build on CI if you accidentally left test.only in the source code. */
|
||||
forbidOnly: !!process.env.CI,
|
||||
/* Retry on CI only */
|
||||
retries: process.env.CI ? 2 : 0,
|
||||
/* Opt out of parallel tests on CI. */
|
||||
workers: process.env.CI ? 1 : undefined,
|
||||
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
|
||||
reporter: process.env.CI
|
||||
? [
|
||||
["html", { outputFolder: "playwright-report" }],
|
||||
["json", { outputFile: "results.json" }],
|
||||
["line"],
|
||||
]
|
||||
: [["line"]],
|
||||
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
|
||||
use: {
|
||||
/* Base URL to use in actions like `await page.goto('/')`. */
|
||||
baseURL: "http://localhost:6274",
|
||||
|
||||
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
|
||||
trace: "on-first-retry",
|
||||
|
||||
/* Take screenshots on failure */
|
||||
screenshot: "only-on-failure",
|
||||
|
||||
/* Record video on failure */
|
||||
video: "retain-on-failure",
|
||||
},
|
||||
|
||||
/* Configure projects for major browsers */
|
||||
projects: [
|
||||
{
|
||||
name: "chromium",
|
||||
use: { ...devices["Desktop Chrome"] },
|
||||
},
|
||||
|
||||
{
|
||||
name: "firefox",
|
||||
use: { ...devices["Desktop Firefox"] },
|
||||
},
|
||||
|
||||
// Skip WebKit on macOS due to compatibility issues
|
||||
...(process.platform !== "darwin"
|
||||
? [
|
||||
{
|
||||
name: "webkit",
|
||||
use: { ...devices["Desktop Safari"] },
|
||||
},
|
||||
]
|
||||
: []),
|
||||
],
|
||||
});
|
||||
|
|
@ -1,7 +1,3 @@
|
|||
#root {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,9 @@ import {
|
|||
} from "@modelcontextprotocol/sdk/types.js";
|
||||
import { OAuthTokensSchema } from "@modelcontextprotocol/sdk/shared/auth.js";
|
||||
import { SESSION_KEYS, getServerSpecificKey } from "./lib/constants";
|
||||
import { AuthDebuggerState } from "./lib/auth-types";
|
||||
import { AuthDebuggerState, EMPTY_DEBUGGER_STATE } from "./lib/auth-types";
|
||||
import { OAuthStateMachine } from "./lib/oauth-state-machine";
|
||||
import { cacheToolOutputSchemas } from "./utils/schemaUtils";
|
||||
import React, {
|
||||
Suspense,
|
||||
useCallback,
|
||||
|
|
@ -28,7 +30,10 @@ import React, {
|
|||
useState,
|
||||
} from "react";
|
||||
import { useConnection } from "./lib/hooks/useConnection";
|
||||
import { useDraggablePane } from "./lib/hooks/useDraggablePane";
|
||||
import {
|
||||
useDraggablePane,
|
||||
useDraggableSidebar,
|
||||
} from "./lib/hooks/useDraggablePane";
|
||||
import { StdErrNotification } from "./lib/notificationTypes";
|
||||
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
|
@ -47,7 +52,7 @@ import { z } from "zod";
|
|||
import "./App.css";
|
||||
import AuthDebugger from "./components/AuthDebugger";
|
||||
import ConsoleTab from "./components/ConsoleTab";
|
||||
import HistoryAndNotifications from "./components/History";
|
||||
import HistoryAndNotifications from "./components/HistoryAndNotifications";
|
||||
import PingTab from "./components/PingTab";
|
||||
import PromptsTab, { Prompt } from "./components/PromptsTab";
|
||||
import ResourcesTab from "./components/ResourcesTab";
|
||||
|
|
@ -58,11 +63,13 @@ import ToolsTab from "./components/ToolsTab";
|
|||
import { InspectorConfig } from "./lib/configurationTypes";
|
||||
import {
|
||||
getMCPProxyAddress,
|
||||
getMCPProxyAuthToken,
|
||||
getInitialSseUrl,
|
||||
getInitialTransportType,
|
||||
getInitialCommand,
|
||||
getInitialArgs,
|
||||
initializeInspectorConfig,
|
||||
saveInspectorConfig,
|
||||
} from "./utils/configUtils";
|
||||
|
||||
const CONFIG_LOCAL_STORAGE_KEY = "inspectorConfig_v1";
|
||||
|
|
@ -120,19 +127,8 @@ const App = () => {
|
|||
const [isAuthDebuggerVisible, setIsAuthDebuggerVisible] = useState(false);
|
||||
|
||||
// Auth debugger state
|
||||
const [authState, setAuthState] = useState<AuthDebuggerState>({
|
||||
isInitiatingAuth: false,
|
||||
oauthTokens: null,
|
||||
loading: true,
|
||||
oauthStep: "metadata_discovery",
|
||||
oauthMetadata: null,
|
||||
oauthClientInfo: null,
|
||||
authorizationUrl: null,
|
||||
authorizationCode: "",
|
||||
latestError: null,
|
||||
statusMessage: null,
|
||||
validationError: null,
|
||||
});
|
||||
const [authState, setAuthState] =
|
||||
useState<AuthDebuggerState>(EMPTY_DEBUGGER_STATE);
|
||||
|
||||
// Helper function to update specific auth state properties
|
||||
const updateAuthState = (updates: Partial<AuthDebuggerState>) => {
|
||||
|
|
@ -163,6 +159,11 @@ const App = () => {
|
|||
const progressTokenRef = useRef(0);
|
||||
|
||||
const { height: historyPaneHeight, handleDragStart } = useDraggablePane(300);
|
||||
const {
|
||||
width: sidebarWidth,
|
||||
isDragging: isSidebarDragging,
|
||||
handleDragStart: handleSidebarDragStart,
|
||||
} = useDraggableSidebar(320);
|
||||
|
||||
const {
|
||||
connectionStatus,
|
||||
|
|
@ -227,7 +228,7 @@ const App = () => {
|
|||
}, [headerName]);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem(CONFIG_LOCAL_STORAGE_KEY, JSON.stringify(config));
|
||||
saveInspectorConfig(CONFIG_LOCAL_STORAGE_KEY, config);
|
||||
}, [config]);
|
||||
|
||||
// Auto-connect to previously saved serverURL after OAuth callback
|
||||
|
|
@ -242,27 +243,81 @@ const App = () => {
|
|||
|
||||
// Update OAuth debug state during debug callback
|
||||
const onOAuthDebugConnect = useCallback(
|
||||
({
|
||||
async ({
|
||||
authorizationCode,
|
||||
errorMsg,
|
||||
restoredState,
|
||||
}: {
|
||||
authorizationCode?: string;
|
||||
errorMsg?: string;
|
||||
restoredState?: AuthDebuggerState;
|
||||
}) => {
|
||||
setIsAuthDebuggerVisible(true);
|
||||
if (authorizationCode) {
|
||||
|
||||
if (errorMsg) {
|
||||
updateAuthState({
|
||||
latestError: new Error(errorMsg),
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (restoredState && authorizationCode) {
|
||||
// Restore the previous auth state and continue the OAuth flow
|
||||
let currentState: AuthDebuggerState = {
|
||||
...restoredState,
|
||||
authorizationCode,
|
||||
oauthStep: "token_request",
|
||||
isInitiatingAuth: true,
|
||||
statusMessage: null,
|
||||
latestError: null,
|
||||
};
|
||||
|
||||
try {
|
||||
// Create a new state machine instance to continue the flow
|
||||
const stateMachine = new OAuthStateMachine(sseUrl, (updates) => {
|
||||
currentState = { ...currentState, ...updates };
|
||||
});
|
||||
|
||||
// Continue stepping through the OAuth flow from where we left off
|
||||
while (
|
||||
currentState.oauthStep !== "complete" &&
|
||||
currentState.oauthStep !== "authorization_code"
|
||||
) {
|
||||
await stateMachine.executeStep(currentState);
|
||||
}
|
||||
|
||||
if (currentState.oauthStep === "complete") {
|
||||
// After the flow completes or reaches a user-input step, update the app state
|
||||
updateAuthState({
|
||||
...currentState,
|
||||
statusMessage: {
|
||||
type: "success",
|
||||
message: "Authentication completed successfully",
|
||||
},
|
||||
isInitiatingAuth: false,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("OAuth continuation error:", error);
|
||||
updateAuthState({
|
||||
latestError:
|
||||
error instanceof Error ? error : new Error(String(error)),
|
||||
statusMessage: {
|
||||
type: "error",
|
||||
message: `Failed to complete OAuth flow: ${error instanceof Error ? error.message : String(error)}`,
|
||||
},
|
||||
isInitiatingAuth: false,
|
||||
});
|
||||
}
|
||||
} else if (authorizationCode) {
|
||||
// Fallback to the original behavior if no state was restored
|
||||
updateAuthState({
|
||||
authorizationCode,
|
||||
oauthStep: "token_request",
|
||||
});
|
||||
}
|
||||
if (errorMsg) {
|
||||
updateAuthState({
|
||||
latestError: new Error(errorMsg),
|
||||
});
|
||||
}
|
||||
},
|
||||
[],
|
||||
[sseUrl],
|
||||
);
|
||||
|
||||
// Load OAuth tokens when sseUrl changes
|
||||
|
|
@ -284,8 +339,6 @@ const App = () => {
|
|||
}
|
||||
} catch (error) {
|
||||
console.error("Error loading OAuth tokens:", error);
|
||||
} finally {
|
||||
updateAuthState({ loading: false });
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -293,7 +346,14 @@ const App = () => {
|
|||
}, [sseUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`${getMCPProxyAddress(config)}/config`)
|
||||
const headers: HeadersInit = {};
|
||||
const { token: proxyAuthToken, header: proxyAuthTokenHeader } =
|
||||
getMCPProxyAuthToken(config);
|
||||
if (proxyAuthToken) {
|
||||
headers[proxyAuthTokenHeader] = `Bearer ${proxyAuthToken}`;
|
||||
}
|
||||
|
||||
fetch(`${getMCPProxyAddress(config)}/config`, { headers })
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setEnv(data.defaultEnvironment);
|
||||
|
|
@ -307,8 +367,7 @@ const App = () => {
|
|||
.catch((error) =>
|
||||
console.error("Error fetching default environment:", error),
|
||||
);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
}, [config]);
|
||||
|
||||
useEffect(() => {
|
||||
rootsRef.current = roots;
|
||||
|
|
@ -473,6 +532,8 @@ const App = () => {
|
|||
);
|
||||
setTools(response.tools);
|
||||
setNextToolCursor(response.nextCursor);
|
||||
// Cache output schemas for validation
|
||||
cacheToolOutputSchemas(response.tools);
|
||||
};
|
||||
|
||||
const callTool = async (name: string, params: Record<string, unknown>) => {
|
||||
|
|
@ -562,32 +623,58 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<div className="flex h-screen bg-background">
|
||||
<Sidebar
|
||||
connectionStatus={connectionStatus}
|
||||
transportType={transportType}
|
||||
setTransportType={setTransportType}
|
||||
command={command}
|
||||
setCommand={setCommand}
|
||||
args={args}
|
||||
setArgs={setArgs}
|
||||
sseUrl={sseUrl}
|
||||
setSseUrl={setSseUrl}
|
||||
env={env}
|
||||
setEnv={setEnv}
|
||||
config={config}
|
||||
setConfig={setConfig}
|
||||
bearerToken={bearerToken}
|
||||
setBearerToken={setBearerToken}
|
||||
headerName={headerName}
|
||||
setHeaderName={setHeaderName}
|
||||
onConnect={connectMcpServer}
|
||||
onDisconnect={disconnectMcpServer}
|
||||
stdErrNotifications={stdErrNotifications}
|
||||
logLevel={logLevel}
|
||||
sendLogLevelRequest={sendLogLevelRequest}
|
||||
loggingSupported={!!serverCapabilities?.logging || false}
|
||||
clearStdErrNotifications={clearStdErrNotifications}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
width: sidebarWidth,
|
||||
minWidth: 200,
|
||||
maxWidth: 600,
|
||||
transition: isSidebarDragging ? "none" : "width 0.15s",
|
||||
}}
|
||||
className="bg-card border-r border-border flex flex-col h-full relative"
|
||||
>
|
||||
<Sidebar
|
||||
connectionStatus={connectionStatus}
|
||||
transportType={transportType}
|
||||
setTransportType={setTransportType}
|
||||
command={command}
|
||||
setCommand={setCommand}
|
||||
args={args}
|
||||
setArgs={setArgs}
|
||||
sseUrl={sseUrl}
|
||||
setSseUrl={setSseUrl}
|
||||
env={env}
|
||||
setEnv={setEnv}
|
||||
config={config}
|
||||
setConfig={setConfig}
|
||||
bearerToken={bearerToken}
|
||||
setBearerToken={setBearerToken}
|
||||
headerName={headerName}
|
||||
setHeaderName={setHeaderName}
|
||||
onConnect={connectMcpServer}
|
||||
onDisconnect={disconnectMcpServer}
|
||||
stdErrNotifications={stdErrNotifications}
|
||||
logLevel={logLevel}
|
||||
sendLogLevelRequest={sendLogLevelRequest}
|
||||
loggingSupported={!!serverCapabilities?.logging || false}
|
||||
clearStdErrNotifications={clearStdErrNotifications}
|
||||
/>
|
||||
{/* Drag handle for resizing sidebar */}
|
||||
<div
|
||||
onMouseDown={handleSidebarDragStart}
|
||||
style={{
|
||||
cursor: "col-resize",
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
right: 0,
|
||||
width: 6,
|
||||
height: "100%",
|
||||
zIndex: 10,
|
||||
background: isSidebarDragging ? "rgba(0,0,0,0.08)" : "transparent",
|
||||
}}
|
||||
aria-label="Resize sidebar"
|
||||
data-testid="sidebar-drag-handle"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
<div className="flex-1 overflow-auto">
|
||||
{mcpClient ? (
|
||||
|
|
@ -608,7 +695,7 @@ const App = () => {
|
|||
className="w-full p-4"
|
||||
onValueChange={(value) => (window.location.hash = value)}
|
||||
>
|
||||
<TabsList className="mb-4 p-0">
|
||||
<TabsList className="mb-4 py-0">
|
||||
<TabsTrigger
|
||||
value="resources"
|
||||
disabled={!serverCapabilities?.resources}
|
||||
|
|
@ -659,7 +746,7 @@ const App = () => {
|
|||
!serverCapabilities?.tools ? (
|
||||
<>
|
||||
<div className="flex items-center justify-center p-4">
|
||||
<p className="text-lg text-gray-500">
|
||||
<p className="text-lg text-gray-500 dark:text-gray-400">
|
||||
The connected server does not support any MCP
|
||||
capabilities
|
||||
</p>
|
||||
|
|
@ -759,6 +846,8 @@ const App = () => {
|
|||
clearTools={() => {
|
||||
setTools([]);
|
||||
setNextToolCursor(undefined);
|
||||
// Clear cached output schemas
|
||||
cacheToolOutputSchemas([]);
|
||||
}}
|
||||
callTool={async (name, params) => {
|
||||
clearError("tools");
|
||||
|
|
@ -811,7 +900,7 @@ const App = () => {
|
|||
</Tabs>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full gap-4">
|
||||
<p className="text-lg text-gray-500">
|
||||
<p className="text-lg text-gray-500 dark:text-gray-400">
|
||||
Connect to an MCP server to start inspecting
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
@ -836,7 +925,7 @@ const App = () => {
|
|||
}}
|
||||
>
|
||||
<div
|
||||
className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50"
|
||||
className="absolute w-full h-4 -top-2 cursor-row-resize flex items-center justify-center hover:bg-accent/50 dark:hover:bg-input/40"
|
||||
onMouseDown={handleDragStart}
|
||||
>
|
||||
<div className="w-8 h-1 rounded-full bg-border" />
|
||||
|
|
|
|||
240
client/src/__tests__/App.config.test.tsx
Normal file
240
client/src/__tests__/App.config.test.tsx
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
import { render, waitFor } from "@testing-library/react";
|
||||
import App from "../App";
|
||||
import { DEFAULT_INSPECTOR_CONFIG } from "../lib/constants";
|
||||
import { InspectorConfig } from "../lib/configurationTypes";
|
||||
import * as configUtils from "../utils/configUtils";
|
||||
|
||||
// Mock auth dependencies first
|
||||
jest.mock("@modelcontextprotocol/sdk/client/auth.js", () => ({
|
||||
auth: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock("../lib/oauth-state-machine", () => ({
|
||||
OAuthStateMachine: jest.fn(),
|
||||
}));
|
||||
|
||||
jest.mock("../lib/auth", () => ({
|
||||
InspectorOAuthClientProvider: jest.fn().mockImplementation(() => ({
|
||||
tokens: jest.fn().mockResolvedValue(null),
|
||||
clear: jest.fn(),
|
||||
})),
|
||||
DebugInspectorOAuthClientProvider: jest.fn(),
|
||||
}));
|
||||
|
||||
// Mock the config utils
|
||||
jest.mock("../utils/configUtils", () => ({
|
||||
...jest.requireActual("../utils/configUtils"),
|
||||
getMCPProxyAddress: jest.fn(() => "http://localhost:6277"),
|
||||
getMCPProxyAuthToken: jest.fn((config: InspectorConfig) => ({
|
||||
token: config.MCP_PROXY_AUTH_TOKEN.value,
|
||||
header: "X-MCP-Proxy-Auth",
|
||||
})),
|
||||
getInitialTransportType: jest.fn(() => "stdio"),
|
||||
getInitialSseUrl: jest.fn(() => "http://localhost:3001/sse"),
|
||||
getInitialCommand: jest.fn(() => "mcp-server-everything"),
|
||||
getInitialArgs: jest.fn(() => ""),
|
||||
initializeInspectorConfig: jest.fn(() => DEFAULT_INSPECTOR_CONFIG),
|
||||
saveInspectorConfig: jest.fn(),
|
||||
}));
|
||||
|
||||
// Get references to the mocked functions
|
||||
const mockGetMCPProxyAuthToken = configUtils.getMCPProxyAuthToken as jest.Mock;
|
||||
const mockInitializeInspectorConfig =
|
||||
configUtils.initializeInspectorConfig as jest.Mock;
|
||||
|
||||
// Mock other dependencies
|
||||
jest.mock("../lib/hooks/useConnection", () => ({
|
||||
useConnection: () => ({
|
||||
connectionStatus: "disconnected",
|
||||
serverCapabilities: null,
|
||||
mcpClient: null,
|
||||
requestHistory: [],
|
||||
makeRequest: jest.fn(),
|
||||
sendNotification: jest.fn(),
|
||||
handleCompletion: jest.fn(),
|
||||
completionsSupported: false,
|
||||
connect: jest.fn(),
|
||||
disconnect: jest.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock("../lib/hooks/useDraggablePane", () => ({
|
||||
useDraggablePane: () => ({
|
||||
height: 300,
|
||||
handleDragStart: jest.fn(),
|
||||
}),
|
||||
useDraggableSidebar: () => ({
|
||||
width: 320,
|
||||
isDragging: false,
|
||||
handleDragStart: jest.fn(),
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock("../components/Sidebar", () => ({
|
||||
__esModule: true,
|
||||
default: () => <div>Sidebar</div>,
|
||||
}));
|
||||
|
||||
// Mock fetch
|
||||
global.fetch = jest.fn();
|
||||
|
||||
describe("App - Config Endpoint", () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks();
|
||||
(global.fetch as jest.Mock).mockResolvedValue({
|
||||
json: () =>
|
||||
Promise.resolve({
|
||||
defaultEnvironment: { TEST_ENV: "test" },
|
||||
defaultCommand: "test-command",
|
||||
defaultArgs: "test-args",
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
jest.clearAllMocks();
|
||||
|
||||
// Reset getMCPProxyAuthToken to default behavior
|
||||
mockGetMCPProxyAuthToken.mockImplementation((config: InspectorConfig) => ({
|
||||
token: config.MCP_PROXY_AUTH_TOKEN.value,
|
||||
header: "X-MCP-Proxy-Auth",
|
||||
}));
|
||||
});
|
||||
|
||||
test("sends X-MCP-Proxy-Auth header when fetching config with proxy auth token", async () => {
|
||||
const mockConfig = {
|
||||
...DEFAULT_INSPECTOR_CONFIG,
|
||||
MCP_PROXY_AUTH_TOKEN: {
|
||||
...DEFAULT_INSPECTOR_CONFIG.MCP_PROXY_AUTH_TOKEN,
|
||||
value: "test-proxy-token",
|
||||
},
|
||||
};
|
||||
|
||||
// Mock initializeInspectorConfig to return our test config
|
||||
mockInitializeInspectorConfig.mockReturnValue(mockConfig);
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(global.fetch).toHaveBeenCalledWith(
|
||||
"http://localhost:6277/config",
|
||||
{
|
||||
headers: {
|
||||
"X-MCP-Proxy-Auth": "Bearer test-proxy-token",
|
||||
},
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test("does not send auth header when proxy auth token is empty", async () => {
|
||||
const mockConfig = {
|
||||
...DEFAULT_INSPECTOR_CONFIG,
|
||||
MCP_PROXY_AUTH_TOKEN: {
|
||||
...DEFAULT_INSPECTOR_CONFIG.MCP_PROXY_AUTH_TOKEN,
|
||||
value: "",
|
||||
},
|
||||
};
|
||||
|
||||
// Mock initializeInspectorConfig to return our test config
|
||||
mockInitializeInspectorConfig.mockReturnValue(mockConfig);
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(global.fetch).toHaveBeenCalledWith(
|
||||
"http://localhost:6277/config",
|
||||
{
|
||||
headers: {},
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test("uses custom header name if getMCPProxyAuthToken returns different header", async () => {
|
||||
const mockConfig = {
|
||||
...DEFAULT_INSPECTOR_CONFIG,
|
||||
MCP_PROXY_AUTH_TOKEN: {
|
||||
...DEFAULT_INSPECTOR_CONFIG.MCP_PROXY_AUTH_TOKEN,
|
||||
value: "test-proxy-token",
|
||||
},
|
||||
};
|
||||
|
||||
// Mock to return a custom header name
|
||||
mockGetMCPProxyAuthToken.mockReturnValue({
|
||||
token: "test-proxy-token",
|
||||
header: "X-Custom-Auth",
|
||||
});
|
||||
mockInitializeInspectorConfig.mockReturnValue(mockConfig);
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(global.fetch).toHaveBeenCalledWith(
|
||||
"http://localhost:6277/config",
|
||||
{
|
||||
headers: {
|
||||
"X-Custom-Auth": "Bearer test-proxy-token",
|
||||
},
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
test("config endpoint response updates app state", async () => {
|
||||
const mockConfig = {
|
||||
...DEFAULT_INSPECTOR_CONFIG,
|
||||
MCP_PROXY_AUTH_TOKEN: {
|
||||
...DEFAULT_INSPECTOR_CONFIG.MCP_PROXY_AUTH_TOKEN,
|
||||
value: "test-proxy-token",
|
||||
},
|
||||
};
|
||||
|
||||
mockInitializeInspectorConfig.mockReturnValue(mockConfig);
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(global.fetch).toHaveBeenCalledTimes(1);
|
||||
});
|
||||
|
||||
// Verify the fetch was called with correct parameters
|
||||
expect(global.fetch).toHaveBeenCalledWith(
|
||||
"http://localhost:6277/config",
|
||||
expect.objectContaining({
|
||||
headers: expect.objectContaining({
|
||||
"X-MCP-Proxy-Auth": "Bearer test-proxy-token",
|
||||
}),
|
||||
}),
|
||||
);
|
||||
});
|
||||
|
||||
test("handles config endpoint errors gracefully", async () => {
|
||||
const mockConfig = {
|
||||
...DEFAULT_INSPECTOR_CONFIG,
|
||||
MCP_PROXY_AUTH_TOKEN: {
|
||||
...DEFAULT_INSPECTOR_CONFIG.MCP_PROXY_AUTH_TOKEN,
|
||||
value: "test-proxy-token",
|
||||
},
|
||||
};
|
||||
|
||||
mockInitializeInspectorConfig.mockReturnValue(mockConfig);
|
||||
|
||||
// Mock fetch to reject
|
||||
(global.fetch as jest.Mock).mockRejectedValue(new Error("Network error"));
|
||||
|
||||
// Spy on console.error
|
||||
const consoleErrorSpy = jest.spyOn(console, "error").mockImplementation();
|
||||
|
||||
render(<App />);
|
||||
|
||||
await waitFor(() => {
|
||||
expect(consoleErrorSpy).toHaveBeenCalledWith(
|
||||
"Error fetching default environment:",
|
||||
expect.any(Error),
|
||||
);
|
||||
});
|
||||
|
||||
consoleErrorSpy.mockRestore();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,15 +1,11 @@
|
|||
import { useCallback, useMemo } from "react";
|
||||
import { useCallback, useMemo, useEffect } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { DebugInspectorOAuthClientProvider } from "../lib/auth";
|
||||
import {
|
||||
auth,
|
||||
discoverOAuthMetadata,
|
||||
} from "@modelcontextprotocol/sdk/client/auth.js";
|
||||
import { OAuthMetadataSchema } from "@modelcontextprotocol/sdk/shared/auth.js";
|
||||
import { AlertCircle } from "lucide-react";
|
||||
import { AuthDebuggerState } from "../lib/auth-types";
|
||||
import { AuthDebuggerState, EMPTY_DEBUGGER_STATE } from "../lib/auth-types";
|
||||
import { OAuthFlowProgress } from "./OAuthFlowProgress";
|
||||
import { OAuthStateMachine } from "../lib/oauth-state-machine";
|
||||
import { SESSION_KEYS } from "../lib/constants";
|
||||
|
||||
export interface AuthDebuggerProps {
|
||||
serverUrl: string;
|
||||
|
|
@ -64,6 +60,27 @@ const AuthDebugger = ({
|
|||
authState,
|
||||
updateAuthState,
|
||||
}: AuthDebuggerProps) => {
|
||||
// Check for existing tokens on mount
|
||||
useEffect(() => {
|
||||
if (serverUrl && !authState.oauthTokens) {
|
||||
const checkTokens = async () => {
|
||||
try {
|
||||
const provider = new DebugInspectorOAuthClientProvider(serverUrl);
|
||||
const existingTokens = await provider.tokens();
|
||||
if (existingTokens) {
|
||||
updateAuthState({
|
||||
oauthTokens: existingTokens,
|
||||
oauthStep: "complete",
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load existing OAuth tokens:", error);
|
||||
}
|
||||
};
|
||||
checkTokens();
|
||||
}
|
||||
}, [serverUrl, updateAuthState, authState.oauthTokens]);
|
||||
|
||||
const startOAuthFlow = useCallback(() => {
|
||||
if (!serverUrl) {
|
||||
updateAuthState({
|
||||
|
|
@ -124,22 +141,48 @@ const AuthDebugger = ({
|
|||
|
||||
updateAuthState({ isInitiatingAuth: true, statusMessage: null });
|
||||
try {
|
||||
const serverAuthProvider = new DebugInspectorOAuthClientProvider(
|
||||
serverUrl,
|
||||
);
|
||||
// First discover OAuth metadata separately so we can save it
|
||||
const metadata = await discoverOAuthMetadata(serverUrl);
|
||||
if (!metadata) {
|
||||
throw new Error("Failed to discover OAuth metadata");
|
||||
}
|
||||
const parsedMetadata = await OAuthMetadataSchema.parseAsync(metadata);
|
||||
serverAuthProvider.saveServerMetadata(parsedMetadata);
|
||||
// Step through the OAuth flow using the state machine instead of the auth() function
|
||||
let currentState: AuthDebuggerState = {
|
||||
...authState,
|
||||
oauthStep: "metadata_discovery",
|
||||
authorizationUrl: null,
|
||||
latestError: null,
|
||||
};
|
||||
|
||||
await auth(serverAuthProvider, { serverUrl: serverUrl });
|
||||
const oauthMachine = new OAuthStateMachine(serverUrl, (updates) => {
|
||||
// Update our temporary state during the process
|
||||
currentState = { ...currentState, ...updates };
|
||||
// But don't call updateAuthState yet
|
||||
});
|
||||
|
||||
// Manually step through each stage of the OAuth flow
|
||||
while (currentState.oauthStep !== "complete") {
|
||||
await oauthMachine.executeStep(currentState);
|
||||
// In quick mode, we'll just redirect to the authorization URL
|
||||
if (
|
||||
currentState.oauthStep === "authorization_code" &&
|
||||
currentState.authorizationUrl
|
||||
) {
|
||||
// Store the current auth state before redirecting
|
||||
sessionStorage.setItem(
|
||||
SESSION_KEYS.AUTH_DEBUGGER_STATE,
|
||||
JSON.stringify(currentState),
|
||||
);
|
||||
// Open the authorization URL automatically
|
||||
window.location.href = currentState.authorizationUrl;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// After the flow completes or reaches a user-input step, update the app state
|
||||
updateAuthState({
|
||||
...currentState,
|
||||
statusMessage: {
|
||||
type: "info",
|
||||
message: "Starting OAuth authentication process...",
|
||||
message:
|
||||
currentState.oauthStep === "complete"
|
||||
? "Authentication completed successfully"
|
||||
: "Please complete authentication in the opened window and enter the code",
|
||||
},
|
||||
});
|
||||
} catch (error) {
|
||||
|
|
@ -153,7 +196,7 @@ const AuthDebugger = ({
|
|||
} finally {
|
||||
updateAuthState({ isInitiatingAuth: false });
|
||||
}
|
||||
}, [serverUrl, updateAuthState]);
|
||||
}, [serverUrl, updateAuthState, authState]);
|
||||
|
||||
const handleClearOAuth = useCallback(() => {
|
||||
if (serverUrl) {
|
||||
|
|
@ -162,13 +205,7 @@ const AuthDebugger = ({
|
|||
);
|
||||
serverAuthProvider.clear();
|
||||
updateAuthState({
|
||||
oauthTokens: null,
|
||||
oauthStep: "metadata_discovery",
|
||||
latestError: null,
|
||||
oauthClientInfo: null,
|
||||
authorizationCode: "",
|
||||
validationError: null,
|
||||
oauthMetadata: null,
|
||||
...EMPTY_DEBUGGER_STATE,
|
||||
statusMessage: {
|
||||
type: "success",
|
||||
message: "OAuth tokens cleared successfully",
|
||||
|
|
@ -208,52 +245,48 @@ const AuthDebugger = ({
|
|||
<StatusMessage message={authState.statusMessage} />
|
||||
)}
|
||||
|
||||
{authState.loading ? (
|
||||
<p>Loading authentication status...</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{authState.oauthTokens && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium">Access Token:</p>
|
||||
<div className="bg-muted p-2 rounded-md text-xs overflow-x-auto">
|
||||
{authState.oauthTokens.access_token.substring(0, 25)}...
|
||||
</div>
|
||||
<div className="space-y-4">
|
||||
{authState.oauthTokens && (
|
||||
<div className="space-y-2">
|
||||
<p className="text-sm font-medium">Access Token:</p>
|
||||
<div className="bg-muted p-2 rounded-md text-xs overflow-x-auto">
|
||||
{authState.oauthTokens.access_token.substring(0, 25)}...
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={startOAuthFlow}
|
||||
disabled={authState.isInitiatingAuth}
|
||||
>
|
||||
{authState.oauthTokens
|
||||
? "Guided Token Refresh"
|
||||
: "Guided OAuth Flow"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={handleQuickOAuth}
|
||||
disabled={authState.isInitiatingAuth}
|
||||
>
|
||||
{authState.isInitiatingAuth
|
||||
? "Initiating..."
|
||||
: authState.oauthTokens
|
||||
? "Quick Refresh"
|
||||
: "Quick OAuth Flow"}
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" onClick={handleClearOAuth}>
|
||||
Clear OAuth State
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Choose "Guided" for step-by-step instructions or "Quick" for
|
||||
the standard automatic flow.
|
||||
</p>
|
||||
<div className="flex gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={startOAuthFlow}
|
||||
disabled={authState.isInitiatingAuth}
|
||||
>
|
||||
{authState.oauthTokens
|
||||
? "Guided Token Refresh"
|
||||
: "Guided OAuth Flow"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
onClick={handleQuickOAuth}
|
||||
disabled={authState.isInitiatingAuth}
|
||||
>
|
||||
{authState.isInitiatingAuth
|
||||
? "Initiating..."
|
||||
: authState.oauthTokens
|
||||
? "Quick Refresh"
|
||||
: "Quick OAuth Flow"}
|
||||
</Button>
|
||||
|
||||
<Button variant="outline" onClick={handleClearOAuth}>
|
||||
Clear OAuth State
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Choose "Guided" for step-by-step instructions or "Quick" for
|
||||
the standard automatic flow.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<OAuthFlowProgress
|
||||
|
|
|
|||
|
|
@ -16,10 +16,39 @@ interface DynamicJsonFormProps {
|
|||
const isSimpleObject = (schema: JsonSchemaType): boolean => {
|
||||
const supportedTypes = ["string", "number", "integer", "boolean", "null"];
|
||||
if (supportedTypes.includes(schema.type)) return true;
|
||||
if (schema.type !== "object") return false;
|
||||
return Object.values(schema.properties ?? {}).every((prop) =>
|
||||
supportedTypes.includes(prop.type),
|
||||
);
|
||||
if (schema.type === "object") {
|
||||
return Object.values(schema.properties ?? {}).every((prop) =>
|
||||
supportedTypes.includes(prop.type),
|
||||
);
|
||||
}
|
||||
if (schema.type === "array") {
|
||||
return !!schema.items && isSimpleObject(schema.items);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
const getArrayItemDefault = (schema: JsonSchemaType): JsonValue => {
|
||||
if ("default" in schema && schema.default !== undefined) {
|
||||
return schema.default;
|
||||
}
|
||||
|
||||
switch (schema.type) {
|
||||
case "string":
|
||||
return "";
|
||||
case "number":
|
||||
case "integer":
|
||||
return 0;
|
||||
case "boolean":
|
||||
return false;
|
||||
case "array":
|
||||
return [];
|
||||
case "object":
|
||||
return {};
|
||||
case "null":
|
||||
return null;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
};
|
||||
|
||||
const DynamicJsonForm = ({
|
||||
|
|
@ -113,6 +142,8 @@ const DynamicJsonForm = ({
|
|||
currentValue: JsonValue,
|
||||
path: string[] = [],
|
||||
depth: number = 0,
|
||||
parentSchema?: JsonSchemaType,
|
||||
propertyName?: string,
|
||||
) => {
|
||||
if (
|
||||
depth >= maxDepth &&
|
||||
|
|
@ -122,7 +153,8 @@ const DynamicJsonForm = ({
|
|||
return (
|
||||
<JsonEditor
|
||||
value={JSON.stringify(
|
||||
currentValue ?? generateDefaultValue(propSchema),
|
||||
currentValue ??
|
||||
generateDefaultValue(propSchema, propertyName, parentSchema),
|
||||
null,
|
||||
2,
|
||||
)}
|
||||
|
|
@ -140,6 +172,10 @@ const DynamicJsonForm = ({
|
|||
);
|
||||
}
|
||||
|
||||
// Check if this property is required in the parent schema
|
||||
const isRequired =
|
||||
parentSchema?.required?.includes(propertyName || "") ?? false;
|
||||
|
||||
switch (propSchema.type) {
|
||||
case "string":
|
||||
return (
|
||||
|
|
@ -148,16 +184,11 @@ const DynamicJsonForm = ({
|
|||
value={(currentValue as string) ?? ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
// Allow clearing non-required fields by setting undefined
|
||||
// This preserves the distinction between empty string and unset
|
||||
if (!val && !propSchema.required) {
|
||||
handleFieldChange(path, undefined);
|
||||
} else {
|
||||
handleFieldChange(path, val);
|
||||
}
|
||||
// Always allow setting string values, including empty strings
|
||||
handleFieldChange(path, val);
|
||||
}}
|
||||
placeholder={propSchema.description}
|
||||
required={propSchema.required}
|
||||
required={isRequired}
|
||||
/>
|
||||
);
|
||||
case "number":
|
||||
|
|
@ -167,9 +198,7 @@ const DynamicJsonForm = ({
|
|||
value={(currentValue as number)?.toString() ?? ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
// Allow clearing non-required number fields
|
||||
// This preserves the distinction between 0 and unset
|
||||
if (!val && !propSchema.required) {
|
||||
if (!val && !isRequired) {
|
||||
handleFieldChange(path, undefined);
|
||||
} else {
|
||||
const num = Number(val);
|
||||
|
|
@ -179,7 +208,7 @@ const DynamicJsonForm = ({
|
|||
}
|
||||
}}
|
||||
placeholder={propSchema.description}
|
||||
required={propSchema.required}
|
||||
required={isRequired}
|
||||
/>
|
||||
);
|
||||
case "integer":
|
||||
|
|
@ -190,9 +219,7 @@ const DynamicJsonForm = ({
|
|||
value={(currentValue as number)?.toString() ?? ""}
|
||||
onChange={(e) => {
|
||||
const val = e.target.value;
|
||||
// Allow clearing non-required integer fields
|
||||
// This preserves the distinction between 0 and unset
|
||||
if (!val && !propSchema.required) {
|
||||
if (!val && !isRequired) {
|
||||
handleFieldChange(path, undefined);
|
||||
} else {
|
||||
const num = Number(val);
|
||||
|
|
@ -203,7 +230,7 @@ const DynamicJsonForm = ({
|
|||
}
|
||||
}}
|
||||
placeholder={propSchema.description}
|
||||
required={propSchema.required}
|
||||
required={isRequired}
|
||||
/>
|
||||
);
|
||||
case "boolean":
|
||||
|
|
@ -213,9 +240,135 @@ const DynamicJsonForm = ({
|
|||
checked={(currentValue as boolean) ?? false}
|
||||
onChange={(e) => handleFieldChange(path, e.target.checked)}
|
||||
className="w-4 h-4"
|
||||
required={propSchema.required}
|
||||
required={isRequired}
|
||||
/>
|
||||
);
|
||||
case "object":
|
||||
if (!propSchema.properties) {
|
||||
return (
|
||||
<JsonEditor
|
||||
value={JSON.stringify(currentValue ?? {}, null, 2)}
|
||||
onChange={(newValue) => {
|
||||
try {
|
||||
const parsed = JSON.parse(newValue);
|
||||
handleFieldChange(path, parsed);
|
||||
setJsonError(undefined);
|
||||
} catch (err) {
|
||||
setJsonError(
|
||||
err instanceof Error ? err.message : "Invalid JSON",
|
||||
);
|
||||
}
|
||||
}}
|
||||
error={jsonError}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-2 border rounded p-3">
|
||||
{Object.entries(propSchema.properties).map(([key, subSchema]) => (
|
||||
<div key={key}>
|
||||
<label className="block text-sm font-medium mb-1">
|
||||
{key}
|
||||
{propSchema.required?.includes(key) && (
|
||||
<span className="text-red-500 ml-1">*</span>
|
||||
)}
|
||||
</label>
|
||||
{renderFormFields(
|
||||
subSchema as JsonSchemaType,
|
||||
(currentValue as Record<string, JsonValue>)?.[key],
|
||||
[...path, key],
|
||||
depth + 1,
|
||||
propSchema,
|
||||
key,
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
case "array": {
|
||||
const arrayValue = Array.isArray(currentValue) ? currentValue : [];
|
||||
if (!propSchema.items) return null;
|
||||
|
||||
// If the array items are simple, render as form fields, otherwise use JSON editor
|
||||
if (isSimpleObject(propSchema.items)) {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{propSchema.description && (
|
||||
<p className="text-sm text-gray-600">
|
||||
{propSchema.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{propSchema.items?.description && (
|
||||
<p className="text-sm text-gray-500">
|
||||
Items: {propSchema.items.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
{arrayValue.map((item, index) => (
|
||||
<div key={index} className="flex items-center gap-2">
|
||||
{renderFormFields(
|
||||
propSchema.items as JsonSchemaType,
|
||||
item,
|
||||
[...path, index.toString()],
|
||||
depth + 1,
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const newArray = [...arrayValue];
|
||||
newArray.splice(index, 1);
|
||||
handleFieldChange(path, newArray);
|
||||
}}
|
||||
>
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
const defaultValue = getArrayItemDefault(
|
||||
propSchema.items as JsonSchemaType,
|
||||
);
|
||||
handleFieldChange(path, [...arrayValue, defaultValue]);
|
||||
}}
|
||||
title={
|
||||
propSchema.items?.description
|
||||
? `Add new ${propSchema.items.description}`
|
||||
: "Add new item"
|
||||
}
|
||||
>
|
||||
Add Item
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// For complex arrays, fall back to JSON editor
|
||||
return (
|
||||
<JsonEditor
|
||||
value={JSON.stringify(currentValue ?? [], null, 2)}
|
||||
onChange={(newValue) => {
|
||||
try {
|
||||
const parsed = JSON.parse(newValue);
|
||||
handleFieldChange(path, parsed);
|
||||
setJsonError(undefined);
|
||||
} catch (err) {
|
||||
setJsonError(
|
||||
err instanceof Error ? err.message : "Invalid JSON",
|
||||
);
|
||||
}
|
||||
}}
|
||||
error={jsonError}
|
||||
/>
|
||||
);
|
||||
}
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
155
client/src/components/HistoryAndNotifications.tsx
Normal file
155
client/src/components/HistoryAndNotifications.tsx
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
import { ServerNotification } from "@modelcontextprotocol/sdk/types.js";
|
||||
import { useState } from "react";
|
||||
import JsonView from "./JsonView";
|
||||
|
||||
const HistoryAndNotifications = ({
|
||||
requestHistory,
|
||||
serverNotifications,
|
||||
}: {
|
||||
requestHistory: Array<{ request: string; response?: string }>;
|
||||
serverNotifications: ServerNotification[];
|
||||
}) => {
|
||||
const [expandedRequests, setExpandedRequests] = useState<{
|
||||
[key: number]: boolean;
|
||||
}>({});
|
||||
const [expandedNotifications, setExpandedNotifications] = useState<{
|
||||
[key: number]: boolean;
|
||||
}>({});
|
||||
|
||||
const toggleRequestExpansion = (index: number) => {
|
||||
setExpandedRequests((prev) => ({ ...prev, [index]: !prev[index] }));
|
||||
};
|
||||
|
||||
const toggleNotificationExpansion = (index: number) => {
|
||||
setExpandedNotifications((prev) => ({ ...prev, [index]: !prev[index] }));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-card overflow-hidden flex h-full">
|
||||
<div className="flex-1 overflow-y-auto p-4 border-r">
|
||||
<h2 className="text-lg font-semibold mb-4">History</h2>
|
||||
{requestHistory.length === 0 ? (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 italic">
|
||||
No history yet
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{requestHistory
|
||||
.slice()
|
||||
.reverse()
|
||||
.map((request, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="text-sm text-foreground bg-secondary py-2 px-3 rounded"
|
||||
>
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() =>
|
||||
toggleRequestExpansion(requestHistory.length - 1 - index)
|
||||
}
|
||||
>
|
||||
<span className="font-mono">
|
||||
{requestHistory.length - index}.{" "}
|
||||
{JSON.parse(request.request).method}
|
||||
</span>
|
||||
<span>
|
||||
{expandedRequests[requestHistory.length - 1 - index]
|
||||
? "▼"
|
||||
: "▶"}
|
||||
</span>
|
||||
</div>
|
||||
{expandedRequests[requestHistory.length - 1 - index] && (
|
||||
<>
|
||||
<div className="mt-2">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="font-semibold text-blue-600">
|
||||
Request:
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<JsonView
|
||||
data={request.request}
|
||||
className="bg-background"
|
||||
/>
|
||||
</div>
|
||||
{request.response && (
|
||||
<div className="mt-2">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="font-semibold text-green-600">
|
||||
Response:
|
||||
</span>
|
||||
</div>
|
||||
<JsonView
|
||||
data={request.response}
|
||||
className="bg-background"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
<h2 className="text-lg font-semibold mb-4">Server Notifications</h2>
|
||||
{serverNotifications.length === 0 ? (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 italic">
|
||||
No notifications yet
|
||||
</p>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{serverNotifications
|
||||
.slice()
|
||||
.reverse()
|
||||
.map((notification, index) => (
|
||||
<li
|
||||
key={index}
|
||||
className="text-sm text-foreground bg-secondary py-2 px-3 rounded"
|
||||
>
|
||||
<div
|
||||
className="flex justify-between items-center cursor-pointer"
|
||||
onClick={() =>
|
||||
toggleNotificationExpansion(
|
||||
serverNotifications.length - 1 - index,
|
||||
)
|
||||
}
|
||||
>
|
||||
<span className="font-mono">
|
||||
{serverNotifications.length - index}.{" "}
|
||||
{notification.method}
|
||||
</span>
|
||||
<span>
|
||||
{expandedNotifications[
|
||||
serverNotifications.length - 1 - index
|
||||
]
|
||||
? "▼"
|
||||
: "▶"}
|
||||
</span>
|
||||
</div>
|
||||
{expandedNotifications[
|
||||
serverNotifications.length - 1 - index
|
||||
] && (
|
||||
<div className="mt-2">
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<span className="font-semibold text-purple-600">
|
||||
Details:
|
||||
</span>
|
||||
</div>
|
||||
<JsonView
|
||||
data={JSON.stringify(notification, null, 2)}
|
||||
className="bg-background"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default HistoryAndNotifications;
|
||||
|
|
@ -21,8 +21,8 @@ const ListPane = <T extends object>({
|
|||
buttonText,
|
||||
isButtonDisabled,
|
||||
}: ListPaneProps<T>) => (
|
||||
<div className="bg-card rounded-lg shadow">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-gray-800">
|
||||
<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">
|
||||
|
|
@ -46,7 +46,7 @@ const ListPane = <T extends object>({
|
|||
{items.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center p-2 rounded hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer"
|
||||
className="flex items-center py-2 px-4 rounded hover:bg-gray-50 dark:hover:bg-secondary cursor-pointer"
|
||||
onClick={() => setSelectedItem(item)}
|
||||
>
|
||||
{renderItem(item)}
|
||||
|
|
|
|||
|
|
@ -4,14 +4,17 @@ import {
|
|||
generateOAuthErrorDescription,
|
||||
parseOAuthCallbackParams,
|
||||
} from "@/utils/oauthUtils.ts";
|
||||
import { AuthDebuggerState } from "@/lib/auth-types";
|
||||
|
||||
interface OAuthCallbackProps {
|
||||
onConnect: ({
|
||||
authorizationCode,
|
||||
errorMsg,
|
||||
restoredState,
|
||||
}: {
|
||||
authorizationCode?: string;
|
||||
errorMsg?: string;
|
||||
restoredState?: AuthDebuggerState;
|
||||
}) => void;
|
||||
}
|
||||
|
||||
|
|
@ -35,6 +38,21 @@ const OAuthDebugCallback = ({ onConnect }: OAuthCallbackProps) => {
|
|||
|
||||
const serverUrl = sessionStorage.getItem(SESSION_KEYS.SERVER_URL);
|
||||
|
||||
// Try to restore the auth state
|
||||
const storedState = sessionStorage.getItem(
|
||||
SESSION_KEYS.AUTH_DEBUGGER_STATE,
|
||||
);
|
||||
let restoredState = null;
|
||||
if (storedState) {
|
||||
try {
|
||||
restoredState = JSON.parse(storedState);
|
||||
// Clean up the stored state
|
||||
sessionStorage.removeItem(SESSION_KEYS.AUTH_DEBUGGER_STATE);
|
||||
} catch (e) {
|
||||
console.error("Failed to parse stored auth state:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// ServerURL isn't set, this can happen if we've opened the
|
||||
// authentication request in a new tab, so we don't have the same
|
||||
// session storage
|
||||
|
|
@ -50,8 +68,8 @@ const OAuthDebugCallback = ({ onConnect }: OAuthCallbackProps) => {
|
|||
}
|
||||
|
||||
// Instead of storing in sessionStorage, pass the code directly
|
||||
// to the auth state manager through onConnect
|
||||
onConnect({ authorizationCode: params.code });
|
||||
// to the auth state manager through onConnect, along with restored state
|
||||
onConnect({ authorizationCode: params.code, restoredState });
|
||||
};
|
||||
|
||||
handleCallback().finally(() => {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ import { AuthDebuggerState, OAuthStep } from "@/lib/auth-types";
|
|||
import { CheckCircle2, Circle, ExternalLink } from "lucide-react";
|
||||
import { Button } from "./ui/button";
|
||||
import { DebugInspectorOAuthClientProvider } from "@/lib/auth";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { OAuthClientInformation } from "@modelcontextprotocol/sdk/shared/auth.js";
|
||||
|
||||
interface OAuthStepProps {
|
||||
label: string;
|
||||
|
|
@ -54,24 +56,57 @@ interface OAuthFlowProgressProps {
|
|||
proceedToNextStep: () => Promise<void>;
|
||||
}
|
||||
|
||||
const steps: Array<OAuthStep> = [
|
||||
"metadata_discovery",
|
||||
"client_registration",
|
||||
"authorization_redirect",
|
||||
"authorization_code",
|
||||
"token_request",
|
||||
"complete",
|
||||
];
|
||||
|
||||
export const OAuthFlowProgress = ({
|
||||
serverUrl,
|
||||
authState,
|
||||
updateAuthState,
|
||||
proceedToNextStep,
|
||||
}: OAuthFlowProgressProps) => {
|
||||
const provider = new DebugInspectorOAuthClientProvider(serverUrl);
|
||||
const provider = useMemo(
|
||||
() => new DebugInspectorOAuthClientProvider(serverUrl),
|
||||
[serverUrl],
|
||||
);
|
||||
const [clientInfo, setClientInfo] = useState<OAuthClientInformation | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
const steps: Array<OAuthStep> = [
|
||||
"metadata_discovery",
|
||||
"client_registration",
|
||||
"authorization_redirect",
|
||||
"authorization_code",
|
||||
"token_request",
|
||||
"complete",
|
||||
];
|
||||
const currentStepIdx = steps.findIndex((s) => s === authState.oauthStep);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchClientInfo = async () => {
|
||||
if (authState.oauthClientInfo) {
|
||||
setClientInfo(authState.oauthClientInfo);
|
||||
} else {
|
||||
try {
|
||||
const info = await provider.clientInformation();
|
||||
if (info) {
|
||||
setClientInfo(info);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch client information:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (currentStepIdx > steps.indexOf("client_registration")) {
|
||||
fetchClientInfo();
|
||||
}
|
||||
}, [
|
||||
provider,
|
||||
authState.oauthStep,
|
||||
authState.oauthClientInfo,
|
||||
currentStepIdx,
|
||||
]);
|
||||
|
||||
// Helper to get step props
|
||||
const getStepProps = (stepName: OAuthStep) => ({
|
||||
isComplete:
|
||||
|
|
@ -93,15 +128,86 @@ export const OAuthFlowProgress = ({
|
|||
label="Metadata Discovery"
|
||||
{...getStepProps("metadata_discovery")}
|
||||
>
|
||||
{provider.getServerMetadata() && (
|
||||
{authState.oauthMetadata && (
|
||||
<details className="text-xs mt-2">
|
||||
<summary className="cursor-pointer text-muted-foreground font-medium">
|
||||
Retrieved OAuth Metadata from {serverUrl}
|
||||
/.well-known/oauth-authorization-server
|
||||
OAuth Metadata Sources
|
||||
{!authState.resourceMetadata && " ℹ️"}
|
||||
</summary>
|
||||
<pre className="mt-2 p-2 bg-muted rounded-md overflow-auto max-h-[300px]">
|
||||
{JSON.stringify(provider.getServerMetadata(), null, 2)}
|
||||
</pre>
|
||||
|
||||
{authState.resourceMetadata && (
|
||||
<div className="mt-2">
|
||||
<p className="font-medium">Resource Metadata:</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
From{" "}
|
||||
{
|
||||
new URL(
|
||||
"/.well-known/oauth-protected-resource",
|
||||
serverUrl,
|
||||
).href
|
||||
}
|
||||
</p>
|
||||
<pre className="mt-2 p-2 bg-muted rounded-md overflow-auto max-h-[300px]">
|
||||
{JSON.stringify(authState.resourceMetadata, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{authState.resourceMetadataError && (
|
||||
<div className="mt-2 p-3 border border-blue-300 bg-blue-50 rounded-md">
|
||||
<p className="text-sm font-medium text-blue-700">
|
||||
ℹ️ Problem with resource metadata from{" "}
|
||||
<a
|
||||
href={
|
||||
new URL(
|
||||
"/.well-known/oauth-protected-resource",
|
||||
serverUrl,
|
||||
).href
|
||||
}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-blue-500 hover:text-blue-700"
|
||||
>
|
||||
{
|
||||
new URL(
|
||||
"/.well-known/oauth-protected-resource",
|
||||
serverUrl,
|
||||
).href
|
||||
}
|
||||
</a>
|
||||
</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>
|
||||
<br />
|
||||
{authState.resourceMetadataError.message}
|
||||
{authState.resourceMetadataError instanceof TypeError &&
|
||||
" (This could indicate the endpoint doesn't exist or does not have CORS configured)"}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{authState.oauthMetadata && (
|
||||
<div className="mt-2">
|
||||
<p className="font-medium">Authorization Server Metadata:</p>
|
||||
{authState.authServerUrl && (
|
||||
<p className="text-xs text-muted-foreground">
|
||||
From{" "}
|
||||
{
|
||||
new URL(
|
||||
"/.well-known/oauth-authorization-server",
|
||||
authState.authServerUrl,
|
||||
).href
|
||||
}
|
||||
</p>
|
||||
)}
|
||||
<pre className="mt-2 p-2 bg-muted rounded-md overflow-auto max-h-[300px]">
|
||||
{JSON.stringify(authState.oauthMetadata, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
</details>
|
||||
)}
|
||||
</OAuthStepDetails>
|
||||
|
|
@ -110,13 +216,13 @@ export const OAuthFlowProgress = ({
|
|||
label="Client Registration"
|
||||
{...getStepProps("client_registration")}
|
||||
>
|
||||
{authState.oauthClientInfo && (
|
||||
{clientInfo && (
|
||||
<details className="text-xs mt-2">
|
||||
<summary className="cursor-pointer text-muted-foreground font-medium">
|
||||
Registered Client Information
|
||||
</summary>
|
||||
<pre className="mt-2 p-2 bg-muted rounded-md overflow-auto max-h-[300px]">
|
||||
{JSON.stringify(authState.oauthClientInfo, null, 2)}
|
||||
{JSON.stringify(clientInfo, null, 2)}
|
||||
</pre>
|
||||
</details>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -98,20 +98,20 @@ const PromptsTab = ({
|
|||
setPromptArgs({});
|
||||
}}
|
||||
renderItem={(prompt) => (
|
||||
<>
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="flex-1">{prompt.name}</span>
|
||||
<span className="text-sm text-gray-500">
|
||||
<span className="text-sm text-gray-500 text-left">
|
||||
{prompt.description}
|
||||
</span>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
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">
|
||||
<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">
|
||||
{selectedPrompt ? selectedPrompt.name : "Select a prompt"}
|
||||
</h3>
|
||||
|
|
@ -126,7 +126,7 @@ const PromptsTab = ({
|
|||
) : selectedPrompt ? (
|
||||
<div className="space-y-4">
|
||||
{selectedPrompt.description && (
|
||||
<p className="text-sm text-gray-600">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{selectedPrompt.description}
|
||||
</p>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import ListPane from "./ListPane";
|
|||
import { useEffect, useState } from "react";
|
||||
import { useCompletionState } from "@/lib/hooks/useCompletionState";
|
||||
import JsonView from "./JsonView";
|
||||
import { UriTemplate } from "@modelcontextprotocol/sdk/shared/uriTemplate.js";
|
||||
|
||||
const ResourcesTab = ({
|
||||
resources,
|
||||
|
|
@ -79,10 +80,7 @@ const ResourcesTab = ({
|
|||
template: string,
|
||||
values: Record<string, string>,
|
||||
): string => {
|
||||
return template.replace(
|
||||
/{([^}]+)}/g,
|
||||
(_, key) => values[key] || `{${key}}`,
|
||||
);
|
||||
return new UriTemplate(template).expand(values);
|
||||
};
|
||||
|
||||
const handleTemplateValueChange = async (key: string, value: string) => {
|
||||
|
|
@ -173,8 +171,8 @@ const ResourcesTab = ({
|
|||
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">
|
||||
<div className="bg-card border border-border rounded-lg shadow">
|
||||
<div className="p-4 border-b border-gray-200 dark:border-border flex justify-between items-center">
|
||||
<h3
|
||||
className="font-semibold truncate"
|
||||
title={selectedResource?.name || selectedTemplate?.name}
|
||||
|
|
@ -234,31 +232,30 @@ const ResourcesTab = ({
|
|||
/>
|
||||
) : selectedTemplate ? (
|
||||
<div className="space-y-4">
|
||||
<p className="text-sm text-gray-600">
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{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>
|
||||
);
|
||||
})}
|
||||
{new UriTemplate(
|
||||
selectedTemplate.uriTemplate,
|
||||
).variableNames?.map((key) => {
|
||||
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}
|
||||
|
|
|
|||
|
|
@ -214,8 +214,8 @@ const Sidebar = ({
|
|||
}, [generateMCPServerFile, toast, reportError]);
|
||||
|
||||
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 dark:border-gray-800">
|
||||
<div className="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 dark:border-border">
|
||||
<div className="flex items-center">
|
||||
<h1 className="ml-2 text-lg font-semibold">
|
||||
MCP Inspector v{version}
|
||||
|
|
@ -285,13 +285,28 @@ const Sidebar = ({
|
|||
<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)}
|
||||
className="font-mono"
|
||||
/>
|
||||
{sseUrl ? (
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Input
|
||||
id="sse-url-input"
|
||||
placeholder="URL"
|
||||
value={sseUrl}
|
||||
onChange={(e) => setSseUrl(e.target.value)}
|
||||
className="font-mono"
|
||||
/>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>{sseUrl}</TooltipContent>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Input
|
||||
id="sse-url-input"
|
||||
placeholder="URL"
|
||||
value={sseUrl}
|
||||
onChange={(e) => setSseUrl(e.target.value)}
|
||||
className="font-mono"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Button
|
||||
|
|
@ -646,13 +661,18 @@ const Sidebar = ({
|
|||
}
|
||||
})()}`}
|
||||
/>
|
||||
<span className="text-sm text-gray-600">
|
||||
<span className="text-sm text-gray-600 dark:text-gray-400">
|
||||
{(() => {
|
||||
switch (connectionStatus) {
|
||||
case "connected":
|
||||
return "Connected";
|
||||
case "error":
|
||||
return "Connection Error, is your MCP server running?";
|
||||
case "error": {
|
||||
const hasProxyToken = config.MCP_PROXY_AUTH_TOKEN?.value;
|
||||
if (!hasProxyToken) {
|
||||
return "Connection Error - Did you add the proxy session token in Configuration?";
|
||||
}
|
||||
return "Connection Error - Check if your MCP server is running and proxy token is correct";
|
||||
}
|
||||
case "error-connecting-to-proxy":
|
||||
return "Error Connecting to MCP Inspector Proxy - Check Console logs";
|
||||
default:
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue