Jev Browser Use

,\n // so

alone still leaks furniture into the text Jev reads.\n // (No backticks in this comment: it lives inside a template literal.)\n const root = document.querySelector(\n 'article, #mw-content-text, [role=\"main\"], main, #content'\n ) || document.body;\n\n return {\n url: location.href,\n title: document.title,\n text: (root.innerText || '').replace(/\\\\s+/g, ' ').trim().slice(0, ${TEXT_CHARS}),\n candidates: found,\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. `dom`\n // keeps pointing at the element.\n candidates: (raw?.candidates ?? []).map((c, n) => ({ ...c, n })),\n };\n}\n\n/**\n * Scroll an element into view and report where to click it.\n *\n * Coordinates measured during `perceive()` are a Jev round trip old by the time\n * we click, and for anything below the fold they aren't even on screen. Asking\n * the browser where the element is *now* fixes both.\n *\n * Everything must happen inside `page.evaluate`. This snippet runs in Kernel's\n * Node VM, where `document` and `window` don't exist — only `page` does. An\n * earlier version called `document.querySelector` directly, so every call threw\n * and the click fell back to stale coordinates; the page never changed and Jev\n * picked the same control again, step after step.\n *\n * The target is the middle of the element **and** the viewport, not the middle\n * of the element. `scrollIntoView({block: 'center'})` cannot centre an element\n * taller than the viewport, so its own midpoint can sit off-screen — and Kernel\n * answers an out-of-bounds coordinate with a 400 rather than clamping it.\n * Returns null when the two don't overlap at all.\n */\nfunction locate(dom: number): string {\n return `\nreturn await page.evaluate(async (d) => {\n const el = document.querySelector('[data-jev=\"' + d + '\"]');\n if (!el) return null;\n el.scrollIntoView({ block: 'center', behavior: 'auto' });\n await new Promise((resolve) => setTimeout(resolve, 150));\n const r = el.getBoundingClientRect();\n const W = window.innerWidth - 1;\n const H = window.innerHeight - 1;\n const left = Math.max(0, Math.min(r.left, W));\n const right = Math.max(0, Math.min(r.right, W));\n const top = Math.max(0, Math.min(r.top, H));\n const bottom = Math.max(0, Math.min(r.bottom, H));\n if (right < left || bottom < top) return null;\n return { x: Math.round((left + right) / 2), y: Math.round((top + bottom) / 2) };\n}, ${dom});\n`;\n}\n\n/** Keep a coordinate inside the screen, whatever the browser reported. */\nfunction clamp(n: number, max: number): number {\n return Math.max(0, Math.min(max, Math.round(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 const located = await runPlaywright(sessionId, locate(target.dom));\n if (!located.success) {\n throw new Error(\n `could not locate the control to click: ${located.error ?? \"unknown\"}`,\n );\n }\n const at = located.result as { x: number; y: number } | null;\n // Deliberately no fallback to the coordinates perceive() measured. They are a\n // Jev round trip stale, and for anything below the fold they were never on\n // screen at all — clicking them lands somewhere arbitrary, the page doesn't\n // change, and Jev picks the same control again next step. Failing loudly is\n // what makes that visible instead of silent.\n if (!at) {\n throw new Error(`\"${target.label}\" is no longer on the page`);\n }\n const x = clamp(at.x, VIEWPORT.width - 1);\n const y = clamp(at.y, VIEWPORT.height - 1);\n\n await moveMouse(sessionId, x, y, 420);\n await clickMouse(sessionId, x, 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}",[226],"f482d0ca-cebb-4629-83e3-d8adca6cf577","README.md","01a0abce-8571-76e1-8061-d5a5e82286cc",76,["D",1789592730161],"# Jev Browser Use\n\nDescribe a task. Jev picks every next move in a live cloud browser you watch in\nan iframe.\n\n[Try it](url:index.ts) · [Record it square](url:index.ts?present=1)\n\n## The thing I went looking for and didn't find\n\nTypeSafe's docs have **no computer-use guide.** `docs.typesafe.ai/demos.md` lists\nexactly one demo (Smart Home Assistant). The wikiracing demo that looks like\ncomputer use only exists as a launch-blog demo — no docs page, no code, no\nwalkthrough.\n\nWhat the blog *does* say, in its \"Nuance\" sections, is the whole spec:\n\n> **Jev supports a cardinality up to 255.** For the higher cardinality choices,\n> we do a 2 stage-system of scoring independently then making an explicit choice,\n> hence the occasional slowdown.\n\n> The demo is on structured state as a data structure with **text, not on images**\n> (yet…)\n\nSo Jev never sees the screen, and it never emits an action. It has no string\noutput at all — only `choice`, `score`, `noul`. \"Browser use with Jev\" therefore\ncan't be a model emitting tool calls. It's:\n\n> **code builds a closed set out of the page → Jev ranks and chooses within it →\n> code does the clicking.**\n\nThat constraint is the design, not a workaround. Every action is a value Jev was\nhanded, so it cannot invent a selector, hallucinate a URL, or make a type error.\n\n## The loop\n\n```mermaid\nsequenceDiagram\n participant B as Browser (the page)\n participant H as index.ts (Hono)\n participant K as Kernel\n participant J as Jev\n B->>H: POST /api/step\n H->>K: playwright/execute → url, title, content text, tagged elements\n H->>J: stage 1 — one noul per candidate: \"is this the goal / a step toward it?\"\n J-->>H: two probabilities per candidate\n H->>H: score = goal + (1 - goal) * closer, keep the top 24\n H->>J: stage 2 — one choice over the finalists, plus __done__\n J-->>H: the control to activate, with a probability and a confidence\n H->>K: move_mouse (Bézier) → click_mouse\n H-->>B: the decision, the ledger, and the step\n```\n\nThe **browser** drives the loop by calling `/api/step` repeatedly. That keeps\neach request short and lets the UI render every step as it lands, which is the\nwhole point of the demo.\n\n## What the two stages are for\n\nStage 1 is a **filter**, not a ranking you should trust. On a fixture where the\ngoal link sits beside a plausible neighbour, stage 1 ranks the neighbour first:\n\n```\n0.708 goal 0.21 closer 0.63 Gustave Eiffel\n0.626 goal 0.22 closer 0.52 Search Wikipedia\n0.622 goal 0.38 closer 0.39 Eiffel Tower ← the goal\n```\n\nThat's fine. Stage 1 only has to keep the goal in the finalist set, and stage 2 —\nwhich sees all 24 finalists side by side — picks the Eiffel Tower. Two atomic\nquestions beat one compound one: the first version asked a single \"does this move\nus closer?\", which conflates *the goal* with *a step toward it*, and it clicked\nthe biographer. Same cost either way, since questions in a request are evaluated\nin parallel.\n\nRun it yourself: [`tests/decide.ts`](url:tests/decide.ts) needs no browser.\n\n## Cost\n\nTwo meters, one $2 ledger in SQLite (`budget.ts`):\n\n| Meter | Rate | A step costs |\n| --- | --- | --- |\n| Jev | $0.042 / 1M input tokens, output free | ~$0.0002 |\n| Kernel | $0.0001333336 / sec (headful) | ~$0.008 / minute |\n\n**The browser is what costs money, not the model.** A minute of headful Chromium\nis 40× a Jev step. So the caps are aimed at the browser: `MAX_LIVE_SESSIONS = 5`\n(Kernel's Developer-tier ceiling, so concurrent burn is at most ~$0.04/minute),\na 240s Kernel idle timeout, and a burst limit of 6 sessions/min per IP. Kernel\ntime is charged as wall-clock, which deliberately over-counts — Kernel's Standby\nMode stops billing 5s after the last request, while this clock keeps running.\nOver-counting is the safe direction for a hard cap.\n\nSet `BUDGET_USD` to move the cap. Current spend is in the app's header, in every\nresponse body, and in `SELECT * FROM budget`.\n\n## Three bugs a real page found\n\nThe `perceive()` snippet was measured against a live Wikipedia article, not\nreasoned about — see `@stevekrouse/browser-tester`'s `tests/jev-perceive.ts`,\nwhich runs the exact snippet. All three were real:\n\n1. **Text came from `document.body`**, which on Wikipedia is mostly furniture —\n \"Jump to content Main menu Search Appearance Donate Create account\". Jev was\n being asked to navigate a page whose text was the chrome. Now it reads the\n content root (`article`, `#mw-content-text`, …) and only falls back to the body.\n2. **A candidate's centre could sit below the fold.** The measured page had one at\n `y=519` in a 513px viewport — an element whose *top* is on screen can have its\n *centre* off it, and the centre is what gets clicked. Centres are now required\n to be inside the viewport.\n3. **Nothing below the fold was reachable at all.** Every candidate is now tagged\n with `data-jev` in the live DOM, so `act()` can scroll it into view and re-read\n where it actually is before clicking. That took the candidate count on the same\n page from **10 to 195**.\n\n## Limits, honestly\n\n- **Typing is the weak spot.** Jev can't write text, so `harvestTexts()` pulls\n quoted phrases out of *your* task and Jev chooses which to type. A task with no\n quoted phrase can't type anything. This is the one place the no-strings\n constraint genuinely costs capability rather than buying safety.\n- **No backtracking.** There's no history-aware \"that didn't work, go back\". The\n recent-actions list is in the state, so Jev can avoid repeating itself, but\n there's no undo.\n- **12 steps.** `MAX_STEPS` in `index.ts`. Wikiracing often needs more.\n- **The live view is read-only.** `?readOnly=true`, so a viewer can't fight the\n agent for the mouse. It's a demo, not a shared remote desktop.\n\n## Files\n\nSee [`AGENTS.md`](url:AGENTS.md) for the file map.\n\n## Setup\n\nTwo keys, both required:\n\n- `TYPESAFE_API_KEY` — from [console.typesafe.ai](https://console.typesafe.ai/settings/keys)\n- `KERNEL_API_KEY` — from [dashboard.onkernel.com](https://dashboard.onkernel.com/settings/api-keys)\n\nWithout them the page says which one is missing and asks nothing, rather than\nfailing on the first click. `/api/config` reports the gap.",[234],"d3cb9b1b-07cf-41e5-9a30-61174574a701","AGENTS.md","01a0abce-8571-76e1-8061-cdf4a9f6fc29",75,["D",1789592730128],"# jev-browser-use\n\nDescribe a task. Jev picks every next move in a live cloud browser you watch in\nan iframe.\n\n## File map\n\n| Path | Type | Purpose |\n| --- | --- | --- |\n| `index.ts` | http | Hono app: shell, assets, `GET /source`, `GET /api/config`, `POST /api/session`, `POST /api/step`, `POST /api/session/:id/stop` |\n| `decide.ts` | script | The Jev half: two-stage score-then-choose over the page's controls |\n| `browser-use.ts` | script | The Kernel half: `perceive()` reads the page as data, `act()` clicks/types |\n| `kernel.ts` | script | Kernel REST client — browsers, live view, computer controls |\n| `budget.ts` | script | SQLite ledger: the $5 total cap plus a $5 Kernel-only cap |\n| `sessions.ts` | script | Live-browser registry, the clock that bills elapsed seconds, and the Kernel limits |\n| `rate-limit.ts` | script | Best-effort in-memory per-IP + global burst control, bucketed per endpoint |\n| `typesafe.ts` | script | Minimal TypeSafe (System One) REST client + answer types |\n| `tests/decide.ts` | script | Runs `decide()` against a fixture page state — no browser needed |\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 | State machine, controls, step log, `?present=1` mode |\n| `frontend/components/Stage.tsx` | script | The square stage: task, live view iframe, caption, score strip |\n| `frontend/lib/api.ts` | script | Typed client for the val's own API |\n| `frontend/favicon.svg` | file | Icon |\n\n## The loop\n\n```\nperceive() → decide() → act() → repeat\n Kernel Jev Kernel\n```\n\n`POST /api/step` runs exactly one turn, and the **browser** drives the loop by\ncalling it repeatedly. That keeps each request short and lets the UI render\nevery step as it lands — which is the whole point of the demo.\n\n## Notes\n\n- **Jev cannot emit an action.** It has no string output at all — only `choice`,\n `score`, `noul`. So this is not a model emitting tool calls: `decide.ts` builds\n a closed set out of the page, Jev ranks and chooses within it, and ordinary\n code does the clicking. That's the constraint the whole design hangs on, and\n it's why the model can't hallucinate a selector or invent a URL.\n- **Two stages, per TypeSafe's own wikiracing demo** (\"Jev supports a cardinality\n up to 255... for the higher cardinality choices, we do a 2 stage-system of\n scoring independently then making an explicit choice\"). Stage 1 is one `noul`\n per candidate — a filter, it never picks. Stage 2 is one `choice` over the top\n `FINALISTS` plus `__done__`. Constants live at the top of `decide.ts`.\n- **Jev never sees the screen.** It gets `{ url, title, visible_text, candidates }`\n as text, plus the goal and recent actions. No screenshots — matching the blog's\n note that the Doom demo runs \"on structured state as a data structure with\n text, not on images (yet…)\".\n- **Typing is the one thing Jev can't source.** It can't write text, so\n `harvestTexts()` pulls quoted phrases out of the user's own task and Jev\n *chooses* which to type. A task with no quoted phrase simply can't type.\n- **Kiosk mode is load-bearing, not cosmetic.** It removes the browser chrome so\n the window *is* the page viewport, which makes `getBoundingClientRect()`\n coordinates equal the screen coordinates the computer controls click. With\n chrome in the way every click lands a toolbar-height too high.\n- **Clicking always moves the cursor first**, via `moveMouse` with Kernel's\n default Bézier path. It's not just for the video — hover-sensitive menus\n ignore a click at coordinates the cursor never visited.\n- **Two caps, two jobs.** `rate-limit.ts` is burst control, bucketed per endpoint\n so a burst of steps can't exhaust the allowance for starting a browser: 6/min\n per IP and 60/min globally on `/api/session`, 90/min and 300/min on\n `/api/step`. `budget.ts` is the hard cap: **$5.00 lifetime**, one row in SQLite\n so it survives isolates and deploys. Set `BUDGET_USD` to move it.\n- **Kernel has its own ceiling and its own rate limits**, because it's the meter\n that can run away — a browser bills whether or not anyone is watching it.\n - `KERNEL_BUDGET_USD` (**$5**) caps the browser meter on its own, so the\n expensive meter has a ceiling that still holds if the total is raised.\n Checked before every browser (`canStartSession`) *and* before every step\n (`kernelSpent`), so a run that crosses it mid-flight stops rather than\n finishing on a meter we've decided we can't afford.\n - `MAX_SESSION_SECONDS` (**180**) caps one browser's life. `MAX_STEPS` bounds\n the work a run does, not the time it takes — steps are what keep a browser\n alive, so a client looping on `/api/step` could otherwise hold one open\n indefinitely.\n - `PER_VISITOR_KERNEL_USD` (**$0.50 per rolling hour**, summed by IP) caps one\n visitor's share. The global budget is shared, so without this whoever\n arrives first can spend all of it and everyone after them gets a page that\n refuses to run.\n - `sweepStaleSessions` reconciles browsers whose clients walked away: nothing\n else accounts them, because `/api/step` is what moves time onto the ledger.\n It runs opportunistically on session creation, and clamps the charge to\n `MAX_SESSION_SECONDS` — a session row can sit `live` for days, and charging\n wall-clock since `started_at` would invent dollars that were never spent.\n *Known gap:* if nobody starts a session, an abandoned browser is never\n accounted. Kernel's 240s idle timeout still bounds the actual spend\n (~$0.032), so it's a ledger-accuracy gap rather than a money one; a cron\n calling `sweepStaleSessions()` would close it.\n- **The browser is what costs money, not the model.** A Jev step is ~$0.0002; a\n minute of headful browser is ~$0.008. `sessions.ts` charges wall-clock elapsed\n time, which deliberately over-counts (Kernel's Standby Mode stops billing after\n 5s idle) because over-counting is the safe direction for a hard cap.\n- **Browsers must be deleted, not abandoned.** `finish()` accounts the last\n seconds and deletes the session. It's called on done, on stop, on step-limit,\n on the session time cap, on a spent budget, and on error. The client also stops\n the session in a `finally`, so a loop that exits early can't leave a browser\n billing. Kernel's `timeout_seconds` (240s idle) is the backstop.\n- **`MAX_LIVE_SESSIONS` is 5**, matching Kernel's Developer-tier ceiling of 5\n concurrent browsers. Above that the sixth `createBrowser` is refused by Kernel\n rather than by this guard, so raise it only with a Kernel plan that allows\n more. Override with `MAX_LIVE_SESSIONS`; a value that isn't a positive integer\n falls back to 5 rather than to NaN, which would disable the cap entirely.\n Concurrency is a spend decision too: 5 at once is ~$0.04/minute of aggregate\n burn, so `KERNEL_BUDGET_USD` is reachable five times faster.\n- `data-*` hooks for Playwright: `data-stage`, `data-task`, `data-caption`,\n `data-status`, `data-scores`, `data-live-view`, `data-log`, `data-log-entry`,\n `data-task-input`, `data-url-input`, `data-run`, `data-stop`,\n `data-budget-spent`.\n- `?present=1` renders only the square stage, sized to the viewport. That's the\n mode to screen-record.\n- Env: `TYPESAFE_API_KEY` (https://console.typesafe.ai/settings/keys) and\n `KERNEL_API_KEY` (https://dashboard.onkernel.com/settings/api-keys). Both are\n required; `/api/config` reports which are missing and the page says so up front.\n `BUDGET_USD` and `KERNEL_BUDGET_USD` are optional overrides for the two caps.",[241],"a6c4385d-8c86-4d90-bb2f-e40fa8f5ad86","tests","01a0abce-8571-76e1-8061-ca995244ffd6",["D",1789588833583],"directory",[248],"547cc93c-0b46-4b3d-b204-3199dbf1b11e","frontend","01a0abce-8571-76e1-8061-c0e52b5be3b5",["D",1789588833583],[254],"pulls","branches","forks","envVars",{"_265":191,"_267":72},"connections",{"_265":72,"_266":72},"count","unfilledCount","emptyCount",{"_50":253,"_38":254,"_36":255,"_171":-5,"_48":49,"_47":172,"_173":68,"_45":403,"_13":72,"_40":251,"_42":-5,"_30":31,"_176":-5,"_292":404,"_33":405},{"_50":399,"_38":390,"_36":384,"_171":255,"_48":49,"_47":172,"_173":68,"_45":400,"_13":72,"_40":251,"_42":-5,"_30":31,"_176":-5,"_292":401,"_33":402},{"_50":391,"_38":392,"_36":393,"_171":384,"_48":49,"_47":394,"_173":31,"_45":395,"_13":183,"_40":41,"_42":396,"_30":31,"_176":-5,"_292":397,"_33":398},{"_50":381,"_38":382,"_36":383,"_171":384,"_48":49,"_47":385,"_173":31,"_45":386,"_13":191,"_40":41,"_42":387,"_30":31,"_176":-5,"_292":388,"_33":389},{"_50":377,"_38":376,"_36":371,"_171":255,"_48":49,"_47":172,"_173":68,"_45":378,"_13":72,"_40":251,"_42":-5,"_30":31,"_176":-5,"_292":379,"_33":380},{"_50":370,"_38":39,"_36":37,"_171":371,"_48":49,"_47":14,"_173":31,"_45":372,"_13":373,"_40":41,"_42":44,"_30":31,"_176":-5,"_292":374,"_33":375},{"_50":362,"_38":363,"_36":364,"_171":255,"_48":49,"_47":365,"_173":68,"_45":366,"_13":172,"_40":26,"_42":367,"_30":31,"_176":-5,"_292":368,"_33":369},{"_50":354,"_38":355,"_36":356,"_171":255,"_48":49,"_47":357,"_173":68,"_45":358,"_13":172,"_40":41,"_42":359,"_30":31,"_176":-5,"_292":360,"_33":361},{"_50":346,"_38":347,"_36":348,"_171":255,"_48":49,"_47":349,"_173":31,"_45":350,"_13":172,"_40":41,"_42":351,"_30":31,"_176":-5,"_292":352,"_33":353},{"_50":247,"_38":248,"_36":249,"_171":-5,"_48":49,"_47":172,"_173":68,"_45":343,"_13":72,"_40":251,"_42":-5,"_30":31,"_176":-5,"_292":344,"_33":345},{"_50":337,"_38":218,"_36":338,"_171":249,"_48":49,"_47":220,"_173":68,"_45":339,"_13":72,"_40":41,"_42":340,"_30":31,"_176":-5,"_292":341,"_33":342},{"_50":330,"_38":210,"_36":331,"_171":249,"_48":49,"_47":332,"_173":68,"_45":333,"_13":222,"_40":41,"_42":334,"_30":31,"_176":-5,"_292":335,"_33":336},{"_50":322,"_38":323,"_36":324,"_171":249,"_48":49,"_47":325,"_173":68,"_45":326,"_13":72,"_40":41,"_42":327,"_30":31,"_176":-5,"_292":328,"_33":329},{"_50":240,"_38":241,"_36":242,"_171":-5,"_48":49,"_47":243,"_173":31,"_45":319,"_13":222,"_40":26,"_42":245,"_30":31,"_176":-5,"_292":320,"_33":321},{"_50":233,"_38":234,"_36":235,"_171":-5,"_48":49,"_47":236,"_173":31,"_45":316,"_13":191,"_40":26,"_42":238,"_30":31,"_176":-5,"_292":317,"_33":318},{"_50":225,"_38":226,"_36":227,"_171":-5,"_48":49,"_47":228,"_173":31,"_45":313,"_13":230,"_40":41,"_42":231,"_30":31,"_176":-5,"_292":314,"_33":315},{"_50":217,"_38":218,"_36":219,"_171":-5,"_48":49,"_47":220,"_173":31,"_45":310,"_13":222,"_40":41,"_42":223,"_30":31,"_176":-5,"_292":311,"_33":312},{"_50":209,"_38":210,"_36":211,"_171":-5,"_48":49,"_47":212,"_173":31,"_45":307,"_13":214,"_40":41,"_42":215,"_30":31,"_176":-5,"_292":308,"_33":309},{"_50":201,"_38":202,"_36":66,"_171":-5,"_48":49,"_47":203,"_173":31,"_45":304,"_13":205,"_40":206,"_42":207,"_30":31,"_176":52,"_292":305,"_33":306},{"_50":194,"_38":195,"_36":196,"_171":-5,"_48":49,"_47":197,"_173":68,"_45":301,"_13":183,"_40":41,"_42":199,"_30":31,"_176":-5,"_292":302,"_33":303},{"_50":186,"_38":187,"_36":188,"_171":-5,"_48":49,"_47":189,"_173":68,"_45":298,"_13":191,"_40":41,"_42":192,"_30":31,"_176":-5,"_292":299,"_33":300},{"_50":178,"_38":179,"_36":180,"_171":-5,"_48":49,"_47":181,"_173":31,"_45":295,"_13":183,"_40":41,"_42":184,"_30":31,"_176":-5,"_292":296,"_33":297},{"_50":168,"_38":169,"_36":170,"_171":-5,"_48":49,"_47":172,"_173":68,"_45":291,"_13":72,"_40":41,"_42":175,"_30":31,"_176":-5,"_292":293,"_33":294},["D",1789588833583],"children",[],[169],["D",1789599854139],[],[179],["D",1789599861763],[],[187],["D",1789599875697],[],[195],["D",1789599848600],[],[202],["D",1789599875651],[],[210],["D",1789599519913],[],[218],["D",1789599867279],[],[226],["D",1789592730161],[],[234],["D",1789592730128],[],[241],"e355643f-3c29-4b27-8676-85d879ad3c39","key-check.ts","211a7fca-b20c-11f1-905e-1607ee4eb77e",44,["D",1789590058985],"/**\n * Diagnostic for a rejected KERNEL_API_KEY.\n *\n * Prints the key's *shape* and never the key: length, whether it carries stray\n * whitespace or quote characters, and a 4-byte hash prefix. The hash prefix is\n * the point — running this same file in another val and comparing the two\n * prefixes answers \"are these the same key?\" without either val revealing its\n * value.\n *\n * Then it asks Kernel directly with a read-only GET, so the raw status and body\n * are visible rather than paraphrased.\n *\n * Run with `run_file`. Creates nothing and spends nothing.\n */\nconst raw = Deno.env.get(\"KERNEL_API_KEY\");\nconst key = raw?.trim() ?? \"\";\n\nasync function hashPrefix(s: string): Promise {\n const buf = await crypto.subtle.digest(\n \"SHA-256\",\n new TextEncoder().encode(s),\n );\n return [...new Uint8Array(buf)]\n .slice(0, 4)\n .map((b) => b.toString(16).padStart(2, \"0\"))\n .join(\"\");\n}\n\nconsole.log(\"var present: \", raw !== undefined);\nconsole.log(\"raw length: \", raw?.length ?? 0);\nconsole.log(\"trimmed length: \", key.length);\nconsole.log(\"had surrounding whitespace:\", raw !== undefined && raw !== key);\nconsole.log(\"contains any whitespace: \", /\\s/.test(key));\nconsole.log(\"contains a quote char: \", /[\"'`]/.test(key));\nconsole.log(\"contains a colon or comma:\", /[:,]/.test(key));\nconsole.log(\"hash prefix: \", await hashPrefix(key));\n\n// Read-only, so this can't create a browser or cost anything.\nconst res = await fetch(\"https://api.onkernel.com/browsers\", {\n headers: { Authorization: `Bearer ${key}` },\n});\nconsole.log(\"\\nkernel GET /browsers status:\", res.status);\nconsole.log(\"kernel body:\", (await res.text()).slice(0, 400));",[],[248,323],"cbf3f73f-ec9c-4b0f-8dbe-76239bd2aefb","f9ab0b50-b209-11f1-b19e-1607ee4eb77e",84,["D",1789599867235],"/**\n * Exercises `decide()` against a fixture page state, with no browser involved.\n *\n * This is the cheap half of the loop to test and the expensive half to get\n * wrong: if stage 1 can't rank the goal link to the top of a Wikipedia article,\n * nothing downstream matters. The fixture deliberately contains the goal\n * (\"Eiffel Tower\") alongside ~20 plausible distractors, so the expected answer\n * is checkable by eye.\n *\n * Run with `run_file`. Makes two Jev calls.\n */\nimport { decide, harvestTexts, type PageState } from \"../decide.ts\";\n\nconst page: PageState = {\n url: \"https://en.wikipedia.org/wiki/Rubber_duck\",\n title: \"Rubber duck - Wikipedia\",\n text:\n \"A rubber duck is a toy shaped like a stylised yellow-billed duck, \" +\n \"usually made of rubber or rubber-like material such as vinyl plastic. \" +\n \"It is a popular bathtub toy. The rubber duck has become a cultural icon, \" +\n \"appearing in art, music, and software engineering (see rubber duck debugging).\",\n candidates: [\n { n: 0, tag: \"a\", label: \"Toy\", href: \"/wiki/Toy\", x: 100, y: 200 },\n { n: 1, tag: \"a\", label: \"Duck\", href: \"/wiki/Duck\", x: 100, y: 220 },\n { n: 2, tag: \"a\", label: \"Rubber\", href: \"/wiki/Rubber\", x: 100, y: 240 },\n { n: 3, tag: \"a\", label: \"Plastic\", href: \"/wiki/Plastic\", x: 100, y: 260 },\n { n: 4, tag: \"a\", label: \"Bathtub\", href: \"/wiki/Bathtub\", x: 100, y: 280 },\n { n: 5, tag: \"a\", label: \"Cultural icon\", href: \"/wiki/Cultural_icon\", x: 100, y: 300 },\n { n: 6, tag: \"a\", label: \"Rubber duck debugging\", href: \"/wiki/Rubber_duck_debugging\", x: 100, y: 320 },\n { n: 7, tag: \"a\", label: \"Sesame Street\", href: \"/wiki/Sesame_Street\", x: 100, y: 340 },\n { n: 8, tag: \"a\", label: \"Ernie\", href: \"/wiki/Ernie\", x: 100, y: 360 },\n { n: 9, tag: \"a\", label: \"Vulcanization\", href: \"/wiki/Vulcanization\", x: 100, y: 380 },\n { n: 10, tag: \"a\", label: \"Charles Goodyear\", href: \"/wiki/Charles_Goodyear\", x: 100, y: 400 },\n { n: 11, tag: \"a\", label: \"Paris\", href: \"/wiki/Paris\", x: 100, y: 420 },\n { n: 12, tag: \"a\", label: \"Eiffel Tower\", href: \"/wiki/Eiffel_Tower\", x: 100, y: 440 },\n { n: 13, tag: \"a\", label: \"France\", href: \"/wiki/France\", x: 100, y: 460 },\n { n: 14, tag: \"a\", label: \"Tourism\", href: \"/wiki/Tourism\", x: 100, y: 480 },\n { n: 15, tag: \"a\", label: \"Gustave Eiffel\", href: \"/wiki/Gustave_Eiffel\", x: 100, y: 500 },\n { n: 16, tag: \"a\", label: \"World's fair\", href: \"/wiki/World%27s_fair\", x: 100, y: 520 },\n { n: 17, tag: \"a\", label: \"Landmark\", href: \"/wiki/Landmark\", x: 100, y: 540 },\n { n: 18, tag: \"a\", label: \"Iron\", href: \"/wiki/Iron\", x: 100, y: 560 },\n { n: 19, tag: \"a\", label: \"Tokyo Tower\", href: \"/wiki/Tokyo_Tower\", x: 100, y: 580 },\n { n: 20, tag: \"input\", label: \"Search Wikipedia\", editable: true, x: 100, y: 40 },\n ],\n};\n\nconst task = \"Reach the article about the Eiffel Tower, using only links on the page.\";\n\nconsole.log(\"harvestTexts:\", harvestTexts(task));\n\nconst started = performance.now();\nconst decision = await decide(page, task, []);\n\nconsole.log(`\\ndecided in ${decision.ms}ms (wall ${Math.round(performance.now() - started)}ms)`);\nconsole.log(`model ${decision.model} · ${decision.considered} candidates scored`);\nconsole.log(\n `usage ${decision.usage.input_tokens} in / ${decision.usage.output_tokens} out`,\n);\n\nconsole.log(`\\naction: ${decision.action}`);\nconsole.log(`target: ${decision.target ? `\"${decision.target.label}\"` : \"(none)\"}`);\nconsole.log(`text: ${decision.text ?? \"(none)\"}`);\nconsole.log(\n `picked ${decision.probability?.toFixed(3) ?? \"?\"}` +\n ` · confidence ${decision.confidence?.toFixed(3) ?? \"?\"}` +\n ` · goal_reached ${decision.goalReached.toFixed(3)}`,\n);\n\nconsole.log(\"\\nstage 1, best first (score = goal + (1-goal)*closer):\");\nfor (const { candidate, goal, closer, score } of decision.ranked.slice(0, 8)) {\n console.log(\n ` ${score.toFixed(3)} goal ${goal.toFixed(2)} closer ${closer.toFixed(2)} ${candidate.label}`,\n );\n}\n\n// Two assertions, and deliberately not \"stage 1 ranked the goal first\".\n//\n// Stage 1 is a *filter*, and a noisy one: on this fixture it puts \"Gustave\n// Eiffel\" (goal 0.21, closer 0.63) above the goal link itself (goal 0.38,\n// closer 0.39). That's fine and is the point of the two-stage split — the\n// filter only has to keep the goal in the finalist set, and stage 2, which\n// sees all the finalists side by side, is what actually chooses.\nconst FINALISTS = 24;\nconst finalistLabels = decision.ranked.slice(0, FINALISTS).map((r) => r.candidate.label);\nconsole.log(\n `\\ngoal link survived the filter: ${finalistLabels.includes(\"Eiffel Tower\")}`,\n);\nconsole.log(`chose the goal link: ${decision.target?.label === \"Eiffel Tower\"}`);\nconsole.log(`did not stop immediately: ${decision.action !== \"done\"}`);",[],[248,210],"ef2f893b-91b4-4555-8a39-33bd924ec60e","2843618e-b222-11f1-9501-1607ee4eb77e",["D",1789599519913],"/**\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 reconcile,\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.\n// `unavailable` would mean the ledger itself couldn't be reached, which is a\n// different answer and not the one being tested here.\nconst huge = await reserve(Math.ceil((BUDGET_USD * 2) / USD_PER_INPUT_TOKEN));\nconsole.log(\n \"over-budget reservation refused:\",\n !huge.ok && !(\"unavailable\" in huge),\n);\n\n// A normal reservation must come back with a ledger to report, and the\n// correction from it must land on the *next* reservation rather than in a\n// write of its own. This spends two calls' worth (~$0.00007), which is the\n// only way to exercise the fold.\n//\n// The assertion is a delta rather than an absolute: this script may itself be\n// the only thing running, but the live demo is also moving the same ledger.\nconst estimate = estimateInputTokens(70, QUESTIONS);\nconst small = await reserve(estimate);\nconsole.log(\n \"normal reservation ok:\",\n small.ok,\n small.ok ? `(ledger now ${small.state.inputTokens} tokens / ${small.state.calls} calls)` : \"\",\n);\nif (small.ok) {\n reconcile(small, estimate + 25); // pretend the call ran 25 tokens over\n const next = await reserve(estimate);\n // The second reservation should carry its own estimate *plus* the 25 the\n // first one overspent. If the correction were dropped, or written twice,\n // this number would be 878 or 1,806 instead.\n const grew = next.ok ? next.state.inputTokens - small.state.inputTokens : NaN;\n const expected = estimate + 25;\n console.log(\n `pending correction folded into next reservation: ${grew === expected} (grew ${grew}, expected ${expected})`,\n );\n}\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);",[],[248,218],["D",1789588833583],[278,279,280],[248],"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 · v89