hi

\", { headers: { \"Content-Type\": \"text/html\" }}));\n */\nexport function wrapFetch<\n H extends (req: Request) => Promise | Response,\n>(\n handler: H,\n opts: VoiceEditOptions = {},\n): (req: Request) => Promise {\n return async (req: Request) => {\n const resp = await handler(req);\n return maybeInject(resp, opts);\n };\n}\n\nexport default voiceEdit;\n",[280],"650f079c-53c4-11f1-9542-ee650bb23af1","oauth-test.tsx","019e4201-4376-74f8-ae4a-71a9fe9f9fbe",["D",1779223839498],"/** @jsxImportSource https://esm.sh/hono/jsx */\nimport { Hono } from \"https://esm.sh/hono\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\n\nconst app = new Hono();\n\napp.get(\"/\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n\n return c.html(\n \n \n {session?.user\n ?

Logged in as {session.user.username}

\n : Log in}\n \n ,\n );\n});\n\nexport default oauthMiddleware(app.fetch);\n",[286],["D",1779223896398],[147],["D",1780091956486],[166],"650ee3e8-53c4-11f1-9542-ee650bb23af1",["D",1779223839498],"directory",[102],"64e1839e-53c4-11f1-9542-ee650bb23af1",["D",1779223839498],[207],"pulls","branches","forks","envVars",{"_309":126,"_311":92},"connections",{"_309":22,"_310":22},"count","unfilledCount","emptyCount",{"_32":299,"_13":207,"_83":200,"_85":-5,"_87":59,"_88":92,"_90":26,"_34":386,"_40":22,"_93":297,"_95":-5,"_66":50,"_97":-5,"_98":387,"_75":388},{"_32":379,"_13":380,"_83":381,"_85":200,"_87":59,"_88":92,"_90":26,"_34":382,"_40":22,"_93":173,"_95":383,"_66":50,"_97":-5,"_98":384,"_75":385},{"_32":372,"_13":373,"_83":374,"_85":200,"_87":59,"_88":92,"_90":26,"_34":375,"_40":22,"_93":94,"_95":376,"_66":50,"_97":-5,"_98":377,"_75":378},{"_32":197,"_13":198,"_83":199,"_85":200,"_87":59,"_88":201,"_90":26,"_34":202,"_40":203,"_93":173,"_95":204,"_66":50,"_97":-5,"_98":370,"_75":371},{"_32":363,"_13":364,"_83":365,"_85":200,"_87":59,"_88":92,"_90":26,"_34":366,"_40":22,"_93":173,"_95":367,"_66":50,"_97":-5,"_98":368,"_75":369},{"_32":295,"_13":102,"_83":86,"_85":-5,"_87":59,"_88":92,"_90":26,"_34":360,"_40":22,"_93":297,"_95":-5,"_66":50,"_97":-5,"_98":361,"_75":362},{"_32":133,"_13":134,"_83":135,"_85":86,"_87":59,"_88":58,"_90":26,"_34":136,"_40":124,"_93":94,"_95":137,"_66":50,"_97":-5,"_98":358,"_75":359},{"_32":187,"_13":188,"_83":189,"_85":86,"_87":59,"_88":190,"_90":26,"_34":191,"_40":45,"_93":94,"_95":192,"_66":50,"_97":-5,"_98":356,"_75":357},{"_32":349,"_13":350,"_83":351,"_85":86,"_87":59,"_88":92,"_90":26,"_34":352,"_40":22,"_93":94,"_95":353,"_66":50,"_97":-5,"_98":354,"_75":355},{"_32":113,"_13":114,"_83":115,"_85":86,"_87":59,"_88":116,"_90":26,"_34":117,"_40":118,"_93":94,"_95":119,"_66":50,"_97":-5,"_98":347,"_75":348},{"_32":340,"_13":341,"_83":342,"_85":86,"_87":59,"_88":92,"_90":26,"_34":343,"_40":22,"_93":94,"_95":344,"_66":50,"_97":-5,"_98":345,"_75":346},{"_32":81,"_13":82,"_83":84,"_85":86,"_87":59,"_88":89,"_90":26,"_34":91,"_40":92,"_93":94,"_95":96,"_66":50,"_97":-5,"_98":338,"_75":339},{"_32":169,"_13":166,"_83":170,"_85":-5,"_87":59,"_88":171,"_90":26,"_34":172,"_40":92,"_93":173,"_95":174,"_66":50,"_97":-5,"_98":336,"_75":337},{"_32":150,"_13":147,"_83":151,"_85":-5,"_87":59,"_88":126,"_90":26,"_34":152,"_40":92,"_93":153,"_95":154,"_66":50,"_97":155,"_98":334,"_75":335},{"_32":285,"_13":286,"_83":287,"_85":-5,"_87":59,"_88":92,"_90":26,"_34":331,"_40":22,"_93":153,"_95":289,"_66":50,"_97":-5,"_98":332,"_75":333},{"_32":279,"_13":280,"_83":281,"_85":-5,"_87":59,"_88":92,"_90":26,"_34":328,"_40":22,"_93":94,"_95":283,"_66":50,"_97":-5,"_98":329,"_75":330},["D",1779223839498],[],[280],["D",1779223839498],[],[286],[],[147],[],[166],[],[102,82],"64e1bd14-53c4-11f1-9542-ee650bb23af1","sip.ts","019e4201-4376-74f8-ae4a-5d848c890de0",["D",1779223839498],"import { Hono } from \"npm:hono\";\nimport { Webhook } from \"npm:svix\";\nimport { makeSession } from \"./agent.ts\";\nimport { getErrorText, makeHeaders, makeUrl } from \"./utils.ts\";\n\nconst sip = new Hono();\n\n// POST /sip : webhook endpoint\nsip.post(\"/\", async (c) => {\n // Verify the webhook.\n const OPENAI_SIGNING_SECRET = Deno.env.get(\"OPENAI_SIGNING_SECRET\");\n if (!OPENAI_SIGNING_SECRET) {\n console.error(\"🔴 webhook secret not configured\");\n return c.text(\"Internal error\", 500);\n }\n const webhook = new Webhook(OPENAI_SIGNING_SECRET);\n const bodyStr = await c.req.text();\n let callId: string | undefined;\n let toNumber: string | undefined;\n try {\n const headers = Object.fromEntries(c.req.raw.headers.entries());\n const payload: any = webhook.verify(bodyStr, headers);\n callId = payload.data.call_id;\n toNumber = getToNumber(payload.data.sip_headers);\n const fromNumber = getFromNumber(payload.data.sip_headers);\n console.log(\"✅ verified webhook:\", callId, fromNumber, toNumber);\n } catch (error) {\n console.error(`🔴 verify failed: ${error}`);\n return c.text(\"Invalid signature\", 401);\n }\n\n // Accept the call. SIP calls come from phone users — there's no logged-in\n // Val Town user, so we don't attach an MCP token. The agent will run with\n // only the built-in `display_text` function tool (and no val.town MCP).\n const model = getModelForNumber(toNumber);\n const url = makeUrl(callId, \"accept\");\n const headers = makeHeaders(\"application/json\");\n const body = JSON.stringify(makeSession(model));\n const opts = { method: \"POST\", headers, body };\n const resp = await fetch(url, opts);\n if (!resp.ok) {\n console.error(`🔴 accept failed: ${await getErrorText(resp)}`);\n return c.text(\"Internal error\", 500);\n }\n console.log(\"✅ call accepted:\", callId);\n\n // Kick off observer in the background (fire-and-forget).\n const selfUrl = new URL(c.req.url);\n fetch(`${selfUrl.origin}/observer/${callId}`, { method: \"POST\" })\n .catch((e) => console.error(\"observer start failed:\", e));\n\n return c.newResponse(null);\n});\n\nconst getToNumber = headers => getNumberFromSipHeader(headers, \"to\");\nconst getFromNumber = headers => getNumberFromSipHeader(headers, \"from\");\n\nfunction getNumberFromSipHeader(headers: any, name: string) {\n const header = getSipHeader(headers, name);\n const match = header?.match(/sip:\\+?(\\d+)@/);\n return match ? `+${match[1]}` : undefined;\n}\n\nfunction getSipHeader(headers: any, name: string) {\n return headers.find((h) => h.name.toLowerCase() === name)?.value;\n}\n\nfunction getModelForNumber(number: string) {\n const map = { \"+14258000074\": \"gpt-realtime-mini\" };\n return map[number];\n}\n\nexport default sip;",[],[102,341],[],[102,114],"64e19b0e-53c4-11f1-9542-ee650bb23af1","observer.ts","019e4201-4376-74f8-ae4a-55e75c64aeee",["D",1779223839498],"import { Hono } from \"npm:hono\";\nimport WebSocket from \"npm:ws\";\nimport { createHandler } from \"./agent.ts\";\nimport { makeHeaders, makeUrl } from \"./utils.ts\";\n\nexport interface ObserverHandler {\n onInit(): void;\n onTool(name: string, args: any): void;\n onMcpCallCompleted(name: string, output: string | null): void;\n onOutputAudioStarted(): void;\n onOutputAudioStopped(): void;\n onOutputAudioCleared(): void;\n}\n\nexport class ObserverClient {\n private ws: WebSocket;\n private closeResolve: () => void;\n private closePromise: Promise;\n private handler: ObserverHandler;\n\n constructor(callId: string) {\n const url = makeUrl(callId);\n this.ws = new WebSocket(url, { headers: makeHeaders() });\n this.ws.on(\"open\", () => this.handleOpen());\n this.ws.on(\"message\", (data) => this.handleMessage(JSON.parse(data)));\n this.ws.on(\"error\", (err) => this.handleError(err));\n this.ws.on(\"close\", (ev) => this.handleClose(ev));\n this.closePromise = new Promise((resolve) =>\n this.closeResolve = resolve\n );\n this.handler = createHandler(this, callId);\n }\n createResponse() {\n this.sendMessage({ type: \"response.create\" });\n }\n async waitForClose() {\n await this.closePromise;\n }\n private sendMessage(message: any) {\n this.ws.send(JSON.stringify(message));\n }\n private handleOpen() {\n console.log(\"✅ websocket connected\");\n this.handler.onInit();\n }\n private async handleMessage(message: any) {\n if (!message.type.endsWith(\".delta\")) { // ignore verbose messages\n console.log(message);\n }\n switch (message.type) {\n case \"response.function_call_arguments.done\":\n this.handler.onTool(message.name, message.arguments);\n break;\n case \"response.output_item.done\":\n if (message.item?.type === \"mcp_call\") {\n this.handler.onMcpCallCompleted(message.item.name, message.item.output);\n }\n break;\n case \"output_audio_buffer.started\":\n this.handler.onOutputAudioStarted();\n break;\n case \"output_audio_buffer.stopped\":\n this.handler.onOutputAudioStopped();\n break;\n case \"output_audio_buffer.cleared\":\n this.handler.onOutputAudioCleared();\n break;\n }\n }\n private handleError(err: Error) {\n console.error(`🔴 websocket failed: ${err.message}`);\n this.closeResolve();\n }\n private handleClose(e: Event) {\n console.log(`websocket closed: ${e}`);\n this.closeResolve();\n }\n}\n\nconst observer = new Hono();\n\n// POST /observer/:callId : self-connect to establish a web socket\nobserver.post(\"/:callId\", async (c) => {\n const callId = c.req.param(\"callId\");\n const client = new ObserverClient(callId);\n await client.waitForClose();\n return c.newResponse(null);\n});\n\nexport default observer;",[],[102,350],[],[102,188],[],[102,134],["D",1779223839498],[318,319,320,321,322,323],[102],"64e13b28-53c4-11f1-9542-ee650bb23af1","widget.html","019e4201-4376-74f8-ae4a-48aa5b6854ae",["D",1779223839498],"\n\n \n \n \n Voice Edit\n \n \n \n

Voice Edit

Editing –

\n\n

\n \n $\"\"$ \n Log in with Val Town\n \n

\n Lets the AI edit this val on your behalf via your Val Town account.\n

\n\n

\n @\n \n

Click the green circle to start talking. Click again to stop.

\n\n

\n No val specified. Add ?val=handle/name to the script src or set data-val.\n

\n\n

\n\n \n \n\n",[],[207,364],[],[207,198],"64e11440-53c4-11f1-9542-ee650bb23af1","sdk.js","019e4201-4376-74f8-ae4a-44f5e7c94391",["D",1779223839498],"// voice-edit-sdk loader.\n//\n// Drops a small green-circle iframe widget on the host page (bottom-right).\n// All call UI (login, mic, WebRTC, audio) lives same-origin inside the iframe.\n//\n// When the host val is hot-reloaded via live-reload5 (or similar), instead of\n// letting the browser navigate the whole document (which would kill the\n// iframe and drop the call), we long-poll for version bumps ourselves and\n// hot-patch the DOM in place — replacing the body's visible content while\n// leaving the iframe untouched. The call keeps going.\n//\n// \n\n(function () {\n if (window.__voiceEditSdkInstalled) return;\n window.__voiceEditSdkInstalled = true;\n\n const SELF_SCRIPT = document.currentScript ||\n (function () {\n const all = document.getElementsByTagName(\"script\");\n for (let i = all.length - 1; i >= 0; i--) {\n if (all[i].src && /\\/sdk\\.js(?:\\?|$)/.test(all[i].src)) return all[i];\n }\n return null;\n })();\n\n const SDK_ORIGIN = SELF_SCRIPT\n ? new URL(SELF_SCRIPT.src, window.location.href).origin\n : window.location.origin;\n\n function resolveVal() {\n if (SELF_SCRIPT) {\n if (SELF_SCRIPT.dataset && SELF_SCRIPT.dataset.val) {\n return SELF_SCRIPT.dataset.val.trim();\n }\n try {\n const u = new URL(SELF_SCRIPT.src, window.location.href);\n const q = u.searchParams.get(\"val\");\n if (q) return q.trim();\n } catch {}\n }\n if (typeof window.VOICE_EDIT_VAL === \"string\") {\n return window.VOICE_EDIT_VAL.trim();\n }\n return \"\";\n }\n\n const VAL = resolveVal();\n const WIDGET_ID = \"voice-edit-widget\";\n let iframe = null;\n let callActive = false;\n\n function mount() {\n const widgetUrl = new URL(\"/widget\", SDK_ORIGIN);\n if (VAL) widgetUrl.searchParams.set(\"val\", VAL);\n iframe = document.createElement(\"iframe\");\n iframe.src = widgetUrl.toString();\n iframe.title = \"Voice Edit\";\n iframe.id = WIDGET_ID;\n iframe.allow = \"microphone; autoplay\";\n iframe.setAttribute(\n \"sandbox\",\n \"allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox allow-forms\",\n );\n iframe.style.cssText = [\n \"position:fixed\",\n \"bottom:0\",\n \"right:0\",\n \"width:72px\",\n \"height:72px\",\n \"border:0\",\n \"background:transparent\",\n \"color-scheme:normal\",\n \"z-index:2147483647\",\n \"pointer-events:auto\",\n ].join(\";\");\n\n window.addEventListener(\"message\", (ev) => {\n if (ev.origin !== SDK_ORIGIN) return;\n const m = ev.data;\n if (!m || typeof m !== \"object\") return;\n if (m.type === \"voice-edit:resize\") {\n const w = Math.max(40, Math.min(800, Number(m.width) || 72));\n const h = Math.max(40, Math.min(800, Number(m.height) || 72));\n iframe.style.width = w + \"px\";\n iframe.style.height = h + \"px\";\n } else if (m.type === \"voice-edit:call-state\") {\n callActive = !!m.active;\n }\n });\n\n document.body.appendChild(iframe);\n }\n\n // -------- Smart patch: keep the iframe alive across val edits --------\n //\n // We poll /__lastUpdatedAt ourselves (using the original fetch so any other\n // live-reload's wrappers don't interfere). On a real version bump we fetch\n // the new HTML and apply it as a DOM patch instead of navigating, so the\n // iframe element (and the running call inside it) is never removed from\n // the document.\n //\n // We also intercept the host page's /__lastUpdatedAt poll for any\n // co-installed live-reload client (e.g. live-reload5) and feed it a fake\n // \"TIMEOUT\" so it never triggers `location.href = …`. We do the reloads.\n const origFetch = window.fetch.bind(window);\n const ourPollMarker = \"_voiceedit=1\";\n\n window.fetch = function (input, init) {\n try {\n const url = typeof input === \"string\"\n ? input\n : (input && input.url) ? input.url : \"\";\n if (\n /\\/__lastUpdatedAt(?:$|\\?)/.test(url) && !url.includes(ourPollMarker)\n ) {\n // Hold the third-party live-reload poll harmlessly. It will get\n // status:TIMEOUT after a delay and naturally re-poll.\n return new Promise((resolve) => {\n setTimeout(\n () =>\n resolve(\n new Response(\n JSON.stringify({ lastUpdatedAt: 0, status: \"TIMEOUT\" }),\n { headers: { \"Content-Type\": \"application/json\" } },\n ),\n ),\n 30000,\n );\n });\n }\n } catch {}\n return origFetch(input, init);\n };\n\n let lastSeenVersion = 0;\n async function ourPollLoop() {\n while (true) {\n try {\n const sep = window.location.pathname.includes(\"?\") ? \"&\" : \"?\";\n const url = \"/__lastUpdatedAt\" + sep + ourPollMarker;\n const r = await origFetch(url, { cache: \"no-store\" });\n const d = await r.json().catch(() => ({}));\n const v = Number(d.lastUpdatedAt) || 0;\n if (v > 0) {\n if (lastSeenVersion === 0) {\n lastSeenVersion = v;\n } else if (v > lastSeenVersion) {\n lastSeenVersion = v;\n try {\n await smartPatch();\n } catch (e) {\n console.warn(\n \"[voice-edit] smart-patch failed, falling back to reload\",\n e,\n );\n if (!callActive) location.reload();\n }\n }\n }\n if (d.status !== \"TIMEOUT\") {\n // Whatever live-reload server we're talking to didn't long-poll —\n // sleep a beat before polling again so we don't hammer.\n await new Promise((r) => setTimeout(r, 1000));\n }\n } catch {\n await new Promise((r) => setTimeout(r, 2000));\n }\n }\n }\n\n async function smartPatch() {\n const resp = await origFetch(window.location.href, {\n cache: \"no-store\",\n credentials: \"same-origin\",\n });\n if (!resp.ok) throw new Error(\"fetch new html: \" + resp.status);\n const html = await resp.text();\n const newDoc = new DOMParser().parseFromString(html, \"text/html\");\n\n // Update and replace any inline <style> tags in <head>.\n if (newDoc.title) document.title = newDoc.title;\n const oldStyles = Array.from(document.head.querySelectorAll(\"style\"));\n oldStyles.forEach((s) => s.remove());\n Array.from(newDoc.head.querySelectorAll(\"style\")).forEach((s) => {\n document.head.appendChild(s.cloneNode(true));\n });\n\n // Replace body children, but never touch the voice-edit iframe.\n const widget = document.getElementById(WIDGET_ID);\n const toRemove = [];\n document.body.childNodes.forEach((c) => {\n if (c !== widget) toRemove.push(c);\n });\n toRemove.forEach((c) => c.remove());\n\n // Insert new body children before the widget (so it stays last/visible).\n // Skip <script> tags: original scripts are still running; re-injecting\n // them would duplicate side-effects (e.g. live-reload pollers).\n Array.from(newDoc.body.childNodes).forEach((nc) => {\n if (nc.nodeName === \"SCRIPT\") return;\n const adopted = document.importNode(nc, true);\n if (widget) document.body.insertBefore(adopted, widget);\n else document.body.appendChild(adopted);\n });\n }\n\n if (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", () => {\n mount();\n ourPollLoop();\n }, { once: true });\n } else {\n mount();\n ourPollLoop();\n }\n})();\n",[],[207,373],"64e0db60-53c4-11f1-9542-ee650bb23af1","index.html","019e4201-4376-74f8-ae4a-4003f1802f78",["D",1779223839498],"<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\n <title>Voice Edit SDK\n \n \n \n

Voice Edit SDK

\n One line of code, and any Val Town val gets a little green circle in\n the corner that lets you voice-edit its source.\n

\n\n

Usage — Hono

Two lines added to any val you own. The val identifier is auto-detected:

import { voiceEdit } from \"https://esm.town/v/dcm31/voice-edit-sdk/sdk.ts\";\napp.use(voiceEdit());

\n\n

Usage — plain fetch handler

import { wrapFetch } from \"https://esm.town/v/dcm31/voice-edit-sdk/sdk.ts\";\nexport default wrapFetch(myHandler);

\n\n

Or: plain HTML snippet

If you'd rather paste a script tag into your HTML:

<script src=\"/sdk.js\" data-val=\"handle/name\" defer></script>

\n\n

What it does

\n Adds a small green circle in the bottom-right corner. Click to expand\n a login card, sign in with Val Town, then click again to start talking.\n The AI uses your Val Town MCP token to read and edit the host val's\n source — say things like \"add a button that says hello\" or\n \"in main.tsx, change the title to 'Welcome'\". Refresh the\n page to see edits live.\n

\n\n

How it works

\n The script injects an <iframe> pointing at this\n val's /widget page.\n
\n The widget runs same-origin, so OAuth, WebRTC, and audio all live\n inside it — no cross-origin cookie or CORS issues.\n
\n On connect, the OpenAI Realtime API is given the Val Town MCP server\n plus your access token, scoped to the val you specified.\n
\n The circle pulses with the AI's voice volume via an\n AnalyserNode on the remote audio track.\n

\n\n

Auth status

Checking…

\n\n \n

\n\n \n \n\n",[],[207,380],["D",1779223839498],[313,314,315,316],[207],["D",1779223839498],{"_11":12,"_246":242},{"_11":12,"_239":240,"_241":242,"_214":215,"_243":244,"_245":50},{"_40":58,"_13":16,"_32":59,"_38":60,"_42":33,"_44":41,"_61":52,"_62":39,"_63":55,"_56":14,"_53":12},"ctx",{"_234":-5,"_267":426,"_427":428,"_429":430,"_431":50,"_432":50,"_433":50,"_434":26,"_435":-5,"_436":-7,"_437":-7,"_438":22,"_439":50,"_440":50,"_441":-5,"_442":50,"_443":50,"_444":50,"_445":-5},"ENV",{"_397":398,"_399":400,"_401":16,"_402":403,"_404":405,"_406":407,"_408":409,"_410":411,"_412":413,"_414":415,"_416":417,"_418":419,"_420":421,"_422":423,"_424":425},"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"]

Compare

Mergetalk-to-code/mainintovoice-edit-sdk/main

README.md+85-46

Hmain.tsx+6-50

routes/agent.ts+164-31

routes/rtc.ts+39-17

routes/utils.ts+8-2

frontend/studio.html+1320-0

routes/api.ts+301-0