Anthropic Chat with MCP

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_358":359,"_360":361},"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",472,"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 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}","createdAt",["D",1749208494452],"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":354,"_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":355,"_81":356,"_83":357,"_85":25},"tree",[173,175,192,194],"files",[173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194],"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},"b673d1a6-42bf-11f0-aa24-76b3cceeab13","README.md","2bc4d286-3cdd-11f0-9e50-9e149126039e","parentId",458,"latest",["D",1749205161558],29,"# 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, and prompts\n- **📊 MCP Status Dashboard** - Expandable status panel showing server connectivity, available prompts, 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- **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\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":351,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_196":352,"_27":353},{"_44":342,"_32":343,"_30":57,"_135":158,"_42":43,"_41":344,"_137":59,"_39":345,"_13":346,"_34":347,"_36":348,"_24":25,"_141":-5,"_196":349,"_27":350},{"_44":150,"_32":151,"_30":152,"_135":-5,"_42":43,"_41":153,"_137":59,"_39":339,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_196":340,"_27":341},{"_44":335,"_32":291,"_30":284,"_135":152,"_42":43,"_41":229,"_137":59,"_39":336,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_196":337,"_27":338},{"_44":326,"_32":327,"_30":328,"_135":284,"_42":43,"_41":329,"_137":25,"_39":330,"_13":331,"_34":35,"_36":332,"_24":25,"_141":-5,"_196":333,"_27":334},{"_44":318,"_32":319,"_30":320,"_135":284,"_42":43,"_41":321,"_137":25,"_39":322,"_13":153,"_34":35,"_36":323,"_24":25,"_141":-5,"_196":324,"_27":325},{"_44":310,"_32":311,"_30":312,"_135":284,"_42":43,"_41":313,"_137":25,"_39":314,"_13":153,"_34":35,"_36":315,"_24":25,"_141":-5,"_196":316,"_27":317},{"_44":301,"_32":302,"_30":303,"_135":284,"_42":43,"_41":304,"_137":25,"_39":305,"_13":306,"_34":35,"_36":307,"_24":25,"_141":-5,"_196":308,"_27":309},{"_44":292,"_32":293,"_30":294,"_135":284,"_42":43,"_41":295,"_137":25,"_39":296,"_13":297,"_34":35,"_36":298,"_24":25,"_141":-5,"_196":299,"_27":300},{"_44":281,"_32":282,"_30":283,"_135":284,"_42":43,"_41":285,"_137":25,"_39":286,"_13":287,"_34":35,"_36":288,"_24":25,"_141":-5,"_196":289,"_27":290},{"_44":276,"_32":275,"_30":268,"_135":152,"_42":43,"_41":277,"_137":59,"_39":278,"_13":153,"_34":148,"_36":-5,"_24":25,"_141":-5,"_196":279,"_27":280},{"_44":265,"_32":266,"_30":267,"_135":268,"_42":43,"_41":269,"_137":25,"_39":270,"_13":271,"_34":35,"_36":272,"_24":25,"_141":-5,"_196":273,"_27":274},{"_44":260,"_32":242,"_30":236,"_135":152,"_42":43,"_41":261,"_137":59,"_39":262,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_196":263,"_27":264},{"_44":251,"_32":252,"_30":253,"_135":236,"_42":43,"_41":254,"_137":25,"_39":255,"_13":256,"_34":35,"_36":257,"_24":25,"_141":-5,"_196":258,"_27":259},{"_44":243,"_32":244,"_30":245,"_135":236,"_42":43,"_41":246,"_137":25,"_39":247,"_13":219,"_34":35,"_36":248,"_24":25,"_141":-5,"_196":249,"_27":250},{"_44":233,"_32":234,"_30":235,"_135":236,"_42":43,"_41":237,"_137":25,"_39":238,"_13":63,"_34":35,"_36":239,"_24":25,"_141":-5,"_196":240,"_27":241},{"_44":224,"_32":225,"_30":226,"_135":152,"_42":43,"_41":227,"_137":25,"_39":228,"_13":229,"_34":20,"_36":230,"_24":25,"_141":-5,"_196":231,"_27":232},{"_44":216,"_32":217,"_30":218,"_135":152,"_42":43,"_41":219,"_137":25,"_39":220,"_13":63,"_34":35,"_36":221,"_24":25,"_141":-5,"_196":222,"_27":223},{"_44":207,"_32":208,"_30":209,"_135":152,"_42":43,"_41":210,"_137":25,"_39":211,"_13":212,"_34":20,"_36":213,"_24":25,"_141":-5,"_196":214,"_27":215},{"_44":143,"_32":144,"_30":145,"_135":-5,"_42":43,"_41":146,"_137":59,"_39":204,"_13":63,"_34":148,"_36":-5,"_24":25,"_141":-5,"_196":205,"_27":206},{"_44":199,"_32":33,"_30":31,"_135":145,"_42":43,"_41":14,"_137":25,"_39":200,"_13":201,"_34":35,"_36":38,"_24":25,"_141":-5,"_196":202,"_27":203},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":25,"_39":195,"_13":139,"_34":20,"_36":140,"_24":25,"_141":-5,"_196":197,"_27":198},["D",1749205161558],"children",[],[133],"790962f6-42c7-11f0-af2c-76b3cceeab13",["D",1749208494452],8,[],[144,33],["D",1748604769414],[193],[144],"c0312002-42c6-11f0-9ce2-76b3cceeab13","style.css","42e137de-3cdd-11f0-898f-9e149126039e",470,["D",1749208184378],127,"* {\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/* Command Palette Styles */\n.command-palette {\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 0.5em;\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 0 5px 10px -5px rgba(0, 0, 0, 0.1);\n max-height: 300px;\n overflow-y: auto;\n z-index: 1000;\n min-width: 300px;\n max-width: 400px;\n}\n\n.command-palette-item {\n padding: 0.3em 0.35em;\n cursor: pointer;\n border-bottom: 1px solid #f1f5f9;\n transition: background-color 0.2s;\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: #c3e1ff;\n}\n\n.command-palette-item.disabled {\n cursor: default;\n color: #6b7280;\n font-style: italic;\n}\n\n.command-palette-item-main {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.25em;\n}\n\n.command-palette-name {\n font-weight: 600;\n color: #374151;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.875em;\n}\n\n.command-palette-server {\n font-size: 0.75em;\n color: #6b7280;\n background: #f3f4f6;\n padding: 0.125em 0.375em;\n border-radius: 0.25em;\n}\n\n.command-palette-description {\n font-size: 0.75em;\n color: #6b7280;\n margin-bottom: 0.25em;\n line-height: 1.3;\n}\n\n.command-palette-args {\n font-size: 0.6875em;\n color: #9ca3af;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\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}\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-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/* 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}",[],[151,208],"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,217],"49c8f514-4197-11f0-8c6d-76b3cceeab13","index.html","2f3fa440-3cdd-11f0-acd6-9e149126039e",417,["D",1749077848217],5,"\n\n \n \n \n Anthropic Chat with MCP\n \n \n \n \n \n \n \n \n \n

\n \n \n",[],[151,225],"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,242,234],"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,242,244],"e24a1cfa-42be-11f0-a4ba-76b3cceeab13","mcpPrompts.ts","1a29d93e-40c7-11f0-b724-76b3cceeab13",445,["D",1749204805612],6,"/**\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,242,252],"096c7bb0-40c7-11f0-bf3c-76b3cceeab13",262,["D",1748988404914],[186,187,188],[151,242],"de208506-42af-11f0-a2a1-76b3cceeab13","useAnthropicStream.tsx","2023dfec-4095-11f0-b0e3-76b3cceeab13","c5a5047e-40c1-11f0-bad7-76b3cceeab13",427,["D",1749198356176],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport Anthropic, { MessageStreamEvent } from \"https://esm.sh/@anthropic-ai/sdk\";\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// External shared types\nimport type { MCPPrompt } from \"../../shared/types.ts\";\nimport type { AppConfig, Message } from \"./App.tsx\";\n\n/* ──────────────────────────────── Shared helpers ─────────────────────────── */\n\nexport type Status = \"idle\" | \"thinking\" | \"streaming\";\nexport type AssistantMsg = { role: \"assistant\"; content: any[] };\n\n/** merge delta (unchanged) */\nfunction mergeDelta(block: any, delta: any) {\n if (!delta) return;\n switch (delta.type) {\n case \"text_delta\":\n block.text = (block.text ?? \"\") + (delta.text ?? \"\");\n break;\n case \"input_json_delta\":\n block._input_json_str = (block._input_json_str ?? \"\") + (delta.partial_json ?? \"\");\n break;\n default:\n console.warn(`Unhandled delta`, delta);\n Object.assign(block, delta);\n }\n}\n\n/** build request body helpers (unchanged) */\nfunction buildBody(config: AppConfig, history: Message[], userText: string) {\n const mcp = config.mcpServers\n .filter((s) => s.enabled && s.url)\n .map((s) => ({\n type: \"url\",\n url: s.url,\n name: s.name,\n authorization_token: s.authorization_token,\n }));\n\n const msgs = history\n .filter((m) => m.role !== \"system\")\n .map((m) => ({ role: m.role, content: m.content }))\n .concat([{ role: \"user\", content: userText }]);\n\n return {\n model: config.selectedModel,\n max_tokens: 8_000,\n stream: true,\n system:\n \"You are a helpful assistant, with access to tools. use these tools to enhance your effectivness. prioritise establishing existing knowlege and keep track of progress and learnings as you go. only create new skills when confirmed by the user.\",\n messages: msgs,\n ...(mcp.length && { mcp_servers: mcp }),\n } as const;\n}\n\n/** final assembly */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n Object.values(blocks).forEach((b) => {\n if (b._input_json_str !== undefined) {\n try {\n b.input = JSON.parse(b._input_json_str);\n } catch {\n /* swallow */\n }\n delete b._input_json_str;\n }\n });\n\n const content = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b)\n .map((k) => {\n const { delta, _streaming, ...blk } = blocks[k];\n return blk;\n });\n\n return { role: \"assistant\", content };\n}\n\n/* ──────────────────────────── useAnthropicStream ─────────────────────────── */\n\nexport default function useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = React.useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = React.useState(null);\n const abortRef = React.useRef(null);\n\n /* Anthropic SDK instance – memoised so we don't recreate each render */\n const anthropic = React.useMemo(() => {\n if (!config.anthropicApiKey) return null;\n return new Anthropic({\n dangerouslyAllowBrowser: true,\n apiKey: config.anthropicApiKey,\n baseURL: \"https://api.anthropic.com\", // explicit so it works with CORS pre‑flights\n defaultHeaders: {\n \"anthropic-version\": \"2023-06-01\",\n // Allow calling the API directly from the browser – you accept the risk!\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n },\n });\n }, [config.anthropicApiKey]);\n\n /* Abort helper */\n const abort = React.useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /* Main send/stream function – identical public contract */\n const send = React.useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!anthropic) throw new Error(\"API key missing\");\n if (status !== \"idle\") throw new Error(\"Stream already in progress\");\n\n setStatus(\"thinking\");\n\n const body = buildBody(config, history, userText);\n\n // Build request‑scoped headers (MCP, etc.)\n const extraHeaders: Record = {};\n if ((body as any).mcp_servers?.length) {\n extraHeaders[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n }\n\n // Local abort controller so user can cancel mid‑stream\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n let stream: AsyncIterable;\n try {\n // NOTE: The SDK automatically handles SSE parsing for us.\n stream = (await anthropic.messages.create(body as any, {\n signal: ctrl.signal,\n headers: extraHeaders,\n })) as AsyncIterable;\n } catch (err: any) {\n console.error(\"Failed to call Anthropic API\", err);\n throw err;\n }\n\n setStatus(\"streaming\");\n\n /* streaming state (same as before) */\n const blocks: Record = {};\n\n /* finish latch */\n let finalMsg: AssistantMsg | null = null;\n\n try {\n for await (const ev of stream) {\n console.log(ev);\n // Type narrowing via ev.type (runtime string)\n switch (ev.type) {\n case \"content_block_start\":\n blocks[ev.index] = structuredClone(ev.content_block);\n if (\n blocks[ev.index].type === \"text\"\n && blocks[ev.index].text === undefined\n ) {\n blocks[ev.index].text = \"\";\n }\n break;\n\n case \"content_block_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n }\n break;\n\n case \"message_delta\":\n if (ev.index !== undefined && blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n }\n break;\n\n case \"message_stop\":\n finalMsg = assembleMessage(blocks);\n break;\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n }\n\n /* push live preview on every event except stop */\n if (ev.type !== \"message_stop\") {\n const preview = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b)\n .map((k) => ({\n ...blocks[k],\n _streaming: k === Math.max(...Object.keys(blocks).map(Number)),\n }));\n setLiveBlocks(preview);\n }\n }\n } catch (err) {\n console.error(\"Error during streaming\", err);\n throw err;\n } finally {\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n }\n\n if (!finalMsg) throw new Error(\"Stream ended unexpectedly\");\n return finalMsg;\n },\n [anthropic, config, status],\n );\n\n return { status, liveBlocks, send, abort } as const;\n}",[],[151,275,266],"hooks","d519926c-40c1-11f0-8c2f-76b3cceeab13",257,["D",1748986169646],[184],[151,275],"e173b1ae-42c5-11f0-b063-76b3cceeab13","StreamingChat.tsx","10af5008-3d4a-11f0-8eb6-76b3cceeab13","35b7d323-5acc-4715-a23c-1ca451a40764",468,["D",1749207810683],126,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createParser, type ParsedEvent, type ReconnectInterval } from \"https://esm.sh/eventsource-parser@2\";\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent, MCPPrompt } from \"../../shared/types.ts\";\nimport useAnthropicStream from \"../hooks/useAnthropicStream.tsx\";\nimport { fetchMCPPromptsWithCache } from \"../utils/mcpPrompts.ts\";\nimport { AppConfig, Message } from \"./App.tsx\";\nimport CommandPalette from \"./CommandPalette.tsx\";\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onUpdateLastMessage: (content: string) => void;\n onDeleteMessage: (messageId: string) => void;\n onRetryFromMessage: (messageId: string) => string | null;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n mcpStatusComponent?: any;\n}\n\nconst chatInputCacheKey = \"chat_input\";\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onUpdateLastMessage,\n onDeleteMessage,\n onRetryFromMessage,\n onClearMessages,\n onOpenSettings,\n mcpStatusComponent,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\n const [prompts, setPrompts] = useState([]);\n const [showCommandPalette, setShowCommandPalette] = useState(false);\n const [commandPalettePosition, setCommandPalettePosition] = useState({ bottom: \"0\", left: \"0\" });\n const [selectedPromptIndex, setSelectedPromptIndex] = useState(0);\n const textareaRef = useRef(null);\n const messagesEndRef = useRef(null);\n const [showMcpStatus, setShowMcpStatus] = useState(false);\n\n const { status, liveBlocks, send, abort } = useAnthropicStream(config);\n\n const thinking = status === \"thinking\";\n const streaming = status === \"streaming\";\n\n useEffect(() => {\n setInput(localStorage.getItem(chatInputCacheKey) || \"\");\n }, []);\n\n useEffect(() => {\n if (!streaming) {\n if (messages.length) {\n const last = messages[messages.length - 1];\n if (last.role === \"assistant\" && last.content[last.content.length - 1].type === \"mcp_tool_use\") {\n console.warn(\"Trailing mcp_tool_use block. Requires cleanup!\");\n last.content.push({\n tool_use_id: last.content[last.content.length - 1].id,\n type: \"mcp_tool_result\",\n is_error: true,\n content: [\n {\n type: \"text\",\n text: `Error: Output was terminated unexpectedly. Retry: yes.`,\n },\n ],\n });\n onUpdateLastMessage(last.content);\n }\n if (\n last.role === \"assistant\"\n && last.content[last.content.length - 1].type === \"mcp_tool_result\"\n && !last.content[last.content.length - 1].tool_use_id\n ) {\n console.warn(\"Trailing malformed mcp_tool_result block. Requires cleanup!\");\n last.content[last.content.length - 1] = {\n tool_use_id: last.content[last.content.length - 2].id,\n type: \"mcp_tool_result\",\n is_error: true,\n content: [\n {\n type: \"text\",\n text: `Error: Output was terminated unexpectedly. Retry: yes.`,\n },\n ],\n };\n onUpdateLastMessage(last.content);\n }\n }\n }\n }, [messages, streaming]);\n\n /* scroll to bottom on new content */\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages, liveBlocks]);\n\n /* auto-grow textarea */\n useEffect(() => {\n if (!textareaRef.current) return;\n textareaRef.current.style.height = \"auto\";\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }, [input]);\n\n /* fetch MCP prompts when config changes */\n useEffect(() => {\n const fetchPrompts = async () => {\n try {\n const result = await fetchMCPPromptsWithCache(config.mcpServers);\n\n if (result.success) {\n console.log(\"MCP prompts:\", result.prompts);\n setPrompts(result.prompts);\n } else {\n console.warn(\"Failed to fetch MCP prompts:\", result.error);\n // Keep existing prompts on error\n }\n } catch (error) {\n console.warn(\"Failed to fetch MCP prompts:\", error);\n // Keep existing prompts on error\n }\n };\n\n if (config.mcpServers.some(s => s.enabled && s.url)) {\n fetchPrompts();\n } else {\n // If no servers are enabled, just show the built-in test prompt\n setPrompts([{\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 }, [config.mcpServers]);\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 console.log({ rect, commandPalettePosition });\n setCommandPalettePosition({\n bottom: `${rect.height + 60}px`, // Position above the input\n left: \"1em\",\n });\n }\n console.log(\"Show Command Palette\", { shouldShow, showCommandPalette });\n setShowCommandPalette(true);\n setSelectedPromptIndex(0);\n } else if (!shouldShow && showCommandPalette) {\n setShowCommandPalette(false);\n }\n }, [input, showCommandPalette]);\n\n /* filter prompts based on current input */\n const getFilteredPrompts = () => {\n if (!input.startsWith(\"/\")) return [];\n const searchQuery = input.slice(1).toLowerCase();\n return prompts.filter(prompt =>\n prompt.name.toLowerCase().includes(searchQuery)\n || (prompt.description && prompt.description.toLowerCase().includes(searchQuery))\n );\n };\n\n /* ── helpers ──────────────────────────────────────────────── */\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 onAddMessage({ role: \"user\", content: userText });\n\n try {\n const assistant = await send(\n [...messages],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\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, // ← array, no JSON.stringify\n });\n } else {\n onAddMessage({ role: \"system\", content: \"Message cancelled by user\" });\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (showCommandPalette) {\n const filteredPrompts = getFilteredPrompts();\n\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setSelectedPromptIndex(prev => prev < filteredPrompts.length - 1 ? prev + 1 : 0);\n return;\n }\n\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setSelectedPromptIndex(prev => prev > 0 ? prev - 1 : filteredPrompts.length - 1);\n return;\n }\n\n if (e.key === \"Enter\") {\n e.preventDefault();\n if (filteredPrompts[selectedPromptIndex]) {\n handlePromptSelect(filteredPrompts[selectedPromptIndex]);\n }\n return;\n }\n\n if (e.key === \"Escape\") {\n e.preventDefault();\n setShowCommandPalette(false);\n return;\n }\n }\n\n if (e.key === \"Enter\" && e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\n }\n };\n\n const handlePromptSelect = (prompt: MCPPrompt) => {\n // Replace the current input with the selected prompt\n let promptText = `/${prompt.name}`;\n\n // Add argument placeholders if the prompt has arguments\n if (prompt.arguments && prompt.arguments.length > 0) {\n const args = prompt.arguments.map(arg => arg.required ? `<${arg.name}>` : `[${arg.name}]`).join(\" \");\n promptText += ` ${args}`;\n }\n\n setInput(promptText);\n setShowCommandPalette(false);\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(promptText.length, promptText.length);\n }\n }, 0);\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 />\n ))}\n\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {!streaming && !thinking && !messages.length && !liveBlocks && (\n

\n Claude Chat
with MCP\n

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

\n Thinking\n

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

\n Processing\n

\n )}\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…\"\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 {/* Command Palette */}\n {showCommandPalette && (\n setShowCommandPalette(false)}\n position={commandPalettePosition}\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 •{\" \"}\n {streaming ? : }\n \n\n \n Settings \n \n

\n {/* Show MCP Status */}\n \n

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

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

\n \n

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

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

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

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

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

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

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

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

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

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

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

\n\n

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

\n )}\n

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

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

\n )}\n

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

\n \n \n

\n );\n}",[],[151,291,293],"ff8b0ac4-42bc-11f0-874e-76b3cceeab13","Message.tsx","629c8178-3cdd-11f0-8042-9e149126039e",432,["D",1749203995697],68,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Message } from \"./App.tsx\";\n\ninterface ShadowDomWrapperProps {\n html: string;\n}\n\nconst ShadowDomWrapper: React.FC = ({ html }) => {\n const containerRef = useRef(null);\n const shadowRef = useRef(null);\n\n useEffect(() => {\n const host = containerRef.current;\n if (!host) return;\n\n // Attach shadow root only once\n if (!shadowRef.current) {\n shadowRef.current = host.attachShadow({ mode: \"open\" });\n }\n\n // Clear existing content and inject new HTML\n if (shadowRef.current) {\n shadowRef.current.innerHTML = html;\n }\n }, [html]);\n\n return

;\n};\n\ninterface MessageProps {\n message: Message;\n onDelete?: () => void;\n onRetry?: () => void;\n canRetry?: boolean;\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 }: MessageProps) {\n const formatRegularContent = (content: string) =>

;\n\n const [now, setNow] = useState(new Date());\n\n useEffect(() => {\n // create a interval and get the id\n const myInterval = setInterval(() => {\n setNow(new Date());\n }, 10_000);\n // clear out the interval using the id when unmounting the component\n return () => clearInterval(myInterval);\n }, []);\n\n const formatTimestamp = (timestamp: number, forceFull: boolean) => {\n if (!timestamp) return;\n const date = new Date(timestamp);\n const diffMs = now.getTime() - date.getTime();\n const diffSecs = Math.floor(diffMs / 1000);\n const diffMins = Math.floor(diffMs / (1000 * 60));\n const diffHours = Math.floor(diffMs / (1000 * 60 * 60));\n const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));\n\n if (!forceFull && diffSecs < 5) return \"just now\";\n if (!forceFull && diffSecs < 60) return `${diffSecs}s ago`;\n if (!forceFull && diffMins < 60) return `${diffMins}m ago`;\n if (!forceFull && diffHours < 24) return `${diffHours}h ago`;\n if (!forceFull && diffDays < 7) return `${diffDays}d ago`;\n\n // For older messages, show date\n return date.toLocaleDateString(undefined, {\n month: \"short\",\n day: \"numeric\",\n ...(date.getFullYear() !== now.getFullYear() && { year: \"numeric\" }),\n });\n };\n\n const onCopy = (target: any) => {\n if (typeof target.content === \"string\") {\n navigator.clipboard.writeText(target.content);\n } else {\n navigator.clipboard.writeText(target.content.map(b => b.text).join(\"\\n\"));\n }\n\n alert(\"Copied to clipboard\");\n };\n\n /* ═══════ 1. Renderer for *streaming* Anthropic blocks (live preview) ══════ */\n\n const renderAnthropicBlocks = (blocks: AnthropicBlock[]) => (\n

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

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

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

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

\n );\n\n case \"mcp_tool_use\":\n return (\n
\n
\n {blk.name}\n
\n
\n onCopy(blk)}>\n \n \n {JSON.stringify(blk, null, 2)}\n
\n
\n );\n\n case \"mcp_tool_result\":\n try {\n const res = JSON.parse(blk.content[0].text);\n if (typeof res.output?.html === \"string\") {\n return ;\n }\n } catch (err) {\n console.warn(\"Failed to parse MCP tool result payload\", err, { blk });\n }\n return (\n
\n
{blk.is_error ? \"(Error)\" : \"Ok\"}
\n
\n onCopy(blk)}>\n \n \n {typeof blk.content === 'string' ? blk.content : blk.content.map(b => b.text).join(\"\\n\")}\n
\n
\n );\n\n /* Unknown or future block types */\n default:\n return (\n
\n
{blk.type}
\n
\n onCopy(blk)}>\n \n \n {typeof blk.content === 'string' ? blk.content : blk.content.map(b => b.text).join(\"\\n\")}\n
\n
\n );\n }\n })}\n

\n );\n\n /* ═══════ Decide renderer based on runtime type ═══════════════════════════ */\n\n const renderContent = () => {\n const content = message.content as unknown;\n\n // 1. Live preview (array of blocks)\n if (Array.isArray(content)) {\n return renderAnthropicBlocks(content as AnthropicBlock[]);\n } else {\n return renderAnthropicBlocks([{ type: \"text\", text: message.content }]);\n }\n\n // 3. Defensive fallback\n return (\n
\n {JSON.stringify(content, null, 2)}\n
\n );\n };\n\n /* ═══════ Render wrapper ══════════════════════════════════════════════════ */\n\n return (\n
\n
\n {renderContent()}\n
\n
\n \n {formatTimestamp(message.timestamp)}\n \n {onRetry && canRetry && (\n \n \n \n )}\n {onDelete && (\n \n \n \n )}\n {onCopy && (\n onCopy(message)}\n title=\"Copy this message\"\n >\n \n \n )}\n
\n
\n );\n}",[],[151,291,302],"0ba16386-42c6-11f0-8ec0-76b3cceeab13","MCPStatus.tsx","ef20afbc-42bd-11f0-9fa6-76b3cceeab13",469,["D",1749207881446],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPPrompt } from \"../../shared/types.ts\";\nimport { fetchMCPPromptsWithCache } from \"../utils/mcpPrompts.ts\";\nimport { MCPServerConfig, MCPTestResult, testMCPServers } from \"../utils/mcpTesting.ts\";\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: any[];\n isExpanded: boolean;\n lastChecked: number | null;\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\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 // 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\n const testResults = await testMCPServers(enabledServers);\n\n // Fetch prompts for successful servers\n const promptResults = await fetchMCPPromptsWithCache(enabledServers);\n\n // Update statuses\n setServerStatuses(prev => {\n const updated = { ...prev };\n\n enabledServers.forEach(server => {\n if (updated[server.id]) {\n updated[server.id] = {\n ...updated[server.id],\n testResult: testResults[server.id] || null,\n prompts: promptResults.success\n ? promptResults.prompts.filter(p => p.serverId === server.id)\n : [],\n lastChecked: Date.now(),\n };\n }\n });\n\n return updated;\n });\n\n console.log(`[MCP Status] Startup check complete:`, {\n tested: Object.keys(testResults).length,\n successful: Object.values(testResults).filter(r => r.success).length,\n prompts: promptResults.success ? promptResults.prompts.length : 0,\n });\n } catch (error) {\n console.error(\"[MCP Status] Error during startup check:\", error);\n } finally {\n setIsInitializing(false);\n }\n };\n\n checkEnabledServers();\n }, [servers, isInitializing]);\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 testMCPServers([server]);\n const promptResults = await fetchMCPPromptsWithCache([server]);\n\n setServerStatuses(prev => ({\n ...prev,\n [serverId]: {\n ...prev[serverId],\n testResult: testResult[serverId] || null,\n prompts: promptResults.success\n ? promptResults.prompts.filter(p => p.serverId === serverId)\n : [],\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 return `Online (${promptCount} prompt${promptCount !== 1 ? \"s\" : \"\"})`;\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\n if (isInitializing) {\n return (\n
\n
\n ⏳\n Initializing MCP servers...\n
\n
\n );\n }\n\n if (!show) return;\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`}\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 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 {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.testResult && !status.testResult.success && (\n
\n Error: {status.testResult.error}\n
\n )}\n
\n )}\n
\n );\n })\n )}\n
\n )}\n

\n );\n}",[],[151,291,311],"3c677e0a-4155-11f0-8b96-76b3cceeab13","CommandPalette.tsx","2023c796-4095-11f0-b0e3-76b3cceeab13",388,["D",1749049478981],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPPrompt } from \"../../shared/types.ts\";\n\ninterface CommandPaletteProps {\n prompts: MCPPrompt[];\n query: string;\n selectedIndex: number;\n onSelect: (prompt: MCPPrompt) => void;\n onClose: () => void;\n onHover?: (index: number) => void;\n position: { bottom: string; left: string };\n}\n\nexport default function CommandPalette({\n prompts,\n query,\n selectedIndex,\n onSelect,\n onClose,\n onHover,\n position,\n}: CommandPaletteProps) {\n // Filter prompts based on query (excluding the leading \"/\")\n const searchQuery = query.slice(1).toLowerCase();\n const filteredPrompts = prompts.filter(prompt =>\n prompt.name.toLowerCase().includes(searchQuery)\n || (prompt.description && prompt.description.toLowerCase().includes(searchQuery))\n );\n\n // Handle keyboard navigation\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n e.preventDefault();\n onClose();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [onClose]);\n\n if (filteredPrompts.length === 0) {\n return null;\n }\n\n return (\n \n {filteredPrompts.slice(0, 10).map((prompt, index) => (\n onSelect(prompt)}\n onMouseEnter={() => {\n // Update selected index when hovering\n // This would need to be passed up to parent component\n }}\n >\n
\n /{prompt.name}\n {prompt.serverName}\n
\n {prompt.description && (\n
\n {prompt.description}\n
\n )}\n {prompt.arguments && prompt.arguments.length > 0 && (\n
\n Args: {prompt.arguments.map(arg => `${arg.name}${arg.required ? \"*\" : \"\"}`).join(\", \")}\n
\n )}\n

\n ))}\n

\n );\n}",[],[151,291,319],"6c1bf704-42c5-11f0-8cad-76b3cceeab13","App.tsx","4d426996-3cdd-11f0-832c-9e149126039e",464,["D",1749207613813],25,"/** @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 MCPStatus from \"./MCPStatus.tsx\";\nimport Settings from \"./Settings.tsx\";\nimport StreamingChat from \"./StreamingChat.tsx\";\n\nexport interface Message {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: number;\n}\n\nexport interface AppConfig {\n anthropicApiKey: string;\n mcpServers: MCPServerConfig[];\n selectedModel: string;\n}\n\nconst DEFAULT_MCP_SERVERS: MCPServerConfig[] = [\n {\n id: \"contextual-mcp\",\n name: \"Contextual\",\n url: \"https://c15r--1564b217248f4a97a4d37bfe82cb8b19.web.val.run/mcp\",\n authorization_token: \"\",\n enabled: true,\n },\n];\n\nexport default function App() {\n const [config, setConfig] = useState({\n anthropicApiKey: \"\",\n mcpServers: [],\n selectedModel: \"claude-3-5-sonnet-20241022\",\n });\n const [showSettings, setShowSettings] = useState(false);\n const [messages, setMessages] = useState([]);\n\n // Load config from localStorage on mount\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"anthropic_api_key\");\n const savedMcpServers = localStorage.getItem(\"mcp_servers\");\n const savedMessages = localStorage.getItem(\"chat_messages\");\n const savedModel = localStorage.getItem(\"selected_model\");\n\n setConfig({\n anthropicApiKey: savedApiKey || \"\",\n mcpServers: savedMcpServers ? JSON.parse(savedMcpServers) : DEFAULT_MCP_SERVERS,\n selectedModel: savedModel || \"claude-3-5-sonnet-20241022\",\n });\n\n // Load saved messages\n if (savedMessages) {\n try {\n const parsedMessages = JSON.parse(savedMessages);\n setMessages(parsedMessages);\n } catch (error) {\n console.error(\"Failed to load saved messages:\", error);\n }\n }\n\n // Show settings if no API key is configured\n if (!savedApiKey) {\n setShowSettings(true);\n }\n }, []);\n\n // Save config to localStorage when it changes\n useEffect(() => {\n if (config.anthropicApiKey) {\n localStorage.setItem(\"anthropic_api_key\", config.anthropicApiKey);\n }\n localStorage.setItem(\"mcp_servers\", JSON.stringify(config.mcpServers));\n localStorage.setItem(\"selected_model\", config.selectedModel);\n }, [config]);\n\n // Save messages to localStorage when they change\n useEffect(() => {\n localStorage.setItem(\"chat_messages\", JSON.stringify(messages));\n }, [messages]);\n\n const updateConfig = (newConfig: Partial) => {\n setConfig(prev => ({ ...prev, ...newConfig }));\n };\n\n const updateMCPServer = (serverId: string, updates: Partial) => {\n setConfig(prev => ({\n ...prev,\n mcpServers: prev.mcpServers.map(server => server.id === serverId ? { ...server, ...updates } : server),\n }));\n };\n\n const addMessage = (message: Omit) => {\n setMessages(prev => [...prev, {\n ...message,\n id: crypto.randomUUID(),\n timestamp: Date.now(),\n }]);\n };\n\n const updateLastMessage = (content: string) => {\n setMessages(prev => {\n if (prev.length === 0) return prev;\n const updated = [...prev];\n updated[updated.length - 1] = { ...updated[updated.length - 1], content };\n return updated;\n });\n };\n\n const deleteMessage = (messageId: string) => {\n setMessages(prev => prev.filter(msg => msg.id !== messageId));\n };\n\n const retryFromMessage = (messageId: string) => {\n const messageIndex = messages.findIndex(msg => msg.id === messageId);\n if (messageIndex === -1) return null;\n\n const message = messages[messageIndex];\n if (message.role !== \"user\") return null;\n\n // Delete all messages after this one (including assistant responses)\n setMessages(prev => prev.slice(0, messageIndex + 1));\n\n // Return the user message content for resubmission\n return message.content;\n };\n\n const clearMessages = () => {\n setMessages([]);\n };\n\n return (\n
\n setShowSettings(true)}\n mcpStatusComponent={{\n component: MCPStatus,\n props: {\n mcpServers: config.mcpServers,\n onUpdateMCPServer: updateMCPServer,\n },\n }}\n />\n {showSettings && (\n setShowSettings(false)}\n />\n )}\n
\n );\n}",[],[151,291,327],"4d427e7c-3cdd-11f0-832c-9e149126039e",["D",1748558163004],[177,178,179,180,181,182],[151,291],["D",1748558112658],[176,183,185,189,190,191],[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,343],["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":391,"_392":393,"_394":395,"_396":25,"_397":25,"_398":25,"_399":59,"_400":-5,"_401":-7,"_402":-7,"_403":63,"_404":25,"_405":25,"_406":-5,"_407":25,"_408":25,"_409":25,"_410":-5},"ENV",{"_362":363,"_364":365,"_366":87,"_367":368,"_369":370,"_371":372,"_373":374,"_375":376,"_377":378,"_379":380,"_381":382,"_383":384,"_385":386,"_387":388,"_389":390},"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 · v472