`, 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",{"_428":429,"_430":431},"routes/_app.x.$handle.$name",{"_104":103,"_32":45,"_113":90,"_27":114,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_20":-5,"_125":126,"_127":128,"_129":25,"_130":131,"_132":59,"_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",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",8,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","budget.ts","latestPath","fileId","01a0ab8b-4b52-710b-af47-04e6f68e088e","name","fileType","script","content","/**\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}","import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport const USD_PER_INPUT_TOKEN = 0.042 / 1_000_000;\nconst configuredBudget = Number(Deno.env.get(\"TYPESAFE_BUDGET_USD\") ?? \"2\");\nexport const BUDGET_USD = Number.isFinite(configuredBudget) && configuredBudget >= 0 ? configuredBudget : 2;\nexport type BudgetState = { budgetUsd: number; spentUsd: number; remainingUsd: number; inputTokens: number; calls: number; exhausted: boolean };\nexport type Reservation = { ok: boolean; state: BudgetState; estimateTokens: number };\nlet schema: Promise | null = null;\nfunction init() {\n return schema ??= sqlite.batch([\n \"CREATE TABLE IF NOT EXISTS budget (id INTEGER PRIMARY KEY CHECK(id = 1), input_tokens INTEGER NOT NULL DEFAULT 0, calls INTEGER NOT NULL DEFAULT 0, updated_at TEXT)\",\n \"INSERT OR IGNORE INTO budget (id, input_tokens, calls) VALUES (1, 0, 0)\",\n ]).catch(err => { schema = null; throw err; });\n}\nexport function estimateInputTokens(stateChars: number, questions: unknown) {\n return Math.ceil(stateChars / 4) + Math.ceil(JSON.stringify(questions).length / 2.7);\n}\nfunction summarize(inputTokens: number, calls: number): BudgetState {\n const spentUsd = inputTokens * USD_PER_INPUT_TOKEN;\n return { budgetUsd: BUDGET_USD, spentUsd, remainingUsd: Math.max(0, BUDGET_USD - spentUsd), inputTokens, calls, exhausted: spentUsd >= BUDGET_USD };\n}\nexport async function getBudget() {\n await init();\n const { rows } = await sqlite.execute(\"SELECT input_tokens, calls FROM budget WHERE id = 1\");\n return summarize(Number(rows[0]?.input_tokens ?? 0), Number(rows[0]?.calls ?? 0));\n}\nexport async function reserve(estimateTokens: number): Promise {\n await init();\n const { rows } = await sqlite.execute({\n sql: \"UPDATE budget SET input_tokens = input_tokens + ?, calls = calls + 1, updated_at = ? WHERE id = 1 AND input_tokens + ? <= ? RETURNING input_tokens, calls\",\n args: [estimateTokens, new Date().toISOString(), estimateTokens, Math.floor(BUDGET_USD / USD_PER_INPUT_TOKEN)],\n });\n if (!rows.length) return { ok: false, state: await getBudget(), estimateTokens };\n return { ok: true, state: summarize(Number(rows[0].input_tokens) - estimateTokens, Number(rows[0].calls) - 1), estimateTokens };\n}\nexport async function reconcile(reservation: Reservation, actualTokens: number) {\n if (!reservation.ok || !Number.isFinite(actualTokens) || actualTokens < 0) return;\n await sqlite.execute({ sql: \"UPDATE budget SET input_tokens = MAX(0, input_tokens + ?), updated_at = ? WHERE id = 1\", args: [actualTokens - reservation.estimateTokens, new Date().toISOString()] });\n}\nexport function afterCall(reservation: Reservation, actualTokens: number) {\n return summarize(reservation.state.inputTokens + actualTokens, reservation.state.calls + 1);\n}\n","createdAt",["D",1789585320910],"branchVersion","branchId","7406ba94-2b00-41a5-90a4-e817922193d8","id","577b7882-c6d5-40a1-8057-98566565f5c4","jevhero",["D",1789584427747],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Text classification game powered by Jev.","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","01a0ab8b-4b52-710b-af47-08915332e7d7","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","577b7882c6d540a1805798566565f5c4","tursoHostname","577b7882c6d540a1805798566565f5c4-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789585320332],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_112":108},"org",{"_104":103,"_105":106,"_107":108,"_18":55,"_109":110,"_111":25},"branch",{"_13":89,"_32":90,"_43":42,"_91":44,"_92":93,"_94":95,"_96":50,"_97":98,"_99":100,"_101":45,"_102":103},"isOwned",101,"main","projectId","forkedBranchId","e9a8eeca-33f2-423b-8459-435fd862f66d","forkedBranchVersion",62,"forkedProjectPrivacy","forkedProjectId","c242175a-bb41-49a1-ae69-d9c2930a22f1","forkedProjectOrgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789625259&sig=b53132424c8ac4befb11e5013cc48d9dc8b81d4be85c95a6103a82d674397c5b","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":423,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":424,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":425,"_84":426,"_86":427,"_88":25},"tree",[228,245,249,250,251,252,253,254,255,256],"files",[228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256],"counts",{"_218":63,"_219":162,"_220":63,"_221":222,"_223":224},"contents",[148,149,150,151,152,153,154,155,156,157],"upstreamProject",{"_43":98,"_32":144,"_52":145,"_54":-5,"_49":50,"_82":146},"upstreamBranch",{"_43":93,"_38":137,"_138":139,"_32":90,"_91":98,"_13":140,"_92":-5,"_94":-5,"_141":142,"_47":-5,"_88":25,"_49":50,"_102":143,"_64":100,"_101":144},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1789580290788],"updatedAt",["D",1789591366294],74,"lockfileKey","1789591367061-esm.town_v_stevekrouse_typesafe-typewriter@74-main","stevekrouse","typesafe-typewriter","16 TypeSafe gut-checks on your writing, on every keystroke",{"_104":143,"_112":147},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_43":213,"_32":214,"_30":215,"_161":-5,"_41":42,"_40":162,"_163":59,"_38":216,"_13":63,"_33":211,"_35":-5,"_24":25,"_166":-5,"_27":217},{"_43":207,"_32":208,"_30":209,"_161":-5,"_41":42,"_40":162,"_163":59,"_38":210,"_13":63,"_33":211,"_35":-5,"_24":25,"_166":-5,"_27":212},{"_43":201,"_32":202,"_30":203,"_161":-5,"_41":42,"_40":162,"_163":25,"_38":204,"_13":63,"_33":20,"_35":205,"_24":25,"_166":-5,"_27":206},{"_43":195,"_32":196,"_30":197,"_161":-5,"_41":42,"_40":162,"_163":59,"_38":198,"_13":63,"_33":20,"_35":199,"_24":25,"_166":-5,"_27":200},{"_43":189,"_32":190,"_30":191,"_161":-5,"_41":42,"_40":162,"_163":25,"_38":192,"_13":63,"_33":20,"_35":193,"_24":25,"_166":-5,"_27":194},{"_43":186,"_32":28,"_30":31,"_161":-5,"_41":42,"_40":14,"_163":59,"_38":187,"_13":162,"_33":34,"_35":37,"_24":25,"_166":-5,"_27":188},{"_43":180,"_32":181,"_30":57,"_161":-5,"_41":42,"_40":162,"_163":25,"_38":182,"_13":63,"_33":183,"_35":184,"_24":25,"_166":45,"_27":185},{"_43":174,"_32":175,"_30":176,"_161":-5,"_41":42,"_40":162,"_163":59,"_38":177,"_13":63,"_33":34,"_35":178,"_24":25,"_166":-5,"_27":179},{"_43":168,"_32":169,"_30":170,"_161":-5,"_41":42,"_40":162,"_163":59,"_38":171,"_13":63,"_33":34,"_35":172,"_24":25,"_166":-5,"_27":173},{"_43":158,"_32":159,"_30":160,"_161":-5,"_41":42,"_40":162,"_163":59,"_38":164,"_13":63,"_33":34,"_35":165,"_24":25,"_166":-5,"_27":167},"1718bfa6-a025-499d-818d-d8784bdbb3ef","typesafe.ts","01a0ab8b-4b52-710b-af47-1471194a7f36","parentId",1,"latest",["D",1789584427747],"/**\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/** 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(\"TYPESAFE_API_KEY\");\n if (!apiKey) throw new Error(\"TYPESAFE_API_KEY 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",[159],"22b937b3-1711-40af-bcde-71357f9d55f7","rate-limit.ts","01a0ab8b-4b52-710b-af47-111506f1f1c8",["D",1789584427747],"/**\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}",[169],"3660ccd0-d752-4ee1-b1bc-5040388f9531","questions.ts","01a0ab8b-4b52-710b-af47-0ef05b74d7ba",["D",1789584427747],"/**\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}));",[175],"c2d2de1f-7e69-4aa0-a99c-7003f3499322","index.ts",["D",1789584427747],"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 { ask } 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// ── 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 travel with the questions so the browser has one source of truth for\n// what exists and how it's laid out.\napp.get(\n \"/api/questions\",\n (c) => c.json({ questions: PUBLIC_QUESTIONS, groups: GROUPS }),\n);\n\napp.post(\"/api/judge\", async (c) => {\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 return c.json({\n error: err instanceof Error ? err.message : String(err),\n budget: await getBudget().catch(() => null),\n }, 502);\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);",[181],"885931e5-0386-41bc-b712-fab19aa7260d",["D",1789585320910],[28],"c109446a-6caa-4319-b6be-62357bbf6eb2","README.md","01a0ab8b-4b52-710b-af47-033e3403550e",["D",1789584427747],"# 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.",[190],"b23f8572-d14b-4ed2-a3be-b58a392b2c04","CHANGELOG.md","01a0ab8b-4b52-710b-af46-fcd42a5708cd",["D",1789584427747],"# 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 · v8