[{"_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/Overlay.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/Overlay.tsx","extension","id","b360f37d-1c4d-46fe-b1b0-8332b7654ce6","Overlay.tsx","fileId","01a06d0c-527a-75a3-a8fe-96d7aa7f8b13","parentId","01a06d0c-527a-75a3-a8fe-8c148acd56a5","branchId","9f130aac-5412-4ed3-b064-fa2048e93584","branchVersion",45,"latest",true,"createdAt",["D",1788544488361],"version",10,"fileType","script","content","/** @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","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"]