OpenRouter Coder

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_401":402,"_403":404},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_73":261,"_41":-7,"_262":-5,"_17":263,"_264":265,"_266":267,"_268":269,"_270":271,"_113":-5,"_272":273,"_274":275,"_276":51,"_277":278,"_279":26,"_280":-5,"_281":-5,"_282":283},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","stevekrouse","name","openrouter-coder","branchName","voice","project",{"_32":40,"_13":14,"_34":218,"_49":-5,"_219":51,"_52":53,"_220":53,"_221":222,"_223":224,"_225":226,"_227":228,"_229":26,"_230":-5,"_231":-5,"_232":22,"_55":56,"_233":234,"_235":236,"_237":238,"_239":-5,"_240":241,"_242":241,"_243":244,"_245":244,"_246":244,"_247":241,"_248":241,"_249":250,"_251":252,"_253":28,"_50":51},"ahead",104,"behind",0,"diff",{"_63":64,"_65":66,"_67":68},"hasChanges",true,"sourceBranch",{"_41":58,"_13":16,"_32":59,"_39":40,"_43":33,"_45":42,"_60":53,"_61":40,"_62":56,"_57":14,"_54":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":38,"_39":40,"_41":42,"_43":44,"_45":46,"_47":48,"_49":-5,"_50":51,"_52":53,"_54":12,"_55":56,"_57":14},"pull","id","c2c67fa8-24f8-445b-bda0-6e7ff916defa","createdAt",["D",1788465952443],"updatedAt",["D",1788466250976],"agentic","projectId","6c39c4f0-b809-411f-9870-024217ce1962","version",9,"forkedBranchId","3b1e9452-ea7a-4e87-b511-7709945863af","forkedBranchVersion",27,"lockfileKey","1788466251332-esm.town_v_stevekrouse_openrouter-coder@9-agentic","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName",105,"bcd0622a-e9a0-439d-804c-4b21a255e97d","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[195,196],"deleted",[162,163,164],"modified",[69,70,71,72],{"_73":146,"_75":147,"_77":148},{"_73":125,"_75":126,"_77":127},{"_73":104,"_75":105,"_77":106},{"_73":74,"_75":76,"_77":78},"path","openrouter.ts","targetFile",{"_32":98,"_13":74,"_80":99,"_82":-5,"_83":33,"_84":88,"_86":26,"_34":100,"_41":22,"_89":90,"_91":101,"_65":51,"_93":-5,"_94":-7,"_73":102,"_96":103},"sourceFile",{"_32":79,"_13":74,"_80":81,"_82":-5,"_83":59,"_84":85,"_86":26,"_34":87,"_41":88,"_89":90,"_91":92,"_65":51,"_93":-5,"_94":-7,"_73":95,"_96":97},"1fdb020b-d542-4a37-a72c-28b9134725e9","fileId","01a068eb-ca37-739b-bb71-1a00322ab07a","parentId","branchId","branchVersion",2,"latest",["D",1788466708366],1,"fileType","script","content","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",[117,108],"7f7530ad175802f399834ef4a8e87df9ded9408ef06211aa5b53c3e4939d75af","frontend","d7d810b1-f592-4952-8e60-2a7be1479950","01a068e0-b6d8-7223-92f5-c28813432a36","01a068e0-b6d8-7223-92f5-cba02cb0cfd3",["D",1788465952496],"\n\n \n \n \n OpenRouter Coder\n \n \n \n \n \n \n

\n \n \n \n\n",[117,108],"ae7e6980c96d404736f1fdbb46f9bc200f3ac08c4f30d0fd7e7cb9071acacf75","frontend/components/App.tsx",{"_32":138,"_13":129,"_80":139,"_82":140,"_83":33,"_84":141,"_86":26,"_34":142,"_41":88,"_89":90,"_91":143,"_65":51,"_93":-5,"_94":-7,"_73":144,"_96":145},{"_32":128,"_13":129,"_80":130,"_82":131,"_83":59,"_84":58,"_86":26,"_34":132,"_41":133,"_89":90,"_91":134,"_65":51,"_93":-5,"_94":-7,"_73":135,"_96":136},"b8f2fd75-810c-49fa-9337-062886f5b4c0","App.tsx","01a068eb-ca36-70ad-ae0b-9ba9da2d93cc","01a068eb-ca37-739b-bb70-fbb512b8ccd8",["D",1788535911033],36,"/** @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);\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 = [\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;\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 [model, setModel] = useState(INITIAL_MODEL);\n const modelRef = useRef(model);\n modelRef.current = model;\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: modelRef.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\": setLive((l) => l && { ...l, tools: [...l.tools, `${event.name} ${event.args}`] }); 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, 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 useEffect(() => {\n const onKey = (e: KeyboardEvent) => {\n if (typed !== null || e.metaKey || e.ctrlKey || e.altKey) return;\n if (e.key === \" \") { e.preventDefault(); if (!e.repeat) voice.hold(); return; }\n if (e.key.length === 1) { setTyped(e.key); e.preventDefault(); }\n };\n const onKeyUp = (e: KeyboardEvent) => { if (e.key === \" \" && typed === null) { e.preventDefault(); voice.release(); } };\n window.addEventListener(\"keydown\", onKey);\n window.addEventListener(\"keyup\", onKeyUp);\n return () => { window.removeEventListener(\"keydown\", onKey); window.removeEventListener(\"keyup\", onKeyUp); };\n }, [typed]);\n\n return (\n

Compare

Mergevoiceintoagentic

agent.ts+26-11

frontend/components/App.tsx+142-107

frontend/index.html+1-1

openrouter.ts+1-0

frontend/components/Overlay.tsx+114-0

frontend/components/VoiceButton.tsx+142-0

frontend/components/ChatPanel.tsx+0-248

frontend/components/CodePanel.tsx+0-82

frontend/components/PreviewPanel.tsx+0-67