Anthropic Chat with MCP

\n \n \n",[],[84,163],["D",1749083773738],[172,173,174,175],[84,85],{"_36":99,"_13":100,"_65":101,"_67":68,"_69":70,"_71":72,"_73":74,"_38":185,"_17":76,"_77":78,"_79":103,"_81":51,"_82":-5,"_119":186,"_18":187},{"_36":93,"_13":94,"_65":95,"_67":68,"_69":70,"_71":72,"_73":74,"_38":182,"_17":90,"_77":78,"_79":97,"_81":51,"_82":-5,"_119":183,"_18":184},{"_36":86,"_13":87,"_65":88,"_67":68,"_69":70,"_71":72,"_73":74,"_38":179,"_17":90,"_77":78,"_79":91,"_81":51,"_82":-5,"_119":180,"_18":181},{"_36":63,"_13":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_38":176,"_17":76,"_77":78,"_79":80,"_81":51,"_82":-5,"_119":177,"_18":178},["D",1749562112245],[],[84,85,64],["D",1749562112245],[],[84,85,87],["D",1749562112245],[],[84,85,94],["D",1749562112245],[],[84,85,100],"15b44d2e-41a5-11f0-97a8-76b3cceeab13","hooks","ed0b49c8-de0f-4091-a112-8425fe6af714",["D",1749083773738],[194,195],[84,189],{"_36":203,"_13":204,"_65":205,"_67":190,"_69":70,"_71":72,"_73":74,"_38":206,"_17":90,"_77":78,"_79":207,"_81":51,"_82":-5,"_119":208,"_18":209},{"_36":196,"_13":197,"_65":198,"_67":190,"_69":70,"_71":72,"_73":74,"_38":199,"_17":76,"_77":78,"_79":200,"_81":51,"_82":-5,"_119":201,"_18":202},"cda50952-45fe-11f0-bcbd-76b3cceeab13","useMCPClients.tsx","cda509ca-45fe-11f0-bcbd-76b3cceeab13",["D",1749562112245],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPServerConfig } from \"../../shared/types.ts\";\nimport { MCPClient } from \"../utils/MCPClient.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[]) {\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 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\n const getConnectedClients = useCallback((): 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 // 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: getConnectedClients(),\n getClientById,\n getClientStates,\n clientCount: clientStates.size,\n connectedCount: getConnectedClients().length,\n };\n}",[],[84,189,197],"cda54e44-45fe-11f0-bcbd-76b3cceeab13","useAnthropicStream.tsx","56315d6d-df1c-48d3-b298-b25092bf8eb0",["D",1749562112245],"/** @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 \"./App.tsx\";\n\n/* ──────────────────────────────── Shared helpers ─────────────────────────── */\n\nexport type Status = \"idle\" | \"thinking\" | \"streaming\";\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 (unchanged) */\nfunction buildBody(config: AppConfig, history: Message[], userText: string) {\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 return {\n model: config.selectedModel,\n max_tokens: 8_000,\n stream: true,\n system:\n `You are a helpful assistant with access to AWS DynamoDB and S3 tools. Use these tools to enhance your effectiveness while prioritizing establishing existing knowledge and tracking progress.\n\nINITIALIZATION:\n- Always check DDB item 'system-knowledge' ({\"pk\": \"SYSTEM#KNOWLEDGE\",\"sk\": \"v1\"}) for context during initial query\n- Create if it doesn't exist, keep it updated as system conventions evolve\n- Record tool limitations and workarounds in system knowledge\n\nTOOL USAGE GUIDELINES:\n- DynamoDB Query: Use simple expressions without complex syntax. Test with basic key lookups first\n- Before complex queries, verify table structure and key patterns\n- If query fails, fall back to individual get operations using known key patterns\n- Document successful query patterns in system knowledge for future reference\n- Always validate required parameters before tool calls\n\nERROR HANDLING:\n- When tools fail, log the failure pattern and attempt alternative approaches\n- Update system knowledge with tool limitations and working patterns\n- Provide clear status when tools are unavailable or failing\n\nDATA CONVENTIONS:\n- Maintain consistent key patterns (e.g., GOAL#, TASK#, RESOURCE# prefixes)\n- Document working query patterns and parameter formats\n- Track tool reliability and known issues in system knowledge\n\nKeep responses terse unless detail is specifically requested. Always maintain system knowledge currency.`,\n // \"You are a helpful assistant, with access to tools. use these tools to enhance your effectiveness. prioritise establishing existing knowlege and keep track of progress and learnings as you go. Always Check ddb item 'system-knowledge' {\\\"pk\\\": \\\"SYSTEM#KNOWLEDGE\\\",\\\"sk\\\": \\\"v1\\\" ...}) for context furing inital query, and create if it doesnt exist, keep it up to date as the system convensions evlove.\",\n // \"You are a helpful assistant, with access to tools. use these tools to enhance your effectivness. prioritise establishing existing knowlege and keep track of progress and learnings as you go. only create new skills when confirmed by the user.\",\n messages: msgs,\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/* ──────────────────────────── useAnthropicStream ─────────────────────────── */\n\nexport default function useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = React.useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = 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\", // explicit so it works with CORS pre‑flights\n defaultHeaders: {\n \"anthropic-version\": \"2023-06-01\",\n // Allow calling the API directly from the browser – you accept the risk!\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 }, []);\n\n /* Main send/stream function – identical public contract */\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 body = buildBody(config, history, userText);\n\n // Build request‑scoped headers (MCP, etc.)\n const extraHeaders: Record = {};\n if ((body as any).mcp_servers?.length) {\n extraHeaders[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n }\n\n // Local abort controller so user can cancel mid‑stream\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n let stream: AsyncIterable;\n try {\n // NOTE: The SDK automatically handles SSE parsing for us.\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 setStatus(\"streaming\");\n\n /* streaming state (same as before) */\n const blocks: Record = {};\n\n /* finish latch */\n let finalMsg: AssistantMsg | null = null;\n\n try {\n for await (const ev of stream) {\n console.log(ev);\n // Type narrowing via ev.type (runtime string)\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.index !== undefined && blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n }\n break;\n\n case \"message_stop\":\n finalMsg = assembleMessage(blocks);\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 setLiveBlocks(preview);\n }\n }\n } catch (err) {\n console.error(\"Error during streaming\", err);\n throw err;\n } finally {\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n }\n\n if (!finalMsg) throw new Error(\"Stream ended unexpectedly\");\n return finalMsg;\n },\n [anthropic, config, status],\n );\n\n return { status, liveBlocks, send, abort } as const;\n}",[],[84,189,204],"15b4432e-41a5-11f0-97a8-76b3cceeab13","components","873eb2ac-b0cb-4a58-bcf3-f4ac2142158f",["D",1749083773738],[216,217,218,219,220,221,222],[84,211],{"_36":265,"_13":266,"_65":267,"_67":212,"_69":70,"_71":72,"_73":74,"_38":268,"_17":90,"_77":78,"_79":269,"_81":51,"_82":-5,"_119":270,"_18":271},{"_36":258,"_13":259,"_65":260,"_67":212,"_69":70,"_71":72,"_73":74,"_38":261,"_17":76,"_77":78,"_79":262,"_81":51,"_82":-5,"_119":263,"_18":264},{"_36":251,"_13":252,"_65":253,"_67":212,"_69":70,"_71":72,"_73":74,"_38":254,"_17":76,"_77":78,"_79":255,"_81":51,"_82":-5,"_119":256,"_18":257},{"_36":244,"_13":245,"_65":246,"_67":212,"_69":70,"_71":72,"_73":74,"_38":247,"_17":76,"_77":78,"_79":248,"_81":51,"_82":-5,"_119":249,"_18":250},{"_36":237,"_13":238,"_65":239,"_67":212,"_69":70,"_71":72,"_73":74,"_38":240,"_17":90,"_77":78,"_79":241,"_81":51,"_82":-5,"_119":242,"_18":243},{"_36":230,"_13":231,"_65":232,"_67":212,"_69":70,"_71":72,"_73":74,"_38":233,"_17":90,"_77":78,"_79":234,"_81":51,"_82":-5,"_119":235,"_18":236},{"_36":223,"_13":224,"_65":225,"_67":212,"_69":70,"_71":72,"_73":74,"_38":226,"_17":90,"_77":78,"_79":227,"_81":51,"_82":-5,"_119":228,"_18":229},"cda54390-45fe-11f0-bcbd-76b3cceeab13","StreamingChat.tsx","833c30bb-b03d-47da-bd02-81e553f2d627",["D",1749562112245],"/** @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 useAnthropicStream from \"../hooks/useAnthropicStream.tsx\";\nimport { AnthropicStreamEvent, MCPPrompt } from \"../shared/types.ts\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\n\nimport { AppConfig, Message } from \"./App.tsx\";\nimport CommandPalette from \"./CommandPalette.tsx\";\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n mcpClients: MCPClient[];\n onAddMessage: (m: Omit) => void;\n onUpdateLastMessage: (content: string) => 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\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}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\n const [showCommandPalette, setShowCommandPalette] = useState(false);\n const [commandPalettePosition, setCommandPalettePosition] = useState({ bottom: \"0\", left: \"0\" });\n const textareaRef = useRef(null);\n const messagesEndRef = useRef(null);\n const [showMcpStatus, setShowMcpStatus] = useState(false);\n\n const { status, liveBlocks, send, abort } = useAnthropicStream(config);\n\n const thinking = status === \"thinking\";\n const streaming = status === \"streaming\";\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 (last.role === \"assistant\" && last.content[last.content.length - 1].type === \"mcp_tool_use\") {\n console.warn(\"Trailing mcp_tool_use block. Requires cleanup!\");\n last.content.push({\n tool_use_id: last.content[last.content.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(last.content);\n }\n if (\n last.role === \"assistant\"\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 last.content[last.content.length - 1] = {\n tool_use_id: last.content[last.content.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(last.content);\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 (textareaRef.current) {\n const rect = textareaRef.current.getBoundingClientRect();\n setCommandPalettePosition({\n bottom: `${rect.height + 60}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 // Replace the current input with the result\n console.log(\"[Chat] Execute command\", result);\n setInput(result);\n localStorage.setItem(chatInputCacheKey, result);\n\n // Focus back to textarea\n if (textareaRef.current) {\n textareaRef.current.focus();\n // Position cursor at the end\n setTimeout(() => {\n if (textareaRef.current) {\n textareaRef.current.setSelectionRange(result.length, result.length);\n }\n }, 0);\n }\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 assistant = await send(\n [...messages.slice(0, messages.findIndex(m => m.id === messageId) + 1)],\n userText,\n );\n onAddMessage(assistant);\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 () => {\n if (!input.trim() || status !== \"idle\" || !config.anthropicApiKey) return;\n\n const userText = input.trim();\n setInput(\"\");\n localStorage.setItem(chatInputCacheKey, \"\");\n onAddMessage({ role: \"user\", content: userText });\n\n try {\n const assistant = await send(\n [...messages],\n userText,\n );\n onAddMessage(assistant);\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 if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n if (streaming) {\n stopStreaming();\n } else {\n fireSend();\n }\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 />\n ))}\n\n {/* live streaming preview */}\n {streaming && liveBlocks && (\n \n )}\n\n {!streaming && !thinking && !messages.length && !liveBlocks && (\n

\n Claude Chat
with MCP\n

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

\n )}\n\n {thinking && (\n

\n Thinking\n

\n )}\n\n {streaming && (\n

\n Processing\n

\n )}\n

\n\n {/* Enhanced Command Palette */}\n setShowCommandPalette(false)}\n onExecute={handleCommandExecute}\n position={commandPalettePosition}\n visible={showCommandPalette}\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 ? \"Press Enter to stop streaming…\"\n : \"Type your message or / for commands…\"\n : \"Configure API key in settings first\"}\n className=\"chat-input\"\n disabled={!config.anthropicApiKey || thinking}\n rows={1}\n />\n \n {streaming ? : }\n \n

\n\n

\n \n Clear all\n \n\n setShowMcpStatus(!showMcpStatus)}>\n Claude Chat • {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}\n\n/* Additional CSS for enhanced features */\nconst additionalStyles = `\n.placeholder-tips {\n margin-top: 20px;\n font-size: 14px;\n color: #666;\n}\n\n.placeholder-tips code {\n background: #f0f0f0;\n padding: 2px 6px;\n border-radius: 3px;\n font-family: monospace;\n}\n`;",[],[84,211,224],"cda53a6c-45fe-11f0-bcbd-76b3cceeab13","Settings.tsx","c6c0aeb1-e907-4974-9650-85a90c9b48e2",["D",1749562112245],"/** @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 } 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 [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 });\n onClose();\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 {/* 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}",[],[84,211,231],"cda532ba-45fe-11f0-bcbd-76b3cceeab13","Message.tsx","d48db81c-c575-4982-af56-60ed26d50c75",["D",1749562112245],"/** @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 { Message } from \"./App.tsx\";\nimport HTMLRenderer from \"./HTMLRenderer.tsx\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\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}\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\n/* ───────────────────────────────────────────────────────────────────────────── */\n\nexport default function MessageComponent({ message, onDelete, onRetry, canRetry, mcpClients = [] }: MessageProps) {\n const formatRegularContent = (content: string) =>

;\n\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 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 const renderAnthropicBlocks = (blocks: AnthropicBlock[]) => (\n

\n {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 if (typeof res.output?.html === \"string\") {\n return (\n \n );\n }\n } catch (err) {\n console.warn(\"Failed to parse MCP tool result payload\", err, { blk });\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\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\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 {formatTimestamp(message.timestamp)}\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}",[],[84,211,238],"cda4f714-45fe-11f0-bcbd-76b3cceeab13","MCPStatus.tsx","cda4f796-45fe-11f0-bcbd-76b3cceeab13",["D",1749562112245],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPClient } from \"../utils/MCPClient.ts\"; // Import the MCP client we created\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 onServerUpdate?: (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 client?: MCPClient;\n}\n\nexport default function MCPStatus({ servers, onServerUpdate, show, className = \"\" }: MCPStatusProps) {\n const [serverStatuses, setServerStatuses] = useState>({});\n const [isInitializing, setIsInitializing] = useState(true);\n const [showDetails, setShowDetails] = useState(false);\n const clientsRef = useRef>(new Map());\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 // Cleanup clients on unmount\n useEffect(() => {\n return () => {\n clientsRef.current.forEach(client => {\n client.disconnect();\n });\n clientsRef.current.clear();\n };\n }, []);\n\n // Test a single server using MCP client\n const testServer = async (server: MCPServerConfig): Promise => {\n if (!server.url) {\n return { success: false, error: \"No URL configured\" };\n }\n\n // Clean up existing client if any\n const existingClient = clientsRef.current.get(server.id);\n if (existingClient) {\n existingClient.disconnect();\n clientsRef.current.delete(server.id);\n }\n\n try {\n // Determine transport type based on URL\n let transportConfig: any;\n if (server.url.startsWith(\"ws://\") || server.url.startsWith(\"wss://\")) {\n transportConfig = {\n type: \"websocket\",\n endpoint: server.url,\n };\n } else if (server.url.includes(\",\")) {\n // Assume SSE format: \"httpUrl,sseUrl\"\n transportConfig = {\n type: \"sse\",\n endpoint: server.url,\n headers: server.authorization_token\n ? {\n \"Authorization\": `Bearer ${server.authorization_token}`,\n }\n : {},\n };\n } else {\n // Default to HTTP\n transportConfig = {\n type: \"http\",\n endpoint: server.url,\n headers: server.authorization_token\n ? {\n \"Authorization\": `Bearer ${server.authorization_token}`,\n }\n : {},\n };\n }\n\n const client = new MCPClient(transportConfig, {\n name: `MCPStatus-${server.name}`,\n version: \"1.0.0\",\n });\n\n // Set up error handler\n client.on(\"error\", (error: Error) => {\n console.error(`[MCP Status] Error from server ${server.id}:`, error);\n });\n\n // Connect and initialize\n await client.connect();\n clientsRef.current.set(server.id, client);\n\n return { success: true };\n } catch (error) {\n console.error(`[MCP Status] Failed to connect to ${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 a server\n const fetchPrompts = async (server: MCPServerConfig): Promise => {\n const client = clientsRef.current.get(server.id);\n if (!client || !client.isInitialized()) {\n return [];\n }\n\n try {\n const prompts = await client.listPrompts();\n return prompts.map(prompt => ({\n serverId: server.id,\n ...prompt,\n }));\n } catch (error) {\n console.error(`[MCP Status] Failed to fetch prompts from ${server.name}:`, error);\n return [];\n }\n };\n\n // Fetch tools from a server\n const fetchTools = async (server: MCPServerConfig): Promise => {\n const client = clientsRef.current.get(server.id);\n console.log(\"[MCP Status] Fetching tools from\", server.name, client?.isInitialized(), client);\n if (!client || !client.isInitialized()) {\n return [];\n }\n\n try {\n const tools = await client.listTools();\n return tools.map(tool => ({\n serverId: server.id,\n ...tool,\n }));\n } catch (error) {\n console.error(`[MCP Status] Failed to fetch tools from ${server.name}:`, error);\n return [];\n }\n };\n\n // Auto-check enabled servers on startup\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...`);\n\n try {\n // Test all enabled servers in parallel\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 const testResult = { status: \"mocked\" };\n const prompts = [];\n const tools = [];\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 }, results);\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]);\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 // Add server info if available\n const client = clientsRef.current.get(status.server.id);\n if (client && client.server) {\n return `Online (${client.server.name} v${client.server.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\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\"\n : `${onlineServers.length}/${enabledServers.length} servers online • ${totalPrompts} prompts • ${totalTools} tools`}\n \n {showDetails ? \"▼\" : \"▶\"}\n
\n\n {showDetails && (\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 const client = clientsRef.current.get(server.id);\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 {client && (\n <>\n
\n Transport:\n \n {server.url?.startsWith(\"ws\")\n ? \"WebSocket\"\n : server.url?.includes(\",\")\n ? \"SSE + HTTP\"\n : \"HTTP\"}\n \n
\n {client.serverCapabilities && (\n
\n Capabilities:\n \n {Object.entries(client.serverCapabilities)\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}\n\n// CSS styles for the component (add to your stylesheet)\nconst styles = `\n.mcp-status {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-size: 14px;\n color: #333;\n}\n\n.mcp-status-summary {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: #f5f5f5;\n border-radius: 6px;\n cursor: pointer;\n user-select: none;\n}\n\n.mcp-status-summary:hover {\n background: #e8e8e8;\n}\n\n.status-icon {\n font-size: 16px;\n}\n\n.status-text {\n flex: 1;\n}\n\n.expand-icon {\n font-size: 12px;\n opacity: 0.6;\n}\n\n.mcp-status-details {\n margin-top: 8px;\n padding: 12px;\n background: #f9f9f9;\n border-radius: 6px;\n}\n\n.mcp-server-status {\n margin-bottom: 12px;\n background: white;\n border-radius: 6px;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n.mcp-server-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px;\n cursor: pointer;\n user-select: none;\n}\n\n.mcp-server-header:hover {\n background: #f5f5f5;\n}\n\n.server-icon {\n font-size: 16px;\n}\n\n.server-name {\n font-weight: 500;\n flex: 0 0 auto;\n}\n\n.server-status {\n flex: 1;\n font-size: 13px;\n color: #666;\n}\n\n.server-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.refresh-button {\n padding: 4px 8px;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 14px;\n opacity: 0.6;\n transition: opacity 0.2s;\n}\n\n.refresh-button:hover:not(:disabled) {\n opacity: 1;\n}\n\n.refresh-button:disabled {\n cursor: not-allowed;\n opacity: 0.3;\n}\n\n.mcp-server-details {\n padding: 12px;\n border-top: 1px solid #e0e0e0;\n}\n\n.server-info {\n margin-bottom: 12px;\n}\n\n.info-row {\n display: flex;\n gap: 8px;\n margin-bottom: 4px;\n font-size: 13px;\n}\n\n.info-label {\n font-weight: 500;\n opacity: 0.7;\n flex: 0 0 100px;\n}\n\n.info-value {\n color: #666;\n}\n\n.server-prompts,\n.server-tools {\n margin-top: 16px;\n}\n\n.server-prompts h4,\n.server-tools h4 {\n font-size: 14px;\n font-weight: 500;\n margin-bottom: 8px;\n}\n\n.prompts-list,\n.tools-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.prompt-item,\n.tool-item {\n padding: 8px;\n background: #f5f5f5;\n border-radius: 4px;\n}\n\n.prompt-name,\n.tool-name {\n font-weight: 500;\n font-family: monospace;\n font-size: 13px;\n}\n\n.prompt-description,\n.tool-description {\n display: block;\n font-size: 12px;\n color: #666;\n margin-top: 4px;\n}\n\n.prompt-args {\n display: flex;\n gap: 8px;\n margin-top: 4px;\n}\n\n.prompt-arg {\n font-family: monospace;\n font-size: 12px;\n color: #0066cc;\n}\n\n.tool-schema {\n margin-top: 8px;\n}\n\n.tool-schema summary {\n font-size: 12px;\n cursor: pointer;\n user-select: none;\n opacity: 0.7;\n}\n\n.schema-json {\n margin-top: 4px;\n padding: 8px;\n background: #f0f0f0;\n border-radius: 4px;\n font-size: 11px;\n overflow-x: auto;\n}\n\n.server-error {\n margin-top: 12px;\n padding: 8px;\n background: #ffebee;\n color: #c62828;\n border-radius: 4px;\n font-size: 13px;\n}\n\n.mcp-status-empty {\n text-align: center;\n color: #666;\n padding: 20px;\n}\n`;",[],[84,211,245],"cda4e6de-45fe-11f0-bcbd-76b3cceeab13","HTMLRenderer.tsx","cda4e760-45fe-11f0-bcbd-76b3cceeab13",["D",1749562112245],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState, useCallback } 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\n // Create MCP context API that will be exposed to iframe\n const createMCPContext = useCallback((): MCPContextAPI => {\n const findClientByName = (serverName: string) => {\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 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\n if (container.requestFullscreen) {\n container.requestFullscreen();\n } else if ((container as any).webkitRequestFullscreen) {\n (container as any).webkitRequestFullscreen();\n } else if ((container as any).msRequestFullscreen) {\n (container as any).msRequestFullscreen();\n }\n }, []);\n\n const exitFullscreen = useCallback(() => {\n if (document.exitFullscreen) {\n document.exitFullscreen();\n } else if ((document as any).webkitExitFullscreen) {\n (document as any).webkitExitFullscreen();\n } else if ((document as any).msExitFullscreen) {\n (document as any).msExitFullscreen();\n }\n }, []);\n\n // Handle fullscreen change events\n useEffect(() => {\n const handleFullscreenChange = () => {\n const isCurrentlyFullscreen = !!(\n document.fullscreenElement ||\n (document as any).webkitFullscreenElement ||\n (document as any).msFullscreenElement\n );\n setIsFullscreen(isCurrentlyFullscreen);\n };\n\n document.addEventListener('fullscreenchange', handleFullscreenChange);\n document.addEventListener('webkitfullscreenchange', handleFullscreenChange);\n document.addEventListener('msfullscreenchange', handleFullscreenChange);\n\n return () => {\n document.removeEventListener('fullscreenchange', handleFullscreenChange);\n document.removeEventListener('webkitfullscreenchange', handleFullscreenChange);\n document.removeEventListener('msfullscreenchange', handleFullscreenChange);\n };\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]);\n\n // Create iframe content with injected MCP context\n const createIframeContent = useCallback(() => {\n const contextScript = `\n \n `;\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]);\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}",[],[84,211,252],"cda4d004-45fe-11f0-bcbd-76b3cceeab13","EnhancedCommandPalette.tsx","cda4d0d6-45fe-11f0-bcbd-76b3cceeab13",["D",1749562112245],"/** @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\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 MCPServerConfig {\n id: string;\n name: string;\n url?: string;\n enabled: boolean;\n authorization_token?: string;\n}\n\ntype CommandType = \"prompt\" | \"tool\";\n\ninterface Command {\n type: CommandType;\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n data: MCPPrompt | MCPTool;\n}\n\ninterface CommandPaletteProps {\n servers: MCPServerConfig[];\n query: string;\n onClose: () => void;\n onExecute: (result: string) => void;\n position: { bottom: string; left: string };\n visible: boolean;\n mcpClients: MCPClient[];\n}\n\ninterface ArgumentValue {\n [key: string]: string;\n}\n\nexport default function EnhancedCommandPalette({\n servers,\n query,\n onClose,\n onExecute,\n position,\n visible,\n mcpClients,\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 clientsRef = useRef>(new Map());\n const argumentInputRefs = useRef>(new Map());\n\n // Initialize MCP clients and fetch prompts/tools\n useEffect(() => {\n const initializeClients = async () => {\n console.log(`[CMD] Initializing MCP clients...`, servers);\n if (!visible) return;\n\n setLoading(true);\n setError(null);\n\n const newCommands: Command[] = [];\n\n for (const client of mcpClients) {\n let server = {\n name: \"Unkown\",\n id: \"unknown\",\n };\n try {\n console.log(\"[CMD] MCP Client\", client);\n server.name = client.serverInfo.name;\n server.id = client.serverInfo.name;\n\n if (!client || !client.isInitialized()) {\n console.warn(`[CMD] Failed to get initialize client `, { client });\n return;\n }\n\n // Fetch prompts and tools\n const [prompts, tools] = await Promise.all([\n client.listPrompts().catch(() => {\n console.warn(`Failed to fetch prompts for ${server.name}`);\n return [];\n }),\n client.listTools().catch(() => {\n console.warn(`Failed to fetch tools for ${server.name}`);\n return [];\n }),\n ]);\n\n clientsRef.current.set(server.id, client);\n\n console.log({ tools, prompts });\n\n // Add prompts as commands\n prompts.forEach(prompt => {\n newCommands.push({\n type: \"prompt\",\n serverId: server.id,\n serverName: server.name,\n name: prompt.name,\n description: prompt.description,\n data: { ...prompt, serverId: server.id, serverName: server.name },\n });\n });\n\n // Add tools as commands\n tools.forEach(tool => {\n newCommands.push({\n type: \"tool\",\n serverId: server.id,\n serverName: server.name,\n name: tool.name,\n description: tool.description,\n data: { ...tool, serverId: server.id, serverName: server.name },\n });\n });\n } catch (error) {\n console.error(`Failed to initialize client for ${server.name}:`, error);\n }\n }\n\n setCommands(newCommands);\n setLoading(false);\n };\n\n initializeClients();\n }, [servers, visible, mcpClients]);\n\n // Clean up clients on unmount\n useEffect(() => {\n return () => {\n clientsRef.current.forEach(client => client.disconnect());\n clientsRef.current.clear();\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\";\n const promptMatch = commandPart.startsWith(\"prompt:\") && command.type === \"prompt\";\n\n return nameMatch || descMatch || typeMatch || promptMatch;\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 } 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(\"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 setSelectedCommand(command);\n setShowArgumentDialog(true);\n setArgumentValues({});\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 setArgumentValues({});\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 }\n };\n\n // Execute a prompt\n const executePrompt = async (command: Command, args: ArgumentValue) => {\n const client = clientsRef.current.get(command.serverId);\n if (!client) {\n setError(\"Server not connected\");\n return;\n }\n\n try {\n setLoading(true);\n const result = await client.getPrompt(command.name, args);\n console.log(\"[CMD] Prompt result:\", result);\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 tool\n const executeTool = async (command: Command, args: ArgumentValue) => {\n const client = clientsRef.current.get(command.serverId);\n if (!client) {\n setError(\"Server not connected\");\n return;\n }\n\n try {\n setLoading(true);\n const result = await client.callTool(command.name, args);\n\n // Format tool result as a message\n const formattedResult = `Tool: ${command.name}\\nResult: ${JSON.stringify(result, null, 2)}`;\n onExecute(formattedResult);\n onClose();\n } catch (error) {\n console.error(\"Failed to execute tool:\", error);\n setError(error instanceof Error ? error.message : \"Failed to execute tool\");\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 {\n await executeTool(selectedCommand, argumentValues);\n }\n\n setShowArgumentDialog(false);\n setSelectedCommand(null);\n setArgumentValues({});\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 {!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.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

\n ))}\n

\n\n {/* Argument Dialog */}\n {showArgumentDialog && selectedCommand && (\n setShowArgumentDialog(false)}\n >\n e.stopPropagation()}\n style={{\n position: \"absolute\",\n bottom: position.bottom,\n left: position.left,\n right: \"1em\",\n maxWidth: \"500px\",\n }}\n >\n
\n
\n {selectedCommand.type === \"prompt\"\n ? \n : } {selectedCommand.name}\n
\n setShowArgumentDialog(false)}\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 type=\"text\"\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 onKeyDown={(e) => {\n if (\n e.key === \"Enter\" && 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 index,\n arr,\n ) => (\n
\n \n {key}\n {(selectedCommand.data as MCPTool).inputSchema.required?.includes(key) && \"*\"}\n {schema.description && - {schema.description}}\n \n {\n if (el) argumentInputRefs.current.set(key, el);\n }}\n type={schema.type === \"number\" ? \"number\" : \"text\"}\n value={argumentValues[key] || \"\"}\n onChange={(e) =>\n setArgumentValues(prev => ({\n ...prev,\n [key]: e.target.value,\n }))}\n placeholder={`Enter ${key}...`}\n required={(selectedCommand.data as MCPTool).inputSchema.required?.includes(key)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && index === arr.length - 1) {\n e.preventDefault();\n handleArgumentSubmit();\n }\n }}\n />\n
\n ))}\n
\n )}\n
\n\n
\n setShowArgumentDialog(false)}\n >\n Cancel\n \n \n {loading ? \"Executing...\" : \"Execute\"}\n \n
\n

\n )}\n \n );\n}",[],[84,211,259],"cda52dec-45fe-11f0-bcbd-76b3cceeab13","App.tsx","e94fa3c1-1a87-4d5b-b3c8-f7860e945ade",["D",1749562112245],"/** @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\nexport interface Message {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: number;\n}\n\nexport interface AppConfig {\n anthropicApiKey: string;\n mcpServers: MCPServerConfig[];\n selectedModel: string;\n}\n\nconst DEFAULT_MCP_SERVERS: MCPServerConfig[] = [\n {\n id: \"contextual-mcp\",\n name: \"Contextual\",\n url: \"https://c15r--1564b217248f4a97a4d37bfe82cb8b19.web.val.run/mcp\",\n authorization_token: \"\",\n enabled: true,\n },\n];\n\nexport default function App() {\n const [config, setConfig] = useState({\n anthropicApiKey: \"\",\n mcpServers: [],\n selectedModel: \"claude-3-5-sonnet-20241022\",\n });\n const [showSettings, setShowSettings] = useState(false);\n const [messages, setMessages] = useState([]);\n\n // Initialize MCP clients based on server configurations\n const { connectedClients, getClientStates, connectedCount } = useMCPClients(config.mcpServers);\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\n setConfig({\n anthropicApiKey: savedApiKey || \"\",\n mcpServers: savedMcpServers ? JSON.parse(savedMcpServers) : DEFAULT_MCP_SERVERS,\n selectedModel: savedModel || \"claude-3-5-sonnet-20241022\",\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\", JSON.stringify(config.mcpServers));\n localStorage.setItem(\"selected_model\", config.selectedModel);\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) => {\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 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 onUpdateMCPServer: updateMCPServer,\n },\n }}\n />\n {showSettings && (\n setShowSettings(false)}\n />\n )}\n
\n );\n}",[],[84,211,266],"15b412aa-41a5-11f0-97a8-76b3cceeab13","backend","f71c4d04-c86d-4950-a1dc-27ff9f16ece4",["D",1749083773738],[278],[273],{"_36":279,"_13":280,"_65":281,"_67":274,"_69":70,"_71":90,"_73":74,"_38":282,"_17":76,"_77":283,"_79":284,"_81":51,"_82":-5,"_119":285,"_18":286},"15b408c8-41a5-11f0-97a8-76b3cceeab13","index.ts","dc6576a3-9a59-4cd6-b401-edc7e50a560f",["D",1749083773738],"http","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;",[],[273,280],"15aeb5e4-41a5-11f0-97a8-76b3cceeab13",["D",1749083773738],"legacyEnvVars","httpPrivacy","description","imageUrl","userId","910c5de7-d7ef-46a2-9233-a36b504c0356","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","3d0667b8-98c5-4e4b-9dab-f0c5e3bd2418","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_330":326},"org",{"_11":12,"_324":-5,"_325":326,"_293":294,"_327":328,"_329":51},"branch",{"_17":72,"_13":16,"_36":70,"_42":287,"_45":37,"_46":320,"_321":53,"_322":43,"_323":57,"_58":14,"_54":12},583,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ycU91M051U0JoMFZtclVEaFY2MDNCUmlFbTYifQ","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":287,"_13":14,"_38":449,"_49":-5,"_289":51,"_52":53,"_290":53,"_291":-5,"_292":-5,"_293":294,"_295":281,"_296":74,"_297":74,"_298":-5,"_299":76,"_56":300,"_301":-5,"_302":-5,"_303":-5,"_304":-5,"_305":306,"_307":306,"_308":309,"_310":309,"_311":309,"_312":306,"_313":306,"_314":450,"_316":451,"_318":452,"_50":51},[374,376,396,398],"files",[374,375,376,377,378,379,380,381,382,383,384,385,386,387,388,389,390,391,392,393,394,395,396,397,398],"counts",{"_365":76,"_366":90,"_367":76,"_35":368,"_369":370},[357,358,359,360],{"_36":105,"_13":85,"_65":68,"_67":106,"_69":70,"_71":90,"_73":74,"_38":107,"_17":76,"_77":108,"_79":-5,"_81":51,"_82":-5,"_18":356},"upstreamProject",{"_36":43,"_13":14,"_291":-5,"_292":-5,"_52":53,"_314":354},"upstreamBranch",{"_36":37,"_38":352,"_40":353,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":55,"_56":57,"_58":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1748557815516],["D",1752275433429],{"_11":55,"_330":355},"https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb2RJNlc1czZ1NlpZRmoxdGJ2eFVNNVhmeTYifQ",[84,85],{"_36":99,"_13":100,"_65":101,"_67":68,"_69":70,"_71":72,"_73":74,"_38":102,"_17":76,"_77":78,"_79":103,"_81":51,"_82":-5,"_18":364},{"_36":93,"_13":94,"_65":95,"_67":68,"_69":70,"_71":72,"_73":74,"_38":96,"_17":90,"_77":78,"_79":97,"_81":51,"_82":-5,"_18":363},{"_36":86,"_13":87,"_65":88,"_67":68,"_69":70,"_71":72,"_73":74,"_38":89,"_17":90,"_77":78,"_79":91,"_81":51,"_82":-5,"_18":362},{"_36":63,"_13":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_38":75,"_17":76,"_77":78,"_79":80,"_81":51,"_82":-5,"_18":361},[84,85,64],[84,85,87],[84,85,94],[84,85,100],"pulls","branches","forks",{"_371":76,"_373":76},"connections",{"_371":76,"_372":76},"count","unfilledCount","emptyCount",{"_36":272,"_13":273,"_65":274,"_67":-5,"_69":70,"_71":90,"_73":74,"_38":275,"_17":76,"_77":108,"_79":-5,"_81":51,"_82":-5,"_119":447,"_18":448},{"_36":279,"_13":280,"_65":281,"_67":274,"_69":70,"_71":90,"_73":74,"_38":282,"_17":76,"_77":283,"_79":284,"_81":51,"_82":-5,"_119":445,"_18":446},{"_36":136,"_13":84,"_65":106,"_67":-5,"_69":70,"_71":90,"_73":74,"_38":137,"_17":76,"_77":108,"_79":-5,"_81":51,"_82":-5,"_119":443,"_18":444},{"_36":210,"_13":211,"_65":212,"_67":106,"_69":70,"_71":90,"_73":74,"_38":213,"_17":76,"_77":108,"_79":-5,"_81":51,"_82":-5,"_119":441,"_18":442},{"_36":265,"_13":266,"_65":267,"_67":212,"_69":70,"_71":72,"_73":74,"_38":268,"_17":90,"_77":78,"_79":269,"_81":51,"_82":-5,"_119":439,"_18":440},{"_36":258,"_13":259,"_65":260,"_67":212,"_69":70,"_71":72,"_73":74,"_38":261,"_17":76,"_77":78,"_79":262,"_81":51,"_82":-5,"_119":437,"_18":438},{"_36":251,"_13":252,"_65":253,"_67":212,"_69":70,"_71":72,"_73":74,"_38":254,"_17":76,"_77":78,"_79":255,"_81":51,"_82":-5,"_119":435,"_18":436},{"_36":244,"_13":245,"_65":246,"_67":212,"_69":70,"_71":72,"_73":74,"_38":247,"_17":76,"_77":78,"_79":248,"_81":51,"_82":-5,"_119":433,"_18":434},{"_36":237,"_13":238,"_65":239,"_67":212,"_69":70,"_71":72,"_73":74,"_38":240,"_17":90,"_77":78,"_79":241,"_81":51,"_82":-5,"_119":431,"_18":432},{"_36":230,"_13":231,"_65":232,"_67":212,"_69":70,"_71":72,"_73":74,"_38":233,"_17":90,"_77":78,"_79":234,"_81":51,"_82":-5,"_119":429,"_18":430},{"_36":223,"_13":224,"_65":225,"_67":212,"_69":70,"_71":72,"_73":74,"_38":226,"_17":90,"_77":78,"_79":227,"_81":51,"_82":-5,"_119":427,"_18":428},{"_36":188,"_13":189,"_65":190,"_67":106,"_69":70,"_71":90,"_73":74,"_38":191,"_17":76,"_77":108,"_79":-5,"_81":51,"_82":-5,"_119":425,"_18":426},{"_36":203,"_13":204,"_65":205,"_67":190,"_69":70,"_71":72,"_73":74,"_38":206,"_17":90,"_77":78,"_79":207,"_81":51,"_82":-5,"_119":423,"_18":424},{"_36":196,"_13":197,"_65":198,"_67":190,"_69":70,"_71":72,"_73":74,"_38":199,"_17":76,"_77":78,"_79":200,"_81":51,"_82":-5,"_119":421,"_18":422},{"_36":105,"_13":85,"_65":68,"_67":106,"_69":70,"_71":90,"_73":74,"_38":169,"_17":76,"_77":108,"_79":-5,"_81":51,"_82":-5,"_119":419,"_18":420},{"_36":99,"_13":100,"_65":101,"_67":68,"_69":70,"_71":72,"_73":74,"_38":185,"_17":76,"_77":78,"_79":103,"_81":51,"_82":-5,"_119":417,"_18":418},{"_36":93,"_13":94,"_65":95,"_67":68,"_69":70,"_71":72,"_73":74,"_38":182,"_17":90,"_77":78,"_79":97,"_81":51,"_82":-5,"_119":415,"_18":416},{"_36":86,"_13":87,"_65":88,"_67":68,"_69":70,"_71":72,"_73":74,"_38":179,"_17":90,"_77":78,"_79":91,"_81":51,"_82":-5,"_119":413,"_18":414},{"_36":63,"_13":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_38":176,"_17":76,"_77":78,"_79":80,"_81":51,"_82":-5,"_119":411,"_18":412},{"_36":162,"_13":163,"_65":164,"_67":106,"_69":70,"_71":90,"_73":74,"_38":165,"_17":76,"_77":24,"_79":166,"_81":51,"_82":-5,"_119":409,"_18":410},{"_36":153,"_13":154,"_65":155,"_67":106,"_69":70,"_71":156,"_73":74,"_38":157,"_17":158,"_77":78,"_79":159,"_81":51,"_82":-5,"_119":407,"_18":408},{"_36":146,"_13":147,"_65":148,"_67":106,"_69":70,"_71":72,"_73":74,"_38":149,"_17":90,"_77":24,"_79":150,"_81":51,"_82":-5,"_119":405,"_18":406},{"_36":122,"_13":123,"_65":124,"_67":-5,"_69":70,"_71":90,"_73":74,"_38":125,"_17":76,"_77":108,"_79":-5,"_81":51,"_82":-5,"_119":403,"_18":404},{"_36":129,"_13":130,"_65":131,"_67":124,"_69":70,"_71":72,"_73":74,"_38":132,"_17":90,"_77":78,"_79":133,"_81":51,"_82":-5,"_119":401,"_18":402},{"_36":114,"_13":115,"_65":116,"_67":-5,"_69":70,"_71":72,"_73":74,"_38":117,"_17":90,"_77":24,"_79":118,"_81":51,"_82":-5,"_119":399,"_18":400},[],[115],[],[123,130],[397],[123],[],[84,147],[],[84,154],[],[84,163],[],[84,85,64],[],[84,85,87],[],[84,85,94],[],[84,85,100],[389,390,391,392],[84,85],[],[84,189,197],[],[84,189,204],[386,387],[84,189],[],[84,211,224],[],[84,211,231],[],[84,211,238],[],[84,211,245],[],[84,211,252],[],[84,211,259],[],[84,211,266],[378,379,380,381,382,383,384],[84,211],[377,385,388,393,394,395],[84],[],[273,280],[375],[273],["D",1749083773738],{"_11":12,"_330":326},{"_11":12,"_324":-5,"_325":326,"_293":294,"_327":328,"_329":51},{"_17":72,"_13":16,"_36":70,"_42":287,"_45":37,"_46":320,"_321":53,"_322":43,"_323":57,"_58":14,"_54":12},"ctx",{"_314":-5,"_349":486,"_487":488,"_489":490,"_491":51,"_492":51,"_493":51,"_494":74,"_495":-5,"_496":-7,"_497":-7,"_498":76,"_499":51,"_500":51,"_501":-5,"_502":51,"_503":51,"_504":51,"_505":-5},"ENV",{"_457":458,"_459":460,"_461":16,"_462":463,"_464":465,"_466":467,"_468":469,"_470":471,"_472":473,"_474":475,"_476":477,"_478":479,"_480":481,"_482":483,"_484":485},"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"]