chat.parc.land

\n\n \n

\n\n \n \n\n \n \n \n",[],[184,350],"17aa0382-4ba3-11f0-b321-76b3cceeab13","mcpTools.ts","755b5b5a-42c7-11f0-b3b5-76b3cceeab13","f198e4e8-31a8-4644-b84e-c05e0c6281c1",787,["D",1750182429714],"/**\n * Frontend MCP Tools Utility\n *\n * Handles fetching tools from MCP servers using the centralized client pool.\n * Now uses existing connections instead of creating new ones.\n */\n\nimport type { MCPServerConfig } from \"../../shared/types.ts\";\nimport { MCPClientPool, MCPTool, MCPToolsResult } from \"./mcpClientPool.ts\";\n\nexport { MCPServerConfig, MCPTool, MCPToolsResult };\n\n/**\n * Fetch tools from all enabled MCP servers using client pool\n * @param clientPool - Centralized client pool\n * @returns Promise\n */\nexport async function fetchMCPTools(clientPool: MCPClientPool): Promise {\n try {\n return await clientPool.fetchTools();\n } catch (error: any) {\n return {\n success: false,\n tools: [],\n error: error.message || \"Unknown error occurred\",\n };\n }\n}\n\n/**\n * Fetch tools with caching support using client pool\n * @param clientPool - Centralized client pool\n * @param cacheKey - Optional cache key for localStorage\n * @param maxCacheAge - Maximum cache age in milliseconds (default: 5 minutes)\n * @returns Promise\n */\nexport async function fetchMCPToolsWithCache(\n clientPool: MCPClientPool,\n cacheKey: string = \"mcp_tools_cache\",\n maxCacheAge: number = 0, // disable cache for now //5 * 60 * 1000 // 5 minutes\n): Promise {\n try {\n // Check cache first\n const cached = localStorage.getItem(cacheKey);\n if (cached) {\n const { timestamp, data } = JSON.parse(cached);\n const age = Date.now() - timestamp;\n\n if (age < maxCacheAge) {\n console.log(\"Using cached MCP tools\");\n return {\n success: true,\n tools: data,\n };\n }\n }\n\n // Fetch fresh data using client pool\n const result = await fetchMCPTools(clientPool);\n\n // Cache successful results\n if (result.success) {\n localStorage.setItem(\n cacheKey,\n JSON.stringify({\n timestamp: Date.now(),\n data: result.tools,\n }),\n );\n }\n\n return result;\n } catch (error: any) {\n // If there's an error, try to return cached data as fallback\n const cached = localStorage.getItem(cacheKey);\n if (cached) {\n try {\n const { data } = JSON.parse(cached);\n console.warn(\"Using stale cached tools due to fetch error:\", error);\n return {\n success: true,\n tools: data,\n };\n } catch (cacheError) {\n // Cache is corrupted, clear it\n localStorage.removeItem(cacheKey);\n }\n }\n\n return {\n success: false,\n tools: [],\n error: error.message || \"Unknown error occurred\",\n };\n }\n}\n\n/**\n * Clear the MCP tools cache\n * @param cacheKey - Cache key to clear\n */\nexport function clearMCPToolsCache(cacheKey: string = \"mcp_tools_cache\"): void {\n localStorage.removeItem(cacheKey);\n}\n\n/**\n * Legacy function for backward compatibility - uses direct fetch\n * @deprecated Use fetchMCPTools with clientPool instead\n */\nexport async function fetchMCPToolsDirect(servers: MCPServerConfig[]): Promise {\n try {\n if (!servers || !Array.isArray(servers)) {\n return {\n success: false,\n tools: [],\n error: \"Servers array is required\",\n };\n }\n\n const enabledServers = servers.filter(server => server.enabled && server.url);\n\n if (enabledServers.length === 0) {\n return {\n success: true,\n tools: [],\n };\n }\n\n // Fetch tools from all enabled servers concurrently\n const toolPromises = enabledServers.map(server => fetchToolsFromServerDirect(server));\n const toolArrays = await Promise.all(toolPromises);\n\n // Flatten all tools into a single array\n const allTools = toolArrays.flat();\n\n return {\n success: true,\n tools: allTools,\n };\n } catch (error: any) {\n return {\n success: false,\n tools: [],\n error: error.message || \"Unknown error occurred\",\n };\n }\n}\n\n/**\n * Legacy function - fetch tools from a single MCP server using direct fetch\n * @deprecated Use client pool instead\n */\nasync function fetchToolsFromServerDirect(server: MCPServerConfig): Promise {\n if (!server.enabled || !server.url) {\n return [];\n }\n\n try {\n const headers: Record = {\n \"Content-Type\": \"application/json\",\n };\n\n if (server.authorization_token) {\n headers[\"Authorization\"] = `Bearer ${server.authorization_token}`;\n }\n\n // Create abort controller for timeout\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout\n\n try {\n // First, initialize the connection\n const initResponse = await fetch(server.url, {\n method: \"POST\",\n headers,\n body: JSON.stringify({\n jsonrpc: \"2.0\",\n method: \"initialize\",\n params: {\n protocolVersion: \"2024-11-05\",\n capabilities: {},\n clientInfo: {\n name: \"chat-client\",\n version: \"1.0.0\",\n },\n },\n id: 1,\n }),\n signal: controller.signal,\n });\n\n if (!initResponse.ok) {\n clearTimeout(timeoutId);\n return [];\n }\n\n // Then fetch tools\n const toolsResponse = await fetch(server.url, {\n method: \"POST\",\n headers,\n body: JSON.stringify({\n jsonrpc: \"2.0\",\n method: \"tools/list\",\n params: {},\n id: 2,\n }),\n signal: controller.signal,\n });\n\n clearTimeout(timeoutId);\n\n if (toolsResponse.ok) {\n const data = await toolsResponse.json();\n console.log(`[tools/list response from ${server.name}]`, data);\n\n if (data.result && data.result.tools) {\n return data.result.tools.map((tool: any) => ({\n name: tool.name,\n description: tool.description,\n serverName: server.name,\n serverId: server.id,\n inputSchema: tool.inputSchema,\n }));\n }\n }\n } catch (fetchError: any) {\n clearTimeout(timeoutId);\n\n if (fetchError.name === \"AbortError\") {\n console.warn(`Timeout fetching tools from ${server.name}`);\n } else {\n throw fetchError;\n }\n }\n\n return [];\n } catch (error) {\n console.warn(`Failed to fetch tools from ${server.name}:`, error);\n return [];\n }\n}",[],[184,290,359],"0b38c88e-4ba5-11f0-b755-76b3cceeab13","mcpTesting.ts","096c6ad0-40c7-11f0-bf3c-76b3cceeab13",810,["D",1750183267787],6,"/**\n * Frontend MCP Server Testing Utility\n *\n * Handles testing MCP server connectivity using the centralized client pool.\n * Now uses existing connections instead of creating new ones.\n */\n\nimport type { MCPServerConfig } from \"../../shared/types.ts\";\nimport { MCPClientPool } from \"./mcpClientPool.ts\";\nimport type { MCPTestResult } from \"./mcpClientPool.ts\";\n\nexport { MCPServerConfig };\n\n/**\n * Test MCP server connectivity using existing client pool\n * @param server - MCP server configuration\n * @param clientPool - Centralized client pool\n * @returns Promise\n */\nexport async function testMCPServer(server: MCPServerConfig, clientPool: MCPClientPool): Promise {\n if (!server.url) {\n return {\n success: false,\n error: \"URL is required\",\n };\n }\n\n if (!server.enabled) {\n return {\n success: false,\n error: \"Server is disabled\",\n };\n }\n\n try {\n // Use the client pool to test the server\n return await clientPool.testServer(server.name);\n } catch (error: any) {\n return {\n success: false,\n error: error.message || \"Unknown error occurred\",\n };\n }\n}\n\n/**\n * Test multiple MCP servers using client pool\n * @param servers - Array of MCP server configurations\n * @param clientPool - Centralized client pool\n * @returns Promise>\n */\nexport async function testMCPServers(servers: MCPServerConfig[], clientPool: MCPClientPool): Promise> {\n const enabledServers = servers.filter(server => server.enabled && server.url);\n\n if (enabledServers.length === 0) {\n return {};\n }\n\n // Test all servers concurrently using the client pool\n const testPromises = enabledServers.map(async (server) => {\n const result = await testMCPServer(server, clientPool);\n return { serverId: server.id, result };\n });\n\n const results = await Promise.all(testPromises);\n\n // Convert to record format\n const resultRecord: Record = {};\n results.forEach(({ serverId, result }) => {\n resultRecord[serverId] = result;\n });\n\n return resultRecord;\n}\n\n/**\n * Legacy function for backward compatibility - creates direct fetch test\n * @deprecated Use testMCPServer with clientPool instead\n */\nexport async function testMCPServerDirect(server: MCPServerConfig): Promise {\n if (!server.url) {\n return {\n success: false,\n error: \"URL is required\",\n };\n }\n\n try {\n // Prepare headers\n const headers: Record = {\n \"Content-Type\": \"application/json\",\n };\n\n if (server.authorization_token) {\n headers[\"Authorization\"] = `Bearer ${server.authorization_token}`;\n }\n\n // Create MCP initialize request\n const initializeRequest = {\n jsonrpc: \"2.0\",\n method: \"initialize\",\n params: {\n protocolVersion: \"2024-11-05\",\n capabilities: {},\n clientInfo: {\n name: \"chat-test\",\n version: \"1.0.0\",\n },\n },\n id: 1,\n };\n\n // Make the request with timeout\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout\n\n try {\n const response = await fetch(server.url, {\n method: \"POST\",\n headers,\n body: JSON.stringify(initializeRequest),\n signal: controller.signal,\n });\n\n clearTimeout(timeoutId);\n\n if (response.ok) {\n const data = await response.json();\n\n // Check if it's a valid MCP response\n if (data.jsonrpc === \"2.0\" && (data.result || data.error)) {\n return {\n success: true,\n message: \"MCP server responded successfully\",\n status: response.status,\n };\n } else {\n return {\n success: false,\n error: \"Server responded but not with valid MCP protocol\",\n status: response.status,\n };\n }\n } else {\n return {\n success: false,\n error: `Server returned ${response.status}: ${response.statusText}`,\n status: response.status,\n };\n }\n } catch (fetchError: any) {\n clearTimeout(timeoutId);\n\n if (fetchError.name === \"AbortError\") {\n return {\n success: false,\n error: \"Request timed out - server may be unreachable\",\n };\n }\n\n throw fetchError;\n }\n } catch (error: any) {\n return {\n success: false,\n error: error.message || \"Unknown error occurred\",\n };\n }\n}",[],[184,290,368],"35439d72-4ba3-11f0-802a-76b3cceeab13","mcpPrompts.ts","1a29d93e-40c7-11f0-b724-76b3cceeab13",788,["D",1750182479375],7,"/**\n * Frontend MCP Prompts Utility\n *\n * Handles fetching prompts from MCP servers using the centralized client pool.\n * Now uses existing connections instead of creating new ones.\n */\n\nimport type { MCPServerConfig } from \"../../shared/types.ts\";\nimport { MCPClientPool, MCPPrompt, MCPPromptsResult } from \"./mcpClientPool.ts\";\n\nexport { MCPServerConfig, MCPPrompt, MCPPromptsResult };\n\n/**\n * Fetch prompts from all enabled MCP servers using client pool\n * @param clientPool - Centralized client pool\n * @returns Promise\n */\nexport async function fetchMCPPrompts(clientPool: MCPClientPool): Promise {\n try {\n return await clientPool.fetchPrompts();\n } catch (error: any) {\n return {\n success: false,\n prompts: [],\n error: error.message || \"Unknown error occurred\",\n };\n }\n}\n\n/**\n * Fetch prompts with caching support using client pool\n * @param clientPool - Centralized client pool\n * @param cacheKey - Optional cache key for localStorage\n * @param maxCacheAge - Maximum cache age in milliseconds (default: 5 minutes)\n * @returns Promise\n */\nexport async function fetchMCPPromptsWithCache(\n clientPool: MCPClientPool,\n cacheKey: string = \"mcp_prompts_cache\",\n maxCacheAge: number = 0, // disable cache for now //5 * 60 * 1000 // 5 minutes\n): Promise {\n try {\n // Check cache first\n const cached = localStorage.getItem(cacheKey);\n if (cached) {\n const { timestamp, data } = JSON.parse(cached);\n const age = Date.now() - timestamp;\n\n if (age < maxCacheAge) {\n console.log(\"Using cached MCP prompts\");\n return {\n success: true,\n prompts: data,\n };\n }\n }\n\n // Fetch fresh data using client pool\n const result = await fetchMCPPrompts(clientPool);\n\n // Cache successful results\n if (result.success) {\n localStorage.setItem(\n cacheKey,\n JSON.stringify({\n timestamp: Date.now(),\n data: result.prompts,\n }),\n );\n }\n\n return result;\n } catch (error: any) {\n // If there's an error, try to return cached data as fallback\n const cached = localStorage.getItem(cacheKey);\n if (cached) {\n try {\n const { data } = JSON.parse(cached);\n console.warn(\"Using stale cached prompts due to fetch error:\", error);\n return {\n success: true,\n prompts: data,\n };\n } catch (cacheError) {\n // Cache is corrupted, clear it\n localStorage.removeItem(cacheKey);\n }\n }\n\n return {\n success: false,\n prompts: [],\n error: error.message || \"Unknown error occurred\",\n };\n }\n}\n\n/**\n * Clear the MCP prompts cache\n * @param cacheKey - Cache key to clear\n */\nexport function clearMCPPromptsCache(cacheKey: string = \"mcp_prompts_cache\"): void {\n localStorage.removeItem(cacheKey);\n}\n\n/**\n * Legacy function for backward compatibility - uses direct fetch\n * @deprecated Use fetchMCPPrompts with clientPool instead\n */\nexport async function fetchMCPPromptsDirect(servers: MCPServerConfig[]): Promise {\n try {\n if (!servers || !Array.isArray(servers)) {\n return {\n success: false,\n prompts: [],\n error: \"Servers array is required\",\n };\n }\n\n const enabledServers = servers.filter(server => server.enabled && server.url);\n\n if (enabledServers.length === 0) {\n return {\n success: true,\n prompts: [],\n };\n }\n\n // Fetch prompts from all enabled servers concurrently\n const promptPromises = enabledServers.map(server => fetchPromptsFromServerDirect(server));\n const promptArrays = await Promise.all(promptPromises);\n\n // Flatten all prompts into a single array\n const allPrompts = promptArrays.flat();\n\n // Add a test prompt for development/testing purposes\n const testPrompt: MCPPrompt = {\n name: \"test\",\n description: \"Testing the system\",\n serverName: \"Built-in\",\n serverId: \"builtin\",\n arguments: [{\n name: \"subsystem\",\n description: \"Sub system to test\",\n required: false,\n }],\n };\n\n return {\n success: true,\n prompts: [testPrompt, ...allPrompts],\n };\n } catch (error: any) {\n return {\n success: false,\n prompts: [],\n error: error.message || \"Unknown error occurred\",\n };\n }\n}\n\n/**\n * Legacy function - fetch prompts from a single MCP server using direct fetch\n * @deprecated Use client pool instead\n */\nasync function fetchPromptsFromServerDirect(server: MCPServerConfig): Promise {\n if (!server.enabled || !server.url) {\n return [];\n }\n\n try {\n const headers: Record = {\n \"Content-Type\": \"application/json\",\n };\n\n if (server.authorization_token) {\n headers[\"Authorization\"] = `Bearer ${server.authorization_token}`;\n }\n\n // Create abort controller for timeout\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout\n\n try {\n // First, initialize the connection\n const initResponse = await fetch(server.url, {\n method: \"POST\",\n headers,\n body: JSON.stringify({\n jsonrpc: \"2.0\",\n method: \"initialize\",\n params: {\n protocolVersion: \"2024-11-05\",\n capabilities: {},\n clientInfo: {\n name: \"chat-client\",\n version: \"1.0.0\",\n },\n },\n id: 1,\n }),\n signal: controller.signal,\n });\n\n if (!initResponse.ok) {\n clearTimeout(timeoutId);\n return [];\n }\n\n // Then fetch prompts\n const promptsResponse = await fetch(server.url, {\n method: \"POST\",\n headers,\n body: JSON.stringify({\n jsonrpc: \"2.0\",\n method: \"prompts/list\",\n params: {},\n id: 2,\n }),\n signal: controller.signal,\n });\n\n clearTimeout(timeoutId);\n\n if (promptsResponse.ok) {\n const data = await promptsResponse.json();\n console.log(`[prompts/list response from ${server.name}]`, data);\n\n if (data.result && data.result.prompts) {\n return data.result.prompts.map((prompt: any) => ({\n name: prompt.name,\n description: prompt.description,\n serverName: server.name,\n serverId: server.id,\n arguments: prompt.arguments,\n }));\n }\n }\n } catch (fetchError: any) {\n clearTimeout(timeoutId);\n\n if (fetchError.name === \"AbortError\") {\n console.warn(`Timeout fetching prompts from ${server.name}`);\n } else {\n throw fetchError;\n }\n }\n\n return [];\n } catch (error) {\n console.warn(`Failed to fetch prompts from ${server.name}:`, error);\n return [];\n }\n}",[],[184,290,377],"26c02dd4-4ba2-11f0-9dfc-76b3cceeab13","mcpClientPool.ts","26c02e88-4ba2-11f0-9dfc-76b3cceeab13",777,["D",1750182025531],"/**\n * Centralized MCP Client Pool Utility\n * \n * Provides a unified interface for all MCP operations using existing client connections.\n * Eliminates duplicate client creation and connection logic across the application.\n */\n\nimport type { MCPServerConfig } from \"../../shared/types.ts\";\nimport { MCPClient } from \"./MCPClient.ts\";\n\nexport interface MCPTestResult {\n success: boolean;\n message?: string;\n error?: string;\n status?: number;\n}\n\nexport interface MCPTool {\n name: string;\n description?: string;\n serverName: string;\n serverId: string;\n inputSchema?: any;\n}\n\nexport interface MCPPrompt {\n name: string;\n description?: string;\n serverName: string;\n serverId: string;\n arguments?: Array<{\n name: string;\n description?: string;\n required?: boolean;\n }>;\n}\n\nexport interface MCPToolsResult {\n success: boolean;\n tools: MCPTool[];\n error?: string;\n}\n\nexport interface MCPPromptsResult {\n success: boolean;\n prompts: MCPPrompt[];\n error?: string;\n}\n\n/**\n * Centralized MCP Client Pool\n * Provides unified access to MCP operations using existing client connections\n */\nexport class MCPClientPool {\n constructor(\n private clients: MCPClient[],\n private serverConfigs: MCPServerConfig[] = []\n ) {}\n\n /**\n * Find client by server name with multiple matching strategies\n */\n findByName(serverName: string): MCPClient | null {\n if (!serverName) {\n console.warn(\"[MCPClientPool] No server name provided, trying first available client\");\n return this.clients[0] || null;\n }\n\n // Try multiple ways to match the server name\n const client = this.clients.find(client => {\n // Check serverInfo.name (from MCP initialization)\n if ((client as any).serverInfo?.name === serverName) {\n return true;\n }\n // Check clientInfo.name (fallback)\n if ((client as any).clientInfo?.name === serverName) {\n return true;\n }\n // Check if serverName matches any part of the client info\n const clientStr = JSON.stringify(client).toLowerCase();\n if (clientStr.includes(serverName.toLowerCase())) {\n return true;\n }\n return false;\n });\n\n if (!client) {\n console.warn(`[MCPClientPool] MCP server \"${serverName}\" not found in clients:`, \n this.clients.map(c => ({ \n serverInfo: (c as any).serverInfo, \n clientInfo: (c as any).clientInfo \n }))\n );\n }\n\n return client || null;\n }\n\n /**\n * Find client by server ID\n */\n findById(serverId: string): MCPClient | null {\n const config = this.serverConfigs.find(s => s.id === serverId);\n if (!config) return null;\n return this.findByName(config.name);\n }\n\n /**\n * Get all connected clients\n */\n getConnectedClients(): MCPClient[] {\n return this.clients.filter(client => \n client.isInitialized && client.isInitialized()\n );\n }\n\n /**\n * Test server connectivity using existing client\n */\n async testServer(serverName: string): Promise {\n const client = this.findByName(serverName);\n \n if (!client) {\n return {\n success: false,\n error: `No client available for server \"${serverName}\"`\n };\n }\n\n try {\n // Test basic connectivity by checking if client is initialized\n if (!client.isInitialized()) {\n return {\n success: false,\n error: \"Client not initialized\"\n };\n }\n\n // Try a simple operation to verify connectivity\n await client.listTools().catch(() => []); // Don't fail if tools aren't supported\n \n return {\n success: true,\n message: \"Server responding successfully\"\n };\n } catch (error) {\n return {\n success: false,\n error: error instanceof Error ? error.message : String(error)\n };\n }\n }\n\n /**\n * Fetch tools from all connected servers\n */\n async fetchTools(): Promise {\n try {\n const connectedClients = this.getConnectedClients();\n \n if (connectedClients.length === 0) {\n return {\n success: true,\n tools: []\n };\n }\n\n const toolPromises = connectedClients.map(async (client) => {\n try {\n const serverName = (client as any).serverInfo?.name || \n (client as any).clientInfo?.name || \n \"Unknown\";\n \n const tools = await client.listTools();\n return tools.map((tool: any) => ({\n name: tool.name,\n description: tool.description,\n serverName,\n serverId: serverName, // Use serverName as ID for now\n inputSchema: tool.inputSchema,\n }));\n } catch (error) {\n console.warn(`[MCPClientPool] Failed to fetch tools from client:`, error);\n return [];\n }\n });\n\n const toolArrays = await Promise.all(toolPromises);\n const allTools = toolArrays.flat();\n\n return {\n success: true,\n tools: allTools\n };\n } catch (error) {\n return {\n success: false,\n tools: [],\n error: error instanceof Error ? error.message : String(error)\n };\n }\n }\n\n /**\n * Fetch prompts from all connected servers\n */\n async fetchPrompts(): Promise {\n try {\n const connectedClients = this.getConnectedClients();\n \n if (connectedClients.length === 0) {\n return {\n success: true,\n prompts: []\n };\n }\n\n const promptPromises = connectedClients.map(async (client) => {\n try {\n const serverName = (client as any).serverInfo?.name || \n (client as any).clientInfo?.name || \n \"Unknown\";\n \n const prompts = await client.listPrompts();\n return prompts.map((prompt: any) => ({\n name: prompt.name,\n description: prompt.description,\n serverName,\n serverId: serverName, // Use serverName as ID for now\n arguments: prompt.arguments,\n }));\n } catch (error) {\n console.warn(`[MCPClientPool] Failed to fetch prompts from client:`, error);\n return [];\n }\n });\n\n const promptArrays = await Promise.all(promptPromises);\n const allPrompts = promptArrays.flat();\n\n // Add a test prompt for development/testing purposes\n const testPrompt: MCPPrompt = {\n name: \"test\",\n description: \"Testing the system\",\n serverName: \"Built-in\",\n serverId: \"builtin\",\n arguments: [{\n name: \"subsystem\",\n description: \"Sub system to test\",\n required: false,\n }],\n };\n\n return {\n success: true,\n prompts: [testPrompt, ...allPrompts]\n };\n } catch (error) {\n return {\n success: false,\n prompts: [],\n error: error instanceof Error ? error.message : String(error)\n };\n }\n }\n\n /**\n * Call a tool on a specific server\n */\n async callTool(serverName: string, toolName: string, args: any): Promise {\n const client = this.findByName(serverName);\n \n if (!client) {\n throw new Error(`No client available for server \"${serverName}\"`);\n }\n\n return await client.callTool(toolName, args);\n }\n\n /**\n * Get a prompt from a specific server\n */\n async getPrompt(serverName: string, promptName: string, args?: Record): Promise {\n const client = this.findByName(serverName);\n \n if (!client) {\n throw new Error(`No client available for server \"${serverName}\"`);\n }\n\n return await client.getPrompt(promptName, args);\n }\n\n /**\n * Read a resource from a specific server\n */\n async readResource(serverName: string, uri: string): Promise {\n const client = this.findByName(serverName);\n \n if (!client) {\n throw new Error(`No client available for server \"${serverName}\"`);\n }\n\n return await client.readResource(uri);\n }\n\n /**\n * List resources from all connected servers\n */\n async listResources(): Promise {\n const connectedClients = this.getConnectedClients();\n const allResources = [];\n\n for (const client of connectedClients) {\n try {\n const resources = await client.listResources();\n const serverName = (client as any).serverInfo?.name || \"Unknown\";\n \n allResources.push(...resources.map((resource: any) => ({\n ...resource,\n serverName,\n })));\n } catch (error) {\n console.warn(`[MCPClientPool] Failed to list resources from client:`, error);\n }\n }\n\n return allResources;\n }\n\n /**\n * Get server status information for debugging\n */\n getServerStatuses(): Array<{\n serverName: string;\n isConnected: boolean;\n capabilities?: any;\n serverInfo?: any;\n clientInfo?: any;\n }> {\n return this.clients.map(client => ({\n serverName: (client as any).serverInfo?.name || \n (client as any).clientInfo?.name || \n \"Unknown\",\n isConnected: client.isInitialized ? client.isInitialized() : false,\n capabilities: (client as any).capabilities,\n serverInfo: (client as any).serverInfo,\n clientInfo: (client as any).clientInfo,\n }));\n }\n\n /**\n * Update the client pool with new clients\n */\n updateClients(clients: MCPClient[], serverConfigs: MCPServerConfig[] = []): MCPClientPool {\n return new MCPClientPool(clients, serverConfigs);\n }\n}",[],[184,290,386],"4be2ec18-5bed-11f0-a99f-f69ea79377d9","clientTools.ts","692eae3c-5329-11f0-b796-f69ea79377d9",1360,["D",1751973518688],122,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n/**\n * Client-side Tools Utility\n *\n * Defines and implements client-side tools that can be used by the AI assistant.\n * These tools run in the browser and can interact with the user interface.\n */\n\nimport type { MCPClientPool, MCPTool } from \"./mcpClientPool.ts\";\n// Use any to avoid circular imports - AffordanceManager will be passed as parameter\n// import type { AffordanceManager } from \"./affordanceManager.ts\";\n\n// Tool execution state for async operations\nexport interface PendingToolExecution {\n toolName: string;\n input: any;\n toolUseId: string;\n resolve: (result: string) => void;\n reject: (error: Error) => void;\n}\n\n// Tool definition interface\nexport interface ClientTool {\n name: string;\n description: string;\n input_schema: {\n type: \"object\";\n properties: Record;\n required?: string[];\n };\n}\n\n// Tool handler function type\nexport type ToolHandler = (\n input: any,\n toolUseId: string,\n setPendingTool: (pending: PendingToolExecution | null) => void,\n tools?: Record,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any, // Use any to avoid circular imports\n) => Promise;\n\n// AsyncFunction constructor for safe code execution\nconst AsyncFunction = async function() {}.constructor;\n\n/* ──────────────────────────── Tool Definitions ─────────────────────────── */\n\nexport const ASK_USER_TOOL: ClientTool = {\n name: \"ask_user\",\n description: \"Ask the user a question and get their response with various input types\",\n input_schema: {\n type: \"object\",\n properties: {\n question: {\n type: \"string\",\n description: \"The question to ask the user\",\n },\n inputType: {\n type: \"string\",\n enum: [\"text\", \"multiline\", \"choice\", \"confirm\"],\n description: \"The type of input to request from the user\",\n default: \"text\",\n },\n choices: {\n type: \"array\",\n items: { type: \"string\" },\n description: \"Available choices for 'choice' input type\",\n },\n placeholder: {\n type: \"string\",\n description: \"Placeholder text for text/multiline inputs\",\n },\n required: {\n type: \"boolean\",\n description: \"Whether a response is required\",\n default: false,\n },\n },\n required: [\"question\"],\n },\n};\n\nexport const CALCULATOR_TOOL: ClientTool = {\n name: \"calculate\",\n description: \"Perform mathematical calculations and return the result\",\n input_schema: {\n type: \"object\",\n properties: {\n expression: {\n type: \"string\",\n description: \"Mathematical expression to evaluate (e.g., '2 + 3 * 4', 'sqrt(16)', 'sin(pi/2)')\",\n },\n },\n required: [\"expression\"],\n },\n};\n\nexport const JS_TOOL: ClientTool = {\n name: \"js_exec\",\n description:\n \"Execute JavaScript code in the client-side to interact with the user interface and expose affordances. The code has access to all available tools (both client-side and MCP tools) via the 'tools' parameter. Provide one of either code or key but not both!\",\n input_schema: {\n type: \"object\",\n properties: {\n code: {\n type: \"string\",\n description:\n \"JavaScript/TypeScript code that defines an async execute function: `const execute = async (input, tools) => {}`. The 'tools' parameter contains all available tool handlers (client-side + MCP tools) that can be called directly. Return value will be JSON stringified.\",\n },\n key: {\n type: \"string\",\n description:\n \"Key of file containing source code (from MCP or local) that exports an async execute function: `const execute = async (input, tools) => {}`. The 'tools' parameter provides access to all available tool handlers.\",\n },\n input: {\n type: \"object\",\n description: \"Input parameter passed to the execute function as the first argument\",\n },\n },\n },\n};\n\n/* ──────────────────────────── Tool Handlers ─────────────────────────── */\n\nexport const askUserHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: (pending: PendingToolExecution | null) => void,\n tools?: Record,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n): Promise => {\n // Return a promise that will be resolved by the UI component\n return new Promise((resolve, reject) => {\n setPendingTool({\n toolName: \"ask_user\",\n input,\n toolUseId,\n resolve,\n reject,\n });\n });\n};\n\nexport const calculateHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: (pending: PendingToolExecution | null) => void,\n tools?: Record,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n): Promise => {\n try {\n // Simple math expression evaluator\n const expression = input.expression || \"\";\n\n // Enhanced safety check - allow more math functions\n const safeExpression = expression\n .replace(/[^0-9+\\-*/().\\s]/g, \"\") // Remove unsafe characters\n .replace(/\\s+/g, \"\"); // Remove spaces\n\n if (!safeExpression) {\n return `Error: Empty or invalid expression \"${expression}\"`;\n }\n\n // Use Function constructor for safe evaluation (limited scope)\n const result = new Function(\"return \" + safeExpression)();\n\n if (typeof result === \"number\" && !isNaN(result) && isFinite(result)) {\n return `${expression} = ${result}`;\n } else {\n return `Error: Invalid result for expression \"${expression}\"`;\n }\n } catch (error) {\n return `Error calculating \"${input.expression}\": ${error.message}`;\n }\n};\n\nexport const jsExecHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: (pending: PendingToolExecution | null) => void,\n tools?: Record,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n): Promise => {\n console.log(`[JS_TOOL] Executing`, input);\n try {\n let code = input.code || \"\";\n\n if (input.key) {\n if (!mcpClientPool) {\n return `Error: No MCP client pool available to load source file from key: ${input.key}`;\n }\n\n const client = mcpClientPool.getConnectedClients()[0];\n if (!client) {\n return `Error: No MCP client available to load source file from key: ${input.key}`;\n }\n\n try {\n const res = await client.callTool(\"files-get\", { key: input.key });\n // Extract result from JSON response if needed\n if (res.content && Array.isArray(res.content) && res.content[0]?.text) {\n code = res.content[0].text;\n } else if (typeof res === \"string\") {\n try {\n const parsed = JSON.parse(res);\n code = parsed.content?.[0]?.text || res;\n } catch {\n code = res;\n }\n } else {\n code = JSON.stringify(res);\n }\n console.log(\"loaded js exec key source\", { key: input.key, code });\n } catch (err) {\n console.error(\"Failed to load source from file\", input.key, err.message);\n return `Error (failed to load source file from key: ${input.key} error: ${err.message})`;\n }\n }\n\n // Execute the code with tools parameter\n const result = await new AsyncFunction(`${code}\\n\\nreturn await execute(arguments[0], arguments[1]);`)(\n input.input,\n tools || {},\n );\n\n console.log(`[JS_TOOL] Execution result`, result);\n return JSON.stringify(result);\n } catch (error) {\n console.error(`[JS_TOOL] Error result`, error);\n return `Error executing code: ${error.message}`;\n }\n};\n\n/* ──────────────────────────── Affordance Tools ─────────────────────────── */\n\n// Affordance tool handlers - these now receive the affordanceManager instance directly\n\nexport const ATTACH_AFFORDANCE_TOOL: ClientTool = {\n name: \"attach_affordance\",\n description:\n \"Attach a UI affordance component in a specific container. The fileKey can be any source (MCP file, local file, etc.) containing JavaScript/TypeScript code that exports a class implementing the AffordanceComponent interface. Affordance components have access to all available MCP tools and client-side tools through the mcpClientPool passed during initialization. By default, attaching an affordance with the same fileKey and type will replace the existing one.\",\n input_schema: {\n type: \"object\",\n properties: {\n type: {\n type: \"string\",\n enum: [\"overlay\", \"header\", \"footer\", \"sidebar\", \"inline\"],\n description:\n \"Type of UI container: overlay (modal/popup), header (fixed top), footer (fixed bottom), sidebar (collapsible panel), inline (embedded in chat)\",\n },\n fileKey: {\n type: \"string\",\n description:\n \"File key/path to JavaScript/TypeScript source code that exports a class implementing AffordanceComponent interface. Can be MCP file key (e.g., 'components/my-widget.js') or local path. Must export a class with mount(), unmount(), and getPublicMethods() methods. The component will have access to mcpClientPool for calling MCP tools.\",\n },\n config: {\n type: \"object\",\n description: \"Configuration options for the affordance\",\n properties: {\n title: { type: \"string\", description: \"Title for the affordance\" },\n position: {\n type: \"string\",\n enum: [\"left\", \"right\", \"top\", \"bottom\", \"center\"],\n description: \"Position within the container\",\n },\n width: { type: \"string\", description: \"Width (CSS value like '300px' or '50%')\" },\n height: { type: \"string\", description: \"Height (CSS value like '400px' or '80vh')\" },\n maxWidth: { type: \"string\", description: \"Maximum width (CSS value)\" },\n maxHeight: { type: \"string\", description: \"Maximum height (CSS value)\" },\n modal: { type: \"boolean\", description: \"Whether overlay should be modal with backdrop (default: true)\" },\n backdrop: { type: \"boolean\", description: \"Whether to show backdrop for overlays (default: true)\" },\n closable: { type: \"boolean\", description: \"Whether affordance can be closed with X button (default: true)\" },\n collapsible: { type: \"boolean\", description: \"Whether sidebar can be collapsed (default: true)\" },\n priority: { type: \"number\", description: \"Priority for ordering in header/footer (higher = more prominent)\" },\n persistent: { type: \"boolean\", description: \"Whether to persist across sessions (default: false)\" },\n },\n additionalProperties: true,\n },\n replace: {\n type: \"boolean\",\n description: \"Whether to replace existing affordance with same fileKey and type (default: true)\",\n default: true,\n },\n },\n required: [\"type\", \"fileKey\"],\n },\n};\n\nexport const CALL_AFFORDANCE_METHOD_TOOL: ClientTool = {\n name: \"call_affordance_method\",\n description:\n \"Call a method on an attached affordance component. The method is called directly on the component instance. Use getPublicMethods() first to see available methods and their input schemas.\",\n input_schema: {\n type: \"object\",\n properties: {\n domId: {\n type: \"string\",\n description: \"DOM ID returned from attach_affordance (format: 'affordance-dom-affordance-N')\",\n },\n method: {\n type: \"string\",\n description:\n \"Method name to call on the component. The method will be called directly on the component instance. Use 'getPublicMethods' to see available methods and their schemas.\",\n },\n args: {\n type: \"array\",\n description:\n \"Arguments to pass to the method. For methods that expect an object parameter, pass the object as the first array element.\",\n items: {},\n },\n },\n required: [\"domId\", \"method\"],\n },\n};\n\nexport const DETACH_AFFORDANCE_TOOL: ClientTool = {\n name: \"detach_affordance\",\n description: \"Remove an attached affordance component\",\n input_schema: {\n type: \"object\",\n properties: {\n domId: {\n type: \"string\",\n description: \"DOM ID of the affordance to remove\",\n },\n },\n required: [\"domId\"],\n },\n};\n\nexport const LIST_AFFORDANCES_TOOL: ClientTool = {\n name: \"list_affordances\",\n description:\n \"List all currently attached affordances with their IDs, types, file sources, and mount status. Use this to see what affordances are active and get their domIds for method calls.\",\n input_schema: {\n type: \"object\",\n properties: {},\n additionalProperties: false,\n },\n};\n\nexport const GET_AFFORDANCE_ERRORS_TOOL: ClientTool = {\n name: \"get_affordance_errors\",\n description:\n \"Get runtime errors that have occurred in affordance components. Returns errors for a specific affordance or all affordances if no domId is provided.\",\n input_schema: {\n type: \"object\",\n properties: {\n domId: {\n type: \"string\",\n description: \"DOM ID of the affordance to get errors for (optional - if not provided, returns all errors)\",\n },\n includeResolved: {\n type: \"boolean\",\n description: \"Whether to include resolved/acknowledged errors (default: false)\",\n default: false,\n },\n },\n additionalProperties: false,\n },\n};\n\nexport const CLEAR_AFFORDANCE_ERRORS_TOOL: ClientTool = {\n name: \"clear_affordance_errors\",\n description:\n \"Clear/acknowledge runtime errors for affordance components. Can clear errors for a specific affordance or all affordances.\",\n input_schema: {\n type: \"object\",\n properties: {\n domId: {\n type: \"string\",\n description: \"DOM ID of the affordance to clear errors for (optional - if not provided, clears all errors)\",\n },\n errorIds: {\n type: \"array\",\n items: { type: \"string\" },\n description: \"Specific error IDs to clear (optional - if not provided, clears all errors for the affordance)\",\n },\n },\n additionalProperties: false,\n },\n};\n\nexport const RESTORE_AFFORDANCES_TOOL: ClientTool = {\n name: \"restore_affordances\",\n description:\n \"Restore persistent affordances from localStorage. This is typically called automatically at startup, but can be manually triggered.\",\n input_schema: {\n type: \"object\",\n properties: {},\n additionalProperties: false,\n },\n};\n\nexport const CLEAR_PERSISTED_AFFORDANCES_TOOL: ClientTool = {\n name: \"clear_persisted_affordances\",\n description:\n \"Clear all persisted affordances from localStorage. This will remove all saved affordance configurations and they will not be restored on next session.\",\n input_schema: {\n type: \"object\",\n properties: {},\n additionalProperties: false,\n },\n};\n\nexport const GET_PERSISTED_AFFORDANCES_INFO_TOOL: ClientTool = {\n name: \"get_persisted_affordances_info\",\n description:\n \"Get information about persisted affordances without loading them. Shows what affordances are saved in localStorage.\",\n input_schema: {\n type: \"object\",\n properties: {},\n additionalProperties: false,\n },\n};\n\nexport const GET_AFFORDANCE_LOGS_TOOL: ClientTool = {\n name: \"get_affordance_logs\",\n description:\n \"Get captured logs from affordance components. Returns logs for a specific affordance or all affordances if no domId is provided. Logs include console output from component methods.\",\n input_schema: {\n type: \"object\",\n properties: {\n domId: {\n type: \"string\",\n description: \"DOM ID of the affordance to get logs for (optional - if not provided, returns all logs)\",\n },\n },\n additionalProperties: false,\n },\n};\n\nexport const CLEAR_AFFORDANCE_LOGS_TOOL: ClientTool = {\n name: \"clear_affordance_logs\",\n description:\n \"Clear captured logs for affordance components. Can clear logs for a specific affordance or all affordances.\",\n input_schema: {\n type: \"object\",\n properties: {\n domId: {\n type: \"string\",\n description: \"DOM ID of the affordance to clear logs for (optional - if not provided, clears all logs)\",\n },\n },\n additionalProperties: false,\n },\n};\n\n// Affordance tool handlers\nconst attachAffordanceHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: any,\n tools: any,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n) => {\n try {\n if (!affordanceManager) {\n throw new Error(\"AffordanceManager is not available. Please wait for the system to initialize.\");\n }\n\n if (!mcpClientPool) {\n throw new Error(\"MCP client pool is not available. Please wait for the system to initialize.\");\n }\n\n const { type, fileKey, config = {}, replace = true } = input;\n const domId = await affordanceManager.attachAffordance(type, fileKey, config, mcpClientPool, replace);\n return JSON.stringify({\n success: true,\n domId,\n message: `Affordance attached successfully in ${type} container`,\n });\n } catch (error) {\n return JSON.stringify({\n success: false,\n error: error.message,\n });\n }\n};\n\nconst callAffordanceMethodHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: any,\n tools: any,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n) => {\n try {\n if (!affordanceManager) {\n throw new Error(\"AffordanceManager is not available. Please wait for the system to initialize.\");\n }\n\n const { domId, method, args = [] } = input;\n const result = await affordanceManager.callAffordanceMethod(domId, method, args);\n return JSON.stringify(result);\n } catch (error) {\n return JSON.stringify({\n success: false,\n error: error.message,\n });\n }\n};\n\nconst detachAffordanceHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: any,\n tools: any,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n) => {\n try {\n if (!affordanceManager) {\n throw new Error(\"AffordanceManager is not available. Please wait for the system to initialize.\");\n }\n\n const { domId } = input;\n const success = await affordanceManager.detachAffordance(domId);\n return JSON.stringify({\n success,\n message: success ? \"Affordance detached successfully\" : \"Affordance not found\",\n });\n } catch (error) {\n return JSON.stringify({\n success: false,\n error: error.message,\n });\n }\n};\n\nconst listAffordancesHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: any,\n tools: any,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n) => {\n console.log(`[afd] list`);\n try {\n if (!affordanceManager) {\n throw new Error(\"AffordanceManager is not available. Please wait for the system to initialize.\");\n }\n\n console.log(`[afd] manager instantiated`, affordanceManager);\n const affordances = affordanceManager.listAffordances();\n return JSON.stringify({\n success: true,\n affordances,\n count: affordances.length,\n });\n } catch (error) {\n return JSON.stringify({\n success: false,\n error: error.message,\n });\n }\n};\n\nconst getAffordanceErrorsHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: any,\n tools: any,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n) => {\n try {\n if (!affordanceManager) {\n throw new Error(\"AffordanceManager is not available. Please wait for the system to initialize.\");\n }\n\n const { domId, includeResolved = false } = input;\n const errors = affordanceManager.getErrors(domId, includeResolved);\n return JSON.stringify({\n success: true,\n errors,\n count: errors.length,\n });\n } catch (error) {\n return JSON.stringify({\n success: false,\n error: error.message,\n });\n }\n};\n\nconst clearAffordanceErrorsHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: any,\n tools: any,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n) => {\n try {\n if (!affordanceManager) {\n throw new Error(\"AffordanceManager is not available. Please wait for the system to initialize.\");\n }\n\n const { domId, errorIds } = input;\n const clearedCount = affordanceManager.clearErrors(domId, errorIds);\n return JSON.stringify({\n success: true,\n clearedCount,\n message: `Cleared ${clearedCount} error(s)`,\n });\n } catch (error) {\n return JSON.stringify({\n success: false,\n error: error.message,\n });\n }\n};\n\nconst restoreAffordancesHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: any,\n tools: any,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n) => {\n try {\n if (!affordanceManager) {\n throw new Error(\"AffordanceManager is not available. Please wait for the system to initialize.\");\n }\n\n const result = await affordanceManager.restoreAffordances();\n return JSON.stringify({\n success: true,\n ...result,\n message: `Restored ${result.restored} affordances, ${result.failed} failed`,\n });\n } catch (error) {\n return JSON.stringify({\n success: false,\n error: error.message,\n });\n }\n};\n\nconst clearPersistedAffordancesHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: any,\n tools: any,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n) => {\n try {\n if (!affordanceManager) {\n throw new Error(\"AffordanceManager is not available. Please wait for the system to initialize.\");\n }\n\n affordanceManager.clearPersistedAffordances();\n return JSON.stringify({\n success: true,\n message: \"All persisted affordances cleared from localStorage\",\n });\n } catch (error) {\n return JSON.stringify({\n success: false,\n error: error.message,\n });\n }\n};\n\nconst getPersistedAffordancesInfoHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: any,\n tools: any,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n) => {\n try {\n if (!mcpClientPool) {\n throw new Error(\"MCP client pool is required for getting persisted affordances info\");\n }\n\n if (!affordanceManager) {\n throw new Error(\"AffordanceManager is required for getting persisted affordances info\");\n }\n\n const info = affordanceManager.getPersistedAffordancesInfo();\n return JSON.stringify({\n success: true,\n ...info,\n });\n } catch (error) {\n return JSON.stringify({\n success: false,\n error: error.message,\n });\n }\n};\n\nconst getAffordanceLogsHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: any,\n tools: any,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n) => {\n try {\n if (!affordanceManager) {\n throw new Error(\"AffordanceManager is not available. Please wait for the system to initialize.\");\n }\n\n const { domId } = input;\n const logs = affordanceManager.getLogs(domId);\n return JSON.stringify({\n success: true,\n logs,\n count: Array.isArray(logs) ? logs.length : Object.keys(logs).length,\n });\n } catch (error) {\n return JSON.stringify({\n success: false,\n error: error.message,\n });\n }\n};\n\nconst clearAffordanceLogsHandler: ToolHandler = async (\n input: any,\n toolUseId: string,\n setPendingTool: any,\n tools: any,\n mcpClientPool?: MCPClientPool,\n affordanceManager?: any,\n) => {\n try {\n if (!affordanceManager) {\n throw new Error(\"AffordanceManager is not available. Please wait for the system to initialize.\");\n }\n\n const { domId } = input;\n const clearedCount = affordanceManager.clearLogs(domId);\n return JSON.stringify({\n success: true,\n clearedCount,\n message: `Cleared logs for ${domId ? \"affordance \" + domId : \"all affordances\"}`,\n });\n } catch (error) {\n return JSON.stringify({\n success: false,\n error: error.message,\n });\n }\n};\n\n/* ──────────────────────────── Tool Registry ─────────────────────────── */\n\n// Built-in client tools\nexport const CLIENT_TOOLS: ClientTool[] = [\n ASK_USER_TOOL,\n CALCULATOR_TOOL,\n JS_TOOL,\n ATTACH_AFFORDANCE_TOOL,\n CALL_AFFORDANCE_METHOD_TOOL,\n DETACH_AFFORDANCE_TOOL,\n LIST_AFFORDANCES_TOOL,\n GET_AFFORDANCE_ERRORS_TOOL,\n CLEAR_AFFORDANCE_ERRORS_TOOL,\n GET_AFFORDANCE_LOGS_TOOL,\n CLEAR_AFFORDANCE_LOGS_TOOL,\n RESTORE_AFFORDANCES_TOOL,\n CLEAR_PERSISTED_AFFORDANCES_TOOL,\n GET_PERSISTED_AFFORDANCES_INFO_TOOL,\n];\n\n// Built-in tool handlers\nexport const CLIENT_TOOL_HANDLERS: Record = {\n ask_user: askUserHandler,\n calculate: calculateHandler,\n js_exec: jsExecHandler,\n attach_affordance: attachAffordanceHandler,\n call_affordance_method: callAffordanceMethodHandler,\n detach_affordance: detachAffordanceHandler,\n list_affordances: listAffordancesHandler,\n get_affordance_errors: getAffordanceErrorsHandler,\n clear_affordance_errors: clearAffordanceErrorsHandler,\n get_affordance_logs: getAffordanceLogsHandler,\n clear_affordance_logs: clearAffordanceLogsHandler,\n restore_affordances: restoreAffordancesHandler,\n clear_persisted_affordances: clearPersistedAffordancesHandler,\n get_persisted_affordances_info: getPersistedAffordancesInfoHandler,\n};\n\n/* ──────────────────────────── Dynamic Tool Management ─────────────────────────── */\n\n/**\n * Get all available tools (client-side + MCP tools)\n */\nexport async function getAllAvailableTools(mcpClientPool: MCPClientPool): Promise {\n const allTools: ClientTool[] = [...CLIENT_TOOLS];\n return allTools;\n // mcp tools are handled/passed separately\n try {\n const mcpResult = await mcpClientPool.fetchTools();\n console.log(mcpResult);\n if (mcpResult.success) {\n // Convert MCP tools to ClientTool format\n const mcpTools: ClientTool[] = mcpResult.tools.map((tool: MCPTool) => {\n let schema = tool.inputSchema || {\n type: \"object\",\n properties: {},\n };\n delete schema.oneOf;\n delete schema.allOf;\n delete schema.anyOf;\n\n return {\n name: tool.name,\n description: tool.description || `Tool from ${tool.serverName}`,\n input_schema: schema,\n };\n });\n allTools.push(...mcpTools);\n }\n } catch (error) {\n console.warn(\"Failed to fetch MCP tools:\", error);\n }\n\n return allTools;\n}\n\n/**\n * Get all available tool handlers (client-side + MCP handlers)\n */\nexport async function getAllToolHandlers(\n mcpClientPool: MCPClientPool,\n affordanceManager: any,\n): Promise> {\n const allHandlers: Record = { ...CLIENT_TOOL_HANDLERS };\n return allHandlers;\n // mcp tools are handled/passed separately\n try {\n // Use the centralized fetchTools method instead of iterating manually\n const mcpResult = await mcpClientPool.fetchTools();\n\n if (mcpResult.success) {\n // Create handlers for each MCP tool\n mcpResult.tools.forEach((tool: MCPTool) => {\n const toolName = tool.name;\n if (!allHandlers[toolName]) {\n // Create a dynamic handler for MCP tools\n allHandlers[toolName] = async (\n input: any,\n toolUseId: string,\n setPendingTool: (pending: PendingToolExecution | null) => void,\n tools?: Record,\n clientPool?: MCPClientPool,\n affordanceManager?: any,\n ): Promise => {\n try {\n console.log(`[afd] tool handler,`, tool, input);\n const poolToUse = clientPool || mcpClientPool;\n const result = await poolToUse.callTool(tool.serverName, toolName, input);\n // Extract result from JSON response if needed\n if (result.content && Array.isArray(result.content) && result.content[0]?.text) {\n return result.content[0].text;\n } else if (typeof result === \"string\") {\n try {\n const parsed = JSON.parse(result);\n return parsed.content?.[0]?.text || result;\n } catch {\n return result;\n }\n }\n return JSON.stringify(result);\n } catch (error) {\n return `Error calling MCP tool ${toolName}: ${error.message}`;\n }\n };\n }\n });\n }\n } catch (error) {\n console.warn(\"Failed to fetch MCP tools for handlers:\", error);\n }\n\n return allHandlers;\n}\n\n/**\n * Execute a tool by name with the appropriate handler\n */\nexport async function executeTool(\n toolName: string,\n input: any,\n toolUseId: string,\n setPendingTool: (pending: PendingToolExecution | null) => void,\n mcpClientPool: MCPClientPool,\n affordanceManager: any,\n): Promise {\n const allHandlers = await getAllToolHandlers(mcpClientPool, affordanceManager);\n const handler = allHandlers[toolName];\n\n if (!handler) {\n throw new Error(`Unknown tool: ${toolName}`);\n }\n console.log(`[afd] exec tool`, toolName, input);\n return await handler(input, toolUseId, setPendingTool, allHandlers, mcpClientPool, affordanceManager);\n}\n\n/* ──────────────────────────── Removed Global Window Interface ─────────────────────────── */\n\n// Note: Removed global window interface to ensure mcpClientPool is passed explicitly",[],[184,290,394],"4be2cf1c-5bed-11f0-a99f-f69ea79377d9","affordanceManager.ts","fc8a296c-539d-11f0-9a1c-f69ea79377d9",["D",1751973518688],58,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport React from \"https://esm.sh/react@18.2.0\";\n/**\n * UI Affordance Registration Framework - Core Manager\n *\n * Manages the lifecycle of UI affordances (components that can be registered\n * and controlled by the assistant through client tools).\n */\n\nimport {\n AffordanceComponent,\n AffordanceConfig,\n AffordanceError,\n AffordanceMethodCall,\n AffordanceMethodResult,\n AffordanceRegistration,\n AffordanceType,\n ContainerManager,\n PersistedAffordance,\n} from \"../../shared/affordance-types.ts\";\n\n// Container managers for different affordance types\nimport { FooterContainerManager } from \"./containers/footerContainer.ts\";\nimport { HeaderContainerManager } from \"./containers/headerContainer.ts\";\nimport { InlineContainerManager } from \"./containers/inlineContainer.ts\";\nimport { OverlayContainerManager } from \"./containers/overlayContainer.ts\";\nimport { SidebarContainerManager } from \"./containers/sidebarContainer.ts\";\n\nimport type { MCPClientPool } from \"./mcpClientPool.ts\";\n\nexport class AffordanceManager {\n private registrations = new Map();\n private containerManagers = new Map();\n private errors = new Map();\n private logs = new Map();\n private nextId = 1;\n private nextErrorId = 1;\n private mcpClientPool: MCPClientPool;\n private static readonly STORAGE_KEY = \"affordance_registrations\";\n\n constructor(mcpClientPool: MCPClientPool) {\n console.log(`[afd] constructing manager with client pool:`, {\n hasPool: !!mcpClientPool,\n connectedClients: mcpClientPool?.getConnectedClients()?.length || 0\n });\n this.mcpClientPool = mcpClientPool;\n this.initializeContainerManagers();\n this.setupGlobalStyles();\n console.log(`[afd] constructed`, this);\n }\n\n private initializeContainerManagers() {\n console.log(`[afd] Initializing container managers...`);\n this.containerManagers.set(\"overlay\", new OverlayContainerManager());\n this.containerManagers.set(\"header\", new HeaderContainerManager());\n this.containerManagers.set(\"footer\", new FooterContainerManager());\n this.containerManagers.set(\"sidebar\", new SidebarContainerManager());\n this.containerManagers.set(\"inline\", new InlineContainerManager());\n }\n\n private setupGlobalStyles() {\n console.log(`[afd] Setting up global styles...`);\n // Add global CSS for affordance containers if not already present\n if (!document.getElementById(\"affordance-styles\")) {\n const style = document.createElement(\"style\");\n style.id = \"affordance-styles\";\n style.textContent = `\n /* Affordance Framework Global Styles */\n .affordance-container {\n --affordance-bg: rgba(255, 255, 255, 0.95);\n --affordance-border: rgba(0, 0, 0, 0.1);\n --affordance-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n --affordance-backdrop: rgba(0, 0, 0, 0.5);\n --affordance-radius: 12px;\n --affordance-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .affordance-overlay-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--affordance-backdrop);\n z-index: 1000;\n opacity: 0;\n transition: opacity 0.3s ease;\n }\n\n .affordance-overlay-backdrop.visible {\n opacity: 1;\n }\n\n .affordance-overlay {\n position: fixed;\n background: var(--affordance-bg);\n border: 1px solid var(--affordance-border);\n border-radius: var(--affordance-radius);\n box-shadow: var(--affordance-shadow);\n backdrop-filter: blur(10px);\n z-index: 1001;\n transform: scale(0.9) translateY(20px);\n opacity: 0;\n transition: var(--affordance-transition);\n }\n\n .affordance-overlay.visible {\n transform: scale(1) translateY(0);\n opacity: 1;\n }\n\n .affordance-header {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n background: var(--affordance-bg);\n border-bottom: 1px solid var(--affordance-border);\n backdrop-filter: blur(10px);\n z-index: 100;\n transform: translateY(-100%);\n transition: var(--affordance-transition);\n }\n\n .affordance-header.visible {\n transform: translateY(0);\n }\n\n .affordance-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: var(--affordance-bg);\n border-top: 1px solid var(--affordance-border);\n backdrop-filter: blur(10px);\n z-index: 100;\n transform: translateY(100%);\n transition: var(--affordance-transition);\n }\n\n .affordance-footer.visible {\n transform: translateY(0);\n }\n\n .affordance-sidebar {\n position: fixed;\n top: 0;\n bottom: 0;\n width: 300px;\n background: var(--affordance-bg);\n border: 1px solid var(--affordance-border);\n backdrop-filter: blur(10px);\n z-index: 200;\n transition: var(--affordance-transition);\n }\n\n .affordance-sidebar.left {\n left: 0;\n transform: translateX(-100%);\n }\n\n .affordance-sidebar.right {\n right: 0;\n transform: translateX(100%);\n }\n\n .affordance-sidebar.visible {\n transform: translateX(0);\n }\n\n .affordance-inline {\n margin: 1rem 0;\n padding: 1rem;\n background: var(--affordance-bg);\n border: 1px solid var(--affordance-border);\n border-radius: var(--affordance-radius);\n box-shadow: var(--affordance-shadow);\n }\n\n /* Close button for closable affordances */\n .affordance-close {\n position: absolute;\n top: 0.5rem;\n right: 0.5rem;\n width: 2rem;\n height: 2rem;\n border: none;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n transition: var(--affordance-transition);\n }\n\n .affordance-close:hover {\n background: rgba(0, 0, 0, 0.2);\n color: rgba(0, 0, 0, 0.8);\n }\n `;\n document.head.appendChild(style);\n }\n }\n\n /**\n * Save current persistent registrations to localStorage using additive/merge approach\n */\n private saveRegistrations(): void {\n try {\n // First, load existing persistent affordances from localStorage\n const existingAffordances = this.loadRegistrations();\n \n // Create a map of existing affordances by ID for efficient lookup\n const existingMap = new Map();\n for (const affordance of existingAffordances) {\n existingMap.set(affordance.id, affordance);\n }\n\n // Add/update persistent affordances from current instance\n for (const registration of this.registrations.values()) {\n if (registration.config.persistent === true) {\n const persistedAffordance: PersistedAffordance = {\n id: registration.id,\n type: registration.type,\n fileKey: registration.fileKey,\n config: registration.config,\n createdAt: registration.createdAt,\n componentState: this.getComponentState(registration),\n };\n \n // Add or update in the map (this handles both new and updated affordances)\n existingMap.set(registration.id, persistedAffordance);\n }\n }\n\n // Remove affordances that are no longer persistent or have been detached\n // We need to check if any existing persistent affordances should be removed\n // This happens when an affordance is detached or its persistence is removed\n const currentPersistentIds = new Set();\n for (const registration of this.registrations.values()) {\n if (registration.config.persistent === true) {\n currentPersistentIds.add(registration.id);\n }\n }\n\n // Remove from existingMap any affordances that:\n // 1. Are currently loaded in this instance but no longer persistent\n // 2. Have been explicitly detached (not in current registrations)\n const currentRegistrationIds = new Set(\n Array.from(this.registrations.values()).map(reg => reg.id)\n );\n \n for (const [id, existingAffordance] of existingMap.entries()) {\n // If this affordance is currently loaded in this instance\n if (currentRegistrationIds.has(id)) {\n // But it's no longer persistent, remove it from storage\n if (!currentPersistentIds.has(id)) {\n existingMap.delete(id);\n console.log(`[AffordanceManager] Removing affordance from persistence (no longer persistent): ${id}`);\n }\n }\n // Note: We don't remove affordances that aren't in current registrations\n // because they might be managed by other instances or will be restored later\n }\n\n // Convert map back to array and save\n const mergedAffordances = Array.from(existingMap.values());\n localStorage.setItem(AffordanceManager.STORAGE_KEY, JSON.stringify(mergedAffordances));\n \n const addedCount = currentPersistentIds.size;\n const totalCount = mergedAffordances.length;\n const removedCount = existingAffordances.length + addedCount - totalCount;\n \n console.log(`[AffordanceManager] Saved ${totalCount} persistent affordances (${existingAffordances.length} existing, ${addedCount} from current instance, ${removedCount} removed)`);\n } catch (error) {\n console.error(`[AffordanceManager] Failed to save registrations:`, error);\n }\n }\n\n /**\n * Load persisted affordances from localStorage\n */\n private loadRegistrations(): PersistedAffordance[] {\n try {\n const saved = localStorage.getItem(AffordanceManager.STORAGE_KEY);\n if (!saved) {\n return [];\n }\n\n const parsed = JSON.parse(saved);\n if (!Array.isArray(parsed)) {\n console.warn(`[AffordanceManager] Invalid persisted data format, expected array`);\n return [];\n }\n\n console.log(`[AffordanceManager] Loaded ${parsed.length} persisted affordances`);\n return parsed;\n } catch (error) {\n console.error(`[AffordanceManager] Failed to load registrations:`, error);\n return [];\n }\n }\n\n /**\n * Remove a specific persistent affordance from localStorage\n */\n private removePersistedAffordance(affordanceId: string): void {\n try {\n const existingAffordances = this.loadRegistrations();\n const filteredAffordances = existingAffordances.filter(affordance => affordance.id !== affordanceId);\n \n if (filteredAffordances.length !== existingAffordances.length) {\n localStorage.setItem(AffordanceManager.STORAGE_KEY, JSON.stringify(filteredAffordances));\n console.log(`[AffordanceManager] Removed persistent affordance from localStorage: ${affordanceId}`);\n }\n } catch (error) {\n console.error(`[AffordanceManager] Failed to remove persistent affordance:`, error);\n }\n }\n\n /**\n * Get component state for persistence (if component supports it)\n */\n private getComponentState(registration: AffordanceRegistration): any {\n try {\n if (registration.component && typeof registration.component.getState === \"function\") {\n return registration.component.getState();\n }\n } catch (error) {\n console.warn(`[AffordanceManager] Failed to get component state for ${registration.domId}:`, error);\n }\n return undefined;\n }\n\n /**\n * Set component state during restoration (if component supports it)\n */\n private async setComponentState(registration: AffordanceRegistration, state: any): Promise {\n try {\n if (state && registration.component && typeof registration.component.setState === \"function\") {\n await registration.component.setState(state);\n }\n } catch (error) {\n console.warn(`[AffordanceManager] Failed to set component state for ${registration.domId}:`, error);\n }\n }\n\n /**\n * Restore affordances from localStorage at startup\n */\n async restoreAffordances(): Promise<{ restored: number; failed: number; errors: string[] }> {\n console.log(`[AffordanceManager] Restoring affordances from localStorage...`);\n\n const persistedAffordances = this.loadRegistrations();\n if (persistedAffordances.length === 0) {\n console.log(`[AffordanceManager] No affordances to restore`);\n return { restored: 0, failed: 0, errors: [] };\n }\n\n let restored = 0;\n let failed = 0;\n const errors: string[] = [];\n\n for (const persisted of persistedAffordances) {\n try {\n console.log(`[AffordanceManager] Restoring affordance:`, {\n type: persisted.type,\n fileKey: persisted.fileKey,\n });\n\n // Use internal attach method to restore with original ID\n const domId = await this.attachAffordanceInternal(\n persisted.type,\n persisted.fileKey,\n persisted.config,\n this.mcpClientPool,\n true, // replace existing\n persisted.id, // preserve original ID\n );\n\n // Restore component state if available\n const registration = this.registrations.get(domId);\n if (registration && persisted.componentState) {\n await this.setComponentState(registration, persisted.componentState);\n }\n\n restored++;\n console.log(`[AffordanceManager] Successfully restored affordance:`, domId);\n } catch (error) {\n failed++;\n const errorMsg = `Failed to restore ${persisted.type} affordance from ${persisted.fileKey}: ${error.message}`;\n errors.push(errorMsg);\n console.error(`[AffordanceManager] ${errorMsg}`, error);\n }\n }\n\n console.log(`[AffordanceManager] Restoration complete:`, { restored, failed, errors: errors.length });\n return { restored, failed, errors };\n }\n /**\n * Capture and store an error for an affordance\n */\n private captureError(domId: string, error: Error, context: string): string {\n const errorId = `error-${this.nextErrorId++}`;\n const affordanceError: AffordanceError = {\n id: errorId,\n domId,\n timestamp: Date.now(),\n error,\n context,\n resolved: false,\n stack: error.stack,\n };\n\n this.errors.set(errorId, affordanceError);\n console.error(`[AffordanceManager] Error captured for ${domId}:`, { errorId, context, error });\n\n return errorId;\n }\n\n /**\n * Wrap a method call with error capturing\n */\n private async safeMethodCall(\n domId: string,\n context: string,\n fn: () => Promise | T,\n ): Promise<{ success: true; result: T } | { success: false; error: string; errorId: string }> {\n try {\n const result = await fn();\n return { success: true, result };\n } catch (error) {\n const errorId = this.captureError(domId, error instanceof Error ? error : new Error(String(error)), context);\n return {\n success: false,\n error: error instanceof Error ? error.message : String(error),\n errorId,\n };\n }\n }\n\n /**\n * Attach a new UI affordance (renamed from registerAffordance)\n * Maintains backward compatibility while adding replacement logic\n */\n async attachAffordance(\n type: AffordanceType,\n fileKey: string,\n config: AffordanceConfig = {},\n mcpClientPool?: MCPClientPool,\n replace: boolean = true,\n ): Promise {\n return this.attachAffordanceInternal(type, fileKey, config, mcpClientPool, replace);\n }\n\n /**\n * Internal attach method that supports ID preservation for restoration\n */\n private async attachAffordanceInternal(\n type: AffordanceType,\n fileKey: string,\n config: AffordanceConfig = {},\n mcpClientPool?: MCPClientPool,\n replace: boolean = true,\n preserveId?: string,\n ): Promise {\n // Handle replacement logic - check for existing affordance with same fileKey and type\n if (replace) {\n const existing = Array.from(this.registrations.values())\n .find(reg => reg.fileKey === fileKey && reg.type === type);\n\n if (existing) {\n console.log(`[AffordanceManager] Replacing existing affordance:`, {\n domId: existing.domId,\n fileKey,\n type,\n });\n await this.detachAffordance(existing.domId);\n }\n }\n\n const id = preserveId || `affordance-${this.nextId++}`;\n const domId = `affordance-dom-${id}`;\n\n console.log(`[AffordanceManager] Attaching ${type} affordance:`, { id, fileKey, config });\n\n const result = await this.safeMethodCall(domId, \"attach\", async () => {\n // Get the appropriate container manager\n const containerManager = this.containerManagers.get(type);\n if (!containerManager) {\n throw new Error(`Unsupported affordance type: ${type}`);\n }\n\n // Create the registration record\n const registration: AffordanceRegistration = {\n id,\n type,\n fileKey,\n config,\n domId,\n container: null,\n component: null,\n mounted: false,\n createdAt: Date.now(),\n };\n\n // Store the registration\n this.registrations.set(domId, registration);\n\n // Create the container\n const container = containerManager.createContainer(domId, config);\n registration.container = container;\n\n // Load and mount the component - use passed mcpClientPool or fallback to instance pool\n await this.loadAndMountComponent(registration, mcpClientPool || this.mcpClientPool);\n\n // Save to localStorage if persistent\n if (config.persistent === true) {\n this.saveRegistrations();\n }\n\n console.log(`[AffordanceManager] Successfully attached affordance:`, domId);\n return domId;\n });\n\n if (!result.success) {\n // Clean up on failure\n this.registrations.delete(domId);\n throw new Error(result.error);\n }\n\n return result.result;\n }\n\n /**\n * Call a method on an attached affordance with error capturing\n */\n async callAffordanceMethod(domId: string, method: string, args: any[] = []): Promise {\n console.log(`[AffordanceManager] Calling method:`, { domId, method, args });\n\n const registration = this.registrations.get(domId);\n if (!registration) {\n return {\n success: false,\n error: `Affordance not found: ${domId}`,\n };\n }\n\n if (!registration.component || !registration.mounted) {\n return {\n success: false,\n error: `Affordance not mounted: ${domId}`,\n };\n }\n\n const result = await this.safeMethodCall(domId, `method_call:${method}`, async () => {\n // Check if method exists on the component\n if (typeof registration.component![method] !== \"function\") {\n // Get available methods for better error message\n const publicMethods = registration.component!.getPublicMethods();\n const availableMethods = Object.keys(publicMethods);\n throw new Error(`Method '${method}' not found. Available methods: ${availableMethods.join(', ')}`);\n }\n\n // Call the method directly on the component instance\n const methodResult = await registration.component![method].apply(registration.component, args);\n\n console.log(`[AffordanceManager] Method call successful:`, { domId, method, result: methodResult });\n return methodResult;\n });\n\n if (!result.success) {\n return {\n success: false,\n error: result.error,\n };\n }\n\n return {\n success: true,\n result: result.result,\n };\n }\n\n /**\n * Detach an affordance (renamed from unregisterAffordance)\n */\n async detachAffordance(domId: string): Promise {\n console.log(`[AffordanceManager] Detaching affordance:`, domId);\n\n const registration = this.registrations.get(domId);\n if (!registration) {\n console.warn(`[AffordanceManager] Affordance not found for detachment:`, domId);\n return false;\n }\n\n const wasPersistent = registration.config.persistent === true;\n const affordanceId = registration.id;\n\n const result = await this.safeMethodCall(domId, \"detach\", async () => {\n // Unmount component\n if (registration.component && registration.mounted) {\n await registration.component.unmount();\n }\n\n // Destroy container\n const containerManager = this.containerManagers.get(registration.type);\n if (containerManager) {\n containerManager.destroyContainer(domId);\n }\n\n // Remove registration from memory\n this.registrations.delete(domId);\n\n // Remove from localStorage if this was a persistent affordance\n if (wasPersistent) {\n this.removePersistedAffordance(affordanceId);\n }\n\n console.log(`[AffordanceManager] Successfully detached affordance:`, domId);\n return true;\n });\n\n return result.success ? result.result : false;\n }\n\n /**\n * List all attached affordances\n */\n listAffordances(): Array<{ id: string; type: AffordanceType; fileKey: string; mounted: boolean }> {\n console.log(`[AffordanceManager] Listing affordances:`);\n return Array.from(this.registrations.values()).map(reg => ({\n id: reg.domId,\n type: reg.type,\n fileKey: reg.fileKey,\n mounted: reg.mounted,\n }));\n }\n\n /**\n * Get errors for affordances\n */\n getErrors(domId?: string, includeResolved: boolean = false): AffordanceError[] {\n console.log(`[AffordanceManager] Getting errors:`, { domId, includeResolved });\n\n const allErrors = Array.from(this.errors.values());\n let filteredErrors = allErrors;\n\n // Filter by domId if provided\n if (domId) {\n filteredErrors = filteredErrors.filter(error => error.domId === domId);\n }\n\n // Filter by resolved status\n if (!includeResolved) {\n filteredErrors = filteredErrors.filter(error => !error.resolved);\n }\n\n return filteredErrors.map(error => ({\n ...error,\n // Convert Error object to serializable format\n error: {\n name: error.error.name,\n message: error.error.message,\n stack: error.error.stack,\n } as any,\n }));\n }\n\n /**\n * Get logs for affordances\n */\n getLogs(domId?: string): any[] {\n console.log(`[AffordanceManager] Getting logs:`, { domId });\n\n if (domId) {\n return this.logs.get(domId) || [];\n }\n\n // Return all logs if no domId specified\n const allLogs: any[] = [];\n for (const [id, logs] of this.logs.entries()) {\n allLogs.push({ domId: id, logs });\n }\n return allLogs;\n }\n\n /**\n * Clear/acknowledge errors\n */\n clearErrors(domId?: string, errorIds?: string[]): number {\n console.log(`[AffordanceManager] Clearing errors:`, { domId, errorIds });\n\n let clearedCount = 0;\n\n if (errorIds && errorIds.length > 0) {\n // Clear specific error IDs\n for (const errorId of errorIds) {\n const error = this.errors.get(errorId);\n if (error && (!domId || error.domId === domId)) {\n error.resolved = true;\n clearedCount++;\n }\n }\n } else {\n // Clear all errors for domId (or all errors if no domId)\n for (const error of this.errors.values()) {\n if (!error.resolved && (!domId || error.domId === domId)) {\n error.resolved = true;\n clearedCount++;\n }\n }\n }\n\n return clearedCount;\n }\n\n /**\n * Clear logs for affordances\n */\n clearLogs(domId?: string): number {\n console.log(`[AffordanceManager] Clearing logs:`, { domId });\n\n let clearedCount = 0;\n\n if (domId) {\n // Clear logs for specific affordance\n const logs = this.logs.get(domId);\n if (logs && logs.length > 0) {\n clearedCount = logs.length;\n this.logs.set(domId, []);\n }\n } else {\n // Clear all logs\n for (const [id, logs] of this.logs.entries()) {\n clearedCount += logs.length;\n this.logs.set(id, []);\n }\n }\n\n return clearedCount;\n }\n\n /**\n * Load component from file and mount it with error capturing\n */\n private async loadAndMountComponent(\n registration: AffordanceRegistration,\n mcpClientPool: MCPClientPool,\n ): Promise {\n if (!registration.container) {\n throw new Error(\"Container not available\");\n }\n\n const result = await this.safeMethodCall(registration.domId, \"load_and_mount\", async () => {\n let componentSource = \"\";\n const fileKey = registration.fileKey;\n\n // Try to load from MCP first (like js_exec does)\n const client = mcpClientPool.getConnectedClients()[0];\n if (client) {\n try {\n console.log(`[AffordanceManager] Loading component from MCP:`, fileKey);\n const res = await client.callTool(\"files-get\", { key: fileKey });\n\n // Extract result from JSON response (same logic as js_exec)\n if (res.content && Array.isArray(res.content) && res.content[0]?.text) {\n componentSource = res.content[0].text;\n } else if (typeof res === \"string\") {\n try {\n const parsed = JSON.parse(res);\n componentSource = parsed.content?.[0]?.text || res;\n } catch {\n componentSource = res;\n }\n } else {\n componentSource = JSON.stringify(res);\n }\n console.log(`[AffordanceManager] Loaded component from MCP:`, {\n key: fileKey,\n length: componentSource.length,\n });\n } catch (err) {\n console.warn(`[AffordanceManager] Failed to load from MCP, trying local file:`, err.message);\n }\n } else {\n console.log(`[AffordanceManager] No MCP clients available, will try to load as local file:`, fileKey);\n }\n\n if (!componentSource || componentSource.trim().length === 0) {\n throw new Error(`Component source is empty: ${fileKey}`);\n }\n\n // Check if it looks like a valid module\n if (!componentSource.includes(\"export\") && !componentSource.includes(\"module.exports\")) {\n throw new Error(`Source does not appear to be a valid module (no exports found): ${fileKey}`);\n }\n\n // Create a module from the source\n const moduleUrl = URL.createObjectURL(\n new Blob([componentSource], { type: \"application/javascript\" }),\n );\n console.log(`[afd] importing`, moduleUrl, componentSource);\n\n let module;\n try {\n // Import the component\n module = await import(moduleUrl);\n } catch (importError) {\n throw new Error(\n `Failed to import module. This usually means syntax errors or invalid JavaScript/TypeScript. Error: ${importError.message}`,\n );\n } finally {\n // Clean up the blob URL\n URL.revokeObjectURL(moduleUrl);\n }\n\n // Get the component class/function (default export or named export)\n const ComponentClass = module.default || module.AffordanceComponent || module[Object.keys(module)[0]];\n\n if (!ComponentClass) {\n throw new Error(\n `No component found in module. Make sure to export a class as default export. Available exports: ${\n Object.keys(module).join(\", \")\n }`,\n );\n }\n\n // Create component instance\n const component: AffordanceComponent = typeof ComponentClass === \"function\"\n ? new ComponentClass()\n : ComponentClass;\n\n // Validate component interface\n if (typeof component.mount !== \"function\") {\n throw new Error(\"Component must implement mount(container, config, mcpClientPool) method\");\n }\n if (typeof component.unmount !== \"function\") {\n throw new Error(\"Component must implement unmount() method\");\n }\n if (typeof component.getPublicMethods !== \"function\") {\n throw new Error(\"Component must implement getPublicMethods() method that returns method schemas\");\n }\n\n // Validate that getPublicMethods returns the expected format\n const publicMethods = component.getPublicMethods();\n if (typeof publicMethods !== \"object\" || publicMethods === null) {\n throw new Error(\"getPublicMethods() must return an object with method schemas\");\n }\n\n // Wrap component methods with error capturing\n const originalComponent = component;\n const wrappedComponent = this.wrapComponentWithErrorCapture(originalComponent, registration.domId);\n\n // Mount the component with mcpClientPool access\n await wrappedComponent.mount(registration.container!, registration.config, mcpClientPool, React);\n\n // Update registration\n registration.component = wrappedComponent;\n registration.mounted = true;\n\n console.log(`[AffordanceManager] Component mounted successfully:`, registration.domId);\n });\n\n if (!result.success) {\n throw new Error(result.error);\n }\n }\n\n /**\n * Wrap component methods with error capturing\n */\n private wrapComponentWithErrorCapture(component: AffordanceComponent, domId: string): AffordanceComponent {\n const manager = this;\n\n // Create a proxy to intercept method calls\n return new Proxy(component, {\n get(target, prop, receiver) {\n const value = Reflect.get(target, prop, receiver);\n\n // Don't wrap non-function properties or core methods\n if (typeof value !== \"function\") {\n return value;\n }\n\n // Wrap the method with error capturing and logging\n return async function(...args: any[]) {\n const logs: string[] = [];\n \n // Create a console proxy to capture logs\n const originalConsole = globalThis.console;\n const logCapturingConsole = {\n log: (...logArgs: any[]) => {\n logs.push(`[LOG] ${logArgs.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);\n originalConsole.log(...logArgs);\n },\n warn: (...logArgs: any[]) => {\n logs.push(`[WARN] ${logArgs.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);\n originalConsole.warn(...logArgs);\n },\n error: (...logArgs: any[]) => {\n logs.push(`[ERROR] ${logArgs.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);\n originalConsole.error(...logArgs);\n },\n info: (...logArgs: any[]) => {\n logs.push(`[INFO] ${logArgs.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);\n originalConsole.info(...logArgs);\n },\n debug: (...logArgs: any[]) => {\n logs.push(`[DEBUG] ${logArgs.map(arg => typeof arg === 'object' ? JSON.stringify(arg) : String(arg)).join(' ')}`);\n originalConsole.debug(...logArgs);\n },\n };\n\n try {\n // Temporarily replace global console for this method call\n globalThis.console = logCapturingConsole as any;\n \n const result = await value.apply(target, args);\n \n // Store captured logs\n if (logs.length > 0) {\n const existingLogs = manager.logs.get(domId) || [];\n manager.logs.set(domId, [...existingLogs, ...logs.map(log => ({\n timestamp: Date.now(),\n method: String(prop),\n message: log,\n }))]);\n }\n \n return result;\n } catch (error) {\n console.error(`[afd] wrapped method error:`, error);\n const errorId = manager.captureError(\n domId,\n error instanceof Error ? error : new Error(String(error)),\n `component_method:${String(prop)}`,\n );\n\n // Re-throw the error so the caller can handle it\n throw error;\n } finally {\n // Always restore original console\n globalThis.console = originalConsole;\n }\n };\n },\n });\n }\n\n /**\n * Get registration by DOM ID\n */\n getRegistration(domId: string): AffordanceRegistration | undefined {\n return this.registrations.get(domId);\n }\n\n /**\n * Cleanup all affordances (useful for app shutdown)\n */\n async cleanup(): Promise {\n console.log(`[AffordanceManager] Cleaning up all affordances`);\n\n const domIds = Array.from(this.registrations.keys());\n await Promise.all(domIds.map(domId => this.detachAffordance(domId)));\n\n // Note: No need to call saveRegistrations() here since detachAffordance\n // already handles removing persistent affordances from localStorage individually\n }\n\n /**\n * Clear all persisted affordances from localStorage\n * This is useful for debugging or when you want to start fresh\n */\n clearPersistedAffordances(): void {\n try {\n localStorage.removeItem(AffordanceManager.STORAGE_KEY);\n console.log(`[AffordanceManager] Cleared all persisted affordances from localStorage`);\n } catch (error) {\n console.error(`[AffordanceManager] Failed to clear persisted affordances:`, error);\n }\n }\n\n /**\n * Get information about persisted affordances without loading them\n */\n getPersistedAffordancesInfo(): { count: number; affordances: PersistedAffordance[] } {\n const persisted = this.loadRegistrations();\n return {\n count: persisted.length,\n affordances: persisted,\n };\n }\n}\n\n// Note: Global instance removed - must be created with mcpClientPool parameter\n// export const affordanceManager = new AffordanceManager(mcpClientPool);",[],[184,290,403],"af6595c8-5d10-11f0-9e0b-0224a6c84d84","MCPClient.ts","a7962afe-4327-11f0-b818-76b3cceeab13",1400,["D",1752098669191],23,"/**\n * Comprehensive MCP (Model Context Protocol) Client for Browser\n * Supports multiple transport mechanisms (HTTP, SSE, WebSocket)\n */\nimport type { MCPPrompt, MCPTool } from \"../../shared/types.ts\";\n\n// Type definitions for MCP protocol\ninterface JsonRpcRequest {\n jsonrpc: \"2.0\";\n id: string | number;\n method: string;\n params?: any;\n}\n\ninterface JsonRpcResponse {\n jsonrpc: \"2.0\";\n id: string | number;\n result?: any;\n error?: JsonRpcError;\n}\n\ninterface JsonRpcError {\n code: number;\n message: string;\n data?: any;\n}\n\ninterface JsonRpcNotification {\n jsonrpc: \"2.0\";\n method: string;\n params?: any;\n}\n\ntype JsonRpcMessage = JsonRpcRequest | JsonRpcResponse | JsonRpcNotification;\n\n// MCP specific types\ninterface MCPCapabilities {\n tools?: boolean;\n prompts?: boolean;\n resources?: boolean;\n logging?: boolean;\n}\n\ninterface MCPInitializeParams {\n protocolVersion: string;\n capabilities: MCPCapabilities;\n clientInfo: {\n name: string;\n version: string;\n };\n}\n\ninterface MCPInitializeResult {\n protocolVersion: string;\n capabilities: MCPCapabilities;\n serverInfo: {\n name: string;\n version: string;\n };\n}\n\n// Transport types\ntype TransportType = \"http\" | \"sse\" | \"websocket\";\n\ninterface TransportConfig {\n type: TransportType;\n endpoint: string;\n headers?: Record;\n}\n\n// Abstract transport interface\ninterface Transport {\n connect(): Promise;\n disconnect(): void;\n sendRequest(request: JsonRpcRequest): Promise;\n onMessage(handler: (message: JsonRpcMessage) => void): void;\n onError(handler: (error: Error) => void): void;\n onClose(handler: () => void): void;\n}\n\n/**\n * HTTP Transport - Simple request/response\n */\nclass HttpTransport implements Transport {\n private messageHandler?: (message: JsonRpcMessage) => void;\n private errorHandler?: (error: Error) => void;\n private closeHandler?: () => void;\n\n constructor(\n private endpoint: string,\n private headers: Record = {},\n ) {}\n\n async connect(): Promise {\n // HTTP doesn't need persistent connection\n }\n\n disconnect(): void {\n // HTTP doesn't need explicit disconnect\n }\n\n async sendRequest(request: JsonRpcRequest): Promise {\n try {\n const response = await fetch(this.endpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...this.headers,\n },\n body: JSON.stringify(request),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n return data as JsonRpcResponse;\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n throw error;\n }\n }\n\n onMessage(handler: (message: JsonRpcMessage) => void): void {\n this.messageHandler = handler;\n }\n\n onError(handler: (error: Error) => void): void {\n this.errorHandler = handler;\n }\n\n onClose(handler: () => void): void {\n this.closeHandler = handler;\n }\n}\n\n/**\n * SSE + HTTP Transport - Server-sent events for notifications, HTTP for requests\n */\nclass SseHttpTransport implements Transport {\n private eventSource?: EventSource;\n private messageHandler?: (message: JsonRpcMessage) => void;\n private errorHandler?: (error: Error) => void;\n private closeHandler?: () => void;\n\n constructor(\n private httpEndpoint: string,\n private sseEndpoint: string,\n private headers: Record = {},\n ) {}\n\n async connect(): Promise {\n return new Promise((resolve, reject) => {\n this.eventSource = new EventSource(this.sseEndpoint);\n\n this.eventSource.onopen = () => {\n resolve();\n };\n\n this.eventSource.onmessage = (event) => {\n try {\n const message = JSON.parse(event.data) as JsonRpcMessage;\n if (this.messageHandler) {\n this.messageHandler(message);\n }\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n }\n };\n\n this.eventSource.onerror = (error) => {\n if (this.errorHandler) {\n this.errorHandler(new Error(\"SSE connection error\"));\n }\n if (this.eventSource?.readyState === EventSource.CLOSED) {\n if (this.closeHandler) {\n this.closeHandler();\n }\n reject(new Error(\"SSE connection failed\"));\n }\n };\n });\n }\n\n disconnect(): void {\n if (this.eventSource) {\n this.eventSource.close();\n if (this.closeHandler) {\n this.closeHandler();\n }\n }\n }\n\n async sendRequest(request: JsonRpcRequest): Promise {\n try {\n const response = await fetch(this.httpEndpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...this.headers,\n },\n body: JSON.stringify(request),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n return data as JsonRpcResponse;\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n throw error;\n }\n }\n\n onMessage(handler: (message: JsonRpcMessage) => void): void {\n this.messageHandler = handler;\n }\n\n onError(handler: (error: Error) => void): void {\n this.errorHandler = handler;\n }\n\n onClose(handler: () => void): void {\n this.closeHandler = handler;\n }\n}\n\n/**\n * WebSocket Transport - Full duplex communication\n */\nclass WebSocketTransport implements Transport {\n private ws?: WebSocket;\n private messageHandler?: (message: JsonRpcMessage) => void;\n private errorHandler?: (error: Error) => void;\n private closeHandler?: () => void;\n private pendingRequests = new Map void>();\n\n constructor(private endpoint: string) {}\n\n async connect(): Promise {\n return new Promise((resolve, reject) => {\n this.ws = new WebSocket(this.endpoint);\n\n this.ws.onopen = () => {\n resolve();\n };\n\n this.ws.onmessage = (event) => {\n try {\n const message = JSON.parse(event.data) as JsonRpcMessage;\n\n // Handle responses to our requests\n if (\"id\" in message && message.id !== undefined) {\n const handler = this.pendingRequests.get(message.id);\n if (handler) {\n this.pendingRequests.delete(message.id);\n handler(message as JsonRpcResponse);\n return;\n }\n }\n\n // Handle notifications or other messages\n if (this.messageHandler) {\n this.messageHandler(message);\n }\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n }\n };\n\n this.ws.onerror = (event) => {\n const error = new Error(\"WebSocket error\");\n if (this.errorHandler) {\n this.errorHandler(error);\n }\n reject(error);\n };\n\n this.ws.onclose = () => {\n if (this.closeHandler) {\n this.closeHandler();\n }\n };\n });\n }\n\n disconnect(): void {\n if (this.ws) {\n this.ws.close();\n }\n }\n\n async sendRequest(request: JsonRpcRequest): Promise {\n return new Promise((resolve, reject) => {\n if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {\n reject(new Error(\"WebSocket not connected\"));\n return;\n }\n\n this.pendingRequests.set(request.id, resolve);\n this.ws.send(JSON.stringify(request));\n\n // Timeout after 30 seconds\n setTimeout(() => {\n if (this.pendingRequests.has(request.id)) {\n this.pendingRequests.delete(request.id);\n reject(new Error(\"Request timeout\"));\n }\n }, 30000);\n });\n }\n\n onMessage(handler: (message: JsonRpcMessage) => void): void {\n this.messageHandler = handler;\n }\n\n onError(handler: (error: Error) => void): void {\n this.errorHandler = handler;\n }\n\n onClose(handler: () => void): void {\n this.closeHandler = handler;\n }\n}\n\n// Event types\ntype MCPEventType = \"connected\" | \"disconnected\" | \"error\" | \"notification\" | \"message\";\n\ninterface MCPEventHandlers {\n connected?: () => void;\n disconnected?: (reason?: string) => void;\n error?: (error: Error) => void;\n notification?: (method: string, params: any) => void;\n message?: (message: JsonRpcMessage) => void;\n}\n\n/**\n * MCP Client with pluggable transport support\n */\nexport class MCPClient {\n private transport: Transport;\n private eventHandlers: MCPEventHandlers = {};\n private requestId = 0;\n private initialized = false;\n private capabilities: MCPCapabilities = {};\n readonly serverInfo: { name: string; version: string } | null = null;\n private tools: MCPTool[] = [];\n private prompts: MCPPrompt[] = [];\n\n isInitialized(): boolean {\n return this.initialized;\n }\n\n getCapabilities(): MCPCapabilities {\n return this.capabilities;\n }\n constructor(\n config: TransportConfig,\n private clientInfo = { name: \"MCP Browser Client\", version: \"1.0.0\" },\n ) {\n // Create appropriate transport based on config\n switch (config.type) {\n case \"http\":\n this.transport = new HttpTransport(config.endpoint, config.headers);\n break;\n case \"sse\":\n // SSE config expects endpoint to have both HTTP and SSE URLs\n const [httpUrl, sseUrl] = config.endpoint.split(\",\");\n if (!httpUrl || !sseUrl) {\n throw new Error(\"SSE transport requires \\\"httpUrl,sseUrl\\\" format\");\n }\n this.transport = new SseHttpTransport(httpUrl, sseUrl, config.headers);\n break;\n case \"websocket\":\n this.transport = new WebSocketTransport(config.endpoint);\n break;\n default:\n throw new Error(`Unknown transport type: ${config.type}`);\n }\n\n // Set up transport event handlers\n this.transport.onMessage((message) => this.handleMessage(message));\n this.transport.onError((error) => this.emit(\"error\", error));\n this.transport.onClose(() => {\n this.emit(\"disconnected\");\n this.initialized = false;\n });\n }\n\n /**\n * Connect to the MCP server\n */\n async connect(): Promise {\n await this.transport.connect();\n this.emit(\"connected\");\n await this.initialize();\n }\n\n /**\n * Disconnect from the MCP server\n */\n disconnect(): void {\n this.transport.disconnect();\n this.initialized = false;\n }\n\n /**\n * Initialize the MCP session\n */\n private async initialize(): Promise {\n const params: MCPInitializeParams = {\n protocolVersion: \"2025-03-26\",\n capabilities: {\n tools: true,\n prompts: true,\n resources: true,\n logging: true,\n },\n clientInfo: this.clientInfo,\n };\n\n const result = await this.sendRequest(\"initialize\", params);\n this.capabilities = result.capabilities;\n this.serverInfo = result.serverInfo;\n this.initialized = true;\n\n // Send initialized notification\n // this.sendNotification(\"initialized\", {});\n }\n\n /**\n * Send a JSON-RPC request\n */\n async sendRequest(method: string, params?: any): Promise {\n const id = ++this.requestId;\n const request: JsonRpcRequest = {\n jsonrpc: \"2.0\",\n id,\n method,\n params,\n };\n\n const response = await this.transport.sendRequest(request);\n\n if (response.error) {\n throw new Error(response.error.message);\n }\n\n return response.result as T;\n }\n\n /**\n * Send a JSON-RPC notification (no response expected)\n */\n async sendNotification(method: string, params?: any): Promise {\n const notification: JsonRpcNotification = {\n jsonrpc: \"2.0\",\n method: `notifications/${method}`,\n params,\n };\n\n // For HTTP transport, notifications are just requests without expecting response\n // For streaming transports, they're sent without an ID\n if (this.transport instanceof HttpTransport) {\n await fetch((this.transport as any).endpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...(this.transport as any).headers,\n },\n body: JSON.stringify(notification),\n });\n } else {\n // For WebSocket/SSE, we can send without expecting response\n await this.transport.sendRequest(notification as any);\n }\n }\n\n /**\n * Register event handlers\n */\n on(event: MCPEventType, handler: Function): void {\n switch (event) {\n case \"connected\":\n this.eventHandlers.connected = handler as () => void;\n break;\n case \"disconnected\":\n this.eventHandlers.disconnected = handler as (reason?: string) => void;\n break;\n case \"error\":\n this.eventHandlers.error = handler as (error: Error) => void;\n break;\n case \"notification\":\n this.eventHandlers.notification = handler as (method: string, params: any) => void;\n break;\n case \"message\":\n this.eventHandlers.message = handler as (message: JsonRpcMessage) => void;\n break;\n }\n }\n\n /**\n * Handle incoming messages\n */\n private handleMessage(message: JsonRpcMessage): void {\n this.emit(\"message\", message);\n\n // Handle notifications\n if (\"method\" in message && !(\"id\" in message)) {\n this.emit(\"notification\", message.method, message.params);\n }\n }\n\n /**\n * Emit events\n */\n private emit(event: \"connected\"): void;\n private emit(event: \"disconnected\", reason?: string): void;\n private emit(event: \"error\", error: Error): void;\n private emit(event: \"notification\", method: string, params: any): void;\n private emit(event: \"message\", message: JsonRpcMessage): void;\n private emit(event: MCPEventType, ...args: any[]): void {\n const handler = this.eventHandlers[event];\n if (handler) {\n handler(...args);\n }\n }\n\n // ... (All the MCP methods remain the same: listTools, callTool, etc.)\n\n /**\n * List available tools\n */\n async listTools(): Promise {\n if (!this.capabilities.tools) {\n throw new Error(\"Server does not support tools capability\");\n }\n const result = await this.sendRequest<{ tools: any[] }>(\"tools/list\");\n this.tools = result.tools;\n return result.tools;\n }\n\n /**\n * Call a tool\n */\n async callTool(name: string, args: any): Promise {\n if (!this.capabilities.tools) {\n throw new Error(\"Server does not support tools capability\");\n }\n return this.sendRequest(\"tools/call\", { name, arguments: args });\n }\n\n /**\n * List available prompts\n */\n async listPrompts(): Promise {\n if (!this.capabilities.prompts) {\n throw new Error(\"Server does not support prompts capability\");\n }\n\n const result = await this.sendRequest<{ prompts: any[] }>(\"prompts/list\");\n this.prompts = result.prompts;\n return result.prompts;\n }\n\n /**\n * Get a prompt\n */\n async getPrompt(name: string, args?: Record): Promise {\n if (!this.capabilities.prompts) {\n throw new Error(\"Server does not support prompts capability\");\n }\n const result = await this.sendRequest<{ messages: { content: { text: string } }[] }>(\"prompts/get\", {\n name,\n arguments: args,\n });\n console.log(\"[client] getPrompt\", result);\n return result.messages[0].content.text;\n }\n\n /**\n * List available resources\n */\n async listResources(): Promise {\n if (!this.capabilities.resources) {\n throw new Error(\"Server does not support resources capability\");\n }\n const result = await this.sendRequest<{ resources: any[] }>(\"resources/list\");\n return result.resources;\n }\n\n /**\n * Read a resource\n */\n async readResource(uri: string): Promise {\n if (!this.capabilities.resources) {\n throw new Error(\"Server does not support resources capability\");\n }\n const result = await this.sendRequest(\"resources/read\", { uri });\n return result;\n }\n\n /**\n * Send a log message\n */\n async log(level: \"debug\" | \"info\" | \"warning\" | \"error\", message: string, data?: any): Promise {\n if (!this.capabilities.logging) {\n throw new Error(\"Server does not support logging capability\");\n }\n await this.sendNotification(\"logging/log\", { level, message, data });\n }\n}\n\n// Example usage with different transports:\n/*\n// 1. Simple HTTP transport (request/response only)\nconst httpClient = new MCPClient({\n type: 'http',\n endpoint: 'https://api.example.com/mcp',\n headers: { 'Authorization': 'Bearer token' }\n});\n\n// 2. SSE + HTTP transport (server can push notifications)\nconst sseClient = new MCPClient({\n type: 'sse',\n endpoint: 'https://api.example.com/mcp,https://api.example.com/mcp/stream',\n headers: { 'Authorization': 'Bearer token' }\n});\n\n// 3. WebSocket transport (full duplex)\nconst wsClient = new MCPClient({\n type: 'websocket',\n endpoint: 'wss://api.example.com/mcp'\n});\n\n// Usage is the same regardless of transport\nawait httpClient.connect();\nconst tools = await httpClient.listTools();\nconst result = await httpClient.callTool('calculator', { op: 'add', a: 5, b: 3 });\n*/",[],[184,290,411],"8a5e1e34-5ca3-11f0-97d1-0224a6c84d84","sidebarContainer.ts","2688d39e-539e-11f0-b59f-f69ea79377d9","e751129b-c1c1-4969-a599-6e2e3d323c61",1387,["D",1752051791922],8,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n/**\n * Sidebar Container Manager\n * Manages collapsible side panels\n */\n\nimport { AffordanceConfig, ContainerManager } from \"../../../shared/affordance-types.ts\";\n\nexport class SidebarContainerManager implements ContainerManager {\n type = \"sidebar\" as const;\n private containers = new Map();\n private toggleButtons = new Map();\n\n createContainer(id: string, config: AffordanceConfig): HTMLElement {\n console.log(`[SidebarContainer] Creating sidebar:`, { id, config });\n\n const position = config.position || \"right\";\n const width = config.width || \"300px\";\n const collapsible = true; // config.collapsible !== false; // Default to collapsible\n const defaultCollapsed = true; // config.defaultCollapsed || false;\n\n // Create sidebar container\n const sidebar = document.createElement(\"div\");\n sidebar.id = id;\n sidebar.className = `affordance-container affordance-sidebar ${position} ${config.className || \"\"}`;\n\n // Apply styling\n sidebar.style.cssText = `\n max-width: 90vw;\n min-width: 300px;\n width: 100%;\n display: flex;\n flex-direction: column;\n `;\n\n // Add header with title and controls\n const header = this.createHeader(id, config, collapsible);\n sidebar.appendChild(header);\n\n // Create content area\n const content = document.createElement(\"div\");\n content.className = \"affordance-content\";\n content.style.cssText = `\n flex: 1;\n overflow: auto;\n position: relative;\n padding: 1rem;\n `;\n sidebar.appendChild(content);\n\n // Create toggle button if collapsible\n if (collapsible) {\n const toggleBtn = this.createToggleButton(id, position, defaultCollapsed);\n this.toggleButtons.set(id, toggleBtn);\n }\n\n // Append to body\n document.querySelector(\"#root .chat-container\")?.appendChild(sidebar);\n this.containers.set(id, sidebar);\n\n // Set initial state\n if (defaultCollapsed) {\n sidebar.classList.add(\"collapsed\");\n } else {\n // Animate in\n requestAnimationFrame(() => {\n sidebar.classList.add(\"visible\");\n });\n }\n\n console.log(`[SidebarContainer] Sidebar created:`, id);\n return content; // Return content area for component mounting\n }\n\n destroyContainer(id: string): void {\n console.log(`[SidebarContainer] Destroying sidebar:`, id);\n\n const sidebar = this.containers.get(id);\n const toggleBtn = this.toggleButtons.get(id);\n\n if (sidebar) {\n // Animate out\n sidebar.classList.remove(\"visible\");\n\n // Remove after animation\n setTimeout(() => {\n sidebar.remove();\n if (toggleBtn) toggleBtn.remove();\n }, 300);\n\n this.containers.delete(id);\n this.toggleButtons.delete(id);\n }\n }\n\n getContainer(id: string): HTMLElement | null {\n return this.containers.get(id) || null;\n }\n\n updateContainer(id: string, config: Partial): void {\n const sidebar = this.containers.get(id);\n if (!sidebar) return;\n\n if (config.width) {\n sidebar.style.width = config.width;\n }\n }\n\n private createHeader(id: string, config: AffordanceConfig, collapsible: boolean): HTMLElement {\n const header = document.createElement(\"div\");\n header.className = \"affordance-sidebar-header\";\n header.style.cssText = `\n padding: 1rem;\n border-bottom: 1px solid var(--affordance-border);\n display: flex;\n align-items: center;\n justify-content: space-between;\n background: rgba(0, 0, 0, 0.02);\n `;\n\n // Title\n if (config.title) {\n const title = document.createElement(\"h3\");\n title.textContent = config.title;\n title.style.cssText = `\n margin: 0;\n font-size: 1rem;\n font-weight: 600;\n color: var(--text-primary, #1e293b);\n `;\n header.appendChild(title);\n }\n\n // Controls container\n const controls = document.createElement(\"div\");\n controls.style.cssText = `\n display: flex;\n gap: 0.5rem;\n align-items: center;\n `;\n\n // Collapse button\n if (collapsible) {\n const collapseBtn = document.createElement(\"button\");\n collapseBtn.innerHTML = \"−\";\n collapseBtn.className = \"affordance-control-btn\";\n collapseBtn.style.cssText = `\n width: 1.5rem;\n height: 1.5rem;\n border: none;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n color: rgba(0, 0, 0, 0.6);\n transition: var(--affordance-transition);\n `;\n\n collapseBtn.addEventListener(\"click\", () => {\n this.toggleSidebar(id);\n });\n\n controls.appendChild(collapseBtn);\n }\n\n // Close button if closable\n if (true) {\n const closeBtn = document.createElement(\"button\");\n closeBtn.innerHTML = \"×\";\n closeBtn.className = \"affordance-control-btn\";\n closeBtn.style.cssText = `\n width: 1.5rem;\n height: 1.5rem;\n border: none;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 4px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1rem;\n color: rgba(0, 0, 0, 0.6);\n transition: var(--affordance-transition);\n `;\n\n closeBtn.addEventListener(\"click\", () => {\n this.destroyContainer(id);\n });\n\n controls.appendChild(closeBtn);\n }\n\n header.appendChild(controls);\n return header;\n }\n\n private createToggleButton(id: string, position: string, defaultCollapsed: boolean): HTMLElement {\n const toggleBtn = document.createElement(\"button\");\n toggleBtn.className = \"affordance-sidebar-toggle\";\n toggleBtn.innerHTML = position === \"left\" ? \"→\" : \"←\";\n\n const isLeft = position === \"left\";\n toggleBtn.style.cssText = `\n position: fixed;\n top: 50%;\n ${isLeft ? \"left: 0\" : \"right: 0\"};\n transform: translateY(-50%);\n width: 2rem;\n height: 3rem;\n background: var(--affordance-bg);\n border: 1px solid var(--affordance-border);\n border-${isLeft ? \"right\" : \"left\"}: none;\n border-radius: ${isLeft ? \"0 8px 8px 0\" : \"8px 0 0 8px\"};\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.875rem;\n color: rgba(0, 0, 0, 0.6);\n z-index: 199;\n transition: var(--affordance-transition);\n backdrop-filter: blur(10px);\n `;\n\n // Show toggle button if sidebar is collapsed by default\n if (true) {\n toggleBtn.style.opacity = \"1\";\n } else {\n toggleBtn.style.opacity = \"0\";\n toggleBtn.style.pointerEvents = \"none\";\n }\n\n toggleBtn.addEventListener(\"click\", () => {\n this.toggleSidebar(id);\n });\n\n document.body.appendChild(toggleBtn);\n return toggleBtn;\n }\n\n private toggleSidebar(id: string): void {\n const sidebar = this.containers.get(id);\n const toggleBtn = this.toggleButtons.get(id);\n\n if (!sidebar) return;\n\n const isCollapsed = sidebar.classList.contains(\"collapsed\");\n\n if (isCollapsed) {\n // Expand\n sidebar.classList.remove(\"collapsed\");\n sidebar.classList.add(\"visible\");\n if (toggleBtn) {\n toggleBtn.style.opacity = \"0\";\n toggleBtn.style.pointerEvents = \"none\";\n }\n } else {\n // Collapse\n sidebar.classList.add(\"collapsed\");\n sidebar.classList.remove(\"visible\");\n if (toggleBtn) {\n toggleBtn.style.opacity = \"1\";\n toggleBtn.style.pointerEvents = \"auto\";\n }\n }\n }\n}",[],[184,290,429,420],"containers","0f815d24-539e-11f0-a677-f69ea79377d9","overlayContainer.ts","0f815dec-539e-11f0-a677-f69ea79377d9",1068,["D",1751059877848],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n/**\n * Overlay Container Manager\n * Manages modal/popup overlays with backdrop support\n */\n\nimport { AffordanceConfig, ContainerManager } from \"../../../shared/affordance-types.ts\";\n\nexport class OverlayContainerManager implements ContainerManager {\n type = 'overlay' as const;\n private containers = new Map();\n private backdrops = new Map();\n\n createContainer(id: string, config: AffordanceConfig): HTMLElement {\n console.log(`[OverlayContainer] Creating overlay:`, { id, config });\n\n // Create backdrop if modal\n let backdrop: HTMLElement | null = null;\n if (config.modal !== false) { // Default to modal\n backdrop = this.createBackdrop(id, config);\n this.backdrops.set(id, backdrop);\n }\n\n // Create overlay container\n const overlay = document.createElement('div');\n overlay.id = id;\n overlay.className = `affordance-container affordance-overlay ${config.className || ''}`;\n \n // Apply positioning\n this.applyPositioning(overlay, config);\n \n // Apply sizing\n this.applySizing(overlay, config);\n\n // Add close button if closable\n if (config.closable !== false) { // Default to closable\n this.addCloseButton(overlay, id);\n }\n\n // Add title if provided\n if (config.title) {\n this.addTitle(overlay, config.title);\n }\n\n // Create content area\n const content = document.createElement('div');\n content.className = 'affordance-content';\n content.style.cssText = `\n padding: 1rem;\n flex: 1;\n overflow: auto;\n `;\n overlay.appendChild(content);\n\n // Append to body\n document.body.appendChild(overlay);\n\n // Store reference\n this.containers.set(id, overlay);\n\n // Animate in\n requestAnimationFrame(() => {\n if (backdrop) backdrop.classList.add('visible');\n overlay.classList.add('visible');\n });\n\n console.log(`[OverlayContainer] Overlay created:`, id);\n return content; // Return content area for component mounting\n }\n\n destroyContainer(id: string): void {\n console.log(`[OverlayContainer] Destroying overlay:`, id);\n\n const overlay = this.containers.get(id);\n const backdrop = this.backdrops.get(id);\n\n if (overlay) {\n // Animate out\n overlay.classList.remove('visible');\n if (backdrop) backdrop.classList.remove('visible');\n\n // Remove after animation\n setTimeout(() => {\n overlay.remove();\n if (backdrop) backdrop.remove();\n }, 300);\n\n this.containers.delete(id);\n this.backdrops.delete(id);\n }\n }\n\n getContainer(id: string): HTMLElement | null {\n return this.containers.get(id) || null;\n }\n\n updateContainer(id: string, config: Partial): void {\n const overlay = this.containers.get(id);\n if (!overlay) return;\n\n if (config.width || config.height || config.maxWidth || config.maxHeight) {\n this.applySizing(overlay, config);\n }\n\n if (config.position) {\n this.applyPositioning(overlay, config);\n }\n }\n\n private createBackdrop(id: string, config: AffordanceConfig): HTMLElement {\n const backdrop = document.createElement('div');\n backdrop.className = 'affordance-overlay-backdrop';\n backdrop.style.zIndex = (config.zIndex || 1000).toString();\n\n // Close on backdrop click if closable\n if (config.closable !== false) {\n backdrop.addEventListener('click', () => {\n this.destroyContainer(id);\n });\n }\n\n document.body.appendChild(backdrop);\n return backdrop;\n }\n\n private applyPositioning(overlay: HTMLElement, config: AffordanceConfig): void {\n const position = config.position || 'center';\n \n switch (position) {\n case 'center':\n overlay.style.cssText += `\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n `;\n break;\n case 'top':\n overlay.style.cssText += `\n top: 2rem;\n left: 50%;\n transform: translateX(-50%);\n `;\n break;\n case 'bottom':\n overlay.style.cssText += `\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n `;\n break;\n case 'left':\n overlay.style.cssText += `\n top: 50%;\n left: 2rem;\n transform: translateY(-50%);\n `;\n break;\n case 'right':\n overlay.style.cssText += `\n top: 50%;\n right: 2rem;\n transform: translateY(-50%);\n `;\n break;\n }\n }\n\n private applySizing(overlay: HTMLElement, config: AffordanceConfig): void {\n const styles: string[] = [];\n \n if (config.width) styles.push(`width: ${config.width}`);\n if (config.height) styles.push(`height: ${config.height}`);\n if (config.maxWidth) styles.push(`max-width: ${config.maxWidth}`);\n if (config.maxHeight) styles.push(`max-height: ${config.maxHeight}`);\n \n // Default sizing\n if (!config.width && !config.maxWidth) {\n styles.push('max-width: min(90vw, 600px)');\n }\n if (!config.height && !config.maxHeight) {\n styles.push('max-height: 90vh');\n }\n\n overlay.style.cssText += styles.join('; ') + ';';\n }\n\n private addCloseButton(overlay: HTMLElement, id: string): void {\n const closeBtn = document.createElement('button');\n closeBtn.className = 'affordance-close';\n closeBtn.innerHTML = '×';\n closeBtn.setAttribute('aria-label', 'Close');\n \n closeBtn.addEventListener('click', () => {\n this.destroyContainer(id);\n });\n\n overlay.appendChild(closeBtn);\n }\n\n private addTitle(overlay: HTMLElement, title: string): void {\n const titleEl = document.createElement('div');\n titleEl.className = 'affordance-title';\n titleEl.textContent = title;\n titleEl.style.cssText = `\n padding: 1rem 1rem 0.5rem;\n font-weight: 600;\n font-size: 1.125rem;\n border-bottom: 1px solid var(--affordance-border);\n margin-bottom: 0;\n `;\n \n overlay.insertBefore(titleEl, overlay.firstChild);\n }\n}",[],[184,290,429,431],"56a355d6-539e-11f0-927a-f69ea79377d9","inlineContainer.ts","56a35680-539e-11f0-927a-f69ea79377d9",1072,["D",1751059997188],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n/**\n * Inline Container Manager\n * Manages components that can be embedded in the chat flow\n */\n\nimport { AffordanceConfig, ContainerManager } from \"../../../shared/affordance-types.ts\";\n\nexport class InlineContainerManager implements ContainerManager {\n type = 'inline' as const;\n private containers = new Map();\n\n createContainer(id: string, config: AffordanceConfig): HTMLElement {\n console.log(`[InlineContainer] Creating inline component:`, { id, config });\n\n // Create inline container\n const inline = document.createElement('div');\n inline.id = id;\n inline.className = `affordance-container affordance-inline ${config.className || ''}`;\n \n // Apply custom styling\n if (config.width) inline.style.width = config.width;\n if (config.height) inline.style.height = config.height;\n if (config.maxWidth) inline.style.maxWidth = config.maxWidth;\n if (config.maxHeight) inline.style.maxHeight = config.maxHeight;\n\n // Add title if provided\n if (config.title) {\n const title = document.createElement('div');\n title.className = 'affordance-inline-title';\n title.textContent = config.title;\n title.style.cssText = `\n font-weight: 600;\n font-size: 0.875rem;\n color: var(--text-primary, #1e293b);\n margin-bottom: 0.75rem;\n padding-bottom: 0.5rem;\n border-bottom: 1px solid var(--affordance-border);\n `;\n inline.appendChild(title);\n }\n\n // Create content area\n const content = document.createElement('div');\n content.className = 'affordance-content';\n content.style.cssText = `\n flex: 1;\n `;\n inline.appendChild(content);\n\n // Add close button if closable\n if (config.closable !== false) {\n this.addCloseButton(inline, id);\n }\n\n // Find insertion point in chat\n const insertionPoint = this.findInsertionPoint(config);\n insertionPoint.appendChild(inline);\n\n this.containers.set(id, inline);\n\n // Animate in\n inline.style.opacity = '0';\n inline.style.transform = 'translateY(10px)';\n requestAnimationFrame(() => {\n inline.style.transition = 'opacity 0.3s ease, transform 0.3s ease';\n inline.style.opacity = '1';\n inline.style.transform = 'translateY(0)';\n });\n\n console.log(`[InlineContainer] Inline component created:`, id);\n return content; // Return content area for component mounting\n }\n\n destroyContainer(id: string): void {\n console.log(`[InlineContainer] Destroying inline component:`, id);\n\n const inline = this.containers.get(id);\n if (inline) {\n // Animate out\n inline.style.transition = 'opacity 0.3s ease, transform 0.3s ease';\n inline.style.opacity = '0';\n inline.style.transform = 'translateY(-10px)';\n\n // Remove after animation\n setTimeout(() => {\n inline.remove();\n }, 300);\n\n this.containers.delete(id);\n }\n }\n\n getContainer(id: string): HTMLElement | null {\n return this.containers.get(id) || null;\n }\n\n updateContainer(id: string, config: Partial): void {\n const inline = this.containers.get(id);\n if (!inline) return;\n\n if (config.width) inline.style.width = config.width;\n if (config.height) inline.style.height = config.height;\n if (config.maxWidth) inline.style.maxWidth = config.maxWidth;\n if (config.maxHeight) inline.style.maxHeight = config.maxHeight;\n }\n\n private findInsertionPoint(config: AffordanceConfig): HTMLElement {\n // Try to find the chat messages container\n const chatContainer = document.querySelector('.chat-messages, .messages, [class*=\"message\"]') as HTMLElement;\n \n if (chatContainer) {\n return chatContainer;\n }\n\n // Fallback to main content area\n const mainContent = document.querySelector('main, .main-content, #root > div') as HTMLElement;\n \n if (mainContent) {\n return mainContent;\n }\n\n // Ultimate fallback to body\n return document.body;\n }\n\n private addCloseButton(inline: HTMLElement, id: string): void {\n const closeBtn = document.createElement('button');\n closeBtn.innerHTML = '×';\n closeBtn.className = 'affordance-close';\n closeBtn.setAttribute('aria-label', 'Close');\n \n closeBtn.addEventListener('click', () => {\n this.destroyContainer(id);\n });\n\n inline.appendChild(closeBtn);\n }\n}",[],[184,290,429,439],"071218bc-5bfb-11f0-aaa4-0224a6c84d84","headerContainer.ts","357e9488-539e-11f0-a452-f69ea79377d9",1371,["D",1751979416194],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n/**\n * Header Container Manager\n * Manages fixed header extensions\n */\n\nimport { AffordanceConfig, ContainerManager } from \"../../../shared/affordance-types.ts\";\n\nexport class HeaderContainerManager implements ContainerManager {\n type = \"header\" as const;\n private containers = new Map();\n private headerRoot: HTMLElement | null = null;\n\n createContainer(id: string, config: AffordanceConfig): HTMLElement {\n console.log(`[HeaderContainer] Creating header:`, { id, config });\n\n // Create header root if it doesn't exist\n if (!this.headerRoot) {\n this.createHeaderRoot();\n }\n\n // Create header item container\n const headerItem = document.createElement(\"div\");\n headerItem.id = id;\n headerItem.className = `affordance-container affordance-header-item ${config.className || \"\"}`;\n\n headerItem.style.cssText = `\n padding: 0.75rem 1rem;\n border-right: 1px solid var(--affordance-border);\n display: flex;\n width: 100%;\n align-items: center;\n gap: 0.5rem;\n justify-content: space-between;\n `;\n\n // Apply priority-based ordering\n const priority = config.priority || 0;\n headerItem.style.order = (-priority).toString(); // Higher priority = lower order value\n\n // // Add title if provided\n // if (config.title) {\n // const title = document.createElement(\"span\");\n // title.textContent = config.title;\n // title.style.cssText = `\n // font-weight: 500;\n // font-size: 0.875rem;\n // color: var(--text-primary, #1e293b);\n // `;\n // headerItem.appendChild(title);\n // }\n\n // Create content area\n const content = document.createElement(\"div\");\n content.className = \"affordance-content\";\n content.style.cssText = `\n display: flex;\n align-items: center;\n gap: 0.5rem;\n flex-grow: 1;\n `;\n headerItem.appendChild(content);\n\n // Add close button if closable\n if (config.closable !== false) {\n this.addCloseButton(headerItem, id);\n }\n\n // Insert into header root based on position\n const position = config.position || \"right\";\n if (position === \"left\") {\n this.headerRoot!.insertBefore(headerItem, this.headerRoot!.firstChild);\n } else {\n this.headerRoot!.appendChild(headerItem);\n }\n\n this.containers.set(id, headerItem);\n\n // Show header if hidden\n this.headerRoot!.classList.add(\"visible\");\n\n console.log(`[HeaderContainer] Header item created:`, id);\n return content; // Return content area for component mounting\n }\n\n destroyContainer(id: string): void {\n console.log(`[HeaderContainer] Destroying header item:`, id);\n\n const headerItem = this.containers.get(id);\n if (headerItem) {\n headerItem.remove();\n this.containers.delete(id);\n\n // Hide header root if no items remain\n if (this.containers.size === 0 && this.headerRoot) {\n this.headerRoot.classList.remove(\"visible\");\n }\n }\n }\n\n getContainer(id: string): HTMLElement | null {\n return this.containers.get(id) || null;\n }\n\n updateContainer(id: string, config: Partial): void {\n const headerItem = this.containers.get(id);\n if (!headerItem) return;\n\n if (config.priority !== undefined) {\n headerItem.style.order = (-config.priority).toString();\n }\n }\n\n private createHeaderRoot(): void {\n this.headerRoot = document.createElement(\"div\");\n this.headerRoot.className = \"affordance-header\";\n this.headerRoot.style.cssText = `\n display: flex;\n align-items: center;\n min-height: 3rem;\n padding: 0;\n `;\n\n document.body.appendChild(this.headerRoot);\n\n // Adjust body padding to account for fixed header\n document.body.style.paddingTop = \"3rem\";\n }\n\n private addCloseButton(headerItem: HTMLElement, id: string): void {\n const closeBtn = document.createElement(\"button\");\n closeBtn.innerHTML = \"×\";\n closeBtn.className = \"affordance-header-close\";\n closeBtn.style.cssText = `\n width: 1.25rem;\n height: 1.25rem;\n border: none;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.75rem;\n color: rgba(0, 0, 0, 0.6);\n margin-left: 0.5rem;\n transition: var(--affordance-transition);\n `;\n\n closeBtn.addEventListener(\"click\", () => {\n this.destroyContainer(id);\n });\n\n headerItem.appendChild(closeBtn);\n }\n}",[],[184,290,429,447],"dccc0284-5ca9-11f0-9f67-0224a6c84d84","footerContainer.ts","47ea9400-539e-11f0-81f0-f69ea79377d9",1396,["D",1752054507195],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n/**\n * Footer Container Manager\n * Manages footer extensions alongside existing controls\n */\n\nimport { AffordanceConfig, ContainerManager } from \"../../../shared/affordance-types.ts\";\n\nexport class FooterContainerManager implements ContainerManager {\n type = \"footer\" as const;\n private containers = new Map();\n private footerExtensions: HTMLElement | null = null;\n\n createContainer(id: string, config: AffordanceConfig): HTMLElement {\n console.log(`[FooterContainer] Creating footer extension:`, { id, config });\n\n // Create footer extensions container if it doesn't exist\n if (!this.footerExtensions) {\n this.createFooterExtensions();\n }\n\n // Create footer item container\n const footerItem = document.createElement(\"div\");\n footerItem.id = id;\n footerItem.className = `affordance-container affordance-footer-item ${config.className || \"\"}`;\n\n footerItem.style.cssText = `\n padding: 0.5rem 0.75rem;\n border-left: 1px solid var(--affordance-border);\n display: flex;\n align-items: center;\n gap: 0.5rem;\n background: rgba(255, 255, 255, 0.8);\n backdrop-filter: blur(10px);\n flex-direction: column;\n `;\n\n // Apply priority-based ordering\n const priority = config.priority || 0;\n footerItem.style.order = (-priority).toString(); // Higher priority = lower order value\n\n // Add title if provided\n if (config.title) {\n const title = document.createElement(\"span\");\n title.textContent = config.title;\n title.style.cssText = `\n font-weight: 500;\n font-size: 0.75rem;\n color: var(--text-secondary, #64748b);\n `;\n footerItem.appendChild(title);\n }\n\n // Create content area\n const content = document.createElement(\"div\");\n content.className = \"affordance-content\";\n content.style.cssText = `\n display: flex;\n align-items: center;\n gap: 0.25rem;\n `;\n footerItem.appendChild(content);\n\n // Add close button if closable\n if (config.closable !== false) {\n this.addCloseButton(footerItem, id);\n }\n\n // Insert into footer extensions based on position\n const position = config.position || \"left\";\n if (position === \"right\") {\n this.footerExtensions!.appendChild(footerItem);\n } else {\n this.footerExtensions!.insertBefore(footerItem, this.footerExtensions!.firstChild);\n }\n\n this.containers.set(id, footerItem);\n\n console.log(`[FooterContainer] Footer extension created:`, id);\n return content; // Return content area for component mounting\n }\n\n destroyContainer(id: string): void {\n console.log(`[FooterContainer] Destroying footer extension:`, id);\n\n const footerItem = this.containers.get(id);\n if (footerItem) {\n footerItem.remove();\n this.containers.delete(id);\n\n // Hide footer extensions if no items remain\n if (this.containers.size === 0 && this.footerExtensions) {\n this.footerExtensions.style.display = \"none\";\n }\n }\n }\n\n getContainer(id: string): HTMLElement | null {\n return this.containers.get(id) || null;\n }\n\n updateContainer(id: string, config: Partial): void {\n const footerItem = this.containers.get(id);\n if (!footerItem) return;\n\n if (config.priority !== undefined) {\n footerItem.style.order = (-config.priority).toString();\n }\n }\n\n private createFooterExtensions(): void {\n // Find the existing footer or create one\n let existingFooter = document.querySelector(\".chat-overlays\") as HTMLElement;\n\n if (!existingFooter) {\n // Create a new footer if none exists\n existingFooter = document.createElement(\"div\");\n existingFooter.className = \"chat-footer\";\n existingFooter.style.cssText = `\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: rgba(255, 255, 255, 0.95);\n border-top: 1px solid var(--affordance-border);\n backdrop-filter: blur(10px);\n z-index: 100;\n display: flex;\n align-items: center;\n min-height: 3rem;\n padding: 0.5rem 1rem;\n `;\n document.body.appendChild(existingFooter);\n\n // Adjust body padding\n document.body.style.paddingBottom = \"3rem\";\n }\n\n // Create extensions container\n this.footerExtensions = document.createElement(\"div\");\n this.footerExtensions.className = \"affordance-footer-extensions\";\n this.footerExtensions.style.cssText = `\n align-items: center;\n gap: 0px;\n position: fixed;\n bottom: 0px;\n left: 0px;\n right: 0px;\n width: 95%;\n background: var(--glass-bg);\n backdrop-filter: var(--glass-backdrop);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;\n max-height: 70vh;\n overflow-y: auto;\n box-shadow: var(--shadow-2xl-up);\n padding-bottom: 8rem;\n animation: paletteSlideUp var(--transition-normal) ease-out;\n max-width: 70rem;\n margin: 0px auto;\n z-index: 99;\n `;\n\n // Insert before existing footer controls or at the end\n const existingControls = existingFooter.querySelector(\".footer-controls, .chat-controls\");\n if (existingControls) {\n existingFooter.insertBefore(this.footerExtensions, existingControls);\n } else {\n existingFooter.appendChild(this.footerExtensions);\n }\n }\n\n private addCloseButton(footerItem: HTMLElement, id: string): void {\n const closeBtn = document.createElement(\"button\");\n closeBtn.innerHTML = \"×\";\n closeBtn.className = \"affordance-footer-close\";\n closeBtn.style.cssText = `\n width: 1rem;\n height: 1rem;\n border: none;\n background: rgba(0, 0, 0, 0.1);\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.625rem;\n color: rgba(0, 0, 0, 0.6);\n margin-left: 0.25rem;\n transition: var(--affordance-transition);\n position: absolute;\n right: 1em;\n top: 1em;\n `;\n\n closeBtn.addEventListener(\"click\", () => {\n this.destroyContainer(id);\n });\n\n footerItem.appendChild(closeBtn);\n }\n}",[],[184,290,429,455],"0f81776e-539e-11f0-a677-f69ea79377d9",["D",1751059877848],[223,224,225,226,227],[184,290,429],"096c7bb0-40c7-11f0-bf3c-76b3cceeab13",262,["D",1748988404914],[222,228,229,230,231,232,233,234],[184,290],"eb5535e6-533a-11f0-9c1a-f69ea79377d9","useMCPClients.tsx","e64910b4-44c0-11f0-8193-76b3cceeab13","c5a5047e-40c1-11f0-bad7-76b3cceeab13",1032,["D",1751017296983],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPServerConfig } from \"../../shared/types.ts\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\nimport { MCPClientPool } from \"../utils/mcpClientPool.ts\";\n\ninterface MCPClientState {\n client: MCPClient;\n config: MCPServerConfig;\n status: \"connecting\" | \"connected\" | \"error\" | \"disconnected\";\n error?: string;\n}\n\n/**\n * Hook to manage MCP client instances based on server configurations\n */\nexport default function useMCPClients(serverConfigs: MCPServerConfig[], autoInit: boolean = false) {\n const [clientStates, setClientStates] = useState>(new Map());\n\n // Create or update clients when server configs change\n useEffect(() => {\n const newClientStates = new Map();\n\n // Process each enabled server config\n for (const config of serverConfigs) {\n if (!config.enabled || !config.url) {\n continue;\n }\n\n // Check if we already have a client for this server\n const existingState = clientStates.get(config.id);\n\n // If config hasn't changed and client exists, reuse it\n if (\n existingState\n && existingState.config.url === config.url\n && existingState.config.authorization_token === config.authorization_token\n ) {\n newClientStates.set(config.id, existingState);\n continue;\n }\n\n // Disconnect existing client if config changed\n if (existingState) {\n try {\n existingState.client.disconnect();\n } catch (error) {\n console.warn(`Failed to disconnect MCP client ${config.id}:`, error);\n }\n }\n\n // Create new client\n try {\n const headers: Record = {};\n if (config.authorization_token) {\n headers[\"Authorization\"] = `Bearer ${config.authorization_token}`;\n }\n\n const client = new MCPClient({\n type: \"http\",\n endpoint: config.url,\n headers,\n }, {\n name: `Browser MCP Client - ${config.name}`,\n version: \"1.0.0\",\n });\n\n const clientState: MCPClientState = {\n client,\n config: { ...config },\n status: \"connecting\",\n };\n\n newClientStates.set(config.id, clientState);\n\n // Connect asynchronously\n connectClient(config.id, client, clientState);\n } catch (error) {\n console.error(`Failed to create MCP client for ${config.name}:`, error);\n newClientStates.set(config.id, {\n client: null as any,\n config: { ...config },\n status: \"error\",\n error: error instanceof Error ? error.message : String(error),\n });\n }\n }\n\n // Disconnect clients that are no longer needed\n for (const [id, state] of clientStates) {\n if (!newClientStates.has(id)) {\n try {\n state.client?.disconnect();\n } catch (error) {\n console.warn(`Failed to disconnect removed MCP client ${id}:`, error);\n }\n }\n }\n\n setClientStates(newClientStates);\n }, [serverConfigs]);\n\n // Helper function to connect a client\n const connectClient = useCallback(async (id: string, client: MCPClient, initialState: MCPClientState) => {\n try {\n console.log(`[useMCPClientsHook] Connecting MCP client ${id}...`);\n await client.connect();\n await client.listPrompts();\n await client.listTools();\n console.log(`[useMCPClientsHook] Connected MCP client ${id}.`);\n setClientStates(prev => {\n const newMap = new Map(prev);\n const currentState = newMap.get(id);\n if (currentState) {\n newMap.set(id, {\n ...currentState,\n status: \"connected\",\n error: undefined,\n });\n }\n return newMap;\n });\n } catch (error) {\n console.error(`Failed to connect MCP client ${id}:`, error);\n\n setClientStates(prev => {\n const newMap = new Map(prev);\n const currentState = newMap.get(id);\n if (currentState) {\n newMap.set(id, {\n ...currentState,\n status: \"error\",\n error: error instanceof Error ? error.message : String(error),\n });\n }\n return newMap;\n });\n }\n }, []);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n for (const [, state] of clientStates) {\n try {\n state.client?.disconnect();\n } catch (error) {\n console.warn(\"Failed to disconnect MCP client during cleanup:\", error);\n }\n }\n };\n }, []);\n\n // Get connected clients - memoized to prevent unnecessary re-renders\n const connectedClients = useMemo((): MCPClient[] => {\n const clients: MCPClient[] = [];\n for (const [, state] of clientStates) {\n if (state.status === \"connected\" && state.client) {\n clients.push(state.client);\n }\n }\n return clients;\n }, [clientStates]);\n\n // Create client pool - memoized to prevent unnecessary re-renders\n const clientPool = useMemo(() => {\n return new MCPClientPool(connectedClients, serverConfigs);\n }, [connectedClients, serverConfigs]);\n\n // Get connected clients (legacy function for backward compatibility)\n const getConnectedClients = useCallback((): MCPClient[] => {\n return connectedClients;\n }, [connectedClients]);\n\n // Get client by server ID\n const getClientById = useCallback((serverId: string): MCPClient | null => {\n const state = clientStates.get(serverId);\n return (state?.status === \"connected\" && state.client) ? state.client : null;\n }, [clientStates]);\n\n // Get client states for debugging/status display\n const getClientStates = useCallback(() => {\n return Array.from(clientStates.entries()).map(([id, state]) => ({\n id,\n name: state.config.name,\n status: state.status,\n error: state.error,\n url: state.config.url,\n }));\n }, [clientStates]);\n\n return {\n connectedClients, // Return the memoized array directly\n clientPool, // New unified interface\n getConnectedClients,\n getClientById,\n getClientStates,\n clientCount: clientStates.size,\n connectedCount: connectedClients.length, // Use memoized array length\n };\n}",[],[184,480,472],"hooks","d37a2668-57f7-11f0-b866-f69ea79377d9","useAnthropicStream.tsx","2023dfec-4095-11f0-b0e3-76b3cceeab13",1326,["D",1751538236489],91,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport Anthropic, { MessageStreamEvent } from \"https://esm.sh/@anthropic-ai/sdk\";\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// External shared types\nimport type { MCPPrompt } from \"../../shared/types.ts\";\nimport type { AppConfig, Message } from \"../components/App.tsx\";\nimport type { MCPClientPool } from \"../utils/mcpClientPool.ts\";\n// Use any to avoid circular imports\n// import type { AffordanceManager } from \"../utils/affordanceManager.ts\";\n\n// Client-side tools utility\nimport {\n executeTool,\n getAllAvailableTools,\n getAllToolHandlers,\n type PendingToolExecution,\n} from \"../utils/clientTools.ts\";\n\n/* ──────────────────────────────── Shared helpers ─────────────────────────── */\n\nexport type Status = \"idle\" | \"thinking\" | \"streaming\" | \"tool_use\" | \"waiting_for_user\";\nexport type AssistantMsg = { role: \"assistant\"; content: any[] };\n\n/** merge delta (unchanged) */\nfunction mergeDelta(block: any, delta: any) {\n if (!delta) return;\n switch (delta.type) {\n case \"text_delta\":\n block.text = (block.text ?? \"\") + (delta.text ?? \"\");\n break;\n case \"input_json_delta\":\n block._input_json_str = (block._input_json_str ?? \"\") + (delta.partial_json ?? \"\");\n break;\n default:\n console.warn(`Unhandled delta`, delta);\n Object.assign(block, delta);\n }\n}\n\n/** build request body helpers */\nasync function buildBody(config: AppConfig, history: Message[], userText: string, clientPool: MCPClientPool) {\n const mcp = config.mcpServers\n .filter((s) => s.enabled && s.url)\n .map((s) => ({\n type: \"url\",\n url: s.url,\n name: s.name,\n authorization_token: s.authorization_token,\n }));\n\n const msgs = history\n .filter((m) => m.role !== \"system\")\n .map((m) => ({ role: m.role, content: m.content }))\n .concat([{ role: \"user\", content: userText }]);\n\n // Get all available tools dynamically\n const availableTools = await getAllAvailableTools(clientPool);\n\n return {\n model: config.selectedModel,\n max_tokens: 8_000,\n stream: true,\n system: config.systemPrompt,\n messages: msgs,\n tools: availableTools,\n ...(mcp.length && { mcp_servers: mcp }),\n } as const;\n}\n\n/** final assembly */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n Object.values(blocks).forEach((b) => {\n if (b._input_json_str !== undefined) {\n try {\n b.input = JSON.parse(b._input_json_str);\n } catch {\n /* swallow */\n }\n delete b._input_json_str;\n }\n });\n\n const content = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b)\n .map((k) => {\n const { delta, _streaming, ...blk } = blocks[k];\n return blk;\n });\n\n return { role: \"assistant\", content };\n}\n\n/** Execute a tool call */\nasync function executeToolCall(\n toolName: string,\n input: any,\n toolUseId: string,\n setPendingTool: (pending: PendingToolExecution | null) => void,\n clientPool: MCPClientPool,\n affordanceManager: any,\n): Promise {\n if (!affordanceManager) {\n console.trace(\"AffordanceManager not available\");\n throw new Error(\"AffordanceManager not available\");\n }\n return await executeTool(toolName, input, toolUseId, setPendingTool, clientPool, affordanceManager);\n}\n\n/* ──────────────────────────── useAnthropicStream ─────────────────────────── */\n\nexport default function useAnthropicStream(\n config: AppConfig,\n clientPool: MCPClientPool,\n affordanceManager: any,\n onAddMessage?: (message: Message) => void,\n) {\n const [status, setStatus] = React.useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = React.useState(null);\n const [pendingTool, setPendingTool] = React.useState(null);\n const abortRef = React.useRef(null);\n\n /* Anthropic SDK instance – memoised so we don't recreate each render */\n const anthropic = React.useMemo(() => {\n if (!config.anthropicApiKey) return null;\n return new Anthropic({\n dangerouslyAllowBrowser: true,\n apiKey: config.anthropicApiKey,\n baseURL: \"https://api.anthropic.com\",\n defaultHeaders: {\n \"anthropic-version\": \"2023-06-01\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n },\n });\n }, [config.anthropicApiKey]);\n\n /* Abort helper */\n const abort = React.useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n // Reject any pending tool execution\n if (pendingTool) {\n pendingTool.reject(new Error(\"Aborted by user\"));\n setPendingTool(null);\n }\n }, [pendingTool]);\n\n /* Resolve pending tool execution */\n const resolvePendingTool = React.useCallback((response: string) => {\n if (pendingTool) {\n pendingTool.resolve(response);\n setPendingTool(null);\n }\n }, [pendingTool]);\n\n /* Cancel pending tool execution */\n const cancelPendingTool = React.useCallback(() => {\n if (pendingTool) {\n pendingTool.resolve(\"(No response provided)\");\n setPendingTool(null);\n }\n }, [pendingTool]);\n\n /* Stream a single message */\n const streamMessage = React.useCallback(\n async (messages: any[]): Promise<{ message: AssistantMsg; stopReason: string }> => {\n if (!anthropic) throw new Error(\"API key missing\");\n\n // Use the existing buildBody helper but override messages\n const baseBody = await buildBody(config, [], \"\", clientPool); // Get base config\n const body = {\n ...baseBody,\n messages, // Override with our current conversation state\n tools: baseBody.tools, // Use dynamically fetched tools\n };\n\n const extraHeaders: Record = {};\n if ((body as any).mcp_servers?.length) {\n extraHeaders[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n }\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n let stream: AsyncIterable;\n try {\n stream = (await anthropic.messages.create(body as any, {\n signal: ctrl.signal,\n headers: extraHeaders,\n })) as AsyncIterable;\n } catch (err: any) {\n console.error(\"Failed to call Anthropic API\", err);\n throw err;\n }\n\n const blocks: Record = {};\n let stopReason = \"\";\n\n try {\n for await (const ev of stream) {\n // console.log(ev);\n // console.log( `Streaming. msgs: ${messages.length} blocks: ${Object.keys(blocks).length } liveBlocks: ${liveBlocks?.length} `);\n\n switch (ev.type) {\n case \"content_block_start\":\n blocks[ev.index] = structuredClone(ev.content_block);\n if (\n blocks[ev.index].type === \"text\"\n && blocks[ev.index].text === undefined\n ) {\n blocks[ev.index].text = \"\";\n }\n break;\n\n case \"content_block_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n }\n break;\n\n case \"message_delta\":\n if (ev.delta.stop_reason) {\n stopReason = ev.delta.stop_reason;\n }\n if (ev.index !== undefined && blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n }\n break;\n\n case \"message_stop\":\n break;\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n }\n\n /* push live preview on every event except stop */\n if (ev.type !== \"message_stop\") {\n const preview = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b)\n .map((k) => ({\n ...blocks[k],\n _streaming: k === Math.max(...Object.keys(blocks).map(Number)),\n }));\n // console.log(\"Calling setLiveBlocks with\", preview, \" was \", liveBlocks);\n setLiveBlocks(preview);\n }\n }\n } catch (err) {\n console.error(\"Error during streaming\", err);\n throw err;\n }\n\n const finalMsg = assembleMessage(blocks);\n return { message: finalMsg, stopReason };\n },\n [anthropic, config, setPendingTool, clientPool],\n );\n\n /* Main send/stream function with tool use loop */\n const send = React.useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!anthropic) throw new Error(\"API key missing\");\n if (status !== \"idle\") throw new Error(\"Stream already in progress\");\n\n setStatus(\"thinking\");\n\n const msgs = history\n .filter((m) => m.role !== \"system\")\n .map((m) => ({ role: m.role, content: m.content }))\n .concat([{ role: \"user\", content: userText }]);\n\n let currentMessages = [...msgs];\n const allNewMessages: Message[] = [];\n\n try {\n while (true) {\n setStatus(\"streaming\");\n\n const { message, stopReason } = await streamMessage(currentMessages);\n\n // Always add the assistant message to history first\n allNewMessages.push(message);\n currentMessages.push(message);\n\n // Immediately add completed message to visible history\n if (onAddMessage) {\n onAddMessage({\n id: crypto.randomUUID(),\n role: message.role,\n content: message.content,\n timestamp: Date.now(),\n });\n }\n\n if (stopReason === \"tool_use\") {\n // Streaming has ended, but keep live blocks visible during tool execution\n // so interactive tools can render in the visible message\n\n // Now begin tool execution\n setStatus(\"tool_use\");\n\n // Execute all tool calls in the message\n const toolResults = [];\n for (const block of message.content) {\n if (block.type === \"tool_use\") {\n try {\n // Set status to waiting for user input for ask_user tool\n if (block.name === \"ask_user\") {\n setStatus(\"waiting_for_user\");\n }\n\n const result = await executeToolCall(\n block.name,\n block.input,\n block.id,\n setPendingTool,\n clientPool,\n affordanceManager,\n );\n toolResults.push({\n type: \"tool_result\",\n tool_use_id: block.id,\n content: result,\n });\n } catch (error) {\n toolResults.push({\n type: \"tool_result\",\n tool_use_id: block.id,\n content: `Error: ${error.message}`,\n is_error: true,\n });\n } finally {\n // Reset status after tool execution\n setStatus(\"tool_use\");\n }\n }\n }\n\n // Clear live blocks now that tool execution is complete\n setLiveBlocks(null);\n\n const toolResultMessage = {\n role: \"user\" as const,\n content: toolResults,\n };\n\n // Add tool result message to tracking\n allNewMessages.push(toolResultMessage);\n currentMessages.push(toolResultMessage);\n\n // Immediately add tool result message to visible history\n if (onAddMessage) {\n onAddMessage({\n id: crypto.randomUUID(),\n role: toolResultMessage.role,\n content: toolResultMessage.content,\n timestamp: Date.now(),\n });\n }\n\n // Continue the loop to get the next response\n continue;\n } else {\n // Final message (end_turn, stop, etc.) - already added above\n break;\n }\n }\n } catch (err) {\n console.error(\"Error during streaming\", err);\n throw err;\n } finally {\n setStatus(\"idle\");\n setLiveBlocks(null);\n setPendingTool(null);\n abortRef.current = null;\n }\n\n return allNewMessages;\n },\n [anthropic, config, status, streamMessage, setPendingTool, clientPool],\n );\n\n return {\n status,\n liveBlocks,\n pendingTool,\n send,\n abort,\n resolvePendingTool,\n cancelPendingTool,\n } as const;\n}",[],[184,480,482],"d519926c-40c1-11f0-8c2f-76b3cceeab13",257,["D",1748986169646],[219,220],[184,480],"d5848754-5eab-11f0-bb22-0224a6c84d84","StreamingChat.tsx","10af5008-3d4a-11f0-8eb6-76b3cceeab13","35b7d323-5acc-4715-a23c-1ca451a40764",1406,["D",1752275256305],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport EnhancedCommandPalette from \"./EnhancedCommandPalette.tsx\";\nimport MessageComponent from \"./Message.tsx\";\n\nimport { createParser, type ParsedEvent, type ReconnectInterval } from \"https://esm.sh/eventsource-parser@2\";\n\nimport { AnthropicStreamEvent, MCPPrompt } from \"../../shared/types.ts\";\nimport useAnthropicStream from \"../hooks/useAnthropicStream.tsx\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\nimport { MCPClientPool } from \"../utils/mcpClientPool.ts\";\n// Use any for now to avoid circular imports\n// import { AffordanceManager } from \"../utils/affordanceManager.ts\";\n\nimport { AppConfig, Message } from \"./App.tsx\";\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n mcpClients: MCPClient[];\n affordanceManager: any; // Use any to avoid circular imports\n clientPool: MCPClientPool;\n onAddMessage: (m: Omit) => void;\n onUpdateLastMessage: (content: string | any[]) => void;\n onDeleteMessage: (messageId: string) => void;\n onRetryFromMessage: (messageId: string) => string | null;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n mcpStatusComponent?: any;\n}\n\nconst chatInputCacheKey = \"chat_input\";\n\nconst Loading = ({ text }: { text: string }) => {\n return (\n

\n {text}\n

\n );\n};\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onUpdateLastMessage,\n onDeleteMessage,\n onRetryFromMessage,\n onClearMessages,\n onOpenSettings,\n mcpStatusComponent,\n mcpClients,\n affordanceManager,\n clientPool,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\n const [showCommandPalette, setShowCommandPalette] = useState(false);\n const [commandPalettePosition, setCommandPalettePosition] = useState({ bottom: \"0\", left: \"0\" });\n const [commandDialogActive, setCommandDialogActive] = useState(false);\n const chatFooterRef = useRef(null);\n const textareaRef = useRef(null);\n const messagesEndRef = useRef(null);\n const [showMcpStatus, setShowMcpStatus] = useState(false);\n\n const { status, liveBlocks, pendingTool, send, abort, resolvePendingTool, cancelPendingTool } = useAnthropicStream(\n config,\n clientPool,\n affordanceManager,\n onAddMessage, // Pass the callback to immediately add completed messages\n );\n\n const thinking = status === \"thinking\";\n const streaming = status === \"streaming\";\n const waitingForUser = status === \"waiting_for_user\";\n\n useEffect(() => {\n setInput(localStorage.getItem(chatInputCacheKey) || \"\");\n }, []);\n\n useEffect(() => {\n if (!streaming) {\n if (messages.length) {\n const last = messages[messages.length - 1];\n if (\n last.role === \"assistant\" && Array.isArray(last.content)\n && last.content[last.content.length - 1]?.type === \"mcp_tool_use\"\n ) {\n console.warn(\"Trailing mcp_tool_use block. Requires cleanup!\");\n const updatedContent = [...last.content];\n updatedContent.push({\n tool_use_id: updatedContent[updatedContent.length - 1].id,\n type: \"mcp_tool_result\",\n is_error: true,\n content: [\n {\n type: \"text\",\n text: `Error: Output was terminated unexpectedly. Retry: yes.`,\n },\n ],\n });\n onUpdateLastMessage(updatedContent);\n }\n if (\n last.role === \"assistant\"\n && Array.isArray(last.content)\n && last.content[last.content.length - 1]?.type === \"mcp_tool_result\"\n && !last.content[last.content.length - 1].tool_use_id\n ) {\n console.warn(\"Trailing malformed mcp_tool_result block. Requires cleanup!\");\n const updatedContent = [...last.content];\n updatedContent[updatedContent.length - 1] = {\n tool_use_id: updatedContent[updatedContent.length - 2].id,\n type: \"mcp_tool_result\",\n is_error: true,\n content: [\n {\n type: \"text\",\n text: `Error: Output was terminated unexpectedly. Retry: yes.`,\n },\n ],\n };\n onUpdateLastMessage(updatedContent);\n }\n }\n }\n }, [messages, streaming]);\n\n /* scroll to bottom on new content */\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages, liveBlocks]);\n\n /* auto-grow textarea */\n useEffect(() => {\n if (!textareaRef.current) return;\n textareaRef.current.style.height = \"auto\";\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }, [input]);\n\n /* handle command palette visibility */\n useEffect(() => {\n const shouldShow = input.startsWith(\"/\") && input.length >= 1;\n\n if (shouldShow && !showCommandPalette) {\n // Calculate position for command palette\n if (chatFooterRef.current) {\n const rect = chatFooterRef.current.getBoundingClientRect();\n setCommandPalettePosition({\n bottom: `${rect.height}px`,\n left: \"1em\",\n });\n }\n setShowCommandPalette(true);\n } else if (!shouldShow && showCommandPalette) {\n setShowCommandPalette(false);\n }\n }, [input, showCommandPalette]);\n\n /* ── helpers ──────────────────────────────────────────────── */\n\n /** Handle command execution from palette */\n const handleCommandExecute = useCallback((result: string) => {\n // Auto-submit the prompt result instead of just setting input\n console.log(\"[Chat] Auto-submitting prompt result:\", result);\n fireSend(result);\n }, []);\n\n const handleCommandResult = useCallback((result: any) => {\n console.log(\"[Chat] cmd result\");\n onAddMessage({\n role: \"assistant\",\n content: result,\n });\n setInput(\"\");\n localStorage.setItem(chatInputCacheKey, \"\");\n }, []);\n\n /** Handle dialog state changes from command palette */\n const handleDialogStateChange = useCallback((isActive: boolean) => {\n setCommandDialogActive(isActive);\n }, []);\n\n /** Retry a user message */\n const retryMessage = async (messageId: string) => {\n if (status !== \"idle\" || !config.anthropicApiKey) return;\n\n const userText = onRetryFromMessage(messageId);\n if (!userText) return;\n\n try {\n const newMessages = await send(\n [...messages.slice(0, messages.findIndex(m => m.id === messageId) + 1)],\n userText,\n );\n // Messages are now added immediately during streaming via the onAddMessage callback\n // No need to add them again here\n } catch (err: any) {\n console.error(err);\n abort();\n onAddMessage({\n role: \"system\",\n content: `Error: ${err.message ?? \"unknown\"}`,\n });\n }\n };\n\n /** Dispatch user input */\n const fireSend = async (userText?: string) => {\n console.log(\"[Chat] fire send\", { userText, input });\n const messageText = userText || input.trim();\n if (!messageText || status !== \"idle\" || !config.anthropicApiKey) return;\n\n // Only clear input if we're using the current input (not NextSteps execution)\n if (!userText) {\n setInput(\"\");\n localStorage.setItem(chatInputCacheKey, \"\");\n }\n\n console.log(\"[Chat] onAddMessage\");\n onAddMessage({ role: \"user\", content: messageText });\n\n try {\n const newMessages = await send(\n [...messages],\n messageText,\n );\n // Messages are now added immediately during streaming via the onAddMessage callback\n // No need to add them again here\n } catch (err: any) {\n console.error(err);\n abort();\n onAddMessage({\n role: \"system\",\n content: `Error: ${err.message ?? \"unknown\"}`,\n });\n }\n };\n\n /** Abort streaming and keep whatever we saw */\n const stopStreaming = () => {\n if (!streaming) return;\n\n const partial = liveBlocks\n ? liveBlocks.map((b) => {\n const { _streaming, ...rest } = b;\n return rest;\n })\n : [];\n\n abort();\n\n if (partial.length) {\n onAddMessage({\n role: \"assistant\",\n content: partial,\n });\n } else {\n onAddMessage({ role: \"system\", content: \"Message cancelled by user\" });\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n // Don't handle keys when command palette is managing them\n if (showCommandPalette) {\n return;\n }\n };\n\n const canSend = input?.trim() && status === \"idle\" && config.anthropicApiKey;\n\n /* ── UI ─────────────────────────────────────────────────────── */\n return (\n <>\n

\n {!config.anthropicApiKey && (\n

\n Please configure your Anthropic API key in settings to start chatting\n

\n )}\n\n {messages.map((m, i) => (\n onDeleteMessage(m.id)}\n onRetry={m.role === \"user\" ? () => retryMessage(m.id) : undefined}\n canRetry={m.role === \"user\" && status === \"idle\"}\n mcpClients={mcpClients}\n onSendMessage={fireSend}\n autoExecuteNextSteps={config.autoExecuteNextSteps}\n isLatestMessage={!streaming && !waitingForUser && i === messages.length - 1}\n pendingTool={pendingTool}\n onResolvePendingTool={resolvePendingTool}\n onCancelPendingTool={cancelPendingTool}\n />\n ))}\n\n {/* live streaming preview - shows during streaming AND tool execution */}\n {(streaming || waitingForUser || status === \"tool_use\") && liveBlocks && (\n \n )}\n\n {!streaming && !thinking && !waitingForUser && !messages.length && !liveBlocks && (\n

\n Claude Chat
with MCP\n

\n Type / to see available prompts and tools\n

\n )}\n\n {thinking && }\n {waitingForUser && }\n {streaming && }\n\n

\n\n

\n {/* Enhanced Command Palette */}\n setShowCommandPalette(false)}\n onResult={handleCommandResult}\n onExecute={handleCommandExecute}\n onDialogStateChange={handleDialogStateChange}\n position={commandPalettePosition}\n visible={showCommandPalette}\n affordanceManager={affordanceManager}\n />\n\n {/* footer */}\n

\n {\n localStorage.setItem(chatInputCacheKey, e.target.value);\n setInput(e.target.value);\n }}\n onKeyDown={handleKeyDown}\n placeholder={config.anthropicApiKey\n ? streaming\n ? \"Streaming…\"\n : waitingForUser\n ? \"Waiting for your input above…\"\n : commandDialogActive\n ? \"Complete the dialog above to continue…\"\n : \"Type your message or / for commands…\"\n : \"Configure API key in settings first\"}\n className=\"chat-input\"\n disabled={!config.anthropicApiKey || thinking || waitingForUser || commandDialogActive}\n rows={1}\n style={{ opacity: commandDialogActive ? 0.5 : 1 }}\n />\n fireSend()}\n disabled={!canSend && !streaming}\n className={`send-button ${streaming ? \"stop-button\" : \"\"} ${commandDialogActive ? 'disabled' : ''}`}\n title={streaming ? \"Stop streaming\" : commandDialogActive ? \"Complete dialog first\" : \"Send message\"}\n style={{ opacity: commandDialogActive ? 0.5 : 1 }}\n >\n {streaming ? : }\n \n

\n\n

\n \n Clear all\n \n\n setShowMcpStatus(!showMcpStatus)}>\n {config.mcpServers.filter((s) => s.enabled).length}/\n {config.mcpServers.length} MCP servers • {(streaming || (mcpClients.filter(c =>\n c.initialized\n ).length !== config.mcpServers.filter((s) => s.enabled).length))\n ? \n : }\n \n\n \n Settings \n \n

\n {/* Show MCP Status */}\n {mcpStatusComponent && (\n \n )}\n

\n \n );\n}",[],[184,303,496],"915e0dac-4b00-11f0-8711-76b3cceeab13","Settings.tsx","7048e212-3cdd-11f0-8db8-9e149126039e",707,["D",1750112625933],35,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPServerConfig } from \"../../shared/types.ts\";\nimport { AppConfig, DEFAULT_SYSTEM_PROMPT } from \"./App.tsx\";\nimport { testMCPServer } from \"../utils/mcpTesting.ts\";\n\ninterface SettingsProps {\n config: AppConfig;\n onUpdateConfig: (config: Partial) => void;\n onClose: () => void;\n}\n\ninterface TestResult {\n [serverId: string]: {\n status: \"testing\" | \"success\" | \"error\";\n message?: string;\n };\n}\n\nexport default function Settings({ config, onUpdateConfig, onClose }: SettingsProps) {\n const [apiKey, setApiKey] = useState(config.anthropicApiKey);\n const [mcpServers, setMcpServers] = useState(config.mcpServers);\n const [selectedModel, setSelectedModel] = useState(config.selectedModel);\n const [systemPrompt, setSystemPrompt] = useState(config.systemPrompt);\n const [autoExecuteNextSteps, setAutoExecuteNextSteps] = useState(config.autoExecuteNextSteps);\n const [testResults, setTestResults] = useState({});\n\n const availableModels = [\n { id: \"claude-opus-4-20250514\", name: \"Claude Opus 4\" },\n { id: \"claude-sonnet-4-20250514\", name: \"Claude Sonnet 4\" },\n { id: \"claude-3-7-sonnet-20250219\", name: \"Claude 3.7 Sonnet\" },\n { id: \"claude-3-5-opus-20241022\", name: \"Claude 3.5 Opus\" },\n { id: \"claude-3-5-sonnet-20241022\", name: \"Claude 3.5 Sonnet\" },\n { id: \"claude-3-5-haiku-20241022\", name: \"Claude 3.5 Haiku\" },\n { id: \"claude-3-opus-20240229\", name: \"Claude 3 Opus\" },\n { id: \"claude-3-sonnet-20240229\", name: \"Claude 3 Sonnet\" },\n { id: \"claude-3-haiku-20240307\", name: \"Claude 3 Haiku\" },\n ];\n\n const handleSave = () => {\n onUpdateConfig({\n anthropicApiKey: apiKey,\n mcpServers: mcpServers,\n selectedModel: selectedModel,\n systemPrompt: systemPrompt,\n autoExecuteNextSteps: autoExecuteNextSteps,\n });\n onClose();\n };\n\n const resetSystemPrompt = () => {\n setSystemPrompt(DEFAULT_SYSTEM_PROMPT);\n };\n\n const addMcpServer = () => {\n const newServer: MCPServerConfig = {\n id: `mcp-${Date.now()}`,\n name: \"New MCP Server\",\n url: \"\",\n authorization_token: \"\",\n enabled: true,\n };\n setMcpServers([...mcpServers, newServer]);\n };\n\n const updateMcpServer = (id: string, updates: Partial) => {\n setMcpServers(servers => servers.map(server => server.id === id ? { ...server, ...updates } : server));\n };\n\n const removeMcpServer = (id: string) => {\n setMcpServers(servers => servers.filter(server => server.id !== id));\n };\n\n const toggleMcpServer = (id: string) => {\n updateMcpServer(id, { enabled: !mcpServers.find(s => s.id === id)?.enabled });\n };\n\n const testMcpServer = async (server: MCPServerConfig) => {\n if (!server.url) {\n setTestResults(prev => ({\n ...prev,\n [server.id]: { status: \"error\", message: \"URL is required\" },\n }));\n return;\n }\n\n setTestResults(prev => ({\n ...prev,\n [server.id]: { status: \"testing\" },\n }));\n\n try {\n const result = await testMCPServer(server);\n\n setTestResults(prev => ({\n ...prev,\n [server.id]: {\n status: result.success ? \"success\" : \"error\",\n message: result.success ? result.message : result.error,\n },\n }));\n } catch (error: any) {\n setTestResults(prev => ({\n ...prev,\n [server.id]: {\n status: \"error\",\n message: error.message || \"Failed to test server\",\n },\n }));\n }\n };\n\n const getTestButtonContent = (server: MCPServerConfig) => {\n const result = testResults[server.id];\n if (!result) return \"Test\";\n\n switch (result.status) {\n case \"testing\":\n return \"⏳\";\n case \"success\":\n return \"✅\";\n case \"error\":\n return \"❌\";\n default:\n return \"Test\";\n }\n };\n\n const getTestButtonTitle = (server: MCPServerConfig) => {\n const result = testResults[server.id];\n if (!result) return \"Test MCP server connection\";\n\n switch (result.status) {\n case \"testing\":\n return \"Testing connection...\";\n case \"success\":\n return `Success: ${result.message}`;\n case \"error\":\n return `Error: ${result.message}`;\n default:\n return \"Test MCP server connection\";\n }\n };\n\n return (\n

e.target === e.currentTarget && onClose()}>\n

\n \n

\n\n {/* API Key Section */}\n

\n Anthropic API Key\n setApiKey(e.target.value)}\n placeholder=\"sk-ant-...\"\n className=\"form-input\"\n />\n

\n Get your API key from{\" \"}\n \n Anthropic Console\n \n

\n\n {/* Model Selection */}\n

\n Model\n setSelectedModel(e.target.value)}\n className=\"form-input\"\n >\n {availableModels.map((model) => (\n \n ))}\n \n

\n Choose the Claude model to use for conversations. Changes apply to new messages without clearing chat\n history.\n

\n\n {/* NextSteps Auto-Execution Setting */}\n

\n NextSteps Auto-Execution\n \n setAutoExecuteNextSteps(e.target.checked)}\n />\n \n \n {autoExecuteNextSteps ? \"Enabled\" : \"Disabled\"}\n \n \n

\n When enabled, NextSteps with \"auto\" type will automatically execute after their countdown. \n You can still cancel by interacting with the chat.\n

\n\n {/* System Prompt Section */}\n

\n System Prompt\n \n Reset to Default\n \n

\n setSystemPrompt(e.target.value)}\n placeholder=\"Enter system prompt...\"\n className=\"form-input\"\n rows={8}\n style={{ resize: 'vertical', minHeight: '120px' }}\n />\n

\n Customize the system prompt that guides the assistant's behavior. Changes apply to new conversations.\n

\n\n {/* MCP Servers Section */}\n

\n \n MCP Servers{\" \"}\n \n \n

\n\n {mcpServers.map((server) => (\n

\n updateMcpServer(server.id, { name: e.target.value })}\n className=\"mcp-server-name bg-transparent border-none outline-none flex-1\"\n placeholder=\"Server name\"\n />\n

\n testMcpServer(server)}\n disabled={testResults[server.id]?.status === \"testing\"}\n className=\"btn-small button\"\n title={getTestButtonTitle(server)}\n >\n {getTestButtonContent(server)}\n \n \n toggleMcpServer(server.id)}\n />\n \n \n removeMcpServer(server.id)}\n className=\"btn-small button\"\n title=\"Remove server\"\n >\n delete\n \n

\n\n

\n updateMcpServer(server.id, { url: e.target.value })}\n placeholder=\"https://example.com/mcp\"\n className=\"form-input text-sm\"\n />\n updateMcpServer(server.id, { authorization_token: e.target.value })}\n placeholder=\"Authorization token\"\n className=\"form-input text-sm\"\n />\n {testResults[server.id]?.message && (\n \n {testResults[server.id].message}\n

\n )}\n

\n ))}\n\n {mcpServers.length === 0 && (\n

\n No MCP servers configured. Add one to get started.\n

\n )}\n

\n\n {/* Action Buttons */}\n

\n \n \n

\n );\n}",[],[184,303,505],"1a3c1f66-4bcd-11f0-82ba-76b3cceeab13","ResourceViewer.tsx","ee0b601c-4b56-11f0-adf4-76b3cceeab13",815,["D",1750200472889],32,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { FileViewerResult } from \"../../shared/types.ts\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\n\n// Import CodeMirror\nimport {\n basicSetup,\n EditorView,\n} from \"https://esm.sh/@codemirror/basic-setup@0.20.0?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { css } from \"https://esm.sh/@codemirror/lang-css@6.2.1?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { html } from \"https://esm.sh/@codemirror/lang-html@6.4.7?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { javascript } from \"https://esm.sh/@codemirror/lang-javascript@6.2.1?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { json } from \"https://esm.sh/@codemirror/lang-json@6.0.1?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { markdown } from \"https://esm.sh/@codemirror/lang-markdown@6.2.4?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { python } from \"https://esm.sh/@codemirror/lang-python@6.1.4?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { xml } from \"https://esm.sh/@codemirror/lang-xml@6.0.2?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { EditorState } from \"https://esm.sh/@codemirror/state@6.4.0\";\n\ninterface ResourceViewerProps {\n fileViewerResult: FileViewerResult;\n mcpClients: MCPClient[];\n serverName?: string; // Retrieved from matching mcp_tool_use\n className?: string;\n}\n\n/**\n * ResourceViewer - Component for displaying MCP resource content with syntax highlighting\n *\n * Features:\n * - Fetches resource content using MCP client\n * - Renders with CodeMirror for syntax highlighting\n * - Supports fullscreen toggle\n * - Simple component state management\n * - Error handling with retry functionality\n */\nexport default function ResourceViewer({\n fileViewerResult,\n mcpClients = [],\n serverName,\n className = \"\",\n}: ResourceViewerProps) {\n const containerRef = useRef(null);\n const editorRef = useRef(null);\n const editorViewRef = useRef(null);\n const iframeRef = useRef(null);\n\n const [isFullscreen, setIsFullscreen] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [content, setContent] = useState(\"\");\n const [retryCount, setRetryCount] = useState(0); // Track retry attempts for re-rendering\n\n // Handle error case\n if (\"error\" in fileViewerResult) {\n return (\n

\n \n Resource Error\n \n

{fileViewerResult.error}

\n );\n }\n\n const { output } = fileViewerResult;\n const { resource } = output;\n const { uri, fileType, renderHint } = resource;\n\n // Find the appropriate MCP client - memoized to prevent unnecessary recreations\n const mcpClient = useMemo(() => {\n if (!serverName) {\n console.warn(\"[ResourceViewer] No server name provided, trying first available client\");\n return mcpClients[0] || null;\n }\n\n // Try multiple ways to match the server name\n const client = mcpClients.find(client => {\n // Check serverInfo.name (from MCP initialization)\n if ((client as any).serverInfo?.name === serverName) {\n return true;\n }\n // Check clientInfo.name (fallback)\n if ((client as any).clientInfo?.name === serverName) {\n return true;\n }\n // Check if serverName matches any part of the client info\n const clientStr = JSON.stringify(client).toLowerCase();\n if (clientStr.includes(serverName.toLowerCase())) {\n return true;\n }\n return false;\n });\n\n if (!client) {\n console.warn(`[ResourceViewer] MCP server \"${serverName}\" not found in clients:`, \n mcpClients.map(c => ({ \n serverInfo: (c as any).serverInfo, \n clientInfo: (c as any).clientInfo \n }))\n );\n }\n\n return client || null;\n }, [mcpClients, serverName]);\n\n // Get language extension for CodeMirror\n const getLanguageExtension = (fileType: string) => {\n switch (fileType) {\n case \"javascript\":\n return javascript();\n case \"html\":\n return html();\n case \"css\":\n return css();\n case \"json\":\n return json();\n case \"markdown\":\n return markdown();\n case \"python\":\n return python();\n case \"xml\":\n return xml();\n default:\n return [];\n }\n };\n\n // Fetch resource content - simplified to use memoized client\n const fetchResourceContent = useCallback(async (): Promise => {\n if (!mcpClient) {\n throw new Error(`No MCP client available${serverName ? ` for server \"${serverName}\"` : \"\"}`);\n }\n\n console.log(`[ResourceViewer] Fetching resource: ${uri} from ${serverName || \"default server\"}`);\n \n try {\n const result = await mcpClient.readResource(uri);\n console.log(\"[ResourceViewer] Resource fetched successfully\", result);\n \n // Handle different response formats\n if (typeof result === 'string') {\n return result;\n } else if (result && typeof result === 'object') {\n // Handle MCP standard response format\n if (result.contents) {\n if (Array.isArray(result.contents)) {\n return result.contents[0]?.text || result.contents[0] || '';\n }\n return result.contents;\n }\n // Handle direct content response\n if (result.content) {\n return result.content;\n }\n // Handle text field\n if (result.text) {\n return result.text;\n }\n // Fallback to stringifying the object\n return JSON.stringify(result, null, 2);\n }\n \n throw new Error('Invalid response format from MCP server');\n } catch (err) {\n console.error(\"[ResourceViewer] Error fetching resource:\", err);\n throw err;\n }\n }, [uri, serverName, mcpClient]); // Use memoized mcpClient instead of findMCPClient\n\n // Load and display resource content\n const loadResource = useCallback(async () => {\n setIsLoading(true);\n setError(null);\n\n try {\n const resourceContent = await fetchResourceContent();\n setContent(resourceContent);\n\n // Wait for next tick to ensure DOM is ready\n setTimeout(() => {\n if (renderHint.preferredRenderer === \"native\" && (fileType === \"html\" || fileType === \"xml\")) {\n // Content will be rendered in iframe via srcDoc\n // No additional setup needed\n } else {\n // Render with CodeMirror for code/text content\n if (editorRef.current) {\n // Clean up existing editor\n if (editorViewRef.current) {\n editorViewRef.current.destroy();\n editorViewRef.current = null;\n }\n\n // Clear the editor container\n editorRef.current.innerHTML = '';\n\n // Create extensions array\n const extensions = [basicSetup];\n\n // Add language support if syntax highlighting is enabled\n if (renderHint.syntaxHighlight) {\n const langExtension = getLanguageExtension(fileType);\n if (langExtension) {\n extensions.push(langExtension);\n }\n }\n\n // Create editor state\n const state = EditorState.create({\n doc: resourceContent,\n extensions,\n });\n\n // Create editor view\n editorViewRef.current = new EditorView({\n state,\n parent: editorRef.current,\n });\n\n console.log(\"[ResourceViewer] CodeMirror editor initialized successfully\");\n }\n }\n }, 10);\n } catch (err) {\n console.error(\"[ResourceViewer] Failed to load resource:\", err);\n setError(err instanceof Error ? err.message : String(err));\n } finally {\n setIsLoading(false);\n }\n }, [fetchResourceContent, renderHint, fileType, getLanguageExtension]);\n\n // Load resource on mount and when key dependencies change\n useEffect(() => {\n loadResource();\n\n // Cleanup editor on unmount\n return () => {\n if (editorViewRef.current) {\n editorViewRef.current.destroy();\n editorViewRef.current = null;\n }\n };\n }, [uri, serverName, retryCount]); // Remove loadResource from dependencies to prevent reload loop\n\n // Fullscreen functionality\n const enterFullscreen = () => {\n setIsFullscreen(true);\n };\n\n const exitFullscreen = () => {\n setIsFullscreen(false);\n };\n\n // Retry functionality\n const handleRetry = useCallback(() => {\n setRetryCount(prev => prev + 1);\n loadResource();\n }, [loadResource]);\n\n const isNativeRenderer = renderHint.preferredRenderer === \"native\" && (fileType === \"html\" || fileType === \"xml\");\n\n return (\n \n {/* Header with metadata and controls */}\n \n

\n \n {uri}\n \n \n {fileType} • {resource.contentType}\n {serverName && ` • ${serverName}`}\n \n

\n\n

\n {error && (\n \n Retry\n \n )}\n\n {!isFullscreen && (\n \n ⛶\n \n )}\n\n {isFullscreen && (\n \n ⛶ Exit Fullscreen\n \n )}\n

\n\n {/* Content area */}\n \n {/* Loading indicator */}\n {isLoading && (\n \n

\n Loading resource...\n

\n )}\n\n {/* Error display */}\n {error && (\n \n

\n \n Failed to load resource\n

{error}

\n\n {/* Show metadata as fallback */}\n

Resource Metadata

\n \n {JSON.stringify(output, null, 2)}\n \n

\n )}\n\n {/* Native renderer (iframe) */}\n {!error && !isLoading && isNativeRenderer && (\n \n )}\n\n {/* Code renderer (CodeMirror) */}\n {!error && !isLoading && !isNativeRenderer && (\n \n )}\n \n \n );\n}",[],[184,303,514],"1113581c-4b07-11f0-96aa-76b3cceeab13","NextSteps.tsx","4e807d1c-4b00-11f0-956b-76b3cceeab13",725,["D",1750115417172],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { NextStepProposal, NextStepsOutput } from \"../../shared/types.ts\";\n\ninterface NextStepsProps {\n nextStepsData: NextStepsOutput;\n onExecuteProposal: (content: string) => void;\n autoExecutionEnabled: boolean;\n className?: string;\n isLatestMessage?: boolean; // Only allow execution if this is the latest message\n messageId?: string; // Track which message this belongs to\n}\n\nexport default function NextSteps({\n nextStepsData,\n onExecuteProposal,\n autoExecutionEnabled,\n className = \"\",\n isLatestMessage = false,\n messageId,\n}: NextStepsProps) {\n const [countdown, setCountdown] = useState(null);\n const [selectedProposal, setSelectedProposal] = useState(null);\n const [userInteracted, setUserInteracted] = useState(false);\n const [hasExecuted, setHasExecuted] = useState(false);\n\n const { nextSteps } = nextStepsData;\n const isAutoType = nextSteps.type === \"auto\";\n const shouldAutoExecute = autoExecutionEnabled && isAutoType && !userInteracted && isLatestMessage && !hasExecuted;\n\n // Check if this NextSteps has already been executed (stored in localStorage)\n const executionKey = `nextsteps_executed_${messageId}`;\n \n useEffect(() => {\n if (messageId) {\n const wasExecuted = localStorage.getItem(executionKey) === 'true';\n if (wasExecuted) {\n setHasExecuted(true);\n }\n }\n }, [messageId, executionKey]);\n\n // Initialize countdown for auto execution\n useEffect(() => {\n // Only initialize countdown if this is the latest message and hasn't been executed\n if (shouldAutoExecute && nextSteps.countdown && nextSteps.countdown > 0 && !hasExecuted) {\n setCountdown(nextSteps.countdown);\n \n // Select the highest priority proposal for auto execution\n const sortedProposals = [...nextSteps.proposals].sort((a, b) => {\n // If no priority specified, treat as 0\n const priorityA = nextSteps.priority || 0;\n const priorityB = nextSteps.priority || 0;\n return priorityB - priorityA;\n });\n \n if (sortedProposals.length > 0) {\n setSelectedProposal(sortedProposals[0]);\n }\n }\n }, [shouldAutoExecute, nextSteps.countdown, nextSteps.proposals, nextSteps.priority, hasExecuted]);\n\n // Countdown timer effect\n useEffect(() => {\n if (countdown === null || countdown <= 0 || userInteracted || hasExecuted || !isLatestMessage) return;\n\n const timer = setTimeout(() => {\n if (countdown === 1) {\n // Execute the selected proposal\n if (selectedProposal && shouldAutoExecute) {\n executeProposal(selectedProposal);\n }\n setCountdown(null);\n } else {\n setCountdown(countdown - 1);\n }\n }, 1000);\n\n return () => clearTimeout(timer);\n }, [countdown, selectedProposal, shouldAutoExecute, onExecuteProposal, userInteracted, hasExecuted, isLatestMessage]);\n\n // Execute a proposal and mark as executed\n const executeProposal = useCallback((proposal: NextStepProposal) => {\n if (hasExecuted) return; // Prevent double execution\n \n setHasExecuted(true);\n if (messageId) {\n localStorage.setItem(executionKey, 'true');\n }\n onExecuteProposal(proposal.action.content);\n }, [hasExecuted, messageId, executionKey, onExecuteProposal]);\n\n // Handle manual proposal selection\n const handleProposalClick = useCallback((proposal: NextStepProposal) => {\n if (hasExecuted || !isLatestMessage) return; // Only allow execution on latest message\n \n setUserInteracted(true);\n setCountdown(null);\n executeProposal(proposal);\n }, [hasExecuted, isLatestMessage, executeProposal]);\n\n // Handle explicit cancellation\n const handleCancel = useCallback(() => {\n setUserInteracted(true);\n setCountdown(null);\n }, []);\n\n // Handle user interaction (cancels auto execution)\n const handleUserInteraction = useCallback(() => {\n if (!userInteracted && isLatestMessage) {\n setUserInteracted(true);\n setCountdown(null);\n }\n }, [userInteracted, isLatestMessage]);\n\n // Calculate progress for visual indicators\n const getProgressPercentage = (proposal: NextStepProposal): number => {\n if (shouldAutoExecute && selectedProposal?.id === proposal.id && countdown !== null && !hasExecuted) {\n // Auto execution countdown progress\n const totalTime = nextSteps.countdown || 1;\n return ((totalTime - countdown) / totalTime) * 100;\n } else if (!isAutoType && nextSteps.priority) {\n // Static priority indication\n return Math.min(nextSteps.priority, 100);\n }\n return 0;\n };\n\n const getProgressColor = (proposal: NextStepProposal): string => {\n if (shouldAutoExecute && selectedProposal?.id === proposal.id && countdown !== null && !hasExecuted) {\n return \"#3b82f6\"; // Blue for countdown\n } else if (!isAutoType && nextSteps.priority) {\n return \"#6b7280\"; // Gray for static priority\n }\n return \"transparent\";\n };\n\n // Don't render if already executed and not the latest message\n if (hasExecuted && !isLatestMessage) {\n return (\n

\n \n Next Steps (Executed)\n \n

\n );\n }\n\n return (\n

\n \n {hasExecuted ? (\n <>\n Next Steps (Executed)\n \n ) : isAutoType ? (\n <>\n \n {countdown !== null ? ` Auto-executing in ${countdown}s` : \" Next Steps\"}\n \n ) : (\n <>\n Next Steps\n \n )}\n \n {!hasExecuted && countdown !== null && isLatestMessage && (\n \n )}\n {userInteracted && countdown !== null && !hasExecuted && (\n \n Auto-execution cancelled\n \n )}\n

\n \n

\n {nextSteps.proposals.map((proposal) => {\n const progress = getProgressPercentage(proposal);\n const progressColor = getProgressColor(proposal);\n const isSelected = selectedProposal?.id === proposal.id;\n const isDisabled = hasExecuted || !isLatestMessage;\n \n return (\n handleProposalClick(proposal)}\n onMouseEnter={handleUserInteraction}\n title={proposal.description || proposal.title}\n disabled={isDisabled}\n >\n

\n {proposal.title}\n {proposal.description && (\n {proposal.description}\n )}\n

\n \n {progress > 0 && !hasExecuted && (\n

\n )}\n \n {isSelected && countdown !== null && !hasExecuted && isLatestMessage && (\n {countdown}\n )}\n \n );\n })}\n

\n );\n}",[],[184,303,523],"e5235a88-533d-11f0-a652-f69ea79377d9","Message.tsx","629c8178-3cdd-11f0-8042-9e149126039e",1035,["D",1751018575077],113,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { AskUserToolInput, NextStepsOutput } from \"../../shared/types.ts\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\nimport { Message } from \"./App.tsx\";\nimport AskUserInput from \"./AskUserInput.tsx\";\nimport HTMLRenderer from \"./HTMLRenderer.tsx\";\nimport NextSteps from \"./NextSteps.tsx\";\nimport ResourceViewer from \"./ResourceViewer.tsx\";\n\ninterface MessageProps {\n message: Message;\n onDelete?: () => void;\n onRetry?: () => void;\n canRetry?: boolean;\n mcpClients?: MCPClient[]; // Add MCP clients for HTML renderer\n onSendMessage?: (content: string) => void; // Add callback for NextSteps execution\n autoExecuteNextSteps?: boolean; // Add auto-execution setting\n isLatestMessage?: boolean; // Track if this is the latest message for NextSteps\n // Ask user tool support\n pendingTool?: {\n toolName: string;\n input: any;\n toolUseId: string;\n } | null;\n onResolvePendingTool?: (response: string) => void;\n onCancelPendingTool?: () => void;\n type?: \"std\" | \"stream\";\n}\n\n/* ──────────────────────────── Streaming-block helper types ────────────────── */\ninterface AnthropicBlock {\n type: string;\n text?: string;\n language?: string; // for code blocks\n _streaming?: boolean; // present on the *current* block being streamed\n /* keep-all for future keys */\n [key: string]: any;\n}\n\nfunction Time({ timestamp }: { timestamp: number }) {\n const [now, setNow] = useState(new Date());\n\n useEffect(() => {\n // create a interval and get the id\n const myInterval = setInterval(() => {\n setNow(new Date());\n }, 10_000);\n // clear out the interval using the id when unmounting the component\n return () => clearInterval(myInterval);\n }, []);\n\n const formatTimestamp = (timestamp: number, forceFull: boolean) => {\n if (!timestamp) return;\n const date = new Date(timestamp);\n const diffMs = now.getTime() - date.getTime();\n const diffSecs = Math.floor(diffMs / 1000);\n const diffMins = Math.floor(diffMs / (1000 * 60));\n const diffHours = Math.floor(diffMs / (1000 * 60 * 60));\n const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));\n\n if (!forceFull && diffSecs < 5) return \"just now\";\n if (!forceFull && diffSecs < 60) return `${diffSecs}s ago`;\n if (!forceFull && diffMins < 60) return `${diffMins}m ago`;\n if (!forceFull && diffHours < 24) return `${diffHours}h ago`;\n if (!forceFull && diffDays < 7) return `${diffDays}d ago`;\n\n // For older messages, show date\n return date.toLocaleDateString(undefined, {\n month: \"short\",\n day: \"numeric\",\n ...(date.getFullYear() !== now.getFullYear() && { year: \"numeric\" }),\n });\n };\n\n return (\n \n {formatTimestamp(timestamp, false)}\n \n );\n}\n\n/* ───────────────────────────────────────────────────────────────────────────── */\n\nexport default function MessageComponent({\n message,\n onDelete,\n onRetry,\n canRetry,\n mcpClients = [],\n onSendMessage,\n autoExecuteNextSteps = false,\n isLatestMessage = false,\n pendingTool,\n onResolvePendingTool,\n onCancelPendingTool,\n type = \"std\",\n}: MessageProps) {\n const formatRegularContent = (content: string) =>

;\n\n const onCopy = (target: any) => {\n if (typeof target.content === \"string\") {\n navigator.clipboard.writeText(target.content);\n } else {\n navigator.clipboard.writeText(target.content.map(b => b.text).join(\"\\n\"));\n }\n\n alert(\"Copied to clipboard\");\n };\n\n /* ═══════ 1. Renderer for *streaming* Anthropic blocks (live preview) ══════ */\n\n // Helper function to find matching mcp_tool_use block by tool_use_id\n const findToolUseBlock = (blocks: AnthropicBlock[], toolUseId: string): AnthropicBlock | null => {\n return blocks.find(block => block.type === \"mcp_tool_use\" && block.id === toolUseId) || null;\n };\n\n const renderAnthropicBlocks = (blocks: AnthropicBlock[]) => {\n try {\n return (\n

\n {(blocks.length ? blocks : [blocks]).map((blk, idx) => {\n switch (blk.type) {\n case \"text\":\n return (\n

\n {formatRegularContent(blk.text ?? \"\")}\n {blk._streaming && ▊}\n

\n );\n\n case \"code\":\n // Re-wrap code in markdown fences so existing MD pipeline highlights it\n return (\n

\n onCopy(blk)}>\n \n \n {formatRegularContent(\n `\\`\\`\\`${blk.language ?? \"\"}\\n${blk.text ?? \"\"}\\n\\`\\`\\``,\n )}\n

\n );\n\n case \"mcp_tool_use\":\n return (\n
\n
\n {blk.name}\n
\n
\n onCopy(blk)}>\n \n \n {JSON.stringify(blk, null, 2)}\n
\n
\n );\n\n case \"mcp_tool_result\":\n try {\n const res = JSON.parse(blk.content[0].text);\n\n // Check for NextSteps output\n if (res.output?.nextSteps && onSendMessage) {\n const nextStepsData: NextStepsOutput = {\n nextSteps: res.output.nextSteps,\n };\n\n return (\n
\n \n
\n );\n }\n\n // Check for ResourceViewer output (FileViewerResult)\n if (res.output?.resource && res.output?.sourceKey) {\n // Find the matching mcp_tool_use block to get server name\n const toolUseBlock = findToolUseBlock(blocks, blk.tool_use_id);\n const serverName = toolUseBlock?.server_name;\n\n return (\n \n );\n }\n\n // Check for HTML output (existing functionality)\n if (typeof res.output?.html === \"string\") {\n return (\n \n );\n }\n if (\"string\" === typeof res) {\n // console.warn(\"MCP tool result parsed is a string\", res);\n return (\n
\n
{blk.is_error ? \"(Error)\" : \"Ok\"}
\n
\n {renderAnthropicBlocks([{ type: \"text\", text: res }])}\n
\n
\n );\n }\n } catch (err) {\n // JSON parsing failed - check if content contains Anthropic blocks\n try {\n return (\n
\n
{blk.is_error ? \"(Error)\" : \"Ok\"}
\n
\n {renderAnthropicBlocks(blk.content)}\n
\n
\n );\n } catch (innerErr) {\n // Not valid JSON at all, fall through to default handling\n }\n }\n return (\n
\n
{blk.is_error ? \"(Error)\" : \"Ok\"}
\n
\n onCopy(blk)}>\n \n \n {typeof blk.content === 'string' ? blk.content : blk.content.map(b => b.text).join(\"\\n\")}\n
\n
\n );\n case \"tool_use\":\n // Handle client-side ask_user tool\n if (blk.name === \"ask_user\" && pendingTool?.toolUseId === blk.id) {\n const askUserInput: AskUserToolInput = blk.input;\n return (\n
\n {\n if (onResolvePendingTool) {\n onResolvePendingTool(response);\n }\n }}\n onCancel={() => {\n if (onCancelPendingTool) {\n onCancelPendingTool();\n }\n }}\n className=\"ask-user-inline\"\n />\n
\n );\n }\n\n // Default tool_use display for non-interactive tools\n return (\n
\n
{blk.name} (client tool)
\n
\n onCopy(blk)}>\n \n \n {JSON.stringify(blk, null, 2)}\n
\n
\n );\n\n case \"tool_result\":\n return (\n
\n
Tool Result
\n
\n onCopy(blk)}>\n \n \n {blk.content}\n
\n
\n );\n /* Unknown or future block types */\n default:\n return (\n
\n
{blk.type}
\n
\n onCopy(blk)}>\n \n \n {typeof blk.content === 'string' ? blk.content : blk.content.map(b => b.text).join(\"\\n\")}\n
\n
\n );\n }\n })}\n

\n );\n } catch (err) {\n return
Error: {err.message} {err.stack}
;\n }\n };\n\n /* ═══════ Decide renderer based on runtime type ═══════════════════════════ */\n\n const renderContent = () => {\n const content = message.content as unknown;\n\n // 1. Live preview (array of blocks)\n if (Array.isArray(content)) {\n return renderAnthropicBlocks(content as AnthropicBlock[]);\n } else {\n return renderAnthropicBlocks([{ type: \"text\", text: message.content }]);\n }\n\n // 3. Defensive fallback\n return (\n
\n {JSON.stringify(content, null, 2)}\n
\n );\n };\n\n /* ═══════ Render wrapper ══════════════════════════════════════════════════ */\n\n return (\n
\n
\n {renderContent()}\n
\n
\n \n {onRetry && canRetry && (\n \n \n \n )}\n {onDelete && (\n \n \n \n )}\n {onCopy && (\n onCopy(message)}\n title=\"Copy this message\"\n >\n \n \n )}\n
\n
\n );\n}",[],[184,303,531],"59eccd50-5347-11f0-baba-f69ea79377d9","MCPStatus.tsx","ef20afbc-42bd-11f0-9fa6-76b3cceeab13",1059,["D",1751022636478],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPClientPool } from \"../utils/mcpClientPool.ts\";\nimport { CLIENT_TOOLS } from \"../utils/clientTools.ts\";\n\n// Type definitions\ninterface MCPPrompt {\n serverId: string;\n name: string;\n description?: string;\n arguments?: Array<{\n name: string;\n description?: string;\n required?: boolean;\n }>;\n}\n\ninterface MCPTool {\n serverId: string;\n name: string;\n description?: string;\n inputSchema?: any;\n}\n\ninterface MCPServerConfig {\n id: string;\n name: string;\n url?: string;\n enabled: boolean;\n authorization_token?: string;\n}\n\ninterface MCPTestResult {\n success: boolean;\n error?: string;\n}\n\ninterface MCPStatusProps {\n servers: MCPServerConfig[];\n clientPool: MCPClientPool;\n onUpdateMCPServer?: (serverId: string, updates: Partial) => void;\n className?: string;\n show: boolean;\n}\n\ninterface MCPServerStatus {\n server: MCPServerConfig;\n testResult: MCPTestResult | null;\n prompts: MCPPrompt[];\n tools: MCPTool[];\n isExpanded: boolean;\n lastChecked: number | null;\n}\n\nexport default function MCPStatus({ servers, clientPool, onUpdateMCPServer, show, className = \"\" }: MCPStatusProps) {\n const [serverStatuses, setServerStatuses] = useState>({});\n const [isInitializing, setIsInitializing] = useState(true);\n const [showDetails, setShowDetails] = useState(false);\n\n // Initialize server statuses\n useEffect(() => {\n const initializeStatuses = () => {\n setIsInitializing(true);\n const statuses: Record = {};\n servers.forEach(server => {\n statuses[server.id] = {\n server,\n testResult: null,\n prompts: [],\n tools: [],\n isExpanded: false,\n lastChecked: null,\n };\n });\n setServerStatuses(statuses);\n };\n\n initializeStatuses();\n }, [servers]);\n\n // Test a single server using client pool\n const testServer = async (server: MCPServerConfig): Promise => {\n if (!server.url) {\n return { success: false, error: \"No URL configured\" };\n }\n\n try {\n return await clientPool.testServer(server.name);\n } catch (error) {\n console.error(`[MCP Status] Failed to test ${server.name}:`, error);\n return {\n success: false,\n error: error instanceof Error ? error.message : \"Connection failed\",\n };\n }\n };\n\n // Fetch prompts from client pool\n const fetchPrompts = async (server: MCPServerConfig): Promise => {\n try {\n const result = await clientPool.fetchPrompts();\n if (result.success) {\n // Filter prompts for this specific server\n return result.prompts.filter(prompt => prompt.serverName === server.name);\n }\n return [];\n } catch (error) {\n console.error(`[MCP Status] Failed to fetch prompts for ${server.name}:`, error);\n return [];\n }\n };\n\n // Fetch tools from client pool\n const fetchTools = async (server: MCPServerConfig): Promise => {\n try {\n const result = await clientPool.fetchTools();\n if (result.success) {\n // Filter tools for this specific server\n return result.tools.filter(tool => tool.serverName === server.name);\n }\n return [];\n } catch (error) {\n console.error(`[MCP Status] Failed to fetch tools for ${server.name}:`, error);\n return [];\n }\n };\n\n // Auto-check enabled servers on startup using client pool\n useEffect(() => {\n const checkEnabledServers = async () => {\n if (!isInitializing) return;\n\n const enabledServers = servers.filter(s => s.enabled && s.url);\n if (enabledServers.length === 0) {\n setIsInitializing(false);\n return;\n }\n\n console.log(`[MCP Status] Checking ${enabledServers.length} enabled servers using client pool...`);\n\n try {\n // Test all enabled servers using client pool\n const testPromises = enabledServers.map(async server => {\n const testResult = await testServer(server);\n let prompts: MCPPrompt[] = [];\n let tools: MCPTool[] = [];\n\n if (testResult.success) {\n // Fetch prompts and tools if test succeeded\n [prompts, tools] = await Promise.all([\n fetchPrompts(server),\n fetchTools(server),\n ]);\n }\n\n return {\n serverId: server.id,\n testResult,\n prompts,\n tools,\n };\n });\n\n const results = await Promise.all(testPromises);\n\n // Update statuses\n setServerStatuses(prev => {\n const updated = { ...prev };\n\n results.forEach(({ serverId, testResult, prompts, tools }) => {\n if (updated[serverId]) {\n updated[serverId] = {\n ...updated[serverId],\n testResult,\n prompts,\n tools,\n lastChecked: Date.now(),\n };\n }\n });\n\n return updated;\n });\n\n console.log(`[MCP Status] Startup check complete:`, {\n tested: results.length,\n successful: results.filter(r => r.testResult.success).length,\n prompts: results.reduce((sum, r) => sum + r.prompts.length, 0),\n tools: results.reduce((sum, r) => sum + r.tools.length, 0),\n });\n } catch (error) {\n console.error(\"[MCP Status] Error during startup check:\", error);\n } finally {\n setIsInitializing(false);\n }\n };\n\n checkEnabledServers();\n }, [servers, isInitializing, clientPool]);\n\n // Manual refresh function\n const refreshServer = async (serverId: string) => {\n const server = servers.find(s => s.id === serverId);\n if (!server || !server.enabled || !server.url) return;\n\n setServerStatuses(prev => ({\n ...prev,\n [serverId]: {\n ...prev[serverId],\n testResult: null, // Clear previous result to show loading\n },\n }));\n\n try {\n const testResult = await testServer(server);\n let prompts: MCPPrompt[] = [];\n let tools: MCPTool[] = [];\n\n if (testResult.success) {\n [prompts, tools] = await Promise.all([\n fetchPrompts(server),\n fetchTools(server),\n ]);\n }\n\n setServerStatuses(prev => ({\n ...prev,\n [serverId]: {\n ...prev[serverId],\n testResult,\n prompts,\n tools,\n lastChecked: Date.now(),\n },\n }));\n } catch (error) {\n console.error(`[MCP Status] Error refreshing server ${serverId}:`, error);\n setServerStatuses(prev => ({\n ...prev,\n [serverId]: {\n ...prev[serverId],\n testResult: { success: false, error: \"Refresh failed\" },\n lastChecked: Date.now(),\n },\n }));\n }\n };\n\n const toggleServerExpansion = (serverId: string) => {\n setServerStatuses(prev => ({\n ...prev,\n [serverId]: {\n ...prev[serverId],\n isExpanded: !prev[serverId]?.isExpanded,\n },\n }));\n };\n\n const getStatusIcon = (status: MCPServerStatus) => {\n if (!status.server.enabled) return \"⚪\"; // Disabled\n if (!status.server.url) return \"⚠️\"; // No URL\n if (status.testResult === null) return \"⏳\"; // Testing/Loading\n return status.testResult.success ? \"✅\" : \"❌\"; // Success/Error\n };\n\n const getStatusText = (status: MCPServerStatus) => {\n if (!status.server.enabled) return \"Disabled\";\n if (!status.server.url) return \"No URL configured\";\n if (status.testResult === null) return \"Checking...\";\n if (status.testResult.success) {\n const promptCount = status.prompts.length;\n const toolCount = status.tools.length;\n const items = [];\n if (promptCount > 0) items.push(`${promptCount} prompt${promptCount !== 1 ? \"s\" : \"\"}`);\n if (toolCount > 0) items.push(`${toolCount} tool${toolCount !== 1 ? \"s\" : \"\"}`);\n\n // Get server info from client pool if available\n const serverStatuses = clientPool.getServerStatuses();\n const serverStatus = serverStatuses.find(s => s.serverName === status.server.name);\n if (serverStatus?.serverInfo) {\n return `Online (${serverStatus.serverInfo.name} v${serverStatus.serverInfo.version})${\n items.length > 0 ? ` - ${items.join(\", \")}` : \"\"\n }`;\n }\n\n return `Online${items.length > 0 ? ` (${items.join(\", \")})` : \"\"}`;\n }\n return `Error: ${status.testResult.error}`;\n };\n\n const enabledServers = servers.filter(s => s.enabled);\n const onlineServers = Object.values(serverStatuses).filter(s => s.server.enabled && s.testResult?.success);\n const totalPrompts = Object.values(serverStatuses).reduce((sum, s) => sum + s.prompts.length, 0);\n const totalTools = Object.values(serverStatuses).reduce((sum, s) => sum + s.tools.length, 0);\n const clientToolsCount = CLIENT_TOOLS.length;\n\n if (isInitializing) {\n return (\n
\n
\n ⏳\n Initializing MCP servers...\n
\n
\n );\n }\n\n if (!show) return null;\n\n return (\n
\n
setShowDetails(!showDetails)}>\n \n {enabledServers.length === 0\n ? \"⚪\"\n : onlineServers.length === enabledServers.length\n ? \"✅\"\n : onlineServers.length > 0\n ? \"⚠️\"\n : \"❌\"}\n \n \n {enabledServers.length === 0\n ? `No MCP servers enabled • ${clientToolsCount} client tools available`\n : `${onlineServers.length}/${enabledServers.length} servers online • ${totalPrompts} prompts • ${totalTools + clientToolsCount} tools`}\n \n {showDetails ? \"▼\" : \"▶\"}\n
\n\n {showDetails && (\n
\n {/* Client Tools Section */}\n
\n
\n 💻\n Client Tools\n Built-in ({clientToolsCount} tools)\n
\n
\n
\n
Available Client Tools ({clientToolsCount})
\n
\n {CLIENT_TOOLS.map((tool, index) => (\n
\n {tool.name}\n {tool.description && {tool.description}}\n {tool.input_schema && (\n
\n
\n
Input Schema
\n
\n {JSON.stringify(tool.input_schema, null, 2)}\n
\n
\n
\n )}\n
\n ))}\n
\n
\n
\n
\n\n {servers.length === 0\n ? (\n
\n No MCP servers configured\n
\n )\n : (\n servers.map(server => {\n const status = serverStatuses[server.id];\n if (!status) return null;\n\n // Get server info from client pool\n const serverStatuses_pool = clientPool.getServerStatuses();\n const serverStatus = serverStatuses_pool.find(s => s.serverName === server.name);\n\n return (\n
\n toggleServerExpansion(server.id)}\n >\n {getStatusIcon(status)}\n {server.name}\n {getStatusText(status)}\n
\n {server.enabled && server.url && (\n {\n e.stopPropagation();\n refreshServer(server.id);\n }}\n className=\"refresh-button\"\n title=\"Refresh server status\"\n disabled={status.testResult === null}\n >\n 🔄\n \n )}\n \n {status.isExpanded ? \"▼\" : \"▶\"}\n \n
\n
\n\n {status.isExpanded && (\n
\n
\n
\n URL:\n {server.url || \"Not configured\"}\n
\n
\n Auth:\n \n {server.authorization_token ? \"Configured\" : \"None\"}\n \n
\n {serverStatus && (\n <>\n
\n Transport:\n \n {server.url?.startsWith(\"ws\")\n ? \"WebSocket\"\n : server.url?.includes(\",\")\n ? \"SSE + HTTP\"\n : \"HTTP\"}\n \n
\n {serverStatus?.capabilities && (\n
\n Capabilities:\n \n {Object.entries(serverStatus.capabilities)\n .filter(([_, enabled]) => enabled)\n .map(([cap]) => cap)\n .join(\", \") || \"None\"}\n \n
\n )}\n \n )}\n {status.lastChecked && (\n
\n Last checked:\n \n {new Date(status.lastChecked).toLocaleTimeString()}\n \n
\n )}\n
\n\n {status.prompts.length > 0 && (\n
\n
Available Prompts ({status.prompts.length})
\n
\n {status.prompts.map((prompt, index) => (\n
\n /{prompt.name}\n {prompt.description && (\n {prompt.description}\n )}\n {prompt.arguments && prompt.arguments.length > 0 && (\n
\n {prompt.arguments.map((arg, argIndex) => (\n \n {arg.required ? `<${arg.name}>` : `[${arg.name}]`}\n \n ))}\n
\n )}\n
\n ))}\n
\n
\n )}\n\n {status.tools.length > 0 && (\n
\n
Available Tools ({status.tools.length})
\n
\n {status.tools.map((tool, index) => (\n
\n {tool.name}\n {tool.description && {tool.description}}\n {tool.inputSchema && (\n
\n
\n
Input Schema
\n
\n {JSON.stringify(tool.inputSchema, null, 2)}\n
\n
\n
\n )}\n
\n ))}\n
\n
\n )}\n\n {status.testResult && !status.testResult.success && (\n
\n Error: {status.testResult.error}\n
\n )}\n
\n )}\n
\n );\n })\n )}\n
\n )}\n

\n );\n}",[],[184,303,540],"a7b59100-4def-11f0-a761-76b3cceeab13","HTMLRenderer.tsx","abffdc26-44c0-11f0-8e76-76b3cceeab13",960,["D",1750435215461],30,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\n\ninterface HTMLRendererProps {\n html: string;\n mcpClients?: MCPClient[];\n className?: string;\n}\n\ninterface MCPContextAPI {\n // Tool operations\n listTools: () => Promise;\n callTool: (serverName: string, toolName: string, args: any) => Promise;\n\n // Prompt operations\n listPrompts: () => Promise;\n getPrompt: (serverName: string, promptName: string, args?: Record) => Promise;\n\n // Resource operations\n listResources: () => Promise;\n readResource: (serverName: string, uri: string) => Promise;\n\n // Utility functions\n log: (level: \"debug\" | \"info\" | \"warning\" | \"error\", message: string, data?: any) => void;\n\n // UI interactions\n requestFullscreen: () => void;\n exitFullscreen: () => void;\n isFullscreen: () => boolean;\n}\n\n/**\n * HTMLRenderer - Encapsulated component for rendering HTML output from MCP tools\n *\n * Features:\n * - Renders HTML in a secure iframe\n * - Provides fullscreen enter/exit affordances\n * - Exposes MCP context API to iframe content\n * - Handles iframe communication via postMessage\n */\nexport default function HTMLRenderer({ html, mcpClients = [], className = \"\" }: HTMLRendererProps) {\n const iframeRef = useRef(null);\n const containerRef = useRef(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const [isLoading, setIsLoading] = useState(true);\n console.log(\"[MCP/Browser Renderer] HTMLRenderer: Rendering HTML:\", { mcpClients });\n\n // Create MCP context API that will be exposed to iframe\n const createMCPContext = useCallback((): MCPContextAPI => {\n const findClientByName = (serverName: string) => {\n console.log(\"[MCP/Browser Renderer] Finding client by name:\", serverName, mcpClients);\n return mcpClients.find(client =>\n (client as any).serverInfo?.name === serverName\n || (client as any).clientInfo?.name === serverName\n );\n };\n\n return {\n // Tool operations\n listTools: async () => {\n const allTools = [];\n for (const client of mcpClients) {\n try {\n const tools = await client.listTools();\n allTools.push(...tools.map(tool => ({\n ...tool,\n serverName: (client as any).serverInfo?.name || \"Unknown\",\n })));\n } catch (error) {\n console.warn(\"Failed to list tools from client:\", error);\n }\n }\n return allTools;\n },\n\n callTool: async (serverName: string, toolName: string, args: any) => {\n console.log(\"[MCP/Browser Renderer] Calling tool:\", serverName, toolName, args);\n const client = findClientByName(serverName);\n if (!client) {\n throw new Error(`MCP server \"${serverName}\" not found`);\n }\n return await client.callTool(toolName, args);\n },\n\n // Prompt operations\n listPrompts: async () => {\n const allPrompts = [];\n for (const client of mcpClients) {\n try {\n const prompts = await client.listPrompts();\n allPrompts.push(...prompts.map(prompt => ({\n ...prompt,\n serverName: (client as any).serverInfo?.name || \"Unknown\",\n })));\n } catch (error) {\n console.warn(\"Failed to list prompts from client:\", error);\n }\n }\n return allPrompts;\n },\n\n getPrompt: async (serverName: string, promptName: string, args?: Record) => {\n const client = findClientByName(serverName);\n if (!client) {\n throw new Error(`MCP server \"${serverName}\" not found`);\n }\n return await client.getPrompt(promptName, args);\n },\n\n // Resource operations\n listResources: async () => {\n const allResources = [];\n for (const client of mcpClients) {\n try {\n const resources = await client.listResources();\n allResources.push(...resources.map(resource => ({\n ...resource,\n serverName: (client as any).serverInfo?.name || \"Unknown\",\n })));\n } catch (error) {\n console.warn(\"Failed to list resources from client:\", error);\n }\n }\n return allResources;\n },\n\n readResource: async (serverName: string, uri: string) => {\n const client = findClientByName(serverName);\n if (!client) {\n throw new Error(`MCP server \"${serverName}\" not found`);\n }\n return await client.readResource(uri);\n },\n\n // Utility functions\n log: (level: \"debug\" | \"info\" | \"warning\" | \"error\", message: string, data?: any) => {\n console[level](`[HTMLRenderer] ${message}`, data);\n },\n\n // UI interactions\n requestFullscreen: () => {\n if (containerRef.current && !isFullscreen) {\n enterFullscreen();\n }\n },\n\n exitFullscreen: () => {\n if (isFullscreen) {\n exitFullscreen();\n }\n },\n\n isFullscreen: () => isFullscreen,\n };\n }, [mcpClients, isFullscreen]);\n\n // Fullscreen functionality\n const enterFullscreen = useCallback(() => {\n const container = containerRef.current;\n if (!container) return;\n setIsFullscreen(true);\n }, []);\n\n const exitFullscreen = useCallback(() => {\n setIsFullscreen(false);\n }, []);\n\n // Handle iframe communication\n useEffect(() => {\n const handleMessage = async (event: MessageEvent) => {\n const iframe = iframeRef.current;\n if (!iframe || event.source !== iframe.contentWindow) {\n return;\n }\n\n const { type, id, method, args } = event.data;\n\n if (type !== \"mcp-api-call\") {\n return;\n }\n\n try {\n const mcpContext = createMCPContext();\n const methodFunc = (mcpContext as any)[method];\n\n if (typeof methodFunc !== \"function\") {\n throw new Error(`Unknown MCP API method: ${method}`);\n }\n\n const result = await methodFunc(...(args || []));\n\n iframe.contentWindow?.postMessage({\n type: \"mcp-api-response\",\n id,\n success: true,\n result,\n }, \"*\");\n } catch (error) {\n iframe.contentWindow?.postMessage({\n type: \"mcp-api-response\",\n id,\n success: false,\n error: error instanceof Error ? error.message : String(error),\n }, \"*\");\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n return () => window.removeEventListener(\"message\", handleMessage);\n }, [createMCPContext, mcpClients]);\n\n // Create iframe content with injected MCP context\n const createIframeContent = useCallback(() => {\n const contextScript = `\n \n \n \n \n `;\n\n // localStorage.setItem(\"__debugHTML\", html);\n\n return `\n \n \n \n \n \n \n ${contextScript}\n \n \n
\n \n
\n \n
\n ${html}\n
\n \n \n \n \n `;\n }, [html, createMCPContext, mcpClients]);\n\n const iframeKey = React.useMemo(\n () =>\n `clients-${\n mcpClients.map(\n c => (c as any).serverInfo?.name ?? (c as any).clientInfo?.name,\n ).join(\"_\")\n }`,\n [mcpClients],\n );\n\n // Handle iframe load\n const handleIframeLoad = useCallback(() => {\n setIsLoading(false);\n\n // Listen for iframe ready message\n const handleIframeReady = (event: MessageEvent) => {\n if (event.data.type === \"iframe-ready\" && event.source === iframeRef.current?.contentWindow) {\n // Iframe is ready, send initial fullscreen state\n iframeRef.current?.contentWindow?.postMessage({\n type: \"fullscreen-changed\",\n isFullscreen,\n }, \"*\");\n }\n };\n\n window.addEventListener(\"message\", handleIframeReady);\n return () => window.removeEventListener(\"message\", handleIframeReady);\n }, [isFullscreen]);\n\n // Notify iframe of fullscreen changes\n useEffect(() => {\n if (iframeRef.current?.contentWindow) {\n iframeRef.current.contentWindow.postMessage({\n type: \"fullscreen-changed\",\n isFullscreen,\n }, \"*\");\n }\n }, [isFullscreen]);\n\n return (\n \n {/* External fullscreen controls */}\n {!isFullscreen && (\n \n e.currentTarget.style.background = \"rgba(0, 0, 0, 0.9)\"}\n onMouseLeave={(e) => e.currentTarget.style.background = \"rgba(0, 0, 0, 0.7)\"}\n title=\"Enter fullscreen\"\n >\n ⛶\n \n \n )}\n\n {/* Loading indicator */}\n {isLoading && (\n \n
\n
\n
\n
\n
\n Loading HTML content...\n \n )}\n\n {/* Iframe */}\n \n \n );\n}",[],[184,303,548],"0725d7d6-5eac-11f0-ae40-0224a6c84d84","EnhancedCommandPalette.tsx","2023c796-4095-11f0-b0e3-76b3cceeab13",1414,["D",1752275339569],119,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { CLIENT_TOOL_HANDLERS, CLIENT_TOOLS, ClientTool } from \"../utils/clientTools.ts\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\nimport { MCPClientPool } from \"../utils/mcpClientPool.ts\";\n\n// Type definitions\ninterface MCPPrompt {\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n arguments?: Array<{\n name: string;\n description?: string;\n required?: boolean;\n }>;\n}\n\ninterface MCPTool {\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n inputSchema?: any;\n}\n\ninterface ClientToolCommand {\n type: \"client_tool\";\n serverId: \"client\";\n serverName: \"Client\";\n name: string;\n description?: string;\n data: ClientTool;\n}\n\ninterface MCPServerConfig {\n id: string;\n name: string;\n url?: string;\n enabled: boolean;\n authorization_token?: string;\n}\n\ntype CommandType = \"prompt\" | \"tool\" | \"client_tool\";\n\ninterface Command {\n type: CommandType;\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n data: MCPPrompt | MCPTool | ClientTool;\n}\n\ninterface CommandPaletteProps {\n servers: MCPServerConfig[];\n query: string;\n onClose: () => void;\n onExecute: (result: string) => void;\n onResult: (result: any) => void;\n onDialogStateChange: (isActive: boolean) => void;\n position: { bottom: string; left: string };\n visible: boolean;\n mcpClients: MCPClient[];\n clientPool: MCPClientPool;\n affordanceManager: any;\n}\n\ninterface ArgumentValue {\n [key: string]: any;\n}\n\n// Helper functions for JSON Schema handling\nconst getDefaultValue = (schema: any): any => {\n if (schema.default !== undefined) return schema.default;\n\n switch (schema.type) {\n case \"boolean\":\n return false;\n case \"number\":\n case \"integer\":\n return \"\";\n case \"array\":\n return [];\n case \"object\":\n return {};\n default:\n return \"\";\n }\n};\n\nconst coerceValue = (value: any, schema: any): any => {\n if (value === \"\" || value === null || value === undefined) {\n return schema.default !== undefined ? schema.default : null;\n }\n\n switch (schema.type) {\n case \"boolean\":\n return Boolean(value);\n case \"number\":\n const num = parseFloat(value);\n return isNaN(num) ? null : num;\n case \"integer\":\n const int = parseInt(value, 10);\n return isNaN(int) ? null : int;\n case \"array\":\n if (Array.isArray(value)) return value;\n if (typeof value === \"string\") {\n try {\n const parsed = JSON.parse(value);\n return Array.isArray(parsed) ? parsed : [value];\n } catch {\n return value.split(\",\").map(s => s.trim()).filter(s => s);\n }\n }\n return [value];\n case \"object\":\n if (typeof value === \"object\") return value;\n if (typeof value === \"string\") {\n try {\n return JSON.parse(value);\n } catch {\n return {};\n }\n }\n return {};\n default:\n return String(value);\n }\n};\n\nconst getInputPlaceholder = (key: string, schema: any): string => {\n if (schema.description) return schema.description;\n\n switch (schema.type) {\n case \"array\":\n return schema.items?.type === \"string\"\n ? \"Enter comma-separated values...\"\n : \"Enter JSON array...\";\n case \"object\":\n return \"Enter JSON object...\";\n case \"number\":\n case \"integer\":\n const constraints = [];\n if (schema.minimum !== undefined) constraints.push(`min: ${schema.minimum}`);\n if (schema.maximum !== undefined) constraints.push(`max: ${schema.maximum}`);\n return constraints.length ? `Enter ${key} (${constraints.join(\", \")})...` : `Enter ${key}...`;\n default:\n return `Enter ${key}...`;\n }\n};\n\nexport default function EnhancedCommandPalette({\n servers,\n query,\n onClose,\n onExecute,\n onResult,\n onDialogStateChange,\n position,\n visible,\n mcpClients,\n clientPool,\n affordanceManager,\n}: CommandPaletteProps) {\n const [commands, setCommands] = useState([]);\n const [selectedIndex, setSelectedIndex] = useState(0);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [showArgumentDialog, setShowArgumentDialog] = useState(false);\n const [selectedCommand, setSelectedCommand] = useState(null);\n const [argumentValues, setArgumentValues] = useState({});\n const argumentInputRefs = useRef>(new Map());\n\n // Initialize commands using client pool\n useEffect(() => {\n const initializeCommands = async () => {\n console.log(`[CMD] Initializing commands using client pool...`);\n if (!visible) return;\n\n setLoading(true);\n setError(null);\n\n try {\n // Fetch prompts and tools using the client pool\n const [promptsResult, toolsResult] = await Promise.all([\n clientPool.fetchPrompts(),\n clientPool.fetchTools(),\n ]);\n\n const newCommands: Command[] = [];\n\n // Add client-side tools as commands first (higher priority)\n CLIENT_TOOLS.forEach(tool => {\n newCommands.push({\n type: \"client_tool\",\n serverId: \"client\",\n serverName: \"Client\",\n name: tool.name,\n description: tool.description,\n data: tool,\n });\n });\n\n // Add prompts as commands\n if (promptsResult.success) {\n promptsResult.prompts.forEach(prompt => {\n newCommands.push({\n type: \"prompt\",\n serverId: prompt.serverId,\n serverName: prompt.serverName,\n name: prompt.name,\n description: prompt.description,\n data: prompt,\n });\n });\n }\n\n // Add tools as commands\n if (toolsResult.success) {\n toolsResult.tools.forEach(tool => {\n newCommands.push({\n type: \"tool\",\n serverId: tool.serverId,\n serverName: tool.serverName,\n name: tool.name,\n description: tool.description,\n data: tool,\n });\n });\n }\n\n setCommands(newCommands);\n\n // Log any errors\n if (!promptsResult.success) {\n console.warn(\"[CMD] Failed to fetch prompts:\", promptsResult.error);\n }\n if (!toolsResult.success) {\n console.warn(\"[CMD] Failed to fetch tools:\", toolsResult.error);\n }\n } catch (error) {\n console.error(\"[CMD] Error initializing commands:\", error);\n setError(error instanceof Error ? error.message : \"Failed to load commands\");\n } finally {\n setLoading(false);\n }\n };\n\n initializeCommands();\n }, [visible, clientPool]);\n\n // Clean up on unmount (no longer needed since we don't manage clients)\n useEffect(() => {\n return () => {\n // No cleanup needed since we use the centralized client pool\n };\n }, []);\n\n // Filter commands based on query\n const getFilteredCommands = useCallback(() => {\n if (!query.startsWith(\"/\")) return [];\n\n const searchQuery = query.slice(1).toLowerCase();\n const [commandPart, ...argParts] = searchQuery.split(\" \");\n\n // If user has already typed arguments, don't show palette\n if (argParts.length > 0) return [];\n\n return commands.filter(command => {\n const nameMatch = command.name.toLowerCase().includes(commandPart);\n const descMatch = command.description?.toLowerCase().includes(commandPart);\n const typeMatch = commandPart.startsWith(\"tool:\") && (command.type === \"tool\" || command.type === \"client_tool\");\n const promptMatch = commandPart.startsWith(\"prompt:\") && command.type === \"prompt\";\n const clientMatch = commandPart.startsWith(\"client:\") && command.type === \"client_tool\";\n\n return nameMatch || descMatch || typeMatch || promptMatch || clientMatch;\n });\n }, [query, commands]);\n\n // Handle keyboard navigation\n useEffect(() => {\n if (!visible) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const filtered = getFilteredCommands();\n\n switch (e.key) {\n case \"ArrowDown\":\n e.preventDefault();\n setSelectedIndex(prev => (prev + 1) % Math.max(1, filtered.length));\n break;\n case \"ArrowUp\":\n e.preventDefault();\n setSelectedIndex(prev => prev === 0 ? filtered.length - 1 : prev - 1);\n break;\n case \"Enter\":\n e.preventDefault();\n if (filtered[selectedIndex]) {\n handleCommandSelect(filtered[selectedIndex]);\n }\n break;\n case \"Escape\":\n e.preventDefault();\n if (showArgumentDialog) {\n setShowArgumentDialog(false);\n setSelectedCommand(null);\n setArgumentValues({});\n onDialogStateChange(false); // Notify parent that dialog is closed\n } else {\n onClose();\n }\n break;\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [visible, selectedIndex, getFilteredCommands, showArgumentDialog]);\n\n // Reset selected index when query changes\n useEffect(() => {\n setSelectedIndex(0);\n }, [query]);\n\n // Handle command selection\n const handleCommandSelect = async (command: Command) => {\n console.log(\"[CMD] Command selected:\", command);\n if (command.type === \"prompt\") {\n const prompt = command.data as MCPPrompt;\n\n // Check if prompt has required arguments\n if (prompt.arguments && prompt.arguments.some(arg => arg.required)) {\n console.log(\"[CMD] Prompt has required arguments:\", prompt);\n setSelectedCommand(command);\n setShowArgumentDialog(true);\n onDialogStateChange(true); // Notify parent that dialog is active\n\n // Initialize with default values\n const defaultValues: ArgumentValue = {};\n prompt.arguments.forEach(arg => {\n defaultValues[arg.name] = getDefaultValue(arg);\n });\n setArgumentValues(defaultValues);\n\n // Focus first input after dialog shows\n setTimeout(() => {\n const firstInput = argumentInputRefs.current.values().next().value;\n firstInput?.focus();\n }, 50);\n } else {\n // Execute prompt without arguments\n await executePrompt(command, {});\n }\n } else if (command.type === \"tool\") {\n const tool = command.data as MCPTool;\n\n // Check if tool requires input\n if (tool.inputSchema?.properties && Object.keys(tool.inputSchema.properties).length > 0) {\n setSelectedCommand(command);\n setShowArgumentDialog(true);\n onDialogStateChange(true); // Notify parent that dialog is active\n\n // Initialize with default values\n const defaultValues: ArgumentValue = {};\n Object.entries(tool.inputSchema.properties).forEach(([key, schema]: [string, any]) => {\n defaultValues[key] = getDefaultValue(schema);\n });\n setArgumentValues(defaultValues);\n\n // Focus first input after dialog shows\n setTimeout(() => {\n const firstInput = argumentInputRefs.current.values().next().value;\n firstInput?.focus();\n }, 50);\n } else {\n // Execute tool without arguments\n await executeTool(command, {});\n }\n } else if (command.type === \"client_tool\") {\n const tool = command.data as ClientTool;\n\n // Check if tool requires input\n if (tool.input_schema?.properties && Object.keys(tool.input_schema.properties).length > 0) {\n setSelectedCommand(command);\n setShowArgumentDialog(true);\n onDialogStateChange(true); // Notify parent that dialog is active\n\n // Initialize with default values\n const defaultValues: ArgumentValue = {};\n Object.entries(tool.input_schema.properties).forEach(([key, schema]: [string, any]) => {\n defaultValues[key] = getDefaultValue(schema);\n });\n setArgumentValues(defaultValues);\n\n // Focus first input after dialog shows\n setTimeout(() => {\n const firstInput = argumentInputRefs.current.values().next().value;\n firstInput?.focus();\n }, 50);\n } else {\n // Execute client tool without arguments\n await executeClientTool(command, {});\n }\n }\n };\n\n // Execute a prompt using client pool\n const executePrompt = async (command: Command, args: ArgumentValue) => {\n console.log(\"[CMD] Executing prompt:\", command, args);\n try {\n setLoading(true);\n const result = await clientPool.getPrompt(command.serverName, command.name, args);\n console.log(\"[CMD] Prompt result:\", result);\n \n // Auto-submit the prompt result instead of just setting input\n onExecute(result);\n onClose();\n } catch (error) {\n console.error(\"Failed to execute prompt:\", error);\n setError(error instanceof Error ? error.message : \"Failed to execute prompt\");\n } finally {\n setLoading(false);\n }\n };\n\n // Execute a client tool\n const executeClientTool = async (command: Command, args: ArgumentValue) => {\n try {\n setLoading(true);\n\n // Coerce values based on schema\n const tool = command.data as ClientTool;\n const coercedArgs: ArgumentValue = {};\n\n if (tool.input_schema?.properties) {\n Object.entries(args).forEach(([key, value]) => {\n const schema = tool.input_schema.properties[key];\n if (schema) {\n coercedArgs[key] = coerceValue(value, schema);\n } else {\n coercedArgs[key] = value;\n }\n });\n } else {\n Object.assign(coercedArgs, args);\n }\n\n // Execute the client tool and get result\n const toolUseId = `client_tool_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n\n // Import and execute the tool handler\n const handler = CLIENT_TOOL_HANDLERS[command.name];\n\n if (!handler) {\n throw new Error(`No handler found for client tool: ${command.name}`);\n }\n\n // Execute the tool\n const result = await handler(\n coercedArgs,\n toolUseId,\n () => {}, // setPendingTool - not used in command palette context\n {}, // tools - not used in command palette context\n clientPool,\n affordanceManager,\n );\n\n const res = [\n {\n type: \"tool_use\",\n id: toolUseId,\n name: command.name,\n input: coercedArgs,\n },\n {\n type: \"tool_result\",\n tool_use_id: toolUseId,\n content: result,\n },\n ];\n onResult(res);\n onClose();\n } catch (error) {\n console.error(\"Failed to execute client tool:\", error);\n\n // Format error as standard tool use and error result\n const toolUseId = `client_tool_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n const errorMessage = error instanceof Error ? error.message : \"Failed to execute client tool\";\n const errorRes = [\n {\n type: \"tool_use\",\n id: toolUseId,\n name: command.name,\n input: args,\n },\n {\n type: \"tool_result\",\n tool_use_id: toolUseId,\n is_error: true,\n content: errorMessage,\n },\n ];\n onResult(errorRes);\n onClose();\n } finally {\n setLoading(false);\n }\n };\n\n // Execute a tool using client pool\n const executeTool = async (command: Command, args: ArgumentValue) => {\n try {\n setLoading(true);\n\n // Coerce values based on schema\n const tool = command.data as MCPTool;\n const coercedArgs: ArgumentValue = {};\n\n if (tool.inputSchema?.properties) {\n Object.entries(args).forEach(([key, value]) => {\n const schema = tool.inputSchema.properties[key];\n if (schema) {\n coercedArgs[key] = coerceValue(value, schema);\n } else {\n coercedArgs[key] = value;\n }\n });\n } else {\n Object.assign(coercedArgs, args);\n }\n\n const result = await clientPool.callTool(command.serverName, command.name, coercedArgs);\n\n // Format tool execution as MCP tool use and result blocks (like assistant messages)\n const toolUseId = `tool_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n\n // Extract content if result follows MCP response format (consistent with streaming)\n let resultContent;\n if (result && result.content && Array.isArray(result.content)) {\n // Use the content array directly (consistent with streaming)\n resultContent = result.content;\n } else if (typeof result === \"string\") {\n // Plain string result\n resultContent = [{ type: \"text\", text: result }];\n } else {\n // Other object types - stringify as fallback\n resultContent = [{ type: \"text\", text: JSON.stringify(result, null, 2) }];\n }\n\n const res = [\n {\n type: \"mcp_tool_use\",\n id: toolUseId,\n name: command.name,\n input: coercedArgs,\n server_name: command.serverName,\n },\n {\n type: \"mcp_tool_result\",\n tool_use_id: toolUseId,\n is_error: false,\n content: resultContent,\n },\n ];\n onResult(res);\n onClose();\n } catch (error) {\n console.error(\"Failed to execute tool:\", error);\n\n // Format error as MCP tool use and error result\n const toolUseId = `tool_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n const errorMessage = error instanceof Error ? error.message : \"Failed to execute tool\";\n const errorRes = [\n {\n type: \"mcp_tool_use\",\n id: toolUseId,\n name: command.name,\n input: args,\n server_name: command.serverName,\n },\n {\n type: \"mcp_tool_result\",\n tool_use_id: toolUseId,\n is_error: true,\n content: [{ type: \"text\", text: errorMessage }],\n },\n ];\n onResult(errorRes);\n onClose();\n } finally {\n setLoading(false);\n }\n };\n\n // Handle argument submission\n const handleArgumentSubmit = async () => {\n if (!selectedCommand) return;\n\n if (selectedCommand.type === \"prompt\") {\n await executePrompt(selectedCommand, argumentValues);\n } else if (selectedCommand.type === \"tool\") {\n await executeTool(selectedCommand, argumentValues);\n } else if (selectedCommand.type === \"client_tool\") {\n await executeClientTool(selectedCommand, argumentValues);\n }\n\n setShowArgumentDialog(false);\n setSelectedCommand(null);\n setArgumentValues({});\n onDialogStateChange(false); // Notify parent that dialog is closed\n };\n\n // Render input based on JSON Schema\n const renderSchemaInput = (\n key: string,\n schema: any,\n value: any,\n onChange: (value: any) => void,\n required: boolean = false,\n ) => {\n const commonProps = {\n required,\n ref: (el: HTMLElement | null) => {\n if (el) argumentInputRefs.current.set(key, el);\n },\n };\n\n // Handle enums as select dropdowns\n if (schema.enum && Array.isArray(schema.enum)) {\n return (\n onChange(e.target.value)}\n >\n \n {schema.enum.map((option: any) => (\n \n ))}\n \n );\n }\n\n // Handle different types\n switch (schema.type) {\n case \"boolean\":\n return (\n \n onChange(e.target.checked)}\n />\n {value ? \"Yes\" : \"No\"}\n \n );\n\n case \"number\":\n case \"integer\":\n return (\n onChange(e.target.value)}\n placeholder={getInputPlaceholder(key, schema)}\n min={schema.minimum}\n max={schema.maximum}\n step={schema.type === \"integer\" ? 1 : \"any\"}\n />\n );\n\n case \"array\":\n // Simple array handling - comma-separated for string arrays, JSON for complex\n const isStringArray = schema.items?.type === \"string\";\n const displayValue = Array.isArray(value)\n ? (isStringArray ? value.join(\", \") : JSON.stringify(value, null, 2))\n : (value || \"\");\n\n return (\n {\n const inputValue = e.target.value;\n if (isStringArray) {\n // Handle comma-separated strings\n const arrayValue = inputValue.split(\",\").map(s => s.trim()).filter(s => s);\n onChange(arrayValue);\n } else {\n // Handle JSON input\n try {\n const parsed = JSON.parse(inputValue);\n onChange(Array.isArray(parsed) ? parsed : [parsed]);\n } catch {\n // Store as string until valid JSON\n onChange(inputValue);\n }\n }\n }}\n placeholder={getInputPlaceholder(key, schema)}\n rows={3}\n />\n );\n\n case \"object\":\n const objectValue = typeof value === \"object\" ? JSON.stringify(value, null, 2) : (value || \"\");\n return (\n {\n const inputValue = e.target.value;\n try {\n const parsed = JSON.parse(inputValue);\n onChange(parsed);\n } catch {\n // Store as string until valid JSON\n onChange(inputValue);\n }\n }}\n placeholder={getInputPlaceholder(key, schema)}\n rows={4}\n />\n );\n\n default:\n // Handle string with different formats\n if (schema.format) {\n switch (schema.format) {\n case \"email\":\n return (\n onChange(e.target.value)}\n placeholder={`Enter valid email address...`}\n />\n );\n case \"date\":\n return (\n onChange(e.target.value)}\n />\n );\n case \"date-time\":\n return (\n onChange(e.target.value)}\n />\n );\n case \"uri\":\n case \"url\":\n return (\n onChange(e.target.value)}\n placeholder={`Enter valid URL...`}\n />\n );\n }\n }\n\n // Default to textarea for strings (better for multi-line)\n return (\n onChange(e.target.value)}\n placeholder={getInputPlaceholder(key, schema)}\n rows={3}\n minLength={schema.minLength}\n maxLength={schema.maxLength}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && e.ctrlKey) {\n e.preventDefault();\n handleArgumentSubmit();\n }\n }}\n />\n );\n }\n };\n\n const filteredCommands = getFilteredCommands();\n\n if (!visible || filteredCommands.length === 0) {\n return null;\n }\n\n return (\n <>\n \n {loading && (\n
\n \n \n {\" \"}\n Loading commands...\n
\n )}\n\n {error && (\n
\n {error}\n
\n )}\n\n {/* Argument Dialog */}\n {!loading && !error && showArgumentDialog && selectedCommand && (\n {\n setShowArgumentDialog(false);\n onDialogStateChange(false); // Notify parent that dialog is closed\n }}\n >\n e.stopPropagation()}\n style={{\n xbackgroundColor: \"white\",\n }}\n >\n
\n
\n {selectedCommand.type === \"prompt\"\n ? \n : selectedCommand.type === \"client_tool\"\n ? \n : } {selectedCommand.name}\n
\n {\n setShowArgumentDialog(false);\n onDialogStateChange(false); // Notify parent that dialog is closed\n }}\n >\n ✕\n \n
\n\n
\n {selectedCommand.description &&
{selectedCommand.description}
}\n\n {selectedCommand.type === \"prompt\" && (\n
\n {(selectedCommand.data as MCPPrompt).arguments?.map((arg, index) => (\n
\n \n {arg.name}\n {arg.required && \"*\"}\n {arg.description && - {arg.description}}\n \n {\n if (el)\n argumentInputRefs.current.set(arg.name, el);\n }}\n value={argumentValues[arg.name] || \"\"}\n onChange={(e) =>\n setArgumentValues(prev => ({\n ...prev,\n [arg.name]: e.target.value,\n }))}\n placeholder={`Enter ${arg.name}...`}\n required={arg.required}\n rows={3}\n onKeyDown={(e) => {\n if (\n e.key === \"Enter\" && e.ctrlKey\n && index === (selectedCommand.data as MCPPrompt).arguments!.length - 1\n ) {\n e.preventDefault();\n handleArgumentSubmit();\n }\n }}\n />\n
\n ))}\n
\n )}\n\n {selectedCommand.type === \"tool\" && (selectedCommand.data as MCPTool).inputSchema?.properties && (\n
\n {Object.entries((selectedCommand.data as MCPTool).inputSchema.properties).map(\n ([key, schema]: [string, any]) => {\n const isRequired = (selectedCommand.data as MCPTool).inputSchema.required?.includes(key);\n return (\n
\n \n {key}\n {isRequired && \"*\"}\n {schema.description && (\n - {schema.description}\n )}\n {schema.type && ({schema.type})}\n \n {renderSchemaInput(\n key,\n schema,\n argumentValues[key],\n (value) => setArgumentValues(prev => ({ ...prev, [key]: value })),\n isRequired,\n )}\n
\n );\n },\n )}\n
\n )}\n\n {selectedCommand.type === \"client_tool\" && (selectedCommand.data as ClientTool).input_schema?.properties\n && (\n
\n {Object.entries((selectedCommand.data as ClientTool).input_schema.properties).map(\n ([key, schema]: [string, any]) => {\n const isRequired = (selectedCommand.data as ClientTool).input_schema.required?.includes(key);\n return (\n
\n \n {key}\n {isRequired && \"*\"}\n {schema.description && (\n - {schema.description}\n )}\n {schema.type && ({schema.type})}\n \n {renderSchemaInput(\n key,\n schema,\n argumentValues[key],\n (value) => setArgumentValues(prev => ({ ...prev, [key]: value })),\n isRequired,\n )}\n
\n );\n },\n )}\n
\n )}\n
\n\n
\n {\n setShowArgumentDialog(false);\n onDialogStateChange(false); // Notify parent that dialog is closed\n }}\n >\n Cancel\n \n \n {loading ? \"Executing...\" : \"Execute\"}\n \n
\n \n \n )}\n\n {!showArgumentDialog && !loading && !error && filteredCommands.slice(0, 10).map((command, index) => (\n handleCommandSelect(command)}\n onMouseEnter={() => setSelectedIndex(index)}\n >\n
\n \n {command.type === \"prompt\"\n ? \n : command.type === \"client_tool\"\n ? \n : }\n \n /{command.name}\n {command.serverName}\n
\n {command.description && (\n
\n {command.description}\n
\n )}\n {command.type === \"prompt\" && (command.data as MCPPrompt).arguments?.length > 0 && (\n
\n Args: {(command.data as MCPPrompt).arguments!.map(arg =>\n `${arg.name}${arg.required ? \"*\" : \"\"}`\n ).join(\", \")}\n
\n )}\n {command.type === \"tool\" && (command.data as MCPTool).inputSchema?.properties && (\n
\n Input: {Object.keys((command.data as MCPTool).inputSchema.properties).join(\", \")}\n
\n )}\n {command.type === \"client_tool\" && (command.data as ClientTool).input_schema?.properties && (\n
\n Input: {Object.keys((command.data as ClientTool).input_schema.properties).join(\", \")}\n
\n )}\n \n ))}\n \n \n );\n}",[],[184,303,557],"bd6ab73e-4d4d-11f0-8a71-76b3cceeab13","AskUserInput.tsx","bd6ab806-4d4d-11f0-8a71-76b3cceeab13",852,["D",1750365673413],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport interface AskUserInputProps {\n question: string;\n inputType?: \"text\" | \"multiline\" | \"choice\" | \"confirm\";\n choices?: string[];\n placeholder?: string;\n required?: boolean;\n onSubmit: (response: string) => void;\n onCancel?: () => void;\n className?: string;\n}\n\nexport default function AskUserInput({\n question,\n inputType = \"text\",\n choices = [],\n placeholder,\n required = false,\n onSubmit,\n onCancel,\n className = \"\",\n}: AskUserInputProps) {\n const [input, setInput] = useState(\"\");\n const [selectedChoice, setSelectedChoice] = useState(null);\n const inputRef = useRef(null);\n\n // Auto-focus on mount\n useEffect(() => {\n if (inputRef.current && inputType !== \"choice\") {\n inputRef.current.focus();\n }\n }, [inputType]);\n\n const handleSubmit = useCallback(() => {\n let response = \"\";\n \n switch (inputType) {\n case \"text\":\n case \"multiline\":\n response = input.trim();\n break;\n case \"choice\":\n response = selectedChoice || \"\";\n break;\n case \"confirm\":\n response = selectedChoice || \"\";\n break;\n }\n\n if (required && !response) {\n return; // Don't submit if required and empty\n }\n\n onSubmit(response);\n }, [input, selectedChoice, inputType, required, onSubmit]);\n\n const handleCancel = useCallback(() => {\n if (onCancel) {\n onCancel();\n } else {\n onSubmit(\"(No response provided)\");\n }\n }, [onCancel, onSubmit]);\n\n const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n handleCancel();\n }\n }, [handleSubmit, handleCancel]);\n\n const canSubmit = !required || (\n inputType === \"text\" || inputType === \"multiline\" ? input.trim() : selectedChoice\n );\n\n return (\n
\n
\n \n {question}\n
\n\n
\n {inputType === \"text\" && (\n
\n }\n type=\"text\"\n value={input}\n onChange={(e) => setInput(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder={placeholder || \"Type your response...\"}\n className=\"ask-user-input-field\"\n />\n
\n )}\n\n {inputType === \"multiline\" && (\n
\n }\n value={input}\n onChange={(e) => setInput(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder={placeholder || \"Type your response...\"}\n className=\"ask-user-textarea-field\"\n rows={3}\n />\n
\n )}\n\n {inputType === \"choice\" && (\n
\n {choices.map((choice, index) => (\n {\n setSelectedChoice(choice);\n // Auto-submit on choice selection\n setTimeout(() => onSubmit(choice), 100);\n }}\n >\n {choice}\n \n ))}\n
\n )}\n\n {inputType === \"confirm\" && (\n
\n {\n setSelectedChoice(\"yes\");\n onSubmit(\"yes\");\n }}\n >\n Yes\n \n {\n setSelectedChoice(\"no\");\n onSubmit(\"no\");\n }}\n >\n No\n \n
\n )}\n\n {(inputType === \"text\" || inputType === \"multiline\") && (\n
\n \n Cancel\n \n \n Submit\n \n
\n )}\n
\n\n
\n {inputType === \"text\" || inputType === \"multiline\" \n ? \"Press Enter to submit, Escape to cancel\"\n : inputType === \"choice\"\n ? \"Click an option to select\"\n : \"Choose an option\"\n }\n
\n
\n );\n}",[],[184,303,566],"4be2c5e4-5bed-11f0-a99f-f69ea79377d9","App.tsx","4d426996-3cdd-11f0-832c-9e149126039e",["D",1751973518688],79,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPServerConfig } from \"../../shared/types.ts\";\nimport useMCPClients from \"../hooks/useMCPClients.tsx\";\nimport MCPStatus from \"./MCPStatus.tsx\";\nimport Settings from \"./Settings.tsx\";\nimport StreamingChat from \"./StreamingChat.tsx\";\n// Temporarily comment out to test\n// import { AffordanceManager } from \"../utils/affordanceManager.ts\";\n\nexport interface Message {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string | any[]; // Support both string and array content for MCP blocks\n timestamp: number;\n}\n\nexport interface AppConfig {\n ready: boolean;\n anthropicApiKey: string;\n mcpServers: MCPServerConfig[];\n selectedModel: string;\n systemPrompt: string;\n autoExecuteNextSteps: boolean;\n}\n\nconst DEFAULT_MCP_SERVERS: MCPServerConfig[] = [\n {\n id: \"contextual-mcp\",\n name: \"Contextual\",\n url: \"https://contextual.parc.land/mcp\",\n authorization_token: \"demo\",\n enabled: true,\n },\n];\n\nconst DEFAULT_SYSTEM_PROMPT = `The assistant MUST Always review existing resources before taking any action.\nIMPORTANT!: The assistant (you) MUST always check system/quick-reference.md file content (use files-get, do not use system-*-files unless specifically directed to), and follow its guidance, before taking _any_ further action.\nQuick reference should never be updated without explicit user consent.\n\nYou are almost certainly being engaged by the creator of the system (client/mcp-server author) when encountering issues, prioritise informing the user so that might fix bugs or direct you how to proceed.\n\nWhen starting a new session (1 or less messages in the chat), you MUST ALWAYS reviewing quick reference and current context, the assistant should NEVER create new contexts unless directed to by the user.\n`;\n\nexport { DEFAULT_SYSTEM_PROMPT };\n\nexport default function App() {\n const [config, setConfig] = useState({\n ready: false,\n anthropicApiKey: \"\",\n mcpServers: [],\n selectedModel: \"claude-3-5-sonnet-20241022\",\n systemPrompt: DEFAULT_SYSTEM_PROMPT,\n autoExecuteNextSteps: true,\n });\n const [showSettings, setShowSettings] = useState(false);\n const [messages, setMessages] = useState([]);\n const [affordanceManager, setAffordanceManager] = useState(null);\n\n // Initialize MCP clients based on server configurations\n const { connectedClients, clientPool, getClientStates, connectedCount } = useMCPClients(\n config.mcpServers,\n );\n\n // Make client pool available globally for tools\n useEffect(() => {\n window.mcpClientPool = clientPool;\n }, [clientPool]);\n\n // Initialize AffordanceManager only once when MCP clients are connected\n useEffect(() => {\n // Only create affordance manager if:\n // 1. We don't already have one\n // 2. We have a client pool\n // 3. Either we have connected clients OR no MCP servers are configured (allow offline usage)\n const shouldCreateManager = !affordanceManager\n && clientPool\n && config.ready\n && (connectedCount > 0 || config.mcpServers.length === 0);\n\n if (shouldCreateManager) {\n console.log(\n `[App] Creating AffordanceManager instance... (connected clients: ${connectedCount})`,\n config.mcpServers,\n );\n\n // Dynamic import to avoid circular dependencies\n import(\"../utils/affordanceManager.ts\").then(({ AffordanceManager }) => {\n const manager = new AffordanceManager(clientPool);\n setAffordanceManager(manager);\n\n // Make it globally available for backward compatibility\n window.affordanceManager = manager;\n\n console.log(`[App] AffordanceManager created and ready`);\n }).catch(error => {\n console.error(\"[App] Failed to load AffordanceManager:\", error);\n });\n }\n }, [clientPool, connectedCount, config.mcpServers.length, affordanceManager]);\n\n // Restore persistent affordances when AffordanceManager is ready and clients are connected\n useEffect(() => {\n const restoreAffordances = async () => {\n if (!affordanceManager) return;\n\n // Wait for MCP clients to be connected if any are configured\n if (config.mcpServers.length > 0 && connectedCount === 0) {\n console.log(`[App] Waiting for MCP clients to connect before restoring affordances...`);\n return;\n }\n\n try {\n console.log(`[App] Restoring persistent affordances... (connected clients: ${connectedCount})`);\n const result = await affordanceManager.restoreAffordances();\n\n if (result.restored > 0) {\n console.log(`[App] Successfully restored ${result.restored} affordances`);\n }\n if (result.failed > 0) {\n console.warn(`[App] Failed to restore ${result.failed} affordances:`, result.errors);\n }\n } catch (error) {\n console.error(`[App] Failed to restore affordances:`, error);\n }\n };\n\n // Only attempt restoration once when the manager is ready and conditions are met\n if (affordanceManager && (connectedCount > 0 || config.mcpServers.length === 0)) {\n restoreAffordances();\n }\n }, [affordanceManager, connectedCount, config.mcpServers.length]);\n\n // Cleanup affordance manager on unmount\n useEffect(() => {\n return () => {\n if (affordanceManager) {\n console.log(`[App] Cleaning up AffordanceManager...`);\n affordanceManager.cleanup().catch(error => {\n console.error(\"[App] Error during AffordanceManager cleanup:\", error);\n });\n // Clear global reference\n if (window.affordanceManager === affordanceManager) {\n window.affordanceManager = null;\n }\n }\n };\n }, [affordanceManager]);\n\n console.log(`[App] MCP Clients`, connectedCount);\n // Load config from localStorage on mount\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"anthropic_api_key\");\n const savedMcpServers = localStorage.getItem(\"mcp_servers\");\n const savedMessages = localStorage.getItem(\"chat_messages\");\n const savedModel = localStorage.getItem(\"selected_model\");\n const savedSystemPrompt = localStorage.getItem(\"system_prompt\");\n const savedAutoExecuteNextSteps = localStorage.getItem(\"auto_execute_next_steps\");\n\n let mcpServers = savedMcpServers ? JSON.parse(savedMcpServers) : DEFAULT_MCP_SERVERS;\n setConfig({\n ready: true,\n anthropicApiKey: savedApiKey || \"\",\n mcpServers: mcpServers,\n selectedModel: savedModel || \"claude-3-5-sonnet-20241022\",\n systemPrompt: savedSystemPrompt || DEFAULT_SYSTEM_PROMPT,\n autoExecuteNextSteps: savedAutoExecuteNextSteps ? JSON.parse(savedAutoExecuteNextSteps) : true,\n });\n\n // Load saved messages\n if (savedMessages) {\n try {\n const parsedMessages = JSON.parse(savedMessages);\n setMessages(parsedMessages);\n } catch (error) {\n console.error(\"Failed to load saved messages:\", error);\n }\n }\n\n // Show settings if no API key is configured\n if (!savedApiKey) {\n setShowSettings(true);\n }\n }, []);\n\n // Save config to localStorage when it changes\n useEffect(() => {\n if (config.anthropicApiKey) {\n localStorage.setItem(\"anthropic_api_key\", config.anthropicApiKey);\n }\n localStorage.setItem(\"mcp_servers\", config.mcpServers?.length ? JSON.stringify(config.mcpServers) : \"\");\n localStorage.setItem(\"selected_model\", config.selectedModel);\n localStorage.setItem(\"system_prompt\", config.systemPrompt);\n localStorage.setItem(\"auto_execute_next_steps\", JSON.stringify(config.autoExecuteNextSteps));\n }, [config]);\n\n // Save messages to localStorage when they change\n useEffect(() => {\n localStorage.setItem(\"chat_messages\", JSON.stringify(messages));\n }, [messages]);\n\n const updateConfig = (newConfig: Partial) => {\n setConfig(prev => ({ ...prev, ...newConfig }));\n };\n\n const updateMCPServer = (serverId: string, updates: Partial) => {\n setConfig(prev => ({\n ...prev,\n mcpServers: prev.mcpServers.map(server => server.id === serverId ? { ...server, ...updates } : server),\n }));\n };\n\n const addMessage = (message: Omit) => {\n setMessages(prev => [...prev, {\n ...message,\n id: crypto.randomUUID(),\n timestamp: Date.now(),\n }]);\n };\n\n const updateLastMessage = (content: string | any[]) => {\n setMessages(prev => {\n if (prev.length === 0) return prev;\n const updated = [...prev];\n updated[updated.length - 1] = { ...updated[updated.length - 1], content };\n return updated;\n });\n };\n\n const deleteMessage = (messageId: string) => {\n setMessages(prev => prev.filter(msg => msg.id !== messageId));\n };\n\n const retryFromMessage = (messageId: string) => {\n const messageIndex = messages.findIndex(msg => msg.id === messageId);\n if (messageIndex === -1) return null;\n\n const message = messages[messageIndex];\n if (message.role !== \"user\") return null;\n\n // Delete all messages after this one (including assistant responses)\n setMessages(prev => prev.slice(0, messageIndex + 1));\n\n // Return the user message content for resubmission\n // If content is an array (MCP blocks), extract text from text blocks\n if (Array.isArray(message.content)) {\n return message.content\n .filter(block => block.type === \"text\")\n .map(block => block.text)\n .join(\"\\n\");\n }\n return message.content;\n };\n\n const clearMessages = () => {\n setMessages([]);\n };\n\n return (\n
\n setShowSettings(true)}\n mcpStatusComponent={{\n component: MCPStatus,\n props: {\n mcpServers: config.mcpServers,\n clientPool,\n onUpdateMCPServer: updateMCPServer,\n },\n }}\n />\n {showSettings && (\n setShowSettings(false)}\n />\n )}\n
\n );\n}",[],[184,303,574],"4d427e7c-3cdd-11f0-832c-9e149126039e",["D",1748558163004],[208,209,210,211,212,213,214,215,216,217],[184,303],["D",1748558112658],[207,218,221,235,236,237],[184],"4d257da2-40c7-11f0-8560-76b3cceeab13","index.ts",268,["D",1748988518534],"import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Serve the main app\napp.get(\"/\", async c => {\n const html = await readFile(\"/frontend/index.html\", import.meta.url);\n return c.html(html);\n});\n\nexport default app.fetch;",[],[190,589],["D",1748558228747],[205],[190],["D",1748557815516],{"_11":12,"_57":96},{"_11":12,"_51":-5,"_52":96,"_34":62,"_54":97,"_56":20},{"_84":85,"_13":86,"_27":87,"_88":58,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":14,"_95":12},"ctx",{"_39":-5,"_119":635,"_636":637,"_638":639,"_640":20,"_641":20,"_642":20,"_643":46,"_644":-5,"_645":-7,"_646":-7,"_647":22,"_648":20,"_649":20,"_650":-5,"_651":20,"_652":20,"_653":20,"_654":-5},"ENV",{"_606":607,"_608":609,"_610":86,"_611":612,"_613":614,"_615":616,"_617":618,"_619":620,"_621":622,"_623":624,"_625":626,"_627":628,"_629":630,"_631":632,"_633":634},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Remixes1

Remixes
1