[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_311":312,"_313":314},"routes/_app.x.$handle.$name",{"_104":103,"_32":46,"_112":92,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":125,"_126":127,"_128":25,"_129":130,"_131":61,"_132":-5,"_133":-5,"_134":135},"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":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",76,"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/components/Overlay.tsx","latestPath","fileId","fa4b1250-a7d5-11f1-9310-1607ee4eb77e","name","Overlay.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport type Toast = {\n id: string;\n at: number;\n kind: \"said\" | \"result\" | \"error\";\n text: string;\n target?: string; // where the mouse was when this was said\n note?: string;\n diffs?: { path: string; added: string[]; removed: number }[];\n stats?: { turns: number; toolCalls: number; tokens: number; tps: number; totalMs: number };\n};\n\n// Lifetimes in ms. Each newer card above a card halves its remaining life, so a burst of activity clears fast.\nconst LIFE: Record = { said: 5000, result: 7000, error: 10000 };\nconst FADE = 1200;\nconst ms = (n: number) => n >= 1000 ? `${(n / 1000).toFixed(2)} s` : `${Math.round(n)} ms`;\n\n// Everything drawn over the page: the mic, the label by the cursor, and a strip along the bottom, never taller\n// than a tenth of the screen, holding one line each for the words being heard, what the agent is doing, and\n// what was said and what changed. Lines fade out; new ones push old ones off the top.\nexport function Overlay({ toasts, interim, pointer, live, mic, typed, onTyped, onSubmit, onExpire }: {\n toasts: Toast[];\n interim: string;\n pointer: { x: number; y: number; path: string; text: string } | null;\n live: { text: string; tools: string[]; turns: number } | null;\n mic: { supported: boolean; on: boolean; listening: boolean; status: string; toggle: () => void };\n typed: string | null;\n onTyped: (t: string | null) => void;\n onSubmit: (text: string) => void;\n onExpire: (id: string) => void;\n}) {\n const [now, setNow] = useState(performance.now());\n useEffect(() => {\n const t = setInterval(() => setNow(performance.now()), 100);\n return () => clearInterval(t);\n }, []);\n const life = (i: number) => LIFE[toasts[i].kind] / 2 ** (toasts.length - 1 - i);\n useEffect(() => {\n toasts.forEach((t, i) => { if (now - t.at > life(i)) onExpire(t.id); });\n }, [now]);\n const opacity = (i: number) => Math.max(0, Math.min(1, (life(i) - (now - toasts[i].at)) / FADE));\n\n const line = \"w-full max-w-3xl truncate rounded-lg px-3 py-1 text-[13px] leading-5 backdrop-blur\";\n\n return (\n <>\n \n {mic.listening ? \"●\" : \"🎙\"}\n \n\n {pointer && (\n \n {pointer.path === \"body\" ? \"empty space\" : pointer.path}{pointer.text && “{pointer.text.slice(0, 40)}”}\n {pointer.x},{pointer.y}\n \n )}\n\n

\n {toasts.map((t, i) => (\n

\n {t.kind === \"said\" && (\n

\n {t.text}\n {t.target && mouse: {t.target}}\n {t.note && {t.note}}\n

\n )}\n {t.kind === \"result\" && (\n

\n {t.text}\n {t.diffs?.map((d) => {d.path} +{d.added.length} −{d.removed})}\n {t.stats && (\n \n {t.stats.tps > 0 && `${t.stats.tps.toLocaleString()} tok/s · `}{t.stats.tokens.toLocaleString()} tok · {t.stats.turns}t/{t.stats.toolCalls}c · {ms(t.stats.totalMs)}\n \n )}\n

\n )}\n {t.kind === \"error\" &&

{t.text}

}\n

\n ))}\n\n {live && (\n

\n {live.tools.length ? live.tools.at(-1) : \"thinking…\"}\n {live.text && {live.text}}\n

\n )}\n\n {interim &&

{interim}

}\n

\n\n {typed !== null && (\n

\n onTyped((e.target as HTMLInputElement).value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") onSubmit(typed);\n if (e.key === \"Escape\") onTyped(null);\n }}\n placeholder=\"Say or type what to build or change\"\n className=\"pointer-events-auto w-full max-w-3xl rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-base shadow-lg focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n )}\n \n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport type Toast = {\n id: string;\n at: number;\n kind: \"said\" | \"result\" | \"error\";\n text: string;\n note?: string;\n diffs?: { path: string; added: string[]; removed: number }[];\n stats?: { turns: number; toolCalls: number; tokens: number; tps: number; totalMs: number };\n};\n\n// Lifetimes in ms. Each newer card above a card halves its remaining life, so a burst of activity clears fast.\nconst LIFE: Record = { said: 5000, result: 7000, error: 10000 };\nconst FADE = 1200;\nconst ms = (n: number) => n >= 1000 ? `${(n / 1000).toFixed(2)} s` : `${Math.round(n)} ms`;\n\n// Everything drawn over the page: the mic, and a strip along the bottom, never taller than a tenth of the\n// screen, holding one line each for the words being heard, what the agent is doing, and what was said and\n// what changed. Lines fade out; new ones push old ones off the top.\nexport function Overlay({ toasts, interim, live, mic, typed, onTyped, onSubmit, onExpire }: {\n toasts: Toast[];\n interim: string;\n live: { text: string; tools: string[]; turns: number } | null;\n mic: { supported: boolean; on: boolean; listening: boolean; status: string; toggle: () => void };\n typed: string | null;\n onTyped: (t: string | null) => void;\n onSubmit: (text: string) => void;\n onExpire: (id: string) => void;\n}) {\n const [now, setNow] = useState(performance.now());\n useEffect(() => {\n const t = setInterval(() => setNow(performance.now()), 100);\n return () => clearInterval(t);\n }, []);\n const life = (i: number) => LIFE[toasts[i].kind] / 2 ** (toasts.length - 1 - i);\n useEffect(() => {\n toasts.forEach((t, i) => { if (now - t.at > life(i)) onExpire(t.id); });\n }, [now]);\n const opacity = (i: number) => Math.max(0, Math.min(1, (life(i) - (now - toasts[i].at)) / FADE));\n\n const line = \"w-full max-w-3xl truncate rounded-lg px-3 py-1 text-[13px] leading-5 backdrop-blur\";\n\n return (\n <>\n \n {mic.listening ? \"●\" : \"🎙\"}\n \n\n

\n {toasts.map((t, i) => (\n

\n {t.kind === \"said\" && (\n

\n {t.text}\n {t.note && {t.note}}\n

\n )}\n {t.kind === \"result\" && (\n

\n )}\n {t.kind === \"error\" &&

{t.text}

}\n

\n ))}\n\n {live && (\n

\n {live.tools.length ? live.tools.at(-1) : \"thinking…\"}\n {live.text && {live.text}}\n

\n )}\n\n {interim &&

{interim}

}\n

\n\n {typed !== null && (\n

\n )}\n \n );\n}\n","createdAt",["D",1788472250266],"branchVersion","branchId","bcd0622a-e9a0-439d-804c-4b21a255e97d","id","6c39c4f0-b809-411f-9870-024217ce1962","openrouter-coder",["D",1785252223134],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Any OpenRouter model codes a web page live, with tok/s + cost","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789581599&sig=be8c9241dcaf80ae72eff5d4763f3300ec6426a8bddc365a5efaae5f85e4dee1","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019fa953-1907-764b-93b8-955c6a296213","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","6c39c4f0b809411f9870024217ce1962","tursoHostname","6c39c4f0b809411f9870024217ce1962-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789561254403],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_111":107},"org",{"_104":103,"_105":-5,"_106":107,"_18":57,"_108":109,"_110":25},"branch",{"_13":91,"_32":92,"_44":43,"_93":45,"_94":95,"_96":97,"_98":51,"_99":45,"_100":67,"_101":46,"_102":103},"isOwned",105,"voice","projectId","forkedBranchId","c2c67fa8-24f8-445b-bda0-6e7ff916defa","forkedBranchVersion",9,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":306,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":307,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":308,"_86":309,"_88":310,"_90":25},"tree",[219,228,229,230,231],"files",[219,220,221,222,223,224,225,226,227,228,229,230,231],"counts",{"_208":65,"_209":210,"_211":65,"_212":213,"_214":215},"contents",[165,166,167,168,169],"upstreamProject",{"_44":159,"_32":160,"_53":161,"_55":56,"_50":51,"_84":162},"upstreamBranch",{"_44":95,"_39":151,"_152":153,"_32":154,"_93":45,"_13":97,"_94":155,"_96":156,"_157":158,"_48":-5,"_90":25,"_50":51,"_102":103,"_66":67,"_101":46},"emptyEnvVars","flags",[136,137,138,139,140,141,142],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":150,"_144":-5},{"_44":149,"_144":-5},{"_44":148,"_144":-5},{"_44":147,"_144":-5},{"_44":146,"_144":-5},{"_44":145,"_144":-5},{"_44":143,"_144":-5},"10c1f4f2-c1e6-48dd-b02d-680389842a76","reporterId","62ac9562-0713-4959-9e8e-356ad3a8b6da","57835e22-f15c-47a3-bd57-88f34c013a36","618300a4-8ee3-4a49-a11d-2171ad745ad4","a8fb30ad-ea80-433b-b474-1c2b76bdd4ac","bf785351-a64b-49f6-ab0d-875e638b030a","94f26e3c-6677-4641-89a8-24b5715ab905",["D",1788465952443],"updatedAt",["D",1788466250976],"agentic","3b1e9452-ea7a-4e87-b511-7709945863af",27,"lockfileKey","1788466251332-esm.town_v_stevekrouse_openrouter-coder@9-agentic","96102714-f528-11ef-aa68-569c3dd06744","react-hono-starter","Starter template with client-side React & Hono server",{"_104":163,"_111":164},"templates","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789581599&sig=bed85510764f48a9de82762af4b4ce99c525d0ab75e5b57f327c71a53e183d4a",{"_44":202,"_32":203,"_30":204,"_173":-5,"_42":43,"_41":177,"_175":61,"_39":205,"_13":65,"_34":206,"_36":-5,"_24":25,"_179":-5,"_27":207},{"_44":196,"_32":197,"_30":198,"_173":-5,"_42":43,"_41":177,"_175":61,"_39":199,"_13":65,"_34":20,"_36":200,"_24":25,"_179":-5,"_27":201},{"_44":189,"_32":190,"_30":191,"_173":-5,"_42":43,"_41":192,"_175":25,"_39":193,"_13":177,"_34":35,"_36":194,"_24":25,"_179":-5,"_27":195},{"_44":181,"_32":182,"_30":183,"_173":-5,"_42":43,"_41":184,"_175":61,"_39":185,"_13":174,"_34":186,"_36":187,"_24":25,"_179":-5,"_27":188},{"_44":170,"_32":171,"_30":172,"_173":-5,"_42":43,"_41":174,"_175":61,"_39":176,"_13":177,"_34":35,"_36":178,"_24":25,"_179":-5,"_27":180},"1fdb020b-d542-4a37-a72c-28b9134725e9","openrouter.ts","01a068eb-ca37-739b-bb71-1a00322ab07a","parentId",2,"latest",["D",1788466708366],1,"const ENDPOINT = \"https://openrouter.ai/api/v1/chat/completions\";\nconst MAX_TOKENS = 8192;\n\n// Shown as one-click defaults in the UI; any OpenRouter slug works, with an\n// optional \"@provider-tag\" suffix to pin a specific serving endpoint.\nexport const DEFAULT_MODELS = [\n \"openai/gpt-oss-120b@cerebras\",\n \"moonshotai/kimi-k3@fireworks/fast\",\n \"anthropic/claude-opus-5-fast\",\n \"openai/gpt-5.6-luna\",\n \"google/gemini-3.6-flash\",\n \"z-ai/glm-5.2\",\n \"x-ai/grok-4.5\",\n];\n\nconst SYSTEM = `You write one complete HTML document, streamed top-to-bottom into a live browser.\n- Output raw HTML only: no prose, no code fences, no explanation.\n- Start with and end with , then stop.\n- In , include exactly this stylesheet setup: \n- Style everything with Tailwind utility classes (arbitrary values like h-[40%] are fine). No \n \n \n

\n \n \n \n\n",[],[203,253],"ebe3384f-c433-45f5-bdcd-ac477f85e588","favicon.svg","01a068eb-ca37-739b-bb70-fe32b88eb1de",["D",1788466678331],"\n",[],[203,260],"85cee822-2712-4725-8b38-46622fa77bea","pointer.ts","7cf421c4-a7d6-11f1-bea2-1607ee4eb77e","01a068eb-ca37-739b-bb70-fbb512b8ccd8",73,["D",1788471971856],7,"// Tracks the mouse inside the preview so \"move this over here\" can mean the places under the cursor as the\n// words were spoken. The hovered element gets an outline; `annotate` weaves positions into the sentence.\nexport type Pointer = {\n x: number; y: number; // viewport CSS pixels inside the preview\n pageX: number; pageY: number; // the same, plus scroll\n width: number; height: number;\n path: string; text: string; html: string; // the element under the mouse; path \"body\" means empty space\n near?: { path: string; text: string; distance: number }; // nearest element when over empty space\n};\n\n// The recognizer delivers words this long after they were spoken; positions are read that far back.\nexport const LAG_MS = 300;\n\nlet lastXY: { x: number; y: number } | null = null; // survives re-renders, since the mouse usually hasn't moved\n\nexport function watchPointer(doc: Document, onChange: (p: Pointer | null) => void) {\n let hovered: HTMLElement | null = null;\n const describe = (el: HTMLElement): string => {\n const parts: string[] = [];\n for (let e: HTMLElement | null = el; e && e !== doc.body && parts.length < 6; e = e.parentElement) {\n let s = e.tagName.toLowerCase();\n if (e.id) s += `#${e.id}`;\n else if (typeof e.className === \"string\" && e.className.trim()) s += \".\" + e.className.trim().split(/\\s+/).slice(0, 2).join(\".\");\n parts.unshift(s);\n }\n return parts.join(\" > \") || \"body\";\n };\n const highlight = (el: HTMLElement | null) => {\n if (hovered) hovered.style.outline = \"\";\n hovered = el;\n if (el) el.style.outline = \"2px solid rgba(37, 99, 235, 0.8)\";\n };\n // The closest leaf-ish element to a point in empty space, by distance to its box.\n const nearest = (x: number, y: number) => {\n let best: { el: HTMLElement; d: number } | null = null;\n for (const el of doc.body.querySelectorAll(\"*\")) {\n if (el.children.length > 3 || el.tagName === \"SCRIPT\" || el.tagName === \"STYLE\") continue;\n const r = el.getBoundingClientRect();\n if (r.width === 0 || r.height === 0) continue;\n const dx = Math.max(r.left - x, 0, x - r.right), dy = Math.max(r.top - y, 0, y - r.bottom);\n const d = Math.hypot(dx, dy);\n if (!best || d < best.d) best = { el, d };\n }\n return best ? { path: describe(best.el), text: (best.el.innerText ?? \"\").trim().slice(0, 60), distance: Math.round(best.d) } : undefined;\n };\n const at = (x: number, y: number) => {\n lastXY = { x, y };\n const hit = doc.elementFromPoint(x, y) as HTMLElement | null;\n const el = !hit || hit === doc.documentElement || hit === doc.body ? null : hit;\n highlight(el);\n onChange({\n x: Math.round(x), y: Math.round(y),\n pageX: Math.round(x + (doc.defaultView?.scrollX ?? 0)), pageY: Math.round(y + (doc.defaultView?.scrollY ?? 0)),\n width: doc.documentElement.clientWidth, height: doc.documentElement.clientHeight,\n path: el ? describe(el) : \"body\",\n text: el ? (el.innerText ?? \"\").trim().slice(0, 120) : \"\",\n html: el ? el.outerHTML.replace(/\\s*style=\"outline:[^\"]*\"/, \"\").slice(0, 400) : \"\",\n near: el ? undefined : nearest(x, y),\n });\n };\n doc.addEventListener(\"mousemove\", (e) => at(e.clientX, e.clientY));\n doc.addEventListener(\"mouseleave\", () => { lastXY = null; highlight(null); onChange(null); });\n if (lastXY) at(lastXY.x, lastXY.y);\n}\n\nexport function describePointer(p: Pointer | null): string {\n if (!p) return \"outside the preview\";\n return p.path === \"body\" ? `empty space at ${p.x},${p.y}${p.near ? ` (nearest: ${p.near.path})` : \"\"}` : `${p.path} at ${p.x},${p.y}`;\n}\n\n// Two positions count as the same place when they are on the same element and less than 60px apart.\nfunction samePlace(a: Pointer | null, b: Pointer | null) {\n if (!a || !b) return a === b;\n return a.path === b.path && Math.hypot(a.x - b.x, a.y - b.y) < 60;\n}\n\n// Builds the instruction: the sentence with a ⟨mouse: …⟩ mark before each run of words spoken from a new\n// place, then a note explaining the marks, the HTML of the elements they name, and where the mouse is now.\n// `times[i]` is when word i arrived; `pointerAt(t)` is where the mouse was at time t.\nexport function annotate(text: string, times: number[], pointerAt: (t: number) => Pointer | null, now: Pointer | null) {\n const words = text.split(/\\s+/).filter(Boolean);\n const marks: Pointer[] = [];\n const parts: string[] = [];\n let last: Pointer | null | undefined;\n words.forEach((w, i) => {\n const p = times[i] !== undefined ? pointerAt(times[i] - LAG_MS) : now;\n if (last === undefined || !samePlace(last, p)) {\n if (p) { parts.push(`⟨mouse: ${describePointer(p)}⟩`); marks.push(p); }\n last = p;\n }\n parts.push(w);\n });\n const elements = [...new Map(marks.filter((p) => p.path !== \"body\").map((p) => [p.path, p])).values()];\n const viewport = now ?? marks[0];\n const note = [\n `[⟨mouse: …⟩ marks give the user's mouse position in the preview at the moment the words after the mark were spoken, as CSS pixel coordinates${viewport ? ` in a ${viewport.width}x${viewport.height} viewport` : \"\"}. \"this\" and \"that\" mean the element at the mark before them; \"here\" and \"there\" mean that point. Moving or putting something \"here\" means placing it at those coordinates, for example with absolute positioning, unless the point is clearly inside another layout slot.`,\n ...elements.map((e) => `\\n${e.path}\\n${e.html}`),\n `\\nMouse now: ${describePointer(now)}.]`,\n ].join(\"\");\n return {\n instruction: `${parts.join(\" \")}\\n\\n${note}`,\n summary: marks.length ? marks.map(describePointer).join(\" → \") : describePointer(now),\n };\n}\n",[],[203,276,267],"components","2f701ee4-528a-48cb-bb70-98f0e3c873a2","VoiceButton.tsx","a8ef1b14-a7d4-11f1-9f9d-1607ee4eb77e",75,["D",1788472231593],10,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// Hands-free voice input through the browser's speech recognizer (Chrome and Safari).\n// A sentence is sent when the recognizer marks it final, or after `silenceMs` without new words.\n// If more words arrive within `continueMs` of a send, the sentence was cut short: `onContinue` gets the\n// whole sentence so the caller can undo the short one and resend. The recognizer keeps running while\n// the agent works; a sentence finished during a run is sent when the run ends.\nconst norm = (s: string) => s.toLowerCase().replace(/[^a-z0-9 ]/g, \"\").replace(/\\s+/g, \" \").trim();\nconst wordsOf = (s: string) => s.split(/\\s+/).filter(Boolean);\n\nexport function useVoice({ silenceMs, continueMs, busy, onFinal, onContinue }: {\n silenceMs: number;\n continueMs: number;\n busy: boolean;\n onFinal: (text: string) => void;\n onContinue: (text: string) => void;\n}) {\n const [on, setOn] = useState(false);\n const [listening, setListening] = useState(false);\n const [interim, setInterim] = useState(\"\");\n const [status, setStatus] = useState(\"\");\n const onRef = useRef(false);\n const busyRef = useRef(busy);\n busyRef.current = busy;\n const rec = useRef(null);\n const timer = useRef(undefined);\n const consumed = useRef(0); // recognizer results that belong to sentences already dealt with\n const sent = useRef<{ said: string; at: number } | null>(null); // the last sentence sent from this session\n const draft = useRef<{ said: string; cont: boolean } | null>(null);\n const pending = useRef(null); // a sentence that finished while the agent was busy\n const lastWordAt = useRef(0);\n const SR = typeof window === \"undefined\" ? null : (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;\n const supported = !!SR;\n\n function commit(why: string) {\n const d = draft.current;\n draft.current = null;\n clearTimeout(timer.current);\n setInterim(\"\");\n if (!d || !d.said) return;\n const since = Math.round(performance.now() - lastWordAt.current);\n sent.current = { said: d.said, at: performance.now() };\n setStatus(`${why}, ${since} ms after the last word`);\n console.log(`[voice] ${d.cont ? \"continuation\" : busyRef.current ? \"queued (agent busy)\" : \"send\"}: \"${d.said}\" (${why}, ${since} ms after the last word)`);\n if (d.cont) onContinue(d.said);\n else if (busyRef.current) pending.current = d.said;\n else onFinal(d.said);\n }\n\n function start() {\n if (!SR || rec.current) return;\n const r = new SR();\n r.lang = \"en-US\";\n r.interimResults = true;\n r.continuous = true;\n consumed.current = 0; sent.current = null; draft.current = null;\n r.onstart = () => { setListening(true); setStatus(\"listening\"); console.log(\"[voice] recognizer started\"); };\n r.onresult = (e: any) => {\n const results: any[] = Array.from(e.results);\n const now = performance.now();\n const s = sent.current;\n if (s && now - s.at >= continueMs) {\n // The last sentence is settled. Everything final up to now belongs to it.\n let n = 0; while (n < results.length && results[n].isFinal) n++;\n consumed.current = Math.max(consumed.current, n);\n sent.current = null;\n }\n let said = results.slice(consumed.current).map((x) => x[0].transcript).join(\"\").trim();\n // The settled sentence's last result can still be interim; drop its words.\n if (!sent.current && s && norm(said).startsWith(norm(s.said))) said = wordsOf(said).slice(wordsOf(s.said).length).join(\" \");\n // The recognizer re-emits a sent sentence with final casing and punctuation; that is not new words.\n if (!said || (sent.current && norm(said) === norm(sent.current.said))) return;\n const cont = !!sent.current; // words arrived soon after a send: this is the same sentence, longer\n const final = results.slice(consumed.current).every((x) => x.isFinal);\n lastWordAt.current = now;\n draft.current = { said, cont };\n setInterim(said);\n clearTimeout(timer.current);\n if (final) commit(cont ? \"sentence continued\" : \"sentence ended\");\n else timer.current = setTimeout(() => commit(cont ? \"sentence continued\" : `${silenceMs} ms of silence`), silenceMs);\n };\n r.onerror = (e: any) => { if (e.error !== \"aborted\" && e.error !== \"no-speech\") setStatus(`microphone: ${e.error}`); };\n r.onend = () => {\n rec.current = null;\n setListening(false);\n if (draft.current) commit(\"recognizer stopped\");\n if (onRef.current) start();\n };\n rec.current = r;\n r.start();\n }\n\n function stop() {\n onRef.current = false; setOn(false);\n clearTimeout(timer.current); draft.current = null; pending.current = null; setInterim(\"\");\n try { rec.current?.abort(); } catch { /* ignore */ }\n rec.current = null; setListening(false); setStatus(\"\");\n }\n\n function toggle() {\n if (on) stop();\n else { onRef.current = true; setOn(true); start(); }\n }\n\n // The agent finished: send what was said meanwhile.\n useEffect(() => {\n if (!busy && pending.current) { const text = pending.current; pending.current = null; onFinal(text); }\n }, [busy]);\n\n return { supported, on, listening, interim, status, toggle, start: () => { onRef.current = true; setOn(true); start(); } };\n}\n",[],[203,276,278],"3c2f9b35-44e9-4413-99bf-3bd7c0e47ede",["D",1788472250266],15,[],[203,276,33],"345c81b5-28b8-4447-89f4-4f0277c7edf0","App.tsx","01a068eb-ca36-70ad-ae0b-9ba9da2d93cc",74,["D",1788472213524],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { useVoice } from \"./VoiceButton.tsx\";\nimport { Overlay } from \"./Overlay.tsx\";\nimport type { Toast } from \"./Overlay.tsx\";\n\n// Voice-first: the page being built fills the screen. What you say appears at the bottom and fades;\n// what changed, and how fast, appears the same way after each run. Typing any key opens a text box.\nconst PARAMS = new URLSearchParams(location.search);\nconst MODEL = PARAMS.get(\"model\") || \"openai/gpt-oss-120b@cerebras\";\nconst SILENCE_MS = Number(PARAMS.get(\"silence\")) || 1000;\nconst CONTINUE_MS = Number(PARAMS.get(\"continue\")) || 1500; // words this soon after a send extend that sentence\nconst AUTO_VOICE = PARAMS.get(\"voice\") !== \"0\";\n\ntype Snapshot = { files: Record; messages: unknown[] };\ntype Run = { id: number; controller: AbortController; before: Snapshot; saidToast: string; resultToast?: string };\n\nfunction lineDiff(before: string, after: string) {\n const a = before.split(\"\\n\"), b = after.split(\"\\n\");\n const countA = new Map(); for (const l of a) countA.set(l, (countA.get(l) ?? 0) + 1);\n const added: string[] = []; const remaining = new Map(countA);\n for (const l of b) { const n = remaining.get(l) ?? 0; if (n > 0) remaining.set(l, n - 1); else added.push(l); }\n const removed = [...remaining.values()].reduce((s, n) => s + n, 0);\n return { added, removed };\n}\n\nexport function App() {\n const [messages, setMessages] = useState([]);\n const [files, setFiles] = useState>({});\n const [loading, setLoading] = useState(false);\n const [toasts, setToasts] = useState([]);\n const [typed, setTyped] = useState(null);\n const [live, setLive] = useState<{ text: string; tools: string[]; turns: number } | null>(null);\n const iframeRef = useRef(null);\n const filesRef = useRef(files);\n filesRef.current = files;\n const messagesRef = useRef(messages);\n messagesRef.current = messages;\n const run = useRef(null); // the latest run, kept so a cut-short sentence can undo it\n const runSeq = useRef(0);\n\n function toast(t: Omit): string {\n const id = crypto.randomUUID();\n setToasts((prev) => [...prev.slice(-3), { ...t, id, at: performance.now() }]);\n return id;\n }\n const dropToast = (id?: string) => { if (id) setToasts((prev) => prev.filter((t) => t.id !== id)); };\n const editToast = (id: string, patch: Partial) => setToasts((prev) => prev.map((t) => t.id === id ? { ...t, ...patch, at: performance.now() } : t));\n\n // A fresh document each time, so the page's own top-level declarations don't collide with the last render.\n function render(html: string) {\n if (iframeRef.current) iframeRef.current.srcdoc = html;\n }\n\n function restore(s: Snapshot) {\n setFiles(s.files); filesRef.current = s.files;\n setMessages(s.messages); messagesRef.current = s.messages;\n render(s.files[\"index.html\"] ?? \"\");\n }\n\n async function send(instruction: string, saidToast: string) {\n const id = ++runSeq.current;\n const controller = new AbortController();\n const before: Snapshot = { files: filesRef.current, messages: messagesRef.current };\n run.current = { id, controller, before, saidToast };\n setLoading(true);\n setLive({ text: \"\", tools: [], turns: 0 });\n const startedAt = performance.now();\n let tokens = 0, decodeMs = 0;\n try {\n const res = await fetch(\"/api/agent\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ messages: before.messages, files: before.files, instruction, model: MODEL }),\n signal: controller.signal,\n });\n if (!res.ok || !res.body) throw new Error((await res.json().catch(() => ({})))?.error ?? `Request failed (${res.status})`);\n const reader = res.body.getReader();\n const decoder = new TextDecoder();\n let buffer = \"\";\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n buffer += decoder.decode(value, { stream: true });\n const frames = buffer.split(\"\\n\\n\");\n buffer = frames.pop() ?? \"\";\n for (const frame of frames) {\n const line = frame.split(\"\\n\").find((l) => l.startsWith(\"data:\"));\n if (!line) continue;\n const event = JSON.parse(line.slice(5).trim());\n switch (event.type) {\n case \"text\": setLive((l) => l && { ...l, text: l.text + event.text }); break;\n case \"tool\": setLive((l) => l && { ...l, tools: [...l.tools, `${event.name} ${event.args}`] }); break;\n case \"turn\": tokens += event.stats.completionTokens; decodeMs += event.stats.totalMs - event.stats.ttftMs; setLive((l) => l && { ...l, turns: event.stats.index }); break;\n case \"files\": setFiles(event.files); if (event.files[\"index.html\"] !== undefined) render(event.files[\"index.html\"]); break;\n case \"done\": {\n setMessages(event.messages);\n setFiles(event.files);\n const changed = Object.keys(event.files).filter((p) => event.files[p] !== before.files[p]);\n const diffs = changed.map((p) => ({ path: p, ...lineDiff(before.files[p] ?? \"\", event.files[p]) }));\n const resultToast = toast({ kind: \"result\", text: event.messages.at(-1)?.content ?? \"\", diffs, stats: { turns: event.totals.turns, toolCalls: event.totals.toolCalls, tokens, tps: decodeMs >= 100 ? Math.round(tokens / (decodeMs / 1000)) : 0, totalMs: performance.now() - startedAt } });\n if (run.current?.id === id) run.current.resultToast = resultToast;\n break;\n }\n case \"error\": throw new Error(event.message);\n }\n }\n }\n } catch (err) {\n if ((err as Error).name !== \"AbortError\") toast({ kind: \"error\", text: err instanceof Error ? err.message : String(err) });\n } finally {\n if (run.current?.id === id) { setLoading(false); setLive(null); }\n }\n }\n\n function say(text: string) {\n send(text, toast({ kind: \"said\", text }));\n }\n\n // The sentence kept going after it was sent: undo that run and send the whole sentence.\n function sayAgain(text: string) {\n const r = run.current;\n if (!r) return say(text);\n r.controller.abort();\n restore(r.before);\n dropToast(r.resultToast);\n editToast(r.saidToast, { text, note: \"kept talking, so the first version was undone and resent\" });\n send(text, r.saidToast);\n }\n\n const voice = useVoice({ silenceMs: SILENCE_MS, continueMs: CONTINUE_MS, busy: loading, onFinal: say, onContinue: sayAgain });\n\n useEffect(() => { if (AUTO_VOICE && voice.supported) voice.start(); }, []);\n\n // Type anywhere to get a text box; Enter sends, Escape closes.\n useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (typed !== null || e.metaKey || e.ctrlKey || e.altKey) return;\n if (e.key.length === 1) { setTyped(e.key); e.preventDefault(); }\n };\n window.addEventListener(\"keydown\", onKey);\n return () => window.removeEventListener(\"keydown\", onKey);\n }, [typed]);\n\n return (\n

Diff · v76