[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_522":523,"_524":525},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_388":-5,"_20":389,"_22":390,"_391":392,"_393":394,"_26":395,"_24":396,"_397":398,"_399":400,"_401":51,"_402":403,"_404":74,"_405":-5,"_406":-5,"_407":408},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":32,"_33":34,"_35":-5},"handle","templates","name","claude-managed-agents-ui","branchName","main","version","path","frontend","project",{"_36":338,"_13":14,"_38":339,"_49":-5,"_340":51,"_52":53,"_341":53,"_342":343,"_344":345,"_346":347,"_348":114,"_349":74,"_350":-5,"_351":-5,"_352":72,"_55":56,"_353":354,"_355":356,"_357":358,"_359":-5,"_360":361,"_362":361,"_363":364,"_365":364,"_366":364,"_367":361,"_368":361,"_369":370,"_371":372,"_373":374,"_50":51},"tree",[108,109,110,111],"file",{"_36":105,"_13":19,"_65":68,"_67":-5,"_69":70,"_71":72,"_73":74,"_38":106,"_17":76,"_77":103,"_79":-5,"_81":51,"_82":-5,"_18":107},"contents",[59,60,61,62],"upstream",{"_36":37,"_38":39,"_40":41,"_13":16,"_42":43,"_17":44,"_45":-5,"_46":-5,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":12,"_55":56,"_57":58},"pull","ahead",120,"behind",2,"envVars","id","961078ea-f528-11ef-aa68-569c3dd06744","createdAt",["D",1740674013689],"updatedAt",["D",1785420707976],"projectId","96102714-f528-11ef-aa68-569c3dd06744",91,"forkedBranchId","forkedBranchVersion","lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","react-hono-starter",{"_36":99,"_13":100,"_65":101,"_67":68,"_69":70,"_71":72,"_73":74,"_38":102,"_17":76,"_77":103,"_79":-5,"_81":51,"_82":-5,"_18":104},{"_36":92,"_13":93,"_65":94,"_67":68,"_69":70,"_71":95,"_73":74,"_38":96,"_17":72,"_77":24,"_79":97,"_81":51,"_82":-5,"_18":98},{"_36":84,"_13":85,"_65":86,"_67":68,"_69":70,"_71":87,"_73":74,"_38":88,"_17":89,"_77":24,"_79":90,"_81":51,"_82":-5,"_18":91},{"_36":63,"_13":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_38":75,"_17":76,"_77":78,"_79":80,"_81":51,"_82":-5,"_18":83},"f94deee6-5e96-11f1-a008-1607ee4eb77e","index.tsx","fileId","019e88ee-890a-72f8-a279-1a31fa3e7e92","parentId","019e88ee-890a-72f8-a279-1cf939beedf1","branchId","f94618ba-5e96-11f1-a008-1607ee4eb77e","branchVersion",1,"latest",true,["D",1780413794401],0,"fileType","script","content","/** @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();","deleted","label",[19,64],"3388c7aa-5ead-11f1-acf7-1607ee4eb77e","index.html","019e88ee-890a-72f8-a279-15dc455934ab",102,["D",1780423341193],11,"\n\n \n \n \n Claude Managed Agent\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n

\n \n \n \n\n",[19,85],"96a632f2-5ea6-11f1-9620-1607ee4eb77e","favicon.svg","019e88ee-890a-72f8-a279-127b4bb2ba62",78,["D",1780420500980],"\n",[19,93],"f94de068-5e96-11f1-a008-1607ee4eb77e","components","019e88ee-890a-72f8-a279-0d2bca618dcd",["D",1780413794401],"directory",[19,100],"f94df35a-5e96-11f1-a008-1607ee4eb77e",["D",1780413794401],[19],{"_36":286,"_13":287,"_65":288,"_67":-5,"_69":70,"_71":34,"_73":74,"_38":289,"_17":76,"_77":103,"_79":-5,"_81":51,"_82":-5,"_120":290,"_18":291},{"_36":105,"_13":19,"_65":68,"_67":-5,"_69":70,"_71":72,"_73":74,"_38":132,"_17":76,"_77":103,"_79":-5,"_81":51,"_82":-5,"_120":133,"_18":134},{"_36":123,"_13":124,"_65":125,"_67":-5,"_69":70,"_71":126,"_73":74,"_38":127,"_17":128,"_77":24,"_79":129,"_81":51,"_82":-5,"_120":130,"_18":131},{"_36":112,"_13":113,"_65":114,"_67":-5,"_69":70,"_71":115,"_73":74,"_38":116,"_17":117,"_77":118,"_79":119,"_81":51,"_82":14,"_120":121,"_18":122},"c95c2aa6-5eb2-11f1-8072-1607ee4eb77e","index.ts","019e88ee-890a-72f8-a279-25160d2a5b36",113,["D",1780425739819],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 } from \"./backend/auth.ts\";\nimport { ensureSession, runTurn } from \"./backend/agent.ts\";\nimport { getFileBytes } from \"./backend/files.ts\";\nimport { renderOg } from \"./backend/og.ts\";\n\nconst app = new Hono();\n\n// Static frontend (public). The /auth/* routes are injected by oauthMiddleware.\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Social card image (Open Graph / Twitter) — public, so link unfurlers can fetch it.\napp.get(\"/og.png\", () => renderOg());\n\n// Everything under /api/* requires a logged-in Val Town user.\napp.use(\"/api/*\", async (c, next) => {\n const user = await requireUser(c);\n if (!user) return c.json({ error: \"Log in with Val Town to continue.\" }, 401);\n c.set(\"user\", user);\n await next();\n});\n\n// Current user + usage against the per-user message limit.\napp.get(\"/api/me\", async (c) => {\n const user = c.get(\"user\") as { username: string; id: string };\n const used = await db.countUserMessages(user.id);\n return c.json({\n username: user.username,\n used,\n limit: MESSAGE_LIMIT,\n remaining: Math.max(0, MESSAGE_LIMIT - used),\n });\n});\n\n// Threads (scoped to the current user)\napp.get(\"/api/threads\", async (c) => {\n const user = c.get(\"user\") as { id: string };\n return c.json(await db.listThreadsForUser(user.id));\n});\napp.post(\"/api/threads\", async (c) => {\n const user = c.get(\"user\") as { id: string };\n const id = crypto.randomUUID();\n await db.createThread(id, \"New chat\", user.id);\n return c.json(await db.getThread(id));\n});\n\n// Serve a sandbox file the agent surfaced: bytes from blob, mime/name from the\n// matching message row. Images render inline; other files download.\napp.get(\"/api/files/:id\", async (c) => {\n const user = c.get(\"user\") as { id: string };\n const id = c.req.param(\"id\");\n const meta = await db.getFilePayload(id);\n // Ownership check: 404 (not 403) so we don't leak which file ids exist.\n if (!meta || meta.user_id !== user.id) return c.notFound();\n const res = await getFileBytes(id);\n const headers: Record = { \"Content-Type\": meta.mime };\n if (!meta.mime.startsWith(\"image/\")) {\n // Name is agent-controlled: strip CR/LF + quotes/backslashes for the legacy\n // ASCII token, and add an RFC 5987 filename* with percent-encoding.\n const raw = meta.name ?? \"download\";\n const asciiName = raw.replace(/[\\r\\n\"\\\\]/g, \"_\");\n headers[\"Content-Disposition\"] =\n `attachment; filename=\"${asciiName}\"; filename*=UTF-8''${encodeURIComponent(raw)}`;\n }\n return new Response(await res.arrayBuffer(), { headers });\n});\n\n// Poll for messages newer than the last row the client has seen (own threads only)\napp.get(\"/api/threads/:id/messages\", async (c) => {\n const user = c.get(\"user\") as { id: string };\n const thread = await db.getThread(c.req.param(\"id\"));\n if (!thread || thread.user_id !== user.id) return c.notFound();\n return c.json(await db.getMessages(thread.id, Number(c.req.query(\"after\") ?? 0)));\n});\n\n// One user turn. Enforce the per-user message limit FIRST, then: insert the user\n// row, ensure a session, and stream events into SQLite until idle. UI relies on polling.\napp.post(\"/api/threads/:id/messages\", async (c) => {\n const user = c.get(\"user\") as { id: string };\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 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 oauthMiddleware(app.fetch);\n","children",[],[113],"b8f407a0-5e9a-11f1-af60-1607ee4eb77e","README.md","019e88ee-890a-72f8-a279-21928a58e16f",35,["D",1780415404602],4,"# Claude Managed Agent — Chat UI\n\nAn interactive chat UI for talking to a\n[Claude Managed Agent](https://platform.claude.com/docs/en/managed-agents/quickstart).\nEach thread is one stateful agent **session** — persistent history plus a\nsandbox with bash, file editing, and web tools. Hono (backend) + React\n(frontend), with Val Town SQLite for storage.\n\nWhere\n[`claude-managed-agents`](https://www.val.town/x/templates/claude-managed-agents)\nis a one-shot script, this is a multi-turn, multi-thread UI.\n\n## How it works\n\n- **A thread = one session.** The agent + environment are created **once**\n (lazily on first use) and their ids are cached in a `config` row — sessions\n pin to an agent version, so recreating them per request would be wrong. Each\n thread makes one session and reuses it for follow-up turns.\n- On a new user message the server inserts the user row, ensures the thread has\n a session, then **opens the event stream, sends the message, and writes each\n event to SQLite as it arrives** (`agent.message` → text, `agent.tool_use` →\n tool name, `session.error` → error), returning when the session goes idle.\n- The **frontend polls** `GET /api/threads/:id/messages?after=` about\n once a second and renders new rows in order. No SSE to the browser.\n- The built-in toolset runs in Anthropic's sandbox with\n `permission_policy: always_allow`, so tools just run — no approval prompts.\n- **Files the agent creates** (images, charts, PDFs) are surfaced after each\n turn. When the session goes idle, `backend/files.ts` lists the session's files\n via the Managed Agents Files API (`files.list({ scope_id })`), downloads any\n new ones (`files.download(id)`), stashes the bytes in `std/blob` (key\n `file_`), and writes a `messages` row for each — `type: \"image\"` for\n `image/*`, else `type: \"file\"`. The row's `content` is JSON\n `{ id, name, mime }`. The frontend renders images inline and other files as a\n `⬇ name` download link, both pointing at `GET /api/files/:id`, which streams\n the blob bytes with the right Content-Type.\n\n## Setup\n\nSet `ANTHROPIC_API_KEY` (from ).\nEverything else is created on the first message. Tweak the model or system\nprompt in `backend/agent.ts`.\n\n## Files\n\n- `index.ts` — Hono server + API routes\n- `backend/db.ts` — SQLite schema + helpers (`threads`, `messages`, `config`)\n- `backend/agent.ts` — Managed Agents: create-once config, per-thread session,\n per-turn streaming\n- `backend/files.ts` — surface sandbox files: Files API → `std/blob` →\n image/file message rows\n- `frontend/` — React chat UI (`App.tsx`, `Chat.tsx`, `api.ts`)\n\n## Backlog (not built yet)\n\n- **Stream reconnection.** The turn request stays open for the whole agent turn.\n If it dies before `session.status_idle`, reopen the stream and replay events\n for that `session_id` from the thread's `last_cursor` to resume writing to\n SQLite — session state is persisted server-side, so it's recoverable.\n- **Long turns** may exceed Val Town request limits → tied to the reconnection /\n background-execution work above.",[],[124],["D",1780413794401],[135,136,137,138],[19],{"_36":99,"_13":100,"_65":101,"_67":68,"_69":70,"_71":72,"_73":74,"_38":148,"_17":76,"_77":103,"_79":-5,"_81":51,"_82":-5,"_120":149,"_18":150},{"_36":92,"_13":93,"_65":94,"_67":68,"_69":70,"_71":95,"_73":74,"_38":145,"_17":72,"_77":24,"_79":97,"_81":51,"_82":-5,"_120":146,"_18":147},{"_36":84,"_13":85,"_65":86,"_67":68,"_69":70,"_71":87,"_73":74,"_38":142,"_17":89,"_77":24,"_79":90,"_81":51,"_82":-5,"_120":143,"_18":144},{"_36":63,"_13":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_38":139,"_17":76,"_77":78,"_79":80,"_81":51,"_82":-5,"_120":140,"_18":141},["D",1780413794401],[],[19,64],["D",1780423341193],[],[19,85],["D",1780420500980],[],[19,93],["D",1780413794401],[151,152,153,154,155,156,157,158,159],[19,100],{"_36":225,"_13":226,"_65":227,"_67":101,"_69":70,"_71":228,"_73":74,"_38":229,"_17":76,"_77":103,"_79":-5,"_81":51,"_82":-5,"_120":230,"_18":231},{"_36":216,"_13":217,"_65":218,"_67":101,"_69":70,"_71":219,"_73":74,"_38":220,"_17":221,"_77":78,"_79":222,"_81":51,"_82":-5,"_120":223,"_18":224},{"_36":208,"_13":209,"_65":210,"_67":101,"_69":70,"_71":211,"_73":74,"_38":212,"_17":34,"_77":78,"_79":213,"_81":51,"_82":-5,"_120":214,"_18":215},{"_36":200,"_13":201,"_65":202,"_67":101,"_69":70,"_71":203,"_73":74,"_38":204,"_17":34,"_77":78,"_79":205,"_81":51,"_82":-5,"_120":206,"_18":207},{"_36":192,"_13":193,"_65":194,"_67":101,"_69":70,"_71":195,"_73":74,"_38":196,"_17":72,"_77":78,"_79":197,"_81":51,"_82":-5,"_120":198,"_18":199},{"_36":184,"_13":185,"_65":186,"_67":101,"_69":70,"_71":187,"_73":74,"_38":188,"_17":76,"_77":78,"_79":189,"_81":51,"_82":-5,"_120":190,"_18":191},{"_36":176,"_13":177,"_65":178,"_67":101,"_69":70,"_71":179,"_73":74,"_38":180,"_17":128,"_77":78,"_79":181,"_81":51,"_82":-5,"_120":182,"_18":183},{"_36":168,"_13":169,"_65":170,"_67":101,"_69":70,"_71":171,"_73":74,"_38":172,"_17":76,"_77":78,"_79":173,"_81":51,"_82":-5,"_120":174,"_18":175},{"_36":160,"_13":161,"_65":162,"_67":101,"_69":70,"_71":163,"_73":74,"_38":164,"_17":34,"_77":78,"_79":165,"_81":51,"_82":-5,"_120":166,"_18":167},"dd36236c-5e9c-11f1-8f62-1607ee4eb77e","api.ts","e8672b46-5e97-11f1-a823-1607ee4eb77e",40,["D",1780416324362],"export interface Thread {\n id: string;\n session_id: string | null;\n title: string;\n last_cursor: string | null;\n created_at: string;\n}\n\nexport interface Message {\n id: number;\n thread_id: string;\n role: \"user\" | \"assistant\" | \"system\";\n // content varies by type:\n // text → plain text\n // tool_use → JSON string { name, input }\n // tool_result → JSON string { output, is_error? }\n // image → JSON string { id, name, mime } (served at /api/files/)\n // file → JSON string { id, name, mime } (download at /api/files/)\n // error → plain text (rendered red)\n type: \"text\" | \"tool_use\" | \"tool_result\" | \"error\" | \"image\" | \"file\";\n content: string;\n created_at: string;\n}\n\nexport interface FilePayload {\n id: string;\n name: string;\n mime: string;\n}\n\nexport interface Me {\n username: string;\n used: number;\n limit: number;\n remaining: number;\n}\n\n// Thrown when an /api/* call returns 401 — the caller should show the login screen.\nexport class UnauthorizedError extends Error {\n constructor() {\n super(\"unauthorized\");\n this.name = \"UnauthorizedError\";\n }\n}\n\n// Thrown when a send hits the demo limit (HTTP 429).\nexport class LimitError extends Error {\n remaining: number;\n constructor(message: string, remaining: number) {\n super(message);\n this.name = \"LimitError\";\n this.remaining = remaining;\n }\n}\n\nasync function json(res: Response): Promise {\n if (res.status === 401) throw new UnauthorizedError();\n if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);\n return res.json() as Promise;\n}\n\nexport const api = {\n // Returns the logged-in user + usage. Throws UnauthorizedError when not logged in.\n me(): Promise {\n return fetch(\"/api/me\").then((r) => json(r));\n },\n listThreads(): Promise {\n return fetch(\"/api/threads\").then((r) => json(r));\n },\n createThread(): Promise {\n return fetch(\"/api/threads\", { method: \"POST\" }).then((r) => json(r));\n },\n getMessages(threadId: string, after: number): Promise {\n return fetch(`/api/threads/${threadId}/messages?after=${after}`).then((r) =>\n json(r)\n );\n },\n // Stays open the whole turn. Resolves { ok: true }; throws LimitError on HTTP 429.\n async send(threadId: string, text: string): Promise<{ ok: true }> {\n const res = await fetch(`/api/threads/${threadId}/messages`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text }),\n });\n if (res.status === 401) throw new UnauthorizedError();\n if (res.status === 429) {\n const body = await res.json().catch(() => ({})) as {\n error?: string;\n remaining?: number;\n };\n throw new LimitError(\n body.error ?? \"You've reached the demo message limit.\",\n body.remaining ?? 0,\n );\n }\n if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);\n return res.json() as Promise<{ ok: true }>;\n },\n async logout(): Promise {\n await fetch(\"/auth/logout\", { method: \"POST\" }).catch(() => {});\n },\n};\n\nexport const SOURCE_VAL_URL = \"https://www.val.town/x/templates/claude-managed-agents-ui\";\n",[],[19,100,161],"09d95c4a-5e9d-11f1-8bcb-1607ee4eb77e","UsageMeter.tsx","09d95d8a-5e9d-11f1-8bcb-1607ee4eb77e",60,["D",1780416399311],"/** @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",[],[19,100,169],"5179536a-5eb2-11f1-aa72-1607ee4eb77e","Sidebar.tsx","126790de-5e9d-11f1-8d56-1607ee4eb77e",106,["D",1780425538915],"/** @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, open, onClose }: {\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 onClose: () => void;\n },\n) {\n return (\n \n {/* Brand + new chat */}\n

\n \n

\n Claude Managed Agent\n

\n {\n onNewChat();\n onClose();\n }}\n class=\"w-full rounded-xl bg-blue-600 px-3 py-2 font-medium text-white hover:bg-blue-700\"\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 {\n onOpen(t.id);\n onClose();\n }}\n class={`block w-full truncate rounded-lg px-3 py-2 text-left text-sm ${\n t.id === currentId\n ? \"bg-white font-medium text-neutral-900 shadow-sm\"\n : \"text-neutral-700 hover:bg-neutral-100\"\n }`}\n >\n {t.title || \"New chat\"}\n \n ))}\n

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

\n \n

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

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

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

\n \n Log out\n \n

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

\n \n );\n}\n",[],[19,100,177],"911c7314-5ea6-11f1-9b86-1607ee4eb77e","Logo.tsx","911c73f0-5ea6-11f1-9b86-1607ee4eb77e",77,["D",1780420491720],"/** @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",[],[19,100,185],"ba07c774-5ea6-11f1-a0e9-1607ee4eb77e","LoginScreen.tsx","07796116-5e9d-11f1-889f-1607ee4eb77e",81,["D",1780420560324],"/** @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 Claude Managed Agent\n

\n Chat with an autonomous Claude agent that can run tools, write code,\n and produce files.\n

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

\n );\n}\n",[],[19,100,193],"ab2ad284-5eb3-11f1-a8bb-1607ee4eb77e","Composer.tsx","fc6c8ab4-5e9c-11f1-8d56-1607ee4eb77e",114,["D",1780426118895],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// Max height (~8 lines) before the textarea starts scrolling instead of growing.\nconst MAX_HEIGHT = 200;\n\n// Sticky message composer. Disabled (with a reason) when busy or limit-reached.\nexport function Composer(\n { onSend, busy, disabled, disabledReason }: {\n onSend: (text: string) => void;\n busy: boolean;\n disabled?: boolean;\n disabledReason?: string;\n },\n) {\n const [text, setText] = useState(\"\");\n const textareaRef = useRef(null);\n\n // Auto-grow the textarea to fit its content (up to MAX_HEIGHT, then scroll).\n // Keyed on `text` so clear-on-send also shrinks it back to one row.\n function resize() {\n const el = textareaRef.current;\n if (!el) return;\n el.style.height = \"auto\";\n el.style.height = Math.min(el.scrollHeight, MAX_HEIGHT) + \"px\";\n }\n useEffect(resize, [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",[],[19,100,201],"017905c8-5e9d-11f1-8414-1607ee4eb77e","Chat.tsx","f078aca6-5e97-11f1-bd0e-1607ee4eb77e",57,["D",1780416385258],"/** @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",[],[19,100,209],"765fa8b4-5eb2-11f1-b5e0-1607ee4eb77e","App.tsx","019e88ee-890a-72f8-a279-04f780b271a6",111,["D",1780425600821],7,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n api,\n LimitError,\n type Me,\n type Message,\n type Thread,\n UnauthorizedError,\n} from \"./api.ts\";\nimport { Chat } from \"./Chat.tsx\";\nimport { Sidebar } from \"./Sidebar.tsx\";\nimport { LoginScreen } from \"./LoginScreen.tsx\";\nimport { Logo } from \"./Logo.tsx\";\n\ntype Auth = \"loading\" | \"out\" | Me;\n\nexport function App() {\n const [auth, setAuth] = useState(\"loading\");\n const [threads, setThreads] = useState([]);\n const [currentId, setCurrentId] = useState(null);\n const [messages, setMessages] = useState([]);\n const [busy, setBusy] = useState(false);\n const [limitMsg, setLimitMsg] = useState(null);\n const [drawerOpen, setDrawerOpen] = useState(false);\n const cursorRef = useRef(0);\n\n // Any 401 anywhere drops us back to the login screen.\n function handleErr(e: unknown) {\n if (e instanceof UnauthorizedError) setAuth(\"out\");\n }\n\n async function refreshMe() {\n try {\n setAuth(await api.me());\n } catch (e) {\n if (e instanceof UnauthorizedError) setAuth(\"out\");\n }\n }\n\n async function refreshThreads() {\n try {\n setThreads(await api.listThreads());\n } catch (e) {\n handleErr(e);\n }\n }\n\n // On load: check auth, then load threads if logged in.\n useEffect(() => {\n (async () => {\n try {\n const me = await api.me();\n setAuth(me);\n await refreshThreads();\n } catch (e) {\n if (e instanceof UnauthorizedError) setAuth(\"out\");\n }\n })();\n }, []);\n\n function openThread(id: string) {\n setCurrentId(id);\n setMessages([]);\n setLimitMsg(null);\n cursorRef.current = 0;\n }\n\n async function newChat() {\n try {\n const t = await api.createThread();\n await refreshThreads();\n openThread(t.id);\n } catch (e) {\n handleErr(e);\n }\n }\n\n async function logout() {\n await api.logout();\n globalThis.location.reload();\n }\n\n // Poll the open thread for new messages (~1s), deduping optimistic id<0 rows.\n useEffect(() => {\n if (!currentId || typeof auth === \"string\") return;\n let alive = true;\n async function poll() {\n try {\n const rows = await api.getMessages(currentId!, cursorRef.current);\n if (!alive || rows.length === 0) return;\n cursorRef.current = rows[rows.length - 1].id;\n setMessages((prev) => [...prev.filter((m) => m.id >= 0), ...rows]);\n } catch (e) {\n handleErr(e);\n }\n }\n poll();\n const iv = setInterval(poll, 1000);\n return () => {\n alive = false;\n clearInterval(iv);\n };\n }, [currentId, auth]);\n\n async function send(text: string) {\n if (!currentId) return;\n const optimistic: Message = {\n id: -1,\n thread_id: currentId,\n role: \"user\",\n type: \"text\",\n content: text,\n created_at: new Date().toISOString(),\n };\n setMessages((prev) => [...prev, optimistic]);\n setBusy(true);\n try {\n await api.send(currentId, text);\n refreshMe();\n } catch (e) {\n if (e instanceof LimitError) {\n setLimitMsg(e.message);\n setMessages((prev) => prev.filter((m) => m.id >= 0));\n refreshMe();\n } else {\n handleErr(e);\n }\n } finally {\n setBusy(false);\n refreshThreads();\n }\n }\n\n if (auth === \"loading\") {\n return (\n

\n Loading…\n

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

\n {/* Mobile-only backdrop behind the drawer; tap to close. */}\n {drawerOpen && (\n setDrawerOpen(false)}\n />\n )}\n setDrawerOpen(false)}\n />\n

\n {/* Mobile-only top bar: hamburger opens the sidebar drawer. */}\n

\n setDrawerOpen(true)}\n aria-label=\"Open menu\"\n class=\"rounded-lg p-1.5 text-neutral-700 hover:bg-neutral-100\"\n >\n \n \n \n \n \n \n

\n \n

\n \n Claude Managed Agent\n \n

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

\n ✦\n

\n Welcome, {me.username}\n

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

\n \n + New chat\n \n

\n )}\n

\n );\n}\n",[],[19,100,217],"e4f1275a-5e9c-11f1-9b38-1607ee4eb77e","messages","81d77aa6-31d1-47ae-9d3c-2fb6ebc65671",45,["D",1780416337399],[232,233,234,235,236,237],[19,100,226],{"_36":278,"_13":279,"_65":280,"_67":227,"_69":70,"_71":281,"_73":74,"_38":282,"_17":76,"_77":78,"_79":283,"_81":51,"_82":-5,"_120":284,"_18":285},{"_36":270,"_13":271,"_65":272,"_67":227,"_69":70,"_71":273,"_73":74,"_38":274,"_17":76,"_77":78,"_79":275,"_81":51,"_82":-5,"_120":276,"_18":277},{"_36":262,"_13":263,"_65":264,"_67":227,"_69":70,"_71":265,"_73":74,"_38":266,"_17":72,"_77":78,"_79":267,"_81":51,"_82":-5,"_120":268,"_18":269},{"_36":254,"_13":255,"_65":256,"_67":227,"_69":70,"_71":257,"_73":74,"_38":258,"_17":128,"_77":78,"_79":259,"_81":51,"_82":-5,"_120":260,"_18":261},{"_36":246,"_13":247,"_65":248,"_67":227,"_69":70,"_71":249,"_73":74,"_38":250,"_17":76,"_77":78,"_79":251,"_81":51,"_82":-5,"_120":252,"_18":253},{"_36":238,"_13":239,"_65":240,"_67":227,"_69":70,"_71":241,"_73":74,"_38":242,"_17":76,"_77":78,"_79":243,"_81":51,"_82":-5,"_120":244,"_18":245},"f0f4f93c-5e9c-11f1-b355-1607ee4eb77e","ToolMessage.tsx","f0f4fa18-5e9c-11f1-b355-1607ee4eb77e",51,["D",1780416357558],"/** @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",[],[19,100,226,239],"3a23bfd4-5ea8-11f1-8311-1607ee4eb77e","ToolGroup.tsx","3a23c0a6-5ea8-11f1-8311-1607ee4eb77e",84,["D",1780421204801],"/** @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",[],[19,100,226,247],"3cfd9492-5eb6-11f1-a38f-1607ee4eb77e","TextMessage.tsx","e4f11c60-5e9c-11f1-9b38-1607ee4eb77e",116,["D",1780427222524],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { marked } from \"https://esm.sh/marked@14.1.3\";\nimport DOMPurify from \"https://esm.sh/dompurify@3.2.4\";\nimport type { Message } from \"../api.ts\";\n\nmarked.setOptions({ gfm: true, breaks: true });\n\n// User messages: plain text in a coral bubble. Assistant/system text is rendered\n// as GitHub-flavored Markdown inside a neutral bubble via Tailwind `prose`.\nexport function TextMessage({ m }: { m: Message }) {\n if (m.role === \"user\") {\n return (\n

\n {m.content}\n

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