chat.parc.land

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_572":573,"_574":575},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":105,"_13":14,"_106":-5,"_11":107,"_108":109,"_110":111,"_112":113,"_114":115,"_20":-5,"_116":-5,"_117":-5,"_118":25,"_119":120,"_121":58,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",954,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":20,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":33,"_34":20,"_35":36},"deleted",false,"deletedHere","path","frontend/style.css","latestPath","fileId","42e137de-3cdd-11f0-898f-9e149126039e","name","style.css","fileType","content","/* ═══════════════════════════════════════════════════════════════════════════════\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-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 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: hidden;\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 overflow-y: auto;\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) var(--space-sm);\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 padding: var(--space-xs) var(--space-sm);\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/* ─────────────────────────────────────────────────────────────────────────────── \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);\n border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;\n max-width: 70rem;\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 margin-top: var(--space-md);\n}\n\n.mcp-details + .mcp-details {\n margin-top: 0;\n margin-bottom: var(--space-md);\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: var(--space-md) var(--space-lg);\n background: var(--color-gray-100);\n border-bottom: 1px solid var(--color-gray-200);\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: 100%;\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: 50vh;\n overflow-y: auto;\n box-shadow: var(--shadow-2xl);\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}\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\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: 16px;\n}\n\n.dialog-description {\n margin: 0 0 16px 0;\n color: #666;\n font-size: 14px;\n}\n\n.dialog-arguments {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.argument-field {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.argument-field label {\n font-size: 14px;\n font-weight: 500;\n color: #333;\n}\n\n.argument-description {\n font-weight: normal;\n color: #666;\n font-size: 13px;\n}\n\n.argument-field input {\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 14px;\n transition: border-color 0.2s;\n}\n\n.argument-field input:focus {\n outline: none;\n border-color: #1976d2;\n}\n\n.dialog-footer {\n display: flex;\n gap: 8px;\n justify-content: flex-end;\n padding: 16px;\n border-top: 1px solid #e0e0e0;\n}\n\n.dialog-button {\n padding: 8px 16px;\n border: none;\n border-radius: 4px;\n font-size: 14px;\n cursor: pointer;\n transition: background-color 0.2s;\n}\n\n.dialog-button-cancel {\n background: #f0f0f0;\n color: #666;\n}\n\n.dialog-button-cancel:hover {\n background: #e0e0e0;\n}\n\n.dialog-button-submit {\n background: #1976d2;\n color: white;\n}\n\n.dialog-button-submit:hover:not(:disabled) {\n background: #1565c0;\n}\n\n.dialog-button-submit:disabled {\n opacity: 0.6;\n cursor: not-allowed;\n}\n\n/* Enhanced JSON Schema Input Styles */\n.argument-field textarea,\n.argument-field input,\n.argument-field select {\n padding: 8px 12px;\n border: 1px solid #ddd;\n border-radius: 4px;\n font-size: 14px;\n transition: border-color 0.2s;\n font-family: inherit;\n}\n\n.argument-field textarea:focus,\n.argument-field input:focus,\n.argument-field select:focus {\n outline: none;\n border-color: #1976d2;\n box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.1);\n}\n\n.argument-field select {\n cursor: pointer;\n background-color: white;\n background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n background-position: right 8px center;\n background-repeat: no-repeat;\n background-size: 16px 12px;\n padding-right: 32px;\n}\n\n.checkbox-label {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n padding: 8px 0;\n}\n\n.checkbox-label input[type=\"checkbox\"] {\n width: 16px;\n height: 16px;\n margin: 0;\n cursor: pointer;\n}\n\n.checkbox-text {\n font-size: 14px;\n color: #666;\n user-select: none;\n}\n\n.argument-type {\n font-weight: normal;\n color: #999;\n font-size: 12px;\n font-style: italic;\n}\n\n/* Validation styling (non-intrusive) */\n.argument-field input:invalid,\n.argument-field textarea:invalid,\n.argument-field select:invalid {\n border-color: #fbbf24;\n background-color: #fefbf3;\n}\n\n.argument-field input[type=\"number\"] {\n text-align: right;\n}\n\n.argument-field textarea {\n resize: vertical;\n min-height: 60px;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 13px;\n line-height: 1.4;\n}\n\n.argument-field input[type=\"date\"],\n.argument-field input[type=\"datetime-local\"],\n.argument-field input[type=\"email\"],\n.argument-field input[type=\"url\"] {\n font-family: inherit;\n}\n\n/* ─────────────────────────────────────────────────────────────────────────────── \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 🎨 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-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 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: hidden;\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 overflow-y: auto;\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) var(--space-sm);\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 padding: var(--space-xs) var(--space-sm);\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/* ─────────────────────────────────────────────────────────────────────────────── \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);\n border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;\n max-width: 70rem;\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 margin-top: var(--space-md);\n}\n\n.mcp-details + .mcp-details {\n margin-top: 0;\n margin-bottom: var(--space-md);\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: var(--space-md) var(--space-lg);\n background: var(--color-gray-100);\n border-bottom: 1px solid var(--color-gray-200);\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: 100%;\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: 50vh;\n overflow-y: auto;\n box-shadow: var(--shadow-2xl);\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}\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\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}","createdAt",["D",1750433482978],"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",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"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",{"_43":44,"_32":45,"_38":568,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":58,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":569,"_80":570,"_82":571,"_84":25},"tree",[237,239,263,265,272,273,274,275,276,277,278,279],"files",[237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279],"counts",{"_227":62,"_228":170,"_229":170,"_230":231,"_232":233},"contents",[127,128,129,130,131,132,133,134,135,136,137,138],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{"_56":126},"chat.parc.land",{"_43":221,"_32":222,"_30":223,"_142":-5,"_41":42,"_40":224,"_144":58,"_38":225,"_13":62,"_34":207,"_35":-5,"_24":25,"_149":-5,"_27":226},{"_43":215,"_32":216,"_30":217,"_142":-5,"_41":42,"_40":218,"_144":58,"_38":219,"_13":62,"_34":207,"_35":-5,"_24":25,"_149":-5,"_27":220},{"_43":209,"_32":210,"_30":211,"_142":-5,"_41":42,"_40":212,"_144":58,"_38":213,"_13":62,"_34":207,"_35":-5,"_24":25,"_149":-5,"_27":214},{"_43":202,"_32":203,"_30":204,"_142":-5,"_41":42,"_40":205,"_144":58,"_38":206,"_13":62,"_34":207,"_35":-5,"_24":25,"_149":-5,"_27":208},{"_43":195,"_32":196,"_30":197,"_142":-5,"_41":42,"_40":198,"_144":25,"_38":199,"_13":62,"_34":20,"_35":200,"_24":25,"_149":-5,"_27":201},{"_43":188,"_32":189,"_30":190,"_142":-5,"_41":42,"_40":191,"_144":25,"_38":192,"_13":62,"_34":20,"_35":193,"_24":25,"_149":-5,"_27":194},{"_43":181,"_32":182,"_30":183,"_142":-5,"_41":42,"_40":184,"_144":25,"_38":185,"_13":62,"_34":20,"_35":186,"_24":25,"_149":-5,"_27":187},{"_43":173,"_32":174,"_30":175,"_142":-5,"_41":42,"_40":176,"_144":25,"_38":177,"_13":178,"_34":20,"_35":179,"_24":25,"_149":-5,"_27":180},{"_43":165,"_32":166,"_30":167,"_142":-5,"_41":42,"_40":168,"_144":25,"_38":169,"_13":170,"_34":20,"_35":171,"_24":25,"_149":-5,"_27":172},{"_43":158,"_32":159,"_30":160,"_142":-5,"_41":42,"_40":161,"_144":58,"_38":162,"_13":62,"_34":20,"_35":163,"_24":25,"_149":-5,"_27":164},{"_43":151,"_32":152,"_30":153,"_142":-5,"_41":42,"_40":154,"_144":58,"_38":155,"_13":62,"_34":20,"_35":156,"_24":25,"_149":-5,"_27":157},{"_43":139,"_32":140,"_30":141,"_142":-5,"_41":42,"_40":143,"_144":58,"_38":145,"_13":146,"_34":147,"_35":148,"_24":25,"_149":-5,"_27":150},"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",[140],"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}",[152],"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.",[159],"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",[166],"7de252be-4dd1-11f0-aaaa-76b3cceeab13","README.md","2bc4d286-3cdd-11f0-9e50-9e149126039e",938,["D",1750422260388],47,"# 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)\n- **💬 Inline User Input** - Sophisticated ask_user tool with text, multiline, choice, and confirm inputs\n- **🧮 Built-in Calculator** - Mathematical expression evaluation tool\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 and prompts 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│ ├── hooks/\n│ │ └── useAnthropicStream.tsx # Streaming chat hook\n│ ├── utils/\n│ │ ├── mcpTesting.ts # Frontend MCP server testing\n│ │ └── mcpPrompts.ts # Frontend MCP prompt fetching\n│ └── style.css # Custom styles with streaming animations\n├── shared/\n│ └── types.ts # Shared TypeScript types for streaming\n├── 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## 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",[174],"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.",[182],"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",[189],"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.",[196],"a661e74c-4ce4-11f0-9d77-76b3cceeab13","test","a47ce28f-7f0f-482b-8862-627aa00ecfdd",833,["D",1750320537587],"directory",[203],"d0d818ac-3d49-11f0-afd9-76b3cceeab13","shared","d2bf992b-f210-4f83-bea3-aec8e3e2caaa",55,["D",1748604769414],[210],"2f3fab3e-3cdd-11f0-acd6-9e149126039e","frontend","43895adc-f88f-4b64-90b5-2b707f50c067",2,["D",1748558112658],[216],"7471d038-3cdd-11f0-8caa-9e149126039e","backend","b0b9068e-33c0-4fad-8bcf-5a3136836657",9,["D",1748558228747],[222],"pulls","branches","forks","envVars",{"_234":62,"_236":62},"connections",{"_234":62,"_235":62},"count","unfilledCount","emptyCount",{"_43":221,"_32":222,"_30":223,"_142":-5,"_41":42,"_40":224,"_144":58,"_38":565,"_13":62,"_34":207,"_35":-5,"_24":25,"_149":-5,"_281":566,"_27":567},{"_43":557,"_32":558,"_30":56,"_142":223,"_41":42,"_40":559,"_144":58,"_38":560,"_13":561,"_34":147,"_35":562,"_24":25,"_149":-5,"_281":563,"_27":564},{"_43":215,"_32":216,"_30":217,"_142":-5,"_41":42,"_40":218,"_144":58,"_38":554,"_13":62,"_34":207,"_35":-5,"_24":25,"_149":-5,"_281":555,"_27":556},{"_43":549,"_32":343,"_30":462,"_142":217,"_41":42,"_40":550,"_144":58,"_38":551,"_13":62,"_34":207,"_35":-5,"_24":25,"_149":-5,"_281":552,"_27":553},{"_43":540,"_32":541,"_30":542,"_142":462,"_41":42,"_40":543,"_144":25,"_38":544,"_13":545,"_34":310,"_35":546,"_24":25,"_149":-5,"_281":547,"_27":548},{"_43":532,"_32":533,"_30":534,"_142":462,"_41":42,"_40":535,"_144":58,"_38":536,"_13":62,"_34":310,"_35":537,"_24":25,"_149":-5,"_281":538,"_27":539},{"_43":523,"_32":524,"_30":525,"_142":462,"_41":42,"_40":526,"_144":25,"_38":527,"_13":528,"_34":310,"_35":529,"_24":25,"_149":-5,"_281":530,"_27":531},{"_43":514,"_32":515,"_30":516,"_142":462,"_41":42,"_40":517,"_144":25,"_38":518,"_13":519,"_34":310,"_35":520,"_24":25,"_149":-5,"_281":521,"_27":522},{"_43":505,"_32":506,"_30":507,"_142":462,"_41":42,"_40":508,"_144":25,"_38":509,"_13":510,"_34":310,"_35":511,"_24":25,"_149":-5,"_281":512,"_27":513},{"_43":496,"_32":497,"_30":498,"_142":462,"_41":42,"_40":499,"_144":25,"_38":500,"_13":501,"_34":310,"_35":502,"_24":25,"_149":-5,"_281":503,"_27":504},{"_43":487,"_32":488,"_30":489,"_142":462,"_41":42,"_40":490,"_144":58,"_38":491,"_13":492,"_34":310,"_35":493,"_24":25,"_149":-5,"_281":494,"_27":495},{"_43":478,"_32":479,"_30":480,"_142":462,"_41":42,"_40":481,"_144":58,"_38":482,"_13":483,"_34":310,"_35":484,"_24":25,"_149":-5,"_281":485,"_27":486},{"_43":469,"_32":470,"_30":471,"_142":462,"_41":42,"_40":472,"_144":58,"_38":473,"_13":474,"_34":310,"_35":475,"_24":25,"_149":-5,"_281":476,"_27":477},{"_43":459,"_32":460,"_30":461,"_142":462,"_41":42,"_40":463,"_144":25,"_38":464,"_13":465,"_34":310,"_35":466,"_24":25,"_149":-5,"_281":467,"_27":468},{"_43":454,"_32":444,"_30":437,"_142":217,"_41":42,"_40":455,"_144":58,"_38":456,"_13":218,"_34":207,"_35":-5,"_24":25,"_149":-5,"_281":457,"_27":458},{"_43":445,"_32":446,"_30":447,"_142":437,"_41":42,"_40":448,"_144":25,"_38":449,"_13":450,"_34":310,"_35":451,"_24":25,"_149":-5,"_281":452,"_27":453},{"_43":434,"_32":435,"_30":436,"_142":437,"_41":42,"_40":438,"_144":25,"_38":439,"_13":440,"_34":310,"_35":441,"_24":25,"_149":-5,"_281":442,"_27":443},{"_43":429,"_32":330,"_30":388,"_142":217,"_41":42,"_40":430,"_144":58,"_38":431,"_13":62,"_34":207,"_35":-5,"_24":25,"_149":-5,"_281":432,"_27":433},{"_43":420,"_32":421,"_30":422,"_142":388,"_41":42,"_40":423,"_144":25,"_38":424,"_13":425,"_34":310,"_35":426,"_24":25,"_149":-5,"_281":427,"_27":428},{"_43":412,"_32":413,"_30":414,"_142":388,"_41":42,"_40":415,"_144":58,"_38":416,"_13":62,"_34":310,"_35":417,"_24":25,"_149":-5,"_281":418,"_27":419},{"_43":403,"_32":404,"_30":405,"_142":388,"_41":42,"_40":406,"_144":58,"_38":407,"_13":408,"_34":310,"_35":409,"_24":25,"_149":-5,"_281":410,"_27":411},{"_43":394,"_32":395,"_30":396,"_142":388,"_41":42,"_40":397,"_144":58,"_38":398,"_13":399,"_34":310,"_35":400,"_24":25,"_149":-5,"_281":401,"_27":402},{"_43":385,"_32":386,"_30":387,"_142":388,"_41":42,"_40":389,"_144":58,"_38":390,"_13":170,"_34":310,"_35":391,"_24":25,"_149":-5,"_281":392,"_27":393},{"_43":376,"_32":377,"_30":378,"_142":217,"_41":42,"_40":379,"_144":25,"_38":380,"_13":381,"_34":20,"_35":382,"_24":25,"_149":-5,"_281":383,"_27":384},{"_43":368,"_32":369,"_30":370,"_142":217,"_41":42,"_40":371,"_144":25,"_38":372,"_13":62,"_34":310,"_35":373,"_24":25,"_149":-5,"_281":374,"_27":375},{"_43":363,"_32":33,"_30":31,"_142":217,"_41":42,"_40":14,"_144":25,"_38":364,"_13":365,"_34":20,"_35":37,"_24":25,"_149":-5,"_281":366,"_27":367},{"_43":209,"_32":210,"_30":211,"_142":-5,"_41":42,"_40":212,"_144":58,"_38":360,"_13":62,"_34":207,"_35":-5,"_24":25,"_149":-5,"_281":361,"_27":362},{"_43":351,"_32":352,"_30":353,"_142":211,"_41":42,"_40":354,"_144":25,"_38":355,"_13":356,"_34":310,"_35":357,"_24":25,"_149":-5,"_281":358,"_27":359},{"_43":202,"_32":203,"_30":204,"_142":-5,"_41":42,"_40":205,"_144":58,"_38":348,"_13":62,"_34":207,"_35":-5,"_24":25,"_149":-5,"_281":349,"_27":350},{"_43":344,"_32":343,"_30":338,"_142":204,"_41":42,"_40":205,"_144":58,"_38":345,"_13":62,"_34":207,"_35":-5,"_24":25,"_149":-5,"_281":346,"_27":347},{"_43":335,"_32":336,"_30":337,"_142":338,"_41":42,"_40":205,"_144":58,"_38":339,"_13":62,"_34":310,"_35":340,"_24":25,"_149":-5,"_281":341,"_27":342},{"_43":331,"_32":330,"_30":324,"_142":204,"_41":42,"_40":325,"_144":58,"_38":332,"_13":62,"_34":207,"_35":-5,"_24":25,"_149":-5,"_281":333,"_27":334},{"_43":321,"_32":322,"_30":323,"_142":324,"_41":42,"_40":325,"_144":58,"_38":326,"_13":62,"_34":310,"_35":327,"_24":25,"_149":-5,"_281":328,"_27":329},{"_43":314,"_32":174,"_30":315,"_142":204,"_41":42,"_40":316,"_144":58,"_38":317,"_13":62,"_34":20,"_35":318,"_24":25,"_149":-5,"_281":319,"_27":320},{"_43":305,"_32":306,"_30":307,"_142":204,"_41":42,"_40":308,"_144":58,"_38":309,"_13":62,"_34":310,"_35":311,"_24":25,"_149":-5,"_281":312,"_27":313},{"_43":195,"_32":196,"_30":197,"_142":-5,"_41":42,"_40":198,"_144":25,"_38":302,"_13":62,"_34":20,"_35":200,"_24":25,"_149":-5,"_281":303,"_27":304},{"_43":188,"_32":189,"_30":190,"_142":-5,"_41":42,"_40":191,"_144":25,"_38":299,"_13":62,"_34":20,"_35":193,"_24":25,"_149":-5,"_281":300,"_27":301},{"_43":181,"_32":182,"_30":183,"_142":-5,"_41":42,"_40":184,"_144":25,"_38":296,"_13":62,"_34":20,"_35":186,"_24":25,"_149":-5,"_281":297,"_27":298},{"_43":173,"_32":174,"_30":175,"_142":-5,"_41":42,"_40":176,"_144":25,"_38":293,"_13":178,"_34":20,"_35":179,"_24":25,"_149":-5,"_281":294,"_27":295},{"_43":165,"_32":166,"_30":167,"_142":-5,"_41":42,"_40":168,"_144":25,"_38":290,"_13":170,"_34":20,"_35":171,"_24":25,"_149":-5,"_281":291,"_27":292},{"_43":158,"_32":159,"_30":160,"_142":-5,"_41":42,"_40":161,"_144":58,"_38":287,"_13":62,"_34":20,"_35":163,"_24":25,"_149":-5,"_281":288,"_27":289},{"_43":151,"_32":152,"_30":153,"_142":-5,"_41":42,"_40":154,"_144":58,"_38":284,"_13":62,"_34":20,"_35":156,"_24":25,"_149":-5,"_281":285,"_27":286},{"_43":139,"_32":140,"_30":141,"_142":-5,"_41":42,"_40":143,"_144":58,"_38":280,"_13":146,"_34":147,"_35":148,"_24":25,"_149":-5,"_281":282,"_27":283},["D",1750321023732],"children",[],[140],["D",1750320481457],[],[152],["D",1750320686276],[],[159],["D",1750181569036],[],[166],["D",1750422260388],[],[174],["D",1750112788444],[],[182],["D",1750112885258],[],[189],["D",1750112972278],[],[196],"c9996aaa-4ce4-11f0-9811-76b3cceeab13","setup.ts","c9996be0-4ce4-11f0-9811-76b3cceeab13",835,["D",1750320596692],"script","/**\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!\");",[],[203,306],"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",[],[203,174],"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}",[],[203,330,322],"utils","bdb9a5e2-4ce4-11f0-9c9c-76b3cceeab13",["D",1750320576768],[269],[203,330],"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});",[],[203,343,336],"components","a661e9b8-4ce4-11f0-9d77-76b3cceeab13",["D",1750320537587],[267],[203,343],["D",1750320537587],[266,268,270,271],[203],"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}",[],[210,352],["D",1748604769414],[264],[210],"9f11c946-4deb-11f0-9eca-76b3cceeab13",["D",1750433482978],178,[],[216,33],"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();",[],[216,369],"14fbd9b6-4de8-11f0-ad13-76b3cceeab13","index.html","2f3fa440-3cdd-11f0-acd6-9e149126039e",946,["D",1750431962819],10,"\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",[],[216,377],"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}",[],[216,330,386],"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}",[],[216,330,395],"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}",[],[216,330,404],"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}",[],[216,330,413],"3d4a4d78-4b84-11f0-903c-76b3cceeab13","MCPClient.ts","a7962afe-4327-11f0-b818-76b3cceeab13",769,["D",1750169178415],17,"/**\n * Comprehensive MCP (Model Context Protocol) Client for Browser\n * Supports multiple transport mechanisms (HTTP, SSE, WebSocket)\n */\nimport type { MCPPrompt, MCPTool } from \"../../shared/types.ts\";\n\n// Type definitions for MCP protocol\ninterface JsonRpcRequest {\n jsonrpc: \"2.0\";\n id: string | number;\n method: string;\n params?: any;\n}\n\ninterface JsonRpcResponse {\n jsonrpc: \"2.0\";\n id: string | number;\n result?: any;\n error?: JsonRpcError;\n}\n\ninterface JsonRpcError {\n code: number;\n message: string;\n data?: any;\n}\n\ninterface JsonRpcNotification {\n jsonrpc: \"2.0\";\n method: string;\n params?: any;\n}\n\ntype JsonRpcMessage = JsonRpcRequest | JsonRpcResponse | JsonRpcNotification;\n\n// MCP specific types\ninterface MCPCapabilities {\n tools?: boolean;\n prompts?: boolean;\n resources?: boolean;\n logging?: boolean;\n}\n\ninterface MCPInitializeParams {\n protocolVersion: string;\n capabilities: MCPCapabilities;\n clientInfo: {\n name: string;\n version: string;\n };\n}\n\ninterface MCPInitializeResult {\n protocolVersion: string;\n capabilities: MCPCapabilities;\n serverInfo: {\n name: string;\n version: string;\n };\n}\n\n// Transport types\ntype TransportType = \"http\" | \"sse\" | \"websocket\";\n\ninterface TransportConfig {\n type: TransportType;\n endpoint: string;\n headers?: Record;\n}\n\n// Abstract transport interface\ninterface Transport {\n connect(): Promise;\n disconnect(): void;\n sendRequest(request: JsonRpcRequest): Promise;\n onMessage(handler: (message: JsonRpcMessage) => void): void;\n onError(handler: (error: Error) => void): void;\n onClose(handler: () => void): void;\n}\n\n/**\n * HTTP Transport - Simple request/response\n */\nclass HttpTransport implements Transport {\n private messageHandler?: (message: JsonRpcMessage) => void;\n private errorHandler?: (error: Error) => void;\n private closeHandler?: () => void;\n\n constructor(\n private endpoint: string,\n private headers: Record = {},\n ) {}\n\n async connect(): Promise {\n // HTTP doesn't need persistent connection\n }\n\n disconnect(): void {\n // HTTP doesn't need explicit disconnect\n }\n\n async sendRequest(request: JsonRpcRequest): Promise {\n try {\n const response = await fetch(this.endpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...this.headers,\n },\n body: JSON.stringify(request),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n return data as JsonRpcResponse;\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n throw error;\n }\n }\n\n onMessage(handler: (message: JsonRpcMessage) => void): void {\n this.messageHandler = handler;\n }\n\n onError(handler: (error: Error) => void): void {\n this.errorHandler = handler;\n }\n\n onClose(handler: () => void): void {\n this.closeHandler = handler;\n }\n}\n\n/**\n * SSE + HTTP Transport - Server-sent events for notifications, HTTP for requests\n */\nclass SseHttpTransport implements Transport {\n private eventSource?: EventSource;\n private messageHandler?: (message: JsonRpcMessage) => void;\n private errorHandler?: (error: Error) => void;\n private closeHandler?: () => void;\n\n constructor(\n private httpEndpoint: string,\n private sseEndpoint: string,\n private headers: Record = {},\n ) {}\n\n async connect(): Promise {\n return new Promise((resolve, reject) => {\n this.eventSource = new EventSource(this.sseEndpoint);\n\n this.eventSource.onopen = () => {\n resolve();\n };\n\n this.eventSource.onmessage = (event) => {\n try {\n const message = JSON.parse(event.data) as JsonRpcMessage;\n if (this.messageHandler) {\n this.messageHandler(message);\n }\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n }\n };\n\n this.eventSource.onerror = (error) => {\n if (this.errorHandler) {\n this.errorHandler(new Error(\"SSE connection error\"));\n }\n if (this.eventSource?.readyState === EventSource.CLOSED) {\n if (this.closeHandler) {\n this.closeHandler();\n }\n reject(new Error(\"SSE connection failed\"));\n }\n };\n });\n }\n\n disconnect(): void {\n if (this.eventSource) {\n this.eventSource.close();\n if (this.closeHandler) {\n this.closeHandler();\n }\n }\n }\n\n async sendRequest(request: JsonRpcRequest): Promise {\n try {\n const response = await fetch(this.httpEndpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...this.headers,\n },\n body: JSON.stringify(request),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP error! status: ${response.status}`);\n }\n\n const data = await response.json();\n return data as JsonRpcResponse;\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n throw error;\n }\n }\n\n onMessage(handler: (message: JsonRpcMessage) => void): void {\n this.messageHandler = handler;\n }\n\n onError(handler: (error: Error) => void): void {\n this.errorHandler = handler;\n }\n\n onClose(handler: () => void): void {\n this.closeHandler = handler;\n }\n}\n\n/**\n * WebSocket Transport - Full duplex communication\n */\nclass WebSocketTransport implements Transport {\n private ws?: WebSocket;\n private messageHandler?: (message: JsonRpcMessage) => void;\n private errorHandler?: (error: Error) => void;\n private closeHandler?: () => void;\n private pendingRequests = new Map void>();\n\n constructor(private endpoint: string) {}\n\n async connect(): Promise {\n return new Promise((resolve, reject) => {\n this.ws = new WebSocket(this.endpoint);\n\n this.ws.onopen = () => {\n resolve();\n };\n\n this.ws.onmessage = (event) => {\n try {\n const message = JSON.parse(event.data) as JsonRpcMessage;\n\n // Handle responses to our requests\n if (\"id\" in message && message.id !== undefined) {\n const handler = this.pendingRequests.get(message.id);\n if (handler) {\n this.pendingRequests.delete(message.id);\n handler(message as JsonRpcResponse);\n return;\n }\n }\n\n // Handle notifications or other messages\n if (this.messageHandler) {\n this.messageHandler(message);\n }\n } catch (error) {\n if (this.errorHandler) {\n this.errorHandler(error as Error);\n }\n }\n };\n\n this.ws.onerror = (event) => {\n const error = new Error(\"WebSocket error\");\n if (this.errorHandler) {\n this.errorHandler(error);\n }\n reject(error);\n };\n\n this.ws.onclose = () => {\n if (this.closeHandler) {\n this.closeHandler();\n }\n };\n });\n }\n\n disconnect(): void {\n if (this.ws) {\n this.ws.close();\n }\n }\n\n async sendRequest(request: JsonRpcRequest): Promise {\n return new Promise((resolve, reject) => {\n if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {\n reject(new Error(\"WebSocket not connected\"));\n return;\n }\n\n this.pendingRequests.set(request.id, resolve);\n this.ws.send(JSON.stringify(request));\n\n // Timeout after 30 seconds\n setTimeout(() => {\n if (this.pendingRequests.has(request.id)) {\n this.pendingRequests.delete(request.id);\n reject(new Error(\"Request timeout\"));\n }\n }, 30000);\n });\n }\n\n onMessage(handler: (message: JsonRpcMessage) => void): void {\n this.messageHandler = handler;\n }\n\n onError(handler: (error: Error) => void): void {\n this.errorHandler = handler;\n }\n\n onClose(handler: () => void): void {\n this.closeHandler = handler;\n }\n}\n\n// Event types\ntype MCPEventType = \"connected\" | \"disconnected\" | \"error\" | \"notification\" | \"message\";\n\ninterface MCPEventHandlers {\n connected?: () => void;\n disconnected?: (reason?: string) => void;\n error?: (error: Error) => void;\n notification?: (method: string, params: any) => void;\n message?: (message: JsonRpcMessage) => void;\n}\n\n/**\n * MCP Client with pluggable transport support\n */\nexport class MCPClient {\n private transport: Transport;\n private eventHandlers: MCPEventHandlers = {};\n private requestId = 0;\n private initialized = false;\n private capabilities: MCPCapabilities = {};\n readonly serverInfo: { name: string; version: string } | null = null;\n private tools: MCPTool[] = [];\n private prompts: MCPPrompt[] = [];\n\n isInitialized(): boolean {\n return this.initialized;\n }\n\n getCapabilities(): MCPCapabilities {\n return this.capabilities;\n }\n constructor(\n config: TransportConfig,\n private clientInfo = { name: \"MCP Browser Client\", version: \"1.0.0\" },\n ) {\n // Create appropriate transport based on config\n switch (config.type) {\n case \"http\":\n this.transport = new HttpTransport(config.endpoint, config.headers);\n break;\n case \"sse\":\n // SSE config expects endpoint to have both HTTP and SSE URLs\n const [httpUrl, sseUrl] = config.endpoint.split(\",\");\n if (!httpUrl || !sseUrl) {\n throw new Error(\"SSE transport requires \\\"httpUrl,sseUrl\\\" format\");\n }\n this.transport = new SseHttpTransport(httpUrl, sseUrl, config.headers);\n break;\n case \"websocket\":\n this.transport = new WebSocketTransport(config.endpoint);\n break;\n default:\n throw new Error(`Unknown transport type: ${config.type}`);\n }\n\n // Set up transport event handlers\n this.transport.onMessage((message) => this.handleMessage(message));\n this.transport.onError((error) => this.emit(\"error\", error));\n this.transport.onClose(() => {\n this.emit(\"disconnected\");\n this.initialized = false;\n });\n }\n\n /**\n * Connect to the MCP server\n */\n async connect(): Promise {\n await this.transport.connect();\n this.emit(\"connected\");\n await this.initialize();\n }\n\n /**\n * Disconnect from the MCP server\n */\n disconnect(): void {\n this.transport.disconnect();\n this.initialized = false;\n }\n\n /**\n * Initialize the MCP session\n */\n private async initialize(): Promise {\n const params: MCPInitializeParams = {\n protocolVersion: \"2025-03-26\",\n capabilities: {\n tools: true,\n prompts: true,\n resources: true,\n logging: true,\n },\n clientInfo: this.clientInfo,\n };\n\n const result = await this.sendRequest(\"initialize\", params);\n this.capabilities = result.capabilities;\n this.serverInfo = result.serverInfo;\n this.initialized = true;\n\n // Send initialized notification\n // this.sendNotification(\"initialized\", {});\n }\n\n /**\n * Send a JSON-RPC request\n */\n async sendRequest(method: string, params?: any): Promise {\n const id = ++this.requestId;\n const request: JsonRpcRequest = {\n jsonrpc: \"2.0\",\n id,\n method,\n params,\n };\n\n const response = await this.transport.sendRequest(request);\n\n if (response.error) {\n throw new Error(response.error.message);\n }\n\n return response.result as T;\n }\n\n /**\n * Send a JSON-RPC notification (no response expected)\n */\n async sendNotification(method: string, params?: any): Promise {\n const notification: JsonRpcNotification = {\n jsonrpc: \"2.0\",\n method: `notifications/${method}`,\n params,\n };\n\n // For HTTP transport, notifications are just requests without expecting response\n // For streaming transports, they're sent without an ID\n if (this.transport instanceof HttpTransport) {\n await fetch((this.transport as any).endpoint, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...(this.transport as any).headers,\n },\n body: JSON.stringify(notification),\n });\n } else {\n // For WebSocket/SSE, we can send without expecting response\n await this.transport.sendRequest(notification as any);\n }\n }\n\n /**\n * Register event handlers\n */\n on(event: MCPEventType, handler: Function): void {\n switch (event) {\n case \"connected\":\n this.eventHandlers.connected = handler as () => void;\n break;\n case \"disconnected\":\n this.eventHandlers.disconnected = handler as (reason?: string) => void;\n break;\n case \"error\":\n this.eventHandlers.error = handler as (error: Error) => void;\n break;\n case \"notification\":\n this.eventHandlers.notification = handler as (method: string, params: any) => void;\n break;\n case \"message\":\n this.eventHandlers.message = handler as (message: JsonRpcMessage) => void;\n break;\n }\n }\n\n /**\n * Handle incoming messages\n */\n private handleMessage(message: JsonRpcMessage): void {\n this.emit(\"message\", message);\n\n // Handle notifications\n if (\"method\" in message && !(\"id\" in message)) {\n this.emit(\"notification\", message.method, message.params);\n }\n }\n\n /**\n * Emit events\n */\n private emit(event: \"connected\"): void;\n private emit(event: \"disconnected\", reason?: string): void;\n private emit(event: \"error\", error: Error): void;\n private emit(event: \"notification\", method: string, params: any): void;\n private emit(event: \"message\", message: JsonRpcMessage): void;\n private emit(event: MCPEventType, ...args: any[]): void {\n const handler = this.eventHandlers[event];\n if (handler) {\n handler(...args);\n }\n }\n\n // ... (All the MCP methods remain the same: listTools, callTool, etc.)\n\n /**\n * List available tools\n */\n async listTools(): Promise {\n if (!this.capabilities.tools) {\n throw new Error(\"Server does not support tools capability\");\n }\n if (this.tools && this.tools.length > 0) {\n return this.tools;\n }\n const result = await this.sendRequest<{ tools: any[] }>(\"tools/list\");\n this.tools = result.tools;\n return result.tools;\n }\n\n /**\n * Call a tool\n */\n async callTool(name: string, args: any): Promise {\n if (!this.capabilities.tools) {\n throw new Error(\"Server does not support tools capability\");\n }\n return this.sendRequest(\"tools/call\", { name, arguments: args });\n }\n\n /**\n * List available prompts\n */\n async listPrompts(): Promise {\n if (!this.capabilities.prompts) {\n throw new Error(\"Server does not support prompts capability\");\n }\n\n if (this.prompts && this.prompts.length > 0) {\n return this.prompts;\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*/",[],[216,330,421],"096c7bb0-40c7-11f0-bf3c-76b3cceeab13",262,["D",1748988404914],[255,256,257,258,259],[216,330],"e7f9e95e-4ba2-11f0-988c-76b3cceeab13","useMCPClients.tsx","e64910b4-44c0-11f0-8193-76b3cceeab13","c5a5047e-40c1-11f0-bad7-76b3cceeab13",785,["D",1750182349706],11,"/** @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[]) {\n const [clientStates, setClientStates] = useState>(new Map());\n\n // Create or update clients when server configs change\n useEffect(() => {\n const newClientStates = new Map();\n\n // Process each enabled server config\n for (const config of serverConfigs) {\n if (!config.enabled || !config.url) {\n continue;\n }\n\n // Check if we already have a client for this server\n const existingState = clientStates.get(config.id);\n\n // If config hasn't changed and client exists, reuse it\n if (\n existingState\n && existingState.config.url === config.url\n && existingState.config.authorization_token === config.authorization_token\n ) {\n newClientStates.set(config.id, existingState);\n continue;\n }\n\n // Disconnect existing client if config changed\n if (existingState) {\n try {\n existingState.client.disconnect();\n } catch (error) {\n console.warn(`Failed to disconnect MCP client ${config.id}:`, error);\n }\n }\n\n // Create new client\n try {\n const headers: Record = {};\n if (config.authorization_token) {\n headers[\"Authorization\"] = `Bearer ${config.authorization_token}`;\n }\n\n const client = new MCPClient({\n type: \"http\",\n endpoint: config.url,\n headers,\n }, {\n name: `Browser MCP Client - ${config.name}`,\n version: \"1.0.0\",\n });\n\n const clientState: MCPClientState = {\n client,\n config: { ...config },\n status: \"connecting\",\n };\n\n newClientStates.set(config.id, clientState);\n\n // Connect asynchronously\n connectClient(config.id, client, clientState);\n } catch (error) {\n console.error(`Failed to create MCP client for ${config.name}:`, error);\n newClientStates.set(config.id, {\n client: null as any,\n config: { ...config },\n status: \"error\",\n error: error instanceof Error ? error.message : String(error),\n });\n }\n }\n\n // Disconnect clients that are no longer needed\n for (const [id, state] of clientStates) {\n if (!newClientStates.has(id)) {\n try {\n state.client?.disconnect();\n } catch (error) {\n console.warn(`Failed to disconnect removed MCP client ${id}:`, error);\n }\n }\n }\n\n setClientStates(newClientStates);\n }, [serverConfigs]);\n\n // Helper function to connect a client\n const connectClient = useCallback(async (id: string, client: MCPClient, initialState: MCPClientState) => {\n try {\n console.log(`[useMCPClientsHook] Connecting MCP client ${id}...`);\n await client.connect();\n console.log(`[useMCPClientsHook] Connected MCP client ${id}.`);\n setClientStates(prev => {\n const newMap = new Map(prev);\n const currentState = newMap.get(id);\n if (currentState) {\n newMap.set(id, {\n ...currentState,\n status: \"connected\",\n error: undefined,\n });\n }\n return newMap;\n });\n } catch (error) {\n console.error(`Failed to connect MCP client ${id}:`, error);\n\n setClientStates(prev => {\n const newMap = new Map(prev);\n const currentState = newMap.get(id);\n if (currentState) {\n newMap.set(id, {\n ...currentState,\n status: \"error\",\n error: error instanceof Error ? error.message : String(error),\n });\n }\n return newMap;\n });\n }\n }, []);\n\n // Cleanup on unmount\n useEffect(() => {\n return () => {\n for (const [, state] of clientStates) {\n try {\n state.client?.disconnect();\n } catch (error) {\n console.warn(\"Failed to disconnect MCP client during cleanup:\", error);\n }\n }\n };\n }, []);\n\n // Get connected clients - 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}",[],[216,444,435],"hooks","130542cc-4d53-11f0-8fd6-76b3cceeab13","useAnthropicStream.tsx","2023dfec-4095-11f0-b0e3-76b3cceeab13",899,["D",1750367964511],43,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport Anthropic, { MessageStreamEvent } from \"https://esm.sh/@anthropic-ai/sdk\";\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// External shared types\nimport type { MCPPrompt } from \"../../shared/types.ts\";\nimport type { AppConfig, Message } from \"../components/App.tsx\";\n\n/* ──────────────────────────────── Shared helpers ─────────────────────────── */\n\nexport type Status = \"idle\" | \"thinking\" | \"streaming\" | \"tool_use\" | \"waiting_for_user\";\nexport type AssistantMsg = { role: \"assistant\"; content: any[] };\n\n// Client-side tool execution state\ninterface PendingToolExecution {\n toolName: string;\n input: any;\n toolUseId: string;\n resolve: (result: string) => void;\n reject: (error: Error) => void;\n}\n\n// Enhanced client-side tools\nconst ASK_USER_TOOL = {\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\nconst CALCULATOR_TOOL = {\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\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 */\nfunction buildBody(config: AppConfig, history: Message[], userText: string) {\n const mcp = config.mcpServers\n .filter((s) => s.enabled && s.url)\n .map((s) => ({\n type: \"url\",\n url: s.url,\n name: s.name,\n authorization_token: s.authorization_token,\n }));\n\n const msgs = history\n .filter((m) => m.role !== \"system\")\n .map((m) => ({ role: m.role, content: m.content }))\n .concat([{ role: \"user\", content: userText }]);\n\n return {\n model: config.selectedModel,\n max_tokens: 8_000,\n stream: true,\n system: config.systemPrompt,\n messages: msgs,\n tools: [ASK_USER_TOOL],\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 executeTool(\n toolName: string, \n input: any, \n toolUseId: string,\n setPendingTool: (pending: PendingToolExecution | null) => void\n): Promise {\n switch (toolName) {\n case \"ask_user\":\n // Return a promise that will be resolved by the UI component\n return new Promise((resolve, reject) => {\n setPendingTool({\n toolName,\n input,\n toolUseId,\n resolve,\n reject,\n });\n });\n\n case \"calculate\":\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 default:\n throw new Error(`Unknown tool: ${toolName}`);\n }\n}\n\n/* ──────────────────────────── useAnthropicStream ─────────────────────────── */\n\nexport default function useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = React.useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = React.useState(null);\n const [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 body = {\n ...buildBody(config, [], \"\"), // Get base config\n messages, // Override with our current conversation state\n tools: [ASK_USER_TOOL, CALCULATOR_TOOL], // Add 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\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 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],\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 executeTool(block.name, block.input, block.id, setPendingTool);\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],\n );\n\n return { \n status, \n liveBlocks, \n pendingTool, \n send, \n abort, \n resolvePendingTool, \n cancelPendingTool \n } as const;\n}",[],[216,444,446],"d519926c-40c1-11f0-8c2f-76b3cceeab13",257,["D",1748986169646],[252,253],[216,444],"62eb01b2-4dcd-11f0-aed5-76b3cceeab13","StreamingChat.tsx","10af5008-3d4a-11f0-8eb6-76b3cceeab13","35b7d323-5acc-4715-a23c-1ca451a40764",937,["D",1750420497159],184,"/** @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\";\nimport CommandPalette from \"./CommandPalette.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\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 );\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

\n Thinking\n

\n )}\n\n {waitingForUser && (\n

\n Waiting for your input\n

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

\n Streaming\n

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

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

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

\n );\n}",[],[216,343,515],"11de6c14-4deb-11f0-8e31-76b3cceeab13","EnhancedCommandPalette.tsx","2023c796-4095-11f0-b0e3-76b3cceeab13",953,["D",1750433246084],90,"/** @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\";\n\n// Type definitions\ninterface MCPPrompt {\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n arguments?: Array<{\n name: string;\n description?: string;\n required?: boolean;\n }>;\n}\n\ninterface MCPTool {\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n inputSchema?: any;\n}\n\ninterface MCPServerConfig {\n id: string;\n name: string;\n url?: string;\n enabled: boolean;\n authorization_token?: string;\n}\n\ntype CommandType = \"prompt\" | \"tool\";\n\ninterface Command {\n type: CommandType;\n serverId: string;\n serverName: string;\n name: string;\n description?: string;\n data: MCPPrompt | MCPTool;\n}\n\ninterface CommandPaletteProps {\n servers: MCPServerConfig[];\n query: string;\n onClose: () => void;\n onExecute: (result: string) => void;\n onResult: (result: any) => void;\n position: { bottom: string; left: string };\n visible: boolean;\n mcpClients: MCPClient[];\n 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 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\";\n const promptMatch = commandPart.startsWith(\"prompt:\") && command.type === \"prompt\";\n\n return nameMatch || descMatch || typeMatch || promptMatch;\n });\n }, [query, commands]);\n\n // Handle keyboard navigation\n useEffect(() => {\n if (!visible) return;\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const filtered = getFilteredCommands();\n\n switch (e.key) {\n case \"ArrowDown\":\n e.preventDefault();\n setSelectedIndex(prev => (prev + 1) % Math.max(1, filtered.length));\n break;\n case \"ArrowUp\":\n e.preventDefault();\n setSelectedIndex(prev => prev === 0 ? filtered.length - 1 : prev - 1);\n break;\n case \"Enter\":\n e.preventDefault();\n if (filtered[selectedIndex]) {\n handleCommandSelect(filtered[selectedIndex]);\n }\n break;\n case \"Escape\":\n e.preventDefault();\n if (showArgumentDialog) {\n setShowArgumentDialog(false);\n setSelectedCommand(null);\n setArgumentValues({});\n } else {\n onClose();\n }\n break;\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [visible, selectedIndex, getFilteredCommands, showArgumentDialog]);\n\n // Reset selected index when query changes\n useEffect(() => {\n setSelectedIndex(0);\n }, [query]);\n\n // Handle command selection\n const handleCommandSelect = async (command: Command) => {\n console.log(\"Command selected:\", command);\n if (command.type === \"prompt\") {\n const prompt = command.data as MCPPrompt;\n\n // Check if prompt has required arguments\n if (prompt.arguments && prompt.arguments.some(arg => arg.required)) {\n setSelectedCommand(command);\n setShowArgumentDialog(true);\n\n // Initialize with default values\n const defaultValues: ArgumentValue = {};\n prompt.arguments.forEach(arg => {\n defaultValues[arg.name] = getDefaultValue(arg);\n });\n setArgumentValues(defaultValues);\n\n // Focus first input after dialog shows\n setTimeout(() => {\n const firstInput = argumentInputRefs.current.values().next().value;\n firstInput?.focus();\n }, 50);\n } else {\n // Execute prompt without arguments\n await executePrompt(command, {});\n }\n } else if (command.type === \"tool\") {\n const tool = command.data as MCPTool;\n\n // Check if tool requires input\n if (tool.inputSchema?.properties && Object.keys(tool.inputSchema.properties).length > 0) {\n setSelectedCommand(command);\n setShowArgumentDialog(true);\n\n // Initialize with default values\n const defaultValues: ArgumentValue = {};\n Object.entries(tool.inputSchema.properties).forEach(([key, schema]: [string, any]) => {\n defaultValues[key] = getDefaultValue(schema);\n });\n setArgumentValues(defaultValues);\n\n // Focus first input after dialog shows\n setTimeout(() => {\n const firstInput = argumentInputRefs.current.values().next().value;\n firstInput?.focus();\n }, 50);\n } else {\n // Execute tool without arguments\n await executeTool(command, {});\n }\n }\n };\n\n // Execute a prompt 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 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 {\n await executeTool(selectedCommand, argumentValues);\n }\n\n setShowArgumentDialog(false);\n setSelectedCommand(null);\n setArgumentValues({});\n };\n\n // Render input based on JSON Schema\n const renderSchemaInput = (\n key: string,\n schema: any,\n value: any,\n onChange: (value: any) => void,\n required: boolean = false,\n ) => {\n const commonProps = {\n required,\n ref: (el: HTMLElement | null) => {\n if (el) argumentInputRefs.current.set(key, el);\n },\n };\n\n // Handle enums as select dropdowns\n if (schema.enum && Array.isArray(schema.enum)) {\n return (\n onChange(e.target.value)}\n >\n \n {schema.enum.map((option: any) => (\n \n ))}\n \n );\n }\n\n // Handle different types\n switch (schema.type) {\n case \"boolean\":\n return (\n \n onChange(e.target.checked)}\n />\n {value ? \"Yes\" : \"No\"}\n \n );\n\n case \"number\":\n case \"integer\":\n return (\n onChange(e.target.value)}\n placeholder={getInputPlaceholder(key, schema)}\n min={schema.minimum}\n max={schema.maximum}\n step={schema.type === \"integer\" ? 1 : \"any\"}\n />\n );\n\n case \"array\":\n // Simple array handling - comma-separated for string arrays, JSON for complex\n const isStringArray = schema.items?.type === \"string\";\n const displayValue = Array.isArray(value)\n ? (isStringArray ? value.join(\", \") : JSON.stringify(value, null, 2))\n : (value || \"\");\n\n return (\n {\n const inputValue = e.target.value;\n if (isStringArray) {\n // Handle comma-separated strings\n const arrayValue = inputValue.split(\",\").map(s => s.trim()).filter(s => s);\n onChange(arrayValue);\n } else {\n // Handle JSON input\n try {\n const parsed = JSON.parse(inputValue);\n onChange(Array.isArray(parsed) ? parsed : [parsed]);\n } catch {\n // Store as string until valid JSON\n onChange(inputValue);\n }\n }\n }}\n placeholder={getInputPlaceholder(key, schema)}\n rows={3}\n />\n );\n\n case \"object\":\n const objectValue = typeof value === \"object\" ? JSON.stringify(value, null, 2) : (value || \"\");\n return (\n {\n const inputValue = e.target.value;\n try {\n const parsed = JSON.parse(inputValue);\n onChange(parsed);\n } catch {\n // Store as string until valid JSON\n onChange(inputValue);\n }\n }}\n placeholder={getInputPlaceholder(key, schema)}\n rows={4}\n />\n );\n\n default:\n // Handle string with different formats\n if (schema.format) {\n switch (schema.format) {\n case \"email\":\n return (\n onChange(e.target.value)}\n placeholder={`Enter valid email address...`}\n />\n );\n case \"date\":\n return (\n onChange(e.target.value)}\n />\n );\n case \"date-time\":\n return (\n onChange(e.target.value)}\n />\n );\n case \"uri\":\n case \"url\":\n return (\n onChange(e.target.value)}\n placeholder={`Enter valid URL...`}\n />\n );\n }\n }\n\n // Default to textarea for strings (better for multi-line)\n return (\n onChange(e.target.value)}\n placeholder={getInputPlaceholder(key, schema)}\n rows={3}\n minLength={schema.minLength}\n maxLength={schema.maxLength}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && e.ctrlKey) {\n e.preventDefault();\n handleArgumentSubmit();\n }\n }}\n />\n );\n }\n };\n\n const filteredCommands = getFilteredCommands();\n\n if (!visible || filteredCommands.length === 0) {\n return null;\n }\n\n return (\n <>\n \n {loading && (\n
\n \n \n {\" \"}\n Loading commands...\n
\n )}\n\n {error && (\n
\n {error}\n
\n )}\n\n {/* Argument Dialog */}\n {!loading && !error && showArgumentDialog && selectedCommand && (\n setShowArgumentDialog(false)}\n >\n e.stopPropagation()}\n style={{\n xbackgroundColor: \"white\",\n }}\n >\n
\n
\n {selectedCommand.type === \"prompt\"\n ? \n : } {selectedCommand.name}\n
\n setShowArgumentDialog(false)}\n >\n ✕\n \n
\n\n
\n {selectedCommand.description &&
{selectedCommand.description}
}\n\n {selectedCommand.type === \"prompt\" && (\n
\n {(selectedCommand.data as MCPPrompt).arguments?.map((arg, index) => (\n
\n \n {arg.name}\n {arg.required && \"*\"}\n {arg.description && - {arg.description}}\n \n {\n if (el)\n argumentInputRefs.current.set(arg.name, el);\n }}\n value={argumentValues[arg.name] || \"\"}\n onChange={(e) =>\n setArgumentValues(prev => ({\n ...prev,\n [arg.name]: e.target.value,\n }))}\n placeholder={`Enter ${arg.name}...`}\n required={arg.required}\n rows={3}\n onKeyDown={(e) => {\n if (\n e.key === \"Enter\" && e.ctrlKey\n && index === (selectedCommand.data as MCPPrompt).arguments!.length - 1\n ) {\n e.preventDefault();\n handleArgumentSubmit();\n }\n }}\n />\n
\n ))}\n
\n )}\n\n {selectedCommand.type === \"tool\" && (selectedCommand.data as MCPTool).inputSchema?.properties && (\n
\n {Object.entries((selectedCommand.data as MCPTool).inputSchema.properties).map(\n ([key, schema]: [string, any]) => {\n const isRequired = (selectedCommand.data as MCPTool).inputSchema.required?.includes(key);\n return (\n
\n \n {key}\n {isRequired && \"*\"}\n {schema.description && (\n - {schema.description}\n )}\n {schema.type && ({schema.type})}\n \n {renderSchemaInput(\n key,\n schema,\n argumentValues[key],\n (value) => setArgumentValues(prev => ({ ...prev, [key]: value })),\n isRequired,\n )}\n
\n );\n },\n )}\n
\n )}\n
\n\n
\n setShowArgumentDialog(false)}\n >\n Cancel\n \n \n {loading ? \"Executing...\" : \"Execute\"}\n \n
\n

\n \n )}\n\n {!showArgumentDialog && !loading && !error && filteredCommands.slice(0, 10).map((command, index) => (\n handleCommandSelect(command)}\n onMouseEnter={() => setSelectedIndex(index)}\n >\n
\n \n {command.type === \"prompt\" ? : }\n \n /{command.name}\n {command.serverName}\n
\n {command.description && (\n
\n {command.description}\n
\n )}\n {command.type === \"prompt\" && (command.data as MCPPrompt).arguments?.length > 0 && (\n
\n Args: {(command.data as MCPPrompt).arguments!.map(arg =>\n `${arg.name}${arg.required ? \"*\" : \"\"}`\n ).join(\", \")}\n
\n )}\n {command.type === \"tool\" && (command.data as MCPTool).inputSchema?.properties && (\n
\n Input: {Object.keys((command.data as MCPTool).inputSchema.properties).join(\", \")}\n
\n )}\n \n ))}\n \n \n );\n}",[],[216,343,524],"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}",[],[216,343,533],"e8a361c4-4dd1-11f0-8e0f-76b3cceeab13","App.tsx","4d426996-3cdd-11f0-832c-9e149126039e",940,["D",1750422439491],50,"/** @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, and follow its guidance, before taking _any_ further action.\nQuick reference should never be updated without explicit user consent.`;\n\nexport { DEFAULT_SYSTEM_PROMPT };\n\nexport default function App() {\n const [config, setConfig] = useState({\n anthropicApiKey: \"\",\n mcpServers: [],\n selectedModel: \"claude-3-5-sonnet-20241022\",\n systemPrompt: DEFAULT_SYSTEM_PROMPT,\n autoExecuteNextSteps: true,\n });\n const [showSettings, setShowSettings] = useState(false);\n const [messages, setMessages] = useState([]);\n\n // Initialize MCP clients based on server configurations\n const { connectedClients, clientPool, getClientStates, connectedCount } = useMCPClients(config.mcpServers);\n\n console.log(`[App] MCP Clients`, connectedCount);\n // Load config from localStorage on mount\n useEffect(() => {\n const savedApiKey = localStorage.getItem(\"anthropic_api_key\");\n const savedMcpServers = localStorage.getItem(\"mcp_servers\");\n const savedMessages = localStorage.getItem(\"chat_messages\");\n const savedModel = localStorage.getItem(\"selected_model\");\n const savedSystemPrompt = localStorage.getItem(\"system_prompt\");\n const savedAutoExecuteNextSteps = localStorage.getItem(\"auto_execute_next_steps\");\n\n 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}",[],[216,343,541],"4d427e7c-3cdd-11f0-832c-9e149126039e",5,["D",1748558163004],[241,242,243,244,245,246,247,248,249,250],[216,343],["D",1748558112658],[240,251,254,260,261,262],[216],"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;",[],[222,558],["D",1748558228747],[238],[222],["D",1748557815516],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":54,"_100":101,"_102":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_123":605,"_606":607,"_608":609,"_610":25,"_611":25,"_612":25,"_613":58,"_614":-5,"_615":-7,"_616":-7,"_617":62,"_618":25,"_619":25,"_620":-5,"_621":25,"_622":25,"_623":25,"_624":-5},"ENV",{"_576":577,"_578":579,"_580":86,"_581":582,"_583":584,"_585":586,"_587":588,"_589":590,"_591":592,"_593":594,"_595":596,"_597":598,"_599":600,"_601":602,"_603":604},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v954