feat: API Tester 支持 MCP 模式 + 修复多个 bug
MCP 模式: - 新增浏览器端 MCP 客户端 (SSE + JSON-RPC + initialize 握手) - API Tester 页面双模式: REST API tab + MCP Tools tab - 连接后自动发现 13 个 tools，支持参数编辑和调用 - 与 AI 客户端走完全相同的协议路径 后端修复: - 每个 SSE 连接创建独立 McpServer 实例，支持多客户端并发 - express.json() 移到 SSE 路由之后，避免消费 MCP 请求体 - 新增 GET /api/xhs/login/cookie-check 轻量接口（不打开浏览器） 前端修复: - QR 轮询改用 cookie-check 接口，不再重复打开浏览器窗口 - useLoginStatus 默认不自动请求，避免页面加载触发浏览器 - Header 添加 Token 未配置警告横幅 - tsup clean:false 保护 dist/web 不被清除
This commit is contained in:
+1
-1
@@ -10,7 +10,7 @@
|
||||
"scripts": {
|
||||
"build": "tsup",
|
||||
"build:web": "cd web && npm run build && mkdir -p ../dist/web && cp -r dist/* ../dist/web/",
|
||||
"build:all": "npm run build && npm run build:web",
|
||||
"build:all": "rm -rf dist/index.js dist/index.js.map && npm run build && npm run build:web",
|
||||
"dev": "tsup --watch",
|
||||
"dev:web": "cd web && npm run dev",
|
||||
"start": "node dist/index.js",
|
||||
|
||||
@@ -7,6 +7,7 @@ import { logger } from '../../utils/logger.js';
|
||||
import { classifyError, sanitizeErrorMessage } from '../../utils/errors.js';
|
||||
import { validateMediaPath } from '../../utils/downloader.js';
|
||||
import { rateLimiter } from '../../server/middleware.js';
|
||||
import { cookieStore } from '../../cookie/store.js';
|
||||
|
||||
import { checkLoginStatus, getLoginQRCode, deleteCookies } from './login.js';
|
||||
import { listFeeds } from './feeds.js';
|
||||
@@ -217,6 +218,23 @@ export function createXhsRoutes(browser: BrowserManager): Router {
|
||||
})();
|
||||
});
|
||||
|
||||
// -----------------------------------------------------------------------
|
||||
// GET /login/cookie-check
|
||||
// Lightweight check: does a cookie file exist on disk?
|
||||
// Does NOT open a browser — safe for frequent polling.
|
||||
// -----------------------------------------------------------------------
|
||||
router.get('/login/cookie-check', readRateLimiter, (_req, res) => {
|
||||
void (async () => {
|
||||
try {
|
||||
const state = await cookieStore.load(PLATFORM);
|
||||
const hasCookies = state !== null && state.cookies.length > 0;
|
||||
res.json(successResponse({ hasCookies }) as ApiResponse<{ hasCookies: boolean }>);
|
||||
} catch (err) {
|
||||
handleError(res, err);
|
||||
}
|
||||
})();
|
||||
});
|
||||
|
||||
// =========================================================================
|
||||
// Content browsing
|
||||
// =========================================================================
|
||||
|
||||
+17
-8
@@ -85,9 +85,8 @@ export class AppServer {
|
||||
// -- Constructor ----------------------------------------------------------
|
||||
|
||||
constructor() {
|
||||
// 1. Express app + body parsing
|
||||
// 1. Express app
|
||||
this.app = express();
|
||||
this.app.use(express.json());
|
||||
|
||||
// 2. Security & availability middleware
|
||||
this.app.use(shutdownGuard(() => this.shuttingDown));
|
||||
@@ -97,13 +96,16 @@ export class AppServer {
|
||||
{ name: 'social-mcp', version: PACKAGE_VERSION },
|
||||
);
|
||||
|
||||
// 4. SSE transport endpoints
|
||||
// 4. SSE transport endpoints (BEFORE body parsing — MCP SDK reads raw body)
|
||||
this.setupSseEndpoints();
|
||||
|
||||
// 5. Health endpoint
|
||||
// 5. Body parsing for non-MCP routes
|
||||
this.app.use(express.json());
|
||||
|
||||
// 6. Health endpoint
|
||||
this.setupHealthEndpoint();
|
||||
|
||||
// 6. Bearer token auth for /api/* routes
|
||||
// 7. Bearer token auth for /api/* routes
|
||||
initBearerToken();
|
||||
this.app.use('/api', bearerAuth);
|
||||
|
||||
@@ -245,9 +247,16 @@ export class AppServer {
|
||||
this.transports.delete(sessionId);
|
||||
});
|
||||
|
||||
// Connect the transport to the MCP server. This starts the SSE
|
||||
// stream and sends the initial endpoint event to the client.
|
||||
void this.mcpServer.connect(transport).catch((err: unknown) => {
|
||||
// Each SSE connection needs its own McpServer instance because the
|
||||
// MCP SDK only allows one transport per server at a time.
|
||||
const perSessionMcp = new McpServer(
|
||||
{ name: 'social-mcp', version: PACKAGE_VERSION },
|
||||
);
|
||||
for (const plugin of this.plugins) {
|
||||
plugin.registerTools(perSessionMcp, browserManager);
|
||||
}
|
||||
|
||||
void perSessionMcp.connect(transport).catch((err: unknown) => {
|
||||
logger.error({ err, sessionId }, 'Failed to connect SSE transport to MCP server');
|
||||
this.transports.delete(sessionId);
|
||||
});
|
||||
|
||||
+1
-1
@@ -5,7 +5,7 @@ export default defineConfig({
|
||||
format: ['esm'],
|
||||
target: 'node22',
|
||||
outDir: 'dist',
|
||||
clean: true,
|
||||
clean: false,
|
||||
sourcemap: true,
|
||||
dts: false,
|
||||
splitting: false,
|
||||
|
||||
@@ -27,6 +27,10 @@ export const getLoginQRCode = () =>
|
||||
export const deleteCookies = () =>
|
||||
apiFetch<ApiResponse<{ message: string }>>('/api/xhs/login/cookies', { method: 'DELETE' });
|
||||
|
||||
// Lightweight cookie check (no browser opened)
|
||||
export const checkLoginCookie = () =>
|
||||
apiFetch<ApiResponse<{ hasCookies: boolean }>>('/api/xhs/login/cookie-check');
|
||||
|
||||
// Feeds
|
||||
export const listFeeds = () =>
|
||||
apiFetch<ApiResponse<Feed[]>>('/api/xhs/feeds');
|
||||
|
||||
@@ -0,0 +1,219 @@
|
||||
/**
|
||||
* Lightweight MCP client for the browser.
|
||||
*
|
||||
* Connects via SSE, performs the MCP initialize handshake,
|
||||
* then allows tools/list and tools/call operations.
|
||||
*/
|
||||
|
||||
let sseSessionId: string | null = null;
|
||||
let sseSource: EventSource | null = null;
|
||||
let initialized = false;
|
||||
const pendingResolvers = new Map<number, {
|
||||
resolve: (value: unknown) => void;
|
||||
reject: (reason: unknown) => void;
|
||||
timer: ReturnType<typeof setTimeout>;
|
||||
}>();
|
||||
let jsonRpcId = 1;
|
||||
|
||||
const getBaseUrl = (): string => localStorage.getItem('smcp_server_url') || '';
|
||||
|
||||
export type McpConnectionState = 'disconnected' | 'connecting' | 'connected';
|
||||
|
||||
let connectionState: McpConnectionState = 'disconnected';
|
||||
let onStateChange: ((state: McpConnectionState) => void) | null = null;
|
||||
|
||||
export function onConnectionStateChange(cb: (state: McpConnectionState) => void) {
|
||||
onStateChange = cb;
|
||||
}
|
||||
|
||||
export function getMcpConnectionState(): McpConnectionState {
|
||||
return connectionState;
|
||||
}
|
||||
|
||||
function setState(s: McpConnectionState) {
|
||||
connectionState = s;
|
||||
onStateChange?.(s);
|
||||
}
|
||||
|
||||
/**
|
||||
* Connect to the MCP server via SSE and perform the initialization handshake.
|
||||
*/
|
||||
export async function connect(): Promise<void> {
|
||||
if (sseSource && sseSessionId && initialized) {
|
||||
return;
|
||||
}
|
||||
|
||||
setState('connecting');
|
||||
|
||||
// Step 1: Establish SSE connection and get sessionId
|
||||
await new Promise<void>((resolve, reject) => {
|
||||
const baseUrl = getBaseUrl();
|
||||
const es = new EventSource(`${baseUrl}/sse`);
|
||||
sseSource = es;
|
||||
|
||||
es.addEventListener('endpoint', (ev: MessageEvent) => {
|
||||
const url = new URL(ev.data as string, window.location.origin);
|
||||
sseSessionId = url.searchParams.get('sessionId');
|
||||
resolve();
|
||||
});
|
||||
|
||||
es.addEventListener('message', (ev: MessageEvent) => {
|
||||
try {
|
||||
const data = JSON.parse(ev.data as string) as { id?: number; result?: unknown; error?: unknown };
|
||||
if (data.id != null) {
|
||||
const pending = pendingResolvers.get(data.id);
|
||||
if (pending) {
|
||||
pendingResolvers.delete(pending.timer as unknown as number);
|
||||
clearTimeout(pending.timer);
|
||||
pendingResolvers.delete(data.id);
|
||||
if (data.error) {
|
||||
pending.reject(data.error);
|
||||
} else {
|
||||
pending.resolve(data.result);
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
});
|
||||
|
||||
es.onerror = () => {
|
||||
if (connectionState === 'connecting' && !sseSessionId) {
|
||||
reject(new Error('Failed to connect to MCP SSE endpoint'));
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// Step 2: Send initialize request
|
||||
const initResult = await sendJsonRpc('initialize', {
|
||||
protocolVersion: '2024-11-05',
|
||||
capabilities: {},
|
||||
clientInfo: { name: 'social-mcp-dashboard', version: '0.1.0' },
|
||||
});
|
||||
|
||||
if (!initResult) {
|
||||
throw new Error('Initialize returned empty result');
|
||||
}
|
||||
|
||||
// Step 3: Send initialized notification (no id = notification)
|
||||
await sendNotification('notifications/initialized', {});
|
||||
|
||||
initialized = true;
|
||||
setState('connected');
|
||||
}
|
||||
|
||||
/**
|
||||
* Disconnect from the MCP server.
|
||||
*/
|
||||
export function disconnect() {
|
||||
if (sseSource) {
|
||||
sseSource.close();
|
||||
sseSource = null;
|
||||
}
|
||||
sseSessionId = null;
|
||||
initialized = false;
|
||||
for (const [, p] of pendingResolvers) {
|
||||
clearTimeout(p.timer);
|
||||
p.reject(new Error('Disconnected'));
|
||||
}
|
||||
pendingResolvers.clear();
|
||||
setState('disconnected');
|
||||
}
|
||||
|
||||
export interface McpToolInfo {
|
||||
name: string;
|
||||
description?: string;
|
||||
inputSchema?: {
|
||||
type: string;
|
||||
properties?: Record<string, {
|
||||
type?: string;
|
||||
description?: string;
|
||||
enum?: string[];
|
||||
default?: unknown;
|
||||
items?: unknown;
|
||||
}>;
|
||||
required?: string[];
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* List available MCP tools.
|
||||
*/
|
||||
export async function listTools(): Promise<{ tools: McpToolInfo[] }> {
|
||||
const result = await sendJsonRpc('tools/list', {});
|
||||
return result as { tools: McpToolInfo[] };
|
||||
}
|
||||
|
||||
/**
|
||||
* Call an MCP tool by name with arguments.
|
||||
*/
|
||||
export async function callTool(name: string, args: Record<string, unknown>): Promise<unknown> {
|
||||
return sendJsonRpc('tools/call', { name, arguments: args });
|
||||
}
|
||||
|
||||
/**
|
||||
* Send a JSON-RPC request (with id, expects response).
|
||||
*/
|
||||
function sendJsonRpc(method: string, params: unknown): Promise<unknown> {
|
||||
const id = jsonRpcId++;
|
||||
const baseUrl = getBaseUrl();
|
||||
|
||||
const body = JSON.stringify({
|
||||
jsonrpc: '2.0',
|
||||
id,
|
||||
method,
|
||||
params,
|
||||
});
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const timer = setTimeout(() => {
|
||||
pendingResolvers.delete(id);
|
||||
reject(new Error(`MCP request "${method}" timed out (5m)`));
|
||||
}, 300_000);
|
||||
|
||||
pendingResolvers.set(id, { resolve, reject, timer });
|
||||
|
||||
fetch(`${baseUrl}/messages?sessionId=${sseSessionId}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body,
|
||||
}).then((res) => {
|
||||
if (!res.ok) {
|
||||
clearTimeout(timer);
|
||||
pendingResolvers.delete(id);
|
||||
return res.text().then((text) => {
|
||||
reject(new Error(`POST /messages failed: ${res.status} - ${text}`));
|
||||
});
|
||||
}
|
||||
}).catch((err) => {
|
||||
clearTimeout(timer);
|
||||
pendingResolvers.delete(id);
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Send a JSON-RPC notification (no id, no response expected).
|
||||
*/
|
||||
async function sendNotification(method: string, params: unknown): Promise<void> {
|
||||
const baseUrl = getBaseUrl();
|
||||
|
||||
const body = JSON.stringify({
|
||||
jsonrpc: '2.0',
|
||||
method,
|
||||
params,
|
||||
});
|
||||
|
||||
const res = await fetch(`${baseUrl}/messages?sessionId=${sseSessionId}`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body,
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
throw new Error(`Notification "${method}" failed: ${res.status} - ${text}`);
|
||||
}
|
||||
}
|
||||
+401
-132
@@ -1,16 +1,32 @@
|
||||
import { useState, useCallback } from 'react';
|
||||
import { useState, useCallback, useEffect } from 'react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { Select } from '@/components/ui/Select';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { Tabs } from '@/components/ui/Tabs';
|
||||
import { JsonViewer } from '@/components/ui/JsonViewer';
|
||||
import { Spinner } from '@/components/ui/Spinner';
|
||||
import { API_ENDPOINTS } from '@/lib/constants';
|
||||
import { apiFetch, generateCurl } from '@/api/client';
|
||||
import {
|
||||
connect,
|
||||
disconnect,
|
||||
listTools,
|
||||
callTool,
|
||||
getMcpConnectionState,
|
||||
onConnectionStateChange,
|
||||
type McpToolInfo,
|
||||
type McpConnectionState,
|
||||
} from '@/api/mcp-client';
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Shared types
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
interface HistoryEntry {
|
||||
id: number;
|
||||
method: string;
|
||||
path: string;
|
||||
mode: 'REST' | 'MCP';
|
||||
label: string;
|
||||
status: 'success' | 'error';
|
||||
time: string;
|
||||
duration: number;
|
||||
@@ -19,142 +35,53 @@ interface HistoryEntry {
|
||||
|
||||
let historyId = 0;
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Page
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export function ApiTesterPage() {
|
||||
const [selectedKey, setSelectedKey] = useState<string>(API_ENDPOINTS[0]!.key);
|
||||
const [bodyText, setBodyText] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [mode, setMode] = useState<'rest' | 'mcp'>('rest');
|
||||
const [response, setResponse] = useState<unknown>(null);
|
||||
const [responseStatus, setResponseStatus] = useState<number | null>(null);
|
||||
const [responseStatus, setResponseStatus] = useState<'success' | 'error' | null>(null);
|
||||
const [duration, setDuration] = useState<number | null>(null);
|
||||
const [history, setHistory] = useState<HistoryEntry[]>([]);
|
||||
|
||||
const endpoint = API_ENDPOINTS.find((e) => e.key === selectedKey)!;
|
||||
|
||||
const handleEndpointChange = useCallback((key: string) => {
|
||||
setSelectedKey(key);
|
||||
setResponse(null);
|
||||
setResponseStatus(null);
|
||||
setDuration(null);
|
||||
const ep = API_ENDPOINTS.find((e) => e.key === key);
|
||||
if (ep && 'body' in ep && ep.body) {
|
||||
setBodyText(JSON.stringify(ep.body, null, 2));
|
||||
} else {
|
||||
setBodyText('');
|
||||
}
|
||||
const addHistory = useCallback((entry: Omit<HistoryEntry, 'id'>) => {
|
||||
setHistory((prev) => [{ ...entry, id: historyId++ }, ...prev].slice(0, 30));
|
||||
}, []);
|
||||
|
||||
const handleSend = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setResponse(null);
|
||||
const start = Date.now();
|
||||
try {
|
||||
let body: unknown = undefined;
|
||||
if (bodyText.trim() && endpoint.method !== 'GET') {
|
||||
body = JSON.parse(bodyText);
|
||||
}
|
||||
const res = await apiFetch<unknown>(endpoint.path, {
|
||||
method: endpoint.method,
|
||||
...(body ? { body: JSON.stringify(body) } : {}),
|
||||
});
|
||||
const dur = Date.now() - start;
|
||||
setResponse(res);
|
||||
setResponseStatus(200);
|
||||
setDuration(dur);
|
||||
const entry: HistoryEntry = { id: historyId++, method: endpoint.method, path: endpoint.path, status: 'success', time: new Date().toLocaleTimeString(), duration: dur, response: res };
|
||||
setHistory((prev) => [entry, ...prev].slice(0, 20));
|
||||
} catch (err) {
|
||||
const dur = Date.now() - start;
|
||||
const errData = err instanceof Error ? { error: err.message } : { error: String(err) };
|
||||
setResponse(errData);
|
||||
setResponseStatus((err as { status?: number }).status || 500);
|
||||
setDuration(dur);
|
||||
const entry: HistoryEntry = { id: historyId++, method: endpoint.method, path: endpoint.path, status: 'error', time: new Date().toLocaleTimeString(), duration: dur, response: errData };
|
||||
setHistory((prev) => [entry, ...prev].slice(0, 20));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [endpoint, bodyText]);
|
||||
|
||||
const curl = generateCurl(
|
||||
endpoint.method,
|
||||
endpoint.path,
|
||||
bodyText.trim() && endpoint.method !== 'GET' ? (() => { try { return JSON.parse(bodyText); } catch { return undefined; } })() : undefined,
|
||||
);
|
||||
|
||||
// Group endpoints by category
|
||||
const categories = [...new Set(API_ENDPOINTS.map((e) => e.category))];
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<h1 className="text-2xl font-bold">API Tester</h1>
|
||||
|
||||
<Tabs
|
||||
tabs={[
|
||||
{ key: 'rest', label: 'REST API' },
|
||||
{ key: 'mcp', label: 'MCP Tools' },
|
||||
]}
|
||||
active={mode}
|
||||
onChange={(k) => setMode(k as 'rest' | 'mcp')}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
{/* Left: Request */}
|
||||
<div className="lg:col-span-2 space-y-4">
|
||||
<Card>
|
||||
<h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-3">Request</h2>
|
||||
|
||||
{/* Endpoint selector */}
|
||||
<div className="space-y-3">
|
||||
<Select
|
||||
label="Endpoint"
|
||||
options={categories.flatMap((cat) => [
|
||||
{ value: `__cat_${cat}`, label: `── ${cat} ──` },
|
||||
...API_ENDPOINTS.filter((e) => e.category === cat).map((e) => ({
|
||||
value: e.key,
|
||||
label: `${e.method} ${e.path}`,
|
||||
})),
|
||||
])}
|
||||
value={selectedKey}
|
||||
onChange={(e) => {
|
||||
if (!e.target.value.startsWith('__cat_')) {
|
||||
handleEndpointChange(e.target.value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={endpoint.method === 'GET' ? 'success' : endpoint.method === 'DELETE' ? 'danger' : 'info'}>
|
||||
{endpoint.method}
|
||||
</Badge>
|
||||
<code className="text-sm text-dark-text font-mono">{endpoint.path}</code>
|
||||
</div>
|
||||
|
||||
{/* Body editor */}
|
||||
{endpoint.method !== 'GET' && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm text-dark-muted">Request Body (JSON)</label>
|
||||
<textarea
|
||||
value={bodyText}
|
||||
onChange={(e) => setBodyText(e.target.value)}
|
||||
className="bg-dark-bg border border-dark-border rounded-lg px-3 py-2 text-sm text-dark-text font-mono focus:outline-none focus:border-dark-accent transition-colors resize-y min-h-[120px]"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={() => void handleSend()} loading={loading}>
|
||||
Send Request
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => void navigator.clipboard.writeText(curl)}
|
||||
>
|
||||
Copy cURL
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* cURL preview */}
|
||||
<Card>
|
||||
<h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-2">cURL</h2>
|
||||
<pre className="bg-dark-bg border border-dark-border rounded-lg p-3 text-xs font-mono text-dark-text overflow-x-auto whitespace-pre-wrap">
|
||||
{curl}
|
||||
</pre>
|
||||
</Card>
|
||||
{mode === 'rest' ? (
|
||||
<RestPanel
|
||||
response={response}
|
||||
setResponse={setResponse}
|
||||
setResponseStatus={setResponseStatus}
|
||||
setDuration={setDuration}
|
||||
addHistory={addHistory}
|
||||
/>
|
||||
) : (
|
||||
<McpPanel
|
||||
response={response}
|
||||
setResponse={setResponse}
|
||||
setResponseStatus={setResponseStatus}
|
||||
setDuration={setDuration}
|
||||
addHistory={addHistory}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Response */}
|
||||
{response !== null && (
|
||||
@@ -163,7 +90,7 @@ export function ApiTesterPage() {
|
||||
<h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider">Response</h2>
|
||||
<div className="flex items-center gap-2">
|
||||
{responseStatus && (
|
||||
<Badge variant={responseStatus < 300 ? 'success' : 'danger'}>
|
||||
<Badge variant={responseStatus === 'success' ? 'success' : 'danger'}>
|
||||
{responseStatus}
|
||||
</Badge>
|
||||
)}
|
||||
@@ -177,7 +104,7 @@ export function ApiTesterPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right: History */}
|
||||
{/* History */}
|
||||
<div>
|
||||
<Card>
|
||||
<div className="flex items-center justify-between mb-3">
|
||||
@@ -194,17 +121,23 @@ export function ApiTesterPage() {
|
||||
className="p-2 rounded-lg border border-dark-border/50 hover:bg-dark-hover cursor-pointer text-xs"
|
||||
onClick={() => {
|
||||
setResponse(entry.response);
|
||||
setResponseStatus(entry.status === 'success' ? 200 : 500);
|
||||
setResponseStatus(entry.status);
|
||||
setDuration(entry.duration);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={entry.status === 'success' ? 'success' : 'danger'} className="text-[10px]">
|
||||
{entry.method}
|
||||
<Badge
|
||||
variant={entry.mode === 'MCP' ? 'info' : 'success'}
|
||||
className="text-[10px]"
|
||||
>
|
||||
{entry.mode}
|
||||
</Badge>
|
||||
<span className="font-mono truncate">{entry.path}</span>
|
||||
<span className="font-mono truncate">{entry.label}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-1 text-dark-muted">
|
||||
<Badge variant={entry.status === 'success' ? 'success' : 'danger'} className="text-[10px]">
|
||||
{entry.status}
|
||||
</Badge>
|
||||
<span>{entry.time}</span>
|
||||
<span>{entry.duration}ms</span>
|
||||
</div>
|
||||
@@ -218,3 +151,339 @@ export function ApiTesterPage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// REST Panel
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function RestPanel({
|
||||
setResponse,
|
||||
setResponseStatus,
|
||||
setDuration,
|
||||
addHistory,
|
||||
}: {
|
||||
response: unknown;
|
||||
setResponse: (v: unknown) => void;
|
||||
setResponseStatus: (v: 'success' | 'error' | null) => void;
|
||||
setDuration: (v: number | null) => void;
|
||||
addHistory: (e: Omit<HistoryEntry, 'id'>) => void;
|
||||
}) {
|
||||
const [selectedKey, setSelectedKey] = useState<string>(API_ENDPOINTS[0]!.key);
|
||||
const [bodyText, setBodyText] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const endpoint = API_ENDPOINTS.find((e) => e.key === selectedKey)!;
|
||||
const categories = [...new Set(API_ENDPOINTS.map((e) => e.category))];
|
||||
|
||||
const handleEndpointChange = useCallback((key: string) => {
|
||||
setSelectedKey(key);
|
||||
setResponse(null);
|
||||
setResponseStatus(null);
|
||||
setDuration(null);
|
||||
const ep = API_ENDPOINTS.find((e) => e.key === key);
|
||||
if (ep && 'body' in ep && ep.body) {
|
||||
setBodyText(JSON.stringify(ep.body, null, 2));
|
||||
} else {
|
||||
setBodyText('');
|
||||
}
|
||||
}, [setResponse, setResponseStatus, setDuration]);
|
||||
|
||||
const handleSend = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setResponse(null);
|
||||
const start = Date.now();
|
||||
try {
|
||||
let body: unknown = undefined;
|
||||
if (bodyText.trim() && endpoint.method !== 'GET') {
|
||||
body = JSON.parse(bodyText);
|
||||
}
|
||||
const res = await apiFetch<unknown>(endpoint.path, {
|
||||
method: endpoint.method,
|
||||
...(body ? { body: JSON.stringify(body) } : {}),
|
||||
});
|
||||
const dur = Date.now() - start;
|
||||
setResponse(res);
|
||||
setResponseStatus('success');
|
||||
setDuration(dur);
|
||||
addHistory({ mode: 'REST', label: `${endpoint.method} ${endpoint.path}`, status: 'success', time: new Date().toLocaleTimeString(), duration: dur, response: res });
|
||||
} catch (err) {
|
||||
const dur = Date.now() - start;
|
||||
const errData = err instanceof Error ? { error: err.message } : { error: String(err) };
|
||||
setResponse(errData);
|
||||
setResponseStatus('error');
|
||||
setDuration(dur);
|
||||
addHistory({ mode: 'REST', label: `${endpoint.method} ${endpoint.path}`, status: 'error', time: new Date().toLocaleTimeString(), duration: dur, response: errData });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [endpoint, bodyText, setResponse, setResponseStatus, setDuration, addHistory]);
|
||||
|
||||
const curl = generateCurl(
|
||||
endpoint.method,
|
||||
endpoint.path,
|
||||
bodyText.trim() && endpoint.method !== 'GET' ? (() => { try { return JSON.parse(bodyText) as unknown; } catch { return undefined; } })() : undefined,
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-3">REST Request</h2>
|
||||
<div className="space-y-3">
|
||||
<Select
|
||||
label="Endpoint"
|
||||
options={categories.flatMap((cat) => [
|
||||
{ value: `__cat_${cat}`, label: `── ${cat} ──` },
|
||||
...API_ENDPOINTS.filter((e) => e.category === cat).map((e) => ({
|
||||
value: e.key,
|
||||
label: `${e.method} ${e.path}`,
|
||||
})),
|
||||
])}
|
||||
value={selectedKey}
|
||||
onChange={(e) => {
|
||||
if (!e.target.value.startsWith('__cat_')) {
|
||||
handleEndpointChange(e.target.value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant={endpoint.method === 'GET' ? 'success' : endpoint.method === 'DELETE' ? 'danger' : 'info'}>
|
||||
{endpoint.method}
|
||||
</Badge>
|
||||
<code className="text-sm text-dark-text font-mono">{endpoint.path}</code>
|
||||
</div>
|
||||
{endpoint.method !== 'GET' && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm text-dark-muted">Request Body (JSON)</label>
|
||||
<textarea
|
||||
value={bodyText}
|
||||
onChange={(e) => setBodyText(e.target.value)}
|
||||
className="bg-dark-bg border border-dark-border rounded-lg px-3 py-2 text-sm text-dark-text font-mono focus:outline-none focus:border-dark-accent transition-colors resize-y min-h-[120px]"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-2">
|
||||
<Button onClick={() => void handleSend()} loading={loading}>Send Request</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => void navigator.clipboard.writeText(curl)}>Copy cURL</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card>
|
||||
<h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-2">cURL</h2>
|
||||
<pre className="bg-dark-bg border border-dark-border rounded-lg p-3 text-xs font-mono text-dark-text overflow-x-auto whitespace-pre-wrap">{curl}</pre>
|
||||
</Card>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// MCP Panel
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function McpPanel({
|
||||
setResponse,
|
||||
setResponseStatus,
|
||||
setDuration,
|
||||
addHistory,
|
||||
}: {
|
||||
response: unknown;
|
||||
setResponse: (v: unknown) => void;
|
||||
setResponseStatus: (v: 'success' | 'error' | null) => void;
|
||||
setDuration: (v: number | null) => void;
|
||||
addHistory: (e: Omit<HistoryEntry, 'id'>) => void;
|
||||
}) {
|
||||
const [connState, setConnState] = useState<McpConnectionState>(getMcpConnectionState());
|
||||
const [connecting, setConnecting] = useState(false);
|
||||
const [tools, setTools] = useState<McpToolInfo[]>([]);
|
||||
const [selectedTool, setSelectedTool] = useState('');
|
||||
const [argsText, setArgsText] = useState('{}');
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
onConnectionStateChange(setConnState);
|
||||
return () => onConnectionStateChange(() => {});
|
||||
}, []);
|
||||
|
||||
const handleConnect = useCallback(async () => {
|
||||
setConnecting(true);
|
||||
try {
|
||||
await connect();
|
||||
const result = await listTools();
|
||||
setTools(result.tools);
|
||||
if (result.tools.length > 0 && !selectedTool) {
|
||||
setSelectedTool(result.tools[0]!.name);
|
||||
// Generate default args from schema
|
||||
const schema = result.tools[0]!.inputSchema;
|
||||
setArgsText(generateDefaultArgs(schema));
|
||||
}
|
||||
} catch (err) {
|
||||
setResponse({ error: err instanceof Error ? err.message : String(err) });
|
||||
setResponseStatus('error');
|
||||
} finally {
|
||||
setConnecting(false);
|
||||
}
|
||||
}, [selectedTool, setResponse, setResponseStatus]);
|
||||
|
||||
const handleDisconnect = useCallback(() => {
|
||||
disconnect();
|
||||
setTools([]);
|
||||
setSelectedTool('');
|
||||
}, []);
|
||||
|
||||
const handleToolChange = useCallback((name: string) => {
|
||||
setSelectedTool(name);
|
||||
setResponse(null);
|
||||
setResponseStatus(null);
|
||||
setDuration(null);
|
||||
const tool = tools.find((t) => t.name === name);
|
||||
if (tool) {
|
||||
setArgsText(generateDefaultArgs(tool.inputSchema));
|
||||
}
|
||||
}, [tools, setResponse, setResponseStatus, setDuration]);
|
||||
|
||||
const handleCall = useCallback(async () => {
|
||||
if (!selectedTool) return;
|
||||
setLoading(true);
|
||||
setResponse(null);
|
||||
const start = Date.now();
|
||||
try {
|
||||
let args: Record<string, unknown> = {};
|
||||
if (argsText.trim()) {
|
||||
args = JSON.parse(argsText) as Record<string, unknown>;
|
||||
}
|
||||
const res = await callTool(selectedTool, args);
|
||||
const dur = Date.now() - start;
|
||||
setResponse(res);
|
||||
setResponseStatus('success');
|
||||
setDuration(dur);
|
||||
addHistory({ mode: 'MCP', label: selectedTool, status: 'success', time: new Date().toLocaleTimeString(), duration: dur, response: res });
|
||||
} catch (err) {
|
||||
const dur = Date.now() - start;
|
||||
const errData = err instanceof Error ? { error: err.message } : { error: String(err) };
|
||||
setResponse(errData);
|
||||
setResponseStatus('error');
|
||||
setDuration(dur);
|
||||
addHistory({ mode: 'MCP', label: selectedTool, status: 'error', time: new Date().toLocaleTimeString(), duration: dur, response: errData });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [selectedTool, argsText, setResponse, setResponseStatus, setDuration, addHistory]);
|
||||
|
||||
const currentTool = tools.find((t) => t.name === selectedTool);
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* Connection */}
|
||||
<Card>
|
||||
<h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-3">MCP Connection</h2>
|
||||
<div className="flex items-center gap-3">
|
||||
<Badge variant={connState === 'connected' ? 'success' : connState === 'connecting' ? 'warning' : 'default'}>
|
||||
{connState}
|
||||
</Badge>
|
||||
{connState === 'disconnected' && (
|
||||
<Button size="sm" onClick={() => void handleConnect()} loading={connecting}>
|
||||
Connect
|
||||
</Button>
|
||||
)}
|
||||
{connState === 'connected' && (
|
||||
<>
|
||||
<span className="text-xs text-dark-muted">{tools.length} tools available</span>
|
||||
<Button size="sm" variant="ghost" onClick={handleDisconnect}>Disconnect</Button>
|
||||
</>
|
||||
)}
|
||||
{connState === 'connecting' && <Spinner size="sm" />}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Tool Call */}
|
||||
{connState === 'connected' && tools.length > 0 && (
|
||||
<Card>
|
||||
<h2 className="text-sm font-semibold text-dark-muted uppercase tracking-wider mb-3">MCP Tool Call</h2>
|
||||
<div className="space-y-3">
|
||||
<Select
|
||||
label="Tool"
|
||||
options={tools.map((t) => ({ value: t.name, label: t.name }))}
|
||||
value={selectedTool}
|
||||
onChange={(e) => handleToolChange(e.target.value)}
|
||||
/>
|
||||
|
||||
{/* Tool info */}
|
||||
{currentTool && (
|
||||
<div className="bg-dark-bg rounded-lg p-3 text-xs space-y-2">
|
||||
{currentTool.description && (
|
||||
<p className="text-dark-muted">{currentTool.description}</p>
|
||||
)}
|
||||
{currentTool.inputSchema?.properties && (
|
||||
<div>
|
||||
<p className="text-dark-muted font-semibold mb-1">Parameters:</p>
|
||||
{Object.entries(currentTool.inputSchema.properties).map(([key, prop]) => (
|
||||
<div key={key} className="flex gap-2 ml-2">
|
||||
<code className="text-dark-accent">{key}</code>
|
||||
<span className="text-dark-muted">
|
||||
{prop.type || ''}
|
||||
{currentTool.inputSchema?.required?.includes(key) ? ' (required)' : ' (optional)'}
|
||||
{prop.description ? ` — ${prop.description}` : ''}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Arguments editor */}
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<label className="text-sm text-dark-muted">Arguments (JSON)</label>
|
||||
<textarea
|
||||
value={argsText}
|
||||
onChange={(e) => setArgsText(e.target.value)}
|
||||
className="bg-dark-bg border border-dark-border rounded-lg px-3 py-2 text-sm text-dark-text font-mono focus:outline-none focus:border-dark-accent transition-colors resize-y min-h-[120px]"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Button onClick={() => void handleCall()} loading={loading}>
|
||||
Call Tool
|
||||
</Button>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{connState === 'disconnected' && (
|
||||
<Card>
|
||||
<div className="text-center py-8 text-dark-muted">
|
||||
<p>Connect to the MCP server to discover and test tools.</p>
|
||||
<p className="text-xs mt-2">This uses the same SSE + JSON-RPC protocol that AI clients use.</p>
|
||||
</div>
|
||||
</Card>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function generateDefaultArgs(schema?: McpToolInfo['inputSchema']): string {
|
||||
if (!schema?.properties) return '{}';
|
||||
const obj: Record<string, unknown> = {};
|
||||
for (const [key, prop] of Object.entries(schema.properties)) {
|
||||
if (prop.default !== undefined) {
|
||||
obj[key] = prop.default;
|
||||
} else if (prop.enum && prop.enum.length > 0) {
|
||||
obj[key] = prop.enum[0];
|
||||
} else if (prop.type === 'string') {
|
||||
obj[key] = '';
|
||||
} else if (prop.type === 'boolean') {
|
||||
obj[key] = false;
|
||||
} else if (prop.type === 'number' || prop.type === 'integer') {
|
||||
obj[key] = 0;
|
||||
} else if (prop.type === 'array') {
|
||||
obj[key] = [];
|
||||
} else {
|
||||
obj[key] = null;
|
||||
}
|
||||
}
|
||||
return JSON.stringify(obj, null, 2);
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@ import { Spinner } from '@/components/ui/Spinner';
|
||||
import { useLoginStatus } from '@/hooks/useLoginStatus';
|
||||
import { useAuth } from '@/context/AuthContext';
|
||||
import { useToast } from '@/context/ToastContext';
|
||||
import { getLoginQRCode, deleteCookies, getLoginStatus } from '@/api/endpoints';
|
||||
import { getLoginQRCode, deleteCookies, checkLoginCookie } from '@/api/endpoints';
|
||||
|
||||
export function LoginPage() {
|
||||
const { status, loading: statusLoading, refresh: refreshStatus } = useLoginStatus();
|
||||
@@ -48,11 +48,11 @@ export function LoginPage() {
|
||||
setCountdown(240); // 4 min
|
||||
pollRef.current = setInterval(async () => {
|
||||
try {
|
||||
const statusRes = await getLoginStatus();
|
||||
if (statusRes.success && statusRes.data?.loggedIn) {
|
||||
const cookieRes = await checkLoginCookie();
|
||||
if (cookieRes.success && cookieRes.data?.hasCookies) {
|
||||
stopPolling();
|
||||
setQrData(null);
|
||||
toast('success', `Logged in as ${statusRes.data.username || 'user'}`);
|
||||
toast('success', 'Login successful!');
|
||||
void refreshStatus();
|
||||
}
|
||||
} catch {
|
||||
|
||||
Reference in New Issue
Block a user