[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_107":108,"_109":110},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","stevekrouse","name","cerebras-voice-coder","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":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/stevekrouse/cerebras-voice-coder/code/frontend/components/App.tsx","extension","id","9ef7872d-c780-4259-9be1-66f01232784e","App.tsx","fileId","01a06d0c-527a-75a3-a8fe-9396f8484c7d","parentId","01a06d0c-527a-75a3-a8fe-8c148acd56a5","branchId","9f130aac-5412-4ed3-b064-fa2048e93584","branchVersion",55,"latest",true,"createdAt",["D",1788544669603],"version",15,"fileType","script","content","/** @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","deleted",false,"label",[47,48,24],"frontend","components","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","01a06d0c-527a-75a3-a8fe-7cd579461d3b","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_106":102},"org",{"_9":10,"_100":-5,"_101":102,"_59":60,"_103":104,"_105":44},"branch",{"_37":90,"_11":91,"_22":30,"_92":49,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":12,"_99":10},"isOwned",56,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","ctx",{"_83":-5,"_140":141,"_142":143,"_144":145,"_146":44,"_147":44,"_148":44,"_149":34,"_150":-5,"_151":-7,"_152":-7,"_153":67,"_154":44,"_155":44,"_156":-5,"_157":44,"_158":44,"_159":44,"_160":-5},"ENV",{"_111":112,"_113":114,"_115":91,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137,"_138":139},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]