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

\n \n

\n );\n}\n",[175,74,203],"96850832-5eb2-11f1-8b92-1607ee4eb77e","Sidebar.tsx","019e896f-c16d-772c-815d-ec8f2628ac42",59,["D",1780425654755],2,"/** @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",[175,74,209],"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",[175,74,217],"b0faa152-5eaa-11f1-b755-1607ee4eb77e","Logo.tsx","019e896f-c16d-772c-815d-eb88dffd9568",["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",[175,74,224],"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",[175,74,230],"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",[175,74,237],"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",[175,74,244],"c6a201b8-5eb3-11f1-9c15-1607ee4eb77e",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",[175,74,67],"b0fa63ea-5eaa-11f1-b755-1607ee4eb77e","messages","019e896f-c16d-772c-815d-d5a92f51578d",["D",1780422263049],[175,74,256],"pulls","branches","forks","envVars",{"_267":213,"_269":94},"connections",{"_267":94,"_268":94},"count","unfilledCount","emptyCount",{"_33":494,"_13":436,"_65":429,"_42":-5,"_35":36,"_169":26,"_170":24,"_37":495,"_39":94,"_68":75,"_172":-5,"_70":30,"_173":-5,"_310":496,"_17":497},{"_33":485,"_13":486,"_65":487,"_42":429,"_35":36,"_169":488,"_170":24,"_37":489,"_39":490,"_68":69,"_172":491,"_70":30,"_173":-5,"_310":492,"_17":493},{"_33":477,"_13":478,"_65":479,"_42":429,"_35":36,"_169":480,"_170":24,"_37":481,"_39":26,"_68":69,"_172":482,"_70":30,"_173":-5,"_310":483,"_17":484},{"_33":470,"_13":471,"_65":472,"_42":429,"_35":36,"_169":213,"_170":24,"_37":473,"_39":26,"_68":69,"_172":474,"_70":30,"_173":-5,"_310":475,"_17":476},{"_33":462,"_13":463,"_65":464,"_42":429,"_35":36,"_169":465,"_170":24,"_37":466,"_39":192,"_68":69,"_172":467,"_70":30,"_173":-5,"_310":468,"_17":469},{"_33":453,"_13":454,"_65":455,"_42":429,"_35":36,"_169":456,"_170":24,"_37":457,"_39":458,"_68":69,"_172":459,"_70":30,"_173":-5,"_310":460,"_17":461},{"_33":445,"_13":446,"_65":447,"_42":429,"_35":36,"_169":448,"_170":24,"_37":449,"_39":192,"_68":69,"_172":450,"_70":30,"_173":-5,"_310":451,"_17":452},{"_33":437,"_13":438,"_65":439,"_42":429,"_35":36,"_169":440,"_170":24,"_37":441,"_39":94,"_68":69,"_172":442,"_70":30,"_173":-5,"_310":443,"_17":444},{"_33":426,"_13":427,"_65":428,"_42":429,"_35":36,"_169":430,"_170":24,"_37":431,"_39":432,"_68":69,"_172":433,"_70":30,"_173":-5,"_310":434,"_17":435},{"_33":422,"_13":175,"_65":168,"_42":-5,"_35":36,"_169":26,"_170":24,"_37":423,"_39":94,"_68":75,"_172":-5,"_70":30,"_173":-5,"_310":424,"_17":425},{"_33":167,"_13":74,"_65":73,"_42":168,"_35":36,"_169":26,"_170":24,"_37":419,"_39":94,"_68":75,"_172":-5,"_70":30,"_173":-5,"_310":420,"_17":421},{"_33":255,"_13":256,"_65":257,"_42":73,"_35":36,"_169":26,"_170":24,"_37":416,"_39":94,"_68":75,"_172":-5,"_70":30,"_173":-5,"_310":417,"_17":418},{"_33":409,"_13":410,"_65":411,"_42":257,"_35":36,"_169":26,"_170":24,"_37":412,"_39":94,"_68":69,"_172":413,"_70":30,"_173":-5,"_310":414,"_17":415},{"_33":402,"_13":403,"_65":404,"_42":257,"_35":36,"_169":26,"_170":24,"_37":405,"_39":94,"_68":69,"_172":406,"_70":30,"_173":-5,"_310":407,"_17":408},{"_33":395,"_13":396,"_65":397,"_42":257,"_35":36,"_169":26,"_170":24,"_37":398,"_39":94,"_68":69,"_172":399,"_70":30,"_173":-5,"_310":400,"_17":401},{"_33":387,"_13":388,"_65":389,"_42":257,"_35":36,"_169":390,"_170":24,"_37":391,"_39":213,"_68":69,"_172":392,"_70":30,"_173":-5,"_310":393,"_17":394},{"_33":380,"_13":381,"_65":382,"_42":257,"_35":36,"_169":26,"_170":24,"_37":383,"_39":94,"_68":69,"_172":384,"_70":30,"_173":-5,"_310":385,"_17":386},{"_33":373,"_13":374,"_65":375,"_42":257,"_35":36,"_169":26,"_170":24,"_37":376,"_39":94,"_68":69,"_172":377,"_70":30,"_173":-5,"_310":378,"_17":379},{"_33":249,"_13":67,"_65":66,"_42":73,"_35":36,"_169":250,"_170":24,"_37":370,"_39":252,"_68":69,"_172":253,"_70":30,"_173":-5,"_310":371,"_17":372},{"_33":243,"_13":244,"_65":245,"_42":73,"_35":36,"_169":26,"_170":24,"_37":367,"_39":94,"_68":69,"_172":247,"_70":30,"_173":-5,"_310":368,"_17":369},{"_33":236,"_13":237,"_65":238,"_42":73,"_35":36,"_169":239,"_170":24,"_37":364,"_39":192,"_68":69,"_172":241,"_70":30,"_173":-5,"_310":365,"_17":366},{"_33":229,"_13":230,"_65":231,"_42":73,"_35":36,"_169":232,"_170":24,"_37":361,"_39":26,"_68":69,"_172":234,"_70":30,"_173":-5,"_310":362,"_17":363},{"_33":223,"_13":224,"_65":225,"_42":73,"_35":36,"_169":26,"_170":24,"_37":358,"_39":94,"_68":69,"_172":227,"_70":30,"_173":-5,"_310":359,"_17":360},{"_33":216,"_13":217,"_65":218,"_42":73,"_35":36,"_169":219,"_170":24,"_37":355,"_39":213,"_68":69,"_172":221,"_70":30,"_173":-5,"_310":356,"_17":357},{"_33":208,"_13":209,"_65":210,"_42":73,"_35":36,"_169":211,"_170":24,"_37":352,"_39":213,"_68":69,"_172":214,"_70":30,"_173":-5,"_310":353,"_17":354},{"_33":202,"_13":203,"_65":204,"_42":73,"_35":36,"_169":26,"_170":24,"_37":349,"_39":94,"_68":69,"_172":206,"_70":30,"_173":-5,"_310":350,"_17":351},{"_33":195,"_13":196,"_65":197,"_42":73,"_35":36,"_169":198,"_170":24,"_37":346,"_39":94,"_68":69,"_172":200,"_70":30,"_173":-5,"_310":347,"_17":348},{"_33":187,"_13":188,"_65":189,"_42":73,"_35":36,"_169":190,"_170":24,"_37":343,"_39":192,"_68":69,"_172":193,"_70":30,"_173":-5,"_310":344,"_17":345},{"_33":336,"_13":337,"_65":338,"_42":168,"_35":36,"_169":26,"_170":24,"_37":339,"_39":94,"_68":21,"_172":340,"_70":30,"_173":-5,"_310":341,"_17":342},{"_33":328,"_13":329,"_65":330,"_42":168,"_35":36,"_169":331,"_170":24,"_37":332,"_39":26,"_68":21,"_172":333,"_70":30,"_173":-5,"_310":334,"_17":335},{"_33":321,"_13":322,"_65":323,"_42":168,"_35":36,"_169":26,"_170":24,"_37":324,"_39":94,"_68":69,"_172":325,"_70":30,"_173":-5,"_310":326,"_17":327},{"_33":313,"_13":314,"_65":315,"_42":-5,"_35":36,"_169":316,"_170":24,"_37":317,"_39":26,"_68":21,"_172":318,"_70":30,"_173":-5,"_310":319,"_17":320},{"_33":303,"_13":304,"_65":89,"_42":-5,"_35":36,"_169":305,"_170":24,"_37":306,"_39":307,"_68":308,"_172":309,"_70":30,"_173":14,"_310":311,"_17":312},"cfd01334-5eb2-11f1-90d3-1607ee4eb77e","index.ts",62,["D",1780425750864],7,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { oauthMiddleware } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { Hono } from \"npm:hono\";\nimport * as db from \"./backend/db.ts\";\nimport { MESSAGE_LIMIT, requireUser, type User } from \"./backend/auth.ts\";\nimport { ensureSession, runTurn } from \"./backend/agent.ts\";\nimport { ensureUserVault } from \"./backend/vault.ts\";\nimport { getFileBytes } from \"./backend/files.ts\";\nimport { renderOg } from \"./backend/og.ts\";\nimport { resolvePreviewUrl } from \"./backend/preview.ts\";\n\nconst app = new Hono();\n\n// Static frontend (public). The /auth/* routes are injected by oauthMiddleware.\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Social card image (Open Graph / Twitter) — public, so link unfurlers can fetch it.\napp.get(\"/og.png\", () => renderOg());\n\n// Everything under /api/* requires a logged-in Val Town user.\napp.use(\"/api/*\", async (c, next) => {\n const user = await requireUser(c);\n if (!user) return c.json({ error: \"Log in with Val Town to continue.\" }, 401);\n c.set(\"user\", user);\n await next();\n});\n\n// Current user + usage against the per-user message limit.\napp.get(\"/api/me\", async (c) => {\n const user = c.get(\"user\") as { username: string; id: string };\n const used = await db.countUserMessages(user.id);\n return c.json({\n username: user.username,\n used,\n limit: MESSAGE_LIMIT,\n remaining: Math.max(0, MESSAGE_LIMIT - used),\n });\n});\n\n// Resolve a val's deployed page URL for the live preview pane. Uses the logged-in\n// user's Val Town token so we can resolve their private/unlisted vals. Returns\n// { url } (the plain deployed-page URL — never any auth) or 404 if the val has no\n// HTTP file or can't be resolved.\napp.get(\"/api/preview-url\", async (c) => {\n const user = c.get(\"user\") as User;\n const val = c.req.query(\"val\");\n if (!val) return c.json({ error: \"missing val\" }, 400);\n const url = await resolvePreviewUrl(val, user.accessToken);\n if (!url) return c.json({ error: \"no deployed URL for that val\" }, 404);\n return c.json({ url });\n});\n\n// Threads (scoped to the current user)\napp.get(\"/api/threads\", async (c) => {\n const user = c.get(\"user\") as { id: string };\n return c.json(await db.listThreadsForUser(user.id));\n});\napp.post(\"/api/threads\", async (c) => {\n const user = c.get(\"user\") as { id: string };\n const id = crypto.randomUUID();\n await db.createThread(id, \"New chat\", user.id);\n return c.json(await db.getThread(id));\n});\n\n// Serve a sandbox file the agent surfaced: bytes from blob, mime/name from the\n// matching message row. Images render inline; other files download.\napp.get(\"/api/files/:id\", async (c) => {\n const user = c.get(\"user\") as User;\n const id = c.req.param(\"id\");\n const meta = await db.getFilePayload(id);\n // Enforce ownership: only the user whose thread surfaced this file may read it.\n // 404 (not 403) so we don't reveal that someone else's file id exists.\n if (!meta || meta.user_id !== user.id) return c.notFound();\n const res = await getFileBytes(id);\n const headers: Record = { \"Content-Type\": meta.mime };\n if (!meta.mime.startsWith(\"image/\")) {\n // Build Content-Disposition safely: the filename is agent-controlled, so\n // strip CR/LF/quotes/backslashes from the ASCII token to prevent header\n // injection, and add an RFC 5987 percent-encoded filename* for fidelity.\n const raw = meta.name ?? \"download\";\n const asciiName = raw.replace(/[\\r\\n\"\\\\]/g, \"_\");\n headers[\"Content-Disposition\"] =\n `attachment; filename=\"${asciiName}\"; filename*=UTF-8''${encodeURIComponent(raw)}`;\n }\n return new Response(await res.arrayBuffer(), { headers });\n});\n\n// Poll for messages newer than the last row the client has seen (own threads only)\napp.get(\"/api/threads/:id/messages\", async (c) => {\n const user = c.get(\"user\") as { id: string };\n const thread = await db.getThread(c.req.param(\"id\"));\n if (!thread || thread.user_id !== user.id) return c.notFound();\n return c.json(await db.getMessages(thread.id, Number(c.req.query(\"after\") ?? 0)));\n});\n\n// One user turn. Enforce the per-user message limit FIRST, then: insert the user\n// row, ensure a session, and stream events into SQLite until idle. UI relies on polling.\napp.post(\"/api/threads/:id/messages\", async (c) => {\n const user = c.get(\"user\") as User;\n const thread = await db.getThread(c.req.param(\"id\"));\n if (!thread || thread.user_id !== user.id) return c.notFound();\n\n const used = await db.countUserMessages(user.id);\n if (used >= MESSAGE_LIMIT) {\n return c.json(\n {\n error: `You've reached the ${MESSAGE_LIMIT}-message limit for this demo.`,\n remaining: 0,\n },\n 429,\n );\n }\n\n const { text } = await c.req.json();\n await db.addMessage(thread.id, \"user\", \"text\", text);\n if (thread.title === \"New chat\") await db.setTitle(thread.id, text.slice(0, 60));\n // Per-user MCP auth: refresh this user's vault with their current Val Town\n // token, then bind it to the thread's session so Townie's Val Town MCP tools\n // act as them. The vault must exist before the session is created.\n const vaultId = await ensureUserVault(user);\n const sessionId = await ensureSession(thread, vaultId);\n await runTurn(thread.id, sessionId, text);\n return c.json({ ok: true });\n});\n\n// Unwrap Hono errors so we get real stack traces instead of \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// Request the Val Town scopes Townie needs so the access token it hands to the\n// MCP can actually read/write the user's vals, projects, SQLite, and blobs.\nexport default oauthMiddleware(\n {\n scopes: [\n \"openid\",\n \"offline_access\",\n \"profile\",\n \"user_r\",\n \"val_rw\",\n \"project_rw\",\n \"blob_rw\",\n \"sqlite_rw\",\n \"telemetry_rw\",\n ],\n },\n app.fetch,\n);\n","children",[],[304],"8f738606-5eab-11f1-a8a0-1607ee4eb77e","README.md","019e896f-c16d-772c-815e-0f7762917332",17,["D",1780422636411],"# Townie — a Claude Managed Agent for your Val Town account\n\nAn interactive chat UI for **Townie**, a\n[Claude Managed Agent](https://platform.claude.com/docs/en/managed-agents/quickstart)\nwired to the logged-in user's Val Town account over **MCP**. Each thread is one\nstateful agent **session**; the agent can read and edit *your* vals, run your\nSQLite, ship HTTP endpoints, and produce files — all acting as you, with your\npermissions. Hono (backend) + React (frontend), Val Town SQLite for storage.\n\nThis is a remix of\n[`templates/claude-managed-agents-ui`](https://www.val.town/x/templates/claude-managed-agents-ui)\nthat adds per-user Val Town MCP access.\n\n## How Townie gets access to your account\n\nThe Managed Agents API keeps MCP auth out of the (shared, versioned) agent\nconfig and supplies it per-session via a **vault**:\n\n1. **The agent** (`backend/agent.ts`) declares the Val Town MCP server by URL\n only — `mcp_servers: [{ type: \"url\", name: \"val_town\", url:\n \"https://api.val.town/v3/mcp\" }]` — plus an `mcp_toolset` set to\n `always_allow` so Townie's tools run without approval prompts. The system\n prompt is Val Town's official Townie prompt (fetched from\n `val.town/townie/system-prompt`) plus an addendum explaining that this Townie\n runs as a Managed Agent and the user's vals live behind the MCP.\n2. **The login** (`index.ts`) uses `oauthMiddleware` with the scopes Townie\n needs — `val_rw`, `project_rw`, `sqlite_rw`, `blob_rw`, `user_r`,\n `telemetry_rw`, `offline_access` — so the user's access token can actually do\n the work.\n3. **Per user** (`backend/vault.ts`) we keep one Anthropic vault holding a\n `static_bearer` credential whose token is that user's Val Town access token,\n bound to the Val Town MCP URL. It's created on first use and the token is\n rotated to the current one on every turn (std/oauth keeps the cookie token\n fresh), so the credential never goes stale.\n4. **Per session** (`backend/agent.ts`) we attach the user's vault via\n `vault_ids` when creating the thread's session (vaults can only be set at\n session-create time). Anthropic injects the bearer onto every outbound MCP\n call — the token never touches the agent's sandbox.\n\nThe result: when you tell Townie \"add a dark-mode toggle to my homepage val\", it\ncalls `list_vals` / `read_file` / `update_file` / `fetch_val_endpoint` on the Val\nTown MCP **as you**, and edits land in your account.\n\n## How the chat loop works\n\n- **A thread = one session.** The agent + environment are created **once**\n (lazily, cached in a `config` row); sessions pin to an agent version. Each\n thread makes one session (bound to its owner's vault) and reuses it.\n- On a new user message the server refreshes the user's vault token, ensures the\n session, then **opens the event stream, sends the message, and writes each\n event to SQLite** — `agent.message` → text, `agent.tool_use` /\n `agent.mcp_tool_use` → tool call, `session.error` → error — returning when the\n session goes idle.\n- The **frontend polls** `GET /api/threads/:id/messages?after=` ~1×/s\n and renders new rows. No SSE to the browser.\n- **Files Townie creates** under `/mnt/session/outputs/` are surfaced after each\n turn: `backend/files.ts` lists them (`files.list({ scope_id })`), downloads\n them, stashes the bytes in `std/blob`, and writes an image/file row served at\n `GET /api/files/:id`.\n\n## Setup\n\nSet `ANTHROPIC_API_KEY` (from ).\nEverything else — agent, environment, per-user vaults — is created on first use.\nTweak the model or system prompt in `backend/agent.ts` (the default is\n`claude-sonnet-4-6`; swap to `claude-opus-4-8` for the strongest Townie). To\nre-create the agent after changing its prompt/tools, clear the `agent_id` row in\nthe `config` table.\n\n## Files\n\n- `index.ts` — Hono server + API routes + OAuth scopes\n- `backend/agent.ts` — Managed Agent: create-once config (Val Town MCP + Townie\n prompt), per-thread vault-bound session, per-turn streaming\n- `backend/vault.ts` — per-user Anthropic vault holding the Val Town MCP bearer\n credential (created once, token rotated each turn)\n- `backend/auth.ts` — resolve the Val Town user + access token from the session\n- `backend/db.ts` — SQLite schema + helpers (`threads`, `messages`, `config`,\n `user_vaults`)\n- `backend/files.ts` — surface session output files: Files API → `std/blob` →\n image/file rows\n- `backend/og.ts` — Open Graph card at `GET /og.png`\n- `frontend/` — React chat UI\n\n## Notes & backlog\n\n- **MCP tools run as the user, with `always_allow`.** Townie edits your real\n vals without a confirmation step — same trust model as the official Townie. To\n add an approval gate, set the `mcp_toolset` permission policy to `always_ask`\n and handle `agent.tool_use` (`evaluated_permission === \"ask\"`) with a\n `user.tool_confirmation` round-trip.\n- **Token lifetime.** The vaulted token is the user's Val Town OAuth access\n token; it's refreshed every turn from the live session cookie. A session left\n idle past token expiry recovers on the next turn.\n- **Stream reconnection / long turns.** The turn request stays open for the whole\n agent turn; if it dies before `session.status_idle`, reopening the stream and\n replaying from the thread's `last_cursor` would resume it. Long turns can hit\n Val Town request limits — tied to the same reconnection work.\n",[],[314],"b0fadf3c-5eaa-11f1-b755-1607ee4eb77e","index.tsx","019e896f-c16d-772c-815e-0638c151961c",["D",1780422263049],"/** @jsxImportSource 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 = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[175,322],"747f2846-5eab-11f1-a9e2-1607ee4eb77e","index.html","019e896f-c16d-772c-815e-00e6646af854",12,["D",1780422591196],"\n\n \n \n \n Townie — your Val Town AI\n \n \n \n \n \n \n

\n \n \n \n\n",[],[175,329],"b0fad000-5eaa-11f1-b755-1607ee4eb77e","favicon.svg","019e896f-c16d-772c-815d-fe02605d2506",["D",1780422263049],"\n",[],[175,337],["D",1780424487591],[],[175,74,188],["D",1780424501666],[],[175,74,196],["D",1780422263049],[],[175,74,203],["D",1780425654755],[],[175,74,209],["D",1780425445148],[],[175,74,217],["D",1780422263049],[],[175,74,224],["D",1780422594057],[],[175,74,230],["D",1780426120337],[],[175,74,237],["D",1780422263049],[],[175,74,244],["D",1780426164966],[],[175,74,67],"b0fa5832-5eaa-11f1-b755-1607ee4eb77e","ToolMessage.tsx","019e896f-c16d-772c-815d-d14b6b486840",["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",[],[175,74,256,374],"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",[],[175,74,256,381],"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 · components