Anthropic Chat with MCP

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

\n );\n}",[],[173,180,187],{"_102":197,"_95":198,"_143":199,"_145":181,"_146":132,"_147":200,"_149":150,"_104":201,"_99":202,"_152":192,"_154":203,"_155":27,"_156":-5,"_157":204,"_98":205},"fc5d6220-3e7a-11f0-bb1f-76b3cceeab13","Message.tsx","629c8178-3cdd-11f0-8042-9e149126039e",132,["D",1748735838931],14,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Message } from \"./App.tsx\";\n\ninterface MessageProps {\n message: Message;\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 }: MessageProps) {\n const [expandedSections, setExpandedSections] = useState>(\n new Set(),\n );\n\n const toggleSection = (sectionId: string) => {\n const newExpanded = new Set(expandedSections);\n newExpanded.has(sectionId)\n ? newExpanded.delete(sectionId)\n : newExpanded.add(sectionId);\n setExpandedSections(newExpanded);\n };\n\n /* ═══════ Utilities shared by several renderers ════════════════════════════ */\n\n const renderCollapsibleSection = (\n title: string,\n content: any,\n sectionId: string,\n ) => {\n const affordance = content?.result?.output?.html;\n const isExpanded = affordance || expandedSections.has(sectionId);\n\n return (\n

\n toggleSection(sectionId)}\n >\n {isExpanded ? \"▼\" : \"▶\"}\n {title}\n \n\n {isExpanded && (\n

\n {affordance\n ?

\n : (\n

\n                {typeof content === \"string\"\n                  ? content\n                  : JSON.stringify(content, null, 2)}\n

\n )}\n

\n );\n };\n\n const formatRegularContent = (content: string) =>

;\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 {formatRegularContent(\n `\\`\\`\\`${blk.language ?? \"\"}\\n${blk.text ?? \"\"}\\n\\`\\`\\``,\n )}\n

\n );\n\n case \"mcp_tool_use\":\n return (\n

[mcp] {blk.name}

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

\n );\n\n case \"mcp_tool_result\":\n return (\n

[mcp result] {blk.is_error ? \"(Error)\" : \"Ok\"}

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

\n );\n\n /* Unknown or future block types */\n default:\n return (\n

{blk.type}

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

\n );\n }\n })}\n

\n );\n\n /* ═══════ 2. Existing MCP-aware string renderer (unchanged) ═══════════════ */\n\n const renderStructuredMCPResponse = (response: any) => {\n const sections: JSX.Element[] = [];\n\n response.content.forEach((item: any, index: number) => {\n const sectionId = `structured-${index}`;\n\n switch (item.type) {\n case \"text\":\n sections.push(\n

\n {formatRegularContent(item.text || \"\")}\n

,\n );\n break;\n\n case \"mcp_tool_use\":\n sections.push(\n renderCollapsibleSection(\n `${item.name} (${item.server_name})`,\n { id: item.id, input: item.input },\n sectionId,\n ),\n );\n break;\n\n case \"mcp_tool_result\":\n const isError = item.is_error;\n const resultContent = item.content?.[0]?.text;\n let parsedResult = resultContent;\n\n try {\n if (resultContent) parsedResult = JSON.parse(resultContent);\n } catch {\n /* leave as string */\n }\n\n sections.push(\n \n {renderCollapsibleSection(\n `${isError ? \"❌\" : \"\"} Result ${isError ? \"(Error)\" : \"(Success)\"}`,\n { tool_use_id: item.tool_use_id, result: parsedResult },\n sectionId,\n )}\n

,\n );\n break;\n\n default:\n sections.push(\n renderCollapsibleSection(\n `📄 ${item.type || \"Unknown Content\"}`,\n item,\n sectionId,\n ),\n );\n }\n });\n\n return

{sections}

;\n };\n\n const detectAndFormatMCPContent = (content: string) => {\n // Try full structured parse first\n try {\n const parsed = JSON.parse(content);\n if (parsed.content && Array.isArray(parsed.content)) {\n return renderStructuredMCPResponse(parsed);\n }\n } catch {\n /* fall through */\n }\n\n // Fallback: heuristic detection line-by-line\n const lines = content.split(\"\\n\");\n const sections: JSX.Element[] = [];\n let currentSection = \"\";\n let counter = 0;\n\n for (const line of lines) {\n const emitPlain = () => {\n if (currentSection.trim()) {\n sections.push(\n

\n {formatRegularContent(currentSection.trim())}\n

,\n );\n currentSection = \"\";\n }\n };\n\n // Tool calls\n if (line.includes(\"tool_use\") || line.includes(\"function_call\")) {\n emitPlain();\n try {\n sections.push(\n renderCollapsibleSection(\n \"🔧 Tool Call\",\n JSON.parse(line),\n `tool-${counter++}`,\n ),\n );\n continue;\n } catch {}\n }\n\n // Tool results\n if (line.includes(\"tool_result\") || line.includes(\"function_result\")) {\n emitPlain();\n try {\n sections.push(\n renderCollapsibleSection(\n \"📊 Tool Result\",\n JSON.parse(line),\n `result-${counter++}`,\n ),\n );\n continue;\n } catch {}\n }\n\n // Possible MCP JSON blobs\n if (line.trim().startsWith(\"{\") && line.includes(\"mcp\")) {\n emitPlain();\n try {\n sections.push(\n renderCollapsibleSection(\n \"🔗 MCP Response\",\n JSON.parse(line),\n `mcp-${counter++}`,\n ),\n );\n continue;\n } catch {}\n }\n\n // Regular text\n currentSection += line + \"\\n\";\n }\n\n // Flush remaining plain text\n if (currentSection.trim()) {\n sections.push(\n

\n {formatRegularContent(currentSection.trim())}\n

,\n );\n }\n\n return sections.length ?

{sections}

: (\n formatRegularContent(content)\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 }\n\n // 2. Regular / final path (string)\n if (typeof content === \"string\") {\n return detectAndFormatMCPContent(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

{renderContent()}

;\n}",[],[173,180,198],{"_102":207,"_95":208,"_143":209,"_145":181,"_146":132,"_147":210,"_149":150,"_104":211,"_99":148,"_152":192,"_154":212,"_155":27,"_156":-5,"_157":213,"_98":214},"436610c6-3e31-11f0-9553-76b3cceeab13","Settings.tsx","7048e212-3cdd-11f0-8db8-9e149126039e",112,["D",1748704175345],"/** @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\";\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 response = await fetch('/api/test-mcp', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({\n url: server.url,\n authorization_token: server.authorization_token,\n }),\n });\n\n const result = await response.json();\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

Settings

\n \n

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

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

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

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

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

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

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

\n MCP Servers\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=\"test-button\"\n title={getTestButtonTitle(server)}\n >\n {getTestButtonContent(server)}\n \n \n toggleMcpServer(server.id)}\n />\n \n \n removeMcpServer(server.id)}\n className=\"text-red-600 hover:text-red-800 p-1\"\n title=\"Remove server\"\n >\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 {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}",[],[173,180,208],{"_102":216,"_95":217,"_143":218,"_145":181,"_146":132,"_147":219,"_149":150,"_104":220,"_99":221,"_152":192,"_154":222,"_155":27,"_156":-5,"_157":223,"_98":224},"f0e93220-3f06-11f0-8ee8-76b3cceeab13","StreamingChat.tsx","10af5008-3d4a-11f0-8eb6-76b3cceeab13",156,["D",1748795949255],38,"/** @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 } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\";\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\ntype 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/headers helpers (unchanged) */\nfunction buildBody(config: AppConfig, history: Message[], userText: string) {\n const mcp = config.mcpServers.filter((s) => s.enabled && s.url).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 };\n}\nfunction buildHeaders(apiKey: string, usingMCP: boolean) {\n const h: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) h[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return h;\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 const msg = { role: \"assistant\", content };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction 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 /* 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 */\n const send = React.useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n\n /* streaming state */\n const blocks: Record = {};\n let fullBufferDebug = \"\";\n\n /* finish latch */\n let finished = false;\n let finalMsg: AssistantMsg | null = null;\n\n /* EventSource parser */\n const parser = createParser((evt: ParsedEvent | ReconnectInterval) => {\n if (evt.type !== \"event\") return;\n\n // keep entire raw stream for debug\n fullBufferDebug += `event: ${evt.event ?? \"message\"}\\ndata: ${evt.data}\\n\\n`;\n\n try {\n const ev = JSON.parse(evt.data) as AnthropicStreamEvent;\n console.info(\"[ev]\", ev.type, 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 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 break;\n\n case \"message_delta\":\n if (ev.index !== undefined && blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\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 break;\n\n case \"message_stop\":\n finished = true;\n finalMsg = assembleMessage(blocks);\n\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n\n reader.cancel(); // stop lower-level reading\n localStorage.setItem(\"fullBufferDebug\", fullBufferDebug);\n localStorage.setItem(\"fullBufferResult\", JSON.stringify(blocks));\n return; // exit parser callback\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(\"Unexpected event type\", ev.type, ev);\n }\n } catch (e) {\n console.warn(\"Failed to handle SSE frame\", e);\n }\n });\n\n /* feed parser with chunks */\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n parser.feed(decoder.decode(value, { stream: true }));\n }\n\n /* normal completion */\n if (finished && finalMsg) return finalMsg;\n\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n setInput(e.target.value)}\n onKeyPress={handleKeyPress}\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

\n \n Clear\n \n\n \n Claude Chat • {config.mcpServers.filter((s) => s.enabled).length}/\n {config.mcpServers.length} MCP servers enabled • {streaming ? \"Streaming…\" : \"Ready\"}\n \n\n \n Settings\n \n

\n \n );\n}",[],[173,180,217],[173,180],{"_102":227,"_95":228,"_143":229,"_145":174,"_146":132,"_147":230,"_149":150,"_104":231,"_99":232,"_152":233,"_154":234,"_155":27,"_156":-5,"_157":235,"_98":236},"0a6fd6d6-3e71-11f0-8512-76b3cceeab13","index.html","2f3fa440-3cdd-11f0-acd6-9e149126039e",120,["D",1748731567571],3,"file","\n\n \n \n \n Anthropic Chat with MCP\n \n \n \n \n \n \n

\n \n \n",[],[173,228],{"_102":238,"_95":239,"_143":240,"_145":174,"_146":132,"_147":241,"_149":150,"_104":242,"_99":31,"_152":192,"_154":243,"_155":27,"_156":-5,"_157":244,"_98":245},"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();",[],[173,239],{"_102":247,"_95":248,"_143":249,"_145":174,"_146":132,"_147":131,"_149":150,"_104":250,"_99":251,"_152":233,"_154":252,"_155":27,"_156":-5,"_157":253,"_98":254},"32d71828-3f2f-11f0-9f65-76b3cceeab13","style.css","42e137de-3cdd-11f0-898f-9e149126039e",["D",1748813239736],34,"/* Custom styles for mobile optimization */\n\n.chat-container {\n min-height: 100svh;\n xposition: fixed;\n xtop: 0;\n display: flex;\n flex-direction: column;\n background: #edf8ff;\n width: 100svw;\n}\n\n.chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 1rem;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n padding-bottom: 10rem;\n}\n\n.message {\n margin-bottom: 1rem;\n max-width: 85%;\n word-wrap: break-word;\n}\n\n.message > div > *:first-child {\n margin-top: 0;\n}\n\n.message > div > *:last-child {\n margin-bottom: 0;\n}\n\n.message.user {\n margin-left: auto;\n background: #3b82f6;\n color: white;\n padding: 0.75rem 1rem;\n border-radius: 1rem 1rem 0.25rem 1rem;\n}\n\n.message.assistant {\n background: white;\n border: 1px solid #e2e8f0;\n padding: 0.75rem 1rem;\n border-radius: 1rem 1rem 1rem 0.25rem;\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.75rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\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.375rem;\n padding: 0.75rem;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.75rem;\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: 0 -2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 2rem 2rem 0 0;\n}\n\n.chat-input-container {\n padding: 1rem;\n display: flex;\n gap: 0.5rem;\n align-items: flex-end;\n}\n\n.chat-input {\n flex: 1;\n min-height: 2.5rem;\n max-height: 6rem;\n padding: 0.75rem;\n border: 0 none;\n border-radius: 0.5rem;\n resize: none;\n font-family: inherit;\n font-size: 1rem;\n outline: none;\n transition: border-color 0.2s;\n}\n\n.footer-controls {\n display: flex;\n gap: 0.25rem;\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.5rem;\n border-radius: 0.5rem;\n transition: all 0.2s;\n font-size: 1rem;\n width: 2.5rem;\n height: 2.5rem;\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 1rem;\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.75rem;\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.75rem;\n padding: 0.25rem 0.5rem;\n border-radius: 0.25rem;\n transition: all 0.2s;\n text-decoration: underline;\n}\n\n.status-link-button:hover {\n background: #f3f4f6;\n color: #2563eb;\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.5rem;\n height: 2.5rem;\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: 1rem;\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 1rem;\n border-radius: 1rem 1rem 1rem 0.25rem;\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: 1rem;\n}\n\n.settings-panel {\n background: white;\n border-radius: 1rem;\n padding: 1.5rem;\n width: 100%;\n max-width: 28rem;\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: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n padding-bottom: 1rem;\n border-bottom: 1px solid #e2e8f0;\n}\n\n.close-button {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: #6b7280;\n padding: 0.25rem;\n border-radius: 0.25rem;\n}\n\n.close-button:hover {\n background: #f3f4f6;\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\n.form-label {\n display: block;\n font-weight: 600;\n margin-bottom: 0.5rem;\n color: #374151;\n}\n\n.form-input {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid #d1d5db;\n border-radius: 0.5rem;\n font-size: 1rem;\n transition: border-color 0.2s;\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-server {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.5rem;\n padding: 1rem;\n margin-bottom: 1rem;\n}\n\n.mcp-server-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.75rem;\n}\n\n.mcp-server-name {\n font-weight: 600;\n color: #374151;\n}\n\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 3rem;\n height: 1.5rem;\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.5rem;\n}\n\n.toggle-slider:before {\n position: absolute;\n content: \"\";\n height: 1.125rem;\n width: 1.125rem;\n left: 0.1875rem;\n bottom: 0.1875rem;\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.5rem);\n}\n\n.button {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 0.5rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 0.875rem;\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.loading-indicator {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n color: #6b7280;\n font-size: 0.875rem;\n padding: 0.5rem 1rem;\n}\n\n.loading-dots {\n display: flex;\n gap: 0.25rem;\n}\n\n.loading-dot {\n width: 0.375rem;\n height: 0.375rem;\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.75rem;\n }\n\n .chat-status {\n padding: 0.375rem 0.75rem;\n }\n\n .status-text {\n font-size: 0.6875rem;\n }\n\n .status-link-button {\n font-size: 0.6875rem;\n padding: 0.125rem 0.25rem;\n }\n\n .settings-overlay {\n padding: 0.5rem;\n }\n\n .settings-panel {\n padding: 1rem;\n border-radius: 0.75rem;\n }\n\n .message {\n max-width: 90%;\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 > summary {\n font-style: italic;\n color: #999;\n}\n\n/* MCP Message Styling OLD */\n.mcp-message {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.mcp-structured-response {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.mcp-text-content {\n margin-bottom: 0.5rem;\n}\n\n.mcp-regular-content {\n margin-bottom: 0.75rem;\n}\n\n.mcp-section {\n overflow: hidden;\n background: white;\n}\n\n.mcp-section-header {\n width: 100%;\n background: white;\n border: none;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n transition: background-color 0.2s;\n text-align: left;\n color: #999;\n font-weight: normal;\n}\n\n.mcp-section-header:hover {}\n\n.mcp-section-icon {\n color: #6b7280;\n font-size: 0.875rem;\n width: 1rem;\n display: inline-block;\n display: none;\n}\n\n.mcp-section-title {\n flex: 1;\n font-size: 0.875rem;\n}\n\n.mcp-section-content {}\n\n.mcp-json {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.375rem;\n padding: 0.75rem;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.75rem;\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.mcp-tool-result.success .mcp-section-header {}\n\n.mcp-tool-result.success .mcp-section-header:hover {}\n\n.mcp-tool-result.error .mcp-section-header {\n color: red;\n}\n\n.mcp-tool-result.error .mcp-section-header:hover {}\n\n.mcp-tool-result.success {}\n\n.mcp-tool-result.error {}\n\n.test-button {\n background: #f3f4f6;\n border: 1px solid #d1d5db;\n border-radius: 0.375rem;\n padding: 0.375rem 0.75rem;\n font-size: 0.75rem;\n cursor: pointer;\n transition: all 0.2s;\n min-width: 2.5rem;\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}",[],[173,248],[173],{"_102":257,"_95":258,"_143":259,"_145":-5,"_146":132,"_147":260,"_149":150,"_104":261,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_157":262,"_98":271},"d0d818ac-3d49-11f0-afd9-76b3cceeab13","shared","d2bf992b-f210-4f83-bea3-aec8e3e2caaa",55,["D",1748604769414],[263],{"_102":264,"_95":265,"_143":266,"_145":259,"_146":132,"_147":260,"_149":150,"_104":267,"_99":31,"_152":192,"_154":268,"_155":27,"_156":-5,"_157":269,"_98":270},"d0d80d3a-3d49-11f0-afd9-76b3cceeab13","types.ts","d0d80e16-3d49-11f0-afd9-76b3cceeab13",["D",1748604769414],"// 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 role: \"user\" | \"assistant\" | \"system\";\n content: string;\n timestamp?: number;\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}",[],[258,265],[258],{"_102":273,"_95":274,"_143":275,"_145":-5,"_146":132,"_147":276,"_149":150,"_104":277,"_99":278,"_152":233,"_154":279,"_155":27,"_156":-5,"_157":280,"_98":281},"c8f57950-3e6f-11f0-a6fe-76b3cceeab13","README.md","2bc4d286-3cdd-11f0-9e50-9e149126039e",117,["D",1748731028218],20,"# 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- **MCP server testing** - test button for each MCP server with visual status indicators (✅/❌)\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 streaming endpoints\n│ └── anthropic.ts # Anthropic streaming client implementation\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│ │ ├── Chat.tsx # Legacy non-streaming chat (backup)\n│ │ ├── Settings.tsx # Settings flyout\n│ │ └── Message.tsx # Individual message component\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- `POST /api/chat/stream` - Real-time streaming chat responses (SSE)\n- `POST /api/chat` - Non-streaming chat responses (fallback)\n- `POST /api/test-mcp` - Test MCP server connectivity and protocol compliance\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",[],[274],"files",[140,159,171,178,185,196,206,215,226,237,246,256,263,272],"counts",{"_286":31,"_287":288,"_289":31,"_290":31},"pulls","branches",1,"forks","envVars","contents",[293,296,299,302],{"_102":141,"_95":142,"_143":144,"_145":-5,"_146":132,"_147":148,"_149":150,"_104":294,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":295},["D",1748558228747],[142],{"_102":172,"_95":173,"_143":174,"_145":-5,"_146":132,"_147":175,"_149":150,"_104":297,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":298},["D",1748558112658],[173],{"_102":257,"_95":258,"_143":259,"_145":-5,"_146":132,"_147":260,"_149":150,"_104":300,"_99":31,"_152":153,"_154":-5,"_155":27,"_156":-5,"_98":301},["D",1748604769414],[258],{"_102":273,"_95":274,"_143":275,"_145":-5,"_146":132,"_147":276,"_149":150,"_104":303,"_99":278,"_152":233,"_154":279,"_155":27,"_156":-5,"_98":304},["D",1748731028218],[274],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.history",{"_93":94,"_95":96,"_97":41,"_100":310,"_314":315,"_585":31,"_586":150},{"_102":103,"_95":96,"_104":311,"_106":-5,"_107":27,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":-5,"_114":27,"_115":-5,"_116":31,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":27,"_21":312,"_129":313},["D",1748557815516],{"_93":94,"_127":128},{"_99":131,"_95":41,"_102":132,"_133":103,"_134":-5,"_135":-5,"_136":-5,"_137":-5},"history",[316,321,326,335,344,353,361,370,379,387,396,405,414,423,432,441,450,459,468,477,485,494,503,512,521,529,534,543,552,561,569,577],{"_143":249,"_99":131,"_104":317,"_146":132,"_282":318},["D",1748813239736],[319],{"_102":247,"_146":132,"_143":249,"_95":248,"_154":252,"_152":233,"_99":251,"_145":174,"_104":317,"_147":131,"_156":-5,"_149":150,"_155":27,"_98":320},[173,248],{"_143":218,"_99":219,"_104":322,"_146":132,"_282":323},["D",1748795949255],[324],{"_102":216,"_146":132,"_143":218,"_95":217,"_154":222,"_152":192,"_99":221,"_145":181,"_104":322,"_147":219,"_156":-5,"_149":150,"_155":27,"_98":325},[173,180,217],{"_143":218,"_99":327,"_104":328,"_146":132,"_282":329},155,["D",1748795656406],[330],{"_102":331,"_146":132,"_143":218,"_95":217,"_154":332,"_152":192,"_99":333,"_145":181,"_104":328,"_147":327,"_156":-5,"_149":27,"_155":27,"_98":334},"425c0a0c-3f06-11f0-bb19-76b3cceeab13","/** @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 } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\";\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\ntype 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/headers helpers (unchanged) */\nfunction buildBody(config: AppConfig, history: Message[], userText: string) {\n const mcp = config.mcpServers.filter((s) => s.enabled && s.url).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 };\n}\nfunction buildHeaders(apiKey: string, usingMCP: boolean) {\n const h: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) h[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return h;\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 const msg = { role: \"assistant\", content };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null);\n const abortRef = useRef(null);\n\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(config.anthropicApiKey, (body as any).mcp_servers?.length);\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(err.error?.message ?? `${resp.status} ${resp.statusText}`);\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const decoder = new TextDecoder();\n const reader = resp.body.getReader();\n const blocks: Record = {};\n let fullBufferDebug = \"\";\n\n /* —— eventsource-parser —— */\n const parser = createParser((evt: ParsedEvent | ReconnectInterval) => {\n if (evt.type !== \"event\") return;\n fullBufferDebug += `event: ${evt.event ?? \"message\"}\\ndata: ${evt.data}\\n\\n`;\n\n try {\n const ev = JSON.parse(evt.data) as AnthropicStreamEvent;\n console.info(\"[ev]\", ev.type, ev);\n\n switch (ev.type) {\n case \"content_block_start\":\n blocks[ev.index] = structuredClone(ev.content_block);\n if (blocks[ev.index].type === \"text\" && blocks[ev.index].text === undefined) {\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 const preview = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b)\n .map((k) => ({ ...blocks[k], _streaming: k === Math.max(...Object.keys(blocks).map(Number)) }));\n setLiveBlocks(preview);\n }\n break;\n\n case \"message_delta\":\n if (ev.index !== undefined && blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n const preview = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b)\n .map((k) => ({ ...blocks[k], _streaming: k === Math.max(...Object.keys(blocks).map(Number)) }));\n setLiveBlocks(preview);\n }\n break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n localStorage.setItem(\"fullBufferDebug\", fullBufferDebug);\n localStorage.setItem(\"fullBufferResult\", JSON.stringify(blocks));\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(\"Unexpected event type\", ev.type, ev);\n }\n } catch (e) {\n console.warn(\"Failed to handle SSE frame\", e);\n }\n });\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n parser.feed(decoder.decode(value, { stream: true }));\n }\n\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",37,[173,180,217],{"_143":218,"_99":336,"_104":337,"_146":132,"_282":338},154,["D",1748795160149],[339],{"_102":340,"_146":132,"_143":218,"_95":217,"_154":341,"_152":192,"_99":342,"_145":181,"_104":337,"_147":336,"_156":-5,"_149":27,"_155":27,"_98":343},"1a90ec3c-3f05-11f0-b762-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n let fullBufferDebug = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const bufferPart = decoder.decode(value, { stream: true });\n buffer += bufferPart;\n fullBufferDebug += bufferPart;\n // normalise CRLF just in case\n const lines = buffer.replace(/\\r\\n?/g, \"\\n\").split(\"\\n\");\n console.debug(\"[buffer]: \", buffer);\n buffer = lines.pop() ?? \"\"; // keep incomplete line in buffer for next chunk\n\n let current: { event?: string; data?: string } = {};\n let idx = 0;\n\n for (const line of lines) {\n idx++;\n console.log(`[line] ${idx}/${lines.length}:`, `|${line}|`);\n if (line.startsWith(\"event:\")) {\n current.event = line.slice(6).trim();\n } else if (line.startsWith(\"data:\")) {\n // An SSE event can contain multiple data: lines that must be concatenated with \\n\n const chunk = line.slice(5); // preserve leading spaces inside data\n current.data = current.data !== undefined\n ? `${current.data}\\n${chunk}`\n : chunk;\n } else if (line === \"\" && current.event && current.data !== undefined) {\n // blank line terminates event frame\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\n console.info(\"[ev]: \", ev.type, 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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n // message_delta frames do not necessarily contain index\n if (ev.index !== undefined && blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n localStorage.setItem(\"fullBufferDebug\", fullBufferDebug);\n localStorage.setItem(\"fullBufferResult\", JSON.stringify(blocks));\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame failed:\", current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n } else {\n console.warn(`[unhandled line]: |${line}|`, current);\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",36,[173,180,217],{"_143":218,"_99":345,"_104":346,"_146":132,"_282":347},153,["D",1748792479267],[348],{"_102":349,"_146":132,"_143":218,"_95":217,"_154":350,"_152":192,"_99":351,"_145":181,"_104":346,"_147":345,"_156":-5,"_149":27,"_155":27,"_98":352},"dca31996-3efe-11f0-8c84-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n let fullBufferDebug = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const bufferPart = decoder.decode(value, { stream: true });\n buffer += bufferPart;\n fullBufferDebug += bufferPart;\n const lines = buffer.split(\"\\n\");\n console.debug(\"[buffer]: \", buffer);\n buffer = lines.pop() ?? \"\"; // why do we need/do this?\n\n let current: { event?: string; data?: string } = {};\n let idx = 0;\n\n for (const line of lines) {\n idx++;\n console.log(`[line] ${idx}/${lines.length}:`, `|${line}|`);\n if (line.startsWith(\"event:\")) {\n current.event = line.slice(6).trim();\n } else if (line.startsWith(\"data:\")) {\n const chunk = line.slice(5); // keep leading spaces inside data\n current.data = current.data ? current.data + \"\\n\" + chunk : chunk;\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\n console.info(\"[ev]: \", ev.type, 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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n localStorage.setItem(\"fullBufferDebug\", fullBufferDebug);\n localStorage.setItem(\"fullBufferResukt\", JSON.stringify(blocks));\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n } else {\n console.warn(`[unhandled line]: |${line}|`, current);\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",35,[173,180,217],{"_143":218,"_99":354,"_104":355,"_146":132,"_282":356},152,["D",1748791625979],[357],{"_102":358,"_146":132,"_143":218,"_95":217,"_154":359,"_152":192,"_99":251,"_145":181,"_104":355,"_147":354,"_156":-5,"_149":27,"_155":27,"_98":360},"e0095c3c-3efc-11f0-8122-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n let fullBufferDebug = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const bufferPart = decoder.decode(value, { stream: true });\n buffer += bufferPart;\n fullBufferDebug += bufferPart;\n const lines = buffer.split(\"\\n\");\n console.debug(\"[buffer]: \", buffer);\n buffer = lines.pop() ?? \"\"; // why do we need/do this?\n\n let current: { event?: string; data?: string } = {};\n let idx = 0;\n\n for (const line of lines) {\n idx++;\n console.log(`[line] ${idx}/${lines.length}:`, `|${line}|`);\n if (line.startsWith(\"event:\")) {\n current.event = line.slice(6).trim();\n } else if (line.startsWith(\"data:\")) {\n current.data = line.slice(5).trim();\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\n console.info(\"[ev]: \", ev.type, 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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n localStorage.setItem(\"fullBufferDebug\", fullBufferDebug);\n localStorage.setItem(\"fullBufferResukt\", JSON.stringify(blocks));\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n } else {\n console.warn(`[unhandled line]: |${line}|`, current);\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",[173,180,217],{"_143":218,"_99":362,"_104":363,"_146":132,"_282":364},151,["D",1748791282082],[365],{"_102":366,"_146":132,"_143":218,"_95":217,"_154":367,"_152":192,"_99":368,"_145":181,"_104":363,"_147":362,"_156":-5,"_149":27,"_155":27,"_98":369},"130f0b6e-3efc-11f0-a37e-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n console.debug(\"[buffer]: \", buffer);\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n let idx = 0;\n\n for (const line of lines) {\n idx++;\n console.log(`[line] ${idx}/${lines.length}:`, `|${line}|`);\n if (line.startsWith(\"event:\")) {\n current.event = line.slice(6).trim();\n } else if (line.startsWith(\"data:\")) {\n current.data = line.slice(5).trim();\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\n console.info(\"[ev]: \", ev.type, 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 \"xxx_message_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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"xxx_content_block_stop\":\n // TBD\n console.log(\"TODO: what should happen with content block stops\", ev);\n // break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n } else {\n console.warn(`[unhandled line]: |${line}|`, current);\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",33,[173,180,217],{"_143":218,"_99":371,"_104":372,"_146":132,"_282":373},150,["D",1748791127945],[374],{"_102":375,"_146":132,"_143":218,"_95":217,"_154":376,"_152":192,"_99":377,"_145":181,"_104":372,"_147":371,"_156":-5,"_149":27,"_155":27,"_98":378},"b72f8bd4-3efb-11f0-9443-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\";\nimport MessageComponent from \"./Message.tsx\";\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onUpdateLastMessage: (content: string) => void; // not used here\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\n/**\n * StreamingChat (v2) — restores correct MCP affordances while keeping\n * token-by-token streaming.\n *\n * ✧ collects **all** content_block types during the SSE stream\n * ✧ handles *input_json_delta* fragments without clobbering the block.type\n * ✧ emits a fully-structured Anthropic-style message so\n * MessageComponent renders collapsible MCP sections again\n */\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n /* ─── state & refs ─────────────────────────────────────────────── */\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false); // “thinking…”\n const [isStreaming, setIsStreaming] = useState(false); // SSE running\n const [streamText, setStreamText] = useState(\"\"); // live plain-text\n\n const textareaRef = useRef(null);\n const messagesEndRef = useRef(null);\n const abortCtrlRef = useRef(null);\n\n /* ─── helpers ──────────────────────────────────────────────────── */\n\n // auto-scroll\n useEffect(() => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages, streamText]);\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 /** Merge a delta into its parent block (without trashing `block.type`). */\n const 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\n case \"input_json_delta\": {\n // accumulate streaming JSON fragments until we can parse at the end\n block._input_json_str = (block._input_json_str ?? \"\") + (delta.partial_json ?? \"\");\n break;\n }\n\n default: {\n // for other delta types, merge keys except `type`\n const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n };\n\n /** User pressed the stop button */\n const stopStreaming = () => {\n abortCtrlRef.current?.abort();\n abortCtrlRef.current = null;\n setIsStreaming(false);\n setIsLoading(false);\n if (streamText.trim()) {\n onAddMessage({ role: \"assistant\", content: streamText });\n }\n setStreamText(\"\");\n };\n\n /* ─── send message ─────────────────────────────────────────────── */\n\n const sendMessage = async () => {\n if (!input.trim() || isLoading || !config.anthropicApiKey) return;\n\n const userText = input.trim();\n setInput(\"\");\n setIsLoading(true);\n setIsStreaming(true);\n setStreamText(\"\");\n\n // push user message\n onAddMessage({ role: \"user\", content: userText });\n\n // prepare inputs\n const enabledMCP = 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 apiMessages = messages\n .filter(m => m.role !== \"system\")\n .map(m => ({ role: m.role, content: m.content }))\n .concat([{ role: \"user\", content: userText }]);\n\n abortCtrlRef.current = new AbortController();\n try {\n const resp = await fetch(\"/api/chat/stream\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n model: config.selectedModel,\n max_tokens: 1024,\n messages: apiMessages,\n stream: true,\n anthropic_api_key: config.anthropicApiKey,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n }),\n signal: abortCtrlRef.current.signal,\n });\n if (!resp.ok) {\n throw new Error(`HTTP ${resp.status} ${resp.statusText}`);\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n /* ── SSE loop ─────────────────────────────────────────────── */\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n\n let buffer = \"\";\n let fullBufferDebug = \"\";\n const blocks: Record = {}; // collect all blocks\n\n setIsLoading(false); // now in “Streaming…” state\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const bufferPart += decoder.decode(value, { stream: true });\n buffer += bufferPart;\n fullBufferDebug += bufferPart;\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\"; // why do we need/do this?\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n console.log(\"[steam:line]\", line);\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n // Parse complete frame\n try {\n console.log(`[ev:${ev.type}]`, current);\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\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 // live text preview\n if (blocks[ev.index].type === \"text\") {\n const txt = Object.keys(blocks)\n .sort((a, b) => +a - +b)\n .filter(k => blocks[+k].type === \"text\")\n .map(k => {\n console.log(k, blocks[+k]);\n return blocks[+k].text;\n })\n .join(\"\");\n setStreamText(txt);\n }\n }\n break;\n\n case \"message_stop\": {\n // finalize any accumulated input_json fragments\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 /* leave as string if un-parsable */\n b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structured = {\n role: \"assistant\",\n content: Object.keys(blocks)\n .sort((a, b) => +a - +b)\n .map(k => {\n const { delta, ...blk } = blocks[+k];\n return blk;\n }),\n };\n console.log({ blocks, structured });\n setIsStreaming(false);\n setStreamText(\"\");\n onAddMessage({\n role: \"assistant\",\n content: JSON.stringify(structured),\n });\n localStorage.setItem(\"bufferParseDebug\", fullBufferDebug)\n localStorage.setItem(\"bufferParseResult\", JSON.stringify(structured))\n reader.cancel();\n return;\n }\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n /* ping & content_block_stop — ignore */\n }\n } catch (e) {\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n } catch (err: any) {\n console.error(\"streaming error\", err);\n if (err.name === \"AbortError\") {\n onAddMessage({ role: \"system\", content: \"Message cancelled by user\" });\n } else {\n onAddMessage({\n role: \"system\",\n content: `Error: ${err.message ?? \"unknown\"}`,\n });\n }\n } finally {\n console.log(\"----- finally -----\")\n setIsLoading(false);\n setIsStreaming(false);\n setStreamText(\"\");\n abortCtrlRef.current = null;\n }\n };\n\n /* ─── keyboard handler ─────────────────────────────────────────── */\n\n const handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n isStreaming ? stopStreaming() : sendMessage();\n }\n };\n\n const canSend = input.trim() && !isLoading && config.anthropicApiKey;\n\n /* ─── UI ───────────────────────────────────────────────────────── */\n\n return (\n <>\n {/* messages */}\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\n {isStreaming && streamText && (\n

\n {streamText}\n ▊\n

\n )}\n\n {isLoading && !isStreaming && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n setInput(e.target.value)}\n onKeyPress={handleKeyPress}\n placeholder={config.anthropicApiKey\n ? isStreaming\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 || isLoading}\n rows={1}\n />\n \n {isStreaming ? \"⏹\" : \"➤\"}\n \n

\n\n

\n \n Clear\n \n\n \n Claude Chat • {config.mcpServers.filter(s => s.enabled).length}/\n {config.mcpServers.length} MCP servers enabled • {isStreaming ? \"Streaming…\" : \"Ready\"}\n \n\n \n Settings\n \n

\n \n );\n}",32,[173,180,217],{"_143":218,"_99":380,"_104":381,"_146":132,"_282":382},149,["D",1748774804356],[383],{"_102":384,"_146":132,"_143":218,"_95":217,"_154":367,"_152":192,"_99":385,"_145":181,"_104":381,"_147":380,"_156":-5,"_149":27,"_155":27,"_98":386},"b59178ee-3ed5-11f0-91eb-76b3cceeab13",31,[173,180,217],{"_143":218,"_99":388,"_104":389,"_146":132,"_282":390},148,["D",1748774409752],[391],{"_102":392,"_146":132,"_143":218,"_95":217,"_154":393,"_152":192,"_99":394,"_145":181,"_104":389,"_147":388,"_156":-5,"_149":27,"_155":27,"_98":395},"ca5ea5cc-3ed4-11f0-bfa1-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n console.log(\"[buffer]: \", buffer);\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n let idx = 0;\n\n for (const line of lines) {\n idx++;\n console.log(`[line] ${idx}/${lines.length}:`, `|${line}|`);\n if (line.startsWith(\"event:\")) {\n current.event = line.slice(6).trim();\n } else if (line.startsWith(\"data:\")) {\n current.data = line.slice(5).trim();\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\n console.log(\"[ev]: \", ev.type);\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 \"xxx_message_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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"xxx_content_block_stop\":\n // TBD\n console.log(\"TODO: what should happen with content block stops\", ev);\n // break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n } else {\n console.warn(`[unhandled line]: |${line}|`, current);\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",30,[173,180,217],{"_143":218,"_99":397,"_104":398,"_146":132,"_282":399},147,["D",1748773762186],[400],{"_102":401,"_146":132,"_143":218,"_95":217,"_154":402,"_152":192,"_99":403,"_145":181,"_104":398,"_147":397,"_156":-5,"_149":27,"_155":27,"_98":404},"4862f89e-3ed3-11f0-993f-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n console.log(\"[buffer]: \", buffer);\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n let idx = 0;\n\n for (const line of lines) {\n idx++;\n console.log(`[line] ${idx}/${lines.length}:`, `|${line}|`);\n if (line.startsWith(\"event:\")) {\n current.event = line.slice(6).trim();\n } else if (line.startsWith(\"data:\")) {\n current.data = line.slice(5).trim();\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\n console.log(\"[ev]: \", ev.type);\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 \"xxx_message_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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"xxx_content_block_stop\":\n // TBD\n console.log(\"TODO: what should happen with content block stops\", ev);\n // break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",29,[173,180,217],{"_143":218,"_99":406,"_104":407,"_146":132,"_282":408},146,["D",1748772869902],[409],{"_102":410,"_146":132,"_143":218,"_95":217,"_154":411,"_152":192,"_99":412,"_145":181,"_104":407,"_147":406,"_156":-5,"_149":27,"_155":27,"_98":413},"3490170e-3ed1-11f0-8c70-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n console.log(\"[buffer]: \", buffer);\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n let idx = 0;\n\n for (const line of lines) {\n idx++;\n console.log(`[line] ${idx}/${lines.length}:`, line);\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\n console.log(\"[ev]: \", ev.type);\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 \"xxx_message_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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"xxx_content_block_stop\":\n // TBD\n console.log(\"TODO: what should happen with content block stops\", ev);\n // break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",28,[173,180,217],{"_143":218,"_99":415,"_104":416,"_146":132,"_282":417},145,["D",1748769238338],[418],{"_102":419,"_146":132,"_143":218,"_95":217,"_154":420,"_152":192,"_99":421,"_145":181,"_104":416,"_147":415,"_156":-5,"_149":27,"_155":27,"_98":422},"bff70b12-3ec8-11f0-8c9b-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n console.log(\"[buffer]: \", buffer);\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n console.log(`line: ${lines.indexOf(line) + 1}/${lines.length}`, line);\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\n console.log(\"[ev]: \", ev.type);\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 \"xxx_message_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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"xxx_content_block_stop\":\n // TBD\n console.log(\"TODO: what should happen with content block stops\", ev);\n // break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",27,[173,180,217],{"_143":218,"_99":424,"_104":425,"_146":132,"_282":426},144,["D",1748768870514],[427],{"_102":428,"_146":132,"_143":218,"_95":217,"_154":429,"_152":192,"_99":430,"_145":181,"_104":425,"_147":424,"_156":-5,"_149":27,"_155":27,"_98":431},"e4b95cda-3ec7-11f0-a590-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n console.log(\"[buffer]: \", buffer);\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n console.log(`line: ${lines.indexOf(line) + 1}/${lines.length}`, line);\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\n console.log(\"[ev]: \", ev.type);\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 \"xxx_message_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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"content_block_stop\":\n // TBD\n console.log(\"TODO: what should happen with content block stops\", ev);\n // break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",26,[173,180,217],{"_143":218,"_99":433,"_104":434,"_146":132,"_282":435},143,["D",1748767925220],[436],{"_102":437,"_146":132,"_143":218,"_95":217,"_154":438,"_152":192,"_99":439,"_145":181,"_104":434,"_147":433,"_156":-5,"_149":27,"_155":27,"_98":440},"b148907a-3ec5-11f0-be66-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n console.log(`line: ${lines.indexOf(line) + 1}/${lines.length}`, line);\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\n console.log(\"[ev]: \", ev.type);\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 \"xxx_message_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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"content_block_stop\":\n // TBD\n console.log(\"TODO: what should happen with content block stops\", ev);\n // break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",25,[173,180,217],{"_143":218,"_99":442,"_104":443,"_146":132,"_282":444},142,["D",1748767415629],[445],{"_102":446,"_146":132,"_143":218,"_95":217,"_154":447,"_152":192,"_99":448,"_145":181,"_104":443,"_147":442,"_156":-5,"_149":27,"_155":27,"_98":449},"818b9c98-3ec4-11f0-b054-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\n console.log(\"[ev]: \", ev.type);\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 \"xxx_message_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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"content_block_stop\":\n // TBD\n console.log(\"TODO: what should happen with content block stops\", ev);\n // break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",24,[173,180,217],{"_143":218,"_99":451,"_104":452,"_146":132,"_282":453},141,["D",1748766566674],[454],{"_102":455,"_146":132,"_143":218,"_95":217,"_154":456,"_152":192,"_99":457,"_145":181,"_104":452,"_147":451,"_156":-5,"_149":27,"_155":27,"_98":458},"87872088-3ec2-11f0-8cf3-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\n console.log(\"[ev]: \", ev.type);\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 \"message_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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"content_block_stop\":\n // TBD\n console.log(\"TODO: what should happen with content block stops\", ev);\n // break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",23,[173,180,217],{"_143":218,"_99":460,"_104":461,"_146":132,"_282":462},140,["D",1748738905168],[463],{"_102":464,"_146":132,"_143":218,"_95":217,"_154":465,"_152":192,"_99":466,"_145":181,"_104":461,"_147":460,"_156":-5,"_149":27,"_155":27,"_98":467},"1ffddaa0-3e82-11f0-b3da-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\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 \"message_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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"content_block_stop\":\n // TBD\n console.log(\"TODO: what should happen with content block stops\", ev);\n break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n console.warn(`Unexpected event type: ${ev.type}`, ev);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",22,[173,180,217],{"_143":218,"_99":469,"_104":470,"_146":132,"_282":471},139,["D",1748738714359],[472],{"_102":473,"_146":132,"_143":218,"_95":217,"_154":474,"_152":192,"_99":475,"_145":181,"_104":470,"_147":469,"_156":-5,"_149":27,"_155":27,"_98":476},"ae40f500-3e81-11f0-a76f-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\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 \"message_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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"content_block_stop\":\n // TBD\n console.log(\"TODO: what should happen with content block stops\", ev);\n break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n throw new Error(`Unexpected event type: ${ev.type}`);\n }\n } catch (e) {\n console.log(\"SSE frame:\", line, current);\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",21,[173,180,217],{"_143":218,"_99":478,"_104":479,"_146":132,"_282":480},138,["D",1748738420991],[481],{"_102":482,"_146":132,"_143":218,"_95":217,"_154":483,"_152":192,"_99":278,"_145":181,"_104":479,"_147":478,"_156":-5,"_149":27,"_155":27,"_98":484},"ff64d074-3e80-11f0-af40-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"content_block_stop\":\n // TBD\n console.log(\"TODO: what should happen with content block stops\", ev);\n break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n throw new Error(`Unexpected event type: ${ev.type}`);\n }\n } catch (e) {\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",[173,180,217],{"_143":218,"_99":486,"_104":487,"_146":132,"_282":488},137,["D",1748738185790],[489],{"_102":490,"_146":132,"_143":218,"_95":217,"_154":491,"_152":192,"_99":492,"_145":181,"_104":487,"_147":486,"_156":-5,"_149":27,"_155":27,"_98":493},"7333c3f8-3e80-11f0-8409-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_delta\":\n if (blocks[ev.index]) {\n mergeDelta(blocks[ev.index], ev.delta);\n\n /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n throw new Error(`Unexpected event type: ${ev.type}`);\n }\n } catch (e) {\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",19,[173,180,217],{"_143":218,"_99":495,"_104":496,"_146":132,"_282":497},136,["D",1748738040891],[498],{"_102":499,"_146":132,"_143":218,"_95":217,"_154":500,"_152":192,"_99":501,"_145":181,"_104":496,"_147":495,"_156":-5,"_149":27,"_155":27,"_98":502},"1cd611e6-3e80-11f0-8ce0-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n // console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n\n default:\n throw new Error(`Unexpected event type: ${ev.type}`);\n }\n } catch (e) {\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",18,[173,180,217],{"_143":218,"_99":504,"_104":505,"_146":132,"_282":506},135,["D",1748737481225],[507],{"_102":508,"_146":132,"_143":218,"_95":217,"_154":509,"_152":192,"_99":510,"_145":181,"_104":505,"_147":504,"_156":-5,"_149":27,"_155":27,"_98":511},"cf4078b4-3e7e-11f0-9207-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\nfunction mergeDelta(block: any, delta: any) {\n console.log(\"Merge delta\", { block, delta });\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n }\n } catch (e) {\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",17,[173,180,217],{"_143":218,"_99":513,"_104":514,"_146":132,"_282":515},134,["D",1748737085827],[516],{"_102":517,"_146":132,"_143":218,"_95":217,"_154":518,"_152":192,"_99":519,"_145":181,"_104":514,"_147":513,"_156":-5,"_149":27,"_155":27,"_98":520},"e392ac70-3e7d-11f0-9cbd-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record): AssistantMsg {\n console.log(\"Assembling message blocks\", blocks);\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 // TODO handle more gracefully\n // b.input_json_raw = b._input_json_str;\n }\n delete b._input_json_str;\n }\n });\n\n const structuredContent = 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 const msg = { role: \"assistant\", content: structuredContent };\n console.log(\"Assembled message\", msg);\n return msg;\n}\n\n/* ─────────────────────────────── useAnthropicStream ────────────────────────── */\n\nfunction useAnthropicStream(config: AppConfig) {\n const [status, setStatus] = useState(\"idle\");\n const [liveBlocks, setLiveBlocks] = useState(null); // structured preview\n const abortRef = useRef(null);\n\n /** Abort helper */\n const abort = useCallback(() => {\n abortRef.current?.abort();\n abortRef.current = null;\n setStatus(\"idle\");\n setLiveBlocks(null);\n }, []);\n\n /** Main send/stream function */\n const send = useCallback(\n async (history: Message[], userText: string): Promise => {\n if (!config.anthropicApiKey) 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 const headers = buildHeaders(\n config.anthropicApiKey,\n (body as any).mcp_servers?.length,\n );\n\n const ctrl = new AbortController();\n abortRef.current = ctrl;\n\n const resp = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n body: JSON.stringify(body),\n headers,\n signal: ctrl.signal,\n });\n\n if (!resp.ok) {\n const err = await resp.json().catch(() => ({}));\n throw new Error(\n err.error?.message\n ?? `Anthropic API error: ${resp.status} ${resp.statusText}`,\n );\n }\n if (!resp.body) throw new Error(\"Empty response body\");\n\n setStatus(\"streaming\");\n\n const reader = resp.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n const blocks: Record = {};\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\";\n\n let current: { event?: string; data?: string } = {};\n\n for (const line of lines) {\n if (line.startsWith(\"event: \")) {\n current.event = line.slice(7);\n } else if (line.startsWith(\"data: \")) {\n current.data = line.slice(6);\n } else if (line === \"\" && current.event && current.data) {\n try {\n const ev = JSON.parse(current.data) as AnthropicStreamEvent;\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 /* Prepare full preview structure */\n const ordered = Object.keys(blocks)\n .map(Number)\n .sort((a, b) => a - b);\n const full = ordered.map((k) => ({ ...blocks[k] }));\n\n if (full.length) {\n full[full.length - 1]._streaming = true;\n }\n setLiveBlocks(full);\n }\n break;\n\n case \"message_stop\":\n setStatus(\"idle\");\n setLiveBlocks(null);\n abortRef.current = null;\n reader.cancel();\n return assembleMessage(blocks);\n\n case \"error\":\n throw new Error(`Stream error: ${ev.error.message}`);\n }\n } catch (e) {\n console.warn(\"Failed to handle SSE frame\", e);\n }\n current = {};\n }\n }\n }\n\n // Should never reach here\n abortRef.current = null;\n setStatus(\"idle\");\n throw new Error(\"Stream ended unexpectedly\");\n },\n [config, status],\n );\n\n return { status, liveBlocks, send, abort };\n}\n\n/* ──────────────────────────── StreamingChat component ─────────────────────── */\n\ninterface StreamingChatProps {\n config: AppConfig;\n messages: Message[];\n onAddMessage: (m: Omit) => void;\n onClearMessages: () => void;\n onOpenSettings: () => void;\n}\n\nexport default function StreamingChat({\n config,\n messages,\n onAddMessage,\n onClearMessages,\n onOpenSettings,\n}: StreamingChatProps) {\n const [input, setInput] = useState(\"\");\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 /* 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 /* ── helpers ──────────────────────────────────────────────── */\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, { role: \"user\", content: userText }],\n userText,\n );\n onAddMessage(assistant); // ← content is an array, not a string\n } catch (err: any) {\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 handleKeyPress = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n streaming ? stopStreaming() : fireSend();\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\n {/* live streaming preview rendered with same renderer */}\n {streaming && liveBlocks && (\n \n )}\n\n {thinking && (\n

\n Claude is thinking\n

\n )}\n

\n\n {/* footer */}\n

\n\n

\n \n );\n}",16,[173,180,217],{"_143":249,"_99":522,"_104":523,"_146":132,"_282":524},133,["D",1748735996715],[525],{"_102":526,"_146":132,"_143":249,"_95":248,"_154":527,"_152":233,"_99":368,"_145":174,"_104":523,"_147":522,"_156":-5,"_149":27,"_155":27,"_98":528},"5a695e82-3e7b-11f0-848d-76b3cceeab13","/* Custom styles for mobile optimization */\n\n.chat-container {\n xheight: 100svh;\n xposition: fixed;\n xtop: 0;\n display: flex;\n flex-direction: column;\n background: #edf8ff;\n width: 100svw;\n}\n\n.chat-messages {\n flex: 1;\n overflow-y: auto;\n padding: 1rem;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n padding-bottom: 10rem;\n}\n\n.message {\n margin-bottom: 1rem;\n max-width: 85%;\n word-wrap: break-word;\n}\n\n.message > div > *:first-child {\n margin-top: 0;\n}\n\n.message > div > *:last-child {\n margin-bottom: 0;\n}\n\n.message.user {\n margin-left: auto;\n background: #3b82f6;\n color: white;\n padding: 0.75rem 1rem;\n border-radius: 1rem 1rem 0.25rem 1rem;\n}\n\n.message.assistant {\n background: white;\n border: 1px solid #e2e8f0;\n padding: 0.75rem 1rem;\n border-radius: 1rem 1rem 1rem 0.25rem;\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.75rem;\n border-radius: 0.5rem;\n font-size: 0.875rem;\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.375rem;\n padding: 0.75rem;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.75rem;\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: 0 -2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 2rem 2rem 0 0;\n}\n\n.chat-input-container {\n padding: 1rem;\n display: flex;\n gap: 0.5rem;\n align-items: flex-end;\n}\n\n.chat-input {\n flex: 1;\n min-height: 2.5rem;\n max-height: 6rem;\n padding: 0.75rem;\n border: 0 none;\n border-radius: 0.5rem;\n resize: none;\n font-family: inherit;\n font-size: 1rem;\n outline: none;\n transition: border-color 0.2s;\n}\n\n.footer-controls {\n display: flex;\n gap: 0.25rem;\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.5rem;\n border-radius: 0.5rem;\n transition: all 0.2s;\n font-size: 1rem;\n width: 2.5rem;\n height: 2.5rem;\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 1rem;\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.75rem;\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.75rem;\n padding: 0.25rem 0.5rem;\n border-radius: 0.25rem;\n transition: all 0.2s;\n text-decoration: underline;\n}\n\n.status-link-button:hover {\n background: #f3f4f6;\n color: #2563eb;\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.5rem;\n height: 2.5rem;\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: 1rem;\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 1rem;\n border-radius: 1rem 1rem 1rem 0.25rem;\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: 1rem;\n}\n\n.settings-panel {\n background: white;\n border-radius: 1rem;\n padding: 1.5rem;\n width: 100%;\n max-width: 28rem;\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: space-between;\n align-items: center;\n margin-bottom: 1.5rem;\n padding-bottom: 1rem;\n border-bottom: 1px solid #e2e8f0;\n}\n\n.close-button {\n background: none;\n border: none;\n font-size: 1.5rem;\n cursor: pointer;\n color: #6b7280;\n padding: 0.25rem;\n border-radius: 0.25rem;\n}\n\n.close-button:hover {\n background: #f3f4f6;\n}\n\n.form-group {\n margin-bottom: 1.5rem;\n}\n\n.form-label {\n display: block;\n font-weight: 600;\n margin-bottom: 0.5rem;\n color: #374151;\n}\n\n.form-input {\n width: 100%;\n padding: 0.75rem;\n border: 1px solid #d1d5db;\n border-radius: 0.5rem;\n font-size: 1rem;\n transition: border-color 0.2s;\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-server {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.5rem;\n padding: 1rem;\n margin-bottom: 1rem;\n}\n\n.mcp-server-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.75rem;\n}\n\n.mcp-server-name {\n font-weight: 600;\n color: #374151;\n}\n\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 3rem;\n height: 1.5rem;\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.5rem;\n}\n\n.toggle-slider:before {\n position: absolute;\n content: \"\";\n height: 1.125rem;\n width: 1.125rem;\n left: 0.1875rem;\n bottom: 0.1875rem;\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.5rem);\n}\n\n.button {\n padding: 0.75rem 1.5rem;\n border: none;\n border-radius: 0.5rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s;\n font-size: 0.875rem;\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.loading-indicator {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n color: #6b7280;\n font-size: 0.875rem;\n padding: 0.5rem 1rem;\n}\n\n.loading-dots {\n display: flex;\n gap: 0.25rem;\n}\n\n.loading-dot {\n width: 0.375rem;\n height: 0.375rem;\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.75rem;\n }\n\n .chat-status {\n padding: 0.375rem 0.75rem;\n }\n\n .status-text {\n font-size: 0.6875rem;\n }\n\n .status-link-button {\n font-size: 0.6875rem;\n padding: 0.125rem 0.25rem;\n }\n\n .settings-overlay {\n padding: 0.5rem;\n }\n\n .settings-panel {\n padding: 1rem;\n border-radius: 0.75rem;\n }\n\n .message {\n max-width: 90%;\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 > summary {\n font-style: italic;\n color: #999;\n}\n\n/* MCP Message Styling OLD */\n.mcp-message {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.mcp-structured-response {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.mcp-text-content {\n margin-bottom: 0.5rem;\n}\n\n.mcp-regular-content {\n margin-bottom: 0.75rem;\n}\n\n.mcp-section {\n overflow: hidden;\n background: white;\n}\n\n.mcp-section-header {\n width: 100%;\n background: white;\n border: none;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n cursor: pointer;\n transition: background-color 0.2s;\n text-align: left;\n color: #999;\n font-weight: normal;\n}\n\n.mcp-section-header:hover {}\n\n.mcp-section-icon {\n color: #6b7280;\n font-size: 0.875rem;\n width: 1rem;\n display: inline-block;\n display: none;\n}\n\n.mcp-section-title {\n flex: 1;\n font-size: 0.875rem;\n}\n\n.mcp-section-content {}\n\n.mcp-json {\n background: #f8fafc;\n border: 1px solid #e2e8f0;\n border-radius: 0.375rem;\n padding: 0.75rem;\n font-family: \"Monaco\", \"Menlo\", \"Ubuntu Mono\", monospace;\n font-size: 0.75rem;\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.mcp-tool-result.success .mcp-section-header {}\n\n.mcp-tool-result.success .mcp-section-header:hover {}\n\n.mcp-tool-result.error .mcp-section-header {\n color: red;\n}\n\n.mcp-tool-result.error .mcp-section-header:hover {}\n\n.mcp-tool-result.success {}\n\n.mcp-tool-result.error {}\n\n.test-button {\n background: #f3f4f6;\n border: 1px solid #d1d5db;\n border-radius: 0.375rem;\n padding: 0.375rem 0.75rem;\n font-size: 0.75rem;\n cursor: pointer;\n transition: all 0.2s;\n min-width: 2.5rem;\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}",[173,248],{"_143":199,"_99":200,"_104":530,"_146":132,"_282":531},["D",1748735838931],[532],{"_102":197,"_146":132,"_143":199,"_95":198,"_154":203,"_152":192,"_99":202,"_145":181,"_104":530,"_147":200,"_156":-5,"_149":150,"_155":27,"_98":533},[173,180,198],{"_143":199,"_99":535,"_104":536,"_146":132,"_282":537},131,["D",1748735752354],[538],{"_102":539,"_146":132,"_143":199,"_95":198,"_154":540,"_152":192,"_99":541,"_145":181,"_104":536,"_147":535,"_156":-5,"_149":27,"_155":27,"_98":542},"c8c2e67e-3e7a-11f0-96bf-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Message } from \"./App.tsx\";\n\ninterface MessageProps {\n message: Message;\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 }: MessageProps) {\n const [expandedSections, setExpandedSections] = useState>(\n new Set(),\n );\n\n const toggleSection = (sectionId: string) => {\n const newExpanded = new Set(expandedSections);\n newExpanded.has(sectionId)\n ? newExpanded.delete(sectionId)\n : newExpanded.add(sectionId);\n setExpandedSections(newExpanded);\n };\n\n /* ═══════ Utilities shared by several renderers ════════════════════════════ */\n\n const renderCollapsibleSection = (\n title: string,\n content: any,\n sectionId: string,\n ) => {\n const affordance = content?.result?.output?.html;\n const isExpanded = affordance || expandedSections.has(sectionId);\n\n return (\n

\n toggleSection(sectionId)}\n >\n {isExpanded ? \"▼\" : \"▶\"}\n {title}\n \n\n {isExpanded && (\n

\n {affordance\n ?

\n : (\n

\n                {typeof content === \"string\"\n                  ? content\n                  : JSON.stringify(content, null, 2)}\n

\n )}\n

\n );\n };\n\n const formatRegularContent = (content: string) =>

;\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 {formatRegularContent(\n `\\`\\`\\`${blk.language ?? \"\"}\\n${blk.text ?? \"\"}\\n\\`\\`\\``,\n )}\n

\n );\n\n case \"mcp_tool_use\":\n return (\n

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

\n );\n\n case \"mcp_tool_result\":\n return (\n

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

\n );\n\n /* Unknown or future block types */\n default:\n return (\n

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

\n );\n }\n })}\n

\n {formatRegularContent(item.text || \"\")}\n

,\n );\n break;\n\n default:\n sections.push(\n renderCollapsibleSection(\n `📄 ${item.type || \"Unknown Content\"}`,\n item,\n sectionId,\n ),\n );\n }\n });\n\n return

{sections}

\n {formatRegularContent(currentSection.trim())}\n

,\n );\n }\n\n return sections.length ?

{sections}

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

{renderContent()}

;\n}",13,[173,180,198],{"_143":199,"_99":544,"_104":545,"_146":132,"_282":546},130,["D",1748735364465],[547],{"_102":548,"_146":132,"_143":199,"_95":198,"_154":549,"_152":192,"_99":550,"_145":181,"_104":545,"_147":544,"_156":-5,"_149":27,"_155":27,"_98":551},"e18fa2e2-3e79-11f0-999d-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://cdn.jsdelivr.net/npm/marked/lib/marked.esm.js\";\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Message } from \"./App.tsx\";\n\ninterface MessageProps {\n message: Message;\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 }: MessageProps) {\n const [expandedSections, setExpandedSections] = useState>(\n new Set(),\n );\n\n const toggleSection = (sectionId: string) => {\n const newExpanded = new Set(expandedSections);\n newExpanded.has(sectionId)\n ? newExpanded.delete(sectionId)\n : newExpanded.add(sectionId);\n setExpandedSections(newExpanded);\n };\n\n /* ═══════ Utilities shared by several renderers ════════════════════════════ */\n\n const renderCollapsibleSection = (\n title: string,\n content: any,\n sectionId: string,\n ) => {\n const affordance = content?.result?.output?.html;\n const isExpanded = affordance || expandedSections.has(sectionId);\n\n return (\n

\n toggleSection(sectionId)}\n >\n {isExpanded ? \"▼\" : \"▶\"}\n {title}\n \n\n {isExpanded && (\n

\n {affordance\n ?

\n )}\n

\n );\n };\n\n const formatRegularContent = (content: string) =>

;\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 );\n\n case \"code\":\n // Re-wrap code in markdown fences so existing MD pipeline highlights it\n return (\n

\n );\n\n /* Unknown or future block types */\n default:\n return (\n

\n );\n }\n })}\n

\n {formatRegularContent(item.text || \"\")}\n

,\n );\n break;\n\n default:\n sections.push(\n renderCollapsibleSection(\n `📄 ${item.type || \"Unknown Content\"}`,\n item,\n sectionId,\n ),\n );\n }\n });\n\n return

{sections}

\n {formatRegularContent(currentSection.trim())}\n

,\n );\n }\n\n return sections.length ?

{sections}

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

{renderContent()}

;\n}",12,[173,180,198],{"_143":218,"_99":553,"_104":554,"_146":132,"_282":555},129,["D",1748734810418],[556],{"_102":557,"_146":132,"_143":218,"_95":217,"_154":558,"_152":192,"_99":559,"_145":181,"_104":554,"_147":553,"_156":-5,"_149":27,"_155":27,"_98":560},"97533c3a-3e78-11f0-bd62-76b3cceeab13","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nimport { AnthropicStreamEvent } from \"../../shared/types.ts\";\nimport { AppConfig, Message } from \"./App.tsx\"; // NOTE: Message.content must now be `string | any[]`\nimport MessageComponent from \"./Message.tsx\";\n\n/* ──────────────────────────────── Shared helpers ───────────────────────────── */\n\ntype Status = \"idle\" | \"thinking\" | \"streaming\";\n\n/**\n * Assistant messages always carry *structured blocks*,\n * never a JSON-stringified surrogate.\n */\ntype AssistantMsg = {\n role: \"assistant\";\n content: any[]; // ← unified shape\n};\n\n/** Merge a delta into its parent block (unchanged logic) */\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 const { type: _ignored, ...rest } = delta;\n Object.assign(block, rest);\n }\n }\n}\n\n/** Build request body (handles MCP) */\nfunction buildBody(\n config: AppConfig,\n history: Message[],\n userText: string,\n): Record {\n const enabledMCP = 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 apiMessages = 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: apiMessages,\n ...(enabledMCP.length && { mcp_servers: enabledMCP }),\n };\n}\n\n/** Build headers */\nfunction buildHeaders(apiKey: string, usingMCP: boolean): Record {\n const headers: Record = {\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n \"content-type\": \"application/json\",\n \"anthropic-dangerous-direct-browser-access\": \"true\",\n };\n if (usingMCP) headers[\"anthropic-beta\"] = \"mcp-client-2025-04-04\";\n return headers;\n}\n\n/** Produce final assistant message in unified shape */\nfunction assembleMessage(blocks: Record