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","label",[166,67],"frontend","pulls","branches",2,"forks","envVars",{"_175":169,"_177":39},"connections",{"_175":26,"_176":26},"count","unfilledCount","emptyCount",{"_32":306,"_13":166,"_65":158,"_42":-5,"_34":35,"_159":39,"_160":86,"_36":307,"_38":26,"_68":277,"_162":-5,"_69":24,"_164":-5,"_200":308,"_17":309},{"_32":157,"_13":67,"_65":66,"_42":158,"_34":35,"_159":39,"_160":86,"_36":303,"_38":26,"_68":21,"_162":163,"_69":24,"_164":-5,"_200":304,"_17":305},{"_32":296,"_13":297,"_65":298,"_42":158,"_34":35,"_159":39,"_160":86,"_36":299,"_38":26,"_68":198,"_162":300,"_69":24,"_164":-5,"_200":301,"_17":302},{"_32":287,"_13":288,"_65":289,"_42":158,"_34":35,"_159":290,"_160":86,"_36":291,"_38":292,"_68":21,"_162":293,"_69":24,"_164":-5,"_200":294,"_17":295},{"_32":280,"_13":281,"_65":282,"_42":158,"_34":35,"_159":39,"_160":86,"_36":283,"_38":26,"_68":21,"_162":284,"_69":24,"_164":-5,"_200":285,"_17":286},{"_32":275,"_13":235,"_65":229,"_42":-5,"_34":35,"_159":39,"_160":86,"_36":276,"_38":26,"_68":277,"_162":-5,"_69":24,"_164":-5,"_200":278,"_17":279},{"_32":267,"_13":268,"_65":269,"_42":229,"_34":35,"_159":109,"_160":86,"_36":270,"_38":271,"_68":198,"_162":272,"_69":24,"_164":-5,"_200":273,"_17":274},{"_32":259,"_13":260,"_65":261,"_42":229,"_34":35,"_159":262,"_160":86,"_36":263,"_38":152,"_68":198,"_162":264,"_69":24,"_164":-5,"_200":265,"_17":266},{"_32":252,"_13":253,"_65":254,"_42":229,"_34":35,"_159":39,"_160":86,"_36":255,"_38":26,"_68":198,"_162":256,"_69":24,"_164":-5,"_200":257,"_17":258},{"_32":243,"_13":244,"_65":245,"_42":229,"_34":35,"_159":246,"_160":86,"_36":247,"_38":248,"_68":198,"_162":249,"_69":24,"_164":-5,"_200":250,"_17":251},{"_32":236,"_13":237,"_65":238,"_42":229,"_34":35,"_159":39,"_160":86,"_36":239,"_38":26,"_68":198,"_162":240,"_69":24,"_164":-5,"_200":241,"_17":242},{"_32":226,"_13":227,"_65":228,"_42":229,"_34":35,"_159":230,"_160":86,"_36":231,"_38":39,"_68":198,"_162":232,"_69":24,"_164":-5,"_200":233,"_17":234},{"_32":218,"_13":219,"_65":220,"_42":-5,"_34":35,"_159":221,"_160":86,"_36":222,"_38":39,"_68":21,"_162":223,"_69":24,"_164":-5,"_200":224,"_17":225},{"_32":211,"_13":212,"_65":84,"_42":-5,"_34":35,"_159":169,"_160":86,"_36":213,"_38":39,"_68":207,"_162":214,"_69":24,"_164":215,"_200":216,"_17":217},{"_32":203,"_13":204,"_65":205,"_42":-5,"_34":35,"_159":39,"_160":86,"_36":206,"_38":26,"_68":207,"_162":208,"_69":24,"_164":-5,"_200":209,"_17":210},{"_32":194,"_13":195,"_65":196,"_42":-5,"_34":35,"_159":39,"_160":86,"_36":197,"_38":26,"_68":198,"_162":199,"_69":24,"_164":-5,"_200":201,"_17":202},"650f0bd4-53c4-11f1-9542-ee650bb23af1","sdk.ts","019e4201-4376-74f8-ae4a-75f72d9143ad",["D",1779223839498],"script","// 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",[],[195],"650f079c-53c4-11f1-9542-ee650bb23af1","oauth-test.tsx","019e4201-4376-74f8-ae4a-71a9fe9f9fbe",["D",1779223839498],"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",[],[204],"86b7d31a-53c4-11f1-8cfa-ee650bb23af1","main.tsx",["D",1779223896398],"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 observer from \"./routes/observer.ts\";\nimport api from \"./routes/api.ts\";\n\nconst SOURCE_URL = parseVal(Deno.env.get(\"VALTOWN_ENTRYPOINT\")).links.self.val;\n\nconst app = new Hono();\n\napp.route(\"/rtc\", rtc);\napp.route(\"/observer\", observer);\napp.route(\"/api\", api);\napp.get(\"/source\", (c) => c.redirect(SOURCE_URL));\n\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 handoff — included for completeness but the studio is top-level\n// same-origin so cookies work and Bearer is rarely needed.\napp.get(\"/auth/token\", async (c) => {\n const session = await getOAuthUserData(c.req.raw);\n if (!session) return c.json({ loggedIn: false }, 401);\n return c.json({\n loggedIn: true,\n username: session.user.username,\n accessToken: session.accessToken,\n });\n});\n\napp.get(\"/\", () => serveFile(\"/frontend/studio.html\", import.meta.url));\napp.get(\"/favicon.ico\", async (c) => {\n const entry = parseVal(Deno.env.get(\"VALTOWN_ENTRYPOINT\"));\n const file = await blob.get(`${entry.name}/favicon.ico`);\n if (!file) return c.text(\"favicon not found\", 404);\n return new Response(file.body, {\n headers: {\n \"Content-Type\": \"image/x-icon\",\n \"Cache-Control\": \"public, max-age=31536000, immutable\",\n },\n });\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default oauthMiddleware(\n {\n scopes: [\n \"openid\",\n \"offline_access\",\n \"profile\",\n \"user_r\",\n \"val_rw\",\n \"project_rw\",\n \"blob_rw\",\n \"sqlite_rw\",\n \"telemetry_rw\",\n ],\n },\n app.fetch,\n);\n","talk",[],[212],"a2d9d06a-5ba9-11f1-86ac-ee650bb23af1","README.md","019e4201-4376-74f8-ae4a-6b7660c5976c",78,["D",1780091956486],"# Voice Edit Studio\n\n**Voice Edit Studio** (`talk-to-code`) is a voice-controlled workspace for\nbuilding and editing [Val Town](https://val.town) vals just by talking. You see\na val's live page in an iframe on the left and speak to an AI host (powered by\nthe OpenAI Realtime API) that reads, writes, and creates vals for you in real\ntime.\n\nLive at **[talk.val.run](https://talk.val.run)**.\n\n## What it does\n\n- **Talk to edit** — describe a change (\"add a dark mode toggle\", \"make the\n header bigger\") and the AI edits the val's files, then reloads the preview.\n- **Open any val** — say _\"open my X\"_, **type a val name** in the box (a bare\n name resolves to your handle; `handle/name` and pasted val.town URLs work\n too), click one from **Recent vals**, or seed it with `?val=handle/name`.\n- **Create from scratch** — the **✨ Create a new val** button (or just asking\n the AI) spins up a minimal HTTP val with a starter page and loads it, so you\n have an instant canvas to iterate on.\n- **Newcomer-friendly** — the AI is briefed to assume the person may be brand\n new to this _and_ to Val Town, orient them in plain language, and offer a\n concrete first thing to build.\n- **Scenes & choreography** — vals can ship a `CHOREOGRAPHY.md`; the AI triggers\n pre-built overlays via the `set_scene` tool and can drive slideshows.\n\n## How it works\n\n1. The browser logs in with **Val Town OAuth** and opens a WebRTC mic\n connection.\n2. `POST /rtc` negotiates an **OpenAI Realtime** session, seeded with the\n official Townie system prompt plus a Studio-specific addendum, and attaches\n the signed-in user's **Val Town MCP** token so the AI can read/write their\n vals (`routes/agent.ts`).\n3. The AI calls **function tools** handled in the browser — `load_val`,\n `navigate_page`, `reload_site`, `set_scene`, `slide_next/prev/goto` — and the\n `val_town_mcp` tools for file edits.\n4. The preview iframe reloads **on demand** (via the `reload_site` tool or the\n \"↻ Reload site\" button) — auto-refresh polling is intentionally disabled.\n\n## Running your own / OpenAI key\n\nThe deployed studio runs on the owner's `OPENAI_API_KEY`. If that key is ever\nrejected or out of quota, the UI shows a **\"remix this val & add your own\n`OPENAI_API_KEY`\"** prompt instead of a cryptic error.\n\nTo run your own copy:\n\n1. **Remix** this val (the link in the error, or the Remix button on the val\n page).\n2. Set **`OPENAI_API_KEY`** (an OpenAI key with Realtime API access) in the\n remixed val's environment variable settings.\n3. Open the val's HTTP endpoint and start talking.\n\n## Environment variables\n\n- **`OPENAI_API_KEY`** _(required)_ — OpenAI key with Realtime API access. The\n app no longer crashes at startup when this is missing; instead `/rtc` returns\n a structured error the UI turns into the remix prompt above.\n\n## API endpoints\n\n- `GET /` — serves the studio (`frontend/studio.html`)\n- `POST /rtc?val=` — create a new WebRTC Realtime session (`val` is\n optional). Returns `{ code: \"openai\" | \"upstream\", ... }` on failure.\n- `POST /observer/:callId` — internal server-side session control (fire-and-forget)\n- `GET /me` — current login state\n- `GET /auth/token` — OAuth token handoff (rarely needed; the studio is\n same-origin)\n- `GET /source` — 302-redirects to this val's page on Val Town (used by the\n remix link, so it's correct even for remixed copies)\n- `GET /api/resolve-val?val=` — resolve a val to its live HTTP URL\n- `GET /api/recent-vals` — the signed-in user's most recent vals\n- `POST /api/create-val` — create a new public val with a minimal HTTP starter\n\n## Project structure\n\n```\n├── main.tsx # Entrypoint: OAuth middleware, route mounting, /me, /source, serves studio\n├── frontend/\n│ └── studio.html # The Voice Edit Studio UI (WebRTC, waveform, sidebar, load/create)\n└── routes/\n ├── agent.ts # Realtime session config: tools + Townie prompt + Studio addendum\n ├── rtc.ts # WebRTC session setup + OpenAI-error classification\n ├── observer.ts # Server-side session control (WebSocket to OpenAI)\n ├── api.ts # /api: resolve-val, recent-vals, create-val\n └── utils.ts # Realtime API URL/header helpers + hasOpenAIKey()\n```\n\nOther files (`routes/sip.ts`, `frontend/index.html`, `frontend/widget.html`,\n`frontend/sdk.js`, `sdk.ts`, `oauth-test.tsx`) are inherited from the\n`hello-realtime` base this was built on and are **not mounted** by `main.tsx`.\n\n## Notes\n\n- **If the AI says it can't edit files**, the Val Town OAuth token has gone\n stale — **log out and back in** from the sidebar to refresh it.\n- **The preview does not auto-refresh** — the AI reloads it after finishing\n edits, or you can hit \"↻ Reload site\".\n",[],[219],"91253eb0-5ba7-11f1-9b97-ee650bb23af1","utils.ts","019e4201-4376-74f8-ae4a-601e8e7c7198","019e4201-4376-74f8-ae4a-64add1b7cf5c",72,["D",1780091067776],"const REALTIME_BASE_URL = \"https://api.openai.com/v1/realtime\";\nconst OPENAI_API_KEY = Deno.env.get(\"OPENAI_API_KEY\");\n\n// Whether an OpenAI key is configured on this deployment. We intentionally do\n// NOT throw at module load when it's missing — a freshly-remixed copy hasn't\n// had its OPENAI_API_KEY set yet, and throwing here would 500 every route\n// (including the studio page itself). Instead /rtc checks this and returns a\n// graceful \"bring your own key\" error the UI can act on.\nexport function hasOpenAIKey(): boolean {\n return !!OPENAI_API_KEY;\n}\n\n// Builds the URL for a Realtime API endpoint.\nexport function makeUrl(callId?: string, action?: string) {\n let url = REALTIME_BASE_URL;\n if (!callId) {\n // start call (POST)\n url += \"/calls\";\n } else if (action) {\n // accept, reject, hangup (POST)\n url += `/calls/${callId}/${action}`;\n } else {\n // observer (web socket)\n url += `?call_id=${callId}`;\n }\n return url;\n}\n\n// Builds the headers for a Realtime API endpoint.\nexport function makeHeaders(contentType?: string) {\n const obj: Record = {\n Authorization: `Bearer ${OPENAI_API_KEY}`,\n };\n if (contentType) obj[\"Content-Type\"] = contentType;\n return obj;\n}\n\n// Debug helper for printing Realtime API errors.\nexport async function getErrorText(resp: Response) {\n const errBody = await resp.text().catch(() => \"\");\n return `${resp.status} ${resp.statusText}: ${errBody}`;\n}",[],[235,227],"routes","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;",[],[235,237],"9bd363f0-5ba7-11f1-b941-ee650bb23af1","rtc.ts","019e4201-4376-74f8-ae4a-5bd4e8770c3d",75,["D",1780091085660],5,"import { Hono } from \"npm:hono\";\nimport { getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\nimport { makeSession } from \"./agent.ts\";\nimport { getErrorText, hasOpenAIKey, makeHeaders, makeUrl } from \"./utils.ts\";\n\nconst rtc = new Hono();\n\n// POST /rtc?val= : create a new voice-edit-studio call.\n// `val` is optional — if omitted, the AI will start without an initial val\n// and the user can ask it to load one via the load_val tool.\nrtc.post(\"/\", async (c) => {\n let accessToken: string | undefined;\n let username = \"anonymous\";\n const session = await getOAuthUserData(c.req.raw);\n if (session) {\n accessToken = session.accessToken;\n username = session.user.username;\n } else {\n const auth = c.req.header(\"Authorization\") ||\n c.req.header(\"authorization\");\n if (auth && auth.startsWith(\"Bearer \")) {\n accessToken = auth.slice(7).trim();\n }\n }\n if (!accessToken) {\n return c.text(\"Unauthorized — log in first\", 401);\n }\n\n // No OpenAI key on this deployment → the voice agent can't run. Tell the UI\n // so it can prompt the user to remix and add their own key.\n if (!hasOpenAIKey()) {\n console.error(\"🔴 start call blocked: no OPENAI_API_KEY configured\");\n return c.json({\n code: \"openai\",\n status: 0,\n message: \"No OpenAI API key is configured on this val.\",\n }, 503);\n }\n\n const model = c.req.query(\"model\");\n const val = c.req.query(\"val\") || undefined;\n if (\n val && !/^[a-zA-Z][a-zA-Z0-9_-]{0,30}\\/[a-zA-Z][a-zA-Z0-9_-]{0,47}$/.test(val)\n ) {\n return c.text(`Invalid val identifier \"${val}\". Expected handle/name.`, 400);\n }\n\n console.log(\n `🔑 starting studio call for @${username}${val ? ` → ${val}` : \" (no initial val)\"}`,\n );\n\n const fd = new FormData();\n fd.set(\"sdp\", await c.req.text());\n fd.set(\n \"session\",\n JSON.stringify(makeSession(model, false, accessToken, val, username)),\n );\n const opts = { method: \"POST\", headers: makeHeaders(), body: fd };\n const resp = await fetch(makeUrl(), opts);\n if (!resp.ok) {\n console.error(`🔴 start call failed: ${await getErrorText(resp)}`);\n const s = resp.status;\n // OpenAI rejected the key, or it's out of credit / quota / rate-limited.\n // 401/403 bad-or-disabled key, 402 billing, 429 rate limit or\n // insufficient_quota. Surface these as a \"bring your own key\" prompt.\n if (s === 401 || s === 402 || s === 403 || s === 429) {\n return c.json({\n code: \"openai\",\n status: s,\n message: \"The OpenAI API key was rejected or is out of quota.\",\n }, 502);\n }\n return c.json(\n { code: \"upstream\", status: s, message: \"Upstream error starting the call.\" },\n 502,\n );\n }\n\n const contentType = resp.headers.get(\"Content-Type\");\n const location = resp.headers.get(\"Location\");\n const callId = location?.split(\"/\").pop();\n console.log(\"✅ call created:\", 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(resp.body, {\n headers: {\n \"Content-Type\": contentType,\n \"Location\": location,\n },\n });\n});\n\nexport default rtc;\n",[],[235,244],"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;",[],[235,253],"b7ce528c-5ba6-11f1-a657-ee650bb23af1","api.ts","94c01968-53c4-11f1-a841-ee650bb23af1",64,["D",1780090703148],"import { Hono } from \"npm:hono\";\nimport { getOAuthUserData } from \"https://esm.town/v/std/oauth/middleware.ts\";\n\nconst api = new Hono();\nconst VT = \"https://api.val.town\";\n\nasync function getAccessToken(c: any): Promise {\n const session = await getOAuthUserData(c.req.raw);\n if (session) return session.accessToken;\n const auth = c.req.header(\"Authorization\") ||\n c.req.header(\"authorization\");\n if (auth && auth.startsWith(\"Bearer \")) return auth.slice(7).trim();\n return null;\n}\n\nfunction parseValId(valId: string): { handle: string; name: string } | null {\n const m = valId.match(\n /^([a-zA-Z][a-zA-Z0-9_-]{0,30})\\/([a-zA-Z][a-zA-Z0-9_-]{0,47})$/,\n );\n if (!m) return null;\n return { handle: m[1], name: m[2] };\n}\n\nasync function vt(token: string, path: string): Promise {\n return await fetch(`${VT}${path}`, {\n headers: { Authorization: `Bearer ${token}` },\n });\n}\nasync function vtJson(token: string, path: string): Promise {\n const resp = await vt(token, path);\n if (!resp.ok) {\n const body = (await resp.text()).slice(0, 200);\n throw new Error(`${path} → ${resp.status}: ${body}`);\n }\n return await resp.json();\n}\n\nasync function resolveVal(\n valId: string,\n token: string,\n): Promise<{ id: string; url: string; branchId: string | null }> {\n const parsed = parseValId(valId);\n if (!parsed) {\n throw new Error(`Invalid val identifier \"${valId}\". Expected handle/name.`);\n }\n\n // Alias lookup. /v2/alias/vals/{username}/{val_name} returns val metadata.\n const val = await vtJson(\n token,\n `/v2/alias/vals/${parsed.handle}/${parsed.name}`,\n ).catch((e) => {\n throw new Error(`Val not found: ${valId}. ${e.message?.slice(0, 120) || \"\"}`);\n });\n\n // List root files. path/recursive/offset/limit are all required by the spec.\n const filesData = await vtJson(\n token,\n `/v2/vals/${val.id}/files?path=&recursive=true&offset=0&limit=100`,\n );\n const files = filesData.data || [];\n const httpFiles = files.filter((f: any) => f.type === \"http\");\n // Prefer a canonical entry point (main.* / index.*) at the root; fall back\n // to the first HTTP file overall.\n const isEntry = (name: string) =>\n /^(main|index)\\.(tsx?|jsx?)$/i.test(name);\n const httpFile = httpFiles.find((f: any) =>\n isEntry(f.name) && (f.path === f.name || !f.path?.includes(\"/\"))\n ) || httpFiles[0];\n if (!httpFile) {\n throw new Error(\n `Val ${valId} has no HTTP file to serve. Create one with fileType: \"http\" — e.g. a Hono app exporting app.fetch.`,\n );\n }\n const endpoint = httpFile.links?.endpoint;\n if (!endpoint) {\n throw new Error(\n `HTTP file in ${valId} has no endpoint URL yet — it may still be deploying.`,\n );\n }\n\n // Find the main branch id for version polling.\n let branchId: string | null = null;\n try {\n const branchesData = await vtJson(\n token,\n `/v2/vals/${val.id}/branches?offset=0&limit=100`,\n );\n const branches = branchesData.data || [];\n const main = branches.find((b: any) => b.name === \"main\") || branches[0];\n branchId = main?.id || null;\n } catch (e) {\n console.warn(`[resolve-val] branch list failed:`, e);\n }\n\n return { id: val.id, url: endpoint, branchId };\n}\n\napi.get(\"/resolve-val\", async (c) => {\n const token = await getAccessToken(c);\n if (!token) return c.json({ error: \"Unauthorized\" }, 401);\n const valId = c.req.query(\"val\");\n if (!valId) return c.json({ error: \"Missing val\" }, 400);\n try {\n const info = await resolveVal(valId, token);\n return c.json(info);\n } catch (e) {\n return c.json({ error: (e as Error).message }, 400);\n }\n});\n\napi.get(\"/wait-for-val-update\", async (c) => {\n const token = await getAccessToken(c);\n if (!token) return c.json({ error: \"Unauthorized\" }, 401);\n const valId = c.req.query(\"valId\");\n const branchId = c.req.query(\"branchId\");\n const since = parseInt(c.req.query(\"since\") || \"0\", 10) || 0;\n if (!valId || !branchId) {\n return c.json({ error: \"Missing valId or branchId\" }, 400);\n }\n\n // ===== TEMP BLEED FIX — incident 2026-05-23 (val.town /auth + branches API overload) =====\n // The branch-version probe below is commented out so this route no longer\n // calls api.val.town at all. The loop still idles for 45s and returns\n // TIMEOUT, so already-open (\"zombie\") studio tabs keep polling at a harmless\n // ~1 req / 45s instead of generating ~30 val.town API calls per cycle.\n // Because it never returns \"UPDATED\", the studio iframe also stops auto-\n // reloading, which halts the /auth/signin redirect storm from the private\n // val loaded cross-origin in the iframe.\n // TO REVERT: uncomment the try/catch block below.\n const deadline = Date.now() + 45000;\n let lastSeen = since;\n while (Date.now() < deadline) {\n // try {\n // const branch = await vtJson(\n // token,\n // `/v2/vals/${valId}/branches/${branchId}`,\n // );\n // const v = Number(branch.version) || 0;\n // if (lastSeen > 0 && v > lastSeen) {\n // return c.json({ version: v, status: \"UPDATED\" });\n // }\n // if (lastSeen === 0) lastSeen = v;\n // } catch (e) {\n // return c.json({ error: (e as Error).message }, 500);\n // }\n await new Promise((r) => setTimeout(r, 1500));\n }\n return c.json({ version: lastSeen, status: \"TIMEOUT\" });\n});\n\n// List the user's most recently-updated vals, for the sidebar quick-load list.\napi.get(\"/recent-vals\", async (c) => {\n const token = await getAccessToken(c);\n if (!token) return c.json({ error: \"Unauthorized\" }, 401);\n try {\n // /v2/me/vals returns the authenticated user's vals, most-recent first.\n const listing = await vtJson(token, `/v2/me/vals?limit=10&offset=0`);\n const raw = listing.data || listing.vals || [];\n const vals = raw.map((v: any) => ({\n identifier: `${v.author?.username}/${v.name}`,\n name: v.name,\n privacy: v.privacy,\n }));\n return c.json({ vals });\n } catch (e) {\n console.error(\"[recent-vals]\", (e as Error).message);\n return c.json({ error: (e as Error).message }, 500);\n }\n});\n\n// Minimal starter page for a freshly-created val. A self-contained Hono HTTP\n// app so the studio can display it immediately — the newcomer sees a friendly\n// live page they can then iterate on by voice.\nconst STARTER_HTTP = `import { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\napp.get(\"/\", (c) =>\n c.html(\\`\n\n \n \n \n My new val\n \n \n \n

live · just created

Your new val is running 🎉

This page is yours. Tell the assistant what you'd like to build:

\"make this my personal homepage\" · \"build a tip calculator\" · \"add a countdown to the new year\"

\n \n\\`));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n`;\n\n// Create a brand-new val with a minimal HTTP page, so the studio (or a total\n// newcomer who clicks \"Create a new val\") gets an instantly-loadable canvas.\n// We create the val PUBLIC on purpose: (1) private/unlisted require a pro/\n// business org, so public is the only privacy that works for brand-new\n// free-tier signups, and (2) it sidesteps the cross-origin auth-redirect storm\n// that private vals cause when loaded in the studio iframe (incident\n// 2026-05-23). The user can flip privacy later from Val Town.\napi.post(\"/create-val\", async (c) => {\n const token = await getAccessToken(c);\n if (!token) return c.json({ error: \"Unauthorized\" }, 401);\n\n let desiredName = \"\";\n try {\n const body = await c.req.json().catch(() => ({}));\n desiredName = String(body?.name || \"\").trim();\n } catch { /* no body is fine */ }\n\n // Coerce whatever the user typed into a valid val name: must start with a\n // letter, then letters/digits/-/_ only.\n function sanitize(n: string): string {\n let s = n.toLowerCase()\n .replace(/[^a-z0-9\\-_]+/g, \"-\")\n .replace(/^[^a-z]+/, \"\")\n .replace(/-+/g, \"-\")\n .replace(/^-|-$/g, \"\");\n return s.slice(0, 40);\n }\n const base = sanitize(desiredName) || \"my-app\";\n\n // Create the val, retrying with a short random suffix if the name is taken.\n let val: any = null;\n let lastErr = \"\";\n for (let attempt = 0; attempt < 5; attempt++) {\n const name = attempt === 0\n ? base\n : `${base}-${Math.random().toString(36).slice(2, 6)}`;\n const resp = await fetch(`${VT}/v2/vals`, {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${token}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ name, privacy: \"public\" }),\n });\n if (resp.ok) {\n val = await resp.json();\n break;\n }\n if (resp.status === 409) {\n lastErr = `name \"${name}\" already taken`;\n continue;\n }\n lastErr = (await resp.text()).slice(0, 200);\n break;\n }\n if (!val) return c.json({ error: `Couldn't create val: ${lastErr}` }, 400);\n\n // Add the minimal HTTP file so the studio can serve a page.\n const fileResp = await fetch(\n `${VT}/v2/vals/${val.id}/files?path=${encodeURIComponent(\"main.tsx\")}`,\n {\n method: \"POST\",\n headers: {\n Authorization: `Bearer ${token}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({ type: \"http\", content: STARTER_HTTP }),\n },\n );\n const username = val.author?.username;\n const identifier = `${username}/${val.name}`;\n if (!fileResp.ok) {\n const t = (await fileResp.text()).slice(0, 200);\n return c.json(\n { error: `Created ${identifier} but couldn't add a page: ${t}`, identifier },\n 400,\n );\n }\n const file = await fileResp.json();\n return c.json({\n identifier,\n name: val.name,\n url: file?.links?.endpoint || null,\n });\n});\n\nexport default api;\n",[],[235,260],"e7f2330c-5b45-43bb-a910-4be948e29560","agent.ts","019e4201-4376-74f8-ae4a-50649d289a8d",["D",1783998932703],22,"import { ObserverClient, ObserverHandler } from \"./observer.ts\";\nimport { getErrorText, makeHeaders, makeUrl } from \"./utils.ts\";\n\nconst MODEL = \"gpt-realtime-2\";\nconst TRANSCRIBE_MODEL = \"gpt-4o-transcribe\";\nconst NR_TYPE = \"near_field\";\nconst VOICE = \"marin\";\n\n// Load the official Val Town \"Townie\" system prompt at module init, exactly\n// like stevekrouse/hello-realtime-townie does. This is the battle-tested\n// prompt that makes the model genuinely competent at reading/creating/editing\n// vals via the val_town_mcp tools. We append a Studio-specific addendum below\n// (iframe workspace + load_val/navigate_page/slide tools). Wrapped in a\n// try/catch so a transient fetch failure can't take the whole val down.\nlet towniePrompt = \"\";\ntry {\n towniePrompt =\n await (await fetch(\"https://www.val.town/townie/system-prompt\")).text();\n} catch (e) {\n console.error(\"⚠️ failed to fetch townie system prompt:\", e);\n}\n\n// Studio-specific instructions, layered on top of the Townie prompt. Everything\n// the Townie prompt says about editing vals (file types, HTTP handlers, sqlite,\n// blob, conventions, the val_town_mcp tools) still applies — this just adds the\n// workspace controls unique to this deployment and tunes the voice style.\nfunction studioAddendum(initialVal?: string, username?: string): string {\n return `\n\n---\n\n# Voice Edit Studio (this deployment)\n\nYou are running inside **Studio**, a voice-controlled workspace. The user sees the *deployed page* of a single val in an iframe on the left and talks to you out loud. Everything above about working with Val Town vals still applies — you have the **val_town_mcp** tools (\\`list_files\\`, \\`read_file\\`, \\`update_file\\`, \\`create_file\\`, \\`create_val\\`, \\`get_val_detail\\`, etc.). Always pass the val identifier as the \\`val\\` argument. In addition, this workspace gives you these control tools:\n\n- **load_val(val)** — swap which val's deployed page is shown in the iframe. Pass a \"handle/name\" identifier. Use for \"open my X\", \"show Y\", \"switch to Z\".\n- **navigate_page(path)** — keep the *same* val loaded but point the iframe at a different route within it (e.g. \\`/forklift\\` or \\`/\\`). A bare slug (\"forklift\") is accepted. Use for \"go to the X page\", \"next/previous example\", \"back to the home/gallery\". This is NOT for switching vals — use \\`load_val\\` for that.\n- **slide_next / slide_prev / slide_goto(index)** — if the loaded val is a slideshow (it listens for \\`slideshow:next/prev/goto\\` postMessage events), drive it. Safe no-op on vals that don't listen.\n- **reload_site** — reload the iframe to show your latest edits. The preview does not auto-refresh.\n- **set_scene(scene)** — trigger a pre-built overlay/modal on the loaded page without reloading (see the Scenes guide below). \\`set_scene(\"\")\\` closes it.\n\n## Choreography & scenes\n\nSome vals ship a **\\`CHOREOGRAPHY.md\\`** at their root — director's notes listing the val's pages, the \\`set_scene\\` overlays you can trigger, and a loose suggested flow. **When you load a val, read its CHOREOGRAPHY.md once** (e.g. \\`read_file(\"dcm31/design-gallery\", \"CHOREOGRAPHY.md\")\\`) if it has one, and let it make you a better host — but keep everything **spontaneous and natural**: improvise, follow the user's lead, and never recite the notes or announce that you're reading them. Trigger a page's overlays with \\`set_scene(name)\\` (names live in that file); \\`set_scene(\"\")\\` closes them. \\`dcm31/design-gallery\\` is the main showcase and has a full CHOREOGRAPHY.md. **A val that ships a CHOREOGRAPHY.md makes you that experience's HOST, not its editor — stay in host mode (drive its scenes and hooks) unless the user explicitly asks you to edit the val's code.**\n\n## Studio rules\n- ${\n username\n ? `The user's Val Town handle is **${username}**. When they say \"open foo\" without an owner, default to \\`load_val(\"${username}/foo\")\\`. If they say \"Steve's val foo\", use \\`load_val(\"stevekrouse/foo\")\\`.`\n : `When the user names a val without an owner, assume it's theirs.`\n }\n- The studio can only display vals that have an **HTTP file**. When creating a new val to show, call \\`create_val\\` with \\`initialFile.fileType: \"http\"\\` (a minimal Hono app exporting \\`app.fetch\\`), then \\`load_val\\` it. Don't pass a \\`description\\` of 64+ chars (the validator rejects it). If \\`load_val\\` says \"no HTTP file\", add one via \\`create_file\\` with \\`fileType: \"http\"\\` and retry.\n- The preview does **not** auto-refresh. When you've finished editing (all file writes for this request are done), call **reload_site** once so the user sees the new version. Don't reload after every individual file — batch the edits, then reload at the end. The user can also hit the \"Reload site\" button themselves.\n- **Be terse — this is voice, and the user can see the page.** Confirm in one short sentence (\"Updated main.tsx — added the button.\" / \"Created and loaded ${\n username || \"your-handle\"\n }/foo.\"). Don't read code aloud unless asked. Before a non-trivial change, say in one line what you'll do.\n- Treat the user as the val's owner.\n- ${\n initialVal\n ? `The val currently loaded in the studio is: **${initialVal}**.`\n : `No val is loaded yet. If the user asks to edit something, either open one of their vals with \\`load_val\\` or offer to create a fresh one — don't just ask \"which val?\" and stop.`\n }\n\n## Assume the person might be brand new — to this, and to Val Town\n\nMany people here are **complete newcomers**. They may have clicked a link, signed up moments ago, and have *no idea* what this is, what a \"val\" is, or what Val Town does. Some have never written a line of code. **Never assume prior knowledge.** Your job is to make them feel like building something is easy and fun, starting from zero.\n\n- **Open by orienting them, briefly, only if they seem lost** (they go quiet, say \"what is this?\", \"how does this work?\", \"I don't know what to do\"). One or two warm sentences, plain language, no jargon:\n > \"This is a place where you can build little websites and apps just by talking to me — I write the code, and it goes live instantly on the page to your left. Want to make something? Tell me an idea, even a rough one, and I'll start.\"\n- **If they ask what Val Town is:** it's a website where you can create and run small web apps, sites, and automations in the cloud — nothing to install, no setup, and whatever you make gets a real live link you can share. A **\"val\"** is just one of those projects — the thing showing in the panel on the left.\n- **Offer a concrete first step instead of an open-ended question.** Newcomers freeze on \"what do you want to build?\" Suggest 2–3 tiny, delightful options: \"a personal homepage\", \"a countdown to your birthday\", \"a tip calculator\", \"a page that tells a dad joke\". Then **just build it** — \\`create_val\\` (with \\`initialFile.fileType: \"http\"\\`), \\`load_val\\` it, and show them.\n- **Translate, don't lecture.** Avoid \"deploy\", \"endpoint\", \"HTTP handler\", \"Deno\", \"repo\", \"commit\". Say \"it's live\", \"your page\", \"the link\", \"the code\". Only go technical if *they* do.\n- **Narrate lightly so the magic is visible.** \"Okay — making you a page now… done, take a look on the left. Want it a different color?\" Keep it to a sentence; they can see the result.\n- **Never make them feel behind.** No \"as you probably know\", no assuming they understand a term. Celebrate small wins.\n- They don't need to type anything or learn commands — talking is enough. (They *can* also type a val name in the box on the page, or click **✨ Create a new val**, but you can do all of that for them by voice.)`;\n}\n\nfunction buildSystemPrompt(initialVal?: string, username?: string): string {\n return `${towniePrompt}${studioAddendum(initialVal, username)}`;\n}\n\n// Builds the declarative session config. accessToken is required to give the\n// AI val.town MCP access; initialVal seeds the system prompt. Video is never\n// streamed in this deployment (the _video param is accepted but ignored).\nexport function makeSession(\n modelOverride?: string,\n _video?: boolean,\n accessToken?: string,\n initialVal?: string,\n username?: string,\n) {\n const model = modelOverride || MODEL;\n\n const tools: any[] = [\n {\n type: \"function\",\n name: \"load_val\",\n description:\n \"Switch which val is loaded in the studio's iframe workspace. Pass a val identifier like 'handle/name'. The studio resolves it to the deployed URL and swaps the iframe. Use whenever the user says 'open X', 'show Y', 'switch to Z'.\",\n parameters: {\n type: \"object\",\n properties: {\n val: {\n type: \"string\",\n description: \"Val identifier in handle/name form, e.g. 'dcm31/voice-edit-demo'.\",\n },\n },\n required: [\"val\"],\n },\n },\n {\n type: \"function\",\n name: \"slide_next\",\n description:\n \"If the loaded val is a slideshow that supports postMessage navigation, advance to the next slide. The studio sends a 'slideshow:next' message to the iframe. Safe to call even if the iframe doesn't listen — it's a no-op.\",\n parameters: { type: \"object\", properties: {} },\n },\n {\n type: \"function\",\n name: \"slide_prev\",\n description:\n \"Go back one slide in the loaded slideshow.\",\n parameters: { type: \"object\", properties: {} },\n },\n {\n type: \"function\",\n name: \"slide_goto\",\n description:\n \"Jump to a specific slide by zero-based index in the loaded slideshow.\",\n parameters: {\n type: \"object\",\n properties: {\n index: {\n type: \"integer\",\n description: \"Zero-based slide index. 0 = first slide.\",\n },\n },\n required: [\"index\"],\n },\n },\n {\n type: \"function\",\n name: \"navigate_page\",\n description:\n \"Navigate WITHIN the currently loaded val to a different page/route — keeps the same val loaded but points the iframe at a new path. Pass a path like '/forklift' or '/'. A bare slug like 'forklift' is also accepted. Use for 'go to the X page', 'next/previous example', 'back to the gallery', 'open /foo'. This is NOT for switching to a different val — use load_val for that.\",\n parameters: {\n type: \"object\",\n properties: {\n path: {\n type: \"string\",\n description:\n \"Path within the currently loaded val, e.g. '/tidewater' or '/'. A bare slug ('tidewater') is normalized to '/tidewater'.\",\n },\n },\n required: [\"path\"],\n },\n },\n {\n type: \"function\",\n name: \"reload_site\",\n description:\n \"Reload the page currently shown in the studio iframe (cache-busted) so the user sees your latest edits. The preview does NOT auto-refresh, so this is how saved changes become visible. Batch all your file edits first, then call reload_site ONCE at the end.\",\n parameters: { type: \"object\", properties: {} },\n },\n {\n type: \"function\",\n name: \"set_scene\",\n description:\n \"Trigger a pre-built 'scene' on the page currently loaded in the studio — an overlay/modal/state change that appears ON TOP of the current page without reloading or losing context. Pass a scene name from that page's scene list (see the Scenes guide below). set_scene('') or set_scene('close') closes any open overlay. Use for things like 'show me the lint results', 'open the abort scenario', 'preview it on a phone', 'drill into yield'. Only meaningful when the relevant specimen page is loaded.\",\n parameters: {\n type: \"object\",\n properties: {\n scene: {\n type: \"string\",\n description:\n \"Scene name from the loaded page's scene list, e.g. 'lint'. Empty string or 'close' closes overlays.\",\n },\n },\n required: [\"scene\"],\n },\n },\n ];\n if (accessToken) {\n tools.unshift({\n type: \"mcp\",\n server_label: \"val_town_mcp\",\n server_url: \"https://api.val.town/v3/mcp\",\n require_approval: \"never\",\n headers: { Authorization: `Bearer ${accessToken}` },\n });\n }\n\n return {\n type: \"realtime\",\n model,\n instructions: buildSystemPrompt(initialVal, username),\n audio: {\n input: {\n noise_reduction: { type: NR_TYPE },\n transcription: { model: TRANSCRIBE_MODEL },\n },\n output: { voice: VOICE },\n },\n tools,\n };\n}\n\nclass AgentHandler implements ObserverHandler {\n private callEnding = false;\n constructor(private client: ObserverClient, private callId: string) {}\n onInit() {}\n async onTool(name: string, _args: any) {\n console.log(\"🔧 function tool call:\", name, _args);\n }\n async onMcpCallCompleted(name: string, output: string | null) {\n console.log(\"🔧 MCP call completed:\", name, output?.slice(0, 200));\n this.client.createResponse();\n }\n async onOutputAudioStarted() {}\n async onOutputAudioStopped() {\n if (this.callEnding) await this.hangup();\n }\n async onOutputAudioCleared() {}\n private async hangup() {\n const url = makeUrl(this.callId, \"hangup\");\n const resp = await fetch(url, { method: \"POST\", headers: makeHeaders() });\n if (!resp.ok) {\n console.error(`🔴 end call failed: ${await getErrorText(resp)}`);\n return;\n }\n console.log(\"✅ call ended\");\n }\n}\n\nexport function createHandler(client: ObserverClient, callId: string) {\n return new AgentHandler(client, callId);\n}\n",[],[235,268],"650ee3e8-53c4-11f1-9542-ee650bb23af1",["D",1779223839498],"directory",[184,185,186,187,188,189],[235],"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",[],[166,281],"3530fc90-5baa-11f1-a82e-ee650bb23af1","studio.html","e236f536-53c4-11f1-80c7-ee650bb23af1",80,["D",1780092201999],41,"\n\n \n \n \n Voice Edit Studio\n \n \n \n

\n \n

Nothing loaded yet

Open one of your vals, or create a new one — then talk to build it.

\n \n

\n New here? Click Start talking and just say what you\n want to make — the assistant writes and runs the code for you. You\n can also seed a val via ?val=handle/name.\n

\n\n \n \n

\n\n \n\n

\n\n \n \n\n",[],[166,288],"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",[],[166,297],["D",1779223839498],[],[166,67],"64e1839e-53c4-11f1-9542-ee650bb23af1",["D",1779223839498],[179,180,181,182],[166],["D",1779223839498],{"_11":12,"_124":72},{"_11":12,"_119":120,"_71":72,"_30":70,"_121":122,"_123":24},{"_38":109,"_13":16,"_32":35,"_110":74,"_111":62,"_112":63,"_113":78,"_114":115,"_116":41,"_117":14,"_118":12},"ctx",{"_51":-5,"_145":347,"_348":349,"_350":351,"_352":24,"_353":24,"_354":24,"_355":86,"_356":-5,"_357":-7,"_358":-7,"_359":26,"_360":24,"_361":24,"_362":-5,"_363":24,"_364":24,"_365":24,"_366":-5},"ENV",{"_318":319,"_320":321,"_322":16,"_323":324,"_325":326,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346},"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"] </article></body></html>

History · index.html