Jev Browser Use

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_114":115,"_116":117},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","dprevoznik44","name","jev-browser-use","path","frontend/root.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":53,"_55":56,"_57":58,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":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/dprevoznik44/jev-browser-use/code/frontend/root.tsx","extension","id","ea179196-6e9a-4a61-9905-641796e490a9","root.tsx","fileId","01a0afca-520e-7587-b4b1-aad7c5ab97c3","parentId","01a0afca-520e-7587-b4b1-ad4e2347dc5c","branchId","cbf3540f-e161-4af0-ad0c-f9b24b3931fc","branchVersion",2,"latest",true,"createdAt",["D",1789655784094],"version",1,"fileType","script","content","/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst CSS = `\n:root {\n color-scheme: dark;\n --accent: #b4db54;\n --canvas: #111315;\n --panel: #1a1d20;\n --notice: #252b21;\n --border: #3c4249;\n --muted: #a6adb6;\n --text: #edf0f3;\n --ink: #11160b;\n --viewport: #0b0d0f;\n}\n* { box-sizing: border-box; scrollbar-color: #505861 var(--canvas); }\nhtml, body { margin: 0; background: var(--canvas); color: var(--text); }\nbody { font-family: 'Inter', sans-serif; font-weight: 300; text-transform: lowercase; }\nh1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 300; line-height: 1.2; }\nbutton, input, textarea { font: inherit; border-radius: 0; }\nbutton { cursor: pointer; }\nbutton:disabled, input:disabled { cursor: not-allowed; }\n[data-preserve-case], code, pre, kbd, samp, input, textarea { text-transform: none !important; }\n::selection { background: var(--accent); color: var(--ink); }\na:hover { text-decoration: underline; }\na, button, input, textarea { -webkit-tap-highlight-color: transparent; }\na:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {\n outline: 2px solid var(--accent); outline-offset: 4px;\n}\n.text-heading-04, .text-heading-06, .text-body-02, .text-body-03, .text-label-02,\n.text-mono-02, .text-tag { text-transform: lowercase; font-family: 'Inter', sans-serif; }\n.text-heading-04 { font-size: 42px; line-height: 1.2; letter-spacing: .84px; font-weight: 250; }\n.text-heading-06 { font-size: 25px; line-height: 1.2; letter-spacing: .5px; font-weight: 250; }\n.text-body-02 { font-size: 17px; line-height: 1.2; letter-spacing: 0; font-weight: 250; }\n.text-body-03 { font-size: 15px; line-height: 1.2; letter-spacing: 0; font-weight: 250; }\n.text-label-02 { font-size: 17px; line-height: 1.2; letter-spacing: 0; font-weight: 350; }\n.text-mono-02 { font-family: 'IBM Plex Mono', monospace; font-size: 15px; line-height: 1.2; letter-spacing: .21px; font-weight: 350; }\n.text-tag { font-size: 10px; line-height: 1.2; font-weight: 350; text-transform: uppercase; }\n.muted { color: var(--muted); }\n.app-shell { max-width: 1312px; padding: 48px 32px 32px; margin: 0 auto; }\n.app-header { border-bottom: 1px solid var(--border); padding-bottom: 32px; margin-bottom: 32px; }\n.app-header p { max-width: 752px; }\n.workspace-grid { display: grid; gap: 24px; align-items: start; }\n.control-panel, .stage-panel { min-width: 0; background: var(--panel); border: 1px solid var(--border); }\n.control-panel { padding: 24px; display: flex; flex-direction: column; gap: 24px; }\n.run-controls { min-height: 0; }\n.stage-panel { aspect-ratio: 1 / 1; }\n.browser-viewport { background: var(--viewport); border: 1px solid var(--border); }\n.browser-placeholder { color: var(--muted); min-height: 192px; }\n.field { display: block; background: var(--canvas); color: var(--text); border: 1px solid var(--border); min-width: 0; }\n.field::placeholder { color: var(--muted); }\n.field:focus { border-color: var(--accent); }\n.button { border: 1px solid transparent; border-radius: 0; font-weight: 400; text-align: center; }\n.button:hover:not(:disabled) { text-decoration: underline; }\n.button-primary { background: var(--accent); color: var(--ink); border-color: var(--accent); }\n.button-outline { color: var(--text); background: transparent; border-color: var(--border); }\n.button-outline[aria-pressed=\"true\"] { background: #2b3520; color: var(--accent); border-color: var(--accent); }\n.button:disabled { opacity: .45; }\n.navigation-setting { border-top: 1px solid var(--border); padding-top: 24px; }\n.navigation-checkbox { appearance: none; flex-shrink: 0; border: 1px solid var(--text); background: var(--canvas); display: grid; place-content: center; }\n.navigation-checkbox:checked { background: var(--accent); }\n.navigation-checkbox:checked::after { content: '✓'; font-size: 12px; line-height: 1.2; color: var(--ink); }\n.navigation-checkbox:disabled { opacity: .64; }\n.history-panel { border-top: 1px solid var(--border); padding-top: 24px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }\n.history-scroll { height: 192px; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; }\n.history-scroll:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; }\n.log-row { overflow-wrap: anywhere; }\n.action-log { margin: 0; padding: 0; list-style: none; }\n.log-row { background: var(--canvas); border-bottom: 1px solid var(--border); }\n.log-row + .log-row { margin-top: 4px; }\n.stage-status { height: 24px; }\n.decision-details[data-empty=\"true\"] { visibility: hidden; }\n.decision-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }\n.score-card { background: var(--canvas); }\n.score-track { background: var(--border); }\n.score-fill { background: var(--accent); }\n.status-label { display: inline-block; border: 1px solid var(--border); padding: 4px 8px; }\n.status-done { background: var(--accent); color: var(--ink); border-color: var(--accent); }\n.notice { padding: 16px; background: var(--notice); border: 1px solid #4c5938; overflow-wrap: anywhere; }\n.notice a, .inline-link { text-decoration: underline; text-decoration-thickness: .5px; text-underline-offset: 2px; }\n.notice a:hover, .inline-link:hover { opacity: .7; }\n.app-footer { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); }\n@media (min-width: 1024px) {\n .app-shell { padding-left: 64px; padding-right: 64px; }\n .workspace-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); height: max(752px, calc(100dvh - 256px)); }\n .workspace-grid > .stage-panel, .workspace-grid > .control-panel { height: 100%; min-height: 0; overflow: hidden; aspect-ratio: auto; }\n .workspace-grid .browser-placeholder { min-height: 0; }\n .run-controls { flex: 0 1 auto; overflow-y: auto; }\n .history-panel { flex: 1; min-height: 128px; }\n .history-scroll { flex: 1; height: auto; }\n}\n@media (max-width: 767px) {\n .stage-panel { aspect-ratio: auto; }\n .browser-viewport { flex: none; aspect-ratio: 4 / 3; }\n .browser-placeholder { min-height: 0; }\n [data-scores] { flex-direction: column; }\n}\n.presentation-stage { aspect-ratio: 1 / 1; }\n.presentation-stage .browser-viewport { flex: 1; aspect-ratio: auto; }\n.presentation-stage .browser-placeholder { min-height: 0; }\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 \n \n \n