Jev Browser Use

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_468":469,"_470":471},"routes/_app.x.$handle.$name",{"_107":106,"_32":46,"_116":93,"_27":117,"_13":14,"_118":-5,"_11":119,"_120":121,"_122":123,"_124":125,"_126":127,"_20":-5,"_128":129,"_130":131,"_132":25,"_133":134,"_135":62,"_136":-5,"_137":-5,"_138":139},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":53,"_54":55,"_56":57,"_18":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":25},"version",241,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/root.tsx","latestPath","fileId","01a0abce-8571-76e1-8061-bf005da2f3ad","name","root.tsx","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; }\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; }\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.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); }\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

Diff · v241