\n `;\n\n document.getElementById(\"logoutBtn\")?.addEventListener(\"click\", handleLogout);\n\n // Wire up JWT decode badge\n const badge = document.getElementById(\"idTokenBadge\");\n const decodeContainer = document.getElementById(\"idTokenDecode\");\n if (badge && decodeContainer && decoded) {\n badge.addEventListener(\"click\", () => {\n if (decodeContainer.children.length === 0) {\n // Build decode view\n const wrapper = document.createElement(\"div\");\n wrapper.className = \"jwt-decoded visible\";\n\n const headerSection = document.createElement(\"div\");\n const headerTitle = document.createElement(\"div\");\n headerTitle.className = \"jwt-section-header\";\n headerTitle.textContent = \"Header\";\n const headerBody = document.createElement(\"div\");\n headerBody.className = \"jwt-section-body\";\n const headerPre = document.createElement(\"pre\");\n headerPre.textContent = JSON.stringify(decoded.header, null, 2);\n headerBody.appendChild(headerPre);\n headerSection.appendChild(headerTitle);\n headerSection.appendChild(headerBody);\n wrapper.appendChild(headerSection);\n\n const payloadSection = document.createElement(\"div\");\n const payloadTitle = document.createElement(\"div\");\n payloadTitle.className = \"jwt-section-header\";\n payloadTitle.textContent = \"Payload\";\n const payloadBody = document.createElement(\"div\");\n payloadBody.className = \"jwt-section-body\";\n const payloadPre = document.createElement(\"pre\");\n payloadPre.textContent = JSON.stringify(decoded.payload, null, 2);\n payloadBody.appendChild(payloadPre);\n payloadSection.appendChild(payloadTitle);\n payloadSection.appendChild(payloadBody);\n wrapper.appendChild(payloadSection);\n\n decodeContainer.appendChild(wrapper);\n } else {\n // Toggle visibility\n const existing = decodeContainer.querySelector(\".jwt-decoded\");\n existing?.classList.toggle(\"visible\");\n }\n });\n }\n } else {\n section.innerHTML = `\n Identity Provider\n \n `;\n document.getElementById(\"loginBtn\")?.addEventListener(\"click\", handleLogin);\n }\n}\n\nasync function handleLogin(): Promise {\n const callbackUrl = (document.getElementById(\"callbackUrl\") as HTMLInputElement)?.value;\n const loginBtn = document.getElementById(\"loginBtn\") as HTMLButtonElement;\n if (loginBtn) loginBtn.disabled = true;\n\n try {\n await startIdpLogin(callbackUrl);\n } catch (err: any) {\n log(`Login failed: ${err.message}`, \"error\");\n if (loginBtn) loginBtn.disabled = false;\n }\n}\n\nfunction handleLogout(): void {\n sessionStorage.removeItem(\"xaa_id_token\");\n sessionStorage.removeItem(\"xaa_access_token\");\n updateLoginUI();\n log(\"Logged out\", \"info\");\n}\n\n// --- App State ---\n\nlet client: Client | null = null;\nlet transport: StreamableHTTPClientTransport | null = null;\nlet oauthProvider: BrowserOAuthProvider | null = null;\n\n// --- App Logic ---\n\nfunction savePreferences(): void {\n const serverSelect = document.getElementById(\n \"serverSelect\"\n ) as HTMLSelectElement;\n const customUrl = document.getElementById(\"customUrl\") as HTMLInputElement;\n if (serverSelect && customUrl) {\n localStorage.setItem(\"mcp_server_select\", serverSelect.value);\n if (serverSelect.value === \"custom\") {\n localStorage.setItem(\"mcp_custom_url\", customUrl.value);\n }\n }\n const usePopup = document.getElementById(\"usePopup\") as HTMLInputElement;\n if (usePopup) {\n localStorage.setItem(\"mcp_use_popup\", usePopup.checked ? \"true\" : \"false\");\n }\n}\n\nfunction loadPreferences(): void {\n const savedServer = localStorage.getItem(\"mcp_server_select\");\n const savedCustomUrl = localStorage.getItem(\"mcp_custom_url\");\n if (savedServer) {\n const serverSelect = document.getElementById(\n \"serverSelect\"\n ) as HTMLSelectElement;\n if (serverSelect) {\n serverSelect.value = savedServer;\n if (savedServer === \"custom\") {\n const customUrlGroup = document.getElementById(\"customUrlGroup\");\n if (customUrlGroup) customUrlGroup.style.display = \"block\";\n if (savedCustomUrl) {\n const customUrl = document.getElementById(\n \"customUrl\"\n ) as HTMLInputElement;\n if (customUrl) customUrl.value = savedCustomUrl;\n }\n }\n }\n }\n const savedPopup = localStorage.getItem(\"mcp_use_popup\");\n if (savedPopup !== null) {\n const usePopup = document.getElementById(\"usePopup\") as HTMLInputElement;\n if (usePopup) usePopup.checked = savedPopup === \"true\";\n }\n}\n\nasync function connectToServer(): Promise {\n const serverSelect = document.getElementById(\n \"serverSelect\"\n ) as HTMLSelectElement;\n const callbackUrl = (\n document.getElementById(\"callbackUrl\") as HTMLInputElement\n )?.value;\n\n let serverUrl: string;\n if (serverSelect.value === \"custom\") {\n serverUrl =\n (document.getElementById(\"customUrl\") as HTMLInputElement)?.value || \"\";\n if (!serverUrl) {\n log(\"Please enter a custom server URL\", \"error\");\n return;\n }\n } else {\n serverUrl = serverSelect.value;\n }\n\n const connectBtn = document.getElementById(\n \"connectBtn\"\n ) as HTMLButtonElement;\n const listToolsBtn = document.getElementById(\n \"listToolsBtn\"\n ) as HTMLButtonElement;\n const disconnectBtn = document.getElementById(\n \"disconnectBtn\"\n ) as HTMLButtonElement;\n\n connectBtn.disabled = true;\n setStatus(\"connecting\");\n\n try {\n let parsedUrl: URL;\n try {\n parsedUrl = new URL(serverUrl);\n } catch {\n log(\"Invalid server URL format\", \"error\");\n connectBtn.disabled = false;\n setStatus(\"disconnected\");\n return;\n }\n\n log(\"Initializing MCP client...\", \"info\");\n log(`Target: ${serverUrl}`, \"info\");\n\n const isXaaDev = parsedUrl.hostname === \"mcp.xaa.dev\";\n\n const clientMetadata: ClientMetadata = {\n client_name: \"MCP Auth Workbench\",\n redirect_uris: [callbackUrl],\n grant_types: [\"authorization_code\", \"refresh_token\"],\n response_types: [\"code\"],\n token_endpoint_auth_method: isXaaDev ? \"client_secret_post\" : \"none\",\n };\n\n const useLocalhostDev = (\n document.getElementById(\"useLocalhostDev\") as HTMLInputElement\n )?.checked;\n\n let clientMetadataUrl: string | undefined;\n if (useLocalhostDev) {\n // localhost dev mode uses http:// which the SDK rejects for CIMD — falls back to DCR\n clientMetadataUrl = undefined;\n log(\"Using localhost development mode\", \"info\");\n } else {\n clientMetadataUrl = `${window.location.origin}/client-metadata.json`;\n }\n\n oauthProvider = new BrowserOAuthProvider(callbackUrl, clientMetadata, clientMetadataUrl);\n\n if (isXaaDev) {\n // Check for id_token — user must be logged in first\n const idToken = sessionStorage.getItem(\"xaa_id_token\");\n if (!idToken) {\n log(\"Please log in with the IdP first before connecting to xaa.dev\", \"error\");\n connectBtn.disabled = false;\n setStatus(\"disconnected\");\n return;\n }\n log(\"Using XAA cross-app auth flow for xaa.dev\", \"info\");\n }\n\n client = new Client(\n { name: \"mcp-auth-workbench\", version: \"1.0.0\" },\n { capabilities: {} }\n );\n\n const fetchWrapper = isXaaDev\n ? applyMiddlewares(\n withProxy(window.location.origin),\n withRequestInspector(),\n withXaaAuth(),\n )(fetch)\n : applyMiddlewares(\n withProxy(window.location.origin),\n withRequestInspector(),\n withOAuth(oauthProvider, parsedUrl),\n )(fetch);\n\n transport = new StreamableHTTPClientTransport(parsedUrl, {\n fetch: fetchWrapper,\n });\n\n try {\n log(\"Connecting to server...\", \"info\");\n await client.connect(transport);\n log(\"Successfully connected to MCP server!\", \"success\");\n setStatus(\"connected\");\n } catch (error: any) {\n if (\n !isXaaDev &&\n (error instanceof UnauthorizedError ||\n error.message === \"Unauthorized\")\n ) {\n log(\n \"OAuth required - waiting for authorization code...\",\n \"auth\"\n );\n\n const authCode = await oauthProvider!.getAuthCode();\n await transport!.close();\n\n const result = await auth(oauthProvider, {\n serverUrl: parsedUrl,\n authorizationCode: authCode,\n fetchFn: fetchWrapper,\n });\n\n if (result !== \"AUTHORIZED\") {\n throw new UnauthorizedError(\"Failed to authorize\");\n }\n\n transport = new StreamableHTTPClientTransport(parsedUrl, {\n fetch: fetchWrapper,\n });\n\n await client.connect(transport);\n log(\"Successfully connected with authentication!\", \"success\");\n setStatus(\"connected\");\n } else {\n throw error;\n }\n }\n\n connectBtn.disabled = true;\n listToolsBtn.disabled = false;\n disconnectBtn.disabled = false;\n savePreferences();\n } catch (error: any) {\n log(\"Connection error: \" + error.message, \"error\");\n setStatus(\"disconnected\");\n connectBtn.disabled = false;\n }\n}\n\nasync function listTools(): Promise {\n if (!client) {\n log(\"Not connected to server\", \"error\");\n return;\n }\n\n try {\n log(\"Fetching available tools...\", \"info\");\n const result = await client.listTools();\n\n if (result.tools && result.tools.length > 0) {\n log(`Found ${result.tools.length} tools:`, \"success\");\n result.tools.forEach((tool: any) => {\n log(` \\u2022 ${tool.name}: ${tool.description || \"(no description)\"}`, \"info\");\n });\n } else {\n log(\"No tools available\", \"info\");\n }\n } catch (error: any) {\n log(\"Error listing tools: \" + error.message, \"error\");\n }\n}\n\nasync function disconnect(): Promise {\n if (transport) {\n try {\n log(\"Disconnecting...\", \"info\");\n await transport.close();\n log(\"Disconnected from server\", \"success\");\n } catch (error: any) {\n log(\"Error disconnecting: \" + error.message, \"error\");\n }\n }\n\n client = null;\n transport = null;\n oauthProvider = null;\n setStatus(\"disconnected\");\n\n const connectBtn = document.getElementById(\n \"connectBtn\"\n ) as HTMLButtonElement;\n const listToolsBtn = document.getElementById(\n \"listToolsBtn\"\n ) as HTMLButtonElement;\n const disconnectBtn = document.getElementById(\n \"disconnectBtn\"\n ) as HTMLButtonElement;\n\n if (connectBtn) connectBtn.disabled = false;\n if (listToolsBtn) listToolsBtn.disabled = true;\n if (disconnectBtn) disconnectBtn.disabled = true;\n}\n\nfunction clearLog(): void {\n const logDiv = document.getElementById(\"log\");\n if (logDiv) {\n logDiv.innerHTML = \"\";\n log(\"Log cleared\", \"info\");\n }\n}\n\nfunction setStatus(status: string): void {\n const statusEl = document.getElementById(\"status\");\n if (!statusEl) return;\n statusEl.className = \"status \" + status;\n statusEl.textContent = status.charAt(0).toUpperCase() + status.slice(1);\n}\n\n// --- Init ---\n\nwindow.addEventListener(\"DOMContentLoaded\", () => {\n loadPreferences();\n sessionStorage.removeItem(\"xaa_access_token\");\n updateLoginUI();\n log(\"MCP Auth Workbench ready\", \"info\");\n\n // Handle auth code or error returned via redirect\n const params = new URLSearchParams(window.location.search);\n const redirectError = params.get(\"error\");\n const redirectCode = params.get(\"code\");\n const idpLoginFlow = sessionStorage.getItem(\"idp_login_flow\");\n\n if (redirectError) {\n const errorDesc = params.get(\"error_description\") || \"\";\n window.history.replaceState({}, \"\", window.location.pathname);\n sessionStorage.removeItem(\"idp_login_flow\");\n sessionStorage.removeItem(\"idp_code_verifier\");\n log(`Authorization error: ${redirectError} — ${errorDesc}`, \"error\");\n } else if (idpLoginFlow === \"active\" && redirectCode) {\n // Returning from IdP login redirect (popup was blocked fallback)\n window.history.replaceState({}, \"\", window.location.pathname);\n log(\"Resuming IdP login flow...\", \"auth\");\n\n const callbackUrl = (\n document.getElementById(\"callbackUrl\") as HTMLInputElement\n )?.value;\n\n const proxyFetch = applyMiddlewares(\n withProxy(window.location.origin),\n withRequestInspector(),\n )(fetch);\n\n completeIdpLogin(redirectCode, callbackUrl, proxyFetch)\n .then((idToken) => {\n const decoded = decodeJWT(idToken);\n const email = decoded?.payload && (decoded.payload as any).sub;\n log(`Logged in as ${email || \"unknown\"}`, \"success\");\n updateLoginUI();\n })\n .catch((err) => {\n log(`IdP login failed: ${err.message}`, \"error\");\n });\n } else if (redirectCode) {\n // Standard OAuth redirect flow (non-XAA)\n window.history.replaceState({}, \"\", window.location.pathname);\n sessionStorage.setItem(\"mcp_auth_code\", redirectCode);\n log(\"Authorization code received via redirect\", \"auth\");\n // Auto-connect with the saved server selection\n setTimeout(() => connectToServer(), 100);\n }\n\n const serverSelect = document.getElementById(\"serverSelect\");\n if (serverSelect) {\n serverSelect.addEventListener(\"change\", (e) => {\n const target = e.target as HTMLSelectElement;\n const customUrlGroup = document.getElementById(\"customUrlGroup\");\n if (customUrlGroup) {\n customUrlGroup.style.display =\n target.value === \"custom\" ? \"block\" : \"none\";\n }\n savePreferences();\n });\n }\n\n const customUrl = document.getElementById(\"customUrl\");\n if (customUrl) {\n customUrl.addEventListener(\"change\", savePreferences);\n }\n\n // Config toggle\n const configToggle = document.getElementById(\"configToggle\");\n const configContent = document.getElementById(\"configContent\");\n if (configToggle && configContent) {\n configToggle.addEventListener(\"click\", () => {\n const expanded = configContent.classList.toggle(\"expanded\");\n configToggle.textContent = expanded ? \"▼ Configuration\" : \"▶ Configuration\";\n });\n }\n\n // Popup toggle — sticky\n document.getElementById(\"usePopup\")?.addEventListener(\"change\", savePreferences);\n\n // Expose scriptable popup toggle for browser automation\n (window as any).setPopupMode = (enabled: boolean) => {\n const checkbox = document.getElementById(\"usePopup\") as HTMLInputElement;\n if (checkbox) checkbox.checked = enabled;\n localStorage.setItem(\"mcp_use_popup\", enabled ? \"true\" : \"false\");\n };\n\n document\n .getElementById(\"connectBtn\")\n ?.addEventListener(\"click\", connectToServer);\n document\n .getElementById(\"listToolsBtn\")\n ?.addEventListener(\"click\", listTools);\n document\n .getElementById(\"disconnectBtn\")\n ?.addEventListener(\"click\", disconnect);\n document\n .getElementById(\"clearLogBtn\")\n ?.addEventListener(\"click\", clearLog);\n});\n\nexport default true;\n","deleted","label",[174,156],"frontend","permalink","https://www.val.town/x/pcarleton/mcp-xaa-client/code/frontend/app.ts","extension","actionData","errors"]