[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_462":463,"_464":465},"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",59,"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","frontend/components/Sidebar.tsx","latestPath","fileId","019e896f-c16d-772c-815d-ec8f2628ac42","name","Sidebar.tsx","fileType","script","content","/** @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","/** @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 {/* 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","createdAt",["D",1780425654755],"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=1789545599&sig=2d357693b795aa4986711765cf84075b642058673508a1bdbcd4bae13ad3f63f","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=1789545599&sig=2316df07e67031dd48e537f6ce0c4c14b92716fed790ec83ecf27974cc65aa31","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":457,"_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":458,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":459,"_86":460,"_88":461,"_90":25},"tree",[194,203,225,226],"files",[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,222,223,224,225,226],"counts",{"_183":65,"_184":169,"_185":65,"_186":187,"_188":189},"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":178,"_32":179,"_30":180,"_155":-5,"_42":43,"_41":169,"_157":61,"_39":181,"_13":65,"_34":176,"_36":-5,"_24":25,"_162":-5,"_27":182},{"_44":172,"_32":173,"_30":174,"_155":-5,"_42":43,"_41":169,"_157":61,"_39":175,"_13":65,"_34":176,"_36":-5,"_24":25,"_162":-5,"_27":177},{"_44":164,"_32":165,"_30":166,"_155":-5,"_42":43,"_41":167,"_157":61,"_39":168,"_13":169,"_34":20,"_36":170,"_24":25,"_162":-5,"_27":171},{"_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},"da0994d6-5eaf-11f1-824a-1607ee4eb77e","index.ts","parentId",45,"latest",["D",1780424479536],6,"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 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],"8f738606-5eab-11f1-a8a0-1607ee4eb77e","README.md","019e896f-c16d-772c-815e-0f7762917332",17,["D",1780422636411],1,"# 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",[165],"b0fae73e-5eaa-11f1-b755-1607ee4eb77e","frontend","019e896f-c16d-772c-815e-0939cb4e2ec4",["D",1780422263049],"directory",[173],"b0fa25c4-5eaa-11f1-b755-1607ee4eb77e","backend","019e896f-c16d-772c-815d-bbd293286162",["D",1780422263049],[179],"pulls","branches","forks","envVars",{"_190":192,"_193":65},"connections",{"_190":65,"_191":65},"count","unfilledCount",2,"emptyCount",{"_44":178,"_32":179,"_30":180,"_155":-5,"_42":43,"_41":169,"_157":61,"_39":454,"_13":65,"_34":176,"_36":-5,"_24":25,"_162":-5,"_228":455,"_27":456},{"_44":445,"_32":446,"_30":447,"_155":180,"_42":43,"_41":448,"_157":25,"_39":449,"_13":450,"_34":35,"_36":451,"_24":25,"_162":-5,"_228":452,"_27":453},{"_44":437,"_32":438,"_30":439,"_155":180,"_42":43,"_41":440,"_157":61,"_39":441,"_13":169,"_34":35,"_36":442,"_24":25,"_162":-5,"_228":443,"_27":444},{"_44":430,"_32":431,"_30":432,"_155":180,"_42":43,"_41":192,"_157":61,"_39":433,"_13":169,"_34":35,"_36":434,"_24":25,"_162":-5,"_228":435,"_27":436},{"_44":422,"_32":423,"_30":424,"_155":180,"_42":43,"_41":425,"_157":25,"_39":426,"_13":192,"_34":35,"_36":427,"_24":25,"_162":-5,"_228":428,"_27":429},{"_44":413,"_32":414,"_30":415,"_155":180,"_42":43,"_41":416,"_157":61,"_39":417,"_13":418,"_34":35,"_36":419,"_24":25,"_162":-5,"_228":420,"_27":421},{"_44":405,"_32":406,"_30":407,"_155":180,"_42":43,"_41":408,"_157":61,"_39":409,"_13":262,"_34":35,"_36":410,"_24":25,"_162":-5,"_228":411,"_27":412},{"_44":397,"_32":398,"_30":399,"_155":180,"_42":43,"_41":400,"_157":61,"_39":401,"_13":65,"_34":35,"_36":402,"_24":25,"_162":-5,"_228":403,"_27":404},{"_44":388,"_32":389,"_30":390,"_155":180,"_42":43,"_41":391,"_157":61,"_39":392,"_13":393,"_34":35,"_36":394,"_24":25,"_162":-5,"_228":395,"_27":396},{"_44":172,"_32":173,"_30":174,"_155":-5,"_42":43,"_41":169,"_157":61,"_39":385,"_13":65,"_34":176,"_36":-5,"_24":25,"_162":-5,"_228":386,"_27":387},{"_44":381,"_32":266,"_30":259,"_155":174,"_42":43,"_41":169,"_157":61,"_39":382,"_13":65,"_34":176,"_36":-5,"_24":25,"_162":-5,"_228":383,"_27":384},{"_44":377,"_32":341,"_30":336,"_155":259,"_42":43,"_41":169,"_157":61,"_39":378,"_13":65,"_34":176,"_36":-5,"_24":25,"_162":-5,"_228":379,"_27":380},{"_44":370,"_32":371,"_30":372,"_155":336,"_42":43,"_41":169,"_157":61,"_39":373,"_13":65,"_34":35,"_36":374,"_24":25,"_162":-5,"_228":375,"_27":376},{"_44":363,"_32":364,"_30":365,"_155":336,"_42":43,"_41":169,"_157":61,"_39":366,"_13":65,"_34":35,"_36":367,"_24":25,"_162":-5,"_228":368,"_27":369},{"_44":356,"_32":357,"_30":358,"_155":336,"_42":43,"_41":169,"_157":61,"_39":359,"_13":65,"_34":35,"_36":360,"_24":25,"_162":-5,"_228":361,"_27":362},{"_44":349,"_32":350,"_30":351,"_155":336,"_42":43,"_41":169,"_157":25,"_39":352,"_13":65,"_34":35,"_36":353,"_24":25,"_162":-5,"_228":354,"_27":355},{"_44":342,"_32":343,"_30":344,"_155":336,"_42":43,"_41":169,"_157":61,"_39":345,"_13":65,"_34":35,"_36":346,"_24":25,"_162":-5,"_228":347,"_27":348},{"_44":333,"_32":334,"_30":335,"_155":336,"_42":43,"_41":169,"_157":61,"_39":337,"_13":65,"_34":35,"_36":338,"_24":25,"_162":-5,"_228":339,"_27":340},{"_44":324,"_32":325,"_30":326,"_155":259,"_42":43,"_41":327,"_157":25,"_39":328,"_13":329,"_34":35,"_36":330,"_24":25,"_162":-5,"_228":331,"_27":332},{"_44":317,"_32":318,"_30":319,"_155":259,"_42":43,"_41":169,"_157":61,"_39":320,"_13":65,"_34":35,"_36":321,"_24":25,"_162":-5,"_228":322,"_27":323},{"_44":309,"_32":310,"_30":311,"_155":259,"_42":43,"_41":312,"_157":25,"_39":313,"_13":192,"_34":35,"_36":314,"_24":25,"_162":-5,"_228":315,"_27":316},{"_44":301,"_32":302,"_30":303,"_155":259,"_42":43,"_41":304,"_157":61,"_39":305,"_13":169,"_34":35,"_36":306,"_24":25,"_162":-5,"_228":307,"_27":308},{"_44":294,"_32":295,"_30":296,"_155":259,"_42":43,"_41":169,"_157":61,"_39":297,"_13":65,"_34":35,"_36":298,"_24":25,"_162":-5,"_228":299,"_27":300},{"_44":286,"_32":287,"_30":288,"_155":259,"_42":43,"_41":289,"_157":61,"_39":290,"_13":192,"_34":35,"_36":291,"_24":25,"_162":-5,"_228":292,"_27":293},{"_44":282,"_32":33,"_30":31,"_155":259,"_42":43,"_41":14,"_157":61,"_39":283,"_13":192,"_34":35,"_36":38,"_24":25,"_162":-5,"_228":284,"_27":285},{"_44":275,"_32":276,"_30":277,"_155":259,"_42":43,"_41":169,"_157":61,"_39":278,"_13":65,"_34":35,"_36":279,"_24":25,"_162":-5,"_228":280,"_27":281},{"_44":267,"_32":268,"_30":269,"_155":259,"_42":43,"_41":270,"_157":61,"_39":271,"_13":65,"_34":35,"_36":272,"_24":25,"_162":-5,"_228":273,"_27":274},{"_44":256,"_32":257,"_30":258,"_155":259,"_42":43,"_41":260,"_157":61,"_39":261,"_13":262,"_34":35,"_36":263,"_24":25,"_162":-5,"_228":264,"_27":265},{"_44":249,"_32":250,"_30":251,"_155":174,"_42":43,"_41":169,"_157":61,"_39":252,"_13":65,"_34":20,"_36":253,"_24":25,"_162":-5,"_228":254,"_27":255},{"_44":241,"_32":242,"_30":243,"_155":174,"_42":43,"_41":244,"_157":61,"_39":245,"_13":169,"_34":20,"_36":246,"_24":25,"_162":-5,"_228":247,"_27":248},{"_44":234,"_32":235,"_30":236,"_155":174,"_42":43,"_41":169,"_157":61,"_39":237,"_13":65,"_34":35,"_36":238,"_24":25,"_162":-5,"_228":239,"_27":240},{"_44":164,"_32":165,"_30":166,"_155":-5,"_42":43,"_41":167,"_157":61,"_39":231,"_13":169,"_34":20,"_36":170,"_24":25,"_162":-5,"_228":232,"_27":233},{"_44":153,"_32":154,"_30":59,"_155":-5,"_42":43,"_41":156,"_157":25,"_39":227,"_13":159,"_34":160,"_36":161,"_24":25,"_162":46,"_228":229,"_27":230},["D",1780424479536],"children",[],[154],["D",1780422636411],[],[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();",[],[173,235],"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",[],[173,242],"b0fad000-5eaa-11f1-b755-1607ee4eb77e","favicon.svg","019e896f-c16d-772c-815d-fe02605d2506",["D",1780422263049],"\n",[],[173,250],"ded67286-5eaf-11f1-9cb6-1607ee4eb77e","api.ts","019e896f-c16d-772c-815d-f55e5a483bea","019e896f-c16d-772c-815d-f9c3e368ecf9",46,["D",1780424487591],3,"export interface Thread {\n id: string;\n session_id: string | null;\n title: string;\n last_cursor: string | null;\n created_at: string;\n}\n\nexport interface Message {\n id: number;\n thread_id: string;\n role: \"user\" | \"assistant\" | \"system\";\n // content varies by type:\n // text → plain text\n // tool_use → JSON string { name, input }\n // tool_result → JSON string { output, is_error? }\n // image → JSON string { id, name, mime } (served at /api/files/)\n // file → JSON string { id, name, mime } (download at /api/files/)\n // error → plain text (rendered red)\n type: \"text\" | \"tool_use\" | \"tool_result\" | \"error\" | \"image\" | \"file\";\n content: string;\n created_at: string;\n}\n\nexport interface FilePayload {\n id: string;\n name: string;\n mime: string;\n}\n\nexport interface Me {\n username: string;\n used: number;\n limit: number;\n remaining: number;\n}\n\n// Thrown when an /api/* call returns 401 — the caller should show the login screen.\nexport class UnauthorizedError extends Error {\n constructor() {\n super(\"unauthorized\");\n this.name = \"UnauthorizedError\";\n }\n}\n\n// Thrown when a send hits the demo limit (HTTP 429).\nexport class LimitError extends Error {\n remaining: number;\n constructor(message: string, remaining: number) {\n super(message);\n this.name = \"LimitError\";\n this.remaining = remaining;\n }\n}\n\nasync function json(res: Response): Promise {\n if (res.status === 401) throw new UnauthorizedError();\n if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);\n return res.json() as Promise;\n}\n\nexport const api = {\n // Returns the logged-in user + usage. Throws UnauthorizedError when not logged in.\n me(): Promise {\n return fetch(\"/api/me\").then((r) => json(r));\n },\n listThreads(): Promise {\n return fetch(\"/api/threads\").then((r) => json(r));\n },\n createThread(): Promise {\n return fetch(\"/api/threads\", { method: \"POST\" }).then((r) => json(r));\n },\n getMessages(threadId: string, after: number): Promise {\n return fetch(`/api/threads/${threadId}/messages?after=${after}`).then((r) =>\n json(r)\n );\n },\n // Resolve a val's deployed page URL for the preview pane. Returns null when the\n // val has no HTTP file or can't be resolved (404) — the caller leaves the\n // address field for the user to fill in.\n async previewUrl(val: string): Promise {\n const res = await fetch(`/api/preview-url?val=${encodeURIComponent(val)}`);\n if (res.status === 401) throw new UnauthorizedError();\n if (!res.ok) return null;\n const body = await res.json().catch(() => null) as { url?: string } | null;\n return body?.url ?? null;\n },\n // Stays open the whole turn. Resolves { ok: true }; throws LimitError on HTTP 429.\n async send(threadId: string, text: string): Promise<{ ok: true }> {\n const res = await fetch(`/api/threads/${threadId}/messages`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text }),\n });\n if (res.status === 401) throw new UnauthorizedError();\n if (res.status === 429) {\n const body = await res.json().catch(() => ({})) as {\n error?: string;\n remaining?: number;\n };\n throw new LimitError(\n body.error ?? \"You've reached the demo message limit.\",\n body.remaining ?? 0,\n );\n }\n if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);\n return res.json() as Promise<{ ok: true }>;\n },\n async logout(): Promise {\n await fetch(\"/auth/logout\", { method: \"POST\" }).catch(() => {});\n },\n};\n\nexport const SOURCE_VAL_URL = \"https://www.val.town/x/templates/claude-managed-townie\";\n",[],[173,266,257],"components","e739a1d2-5eaf-11f1-b681-1607ee4eb77e","activeVal.ts","e739a268-5eaf-11f1-b681-1607ee4eb77e",47,["D",1780424501666],"import type { Message } from \"./api.ts\";\n\n// MCP tool calls that carry a `val: \"handle/name\"` field in their input — i.e.\n// the ones that tell us which val Townie is currently working on.\nconst VAL_TARGETED_TOOLS = new Set([\n \"read_file\",\n \"create_file\",\n \"update_file\",\n \"replace_in_file\",\n \"delete_file\",\n \"create_val\",\n \"fetch_val_endpoint\",\n \"run_file\",\n \"get_val_detail\",\n \"list_files\",\n \"get_logs\",\n \"get_traces\",\n]);\n\n// Tools that WRITE code (so the deployed page changed and the preview should reload).\nconst FILE_WRITING_TOOLS = new Set([\n \"create_file\",\n \"update_file\",\n \"replace_in_file\",\n \"create_val\",\n]);\n\nfunction parseToolUse(m: Message): { name?: string; input?: any } | null {\n if (m.type !== \"tool_use\") return null;\n try {\n return JSON.parse(m.content) as { name?: string; input?: any };\n } catch {\n return null;\n }\n}\n\n// Pull a \"handle/name\" val identifier out of a tool call's input. The MCP tools\n// pass it as `input.val`; create_val instead passes a bare name we can't resolve\n// to an owner, so we skip those for targeting.\nfunction valOf(input: any): string | null {\n const v = input?.val;\n return typeof v === \"string\" && v.includes(\"/\") ? v : null;\n}\n\n// The \"active val\": the most recent val Townie targeted across the thread. We scan\n// from the end so the latest call wins.\nexport function activeValFromMessages(messages: Message[]): string | null {\n for (let i = messages.length - 1; i >= 0; i--) {\n const parsed = parseToolUse(messages[i]);\n if (!parsed?.name || !VAL_TARGETED_TOOLS.has(parsed.name)) continue;\n const val = valOf(parsed.input);\n if (val) return val;\n }\n return null;\n}\n\n// True if any message at id > sinceId is a file-writing tool call — used to decide\n// whether to bump the preview's cache-buster after a turn so changes land.\nexport function hasFileWriteSince(messages: Message[], sinceId: number): boolean {\n for (const m of messages) {\n if (m.id <= sinceId) continue;\n const parsed = parseToolUse(m);\n if (parsed?.name && FILE_WRITING_TOOLS.has(parsed.name)) return true;\n }\n return false;\n}\n",[],[173,266,268],"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",[],[173,266,276],"96850832-5eb2-11f1-8b92-1607ee4eb77e",["D",1780425654755],[],[173,266,33],"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",[],[173,266,287],"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",[],[173,266,295],"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",[],[173,266,302],"cb147180-5eaf-11f1-b681-1607ee4eb77e","Composer.tsx","019e896f-c16d-772c-815d-e13141d53a2c",42,["D",1780424454445],"/** @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",[],[173,266,310],"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",[],[173,266,318],"26cd25ce-5eb2-11f1-934f-1607ee4eb77e","App.tsx","019e896f-c16d-772c-815d-da6f0f7d2cc2",58,["D",1780425467327],8,"/** @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 { activeValFromMessages, hasFileWriteSince } from \"./activeVal.ts\";\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 // Bumped whenever Townie writes code in the open thread, so the preview reloads.\n const [reloadSignal, setReloadSignal] = useState(0);\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 }\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

\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",[],[173,266,325],"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",[],[173,266,341,334],"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",[],[173,266,341,343],"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",[],[173,266,341,350],"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",[],[173,266,341,357],"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",[],[173,266,341,364],"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",[],[173,266,341,371],"b0fa63ea-5eaa-11f1-b755-1607ee4eb77e",["D",1780422263049],[206,207,208,209,210,211],[173,266,341],"b0facea2-5eaa-11f1-b755-1607ee4eb77e",["D",1780422263049],[205,212,213,214,215,216,217,218,219,220,221],[173,266],["D",1780422263049],[204,222,223,224],[173],"e39cc9e0-5eab-11f1-a95d-1607ee4eb77e","vault.ts","0679c4f0-5eab-11f1-a8f6-1607ee4eb77e",29,["D",1780422777619],5,"import { anthropic } from \"./anthropic.ts\";\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\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 anthropic().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 anthropic().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 anthropic().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",[],[179,389],"d2bed42a-5eaf-11f1-848c-1607ee4eb77e","preview.ts","d2bed506-5eaf-11f1-848c-1607ee4eb77e",43,["D",1780424467311],"// Resolve the deployed HTTP URL of a val (handle/name) for the live preview pane.\n//\n// Flow (both calls authenticated as the logged-in user with their Val Town OAuth\n// access token, so we can resolve their private/unlisted vals too):\n// 1. GET /v2/alias/vals/{handle}/{name} -> { id }\n// 2. GET /v2/vals/{id}/files?recursive=true -> files[]; pick the http file's\n// links.endpoint (the deployed page URL).\n//\n// Returns the plain deployed URL string, or null if the val has no HTTP file /\n// can't be resolved. We NEVER return tokens or auth here — the iframe only ever\n// loads this plain URL.\n\nconst VT_API = \"https://api.val.town\";\n\nexport async function resolvePreviewUrl(\n val: string,\n accessToken: string,\n): Promise {\n // val is \"handle/name\". Be defensive about extra slashes in the name.\n const slash = val.indexOf(\"/\");\n if (slash <= 0) return null;\n const handle = val.slice(0, slash);\n const name = val.slice(slash + 1);\n if (!handle || !name) return null;\n\n const h = { Authorization: `Bearer ${accessToken}` };\n\n // 1) handle/name -> val id\n const aliasRes = await fetch(\n `${VT_API}/v2/alias/vals/${encodeURIComponent(handle)}/${encodeURIComponent(name)}`,\n { headers: h },\n );\n if (!aliasRes.ok) return null;\n const alias = await aliasRes.json().catch(() => null) as { id?: string } | null;\n const valId = alias?.id;\n if (!valId) return null;\n\n // 2) val id -> files -> first http file's deployed endpoint\n const filesRes = await fetch(\n `${VT_API}/v2/vals/${valId}/files?path=&recursive=true&limit=100`,\n { headers: h },\n );\n if (!filesRes.ok) return null;\n const body = await filesRes.json().catch(() => null) as\n | { data?: Array<{ type?: string; links?: { endpoint?: string } }> }\n | null;\n const files = body?.data ?? [];\n const httpFile = files.find((f) => f.type === \"http\" && f.links?.endpoint);\n return httpFile?.links?.endpoint ?? null;\n}\n",[],[179,398],"b1702c38-5eaf-11f1-881f-1607ee4eb77e","og.ts","019e896f-c16d-772c-815d-b411ed076586",39,["D",1780424411428],"// 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// Val Town's mark (from val.town/favicon.svg) — a single path, inlined natively.\nconst VT_PATH = \"M11.9016 12.5885C11.4698 12.5885 11.1196 12.4542 10.8511 12.1856C10.5823 11.917 10.4481 11.5578 10.4481 11.1087V7.40896H9.76608L7.25838 11.7493C6.95826 12.2689 6.40374 12.589 5.80374 12.589H4.67214C4.07514 12.589 3.59106 12.1049 3.59106 11.5079V7.40943H1.99964V6.03519H4.25214C4.80654 6.03519 5.25594 6.48459 5.25594 7.03899V11.3733H5.49378L8.2617 6.78219C8.54077 6.3193 9.04155 6.03601 9.58185 6.03519L10.4481 6.03484V4H12.1129V6.03484H13.91V7.40896H12.1129V10.8179C12.1129 11.0822 12.2362 11.2144 12.483 11.2144H13.7514V12.5885H11.9016Z\";\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// Val Town logo: white mark on a black tile (matches their favicon) + wordmark.\n// deno-lint-ignore no-explicit-any\nconst valTown = (style: any = {}) =>\n div({ flexDirection: \"row\", alignItems: \"center\", gap: \"11px\", ...style }, [\n div({ width: \"32px\", height: \"32px\", background: INK, borderRadius: \"9px\", alignItems: \"center\", justifyContent: \"center\" }, [\n { type: \"svg\", props: { width: 22, height: 22, viewBox: \"0 0 16 16\", children: [{ type: \"path\", props: { d: VT_PATH, fill: \"#ffffff\" } }] } },\n ]),\n text(\"Val Town\", { fontSize: 22, fontWeight: 700, color: INK }),\n ]);\n\nconst pill = (t: string) =>\n text(t, { fontSize: 23, color: \"#A04A2E\", background: \"#F7DDD2\", border: \"1px solid #EEC0AC\", borderRadius: \"999px\", padding: \"11px 22px\" });\n\nasync function renderSvg(): Promise {\n const { bold, regular } = await loadFonts();\n const tree = div(\n { width: \"100%\", height: \"100%\", flexDirection: \"column\", justifyContent: \"center\", background: IVORY, padding: \"76px\", fontFamily: \"Sans\", color: INK },\n [\n div({ flexDirection: \"row\", alignItems: \"center\", gap: \"22px\" }, [\n div({ width: \"64px\", height: \"64px\", background: CORAL, borderRadius: \"17px\", alignItems: \"center\", justifyContent: \"center\" }, [burst(\"#ffffff\", 38)]),\n text(\"Townie\", { fontSize: 58, fontWeight: 700, letterSpacing: -1.5 }),\n ]),\n text(\"A Claude agent that builds and edits your Val Town vals — chat, and it ships.\", { fontSize: 31, color: MUTE, lineHeight: 1.42, marginTop: \"28px\", maxWidth: \"880px\" }),\n div({ flexDirection: \"row\", gap: \"14px\", marginTop: \"36px\" }, [pill(\"Edits your vals\"), pill(\"Runs SQLite\"), pill(\"Ships endpoints\")]),\n div({ flexDirection: \"row\", alignItems: \"center\", justifyContent: \"space-between\", marginTop: \"48px\" }, [\n valTown(),\n text(\"claude-managed-townie.val.run\", { fontSize: 22, fontWeight: 700, color: MUTE }),\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",[],[179,406],"e7316200-5eab-11f1-8f3b-1607ee4eb77e","files.ts","019e896f-c16d-772c-815d-b35b64c3a436",33,["D",1780422783613],4,"import { anthropic } from \"./anthropic.ts\";\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 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 anthropic().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 anthropic().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",[],[179,414],"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",[],[179,423],"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",[],[179,431],"ef598b64-5eac-11f1-a13a-1607ee4eb77e","anthropic.ts","cd413cd0-5eab-11f1-a9ea-1607ee4eb77e",34,["D",1780423226807],"import Anthropic from \"npm:@anthropic-ai/sdk@0.100.1\";\n\n// Shared, lazily-constructed Anthropic client. The SDK constructor throws when\n// ANTHROPIC_API_KEY is unset, so we defer construction to first use — that way\n// importing these modules (and serving the login page / OG card) works before\n// the key is configured; only running a turn or touching a vault needs it.\n// Read the key explicitly from Deno.env (Val Town's secret store) rather than\n// relying on the SDK's env auto-resolution, and don't memoize a client built\n// before the key was available — so a freshly-set ANTHROPIC_API_KEY is picked up\n// without needing a redeploy.\nlet _client: Anthropic | null = null;\nexport const anthropic = (): Anthropic => {\n if (_client) return _client;\n const apiKey = Deno.env.get(\"ANTHROPIC_API_KEY\");\n const c = new Anthropic({ apiKey });\n if (apiKey) _client = c; // only cache once the key is present\n return c;\n};\n\n// Beta header for Managed Agents endpoints (e.g. Files list with scope_id needs\n// it passed explicitly alongside the auto-added files-api header).\nexport const MANAGED_AGENTS_BETA = \"managed-agents-2026-04-01\";\n",[],[179,438],"dba28dce-5eab-11f1-a9ea-1607ee4eb77e","agent.ts","019e896f-c16d-772c-815d-a5bfb0c3f7e2",24,["D",1780422764233],7,"import { anthropic } from \"./anthropic.ts\";\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 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 anthropic().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 anthropic().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 anthropic().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 anthropic().beta.sessions.events.stream(sessionId);\n await anthropic().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",[],[179,446],["D",1780422263049],[195,196,197,198,199,200,201,202],[179],["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":495,"_496":497,"_498":499,"_500":25,"_501":25,"_502":25,"_503":61,"_504":-5,"_505":-7,"_506":-7,"_507":65,"_508":25,"_509":25,"_510":-5,"_511":25,"_512":25,"_513":25,"_514":-5},"ENV",{"_466":467,"_468":469,"_470":92,"_471":472,"_473":474,"_475":476,"_477":478,"_479":480,"_481":482,"_483":484,"_485":486,"_487":488,"_489":490,"_491":492,"_493":494},"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 · v59