Jev Browser Use

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_116":117,"_118":119},"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/root.tsx","project",{"_22":48,"_11":12,"_35":49,"_50":-5,"_51":44,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63,"_64":34,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":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/root.tsx","extension","id","3a0d874c-3e6f-418a-9015-c6a416e82ce2","root.tsx","fileId","01a0abce-8571-76e1-8061-bf005da2f3ad","parentId","01a0abce-8571-76e1-8061-c0e52b5be3b5","branchId","789b925f-1f04-4496-b61e-c55aa361585d","branchVersion",257,"latest",true,"createdAt",["D",1789608386653],"version",8,"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 --kernel-green: #81b300;\n --beige: #f2f0e7;\n --beige-light: #faf9f2;\n --beige-muted: #e1dccf;\n --grey-light-03: #f0f0f3;\n --grey-light-07: #d0d2d9;\n --grey-light-11: #60646c;\n --grey-light-12: #1c2024;\n --charcoal: #212225;\n --grey-dark-12: #edeef0;\n}\n* { box-sizing: border-box; }\nhtml, body { margin: 0; background: var(--beige); color: var(--charcoal); }\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(--kernel-green); color: var(--charcoal); }\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: 1px solid var(--charcoal); 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(--grey-light-11); }\n.app-shell { max-width: 1312px; padding: 48px 32px 32px; margin: 0 auto; }\n.app-header { border-bottom: 1px solid var(--grey-light-07); 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(--beige-light); border: 1px solid var(--grey-light-07); }\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(--charcoal); border: 1px solid var(--charcoal); }\n.browser-placeholder { color: var(--grey-dark-12); min-height: 192px; }\n.field { display: block; background: var(--beige); color: var(--charcoal); border: 1px solid var(--grey-light-07); min-width: 0; }\n.field::placeholder { color: var(--grey-light-11); }\n.field:focus { border-color: var(--charcoal); }\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(--kernel-green); color: var(--charcoal); border-color: var(--kernel-green); }\n.button-outline { color: var(--charcoal); background: transparent; border-color: var(--grey-light-07); }\n.button-outline[aria-pressed=\"true\"] { background: var(--charcoal); color: var(--beige); border-color: var(--charcoal); }\n.button:disabled { opacity: .32; }\n.navigation-setting { border-top: 1px solid var(--grey-light-07); padding-top: 24px; }\n.navigation-checkbox { appearance: none; flex-shrink: 0; border: 1px solid var(--charcoal); background: var(--beige); display: grid; place-content: center; }\n.navigation-checkbox:checked { background: var(--kernel-green); }\n.navigation-checkbox:checked::after { content: '✓'; font-size: 12px; line-height: 1.2; color: var(--charcoal); }\n.navigation-checkbox:disabled { opacity: .64; }\n.history-panel { border-top: 1px solid var(--grey-light-07); 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(--charcoal); outline-offset: 4px; }\n.log-row { overflow-wrap: anywhere; }\n.action-log { margin: 0; padding: 0; list-style: none; }\n.log-row { background: var(--beige); border-bottom: 1px solid var(--grey-light-07); }\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(--beige); }\n.score-track { background: var(--grey-light-07); }\n.score-fill { background: var(--kernel-green); }\n.status-label { display: inline-block; border: 1px solid var(--grey-light-07); padding: 4px 8px; }\n.status-done { background: var(--kernel-green); color: var(--charcoal); border-color: var(--kernel-green); }\n.notice { padding: 16px; background: var(--beige-muted); border: 1px solid var(--charcoal); 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(--grey-light-07); }\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