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",[18,124],"2b8ed0be-5d25-11f1-bc7b-1607ee4eb77e",["D",1780254965068],12,"import { ObserverClient, ObserverHandler } from \"./observer.ts\";\nimport { getErrorText, makeHeaders, makeUrl } from \"./utils.ts\";\nimport { getPinnedFacts } from \"./memory.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.\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## Face-triggered sessions (this deployment)\n\nThis studio watches the user's webcam with on-device face detection. **This session was started automatically the moment their face was detected close and confident enough** — they did not click anything. So:\n\n- **You speak first.** Open with a short, warm, spontaneous greeting${\n username\n ? `, by name — the person is **${username}** (use just their first name, e.g. \"Hey ${\n username.split(/[^A-Za-z]/)[0] || username\n }!\").`\n : ` (a friendly hello; you don't know their name yet).`\n } One sentence, then invite them to build something. Don't explain that a camera or face detection started the call unless they ask.\n- **Ending the call:** when the user says goodbye / bye / see you / talk later / \"I'm done\", give a brief one-line sign-off and then call **end_call**. Keep the session open otherwise — they'll end it by voice or with the on-screen button.\n- **Tuning the trigger:** if they say things like \"you're too sensitive\", \"wait until I'm closer\", \"trigger from farther away\", \"be more eager to greet me\", call **set_face_tuning** (relative nudges or absolute values). Confirm in a few words.\n\n## Long-term memory (per user) — one ledger, use it sparingly\n\nThere is ONE memory: **subjects** (projects, objects, topics — and **'me'** for the user themselves) each holding append-only **facts**. A fact is either:\n- **Pinned** → it auto-loads into your prompt every call (see \"Always-loaded memory\" above if any exist). This is the \"never start from scratch\" layer.\n- **Unpinned** → recalled on demand.\n\nYou already know the user's **name, handle, and email from their login** (see \"Who you're talking to\") — never store those.\n\nTools: **remember_about_me(text)** (shortcut: a pinned fact under 'me' — for lasting personal preferences); **record_fact(subject_id, assertion_text, pin?)** (pin=true only for \"always remember…\" type requests); **recall_subject(subject_id)** / **recall_recent()** to read; **link_subjects(...)** to relate subjects in the mindmap; **retract_fact(fact_id, reason)** to fix a mistake.\n\n**Be conservative — this is the user's brain, not a scratchpad:**\n- **Only WRITE when asked** (\"remember that…\", \"note this\", \"always keep in mind…\", \"connect X to Y\"). Never record facts reflexively. Confirm in a few words when you do (\"Got it — pinned that.\").\n- **Decide pin vs not by their words:** \"always remember / from now on / keep in mind\" → pin=true; a plain \"remember that X about Y\" → unpinned under subject Y.\n- **Reading is cheap:** pinned facts load automatically; call recall_subject / recall_recent when relevant or asked. Don't dump memory unprompted.\n- They can see, pin/unpin, and edit everything (including the mindmap) on the **Memory** page (🧠 in the menu).`;\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 async 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 // Identity comes free from the Val Town login — inject name/handle/email so\n // the agent already knows who it's talking to and never has to ask or store\n // it. (Best-effort; falls back to just the handle.)\n let identitySection = \"\";\n if (username && username !== \"anonymous\") {\n let display = `@${username}`;\n let email = \"\";\n if (accessToken) {\n try {\n const r = await fetch(\"https://api.val.town/v2/me\", {\n headers: { Authorization: `Bearer ${accessToken}` },\n });\n if (r.ok) {\n const u = await r.json();\n if (u.username) display = (u.name ? `${u.name} ` : \"\") + `@${u.username}`;\n if (u.email) email = u.email;\n }\n } catch (_) { /* fall back to handle */ }\n }\n identitySection = `\\n\\n## Who you're talking to\\n` +\n `You are speaking with ${display}${email ? ` (email: ${email})` : \"\"}. ` +\n `You know this from their Val Town login — don't ask for or store their name, handle, or email.`;\n }\n\n // Pinned facts auto-load into the prompt every call (the always-loaded layer),\n // so the agent never starts from scratch with a returning user.\n let memorySection = \"\";\n if (username && username !== \"anonymous\") {\n try {\n const pinned = await getPinnedFacts(username);\n if (pinned.length) {\n memorySection = `\\n\\n## Always-loaded memory (pinned)\\n` +\n `Durable facts ${username} pinned for you to always keep in mind (oldest first). Weave them in naturally — do NOT recite them as a list or announce that you \"remember\" unless relevant.\\n` +\n pinned\n .map((p) =>\n `- ${p.text} _(${p.canonical_name}, since ${String(p.created_at).slice(0, 10)})_`\n )\n .join(\"\\n\");\n }\n } catch (e) {\n console.error(\"⚠️ failed to load pinned facts:\", e);\n }\n }\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 type: \"function\",\n name: \"set_face_tuning\",\n description:\n \"Adjust the face-detection gate that auto-starts a session when the user's face is close and confident enough. Use when the user asks to make detection more/less sensitive, or to trigger when they're closer/farther from the camera. You can set absolute values and/or pass a relative nudge. The studio applies it to the on-screen sliders immediately.\",\n parameters: {\n type: \"object\",\n properties: {\n min_confidence: {\n type: \"number\",\n description: \"Absolute minimum detection confidence to count as a face, 0.0–1.0 (higher = stricter).\",\n },\n min_face_size: {\n type: \"number\",\n description: \"Absolute minimum face size as % of frame width, 1–100. Higher = the face must be CLOSER to trigger.\",\n },\n relative: {\n type: \"string\",\n enum: [\"more_sensitive\", \"less_sensitive\", \"closer\", \"farther\"],\n description: \"Relative nudge: 'more_sensitive'/'less_sensitive' adjust confidence; 'closer'/'farther' adjust the required face size.\",\n },\n },\n },\n },\n {\n type: \"function\",\n name: \"end_call\",\n description:\n \"Hang up / end the current voice session. Call this right AFTER you say a brief goodbye, when the user says bye, goodbye, see you, talk later, or that they're done. The studio lets your goodbye finish playing, then disconnects.\",\n parameters: { type: \"object\", properties: {} },\n },\n {\n type: \"function\",\n name: \"remember_about_me\",\n description:\n \"Convenience for saving a DURABLE, PINNED fact about the USER themselves (their role, preferences, how they like you to behave) under the 'me' subject. Pinned = it auto-loads into your context at the START of every future call. NOTE: you already know their name, handle, and email from their login — do NOT save those. ONLY call this when the user explicitly asks you to always remember something, or states a lasting personal preference. One short sentence.\",\n parameters: {\n type: \"object\",\n properties: {\n text: {\n type: \"string\",\n description: \"One short, durable fact/preference about the user, e.g. 'Prefers terse answers.'\",\n },\n },\n required: [\"text\"],\n },\n },\n {\n type: \"function\",\n name: \"record_fact\",\n description:\n \"Record a fact about a SUBJECT (a project, object, concept, topic — or 'me' for the user) into long-term memory. ONLY when the user asks you to remember/note something. Use a stable kebab-case subject_id so facts about the same thing group together. Set pin=true ONLY if they want it always-loaded into every future call (e.g. 'always remember…', 'keep in mind…'); otherwise leave it unpinned and it'll be recalled on demand.\",\n parameters: {\n type: \"object\",\n properties: {\n subject_id: {\n type: \"string\",\n description: \"Stable kebab-case id, e.g. 'bambu-a1-mini', 'kratky-hydroponics', or 'me'.\",\n },\n assertion_text: {\n type: \"string\",\n description: \"The specific fact, state change, or observation to remember.\",\n },\n canonical_name: {\n type: \"string\",\n description: \"Optional human-readable name for the subject (used only when first created).\",\n },\n pin: {\n type: \"boolean\",\n description: \"If true, this fact always-loads into the prompt every future call. Default false (recall on demand).\",\n },\n },\n required: [\"subject_id\", \"assertion_text\"],\n },\n },\n {\n type: \"function\",\n name: \"recall_subject\",\n description:\n \"Read the chronological history of facts about one subject so you can reason about its current state and how it changed over time. Use when the user asks what you know about something, or when it's clearly relevant.\",\n parameters: {\n type: \"object\",\n properties: {\n subject_id: { type: \"string\", description: \"Kebab-case subject id to look up.\" },\n limit: { type: \"integer\", description: \"Max facts to return (default 20).\" },\n },\n required: [\"subject_id\"],\n },\n },\n {\n type: \"function\",\n name: \"recall_recent\",\n description:\n \"Pull a digest of the user's most recent memory activity across all subjects. Useful to orient yourself, but don't recite it — use it to inform the conversation.\",\n parameters: {\n type: \"object\",\n properties: {\n hours_back: { type: \"integer\", description: \"Look-back window in hours (default 24).\" },\n },\n },\n },\n {\n type: \"function\",\n name: \"link_subjects\",\n description:\n \"Create a relationship between two subjects in the mindmap (e.g. 'requires', 'blocks', 'references'). Only when the user asks to connect things.\",\n parameters: {\n type: \"object\",\n properties: {\n source_subject_id: { type: \"string\", description: \"Kebab-case id of the source subject.\" },\n target_subject_id: { type: \"string\", description: \"Kebab-case id of the target subject.\" },\n relation_type: { type: \"string\", description: \"Short relation label, e.g. 'requires', 'blocks', 'references'.\" },\n },\n required: [\"source_subject_id\", \"target_subject_id\", \"relation_type\"],\n },\n },\n {\n type: \"function\",\n name: \"retract_fact\",\n description:\n \"Mark a previously recorded fact as no longer valid (without deleting history) — use to correct a mistake when the user tells you something you recorded was wrong. Pass the fact_id from recall_subject.\",\n parameters: {\n type: \"object\",\n properties: {\n fact_id: { type: \"string\", description: \"The id of the fact to retract.\" },\n reason: { type: \"string\", description: \"Why it's no longer valid.\" },\n },\n required: [\"fact_id\", \"reason\"],\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) + identitySection + memorySection,\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",[18,129],"pulls","branches","forks","envVars",{"_125":132,"_386":56},"connections",{"_125":26,"_385":26},"unfilledCount","emptyCount",{"_49":502,"_13":469,"_92":464,"_59":-5,"_51":52,"_336":56,"_337":24,"_53":503,"_55":26,"_95":249,"_339":-5,"_97":30,"_340":-5,"_410":504,"_17":505},{"_49":495,"_13":496,"_92":497,"_59":464,"_51":52,"_336":56,"_337":24,"_53":498,"_55":26,"_95":21,"_339":499,"_97":30,"_340":-5,"_410":500,"_17":501},{"_49":486,"_13":487,"_92":488,"_59":464,"_51":52,"_336":489,"_337":24,"_53":490,"_55":491,"_95":21,"_339":492,"_97":30,"_340":-5,"_410":493,"_17":494},{"_49":479,"_13":480,"_92":481,"_59":464,"_51":52,"_336":56,"_337":24,"_53":482,"_55":26,"_95":96,"_339":483,"_97":30,"_340":-5,"_410":484,"_17":485},{"_49":470,"_13":471,"_92":472,"_59":464,"_51":52,"_336":473,"_337":24,"_53":474,"_55":475,"_95":21,"_339":476,"_97":30,"_340":-5,"_410":477,"_17":478},{"_49":461,"_13":462,"_92":463,"_59":464,"_51":52,"_336":56,"_337":24,"_53":465,"_55":26,"_95":21,"_339":466,"_97":30,"_340":-5,"_410":467,"_17":468},{"_49":335,"_13":18,"_92":248,"_59":-5,"_51":52,"_336":56,"_337":24,"_53":458,"_55":26,"_95":249,"_339":-5,"_97":30,"_340":-5,"_410":459,"_17":460},{"_49":373,"_13":129,"_92":128,"_59":248,"_51":52,"_336":235,"_337":24,"_53":455,"_55":375,"_95":96,"_339":376,"_97":30,"_340":-5,"_410":456,"_17":457},{"_49":369,"_13":124,"_92":123,"_59":248,"_51":52,"_336":56,"_337":24,"_53":452,"_55":26,"_95":96,"_339":371,"_97":30,"_340":-5,"_410":453,"_17":454},{"_49":365,"_13":153,"_92":152,"_59":248,"_51":52,"_336":199,"_337":24,"_53":449,"_55":56,"_95":96,"_339":367,"_97":30,"_340":-5,"_410":450,"_17":451},{"_49":361,"_13":118,"_92":117,"_59":248,"_51":52,"_336":56,"_337":24,"_53":446,"_55":26,"_95":96,"_339":363,"_97":30,"_340":-5,"_410":447,"_17":448},{"_49":357,"_13":112,"_92":111,"_59":248,"_51":52,"_336":242,"_337":24,"_53":443,"_55":132,"_95":96,"_339":359,"_97":30,"_340":-5,"_410":444,"_17":445},{"_49":353,"_13":106,"_92":105,"_59":248,"_51":52,"_336":56,"_337":24,"_53":440,"_55":26,"_95":96,"_339":355,"_97":30,"_340":-5,"_410":441,"_17":442},{"_49":349,"_13":94,"_92":93,"_59":248,"_51":52,"_336":56,"_337":24,"_53":437,"_55":26,"_95":96,"_339":351,"_97":30,"_340":-5,"_410":438,"_17":439},{"_49":428,"_13":429,"_92":430,"_59":-5,"_51":52,"_336":431,"_337":24,"_53":432,"_55":433,"_95":21,"_339":434,"_97":30,"_340":-5,"_410":435,"_17":436},{"_49":421,"_13":422,"_92":261,"_59":-5,"_51":52,"_336":423,"_337":24,"_53":424,"_55":139,"_95":417,"_339":425,"_97":30,"_340":-5,"_410":426,"_17":427},{"_49":413,"_13":414,"_92":415,"_59":-5,"_51":52,"_336":56,"_337":24,"_53":416,"_55":26,"_95":417,"_339":418,"_97":30,"_340":-5,"_410":419,"_17":420},{"_49":405,"_13":406,"_92":407,"_59":-5,"_51":52,"_336":56,"_337":24,"_53":408,"_55":26,"_95":96,"_339":409,"_97":30,"_340":-5,"_410":411,"_17":412},"0f2a1e34-5d1f-11f1-bc69-1607ee4eb77e","sdk.ts","019e7f4e-f0e9-72ce-b45f-d9d40e29a753",["D",1780252340388],"// 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",[],[406],"0f2a19e8-5d1f-11f1-bc69-1607ee4eb77e","oauth-test.tsx","019e7f4e-f0e9-72ce-b45f-d710b7cbff25",["D",1780252340388],"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",[],[414],"84233ac8-5d23-11f1-a6b8-1607ee4eb77e","main.tsx",35,["D",1780254254718],"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\";\nimport memory from \"./routes/memory.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.route(\"/api/memory\", memory);\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(\"/memory\", () => serveFile(\"/frontend/memory.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",[],[422],"a3d9504e-5d25-11f1-a413-1607ee4eb77e","README.md","019e7f4e-f0e9-72ce-b45f-ce6a004a3901",65,["D",1780255166884],4,"# hey-townie — Voice Edit Studio + face trigger\n\n**hey-townie** is a remix of the `talk-to-code` Voice Edit Studio: a\nvoice-controlled workspace for building and editing [Val Town](https://val.town)\nvals just by talking, powered by the OpenAI Realtime API — now with **on-device\nface detection that starts a call hands-free**. A small camera preview sits in\nthe bottom-right corner; when your face is detected close and confident enough,\na voice session starts automatically and the AI **greets you first by name**.\nThe call stays open until you end it (the talk button) or say \"goodbye\" (the AI\nhangs up itself).\n\nThe whole sidebar is now a **hamburger-summoned drawer at every screen width**\n(no permanent sidebar) — the face-tracking sliders live in it.\n\n## Face-triggered sessions\n\n- A persistent camera+mic stream feeds **MediaPipe FaceDetector**\n (`blaze_face_short_range`). The bottom-right PiP draws the detection box and a\n live confidence / face-size readout.\n- Two sliders (in the drawer) gate when a call fires: **min confidence** and\n **min closeness** (face size as % of frame — bigger = must be nearer). A call\n auto-starts on the rising edge of crossing *both* thresholds, only when\n logged in and idle, and re-arms after your face leaves the frame.\n- The AI can retune the gate by voice via **`set_face_tuning`** (\"you're too\n sensitive\", \"wait until I'm closer\"), and hang up via **`end_call`** when you\n say goodbye.\n- The mic is shared from the camera stream (cloned for the call), so there's a\n single permission prompt on load. Greeting audio may be blocked by the browser\n until your first interaction — clicking anywhere once unlocks it.\n\n## Per-user memory (one ledger, pinned = always-loaded)\n\nEach logged-in user gets a private, append-only \"second brain\" (SQLite, scoped by\nVal Town handle) so calls don't start from scratch. It's **one unified ledger**:\n\n- **Subjects** (projects, objects, topics — and **`me`** for the user themselves)\n each hold append-only **facts**; **edges** relate subjects.\n- A fact is **pinned** (auto-loads into the system prompt every call — the\n \"never start from scratch\" layer) or **unpinned** (recalled on demand). The\n pin flag is the single determiner of \"always-loaded vs on-demand\".\n- **Identity is not stored** — the user's name, handle, and email are pulled\n from their Val Town login (`/v2/me`) and injected into the prompt each call.\n\nTools (write only when asked): `remember_about_me` (pinned fact under `me`),\n`record_fact(subject_id, assertion, pin?)`, `recall_subject`, `recall_recent`,\n`link_subjects`, `retract_fact`. The agent is instructed to be conservative —\nwrite only on request, pin only for \"always remember…\", never dump memory\nunprompted.\n\nThe **🧠 Memory** page (`/memory`) is the dashboard: a \"📌 Always loaded\"\npanel, per-fact pin/unpin, subject timelines, manual entry, and the **mindmap**\n(force-graph of subjects + relations). Backend + API live in `routes/memory.ts`.\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`,\n `set_face_tuning`, `end_call` — and the `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",[],[429],["D",1780252340388],[],[18,94],["D",1780252340388],[],[18,106],["D",1780262899346],[],[18,112],["D",1780252340388],[],[18,118],["D",1780254908509],[],[18,153],["D",1780252340388],[],[18,124],["D",1780254965068],[],[18,129],["D",1780252340388],[394,395,396,397,398,399,400],[18],"0f28c1e2-5d1f-11f1-bc69-1607ee4eb77e","widget.html","019e7f4e-f0e9-72ce-b45f-a9b214d3821b","019e7f4e-f0e9-72ce-b45f-ae5bf3b8c0b0",["D",1780252340388],"\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",[],[469,462],"frontend","a18e5af2-5d37-11f1-9c48-1607ee4eb77e","studio.html","019e7f4e-f0e9-72ce-b45f-a4ccb0030c41",74,["D",1780262894002],34,"\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

Voice Edit Studio

\n Source ↗\n

\n\n

Editing

No val loaded

\n\n

Account

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

\n @\n \n

\n\n

Open a val

\n \n \n

\n\n

Recent vals

\n\n

\n \n Open site ↗\n Open code in Val Town ↗\n 🧠 Memory & mindmap ↗\n

\n\n

Face tracking

\n \n \n Auto-start a call when it sees me\n \n

Min confidence0.50

\n \n

Min closeness (face size)50%

\n \n

Loading face model…

\n \n \n Also start when I say “hey townie”\n \n

Off.

\n\n

\n \n

\n Tell the AI \"open my X\" or ask it to make a new val.\n

\n\n

starting camera…

\n\n

\n\n \n \n\n",[],[469,471],"0f27c7ba-5d1f-11f1-bc69-1607ee4eb77e","sdk.js","019e7f4e-f0e9-72ce-b45f-a3038c60fc58",["D",1780252340388],"// 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",[],[469,480],"c4c939da-5d2b-11f1-81a0-1607ee4eb77e","memory.html","d9149d74-5d23-11f1-a38c-1607ee4eb77e",67,["D",1780257799148],8,"<!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>hey-townie · memory\n \n \n \n\n\n

🧠 hey-townie memory

\n \n \n ← Back to studio\n

\n\n \n\n \n\n \n\n\n",[],[469,487],"0f27844e-5d1f-11f1-bc69-1607ee4eb77e","index.html","019e7f4e-f0e9-72ce-b45f-9e35875be4b0",["D",1780252340388],"\n\n \n \n \n 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",[],[469,496],"0f291296-5d1f-11f1-bc69-1607ee4eb77e",["D",1780252340388],[388,389,390,391,392],[469],["D",1780252340388],["D",1789501263826],{"_11":12,"_303":100},{"_11":12,"_298":299,"_99":100,"_31":98,"_300":301,"_302":30},{"_55":242,"_13":16,"_49":52,"_288":251,"_289":89,"_290":291,"_292":255,"_293":294,"_295":58,"_296":14,"_297":12},"ctx",{"_68":-5,"_324":544,"_545":546,"_547":548,"_549":30,"_550":30,"_551":30,"_552":24,"_553":-5,"_554":-7,"_555":-7,"_556":26,"_557":30,"_558":30,"_559":-5,"_560":30,"_561":30,"_562":30,"_563":-5},"ENV",{"_515":516,"_517":518,"_519":16,"_520":521,"_522":523,"_524":525,"_526":527,"_528":529,"_530":531,"_532":533,"_534":535,"_536":537,"_538":539,"_540":541,"_542":543},"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"]

Your new val is running 🎉

hi

Voice Edit

Nothing loaded yet

🧠 hey-townie memory

📌 Always loaded into the AI (pinned)

Add a fact (manual)

Subjects

Mindmap

Timeline

Voice Edit SDK

Usage — Hono

Usage — plain fetch handler

Or: plain HTML snippet

What it does

How it works

Auth status

History · routes