feat: improve request history and tab persistence

- Add failed requests to history with error messages for better debugging
- Persist selected tab in URL hash and restore on page load
- Fix formatting of timeout parameter parsing

🤖 Generated with Claude CLI.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Ben Mann
2024-12-08 21:15:34 +02:00
parent 034699524a
commit 2f513df6c1

View File

@@ -59,7 +59,8 @@ const DEFAULT_REQUEST_TIMEOUT_MSEC = 10000;
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
const PROXY_PORT = params.get("proxyPort") ?? "3000"; const PROXY_PORT = params.get("proxyPort") ?? "3000";
const REQUEST_TIMEOUT = parseInt(params.get("timeout") ?? "") || DEFAULT_REQUEST_TIMEOUT_MSEC; const REQUEST_TIMEOUT =
parseInt(params.get("timeout") ?? "") || DEFAULT_REQUEST_TIMEOUT_MSEC;
const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`; const PROXY_SERVER_URL = `http://localhost:${PROXY_PORT}`;
const App = () => { const App = () => {
@@ -217,6 +218,12 @@ const App = () => {
rootsRef.current = roots; rootsRef.current = roots;
}, [roots]); }, [roots]);
useEffect(() => {
if (!window.location.hash) {
window.location.hash = "resources";
}
}, []);
const pushHistory = (request: object, response?: object) => { const pushHistory = (request: object, response?: object) => {
setRequestHistory((prev) => [ setRequestHistory((prev) => [
...prev, ...prev,
@@ -251,10 +258,14 @@ const App = () => {
response = await mcpClient.request(request, schema, { response = await mcpClient.request(request, schema, {
signal: abortController.signal, signal: abortController.signal,
}); });
pushHistory(request, response);
} catch (error) {
const errorMessage = error instanceof Error ? error.message : String(error);
pushHistory(request, { error: errorMessage });
throw error;
} finally { } finally {
clearTimeout(timeoutId); clearTimeout(timeoutId);
} }
pushHistory(request, response);
if (tabKey !== undefined) { if (tabKey !== undefined) {
clearError(tabKey); clearError(tabKey);
@@ -485,7 +496,11 @@ const App = () => {
<div className="flex-1 flex flex-col overflow-hidden"> <div className="flex-1 flex flex-col overflow-hidden">
<div className="flex-1 overflow-auto"> <div className="flex-1 overflow-auto">
{mcpClient ? ( {mcpClient ? (
<Tabs defaultValue="resources" className="w-full p-4"> <Tabs
defaultValue={window.location.hash.slice(1) || "resources"}
className="w-full p-4"
onValueChange={(value) => (window.location.hash = value)}
>
<TabsList className="mb-4 p-0"> <TabsList className="mb-4 p-0">
<TabsTrigger value="resources"> <TabsTrigger value="resources">
<Files className="w-4 h-4 mr-2" /> <Files className="w-4 h-4 mr-2" />