[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_313":314,"_315":316},"routes/_app.x.$handle.$name",{"_103":102,"_31":44,"_111":89,"_26":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_20":-5,"_123":124,"_125":126,"_127":24,"_128":129,"_130":58,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":24},"version",56,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","frontend/components/PreviewPanel.tsx","latestPath","fileId","c76f88ae-87bc-11f1-ae53-1607ee4eb77e","name","PreviewPanel.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nexport function PreviewPanel(\n { html, truncated, jsDropped }: {\n html: string;\n truncated: boolean;\n jsDropped: boolean;\n },\n) {\n return (\n

\n Preview\n

\n\n {truncated && (\n

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

\n )}\n {jsDropped && (\n

\n The generated JavaScript failed a syntax check twice, so the page\n shipped without behaviour.\n

\n )}\n\n

\n {html\n ? (\n \n )\n : (\n

\n Nothing generated yet.\n

\n )}\n

\n );\n}\n","createdAt",["D",1784938029463],"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",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","0ca323798f7c4225adace716712decaa","tursoHostname","0ca323798f7c4225adace716712decaa-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789474235934],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_103":102,"_110":106},"org",{"_103":102,"_104":-5,"_105":106,"_18":54,"_107":108,"_109":24},"branch",{"_13":88,"_31":89,"_42":41,"_90":43,"_91":92,"_93":94,"_95":49,"_96":97,"_98":99,"_100":44,"_101":102},"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",{"_42":43,"_31":44,"_37":308,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":56,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":309,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":310,"_83":311,"_85":312,"_87":24},"tree",[204,215,216,217,218],"files",[204,205,206,207,208,209,210,211,212,213,214,215,216,217,218],"counts",{"_194":191,"_195":62,"_196":191,"_197":198,"_199":200},"contents",[147,148,149,150,151],"upstreamProject",{"_42":97,"_31":142,"_51":143,"_53":144,"_48":49,"_81":145},"upstreamBranch",{"_42":92,"_37":135,"_136":137,"_31":89,"_90":97,"_13":138,"_91":-5,"_93":-5,"_139":140,"_46":-5,"_87":24,"_48":49,"_101":141,"_63":99,"_100":142},"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=1789563599&sig=c3b06339283e4bc07165fa54c09036aa25cea7ac6108dec2f68b1acc60fad95f",{"_103":141,"_110":146},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789563599&sig=a969511699ef574c42d646a130422bcd8ffa020e1e59bd8fb5bde6db2cea72c1",{"_42":187,"_31":188,"_29":189,"_154":-5,"_40":41,"_39":62,"_156":58,"_37":190,"_13":191,"_33":192,"_35":-5,"_23":24,"_161":-5,"_26":193},{"_42":179,"_31":180,"_29":181,"_154":-5,"_40":41,"_39":182,"_156":24,"_37":183,"_13":184,"_33":20,"_35":185,"_23":24,"_161":-5,"_26":186},{"_42":171,"_31":172,"_29":173,"_154":-5,"_40":41,"_39":174,"_156":24,"_37":175,"_13":176,"_33":34,"_35":177,"_23":24,"_161":-5,"_26":178},{"_42":164,"_31":165,"_29":166,"_154":-5,"_40":41,"_39":167,"_156":24,"_37":168,"_13":62,"_33":34,"_35":169,"_23":24,"_161":-5,"_26":170},{"_42":152,"_31":153,"_29":56,"_154":-5,"_40":41,"_39":155,"_156":24,"_37":157,"_13":158,"_33":159,"_35":160,"_23":24,"_161":162,"_26":163},"d3db4efa-3785-42ec-9d90-cdcc2a79402c","index.ts","parentId",54,"latest",["D",1784937982673],6,"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/**\n * Codegen, as a server-sent event stream.\n *\n * The pipeline makes several Celeris calls (markup, continuations, behaviour),\n * and each one streams back in ~256-token diffusion blocks. Rather than hide\n * that behind one slow request, every block and every call boundary is forwarded\n * to the client so the UI can show the machinery and the timings as they happen.\n */\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 const encoder = new TextEncoder();\n const stream = new ReadableStream({\n async start(controller) {\n const send = (event: unknown) => {\n controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\\n\\n`));\n };\n try {\n await generatePage(clean, send);\n } catch (err) {\n const message = err instanceof Error ? err.message : String(err);\n console.error(\"generate failed:\", message);\n send({ type: \"error\", message });\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream; charset=utf-8\",\n \"Cache-Control\": \"no-cache, no-transform\",\n \"Connection\": \"keep-alive\",\n // Discourage proxy buffering, which would defeat the point of streaming.\n \"X-Accel-Buffering\": \"no\",\n },\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",[153],"2af10a17-0def-4167-af56-deaaaa7c96d7","debug_stream.ts","57da850c-87bc-11f1-a3cc-1607ee4eb77e",52,["D",1784937866619],"// Does a *long* generation actually arrive incrementally, or all at once?\nconst key = Deno.env.get(\"CELERIS_API_KEY\")!;\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\nconst t0 = performance.now();\nconst res = await fetch(\"https://inference.celeris.ai/celeris-1/v1/chat/completions\", {\n method: \"POST\",\n headers: { Authorization: `Bearer ${key}`, \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n model: \"celeris-1\",\n messages: [\n { role: \"system\", content: MARKUP_SYSTEM },\n {\n role: \"user\",\n content:\n \"A full landing page for a coffee subscription startup: nav bar, hero, six feature cards, a three-tier pricing table, four testimonials, an FAQ, and a footer.\",\n },\n ],\n max_tokens: 1024,\n temperature: 0,\n stream: true,\n stream_options: { include_usage: true },\n }),\n});\n\nconst reader = res.body!.getReader();\nconst decoder = new TextDecoder();\nlet buffer = \"\";\nlet chars = 0;\nconst arrivals: { atMs: number; chars: number }[] = [];\nlet usage: unknown = null;\n\nwhile (true) {\n const { done, value } = await reader.read();\n if (done) break;\n buffer += decoder.decode(value, { stream: true });\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\";\n for (const line of lines) {\n if (!line.startsWith(\"data: \")) continue;\n const payload = line.slice(6).trim();\n if (payload === \"[DONE]\") continue;\n const json = JSON.parse(payload);\n const delta = json.choices?.[0]?.delta?.content;\n if (delta) {\n chars += delta.length;\n arrivals.push({ atMs: Math.round(performance.now() - t0), chars: delta.length });\n }\n if (json.usage) usage = json.usage;\n }\n}\n\nconsole.log(`total wall clock: ${Math.round(performance.now() - t0)}ms`);\nconsole.log(`total chars: ${chars}`);\nconsole.log(`usage: ${JSON.stringify(usage)}`);\nconsole.log(`\\ndelta events: ${arrivals.length}`);\nconsole.log(\"arrival timeline (ms → chars):\");\nfor (const a of arrivals.slice(0, 25)) console.log(` ${a.atMs}ms → ${a.chars}`);\nif (arrivals.length > 25) console.log(` … ${arrivals.length - 25} more`);\n",[165],"8fb60a0f-a444-46f8-aac0-a8ebd491bac4","celeris.ts","0fd0ba18-87b9-11f1-8984-1607ee4eb77e",53,["D",1784937970111],15,"/**\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. Not usable for continuation prefills, which must\n * match the model's own output byte for byte.\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. 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.\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// ---------------------------------------------------------------- events\n\nexport type SectionName = \"markup\" | \"js\";\n\nexport type GenEvent =\n | { type: \"phase\"; section: SectionName; message: string }\n | { type: \"call-start\"; section: SectionName; round: number; continuing: boolean }\n | { type: \"delta\"; section: SectionName; text: string }\n | {\n type: \"call-end\";\n section: SectionName;\n round: number;\n completionTokens: number;\n promptTokens: number;\n ms: number;\n blocks: number;\n tokensPerSecond: number;\n finishReason: string;\n }\n | { type: \"note\"; message: string }\n | { type: \"preview\"; html: string }\n | { type: \"done\"; html: string; truncated: boolean; jsDropped: boolean; stats: GenerateStats }\n | { type: \"error\"; message: string };\n\nexport type Emit = (event: GenEvent) => void;\n\n// ---------------------------------------------------------------- API call\n\ninterface StreamedCall {\n content: string;\n finishReason: string;\n completionTokens: number;\n promptTokens: number;\n /** wall clock around the request — Server-Timing is useless when streaming */\n ms: number;\n /** number of SSE delta events, i.e. diffusion blocks */\n blocks: number;\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 streamCeleris(\n apiKey: string,\n messages: { role: string; content: string }[],\n continuing: boolean,\n maxTokens: number,\n onDelta: (text: string) => void,\n): Promise {\n const startedAt = performance.now();\n\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 stream: true,\n stream_options: { include_usage: true },\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 // Once it finishes it likes to announce a second draft, or narrate\n // corrections to itself in comments. Cut all of that off.\n stop: [\n \"```\",\n \"\\nBelow is\",\n \"\\nHere is\",\n \"\\nHere's\",\n \"\\n// Wait\",\n \"\\n// Note:\",\n \"\\n// Let's\",\n \"\\n// Fixed\",\n \"\\n// Actually\",\n ],\n }\n : {}),\n }),\n signal: AbortSignal.timeout(30_000),\n });\n\n if (!res.ok || !res.body) throw new Error(await readError(res));\n\n const reader = res.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n let content = \"\";\n let blocks = 0;\n let finishReason = \"stop\";\n let completionTokens = 0;\n let promptTokens = 0;\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n buffer += decoder.decode(value, { stream: true });\n\n const lines = buffer.split(\"\\n\");\n buffer = lines.pop() ?? \"\";\n\n for (const line of lines) {\n if (!line.startsWith(\"data:\")) continue;\n const payload = line.slice(5).trim();\n if (!payload || payload === \"[DONE]\") continue;\n\n let json: any;\n try {\n json = JSON.parse(payload);\n } catch {\n continue;\n }\n\n const choice = json.choices?.[0];\n const delta = choice?.delta?.content;\n if (delta) {\n blocks++;\n content += delta;\n onDelta(delta);\n }\n if (choice?.finish_reason) finishReason = choice.finish_reason;\n if (json.usage) {\n completionTokens = json.usage.completion_tokens ?? completionTokens;\n promptTokens = json.usage.prompt_tokens ?? promptTokens;\n }\n }\n }\n\n const ms = performance.now() - startedAt;\n return { content, finishReason, completionTokens, promptTokens, ms, blocks };\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 ms: 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 section: SectionName,\n system: string,\n user: string,\n emit: Emit,\n maxTokens = MAX_TOKENS,\n): Promise

{\n let text = \"\";\n let rounds = 0;\n let completionTokens = 0;\n let promptTokens = 0;\n let ms = 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) {\n emit({ type: \"note\", message: \"Stopped: no context room left for another round.\" });\n break;\n }\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 round = rounds + 1;\n emit({ type: \"call-start\", section, round, continuing });\n\n const call = await streamCeleris(\n apiKey,\n messages,\n continuing,\n maxTokens,\n (delta) => emit({ type: \"delta\", section, text: delta }),\n );\n\n rounds++;\n completionTokens += call.completionTokens;\n promptTokens += call.promptTokens;\n ms += call.ms;\n text += call.content;\n\n emit({\n type: \"call-end\",\n section,\n round,\n completionTokens: call.completionTokens,\n promptTokens: call.promptTokens,\n ms: call.ms,\n blocks: call.blocks,\n tokensPerSecond: call.ms > 0 ? (call.completionTokens / call.ms) * 1000 : 0,\n finishReason: call.finishReason,\n });\n\n if (call.finishReason !== \"length\") {\n complete = true;\n break;\n }\n if (hasBlockedLiteral(text)) {\n emit({\n type: \"note\",\n message: \"Stopped: output now contains a tag the proxy blocks, so it can't be continued.\",\n });\n break;\n }\n }\n\n return { text: stripFence(text), complete, rounds, completionTokens, promptTokens, ms };\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/**\n * On long continuations celeris-1 sometimes emits invalid JavaScript — a stray\n * `function () => {`, a half-rewritten handler — and one syntax error takes down\n * every listener on the page. `new Function` compiles without executing, which\n * catches it before it ships.\n */\nfunction isValidJs(source: string): boolean {\n if (!source.trim()) return true;\n try {\n new Function(source);\n return true;\n } catch {\n return false;\n }\n}\n\n/** Drop trailing comment-only lines, usually the model talking to itself. */\nfunction trimTrailingComments(source: string): string {\n const lines = source.split(\"\\n\");\n while (lines.length && /^\\s*(?:\\/\\/.*)?$/.test(lines[lines.length - 1])) lines.pop();\n return lines.join(\"\\n\");\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 wall clock of the Celeris requests */\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}\n\nexport async function generatePage(instructions: string[], emit: Emit): 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 const title = toTitle(instructions[0] ?? \"Untitled\");\n\n // 1. Markup, styled inline with Tailwind utilities — no stylesheet phase.\n emit({ type: \"phase\", section: \"markup\", message: \"Generating markup\" });\n const markup = await generateSection(apiKey, \"markup\", MARKUP_SYSTEM, spec, emit);\n\n // Show the page as soon as it exists, before behaviour is wired up.\n emit({ type: \"preview\", html: assemble(markup.text, \"\", title) });\n\n // 2. Behaviour, written against the markup's ids. Strip anything WAF-hostile\n // from the copy we send; the original still goes in the page.\n emit({ type: \"phase\", section: \"js\", message: \"Generating behaviour\" });\n const jsPrompt = `Spec: ${spec}\\n\\nMarkup to wire up:\\n${sanitizeForRequest(markup.text)}`;\n const js = await generateSection(apiKey, \"js\", JS_SYSTEM, jsPrompt, emit, 512);\n\n let jsText = trimTrailingComments(js.text);\n let jsRetry: Section | null = null;\n let jsDropped = false;\n\n if (!isValidJs(jsText)) {\n emit({ type: \"note\", message: \"Generated JS failed a syntax check. Retrying once.\" });\n jsRetry = await generateSection(\n apiKey,\n \"js\",\n `${JS_SYSTEM}\\n- Keep it short. Fewer features, correct syntax.`,\n jsPrompt,\n emit,\n 512,\n );\n const retryText = trimTrailingComments(jsRetry.text);\n if (isValidJs(retryText)) {\n jsText = retryText;\n } else {\n jsText = \"\";\n jsDropped = true;\n emit({ type: \"note\", message: \"JS still invalid. Shipping the page without behaviour.\" });\n }\n }\n\n const completionTokens = markup.completionTokens + js.completionTokens +\n (jsRetry?.completionTokens ?? 0);\n const celerisMs = markup.ms + js.ms + (jsRetry?.ms ?? 0);\n const jsRounds = js.rounds + (jsRetry?.rounds ?? 0);\n\n emit({\n type: \"done\",\n html: assemble(markup.text, jsText, title),\n truncated: !markup.complete,\n jsDropped,\n stats: {\n calls: markup.rounds + jsRounds,\n completionTokens,\n promptTokens: markup.promptTokens + js.promptTokens + (jsRetry?.promptTokens ?? 0),\n celerisMs,\n pipelineMs: performance.now() - startedAt,\n tokensPerSecond: celerisMs > 0 ? (completionTokens / celerisMs) * 1000 : 0,\n sections: { markup: markup.rounds, js: jsRounds },\n },\n });\n}\n",[172],"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, `);",[],[188,233],"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",[],[188,240],"7671c052-01b6-4f8f-ae96-7ddf7cddd192","favicon.svg","019f967f-2c90-70b9-bd1c-49c497e10f32",["D",1784936344655],"\n",[],[188,248],"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",[],[188,263,255],"components","62fdf7db-68f0-44f0-af5b-a1d51bc4331f",["D",1784938029463],[],[188,263,32],"15e841ee-4d75-4f29-9f3c-a927aac143fb","OutputPanel.tsx","2aae18e4-87b9-11f1-90b1-1607ee4eb77e",45,["D",1784937701331],4,"/** @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 {stats && }\n\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",[],[188,263,269],"12e1d6d0-918b-4039-b3a2-70592ab4dc0c","CodePanel.tsx","c23de72c-87bc-11f1-8c3b-1607ee4eb77e",55,["D",1784938020742],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\n\n/**\n * Middle column: the raw output as it arrives.\n *\n * celeris-1 is a diffusion model, so this doesn't type out character by\n * character — it lands in ~256-token blocks, a few per call. The jumpiness is\n * the architecture, not a buffering bug.\n */\nexport function CodePanel(\n { code, phase, streaming }: {\n code: string;\n phase: string | null;\n streaming: boolean;\n },\n) {\n const scrollRef = useRef(null);\n\n useEffect(() => {\n if (streaming) scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });\n }, [code, streaming]);\n\n return (\n

\n \n {phase ?? \"Code\"}\n \n {streaming && (\n \n )}\n

\n {code && !streaming && (\n navigator.clipboard.writeText(code)}\n className=\"text-[11px] px-2 py-1 rounded border border-gray-700 text-gray-400 hover:bg-gray-800 transition-colors cursor-pointer\"\n >\n Copy\n \n )}\n

\n\n \n {code\n ? {code}\n : Output appears here as it streams.}\n \n

\n );\n}\n",[],[188,263,278],"23192be3-b80d-429e-b40e-5c2f6cab9d6b","ChatPanel.tsx","229a86b0-87b9-11f1-b2d7-1607ee4eb77e",46,["D",1784937707811],"/** @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.tokensPerSecond != null &&\n `${Math.round(message.meta.tokensPerSecond).toLocaleString()} tok/s`,\n message.meta.roundTripMs != null &&\n `${(message.meta.roundTripMs / 1000).toFixed(2)}s round trip`,\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",[],[188,263,286],"54eff5f0-023e-45e6-9bc5-f4db41569543","App.tsx","019f967f-2c90-70b9-bd1c-3c6a91fd68da",42,["D",1784937685179],"/** @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",[],[188,263,294],"165d8dc7-c163-4232-8e49-8111375de75c",["D",1784936344655],[206,207,208,209,210,211],[188,263],["D",1784936344655],[205,212,213,214],[188],["D",1784936344655],["D",1789474235934],{"_103":102,"_110":106},{"_103":102,"_104":-5,"_105":106,"_18":54,"_107":108,"_109":24},{"_13":88,"_31":89,"_42":41,"_90":43,"_91":92,"_93":94,"_95":49,"_96":97,"_98":99,"_100":44,"_101":102},"ctx",{"_81":-5,"_132":346,"_347":348,"_349":350,"_351":24,"_352":24,"_353":24,"_354":58,"_355":-5,"_356":-7,"_357":-7,"_358":191,"_359":24,"_360":24,"_361":-5,"_362":24,"_363":24,"_364":24,"_365":-5},"ENV",{"_317":318,"_319":320,"_321":89,"_322":323,"_324":325,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345},"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 · v56