Anthropic Chat with MCP

\n setShowSettings(true)}\n />\n {showSettings && (\n setShowSettings(false)}\n />\n )}\n

\n );\n}",[],[185,191,197],{"_104":205,"_95":206,"_157":207,"_159":192,"_160":138,"_161":162,"_163":22,"_106":208,"_100":32,"_166":200,"_168":209,"_169":22,"_170":-5,"_171":210,"_98":211},"15b422ae-41a5-11f0-97a8-76b3cceeab13","CommandPalette.tsx","72caab00-7ccc-44e0-bb49-50501127a17e",["D",1749083773738],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MCPPrompt } from \"../../shared/types.ts\";\n\ninterface CommandPaletteProps {\n prompts: MCPPrompt[];\n query: string;\n selectedIndex: number;\n onSelect: (prompt: MCPPrompt) => void;\n onClose: () => void;\n onHover?: (index: number) => void;\n position: { bottom: string; left: string };\n}\n\nexport default function CommandPalette({\n prompts,\n query,\n selectedIndex,\n onSelect,\n onClose,\n onHover,\n position,\n}: CommandPaletteProps) {\n // Filter prompts based on query (excluding the leading \"/\")\n const searchQuery = query.slice(1).toLowerCase();\n const filteredPrompts = prompts.filter(prompt =>\n prompt.name.toLowerCase().includes(searchQuery)\n || (prompt.description && prompt.description.toLowerCase().includes(searchQuery))\n );\n\n // Handle keyboard navigation\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n e.preventDefault();\n onClose();\n }\n };\n\n document.addEventListener(\"keydown\", handleKeyDown);\n return () => document.removeEventListener(\"keydown\", handleKeyDown);\n }, [onClose]);\n\n if (filteredPrompts.length === 0) {\n return null;\n }\n\n return (\n \n {filteredPrompts.slice(0, 10).map((prompt, index) => (\n onSelect(prompt)}\n onMouseEnter={() => {\n // Update selected index when hovering\n // This would need to be passed up to parent component\n }}\n >\n

\n /{prompt.name}\n {prompt.serverName}\n

\n {prompt.description && (\n

\n {prompt.description}\n

\n )}\n {prompt.arguments && prompt.arguments.length > 0 && (\n

\n Args: {prompt.arguments.map(arg => `${arg.name}${arg.required ? \"*\" : \"\"}`).join(\", \")}\n

\n )}\n \n ))}\n \n );\n}",[],[185,191,206],{"_104":213,"_95":214,"_157":215,"_159":192,"_160":138,"_161":162,"_163":22,"_106":216,"_100":32,"_166":200,"_168":217,"_169":22,"_170":-5,"_171":218,"_98":219},"15b42600-41a5-11f0-97a8-76b3cceeab13","Message.tsx","d48db81c-c575-4982-af56-60ed26d50c75",["D",1749083773738],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js\";\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { Message } from \"./App.tsx\";\n\ninterface ShadowDomWrapperProps {\n html: string;\n}\n\nconst ShadowDomWrapper: React.FC = ({ html }) => {\n const containerRef = useRef(null);\n const shadowRef = useRef(null);\n\n useEffect(() => {\n const host = containerRef.current;\n if (!host) return;\n\n // Attach shadow root only once\n if (!shadowRef.current) {\n shadowRef.current = host.attachShadow({ mode: \"open\" });\n }\n\n // Clear existing content and inject new HTML\n if (shadowRef.current) {\n shadowRef.current.innerHTML = html;\n }\n }, [html]);\n\n return

;\n};\n\ninterface MessageProps {\n message: Message;\n onDelete?: () => void;\n onRetry?: () => void;\n canRetry?: boolean;\n}\n\n/* ──────────────────────────── Streaming-block helper types ────────────────── */\ninterface AnthropicBlock {\n type: string;\n text?: string;\n language?: string; // for code blocks\n _streaming?: boolean; // present on the *current* block being streamed\n /* keep-all for future keys */\n [key: string]: any;\n}\n\n/* ───────────────────────────────────────────────────────────────────────────── */\n\nexport default function MessageComponent({ message, onDelete, onRetry, canRetry }: MessageProps) {\n const formatRegularContent = (content: string) =>

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

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

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

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

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

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

\n );\n\n /* ═══════ Decide renderer based on runtime type ═══════════════════════════ */\n\n const renderContent = () => {\n const content = message.content as unknown;\n\n // 1. Live preview (array of blocks)\n if (Array.isArray(content)) {\n return renderAnthropicBlocks(content as AnthropicBlock[]);\n } else {\n return renderAnthropicBlocks([{ type: \"text\", text: message.content }]);\n }\n\n // 3. Defensive fallback\n return (\n
\n {JSON.stringify(content, null, 2)}\n
\n );\n };\n\n /* ═══════ Render wrapper ══════════════════════════════════════════════════ */\n\n return (\n
\n
\n {renderContent()}\n
\n
\n \n {formatTimestamp(message.timestamp)}\n \n {onRetry && canRetry && (\n \n \n \n )}\n {onDelete && (\n \n \n \n )}\n {onCopy && (\n onCopy(message)}\n title=\"Copy this message\"\n >\n \n \n )}\n
\n
\n );\n}",[],[185,191,214],{"_104":221,"_95":222,"_157":223,"_159":192,"_160":138,"_161":162,"_163":22,"_106":224,"_100":32,"_166":200,"_168":225,"_169":22,"_170":-5,"_171":226,"_98":227},"15b42c90-41a5-11f0-97a8-76b3cceeab13","Settings.tsx","c6c0aeb1-e907-4974-9650-85a90c9b48e2",["D",1749083773738],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { AppConfig, MCPServer } from \"./App.tsx\";\nimport { testMCPServer } from \"../utils/mcpTesting.ts\";\n\ninterface SettingsProps {\n config: AppConfig;\n onUpdateConfig: (config: Partial) => void;\n onClose: () => void;\n}\n\ninterface TestResult {\n [serverId: string]: {\n status: \"testing\" | \"success\" | \"error\";\n message?: string;\n };\n}\n\nexport default function Settings({ config, onUpdateConfig, onClose }: SettingsProps) {\n const [apiKey, setApiKey] = useState(config.anthropicApiKey);\n const [mcpServers, setMcpServers] = useState(config.mcpServers);\n const [selectedModel, setSelectedModel] = useState(config.selectedModel);\n const [testResults, setTestResults] = useState({});\n\n const availableModels = [\n { id: \"claude-opus-4-20250514\", name: \"Claude Opus 4\" },\n { id: \"claude-sonnet-4-20250514\", name: \"Claude Sonnet 4\" },\n { id: \"claude-3-7-sonnet-20250219\", name: \"Claude 3.7 Sonnet\" },\n { id: \"claude-3-5-opus-20241022\", name: \"Claude 3.5 Opus\" },\n { id: \"claude-3-5-sonnet-20241022\", name: \"Claude 3.5 Sonnet\" },\n { id: \"claude-3-5-haiku-20241022\", name: \"Claude 3.5 Haiku\" },\n { id: \"claude-3-opus-20240229\", name: \"Claude 3 Opus\" },\n { id: \"claude-3-sonnet-20240229\", name: \"Claude 3 Sonnet\" },\n { id: \"claude-3-haiku-20240307\", name: \"Claude 3 Haiku\" },\n ];\n\n const handleSave = () => {\n onUpdateConfig({\n anthropicApiKey: apiKey,\n mcpServers: mcpServers,\n selectedModel: selectedModel,\n });\n onClose();\n };\n\n const addMcpServer = () => {\n const newServer: MCPServer = {\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: MCPServer) => {\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: MCPServer) => {\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: MCPServer) => {\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\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\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\n {/* MCP Servers Section */}\n
\n
\n \n MCP Servers{\" \"}\n \n \n
\n\n {mcpServers.map((server) => (\n
\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
\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\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

\n );\n}",[],[185,191,222],{"_104":229,"_95":230,"_157":231,"_159":192,"_160":138,"_161":162,"_163":22,"_106":232,"_100":32,"_166":200,"_168":233,"_169":22,"_170":-5,"_171":234,"_98":235},"15b43820-41a5-11f0-97a8-76b3cceeab13","StreamingChat.tsx","833c30bb-b03d-47da-bd02-81e553f2d627",["D",1749083773738],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createParser, type ParsedEvent, type ReconnectInterval } from \"https://esm.sh/eventsource-parser@2\";\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent, MCPPrompt } from \"../../shared/types.ts\";\nimport useAnthropicStream from \"../hooks/useAnthropicStream.tsx\";\nimport { fetchMCPPromptsWithCache } from \"../utils/mcpPrompts.ts\";\nimport { AppConfig, Message } from \"./App.tsx\";\nimport CommandPalette from \"./CommandPalette.tsx\";\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onUpdateLastMessage: (content: string) => void;\n onDeleteMessage: (messageId: string) => void;\n onRetryFromMessage: (messageId: string) => string | null;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\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}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\n const [prompts, setPrompts] = useState([]);\n const [showCommandPalette, setShowCommandPalette] = useState(false);\n const [commandPalettePosition, setCommandPalettePosition] = useState({ bottom: \"0\", left: \"0\" });\n const [selectedPromptIndex, setSelectedPromptIndex] = useState(0);\n const textareaRef = useRef(null);\n const messagesEndRef = useRef(null);\n\n const { status, liveBlocks, send, abort } = useAnthropicStream(config);\n\n const thinking = status === \"thinking\";\n const streaming = status === \"streaming\";\n\n useEffect(() => {\n setInput(localStorage.getItem(chatInputCacheKey) || \"\");\n }, []);\n\n useEffect(() => {\n if (!streaming) {\n if (messages.length) {\n const last = messages[messages.length - 1];\n if (last.role === \"assistant\" && last.content[last.content.length - 1].type === \"mcp_tool_use\") {\n console.warn(\"Trailing mcp_tool_use block. Requires cleanup!\");\n last.content.push({\n tool_use_id: last.content[last.content.length - 1].id,\n type: \"mcp_tool_result\",\n is_error: true,\n content: [\n {\n type: \"text\",\n text: `Error: Output was terminated unexpectedly. Retry: yes.`,\n },\n ],\n });\n onUpdateLastMessage(last.content);\n }\n if (\n last.role === \"assistant\"\n && last.content[last.content.length - 1].type === \"mcp_tool_result\"\n && !last.content[last.content.length - 1].tool_use_id\n ) {\n console.warn(\"Trailing malformed mcp_tool_result block. Requires cleanup!\");\n last.content[last.content.length - 1] = {\n tool_use_id: last.content[last.content.length - 2].id,\n type: \"mcp_tool_result\",\n is_error: true,\n content: [\n {\n type: \"text\",\n text: `Error: Output was terminated unexpectedly. Retry: yes.`,\n },\n ],\n };\n onUpdateLastMessage(last.content);\n }\n }\n }\n }, [messages, streaming]);\n\n /* scroll to bottom on new content */\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages, liveBlocks]);\n\n /* auto-grow textarea */\n useEffect(() => {\n if (!textareaRef.current) return;\n textareaRef.current.style.height = \"auto\";\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n }, [input]);\n\n /* fetch MCP prompts when config changes */\n useEffect(() => {\n const fetchPrompts = async () => {\n try {\n const result = await fetchMCPPromptsWithCache(config.mcpServers);\n\n if (result.success) {\n console.log(\"MCP prompts:\", result.prompts);\n setPrompts(result.prompts);\n } else {\n console.warn(\"Failed to fetch MCP prompts:\", result.error);\n // Keep existing prompts on error\n }\n } catch (error) {\n console.warn(\"Failed to fetch MCP prompts:\", error);\n // Keep existing prompts on error\n }\n };\n\n if (config.mcpServers.some(s => s.enabled && s.url)) {\n fetchPrompts();\n } else {\n // If no servers are enabled, just show the built-in test prompt\n setPrompts([{\n name: \"test\",\n description: \"Testing the system\",\n serverName: \"Built-in\",\n serverId: \"builtin\",\n arguments: [{\n name: \"subsystem\",\n description: \"Sub system to test\",\n required: false,\n }],\n }]);\n }\n }, [config.mcpServers]);\n\n /* handle command palette visibility */\n useEffect(() => {\n const shouldShow = input.startsWith(\"/\") && input.length > 1;\n\n if (shouldShow && !showCommandPalette) {\n // Calculate position for command palette\n if (textareaRef.current) {\n const rect = textareaRef.current.getBoundingClientRect();\n console.log({ rect, commandPalettePosition });\n setCommandPalettePosition({\n bottom: `${rect.height + 60}px`, // Position above the input\n left: \"1em\",\n });\n }\n console.log(\"Show Command Palette\", { shouldShow, showCommandPalette });\n setShowCommandPalette(true);\n setSelectedPromptIndex(0);\n } else if (!shouldShow && showCommandPalette) {\n setShowCommandPalette(false);\n }\n }, [input, showCommandPalette]);\n\n /* filter prompts based on current input */\n const getFilteredPrompts = () => {\n if (!input.startsWith(\"/\")) return [];\n const searchQuery = input.slice(1).toLowerCase();\n return prompts.filter(prompt =>\n prompt.name.toLowerCase().includes(searchQuery)\n || (prompt.description && prompt.description.toLowerCase().includes(searchQuery))\n );\n };\n\n /* ── helpers ──────────────────────────────────────────────── */\n\n /** Retry a user message */\n const retryMessage = async (messageId: string) => {\n if (status !== \"idle\" || !config.anthropicApiKey) return;\n\n const userText = onRetryFromMessage(messageId);\n if (!userText) return;\n\n try {\n const assistant = await send(\n [...messages.slice(0, messages.findIndex(m => m.id === messageId) + 1)],\n userText,\n );\n onAddMessage(assistant);\n } catch (err: any) {\n console.error(err);\n abort();\n onAddMessage({\n role: \"system\",\n content: `Error: ${err.message ?? \"unknown\"}`,\n });\n }\n };\n\n /** Dispatch user input */\n const fireSend = async () => {\n if (!input.trim() || status !== \"idle\" || !config.anthropicApiKey) return;\n\n const userText = input.trim();\n setInput(\"\");\n onAddMessage({ role: \"user\", content: userText });\n\n try {\n const assistant = await send(\n [...messages],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\n console.error(err);\n abort();\n onAddMessage({\n role: \"system\",\n content: `Error: ${err.message ?? \"unknown\"}`,\n });\n }\n };\n\n /** Abort streaming and keep whatever we saw */\n const stopStreaming = () => {\n if (!streaming) return;\n\n const partial = liveBlocks\n ? liveBlocks.map((b) => {\n const { _streaming, ...rest } = b;\n return rest;\n })\n : [];\n\n abort();\n\n if (partial.length) {\n onAddMessage({\n role: \"assistant\",\n content: partial, // ← array, no JSON.stringify\n });\n } else {\n onAddMessage({ role: \"system\", content: \"Message cancelled by user\" });\n }\n };\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (showCommandPalette) {\n const filteredPrompts = getFilteredPrompts();\n\n if (e.key === \"ArrowDown\") {\n e.preventDefault();\n setSelectedPromptIndex(prev => prev < filteredPrompts.length - 1 ? prev + 1 : 0);\n return;\n }\n\n if (e.key === \"ArrowUp\") {\n e.preventDefault();\n setSelectedPromptIndex(prev => prev > 0 ? prev - 1 : filteredPrompts.length - 1);\n return;\n }\n\n if (e.key === \"Enter\") {\n e.preventDefault();\n if (filteredPrompts[selectedPromptIndex]) {\n handlePromptSelect(filteredPrompts[selectedPromptIndex]);\n }\n return;\n }\n\n if (e.key === \"Escape\") {\n e.preventDefault();\n setShowCommandPalette(false);\n return;\n }\n }\n\n if (e.key === \"Enter\" && e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\n }\n };\n\n const handlePromptSelect = (prompt: MCPPrompt) => {\n // Replace the current input with the selected prompt\n let promptText = `/${prompt.name}`;\n\n // Add argument placeholders if the prompt has arguments\n if (prompt.arguments && prompt.arguments.length > 0) {\n const args = prompt.arguments.map(arg => arg.required ? `<${arg.name}>` : `[${arg.name}]`).join(\" \");\n promptText += ` ${args}`;\n }\n\n setInput(promptText);\n setShowCommandPalette(false);\n\n // Focus back to textarea\n if (textareaRef.current) {\n textareaRef.current.focus();\n // Position cursor at the end\n setTimeout(() => {\n if (textareaRef.current) {\n textareaRef.current.setSelectionRange(promptText.length, promptText.length);\n }\n }, 0);\n }\n };\n\n const canSend = input.trim() && status === \"idle\" && config.anthropicApiKey;\n\n /* ── UI ─────────────────────────────────────────────────────── */\n return (\n <>\n
\n {!config.anthropicApiKey && (\n
\n Please configure your Anthropic API key in settings to start chatting\n
\n )}\n\n {messages.map((m, i) => (\n onDeleteMessage(m.id)}\n onRetry={m.role === \"user\" ? () => retryMessage(m.id) : undefined}\n canRetry={m.role === \"user\" && status === \"idle\"}\n />\n ))}\n\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {!streaming && !thinking && !messages.length && !liveBlocks && (\n
\n Claude Chat
with MCP\n
\n )}\n\n {thinking && (\n
\n Thinking\n
\n
\n
\n
\n
\n
\n )}\n\n {streaming && (\n
\n Processing\n
\n
\n
\n
\n
\n
\n )}\n
\n
\n\n {/* footer */}\n
\n
\n {\n localStorage.setItem(chatInputCacheKey, e.target.value);\n setInput(e.target.value);\n }}\n onKeyDown={handleKeyDown}\n placeholder={config.anthropicApiKey\n ? streaming\n ? \"Press Enter to stop streaming…\"\n : \"Type your message…\"\n : \"Configure API key in settings first\"}\n className=\"chat-input\"\n disabled={!config.anthropicApiKey || thinking}\n rows={1}\n />\n \n {streaming ? : }\n \n
\n\n {/* Command Palette */}\n {showCommandPalette && (\n setShowCommandPalette(false)}\n position={commandPalettePosition}\n />\n )}\n\n
\n \n Clear all\n \n\n \n Claude Chat • {config.mcpServers.filter((s) => s.enabled).length}/\n {config.mcpServers.length} MCP servers •{\" \"}\n {streaming ? : }\n \n\n \n Settings \n \n
\n
\n \n );\n}",[],[185,191,230],[185,191],{"_104":238,"_95":239,"_157":240,"_159":186,"_160":138,"_161":162,"_163":164,"_106":241,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":242,"_98":251},"15b44d2e-41a5-11f0-97a8-76b3cceeab13","hooks","ed0b49c8-de0f-4091-a112-8425fe6af714",["D",1749083773738],[243],{"_104":244,"_95":245,"_157":246,"_159":240,"_160":138,"_161":162,"_163":22,"_106":247,"_100":32,"_166":200,"_168":248,"_169":22,"_170":-5,"_171":249,"_98":250},"15b444d2-41a5-11f0-97a8-76b3cceeab13","useAnthropicStream.tsx","56315d6d-df1c-48d3-b298-b25092bf8eb0",["D",1749083773738],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport Anthropic, { MessageStreamEvent } from \"https://esm.sh/@anthropic-ai/sdk\";\nimport React from \"https://esm.sh/react@18.2.0\";\n\n// External shared types\nimport type { MCPPrompt } from \"../../shared/types.ts\";\nimport type { AppConfig, Message } from \"./App.tsx\";\n\n/* ──────────────────────────────── Shared helpers ─────────────────────────── */\n\nexport type Status = \"idle\" | \"thinking\" | \"streaming\";\nexport type AssistantMsg = { role: \"assistant\"; content: any[] };\n\n/** merge delta (unchanged) */\nfunction mergeDelta(block: any, delta: any) {\n if (!delta) return;\n switch (delta.type) {\n case \"text_delta\":\n block.text = (block.text ?? \"\") + (delta.text ?? \"\");\n break;\n case \"input_json_delta\":\n block._input_json_str = (block._input_json_str ?? \"\") + (delta.partial_json ?? \"\");\n break;\n default:\n console.warn(`Unhandled delta`, delta);\n Object.assign(block, delta);\n }\n}\n\n/** build request body helpers (unchanged) */\nfunction buildBody(config: AppConfig, history: Message[], userText: string) {\n const mcp = config.mcpServers\n .filter((s) => s.enabled && s.url)\n .map((s) => ({\n type: \"url\",\n url: s.url,\n name: s.name,\n authorization_token: s.authorization_token,\n }));\n\n const msgs = history\n .filter((m) => m.role !== \"system\")\n .map((m) => ({ role: m.role, content: m.content }))\n .concat([{ role: \"user\", content: userText }]);\n\n return {\n model: config.selectedModel,\n max_tokens: 8_000,\n stream: true,\n messages: msgs,\n ...(mcp.length && { mcp_servers: mcp }),\n } as const;\n}\n\n/** final assembly */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n Object.values(blocks).forEach((b) => {\n if (b._input_json_str !== undefined) {\n try {\n b.input = JSON.parse(b._input_json_str);\n } catch {\n /* swallow */\n }\n delete b._input_json_str;\n }\n });\n\n const content = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b)\n .map((k) => {\n const { delta, _streaming, ...blk } = blocks[k];\n return blk;\n });\n\n return { role: \"assistant\", content };\n}\n\n/* ──────────────────────────── useAnthropicStream ─────────────────────────── */\n\nexport default function useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = React.useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = React.useState(null);\n const abortRef = React.useRef(null);\n\n /* Anthropic SDK instance – memoised so we don't recreate each render */\n const anthropic = React.useMemo(() => {\n if (!config.anthropicApiKey) return null;\n return new Anthropic({\n dangerouslyAllowBrowser: true,\n apiKey: config.anthropicApiKey,\n baseURL: \"https://api.anthropic.com\", // explicit so it works with CORS pre‑flights\n defaultHeaders: {\n \"anthropic-version\": \"2023-06-01\",\n // Allow calling the API directly from the browser – you accept the risk!\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n },\n });\n }, [config.anthropicApiKey]);\n\n /* Abort helper */\n const abort = React.useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /* Main send/stream function – identical public contract */\n const send = React.useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!anthropic) throw new Error(\"API key missing\");\n if (status !== \"idle\") throw new Error(\"Stream already in progress\");\n\n setStatus(\"thinking\");\n\n const body = buildBody(config, history, userText);\n\n // Build request‑scoped headers (MCP, etc.)\n const extraHeaders: Record = {};\n if ((body as any).mcp_servers?.length) {\n extraHeaders[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n }\n\n // Local abort controller so user can cancel mid‑stream\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n let stream: AsyncIterable;\n try {\n // NOTE: The SDK automatically handles SSE parsing for us.\n stream = (await anthropic.messages.create(body as any, {\n signal: ctrl.signal,\n headers: extraHeaders,\n })) as AsyncIterable;\n } catch (err: any) {\n console.error(\"Failed to call Anthropic API\", err);\n throw err;\n }\n\n setStatus(\"streaming\");\n\n /* streaming state (same as before) */\n const blocks: Record = {};\n\n /* finish latch */\n let finalMsg: AssistantMsg | null = null;\n\n try {\n for await (const ev of stream) {\n console.log(ev);\n // Type narrowing via ev.type (runtime string)\n switch (ev.type) {\n case \"content_block_start\":\n blocks[ev.index] = structuredClone(ev.content_block);\n if (\n blocks[ev.index].type === \"text\"\n && blocks[ev.index].text === undefined\n ) {\n blocks[ev.index].text = \"\";\n }\n break;\n\n case \"content_block_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n }\n break;\n\n case \"message_delta\":\n if (ev.index !== undefined && blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n }\n break;\n\n case \"message_stop\":\n finalMsg = assembleMessage(blocks);\n break;\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n }\n\n /* push live preview on every event except stop */\n if (ev.type !== \"message_stop\") {\n const preview = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b)\n .map((k) => ({\n ...blocks[k],\n _streaming: k === Math.max(...Object.keys(blocks).map(Number)),\n }));\n setLiveBlocks(preview);\n }\n }\n } catch (err) {\n console.error(\"Error during streaming\", err);\n throw err;\n } finally {\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n }\n\n if (!finalMsg) throw new Error(\"Stream ended unexpectedly\");\n return finalMsg;\n },\n [anthropic, config, status],\n );\n\n return { status, liveBlocks, send, abort } as const;\n}",[],[185,239,245],[185,239],{"_104":253,"_95":254,"_157":255,"_159":186,"_160":138,"_161":162,"_163":164,"_106":256,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":257,"_98":274},"15b459ae-41a5-11f0-97a8-76b3cceeab13","utils","f5847123-3790-4918-b8db-093079142016",["D",1749083773738],[258,266],{"_104":259,"_95":260,"_157":261,"_159":255,"_160":138,"_161":162,"_163":22,"_106":262,"_100":32,"_166":200,"_168":263,"_169":22,"_170":-5,"_171":264,"_98":265},"15b44ee6-41a5-11f0-97a8-76b3cceeab13","mcpPrompts.ts","a5eeb1b9-2a1d-4b0a-9b75-43dcad7a60d7",["D",1749083773738],"/**\n * Frontend MCP Prompts Utility\n *\n * Handles fetching prompts from MCP servers directly from the frontend\n * without requiring backend proxy endpoints.\n */\n\nimport { MCPPrompt } from \"../../shared/types.ts\";\n\nexport interface MCPServerConfig {\n id: string;\n name: string;\n url: string;\n authorization_token?: string;\n enabled: boolean;\n}\n\nexport interface MCPPromptsResult {\n success: boolean;\n prompts: MCPPrompt[];\n error?: string;\n}\n\n/**\n * Fetch prompts from a single MCP server\n * @param server - MCP server configuration\n * @returns Promise\n */\nasync function fetchPromptsFromServer(server: MCPServerConfig): Promise {\n if (!server.enabled || !server.url) {\n return [];\n }\n\n try {\n const headers: Record = {\n \"Content-Type\": \"application/json\",\n };\n\n if (server.authorization_token) {\n headers[\"Authorization\"] = `Bearer ${server.authorization_token}`;\n }\n\n // Create abort controller for timeout\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 5000); // 5 second timeout\n\n try {\n // First, initialize the connection\n const initResponse = await fetch(server.url, {\n method: \"POST\",\n headers,\n body: JSON.stringify({\n jsonrpc: \"2.0\",\n method: \"initialize\",\n params: {\n protocolVersion: \"2024-11-05\",\n capabilities: {},\n clientInfo: {\n name: \"chat-client\",\n version: \"1.0.0\",\n },\n },\n id: 1,\n }),\n signal: controller.signal,\n });\n\n if (!initResponse.ok) {\n clearTimeout(timeoutId);\n return [];\n }\n\n // Then fetch prompts\n const promptsResponse = await fetch(server.url, {\n method: \"POST\",\n headers,\n body: JSON.stringify({\n jsonrpc: \"2.0\",\n method: \"prompts/list\",\n params: {},\n id: 2,\n }),\n signal: controller.signal,\n });\n\n clearTimeout(timeoutId);\n\n if (promptsResponse.ok) {\n const data = await promptsResponse.json();\n console.log(`[prompts/list response from ${server.name}]`, data);\n\n if (data.result && data.result.prompts) {\n return data.result.prompts.map((prompt: any) => ({\n name: prompt.name,\n description: prompt.description,\n serverName: server.name,\n serverId: server.id,\n arguments: prompt.arguments,\n }));\n }\n }\n } catch (fetchError: any) {\n clearTimeout(timeoutId);\n\n if (fetchError.name === \"AbortError\") {\n console.warn(`Timeout fetching prompts from ${server.name}`);\n } else {\n throw fetchError;\n }\n }\n\n return [];\n } catch (error) {\n console.warn(`Failed to fetch prompts from ${server.name}:`, error);\n return [];\n }\n}\n\n/**\n * Fetch prompts from all enabled MCP servers\n * @param servers - Array of MCP server configurations\n * @returns Promise\n */\nexport async function fetchMCPPrompts(servers: MCPServerConfig[]): Promise {\n try {\n if (!servers || !Array.isArray(servers)) {\n return {\n success: false,\n prompts: [],\n error: \"Servers array is required\",\n };\n }\n\n const enabledServers = servers.filter(server => server.enabled && server.url);\n\n if (enabledServers.length === 0) {\n return {\n success: true,\n prompts: [],\n };\n }\n\n // Fetch prompts from all enabled servers concurrently\n const promptPromises = enabledServers.map(server => fetchPromptsFromServer(server));\n const promptArrays = await Promise.all(promptPromises);\n\n // Flatten all prompts into a single array\n const allPrompts = promptArrays.flat();\n\n // Add a test prompt for development/testing purposes\n const testPrompt: MCPPrompt = {\n name: \"test\",\n description: \"Testing the system\",\n serverName: \"Built-in\",\n serverId: \"builtin\",\n arguments: [{\n name: \"subsystem\",\n description: \"Sub system to test\",\n required: false,\n }],\n };\n\n return {\n success: true,\n prompts: [testPrompt, ...allPrompts],\n };\n } catch (error: any) {\n return {\n success: false,\n prompts: [],\n error: error.message || \"Unknown error occurred\",\n };\n }\n}\n\n/**\n * Fetch prompts with caching support\n * @param servers - Array of MCP server configurations\n * @param cacheKey - Optional cache key for localStorage\n * @param maxCacheAge - Maximum cache age in milliseconds (default: 5 minutes)\n * @returns Promise\n */\nexport async function fetchMCPPromptsWithCache(\n servers: MCPServerConfig[],\n cacheKey: string = \"mcp_prompts_cache\",\n maxCacheAge: number = 0, // disable cache for now //5 * 60 * 1000 // 5 minutes\n): Promise {\n try {\n // Check cache first\n const cached = localStorage.getItem(cacheKey);\n if (cached) {\n const { timestamp, data } = JSON.parse(cached);\n const age = Date.now() - timestamp;\n\n if (age < maxCacheAge) {\n console.log(\"Using cached MCP prompts\");\n return {\n success: true,\n prompts: data,\n };\n }\n }\n\n // Fetch fresh data\n const result = await fetchMCPPrompts(servers);\n\n // Cache successful results\n if (result.success) {\n localStorage.setItem(\n cacheKey,\n JSON.stringify({\n timestamp: Date.now(),\n data: result.prompts,\n }),\n );\n }\n\n return result;\n } catch (error: any) {\n // If there's an error, try to return cached data as fallback\n const cached = localStorage.getItem(cacheKey);\n if (cached) {\n try {\n const { data } = JSON.parse(cached);\n console.warn(\"Using stale cached prompts due to fetch error:\", error);\n return {\n success: true,\n prompts: data,\n };\n } catch (cacheError) {\n // Cache is corrupted, clear it\n localStorage.removeItem(cacheKey);\n }\n }\n\n return {\n success: false,\n prompts: [],\n error: error.message || \"Unknown error occurred\",\n };\n }\n}\n\n/**\n * Clear the MCP prompts cache\n * @param cacheKey - Cache key to clear\n */\nexport function clearMCPPromptsCache(cacheKey: string = \"mcp_prompts_cache\"): void {\n localStorage.removeItem(cacheKey);\n}",[],[185,254,260],{"_104":267,"_95":268,"_157":269,"_159":255,"_160":138,"_161":162,"_163":22,"_106":270,"_100":32,"_166":200,"_168":271,"_169":22,"_170":-5,"_171":272,"_98":273},"15b454d6-41a5-11f0-97a8-76b3cceeab13","mcpTesting.ts","9387b790-1f79-47e6-a991-2de281e8d7b6",["D",1749083773738],"/**\n * Frontend MCP Server Testing Utility\n * \n * Handles testing MCP server connectivity directly from the frontend\n * without requiring backend proxy endpoints.\n */\n\nexport interface MCPTestResult {\n success: boolean;\n message?: string;\n error?: string;\n status?: number;\n}\n\nexport interface MCPServerConfig {\n id: string;\n name: string;\n url: string;\n authorization_token?: string;\n enabled: boolean;\n}\n\n/**\n * Test MCP server connectivity by attempting to initialize a connection\n * @param server - MCP server configuration\n * @returns Promise\n */\nexport async function testMCPServer(server: MCPServerConfig): Promise {\n if (!server.url) {\n return {\n success: false,\n error: \"URL is required\"\n };\n }\n\n try {\n // Prepare headers\n const headers: Record = {\n \"Content-Type\": \"application/json\",\n };\n\n if (server.authorization_token) {\n headers[\"Authorization\"] = `Bearer ${server.authorization_token}`;\n }\n\n // Create MCP initialize request\n const initializeRequest = {\n jsonrpc: \"2.0\",\n method: \"initialize\",\n params: {\n protocolVersion: \"2024-11-05\",\n capabilities: {},\n clientInfo: {\n name: \"chat-test\",\n version: \"1.0.0\",\n },\n },\n id: 1,\n };\n\n // Make the request with timeout\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout\n\n try {\n const response = await fetch(server.url, {\n method: \"POST\",\n headers,\n body: JSON.stringify(initializeRequest),\n signal: controller.signal,\n });\n\n clearTimeout(timeoutId);\n\n if (response.ok) {\n const data = await response.json();\n \n // Check if it's a valid MCP response\n if (data.jsonrpc === \"2.0\" && (data.result || data.error)) {\n return {\n success: true,\n message: \"MCP server responded successfully\",\n status: response.status,\n };\n } else {\n return {\n success: false,\n error: \"Server responded but not with valid MCP protocol\",\n status: response.status,\n };\n }\n } else {\n return {\n success: false,\n error: `Server returned ${response.status}: ${response.statusText}`,\n status: response.status,\n };\n }\n } catch (fetchError: any) {\n clearTimeout(timeoutId);\n \n if (fetchError.name === \"AbortError\") {\n return {\n success: false,\n error: \"Request timed out - server may be unreachable\",\n };\n }\n \n throw fetchError;\n }\n } catch (error: any) {\n return {\n success: false,\n error: error.message || \"Unknown error occurred\",\n };\n }\n}\n\n/**\n * Test multiple MCP servers concurrently\n * @param servers - Array of MCP server configurations\n * @returns Promise>\n */\nexport async function testMCPServers(servers: MCPServerConfig[]): Promise> {\n const enabledServers = servers.filter(server => server.enabled && server.url);\n \n if (enabledServers.length === 0) {\n return {};\n }\n\n // Test all servers concurrently\n const testPromises = enabledServers.map(async (server) => {\n const result = await testMCPServer(server);\n return { serverId: server.id, result };\n });\n\n const results = await Promise.all(testPromises);\n \n // Convert to record format\n const resultRecord: Record = {};\n results.forEach(({ serverId, result }) => {\n resultRecord[serverId] = result;\n });\n\n return resultRecord;\n}",[],[185,254,268],[185,254],{"_104":276,"_95":277,"_157":278,"_159":186,"_160":138,"_161":162,"_163":164,"_106":279,"_100":32,"_166":280,"_168":281,"_169":22,"_170":-5,"_171":282,"_98":283},"15b45b3e-41a5-11f0-97a8-76b3cceeab13","index.html","0113d482-bb14-4028-a5fe-1c8b7be42573",["D",1749083773738],"file","\n\n \n \n \n Anthropic Chat with MCP\n \n \n \n \n \n \n \n \n \n
\n \n \n",[],[185,277],{"_104":285,"_95":286,"_157":287,"_159":186,"_160":138,"_161":162,"_163":22,"_106":288,"_100":32,"_166":200,"_168":289,"_169":22,"_170":-5,"_171":290,"_98":291},"15b45cba-41a5-11f0-97a8-76b3cceeab13","index.tsx","80a08986-27c1-4355-aefb-55c8927b5752",["D",1749083773738],"/** @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();",[],[185,286],{"_104":293,"_95":294,"_157":295,"_159":186,"_160":138,"_161":162,"_163":22,"_106":296,"_100":32,"_166":280,"_168":297,"_169":22,"_170":-5,"_171":298,"_98":299},"15b45e68-41a5-11f0-97a8-76b3cceeab13","style.css","e69d6361-4922-46ab-82dd-e2be41e623f5",["D",1749083773738],"* {\n box-sizing: border-box;\n}\n\n/* Custom styles for mobile optimization */\n\n.chat-container {\n min-height: 100svh;\n display: flex;\n flex-direction: column;\n background: #edf8ff;\n}\n\n.chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 1em;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n padding-bottom: 10em;\n max-width: 70em;\n}\n\n.empty-messages-placeholder {\n pointer-events: none;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n font-family: serif;\n font-size: 2em;\n opacity: 0.1;\n color: black;\n}\n\n.message-wrapper {\n margin-bottom: 1em;\n position: relative;\n justify-items: start;\n max-width: 90%;\n}\n\n.message-wrapper.user {\n justify-items: end;\n margin-left: auto;\n}\n\n.message {\n word-wrap: break-word;\n display: inline-flex;\n flex-direction: column;\n}\n\n.message-meta {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n transition: opacity 0.2s ease;\n font-size: 0.6875em;\n color: #0000004a;\n font-weight: 400;\n gap: 0.6em;\n align-items: baseline;\n flex-direction: row-reverse;\n padding: 0.5em;\n}\n\n.message-wrapper.user .message-meta {\n justify-content: flex-end;\n flex-direction: row;\n}\n\n.message-action-btn {\n background: none;\n border: none;\n color: #0000004a;\n cursor: pointer;\n font-size: 1em;\n padding: 0 0.3em;\n}\n\n.message-action-btn:hover {\n background: rgba(0, 0, 0, 0.05);\n color: #6b7280;\n}\n\n.retry-btn:hover {\n color: #3b82f6;\n background: rgba(59, 130, 246, 0.1);\n}\n\n.delete-btn:hover {\n color: #ef4444;\n background: rgba(239, 68, 68, 0.1);\n}\n\n.message .anthropic-text-block > div > *:first-child {\n margin-top: 0;\n}\n\n.message .anthropic-text-block > div > *:last-child {\n margin-bottom: 0;\n}\n\n.message.user {\n background: #3b82f6;\n color: white;\n padding: 0.75rem 1em;\n border-radius: 1rem 1rem 0.1rem 1em;\n}\n\n.message.assistant {\n background: white;\n padding: 0.75rem 1em;\n border-radius: 1rem 1rem 1rem 0.1em;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.message.system {\n background: #fef3c7;\n border: 1px solid #f59e0b;\n padding: 0.5rem 0.75em;\n border-radius: 0.5em;\n font-size: 0.875em;\n margin: 0 auto;\n max-width: 90%;\n text-align: center;\n}\n\n.message pre {\n display: block;\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.375em;\n padding: 0.75em;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.75em;\n line-height: 1.4;\n overflow-x: auto;\n white-space: pre-wrap;\n word-break: break-word;\n color: #374151;\n margin: 0;\n}\n\n.chat-footer {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n background: white;\n border-top: 1px solid #e2e8f0;\n box-shadow:\n 0 -10px 25px -5px rgba(0, 0, 0, 0.1),\n 0 -10px 10px -5px rgba(0, 0, 0, 0.04);\n border-radius: 2rem 2rem 0 0;\n max-width: 81em;\n margin: 0 auto;\n}\n\n.chat-input-container {\n padding: 1em;\n display: flex;\n gap: 0.5em;\n align-items: flex-end;\n}\n\n.chat-input {\n flex: 1;\n min-height: 2.5em;\n max-height: 6em;\n padding: 0.75em;\n border: 0 none;\n border-radius: 0.5em;\n resize: none;\n font-family: inherit;\n font-size: 1em;\n outline: none;\n transition: border-color 0.2s;\n}\n\n.footer-controls {\n display: flex;\n gap: 0.25em;\n align-items: flex-end;\n}\n\n.footer-button {\n background: none;\n border: none;\n color: #6b7280;\n cursor: pointer;\n padding: 0.5em;\n border-radius: 0.5em;\n transition: all 0.2s;\n font-size: 1em;\n width: 2.5em;\n height: 2.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.footer-button:hover {\n background: #f3f4f6;\n color: #374151;\n}\n\n.chat-status {\n padding: 0.5rem 1em;\n background: #f8fafc;\n border-top: 1px solid #f1f5f9;\n display: flex;\n align-items: center;\n justify-content: space-between;\n}\n\n.status-text {\n font-size: 0.75em;\n color: #6b7280;\n flex: 1;\n text-align: center;\n}\n\n.status-link-button {\n background: none;\n border: none;\n color: #3b82f6;\n cursor: pointer;\n font-size: 0.75em;\n padding: 0.25rem 0.5em;\n border-radius: 0.25em;\n transition: all 0.2s;\n text-decoration: none;\n}\n\n.status-link-button:hover {\n background: #f3f4f6;\n color: #2563eb;\n}\n\n.chat-status .fa-circle-check {\n color: #1dd31d;\n}\n\n.chat-input:focus {\n xborder-color: #3b82f6;\n xbox-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.send-button {\n background: #3b82f6;\n color: white;\n border: none;\n border-radius: 50%;\n width: 2.5em;\n height: 2.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: background-color 0.2s;\n flex-shrink: 0;\n font-size: 1em;\n position: absolute;\n right: 1em;\n}\n\n.send-button:hover:not(:disabled) {\n background: #2563eb;\n}\n\n.send-button:disabled {\n background: #9ca3af;\n cursor: not-allowed;\n}\n\n.send-button.stop-button {\n background: #ef4444;\n}\n\n.send-button.stop-button:hover:not(:disabled) {\n background: #dc2626;\n}\n\n/* Streaming message styles */\n.message.streaming {\n background: white;\n border: 1px solid #e2e8f0;\n padding: 0.75rem 1em;\n border-radius: 1rem 1rem 1rem 0.25em;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n border-left: 3px solid #3b82f6;\n}\n\n.streaming-cursor {\n display: inline-block;\n background: #3b82f6;\n color: #3b82f6;\n animation: streaming-blink 1s infinite;\n margin-left: 2px;\n}\n\n@keyframes streaming-blink {\n 0%, 50% {\n opacity: 1;\n }\n 51%, 100% {\n opacity: 0;\n }\n}\n\n.settings-overlay {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n z-index: 50;\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1em;\n}\n\n.settings-panel {\n background: white;\n border-radius: 1em;\n padding: 1.5em;\n width: 100%;\n max-width: 28em;\n max-height: 80vh;\n overflow-y: auto;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);\n}\n\n.settings-header {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n}\n\n.settings-footer {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n margin-top: 1em;\n gap: 0.5em;\n}\n\n.close-button {\n background: none;\n border: none;\n font-size: 1.5em;\n cursor: pointer;\n color: #6b7280;\n padding: 0.25em;\n border-radius: 0.25em;\n}\n\n.close-button:hover {\n background: #f3f4f6;\n}\n\n.form-group {\n margin-bottom: 1.5em;\n}\n\n.form-label {\n display: block;\n font-weight: 600;\n margin-bottom: 0.5em;\n color: #374151;\n}\n\n.form-input {\n width: 100%;\n padding: 0.75em;\n border: 1px solid #d1d5db;\n border-radius: 0.5em;\n font-size: 1em;\n transition: border-color 0.2s;\n margin-bottom: 0.4em;\n}\n\n.form-input:focus {\n outline: none;\n border-color: #3b82f6;\n box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);\n}\n\n.mcp-servers-list {\n display: flex;\n flex-direction: column;\n gap: 0.4em;\n}\n.mcp-server {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.5em;\n padding: 0.6em;\n}\n\n.mcp-server-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.75em;\n}\n\n.mcp-server-name {\n font-weight: 600;\n color: #374151;\n}\n\n.mcp-server-actions {\n display: flex;\n align-items: center;\n justify-content: space-evenly;\n gap: 0.3em;\n}\n\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 3em;\n height: 1.5em;\n font-size: 0.7em;\n}\n\n.toggle-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background-color: #ccc;\n transition: 0.4s;\n border-radius: 1.5em;\n}\n\n.toggle-slider:before {\n position: absolute;\n content: \"\";\n height: 1.125em;\n width: 1.125em;\n left: 0.1875em;\n bottom: 0.1875em;\n background-color: white;\n transition: 0.4s;\n border-radius: 50%;\n}\n\ninput:checked + .toggle-slider {\n background-color: #3b82f6;\n}\n\ninput:checked + .toggle-slider:before {\n transform: translateX(1.5em);\n}\n\n.button {\n padding: 0.75em 1.5em;\n border: none;\n border-radius: 0.5em;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 0.875em;\n}\n\n.button-primary {\n background: #3b82f6;\n color: white;\n}\n\n.button-primary:hover {\n background: #2563eb;\n}\n\n.button-secondary {\n background: #f3f4f6;\n color: #374151;\n border: 1px solid #d1d5db;\n}\n\n.button-secondary:hover {\n background: #e5e7eb;\n}\n\n.button-danger {\n background: #ef4444;\n color: white;\n}\n\n.button-danger:hover {\n background: #dc2626;\n}\n\n.btn-small {\n font-size: 0.6em;\n padding: 0.3em 0.5em;\n}\n\n.loading-indicator {\n display: flex;\n align-items: center;\n gap: 0.5em;\n color: #6b7280;\n font-size: 0.875em;\n padding: 0.5rem 1em;\n}\n\n.loading-dots {\n display: flex;\n gap: 0.25em;\n}\n\n.loading-dot {\n width: 0.375em;\n height: 0.375em;\n background: #6b7280;\n border-radius: 50%;\n animation: loading-bounce 1.4s ease-in-out infinite both;\n}\n\n.loading-dot:nth-child(1) {\n animation-delay: -0.32s;\n}\n.loading-dot:nth-child(2) {\n animation-delay: -0.16s;\n}\n\n@keyframes loading-bounce {\n 0%, 80%, 100% {\n transform: scale(0);\n }\n 40% {\n transform: scale(1);\n }\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n .chat-input-container {\n padding: 0.75em;\n }\n\n .chat-status {\n padding: 0.375rem 0.75em;\n }\n\n .status-text {\n font-size: 0.6875em;\n }\n\n .status-link-button {\n font-size: 0.6875em;\n padding: 0.125rem 0.25em;\n }\n\n .settings-overlay {\n padding: 0.5em;\n }\n\n .settings-panel {\n padding: 1em;\n border-radius: 0.75em;\n }\n\n .message-wrapper {\n max-width: 100%;\n }\n}\n\n/* Prevent zoom on input focus on iOS */\n@media screen and (-webkit-min-device-pixel-ratio: 0) {\n .chat-input,\n .form-input {\n font-size: 16px;\n }\n}\n\n/* MCP MINIMAL */\n\n.mcp-details {\n margin-top: 0.5em;\n}\n\n.mcp-details + .mcp-details {\n margin-top: 0;\n margin-bottom: 0.5em;\n}\n\n.mcp-details > summary {\n font-style: italic;\n color: rgba(0, 0, 0, 0.2);\n font-family: serif;\n cursor: pointer;\n}\n.mcp-details pre {\n position: relative;\n}\n\n.mcp-details pre > .copy {\n position: absolute;\n top: 0.2em;\n right: 0.2em;\n display: flex;\n\n border-radius: 3px;\n border: 1px solid #00000021;\n background-color: white;\n cursor: pointer;\n padding: 0.3em;\n color: #0000005c;\n}\n\n.mcp-details pre > .copy:hover {\n color: #666;\n}\n\n.test-button {\n background: #f3f4f6;\n border: 1px solid #d1d5db;\n border-radius: 0.375em;\n padding: 0.375rem 0.75em;\n font-size: 0.75em;\n cursor: pointer;\n transition: all 0.2s;\n min-width: 2.5em;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.test-button:hover:not(:disabled) {\n background: #e5e7eb;\n border-color: #9ca3af;\n}\n\n.test-button:disabled {\n cursor: not-allowed;\n opacity: 0.6;\n}\n\n/* Command Palette Styles */\n.command-palette {\n background: white;\n border: 1px solid #e2e8f0;\n border-radius: 0.5em;\n box-shadow:\n 0 -10px 25px -5px rgba(0, 0, 0, 0.1),\n 0 -10px 10px -5px rgba(0, 0, 0, 0.04),\n 0 5px 10px -5px rgba(0, 0, 0, 0.1);\n max-height: 300px;\n overflow-y: auto;\n z-index: 1000;\n min-width: 300px;\n max-width: 400px;\n}\n\n.command-palette-item {\n padding: 0.3em 0.35em;\n cursor: pointer;\n border-bottom: 1px solid #f1f5f9;\n transition: background-color 0.2s;\n}\n\n.command-palette-item:last-child {\n border-bottom: none;\n}\n\n.command-palette-item:hover,\n.command-palette-item.selected {\n background: #c3e1ff;\n}\n\n.command-palette-item.disabled {\n cursor: default;\n color: #6b7280;\n font-style: italic;\n}\n\n.command-palette-item-main {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.25em;\n}\n\n.command-palette-name {\n font-weight: 600;\n color: #374151;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.875em;\n}\n\n.command-palette-server {\n font-size: 0.75em;\n color: #6b7280;\n background: #f3f4f6;\n padding: 0.125em 0.375em;\n border-radius: 0.25em;\n}\n\n.command-palette-description {\n font-size: 0.75em;\n color: #6b7280;\n margin-bottom: 0.25em;\n line-height: 1.3;\n}\n\n.command-palette-args {\n font-size: 0.6875em;\n color: #9ca3af;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n}\n\n.loading-shimmer,\n.loading-shimmer-pure-text {\n --shimmer-contrast: #ffffffbf;\n --text-secondary: #5d5d5d;\n text-fill-color: transparent;\n -webkit-text-fill-color: transparent;\n animation-delay: 0.5s;\n animation-duration: 3s;\n animation-iteration-count: infinite;\n animation-name: loading-shimmer;\n background: var(--text-secondary)\n linear-gradient(\n to right,\n var(--text-secondary)0,\n var(--shimmer-contrast)40%,\n var(--shimmer-contrast)60%,\n var(--text-secondary)100%\n );\n background: var(--text-secondary)\n -webkit-gradient(\n linear,\n 100% 0,\n 0 0,\n from(var(--text-secondary)),\n color-stop(0.4, var(--shimmer-contrast)),\n color-stop(0.6, var(--shimmer-contrast)),\n to(var(--text-secondary))\n );\n -webkit-background-clip: text;\n background-clip: text;\n background-repeat: no-repeat;\n background-size: 50% 200%;\n display: inline-block;\n}\n@keyframes loading-shimmer {\n 0% {\n background-position: -100% 0;\n }\n to {\n background-position: 250% 0;\n }\n}\n\nsummary {\n outline: none;\n}\n\nsummary::-webkit-details-marker,\nsummary::marker {\n content: \"\\f121\";\n font-family: \"FontAwesome\";\n font-size: 0.8em;\n font-style: normal;\n}",[],[185,294],[185],{"_104":302,"_95":303,"_157":304,"_159":-5,"_160":138,"_161":162,"_163":164,"_106":305,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":306,"_98":315},"15b46f66-41a5-11f0-97a8-76b3cceeab13","shared","81ee3f08-4d8c-44d0-99bb-4205f032c1e4",["D",1749083773738],[307],{"_104":308,"_95":309,"_157":310,"_159":304,"_160":138,"_161":162,"_163":22,"_106":311,"_100":32,"_166":200,"_168":312,"_169":22,"_170":-5,"_171":313,"_98":314},"15b46c64-41a5-11f0-97a8-76b3cceeab13","types.ts","ed230579-2972-482a-8fe6-1625b7a9e4c4",["D",1749083773738],"// 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 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}",[],[303,309],[303],{"_104":317,"_95":318,"_157":319,"_159":-5,"_160":138,"_161":162,"_163":22,"_106":320,"_100":32,"_166":280,"_168":321,"_169":22,"_170":-5,"_171":322,"_98":323},"15b474a2-41a5-11f0-97a8-76b3cceeab13","README.md","fd6f977d-92b5-4a65-8417-31fa1ca7ad8f",["D",1749083773738],"# Anthropic Streaming Chat with MCP\n\nA mobile-optimized single page chat application that uses the Anthropic Messages API with **real-time streaming** and MCP (Model Context Protocol) server support.\n\nSource: https://www.val.town/x/c15r/Chat \n\nLive server: https://c15r--7471cb243cdd11f08caa9e149126039e.web.val.run\n\nBundles Contextual MCP server by default: https://c15r--1564b217248f4a97a4d37bfe82cb8b19.web.val.run/mcp\n\n\n\n## Features\n\n- **🚀 Real-time streaming responses** - See Claude's responses appear word-by-word as they're generated\n- **⏹️ Stream control** - Stop streaming at any time with the stop button\n- Full-screen mobile-optimized chat interface\n- Direct client-side Anthropic API integration with server-side streaming proxy\n- **Model selection** - Choose between different Claude models (3.5 Sonnet, 3.5 Haiku, 3 Opus, etc.) without clearing chat history\n- Configurable MCP servers with localStorage persistence\n- **Clean footer layout** with text-based settings and clear chat links positioned alongside status text\n- **Enhanced MCP response handling** with collapsible sections for complex tool use and results\n- **Persistent chat history** - messages are saved to localStorage and restored on page load\n- **Structured display of MCP tool calls and results** to prevent truncation\n- **Frontend MCP server testing** - test button for each MCP server with visual status indicators (✅/❌)\n- **Frontend MCP prompt fetching** - prompts are fetched directly from MCP servers with caching support\n\n## Streaming Implementation\n\nThis app implements Anthropic's official streaming guide using:\n- Server-Sent Events (SSE) for real-time communication\n- Proper event parsing (`message_start`, `content_block_delta`, `message_stop`, etc.)\n- Content block reassembly for text, tool use, and thinking responses\n- Error handling and keep-alive support\n- Token usage tracking\n- Support for all delta types (text, JSON, thinking)\n\n## Project Structure\n\n```\n├── backend/\n│ └── index.ts # Hono server with static file serving\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # React app entry point\n│ ├── components/\n│ │ ├── App.tsx # Main app component\n│ │ ├── StreamingChat.tsx # Real-time streaming chat interface\n│ │ ├── Settings.tsx # Settings flyout\n│ │ ├── CommandPalette.tsx # MCP prompt command palette\n│ │ └── Message.tsx # Individual message component\n│ ├── hooks/\n│ │ └── useAnthropicStream.tsx # Streaming chat hook\n│ ├── utils/\n│ │ ├── mcpTesting.ts # Frontend MCP server testing\n│ │ └── mcpPrompts.ts # Frontend MCP prompt fetching\n│ └── style.css # Custom styles with streaming animations\n├── shared/\n│ └── types.ts # Shared TypeScript types for streaming\n└── README.md\n```\n\n## Configuration\n\nThe app stores configuration and chat history in localStorage:\n- `anthropic_api_key`: Your Anthropic API key\n- `selected_model`: The chosen Claude model (defaults to claude-3-5-sonnet-20241022)\n- `mcp_servers`: Array of configured MCP servers\n- `chat_messages`: Complete chat history (persists between page loads)\n\n## API Endpoints\n\n- `GET /` - Main application (serves frontend)\n- `GET /frontend/*` - Frontend static files\n- `GET /shared/*` - Shared utility files\n\n**Note**: MCP server testing and prompt fetching are now handled directly on the frontend for improved performance and reduced server load.\n\n## Usage\n\n1. Open the app at the provided URL\n2. Click \"Settings\" in the footer to configure your Anthropic API key and select your preferred Claude model\n3. Add/remove/toggle MCP servers as needed\n4. Use the \"Test\" button next to each MCP server to verify connectivity (shows ✅ for success, ❌ for errors)\n5. Start chatting with Claude and watch responses stream in real-time!\n5. Use the stop button (⏹️) to interrupt streaming at any time\n6. Switch models anytime in settings without losing your chat history\n7. Your chat history and settings will be automatically saved and restored when you return\n\n## Default MCP Server\n\nThe app comes pre-configured with the Val Town MCP server:\n- **Name**: Val Town MCP\n- **URL**: `https://c15r--81c497c63c0a11f081e29e149126039e.web.val.run/mcp`\n- **Status**: Enabled by default (you'll need to add your authorization token)\n\n## Features in Detail\n\n- **Mobile-First Design**: Optimized for mobile devices with touch-friendly controls\n- **Real-time Streaming**: Watch Claude's responses appear word-by-word as they're generated\n- **Stream Control**: Stop streaming responses at any time with the stop button\n- **MCP Integration**: Support for multiple Model Context Protocol servers\n- **Enhanced MCP Display**: Collapsible sections for tool calls and results with proper JSON formatting\n- **Unobtrusive Footer Controls**: Settings (⚙️) and clear chat (🗑️) buttons positioned in the footer alongside the input\n- **Persistent Chat History**: All messages automatically saved to localStorage and restored on page load\n- **Persistent Settings**: All configuration stored in browser localStorage\n- **Auto-scroll**: Messages automatically scroll to bottom during streaming\n- **Auto-resize**: Input field grows with content\n- **Error Handling**: Clear error messages for API issues with stream recovery\n- **Loading States**: Visual feedback during API calls and streaming\n- **Structured Responses**: MCP tool use and results are displayed in organized, collapsible sections\n- **Clean Interface**: Maximized chat area with no header, footer contains all controls\n- **Streaming Animations**: Visual cursor and highlighting for active streaming responses",[],[318],{"_104":325,"_95":326,"_157":327,"_159":-5,"_160":138,"_161":101,"_163":22,"_106":328,"_100":32,"_166":200,"_168":72,"_169":22,"_170":-5,"_171":329,"_98":330},"4b6a1df4-41b4-11f0-a35d-76b3cceeab13","new-file-2498.tsx","4b6a1ea8-41b4-11f0-a35d-76b3cceeab13",["D",1749090306354],[],[326],"files",[154,173,183,189,195,204,212,220,228,237,243,252,258,266,275,284,292,301,307,316,324],"counts",{"_335":32,"_336":162,"_337":32,"_338":32},"pulls","branches","forks","envVars","contents",[],{"_104":276,"_95":277,"_157":278,"_159":186,"_160":138,"_161":162,"_163":164,"_106":342,"_100":32,"_166":280,"_168":281,"_169":22,"_170":-5,"_98":343},["D",1749083773738],[185,277],"upstreamProject",{"_104":146,"_95":96,"_112":-5,"_113":-5,"_110":111,"_23":346},{"_93":347,"_130":348},"c15r","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb2RJNlc1czZ1NlpZRmoxdGJ2eFVNNVhmeTYifQ","upstreamBranch",{"_104":141,"_106":351,"_352":353,"_95":43,"_139":146,"_100":354,"_140":-5,"_142":-5,"_355":356,"_108":-5,"_151":22,"_110":111,"_150":347,"_16":148,"_149":96},["D",1748557815516],"updatedAt",["D",1752275433429],1417,"lockfileKey","1758076718455-esm.town_v_c15r_Chat@1417-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":363,"_152":368,"_331":432,"_280":433,"_339":435,"_436":437,"_440":22,"_441":-5,"_442":443,"_444":445,"_446":447},{"_104":105,"_95":96,"_106":364,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":365,"_132":366,"_135":367,"_151":22},["D",1749083773738],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":141,"_142":143,"_144":111,"_145":146,"_147":148,"_149":96,"_150":94},[369,375,420,426,429],{"_104":155,"_95":156,"_157":158,"_159":-5,"_160":138,"_161":162,"_163":164,"_106":165,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":370,"_98":374},[371],{"_104":174,"_95":175,"_157":176,"_159":158,"_160":138,"_161":162,"_163":164,"_106":177,"_100":32,"_166":178,"_168":179,"_169":22,"_170":-5,"_171":372,"_98":373},[],[156,175],[156],{"_104":184,"_95":185,"_157":186,"_159":-5,"_160":138,"_161":162,"_163":164,"_106":187,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":376,"_98":419},[377,395,401,410,413,416],{"_104":190,"_95":191,"_157":192,"_159":186,"_160":138,"_161":162,"_163":164,"_106":193,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":378,"_98":394},[379,382,385,388,391],{"_104":196,"_95":197,"_157":198,"_159":192,"_160":138,"_161":162,"_163":22,"_106":199,"_100":32,"_166":200,"_168":201,"_169":22,"_170":-5,"_171":380,"_98":381},[],[185,191,197],{"_104":205,"_95":206,"_157":207,"_159":192,"_160":138,"_161":162,"_163":22,"_106":208,"_100":32,"_166":200,"_168":209,"_169":22,"_170":-5,"_171":383,"_98":384},[],[185,191,206],{"_104":213,"_95":214,"_157":215,"_159":192,"_160":138,"_161":162,"_163":22,"_106":216,"_100":32,"_166":200,"_168":217,"_169":22,"_170":-5,"_171":386,"_98":387},[],[185,191,214],{"_104":221,"_95":222,"_157":223,"_159":192,"_160":138,"_161":162,"_163":22,"_106":224,"_100":32,"_166":200,"_168":225,"_169":22,"_170":-5,"_171":389,"_98":390},[],[185,191,222],{"_104":229,"_95":230,"_157":231,"_159":192,"_160":138,"_161":162,"_163":22,"_106":232,"_100":32,"_166":200,"_168":233,"_169":22,"_170":-5,"_171":392,"_98":393},[],[185,191,230],[185,191],{"_104":238,"_95":239,"_157":240,"_159":186,"_160":138,"_161":162,"_163":164,"_106":241,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":396,"_98":400},[397],{"_104":244,"_95":245,"_157":246,"_159":240,"_160":138,"_161":162,"_163":22,"_106":247,"_100":32,"_166":200,"_168":248,"_169":22,"_170":-5,"_171":398,"_98":399},[],[185,239,245],[185,239],{"_104":253,"_95":254,"_157":255,"_159":186,"_160":138,"_161":162,"_163":164,"_106":256,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":402,"_98":409},[403,406],{"_104":259,"_95":260,"_157":261,"_159":255,"_160":138,"_161":162,"_163":22,"_106":262,"_100":32,"_166":200,"_168":263,"_169":22,"_170":-5,"_171":404,"_98":405},[],[185,254,260],{"_104":267,"_95":268,"_157":269,"_159":255,"_160":138,"_161":162,"_163":22,"_106":270,"_100":32,"_166":200,"_168":271,"_169":22,"_170":-5,"_171":407,"_98":408},[],[185,254,268],[185,254],{"_104":276,"_95":277,"_157":278,"_159":186,"_160":138,"_161":162,"_163":164,"_106":279,"_100":32,"_166":280,"_168":281,"_169":22,"_170":-5,"_171":411,"_98":412},[],[185,277],{"_104":285,"_95":286,"_157":287,"_159":186,"_160":138,"_161":162,"_163":22,"_106":288,"_100":32,"_166":200,"_168":289,"_169":22,"_170":-5,"_171":414,"_98":415},[],[185,286],{"_104":293,"_95":294,"_157":295,"_159":186,"_160":138,"_161":162,"_163":22,"_106":296,"_100":32,"_166":280,"_168":297,"_169":22,"_170":-5,"_171":417,"_98":418},[],[185,294],[185],{"_104":302,"_95":303,"_157":304,"_159":-5,"_160":138,"_161":162,"_163":164,"_106":305,"_100":32,"_166":167,"_168":-5,"_169":22,"_170":-5,"_171":421,"_98":425},[422],{"_104":308,"_95":309,"_157":310,"_159":304,"_160":138,"_161":162,"_163":22,"_106":311,"_100":32,"_166":200,"_168":312,"_169":22,"_170":-5,"_171":423,"_98":424},[],[303,309],[303],{"_104":317,"_95":318,"_157":319,"_159":-5,"_160":138,"_161":162,"_163":22,"_106":320,"_100":32,"_166":280,"_168":321,"_169":22,"_170":-5,"_171":427,"_98":428},[],[318],{"_104":325,"_95":326,"_157":327,"_159":-5,"_160":138,"_161":101,"_163":22,"_106":328,"_100":32,"_166":200,"_168":72,"_169":22,"_170":-5,"_171":430,"_98":431},[],[326],[369,371,375,377,379,382,385,388,391,395,397,401,403,406,410,413,416,420,422,426,429],{"_104":276,"_95":277,"_157":278,"_159":186,"_160":138,"_161":162,"_163":164,"_106":342,"_100":32,"_166":280,"_168":281,"_169":22,"_170":-5,"_98":434},[185,277],[],"upstream",{"_104":141,"_106":438,"_352":439,"_95":43,"_139":146,"_100":354,"_140":-5,"_142":-5,"_355":356,"_108":-5,"_151":22,"_110":111,"_150":347,"_16":148,"_149":96},["D",1748557815516],["D",1752275433429],"showCompareCallout","pull","ahead",4,"behind",834,"templates",[],"actionData","errors"]

AIWB

Chat