[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_283":284,"_285":286},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_213":-5,"_20":214,"_22":215,"_216":217,"_218":219,"_26":220,"_24":221,"_222":-5,"_223":-5,"_224":67,"_225":226,"_227":61,"_228":-5,"_229":-5,"_230":231},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","stevekrouse","name","cerebras-voice-coder","branchName","main","version","path","index.ts","project",{"_33":159,"_13":14,"_45":160,"_161":-5,"_162":67,"_163":164,"_165":164,"_166":167,"_168":-5,"_169":170,"_171":38,"_172":61,"_173":-5,"_174":-5,"_175":63,"_176":177,"_178":-5,"_179":-5,"_180":-5,"_181":-5,"_182":183,"_184":183,"_185":186,"_187":186,"_188":186,"_189":183,"_190":183,"_191":192,"_193":194,"_195":196,"_197":67},"tree",[51,52,53,54,55],"file",{"_33":34,"_35":36,"_37":38,"_13":19,"_39":40,"_41":42,"_17":43,"_44":-5,"_45":46,"_47":48,"_49":14,"_18":50},"contents",[],"upstream","pull","ahead","behind","envVars","id","9e6b900a-e41a-415f-9750-d426456be3e0","branchId","9f130aac-5412-4ed3-b064-fa2048e93584","fileId","01a06d0c-527a-75a3-a8fe-7cd579461d3b","content","import { hotReload, parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { runAgent, THINKING } from \"./agent.ts\";\nimport { DEFAULT_MODELS } from \"./openrouter.ts\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Model list for the typeahead: OpenRouter's public catalog, cached in-memory.\nlet modelsCache: { at: number; models: { id: string; name: string }[] } | null = null;\n\napp.get(\"/api/models\", async (c) => {\n if (!modelsCache || Date.now() - modelsCache.at > 10 * 60 * 1000) {\n const res = await fetch(\"https://openrouter.ai/api/v1/models\");\n if (!res.ok) return c.json({ error: `OpenRouter models API returned ${res.status}` }, 502);\n const data = (await res.json()).data as { id: string; name: string; created: number }[];\n data.sort((a, b) => (b.created ?? 0) - (a.created ?? 0));\n modelsCache = { at: Date.now(), models: data.map(({ id, name }) => ({ id, name })) };\n }\n return c.json({ defaults: DEFAULT_MODELS, models: modelsCache.models });\n});\n\n// Serving endpoints for one model — powers the provider-pin suggestions.\napp.get(\"/api/providers\", async (c) => {\n const model = c.req.query(\"model\") ?? \"\";\n if (!/^[\\w.-]+\\/[\\w.:-]+$/.test(model)) return c.json({ providers: [] });\n const res = await fetch(`https://openrouter.ai/api/v1/models/${model}/endpoints`);\n if (!res.ok) return c.json({ providers: [] });\n const endpoints = (await res.json()).data?.endpoints ?? [];\n return c.json({\n providers: endpoints.map((e: any) => ({ tag: e.tag, name: e.provider_name })),\n });\n});\n\n// One agent run, as a server-sent event stream. The browser holds the conversation and the\n// workspace and sends both back with each instruction, so the server keeps no state.\napp.post(\"/api/agent\", async (c) => {\n const { messages, files, instruction, model, thinking } = await c.req.json().catch(() => ({}));\n if (typeof instruction !== \"string\" || !instruction.trim()) return c.json({ error: \"Missing 'instruction'.\" }, 400);\n if (typeof model !== \"string\" || !model.trim()) return c.json({ error: \"Missing 'model'.\" }, 400);\n if (!THINKING.includes(thinking)) return c.json({ error: `'thinking' must be one of ${THINKING.join(\", \")}.` }, 400);\n const history = Array.isArray(messages) ? messages : [];\n const workspace = files && typeof files === \"object\" ? { ...files } : {};\n\n const encoder = new TextEncoder();\n const stream = new ReadableStream({\n async start(controller) {\n const send = (event: unknown) => controller.enqueue(encoder.encode(`data: ${JSON.stringify(event)}\\n\\n`));\n try {\n await runAgent(history, instruction.trim(), workspace, model.trim(), thinking, send);\n } catch (err) {\n const message = err instanceof Error ? err.message : String(err);\n console.error(\"agent failed:\", message);\n send({ type: \"error\", message });\n } finally {\n controller.close();\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"Content-Type\": \"text/event-stream; charset=utf-8\",\n \"Cache-Control\": \"no-cache, no-transform\",\n \"Connection\": \"keep-alive\",\n \"X-Accel-Buffering\": \"no\",\n },\n });\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default hotReload(app.fetch);\n","fileType","http",3,"parentId","createdAt",["D",1788543257359],"branchVersion",17,"label",[19],{"_33":92,"_13":93,"_37":94,"_44":-5,"_35":36,"_47":59,"_60":61,"_45":95,"_17":63,"_41":96,"_39":-5,"_66":67,"_49":-5,"_68":97,"_18":98},{"_33":83,"_13":84,"_37":85,"_44":-5,"_35":36,"_47":86,"_60":61,"_45":87,"_17":88,"_41":24,"_39":89,"_66":67,"_49":-5,"_68":90,"_18":91},{"_33":74,"_13":75,"_37":76,"_44":-5,"_35":36,"_47":77,"_60":61,"_45":78,"_17":79,"_41":64,"_39":80,"_66":67,"_49":-5,"_68":81,"_18":82},{"_33":34,"_13":19,"_37":38,"_44":-5,"_35":36,"_47":48,"_60":61,"_45":71,"_17":43,"_41":42,"_39":40,"_66":67,"_49":14,"_68":72,"_18":73},{"_33":56,"_13":57,"_37":58,"_44":-5,"_35":36,"_47":59,"_60":61,"_45":62,"_17":63,"_41":64,"_39":65,"_66":67,"_49":-5,"_68":69,"_18":70},"257b1b5e-9a06-4566-90dd-29dfe9dd8109","openrouter.ts","01a06d0c-527a-75a3-a8fe-8456786bb252",1,"latest",true,["D",1788535919228],0,"script","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",[],[93,111],"c91cbe59-ef29-4503-8e29-80fcf8fcb7d2","favicon.svg","01a06d0c-527a-75a3-a8fe-9e3cb6ad1bd9",["D",1788535919228],"\n",[],[93,118],"ffd70ea5-6600-4f47-bd57-bb1cc47ee98d","components","01a06d0c-527a-75a3-a8fe-8c148acd56a5",["D",1788535919228],[130,131,132],[93,125],{"_33":150,"_13":151,"_37":152,"_44":126,"_35":36,"_47":153,"_60":61,"_45":154,"_17":155,"_41":64,"_39":156,"_66":67,"_49":-5,"_68":157,"_18":158},{"_33":142,"_13":143,"_37":144,"_44":126,"_35":36,"_47":145,"_60":61,"_45":146,"_17":79,"_41":64,"_39":147,"_66":67,"_49":-5,"_68":148,"_18":149},{"_33":133,"_13":134,"_37":135,"_44":126,"_35":36,"_47":136,"_60":61,"_45":137,"_17":138,"_41":64,"_39":139,"_66":67,"_49":-5,"_68":140,"_18":141},"f59cafc2-0990-434c-b93a-04efd36188c5","VoiceButton.tsx","01a06d0c-527a-75a3-a8fe-9b215d4f6243",37,["D",1788544272627],5,"/** @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.\n// Push-to-talk is the other mode: `hold()` listens until `release()`, then sends everything heard, with no\n// silence cutoff and no continuation. Holding turns hands-free off.\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 [holding, setHolding] = useState(false);\n const ptt = useRef(false); // push-to-talk in progress: no silence cutoff, send on release\n const releasing = useRef(false); // the key came up: the next onend sends\n const held = useRef(\"\"); // words from earlier recognizers in this same hold (Chrome ends one after a pause)\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 // An aborted recognizer still fires its events afterwards. Only the current one may touch state:\n // otherwise starting push-to-talk while hands-free is on gets undone by the old recognizer's onend.\n const current = () => rec.current === r;\n r.onstart = () => { if (!current()) return; setListening(true); setStatus(\"listening\"); console.log(\"[voice] recognizer started\"); };\n r.onresult = (e: any) => {\n if (!current()) return;\n const results: any[] = Array.from(e.results);\n const now = performance.now();\n if (ptt.current) {\n // Holding the key: just keep collecting words. Release sends them.\n const said = [held.current, results.map((x) => x[0].transcript).join(\"\").trim()].filter(Boolean).join(\" \");\n lastWordAt.current = now;\n draft.current = { said, cont: false };\n setInterim(said);\n return;\n }\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) => {\n if (!current() || e.error === \"aborted\" || e.error === \"no-speech\") return;\n setStatus(`microphone: ${e.error}`);\n releasing.current = true; // a hold must not restart into the same failure\n };\n r.onend = () => {\n if (!current()) return;\n rec.current = null;\n setListening(false);\n if (ptt.current && !releasing.current) {\n // Chrome ended the recognizer on its own while the key is still down: keep the words, start another.\n held.current = draft.current?.said ?? held.current;\n console.log(`[voice] recognizer ended mid-hold, restarting (kept: \"${held.current}\")`);\n start();\n return;\n }\n // After a push-to-talk release the recognizer delivers its last words, then ends: send them now.\n if (draft.current) commit(ptt.current ? \"key released\" : \"recognizer stopped\");\n if (ptt.current) { ptt.current = false; setHolding(false); setStatus(\"\"); }\n else 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 const r = rec.current;\n rec.current = null; // before abort, so the old recognizer's late events are ignored\n try { r?.abort(); } catch { /* ignore */ }\n setListening(false); setStatus(\"\");\n }\n\n function toggle() {\n if (on) stop();\n else { onRef.current = true; setOn(true); start(); }\n }\n\n // Push-to-talk: listen from key down to key up, then send what was heard.\n function hold() {\n if (!SR || ptt.current) return;\n if (rec.current) stop(); // hands-free is off from here on; the mic button turns it back on\n ptt.current = true; releasing.current = false; held.current = \"\"; setHolding(true);\n setStatus(\"listening while the key is held\");\n console.log(\"[voice] hold\");\n start();\n }\n function release() {\n if (!ptt.current) return;\n releasing.current = true;\n const r = rec.current;\n if (!r) { ptt.current = false; setHolding(false); return; }\n setStatus(\"sending\");\n try { r.stop(); } catch { r.onend?.(); } // stop() delivers the final words, then fires onend, which sends\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, holding, listening, interim, status, toggle, hold, release, start: () => { onRef.current = true; setOn(true); start(); } };\n}\n",[],[93,125,134],"b360f37d-1c4d-46fe-b1b0-8332b7654ce6","Overlay.tsx","01a06d0c-527a-75a3-a8fe-96d7aa7f8b13",45,["D",1788544488361],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\nexport type Entry = {\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; failed: number; tokens: number; tps: number; totalMs: number };\n};\ntype Live = { text: string; tools: string[]; turns: number } | null;\nexport type Model = { id: string; label: string; note: string };\nexport const THINKING = [\"off\", \"low\", \"medium\", \"high\"] as const;\nexport type Thinking = typeof THINKING[number];\n\n// Lifetimes in ms. An agent reply scrolls in like a ticker and then gets `LIFE.result` to sit before fading.\n// Each newer line below a line halves its remaining life, so sending something new clears the strip fast.\nconst LIFE: Record = { said: 5000, result: 3500, error: 10000 };\nconst TICKER_PX_PER_S = 180; // about reading speed at this font size\nconst FADE = 1200;\nconst ms = (n: number) => n >= 1000 ? `${(n / 1000).toFixed(2)} s` : `${Math.round(n)} ms`;\n\n// Every line is the same dark card: a small role label on the left, the text on the right. The strip is big\n// and one line tall; the chat panel is small and wraps. When a strip line overflows, \"end\" keeps its end in\n// view (the newest words); \"ticker\" scrolls the text in from the right edge and leftward until all of it has\n// been seen, at a steady pace, so a whole reply can be read.\ntype Mode = \"end\" | \"ticker\" | \"wrap\";\nconst SIZE = {\n big: { card: \"px-4 py-2 text-[26px] leading-9\", label: \"mr-4 w-20 text-[18px]\", meta: \"text-[20px]\" },\n small: { card: \"px-3 py-1.5 text-[13px] leading-5\", label: \"mr-3 w-12 text-[11px]\", meta: \"text-[11px]\" },\n};\ntype Size = keyof typeof SIZE;\n\n// Layout that the measurement depends on is inline, so it holds before Twind has generated the classes.\nfunction Ticker({ onMeasure, children }: { onMeasure: (scrollMs: number) => void; children: any }) {\n const outer = useRef(null);\n const inner = useRef(null);\n // Measured, then placed just past the right edge with no transition, then (next frame) sent to its end.\n const [pos, setPos] = useState<{ x: number; ms: number } | null>(null);\n const end = useRef({ to: 0, ms: 0 });\n useEffect(() => {\n const raf = requestAnimationFrame(() => {\n const box = outer.current?.clientWidth ?? 0, text = inner.current?.scrollWidth ?? 0;\n const to = Math.min(0, box - text); // ends left-aligned if it fits, else with its tail at the right edge\n end.current = { to, ms: (box - to) / TICKER_PX_PER_S * 1000 };\n onMeasure(end.current.ms);\n setPos({ x: box, ms: 0 });\n });\n return () => cancelAnimationFrame(raf);\n }, []);\n useEffect(() => {\n if (!pos || pos.ms) return;\n const raf = requestAnimationFrame(() => setPos({ x: end.current.to, ms: end.current.ms }));\n return () => cancelAnimationFrame(raf);\n }, [pos]);\n return (\n \n {children}\n \n );\n}\n\nfunction Line({ role, tone = \"\", size, mode, onMeasure = () => {}, children }: { role: string; tone?: string; size: Size; mode: Mode; onMeasure?: (scrollMs: number) => void; children: any }) {\n const s = SIZE[size];\n return (\n

\n {role}\n {mode === \"wrap\" && {children}}\n {mode === \"end\" && {children}}\n {mode === \"ticker\" && {children}}\n

\n );\n}\n\nfunction Body({ e, size }: { e: Entry; size: Size }) {\n const meta = SIZE[size].meta;\n return (\n <>\n {e.text}\n {e.note && {e.note}}\n {e.diffs?.map((d) => {d.path} +{d.added.length} −{d.removed})}\n {e.stats && (\n \n {e.stats.tps > 0 && `${e.stats.tps.toLocaleString()} tok/s · `}{e.stats.tokens.toLocaleString()} tok · {e.stats.turns}t/{e.stats.toolCalls}c · {ms(e.stats.totalMs)}\n \n )}\n {e.stats && e.stats.failed > 0 && (\n {e.stats.failed} tool call{e.stats.failed === 1 ? \"\" : \"s\"} failed\n )}\n \n );\n}\n\n// How long each reply's ticker takes, measured once it is on screen; its life is extended by that much.\nconst scrollMs = new Map();\nconst lifeOf = (e: Entry) => LIFE[e.kind] + (scrollMs.get(e.id) ?? 0);\n\nconst ROLE: Record = { said: [\"you\", \"\"], result: [\"agent\", \"\"], error: [\"error\", \"text-red-300\"] };\nfunction EntryLine({ e, size }: { e: Entry; size: Size }) {\n const mode: Mode = size === \"small\" ? \"wrap\" : e.kind === \"result\" ? \"ticker\" : \"end\";\n return scrollMs.set(e.id, ms)}>;\n}\nconst LiveLine = ({ live, size }: { live: NonNullable; size: Size }) => (\n \n {live.tools.length ? live.tools.at(-1) : \"thinking…\"}\n {live.text && {live.text}}\n \n);\nconst InterimLine = ({ text, size }: { text: string; size: Size }) => (\n {text}\n);\n\nconst chip = (on: boolean) => `cursor-pointer rounded-md px-2.5 py-1 text-[12px] ${on ? \"bg-white text-gray-900\" : \"bg-white/10 text-gray-300 hover:bg-white/20\"}`;\n\n// Everything drawn over the page: a strip along the bottom holding one line each for the words being heard,\n// what the agent is doing, and what was said and what changed (lines fade out; new ones push old ones off the\n// top), with the mic above it; in the bottom left, a button that opens the whole conversation in a panel on\n// the left, and a settings button for the model and how much it thinks.\nexport function Overlay({ toasts, log, interim, live, mic, typed, onTyped, onSubmit, onExpire, chatOpen, onChatOpen, settings }: {\n toasts: Entry[];\n log: Entry[];\n interim: string;\n live: Live;\n mic: { supported: boolean; on: boolean; holding: 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 chatOpen: boolean;\n onChatOpen: (open: boolean) => void;\n settings: { models: Model[]; model: string; onModel: (m: string) => void; thinking: Thinking; onThinking: (t: Thinking) => 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) => lifeOf(toasts[i]) / 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 bottom = useRef(null);\n useEffect(() => { if (chatOpen) bottom.current?.scrollIntoView({ block: \"end\" }); }, [chatOpen, log.length, live?.tools.length, live?.text, interim]);\n\n const [settingsOpen, setSettingsOpen] = useState(false);\n const custom = !settings.models.some((m) => m.id === settings.model);\n\n return (\n <>\n

\n onChatOpen(!chatOpen)}\n title={chatOpen ? \"Close the chat\" : \"Show the whole chat\"}\n className=\"flex h-8 cursor-pointer items-center gap-1.5 rounded-full bg-gray-900/85 px-3 text-[12px] font-medium text-white shadow backdrop-blur hover:bg-gray-800\"\n >\n {chatOpen ? \"✕\" : \"💬\"}\n {chatOpen ? \"Close\" : \"Chat\"}\n {!chatOpen && log.length > 0 && {log.length}}\n \n setSettingsOpen(!settingsOpen)}\n title=\"Model and thinking\"\n className={`flex h-8 cursor-pointer items-center gap-1.5 rounded-full px-3 text-[12px] font-medium text-white shadow backdrop-blur ${settingsOpen ? \"bg-gray-700\" : \"bg-gray-900/85 hover:bg-gray-800\"}`}\n >\n ⚙\n {settings.models.find((m) => m.id === settings.model)?.label ?? settings.model} · thinking {settings.thinking}\n \n

\n\n {settingsOpen && (\n

Model

\n {settings.models.map((m) => (\n \n ))}\n

\n settings.onModel((e.target as HTMLInputElement).value)}\n onKeyDown={(e) => { if (e.key === \"Escape\") setSettingsOpen(false); }}\n placeholder=\"or cerebras:, or an OpenRouter slug\"\n className=\"mt-1.5 w-full rounded-md bg-white/10 px-2 py-1 text-[12px] text-white placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-white/40\"\n />\n

Thinking

\n {THINKING.map((t) => )}\n

\n )}\n\n {chatOpen && (\n \n )}\n\n {/* With the panel open the strip moves to the right of it; the panel already shows everything else. */}\n

\n \n {!mic.supported ? \"Type to talk\" : mic.holding ? \"Release to send\" : mic.on ? \"Listening hands-free\" : \"Space to talk\"}\n \n

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

\n \n

\n ))}\n {live && }\n {interim && }\n {typed !== null && (\n

\n you\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=\"Type what to build or change, then Enter\"\n className=\"pointer-events-auto min-w-0 flex-1 bg-transparent text-white placeholder-gray-500 focus:outline-none\"\n />\n

\n )}\n

\n \n );\n}\n",[],[93,125,143],"9ef7872d-c780-4259-9be1-66f01232784e","App.tsx","01a06d0c-527a-75a3-a8fe-9396f8484c7d",55,["D",1788544669603],15,"/** @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 { Entry, Model, Thinking } 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.\n// The whole conversation stays in `log`; the Chat button in the bottom left shows it in a panel.\nconst PARAMS = new URLSearchParams(location.search);\n// Both go to Cerebras directly, so the val only needs CEREBRAS_API_KEY. ?model= overrides with another\n// cerebras:, or any OpenRouter slug (optionally \"@provider\") if OPENROUTER_API_KEY is set.\nconst MODELS: Model[] = [\n { id: \"cerebras:gpt-oss-120b\", label: \"GPT-OSS 120B\", note: \"OpenAI\" },\n { id: \"cerebras:qwen-3.8-27b\", label: \"Qwen 3.8 27B\", note: \"Alibaba\" },\n];\nconst INITIAL_MODEL = PARAMS.get(\"model\") || MODELS[0].id;\n// Medium: at low, gpt-oss drops parts of compound requests (\"green plus, red minus, and a footer\") and claims\n// it did them. Medium did all of them in every test, and on Cerebras costs about a tenth of a second per turn.\nconst INITIAL_THINKING = (PARAMS.get(\"thinking\") || \"medium\") as Thinking;\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\") === \"1\"; // hands-free from the start; the default is hold Space to talk\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\n// Keys pressed while typing into the built page, or into our own text box, are not commands.\nconst editable = (t: EventTarget | null) => {\n const el = t as HTMLElement | null;\n return !!el && (el.isContentEditable || [\"INPUT\", \"TEXTAREA\", \"SELECT\"].includes(el.tagName));\n};\n\nexport function App() {\n const [messages, setMessages] = useState([]);\n const [files, setFiles] = useState>({});\n const [loading, setLoading] = useState(false);\n const [model, setModel] = useState(INITIAL_MODEL);\n const modelRef = useRef(model);\n modelRef.current = model;\n const [thinking, setThinking] = useState(INITIAL_THINKING);\n const thinkingRef = useRef(thinking);\n thinkingRef.current = thinking;\n const [log, setLog] = useState([]); // everything said and every result, for the chat panel\n const [hidden, setHidden] = useState>(new Set()); // log entries that have faded from the strip\n const [chatOpen, setChatOpen] = useState(false);\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 const toasts = log.filter((e) => !hidden.has(e.id)).slice(-4);\n function toast(t: Omit): string {\n const id = crypto.randomUUID();\n setLog((prev) => [...prev, { ...t, id, at: performance.now() }]);\n return id;\n }\n const dropToast = (id?: string) => { if (id) setLog((prev) => prev.filter((e) => e.id !== id)); };\n const editToast = (id: string, patch: Partial) => {\n setLog((prev) => prev.map((e) => e.id === id ? { ...e, ...patch, at: performance.now() } : e));\n setHidden((prev) => { const s = new Set(prev); s.delete(id); return s; }); // back onto the strip\n };\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, failed = 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: modelRef.current, thinking: thinkingRef.current }),\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\": if (!event.ok) failed++; setLive((l) => l && { ...l, tools: [...l.tools, `${event.name} ${event.args}${event.ok ? \"\" : \" ✗\"}`] }); break;\n case \"turn\": tokens += event.stats.completionTokens; if (event.stats.tokensPerSecond > 0) decodeMs += event.stats.completionTokens / event.stats.tokensPerSecond * 1000; 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, failed, 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 // Hold Space to talk, release to send. Type anything else to get a text box; Enter sends, Escape closes.\n // The handlers live in a ref so the listeners, on this window and on the preview iframe's window (which\n // gets the keys once the built page has been clicked), always see the current state.\n const keys = useRef({ down: (_e: KeyboardEvent) => {}, up: (_e: KeyboardEvent) => {} });\n keys.current.down = (e) => {\n if (typed !== null || e.metaKey || e.ctrlKey || e.altKey || editable(e.target)) return;\n if (e.key === \" \") { e.preventDefault(); if (!e.repeat) voice.hold(); return; }\n if (e.key === \"Escape\") { setChatOpen(false); return; }\n if (e.key.length === 1) { setTyped(e.key); e.preventDefault(); }\n };\n keys.current.up = (e) => { if (e.key === \" \" && typed === null) { e.preventDefault(); voice.release(); } };\n // Each srcdoc render is a new window inside the same iframe, so listen again on every load; the marker\n // keeps one window from being listened to twice.\n const listen = (w: Window | null | undefined) => {\n if (!w || (w as any).__voiceKeys) return;\n (w as any).__voiceKeys = true;\n w.addEventListener(\"keydown\", (e) => keys.current.down(e));\n w.addEventListener(\"keyup\", (e) => keys.current.up(e));\n };\n useEffect(() => { listen(window); listen(iframeRef.current?.contentWindow); }, []);\n\n // A microphone problem would otherwise only show in the button's tooltip.\n useEffect(() => { if (voice.status.startsWith(\"microphone:\")) toast({ kind: \"error\", text: voice.status }); }, [voice.status]);\n\n return (\n

\n listen((e.currentTarget as HTMLIFrameElement).contentWindow)}\n className=\"h-full w-full border-0\"\n />\n { setTyped(null); if (text.trim() && !loading) say(text.trim()); }}\n onExpire={(id) => setHidden((prev) => new Set(prev).add(id))}\n chatOpen={chatOpen}\n onChatOpen={setChatOpen}\n settings={{ models: MODELS, model, onModel: setModel, thinking, onThinking: setThinking }}\n />\n

\n );\n}\n",[],[93,125,151],"93cb6bd2-2680-4ebb-bbd6-05108e8438b6",["D",1788535915469],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Talk an app into existence. Voice agent on Cerebras.","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_212":208},"org",{"_11":12,"_206":-5,"_207":208,"_169":170,"_209":210,"_211":67},"branch",{"_17":86,"_13":16,"_33":36,"_198":159,"_199":-5,"_200":-5,"_201":-5,"_202":-5,"_203":-5,"_204":14,"_205":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":159,"_13":14,"_45":279,"_161":-5,"_162":67,"_163":164,"_165":164,"_166":167,"_168":-5,"_169":170,"_171":38,"_172":61,"_173":-5,"_174":-5,"_175":63,"_176":177,"_178":-5,"_179":-5,"_180":-5,"_181":-5,"_182":183,"_184":183,"_185":186,"_187":186,"_188":186,"_189":183,"_190":183,"_191":280,"_193":281,"_195":282,"_197":67},[243,251,252,253,254],"files",[243,244,245,246,247,248,249,250,251,252,253,254],"counts",{"_234":63,"_235":59,"_236":63,"_32":237,"_238":239},[],{"_33":34,"_35":36,"_37":38,"_13":19,"_39":40,"_41":42,"_17":43,"_44":-5,"_45":232,"_47":48,"_49":14,"_18":233},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1788543257359],[19],"pulls","branches","forks",{"_240":59,"_242":63},"connections",{"_240":63,"_241":63},"count","unfilledCount","emptyCount",{"_33":92,"_13":93,"_37":94,"_44":-5,"_35":36,"_47":59,"_60":61,"_45":95,"_17":63,"_41":96,"_39":-5,"_66":67,"_49":-5,"_68":277,"_18":278},{"_33":124,"_13":125,"_37":126,"_44":94,"_35":36,"_47":59,"_60":61,"_45":127,"_17":63,"_41":96,"_39":-5,"_66":67,"_49":-5,"_68":275,"_18":276},{"_33":150,"_13":151,"_37":152,"_44":126,"_35":36,"_47":153,"_60":61,"_45":154,"_17":155,"_41":64,"_39":156,"_66":67,"_49":-5,"_68":273,"_18":274},{"_33":142,"_13":143,"_37":144,"_44":126,"_35":36,"_47":145,"_60":61,"_45":146,"_17":79,"_41":64,"_39":147,"_66":67,"_49":-5,"_68":271,"_18":272},{"_33":133,"_13":134,"_37":135,"_44":126,"_35":36,"_47":136,"_60":61,"_45":137,"_17":138,"_41":64,"_39":139,"_66":67,"_49":-5,"_68":269,"_18":270},{"_33":117,"_13":118,"_37":119,"_44":94,"_35":36,"_47":59,"_60":61,"_45":120,"_17":63,"_41":24,"_39":121,"_66":67,"_49":-5,"_68":267,"_18":268},{"_33":110,"_13":111,"_37":112,"_44":94,"_35":36,"_47":59,"_60":61,"_45":113,"_17":63,"_41":24,"_39":114,"_66":67,"_49":-5,"_68":265,"_18":266},{"_33":103,"_13":104,"_37":105,"_44":94,"_35":36,"_47":59,"_60":61,"_45":106,"_17":63,"_41":64,"_39":107,"_66":67,"_49":-5,"_68":263,"_18":264},{"_33":83,"_13":84,"_37":85,"_44":-5,"_35":36,"_47":86,"_60":61,"_45":87,"_17":88,"_41":24,"_39":89,"_66":67,"_49":-5,"_68":261,"_18":262},{"_33":74,"_13":75,"_37":76,"_44":-5,"_35":36,"_47":77,"_60":61,"_45":78,"_17":79,"_41":64,"_39":80,"_66":67,"_49":-5,"_68":259,"_18":260},{"_33":34,"_13":19,"_37":38,"_44":-5,"_35":36,"_47":48,"_60":61,"_45":71,"_17":43,"_41":42,"_39":40,"_66":67,"_49":14,"_68":257,"_18":258},{"_33":56,"_13":57,"_37":58,"_44":-5,"_35":36,"_47":59,"_60":61,"_45":62,"_17":63,"_41":64,"_39":65,"_66":67,"_49":-5,"_68":255,"_18":256},[],[57],[],[19],[],[75],[],[84],[],[93,104],[],[93,111],[],[93,118],[],[93,125,134],[],[93,125,143],[],[93,125,151],[245,246,247],[93,125],[244,248,249,250],[93],["D",1788535915469],{"_11":12,"_212":208},{"_11":12,"_206":-5,"_207":208,"_169":170,"_209":210,"_211":67},{"_17":86,"_13":16,"_33":36,"_198":159,"_199":-5,"_200":-5,"_201":-5,"_202":-5,"_203":-5,"_204":14,"_205":12},"ctx",{"_191":-5,"_229":316,"_317":318,"_319":320,"_321":67,"_322":67,"_323":67,"_324":61,"_325":-5,"_326":-7,"_327":-7,"_328":63,"_329":67,"_330":67,"_331":-5,"_332":67,"_333":67,"_334":67,"_335":-5},"ENV",{"_287":288,"_289":290,"_291":16,"_292":293,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","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",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]