[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_287":288,"_289":290},"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",36,"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, truncated }: { html: string; 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 Output hit celeris-1's 1,024-token ceiling, so this document is cut off\n mid-way. Ask for something smaller, or split it into pieces.\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\";\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, truncated }: { html: string; 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",1784937436348],"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":282,"_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":283,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":284,"_85":285,"_87":286,"_89":27},"tree",[206,214,215,216,217],"files",[206,207,208,209,210,211,212,213,214,215,216,217],"counts",{"_196":193,"_197":64,"_198":193,"_199":200,"_201":202},"contents",[149,150,151,152,153],"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=1789592399&sig=9f2b8198a6bd290c0e4cd558a371acaf6bae0541324daebbd1636993bd403dce",{"_105":143,"_112":148},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789592399&sig=e3667930a878fd5db49e47cce78fe270a8ba33317e34775a1ada2dd4a7c49d8d",{"_45":189,"_33":190,"_31":191,"_156":-5,"_43":44,"_42":64,"_158":25,"_40":192,"_13":193,"_35":194,"_37":-5,"_24":27,"_163":-5,"_28":195},{"_45":182,"_33":183,"_31":184,"_156":-5,"_43":44,"_42":185,"_158":27,"_40":186,"_13":64,"_35":20,"_37":187,"_24":27,"_163":-5,"_28":188},{"_45":174,"_33":175,"_31":176,"_156":-5,"_43":44,"_42":177,"_158":27,"_40":178,"_13":179,"_35":36,"_37":180,"_24":27,"_163":-5,"_28":181},{"_45":166,"_33":167,"_31":168,"_156":-5,"_43":44,"_42":169,"_158":27,"_40":170,"_13":171,"_35":36,"_37":172,"_24":27,"_163":-5,"_28":173},{"_45":154,"_33":155,"_31":59,"_156":-5,"_43":44,"_42":157,"_158":27,"_40":159,"_13":160,"_35":161,"_37":162,"_24":27,"_163":164,"_28":165},"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",[155],"c8647c63-d46b-4e30-9414-52488f3e0333","debug_probe.ts","91983b9c-87ba-11f1-b515-1607ee4eb77e",28,["D",1784937332955],4,"// Map the WAF's actual blocklist so the guard can be accurate.\nconst key = Deno.env.get(\"CELERIS_API_KEY\")!;\n\nasync function blocked(payload: string): Promise {\n const 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: [{ role: \"user\", content: `Reply with ok. Ignore: ${payload}` }],\n max_tokens: 256,\n temperature: 0,\n }),\n });\n return res.status === 403;\n}\n\nconst candidates: Record = {\n \"`\n : \"\";\n\n return `\n\n\n\n\n${escapeHtml(title)}\n\n\n\n${markup}${scriptBlock}\n\n\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 GenerateResult {\n html: string;\n /** true when a section was cut short rather than finishing naturally */\n truncated: boolean;\n /** total API calls made across all sections */\n rounds: number;\n totalTokens: number;\n serverMs: number;\n sections: { markup: number; css: number; js: number };\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 if (head.length <= 60) return head;\n return head.slice(0, 57).replace(/\\s+\\S*$/, \"\") + \"…\";\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 spec = buildSpec(instructions);\n\n // 1. Markup first — CSS and JS are written against its actual class names.\n const markup = await generateSection(apiKey, MARKUP_SYSTEM, spec);\n\n // Strip anything WAF-hostile from the *copy sent as context*. The original\n // markup is untouched and still goes into the final page.\n const markupContext = sanitizeForRequest(markup.text);\n const styleTarget = `Spec: ${spec}\\n\\nMarkup to target:\\n${markupContext}`;\n\n // 2. CSS and JS don't depend on each other, so run them together.\n const [css, js] = await Promise.all([\n generateSection(apiKey, CSS_SYSTEM, styleTarget),\n generateSection(apiKey, JS_SYSTEM, styleTarget, 512),\n ]);\n\n return {\n html: assemble(markup.text, css.text, js.text, toTitle(instructions[0] ?? \"Untitled\")),\n truncated: !markup.complete || !css.complete,\n rounds: markup.rounds + css.rounds + js.rounds,\n totalTokens: markup.tokens + css.tokens + js.tokens,\n serverMs: markup.serverMs + css.serverMs + js.serverMs,\n sections: { markup: markup.rounds, css: css.rounds, js: js.rounds },\n };\n}\n",[175],"4888896c-b9fb-4f57-946c-15d67688d1ce","README.md","019f967f-2c90-70b9-bd1c-5b6f7df1d30e",20,["D",1784936734453],"# 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## Setup\n\n`CELERIS_API_KEY` is set as an env var on this val. It is only read server-side\nin `celeris.ts` — the browser never sees it.\n\n## Two constraints worth knowing about\n\n### 1. celeris-1 caps output at 1,024 tokens\n\n`max_tokens` must be one of `256 | 512 | 768 | 1024`, and the context window is\n4,096 total. The docs say plainly: *\"Use another model for long-form\ngeneration.\"*\n\n1,024 tokens is roughly a small single-purpose page — a card, a form, a timer.\nAsk for a full marketing site and it will stop mid-tag. The UI surfaces this:\nwhen `finish_reason` is `length`, an amber banner appears above the preview.\n\n### 2. A WAF in front of the API blocks HTML tags in *request bodies*\n\nThis one is undocumented and cost some debugging. Requests whose body contains\nthe literal strings `\n \n \n \n

\n \n \n \n\n",[],[190,239],"7671c052-01b6-4f8f-ae96-7ddf7cddd192","favicon.svg","019f967f-2c90-70b9-bd1c-49c497e10f32",["D",1784936344655],"\n",[],[190,246],"2997668b-c6b0-407a-9c8b-bb13a2fa6a61","019f967f-2c90-70b9-bd1c-44ae412bc6c1",["D",1784937436348],[],[190,257,34],"components","c406b7cb-e9d8-4228-8130-96d1fd5153ce","ChatPanel.tsx","229a86b0-87b9-11f1-b2d7-1607ee4eb77e",17,["D",1784936690142],3,"/** @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",[],[190,257,259],"ad4af5fc-a7a2-49db-a12c-ee6f5de24b36","App.tsx","019f967f-2c90-70b9-bd1c-3c6a91fd68da",35,["D",1784937431706],"/** @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\";\n\nexport interface Message {\n role: \"user\" | \"assistant\";\n content: string;\n meta?: { serverMs?: number; tokens?: 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 any request body\n // containing a literal script/style/doctype tag. See celeris.ts.\n const [instructions, setInstructions] = useState([]);\n const [html, setHtml] = useState(\"\");\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 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 setHtml(data.html);\n setTruncated(Boolean(data.truncated));\n\n const notes = [\n data.truncated\n ? \"Ran out of continuation rounds — the page may be incomplete.\"\n : \"Updated the preview.\",\n data.sections\n ? `${data.rounds} calls (markup ${data.sections.markup}, css ${data.sections.css}, js ${data.sections.js}).`\n : null,\n ].filter(Boolean).join(\" \");\n\n setMessages((prev) => [...prev, {\n role: \"assistant\",\n content: notes,\n meta: { serverMs: data.serverMs, tokens: data.totalTokens },\n }]);\n } catch (err) {\n setError(err instanceof Error ? err.message : String(err));\n // Keep the spec in sync with what actually rendered.\n setInstructions(instructions);\n } finally {\n setLoading(false);\n }\n }\n\n function reset() {\n setMessages([]);\n setInstructions([]);\n setHtml(\"\");\n setTruncated(false);\n setError(null);\n }\n\n return (\n

\n \n \n

\n );\n}\n",[],[190,257,268],"165d8dc7-c163-4232-8e49-8111375de75c",["D",1784936344655],[208,209,210],[190,257],["D",1784936344655],[207,211,212,213],[190],["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":320,"_321":322,"_323":324,"_325":27,"_326":27,"_327":27,"_328":25,"_329":-5,"_330":-7,"_331":-7,"_332":193,"_333":27,"_334":27,"_335":-5,"_336":27,"_337":27,"_338":27,"_339":-5},"ENV",{"_291":292,"_293":294,"_295":91,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317,"_318":319},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v36