\n \n \n \n\n",[],[202,270],"b0fad000-5eaa-11f1-b755-1607ee4eb77e","favicon.svg","019e896f-c16d-772c-815d-fe02605d2506",["D",1780422263049],"\n",[],[202,278],"ded67286-5eaf-11f1-9cb6-1607ee4eb77e","api.ts","019e896f-c16d-772c-815d-f55e5a483bea","019e896f-c16d-772c-815d-f9c3e368ecf9",46,["D",1780424487591],"export interface Thread {\n id: string;\n session_id: string | null;\n title: string;\n last_cursor: string | null;\n created_at: string;\n}\n\nexport interface Message {\n id: number;\n thread_id: string;\n role: \"user\" | \"assistant\" | \"system\";\n // content varies by type:\n // text → plain text\n // tool_use → JSON string { name, input }\n // tool_result → JSON string { output, is_error? }\n // image → JSON string { id, name, mime } (served at /api/files/)\n // file → JSON string { id, name, mime } (download at /api/files/)\n // error → plain text (rendered red)\n type: \"text\" | \"tool_use\" | \"tool_result\" | \"error\" | \"image\" | \"file\";\n content: string;\n created_at: string;\n}\n\nexport interface FilePayload {\n id: string;\n name: string;\n mime: string;\n}\n\nexport interface Me {\n username: string;\n used: number;\n limit: number;\n remaining: number;\n}\n\n// Thrown when an /api/* call returns 401 — the caller should show the login screen.\nexport class UnauthorizedError extends Error {\n constructor() {\n super(\"unauthorized\");\n this.name = \"UnauthorizedError\";\n }\n}\n\n// Thrown when a send hits the demo limit (HTTP 429).\nexport class LimitError extends Error {\n remaining: number;\n constructor(message: string, remaining: number) {\n super(message);\n this.name = \"LimitError\";\n this.remaining = remaining;\n }\n}\n\nasync function json(res: Response): Promise {\n if (res.status === 401) throw new UnauthorizedError();\n if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);\n return res.json() as Promise;\n}\n\nexport const api = {\n // Returns the logged-in user + usage. Throws UnauthorizedError when not logged in.\n me(): Promise {\n return fetch(\"/api/me\").then((r) => json(r));\n },\n listThreads(): Promise {\n return fetch(\"/api/threads\").then((r) => json(r));\n },\n createThread(): Promise {\n return fetch(\"/api/threads\", { method: \"POST\" }).then((r) => json(r));\n },\n getMessages(threadId: string, after: number): Promise {\n return fetch(`/api/threads/${threadId}/messages?after=${after}`).then((r) =>\n json(r)\n );\n },\n // Resolve a val's deployed page URL for the preview pane. Returns null when the\n // val has no HTTP file or can't be resolved (404) — the caller leaves the\n // address field for the user to fill in.\n async previewUrl(val: string): Promise {\n const res = await fetch(`/api/preview-url?val=${encodeURIComponent(val)}`);\n if (res.status === 401) throw new UnauthorizedError();\n if (!res.ok) return null;\n const body = await res.json().catch(() => null) as { url?: string } | null;\n return body?.url ?? null;\n },\n // Stays open the whole turn. Resolves { ok: true }; throws LimitError on HTTP 429.\n async send(threadId: string, text: string): Promise<{ ok: true }> {\n const res = await fetch(`/api/threads/${threadId}/messages`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text }),\n });\n if (res.status === 401) throw new UnauthorizedError();\n if (res.status === 429) {\n const body = await res.json().catch(() => ({})) as {\n error?: string;\n remaining?: number;\n };\n throw new LimitError(\n body.error ?? \"You've reached the demo message limit.\",\n body.remaining ?? 0,\n );\n }\n if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);\n return res.json() as Promise<{ ok: true }>;\n },\n async logout(): Promise {\n await fetch(\"/auth/logout\", { method: \"POST\" }).catch(() => {});\n },\n};\n\nexport const SOURCE_VAL_URL = \"https://www.val.town/x/templates/claude-managed-townie\";\n",[],[202,293,285],"components","e739a1d2-5eaf-11f1-b681-1607ee4eb77e","activeVal.ts","e739a268-5eaf-11f1-b681-1607ee4eb77e",47,["D",1780424501666],"import type { Message } from \"./api.ts\";\n\n// MCP tool calls that carry a `val: \"handle/name\"` field in their input — i.e.\n// the ones that tell us which val Townie is currently working on.\nconst VAL_TARGETED_TOOLS = new Set([\n \"read_file\",\n \"create_file\",\n \"update_file\",\n \"replace_in_file\",\n \"delete_file\",\n \"create_val\",\n \"fetch_val_endpoint\",\n \"run_file\",\n \"get_val_detail\",\n \"list_files\",\n \"get_logs\",\n \"get_traces\",\n]);\n\n// Tools that WRITE code (so the deployed page changed and the preview should reload).\nconst FILE_WRITING_TOOLS = new Set([\n \"create_file\",\n \"update_file\",\n \"replace_in_file\",\n \"create_val\",\n]);\n\nfunction parseToolUse(m: Message): { name?: string; input?: any } | null {\n if (m.type !== \"tool_use\") return null;\n try {\n return JSON.parse(m.content) as { name?: string; input?: any };\n } catch {\n return null;\n }\n}\n\n// Pull a \"handle/name\" val identifier out of a tool call's input. The MCP tools\n// pass it as `input.val`; create_val instead passes a bare name we can't resolve\n// to an owner, so we skip those for targeting.\nfunction valOf(input: any): string | null {\n const v = input?.val;\n return typeof v === \"string\" && v.includes(\"/\") ? v : null;\n}\n\n// The \"active val\": the most recent val Townie targeted across the thread. We scan\n// from the end so the latest call wins.\nexport function activeValFromMessages(messages: Message[]): string | null {\n for (let i = messages.length - 1; i >= 0; i--) {\n const parsed = parseToolUse(messages[i]);\n if (!parsed?.name || !VAL_TARGETED_TOOLS.has(parsed.name)) continue;\n const val = valOf(parsed.input);\n if (val) return val;\n }\n return null;\n}\n\n// True if any message at id > sinceId is a file-writing tool call — used to decide\n// whether to bump the preview's cache-buster after a turn so changes land.\nexport function hasFileWriteSince(messages: Message[], sinceId: number): boolean {\n for (const m of messages) {\n if (m.id <= sinceId) continue;\n const parsed = parseToolUse(m);\n if (parsed?.name && FILE_WRITING_TOOLS.has(parsed.name)) return true;\n }\n return false;\n}\n",[],[202,293,295],"b0fab4a8-5eaa-11f1-b755-1607ee4eb77e",["D",1780422263049],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Me } from \"./api.ts\";\n\n// A small \"used / limit messages\" bar. Turns red once the limit is hit.\nexport function UsageMeter({ me }: { me: Me }) {\n const limit = Math.max(me.limit, 1);\n const pct = Math.min(100, Math.round((me.used / limit) * 100));\n const atLimit = me.remaining <= 0;\n return (\n

\n Demo usage\n \n {me.used} / {me.limit} messages\n \n

\n \n

\n );\n}\n",[],[202,293,70],"96850832-5eb2-11f1-8b92-1607ee4eb77e",59,["D",1780425654755],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { type Me, SOURCE_VAL_URL, type Thread } from \"./api.ts\";\nimport { UsageMeter } from \"./UsageMeter.tsx\";\nimport { Logo } from \"./Logo.tsx\";\n\n// The conversations sidebar. On md+ it's a static, always-visible column. Below md\n// it becomes an off-canvas drawer: `open` slides it in/out (transform driven from\n// App), and selecting a thread / New chat closes it (handled by the parent).\nexport function Sidebar(\n { me, threads, currentId, onOpen, onNewChat, onLogout, open = false }: {\n me: Me;\n threads: Thread[];\n currentId: string | null;\n onOpen: (id: string) => void;\n onNewChat: () => void;\n onLogout: () => void;\n open?: boolean;\n },\n) {\n return (\n \n {/* Brand + new chat */}\n

\n \n

\n Townie\n

\n \n + New chat\n \n

\n\n {/* Threads */}\n

\n {threads.length === 0\n ? (\n

\n No conversations yet.\n

\n )\n : threads.map((t) => (\n onOpen(t.id)}\n class={`block w-full truncate rounded-lg px-3 py-2 text-left text-sm ${\n t.id === currentId\n ? \"bg-white font-medium text-neutral-900 shadow-sm\"\n : \"text-neutral-700 hover:bg-neutral-100\"\n }`}\n >\n {t.title || \"New chat\"}\n \n ))}\n

\n\n {/* Usage + demo context */}\n

\n \n

\n This is a demo —{\" \"}\n \n remix this val\n {\" \"}\n and add your own ANTHROPIC_API_KEY to keep chatting.\n

\n\n {/* Account */}\n

\n @\n {me.username}\n

\n \n Log out\n \n

\n\n \n View source\n \n

\n \n );\n}\n",[],[202,293,81],"19986c88-5eb2-11f1-aa3c-1607ee4eb77e","Preview.tsx","f559c2d8-5eaf-11f1-881f-1607ee4eb77e",56,["D",1780425445148],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"./api.ts\";\n\n// A minimal \"browser\" preview pane: a chrome bar (editable address + reload) over\n// an iframe showing the deployed page of the val Townie is working on.\n//\n// - `activeVal` (handle/name) is detected from the thread's tool calls; when it\n// changes we resolve its deployed URL via /api/preview-url and load it.\n// - `reloadSignal` bumps whenever Townie writes code, so the iframe re-fetches the\n// (now-updated) deployed page. The manual reload button bumps it too.\n//\n// SECURITY: the iframe only ever loads a plain deployed-page URL. We never put any\n// token/cookie/auth into the src or postMessage to it. The sandbox deliberately\n// OMITS allow-same-origin (allow-scripts + allow-same-origin together would let the\n// framed page break out of its own sandbox) and allow-top-navigation. Tradeoff: a\n// previewed val can't reach storage/cookies, so vals relying on their own login\n// cookies show up logged-out in the preview — acceptable for a code preview.\nexport function Preview(\n { activeVal, reloadSignal }: { activeVal: string | null; reloadSignal: number },\n) {\n // The URL shown in the address bar (user-editable) and actually loaded.\n const [address, setAddress] = useState(\"\");\n // Cache-buster counter; appended as ?_= so the iframe reloads on demand.\n const [bust, setBust] = useState(0);\n const [resolving, setResolving] = useState(false);\n // Remember which val we last auto-resolved, so manual edits aren't clobbered by\n // re-renders, and a new active val triggers a fresh resolve.\n const resolvedForRef = useRef(null);\n\n // When the active val changes, resolve its deployed URL and load it.\n useEffect(() => {\n if (!activeVal || activeVal === resolvedForRef.current) return;\n resolvedForRef.current = activeVal;\n let alive = true;\n setResolving(true);\n api.previewUrl(activeVal)\n .then((url) => {\n if (!alive) return;\n if (url) {\n setAddress(url);\n setBust((n) => n + 1);\n }\n // If url is null we leave the address field as-is for the user to fill in.\n })\n .catch(() => {})\n .finally(() => alive && setResolving(false));\n return () => {\n alive = false;\n };\n }, [activeVal]);\n\n // Reload when Townie writes code (parent bumps reloadSignal).\n useEffect(() => {\n if (reloadSignal > 0 && address) setBust((n) => n + 1);\n }, [reloadSignal]);\n\n // Build the iframe src with a cache-buster so the same URL re-fetches.\n function srcWithBust(): string {\n if (!address) return \"\";\n try {\n const u = new URL(address);\n u.searchParams.set(\"_\", String(bust));\n return u.toString();\n } catch {\n return address;\n }\n }\n\n function reload() {\n if (address) setBust((n) => n + 1);\n }\n\n function onSubmit(e: any) {\n e.preventDefault();\n reload();\n }\n\n const src = srcWithBust();\n\n return (\n

\n {/* Browser chrome */}\n \n \n ⟳\n \n setAddress((e.target as HTMLInputElement).value)}\n placeholder={resolving ? \"Resolving preview…\" : \"Preview URL — appears when Townie touches a val\"}\n spellcheck={false}\n class=\"min-w-0 flex-1 rounded-full border border-neutral-200 bg-white px-3 py-1 font-mono text-xs text-neutral-700 placeholder-neutral-400 focus:border-blue-600 focus:outline-none\"\n />\n \n\n {/* Preview surface */}\n

\n {src\n ? (\n \n )\n : (\n

\n ◧\n

\n Live preview shows up here once Townie reads or edits one of your\n vals. You can also paste a URL above.\n

\n )}\n

\n );\n}\n",[],[202,293,314],"b0faa152-5eaa-11f1-b755-1607ee4eb77e",["D",1780422263049],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n// Claude-inspired starburst mark. fill=currentColor, so callers set the color\n// with text-* (e.g. text-white on a coral tile). Mirrors /frontend/favicon.svg.\nexport function Logo({ className = \"h-6 w-6\" }: { className?: string }) {\n return (\n \n );\n}\n",[],[202,293,86],"76349518-5eab-11f1-a8a0-1607ee4eb77e","LoginScreen.tsx","019e896f-c16d-772c-815d-e6c74d79aee1",13,["D",1780422594057],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { SOURCE_VAL_URL } from \"./api.ts\";\nimport { Logo } from \"./Logo.tsx\";\n\n// Centered logged-out screen. The button links to the backend's /auth/login route.\nexport function LoginScreen() {\n return (\n

\n \n

\n Townie\n

\n A Claude agent that builds and edits your Val Town vals — chat, and it\n ships. Log in to connect your account.\n

\n \n Log in with Val Town\n \n \n View the source on Val Town\n \n

\n );\n}\n",[],[202,293,327],"ac07e782-5eb3-11f1-bac9-1607ee4eb77e","Composer.tsx","019e896f-c16d-772c-815d-e13141d53a2c",63,["D",1780426120337],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// Max textarea height before it starts scrolling (~8 lines).\nconst MAX_TEXTAREA_HEIGHT = 200;\n\n// Sticky message composer. Disabled (with a reason) when busy or limit-reached.\n// The textarea auto-grows with its content up to MAX_TEXTAREA_HEIGHT, then scrolls.\nexport function Composer(\n { onSend, busy, disabled, disabledReason }: {\n onSend: (text: string) => void;\n busy: boolean;\n disabled?: boolean;\n disabledReason?: string;\n },\n) {\n const [text, setText] = useState(\"\");\n const taRef = useRef(null);\n\n // Resize to fit content (capped at MAX). Reset to auto first so it can shrink.\n function autoGrow() {\n const el = taRef.current;\n if (!el) return;\n el.style.height = \"auto\";\n el.style.height = Math.min(el.scrollHeight, MAX_TEXTAREA_HEIGHT) + \"px\";\n }\n\n // Re-fit whenever the text changes — covers send (text → \"\") collapsing back to\n // one row, as well as programmatic edits.\n useEffect(autoGrow, [text]);\n\n function submit() {\n const t = text.trim();\n if (!t || busy || disabled) return;\n onSend(t);\n setText(\"\");\n }\n\n return (\n

\n {disabled && disabledReason && (\n

\n {disabledReason}\n

\n )}\n

\n setText((e.target as HTMLTextAreaElement).value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n submit();\n }\n }}\n />\n \n {busy ? \"…\" : \"Send\"}\n \n

\n Press Enter to send · Shift+Enter for a new line\n

\n );\n}\n",[],[202,293,335],"b0fa8262-5eaa-11f1-b755-1607ee4eb77e","Chat.tsx","019e896f-c16d-772c-815d-dca897e816f3",["D",1780422263049],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Message } from \"./api.ts\";\nimport { MessageList } from \"./messages/MessageList.tsx\";\nimport { Composer } from \"./Composer.tsx\";\n\n// The conversation pane: scrolling message list + sticky composer.\nexport function Chat(\n { messages, onSend, busy, sendDisabled, sendDisabledReason }: {\n messages: Message[];\n onSend: (text: string) => void;\n busy: boolean;\n sendDisabled?: boolean;\n sendDisabledReason?: string;\n },\n) {\n return (\n

\n {messages.length === 0\n ? (\n

\n ✦\n

\n Start the conversation\n

\n Send a message and your Claude Managed Agent will get to work.\n

\n )\n : }\n \n

\n );\n}\n",[],[202,293,343],"c6a201b8-5eb3-11f1-9c15-1607ee4eb77e","App.tsx","019e896f-c16d-772c-815d-da6f0f7d2cc2",65,["D",1780426164966],11,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n api,\n LimitError,\n type Me,\n type Message,\n type Thread,\n UnauthorizedError,\n} from \"./api.ts\";\nimport { Chat } from \"./Chat.tsx\";\nimport { Sidebar } from \"./Sidebar.tsx\";\nimport { LoginScreen } from \"./LoginScreen.tsx\";\nimport { Preview } from \"./Preview.tsx\";\nimport { Logo } from \"./Logo.tsx\";\nimport { activeValFromMessages, hasFileWriteSince } from \"./activeVal.ts\";\n\ntype Auth = \"loading\" | \"out\" | Me;\ntype MobilePane = \"chat\" | \"preview\";\n\nexport function App() {\n const [auth, setAuth] = useState(\"loading\");\n const [threads, setThreads] = useState([]);\n const [currentId, setCurrentId] = useState(null);\n const [messages, setMessages] = useState([]);\n const [busy, setBusy] = useState(false);\n const [limitMsg, setLimitMsg] = useState(null);\n // Bumped whenever Townie writes code in the open thread, so the preview reloads.\n const [reloadSignal, setReloadSignal] = useState(0);\n // Mobile-only UI state (ignored at md+ via responsive classes).\n const [sidebarOpen, setSidebarOpen] = useState(false);\n const [mobilePane, setMobilePane] = useState(\"chat\");\n const cursorRef = useRef(0);\n // Highest message id we've already scanned for file-writes (so each write fires once).\n const writeCursorRef = useRef(0);\n\n // Any 401 anywhere drops us back to the login screen.\n function handleErr(e: unknown) {\n if (e instanceof UnauthorizedError) setAuth(\"out\");\n }\n\n async function refreshMe() {\n try {\n setAuth(await api.me());\n } catch (e) {\n if (e instanceof UnauthorizedError) setAuth(\"out\");\n }\n }\n\n async function refreshThreads() {\n try {\n setThreads(await api.listThreads());\n } catch (e) {\n handleErr(e);\n }\n }\n\n // On load: check auth, then load threads if logged in.\n useEffect(() => {\n (async () => {\n try {\n const me = await api.me();\n setAuth(me);\n await refreshThreads();\n } catch (e) {\n if (e instanceof UnauthorizedError) setAuth(\"out\");\n }\n })();\n }, []);\n\n function openThread(id: string) {\n setCurrentId(id);\n setMessages([]);\n setLimitMsg(null);\n cursorRef.current = 0;\n writeCursorRef.current = 0;\n // On mobile, picking a thread should reveal the chat and close the drawer.\n setSidebarOpen(false);\n setMobilePane(\"chat\");\n }\n\n async function newChat() {\n try {\n const t = await api.createThread();\n await refreshThreads();\n openThread(t.id);\n } catch (e) {\n handleErr(e);\n }\n }\n\n async function logout() {\n await api.logout();\n globalThis.location.reload();\n }\n\n // Poll the open thread for new messages (~1s), deduping optimistic id<0 rows.\n useEffect(() => {\n if (!currentId || typeof auth === \"string\") return;\n let alive = true;\n async function poll() {\n try {\n const rows = await api.getMessages(currentId!, cursorRef.current);\n if (!alive || rows.length === 0) return;\n cursorRef.current = rows[rows.length - 1].id;\n // If Townie wrote code in these new rows, reload the preview (once per write).\n if (hasFileWriteSince(rows, writeCursorRef.current)) {\n setReloadSignal((n) => n + 1);\n }\n writeCursorRef.current = rows[rows.length - 1].id;\n setMessages((prev) => [...prev.filter((m) => m.id >= 0), ...rows]);\n } catch (e) {\n handleErr(e);\n }\n }\n poll();\n const iv = setInterval(poll, 1000);\n return () => {\n alive = false;\n clearInterval(iv);\n };\n }, [currentId, auth]);\n\n // The val Townie is currently working on (newest tool call wins). Drives the\n // live preview pane's address resolution. Computed here (above the auth early\n // returns) so hook order stays stable across renders.\n const activeVal = useMemo(() => activeValFromMessages(messages), [messages]);\n\n async function send(text: string) {\n if (!currentId) return;\n const optimistic: Message = {\n id: -1,\n thread_id: currentId,\n role: \"user\",\n type: \"text\",\n content: text,\n created_at: new Date().toISOString(),\n };\n setMessages((prev) => [...prev, optimistic]);\n setBusy(true);\n try {\n await api.send(currentId, text);\n refreshMe();\n } catch (e) {\n if (e instanceof LimitError) {\n setLimitMsg(e.message);\n setMessages((prev) => prev.filter((m) => m.id >= 0));\n refreshMe();\n } else {\n handleErr(e);\n }\n } finally {\n setBusy(false);\n refreshThreads();\n }\n }\n\n if (auth === \"loading\") {\n return (\n

\n Loading…\n

\n );\n }\n if (auth === \"out\") return ;\n\n const me = auth;\n const atLimit = me.remaining <= 0;\n\n return (\n

\n \n {/* Mobile drawer backdrop — tap to close. Hidden at md+. */}\n {sidebarOpen && (\n setSidebarOpen(false)}\n class=\"fixed inset-0 z-30 bg-black/40 md:hidden\"\n />\n )}\n

\n {/* Mobile top bar — hamburger + brand + (in-thread) Chat/Preview toggle.\n sticky + opaque bg so it stays reachable while chat/preview scroll\n beneath it; md:hidden means none of this affects the desktop layout. */}\n

\n setSidebarOpen(true)}\n class=\"shrink-0 rounded-lg border border-neutral-200 bg-white p-2 text-neutral-700 hover:bg-neutral-100\"\n >\n \n \n

\n \n

\n Townie\n

\n {currentId && (\n

\n setMobilePane(\"chat\")}\n class={`rounded-md px-3 py-1 ${\n mobilePane === \"chat\"\n ? \"bg-blue-600 text-white\"\n : \"text-neutral-600 hover:text-neutral-900\"\n }`}\n >\n Chat\n \n setMobilePane(\"preview\")}\n class={`rounded-md px-3 py-1 ${\n mobilePane === \"preview\"\n ? \"bg-blue-600 text-white\"\n : \"text-neutral-600 hover:text-neutral-900\"\n }`}\n >\n Preview\n \n

\n )}\n

\n\n {/* min-h-0 lets this flex child shrink below its content so the column\n stays viewport-bounded and scrolling happens in the inner panes\n (MessageList / Preview), not the whole page — keeping the bar pinned. */}\n

\n {currentId\n ? (\n

\n \n

\n )\n : (\n

\n ✦\n

\n Welcome, {me.username}\n

\n Select a conversation, or start a new chat to talk to your\n Claude Managed Agent.\n

\n \n + New chat\n \n

\n )}\n \n \n \n );\n}\n",[],[202,293,350],"b0fa5832-5eaa-11f1-b755-1607ee4eb77e","ToolMessage.tsx","019e896f-c16d-772c-815d-d14b6b486840","019e896f-c16d-772c-815d-d5a92f51578d",["D",1780422263049],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../api.ts\";\n\n// Pretty-print whatever the content parses to; fall back to the raw string.\nfunction pretty(content: string): string {\n try {\n return JSON.stringify(JSON.parse(content), null, 2);\n } catch {\n return content;\n }\n}\n\n// Compact click-to-expand chip for tool_use / tool_result rows.\n// tool_use → 🔧 ▸ (parsed { name, input })\n// tool_result → 📤 result ▸ (parsed { output, is_error? }) — red when is_error.\nexport function ToolMessage({ m }: { m: Message }) {\n const [open, setOpen] = useState(false);\n\n let label: string;\n let icon: string;\n let isError = false;\n\n if (m.type === \"tool_use\") {\n icon = \"🔧\";\n let name = \"tool\";\n try {\n const parsed = JSON.parse(m.content) as { name?: string };\n if (parsed?.name) name = parsed.name;\n } catch { /* keep default */ }\n label = name;\n } else {\n // tool_result\n icon = \"📤\";\n label = \"result\";\n try {\n const parsed = JSON.parse(m.content) as { is_error?: boolean };\n isError = !!parsed?.is_error;\n } catch { /* keep default */ }\n }\n\n return (\n

\n setOpen((v) => !v)}\n class={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium ${\n isError\n ? \"border-red-200 bg-red-50 text-red-700 hover:bg-red-100\"\n : \"border-neutral-200 bg-neutral-100 text-neutral-700 hover:bg-neutral-200\"\n }`}\n >\n {icon}\n {label}\n \n ▸\n \n \n {open && (\n

\n            {pretty(m.content)}\n

\n )}\n

\n );\n}\n",[],[202,293,366,359],"messages","b0fa4a90-5eaa-11f1-b755-1607ee4eb77e","ToolGroup.tsx","019e896f-c16d-772c-815d-cc93e2b07c56",["D",1780422263049],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../api.ts\";\nimport { ToolMessage } from \"./ToolMessage.tsx\";\n\nconst toolName = (m: Message): string => {\n try {\n return (JSON.parse(m.content) as { name?: string }).name ?? \"tool\";\n } catch {\n return \"tool\";\n }\n};\n\n// A run of consecutive tool_use / tool_result rows. A single tool call renders\n// inline (stays readable); multi-step runs collapse into one \"N steps\" line you\n// can expand — so a long agent run doesn't dominate the transcript.\nexport function ToolGroup({ items }: { items: Message[] }) {\n const [open, setOpen] = useState(false);\n const calls = items.filter((m) => m.type === \"tool_use\");\n\n if (calls.length <= 1) {\n return

{items.map((m) => )}

;\n }\n\n const names = [...new Set(calls.map(toolName))];\n const hasError = items.some((m) => {\n if (m.type !== \"tool_result\") return false;\n try {\n return !!(JSON.parse(m.content) as { is_error?: boolean }).is_error;\n } catch {\n return false;\n }\n });\n\n return (\n

\n setOpen((v) => !v)}\n class={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium ${\n hasError\n ? \"border-red-200 bg-red-50 text-red-700 hover:bg-red-100\"\n : \"border-neutral-200 bg-neutral-100 text-neutral-700 hover:bg-neutral-200\"\n }`}\n >\n 🔧\n {calls.length} steps\n · {names.join(\", \")}\n ▸\n \n {open && (\n

\n {items.map((m) => )}\n

\n )}\n

\n );\n}\n",[],[202,293,366,368],"3e6da4e8-5eb6-11f1-a0dd-1607ee4eb77e","TextMessage.tsx","019e896f-c16d-772c-815d-c97d15341bec",67,["D",1780427224945],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://esm.sh/marked@14.1.3\";\nimport DOMPurify from \"https://esm.sh/dompurify@3.2.4\";\nimport type { Message } from \"../api.ts\";\n\nmarked.setOptions({ gfm: true, breaks: true });\n\n// User messages: plain text in a coral bubble. Assistant/system text is rendered\n// as GitHub-flavored Markdown inside a neutral bubble via Tailwind `prose`.\nexport function TextMessage({ m }: { m: Message }) {\n if (m.role === \"user\") {\n return (\n

\n {m.content}\n

\n );\n }\n // Drop inline images that point at sandbox/local paths (e.g.\n // /mnt/session/outputs/x.png) — the browser can't load them. Real file\n // artifacts are shown as their own cards; keep only genuine http(s) images.\n const rendered = (marked.parse(m.content) as string).replace(\n /]*>/gi,\n (tag) => (/\\bsrc\\s*=\\s*[\"']https?:\\/\\//i.test(tag) ? tag : \"\"),\n );\n // Sanitize as the last step so untrusted model/tool output can't inject\n //

History