Quick page

' });\n }\n });\n const historyClient = await page.context().newCDPSession(page);\n try {\n await page.goto(${JSON.stringify(slowUrl)}, { waitUntil: \"commit\" });\n await page.goto(${JSON.stringify(quickUrl)}, { waitUntil: \"commit\" });\n const history = await historyClient.send(\"Page.getNavigationHistory\");\n const from = history.entries[history.currentIndex];\n const to = history.entries[history.currentIndex - 1];\n const source = ${JSON.stringify(generated)}\n .replace('\"fromEntryId\":-1', '\"fromEntryId\":' + from.id)\n .replace('\"entryId\":-2', '\"entryId\":' + to.id);\n const started = Date.now();\n const result = await new Function(\"page\", \"return (async () => {\" + source + \"})()\")(page);\n const readyState = await page.evaluate(() => document.readyState);\n return { result, readyState, elapsed: Date.now() - started };\n } finally {\n releaseScript();\n await page.unrouteAll({ behavior: \"wait\" });\n await historyClient.detach();\n }\n `, 20);\n if (!slowCheck.success) throw new Error(slowCheck.error);\n const slow = slowCheck.result as { result: { url: string }; readyState: string; elapsed: number };\n check(slow.result.url === slowUrl, \"Back reaches a page with a blocked deferred load\");\n check(slow.readyState === \"loading\", \"Back succeeds before DOMContentLoaded\");\n check(slow.elapsed < 8000, \"Back does not consume the old load-event timeout\");\n console.log(\"14 live Back checks passed.\");\n\n} finally {\n await destroyBrowser(key, browser.session_id);\n console.log(\"Test browser deleted.\");\n}\n",[],[325,380],"c4bce6a1-6d81-46fe-90c6-c7c95137a1cd",["D",1789655667153],"directory",[206,207,208,209,210,211,212,213,214,215],[325],"2b9f4a30-a44a-410c-86bd-e7a39d517311","scripts","01a0afca-520e-7587-b4b1-b15152f3cf91",["D",1789655667153],[],[392],["D",1789655784094],[],[183,70],"eb5767eb-c3f4-4236-931a-61b4c0ad0a0d","index.tsx","01a0afca-520e-7587-b4b1-a45a4adf3d45",["D",1789655667153],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[183,401],"82b8c573-176a-4bad-b52e-4c731175839d","favicon.svg","01a0afca-520e-7587-b4b1-a14358ddb405",["D",1789655667153],"\n",[],[183,408],"02cc480f-a37d-4728-8b21-9666feedfd38","kernel-key.ts","01a0afca-520e-7587-b4b1-996a578906cf","01a0afca-520e-7587-b4b1-9cbdbaf8776f",["D",1789655667153],"/**\n * The visitor's Kernel API key, kept in this browser.\n *\n * localStorage, not a cookie and not a server session: the key belongs to the\n * person watching, it only has to survive their own reloads, and keeping it\n * here means the only copy on the server is the one attached to a live run —\n * which `sessions.ts` erases the moment that run ends.\n *\n * Every read goes through `normalizeKey`, so a value that got mangled by a\n * paste is treated as absent rather than sent to Kernel.\n */\n\nconst STORAGE_KEY = \"jev.kernelApiKey\";\n\n/** Longest key we'll hold, matching the server's own cap in `kernel.ts`. */\nconst MAX_KEY_CHARS = 200;\n\n/** Trim and drop a pasted `Bearer ` prefix, or return \"\" if it isn't key-shaped. */\nexport function normalizeKey(raw: string): string {\n const key = raw.trim().replace(/^Bearer\\s+/i, \"\").trim();\n if (!key || key.length > MAX_KEY_CHARS || /\\s/.test(key)) return \"\";\n return key;\n}\n\nexport function getKernelKey(): string {\n try {\n return normalizeKey(localStorage.getItem(STORAGE_KEY) ?? \"\");\n } catch {\n return \"\"; // storage disabled or blocked; the prompt just stays up\n }\n}\n\n/** Store (or, with an empty value, forget) a key. Returns what was stored. */\nexport function setKernelKey(raw: string): string {\n const key = normalizeKey(raw);\n try {\n if (key) localStorage.setItem(STORAGE_KEY, key);\n else localStorage.removeItem(STORAGE_KEY);\n } catch {\n // Nothing to do: the key still works for this page load, it just won't\n // survive a reload.\n }\n return key;\n}\n\n/** The last four characters, so the page can say which key is in use. */\nexport function keyHint(key: string): string {\n return key ? `••••${key.slice(-4)}` : \"\";\n}",[],[183,422,415],"lib","ed4bb37b-f020-4840-b843-69337e1e043f","api.ts","01a0afca-520e-7587-b4b1-97a1d8268964",["D",1789655815700],"/**\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 */\nimport { getKernelKey } from \"./kernel-key.ts\";\n\n/** A key this val has to supply itself: whether it's there, and where to add it. */\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\n/**\n * The Kernel key, which is not a `Setup` — nothing on this val can satisfy it.\n * The page asks the visitor for theirs and hands it over with the run.\n */\nexport type KernelKey = {\n keyVar: string;\n consoleUrl: string;\n};\n\nexport type Preset = { label: string; task: string; startUrl: string };\n\nexport type Config = {\n setup: { typesafe: Setup; kernel: KernelKey };\n presets: Preset[];\n maxSteps: number;\n maxLiveSessions: number;\n};\n\nexport type Candidate = {\n n: number;\n tag: string;\n label: string;\n href?: string;\n region?: \"content\" | \"navigation\" | \"header\" | \"footer\" | \"sidebar\" | \"search\";\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\" | \"back\" | \"done\" | \"stuck\";\n back?: { fromEntryId: number; entryId: number; url: string; alternatives: string[] };\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 error?: string;\n reason?: string;\n};\n\nexport type SessionStart = {\n sessionId: string;\n includeNavigation: boolean;\n task: string;\n startUrl: string;\n liveViewUrl: string;\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\n/**\n * Pull a human-readable message out of whatever came back.\n *\n * Three shapes reach here: our own `{ error: \"...\" }`, Val Town's envelope for\n * an uncaught throw (`{ message, name, stack }`), and — the case that produced\n * a bare \"[object Object]\" on screen — a body where `error` is itself an\n * object. `new Error(obj)` stringifies to \"[object Object]\", so an object has\n * to be unwrapped rather than passed along.\n */\nfunction messageOf(data: any, status: number): string {\n for (const candidate of [data?.error, data?.message]) {\n if (typeof candidate === \"string\" && candidate.trim()) return candidate;\n if (candidate && typeof candidate === \"object\") {\n const inner = candidate.message ?? candidate.error;\n if (typeof inner === \"string\" && inner.trim()) return inner;\n }\n }\n return `HTTP ${status}`;\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 new Error(messageOf(data, res.status));\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, includeNavigation = true): Promise {\n // The key travels with the run that uses it. `/api/session` is the only\n // endpoint that accepts one — steps and stops authenticate with the copy the\n // session itself carries.\n return post(\"/api/session\", {\n task,\n startUrl,\n includeNavigation,\n kernelApiKey: getKernelKey(),\n });\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}",[],[183,422,424],"d9c4c6c2-76df-4847-96cb-c0bdd3fc2d74",["D",1789655667153],[199,200],[183,422],"ea92dc04-fc02-4805-9ff7-9e1bb85bc9e8","Stage.tsx","01a0afca-520e-7587-b4b1-8c4da42a0b44","01a0afca-520e-7587-b4b1-91dcb6491472",["D",1789655667153],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Decision } from \"../lib/api.ts\";\n\n/**\n * The square. This is the thing that gets screen-recorded, so it's built to\n * survive a crop and a re-encode: one task line, the browser, one caption.\n * Nothing else competes for the eye.\n *\n * The proportions are fixed rather than fluid. A square whose parts move around\n * as text grows makes for a bad video, so the task is clamped to three lines and\n * the caption to one.\n */\nfunction pct(p: number | undefined): string {\n return p === undefined ? \"\" : `${Math.round(p * 100)}%`;\n}\n\n/** The three best-scoring candidates from stage 1, as a compact score strip. */\nfunction ScoreStrip({ decision }: { decision?: Decision }) {\n // Empty slots keep the same geometry before scoring and with fewer finalists.\n const slots = Array.from({ length: 3 }, (_, i) => decision?.ranked[i]);\n return (\n

\n {slots.map((ranked, i) => (\n \n

\n {ranked?.candidate.label || \"—\"}\n

\n \n {ranked?.score.toFixed(2) ?? \"—\"}\n \n

\n ))}\n

\n );\n}\n\nexport function Stage(\n { task, liveViewUrl, decision, action, step, maxSteps, done, error, closed, present }: {\n task: string;\n liveViewUrl: string | null;\n decision?: Decision;\n action?: string;\n step: number;\n maxSteps: number;\n done: boolean;\n error?: string | null;\n /**\n * The run ended, so its browser was deleted and the live view URL is dead.\n * Unmounting the iframe matters: Kernel's own view renders a red\n * \"Disconnected / websocket closed\" box, which reads as a bug rather than\n * as the tidy-up it is.\n */\n closed?: boolean;\n present?: boolean;\n },\n) {\n const scoring = decision && decision.action !== \"done\" && decision.action !== \"stuck\"\n ? decision : undefined;\n return (\n \n {/* The task, stated once and never restated. */}\n

\n live browser · read-only\n

\n \n {task}\n

\n \n\n {/* The browser itself, at its native 4:3 so nothing is letterboxed. */}\n

\n {liveViewUrl\n ? (\n \n )\n : (\n

\n {error ??\n (closed\n ? \"The browser has closed.\"\n : \"The browser appears here once a run starts.\")}\n

\n )}\n

\n\n {/* The caption. One line, big, and the only thing that changes. */}\n

\n \n {error\n ? \"stopped\"\n : decision?.action === \"stuck\"\n ? \"stuck\"\n : done\n ? \"done\"\n : step === 0\n ? (liveViewUrl ? \"starting\" : \"ready\")\n : `step ${step} / ${maxSteps}`}\n \n {decision && (\n \n {decision.considered} scored · {decision.ms}ms\n \n )}\n

\n\n \n {error ?? action ?? \"Waiting…\"}\n

\n\n

\n \n

\n picked{pct(scoring?.probability) || \"—\"}\n confidence{pct(scoring?.confidence) || \"—\"}\n goal reached{pct(scoring?.goalReached) || \"—\"}\n

\n \n \n );\n}",[],[183,442,435],"components","6fa0c820-ba7f-4894-bfcb-5bf85b988c00","App.tsx","01a0afca-520e-7587-b4b1-89c9147f5eba",4,["D",1789655816400],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport {\n type Config,\n getConfig,\n type KernelKey,\n type SessionStart,\n type Setup,\n sleep,\n startSession,\n step as stepApi,\n type StepResult,\n stopSession,\n} from \"../lib/api.ts\";\nimport { getKernelKey, keyHint, setKernelKey } from \"../lib/kernel-key.ts\";\nimport { Stage } from \"./Stage.tsx\";\n\n/** A missing key is the one failure worth explaining rather than reporting. */\nfunction MissingKey({ setup }: { setup: Setup }) {\n return (\n

\n This val has no {setup.keyVar} yet, so it\n can't run. Add one at{\" \"}\n {setup.envUrl}{\" \"}\n — get a key from{\" \"}\n {setup.consoleUrl}.\n

\n );\n}\n\n/**\n * The Kernel key prompt.\n *\n * The browser this demo drives is a real cloud Chromium, and it runs on the\n * visitor's own account — so the key is theirs too. Nothing on this val can\n * fill the gap: without a key from whoever is watching, there is no run.\n */\nfunction KernelKeyPanel(\n { kernel, activeKey, onChange }: {\n kernel: KernelKey;\n /** Not `key`: React reserves that name and never passes it to a component. */\n activeKey: string;\n onChange: (key: string) => void;\n },\n) {\n const key = activeKey;\n const [draft, setDraft] = useState(\"\");\n const [invalid, setInvalid] = useState(false);\n\n function save() {\n const saved = setKernelKey(draft);\n if (!saved) {\n setInvalid(true);\n return;\n }\n setInvalid(false);\n setDraft(\"\");\n onChange(saved);\n }\n\n if (key) {\n return (\n

\n running on your Kernel key{\" \"}\n {keyHint(key)}\n

\n onChange(setKernelKey(\"\"))}\n className=\"button button-outline mt-3 text-body-03 px-3 py-2\"\n >\n Use a different key\n \n

\n );\n }\n\n return (\n

your kernel key

\n This drives a real cloud browser on your own Kernel account. Paste a{\" \"}\n {kernel.keyVar}{\" \"}\n to start — get one from{\" \"}\n \n {kernel.consoleUrl}\n . It stays in this browser, and on the server only while your run is live.\n

\n {\n e.preventDefault();\n save();\n }}\n >\n {\n setDraft(e.target.value);\n setInvalid(false);\n }}\n placeholder=\"paste your Kernel API key\"\n autoComplete=\"off\"\n spellCheck={false}\n aria-label=\"Kernel API key\"\n className=\"field text-mono-02 w-full px-3 py-3\"\n />\n \n \n {invalid && (\n

\n That doesn't look like a key. Paste the whole value, with no spaces in it.\n

\n )}\n

\n );\n}\n\nfunction Log({ entries }: { entries: StepResult[] }) {\n const scroll = useRef(null);\n const followLatest = useRef(true);\n const lastScrollTop = useRef(0);\n useEffect(() => {\n if (!entries.length) followLatest.current = true;\n const el = scroll.current;\n if (!el) return;\n const follow = () => {\n if (!followLatest.current) return;\n el.scrollTop = el.scrollHeight;\n lastScrollTop.current = el.scrollTop;\n };\n follow();\n // Font loading and wrapped diagnostics can change row heights after render.\n const observer = new ResizeObserver(follow);\n observer.observe(el);\n if (el.firstElementChild) observer.observe(el.firstElementChild);\n return () => observer.disconnect();\n }, [entries.length]);\n return (\n

{\n const el = scroll.current;\n if (!el) return;\n if (el.scrollTop < lastScrollTop.current) followLatest.current = false;\n if (el.scrollHeight - el.scrollTop - el.clientHeight < 32) followLatest.current = true;\n lastScrollTop.current = el.scrollTop;\n }}>\n {!entries.length ? (\n

\n Every step lands here: what Jev chose, and how sure it was.\n

\n ) : (\n

\n \n {e.step}\n \n \n {e.error ?? e.action}\n \n {e.decision?.probability !== undefined && (\n \n {Math.round(e.decision.probability * 100)}%\n \n )}\n \n ))}\n

\n )}\n

\n );\n}\n\nexport function App() {\n const present = new URLSearchParams(location.search).get(\"present\") === \"1\";\n\n const [config, setConfig] = useState(null);\n const [task, setTask] = useState(\"\");\n const [startUrl, setStartUrl] = useState(\"\");\n const [includeNavigation, setIncludeNavigation] = useState(true);\n const [session, setSession] = useState(null);\n const [entries, setEntries] = useState([]);\n const [running, setRunning] = useState(false);\n const [done, setDone] = useState(false);\n const [error, setError] = useState(null);\n /**\n * The visitor's own Kernel key, read from this browser on mount. Held in\n * state as well as in storage so saving or clearing one re-renders the page.\n */\n const [kernelKey, setKey] = useState(() => getKernelKey());\n\n /** Set by the Stop button; the loop checks it between steps. */\n const stop = useRef(false);\n\n useEffect(() => {\n getConfig().then((c) => {\n setConfig(c);\n if (c.presets[0]) {\n setTask(c.presets[0].task);\n setStartUrl(c.presets[0].startUrl);\n }\n }).catch((err) => setError(String(err)));\n }, []);\n\n const maxSteps = config?.maxSteps ?? 12;\n const latest = entries[entries.length - 1];\n /**\n * The one key the visitor *can't* supply: TypeSafe's belongs to the val, and\n * only its owner can add it. The Kernel key is the opposite — the page asks\n * for it below.\n */\n const missingTypesafeKey = !!config && !config.setup.typesafe.configured;\n\n async function run() {\n if (running || !task.trim()) return;\n stop.current = false;\n setError(null);\n setEntries([]);\n setDone(false);\n setRunning(true);\n\n let started: SessionStart | null = null;\n let finished = false;\n try {\n started = await startSession(task, startUrl, includeNavigation);\n setSession(started);\n\n const history: string[] = [];\n // One extra turn: the step that crosses the limit is what tells us to\n // stop, so the loop has to be allowed to ask for it.\n for (let i = 0; i <= maxSteps; i++) {\n if (stop.current) break;\n const res = await stepApi(started.sessionId, history);\n setEntries((prev) => [...prev, res]);\n if (res.done) {\n finished = true;\n setDone(true);\n break;\n }\n history.push(res.action);\n await sleep(400);\n }\n } catch (err) {\n setError(err instanceof Error ? err.message : String(err));\n } finally {\n // Never leave a browser running because a loop exited early.\n if (started && !finished) {\n await stopSession(started.sessionId).catch(() => {});\n }\n setRunning(false);\n }\n }\n\n async function halt() {\n stop.current = true;\n if (session) await stopSession(session.sessionId).catch(() => {});\n }\n\n const stage = (\n \n );\n\n if (present) {\n return (\n

\n \n {stage}\n

\n \n );\n }\n\n return (\n

Jev Browser Use

\n A model that can't write, driving a browser. Jev scores every control\n on the page, picks one, and code clicks it.\n

\n\n {missingTypesafeKey && config && (\n

\n \n

\n )}\n\n

\n {stage}\n\n

\n {config && (\n \n )}\n

configure run

\n \n Task\n \n setTask(e.target.value)}\n rows={3}\n placeholder=\"Reach the article about the Eiffel Tower, using only links on the page.\"\n className=\"field text-body-02 w-full resize-none px-3 py-3\"\n />\n starting url\n setStartUrl(e.target.value)}\n placeholder=\"https://en.wikipedia.org/wiki/Rubber_duck\"\n className=\"field text-mono-02 w-full px-3 py-3\"\n />\n

\n\n {config && (\n

\n {config.presets.map((p) => (\n {\n setTask(p.task);\n setStartUrl(p.startUrl);\n }}\n data-preserve-case\n aria-pressed={task === p.task && startUrl === p.startUrl}\n className=\"button button-outline text-body-03 px-3 py-2\"\n >\n {p.label}\n \n ))}\n

\n )}\n\n

\n \n setIncludeNavigation(e.target.checked)}\n aria-describedby=\"navigation-help\"\n className=\"navigation-checkbox h-4 w-4\"\n />\n Include site navigation\n \n \n

\n\n

\n \n {running ? \"Running…\" : \"Run\"}\n \n {running && (\n \n Stop\n \n )}\n

\n\n

action history

\n \n

\n\n \n

\n );\n}",[],[183,442,444],"aee1520a-15f8-4736-bb97-b8bfd269311e",["D",1789655667153],[196,197],[183,442],"d35f7dba-69a4-4c64-8e11-b3d8d9069b2e",["D",1789655667153],[195,198,201,202,203],[183],["D",1789655667153],["D",1789656059638],{"_11":12,"_140":76},{"_11":12,"_136":76,"_75":76,"_30":74,"_137":138,"_139":24},{"_39":124,"_13":16,"_33":36,"_125":85,"_126":65,"_127":128,"_129":89,"_130":131,"_132":133,"_134":14,"_135":12},"ctx",{"_54":-5,"_161":497,"_498":499,"_500":501,"_502":24,"_503":24,"_504":24,"_505":98,"_506":-5,"_507":-7,"_508":-7,"_509":26,"_510":24,"_511":24,"_512":-5,"_513":24,"_514":24,"_515":24,"_516":-5},"ENV",{"_468":469,"_470":471,"_472":16,"_473":474,"_475":476,"_477":478,"_479":480,"_481":482,"_483":484,"_485":486,"_487":488,"_489":490,"_491":492,"_493":494,"_495":496},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · root.tsx