Anthropic Chat with MCP

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_387":388,"_389":390},"routes/_app.x.$handle.$name",{"_97":96,"_32":46,"_105":87,"_27":106,"_13":14,"_107":-5,"_11":108,"_109":110,"_111":112,"_113":114,"_115":116,"_20":-5,"_117":-5,"_118":-5,"_119":25,"_120":121,"_122":59,"_123":-5,"_124":-5,"_125":126},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":80,"_81":82,"_83":84,"_85":25},"version",692,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","shared/types.ts","latestPath","fileId","d0d80e16-3d49-11f0-afd9-76b3cceeab13","name","types.ts","fileType","script","content","// Shared types for Anthropic streaming integration\n\nexport interface StreamEvent {\n event: string;\n data: string;\n}\n\nexport interface MessageStartEvent {\n type: \"message_start\";\n message: {\n id: string;\n type: \"message\";\n role: \"assistant\";\n content: any[];\n model: string;\n stop_reason: null;\n stop_sequence: null;\n usage: {\n input_tokens: number;\n output_tokens: number;\n };\n };\n}\n\nexport interface ContentBlockStartEvent {\n type: \"content_block_start\";\n index: number;\n content_block: {\n type: \"text\" | \"tool_use\";\n id?: string;\n name?: string;\n input?: any;\n text?: string;\n };\n}\n\nexport interface ContentBlockDeltaEvent {\n type: \"content_block_delta\";\n index: number;\n delta: {\n type: \"text_delta\" | \"input_json_delta\" | \"thinking_delta\" | \"signature_delta\";\n text?: string;\n partial_json?: string;\n thinking?: string;\n signature?: string;\n };\n}\n\nexport interface ContentBlockStopEvent {\n type: \"content_block_stop\";\n index: number;\n}\n\nexport interface MessageDeltaEvent {\n type: \"message_delta\";\n delta: {\n stop_reason?: string;\n stop_sequence?: string;\n };\n usage: {\n output_tokens: number;\n };\n}\n\nexport interface MessageStopEvent {\n type: \"message_stop\";\n}\n\nexport interface PingEvent {\n type: \"ping\";\n}\n\nexport interface ErrorEvent {\n type: \"error\";\n error: {\n type: string;\n message: string;\n };\n}\n\nexport type AnthropicStreamEvent = \n | MessageStartEvent\n | ContentBlockStartEvent\n | ContentBlockDeltaEvent\n | ContentBlockStopEvent\n | MessageDeltaEvent\n | MessageStopEvent\n | PingEvent\n | ErrorEvent;\n\nexport interface ChatMessage {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: number;\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 MCPTool {\n name: string;\n description?: string;\n serverName: string;\n serverId: string;\n inputSchema?: any;\n}\n\nexport interface MCPServerConfig {\n id: string;\n name: string;\n url: string;\n authorization_token?: string;\n enabled: boolean;\n}\n\nexport interface StreamingChatRequest {\n messages: Array<{ role: string; content: string }>;\n model: string;\n max_tokens: number;\n anthropic_api_key: string;\n mcp_servers?: Array<{\n type: string;\n url: string;\n name: string;\n authorization_token?: string;\n }>;\n stream?: boolean;\n thinking?: {\n type: \"enabled\";\n budget_tokens: number;\n };\n tools?: Array<{\n name: string;\n description: string;\n input_schema: any;\n }>;\n}","// Shared types for Anthropic streaming integration\n\nexport interface StreamEvent {\n event: string;\n data: string;\n}\n\nexport interface MessageStartEvent {\n type: \"message_start\";\n message: {\n id: string;\n type: \"message\";\n role: \"assistant\";\n content: any[];\n model: string;\n stop_reason: null;\n stop_sequence: null;\n usage: {\n input_tokens: number;\n output_tokens: number;\n };\n };\n}\n\nexport interface ContentBlockStartEvent {\n type: \"content_block_start\";\n index: number;\n content_block: {\n type: \"text\" | \"tool_use\";\n id?: string;\n name?: string;\n input?: any;\n text?: string;\n };\n}\n\nexport interface ContentBlockDeltaEvent {\n type: \"content_block_delta\";\n index: number;\n delta: {\n type: \"text_delta\" | \"input_json_delta\" | \"thinking_delta\" | \"signature_delta\";\n text?: string;\n partial_json?: string;\n thinking?: string;\n signature?: string;\n };\n}\n\nexport interface ContentBlockStopEvent {\n type: \"content_block_stop\";\n index: number;\n}\n\nexport interface MessageDeltaEvent {\n type: \"message_delta\";\n delta: {\n stop_reason?: string;\n stop_sequence?: string;\n };\n usage: {\n output_tokens: number;\n };\n}\n\nexport interface MessageStopEvent {\n type: \"message_stop\";\n}\n\nexport interface PingEvent {\n type: \"ping\";\n}\n\nexport interface ErrorEvent {\n type: \"error\";\n error: {\n type: string;\n message: string;\n };\n}\n\nexport type AnthropicStreamEvent = \n | MessageStartEvent\n | ContentBlockStartEvent\n | ContentBlockDeltaEvent\n | ContentBlockStopEvent\n | MessageDeltaEvent\n | MessageStopEvent\n | PingEvent\n | ErrorEvent;\n\nexport interface ChatMessage {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: number;\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 MCPTool {\n name: string;\n description?: string;\n serverName: string;\n serverId: string;\n inputSchema?: any;\n}\n\nexport interface MCPServerConfig {\n id: string;\n name: string;\n url: string;\n authorization_token?: string;\n enabled: boolean;\n}\n\nexport interface StreamingChatRequest {\n messages: Array<{ role: string; content: string }>;\n model: string;\n max_tokens: number;\n anthropic_api_key: string;\n mcp_servers?: Array<{\n type: string;\n url: string;\n name: string;\n authorization_token?: string;\n }>;\n stream?: boolean;\n thinking?: {\n type: \"enabled\";\n budget_tokens: number;\n };\n tools?: Array<{\n name: string;\n description: string;\n input_schema: any;\n }>;\n}\n\n// NextSteps types for MCP tool result format\nexport interface NextStepProposal {\n id: string;\n title: string;\n description?: string;\n action: {\n type: \"send_message\";\n content: string;\n };\n}\n\nexport interface NextStepsOutput {\n nextSteps: {\n type: \"auto\" | \"manual\";\n priority?: number; // 0-100, higher = more priority\n countdown?: number; // seconds for auto execution\n proposals: NextStepProposal[];\n };\n}","createdAt",["D",1750112471064],"branchVersion","branchId","7e246fe2-3cdc-11f0-aa89-9e149126039e","id","7e24160a-3cdc-11f0-aa89-9e149126039e","Chat",["D",1748557815516],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","21f2e37e-8066-4730-9dc7-d27cf8d3c9f3","pinnedFileId","7471cb24-3cdd-11f0-8caa-9e149126039e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","0630d977-f678-453e-926c-52043293f59f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_97":96,"_104":100},"org",{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},"branch",{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"isOwned",1417,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","c15r","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb2RJNlc1czZ1NlpZRmoxdGJ2eFVNNVhmeTYifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":383,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":59,"_61":-5,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":-5,"_69":-5,"_70":71,"_72":71,"_73":74,"_75":74,"_76":74,"_77":71,"_78":71,"_79":384,"_81":385,"_83":386,"_85":25},"tree",[173,175,195,197],"files",[173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197],"counts",{"_162":63,"_163":164,"_165":164,"_166":167,"_168":169},"contents",[128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_57":127},"chat.parc.land",{"_44":156,"_32":157,"_30":158,"_135":-5,"_42":43,"_41":159,"_137":59,"_39":160,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_27":161},{"_44":150,"_32":151,"_30":152,"_135":-5,"_42":43,"_41":153,"_137":59,"_39":154,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_27":155},{"_44":143,"_32":144,"_30":145,"_135":-5,"_42":43,"_41":146,"_137":59,"_39":147,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_27":149},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":25,"_39":138,"_13":139,"_34":20,"_36":140,"_24":25,"_141":-5,"_27":142},"3eb5e7a8-4a44-11f0-8bf2-76b3cceeab13","README.md","2bc4d286-3cdd-11f0-9e50-9e149126039e","parentId",672,"latest",["D",1750031741870],32,"# Anthropic Streaming Chat with MCP\n\nA mobile-optimized single page chat application that uses the Anthropic Messages API with **real-time streaming** and MCP (Model Context Protocol) server support.\n\nSource: https://www.val.town/x/c15r/Chat \n\nLive server: https://c15r--7471cb243cdd11f08caa9e149126039e.web.val.run\n\nBundles Contextual MCP server by default: https://c15r--1564b217248f4a97a4d37bfe82cb8b19.web.val.run/mcp\n\n\n\n## Features\n\n- **🚀 Real-time streaming responses** - See Claude's responses appear word-by-word as they're generated\n- **⏹️ Stream control** - Stop streaming at any time with the stop button\n- Full-screen mobile-optimized chat interface\n- Direct client-side Anthropic API integration with server-side streaming proxy\n- **Model selection** - Choose between different Claude models (3.5 Sonnet, 3.5 Haiku, 3 Opus, etc.) without clearing chat history\n- Configurable MCP servers with localStorage persistence\n- **🔍 Automatic MCP Server Status Checking** - Servers are automatically tested at startup with progressive disclosure of status, tools, prompts, and error details\n- **📊 MCP Status Dashboard** - Expandable status panel showing server connectivity, available prompts, available tools, and error details\n- **Clean footer layout** with text-based settings and clear chat links positioned alongside status text\n- **Enhanced MCP response handling** with collapsible sections for complex tool use and results\n- **Command palette tool execution** - MCP tool results from command palette are displayed as user messages with the same MCP tool use/result structure as assistant messages\n- **Persistent chat history** - messages are saved to localStorage and restored on page load\n- **Structured display of MCP tool calls and results** to prevent truncation\n- **Frontend MCP server testing** - test button for each MCP server with visual status indicators (✅/❌)\n- **Frontend MCP prompt fetching** - prompts are fetched directly from MCP servers with caching support\n- **Frontend MCP tool fetching** - tools are fetched directly from MCP servers with caching support\n\n## Streaming Implementation\n\nThis app implements Anthropic's official streaming guide using:\n- Server-Sent Events (SSE) for real-time communication\n- Proper event parsing (`message_start`, `content_block_delta`, `message_stop`, etc.)\n- Content block reassembly for text, tool use, and thinking responses\n- Error handling and keep-alive support\n- Token usage tracking\n- Support for all delta types (text, JSON, thinking)\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server with static file serving\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React app entry point\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── StreamingChat.tsx # Real-time streaming chat interface\n│ │ ├── Settings.tsx # Settings flyout\n│ │ ├── MCPStatus.tsx # MCP server status dashboard with progressive disclosure\n│ │ ├── CommandPalette.tsx # MCP prompt command palette\n│ │ └── Message.tsx # Individual message component\n│ ├── hooks/\n│ │ └── useAnthropicStream.tsx # Streaming chat hook\n│ ├── utils/\n│ │ ├── mcpTesting.ts # Frontend MCP server testing\n│ │ └── mcpPrompts.ts # Frontend MCP prompt fetching\n│ └── style.css # Custom styles with streaming animations\n├── shared/\n│ └── types.ts # Shared TypeScript types for streaming\n└── README.md\n```\n\n## Configuration\n\nThe app stores configuration and chat history in localStorage:\n- `anthropic_api_key`: Your Anthropic API key\n- `selected_model`: The chosen Claude model (defaults to claude-3-5-sonnet-20241022)\n- `mcp_servers`: Array of configured MCP servers\n- `chat_messages`: Complete chat history (persists between page loads)\n\n## API Endpoints\n\n- `GET /` - Main application (serves frontend)\n- `GET /frontend/*` - Frontend static files\n- `GET /shared/*` - Shared utility files\n\n**Note**: MCP server testing and prompt fetching are now handled directly on the frontend for improved performance and reduced server load.\n\n## Usage\n\n1. Open the app at the provided URL\n2. Click \"Settings\" in the footer to configure your Anthropic API key and select your preferred Claude model\n3. Add/remove/toggle MCP servers as needed\n4. Use the \"Test\" button next to each MCP server to verify connectivity (shows ✅ for success, ❌ for errors)\n5. Start chatting with Claude and watch responses stream in real-time!\n6. Use the stop button (⏹️) to interrupt streaming at any time\n6. Switch models anytime in settings without losing your chat history\n7. Your chat history and settings will be automatically saved and restored when you return\n\n## Default MCP Server\n\nThe app comes pre-configured with the Val Town MCP server:\n- **Name**: Val Town MCP\n- **URL**: `https://c15r--81c497c63c0a11f081e29e149126039e.web.val.run/mcp`\n- **Status**: Enabled by default (you'll need to add your authorization token)\n\n## Features in Detail\n\n- **Mobile-First Design**: Optimized for mobile devices with touch-friendly controls\n- **Real-time Streaming**: Watch Claude's responses appear word-by-word as they're generated\n- **Stream Control**: Stop streaming responses at any time with the stop button\n- **MCP Integration**: Support for multiple Model Context Protocol servers\n- **Enhanced MCP Display**: Collapsible sections for tool calls and results with proper JSON formatting\n- **Unobtrusive Footer Controls**: Settings (⚙️) and clear chat (🗑️) buttons positioned in the footer alongside the input\n- **Persistent Chat History**: All messages automatically saved to localStorage and restored on page load\n- **Persistent Settings**: All configuration stored in browser localStorage\n- **Auto-scroll**: Messages automatically scroll to bottom during streaming\n- **Auto-resize**: Input field grows with content\n- **Error Handling**: Clear error messages for API issues with stream recovery\n- **Loading States**: Visual feedback during API calls and streaming\n- **Structured Responses**: MCP tool use and results are displayed in organized, collapsible sections\n- **Clean Interface**: Maximized chat area with no header, footer contains all controls\n- **Streaming Animations**: Visual cursor and highlighting for active streaming responses","label",[133],"d0d818ac-3d49-11f0-afd9-76b3cceeab13","shared","d2bf992b-f210-4f83-bea3-aec8e3e2caaa",55,["D",1748604769414],"directory",[144],"2f3fab3e-3cdd-11f0-acd6-9e149126039e","frontend","43895adc-f88f-4b64-90b5-2b707f50c067",2,["D",1748558112658],[151],"7471d038-3cdd-11f0-8caa-9e149126039e","backend","b0b9068e-33c0-4fad-8bcf-5a3136836657",9,["D",1748558228747],[157],"pulls","branches",1,"forks","envVars",{"_170":63,"_172":63},"connections",{"_170":63,"_171":63},"count","unfilledCount","emptyCount",{"_44":156,"_32":157,"_30":158,"_135":-5,"_42":43,"_41":159,"_137":59,"_39":380,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_199":381,"_27":382},{"_44":371,"_32":372,"_30":57,"_135":158,"_42":43,"_41":373,"_137":59,"_39":374,"_13":375,"_34":376,"_36":377,"_24":25,"_141":-5,"_199":378,"_27":379},{"_44":150,"_32":151,"_30":152,"_135":-5,"_42":43,"_41":153,"_137":59,"_39":368,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_199":369,"_27":370},{"_44":363,"_32":309,"_30":302,"_135":152,"_42":43,"_41":364,"_137":59,"_39":365,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_199":366,"_27":367},{"_44":354,"_32":355,"_30":356,"_135":302,"_42":43,"_41":357,"_137":25,"_39":358,"_13":359,"_34":35,"_36":360,"_24":25,"_141":-5,"_199":361,"_27":362},{"_44":345,"_32":346,"_30":347,"_135":302,"_42":43,"_41":348,"_137":25,"_39":349,"_13":350,"_34":35,"_36":351,"_24":25,"_141":-5,"_199":352,"_27":353},{"_44":336,"_32":337,"_30":338,"_135":302,"_42":43,"_41":339,"_137":25,"_39":340,"_13":341,"_34":35,"_36":342,"_24":25,"_141":-5,"_199":343,"_27":344},{"_44":327,"_32":328,"_30":329,"_135":302,"_42":43,"_41":330,"_137":25,"_39":331,"_13":332,"_34":35,"_36":333,"_24":25,"_141":-5,"_199":334,"_27":335},{"_44":318,"_32":319,"_30":320,"_135":302,"_42":43,"_41":321,"_137":25,"_39":322,"_13":323,"_34":35,"_36":324,"_24":25,"_141":-5,"_199":325,"_27":326},{"_44":310,"_32":311,"_30":312,"_135":302,"_42":43,"_41":313,"_137":25,"_39":314,"_13":139,"_34":35,"_36":315,"_24":25,"_141":-5,"_199":316,"_27":317},{"_44":299,"_32":300,"_30":301,"_135":302,"_42":43,"_41":303,"_137":25,"_39":304,"_13":305,"_34":35,"_36":306,"_24":25,"_141":-5,"_199":307,"_27":308},{"_44":294,"_32":284,"_30":278,"_135":152,"_42":43,"_41":295,"_137":59,"_39":296,"_13":153,"_34":148,"_36":-5,"_24":25,"_141":-5,"_199":297,"_27":298},{"_44":285,"_32":286,"_30":287,"_135":278,"_42":43,"_41":288,"_137":25,"_39":289,"_13":290,"_34":35,"_36":291,"_24":25,"_141":-5,"_199":292,"_27":293},{"_44":275,"_32":276,"_30":277,"_135":278,"_42":43,"_41":279,"_137":25,"_39":280,"_13":153,"_34":35,"_36":281,"_24":25,"_141":-5,"_199":282,"_27":283},{"_44":270,"_32":244,"_30":238,"_135":152,"_42":43,"_41":271,"_137":59,"_39":272,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_199":273,"_27":274},{"_44":261,"_32":262,"_30":263,"_135":238,"_42":43,"_41":264,"_137":25,"_39":265,"_13":266,"_34":35,"_36":267,"_24":25,"_141":-5,"_199":268,"_27":269},{"_44":253,"_32":254,"_30":255,"_135":238,"_42":43,"_41":256,"_137":25,"_39":257,"_13":231,"_34":35,"_36":258,"_24":25,"_141":-5,"_199":259,"_27":260},{"_44":245,"_32":246,"_30":247,"_135":238,"_42":43,"_41":248,"_137":25,"_39":249,"_13":221,"_34":35,"_36":250,"_24":25,"_141":-5,"_199":251,"_27":252},{"_44":235,"_32":236,"_30":237,"_135":238,"_42":43,"_41":239,"_137":25,"_39":240,"_13":63,"_34":35,"_36":241,"_24":25,"_141":-5,"_199":242,"_27":243},{"_44":226,"_32":227,"_30":228,"_135":152,"_42":43,"_41":229,"_137":25,"_39":230,"_13":231,"_34":20,"_36":232,"_24":25,"_141":-5,"_199":233,"_27":234},{"_44":218,"_32":219,"_30":220,"_135":152,"_42":43,"_41":221,"_137":25,"_39":222,"_13":63,"_34":35,"_36":223,"_24":25,"_141":-5,"_199":224,"_27":225},{"_44":209,"_32":210,"_30":211,"_135":152,"_42":43,"_41":212,"_137":25,"_39":213,"_13":214,"_34":20,"_36":215,"_24":25,"_141":-5,"_199":216,"_27":217},{"_44":143,"_32":144,"_30":145,"_135":-5,"_42":43,"_41":146,"_137":59,"_39":206,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_199":207,"_27":208},{"_44":202,"_32":33,"_30":31,"_135":145,"_42":43,"_41":14,"_137":25,"_39":203,"_13":159,"_34":35,"_36":38,"_24":25,"_141":-5,"_199":204,"_27":205},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":25,"_39":198,"_13":139,"_34":20,"_36":140,"_24":25,"_141":-5,"_199":200,"_27":201},["D",1750031741870],"children",[],[133],"350f3e9a-4b00-11f0-a7bf-76b3cceeab13",["D",1750112471064],[],[144,33],["D",1748604769414],[196],[144],"16ad250c-4a3d-11f0-99c5-76b3cceeab13","style.css","42e137de-3cdd-11f0-898f-9e149126039e",649,["D",1750028668213],140,"* {\n box-sizing: border-box;\n}\n\n/* Custom styles for mobile optimization */\n\n.chat-container {\n min-height: 100svh;\n display: flex;\n flex-direction: column;\n background: #edf8ff;\n}\n\n.chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 1em;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n padding-bottom: 10em;\n max-width: 70em;\n}\n\n.empty-messages-placeholder {\n pointer-events: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n font-family: serif;\n font-size: 2em;\n opacity: 0.1;\n color: black;\n}\n\n.message-wrapper {\n margin-bottom: 1em;\n position: relative;\n justify-items: start;\n max-width: 90%;\n}\n\n.message-wrapper.user {\n justify-items: end;\n margin-left: auto;\n}\n\n.message {\n word-wrap: break-word;\n display: inline-flex;\n flex-direction: column;\n}\n\n.message-meta {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n transition: opacity 0.2s ease;\n font-size: 0.6875em;\n color: #0000004a;\n font-weight: 400;\n gap: 0.6em;\n align-items: baseline;\n flex-direction: row-reverse;\n padding: 0.5em;\n}\n\n.message-wrapper.user .message-meta {\n justify-content: flex-end;\n flex-direction: row;\n}\n\n.message-action-btn {\n background: none;\n border: none;\n color: #0000004a;\n cursor: pointer;\n font-size: 1em;\n padding: 0 0.3em;\n}\n\n.message-action-btn:hover {\n background: rgba(0, 0, 0, 0.05);\n color: #6b7280;\n}\n\n.retry-btn:hover {\n color: #3b82f6;\n background: rgba(59, 130, 246, 0.1);\n}\n\n.delete-btn:hover {\n color: #ef4444;\n background: rgba(239, 68, 68, 0.1);\n}\n\n.message .anthropic-text-block > div > *:first-child {\n margin-top: 0;\n}\n\n.message .anthropic-text-block > div > *:last-child {\n margin-bottom: 0;\n}\n\n.message.user {\n background: #3b82f6;\n color: white;\n padding: 0.75rem 1em;\n border-radius: 1rem 1rem 0.1rem 1em;\n}\n\n.message.assistant {\n background: white;\n padding: 0.75rem 1em;\n border-radius: 1rem 1rem 1rem 0.1em;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.message.system {\n background: #fef3c7;\n border: 1px solid #f59e0b;\n padding: 0.5rem 0.75em;\n border-radius: 0.5em;\n font-size: 0.875em;\n margin: 0 auto;\n max-width: 90%;\n text-align: center;\n}\n\n.message pre {\n display: block;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.375em;\n padding: 0.75em;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.75em;\n line-height: 1.4;\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-word;\n color: #374151;\n margin: 0;\n}\n\n.chat-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: white;\n border-top: 1px solid #e2e8f0;\n box-shadow:\n 0 -10px 25px -5px rgba(0, 0, 0, 0.1),\n 0 -10px 10px -5px rgba(0, 0, 0, 0.04);\n border-radius: 2rem 2rem 0 0;\n max-width: 81em;\n margin: 0 auto;\n}\n\n.chat-input-container {\n padding: 1em;\n display: flex;\n gap: 0.5em;\n align-items: flex-end;\n}\n\n.chat-input {\n flex: 1;\n min-height: 2.5em;\n max-height: 6em;\n padding: 0.75em;\n border: 0 none;\n border-radius: 0.5em;\n resize: none;\n font-family: inherit;\n font-size: 1em;\n outline: none;\n transition: border-color 0.2s;\n}\n\n.footer-controls {\n display: flex;\n gap: 0.25em;\n align-items: flex-end;\n}\n\n.footer-button {\n background: none;\n border: none;\n color: #6b7280;\n cursor: pointer;\n padding: 0.5em;\n border-radius: 0.5em;\n transition: all 0.2s;\n font-size: 1em;\n width: 2.5em;\n height: 2.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.footer-button:hover {\n background: #f3f4f6;\n color: #374151;\n}\n\n.chat-status {\n padding: 0.5rem 1em;\n background: #f8fafc;\n border-top: 1px solid #f1f5f9;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.status-text {\n font-size: 0.75em;\n color: #6b7280;\n flex: 1;\n text-align: center;\n}\n\n.status-link-button {\n background: none;\n border: none;\n color: #3b82f6;\n cursor: pointer;\n font-size: 0.75em;\n padding: 0.25rem 0.5em;\n border-radius: 0.25em;\n transition: all 0.2s;\n text-decoration: none;\n}\n\n.status-link-button:hover {\n background: #f3f4f6;\n color: #2563eb;\n}\n\n.chat-status .fa-circle-check {\n color: #1dd31d;\n}\n\n.chat-input:focus {\n xborder-color: #3b82f6;\n xbox-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.send-button {\n background: #3b82f6;\n color: white;\n border: none;\n border-radius: 50%;\n width: 2.5em;\n height: 2.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: background-color 0.2s;\n flex-shrink: 0;\n font-size: 1em;\n position: absolute;\n right: 1em;\n}\n\n.send-button:hover:not(:disabled) {\n background: #2563eb;\n}\n\n.send-button:disabled {\n background: #9ca3af;\n cursor: not-allowed;\n}\n\n.send-button.stop-button {\n background: #ef4444;\n}\n\n.send-button.stop-button:hover:not(:disabled) {\n background: #dc2626;\n}\n\n/* Streaming message styles */\n.message.streaming {\n background: white;\n border: 1px solid #e2e8f0;\n padding: 0.75rem 1em;\n border-radius: 1rem 1rem 1rem 0.25em;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n border-left: 3px solid #3b82f6;\n}\n\n.streaming-cursor {\n display: inline-block;\n background: #3b82f6;\n color: #3b82f6;\n animation: streaming-blink 1s infinite;\n margin-left: 2px;\n}\n\n@keyframes streaming-blink {\n 0%, 50% {\n opacity: 1;\n }\n 51%, 100% {\n opacity: 0;\n }\n}\n\n.settings-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 50;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1em;\n}\n\n.settings-panel {\n background: white;\n border-radius: 1em;\n padding: 1.5em;\n width: 100%;\n max-width: 28em;\n max-height: 80vh;\n overflow-y: auto;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n}\n\n.settings-header {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n\n.settings-footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n margin-top: 1em;\n gap: 0.5em;\n}\n\n.close-button {\n background: none;\n border: none;\n font-size: 1.5em;\n cursor: pointer;\n color: #6b7280;\n padding: 0.25em;\n border-radius: 0.25em;\n}\n\n.close-button:hover {\n background: #f3f4f6;\n}\n\n.form-group {\n margin-bottom: 1.5em;\n}\n\n.form-label {\n display: block;\n font-weight: 600;\n margin-bottom: 0.5em;\n color: #374151;\n}\n\n.form-input {\n width: 100%;\n padding: 0.75em;\n border: 1px solid #d1d5db;\n border-radius: 0.5em;\n font-size: 1em;\n transition: border-color 0.2s;\n margin-bottom: 0.4em;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.mcp-servers-list {\n display: flex;\n flex-direction: column;\n gap: 0.4em;\n}\n.mcp-server {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.5em;\n padding: 0.6em;\n}\n\n.mcp-server-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.75em;\n}\n\n.mcp-server-name {\n font-weight: 600;\n color: #374151;\n}\n\n.mcp-server-actions {\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n gap: 0.3em;\n}\n\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 3em;\n height: 1.5em;\n font-size: 0.7em;\n}\n\n.toggle-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: 0.4s;\n border-radius: 1.5em;\n}\n\n.toggle-slider:before {\n position: absolute;\n content: \"\";\n height: 1.125em;\n width: 1.125em;\n left: 0.1875em;\n bottom: 0.1875em;\n background-color: white;\n transition: 0.4s;\n border-radius: 50%;\n}\n\ninput:checked + .toggle-slider {\n background-color: #3b82f6;\n}\n\ninput:checked + .toggle-slider:before {\n transform: translateX(1.5em);\n}\n\n.button {\n padding: 0.75em 1.5em;\n border: none;\n border-radius: 0.5em;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 0.875em;\n}\n\n.button-primary {\n background: #3b82f6;\n color: white;\n}\n\n.button-primary:hover {\n background: #2563eb;\n}\n\n.button-secondary {\n background: #f3f4f6;\n color: #374151;\n border: 1px solid #d1d5db;\n}\n\n.button-secondary:hover {\n background: #e5e7eb;\n}\n\n.button-danger {\n background: #ef4444;\n color: white;\n}\n\n.button-danger:hover {\n background: #dc2626;\n}\n\n.btn-small {\n font-size: 0.6em;\n padding: 0.3em 0.5em;\n}\n\n.loading-indicator {\n display: flex;\n align-items: center;\n gap: 0.5em;\n color: #6b7280;\n font-size: 0.875em;\n padding: 0.5rem 1em;\n}\n\n.loading-dots {\n display: flex;\n gap: 0.25em;\n}\n\n.loading-dot {\n width: 0.375em;\n height: 0.375em;\n background: #6b7280;\n border-radius: 50%;\n animation: loading-bounce 1.4s ease-in-out infinite both;\n}\n\n.loading-dot:nth-child(1) {\n animation-delay: -0.32s;\n}\n.loading-dot:nth-child(2) {\n animation-delay: -0.16s;\n}\n\n@keyframes loading-bounce {\n 0%, 80%, 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n .chat-input-container {\n padding: 0.75em;\n }\n\n .chat-status {\n padding: 0.375rem 0.75em;\n }\n\n .status-text {\n font-size: 0.6875em;\n }\n\n .status-link-button {\n font-size: 0.6875em;\n padding: 0.125rem 0.25em;\n }\n\n .settings-overlay {\n padding: 0.5em;\n }\n\n .settings-panel {\n padding: 1em;\n border-radius: 0.75em;\n }\n\n .message-wrapper {\n max-width: 100%;\n }\n}\n\n/* Prevent zoom on input focus on iOS */\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n .chat-input,\n .form-input {\n font-size: 16px;\n }\n}\n\n/* MCP MINIMAL */\n\n.mcp-details {\n margin-top: 0.5em;\n}\n\n.mcp-details + .mcp-details {\n margin-top: 0;\n margin-bottom: 0.5em;\n}\n\n.mcp-details > summary {\n font-style: italic;\n color: rgba(0, 0, 0, 0.2);\n font-family: serif;\n cursor: pointer;\n}\n.mcp-details pre {\n position: relative;\n}\n\n.mcp-details pre > .copy {\n position: absolute;\n top: 0.2em;\n right: 0.2em;\n display: flex;\n\n border-radius: 3px;\n border: 1px solid #00000021;\n background-color: white;\n cursor: pointer;\n padding: 0.3em;\n color: #0000005c;\n}\n\n.mcp-details pre > .copy:hover {\n color: #666;\n}\n\n.test-button {\n background: #f3f4f6;\n border: 1px solid #d1d5db;\n border-radius: 0.375em;\n padding: 0.375rem 0.75em;\n font-size: 0.75em;\n cursor: pointer;\n transition: all 0.2s;\n min-width: 2.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.test-button:hover:not(:disabled) {\n background: #e5e7eb;\n border-color: #9ca3af;\n}\n\n.test-button:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.loading-shimmer,\n.loading-shimmer-pure-text {\n --shimmer-contrast: #ffffffbf;\n --text-secondary: #5d5d5d;\n text-fill-color: transparent;\n -webkit-text-fill-color: transparent;\n animation-delay: 0.5s;\n animation-duration: 3s;\n animation-iteration-count: infinite;\n animation-name: loading-shimmer;\n background: var(--text-secondary)\n linear-gradient(\n to right,\n var(--text-secondary)0,\n var(--shimmer-contrast)40%,\n var(--shimmer-contrast)60%,\n var(--text-secondary)100%\n );\n background: var(--text-secondary)\n -webkit-gradient(\n linear,\n 100% 0,\n 0 0,\n from(var(--text-secondary)),\n color-stop(0.4, var(--shimmer-contrast)),\n color-stop(0.6, var(--shimmer-contrast)),\n to(var(--text-secondary))\n );\n -webkit-background-clip: text;\n background-clip: text;\n background-repeat: no-repeat;\n background-size: 50% 200%;\n display: inline-block;\n}\n@keyframes loading-shimmer {\n 0% {\n background-position: -100% 0;\n }\n to {\n background-position: 250% 0;\n }\n}\n\nsummary {\n outline: none;\n}\n\nsummary::-webkit-details-marker,\nsummary::marker {\n content: \"\\f121\";\n font-family: \"FontAwesome\";\n font-size: 0.8em;\n font-style: normal;\n}\n\n/* MCP Status Component Styles */\n.mcp-status {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.5em;\n margin: 0.3em;\n overflow: auto;\n max-height: 50vh;\n}\n\n.mcp-status.initializing {\n border-color: #fbbf24;\n background: #fef3c7;\n}\n\n.mcp-status-summary {\n padding: 0.75em 1em;\n display: flex;\n align-items: center;\n gap: 0.5em;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.mcp-status-summary:hover {\n background: rgba(0, 0, 0, 0.02);\n}\n\n.mcp-status-summary .status-icon {\n font-size: 1.1em;\n min-width: 1.5em;\n}\n\n.mcp-status-summary .status-text {\n flex: 1;\n font-size: 0.875em;\n color: #374151;\n font-weight: 500;\n}\n\n.mcp-status-summary .expand-icon {\n font-size: 0.75em;\n color: #6b7280;\n transition: transform 0.2s;\n}\n\n.mcp-status-details {\n border-top: 1px solid #e2e8f0;\n background: white;\n}\n\n.mcp-status-empty {\n padding: 1em;\n text-align: center;\n color: #6b7280;\n font-style: italic;\n}\n\n.mcp-server-status {\n border-bottom: 1px solid #f1f5f9;\n}\n\n.mcp-server-status:last-child {\n border-bottom: none;\n}\n\n.mcp-server-header {\n padding: 0.75em 1em;\n display: flex;\n align-items: center;\n gap: 0.5em;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.mcp-server-header:hover {\n background: #f8fafc;\n}\n\n.mcp-server-header .server-icon {\n font-size: 1em;\n min-width: 1.5em;\n}\n\n.mcp-server-header .server-name {\n font-weight: 600;\n color: #374151;\n flex: 1;\n}\n\n.mcp-server-header .server-status {\n font-size: 0.75em;\n color: #6b7280;\n margin-right: 0.5em;\n}\n\n.mcp-server-header .server-actions {\n display: flex;\n align-items: center;\n gap: 0.25em;\n}\n\n.mcp-server-header .refresh-button {\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.25em;\n border-radius: 0.25em;\n transition: background-color 0.2s;\n font-size: 0.875em;\n}\n\n.mcp-server-header .refresh-button:hover:not(:disabled) {\n background: rgba(0, 0, 0, 0.05);\n}\n\n.mcp-server-header .refresh-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mcp-server-header .expand-icon {\n font-size: 0.75em;\n color: #6b7280;\n transition: transform 0.2s;\n}\n\n.mcp-server-details {\n padding: 0 1em 1em 1em;\n background: #fafbfc;\n}\n\n.server-info {\n margin-bottom: 1em;\n}\n\n.info-row {\n display: flex;\n margin-bottom: 0.5em;\n font-size: 0.75em;\n}\n\n.info-label {\n font-weight: 600;\n color: #374151;\n min-width: 5em;\n}\n\n.info-value {\n color: #6b7280;\n word-break: break-all;\n}\n\n.server-prompts h4 {\n font-size: 0.875em;\n font-weight: 600;\n color: #374151;\n margin: 0 0 0.5em 0;\n}\n\n.prompts-list {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n.prompt-item {\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 0.375em;\n padding: 0.5em;\n}\n\n.prompt-name {\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.75em;\n font-weight: 600;\n color: #3b82f6;\n}\n\n.prompt-description {\n display: block;\n font-size: 0.6875em;\n color: #6b7280;\n margin-top: 0.25em;\n line-height: 1.3;\n}\n\n.prompt-args {\n margin-top: 0.375em;\n display: flex;\n gap: 0.25em;\n flex-wrap: wrap;\n}\n\n.prompt-arg {\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.625em;\n background: #f3f4f6;\n color: #6b7280;\n padding: 0.125em 0.25em;\n border-radius: 0.25em;\n border: 1px solid #e2e8f0;\n}\n\n.server-tools h4 {\n font-size: 0.875em;\n font-weight: 600;\n color: #374151;\n margin: 1em 0 0.5em 0;\n}\n\n.tools-list {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n.tool-item {\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 0.375em;\n padding: 0.5em;\n}\n\n.tool-name {\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.75em;\n font-weight: 600;\n color: #059669;\n}\n\n.tool-description {\n display: block;\n font-size: 0.6875em;\n color: #6b7280;\n margin-top: 0.25em;\n line-height: 1.3;\n}\n\n.tool-schema {\n margin-top: 0.375em;\n}\n\n.tool-schema details {\n font-size: 0.6875em;\n}\n\n.tool-schema summary {\n color: #6b7280;\n cursor: pointer;\n font-weight: 500;\n margin-bottom: 0.25em;\n}\n\n.tool-schema .schema-json {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.25em;\n padding: 0.5em;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n color: #374151;\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-word;\n margin: 0;\n}\n\n.server-error {\n background: #fef2f2;\n border: 1px solid #fecaca;\n border-radius: 0.375em;\n padding: 0.5em;\n font-size: 0.75em;\n color: #dc2626;\n margin-top: 0.5em;\n}\n\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\n/* Mobile optimizations for MCP Status */\n@media (max-width: 640px) {\n .mcp-status-summary {\n padding: 0.5em 0.75em;\n }\n\n .mcp-server-header {\n padding: 0.5em 0.75em;\n }\n\n .mcp-server-details {\n padding: 0 0.75em 0.75em 0.75em;\n }\n\n .info-row {\n flex-direction: column;\n gap: 0.125em;\n }\n\n .info-label {\n min-width: auto;\n font-size: 0.6875em;\n }\n\n .info-value {\n font-size: 0.6875em;\n }\n}\n\n.command-palette {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n width: 100%;\n z-index: 0;\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n max-height: 400px;\n overflow-y: auto;\n box-shadow:\n 0 -10px 25px -5px rgba(0, 0, 0, 0.1),\n 0 -10px 10px -5px rgba(0, 0, 0, 0.04);\n border-radius: 2rem 2rem 0 0;\n padding-bottom: 6em;\n background-color: #f4f4f4;\n}\n\n.command-palette-loading,\n.command-palette-error {\n padding: 12px 16px;\n font-size: 14px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.command-palette-error {\n color: #d32f2f;\n}\n\n.loading-spinner {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.command-palette-item {\n padding: 10px 16px;\n cursor: pointer;\n border-bottom: 1px solid #dedddd;\n transition: background-color 0.1s;\n}\n\n.command-palette-item:last-child {\n border-bottom: none;\n}\n\n.command-palette-item:hover,\n.command-palette-item.selected {\n background-color: #d9d9d9;\n}\n\n.command-palette-item-main {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.command-palette-type-icon {\n font-size: 16px;\n flex-shrink: 0;\n}\n\n.command-palette-name {\n font-family: monospace;\n font-weight: 500;\n color: #1976d2;\n flex-shrink: 0;\n}\n\n.command-palette-server {\n font-size: 12px;\n color: #666;\n margin-left: auto;\n background: #e8e8e8;\n padding: 2px 8px;\n border-radius: 12px;\n}\n\n.command-palette-description {\n font-size: 13px;\n color: #666;\n margin-top: 4px;\n margin-left: 24px;\n}\n\n.command-palette-args {\n font-size: 12px;\n color: #999;\n margin-top: 4px;\n margin-left: 24px;\n font-family: monospace;\n}\n\n/* Argument Dialog Styles */\n.command-palette-dialog-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.3);\n z-index: 1001;\n}\n\n.command-palette-dialog {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);\n z-index: 1002;\n}\n\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.dialog-header h3 {\n margin: 0;\n font-size: 18px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.dialog-close {\n background: none;\n border: none;\n font-size: 20px;\n cursor: pointer;\n color: #666;\n padding: 4px 8px;\n border-radius: 4px;\n transition: background-color 0.2s;\n}\n\n.dialog-close:hover {\n background-color: #f0f0f0;\n}\n\n.dialog-content {\n padding: 16px;\n}\n\n.dialog-description {\n margin: 0 0 16px 0;\n color: #666;\n font-size: 14px;\n}\n\n.dialog-arguments {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.argument-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.argument-field label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.argument-description {\n font-weight: normal;\n color: #666;\n font-size: 13px;\n}\n\n.argument-field input {\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 14px;\n transition: border-color 0.2s;\n}\n\n.argument-field input:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.dialog-footer {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n padding: 16px;\n border-top: 1px solid #e0e0e0;\n}\n\n.dialog-button {\n padding: 8px 16px;\n border: none;\n border-radius: 4px;\n font-size: 14px;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.dialog-button-cancel {\n background: #f0f0f0;\n color: #666;\n}\n\n.dialog-button-cancel:hover {\n background: #e0e0e0;\n}\n\n.dialog-button-submit {\n background: #1976d2;\n color: white;\n}\n\n.dialog-button-submit:hover:not(:disabled) {\n background: #1565c0;\n}\n\n.dialog-button-submit:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Enhanced JSON Schema Input Styles */\n.argument-field textarea,\n.argument-field input,\n.argument-field select {\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 14px;\n transition: border-color 0.2s;\n font-family: inherit;\n}\n\n.argument-field textarea:focus,\n.argument-field input:focus,\n.argument-field select:focus {\n outline: none;\n border-color: #1976d2;\n box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);\n}\n\n.argument-field select {\n cursor: pointer;\n background-color: white;\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n background-position: right 8px center;\n background-repeat: no-repeat;\n background-size: 16px 12px;\n padding-right: 32px;\n}\n\n.checkbox-label {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n padding: 8px 0;\n}\n\n.checkbox-label input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n margin: 0;\n cursor: pointer;\n}\n\n.checkbox-text {\n font-size: 14px;\n color: #666;\n user-select: none;\n}\n\n.argument-type {\n font-weight: normal;\n color: #999;\n font-size: 12px;\n font-style: italic;\n}\n\n/* Validation styling (non-intrusive) */\n.argument-field input:invalid,\n.argument-field textarea:invalid,\n.argument-field select:invalid {\n border-color: #fbbf24;\n background-color: #fefbf3;\n}\n\n.argument-field input[type=\"number\"] {\n text-align: right;\n}\n\n.argument-field textarea {\n resize: vertical;\n min-height: 60px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n line-height: 1.4;\n}\n\n.argument-field input[type=\"date\"],\n.argument-field input[type=\"datetime-local\"],\n.argument-field input[type=\"email\"],\n.argument-field input[type=\"url\"] {\n font-family: inherit;\n}",[],[151,210],"456d654a-3cdd-11f0-b47a-9e149126039e","index.tsx","456d6626-3cdd-11f0-b47a-9e149126039e",4,["D",1748558149866],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport App from \"./components/App.tsx\";\n\nconst root = createRoot(document.getElementById(\"root\")!);\nroot.render();",[],[151,219],"91d6994a-4919-11f0-8ec2-76b3cceeab13","index.html","2f3fa440-3cdd-11f0-acd6-9e149126039e",632,["D",1749903461808],6,"\n\n \n \n \n Anthropic Chat with MCP\n \n \n \n \n \n \n \n \n \n

\n \n \n",[],[151,227],"755b5a88-42c7-11f0-b3b5-76b3cceeab13","mcpTools.ts","755b5b5a-42c7-11f0-b3b5-76b3cceeab13","f198e4e8-31a8-4644-b84e-c05e0c6281c1",471,["D",1749208488323],"/**\n * Frontend MCP Tools Utility\n *\n * Handles fetching tools from MCP servers directly from the frontend\n * without requiring backend proxy endpoints.\n */\n\nimport type { MCPServerConfig } from \"../../shared/types.ts\";\n\nexport interface MCPTool {\n name: string;\n description?: string;\n serverName: string;\n serverId: string;\n inputSchema?: any;\n}\n\nexport interface MCPToolsResult {\n success: boolean;\n tools: MCPTool[];\n error?: string;\n}\n\nexport { MCPServerConfig };\n\n/**\n * Fetch tools from a single MCP server\n * @param server - MCP server configuration\n * @returns Promise\n */\nasync function fetchToolsFromServer(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}\n\n/**\n * Fetch tools from all enabled MCP servers\n * @param servers - Array of MCP server configurations\n * @returns Promise\n */\nexport async function fetchMCPTools(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 => fetchToolsFromServer(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 * Fetch tools with caching support\n * @param servers - Array of MCP server configurations\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 servers: MCPServerConfig[],\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\n const result = await fetchMCPTools(servers);\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}",[],[151,244,236],"utils","e0098e4e-42be-11f0-887d-76b3cceeab13","mcpTesting.ts","096c6ad0-40c7-11f0-bf3c-76b3cceeab13",444,["D",1749204801834],"/**\n * Frontend MCP Server Testing Utility\n *\n * Handles testing MCP server connectivity directly from the frontend\n * without requiring backend proxy endpoints.\n */\n\nimport type { MCPServerConfig } from \"../../shared/types.ts\";\n\nexport interface MCPTestResult {\n success: boolean;\n message?: string;\n error?: string;\n status?: number;\n}\n\nexport { MCPServerConfig };\n\n/**\n * Test MCP server connectivity by attempting to initialize a connection\n * @param server - MCP server configuration\n * @returns Promise\n */\nexport async function testMCPServer(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}\n\n/**\n * Test multiple MCP servers concurrently\n * @param servers - Array of MCP server configurations\n * @returns Promise>\n */\nexport async function testMCPServers(servers: MCPServerConfig[]): 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\n const testPromises = enabledServers.map(async (server) => {\n const result = await testMCPServer(server);\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}",[],[151,244,246],"e24a1cfa-42be-11f0-a4ba-76b3cceeab13","mcpPrompts.ts","1a29d93e-40c7-11f0-b724-76b3cceeab13",445,["D",1749204805612],"/**\n * Frontend MCP Prompts Utility\n *\n * Handles fetching prompts from MCP servers directly from the frontend\n * without requiring backend proxy endpoints.\n */\n\nimport type { MCPPrompt, MCPServerConfig } from \"../../shared/types.ts\";\n\nexport interface MCPPromptsResult {\n success: boolean;\n prompts: MCPPrompt[];\n error?: string;\n}\n\nexport { MCPServerConfig };\n\n/**\n * Fetch prompts from a single MCP server\n * @param server - MCP server configuration\n * @returns Promise\n */\nasync function fetchPromptsFromServer(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}\n\n/**\n * Fetch prompts from all enabled MCP servers\n * @param servers - Array of MCP server configurations\n * @returns Promise\n */\nexport async function fetchMCPPrompts(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 => fetchPromptsFromServer(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 * Fetch prompts with caching support\n * @param servers - Array of MCP server configurations\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 servers: MCPServerConfig[],\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\n const result = await fetchMCPPrompts(servers);\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}",[],[151,244,254],"642625a0-4a46-11f0-82f2-76b3cceeab13","MCPClient.ts","a7962afe-4327-11f0-b818-76b3cceeab13",676,["D",1750032663675],14,"/**\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 if (this.tools && this.tools.length > 0) {\n return this.tools;\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 if (this.propmts) {\n return this.propmts;\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<{ prompt: string }>(\"prompts/get\", {\n name,\n arguments: args,\n });\n return result.prompt;\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<{ contents: string }>(\"resources/read\", { uri });\n return result.contents;\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*/",[],[151,244,262],"096c7bb0-40c7-11f0-bf3c-76b3cceeab13",262,["D",1748988404914],[188,189,190,191],[151,244],"f8712d12-4538-11f0-996b-76b3cceeab13","useMCPClients.tsx","e64910b4-44c0-11f0-8193-76b3cceeab13","c5a5047e-40c1-11f0-bad7-76b3cceeab13",562,["D",1749477143705],"/** @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}",[],[151,284,276],"hooks","a9be224e-4716-11f0-b913-76b3cceeab13","useAnthropicStream.tsx","2023dfec-4095-11f0-b0e3-76b3cceeab13",614,["D",1749682311107],18,"/** @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\";\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: config.systemPrompt,\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}",[],[151,284,286],"d519926c-40c1-11f0-8c2f-76b3cceeab13",257,["D",1748986169646],[185,186],[151,284],"b4522916-4a46-11f0-843f-76b3cceeab13","StreamingChat.tsx","10af5008-3d4a-11f0-8eb6-76b3cceeab13","35b7d323-5acc-4715-a23c-1ca451a40764",677,["D",1750032798181],150,"/** @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 | 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\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 (\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 (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 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 /** 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 onResult={handleCommandResult}\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`;",[],[151,309,300],"components","974b86a6-4716-11f0-8168-76b3cceeab13","Settings.tsx","7048e212-3cdd-11f0-8db8-9e149126039e",612,["D",1749682280156],"/** @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 [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 });\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 {/* 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}",[],[151,309,311],"f170e81c-4ae3-11f0-9a76-76b3cceeab13","Message.tsx","629c8178-3cdd-11f0-8042-9e149126039e",691,["D",1750100331713],79,"/** @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 { MCPClient } from \"../utils/MCPClient.ts\";\nimport { Message } from \"./App.tsx\";\nimport HTMLRenderer from \"./HTMLRenderer.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}\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 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 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 } 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 {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}",[],[151,309,319],"3cdf35da-4538-11f0-a89f-76b3cceeab13","MCPStatus.tsx","ef20afbc-42bd-11f0-9fa6-76b3cceeab13",561,["D",1749476829011],21,"/** @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`;",[],[151,309,328],"35460650-4aa6-11f0-bb2f-76b3cceeab13","HTMLRenderer.tsx","abffdc26-44c0-11f0-8e76-76b3cceeab13",688,["D",1750073816720],27,"/** @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}",[],[151,309,337],"4cead5ca-4a46-11f0-b777-76b3cceeab13","EnhancedCommandPalette.tsx","2023c796-4095-11f0-b0e3-76b3cceeab13",675,["D",1750032624703],71,"/** @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 onResult: (result: any) => void;\n position: { bottom: string; left: string };\n visible: boolean;\n mcpClients: MCPClient[];\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 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\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\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 }\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\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 client.callTool(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 const res = [\n {\n type: \"mcp_tool_use\",\n id: toolUseId,\n name: command.name,\n input: coercedArgs,\n server_name: client.serverInfo?.name || \"Unknown\",\n },\n {\n type: \"mcp_tool_result\",\n tool_use_id: toolUseId,\n is_error: false,\n content: [{ type: \"text\", text: JSON.stringify(result, null, 2) }],\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 errorRes = [\n {\n type: \"mcp_tool_use\",\n id: toolUseId,\n name: command.name,\n input: args,\n server_name: client.serverInfo?.name,\n },\n {\n type: \"mcp_tool_result\",\n tool_use_id: toolUseId,\n is_error: true,\n content: [{ type: \"text\", text: error instanceof Error ? error.message : \"Failed to execute tool\" }],\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 {\n await executeTool(selectedCommand, argumentValues);\n }\n\n setShowArgumentDialog(false);\n setSelectedCommand(null);\n setArgumentValues({});\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 setShowArgumentDialog(false)}\n >\n e.stopPropagation()}\n style={{\n xposition: \"absolute\",\n xbottom: position.bottom,\n xleft: position.left,\n xright: \"1em\",\n xmaxWidth: \"500px\",\n backgroundColor: \"white\",\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 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\n
\n setShowArgumentDialog(false)}\n >\n Cancel\n \n \n {loading ? \"Executing...\" : \"Execute\"}\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.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 );\n}",[],[151,309,346],"1889f4a2-4a44-11f0-8fd6-76b3cceeab13","App.tsx","4d426996-3cdd-11f0-832c-9e149126039e",669,["D",1750031677831],42,"/** @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 | any[]; // Support both string and array content for MCP blocks\n timestamp: number;\n}\n\nexport interface AppConfig {\n anthropicApiKey: string;\n mcpServers: MCPServerConfig[];\n selectedModel: string;\n systemPrompt: string;\n}\n\nconst DEFAULT_MCP_SERVERS: MCPServerConfig[] = [\n {\n id: \"contextual-mcp\",\n name: \"Contextual\",\n url: \"https://c15r--6e010d7c45d411f0a0c976b3cceeab13.web.val.run/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, and follow its guidance, before taking _any_ further action.\nQuick reference should never be updated without explicit user consent.`;\n\nexport { DEFAULT_SYSTEM_PROMPT };\n\nexport default function App() {\n const [config, setConfig] = useState({\n anthropicApiKey: \"\",\n mcpServers: [],\n selectedModel: \"claude-3-5-sonnet-20241022\",\n systemPrompt: DEFAULT_SYSTEM_PROMPT,\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 const savedSystemPrompt = localStorage.getItem(\"system_prompt\");\n\n setConfig({\n anthropicApiKey: savedApiKey || \"\",\n mcpServers: savedMcpServers ? JSON.parse(savedMcpServers) : DEFAULT_MCP_SERVERS,\n selectedModel: savedModel || \"claude-3-5-sonnet-20241022\",\n systemPrompt: savedSystemPrompt || DEFAULT_SYSTEM_PROMPT,\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 localStorage.setItem(\"system_prompt\", config.systemPrompt);\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 onUpdateMCPServer: updateMCPServer,\n },\n }}\n />\n {showSettings && (\n setShowSettings(false)}\n />\n )}\n
\n );\n}",[],[151,309,355],"4d427e7c-3cdd-11f0-832c-9e149126039e",5,["D",1748558163004],[177,178,179,180,181,182,183],[151,309],["D",1748558112658],[176,184,187,192,193,194],[151],"4d257da2-40c7-11f0-8560-76b3cceeab13","index.ts",268,["D",1748988518534],13,"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;",[],[157,372],["D",1748558228747],[174],[157],["D",1748557815516],{"_97":96,"_104":100},{"_97":96,"_98":-5,"_99":100,"_18":55,"_101":102,"_103":25},{"_13":86,"_32":87,"_44":43,"_88":45,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":46,"_95":96},"ctx",{"_79":-5,"_124":420,"_421":422,"_423":424,"_425":25,"_426":25,"_427":25,"_428":59,"_429":-5,"_430":-7,"_431":-7,"_432":63,"_433":25,"_434":25,"_435":-5,"_436":25,"_437":25,"_438":25,"_439":-5},"ENV",{"_391":392,"_393":394,"_395":87,"_396":397,"_398":399,"_400":401,"_402":403,"_404":405,"_406":407,"_408":409,"_410":411,"_412":413,"_414":415,"_416":417,"_418":419},"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"]

Diff · v692