[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_286":287,"_288":289},"routes/_app.x.$handle.$name",{"_105":104,"_33":47,"_113":91,"_28":114,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_20":-5,"_125":126,"_127":128,"_129":27,"_130":131,"_132":25,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_45":46,"_33":47,"_40":48,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":55,"_56":-5,"_18":57,"_58":59,"_60":25,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":27},"version",44,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":29},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":27},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",true,"deletedHere",false,"path","frontend/components/OutputPanel.tsx","latestPath","fileId","2aae18e4-87b9-11f1-90b1-1607ee4eb77e","name","OutputPanel.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ntype Tab = \"preview\" | \"code\";\n\nfunction TabButton(\n { active, onClick, children }: {\n active: boolean;\n onClick: () => void;\n children: unknown;\n },\n) {\n return (\n \n {children}\n \n );\n}\n\nexport function OutputPanel(\n { html, stats, truncated }: { html: string; stats: Stats | null; truncated: boolean },\n) {\n const [tab, setTab] = useState(\"preview\");\n const [copied, setCopied] = useState(false);\n\n async function copy() {\n await navigator.clipboard.writeText(html);\n setCopied(true);\n setTimeout(() => setCopied(false), 1500);\n }\n\n return (\n

\n setTab(\"preview\")}>\n Preview\n \n setTab(\"code\")}>\n Code\n \n

\n\n {html && (\n \n {copied ? \"Copied\" : \"Copy HTML\"}\n \n )}\n

\n\n {truncated && (\n

\n A section ran out of continuation rounds, so this page may be\n incomplete. Try narrowing the request.\n

\n )}\n\n

\n {!html\n ? (\n

\n Nothing generated yet.\n

\n )\n : tab === \"preview\"\n ? (\n \n )\n : (\n

\n              {html}\n

\n )}\n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { StatsBar } from \"./StatsBar.tsx\";\nimport type { Stats } from \"./StatsBar.tsx\";\n\ntype Tab = \"preview\" | \"code\";\n\nfunction TabButton(\n { active, onClick, children }: {\n active: boolean;\n onClick: () => void;\n children: unknown;\n },\n) {\n return (\n \n {children}\n \n );\n}\n\nexport function OutputPanel(\n { html, stats, truncated }: { html: string; stats: Stats | null; truncated: boolean },\n) {\n const [tab, setTab] = useState(\"preview\");\n const [copied, setCopied] = useState(false);\n\n async function copy() {\n await navigator.clipboard.writeText(html);\n setCopied(true);\n setTimeout(() => setCopied(false), 1500);\n }\n\n return (\n

\n setTab(\"preview\")}>\n Preview\n \n setTab(\"code\")}>\n Code\n \n

\n\n {html && (\n \n {copied ? \"Copied\" : \"Copy HTML\"}\n \n )}\n

\n\n {truncated && (\n

\n A section ran out of continuation rounds, so this page may be\n incomplete. Try narrowing the request.\n

\n )}\n\n

\n {!html\n ? (\n

\n Nothing generated yet.\n

\n )\n : tab === \"preview\"\n ? (\n \n )\n : (\n

\n              {html}\n

\n )}\n

\n );\n}\n","createdAt",["D",1784937694890],"branchVersion","branchId","47efafa8-61cb-4f71-9cfb-728de8d47dfd","id","0ca32379-8f7c-4225-adac-e716712decaa","celeris_coder",["D",1784936344655],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Chat-driven HTML codegen using the Celeris API","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019f967f-2c90-70b9-bd1c-5ead1654e4af","pinPreview","pinMigrated","screenshotVersion","likeCount",1,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","0ca323798f7c4225adace716712decaa","tursoHostname","0ca323798f7c4225adace716712decaa-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789561254403],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_112":108},"org",{"_105":104,"_106":-5,"_107":108,"_18":57,"_109":110,"_111":27},"branch",{"_13":90,"_33":91,"_45":44,"_92":46,"_93":94,"_95":96,"_97":52,"_98":99,"_100":101,"_102":47,"_103":104},"isOwned",104,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_45":46,"_33":47,"_40":281,"_49":-5,"_50":27,"_51":52,"_53":52,"_54":55,"_56":-5,"_18":57,"_58":59,"_60":25,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":282,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":283,"_85":284,"_87":285,"_89":27},"tree",[198,207,208,209],"files",[198,199,200,201,202,203,204,205,206,207,208,209],"counts",{"_188":185,"_189":64,"_190":185,"_191":192,"_193":194},"contents",[149,150,151,152],"upstreamProject",{"_45":99,"_33":144,"_54":145,"_56":146,"_51":52,"_83":147},"upstreamBranch",{"_45":94,"_40":137,"_138":139,"_33":91,"_92":99,"_13":140,"_93":-5,"_95":-5,"_141":142,"_49":-5,"_89":27,"_51":52,"_103":143,"_65":101,"_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","templates","react-hono-starter","Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789574399&sig=a8d51a028376b0f18dea863670f2a5f39dc2eca62054b0c7661bee5c0457fba4",{"_105":143,"_112":148},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789574399&sig=3d6a0be010e77940e58f104bd06b986c1fe4f3a57bc9d85e134d5d62fe89a483",{"_45":181,"_33":182,"_31":183,"_155":-5,"_43":44,"_42":64,"_157":25,"_40":184,"_13":185,"_35":186,"_37":-5,"_24":27,"_162":-5,"_28":187},{"_45":173,"_33":174,"_31":175,"_155":-5,"_43":44,"_42":176,"_157":27,"_40":177,"_13":178,"_35":20,"_37":179,"_24":27,"_162":-5,"_28":180},{"_45":165,"_33":166,"_31":167,"_155":-5,"_43":44,"_42":168,"_157":27,"_40":169,"_13":170,"_35":36,"_37":171,"_24":27,"_162":-5,"_28":172},{"_45":153,"_33":154,"_31":59,"_155":-5,"_43":44,"_42":156,"_157":27,"_40":158,"_13":159,"_35":160,"_37":161,"_24":27,"_162":163,"_28":164},"2076502e-459d-4eb7-9c5b-57da260cc664","index.ts","parentId",26,"latest",["D",1784937267569],5,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { generatePage } from \"./celeris.ts\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Codegen: takes an instruction (+ the current document, for follow-up edits)\n// and returns a fresh HTML document from celeris-1.\napp.post(\"/api/generate\", async (c) => {\n const { instructions } = await c.req.json().catch(() => ({}));\n\n const clean = Array.isArray(instructions)\n ? instructions.filter((s): s is string => typeof s === \"string\" && s.trim() !== \"\")\n .map((s) => s.trim())\n : [];\n\n if (clean.length === 0) {\n return c.json({ error: \"Missing 'instructions'.\" }, 400);\n }\n\n try {\n return c.json(await generatePage(clean));\n } catch (err) {\n const message = err instanceof Error ? err.message : String(err);\n console.error(\"generate failed:\", message);\n // Deliberately 500, not 502: Cloudflare replaces a 502 body with its own\n // error page, which would hide this JSON from the client.\n return c.json({ error: message }, 500);\n }\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label","celeris-coder",[154],"0eedab14-61aa-4127-9427-9fac1b97ebbe","celeris.ts","0fd0ba18-87b9-11f1-8984-1607ee4eb77e",40,["D",1784937659267],10,"/**\n * Server-side wrapper around the Celeris API (celeris-1).\n *\n * ## Why this file is shaped the way it is\n *\n * **A WAF sits in front of the API.** Request bodies containing common XSS\n * signatures are rejected with a 403 and an nginx error page (not the documented\n * JSON envelope). Escaping doesn't help. Only *inbound* traffic is filtered —\n * generated output is never touched.\n *\n * Blocked: script, style, iframe, object, embed, link, meta, svg tags,\n * ` Math.ceil(s.length / 4);\n\nconst BLOCKED = new RegExp(\n [\n \"(?:<|<)\\\\s*/?\\\\s*(?:script|style|iframe|object|embed|link|meta|svg)\\\\b\",\n \"(?:<|<)!\\\\s*DOCTYPE\",\n \"\\\\son[a-z]{2,}\\\\s*=\",\n \"javascript\\\\s*:\",\n ].join(\"|\"),\n \"i\",\n);\nexport const hasBlockedLiteral = (s: string) => BLOCKED.test(s);\n\n/**\n * Strip the constructs above so a section can still be used as *context* for a\n * later call. Only applied to the copy we send — the original text is what ends\n * up in the assembled page.\n *\n * Not usable for continuation prefills: those must match the model's own output\n * byte for byte or it resumes from the wrong place.\n */\nexport function sanitizeForRequest(s: string): string {\n return s\n .replace(/<\\s*(script|style|svg|iframe|object|embed)\\b[\\s\\S]*?<\\s*\\/\\s*\\1\\s*>/gi, \"\")\n .replace(/<\\s*(?:link|meta)\\b[^>]*>/gi, \"\")\n .replace(/]*>/gi, \"\")\n .replace(/\\son[a-z]{2,}\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s>]+)/gi, \"\")\n .replace(/javascript\\s*:/gi, \"\");\n}\n\n/**\n * celeris-1 sometimes wraps output in a markdown fence, sometimes with the\n * opening backticks missing. Strip each end independently so partial fences are\n * handled. See https://docs.celeris.ai/known-issues\n */\nexport function stripFence(content: string): string {\n return content\n .trim()\n .replace(/^(?:```[a-zA-Z]*|html)[ \\t]*\\r?\\n/, \"\")\n .replace(/\\r?\\n```[ \\t]*$/, \"\")\n .trim();\n}\n\n// ---------------------------------------------------------------- prompts\n// These must not contain the blocked patterns — hence \"styling tags\" and\n// \"scripting tags\" rather than the obvious spellings. Rewriting them the\n// natural way will 403 every request.\n\nconst MARKUP_SYSTEM = `You write the inner markup for a web page body, styled\nentirely with Tailwind CSS utility classes.\n- Output raw markup only. No prose, no code fences.\n- No head section, no doctype, no styling tags, no scripting tags.\n- Style everything with Tailwind utility classes in the class attribute. Never\n write out a stylesheet, and never use inline style attributes.\n- You cannot style the page element itself, so wrap everything in one root\n element carrying the background, min-height and layout utilities.\n- No inline event-handler attributes. Give each interactive element a clear id\n so behaviour can be attached separately.\n- No images, icons, vector graphics, embedded objects, frames or external\n resource links. For decoration use text and emoji only.\n- Prefer Tailwind's built-in scale, and use responsive and state variants\n (sm: md: hover: focus:) where they earn their place.`;\n\nconst JS_SYSTEM = `You write plain JavaScript.\n- Output raw JavaScript only. No prose, no code fences, no markup tags.\n- The DOM is already parsed when your code runs.\n- Appearance is handled entirely by Tailwind utility classes already present in\n the markup. Never assign to .style and never inject CSS. To change how\n something looks, add or remove Tailwind classes with classList.\n- Write only behaviour: state, events, timers, and text updates.\n- If the page needs no interactivity, output nothing at all.`;\n\n// ---------------------------------------------------------------- API call\n\ninterface RawCall {\n content: string;\n finishReason: string;\n completionTokens: number;\n promptTokens: number;\n serverMs: number;\n}\n\nfunction parseServerTiming(header: string | null): number {\n const match = header?.match(/dur=([\\d.]+)/);\n return match ? Number(match[1]) : 0;\n}\n\nasync function readError(res: Response): Promise {\n const raw = await res.text().catch(() => \"\");\n let detail = \"\";\n try {\n detail = JSON.parse(raw)?.error?.message ?? \"\";\n } catch { /* WAF pages aren't JSON */ }\n\n switch (res.status) {\n case 401:\n return \"Celeris rejected the API key (401). Check CELERIS_API_KEY.\";\n case 402:\n return \"The Celeris workspace is out of prepaid credit (402).\";\n case 403:\n return \"Blocked by the Celeris edge proxy (403) — a request body reached it \"\n + \"containing a blocked tag or attribute.\";\n case 400:\n case 413:\n return `Celeris rejected the request (${res.status}). ${detail}`.trim();\n case 429:\n return `Rate limited by Celeris. Retry in ${res.headers.get(\"Retry-After\") ?? \"a few\"}s.`;\n default:\n return `Celeris error ${res.status}. ${detail}`.trim();\n }\n}\n\nasync function callCeleris(\n apiKey: string,\n messages: { role: string; content: string }[],\n continuing: boolean,\n maxTokens: number,\n): Promise {\n const res = await fetch(`${BASE_URL}/chat/completions`, {\n method: \"POST\",\n headers: { \"Authorization\": `Bearer ${apiKey}`, \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n model: MODEL,\n messages,\n max_tokens: maxTokens,\n temperature: 0,\n seed: 7,\n // vLLM passthrough: resume the trailing assistant message instead of\n // starting a fresh turn. Without this the model restarts from scratch.\n ...(continuing\n ? {\n continue_final_message: true,\n add_generation_prompt: false,\n stop: [\"```\", \"\\nBelow is\", \"\\nHere is\", \"\\nHere's\"],\n }\n : {}),\n }),\n signal: AbortSignal.timeout(30_000),\n });\n\n if (!res.ok) throw new Error(await readError(res));\n\n const data = await res.json();\n const choice = data?.choices?.[0];\n return {\n content: choice?.message?.content ?? \"\",\n finishReason: choice?.finish_reason ?? \"stop\",\n completionTokens: data?.usage?.completion_tokens ?? 0,\n promptTokens: data?.usage?.prompt_tokens ?? 0,\n serverMs: parseServerTiming(res.headers.get(\"Server-Timing\")),\n };\n}\n\n// ---------------------------------------------------------------- sections\n\ninterface Section {\n text: string;\n /** false when we stopped early — out of rounds, out of context, or unsafe to continue */\n complete: boolean;\n rounds: number;\n completionTokens: number;\n promptTokens: number;\n celerisMs: number;\n}\n\n/**\n * Generate one section, continuing across as many calls as it takes. Only safe\n * while the accumulated text stays clear of the blocked patterns, since it gets\n * resent verbatim on the next round.\n */\nasync function generateSection(\n apiKey: string,\n system: string,\n user: string,\n maxTokens = MAX_TOKENS,\n): Promise

{\n let text = \"\";\n let rounds = 0;\n let completionTokens = 0;\n let promptTokens = 0;\n let celerisMs = 0;\n let complete = false;\n\n while (rounds < MAX_ROUNDS) {\n const fixed = estimateTokens(system) + estimateTokens(user) + 64;\n if (fixed + estimateTokens(text) + maxTokens > INPUT_BUDGET) break;\n\n const messages = [\n { role: \"system\", content: system },\n { role: \"user\", content: user },\n ];\n const continuing = text.length > 0;\n if (continuing) messages.push({ role: \"assistant\", content: text });\n\n const call = await callCeleris(apiKey, messages, continuing, maxTokens);\n rounds++;\n completionTokens += call.completionTokens;\n promptTokens += call.promptTokens;\n celerisMs += call.serverMs;\n text += call.content;\n\n if (call.finishReason !== \"length\") {\n complete = true;\n break;\n }\n if (hasBlockedLiteral(text)) break; // resending this would 403\n }\n\n return { text: stripFence(text), complete, rounds, completionTokens, promptTokens, celerisMs };\n}\n\n// ---------------------------------------------------------------- assembly\n\nconst escapeHtml = (s: string) =>\n s.replace(/[&<>\"]/g, (c) => ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\" }[c]!));\n\nfunction assemble(markup: string, js: string, title: string): string {\n // The only place blocked literals appear — in output we build ourselves,\n // which never travels back to the API.\n const scriptBlock = js.trim()\n ? `\\n`\n : \"\";\n\n return `\n\n\n\n\n${escapeHtml(title)}\n\n\n\n${markup}${scriptBlock}\n\n\n`;\n}\n\n/** The first instruction is a whole spec sentence; trim it to a usable title. */\nfunction toTitle(instruction: string): string {\n const head = (instruction.split(/[:.—]/)[0] ?? instruction).trim();\n return head.length <= 60 ? head : head.slice(0, 57).replace(/\\s+\\S*$/, \"\") + \"…\";\n}\n\n// ---------------------------------------------------------------- public API\n\nexport function buildSpec(instructions: string[]): string {\n if (instructions.length === 1) return instructions[0];\n const list = instructions.map((s, i) => `${i + 1}. ${s}`).join(\"\\n\");\n return `Build one page satisfying all of these, in order:\\n${list}`;\n}\n\nexport interface GenerateStats {\n calls: number;\n completionTokens: number;\n promptTokens: number;\n /** summed Server-Timing across calls — model processing only */\n celerisMs: number;\n /** wall clock for the whole pipeline on the server, including network to Celeris */\n pipelineMs: number;\n /** completion tokens ÷ Celeris processing time */\n tokensPerSecond: number;\n sections: { markup: number; js: number };\n}\n\nexport interface GenerateResult {\n html: string;\n truncated: boolean;\n stats: GenerateStats;\n}\n\nexport async function generatePage(instructions: string[]): Promise {\n const apiKey = Deno.env.get(\"CELERIS_API_KEY\");\n if (!apiKey) throw new Error(\"CELERIS_API_KEY is not set on this val.\");\n\n const startedAt = performance.now();\n const spec = buildSpec(instructions);\n\n // 1. Markup, styled inline with Tailwind utilities — no stylesheet phase.\n const markup = await generateSection(apiKey, MARKUP_SYSTEM, spec);\n\n // 2. Behaviour, written against the markup's ids and classes. Strip anything\n // WAF-hostile from the copy we send; the original still goes in the page.\n const js = await generateSection(\n apiKey,\n JS_SYSTEM,\n `Spec: ${spec}\\n\\nMarkup to wire up:\\n${sanitizeForRequest(markup.text)}`,\n 512,\n );\n\n const pipelineMs = performance.now() - startedAt;\n const completionTokens = markup.completionTokens + js.completionTokens;\n const celerisMs = markup.celerisMs + js.celerisMs;\n\n return {\n html: assemble(markup.text, js.text, toTitle(instructions[0] ?? \"Untitled\")),\n truncated: !markup.complete,\n stats: {\n calls: markup.rounds + js.rounds,\n completionTokens,\n promptTokens: markup.promptTokens + js.promptTokens,\n celerisMs,\n pipelineMs,\n tokensPerSecond: celerisMs > 0 ? (completionTokens / celerisMs) * 1000 : 0,\n sections: { markup: markup.rounds, js: js.rounds },\n },\n };\n}\n",[166],"5b156480-2b0c-45b7-b610-6bf1428a4426","README.md","019f967f-2c90-70b9-bd1c-5b6f7df1d30e",38,["D",1784937462045],2,"# Celeris Coder\n\nChat-driven HTML codegen on the [Celeris](https://celeris.ai) API. Chat on the\nleft, output on the right, with Preview / Code tabs. Remixed from\n[`templates/react-hono-starter`](https://www.val.town/x/templates/react-hono-starter).\n\n`CELERIS_API_KEY` is an env var on this val, read only server-side in\n`celeris.ts`. The browser never sees it.\n\n## Measured API behavior\n\nSeveral of these contradict the docs. All were established by probing.\n\n| | |\n| --- | --- |\n| Context window | **8,192** — `models.md` says 4,096, but 7,018 + 1,024 is accepted (`/v1/models` and `errors.md` agree on 8,192) |\n| `max_tokens` | `256 \\| 512 \\| 768 \\| 1024`. Anything else is rejected |\n| Tool calling | **Works**, though absent from the API reference. `tools` and `tool_choice: \"required\"` both behave like OpenAI's |\n| `continue_final_message` | **Works** — vLLM passthrough, undocumented. Resumes a trailing assistant message instead of restarting |\n| Latency | ~30ms trivial, ~100–400ms per 1k-token section |\n\n### The WAF\n\nAn nginx proxy in front of the API returns **403** (an HTML error page, not the\ndocumented JSON envelope) for request bodies containing common XSS signatures.\nEscaping doesn't help — `<script>` is blocked too. Only *inbound* traffic\nis filtered; generated output is never touched.\n\n**Blocked:** `script` `style` `iframe` `object` `embed` `link` `meta` `svg`\ntags, `);",[],[182,221],"f4c4ee36-ee35-4cfd-97fc-6dea2e10f77d","index.html","019f967f-2c90-70b9-bd1c-4ff447b9289d",8,["D",1784936496218],"\n\n \n \n \n Celeris Coder\n \n \n \n \n

\n \n \n \n\n",[],[182,228],"7671c052-01b6-4f8f-ae96-7ddf7cddd192","favicon.svg","019f967f-2c90-70b9-bd1c-49c497e10f32",["D",1784936344655],"\n",[],[182,236],"29f8ab47-f6bc-4f79-97ed-61ba833dbd0e","StatsBar.tsx","f2d17eae-87bb-11f1-8d31-1607ee4eb77e","019f967f-2c90-70b9-bd1c-44ae412bc6c1",41,["D",1784937672753],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport interface Stats {\n calls: number;\n completionTokens: number;\n promptTokens: number;\n /** model processing time reported by Celeris (Server-Timing) */\n celerisMs: number;\n /** wall clock for the whole pipeline on the server */\n pipelineMs: number;\n tokensPerSecond: number;\n sections: { markup: number; js: number };\n /** measured in the browser around the fetch — the number the user actually feels */\n roundTripMs: number;\n}\n\nconst ms = (n: number) => n >= 1000 ? `${(n / 1000).toFixed(2)}s` : `${Math.round(n)}ms`;\n\nfunction Stat({ label, value, hint }: { label: string; value: string; hint?: string }) {\n return (\n

\n {value}\n {label}\n

\n );\n}\n\nexport function StatsBar({ stats }: { stats: Stats }) {\n // Everything that isn't model time: our server, Celeris queueing, two network hops.\n const overheadMs = Math.max(0, stats.roundTripMs - stats.celerisMs);\n\n return (\n

\n \n {Math.round(stats.tokensPerSecond).toLocaleString()}\n \n tok/s\n

\n\n

\n\n \n \n \n \n \n

\n );\n}\n",[],[182,251,243],"components","e47443b1-73bd-4c4f-b406-fa7a734f73be",["D",1784937694890],3,[],[182,251,34],"c406b7cb-e9d8-4228-8130-96d1fd5153ce","ChatPanel.tsx","229a86b0-87b9-11f1-b2d7-1607ee4eb77e",17,["D",1784936690142],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"./App.tsx\";\n\nconst EXAMPLES = [\n \"A pricing page with three tiers\",\n \"A pomodoro timer with start/reset\",\n \"A dark landing page for a coffee brand\",\n];\n\nfunction Bubble({ message }: { message: Message }) {\n const isUser = message.role === \"user\";\n return (\n

\n \n

{message.content}

\n {message.meta && (\n \n {[\n message.meta.serverMs != null && `${Math.round(message.meta.serverMs)}ms server`,\n message.meta.tokens != null && `${message.meta.tokens} tok`,\n ].filter(Boolean).join(\" · \")}\n

\n )}\n

\n \n );\n}\n\nexport function ChatPanel({\n messages,\n loading,\n error,\n onSend,\n onReset,\n}: {\n messages: Message[];\n loading: boolean;\n error: string | null;\n onSend: (instruction: string) => void;\n onReset: () => void;\n}) {\n const [draft, setDraft] = useState(\"\");\n const scrollRef = useRef(null);\n\n useEffect(() => {\n scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: \"smooth\" });\n }, [messages.length, loading]);\n\n function submit() {\n const text = draft.trim();\n if (!text || loading) return;\n onSend(text);\n setDraft(\"\");\n }\n\n return (\n

Celeris Coder

\n HTML codegen on celeris-1\n

\n {messages.length > 0 && (\n \n Reset\n \n )}\n

\n\n

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

\n Describe a page. Each follow-up is added to the spec and the page\n is regenerated.\n

\n {EXAMPLES.map((example) => (\n onSend(example)}\n className=\"block w-full text-left px-3 py-2 rounded-lg border border-gray-200 bg-white hover:border-blue-400 hover:text-blue-700 transition-colors cursor-pointer\"\n >\n {example}\n \n ))}\n

\n )}\n\n {messages.map((message, i) => )}\n\n {loading && (\n

\n generating…\n

\n )}\n\n {error && (\n

\n {error}\n

\n )}\n

\n\n

\n setDraft((e.target as HTMLTextAreaElement).value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n submit();\n }\n }}\n rows={3}\n placeholder=\"Describe a page… (Enter to send)\"\n className=\"w-full resize-none rounded-lg border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent\"\n />\n \n {loading ? \"Generating…\" : \"Generate\"}\n \n

\n view source\n

\n );\n}\n",[],[182,251,258],"54eff5f0-023e-45e6-9bc5-f4db41569543","App.tsx","019f967f-2c90-70b9-bd1c-3c6a91fd68da",42,["D",1784937685179],4,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { ChatPanel } from \"./ChatPanel.tsx\";\nimport { OutputPanel } from \"./OutputPanel.tsx\";\nimport type { Stats } from \"./StatsBar.tsx\";\n\nexport interface Message {\n role: \"user\" | \"assistant\";\n content: string;\n meta?: { tokensPerSecond?: number; roundTripMs?: number };\n}\n\nexport function App() {\n const [messages, setMessages] = useState([]);\n // The running spec. We regenerate from this each turn rather than sending the\n // document back for edits — the Celeris edge proxy 403s request bodies\n // containing script/style/svg/etc. See celeris.ts.\n const [instructions, setInstructions] = useState([]);\n const [html, setHtml] = useState(\"\");\n const [stats, setStats] = useState(null);\n const [truncated, setTruncated] = useState(false);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n\n async function send(instruction: string) {\n if (loading) return;\n const next = [...instructions, instruction];\n setError(null);\n setLoading(true);\n setInstructions(next);\n setMessages((prev) => [...prev, { role: \"user\", content: instruction }]);\n\n // The number the user actually feels — everything, end to end.\n const startedAt = performance.now();\n\n try {\n const res = await fetch(\"/api/generate\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ instructions: next }),\n });\n const data = await res.json();\n if (!res.ok) throw new Error(data?.error ?? `Request failed (${res.status})`);\n\n const roundTripMs = performance.now() - startedAt;\n const merged: Stats = { ...data.stats, roundTripMs };\n\n setHtml(data.html);\n setStats(merged);\n setTruncated(Boolean(data.truncated));\n\n setMessages((prev) => [...prev, {\n role: \"assistant\",\n content: data.truncated\n ? \"Ran out of continuation rounds — the page may be incomplete.\"\n : `Generated ${merged.completionTokens.toLocaleString()} tokens across ${merged.calls} calls.`,\n meta: { tokensPerSecond: merged.tokensPerSecond, roundTripMs },\n }]);\n } catch (err) {\n setError(err instanceof Error ? err.message : String(err));\n setInstructions(instructions);\n } finally {\n setLoading(false);\n }\n }\n\n function reset() {\n setMessages([]);\n setInstructions([]);\n setHtml(\"\");\n setStats(null);\n setTruncated(false);\n setError(null);\n }\n\n return (\n

\n \n \n

\n );\n}\n",[],[182,251,266],"165d8dc7-c163-4232-8e49-8111375de75c",["D",1784936344655],[200,201,202,203],[182,251],["D",1784936344655],[199,204,205,206],[182],["D",1784936344655],["D",1789561254403],{"_105":104,"_112":108},{"_105":104,"_106":-5,"_107":108,"_18":57,"_109":110,"_111":27},{"_13":90,"_33":91,"_45":44,"_92":46,"_93":94,"_95":96,"_97":52,"_98":99,"_100":101,"_102":47,"_103":104},"ctx",{"_83":-5,"_134":319,"_320":321,"_322":323,"_324":27,"_325":27,"_326":27,"_327":25,"_328":-5,"_329":-7,"_330":-7,"_331":185,"_332":27,"_333":27,"_334":-5,"_335":27,"_336":27,"_337":27,"_338":-5},"ENV",{"_290":291,"_292":293,"_294":91,"_295":296,"_297":298,"_299":300,"_301":302,"_303":304,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318},"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 · v44