`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_399":400,"_401":402},"routes/_app.x.$handle.$name",{"_110":109,"_37":49,"_119":96,"_32":120,"_13":14,"_121":-5,"_11":122,"_123":124,"_125":126,"_127":128,"_129":130,"_26":-5,"_131":132,"_133":134,"_135":30,"_136":137,"_138":65,"_139":-5,"_140":-5,"_141":142},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_47":48,"_37":49,"_42":50,"_51":-5,"_52":30,"_53":54,"_55":56,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":30},"version",2,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","5008e97b-e5b2-484d-8412-8b98a2265843","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":33,"_38":39,"_40":41,"_42":43,"_44":14,"_45":46,"_29":30},"previous","deleted",false,"deletedHere","path","kernel.ts","latestPath","fileId","01a0abcf-a6b5-7413-8f55-6a07a5e01800","name","fileType","script","content","// Low-level client for Kernel's browser API (https://www.kernel.sh/docs).\n// Base URL and auth come from the KERNEL_API_KEY env var.\nconst API = \"https://api.onkernel.com\";\nconst KEY = Deno.env.get(\"KERNEL_API_KEY\");\nif (!KEY) throw new Error(\"Missing KERNEL_API_KEY env var\");\n\nexport const API_BASE = API;\n\nexport async function kernelFetch(\n path: string,\n method = \"GET\",\n body?: unknown,\n): Promise<{ status: number; headers: Headers; text: string; arrayBuffer: () => Promise }> {\n const res = await fetch(API + path, {\n method,\n headers: {\n Authorization: `Bearer ${KEY}`,\n ...(body ? { \"Content-Type\": \"application/json\" } : {}),\n },\n body: body ? JSON.stringify(body) : undefined,\n });\n return {\n status: res.status,\n headers: res.headers,\n text: () => res.text(),\n arrayBuffer: () => res.arrayBuffer(),\n };\n}\n\n/** Create a browser session. Returns the session_id. */\nexport async function createBrowser(\n opts: { name?: string; headless?: boolean; startUrl?: string } = {},\n): Promise {\n const r = await kernelFetch(\"/browsers\", \"POST\", {\n headless: opts.headless ?? true,\n name: opts.name,\n // Boot the browser directly at the app under test instead of the new-tab\n // home page (e.g. DuckDuckGo). Navigation is fire-and-forget on Kernel's\n // side, so runPlaywright still navigates/wails on domcontentloaded.\n ...(opts.startUrl ? { start_url: opts.startUrl } : {}),\n });\n const body = await r.text();\n if (r.status !== 200) throw new Error(`createBrowser failed (${r.status}): ${body}`);\n const json = JSON.parse(body);\n return json.session_id;\n}\n\n/** Execute Playwright/TypeScript code against a live browser, with page/context/browser in scope. */\nexport async function runPlaywright(\n sessionId: string,\n code: string,\n timeoutSec = 60,\n): Promise<{ success: boolean; result?: unknown; error?: string; stdout?: string; stderr?: string }> {\n const r = await kernelFetch(`/browsers/${sessionId}/playwright/execute`, \"POST\", {\n code,\n timeout_sec: timeoutSec,\n });\n const body = await r.text();\n if (r.status !== 200) throw new Error(`runPlaywright failed (${r.status}): ${body}`);\n return JSON.parse(body);\n}\n\n/** Capture a screenshot; returns raw PNG bytes. */\nexport async function screenshot(sessionId: string): Promise {\n const r = await kernelFetch(`/browsers/${sessionId}/computer/screenshot`, \"POST\");\n if (r.status !== 200) throw new Error(`screenshot failed (${r.status}): ${await r.text()}`);\n return r.arrayBuffer();\n}\n\n/** Start recording a video of the session. Returns replay_id and view URL. */\nexport async function startReplay(\n sessionId: string,\n opts: { showcase?: boolean } = {},\n): Promise<{ replay_id: string; replay_view_url?: string }> {\n const r = await kernelFetch(`/browsers/${sessionId}/replays`, \"POST\", {});\n const body = await r.text();\n if (r.status !== 201) throw new Error(`startReplay failed (${r.status}): ${body}`);\n return JSON.parse(body);\n}\n\n/** Stop/persist a replay recording. */\nexport async function stopReplay(sessionId: string, replayId: string): Promise {\n const r = await kernelFetch(`/browsers/${sessionId}/replays/${replayId}/stop`, \"POST\");\n if (r.status !== 200) throw new Error(`stopReplay failed (${r.status}): ${await r.text()}`);\n}\n\n/** Download the recorded MP4. Retries briefly while Kernel encodes (202 + Retry-After). */\nexport async function downloadReplay(sessionId: string, replayId: string, retries = 20, delayMs = 1000): Promise {\n for (let i = 0; i < retries; i++) {\n const r = await kernelFetch(`/browsers/${sessionId}/replays/${replayId}`, \"GET\");\n if (r.status === 200) return r.arrayBuffer();\n if (r.status === 202) {\n const retryAfter = Number(r.headers.get(\"Retry-After\") ?? delayMs / 1000);\n await sleep((retryAfter || delayMs / 1000) * 1000);\n continue;\n }\n throw new Error(`downloadReplay failed (${r.status}): ${await r.text()}`);\n }\n throw new Error(\"downloadReplay timed out waiting for video\");\n}\n\n/** Delete a browser session. */\nexport async function destroyBrowser(sessionId: string): Promise {\n const r = await kernelFetch(`/browsers/${sessionId}`, \"DELETE\");\n if (r.status !== 204 && r.status !== 200) throw new Error(`destroyBrowser failed (${r.status}): ${await r.text()}`);\n}\n\nexport function sleep(ms: number): Promise {\n return new Promise((resolve) => setTimeout(resolve, ms));\n}\n","createdAt",["D",1789588907703],"branchVersion","branchId","789b925f-1f04-4496-b61e-c55aa361585d","id","3c438ea3-80e8-4cac-9708-6511f055598d","jev-browser-use",["D",1789588833583],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","restricted","description","Describe a task; Jev decides each step in a KERNEL cloud browser","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/601425b5-d08c-486a-cae2-cbfbdf0cc801/square512?exp=1789614252&sig=96aa088a8ad24ec30177e53e2f0219291bd88632cfd31f81fb90a1ae0c0d594a","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","01a0abce-8571-76e1-8061-dc657cf63b40","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","b2fd4880-5c2e-11f0-9801-5764bf98a432","tursoName","3c438ea380e84cac97086511f055598d","tursoHostname","3c438ea380e84cac97086511f055598d-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789590099209],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_110":109,"_118":114},"org",{"_110":109,"_111":112,"_113":114,"_19":-5,"_115":116,"_117":65},"branch",{"_13":95,"_37":96,"_47":46,"_97":48,"_98":99,"_100":101,"_102":54,"_103":104,"_105":106,"_107":49,"_108":109},"isOwned",282,"main","projectId","forkedBranchId","e9a8eeca-33f2-423b-8459-435fd862f66d","forkedBranchVersion",74,"forkedProjectPrivacy","forkedProjectId","c242175a-bb41-49a1-ae69-d9c2930a22f1","forkedProjectOrgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName","userHandle","kernel","handle","displayName","KERNEL","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/772b82b9-bcf2-4ee8-2b88-3bbabc7f9801/square512?exp=1789614252&sig=38fffda52803bae4b58b787947a6a0a3b7208c4a49f055b8c21243e3bb282d1f","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_37":49,"_42":394,"_51":-5,"_52":30,"_53":54,"_55":56,"_57":58,"_59":60,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":395,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":396,"_90":397,"_92":398,"_94":30},"tree",[240,254,256,257,258,259,260,261,262,263,264],"files",[240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264],"counts",{"_230":69,"_231":168,"_232":69,"_233":234,"_235":236},"contents",[153,154,155,156,157,158,159,160,161,162,163],"upstreamProject",{"_47":104,"_37":149,"_57":150,"_59":-5,"_53":54,"_88":151},"upstreamBranch",{"_47":99,"_42":143,"_144":145,"_37":96,"_97":104,"_13":101,"_98":-5,"_100":-5,"_146":147,"_51":-5,"_94":30,"_53":54,"_108":148,"_70":106,"_107":149},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1789580290788],"updatedAt",["D",1789591366294],"lockfileKey","1789591367061-esm.town_v_stevekrouse_typesafe-typewriter@74-main","stevekrouse","typesafe-typewriter","16 TypeSafe gut-checks on your writing, on every keystroke",{"_110":148,"_118":152},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_47":225,"_37":226,"_35":227,"_167":-5,"_45":46,"_44":168,"_169":65,"_42":228,"_13":69,"_38":223,"_40":-5,"_29":30,"_172":-5,"_32":229},{"_47":219,"_37":220,"_35":221,"_167":-5,"_45":46,"_44":168,"_169":65,"_42":222,"_13":69,"_38":223,"_40":-5,"_29":30,"_172":-5,"_32":224},{"_47":213,"_37":214,"_35":215,"_167":-5,"_45":46,"_44":168,"_169":30,"_42":216,"_13":69,"_38":26,"_40":217,"_29":30,"_172":-5,"_32":218},{"_47":207,"_37":208,"_35":209,"_167":-5,"_45":46,"_44":168,"_169":30,"_42":210,"_13":69,"_38":26,"_40":211,"_29":30,"_172":-5,"_32":212},{"_47":201,"_37":202,"_35":203,"_167":-5,"_45":46,"_44":168,"_169":30,"_42":204,"_13":69,"_38":26,"_40":205,"_29":30,"_172":-5,"_32":206},{"_47":195,"_37":196,"_35":197,"_167":-5,"_45":46,"_44":168,"_169":30,"_42":198,"_13":69,"_38":39,"_40":199,"_29":30,"_172":-5,"_32":200},{"_47":189,"_37":190,"_35":63,"_167":-5,"_45":46,"_44":168,"_169":30,"_42":191,"_13":69,"_38":192,"_40":193,"_29":30,"_172":49,"_32":194},{"_47":186,"_37":33,"_35":36,"_167":-5,"_45":46,"_44":14,"_169":30,"_42":187,"_13":69,"_38":39,"_40":41,"_29":30,"_172":-5,"_32":188},{"_47":180,"_37":181,"_35":182,"_167":-5,"_45":46,"_44":168,"_169":30,"_42":183,"_13":69,"_38":39,"_40":184,"_29":30,"_172":-5,"_32":185},{"_47":174,"_37":175,"_35":176,"_167":-5,"_45":46,"_44":168,"_169":30,"_42":177,"_13":69,"_38":39,"_40":178,"_29":30,"_172":-5,"_32":179},{"_47":164,"_37":165,"_35":166,"_167":-5,"_45":46,"_44":168,"_169":65,"_42":170,"_13":69,"_38":39,"_40":171,"_29":30,"_172":-5,"_32":173},"8b664cdb-aa06-4f54-a1b8-2b0844cc483e","typesafe.ts","01a0abce-8571-76e1-8061-e98d955a6ea6","parentId",1,"latest",["D",1789588833583],"/**\n * Minimal TypeSafe (System One) client.\n * Docs: https://docs.typesafe.ai/api\n *\n * One POST, one state, N typed questions, N typed answers.\n */\n\nconst ENDPOINT = \"https://api.typesafe.ai/v1/systemone\";\n\n/** Override with the TYPESAFE_MODEL env var to swap models without a deploy. */\nexport const MODEL = Deno.env.get(\"TYPESAFE_MODEL\") ?? \"jev-latest\";\n\nexport type NoulQuestion = {\n type: \"noul\";\n instructions: string;\n criteria?: { true?: string; false?: string };\n};\n\nexport type ChoiceQuestion = {\n type: \"choice\";\n instructions: string;\n criteria: Record;\n};\n\nexport type ScoreQuestion = {\n type: \"score\";\n instructions: string;\n criteria: string[];\n};\n\nexport type Question = NoulQuestion | ChoiceQuestion | ScoreQuestion;\n\nexport type NoulAnswer = { type: \"noul\"; noul: number };\n\nexport type ChoiceAnswer = {\n type: \"choice\";\n choice: string;\n probabilities: Record;\n confidence: number;\n};\n\nexport type ScoreAnswer = {\n type: \"score\";\n score: number;\n legend: Record;\n probabilities: Record;\n confidence: number;\n};\n\nexport type Answer = NoulAnswer | ChoiceAnswer | ScoreAnswer;\n\nexport type SystemOneResponse = {\n model: string;\n answers: Record;\n usage: { input_tokens: number; output_tokens: number };\n};\n\n/** The env var this client needs. Exported so the UI can name it. */\nexport const API_KEY_VAR = \"TYPESAFE_API_KEY\";\n\n/** Where to get one. */\nexport const API_KEY_CONSOLE_URL = \"https://console.typesafe.ai/settings/keys\";\n\n/**\n * Whether this val has a key to call TypeSafe with. Trims rather than merely\n * testing presence: a var that exists holding an empty string is the normal\n * state of a fresh remix, and is just as unusable as a missing one.\n */\nexport function isConfigured(): boolean {\n return !!Deno.env.get(API_KEY_VAR)?.trim();\n}\n\n/** Ask a batch of typed questions about a single piece of state. */\nexport async function ask(\n state: unknown,\n questions: Record,\n { timeoutMs = 10_000 }: { timeoutMs?: number } = {},\n): Promise {\n const apiKey = Deno.env.get(API_KEY_VAR)?.trim();\n if (!apiKey) throw new Error(`${API_KEY_VAR} is not set on this val`);\n\n const res = await fetch(ENDPOINT, {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${apiKey}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ state, model: MODEL, questions }),\n signal: AbortSignal.timeout(timeoutMs),\n });\n\n if (!res.ok) {\n const body = await res.text();\n throw new Error(`TypeSafe ${res.status}: ${body.slice(0, 300)}`);\n }\n\n return await res.json() as SystemOneResponse;\n}","label",[165],"808e7952-d3ab-4a2b-81a0-d514e5e77a0f","rate-limit.ts","01a0abce-8571-76e1-8061-e5086f72225b",["D",1789588833583],"/**\n * Best-effort in-memory rate limit so a public demo can't drain the API budget.\n * Each isolate keeps its own window, so the effective limit is a bit looser\n * than the numbers below. Good enough for a demo; swap for sqlite if it matters.\n */\n\nconst hits = new Map();\nlet globalHits: number[] = [];\n\nexport type LimitResult =\n | { ok: true }\n | { ok: false; reason: \"per-key\" | \"global\"; retryAfterMs: number };\n\nexport function checkRateLimit(\n key: string,\n { perKey = 600, global = 6000, windowMs = 60_000 } = {},\n): LimitResult {\n const now = Date.now();\n const cutoff = now - windowMs;\n\n const keyHits = (hits.get(key) ?? []).filter((t) => t > cutoff);\n globalHits = globalHits.filter((t) => t > cutoff);\n\n if (keyHits.length >= perKey) {\n return { ok: false, reason: \"per-key\", retryAfterMs: keyHits[0] + windowMs - now };\n }\n if (globalHits.length >= global) {\n return { ok: false, reason: \"global\", retryAfterMs: globalHits[0] + windowMs - now };\n }\n\n keyHits.push(now);\n globalHits.push(now);\n hits.set(key, keyHits);\n\n // Crude memory guard for a long-lived isolate.\n if (hits.size > 5000) hits.clear();\n\n return { ok: true };\n}",[175],"6e0c4e18-8f60-4589-b8d8-85dbb7824166","questions.ts","01a0abce-8571-76e1-8061-e2346d14972e",["D",1789588833583],"/**\n * The 16 gut-checks. One question = one fast, well-scoped judgment.\n * All 16 go out in a single API call.\n */\nimport type { Question } from \"./typesafe.ts\";\n\nexport type GroupId = \"what\" | \"lands\" | \"who\";\n\nexport type QuestionSpec = {\n id: string;\n label: string;\n group: GroupId;\n question: Question;\n};\n\n/**\n * Group order is display order. \"How it lands\" leads because it's the part\n * people screenshot; the literal-content checks read as a warm-up, not the\n * headline. Sent to the browser by /api/questions, so this is the only copy.\n */\nexport const GROUPS: { id: GroupId; title: string; blurb: string }[] = [\n { id: \"lands\", title: \"How it lands\", blurb: \"How a reader is likely to take it.\" },\n { id: \"what\", title: \"What it is\", blurb: \"The literal content of the text.\" },\n { id: \"who\", title: \"Who it's for\", blurb: \"The register and audience it reads as.\" },\n];\n\nexport const SPECS: QuestionSpec[] = [\n // ── What it is ────────────────────────────────────────────────\n {\n id: \"asks_question\",\n label: \"Asks a question\",\n group: \"what\",\n question: {\n type: \"noul\",\n instructions: \"Does the text ask a question?\",\n },\n },\n {\n id: \"asks_for_action\",\n label: \"Asks for action\",\n group: \"what\",\n question: {\n type: \"noul\",\n instructions: \"Does the text ask the reader to do something?\",\n },\n },\n {\n id: \"makes_promise\",\n label: \"Makes a promise\",\n group: \"what\",\n question: {\n type: \"noul\",\n instructions:\n \"Does the text promise that the writer will do something in the future?\",\n },\n },\n {\n id: \"states_opinion\",\n label: \"States an opinion\",\n group: \"what\",\n question: {\n type: \"noul\",\n instructions: \"Does the text assert an opinion rather than a fact?\",\n },\n },\n {\n id: \"checkable_claim\",\n label: \"Checkable claim\",\n group: \"what\",\n question: {\n type: \"noul\",\n instructions:\n \"Does the text make a factual claim that could be checked against a source?\",\n },\n },\n {\n id: \"names_specifics\",\n label: \"Names specifics\",\n group: \"what\",\n question: {\n type: \"noul\",\n instructions:\n \"Does the text name a specific number, date, person, or place?\",\n },\n },\n\n // ── How it lands ──────────────────────────────────────────────\n {\n id: \"reads_ai_written\",\n label: \"Reads AI-written\",\n group: \"lands\",\n question: {\n type: \"noul\",\n instructions:\n \"Does the text read as if it was written by an AI assistant?\",\n criteria: {\n true: \"Characteristic AI assistant phrasing\",\n false: \"Reads like a person wrote it\",\n },\n },\n },\n {\n id: \"passive_aggressive\",\n label: \"Passive-aggressive\",\n group: \"lands\",\n question: {\n type: \"noul\",\n instructions:\n \"Would a reasonable reader plausibly take this text as passive-aggressive?\",\n criteria: {\n true: \"Plausibly reads as passive-aggressive\",\n false: \"Reads as straightforward\",\n },\n },\n },\n {\n id: \"expresses_emotion\",\n label: \"Expresses emotion\",\n group: \"lands\",\n question: {\n type: \"noul\",\n instructions: \"Does the text express a feeling or emotional state?\",\n },\n },\n {\n id: \"starts_argument\",\n label: \"Would start an argument\",\n group: \"lands\",\n question: {\n type: \"noul\",\n instructions:\n \"If posted publicly, would this text be likely to start an argument?\",\n },\n },\n {\n id: \"gets_a_reply\",\n label: \"Would get a reply\",\n group: \"lands\",\n question: {\n type: \"noul\",\n instructions:\n \"If sent to a stranger, would this text be likely to get a reply?\",\n },\n },\n {\n id: \"tone\",\n label: \"Tone\",\n group: \"lands\",\n question: {\n type: \"score\",\n instructions: \"What is the emotional tone of the text?\",\n criteria: [\"Hostile\", \"Cold\", \"Neutral\", \"Warm\", \"Effusive\"],\n },\n },\n {\n id: \"conviction\",\n label: \"Conviction\",\n group: \"lands\",\n question: {\n type: \"score\",\n instructions: \"How much conviction does the text carry?\",\n criteria: [\n \"Hedging, no commitment\",\n \"Tentative\",\n \"Measured\",\n \"Confident\",\n \"Absolutely certain\",\n ],\n },\n },\n {\n id: \"urgency\",\n label: \"Urgency\",\n group: \"lands\",\n question: {\n type: \"score\",\n instructions: \"How much time pressure does the text convey?\",\n criteria: [\n \"No time pressure\",\n \"Whenever convenient\",\n \"Soon\",\n \"Today\",\n \"Right now\",\n ],\n },\n },\n\n // ── Who it's for ──────────────────────────────────────────────\n {\n id: \"audience\",\n label: \"Audience\",\n group: \"who\",\n question: {\n type: \"choice\",\n instructions: \"Who is the text written for?\",\n criteria: {\n friend: \"A friend or peer\",\n colleague: \"A coworker\",\n customer: \"A customer or client\",\n public: \"The general public\",\n self: \"A note the writer made for themselves\",\n },\n },\n },\n {\n id: \"formality\",\n label: \"Formality\",\n group: \"who\",\n question: {\n type: \"score\",\n instructions: \"How formal is the register of the text?\",\n criteria: [\n \"Texting a friend\",\n \"Casual\",\n \"Neutral\",\n \"Professional\",\n \"Legal document\",\n ],\n },\n },\n];\n\nexport const QUESTIONS: Record = Object.fromEntries(\n SPECS.map((s) => [s.id, s.question]),\n);\n\n/** What the browser needs to draw the meters. */\nexport const PUBLIC_QUESTIONS = SPECS.map((s) => ({\n id: s.id,\n label: s.label,\n group: s.group,\n type: s.question.type,\n criteria: s.question.type === \"noul\" ? null : s.question.criteria,\n}));",[181],"3b24a107-cddb-4cf2-8493-ec2a473b9294",["D",1789588907703],[33],"7153dd80-3e6c-4ed6-8529-a2f9aff46285","index.ts",["D",1789588833583],"http","import { hotReload, parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport {\n afterCall,\n estimateInputTokens,\n getBudget,\n reconcile,\n reserve,\n} from \"./budget.ts\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { GROUPS, PUBLIC_QUESTIONS, QUESTIONS } from \"./questions.ts\";\nimport { checkRateLimit } from \"./rate-limit.ts\";\nimport { API_KEY_CONSOLE_URL, API_KEY_VAR, ask, isConfigured } from \"./typesafe.ts\";\n\n/** TypeSafe is fast; the cap is about not sending a novel per keystroke. */\nconst MAX_CHARS = 4000;\n\nconst app = new Hono();\n\n/**\n * What the browser needs in order to explain a val with no key: whether there\n * is one, and where to put it. The env var editor URL is derived from the val\n * itself, so a fork sends people to its own settings rather than to ours.\n *\n * Nothing secret goes over the wire — only whether the gap exists.\n */\nfunction setupState() {\n return {\n configured: isConfigured(),\n keyVar: API_KEY_VAR,\n envUrl: `${parseVal().links.self.val}/environment-variables?key=${API_KEY_VAR}`,\n consoleUrl: API_KEY_CONSOLE_URL,\n };\n}\n\n// ── Shell ───────────────────────────────────────────────────────\n// Never cached, so it can stamp the current version into each asset URL.\napp.get(\"/\", (c) => c.html(Root()));\n\n// The version-addressed asset URLs Root() stamps, cached immutably.\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ── API ─────────────────────────────────────────────────────────\n// Groups and setup state travel with the questions so the browser has one\n// source of truth for what exists, how it's laid out, and whether this val is\n// actually able to answer.\napp.get(\n \"/api/questions\",\n (c) => c.json({ questions: PUBLIC_QUESTIONS, groups: GROUPS, setup: setupState() }),\n);\n\napp.post(\"/api/judge\", async (c) => {\n // No key, no call. Checked before the rate limiter and the budget so a val\n // that can't answer spends nothing — and answered as 503 rather than 502,\n // because the CDN swaps a 502 from here for its own HTML error page, which\n // is what the client used to hit as `Unexpected token '<'`.\n if (!isConfigured()) {\n return c.json({\n error: `${API_KEY_VAR} is not set on this val`,\n reason: \"unconfigured\",\n setup: setupState(),\n }, 503);\n }\n\n const body = await c.req.json().catch(() => null);\n const text = typeof body?.text === \"string\" ? body.text : \"\";\n if (!text.trim()) return c.json({ error: \"no text to judge\" }, 400);\n\n const ip = c.req.header(\"x-forwarded-for\")?.split(\",\")[0]?.trim() ||\n c.req.header(\"x-real-ip\") || \"unknown\";\n const limit = checkRateLimit(ip);\n if (!limit.ok) return c.json({ error: \"rate limited\", reason: limit.reason }, 429);\n\n // Two caps with different jobs: the rate limit above stops a burst, the\n // budget below stops the demo from ever costing more than BUDGET_USD total.\n const state = text.slice(0, MAX_CHARS);\n const reservation = await reserve(estimateInputTokens(state.length, QUESTIONS));\n if (!reservation.ok) {\n return c.json({\n error: \"demo budget spent\",\n reason: \"budget\",\n budget: reservation.state,\n }, 429);\n }\n\n const started = performance.now();\n try {\n // One call. All 16 questions, evaluated in parallel against the same state.\n const res = await ask(state, QUESTIONS);\n await reconcile(reservation, res.usage.input_tokens).catch((err) =>\n console.error(\"budget reconcile failed:\", err)\n );\n return c.json({\n answers: res.answers,\n usage: res.usage,\n model: res.model,\n budget: afterCall(reservation, res.usage.input_tokens),\n truncated: text.length > MAX_CHARS,\n serverMs: Math.round(performance.now() - started),\n });\n } catch (err) {\n // A call we watched fail wasn't billed, so hand the reservation back. A\n // request that timed out may still have been charged, but that's ~$0.0001.\n await reconcile(reservation, 0).catch(() => {});\n console.error(\"typesafe error:\", err);\n // 500, not the 502 this used to answer with: see the note above.\n return c.json({\n error: err instanceof Error ? err.message : String(err),\n reason: \"upstream\",\n budget: await getBudget().catch(() => null),\n }, 500);\n }\n});\n\n// Unwrap and rethrow Hono errors as the original error.\napp.onError((err) => Promise.reject(err));\n\nexport default hotReload(app.fetch);\n",[190],"575c0099-41c4-472e-860f-3a76d4d0874d","budget.ts","01a0abce-8571-76e1-8061-db4c242eaf56",["D",1789588833583],"/**\n * A hard ceiling on what this demo can spend at TypeSafe.\n *\n * Jev (System One) bills $0.042 per 1M input tokens and nothing at all for\n * output, so the whole budget is a function of input tokens. The running total\n * lives in this val's SQLite database: in-memory counters don't survive Val\n * Town's serverless instances, so a cap that only lives in memory isn't a cap.\n *\n * Reserve-then-reconcile: charge a conservative estimate before the call, so a\n * burst of concurrent requests can't all read the same total and slip through,\n * then correct the ledger with the real `usage.input_tokens` from the response.\n * The estimate only has to be close, because the correction lands right after.\n */\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n/** Jev list price, i.e. $42 per billion input tokens. Output tokens are free. */\nexport const USD_PER_INPUT_TOKEN = 0.042 / 1_000_000;\n\n/** Lifetime budget for this demo. Override with TYPESAFE_BUDGET_USD. */\nexport const BUDGET_USD = Number(Deno.env.get(\"TYPESAFE_BUDGET_USD\") ?? \"2\");\n\n/**\n * Calibrated against real responses (see tests/budget.ts). Prose runs about 4\n * characters per token; the question JSON is denser — lots of punctuation and\n * short keys — and comes in nearer 2.7. Measured: a 70-char state with all 16\n * questions bills 883 input tokens, and this estimates 877.\n */\nconst STATE_CHARS_PER_TOKEN = 4;\nconst QUESTION_CHARS_PER_TOKEN = 2.7;\n\n/** Cheap pre-flight token estimate for one call. Not exact, and doesn't need to be. */\nexport function estimateInputTokens(\n stateChars: number,\n questions: unknown,\n): number {\n return Math.ceil(stateChars / STATE_CHARS_PER_TOKEN) +\n Math.ceil(JSON.stringify(questions).length / QUESTION_CHARS_PER_TOKEN);\n}\n\nexport type BudgetState = {\n budgetUsd: number;\n spentUsd: number;\n remainingUsd: number;\n inputTokens: number;\n calls: number;\n exhausted: boolean;\n};\n\n/**\n * A claim on the budget. `state` is the ledger *before* the call, which is what\n * you want to show when refusing one.\n */\nexport type Reservation =\n | { ok: true; state: BudgetState; estimateTokens: number }\n | { ok: false; state: BudgetState; estimateTokens: number };\n\nconst SCHEMA = `CREATE TABLE IF NOT EXISTS budget (\n id INTEGER PRIMARY KEY CHECK (id = 1),\n input_tokens INTEGER NOT NULL DEFAULT 0,\n calls INTEGER NOT NULL DEFAULT 0,\n updated_at TEXT\n)`;\n\nlet schema: Promise | null = null;\n\nfunction init(): Promise {\n if (!schema) {\n schema = sqlite.execute(SCHEMA).catch((err) => {\n schema = null; // let the next request try again\n throw err;\n });\n }\n return schema;\n}\n\nfunction summarize(inputTokens: number, calls: number): BudgetState {\n const spentUsd = inputTokens * USD_PER_INPUT_TOKEN;\n return {\n budgetUsd: BUDGET_USD,\n spentUsd,\n remainingUsd: Math.max(0, BUDGET_USD - spentUsd),\n inputTokens,\n calls,\n exhausted: spentUsd >= BUDGET_USD,\n };\n}\n\n/** Move the ledger. Clamped at zero so a downward correction can't go negative. */\nasync function add(tokens: number, calls: number): Promise {\n await init();\n await sqlite.execute({\n sql: `INSERT INTO budget (id, input_tokens, calls, updated_at)\n VALUES (1, MAX(0, ?), ?, ?)\n ON CONFLICT (id) DO UPDATE SET\n input_tokens = MAX(0, input_tokens + ?),\n calls = calls + ?,\n updated_at = excluded.updated_at`,\n args: [tokens, calls, new Date().toISOString(), tokens, calls],\n });\n}\n\nexport async function getBudget(): Promise {\n await init();\n const { rows } = await sqlite.execute(\n \"SELECT input_tokens, calls FROM budget WHERE id = 1\",\n );\n const row = rows[0];\n return summarize(Number(row?.input_tokens ?? 0), Number(row?.calls ?? 0));\n}\n\n/** Claim room in the budget for one call, or refuse it. */\nexport async function reserve(estimateTokens: number): Promise {\n const state = await getBudget();\n const estimateUsd = estimateTokens * USD_PER_INPUT_TOKEN;\n if (state.exhausted || state.spentUsd + estimateUsd > BUDGET_USD) {\n return { ok: false, state, estimateTokens };\n }\n await add(estimateTokens, 1);\n return { ok: true, state, estimateTokens };\n}\n\n/** Swap a reservation's estimate for what the call actually cost. */\nexport async function reconcile(\n reservation: Reservation,\n actualTokens: number,\n): Promise {\n if (!reservation.ok) return;\n const delta = actualTokens - reservation.estimateTokens;\n if (delta !== 0) await add(delta, 0);\n}\n\n/** The ledger as of the end of a call, without re-reading it. */\nexport function afterCall(\n reservation: Reservation,\n actualTokens: number,\n): BudgetState {\n return summarize(\n reservation.state.inputTokens + actualTokens,\n reservation.state.calls + 1,\n );\n}",[196],"dbe10f1b-b21f-423f-8c1d-d5683ff88a2e","README.md","01a0abce-8571-76e1-8061-d5a5e82286cc",["D",1789588833583],"# TypeSafe Typewriter\n\n16 typed questions about whatever you're typing, re-asked on **every keystroke**.\n\n[Try it](url:index.ts)\n\n[TypeSafe](https://docs.typesafe.ai)'s Jev is a \"System One\" model. You send it a\npiece of state and a map of typed questions, and it returns typed answers:\n\n| Question | Returns |\n| --- | --- |\n| `choice` | one option from a list you define, plus a probability for every option |\n| `score` | a position along an ordered rubric you define, plus the distribution |\n| `noul` | the probability that a statement is true |\n\nNo text generation, no parsing, no recovering a value from prose. Every answer is\nconstrained to the options you supplied, and comes back with a probability\ndistribution your code can threshold, sort, or route on.\n\nThe interesting property is that it's **fast** — fast enough to sit inside a UI\nloop. So this demo asks all 16 questions in a single API call and re-asks them on\nevery keystroke.\n\n## What it demonstrates\n\n- **Fan-out is nearly free.** All 16 questions go out in one request. Adding\n questions barely moves the response time, because each one is evaluated in\n parallel against the same state.\n- **The distribution is the product.** The bars aren't decoration — they're the\n full probability vector. A `score` answer of 2.77 means \"77% Warm, 23%\n Neutral\", and the panel shows exactly that.\n- **Code owns the rendering.** The model returns numbers. The bars are CSS. There\n is no prompt that says \"output a chart\".\n- **Speed changes the design.** At a few hundred milliseconds this is a live\n instrument panel, not a form you submit. A keystroke re-asks all 16 questions.\n\n## How it works\n\n```mermaid\nsequenceDiagram\n participant B as Browser\n participant H as index.ts (Hono)\n participant T as TypeSafe\n B->>H: POST /api/judge { text }\n H->>H: reserve ~900 tokens against the $2 budget\n H->>T: POST /v1/systemone { state, 16 questions }\n T-->>H: 11 noul + 4 score + 1 choice\n H->>H: reconcile the ledger with usage.input_tokens\n H-->>B: answers, usage, budget, serverMs\n B->>B: redraw 16 meters\n```\n\nThe client debounces 120ms, cancels the pending request when you type again\n(`AbortController`), and keeps showing the previous answers while the next batch\nis in flight — so the panel never flickers to empty.\n\n## The questions\n\nThree groups, all defined in [`questions.ts`](url:questions.ts):\n\n- **What it is** — asks a question, asks for action, makes a promise, states an\n opinion, checkable claim, names specifics\n- **How it lands** — reads AI-written, passive-aggressive, expresses emotion,\n would start an argument, would get a reply, tone, conviction, urgency\n- **Who it's for** — audience, formality\n\nAdding one is a single entry in that file. The browser renders whatever the API\nreports, so there's nothing else to update.\n\n## Files\n\nSee [`AGENTS.md`](url:AGENTS.md) for the file map.\n\n## Cost and caps\n\nJev bills **$0.042 per 1M input tokens** and nothing at all for output, so a\ncall costs only what you send it. A 16-question call on a short sentence bills\n~900 input tokens — about **$0.00004**, or 25,000 calls to the dollar.\n\nThat cheapness is the risk. At a 120ms debounce a single open tab can ask a few\nhundred times a minute, so a public link is a spend you can't see. `POST\n/api/judge` is capped twice over, and the two caps do different jobs:\n\n| Cap | Lives in | Stops |\n| --- | --- | --- |\n| 600/min per IP, 6000/min globally | `rate-limit.ts`, in memory | a burst from one tab or one scraper |\n| **$2.00 lifetime** | `budget.ts`, in SQLite | the demo ever costing more than $2, however it's hit |\n\nThe budget is the real cap. It's one row in the val's SQLite database, so it\nsurvives isolates, cold starts and deploys — an in-memory counter wouldn't be a\ncap at all. Each call reserves a token estimate before it goes out (so a burst of\nconcurrent requests can't all read the same total and slip through) and then\ncorrects the ledger with the `usage.input_tokens` that came back. A call we\nwatched fail hands its reservation back.\n\nWhen the budget is spent, `/api/judge` answers 429 with the ledger in the body,\nand the client stops asking on its own — the panel freezes on the last answers\nand says what the $2 bought, rather than filling with errors.\n\nSet `TYPESAFE_BUDGET_USD` to change the cap. Current spend is in the app's footer,\nin the response bodies, and in `SELECT * FROM budget`.\n\n## Notes\n\n- Text is capped at 4000 characters.\n- `TYPESAFE_API_KEY` is the only required environment variable. Without it the\n page says so up front — `/api/questions` reports whether a key exists, so the\n panel shows what's missing and asks nothing, instead of failing on the first\n keystroke.",[202],"ea0e4a11-af80-4c09-9c93-3546e6bb2320","CHANGELOG.md","01a0abce-8571-76e1-8061-d1271e25700f",["D",1789588833583],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n

Diff · v2