chat.parc.land

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_766":767,"_768":769},"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",1171,"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/affordance-types.ts","latestPath","fileId","d9a5abec-539d-11f0-83f1-f69ea79377d9","name","affordance-types.ts","fileType","script","content","/**\n * Shared types for the UI Affordance Registration Framework\n */\n\nexport type AffordanceType = 'overlay' | 'header' | 'footer' | 'sidebar' | 'inline' | 'command-palette';\n\nexport interface AffordanceConfig {\n // Common configuration\n title?: string;\n className?: string;\n zIndex?: number;\n persistent?: boolean;\n \n // Position-specific configuration\n position?: 'left' | 'right' | 'top' | 'bottom' | 'center';\n width?: string;\n height?: string;\n maxWidth?: string;\n maxHeight?: string;\n \n // Overlay/Modal specific\n modal?: boolean;\n backdrop?: boolean;\n closable?: boolean;\n \n // Header/Footer specific\n priority?: number; // Higher priority = closer to edge\n \n // Sidebar specific\n collapsible?: boolean;\n defaultCollapsed?: boolean;\n \n // Animation preferences\n animationDuration?: number;\n animationEasing?: string;\n \n // Custom properties\n [key: string]: any;\n}\n\nexport interface AffordanceRegistration {\n id: string;\n type: AffordanceType;\n fileKey: string;\n config: AffordanceConfig;\n domId: string;\n container: HTMLElement | null;\n component: AffordanceComponent | null;\n mounted: boolean;\n createdAt: number;\n}\n\nexport interface AffordanceComponent {\n mount(container: HTMLElement, config: AffordanceConfig, mcpClientPool?: any): Promise;\n unmount(): Promise;\n getPublicMethods(): Record;\n [customMethod: string]: any;\n}\n\nexport interface AffordanceMethodCall {\n domId: string;\n method: string;\n args: any[];\n}\n\nexport interface AffordanceMethodResult {\n success: boolean;\n result?: any;\n error?: string;\n}\n\nexport interface AffordanceError {\n id: string;\n domId: string;\n timestamp: number;\n error: Error;\n context: string;\n resolved: boolean;\n stack?: string;\n}\n\nexport interface ContainerManager {\n type: AffordanceType;\n createContainer(id: string, config: AffordanceConfig): HTMLElement;\n destroyContainer(id: string): void;\n getContainer(id: string): HTMLElement | null;\n updateContainer(id: string, config: Partial): void;\n}","/**\n * Shared types for the UI Affordance Registration Framework\n */\n\nexport type AffordanceType = 'overlay' | 'header' | 'footer' | 'sidebar' | 'inline' | 'command-palette';\n\nexport interface AffordanceConfig {\n // Common configuration\n title?: string;\n className?: string;\n zIndex?: number;\n persistent?: boolean;\n \n // Position-specific configuration\n position?: 'left' | 'right' | 'top' | 'bottom' | 'center';\n width?: string;\n height?: string;\n maxWidth?: string;\n maxHeight?: string;\n \n // Overlay/Modal specific\n modal?: boolean;\n backdrop?: boolean;\n closable?: boolean;\n \n // Header/Footer specific\n priority?: number; // Higher priority = closer to edge\n \n // Sidebar specific\n collapsible?: boolean;\n defaultCollapsed?: boolean;\n \n // Animation preferences\n animationDuration?: number;\n animationEasing?: string;\n \n // Custom properties\n [key: string]: any;\n}\n\nexport interface AffordanceRegistration {\n id: string;\n type: AffordanceType;\n fileKey: string;\n config: AffordanceConfig;\n domId: string;\n container: HTMLElement | null;\n component: AffordanceComponent | null;\n mounted: boolean;\n createdAt: number;\n}\n\nexport interface PersistedAffordance {\n id: string;\n type: AffordanceType;\n fileKey: string;\n config: AffordanceConfig;\n createdAt: number;\n // Optional: component state snapshot for future use\n componentState?: any;\n}\n\nexport interface AffordanceComponent {\n mount(container: HTMLElement, config: AffordanceConfig, mcpClientPool?: any): Promise;\n unmount(): Promise;\n getPublicMethods(): Record;\n [customMethod: string]: any;\n}\n\nexport interface AffordanceMethodCall {\n domId: string;\n method: string;\n args: any[];\n}\n\nexport interface AffordanceMethodResult {\n success: boolean;\n result?: any;\n error?: string;\n}\n\nexport interface AffordanceError {\n id: string;\n domId: string;\n timestamp: number;\n error: Error;\n context: string;\n resolved: boolean;\n stack?: string;\n}\n\nexport interface ContainerManager {\n type: AffordanceType;\n createContainer(id: string, config: AffordanceConfig): HTMLElement;\n destroyContainer(id: string): void;\n getContainer(id: string): HTMLElement | null;\n updateContainer(id: string, config: Partial): void;\n}","createdAt",["D",1751201379390],"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":762,"_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":763,"_81":764,"_83":765,"_85":25},"tree",[286,288,325,328,335,336,337,338,339,340,341,342,343,344,345,346,347,348],"files",[286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337,338,339,340,341,342,343,344,345,346,347,348],"counts",{"_276":63,"_277":177,"_278":177,"_279":280,"_281":282},"contents",[128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_57":127},"chat.parc.land",{"_44":270,"_32":271,"_30":272,"_149":-5,"_42":43,"_41":273,"_151":59,"_39":274,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_27":275},{"_44":264,"_32":265,"_30":266,"_149":-5,"_42":43,"_41":267,"_151":59,"_39":268,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_27":269},{"_44":258,"_32":259,"_30":260,"_149":-5,"_42":43,"_41":261,"_151":59,"_39":262,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_27":263},{"_44":251,"_32":252,"_30":253,"_149":-5,"_42":43,"_41":254,"_151":59,"_39":255,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_27":257},{"_44":244,"_32":245,"_30":246,"_149":-5,"_42":43,"_41":247,"_151":25,"_39":248,"_13":153,"_34":20,"_36":249,"_24":25,"_156":-5,"_27":250},{"_44":237,"_32":238,"_30":239,"_149":-5,"_42":43,"_41":240,"_151":25,"_39":241,"_13":63,"_34":20,"_36":242,"_24":25,"_156":-5,"_27":243},{"_44":230,"_32":231,"_30":232,"_149":-5,"_42":43,"_41":233,"_151":25,"_39":234,"_13":177,"_34":20,"_36":235,"_24":25,"_156":-5,"_27":236},{"_44":223,"_32":224,"_30":225,"_149":-5,"_42":43,"_41":226,"_151":25,"_39":227,"_13":63,"_34":20,"_36":228,"_24":25,"_156":-5,"_27":229},{"_44":216,"_32":217,"_30":218,"_149":-5,"_42":43,"_41":219,"_151":25,"_39":220,"_13":63,"_34":20,"_36":221,"_24":25,"_156":-5,"_27":222},{"_44":209,"_32":210,"_30":211,"_149":-5,"_42":43,"_41":212,"_151":25,"_39":213,"_13":63,"_34":20,"_36":214,"_24":25,"_156":-5,"_27":215},{"_44":202,"_32":203,"_30":204,"_149":-5,"_42":43,"_41":205,"_151":25,"_39":206,"_13":63,"_34":20,"_36":207,"_24":25,"_156":-5,"_27":208},{"_44":195,"_32":196,"_30":197,"_149":-5,"_42":43,"_41":198,"_151":25,"_39":199,"_13":63,"_34":20,"_36":200,"_24":25,"_156":-5,"_27":201},{"_44":188,"_32":189,"_30":190,"_149":-5,"_42":43,"_41":191,"_151":25,"_39":192,"_13":63,"_34":20,"_36":193,"_24":25,"_156":-5,"_27":194},{"_44":180,"_32":181,"_30":182,"_149":-5,"_42":43,"_41":183,"_151":25,"_39":184,"_13":185,"_34":20,"_36":186,"_24":25,"_156":-5,"_27":187},{"_44":172,"_32":173,"_30":174,"_149":-5,"_42":43,"_41":175,"_151":25,"_39":176,"_13":177,"_34":20,"_36":178,"_24":25,"_156":-5,"_27":179},{"_44":165,"_32":166,"_30":167,"_149":-5,"_42":43,"_41":168,"_151":59,"_39":169,"_13":63,"_34":20,"_36":170,"_24":25,"_156":-5,"_27":171},{"_44":158,"_32":159,"_30":160,"_149":-5,"_42":43,"_41":161,"_151":59,"_39":162,"_13":63,"_34":20,"_36":163,"_24":25,"_156":-5,"_27":164},{"_44":146,"_32":147,"_30":148,"_149":-5,"_42":43,"_41":150,"_151":59,"_39":152,"_13":153,"_34":154,"_36":155,"_24":25,"_156":-5,"_27":157},"c82346e0-4ce5-11f0-a6c4-76b3cceeab13","test-runner.ts","97f54aa4-4ce5-11f0-89f5-76b3cceeab13","parentId",843,"latest",["D",1750321023732],3,"http","/**\n * Simple test runner for Val Town environment\n * This file attempts to validate the test infrastructure\n */\n\nexport default async function() {\n const results = await runValidationTests();\n \n const report = `\n🧪 TEST VALIDATION REPORT\n========================\n\n📊 Summary:\n- Total Tests: ${results.totalTests}\n- Passed: ${results.passedTests}\n- Failed: ${results.failedTests}\n- Success Rate: ${((results.passedTests / results.totalTests) * 100).toFixed(1)}%\n\n${results.details.join('\\n')}\n\n${results.errors.length > 0 ? `\n❌ Errors:\n${results.errors.map((error, i) => `${i + 1}. ${error}`).join('\\n')}\n` : '🎉 All validation tests passed!'}\n\n📝 Note: This is a basic validation. Full test suite should be run with:\n deno test --allow-all test/\n`;\n\n return new Response(report, {\n headers: { \"Content-Type\": \"text/plain\" }\n });\n}\n\nasync function runValidationTests() {\n const results = {\n totalTests: 0,\n passedTests: 0,\n failedTests: 0,\n errors: [] as string[],\n details: [] as string[]\n };\n\n // Test 1: Check if test setup can be imported\n try {\n await import(\"./test/setup.ts\");\n results.details.push(\"✓ Test setup imports successfully\");\n results.totalTests++;\n results.passedTests++;\n } catch (error) {\n results.details.push(\"✗ Test setup import failed\");\n results.totalTests++;\n results.failedTests++;\n results.errors.push(`Setup import: ${error.message}`);\n }\n\n // Test 2: Check if test helpers work\n try {\n const { createMockMessage, createMockCallback } = await import(\"./test/utils/test-helpers.ts\");\n const mockMessage = createMockMessage();\n const mockCallback = createMockCallback();\n \n if (mockMessage.id && mockMessage.role && mockMessage.content && mockMessage.timestamp) {\n results.details.push(\"✓ Test helpers create valid mock data\");\n results.totalTests++;\n results.passedTests++;\n } else {\n throw new Error(\"Mock message missing required properties\");\n }\n\n if (typeof mockCallback === 'function' && Array.isArray(mockCallback.calls)) {\n results.details.push(\"✓ Mock callback functions work correctly\");\n results.totalTests++;\n results.passedTests++;\n } else {\n throw new Error(\"Mock callback not functioning correctly\");\n }\n } catch (error) {\n results.details.push(\"✗ Test helpers failed\");\n results.totalTests++;\n results.failedTests++;\n results.errors.push(`Test helpers: ${error.message}`);\n }\n\n // Test 3: Check if Message component can be imported\n try {\n await import(\"./frontend/components/Message.tsx\");\n results.details.push(\"✓ Message component imports successfully\");\n results.totalTests++;\n results.passedTests++;\n } catch (error) {\n results.details.push(\"✗ Message component import failed\");\n results.totalTests++;\n results.failedTests++;\n results.errors.push(`Message component: ${error.message}`);\n }\n\n // Test 4: Check if shared types can be imported\n try {\n await import(\"./shared/types.ts\");\n results.details.push(\"✓ Shared types import successfully\");\n results.totalTests++;\n results.passedTests++;\n } catch (error) {\n results.details.push(\"✗ Shared types import failed\");\n results.totalTests++;\n results.failedTests++;\n results.errors.push(`Shared types: ${error.message}`);\n }\n\n // Test 5: Validate package.json structure\n try {\n const packageJson = await import(\"./package.json\", { assert: { type: \"json\" } });\n if (packageJson.default.scripts?.test) {\n results.details.push(\"✓ Package.json has test scripts configured\");\n results.totalTests++;\n results.passedTests++;\n } else {\n throw new Error(\"Test scripts not found in package.json\");\n }\n } catch (error) {\n results.details.push(\"✗ Package.json validation failed\");\n results.totalTests++;\n results.failedTests++;\n results.errors.push(`Package.json: ${error.message}`);\n }\n\n return results;\n}","label",[147],"84e96a9a-4ce4-11f0-8012-76b3cceeab13","package.json","84e96b80-4ce4-11f0-8012-76b3cceeab13",832,["D",1750320481457],"{\n \"name\": \"anthropic-streaming-chat-mcp\",\n \"version\": \"1.0.0\",\n \"description\": \"A mobile-optimized single page chat application that uses the Anthropic Messages API with real-time streaming and MCP (Model Context Protocol) server support\",\n \"type\": \"module\",\n \"scripts\": {\n \"test\": \"deno test --allow-all test/\",\n \"test:watch\": \"deno test --allow-all --watch test/\",\n \"test:coverage\": \"deno test --allow-all --coverage=coverage test/\",\n \"test:coverage-report\": \"deno coverage coverage --html\"\n },\n \"keywords\": [\n \"anthropic\",\n \"claude\",\n \"streaming\",\n \"mcp\",\n \"chat\",\n \"react\",\n \"typescript\"\n ],\n \"author\": \"\",\n \"license\": \"MIT\",\n \"devDependencies\": {\n \"@types/react\": \"^18.2.0\",\n \"@types/react-dom\": \"^18.2.0\"\n },\n \"dependencies\": {\n \"react\": \"^18.2.0\",\n \"react-dom\": \"^18.2.0\"\n }\n}",[159],"fefe5778-4ce4-11f0-a2f7-76b3cceeab13","TESTING.md","fefe584a-4ce4-11f0-a2f7-76b3cceeab13",837,["D",1750320686276],"# Testing Guide\n\nThis document provides comprehensive guidance for testing the Anthropic Streaming Chat MCP application.\n\n## Overview\n\nThe application uses **Deno** as the test runner with **React Testing Library** for component testing. Tests are written in TypeScript and follow modern testing practices with proper mocking and isolation.\n\n## Quick Start\n\n```bash\n# Install dependencies (if using npm scripts)\nnpm install\n\n# Run all tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run with coverage\nnpm run test:coverage\n```\n\n## Test Architecture\n\n### Testing Stack\n\n- **Test Runner**: Deno Test\n- **Component Testing**: React Testing Library\n- **Assertions**: Deno Standard Library Assert\n- **Mocking**: Custom utilities + built-in Deno mocks\n- **Coverage**: Deno built-in coverage tools\n\n### Project Structure\n\n```\ntest/\n├── components/ # Component-specific tests\n│ └── Message.test.tsx # Message component tests\n├── utils/ # Testing utilities\n│ └── test-helpers.ts # Mock factories and helpers\n├── setup.ts # Global test configuration\n└── README.md # Test-specific documentation\n```\n\n## Writing Tests\n\n### Component Testing Pattern\n\n```typescript\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { assertEquals, assertExists } from \"https://deno.land/std@0.208.0/assert/mod.ts\";\nimport { render, cleanup } from \"https://esm.sh/@testing-library/react@14.0.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createMockMessage } from \"../utils/test-helpers.ts\";\nimport ComponentToTest from \"../../frontend/components/ComponentToTest.tsx\";\n\nDeno.test(\"ComponentToTest - Feature Category\", async (t) => {\n await t.step(\"should render correctly with basic props\", () => {\n const mockData = createMockMessage();\n \n const { container } = render(\n \n );\n \n const element = container.querySelector('.expected-class');\n assertExists(element, \"Component should render expected element\");\n });\n \n // Always cleanup after component tests\n cleanup();\n});\n```\n\n### Test Helpers Usage\n\nThe `test-helpers.ts` file provides utilities for creating consistent mock data:\n\n```typescript\nimport { \n createMockMessage, \n createMockMCPServer,\n createMockCallback,\n createMockAnthropicBlocks \n} from \"../utils/test-helpers.ts\";\n\n// Create mock message with defaults\nconst message = createMockMessage();\n\n// Create mock message with overrides\nconst assistantMessage = createMockMessage({\n role: \"assistant\",\n content: \"Custom content\"\n});\n\n// Create mock callback that tracks calls\nconst mockCallback = createMockCallback();\n// Later: assertEquals(mockCallback.calls.length, 1);\n\n// Create mock Anthropic blocks for streaming tests\nconst blocks = createMockAnthropicBlocks([\n { type: \"text\", text: \"Hello\" },\n { type: \"code\", text: \"console.log('test')\", language: \"javascript\" }\n]);\n```\n\n### Testing Different Message Types\n\n#### Text Messages\n\n```typescript\nawait t.step(\"should render text message\", () => {\n const message = createMockMessage({\n content: \"Simple text message\"\n });\n \n const { container } = render();\n assertStringIncludes(container.innerHTML, \"Simple text message\");\n});\n```\n\n#### Block Content (Streaming)\n\n```typescript\nawait t.step(\"should render streaming blocks\", () => {\n const message = createMockMessage({\n content: [\n { type: \"text\", text: \"Streaming text\", _streaming: true },\n { type: \"code\", text: \"const x = 1;\", language: \"javascript\" }\n ]\n });\n \n const { container } = render();\n \n // Check for streaming cursor\n const cursor = container.querySelector('.streaming-cursor');\n assertExists(cursor, \"Should show streaming cursor\");\n \n // Check for code block\n const codeBlock = container.querySelector('.anthropic-code-block');\n assertExists(codeBlock, \"Should render code block\");\n});\n```\n\n#### MCP Tool Results\n\n```typescript\nawait t.step(\"should render MCP tool results\", () => {\n const message = createMockMessage({\n content: [\n createMockMCPToolUse({ name: \"file_reader\" }),\n createMockMCPToolResult({ \n content: [{ text: JSON.stringify({ output: \"File content\" }) }]\n })\n ]\n });\n \n const { container } = render();\n \n const toolDetails = container.querySelector('.mcp-details');\n assertExists(toolDetails, \"Should render MCP tool details\");\n});\n```\n\n### Testing Interactive Features\n\n#### Button Actions\n\n```typescript\nawait t.step(\"should handle button clicks\", () => {\n const mockOnDelete = createMockCallback();\n const message = createMockMessage();\n \n const { container } = render(\n \n );\n \n const deleteButton = container.querySelector('.delete-btn');\n assertExists(deleteButton, \"Delete button should exist\");\n \n // Simulate click (note: actual click simulation requires more setup)\n // This tests that the button is rendered correctly\n});\n```\n\n#### Conditional Rendering\n\n```typescript\nawait t.step(\"should conditionally render retry button\", () => {\n const message = createMockMessage();\n const mockOnRetry = createMockCallback();\n \n // Test with canRetry = true\n const { container: containerWithRetry } = render(\n \n );\n \n assertExists(\n containerWithRetry.querySelector('.retry-btn'),\n \"Should show retry button when canRetry is true\"\n );\n \n // Test with canRetry = false\n const { container: containerNoRetry } = render(\n \n );\n \n assertEquals(\n containerNoRetry.querySelector('.retry-btn'),\n null,\n \"Should not show retry button when canRetry is false\"\n );\n});\n```\n\n## Test Categories\n\n### 1. Unit Tests\n- Individual component functionality\n- Utility function behavior\n- Type validation\n\n### 2. Integration Tests\n- Component interaction\n- Data flow between components\n- MCP client integration\n\n### 3. Rendering Tests\n- Component output verification\n- Conditional rendering\n- Props handling\n\n### 4. Interaction Tests\n- Button clicks and callbacks\n- Form submissions\n- User input handling\n\n## Mocking Strategy\n\n### Global Mocks (setup.ts)\n\n```typescript\n// DOM APIs\nglobalThis.localStorage = mockLocalStorage;\nglobalThis.fetch = mockFetch;\nglobalThis.crypto.randomUUID = mockUUID;\n\n// Browser APIs\nnavigator.clipboard = mockClipboard;\nglobalThis.alert = mockAlert;\n```\n\n### Component-Specific Mocks\n\n```typescript\n// Mock MCP clients\nconst mockMCPClients = [];\n\n// Mock callbacks\nconst mockOnSendMessage = createMockCallback();\nconst mockOnDelete = createMockCallback();\n```\n\n## Coverage and Quality\n\n### Running Coverage\n\n```bash\n# Generate coverage data\nnpm run test:coverage\n\n# Generate HTML report\nnpm run test:coverage-report\n\n# View report\nopen coverage/html/index.html\n```\n\n### Coverage Goals\n\n- **Components**: >90% line coverage\n- **Utilities**: >95% line coverage\n- **Critical paths**: 100% coverage\n\n### Quality Metrics\n\n- All tests should be deterministic\n- No flaky tests\n- Fast execution (<30s total)\n- Clear, descriptive test names\n\n## Best Practices\n\n### Test Organization\n\n```typescript\nDeno.test(\"ComponentName - Feature Category\", async (t) => {\n await t.step(\"should handle normal case\", () => {\n // Test implementation\n });\n \n await t.step(\"should handle edge case\", () => {\n // Test implementation\n });\n \n await t.step(\"should handle error case\", () => {\n // Test implementation\n });\n \n cleanup(); // Always cleanup after component tests\n});\n```\n\n### Naming Conventions\n\n- **Test files**: `ComponentName.test.tsx`\n- **Test suites**: `\"ComponentName - Feature Category\"`\n- **Test cases**: `\"should [expected behavior]\"`\n- **Mock functions**: `mock[FunctionName]`\n\n### Assertion Guidelines\n\n```typescript\n// Good: Specific assertions\nassertExists(element, \"Button should exist\");\nassertEquals(calls.length, 1, \"Callback should be called once\");\nassertStringIncludes(html, \"expected text\");\n\n// Avoid: Generic assertions\nassert(element); // Not descriptive\nassertEquals(result, true); // Not specific\n```\n\n### Mock Data Consistency\n\n```typescript\n// Good: Use test helpers\nconst message = createMockMessage({ role: \"assistant\" });\n\n// Avoid: Inline mock data\nconst message = { \n id: \"123\", \n role: \"assistant\", \n content: \"test\", \n timestamp: 1234567890 \n};\n```\n\n## Debugging Tests\n\n### Common Issues\n\n1. **Import Errors**: Ensure React version pinning in imports\n2. **Component Not Rendering**: Check required props\n3. **Async Issues**: Use proper async/await patterns\n4. **Mock Problems**: Verify setup.ts configuration\n\n### Debug Techniques\n\n```typescript\n// Log component output\nconst { container } = render();\nconsole.log(\"HTML:\", container.innerHTML);\n\n// Check mock calls\nconsole.log(\"Mock calls:\", mockCallback.calls);\n\n// Verify element selection\nconst element = container.querySelector('.target');\nconsole.log(\"Element found:\", !!element);\n```\n\n### Test Isolation\n\n- Each test should be independent\n- Use `cleanup()` after component tests\n- Reset mocks between tests if needed\n- Avoid shared state between tests\n\n## Continuous Integration\n\n### Pre-commit Hooks\n\n```bash\n# Run tests before commit\nnpm test\n\n# Run linting\ndeno lint\n\n# Run formatting\ndeno fmt --check\n```\n\n### CI Pipeline\n\n```yaml\n# Example GitHub Actions workflow\n- name: Run Tests\n run: |\n deno test --allow-all test/\n deno coverage coverage --html\n```\n\n## Adding New Tests\n\n### Checklist\n\n- [ ] Create test file in appropriate directory\n- [ ] Follow naming conventions\n- [ ] Import required testing utilities\n- [ ] Use test helpers for mock data\n- [ ] Include cleanup calls\n- [ ] Test happy path and edge cases\n- [ ] Add descriptive assertions\n- [ ] Update documentation if needed\n\n### Template\n\n```typescript\n/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { assertEquals, assertExists } from \"https://deno.land/std@0.208.0/assert/mod.ts\";\nimport { render, cleanup } from \"https://esm.sh/@testing-library/react@14.0.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { createMockMessage } from \"../utils/test-helpers.ts\";\nimport NewComponent from \"../../frontend/components/NewComponent.tsx\";\n\nDeno.test(\"NewComponent - Basic Functionality\", async (t) => {\n await t.step(\"should render with default props\", () => {\n // Test implementation\n });\n \n await t.step(\"should handle prop changes\", () => {\n // Test implementation\n });\n \n cleanup();\n});\n```\n\n## Resources\n\n- [Deno Testing Documentation](https://deno.land/manual/testing)\n- [React Testing Library Documentation](https://testing-library.com/docs/react-testing-library/intro/)\n- [Deno Standard Library Assert](https://deno.land/std/assert)\n- [ESM.sh for React Dependencies](https://esm.sh/)\n\n## Contributing\n\nWhen adding tests:\n\n1. Follow the established patterns\n2. Use the provided test helpers\n3. Maintain good coverage\n4. Write clear, descriptive tests\n5. Update documentation as needed\n\nFor questions or issues with testing, refer to the test README or create an issue in the project repository.",[166],"16a9e058-4ba1-11f0-bef0-76b3cceeab13","ResourceViewer-README.md","a4b8892a-4b57-11f0-973a-76b3cceeab13",776,["D",1750181569036],1,"# 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### Performance Optimizations\n\n- **Memoized MCP Client Resolution** - Client lookup is memoized to prevent unnecessary re-renders\n- **Stable Reference Management** - MCP clients array is memoized in the parent hook to prevent reload loops\n- **Simplified Dependency Chains** - Reduced nested useCallback dependencies to minimize effect re-executions\n- **Optimized useEffect Dependencies** - Removed function dependencies that caused infinite reload loops\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",[173],"44654e68-5454-11f0-a651-f69ea79377d9","README.md","2bc4d286-3cdd-11f0-9e50-9e149126039e",1167,["D",1751138134987],58,"# 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, featuring **centralized client management** and **performance optimizations**.\n\nSource: https://www.val.town/x/c15r/Chat \n\nLive server: https://chat.parc.land\n\nBundles Contextual MCP server by default: https://contextual.parc.land/mcp\n\n## 🚀 Key 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- **🔧 Client-side Tools** - Interactive tools that run in the browser (ask_user, calculator, js_exec)\n- **🎨 UI Affordance Framework** - Dynamic UI component registration system for rich interactions\n- **💬 Inline User Input** - Sophisticated ask_user tool with text, multiline, choice, and confirm inputs\n- **🧮 Built-in Calculator** - Mathematical expression evaluation tool\n- **🎨 UI Affordance System** - Register custom UI components in overlays, sidebars, headers, footers, and inline\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- **🔧 Centralized Client Pool** - Unified MCP client management for optimal performance and reliability\n- **📊 Performance Optimizations** - Memoized rendering, stable references, and efficient connection reuse\n- **🔍 Automatic MCP Server Status Checking** - Real-time server health monitoring with detailed diagnostics\n- **🎯 Command Palette** - Quick access to MCP tools, prompts, and client-side tools via `/` commands\n- **💾 Persistent Storage** - Chat history and settings saved locally with automatic restoration\n- **🎨 Exquisite Design System** - Sophisticated visual design with glassmorphism, smooth animations, and depth\n- **📱 Mobile-First Experience** - Optimized for mobile viewports with touch-friendly interactions\n- **✨ Smooth Animations** - Delightful micro-interactions and transitions throughout the interface\n- **🌈 Advanced Theming** - Comprehensive design tokens with CSS custom properties\n- **♿ Accessibility First** - Full keyboard navigation, screen reader support, and reduced motion preferences\n\n## 🏗️ Architecture Improvements\n\n### Centralized Client Management\nThe application now uses a **unified MCPClientPool** that eliminates duplicate connections and provides consistent access to MCP operations:\n\n```typescript\n// Single source of truth for all MCP operations\nconst clientPool = new MCPClientPool(connectedClients, serverConfigs);\n\n// Unified API across all components\nawait clientPool.testServer(serverName);\nawait clientPool.fetchTools();\nawait clientPool.callTool(serverName, toolName, args);\n```\n\n### Performance Optimizations\n- ✅ **No Duplicate Client Connections**: Single client instance per server\n- ✅ **Memoized Client Resolution**: Cached lookups prevent unnecessary re-renders\n- ✅ **Stable Reference Management**: Arrays memoized to prevent reload loops\n- ✅ **Optimized useEffect Dependencies**: Minimal effect re-executions\n- ✅ **Connection Reuse**: Existing connections used for all operations\n\n### Before vs After Consolidation\n\n#### Before\n- ❌ Multiple client instances per server (4 separate creation points)\n- ❌ Duplicate connection logic across components\n- ❌ ResourceViewer reload loops due to unstable references\n- ❌ Inconsistent error handling\n\n#### After\n- ✅ Single client instance per server via centralized pool\n- ✅ Unified connection logic in MCPClientPool\n- ✅ Stable component rendering with memoized references\n- ✅ Consistent error handling across all components\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│ │ └── affordances/ # UI affordance components\n│ │ ├── CounterAffordance.tsx # Example counter component\n│ │ ├── StatusDashboard.tsx # System status dashboard\n│ │ ├── NotificationCenter.tsx # Notification management\n│ │ └── TestAffordance.tsx # Simple test component\n│ ├── hooks/\n│ │ └── useAnthropicStream.tsx # Streaming chat hook\n│ ├── utils/\n│ │ ├── clientTools.ts # Client-side tools utility with dynamic tool management\n│ │ ├── affordanceManager.ts # UI affordance registration framework\n│ │ ├── containers/ # Affordance container managers\n│ │ │ ├── overlayContainer.ts # Modal/popup containers\n│ │ │ ├── sidebarContainer.ts # Collapsible side panels\n│ │ │ ├── headerContainer.ts # Fixed header extensions\n│ │ │ ├── footerContainer.ts # Footer extensions\n│ │ │ └── inlineContainer.ts # Chat-embedded components\n│ │ ├── mcpTesting.ts # Frontend MCP server testing\n│ │ ├── mcpPrompts.ts # Frontend MCP prompt fetching\n│ │ ├── mcpTools.ts # MCP tools fetching with caching\n│ │ ├── mcpClientPool.ts # Centralized MCP client pool\n│ │ └── MCPClient.ts # Individual MCP client wrapper\n│ └── style.css # Custom styles with streaming animations\n├── shared/\n│ ├── types.ts # Shared TypeScript types for streaming\n│ └── affordance-types.ts # UI affordance framework types\n├── test/ # Test suite\n│ ├── components/ # Component tests\n│ │ └── Message.test.tsx # Message component tests\n│ ├── utils/ # Test utilities and helpers\n│ │ └── test-helpers.ts # Common test utilities\n│ ├── setup.ts # Global test setup and configuration\n│ └── README.md # Test-specific documentation\n├── package.json # NPM configuration with test scripts\n├── TESTING.md # Comprehensive testing guide\n└── README.md\n```\n\n## UI Affordance Framework\n\nThe application includes a powerful **UI Affordance Registration Framework** that allows the assistant to dynamically create and control custom UI components. This system provides:\n\n### Container Types\n- **Overlay**: Modal/popup containers with backdrop support\n- **Sidebar**: Collapsible side panels (left/right positioning)\n- **Header**: Fixed header extensions with priority ordering\n- **Footer**: Footer extensions alongside existing controls\n- **Inline**: Components embedded directly in the chat flow\n\n### Client Tools\n- **`attach_affordance`**: Attach new UI components from file keys\n- **`call_affordance_method`**: Invoke methods on attached components\n- **`detach_affordance`**: Remove attached components\n- **`list_affordances`**: List all active affordances\n- **`get_affordance_errors`**: Get runtime errors from affordance components\n- **`clear_affordance_errors`**: Clear/acknowledge affordance errors\n\n### Example Usage\n```javascript\n// Attach a counter in the sidebar\nconst counterId = await attach_affordance('sidebar', \n '/frontend/components/affordances/CounterAffordance.tsx', \n { title: 'Counter', position: 'right', width: '250px' }\n);\n\n// Interact with the counter\nawait call_affordance_method(counterId, 'increment', []);\nconst value = await call_affordance_method(counterId, 'getValue', []);\n\n// Check for any errors\nconst errors = await get_affordance_errors(counterId);\nif (errors.length > 0) {\n console.log('Component has errors:', errors);\n // Clear the errors after handling\n await clear_affordance_errors(counterId);\n}\n```\n\nFor detailed documentation, see [AFFORDANCE-FRAMEWORK.md](./AFFORDANCE-FRAMEWORK.md).\nFor component development guide, see [AFFORDANCE-COMPONENT-GUIDE.md](./AFFORDANCE-COMPONENT-GUIDE.md).\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## Development\n\n### Testing\n\nThe project includes a comprehensive test suite using Deno Test and React Testing Library:\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests in watch mode\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Generate HTML coverage report\nnpm run test:coverage-report\n```\n\nFor detailed testing information, see [TESTING.md](./TESTING.md).\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- **🎨 Exquisite Design System**: Sophisticated visual design featuring:\n - **Glassmorphism Effects**: Translucent surfaces with backdrop blur for depth\n - **Smooth Animations**: Delightful micro-interactions and state transitions\n - **Advanced Typography**: Carefully crafted font hierarchy and spacing\n - **Color Psychology**: Harmonious color palette designed for extended use\n - **Depth & Shadows**: Multi-layered shadow system for visual hierarchy\n - **Responsive Design**: Fluid layouts that adapt beautifully to any screen size\n- **📱 Mobile-First Experience**: Optimized for mobile devices with:\n - **Touch-Friendly Controls**: Generous tap targets and gesture support\n - **Adaptive Layouts**: Content reflows intelligently on smaller screens\n - **Performance Optimized**: Smooth 60fps animations on mobile devices\n - **iOS/Android Polish**: Native-feeling interactions and visual cues\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- **Client-side Tools**: Interactive tools that run directly in the browser:\n - **ask_user**: Sophisticated user input with text, multiline, multiple choice, and confirmation dialogs\n - **calculate**: Mathematical expression evaluator for quick calculations\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\n- **♿ Accessibility Features**: \n - **Keyboard Navigation**: Full keyboard support for all interactions\n - **Screen Reader Support**: Semantic HTML and ARIA labels\n - **Reduced Motion**: Respects user's motion preferences\n - **High Contrast**: Supports high contrast mode\n - **Focus Management**: Clear focus indicators and logical tab order",[181],"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.",[189],"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",[196],"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.",[203],"68b09642-53a0-11f0-99a2-f69ea79377d9","IMPLEMENTATION-SUMMARY-AFFORDANCES.md","68b096f6-53a0-11f0-99a2-f69ea79377d9",1091,["D",1751060886468],"# UI Affordance Framework Implementation Summary\n\n## ✅ Successfully Implemented\n\n### Core Infrastructure\n- **AffordanceManager** (`/frontend/utils/affordanceManager.ts`)\n - Central registry for all UI affordances\n - Component lifecycle management (mount/unmount)\n - Method invocation proxy system\n - Global CSS styling injection\n\n### Container System\n- **OverlayContainerManager** (`/frontend/utils/containers/overlayContainer.ts`)\n - Modal/popup overlays with backdrop\n - Flexible positioning (center, top, bottom, left, right)\n - Custom sizing and close functionality\n - Animation support\n\n- **SidebarContainerManager** (`/frontend/utils/containers/sidebarContainer.ts`)\n - Collapsible side panels (left/right)\n - Toggle buttons for collapsed state\n - Header with title and controls\n - Custom width configuration\n\n- **HeaderContainerManager** (`/frontend/utils/containers/headerContainer.ts`)\n - Fixed header extensions\n - Priority-based ordering\n - Integration with existing layout\n - Automatic body padding adjustment\n\n- **FooterContainerManager** (`/frontend/utils/containers/footerContainer.ts`)\n - Footer extensions alongside existing controls\n - Priority-based ordering\n - Integration with existing footer\n - Compact design for mobile\n\n- **InlineContainerManager** (`/frontend/utils/containers/inlineContainer.ts`)\n - Components embedded in chat flow\n - Automatic insertion point detection\n - Animation support\n - Flexible sizing\n\n### Client Tools Integration\n- **register_affordance** - Register new UI components from file keys\n- **call_affordance_method** - Invoke methods on registered components \n- **unregister_affordance** - Remove registered components\n- **list_affordances** - List all active affordances\n\n### Type System\n- **Shared Types** (`/shared/affordance-types.ts`)\n - Complete TypeScript interface definitions\n - AffordanceComponent interface contract\n - Configuration options schema\n - Method call result types\n\n### Example Components\n- **CounterAffordance** (`/frontend/components/affordances/CounterAffordance.tsx`)\n - Simple counter with increment/decrement\n - Demonstrates basic state management\n - Public method exposure (getValue, setValue, increment, decrement, reset)\n\n- **StatusDashboard** (`/frontend/components/affordances/StatusDashboard.tsx`)\n - System status monitoring dashboard\n - Dynamic item management (add, update, remove)\n - Refresh functionality with callbacks\n - Complex state management example\n\n- **NotificationCenter** (`/frontend/components/affordances/NotificationCenter.tsx`)\n - Notification management system\n - Auto-close timers\n - Multiple notification types (info, success, warning, error)\n - List management with cleanup\n\n- **TestAffordance** (`/frontend/components/affordances/TestAffordance.tsx`)\n - Simple test component for framework validation\n - Basic interaction demonstration\n - Method testing (getMessage, setMessage, ping)\n\n## 🔧 Technical Implementation Details\n\n### Lazy Loading Strategy\n- Affordance manager is lazy-loaded to avoid circular dependencies\n- Container managers are imported only when needed\n- Prevents app startup issues\n\n### Component Interface Contract\nAll affordance components must implement:\n```typescript\ninterface AffordanceComponent {\n mount(container: HTMLElement, config: AffordanceConfig): Promise;\n unmount(): Promise;\n getPublicMethods(): Record;\n [customMethod: string]: any;\n}\n```\n\n### Configuration System\nFlexible configuration with type-specific options:\n- Common: title, className, zIndex, persistent\n- Positioning: position, width, height, maxWidth, maxHeight\n- Overlay: modal, backdrop, closable\n- Header/Footer: priority\n- Sidebar: collapsible, defaultCollapsed\n\n### Error Handling\n- Graceful component loading failures\n- Method call validation and error reporting\n- Container creation error handling\n- Comprehensive logging for debugging\n\n### Styling Integration\n- Uses existing CSS custom properties\n- Consistent design tokens\n- Responsive design support\n- Animation system integration\n\n## 🎯 Usage Examples\n\n### Basic Counter in Sidebar\n```javascript\nconst counterId = await register_affordance('sidebar', \n '/frontend/components/affordances/CounterAffordance.tsx', \n {\n title: 'Counter Widget',\n position: 'right',\n width: '250px',\n initialValue: 10,\n step: 5\n }\n);\n\n// Interact with counter\nawait call_affordance_method(counterId, 'increment', []);\nconst value = await call_affordance_method(counterId, 'getValue', []);\n```\n\n### Status Dashboard\n```javascript\nconst dashboardId = await register_affordance('sidebar',\n '/frontend/components/affordances/StatusDashboard.tsx',\n {\n title: 'System Status',\n position: 'left',\n width: '300px'\n }\n);\n\n// Add status items\nawait call_affordance_method(dashboardId, 'addItem', [{\n id: 'cpu',\n label: 'CPU Usage',\n value: '45%',\n status: 'success'\n}]);\n```\n\n### Notification Center\n```javascript\nconst notificationId = await register_affordance('overlay',\n '/frontend/components/affordances/NotificationCenter.tsx',\n {\n title: 'Notifications',\n position: 'top',\n maxWidth: '400px'\n }\n);\n\n// Add notification\nawait call_affordance_method(notificationId, 'addNotification', [{\n title: 'Task Complete',\n message: 'Processing finished successfully.',\n type: 'success',\n autoClose: true\n}]);\n```\n\n## 🚀 Benefits Achieved\n\n### For Assistant Interactions\n- **Rich UI Creation**: Can create complex, interactive interfaces\n- **Real-time Updates**: Components can be updated dynamically\n- **Flexible Positioning**: Multiple container types for different use cases\n- **State Management**: Components maintain their own state\n- **Method Invocation**: Direct interaction with component functionality\n\n### For User Experience\n- **Non-intrusive**: Containers don't interfere with existing chat\n- **Responsive**: Works on mobile and desktop\n- **Accessible**: Keyboard navigation and screen reader support\n- **Animated**: Smooth transitions and micro-interactions\n- **Customizable**: Flexible configuration options\n\n### For Development\n- **Type Safety**: Full TypeScript support\n- **Modular**: Clean separation of concerns\n- **Extensible**: Easy to add new container types\n- **Debuggable**: Comprehensive logging and error handling\n- **Testable**: Clear interfaces and dependency injection\n\n## 📋 Current Status\n\n### ✅ Completed\n- Core framework implementation\n- All container types working\n- Client tools integration\n- Example components\n- Documentation\n- Error handling\n- Lazy loading system\n\n### 🔄 Ready for Testing\n- Framework is fully functional\n- Tools are available in the client\n- Example components can be registered\n- All container types operational\n\n### 🎯 Next Steps for Enhancement\n- **State Persistence**: Save component state across sessions\n- **Component Communication**: Message passing between affordances\n- **Performance Monitoring**: Component performance metrics\n- **Hot Reloading**: Development-time component updates\n- **Component Library**: Curated collection of common components\n\n## 🛠️ Development Notes\n\n### Fixed Issues\n- **JSON Schema Validation**: Fixed invalid schema types for Anthropic API\n- **Circular Dependencies**: Implemented lazy loading to prevent import issues\n- **App Loading**: Resolved module loading problems that caused blank page\n\n### Architecture Decisions\n- **File-based Components**: Components loaded from project files for version control\n- **Standardized Interface**: Consistent API across all component types\n- **Container Abstraction**: Separate managers for each container type\n- **Safe Method Calls**: Proxy system for secure method invocation\n\nThe UI Affordance Framework is now fully operational and ready for use. The assistant can create rich, interactive UI experiences by registering components and controlling them through the standardized tool interface.",[210],"84ab9a04-5418-11f0-b2ce-f69ea79377d9","DEPENDENCY-INJECTION-REVIEW.md","84ab9aa4-5418-11f0-b2ce-f69ea79377d9",1131,["D",1751112473018],"# MCP Client Pool Dependency Injection Review\n\n## Summary\n\nReviewed and updated `clientTools.ts` and `affordanceManager.ts` to ensure that `mcpClientPool` dependency is passed directly instead of relying on global variables.\n\n## Changes Made\n\n### 1. clientTools.ts\n\n**Removed:**\n- Global window interface declaration for `mcpClientPool`\n- Optional `mcpClientPool` parameters in key functions\n\n**Updated:**\n- `getAllAvailableTools()`: Made `mcpClientPool` parameter required\n- `getAllToolHandlers()`: Made `mcpClientPool` parameter required \n- `executeTool()`: Made `mcpClientPool` parameter required\n- `jsExecHandler`: Added proper null check for `mcpClientPool` before using\n- `getAffordanceManager()`: Now requires `mcpClientPool` parameter and creates instance with it\n- All affordance tool handlers: Added proper error handling when `mcpClientPool` is missing\n\n### 2. affordanceManager.ts\n\n**Updated:**\n- Constructor: Added proper TypeScript typing for `mcpClientPool` parameter\n- Added `mcpClientPool` as a private class property with proper typing\n- `registerAffordance()`: Uses passed `mcpClientPool` or falls back to instance pool\n- `loadAndMountComponent()`: Made `mcpClientPool` parameter required\n- Removed global instance export (commented out with explanation)\n\n### 3. useAnthropicStream.tsx\n\n**Updated:**\n- `buildBody()`: Made `clientPool` parameter required\n- `executeToolCall()`: Made `clientPool` parameter required\n- `useAnthropicStream()`: Made `clientPool` parameter required\n- All internal calls properly pass the `clientPool` parameter\n\n## Benefits\n\n1. **No Global Dependencies**: Eliminates reliance on global variables\n2. **Explicit Dependencies**: All dependencies are explicitly passed through function parameters\n3. **Better Testability**: Functions can be tested in isolation with mock dependencies\n4. **Type Safety**: Proper TypeScript typing ensures compile-time error detection\n5. **Clearer API**: Function signatures clearly indicate required dependencies\n\n## Verification\n\n- All functions that need `mcpClientPool` now require it as a parameter\n- No global variable access remains in the codebase\n- Proper error handling when required dependencies are missing\n- Type safety maintained throughout the dependency chain\n\n## Usage Pattern\n\n```typescript\n// Before (using globals)\nconst tools = await getAllAvailableTools(); // Used window.mcpClientPool\n\n// After (explicit dependency injection)\nconst tools = await getAllAvailableTools(mcpClientPool); // Explicit parameter\n```\n\nThe codebase now follows proper dependency injection patterns with no reliance on global state.",[217],"8a66411e-5347-11f0-be04-f69ea79377d9","COMMAND-PALETTE-REVIEW.md","8a6641f0-5347-11f0-be04-f69ea79377d9",1061,["D",1751022717815],"# Command Palette and MCP Tool Integration Review\n\n## Summary\n\nThis document reviews the command palette and MCP tool invocation system, comparing it with existing client tools and ensuring proper integration across all components.\n\n## Issues Found and Fixed\n\n### ❌ Issues Identified\n\n1. **Dead Import**: `StreamingChat.tsx` imported non-existent `CommandPalette.tsx`\n2. **Client Tools Not Exposed**: Command palette only showed MCP tools/prompts, missing client-side tools\n3. **Inconsistent Tool Discovery**: Client tools weren't discoverable via `/` command interface\n4. **Missing Integration**: MCP Status component didn't show client tools\n\n### ✅ Fixes Implemented\n\n#### 1. Removed Dead Import\n- **File**: `/frontend/components/StreamingChat.tsx`\n- **Change**: Removed import for non-existent `CommandPalette.tsx`\n\n#### 2. Enhanced Command Palette with Client Tools\n- **File**: `/frontend/components/EnhancedCommandPalette.tsx`\n- **Changes**:\n - Added import for `CLIENT_TOOLS` from `clientTools.ts`\n - Extended `CommandType` to include `\"client_tool\"`\n - Added `ClientToolCommand` interface\n - Modified command initialization to include client tools first (higher priority)\n - Added `executeClientTool` function for client tool execution\n - Enhanced filtering to support `client:` prefix searches\n - Updated UI rendering with laptop icon for client tools\n - Added proper argument handling for client tool schemas\n\n#### 3. Enhanced MCP Status Component\n- **File**: `/frontend/components/MCPStatus.tsx`\n- **Changes**:\n - Added import for `CLIENT_TOOLS`\n - Updated status text to include client tools count\n - Added dedicated \"Client Tools\" section in status details\n - Shows all available client tools with descriptions and schemas\n\n#### 4. Updated Documentation\n- **File**: `/README.md`\n- **Change**: Updated command palette description to mention client-side tools\n\n## Current Architecture\n\n### Command Palette Integration\n\nThe enhanced command palette now provides unified access to:\n\n1. **Client-Side Tools** (highest priority)\n - `ask_user` - Interactive user input with multiple types\n - `calculate` - Mathematical expression evaluation\n - `js_exec` - JavaScript code execution\n - Icon: 💻 (laptop)\n - Server: \"Client\"\n\n2. **MCP Prompts**\n - Server-provided prompts with arguments\n - Icon: 💬 (comment)\n - Server: Actual server name\n\n3. **MCP Tools**\n - Server-provided tools with input schemas\n - Icon: 🔨 (hammer)\n - Server: Actual server name\n\n### Search Capabilities\n\nUsers can filter commands using:\n- **Name matching**: `/ask` finds `ask_user`\n- **Description matching**: `/calc` finds `calculate`\n- **Type prefixes**:\n - `/client:` - Shows only client tools\n - `/tool:` - Shows MCP and client tools\n - `/prompt:` - Shows only MCP prompts\n\n### Tool Execution Flow\n\n1. **Client Tools**: Execute directly in browser with `client_tool_use` blocks\n2. **MCP Tools**: Execute via MCP client pool with `mcp_tool_use` blocks\n3. **MCP Prompts**: Fetch and insert prompt text into chat input\n\n### Status Integration\n\nThe MCP Status component now shows:\n- Client tools count in summary\n- Dedicated \"Client Tools\" section with full details\n- Combined tool count (MCP + client tools)\n\n## Benefits\n\n### ✅ Unified Tool Discovery\n- Single `/` interface for all available tools and prompts\n- Consistent UI across tool types\n- Clear visual distinction with appropriate icons\n\n### ✅ Enhanced User Experience\n- Client tools appear first (higher priority for common operations)\n- Comprehensive search and filtering\n- Proper argument handling for all tool types\n\n### ✅ Better Status Visibility\n- Users can see all available tools in one place\n- Clear separation between client and server capabilities\n- Detailed schema information for debugging\n\n### ✅ Consistent Architecture\n- All tools follow same execution pattern\n- Unified error handling\n- Proper integration with existing MCP client pool\n\n## Testing Recommendations\n\n1. **Command Palette**:\n - Type `/` to verify all tools appear\n - Test filtering with `client:`, `tool:`, `prompt:` prefixes\n - Verify client tools appear first in list\n - Test argument dialogs for each tool type\n\n2. **MCP Status**:\n - Verify client tools section appears\n - Check tool counts include client tools\n - Ensure client tools show proper schemas\n\n3. **Tool Execution**:\n - Test client tool execution (ask_user, calculate, js_exec)\n - Verify proper error handling\n - Check tool result formatting\n\n## Future Enhancements\n\n1. **Tool Categories**: Group tools by functionality\n2. **Favorites**: Allow users to pin frequently used tools\n3. **Recent Tools**: Show recently used tools at top\n4. **Tool Help**: Inline help and examples for each tool\n5. **Custom Client Tools**: Allow users to define custom client-side tools\n\n## Conclusion\n\nThe command palette now provides a unified, comprehensive interface for all available tools and prompts. Client tools are properly integrated and discoverable, with consistent UI patterns and execution flows. The MCP Status component provides complete visibility into all available capabilities.\n\nThe architecture maintains separation of concerns while providing a seamless user experience across client-side and server-side tools.",[224],"c61522a6-53a2-11f0-9a4c-f69ea79377d9","AFFORDANCE-IMPLEMENTATION-SUMMARY.md","a724728c-539f-11f0-9003-f69ea79377d9",1105,["D",1751061902145],"# UI Affordance Framework - Implementation Summary\n\n## ✅ Completed Implementation\n\nThe UI Affordance Registration Framework has been successfully implemented with full support for dynamic component loading from any source (MCP files, local files, etc.).\n\n### 🏗️ Core Architecture\n\n#### 1. **AffordanceManager** (`/frontend/utils/affordanceManager.ts`)\n- Central registry for all UI affordances\n- Handles component lifecycle (register, mount, unmount)\n- Supports loading from MCP sources (like `js_exec` tool)\n- Fallback to local files when MCP unavailable\n- Comprehensive error handling and validation\n\n#### 2. **Container System** (`/frontend/utils/containers/`)\n- **OverlayContainer** - Modal/popup overlays with backdrop\n- **SidebarContainer** - Collapsible side panels with toggle buttons\n- **HeaderContainer** - Fixed header extensions with priority ordering\n- **FooterContainer** - Footer extensions alongside existing controls\n- **InlineContainer** - Chat-embedded components\n\n#### 3. **Client Tools** (integrated in `/frontend/utils/clientTools.ts`)\n- **`register_affordance`** - Register components from any source\n- **`call_affordance_method`** - Invoke component methods safely\n- **`unregister_affordance`** - Remove components cleanly\n- **`list_affordances`** - List all active affordances\n\n### 🔧 Key Features\n\n#### **Flexible Source Loading**\n- **Primary**: MCP file sources using `files-get` tool\n- **Fallback**: Local project files\n- **Pattern**: Follows same approach as `js_exec` tool\n\n#### **Component Interface**\n```typescript\ninterface AffordanceComponent {\n mount(container: HTMLElement, config: AffordanceConfig): Promise;\n unmount(): Promise;\n getPublicMethods(): Record;\n [customMethod: string]: any;\n}\n```\n\n#### **Container Types**\n- **Overlay**: Modal dialogs, forms, image viewers\n- **Sidebar**: Tool palettes, dashboards, navigation\n- **Header**: Status indicators, breadcrumbs, quick actions\n- **Footer**: Progress bars, status info, quick stats\n- **Inline**: Widgets, charts, interactive content\n\n### 📦 Example Components\n\n#### 1. **TestAffordance** - Simple test component\n```javascript\nconst id = await register_affordance('overlay', 'test-component.js', {\n title: 'Test Widget'\n});\nawait call_affordance_method(id, 'ping', []); // Returns \"pong!\"\n```\n\n#### 2. **CounterAffordance** - Interactive counter\n```javascript\nconst id = await register_affordance('sidebar', 'counter.js', {\n title: 'Counter', position: 'right', initialValue: 10\n});\nawait call_affordance_method(id, 'increment', [5]); // Increment by 5\n```\n\n#### 3. **StatusDashboard** - System monitoring\n```javascript\nconst id = await register_affordance('sidebar', 'dashboard.js', {\n title: 'System Status', width: '350px'\n});\nawait call_affordance_method(id, 'addItem', [{\n id: 'cpu', label: 'CPU Usage', value: '45%', status: 'success'\n}]);\n```\n\n#### 4. **NotificationCenter** - Notification management\n```javascript\nconst id = await register_affordance('overlay', 'notifications.js', {\n position: 'top', maxNotifications: 10\n});\nawait call_affordance_method(id, 'addNotification', [{\n title: 'Success', message: 'Task completed!', type: 'success'\n}]);\n```\n\n### 🎯 Usage Patterns\n\n#### **MCP File Source** (Recommended)\n```javascript\n// 1. Create component using MCP tools\nawait files_create('components/my-widget.js', componentCode);\n\n// 2. Register the component\nconst id = await register_affordance('sidebar', 'components/my-widget.js', {\n title: 'My Widget', position: 'right'\n});\n\n// 3. Interact with component\nconst methods = await call_affordance_method(id, 'getPublicMethods', []);\nawait call_affordance_method(id, 'updateData', [newData]);\n```\n\n#### **Local File Source** (Fallback)\n```javascript\nconst id = await register_affordance('overlay', \n '/frontend/components/affordances/TestAffordance.tsx', \n { title: 'Local Test' }\n);\n```\n\n### 🛡️ Error Handling\n\n#### **Comprehensive Validation**\n- File source validation (MCP → local fallback)\n- Module import validation with helpful error messages\n- Component interface validation\n- Runtime error catching and reporting\n\n#### **Helpful Error Messages**\n- \"Failed to import module\" → Syntax error guidance\n- \"No component found\" → Export structure guidance\n- \"Component must implement X method\" → Interface requirement guidance\n\n### 📚 Documentation\n\n#### **Framework Documentation**\n- **[AFFORDANCE-FRAMEWORK.md](./AFFORDANCE-FRAMEWORK.md)** - Complete framework overview\n- **[AFFORDANCE-COMPONENT-GUIDE.md](./AFFORDANCE-COMPONENT-GUIDE.md)** - Component development guide\n\n#### **Tool Descriptions**\n- Clear guidance on file requirements\n- Examples of MCP vs local file usage\n- Container type explanations\n- Configuration options documentation\n\n### 🔄 Integration\n\n#### **Seamless Integration**\n- **Client Tools**: New affordance tools added to existing system\n- **Styling**: Uses existing CSS custom properties and design tokens\n- **Layout**: Containers respect existing layout without interference\n- **Performance**: Lazy loading and efficient lifecycle management\n\n#### **MCP Compatibility**\n- Follows same pattern as `js_exec` tool\n- Uses `files-get` for MCP file loading\n- Graceful fallback to local files\n- Consistent error handling approach\n\n### 🚀 Ready for Use\n\nThe framework is now fully operational and ready for the assistant to use. Key capabilities:\n\n1. **Dynamic Component Registration** - Load any JavaScript/TypeScript component from MCP or local sources\n2. **Multiple Container Types** - Choose the right UI container for each use case\n3. **Safe Method Invocation** - Call component methods with error handling\n4. **Lifecycle Management** - Proper mounting, unmounting, and cleanup\n5. **Comprehensive Documentation** - Clear guides for component development\n\n### 🎉 Success Criteria Met\n\n✅ **Flexible Source Loading** - Components can be loaded from any source \n✅ **Standardized Interface** - Consistent component interface \n✅ **Multiple Container Types** - Overlay, sidebar, header, footer, inline \n✅ **Method Invocation** - Safe method calls with error handling \n✅ **Error Handling** - Comprehensive validation and helpful messages \n✅ **Documentation** - Complete guides and examples \n✅ **Integration** - Seamless integration with existing system \n\nThe UI Affordance Framework is now ready for production use! 🎊",[231],"d1d020ea-539e-11f0-afd3-f69ea79377d9","AFFORDANCE-FRAMEWORK.md","d1d0218a-539e-11f0-afd3-f69ea79377d9",1077,["D",1751060203844],"# UI Affordance Registration Framework\n\nA flexible system for dynamically registering and controlling UI components through client-side tools. This framework allows the assistant to create rich, interactive UI experiences by registering components in dedicated containers and interacting with them through a standardized API.\n\n## Overview\n\nThe Affordance Framework provides:\n- **Dynamic Component Registration**: Load and mount components from file keys\n- **Multiple Container Types**: Overlay, header, footer, sidebar, and inline containers\n- **Standardized Interface**: Consistent API for component interaction\n- **Lifecycle Management**: Proper mounting, unmounting, and cleanup\n- **Method Invocation**: Safe method calls on registered components\n\n## Architecture\n\n### Core Components\n\n1. **AffordanceManager** (`/frontend/utils/affordanceManager.ts`)\n - Central registry for all affordances\n - Handles component lifecycle\n - Manages container creation and destruction\n\n2. **Container Managers** (`/frontend/utils/containers/`)\n - `OverlayContainerManager` - Modal/popup overlays\n - `SidebarContainerManager` - Collapsible side panels\n - `HeaderContainerManager` - Fixed header extensions\n - `FooterContainerManager` - Footer extensions\n - `InlineContainerManager` - Chat-embedded components\n\n3. **Client Tools** (integrated in `/frontend/utils/clientTools.ts`)\n - `register_affordance` - Register new components\n - `call_affordance_method` - Invoke component methods\n - `unregister_affordance` - Remove components\n - `list_affordances` - List active components\n\n## Container Types\n\n### Overlay\nModal/popup containers with backdrop support.\n\n**Features:**\n- Modal backdrop (closable)\n- Flexible positioning (center, top, bottom, left, right)\n- Custom sizing\n- Close button\n- Animation support\n\n**Use Cases:**\n- Forms and dialogs\n- Image viewers\n- Settings panels\n- Confirmation dialogs\n\n### Sidebar\nCollapsible side panels with toggle functionality.\n\n**Features:**\n- Left/right positioning\n- Collapsible with toggle button\n- Custom width\n- Header with title and controls\n- Persistent state\n\n**Use Cases:**\n- Navigation menus\n- Tool palettes\n- Status dashboards\n- File browsers\n\n### Header\nFixed header extensions that integrate with existing layout.\n\n**Features:**\n- Priority-based ordering\n- Left/right positioning\n- Automatic layout adjustment\n- Close functionality\n\n**Use Cases:**\n- Status indicators\n- Quick actions\n- Breadcrumbs\n- Search bars\n\n### Footer\nFooter extensions that work alongside existing controls.\n\n**Features:**\n- Priority-based ordering\n- Integration with existing footer\n- Compact design\n- Close functionality\n\n**Use Cases:**\n- Status indicators\n- Progress bars\n- Quick stats\n- Action buttons\n\n### Inline\nComponents embedded directly in the chat flow.\n\n**Features:**\n- Automatic insertion point detection\n- Flexible sizing\n- Animation support\n- Close functionality\n\n**Use Cases:**\n- Interactive widgets\n- Data visualizations\n- Embedded forms\n- Rich content displays\n\n## Component Interface\n\nAll affordance components must implement the `AffordanceComponent` interface:\n\n```typescript\ninterface AffordanceComponent {\n mount(container: HTMLElement, config: AffordanceConfig): Promise;\n unmount(): Promise;\n getPublicMethods(): Record;\n [customMethod: string]: any;\n}\n```\n\n### Required Methods\n\n- **`mount(container, config)`**: Initialize and render the component\n- **`unmount()`**: Clean up resources and remove from DOM\n- **`getPublicMethods()`**: Return object with callable methods\n\n### Configuration Options\n\n```typescript\ninterface AffordanceConfig {\n // Common\n title?: string;\n className?: string;\n zIndex?: number;\n persistent?: boolean;\n \n // Positioning\n position?: 'left' | 'right' | 'top' | 'bottom' | 'center';\n width?: string;\n height?: string;\n maxWidth?: string;\n maxHeight?: string;\n \n // Overlay specific\n modal?: boolean;\n backdrop?: boolean;\n closable?: boolean;\n \n // Header/Footer specific\n priority?: number;\n \n // Sidebar specific\n collapsible?: boolean;\n defaultCollapsed?: boolean;\n \n // Custom properties\n [key: string]: any;\n}\n```\n\n## Usage Examples\n\n### 1. Register a Counter Component\n\n```typescript\n// Register counter in sidebar\nconst counterId = await register_affordance('sidebar', \n '/frontend/components/affordances/CounterAffordance.tsx', \n {\n title: 'Counter Widget',\n position: 'right',\n width: '250px',\n initialValue: 10,\n step: 5\n }\n);\n\n// Interact with counter\nawait call_affordance_method(counterId, 'increment', []);\nconst value = await call_affordance_method(counterId, 'getValue', []);\n```\n\n### 2. Create a Status Dashboard\n\n```typescript\n// Register status dashboard\nconst dashboardId = await register_affordance('sidebar',\n '/frontend/components/affordances/StatusDashboard.tsx',\n {\n title: 'System Status',\n position: 'left',\n width: '300px',\n refreshInterval: 5000\n }\n);\n\n// Add status items\nawait call_affordance_method(dashboardId, 'addItem', [{\n id: 'cpu',\n label: 'CPU Usage',\n value: '45%',\n status: 'success'\n}]);\n\nawait call_affordance_method(dashboardId, 'addItem', [{\n id: 'memory',\n label: 'Memory',\n value: '2.1GB',\n status: 'warning'\n}]);\n```\n\n### 3. Show Notifications\n\n```typescript\n// Register notification center\nconst notificationId = await register_affordance('overlay',\n '/frontend/components/affordances/NotificationCenter.tsx',\n {\n title: 'Notifications',\n position: 'top-right',\n maxWidth: '400px',\n maxNotifications: 10\n }\n);\n\n// Add notifications\nawait call_affordance_method(notificationId, 'addNotification', [{\n title: 'Task Complete',\n message: 'Your data processing task has finished successfully.',\n type: 'success',\n autoClose: true,\n duration: 3000\n}]);\n```\n\n### 4. Inline Widget\n\n```typescript\n// Register inline chart\nconst chartId = await register_affordance('inline',\n '/frontend/components/affordances/ChartWidget.tsx',\n {\n title: 'Sales Data',\n width: '100%',\n height: '300px',\n chartType: 'line'\n }\n);\n\n// Update chart data\nawait call_affordance_method(chartId, 'updateData', [\n [\n { x: 'Jan', y: 100 },\n { x: 'Feb', y: 150 },\n { x: 'Mar', y: 120 }\n ]\n]);\n```\n\n## Creating Custom Components\n\n### Basic Structure\n\n```typescript\n/** @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 { AffordanceComponent, AffordanceConfig } from \"../../../shared/affordance-types.ts\";\n\n// Your React component\nconst MyComponent: React.FC = (props) => {\n return

My Custom Component

;\n};\n\n// Affordance wrapper class\nexport default class MyAffordance implements AffordanceComponent {\n private root: any = null;\n private container: HTMLElement | null = null;\n\n async mount(container: HTMLElement, config: AffordanceConfig): Promise {\n this.container = container;\n this.root = createRoot(container);\n this.root.render();\n }\n\n async unmount(): Promise {\n if (this.root) {\n this.root.unmount();\n this.root = null;\n }\n this.container = null;\n }\n\n getPublicMethods(): Record {\n return {\n myMethod: this.myMethod.bind(this)\n };\n }\n\n // Custom methods\n myMethod(arg: any): any {\n // Implementation\n return result;\n }\n}\n```\n\n### Best Practices\n\n1. **Error Handling**: Always wrap async operations in try-catch\n2. **Resource Cleanup**: Properly clean up timers, listeners, and subscriptions in `unmount()`\n3. **State Management**: Use React state for UI state, class properties for persistent data\n4. **Method Binding**: Bind methods in `getPublicMethods()` to maintain `this` context\n5. **Configuration**: Use the config parameter for initial setup and customization\n6. **Responsive Design**: Consider different container sizes and positions\n\n## Example Components\n\nThe framework includes several example components:\n\n1. **CounterAffordance** (`/frontend/components/affordances/CounterAffordance.tsx`)\n - Simple counter with increment/decrement\n - Demonstrates basic state management and method exposure\n\n2. **StatusDashboard** (`/frontend/components/affordances/StatusDashboard.tsx`)\n - System status monitoring\n - Shows complex state management and refresh functionality\n\n3. **NotificationCenter** (`/frontend/components/affordances/NotificationCenter.tsx`)\n - Notification management system\n - Demonstrates auto-close timers and list management\n\n## Integration with Existing System\n\nThe framework integrates seamlessly with the existing chat application:\n\n- **Client Tools**: New affordance tools are added to the existing client tools system\n- **Styling**: Uses existing CSS custom properties and design tokens\n- **Layout**: Containers respect existing layout and don't interfere with chat functionality\n- **Performance**: Lazy loading and efficient lifecycle management\n\n## Debugging and Development\n\n### Logging\nAll affordance operations are logged to the console with the `[AffordanceManager]` prefix.\n\n### Error Handling\n- Component loading errors are caught and reported\n- Method call errors return structured error responses\n- Container creation failures are handled gracefully\n\n### Development Tools\n- Use `list_affordances` to see all registered components\n- Check browser console for detailed logging\n- Use React DevTools for component debugging\n\n## Future Enhancements\n\nPotential future improvements:\n- **State Persistence**: Save/restore component state across sessions\n- **Component Communication**: Message passing between affordances\n- **Theme Integration**: Automatic theme switching support\n- **Performance Monitoring**: Component performance metrics\n- **Hot Reloading**: Development-time component reloading\n- **Component Library**: Curated library of common components\n\n## Security Considerations\n\n- Components are loaded from trusted file sources only\n- Method calls are validated before execution\n- DOM manipulation is contained within assigned containers\n- No direct access to sensitive application state",[238],"9bb47ce6-53a2-11f0-8294-f69ea79377d9","AFFORDANCE-COMPONENT-GUIDE.md","5bca361c-53a1-11f0-aed5-f69ea79377d9",1104,["D",1751061831045],"# Affordance Component Development Guide\n\n## Quick Start\n\nTo create a component that works with the affordance system, you need JavaScript/TypeScript code that exports a class implementing the `AffordanceComponent` interface. This code can come from:\n\n- **MCP file sources** (recommended) - Use MCP tools to create/manage component files\n- **Local project files** - Files in the `/frontend/components/affordances/` directory\n- **Any accessible source** - The system will try MCP first, then fall back to local files\n\n## Required Interface\n\n```typescript\ninterface AffordanceComponent {\n mount(container: HTMLElement, config: AffordanceConfig): Promise;\n unmount(): Promise;\n getPublicMethods(): Record;\n [customMethod: string]: any;\n}\n```\n\n## Minimal Example\n\n```typescript\n/** @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 { AffordanceComponent, AffordanceConfig } from \"../../../shared/affordance-types.ts\";\n\n// Your React component\nconst MyComponent: React.FC<{message: string}> = ({ message }) => {\n return

{message}

;\n};\n\n// Affordance wrapper class (REQUIRED)\nexport default class MyAffordance implements AffordanceComponent {\n private root: any = null;\n private container: HTMLElement | null = null;\n private message: string = \"Hello!\";\n\n async mount(container: HTMLElement, config: AffordanceConfig): Promise {\n this.container = container;\n this.message = config.message || \"Hello!\";\n this.root = createRoot(container);\n this.root.render();\n }\n\n async unmount(): Promise {\n if (this.root) {\n this.root.unmount();\n this.root = null;\n }\n this.container = null;\n }\n\n getPublicMethods(): Record {\n return {\n setMessage: this.setMessage.bind(this),\n getMessage: this.getMessage.bind(this)\n };\n }\n\n // Custom methods\n setMessage(newMessage: string): void {\n this.message = newMessage;\n if (this.root) {\n this.root.render();\n }\n }\n\n getMessage(): string {\n return this.message;\n }\n}\n```\n\n## File Requirements\n\n1. **Content**: Must contain JavaScript/TypeScript code that exports a class\n2. **Export**: Must have a default export of the affordance class\n3. **Dependencies**: Use ESM imports from `https://esm.sh/` for compatibility\n4. **React**: Pin React version to 18.2.0 for consistency\n5. **Source**: Can be from MCP files, local files, or any accessible source\n\n## Loading Priority\n\nThe system tries to load components in this order:\n1. **MCP source** - Uses `files-get` tool to fetch from MCP server\n2. **Local file** - Falls back to local project files\n3. **Error** - If neither source works, provides detailed error message\n\n## Available Example Components\n\n1. **TestAffordance** (`/frontend/components/affordances/TestAffordance.tsx`)\n - Simple test component with click counter\n - Methods: `getMessage()`, `setMessage(msg)`, `ping()`\n\n2. **CounterAffordance** (`/frontend/components/affordances/CounterAffordance.tsx`)\n - Counter with increment/decrement\n - Methods: `getValue()`, `setValue(n)`, `increment(step?)`, `decrement(step?)`, `reset()`\n\n3. **StatusDashboard** (`/frontend/components/affordances/StatusDashboard.tsx`)\n - Status monitoring dashboard\n - Methods: `addItem(item)`, `updateItem(id, updates)`, `removeItem(id)`, `clearItems()`, `getItems()`\n\n4. **NotificationCenter** (`/frontend/components/affordances/NotificationCenter.tsx`)\n - Notification management\n - Methods: `addNotification(notif)`, `removeNotification(id)`, `clearAll()`, `getCount()`\n\n## Container Types & Best Practices\n\n### Overlay\n- **Best for**: Modals, dialogs, forms, image viewers\n- **Config**: `modal: true/false`, `backdrop: true/false`, `position: 'center'|'top'|'bottom'`\n- **Size**: Use `maxWidth`, `maxHeight` for responsive design\n\n### Sidebar\n- **Best for**: Tool palettes, navigation, dashboards, file browsers\n- **Config**: `position: 'left'|'right'`, `width: '300px'`, `collapsible: true`\n- **Size**: Fixed width recommended (250px-400px)\n\n### Header\n- **Best for**: Status indicators, breadcrumbs, quick actions\n- **Config**: `position: 'left'|'right'`, `priority: number`\n- **Size**: Keep compact, height auto-adjusts\n\n### Footer\n- **Best for**: Status bars, progress indicators, quick stats\n- **Config**: `position: 'left'|'right'`, `priority: number`\n- **Size**: Keep compact, integrates with existing footer\n\n### Inline\n- **Best for**: Widgets, charts, interactive content in chat\n- **Config**: `width: '100%'`, `height: '300px'`\n- **Size**: Responsive width, fixed height often works best\n\n## Usage Examples\n\n### Using MCP File Source\n```javascript\n// 1. Create component using MCP tools (files-create, etc.)\n// 2. Register the component by file key\nconst id = await register_affordance('sidebar', \n 'components/my-dashboard.js', // MCP file key\n { title: 'My Dashboard', position: 'right' }\n);\n```\n\n### Using Local File\n```javascript\n// Register a local component file\nconst id = await register_affordance('overlay', \n '/frontend/components/affordances/TestAffordance.tsx', \n { title: 'Test Widget' }\n);\n```\n\n### Check Methods and Interact\n```javascript\n// Check available methods\nconst methods = await call_affordance_method(id, 'getPublicMethods', []);\n\n// Call component methods\nawait call_affordance_method(id, 'setMessage', ['Hello World!']);\n```\n\n## Common Patterns\n\n### State Management\n```typescript\nclass MyAffordance implements AffordanceComponent {\n private data: any[] = [];\n \n addData(item: any): void {\n this.data.push(item);\n this.render(); // Re-render with new data\n }\n \n private render(): void {\n if (this.root) {\n this.root.render();\n }\n }\n}\n```\n\n### Configuration Handling\n```typescript\nasync mount(container: HTMLElement, config: AffordanceConfig): Promise {\n // Extract config with defaults\n const title = config.title || \"Default Title\";\n const theme = config.theme || \"light\";\n const autoRefresh = config.autoRefresh || false;\n \n // Use config in component\n this.root.render();\n}\n```\n\n### Cleanup\n```typescript\nasync unmount(): Promise {\n // Clear timers\n if (this.timer) clearInterval(this.timer);\n \n // Remove event listeners\n if (this.eventHandler) {\n document.removeEventListener('click', this.eventHandler);\n }\n \n // Unmount React\n if (this.root) {\n this.root.unmount();\n this.root = null;\n }\n}\n```\n\n## Error Handling\n\nThe affordance system will catch and report:\n- Module loading errors (wrong file type, syntax errors)\n- Missing interface methods\n- Runtime errors in mount/unmount\n- Method call errors\n\nAlways test your components with:\n```javascript\n// Register component\nconst id = await register_affordance('overlay', '/path/to/component.tsx', {title: 'Test'});\n\n// Test methods\nawait call_affordance_method(id, 'getPublicMethods', []);\n```\n\n## Debugging Tips\n\n1. **Check Console**: All affordance operations are logged with `[AffordanceManager]` prefix\n2. **Use getPublicMethods**: Always call this first to see available methods\n3. **Test Incrementally**: Start with simple components, add complexity gradually\n4. **Validate Config**: Check that your config properties are being used correctly\n5. **React DevTools**: Use browser dev tools to inspect React component tree",[245],"a661e74c-4ce4-11f0-9d77-76b3cceeab13","test","a47ce28f-7f0f-482b-8862-627aa00ecfdd",833,["D",1750320537587],"directory",[252],"d0d818ac-3d49-11f0-afd9-76b3cceeab13","shared","d2bf992b-f210-4f83-bea3-aec8e3e2caaa",55,["D",1748604769414],[259],"2f3fab3e-3cdd-11f0-acd6-9e149126039e","frontend","43895adc-f88f-4b64-90b5-2b707f50c067",2,["D",1748558112658],[265],"7471d038-3cdd-11f0-8caa-9e149126039e","backend","b0b9068e-33c0-4fad-8bcf-5a3136836657",9,["D",1748558228747],[271],"pulls","branches","forks","envVars",{"_283":63,"_285":63},"connections",{"_283":63,"_284":63},"count","unfilledCount","emptyCount",{"_44":270,"_32":271,"_30":272,"_149":-5,"_42":43,"_41":273,"_151":59,"_39":759,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_350":760,"_27":761},{"_44":751,"_32":752,"_30":57,"_149":272,"_42":43,"_41":753,"_151":59,"_39":754,"_13":755,"_34":154,"_36":756,"_24":25,"_156":-5,"_350":757,"_27":758},{"_44":264,"_32":265,"_30":266,"_149":-5,"_42":43,"_41":267,"_151":59,"_39":748,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_350":749,"_27":750},{"_44":743,"_32":429,"_30":618,"_149":266,"_42":43,"_41":744,"_151":59,"_39":745,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_350":746,"_27":747},{"_44":738,"_32":713,"_30":707,"_149":618,"_42":43,"_41":739,"_151":25,"_39":740,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_350":741,"_27":742},{"_44":730,"_32":731,"_30":732,"_149":707,"_42":43,"_41":733,"_151":25,"_39":734,"_13":153,"_34":35,"_36":735,"_24":25,"_156":-5,"_350":736,"_27":737},{"_44":722,"_32":723,"_30":724,"_149":707,"_42":43,"_41":725,"_151":25,"_39":726,"_13":177,"_34":35,"_36":727,"_24":25,"_156":-5,"_350":728,"_27":729},{"_44":714,"_32":715,"_30":716,"_149":707,"_42":43,"_41":717,"_151":25,"_39":718,"_13":153,"_34":35,"_36":719,"_24":25,"_156":-5,"_350":720,"_27":721},{"_44":704,"_32":705,"_30":706,"_149":707,"_42":43,"_41":708,"_151":25,"_39":709,"_13":267,"_34":35,"_36":710,"_24":25,"_156":-5,"_350":711,"_27":712},{"_44":695,"_32":696,"_30":697,"_149":618,"_42":43,"_41":698,"_151":25,"_39":699,"_13":700,"_34":35,"_36":701,"_24":25,"_156":-5,"_350":702,"_27":703},{"_44":687,"_32":688,"_30":689,"_149":618,"_42":43,"_41":690,"_151":59,"_39":691,"_13":63,"_34":35,"_36":692,"_24":25,"_156":-5,"_350":693,"_27":694},{"_44":678,"_32":679,"_30":680,"_149":618,"_42":43,"_41":681,"_151":25,"_39":682,"_13":683,"_34":35,"_36":684,"_24":25,"_156":-5,"_350":685,"_27":686},{"_44":669,"_32":670,"_30":671,"_149":618,"_42":43,"_41":672,"_151":59,"_39":673,"_13":674,"_34":35,"_36":675,"_24":25,"_156":-5,"_350":676,"_27":677},{"_44":661,"_32":662,"_30":663,"_149":618,"_42":43,"_41":664,"_151":59,"_39":665,"_13":630,"_34":35,"_36":666,"_24":25,"_156":-5,"_350":667,"_27":668},{"_44":652,"_32":653,"_30":654,"_149":618,"_42":43,"_41":655,"_151":59,"_39":656,"_13":657,"_34":35,"_36":658,"_24":25,"_156":-5,"_350":659,"_27":660},{"_44":643,"_32":644,"_30":645,"_149":618,"_42":43,"_41":646,"_151":59,"_39":647,"_13":648,"_34":35,"_36":649,"_24":25,"_156":-5,"_350":650,"_27":651},{"_44":634,"_32":635,"_30":636,"_149":618,"_42":43,"_41":637,"_151":59,"_39":638,"_13":639,"_34":35,"_36":640,"_24":25,"_156":-5,"_350":641,"_27":642},{"_44":625,"_32":626,"_30":627,"_149":618,"_42":43,"_41":628,"_151":59,"_39":629,"_13":630,"_34":35,"_36":631,"_24":25,"_156":-5,"_350":632,"_27":633},{"_44":615,"_32":616,"_30":617,"_149":618,"_42":43,"_41":619,"_151":25,"_39":620,"_13":621,"_34":35,"_36":622,"_24":25,"_156":-5,"_350":623,"_27":624},{"_44":610,"_32":600,"_30":594,"_149":266,"_42":43,"_41":611,"_151":59,"_39":612,"_13":267,"_34":256,"_36":-5,"_24":25,"_156":-5,"_350":613,"_27":614},{"_44":601,"_32":602,"_30":603,"_149":594,"_42":43,"_41":604,"_151":25,"_39":605,"_13":606,"_34":35,"_36":607,"_24":25,"_156":-5,"_350":608,"_27":609},{"_44":591,"_32":592,"_30":593,"_149":594,"_42":43,"_41":595,"_151":59,"_39":596,"_13":442,"_34":35,"_36":597,"_24":25,"_156":-5,"_350":598,"_27":599},{"_44":586,"_32":416,"_30":481,"_149":266,"_42":43,"_41":587,"_151":59,"_39":588,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_350":589,"_27":590},{"_44":582,"_32":549,"_30":543,"_149":481,"_42":43,"_41":553,"_151":59,"_39":583,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_350":584,"_27":585},{"_44":574,"_32":575,"_30":576,"_149":543,"_42":43,"_41":577,"_151":25,"_39":578,"_13":63,"_34":35,"_36":579,"_24":25,"_156":-5,"_350":580,"_27":581},{"_44":566,"_32":567,"_30":568,"_149":543,"_42":43,"_41":569,"_151":25,"_39":570,"_13":63,"_34":35,"_36":571,"_24":25,"_156":-5,"_350":572,"_27":573},{"_44":558,"_32":559,"_30":560,"_149":543,"_42":43,"_41":561,"_151":59,"_39":562,"_13":63,"_34":35,"_36":563,"_24":25,"_156":-5,"_350":564,"_27":565},{"_44":550,"_32":551,"_30":552,"_149":543,"_42":43,"_41":553,"_151":59,"_39":554,"_13":63,"_34":35,"_36":555,"_24":25,"_156":-5,"_350":556,"_27":557},{"_44":540,"_32":541,"_30":542,"_149":543,"_42":43,"_41":544,"_151":25,"_39":545,"_13":63,"_34":35,"_36":546,"_24":25,"_156":-5,"_350":547,"_27":548},{"_44":531,"_32":532,"_30":533,"_149":481,"_42":43,"_41":534,"_151":25,"_39":535,"_13":536,"_34":35,"_36":537,"_24":25,"_156":-5,"_350":538,"_27":539},{"_44":522,"_32":523,"_30":524,"_149":481,"_42":43,"_41":525,"_151":25,"_39":526,"_13":527,"_34":35,"_36":528,"_24":25,"_156":-5,"_350":529,"_27":530},{"_44":513,"_32":514,"_30":515,"_149":481,"_42":43,"_41":516,"_151":25,"_39":517,"_13":518,"_34":35,"_36":519,"_24":25,"_156":-5,"_350":520,"_27":521},{"_44":505,"_32":506,"_30":507,"_149":481,"_42":43,"_41":508,"_151":59,"_39":509,"_13":63,"_34":35,"_36":510,"_24":25,"_156":-5,"_350":511,"_27":512},{"_44":496,"_32":497,"_30":498,"_149":481,"_42":43,"_41":499,"_151":59,"_39":500,"_13":501,"_34":35,"_36":502,"_24":25,"_156":-5,"_350":503,"_27":504},{"_44":487,"_32":488,"_30":489,"_149":481,"_42":43,"_41":490,"_151":59,"_39":491,"_13":492,"_34":35,"_36":493,"_24":25,"_156":-5,"_350":494,"_27":495},{"_44":478,"_32":479,"_30":480,"_149":481,"_42":43,"_41":482,"_151":59,"_39":483,"_13":177,"_34":35,"_36":484,"_24":25,"_156":-5,"_350":485,"_27":486},{"_44":470,"_32":471,"_30":472,"_149":266,"_42":43,"_41":473,"_151":59,"_39":474,"_13":442,"_34":20,"_36":475,"_24":25,"_156":-5,"_350":476,"_27":477},{"_44":462,"_32":463,"_30":464,"_149":266,"_42":43,"_41":465,"_151":25,"_39":466,"_13":63,"_34":35,"_36":467,"_24":25,"_156":-5,"_350":468,"_27":469},{"_44":453,"_32":454,"_30":455,"_149":266,"_42":43,"_41":456,"_151":25,"_39":457,"_13":458,"_34":20,"_36":459,"_24":25,"_156":-5,"_350":460,"_27":461},{"_44":258,"_32":259,"_30":260,"_149":-5,"_42":43,"_41":261,"_151":59,"_39":450,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_350":451,"_27":452},{"_44":446,"_32":33,"_30":31,"_149":260,"_42":43,"_41":14,"_151":25,"_39":447,"_13":153,"_34":35,"_36":38,"_24":25,"_156":-5,"_350":448,"_27":449},{"_44":437,"_32":438,"_30":439,"_149":260,"_42":43,"_41":440,"_151":25,"_39":441,"_13":442,"_34":35,"_36":443,"_24":25,"_156":-5,"_350":444,"_27":445},{"_44":251,"_32":252,"_30":253,"_149":-5,"_42":43,"_41":254,"_151":59,"_39":434,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_350":435,"_27":436},{"_44":430,"_32":429,"_30":424,"_149":253,"_42":43,"_41":254,"_151":59,"_39":431,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_350":432,"_27":433},{"_44":421,"_32":422,"_30":423,"_149":424,"_42":43,"_41":254,"_151":59,"_39":425,"_13":63,"_34":35,"_36":426,"_24":25,"_156":-5,"_350":427,"_27":428},{"_44":417,"_32":416,"_30":410,"_149":253,"_42":43,"_41":411,"_151":59,"_39":418,"_13":63,"_34":256,"_36":-5,"_24":25,"_156":-5,"_350":419,"_27":420},{"_44":407,"_32":408,"_30":409,"_149":410,"_42":43,"_41":411,"_151":59,"_39":412,"_13":63,"_34":35,"_36":413,"_24":25,"_156":-5,"_350":414,"_27":415},{"_44":400,"_32":181,"_30":401,"_149":253,"_42":43,"_41":402,"_151":59,"_39":403,"_13":63,"_34":20,"_36":404,"_24":25,"_156":-5,"_350":405,"_27":406},{"_44":392,"_32":393,"_30":394,"_149":253,"_42":43,"_41":395,"_151":59,"_39":396,"_13":63,"_34":35,"_36":397,"_24":25,"_156":-5,"_350":398,"_27":399},{"_44":244,"_32":245,"_30":246,"_149":-5,"_42":43,"_41":247,"_151":25,"_39":389,"_13":153,"_34":20,"_36":249,"_24":25,"_156":-5,"_350":390,"_27":391},{"_44":237,"_32":238,"_30":239,"_149":-5,"_42":43,"_41":240,"_151":25,"_39":386,"_13":63,"_34":20,"_36":242,"_24":25,"_156":-5,"_350":387,"_27":388},{"_44":230,"_32":231,"_30":232,"_149":-5,"_42":43,"_41":233,"_151":25,"_39":383,"_13":177,"_34":20,"_36":235,"_24":25,"_156":-5,"_350":384,"_27":385},{"_44":223,"_32":224,"_30":225,"_149":-5,"_42":43,"_41":226,"_151":25,"_39":380,"_13":63,"_34":20,"_36":228,"_24":25,"_156":-5,"_350":381,"_27":382},{"_44":216,"_32":217,"_30":218,"_149":-5,"_42":43,"_41":219,"_151":25,"_39":377,"_13":63,"_34":20,"_36":221,"_24":25,"_156":-5,"_350":378,"_27":379},{"_44":209,"_32":210,"_30":211,"_149":-5,"_42":43,"_41":212,"_151":25,"_39":374,"_13":63,"_34":20,"_36":214,"_24":25,"_156":-5,"_350":375,"_27":376},{"_44":202,"_32":203,"_30":204,"_149":-5,"_42":43,"_41":205,"_151":25,"_39":371,"_13":63,"_34":20,"_36":207,"_24":25,"_156":-5,"_350":372,"_27":373},{"_44":195,"_32":196,"_30":197,"_149":-5,"_42":43,"_41":198,"_151":25,"_39":368,"_13":63,"_34":20,"_36":200,"_24":25,"_156":-5,"_350":369,"_27":370},{"_44":188,"_32":189,"_30":190,"_149":-5,"_42":43,"_41":191,"_151":25,"_39":365,"_13":63,"_34":20,"_36":193,"_24":25,"_156":-5,"_350":366,"_27":367},{"_44":180,"_32":181,"_30":182,"_149":-5,"_42":43,"_41":183,"_151":25,"_39":362,"_13":185,"_34":20,"_36":186,"_24":25,"_156":-5,"_350":363,"_27":364},{"_44":172,"_32":173,"_30":174,"_149":-5,"_42":43,"_41":175,"_151":25,"_39":359,"_13":177,"_34":20,"_36":178,"_24":25,"_156":-5,"_350":360,"_27":361},{"_44":165,"_32":166,"_30":167,"_149":-5,"_42":43,"_41":168,"_151":59,"_39":356,"_13":63,"_34":20,"_36":170,"_24":25,"_156":-5,"_350":357,"_27":358},{"_44":158,"_32":159,"_30":160,"_149":-5,"_42":43,"_41":161,"_151":59,"_39":353,"_13":63,"_34":20,"_36":163,"_24":25,"_156":-5,"_350":354,"_27":355},{"_44":146,"_32":147,"_30":148,"_149":-5,"_42":43,"_41":150,"_151":59,"_39":349,"_13":153,"_34":154,"_36":155,"_24":25,"_156":-5,"_350":351,"_27":352},["D",1750321023732],"children",[],[147],["D",1750320481457],[],[159],["D",1750320686276],[],[166],["D",1750181569036],[],[173],["D",1751138134987],[],[181],["D",1750112788444],[],[189],["D",1750112885258],[],[196],["D",1750112972278],[],[203],["D",1751060886468],[],[210],["D",1751112473018],[],[217],["D",1751022717815],[],[224],["D",1751061902145],[],[231],["D",1751060203844],[],[238],["D",1751061831045],[],[245],"c9996aaa-4ce4-11f0-9811-76b3cceeab13","setup.ts","c9996be0-4ce4-11f0-9811-76b3cceeab13",835,["D",1750320596692],"/**\n * Test setup and configuration for the Anthropic Streaming Chat MCP application\n * This file is automatically loaded before running tests\n */\n\n// Import polyfills and setup utilities\nimport { setupMockDOM } from \"./utils/test-helpers.ts\";\n\n// Global test setup\nconsole.log(\"🧪 Setting up test environment...\");\n\n// Setup mock DOM environment\nsetupMockDOM();\n\n// Mock crypto.randomUUID if not available\nif (!globalThis.crypto?.randomUUID) {\n globalThis.crypto = {\n ...globalThis.crypto,\n randomUUID: () => {\n return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {\n const r = Math.random() * 16 | 0;\n const v = c == 'x' ? r : (r & 0x3 | 0x8);\n return v.toString(16);\n });\n }\n };\n}\n\n// Mock localStorage for tests\nconst mockStorage = new Map();\n\nglobalThis.localStorage = {\n getItem: (key: string) => mockStorage.get(key) || null,\n setItem: (key: string, value: string) => mockStorage.set(key, value),\n removeItem: (key: string) => mockStorage.delete(key),\n clear: () => mockStorage.clear(),\n length: mockStorage.size,\n key: (index: number) => Array.from(mockStorage.keys())[index] || null,\n};\n\n// Mock fetch for API calls in tests\nconst originalFetch = globalThis.fetch;\nglobalThis.fetch = async (input: RequestInfo | URL, init?: RequestInit) => {\n // Log fetch calls during tests\n console.log(`🌐 Mock fetch called:`, { input, init });\n \n // Return mock responses for known endpoints\n const url = typeof input === 'string' ? input : input.toString();\n \n if (url.includes('/mcp')) {\n return new Response(JSON.stringify({ status: 'ok', tools: [] }), {\n status: 200,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n \n // Fall back to original fetch for other requests\n if (originalFetch) {\n return originalFetch(input, init);\n }\n \n // Default mock response\n return new Response('Mock response', { status: 200 });\n};\n\n// Mock console methods for cleaner test output (optional)\nconst originalConsoleLog = console.log;\nconst originalConsoleError = console.error;\nconst originalConsoleWarn = console.warn;\n\n// Uncomment to suppress console output during tests\n// console.log = (...args: any[]) => {\n// if (args[0]?.includes?.('🧪') || args[0]?.includes?.('Test')) {\n// originalConsoleLog(...args);\n// }\n// };\n\n// console.error = (...args: any[]) => {\n// if (args[0]?.includes?.('Test') || args[0]?.includes?.('Error')) {\n// originalConsoleError(...args);\n// }\n// };\n\n// console.warn = (...args: any[]) => {\n// if (args[0]?.includes?.('Test') || args[0]?.includes?.('Warning')) {\n// originalConsoleWarn(...args);\n// }\n// };\n\n// Setup test timeout\nconst TEST_TIMEOUT = 30000; // 30 seconds\n\n// Export test configuration\nexport const testConfig = {\n timeout: TEST_TIMEOUT,\n setupComplete: true,\n};\n\nconsole.log(\"✅ Test environment setup complete!\");",[],[252,393],"d87e96bc-4ce4-11f0-943d-76b3cceeab13","d87e9784-4ce4-11f0-943d-76b3cceeab13",836,["D",1750320621685],"# Test Suite\n\nThis directory contains the test suite for the Anthropic Streaming Chat MCP application.\n\n## Structure\n\n```\ntest/\n├── components/ # Component tests\n│ └── Message.test.tsx # Message component tests\n├── utils/ # Test utilities and helpers\n│ └── test-helpers.ts # Common test utilities\n├── setup.ts # Global test setup and configuration\n└── README.md # This file\n```\n\n## Running Tests\n\n### Basic Test Commands\n\n```bash\n# Run all tests\nnpm test\n\n# Run tests in watch mode (re-runs on file changes)\nnpm run test:watch\n\n# Run tests with coverage\nnpm run test:coverage\n\n# Generate HTML coverage report\nnpm run test:coverage-report\n```\n\n### Deno Test Commands (Alternative)\n\n```bash\n# Run all tests\ndeno test --allow-all test/\n\n# Run tests in watch mode\ndeno test --allow-all --watch test/\n\n# Run specific test file\ndeno test --allow-all test/components/Message.test.tsx\n\n# Run tests with coverage\ndeno test --allow-all --coverage=coverage test/\ndeno coverage coverage --html\n```\n\n## Test Categories\n\n### Component Tests\n\n- **Message.test.tsx**: Tests for the Message component including:\n - Basic rendering with different message types\n - Block content rendering (text, code, MCP tools)\n - Action button functionality\n - Props validation\n\n### Test Utilities\n\n- **test-helpers.ts**: Common utilities for creating mock data and assertions\n- **setup.ts**: Global test configuration and environment setup\n\n## Writing Tests\n\n### Basic Test Structure\n\n```typescript\nimport { assertEquals, assertExists } from \"https://deno.land/std@0.208.0/assert/mod.ts\";\nimport { render, cleanup } from \"https://esm.sh/@testing-library/react@14.0.0?deps=react@18.2.0,react-dom@18.2.0\";\n\nDeno.test(\"Component Name - Test Category\", async (t) => {\n await t.step(\"should do something specific\", () => {\n // Test implementation\n });\n \n // Cleanup after test\n cleanup();\n});\n```\n\n### Using Test Helpers\n\n```typescript\nimport { createMockMessage, createMockCallback } from \"../utils/test-helpers.ts\";\n\n// Create mock data\nconst message = createMockMessage({\n role: \"assistant\",\n content: \"Test content\"\n});\n\n// Create mock callbacks\nconst mockOnDelete = createMockCallback();\n```\n\n## Test Environment\n\nThe test environment includes:\n\n- **React Testing Library**: For component testing\n- **Deno Standard Library**: For assertions\n- **Mock DOM**: Simulated browser environment\n- **Mock APIs**: localStorage, fetch, crypto.randomUUID\n- **Test Helpers**: Utilities for creating mock data\n\n## Coverage\n\nTest coverage reports are generated in the `coverage/` directory when running coverage commands. The HTML report provides detailed information about:\n\n- Line coverage\n- Function coverage\n- Branch coverage\n- Uncovered code sections\n\n## Best Practices\n\n1. **Test Structure**: Use descriptive test names and group related tests\n2. **Cleanup**: Always cleanup after component tests\n3. **Mocking**: Use provided test helpers for consistent mock data\n4. **Assertions**: Use specific assertions that clearly indicate what's being tested\n5. **Isolation**: Each test should be independent and not rely on other tests\n\n## Adding New Tests\n\n1. Create test files in the appropriate subdirectory\n2. Follow the naming convention: `ComponentName.test.tsx`\n3. Import necessary testing utilities\n4. Use the established test structure and helpers\n5. Add cleanup calls for component tests\n6. Update this README if adding new test categories\n\n## Troubleshooting\n\n### Common Issues\n\n- **Import Errors**: Ensure all imports use the correct ESM URLs with React version pinning\n- **Component Not Rendering**: Check that all required props are provided\n- **Mock Issues**: Verify that mocks are properly set up in setup.ts\n- **Timeout Errors**: Increase timeout in test configuration if needed\n\n### Debug Tips\n\n- Use `console.log` in tests to debug values\n- Check the HTML output with `container.innerHTML`\n- Verify mock function calls with `mockFn.calls`\n- Use `--inspect` flag with Deno for debugging",[],[252,181],"bdb99408-4ce4-11f0-9c9c-76b3cceeab13","test-helpers.ts","bdb994d0-4ce4-11f0-9c9c-76b3cceeab13","2f56c4ca-b660-4b0c-8cdf-5c85d8d347a2",834,["D",1750320576768],"/**\n * Test utilities and helpers for the Anthropic Streaming Chat MCP application\n */\n\nimport type { Message } from \"../../frontend/components/App.tsx\";\nimport type { MCPServerConfig } from \"../../shared/types.ts\";\n\n/**\n * Creates a mock Message object with default values and optional overrides\n */\nexport function createMockMessage(overrides: Partial = {}): Message {\n return {\n id: crypto.randomUUID(),\n role: \"user\",\n content: \"Test message content\",\n timestamp: Date.now(),\n ...overrides,\n };\n}\n\n/**\n * Creates a mock MCP server configuration\n */\nexport function createMockMCPServer(overrides: Partial = {}): MCPServerConfig {\n return {\n id: crypto.randomUUID(),\n name: \"Test MCP Server\",\n url: \"https://example.com/mcp\",\n authorization_token: \"test-token\",\n enabled: true,\n ...overrides,\n };\n}\n\n/**\n * Creates mock Anthropic block content for testing streaming responses\n */\nexport function createMockAnthropicBlocks(blocks: Array<{\n type: string;\n text?: string;\n language?: string;\n _streaming?: boolean;\n [key: string]: any;\n}>) {\n return blocks.map(block => ({\n type: \"text\",\n text: \"Default text\",\n ...block,\n }));\n}\n\n/**\n * Creates a mock MCP tool use block\n */\nexport function createMockMCPToolUse(overrides: any = {}) {\n return {\n type: \"mcp_tool_use\",\n name: \"test_tool\",\n id: crypto.randomUUID(),\n server_name: \"test-server\",\n ...overrides,\n };\n}\n\n/**\n * Creates a mock MCP tool result block\n */\nexport function createMockMCPToolResult(overrides: any = {}) {\n return {\n type: \"mcp_tool_result\",\n content: [{ text: \"Tool execution successful\" }],\n tool_use_id: crypto.randomUUID(),\n is_error: false,\n ...overrides,\n };\n}\n\n/**\n * Creates a mock NextSteps result for testing auto-execution\n */\nexport function createMockNextStepsResult(overrides: any = {}) {\n return {\n output: {\n nextSteps: {\n type: \"auto\",\n priority: 50,\n countdown: 5,\n proposals: [\n {\n id: crypto.randomUUID(),\n title: \"Test Proposal\",\n description: \"A test proposal for NextSteps\",\n action: {\n type: \"send_message\",\n content: \"Execute test action\",\n },\n },\n ],\n ...overrides.nextSteps,\n },\n ...overrides.output,\n },\n ...overrides,\n };\n}\n\n/**\n * Creates a mock ResourceViewer result for testing file display\n */\nexport function createMockResourceViewerResult(overrides: any = {}) {\n return {\n output: {\n resource: {\n uri: \"file:///test/example.js\",\n contentType: \"application/javascript\",\n fileType: \"javascript\",\n renderHint: {\n preferredRenderer: \"code\",\n syntaxHighlight: true,\n lineNumbers: true,\n },\n },\n sourceKey: \"test-source-key\",\n fileType: \"javascript\",\n ...overrides.output,\n },\n ...overrides,\n };\n}\n\n/**\n * Mock function factory for creating callback mocks\n */\nexport function createMockCallback any>(): T & { calls: Parameters[] } {\n const calls: Parameters[] = [];\n const mockFn = ((...args: Parameters) => {\n calls.push(args);\n }) as T & { calls: Parameters[] };\n mockFn.calls = calls;\n return mockFn;\n}\n\n/**\n * Waits for a specified number of milliseconds (useful for testing async behavior)\n */\nexport function delay(ms: number): Promise {\n return new Promise(resolve => setTimeout(resolve, ms));\n}\n\n/**\n * Creates a mock DOM environment for testing (if needed)\n */\nexport function setupMockDOM() {\n // Mock clipboard API\n Object.assign(navigator, {\n clipboard: {\n writeText: async (text: string) => {\n console.log(`Mock clipboard write: ${text}`);\n },\n },\n });\n\n // Mock alert function\n globalThis.alert = (message: string) => {\n console.log(`Mock alert: ${message}`);\n };\n}\n\n/**\n * Cleans up mock DOM environment\n */\nexport function cleanupMockDOM() {\n // Reset any global mocks if needed\n}\n\n/**\n * Assertion helper for checking if an element contains specific text\n */\nexport function assertElementContainsText(element: Element | null, expectedText: string, message?: string) {\n if (!element) {\n throw new Error(message || `Element not found when checking for text: \"${expectedText}\"`);\n }\n \n const actualText = element.textContent || element.innerHTML;\n if (!actualText.includes(expectedText)) {\n throw new Error(\n message || \n `Expected element to contain \"${expectedText}\", but got: \"${actualText}\"`\n );\n }\n}\n\n/**\n * Assertion helper for checking CSS classes\n */\nexport function assertElementHasClass(element: Element | null, expectedClass: string, message?: string) {\n if (!element) {\n throw new Error(message || `Element not found when checking for class: \"${expectedClass}\"`);\n }\n \n if (!element.classList.contains(expectedClass)) {\n throw new Error(\n message || \n `Expected element to have class \"${expectedClass}\", but classes were: ${Array.from(element.classList).join(', ')}`\n );\n }\n}",[],[252,416,408],"utils","bdb9a5e2-4ce4-11f0-9c9c-76b3cceeab13",["D",1750320576768],[332],[252,416],"a661cf8c-4ce4-11f0-9d77-76b3cceeab13","Message.test.tsx","a661d040-4ce4-11f0-9d77-76b3cceeab13","c410287a-a47e-4ed2-bfc0-df44fd9dca98",["D",1750320537587],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { assertEquals, assertExists, assertStringIncludes } from \"https://deno.land/std@0.208.0/assert/mod.ts\";\nimport { render } from \"https://esm.sh/@testing-library/react@14.0.0?deps=react@18.2.0,react-dom@18.2.0\";\nimport { cleanup } from \"https://esm.sh/@testing-library/react@14.0.0/cleanup?deps=react@18.2.0,react-dom@18.2.0\";\nimport React from \"https://esm.sh/react@18.2.0\";\nimport MessageComponent from \"../../frontend/components/Message.tsx\";\nimport type { Message } from \"../../frontend/components/App.tsx\";\n\n// Mock dependencies\nconst mockMCPClients = [];\nconst mockOnSendMessage = () => {};\n\n// Test utilities\nfunction createMockMessage(overrides: Partial = {}): Message {\n return {\n id: \"test-message-id\",\n role: \"user\",\n content: \"Test message content\",\n timestamp: Date.now(),\n ...overrides,\n };\n}\n\nDeno.test(\"Message Component - Basic Rendering\", async (t) => {\n await t.step(\"should render user message with text content\", () => {\n const message = createMockMessage({\n role: \"user\",\n content: \"Hello, this is a test message\",\n });\n\n const { container } = render(\n \n );\n\n // Check if message wrapper has correct class\n const messageWrapper = container.querySelector('.message-wrapper.user');\n assertExists(messageWrapper, \"Message wrapper should exist with user class\");\n\n // Check if message content is rendered\n const messageDiv = container.querySelector('.message.user');\n assertExists(messageDiv, \"Message div should exist with user class\");\n \n // Check if content is present (will be in markdown format)\n assertStringIncludes(container.innerHTML, \"Hello, this is a test message\");\n });\n\n await t.step(\"should render assistant message with text content\", () => {\n const message = createMockMessage({\n role: \"assistant\",\n content: \"I'm Claude, how can I help you?\",\n });\n\n const { container } = render(\n \n );\n\n // Check if message wrapper has correct class\n const messageWrapper = container.querySelector('.message-wrapper.assistant');\n assertExists(messageWrapper, \"Message wrapper should exist with assistant class\");\n\n // Check if content is present\n assertStringIncludes(container.innerHTML, \"I'm Claude, how can I help you?\");\n });\n\n await t.step(\"should render timestamp\", () => {\n const timestamp = Date.now() - 5000; // 5 seconds ago\n const message = createMockMessage({ timestamp });\n\n const { container } = render(\n \n );\n\n const timestampElement = container.querySelector('.message-timestamp');\n assertExists(timestampElement, \"Timestamp element should exist\");\n });\n\n // Cleanup after each test\n cleanup();\n});\n\nDeno.test(\"Message Component - Block Content Rendering\", async (t) => {\n await t.step(\"should render text blocks from array content\", () => {\n const message = createMockMessage({\n role: \"assistant\",\n content: [\n { type: \"text\", text: \"This is a text block\" },\n { type: \"text\", text: \"This is another text block\" }\n ],\n });\n\n const { container } = render(\n \n );\n\n // Check if anthropic blocks container exists\n const blocksContainer = container.querySelector('.anthropic-blocks');\n assertExists(blocksContainer, \"Anthropic blocks container should exist\");\n\n // Check if text blocks are rendered\n const textBlocks = container.querySelectorAll('.anthropic-text-block');\n assertEquals(textBlocks.length, 2, \"Should render two text blocks\");\n\n // Check content\n assertStringIncludes(container.innerHTML, \"This is a text block\");\n assertStringIncludes(container.innerHTML, \"This is another text block\");\n });\n\n await t.step(\"should render code blocks with copy button\", () => {\n const message = createMockMessage({\n role: \"assistant\",\n content: [\n { \n type: \"code\", \n text: \"console.log('Hello World');\",\n language: \"javascript\"\n }\n ],\n });\n\n const { container } = render(\n \n );\n\n // Check if code block exists\n const codeBlock = container.querySelector('.anthropic-code-block');\n assertExists(codeBlock, \"Code block should exist\");\n\n // Check if copy button exists\n const copyButton = container.querySelector('.copy');\n assertExists(copyButton, \"Copy button should exist\");\n\n // Check if code content is present\n assertStringIncludes(container.innerHTML, \"console.log('Hello World');\");\n });\n\n await t.step(\"should render streaming cursor for streaming blocks\", () => {\n const message = createMockMessage({\n role: \"assistant\",\n content: [\n { \n type: \"text\", \n text: \"This is streaming text\",\n _streaming: true\n }\n ],\n });\n\n const { container } = render(\n \n );\n\n // Check if streaming cursor exists\n const streamingCursor = container.querySelector('.streaming-cursor');\n assertExists(streamingCursor, \"Streaming cursor should exist for streaming blocks\");\n assertEquals(streamingCursor.textContent, \"▊\", \"Streaming cursor should have correct character\");\n });\n\n // Cleanup after each test\n cleanup();\n});\n\nDeno.test(\"Message Component - MCP Tool Rendering\", async (t) => {\n await t.step(\"should render mcp_tool_use blocks with collapsible details\", () => {\n const message = createMockMessage({\n role: \"assistant\",\n content: [\n { \n type: \"mcp_tool_use\",\n name: \"test_tool\",\n id: \"tool-123\",\n server_name: \"test-server\"\n }\n ],\n });\n\n const { container } = render(\n \n );\n\n // Check if MCP details element exists\n const mcpDetails = container.querySelector('.mcp-details');\n assertExists(mcpDetails, \"MCP details element should exist\");\n\n // Check if summary contains tool name\n const summary = container.querySelector('summary');\n assertExists(summary, \"Summary element should exist\");\n assertStringIncludes(summary.textContent || \"\", \"test_tool\");\n });\n\n await t.step(\"should render mcp_tool_result blocks\", () => {\n const message = createMockMessage({\n role: \"assistant\",\n content: [\n { \n type: \"mcp_tool_result\",\n content: [{ text: \"Tool execution result\" }],\n tool_use_id: \"tool-123\",\n is_error: false\n }\n ],\n });\n\n const { container } = render(\n \n );\n\n // Check if MCP details element exists\n const mcpDetails = container.querySelector('.mcp-details');\n assertExists(mcpDetails, \"MCP details element should exist\");\n\n // Check if result content is present\n assertStringIncludes(container.innerHTML, \"Tool execution result\");\n });\n\n // Cleanup after each test\n cleanup();\n});\n\nDeno.test(\"Message Component - Action Buttons\", async (t) => {\n await t.step(\"should render retry button when onRetry and canRetry are provided\", () => {\n const message = createMockMessage();\n const mockOnRetry = () => {};\n\n const { container } = render(\n \n );\n\n const retryButton = container.querySelector('.retry-btn');\n assertExists(retryButton, \"Retry button should exist when onRetry and canRetry are provided\");\n });\n\n await t.step(\"should not render retry button when canRetry is false\", () => {\n const message = createMockMessage();\n const mockOnRetry = () => {};\n\n const { container } = render(\n \n );\n\n const retryButton = container.querySelector('.retry-btn');\n assertEquals(retryButton, null, \"Retry button should not exist when canRetry is false\");\n });\n\n await t.step(\"should render delete button when onDelete is provided\", () => {\n const message = createMockMessage();\n const mockOnDelete = () => {};\n\n const { container } = render(\n \n );\n\n const deleteButton = container.querySelector('.delete-btn');\n assertExists(deleteButton, \"Delete button should exist when onDelete is provided\");\n });\n\n await t.step(\"should render copy button\", () => {\n const message = createMockMessage();\n\n const { container } = render(\n \n );\n\n const copyButton = container.querySelector('.copy-btn');\n assertExists(copyButton, \"Copy button should always exist\");\n });\n\n // Cleanup after each test\n cleanup();\n});\n\nDeno.test(\"Message Component - Props Validation\", async (t) => {\n await t.step(\"should handle missing optional props gracefully\", () => {\n const message = createMockMessage();\n\n // Should not throw when optional props are missing\n const { container } = render(\n \n );\n\n const messageWrapper = container.querySelector('.message-wrapper');\n assertExists(messageWrapper, \"Component should render with minimal props\");\n });\n\n await t.step(\"should handle autoExecuteNextSteps prop\", () => {\n const message = createMockMessage();\n\n const { container } = render(\n \n );\n\n const messageWrapper = container.querySelector('.message-wrapper');\n assertExists(messageWrapper, \"Component should render with autoExecuteNextSteps prop\");\n });\n\n await t.step(\"should handle isLatestMessage prop\", () => {\n const message = createMockMessage();\n\n const { container } = render(\n \n );\n\n const messageWrapper = container.querySelector('.message-wrapper');\n assertExists(messageWrapper, \"Component should render with isLatestMessage prop\");\n });\n\n // Cleanup after each test\n cleanup();\n});",[],[252,429,422],"components","a661e9b8-4ce4-11f0-9d77-76b3cceeab13",["D",1750320537587],[330],[252,429],["D",1750320537587],[329,331,333,334],[252],"d3c4619c-4d4d-11f0-b8e3-76b3cceeab13","types.ts","d0d80e16-3d49-11f0-afd9-76b3cceeab13",854,["D",1750365710904],12,"// 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 };\n\n// Client-side tool types\nexport interface AskUserToolInput {\n question: string;\n inputType?: \"text\" | \"multiline\" | \"choice\" | \"confirm\";\n choices?: string[];\n placeholder?: string;\n required?: boolean;\n}\n\nexport interface AskUserToolResult {\n type: \"ask_user_result\";\n question: string;\n response: string;\n inputType: string;\n}",[],[259,438],"84fff75a-54e7-11f0-9bf5-f69ea79377d9",["D",1751201379390],[],[259,33],["D",1748604769414],[326,327],[259],"107b327a-519d-11f0-9de0-f69ea79377d9","style.css","42e137de-3cdd-11f0-898f-9e149126039e",982,["D",1750839547637],198,"/* ═══════════════════════════════════════════════════════════════════════════════\n 🎨 ANTHROPIC CHAT - EXQUISITE DESIGN SYSTEM\n ═══════════════════════════════════════════════════════════════════════════════ */\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🌟 CSS CUSTOM PROPERTIES & DESIGN TOKENS\n ─────────────────────────────────────────────────────────────────────────────── */\n\n:root {\n /* 🎨 Color Palette - Sophisticated & Harmonious */\n --color-primary: #2563eb;\n --color-primary-light: #3b82f6;\n --color-primary-dark: #1d4ed8;\n --color-primary-subtle: #dbeafe;\n --color-primary-ghost: #eff6ff;\n\n --color-secondary: #64748b;\n --color-secondary-light: #94a3b8;\n --color-secondary-dark: #475569;\n\n --color-success: #059669;\n --color-success-light: #10b981;\n --color-success-subtle: #d1fae5;\n\n --color-warning: #d97706;\n --color-warning-light: #f59e0b;\n --color-warning-subtle: #fef3c7;\n\n --color-danger: #dc2626;\n --color-danger-light: #ef4444;\n --color-danger-subtle: #fee2e2;\n\n --color-info: #0ea5e9;\n --color-info-light: #38bdf8;\n --color-info-subtle: #e0f2fe;\n\n /* 🌈 Neutral Palette */\n --color-white: #ffffff;\n --color-gray-50: #f8fafc;\n --color-gray-100: #f1f5f9;\n --color-gray-200: #e2e8f0;\n --color-gray-300: #cbd5e1;\n --color-gray-400: #94a3b8;\n --color-gray-500: #64748b;\n --color-gray-600: #475569;\n --color-gray-700: #334155;\n --color-gray-800: #1e293b;\n --color-gray-900: #0f172a;\n\n /* 🌅 Background Gradients */\n --bg-gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n --bg-gradient-chat: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);\n --bg-gradient-message: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);\n --bg-gradient-user: linear-gradient(145deg, #3b82f6 0%, #2563eb 100%);\n --bg-gradient-assistant: linear-gradient(145deg, #ffffff 0%, #f1f5f9 100%);\n --bg-gradient-glass: linear-gradient(\n 145deg,\n rgba(255, 255, 255, 0.25) 0%,\n rgba(255, 255, 255, 0.1) 100%\n );\n\n /* ✨ Shadows & Depth */\n --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --shadow-sm:\n 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);\n --shadow-md:\n 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);\n --shadow-lg:\n 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);\n --shadow-xl:\n 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);\n --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n --shadow-2xl-up: 1px -8px 50px -12px rgba(0, 0, 0, 0.25);\n --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.05);\n --shadow-glow: 0 0 20px rgba(59, 130, 246, 0.3);\n --shadow-glow-subtle: 0 0 15px rgba(59, 130, 246, 0.1);\n\n /* 🎭 Glassmorphism */\n --glass-bg: rgba(255, 255, 255, 0.25);\n --glass-border: rgba(255, 255, 255, 0.18);\n --glass-backdrop: blur(16px);\n\n /* 📏 Spacing Scale */\n --space-xs: 0.25rem;\n --space-sm: 0.5rem;\n --space-md: 0.75rem;\n --space-lg: 1rem;\n --space-xl: 1.25rem;\n --space-2xl: 1.5rem;\n --space-3xl: 2rem;\n --space-4xl: 2.5rem;\n --space-5xl: 3rem;\n\n /* 📐 Border Radius */\n --radius-xs: 0.125rem;\n --radius-sm: 0.25rem;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --radius-2xl: 1rem;\n --radius-3xl: 1.5rem;\n --radius-full: 9999px;\n\n /* 🔤 Typography */\n --font-family-sans:\n -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\",\n Arial, sans-serif;\n --font-family-mono:\n \"SF Mono\", Monaco, \"Cascadia Code\", \"Roboto Mono\", Consolas, \"Courier New\",\n monospace;\n --font-family-serif:\n ui-serif, Georgia, Cambria, \"Times New Roman\", Times, serif;\n\n /* ⚡ Transitions & Animations */\n --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);\n --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);\n --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);\n --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n\n /* 📱 Mobile Breakpoints */\n --mobile-sm: 480px;\n --mobile-md: 640px;\n --tablet: 768px;\n --desktop: 1024px;\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🔧 RESET & BASE STYLES\n ─────────────────────────────────────────────────────────────────────────────── */\n\n* {\n box-sizing: border-box;\n}\n\n*::before,\n*::after {\n box-sizing: border-box;\n}\n\nhtml {\n background: var(--bg-gradient-chat);\n line-height: 1.15;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: transparent;\n}\n\nbody {\n margin: 0;\n padding: 0;\n font-family: var(--font-family-sans);\n font-size: 16px;\n line-height: 1.6;\n color: var(--color-gray-800);\n background: var(--bg-gradient-chat);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n}\n\n#root {\n min-height: 100vh;\n min-height: 100svh;\n display: flex;\n flex-direction: column;\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🏗️ LAYOUT COMPONENTS\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.chat-container {\n min-height: 100vh;\n min-height: 100svh;\n display: flex;\n flex-direction: column;\n background: var(--bg-gradient-chat);\n position: relative;\n overflow: auto;\n}\n\n.chat-container::before {\n content: \"\";\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background:\n radial-gradient(\n circle at 20% 80%,\n rgba(120, 119, 198, 0.3) 0%,\n transparent 50%\n ),\n radial-gradient(\n circle at 80% 20%,\n rgba(255, 119, 198, 0.15) 0%,\n transparent 50%\n ),\n radial-gradient(\n circle at 40% 40%,\n rgba(120, 219, 255, 0.1) 0%,\n transparent 50%\n );\n pointer-events: none;\n z-index: -1;\n}\n\n.chat-messages {\n flex: 1;\n padding: var(--space-lg);\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n padding-bottom: 12rem;\n max-width: 70rem;\n margin: 0 auto;\n width: 100%;\n position: relative;\n}\n\n/* Custom Scrollbar */\n*::-webkit-scrollbar {\n width: 6px;\n}\n\n*::-webkit-scrollbar-track {\n background: transparent;\n}\n\n*::-webkit-scrollbar-thumb {\n background: var(--color-gray-300);\n border-radius: var(--radius-full);\n transition: background var(--transition-fast);\n}\n\n*::-webkit-scrollbar-thumb:hover {\n background: var(--color-gray-400);\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 💬 MESSAGE COMPONENTS\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.message-wrapper {\n margin-bottom: var(--space-2xl);\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n max-width: 85%;\n animation: messageSlideIn var(--transition-slow) ease-out;\n}\n\n.message-wrapper.user {\n align-items: flex-end;\n margin-left: auto;\n}\n\n@keyframes messageSlideIn {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n.message {\n word-wrap: break-word;\n display: flex;\n flex-direction: column;\n position: relative;\n backdrop-filter: var(--glass-backdrop);\n transition: all var(--transition-normal);\n}\n\n.message:hover {\n transform: translateY(-2px);\n}\n\n.message-meta {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n transition: opacity var(--transition-fast);\n font-size: 0.75rem;\n color: var(--color-gray-500);\n font-weight: 500;\n gap: var(--space-sm);\n align-items: baseline;\n flex-direction: row-reverse;\n padding: var(--space-sm) 0;\n opacity: 0;\n transform: translateY(-10px);\n}\n\n.message-wrapper:hover .message-meta {\n opacity: 1;\n transform: translateY(0);\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: var(--color-gray-500);\n cursor: pointer;\n font-size: 0.875rem;\n border-radius: var(--radius-md);\n transition: all var(--transition-fast);\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n}\n\n.message-action-btn:hover {\n background: var(--color-gray-100);\n color: var(--color-gray-700);\n transform: scale(1.05);\n}\n\n.retry-btn:hover {\n color: var(--color-primary);\n background: var(--color-primary-ghost);\n}\n\n.delete-btn:hover {\n color: var(--color-danger);\n background: var(--color-danger-subtle);\n}\n\n/* Message Content Styles */\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: var(--bg-gradient-user);\n color: var(--color-white);\n padding: var(--space-lg) var(--space-xl);\n border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-sm)\n var(--radius-2xl);\n box-shadow:\n var(--shadow-lg),\n var(--shadow-glow-subtle);\n border: 1px solid rgba(255, 255, 255, 0.2);\n position: relative;\n overflow: hidden;\n}\n\n.message.user::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.1) 0%,\n transparent 50%\n );\n pointer-events: none;\n}\n\n.message.assistant {\n background: var(--bg-gradient-assistant);\n padding: var(--space-lg) var(--space-xl);\n border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-2xl)\n var(--radius-sm);\n box-shadow: var(--shadow-lg);\n border: 1px solid var(--color-gray-200);\n position: relative;\n overflow: hidden;\n}\n\n.message.assistant::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 135deg,\n rgba(255, 255, 255, 0.5) 0%,\n transparent 50%\n );\n pointer-events: none;\n}\n\n.message.system {\n background: var(--color-warning-subtle);\n border: 1px solid var(--color-warning-light);\n padding: var(--space-md) var(--space-lg);\n border-radius: var(--radius-xl);\n font-size: 0.875rem;\n margin: 0 auto;\n max-width: 90%;\n text-align: center;\n box-shadow: var(--shadow-sm);\n color: var(--color-warning-dark);\n font-weight: 500;\n}\n\n.message pre {\n display: block;\n background: var(--color-gray-50);\n border: 1px solid var(--color-gray-200);\n border-radius: var(--radius-lg);\n padding: var(--space-lg);\n font-family: var(--font-family-mono);\n font-size: 0.8125rem;\n line-height: 1.5;\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-word;\n color: var(--color-gray-700);\n margin: var(--space-md) 0;\n box-shadow: var(--shadow-inner);\n}\n\n.message img {\n max-width: 100%;\n max-height: 90vh;\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🎯 STREAMING EFFECTS\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.message.streaming {\n background: var(--bg-gradient-assistant);\n border: 1px solid var(--color-primary-light);\n padding: var(--space-lg) var(--space-xl);\n border-radius: var(--radius-2xl) var(--radius-2xl) var(--radius-2xl)\n var(--radius-sm);\n box-shadow:\n var(--shadow-lg),\n var(--shadow-glow);\n position: relative;\n overflow: hidden;\n}\n\n.message.streaming::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: linear-gradient(\n 90deg,\n transparent 0%,\n rgba(59, 130, 246, 0.1) 50%,\n transparent 100%\n );\n animation: streamingShimmer 2s ease-in-out infinite;\n pointer-events: none;\n}\n\n@keyframes streamingShimmer {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(100%);\n }\n}\n\n.streaming-cursor {\n display: inline-block;\n background: var(--color-primary);\n color: var(--color-primary);\n animation: streamingBlink 1.2s ease-in-out infinite;\n margin-left: 2px;\n border-radius: var(--radius-xs);\n width: 2px;\n height: 1.2em;\n}\n\n@keyframes streamingBlink {\n 0%, 50% {\n opacity: 1;\n }\n 51%, 100% {\n opacity: 0.3;\n }\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🦶 FOOTER & INPUT COMPONENTS\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.chat-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: var(--glass-bg);\n backdrop-filter: var(--glass-backdrop);\n border-top: 1px solid var(--glass-border);\n box-shadow: var(--shadow-2xl-up);\n border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;\n max-width: 71rem;\n margin: 0 auto;\n z-index: 100;\n animation: footerSlideUp var(--transition-slow) ease-out;\n}\n\n@keyframes footerSlideUp {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n.chat-input-container {\n padding: var(--space-xl);\n display: flex;\n gap: var(--space-md);\n align-items: flex-end;\n position: relative;\n}\n\n.chat-input {\n flex: 1;\n min-height: 3rem;\n max-height: 30vh;\n padding: var(--space-lg) var(--space-xl);\n border: 2px solid var(--color-gray-200);\n border-radius: var(--radius-2xl);\n resize: none;\n font-family: inherit;\n font-size: 1rem;\n line-height: 1.5;\n outline: none;\n transition: all var(--transition-normal);\n background: var(--color-white);\n box-shadow: var(--shadow-sm);\n color: var(--color-gray-800);\n box-sizing: content-box;\n padding-right: 3rem;\n}\n\n.chat-input:focus {\n border-color: var(--color-primary);\n box-shadow:\n var(--shadow-lg),\n 0 0 0 4px var(--color-primary-ghost);\n transform: translateY(-2px);\n}\n\n.chat-input:disabled {\n background: var(--color-gray-50);\n color: var(--color-gray-500);\n cursor: not-allowed;\n}\n\n.chat-input::placeholder {\n color: var(--color-gray-400);\n font-style: italic;\n}\n\n.send-button {\n background: var(--bg-gradient-user);\n color: var(--color-white);\n border: none;\n border-radius: var(--radius-full);\n width: 3rem;\n height: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all var(--transition-normal);\n flex-shrink: 0;\n font-size: 1.125rem;\n box-shadow: var(--shadow-lg);\n border: 2px solid rgba(255, 255, 255, 0.2);\n position: absolute;\n right: 2rem;\n bottom: 2rem;\n}\n\n.send-button:hover:not(:disabled) {\n background: var(--color-primary-dark);\n transform: translateY(-2px) scale(1.05);\n box-shadow:\n var(--shadow-xl),\n var(--shadow-glow);\n}\n\n.send-button:active {\n transform: translateY(0) scale(0.95);\n}\n\n.send-button:disabled {\n background: var(--color-gray-400);\n cursor: not-allowed;\n transform: none;\n box-shadow: var(--shadow-sm);\n}\n\n.send-button.stop-button {\n background: linear-gradient(\n 145deg,\n var(--color-danger) 0%,\n var(--color-danger-light) 100%\n );\n animation: pulseStop 2s ease-in-out infinite;\n}\n\n@keyframes pulseStop {\n 0%, 100% {\n box-shadow:\n var(--shadow-lg),\n 0 0 0 0 rgba(220, 38, 38, 0.4);\n }\n 50% {\n box-shadow:\n var(--shadow-lg),\n 0 0 0 8px rgba(220, 38, 38, 0);\n }\n}\n\n.send-button.stop-button:hover:not(:disabled) {\n background: var(--color-danger-dark);\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 📊 STATUS BAR\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.chat-status {\n padding: var(--space-md) var(--space-xl);\n background: rgba(255, 255, 255, 0.1);\n border-top: 1px solid rgba(255, 255, 255, 0.1);\n display: flex;\n align-items: center;\n justify-content: space-between;\n backdrop-filter: blur(8px);\n}\n\n.status-text {\n font-size: 0.8125rem;\n color: var(--color-gray-600);\n flex: 1;\n text-align: center;\n font-weight: 500;\n cursor: pointer;\n transition: color var(--transition-fast);\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n}\n\n.status-text:hover {\n color: var(--color-gray-800);\n}\n\n.status-link-button {\n background: none;\n border: none;\n color: var(--color-primary);\n cursor: pointer;\n font-size: 0.8125rem;\n font-weight: 600;\n padding: var(--space-sm) var(--space-md);\n border-radius: var(--radius-lg);\n transition: all var(--transition-fast);\n text-decoration: none;\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n}\n\n.status-link-button:hover {\n background: var(--color-primary-ghost);\n color: var(--color-primary-dark);\n transform: translateY(-1px);\n}\n\n.chat-status .fa-circle-check {\n color: var(--color-success);\n animation: checkPulse 2s ease-in-out infinite;\n}\n\n@keyframes checkPulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.7;\n }\n}\n\n.chat-status .fa-spinner {\n color: var(--color-primary);\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/* ─────────────────────────────────────────────────────────────────────────────── \n ⚙️ SETTINGS MODAL\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.6);\n backdrop-filter: blur(8px);\n z-index: 1000;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: var(--space-lg);\n animation: overlayFadeIn var(--transition-normal) ease-out;\n}\n\n@keyframes overlayFadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n.settings-panel {\n background: var(--color-white);\n border-radius: var(--radius-2xl);\n padding: var(--space-3xl);\n width: 100%;\n max-width: 32rem;\n max-height: 85vh;\n overflow-y: auto;\n box-shadow: var(--shadow-2xl);\n border: 1px solid var(--color-gray-200);\n animation: modalSlideIn var(--transition-bounce) ease-out;\n position: relative;\n}\n\n@keyframes modalSlideIn {\n from {\n opacity: 0;\n transform: translateY(50px) scale(0.9);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n.settings-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: var(--space-2xl);\n}\n\n.settings-header h2 {\n margin: 0;\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--color-gray-900);\n}\n\n.close-button {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: var(--color-gray-500);\n padding: var(--space-sm);\n border-radius: var(--radius-lg);\n transition: all var(--transition-fast);\n display: flex;\n align-items: center;\n justify-content: center;\n width: 2.5rem;\n height: 2.5rem;\n}\n\n.close-button:hover {\n background: var(--color-gray-100);\n color: var(--color-gray-700);\n transform: scale(1.1);\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 📝 FORM COMPONENTS\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.form-group {\n margin-bottom: var(--space-2xl);\n}\n\n.form-label {\n display: block;\n font-weight: 600;\n margin-bottom: var(--space-sm);\n color: var(--color-gray-700);\n font-size: 0.9375rem;\n}\n\n.form-input {\n width: 100%;\n padding: var(--space-md) var(--space-lg);\n border: 2px solid var(--color-gray-200);\n border-radius: var(--radius-xl);\n font-size: 1rem;\n transition: all var(--transition-normal);\n background: var(--color-white);\n color: var(--color-gray-800);\n box-shadow: var(--shadow-sm);\n}\n\n.form-input:focus {\n outline: none;\n border-color: var(--color-primary);\n box-shadow:\n var(--shadow-md),\n 0 0 0 4px var(--color-primary-ghost);\n transform: translateY(-1px);\n}\n\n.form-input::placeholder {\n color: var(--color-gray-400);\n font-style: italic;\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🔘 BUTTONS & INTERACTIVE ELEMENTS\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.button {\n padding: var(--space-md) var(--space-xl);\n border: none;\n border-radius: var(--radius-xl);\n font-weight: 600;\n cursor: pointer;\n transition: all var(--transition-normal);\n font-size: 0.9375rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n text-decoration: none;\n position: relative;\n overflow: hidden;\n}\n\n.button::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(\n 90deg,\n transparent,\n rgba(255, 255, 255, 0.2),\n transparent\n );\n transition: left var(--transition-normal);\n}\n\n.button:hover::before {\n left: 100%;\n}\n\n.button-primary {\n background: var(--bg-gradient-user);\n color: var(--color-white);\n box-shadow: var(--shadow-md);\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.button-primary:hover {\n background: var(--color-primary-dark);\n transform: translateY(-2px);\n box-shadow:\n var(--shadow-lg),\n var(--shadow-glow-subtle);\n}\n\n.button-secondary {\n background: var(--color-gray-100);\n color: var(--color-gray-700);\n border: 2px solid var(--color-gray-200);\n box-shadow: var(--shadow-sm);\n}\n\n.button-secondary:hover {\n background: var(--color-gray-200);\n border-color: var(--color-gray-300);\n transform: translateY(-1px);\n box-shadow: var(--shadow-md);\n}\n\n.button-danger {\n background: linear-gradient(\n 145deg,\n var(--color-danger) 0%,\n var(--color-danger-light) 100%\n );\n color: var(--color-white);\n box-shadow: var(--shadow-md);\n border: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.button-danger:hover {\n background: var(--color-danger-dark);\n transform: translateY(-2px);\n box-shadow:\n var(--shadow-lg),\n 0 0 20px rgba(220, 38, 38, 0.3);\n}\n\n.btn-small {\n font-size: 0.75rem;\n padding: var(--space-xs) var(--space-md);\n border-radius: var(--radius-lg);\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n ⏳ LOADING STATES\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.loading-indicator {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n color: var(--color-gray-600);\n font-size: 0.9375rem;\n padding: var(--space-lg) var(--space-xl);\n background: var(--color-gray-50);\n border-radius: var(--radius-2xl);\n margin: var(--space-lg) 0;\n box-shadow: var(--shadow-sm);\n border: 1px solid var(--color-gray-200);\n}\n\n.loading-dots {\n display: flex;\n gap: var(--space-xs);\n}\n\n.loading-dot {\n width: 0.5rem;\n height: 0.5rem;\n background: var(--color-primary);\n border-radius: var(--radius-full);\n animation: loadingBounce 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 loadingBounce {\n 0%, 80%, 100% {\n transform: scale(0.8);\n opacity: 0.5;\n }\n 40% {\n transform: scale(1.2);\n opacity: 1;\n }\n}\n\n.loading-shimmer,\n.loading-shimmer-pure-text {\n --shimmer-contrast: rgba(255, 255, 255, 0.8);\n --text-secondary: var(--color-gray-500);\n color: transparent;\n -webkit-text-fill-color: transparent;\n animation-delay: 0.5s;\n animation-duration: 2s;\n animation-iteration-count: infinite;\n animation-name: loadingShimmer;\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 -webkit-background-clip: text;\n background-clip: text;\n background-repeat: no-repeat;\n background-size: 50% 200%;\n display: inline-block;\n}\n\n@keyframes loadingShimmer {\n 0% {\n background-position: -100% 0;\n }\n 100% {\n background-position: 250% 0;\n }\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🎭 EMPTY STATE\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: var(--font-family-serif);\n font-size: 2.5rem;\n opacity: 0.15;\n color: var(--color-gray-700);\n font-weight: 300;\n line-height: 1.2;\n}\n\n.empty-messages-placeholder em {\n font-style: italic;\n color: var(--color-primary);\n font-weight: 400;\n}\n\n.empty-messages-placeholder code {\n font-family: var(--font-family-mono);\n font-size: 0.8em;\n background: var(--color-gray-100);\n padding: var(--space-xs) var(--space-sm);\n border-radius: var(--radius-md);\n color: var(--color-gray-600);\n font-weight: 600;\n}\n\n.placeholder-tips {\n margin-top: var(--space-3xl);\n font-size: 1rem;\n color: var(--color-gray-500);\n font-family: var(--font-family-sans);\n font-weight: 400;\n}\n\n.placeholder-tips p {\n margin: var(--space-md) 0;\n}\n\n.placeholder-tips code {\n background: var(--color-gray-200);\n padding: var(--space-xs) var(--space-sm);\n border-radius: var(--radius-sm);\n font-family: var(--font-family-mono);\n font-size: 0.875rem;\n color: var(--color-gray-700);\n font-weight: 600;\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 📱 MOBILE OPTIMIZATIONS\n ─────────────────────────────────────────────────────────────────────────────── */\n\n@media (max-width: 640px) {\n .chat-messages {\n padding: var(--space-md);\n padding-bottom: 14rem;\n }\n\n .message-wrapper {\n max-width: 95%;\n margin-bottom: var(--space-sm);\n }\n\n .message.user,\n .message.assistant {\n padding: var(--space-md) var(--space-md);\n }\n\n .chat-input-container {\n padding: var(--space-md);\n }\n\n .chat-input {\n font-size: 16px; /* Prevent zoom on iOS */\n padding: var(--space-md) var(--space-md);\n }\n\n .send-button {\n width: 2.75rem;\n height: 2.75rem;\n font-size: 1rem;\n }\n\n .chat-status {\n padding: var(--space-xs) var(--space-md);\n }\n\n .status-text {\n font-size: 0.75rem;\n }\n\n .status-link-button {\n font-size: 0.75rem;\n padding: var(--space-xs) var(--space-sm);\n }\n\n .settings-overlay {\n padding: var(--space-sm);\n }\n\n .settings-panel {\n padding: var(--space-2xl);\n border-radius: var(--radius-md);\n }\n\n .empty-messages-placeholder {\n font-size: 2rem;\n }\n\n .placeholder-tips {\n font-size: 0.875rem;\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/* ─────────────────────────────────────────────────────────────────────────────── \n 🔧 MCP COMPONENTS (Minimal Styling)\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.mcp-details {\n margin-top: var(--space-md);\n background: var(--color-gray-50);\n border: 1px solid var(--color-gray-200);\n border-radius: var(--radius-lg);\n overflow: hidden;\n box-shadow: var(--shadow-sm);\n}\n\n.mcp-tool-result-anthropic {\n padding: 0 var(--space-md);\n background-color: white;\n}\n\n.mcp-details + .mcp-details {\n margin-top: 0;\n margin-bottom: var(--space-md);\n}\n\ndetails.mcp-details.mcp-tool-results {\n border-top: 0;\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n}\n\ndetails.mcp-details.mcp-tool-use {\n border-bottom: 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n}\n\n.mcp-details > summary {\n font-style: italic;\n color: var(--color-gray-500);\n font-family: var(--font-family-serif);\n cursor: pointer;\n padding: 0 var(--space-md);\n background: var(--color-gray-100);\n transition: all var(--transition-fast);\n font-weight: 500;\n}\n\n.mcp-details > summary:hover {\n background: var(--color-gray-200);\n color: var(--color-gray-700);\n}\n\n.mcp-details[open] > summary {\n background: var(--color-primary-ghost);\n color: var(--color-primary-dark);\n border-bottom-color: var(--color-primary-light);\n}\n\n.mcp-details pre {\n position: relative;\n margin: 0;\n background: var(--color-white);\n border: none;\n border-radius: 0;\n}\n\n.mcp-details pre > .copy {\n position: absolute;\n top: var(--space-sm);\n right: var(--space-sm);\n display: flex;\n border-radius: var(--radius-md);\n border: 1px solid var(--color-gray-300);\n background: var(--color-white);\n cursor: pointer;\n padding: var(--space-sm);\n color: var(--color-gray-500);\n transition: all var(--transition-fast);\n box-shadow: var(--shadow-sm);\n}\n\n.mcp-details pre > .copy:hover {\n color: var(--color-gray-700);\n background: var(--color-gray-50);\n transform: scale(1.05);\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🧪 TEST BUTTON\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.test-button {\n background: var(--color-gray-100);\n border: 1px solid var(--color-gray-300);\n border-radius: var(--radius-lg);\n padding: var(--space-sm) var(--space-md);\n font-size: 0.8125rem;\n cursor: pointer;\n transition: all var(--transition-fast);\n min-width: 3rem;\n display: flex;\n align-items: center;\n justify-content: center;\n font-weight: 500;\n color: var(--color-gray-700);\n}\n\n.test-button:hover:not(:disabled) {\n background: var(--color-gray-200);\n border-color: var(--color-gray-400);\n transform: translateY(-1px);\n box-shadow: var(--shadow-sm);\n}\n\n.test-button:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🎨 TOGGLE SWITCHES\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 3.5rem;\n height: 2rem;\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: var(--color-gray-300);\n transition: all var(--transition-normal);\n border-radius: var(--radius-full);\n box-shadow: var(--shadow-inner);\n}\n\n.toggle-slider:before {\n position: absolute;\n content: \"\";\n height: 1.5rem;\n width: 1.5rem;\n left: 0.25rem;\n bottom: 0.25rem;\n background: var(--color-white);\n transition: all var(--transition-normal);\n border-radius: var(--radius-full);\n box-shadow: var(--shadow-sm);\n}\n\ninput:checked + .toggle-slider {\n background: var(--color-primary);\n box-shadow: var(--shadow-glow-subtle);\n}\n\ninput:checked + .toggle-slider:before {\n transform: translateX(1.5rem);\n box-shadow: var(--shadow-md);\n}\n\n.toggle-slider:hover {\n box-shadow: var(--shadow-md);\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 📋 MCP SERVER LIST\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.mcp-servers-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-md);\n}\n\n.mcp-server {\n background: var(--color-gray-50);\n border: 1px solid var(--color-gray-200);\n border-radius: var(--radius-xl);\n padding: var(--space-lg);\n transition: all var(--transition-fast);\n box-shadow: var(--shadow-sm);\n}\n\n.mcp-server:hover {\n background: var(--color-gray-100);\n border-color: var(--color-gray-300);\n transform: translateY(-1px);\n box-shadow: var(--shadow-md);\n}\n\n.mcp-server-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: var(--space-lg);\n}\n\n.mcp-server-name {\n font-weight: 600;\n color: var(--color-gray-800);\n font-size: 1.125rem;\n}\n\n.mcp-server-actions {\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n gap: var(--space-md);\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 📊 MCP STATUS COMPONENT\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.mcp-status {\n background: var(--color-gray-50);\n border: 1px solid var(--color-gray-200);\n border-radius: var(--radius-xl);\n margin: var(--space-md);\n overflow: hidden;\n max-height: 60vh;\n box-shadow: var(--shadow-lg);\n backdrop-filter: var(--glass-backdrop);\n}\n\n.mcp-status.initializing {\n border-color: var(--color-warning-light);\n background: var(--color-warning-subtle);\n}\n\n.mcp-status-summary {\n padding: var(--space-lg) var(--space-xl);\n display: flex;\n align-items: center;\n gap: var(--space-md);\n cursor: pointer;\n transition: all var(--transition-fast);\n background: var(--color-white);\n}\n\n.mcp-status-summary:hover {\n background: var(--color-gray-50);\n}\n\n.mcp-status-summary .status-icon {\n font-size: 1.25rem;\n min-width: 2rem;\n color: var(--color-primary);\n}\n\n.mcp-status-summary .status-text {\n flex: 1;\n font-size: 0.9375rem;\n color: var(--color-gray-700);\n font-weight: 600;\n}\n\n.mcp-status-summary .expand-icon {\n font-size: 0.875rem;\n color: var(--color-gray-500);\n transition: transform var(--transition-fast);\n}\n\n.mcp-status-details {\n border-top: 1px solid var(--color-gray-200);\n background: var(--color-white);\n max-height: 50vh;\n overflow-y: auto;\n}\n\n.mcp-status-empty {\n padding: var(--space-2xl);\n text-align: center;\n color: var(--color-gray-500);\n font-style: italic;\n font-size: 0.9375rem;\n}\n\n.mcp-server-status {\n border-bottom: 1px solid var(--color-gray-100);\n}\n\n.mcp-server-status:last-child {\n border-bottom: none;\n}\n\n.mcp-server-header {\n padding: var(--space-lg) var(--space-xl);\n display: flex;\n align-items: center;\n gap: var(--space-md);\n cursor: pointer;\n transition: all var(--transition-fast);\n}\n\n.mcp-server-header:hover {\n background: var(--color-gray-50);\n}\n\n.mcp-server-header .server-icon {\n font-size: 1.125rem;\n min-width: 2rem;\n color: var(--color-success);\n}\n\n.mcp-server-header .server-name {\n font-weight: 600;\n color: var(--color-gray-800);\n flex: 1;\n font-size: 1rem;\n}\n\n.mcp-server-header .server-status {\n font-size: 0.8125rem;\n color: var(--color-gray-600);\n margin-right: var(--space-md);\n font-weight: 500;\n}\n\n.mcp-server-header .server-actions {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n}\n\n.mcp-server-header .refresh-button {\n background: none;\n border: none;\n cursor: pointer;\n padding: var(--space-sm);\n border-radius: var(--radius-lg);\n transition: all var(--transition-fast);\n font-size: 1rem;\n color: var(--color-gray-500);\n}\n\n.mcp-server-header .refresh-button:hover:not(:disabled) {\n background: var(--color-gray-100);\n color: var(--color-gray-700);\n transform: scale(1.1);\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.875rem;\n color: var(--color-gray-500);\n transition: transform var(--transition-fast);\n}\n\n.mcp-server-details {\n padding: 0 var(--space-xl) var(--space-xl) var(--space-xl);\n background: var(--color-gray-50);\n}\n\n.server-info {\n margin-bottom: var(--space-xl);\n}\n\n.info-row {\n display: flex;\n margin-bottom: var(--space-md);\n font-size: 0.8125rem;\n}\n\n.info-label {\n font-weight: 600;\n color: var(--color-gray-700);\n min-width: 6rem;\n}\n\n.info-value {\n color: var(--color-gray-600);\n word-break: break-all;\n font-family: var(--font-family-mono);\n font-size: 0.75rem;\n}\n\n.server-prompts h4,\n.server-tools h4 {\n font-size: 0.9375rem;\n font-weight: 700;\n color: var(--color-gray-800);\n margin: var(--space-xl) 0 var(--space-md) 0;\n}\n\n.prompts-list,\n.tools-list {\n display: flex;\n flex-direction: column;\n gap: var(--space-md);\n}\n\n.prompt-item,\n.tool-item {\n background: var(--color-white);\n border: 1px solid var(--color-gray-200);\n border-radius: var(--radius-lg);\n padding: var(--space-md);\n box-shadow: var(--shadow-sm);\n transition: all var(--transition-fast);\n}\n\n.prompt-item:hover,\n.tool-item:hover {\n border-color: var(--color-gray-300);\n box-shadow: var(--shadow-md);\n transform: translateY(-1px);\n}\n\n.prompt-name {\n font-family: var(--font-family-mono);\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--color-primary);\n}\n\n.tool-name {\n font-family: var(--font-family-mono);\n font-size: 0.8125rem;\n font-weight: 600;\n color: var(--color-success);\n}\n\n.prompt-description,\n.tool-description {\n display: block;\n font-size: 0.75rem;\n color: var(--color-gray-600);\n margin-top: var(--space-xs);\n line-height: 1.4;\n}\n\n.prompt-args {\n margin-top: var(--space-sm);\n display: flex;\n gap: var(--space-xs);\n flex-wrap: wrap;\n}\n\n.prompt-arg {\n font-family: var(--font-family-mono);\n font-size: 0.6875rem;\n background: var(--color-gray-100);\n color: var(--color-gray-600);\n padding: var(--space-xs) var(--space-sm);\n border-radius: var(--radius-sm);\n border: 1px solid var(--color-gray-200);\n font-weight: 500;\n}\n\n.tool-schema {\n margin-top: var(--space-sm);\n}\n\n.tool-schema details {\n font-size: 0.75rem;\n}\n\n.tool-schema summary {\n color: var(--color-gray-600);\n cursor: pointer;\n font-weight: 600;\n margin-bottom: var(--space-xs);\n transition: color var(--transition-fast);\n}\n\n.tool-schema summary:hover {\n color: var(--color-gray-800);\n}\n\n.tool-schema .schema-json {\n background: var(--color-gray-50);\n border: 1px solid var(--color-gray-200);\n border-radius: var(--radius-md);\n padding: var(--space-md);\n font-family: var(--font-family-mono);\n color: var(--color-gray-700);\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-word;\n margin: 0;\n font-size: 0.6875rem;\n line-height: 1.4;\n}\n\n.server-error {\n background: var(--color-danger-subtle);\n border: 1px solid var(--color-danger-light);\n border-radius: var(--radius-lg);\n padding: var(--space-md);\n font-size: 0.8125rem;\n color: var(--color-danger-dark);\n margin-top: var(--space-md);\n font-weight: 500;\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🎯 COMMAND PALETTE\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.command-palette {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n width: 95%;\n z-index: 99;\n background: var(--glass-bg);\n backdrop-filter: var(--glass-backdrop);\n border: 1px solid var(--glass-border);\n border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;\n max-height: 70vh;\n overflow-y: auto;\n box-shadow: var(--shadow-2xl-up);\n padding-bottom: 8rem;\n animation: paletteSlideUp var(--transition-normal) ease-out;\n max-width: 70rem;\n margin: 0 auto;\n}\n\n@keyframes paletteSlideUp {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n.command-palette-loading,\n.command-palette-error {\n padding: var(--space-lg) var(--space-xl);\n font-size: 0.9375rem;\n display: flex;\n align-items: center;\n gap: var(--space-md);\n color: var(--color-gray-600);\n}\n\n.command-palette-error {\n color: var(--color-danger);\n background: var(--color-danger-subtle);\n}\n\n.loading-spinner {\n animation: spin 1s linear infinite;\n color: var(--color-primary);\n}\n\n.command-palette-item {\n padding: var(--space-sm) var(--space-md);\n cursor: pointer;\n border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n transition: all var(--transition-fast);\n background: rgba(255, 255, 255, 0.05);\n}\n\n.command-palette-item:last-child {\n border-bottom: none;\n padding-bottom: var(--space-2xl);\n}\n\n.command-palette-item:hover,\n.command-palette-item.selected {\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(20px);\n font-weight: bold;\n}\n\n.command-palette-item-main {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n}\n\n.command-palette-type-icon {\n font-size: 1.125rem;\n flex-shrink: 0;\n color: var(--color-primary);\n}\n\n.command-palette-name {\n font-family: var(--font-family-mono);\n font-weight: 600;\n color: var(--color-primary-dark);\n flex-shrink: 0;\n font-size: 0.9375rem;\n}\n\n.command-palette-server {\n font-size: 0.75rem;\n color: var(--color-gray-600);\n margin-left: auto;\n background: rgba(255, 255, 255, 0.2);\n padding: var(--space-xs) var(--space-md);\n border-radius: var(--radius-full);\n font-weight: 500;\n}\n\n.command-palette-description {\n font-size: 0.8125rem;\n color: var(--color-gray-600);\n margin-top: var(--space-xs);\n line-height: 1.4;\n}\n\n.command-palette-args {\n font-size: 0.75rem;\n color: var(--color-gray-500);\n margin-top: var(--space-xs);\n font-family: var(--font-family-mono);\n font-weight: 500;\n}\n\n/* Argument Dialog Styles */\n.command-palette-dialog-overlay {\n padding-bottom: var(--space-lg);\n}\n\n.command-palette-dialog {}\n\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: var(--space-md);\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: var(--space-md);\n}\n\n.dialog-description {\n margin: 0 0 var(--space-sm) 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/* ─────────────────────────────────────────────────────────────────────────────── \n 🎪 ENHANCED FEATURES (NextSteps, ResourceViewer, AskUserInput)\n ─────────────────────────────────────────────────────────────────────────────── */\n\n/* NextSteps Component */\n.next-steps {\n margin: var(--space-lg) 0;\n padding: var(--space-lg);\n background: var(--color-info-subtle);\n border: 1px solid var(--color-info-light);\n border-radius: var(--radius-xl);\n font-size: 0.9375rem;\n box-shadow: var(--shadow-sm);\n}\n\n.next-steps-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: var(--space-md);\n font-weight: 600;\n color: var(--color-gray-800);\n}\n\n.next-steps-label {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n color: var(--color-info-dark);\n}\n\n.next-steps-cancelled {\n font-size: 0.8125rem;\n color: var(--color-danger);\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n font-weight: 500;\n}\n\n.next-steps-proposals {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-md);\n}\n\n.next-step-pill {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-md);\n padding: var(--space-md) var(--space-lg);\n background: var(--color-white);\n border: 2px solid var(--color-gray-300);\n border-radius: var(--radius-full);\n cursor: pointer;\n transition: all var(--transition-normal);\n overflow: hidden;\n min-height: 3rem;\n box-shadow: var(--shadow-sm);\n}\n\n.next-step-pill:hover {\n border-color: var(--color-primary);\n box-shadow:\n var(--shadow-md),\n var(--shadow-glow-subtle);\n transform: translateY(-2px);\n}\n\n.next-step-pill.selected {\n border-color: var(--color-primary);\n background: var(--color-primary-ghost);\n box-shadow:\n var(--shadow-md),\n var(--shadow-glow);\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: 600;\n color: var(--color-gray-800);\n line-height: 1.3;\n font-size: 0.9375rem;\n}\n\n.pill-description {\n font-size: 0.8125rem;\n color: var(--color-gray-600);\n line-height: 1.3;\n margin-top: var(--space-xs);\n}\n\n.pill-progress {\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n transition: width var(--transition-normal);\n opacity: 0.2;\n z-index: 1;\n background: var(--color-primary);\n border-radius: var(--radius-full);\n}\n\n.pill-countdown {\n position: absolute;\n top: -0.5rem;\n right: -0.5rem;\n background: var(--color-primary);\n color: var(--color-white);\n border-radius: var(--radius-full);\n width: 1.5rem;\n height: 1.5rem;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 0.75rem;\n font-weight: 700;\n z-index: 3;\n box-shadow: var(--shadow-md);\n animation: countdownPulse 1s ease-in-out infinite;\n}\n\n@keyframes countdownPulse {\n 0%, 100% {\n transform: scale(1);\n }\n 50% {\n transform: scale(1.1);\n }\n}\n\n.mcp-next-steps-container {\n margin: var(--space-md) 0;\n}\n\n.toggle-label {\n margin-left: var(--space-md);\n font-size: 0.9375rem;\n color: var(--color-gray-700);\n font-weight: 500;\n}\n\n/* ResourceViewer Component */\n.resource-viewer {\n max-width: 100vw;\n margin: var(--space-md) 0;\n background: var(--color-white);\n border: 1px solid var(--color-gray-200);\n border-radius: var(--radius-xl);\n overflow: hidden;\n box-shadow: var(--shadow-lg);\n transition: all var(--transition-normal);\n}\n\n.resource-viewer:hover {\n box-shadow: var(--shadow-xl);\n transform: translateY(-2px);\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 transform: none;\n}\n\n.resource-viewer-error {\n border-color: var(--color-danger-light);\n background: var(--color-danger-subtle);\n}\n\n.resource-viewer-header {\n padding: var(--space-lg) var(--space-xl);\n background: var(--color-gray-50);\n border-bottom: 1px solid var(--color-gray-200);\n display: flex;\n justify-content: space-between;\n align-items: center;\n font-size: 0.9375rem;\n}\n\n.resource-viewer-label {\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n font-weight: 600;\n color: var(--color-gray-800);\n}\n\n.resource-viewer-meta {\n margin-left: var(--space-lg);\n color: var(--color-gray-600);\n font-size: 0.8125rem;\n font-family: var(--font-family-mono);\n}\n\n.resource-viewer-controls {\n display: flex;\n gap: var(--space-md);\n}\n\n.resource-viewer-content {\n position: relative;\n overflow: hidden;\n}\n\n.resource-viewer-error-content {\n padding: var(--space-xl);\n color: var(--color-danger-dark);\n font-weight: 500;\n}\n\n.resource-viewer-error-content p {\n margin: 0;\n}\n\n/* AskUserInput Component */\n.ask-user-input {\n margin: var(--space-lg) 0;\n padding: var(--space-xl);\n background: var(--color-info-subtle);\n border: 2px solid var(--color-info-light);\n border-radius: var(--radius-xl);\n font-size: 0.9375rem;\n box-shadow:\n var(--shadow-lg),\n 0 0 20px rgba(14, 165, 233, 0.1);\n animation: askUserSlideIn var(--transition-slow) ease-out;\n}\n\n@keyframes askUserSlideIn {\n from {\n opacity: 0;\n transform: translateY(20px) scale(0.95);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n}\n\n.ask-user-question {\n display: flex;\n align-items: center;\n gap: var(--space-md);\n margin-bottom: var(--space-lg);\n font-weight: 600;\n color: var(--color-info-dark);\n font-size: 1.125rem;\n}\n\n.ask-user-question i {\n color: var(--color-info);\n font-size: 1.25rem;\n}\n\n.ask-user-form {\n margin-bottom: var(--space-md);\n}\n\n.ask-user-text-input,\n.ask-user-multiline-input {\n margin-bottom: var(--space-lg);\n}\n\n.ask-user-input-field,\n.ask-user-textarea-field {\n width: 100%;\n padding: var(--space-md) var(--space-lg);\n border: 2px solid var(--color-gray-300);\n border-radius: var(--radius-xl);\n font-size: 0.9375rem;\n font-family: inherit;\n transition: all var(--transition-normal);\n background: var(--color-white);\n color: var(--color-gray-800);\n box-shadow: var(--shadow-sm);\n}\n\n.ask-user-input-field:focus,\n.ask-user-textarea-field:focus {\n outline: none;\n border-color: var(--color-info);\n box-shadow:\n var(--shadow-md),\n 0 0 0 4px rgba(14, 165, 233, 0.1);\n transform: translateY(-1px);\n}\n\n.ask-user-textarea-field {\n resize: vertical;\n min-height: 5rem;\n line-height: 1.5;\n}\n\n.ask-user-choices {\n display: flex;\n flex-direction: column;\n gap: var(--space-md);\n}\n\n.ask-user-choice-btn {\n padding: var(--space-lg) var(--space-xl);\n background: var(--color-white);\n border: 2px solid var(--color-gray-300);\n border-radius: var(--radius-xl);\n cursor: pointer;\n transition: all var(--transition-normal);\n text-align: left;\n font-size: 0.9375rem;\n color: var(--color-gray-700);\n font-weight: 500;\n box-shadow: var(--shadow-sm);\n}\n\n.ask-user-choice-btn:hover {\n border-color: var(--color-info);\n background: var(--color-info-ghost);\n transform: translateY(-2px);\n box-shadow: var(--shadow-md);\n}\n\n.ask-user-choice-btn.selected {\n border-color: var(--color-info);\n background: var(--color-info-ghost);\n color: var(--color-info-dark);\n box-shadow:\n var(--shadow-md),\n 0 0 0 4px rgba(14, 165, 233, 0.1);\n}\n\n.ask-user-confirm {\n display: flex;\n gap: var(--space-lg);\n justify-content: center;\n}\n\n.ask-user-confirm-btn {\n padding: var(--space-lg) var(--space-2xl);\n border: none;\n border-radius: var(--radius-xl);\n cursor: pointer;\n font-size: 0.9375rem;\n font-weight: 600;\n transition: all var(--transition-normal);\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n min-width: 6rem;\n justify-content: center;\n box-shadow: var(--shadow-md);\n}\n\n.confirm-yes {\n background: linear-gradient(\n 145deg,\n var(--color-success) 0%,\n var(--color-success-light) 100%\n );\n color: var(--color-white);\n}\n\n.confirm-yes:hover {\n background: var(--color-success-dark);\n transform: translateY(-2px);\n box-shadow:\n var(--shadow-lg),\n 0 0 20px rgba(5, 150, 105, 0.3);\n}\n\n.confirm-no {\n background: linear-gradient(\n 145deg,\n var(--color-danger) 0%,\n var(--color-danger-light) 100%\n );\n color: var(--color-white);\n}\n\n.confirm-no:hover {\n background: var(--color-danger-dark);\n transform: translateY(-2px);\n box-shadow:\n var(--shadow-lg),\n 0 0 20px rgba(220, 38, 38, 0.3);\n}\n\n.ask-user-actions {\n display: flex;\n gap: var(--space-md);\n justify-content: flex-end;\n}\n\n.ask-user-action-btn {\n padding: var(--space-md) var(--space-xl);\n border: none;\n border-radius: var(--radius-xl);\n cursor: pointer;\n font-size: 0.9375rem;\n font-weight: 600;\n transition: all var(--transition-normal);\n display: flex;\n align-items: center;\n gap: var(--space-sm);\n box-shadow: var(--shadow-sm);\n}\n\n.cancel-btn {\n background: var(--color-gray-100);\n color: var(--color-gray-700);\n border: 2px solid var(--color-gray-300);\n}\n\n.cancel-btn:hover {\n background: var(--color-gray-200);\n color: var(--color-gray-800);\n transform: translateY(-1px);\n box-shadow: var(--shadow-md);\n}\n\n.submit-btn {\n background: var(--bg-gradient-user);\n color: var(--color-white);\n border: 2px solid rgba(255, 255, 255, 0.2);\n}\n\n.submit-btn:hover:not(:disabled) {\n background: var(--color-primary-dark);\n transform: translateY(-2px);\n box-shadow:\n var(--shadow-lg),\n var(--shadow-glow-subtle);\n}\n\n.submit-btn:disabled {\n background: var(--color-gray-400);\n cursor: not-allowed;\n opacity: 0.6;\n transform: none;\n}\n\n.ask-user-hint {\n font-size: 0.8125rem;\n color: var(--color-gray-600);\n text-align: center;\n font-style: italic;\n margin-top: var(--space-md);\n}\n\n.ask-user-cancel-btn {\n background: none;\n border: none;\n color: var(--color-danger);\n cursor: pointer;\n font-size: 0.8125rem;\n padding: var(--space-xs) var(--space-md);\n border-radius: var(--radius-lg);\n transition: all var(--transition-fast);\n display: flex;\n align-items: center;\n gap: var(--space-xs);\n font-weight: 500;\n}\n\n.ask-user-cancel-btn:hover {\n background: var(--color-danger-subtle);\n transform: scale(1.05);\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🎨 ENHANCED MOBILE OPTIMIZATIONS\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 .resource-viewer-header {\n padding: var(--space-md) var(--space-lg);\n font-size: 0.8125rem;\n }\n\n .resource-viewer-meta {\n margin-left: var(--space-md);\n font-size: 0.75rem;\n }\n\n .resource-viewer-controls {\n gap: var(--space-sm);\n }\n\n .ask-user-input {\n padding: var(--space-lg);\n margin: var(--space-md) 0;\n }\n\n .ask-user-choices {\n gap: var(--space-sm);\n }\n\n .ask-user-choice-btn {\n padding: var(--space-md) var(--space-lg);\n }\n\n .ask-user-confirm {\n flex-direction: column;\n gap: var(--space-md);\n }\n\n .ask-user-confirm-btn {\n width: 100%;\n }\n\n .ask-user-actions {\n flex-direction: column-reverse;\n gap: var(--space-sm);\n }\n\n .ask-user-action-btn {\n width: 100%;\n justify-content: center;\n }\n\n .mcp-status-summary {\n padding: var(--space-md) var(--space-lg);\n }\n\n .mcp-server-header {\n padding: var(--space-md) var(--space-lg);\n }\n\n .mcp-server-details {\n padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);\n }\n\n .info-row {\n flex-direction: column;\n gap: var(--space-xs);\n }\n\n .info-label {\n min-width: auto;\n font-size: 0.75rem;\n }\n\n .info-value {\n font-size: 0.75rem;\n }\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🎭 SUMMARY MARKERS & DETAILS\n ─────────────────────────────────────────────────────────────────────────────── */\n\nsummary {\n outline: none;\n list-style: none;\n}\n\nsummary::-webkit-details-marker,\nsummary::marker {\n display: none;\n}\n\nsummary::before {\n content: \"▶\";\n font-family: var(--font-family-sans);\n font-size: 0.875rem;\n margin-right: var(--space-sm);\n transition: transform var(--transition-fast);\n display: inline-block;\n color: var(--color-primary);\n}\n\ndetails[open] summary::before {\n transform: rotate(90deg);\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🎪 CLIENT TOOL EXECUTION\n ─────────────────────────────────────────────────────────────────────────────── */\n\n.client-tool-execution {\n margin: var(--space-md) 0;\n}\n\n.ask-user-inline {\n /* Inherits styles from .ask-user-input */\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \n 🎨 FINAL TOUCHES & ACCESSIBILITY\n ─────────────────────────────────────────────────────────────────────────────── */\n\n/* Focus indicators for accessibility */\n*:focus-visible {\n outline: 2px solid var(--color-primary);\n outline-offset: 2px;\n}\n\n/* Reduced motion preferences */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n :root {\n --color-gray-200: #000000;\n --color-gray-300: #333333;\n --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3);\n --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);\n --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);\n }\n}\n\n/* Print styles */\n@media print {\n .chat-footer,\n .settings-overlay,\n .command-palette {\n display: none !important;\n }\n\n .chat-messages {\n padding-bottom: 0 !important;\n }\n\n .message {\n break-inside: avoid;\n box-shadow: none !important;\n border: 1px solid #ccc !important;\n }\n}\n\n@media (prefers-color-scheme: dark) {\n :root {\n /* Dark Mode Color Overrides */\n --color-primary: #60a5fa;\n --color-primary-light: #93c5fd;\n --color-primary-dark: #2563eb;\n --color-primary-subtle: #1e3a8a;\n --color-primary-ghost: #1e293b;\n\n --color-secondary: #94a3b8;\n --color-secondary-light: #cbd5e1;\n --color-secondary-dark: #64748b;\n\n --color-success: #34d399;\n --color-success-light: #6ee7b7;\n --color-success-subtle: #064e3b;\n\n --color-warning: #fbbf24;\n --color-warning-light: #fcd34d;\n --color-warning-subtle: #451a03;\n\n --color-danger: #f87171;\n --color-danger-light: #fca5a5;\n --color-danger-subtle: #450a0a;\n\n --color-info: #38bdf8;\n --color-info-light: #7dd3fc;\n --color-info-subtle: #0c4a6e;\n\n /* Dark Neutral Palette */\n --color-white: #0f172a;\n --color-gray-50: #1e293b;\n --color-gray-100: #334155;\n --color-gray-200: #475569;\n --color-gray-300: #64748b;\n --color-gray-400: #94a3b8;\n --color-gray-500: #cbd5e1;\n --color-gray-600: #e2e8f0;\n --color-gray-700: #f1f5f9;\n --color-gray-800: #f8fafc;\n --color-gray-900: #ffffff;\n\n /* Dark Background Gradients */\n --bg-gradient-chat: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);\n --bg-gradient-message: linear-gradient(145deg, #1e293b 0%, #334155 100%);\n --bg-gradient-assistant: linear-gradient(145deg, #1e293b 0%, #334155 100%);\n\n /* Dark Glassmorphism */\n --glass-bg: rgba(15, 23, 42, 0.8);\n --glass-border: rgba(255, 255, 255, 0.1);\n\n /* Dark Shadows */\n --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);\n --shadow-sm:\n 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);\n --shadow-md:\n 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.4);\n --shadow-lg:\n 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);\n --shadow-xl:\n 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);\n --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.6);\n --shadow-2xl-up: 1px -8px 50px -12px rgba(0, 0, 0, 0.6);\n --shadow-glow: 0 0 20px rgba(96, 165, 250, 0.4);\n --shadow-glow-subtle: 0 0 15px rgba(96, 165, 250, 0.2);\n }\n}",[],[265,454],"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();",[],[265,463],"ed3c6fbe-52e0-11f0-ac27-f69ea79377d9","index.html","2f3fa440-3cdd-11f0-acd6-9e149126039e",996,["D",1750978645465],"\n\n \n \n \n \n \n \n \n \n chat.parc.land\n\n \n \n \n\n \n \n\n \n \n \n\n \n \n \n\n \n \n \n \n \n

\n\n \n

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

\n {text}\n

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

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

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

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

\n Claude Chat
with MCP\n

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

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

\n\n

\n {/* Enhanced Command Palette */}\n setShowCommandPalette(false)}\n onResult={handleCommandResult}\n onExecute={handleCommandExecute}\n 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 ? \"Streaming…\"\n : waitingForUser\n ? \"Waiting for your input above…\"\n : \"Type your message or / for commands…\"\n : \"Configure API key in settings first\"}\n className=\"chat-input\"\n disabled={!config.anthropicApiKey || thinking || waitingForUser}\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 {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}",[],[265,429,616],"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}",[],[265,429,626],"1a3c1f66-4bcd-11f0-82ba-76b3cceeab13","ResourceViewer.tsx","ee0b601c-4b56-11f0-adf4-76b3cceeab13",815,["D",1750200472889],32,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { FileViewerResult } from \"../../shared/types.ts\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\n\n// Import CodeMirror\nimport {\n basicSetup,\n EditorView,\n} from \"https://esm.sh/@codemirror/basic-setup@0.20.0?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { css } from \"https://esm.sh/@codemirror/lang-css@6.2.1?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { html } from \"https://esm.sh/@codemirror/lang-html@6.4.7?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { javascript } from \"https://esm.sh/@codemirror/lang-javascript@6.2.1?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { json } from \"https://esm.sh/@codemirror/lang-json@6.0.1?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { markdown } from \"https://esm.sh/@codemirror/lang-markdown@6.2.4?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { python } from \"https://esm.sh/@codemirror/lang-python@6.1.4?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { xml } from \"https://esm.sh/@codemirror/lang-xml@6.0.2?deps=@codemirror/view@6.23.0,@codemirror/state@6.4.0\";\nimport { EditorState } from \"https://esm.sh/@codemirror/state@6.4.0\";\n\ninterface ResourceViewerProps {\n fileViewerResult: FileViewerResult;\n mcpClients: MCPClient[];\n serverName?: string; // Retrieved from matching mcp_tool_use\n className?: string;\n}\n\n/**\n * ResourceViewer - Component for displaying MCP resource content with syntax highlighting\n *\n * Features:\n * - Fetches resource content using MCP client\n * - Renders with CodeMirror for syntax highlighting\n * - Supports fullscreen toggle\n * - Simple component state management\n * - Error handling with retry functionality\n */\nexport default function ResourceViewer({\n fileViewerResult,\n mcpClients = [],\n serverName,\n className = \"\",\n}: ResourceViewerProps) {\n const containerRef = useRef(null);\n const editorRef = useRef(null);\n const editorViewRef = useRef(null);\n const iframeRef = useRef(null);\n\n const [isFullscreen, setIsFullscreen] = useState(false);\n const [isLoading, setIsLoading] = useState(false);\n const [error, setError] = useState(null);\n const [content, setContent] = useState(\"\");\n const [retryCount, setRetryCount] = useState(0); // Track retry attempts for re-rendering\n\n // Handle error case\n if (\"error\" in fileViewerResult) {\n return (\n

\n \n Resource Error\n \n

{fileViewerResult.error}

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

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

\n\n

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

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

\n Loading resource...\n

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

\n \n Failed to load resource\n

{error}

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

Resource Metadata

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

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

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

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

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

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

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

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

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

\n );\n}",[],[265,429,662],"a7b59100-4def-11f0-a761-76b3cceeab13","HTMLRenderer.tsx","abffdc26-44c0-11f0-8e76-76b3cceeab13",960,["D",1750435215461],30,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPClient } from \"../utils/MCPClient.ts\";\n\ninterface HTMLRendererProps {\n html: string;\n mcpClients?: MCPClient[];\n className?: string;\n}\n\ninterface MCPContextAPI {\n // Tool operations\n listTools: () => Promise;\n callTool: (serverName: string, toolName: string, args: any) => Promise;\n\n // Prompt operations\n listPrompts: () => Promise;\n getPrompt: (serverName: string, promptName: string, args?: Record) => Promise;\n\n // Resource operations\n listResources: () => Promise;\n readResource: (serverName: string, uri: string) => Promise;\n\n // Utility functions\n log: (level: \"debug\" | \"info\" | \"warning\" | \"error\", message: string, data?: any) => void;\n\n // UI interactions\n requestFullscreen: () => void;\n exitFullscreen: () => void;\n isFullscreen: () => boolean;\n}\n\n/**\n * HTMLRenderer - Encapsulated component for rendering HTML output from MCP tools\n *\n * Features:\n * - Renders HTML in a secure iframe\n * - Provides fullscreen enter/exit affordances\n * - Exposes MCP context API to iframe content\n * - Handles iframe communication via postMessage\n */\nexport default function HTMLRenderer({ html, mcpClients = [], className = \"\" }: HTMLRendererProps) {\n const iframeRef = useRef(null);\n const containerRef = useRef(null);\n const [isFullscreen, setIsFullscreen] = useState(false);\n const [isLoading, setIsLoading] = useState(true);\n console.log(\"[MCP/Browser Renderer] HTMLRenderer: Rendering HTML:\", { mcpClients });\n\n // Create MCP context API that will be exposed to iframe\n const createMCPContext = useCallback((): MCPContextAPI => {\n const findClientByName = (serverName: string) => {\n console.log(\"[MCP/Browser Renderer] Finding client by name:\", serverName, mcpClients);\n return mcpClients.find(client =>\n (client as any).serverInfo?.name === serverName\n || (client as any).clientInfo?.name === serverName\n );\n };\n\n return {\n // Tool operations\n listTools: async () => {\n const allTools = [];\n for (const client of mcpClients) {\n try {\n const tools = await client.listTools();\n allTools.push(...tools.map(tool => ({\n ...tool,\n serverName: (client as any).serverInfo?.name || \"Unknown\",\n })));\n } catch (error) {\n console.warn(\"Failed to list tools from client:\", error);\n }\n }\n return allTools;\n },\n\n callTool: async (serverName: string, toolName: string, args: any) => {\n console.log(\"[MCP/Browser Renderer] Calling tool:\", serverName, toolName, args);\n const client = findClientByName(serverName);\n if (!client) {\n throw new Error(`MCP server \"${serverName}\" not found`);\n }\n return await client.callTool(toolName, args);\n },\n\n // Prompt operations\n listPrompts: async () => {\n const allPrompts = [];\n for (const client of mcpClients) {\n try {\n const prompts = await client.listPrompts();\n allPrompts.push(...prompts.map(prompt => ({\n ...prompt,\n serverName: (client as any).serverInfo?.name || \"Unknown\",\n })));\n } catch (error) {\n console.warn(\"Failed to list prompts from client:\", error);\n }\n }\n return allPrompts;\n },\n\n getPrompt: async (serverName: string, promptName: string, args?: Record) => {\n const client = findClientByName(serverName);\n if (!client) {\n throw new Error(`MCP server \"${serverName}\" not found`);\n }\n return await client.getPrompt(promptName, args);\n },\n\n // Resource operations\n listResources: async () => {\n const allResources = [];\n for (const client of mcpClients) {\n try {\n const resources = await client.listResources();\n allResources.push(...resources.map(resource => ({\n ...resource,\n serverName: (client as any).serverInfo?.name || \"Unknown\",\n })));\n } catch (error) {\n console.warn(\"Failed to list resources from client:\", error);\n }\n }\n return allResources;\n },\n\n readResource: async (serverName: string, uri: string) => {\n const client = findClientByName(serverName);\n if (!client) {\n throw new Error(`MCP server \"${serverName}\" not found`);\n }\n return await client.readResource(uri);\n },\n\n // Utility functions\n log: (level: \"debug\" | \"info\" | \"warning\" | \"error\", message: string, data?: any) => {\n console[level](`[HTMLRenderer] ${message}`, data);\n },\n\n // UI interactions\n requestFullscreen: () => {\n if (containerRef.current && !isFullscreen) {\n enterFullscreen();\n }\n },\n\n exitFullscreen: () => {\n if (isFullscreen) {\n exitFullscreen();\n }\n },\n\n isFullscreen: () => isFullscreen,\n };\n }, [mcpClients, isFullscreen]);\n\n // Fullscreen functionality\n const enterFullscreen = useCallback(() => {\n const container = containerRef.current;\n if (!container) return;\n setIsFullscreen(true);\n }, []);\n\n const exitFullscreen = useCallback(() => {\n setIsFullscreen(false);\n }, []);\n\n // Handle iframe communication\n useEffect(() => {\n const handleMessage = async (event: MessageEvent) => {\n const iframe = iframeRef.current;\n if (!iframe || event.source !== iframe.contentWindow) {\n return;\n }\n\n const { type, id, method, args } = event.data;\n\n if (type !== \"mcp-api-call\") {\n return;\n }\n\n try {\n const mcpContext = createMCPContext();\n const methodFunc = (mcpContext as any)[method];\n\n if (typeof methodFunc !== \"function\") {\n throw new Error(`Unknown MCP API method: ${method}`);\n }\n\n const result = await methodFunc(...(args || []));\n\n iframe.contentWindow?.postMessage({\n type: \"mcp-api-response\",\n id,\n success: true,\n result,\n }, \"*\");\n } catch (error) {\n iframe.contentWindow?.postMessage({\n type: \"mcp-api-response\",\n id,\n success: false,\n error: error instanceof Error ? error.message : String(error),\n }, \"*\");\n }\n };\n\n window.addEventListener(\"message\", handleMessage);\n return () => window.removeEventListener(\"message\", handleMessage);\n }, [createMCPContext, mcpClients]);\n\n // Create iframe content with injected MCP context\n const createIframeContent = useCallback(() => {\n const contextScript = `\n \n \n \n \n `;\n\n // localStorage.setItem(\"__debugHTML\", html);\n\n return `\n \n \n \n \n \n \n ${contextScript}\n \n \n
\n \n
\n \n
\n ${html}\n
\n \n \n \n \n `;\n }, [html, createMCPContext, mcpClients]);\n\n const iframeKey = React.useMemo(\n () =>\n `clients-${\n mcpClients.map(\n c => (c as any).serverInfo?.name ?? (c as any).clientInfo?.name,\n ).join(\"_\")\n }`,\n [mcpClients],\n );\n\n // Handle iframe load\n const handleIframeLoad = useCallback(() => {\n setIsLoading(false);\n\n // Listen for iframe ready message\n const handleIframeReady = (event: MessageEvent) => {\n if (event.data.type === \"iframe-ready\" && event.source === iframeRef.current?.contentWindow) {\n // Iframe is ready, send initial fullscreen state\n iframeRef.current?.contentWindow?.postMessage({\n type: \"fullscreen-changed\",\n isFullscreen,\n }, \"*\");\n }\n };\n\n window.addEventListener(\"message\", handleIframeReady);\n return () => window.removeEventListener(\"message\", handleIframeReady);\n }, [isFullscreen]);\n\n // Notify iframe of fullscreen changes\n useEffect(() => {\n if (iframeRef.current?.contentWindow) {\n iframeRef.current.contentWindow.postMessage({\n type: \"fullscreen-changed\",\n isFullscreen,\n }, \"*\");\n }\n }, [isFullscreen]);\n\n return (\n \n {/* External fullscreen controls */}\n {!isFullscreen && (\n \n e.currentTarget.style.background = \"rgba(0, 0, 0, 0.9)\"}\n onMouseLeave={(e) => e.currentTarget.style.background = \"rgba(0, 0, 0, 0.7)\"}\n title=\"Enter fullscreen\"\n >\n ⛶\n \n \n )}\n\n {/* Loading indicator */}\n {isLoading && (\n \n
\n
\n
\n
\n
\n Loading HTML content...\n \n )}\n\n {/* Iframe */}\n \n \n );\n}",[],[265,429,670],"3eadcf80-5347-11f0-a2ea-f69ea79377d9","EnhancedCommandPalette.tsx","2023c796-4095-11f0-b0e3-76b3cceeab13",1055,["D",1751022590777],102,"/** @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 { MCPClientPool } from \"../utils/mcpClientPool.ts\";\nimport { CLIENT_TOOLS, ClientTool } from \"../utils/clientTools.ts\";\n\n// Type definitions\ninterface MCPPrompt {\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n arguments?: Array<{\n name: string;\n description?: string;\n required?: boolean;\n }>;\n}\n\ninterface MCPTool {\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n inputSchema?: any;\n}\n\ninterface ClientToolCommand {\n type: \"client_tool\";\n serverId: \"client\";\n serverName: \"Client\";\n name: string;\n description?: string;\n data: ClientTool;\n}\n\ninterface MCPServerConfig {\n id: string;\n name: string;\n url?: string;\n enabled: boolean;\n authorization_token?: string;\n}\n\ntype CommandType = \"prompt\" | \"tool\" | \"client_tool\";\n\ninterface Command {\n type: CommandType;\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n data: MCPPrompt | MCPTool | ClientTool;\n}\n\ninterface CommandPaletteProps {\n servers: MCPServerConfig[];\n query: string;\n onClose: () => void;\n onExecute: (result: string) => void;\n onResult: (result: any) => void;\n position: { bottom: string; left: string };\n visible: boolean;\n mcpClients: MCPClient[];\n clientPool: MCPClientPool;\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 clientPool,\n}: CommandPaletteProps) {\n const [commands, setCommands] = useState([]);\n const [selectedIndex, setSelectedIndex] = useState(0);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [showArgumentDialog, setShowArgumentDialog] = useState(false);\n const [selectedCommand, setSelectedCommand] = useState(null);\n const [argumentValues, setArgumentValues] = useState({});\n const argumentInputRefs = useRef>(new Map());\n\n // Initialize commands using client pool\n useEffect(() => {\n const initializeCommands = async () => {\n console.log(`[CMD] Initializing commands using client pool...`);\n if (!visible) return;\n\n setLoading(true);\n setError(null);\n\n try {\n // Fetch prompts and tools using the client pool\n const [promptsResult, toolsResult] = await Promise.all([\n clientPool.fetchPrompts(),\n clientPool.fetchTools(),\n ]);\n\n const newCommands: Command[] = [];\n\n // Add client-side tools as commands first (higher priority)\n CLIENT_TOOLS.forEach(tool => {\n newCommands.push({\n type: \"client_tool\",\n serverId: \"client\",\n serverName: \"Client\",\n name: tool.name,\n description: tool.description,\n data: tool,\n });\n });\n\n // Add prompts as commands\n if (promptsResult.success) {\n promptsResult.prompts.forEach(prompt => {\n newCommands.push({\n type: \"prompt\",\n serverId: prompt.serverId,\n serverName: prompt.serverName,\n name: prompt.name,\n description: prompt.description,\n data: prompt,\n });\n });\n }\n\n // Add tools as commands\n if (toolsResult.success) {\n toolsResult.tools.forEach(tool => {\n newCommands.push({\n type: \"tool\",\n serverId: tool.serverId,\n serverName: tool.serverName,\n name: tool.name,\n description: tool.description,\n data: tool,\n });\n });\n }\n\n setCommands(newCommands);\n\n // Log any errors\n if (!promptsResult.success) {\n console.warn(\"[CMD] Failed to fetch prompts:\", promptsResult.error);\n }\n if (!toolsResult.success) {\n console.warn(\"[CMD] Failed to fetch tools:\", toolsResult.error);\n }\n } catch (error) {\n console.error(\"[CMD] Error initializing commands:\", error);\n setError(error instanceof Error ? error.message : \"Failed to load commands\");\n } finally {\n setLoading(false);\n }\n };\n\n initializeCommands();\n }, [visible, clientPool]);\n\n // Clean up on unmount (no longer needed since we don't manage clients)\n useEffect(() => {\n return () => {\n // No cleanup needed since we use the centralized client pool\n };\n }, []);\n\n // Filter commands based on query\n const getFilteredCommands = useCallback(() => {\n if (!query.startsWith(\"/\")) return [];\n\n const searchQuery = query.slice(1).toLowerCase();\n const [commandPart, ...argParts] = searchQuery.split(\" \");\n\n // If user has already typed arguments, don't show palette\n if (argParts.length > 0) return [];\n\n return commands.filter(command => {\n const nameMatch = command.name.toLowerCase().includes(commandPart);\n const descMatch = command.description?.toLowerCase().includes(commandPart);\n const typeMatch = commandPart.startsWith(\"tool:\") && (command.type === \"tool\" || command.type === \"client_tool\");\n const promptMatch = commandPart.startsWith(\"prompt:\") && command.type === \"prompt\";\n const clientMatch = commandPart.startsWith(\"client:\") && command.type === \"client_tool\";\n\n return nameMatch || descMatch || typeMatch || promptMatch || clientMatch;\n });\n }, [query, commands]);\n\n // Handle keyboard navigation\n useEffect(() => {\n if (!visible) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const filtered = getFilteredCommands();\n\n switch (e.key) {\n case \"ArrowDown\":\n e.preventDefault();\n setSelectedIndex(prev => (prev + 1) % Math.max(1, filtered.length));\n break;\n case \"ArrowUp\":\n e.preventDefault();\n setSelectedIndex(prev => prev === 0 ? filtered.length - 1 : prev - 1);\n break;\n case \"Enter\":\n e.preventDefault();\n if (filtered[selectedIndex]) {\n handleCommandSelect(filtered[selectedIndex]);\n }\n break;\n case \"Escape\":\n e.preventDefault();\n if (showArgumentDialog) {\n setShowArgumentDialog(false);\n setSelectedCommand(null);\n setArgumentValues({});\n } 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 } else if (command.type === \"client_tool\") {\n const tool = command.data as ClientTool;\n\n // Check if tool requires input\n if (tool.input_schema?.properties && Object.keys(tool.input_schema.properties).length > 0) {\n setSelectedCommand(command);\n setShowArgumentDialog(true);\n\n // Initialize with default values\n const defaultValues: ArgumentValue = {};\n Object.entries(tool.input_schema.properties).forEach(([key, schema]: [string, any]) => {\n defaultValues[key] = getDefaultValue(schema);\n });\n setArgumentValues(defaultValues);\n\n // Focus first input after dialog shows\n setTimeout(() => {\n const firstInput = argumentInputRefs.current.values().next().value;\n firstInput?.focus();\n }, 50);\n } else {\n // Execute client tool without arguments\n await executeClientTool(command, {});\n }\n }\n };\n\n // Execute a prompt using client pool\n const executePrompt = async (command: Command, args: ArgumentValue) => {\n try {\n setLoading(true);\n const result = await clientPool.getPrompt(command.serverName, 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 client tool\n const executeClientTool = async (command: Command, args: ArgumentValue) => {\n try {\n setLoading(true);\n\n // Coerce values based on schema\n const tool = command.data as ClientTool;\n const coercedArgs: ArgumentValue = {};\n\n if (tool.input_schema?.properties) {\n Object.entries(args).forEach(([key, value]) => {\n const schema = tool.input_schema.properties[key];\n if (schema) {\n coercedArgs[key] = coerceValue(value, schema);\n } else {\n coercedArgs[key] = value;\n }\n });\n } else {\n Object.assign(coercedArgs, args);\n }\n\n // Format as client tool execution request\n const toolUseId = `client_tool_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n\n const res = [\n {\n type: \"client_tool_use\",\n id: toolUseId,\n name: command.name,\n input: coercedArgs,\n server_name: \"Client\",\n }\n ];\n onResult(res);\n onClose();\n } catch (error) {\n console.error(\"Failed to execute client tool:\", error);\n\n // Format error as client tool use and error result\n const toolUseId = `client_tool_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n const errorMessage = error instanceof Error ? error.message : \"Failed to execute client tool\";\n const errorRes = [\n {\n type: \"client_tool_use\",\n id: toolUseId,\n name: command.name,\n input: args,\n server_name: \"Client\",\n },\n {\n type: \"client_tool_result\",\n tool_use_id: toolUseId,\n is_error: true,\n content: [{ type: \"text\", text: errorMessage }],\n },\n ];\n onResult(errorRes);\n onClose();\n } finally {\n setLoading(false);\n }\n };\n\n // Execute a tool using client pool\n const executeTool = async (command: Command, args: ArgumentValue) => {\n try {\n setLoading(true);\n\n // Coerce values based on schema\n const tool = command.data as MCPTool;\n const coercedArgs: ArgumentValue = {};\n\n if (tool.inputSchema?.properties) {\n Object.entries(args).forEach(([key, value]) => {\n const schema = tool.inputSchema.properties[key];\n if (schema) {\n coercedArgs[key] = coerceValue(value, schema);\n } else {\n coercedArgs[key] = value;\n }\n });\n } else {\n Object.assign(coercedArgs, args);\n }\n\n const result = await clientPool.callTool(command.serverName, command.name, coercedArgs);\n\n // Format tool execution as MCP tool use and result blocks (like assistant messages)\n const toolUseId = `tool_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n\n // Extract content if result follows MCP response format (consistent with streaming)\n let resultContent;\n if (result && result.content && Array.isArray(result.content)) {\n // Use the content array directly (consistent with streaming)\n resultContent = result.content;\n } else if (typeof result === \"string\") {\n // Plain string result\n resultContent = [{ type: \"text\", text: result }];\n } else {\n // Other object types - stringify as fallback\n resultContent = [{ type: \"text\", text: JSON.stringify(result, null, 2) }];\n }\n\n const res = [\n {\n type: \"mcp_tool_use\",\n id: toolUseId,\n name: command.name,\n input: coercedArgs,\n server_name: command.serverName,\n },\n {\n type: \"mcp_tool_result\",\n tool_use_id: toolUseId,\n is_error: false,\n content: resultContent,\n },\n ];\n onResult(res);\n onClose();\n } catch (error) {\n console.error(\"Failed to execute tool:\", error);\n\n // Format error as MCP tool use and error result\n const toolUseId = `tool_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;\n const errorMessage = error instanceof Error ? error.message : \"Failed to execute tool\";\n const errorRes = [\n {\n type: \"mcp_tool_use\",\n id: toolUseId,\n name: command.name,\n input: args,\n server_name: command.serverName,\n },\n {\n type: \"mcp_tool_result\",\n tool_use_id: toolUseId,\n is_error: true,\n content: [{ type: \"text\", text: errorMessage }],\n },\n ];\n onResult(errorRes);\n onClose();\n } finally {\n setLoading(false);\n }\n };\n\n // Handle argument submission\n const handleArgumentSubmit = async () => {\n if (!selectedCommand) return;\n\n if (selectedCommand.type === \"prompt\") {\n await executePrompt(selectedCommand, argumentValues);\n } else if (selectedCommand.type === \"tool\") {\n await executeTool(selectedCommand, argumentValues);\n } else if (selectedCommand.type === \"client_tool\") {\n await executeClientTool(selectedCommand, argumentValues);\n }\n\n setShowArgumentDialog(false);\n setSelectedCommand(null);\n setArgumentValues({});\n };\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 xbackgroundColor: \"white\",\n }}\n >\n
\n
\n {selectedCommand.type === \"prompt\"\n ? \n : selectedCommand.type === \"client_tool\"\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 {selectedCommand.type === \"client_tool\" && (selectedCommand.data as ClientTool).input_schema?.properties && (\n
\n {Object.entries((selectedCommand.data as ClientTool).input_schema.properties).map(\n ([key, schema]: [string, any]) => {\n const isRequired = (selectedCommand.data as ClientTool).input_schema.required?.includes(key);\n return (\n
\n \n {key}\n {isRequired && \"*\"}\n {schema.description && (\n - {schema.description}\n )}\n {schema.type && ({schema.type})}\n \n {renderSchemaInput(\n key,\n schema,\n argumentValues[key],\n (value) => setArgumentValues(prev => ({ ...prev, [key]: value })),\n isRequired,\n )}\n
\n );\n },\n )}\n
\n )}\n
\n\n
\n setShowArgumentDialog(false)}\n >\n Cancel\n \n \n {loading ? \"Executing...\" : \"Execute\"}\n \n
\n \n \n )}\n\n {!showArgumentDialog && !loading && !error && filteredCommands.slice(0, 10).map((command, index) => (\n handleCommandSelect(command)}\n onMouseEnter={() => setSelectedIndex(index)}\n >\n
\n \n {command.type === \"prompt\" \n ? \n : command.type === \"client_tool\"\n ? \n : }\n \n /{command.name}\n {command.serverName}\n
\n {command.description && (\n
\n {command.description}\n
\n )}\n {command.type === \"prompt\" && (command.data as MCPPrompt).arguments?.length > 0 && (\n
\n Args: {(command.data as MCPPrompt).arguments!.map(arg =>\n `${arg.name}${arg.required ? \"*\" : \"\"}`\n ).join(\", \")}\n
\n )}\n {command.type === \"tool\" && (command.data as MCPTool).inputSchema?.properties && (\n
\n Input: {Object.keys((command.data as MCPTool).inputSchema.properties).join(\", \")}\n
\n )}\n {command.type === \"client_tool\" && (command.data as ClientTool).input_schema?.properties && (\n
\n Input: {Object.keys((command.data as ClientTool).input_schema.properties).join(\", \")}\n
\n )}\n \n ))}\n \n \n );\n}",[],[265,429,679],"bd6ab73e-4d4d-11f0-8a71-76b3cceeab13","AskUserInput.tsx","bd6ab806-4d4d-11f0-8a71-76b3cceeab13",852,["D",1750365673413],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport interface AskUserInputProps {\n question: string;\n inputType?: \"text\" | \"multiline\" | \"choice\" | \"confirm\";\n choices?: string[];\n placeholder?: string;\n required?: boolean;\n onSubmit: (response: string) => void;\n onCancel?: () => void;\n className?: string;\n}\n\nexport default function AskUserInput({\n question,\n inputType = \"text\",\n choices = [],\n placeholder,\n required = false,\n onSubmit,\n onCancel,\n className = \"\",\n}: AskUserInputProps) {\n const [input, setInput] = useState(\"\");\n const [selectedChoice, setSelectedChoice] = useState(null);\n const inputRef = useRef(null);\n\n // Auto-focus on mount\n useEffect(() => {\n if (inputRef.current && inputType !== \"choice\") {\n inputRef.current.focus();\n }\n }, [inputType]);\n\n const handleSubmit = useCallback(() => {\n let response = \"\";\n \n switch (inputType) {\n case \"text\":\n case \"multiline\":\n response = input.trim();\n break;\n case \"choice\":\n response = selectedChoice || \"\";\n break;\n case \"confirm\":\n response = selectedChoice || \"\";\n break;\n }\n\n if (required && !response) {\n return; // Don't submit if required and empty\n }\n\n onSubmit(response);\n }, [input, selectedChoice, inputType, required, onSubmit]);\n\n const handleCancel = useCallback(() => {\n if (onCancel) {\n onCancel();\n } else {\n onSubmit(\"(No response provided)\");\n }\n }, [onCancel, onSubmit]);\n\n const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n handleSubmit();\n } else if (e.key === \"Escape\") {\n e.preventDefault();\n handleCancel();\n }\n }, [handleSubmit, handleCancel]);\n\n const canSubmit = !required || (\n inputType === \"text\" || inputType === \"multiline\" ? input.trim() : selectedChoice\n );\n\n return (\n
\n
\n \n {question}\n
\n\n
\n {inputType === \"text\" && (\n
\n }\n type=\"text\"\n value={input}\n onChange={(e) => setInput(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder={placeholder || \"Type your response...\"}\n className=\"ask-user-input-field\"\n />\n
\n )}\n\n {inputType === \"multiline\" && (\n
\n }\n value={input}\n onChange={(e) => setInput(e.target.value)}\n onKeyDown={handleKeyDown}\n placeholder={placeholder || \"Type your response...\"}\n className=\"ask-user-textarea-field\"\n rows={3}\n />\n
\n )}\n\n {inputType === \"choice\" && (\n
\n {choices.map((choice, index) => (\n {\n setSelectedChoice(choice);\n // Auto-submit on choice selection\n setTimeout(() => onSubmit(choice), 100);\n }}\n >\n {choice}\n \n ))}\n
\n )}\n\n {inputType === \"confirm\" && (\n
\n {\n setSelectedChoice(\"yes\");\n onSubmit(\"yes\");\n }}\n >\n Yes\n \n {\n setSelectedChoice(\"no\");\n onSubmit(\"no\");\n }}\n >\n No\n \n
\n )}\n\n {(inputType === \"text\" || inputType === \"multiline\") && (\n
\n \n Cancel\n \n \n Submit\n \n
\n )}\n
\n\n
\n {inputType === \"text\" || inputType === \"multiline\" \n ? \"Press Enter to submit, Escape to cancel\"\n : inputType === \"choice\"\n ? \"Click an option to select\"\n : \"Choose an option\"\n }\n
\n
\n );\n}",[],[265,429,688],"68ccb7a6-539f-11f0-963a-f69ea79377d9","App.tsx","4d426996-3cdd-11f0-832c-9e149126039e",1086,["D",1751060457157],59,"/** @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://contextual.parc.land/mcp\",\n authorization_token: \"demo\",\n enabled: true,\n },\n];\n\nconst DEFAULT_SYSTEM_PROMPT = `The assistant MUST Always review existing resources before taking any action.\nIMPORTANT!: The assistant (you) MUST always check system/quick-reference.md file content (use files-get, do not use system-*-files unless specifically directed to), and follow its guidance, before taking _any_ further action.\nQuick reference should never be updated without explicit user consent.\n\nYou are almost certainly being engaged by the creator of the system (client/mcp-server author) when encountering issues, prioritise informing the user so that might fix bugs or direct you how to proceed.\n\nWhen starting a new session (1 or less messages in the chat), you MUST ALWAYS reviewing quick reference and current context, the assistant should NEVER create new contexts unless directed to by the user.\n`;\n\nexport { DEFAULT_SYSTEM_PROMPT };\n\nexport default function App() {\n const [config, setConfig] = useState({\n 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, clientPool, getClientStates, connectedCount } = useMCPClients(\n config.mcpServers,\n );\n\n // Make client pool available globally for tools\n useEffect(() => {\n window.mcpClientPool = clientPool;\n }, [clientPool]);\n\n console.log(`[App] MCP Clients`, connectedCount);\n // Load config from localStorage on mount\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"anthropic_api_key\");\n const savedMcpServers = localStorage.getItem(\"mcp_servers\");\n const savedMessages = localStorage.getItem(\"chat_messages\");\n const savedModel = localStorage.getItem(\"selected_model\");\n const savedSystemPrompt = localStorage.getItem(\"system_prompt\");\n const savedAutoExecuteNextSteps = localStorage.getItem(\"auto_execute_next_steps\");\n\n let mcpServers = savedMcpServers ? JSON.parse(savedMcpServers) : DEFAULT_MCP_SERVERS;\n setConfig({\n anthropicApiKey: savedApiKey || \"\",\n mcpServers: mcpServers,\n selectedModel: savedModel || \"claude-3-5-sonnet-20241022\",\n systemPrompt: savedSystemPrompt || DEFAULT_SYSTEM_PROMPT,\n autoExecuteNextSteps: savedAutoExecuteNextSteps ? JSON.parse(savedAutoExecuteNextSteps) : true,\n });\n\n // Load saved messages\n if (savedMessages) {\n try {\n const parsedMessages = JSON.parse(savedMessages);\n setMessages(parsedMessages);\n } catch (error) {\n console.error(\"Failed to load saved messages:\", error);\n }\n }\n\n // Show settings if no API key is configured\n if (!savedApiKey) {\n setShowSettings(true);\n }\n }, []);\n\n // Save config to localStorage when it changes\n useEffect(() => {\n if (config.anthropicApiKey) {\n localStorage.setItem(\"anthropic_api_key\", config.anthropicApiKey);\n }\n localStorage.setItem(\"mcp_servers\", config.mcpServers?.length ? JSON.stringify(config.mcpServers) : \"\");\n localStorage.setItem(\"selected_model\", config.selectedModel);\n localStorage.setItem(\"system_prompt\", config.systemPrompt);\n localStorage.setItem(\"auto_execute_next_steps\", JSON.stringify(config.autoExecuteNextSteps));\n }, [config]);\n\n // Save messages to localStorage when they change\n useEffect(() => {\n localStorage.setItem(\"chat_messages\", JSON.stringify(messages));\n }, [messages]);\n\n const updateConfig = (newConfig: Partial) => {\n setConfig(prev => ({ ...prev, ...newConfig }));\n };\n\n const updateMCPServer = (serverId: string, updates: Partial) => {\n setConfig(prev => ({\n ...prev,\n mcpServers: prev.mcpServers.map(server => server.id === serverId ? { ...server, ...updates } : server),\n }));\n };\n\n const addMessage = (message: Omit) => {\n setMessages(prev => [...prev, {\n ...message,\n id: crypto.randomUUID(),\n timestamp: Date.now(),\n }]);\n };\n\n const updateLastMessage = (content: string | any[]) => {\n setMessages(prev => {\n if (prev.length === 0) return prev;\n const updated = [...prev];\n updated[updated.length - 1] = { ...updated[updated.length - 1], content };\n return updated;\n });\n };\n\n const deleteMessage = (messageId: string) => {\n setMessages(prev => prev.filter(msg => msg.id !== messageId));\n };\n\n const retryFromMessage = (messageId: string) => {\n const messageIndex = messages.findIndex(msg => msg.id === messageId);\n if (messageIndex === -1) return null;\n\n const message = messages[messageIndex];\n if (message.role !== \"user\") return null;\n\n // Delete all messages after this one (including assistant responses)\n setMessages(prev => prev.slice(0, messageIndex + 1));\n\n // Return the user message content for resubmission\n // If content is an array (MCP blocks), extract text from text blocks\n if (Array.isArray(message.content)) {\n return message.content\n .filter(block => block.type === \"text\")\n .map(block => block.text)\n .join(\"\\n\");\n }\n return message.content;\n };\n\n const clearMessages = () => {\n setMessages([]);\n };\n\n return (\n
\n setShowSettings(true)}\n mcpStatusComponent={{\n component: MCPStatus,\n props: {\n mcpServers: config.mcpServers,\n clientPool,\n onUpdateMCPServer: updateMCPServer,\n },\n }}\n />\n {showSettings && (\n setShowSettings(false)}\n />\n )}\n
\n );\n}",[],[265,429,696],"b1095952-541c-11f0-9238-f69ea79377d9","TestAffordance.tsx","e65f161a-539e-11f0-b513-f69ea79377d9","85b5f9fa-2d74-40b2-bf50-7bf6f431ad8b",1141,["D",1751114265435],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n/**\n * Simple Test Affordance Component\n * Basic component to test the affordance framework\n */\n\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { AffordanceComponent, AffordanceConfig } from \"../../../shared/affordance-types.ts\";\n\nconst TestComponent: React.FC<{ message?: string }> = ({ message = \"Hello from Test Affordance!\" }) => {\n const [clicks, setClicks] = useState(0);\n\n return (\n
\n
\n 🧪 Test Affordance\n
\n \n
\n {message}\n
\n \n setClicks(c => c + 1)}\n style={{\n padding: '0.5rem 1rem',\n background: '#0ea5e9',\n color: 'white',\n border: 'none',\n borderRadius: '6px',\n cursor: 'pointer',\n fontSize: '0.875rem',\n fontWeight: '500'\n }}\n >\n Clicked {clicks} times\n \n
\n );\n};\n\nexport default class TestAffordance implements AffordanceComponent {\n private root: any = null;\n private container: HTMLElement | null = null;\n private message: string = \"Hello from Test Affordance!\";\n private mcpClientPool: any = null;\n\n async mount(container: HTMLElement, config: AffordanceConfig, mcpClientPool?: any): Promise {\n console.log('[TestAffordance] Mounting with config:', config);\n \n this.container = container;\n this.mcpClientPool = mcpClientPool;\n this.message = config.message || config.title || \"Hello from Test Affordance!\";\n\n this.root = createRoot(container);\n this.root.render();\n }\n\n async unmount(): Promise {\n console.log('[TestAffordance] Unmounting');\n \n if (this.root) {\n this.root.unmount();\n this.root = null;\n }\n this.container = null;\n }\n\n getPublicMethods(): Record {\n return {\n getMessage: this.getMessage.bind(this),\n setMessage: this.setMessage.bind(this),\n ping: this.ping.bind(this),\n testMCPConnection: this.testMCPConnection.bind(this)\n };\n }\n\n getMessage(): string {\n return this.message;\n }\n\n setMessage(newMessage: string): void {\n this.message = newMessage;\n if (this.root) {\n this.root.render();\n }\n }\n\n ping(): string {\n return \"pong! Test affordance is working correctly.\";\n }\n\n async testMCPConnection(): Promise {\n if (!this.mcpClientPool) {\n return { error: \"No MCP client pool available\" };\n }\n\n try {\n const clients = this.mcpClientPool.getConnectedClients();\n const toolsResult = await this.mcpClientPool.fetchTools();\n \n return {\n success: true,\n connectedClients: clients.length,\n availableTools: toolsResult.tools?.length || 0,\n message: `MCP connection test successful! ${clients.length} clients, ${toolsResult.tools?.length || 0} tools available.`\n };\n } catch (error) {\n return { \n error: error.message,\n message: `MCP connection test failed: ${error.message}`\n };\n }\n }\n}",[],[265,429,713,705],"affordances","d850a182-541c-11f0-9ddc-f69ea79377d9","StatusDashboard.tsx","96cc3402-539e-11f0-acc2-f69ea79377d9",1144,["D",1751114331333],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n/**\n * Status Dashboard Affordance Component\n * Displays system metrics and status information\n */\n\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { AffordanceComponent, AffordanceConfig } from \"../../../shared/affordance-types.ts\";\n\ninterface StatusItem {\n id: string;\n label: string;\n value: string | number;\n status: 'success' | 'warning' | 'error' | 'info';\n timestamp?: number;\n}\n\ninterface StatusDashboardProps {\n title?: string;\n refreshInterval?: number;\n}\n\nconst StatusDashboard: React.FC void \n}> = ({ \n title = \"Status Dashboard\", \n items = [], \n refreshInterval = 0,\n onRefresh \n}) => {\n const [lastUpdate, setLastUpdate] = useState(Date.now());\n\n useEffect(() => {\n if (refreshInterval > 0 && onRefresh) {\n const interval = setInterval(() => {\n onRefresh();\n setLastUpdate(Date.now());\n }, refreshInterval);\n \n return () => clearInterval(interval);\n }\n }, [refreshInterval, onRefresh]);\n\n const getStatusColor = (status: StatusItem['status']) => {\n switch (status) {\n case 'success': return '#10b981';\n case 'warning': return '#f59e0b';\n case 'error': return '#ef4444';\n case 'info': return '#3b82f6';\n default: return '#6b7280';\n }\n };\n\n const getStatusIcon = (status: StatusItem['status']) => {\n switch (status) {\n case 'success': return '✓';\n case 'warning': return '⚠';\n case 'error': return '✗';\n case 'info': return 'ℹ';\n default: return '○';\n }\n };\n\n return (\n
\n
\n
\n {title}\n
\n \n {refreshInterval > 0 && (\n {\n onRefresh?.();\n setLastUpdate(Date.now());\n }}\n style={{\n padding: '0.25rem 0.5rem',\n border: '1px solid #d1d5db',\n borderRadius: '4px',\n background: '#f9fafb',\n cursor: 'pointer',\n fontSize: '0.75rem'\n }}\n >\n 🔄\n \n )}\n
\n\n
\n {items.length === 0 ? (\n
\n No status items\n
\n ) : (\n items.map(item => (\n \n
\n \n {getStatusIcon(item.status)}\n \n \n {item.label}\n \n
\n \n
\n \n {item.value}\n \n {item.timestamp && (\n \n {new Date(item.timestamp).toLocaleTimeString()}\n \n )}\n
\n
\n ))\n )}\n
\n\n {refreshInterval > 0 && (\n
\n Last updated: {new Date(lastUpdate).toLocaleTimeString()}\n
\n )}\n \n );\n};\n\nexport default class StatusDashboardAffordance implements AffordanceComponent {\n private root: any = null;\n private container: HTMLElement | null = null;\n private items: StatusItem[] = [];\n private props: StatusDashboardProps = {};\n private refreshCallback?: () => void;\n private mcpClientPool: any = null;\n\n async mount(container: HTMLElement, config: AffordanceConfig, mcpClientPool?: any): Promise {\n console.log('[StatusDashboard] Mounting with config:', config);\n \n this.container = container;\n this.mcpClientPool = mcpClientPool;\n this.props = {\n title: config.title || \"Status Dashboard\",\n refreshInterval: config.refreshInterval || 0\n };\n\n // Create React root and render\n this.root = createRoot(container);\n this.render();\n }\n\n async unmount(): Promise {\n console.log('[StatusDashboard] Unmounting');\n \n if (this.root) {\n this.root.unmount();\n this.root = null;\n }\n this.container = null;\n this.refreshCallback = undefined;\n }\n\n getPublicMethods(): Record {\n return {\n addItem: this.addItem.bind(this),\n updateItem: this.updateItem.bind(this),\n removeItem: this.removeItem.bind(this),\n clearItems: this.clearItems.bind(this),\n getItems: this.getItems.bind(this),\n setRefreshCallback: this.setRefreshCallback.bind(this),\n refresh: this.refresh.bind(this),\n addMCPStatus: this.addMCPStatus.bind(this),\n refreshMCPStatus: this.refreshMCPStatus.bind(this)\n };\n }\n\n // Public methods\n addItem(item: Omit): void {\n const newItem: StatusItem = {\n ...item,\n timestamp: Date.now()\n };\n \n // Replace existing item with same ID or add new\n const existingIndex = this.items.findIndex(i => i.id === item.id);\n if (existingIndex >= 0) {\n this.items[existingIndex] = newItem;\n } else {\n this.items.push(newItem);\n }\n \n this.render();\n }\n\n updateItem(id: string, updates: Partial): boolean {\n const index = this.items.findIndex(item => item.id === id);\n if (index >= 0) {\n this.items[index] = {\n ...this.items[index],\n ...updates,\n timestamp: Date.now()\n };\n this.render();\n return true;\n }\n return false;\n }\n\n removeItem(id: string): boolean {\n const initialLength = this.items.length;\n this.items = this.items.filter(item => item.id !== id);\n if (this.items.length !== initialLength) {\n this.render();\n return true;\n }\n return false;\n }\n\n clearItems(): void {\n this.items = [];\n this.render();\n }\n\n getItems(): StatusItem[] {\n return [...this.items];\n }\n\n setRefreshCallback(callback: () => void): void {\n this.refreshCallback = callback;\n }\n\n refresh(): void {\n if (this.refreshCallback) {\n this.refreshCallback();\n }\n this.render();\n }\n\n // MCP integration methods\n async addMCPStatus(): Promise {\n if (!this.mcpClientPool) {\n this.addItem({\n id: 'mcp-status',\n label: 'MCP Connection',\n value: 'Not Available',\n status: 'error'\n });\n return \"MCP client pool not available\";\n }\n\n try {\n const clients = this.mcpClientPool.getConnectedClients();\n const toolsResult = await this.mcpClientPool.fetchTools();\n \n this.addItem({\n id: 'mcp-clients',\n label: 'MCP Clients',\n value: clients.length,\n status: clients.length > 0 ? 'success' : 'warning'\n });\n\n this.addItem({\n id: 'mcp-tools',\n label: 'Available Tools',\n value: toolsResult.tools?.length || 0,\n status: toolsResult.success ? 'success' : 'error'\n });\n\n return `Added MCP status: ${clients.length} clients, ${toolsResult.tools?.length || 0} tools`;\n } catch (error) {\n this.addItem({\n id: 'mcp-error',\n label: 'MCP Error',\n value: error.message,\n status: 'error'\n });\n return `Error adding MCP status: ${error.message}`;\n }\n }\n\n async refreshMCPStatus(): Promise {\n // Remove existing MCP status items\n this.removeItem('mcp-clients');\n this.removeItem('mcp-tools');\n this.removeItem('mcp-status');\n this.removeItem('mcp-error');\n \n // Add fresh MCP status\n return await this.addMCPStatus();\n }\n\n private render(): void {\n if (this.root && this.container) {\n this.root.render(\n \n );\n }\n }\n}",[],[265,429,713,715],"ea67f582-541c-11f0-ae98-f69ea79377d9","NotificationCenter.tsx","b115413c-539e-11f0-8509-f69ea79377d9",1145,["D",1751114361685],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n/**\n * Notification Center Affordance Component\n * Manages and displays notifications\n */\n\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { AffordanceComponent, AffordanceConfig } from \"../../../shared/affordance-types.ts\";\n\ninterface Notification {\n id: string;\n title: string;\n message: string;\n type: 'info' | 'success' | 'warning' | 'error';\n timestamp: number;\n autoClose?: boolean;\n duration?: number;\n}\n\ninterface NotificationCenterProps {\n maxNotifications?: number;\n defaultDuration?: number;\n}\n\nconst NotificationCenter: React.FC void,\n onClearAll: () => void\n}> = ({ \n notifications = [], \n maxNotifications = 5,\n onDismiss,\n onClearAll\n}) => {\n const getTypeColor = (type: Notification['type']) => {\n switch (type) {\n case 'success': return '#10b981';\n case 'warning': return '#f59e0b';\n case 'error': return '#ef4444';\n case 'info': return '#3b82f6';\n default: return '#6b7280';\n }\n };\n\n const getTypeIcon = (type: Notification['type']) => {\n switch (type) {\n case 'success': return '✓';\n case 'warning': return '⚠';\n case 'error': return '✗';\n case 'info': return 'ℹ';\n default: return '○';\n }\n };\n\n return (\n
\n
\n
\n Notifications ({notifications.length})\n
\n \n {notifications.length > 0 && (\n \n Clear All\n \n )}\n
\n\n
\n {notifications.length === 0 ? (\n
\n No notifications\n
\n ) : (\n notifications.slice(0, maxNotifications).map(notification => (\n \n onDismiss(notification.id)}\n style={{\n position: 'absolute',\n top: '0.5rem',\n right: '0.5rem',\n width: '1.25rem',\n height: '1.25rem',\n border: 'none',\n background: 'rgba(0, 0, 0, 0.1)',\n borderRadius: '50%',\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: '0.75rem',\n color: 'rgba(0, 0, 0, 0.6)'\n }}\n >\n ×\n \n\n
\n \n {getTypeIcon(notification.type)}\n \n \n
\n
\n {notification.title}\n
\n \n
\n {notification.message}\n
\n \n
\n {new Date(notification.timestamp).toLocaleString()}\n
\n
\n
\n
\n ))\n )}\n
\n \n );\n};\n\nexport default class NotificationCenterAffordance implements AffordanceComponent {\n private root: any = null;\n private container: HTMLElement | null = null;\n private notifications: Notification[] = [];\n private props: NotificationCenterProps = {};\n private autoCloseTimeouts = new Map();\n private mcpClientPool: any = null;\n\n async mount(container: HTMLElement, config: AffordanceConfig, mcpClientPool?: any): Promise {\n console.log('[NotificationCenter] Mounting with config:', config);\n \n this.container = container;\n this.mcpClientPool = mcpClientPool;\n this.props = {\n maxNotifications: config.maxNotifications || 5,\n defaultDuration: config.defaultDuration || 5000\n };\n\n // Create React root and render\n this.root = createRoot(container);\n this.render();\n }\n\n async unmount(): Promise {\n console.log('[NotificationCenter] Unmounting');\n \n // Clear all timeouts\n this.autoCloseTimeouts.forEach(timeout => clearTimeout(timeout));\n this.autoCloseTimeouts.clear();\n \n if (this.root) {\n this.root.unmount();\n this.root = null;\n }\n this.container = null;\n }\n\n getPublicMethods(): Record {\n return {\n addNotification: this.addNotification.bind(this),\n removeNotification: this.removeNotification.bind(this),\n clearAll: this.clearAll.bind(this),\n getNotifications: this.getNotifications.bind(this),\n getCount: this.getCount.bind(this)\n };\n }\n\n // Public methods\n addNotification(notification: Omit): string {\n const id = `notification-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;\n const newNotification: Notification = {\n ...notification,\n id,\n timestamp: Date.now()\n };\n\n this.notifications.unshift(newNotification);\n \n // Set up auto-close if enabled\n if (notification.autoClose !== false) {\n const duration = notification.duration || this.props.defaultDuration || 5000;\n const timeout = setTimeout(() => {\n this.removeNotification(id);\n }, duration);\n this.autoCloseTimeouts.set(id, timeout);\n }\n\n this.render();\n return id;\n }\n\n removeNotification(id: string): boolean {\n const initialLength = this.notifications.length;\n this.notifications = this.notifications.filter(n => n.id !== id);\n \n // Clear timeout if exists\n const timeout = this.autoCloseTimeouts.get(id);\n if (timeout) {\n clearTimeout(timeout);\n this.autoCloseTimeouts.delete(id);\n }\n \n if (this.notifications.length !== initialLength) {\n this.render();\n return true;\n }\n return false;\n }\n\n clearAll(): void {\n // Clear all timeouts\n this.autoCloseTimeouts.forEach(timeout => clearTimeout(timeout));\n this.autoCloseTimeouts.clear();\n \n this.notifications = [];\n this.render();\n }\n\n getNotifications(): Notification[] {\n return [...this.notifications];\n }\n\n getCount(): number {\n return this.notifications.length;\n }\n\n private render(): void {\n if (this.root && this.container) {\n this.root.render(\n \n );\n }\n }\n}",[],[265,429,713,723],"9df5af32-541c-11f0-a7f6-f69ea79377d9","CounterAffordance.tsx","7f1b79ee-539e-11f0-8744-f69ea79377d9",1139,["D",1751114233432],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n/**\n * Example Counter Affordance Component\n * Demonstrates the basic affordance interface\n */\n\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { AffordanceComponent, AffordanceConfig } from \"../../../shared/affordance-types.ts\";\n\ninterface CounterProps {\n initialValue?: number;\n step?: number;\n label?: string;\n}\n\nconst Counter: React.FC = ({ \n initialValue = 0, \n step = 1, \n label = \"Counter\" \n}) => {\n const [count, setCount] = useState(initialValue);\n\n return (\n
\n
\n {label}\n
\n \n
\n {count}\n
\n \n
\n setCount(c => c - step)}\n style={{\n padding: '0.5rem 1rem',\n border: '1px solid #d1d5db',\n borderRadius: '6px',\n background: '#f9fafb',\n cursor: 'pointer',\n fontSize: '0.875rem',\n fontWeight: '500'\n }}\n >\n -{step}\n \n \n setCount(initialValue)}\n style={{\n padding: '0.5rem 1rem',\n border: '1px solid #d1d5db',\n borderRadius: '6px',\n background: '#f9fafb',\n cursor: 'pointer',\n fontSize: '0.875rem',\n fontWeight: '500'\n }}\n >\n Reset\n \n \n setCount(c => c + step)}\n style={{\n padding: '0.5rem 1rem',\n border: '1px solid #2563eb',\n borderRadius: '6px',\n background: '#2563eb',\n color: 'white',\n cursor: 'pointer',\n fontSize: '0.875rem',\n fontWeight: '500'\n }}\n >\n +{step}\n \n
\n
\n );\n};\n\nexport default class CounterAffordance implements AffordanceComponent {\n private root: any = null;\n private container: HTMLElement | null = null;\n private currentCount = 0;\n private props: CounterProps = {};\n private mcpClientPool: any = null;\n\n async mount(container: HTMLElement, config: AffordanceConfig, mcpClientPool?: any): Promise {\n console.log('[CounterAffordance] Mounting with config:', config);\n \n this.container = container;\n this.mcpClientPool = mcpClientPool;\n this.props = {\n initialValue: config.initialValue || 0,\n step: config.step || 1,\n label: config.label || config.title || \"Counter\"\n };\n \n this.currentCount = this.props.initialValue || 0;\n\n // Create React root and render\n this.root = createRoot(container);\n this.root.render();\n }\n\n async unmount(): Promise {\n console.log('[CounterAffordance] Unmounting');\n \n if (this.root) {\n this.root.unmount();\n this.root = null;\n }\n this.container = null;\n }\n\n getPublicMethods(): Record {\n return {\n getValue: this.getValue.bind(this),\n setValue: this.setValue.bind(this),\n increment: this.increment.bind(this),\n decrement: this.decrement.bind(this),\n reset: this.reset.bind(this),\n saveToMCP: this.saveToMCP.bind(this),\n loadFromMCP: this.loadFromMCP.bind(this),\n getMCPTools: this.getMCPTools.bind(this)\n };\n }\n\n // Public methods that can be called via call_affordance_method\n getValue(): number {\n return this.currentCount;\n }\n\n setValue(value: number): void {\n this.currentCount = value;\n this.forceUpdate();\n }\n\n increment(step?: number): number {\n this.currentCount += step || this.props.step || 1;\n this.forceUpdate();\n return this.currentCount;\n }\n\n decrement(step?: number): number {\n this.currentCount -= step || this.props.step || 1;\n this.forceUpdate();\n return this.currentCount;\n }\n\n reset(): number {\n this.currentCount = this.props.initialValue || 0;\n this.forceUpdate();\n return this.currentCount;\n }\n\n // MCP integration methods - demonstrate how affordances can use MCP tools\n async saveToMCP(key?: string): Promise {\n if (!this.mcpClientPool) {\n return \"Error: No MCP client pool available\";\n }\n\n try {\n const client = this.mcpClientPool.getConnectedClients()[0];\n if (!client) {\n return \"Error: No MCP client connected\";\n }\n\n const saveKey = key || `counter-${Date.now()}`;\n const data = {\n value: this.currentCount,\n timestamp: Date.now(),\n props: this.props\n };\n\n const result = await client.callTool(\"files-set\", { \n key: saveKey, \n content: JSON.stringify(data, null, 2) \n });\n \n return `Counter saved to MCP with key: ${saveKey}`;\n } catch (error) {\n return `Error saving to MCP: ${error.message}`;\n }\n }\n\n async loadFromMCP(key: string): Promise {\n if (!this.mcpClientPool) {\n return \"Error: No MCP client pool available\";\n }\n\n try {\n const client = this.mcpClientPool.getConnectedClients()[0];\n if (!client) {\n return \"Error: No MCP client connected\";\n }\n\n const result = await client.callTool(\"files-get\", { key });\n \n let content = \"\";\n if (result.content && Array.isArray(result.content) && result.content[0]?.text) {\n content = result.content[0].text;\n } else if (typeof result === \"string\") {\n content = result;\n }\n\n if (content) {\n const data = JSON.parse(content);\n this.setValue(data.value || 0);\n return `Counter loaded from MCP key: ${key}, value: ${data.value}`;\n }\n \n return \"Error: No content found in MCP file\";\n } catch (error) {\n return `Error loading from MCP: ${error.message}`;\n }\n }\n\n async getMCPTools(): Promise {\n if (!this.mcpClientPool) {\n return { error: \"No MCP client pool available\" };\n }\n\n try {\n const result = await this.mcpClientPool.fetchTools();\n return {\n success: result.success,\n toolCount: result.tools?.length || 0,\n tools: result.tools?.map(t => ({ name: t.name, description: t.description })) || []\n };\n } catch (error) {\n return { error: error.message };\n }\n }\n\n private forceUpdate(): void {\n if (this.root && this.container) {\n // Re-render with updated count\n const updatedProps = { ...this.props };\n this.root.render();\n }\n }\n}",[],[265,429,713,731],"7f1b946a-539e-11f0-8744-f69ea79377d9",1074,["D",1751060065084],[291,292,293,294],[265,429,713],"4d427e7c-3cdd-11f0-832c-9e149126039e",5,["D",1748558163004],[290,295,296,297,298,299,300,301,302,303,304],[265,429],["D",1748558112658],[289,305,308,322,323,324],[265],"4d257da2-40c7-11f0-8560-76b3cceeab13","index.ts",268,["D",1748988518534],13,"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;",[],[271,752],["D",1748558228747],[287],[271],["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":799,"_800":801,"_802":803,"_804":25,"_805":25,"_806":25,"_807":59,"_808":-5,"_809":-7,"_810":-7,"_811":63,"_812":25,"_813":25,"_814":-5,"_815":25,"_816":25,"_817":25,"_818":-5},"ENV",{"_770":771,"_772":773,"_774":87,"_775":776,"_777":778,"_779":780,"_781":782,"_783":784,"_785":786,"_787":788,"_789":790,"_791":792,"_793":794,"_795":796,"_797":798},"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 · v1171