[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_418":419,"_420":421},"routes/_app.x.$handle.$name",{"_105":104,"_32":46,"_114":92,"_27":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_20":-5,"_126":127,"_128":129,"_130":25,"_131":132,"_133":61,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",16,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","backend/og.ts","latestPath","fileId","019e896f-c16d-772c-815d-b411ed076586","name","og.ts","fileType","script","content","// Open Graph / Twitter card (1200×630), generated with satori (JSX→SVG) +\n// resvg-wasm (SVG→PNG), served at GET /og.png. Modeled on stevekrouse/agentfax.\nimport satori from \"npm:satori@0.10.13\";\nimport { initWasm, Resvg } from \"npm:@resvg/resvg-wasm@2.6.2\";\n\n// Static-weight TTFs (variable fonts crash satori's opentype.js).\nconst SANS_BOLD_TTF = \"https://raw.githubusercontent.com/google/fonts/main/ofl/ptsans/PT_Sans-Web-Bold.ttf\";\nconst SANS_REGULAR_TTF = \"https://raw.githubusercontent.com/google/fonts/main/ofl/ptsans/PT_Sans-Web-Regular.ttf\";\nconst RESVG_WASM_URL = \"https://unpkg.com/@resvg/resvg-wasm@2.6.2/index_bg.wasm\";\n\nconst CORAL = \"#D97757\", IVORY = \"#F1EEE6\", INK = \"#1E1B16\", MUTE = \"#5B564A\";\n\nlet fontsPromise: Promise<{ bold: ArrayBuffer; regular: ArrayBuffer }> | null = null;\nfunction loadFonts() {\n if (!fontsPromise) {\n const get = (url: string) => fetch(url).then((r) => r.arrayBuffer());\n fontsPromise = Promise.all([get(SANS_BOLD_TTF), get(SANS_REGULAR_TTF)])\n .then(([bold, regular]) => ({ bold, regular }));\n }\n return fontsPromise;\n}\n\nlet wasmPromise: Promise | null = null;\nfunction ensureResvg() {\n if (!wasmPromise) {\n wasmPromise = fetch(RESVG_WASM_URL).then((r) => r.arrayBuffer()).then((b) => initWasm(b));\n }\n return wasmPromise;\n}\n\n// deno-lint-ignore no-explicit-any\nconst div = (style: any, children: any) => ({ type: \"div\", props: { style: { display: \"flex\", ...style }, children } });\n// deno-lint-ignore no-explicit-any\nconst text = (content: string, style: any) => ({ type: \"div\", props: { style: { display: \"flex\", ...style }, children: content } });\n\n// The Claude-inspired starburst (12 rays), as native satori SVG nodes.\nconst burst = (fill: string, size: number) => ({\n type: \"svg\",\n props: {\n width: size,\n height: size,\n viewBox: \"0 0 100 100\",\n children: Array.from({ length: 12 }, (_, i) => ({\n type: \"rect\",\n props: { x: 45.5, y: 7, width: 9, height: 33, rx: 4.5, fill, transform: `rotate(${i * 30} 50 50)` },\n })),\n },\n});\n\n// A little parabola, echoing what the app actually produces.\nconst parabola = {\n type: \"svg\",\n props: {\n width: 372,\n height: 200,\n viewBox: \"0 0 200 120\",\n children: [\n { type: \"line\", props: { x1: 18, y1: 105, x2: 188, y2: 105, stroke: \"#E6E1D6\", \"stroke-width\": 2 } },\n { type: \"line\", props: { x1: 103, y1: 12, x2: 103, y2: 110, stroke: \"#E6E1D6\", \"stroke-width\": 2, \"stroke-dasharray\": \"4 5\" } },\n { type: \"path\", props: { d: \"M30,20 Q103,190 176,20\", fill: \"none\", stroke: \"#3F6FE0\", \"stroke-width\": 4.5, \"stroke-linecap\": \"round\" } },\n ],\n },\n};\n\nconst pill = (t: string) =>\n text(t, { fontSize: 22, color: \"#A04A2E\", background: \"#F7DDD2\", border: \"1px solid #EEC0AC\", borderRadius: \"999px\", padding: \"10px 20px\" });\n\nasync function renderSvg(): Promise {\n const { bold, regular } = await loadFonts();\n const tree = div(\n { width: \"1200px\", height: \"630px\", background: IVORY, padding: \"76px\", fontFamily: \"Sans\", color: INK, alignItems: \"center\", gap: \"56px\" },\n [\n div({ flexDirection: \"column\", flexGrow: 1, justifyContent: \"center\" }, [\n div({ flexDirection: \"row\", alignItems: \"center\", gap: \"18px\" }, [\n div({ width: \"84px\", height: \"84px\", background: CORAL, borderRadius: \"20px\", alignItems: \"center\", justifyContent: \"center\" }, [burst(\"#ffffff\", 50)]),\n text(\"VAL TOWN × CLAUDE\", { fontSize: 22, fontWeight: 700, color: \"#C15F3C\", letterSpacing: 3 }),\n ]),\n text(\"Claude Managed Agent\", { fontSize: 70, fontWeight: 700, letterSpacing: -1.5, marginTop: \"36px\", lineHeight: 1.0 }),\n text(\"An autonomous Claude agent you can chat with — it runs tools, writes code, and makes files, right in your browser.\", { fontSize: 29, color: MUTE, lineHeight: 1.4, marginTop: \"24px\", maxWidth: \"600px\" }),\n div({ flexDirection: \"row\", gap: \"14px\", marginTop: \"34px\" }, [pill(\"Runs tools\"), pill(\"Writes code\"), pill(\"Makes files\")]),\n text(\"claude-managed-agents-ui.val.run\", { fontSize: 25, fontWeight: 700, color: INK, marginTop: \"40px\" }),\n ]),\n div({ flexDirection: \"column\", alignItems: \"flex-end\", justifyContent: \"center\", gap: \"20px\" }, [\n text(\"generate y = 5x² + 1 and show me\", { fontSize: 24, fontWeight: 700, color: \"#ffffff\", background: CORAL, borderRadius: \"22px\", padding: \"16px 24px\" }),\n div({ flexDirection: \"column\", alignItems: \"center\", background: \"#ffffff\", border: \"1px solid #E6E1D6\", borderRadius: \"24px\", padding: \"26px\", gap: \"8px\" }, [\n text(\"y = 5x² + 1\", { fontSize: 24, fontWeight: 700, color: INK }),\n parabola,\n text(\"parabola.png\", { fontSize: 17, color: \"#A9A294\" }),\n ]),\n ]),\n ],\n );\n return await satori(tree as any, {\n width: 1200,\n height: 630,\n fonts: [\n { name: \"Sans\", data: bold, weight: 700, style: \"normal\" },\n { name: \"Sans\", data: regular, weight: 400, style: \"normal\" },\n ],\n });\n}\n\nexport async function renderOg(): Promise {\n try {\n const svg = await renderSvg();\n await ensureResvg();\n const png = new Resvg(svg).render().asPng();\n return new Response(png, { headers: { \"content-type\": \"image/png\", \"cache-control\": \"public, max-age=3600\" } });\n } catch (err) {\n const msg = err instanceof Error ? err.stack || err.message : String(err);\n return new Response(`OG render failed:\\n${msg}`, { status: 500, headers: { \"content-type\": \"text/plain\" } });\n }\n}\n","// Open Graph / Twitter card (1200×630), generated with satori (JSX→SVG) +\n// resvg-wasm (SVG→PNG), served at GET /og.png. Modeled on stevekrouse/agentfax.\nimport satori from \"npm:satori@0.10.13\";\nimport { initWasm, Resvg } from \"npm:@resvg/resvg-wasm@2.6.2\";\n\n// Static-weight TTFs (variable fonts crash satori's opentype.js).\nconst SANS_BOLD_TTF = \"https://raw.githubusercontent.com/google/fonts/main/ofl/ptsans/PT_Sans-Web-Bold.ttf\";\nconst SANS_REGULAR_TTF = \"https://raw.githubusercontent.com/google/fonts/main/ofl/ptsans/PT_Sans-Web-Regular.ttf\";\nconst RESVG_WASM_URL = \"https://unpkg.com/@resvg/resvg-wasm@2.6.2/index_bg.wasm\";\n\nconst CORAL = \"#D97757\", IVORY = \"#F1EEE6\", INK = \"#1E1B16\", MUTE = \"#5B564A\";\n\nlet fontsPromise: Promise<{ bold: ArrayBuffer; regular: ArrayBuffer }> | null = null;\nfunction loadFonts() {\n if (!fontsPromise) {\n const get = (url: string) => fetch(url).then((r) => r.arrayBuffer());\n fontsPromise = Promise.all([get(SANS_BOLD_TTF), get(SANS_REGULAR_TTF)])\n .then(([bold, regular]) => ({ bold, regular }));\n }\n return fontsPromise;\n}\n\nlet wasmPromise: Promise | null = null;\nfunction ensureResvg() {\n if (!wasmPromise) {\n wasmPromise = fetch(RESVG_WASM_URL).then((r) => r.arrayBuffer()).then((b) => initWasm(b));\n }\n return wasmPromise;\n}\n\n// deno-lint-ignore no-explicit-any\nconst div = (style: any, children: any) => ({ type: \"div\", props: { style: { display: \"flex\", ...style }, children } });\n// deno-lint-ignore no-explicit-any\nconst text = (content: string, style: any) => ({ type: \"div\", props: { style: { display: \"flex\", ...style }, children: content } });\n\n// The Claude-inspired starburst (12 rays), as native satori SVG nodes.\nconst burst = (fill: string, size: number) => ({\n type: \"svg\",\n props: {\n width: size,\n height: size,\n viewBox: \"0 0 100 100\",\n children: Array.from({ length: 12 }, (_, i) => ({\n type: \"rect\",\n props: { x: 45.5, y: 7, width: 9, height: 33, rx: 4.5, fill, transform: `rotate(${i * 30} 50 50)` },\n })),\n },\n});\n\n// A little parabola, echoing what the app actually produces.\nconst parabola = {\n type: \"svg\",\n props: {\n width: 372,\n height: 200,\n viewBox: \"0 0 200 120\",\n children: [\n { type: \"line\", props: { x1: 18, y1: 105, x2: 188, y2: 105, stroke: \"#E6E1D6\", \"stroke-width\": 2 } },\n { type: \"line\", props: { x1: 103, y1: 12, x2: 103, y2: 110, stroke: \"#E6E1D6\", \"stroke-width\": 2, \"stroke-dasharray\": \"4 5\" } },\n { type: \"path\", props: { d: \"M30,20 Q103,190 176,20\", fill: \"none\", stroke: \"#3F6FE0\", \"stroke-width\": 4.5, \"stroke-linecap\": \"round\" } },\n ],\n },\n};\n\nconst pill = (t: string) =>\n text(t, { fontSize: 22, color: \"#A04A2E\", background: \"#F7DDD2\", border: \"1px solid #EEC0AC\", borderRadius: \"999px\", padding: \"10px 20px\" });\n\nasync function renderSvg(): Promise {\n const { bold, regular } = await loadFonts();\n const tree = div(\n { width: \"1200px\", height: \"630px\", background: IVORY, padding: \"76px\", fontFamily: \"Sans\", color: INK, alignItems: \"center\", gap: \"56px\" },\n [\n div({ flexDirection: \"column\", flexGrow: 1, justifyContent: \"center\" }, [\n div({ flexDirection: \"row\", alignItems: \"center\", gap: \"18px\" }, [\n div({ width: \"84px\", height: \"84px\", background: CORAL, borderRadius: \"20px\", alignItems: \"center\", justifyContent: \"center\" }, [burst(\"#ffffff\", 50)]),\n text(\"VAL TOWN × CLAUDE\", { fontSize: 22, fontWeight: 700, color: \"#C15F3C\", letterSpacing: 3 }),\n ]),\n text(\"Townie\", { fontSize: 70, fontWeight: 700, letterSpacing: -1.5, marginTop: \"36px\", lineHeight: 1.0 }),\n text(\"A Claude agent that builds and edits your Val Town vals — chat, and it ships. Connected to your account over MCP.\", { fontSize: 29, color: MUTE, lineHeight: 1.4, marginTop: \"24px\", maxWidth: \"600px\" }),\n div({ flexDirection: \"row\", gap: \"14px\", marginTop: \"34px\" }, [pill(\"Edits your vals\"), pill(\"Runs SQLite\"), pill(\"Ships endpoints\")]),\n text(\"templates/claude-managed-agents-townie\", { fontSize: 25, fontWeight: 700, color: INK, marginTop: \"40px\" }),\n ]),\n div({ flexDirection: \"column\", alignItems: \"flex-end\", justifyContent: \"center\", gap: \"20px\" }, [\n text(\"generate y = 5x² + 1 and show me\", { fontSize: 24, fontWeight: 700, color: \"#ffffff\", background: CORAL, borderRadius: \"22px\", padding: \"16px 24px\" }),\n div({ flexDirection: \"column\", alignItems: \"center\", background: \"#ffffff\", border: \"1px solid #E6E1D6\", borderRadius: \"24px\", padding: \"26px\", gap: \"8px\" }, [\n text(\"y = 5x² + 1\", { fontSize: 24, fontWeight: 700, color: INK }),\n parabola,\n text(\"parabola.png\", { fontSize: 17, color: \"#A9A294\" }),\n ]),\n ]),\n ],\n );\n return await satori(tree as any, {\n width: 1200,\n height: 630,\n fonts: [\n { name: \"Sans\", data: bold, weight: 700, style: \"normal\" },\n { name: \"Sans\", data: regular, weight: 400, style: \"normal\" },\n ],\n });\n}\n\nexport async function renderOg(): Promise {\n try {\n const svg = await renderSvg();\n await ensureResvg();\n const png = new Resvg(svg).render().asPng();\n return new Response(png, { headers: { \"content-type\": \"image/png\", \"cache-control\": \"public, max-age=3600\" } });\n } catch (err) {\n const msg = err instanceof Error ? err.stack || err.message : String(err);\n return new Response(`OG render failed:\\n${msg}`, { status: 500, headers: { \"content-type\": \"text/plain\" } });\n }\n}\n","createdAt",["D",1780422606041],"branchVersion","branchId","b0f29eee-5eaa-11f1-b755-1607ee4eb77e","id","b0e89fe8-5eaa-11f1-b755-1607ee4eb77e","claude-managed-townie",["D",1780422263049],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Townie: a Claude Managed Agent wired to your Val Town MCP","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7bf29dd7-9190-4de2-045f-8245c9e11100/square512?exp=1789541999&sig=ac9f12f392cbb1a8d8c04c2e5341b2b8d19224687f6a3c15793c1c97d00d9a85","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019e896f-c16d-772c-815e-10a96c26ab8f","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019aa807-52c2-709c-928b-2029bae9a558","tursoName","b0e89fe85eaa11f1b7551607ee4eb77e","tursoHostname","b0e89fe85eaa11f1b7551607ee4eb77e-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789500119686],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_113":109},"org",{"_105":104,"_106":107,"_108":109,"_18":-5,"_110":111,"_112":61},"branch",{"_13":91,"_32":92,"_44":43,"_93":45,"_94":95,"_96":97,"_98":51,"_99":100,"_101":67,"_102":46,"_103":104},"isOwned",72,"main","projectId","forkedBranchId","f94618ba-5e96-11f1-a008-1607ee4eb77e","forkedBranchVersion",91,"forkedProjectPrivacy","forkedProjectId","f93e0bca-5e96-11f1-a008-1607ee4eb77e","forkedProjectOrgId","projectName","userHandle","templates","handle","displayName","Templates","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789541999&sig=156ae2b8ac752fc06f52d45eab428b512e0d31e2aab99a830d8bb32149c64f0f","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":413,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":414,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":415,"_86":416,"_88":417,"_90":25},"tree",[193,200,220,221],"files",[193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221],"counts",{"_182":65,"_183":167,"_184":65,"_185":186,"_187":188},"contents",[149,150,151,152],"upstreamProject",{"_44":100,"_32":146,"_53":147,"_55":56,"_50":51,"_84":148},"upstreamBranch",{"_44":95,"_39":138,"_139":140,"_32":92,"_93":100,"_13":141,"_94":142,"_96":143,"_144":145,"_48":-5,"_90":25,"_50":51,"_103":104,"_66":67,"_102":146},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1780413794401],"updatedAt",["D",1780430250233],121,"961078ea-f528-11ef-aa68-569c3dd06744",89,"lockfileKey","1764013157902-esm.town_v_std_reactHonoStarter@72-main","claude-managed-agents-ui","Interactive chat UI for a Claude Managed Agent",{"_105":104,"_113":109},{"_44":177,"_32":178,"_30":179,"_155":-5,"_42":43,"_41":167,"_157":61,"_39":180,"_13":65,"_34":175,"_36":-5,"_24":25,"_162":-5,"_27":181},{"_44":171,"_32":172,"_30":173,"_155":-5,"_42":43,"_41":167,"_157":61,"_39":174,"_13":65,"_34":175,"_36":-5,"_24":25,"_162":-5,"_27":176},{"_44":164,"_32":165,"_30":166,"_155":-5,"_42":43,"_41":167,"_157":25,"_39":168,"_13":65,"_34":20,"_36":169,"_24":25,"_162":-5,"_27":170},{"_44":153,"_32":154,"_30":59,"_155":-5,"_42":43,"_41":156,"_157":25,"_39":158,"_13":159,"_34":160,"_36":161,"_24":25,"_162":46,"_27":163},"e3c8762c-5eaa-11f1-8f38-1607ee4eb77e","index.ts","parentId",6,"latest",["D",1780422348403],4,"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\";\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// 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 id = c.req.param(\"id\");\n const meta = await db.getFilePayload(id);\n if (!meta) return c.notFound();\n const res = await getFileBytes(id);\n const headers: Record = { \"Content-Type\": meta.mime };\n if (!meta.mime.startsWith(\"image/\")) {\n headers[\"Content-Disposition\"] = `attachment; filename=\"${meta.name}\"`;\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","label",[154],"b0fae892-5eaa-11f1-b755-1607ee4eb77e","README.md","019e896f-c16d-772c-815e-0f7762917332",1,["D",1780422263049],"# Claude Managed Agent — Chat UI\n\nAn interactive chat UI for talking to a\n[Claude Managed Agent](https://platform.claude.com/docs/en/managed-agents/quickstart).\nEach thread is one stateful agent **session** — persistent history plus a\nsandbox with bash, file editing, and web tools. Hono (backend) + React\n(frontend), with Val Town SQLite for storage.\n\nWhere\n[`claude-managed-agents`](https://www.val.town/x/templates/claude-managed-agents)\nis a one-shot script, this is a multi-turn, multi-thread UI.\n\n## How it works\n\n- **A thread = one session.** The agent + environment are created **once**\n (lazily on first use) and their ids are cached in a `config` row — sessions\n pin to an agent version, so recreating them per request would be wrong. Each\n thread makes one session and reuses it for follow-up turns.\n- On a new user message the server inserts the user row, ensures the thread has\n a session, then **opens the event stream, sends the message, and writes each\n event to SQLite as it arrives** (`agent.message` → text, `agent.tool_use` →\n tool name, `session.error` → error), returning when the session goes idle.\n- The **frontend polls** `GET /api/threads/:id/messages?after=` about\n once a second and renders new rows in order. No SSE to the browser.\n- The built-in toolset runs in Anthropic's sandbox with\n `permission_policy: always_allow`, so tools just run — no approval prompts.\n- **Files the agent creates** (images, charts, PDFs) are surfaced after each\n turn. When the session goes idle, `backend/files.ts` lists the session's files\n via the Managed Agents Files API (`files.list({ scope_id })`), downloads any\n new ones (`files.download(id)`), stashes the bytes in `std/blob` (key\n `file_`), and writes a `messages` row for each — `type: \"image\"` for\n `image/*`, else `type: \"file\"`. The row's `content` is JSON\n `{ id, name, mime }`. The frontend renders images inline and other files as a\n `⬇ name` download link, both pointing at `GET /api/files/:id`, which streams\n the blob bytes with the right Content-Type.\n\n## Setup\n\nSet `ANTHROPIC_API_KEY` (from ).\nEverything else is created on the first message. Tweak the model or system\nprompt in `backend/agent.ts`.\n\n## Files\n\n- `index.ts` — Hono server + API routes\n- `backend/db.ts` — SQLite schema + helpers (`threads`, `messages`, `config`)\n- `backend/agent.ts` — Managed Agents: create-once config, per-thread session,\n per-turn streaming\n- `backend/files.ts` — surface sandbox files: Files API → `std/blob` →\n image/file message rows\n- `frontend/` — React chat UI (`App.tsx`, `Chat.tsx`, `api.ts`)\n\n## Backlog (not built yet)\n\n- **Stream reconnection.** The turn request stays open for the whole agent turn.\n If it dies before `session.status_idle`, reopen the stream and replay events\n for that `session_id` from the thread's `last_cursor` to resume writing to\n SQLite — session state is persisted server-side, so it's recoverable.\n- **Long turns** may exceed Val Town request limits → tied to the reconnection /\n background-execution work above.",[165],"b0fae73e-5eaa-11f1-b755-1607ee4eb77e","frontend","019e896f-c16d-772c-815e-0939cb4e2ec4",["D",1780422263049],"directory",[172],"b0fa25c4-5eaa-11f1-b755-1607ee4eb77e","backend","019e896f-c16d-772c-815d-bbd293286162",["D",1780422263049],[178],"pulls","branches","forks","envVars",{"_189":191,"_192":65},"connections",{"_189":65,"_190":65},"count","unfilledCount",2,"emptyCount",{"_44":177,"_32":178,"_30":179,"_155":-5,"_42":43,"_41":167,"_157":61,"_39":410,"_13":65,"_34":175,"_36":-5,"_24":25,"_162":-5,"_223":411,"_27":412},{"_44":402,"_32":403,"_30":404,"_155":179,"_42":43,"_41":405,"_157":25,"_39":406,"_13":167,"_34":35,"_36":407,"_24":25,"_162":-5,"_223":408,"_27":409},{"_44":395,"_32":396,"_30":397,"_155":179,"_42":43,"_41":191,"_157":61,"_39":398,"_13":167,"_34":35,"_36":399,"_24":25,"_162":-5,"_223":400,"_27":401},{"_44":387,"_32":388,"_30":389,"_155":179,"_42":43,"_41":390,"_157":25,"_39":391,"_13":191,"_34":35,"_36":392,"_24":25,"_162":-5,"_223":393,"_27":394},{"_44":380,"_32":381,"_30":382,"_155":179,"_42":43,"_41":167,"_157":25,"_39":383,"_13":65,"_34":35,"_36":384,"_24":25,"_162":-5,"_223":385,"_27":386},{"_44":376,"_32":33,"_30":31,"_155":179,"_42":43,"_41":14,"_157":25,"_39":377,"_13":167,"_34":35,"_36":38,"_24":25,"_162":-5,"_223":378,"_27":379},{"_44":368,"_32":369,"_30":370,"_155":179,"_42":43,"_41":371,"_157":25,"_39":372,"_13":65,"_34":35,"_36":373,"_24":25,"_162":-5,"_223":374,"_27":375},{"_44":171,"_32":172,"_30":173,"_155":-5,"_42":43,"_41":167,"_157":61,"_39":365,"_13":65,"_34":175,"_36":-5,"_24":25,"_162":-5,"_223":366,"_27":367},{"_44":361,"_32":260,"_30":254,"_155":173,"_42":43,"_41":167,"_157":61,"_39":362,"_13":65,"_34":175,"_36":-5,"_24":25,"_162":-5,"_223":363,"_27":364},{"_44":357,"_32":321,"_30":316,"_155":254,"_42":43,"_41":167,"_157":61,"_39":358,"_13":65,"_34":175,"_36":-5,"_24":25,"_162":-5,"_223":359,"_27":360},{"_44":350,"_32":351,"_30":352,"_155":316,"_42":43,"_41":167,"_157":61,"_39":353,"_13":65,"_34":35,"_36":354,"_24":25,"_162":-5,"_223":355,"_27":356},{"_44":343,"_32":344,"_30":345,"_155":316,"_42":43,"_41":167,"_157":61,"_39":346,"_13":65,"_34":35,"_36":347,"_24":25,"_162":-5,"_223":348,"_27":349},{"_44":336,"_32":337,"_30":338,"_155":316,"_42":43,"_41":167,"_157":61,"_39":339,"_13":65,"_34":35,"_36":340,"_24":25,"_162":-5,"_223":341,"_27":342},{"_44":329,"_32":330,"_30":331,"_155":316,"_42":43,"_41":167,"_157":25,"_39":332,"_13":65,"_34":35,"_36":333,"_24":25,"_162":-5,"_223":334,"_27":335},{"_44":322,"_32":323,"_30":324,"_155":316,"_42":43,"_41":167,"_157":61,"_39":325,"_13":65,"_34":35,"_36":326,"_24":25,"_162":-5,"_223":327,"_27":328},{"_44":313,"_32":314,"_30":315,"_155":316,"_42":43,"_41":167,"_157":61,"_39":317,"_13":65,"_34":35,"_36":318,"_24":25,"_162":-5,"_223":319,"_27":320},{"_44":306,"_32":307,"_30":308,"_155":254,"_42":43,"_41":167,"_157":25,"_39":309,"_13":65,"_34":35,"_36":310,"_24":25,"_162":-5,"_223":311,"_27":312},{"_44":299,"_32":300,"_30":301,"_155":254,"_42":43,"_41":167,"_157":61,"_39":302,"_13":65,"_34":35,"_36":303,"_24":25,"_162":-5,"_223":304,"_27":305},{"_44":291,"_32":292,"_30":293,"_155":254,"_42":43,"_41":294,"_157":25,"_39":295,"_13":167,"_34":35,"_36":296,"_24":25,"_162":-5,"_223":297,"_27":298},{"_44":283,"_32":284,"_30":285,"_155":254,"_42":43,"_41":286,"_157":61,"_39":287,"_13":167,"_34":35,"_36":288,"_24":25,"_162":-5,"_223":289,"_27":290},{"_44":276,"_32":277,"_30":278,"_155":254,"_42":43,"_41":167,"_157":61,"_39":279,"_13":65,"_34":35,"_36":280,"_24":25,"_162":-5,"_223":281,"_27":282},{"_44":268,"_32":269,"_30":270,"_155":254,"_42":43,"_41":271,"_157":25,"_39":272,"_13":167,"_34":35,"_36":273,"_24":25,"_162":-5,"_223":274,"_27":275},{"_44":261,"_32":262,"_30":263,"_155":254,"_42":43,"_41":167,"_157":61,"_39":264,"_13":65,"_34":35,"_36":265,"_24":25,"_162":-5,"_223":266,"_27":267},{"_44":251,"_32":252,"_30":253,"_155":254,"_42":43,"_41":255,"_157":25,"_39":256,"_13":167,"_34":35,"_36":257,"_24":25,"_162":-5,"_223":258,"_27":259},{"_44":244,"_32":245,"_30":246,"_155":173,"_42":43,"_41":167,"_157":61,"_39":247,"_13":65,"_34":20,"_36":248,"_24":25,"_162":-5,"_223":249,"_27":250},{"_44":236,"_32":237,"_30":238,"_155":173,"_42":43,"_41":239,"_157":61,"_39":240,"_13":167,"_34":20,"_36":241,"_24":25,"_162":-5,"_223":242,"_27":243},{"_44":229,"_32":230,"_30":231,"_155":173,"_42":43,"_41":167,"_157":61,"_39":232,"_13":65,"_34":35,"_36":233,"_24":25,"_162":-5,"_223":234,"_27":235},{"_44":164,"_32":165,"_30":166,"_155":-5,"_42":43,"_41":167,"_157":25,"_39":226,"_13":65,"_34":20,"_36":169,"_24":25,"_162":-5,"_223":227,"_27":228},{"_44":153,"_32":154,"_30":59,"_155":-5,"_42":43,"_41":156,"_157":25,"_39":222,"_13":159,"_34":160,"_36":161,"_24":25,"_162":46,"_223":224,"_27":225},["D",1780422348403],"children",[],[154],["D",1780422263049],[],[165],"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();",[],[172,230],"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",[],[172,237],"b0fad000-5eaa-11f1-b755-1607ee4eb77e","favicon.svg","019e896f-c16d-772c-815d-fe02605d2506",["D",1780422263049],"\n",[],[172,245],"73b10c36-5eab-11f1-b71a-1607ee4eb77e","api.ts","019e896f-c16d-772c-815d-f55e5a483bea","019e896f-c16d-772c-815d-f9c3e368ecf9",11,["D",1780422589838],"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 // 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-agents-townie\";\n",[],[172,260,252],"components","b0fab4a8-5eaa-11f1-b755-1607ee4eb77e","UsageMeter.tsx","019e896f-c16d-772c-815d-f0b128a622b8",["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",[],[172,260,262],"7709355c-5eab-11f1-a95d-1607ee4eb77e","Sidebar.tsx","019e896f-c16d-772c-815d-ec8f2628ac42",14,["D",1780422595456],"/** @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\nexport function Sidebar(\n { me, threads, currentId, onOpen, onNewChat, onLogout }: {\n me: Me;\n threads: Thread[];\n currentId: string | null;\n onOpen: (id: string) => void;\n onNewChat: () => void;\n onLogout: () => void;\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",[],[172,260,269],"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",[],[172,260,277],"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",[],[172,260,284],"77e8e1ca-5eab-11f1-94b6-1607ee4eb77e","Composer.tsx","019e896f-c16d-772c-815d-e13141d53a2c",15,["D",1780422596907],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\n// Sticky message composer. Disabled (with a reason) when busy or limit-reached.\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\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",[],[172,260,292],"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",[],[172,260,300],"b0fa6674-5eaa-11f1-b755-1607ee4eb77e","App.tsx","019e896f-c16d-772c-815d-da6f0f7d2cc2",["D",1780422263049],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, 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\";\n\ntype Auth = \"loading\" | \"out\" | Me;\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 const cursorRef = 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 }\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 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 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

\n {currentId\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",[],[172,260,307],"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",[],[172,260,321,314],"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",[],[172,260,321,323],"b0fa3d8e-5eaa-11f1-b755-1607ee4eb77e","TextMessage.tsx","019e896f-c16d-772c-815d-c97d15341bec",["D",1780422263049],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://esm.sh/marked@14.1.3\";\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 html = (marked.parse(m.content) as string).replace(\n /]*>/gi,\n (tag) => (/\\bsrc\\s*=\\s*[\"']https?:\\/\\//i.test(tag) ? tag : \"\"),\n );\n return (\n

\n \n

\n );\n}\n",[],[172,260,321,330],"b0fa32bc-5eaa-11f1-b755-1607ee4eb77e","MessageList.tsx","019e896f-c16d-772c-815d-c4774ee80619",["D",1780422263049],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../api.ts\";\nimport { TextMessage } from \"./TextMessage.tsx\";\nimport { ToolGroup } from \"./ToolGroup.tsx\";\nimport { ImageMessage } from \"./ImageMessage.tsx\";\nimport { FileMessage } from \"./FileMessage.tsx\";\n\n// Non-tool rows render per the locked contract. Tool rows go through ToolGroup.\nfunction Row({ m }: { m: Message }) {\n switch (m.type) {\n case \"image\":\n return ;\n case \"file\":\n return ;\n case \"error\":\n return (\n

\n {m.content}\n

\n );\n default:\n return ;\n }\n}\n\n// Collapse maximal runs of consecutive tool_use/tool_result rows into one\n// ToolGroup so a long agent run doesn't dominate the transcript.\nfunction toRows(messages: Message[]) {\n const out: Array<{ tools: Message[] } | { m: Message }> = [];\n let run: Message[] = [];\n const flush = () => {\n if (run.length) out.push({ tools: run });\n run = [];\n };\n for (const m of messages) {\n if (m.type === \"tool_use\" || m.type === \"tool_result\") {\n run.push(m);\n } else {\n flush();\n out.push({ m });\n }\n }\n flush();\n return out;\n}\n\nexport function MessageList({ messages }: { messages: Message[] }) {\n const endRef = useRef(null);\n useEffect(() => {\n endRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n return (\n

\n {toRows(messages).map((r) =>\n \"tools\" in r\n ? \n : \n )}\n

\n );\n}\n",[],[172,260,321,337],"b0fa2d1c-5eaa-11f1-b755-1607ee4eb77e","ImageMessage.tsx","019e896f-c16d-772c-815d-c0c72b44adf9",["D",1780422263049],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { FilePayload, Message } from \"../api.ts\";\n\n// An image the agent produced in its sandbox, rendered inline.\nexport function ImageMessage({ m }: { m: Message }) {\n let f: FilePayload;\n try {\n f = JSON.parse(m.content) as FilePayload;\n } catch {\n return

[unreadable image]

;\n }\n const url = `/api/files/${f.id}`;\n return (\n

\n \n {f.name}

\n \n

{f.name}

\n );\n}\n",[],[172,260,321,344],"b0fa2740-5eaa-11f1-b755-1607ee4eb77e","FileMessage.tsx","019e896f-c16d-772c-815d-bc1b702c96c9",["D",1780422263049],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { FilePayload, Message } from \"../api.ts\";\n\n// A non-image file the agent produced — rendered as a download link.\nexport function FileMessage({ m }: { m: Message }) {\n let f: FilePayload;\n try {\n f = JSON.parse(m.content) as FilePayload;\n } catch {\n return

[unreadable file]

;\n }\n const url = `/api/files/${f.id}`;\n return (\n

\n \n ⬇\n {f.name}\n \n

\n );\n}\n",[],[172,260,321,351],"b0fa63ea-5eaa-11f1-b755-1607ee4eb77e",["D",1780422263049],[203,204,205,206,207,208],[172,260,321],"b0facea2-5eaa-11f1-b755-1607ee4eb77e",["D",1780422263049],[202,209,210,211,212,213,214,215,216],[172,260],["D",1780422263049],[201,217,218,219],[172],"0679c3e2-5eab-11f1-a8f6-1607ee4eb77e","vault.ts","0679c4f0-5eab-11f1-a8f6-1607ee4eb77e",7,["D",1780422406595],"import Anthropic from \"npm:@anthropic-ai/sdk@0.100.1\";\nimport { getUserVault, setUserVault } from \"./db.ts\";\nimport type { User } from \"./auth.ts\";\n\n// How Townie's Managed Agent reaches the user's Val Town account. The agent\n// declares this MCP server (see agent.ts); the per-user vault credential below\n// injects the user's bearer token onto every outbound MCP call so the tools\n// (list_files, read_file, create_val, sqlite_execute, …) act AS that user.\nexport const VAL_TOWN_MCP_URL = \"https://api.val.town/v3/mcp\";\nexport const VAL_TOWN_MCP_NAME = \"val_town\";\n\nconst client = new Anthropic();\n\n// Ensure the current user has an Anthropic vault holding a current static-bearer\n// credential (their Val Town access token) for the Val Town MCP, and return its\n// id. Called every turn: it creates the vault + credential on first use, then\n// rotates the stored token to the latest one so it never goes stale (std/oauth\n// keeps the cookie's token fresh). The vault must exist before the session that\n// references it is created — see index.ts.\nexport async function ensureUserVault(user: User): Promise {\n const rec = await getUserVault(user.id);\n\n // First time for this user: create the vault and the bearer credential.\n if (!rec) {\n const vault = await client.beta.vaults.create({\n display_name: `valtown:${user.username}`,\n metadata: { val_town_user_id: user.id, val_town_username: user.username },\n });\n const cred = await client.beta.vaults.credentials.create(vault.id, {\n display_name: \"Val Town MCP token\",\n auth: {\n type: \"static_bearer\",\n mcp_server_url: VAL_TOWN_MCP_URL,\n token: user.accessToken,\n },\n } as any);\n await setUserVault(user.id, vault.id, cred.id);\n return vault.id;\n }\n\n // Returning user: rotate the bearer token to the current one (mcp_server_url\n // is immutable; only the secret is mutable). Best-effort — a not-yet-rotated\n // token still works until it expires, and the session retries MCP auth on the\n // next idle→running transition.\n try {\n await client.beta.vaults.credentials.update(rec.credential_id, {\n vault_id: rec.vault_id,\n auth: { type: \"static_bearer\", token: user.accessToken },\n } as any);\n } catch (_e) {\n // Keep going with the existing credential.\n }\n return rec.vault_id;\n}\n",[],[178,369],"7d58918c-5eab-11f1-9bbe-1607ee4eb77e",["D",1780422606041],[],[178,33],"b0f9f13a-5eaa-11f1-b755-1607ee4eb77e","files.ts","019e896f-c16d-772c-815d-b35b64c3a436",["D",1780422263049],"import Anthropic from \"npm:@anthropic-ai/sdk@0.100.1\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { addMessage, getMessages } from \"./db.ts\";\n\n// Files the agent writes to /mnt/session/outputs/ are auto-captured by the\n// Managed Agents Files API, scoped to the session: `files.list({ scope_id })`\n// enumerates them ({ id, filename, mime_type, downloadable }) and\n// `files.download(id)` returns the bytes. (Files written elsewhere — e.g. /tmp —\n// are NOT surfaced; the agent is told to use /mnt/session/outputs/ in its system\n// prompt.) Val Town has no filesystem, so we copy each new file into std/blob.\nconst client = new Anthropic();\nconst BETA = \"managed-agents-2026-04-01\";\n\n// Content payload stored on image/file message rows. The frontend reads `id` to\n// build the /api/files/:id URL, plus `name`/`mime` for display + downloads.\nexport interface FilePayload {\n id: string;\n name: string;\n mime: string;\n}\n\nconst blobKey = (id: string) => `file_${id}`;\nconst sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));\n\n// Read the bytes we stashed in blob storage for a served file.\nexport const getFileBytes = (id: string) => blob.get(blobKey(id));\n\n// Ids already surfaced as image/file rows for this thread, so re-syncs (or a\n// follow-up turn in the same session) never duplicate a row.\nasync function surfacedIds(threadId: string): Promise> {\n const rows = await getMessages(threadId, 0);\n return new Set(\n rows\n .filter((m: any) => m.type === \"image\" || m.type === \"file\")\n .map((m: any) => {\n try {\n return (JSON.parse(m.content) as FilePayload).id;\n } catch {\n return \"\";\n }\n })\n .filter(Boolean),\n );\n}\n\n// After a turn, mirror any NEW session files into blob storage and write an\n// image/file row for each. There's a brief indexing lag (~1-5s) between idle and\n// outputs appearing, so poll a few times. Best-effort: never throws (runTurn\n// keeps the try/catch too) — a failed file sync must not drop the turn.\nexport async function syncSessionFiles(threadId: string, sessionId: string) {\n const seen = await surfacedIds(threadId);\n\n let fresh: any[] = [];\n for (let i = 0; i < 4; i++) {\n const res = await client.beta.files.list(\n { scope_id: sessionId, betas: [BETA] } as any,\n );\n fresh = (res.data as any[]).filter((f) =>\n f.downloadable !== false && !seen.has(f.id)\n );\n if (fresh.length) break;\n if (i < 3) await sleep(1500);\n }\n\n for (const f of fresh) {\n try {\n const dl = await client.beta.files.download(f.id, { betas: [BETA] } as any);\n const bytes = new Uint8Array(await (dl as any).arrayBuffer());\n if (!bytes.length) continue; // skip empties; a later sync can retry\n await blob.set(blobKey(f.id), bytes);\n const mime: string = f.mime_type ?? \"application/octet-stream\";\n const payload: FilePayload = { id: f.id, name: f.filename ?? f.id, mime };\n const type = mime.startsWith(\"image/\") ? \"image\" : \"file\";\n await addMessage(threadId, \"assistant\", type, JSON.stringify(payload));\n seen.add(f.id);\n } catch {\n // one bad file shouldn't block the rest, or the turn\n }\n }\n}\n",[],[178,381],"0d693fde-5eab-11f1-ac75-1607ee4eb77e","db.ts","019e896f-c16d-772c-815d-ad2035932239",9,["D",1780422418245],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// A thread = one Managed Agent session. Messages stream into SQLite; the\n// frontend polls for new rows. `config` caches the create-once agent + env ids.\nawait sqlite.batch([\n `CREATE TABLE IF NOT EXISTS config (key TEXT PRIMARY KEY, value TEXT)`,\n `CREATE TABLE IF NOT EXISTS threads (\n id TEXT PRIMARY KEY, session_id TEXT, title TEXT,\n last_cursor TEXT, created_at TEXT DEFAULT CURRENT_TIMESTAMP)`,\n `CREATE TABLE IF NOT EXISTS messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT, thread_id TEXT,\n role TEXT, type TEXT, content TEXT, created_at TEXT DEFAULT CURRENT_TIMESTAMP)`,\n]);\n\n// Per-user ownership of threads. Idempotent: ignore \"duplicate column\" on re-run.\ntry {\n await sqlite.execute(`ALTER TABLE threads ADD COLUMN user_id TEXT`);\n} catch (_e) { /* column already exists */ }\n\n// One Anthropic vault per Val Town user, holding their Val Town MCP bearer\n// credential. Townie binds it to that user's sessions so the agent's MCP tools\n// act as them. We cache the ids here and refresh the token each turn.\nawait sqlite.execute(\n `CREATE TABLE IF NOT EXISTS user_vaults (\n user_id TEXT PRIMARY KEY, vault_id TEXT, credential_id TEXT,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP)`,\n);\n\nconst one = async (sql: string, args: unknown[] = []) =>\n (await sqlite.execute({ sql, args })).rows[0];\nconst all = async (sql: string, args: unknown[] = []) =>\n (await sqlite.execute({ sql, args })).rows;\n\nexport const getConfig = async (key: string) =>\n (await one(`SELECT value FROM config WHERE key = ?`, [key]))?.value as string | undefined;\nexport const setConfig = (key: string, value: string) =>\n sqlite.execute({ sql: `INSERT OR REPLACE INTO config VALUES (?, ?)`, args: [key, value] });\n\n// Per-user vault ids (Anthropic vault + the Val Town MCP bearer credential).\nexport const getUserVault = async (userId: string) =>\n (await one(`SELECT vault_id, credential_id FROM user_vaults WHERE user_id = ?`, [userId])) as\n | { vault_id: string; credential_id: string }\n | undefined;\nexport const setUserVault = (userId: string, vaultId: string, credentialId: string) =>\n sqlite.execute({\n sql: `INSERT OR REPLACE INTO user_vaults (user_id, vault_id, credential_id) VALUES (?, ?, ?)`,\n args: [userId, vaultId, credentialId],\n });\n\nexport const listThreads = () => all(`SELECT * FROM threads ORDER BY created_at DESC`);\nexport const listThreadsForUser = (userId: string) =>\n all(`SELECT * FROM threads WHERE user_id = ? ORDER BY created_at DESC`, [userId]);\nexport const getThread = (id: string) => one(`SELECT * FROM threads WHERE id = ?`, [id]);\nexport const createThread = (id: string, title: string, userId: string) =>\n sqlite.execute({\n sql: `INSERT INTO threads (id, title, user_id) VALUES (?, ?, ?)`,\n args: [id, title, userId],\n });\n\n// Count this user's user-role messages across all their threads (the rate-limit basis).\nexport const countUserMessages = async (userId: string) =>\n Number(\n (await one(\n `SELECT COUNT(*) AS n FROM messages m\n JOIN threads t ON m.thread_id = t.id\n WHERE t.user_id = ? AND m.role = 'user'`,\n [userId],\n ))?.n ?? 0,\n );\nexport const setTitle = (id: string, title: string) =>\n sqlite.execute({ sql: `UPDATE threads SET title = ? WHERE id = ?`, args: [title, id] });\nexport const setSession = (id: string, sessionId: string) =>\n sqlite.execute({ sql: `UPDATE threads SET session_id = ? WHERE id = ?`, args: [sessionId, id] });\nexport const setCursor = (id: string, cursor: string) =>\n sqlite.execute({ sql: `UPDATE threads SET last_cursor = ? WHERE id = ?`, args: [cursor, id] });\n\nexport const addMessage = (threadId: string, role: string, type: string, content: string) =>\n sqlite.execute({\n sql: `INSERT INTO messages (thread_id, role, type, content) VALUES (?, ?, ?, ?)`,\n args: [threadId, role, type, content],\n });\nexport const getMessages = (threadId: string, after: number) =>\n all(`SELECT * FROM messages WHERE thread_id = ? AND id > ? ORDER BY id`, [threadId, after]);\n\n// Look up the { id, name, mime } payload for a surfaced file row by its file id,\n// so the /api/files/:id route can serve the right Content-Type + filename.\nexport const getFilePayload = async (fileId: string) => {\n const row = await one(\n `SELECT content FROM messages WHERE type IN ('image', 'file')\n AND content LIKE ? ORDER BY id DESC LIMIT 1`,\n [`%${fileId}%`],\n );\n return row ? JSON.parse(row.content as string) as { id: string; name: string; mime: string } : null;\n};\n",[],[178,388],"d265970c-5eaa-11f1-a6b3-1607ee4eb77e","auth.ts","019e896f-c16d-772c-815d-aa1566826d25",["D",1780422319238],"import { getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport type { Context } from \"npm:hono\";\nimport * as db from \"./db.ts\";\n\n// Per-user cap on user-role messages, counted globally across all the user's threads.\nexport const MESSAGE_LIMIT = 100;\n\nexport type User = {\n id: string;\n username: string;\n // The user's Val Town OAuth access token. Townie hands this to an Anthropic\n // vault (as a static bearer) so the Managed Agent's Val Town MCP tools act AS\n // this user. std/oauth keeps it fresh on the session cookie, so we re-read it\n // every turn — never persist it ourselves.\n accessToken: string;\n};\n\n// Resolve the current Val Town user (id, username, access token) from the\n// request's OAuth session, or null if unauthenticated. We key threads/usage on\n// a stable id (username) and use the access token for per-user MCP auth.\nexport async function requireUser(c: Context): Promise {\n const session = await getOAuthUserData(c.req.raw);\n const u = session?.user;\n if (!u || !session?.accessToken) return null;\n const username = u.username as string;\n return { id: String(u.id ?? username), username, accessToken: session.accessToken };\n}\n\n// How many user-role messages this user has sent (across all their threads).\nexport const countUsage = (userId: string) => db.countUserMessages(userId);\n",[],[178,396],"4ad2da6a-5eab-11f1-a48d-1607ee4eb77e","agent.ts","019e896f-c16d-772c-815d-a5bfb0c3f7e2",10,["D",1780422521269],"import Anthropic from \"npm:@anthropic-ai/sdk@0.100.1\";\nimport {\n addMessage,\n getConfig,\n setConfig,\n setCursor,\n setSession,\n} from \"./db.ts\";\nimport { syncSessionFiles } from \"./files.ts\";\nimport { VAL_TOWN_MCP_NAME, VAL_TOWN_MCP_URL } from \"./vault.ts\";\n\nconst client = new Anthropic();\nconst MODEL = \"claude-sonnet-4-6\"; // cheap + fast for a demo; swap to claude-opus-4-8 for the strongest Townie\n\n// Layered on top of Val Town's official \"Townie\" system prompt (fetched below).\n// It explains the one thing the base prompt can't know: that this Townie runs as\n// a Claude Managed Agent whose connection to the user's Val Town account is the\n// `val_town` MCP server — and that the sandbox filesystem is NOT where their\n// vals live.\nconst ADDENDUM = `\n\n---\n\n# This deployment: Townie as a Claude Managed Agent\n\nYou are **Townie**, an AI that builds and edits the user's Val Town vals (and runs SQLite, blob storage, crons, HTTP endpoints, etc.) on their behalf.\n\n**Your connection to their account is the \\`${VAL_TOWN_MCP_NAME}\\` MCP server.** It is already authenticated AS the logged-in user — every call runs with their permissions. Use these MCP tools for ALL work on their account:\n- Read: \\`list_vals\\`, \\`list_files\\`, \\`read_file\\`, \\`get_val_detail\\`, \\`list_orgs\\`, \\`get_logs\\`, \\`get_traces\\`\n- Write: \\`create_val\\`, \\`create_file\\`, \\`update_file\\`, \\`replace_in_file\\`, \\`delete_file\\`\n- Run / verify: \\`run_file\\`, \\`fetch_val_endpoint\\`\n- Data: \\`sqlite_execute\\`, \\`sqlite_batch\\`, the blob tools, the env-var tools\n\nAlways pass the val identifier as \\`handle/name\\`. You don't know the user's handle up front — call \\`list_orgs\\` (it returns their handle) or \\`list_vals\\` to discover it, then use it. When the user says \"my val foo\" or just \"foo\" with no owner, it's theirs.\n\n**The Linux sandbox you also have (bash, read/write/edit/glob/grep, web_fetch, web_search) is scratch space ONLY.** The user's real code lives in Val Town and is reached *exclusively* through the \\`${VAL_TOWN_MCP_NAME}\\` MCP tools. To change one of their vals, call \\`update_file\\` / \\`create_file\\` / \\`replace_in_file\\` (MCP) — never the sandbox text editor. Use bash and web tools for auxiliary work only: quick computation, fetching library docs, scratch files.\n\nAfter editing an HTTP val, verify it with \\`fetch_val_endpoint\\`; after editing a script, verify with \\`run_file\\`. Keep the user in the loop with a short summary of what you changed and the live URL.\n\nIf you produce a file the user should see or download (an image, chart, dataset, export), save it under \\`/mnt/session/outputs/\\` — only files written there are surfaced back to them. Don't paste local sandbox paths into your reply.`;\n\n// Val Town's battle-tested Townie prompt, fetched once when the agent is created\n// (agents are versioned + cached, so this runs a single time per deploy). On a\n// transient failure we still create the agent — just with the addendum alone.\nasync function buildSystemPrompt(): Promise {\n let townie = \"\";\n try {\n townie = await (await fetch(\"https://www.val.town/townie/system-prompt\")).text();\n } catch (e) {\n console.error(\"⚠️ failed to fetch Townie system prompt:\", e);\n }\n return `${townie}${ADDENDUM}`;\n}\n\n// Flatten an agent.tool_result's content blocks into a single string (the UI\n// shows this verbatim). Text blocks join with newlines; anything else is JSON.\nfunction toolResultOutput(content: unknown): string {\n if (typeof content === \"string\") return content;\n if (Array.isArray(content)) {\n return content\n .map((b: any) =>\n b?.type === \"text\" && typeof b.text === \"string\" ? b.text : JSON.stringify(b)\n )\n .join(\"\\n\");\n }\n return content == null ? \"\" : JSON.stringify(content);\n}\n\n// Create the agent + environment ONCE and cache their ids. Agents are versioned\n// configs and sessions pin to a version, so recreating them per request is wrong.\n// To change Townie's prompt or tools later, clear the `agent_id` config row so a\n// fresh agent is built on the next turn.\nexport async function ensureConfig() {\n const agentId = await getConfig(\"agent_id\");\n const envId = await getConfig(\"environment_id\");\n if (agentId && envId) return { agentId, envId };\n\n const agent = await client.beta.agents.create({\n name: \"Townie\",\n model: MODEL,\n system: await buildSystemPrompt(),\n // The Val Town MCP — declared by URL only; per-user auth is supplied at\n // session time via the vault (see vault.ts + index.ts).\n mcp_servers: [\n { type: \"url\", name: VAL_TOWN_MCP_NAME, url: VAL_TOWN_MCP_URL },\n ],\n // Two tool sources, both auto-run (no approval prompts): the sandbox toolset\n // for scratch work, and the Val Town MCP for reading/editing the user's vals.\n // mcp_toolset defaults to always_ask, so we override it to always_allow.\n tools: [\n {\n type: \"agent_toolset_20260401\",\n default_config: { permission_policy: { type: \"always_allow\" } },\n },\n {\n type: \"mcp_toolset\",\n mcp_server_name: VAL_TOWN_MCP_NAME,\n default_config: { permission_policy: { type: \"always_allow\" } },\n },\n ] as any,\n });\n const environment = await client.beta.environments.create({\n name: \"townie-env\",\n config: { type: \"cloud\", networking: { type: \"unrestricted\" } },\n });\n await setConfig(\"agent_id\", agent.id);\n await setConfig(\"environment_id\", environment.id);\n return { agentId: agent.id, envId: environment.id };\n}\n\n// Each thread gets one session, created lazily and reused for follow-up turns.\n// The session is bound to the thread owner's vault so Townie's MCP tools act as\n// that user (vault_ids can only be set at session-create time).\nexport async function ensureSession(thread: any, vaultId: string) {\n if (thread.session_id) return thread.session_id as string;\n const { agentId, envId } = await ensureConfig();\n const session = await client.beta.sessions.create({\n agent: agentId,\n environment_id: envId,\n title: thread.title,\n vault_ids: [vaultId],\n });\n await setSession(thread.id, session.id);\n return session.id;\n}\n\n// One turn: open the stream, send the message, then persist each event to SQLite\n// until the session goes idle. The frontend polls those rows as they land.\nexport async function runTurn(\n threadId: string,\n sessionId: string,\n text: string,\n) {\n const stream = await client.beta.sessions.events.stream(sessionId);\n await client.beta.sessions.events.send(sessionId, {\n events: [{ type: \"user.message\", content: [{ type: \"text\", text }] }],\n });\n for await (const event of stream) {\n const e = event as any;\n if (e.id) await setCursor(threadId, e.id);\n if (event.type === \"agent.message\") {\n for (const block of e.content) {\n if (block.type === \"text\") {\n await addMessage(threadId, \"assistant\", \"text\", block.text);\n }\n }\n } else if (event.type === \"agent.tool_use\") {\n await addMessage(\n threadId,\n \"assistant\",\n \"tool_use\",\n JSON.stringify({ name: e.name, input: e.input }),\n );\n } else if (event.type === \"agent.mcp_tool_use\") {\n // Val Town MCP calls (read_file, update_file, create_val, …). Same row\n // shape as built-in tool_use so the UI renders them identically.\n await addMessage(\n threadId,\n \"assistant\",\n \"tool_use\",\n JSON.stringify({ name: e.name, input: e.input }),\n );\n } else if (\n event.type === \"agent.tool_result\" || event.type === \"agent.mcp_tool_result\"\n ) {\n // e.content is an array of blocks ([{type:\"text\",text},...]); e.is_error\n // flags a failed call. Store {output:string, is_error} per the row contract.\n await addMessage(\n threadId,\n \"assistant\",\n \"tool_result\",\n JSON.stringify({\n output: toolResultOutput(e.content),\n is_error: !!e.is_error,\n }),\n );\n } else if (event.type === \"session.error\") {\n await addMessage(\n threadId,\n \"system\",\n \"error\",\n e.error?.message ?? \"session error\",\n );\n break;\n } else if (event.type === \"session.status_idle\") {\n break;\n }\n }\n // Surface any files the agent created in its sandbox this turn (images render\n // inline; other downloadables become links). Best-effort: never fail the turn.\n try {\n await syncSessionFiles(threadId, sessionId);\n } catch (_e) { /* ignore */ }\n}\n",[],[178,403],["D",1780422263049],[194,195,196,197,198,199],[178],["D",1780422263049],["D",1789500119686],{"_105":104,"_113":109},{"_105":104,"_106":107,"_108":109,"_18":-5,"_110":111,"_112":61},{"_13":91,"_32":92,"_44":43,"_93":45,"_94":95,"_96":97,"_98":51,"_99":100,"_101":67,"_102":46,"_103":104},"ctx",{"_84":-5,"_135":451,"_452":453,"_454":455,"_456":25,"_457":25,"_458":25,"_459":61,"_460":-5,"_461":-7,"_462":-7,"_463":65,"_464":25,"_465":25,"_466":-5,"_467":25,"_468":25,"_469":25,"_470":-5},"ENV",{"_422":423,"_424":425,"_426":92,"_427":428,"_429":430,"_431":432,"_433":434,"_435":436,"_437":438,"_439":440,"_441":442,"_443":444,"_445":446,"_447":448,"_449":450},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v16