Claude Managed Agent

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_304":305,"_306":307},"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",17,"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/agent.ts","latestPath","fileId","df88de02-5e97-11f1-a3de-1607ee4eb77e","name","agent.ts","fileType","script","content","import Anthropic from \"npm:@anthropic-ai/sdk\";\nimport { addMessage, getConfig, setConfig, setCursor, setSession } from \"./db.ts\";\n\nconst client = new Anthropic();\nconst MODEL = \"claude-sonnet-4-6\"; // cheap + fast for a demo; claude-opus-4-8 is the strongest\nconst SYSTEM =\n \"You are a helpful coding assistant working in a sandbox. Use your tools (bash, file editing, web) to actually do the work, then briefly summarize what you did.\";\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.\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: \"Managed Agent Demo\",\n model: MODEL,\n system: SYSTEM,\n // Built-in toolset runs in Anthropic's sandbox; always_allow = run without prompting.\n tools: [{\n type: \"agent_toolset_20260401\",\n default_config: { permission_policy: { type: \"always_allow\" } },\n }],\n });\n const environment = await client.beta.environments.create({\n name: \"demo-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.\nexport async function ensureSession(thread: any) {\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 });\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(threadId: string, sessionId: string, text: string) {\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\") await addMessage(threadId, \"assistant\", \"text\", block.text);\n }\n } else if (event.type === \"agent.tool_use\") {\n await addMessage(threadId, \"assistant\", \"tool_use\", e.name);\n } else if (event.type === \"session.error\") {\n await addMessage(threadId, \"system\", \"error\", e.error?.message ?? \"session error\");\n break;\n } else if (event.type === \"session.status_idle\") {\n break;\n }\n }\n}\n","import Anthropic from \"npm:@anthropic-ai/sdk\";\nimport { addMessage, getConfig, setConfig, setCursor, setSession } from \"./db.ts\";\nimport { syncSessionFiles } from \"./files.ts\";\n\nconst client = new Anthropic();\nconst MODEL = \"claude-sonnet-4-6\"; // cheap + fast for a demo; claude-opus-4-8 is the strongest\nconst SYSTEM =\n \"You are a helpful coding assistant working in a sandbox. Use your tools (bash, file editing, web) to actually do the work, then briefly summarize what you did.\";\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.\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: \"Managed Agent Demo\",\n model: MODEL,\n system: SYSTEM,\n // Built-in toolset runs in Anthropic's sandbox; always_allow = run without prompting.\n tools: [{\n type: \"agent_toolset_20260401\",\n default_config: { permission_policy: { type: \"always_allow\" } },\n }],\n });\n const environment = await client.beta.environments.create({\n name: \"demo-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.\nexport async function ensureSession(thread: any) {\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 });\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(threadId: string, sessionId: string, text: string) {\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\") await addMessage(threadId, \"assistant\", \"text\", block.text);\n }\n } else if (event.type === \"agent.tool_use\") {\n await addMessage(threadId, \"assistant\", \"tool_use\", e.name);\n } else if (event.type === \"session.error\") {\n await addMessage(threadId, \"system\", \"error\", e.error?.message ?? \"session error\");\n break;\n } else if (event.type === \"session.status_idle\") {\n break;\n }\n }\n}\n","createdAt",["D",1780414746299],"branchVersion","branchId","f94618ba-5e96-11f1-a008-1607ee4eb77e","id","f93e0bca-5e96-11f1-a008-1607ee4eb77e","claude-managed-agents-ui",["D",1780413794401],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Interactive chat UI for a Claude Managed Agent","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/7bf29dd7-9190-4de2-045f-8245c9e11100/square512?exp=1789538399&sig=be6dc6c3df334a840dd9a7b3bf9ae384701aeac0c762e11d823a8cd6601b35be","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019e88ee-890a-72f8-a279-25160d2a5b36","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","019aa807-52c2-709c-928b-2029bae9a558","tursoName","f93e0bca5e9611f1a0081607ee4eb77e","tursoHostname","f93e0bca5e9611f1a0081607ee4eb77e-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789495880338],"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",121,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","projectName","userHandle","templates","handle","displayName","Templates","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789538399&sig=ed57122c136965e1015088c1b79a18d1d4e6250d1eb81abacde1e740f48894e7","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":299,"_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":300,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":301,"_86":302,"_88":303,"_90":25},"tree",[192,197,205,206],"files",[192,193,194,195,196,197,198,199,200,201,202,203,204,205,206],"counts",{"_182":173,"_183":65,"_184":65,"_185":186,"_187":188},"contents",[148,149,150,151],"upstreamProject",{"_44":100,"_32":144,"_53":145,"_55":146,"_50":51,"_84":147},"upstreamBranch",{"_44":95,"_39":138,"_139":140,"_32":92,"_93":100,"_13":141,"_94":-5,"_96":-5,"_142":143,"_48":-5,"_90":25,"_50":51,"_103":104,"_66":67,"_102":144},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789538399&sig=d91a7ef87f90c894c3b8d0b9fb95840fd02478ac34a646812058e001671e6ecb",{"_105":104,"_113":109},{"_44":176,"_32":177,"_30":178,"_154":-5,"_42":43,"_41":179,"_156":61,"_39":180,"_13":173,"_34":174,"_36":-5,"_24":25,"_160":-5,"_27":181},{"_44":169,"_32":170,"_30":171,"_154":-5,"_42":43,"_41":65,"_156":61,"_39":172,"_13":173,"_34":174,"_36":-5,"_24":25,"_160":-5,"_27":175},{"_44":162,"_32":163,"_30":164,"_154":-5,"_42":43,"_41":165,"_156":25,"_39":166,"_13":65,"_34":20,"_36":167,"_24":25,"_160":-5,"_27":168},{"_44":152,"_32":153,"_30":59,"_154":-5,"_42":43,"_41":155,"_156":25,"_39":157,"_13":65,"_34":158,"_36":159,"_24":25,"_160":46,"_27":161},"e6441770-5e97-11f1-a823-1607ee4eb77e","index.ts","parentId",5,"latest",["D",1780414192131],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport * as db from \"./backend/db.ts\";\nimport { ensureSession, runTurn } from \"./backend/agent.ts\";\n\nconst app = new Hono();\n\n// Static frontend\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// Threads\napp.get(\"/api/threads\", async (c) => c.json(await db.listThreads()));\napp.post(\"/api/threads\", async (c) => {\n const id = crypto.randomUUID();\n await db.createThread(id, \"New chat\");\n return c.json(await db.getThread(id));\n});\n\n// Poll for messages newer than the last row the client has seen\napp.get(\"/api/threads/:id/messages\", async (c) =>\n c.json(await db.getMessages(c.req.param(\"id\"), Number(c.req.query(\"after\") ?? 0))));\n\n// One user turn. Stays open for the whole agent turn: insert the user row,\n// ensure a session, then stream events into SQLite until idle. UI relies on polling.\napp.post(\"/api/threads/:id/messages\", async (c) => {\n const thread = await db.getThread(c.req.param(\"id\"));\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 const sessionId = await ensureSession(thread);\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\nexport default app.fetch;\n","label",[153],"496dad70-5e98-11f1-89fd-1607ee4eb77e","README.md","019e88ee-890a-72f8-a279-21928a58e16f",14,["D",1780414358489],"# 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 sandbox\nwith bash, file editing, and web tools. Hono (backend) + React (frontend), with\nVal Town SQLite for storage.\n\nWhere [`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** (lazily\n on first use) and their ids are cached in a `config` row — sessions pin to an\n agent version, so recreating them per request would be wrong. Each thread makes\n 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 a\n session, then **opens the event stream, sends the message, and writes each event\n to SQLite as it arrives** (`agent.message` → text, `agent.tool_use` → tool name,\n `session.error` → error), returning when the session goes idle.\n- The **frontend polls** `GET /api/threads/:id/messages?after=` about once a\n 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\n## Setup\n\nSet `ANTHROPIC_API_KEY` (from ).\nEverything else is created on the first message. Tweak the model or system prompt\nin `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, per-turn streaming\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. If\n it dies before `session.status_idle`, reopen the stream and replay events for that\n `session_id` from the thread's `last_cursor` to resume writing to SQLite — session\n 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.\n- **Auth + townie mode.** Add Val Town OAuth (`std/oauth`), then per-user MCP:\n declare the Val Town MCP server (`https://api.val.town/v3/mcp`) on the agent and\n inject the user's bearer token via a per-user vault credential at session creation,\n so the agent can edit the logged-in user's vals.\n\n[View source](/source)\n",[163],"f94df35a-5e96-11f1-a008-1607ee4eb77e","frontend","019e88ee-890a-72f8-a279-1cf939beedf1",["D",1780413794401],0,"directory",[170],"31cdaeaa-5e97-11f1-91e4-1607ee4eb77e","backend","d776a2ad-ff3e-4481-8dd0-5ebd71580eb6",2,["D",1780413889356],[177],"pulls","branches","forks","envVars",{"_189":65,"_191":173},"connections",{"_189":173,"_190":173},"count","unfilledCount","emptyCount",{"_44":176,"_32":177,"_30":178,"_154":-5,"_42":43,"_41":179,"_156":61,"_39":296,"_13":173,"_34":174,"_36":-5,"_24":25,"_160":-5,"_208":297,"_27":298},{"_44":288,"_32":289,"_30":290,"_154":178,"_42":43,"_41":291,"_156":25,"_39":292,"_13":173,"_34":35,"_36":293,"_24":25,"_160":-5,"_208":294,"_27":295},{"_44":284,"_32":33,"_30":31,"_154":178,"_42":43,"_41":14,"_156":25,"_39":285,"_13":65,"_34":35,"_36":38,"_24":25,"_160":-5,"_208":286,"_27":287},{"_44":277,"_32":278,"_30":279,"_154":178,"_42":43,"_41":179,"_156":25,"_39":280,"_13":173,"_34":35,"_36":281,"_24":25,"_160":-5,"_208":282,"_27":283},{"_44":269,"_32":270,"_30":271,"_154":178,"_42":43,"_41":272,"_156":25,"_39":273,"_13":173,"_34":35,"_36":274,"_24":25,"_160":-5,"_208":275,"_27":276},{"_44":169,"_32":170,"_30":171,"_154":-5,"_42":43,"_41":65,"_156":61,"_39":266,"_13":173,"_34":174,"_36":-5,"_24":25,"_160":-5,"_208":267,"_27":268},{"_44":262,"_32":245,"_30":239,"_154":171,"_42":43,"_41":65,"_156":61,"_39":263,"_13":173,"_34":174,"_36":-5,"_24":25,"_160":-5,"_208":264,"_27":265},{"_44":254,"_32":255,"_30":256,"_154":239,"_42":43,"_41":257,"_156":25,"_39":258,"_13":65,"_34":35,"_36":259,"_24":25,"_160":-5,"_208":260,"_27":261},{"_44":246,"_32":247,"_30":248,"_154":239,"_42":43,"_41":249,"_156":25,"_39":250,"_13":173,"_34":35,"_36":251,"_24":25,"_160":-5,"_208":252,"_27":253},{"_44":236,"_32":237,"_30":238,"_154":239,"_42":43,"_41":240,"_156":25,"_39":241,"_13":173,"_34":35,"_36":242,"_24":25,"_160":-5,"_208":243,"_27":244},{"_44":229,"_32":230,"_30":231,"_154":171,"_42":43,"_41":65,"_156":25,"_39":232,"_13":173,"_34":20,"_36":233,"_24":25,"_160":-5,"_208":234,"_27":235},{"_44":221,"_32":222,"_30":223,"_154":171,"_42":43,"_41":224,"_156":25,"_39":225,"_13":65,"_34":20,"_36":226,"_24":25,"_160":-5,"_208":227,"_27":228},{"_44":214,"_32":215,"_30":216,"_154":171,"_42":43,"_41":65,"_156":61,"_39":217,"_13":173,"_34":35,"_36":218,"_24":25,"_160":-5,"_208":219,"_27":220},{"_44":162,"_32":163,"_30":164,"_154":-5,"_42":43,"_41":165,"_156":25,"_39":211,"_13":65,"_34":20,"_36":167,"_24":25,"_160":-5,"_208":212,"_27":213},{"_44":152,"_32":153,"_30":59,"_154":-5,"_42":43,"_41":155,"_156":25,"_39":207,"_13":65,"_34":158,"_36":159,"_24":25,"_160":46,"_208":209,"_27":210},["D",1780414192131],"children",[],[153],["D",1780414358489],[],[163],"f94deee6-5e96-11f1-a008-1607ee4eb77e","index.tsx","019e88ee-890a-72f8-a279-1a31fa3e7e92",["D",1780413794401],"/** @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();",[],[170,215],"fd6d187a-5e97-11f1-b3a7-1607ee4eb77e","index.html","019e88ee-890a-72f8-a279-15dc455934ab",11,["D",1780414230995],"\n\n \n \n \n Claude Managed Agent\n \n \n \n \n

\n \n \n \n",[],[170,222],"f94de36a-5e96-11f1-a008-1607ee4eb77e","favicon.svg","019e88ee-890a-72f8-a279-127b4bb2ba62",["D",1780413794401],"\n",[],[170,230],"e8672a9c-5e97-11f1-a823-1607ee4eb77e","api.ts","e8672b46-5e97-11f1-a823-1607ee4eb77e","019e88ee-890a-72f8-a279-0d2bca618dcd",6,["D",1780414195722],"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 type: \"text\" | \"tool_use\" | \"error\";\n content: string;\n created_at: string;\n}\n\nasync function json(res: Response): Promise {\n if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);\n return res.json() as Promise;\n}\n\nexport const api = {\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 send(threadId: string, text: string): Promise<{ ok: true }> {\n return fetch(`/api/threads/${threadId}/messages`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text }),\n }).then((r) => json<{ ok: true }>(r));\n },\n};\n",[],[170,245,237],"components","f078abde-5e97-11f1-bd0e-1607ee4eb77e","Chat.tsx","f078aca6-5e97-11f1-bd0e-1607ee4eb77e",7,["D",1780414209260],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"./api.ts\";\n\nfunction MessageRow({ m }: { m: Message }) {\n if (m.role === \"user\") {\n return (\n

\n {m.content}\n

\n );\n }\n if (m.role === \"system\" && m.type === \"error\") {\n return

{m.content}

;\n }\n if (m.role === \"assistant\" && m.type === \"tool_use\") {\n return

🔧 {m.content}

;\n }\n return (\n

\n {m.content}\n

\n );\n}\n\nexport function Chat(\n { messages, onSend, busy }: {\n messages: Message[];\n onSend: (text: string) => void;\n busy: boolean;\n },\n) {\n const [text, setText] = useState(\"\");\n const endRef = useRef(null);\n\n useEffect(() => {\n endRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [messages]);\n\n function submit() {\n const t = text.trim();\n if (!t) return;\n onSend(t);\n setText(\"\");\n }\n\n return (\n

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

\n Send a message to get started.\n

\n )\n : messages.map((m) => )}\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 );\n}\n",[],[170,245,247],"f9914d5c-5e97-11f1-9821-1607ee4eb77e","App.tsx","019e88ee-890a-72f8-a279-04f780b271a6",9,["D",1780414224516],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, type Message, type Thread } from \"./api.ts\";\nimport { Chat } from \"./Chat.tsx\";\n\nexport function App() {\n const [threads, setThreads] = useState([]);\n const [currentId, setCurrentId] = useState(null);\n const [messages, setMessages] = useState([]);\n const [busy, setBusy] = useState(false);\n const cursorRef = useRef(0);\n\n async function refreshThreads() {\n try {\n setThreads(await api.listThreads());\n } catch (_e) { /* ignore */ }\n }\n\n useEffect(() => {\n refreshThreads();\n }, []);\n\n function openThread(id: string) {\n setCurrentId(id);\n setMessages([]);\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) { /* ignore */ }\n }\n\n // Poll the open thread for new messages.\n useEffect(() => {\n if (!currentId) 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) { /* ignore */ }\n }\n poll();\n const iv = setInterval(poll, 1000);\n return () => {\n alive = false;\n clearInterval(iv);\n };\n }, [currentId]);\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 } catch (_e) { /* ignore */ }\n setBusy(false);\n refreshThreads();\n }\n\n return (\n

\n \n

\n {currentId\n ? \n : (\n

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

\n )}\n

\n );\n}\n",[],[170,245,255],"f94de068-5e96-11f1-a008-1607ee4eb77e",["D",1780413794401],[199,200,201],[170,245],["D",1780413794401],[198,202,203,204],[170],"2d47e114-5e99-11f1-a841-1607ee4eb77e","files.ts","2d47e1f0-5e99-11f1-a841-1607ee4eb77e",16,["D",1780414740779],"import Anthropic from \"npm:@anthropic-ai/sdk\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { addMessage, getMessages } from \"./db.ts\";\n\n// Files the agent creates in its sandbox are surfaced via the Managed Agents\n// Files API, scoped to the session: `files.list({ scope_id })` enumerates them\n// (id, filename, mime_type), and `files.download(id)` returns the bytes. Val Town\n// has no filesystem, so we copy each new file into std/blob and record a row.\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}`;\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// After a turn, mirror any session files the thread hasn't surfaced yet into blob\n// storage and write an image/file row for each. Images render inline; everything\n// else becomes a download link.\nexport async function syncSessionFiles(threadId: string, sessionId: string) {\n const seen = new Set(\n (await getMessages(threadId, 0))\n .filter((m: any) => m.type === \"image\" || m.type === \"file\")\n .map((m: any) => (JSON.parse(m.content) as FilePayload).id),\n );\n\n const res = await client.beta.files.list({ scope_id: sessionId, betas: [BETA] } as any);\n const fresh = (res.data as any[]).filter((f) => f.downloadable !== false && !seen.has(f.id));\n\n await Promise.all(fresh.map(async (f) => {\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 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 }));\n}\n",[],[177,270],"31cd75ac-5e97-11f1-91e4-1607ee4eb77e","db.ts","31cd7692-5e97-11f1-91e4-1607ee4eb77e",["D",1780413889356],"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\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\nexport const listThreads = () => all(`SELECT * FROM threads ORDER BY created_at DESC`);\nexport const getThread = (id: string) => one(`SELECT * FROM threads WHERE id = ?`, [id]);\nexport const createThread = (id: string, title: string) =>\n sqlite.execute({ sql: `INSERT INTO threads (id, title) VALUES (?, ?)`, args: [id, title] });\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",[],[177,278],"309246a2-5e99-11f1-8f25-1607ee4eb77e",["D",1780414746299],[],[177,33],"059d098c-5e99-11f1-9c08-1607ee4eb77e","_probe.ts","059d0a5e-5e99-11f1-9c08-1607ee4eb77e",15,["D",1780414674228],"import Anthropic from \"npm:@anthropic-ai/sdk\";\n\n// Throwaway probe: prove how a file the agent creates in the sandbox is surfaced\n// and downloaded. Creates a fresh agent+env+session, asks the agent to make a PNG,\n// logs the full event stream + every file/image-bearing field, then proves the\n// Files API (files.list scoped to the session + files.download) returns bytes.\n\nconst client = new Anthropic();\nconst BETA = \"managed-agents-2026-04-01\";\n\nconst agent = await client.beta.agents.create({\n name: \"probe-agent\",\n model: \"claude-sonnet-4-6\",\n system:\n \"You are a helpful assistant in a sandbox. When asked to make an image, actually create it with a tool, then tell the user it is ready.\",\n tools: [{\n type: \"agent_toolset_20260401\",\n default_config: { permission_policy: { type: \"always_allow\" } },\n }],\n});\nconst env = await client.beta.environments.create({\n name: \"probe-env\",\n config: { type: \"cloud\", networking: { type: \"unrestricted\" } },\n});\nconst session = await client.beta.sessions.create({\n agent: agent.id,\n environment_id: env.id,\n title: \"probe\",\n});\nconsole.log(\"SESSION\", session.id);\n\nconst stream = await client.beta.sessions.events.stream(session.id);\nawait client.beta.sessions.events.send(session.id, {\n events: [{\n type: \"user.message\",\n content: [{\n type: \"text\",\n text:\n \"Create a simple 200x200 PNG image of a red circle on a white background at /workspace/circle.png using Python (Pillow or matplotlib). Then show it to me.\",\n }],\n }],\n});\n\nconst seenBlockTypes = new Set();\nfor await (const event of stream) {\n const e = event as any;\n // Log every event type, and for content-bearing events log the block types.\n if (Array.isArray(e.content)) {\n for (const b of e.content) {\n seenBlockTypes.add(`${event.type}:${b.type}`);\n // Dump any block that isn't plain text so we can spot image/file blocks.\n if (b.type !== \"text\") {\n console.log(\"BLOCK\", event.type, JSON.stringify(b).slice(0, 800));\n }\n }\n }\n if (event.type === \"agent.tool_result\") {\n console.log(\"TOOL_RESULT\", JSON.stringify(e).slice(0, 1200));\n }\n if (event.type === \"session.error\") {\n console.log(\"ERR\", JSON.stringify(e.error));\n break;\n }\n if (event.type === \"session.status_idle\") {\n console.log(\"IDLE stop_reason\", JSON.stringify(e.stop_reason));\n break;\n }\n}\nconsole.log(\"BLOCK TYPES SEEN\", [...seenBlockTypes]);\n\n// Now prove the Files API surfaces the sandbox file.\nconst files = await client.beta.files.list({\n scope_id: session.id,\n betas: [BETA],\n} as any);\nconsole.log(\"FILES.LIST\", JSON.stringify(files.data, null, 2));\n\nif (files.data.length) {\n const f = files.data[0] as any;\n const content = await client.beta.files.download(f.id, { betas: [BETA] } as any);\n // download() returns a Response-like; read bytes to confirm it's real image data.\n const buf = new Uint8Array(await (content as any).arrayBuffer());\n console.log(\"DOWNLOAD\", f.id, f.filename, f.mime_type ?? f.type, \"bytes\", buf.length, \"magic\", [...buf.slice(0, 8)]);\n}\n\n// Clean up the probe's agent/env/session so we don't leave junk.\nawait client.beta.sessions.delete(session.id);\nconsole.log(\"DONE\");\n",[],[177,289],["D",1780413889356],[193,194,195,196],[177],["D",1780413794401],["D",1789495880338],{"_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":337,"_338":339,"_340":341,"_342":25,"_343":25,"_344":25,"_345":61,"_346":-5,"_347":-7,"_348":-7,"_349":173,"_350":25,"_351":25,"_352":-5,"_353":25,"_354":25,"_355":25,"_356":-5},"ENV",{"_308":309,"_310":311,"_312":92,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336},"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 · v17