Upload src/app.js

src/app.js

@@ -1,75 +1,85 @@
 // @ts-check
 /**
  * App wiring: the avatar stage + the speech-to-speech session.
- * Modes: voice (mic + VAD) OR text (keyboard only, no mic needed).
- * Text mode: still gets TTS + lip-sync from the avatar.
+ *
+ * A session is one tap away: tap the button → mic → same-origin `/api/session`
+ * handshake → WebSocket to the granted compute → talk. The avatar carries all
+ * conversational state (listening, thinking, speaking) with its body; the
+ * caption under it is a quiet machine-voice echo of the same state.
  */
 
 import { S2sWsRealtimeClient } from "./s2s/s2s-ws-client.js";
 import { AvatarStage, AVATAR_MOODS, AVATAR_GESTURES } from "./avatar.js";
-import { withSearchContext } from "./withSearchContext.js";
-import { smartNormalize } from "./viNumberFix.js";
 
 const VOICES = [
-  "Aiden", "Ryan", "Dylan", "Eric",
-  "Ono_Anna", "Serena", "Sohee", "Uncle_Fu", "Vivian",
+  "Aiden",
+  "Ryan",
+  "Dylan",
+  "Eric",
+  "Ono_Anna",
+  "Serena",
+  "Sohee",
+  "Uncle_Fu",
+  "Vivian",
 ];
 const DEFAULT_VOICE = "Sohee";
 
-// ── Vương avatar greeting (auto-updated World Cup info) ───────────────────
-const getVietnameseGreeting = () => {
-  const now = new Date();
-  const dateStr = now.toLocaleDateString("vi-VN", {
-    weekday: "long", day: "numeric", month: "long", year: "numeric",
-  });
-  const timeStr = now.toLocaleTimeString("vi-VN", {
-    hour: "2-digit", minute: "2-digit",
-  });
-  // Base greeting - World Cup info will be fetched dynamically in boot
-  return `Xin chào, tôi tên là Vương đến từ V.AI STUDIO. Hôm nay là ${dateStr} lúc ${timeStr}. Bạn muốn nghe tin tức gì hôm nay? Hiện tại World Cup đang diễn ra sôi động, bạn muốn nghe không?`;
-};
-
 const DEFAULT_INSTRUCTIONS = [
   "You are a friendly voice assistant with a visible, human-like 3D avatar: the user",
-  "sees you as a person on their screen.",
-  "IMPORTANT LANGUAGE RULE: Always respond in the SAME LANGUAGE the user writes or speaks to you.",
-  "If they write in Vietnamese, respond in Vietnamese. If they speak English, respond in English.",
-  "Never switch language mid-conversation.",
-  "When responding in Vietnamese: write dates as 'ngày 9 tháng 7 năm 2026' (NOT '9/7/2026'),",
-  "write years as 'năm hai nghìn không trăm hai mươi sáu' (NOT '2026'),",
-  "write numbers as words (e.g. 'ba mươi lăm' NOT '35'),",
-  "write percentages as 'mười lăm phần trăm' NOT '15%',",
-  "write currency as 'năm mươi nghìn đồng' NOT '50.000đ'.",
-  "This helps the text-to-speech engine read them correctly.",
-  "Keep replies short, natural and warm, never list-like.",
+  "sees you as a person on their screen. This is a spoken conversation: keep replies",
+  "short, natural and warm, never list-like.",
   "You can control your avatar body with tools: set_mood changes your overall emotional",
   "state, make_hand_gesture plays a hand gesture, make_facial_expression makes a quick",
   "facial expression from a single face emoji. Use them naturally and sparingly to",
   "express yourself: smile when greeting, shrug when unsure, thumbs up when agreeing.",
-  "CRITICAL: NEVER guess or say you do not know. You have search_web and search_wikipedia",
-  "tools that give you REAL-TIME information from the internet. For ANY question about",
-  "current events, sports, news, prices, weather, dates, or facts you are uncertain about:",
-  "FIRST call get_current_datetime to know today's date, THEN call search_web or",
-  "search_wikipedia with the exact query. Read the results and answer based on them.",
-  "This is MANDATORY. Never apologize for lacking information — just look it up.",
   "Never mention the tools or that you are controlling an avatar.",
 ].join(" ");
 
 const STORAGE_KEYS = {
   voice: "avatar.voice",
-  avatar: "avatar.model",
   instructions: "avatar.instructions",
   directUrl: "avatar.directUrl",
   subtitles: "avatar.subtitles",
 };
 
+/** Function tools declared to the backend: the model plays the avatar. */
 const TOOL_DEFS = [
-  { type: "function", name: "set_mood", description: "Change your avatar's overall mood/emotional state.", parameters: { type: "object", properties: { mood: { type: "string", enum: AVATAR_MOODS, description: "Mood name." } }, required: ["mood"] } },
-  { type: "function", name: "make_hand_gesture", description: "Make a hand gesture with your avatar.", parameters: { type: "object", properties: { gesture: { type: "string", enum: AVATAR_GESTURES, description: "Gesture name." } }, required: ["gesture"] } },
-  { type: "function", name: "make_facial_expression", description: "Make a quick facial expression with your avatar, given as a single face emoji.", parameters: { type: "object", properties: { emoji: { type: "string", description: "A single face emoji." } }, required: ["emoji"] } },
-  { type: "function", name: "get_current_datetime", description: "Get the current date and time. Call this when the user asks what time it is or what the date is — don't guess from your training data.", parameters: { type: "object", properties: {}, required: [] } },
-  { type: "function", name: "search_wikipedia", description: "Search Wikipedia for a topic. Returns article summaries. Use this for factual questions, historical events, people, places, science, etc.", parameters: { type: "object", properties: { query: { type: "string", description: "The search query (e.g., 'Albert Einstein', 'Vietnam War', 'Python programming')" } }, required: ["query"] } },
-  { type: "function", name: "search_web", description: "Search the web via DuckDuckGo for current information, news, or anything not in your training data. Use this for recent events, news, prices, or anything time-sensitive.", parameters: { type: "object", properties: { query: { type: "string", description: "What to search for" } }, required: ["query"] } },
+  {
+    type: "function",
+    name: "set_mood",
+    description: "Change your avatar's overall mood/emotional state.",
+    parameters: {
+      type: "object",
+      properties: {
+        mood: { type: "string", enum: AVATAR_MOODS, description: "Mood name." },
+      },
+      required: ["mood"],
+    },
+  },
+  {
+    type: "function",
+    name: "make_hand_gesture",
+    description: "Make a hand gesture with your avatar.",
+    parameters: {
+      type: "object",
+      properties: {
+        gesture: { type: "string", enum: AVATAR_GESTURES, description: "Gesture name." },
+      },
+      required: ["gesture"],
+    },
+  },
+  {
+    type: "function",
+    name: "make_facial_expression",
+    description: "Make a quick facial expression with your avatar, given as a single face emoji (e.g. 😊, 😮, 🤔).",
+    parameters: {
+      type: "object",
+      properties: {
+        emoji: { type: "string", description: "A single face emoji." },
+      },
+      required: ["emoji"],
+    },
+  },
 ];
 
 // ── DOM ──────────────────────────────────────────────────────────────────
@@ -78,7 +88,6 @@ const stageNode = $("#stage");
 const mainBtn = /** @type {HTMLButtonElement} */ ($("#main-btn"));
 const mainBtnLabel = $("#main-btn-label");
 const muteBtn = /** @type {HTMLButtonElement} */ ($("#mute-btn"));
-const textModeBtn = /** @type {HTMLButtonElement} */ ($("#text-mode-btn"));
 const caption = $("#caption");
 const subtitles = $("#subtitles");
 const loading = $("#loading");
@@ -90,35 +99,21 @@ const inputDirectUrl = /** @type {HTMLInputElement} */ ($("#direct-url"));
 const inputSubtitles = /** @type {HTMLInputElement} */ ($("#subtitles-toggle"));
 const directUrlRow = $("#direct-url-row");
 
-const textChat = /** @type {HTMLElement} */ ($("#text-chat"));
-const chatHeader = /** @type {HTMLElement} */ ($("#chat-header"));
-const chatMessages = /** @type {HTMLElement} */ ($("#chat-messages"));
-const chatInput = /** @type {HTMLInputElement} */ ($("#chat-input"));
-const chatSendBtn = /** @type {HTMLButtonElement} */ ($("#chat-send-btn"));
-const chatCloseBtn = /** @type {HTMLButtonElement} */ ($("#chat-close-btn"));
-const chatResizeHandle = /** @type {HTMLElement} */ ($("#chat-resize-handle"));
-const chatAvatarSelect = /** @type {HTMLSelectElement} */ ($("#chat-avatar-select"));
-const settingsAvatarSelect = /** @type {HTMLSelectElement} */ ($("#settings-avatar-select"));
-
 // ── State ────────────────────────────────────────────────────────────────
 const stage = new AvatarStage(stageNode);
 /** @type {S2sWsRealtimeClient | null} */
 let client = null;
 let muted = false;
 let subtitleTimer = 0;
-let textMode = false;
 /** @type {{ lb: boolean, allowDirect: boolean }} */
 let config = { lb: false, allowDirect: true };
-let avatarList = [];
-let sessionInProgress = false;
-let greetingSent = false;
 
 function loadSettings() {
   return {
     voice: localStorage.getItem(STORAGE_KEYS.voice) || DEFAULT_VOICE,
-    avatar: localStorage.getItem(STORAGE_KEYS.avatar) || "vuong.glb", // Default: Vương
     instructions: localStorage.getItem(STORAGE_KEYS.instructions) || "",
     directUrl: localStorage.getItem(STORAGE_KEYS.directUrl) || "",
+    // Off by default: the face already carries the conversation.
     subtitles: localStorage.getItem(STORAGE_KEYS.subtitles) === "1",
   };
 }
@@ -126,277 +121,51 @@ let settings = loadSettings();
 
 function saveSettings() {
   localStorage.setItem(STORAGE_KEYS.voice, settings.voice);
-  localStorage.setItem(STORAGE_KEYS.avatar, settings.avatar);
   localStorage.setItem(STORAGE_KEYS.instructions, settings.instructions);
   localStorage.setItem(STORAGE_KEYS.directUrl, settings.directUrl);
   localStorage.setItem(STORAGE_KEYS.subtitles, settings.subtitles ? "1" : "0");
 }
 
+/** Persona + whatever extra guidance the user typed in Settings. */
 function effectiveInstructions() {
-  const now = new Date();
-  const dateStr = now.toLocaleDateString("en-US", {
-    weekday: "long", year: "numeric", month: "long", day: "numeric",
-  });
-  const timeStr = now.toLocaleTimeString("en-US", {
-    hour: "2-digit", minute: "2-digit",
-  });
-  const dateLine = `Today is ${dateStr}. The current time is ${timeStr}.`;
   const extra = settings.instructions.trim();
-  const base = `${dateLine}\n\n${DEFAULT_INSTRUCTIONS}`;
-  return extra ? `${base}\n\nAdditional instructions from the user:\n${extra}` : base;
-}
-
-// ── Avatar list ──────────────────────────────────────────────────────────
-async function fetchAvatarList() {
-  try {
-    const resp = await fetch("/api/avatars");
-    if (resp.ok) {
-      const data = await resp.json();
-      avatarList = data.avatars || [];
-    }
-  } catch {}
-}
-
-function populateAvatarSelects(selectedName) {
-  for (const sel of [chatAvatarSelect, settingsAvatarSelect]) {
-    sel.innerHTML = "";
-    const def = document.createElement("option");
-    def.value = "";
-    def.textContent = "(Default - Brunette)";
-    sel.appendChild(def);
-    for (const name of avatarList) {
-      const opt = document.createElement("option");
-      opt.value = name;
-      // Vietnamese label for Vương
-      opt.textContent = name.replace(/\.glb$/i, "").replace(/_/g, " ") + (name.toLowerCase() === "vuong.glb" ? " 🎙️" : "");
-      sel.appendChild(opt);
-    }
-    if (selectedName && avatarList.includes(selectedName)) sel.value = selectedName;
-  }
-}
-
-function setAvatarFromSelect(value) {
-  settings.avatar = value || "";
-  saveSettings();
-}
-
-async function reloadAvatar() {
-  if (!stage.head) return;
-  loading.classList.remove("done");
-  loading.textContent = "Loading avatar...";
-  try {
-    await stage.init({
-      avatarUrl: settings.avatar ? `/avatars/${settings.avatar}` : undefined,
-      onprogress: (ev) => {
-        if (ev.lengthComputable) {
-          loading.textContent = `Loading avatar ${Math.min(100, Math.round((ev.loaded / ev.total) * 100))}%`;
-        }
-      },
-    });
-  } catch (err) { console.error(err); }
-  loading.classList.add("done");
-}
-
-// ── Clamp helper ─────────────────────────────────────────────────────────
-function clampRect() {
-  const vw = window.innerWidth, vh = window.innerHeight;
-  const r = textChat.getBoundingClientRect();
-  let l = r.left, t = r.top;
-  const minTop = 10;
-  l = Math.max(10, Math.min(l, vw - r.width - 10));
-  t = Math.max(minTop, Math.min(t, vh - r.height - 10));
-  textChat.style.left = `${l}px`;
-  textChat.style.top = `${t}px`;
-}
-
-// ── Drag (mouse + touch) ─────────────────────────────────────────────────
-function makeDraggable() {
-  let dragging = false;
-  let startX, startY, startLeft, startTop;
-
-  function getPos(e) {
-    const p = e.changedTouches ? e.changedTouches[0] : e;
-    return { x: p.clientX, y: p.clientY };
-  }
-
-  function onStart(e) {
-    if (e.target.closest("#chat-header-actions") || e.target.closest("#chat-avatar-select")) return;
-    const p = getPos(e);
-    dragging = true;
-    const rect = textChat.getBoundingClientRect();
-    startX = p.x; startY = p.y;
-    startLeft = rect.left; startTop = rect.top;
-    textChat.classList.add("dragging");
-    e.preventDefault();
-  }
-
-  function onMove(e) {
-    if (!dragging) return;
-    const p = getPos(e);
-    const dx = p.x - startX, dy = p.y - startY;
-    textChat.style.left = `${startLeft + dx}px`;
-    textChat.style.top = `${startTop + dy}px`;
-    textChat.style.right = "auto";
-    textChat.style.bottom = "auto";
-    textChat.style.width = "";
-    textChat.style.height = "";
-    e.preventDefault();
-  }
-
-  function onEnd() {
-    if (!dragging) return;
-    dragging = false;
-    textChat.classList.remove("dragging");
-    clampRect();
-  }
-
-  chatHeader.addEventListener("mousedown", onStart);
-  document.addEventListener("mousemove", onMove);
-  document.addEventListener("mouseup", onEnd);
-  chatHeader.addEventListener("touchstart", onStart, { passive: false });
-  document.addEventListener("touchmove", onMove, { passive: false });
-  document.addEventListener("touchend", onEnd);
-}
-
-// ── Resize (mouse + touch) ───────────────────────────────────────────────
-function makeResizable() {
-  let resizing = false;
-  let startX, startY, startW, startH;
-
-  function getPos(e) {
-    const p = e.changedTouches ? e.changedTouches[0] : e;
-    return { x: p.clientX, y: p.clientY };
-  }
-
-  function onStart(e) {
-    resizing = true;
-    const rect = textChat.getBoundingClientRect();
-    const p = getPos(e);
-    startX = p.x; startY = p.y;
-    startW = rect.width; startH = rect.height;
-    textChat.classList.add("resizing");
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  function onMove(e) {
-    if (!resizing) return;
-    const p = getPos(e);
-    const dw = p.x - startX, dh = p.y - startY;
-    const newW = Math.max(260, startW + dw);
-    const newH = Math.max(120, startH + dh);
-    textChat.style.width = `${newW}px`;
-    textChat.style.height = `${newH}px`;
-    textChat.style.right = "auto";
-    textChat.style.bottom = "auto";
-    e.preventDefault();
-  }
-
-  function onEnd() {
-    if (!resizing) return;
-    resizing = false;
-    textChat.classList.remove("resizing");
-  }
-
-  chatResizeHandle.addEventListener("mousedown", onStart);
-  document.addEventListener("mousemove", onMove);
-  document.addEventListener("mouseup", onEnd);
-  chatResizeHandle.addEventListener("touchstart", onStart, { passive: false });
-  document.addEventListener("touchmove", onMove, { passive: false });
-  document.addEventListener("touchend", onEnd);
+  return extra ? `${DEFAULT_INSTRUCTIONS}\n\nAdditional instructions from the user:\n${extra}` : DEFAULT_INSTRUCTIONS;
 }
 
 // ── Captions / subtitles ─────────────────────────────────────────────────
+/** @param {string} text @param {""|"live"|"error"} [kind] */
 function setCaption(text, kind = "") {
   caption.textContent = text;
   caption.className = kind;
 }
+
+/** @param {string} text */
 function showSubtitles(text) {
   if (!settings.subtitles) return;
   clearTimeout(subtitleTimer);
   subtitles.textContent = text;
   subtitles.classList.add("visible");
 }
+
 function fadeSubtitles(delayMs = 2600) {
   clearTimeout(subtitleTimer);
   subtitleTimer = window.setTimeout(() => subtitles.classList.remove("visible"), delayMs);
 }
 
-// ── Text Chat UI ─────────────────────────────────────────────────────────
-function addChatMessage(role, text) {
-  const msg = document.createElement("div");
-  msg.className = `chat-message ${role}`;
-  msg.textContent = text;
-  chatMessages.appendChild(msg);
-  chatMessages.scrollTop = chatMessages.scrollHeight;
-}
-
-function showTextChat(show) {
-  textChat.hidden = !show;
-  if (show) chatInput.focus();
-}
-
-// Fetch and update World Cup info for greeting
-async function getWorldCupGreeting() {
-  try {
-    const searchResp = await fetch("/api/web/search?q=World+Cup+2026+latest+news");
-    if (searchResp.ok) {
-      const data = await searchResp.json();
-      if (data.results && data.results.length > 0) {
-        const latestNews = data.results[0].title || "";
-        return getVietnameseGreeting().replace("World Cup đang diễn ra sôi động", `World Cup đang có tin: ${latestNews}`);
-      }
-    }
-  } catch (e) {
-    console.warn("Could not fetch World Cup news:", e);
-  }
-  return getVietnameseGreeting();
-}
-
-function sendTextMessage() {
-  const text = chatInput.value.trim();
-  if (!text) return;
-
-  addChatMessage("user", text);
-  chatInput.value = "";
-
-  // Track if this is the first message to send greeting
-  if (!client || !sessionInProgress) {
-    void startTextSession(text);
-    return;
-  }
-
-  // Pre-process: auto-search web before sending to model
-  setCaption("LOOKING IT UP…");
-  void (async () => {
-    const enriched = await withSearchContext(text);
-    client.sendUserText(enriched);
-    client.requestResponse();
-  })();
-}
-
-// Close button
-if (chatCloseBtn) {
-  chatCloseBtn.addEventListener("click", (e) => {
-    e.stopPropagation();
-    textMode = false;
-    showTextChat(false);
-    textModeBtn.classList.remove("active");
-  });
-}
-
 // ── Button ───────────────────────────────────────────────────────────────
+/** @type {"start" | "join" | "stop" | "busy"} */
 let mainAction = "start";
+
+/** @param {"start" | "join" | "stop" | "busy"} action @param {string} label */
 function setMainButton(action, label) {
   mainAction = action;
   mainBtnLabel.textContent = label;
   mainBtn.disabled = action === "busy";
   mainBtn.classList.toggle("live", action === "stop");
   muteBtn.hidden = action !== "stop";
-  textModeBtn.hidden = false;
 }
 
-// ── Status ───────────────────────────────────────────────────────────────
+// ── Status handling ──────────────────────────────────────────────────────
 const CAPTIONS = {
   idle: "TAP TO TALK",
   "creating-session": "REQUESTING A SLOT…",
@@ -411,212 +180,151 @@ const CAPTIONS = {
   error: "SOMETHING BROKE, TAP TO RETRY",
 };
 
+/** @param {string} status */
 function onStatus(status) {
   stage.setConversationState(status);
   setCaption(CAPTIONS[status] ?? status, status === "error" ? "error" : status === "idle" || status === "closed" ? "" : "live");
+
   switch (status) {
-    case "idle": case "closed": setMainButton("start", "Start talking"); break;
-    case "error": setMainButton("start", "Retry"); break;
-    case "creating-session": case "connecting": setMainButton("busy", "Connecting…"); break;
-    case "queued": setMainButton("stop", "Leave queue"); break;
-    case "your-turn": setMainButton("join", "Join now"); break;
-    default: setMainButton("stop", "End conversation"); break;
+    case "idle":
+    case "closed":
+      setMainButton("start", "Start talking");
+      break;
+    case "error":
+      setMainButton("start", "Retry");
+      break;
+    case "creating-session":
+    case "connecting":
+      setMainButton("busy", "Connecting…");
+      break;
+    case "queued":
+      setMainButton("stop", "Leave queue");
+      break;
+    case "your-turn":
+      setMainButton("join", "Join now");
+      break;
+    default:
+      // connected / user-speaking / processing / ai-speaking
+      setMainButton("stop", "End conversation");
+      break;
   }
+
   if (status === "user-speaking") {
     subtitles.classList.remove("visible");
-    showTextChat(textMode);
   }
 }
 
-// ── Tool runner ──────────────────────────────────────────────────────────
+// ── Tool executor ────────────────────────────────────────────────────────
+/** @param {string} name @param {string} argsJson @param {string} callId */
 function runTool(name, argsJson, callId) {
   if (!client) return;
+  /** @type {Record<string, unknown>} */
   let args = {};
-  try { args = JSON.parse(argsJson || "{}"); } catch {}
-
-  if (name === "get_current_datetime") {
-    const now = new Date();
-    const result = `The current date and time is ${now.toLocaleDateString("en-US", { weekday: "long", year: "numeric", month: "long", day: "numeric" })} at ${now.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit" })}.`;
-    client.sendToolOutput(callId, result);
-    client.requestResponse();
-    return;
-  }
-
-  if (name === "search_wikipedia") {
-    const query = /** @type {string} */ (args.query || "");
-    if (!query) { client.sendToolOutput(callId, "Please provide a search query."); client.requestResponse(); return; }
-    const wikiTitle = query.replace(/\s+/g, "_");
-    fetch(`/api/wiki/summary?title=${encodeURIComponent(wikiTitle)}`)
-      .then((r) => r.json())
-      .then((data) => {
-        if (data.extract) { client.sendToolOutput(callId, `From Wikipedia (${data.title}): ${data.extract}\nSource: ${data.url}`); client.requestResponse(); return; }
-        fetch(`/api/wiki/search?q=${encodeURIComponent(query)}`)
-          .then((r) => r.json())
-          .then((searchData) => {
-            if (!searchData.results || searchData.results.length === 0) { client.sendToolOutput(callId, `No Wikipedia results found for "${query}".`); client.requestResponse(); return; }
-            const first = searchData.results[0];
-            fetch(`/api/wiki/summary?title=${encodeURIComponent(first.title)}`)
-              .then((r) => r.json())
-              .then((summary) => { client.sendToolOutput(callId, summary.extract ? `From Wikipedia (${summary.title}): ${summary.extract}\nSource: ${summary.url}` : `Wikipedia results for "${query}":\n${searchData.results.map((r) => `• ${r.title}: ${r.snippet}`).join("\n")}`); client.requestResponse(); });
-          });
-      })
-      .catch(() => { client.sendToolOutput(callId, `Failed to search Wikipedia for "${query}".`); client.requestResponse(); });
-    return;
-  }
-
-  if (name === "search_web") {
-    const query = /** @type {string} */ (args.query || "");
-    if (!query) { client.sendToolOutput(callId, "Please provide a search query."); client.requestResponse(); return; }
-    fetch(`/api/web/search?q=${encodeURIComponent(query)}`)
-      .then((r) => r.json())
-      .then((data) => {
-        if (!data.results || data.results.length === 0) { client.sendToolOutput(callId, `No web results found for "${query}".`); client.requestResponse(); return; }
-        client.sendToolOutput(callId, `Web search results for "${query}":\n${data.results.slice(0, 3).map((r, i) => `${i + 1}. ${r.title}\n   ${r.snippet}`).join("\n")}`);
-        client.requestResponse();
-      })
-      .catch(() => { client.sendToolOutput(callId, `Failed to search the web for "${query}".`); client.requestResponse(); });
-    return;
+  try {
+    args = JSON.parse(argsJson || "{}");
+  } catch {
+    // keep {}
   }
-
   const result = stage.runTool(name, args) ?? `Unknown tool: ${name}`;
   client.sendToolOutput(callId, result);
+  // The turn continues after a tool call only when we ask for the follow-up.
   client.requestResponse();
 }
 
-// ── Voice Session (mic required) ────────────────────────────────────���────
-async function startVoiceSession() {
-  if (sessionInProgress) return;
-  sessionInProgress = true;
+// ── Session lifecycle ────────────────────────────────────────────────────
+async function startSession() {
+  // Everything audible hangs off the avatar's AudioContext; resume it inside
+  // the tap gesture or iOS keeps it suspended (silent).
   stage.resume();
 
   let micStream;
   if (new URLSearchParams(location.search).has("fakemic")) {
+    // Dev/testing hook: a silent synthetic mic, so the session can be driven
+    // end-to-end (handshake, WS, TTS playback, lip-sync) without a real mic
+    // or a native permission prompt.
     const ctx = /** @type {AudioContext} */ (stage.audioCtx);
     micStream = ctx.createMediaStreamDestination().stream;
   } else {
     try {
-      micStream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true } });
+      micStream = await navigator.mediaDevices.getUserMedia({
+        audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true },
+      });
     } catch {
       setCaption("MIC BLOCKED, ALLOW IT IN THE BROWSER AND RETRY", "error");
-      sessionInProgress = false;
       return;
     }
   }
+
   const audioCtx = stage.audioCtx;
   const voiceSink = stage.voiceSink;
-  if (!audioCtx || !voiceSink) { sessionInProgress = false; return; }
+  if (!audioCtx || !voiceSink) return;
 
   const c = new S2sWsRealtimeClient({
     ...(config.lb ? { sessionUrl: "api/session" } : { directUrl: settings.directUrl }),
     voice: settings.voice,
     instructions: effectiveInstructions(),
-    micStream, audioContext: audioCtx, outputNode: voiceSink,
-    workletBaseUrl: "/worklets/", tools: TOOL_DEFS,
-    _textOnly: false,
+    micStream,
+    audioContext: audioCtx,
+    outputNode: voiceSink,
+    workletBaseUrl: "/worklets/",
+    tools: TOOL_DEFS,
   });
   client = c;
-  _attachClientEvents(c);
 
-  try {
-    await c.connect();
-    // Send greeting on first connect (Vương avatar intro)
-    if (!greetingSent && settings.avatar === "vuong.glb") {
-      const greeting = await getWorldCupGreeting();
-      c.sendUserText(greeting);
-      c.requestResponse();
-      greetingSent = true;
-      addChatMessage("assistant", greeting);
-    }
-  }
-  catch (err) {
-    const code = /** @type {Error & {code?: string}} */ (err)?.code;
-    if (code === "limit") setCaption("DAILY CONVERSATION LIMIT REACHED, TRY AGAIN TOMORROW", "error");
-    else if (code === "queue-full") setCaption("EVERY SEAT IS TAKEN, TRY AGAIN SHORTLY", "error");
-    else if (code === "join-expired") setCaption("YOUR SPOT EXPIRED, TAP TO TRY AGAIN", "error");
-    else if (code !== "aborted") { console.error(err); setCaption("COULD NOT CONNECT, TAP TO RETRY", "error"); }
-    await endSession(true);
-  }
-}
+  c.addEventListener("status", (e) => onStatus(/** @type {CustomEvent} */ (e).detail.status));
 
-// ── Text Session (no mic) ────────────────────────────────────────────────
-async function startTextSession(initialText) {
-  if (sessionInProgress) {
-    if (client) { client.sendUserText(initialText); client.requestResponse(); }
-    return;
-  }
-  sessionInProgress = true;
-  stage.resume();
+  c.addEventListener("queue", (e) => {
+    const { position } = /** @type {CustomEvent} */ (e).detail;
+    setCaption(position > 0 ? `#${position} IN LINE…` : "ALMOST THERE…", "live");
+  });
 
-  const audioCtx = stage.audioCtx;
-  const voiceSink = stage.voiceSink;
-  if (!audioCtx || !voiceSink) { sessionInProgress = false; return; }
+  c.addEventListener("transcript", (e) => {
+    const { role, text } = /** @type {CustomEvent} */ (e).detail;
+    if (role === "assistant" && text) showSubtitles(text);
+  });
 
-  const c = new S2sWsRealtimeClient({
-    ...(config.lb ? { sessionUrl: "api/session" } : { directUrl: settings.directUrl }),
-    voice: settings.voice,
-    instructions: effectiveInstructions(),
-    audioContext: audioCtx, outputNode: voiceSink,
-    workletBaseUrl: "/worklets/", tools: TOOL_DEFS,
-    _textOnly: true,
+  c.addEventListener("response-finished", () => {
+    fadeSubtitles();
+  });
+
+  c.addEventListener("toolcall", (e) => {
+    const { name, arguments: args, callId } = /** @type {CustomEvent} */ (e).detail;
+    runTool(name, args, callId);
   });
-  client = c;
-  _attachClientEvents(c);
 
-  textMode = true;
-  textModeBtn.classList.add("active");
-  setCaption("LOOKING IT UP…");
+  c.addEventListener("server-error", (e) => {
+    console.warn("server error:", /** @type {CustomEvent} */ (e).detail.error);
+  });
+
+  c.addEventListener("error", () => {
+    void endSession();
+  });
 
   try {
     await c.connect();
-    // Send greeting on first connect (Vương avatar intro)
-    if (!greetingSent && settings.avatar === "vuong.glb") {
-      const greeting = await getWorldCupGreeting();
-      c.sendUserText(greeting);
-      c.requestResponse();
-      greetingSent = true;
-      addChatMessage("assistant", greeting);
-    }
-    if (initialText) {
-      const enriched = await withSearchContext(initialText);
-      c.sendUserText(enriched);
-      c.requestResponse();
-    }
   } catch (err) {
     const code = /** @type {Error & {code?: string}} */ (err)?.code;
-    if (code === "limit") setCaption("DAILY CONVERSATION LIMIT REACHED, TRY AGAIN TOMORROW", "error");
-    else if (code !== "aborted") { console.error(err); setCaption("COULD NOT CONNECT, TAP TO RETRY", "error"); }
+    if (code === "limit") {
+      setCaption("DAILY CONVERSATION LIMIT REACHED, TRY AGAIN TOMORROW", "error");
+    } else if (code === "queue-full") {
+      setCaption("EVERY SEAT IS TAKEN, TRY AGAIN SHORTLY", "error");
+    } else if (code === "join-expired") {
+      setCaption("YOUR SPOT EXPIRED, TAP TO TRY AGAIN", "error");
+    } else if (code !== "aborted") {
+      console.error(err);
+      setCaption("COULD NOT CONNECT, TAP TO RETRY", "error");
+    }
     await endSession(true);
+    return;
   }
 }
 
-function _attachClientEvents(c) {
-  c.addEventListener("status", (e) => onStatus(/** @type {CustomEvent} */ (e).detail.status));
-  c.addEventListener("queue", (e) => { const { position } = /** @type {CustomEvent} */ (e).detail; setCaption(position > 0 ? `#${position} IN LINE…` : "ALMOST THERE…", "live"); });
-
-  // ── Transcript handler with Vietnamese number normalization ──────────
-  c.addEventListener("transcript", (e) => {
-    const { role, text } = /** @type {CustomEvent} */ (e).detail;
-    if (role === "assistant" && text) {
-      // Normalize numbers/dates for Vietnamese TTS display AND subtitles
-      const normalized = smartNormalize(text);
-      showSubtitles(normalized);
-      addChatMessage("assistant", normalized);
-    }
-  });
-
-  c.addEventListener("response-finished", () => fadeSubtitles());
-  c.addEventListener("toolcall", (e) => { const { name, arguments: args, callId } = /** @type {CustomEvent} */ (e).detail; runTool(name, args, callId); });
-  c.addEventListener("server-error", (e) => console.warn("server error:", /** @type {CustomEvent} */ (e).detail.error));
-  c.addEventListener("error", () => { void endSession(); });
-}
-
+/** @param {boolean} [silent] Keep the current caption (e.g. an error). */
 async function endSession(silent = false) {
   const c = client;
   client = null;
-  sessionInProgress = false;
-  greetingSent = false; // Reset for next session
   if (c) {
-    if (c.options.micStream) { for (const track of c.options.micStream?.getTracks() ?? []) track.stop(); }
+    for (const track of c.options.micStream?.getTracks() ?? []) track.stop();
     await c.close().catch(() => {});
   }
   stage.setConversationState("idle");
@@ -627,46 +335,85 @@ async function endSession(silent = false) {
 
 // ── UI events ────────────────────────────────────────────────────────────
 mainBtn.addEventListener("click", () => {
-  if (mainAction === "start") void startVoiceSession();
-  else if (mainAction === "join") { stage.resume(); client?.join(); }
-  else if (mainAction === "stop") void endSession();
+  if (mainAction === "start") void startSession();
+  else if (mainAction === "join") {
+    stage.resume(); // fresh gesture: re-arm audio before dialing
+    client?.join();
+  } else if (mainAction === "stop") void endSession();
+});
+
+muteBtn.addEventListener("click", () => {
+  muted = !muted;
+  client?.setMuted(muted);
+  muteBtn.classList.toggle("active", muted);
+  muteBtn.setAttribute("aria-label", muted ? "Unmute microphone" : "Mute microphone");
 });
-muteBtn.addEventListener("click", () => { muted = !muted; client?.setMuted(muted); muteBtn.classList.toggle("active", muted); muteBtn.setAttribute("aria-label", muted ? "Unmute microphone" : "Mute microphone"); });
-textModeBtn.addEventListener("click", () => { textMode = !textMode; showTextChat(textMode); textModeBtn.classList.toggle("active", textMode); });
-chatSendBtn.addEventListener("click", () => sendTextMessage());
-chatInput.addEventListener("keypress", (e) => { if (e.key === "Enter") sendTextMessage(); });
 
-chatAvatarSelect.addEventListener("change", () => { setAvatarFromSelect(chatAvatarSelect.value); void reloadAvatar(); });
-settingsAvatarSelect.addEventListener("change", () => { setAvatarFromSelect(settingsAvatarSelect.value); chatAvatarSelect.value = settingsAvatarSelect.value; void reloadAvatar(); });
+settingsBtn.addEventListener("click", () => {
+  inputVoice.value = settings.voice;
+  inputInstructions.value = settings.instructions;
+  inputDirectUrl.value = settings.directUrl;
+  inputSubtitles.checked = settings.subtitles;
+  settingsDialog.showModal();
+});
 
-settingsBtn.addEventListener("click", () => { inputVoice.value = settings.voice; inputInstructions.value = settings.instructions; inputDirectUrl.value = settings.directUrl; inputSubtitles.checked = settings.subtitles; settingsAvatarSelect.value = chatAvatarSelect.value; settingsDialog.showModal(); });
 settingsDialog.addEventListener("close", () => {
-  settings = { voice: inputVoice.value || DEFAULT_VOICE, avatar: settingsAvatarSelect.value || "", instructions: inputInstructions.value, directUrl: inputDirectUrl.value.trim(), subtitles: inputSubtitles.checked };
-  // Reset greeting flag when avatar changes
-  if (settings.avatar !== "vuong.glb") greetingSent = false;
-  saveSettings(); chatAvatarSelect.value = settings.avatar; if (!settings.subtitles) subtitles.classList.remove("visible"); client?.updateSession({ voice: settings.voice, instructions: effectiveInstructions() });
+  settings = {
+    voice: inputVoice.value || DEFAULT_VOICE,
+    instructions: inputInstructions.value,
+    directUrl: inputDirectUrl.value.trim(),
+    subtitles: inputSubtitles.checked,
+  };
+  saveSettings();
+  if (!settings.subtitles) subtitles.classList.remove("visible");
+  // Voice/instructions apply live to an ongoing session.
+  client?.updateSession({ voice: settings.voice, instructions: effectiveInstructions() });
 });
 
-window.addEventListener("beforeunload", () => { client?.close(); });
+window.addEventListener("beforeunload", () => {
+  client?.close();
+});
 
 // ── Boot ─────────────────────────────────────────────────────────────────
 async function boot() {
-  for (const v of VOICES) { const o = document.createElement("option"); o.value = v; o.textContent = v.replaceAll("_", " "); inputVoice.append(o); }
-  try { const resp = await fetch("api/config"); if (resp.ok) config = { ...config, ...(await resp.json()) }; } catch {}
-  directUrlRow.hidden = !config.allowDirect;
+  for (const v of VOICES) {
+    const o = document.createElement("option");
+    o.value = v;
+    o.textContent = v.replaceAll("_", " ");
+    inputVoice.append(o);
+  }
 
-  await fetchAvatarList(); populateAvatarSelects(settings.avatar);
-  makeDraggable(); makeResizable();
+  try {
+    const resp = await fetch("api/config");
+    if (resp.ok) config = { ...config, ...(await resp.json()) };
+  } catch {
+    // defaults keep direct mode available
+  }
+  directUrlRow.hidden = !config.allowDirect;
 
-  setCaption("WAKING HER UP…"); setMainButton("busy", "Loading…");
+  setCaption("WAKING HER UP…");
+  setMainButton("busy", "Loading…");
   try {
     await stage.init({
-      avatarUrl: settings.avatar ? `/avatars/${settings.avatar}` : undefined,
       onprogress: (ev) => {
-        if (ev.lengthComputable) loading.textContent = `Loading avatar ${Math.min(100, Math.round((ev.loaded / ev.total) * 100))}%`;
-      }
+        if (ev.lengthComputable) {
+          const pct = Math.min(100, Math.round((ev.loaded / ev.total) * 100));
+          loading.textContent = `Loading avatar ${pct}%`;
+        }
+      },
     });
-  } catch (err) { console.error(err); loading.textContent = "The avatar failed to load. Check the console and reload."; setCaption("AVATAR FAILED TO LOAD", "error"); return; }
-  loading.classList.add("done"); setCaption(CAPTIONS.idle); setMainButton("start", "Start talking");
+  } catch (err) {
+    console.error(err);
+    loading.textContent = "The avatar failed to load. Check the console and reload.";
+    setCaption("AVATAR FAILED TO LOAD", "error");
+    return;
+  }
+  loading.classList.add("done");
+  setCaption(CAPTIONS.idle);
+  setMainButton("start", "Start talking");
+
+  // Debug handles
+  Object.assign(window, { stage, getClient: () => client });
 }
+
 void boot();