[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_117":118,"_119":120},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","kernel","name","jev-browser-use","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":56,"_57":58,"_59":60,"_61":62,"_63":64,"_65":34,"_66":-5,"_67":-5,"_68":69,"_70":71,"_72":73,"_74":75,"_76":77,"_78":-5,"_79":80,"_81":80,"_82":83,"_84":83,"_85":83,"_86":80,"_87":80,"_88":89,"_90":91,"_92":93,"_94":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/kernel/jev-browser-use/code/frontend/components/App.tsx","extension","id","7c8a1d54-56d0-4dfa-947b-6a81363b4e26","App.tsx","fileId","01a0abce-8571-76e1-8061-8ef5b457b140","parentId","01a0abce-8571-76e1-8061-9aec4666b155","branchId","789b925f-1f04-4496-b61e-c55aa361585d","branchVersion",249,"latest",true,"createdAt",["D",1789607722942],"version",13,"fileType","script","content","/** @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 SessionStart,\n type Setup,\n sleep,\n startSession,\n step as stepApi,\n type StepResult,\n stopSession,\n} from \"../lib/api.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\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 /** 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 const unconfigured = config &&\n (!config.setup.typesafe.configured || !config.setup.kernel.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 {unconfigured && config && (\n

\n {!config.setup.typesafe.configured && (\n \n )}\n {!config.setup.kernel.configured && (\n \n )}\n

\n )}\n\n

\n {stage}\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}","deleted",false,"label",[47,48,24],"frontend","components","3c438ea3-80e8-4cac-9708-6511f055598d",["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=1789617364&sig=f3fca31160215d4600607b3a25141e9b8af671842e4768be1ee50149df0ddcea","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","01a0abce-8571-76e1-8061-dc657cf63b40","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","b2fd4880-5c2e-11f0-9801-5764bf98a432","tursoName","3c438ea380e84cac97086511f055598d","tursoHostname","3c438ea380e84cac97086511f055598d-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789590099209],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_116":112},"org",{"_9":10,"_109":110,"_111":112,"_61":-5,"_113":114,"_115":34},"branch",{"_37":95,"_11":96,"_22":30,"_97":49,"_98":99,"_100":101,"_102":54,"_103":104,"_105":106,"_107":12,"_108":10},"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","displayName","KERNEL","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/772b82b9-bcf2-4ee8-2b88-3bbabc7f9801/square512?exp=1789617364&sig=470ce29e4ef2905e282bc7ab7cf9ed12e7c940b8b9a38626f5dc5b4b66846098","tier","business","canRestrictVals","profileImageUrl","ctx",{"_88":-5,"_150":151,"_152":153,"_154":155,"_156":44,"_157":44,"_158":44,"_159":34,"_160":-5,"_161":-7,"_162":-7,"_163":69,"_164":44,"_165":44,"_166":-5,"_167":44,"_168":44,"_169":44,"_170":-5},"ENV",{"_121":122,"_123":124,"_125":96,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139,"_140":141,"_142":143,"_144":145,"_146":147,"_148":149},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]