`, 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",{"_389":390,"_391":392},"routes/_app.x.$handle.$name",{"_106":105,"_38":51,"_114":96,"_33":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_26":-5,"_126":-5,"_127":-5,"_128":31,"_129":130,"_131":65,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_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":31},"version",69,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","36490093-6a12-47e6-9284-021955a264b2","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",false,"deletedHere","path","budget.ts","latestPath","fileId","9e7a4aa8-b1f9-11f1-a102-1607ee4eb77e","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, in one round trip. A reservation is a single\n * conditional upsert that both checks the cap and moves the ledger, so\n * concurrent requests can't all read the same total and slip through — the\n * check and the increment are the same statement. The correction from the\n * previous call's real `usage.input_tokens` rides along in the next\n * reservation instead of being written on its own, which is what keeps a\n * keystroke at one SQLite request rather than three.\n *\n * SQLite is bookkeeping, not the product. If the ledger can't be reached we\n * let the request through and say so quietly, because refusing a real user's\n * keystroke to protect a fraction of a cent is the wrong trade.\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 *after* the claim, which is what\n * you want to show when refusing one. `unavailable` means the ledger itself\n * couldn't be reached — the caller decides what to do, and this module's own\n * preference is to carry on.\n */\nexport type Reservation =\n | { ok: true; state: BudgetState; estimateTokens: number }\n | { ok: false; state: BudgetState; estimateTokens: number }\n | { ok: false; unavailable: true; error: unknown; 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/**\n * One statement, one round trip: claim `tokens` if the ledger has room for\n * them, and hand back the new total. No row means the cap refused the claim,\n * which is a normal answer rather than an error.\n *\n * The `MAX(0, ...)` on the insert arm keeps a downward correction from going\n * negative; the update arm can't need it, since it only ever adds a positive\n * claim to a total that's already at or above zero.\n */\nasync function claim(tokens: number, calls: number): Promise {\n const capTokens = Math.floor(BUDGET_USD / USD_PER_INPUT_TOKEN);\n const { rows } = 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 = input_tokens + excluded.input_tokens,\n calls = calls + excluded.calls,\n updated_at = excluded.updated_at\n WHERE input_tokens + excluded.input_tokens <= ?\n RETURNING input_tokens, calls`,\n args: [tokens, calls, new Date().toISOString(), capTokens],\n });\n const row = rows[0];\n if (!row) return null;\n return summarize(Number(row.input_tokens), Number(row.calls));\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/**\n * Corrections waiting to be folded into the next reservation. Per isolate, and\n * deliberately allowed to be lost: the estimate is within about a percent, so\n * a delta that never lands is noise rather than a hole in the cap.\n */\nlet pendingTokens = 0;\nlet pendingCalls = 0;\n\n/**\n * Claim room in the budget for one call, or refuse it. Also settles whatever\n * the previous call on this isolate owed, so the ledger stays honest without a\n * write of its own.\n */\nexport async function reserve(estimateTokens: number): Promise {\n // Take the pending correction off the books before the write. If the write\n // fails it goes back, so nothing is silently dropped.\n const owedTokens = pendingTokens;\n const owedCalls = pendingCalls;\n pendingTokens = 0;\n pendingCalls = 0;\n\n try {\n await init();\n const state = await claim(estimateTokens + owedTokens, 1 + owedCalls);\n if (state) return { ok: true, state, estimateTokens };\n // Refused: the correction wasn't applied, so it's still owed. Read the\n // ledger to report where it stands.\n pendingTokens += owedTokens;\n pendingCalls += owedCalls;\n return { ok: false, state: await getBudget(), estimateTokens };\n } catch (error) {\n pendingTokens += owedTokens;\n pendingCalls += owedCalls;\n return { ok: false, unavailable: true, error, estimateTokens };\n }\n}\n\n/**\n * Record what a call actually cost. Nothing is written here — the delta joins\n * the next reservation, which is the whole point of the fold.\n */\nexport function reconcile(\n reservation: Reservation,\n actualTokens: number,\n): void {\n if (!reservation.ok) return;\n pendingTokens += actualTokens - reservation.estimateTokens;\n pendingCalls += 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 const prior = reservation.ok ? reservation.state : null;\n return summarize(\n (prior?.inputTokens ?? 0) + actualTokens,\n (prior?.calls ?? 0) + 1,\n );\n}\n\n/**\n * Ledger trouble is expected under load and isn't worth a stack trace per\n * request: say so once, then just count, and say so again when it clears.\n */\nlet ledgerFailures = 0;\n\nexport function noteLedgerFailure(error: unknown): void {\n ledgerFailures += 1;\n if (ledgerFailures === 1) {\n console.warn(\n `budget ledger unreachable (letting requests through): ${\n error instanceof Error ? error.message : String(error)\n }`,\n );\n }\n}\n\nexport function noteLedgerSuccess(): void {\n if (ledgerFailures === 0) return;\n console.warn(`budget ledger recovered after ${ledgerFailures} failures`);\n ledgerFailures = 0;\n}","/**\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, in one round trip. A reservation is a single\n * conditional upsert that both checks the cap and moves the ledger, so\n * concurrent requests can't all read the same total and slip through — the\n * check and the increment are the same statement. The correction from the\n * previous call's real `usage.input_tokens` rides along in the next\n * reservation instead of being written on its own, which is what keeps a\n * keystroke at one SQLite request rather than three.\n *\n * SQLite is bookkeeping, not the product. If the ledger can't be reached we\n * let the request through and say so quietly, because refusing a real user's\n * keystroke to protect a fraction of a cent is the wrong trade.\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 *after* the claim, which is what\n * you want to show when refusing one. `unavailable` means the ledger itself\n * couldn't be reached — the caller decides what to do, and this module's own\n * preference is to carry on.\n */\nexport type Reservation =\n | { ok: true; state: BudgetState; estimateTokens: number }\n | { ok: false; state: BudgetState; estimateTokens: number }\n | { ok: false; unavailable: true; error: unknown; 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/**\n * One statement, one round trip: claim `tokens` if the ledger has room for\n * them, and hand back the new total. No row means the cap refused the claim,\n * which is a normal answer rather than an error.\n *\n * The `MAX(0, ...)` on the insert arm keeps a downward correction from going\n * negative; the update arm can't need it, since it only ever adds a positive\n * claim to a total that's already at or above zero.\n */\nasync function claim(tokens: number, calls: number): Promise {\n const capTokens = Math.floor(BUDGET_USD / USD_PER_INPUT_TOKEN);\n const { rows } = 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 = input_tokens + excluded.input_tokens,\n calls = calls + excluded.calls,\n updated_at = excluded.updated_at\n WHERE input_tokens + excluded.input_tokens <= ?\n RETURNING input_tokens, calls`,\n args: [tokens, calls, new Date().toISOString(), capTokens],\n });\n const row = rows[0];\n if (!row) return null;\n return summarize(Number(row.input_tokens), Number(row.calls));\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/**\n * Corrections waiting to be folded into the next reservation. Per isolate, and\n * deliberately allowed to be lost: the estimate is within about a percent, so\n * a delta that never lands is noise rather than a hole in the cap.\n */\nlet pendingTokens = 0;\nlet pendingCalls = 0;\n\n/**\n * Claim room in the budget for one call, or refuse it. Also settles whatever\n * the previous call on this isolate owed, so the ledger stays honest without a\n * write of its own.\n */\nexport async function reserve(estimateTokens: number): Promise {\n // Take the pending correction off the books before the write. If the write\n // fails it goes back, so nothing is silently dropped.\n const owedTokens = pendingTokens;\n const owedCalls = pendingCalls;\n pendingTokens = 0;\n pendingCalls = 0;\n\n try {\n await init();\n const state = await claim(estimateTokens + owedTokens, 1 + owedCalls);\n if (state) return { ok: true, state, estimateTokens };\n // Refused: the correction wasn't applied, so it's still owed. Read the\n // ledger to report where it stands.\n pendingTokens += owedTokens;\n pendingCalls += owedCalls;\n return { ok: false, state: await getBudget(), estimateTokens };\n } catch (error) {\n pendingTokens += owedTokens;\n pendingCalls += owedCalls;\n return { ok: false, unavailable: true, error, estimateTokens };\n }\n}\n\n/**\n * Record what a call actually cost. Nothing is written here — the delta joins\n * the next reservation, which is the whole point of the fold.\n */\nexport function reconcile(\n reservation: Reservation,\n actualTokens: number,\n): void {\n if (!reservation.ok) return;\n pendingTokens += actualTokens - reservation.estimateTokens;\n pendingCalls += 0;\n}\n\n/**\n * The ledger as of the end of a call, without re-reading it. Null when the\n * ledger was unreachable: there's no honest number to report, and reporting\n * zero would be worse than reporting nothing.\n */\nexport function afterCall(\n reservation: Reservation,\n actualTokens: number,\n): BudgetState | null {\n if (!reservation.ok) return null;\n return summarize(\n reservation.state.inputTokens + actualTokens,\n reservation.state.calls + 1,\n );\n}\n\n/**\n * Ledger trouble is expected under load and isn't worth a stack trace per\n * request: say so once, then just count, and say so again when it clears.\n */\nlet ledgerFailures = 0;\n\nexport function noteLedgerFailure(error: unknown): void {\n ledgerFailures += 1;\n if (ledgerFailures === 1) {\n console.warn(\n `budget ledger unreachable (letting requests through): ${\n error instanceof Error ? error.message : String(error)\n }`,\n );\n }\n}\n\nexport function noteLedgerSuccess(): void {\n if (ledgerFailures === 0) return;\n console.warn(`budget ledger recovered after ${ledgerFailures} failures`);\n ledgerFailures = 0;\n}","createdAt",["D",1789591284817],"branchVersion","branchId","e9a8eeca-33f2-423b-8459-435fd862f66d","id","c242175a-bb41-49a1-ae69-d9c2930a22f1","typesafe-typewriter",["D",1789580290788],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","16 TypeSafe gut-checks on your writing, on every keystroke","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","01a0ab4c-2b3d-7540-9c29-1bc9fc07b6a1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",3,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","c242175abb4149a1ae69d9c2930a22f1","tursoHostname","c242175abb4149a1ae69d9c2930a22f1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789581048674],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_106":105,"_113":109},"org",{"_106":105,"_107":-5,"_108":109,"_19":61,"_110":111,"_112":31},"branch",{"_13":95,"_38":96,"_49":48,"_97":50,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":51,"_104":105},"isOwned",74,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_38":51,"_44":384,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":63,"_64":65,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":385,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":386,"_90":387,"_92":388,"_94":31},"tree",[226,240,242,243,244,245,246,247,248,249],"files",[226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249],"counts",{"_215":161,"_216":169,"_217":218,"_219":220,"_221":222},"contents",[136,137,138,139,140,141,142,143,144,145],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_49":210,"_38":211,"_36":212,"_149":-5,"_47":48,"_46":169,"_151":65,"_44":213,"_13":161,"_39":208,"_41":-5,"_30":31,"_155":-5,"_33":214},{"_49":203,"_38":204,"_36":205,"_149":-5,"_47":48,"_46":206,"_151":65,"_44":207,"_13":161,"_39":208,"_41":-5,"_30":31,"_155":-5,"_33":209},{"_49":197,"_38":198,"_36":199,"_149":-5,"_47":48,"_46":150,"_151":65,"_44":200,"_13":188,"_39":26,"_41":201,"_30":31,"_155":-5,"_33":202},{"_49":191,"_38":192,"_36":193,"_149":-5,"_47":48,"_46":169,"_151":65,"_44":194,"_13":161,"_39":26,"_41":195,"_30":31,"_155":-5,"_33":196},{"_49":184,"_38":185,"_36":186,"_149":-5,"_47":48,"_46":150,"_151":65,"_44":187,"_13":188,"_39":26,"_41":189,"_30":31,"_155":-5,"_33":190},{"_49":181,"_38":34,"_36":37,"_149":-5,"_47":48,"_46":14,"_151":65,"_44":182,"_13":69,"_39":40,"_41":43,"_30":31,"_155":-5,"_33":183},{"_49":172,"_38":173,"_36":63,"_149":-5,"_47":48,"_46":174,"_151":31,"_44":175,"_13":176,"_39":177,"_41":178,"_30":31,"_155":179,"_33":180},{"_49":164,"_38":165,"_36":166,"_149":-5,"_47":48,"_46":167,"_151":65,"_44":168,"_13":169,"_39":40,"_41":170,"_30":31,"_155":-5,"_33":171},{"_49":157,"_38":158,"_36":159,"_149":-5,"_47":48,"_46":153,"_151":65,"_44":160,"_13":161,"_39":40,"_41":162,"_30":31,"_155":-5,"_33":163},{"_49":146,"_38":147,"_36":148,"_149":-5,"_47":48,"_46":150,"_151":65,"_44":152,"_13":153,"_39":40,"_41":154,"_30":31,"_155":-5,"_33":156},"6f0e29cc-94d1-40df-a6ea-1650f1feb601","typesafe.ts","01a0ab4c-6753-75cd-abb4-c38b1266be86","parentId",63,"latest",["D",1789588765105],2,"/**\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",[147],"b80cfa44-a95f-4548-8364-448001b390cf","rate-limit.ts","01a0ab4c-6753-75cd-abb4-c9431f5c1cce",["D",1789580306255],0,"/**\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}",[158],"b5156b02-3d8c-44cd-a64e-bcf24c35baf9","questions.ts","01a0ab4c-6753-75cd-abb4-c4390c1ac4de",29,["D",1789581324693],1,"/**\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}));",[165],"30d3389d-09b2-4978-bc65-868c9664d4a8","index.ts",68,["D",1789591282646],10,"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 noteLedgerFailure,\n noteLedgerSuccess,\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 // The ledger being unreachable is not the user's problem. Log it once\n // (noteLedgerFailure counts the rest) and answer the request anyway: the\n // most this can cost is a fraction of a cent, and the cap is still there\n // for every request that does reach SQLite.\n if (\"unavailable\" in reservation) {\n noteLedgerFailure(reservation.error);\n } else {\n return c.json({\n error: \"demo budget spent\",\n reason: \"budget\",\n budget: reservation.state,\n }, 429);\n }\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 // A synchronous fold into the next reservation — no write, nothing to await.\n reconcile(reservation, res.usage.input_tokens);\n noteLedgerSuccess();\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 reconcile(reservation, 0);\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","typesafe-demo",[173],"47befb3f-4e71-4cd5-8301-b0ff9ca32a3a",["D",1789591284817],[34],"62f593d7-95a7-415b-b463-8702e46925b6","README.md","01a0ab4c-2b3d-7540-9c29-15c142b22e05",["D",1789588765105],4,"# 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.",[185],"72e70085-7e9f-42f4-8eff-a5b00467fb4f","CHANGELOG.md","01a0ab4c-2b3d-7540-9c29-112bf0c6169f",["D",1789580290788],"# 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 · v69