TypeSafe Typewriter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_335":336,"_337":338},"routes/_app.x.$handle.$name",{"_112":111,"_38":51,"_121":98,"_33":122,"_13":14,"_123":-5,"_11":124,"_125":126,"_127":128,"_129":130,"_131":132,"_26":-5,"_133":134,"_135":136,"_137":55,"_138":139,"_140":31,"_141":-5,"_142":-5,"_143":144},"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":55,"_56":57,"_58":59,"_60":61,"_62":63,"_19":64,"_65":66,"_67":31,"_68":-5,"_69":-5,"_70":71,"_72":73,"_74":75,"_76":77,"_78":79,"_80":-5,"_81":82,"_83":82,"_84":85,"_86":85,"_87":85,"_88":82,"_89":82,"_90":91,"_92":93,"_94":95,"_96":55},"version",10,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","5008e97b-e5b2-484d-8412-8b98a2265843","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",true,"deletedHere","path","frontend/lib/useChanges.ts","latestPath","fileId","01a0abce-8571-76e1-8061-a95157339b91","name","useChanges.ts","fileType","script","content","import { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { deltaText, isMeaningful } from \"./display.ts\";\nimport type { Answer, QuestionMeta } from \"./types.ts\";\n\n/** How long a row stays lit after a meaningful change. */\nconst HOLD_MS = 1800;\n\nexport type Changes = {\n changed: Record;\n delta: Record;\n};\n\nconst NONE: Changes = { changed: {}, delta: {} };\n\n/**\n * Watch the answers and light up the rows whose judgment actually moved. This\n * is the whole demo: without it, 16 bars twitch at once and the eye has nothing\n * to follow. Rows stay lit for HOLD_MS, so a change is visible even at typing\n * speed.\n */\nexport function useChanges(\n answers: Record | undefined,\n meta: QuestionMeta[],\n): Changes {\n const prev = useRef>({});\n const timers = useRef>>({});\n const [state, setState] = useState(NONE);\n\n useEffect(() => {\n if (!answers) return;\n\n const changed: string[] = [];\n const delta: Record = {};\n for (const m of meta) {\n const before = prev.current[m.id];\n const after = answers[m.id];\n if (!isMeaningful(before, after)) continue;\n changed.push(m.id);\n const text = deltaText(m, before!, after!);\n if (text) delta[m.id] = text;\n }\n prev.current = { ...answers };\n if (!changed.length) return;\n\n setState((s) => ({\n changed: { ...s.changed, ...Object.fromEntries(changed.map((id) => [id, true])) },\n delta: { ...s.delta, ...delta },\n }));\n\n // Deliberately not cleaned up on re-run: a row lit at t=0 must still be lit\n // at t=200ms, when the next answer arrives and this effect runs again.\n for (const id of changed) {\n clearTimeout(timers.current[id]);\n timers.current[id] = setTimeout(() => {\n setState((s) => {\n const next = { ...s.changed };\n delete next[id];\n return { ...s, changed: next };\n });\n }, HOLD_MS);\n }\n }, [answers, meta]);\n\n return state;\n}","createdAt",["D",1789588937944],"branchVersion","branchId","789b925f-1f04-4496-b61e-c55aa361585d","id","3c438ea3-80e8-4cac-9708-6511f055598d","jev-browser-use",["D",1789588833583],"deletedAt","legacyEnvVars",false,"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=1789617345&sig=0a35a2ffce60d2df156af9fd00b92e748e897fdef4d65a42cb541bc2e04381d4","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","01a0abce-8571-76e1-8061-dc657cf63b40","pinPreview","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",{"_112":111,"_120":116},"org",{"_112":111,"_113":114,"_115":116,"_19":-5,"_117":118,"_119":31},"branch",{"_13":97,"_38":98,"_49":48,"_99":50,"_100":101,"_102":103,"_104":57,"_105":106,"_107":108,"_109":51,"_110":111},"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=1789617345&sig=38287356c056282f6599fc44189f166bcaba034d86bd642996229e3fec879e97","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_49":50,"_38":51,"_44":330,"_53":-5,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_19":64,"_65":66,"_67":31,"_68":-5,"_69":-5,"_70":71,"_72":73,"_74":75,"_76":77,"_78":331,"_80":-5,"_81":82,"_83":82,"_84":85,"_86":85,"_87":85,"_88":82,"_89":82,"_90":332,"_92":333,"_94":334,"_96":55},"tree",[232,240,242,243,244,245,246,247,248],"files",[232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248],"counts",{"_222":71,"_223":168,"_224":71,"_225":226,"_227":228},"contents",[155,156,157,158,159,160,161,162,163],"upstreamProject",{"_49":106,"_38":151,"_60":152,"_62":-5,"_56":57,"_90":153},"upstreamBranch",{"_49":101,"_44":145,"_146":147,"_38":98,"_99":106,"_13":103,"_100":-5,"_102":-5,"_148":149,"_53":-5,"_96":55,"_56":57,"_110":150,"_72":108,"_109":151},"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",{"_112":150,"_120":154},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_49":217,"_38":218,"_36":219,"_167":-5,"_47":48,"_46":168,"_169":31,"_44":220,"_13":71,"_40":215,"_42":-5,"_30":55,"_172":-5,"_33":221},{"_49":211,"_38":212,"_36":213,"_167":-5,"_47":48,"_46":168,"_169":31,"_44":214,"_13":71,"_40":215,"_42":-5,"_30":55,"_172":-5,"_33":216},{"_49":205,"_38":206,"_36":207,"_167":-5,"_47":48,"_46":168,"_169":55,"_44":208,"_13":71,"_40":26,"_42":209,"_30":55,"_172":-5,"_33":210},{"_49":199,"_38":200,"_36":201,"_167":-5,"_47":48,"_46":168,"_169":55,"_44":202,"_13":71,"_40":26,"_42":203,"_30":55,"_172":-5,"_33":204},{"_49":193,"_38":194,"_36":195,"_167":-5,"_47":48,"_46":168,"_169":55,"_44":196,"_13":71,"_40":41,"_42":197,"_30":55,"_172":-5,"_33":198},{"_49":187,"_38":188,"_36":66,"_167":-5,"_47":48,"_46":168,"_169":55,"_44":189,"_13":71,"_40":190,"_42":191,"_30":55,"_172":51,"_33":192},{"_49":180,"_38":181,"_36":182,"_167":-5,"_47":48,"_46":183,"_169":55,"_44":184,"_13":71,"_40":41,"_42":185,"_30":55,"_172":-5,"_33":186},{"_49":174,"_38":175,"_36":176,"_167":-5,"_47":48,"_46":168,"_169":55,"_44":177,"_13":71,"_40":41,"_42":178,"_30":55,"_172":-5,"_33":179},{"_49":164,"_38":165,"_36":166,"_167":-5,"_47":48,"_46":168,"_169":31,"_44":170,"_13":71,"_40":41,"_42":171,"_30":55,"_172":-5,"_33":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],"3b24a107-cddb-4cf2-8493-ec2a473b9294","kernel.ts","01a0abcf-a6b5-7413-8f55-6a07a5e01800",2,["D",1789588907703],"// 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",[181],"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",[188],"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}",[194],"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.",[200],"aa61d889-5e5f-4ed9-9cb4-39d6d7e475a3","AGENTS.md","01a0abce-8571-76e1-8061-cdf4a9f6fc29",["D",1789588833583],"# typesafe-typewriter\n\n16 typed TypeSafe questions about whatever you type, re-asked on every keystroke.\n\n## File map\n\n| Path | Type | Purpose |\n| --- | --- | --- |\n| `index.ts` | http | Hono app: serves the shell + assets, `GET /api/questions`, `POST /api/judge` |\n| `typesafe.ts` | script | Minimal TypeSafe (System One) REST client + answer types |\n| `questions.ts` | script | The 16 question specs and the 3 display groups — the single source of truth |\n| `rate-limit.ts` | script | Best-effort in-memory per-IP + global rate limit (burst control) |\n| `budget.ts` | script | SQLite-backed lifetime spend ledger; the hard $2 cap |\n| `tests/budget.ts` | script | Checks the budget guard without spending anything |\n| `frontend/root.tsx` | script | HTML shell (Hono JSX); stamps immutable asset URLs |\n| `frontend/index.tsx` | script | React entrypoint |\n| `frontend/components/App.tsx` | script | Layout, text state, status pill, group sections |\n| `frontend/components/Meter.tsx` | script | One question row: label, bar, answer |\n| `frontend/components/Notice.tsx` | script | The amber box for system states: no key, budget spent |\n| `frontend/lib/display.ts` | script | Answer → text, and the \"did it meaningfully change\" rules |\n| `frontend/lib/useJudge.ts` | script | Debounced, abortable `POST /api/judge` |\n| `frontend/lib/useChanges.ts` | script | Lights up rows whose judgment moved |\n| `frontend/lib/types.ts` | script | Client-side mirror of the API shapes |\n| `frontend/lib/presets.ts` | script | Sample texts |\n| `frontend/favicon.svg` | file | Icon |\n\n## Notes\n\n- **Plain by design.** Black text on white, one bar style for every question\n type, no color scale, no chart vocabulary. Every row is label / bar / answer\n and the three columns line up down the page. If a row needs to say more, it\n says it in words.\n- `Meter.tsx` owns the only chart in the app: a single `Bar` (black fill on a\n `bg-neutral-200` track). `fill()` maps each answer type to one 0–1 number —\n P(yes) for noul, position on the scale for score, winner probability for\n choice. Adding a question type means one line there, nothing else.\n- Styling is Twind (Tailwind utility classes, no build step), loaded from\n `cdn.twind.style` in `root.tsx`. **Twind's theme is Tailwind v2**: it has no\n `950` shades and no opacity modifiers, and it silently drops classes it can't\n resolve. Use explicit palette colors, and inline styles for computed values\n (bar widths, the faded \"No\" rows).\n- **Two caps, two jobs.** `rate-limit.ts` is burst control (600/min per IP,\n 6000/min globally) and is best-effort in memory. `budget.ts` is the hard cap:\n $2.00 lifetime, one row in the val's SQLite database, so it survives isolates\n and deploys. Every call reserves an estimate before it goes out and reconciles\n with `usage.input_tokens` after, which is why `index.ts` never calls `ask()`\n without a reservation. Set `TYPESAFE_BUDGET_USD` to move the cap. When it's\n spent, `/api/judge` returns 429 with the ledger in the body and the client\n stops asking by itself — don't add a retry loop around it.\n- **No key is a UI state, not an error.** `/api/questions` returns a `setup`\n object (`configured`, `keyVar`, `envUrl`, `consoleUrl`) built from\n `isConfigured()` in `typesafe.ts`, so the page can say what's missing before\n the first keystroke. `App.tsx` renders `SetupNeeded` and passes\n `enabled: false` to `useJudge`, which then asks nothing at all. `envUrl` is\n derived from `parseVal()`, so a fork links to its own settings. Nothing about\n the key's value crosses the wire — only whether one exists.\n- **Never answer 502 from `/api/judge`.** The CDN replaces an origin 502 with\n its own HTML error page, so the val's JSON body never arrives and the client\n dies on `Unexpected token '<'`. Unconfigured is 503, an upstream failure is\n 500; both pass through intact. `useJudge`'s `readJson()` is the backstop —\n it parses the body itself and falls back to `HTTP ` rather than\n throwing a SyntaxError at whatever HTML it got.\n- `data-q=\"\"` on each row, `data-value` on the answer cell,\n `data-type` on the row, `data-status` on the pill (`ok`, `asking`, `error`,\n `budget-spent`, `needs-setup`), `data-budget-spent` on the footer's spend\n line, `data-budget=\"spent\"` on the budget notice and `data-setup=\"needed\"` on\n the missing-key notice — for Playwright.\n- Env: `TYPESAFE_API_KEY` (from https://console.typesafe.ai/settings/keys).\n `TYPESAFE_MODEL` optionally overrides the model without a deploy.\n- The browser learns nothing about the questions except via\n `GET /api/questions` (which also returns the groups, so `questions.ts` is the\n only place group order and copy live). Edit `questions.ts` and the panel\n follows. Adding a question is one entry there; latency barely moves, since\n TypeSafe evaluates every question in a request in parallel.",[206],"a6c4385d-8c86-4d90-bb2f-e40fa8f5ad86","tests","01a0abce-8571-76e1-8061-ca995244ffd6",["D",1789588833583],"directory",[212],"547cc93c-0b46-4b3d-b204-3199dbf1b11e","frontend","01a0abce-8571-76e1-8061-c0e52b5be3b5",["D",1789588833583],[218],"pulls","branches","forks","envVars",{"_229":183,"_231":71},"connections",{"_229":71,"_230":71},"count","unfilledCount","emptyCount",{"_49":217,"_38":218,"_36":219,"_167":-5,"_47":48,"_46":168,"_169":31,"_44":327,"_13":71,"_40":215,"_42":-5,"_30":55,"_172":-5,"_250":328,"_33":329},{"_49":323,"_38":322,"_36":317,"_167":219,"_47":48,"_46":168,"_169":31,"_44":324,"_13":71,"_40":215,"_42":-5,"_30":55,"_172":-5,"_250":325,"_33":326},{"_49":314,"_38":315,"_36":316,"_167":317,"_47":48,"_46":168,"_169":55,"_44":318,"_13":71,"_40":41,"_42":319,"_30":55,"_172":-5,"_250":320,"_33":321},{"_49":310,"_38":309,"_36":304,"_167":219,"_47":48,"_46":168,"_169":31,"_44":311,"_13":71,"_40":215,"_42":-5,"_30":55,"_172":-5,"_250":312,"_33":313},{"_49":301,"_38":302,"_36":303,"_167":304,"_47":48,"_46":168,"_169":55,"_44":305,"_13":71,"_40":41,"_42":306,"_30":55,"_172":-5,"_250":307,"_33":308},{"_49":294,"_38":295,"_36":296,"_167":219,"_47":48,"_46":168,"_169":55,"_44":297,"_13":71,"_40":26,"_42":298,"_30":55,"_172":-5,"_250":299,"_33":300},{"_49":287,"_38":288,"_36":289,"_167":219,"_47":48,"_46":168,"_169":55,"_44":290,"_13":71,"_40":41,"_42":291,"_30":55,"_172":-5,"_250":292,"_33":293},{"_49":280,"_38":281,"_36":282,"_167":219,"_47":48,"_46":168,"_169":55,"_44":283,"_13":71,"_40":41,"_42":284,"_30":55,"_172":-5,"_250":285,"_33":286},{"_49":211,"_38":212,"_36":213,"_167":-5,"_47":48,"_46":168,"_169":31,"_44":277,"_13":71,"_40":215,"_42":-5,"_30":55,"_172":-5,"_250":278,"_33":279},{"_49":271,"_38":194,"_36":272,"_167":213,"_47":48,"_46":168,"_169":55,"_44":273,"_13":71,"_40":41,"_42":274,"_30":55,"_172":-5,"_250":275,"_33":276},{"_49":205,"_38":206,"_36":207,"_167":-5,"_47":48,"_46":168,"_169":55,"_44":268,"_13":71,"_40":26,"_42":209,"_30":55,"_172":-5,"_250":269,"_33":270},{"_49":199,"_38":200,"_36":201,"_167":-5,"_47":48,"_46":168,"_169":55,"_44":265,"_13":71,"_40":26,"_42":203,"_30":55,"_172":-5,"_250":266,"_33":267},{"_49":193,"_38":194,"_36":195,"_167":-5,"_47":48,"_46":168,"_169":55,"_44":262,"_13":71,"_40":41,"_42":197,"_30":55,"_172":-5,"_250":263,"_33":264},{"_49":187,"_38":188,"_36":66,"_167":-5,"_47":48,"_46":168,"_169":55,"_44":259,"_13":71,"_40":190,"_42":191,"_30":55,"_172":51,"_250":260,"_33":261},{"_49":180,"_38":181,"_36":182,"_167":-5,"_47":48,"_46":183,"_169":55,"_44":256,"_13":71,"_40":41,"_42":185,"_30":55,"_172":-5,"_250":257,"_33":258},{"_49":174,"_38":175,"_36":176,"_167":-5,"_47":48,"_46":168,"_169":55,"_44":253,"_13":71,"_40":41,"_42":178,"_30":55,"_172":-5,"_250":254,"_33":255},{"_49":164,"_38":165,"_36":166,"_167":-5,"_47":48,"_46":168,"_169":31,"_44":249,"_13":71,"_40":41,"_42":171,"_30":55,"_172":-5,"_250":251,"_33":252},["D",1789588833583],"children",[],[165],["D",1789588833583],[],[175],["D",1789588907703],[],[181],["D",1789588833583],[],[188],["D",1789588833583],[],[194],["D",1789588833583],[],[200],["D",1789588833583],[],[206],"d813c06f-955e-4cf3-9255-fa3640c67a6a","01a0abce-8571-76e1-8061-c45d052cd03b",["D",1789588833583],"/**\n * Checks the budget guard without spending anything. The only mutation it\n * attempts is a reservation for more than the whole budget, which must be\n * refused — so this is safe to run against the live ledger any time.\n *\n * Run it with `run_file` after touching budget.ts.\n */\nimport {\n BUDGET_USD,\n estimateInputTokens,\n getBudget,\n reserve,\n USD_PER_INPUT_TOKEN,\n} from \"../budget.ts\";\nimport { QUESTIONS } from \"../questions.ts\";\n\nconst state = await getBudget();\nconsole.log(\n `budget $${BUDGET_USD.toFixed(2)} · spent $${state.spentUsd.toFixed(4)} over ${state.calls} calls · ${state.inputTokens} input tokens`,\n);\n\n// A reservation for more than the entire budget has to be refused. If this\n// ever printed false it would charge the ledger $2*2, so it must be true.\nconst huge = await reserve(Math.ceil((BUDGET_USD * 2) / USD_PER_INPUT_TOKEN));\nconsole.log(\"over-budget reservation refused:\", !huge.ok);\n\n// The estimate only has to be in the right ballpark — reconcile() corrects the\n// ledger with the real usage right after each call. But if it's low by a lot,\n// concurrent requests get more slack than they should, so keep it close.\nconst questionsJson = JSON.stringify(QUESTIONS).length;\nconsole.log(`questions payload: ${questionsJson} chars`);\nfor (const chars of [0, 500, 4000]) {\n const est = estimateInputTokens(chars, QUESTIONS);\n console.log(\n ` state ${String(chars).padStart(4)} chars → estimate ${String(est).padStart(4)} tokens ($${(est * USD_PER_INPUT_TOKEN).toFixed(6)})`,\n );\n}\n\nconst full = estimateInputTokens(4000, QUESTIONS);\nconsole.log(\n `a full budget is ~${Math.floor(BUDGET_USD / (full * USD_PER_INPUT_TOKEN)).toLocaleString()} max-size calls`,\n);",[],[212,194],["D",1789588833583],[241],[212],"b0b6dbae-9339-4093-97d4-09eecad4a2b3","root.tsx","01a0abce-8571-76e1-8061-bf005da2f3ad",["D",1789588833583],"/** @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/**\n * Inlined before Twind loads, so the first paint isn't unstyled — Twind is\n * fetched from a CDN at runtime. Also holds the row-flash keyframes, which\n * Twind's theme has no way to express.\n */\nconst CSS = `\nhtml, body { background: #fff; }\n@keyframes rowFlash {\n from { background: #fef3c7; }\n to { background: transparent; }\n}\n.row-flash { animation: rowFlash 900ms ease-out; }\n`;\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(\"\")}\n \n \n \n \n TypeSafe Typewriter\n \n \n \n \n \n \n \n \n

Diff · v10