+
+
+
+
+
+
+
+
+ {serverIcon?.src && (
+ 
{
+ e.currentTarget.style.display = "none";
+ }}
+ />
+ )}
+
+
+ + {server.name} +
+ {version && ( + v{version} + )} +
+ {hasError && (
+
+ )}
+
+
+
+ e.stopPropagation()}
+ >
+
+
+
+ {server.connectionStatus === "failed"
+ ? `${connectionStatusLabel} (${server.retryCount})`
+ : connectionStatusLabel}
+
+
+
+ {
+ if (!checked) {
+ onDisconnect(server.id);
+ } else {
+ void handleReconnect();
+ }
+ }}
+ className="cursor-pointer scale-75"
+ />
+
+
+
+
+
+
+ {
+ const shouldForceOAuth =
+ server.useOAuth === true || server.oauthTokens != null;
+ void handleReconnect(
+ shouldForceOAuth ? { forceOAuthFlow: true } : undefined,
+ );
+ }}
+ disabled={
+ isReconnecting ||
+ server.connectionStatus === "connecting" ||
+ server.connectionStatus === "oauth-flow"
+ }
+ className="text-xs cursor-pointer"
+ >
+ {isReconnecting ? (
+
+ onEdit(server)}
+ className="text-xs cursor-pointer"
+ >
+
+ void handleExport()}
+ disabled={isExporting || server.connectionStatus !== "connected"}
+ className="text-xs cursor-pointer"
+ >
+ {isExporting ? (
+
+ {
+ onDisconnect(server.id);
+ onRemove?.(server.id);
+ }}
+ >
+
+
+
+
+ e.stopPropagation()}
+ >
+
+
+ {commandDisplay}
+
+
+
+
+ {hasError && (
+
+ {hasInitInfo && (
+
+ )}
+
+
+
+ )}
+
+ {server.connectionStatus === "failed" && (
+
+ {isErrorExpanded
+ ? server.lastError
+ : server.lastError!.length > 140
+ ? `${server.lastError!.substring(0, 140)}...`
+ : server.lastError}
+
+ {server.lastError!.length > 140 && (
+
+ )}
+ {server.retryCount > 0 && (
+
+ {server.retryCount} retry attempt
+ {server.retryCount !== 1 ? "s" : ""}
+
+ )}
+
+ Having trouble?{" "}
+
+ Check troubleshooting
+
+ )}
+
+ {label}:
+
+ );
+ };
+
+ const renderOAuthTokensSection = () => {
+ if (!isHttpServer || !oauthTokens) return null;
+
+ return (
+ toggleTokenExpansion(tokenKey)}
+ >
+
+ {decoded && (
+
+ {expandedTokens.has(tokenKey) || tokenValue.length <= 50
+ ? tokenValue
+ : `${tokenValue.substring(0, 50)}...`}
+
+
+
+
+ {expandedTokens.has(`${tokenKey}Decoded`) && (
+
+ )}
+
+
+ )}
+
+
+ );
+ };
+
+ const renderIconRow = () => (
+
+ OAuth Tokens
+
+
+ {renderToken("Access Token", oauthTokens.access_token, "accessToken")}
+ {renderToken(
+ "Refresh Token",
+ oauthTokens.refresh_token,
+ "refreshToken",
+ )}
+ {renderToken("ID Token", (oauthTokens as any).id_token, "idToken")}
+
+
+
+ Type: {oauthTokens.token_type || "Bearer"}
+ {oauthTokens.expires_in && (
+ Expires in: {oauthTokens.expires_in}s
+ )}
+ {oauthTokens.scope && Scope: {oauthTokens.scope}}
+
+
+
+ ) : (
+
+ );
+
+ return (
+
+ );
+}
diff --git a/mcpjam-web/src/components/connection/hooks/use-server-form.ts b/mcpjam-web/src/components/connection/hooks/use-server-form.ts
new file mode 100644
index 000000000..ffb89fc9b
--- /dev/null
+++ b/mcpjam-web/src/components/connection/hooks/use-server-form.ts
@@ -0,0 +1,390 @@
+import { useState, useEffect } from "react";
+import type { ServerFormData } from "@/types/server-types";
+import type { ServerWithName } from "@/types/server-types";
+import { hasOAuthConfig, getStoredTokens } from "@/lib/oauth/mcp-oauth";
+import { HOSTED_MODE } from "@/lib/config";
+
+export function useServerForm(server?: ServerWithName) {
+ const [name, setName] = useState("");
+ const [type, setType] = useState<"stdio" | "http">("http");
+ const [commandInput, setCommandInput] = useState("");
+ const [url, setUrl] = useState("");
+
+ const [oauthScopesInput, setOauthScopesInput] = useState("");
+ const [clientId, setClientId] = useState("");
+ const [clientSecret, setClientSecret] = useState("");
+ const [bearerToken, setBearerToken] = useState("");
+ const [authType, setAuthType] = useState<"oauth" | "bearer" | "none">("none");
+ const [useCustomClientId, setUseCustomClientId] = useState(false);
+
+ const [clientIdError, setClientIdError] = useStateIcon
+ {serverIcon?.src ? (
+
+ No icon provided
+
+ )}
+
+
+ );
+}
diff --git a/mcpjam-web/src/components/connection/shared/CustomHeadersSection.tsx b/mcpjam-web/src/components/connection/shared/CustomHeadersSection.tsx
new file mode 100644
index 000000000..ba12f0bc4
--- /dev/null
+++ b/mcpjam-web/src/components/connection/shared/CustomHeadersSection.tsx
@@ -0,0 +1,57 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+
+interface CustomHeadersSectionProps {
+ customHeaders: Array<{ key: string; value: string }>;
+ onAdd: () => void;
+ onRemove: (index: number) => void;
+ onUpdate: (index: number, field: "key" | "value", value: string) => void;
+}
+
+export function CustomHeadersSection({
+ customHeaders,
+ onAdd,
+ onRemove,
+ onUpdate,
+}: CustomHeadersSectionProps) {
+ return (
+
+
+
+
+
+
+
+ {/* Bearer Token Settings */}
+ {showAuthSettings && authType === "bearer" && (
+
+
+ onBearerTokenChange(e.target.value)}
+ placeholder="Enter your bearer token"
+ className="h-10"
+ />
+
+ )}
+
+ {/* OAuth Settings */}
+ {showAuthSettings && authType === "oauth" && (
+
+
+ )}
+
+
+ onOauthScopesChange(e.target.value)}
+ placeholder="mcp:* or custom scopes separated by spaces"
+ className="h-10"
+ />
+
+
+ + Default: mcp:* (space-separated for multiple scopes) +
+
+
+
+ {useCustomClientId && (
+
+ onUseCustomClientIdChange(e.target.checked)}
+ className="rounded"
+ />
+
+
+ + Leave unchecked to use the server's default OAuth flow +
+
+
+ )}
+
+
+ onClientIdChange(e.target.value)}
+ placeholder="Your OAuth Client ID"
+ className={`h-10 ${clientIdError ? "border-red-500" : ""}`}
+ />
+ {clientIdError && (
+
+
+ {clientIdError}
+ )} +
+
+ onClientSecretChange(e.target.value)}
+ placeholder="Your OAuth Client Secret"
+ className={`h-10 ${clientSecretError ? "border-red-500" : ""}`}
+ />
+ {clientSecretError && (
+
+ {clientSecretError}
+ )} ++ Optional for public clients using PKCE +
+
+
+ );
+}
diff --git a/mcpjam-web/src/components/connection/shared/EnvVarsSection.tsx b/mcpjam-web/src/components/connection/shared/EnvVarsSection.tsx
new file mode 100644
index 000000000..916718fae
--- /dev/null
+++ b/mcpjam-web/src/components/connection/shared/EnvVarsSection.tsx
@@ -0,0 +1,98 @@
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ChevronDown, ChevronRight } from "lucide-react";
+
+interface EnvVarsSectionProps {
+ envVars: Array<{ key: string; value: string }>;
+ showEnvVars: boolean;
+ onToggle: () => void;
+ onAdd: () => void;
+ onRemove: (index: number) => void;
+ onUpdate: (index: number, field: "key" | "value", value: string) => void;
+}
+
+export function EnvVarsSection({
+ envVars,
+ showEnvVars,
+ onToggle,
+ onAdd,
+ onRemove,
+ onUpdate,
+}: EnvVarsSectionProps) {
+ return (
+
+
+ Custom Headers
+
+
+
+
+
+ {customHeaders.map((header, index) => (
+
+
+ onUpdate(index, "key", e.target.value)}
+ placeholder="Header-Name"
+ className="flex-1 text-xs"
+ />
+ onUpdate(index, "value", e.target.value)}
+ placeholder="header-value"
+ className="flex-1 text-xs"
+ />
+
+
+ ))}
+
+
+
+ {showEnvVars && envVars.length > 0 && (
+
+ );
+}
diff --git a/mcpjam-web/src/components/evals/ErrorBoundary.tsx b/mcpjam-web/src/components/evals/ErrorBoundary.tsx
new file mode 100644
index 000000000..1a47f8807
--- /dev/null
+++ b/mcpjam-web/src/components/evals/ErrorBoundary.tsx
@@ -0,0 +1,35 @@
+import React from "react";
+
+interface ErrorBoundaryProps {
+ children: React.ReactNode;
+ fallback?: React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+ hasError: boolean;
+}
+
+export class ErrorBoundary extends React.Component<
+ ErrorBoundaryProps,
+ ErrorBoundaryState
+> {
+ constructor(props: ErrorBoundaryProps) {
+ super(props);
+ this.state = { hasError: false };
+ }
+
+ static getDerivedStateFromError(): ErrorBoundaryState {
+ return { hasError: true };
+ }
+
+ componentDidCatch(error: Error) {
+ console.error("ErrorBoundary caught an error:", error);
+ }
+
+ render() {
+ if (this.state.hasError) {
+ return this.props.fallback ?? null;
+ }
+ return this.props.children;
+ }
+}
diff --git a/mcpjam-web/src/components/layout/AppShell.tsx b/mcpjam-web/src/components/layout/AppShell.tsx
new file mode 100644
index 000000000..f7cf260b8
--- /dev/null
+++ b/mcpjam-web/src/components/layout/AppShell.tsx
@@ -0,0 +1,30 @@
+import type { ReactNode } from "react";
+import type { AppRoute } from "../../App";
+import { SidebarNav } from "./SidebarNav";
+import { TopHeader } from "./TopHeader";
+
+interface AppShellProps {
+ route: AppRoute;
+ onNavigate: (route: AppRoute) => void;
+ children: ReactNode;
+}
+
+export function AppShell({ route, onNavigate, children }: AppShellProps) {
+ return (
+
+ {envVars.map((envVar, index) => (
+
+ )}
+
+ {!showEnvVars && (
+
+ onUpdate(index, "key", e.target.value)}
+ placeholder="VARIABLE_NAME"
+ className="flex-1 text-xs"
+ />
+ onUpdate(index, "value", e.target.value)}
+ placeholder="value"
+ className="flex-1 text-xs"
+ />
+
+
+ ))}
+
+
+ )}
+ + Environment variables for your MCP server process (e.g. API keys, + config values) +
+
+
+
+ );
+}
diff --git a/mcpjam-web/src/components/layout/SidebarNav.tsx b/mcpjam-web/src/components/layout/SidebarNav.tsx
new file mode 100644
index 000000000..fc9154e92
--- /dev/null
+++ b/mcpjam-web/src/components/layout/SidebarNav.tsx
@@ -0,0 +1,39 @@
+import type { AppRoute } from "../../App";
+
+interface SidebarNavProps {
+ route: AppRoute;
+ onNavigate: (route: AppRoute) => void;
+ compact?: boolean;
+}
+
+const NAV_ITEMS: Array<{ route: AppRoute; label: string }> = [
+ { route: "servers", label: "Server Connections" },
+ { route: "playground", label: "LLM Playground" },
+];
+
+export function SidebarNav({
+ route,
+ onNavigate,
+ compact = false,
+}: SidebarNavProps) {
+ return (
+
+ );
+}
diff --git a/mcpjam-web/src/components/layout/TopHeader.tsx b/mcpjam-web/src/components/layout/TopHeader.tsx
new file mode 100644
index 000000000..78391881d
--- /dev/null
+++ b/mcpjam-web/src/components/layout/TopHeader.tsx
@@ -0,0 +1,19 @@
+import type { AppRoute } from "../../App";
+
+interface TopHeaderProps {
+ route: AppRoute;
+}
+
+const ROUTE_TITLES: Record
+ {children}
+
+
+
+ MCPJam Web
+ {ROUTE_TITLES[route]}
+ &
"}');
+ expect(html).toContain("<div>&</div>");
+ });
+
+ it("preserves whitespace between tokens", () => {
+ const html = highlightJson('{ "a": 1 }');
+ expect(html).toContain(" ");
+ });
+});
diff --git a/mcpjam-web/src/components/ui/json-editor/__tests__/use-json-editor.test.ts b/mcpjam-web/src/components/ui/json-editor/__tests__/use-json-editor.test.ts
new file mode 100644
index 000000000..8b136a402
--- /dev/null
+++ b/mcpjam-web/src/components/ui/json-editor/__tests__/use-json-editor.test.ts
@@ -0,0 +1,790 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useJsonEditor } from "../use-json-editor";
+
+describe("useJsonEditor", () => {
+ beforeEach(() => {
+ vi.clearAllMocks();
+ });
+
+ describe("initial value handling", () => {
+ it("initializes with provided object value", () => {
+ const initialValue = { name: "John", age: 30 };
+ const { result } = renderHook(() => useJsonEditor({ initialValue }));
+
+ expect(result.current.content).toBe(
+ JSON.stringify(initialValue, null, 2),
+ );
+ expect(result.current.isValid).toBe(true);
+ });
+
+ it("initializes with provided string content", () => {
+ const initialContent = '{"key": "value"}';
+ const { result } = renderHook(() => useJsonEditor({ initialContent }));
+
+ expect(result.current.content).toBe(initialContent);
+ expect(result.current.isValid).toBe(true);
+ });
+
+ it("prefers initialContent over initialValue when both provided", () => {
+ const initialValue = { ignored: true };
+ const initialContent = '{"used": true}';
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue, initialContent }),
+ );
+
+ expect(result.current.content).toBe(initialContent);
+ });
+
+ it("handles null initial value", () => {
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue: null }),
+ );
+
+ expect(result.current.content).toBe("null");
+ expect(result.current.isValid).toBe(true);
+ });
+
+ it("handles array initial value", () => {
+ const initialValue = [1, 2, 3];
+ const { result } = renderHook(() => useJsonEditor({ initialValue }));
+
+ expect(result.current.content).toBe(
+ JSON.stringify(initialValue, null, 2),
+ );
+ expect(result.current.isValid).toBe(true);
+ });
+
+ it("handles primitive initial values", () => {
+ const { result: stringResult } = renderHook(() =>
+ useJsonEditor({ initialValue: "hello" }),
+ );
+ expect(stringResult.current.content).toBe('"hello"');
+
+ const { result: numberResult } = renderHook(() =>
+ useJsonEditor({ initialValue: 42 }),
+ );
+ expect(numberResult.current.content).toBe("42");
+
+ const { result: boolResult } = renderHook(() =>
+ useJsonEditor({ initialValue: true }),
+ );
+ expect(boolResult.current.content).toBe("true");
+ });
+
+ it("falls back to null for undefined initial value", () => {
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue: undefined }),
+ );
+
+ expect(result.current.content).toBe("null");
+ expect(result.current.isValid).toBe(true);
+ });
+ });
+
+ describe("onChange and onRawChange callbacks", () => {
+ it("calls onChange callback with parsed value for valid JSON", () => {
+ const onChange = vi.fn();
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue: {}, onChange }),
+ );
+
+ act(() => {
+ result.current.setContent('{"updated": true}');
+ });
+
+ expect(onChange).toHaveBeenCalledWith({ updated: true });
+ });
+
+ it("does not call onChange for invalid JSON", () => {
+ const onChange = vi.fn();
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue: {}, onChange }),
+ );
+
+ act(() => {
+ result.current.setContent("{invalid json");
+ });
+
+ expect(onChange).not.toHaveBeenCalled();
+ });
+
+ it("calls onRawChange for all content changes", () => {
+ const onRawChange = vi.fn();
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue: {}, onRawChange }),
+ );
+
+ act(() => {
+ result.current.setContent("{invalid");
+ });
+
+ expect(onRawChange).toHaveBeenCalledWith("{invalid");
+ });
+
+ it("calls onRawChange for valid content", () => {
+ const onRawChange = vi.fn();
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue: {}, onRawChange }),
+ );
+
+ act(() => {
+ result.current.setContent('{"valid": true}');
+ });
+
+ expect(onRawChange).toHaveBeenCalledWith('{"valid": true}');
+ });
+
+ it("does not call onChange for whitespace-only valid edits", () => {
+ const onChange = vi.fn();
+ const onRawChange = vi.fn();
+ const { result } = renderHook(() =>
+ useJsonEditor({
+ initialContent: '{"unchanged": true}',
+ onChange,
+ onRawChange,
+ }),
+ );
+
+ act(() => {
+ result.current.setContent('{\n "unchanged": true\n}\n');
+ });
+
+ expect(onRawChange).toHaveBeenCalledWith('{\n "unchanged": true\n}\n');
+ expect(onChange).not.toHaveBeenCalled();
+ });
+
+ it("still calls onChange when parsed JSON changes after whitespace edits", () => {
+ const onChange = vi.fn();
+ const { result } = renderHook(() =>
+ useJsonEditor({
+ initialContent: '{"count": 1}',
+ onChange,
+ }),
+ );
+
+ act(() => {
+ result.current.setContent('{\n "count": 1\n}\n');
+ });
+
+ expect(onChange).not.toHaveBeenCalled();
+
+ act(() => {
+ result.current.setContent('{\n "count": 2\n}\n');
+ });
+
+ expect(onChange).toHaveBeenCalledWith({ count: 2 });
+ });
+ });
+
+ describe("validation", () => {
+ it("validates initial content immediately", () => {
+ const { result: validResult } = renderHook(() =>
+ useJsonEditor({ initialContent: '{"valid": true}' }),
+ );
+ expect(validResult.current.isValid).toBe(true);
+ expect(validResult.current.validationError).toBeNull();
+
+ const { result: invalidResult } = renderHook(() =>
+ useJsonEditor({ initialContent: "{invalid" }),
+ );
+ expect(invalidResult.current.isValid).toBe(false);
+ expect(invalidResult.current.validationError).toEqual(expect.any(String));
+ });
+
+ it("calls onValidationError callback with error", () => {
+ const onValidationError = vi.fn();
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue: {}, onValidationError }),
+ );
+
+ act(() => {
+ result.current.setContent("{bad}");
+ });
+
+ expect(onValidationError).toHaveBeenCalled();
+ const errorArg = onValidationError.mock.calls[0][0];
+ expect(typeof errorArg).toBe("string");
+ expect(errorArg.length).toBeGreaterThan(0);
+ });
+
+ it("calls onValidationError with null when content is valid", () => {
+ const onValidationError = vi.fn();
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue: {}, onValidationError }),
+ );
+
+ act(() => {
+ result.current.setContent('{"valid": true}');
+ });
+
+ expect(onValidationError).toHaveBeenCalledWith(null);
+ });
+ });
+
+ describe("format function", () => {
+ it("formats compact JSON to pretty-printed", () => {
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialContent: '{"a":1,"b":2}' }),
+ );
+
+ act(() => {
+ result.current.format();
+ });
+
+ expect(result.current.content).toBe(
+ JSON.stringify({ a: 1, b: 2 }, null, 2),
+ );
+ });
+
+ it("does not change invalid JSON on format", () => {
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialContent: "{invalid" }),
+ );
+
+ const originalContent = result.current.content;
+
+ act(() => {
+ result.current.format();
+ });
+
+ expect(result.current.content).toBe(originalContent);
+ });
+ });
+
+ describe("reset function", () => {
+ it("resets content to initial value", () => {
+ const initialValue = { original: true };
+ const { result } = renderHook(() => useJsonEditor({ initialValue }));
+
+ const expectedContent = JSON.stringify(initialValue, null, 2);
+
+ act(() => {
+ result.current.setContent('{"changed": true}');
+ });
+
+ act(() => {
+ result.current.reset();
+ });
+
+ expect(result.current.content).toBe(expectedContent);
+ });
+
+ it("resets content to initial raw content when provided", () => {
+ const initialContent = '{"raw": "original"}';
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialContent, initialValue: { ignored: true } }),
+ );
+
+ act(() => {
+ result.current.setContent('{"raw": "changed"}');
+ });
+
+ act(() => {
+ result.current.reset();
+ });
+
+ expect(result.current.content).toBe(initialContent);
+ });
+
+ it("clears validation error on reset", () => {
+ const onValidationError = vi.fn();
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue: {}, onValidationError }),
+ );
+
+ act(() => {
+ result.current.setContent("{invalid");
+ });
+
+ // Verify validation error was set (look for non-null error in calls)
+ const errorCalls = onValidationError.mock.calls.filter(
+ (call) => call[0] !== null,
+ );
+ expect(errorCalls.length).toBeGreaterThan(0);
+
+ act(() => {
+ result.current.reset();
+ });
+
+ expect(result.current.isValid).toBe(true);
+ expect(result.current.validationError).toBeNull();
+ });
+
+ it("calls onValidationError with null on reset", () => {
+ const onValidationError = vi.fn();
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue: {}, onValidationError }),
+ );
+
+ act(() => {
+ result.current.setContent("{invalid");
+ });
+
+ onValidationError.mockClear();
+
+ act(() => {
+ result.current.reset();
+ });
+
+ expect(onValidationError).toHaveBeenCalledWith(null);
+ });
+
+ it("notifies change callbacks on reset", () => {
+ const onChange = vi.fn();
+ const onRawChange = vi.fn();
+ const initialValue = { original: true };
+ const expectedContent = JSON.stringify(initialValue, null, 2);
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue, onChange, onRawChange }),
+ );
+
+ act(() => {
+ result.current.setContent('{"changed": true}');
+ });
+
+ onChange.mockClear();
+ onRawChange.mockClear();
+
+ act(() => {
+ result.current.reset();
+ });
+
+ expect(onRawChange).toHaveBeenCalledWith(expectedContent);
+ expect(onChange).toHaveBeenCalledWith(initialValue);
+ });
+ });
+
+ describe("getParsedValue", () => {
+ it("returns parsed value for valid JSON", () => {
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue: { test: true } }),
+ );
+
+ expect(result.current.getParsedValue()).toEqual({ test: true });
+ });
+
+ it("returns undefined for invalid JSON", () => {
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialContent: "{invalid" }),
+ );
+
+ expect(result.current.getParsedValue()).toBeUndefined();
+ });
+
+ it("returns null for null content", () => {
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialContent: "null" }),
+ );
+
+ expect(result.current.getParsedValue()).toBeNull();
+ });
+
+ it("returns array for array content", () => {
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialContent: "[1, 2, 3]" }),
+ );
+
+ expect(result.current.getParsedValue()).toEqual([1, 2, 3]);
+ });
+ });
+
+ describe("cursor position", () => {
+ it("initializes cursor at line 1, column 1", () => {
+ const { result } = renderHook(() => useJsonEditor({ initialValue: {} }));
+
+ expect(result.current.cursorPosition).toEqual({ line: 1, column: 1 });
+ });
+
+ it("updates cursor position when setCursorPosition is called", () => {
+ const { result } = renderHook(() => useJsonEditor({ initialValue: {} }));
+
+ act(() => {
+ result.current.setCursorPosition({ line: 5, column: 10 });
+ });
+
+ expect(result.current.cursorPosition).toEqual({ line: 5, column: 10 });
+ });
+ });
+
+ describe("undo/redo behavior", () => {
+ it("starts with canUndo false", () => {
+ const { result } = renderHook(() => useJsonEditor({ initialValue: {} }));
+
+ expect(result.current.canUndo).toBe(false);
+ });
+
+ it("starts with canRedo false", () => {
+ const { result } = renderHook(() => useJsonEditor({ initialValue: {} }));
+
+ expect(result.current.canRedo).toBe(false);
+ });
+
+ it("undo function exists and is callable", () => {
+ const { result } = renderHook(() => useJsonEditor({ initialValue: {} }));
+
+ expect(typeof result.current.undo).toBe("function");
+
+ // Should not throw when called with no history
+ act(() => {
+ result.current.undo();
+ });
+ });
+
+ it("redo function exists and is callable", () => {
+ const { result } = renderHook(() => useJsonEditor({ initialValue: {} }));
+
+ expect(typeof result.current.redo).toBe("function");
+
+ // Should not throw when called with no redo history
+ act(() => {
+ result.current.redo();
+ });
+ });
+
+ it("undo restores previous content after change", () => {
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialContent: '{"v": 1}' }),
+ );
+
+ act(() => {
+ result.current.setContent('{"v": 2}');
+ });
+
+ expect(result.current.content).toBe('{"v": 2}');
+
+ act(() => {
+ result.current.undo();
+ });
+
+ expect(result.current.content).toBe('{"v": 1}');
+ });
+
+ it("redo restores content after undo", () => {
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialContent: '{"v": 1}' }),
+ );
+
+ act(() => {
+ result.current.setContent('{"v": 2}');
+ });
+
+ act(() => {
+ result.current.undo();
+ });
+
+ expect(result.current.content).toBe('{"v": 1}');
+
+ act(() => {
+ result.current.redo();
+ });
+
+ expect(result.current.content).toBe('{"v": 2}');
+ });
+
+ it("undo validates restored content", () => {
+ const onValidationError = vi.fn();
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialContent: '{"valid": true}', onValidationError }),
+ );
+
+ // Initial content is valid
+ expect(result.current.isValid).toBe(true);
+
+ act(() => {
+ result.current.setContent("{invalid");
+ });
+
+ // Now invalid
+ expect(onValidationError).toHaveBeenCalled();
+ const lastCall = onValidationError.mock.calls.pop();
+ expect(lastCall[0]).not.toBeNull();
+
+ act(() => {
+ result.current.undo();
+ });
+
+ // After undo, we're back to valid content
+ expect(result.current.isValid).toBe(true);
+ });
+
+ it("undo and redo notify parent callbacks with restored state", () => {
+ const onChange = vi.fn();
+ const onRawChange = vi.fn();
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialContent: '{"v": 1}', onChange, onRawChange }),
+ );
+
+ act(() => {
+ result.current.setContent('{"v": 2}');
+ });
+
+ onChange.mockClear();
+ onRawChange.mockClear();
+
+ act(() => {
+ result.current.undo();
+ });
+
+ expect(onRawChange).toHaveBeenCalledWith('{"v": 1}');
+ expect(onChange).toHaveBeenCalledWith({ v: 1 });
+
+ onChange.mockClear();
+ onRawChange.mockClear();
+
+ act(() => {
+ result.current.redo();
+ });
+
+ expect(onRawChange).toHaveBeenCalledWith('{"v": 2}');
+ expect(onChange).toHaveBeenCalledWith({ v: 2 });
+ });
+ });
+
+ describe("expandJsonStrings", () => {
+ it("expands JSON string fields into objects on init", () => {
+ const initialValue = {
+ toolInput: { elements: '[{"type":"ellipse","x":10}]' },
+ };
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue, expandJsonStrings: true }),
+ );
+
+ const parsed = JSON.parse(result.current.content);
+ expect(parsed.toolInput.elements).toEqual([{ type: "ellipse", x: 10 }]);
+ });
+
+ it("collapses expanded fields back to strings on onChange", () => {
+ const onChange = vi.fn();
+ const initialValue = {
+ toolInput: { elements: '[{"type":"ellipse"}]' },
+ };
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue, onChange, expandJsonStrings: true }),
+ );
+
+ // Modify an unrelated field to trigger onChange
+ const parsed = JSON.parse(result.current.content);
+ parsed.toolInput.elements[0].type = "rectangle";
+ act(() => {
+ result.current.setContent(JSON.stringify(parsed, null, 2));
+ });
+
+ expect(onChange).toHaveBeenCalled();
+ const emitted = onChange.mock.calls[0][0];
+ // elements should be collapsed back to a string
+ expect(typeof emitted.toolInput.elements).toBe("string");
+ expect(JSON.parse(emitted.toolInput.elements)).toEqual([
+ { type: "rectangle" },
+ ]);
+ });
+
+ it("does not fire onChange when content is unchanged (dedup)", () => {
+ const onChange = vi.fn();
+ const initialValue = {
+ toolInput: { elements: '[{"type":"ellipse"}]' },
+ };
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue, onChange, expandJsonStrings: true }),
+ );
+
+ // Re-set same expanded content
+ act(() => {
+ result.current.setContent(result.current.content);
+ });
+
+ expect(onChange).not.toHaveBeenCalled();
+ });
+
+ it("format preserves expansion", () => {
+ const initialValue = {
+ data: '{"nested":"value"}',
+ };
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue, expandJsonStrings: true }),
+ );
+
+ // Compact the content manually
+ const parsed = JSON.parse(result.current.content);
+ act(() => {
+ result.current.setContent(JSON.stringify(parsed));
+ });
+
+ // Format should re-expand
+ act(() => {
+ result.current.format();
+ });
+
+ const formatted = JSON.parse(result.current.content);
+ expect(formatted.data).toEqual({ nested: "value" });
+ });
+
+ it("reset re-expands from original value", () => {
+ const initialValue = {
+ items: "[1,2,3]",
+ };
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue, expandJsonStrings: true }),
+ );
+
+ // Edit content
+ act(() => {
+ result.current.setContent('{"items": [99]}');
+ });
+
+ // Reset
+ act(() => {
+ result.current.reset();
+ });
+
+ const parsed = JSON.parse(result.current.content);
+ expect(parsed.items).toEqual([1, 2, 3]);
+ });
+
+ it("re-expands when value changes externally", () => {
+ const { result, rerender } = renderHook(
+ ({ value }) =>
+ useJsonEditor({ initialValue: value, expandJsonStrings: true }),
+ {
+ initialProps: {
+ value: { data: '{"v":1}' } as unknown,
+ },
+ },
+ );
+
+ let parsed = JSON.parse(result.current.content);
+ expect(parsed.data).toEqual({ v: 1 });
+
+ rerender({ value: { data: '{"v":2}' } });
+
+ parsed = JSON.parse(result.current.content);
+ expect(parsed.data).toEqual({ v: 2 });
+ });
+
+ it("keeps primitive JSON strings as strings", () => {
+ const initialValue = {
+ count: "42",
+ flag: "true",
+ name: "hello",
+ };
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue, expandJsonStrings: true }),
+ );
+
+ const parsed = JSON.parse(result.current.content);
+ // Primitives should NOT be expanded
+ expect(parsed.count).toBe("42");
+ expect(parsed.flag).toBe("true");
+ expect(parsed.name).toBe("hello");
+ });
+
+ it("does not double-stringify when user changes type", () => {
+ const onChange = vi.fn();
+ const initialValue = {
+ data: '{"key":"val"}',
+ };
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue, onChange, expandJsonStrings: true }),
+ );
+
+ // User replaces the expanded object with a string
+ act(() => {
+ result.current.setContent('{\n "data": "plain string"\n}');
+ });
+
+ expect(onChange).toHaveBeenCalled();
+ const emitted = onChange.mock.calls[0][0];
+ // Since original was a string and current is also a string, no collapse needed
+ expect(emitted.data).toBe("plain string");
+ });
+
+ it("sourceContent matches content on init", () => {
+ const initialValue = {
+ toolInput: { elements: '[{"type":"ellipse"}]' },
+ };
+ const { result } = renderHook(() =>
+ useJsonEditor({ initialValue, expandJsonStrings: true }),
+ );
+
+ expect(result.current.sourceContent).toBe(result.current.content);
+ });
+
+ it("sourceContent updates on round-trip (parent echoes onChange)", () => {
+ const onChange = vi.fn();
+ const initialValue = {
+ toolInput: { elements: '[{"type":"ellipse"}]' },
+ };
+ const { result, rerender } = renderHook(
+ ({ value }) =>
+ useJsonEditor({
+ initialValue: value,
+ onChange,
+ expandJsonStrings: true,
+ }),
+ { initialProps: { value: initialValue as unknown } },
+ );
+
+ // Edit content
+ const parsed = JSON.parse(result.current.content);
+ parsed.toolInput.elements[0].type = "rectangle";
+ act(() => {
+ result.current.setContent(JSON.stringify(parsed, null, 2));
+ });
+
+ // Simulate parent echoing back the collapsed onChange value
+ const collapsedValue = onChange.mock.calls[0][0];
+ rerender({ value: collapsedValue });
+
+ // sourceContent should track current editor content after round-trip
+ expect(result.current.sourceContent).toBe(result.current.content);
+ });
+
+ it("sourceContent updates on genuine external change", () => {
+ const { result, rerender } = renderHook(
+ ({ value }) =>
+ useJsonEditor({ initialValue: value, expandJsonStrings: true }),
+ {
+ initialProps: {
+ value: { data: '{"v":1}' } as unknown,
+ },
+ },
+ );
+
+ const initialSourceContent = result.current.sourceContent;
+
+ // External change (not a round-trip)
+ rerender({ value: { data: '{"v":2}' } });
+
+ expect(result.current.sourceContent).not.toBe(initialSourceContent);
+ expect(result.current.sourceContent).toBe(result.current.content);
+ });
+ });
+
+ describe("external value sync", () => {
+ it("syncs content when initialValue prop changes", () => {
+ const { result, rerender } = renderHook(
+ ({ value }) => useJsonEditor({ initialValue: value }),
+ { initialProps: { value: { version: 1 } } },
+ );
+
+ expect(result.current.content).toBe('{\n "version": 1\n}');
+
+ rerender({ value: { version: 2 } });
+
+ expect(result.current.content).toBe('{\n "version": 2\n}');
+ });
+
+ it("syncs content when initialContent prop changes", () => {
+ const { result, rerender } = renderHook(
+ ({ content }) => useJsonEditor({ initialContent: content }),
+ { initialProps: { content: '{"v": 1}' } },
+ );
+
+ expect(result.current.content).toBe('{"v": 1}');
+
+ rerender({ content: '{"v": 2}' });
+
+ expect(result.current.content).toBe('{"v": 2}');
+ });
+ });
+});
diff --git a/mcpjam-web/src/components/ui/json-editor/index.ts b/mcpjam-web/src/components/ui/json-editor/index.ts
new file mode 100644
index 000000000..b3c2a1275
--- /dev/null
+++ b/mcpjam-web/src/components/ui/json-editor/index.ts
@@ -0,0 +1,16 @@
+export { JsonEditor } from "./json-editor";
+export { JsonEditorEdit } from "./json-editor-edit";
+export { JsonEditorToolbar } from "./json-editor-toolbar";
+export { JsonEditorStatusBar } from "./json-editor-status-bar";
+export { JsonTreeView } from "./json-tree-view";
+export { JsonTreeNode } from "./json-tree-node";
+export { TruncatableString } from "./truncatable-string";
+export { useJsonEditor } from "./use-json-editor";
+export { useJsonTreeState } from "./use-json-tree-state";
+export type {
+ JsonEditorProps,
+ JsonEditorMode,
+ CursorPosition,
+ UseJsonEditorOptions,
+ UseJsonEditorReturn,
+} from "./types";
diff --git a/mcpjam-web/src/components/ui/json-editor/json-editor-edit.tsx b/mcpjam-web/src/components/ui/json-editor/json-editor-edit.tsx
new file mode 100644
index 000000000..05a0c7bb0
--- /dev/null
+++ b/mcpjam-web/src/components/ui/json-editor/json-editor-edit.tsx
@@ -0,0 +1,637 @@
+import { useRef, useEffect, useCallback, useState, useMemo } from "react";
+import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual";
+import { cn } from "@/lib/utils";
+import type { CursorPosition } from "./types";
+import { highlightJson } from "./json-syntax-highlighter";
+import { JsonHighlighter } from "./json-highlighter";
+
+// Constants for virtualization and viewport highlighting
+const LINE_HEIGHT = 20; // 20px per line (leading-5)
+const VIEWPORT_BUFFER_LINES = 30; // Buffer lines above/below viewport for highlighting
+const EDITOR_VERTICAL_PADDING = 12; // p-3 top/bottom padding
+const DEFAULT_CHARS_PER_VISUAL_LINE = 80;
+const TAB_SIZE = 2;
+
+interface JsonEditorEditProps {
+ content: string;
+ onChange?: (content: string) => void;
+ onCursorChange?: (position: CursorPosition) => void;
+ onUndo?: () => void;
+ onRedo?: () => void;
+ onEscape?: () => void;
+ isValid?: boolean;
+ readOnly?: boolean;
+ className?: string;
+ height?: string | number;
+ maxHeight?: string | number;
+ showLineNumbers?: boolean;
+ collapseStringsAfterLength?: number;
+ wrapLongLinesInEdit?: boolean;
+}
+
+interface LineLayout {
+ top: number;
+ height: number;
+}
+
+function getCursorPosition(textarea: HTMLTextAreaElement): CursorPosition {
+ const text = textarea.value;
+ const selectionStart = textarea.selectionStart;
+ const textBeforeCursor = text.substring(0, selectionStart);
+ const lines = textBeforeCursor.split("\n");
+ const line = lines.length;
+ const column = lines[lines.length - 1].length + 1;
+ return { line, column };
+}
+
+function getCharsPerVisualLine(textarea: HTMLTextAreaElement): number {
+ const styles = window.getComputedStyle(textarea);
+ const probe = document.createElement("span");
+ probe.textContent = "0";
+ probe.style.font = styles.font;
+ probe.style.position = "absolute";
+ probe.style.visibility = "hidden";
+ probe.style.whiteSpace = "pre";
+ document.body.appendChild(probe);
+ const charWidth = probe.getBoundingClientRect().width;
+ probe.remove();
+
+ if (!Number.isFinite(charWidth) || charWidth <= 0) {
+ return DEFAULT_CHARS_PER_VISUAL_LINE;
+ }
+
+ const paddingLeft = Number.parseFloat(styles.paddingLeft) || 0;
+ const paddingRight = Number.parseFloat(styles.paddingRight) || 0;
+ const availableWidth = textarea.clientWidth - paddingLeft - paddingRight;
+
+ if (availableWidth <= 0) {
+ return DEFAULT_CHARS_PER_VISUAL_LINE;
+ }
+
+ return Math.max(1, Math.floor(availableWidth / charWidth));
+}
+
+function countVisualRows(line: string, charsPerVisualLine: number): number {
+ const expandedLine = line.replace(/\t/g, " ".repeat(TAB_SIZE));
+ const displayLength = expandedLine.length;
+
+ if (displayLength === 0) {
+ return 1;
+ }
+
+ return Math.max(1, Math.ceil(displayLength / charsPerVisualLine));
+}
+
+function buildLineLayouts(
+ lines: string[],
+ lineWrapEnabled: boolean,
+ charsPerVisualLine: number,
+): LineLayout[] {
+ let currentTop = 0;
+
+ return lines.map((line, index) => {
+ const height = lineWrapEnabled
+ ? countVisualRows(line, charsPerVisualLine) * LINE_HEIGHT
+ : LINE_HEIGHT;
+ const top = lineWrapEnabled ? currentTop : index * LINE_HEIGHT;
+ currentTop += height;
+ return { top, height };
+ });
+}
+
+/**
+ * Compute viewport-based highlighting.
+ * Only highlights the visible portion + buffer, using lineLayouts for correct
+ * positioning when line wrapping is enabled.
+ */
+function useViewportHighlight(
+ content: string,
+ scrollTop: number,
+ viewportHeight: number,
+ enabled: boolean,
+ lineLayouts: LineLayout[],
+): { highlightedHtml: string; paddingTop: number; paddingBottom: number } {
+ return useMemo(() => {
+ if (!enabled) {
+ return { highlightedHtml: "", paddingTop: 0, paddingBottom: 0 };
+ }
+
+ const lines = content.split("\n");
+ const totalLines = lines.length;
+
+ if (totalLines === 0) {
+ return { highlightedHtml: "", paddingTop: 0, paddingBottom: 0 };
+ }
+
+ // Find first visible line using lineLayouts (binary search)
+ let lo = 0;
+ let hi = totalLines - 1;
+ while (lo <= hi) {
+ const mid = (lo + hi) >>> 1;
+ const layout = lineLayouts[mid];
+ if (!layout || layout.top + layout.height <= scrollTop) {
+ lo = mid + 1;
+ } else {
+ hi = mid - 1;
+ }
+ }
+ const firstVisibleLine = Math.min(lo, totalLines - 1);
+
+ // Find last visible line
+ const viewBottom = scrollTop + viewportHeight;
+ let lastVisibleLine = firstVisibleLine;
+ for (let i = firstVisibleLine; i < totalLines; i++) {
+ const layout = lineLayouts[i];
+ if (!layout || layout.top >= viewBottom) break;
+ lastVisibleLine = i;
+ }
+
+ // Add buffer
+ const startLine = Math.max(0, firstVisibleLine - VIEWPORT_BUFFER_LINES);
+ const endLine = Math.min(
+ totalLines - 1,
+ lastVisibleLine + VIEWPORT_BUFFER_LINES,
+ );
+
+ const visibleContent = lines.slice(startLine, endLine + 1).join("\n");
+
+ // Compute padding from lineLayouts
+ const startLayout = lineLayouts[startLine];
+ const endLayout = lineLayouts[endLine];
+ const lastLayout = lineLayouts[totalLines - 1];
+ const totalHeight = lastLayout ? lastLayout.top + lastLayout.height : 0;
+
+ const paddingTop = startLayout?.top ?? 0;
+ const paddingBottom = Math.max(
+ 0,
+ totalHeight - (endLayout ? endLayout.top + endLayout.height : 0),
+ );
+
+ return {
+ highlightedHtml: highlightJson(visibleContent),
+ paddingTop,
+ paddingBottom,
+ };
+ }, [content, scrollTop, viewportHeight, enabled, lineLayouts]);
+}
+
+export function JsonEditorEdit({
+ content,
+ onChange,
+ onCursorChange,
+ onUndo,
+ onRedo,
+ onEscape,
+ isValid = true,
+ readOnly = false,
+ className,
+ height,
+ maxHeight,
+ showLineNumbers = true,
+ collapseStringsAfterLength,
+ wrapLongLinesInEdit = false,
+}: JsonEditorEditProps) {
+ const textareaRef = useRef
+ {/* Line numbers - virtualized for performance */}
+ {showLineNumbers && (
+
+
+ )}
+
+ {/* Editor area with overlay */}
+
+ {lineNumberVirtualizer.getVirtualItems().map((virtualRow: VirtualItem) => {
+ const lineNum = virtualRow.index + 1;
+ const lineHeight =
+ lineLayouts[virtualRow.index]?.height ?? LINE_HEIGHT;
+ return (
+
+
+ {lineNum}
+
+ );
+ })}
+
+ {readOnly ? (
+ /* Read-only mode: Use JsonHighlighter with per-value copy */
+
++ ) : ( + <> + {/* Syntax highlighted overlay (behind textarea) - viewport-based for performance */} + + + {/* Active line highlight (only in edit mode) */} + {isFocused && ( + + )} + + {/* Transparent textarea (on top for editing) */} ++