[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_337":338,"_339":340},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_251":-5,"_20":252,"_22":253,"_254":255,"_256":257,"_26":258,"_24":259,"_260":261,"_262":263,"_264":53,"_265":266,"_267":75,"_268":-5,"_269":-5,"_270":271},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":32,"_33":34,"_35":-5},"handle","dcm31","name","voice-edit-sdk","branchName","main","version","path","frontend","project",{"_36":207,"_13":14,"_38":208,"_51":-5,"_209":53,"_54":55,"_210":55,"_211":212,"_213":-5,"_214":215,"_216":130,"_217":75,"_218":-5,"_219":-5,"_220":34,"_57":58,"_221":-5,"_222":-5,"_223":-5,"_224":-5,"_225":226,"_227":226,"_228":229,"_230":229,"_231":229,"_232":226,"_233":226,"_234":235,"_236":237,"_238":239,"_52":53},"tree",[105,106,107,108,109,110],"file",{"_36":100,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":101,"_74":75,"_38":102,"_17":34,"_78":103,"_79":-5,"_81":53,"_82":-5,"_18":104},"contents",[61,62,63],"upstream",{"_36":37,"_38":39,"_40":41,"_13":16,"_42":43,"_17":44,"_45":46,"_47":48,"_49":50,"_51":-5,"_52":53,"_54":55,"_56":12,"_57":58,"_59":60},"pull","ahead",38,"behind",0,"envVars","id","9851274e-539b-11f1-b21e-ee650bb23af1","createdAt",["D",1779206316505],"updatedAt",["D",1779209326110],"projectId","984a3ce0-539b-11f1-b21e-ee650bb23af1",9,"forkedBranchId","53c6585e-373c-11f1-83b9-42b51c65c3df","forkedBranchVersion",50,"lockfileKey","1779209355978-esm.town_v_dcm31_hello-realtime-townie3@9-main","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","projectName","hello-realtime-townie3",{"_36":92,"_13":93,"_66":94,"_68":69,"_70":71,"_72":95,"_74":75,"_38":96,"_17":97,"_78":24,"_79":98,"_81":53,"_82":-5,"_18":99},{"_36":84,"_13":85,"_66":86,"_68":69,"_70":71,"_72":32,"_74":75,"_38":87,"_17":88,"_78":89,"_79":90,"_81":53,"_82":-5,"_18":91},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_38":76,"_17":77,"_78":24,"_79":80,"_81":53,"_82":-5,"_18":83},"f3e6e414-53c2-11f1-b508-ee650bb23af1","widget.html","fileId","2655f20c-53b7-11f1-93b3-ee650bb23af1","parentId","019e41a4-e477-710e-b0d1-5f4905a340fa","branchId","4c9ae892-53b6-11f1-9dc5-ee650bb23af1","branchVersion",37,"latest",true,["D",1779223220582],19,"fileType","content","\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","deleted","label",[19,65],"0f4076ee-53c3-11f1-b760-ee650bb23af1","sdk.js","377bf658-53b7-11f1-9d57-ee650bb23af1",["D",1779223266453],4,"script","// 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",[19,85],"1b46290c-53c3-11f1-83f4-ee650bb23af1","index.html","019e41a4-e477-710e-b0d1-5b371b14fb9d",39,["D",1779223286621],6,"<!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",[19,93],"4ca0e5a8-53b6-11f1-9dc5-ee650bb23af1",1,["D",1779217785910],"directory",[19],{"_36":100,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":101,"_74":75,"_38":192,"_17":34,"_78":103,"_79":-5,"_81":53,"_82":-5,"_117":193,"_18":194},{"_36":144,"_13":145,"_66":146,"_68":-5,"_70":71,"_72":101,"_74":75,"_38":147,"_17":34,"_78":103,"_79":-5,"_81":53,"_82":-5,"_117":148,"_18":149},{"_36":137,"_13":138,"_66":139,"_68":-5,"_70":71,"_72":101,"_74":75,"_38":140,"_17":34,"_78":24,"_79":141,"_81":53,"_82":-5,"_117":142,"_18":143},{"_36":128,"_13":129,"_66":130,"_68":-5,"_70":71,"_72":131,"_74":75,"_38":132,"_17":133,"_78":124,"_79":134,"_81":53,"_82":-5,"_117":135,"_18":136},{"_36":120,"_13":121,"_66":122,"_68":-5,"_70":71,"_72":101,"_74":75,"_38":123,"_17":34,"_78":124,"_79":125,"_81":53,"_82":-5,"_117":126,"_18":127},{"_36":111,"_13":112,"_66":113,"_68":-5,"_70":71,"_72":114,"_74":75,"_38":115,"_17":34,"_78":89,"_79":116,"_81":53,"_82":-5,"_117":118,"_18":119},"8273f060-53b8-11f1-a3f9-ee650bb23af1","sdk.ts","8273f13c-53b8-11f1-a3f9-ee650bb23af1",10,["D",1779218735286],"// Voice Edit SDK — drop-in module for any Val Town HTTP val.\n//\n// Hono apps (one line after the import):\n//\n// import { voiceEdit } from \"https://esm.town/v/dcm31/voice-edit-sdk/sdk.ts\";\n// app.use(voiceEdit());\n//\n// Plain fetch handlers:\n//\n// import { wrapFetch } from \"https://esm.town/v/dcm31/voice-edit-sdk/sdk.ts\";\n// export default wrapFetch(myHandler);\n//\n// The val you want to voice-edit is auto-detected from VALTOWN_ENTRYPOINT —\n// i.e. the val that imports this module is the one the AI gets to edit.\n// Pass `{ val: \"handle/name\" }` to override.\n//\n// The backend (`/widget`, `/rtc`, `/sdk.js`) lives on this val's public\n// deployment. Override with `{ sdkOrigin: \"https://your-fork.web.val.run\" }`\n// if you remix this val.\n\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\n\n// Public deployment of dcm31/voice-edit-sdk. Don't change unless you fork.\nconst DEFAULT_SDK_ORIGIN =\n \"https://dcm31--019e41a4e477710eb0d17c4e5fd07902.web.val.run\";\n\nexport interface VoiceEditOptions {\n /** \"handle/name\" of the val to edit. Auto-detected from VALTOWN_ENTRYPOINT if omitted. */\n val?: string;\n /** Override the SDK backend origin. Defaults to the public dcm31/voice-edit-sdk deployment. */\n sdkOrigin?: string;\n}\n\nfunction autoDetectVal(): string | undefined {\n try {\n const entrypoint = Deno.env.get(\"VALTOWN_ENTRYPOINT\");\n if (!entrypoint) return undefined;\n const parsed: any = parseVal(entrypoint);\n const handle = parsed?.author?.username ?? parsed?.handle ??\n parsed?.author?.handle;\n const name = parsed?.name;\n if (handle && name) return `${handle}/${name}`;\n // Fallback: parse from the val.town URL if structured fields aren't there.\n const url: string | undefined = parsed?.links?.self?.val;\n if (url) {\n const m = url.match(/val\\.town\\/x\\/([^/]+)\\/([^/?#]+)/);\n if (m) return `${m[1]}/${m[2]}`;\n }\n } catch {}\n return undefined;\n}\n\nfunction escapeAttr(s: string): string {\n return s.replace(/&/g, \"&\").replace(/\"/g, \""\");\n}\n\nexport function scriptTag(opts: VoiceEditOptions = {}): string {\n const sdkOrigin = opts.sdkOrigin || DEFAULT_SDK_ORIGIN;\n const val = opts.val || autoDetectVal();\n const dataAttr = val ? ` data-val=\"${escapeAttr(val)}\"` : \"\";\n return ``;\n}\n\nfunction injectIntoHtml(html: string, tag: string): string {\n if (html.includes(\"\")) return html.replace(\"\", `${tag}`);\n if (html.includes(\"\")) return html.replace(\"\", `${tag}`);\n return html + tag;\n}\n\nasync function maybeInject(\n resp: Response,\n opts: VoiceEditOptions,\n): Promise {\n const ct = resp.headers.get(\"Content-Type\") || \"\";\n if (!ct.toLowerCase().includes(\"text/html\")) return resp;\n const body = await resp.text();\n const injected = injectIntoHtml(body, scriptTag(opts));\n const headers = new Headers(resp.headers);\n headers.delete(\"Content-Length\");\n return new Response(injected, {\n status: resp.status,\n statusText: resp.statusText,\n headers,\n });\n}\n\n/**\n * Hono middleware. Injects the voice-edit script tag into any HTML response.\n *\n * app.use(voiceEdit());\n * app.use(voiceEdit({ val: \"dcm31/my-val\" }));\n */\nexport function voiceEdit(opts: VoiceEditOptions = {}) {\n return async (c: any, next: () => Promise) => {\n await next();\n if (!c.res) return;\n c.res = await maybeInject(c.res, opts);\n };\n}\n\n/**\n * Plain fetch-handler wrapper. Inject the voice-edit script tag into HTML\n * responses returned from the inner handler.\n *\n * export default wrapFetch(app.fetch);\n * export default wrapFetch((req) => new Response(\"

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","children",[],[112],"4ca15ce0-53b6-11f1-9dc5-ee650bb23af1","oauth-test.tsx","019e41a4-e477-710e-b0d1-83c9e859cec0",["D",1779217785910],"http","/** @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",[],[121],"799b75aa-53bb-11f1-a728-ee650bb23af1","main.tsx","019e41a4-e477-710e-b0d1-7c4e5fd07902",21,["D",1779220008922],3,"import { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport {\n getOAuthUserData,\n oauthMiddleware,\n} from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport rtc from \"./routes/rtc.ts\";\nimport sip from \"./routes/sip.ts\";\nimport observer from \"./routes/observer.ts\";\n\nconst SOURCE_URL = parseVal(Deno.env.get(\"VALTOWN_ENTRYPOINT\")).links.self.val;\n\nconst app = new Hono();\n\n// CORS for cross-origin embeds (the SDK is loaded onto third-party val pages).\napp.use(\"*\", async (c, next) => {\n await next();\n const origin = c.req.header(\"Origin\");\n if (origin) {\n c.res.headers.set(\"Access-Control-Allow-Origin\", origin);\n c.res.headers.set(\"Access-Control-Allow-Credentials\", \"true\");\n c.res.headers.set(\"Vary\", \"Origin\");\n }\n});\napp.options(\"*\", (c) => {\n c.res.headers.set(\n \"Access-Control-Allow-Methods\",\n \"GET, POST, OPTIONS\",\n );\n c.res.headers.set(\"Access-Control-Allow-Headers\", \"Content-Type\");\n return c.body(null, 204);\n});\n\napp.route(\"/rtc\", rtc);\napp.route(\"/sip\", sip);\napp.route(\"/observer\", observer);\napp.get(\"/source\", (c) => c.redirect(SOURCE_URL));\n\n// Lightweight session probe used by the widget to render login state.\napp.get(\"/me\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session) return c.json({ loggedIn: false });\n return c.json({\n loggedIn: true,\n username: session.user.username,\n profileImageUrl: session.user.links.profileImageUrl,\n });\n});\n\n// Token hand-off: called by the popup after OAuth to read the access token,\n// which is then postMessaged to the widget iframe. The iframe can't read\n// session cookies cross-origin (third-party cookie blocking), so it carries\n// the token as Authorization: Bearer on subsequent calls. Cookie-only.\napp.get(\"/auth/token\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session) {\n return c.json({ loggedIn: false }, 401);\n }\n return c.json({\n loggedIn: true,\n username: session.user.username,\n accessToken: session.accessToken,\n });\n});\n\n// The embeddable widget. Loaded inside an iframe on any val page.\napp.get(\"/widget\", () => serveFile(\"/frontend/widget.html\", import.meta.url));\n\n// The SDK loader script. Host vals include this with a one-line