Anthropic Chat with MCP

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_456":457,"_458":459},"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",741,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","shared/types.ts","latestPath","fileId","d0d80e16-3d49-11f0-afd9-76b3cceeab13","name","types.ts","fileType","script","content","// Shared types for Anthropic streaming integration\n\nexport interface StreamEvent {\n event: string;\n data: string;\n}\n\nexport interface MessageStartEvent {\n type: \"message_start\";\n message: {\n id: string;\n type: \"message\";\n role: \"assistant\";\n content: any[];\n model: string;\n stop_reason: null;\n stop_sequence: null;\n usage: {\n input_tokens: number;\n output_tokens: number;\n };\n };\n}\n\nexport interface ContentBlockStartEvent {\n type: \"content_block_start\";\n index: number;\n content_block: {\n type: \"text\" | \"tool_use\";\n id?: string;\n name?: string;\n input?: any;\n text?: string;\n };\n}\n\nexport interface ContentBlockDeltaEvent {\n type: \"content_block_delta\";\n index: number;\n delta: {\n type: \"text_delta\" | \"input_json_delta\" | \"thinking_delta\" | \"signature_delta\";\n text?: string;\n partial_json?: string;\n thinking?: string;\n signature?: string;\n };\n}\n\nexport interface ContentBlockStopEvent {\n type: \"content_block_stop\";\n index: number;\n}\n\nexport interface MessageDeltaEvent {\n type: \"message_delta\";\n delta: {\n stop_reason?: string;\n stop_sequence?: string;\n };\n usage: {\n output_tokens: number;\n };\n}\n\nexport interface MessageStopEvent {\n type: \"message_stop\";\n}\n\nexport interface PingEvent {\n type: \"ping\";\n}\n\nexport interface ErrorEvent {\n type: \"error\";\n error: {\n type: string;\n message: string;\n };\n}\n\nexport type AnthropicStreamEvent = \n | MessageStartEvent\n | ContentBlockStartEvent\n | ContentBlockDeltaEvent\n | ContentBlockStopEvent\n | MessageDeltaEvent\n | MessageStopEvent\n | PingEvent\n | ErrorEvent;\n\nexport interface ChatMessage {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: number;\n}\n\nexport interface MCPPrompt {\n name: string;\n description?: string;\n serverName: string;\n serverId: string;\n arguments?: Array<{\n name: string;\n description?: string;\n required?: boolean;\n }>;\n}\n\nexport interface MCPTool {\n name: string;\n description?: string;\n serverName: string;\n serverId: string;\n inputSchema?: any;\n}\n\nexport interface MCPServerConfig {\n id: string;\n name: string;\n url: string;\n authorization_token?: string;\n enabled: boolean;\n}\n\nexport interface StreamingChatRequest {\n messages: Array<{ role: string; content: string }>;\n model: string;\n max_tokens: number;\n anthropic_api_key: string;\n mcp_servers?: Array<{\n type: string;\n url: string;\n name: string;\n authorization_token?: string;\n }>;\n stream?: boolean;\n thinking?: {\n type: \"enabled\";\n budget_tokens: number;\n };\n tools?: Array<{\n name: string;\n description: string;\n input_schema: any;\n }>;\n}\n\n// NextSteps types for MCP tool result format\nexport interface NextStepProposal {\n id: string;\n title: string;\n description?: string;\n action: {\n type: \"send_message\";\n content: string;\n };\n}\n\nexport interface NextStepsOutput {\n nextSteps: {\n type: \"auto\" | \"manual\";\n priority?: number; // 0-100, higher = more priority\n countdown?: number; // seconds for auto execution\n proposals: NextStepProposal[];\n };\n}\n\n// FileViewer types for MCP resource display\nexport interface RenderHints {\n preferredRenderer: 'native' | 'code' | 'text';\n syntaxHighlight: boolean;\n lineNumbers: boolean;\n}\n\nexport interface ResourcePointer {\n sourceKey: string;\n contentType: string;\n fileType: 'javascript' | 'json' | 'html' | 'markdown' | 'text' | 'css' | 'xml' | 'python' | 'unknown';\n renderHint: RenderHints;\n}\n\nexport interface FileViewerResponse {\n resourcePointer: ResourcePointer;\n sourceKey: string;\n fileType: ResourcePointer['fileType'];\n}\n\nexport interface FileViewerErrorResponse {\n error: string;\n output: null;\n}\n\nexport type FileViewerResult = \n | { output: FileViewerResponse }\n | { error: string; output: null };","// Shared types for Anthropic streaming integration\n\nexport interface StreamEvent {\n event: string;\n data: string;\n}\n\nexport interface MessageStartEvent {\n type: \"message_start\";\n message: {\n id: string;\n type: \"message\";\n role: \"assistant\";\n content: any[];\n model: string;\n stop_reason: null;\n stop_sequence: null;\n usage: {\n input_tokens: number;\n output_tokens: number;\n };\n };\n}\n\nexport interface ContentBlockStartEvent {\n type: \"content_block_start\";\n index: number;\n content_block: {\n type: \"text\" | \"tool_use\";\n id?: string;\n name?: string;\n input?: any;\n text?: string;\n };\n}\n\nexport interface ContentBlockDeltaEvent {\n type: \"content_block_delta\";\n index: number;\n delta: {\n type: \"text_delta\" | \"input_json_delta\" | \"thinking_delta\" | \"signature_delta\";\n text?: string;\n partial_json?: string;\n thinking?: string;\n signature?: string;\n };\n}\n\nexport interface ContentBlockStopEvent {\n type: \"content_block_stop\";\n index: number;\n}\n\nexport interface MessageDeltaEvent {\n type: \"message_delta\";\n delta: {\n stop_reason?: string;\n stop_sequence?: string;\n };\n usage: {\n output_tokens: number;\n };\n}\n\nexport interface MessageStopEvent {\n type: \"message_stop\";\n}\n\nexport interface PingEvent {\n type: \"ping\";\n}\n\nexport interface ErrorEvent {\n type: \"error\";\n error: {\n type: string;\n message: string;\n };\n}\n\nexport type AnthropicStreamEvent =\n | MessageStartEvent\n | ContentBlockStartEvent\n | ContentBlockDeltaEvent\n | ContentBlockStopEvent\n | MessageDeltaEvent\n | MessageStopEvent\n | PingEvent\n | ErrorEvent;\n\nexport interface ChatMessage {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp: number;\n}\n\nexport interface MCPPrompt {\n name: string;\n description?: string;\n serverName: string;\n serverId: string;\n arguments?: Array<{\n name: string;\n description?: string;\n required?: boolean;\n }>;\n}\n\nexport interface MCPTool {\n name: string;\n description?: string;\n serverName: string;\n serverId: string;\n inputSchema?: any;\n}\n\nexport interface MCPServerConfig {\n id: string;\n name: string;\n url: string;\n authorization_token?: string;\n enabled: boolean;\n}\n\nexport interface StreamingChatRequest {\n messages: Array<{ role: string; content: string }>;\n model: string;\n max_tokens: number;\n anthropic_api_key: string;\n mcp_servers?: Array<{\n type: string;\n url: string;\n name: string;\n authorization_token?: string;\n }>;\n stream?: boolean;\n thinking?: {\n type: \"enabled\";\n budget_tokens: number;\n };\n tools?: Array<{\n name: string;\n description: string;\n input_schema: any;\n }>;\n}\n\n// NextSteps types for MCP tool result format\nexport interface NextStepProposal {\n id: string;\n title: string;\n description?: string;\n action: {\n type: \"send_message\";\n content: string;\n };\n}\n\nexport interface NextStepsOutput {\n nextSteps: {\n type: \"auto\" | \"manual\";\n priority?: number; // 0-100, higher = more priority\n countdown?: number; // seconds for auto execution\n proposals: NextStepProposal[];\n };\n}\n\n// FileViewer types for MCP resource display\nexport interface RenderHints {\n preferredRenderer: \"native\" | \"code\" | \"text\";\n syntaxHighlight: boolean;\n lineNumbers: boolean;\n}\n\nexport interface ResourcePointer {\n uri: string;\n contentType: string;\n fileType: \"javascript\" | \"json\" | \"html\" | \"markdown\" | \"text\" | \"css\" | \"xml\" | \"python\" | \"unknown\";\n renderHint: RenderHints;\n}\n\nexport interface FileViewerResponse {\n resource: ResourcePointer;\n sourceKey: string;\n fileType: ResourcePointer[\"fileType\"];\n}\n\nexport interface FileViewerErrorResponse {\n error: string;\n output: null;\n}\n\nexport type FileViewerResult =\n | { output: FileViewerResponse }\n | { error: string; output: null };","createdAt",["D",1750154689061],"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":452,"_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":453,"_81":454,"_83":455,"_85":25},"tree",[205,207,229,231,232,233,234,235],"files",[205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235],"counts",{"_194":63,"_195":196,"_197":196,"_198":199,"_200":201},"contents",[128,129,130,131,132,133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_57":127},"chat.parc.land",{"_44":188,"_32":189,"_30":190,"_139":-5,"_42":43,"_41":191,"_141":59,"_39":192,"_13":63,"_34":180,"_36":-5,"_24":25,"_144":-5,"_27":193},{"_44":182,"_32":183,"_30":184,"_139":-5,"_42":43,"_41":185,"_141":59,"_39":186,"_13":63,"_34":180,"_36":-5,"_24":25,"_144":-5,"_27":187},{"_44":175,"_32":176,"_30":177,"_139":-5,"_42":43,"_41":178,"_141":59,"_39":179,"_13":63,"_34":180,"_36":-5,"_24":25,"_144":-5,"_27":181},{"_44":168,"_32":169,"_30":170,"_139":-5,"_42":43,"_41":171,"_141":25,"_39":172,"_13":63,"_34":20,"_36":173,"_24":25,"_144":-5,"_27":174},{"_44":161,"_32":162,"_30":163,"_139":-5,"_42":43,"_41":164,"_141":25,"_39":165,"_13":63,"_34":20,"_36":166,"_24":25,"_144":-5,"_27":167},{"_44":154,"_32":155,"_30":156,"_139":-5,"_42":43,"_41":157,"_141":25,"_39":158,"_13":63,"_34":20,"_36":159,"_24":25,"_144":-5,"_27":160},{"_44":146,"_32":147,"_30":148,"_139":-5,"_42":43,"_41":149,"_141":25,"_39":150,"_13":151,"_34":20,"_36":152,"_24":25,"_144":-5,"_27":153},{"_44":136,"_32":137,"_30":138,"_139":-5,"_42":43,"_41":140,"_141":25,"_39":142,"_13":63,"_34":20,"_36":143,"_24":25,"_144":-5,"_27":145},"a4b887b8-4b57-11f0-973a-76b3cceeab13","ResourceViewer-README.md","a4b8892a-4b57-11f0-973a-76b3cceeab13","parentId",740,"latest",["D",1750150024620],"# ResourceViewer Component\n\nThe ResourceViewer component provides intelligent display of file and resource content from MCP (Model Context Protocol) tools with syntax highlighting, fullscreen support, and adaptive rendering.\n\n## Overview\n\nResourceViewer automatically detects when MCP tools return file content references and fetches the actual content for display. It supports multiple rendering modes based on file type and provides a rich viewing experience with syntax highlighting powered by CodeMirror.\n\n## Features\n\n- **🎨 Syntax Highlighting** - Powered by CodeMirror with support for JavaScript, HTML, CSS, JSON, Markdown, Python, XML, and more\n- **📱 Fullscreen Mode** - Toggle fullscreen for better viewing of large files\n- **🔄 Smart Caching** - Caches fetched content for 5 minutes to improve performance\n- **🔁 Retry Mechanism** - Automatic retry functionality when resource fetching fails\n- **📋 Metadata Display** - Shows file type, content type, and source server information\n- **🎯 Adaptive Rendering** - Chooses optimal rendering mode based on file type and hints\n\n## Usage\n\nResourceViewer is automatically triggered when MCP tools return responses matching the `FileViewerResult` schema:\n\n```typescript\n// Example MCP tool response that triggers ResourceViewer\n{\n \"output\": {\n \"resourcePointer\": {\n \"sourceKey\": \"path/to/file.js\",\n \"contentType\": \"application/javascript\", \n \"fileType\": \"javascript\",\n \"renderHint\": {\n \"preferredRenderer\": \"code\",\n \"syntaxHighlight\": true,\n \"lineNumbers\": true\n }\n },\n \"sourceKey\": \"path/to/file.js\",\n \"fileType\": \"javascript\"\n }\n}\n```\n\n## Schema Reference\n\n### FileViewerResult\n\nThe main response type that triggers ResourceViewer:\n\n```typescript\ntype FileViewerResult = \n | { output: FileViewerResponse }\n | { error: string; output: null };\n```\n\n### FileViewerResponse\n\n```typescript\ninterface FileViewerResponse {\n resourcePointer: ResourcePointer;\n sourceKey: string;\n fileType: ResourcePointer['fileType'];\n}\n```\n\n### ResourcePointer\n\n```typescript\ninterface ResourcePointer {\n sourceKey: string; // Path/key to the resource\n contentType: string; // MIME type (e.g., \"application/javascript\")\n fileType: FileType; // Detected file type for syntax highlighting\n renderHint: RenderHints; // Rendering preferences\n}\n```\n\n### RenderHints\n\n```typescript\ninterface RenderHints {\n preferredRenderer: 'native' | 'code' | 'text';\n syntaxHighlight: boolean;\n lineNumbers: boolean;\n}\n```\n\n### Supported File Types\n\n- `javascript` - JavaScript files (.js, .jsx, .ts, .tsx)\n- `html` - HTML files (.html, .htm)\n- `css` - CSS files (.css, .scss, .sass)\n- `json` - JSON files (.json)\n- `markdown` - Markdown files (.md, .mdx)\n- `python` - Python files (.py)\n- `xml` - XML files (.xml, .svg)\n- `text` - Plain text files\n- `unknown` - Fallback for unrecognized types\n\n## Rendering Modes\n\n### Code Mode (`preferredRenderer: 'code'`)\n- Uses CodeMirror editor with syntax highlighting\n- Supports line numbers when `lineNumbers: true`\n- Best for source code files\n\n### Native Mode (`preferredRenderer: 'native'`)\n- Renders HTML/XML content in an iframe\n- Provides native browser rendering\n- Best for HTML documents and SVG files\n\n### Text Mode (`preferredRenderer: 'text'`)\n- Plain text display with optional line numbers\n- Best for configuration files and plain text\n\n## Integration\n\n### Server Name Resolution\n\nResourceViewer automatically resolves the MCP server name by matching the `tool_use_id` from `mcp_tool_result` blocks with corresponding `mcp_tool_use` blocks:\n\n```typescript\n// In Message.tsx\nconst toolUseBlock = findToolUseBlock(blocks, blk.tool_use_id);\nconst serverName = toolUseBlock?.server_name;\n```\n\n### Resource Fetching\n\nResources are fetched using the MCP client's `readResource()` method:\n\n```typescript\nconst client = mcpClients.find(client => \n client.serverInfo?.name === serverName\n);\nconst content = await client.readResource(sourceKey);\n```\n\n### Caching Strategy\n\n- Resources are cached in component state for 5 minutes\n- Cache key format: `${serverName}_${sourceKey}`\n- Cache is cleared on retry to force fresh fetch\n\n## Error Handling\n\nResourceViewer provides comprehensive error handling:\n\n1. **Parse Errors** - Invalid FileViewerResult schema\n2. **Server Not Found** - MCP server unavailable\n3. **Resource Not Found** - Resource doesn't exist\n4. **Network Errors** - Connection issues\n\nError states show:\n- Clear error message\n- Retry button\n- Expandable metadata for debugging\n\n## Styling\n\nResourceViewer uses CSS classes for styling:\n\n- `.resource-viewer` - Main container\n- `.resource-viewer-header` - Header with metadata and controls\n- `.resource-viewer-content` - Content area\n- `.resource-viewer-error` - Error state styling\n- `.resource-viewer.fullscreen` - Fullscreen mode\n\n## Examples\n\n### JavaScript File Display\n\n```json\n{\n \"output\": {\n \"resourcePointer\": {\n \"sourceKey\": \"src/components/App.tsx\",\n \"contentType\": \"application/typescript\",\n \"fileType\": \"javascript\",\n \"renderHint\": {\n \"preferredRenderer\": \"code\",\n \"syntaxHighlight\": true,\n \"lineNumbers\": true\n }\n },\n \"sourceKey\": \"src/components/App.tsx\",\n \"fileType\": \"javascript\"\n }\n}\n```\n\n### HTML Document Display\n\n```json\n{\n \"output\": {\n \"resourcePointer\": {\n \"sourceKey\": \"public/index.html\",\n \"contentType\": \"text/html\",\n \"fileType\": \"html\", \n \"renderHint\": {\n \"preferredRenderer\": \"native\",\n \"syntaxHighlight\": false,\n \"lineNumbers\": false\n }\n },\n \"sourceKey\": \"public/index.html\",\n \"fileType\": \"html\"\n }\n}\n```\n\n### Configuration File Display\n\n```json\n{\n \"output\": {\n \"resourcePointer\": {\n \"sourceKey\": \"package.json\",\n \"contentType\": \"application/json\",\n \"fileType\": \"json\",\n \"renderHint\": {\n \"preferredRenderer\": \"code\",\n \"syntaxHighlight\": true,\n \"lineNumbers\": true\n }\n },\n \"sourceKey\": \"package.json\", \n \"fileType\": \"json\"\n }\n}\n```\n\n## Implementation Notes\n\n- ResourceViewer is integrated into the Message component's `renderAnthropicBlocks()` function\n- Detection happens in the `mcp_tool_result` case after NextSteps and before HTML detection\n- CodeMirror extensions are loaded dynamically based on file type\n- Fullscreen mode uses fixed positioning with high z-index\n- Mobile-responsive design with touch-friendly controls\n\n## Dependencies\n\n- **CodeMirror 6** - Syntax highlighting and code editing\n- **React 18** - Component framework\n- **MCP Client** - Resource fetching from MCP servers\n\n## Future Enhancements\n\n- **Binary File Support** - Display images, PDFs, etc.\n- **Diff Viewer** - Compare file versions\n- **Search/Find** - In-file search functionality\n- **Download Support** - Save resources locally\n- **Collaborative Editing** - Real-time editing capabilities","label",[137],"9029ab56-4b57-11f0-a8ba-76b3cceeab13","README.md","2bc4d286-3cdd-11f0-9e50-9e149126039e",739,["D",1750149990127],39,"# 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- **🔄 NextSteps Auto-Execution** - MCP tools can propose follow-up actions with automatic or manual execution\n- **📄 Resource Viewer** - MCP tools can display file content with syntax highlighting and fullscreen support\n- Full-screen mobile-optimized chat interface\n- Direct client-side Anthropic API integration with server-side streaming proxy\n- **Model selection** - Choose between different Claude models (3.5 Sonnet, 3.5 Haiku, 3 Opus, etc.) without clearing chat history\n- Configurable MCP servers with localStorage persistence\n- **🔍 Automatic MCP Server Status Checking** - Servers are automatically tested at startup with progressive disclosure of status, tools, prompts, and error details\n- **📊 MCP Status Dashboard** - Expandable status panel showing server connectivity, available prompts, available tools, and error details\n- **Clean footer layout** with text-based settings and clear chat links positioned alongside status text\n- **Enhanced MCP response handling** with collapsible sections for complex tool use and results\n- **Command palette tool execution** - MCP tool results from command palette are displayed as user messages with the same MCP tool use/result structure as assistant messages\n- **Persistent chat history** - messages are saved to localStorage and restored on page load\n- **Structured display of MCP tool calls and results** to prevent truncation\n- **Frontend MCP server testing** - test button for each MCP server with visual status indicators (✅/❌)\n- **Frontend MCP prompt fetching** - prompts are fetched directly from MCP servers with caching support\n- **Frontend MCP tool fetching** - tools are fetched directly from MCP servers with caching support\n\n## Streaming Implementation\n\nThis app implements Anthropic's official streaming guide using:\n- Server-Sent Events (SSE) for real-time communication\n- Proper event parsing (`message_start`, `content_block_delta`, `message_stop`, etc.)\n- Content block reassembly for text, tool use, and thinking responses\n- Error handling and keep-alive support\n- Token usage tracking\n- Support for all delta types (text, JSON, thinking)\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server with static file serving\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React app entry point\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── StreamingChat.tsx # Real-time streaming chat interface\n│ │ ├── Settings.tsx # Settings flyout\n│ │ ├── MCPStatus.tsx # MCP server status dashboard with progressive disclosure\n│ │ ├── CommandPalette.tsx # MCP prompt command palette\n│ │ ├── HTMLRenderer.tsx # HTML output renderer with MCP context\n│ │ ├── NextSteps.tsx # NextSteps auto-execution component\n│ │ ├── ResourceViewer.tsx # File/resource viewer with syntax highlighting\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- `auto_execute_next_steps`: Global setting for NextSteps auto-execution (defaults to true)\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. Configure NextSteps auto-execution in settings (enabled by default)\n6. Start chatting with Claude and watch responses stream in real-time!\n7. Use the stop button (⏹️) to interrupt streaming at any time\n8. Switch models anytime in settings without losing your chat history\n9. Your chat history and settings will be automatically saved and restored when you return\n10. When MCP tools return NextSteps proposals, they'll appear as interactive pills that can auto-execute or require manual selection\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- **NextSteps Auto-Execution**: MCP tools can propose follow-up actions that execute automatically after a countdown or require manual selection. See [NextSteps-README.md](./NextSteps-README.md) for implementation details.\n- **Resource Viewer**: MCP tools can display file and resource content with syntax highlighting, fullscreen support, and intelligent rendering based on file type\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",[147],"f23a9f50-4b00-11f0-affa-76b3cceeab13","NextSteps-README.md","f23aa00e-4b00-11f0-affa-76b3cceeab13",709,["D",1750112788444],"# NextSteps Feature Documentation\n\n## Overview\n\nNextSteps is a dynamic interaction feature that allows MCP (Model Context Protocol) servers to propose follow-up actions to users after tool execution. These proposals can be automatically executed after a countdown or manually selected by the user, enabling fluid conversational workflows and guided user experiences.\n\n## User Experience\n\n### Visual Design\n- **Inline Pills**: NextSteps appear as pill-shaped buttons within assistant messages\n- **Progress Indicators**: Visual progress bars show countdown timers (auto) or priority levels (manual)\n- **Countdown Display**: Numeric countdown badge shows remaining seconds for auto-execution\n- **Cancellation**: User interaction (hover, click, typing) cancels auto-execution\n\n### Interaction Modes\n1. **Auto Execution**: Proposals with `type: \"auto\"` automatically execute after countdown\n2. **Manual Selection**: Proposals with `type: \"manual\"` require user click to execute\n3. **Priority Display**: Manual proposals show static progress bars indicating relative priority\n\n### Global Settings\n- **Auto-Execution Toggle**: Users can globally enable/disable auto-execution in settings\n- **Per-Result Override**: Individual NextSteps can specify \"auto\" or \"manual\" regardless of global setting\n- **Cancellation**: Any user interaction cancels pending auto-execution\n\n## MCP Server Implementation Spec\n\n### Response Format\n\nMCP servers should return NextSteps data in their tool result's `output.nextSteps` field:\n\n```json\n{\n \"content\": [\n {\n \"type\": \"text\", \n \"text\": \"{\\\"output\\\": {\\\"nextSteps\\\": {...}}}\"\n }\n ]\n}\n```\n\n### NextSteps Schema\n\n```typescript\ninterface NextStepsOutput {\n nextSteps: {\n type: \"auto\" | \"manual\"; // Execution mode\n priority?: number; // 0-100, higher = more priority\n countdown?: number; // seconds for auto execution\n proposals: NextStepProposal[]; // Array of action proposals\n };\n}\n\ninterface NextStepProposal {\n id: string; // Unique identifier\n title: string; // Display name (required)\n description?: string; // Optional tooltip/subtitle\n action: {\n type: \"send_message\"; // Currently only message sending supported\n content: string; // Message content to send\n };\n}\n```\n\n### Implementation Examples\n\n#### Basic Auto-Execution Example\n```json\n{\n \"output\": {\n \"nextSteps\": {\n \"type\": \"auto\",\n \"countdown\": 5,\n \"proposals\": [\n {\n \"id\": \"continue_analysis\",\n \"title\": \"Continue Analysis\",\n \"description\": \"Analyze the next data segment\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"Please analyze the next segment of data using the same methodology.\"\n }\n }\n ]\n }\n }\n}\n```\n\n#### Multiple Manual Proposals with Priority\n```json\n{\n \"output\": {\n \"nextSteps\": {\n \"type\": \"manual\",\n \"priority\": 75,\n \"proposals\": [\n {\n \"id\": \"save_results\",\n \"title\": \"Save Results\",\n \"description\": \"Save current analysis to file\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"Please save these results to a file named 'analysis_results.json'\"\n }\n },\n {\n \"id\": \"export_chart\",\n \"title\": \"Export Chart\", \n \"description\": \"Generate visualization\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"Create a chart visualization of these results\"\n }\n },\n {\n \"id\": \"email_summary\",\n \"title\": \"Email Summary\",\n \"description\": \"Send summary via email\",\n \"action\": {\n \"type\": \"send_message\", \n \"content\": \"Compose an email summary of this analysis for stakeholders\"\n }\n }\n ]\n }\n }\n}\n```\n\n#### Conditional Auto-Execution\n```json\n{\n \"output\": {\n \"nextSteps\": {\n \"type\": \"auto\",\n \"countdown\": 10,\n \"priority\": 90,\n \"proposals\": [\n {\n \"id\": \"retry_failed\",\n \"title\": \"Retry Failed Operations\",\n \"description\": \"Automatically retry the 3 failed operations\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"Retry the failed operations: upload_file, process_data, send_notification\"\n }\n }\n ]\n }\n }\n}\n```\n\n### Best Practices for MCP Servers\n\n#### When to Use NextSteps\n- **Multi-step workflows**: Guide users through complex processes\n- **Error recovery**: Offer automatic retry or alternative approaches \n- **Data processing**: Suggest next analysis steps or data transformations\n- **File operations**: Propose saving, exporting, or sharing results\n- **Iterative tasks**: Continue processing additional data segments\n\n#### Choosing Execution Type\n- **Use `\"auto\"`** for:\n - Obvious next steps in a workflow\n - Error recovery actions\n - Continuing interrupted processes\n - Time-sensitive operations\n- **Use `\"manual\"`** for:\n - Destructive operations (delete, overwrite)\n - User preference decisions\n - Multiple valid alternatives\n - Final confirmation steps\n\n#### Setting Appropriate Timeouts\n- **Short (3-5s)**: Obvious continuations, error retries\n- **Medium (5-10s)**: Workflow steps, data processing\n- **Long (10-15s)**: Complex operations, user review time\n- **No timeout**: Use manual mode instead\n\n#### Priority Guidelines\n- **90-100**: Critical/urgent actions\n- **70-89**: Important workflow steps \n- **50-69**: Helpful suggestions\n- **30-49**: Optional enhancements\n- **10-29**: Nice-to-have actions\n\n### Error Handling\n\nIf NextSteps data is malformed, the client will:\n1. Log a warning to console\n2. Fall back to displaying the raw tool result\n3. Continue normal operation\n\nServers should validate their NextSteps output to ensure:\n- Required fields are present\n- IDs are unique within the proposal set\n- Countdown values are reasonable (1-60 seconds)\n- Priority values are within 0-100 range\n\n### Integration with Existing Tools\n\nNextSteps works alongside existing MCP tool capabilities:\n- **HTML Output**: Can be combined with `output.html` for rich displays\n- **File Operations**: Suggest follow-up actions after file creation/modification\n- **API Calls**: Propose next API operations or data processing steps\n- **Database Operations**: Suggest queries, updates, or analysis steps\n\n### Client Implementation Notes\n\nThe NextSteps feature is implemented in the chat client with:\n- Global auto-execution setting in user preferences\n- Per-message override capability\n- User interaction cancellation (hover, click, typing)\n- Visual progress indicators and countdown timers\n- Persistent storage of user preferences\n- Mobile-responsive pill-based UI\n\n### Future Enhancements\n\nPlanned future capabilities:\n- **Action Types**: Support for file downloads, API calls, tool execution\n- **Conditional Logic**: Proposals based on user context or previous actions\n- **Scheduling**: Delayed execution beyond immediate countdown\n- **Branching**: Multiple workflow paths with decision points\n- **Templates**: Reusable NextSteps patterns for common workflows\n\n## Testing Your Implementation\n\n### Manual Testing\n1. Create a tool that returns NextSteps in the specified format\n2. Test both auto and manual execution modes\n3. Verify countdown timers work correctly\n4. Test user cancellation by interacting during countdown\n5. Verify priority display for manual proposals\n\n### Example Test Tool\n```python\ndef create_test_nextsteps():\n return {\n \"output\": {\n \"nextSteps\": {\n \"type\": \"auto\",\n \"countdown\": 5,\n \"proposals\": [\n {\n \"id\": \"test_action\",\n \"title\": \"Test Action\",\n \"description\": \"This is a test NextSteps proposal\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"NextSteps test completed successfully!\"\n }\n }\n ]\n }\n }\n }\n```\n\n### Validation Checklist\n- [ ] NextSteps object structure matches schema\n- [ ] All required fields are present\n- [ ] Proposal IDs are unique\n- [ ] Countdown values are reasonable (1-60s)\n- [ ] Priority values are 0-100\n- [ ] Action content is meaningful\n- [ ] Titles are concise and descriptive\n- [ ] Descriptions provide helpful context\n\n## Support and Feedback\n\nFor questions about implementing NextSteps in your MCP server:\n- Review the examples in this documentation\n- Test with the provided validation checklist\n- Check browser console for any parsing errors\n- Ensure JSON structure exactly matches the schema\n\nThe NextSteps feature enhances user experience by providing intelligent workflow guidance while maintaining user control and preventing unwanted automatic actions.",[155],"2bef5d30-4b01-11f0-95ed-76b3cceeab13","NextSteps-Examples.md","2bef5dee-4b01-11f0-95ed-76b3cceeab13",714,["D",1750112885258],"# NextSteps Implementation Examples\n\nThis document provides practical examples of how to implement NextSteps in your MCP server tools.\n\n## Example 1: File Analysis Tool with Auto-Continue\n\n```python\ndef analyze_file(file_path):\n \"\"\"Analyze a file and suggest next steps\"\"\"\n \n # Perform analysis\n analysis_result = perform_analysis(file_path)\n \n # Create NextSteps for automatic continuation\n next_steps = {\n \"nextSteps\": {\n \"type\": \"auto\",\n \"countdown\": 8,\n \"proposals\": [\n {\n \"id\": \"analyze_next_section\",\n \"title\": \"Analyze Next Section\",\n \"description\": \"Continue with the next data segment\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": f\"Please analyze the next section of {file_path} using the same methodology.\"\n }\n }\n ]\n }\n }\n \n return {\n \"content\": [\n {\n \"type\": \"text\",\n \"text\": json.dumps({\n \"analysis\": analysis_result,\n \"output\": next_steps\n })\n }\n ]\n }\n```\n\n## Example 2: Data Processing with Multiple Options\n\n```python\ndef process_data(dataset_name):\n \"\"\"Process data and offer multiple next steps\"\"\"\n \n processing_result = process_dataset(dataset_name)\n \n next_steps = {\n \"nextSteps\": {\n \"type\": \"manual\",\n \"priority\": 80,\n \"proposals\": [\n {\n \"id\": \"save_results\",\n \"title\": \"Save Results\",\n \"description\": \"Save processed data to file\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": f\"Save the processed results from {dataset_name} to a CSV file named 'processed_{dataset_name}.csv'\"\n }\n },\n {\n \"id\": \"create_visualization\",\n \"title\": \"Create Chart\",\n \"description\": \"Generate data visualization\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": f\"Create a bar chart visualization of the processed {dataset_name} data showing the top 10 categories\"\n }\n },\n {\n \"id\": \"statistical_analysis\",\n \"title\": \"Run Statistics\",\n \"description\": \"Perform statistical analysis\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": f\"Perform statistical analysis on the processed {dataset_name} data including mean, median, standard deviation, and correlation matrix\"\n }\n }\n ]\n }\n }\n \n return {\n \"content\": [\n {\n \"type\": \"text\", \n \"text\": json.dumps({\n \"processing_summary\": processing_result,\n \"output\": next_steps\n })\n }\n ]\n }\n```\n\n## Example 3: Error Recovery with Auto-Retry\n\n```python\ndef upload_file(file_path, destination):\n \"\"\"Upload file with automatic retry on failure\"\"\"\n \n try:\n result = perform_upload(file_path, destination)\n return success_response(result)\n except UploadError as e:\n # Offer automatic retry\n next_steps = {\n \"nextSteps\": {\n \"type\": \"auto\",\n \"countdown\": 5,\n \"priority\": 95,\n \"proposals\": [\n {\n \"id\": \"retry_upload\",\n \"title\": \"Retry Upload\",\n \"description\": \"Automatically retry the failed upload\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": f\"Retry uploading {file_path} to {destination} with increased timeout settings\"\n }\n }\n ]\n }\n }\n \n return {\n \"content\": [\n {\n \"type\": \"text\",\n \"text\": json.dumps({\n \"error\": str(e),\n \"output\": next_steps\n })\n }\n ]\n }\n```\n\n## Example 4: Workflow Completion with Manual Confirmation\n\n```python\ndef finalize_report(report_id):\n \"\"\"Finalize report and offer publishing options\"\"\"\n \n report = generate_final_report(report_id)\n \n next_steps = {\n \"nextSteps\": {\n \"type\": \"manual\",\n \"priority\": 70,\n \"proposals\": [\n {\n \"id\": \"publish_report\",\n \"title\": \"Publish Report\",\n \"description\": \"Make report available to stakeholders\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": f\"Publish report {report_id} to the stakeholder portal and send notification emails\"\n }\n },\n {\n \"id\": \"schedule_presentation\",\n \"title\": \"Schedule Presentation\",\n \"description\": \"Set up presentation meeting\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": f\"Schedule a presentation meeting for report {report_id} with the project team for next week\"\n }\n },\n {\n \"id\": \"archive_data\",\n \"title\": \"Archive Source Data\",\n \"description\": \"Move source data to archive\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": f\"Archive the source data used for report {report_id} to long-term storage\"\n }\n }\n ]\n }\n }\n \n return {\n \"content\": [\n {\n \"type\": \"text\",\n \"text\": json.dumps({\n \"report\": report,\n \"output\": next_steps\n })\n }\n ]\n }\n```\n\n## Example 5: Conditional NextSteps Based on Results\n\n```python\ndef analyze_system_health():\n \"\"\"Analyze system health and suggest appropriate actions\"\"\"\n \n health_status = check_system_health()\n \n if health_status[\"critical_issues\"]:\n # Critical issues - auto-execute immediate fixes\n next_steps = {\n \"nextSteps\": {\n \"type\": \"auto\",\n \"countdown\": 3,\n \"priority\": 100,\n \"proposals\": [\n {\n \"id\": \"emergency_restart\",\n \"title\": \"Emergency Restart\",\n \"description\": \"Restart critical services immediately\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"Execute emergency restart of critical services: database, web server, and cache\"\n }\n }\n ]\n }\n }\n elif health_status[\"warnings\"]:\n # Warnings - offer manual intervention options\n next_steps = {\n \"nextSteps\": {\n \"type\": \"manual\",\n \"priority\": 60,\n \"proposals\": [\n {\n \"id\": \"investigate_warnings\",\n \"title\": \"Investigate Warnings\",\n \"description\": \"Deep dive into warning conditions\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"Investigate the warning conditions in detail and provide recommendations\"\n }\n },\n {\n \"id\": \"schedule_maintenance\",\n \"title\": \"Schedule Maintenance\",\n \"description\": \"Plan maintenance window\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"Schedule a maintenance window to address the identified warning conditions\"\n }\n }\n ]\n }\n }\n else:\n # All good - suggest optimization\n next_steps = {\n \"nextSteps\": {\n \"type\": \"manual\",\n \"priority\": 30,\n \"proposals\": [\n {\n \"id\": \"optimize_performance\",\n \"title\": \"Optimize Performance\",\n \"description\": \"Look for optimization opportunities\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"Analyze system performance metrics and suggest optimization opportunities\"\n }\n }\n ]\n }\n }\n \n return {\n \"content\": [\n {\n \"type\": \"text\",\n \"text\": json.dumps({\n \"health_status\": health_status,\n \"output\": next_steps\n })\n }\n ]\n }\n```\n\n## Example 6: Combining NextSteps with HTML Output\n\n```python\ndef create_dashboard():\n \"\"\"Create dashboard with interactive NextSteps\"\"\"\n \n dashboard_html = generate_dashboard_html()\n \n next_steps = {\n \"nextSteps\": {\n \"type\": \"manual\",\n \"priority\": 50,\n \"proposals\": [\n {\n \"id\": \"refresh_data\",\n \"title\": \"Refresh Data\",\n \"description\": \"Update dashboard with latest data\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"Refresh the dashboard with the latest data from all connected sources\"\n }\n },\n {\n \"id\": \"export_pdf\",\n \"title\": \"Export PDF\",\n \"description\": \"Generate PDF report\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"Export the current dashboard as a PDF report for offline viewing\"\n }\n },\n {\n \"id\": \"share_dashboard\",\n \"title\": \"Share Dashboard\",\n \"description\": \"Generate sharing link\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"Create a secure sharing link for this dashboard that expires in 7 days\"\n }\n }\n ]\n }\n }\n \n return {\n \"content\": [\n {\n \"type\": \"text\",\n \"text\": json.dumps({\n \"output\": {\n \"html\": dashboard_html,\n **next_steps\n }\n })\n }\n ]\n }\n```\n\n## Testing Your NextSteps Implementation\n\n### Quick Test Tool\n\n```python\ndef test_nextsteps():\n \"\"\"Simple test tool for NextSteps functionality\"\"\"\n \n next_steps = {\n \"nextSteps\": {\n \"type\": \"auto\",\n \"countdown\": 5,\n \"proposals\": [\n {\n \"id\": \"test_success\",\n \"title\": \"Test Successful\",\n \"description\": \"NextSteps implementation is working\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"🎉 NextSteps test completed successfully! The feature is working correctly.\"\n }\n }\n ]\n }\n }\n \n return {\n \"content\": [\n {\n \"type\": \"text\",\n \"text\": json.dumps({\n \"message\": \"NextSteps test initiated. This should auto-execute in 5 seconds.\",\n \"output\": next_steps\n })\n }\n ]\n }\n```\n\n### Validation Helper\n\n```python\ndef validate_nextsteps(nextsteps_data):\n \"\"\"Validate NextSteps data structure\"\"\"\n \n required_fields = [\"type\", \"proposals\"]\n optional_fields = [\"priority\", \"countdown\"]\n \n # Check required fields\n for field in required_fields:\n if field not in nextsteps_data:\n raise ValueError(f\"Missing required field: {field}\")\n \n # Validate type\n if nextsteps_data[\"type\"] not in [\"auto\", \"manual\"]:\n raise ValueError(\"Type must be 'auto' or 'manual'\")\n \n # Validate proposals\n if not isinstance(nextsteps_data[\"proposals\"], list) or len(nextsteps_data[\"proposals\"]) == 0:\n raise ValueError(\"Proposals must be a non-empty list\")\n \n # Validate each proposal\n for proposal in nextsteps_data[\"proposals\"]:\n required_proposal_fields = [\"id\", \"title\", \"action\"]\n for field in required_proposal_fields:\n if field not in proposal:\n raise ValueError(f\"Proposal missing required field: {field}\")\n \n if proposal[\"action\"][\"type\"] != \"send_message\":\n raise ValueError(\"Only 'send_message' action type is currently supported\")\n \n if \"content\" not in proposal[\"action\"]:\n raise ValueError(\"Action must include content field\")\n \n # Validate optional fields\n if \"priority\" in nextsteps_data:\n priority = nextsteps_data[\"priority\"]\n if not isinstance(priority, (int, float)) or priority < 0 or priority > 100:\n raise ValueError(\"Priority must be a number between 0 and 100\")\n \n if \"countdown\" in nextsteps_data:\n countdown = nextsteps_data[\"countdown\"]\n if not isinstance(countdown, (int, float)) or countdown < 1 or countdown > 60:\n raise ValueError(\"Countdown must be a number between 1 and 60 seconds\")\n \n return True\n```\n\n## Best Practices Summary\n\n1. **Use auto-execution sparingly** - Only for obvious next steps or error recovery\n2. **Keep countdown times reasonable** - 3-10 seconds for most use cases\n3. **Provide clear, descriptive titles** - Users should understand what will happen\n4. **Include helpful descriptions** - Additional context in tooltips\n5. **Validate your data structure** - Use the validation helper above\n6. **Test both execution modes** - Verify auto and manual modes work correctly\n7. **Consider user context** - Tailor proposals to the current workflow state\n8. **Handle errors gracefully** - Malformed NextSteps should not break the client\n9. **Use appropriate priorities** - Guide user attention to most important actions\n10. **Combine with other outputs** - NextSteps work well with HTML and text results",[162],"5fcd6a16-4b01-11f0-9a42-76b3cceeab13","IMPLEMENTATION-SUMMARY.md","5fcd6ae8-4b01-11f0-9a42-76b3cceeab13",716,["D",1750112972278],"# NextSteps Feature Implementation Summary\n\n## Overview\n\nSuccessfully implemented the NextSteps feature for dynamic interaction in the Anthropic Streaming Chat with MCP application. This feature allows MCP servers to propose follow-up actions that can be automatically executed after a countdown or manually selected by users.\n\n## Implementation Details\n\n### 1. Type Definitions (`shared/types.ts`)\n- Added `NextStepProposal` interface for individual action proposals\n- Added `NextStepsOutput` interface for the complete NextSteps data structure\n- Integrated with existing MCP tool result format\n\n### 2. NextSteps Component (`frontend/components/NextSteps.tsx`)\n- **Visual Design**: Pill-shaped buttons with progress indicators\n- **Auto-Execution**: Countdown timer with automatic proposal execution\n- **Manual Selection**: Click-to-execute for manual proposals\n- **User Interaction**: Hover/click cancels auto-execution\n- **Progress Indicators**: \n - Animated progress bars for countdown (blue)\n - Static progress bars for priority indication (gray)\n- **Mobile Responsive**: Stacks vertically on small screens\n\n### 3. Message Component Integration (`frontend/components/Message.tsx`)\n- Enhanced `mcp_tool_result` handling to detect NextSteps output\n- Renders NextSteps component when `output.nextSteps` is found\n- Maintains existing HTML output functionality\n- Passes message sending callback for proposal execution\n\n### 4. App Configuration (`frontend/components/App.tsx`)\n- Added `autoExecuteNextSteps` boolean to AppConfig interface\n- Integrated with localStorage persistence\n- Defaults to `true` (enabled)\n\n### 5. Settings Integration (`frontend/components/Settings.tsx`)\n- Added toggle switch for NextSteps auto-execution\n- Clear description of functionality\n- Persisted in localStorage as `auto_execute_next_steps`\n\n### 6. StreamingChat Integration (`frontend/components/StreamingChat.tsx`)\n- Modified `fireSend` function to accept optional string parameter\n- Passes NextSteps callbacks to MessageComponent\n- Supports NextSteps execution during live streaming\n- Maintains existing input handling for manual messages\n\n### 7. Styling (`frontend/style.css`)\n- Comprehensive CSS for NextSteps components\n- Progress bar animations and transitions\n- Mobile-responsive design\n- Consistent with existing design system\n\n## Key Features Implemented\n\n### ✅ Custom MCP Tool Result Format\n- NextSteps detected via `output.nextSteps` in MCP tool results\n- JSON parsing with graceful error handling\n- Maintains compatibility with existing HTML output\n\n### ✅ Global Setting with Per-Result Override\n- Global toggle in settings (default: enabled)\n- Per-result `type` field overrides global setting\n- User interaction cancels auto-execution\n\n### ✅ Visual Priority Indication\n- Progress bars show countdown for auto-execution\n- Static progress bars indicate priority for manual proposals\n- Color coding: blue for countdown, gray for priority\n\n### ✅ Inline Content Blocks\n- Pills appear within assistant messages\n- Integrated with existing message rendering system\n- Maintains message persistence and history\n\n### ✅ User Interaction Cancellation\n- Hover over NextSteps cancels auto-execution\n- Click on any proposal cancels auto-execution\n- Typing in chat input cancels auto-execution\n- Visual feedback when cancelled\n\n## Technical Architecture\n\n### Data Flow\n1. MCP server returns tool result with `output.nextSteps`\n2. Message component detects NextSteps during rendering\n3. NextSteps component manages countdown and user interaction\n4. Proposal execution triggers message sending via callback\n5. New user message added to chat history\n\n### State Management\n- NextSteps component manages local countdown state\n- User interaction state prevents auto-execution\n- Global setting stored in localStorage\n- No additional global state required\n\n### Error Handling\n- Malformed NextSteps data falls back to raw display\n- JSON parsing errors logged to console\n- Missing required fields handled gracefully\n- Client continues normal operation on errors\n\n## Files Modified/Created\n\n### New Files\n- `/frontend/components/NextSteps.tsx` - Main NextSteps component\n- `/NextSteps-README.md` - Feature documentation and MCP server spec\n- `/NextSteps-Examples.md` - Implementation examples for MCP servers\n- `/IMPLEMENTATION-SUMMARY.md` - This summary document\n\n### Modified Files\n- `/shared/types.ts` - Added NextSteps type definitions\n- `/frontend/components/App.tsx` - Added autoExecuteNextSteps config\n- `/frontend/components/Message.tsx` - Added NextSteps detection and rendering\n- `/frontend/components/Settings.tsx` - Added auto-execution toggle\n- `/frontend/components/StreamingChat.tsx` - Modified fireSend for NextSteps\n- `/frontend/style.css` - Added NextSteps styling\n- `/README.md` - Updated feature list and documentation\n\n## Testing Recommendations\n\n### Manual Testing\n1. Create MCP tool that returns NextSteps with `type: \"auto\"`\n2. Verify countdown timer appears and executes automatically\n3. Test user interaction cancellation (hover, click)\n4. Create NextSteps with `type: \"manual\"` and verify manual execution\n5. Test priority display for manual proposals\n6. Verify global setting toggle in Settings\n7. Test mobile responsiveness\n\n### Example Test Data\n```json\n{\n \"output\": {\n \"nextSteps\": {\n \"type\": \"auto\",\n \"countdown\": 5,\n \"proposals\": [\n {\n \"id\": \"test_action\",\n \"title\": \"Test Action\",\n \"description\": \"This is a test NextSteps proposal\",\n \"action\": {\n \"type\": \"send_message\",\n \"content\": \"NextSteps test completed successfully!\"\n }\n }\n ]\n }\n }\n}\n```\n\n## Future Enhancements\n\n### Planned Features\n- **Additional Action Types**: File downloads, API calls, direct tool execution\n- **Conditional Logic**: Proposals based on user context or chat history\n- **Scheduling**: Delayed execution beyond immediate countdown\n- **Branching Workflows**: Multiple workflow paths with decision points\n- **Templates**: Reusable NextSteps patterns for common use cases\n\n### Potential Improvements\n- **Visual Enhancements**: More sophisticated progress indicators\n- **Sound Notifications**: Audio cues for countdown completion\n- **Keyboard Navigation**: Arrow keys to select proposals\n- **Batch Operations**: Multiple proposals executed in sequence\n- **History Integration**: Ability to retry/branch from previous NextSteps\n\n## Compliance with Requirements\n\n### ✅ Custom MCP Tool Result Format\nImplemented as `output.nextSteps` field in MCP tool results, similar to existing HTML renderer pattern.\n\n### ✅ Global Setting + Per-Result Control\nGlobal toggle in settings with per-result `type` override. User interaction cancels auto-execution.\n\n### ✅ Visual Priority Indication\nProgress bars show countdown (animated) or priority (static) with appropriate visual cues.\n\n### ✅ Inline Content Blocks\nPills appear within assistant messages, maintaining existing message persistence.\n\n### ✅ User Interaction Cancellation\nHover, click, or typing cancels auto-execution with visual feedback.\n\n## Conclusion\n\nThe NextSteps feature has been successfully implemented according to all specified requirements. The implementation provides a robust, user-friendly interface for dynamic chat interactions while maintaining the existing application architecture and user experience. MCP server developers can now create engaging, guided workflows that enhance user productivity and provide intelligent automation options.\n\nThe feature is ready for production use and provides a solid foundation for future enhancements and workflow automation capabilities.",[169],"d0d818ac-3d49-11f0-afd9-76b3cceeab13","shared","d2bf992b-f210-4f83-bea3-aec8e3e2caaa",55,["D",1748604769414],"directory",[176],"2f3fab3e-3cdd-11f0-acd6-9e149126039e","frontend","43895adc-f88f-4b64-90b5-2b707f50c067",2,["D",1748558112658],[183],"7471d038-3cdd-11f0-8caa-9e149126039e","backend","b0b9068e-33c0-4fad-8bcf-5a3136836657",9,["D",1748558228747],[189],"pulls","branches",1,"forks","envVars",{"_202":63,"_204":63},"connections",{"_202":63,"_203":63},"count","unfilledCount","emptyCount",{"_44":188,"_32":189,"_30":190,"_139":-5,"_42":43,"_41":191,"_141":59,"_39":449,"_13":63,"_34":180,"_36":-5,"_24":25,"_144":-5,"_237":450,"_27":451},{"_44":440,"_32":441,"_30":57,"_139":190,"_42":43,"_41":442,"_141":59,"_39":443,"_13":444,"_34":445,"_36":446,"_24":25,"_144":-5,"_237":447,"_27":448},{"_44":182,"_32":183,"_30":184,"_139":-5,"_42":43,"_41":185,"_141":59,"_39":437,"_13":63,"_34":180,"_36":-5,"_24":25,"_144":-5,"_237":438,"_27":439},{"_44":432,"_32":360,"_30":353,"_139":184,"_42":43,"_41":433,"_141":59,"_39":434,"_13":63,"_34":180,"_36":-5,"_24":25,"_144":-5,"_237":435,"_27":436},{"_44":423,"_32":424,"_30":425,"_139":353,"_42":43,"_41":426,"_141":25,"_39":427,"_13":428,"_34":35,"_36":429,"_24":25,"_144":-5,"_237":430,"_27":431},{"_44":414,"_32":415,"_30":416,"_139":353,"_42":43,"_41":417,"_141":25,"_39":418,"_13":419,"_34":35,"_36":420,"_24":25,"_144":-5,"_237":421,"_27":422},{"_44":405,"_32":406,"_30":407,"_139":353,"_42":43,"_41":408,"_141":25,"_39":409,"_13":410,"_34":35,"_36":411,"_24":25,"_144":-5,"_237":412,"_27":413},{"_44":396,"_32":397,"_30":398,"_139":353,"_42":43,"_41":399,"_141":25,"_39":400,"_13":401,"_34":35,"_36":402,"_24":25,"_144":-5,"_237":403,"_27":404},{"_44":387,"_32":388,"_30":389,"_139":353,"_42":43,"_41":390,"_141":25,"_39":391,"_13":392,"_34":35,"_36":393,"_24":25,"_144":-5,"_237":394,"_27":395},{"_44":378,"_32":379,"_30":380,"_139":353,"_42":43,"_41":381,"_141":59,"_39":382,"_13":383,"_34":35,"_36":384,"_24":25,"_144":-5,"_237":385,"_27":386},{"_44":370,"_32":371,"_30":372,"_139":353,"_42":43,"_41":373,"_141":25,"_39":374,"_13":196,"_34":35,"_36":375,"_24":25,"_144":-5,"_237":376,"_27":377},{"_44":361,"_32":362,"_30":363,"_139":353,"_42":43,"_41":364,"_141":59,"_39":365,"_13":366,"_34":35,"_36":367,"_24":25,"_144":-5,"_237":368,"_27":369},{"_44":350,"_32":351,"_30":352,"_139":353,"_42":43,"_41":354,"_141":25,"_39":355,"_13":356,"_34":35,"_36":357,"_24":25,"_144":-5,"_237":358,"_27":359},{"_44":345,"_32":335,"_30":329,"_139":184,"_42":43,"_41":346,"_141":59,"_39":347,"_13":185,"_34":180,"_36":-5,"_24":25,"_144":-5,"_237":348,"_27":349},{"_44":336,"_32":337,"_30":338,"_139":329,"_42":43,"_41":339,"_141":25,"_39":340,"_13":341,"_34":35,"_36":342,"_24":25,"_144":-5,"_237":343,"_27":344},{"_44":326,"_32":327,"_30":328,"_139":329,"_42":43,"_41":330,"_141":25,"_39":331,"_13":185,"_34":35,"_36":332,"_24":25,"_144":-5,"_237":333,"_27":334},{"_44":321,"_32":295,"_30":289,"_139":184,"_42":43,"_41":322,"_141":59,"_39":323,"_13":63,"_34":180,"_36":-5,"_24":25,"_144":-5,"_237":324,"_27":325},{"_44":312,"_32":313,"_30":314,"_139":289,"_42":43,"_41":315,"_141":25,"_39":316,"_13":317,"_34":35,"_36":318,"_24":25,"_144":-5,"_237":319,"_27":320},{"_44":304,"_32":305,"_30":306,"_139":289,"_42":43,"_41":307,"_141":25,"_39":308,"_13":282,"_34":35,"_36":309,"_24":25,"_144":-5,"_237":310,"_27":311},{"_44":296,"_32":297,"_30":298,"_139":289,"_42":43,"_41":299,"_141":25,"_39":300,"_13":272,"_34":35,"_36":301,"_24":25,"_144":-5,"_237":302,"_27":303},{"_44":286,"_32":287,"_30":288,"_139":289,"_42":43,"_41":290,"_141":25,"_39":291,"_13":63,"_34":35,"_36":292,"_24":25,"_144":-5,"_237":293,"_27":294},{"_44":277,"_32":278,"_30":279,"_139":184,"_42":43,"_41":280,"_141":25,"_39":281,"_13":282,"_34":20,"_36":283,"_24":25,"_144":-5,"_237":284,"_27":285},{"_44":269,"_32":270,"_30":271,"_139":184,"_42":43,"_41":272,"_141":25,"_39":273,"_13":63,"_34":35,"_36":274,"_24":25,"_144":-5,"_237":275,"_27":276},{"_44":260,"_32":261,"_30":262,"_139":184,"_42":43,"_41":263,"_141":25,"_39":264,"_13":265,"_34":20,"_36":266,"_24":25,"_144":-5,"_237":267,"_27":268},{"_44":175,"_32":176,"_30":177,"_139":-5,"_42":43,"_41":178,"_141":59,"_39":257,"_13":63,"_34":180,"_36":-5,"_24":25,"_144":-5,"_237":258,"_27":259},{"_44":252,"_32":33,"_30":31,"_139":177,"_42":43,"_41":14,"_141":25,"_39":253,"_13":254,"_34":35,"_36":38,"_24":25,"_144":-5,"_237":255,"_27":256},{"_44":168,"_32":169,"_30":170,"_139":-5,"_42":43,"_41":171,"_141":25,"_39":249,"_13":63,"_34":20,"_36":173,"_24":25,"_144":-5,"_237":250,"_27":251},{"_44":161,"_32":162,"_30":163,"_139":-5,"_42":43,"_41":164,"_141":25,"_39":246,"_13":63,"_34":20,"_36":166,"_24":25,"_144":-5,"_237":247,"_27":248},{"_44":154,"_32":155,"_30":156,"_139":-5,"_42":43,"_41":157,"_141":25,"_39":243,"_13":63,"_34":20,"_36":159,"_24":25,"_144":-5,"_237":244,"_27":245},{"_44":146,"_32":147,"_30":148,"_139":-5,"_42":43,"_41":149,"_141":25,"_39":240,"_13":151,"_34":20,"_36":152,"_24":25,"_144":-5,"_237":241,"_27":242},{"_44":136,"_32":137,"_30":138,"_139":-5,"_42":43,"_41":140,"_141":25,"_39":236,"_13":63,"_34":20,"_36":143,"_24":25,"_144":-5,"_237":238,"_27":239},["D",1750150024620],"children",[],[137],["D",1750149990127],[],[147],["D",1750112788444],[],[155],["D",1750112885258],[],[162],["D",1750112972278],[],[169],"80f1f8cc-4b62-11f0-a798-76b3cceeab13",["D",1750154689061],11,[],[176,33],["D",1748604769414],[230],[176],"1b53525a-4b57-11f0-803e-76b3cceeab13","style.css","42e137de-3cdd-11f0-898f-9e149126039e",734,["D",1750149794108],142,"* {\n box-sizing: border-box;\n}\n\n/* Custom styles for mobile optimization */\n\n.chat-container {\n min-height: 100svh;\n display: flex;\n flex-direction: column;\n background: #edf8ff;\n}\n\n.chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 1em;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n padding-bottom: 10em;\n max-width: 70em;\n}\n\n.empty-messages-placeholder {\n pointer-events: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n font-family: serif;\n font-size: 2em;\n opacity: 0.1;\n color: black;\n}\n\n.message-wrapper {\n margin-bottom: 1em;\n position: relative;\n justify-items: start;\n max-width: 90%;\n}\n\n.message-wrapper.user {\n justify-items: end;\n margin-left: auto;\n}\n\n.message {\n word-wrap: break-word;\n display: inline-flex;\n flex-direction: column;\n}\n\n.message-meta {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n transition: opacity 0.2s ease;\n font-size: 0.6875em;\n color: #0000004a;\n font-weight: 400;\n gap: 0.6em;\n align-items: baseline;\n flex-direction: row-reverse;\n padding: 0.5em;\n}\n\n.message-wrapper.user .message-meta {\n justify-content: flex-end;\n flex-direction: row;\n}\n\n.message-action-btn {\n background: none;\n border: none;\n color: #0000004a;\n cursor: pointer;\n font-size: 1em;\n padding: 0 0.3em;\n}\n\n.message-action-btn:hover {\n background: rgba(0, 0, 0, 0.05);\n color: #6b7280;\n}\n\n.retry-btn:hover {\n color: #3b82f6;\n background: rgba(59, 130, 246, 0.1);\n}\n\n.delete-btn:hover {\n color: #ef4444;\n background: rgba(239, 68, 68, 0.1);\n}\n\n.message .anthropic-text-block > div > *:first-child {\n margin-top: 0;\n}\n\n.message .anthropic-text-block > div > *:last-child {\n margin-bottom: 0;\n}\n\n.message.user {\n background: #3b82f6;\n color: white;\n padding: 0.75rem 1em;\n border-radius: 1rem 1rem 0.1rem 1em;\n}\n\n.message.assistant {\n background: white;\n padding: 0.75rem 1em;\n border-radius: 1rem 1rem 1rem 0.1em;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.message.system {\n background: #fef3c7;\n border: 1px solid #f59e0b;\n padding: 0.5rem 0.75em;\n border-radius: 0.5em;\n font-size: 0.875em;\n margin: 0 auto;\n max-width: 90%;\n text-align: center;\n}\n\n.message pre {\n display: block;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.375em;\n padding: 0.75em;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.75em;\n line-height: 1.4;\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-word;\n color: #374151;\n margin: 0;\n}\n\n.chat-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: white;\n border-top: 1px solid #e2e8f0;\n box-shadow:\n 0 -10px 25px -5px rgba(0, 0, 0, 0.1),\n 0 -10px 10px -5px rgba(0, 0, 0, 0.04);\n border-radius: 2rem 2rem 0 0;\n max-width: 81em;\n margin: 0 auto;\n}\n\n.chat-input-container {\n padding: 1em;\n display: flex;\n gap: 0.5em;\n align-items: flex-end;\n}\n\n.chat-input {\n flex: 1;\n min-height: 2.5em;\n max-height: 6em;\n padding: 0.75em;\n border: 0 none;\n border-radius: 0.5em;\n resize: none;\n font-family: inherit;\n font-size: 1em;\n outline: none;\n transition: border-color 0.2s;\n}\n\n.footer-controls {\n display: flex;\n gap: 0.25em;\n align-items: flex-end;\n}\n\n.footer-button {\n background: none;\n border: none;\n color: #6b7280;\n cursor: pointer;\n padding: 0.5em;\n border-radius: 0.5em;\n transition: all 0.2s;\n font-size: 1em;\n width: 2.5em;\n height: 2.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.footer-button:hover {\n background: #f3f4f6;\n color: #374151;\n}\n\n.chat-status {\n padding: 0.5rem 1em;\n background: #f8fafc;\n border-top: 1px solid #f1f5f9;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.status-text {\n font-size: 0.75em;\n color: #6b7280;\n flex: 1;\n text-align: center;\n}\n\n.status-link-button {\n background: none;\n border: none;\n color: #3b82f6;\n cursor: pointer;\n font-size: 0.75em;\n padding: 0.25rem 0.5em;\n border-radius: 0.25em;\n transition: all 0.2s;\n text-decoration: none;\n}\n\n.status-link-button:hover {\n background: #f3f4f6;\n color: #2563eb;\n}\n\n.chat-status .fa-circle-check {\n color: #1dd31d;\n}\n\n.chat-input:focus {\n xborder-color: #3b82f6;\n xbox-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.send-button {\n background: #3b82f6;\n color: white;\n border: none;\n border-radius: 50%;\n width: 2.5em;\n height: 2.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: background-color 0.2s;\n flex-shrink: 0;\n font-size: 1em;\n position: absolute;\n right: 1em;\n}\n\n.send-button:hover:not(:disabled) {\n background: #2563eb;\n}\n\n.send-button:disabled {\n background: #9ca3af;\n cursor: not-allowed;\n}\n\n.send-button.stop-button {\n background: #ef4444;\n}\n\n.send-button.stop-button:hover:not(:disabled) {\n background: #dc2626;\n}\n\n/* Streaming message styles */\n.message.streaming {\n background: white;\n border: 1px solid #e2e8f0;\n padding: 0.75rem 1em;\n border-radius: 1rem 1rem 1rem 0.25em;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n border-left: 3px solid #3b82f6;\n}\n\n.streaming-cursor {\n display: inline-block;\n background: #3b82f6;\n color: #3b82f6;\n animation: streaming-blink 1s infinite;\n margin-left: 2px;\n}\n\n@keyframes streaming-blink {\n 0%, 50% {\n opacity: 1;\n }\n 51%, 100% {\n opacity: 0;\n }\n}\n\n.settings-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 50;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1em;\n}\n\n.settings-panel {\n background: white;\n border-radius: 1em;\n padding: 1.5em;\n width: 100%;\n max-width: 28em;\n max-height: 80vh;\n overflow-y: auto;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n}\n\n.settings-header {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n\n.settings-footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n margin-top: 1em;\n gap: 0.5em;\n}\n\n.close-button {\n background: none;\n border: none;\n font-size: 1.5em;\n cursor: pointer;\n color: #6b7280;\n padding: 0.25em;\n border-radius: 0.25em;\n}\n\n.close-button:hover {\n background: #f3f4f6;\n}\n\n.form-group {\n margin-bottom: 1.5em;\n}\n\n.form-label {\n display: block;\n font-weight: 600;\n margin-bottom: 0.5em;\n color: #374151;\n}\n\n.form-input {\n width: 100%;\n padding: 0.75em;\n border: 1px solid #d1d5db;\n border-radius: 0.5em;\n font-size: 1em;\n transition: border-color 0.2s;\n margin-bottom: 0.4em;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.mcp-servers-list {\n display: flex;\n flex-direction: column;\n gap: 0.4em;\n}\n.mcp-server {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.5em;\n padding: 0.6em;\n}\n\n.mcp-server-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.75em;\n}\n\n.mcp-server-name {\n font-weight: 600;\n color: #374151;\n}\n\n.mcp-server-actions {\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n gap: 0.3em;\n}\n\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 3em;\n height: 1.5em;\n font-size: 0.7em;\n}\n\n.toggle-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: 0.4s;\n border-radius: 1.5em;\n}\n\n.toggle-slider:before {\n position: absolute;\n content: \"\";\n height: 1.125em;\n width: 1.125em;\n left: 0.1875em;\n bottom: 0.1875em;\n background-color: white;\n transition: 0.4s;\n border-radius: 50%;\n}\n\ninput:checked + .toggle-slider {\n background-color: #3b82f6;\n}\n\ninput:checked + .toggle-slider:before {\n transform: translateX(1.5em);\n}\n\n.button {\n padding: 0.75em 1.5em;\n border: none;\n border-radius: 0.5em;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 0.875em;\n}\n\n.button-primary {\n background: #3b82f6;\n color: white;\n}\n\n.button-primary:hover {\n background: #2563eb;\n}\n\n.button-secondary {\n background: #f3f4f6;\n color: #374151;\n border: 1px solid #d1d5db;\n}\n\n.button-secondary:hover {\n background: #e5e7eb;\n}\n\n.button-danger {\n background: #ef4444;\n color: white;\n}\n\n.button-danger:hover {\n background: #dc2626;\n}\n\n.btn-small {\n font-size: 0.6em;\n padding: 0.3em 0.5em;\n}\n\n.loading-indicator {\n display: flex;\n align-items: center;\n gap: 0.5em;\n color: #6b7280;\n font-size: 0.875em;\n padding: 0.5rem 1em;\n}\n\n.loading-dots {\n display: flex;\n gap: 0.25em;\n}\n\n.loading-dot {\n width: 0.375em;\n height: 0.375em;\n background: #6b7280;\n border-radius: 50%;\n animation: loading-bounce 1.4s ease-in-out infinite both;\n}\n\n.loading-dot:nth-child(1) {\n animation-delay: -0.32s;\n}\n.loading-dot:nth-child(2) {\n animation-delay: -0.16s;\n}\n\n@keyframes loading-bounce {\n 0%, 80%, 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n .chat-input-container {\n padding: 0.75em;\n }\n\n .chat-status {\n padding: 0.375rem 0.75em;\n }\n\n .status-text {\n font-size: 0.6875em;\n }\n\n .status-link-button {\n font-size: 0.6875em;\n padding: 0.125rem 0.25em;\n }\n\n .settings-overlay {\n padding: 0.5em;\n }\n\n .settings-panel {\n padding: 1em;\n border-radius: 0.75em;\n }\n\n .message-wrapper {\n max-width: 100%;\n }\n}\n\n/* Prevent zoom on input focus on iOS */\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n .chat-input,\n .form-input {\n font-size: 16px;\n }\n}\n\n/* MCP MINIMAL */\n\n.mcp-details {\n margin-top: 0.5em;\n}\n\n.mcp-details + .mcp-details {\n margin-top: 0;\n margin-bottom: 0.5em;\n}\n\n.mcp-details > summary {\n font-style: italic;\n color: rgba(0, 0, 0, 0.2);\n font-family: serif;\n cursor: pointer;\n}\n.mcp-details pre {\n position: relative;\n}\n\n.mcp-details pre > .copy {\n position: absolute;\n top: 0.2em;\n right: 0.2em;\n display: flex;\n\n border-radius: 3px;\n border: 1px solid #00000021;\n background-color: white;\n cursor: pointer;\n padding: 0.3em;\n color: #0000005c;\n}\n\n.mcp-details pre > .copy:hover {\n color: #666;\n}\n\n.test-button {\n background: #f3f4f6;\n border: 1px solid #d1d5db;\n border-radius: 0.375em;\n padding: 0.375rem 0.75em;\n font-size: 0.75em;\n cursor: pointer;\n transition: all 0.2s;\n min-width: 2.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.test-button:hover:not(:disabled) {\n background: #e5e7eb;\n border-color: #9ca3af;\n}\n\n.test-button:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n.loading-shimmer,\n.loading-shimmer-pure-text {\n --shimmer-contrast: #ffffffbf;\n --text-secondary: #5d5d5d;\n text-fill-color: transparent;\n -webkit-text-fill-color: transparent;\n animation-delay: 0.5s;\n animation-duration: 3s;\n animation-iteration-count: infinite;\n animation-name: loading-shimmer;\n background: var(--text-secondary)\n linear-gradient(\n to right,\n var(--text-secondary)0,\n var(--shimmer-contrast)40%,\n var(--shimmer-contrast)60%,\n var(--text-secondary)100%\n );\n background: var(--text-secondary)\n -webkit-gradient(\n linear,\n 100% 0,\n 0 0,\n from(var(--text-secondary)),\n color-stop(0.4, var(--shimmer-contrast)),\n color-stop(0.6, var(--shimmer-contrast)),\n to(var(--text-secondary))\n );\n -webkit-background-clip: text;\n background-clip: text;\n background-repeat: no-repeat;\n background-size: 50% 200%;\n display: inline-block;\n}\n@keyframes loading-shimmer {\n 0% {\n background-position: -100% 0;\n }\n to {\n background-position: 250% 0;\n }\n}\n\nsummary {\n outline: none;\n}\n\nsummary::-webkit-details-marker,\nsummary::marker {\n content: \"\\f121\";\n font-family: \"FontAwesome\";\n font-size: 0.8em;\n font-style: normal;\n}\n\n/* MCP Status Component Styles */\n.mcp-status {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.5em;\n margin: 0.3em;\n overflow: auto;\n max-height: 50vh;\n}\n\n.mcp-status.initializing {\n border-color: #fbbf24;\n background: #fef3c7;\n}\n\n.mcp-status-summary {\n padding: 0.75em 1em;\n display: flex;\n align-items: center;\n gap: 0.5em;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.mcp-status-summary:hover {\n background: rgba(0, 0, 0, 0.02);\n}\n\n.mcp-status-summary .status-icon {\n font-size: 1.1em;\n min-width: 1.5em;\n}\n\n.mcp-status-summary .status-text {\n flex: 1;\n font-size: 0.875em;\n color: #374151;\n font-weight: 500;\n}\n\n.mcp-status-summary .expand-icon {\n font-size: 0.75em;\n color: #6b7280;\n transition: transform 0.2s;\n}\n\n.mcp-status-details {\n border-top: 1px solid #e2e8f0;\n background: white;\n}\n\n.mcp-status-empty {\n padding: 1em;\n text-align: center;\n color: #6b7280;\n font-style: italic;\n}\n\n.mcp-server-status {\n border-bottom: 1px solid #f1f5f9;\n}\n\n.mcp-server-status:last-child {\n border-bottom: none;\n}\n\n.mcp-server-header {\n padding: 0.75em 1em;\n display: flex;\n align-items: center;\n gap: 0.5em;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.mcp-server-header:hover {\n background: #f8fafc;\n}\n\n.mcp-server-header .server-icon {\n font-size: 1em;\n min-width: 1.5em;\n}\n\n.mcp-server-header .server-name {\n font-weight: 600;\n color: #374151;\n flex: 1;\n}\n\n.mcp-server-header .server-status {\n font-size: 0.75em;\n color: #6b7280;\n margin-right: 0.5em;\n}\n\n.mcp-server-header .server-actions {\n display: flex;\n align-items: center;\n gap: 0.25em;\n}\n\n.mcp-server-header .refresh-button {\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.25em;\n border-radius: 0.25em;\n transition: background-color 0.2s;\n font-size: 0.875em;\n}\n\n.mcp-server-header .refresh-button:hover:not(:disabled) {\n background: rgba(0, 0, 0, 0.05);\n}\n\n.mcp-server-header .refresh-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n\n.mcp-server-header .expand-icon {\n font-size: 0.75em;\n color: #6b7280;\n transition: transform 0.2s;\n}\n\n.mcp-server-details {\n padding: 0 1em 1em 1em;\n background: #fafbfc;\n}\n\n.server-info {\n margin-bottom: 1em;\n}\n\n.info-row {\n display: flex;\n margin-bottom: 0.5em;\n font-size: 0.75em;\n}\n\n.info-label {\n font-weight: 600;\n color: #374151;\n min-width: 5em;\n}\n\n.info-value {\n color: #6b7280;\n word-break: break-all;\n}\n\n.server-prompts h4 {\n font-size: 0.875em;\n font-weight: 600;\n color: #374151;\n margin: 0 0 0.5em 0;\n}\n\n.prompts-list {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n.prompt-item {\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 0.375em;\n padding: 0.5em;\n}\n\n.prompt-name {\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.75em;\n font-weight: 600;\n color: #3b82f6;\n}\n\n.prompt-description {\n display: block;\n font-size: 0.6875em;\n color: #6b7280;\n margin-top: 0.25em;\n line-height: 1.3;\n}\n\n.prompt-args {\n margin-top: 0.375em;\n display: flex;\n gap: 0.25em;\n flex-wrap: wrap;\n}\n\n.prompt-arg {\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.625em;\n background: #f3f4f6;\n color: #6b7280;\n padding: 0.125em 0.25em;\n border-radius: 0.25em;\n border: 1px solid #e2e8f0;\n}\n\n.server-tools h4 {\n font-size: 0.875em;\n font-weight: 600;\n color: #374151;\n margin: 1em 0 0.5em 0;\n}\n\n.tools-list {\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n}\n\n.tool-item {\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 0.375em;\n padding: 0.5em;\n}\n\n.tool-name {\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.75em;\n font-weight: 600;\n color: #059669;\n}\n\n.tool-description {\n display: block;\n font-size: 0.6875em;\n color: #6b7280;\n margin-top: 0.25em;\n line-height: 1.3;\n}\n\n.tool-schema {\n margin-top: 0.375em;\n}\n\n.tool-schema details {\n font-size: 0.6875em;\n}\n\n.tool-schema summary {\n color: #6b7280;\n cursor: pointer;\n font-weight: 500;\n margin-bottom: 0.25em;\n}\n\n.tool-schema .schema-json {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.25em;\n padding: 0.5em;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n color: #374151;\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-word;\n margin: 0;\n}\n\n.server-error {\n background: #fef2f2;\n border: 1px solid #fecaca;\n border-radius: 0.375em;\n padding: 0.5em;\n font-size: 0.75em;\n color: #dc2626;\n margin-top: 0.5em;\n}\n\n.placeholder-tips {\n margin-top: 20px;\n font-size: 14px;\n color: #666;\n}\n\n.placeholder-tips code {\n background: #f0f0f0;\n padding: 2px 6px;\n border-radius: 3px;\n font-family: monospace;\n}\n\n/* Mobile optimizations for MCP Status */\n@media (max-width: 640px) {\n .mcp-status-summary {\n padding: 0.5em 0.75em;\n }\n\n .mcp-server-header {\n padding: 0.5em 0.75em;\n }\n\n .mcp-server-details {\n padding: 0 0.75em 0.75em 0.75em;\n }\n\n .info-row {\n flex-direction: column;\n gap: 0.125em;\n }\n\n .info-label {\n min-width: auto;\n font-size: 0.6875em;\n }\n\n .info-value {\n font-size: 0.6875em;\n }\n}\n\n.command-palette {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n width: 100%;\n z-index: 0;\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n max-height: 400px;\n overflow-y: auto;\n box-shadow:\n 0 -10px 25px -5px rgba(0, 0, 0, 0.1),\n 0 -10px 10px -5px rgba(0, 0, 0, 0.04);\n border-radius: 2rem 2rem 0 0;\n padding-bottom: 6em;\n background-color: #f4f4f4;\n}\n\n.command-palette-loading,\n.command-palette-error {\n padding: 12px 16px;\n font-size: 14px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.command-palette-error {\n color: #d32f2f;\n}\n\n.loading-spinner {\n animation: spin 1s linear infinite;\n}\n\n@keyframes spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n}\n\n.command-palette-item {\n padding: 10px 16px;\n cursor: pointer;\n border-bottom: 1px solid #dedddd;\n transition: background-color 0.1s;\n}\n\n.command-palette-item:last-child {\n border-bottom: none;\n}\n\n.command-palette-item:hover,\n.command-palette-item.selected {\n background-color: #d9d9d9;\n}\n\n.command-palette-item-main {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.command-palette-type-icon {\n font-size: 16px;\n flex-shrink: 0;\n}\n\n.command-palette-name {\n font-family: monospace;\n font-weight: 500;\n color: #1976d2;\n flex-shrink: 0;\n}\n\n.command-palette-server {\n font-size: 12px;\n color: #666;\n margin-left: auto;\n background: #e8e8e8;\n padding: 2px 8px;\n border-radius: 12px;\n}\n\n.command-palette-description {\n font-size: 13px;\n color: #666;\n margin-top: 4px;\n margin-left: 24px;\n}\n\n.command-palette-args {\n font-size: 12px;\n color: #999;\n margin-top: 4px;\n margin-left: 24px;\n font-family: monospace;\n}\n\n/* Argument Dialog Styles */\n.command-palette-dialog-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.3);\n z-index: 1001;\n}\n\n.command-palette-dialog {\n background: white;\n border: 1px solid #e0e0e0;\n border-radius: 8px;\n box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);\n z-index: 1002;\n}\n\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.dialog-header h3 {\n margin: 0;\n font-size: 18px;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.dialog-close {\n background: none;\n border: none;\n font-size: 20px;\n cursor: pointer;\n color: #666;\n padding: 4px 8px;\n border-radius: 4px;\n transition: background-color 0.2s;\n}\n\n.dialog-close:hover {\n background-color: #f0f0f0;\n}\n\n.dialog-content {\n padding: 16px;\n}\n\n.dialog-description {\n margin: 0 0 16px 0;\n color: #666;\n font-size: 14px;\n}\n\n.dialog-arguments {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.argument-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.argument-field label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.argument-description {\n font-weight: normal;\n color: #666;\n font-size: 13px;\n}\n\n.argument-field input {\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 14px;\n transition: border-color 0.2s;\n}\n\n.argument-field input:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.dialog-footer {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n padding: 16px;\n border-top: 1px solid #e0e0e0;\n}\n\n.dialog-button {\n padding: 8px 16px;\n border: none;\n border-radius: 4px;\n font-size: 14px;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.dialog-button-cancel {\n background: #f0f0f0;\n color: #666;\n}\n\n.dialog-button-cancel:hover {\n background: #e0e0e0;\n}\n\n.dialog-button-submit {\n background: #1976d2;\n color: white;\n}\n\n.dialog-button-submit:hover:not(:disabled) {\n background: #1565c0;\n}\n\n.dialog-button-submit:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Enhanced JSON Schema Input Styles */\n.argument-field textarea,\n.argument-field input,\n.argument-field select {\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 14px;\n transition: border-color 0.2s;\n font-family: inherit;\n}\n\n.argument-field textarea:focus,\n.argument-field input:focus,\n.argument-field select:focus {\n outline: none;\n border-color: #1976d2;\n box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);\n}\n\n.argument-field select {\n cursor: pointer;\n background-color: white;\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n background-position: right 8px center;\n background-repeat: no-repeat;\n background-size: 16px 12px;\n padding-right: 32px;\n}\n\n.checkbox-label {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n padding: 8px 0;\n}\n\n.checkbox-label input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n margin: 0;\n cursor: pointer;\n}\n\n.checkbox-text {\n font-size: 14px;\n color: #666;\n user-select: none;\n}\n\n.argument-type {\n font-weight: normal;\n color: #999;\n font-size: 12px;\n font-style: italic;\n}\n\n/* Validation styling (non-intrusive) */\n.argument-field input:invalid,\n.argument-field textarea:invalid,\n.argument-field select:invalid {\n border-color: #fbbf24;\n background-color: #fefbf3;\n}\n\n.argument-field input[type=\"number\"] {\n text-align: right;\n}\n\n.argument-field textarea {\n resize: vertical;\n min-height: 60px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n font-size: 13px;\n line-height: 1.4;\n}\n\n.argument-field input[type=\"date\"],\n.argument-field input[type=\"datetime-local\"],\n.argument-field input[type=\"email\"],\n.argument-field input[type=\"url\"] {\n font-family: inherit;\n}\n\n/* NextSteps Component Styles */\n.next-steps {\n margin: 12px 0;\n padding: 12px;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n font-size: 14px;\n}\n\n.next-steps-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 8px;\n font-weight: 500;\n color: #374151;\n}\n\n.next-steps-label {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n.next-steps-cancelled {\n font-size: 12px;\n color: #dc2626;\n display: flex;\n align-items: center;\n gap: 4px;\n}\n\n.next-steps-proposals {\n display: flex;\n flex-wrap: wrap;\n gap: 8px;\n}\n\n.next-step-pill {\n position: relative;\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: white;\n border: 1px solid #d1d5db;\n border-radius: 20px;\n cursor: pointer;\n transition: all 0.2s ease;\n overflow: hidden;\n min-height: 36px;\n}\n\n.next-step-pill:hover {\n border-color: #3b82f6;\n box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1);\n}\n\n.next-step-pill.selected {\n border-color: #3b82f6;\n background: #eff6ff;\n}\n\n.pill-content {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n z-index: 2;\n position: relative;\n}\n\n.pill-title {\n font-weight: 500;\n color: #374151;\n line-height: 1.2;\n}\n\n.pill-description {\n font-size: 12px;\n color: #6b7280;\n line-height: 1.2;\n margin-top: 2px;\n}\n\n.pill-progress {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n transition: width 0.3s ease;\n opacity: 0.2;\n z-index: 1;\n}\n\n.pill-countdown {\n position: absolute;\n top: -4px;\n right: -4px;\n background: #3b82f6;\n color: white;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 11px;\n font-weight: bold;\n z-index: 3;\n}\n\n.mcp-next-steps-container {\n margin: 8px 0;\n}\n\n.toggle-label {\n margin-left: 8px;\n font-size: 14px;\n color: #374151;\n}\n\n@media (max-width: 640px) {\n .next-steps-proposals {\n flex-direction: column;\n }\n \n .next-step-pill {\n width: 100%;\n justify-content: flex-start;\n }\n}\n\n/* ResourceViewer Component Styles */\n.resource-viewer {\n margin: 8px 0;\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 8px;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.resource-viewer.fullscreen {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 9999;\n border-radius: 0;\n border: none;\n margin: 0;\n}\n\n.resource-viewer-error {\n border-color: #fecaca;\n background: #fef2f2;\n}\n\n.resource-viewer-header {\n padding: 12px 16px;\n background: #f8fafc;\n border-bottom: 1px solid #e2e8f0;\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 14px;\n}\n\n.resource-viewer-label {\n display: flex;\n align-items: center;\n gap: 6px;\n font-weight: 500;\n color: #374151;\n}\n\n.resource-viewer-meta {\n margin-left: 12px;\n color: #64748b;\n font-size: 13px;\n}\n\n.resource-viewer-controls {\n display: flex;\n gap: 8px;\n}\n\n.resource-viewer-content {\n position: relative;\n overflow: hidden;\n}\n\n.resource-viewer-error-content {\n padding: 16px;\n color: #dc2626;\n}\n\n.resource-viewer-error-content p {\n margin: 0;\n}\n\n/* CodeMirror integration styles */\n.resource-viewer .cm-editor {\n height: 100%;\n font-size: 13px;\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n}\n\n.resource-viewer .cm-focused {\n outline: none;\n}\n\n.resource-viewer .cm-scroller {\n font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;\n line-height: 1.4;\n}\n\n.resource-viewer .cm-content {\n padding: 16px;\n}\n\n.resource-viewer .cm-gutters {\n background: #f8fafc;\n border-right: 1px solid #e2e8f0;\n}\n\n.resource-viewer .cm-lineNumbers .cm-gutterElement {\n color: #9ca3af;\n font-size: 12px;\n padding: 0 8px;\n}\n\n/* Mobile optimizations for ResourceViewer */\n@media (max-width: 640px) {\n .resource-viewer-header {\n padding: 8px 12px;\n font-size: 13px;\n }\n \n .resource-viewer-meta {\n margin-left: 8px;\n font-size: 12px;\n }\n \n .resource-viewer-controls {\n gap: 6px;\n }\n \n .resource-viewer .cm-content {\n padding: 12px;\n }\n}",[],[183,261],"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();",[],[183,270],"91d6994a-4919-11f0-8ec2-76b3cceeab13","index.html","2f3fa440-3cdd-11f0-acd6-9e149126039e",632,["D",1749903461808],6,"\n\n \n \n \n Anthropic Chat with MCP\n \n \n \n \n \n \n \n \n \n

\n \n \n",[],[183,278],"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}",[],[183,295,287],"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}",[],[183,295,297],"e24a1cfa-42be-11f0-a4ba-76b3cceeab13","mcpPrompts.ts","1a29d93e-40c7-11f0-b724-76b3cceeab13",445,["D",1749204805612],"/**\n * Frontend MCP Prompts Utility\n *\n * Handles fetching prompts from MCP servers directly from the frontend\n * without requiring backend proxy endpoints.\n */\n\nimport type { MCPPrompt, MCPServerConfig } from \"../../shared/types.ts\";\n\nexport interface MCPPromptsResult {\n success: boolean;\n prompts: MCPPrompt[];\n error?: string;\n}\n\nexport { MCPServerConfig };\n\n/**\n * Fetch prompts from a single MCP server\n * @param server - MCP server configuration\n * @returns Promise\n */\nasync function fetchPromptsFromServer(server: MCPServerConfig): Promise {\n if (!server.enabled || !server.url) {\n return [];\n }\n\n try {\n const headers: Record = {\n \"Content-Type\": \"application/json\",\n };\n\n if (server.authorization_token) {\n headers[\"Authorization\"] = `Bearer ${server.authorization_token}`;\n }\n\n // Create abort controller for timeout\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout\n\n try {\n // First, initialize the connection\n const initResponse = await fetch(server.url, {\n method: \"POST\",\n headers,\n body: JSON.stringify({\n jsonrpc: \"2.0\",\n method: \"initialize\",\n params: {\n protocolVersion: \"2024-11-05\",\n capabilities: {},\n clientInfo: {\n name: \"chat-client\",\n version: \"1.0.0\",\n },\n },\n id: 1,\n }),\n signal: controller.signal,\n });\n\n if (!initResponse.ok) {\n clearTimeout(timeoutId);\n return [];\n }\n\n // Then fetch prompts\n const promptsResponse = await fetch(server.url, {\n method: \"POST\",\n headers,\n body: JSON.stringify({\n jsonrpc: \"2.0\",\n method: \"prompts/list\",\n params: {},\n id: 2,\n }),\n signal: controller.signal,\n });\n\n clearTimeout(timeoutId);\n\n if (promptsResponse.ok) {\n const data = await promptsResponse.json();\n console.log(`[prompts/list response from ${server.name}]`, data);\n\n if (data.result && data.result.prompts) {\n return data.result.prompts.map((prompt: any) => ({\n name: prompt.name,\n description: prompt.description,\n serverName: server.name,\n serverId: server.id,\n arguments: prompt.arguments,\n }));\n }\n }\n } catch (fetchError: any) {\n clearTimeout(timeoutId);\n\n if (fetchError.name === \"AbortError\") {\n console.warn(`Timeout fetching prompts from ${server.name}`);\n } else {\n throw fetchError;\n }\n }\n\n return [];\n } catch (error) {\n console.warn(`Failed to fetch prompts from ${server.name}:`, error);\n return [];\n }\n}\n\n/**\n * Fetch prompts from all enabled MCP servers\n * @param servers - Array of MCP server configurations\n * @returns Promise\n */\nexport async function fetchMCPPrompts(servers: MCPServerConfig[]): Promise {\n try {\n if (!servers || !Array.isArray(servers)) {\n return {\n success: false,\n prompts: [],\n error: \"Servers array is required\",\n };\n }\n\n const enabledServers = servers.filter(server => server.enabled && server.url);\n\n if (enabledServers.length === 0) {\n return {\n success: true,\n prompts: [],\n };\n }\n\n // Fetch prompts from all enabled servers concurrently\n const promptPromises = enabledServers.map(server => fetchPromptsFromServer(server));\n const promptArrays = await Promise.all(promptPromises);\n\n // Flatten all prompts into a single array\n const allPrompts = promptArrays.flat();\n\n // Add a test prompt for development/testing purposes\n const testPrompt: MCPPrompt = {\n name: \"test\",\n description: \"Testing the system\",\n serverName: \"Built-in\",\n serverId: \"builtin\",\n arguments: [{\n name: \"subsystem\",\n description: \"Sub system to test\",\n required: false,\n }],\n };\n\n return {\n success: true,\n prompts: [testPrompt, ...allPrompts],\n };\n } catch (error: any) {\n return {\n success: false,\n prompts: [],\n error: error.message || \"Unknown error occurred\",\n };\n }\n}\n\n/**\n * Fetch prompts with caching support\n * @param servers - Array of MCP server configurations\n * @param cacheKey - Optional cache key for localStorage\n * @param maxCacheAge - Maximum cache age in milliseconds (default: 5 minutes)\n * @returns Promise\n */\nexport async function fetchMCPPromptsWithCache(\n servers: MCPServerConfig[],\n cacheKey: string = \"mcp_prompts_cache\",\n maxCacheAge: number = 0, // disable cache for now //5 * 60 * 1000 // 5 minutes\n): Promise {\n try {\n // Check cache first\n const cached = localStorage.getItem(cacheKey);\n if (cached) {\n const { timestamp, data } = JSON.parse(cached);\n const age = Date.now() - timestamp;\n\n if (age < maxCacheAge) {\n console.log(\"Using cached MCP prompts\");\n return {\n success: true,\n prompts: data,\n };\n }\n }\n\n // Fetch fresh data\n const result = await fetchMCPPrompts(servers);\n\n // Cache successful results\n if (result.success) {\n localStorage.setItem(\n cacheKey,\n JSON.stringify({\n timestamp: Date.now(),\n data: result.prompts,\n }),\n );\n }\n\n return result;\n } catch (error: any) {\n // If there's an error, try to return cached data as fallback\n const cached = localStorage.getItem(cacheKey);\n if (cached) {\n try {\n const { data } = JSON.parse(cached);\n console.warn(\"Using stale cached prompts due to fetch error:\", error);\n return {\n success: true,\n prompts: data,\n };\n } catch (cacheError) {\n // Cache is corrupted, clear it\n localStorage.removeItem(cacheKey);\n }\n }\n\n return {\n success: false,\n prompts: [],\n error: error.message || \"Unknown error occurred\",\n };\n }\n}\n\n/**\n * Clear the MCP prompts cache\n * @param cacheKey - Cache key to clear\n */\nexport function clearMCPPromptsCache(cacheKey: string = \"mcp_prompts_cache\"): void {\n localStorage.removeItem(cacheKey);\n}",[],[183,295,305],"642625a0-4a46-11f0-82f2-76b3cceeab13","MCPClient.ts","a7962afe-4327-11f0-b818-76b3cceeab13",676,["D",1750032663675],14,"/**\n * Comprehensive MCP (Model Context Protocol) Client for Browser\n * Supports multiple transport mechanisms (HTTP, SSE, WebSocket)\n */\nimport type { MCPPrompt, MCPTool } from \"../shared/types.ts\";\n\n// Type definitions for MCP protocol\ninterface JsonRpcRequest {\n jsonrpc: \"2.0\";\n id: string | number;\n method: string;\n params?: any;\n}\n\ninterface JsonRpcResponse {\n jsonrpc: \"2.0\";\n id: string | number;\n result?: any;\n error?: JsonRpcError;\n}\n\ninterface JsonRpcError {\n code: number;\n message: string;\n data?: any;\n}\n\ninterface JsonRpcNotification {\n jsonrpc: \"2.0\";\n method: string;\n params?: any;\n}\n\ntype JsonRpcMessage = JsonRpcRequest | JsonRpcResponse | JsonRpcNotification;\n\n// MCP specific types\ninterface MCPCapabilities {\n tools?: boolean;\n prompts?: boolean;\n resources?: boolean;\n logging?: boolean;\n}\n\ninterface MCPInitializeParams {\n protocolVersion: string;\n capabilities: MCPCapabilities;\n clientInfo: {\n name: string;\n version: string;\n };\n}\n\ninterface MCPInitializeResult {\n protocolVersion: string;\n capabilities: MCPCapabilities;\n serverInfo: {\n name: string;\n version: string;\n };\n}\n\n// Transport types\ntype TransportType = \"http\" | \"sse\" | \"websocket\";\n\ninterface TransportConfig {\n type: TransportType;\n endpoint: string;\n headers?: Record;\n}\n\n// Abstract transport interface\ninterface Transport {\n connect(): Promise;\n disconnect(): void;\n sendRequest(request: JsonRpcRequest): Promise;\n onMessage(handler: (message: JsonRpcMessage) => void): void;\n onError(handler: (error: Error) => void): void;\n onClose(handler: () => void): void;\n}\n\n/**\n * HTTP Transport - Simple request/response\n */\nclass HttpTransport implements Transport {\n private messageHandler?: (message: JsonRpcMessage) => void;\n private errorHandler?: (error: Error) => void;\n private closeHandler?: () => void;\n\n constructor(\n private endpoint: string,\n private headers: Record = {},\n ) {}\n\n async connect(): Promise {\n // HTTP doesn't need persistent connection\n }\n\n disconnect(): void {\n // HTTP doesn't need explicit disconnect\n }\n\n async sendRequest(request: JsonRpcRequest): Promise {\n try {\n const response = await fetch(this.endpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...this.headers,\n },\n body: JSON.stringify(request),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n return data as JsonRpcResponse;\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n throw error;\n }\n }\n\n onMessage(handler: (message: JsonRpcMessage) => void): void {\n this.messageHandler = handler;\n }\n\n onError(handler: (error: Error) => void): void {\n this.errorHandler = handler;\n }\n\n onClose(handler: () => void): void {\n this.closeHandler = handler;\n }\n}\n\n/**\n * SSE + HTTP Transport - Server-sent events for notifications, HTTP for requests\n */\nclass SseHttpTransport implements Transport {\n private eventSource?: EventSource;\n private messageHandler?: (message: JsonRpcMessage) => void;\n private errorHandler?: (error: Error) => void;\n private closeHandler?: () => void;\n\n constructor(\n private httpEndpoint: string,\n private sseEndpoint: string,\n private headers: Record = {},\n ) {}\n\n async connect(): Promise {\n return new Promise((resolve, reject) => {\n this.eventSource = new EventSource(this.sseEndpoint);\n\n this.eventSource.onopen = () => {\n resolve();\n };\n\n this.eventSource.onmessage = (event) => {\n try {\n const message = JSON.parse(event.data) as JsonRpcMessage;\n if (this.messageHandler) {\n this.messageHandler(message);\n }\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n }\n };\n\n this.eventSource.onerror = (error) => {\n if (this.errorHandler) {\n this.errorHandler(new Error(\"SSE connection error\"));\n }\n if (this.eventSource?.readyState === EventSource.CLOSED) {\n if (this.closeHandler) {\n this.closeHandler();\n }\n reject(new Error(\"SSE connection failed\"));\n }\n };\n });\n }\n\n disconnect(): void {\n if (this.eventSource) {\n this.eventSource.close();\n if (this.closeHandler) {\n this.closeHandler();\n }\n }\n }\n\n async sendRequest(request: JsonRpcRequest): Promise {\n try {\n const response = await fetch(this.httpEndpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...this.headers,\n },\n body: JSON.stringify(request),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n return data as JsonRpcResponse;\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n throw error;\n }\n }\n\n onMessage(handler: (message: JsonRpcMessage) => void): void {\n this.messageHandler = handler;\n }\n\n onError(handler: (error: Error) => void): void {\n this.errorHandler = handler;\n }\n\n onClose(handler: () => void): void {\n this.closeHandler = handler;\n }\n}\n\n/**\n * WebSocket Transport - Full duplex communication\n */\nclass WebSocketTransport implements Transport {\n private ws?: WebSocket;\n private messageHandler?: (message: JsonRpcMessage) => void;\n private errorHandler?: (error: Error) => void;\n private closeHandler?: () => void;\n private pendingRequests = new Map void>();\n\n constructor(private endpoint: string) {}\n\n async connect(): Promise {\n return new Promise((resolve, reject) => {\n this.ws = new WebSocket(this.endpoint);\n\n this.ws.onopen = () => {\n resolve();\n };\n\n this.ws.onmessage = (event) => {\n try {\n const message = JSON.parse(event.data) as JsonRpcMessage;\n\n // Handle responses to our requests\n if (\"id\" in message && message.id !== undefined) {\n const handler = this.pendingRequests.get(message.id);\n if (handler) {\n this.pendingRequests.delete(message.id);\n handler(message as JsonRpcResponse);\n return;\n }\n }\n\n // Handle notifications or other messages\n if (this.messageHandler) {\n this.messageHandler(message);\n }\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n }\n };\n\n this.ws.onerror = (event) => {\n const error = new Error(\"WebSocket error\");\n if (this.errorHandler) {\n this.errorHandler(error);\n }\n reject(error);\n };\n\n this.ws.onclose = () => {\n if (this.closeHandler) {\n this.closeHandler();\n }\n };\n });\n }\n\n disconnect(): void {\n if (this.ws) {\n this.ws.close();\n }\n }\n\n async sendRequest(request: JsonRpcRequest): Promise {\n return new Promise((resolve, reject) => {\n if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {\n reject(new Error(\"WebSocket not connected\"));\n return;\n }\n\n this.pendingRequests.set(request.id, resolve);\n this.ws.send(JSON.stringify(request));\n\n // Timeout after 30 seconds\n setTimeout(() => {\n if (this.pendingRequests.has(request.id)) {\n this.pendingRequests.delete(request.id);\n reject(new Error(\"Request timeout\"));\n }\n }, 30000);\n });\n }\n\n onMessage(handler: (message: JsonRpcMessage) => void): void {\n this.messageHandler = handler;\n }\n\n onError(handler: (error: Error) => void): void {\n this.errorHandler = handler;\n }\n\n onClose(handler: () => void): void {\n this.closeHandler = handler;\n }\n}\n\n// Event types\ntype MCPEventType = \"connected\" | \"disconnected\" | \"error\" | \"notification\" | \"message\";\n\ninterface MCPEventHandlers {\n connected?: () => void;\n disconnected?: (reason?: string) => void;\n error?: (error: Error) => void;\n notification?: (method: string, params: any) => void;\n message?: (message: JsonRpcMessage) => void;\n}\n\n/**\n * MCP Client with pluggable transport support\n */\nexport class MCPClient {\n private transport: Transport;\n private eventHandlers: MCPEventHandlers = {};\n private requestId = 0;\n private initialized = false;\n private capabilities: MCPCapabilities = {};\n readonly serverInfo: { name: string; version: string } | null = null;\n private tools: MCPTool[] = [];\n private prompts: MCPPrompt[] = [];\n\n isInitialized(): boolean {\n return this.initialized;\n }\n\n getCapabilities(): MCPCapabilities {\n return this.capabilities;\n }\n constructor(\n config: TransportConfig,\n private clientInfo = { name: \"MCP Browser Client\", version: \"1.0.0\" },\n ) {\n // Create appropriate transport based on config\n switch (config.type) {\n case \"http\":\n this.transport = new HttpTransport(config.endpoint, config.headers);\n break;\n case \"sse\":\n // SSE config expects endpoint to have both HTTP and SSE URLs\n const [httpUrl, sseUrl] = config.endpoint.split(\",\");\n if (!httpUrl || !sseUrl) {\n throw new Error(\"SSE transport requires \\\"httpUrl,sseUrl\\\" format\");\n }\n this.transport = new SseHttpTransport(httpUrl, sseUrl, config.headers);\n break;\n case \"websocket\":\n this.transport = new WebSocketTransport(config.endpoint);\n break;\n default:\n throw new Error(`Unknown transport type: ${config.type}`);\n }\n\n // Set up transport event handlers\n this.transport.onMessage((message) => this.handleMessage(message));\n this.transport.onError((error) => this.emit(\"error\", error));\n this.transport.onClose(() => {\n this.emit(\"disconnected\");\n this.initialized = false;\n });\n }\n\n /**\n * Connect to the MCP server\n */\n async connect(): Promise {\n await this.transport.connect();\n this.emit(\"connected\");\n await this.initialize();\n }\n\n /**\n * Disconnect from the MCP server\n */\n disconnect(): void {\n this.transport.disconnect();\n this.initialized = false;\n }\n\n /**\n * Initialize the MCP session\n */\n private async initialize(): Promise {\n const params: MCPInitializeParams = {\n protocolVersion: \"2025-03-26\",\n capabilities: {\n tools: true,\n prompts: true,\n resources: true,\n logging: true,\n },\n clientInfo: this.clientInfo,\n };\n\n const result = await this.sendRequest(\"initialize\", params);\n this.capabilities = result.capabilities;\n this.serverInfo = result.serverInfo;\n this.initialized = true;\n\n // Send initialized notification\n // this.sendNotification(\"initialized\", {});\n }\n\n /**\n * Send a JSON-RPC request\n */\n async sendRequest(method: string, params?: any): Promise {\n const id = ++this.requestId;\n const request: JsonRpcRequest = {\n jsonrpc: \"2.0\",\n id,\n method,\n params,\n };\n\n const response = await this.transport.sendRequest(request);\n\n if (response.error) {\n throw new Error(response.error.message);\n }\n\n return response.result as T;\n }\n\n /**\n * Send a JSON-RPC notification (no response expected)\n */\n async sendNotification(method: string, params?: any): Promise {\n const notification: JsonRpcNotification = {\n jsonrpc: \"2.0\",\n method: `notifications/${method}`,\n params,\n };\n\n // For HTTP transport, notifications are just requests without expecting response\n // For streaming transports, they're sent without an ID\n if (this.transport instanceof HttpTransport) {\n await fetch((this.transport as any).endpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...(this.transport as any).headers,\n },\n body: JSON.stringify(notification),\n });\n } else {\n // For WebSocket/SSE, we can send without expecting response\n await this.transport.sendRequest(notification as any);\n }\n }\n\n /**\n * Register event handlers\n */\n on(event: MCPEventType, handler: Function): void {\n switch (event) {\n case \"connected\":\n this.eventHandlers.connected = handler as () => void;\n break;\n case \"disconnected\":\n this.eventHandlers.disconnected = handler as (reason?: string) => void;\n break;\n case \"error\":\n this.eventHandlers.error = handler as (error: Error) => void;\n break;\n case \"notification\":\n this.eventHandlers.notification = handler as (method: string, params: any) => void;\n break;\n case \"message\":\n this.eventHandlers.message = handler as (message: JsonRpcMessage) => void;\n break;\n }\n }\n\n /**\n * Handle incoming messages\n */\n private handleMessage(message: JsonRpcMessage): void {\n this.emit(\"message\", message);\n\n // Handle notifications\n if (\"method\" in message && !(\"id\" in message)) {\n this.emit(\"notification\", message.method, message.params);\n }\n }\n\n /**\n * Emit events\n */\n private emit(event: \"connected\"): void;\n private emit(event: \"disconnected\", reason?: string): void;\n private emit(event: \"error\", error: Error): void;\n private emit(event: \"notification\", method: string, params: any): void;\n private emit(event: \"message\", message: JsonRpcMessage): void;\n private emit(event: MCPEventType, ...args: any[]): void {\n const handler = this.eventHandlers[event];\n if (handler) {\n handler(...args);\n }\n }\n\n // ... (All the MCP methods remain the same: listTools, callTool, etc.)\n\n /**\n * List available tools\n */\n async listTools(): Promise {\n if (!this.capabilities.tools) {\n throw new Error(\"Server does not support tools capability\");\n }\n if (this.tools && this.tools.length > 0) {\n return this.tools;\n }\n const result = await this.sendRequest<{ tools: any[] }>(\"tools/list\");\n this.tools = result.tools;\n return result.tools;\n }\n\n /**\n * Call a tool\n */\n async callTool(name: string, args: any): Promise {\n if (!this.capabilities.tools) {\n throw new Error(\"Server does not support tools capability\");\n }\n return this.sendRequest(\"tools/call\", { name, arguments: args });\n }\n\n /**\n * List available prompts\n */\n async listPrompts(): Promise {\n if (!this.capabilities.prompts) {\n throw new Error(\"Server does not support prompts capability\");\n }\n\n if (this.propmts) {\n return this.propmts;\n }\n const result = await this.sendRequest<{ prompts: any[] }>(\"prompts/list\");\n this.prompts = result.prompts;\n return result.prompts;\n }\n\n /**\n * Get a prompt\n */\n async getPrompt(name: string, args?: Record): Promise {\n if (!this.capabilities.prompts) {\n throw new Error(\"Server does not support prompts capability\");\n }\n const result = await this.sendRequest<{ prompt: string }>(\"prompts/get\", {\n name,\n arguments: args,\n });\n return result.prompt;\n }\n\n /**\n * List available resources\n */\n async listResources(): Promise {\n if (!this.capabilities.resources) {\n throw new Error(\"Server does not support resources capability\");\n }\n const result = await this.sendRequest<{ resources: any[] }>(\"resources/list\");\n return result.resources;\n }\n\n /**\n * Read a resource\n */\n async readResource(uri: string): Promise {\n if (!this.capabilities.resources) {\n throw new Error(\"Server does not support resources capability\");\n }\n const result = await this.sendRequest<{ contents: string }>(\"resources/read\", { uri });\n return result.contents;\n }\n\n /**\n * Send a log message\n */\n async log(level: \"debug\" | \"info\" | \"warning\" | \"error\", message: string, data?: any): Promise {\n if (!this.capabilities.logging) {\n throw new Error(\"Server does not support logging capability\");\n }\n await this.sendNotification(\"logging/log\", { level, message, data });\n }\n}\n\n// Example usage with different transports:\n/*\n// 1. Simple HTTP transport (request/response only)\nconst httpClient = new MCPClient({\n type: 'http',\n endpoint: 'https://api.example.com/mcp',\n headers: { 'Authorization': 'Bearer token' }\n});\n\n// 2. SSE + HTTP transport (server can push notifications)\nconst sseClient = new MCPClient({\n type: 'sse',\n endpoint: 'https://api.example.com/mcp,https://api.example.com/mcp/stream',\n headers: { 'Authorization': 'Bearer token' }\n});\n\n// 3. WebSocket transport (full duplex)\nconst wsClient = new MCPClient({\n type: 'websocket',\n endpoint: 'wss://api.example.com/mcp'\n});\n\n// Usage is the same regardless of transport\nawait httpClient.connect();\nconst tools = await httpClient.listTools();\nconst result = await httpClient.callTool('calculator', { op: 'add', a: 5, b: 3 });\n*/",[],[183,295,313],"096c7bb0-40c7-11f0-bf3c-76b3cceeab13",262,["D",1748988404914],[222,223,224,225],[183,295],"f8712d12-4538-11f0-996b-76b3cceeab13","useMCPClients.tsx","e64910b4-44c0-11f0-8193-76b3cceeab13","c5a5047e-40c1-11f0-bad7-76b3cceeab13",562,["D",1749477143705],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPServerConfig } from \"../../shared/types.ts\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\n\ninterface MCPClientState {\n client: MCPClient;\n config: MCPServerConfig;\n status: \"connecting\" | \"connected\" | \"error\" | \"disconnected\";\n error?: string;\n}\n\n/**\n * Hook to manage MCP client instances based on server configurations\n */\nexport default function useMCPClients(serverConfigs: MCPServerConfig[]) {\n const [clientStates, setClientStates] = useState>(new Map());\n\n // Create or update clients when server configs change\n useEffect(() => {\n const newClientStates = new Map();\n\n // Process each enabled server config\n for (const config of serverConfigs) {\n if (!config.enabled || !config.url) {\n continue;\n }\n\n // Check if we already have a client for this server\n const existingState = clientStates.get(config.id);\n\n // If config hasn't changed and client exists, reuse it\n if (\n existingState\n && existingState.config.url === config.url\n && existingState.config.authorization_token === config.authorization_token\n ) {\n newClientStates.set(config.id, existingState);\n continue;\n }\n\n // Disconnect existing client if config changed\n if (existingState) {\n try {\n existingState.client.disconnect();\n } catch (error) {\n console.warn(`Failed to disconnect MCP client ${config.id}:`, error);\n }\n }\n\n // Create new client\n try {\n const headers: Record = {};\n if (config.authorization_token) {\n headers[\"Authorization\"] = `Bearer ${config.authorization_token}`;\n }\n\n const client = new MCPClient({\n type: \"http\",\n endpoint: config.url,\n headers,\n }, {\n name: `Browser MCP Client - ${config.name}`,\n version: \"1.0.0\",\n });\n\n const clientState: MCPClientState = {\n client,\n config: { ...config },\n status: \"connecting\",\n };\n\n newClientStates.set(config.id, clientState);\n\n // Connect asynchronously\n connectClient(config.id, client, clientState);\n } catch (error) {\n console.error(`Failed to create MCP client for ${config.name}:`, error);\n newClientStates.set(config.id, {\n client: null as any,\n config: { ...config },\n status: \"error\",\n error: error instanceof Error ? error.message : String(error),\n });\n }\n }\n\n // Disconnect clients that are no longer needed\n for (const [id, state] of clientStates) {\n if (!newClientStates.has(id)) {\n try {\n state.client?.disconnect();\n } catch (error) {\n console.warn(`Failed to disconnect removed MCP client ${id}:`, error);\n }\n }\n }\n\n setClientStates(newClientStates);\n }, [serverConfigs]);\n\n // Helper function to connect a client\n const connectClient = useCallback(async (id: string, client: MCPClient, initialState: MCPClientState) => {\n try {\n console.log(`[useMCPClientsHook] Connecting MCP client ${id}...`);\n await client.connect();\n console.log(`[useMCPClientsHook] Connected MCP client ${id}.`);\n setClientStates(prev => {\n const newMap = new Map(prev);\n const currentState = newMap.get(id);\n if (currentState) {\n newMap.set(id, {\n ...currentState,\n status: \"connected\",\n error: undefined,\n });\n }\n return newMap;\n });\n } catch (error) {\n console.error(`Failed to connect MCP client ${id}:`, error);\n\n setClientStates(prev => {\n const newMap = new Map(prev);\n const currentState = newMap.get(id);\n if (currentState) {\n newMap.set(id, {\n ...currentState,\n status: \"error\",\n error: error instanceof Error ? error.message : String(error),\n });\n }\n return newMap;\n });\n }\n }, []);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n for (const [, state] of clientStates) {\n try {\n state.client?.disconnect();\n } catch (error) {\n console.warn(\"Failed to disconnect MCP client during cleanup:\", error);\n }\n }\n };\n }, []);\n\n // Get connected clients\n const getConnectedClients = useCallback((): MCPClient[] => {\n const clients: MCPClient[] = [];\n for (const [, state] of clientStates) {\n if (state.status === \"connected\" && state.client) {\n clients.push(state.client);\n }\n }\n return clients;\n }, [clientStates]);\n\n // Get client by server ID\n const getClientById = useCallback((serverId: string): MCPClient | null => {\n const state = clientStates.get(serverId);\n return (state?.status === \"connected\" && state.client) ? state.client : null;\n }, [clientStates]);\n\n // Get client states for debugging/status display\n const getClientStates = useCallback(() => {\n return Array.from(clientStates.entries()).map(([id, state]) => ({\n id,\n name: state.config.name,\n status: state.status,\n error: state.error,\n url: state.config.url,\n }));\n }, [clientStates]);\n\n return {\n connectedClients: getConnectedClients(),\n getClientById,\n getClientStates,\n clientCount: clientStates.size,\n connectedCount: getConnectedClients().length,\n };\n}",[],[183,335,327],"hooks","a9be224e-4716-11f0-b913-76b3cceeab13","useAnthropicStream.tsx","2023dfec-4095-11f0-b0e3-76b3cceeab13",614,["D",1749682311107],18,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport Anthropic, { MessageStreamEvent } from \"https://esm.sh/@anthropic-ai/sdk\";\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// External shared types\nimport type { MCPPrompt } from \"../../shared/types.ts\";\nimport type { AppConfig, Message } from \"../components/App.tsx\";\n\n/* ──────────────────────────────── Shared helpers ─────────────────────────── */\n\nexport type Status = \"idle\" | \"thinking\" | \"streaming\";\nexport type AssistantMsg = { role: \"assistant\"; content: any[] };\n\n/** merge delta (unchanged) */\nfunction mergeDelta(block: any, delta: any) {\n if (!delta) return;\n switch (delta.type) {\n case \"text_delta\":\n block.text = (block.text ?? \"\") + (delta.text ?? \"\");\n break;\n case \"input_json_delta\":\n block._input_json_str = (block._input_json_str ?? \"\") + (delta.partial_json ?? \"\");\n break;\n default:\n console.warn(`Unhandled delta`, delta);\n Object.assign(block, delta);\n }\n}\n\n/** build request body helpers (unchanged) */\nfunction buildBody(config: AppConfig, history: Message[], userText: string) {\n const mcp = config.mcpServers\n .filter((s) => s.enabled && s.url)\n .map((s) => ({\n type: \"url\",\n url: s.url,\n name: s.name,\n authorization_token: s.authorization_token,\n }));\n\n const msgs = history\n .filter((m) => m.role !== \"system\")\n .map((m) => ({ role: m.role, content: m.content }))\n .concat([{ role: \"user\", content: userText }]);\n\n return {\n model: config.selectedModel,\n max_tokens: 8_000,\n stream: true,\n system: config.systemPrompt,\n messages: msgs,\n ...(mcp.length && { mcp_servers: mcp }),\n } as const;\n}\n\n/** final assembly */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n Object.values(blocks).forEach((b) => {\n if (b._input_json_str !== undefined) {\n try {\n b.input = JSON.parse(b._input_json_str);\n } catch {\n /* swallow */\n }\n delete b._input_json_str;\n }\n });\n\n const content = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b)\n .map((k) => {\n const { delta, _streaming, ...blk } = blocks[k];\n return blk;\n });\n\n return { role: \"assistant\", content };\n}\n\n/* ──────────────────────────── useAnthropicStream ─────────────────────────── */\n\nexport default function useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = React.useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = React.useState(null);\n const abortRef = React.useRef(null);\n\n /* Anthropic SDK instance – memoised so we don't recreate each render */\n const anthropic = React.useMemo(() => {\n if (!config.anthropicApiKey) return null;\n return new Anthropic({\n dangerouslyAllowBrowser: true,\n apiKey: config.anthropicApiKey,\n baseURL: \"https://api.anthropic.com\", // explicit so it works with CORS pre‑flights\n defaultHeaders: {\n \"anthropic-version\": \"2023-06-01\",\n // Allow calling the API directly from the browser – you accept the risk!\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n },\n });\n }, [config.anthropicApiKey]);\n\n /* Abort helper */\n const abort = React.useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /* Main send/stream function – identical public contract */\n const send = React.useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!anthropic) throw new Error(\"API key missing\");\n if (status !== \"idle\") throw new Error(\"Stream already in progress\");\n\n setStatus(\"thinking\");\n\n const body = buildBody(config, history, userText);\n\n // Build request‑scoped headers (MCP, etc.)\n const extraHeaders: Record = {};\n if ((body as any).mcp_servers?.length) {\n extraHeaders[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n }\n\n // Local abort controller so user can cancel mid‑stream\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n let stream: AsyncIterable;\n try {\n // NOTE: The SDK automatically handles SSE parsing for us.\n stream = (await anthropic.messages.create(body as any, {\n signal: ctrl.signal,\n headers: extraHeaders,\n })) as AsyncIterable;\n } catch (err: any) {\n console.error(\"Failed to call Anthropic API\", err);\n throw err;\n }\n\n setStatus(\"streaming\");\n\n /* streaming state (same as before) */\n const blocks: Record = {};\n\n /* finish latch */\n let finalMsg: AssistantMsg | null = null;\n\n try {\n for await (const ev of stream) {\n console.log(ev);\n // Type narrowing via ev.type (runtime string)\n switch (ev.type) {\n case \"content_block_start\":\n blocks[ev.index] = structuredClone(ev.content_block);\n if (\n blocks[ev.index].type === \"text\"\n && blocks[ev.index].text === undefined\n ) {\n blocks[ev.index].text = \"\";\n }\n break;\n\n case \"content_block_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n }\n break;\n\n case \"message_delta\":\n if (ev.index !== undefined && blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n }\n break;\n\n case \"message_stop\":\n finalMsg = assembleMessage(blocks);\n break;\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n }\n\n /* push live preview on every event except stop */\n if (ev.type !== \"message_stop\") {\n const preview = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b)\n .map((k) => ({\n ...blocks[k],\n _streaming: k === Math.max(...Object.keys(blocks).map(Number)),\n }));\n setLiveBlocks(preview);\n }\n }\n } catch (err) {\n console.error(\"Error during streaming\", err);\n throw err;\n } finally {\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n }\n\n if (!finalMsg) throw new Error(\"Stream ended unexpectedly\");\n return finalMsg;\n },\n [anthropic, config, status],\n );\n\n return { status, liveBlocks, send, abort } as const;\n}",[],[183,335,337],"d519926c-40c1-11f0-8c2f-76b3cceeab13",257,["D",1748986169646],[219,220],[183,335],"db8df7c6-4b09-11f0-a0ec-76b3cceeab13","StreamingChat.tsx","10af5008-3d4a-11f0-8eb6-76b3cceeab13","35b7d323-5acc-4715-a23c-1ca451a40764",729,["D",1750116615869],156,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport EnhancedCommandPalette from \"./EnhancedCommandPalette.tsx\";\nimport MessageComponent from \"./Message.tsx\";\n\nimport { createParser, type ParsedEvent, type ReconnectInterval } from \"https://esm.sh/eventsource-parser@2\";\n\nimport useAnthropicStream from \"../hooks/useAnthropicStream.tsx\";\nimport { AnthropicStreamEvent, MCPPrompt } from \"../shared/types.ts\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\n\nimport { AppConfig, Message } from \"./App.tsx\";\nimport CommandPalette from \"./CommandPalette.tsx\";\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n mcpClients: MCPClient[];\n onAddMessage: (m: Omit) => void;\n onUpdateLastMessage: (content: string | any[]) => void;\n onDeleteMessage: (messageId: string) => void;\n onRetryFromMessage: (messageId: string) => string | null;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n mcpStatusComponent?: any;\n}\n\nconst chatInputCacheKey = \"chat_input\";\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onUpdateLastMessage,\n onDeleteMessage,\n onRetryFromMessage,\n onClearMessages,\n onOpenSettings,\n mcpStatusComponent,\n mcpClients,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\n const [showCommandPalette, setShowCommandPalette] = useState(false);\n const [commandPalettePosition, setCommandPalettePosition] = useState({ bottom: \"0\", left: \"0\" });\n const textareaRef = useRef(null);\n const messagesEndRef = useRef(null);\n const [showMcpStatus, setShowMcpStatus] = useState(false);\n\n const { status, liveBlocks, send, abort } = useAnthropicStream(config);\n\n const thinking = status === \"thinking\";\n const streaming = status === \"streaming\";\n\n useEffect(() => {\n setInput(localStorage.getItem(chatInputCacheKey) || \"\");\n }, []);\n\n useEffect(() => {\n if (!streaming) {\n if (messages.length) {\n const last = messages[messages.length - 1];\n if (\n last.role === \"assistant\" && Array.isArray(last.content)\n && last.content[last.content.length - 1]?.type === \"mcp_tool_use\"\n ) {\n console.warn(\"Trailing mcp_tool_use block. Requires cleanup!\");\n const updatedContent = [...last.content];\n updatedContent.push({\n tool_use_id: updatedContent[updatedContent.length - 1].id,\n type: \"mcp_tool_result\",\n is_error: true,\n content: [\n {\n type: \"text\",\n text: `Error: Output was terminated unexpectedly. Retry: yes.`,\n },\n ],\n });\n onUpdateLastMessage(updatedContent);\n }\n if (\n last.role === \"assistant\"\n && Array.isArray(last.content)\n && last.content[last.content.length - 1]?.type === \"mcp_tool_result\"\n && !last.content[last.content.length - 1].tool_use_id\n ) {\n console.warn(\"Trailing malformed mcp_tool_result block. Requires cleanup!\");\n const updatedContent = [...last.content];\n updatedContent[updatedContent.length - 1] = {\n tool_use_id: updatedContent[updatedContent.length - 2].id,\n type: \"mcp_tool_result\",\n is_error: true,\n content: [\n {\n type: \"text\",\n text: `Error: Output was terminated unexpectedly. Retry: yes.`,\n },\n ],\n };\n onUpdateLastMessage(updatedContent);\n }\n }\n }\n }, [messages, streaming]);\n\n /* scroll to bottom on new content */\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages, liveBlocks]);\n\n /* auto-grow textarea */\n useEffect(() => {\n if (!textareaRef.current) return;\n textareaRef.current.style.height = \"auto\";\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }, [input]);\n\n /* handle command palette visibility */\n useEffect(() => {\n const shouldShow = input.startsWith(\"/\") && input.length >= 1;\n\n if (shouldShow && !showCommandPalette) {\n // Calculate position for command palette\n if (textareaRef.current) {\n const rect = textareaRef.current.getBoundingClientRect();\n setCommandPalettePosition({\n bottom: `${rect.height + 60}px`,\n left: \"1em\",\n });\n }\n setShowCommandPalette(true);\n } else if (!shouldShow && showCommandPalette) {\n setShowCommandPalette(false);\n }\n }, [input, showCommandPalette]);\n\n /* ── helpers ──────────────────────────────────────────────── */\n\n /** Handle command execution from palette */\n const handleCommandExecute = useCallback((result: string) => {\n // Replace the current input with the result\n console.log(\"[Chat] Execute command\", result);\n setInput(result);\n localStorage.setItem(chatInputCacheKey, result);\n\n // Focus back to textarea\n if (textareaRef.current) {\n textareaRef.current.focus();\n // Position cursor at the end\n setTimeout(() => {\n if (textareaRef.current) {\n textareaRef.current.setSelectionRange(result.length, result.length);\n }\n }, 0);\n }\n }, []);\n\n const handleCommandResult = useCallback((result: any) => {\n console.log(\"[Chat] cmd result\");\n onAddMessage({\n role: \"assistant\",\n content: result,\n });\n setInput(\"\");\n localStorage.setItem(chatInputCacheKey, \"\");\n }, []);\n\n /** Retry a user message */\n const retryMessage = async (messageId: string) => {\n if (status !== \"idle\" || !config.anthropicApiKey) return;\n\n const userText = onRetryFromMessage(messageId);\n if (!userText) return;\n\n try {\n const assistant = await send(\n [...messages.slice(0, messages.findIndex(m => m.id === messageId) + 1)],\n userText,\n );\n onAddMessage(assistant);\n } catch (err: any) {\n console.error(err);\n abort();\n onAddMessage({\n role: \"system\",\n content: `Error: ${err.message ?? \"unknown\"}`,\n });\n }\n };\n\n /** Dispatch user input */\n const fireSend = async (userText?: string) => {\n console.log(\"[Chat] fire send\", { userText, input });\n const messageText = userText || input.trim();\n if (!messageText || status !== \"idle\" || !config.anthropicApiKey) return;\n\n // Only clear input if we're using the current input (not NextSteps execution)\n if (!userText) {\n setInput(\"\");\n localStorage.setItem(chatInputCacheKey, \"\");\n }\n\n console.log(\"[Chat] onAddMessage\");\n onAddMessage({ role: \"user\", content: messageText });\n\n try {\n const assistant = await send(\n [...messages],\n messageText,\n );\n onAddMessage(assistant);\n } catch (err: any) {\n console.error(err);\n abort();\n onAddMessage({\n role: \"system\",\n content: `Error: ${err.message ?? \"unknown\"}`,\n });\n }\n };\n\n /** Abort streaming and keep whatever we saw */\n const stopStreaming = () => {\n if (!streaming) return;\n\n const partial = liveBlocks\n ? liveBlocks.map((b) => {\n const { _streaming, ...rest } = b;\n return rest;\n })\n : [];\n\n abort();\n\n if (partial.length) {\n onAddMessage({\n role: \"assistant\",\n content: partial,\n });\n } else {\n onAddMessage({ role: \"system\", content: \"Message cancelled by user\" });\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n // Don't handle keys when command palette is managing them\n if (showCommandPalette) {\n return;\n }\n\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n if (streaming) {\n stopStreaming();\n } else {\n fireSend();\n }\n }\n };\n\n const canSend = input?.trim() && status === \"idle\" && config.anthropicApiKey;\n\n /* ── UI ─────────────────────────────────────────────────────── */\n return (\n <>\n

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

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

\n )}\n\n {messages.map((m, i) => (\n onDeleteMessage(m.id)}\n onRetry={m.role === \"user\" ? () => retryMessage(m.id) : undefined}\n canRetry={m.role === \"user\" && status === \"idle\"}\n mcpClients={mcpClients}\n onSendMessage={fireSend}\n autoExecuteNextSteps={config.autoExecuteNextSteps}\n isLatestMessage={!streaming && i === messages.length - 1}\n />\n ))}\n\n {/* live streaming preview */}\n {streaming && liveBlocks && (\n \n )}\n\n {!streaming && !thinking && !messages.length && !liveBlocks && (\n

\n Claude Chat
with MCP\n

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

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

\n Thinking\n

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

\n Processing\n

\n )}\n

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

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

\n\n

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

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

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

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

\n \n

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

\n\n

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

\n )}\n

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

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

\n )}\n

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

\n \n \n

\n );\n}",[],[183,360,362],"33acd48e-4b57-11f0-ba26-76b3cceeab13","ResourceViewer.tsx","ee0b601c-4b56-11f0-adf4-76b3cceeab13",736,["D",1750149834935],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\nimport type { FileViewerResult } from \"../../shared/types.ts\";\n\n// Import CodeMirror\nimport { EditorView, basicSetup } from \"https://esm.sh/@codemirror/basic-setup@0.20.0?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { javascript } from \"https://esm.sh/@codemirror/lang-javascript@6.2.1?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { html } from \"https://esm.sh/@codemirror/lang-html@6.4.7?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { css } from \"https://esm.sh/@codemirror/lang-css@6.2.1?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { json } from \"https://esm.sh/@codemirror/lang-json@6.0.1?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { markdown } from \"https://esm.sh/@codemirror/lang-markdown@6.2.4?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { python } from \"https://esm.sh/@codemirror/lang-python@6.1.4?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { xml } from \"https://esm.sh/@codemirror/lang-xml@6.0.2?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { EditorState } from \"https://esm.sh/@codemirror/state@6.4.0\";\n\ninterface ResourceViewerProps {\n fileViewerResult: FileViewerResult;\n mcpClients: MCPClient[];\n serverName?: string; // Retrieved from matching mcp_tool_use\n className?: string;\n}\n\ninterface ResourceCache {\n content: string;\n timestamp: number;\n}\n\n/**\n * ResourceViewer - Component for displaying MCP resource content with syntax highlighting\n * \n * Features:\n * - Fetches resource content using MCP client\n * - Renders with CodeMirror for syntax highlighting\n * - Supports fullscreen toggle\n * - Caches content in component state\n * - Error handling with retry functionality\n */\nexport default function ResourceViewer({ \n fileViewerResult, \n mcpClients = [], \n serverName,\n className = \"\" \n}: ResourceViewerProps) {\n const containerRef = useRef(null);\n const editorRef = useRef(null);\n const editorViewRef = useRef(null);\n const iframeRef = useRef(null);\n \n const [isFullscreen, setIsFullscreen] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [resourceCache, setResourceCache] = useState>(new Map());\n\n // Handle error case\n if ('error' in fileViewerResult) {\n return (\n

\n \n Resource Error\n \n

{fileViewerResult.error}

\n );\n }\n\n const { output } = fileViewerResult;\n const { resourcePointer } = output;\n const { sourceKey, fileType, renderHint } = resourcePointer;\n\n // Find the appropriate MCP client\n const findMCPClient = useCallback(() => {\n if (!serverName) {\n console.warn(\"[ResourceViewer] No server name provided, trying first available client\");\n return mcpClients[0] || null;\n }\n \n const client = mcpClients.find(client =>\n (client as any).serverInfo?.name === serverName ||\n (client as any).clientInfo?.name === serverName\n );\n \n if (!client) {\n console.warn(`[ResourceViewer] MCP server \"${serverName}\" not found`);\n }\n \n return client || null;\n }, [mcpClients, serverName]);\n\n // Get language extension for CodeMirror\n const getLanguageExtension = useCallback((fileType: string) => {\n switch (fileType) {\n case 'javascript':\n return javascript();\n case 'html':\n return html();\n case 'css':\n return css();\n case 'json':\n return json();\n case 'markdown':\n return markdown();\n case 'python':\n return python();\n case 'xml':\n return xml();\n default:\n return [];\n }\n }, []);\n\n // Fetch resource content\n const fetchResourceContent = useCallback(async (): Promise => {\n const cacheKey = `${serverName || 'default'}_${sourceKey}`;\n const cached = resourceCache.get(cacheKey);\n \n // Return cached content if available and recent (5 minutes)\n if (cached && Date.now() - cached.timestamp < 5 * 60 * 1000) {\n return cached.content;\n }\n\n const client = findMCPClient();\n if (!client) {\n throw new Error(`No MCP client available${serverName ? ` for server \"${serverName}\"` : ''}`);\n }\n\n console.log(`[ResourceViewer] Fetching resource: ${sourceKey} from ${serverName || 'default server'}`);\n const content = await client.readResource(sourceKey);\n \n // Cache the content\n setResourceCache(prev => new Map(prev.set(cacheKey, {\n content,\n timestamp: Date.now()\n })));\n \n return content;\n }, [sourceKey, serverName, findMCPClient, resourceCache]);\n\n // Load and display resource content\n const loadResource = useCallback(async () => {\n setIsLoading(true);\n setError(null);\n\n try {\n const content = await fetchResourceContent();\n \n if (renderHint.preferredRenderer === 'native' && (fileType === 'html' || fileType === 'xml')) {\n // Render in iframe for native HTML/XML content\n if (iframeRef.current) {\n const doc = iframeRef.current.contentDocument;\n if (doc) {\n doc.open();\n doc.write(content);\n doc.close();\n }\n }\n } else {\n // Render with CodeMirror for code/text content\n if (editorRef.current) {\n // Clean up existing editor\n if (editorViewRef.current) {\n editorViewRef.current.destroy();\n }\n\n // Create extensions array\n const extensions = [basicSetup];\n \n // Add language support if syntax highlighting is enabled\n if (renderHint.syntaxHighlight) {\n const langExtension = getLanguageExtension(fileType);\n if (langExtension) {\n extensions.push(langExtension);\n }\n }\n\n // Create editor state\n const state = EditorState.create({\n doc: content,\n extensions\n });\n\n // Create editor view\n editorViewRef.current = new EditorView({\n state,\n parent: editorRef.current\n });\n }\n }\n } catch (err) {\n console.error(\"[ResourceViewer] Failed to load resource:\", err);\n setError(err instanceof Error ? err.message : String(err));\n } finally {\n setIsLoading(false);\n }\n }, [fetchResourceContent, renderHint, fileType, getLanguageExtension]);\n\n // Load resource on mount and when dependencies change\n useEffect(() => {\n loadResource();\n \n // Cleanup editor on unmount\n return () => {\n if (editorViewRef.current) {\n editorViewRef.current.destroy();\n editorViewRef.current = null;\n }\n };\n }, [loadResource]);\n\n // Fullscreen functionality\n const enterFullscreen = useCallback(() => {\n setIsFullscreen(true);\n }, []);\n\n const exitFullscreen = useCallback(() => {\n setIsFullscreen(false);\n }, []);\n\n // Retry functionality\n const handleRetry = useCallback(() => {\n // Clear cache for this resource\n const cacheKey = `${serverName || 'default'}_${sourceKey}`;\n setResourceCache(prev => {\n const newCache = new Map(prev);\n newCache.delete(cacheKey);\n return newCache;\n });\n \n // Reload resource\n loadResource();\n }, [serverName, sourceKey, loadResource]);\n\n const isNativeRenderer = renderHint.preferredRenderer === 'native' && (fileType === 'html' || fileType === 'xml');\n\n return (\n \n {/* Header with metadata and controls */}\n

\n \n {sourceKey}\n \n \n {fileType} • {resourcePointer.contentType}\n {serverName && ` • ${serverName}`}\n \n

\n \n

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

\n\n {/* Content area */}\n

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

\n Loading resource...\n

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

\n \n Failed to load resource\n

{error}

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

Resource Metadata

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

\n )}\n\n {/* Native renderer (iframe) */}\n {!error && !isLoading && isNativeRenderer && (\n \n )}\n\n {/* Code renderer (CodeMirror) */}\n {!error && !isLoading && !isNativeRenderer && (\n \n )}\n

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

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

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

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

\n \n

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

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

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

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

\n );\n}",[],[183,360,379],"0c770b46-4b57-11f0-aaf6-76b3cceeab13","Message.tsx","629c8178-3cdd-11f0-8042-9e149126039e",733,["D",1750149769176],89,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { NextStepsOutput } from \"../../shared/types.ts\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\nimport { Message } from \"./App.tsx\";\nimport HTMLRenderer from \"./HTMLRenderer.tsx\";\nimport NextSteps from \"./NextSteps.tsx\";\nimport ResourceViewer from \"./ResourceViewer.tsx\";\n\ninterface MessageProps {\n message: Message;\n onDelete?: () => void;\n onRetry?: () => void;\n canRetry?: boolean;\n mcpClients?: MCPClient[]; // Add MCP clients for HTML renderer\n onSendMessage?: (content: string) => void; // Add callback for NextSteps execution\n autoExecuteNextSteps?: boolean; // Add auto-execution setting\n isLatestMessage?: boolean; // Track if this is the latest message for NextSteps\n}\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({ \n message, \n onDelete, \n onRetry, \n canRetry, \n mcpClients = [], \n onSendMessage,\n autoExecuteNextSteps = false,\n isLatestMessage = false\n}: 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 // Helper function to find matching mcp_tool_use block by tool_use_id\n const findToolUseBlock = (blocks: AnthropicBlock[], toolUseId: string): AnthropicBlock | null => {\n return blocks.find(block => \n block.type === \"mcp_tool_use\" && block.id === toolUseId\n ) || null;\n };\n\n const renderAnthropicBlocks = (blocks: AnthropicBlock[]) => {\n try {\n return (\n

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

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

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

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

\n );\n\n case \"mcp_tool_use\":\n return (\n
\n
\n {blk.name}\n
\n
\n onCopy(blk)}>\n \n \n {JSON.stringify(blk, null, 2)}\n
\n
\n );\n\n case \"mcp_tool_result\":\n try {\n const res = JSON.parse(blk.content[0].text);\n \n // Check for NextSteps output\n if (res.output?.nextSteps && onSendMessage) {\n const nextStepsData: NextStepsOutput = {\n nextSteps: res.output.nextSteps\n };\n \n return (\n
\n \n
\n );\n }\n \n // Check for ResourceViewer output (FileViewerResult)\n if (res.output?.resourcePointer && res.output?.sourceKey) {\n // Find the matching mcp_tool_use block to get server name\n const toolUseBlock = findToolUseBlock(blocks, blk.tool_use_id);\n const serverName = toolUseBlock?.server_name;\n \n return (\n \n );\n }\n \n // Check for HTML output (existing functionality)\n if (typeof res.output?.html === \"string\") {\n return (\n \n );\n }\n } catch (err) {\n // console.warn(\"Failed to parse MCP tool result payload\", err, { blk });\n }\n return (\n
\n
{blk.is_error ? \"(Error)\" : \"Ok\"}
\n
\n onCopy(blk)}>\n \n \n {typeof blk.content === 'string' ? blk.content : blk.content.map(b => b.text).join(\"\\n\")}\n
\n
\n );\n\n /* Unknown or future block types */\n default:\n return (\n
\n
{blk.type}
\n
\n onCopy(blk)}>\n \n \n {typeof blk.content === 'string' ? blk.content : blk.content.map(b => b.text).join(\"\\n\")}\n
\n
\n );\n }\n })}\n

\n );\n } catch (err) {\n return
Error: {err.message} {err.stack}
;\n }\n };\n\n /* ═══════ Decide renderer based on runtime type ═══════════════════════════ */\n\n const renderContent = () => {\n const content = message.content as unknown;\n\n // 1. Live preview (array of blocks)\n if (Array.isArray(content)) {\n return renderAnthropicBlocks(content as AnthropicBlock[]);\n } else {\n return renderAnthropicBlocks([{ type: \"text\", text: message.content }]);\n }\n\n // 3. Defensive fallback\n return (\n
\n {JSON.stringify(content, null, 2)}\n
\n );\n };\n\n /* ═══════ Render wrapper ══════════════════════════════════════════════════ */\n\n return (\n
\n
\n {renderContent()}\n
\n
\n \n {formatTimestamp(message.timestamp)}\n \n {onRetry && canRetry && (\n \n \n \n )}\n {onDelete && (\n \n \n \n )}\n {onCopy && (\n onCopy(message)}\n title=\"Copy this message\"\n >\n \n \n )}\n
\n
\n );\n}",[],[183,360,388],"3cdf35da-4538-11f0-a89f-76b3cceeab13","MCPStatus.tsx","ef20afbc-42bd-11f0-9fa6-76b3cceeab13",561,["D",1749476829011],21,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPClient } from \"../utils/MCPClient.ts\"; // Import the MCP client we created\n\n// Type definitions\ninterface MCPPrompt {\n serverId: string;\n name: string;\n description?: string;\n arguments?: Array<{\n name: string;\n description?: string;\n required?: boolean;\n }>;\n}\n\ninterface MCPTool {\n serverId: string;\n name: string;\n description?: string;\n inputSchema?: any;\n}\n\ninterface MCPServerConfig {\n id: string;\n name: string;\n url?: string;\n enabled: boolean;\n authorization_token?: string;\n}\n\ninterface MCPTestResult {\n success: boolean;\n error?: string;\n}\n\ninterface MCPStatusProps {\n servers: MCPServerConfig[];\n onServerUpdate?: (serverId: string, updates: Partial) => void;\n className?: string;\n show: boolean;\n}\n\ninterface MCPServerStatus {\n server: MCPServerConfig;\n testResult: MCPTestResult | null;\n prompts: MCPPrompt[];\n tools: MCPTool[];\n isExpanded: boolean;\n lastChecked: number | null;\n client?: MCPClient;\n}\n\nexport default function MCPStatus({ servers, onServerUpdate, show, className = \"\" }: MCPStatusProps) {\n const [serverStatuses, setServerStatuses] = useState>({});\n const [isInitializing, setIsInitializing] = useState(true);\n const [showDetails, setShowDetails] = useState(false);\n const clientsRef = useRef>(new Map());\n\n // Initialize server statuses\n useEffect(() => {\n const initializeStatuses = () => {\n setIsInitializing(true);\n const statuses: Record = {};\n servers.forEach(server => {\n statuses[server.id] = {\n server,\n testResult: null,\n prompts: [],\n tools: [],\n isExpanded: false,\n lastChecked: null,\n };\n });\n setServerStatuses(statuses);\n };\n\n initializeStatuses();\n }, [servers]);\n\n // Cleanup clients on unmount\n useEffect(() => {\n return () => {\n clientsRef.current.forEach(client => {\n client.disconnect();\n });\n clientsRef.current.clear();\n };\n }, []);\n\n // Test a single server using MCP client\n const testServer = async (server: MCPServerConfig): Promise => {\n if (!server.url) {\n return { success: false, error: \"No URL configured\" };\n }\n\n // Clean up existing client if any\n const existingClient = clientsRef.current.get(server.id);\n if (existingClient) {\n existingClient.disconnect();\n clientsRef.current.delete(server.id);\n }\n\n try {\n // Determine transport type based on URL\n let transportConfig: any;\n if (server.url.startsWith(\"ws://\") || server.url.startsWith(\"wss://\")) {\n transportConfig = {\n type: \"websocket\",\n endpoint: server.url,\n };\n } else if (server.url.includes(\",\")) {\n // Assume SSE format: \"httpUrl,sseUrl\"\n transportConfig = {\n type: \"sse\",\n endpoint: server.url,\n headers: server.authorization_token\n ? {\n \"Authorization\": `Bearer ${server.authorization_token}`,\n }\n : {},\n };\n } else {\n // Default to HTTP\n transportConfig = {\n type: \"http\",\n endpoint: server.url,\n headers: server.authorization_token\n ? {\n \"Authorization\": `Bearer ${server.authorization_token}`,\n }\n : {},\n };\n }\n\n const client = new MCPClient(transportConfig, {\n name: `MCPStatus-${server.name}`,\n version: \"1.0.0\",\n });\n\n // Set up error handler\n client.on(\"error\", (error: Error) => {\n console.error(`[MCP Status] Error from server ${server.id}:`, error);\n });\n\n // Connect and initialize\n await client.connect();\n clientsRef.current.set(server.id, client);\n\n return { success: true };\n } catch (error) {\n console.error(`[MCP Status] Failed to connect to ${server.name}:`, error);\n return {\n success: false,\n error: error instanceof Error ? error.message : \"Connection failed\",\n };\n }\n };\n\n // Fetch prompts from a server\n const fetchPrompts = async (server: MCPServerConfig): Promise => {\n const client = clientsRef.current.get(server.id);\n if (!client || !client.isInitialized()) {\n return [];\n }\n\n try {\n const prompts = await client.listPrompts();\n return prompts.map(prompt => ({\n serverId: server.id,\n ...prompt,\n }));\n } catch (error) {\n console.error(`[MCP Status] Failed to fetch prompts from ${server.name}:`, error);\n return [];\n }\n };\n\n // Fetch tools from a server\n const fetchTools = async (server: MCPServerConfig): Promise => {\n const client = clientsRef.current.get(server.id);\n console.log(\"[MCP Status] Fetching tools from\", server.name, client?.isInitialized(), client);\n if (!client || !client.isInitialized()) {\n return [];\n }\n\n try {\n const tools = await client.listTools();\n return tools.map(tool => ({\n serverId: server.id,\n ...tool,\n }));\n } catch (error) {\n console.error(`[MCP Status] Failed to fetch tools from ${server.name}:`, error);\n return [];\n }\n };\n\n // Auto-check enabled servers on startup\n useEffect(() => {\n const checkEnabledServers = async () => {\n if (!isInitializing) return;\n\n const enabledServers = servers.filter(s => s.enabled && s.url);\n if (enabledServers.length === 0) {\n setIsInitializing(false);\n return;\n }\n\n console.log(`[MCP Status] Checking ${enabledServers.length} enabled servers...`);\n\n try {\n // Test all enabled servers in parallel\n const testPromises = enabledServers.map(async server => {\n // const testResult = await testServer(server);\n // let prompts: MCPPrompt[] = [];\n // let tools: MCPTool[] = [];\n\n // if (testResult.success) {\n // // Fetch prompts and tools if test succeeded\n // [prompts, tools] = await Promise.all([\n // fetchPrompts(server),\n // fetchTools(server),\n // ]);\n // }\n const testResult = { status: \"mocked\" };\n const prompts = [];\n const tools = [];\n\n return {\n serverId: server.id,\n testResult,\n prompts,\n tools,\n };\n });\n\n const results = await Promise.all(testPromises);\n\n // Update statuses\n setServerStatuses(prev => {\n const updated = { ...prev };\n\n results.forEach(({ serverId, testResult, prompts, tools }) => {\n if (updated[serverId]) {\n updated[serverId] = {\n ...updated[serverId],\n testResult,\n prompts,\n tools,\n lastChecked: Date.now(),\n };\n }\n });\n\n return updated;\n });\n\n console.log(`[MCP Status] Startup check complete:`, {\n tested: results.length,\n successful: results.filter(r => r.testResult.success).length,\n prompts: results.reduce((sum, r) => sum + r.prompts.length, 0),\n tools: results.reduce((sum, r) => sum + r.tools.length, 0),\n }, results);\n } catch (error) {\n console.error(\"[MCP Status] Error during startup check:\", error);\n } finally {\n setIsInitializing(false);\n }\n };\n\n checkEnabledServers();\n }, [servers, isInitializing]);\n\n // Manual refresh function\n const refreshServer = async (serverId: string) => {\n const server = servers.find(s => s.id === serverId);\n if (!server || !server.enabled || !server.url) return;\n\n setServerStatuses(prev => ({\n ...prev,\n [serverId]: {\n ...prev[serverId],\n testResult: null, // Clear previous result to show loading\n },\n }));\n\n try {\n const testResult = await testServer(server);\n let prompts: MCPPrompt[] = [];\n let tools: MCPTool[] = [];\n\n if (testResult.success) {\n [prompts, tools] = await Promise.all([\n fetchPrompts(server),\n fetchTools(server),\n ]);\n }\n\n setServerStatuses(prev => ({\n ...prev,\n [serverId]: {\n ...prev[serverId],\n testResult,\n prompts,\n tools,\n lastChecked: Date.now(),\n },\n }));\n } catch (error) {\n console.error(`[MCP Status] Error refreshing server ${serverId}:`, error);\n setServerStatuses(prev => ({\n ...prev,\n [serverId]: {\n ...prev[serverId],\n testResult: { success: false, error: \"Refresh failed\" },\n lastChecked: Date.now(),\n },\n }));\n }\n };\n\n const toggleServerExpansion = (serverId: string) => {\n setServerStatuses(prev => ({\n ...prev,\n [serverId]: {\n ...prev[serverId],\n isExpanded: !prev[serverId]?.isExpanded,\n },\n }));\n };\n\n const getStatusIcon = (status: MCPServerStatus) => {\n if (!status.server.enabled) return \"⚪\"; // Disabled\n if (!status.server.url) return \"⚠️\"; // No URL\n if (status.testResult === null) return \"⏳\"; // Testing/Loading\n return status.testResult.success ? \"✅\" : \"❌\"; // Success/Error\n };\n\n const getStatusText = (status: MCPServerStatus) => {\n if (!status.server.enabled) return \"Disabled\";\n if (!status.server.url) return \"No URL configured\";\n if (status.testResult === null) return \"Checking...\";\n if (status.testResult.success) {\n const promptCount = status.prompts.length;\n const toolCount = status.tools.length;\n const items = [];\n if (promptCount > 0) items.push(`${promptCount} prompt${promptCount !== 1 ? \"s\" : \"\"}`);\n if (toolCount > 0) items.push(`${toolCount} tool${toolCount !== 1 ? \"s\" : \"\"}`);\n\n // Add server info if available\n const client = clientsRef.current.get(status.server.id);\n if (client && client.server) {\n return `Online (${client.server.name} v${client.server.version})${\n items.length > 0 ? ` - ${items.join(\", \")}` : \"\"\n }`;\n }\n\n return `Online${items.length > 0 ? ` (${items.join(\", \")})` : \"\"}`;\n }\n return `Error: ${status.testResult.error}`;\n };\n\n const enabledServers = servers.filter(s => s.enabled);\n const onlineServers = Object.values(serverStatuses).filter(s => s.server.enabled && s.testResult?.success);\n const totalPrompts = Object.values(serverStatuses).reduce((sum, s) => sum + s.prompts.length, 0);\n const totalTools = Object.values(serverStatuses).reduce((sum, s) => sum + s.tools.length, 0);\n\n if (isInitializing) {\n return (\n
\n
\n ⏳\n Initializing MCP servers...\n
\n
\n );\n }\n\n if (!show) return null;\n\n return (\n
\n
setShowDetails(!showDetails)}>\n \n {enabledServers.length === 0\n ? \"⚪\"\n : onlineServers.length === enabledServers.length\n ? \"✅\"\n : onlineServers.length > 0\n ? \"⚠️\"\n : \"❌\"}\n \n \n {enabledServers.length === 0\n ? \"No MCP servers enabled\"\n : `${onlineServers.length}/${enabledServers.length} servers online • ${totalPrompts} prompts • ${totalTools} tools`}\n \n {showDetails ? \"▼\" : \"▶\"}\n
\n\n {showDetails && (\n
\n {servers.length === 0\n ? (\n
\n No MCP servers configured\n
\n )\n : (\n servers.map(server => {\n const status = serverStatuses[server.id];\n if (!status) return null;\n\n const client = clientsRef.current.get(server.id);\n\n return (\n
\n toggleServerExpansion(server.id)}\n >\n {getStatusIcon(status)}\n {server.name}\n {getStatusText(status)}\n
\n {server.enabled && server.url && (\n {\n e.stopPropagation();\n refreshServer(server.id);\n }}\n className=\"refresh-button\"\n title=\"Refresh server status\"\n disabled={status.testResult === null}\n >\n 🔄\n \n )}\n \n {status.isExpanded ? \"▼\" : \"▶\"}\n \n
\n
\n\n {status.isExpanded && (\n
\n
\n
\n URL:\n {server.url || \"Not configured\"}\n
\n
\n Auth:\n \n {server.authorization_token ? \"Configured\" : \"None\"}\n \n
\n {client && (\n <>\n
\n Transport:\n \n {server.url?.startsWith(\"ws\")\n ? \"WebSocket\"\n : server.url?.includes(\",\")\n ? \"SSE + HTTP\"\n : \"HTTP\"}\n \n
\n {client.serverCapabilities && (\n
\n Capabilities:\n \n {Object.entries(client.serverCapabilities)\n .filter(([_, enabled]) => enabled)\n .map(([cap]) => cap)\n .join(\", \") || \"None\"}\n \n
\n )}\n \n )}\n {status.lastChecked && (\n
\n Last checked:\n \n {new Date(status.lastChecked).toLocaleTimeString()}\n \n
\n )}\n
\n\n {status.prompts.length > 0 && (\n
\n
Available Prompts ({status.prompts.length})
\n
\n {status.prompts.map((prompt, index) => (\n
\n /{prompt.name}\n {prompt.description && (\n {prompt.description}\n )}\n {prompt.arguments && prompt.arguments.length > 0 && (\n
\n {prompt.arguments.map((arg, argIndex) => (\n \n {arg.required ? `<${arg.name}>` : `[${arg.name}]`}\n \n ))}\n
\n )}\n
\n ))}\n
\n
\n )}\n\n {status.tools.length > 0 && (\n
\n
Available Tools ({status.tools.length})
\n
\n {status.tools.map((tool, index) => (\n
\n {tool.name}\n {tool.description && {tool.description}}\n {tool.inputSchema && (\n
\n
\n
Input Schema
\n
\n {JSON.stringify(tool.inputSchema, null, 2)}\n
\n
\n
\n )}\n
\n ))}\n
\n
\n )}\n\n {status.testResult && !status.testResult.success && (\n
\n Error: {status.testResult.error}\n
\n )}\n
\n )}\n
\n );\n })\n )}\n
\n )}\n

\n );\n}\n\n// CSS styles for the component (add to your stylesheet)\nconst styles = `\n.mcp-status {\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-size: 14px;\n color: #333;\n}\n\n.mcp-status-summary {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 8px 12px;\n background: #f5f5f5;\n border-radius: 6px;\n cursor: pointer;\n user-select: none;\n}\n\n.mcp-status-summary:hover {\n background: #e8e8e8;\n}\n\n.status-icon {\n font-size: 16px;\n}\n\n.status-text {\n flex: 1;\n}\n\n.expand-icon {\n font-size: 12px;\n opacity: 0.6;\n}\n\n.mcp-status-details {\n margin-top: 8px;\n padding: 12px;\n background: #f9f9f9;\n border-radius: 6px;\n}\n\n.mcp-server-status {\n margin-bottom: 12px;\n background: white;\n border-radius: 6px;\n overflow: hidden;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n}\n\n.mcp-server-header {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 12px;\n cursor: pointer;\n user-select: none;\n}\n\n.mcp-server-header:hover {\n background: #f5f5f5;\n}\n\n.server-icon {\n font-size: 16px;\n}\n\n.server-name {\n font-weight: 500;\n flex: 0 0 auto;\n}\n\n.server-status {\n flex: 1;\n font-size: 13px;\n color: #666;\n}\n\n.server-actions {\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.refresh-button {\n padding: 4px 8px;\n background: none;\n border: none;\n cursor: pointer;\n font-size: 14px;\n opacity: 0.6;\n transition: opacity 0.2s;\n}\n\n.refresh-button:hover:not(:disabled) {\n opacity: 1;\n}\n\n.refresh-button:disabled {\n cursor: not-allowed;\n opacity: 0.3;\n}\n\n.mcp-server-details {\n padding: 12px;\n border-top: 1px solid #e0e0e0;\n}\n\n.server-info {\n margin-bottom: 12px;\n}\n\n.info-row {\n display: flex;\n gap: 8px;\n margin-bottom: 4px;\n font-size: 13px;\n}\n\n.info-label {\n font-weight: 500;\n opacity: 0.7;\n flex: 0 0 100px;\n}\n\n.info-value {\n color: #666;\n}\n\n.server-prompts,\n.server-tools {\n margin-top: 16px;\n}\n\n.server-prompts h4,\n.server-tools h4 {\n font-size: 14px;\n font-weight: 500;\n margin-bottom: 8px;\n}\n\n.prompts-list,\n.tools-list {\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n\n.prompt-item,\n.tool-item {\n padding: 8px;\n background: #f5f5f5;\n border-radius: 4px;\n}\n\n.prompt-name,\n.tool-name {\n font-weight: 500;\n font-family: monospace;\n font-size: 13px;\n}\n\n.prompt-description,\n.tool-description {\n display: block;\n font-size: 12px;\n color: #666;\n margin-top: 4px;\n}\n\n.prompt-args {\n display: flex;\n gap: 8px;\n margin-top: 4px;\n}\n\n.prompt-arg {\n font-family: monospace;\n font-size: 12px;\n color: #0066cc;\n}\n\n.tool-schema {\n margin-top: 8px;\n}\n\n.tool-schema summary {\n font-size: 12px;\n cursor: pointer;\n user-select: none;\n opacity: 0.7;\n}\n\n.schema-json {\n margin-top: 4px;\n padding: 8px;\n background: #f0f0f0;\n border-radius: 4px;\n font-size: 11px;\n overflow-x: auto;\n}\n\n.server-error {\n margin-top: 12px;\n padding: 8px;\n background: #ffebee;\n color: #c62828;\n border-radius: 4px;\n font-size: 13px;\n}\n\n.mcp-status-empty {\n text-align: center;\n color: #666;\n padding: 20px;\n}\n`;",[],[183,360,397],"35460650-4aa6-11f0-bb2f-76b3cceeab13","HTMLRenderer.tsx","abffdc26-44c0-11f0-8e76-76b3cceeab13",688,["D",1750073816720],27,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\n\ninterface HTMLRendererProps {\n html: string;\n mcpClients?: MCPClient[];\n className?: string;\n}\n\ninterface MCPContextAPI {\n // Tool operations\n listTools: () => Promise;\n callTool: (serverName: string, toolName: string, args: any) => Promise;\n\n // Prompt operations\n listPrompts: () => Promise;\n getPrompt: (serverName: string, promptName: string, args?: Record) => Promise;\n\n // Resource operations\n listResources: () => Promise;\n readResource: (serverName: string, uri: string) => Promise;\n\n // Utility functions\n log: (level: \"debug\" | \"info\" | \"warning\" | \"error\", message: string, data?: any) => void;\n\n // UI interactions\n requestFullscreen: () => void;\n exitFullscreen: () => void;\n isFullscreen: () => boolean;\n}\n\n/**\n * HTMLRenderer - Encapsulated component for rendering HTML output from MCP tools\n *\n * Features:\n * - Renders HTML in a secure iframe\n * - Provides fullscreen enter/exit affordances\n * - Exposes MCP context API to iframe content\n * - Handles iframe communication via postMessage\n */\nexport default function HTMLRenderer({ html, mcpClients = [], className = \"\" }: HTMLRendererProps) {\n const iframeRef = useRef(null);\n const containerRef = useRef(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const [isLoading, setIsLoading] = useState(true);\n console.log(\"[MCP/Browser Renderer] HTMLRenderer: Rendering HTML:\", { mcpClients });\n\n // Create MCP context API that will be exposed to iframe\n const createMCPContext = useCallback((): MCPContextAPI => {\n const findClientByName = (serverName: string) => {\n console.log(\"[MCP/Browser Renderer] Finding client by name:\", serverName, mcpClients);\n return mcpClients.find(client =>\n (client as any).serverInfo?.name === serverName\n || (client as any).clientInfo?.name === serverName\n );\n };\n\n return {\n // Tool operations\n listTools: async () => {\n const allTools = [];\n for (const client of mcpClients) {\n try {\n const tools = await client.listTools();\n allTools.push(...tools.map(tool => ({\n ...tool,\n serverName: (client as any).serverInfo?.name || \"Unknown\",\n })));\n } catch (error) {\n console.warn(\"Failed to list tools from client:\", error);\n }\n }\n return allTools;\n },\n\n callTool: async (serverName: string, toolName: string, args: any) => {\n console.log(\"[MCP/Browser Renderer] Calling tool:\", serverName, toolName, args);\n const client = findClientByName(serverName);\n if (!client) {\n throw new Error(`MCP server \"${serverName}\" not found`);\n }\n return await client.callTool(toolName, args);\n },\n\n // Prompt operations\n listPrompts: async () => {\n const allPrompts = [];\n for (const client of mcpClients) {\n try {\n const prompts = await client.listPrompts();\n allPrompts.push(...prompts.map(prompt => ({\n ...prompt,\n serverName: (client as any).serverInfo?.name || \"Unknown\",\n })));\n } catch (error) {\n console.warn(\"Failed to list prompts from client:\", error);\n }\n }\n return allPrompts;\n },\n\n getPrompt: async (serverName: string, promptName: string, args?: Record) => {\n const client = findClientByName(serverName);\n if (!client) {\n throw new Error(`MCP server \"${serverName}\" not found`);\n }\n return await client.getPrompt(promptName, args);\n },\n\n // Resource operations\n listResources: async () => {\n const allResources = [];\n for (const client of mcpClients) {\n try {\n const resources = await client.listResources();\n allResources.push(...resources.map(resource => ({\n ...resource,\n serverName: (client as any).serverInfo?.name || \"Unknown\",\n })));\n } catch (error) {\n console.warn(\"Failed to list resources from client:\", error);\n }\n }\n return allResources;\n },\n\n readResource: async (serverName: string, uri: string) => {\n const client = findClientByName(serverName);\n if (!client) {\n throw new Error(`MCP server \"${serverName}\" not found`);\n }\n return await client.readResource(uri);\n },\n\n // Utility functions\n log: (level: \"debug\" | \"info\" | \"warning\" | \"error\", message: string, data?: any) => {\n console[level](`[HTMLRenderer] ${message}`, data);\n },\n\n // UI interactions\n requestFullscreen: () => {\n if (containerRef.current && !isFullscreen) {\n enterFullscreen();\n }\n },\n\n exitFullscreen: () => {\n if (isFullscreen) {\n exitFullscreen();\n }\n },\n\n isFullscreen: () => isFullscreen,\n };\n }, [mcpClients, isFullscreen]);\n\n // Fullscreen functionality\n const enterFullscreen = useCallback(() => {\n const container = containerRef.current;\n if (!container) return;\n setIsFullscreen(true);\n }, []);\n\n const exitFullscreen = useCallback(() => {\n setIsFullscreen(false);\n }, []);\n\n // Handle iframe communication\n useEffect(() => {\n const handleMessage = async (event: MessageEvent) => {\n const iframe = iframeRef.current;\n if (!iframe || event.source !== iframe.contentWindow) {\n return;\n }\n\n const { type, id, method, args } = event.data;\n\n if (type !== \"mcp-api-call\") {\n return;\n }\n\n try {\n const mcpContext = createMCPContext();\n const methodFunc = (mcpContext as any)[method];\n\n if (typeof methodFunc !== \"function\") {\n throw new Error(`Unknown MCP API method: ${method}`);\n }\n\n const result = await methodFunc(...(args || []));\n\n iframe.contentWindow?.postMessage({\n type: \"mcp-api-response\",\n id,\n success: true,\n result,\n }, \"*\");\n } catch (error) {\n iframe.contentWindow?.postMessage({\n type: \"mcp-api-response\",\n id,\n success: false,\n error: error instanceof Error ? error.message : String(error),\n }, \"*\");\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n return () => window.removeEventListener(\"message\", handleMessage);\n }, [createMCPContext, mcpClients]);\n\n // Create iframe content with injected MCP context\n const createIframeContent = useCallback(() => {\n const contextScript = `\n \n \n \n \n `;\n\n // localStorage.setItem(\"__debugHTML\", html);\n\n return `\n \n \n \n \n \n \n ${contextScript}\n \n \n
\n \n
\n \n
\n ${html}\n
\n \n \n \n \n `;\n }, [html, createMCPContext, mcpClients]);\n\n const iframeKey = React.useMemo(\n () =>\n `clients-${\n mcpClients.map(\n c => (c as any).serverInfo?.name ?? (c as any).clientInfo?.name,\n ).join(\"_\")\n }`,\n [mcpClients],\n );\n\n // Handle iframe load\n const handleIframeLoad = useCallback(() => {\n setIsLoading(false);\n\n // Listen for iframe ready message\n const handleIframeReady = (event: MessageEvent) => {\n if (event.data.type === \"iframe-ready\" && event.source === iframeRef.current?.contentWindow) {\n // Iframe is ready, send initial fullscreen state\n iframeRef.current?.contentWindow?.postMessage({\n type: \"fullscreen-changed\",\n isFullscreen,\n }, \"*\");\n }\n };\n\n window.addEventListener(\"message\", handleIframeReady);\n return () => window.removeEventListener(\"message\", handleIframeReady);\n }, [isFullscreen]);\n\n // Notify iframe of fullscreen changes\n useEffect(() => {\n if (iframeRef.current?.contentWindow) {\n iframeRef.current.contentWindow.postMessage({\n type: \"fullscreen-changed\",\n isFullscreen,\n }, \"*\");\n }\n }, [isFullscreen]);\n\n return (\n \n {/* External fullscreen controls */}\n {!isFullscreen && (\n \n e.currentTarget.style.background = \"rgba(0, 0, 0, 0.9)\"}\n onMouseLeave={(e) => e.currentTarget.style.background = \"rgba(0, 0, 0, 0.7)\"}\n title=\"Enter fullscreen\"\n >\n ⛶\n \n

\n )}\n\n {/* Loading indicator */}\n {isLoading && (\n \n
\n
\n
\n
\n
\n Loading HTML content...\n

\n )}\n\n {/* Iframe */}\n \n

\n );\n}",[],[183,360,406],"4cead5ca-4a46-11f0-b777-76b3cceeab13","EnhancedCommandPalette.tsx","2023c796-4095-11f0-b0e3-76b3cceeab13",675,["D",1750032624703],71,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\n\n// Type definitions\ninterface MCPPrompt {\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n arguments?: Array<{\n name: string;\n description?: string;\n required?: boolean;\n }>;\n}\n\ninterface MCPTool {\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n inputSchema?: any;\n}\n\ninterface MCPServerConfig {\n id: string;\n name: string;\n url?: string;\n enabled: boolean;\n authorization_token?: string;\n}\n\ntype CommandType = \"prompt\" | \"tool\";\n\ninterface Command {\n type: CommandType;\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n data: MCPPrompt | MCPTool;\n}\n\ninterface CommandPaletteProps {\n servers: MCPServerConfig[];\n query: string;\n onClose: () => void;\n onExecute: (result: string) => void;\n onResult: (result: any) => void;\n position: { bottom: string; left: string };\n visible: boolean;\n mcpClients: MCPClient[];\n}\n\ninterface ArgumentValue {\n [key: string]: any;\n}\n\n// Helper functions for JSON Schema handling\nconst getDefaultValue = (schema: any): any => {\n if (schema.default !== undefined) return schema.default;\n\n switch (schema.type) {\n case \"boolean\":\n return false;\n case \"number\":\n case \"integer\":\n return \"\";\n case \"array\":\n return [];\n case \"object\":\n return {};\n default:\n return \"\";\n }\n};\n\nconst coerceValue = (value: any, schema: any): any => {\n if (value === \"\" || value === null || value === undefined) {\n return schema.default !== undefined ? schema.default : null;\n }\n\n switch (schema.type) {\n case \"boolean\":\n return Boolean(value);\n case \"number\":\n const num = parseFloat(value);\n return isNaN(num) ? null : num;\n case \"integer\":\n const int = parseInt(value, 10);\n return isNaN(int) ? null : int;\n case \"array\":\n if (Array.isArray(value)) return value;\n if (typeof value === \"string\") {\n try {\n const parsed = JSON.parse(value);\n return Array.isArray(parsed) ? parsed : [value];\n } catch {\n return value.split(\",\").map(s => s.trim()).filter(s => s);\n }\n }\n return [value];\n case \"object\":\n if (typeof value === \"object\") return value;\n if (typeof value === \"string\") {\n try {\n return JSON.parse(value);\n } catch {\n return {};\n }\n }\n return {};\n default:\n return String(value);\n }\n};\n\nconst getInputPlaceholder = (key: string, schema: any): string => {\n if (schema.description) return schema.description;\n\n switch (schema.type) {\n case \"array\":\n return schema.items?.type === \"string\"\n ? \"Enter comma-separated values...\"\n : \"Enter JSON array...\";\n case \"object\":\n return \"Enter JSON object...\";\n case \"number\":\n case \"integer\":\n const constraints = [];\n if (schema.minimum !== undefined) constraints.push(`min: ${schema.minimum}`);\n if (schema.maximum !== undefined) constraints.push(`max: ${schema.maximum}`);\n return constraints.length ? `Enter ${key} (${constraints.join(\", \")})...` : `Enter ${key}...`;\n default:\n return `Enter ${key}...`;\n }\n};\n\nexport default function EnhancedCommandPalette({\n servers,\n query,\n onClose,\n onExecute,\n onResult,\n position,\n visible,\n mcpClients,\n}: CommandPaletteProps) {\n const [commands, setCommands] = useState([]);\n const [selectedIndex, setSelectedIndex] = useState(0);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [showArgumentDialog, setShowArgumentDialog] = useState(false);\n const [selectedCommand, setSelectedCommand] = useState(null);\n const [argumentValues, setArgumentValues] = useState({});\n const clientsRef = useRef>(new Map());\n const argumentInputRefs = useRef>(new Map());\n\n // Initialize MCP clients and fetch prompts/tools\n useEffect(() => {\n const initializeClients = async () => {\n console.log(`[CMD] Initializing MCP clients...`, servers);\n if (!visible) return;\n\n setLoading(true);\n setError(null);\n\n const newCommands: Command[] = [];\n\n for (const client of mcpClients) {\n let server = {\n name: \"Unkown\",\n id: \"unknown\",\n };\n try {\n console.log(\"[CMD] MCP Client\", client);\n server.name = client.serverInfo.name;\n server.id = client.serverInfo.name;\n\n if (!client || !client.isInitialized()) {\n console.warn(`[CMD] Failed to get initialize client `, { client });\n return;\n }\n\n // Fetch prompts and tools\n const [prompts, tools] = await Promise.all([\n client.listPrompts().catch(() => {\n console.warn(`Failed to fetch prompts for ${server.name}`);\n return [];\n }),\n client.listTools().catch(() => {\n console.warn(`Failed to fetch tools for ${server.name}`);\n return [];\n }),\n ]);\n\n clientsRef.current.set(server.id, client);\n\n console.log({ tools, prompts });\n\n // Add prompts as commands\n prompts.forEach(prompt => {\n newCommands.push({\n type: \"prompt\",\n serverId: server.id,\n serverName: server.name,\n name: prompt.name,\n description: prompt.description,\n data: { ...prompt, serverId: server.id, serverName: server.name },\n });\n });\n\n // Add tools as commands\n tools.forEach(tool => {\n newCommands.push({\n type: \"tool\",\n serverId: server.id,\n serverName: server.name,\n name: tool.name,\n description: tool.description,\n data: { ...tool, serverId: server.id, serverName: server.name },\n });\n });\n } catch (error) {\n console.error(`Failed to initialize client for ${server.name}:`, error);\n }\n }\n\n setCommands(newCommands);\n setLoading(false);\n };\n\n initializeClients();\n }, [servers, visible, mcpClients]);\n\n // Clean up clients on unmount\n useEffect(() => {\n return () => {\n clientsRef.current.forEach(client => client.disconnect());\n clientsRef.current.clear();\n };\n }, []);\n\n // Filter commands based on query\n const getFilteredCommands = useCallback(() => {\n if (!query.startsWith(\"/\")) return [];\n\n const searchQuery = query.slice(1).toLowerCase();\n const [commandPart, ...argParts] = searchQuery.split(\" \");\n\n // If user has already typed arguments, don't show palette\n if (argParts.length > 0) return [];\n\n return commands.filter(command => {\n const nameMatch = command.name.toLowerCase().includes(commandPart);\n const descMatch = command.description?.toLowerCase().includes(commandPart);\n const typeMatch = commandPart.startsWith(\"tool:\") && command.type === \"tool\";\n const promptMatch = commandPart.startsWith(\"prompt:\") && command.type === \"prompt\";\n\n return nameMatch || descMatch || typeMatch || promptMatch;\n });\n }, [query, commands]);\n\n // Handle keyboard navigation\n useEffect(() => {\n if (!visible) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const filtered = getFilteredCommands();\n\n switch (e.key) {\n case \"ArrowDown\":\n e.preventDefault();\n setSelectedIndex(prev => (prev + 1) % Math.max(1, filtered.length));\n break;\n case \"ArrowUp\":\n e.preventDefault();\n setSelectedIndex(prev => prev === 0 ? filtered.length - 1 : prev - 1);\n break;\n case \"Enter\":\n e.preventDefault();\n if (filtered[selectedIndex]) {\n handleCommandSelect(filtered[selectedIndex]);\n }\n break;\n case \"Escape\":\n e.preventDefault();\n if (showArgumentDialog) {\n setShowArgumentDialog(false);\n setSelectedCommand(null);\n setArgumentValues({});\n } else {\n onClose();\n }\n break;\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [visible, selectedIndex, getFilteredCommands, showArgumentDialog]);\n\n // Reset selected index when query changes\n useEffect(() => {\n setSelectedIndex(0);\n }, [query]);\n\n // Handle command selection\n const handleCommandSelect = async (command: Command) => {\n console.log(\"Command selected:\", command);\n if (command.type === \"prompt\") {\n const prompt = command.data as MCPPrompt;\n\n // Check if prompt has required arguments\n if (prompt.arguments && prompt.arguments.some(arg => arg.required)) {\n setSelectedCommand(command);\n setShowArgumentDialog(true);\n\n // Initialize with default values\n const defaultValues: ArgumentValue = {};\n prompt.arguments.forEach(arg => {\n defaultValues[arg.name] = getDefaultValue(arg);\n });\n setArgumentValues(defaultValues);\n\n // Focus first input after dialog shows\n setTimeout(() => {\n const firstInput = argumentInputRefs.current.values().next().value;\n firstInput?.focus();\n }, 50);\n } else {\n // Execute prompt without arguments\n await executePrompt(command, {});\n }\n } else if (command.type === \"tool\") {\n const tool = command.data as MCPTool;\n\n // Check if tool requires input\n if (tool.inputSchema?.properties && Object.keys(tool.inputSchema.properties).length > 0) {\n setSelectedCommand(command);\n setShowArgumentDialog(true);\n\n // Initialize with default values\n const defaultValues: ArgumentValue = {};\n Object.entries(tool.inputSchema.properties).forEach(([key, schema]: [string, any]) => {\n defaultValues[key] = getDefaultValue(schema);\n });\n setArgumentValues(defaultValues);\n\n // Focus first input after dialog shows\n setTimeout(() => {\n const firstInput = argumentInputRefs.current.values().next().value;\n firstInput?.focus();\n }, 50);\n } else {\n // Execute tool without arguments\n await executeTool(command, {});\n }\n }\n };\n\n // Execute a prompt\n const executePrompt = async (command: Command, args: ArgumentValue) => {\n const client = clientsRef.current.get(command.serverId);\n if (!client) {\n setError(\"Server not connected\");\n return;\n }\n\n try {\n setLoading(true);\n const result = await client.getPrompt(command.name, args);\n console.log(\"[CMD] Prompt result:\", result);\n onExecute(result);\n onClose();\n } catch (error) {\n console.error(\"Failed to execute prompt:\", error);\n setError(error instanceof Error ? error.message : \"Failed to execute prompt\");\n } finally {\n setLoading(false);\n }\n };\n\n // Execute a tool\n const executeTool = async (command: Command, args: ArgumentValue) => {\n const client = clientsRef.current.get(command.serverId);\n if (!client) {\n setError(\"Server not connected\");\n return;\n }\n\n try {\n setLoading(true);\n\n // Coerce values based on schema\n const tool = command.data as MCPTool;\n const coercedArgs: ArgumentValue = {};\n\n if (tool.inputSchema?.properties) {\n Object.entries(args).forEach(([key, value]) => {\n const schema = tool.inputSchema.properties[key];\n if (schema) {\n coercedArgs[key] = coerceValue(value, schema);\n } else {\n coercedArgs[key] = value;\n }\n });\n } else {\n Object.assign(coercedArgs, args);\n }\n\n const result = await client.callTool(command.name, coercedArgs);\n\n // Format tool execution as MCP tool use and result blocks (like assistant messages)\n const toolUseId = `tool_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n const res = [\n {\n type: \"mcp_tool_use\",\n id: toolUseId,\n name: command.name,\n input: coercedArgs,\n server_name: client.serverInfo?.name || \"Unknown\",\n },\n {\n type: \"mcp_tool_result\",\n tool_use_id: toolUseId,\n is_error: false,\n content: [{ type: \"text\", text: JSON.stringify(result, null, 2) }],\n },\n ];\n onResult(res);\n onClose();\n } catch (error) {\n console.error(\"Failed to execute tool:\", error);\n\n // Format error as MCP tool use and error result\n const toolUseId = `tool_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n const errorRes = [\n {\n type: \"mcp_tool_use\",\n id: toolUseId,\n name: command.name,\n input: args,\n server_name: client.serverInfo?.name,\n },\n {\n type: \"mcp_tool_result\",\n tool_use_id: toolUseId,\n is_error: true,\n content: [{ type: \"text\", text: error instanceof Error ? error.message : \"Failed to execute tool\" }],\n },\n ];\n onResult(errorRes);\n onClose();\n } finally {\n setLoading(false);\n }\n };\n\n // Handle argument submission\n const handleArgumentSubmit = async () => {\n if (!selectedCommand) return;\n\n if (selectedCommand.type === \"prompt\") {\n await executePrompt(selectedCommand, argumentValues);\n } else {\n await executeTool(selectedCommand, argumentValues);\n }\n\n setShowArgumentDialog(false);\n setSelectedCommand(null);\n setArgumentValues({});\n };\n\n // Render input based on JSON Schema\n const renderSchemaInput = (\n key: string,\n schema: any,\n value: any,\n onChange: (value: any) => void,\n required: boolean = false,\n ) => {\n const commonProps = {\n required,\n ref: (el: HTMLElement | null) => {\n if (el) argumentInputRefs.current.set(key, el);\n },\n };\n\n // Handle enums as select dropdowns\n if (schema.enum && Array.isArray(schema.enum)) {\n return (\n onChange(e.target.value)}\n >\n \n {schema.enum.map((option: any) => (\n \n ))}\n \n );\n }\n\n // Handle different types\n switch (schema.type) {\n case \"boolean\":\n return (\n \n onChange(e.target.checked)}\n />\n {value ? \"Yes\" : \"No\"}\n \n );\n\n case \"number\":\n case \"integer\":\n return (\n onChange(e.target.value)}\n placeholder={getInputPlaceholder(key, schema)}\n min={schema.minimum}\n max={schema.maximum}\n step={schema.type === \"integer\" ? 1 : \"any\"}\n />\n );\n\n case \"array\":\n // Simple array handling - comma-separated for string arrays, JSON for complex\n const isStringArray = schema.items?.type === \"string\";\n const displayValue = Array.isArray(value)\n ? (isStringArray ? value.join(\", \") : JSON.stringify(value, null, 2))\n : (value || \"\");\n\n return (\n {\n const inputValue = e.target.value;\n if (isStringArray) {\n // Handle comma-separated strings\n const arrayValue = inputValue.split(\",\").map(s => s.trim()).filter(s => s);\n onChange(arrayValue);\n } else {\n // Handle JSON input\n try {\n const parsed = JSON.parse(inputValue);\n onChange(Array.isArray(parsed) ? parsed : [parsed]);\n } catch {\n // Store as string until valid JSON\n onChange(inputValue);\n }\n }\n }}\n placeholder={getInputPlaceholder(key, schema)}\n rows={3}\n />\n );\n\n case \"object\":\n const objectValue = typeof value === \"object\" ? JSON.stringify(value, null, 2) : (value || \"\");\n return (\n {\n const inputValue = e.target.value;\n try {\n const parsed = JSON.parse(inputValue);\n onChange(parsed);\n } catch {\n // Store as string until valid JSON\n onChange(inputValue);\n }\n }}\n placeholder={getInputPlaceholder(key, schema)}\n rows={4}\n />\n );\n\n default:\n // Handle string with different formats\n if (schema.format) {\n switch (schema.format) {\n case \"email\":\n return (\n onChange(e.target.value)}\n placeholder={`Enter valid email address...`}\n />\n );\n case \"date\":\n return (\n onChange(e.target.value)}\n />\n );\n case \"date-time\":\n return (\n onChange(e.target.value)}\n />\n );\n case \"uri\":\n case \"url\":\n return (\n onChange(e.target.value)}\n placeholder={`Enter valid URL...`}\n />\n );\n }\n }\n\n // Default to textarea for strings (better for multi-line)\n return (\n onChange(e.target.value)}\n placeholder={getInputPlaceholder(key, schema)}\n rows={3}\n minLength={schema.minLength}\n maxLength={schema.maxLength}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && e.ctrlKey) {\n e.preventDefault();\n handleArgumentSubmit();\n }\n }}\n />\n );\n }\n };\n\n const filteredCommands = getFilteredCommands();\n\n if (!visible || filteredCommands.length === 0) {\n return null;\n }\n\n return (\n <>\n \n {loading && (\n
\n \n \n {\" \"}\n Loading commands...\n
\n )}\n\n {error && (\n
\n {error}\n
\n )}\n\n {/* Argument Dialog */}\n {!loading && !error && showArgumentDialog && selectedCommand && (\n setShowArgumentDialog(false)}\n >\n e.stopPropagation()}\n style={{\n xposition: \"absolute\",\n xbottom: position.bottom,\n xleft: position.left,\n xright: \"1em\",\n xmaxWidth: \"500px\",\n backgroundColor: \"white\",\n }}\n >\n
\n
\n {selectedCommand.type === \"prompt\"\n ? \n : } {selectedCommand.name}\n
\n setShowArgumentDialog(false)}\n >\n ✕\n \n
\n\n
\n {selectedCommand.description &&
{selectedCommand.description}
}\n\n {selectedCommand.type === \"prompt\" && (\n
\n {(selectedCommand.data as MCPPrompt).arguments?.map((arg, index) => (\n
\n \n {arg.name}\n {arg.required && \"*\"}\n {arg.description && - {arg.description}}\n \n {\n if (el)\n argumentInputRefs.current.set(arg.name, el);\n }}\n value={argumentValues[arg.name] || \"\"}\n onChange={(e) =>\n setArgumentValues(prev => ({\n ...prev,\n [arg.name]: e.target.value,\n }))}\n placeholder={`Enter ${arg.name}...`}\n required={arg.required}\n rows={3}\n onKeyDown={(e) => {\n if (\n e.key === \"Enter\" && e.ctrlKey\n && index === (selectedCommand.data as MCPPrompt).arguments!.length - 1\n ) {\n e.preventDefault();\n handleArgumentSubmit();\n }\n }}\n />\n
\n ))}\n
\n )}\n\n {selectedCommand.type === \"tool\" && (selectedCommand.data as MCPTool).inputSchema?.properties && (\n
\n {Object.entries((selectedCommand.data as MCPTool).inputSchema.properties).map(\n ([key, schema]: [string, any]) => {\n const isRequired = (selectedCommand.data as MCPTool).inputSchema.required?.includes(key);\n return (\n
\n \n {key}\n {isRequired && \"*\"}\n {schema.description && (\n - {schema.description}\n )}\n {schema.type && ({schema.type})}\n \n {renderSchemaInput(\n key,\n schema,\n argumentValues[key],\n (value) => setArgumentValues(prev => ({ ...prev, [key]: value })),\n isRequired,\n )}\n
\n );\n },\n )}\n
\n )}\n
\n\n
\n setShowArgumentDialog(false)}\n >\n Cancel\n \n \n {loading ? \"Executing...\" : \"Execute\"}\n \n
\n

\n )}\n\n {!showArgumentDialog && !loading && !error && filteredCommands.slice(0, 10).map((command, index) => (\n handleCommandSelect(command)}\n onMouseEnter={() => setSelectedIndex(index)}\n >\n
\n \n {command.type === \"prompt\" ? : }\n \n /{command.name}\n {command.serverName}\n
\n {command.description && (\n
\n {command.description}\n
\n )}\n {command.type === \"prompt\" && (command.data as MCPPrompt).arguments?.length > 0 && (\n
\n Args: {(command.data as MCPPrompt).arguments!.map(arg =>\n `${arg.name}${arg.required ? \"*\" : \"\"}`\n ).join(\", \")}\n
\n )}\n {command.type === \"tool\" && (command.data as MCPTool).inputSchema?.properties && (\n
\n Input: {Object.keys((command.data as MCPTool).inputSchema.properties).join(\", \")}\n
\n )}\n \n ))}\n \n \n );\n}",[],[183,360,415],"5ddf46ee-4b00-11f0-8202-76b3cceeab13","App.tsx","4d426996-3cdd-11f0-832c-9e149126039e",697,["D",1750112539540],46,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPServerConfig } from \"../../shared/types.ts\";\nimport useMCPClients from \"../hooks/useMCPClients.tsx\";\nimport MCPStatus from \"./MCPStatus.tsx\";\nimport Settings from \"./Settings.tsx\";\nimport StreamingChat from \"./StreamingChat.tsx\";\n\nexport interface Message {\n id: string;\n role: \"user\" | \"assistant\" | \"system\";\n content: string | any[]; // Support both string and array content for MCP blocks\n timestamp: number;\n}\n\nexport interface AppConfig {\n anthropicApiKey: string;\n mcpServers: MCPServerConfig[];\n selectedModel: string;\n systemPrompt: string;\n autoExecuteNextSteps: boolean;\n}\n\nconst DEFAULT_MCP_SERVERS: MCPServerConfig[] = [\n {\n id: \"contextual-mcp\",\n name: \"Contextual\",\n url: \"https://c15r--6e010d7c45d411f0a0c976b3cceeab13.web.val.run/mcp\",\n authorization_token: \"demo\",\n enabled: true,\n },\n];\n\nconst DEFAULT_SYSTEM_PROMPT = `The assistant MUST Always review existing resources before taking any action.\nIMPORTANT!: The assistant (you) MUST always check system/quick-reference.md file content, and follow its guidance, before taking _any_ further action.\nQuick reference should never be updated without explicit user consent.`;\n\nexport { DEFAULT_SYSTEM_PROMPT };\n\nexport default function App() {\n const [config, setConfig] = useState({\n anthropicApiKey: \"\",\n mcpServers: [],\n selectedModel: \"claude-3-5-sonnet-20241022\",\n systemPrompt: DEFAULT_SYSTEM_PROMPT,\n autoExecuteNextSteps: true,\n });\n const [showSettings, setShowSettings] = useState(false);\n const [messages, setMessages] = useState([]);\n\n // Initialize MCP clients based on server configurations\n const { connectedClients, getClientStates, connectedCount } = useMCPClients(config.mcpServers);\n\n console.log(`[App] MCP Clients`, connectedCount);\n // Load config from localStorage on mount\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"anthropic_api_key\");\n const savedMcpServers = localStorage.getItem(\"mcp_servers\");\n const savedMessages = localStorage.getItem(\"chat_messages\");\n const savedModel = localStorage.getItem(\"selected_model\");\n const savedSystemPrompt = localStorage.getItem(\"system_prompt\");\n const savedAutoExecuteNextSteps = localStorage.getItem(\"auto_execute_next_steps\");\n\n setConfig({\n anthropicApiKey: savedApiKey || \"\",\n mcpServers: savedMcpServers ? JSON.parse(savedMcpServers) : DEFAULT_MCP_SERVERS,\n selectedModel: savedModel || \"claude-3-5-sonnet-20241022\",\n systemPrompt: savedSystemPrompt || DEFAULT_SYSTEM_PROMPT,\n autoExecuteNextSteps: savedAutoExecuteNextSteps ? JSON.parse(savedAutoExecuteNextSteps) : true,\n });\n\n // Load saved messages\n if (savedMessages) {\n try {\n const parsedMessages = JSON.parse(savedMessages);\n setMessages(parsedMessages);\n } catch (error) {\n console.error(\"Failed to load saved messages:\", error);\n }\n }\n\n // Show settings if no API key is configured\n if (!savedApiKey) {\n setShowSettings(true);\n }\n }, []);\n\n // Save config to localStorage when it changes\n useEffect(() => {\n if (config.anthropicApiKey) {\n localStorage.setItem(\"anthropic_api_key\", config.anthropicApiKey);\n }\n localStorage.setItem(\"mcp_servers\", JSON.stringify(config.mcpServers));\n localStorage.setItem(\"selected_model\", config.selectedModel);\n localStorage.setItem(\"system_prompt\", config.systemPrompt);\n localStorage.setItem(\"auto_execute_next_steps\", JSON.stringify(config.autoExecuteNextSteps));\n }, [config]);\n\n // Save messages to localStorage when they change\n useEffect(() => {\n localStorage.setItem(\"chat_messages\", JSON.stringify(messages));\n }, [messages]);\n\n const updateConfig = (newConfig: Partial) => {\n setConfig(prev => ({ ...prev, ...newConfig }));\n };\n\n const updateMCPServer = (serverId: string, updates: Partial) => {\n setConfig(prev => ({\n ...prev,\n mcpServers: prev.mcpServers.map(server => server.id === serverId ? { ...server, ...updates } : server),\n }));\n };\n\n const addMessage = (message: Omit) => {\n setMessages(prev => [...prev, {\n ...message,\n id: crypto.randomUUID(),\n timestamp: Date.now(),\n }]);\n };\n\n const updateLastMessage = (content: string | any[]) => {\n setMessages(prev => {\n if (prev.length === 0) return prev;\n const updated = [...prev];\n updated[updated.length - 1] = { ...updated[updated.length - 1], content };\n return updated;\n });\n };\n\n const deleteMessage = (messageId: string) => {\n setMessages(prev => prev.filter(msg => msg.id !== messageId));\n };\n\n const retryFromMessage = (messageId: string) => {\n const messageIndex = messages.findIndex(msg => msg.id === messageId);\n if (messageIndex === -1) return null;\n\n const message = messages[messageIndex];\n if (message.role !== \"user\") return null;\n\n // Delete all messages after this one (including assistant responses)\n setMessages(prev => prev.slice(0, messageIndex + 1));\n\n // Return the user message content for resubmission\n // If content is an array (MCP blocks), extract text from text blocks\n if (Array.isArray(message.content)) {\n return message.content\n .filter(block => block.type === \"text\")\n .map(block => block.text)\n .join(\"\\n\");\n }\n return message.content;\n };\n\n const clearMessages = () => {\n setMessages([]);\n };\n\n return (\n
\n setShowSettings(true)}\n mcpStatusComponent={{\n component: MCPStatus,\n props: {\n mcpServers: config.mcpServers,\n onUpdateMCPServer: updateMCPServer,\n },\n }}\n />\n {showSettings && (\n setShowSettings(false)}\n />\n )}\n
\n );\n}",[],[183,360,424],"4d427e7c-3cdd-11f0-832c-9e149126039e",5,["D",1748558163004],[209,210,211,212,213,214,215,216,217],[183,360],["D",1748558112658],[208,218,221,226,227,228],[183],"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;",[],[189,441],["D",1748558228747],[206],[189],["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":489,"_490":491,"_492":493,"_494":25,"_495":25,"_496":25,"_497":59,"_498":-5,"_499":-7,"_500":-7,"_501":63,"_502":25,"_503":25,"_504":-5,"_505":25,"_506":25,"_507":25,"_508":-5},"ENV",{"_460":461,"_462":463,"_464":87,"_465":466,"_467":468,"_469":470,"_471":472,"_473":474,"_475":476,"_477":478,"_479":480,"_481":482,"_483":484,"_485":486,"_487":488},"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 · v741