Jev Browser Use

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_366":367,"_368":369},"routes/_app.x.$handle.$name",{"_111":110,"_37":50,"_120":97,"_32":121,"_13":14,"_122":-5,"_11":123,"_124":125,"_126":127,"_128":129,"_130":131,"_26":-5,"_132":133,"_134":135,"_136":30,"_137":138,"_139":66,"_140":-5,"_141":-5,"_142":143},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":57,"_58":59,"_60":61,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":90,"_91":92,"_93":94,"_95":30},"version",22,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","5008e97b-e5b2-484d-8412-8b98a2265843","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/lib/api.ts","latestPath","fileId","d9c1c7ca-b209-11f1-a6d2-1607ee4eb77e","name","api.ts","fileType","script","content","/**\n * Client-side mirror of what the val's API returns, plus the four calls the\n * page makes. Kept separate from the server's types so each side stands alone.\n */\n\nexport type Setup = {\n configured: boolean;\n keyVar: string;\n /** This val's environment variable editor, prefilled with keyVar. */\n envUrl: string;\n consoleUrl: string;\n};\n\nexport type Budget = {\n budgetUsd: number;\n spentUsd: number;\n remainingUsd: number;\n jevUsd: number;\n kernelUsd: number;\n inputTokens: number;\n kernelSeconds: number;\n calls: number;\n sessions: number;\n exhausted: boolean;\n};\n\nexport type Preset = { label: string; task: string; startUrl: string };\n\nexport type Config = {\n setup: { typesafe: Setup; kernel: Setup };\n presets: Preset[];\n maxSteps: number;\n maxLiveSessions: number;\n budget: Budget | null;\n};\n\nexport type Candidate = {\n n: number;\n tag: string;\n label: string;\n href?: string;\n x: number;\n y: number;\n editable?: boolean;\n};\n\nexport type Ranked = { candidate: Candidate; score: number };\n\nexport type Decision = {\n action: \"click\" | \"type\" | \"done\";\n target?: Candidate;\n text?: string;\n probability?: number;\n confidence?: number;\n goalReached: number;\n ranked: Ranked[];\n considered: number;\n usage: { input_tokens: number; output_tokens: number };\n model: string;\n ms: number;\n};\n\nexport type StepResult = {\n step: number;\n done: boolean;\n action: string;\n page?: { url: string; title: string; candidates: number };\n decision?: Decision;\n budget?: Budget;\n error?: string;\n reason?: string;\n};\n\nexport type SessionStart = {\n sessionId: string;\n task: string;\n startUrl: string;\n liveViewUrl: string;\n budget: Budget;\n};\n\n/**\n * Read a body without trusting that it's JSON. Some error statuses never reach\n * us as the val wrote them — a 502 gets replaced by the CDN's HTML error page —\n * and `res.json()` on that throws a SyntaxError about ` {\n const body = await res.text();\n try {\n return JSON.parse(body);\n } catch {\n return null;\n }\n}\n\nasync function post(path: string, payload: unknown): Promise {\n const res = await fetch(path, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(payload),\n });\n const data = await readJson(res);\n if (!res.ok || data === null) {\n throw Object.assign(\n new Error(data?.error ?? `HTTP ${res.status}`),\n { payload: data, status: res.status },\n );\n }\n return data;\n}\n\nexport async function getConfig(): Promise {\n const res = await fetch(\"/api/config\");\n const data = await readJson(res);\n if (!res.ok || data === null) throw new Error(`HTTP ${res.status}`);\n return data as Config;\n}\n\nexport function startSession(task: string, startUrl: string): Promise {\n return post(\"/api/session\", { task, startUrl });\n}\n\nexport function step(sessionId: string, history: string[]): Promise {\n return post(\"/api/step\", { sessionId, history });\n}\n\nexport function stopSession(sessionId: string): Promise<{ ok: boolean }> {\n return post(`/api/session/${sessionId}/stop`, {});\n}\n\nexport function sleep(ms: number): Promise {\n return new Promise((resolve) => setTimeout(resolve, ms));\n}\n\nexport function usd(n: number): string {\n return `$${n.toFixed(n < 0.1 ? 4 : 2)}`;\n}","createdAt",["D",1789589080283],"branchVersion","branchId","789b925f-1f04-4496-b61e-c55aa361585d","id","3c438ea3-80e8-4cac-9708-6511f055598d","jev-browser-use",["D",1789588833583],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","restricted","description","Describe a task; Jev decides each step in a KERNEL cloud browser","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/601425b5-d08c-486a-cae2-cbfbdf0cc801/square512?exp=1789617341&sig=b5dc4cbbb53293a2cdf7e3a4010b836ddd7fa6bf44a67b9a5ab63bac3b89bdad","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","01a0abce-8571-76e1-8061-dc657cf63b40","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","b2fd4880-5c2e-11f0-9801-5764bf98a432","tursoName","3c438ea380e84cac97086511f055598d","tursoHostname","3c438ea380e84cac97086511f055598d-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789590099209],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_111":110,"_119":115},"org",{"_111":110,"_112":113,"_114":115,"_19":-5,"_116":117,"_118":66},"branch",{"_13":96,"_37":97,"_48":47,"_98":49,"_99":100,"_101":102,"_103":55,"_104":105,"_106":107,"_108":50,"_109":110},"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=1789617341&sig=8d1440c52af03df2b064b47f4654f783d26e2540827181b497aa8b927b4756fc","tier","business","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":361,"_52":-5,"_53":30,"_54":55,"_56":57,"_58":59,"_60":61,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":362,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":363,"_91":364,"_93":365,"_95":30},"tree",[258,266,267,268,269,270,271,272,273,274,275,276],"files",[258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276],"counts",{"_247":70,"_248":170,"_249":70,"_250":251,"_252":253},"contents",[154,155,156,157,158,159,160,161,162,163,164,165],"upstreamProject",{"_48":105,"_37":150,"_58":151,"_60":-5,"_54":55,"_89":152},"upstreamBranch",{"_48":100,"_43":144,"_145":146,"_37":97,"_98":105,"_13":102,"_99":-5,"_101":-5,"_147":148,"_52":-5,"_95":30,"_54":55,"_109":149,"_71":107,"_108":150},"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",{"_111":149,"_119":153},"https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg",{"_48":242,"_37":243,"_35":244,"_169":-5,"_46":47,"_45":170,"_171":66,"_43":245,"_13":70,"_39":240,"_41":-5,"_29":30,"_174":-5,"_32":246},{"_48":236,"_37":237,"_35":238,"_169":-5,"_46":47,"_45":170,"_171":66,"_43":239,"_13":70,"_39":240,"_41":-5,"_29":30,"_174":-5,"_32":241},{"_48":230,"_37":231,"_35":232,"_169":-5,"_46":47,"_45":170,"_171":30,"_43":233,"_13":70,"_39":26,"_41":234,"_29":30,"_174":-5,"_32":235},{"_48":224,"_37":225,"_35":226,"_169":-5,"_46":47,"_45":170,"_171":30,"_43":227,"_13":70,"_39":26,"_41":228,"_29":30,"_174":-5,"_32":229},{"_48":217,"_37":218,"_35":219,"_169":-5,"_46":47,"_45":220,"_171":30,"_43":221,"_13":70,"_39":40,"_41":222,"_29":30,"_174":-5,"_32":223},{"_48":210,"_37":211,"_35":212,"_169":-5,"_46":47,"_45":213,"_171":30,"_43":214,"_13":170,"_39":40,"_41":215,"_29":30,"_174":-5,"_32":216},{"_48":203,"_37":204,"_35":205,"_169":-5,"_46":47,"_45":206,"_171":30,"_43":207,"_13":70,"_39":40,"_41":208,"_29":30,"_174":-5,"_32":209},{"_48":196,"_37":197,"_35":64,"_169":-5,"_46":47,"_45":198,"_171":30,"_43":199,"_13":170,"_39":200,"_41":201,"_29":30,"_174":50,"_32":202},{"_48":189,"_37":190,"_35":191,"_169":-5,"_46":47,"_45":192,"_171":30,"_43":193,"_13":170,"_39":40,"_41":194,"_29":30,"_174":-5,"_32":195},{"_48":183,"_37":184,"_35":185,"_169":-5,"_46":47,"_45":170,"_171":30,"_43":186,"_13":70,"_39":40,"_41":187,"_29":30,"_174":-5,"_32":188},{"_48":176,"_37":177,"_35":178,"_169":-5,"_46":47,"_45":179,"_171":30,"_43":180,"_13":70,"_39":40,"_41":181,"_29":30,"_174":-5,"_32":182},{"_48":166,"_37":167,"_35":168,"_169":-5,"_46":47,"_45":170,"_171":66,"_43":172,"_13":70,"_39":40,"_41":173,"_29":30,"_174":-5,"_32":175},"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",[167],"2b7d95d5-b229-41cb-a219-7cb28ebc1702","sessions.ts","979add00-b209-11f1-8f64-1607ee4eb77e",14,["D",1789588969304],"/**\n * The registry of live browsers, and the clock that bills them.\n *\n * A Kernel browser keeps running (and billing) after the HTTP request that\n * created it returns, so \"who owes what\" can't live in the request that made\n * it. One row per session in SQLite, and `accountTime` moves the elapsed\n * seconds from the session onto the budget ledger. Called on every step and\n * once more when the session closes, so the ledger tracks a browser that's\n * sitting idle in a tab as well as one mid-run.\n */\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { chargeKernelSeconds } from \"./budget.ts\";\n\n/** How many browsers this demo will run at once. */\nexport const MAX_LIVE_SESSIONS = 2;\n\nexport type SessionStatus = \"live\" | \"done\" | \"stopped\" | \"failed\";\n\nexport type Session = {\n id: string;\n kernelId: string;\n task: string;\n startUrl: string;\n startedAt: string;\n /** Seconds already moved onto the budget ledger for this session. */\n chargedSeconds: number;\n steps: number;\n status: SessionStatus;\n};\n\nconst SCHEMA = `CREATE TABLE IF NOT EXISTS sessions (\n id TEXT PRIMARY KEY,\n kernel_id TEXT NOT NULL,\n task TEXT NOT NULL,\n start_url TEXT NOT NULL DEFAULT '',\n started_at TEXT NOT NULL,\n charged_seconds REAL NOT NULL DEFAULT 0,\n steps INTEGER NOT NULL DEFAULT 0,\n status TEXT NOT NULL DEFAULT 'live'\n)`;\n\nlet schema: Promise | null = null;\n\nfunction init(): Promise {\n if (!schema) {\n schema = sqlite.execute(SCHEMA).catch((err) => {\n schema = null;\n throw err;\n });\n }\n return schema;\n}\n\nfunction toSession(row: Record): Session {\n return {\n id: String(row.id),\n kernelId: String(row.kernel_id),\n task: String(row.task),\n startUrl: String(row.start_url ?? \"\"),\n startedAt: String(row.started_at),\n chargedSeconds: Number(row.charged_seconds ?? 0),\n steps: Number(row.steps ?? 0),\n status: String(row.status) as SessionStatus,\n };\n}\n\nexport async function createSession(\n kernelId: string,\n task: string,\n startUrl: string,\n): Promise {\n await init();\n const session: Session = {\n id: crypto.randomUUID(),\n kernelId,\n task,\n startUrl,\n startedAt: new Date().toISOString(),\n chargedSeconds: 0,\n steps: 0,\n status: \"live\",\n };\n await sqlite.execute({\n sql: `INSERT INTO sessions\n (id, kernel_id, task, start_url, started_at, charged_seconds, steps, status)\n VALUES (?, ?, ?, ?, ?, 0, 0, 'live')`,\n args: [\n session.id,\n session.kernelId,\n session.task,\n session.startUrl,\n session.startedAt,\n ],\n });\n return session;\n}\n\nexport async function getSession(id: string): Promise {\n await init();\n const { rows } = await sqlite.execute({\n sql: \"SELECT * FROM sessions WHERE id = ?\",\n args: [id],\n });\n return rows[0] ? toSession(rows[0] as Record) : null;\n}\n\n/** Live browsers, for the concurrency guard. */\nexport async function liveSessionCount(): Promise {\n await init();\n const { rows } = await sqlite.execute(\n \"SELECT COUNT(*) AS n FROM sessions WHERE status = 'live'\",\n );\n return Number(rows[0]?.n ?? 0);\n}\n\n/**\n * Move this session's elapsed seconds onto the budget ledger, exactly once\n * each. Returns the seconds charged in this call.\n *\n * The subtraction is why `charged_seconds` exists: a browser is billed for its\n * whole life, so charging `now - startedAt` every step would charge the same\n * second twice.\n */\nexport async function accountTime(session: Session): Promise {\n const elapsed = (Date.now() - new Date(session.startedAt).getTime()) / 1000;\n const delta = Math.max(0, elapsed - session.chargedSeconds);\n if (delta <= 0) return 0;\n await chargeKernelSeconds(delta);\n await sqlite.execute({\n sql: \"UPDATE sessions SET charged_seconds = ? WHERE id = ?\",\n args: [session.chargedSeconds + delta, session.id],\n });\n return delta;\n}\n\nexport async function bumpSteps(id: string): Promise {\n await sqlite.execute({\n sql: \"UPDATE sessions SET steps = steps + 1 WHERE id = ?\",\n args: [id],\n });\n}\n\nexport async function closeSession(\n id: string,\n status: SessionStatus,\n): Promise {\n await sqlite.execute({\n sql: \"UPDATE sessions SET status = ? WHERE id = ?\",\n args: [status, id],\n });\n}",[177],"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}",[184],"ca8de7ef-5622-4ebd-91af-23a3ca69aedd","kernel.ts","01a0abcf-a6b5-7413-8f55-6a07a5e01800",16,["D",1789589027405],"/**\n * Kernel client — the cloud Chromium the agent drives.\n *\n * Adapted from @stevekrouse/browser-tester's `lib/browser.ts`, which is the\n * same API base, Bearer auth, error handling, and replay helpers. What's added\n * here is what browser *use* needs rather than browser *testing*:\n *\n * - `createBrowser` asks for kiosk mode and a fixed viewport, and returns the\n * live view URL the demo embeds in an iframe.\n * - The computer controls (real OS mouse and keyboard) that the agent acts\n * with, so the cursor moves along a Bézier path and typing is human-paced.\n *\n * Docs: https://www.kernel.sh/docs\n */\nconst API = \"https://api.onkernel.com\";\n\n/**\n * Read the key lazily, not at module load. A missing key should be a 503 the\n * page can explain, not an import-time throw that takes the whole val down.\n */\nfunction key(): string {\n const k = Deno.env.get(API_KEY_VAR)?.trim();\n if (!k) throw new Error(`${API_KEY_VAR} is not set on this val`);\n return k;\n}\n\n/** The env var this client needs. Exported so the UI can name it. */\nexport const API_KEY_VAR = \"KERNEL_API_KEY\";\n\n/** Where to get one. */\nexport const API_KEY_CONSOLE_URL = \"https://dashboard.onkernel.com/settings/api-keys\";\n\nexport function isConfigured(): boolean {\n return !!Deno.env.get(API_KEY_VAR)?.trim();\n}\n\nexport type KernelResponse = {\n status: number;\n headers: Headers;\n text: () => Promise;\n arrayBuffer: () => Promise;\n};\n\nexport async function kernelFetch(\n path: string,\n method = \"GET\",\n body?: unknown,\n): 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/** POST that expects a JSON body back, with the status in the error. */\nasync function postJson(path: string, body?: unknown): Promise {\n const r = await kernelFetch(path, \"POST\", body);\n const text = await r.text();\n if (r.status >= 300) {\n throw new Error(`Kernel ${path} failed (${r.status}): ${text.slice(0, 300)}`);\n }\n return text ? JSON.parse(text) as T : ({} as T);\n}\n\nexport type KernelBrowser = {\n session_id: string;\n browser_live_view_url: string;\n cdp_ws_url?: string;\n};\n\n/**\n * Create a browser session.\n *\n * Kiosk mode is not cosmetic. It removes the tab strip and toolbar, so the\n * window *is* the page viewport and `getBoundingClientRect()` coordinates are\n * already screen coordinates — which is what the computer controls click. With\n * browser chrome in the way every click would land a toolbar-height too high.\n * It also makes the live view a clean full-bleed rectangle for the video.\n *\n * `timeout_seconds` is Kernel's idle auto-delete ceiling, and it's the thing\n * that bounds cost when someone walks away from an open tab.\n */\nexport async function createBrowser(\n opts: {\n name?: string;\n startUrl?: string;\n width?: number;\n height?: number;\n idleTimeoutSec?: number;\n } = {},\n): Promise {\n const {\n name,\n startUrl,\n width = 1024,\n height = 768,\n idleTimeoutSec = 240,\n } = opts;\n return await postJson(\"/browsers\", {\n headless: false,\n kiosk_mode: true,\n viewport: { width, height },\n timeout_seconds: idleTimeoutSec,\n ...(name ? { name } : {}),\n // Boot straight at the start URL rather than the new-tab home page.\n ...(startUrl ? { start_url: startUrl } : {}),\n });\n}\n\n/** Execute Playwright/TypeScript against the browser, with page/context/browser in scope. */\nexport async function runPlaywright(\n sessionId: string,\n code: string,\n timeoutSec = 45,\n): Promise<{ success: boolean; result?: unknown; error?: string; stdout?: string }> {\n return await postJson(`/browsers/${sessionId}/playwright/execute`, {\n code,\n timeout_sec: timeoutSec,\n });\n}\n\n// ── Computer controls ───────────────────────────────────────────\n// A real OS mouse and keyboard, not synthetic DOM events. `smooth` is Kernel's\n// default and draws a human-like Bézier path, which is most of why the demo is\n// watchable rather than a series of jumps.\n\n/** Move the cursor. Smooth by default, so the path is visible in the live view. */\nexport async function moveMouse(\n sessionId: string,\n x: number,\n y: number,\n durationMs?: number,\n): Promise {\n await postJson(`/browsers/${sessionId}/computer/move_mouse`, {\n x,\n y,\n smooth: true,\n ...(durationMs ? { duration_ms: durationMs } : {}),\n });\n}\n\nexport async function clickMouse(\n sessionId: string,\n x: number,\n y: number,\n): Promise {\n await postJson(`/browsers/${sessionId}/computer/click_mouse`, { x, y });\n}\n\n/** Type literal text, human-paced. */\nexport async function typeText(sessionId: string, text: string): Promise {\n await postJson(`/browsers/${sessionId}/computer/type_text`, { text });\n}\n\nexport async function pressKey(sessionId: string, keys: string[]): Promise {\n await postJson(`/browsers/${sessionId}/computer/press_key`, { keys });\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) {\n throw new Error(`screenshot failed (${r.status}): ${await r.text()}`);\n }\n return r.arrayBuffer();\n}\n\n/** Delete a browser session. Frees the concurrency slot and stops the meter. */\nexport async function destroyBrowser(sessionId: string): Promise {\n const r = await kernelFetch(`/browsers/${sessionId}`, \"DELETE\");\n if (r.status !== 204 && r.status !== 200) {\n throw new Error(`destroyBrowser failed (${r.status}): ${await r.text()}`);\n }\n}\n\nexport function sleep(ms: number): Promise {\n return new Promise((resolve) => setTimeout(resolve, ms));\n}",[190],"bf249aa8-130d-441a-a374-20cd5c2ddf69","index.ts",18,["D",1789589059287],"http","import { hotReload, parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { canStartSession, getBudget, noteSession } from \"./budget.ts\";\nimport { act, describeAction, perceive } from \"./browser-use.ts\";\nimport { BudgetSpentError, decide } from \"./decide.ts\";\nimport { Root } from \"./frontend/root.tsx\";\nimport {\n API_KEY_CONSOLE_URL as KERNEL_CONSOLE_URL,\n API_KEY_VAR as KERNEL_VAR,\n createBrowser,\n destroyBrowser,\n isConfigured as kernelConfigured,\n} from \"./kernel.ts\";\nimport { checkRateLimit } from \"./rate-limit.ts\";\nimport {\n accountTime,\n bumpSteps,\n closeSession,\n createSession,\n getSession,\n liveSessionCount,\n MAX_LIVE_SESSIONS,\n type Session,\n type SessionStatus,\n} from \"./sessions.ts\";\nimport {\n API_KEY_CONSOLE_URL as TYPESAFE_CONSOLE_URL,\n API_KEY_VAR as TYPESAFE_VAR,\n isConfigured as typesafeConfigured,\n} from \"./typesafe.ts\";\n\n/** How many steps one run may take. Each step is two Jev calls and ~4s of browser. */\nconst MAX_STEPS = 12;\n\n/** Task and URL caps, so a pasted novel can't blow the Jev request budget. */\nconst MAX_TASK_CHARS = 500;\n\n/** Where a run starts when you don't say. The blog's own wikiracing example. */\nconst DEFAULT_START_URL = \"https://en.wikipedia.org/wiki/Rubber_duck\";\n\n/** One-click demos. Wikiracing is TypeSafe's own showcase task for Jev. */\nconst PRESETS = [\n {\n label: \"Wikiracing\",\n task: \"Reach the article about the Eiffel Tower, using only links on the page.\",\n startUrl: \"https://en.wikipedia.org/wiki/Rubber_duck\",\n },\n {\n label: \"Hacker News\",\n task: \"Open the comments for the top story on the front page.\",\n startUrl: \"https://news.ycombinator.com\",\n },\n {\n label: \"Val Town\",\n task: \"Find the pricing page and tell me what the cheapest paid plan costs.\",\n startUrl: \"https://www.val.town\",\n },\n];\n\nconst app = new Hono();\n\n/**\n * What the browser needs in order to explain a val that's missing a key:\n * whether the gap exists, and where to fill it. The env var editor URL is\n * derived from the val itself, so a fork sends people to its own settings.\n *\n * Nothing secret goes over the wire — only whether the gap exists.\n */\nfunction setupState() {\n const val = parseVal().links.self.val;\n const one = (keyVar: string, consoleUrl: string, configured: boolean) => ({\n configured,\n keyVar,\n envUrl: `${val}/environment-variables?key=${keyVar}`,\n consoleUrl,\n });\n return {\n typesafe: one(TYPESAFE_VAR, TYPESAFE_CONSOLE_URL, typesafeConfigured()),\n kernel: one(KERNEL_VAR, KERNEL_CONSOLE_URL, kernelConfigured()),\n };\n}\n\nfunction ipOf(c: { req: { header: (k: string) => string | undefined } }): string {\n return c.req.header(\"x-forwarded-for\")?.split(\",\")[0]?.trim() ||\n c.req.header(\"x-real-ip\") || \"unknown\";\n}\n\n/** Accept a bare host too, so \"val.town\" works. Empty falls back to the default. */\nfunction normalizeUrl(raw: unknown): string {\n const s = typeof raw === \"string\" ? raw.trim() : \"\";\n if (!s) return DEFAULT_START_URL;\n const withScheme = /^https?:\\/\\//i.test(s) ? s : `https://${s}`;\n try {\n return new URL(withScheme).toString();\n } catch {\n return DEFAULT_START_URL;\n }\n}\n\n/** Stop billing: move the last of the elapsed time onto the ledger, then delete. */\nasync function finish(session: Session, status: SessionStatus): Promise {\n if (session.status !== \"live\") return;\n await accountTime(session).catch((err) => console.error(\"accountTime failed:\", err));\n await closeSession(session.id, status);\n await destroyBrowser(session.kernelId).catch((err) =>\n console.error(\"destroyBrowser failed:\", err)\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 ─────────────────────────────────────────────────────────\napp.get(\"/api/config\", async (c) =>\n c.json({\n setup: setupState(),\n presets: PRESETS,\n maxSteps: MAX_STEPS,\n maxLiveSessions: MAX_LIVE_SESSIONS,\n budget: await getBudget().catch(() => null),\n }));\n\n/** Start a run: one browser, one task. */\napp.post(\"/api/session\", async (c) => {\n if (!typesafeConfigured() || !kernelConfigured()) {\n return c.json({\n error: \"this val is missing an API key\",\n reason: \"unconfigured\",\n setup: setupState(),\n }, 503);\n }\n\n const body = await c.req.json().catch(() => null);\n const task = typeof body?.task === \"string\"\n ? body.task.trim().slice(0, MAX_TASK_CHARS)\n : \"\";\n if (!task) return c.json({ error: \"describe a task first\" }, 400);\n const startUrl = normalizeUrl(body?.startUrl);\n\n // A browser is the expensive thing here, so this limit is much tighter than\n // a per-keystroke demo's would be: ~$0.008/minute each.\n const limit = checkRateLimit(ipOf(c), {\n perKey: 6,\n global: 60,\n windowMs: 60_000,\n });\n if (!limit.ok) {\n return c.json({\n error: \"rate limited\",\n reason: limit.reason,\n retryAfterMs: limit.retryAfterMs,\n }, 429);\n }\n\n const gate = await canStartSession(MAX_LIVE_SESSIONS, await liveSessionCount());\n if (!gate.ok) {\n return c.json({\n error: gate.reason === \"budget\"\n ? \"demo budget spent\"\n : `${MAX_LIVE_SESSIONS} browsers are already running — stop one first`,\n reason: gate.reason,\n budget: gate.state,\n }, 429);\n }\n\n const browser = await createBrowser({\n name: `jev-${Date.now()}`,\n startUrl,\n });\n const session = await createSession(browser.session_id, task, startUrl);\n await noteSession();\n\n return c.json({\n sessionId: session.id,\n task,\n startUrl,\n // readOnly so a viewer can't fight the agent for the mouse, and so the\n // demo is a demo rather than a shared remote desktop.\n liveViewUrl: `${browser.browser_live_view_url}?readOnly=true`,\n budget: await getBudget(),\n });\n});\n\n/**\n * One turn of the loop: read the page, ask Jev, act.\n *\n * The client drives this rather than the server looping, so each request stays\n * short and the UI can show every step as it lands.\n */\napp.post(\"/api/step\", async (c) => {\n const body = await c.req.json().catch(() => null);\n const session = await getSession(typeof body?.sessionId === \"string\" ? body.sessionId : \"\");\n if (!session) return c.json({ error: \"no such session\" }, 404);\n if (session.status !== \"live\") {\n return c.json({ error: `run is already ${session.status}`, status: session.status }, 409);\n }\n\n // Bill the browser time that passed while it sat there.\n await accountTime(session);\n\n const history = Array.isArray(body?.history)\n ? body.history.slice(-6).map((h: unknown) => String(h).slice(0, 120))\n : [];\n\n if (session.steps >= MAX_STEPS) {\n await finish(session, \"done\");\n return c.json({\n step: session.steps,\n done: true,\n reason: \"step limit\",\n action: `stopped after ${MAX_STEPS} steps`,\n budget: await getBudget(),\n });\n }\n\n try {\n const page = await perceive(session.kernelId);\n const decision = await decide(page, session.task, history);\n if (decision.action !== \"done\") await act(session.kernelId, decision);\n await bumpSteps(session.id);\n\n const done = decision.action === \"done\";\n if (done) await finish(session, \"done\");\n\n return c.json({\n step: session.steps + 1,\n done,\n action: describeAction(decision),\n page: {\n url: page.url,\n title: page.title,\n candidates: page.candidates.length,\n },\n decision,\n budget: await getBudget(),\n });\n } catch (err) {\n // A spent budget ends the run: there is no point holding a browser open\n // that we've decided we can't afford to drive.\n if (err instanceof BudgetSpentError) {\n await finish(session, \"stopped\");\n return c.json({\n error: \"demo budget spent\",\n reason: \"budget\",\n budget: err.state,\n }, 429);\n }\n await finish(session, \"failed\");\n console.error(\"step failed:\", err);\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/** Stop a run and delete its browser. */\napp.post(\"/api/session/:id/stop\", async (c) => {\n const session = await getSession(c.req.param(\"id\"));\n if (!session) return c.json({ error: \"no such session\" }, 404);\n await finish(session, \"stopped\");\n return c.json({ ok: true, budget: await getBudget() });\n});\n\n// Unwrap and rethrow Hono errors as the original error.\napp.onError((err) => Promise.reject(err));\n\nexport default hotReload(app.fetch);",[197],"8df19d5e-9869-4014-b8b4-35ba1bcd5631","decide.ts","a8691e76-b209-11f1-b405-1607ee4eb77e",15,["D",1789588997490],"/**\n * The Jev half of the loop: given a text description of the page and a goal,\n * decide what to do next.\n *\n * Jev can't emit an action. It has no string output at all — only Choice,\n * Score, and Noul — so \"browser use\" here is not a model emitting tool calls.\n * It's the model *ranking and choosing* from a closed set that this file builds\n * out of the page, and then ordinary code doing the clicking. That constraint\n * is the whole design: every action is a value Jev was handed, so it cannot\n * invent a selector, hallucinate a URL, or make a type error.\n *\n * Two stages, which is what TypeSafe does for high-cardinality choices (their\n * wikiracing demo, \"Jev supports a cardinality up to 255... for the higher\n * cardinality choices, we do a 2 stage-system of scoring independently then\n * making an explicit choice\"):\n *\n * 1. Score — one Noul per candidate: \"does activating this move us closer?\"\n * Independent judgments, so they run in parallel and cost one call.\n * 2. Choose — one Choice over the top finalists, plus a way out (`__done__`).\n *\n * Stage 1 is a filter, not a decision. It never picks anything; it just makes\n * stage 2's choice set small enough to be a real choice.\n */\nimport {\n type BudgetState,\n estimateInputTokens,\n reconcile,\n reserve,\n} from \"./budget.ts\";\nimport { ask, type Answer, type Question, type SystemOneResponse } from \"./typesafe.ts\";\n\n/** Candidates sent to stage 1. Beyond this we'd rather lose links than the call. */\nconst MAX_CANDIDATES = 200;\n\n/** Finalists stage 2 chooses among. Small enough to be a comparison, not a scan. */\nconst FINALISTS = 24;\n\n/** Recent actions, so Jev can tell \"we're going in circles\" from \"we're progressing\". */\nconst HISTORY = 6;\n\nexport type Candidate = {\n /** Stable within one page state; the key Jev's answers come back under. */\n n: number;\n tag: string;\n label: string;\n href?: string;\n /** Viewport coordinates of the element's centre, for the computer controls. */\n x: number;\n y: number;\n /** True when this is a text field, i.e. clicking it isn't enough. */\n editable?: boolean;\n};\n\nexport type PageState = {\n url: string;\n title: string;\n /** Visible text, flattened. Jev never sees a screenshot — only this. */\n text: string;\n candidates: Candidate[];\n};\n\nexport type Ranked = { candidate: Candidate; score: number };\n\nexport type Decision = {\n action: \"click\" | \"type\" | \"done\";\n target?: Candidate;\n text?: string;\n /** Jev's probability for the option it chose, and the answer's own confidence. */\n probability?: number;\n confidence?: number;\n /** Noul: how likely the page already satisfies the goal. */\n goalReached: number;\n /** Stage 1's output, best first. The UI shows the distribution. */\n ranked: Ranked[];\n /** How many candidates stage 1 saw. */\n considered: number;\n usage: { input_tokens: number; output_tokens: number };\n model: string;\n ms: number;\n};\n\n/** Thrown instead of calling Jev when the ledger is spent. */\nexport class BudgetSpentError extends Error {\n constructor(readonly state: BudgetState) {\n super(\"demo budget spent\");\n this.name = \"BudgetSpentError\";\n }\n}\n\n/**\n * Strings we could plausibly type, harvested from the task itself. Jev can't\n * write text, so anything typed has to come from the user's own words — quoted\n * phrases are the honest source, and a task with none simply can't type.\n */\nexport function harvestTexts(task: string): string[] {\n const out: string[] = [];\n const re = /\"([^\"\\n]{1,80})\"|'([^'\\n]{1,80})'|“([^”\\n]{1,80})”/g;\n for (const m of task.matchAll(re)) {\n const value = (m[1] ?? m[2] ?? m[3] ?? \"\").trim();\n if (value) out.push(value);\n }\n return [...new Set(out)];\n}\n\n/** How a candidate is described to Jev. The label is the only thing it can judge on. */\nfunction describe(c: Candidate): string {\n const href = c.href ? ` → ${c.href}` : \"\";\n return `\"${c.label}\" (${c.tag}${href})`;\n}\n\nfunction noulOf(answer: Answer | undefined): number {\n return answer?.type === \"noul\" ? answer.noul : 0;\n}\n\n/** Reserve, call, reconcile. Every Jev call in this file goes through here. */\nasync function askReserved(\n state: unknown,\n questions: Record,\n): Promise {\n const reservation = await reserve(\n estimateInputTokens(JSON.stringify(state).length, questions),\n );\n if (!reservation.ok) throw new BudgetSpentError(reservation.state);\n try {\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 res;\n } catch (err) {\n // A call we watched fail wasn't billed, so hand the reservation back.\n await reconcile(reservation, 0).catch(() => {});\n throw err;\n }\n}\n\nexport async function decide(\n page: PageState,\n task: string,\n history: string[],\n): Promise {\n const started = performance.now();\n const considered = page.candidates.slice(0, MAX_CANDIDATES);\n const recent = history.slice(-HISTORY);\n\n // ── Stage 1: score every candidate independently ────────────────\n const scoreQuestions: Record = {};\n for (const c of considered) {\n scoreQuestions[`c${c.n}`] = {\n type: \"noul\",\n instructions:\n `Activating this control would move the browser measurably closer to the goal. The control is ${describe(c)}.`,\n };\n }\n\n const scoreState = {\n goal: task,\n current_page: { url: page.url, title: page.title },\n page_text: page.text,\n recent_actions: recent,\n };\n\n const stage1 = await askReserved(scoreState, scoreQuestions);\n\n const ranked: Ranked[] = considered\n .map((candidate) => ({\n candidate,\n score: noulOf(stage1.answers[`c${candidate.n}`]),\n }))\n .sort((a, b) => b.score - a.score);\n\n const finalists = ranked.slice(0, FINALISTS);\n\n // ── Stage 2: choose among the finalists ─────────────────────────\n const criteria: Record = {\n __done__: \"The goal is already achieved on this page — stop and report success.\",\n };\n for (const f of finalists) criteria[`c${f.candidate.n}`] = describe(f.candidate);\n\n const texts = harvestTexts(task);\n const questions: Record = {\n goal_reached: {\n type: \"noul\",\n instructions:\n \"The page currently displayed already satisfies the goal, with nothing further to do.\",\n },\n next: {\n type: \"choice\",\n instructions:\n \"Which single control should be activated next to make progress toward the goal?\",\n criteria,\n },\n };\n\n // Only asked when it can matter, and only when there is something to type.\n if (texts.length) {\n questions.needs_text = {\n type: \"noul\",\n instructions:\n \"The control chosen above needs text typed into it before it does anything useful.\",\n };\n questions.text = {\n type: \"choice\",\n instructions:\n \"Which of these strings should be typed into the chosen control?\",\n criteria: Object.fromEntries([\n ...texts.map((t) => [t, t] as const),\n [\"__none__\", \"None of these — type nothing.\"] as const,\n ]),\n };\n }\n\n const stage2 = await askReserved(\n {\n goal: task,\n current_page: { url: page.url, title: page.title },\n page_text: page.text,\n recent_actions: recent,\n finalists: finalists.map((f) => ({\n control: describe(f.candidate),\n promising: Number(f.score.toFixed(2)),\n })),\n },\n questions,\n );\n\n const answers = stage2.answers;\n const goalReached = noulOf(answers.goal_reached);\n const pick = answers.next?.type === \"choice\" ? answers.next : undefined;\n const chosenKey = pick?.choice ?? \"__done__\";\n const chosen = finalists.find((f) => `c${f.candidate.n}` === chosenKey)?.candidate;\n\n const needsText = noulOf(answers.needs_text) >= 0.5;\n const textPick = answers.text?.type === \"choice\" ? answers.text.choice : \"__none__\";\n\n // Code, not the model, decides what a choice means. `__done__`, a confident\n // \"already satisfied\", or a finalist that vanished all stop the loop.\n const action: Decision[\"action\"] = goalReached >= 0.6 || !chosen\n ? \"done\"\n : needsText && textPick !== \"__none__\"\n ? \"type\"\n : \"click\";\n\n return {\n action,\n target: action === \"done\" ? undefined : chosen,\n text: action === \"type\" ? textPick : undefined,\n probability: pick?.probabilities?.[chosenKey],\n confidence: pick?.confidence,\n goalReached,\n ranked,\n considered: considered.length,\n usage: {\n input_tokens: stage1.usage.input_tokens + stage2.usage.input_tokens,\n output_tokens: stage1.usage.output_tokens + stage2.usage.output_tokens,\n },\n model: stage2.model,\n ms: Math.round(performance.now() - started),\n };\n}",[204],"fc3d7113-f04a-401e-9bb8-bd9e033d93a7","budget.ts","01a0abce-8571-76e1-8061-db4c242eaf56",13,["D",1789588968519],"/**\n * A hard ceiling on what this demo can spend — at TypeSafe *and* at Kernel.\n *\n * Two meters, one ledger:\n *\n * - Jev bills $0.042 per 1M input tokens and nothing for output, so a step\n * costs only what you send it: a few thousand tokens, i.e. ~$0.0002.\n * - Kernel bills a headful browser at $0.0001333336/second, which is\n * $0.008/minute. Per second, a browser costs 20x what a Jev call costs.\n * The browser is what actually drains a budget, not the model.\n *\n * The running total lives in this val's SQLite database: in-memory counters\n * don't survive Val Town's serverless instances, so a cap that only lives in\n * memory isn't a cap.\n *\n * Jev is reserve-then-reconcile: charge a conservative estimate before the\n * call, so a burst of concurrent requests can't all read the same total and\n * slip through, then correct the ledger with the real `usage.input_tokens`\n * from the response. The estimate only has to be close, because the correction\n * lands right after.\n *\n * Kernel time is charged as wall-clock since the session started, which\n * deliberately over-counts: Kernel's Standby Mode stops billing 5 seconds\n * after the last request, while this clock keeps running. Over-counting is the\n * safe direction for a hard cap, and it means an abandoned tab can't quietly\n * spend the budget.\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/** Kernel headful browser, per second. See https://www.kernel.sh/docs/info/pricing */\nexport const USD_PER_KERNEL_SECOND = 0.0001333336;\n\n/** Lifetime budget for the whole demo. Override with BUDGET_USD. */\nexport const BUDGET_USD = Number(Deno.env.get(\"BUDGET_USD\") ?? \"2\");\n\n/**\n * Calibrated against real responses. Prose runs about 4 characters per token;\n * question JSON is denser — lots of punctuation and short keys — and comes in\n * nearer 2.7.\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 /** Split out so the UI can show which meter is actually moving. */\n jevUsd: number;\n kernelUsd: number;\n inputTokens: number;\n kernelSeconds: number;\n calls: number;\n sessions: 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: boolean;\n state: BudgetState;\n estimateTokens: number;\n};\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 kernel_seconds REAL NOT NULL DEFAULT 0,\n calls INTEGER NOT NULL DEFAULT 0,\n sessions 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(\n inputTokens: number,\n kernelSeconds: number,\n calls: number,\n sessions: number,\n): BudgetState {\n const jevUsd = inputTokens * USD_PER_INPUT_TOKEN;\n const kernelUsd = kernelSeconds * USD_PER_KERNEL_SECOND;\n const spentUsd = jevUsd + kernelUsd;\n return {\n budgetUsd: BUDGET_USD,\n spentUsd,\n remainingUsd: Math.max(0, BUDGET_USD - spentUsd),\n jevUsd,\n kernelUsd,\n inputTokens,\n kernelSeconds,\n calls,\n sessions,\n exhausted: spentUsd >= BUDGET_USD,\n };\n}\n\ntype Delta = { tokens?: number; seconds?: number; calls?: number; sessions?: number };\n\n/** Move the ledger. Tokens are clamped at zero so a downward correction can't go negative. */\nasync function add(delta: Delta): Promise {\n await init();\n const { tokens = 0, seconds = 0, calls = 0, sessions = 0 } = delta;\n await sqlite.execute({\n sql: `INSERT INTO budget (id, input_tokens, kernel_seconds, calls, sessions, updated_at)\n VALUES (1, MAX(0, ?), MAX(0, ?), ?, ?, ?)\n ON CONFLICT (id) DO UPDATE SET\n input_tokens = MAX(0, input_tokens + ?),\n kernel_seconds = MAX(0, kernel_seconds + ?),\n calls = calls + ?,\n sessions = sessions + ?,\n updated_at = excluded.updated_at`,\n args: [\n tokens, seconds, calls, sessions, new Date().toISOString(),\n tokens, seconds, calls, sessions,\n ],\n });\n}\n\nexport async function getBudget(): Promise {\n await init();\n const { rows } = await sqlite.execute(\n \"SELECT input_tokens, kernel_seconds, calls, sessions FROM budget WHERE id = 1\",\n );\n const row = rows[0];\n return summarize(\n Number(row?.input_tokens ?? 0),\n Number(row?.kernel_seconds ?? 0),\n Number(row?.calls ?? 0),\n Number(row?.sessions ?? 0),\n );\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({ tokens: estimateTokens, calls: 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({ tokens: delta });\n}\n\n/** Charge browser time. Called as a session is accounted, and once more when it closes. */\nexport async function chargeKernelSeconds(seconds: number): Promise {\n if (seconds > 0) await add({ seconds });\n}\n\n/** Count a browser against the ledger's session tally. */\nexport async function noteSession(): Promise {\n await add({ sessions: 1 });\n}\n\n/**\n * Would a new browser fit? Refused on either meter, so a spent budget stops\n * handing out browsers rather than only refusing steps.\n */\nexport async function canStartSession(\n maxLive: number,\n live: number,\n): Promise<{ ok: true } | { ok: false; reason: \"budget\" | \"concurrency\"; state: BudgetState }> {\n const state = await getBudget();\n if (state.exhausted) return { ok: false, reason: \"budget\", state };\n if (live >= maxLive) return { ok: false, reason: \"concurrency\", state };\n return { ok: true };\n}",[211],"92e50c69-8ee3-4d17-9813-e12fe5cb8848","browser-use.ts","ba961748-b209-11f1-a2a2-1607ee4eb77e",17,["D",1789589027970],"/**\n * The Kernel half of the loop: turn the live page into text Jev can judge, and\n * then carry out the action Jev chose.\n *\n * Two halves that have to agree on one thing — coordinates.\n *\n * - `perceive()` runs a snippet inside the browser's own VM (Kernel's\n * Playwright execution endpoint) and returns the page as *data*: url,\n * title, visible text, and every visible interactive element with the\n * viewport coordinates of its centre. Jev never sees a screenshot; this is\n * the only view of the page it gets.\n * - `act()` uses Kernel's computer controls to move a real OS cursor and\n * click, so the live view shows the work happening.\n *\n * They agree because the browser runs in kiosk mode: the window is the page\n * viewport, so `getBoundingClientRect()` is already screen space.\n */\nimport type { Candidate, Decision, PageState } from \"./decide.ts\";\nimport {\n clickMouse,\n moveMouse,\n pressKey,\n runPlaywright,\n sleep,\n typeText,\n} from \"./kernel.ts\";\n\n/** Visible-text budget handed to Jev. The docs put the request cap near 32k tokens. */\nconst TEXT_CHARS = 2500;\n\n/** Interactive elements collected per page, before `decide.ts` trims to its own cap. */\nconst MAX_ELEMENTS = 400;\n\n/**\n * The snippet that runs in the browser. `page` is in scope and the returned\n * value comes back as `result`.\n *\n * The `closest()` filter is what makes this usable on a real site: without it\n * a Wikipedia article is mostly sidebar, and stage 1 would spend its whole\n * budget scoring navigation chrome.\n */\nconst PERCEIVE = `\nconst raw = await page.evaluate(() => {\n const CHROME = 'nav,header,footer,aside,[role=\"navigation\"],[role=\"banner\"],[role=\"contentinfo\"],[role=\"search\"]';\n const SEL = 'a[href],button,input,textarea,select,[role=\"button\"],[role=\"link\"],[role=\"tab\"],[contenteditable=\"true\"]';\n const seen = new Set();\n const out = [];\n for (const el of document.querySelectorAll(SEL)) {\n if (el.closest(CHROME)) continue;\n const r = el.getBoundingClientRect();\n if (r.width < 8 || r.height < 8) continue;\n if (r.bottom <= 0 || r.top >= window.innerHeight) continue;\n if (r.right <= 0 || r.left >= window.innerWidth) continue;\n const cs = getComputedStyle(el);\n if (cs.visibility === 'hidden' || cs.display === 'none' || Number(cs.opacity) < 0.05) continue;\n const label = String(\n el.innerText || el.value || el.getAttribute('aria-label') ||\n el.getAttribute('placeholder') || el.getAttribute('title') ||\n el.getAttribute('alt') || ''\n ).replace(/\\\\s+/g, ' ').trim().slice(0, 90);\n if (!label) continue;\n const key = label + '|' + Math.round(r.left) + '|' + Math.round(r.top);\n if (seen.has(key)) continue;\n seen.add(key);\n const tag = el.tagName.toLowerCase();\n out.push({\n tag,\n label,\n href: (el.getAttribute('href') || '').slice(0, 140),\n editable: tag === 'input' || tag === 'textarea' || el.isContentEditable === true,\n x: Math.round(r.left + r.width / 2),\n y: Math.round(r.top + r.height / 2),\n });\n if (out.length >= ${MAX_ELEMENTS}) break;\n }\n return {\n url: location.href,\n title: document.title,\n text: document.body.innerText.replace(/\\\\s+/g, ' ').trim().slice(0, ${TEXT_CHARS}),\n candidates: out,\n };\n});\nreturn raw;\n`;\n\ntype RawPage = {\n url: string;\n title: string;\n text: string;\n candidates: Omit[];\n};\n\n/** Read the current page as data. */\nexport async function perceive(sessionId: string): Promise {\n const res = await runPlaywright(sessionId, PERCEIVE);\n if (!res.success) {\n throw new Error(res.error || \"could not read the page\");\n }\n const raw = res.result as RawPage;\n return {\n url: raw?.url ?? \"\",\n title: raw?.title ?? \"\",\n text: raw?.text ?? \"\",\n // `n` is assigned here rather than in the browser: it's the key Jev's\n // answers come back under, so it has to be stable and sequential.\n candidates: (raw?.candidates ?? []).map((c, n) => ({ ...c, n })),\n };\n}\n\n/** How long to let a click settle before reading the page again. */\nconst SETTLE_MS = 1200;\n\n/**\n * Carry out one decision.\n *\n * Clicking always moves the cursor first. That's not just for the video — a\n * bare click at coordinates the cursor never visited is the kind of thing\n * hover-sensitive menus ignore.\n */\nexport async function act(sessionId: string, decision: Decision): Promise {\n const target = decision.target;\n if (!target) return;\n\n await moveMouse(sessionId, target.x, target.y, 420);\n await clickMouse(sessionId, target.x, target.y);\n\n if (decision.action === \"type\" && decision.text) {\n await sleep(250);\n await typeText(sessionId, decision.text);\n // Enter is the assumption: a field we chose to type into is nearly always\n // a search box or a form's only input. A field that needs a separate\n // submit click gets one on the next step.\n await pressKey(sessionId, [\"Enter\"]);\n }\n\n await sleep(SETTLE_MS);\n}\n\n/** One line describing what happened, for the step log and Jev's own history. */\nexport function describeAction(decision: Decision): string {\n if (decision.action === \"done\") return \"stop — goal reached\";\n const target = decision.target;\n const what = target ? `\"${target.label}\"` : \"nothing\";\n return decision.action === \"type\"\n ? `type \"${decision.text}\" into ${what}`\n : `click ${what}`;\n}",[218],"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.",[225],"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.",[231],"a6c4385d-8c86-4d90-bb2f-e40fa8f5ad86","tests","01a0abce-8571-76e1-8061-ca995244ffd6",["D",1789588833583],"directory",[237],"547cc93c-0b46-4b3d-b204-3199dbf1b11e","frontend","01a0abce-8571-76e1-8061-c0e52b5be3b5",["D",1789588833583],[243],"pulls","branches","forks","envVars",{"_254":256,"_257":70},"connections",{"_254":70,"_255":70},"count","unfilledCount",2,"emptyCount",{"_48":242,"_37":243,"_35":244,"_169":-5,"_46":47,"_45":170,"_171":66,"_43":358,"_13":70,"_39":240,"_41":-5,"_29":30,"_174":-5,"_278":359,"_32":360},{"_48":354,"_37":353,"_35":348,"_169":244,"_46":47,"_45":170,"_171":66,"_43":355,"_13":70,"_39":240,"_41":-5,"_29":30,"_174":-5,"_278":356,"_32":357},{"_48":345,"_37":346,"_35":347,"_169":348,"_46":47,"_45":170,"_171":30,"_43":349,"_13":70,"_39":40,"_41":350,"_29":30,"_174":-5,"_278":351,"_32":352},{"_48":341,"_37":340,"_35":336,"_169":244,"_46":47,"_45":170,"_171":66,"_43":342,"_13":70,"_39":240,"_41":-5,"_29":30,"_174":-5,"_278":343,"_32":344},{"_48":335,"_37":38,"_35":36,"_169":336,"_46":47,"_45":14,"_171":30,"_43":337,"_13":70,"_39":40,"_41":42,"_29":30,"_174":-5,"_278":338,"_32":339},{"_48":327,"_37":328,"_35":329,"_169":244,"_46":47,"_45":330,"_171":66,"_43":331,"_13":170,"_39":26,"_41":332,"_29":30,"_174":-5,"_278":333,"_32":334},{"_48":319,"_37":320,"_35":321,"_169":244,"_46":47,"_45":322,"_171":66,"_43":323,"_13":170,"_39":40,"_41":324,"_29":30,"_174":-5,"_278":325,"_32":326},{"_48":311,"_37":312,"_35":313,"_169":244,"_46":47,"_45":314,"_171":30,"_43":315,"_13":170,"_39":40,"_41":316,"_29":30,"_174":-5,"_278":317,"_32":318},{"_48":236,"_37":237,"_35":238,"_169":-5,"_46":47,"_45":170,"_171":66,"_43":308,"_13":70,"_39":240,"_41":-5,"_29":30,"_174":-5,"_278":309,"_32":310},{"_48":230,"_37":231,"_35":232,"_169":-5,"_46":47,"_45":170,"_171":30,"_43":305,"_13":70,"_39":26,"_41":234,"_29":30,"_174":-5,"_278":306,"_32":307},{"_48":224,"_37":225,"_35":226,"_169":-5,"_46":47,"_45":170,"_171":30,"_43":302,"_13":70,"_39":26,"_41":228,"_29":30,"_174":-5,"_278":303,"_32":304},{"_48":217,"_37":218,"_35":219,"_169":-5,"_46":47,"_45":220,"_171":30,"_43":299,"_13":70,"_39":40,"_41":222,"_29":30,"_174":-5,"_278":300,"_32":301},{"_48":210,"_37":211,"_35":212,"_169":-5,"_46":47,"_45":213,"_171":30,"_43":296,"_13":170,"_39":40,"_41":215,"_29":30,"_174":-5,"_278":297,"_32":298},{"_48":203,"_37":204,"_35":205,"_169":-5,"_46":47,"_45":206,"_171":30,"_43":293,"_13":70,"_39":40,"_41":208,"_29":30,"_174":-5,"_278":294,"_32":295},{"_48":196,"_37":197,"_35":64,"_169":-5,"_46":47,"_45":198,"_171":30,"_43":290,"_13":170,"_39":200,"_41":201,"_29":30,"_174":50,"_278":291,"_32":292},{"_48":189,"_37":190,"_35":191,"_169":-5,"_46":47,"_45":192,"_171":30,"_43":287,"_13":170,"_39":40,"_41":194,"_29":30,"_174":-5,"_278":288,"_32":289},{"_48":183,"_37":184,"_35":185,"_169":-5,"_46":47,"_45":170,"_171":30,"_43":284,"_13":70,"_39":40,"_41":187,"_29":30,"_174":-5,"_278":285,"_32":286},{"_48":176,"_37":177,"_35":178,"_169":-5,"_46":47,"_45":179,"_171":30,"_43":281,"_13":70,"_39":40,"_41":181,"_29":30,"_174":-5,"_278":282,"_32":283},{"_48":166,"_37":167,"_35":168,"_169":-5,"_46":47,"_45":170,"_171":66,"_43":277,"_13":70,"_39":40,"_41":173,"_29":30,"_174":-5,"_278":279,"_32":280},["D",1789588833583],"children",[],[167],["D",1789588969304],[],[177],["D",1789588833583],[],[184],["D",1789589027405],[],[190],["D",1789589059287],[],[197],["D",1789588997490],[],[204],["D",1789588968519],[],[211],["D",1789589027970],[],[218],["D",1789588833583],[],[225],["D",1789588833583],[],[231],["D",1789588833583],[],[237],"79588ce1-a520-4f24-bd1d-1a35911e5912","root.tsx","01a0abce-8571-76e1-8061-bf005da2f3ad",19,["D",1789589059333],"/** @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 keyframes, which Twind's\n * Tailwind v2 theme has no way to express.\n *\n * Dark by design. The thing this page is for is being screen-recorded, and\n * white-on-near-black stays legible at Twitter's compression and at a glance\n * from across a room.\n */\nconst CSS = `\nhtml, body { background: #0b0b0d; color: #fff; }\n@keyframes captionIn {\n from { opacity: 0; transform: translateY(8px); }\n to { opacity: 1; transform: none; }\n}\n.caption-in { animation: captionIn 260ms ease-out; }\n@keyframes breathe {\n 0%, 100% { opacity: 1; }\n 50% { opacity: 0.3; }\n}\n.breathe { animation: breathe 1.1s ease-in-out infinite; }\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 Jev Browser Use\n \n \n \n \n \n \n \n \n

Diff · v22