Restore main to commit 891774c

.gitattributes

@@ -51,9 +51,3 @@ public/avatars/ready_player_me_1.glb filter=lfs diff=lfs merge=lfs -text
 public/avatars/ready_player_me_2.glb filter=lfs diff=lfs merge=lfs -text
 public/avatars/vuong.glb filter=lfs diff=lfs merge=lfs -text
 public/avatars/lisamy.glb filter=lfs diff=lfs merge=lfs -text
-public/avatars/viverse_avatar_model_209370.vrm filter=lfs diff=lfs merge=lfs -text
-public/avatars/scene.glb filter=lfs diff=lfs merge=lfs -text
-public/avatars/scene[[:space:]](1).glb filter=lfs diff=lfs merge=lfs -text
-public/avatars/scene[[:space:]](3).glb filter=lfs diff=lfs merge=lfs -text
-public/avatars/vuong1.glb filter=lfs diff=lfs merge=lfs -text
-public/avatars/lisamy1.glb filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -31,4 +31,4 @@ report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
 .idea
 
 # Finder (MacOS) folder config
-.DS_Store
+.DS_Store

.rebuild-trigger

@@ -1 +1 @@
-Trigger rebuild - fix picker + thumbnails
+rebuild-b'\xbaD\x8a+lY\xa0%B\xdd\x1c\xfa\xd5\xd2ny'

CLAUDE.md

@@ -108,4 +108,4 @@ Then, run index.ts
 bun --hot ./index.ts
 ```
 
-For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.
+For more information, read the Bun API docs in `node_modules/bun-types/docs/**.mdx`.

Dockerfile

@@ -1,32 +1,27 @@
-# Multi-service: Bun server + Python sidecar for dataset uploads
+# Single container: Bun serves the bundled front-end AND the /api/session
+# proxy. HF Spaces (sdk: docker) routes traffic to app_port, set to 7860.
 FROM oven/bun:1-slim
 
 WORKDIR /app
 
-# Install Python and supervisor for sidecar
-RUN apt-get update && apt-get install -y python3 python3-pip python3-venv supervisor && rm -rf /var/lib/apt/lists/*
-
-# Create virtual environment for Python
-RUN python3 -m venv /app/venv
-
-# Copy package files for Bun
+# Copy just the lockfile and package.json first for layer caching
 COPY package.json bun.lock ./
+# Retry install once if it fails (network flakiness)
 RUN bun install --frozen-lockfile --production || (sleep 3 && bun install --frozen-lockfile --production)
 
-# Copy Python requirements and install in venv
-COPY requirements.txt ./
-RUN /app/venv/bin/pip install --no-cache-dir -r requirements.txt
-
-# Copy application code
+# Copy the rest of the application
 COPY . .
 
-# Supervisor config
-RUN echo '[supervisord]\nnodaemon=true\n\n[program:sidecar]\ncommand=/app/venv/bin/python upload_service.py\nstdout_logfile=/dev/stdout\nstdout_logfile_maxbytes=0\nstderr_logfile=/dev/stderr\nstderr_logfile_maxbytes=0\nautostart=true\nautorestart=true\n\n[program:bun]\ncommand=bun index.ts\nstdout_logfile=/dev/stdout\nstdout_logfile_maxbytes=0\nstderr_logfile=/dev/stderr\nstderr_logfile_maxbytes=0\nautostart=true\nautorestart=true\n' > /etc/supervisor/conf.d/supervisord.conf
-
 ENV NODE_ENV=production
 ENV PORT=7860
-ENV SIDECAR_URL=http://localhost:7861
+# Point at a speech-to-speech backend by setting ONE of these in the Space
+# settings (index.ts prefers LOAD_BALANCER_URL):
+#   LOAD_BALANCER_URL  a load balancer's base URL (a secret) — talks to the pool directly
+#   SESSION_PROXY_URL  another deployment's /api to piggyback (e.g. a public demo Space)
+# With neither set, the app runs in direct mode (paste a ws:// URL in Settings).
+
+EXPOSE 7860
 
-EXPOSE 7860 7861
+USER bun
 
-CMD ["supervisord", "-c", "/etc/supervisor/conf.d/supervisord.conf"]
+CMD ["bun", "index.ts"]

README.md

@@ -4,14 +4,97 @@ emoji: 🗣️
 colorFrom: indigo
 colorTo: purple
 sdk: docker
-pinned: false
 app_port: 7860
+pinned: false
+thumbnail: https://huggingface.co/spaces/victor/gemma-avatar/resolve/main/thumbnail.webp
+short_description: Talk to Gemma 4 face to face, with a 3D lip-synced avatar
+models:
+- google/gemma-4-31B-it
+- nvidia/parakeet-tdt-1.1b
+- Qwen/Qwen3-TTS-12Hz-1.7B-CustomVoice
 tags:
 - ml-intern
 ---
 
-# Gemma Multi-Avatar
+# Gemma Avatar
+
+Realtime voice chat with a 3D talking-head avatar. Same AI stack as the
+[smolagents/hf-realtime-voice](https://huggingface.co/spaces/smolagents/hf-realtime-voice)
+Space ([blog post](https://huggingface.co/blog/cerebras-gemma4-voice-ai)), but the
+orb visualization is replaced by a [TalkingHead](https://github.com/met4citizen/TalkingHead)
+3D avatar with real-time audio-driven lip-sync.
+
+## The pipeline
+
+```
+you speak → silero-VAD → parakeet-tdt-1.1b (STT) → gemma-4-31B-it on Cerebras → Qwen3-TTS → avatar speaks
+```
+
+Transport is the OpenAI Realtime GA protocol over WebSocket against Hugging
+Face's speech-to-speech backend: mic PCM16 @ 16 kHz goes up as
+`input_audio_buffer.append`, TTS PCM16 @ 16 kHz comes back as
+`response.output_audio.delta`, transcripts stream alongside.
+
+## How the avatar works
+
+- **Rendering / body language** — [TalkingHead](https://github.com/met4citizen/TalkingHead)
+  (three.js). Blinking, breathing, idle sway, moods, hand gestures, and emoji
+  expressions are its built-in animation system.
+- **Lip-sync** — the backend sends raw PCM only (no word timings, no visemes),
+  so the mouth is driven from the audio itself with
+  [HeadAudio](https://github.com/met4citizen/HeadAudio): an AudioWorklet that
+  classifies MFCC frames into Oculus visemes (~50 ms latency, fully in-browser).
+  The s2s playback worklet is routed into TalkingHead's audio graph
+  (`audioAnalyzerNode → audioSpeechGainNode → reverb → speakers`) and HeadAudio
+  taps the speech gain node.
+- **The model plays the avatar** — three function tools are declared to the
+  backend: `set_mood`, `make_hand_gesture`, `make_facial_expression`. Gemma
+  calls them mid-conversation (smiles when greeting, shrugs when unsure,
+  thumbs-up when agreeing).
+- **Choreography** — client statuses drive presence: the avatar makes eye
+  contact when you start talking, gestures with its hands on new utterances,
+  and barge-in clears the playback buffer so the mouth settles instantly.
+
+## Run it
+
+```bash
+bun install
+
+# Pick a backend (one of):
+LOAD_BALANCER_URL=https://…            bun run dev   # a speech-to-speech load balancer
+SESSION_PROXY_URL=https://…/api        bun run dev   # piggyback another deployment's /api (dev)
+bun run dev                                          # direct mode: paste a ws:// URL in Settings
+```
+
+Open http://localhost:3000 and tap **Start talking**.
+
+\`?fakemic=1\` starts a session with a silent synthetic mic (useful for testing
+the full loop without a microphone — trigger a reply from the console with
+\`getClient().requestResponse()\`).
+
+## Layout
+
+```
+index.ts                    Bun server: HTML import + /api/session proxy + static assets
+index.html                  App shell (avatar hero, caption, subtitles, settings)
+src/app.js                  Session wiring, tool executor, UI state
+src/avatar.js               AvatarStage: TalkingHead + HeadAudio + choreography
+src/s2s/s2s-ws-client.js    Realtime WS client (vendored from the Space; orb removed,
+                            injectable output node + worklet base URL + shared-ctx close)
+src/s2s/codec.js            PCM/base64 + transcript helpers (vendored, unchanged)
+src/vendor/headaudio.min.mjs  HeadAudio node class (bundled)
+public/worklets/            mic-capture + audio-playback AudioWorklets (vendored, unchanged)
+public/vendor/              HeadAudio worklet processor + viseme model (runtime-loaded)
+public/avatars/brunette.glb  Default avatar (Ready Player Me; CC BY-NC 4.0 — non-commercial)
+```
 
-3D talking-head avatar with real-time voice/text chat.
+## Notes
 
-Users can switch between ~20 `.glb` avatar models, capture snapshots as thumbnails, and chat with a Gemma 4 speech-to-speech backend.
+- The avatar GLB must have a Mixamo-compatible rig plus ARKit and Oculus-viseme
+  blend shapes. Ready Player Me avatars work with
+  \`?morphTargets=ARKit,Oculus%20Visemes\` on the GLB URL.
+- TalkingHead owns the AudioContext; the s2s client is handed \`head.audioCtx\`
+  and never closes it.
+- Everything animation-related runs on requestAnimationFrame — a backgrounded
+  tab freezes the avatar (audio keeps playing).
+# Rebuild trigger Thu Jul 23 07:49:41 UTC 2026

app.js

@@ -0,0 +1,2102 @@
+import { S2sWsRealtimeClient } from "./s2s/s2s-ws-client.js";
+import { AvatarStage, AVATAR_MOODS, AVATAR_GESTURES } from "./avatar.js";
+import { smartNormalize, prepareForTTS } from "./viNumberFix.js";
+
+const VOICES = [
+  "Aiden", "Ryan", "Dylan", "Eric",
+  "Ono_Anna", "Serena", "Sohee", "Uncle_Fu", "Vivian",
+];
+const DEFAULT_VOICE = "Sohee";
+
+// ── VNEWS integration ───────────────────────────────────────────────────
+// The VNEWS space (bep40/vnews) is reachable at this subdomain. It exposes a
+// clean JSON API (no key required) that we use to pull AI/tech news, answer
+// from VNEWS data, and rewrite selected chat content into VNEWS "wall" posts.
+const VNEWS_BASE = "https://bep40-vnews.hf.space";
+
+// ── News fetching ───────────────────────────────────────────────────────
+const NEWS_PAGE_SIZE = 10;
+
+async function getHotNews() {
+  let items = [];
+  try {
+    const resp = await fetch("/api/news/hot");
+    if (resp.ok) {
+      const data = await resp.json();
+      if (data.items && data.items.length > 0) {
+        items = data.items.slice(0, NEWS_PAGE_SIZE);
+      }
+    }
+  } catch (e) { console.warn("News API failed:", e); }
+  return items;
+}
+
+async function getMoreNews(offset, limit = NEWS_PAGE_SIZE) {
+  try {
+    const resp = await fetch(`/api/news/more?offset=${offset}&limit=${limit}`);
+    if (resp.ok) {
+      const data = await resp.json();
+      return {
+        items: Array.isArray(data.items) ? data.items : [],
+        nextOffset: data.offset ?? offset + (data.items?.length ?? 0),
+        hasMore: Boolean(data.hasMore),
+      };
+    }
+  } catch (e) { console.warn("News more API failed:", e); }
+  return { items: [], nextOffset: offset, hasMore: false };
+}
+
+async function getFilteredNews(query, limit = NEWS_PAGE_SIZE) {
+  try {
+    const resp = await fetch(`/api/news/filter?q=${encodeURIComponent(query)}&limit=${limit}`);
+    if (resp.ok) {
+      const data = await resp.json();
+      return Array.isArray(data.items) ? data.items : [];
+    }
+  } catch (e) { console.warn("News filter API failed:", e); }
+  return [];
+}
+
+// ── VNEWS fetch helpers ─────────────────────────────────────────────────
+let vnewsConnected = false;
+let vnewsArticles = [];   // flattened articles from VNEWS homepage
+let vnewsStatusTimer = 0;
+
+async function vnewsFetch(path) {
+  try {
+    const resp = await fetch(`${VNEWS_BASE}${path}`, { headers: { "Accept": "application/json" } });
+    if (!resp.ok) return null;
+    return await resp.json();
+  } catch (e) {
+    console.warn("VNEWS fetch failed:", path, e);
+    return null;
+  }
+}
+
+/** Pull the GenK "AI" feed (source = genk) — used for the "tin tức về AI" topic. */
+async function getVnewsAIFeed(limit = NEWS_PAGE_SIZE) {
+  const data = await vnewsFetch(`/api/category/cong-nghe`);
+  if (!Array.isArray(data)) return [];
+  return data
+    .filter((a) => a && a.title && a.link)
+    .map((a) => ({
+      title: a.title,
+      link: a.link,
+      image: a.img || "",
+      source: a.source === "genk" ? "GenK AI" : (a.source || "VNEWS"),
+      vnews: true,
+    }))
+    .slice(0, limit);
+}
+
+/** Pull the VNEWS homepage (all categories) and flatten into a searchable list. */
+
+// ── Topic tags (chủ đề HOT thời gian thực) — click mở modal tin theo chủ đề ──
+// Fetch realtime trending topics from the backend API (extracted from today's news).
+async function getTrendingTopics() {
+  try {
+    const resp = await fetch("/api/topics/trending");
+    if (resp.ok) {
+      const data = await resp.json();
+      if (Array.isArray(data.topics) && data.topics.length > 0) {
+        return data.topics;
+      }
+    }
+  } catch (e) { console.warn("[topic] API failed:", e); }
+  return [];
+}
+
+async function openTopic(slug, label) {
+  try {
+    setCaption("ĐANG TẢI TIN: " + label, "live");
+    // Pass the slug (not the label) to the backend so SLUG_MAP can resolve
+    // expanded search terms. The backend also falls back to label matching.
+    const raw = await getFilteredNews(slug);
+    const items = (Array.isArray(raw) ? raw : []).map((n) => ({
+      title: n.title, link: n.link, image: n.image || "",
+      source: n.source || "Tin tức", vnews: Boolean(n.vnews),
+    }));
+    showNewsPanel(items);
+    const nt = document.getElementById("news-title");
+    if (nt) nt.textContent = "📰 Tin: " + label;
+    document.querySelectorAll(".topic-chip").forEach((c) => c.classList.toggle("active", c.dataset.slug === slug));
+    if (!items.length) setCaption("Không có tin cho: " + label, "error");
+  } catch (e) {
+    console.warn("[topic] openTopic:", e);
+    setCaption("LỖI TẢI TIN: " + label, "error");
+  }
+}
+
+// Render today's real trending topics INSIDE the chat, right under the avatar's
+// greeting, so they are always visible. Clicking a chip opens that topic's news.
+let _topicTagsRendered = false;
+async function renderTopicTags() {
+  if (_topicTagsRendered) return;
+  let topics = [];
+  try { topics = await getTrendingTopics(); } catch (e) { console.warn("[topic] getTrending:", e); }
+  if (!topics.length) return;
+  const wrap = document.createElement("div");
+  wrap.className = "topic-tags";
+  wrap.id = "topic-tags-inline";
+  for (const c of topics) {
+    const chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "topic-chip";
+    chip.dataset.slug = c.slug;
+    chip.textContent = "#" + c.label.replace(/\s+/g, "_");
+    chip.addEventListener("click", () => void openTopic(c.slug, c.label));
+    wrap.appendChild(chip);
+  }
+  const oldEl = chatMessages.querySelector("#topic-tags-inline");
+  if (oldEl) oldEl.remove();
+  chatMessages.appendChild(wrap);
+  chatMessages.scrollTop = chatMessages.scrollHeight;
+  _topicTagsRendered = true;
+}
+
+async function getVnewsHomepage() {
+  const data = await vnewsFetch(`/api/homepage`);
+  if (!Array.isArray(data)) return [];
+  return data
+    .filter((a) => a && a.title && a.link)
+    .map((a) => ({
+      title: a.title,
+      link: a.link,
+      image: a.img || "",
+      source: a.group || a.source || "VNEWS",
+      vnews: true,
+    }));
+}
+
+/** Search VNEWS articles by a free-text query (case-insensitive, in title). */
+function searchVnews(query, limit = 8) {
+  const q = (query || "").toLowerCase().trim();
+  if (!q) return vnewsArticles.slice(0, limit);
+  return vnewsArticles
+    .filter((a) => a.title.toLowerCase().includes(q))
+    .slice(0, limit);
+}
+
+/** Format VNEWS articles as clickable link cards for the avatar to cite. */
+function vnewsLinksAsHtml(articles) {
+  if (!articles.length) return "(không có bài viết VNEWS phù hợp)";
+  return articles
+    .map((a, i) => {
+      const short = `${VNEWS_BASE}/?p=${encodeURIComponent(a.link)}`;
+      return `${i + 1}. <a href="${a.link}" target="_blank" rel="noopener">${a.title}</a> — nguồn ${a.source} (link rút gọn: ${short})`;
+    })
+    .join("<br>");
+}
+
+const DEFAULT_INSTRUCTIONS = [
+  "You are a friendly voice assistant with a visible, human-like 3D avatar.",
+  "CRITICAL: Always respond in the SAME LANGUAGE that the user writes or speaks.",
+  "If Vietnamese, respond in Vietnamese. If English, respond in English.",
+  "When Vietnamese: write dates as 'ngày 9 tháng 7 năm 2026' (NOT '9/7/2026'),",
+  "CRITICAL: When speaking Vietnamese, always write numbers as Vietnamese words (e.g. 'ba mươi lăm' not '35'). This ensures the TTS voice reads them correctly.",
+  "Keep replies short, natural, warm. Never list-like.",
+  "You can control avatar body with tools: set_mood, make_hand_gesture, make_facial_expression. Use them naturally.",
+  "NEVER guess. Use search_web, search_wikipedia, or get_vnews_news for ANY factual question.",
+  "When you cite a VNEWS article, ALWAYS include the direct link as a clickable <a href> tag AND mention the short link form.",
+  "Never mention tools or that you control an avatar.",
+  "Source links should be formatted as popup links with <a href> tags.",
+].join(" ");
+
+const STORAGE_KEYS = {
+  voice: "avatar.voice", avatar: "avatar.model", instructions: "avatar.instructions",
+  directUrl: "avatar.directUrl", subtitles: "avatar.subtitles",
+};
+
+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 } }, 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 } }, required: ["gesture"] } },
+  { type: "function", name: "make_facial_expression", description: "Make a quick facial expression, given as a single face emoji.", parameters: { type: "object", properties: { emoji: { type: "string" } }, required: ["emoji"] } },
+  { type: "function", name: "get_current_datetime", description: "Get current date and time.", parameters: { type: "object", properties: {} } },
+  { type: "function", name: "search_wikipedia", description: "Search Wikipedia for a topic.", parameters: { type: "object", properties: { query: { type: "string" } }, required: ["query"] } },
+  { type: "function", name: "search_web", description: "Search the web for current info.", parameters: { type: "object", properties: { query: { type: "string" } }, required: ["query"] } },
+  { type: "function", name: "get_vnews_news", description: "Search the connected VNEWS site for Vietnamese news articles (AI, tech, sports, world...). Returns article titles with direct links and short links. Use this when the user asks about news, especially AI/technology, or after VNEWS is connected.", parameters: { type: "object", properties: { query: { type: "string", description: "Keyword to search, e.g. 'AI', 'bóng đá', 'thời sự'. Empty = latest." } }, required: ["query"] } },
+];
+
+// ── DOM elements ─────────────────────────────────────────────────────────
+const $ = (sel) => document.querySelector(sel);
+const stageNode = $("#stage");
+const mainBtn = $("#main-btn");
+const mainBtnLabel = $("#main-btn-label");
+const muteBtn = $("#mute-btn");
+const textModeBtn = $("#text-mode-btn");
+const caption = $("#caption");
+const subtitles = $("#subtitles");
+const loading = $("#loading");
+const settingsBtn = $("#settings-btn");
+const settingsDialog = $("#settings");
+const inputVoice = $("#voice");
+const inputInstructions = $("#instructions");
+const inputDirectUrl = $("#direct-url");
+const inputSubtitles = $("#subtitles-toggle");
+const directUrlRow = $("#direct-url-row");
+const textChat = $("#text-chat");
+const chatHeader = $("#chat-header");
+const chatMessages = $("#chat-messages");
+const chatInput = $("#chat-input");
+const chatSendBtn = $("#chat-send-btn");
+const chatCloseBtn = $("#chat-close-btn");
+const chatResizeHandle = $("#chat-resize-handle");
+const chatAvatarSelect = $("#chat-avatar-select");
+const settingsAvatarSelect = $("#settings-avatar-select");
+const newsPanel = $("#news-panel");
+const newsList = $("#news-list");
+const newsCloseBtn = $("#news-close-btn");
+const newsToggleBtn = $("#news-toggle-btn");
+const newsLoadMore = $("#news-loadmore");
+const newsLoadMoreBtn = $("#news-loadmore-btn");
+const newsSentinel = $("#news-sentinel");
+const newsResizeHandle = $("#news-resize-handle");
+
+// ── State ───────────────────────────────────────────────────────────────
+const stage = new AvatarStage(stageNode);
+let client = null;
+let muted = false;
+let subtitleTimer = 0;
+let textMode = false;
+let config = { lb: false, allowDirect: true };
+let avatarList = [];
+let sessionInProgress = false;
+let autoGreetingSent = false;
+let preFetchedNews = [];
+let latestNewsUrl = null;
+let latestNewsSource = null;
+
+// ── News box state ──────────────────────────────────────────────────────
+let newsOffset = 0;        // how many items already rendered
+let newsLoading = false;   // guard against concurrent loads
+let newsHasMore = true;
+let newsObserver = null;
+
+// ── News sequence (for walking images through the conversation) ──────────
+let newsSeq = [];          // ordered list of news items to surface images from
+let newsSeqIdx = -1;       // index of the NEXT image to show
+let newsTopicQuery = "";   // current topic keyword (empty = general hot news)
+
+function loadSettings() {
+  return {
+    voice: localStorage.getItem(STORAGE_KEYS.voice) || DEFAULT_VOICE,
+    avatar: localStorage.getItem(STORAGE_KEYS.avatar) || "vuong.glb",
+    instructions: localStorage.getItem(STORAGE_KEYS.instructions) || "",
+    directUrl: localStorage.getItem(STORAGE_KEYS.directUrl) || "",
+    subtitles: localStorage.getItem(STORAGE_KEYS.subtitles) === "1",
+  };
+}
+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");
+}
+
+function getSourceName(hostname) {
+  const name = hostname.replace(/^www\./, "").toLowerCase();
+  const known = {
+    "vnexpress.net": "VnExpress",
+    "dantri.com.vn": "Dân trí",
+    "tuoitre.vn": "Tuổi Trẻ",
+    "thanhnien.vn": "Thanh Niên",
+    "vietnamnet.vn": "VietNamNet",
+    "zingnews.vn": "ZingNews",
+    "cafef.vn": "CafeF",
+    "genk.vn": "GenK",
+    "kenh14.vn": "Kênh 14",
+    "afamily.vn": "Afamily",
+    "plo.vn": "PLO",
+    "vtc.vn": "VTC",
+  };
+  return known[name] || name;
+}
+
+/** Short label/initial used for the avatar bubble when no image is available. */
+function sourceInitial(source) {
+  const map = {
+    "VnExpress": "Vn", "Dân trí": "DT", "Tuổi Trẻ": "TT", "Thanh Niên": "TN",
+    "VietNamNet": "VN", "ZingNews": "Z", "Kênh 14": "K14", "CafeF": "CF",
+    "GenK": "GK", "Afamily": "AF", "PLO": "PLO", "VTC": "VTC", "GenK AI": "AI",
+  };
+  return map[source] || (source ? source.slice(0, 2).toUpperCase() : "?");
+}
+
+/** Vietnamese date: "thứ Sáu, ngày 17 tháng 7 năm 2026". */
+function formatVietnameseDate(now) {
+  const weekdays = ["Chủ nhật", "thứ Hai", "thứ Ba", "thứ Tư", "thứ Năm", "thứ Sáu", "thứ Bảy"];
+  const wd = weekdays[now.getDay()];
+  return `${wd}, ngày ${now.getDate()} tháng ${now.getMonth() + 1} năm ${now.getFullYear()}`;
+}
+
+/** Vietnamese time phrasing: 10 AM -> "10h trưa", 6 PM+ -> "6h tối". */
+function formatVietnameseTime(now) {
+  let h = now.getHours();
+  const m = now.getMinutes();
+  let part;
+  if (h >= 0 && h < 5) part = "đêm";
+  else if (h < 10) part = "sáng";
+  else if (h < 13) part = "trưa"; // 10h, 11h, 12h -> trưa
+  else if (h < 18) part = "chiều";
+  else part = "tối"; // 18h trở đi -> tối
+  const hh = h === 0 ? 12 : h;
+  if (m === 0) return `${hh}h ${part}`;
+  return `${hh}h${m < 10 ? "0" : ""}${m} ${part}`;
+}
+
+function effectiveInstructions(newsItems) {
+  const now = new Date();
+  const dateStr = formatVietnameseDate(now);
+  const timeStr = formatVietnameseTime(now);
+  const dateLine = `Hôm nay là ${dateStr}. Thời gian hiện tại là ${timeStr}.`;
+  const extra = settings.instructions.trim();
+  const introLine = "Tôi tên là Vương đến V.AI STUDIO.";
+  // Trending topics are now fetched from the backend API /api/topics/trending
+  // which extracts real topics from today's news. The frontend getTrendingTopics()
+  // calls this API and renders the topic chips.
+
+  let newsInst = "";
+  if (newsItems && newsItems.length > 0) {
+    const topNews = newsItems[0];
+    const sourceName = getSourceName(new URL(topNews.link).hostname);
+    newsInst = `\n\nWhen you start the conversation, greet the user naturally with this EXACT format:\n"${introLine} ${dateStr}. ${timeStr}.\nTin HOT nhất hôm nay: ${topNews.title} (nguồn ${sourceName})"\nInclude the full title and source name in parentheses. After greeting, offer to help with questions.`;
+  } else {
+    newsInst = `\n\nWhen you start the conversation, greet the user naturally with this EXACT format:\n"${introLine} ${dateStr}. ${timeStr}."\nThen offer to help with questions.`;
+  }
+
+
+
+
+  let vnewsInst = "";
+  if (vnewsConnected && vnewsArticles.length > 0) {
+    const sample = vnewsArticles.slice(0, 6).map((a) => `• ${a.title} (${a.source})`).join("\n");
+    vnewsInst = `\n\nVNEWS is connected. You can answer using the latest VNEWS headlines and MUST cite them with direct <a href> links. Latest VNEWS headlines:\n${sample}`;
+  }
+
+  const base = `${dateLine}\n\n${DEFAULT_INSTRUCTIONS}${newsInst}${vnewsInst}`;
+  return extra ? `${base}\n\nAdditional user instructions:\n${extra}` : base;
+}
+
+// ── News image card (shown inside chat) ─────────────────────────────────
+function newsImageCardHtml(item) {
+  const imgUrl = item.image || (item.images && item.images[0]) || "";
+  const src = imgUrl
+    ? `<img class="news-card-img" src="${imgUrl}" alt="" loading="lazy" onerror="this.style.display='none'" />`
+    : `<div class="news-card-img news-card-img--fallback">${sourceInitial(item.source)}</div>`;
+  const link = item.link
+    ? `data-link="${item.link.replace(/"/g, "&quot;")}"`
+    : "";
+  return `<div class="news-card" ${link}>${src}<div class="news-card-meta"><span class="news-card-source">${item.source || "Tin tức"}</span><span class="news-card-title">${item.title}</span></div></div>`;
+}
+
+// ── News Panel ─────────────────────────────────────────────────────────
+function buildNewsItem(item, idx) {
+  const el = document.createElement("div");
+  el.className = "news-item";
+
+  const thumb = document.createElement("div");
+  thumb.className = "news-thumb";
+  if (item.image) {
+    const img = document.createElement("img");
+    img.loading = "lazy";
+    img.alt = "";
+    img.src = item.image;
+    img.addEventListener("error", () => {
+      thumb.classList.add("news-thumb--fallback");
+      thumb.textContent = sourceInitial(item.source);
+      img.remove();
+    });
+    thumb.appendChild(img);
+  } else {
+    thumb.classList.add("news-thumb--fallback");
+    thumb.textContent = sourceInitial(item.source);
+  }
+
+  const body = document.createElement("div");
+  body.className = "news-body";
+
+  const meta = document.createElement("div");
+  meta.className = "news-meta";
+  meta.innerHTML = `<span class="news-source">${item.source || "Tin tức"}</span>` +
+    (typeof idx === "number" ? `<span class="news-index">#${idx + 1}</span>` : "");
+
+  const title = document.createElement("div");
+  title.className = "news-title";
+  title.textContent = item.title;
+
+  if (item.description) {
+    const desc = document.createElement("div");
+    desc.className = "news-desc";
+    desc.textContent = item.description;
+    body.appendChild(desc);
+  }
+
+  body.appendChild(meta);
+  body.appendChild(title);
+
+  el.appendChild(thumb);
+  el.appendChild(body);
+
+  // Action row: open source + ask in chat
+  const actions = document.createElement("div");
+  actions.className = "news-actions";
+
+  const srcBtn = document.createElement("button");
+  srcBtn.className = "news-act-btn";
+  srcBtn.type = "button";
+  srcBtn.textContent = "🔗 Nguồn";
+  srcBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    // VNEWS items open the short link so highlights/videos play on VNEWS.
+    const url = item.vnews && item.link ? `${VNEWS_BASE}/?p=${encodeURIComponent(item.link)}` : item.link;
+    if (url) window.open(url, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
+  });
+
+  const askBtn = document.createElement("button");
+  askBtn.className = "news-act-btn news-act-btn--ask";
+  askBtn.type = "button";
+  askBtn.textContent = "💬 Hỏi";
+  askBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    askAboutNews(item);
+  });
+
+  actions.appendChild(srcBtn);
+  actions.appendChild(askBtn);
+  el.appendChild(actions);
+
+  // Clicking the card body opens the source (VNEWS short link for VNEWS items).
+  el.addEventListener("click", () => {
+    const url = item.vnews && item.link ? `${VNEWS_BASE}/?p=${encodeURIComponent(item.link)}` : item.link;
+    if (url) window.open(url, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
+  });
+  return el;
+}
+
+/** Fill the chat input with a question about a news item and focus/start chat. */
+function askAboutNews(item) {
+  const q = `Kể chi tiết về tin này: ${item.title}`;
+  chatInput.value = q;
+  showTextChat(true);
+  textModeBtn.classList.add("active");
+  textMode = true;
+  chatInput.focus();
+  if (!client || !sessionInProgress) {
+    const url = new URL(location.href);
+    url.searchParams.set("fakemic", "1");
+    history.replaceState(null, "", url.href);
+    void startTextSession(q);
+  } else {
+    addChatMessage("user", q);
+    void maybeSwitchTopic(q);
+    if (!sendTextViaSession(q)) setCaption("QUEUED…");
+  }
+}
+
+function showNewsPanel(items) {
+  if (!newsPanel || !newsList) return;
+
+  newsList.innerHTML = "";
+  newsOffset = 0;
+  newsHasMore = true;
+
+  if (!items || items.length === 0) {
+    const empty = document.createElement("div");
+    empty.className = "news-empty";
+    empty.textContent = "Không có tin tức cho chủ đề này.";
+    newsList.appendChild(empty);
+    newsLoadMore.hidden = true;
+    newsPanel.hidden = false;
+    return;
+  }
+
+  items.forEach((item, i) => newsList.appendChild(buildNewsItem(item, i)));
+  newsOffset = items.length;
+  newsHasMore = items.length >= NEWS_PAGE_SIZE;
+  newsLoadMore.hidden = !newsHasMore;
+
+  newsPanel.hidden = false;
+  setupNewsObserver();
+}
+
+function appendNewsItems(items) {
+  if (!items || items.length === 0) {
+    newsHasMore = false;
+    newsLoadMore.hidden = true;
+    return;
+  }
+  items.forEach((item) => newsList.appendChild(buildNewsItem(item, newsOffset++)));
+}
+
+async function loadMoreNews() {
+  if (newsLoading || !newsHasMore) return;
+  newsLoading = true;
+  newsLoadMoreBtn.classList.add("loading");
+  newsLoadMoreBtn.disabled = true;
+
+  // If we're on a filtered topic, "load more" just re-fetches the filtered set.
+  let items;
+  if (newsTopicQuery) {
+    items = await getFilteredNews(newsTopicQuery, NEWS_PAGE_SIZE);
+  } else {
+    const r = await getMoreNews(newsOffset, NEWS_PAGE_SIZE);
+    items = r.items;
+    newsHasMore = r.hasMore;
+    newsOffset = r.nextOffset;
+  }
+  appendNewsItems(items);
+  if (!newsTopicQuery) newsLoadMore.hidden = !newsHasMore;
+  else newsLoadMore.hidden = true; // filtered set is already complete
+
+  newsLoadMoreBtn.classList.remove("loading");
+  newsLoadMoreBtn.disabled = false;
+  newsLoading = false;
+}
+
+function setupNewsObserver() {
+  if (newsObserver) newsObserver.disconnect();
+  if (!newsSentinel || !("IntersectionObserver" in window)) return;
+  newsObserver = new IntersectionObserver((entries) => {
+    for (const entry of entries) {
+      if (entry.isIntersecting && newsHasMore && !newsLoading && !newsTopicQuery) {
+        void loadMoreNews();
+      }
+    }
+  }, { root: newsList, rootMargin: "120px" });
+  newsObserver.observe(newsSentinel);
+}
+
+// ── Topic detection & news sequence ─────────────────────────────────────
+const VI_STOPWORDS = new Set([
+  "tôi", "bạn", "anh", "chị", "cô", "chú", "bác", "ông", "bà", "nó", "họ", "ta", "minh",
+  "có", "không", "được", "là", "và", "với", "của", "cho", "trong", "ngoài", "về", "tại", "từ",
+  "để", "khi", "nếu", "như", "đó", "này", "kia", "gì", "nào", "đâu", "ai", "sao", "thế",
+  "hãy", "xin", "vui", "lòng", "giúp", "biết", "tin", "tức", "bài", "viết", "nói", "chuyện",
+  "chủ", "đề", "muốn", "hỏi", "xem", "nghe", "à", "ừ", "ok", "okay", "ồ", "nhé", "nhỉ", "ạ",
+  "đây", "nè", "một", "hai", "ba", "mấy", "các", "những", "cái", "con", "chiếc", "bản",
+  "hôm", "nay", "tới", "mới", "nhất", "kể",
+]);
+
+/** Decide if the user is continuing the current news thread (not switching). */
+function isFollowUp(text) {
+  const t = (text || "").toLowerCase();
+  // Only truly-continuation cues force a follow-up. Topic phrases like
+  // "kể về X", "tin tức X", "cho tôi biết về X" are treated as new topics.
+  if (/(ti��p|tiếp tục|nữa|thêm tin|tin này|tin đó|tin khác|còn tin|tin hot|tin nóng|tin hôm nay|tóm tắt|tóm lại|giải thích|ý nghĩa|chi tiết hơn|kể thêm)/.test(t)) {
+    return true;
+  }
+  return t.trim().split(/\s+/).length <= 3;
+}
+
+/** Detect an explicit AI / công nghệ request (route to GenK AI feed). */
+function isAITopic(text) {
+  const t = (text || "").toLowerCase();
+  return /(\bai\b|trí tuệ nhân tạo|a\.i|a i|robot|machine learning|deep learning|chatbot|generative|gen ai)/.test(t);
+}
+
+/** Extract a short keyword query from a user message (Vietnamese-aware). */
+function extractTopicQuery(text) {
+  if (isFollowUp(text)) return ""; // follow-ups never trigger a topic switch
+  const words = (text || "")
+    .toLowerCase()
+    .replace(/[^a-zà-ỹ0-9\s]/g, " ")
+    .split(/\s+/)
+    .filter(Boolean);
+  // Keep meaningful words (>=2 chars, not a stopword). Compound nouns like
+  // "bóng đá", "kinh tế", "bóng rổ" stay intact because both parts are kept.
+  const keywords = words.filter((w) => w.length >= 2 && !VI_STOPWORDS.has(w));
+  if (!keywords.length) return "";
+  return keywords.slice(0, 2).join(" ");
+}
+
+/**
+ * Called when the user sends a message. If it's a new topic, re-filter the
+ * news list to that topic and reset the image sequence. AI topics pull the
+ * GenK "AI" feed from VNEWS.
+ */
+async function maybeSwitchTopic(userText) {
+  if (isFollowUp(userText)) return false; // keep current sequence/list
+
+  // AI topic -> pull GenK AI feed from VNEWS.
+  if (isAITopic(userText)) {
+    const aiItems = await getVnewsAIFeed(NEWS_PAGE_SIZE);
+    if (aiItems.length) {
+      newsTopicQuery = "ai";
+      preFetchedNews = aiItems;
+      newsSeq = aiItems.slice();
+      newsSeqIdx = -1;
+      showNewsPanel(aiItems);
+      setCurrentNews(aiItems[0]);
+      return true;
+    }
+    // Fall back to general news filter on "ai".
+    const filtered = await getFilteredNews("ai", NEWS_PAGE_SIZE);
+    if (filtered.length) {
+      newsTopicQuery = "ai";
+      preFetchedNews = filtered;
+      newsSeq = filtered.slice();
+      newsSeqIdx = -1;
+      showNewsPanel(filtered);
+      setCurrentNews(filtered[0]);
+      return true;
+    }
+    return false;
+  }
+
+  const query = extractTopicQuery(userText);
+  if (!query || query === newsTopicQuery) return false;
+
+  const filtered = await getFilteredNews(query, NEWS_PAGE_SIZE);
+  if (!filtered.length) return false; // no news for this topic -> keep general
+
+  newsTopicQuery = query;
+  preFetchedNews = filtered;
+  newsSeq = filtered.slice();
+  newsSeqIdx = -1;
+  showNewsPanel(filtered);
+  setCurrentNews(filtered[0]);
+  return true;
+}
+
+// Current news item being discussed + which image to show next.
+let curNews = null;
+let curImgIdx = 0;
+
+/** Return the next image URL for the CURRENT news item, looping through its
+ *  images (image[0], image[1], ...). Falls back to a single image. */
+function nextNewsImage() {
+  if (!curNews) return null;
+  const imgs = (curNews.images && curNews.images.length)
+    ? curNews.images
+    : (curNews.image ? [curNews.image] : []);
+  if (!imgs.length) return null;
+  const url = imgs[curImgIdx % imgs.length];
+  curImgIdx += 1;
+  return url;
+}
+
+/** Set the news item currently being discussed (resets the image cursor). */
+function setCurrentNews(item) {
+  curNews = item || null;
+  curImgIdx = 0;
+}
+
+// ── Avatar list ─────────────────────────────────────────────────────────
+async function fetchAvatarList() {
+  try {
+    const resp = await fetch("/api/avatars");
+    if (resp.ok) avatarList = (await resp.json()).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;
+      opt.textContent = name.replace(/\.glb$/i, "").replace(/_/g, " ") + (name.toLowerCase() === "vuong.glb" ? " 🎙️" : "");
+      sel.appendChild(opt);
+    }
+
+    if (selectedName && avatarList.includes(selectedName)) {
+      sel.value = selectedName;
+    }
+  }
+}
+  updateAvatarThumbPreview();
+
+
+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))}%`;
+        }
+      }
+    });
+    stage.resume(); // keep the render loop running so the avatar stays visible
+  } catch (err) {
+    console.error(err);
+  }
+
+  loading.classList.add("done");
+}
+
+// ── Chat / captions ────────────────────────────────────────────────────
+function clampRect() {
+  const vw = window.innerWidth, vh = window.innerHeight;
+  const r = textChat.getBoundingClientRect();
+  let l = r.left, t = r.top;
+  l = Math.max(10, Math.min(l, vw - r.width - 10));
+  t = Math.max(10, Math.min(t, vh - r.height - 10));
+  textChat.style.left = `${l}px`;
+  textChat.style.top = `${t}px`;
+}
+
+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);
+    textChat.style.left = `${startLeft + p.x - startX}px`;
+    textChat.style.top = `${startTop + p.y - startY}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);
+}
+
+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);
+    textChat.style.width = `${Math.max(260, startW + p.x - startX)}px`;
+    textChat.style.height = `${Math.max(120, startH + p.y - startY)}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);
+}
+
+function setCaption(text, kind = "") {
+  caption.textContent = text;
+  caption.className = kind;
+}
+
+function showSubtitles(text) {
+  if (!settings.subtitles) return;
+  clearTimeout(subtitleTimer);
+  subtitles.innerHTML = text;
+  subtitles.classList.add("visible");
+
+  subtitles.querySelectorAll("a[href]").forEach((a) => {
+    a.addEventListener("click", (e) => {
+      e.preventDefault();
+      const href = a.getAttribute("href");
+      if (href) {
+        window.open(href, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
+      }
+    });
+  });
+}
+
+function fadeSubtitles(delayMs = 2600) {
+  clearTimeout(subtitleTimer);
+  subtitleTimer = window.setTimeout(() => subtitles.classList.remove("visible"), delayMs);
+}
+
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
+function addChatMessage(role, text, newsItem = null) {
+  const msg = document.createElement("div");
+  msg.className = `chat-message ${role}`;
+  msg.dataset.text = text; // store plain text for rewrite selection
+  if (newsItem) {
+    if (newsItem.image) msg.dataset.img = newsItem.image;
+    if (newsItem.link) msg.dataset.src = newsItem.link;
+  }
+
+  let displayText = text;
+  if (role === "assistant" && latestNewsUrl && latestNewsSource) {
+    const sourceEscaped = escapeRegex(latestNewsSource);
+    const patterns = [
+      new RegExp(`\\(nguồn\\s*${sourceEscaped}\\)`, 'gi'),
+      new RegExp(`\\(Nguồn\\s*${sourceEscaped}\\)`, 'gi'),
+    ];
+
+    for (const pattern of patterns) {
+      if (pattern.test(displayText)) {
+        displayText = displayText.replace(pattern, (match) =>
+          `<a href="${latestNewsUrl}" target="_blank" rel="noopener" style="color:#22d3ee;text-decoration:none;">${match}</a>`
+        );
+        break;
+      }
+    }
+  }
+
+  msg.innerHTML = displayText;
+
+  // Attach a news image card (for greeting + each subsequent answer).
+  // Render even when the image is missing: newsImageCardHtml shows a
+  // gradient fallback using the source initials, so the user always sees
+  // a clickable source card.
+  if ((role === "assistant") && newsItem) {
+    const card = document.createElement("div");
+    card.innerHTML = newsImageCardHtml(newsItem).trim();
+    const cardEl = card.firstElementChild;
+    if (cardEl) {
+      cardEl.addEventListener("click", () => {
+        if (newsItem.link) window.open(newsItem.link, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
+      });
+      msg.appendChild(cardEl);
+    }
+  }
+
+  // Click a message to toggle multi-select (avatar + user messages) for rewrite.
+  msg.addEventListener("click", () => {
+    msg.classList.toggle("selected");
+    updateRewriteButton();
+  });
+
+  chatMessages.appendChild(msg);
+  chatMessages.scrollTop = chatMessages.scrollHeight;
+
+  msg.querySelectorAll("a[href]").forEach((a) => {
+    a.addEventListener("click", (e) => {
+      e.preventDefault();
+      const href = a.getAttribute("href");
+      if (href) {
+        window.open(href, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
+      }
+    });
+  });
+
+  if (role === "assistant" && preFetchedNews.length > 0) {
+    showNewsPanel(preFetchedNews.slice(0, NEWS_PAGE_SIZE));
+  }
+}
+
+function showTextChat(show) {
+  textChat.hidden = !show;
+  if (show) chatInput.focus();
+}
+
+function sendTextViaSession(text) {
+  if (!client) return false;
+  const st = client._status;
+  if (st !== "connected" && st !== "ai-speaking" && st !== "processing" && st !== "user-speaking") {
+    return false;
+  }
+  setCaption("SENDING…");
+  client.sendUserText(text);
+  client.requestResponse();
+  return true;
+}
+
+function sendTextMessage() {
+  const text = chatInput.value.trim();
+  if (!text) return;
+
+  addChatMessage("user", text);
+  chatInput.value = "";
+
+  // New topic? re-filter the news list and reset the image sequence.
+  if (client && sessionInProgress) {
+    void maybeSwitchTopic(text);
+  }
+
+  if (!client || !sessionInProgress) {
+    const url = new URL(location.href);
+    url.searchParams.set("fakemic", "1");
+    history.replaceState(null, "", url.href);
+    void startTextSession(text);
+    return;
+  }
+
+  if (!sendTextViaSession(text)) {
+    setCaption("QUEUED…");
+  }
+}
+
+if (newsCloseBtn) {
+  newsCloseBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    newsPanel.hidden = true;
+  });
+}
+
+if (newsToggleBtn) {
+  newsToggleBtn.addEventListener("click", () => {
+    newsPanel.hidden = !newsPanel.hidden;
+  });
+}
+
+if (newsLoadMoreBtn) {
+  newsLoadMoreBtn.addEventListener("click", () => void loadMoreNews());
+}
+
+if (chatCloseBtn) {
+  chatCloseBtn.addEventListener("click", (e) => {
+    e.stopPropagation();
+    textMode = false;
+    showTextChat(false);
+    textModeBtn.classList.remove("active");
+  });
+}
+
+// ── VNEWS control panel (created dynamically, no index.html change) ─────
+let vnewsPanel, vnewsConnectBtn, vnewsStatus, rewriteBtn, vnewsCloseBtn, vnewsToggleBtn;
+
+function buildVnewsPanel() {
+  vnewsPanel = document.createElement("div");
+  vnewsPanel.id = "vnews-panel";
+  vnewsPanel.hidden = true;
+
+  const header = document.createElement("div");
+  header.id = "vnews-header";
+  const title = document.createElement("span");
+  title.id = "vnews-title";
+  title.textContent = "VNEWS";
+  vnewsCloseBtn = document.createElement("button");
+  vnewsCloseBtn.id = "vnews-close-btn";
+  vnewsCloseBtn.className = "icon-btn small";
+  vnewsCloseBtn.textContent = "✕";
+  vnewsCloseBtn.addEventListener("click", (e) => { e.stopPropagation(); vnewsPanel.hidden = true; });
+  header.appendChild(title);
+  header.appendChild(vnewsCloseBtn);
+
+  vnewsConnectBtn = document.createElement("button");
+  vnewsConnectBtn.id = "vnews-connect-btn";
+  vnewsConnectBtn.className = "vnews-btn";
+  vnewsConnectBtn.textContent = "🔗 Kết nối VNEWS";
+  vnewsConnectBtn.addEventListener("click", () => void connectVnews());
+
+  vnewsStatus = document.createElement("div");
+  vnewsStatus.id = "vnews-status";
+  vnewsStatus.textContent = "Chưa kết nối";
+
+  rewriteBtn = document.createElement("button");
+  rewriteBtn.id = "vnews-rewrite-btn";
+  rewriteBtn.className = "vnews-btn";
+  rewriteBtn.textContent = "📝 Đăng bài rewrite";
+  rewriteBtn.disabled = true;
+  rewriteBtn.hidden = true;
+  rewriteBtn.addEventListener("click", () => void doRewriteSelected());
+
+  vnewsPanel.appendChild(header);
+  vnewsPanel.appendChild(vnewsConnectBtn);
+  vnewsPanel.appendChild(vnewsStatus);
+  vnewsPanel.appendChild(rewriteBtn);
+  document.body.appendChild(vnewsPanel);
+
+  // A small toggle button on the top bar.
+  vnewsToggleBtn = document.createElement("button");
+  vnewsToggleBtn.id = "vnews-toggle-btn";
+  vnewsToggleBtn.className = "icon-btn";
+  vnewsToggleBtn.title = "VNEWS";
+  vnewsToggleBtn.textContent = "📰";
+  vnewsToggleBtn.addEventListener("click", () => { vnewsPanel.hidden = !vnewsPanel.hidden; });
+  const topbar = document.querySelector("#topbar");
+  if (topbar) topbar.appendChild(vnewsToggleBtn);
+
+  makeVnewsDraggable();
+}
+
+async function connectVnews() {
+  vnewsConnectBtn.disabled = true;
+  vnewsConnectBtn.textContent = "⏳ Đang kết nối…";
+  vnewsStatus.textContent = "Đang tải dữ liệu VNEWS…";
+  const articles = await getVnewsHomepage();
+  if (articles.length) {
+    vnewsConnected = true;
+    vnewsArticles = articles;
+    vnewsStatus.textContent = `✅ Đã kết nối · ${articles.length} bài`;
+    vnewsConnectBtn.textContent = "✅ VNEWS đã kết nối";
+    rewriteBtn.hidden = false;
+    rewriteBtn.disabled = true; // enabled when a message is selected
+    updateRewriteButton();
+    // Refresh the avatar's instructions so it can answer from VNEWS.
+    if (client) client.updateSession({ instructions: effectiveInstructions(preFetchedNews) });
+  } else {
+    vnewsStatus.textContent = "❌ Không thể kết nối VNEWS";
+    vnewsConnectBtn.disabled = false;
+    vnewsConnectBtn.textContent = "🔗 Kết nối VNEWS";
+  }
+}
+
+function updateRewriteButton() {
+  const selected = chatMessages.querySelectorAll(".chat-message.selected");
+  let hasText = false;
+  selected.forEach((m) => { if ((m.dataset.text || "").trim().length > 0) hasText = true; });
+  // Caption hint when connected and nothing selected yet.
+  if (vnewsConnected && selected.length === 0) {
+    setCaption("CHỌN 1 HAY NHIỀU TIN NHẮN ĐỂ ĐĂNG VNEWS", "live");
+  }
+  rewriteBtn.disabled = !vnewsConnected || selected.length === 0 || !hasText;
+}
+
+/** Rewrite the selected chat content into a VNEWS wall post. */
+async function doRewriteSelected() {
+  const selected = [...chatMessages.querySelectorAll(".chat-message.selected")];
+  if (selected.length === 0) { setCaption("CHỌN TIN NHẮN ĐỂ REWRITE", "error"); return; }
+  // Combine ALL selected messages (avatar + user) into one post.
+  const context = selected
+    .map((m) => (m.dataset.text || "").trim())
+    .filter((t) => t.length > 0)
+    .join("\n\n");
+  if (context.length < 20) { setCaption("TIN NHẮN QUÁ NGẮN", "error"); return; }
+  // Prefer the original source URL of a news item so VNEWS can pull its image.
+  let srcUrl = "";
+  for (const m of selected) { if (m.dataset.src) { srcUrl = m.dataset.src; break; } }
+
+  rewriteBtn.disabled = true;
+  rewriteBtn.textContent = "⏳ AI đang xào nấu bài viết…";
+  let title = "";
+  let article = context;
+  try {
+    const sresp = await fetch("/api/summarize", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ text: context }),
+    });
+    if (sresp.ok) {
+      const sdata = await sresp.json();
+      if (sdata && sdata.body) { article = sdata.body; title = sdata.title || ""; }
+    }
+  } catch (e) { /* fall back to raw context */ }
+
+  rewriteBtn.textContent = "⏳ Đăng…";
+  try {
+    // Resolve a REAL hero image from the source article (VNEWS scrapes og:image).
+    let heroImage = srcUrl; // fallback: the article URL itself
+    if (srcUrl) {
+      try {
+        const artResp = await fetch(`${VNEWS_BASE}/api/article?url=${encodeURIComponent(srcUrl)}`, { headers: { "Accept": "application/json" } });
+        if (artResp.ok) {
+          const art = await artResp.json();
+          if (art && art.og_image) heroImage = art.og_image;
+        }
+      } catch (_) { /* keep fallback */ }
+    }
+    // Publish the AI-composed article directly (not just re-split).
+    const payload = { body: article };
+    if (title) payload.title = title;
+    if (heroImage) payload.image = heroImage;
+    if (srcUrl) payload.url = srcUrl;
+    const resp = await fetch(`${VNEWS_BASE}/api/publish`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+    });
+    const data = await resp.json();
+    if (data && data.post) {
+      const shown = (title ? `**${title}**\n\n` : "") + article;
+      addChatMessage("assistant", `✅ Đã đăng bài AI tổng hợp (${selected.length} tin nhắn) lên VNEWS:\n${shown}`);
+      setCaption("ĐÃ ĐĂNG LÊN VNEWS", "live");
+    } else {
+      addChatMessage("assistant", `⚠️ VNEWS: ${data.error || "không đăng được bài"}.`);
+    }
+  } catch (e) {
+    addChatMessage("assistant", "⚠️ Lỗi khi kết nối VNEWS để đăng bài.");
+  }
+  rewriteBtn.textContent = "📝 Đăng bài rewrite";
+  // Clear selection after posting.
+  selected.forEach((m) => m.classList.remove("selected"));
+  updateRewriteButton();
+}
+
+function makeVnewsDraggable() {
+  let dragging = false, startX, startY, startLeft, startTop;
+  const header = vnewsPanel.querySelector("#vnews-header");
+  function getPos(e) { const p = e.changedTouches ? e.changedTouches[0] : e; return { x: p.clientX, y: p.clientY }; }
+  header.addEventListener("mousedown", (e) => {
+    if (e.target.closest("#vnews-close-btn")) return;
+    dragging = true;
+    const rect = vnewsPanel.getBoundingClientRect();
+    startX = e.clientX; startY = e.clientY;
+    startLeft = rect.left; startTop = rect.top;
+    vnewsPanel.classList.add("dragging");
+    e.preventDefault();
+  });
+  document.addEventListener("mousemove", (e) => {
+    if (!dragging) return;
+    const vw = window.innerWidth, vh = window.innerHeight;
+    const w = vnewsPanel.offsetWidth, h = vnewsPanel.offsetHeight;
+    const l = Math.max(10, Math.min(startLeft + e.clientX - startX, vw - w - 10));
+    const t = Math.max(10, Math.min(startTop + e.clientY - startY, vh - h - 10));
+    vnewsPanel.style.left = `${l}px`; vnewsPanel.style.top = `${t}px`;
+    vnewsPanel.style.right = "auto"; vnewsPanel.style.bottom = "auto";
+  });
+  document.addEventListener("mouseup", () => { dragging = false; vnewsPanel.classList.remove("dragging"); });
+}
+
+// ── Button logic ────────────────────────────────────────────────────────
+let mainAction = "start";
+
+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;
+}
+
+const CAPTIONS = {
+  idle: "TAP TO TALK",
+  "creating-session": "REQUESTING A SLOT…",
+  queued: "WAITING IN LINE…",
+  "your-turn": "YOUR TURN, TAP TO JOIN",
+  connecting: "CONNECTING…",
+  connected: "GO AHEAD, I'M LISTENING",
+  "user-speaking": "LISTENING",
+  processing: "THINKING…",
+  "ai-speaking": "SPEAKING",
+  closed: "TAP TO TALK",
+  error: "SOMETHING BROKE, TAP TO RETRY",
+};
+
+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;
+  }
+
+  if (status === "user-speaking") {
+    subtitles.classList.remove("visible");
+    showTextChat(textMode);
+  }
+}
+
+// ── Tool runner ─────────────────────────────────────────────────────────
+function runTool(name, argsJson, callId) {
+  if (!client) return;
+
+  let args = {};
+  try { args = JSON.parse(argsJson || "{}"); } catch {}
+
+  if (name === "get_vnews_news") {
+    const query = (args.query || "").trim();
+    let articles;
+    if (vnewsConnected) articles = searchVnews(query, 8);
+    else articles = []; // not connected yet
+    const out = vnewsLinksAsHtml(articles);
+    client.sendToolOutput(callId, `Kết quả từ VNEWS${query ? ` cho "${query}"` : " (mới nhất)"}:\n${out}`);
+    client.requestResponse();
+    return;
+  }
+
+  if (name === "get_current_datetime") {
+    const now = new Date();
+    const dateStr = formatVietnameseDate(now);
+    const timeStr = formatVietnameseTime(now);
+    client.sendToolOutput(callId, `Hôm nay là ${dateStr}. Thời gian hiện tại là ${timeStr}.`);
+    client.requestResponse();
+    return;
+  }
+
+  if (name === "search_wikipedia") {
+    const query = args.query || "";
+    if (!query) {
+      client.sendToolOutput(callId, `No query.`);
+      client.requestResponse();
+      return;
+    }
+
+    fetch(`/api/wiki/summary?title=${encodeURIComponent(query.replace(/\s+/g, "_"))}`)
+      .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(sd => {
+            if (!sd.results?.length) {
+              client.sendToolOutput(callId, `No Wikipedia results for "${query}".`);
+              client.requestResponse();
+              return;
+            }
+            fetch(`/api/wiki/summary?title=${encodeURIComponent(sd.results[0].title)}`)
+              .then(r => r.json())
+              .then(sum => {
+                client.sendToolOutput(callId, sum.extract ? `From Wikipedia (${sum.title}): ${sum.extract}\nSource: ${sum.url}` : `Wikipedia: ${sd.results.slice(0, 3).map(r => `${r.title}: ${r.snippet}`).join("\n")}`);
+                client.requestResponse();
+              });
+          });
+      })
+      .catch(() => {
+        client.sendToolOutput(callId, `Wikipedia search failed.`);
+        client.requestResponse();
+      });
+    return;
+  }
+
+  if (name === "search_web") {
+    const query = args.query || "";
+    if (!query) {
+      client.sendToolOutput(callId, `No query.`);
+      client.requestResponse();
+      return;
+    }
+
+    fetch(`/api/web/search?q=${encodeURIComponent(query)}`)
+      .then(r => r.json())
+      .then(data => {
+        if (!data.results?.length) {
+          client.sendToolOutput(callId, `No web results for "${query}".`);
+          client.requestResponse();
+          return;
+        }
+        client.sendToolOutput(callId, `Web 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, `Web search failed.`);
+        client.requestResponse();
+      });
+    return;
+  }
+
+  const result = stage.runTool(name, args) ?? `Unknown tool: ${name}`;
+  client.sendToolOutput(callId, result);
+  client.requestResponse();
+}
+
+async function connectSession(c) {
+  try {
+    await c.connect();
+    return c;
+  } catch (err) {
+    const code = err?.code;
+    if (code === "limit") {
+      setCaption("DAILY LIMIT REACHED, TRY AGAIN TOMORROW", "error");
+    } else if (code === "queue-full") {
+      setCaption("ALL SEATS TAKEN, TRY AGAIN", "error");
+    } else if (code === "join-expired") {
+      setCaption("SPOT EXPIRED, TAP TO RETRY", "error");
+    } else if (code !== "aborted") {
+      console.error(err);
+      setCaption("COULD NOT CONNECT, TAP TO RETRY", "error");
+    }
+    await endSession(true);
+    return null;
+  }
+}
+
+async function startVoiceSession() {
+  if (sessionInProgress) return;
+  sessionInProgress = true;
+
+  await stage.resume();
+
+  let micStream;
+  if (new URLSearchParams(location.search).has("fakemic")) {
+    const ctx = stage.audioCtx;
+    micStream = ctx.createMediaStreamDestination().stream;
+  } else {
+    try {
+      micStream = await navigator.mediaDevices.getUserMedia({
+        audio: {
+          echoCancellation: true,
+          noiseSuppression: true,
+          autoGainControl: true
+        }
+      });
+    } catch {
+      setCaption("MIC BLOCKED", "error");
+      sessionInProgress = false;
+      return;
+    }
+  }
+
+  const audioCtx = stage.audioCtx;
+  const voiceSink = stage.voiceSink;
+  if (!audioCtx || !voiceSink) {
+    sessionInProgress = false;
+    return;
+  }
+
+  const newsItems = preFetchedNews.length > 0 ? preFetchedNews : (await getHotNews());
+  if (!preFetchedNews.length) {
+    preFetchedNews = newsItems;
+  }
+
+  // Initialize the image sequence from the current news set.
+  newsSeq = preFetchedNews.slice();
+  newsSeqIdx = -1;
+  newsTopicQuery = "";
+
+  if (newsItems.length > 0) {
+    latestNewsUrl = newsItems[0].link;
+    setCurrentNews(newsItems[0]);
+    try {
+      latestNewsSource = getSourceName(new URL(newsItems[0].link).hostname);
+    } catch {
+      latestNewsSource = "VnExpress";
+    }
+  }
+
+  const c = new S2sWsRealtimeClient({
+    ...(config.lb ? { sessionUrl: "api/session" } : { directUrl: settings.directUrl }),
+    voice: settings.voice,
+    instructions: effectiveInstructions(newsItems),
+    micStream,
+    audioContext: audioCtx,
+    outputNode: voiceSink,
+    workletBaseUrl: "/worklets/",
+    tools: TOOL_DEFS,
+    _textOnly: false,
+  });
+
+  client = c;
+  _attachClientEvents(c);
+  setCaption("REQUESTING A SLOT…");
+
+  const ok = await connectSession(c);
+  if (!ok) return;
+
+  if (!autoGreetingSent) {
+    c.requestResponse();
+  }
+}
+
+async function startTextSession(initialText) {
+  if (sessionInProgress) {
+    if (client && initialText) {
+      client.sendUserText(initialText);
+      client.requestResponse();
+    }
+    return;
+  }
+
+  sessionInProgress = true;
+  await stage.resume();
+
+  const audioCtx = stage.audioCtx;
+  const voiceSink = stage.voiceSink;
+  if (!audioCtx || !voiceSink) {
+    sessionInProgress = false;
+    return;
+  }
+
+  const newsItems = preFetchedNews.length > 0 ? preFetchedNews : (await getHotNews());
+  if (!preFetchedNews.length) {
+    preFetchedNews = newsItems;
+  }
+
+  newsSeq = preFetchedNews.slice();
+  newsSeqIdx = -1;
+  newsTopicQuery = "";
+
+  if (newsItems.length > 0) {
+    latestNewsUrl = newsItems[0].link;
+    setCurrentNews(newsItems[0]);
+    try {
+      latestNewsSource = getSourceName(new URL(newsItems[0].link).hostname);
+    } catch {
+      latestNewsSource = "VnExpress";
+    }
+  }
+
+  const c = new S2sWsRealtimeClient({
+    ...(config.lb ? { sessionUrl: "api/session" } : { directUrl: settings.directUrl }),
+    voice: settings.voice,
+    instructions: effectiveInstructions(newsItems),
+    audioContext: audioCtx,
+    outputNode: voiceSink,
+    workletBaseUrl: "/worklets/",
+    tools: TOOL_DEFS,
+    _textOnly: true,
+  });
+
+  client = c;
+  _attachClientEvents(c);
+  textMode = true;
+  showTextChat(true);
+  textModeBtn.classList.add("active");
+
+  const ok = await connectSession(c);
+  if (!ok) return;
+
+  if (!autoGreetingSent) {
+    c.requestResponse();
+  }
+
+  if (initialText) {
+    c.sendUserText(initialText);
+    c.requestResponse();
+  }
+}
+
+function _attachClientEvents(c) {
+  c.addEventListener("status", (e) => {
+    onStatus(e.detail.status);
+  });
+
+  c.addEventListener("queue", (e) => {
+    const { position } = e.detail;
+    setCaption(position > 0 ? `#${position} IN LINE…` : "ALMOST THERE…", "live");
+  });
+
+  c.addEventListener("transcript", (e) => {
+    const { role, text } = e.detail;
+    if (role === "assistant" && text) {
+      const normalized = smartNormalize(text);
+      showSubtitles(normalized);
+      // Attach the next image of the CURRENT news item (loops through its images).
+      const img = nextNewsImage();
+      const newsItem = curNews ? { ...curNews, image: img || curNews.image } : null;
+      addChatMessage("assistant", normalized, newsItem);
+    }
+  });
+
+  c.addEventListener("response-finished", () => {
+    autoGreetingSent = true;
+    fadeSubtitles();
+    if (preFetchedNews.length > 0) {
+      showNewsPanel(preFetchedNews.slice(0, NEWS_PAGE_SIZE));
+    }
+    _topicTagsRendered = false;
+    try { void renderTopicTags(); } catch (e) { console.warn("[topic] render:", e); }
+  });
+
+  c.addEventListener("toolcall", (e) => {
+    const { name, arguments: args, callId } = e.detail;
+    runTool(name, args, callId);
+  });
+
+  c.addEventListener("server-error", (e) => {
+    console.warn("server error:", e.detail.error);
+  });
+
+  c.addEventListener("error", () => {
+    void endSession();
+  });
+}
+
+async function endSession(silent = false) {
+  const c = client;
+  client = null;
+  sessionInProgress = false;
+  autoGreetingSent = false;
+
+  if (c) {
+    if (c.options.micStream) {
+      for (const track of c.options.micStream?.getTracks() ?? []) {
+        track.stop();
+      }
+    }
+    await c.close().catch(() => {});
+  }
+
+  stage.setConversationState("idle");
+  subtitles.classList.remove("visible");
+
+  if (newsPanel) {
+    newsPanel.hidden = true;
+  }
+
+  if (!silent) {
+    setCaption(CAPTIONS.idle);
+    setMainButton("start", "Start talking");
+    // Show today's real trending topics immediately (also re-shown after greeting).
+    try { void renderTopicTags(); } catch (e) { console.warn("[topic] startWithSelection:", e); }
+  }
+}
+
+// ── UI events ───────────────────────────────────────────────────────────
+mainBtn.addEventListener("click", () => {
+  if (mainAction === "start") {
+    if (sessionInProgress) return;
+    if (new URLSearchParams(location.search).has("fakemic")) {
+      void startTextSession();
+    } else {
+      void startVoiceSession();
+    }
+  } else if (mainAction === "join") {
+    stage.resume();
+    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");
+});
+
+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;
+  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
+  };
+
+  if (settings.avatar !== "vuong.glb") {
+    autoGreetingSent = false;
+  }
+
+  saveSettings();
+  chatAvatarSelect.value = settings.avatar;
+
+  if (!settings.subtitles) {
+    subtitles.classList.remove("visible");
+  }
+
+  client?.updateSession({
+    voice: settings.voice,
+    instructions: effectiveInstructions(preFetchedNews)
+  });
+});
+
+window.addEventListener("beforeunload", () => {
+  client?.close();
+});
+
+// ── Boot ────────────────────────────────────────────────────────────────
+async function boot() {
+  // 1) Reveal the picker IMMEDIATELY — first screen, never a loader.
+  showPicker();
+
+  // 2) Voice <select> options.
+  for (const v of VOICES) {
+    const o = document.createElement("option");
+    o.value = v;
+    o.textContent = v.replaceAll("_", " ");
+    inputVoice.append(o);
+  }
+  inputVoice.value = settings.voice;
+
+  // 3) Best-effort setup; isolate each step so a failure can NEVER hide the picker.
+  try {
+    const resp = await fetch("api/config");
+    if (resp.ok) config = { ...config, ...(await resp.json()) };
+  } catch (e) { console.warn("[boot] config:", e); }
+  directUrlRow.hidden = !config.allowDirect;
+
+  // Keep using the fake microphone (no real getUserMedia) so we never hit
+  // the "MIC BLOCKED" permission prompt. Restored from the original boot().
+  try {
+    const url = new URL(location.href);
+    url.searchParams.set("fakemic", "1");
+    history.replaceState(null, "", url.href);
+  } catch (e) { console.warn("[boot] fakemic:", e); }
+
+  try { await fetchAvatarList(); } catch (e) { console.warn("[boot] avatars:", e); }
+  try { populateAvatarSelects(settings.avatar); } catch (e) { console.warn("[boot] populate:", e); }
+  try {
+    makeDraggable(); makeResizable(); makeNewsDraggable(); makeNewsResizable(); buildVnewsPanel();
+  } catch (e) { console.warn("[boot] ui:", e); }
+
+  // 4) Fill the picker (avatar cards + voice chips).
+  try { buildPicker(); } catch (e) { console.warn("[boot] buildPicker:", e); }
+  try { void renderTopicTags(); } catch (e) { console.warn("[boot] topics:", e); }
+  try { updateAvatarThumbPreview(); } catch (e) { console.warn("[boot] thumb:", e); }
+}
+
+// ── News box draggable + resizable (mirrors the chat box) ────────────────
+function makeNewsDraggable() {
+  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("#news-header") === null) return; // only drag from header
+    if (e.target.closest("#news-close-btn")) return;
+    const p = getPos(e);
+    dragging = true;
+    const rect = newsPanel.getBoundingClientRect();
+    startX = p.x;
+    startY = p.y;
+    startLeft = rect.left;
+    startTop = rect.top;
+    newsPanel.classList.add("dragging");
+    e.preventDefault();
+  }
+
+  function onMove(e) {
+    if (!dragging) return;
+    const p = getPos(e);
+    const vw = window.innerWidth, vh = window.innerHeight;
+    const w = newsPanel.offsetWidth, h = newsPanel.offsetHeight;
+    let l = Math.max(10, Math.min(startLeft + p.x - startX, vw - w - 10));
+    let t = Math.max(10, Math.min(startTop + p.y - startY, vh - h - 10));
+    newsPanel.style.left = `${l}px`;
+    newsPanel.style.top = `${t}px`;
+    newsPanel.style.right = "auto";
+    newsPanel.style.bottom = "auto";
+    e.preventDefault();
+  }
+
+  function onEnd() {
+    if (!dragging) return;
+    dragging = false;
+    newsPanel.classList.remove("dragging");
+  }
+
+  const header = $("#news-header");
+  header.addEventListener("mousedown", onStart);
+  document.addEventListener("mousemove", onMove);
+  document.addEventListener("mouseup", onEnd);
+  header.addEventListener("touchstart", onStart, { passive: false });
+  document.addEventListener("touchmove", onMove, { passive: false });
+  document.addEventListener("touchend", onEnd);
+}
+
+function makeNewsResizable() {
+  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 = newsPanel.getBoundingClientRect();
+    const p = getPos(e);
+    startX = p.x;
+    startY = p.y;
+    startW = rect.width;
+    startH = rect.height;
+    newsPanel.classList.add("resizing");
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  function onMove(e) {
+    if (!resizing) return;
+    const p = getPos(e);
+    newsPanel.style.width = `${Math.max(300, startW + p.x - startX)}px`;
+    newsPanel.style.height = `${Math.max(180, startH + p.y - startY)}px`;
+    newsPanel.style.right = "auto";
+    newsPanel.style.bottom = "auto";
+    e.preventDefault();
+  }
+
+  function onEnd() {
+    if (!resizing) return;
+    resizing = false;
+    newsPanel.classList.remove("resizing");
+  }
+
+  newsResizeHandle.addEventListener("mousedown", onStart);
+  document.addEventListener("mousemove", onMove);
+  document.addEventListener("mouseup", onEnd);
+  newsResizeHandle.addEventListener("touchstart", onStart, { passive: false });
+  document.addEventListener("touchmove", onMove, { passive: false });
+  document.addEventListener("touchend", onEnd);
+}
+
+void boot();
+
+// ── Capture PNG (snapshot of the 3D avatar) ──────────────
+const THUMB_KEY = "avatar.thumbs";
+const avatarThumbPreview = document.getElementById("avatar-thumb-preview");
+function loadThumbs() {
+  try { return JSON.parse(localStorage.getItem(THUMB_KEY) || "{}"); }
+  catch { return {}; }
+}
+function saveThumbs(map) { localStorage.setItem(THUMB_KEY, JSON.stringify(map)); }
+function serverThumbUrl(name) {
+  if (!name) return "";
+  return `/avatars/${name}.thumb.png`;
+}
+// Show the avatar's representative image: prefer the freshly-captured local
+// copy (instant), fall back to the server-stored thumbnail (uploaded earlier).
+function updateAvatarThumbPreview() {
+  if (!avatarThumbPreview) return;
+  const name = chatAvatarSelect.value || settings.avatar || "";
+  const map = loadThumbs();
+  const local = map[name] || "";
+  if (local) {
+    avatarThumbPreview.src = local;
+    avatarThumbPreview.hidden = false;
+    avatarThumbPreview.onerror = () => {
+      const srv = serverThumbUrl(name);
+      if (srv && avatarThumbPreview.src !== srv) {
+        avatarThumbPreview.src = srv;
+        avatarThumbPreview.onerror = () => {
+          const localBackup = map[name + "._local"];
+          if (localBackup && avatarThumbPreview.src !== localBackup) {
+            avatarThumbPreview.src = localBackup;
+            avatarThumbPreview.onerror = null;
+          } else {
+            avatarThumbPreview.hidden = true;
+          }
+        };
+      } else {
+        avatarThumbPreview.hidden = true;
+      }
+    };
+    return;
+  }
+  const srv = serverThumbUrl(name);
+  if (srv) {
+    avatarThumbPreview.onerror = () => { avatarThumbPreview.hidden = true; };
+    avatarThumbPreview.src = srv;
+    avatarThumbPreview.hidden = false;
+    return;
+  }
+  avatarThumbPreview.hidden = true;
+}
+if (chatAvatarSelect) chatAvatarSelect.addEventListener("change", updateAvatarThumbPreview);
+
+const snapBtn = document.getElementById("snap-btn");
+const snapDialog = document.getElementById("snap-dialog");
+const snapPreview = document.getElementById("snap-preview");
+const snapDownload = document.getElementById("snap-download");
+const snapSetAvatar = document.getElementById("snap-setavatar");
+let _latestSnap = null;
+if (snapBtn) {
+  snapBtn.addEventListener("click", () => {
+    if (!stage.head) { setCaption("AVATAR CHUA SAN SANG", "error"); return; }
+    const url = stage.capturePNG();
+    if (!url) { setCaption("KHONG CHUP DUOC ANH", "error"); return; }
+    _latestSnap = url;
+    snapPreview.src = url;
+    if (snapDialog.showModal) snapDialog.showModal();
+    else snapDialog.setAttribute("open", "");
+  });
+}
+if (snapDownload) {
+  snapDownload.addEventListener("click", () => {
+    if (!_latestSnap) return;
+    const name = (settings.avatar || "avatar").replace(/\.glb$/i, "");
+    const a = document.createElement("a");
+    a.href = _latestSnap; a.download = name + ".png";
+    document.body.appendChild(a); a.click(); a.remove();
+  });
+}
+if (snapSetAvatar) {
+  snapSetAvatar.addEventListener("click", async () => {
+    if (!_latestSnap) return;
+    const key = settings.avatar || "";
+    if (!key) { setCaption("CHON 1 AVATAR TRUOC", "error"); return; }
+    snapSetAvatar.disabled = true;
+    snapSetAvatar.textContent = "⏳ Đang lưu…";
+    try {
+      const resp = await fetch("/api/avatar-thumbnail", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ avatar: key, dataUrl: _latestSnap }),
+      });
+      const data = await resp.json().catch(() => ({}));
+      if (!resp.ok || !data.ok) throw new Error(data.error || "upload failed");
+      // Cache locally too (works offline + instant preview)
+      const map = loadThumbs();
+      map[key] = _latestSnap;
+      saveThumbs(map);
+      // Use the server URL for the preview now that it is persisted.
+      // Keep the local data URL in the map as a fallback if server URL fails.
+      if (data.url) {
+        avatarThumbPreview.src = data.url;
+        avatarThumbPreview.hidden = false;
+        avatarThumbPreview.onerror = () => {
+          // Fallback to local data URL if server URL fails.
+          avatarThumbPreview.src = _latestSnap;
+          avatarThumbPreview.onerror = null;
+        };
+        // Store server URL but keep local as fallback in a separate key.
+        map[key] = data.url;
+        map[key + "._local"] = _latestSnap;
+        saveThumbs(map);
+      } else {
+        avatarThumbPreview.src = _latestSnap;
+        avatarThumbPreview.hidden = false;
+      }
+      // Force refresh all avatar previews (picker + chat select + settings select)
+      try { buildPicker(); } catch (e) { console.warn("[snap] buildPicker:", e); }
+      try { updateAvatarThumbPreview(); } catch (e) { console.warn("[snap] updateThumb:", e); }
+      setCaption("ĐÃ LƯU ẢNH ĐẠI DIỆN LÊN SPACE", "live");
+    } catch (e) {
+      console.warn(e);
+      setCaption("LƯU THẤT BẠI: " + (e.message || e), "error");
+    } finally {
+      snapSetAvatar.disabled = false;
+      snapSetAvatar.textContent = "🖼️ Đặt làm ảnh đại diện";
+    }
+  });
+}
+
+// ── Onboarding picker (choose character + voice BEFORE loading avatar) ──
+function buildPicker() {
+  const grid = document.getElementById("picker-avatars");
+  const voices = document.getElementById("picker-voices");
+  if (!grid || !voices) return;
+  grid.innerHTML = "";
+  voices.innerHTML = "";
+  const selAvatar = settings.avatar || "";
+  const list = avatarList.length ? avatarList : ["vuong.glb"];
+  for (const name of list) {
+    const card = document.createElement("button");
+    card.type = "button";
+    card.className = "avatar-card" + (name === selAvatar ? " selected" : "");
+    card.dataset.avatar = name;
+    const label = name.replace(/\.glb$/i, "").replace(/_/g, " ");
+    const thumb = document.createElement("div");
+    thumb.className = "avatar-card-thumb";
+    const _map = loadThumbs();
+    const _img = document.createElement("img");
+    _img.alt = label;
+    _img.loading = "lazy";
+    _img.addEventListener("error", () => {
+      _img.remove();
+      thumb.textContent = label.slice(0, 1).toUpperCase();
+    });
+    const _srv = serverThumbUrl(name);
+    // Prefer local cached data URL if available (instant), otherwise server URL.
+    // The onerror handler below will fall back to the server URL if local fails,
+    // and to a local backup if server URL also fails.
+    _img.src = _map[name] || _srv;
+    _img.addEventListener("error", () => {
+      // If local failed and we haven't tried server yet, try server.
+      if (_map[name] && _srv && _img.src !== _srv) {
+        _img.src = _srv;
+      } else if (_map[name + "._local"] && _img.src !== _map[name + "._local"]) {
+        // Server URL failed, try local backup.
+        _img.src = _map[name + "._local"];
+      } else {
+        _img.remove();
+        thumb.textContent = label.slice(0, 1).toUpperCase();
+      }
+    });
+    thumb.appendChild(_img);
+    const span = document.createElement("span");
+    span.className = "avatar-card-name";
+    span.textContent = label + (name.toLowerCase() === "vuong.glb" ? " 🎙️" : "");
+    card.appendChild(thumb);
+    card.appendChild(span);
+    card.addEventListener("click", () => {
+      grid.querySelectorAll(".avatar-card").forEach((c) => c.classList.remove("selected"));
+      card.classList.add("selected");
+      settings.avatar = name;
+      saveSettings();
+    });
+    grid.appendChild(card);
+  }
+  for (const v of VOICES) {
+    const chip = document.createElement("button");
+    chip.type = "button";
+    chip.className = "voice-chip" + (v === settings.voice ? " selected" : "");
+    chip.dataset.voice = v;
+    chip.textContent = v.replaceAll("_", " ");
+    chip.addEventListener("click", () => {
+      voices.querySelectorAll(".voice-chip").forEach((c) => c.classList.remove("selected"));
+      chip.classList.add("selected");
+      settings.voice = v;
+      saveSettings();
+    });
+    voices.appendChild(chip);
+  }
+}
+function showPicker() {
+  const p = document.getElementById("picker");
+  if (p) p.hidden = false;
+}
+function hidePicker() {
+  const p = document.getElementById("picker");
+  if (p) p.hidden = true;
+}
+async function startWithSelection() {
+  hidePicker();
+  setCaption("Chờ tôi một lát! Tôi sẽ đến với bạn ngay!");
+  setMainButton("busy", "Loading…");
+  loading.classList.remove("done");
+  loading.classList.add("active");
+  loading.textContent = "Loading avatar...";
+
+  // Show the start progress bar with the friendly message.
+  const startProgress = document.getElementById("start-progress");
+  const startProgressFill = startProgress ? startProgress.querySelector(".start-progress__fill") : null;
+  if (startProgress) startProgress.hidden = false;
+  if (startProgressFill) startProgressFill.style.width = "0%";
+
+  let progress = 0;
+  const progressInterval = setInterval(() => {
+    progress = Math.min(progress + 5, 95);
+    if (startProgressFill) startProgressFill.style.width = progress + "%";
+  }, 150);
+
+  const newsPromise = (settings.avatar === "vuong.glb" || !settings.avatar) ? getHotNews().catch(() => []) : Promise.resolve([]);
+  let ok = false;
+  try {
+    const initPromise = stage.init({
+      avatarUrl: settings.avatar ? `/avatars/${settings.avatar}` : undefined,
+      onprogress: (ev) => {
+        if (ev.lengthComputable) {
+          const pct = Math.min(100, Math.round((ev.loaded / ev.total) * 100));
+          loading.textContent = `Loading avatar ${pct}%`;
+          if (startProgressFill) startProgressFill.style.width = pct + "%";
+          progress = pct;
+        }
+      }
+    });
+    const timeout = new Promise((_, rej) => setTimeout(() => rej(new Error("init timeout")), 25000));
+    await Promise.race([initPromise, timeout]);
+    stage.resume(); // start render loop so the avatar is actually visible (not a single black frame)
+    ok = true;
+  } catch (err) {
+    console.error("[startWithSelection] init failed/timeout:", err);
+  } finally {
+    clearInterval(progressInterval);
+    if (startProgressFill) startProgressFill.style.width = "100%";
+    // Hide the start progress bar after a brief moment showing 100%
+    setTimeout(() => {
+      if (startProgress) startProgress.hidden = true;
+      if (startProgressFill) startProgressFill.style.width = "0%";
+    }, 500);
+    try { preFetchedNews = await newsPromise; } catch { preFetchedNews = []; }
+    newsSeq = preFetchedNews.slice();
+    newsSeqIdx = -1;
+    newsTopicQuery = "";
+    loading.classList.remove("active");
+    if (ok) setCaption(CAPTIONS.idle);
+    else setCaption("AVATAR KHÔNG HIỂN THỊ — THỬ CHỌN AVATAR KHÁC", "error");
+    setMainButton("start", "Start talking");
+  }
+}
+const pickerStartBtn = document.getElementById("picker-start");
+if (pickerStartBtn) pickerStartBtn.addEventListener("click", () => void startWithSelection());

index.html

@@ -11,19 +11,6 @@
       rel="stylesheet"
     />
     <link rel="stylesheet" href="./src/style.css" />
-    <!--
-      CRITICAL: Import map for bare module specifiers used in src/avatar.js and src/app.js.
-      Without this, browser fails to resolve "three", "@met4citizen/talkinghead", etc.
-    -->
-    <script type="importmap">
-    {
-      "imports": {
-        "three": "https://esm.sh/three@0.173.0",
-        "three/": "https://esm.sh/three@0.173.0/",
-        "@met4citizen/talkinghead": "https://esm.sh/@met4citizen/talkinghead@0.6.26"
-      }
-    }
-    </script>
   </head>
   <body>
     <main id="app">
@@ -68,14 +55,6 @@
         <div id="chat-messages"></div>
         <div id="chat-input-container">
           <input id="chat-input" type="text" placeholder="Type a message..." autocomplete="off" />
-          <button id="chat-mic-btn" class="icon-btn" aria-label="Switch to voice chat" title="Chuyển sang chat giọng nói" hidden>
-            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
-              <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
-              <line x1="12" y1="19" x2="12" y2="23"></line>
-              <line x1="8" y1="23" x2="16" y2="23"></line>
-            </svg>
-          </button>
           <button id="chat-send-btn" class="icon-btn" aria-label="Send message">
             <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
               <line x1="22" y1="2" x2="11" y2="13"></line>
@@ -175,4 +154,4 @@
     </main>
     <script type="module" src="./src/app.js"></script>
   </body>
-</html>
+</html>

index.ts

@@ -21,19 +21,6 @@ async function proxy(path, req, init = {}) {
   const cookie = req.headers.get("cookie");
   if (cookie) headers.set("Cookie", cookie);
   const resp = await fetch(`${UPSTREAM}${path}`, { ...init, headers });
-  
-  // Handle non-JSON errors (429, 502, etc) from upstream
-  if (!resp.ok) {
-    const ct = resp.headers.get("content-type") || "";
-    if (ct.includes("text/html")) {
-      const body = await resp.text().catch(() => "");
-      if (resp.status === 429) {
-        return Response.json({ error: "Dịch vụ giọng nói đang quá tải, thử lại sau", state: "rate_limited" }, { status: 429 });
-      }
-      return Response.json({ error: "Speech service error", state: "unavailable" }, { status: resp.status });
-    }
-  }
-  
   const body = await resp.text();
   const out = new Response(body, { status: resp.status, headers: { "Content-Type": "application/json" } });
   const setCookies = resp.headers.getSetCookie?.() ?? (resp.headers.get("set-cookie") ? [resp.headers.get("set-cookie")] : []);
@@ -42,6 +29,8 @@ async function proxy(path, req, init = {}) {
 }
 
 function staticFile(dir, name) {
+  // Use process.cwd() for reliability in Space environments where
+  // import.meta.dir may not point to the expected directory.
   const filePath = join(process.cwd(), "public", dir, name);
   const file = Bun.file(filePath);
   return new Response(file);
@@ -121,15 +110,19 @@ function sourceNameFromUrl(feedUrl) {
 
 /** Extract the first usable image URL from an RSS <item> block. */
 function extractImage(itemXml) {
+  // 1) media:thumbnail / media:content with url=
   const media = itemXml.match(/<media:(?:thumbnail|content)[^>]*\burl=["']([^"']+)["']/i);
   if (media) return media[1];
+  // 2) <enclosure type="image/..." url="...">
   const enc = itemXml.match(/<enclosure[^>]*\btype=["']image\/[^"']*["'][^>]*>/i);
   if (enc) {
     const urlMatch = enc[0].match(/\burl=["']([^"']+)["']/i);
     if (urlMatch) return urlMatch[1];
   }
+  // 3) <image><url>...</url></image>
   const imgTag = itemXml.match(/<image>\s*<url>([\s\S]*?)<\/url>/i);
   if (imgTag) return imgTag[1].replace(/<!\[CDATA\[|\]\]>/g, "").trim();
+  // 4) any <img ... src="..."> inside description
   const imgSrc = itemXml.match(/<img[^>]*\bsrc=["']([^"']+)["']/i);
   if (imgSrc) return imgSrc[1];
   return "";
@@ -158,6 +151,7 @@ function extractDescription(itemXml) {
 }
 
 const FEEDS = [
+  // ── General Vietnamese news (existing) ──
   "https://vnexpress.net/rss/tin-moi-nhat.rss",
   "https://dantri.com.vn/trangchu.rss",
   "https://tuoitre.vn/rss/tin-moi-nhat.rss",
@@ -174,51 +168,70 @@ const FEEDS = [
   "https://www.nguoiduatin.vn/rss/home.rss",
   "https://tienphong.vn/rss/home.rss",
   "https://vov.vn/rss/home.rss",
+  // ── Expanded sources per topic ──
+  // Thể thao / World Cup / Asian Cup
   "https://vietnamnet.vn/rss/the-thao.rss",
   "https://vtc.vn/rss/the-thao.rss",
   "https://thanhnien.vn/rss/the-thao.rss",
   "https://tuoitre.vn/rss/the-thao.rss",
   "https://dantri.com.vn/the-thao.rss",
+  // Bóng đá chuyên sâu
   "https://www.bongda.com.vn/rss-bong-da.html",
   "https://bongdoanhnghia.vn/feed",
+  // Kinh tế / Tài chính
   "https://vietnamnet.vn/rss/kinh-te.rss",
   "https://cafef.vn/rss/thi-truong.rss",
   "https://vtc.vn/rss/kinh-te.rss",
   "https://thanhnien.vn/rss/kinh-te.rss",
   "https://laodong.vn/kinh-te-doanh-nghiep.rss",
+  // Công nghệ / AI
   "https://vietnamnet.vn/rss/cong-nghe.rss",
   "https://genk.vn/rss/cong-nghe.rss",
   "https://cafef.vn/rss/cong-nghe.rss",
   "https://vtc.vn/rss/cong-nghe.rss",
   "https://thanhnien.vn/rss/cong-nghe.rss",
+  // Thời sự / Chính trị
   "https://vietnamnet.vn/rss/thoi-su.rss",
   "https://vtc.vn/rss/thoi-su.rss",
   "https://thanhnien.vn/rss/thoi-su.rss",
   "https://tuoitre.vn/rss/thoi-su.rss",
+  // Giáo dục
   "https://vietnamnet.vn/rss/giao-duc.rss",
   "https://vtc.vn/rss/giao-duc.rss",
   "https://thanhnien.vn/rss/giao-duc.rss",
   "https://dantri.com.vn/giao-duc.rss",
+  // Sức khỏe
   "https://vietnamnet.vn/rss/suc-khoe.rss",
   "https://vtc.vn/rss/suc-khoe.rss",
   "https://thanhnien.vn/rss/suc-khoe.rss",
+  // Du lịch
   "https://vietnamnet.vn/rss/du-lich.rss",
   "https://vtc.vn/rss/du-lich.rss",
   "https://thanhnien.vn/rss/du-lich.rss",
+  // Ô tô
   "https://vietnamnet.vn/rss/o-to-xe-xem.rss",
   "https://vtc.vn/rss/o-to.rss",
+  // Giải trí / Âm nhạc
   "https://vietnamnet.vn/rss/giai-tri.rss",
   "https://vtc.vn/rss/giai-tri.rss",
   "https://thanhnien.vn/rss/giai-tri.rss",
+  // Pháp luật
   "https://vietnamnet.vn/rss/phap-luat.rss",
   "https://vtc.vn/rss/phap-luat.rss",
   "https://thanhnien.vn/rss/phap-luat.rss",
 ];
 
+/**
+ * Decode common HTML entities in a string to proper Unicode characters.
+ * Handles numeric entities (&#039;, &#244;) and named entities (&Ocirc;, &agrave;, &ocirc;).
+ */
 function decodeHtmlEntities(str) {
   if (!str) return "";
+  // Handle numeric entities: &#039; -> ', &#244; -> ô, etc.
   let decoded = str.replace(/&#(\d+);/g, (_, dec) => String.fromCharCode(Number(dec)));
+  // Handle hex entities: &#x27; -> ', etc.
   decoded = decoded.replace(/&#x([0-9a-fA-F]+);/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)));
+  // Handle common named entities
   const namedEntities = {
     "&Ocirc;": "Ô", "&ograve;": "ò", "&Ograve;": "Ò", "&ocirc;": "ô",
     "&agrave;": "à", "&Agrave;": "À", "&eacute;": "é", "&Eacute;": "É",
@@ -240,9 +253,19 @@ function decodeHtmlEntities(str) {
   return decoded;
 }
 
+/**
+ * Fetch hot Vietnamese news from many RSS feeds.
+ *
+ * Uses ROUND-ROBIN selection: we pull an equal number of items from each
+ * source before moving on, so no single source (e.g. VnExpress) can dominate
+ * the list. The combined result is then shuffled for extra variety. Every
+ * item carries a thumbnail image when the feed provides one.
+ */
 async function fetchHotNews() {
-  const parsed = [];
+  const parsed = []; // [{source, items:[{title,link,image}]}]
   const seenLinks = new Set();
+
+  // Fetch all feeds in parallel for speed.
   await Promise.all(
     FEEDS.map(async (feedUrl) => {
       try {
@@ -258,7 +281,7 @@ async function fetchHotNews() {
           const tm = item.match(/<title[^>]*>([\s\S]*?)<\/title>/i);
           const lm = item.match(/<link[^>]*>([\s\S]*?)<\/link>/i);
           if (!tm || !tm[1]) continue;
-          const cleanTitle = decodeHtmlEntities(tm[1].replace(/<!\[CDATA\[|\]\]>/g, "").trim());
+	        const cleanTitle = decodeHtmlEntities(tm[1].replace(/<!\[CDATA\[|\]\]>/g, "").trim());
           const cleanLink = lm ? lm[1].replace(/<!\[CDATA\[|\]\]>/g, "").trim() : "";
           if (cleanTitle && cleanTitle.length > 10 && cleanLink && !seenLinks.has(cleanLink)) {
             seenLinks.add(cleanLink);
@@ -273,10 +296,13 @@ async function fetchHotNews() {
       }
     })
   );
+
+  // Round-robin: take 1 item from each source in turn, repeat until we have
+  // enough (or sources are exhausted). This guarantees source diversity.
   const queue = parsed.map((p) => ({ source: p.source, items: p.items.slice() }));
-  const items = [];
+  const items = []; // {title, link, source, image}
   let added = true;
-  const MAX = 150;
+  const MAX = 150; // Increased to accommodate expanded feed sources
   while (added && items.length < MAX) {
     added = false;
     for (const q of queue) {
@@ -288,10 +314,13 @@ async function fetchHotNews() {
       }
     }
   }
+
+  // Final shuffle so the order is not source-clustered.
   const shuffled = items.sort(() => Math.random() - 0.5);
   return shuffled;
 }
 
+// ── In-memory news pool (refreshed periodically) for stable pagination ──
 let newsPool = [];
 let newsPoolLoadedAt = 0;
 
@@ -302,32 +331,46 @@ async function refreshNewsPool() {
 }
 
 async function getNewsPool() {
+  // Refresh if empty or older than 5 minutes.
   if (newsPool.length === 0 || Date.now() - newsPoolLoadedAt > 5 * 60 * 1000) {
     await refreshNewsPool();
   }
   return newsPool;
 }
 
+/** All known topics with their keyword mappings. */
 const ALL_TOPICS = [
+  // ── Sports (dynamic: World Cup, Asian Cup, etc.) ──
   { slug: "worldcup", label: "World Cup", keywords: ["world cup", "worldcup", "cúp thế giới", "fifa"] },
   { slug: "aseancup", label: "ASEAN Cup", keywords: ["asean cup", "aseancup", "cúp đông nam áp", "vòng loại world cup", "vòng loại cúp"] },
   { slug: "bongda", label: "Bóng đá", keywords: ["bóng đá", "bóng đá việt nam", "bóng đá ngoại hạng", "premier league", "laliga", "serie a", "bundesliga", "ligue 1", "chuyển nhượng"] },
   { slug: "thethao", label: "Thể thao", keywords: ["thể thao", "olympics", "olympic", "sea games", "asiad"] },
-  { slug: "ai", label: "AI", keywords: ["trí tuệ nhân tạo", "a.i", "machine learning", "deep learning", "chatbot", "generative ai", "gen ai", "llm", "gpt", "qwen", "kimi", "chatgpt", "gemini", "openai", "claude", "tạo ảnh", "tạo video", "ứng dụng ai", "ai tạo sinh", "thông minh nhân tạo", "mô hình ngôn ngữ", "học sâu", "học máy", "mạng nơ-ron", "neural network", "kimik3", "kimi k3", "kimi"] },
+  // ── Technology & AI ──
+  { slug: "ai", label: "AI", keywords: ["trí tuệ nhân tạo", "ai ", "a.i", "machine learning", "deep learning", "chatbot", "generative ai", "gen ai", "llm", "kimik3", "kimi k3", "kimi"] },
   { slug: "congngang", label: "Công nghệ", keywords: ["công nghệ", "số hóa", "digital", "tech", "startup", "fintech", "blockchain", "metaverse", "cloud", "edge computing"] },
+  // ── Economy & Finance ──
   { slug: "kinhte", label: "Kinh tế", keywords: ["kinh tế", "tài chính", "chứng khoán", "lạm phát", "giá vàng", "giá dầu", "giá bitcoin", "vàng", "tiền tệ", "ngân hàng"] },
+  // ── News & Politics ──
   { slug: "thoisu", label: "Thời sự", keywords: ["thời sự", "chính trị", "quan hệ", "đối ngoại", "pháp luật", "luật mới", "bỏ phiếu", "bầu cử", "bộ chính phủ", "thủ tướng"] },
+  // ── Education ──
   { slug: "giao-duc", label: "Giáo dục", keywords: ["giáo dục", "thi cử", "đại học", "trường học", "kỳ thi", "tuyển sinh", "tuyển dụng"] },
+  // ── Health ──
   { slug: "suc-khoe", label: "Sức khỏe", keywords: ["sức khỏe", "y tế", "bệnh", "bác sĩ", "bệnh viện", "tiêm chủng", "dịch bệnh", "ung thư", "tiểu đường"] },
+  // ── Travel ──
   { slug: "du-lich", label: "Du lịch", keywords: ["du lịch", "tourism", "đi du lịch", "khách sạn", "vé máy bay", "du lịch trong nước", "du lịch quốc tế"] },
+  // ── Automotive ──
   { slug: "oto", label: "Ô tô", keywords: ["ô tô", "xe máy", "xe hơi", "toyota", "mercedes", "bmw", "audi", "honda", "hyundai", "thaco", "ô tô điện"] },
+  // ── World ──
   { slug: "thegioi", label: "Thế giới", keywords: ["thế giới", "quốc tế", "mỹ", "trung quốc", "nhật bản", "hàn quốc", "châu âu", "mỹ latin"] },
+  // ── Life & Entertainment ──
   { slug: "doisong", label: "Đời sống", keywords: ["đời sống", "gia đình", "tình yêu", "kết hôn", "nuôi dạy con", "ăn uống", "ẩm thực", "làm đẹp"] },
   { slug: "giai-tri", label: "Giải trí", keywords: ["giải trí", "điện ảnh", "âm nhạc", "ca sĩ", "diễn viên", "phim", "trực tuyến", "kpop", "vpop"] },
   { slug: "am-nhac", label: "Âm nhạc", keywords: ["âm nhạc", "nhạc trẻ", "nhạc vào", "concert", "âm nhạc điện tử"] },
+  // ── Law ──
   { slug: "phap-luat", label: "Pháp luật", keywords: ["pháp luật", "tội phạm", "hình sự", "hành chính", "tai nạn", "bảo vệ quyền"] },
 ];
 
+/** Vietnamese stopwords to exclude from keyword extraction. */
 const VI_STOPWORDS = new Set([
   "và", "của", "các", "là", "được", "trong", "cho", "tại", "với", "để", "khi", "nếu", "như", "đó", "này", "kia",
   "tôi", "bạn", "anh", "chị", "cô", "chú", "bác", "ông", "bà", "nó", "họ", "ta", "chúng", "mình", "tôi",
@@ -337,21 +380,35 @@ const VI_STOPWORDS = new Set([
   "vừa", "cũng", "chỉ", "đúng", "tất", "cả", "mỗi", "khác", "mới", "cũ", "lớn", "nhỏ", "cao", "thấp",
   "vừa", "rồi", "thì", "mới", "đã", "sẽ", "đang", "được", "để", "về", "từ", "trên", "dưới", "trong",
   "ngày", "giờ", "phút", "giây", "năm", "tháng", "tuần", "giờ", "phút", "giây",
+  // Single/double letter artifacts from HTML entity stripping
   "ng", "nh", "nc", "nd", "nt", "nl", "nm", "np", "nk", "nj", "ni", "no", "nr", "ns", "nv", "nz",
   "ch", "tr", "ph", "th", "kh", "gh", "nh", "ng", "cn", "cv", "đc", "đk", "đt", "đv",
 ]);
 
+/**
+ * Extract trending topics from news pool by analyzing word frequency.
+ * Combines fixed ALL_TOPICS with real HOT keywords extracted from today's news.
+ * Returns 20 topics (10 fixed + 10 dynamic) that change every day.
+ */
 async function getTrendingTopics() {
   const pool = await getNewsPool();
+
+  // Combine all titles and descriptions into one text.
+  // Strip HTML entities first (&amp; -> &, &apos; -> ', etc.)
   const allText = pool
     .map((i) => ((i.title || "") + " " + (i.description || "")).replace(/&[a-z]+;/gi, " "))
     .join(" ")
     .toLowerCase();
+
+  // ── Extract candidate keywords (2-3 word phrases) from news text ──
+  // Split on non-alphanumeric, filter stopwords and short tokens.
   const tokens = allText
-    .replace(/[0-9]+/g, " ")
-    .replace(/[^\p{L}\s]/gu, " ")
+    .replace(/[0-9]+/g, " ") // remove pure numbers
+    .replace(/[^\p{L}\s]/gu, " ") // keep only letters (Vietnamese + Latin)
     .split(/\s+/)
     .filter((t) => t.length >= 2 && !VI_STOPWORDS.has(t));
+
+  // ── Extract 2-word phrases (bigrams) for compound topics ──
   const bigramFreq = new Map();
   for (let i = 0; i < tokens.length - 1; i++) {
     const bigram = tokens[i] + " " + tokens[i + 1];
@@ -359,6 +416,8 @@ async function getTrendingTopics() {
       bigramFreq.set(bigram, (bigramFreq.get(bigram) || 0) + 1);
     }
   }
+
+  // ── Extract 3-word phrases (trigrams) for longer topics ──
   const trigramFreq = new Map();
   for (let i = 0; i < tokens.length - 2; i++) {
     const trigram = tokens[i] + " " + tokens[i + 1] + " " + tokens[i + 2];
@@ -366,6 +425,8 @@ async function getTrendingTopics() {
       trigramFreq.set(trigram, (trigramFreq.get(trigram) || 0) + 1);
     }
   }
+
+  // ── Score fixed ALL_TOPICS by keyword frequency in today's news ──
   const topicScores = [];
   for (const topic of ALL_TOPICS) {
     let count = 0;
@@ -373,32 +434,64 @@ async function getTrendingTopics() {
       const kwLower = kw.toLowerCase();
       count += (allText.split(kwLower).length - 1);
     }
-    if (count > 0) topicScores.push({ slug: topic.slug, label: topic.label, count, type: "fixed" });
+    if (count > 0) {
+      topicScores.push({ slug: topic.slug, label: topic.label, count, type: "fixed" });
+    }
   }
+
+  // ── Extract raw hot keywords not in ALL_TOPICS ──
   const knownKeywords = new Set();
-  for (const t of ALL_TOPICS) { for (const kw of t.keywords) knownKeywords.add(kw.toLowerCase()); }
+  for (const t of ALL_TOPICS) {
+    for (const kw of t.keywords) knownKeywords.add(kw.toLowerCase());
+  }
+
+  // Get top trigrams not in known list
   const topTrigrams = [...trigramFreq.entries()]
-    .filter(([phrase]) => { if (knownKeywords.has(phrase) || phrase.length <= 6) return false; const words = phrase.split(" "); return !words.some((w) => VI_STOPWORDS.has(w)); })
-    .sort((a, b) => b[1] - a[1]).slice(0, 10);
+    .filter(([phrase]) => {
+      if (knownKeywords.has(phrase) || phrase.length <= 6) return false;
+      const words = phrase.split(" ");
+      return !words.some((w) => VI_STOPWORDS.has(w));
+    })
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 10);
+
+  // Get top bigrams not in known list
   const topBigrams = [...bigramFreq.entries()]
-    .filter(([phrase]) => { if (knownKeywords.has(phrase) || phrase.length <= 4) return false; const words = phrase.split(" "); return !words.some((w) => VI_STOPWORDS.has(w)); })
-    .sort((a, b) => b[1] - a[1]).slice(0, 20);
+    .filter(([phrase]) => {
+      if (knownKeywords.has(phrase) || phrase.length <= 4) return false;
+      const words = phrase.split(" ");
+      return !words.some((w) => VI_STOPWORDS.has(w));
+    })
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 20);
+
+  // ── Combine fixed topics + raw hot keywords ──
   topicScores.sort((a, b) => b.count - a.count);
+
+  // Take top 10 fixed topics (those with count > 0)
   const trending = [...topicScores.slice(0, 10)];
-  const rawKeywords = [...topTrigrams, ...topBigrams].filter(([phrase, freq]) => freq >= 2).sort((a, b) => b[1] - a[1]).slice(0, 10);
+
+  // Add raw hot keywords as additional topics (up to 10)
+  const rawKeywords = [...topTrigrams, ...topBigrams]
+    .filter(([phrase, freq]) => freq >= 2)
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 10);
+
   for (const [phrase, freq] of rawKeywords) {
     const slug = phrase.replace(/\s+/g, "-").replace(/[^\p{L}\p{N}-]/gu, "");
     if (slug && slug.length > 2 && /^[a-zà-ỹ\-]+$/.test(slug) && !trending.find((t) => t.slug === slug)) {
-      const label = phrase.split(" ").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+      const label = phrase
+        .split(" ")
+        .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+        .join(" ");
       trending.push({ slug, label, count: freq, type: "dynamic" });
     }
   }
-  // Always include AI topic regardless of score (it has its own VNEWS AI feed)
-  if (!trending.find((f) => f.slug === "ai")) {
-    trending.push({ slug: "ai", label: "AI", count: 1, type: "fixed" });
-  }
+
+  // ── If not enough trending, add some defaults ──
   if (trending.length < 10) {
     const defaults = [
+      { slug: "ai", label: "AI", keywords: [] },
       { slug: "congngang", label: "Công nghệ", keywords: [] },
       { slug: "bongda", label: "Bóng đá", keywords: [] },
       { slug: "kinhte", label: "Kinh tế", keywords: [] },
@@ -410,13 +503,19 @@ async function getTrendingTopics() {
       { slug: "giai-tri", label: "Giải trí", keywords: [] },
     ];
     for (const d of defaults) {
-      if (!trending.find((f) => f.slug === d.slug)) trending.push({ ...d, count: 1, type: "fixed" });
+      if (!trending.find((f) => f.slug === d.slug)) {
+        trending.push({ ...d, count: 1, type: "fixed" });
+      }
     }
   }
+
+  // ── Daily rotation: pick 20 topics that change every day ──
   const now = new Date();
   const start = new Date(now.getFullYear(), 0, 0);
   const dayOfYear = Math.floor((now.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
   const seed = dayOfYear;
+
+  // Simple seeded shuffle (LCG) for deterministic daily rotation.
   const shuffled = [...trending];
   let r = seed;
   for (let i = shuffled.length - 1; i > 0; i--) {
@@ -424,19 +523,25 @@ async function getTrendingTopics() {
     const j = r % (i + 1);
     [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
   }
+
+  // Take top 20 (or all if fewer).
   return shuffled.slice(0, 20).map(({ slug, label }) => ({ slug, label }));
 }
 
+/** Filter the cached pool by a keyword (case-insensitive, in title). */
 async function filterNews(query, limit = 15) {
   const pool = await getNewsPool();
   const q = (query || "").trim().toLowerCase();
   if (!q) return pool.slice(0, limit);
+
+  // Map slug → expanded search terms for better matching.
+  // Also map label (e.g. "Bóng đá") → slug so the frontend can pass either.
   const SLUG_MAP = {
     "worldcup": ["world cup", "worldcup", "cúp thế giới", "fifa"],
     "aseancup": ["asean cup", "aseancup", "cúp đông nam áp", "vòng loại world cup", "vòng loại cúp"],
     "bongda": ["bóng đá", "bóng đá việt nam", "bóng đá ngoại hạng", "premier league", "laliga", "serie a", "bundesliga", "ligue 1", "chuyển nhượng"],
     "thethao": ["thể thao", "olympics", "olympic", "sea games", "asiad"],
-    "ai": ["trí tuệ nhân tạo", "a.i", "machine learning", "deep learning", "chatbot", "generative ai", "gen ai", "llm", "gpt", "qwen", "kimi", "chatgpt", "gemini", "openai", "claude", "tạo ảnh", "tạo video", "ứng dụng ai", "ai tạo sinh", "thông minh nhân tạo", "mô hình ngôn ngữ", "học sâu", "học máy", "mạng nơ-ron", "neural network", "kimik3", "kimi"],
+    "ai": ["trí tuệ nhân tạo", "ai ", "a.i", "machine learning", "deep learning", "chatbot", "generative ai", "gen ai", "llm", "kimik3", "kimi"],
     "congngang": ["công nghệ", "số hóa", "digital", "tech", "startup", "fintech", "blockchain", "metaverse", "cloud"],
     "kinhte": ["kinh tế", "tài chính", "chứng khoán", "lạm phát", "giá vàng", "giá dầu", "giá bitcoin", "vàng", "tiền tệ", "ngân hàng"],
     "thoisu": ["thời sự", "chính trị", "quan hệ", "đối ngoại", "pháp luật", "luật mới", "bỏ phiếu", "bầu cử", "bộ chính phủ", "thủ tướng"],
@@ -450,11 +555,18 @@ async function filterNews(query, limit = 15) {
     "am-nhac": ["âm nhạc", "nhạc trẻ", "nhạc vào", "concert", "âm nhạc điện tử"],
     "phap-luat": ["pháp luật", "tội phạm", "hình sự", "hành chính", "tai nạn", "bảo vệ quyền"],
   };
+
+  // Build a reverse map: label (lowercase, no spaces) → slug
+  // e.g. "bóngđá" → "bongda", "kinh tế" → "kinhte"
   const LABEL_TO_SLUG = {};
   for (const [slug, terms] of Object.entries(SLUG_MAP)) {
+    // Use the first term (which is usually the Vietnamese label) as the label key
     const labelKey = terms[0].replace(/\s+/g, "").toLowerCase();
     if (labelKey) LABEL_TO_SLUG[labelKey] = slug;
   }
+
+  // Resolve query to expanded search terms.
+  // Try: exact slug match → label match → raw query as fallback.
   let terms = SLUG_MAP[q];
   if (!terms) {
     const qNoSpace = q.replace(/\s+/g, "").toLowerCase();
@@ -462,30 +574,28 @@ async function filterNews(query, limit = 15) {
     if (slug) terms = SLUG_MAP[slug];
   }
   if (!terms) {
-    if (q.includes("-")) { terms = q.split("-").filter((t) => t.length > 1); }
-    else { terms = [q]; }
+    // For dynamic slugs (e.g. "việt-nam", "công-an"), convert to search terms
+    // by splitting on hyphens and using each part.
+    if (q.includes("-")) {
+      terms = q.split("-").filter((t) => t.length > 1);
+    } else {
+      terms = [q];
+    }
   }
+
+  // If no terms after processing, return empty (no results)
   if (!terms || terms.length === 0) return [];
-const matched = pool.filter((it) => {
-	    const titleLower = it.title.toLowerCase();
-	    const descLower = (it.description || "").toLowerCase();
-	    const text = titleLower + " " + descLower;
-	    return terms.some((term) => {
-	      // Terms with leading/trailing spaces use word-boundary regex
-	      // that handles Vietnamese diacritics (NOT just \w/\b which
-	      // breaks on non-ASCII letters)
-	      if (term.startsWith(" ") || term.endsWith(" ")) {
-	        const word = term.trim().replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-	        // Match only at whitespace/punctuation/string boundaries
-	        const re = new RegExp(`(^|[\\s.,!?;:()\"'\\[\\]{}<>/\\\\])${word}($|[\\s.,!?;:()\"'\\[\\]{}<>/\\\\-])`, 'i');
-	        return re.test(text);
-	      }
-	      return titleLower.includes(term) || descLower.includes(term);
-	    });
-	  });
+
+  const matched = pool.filter((it) => {
+    const titleLower = it.title.toLowerCase();
+    const descLower = (it.description || "").toLowerCase();
+    return terms.some((term) => titleLower.includes(term) || descLower.includes(term));
+  });
+
   return matched.slice(0, limit);
 }
 
+/** Fetch and extract article content for summarization */
 async function fetchArticleContent(url) {
   try {
     const resp = await fetch(url, {
@@ -493,6 +603,8 @@ async function fetchArticleContent(url) {
       signal: AbortSignal.timeout(8000),
     });
     const html = await resp.text();
+
+    // Extract text content (simple extraction)
     let text = html
       .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
       .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "")
@@ -501,56 +613,156 @@ async function fetchArticleContent(url) {
       .replace(/<footer[^>]*>[\s\S]*?<\/footer>/gi, "")
       .replace(/<[^>]+>/g, " ")
       .replace(/&[a-z]+;/g, " ")
-      .replace(/\s+/g, " ").trim();
-    return text.slice(0, 4000);
+      .replace(/\s+/g, " ")
+      .trim();
+
+    return text.slice(0, 4000); // Return first 4000 chars
   } catch (e) {
     console.warn(`[Article] Failed to fetch ${url}: ${e}`);
     return null;
   }
 }
 
+/** Vietnamese time phrasing: 10 AM -> "10h trưa", 6 PM+ -> "6h tối". */
 function formatVietnameseTime(now) {
   let h = now.getHours();
   const m = now.getMinutes();
   let part;
   if (h >= 0 && h < 5) part = "đêm";
   else if (h < 10) part = "sáng";
-  else if (h < 13) part = "trưa";
+  else if (h < 13) part = "trưa"; // 10h, 11h, 12h -> trưa
   else if (h < 18) part = "chiều";
-  else part = "tối";
-  const hh = h === 0 ? 12 : h;
+  else part = "tối"; // 18h trở đi -> tối
+  const hh = h === 0 ? 12 : h; // midnight shown as 12h đ��m
   if (m === 0) return `${hh}h ${part}`;
   return `${hh}h${m < 10 ? "0" : ""}${m} ${part}`;
 }
 
-// Upload thumbnails to sidecar service (no Space rebuild)
-async function uploadToSidecar(path: string, buf: Uint8Array) {
-  const sidecarUrl = Bun.env.SIDECAR_URL || "http://localhost:7861";
-  const base64 = Buffer.from(buf).toString("base64");
-  
-  try {
-    const resp = await fetch(`${sidecarUrl}/upload`, {
+
+// Upload a small file to this Space's Hub repo (persists across restarts).
+// Uses the HuggingFace Hub API: create_commit with base64-encoded file.
+// Falls back to Python huggingface_hub library if raw API fails.
+async function uploadToHub(path, buf) {
+  const token = Bun.env.HF_TOKEN;
+  if (!token) throw new Error("no HF_TOKEN");
+  const base = `https://huggingface.co/api/spaces/${REPO_ID}`;
+
+  // Encode the buffer as base64 for the commit API.
+  // Use Bun's built-in base64 encoding for reliability.
+  const b64 = Buffer.from(buf).toString("base64");
+
+  const body = JSON.stringify({
+    commit_message: `avatar thumbnail ${path}`,
+    summary: `avatar thumbnail ${path}`,
+    operations: [
+      {
+        operation: "create",
+        path,
+        ...(b64.length < 10 * 1024 * 1024
+          ? { base64: b64 }
+          : { lfs: { endpoint: "", path, sha256: "", size: buf.length } }),
+      },
+    ],
+  });
+
+  // Try the commit API
+  let resp = await fetch(`${base}/commit/main`, {
+    method: "POST",
+    headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+    body,
+  });
+
+  // If /commit/main fails, try /commit (some API versions differ)
+  if (!resp.ok && resp.status === 404) {
+    resp = await fetch(`${base}/commit`, {
       method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ path, content: base64 }),
+      headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+      body,
     });
-    if (!resp.ok) {
-      const txt = await resp.text();
-      console.warn(`[sidecar] upload failed (${resp.status}): ${txt}`);
-      return false;
+  }
+
+  if (!resp.ok) {
+    const txt = await resp.text();
+    console.warn(`[uploadToHub] raw API failed (${resp.status}): ${txt}, trying Python fallback`);
+    // Fall back to Python huggingface_hub library
+    return await uploadViaPython(path, buf);
+  }
+
+  // Verify the file was actually created by checking the response
+  const result = await resp.json();
+  if (result.success === false || result.error) {
+    console.warn(`[uploadToHub] API returned error: ${JSON.stringify(result)}, trying Python fallback`);
+    return await uploadViaPython(path, buf);
+  }
+
+  // Verify the file was actually persisted by fetching it back.
+  console.log(`[uploadToHub] raw API returned success for ${path}, verifying file exists...`);
+  try {
+    const verifyResp = await fetch(`${base}/resolve/main/${path}`, {
+      headers: { Authorization: `Bearer ${token}` },
+    });
+    if (verifyResp.ok) {
+      console.log(`[uploadToHub] verified ${path} exists on Hub`);
+      return true;
+    } else {
+      console.warn(`[uploadToHub] verification failed (${verifyResp.status}), trying Python fallback`);
+      return await uploadViaPython(path, buf);
     }
-    const data = await resp.json();
-    console.log(`[sidecar] queued ${path} for dataset upload`);
-    return true;
-  } catch (err) {
-    console.warn(`[sidecar] error: ${err}`);
-    return false;
+  } catch (e) {
+    console.warn(`[uploadToHub] verification error: ${e}, trying Python fallback`);
+    return await uploadViaPython(path, buf);
   }
 }
 
-async function uploadToHub(path: string, buf: Uint8Array) {
-  // Use sidecar service for dataset upload (no Space rebuild)
-  return uploadToSidecar(path, buf);
+// Upload via Python huggingface_hub library (more reliable than raw API)
+async function uploadViaPython(path, buf) {
+  const token = Bun.env.HF_TOKEN;
+  if (!token) throw new Error("no HF_TOKEN");
+  const repoId = REPO_ID;
+
+  try {
+    // Write buffer to temp file - convert to Uint8Array for Bun.write compatibility
+    const tmpPath = `/tmp/thumb_${Date.now()}_${path.replace(/\//g, "_")}`;
+    const uint8Buf = new Uint8Array(buf.buffer, buf.byteOffset, buf.byteLength);
+    await Bun.write(tmpPath, uint8Buf);
+
+    // Use Python huggingface_hub library
+    const proc = Bun.spawn(
+      ["python3", "-c", `
+import os, sys
+from huggingface_hub import HfApi
+api = HfApi(token=os.environ.get("HF_TOKEN", ""))
+api.upload_file(
+    path_or_fileobj="${tmpPath}",
+    repo_id="${repoId}",
+    repo_type="space",
+    path_in_repo="${path}",
+    commit_message="avatar thumbnail upload",
+)
+print("OK")
+`],
+      {
+        env: { ...Bun.env, HF_TOKEN: token },
+        stdout: "pipe",
+        stderr: "pipe",
+      }
+    );
+
+    const stdout = await new Response(proc.stdout).text();
+    const stderr = await new Response(proc.stderr).text();
+    const exitCode = await proc.exited;
+
+    if (exitCode === 0 && stdout.includes("OK")) {
+      console.log(`[uploadViaPython] successfully uploaded ${path}`);
+      return true;
+    } else {
+      console.warn(`[uploadViaPython] failed (exit ${exitCode}): ${stderr}`);
+      throw new Error(`Python upload failed: ${stderr}`);
+    }
+  } catch (e) {
+    console.warn(`[uploadViaPython] error: ${e}`);
+    throw e;
+  }
 }
 
 const server = Bun.serve({
@@ -564,6 +776,8 @@ const server = Bun.serve({
         return Response.json({ items: pool.slice(0, 15) });
       },
     },
+    // Lazy-load endpoint: returns the next page of cached news.
+    // ?offset=10&limit=10  → items 10..19 from the cached pool.
     "/api/news/more": {
       GET: async (req) => {
         const url = new URL(req.url);
@@ -580,6 +794,7 @@ const server = Bun.serve({
         });
       },
     },
+    // Filter the cached news by a keyword (newest/top matches first).
     "/api/news/filter": {
       GET: async (req) => {
         const url = new URL(req.url);
@@ -594,11 +809,14 @@ const server = Bun.serve({
         const url = new URL(req.url);
         const articleUrl = url.searchParams.get("url");
         if (!articleUrl) return Response.json({ error: "Missing ?url=" }, { status: 400 });
+
         const content = await fetchArticleContent(articleUrl);
         if (!content) return Response.json({ error: "Could not fetch article" }, { status: 502 });
+
         return Response.json({ content, url: articleUrl });
       },
     },
+    // Realtime trending topics extracted from today's news
     "/api/topics/trending": {
       GET: async () => {
         const topics = await getTrendingTopics();
@@ -616,33 +834,70 @@ const server = Bun.serve({
             const bullets = text.split(/\n\n+/).map((s) => s.trim()).filter(Boolean).slice(0, 6);
             return Response.json({ title: text.slice(0, 80), body: bullets.map((b) => `• ${b}`).join("\n"), fallback: true });
           }
+          // ── Step 1: clean the chat transcript ──────────────────────────────
           const cleanText = text
             .split(/\n+/)
             .map((line) => line.replace(/^\s*(người dùng|user|avatar|bạn|trợ lí|trợ lý|assistant)\s*[:\-]\s*/i, "").trim())
-            .filter(Boolean).join("\n");
-          const SYSTEM_PROMPT = "Bạn là một BIÊN TẬP VIÊN báo chí tiếng Việt. VIẾT LẠI nội dung thành MỘT BÀI HOÀN CHỈNH bằng NGÔN TỪ CỦA BẠN.\n" +
-            "QUY TẮC:\n1. KHÔNG sao chép nguyên văn. Diễn đạt lại (paraphrase), tóm gọn, tự nhiên.\n" +
-            "2. KHÔNG giữ định dạng chat 'Người dùng:'/'Avatar:'.\n3. Dòng đầu là TIÊU ĐỀ (dưới 90 ký tự).\n" +
-            "4. Tiếp theo: 1 mở đầu, 3-4 đoạn thân bài, 1 kết luận.\n5. Tiếng Việt chuẩn, KHÔNG liên kết, KHÔNG đánh số đầu dòng.\n6. Định dạng: TIÊU ĐỀ: <tiêu đề>\n\n<nội dung>";
+            .filter(Boolean)
+            .join("\n");
+
+          const SYSTEM_PROMPT =
+            "Bạn là một BIÊN TẬP VIÊN báo chí tiếng Việt. VIẾT LẠI nội dung thành MỘT BÀI HOÀN CHỈNH bằng NGÔN TỪ CỦA BẠN.\n" +
+            "QUY TẮC:\n" +
+            "1. KHÔNG sao chép nguyên văn. Diễn đạt lại (paraphrase), tóm gọn, tự nhiên.\n" +
+            "2. KHÔNG giữ định dạng chat 'Người dùng:'/'Avatar:'.\n" +
+            "3. Dòng đầu là TIÊU ĐỀ (dưới 90 ký tự).\n" +
+            "4. Tiếp theo: 1 mở đầu, 3-4 đoạn thân bài, 1 kết luận.\n" +
+            "5. Tiếng Việt chuẩn, KHÔNG liên kết, KHÔNG đánh số đầu dòng.\n" +
+            "6. Định dạng: TIÊU ĐỀ: <tiêu đề>\n\n<nội dung>";
           const USER_PROMPT = `Nội dung cần viết lại:\n${cleanText}\n\nHãy viết bài ngay:`;
           const SUMMARY_ENDPOINT = Bun.env.SUMMARY_ENDPOINT || "";
           const MODEL = Bun.env.SUMMARY_MODEL || "Qwen/Qwen2.5-7B-Instruct";
           let out = "";
+          // ── Prefer the self-hosted summarizer Space (reliable, no geo-block) ──
           if (SUMMARY_ENDPOINT) {
             try {
-              const sresp = await fetch(SUMMARY_ENDPOINT, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ text }), signal: AbortSignal.timeout(90000) });
-              if (sresp.ok) { const sdata = await sresp.json(); if (sdata && sdata.body) out = (sdata.body || "").trim(); }
+              const sresp = await fetch(SUMMARY_ENDPOINT, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ text }),
+                signal: AbortSignal.timeout(90000),
+              });
+              if (sresp.ok) {
+                const sdata = await sresp.json();
+                if (sdata && sdata.body) out = (sdata.body || "").trim();
+              }
             } catch (e) { console.warn(`[summarize] endpoint failed: ${e}`); }
           }
+          // ── Fall back to the HF router (OpenAI-compatible) ──
           if (!out) {
             try {
-              const rresp = await fetch("https://router.huggingface.co/v1/chat/completions", { method: "POST", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" }, body: JSON.stringify({ model: MODEL, messages: [{ role: "system", content: SYSTEM_PROMPT }, { role: "user", content: USER_PROMPT }], max_tokens: 800, temperature: 0.8, top_p: 0.9 }), signal: AbortSignal.timeout(45000) });
+              const rresp = await fetch("https://router.huggingface.co/v1/chat/completions", {
+                method: "POST",
+                headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+                body: JSON.stringify({
+                  model: MODEL,
+                  messages: [
+                    { role: "system", content: SYSTEM_PROMPT },
+                    { role: "user", content: USER_PROMPT },
+                  ],
+                  max_tokens: 800,
+                  temperature: 0.8,
+                  top_p: 0.9,
+                }),
+                signal: AbortSignal.timeout(45000),
+              });
               if (rresp.ok) { const rdata = await rresp.json(); out = (rdata?.choices?.[0]?.message?.content || "").trim(); }
             } catch (e) { console.warn(`[summarize] router failed: ${e}`); }
           }
           if (!out && Bun.env.SUMMARY_MODEL_LEGACY) {
             try {
-              const lresp = await fetch(`https://api-inference.huggingface.co/models/${Bun.env.SUMMARY_MODEL_LEGACY}`, { method: "POST", headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" }, body: JSON.stringify({ inputs: `${SYSTEM_PROMPT}\n\n${USER_PROMPT}`, parameters: { max_new_tokens: 700, return_full_text: false, temperature: 0.8, do_sample: true } }), signal: AbortSignal.timeout(45000) });
+              const lresp = await fetch(`https://api-inference.huggingface.co/models/${Bun.env.SUMMARY_MODEL_LEGACY}`, {
+                method: "POST",
+                headers: { Authorization: `Bearer ${token}`, "Content-Type": "application/json" },
+                body: JSON.stringify({ inputs: `${SYSTEM_PROMPT}\n\n${USER_PROMPT}`, parameters: { max_new_tokens: 700, return_full_text: false, temperature: 0.8, do_sample: true } }),
+                signal: AbortSignal.timeout(45000),
+              });
               if (lresp.ok) { const ldata = await lresp.json(); out = (Array.isArray(ldata) ? (ldata[0]?.generated_text || "") : (ldata.generated_text || "")).trim(); }
             } catch (e) { console.warn(`[summarize] legacy failed: ${e}`); }
           }
@@ -653,9 +908,16 @@ const server = Bun.serve({
             if (!title) title = bodyText.slice(0, 80);
             return Response.json({ title, body: bodyText || out });
           }
+          // ── No-model fallback: light paraphrase (NEVER verbatim copy) ──
+          // Re-flow the chat lines into a short prose summary with a title,
+          // instead of echoing the raw transcript.
           const lines = cleanText.split(/\n+/).map((s) => s.trim()).filter(Boolean);
           const titleFb = lines[0] ? (lines[0].length > 80 ? lines[0].slice(0, 77) + "..." : lines[0]) : "Tóm tắt cuộc trò chuyện";
-          const bodyFb = lines.map((l) => l.charAt(0).toUpperCase() + l.slice(1)).join(" ").replace(/\s+/g, " ").trim();
+          const bodyFb = lines
+            .map((l) => l.charAt(0).toUpperCase() + l.slice(1))
+            .join(" ")
+            .replace(/\s+/g, " ")
+            .trim();
           return Response.json({ title: titleFb, body: bodyFb || cleanText, fallback: true });
         } catch (e) {
           console.warn(`[summarize] ${e}`);
@@ -668,9 +930,19 @@ const server = Bun.serve({
         const files = await listAllAvatarFiles();
         const avatarsDir = join(process.cwd(), "public/avatars");
         const avatars = await listAvatars();
+        // Check thumbnails for each avatar
         const thumbStatus = {};
-        for (const name of avatars) { thumbStatus[name] = await avatarHasThumbnail(name); }
-        return Response.json({ cwd: process.cwd(), avatarsDir, files, count: files.length, avatars, thumbStatus });
+        for (const name of avatars) {
+          thumbStatus[name] = await avatarHasThumbnail(name);
+        }
+        return Response.json({ 
+          cwd: process.cwd(),
+          avatarsDir,
+          files,
+          count: files.length,
+          avatars,
+          thumbStatus
+        });
       },
     },
     "/api/debug/thumbnail/:name": {
@@ -681,7 +953,14 @@ const server = Bun.serve({
         const file = Bun.file(thumbPath);
         const exists = await file.exists();
         const size = exists ? file.size : 0;
-        return Response.json({ name, thumbName, thumbPath, exists, size, url: `/avatars/${thumbName}` });
+        return Response.json({ 
+          name,
+          thumbName,
+          thumbPath,
+          exists,
+          size,
+          url: `/avatars/${thumbName}`
+        });
       },
     },
     "/api/avatars": {
@@ -696,13 +975,52 @@ const server = Bun.serve({
         return Response.json({ avatars });
       },
     },
+    "/api/avatars/debug": {
+      GET: async () => {
+        const allFiles = await listAllAvatarFiles();
+        const avatars = await Promise.all(
+          (await listAvatars()).map(async (name) => ({
+            name,
+            thumbnail: await avatarHasThumbnail(name) ? `/avatars/${name}.thumb.png` : null,
+          }))
+        );
+        return Response.json({ avatars, allFiles, avatarsDir: join(process.cwd(), "public/avatars") });
+      },
+    },
+    "/api/avatars/debug": {
+      GET: async () => {
+        const allFiles = await listAllAvatarFiles();
+        const avatarsDir = join(process.cwd(), "public/avatars");
+        return Response.json({ 
+          avatarsDir,
+          allFiles,
+          glbFiles: allFiles.filter(f => f.endsWith(".glb")),
+          thumbFiles: allFiles.filter(f => f.endsWith(".thumb.png")),
+        });
+      },
+    },
     "/api/avatars/debug": {
       GET: async () => {
         const allFiles = await listAllAvatarFiles();
         const glbFiles = allFiles.filter((f) => f.endsWith(".glb"));
         const thumbFiles = allFiles.filter((f) => f.endsWith(".thumb.png"));
         const otherFiles = allFiles.filter((f) => !f.endsWith(".glb") && !f.endsWith(".thumb.png"));
-        return Response.json({ allFiles, glbFiles, thumbFiles, otherFiles, avatarsDir: join(process.cwd(), "public/avatars") });
+        return Response.json({ allFiles, glbFiles, thumbFiles, otherFiles });
+      },
+    },
+    "/api/avatars/debug": {
+      GET: async () => {
+        const allFiles = await listAllAvatarFiles();
+        const glbFiles = allFiles.filter((f) => f.endsWith(".glb"));
+        const thumbFiles = allFiles.filter((f) => f.endsWith(".thumb.png"));
+        const otherFiles = allFiles.filter((f) => !f.endsWith(".glb") && !f.endsWith(".thumb.png"));
+        return Response.json({
+          allFiles,
+          glbFiles,
+          thumbFiles,
+          otherFiles,
+          avatarsDir: join(process.cwd(), "public/avatars"),
+        });
       },
     },
     "/api/wiki/search": {
@@ -711,9 +1029,14 @@ const server = Bun.serve({
         const q = url.searchParams.get("q");
         if (!q) return Response.json({ error: "Missing ?q=" }, { status: 400 });
         try {
-          const resp = await fetch(`https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(q)}&format=json&srlimit=5&origin=*`);
+          const resp = await fetch(
+            `https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(q)}&format=json&srlimit=5&origin=*`
+          );
           const data = await resp.json();
-          const results = (data.query?.search ?? []).map((r) => ({ title: r.title, snippet: r.snippet.replace(/<[^>]+>/g, "") }));
+          const results = (data.query?.search ?? []).map((r) => ({
+            title: r.title,
+            snippet: r.snippet.replace(/<[^>]+>/g, ""),
+          }));
           return Response.json({ results });
         } catch { return Response.json({ error: "Wikipedia unreachable." }, { status: 502 }); }
       },
@@ -724,9 +1047,15 @@ const server = Bun.serve({
         const title = url.searchParams.get("title");
         if (!title) return Response.json({ error: "Missing ?title=" }, { status: 400 });
         try {
-          const resp = await fetch(`https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(title)}?origin=*`);
+          const resp = await fetch(
+            `https://en.wikipedia.org/api/rest_v1/page/summary/${encodeURIComponent(title)}?origin=*`
+          );
           const data = await resp.json();
-          return Response.json({ title: data.title, extract: data.extract, url: data.content_urls?.desktop?.page });
+          return Response.json({
+            title: data.title,
+            extract: data.extract,
+            url: data.content_urls?.desktop?.page,
+          });
         } catch { return Response.json({ error: "Wikipedia unreachable." }, { status: 502 }); }
       },
     },
@@ -736,7 +1065,10 @@ const server = Bun.serve({
         const q = url.searchParams.get("q");
         if (!q) return Response.json({ error: "Missing ?q=" }, { status: 400 });
         try {
-          const resp = await fetch(`https://html.duckduckgo.com/html/?q=${encodeURIComponent(q)}`, { headers: { "User-Agent": "Mozilla/5.0" } });
+          const resp = await fetch(
+            `https://html.duckduckgo.com/html/?q=${encodeURIComponent(q)}`,
+            { headers: { "User-Agent": "Mozilla/5.0" } }
+          );
           const html = await resp.text();
           const results = [];
           const linkRegex = /<a[^>]+class="result__a"[^>]*href="([^"]*)"[^>]*>([\s\S]*?)<\/a>/gi;
@@ -761,12 +1093,26 @@ const server = Bun.serve({
         const targetUrl = url.searchParams.get("url");
         if (!targetUrl) return Response.json({ error: "Missing ?url=" }, { status: 400 });
         try {
-          const resp = await fetch(targetUrl, { headers: { "User-Agent": "Mozilla/5.0 (compatible; AvatarBot/1.0)" }, signal: AbortSignal.timeout(8000) });
+          const resp = await fetch(targetUrl, {
+            headers: { "User-Agent": "Mozilla/5.0 (compatible; AvatarBot/1.0)" },
+            signal: AbortSignal.timeout(8000),
+          });
           const html = await resp.text();
-          let text = html.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "").replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "").replace(/<nav[^>]*>[\s\S]*?<\/nav>/gi, "").replace(/<header[^>]*>[\s\S]*?<\/header>/gi, "").replace(/<footer[^>]*>[\s\S]*?<\/footer>/gi, "").replace(/<[^>]+>/g, " ").replace(/&[a-z]+;/g, " ").replace(/\s+/g, " ").trim();
+          let text = html
+            .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
+            .replace(/<style[^>]*>[\s\S]*?<\/style>/gi, "")
+            .replace(/<nav[^>]*>[\s\S]*?<\/nav>/gi, "")
+            .replace(/<header[^>]*>[\s\S]*?<\/header>/gi, "")
+            .replace(/<footer[^>]*>[\s\S]*?<\/footer>/gi, "")
+            .replace(/<[^>]+>/g, " ")
+            .replace(/&[a-z]+;/g, " ")
+            .replace(/\s+/g, " ")
+            .trim();
           const content = text.slice(0, 3000);
           return Response.json({ content, url: targetUrl });
-        } catch { return Response.json({ error: "Could not fetch page." }, { status: 502 }); }
+        } catch {
+          return Response.json({ error: "Could not fetch page." }, { status: 502 });
+        }
       },
     },
     "/api/session": {
@@ -790,80 +1136,104 @@ const server = Bun.serve({
     },
     "/worklets/:name": (req) => staticFile("worklets", req.params.name),
     "/vendor/:name": (req) => staticFile("vendor", req.params.name),
-    "/src/:name": async (req) => {
-      const filePath = join(process.cwd(), "src", req.params.name);
-      const file = Bun.file(filePath);
-      const exists = await file.exists();
-      if (!exists) return new Response("Not Found", { status: 404 });
-      return new Response(file);
-    },
     "/api/avatar-thumbnail": {
       POST: async (req) => {
         try {
           const body = await req.json();
           const avatar = (body.avatar || "").toString();
           const dataUrl = (body.dataUrl || "").toString();
+          console.log(`[thumb] POST received: avatar=${avatar}, dataUrl length=${dataUrl?.length || 0}`);
+          // Only allow a known .glb name + a PNG data URL.
           if (!/^[A-Za-z0-9_.\-]+\.glb$/i.test(avatar)) {
+            console.log(`[thumb] Invalid avatar name: ${avatar}`);
             return Response.json({ ok: false, error: "Invalid avatar name" }, { status: 400 });
           }
-          const m = dataUrl.match(/^data:image\/(png|jpeg);base64,(.+)$/);
-          if (!m) return Response.json({ ok: false, error: "Expected PNG data URL" }, { status: 400 });
+          const m = dataUrl.match(/^data:image\/png;base64,(.+)$/);
+          if (!m) {
+            console.log(`[thumb] Invalid data URL format`);
+            return Response.json({ ok: false, error: "Expected PNG data URL" }, { status: 400 });
+          }
           let buf;
-          try { buf = Buffer.from(m[2], "base64"); } catch { return Response.json({ ok: false, error: "Bad base64" }, { status: 400 }); }
-          if (!buf || !buf.length) return Response.json({ ok: false, error: "Empty buffer" }, { status: 400 });
-          if (buf.length > 5 * 1024 * 1024) return Response.json({ ok: false, error: "Image too large" }, { status: 413 });
-          // Accept PNG (89 50 4E 47) or JPEG (FF D8 FF)
-          const isPng = buf[0] === 0x89 && buf[1] === 0x50 && buf[2] === 0x4e && buf[3] === 0x47;
-          const isJpeg = buf[0] === 0xff && buf[1] === 0xd8 && buf[2] === 0xff;
-          if (!isPng && !isJpeg) {
-            return Response.json({ ok: false, error: "Not a PNG or JPEG" }, { status: 400 });
+          try { buf = Buffer.from(m[1], "base64"); } catch (e) {
+            console.log(`[thumb] Base64 decode failed: ${e}`);
+            return Response.json({ ok: false, error: "Bad base64" }, { status: 400 });
+          }
+          if (!buf || !buf.length) {
+            console.log(`[thumb] Empty buffer after decode`);
+            return Response.json({ ok: false, error: "Empty buffer" }, { status: 400 });
+          }
+          if (buf.length > 5 * 1024 * 1024) {
+            console.log(`[thumb] Image too large: ${buf.length} bytes`);
+            return Response.json({ ok: false, error: "Image too large" }, { status: 413 });
+          }
+          if (!(buf[0] === 0x89 && buf[1] === 0x50 && buf[2] === 0x4e && buf[3] === 0x47)) {
+            console.log(`[thumb] Not a PNG: first bytes=${buf[0]},${buf[1]},${buf[2]},${buf[3]}`);
+            return Response.json({ ok: false, error: "Not a PNG" }, { status: 400 });
           }
           const fileName = `${avatar}.thumb.png`;
           const avatarsDir = join(process.cwd(), "public/avatars");
           const localPath = join(avatarsDir, fileName);
-          const tmpPath = `/tmp/${fileName}`;  // Use /tmp which is always writable
           const uint8Buf = new Uint8Array(buf.buffer, buf.byteOffset, buf.byteLength);
+          console.log(`[thumb] About to write: localPath=${localPath}, buf size=${buf.length}, uint8 size=${uint8Buf.length}`);
 
-          // ── 1. Write to /tmp (always writable) for immediate serving ──
+          // ── 1. Write to local Space filesystem (serves immediately this session) ──
           try {
-            await writeFile(tmpPath, uint8Buf);
-            console.log(`[thumbnail] saved to tmp: ${tmpPath} (${buf.length} bytes)`);
-          } catch (writeErr) {
-            console.warn(`[thumbnail] tmp write failed: ${writeErr}`);
+            // Ensure the directory exists (mkdir -p equivalent)
+            await Bun.spawn(["mkdir", "-p", avatarsDir]).exited;
+            await writeFile(localPath, uint8Buf);
+            console.log(`[thumb] saved locally: ${localPath}`);
+            // Verify the file was written
+            const verifyFile = Bun.file(localPath);
+            const fileExists = await verifyFile.exists();
+            console.log(`[thumb] local file exists: ${fileExists}, size: ${verifyFile.size}`);
+            if (!fileExists) {
+              console.error(`[thumb] CRITICAL: File was not written! Path: ${localPath}`);
+              // Try alternative write method
+              try {
+                await Bun.write(localPath, uint8Buf);
+                const verifyFile2 = Bun.file(localPath);
+                const fileExists2 = await verifyFile2.exists();
+                console.log(`[thumb] Alternative write: fileExists=${fileExists2}, size=${verifyFile2.size}`);
+              } catch (e2) {
+                console.error(`[thumb] Alternative write also failed: ${e2}`);
+              }
+            }
+          } catch (e) {
+            console.warn("[thumb] local write failed:", e);
           }
 
-          // ── 2. Upload to Hub for persistence ──
-          uploadToHub(`public/avatars/${fileName}`, buf).catch((err) => {
-            console.warn(`[thumbnail] Hub upload failed: ${err}. Thumbnail in /tmp only.`);
-          });
+          // ── 2. Persist to the Hub repo so it survives Space restarts ──
+          try {
+            await uploadToHub(`public/avatars/${fileName}`, buf);
+            console.log(`[thumb] persisted to Hub: public/avatars/${fileName}`);
+          } catch (e) {
+            console.warn("[thumb] hub upload failed:", e);
+          }
 
-          // ── 3. Serve from /tmp via fallback handler ──
+          // ── 3. Verify the file is accessible via the Space's static file route ──
           const thumbUrl = `/avatars/${fileName}`;
-
-          return Response.json({ ok: true, url: thumbUrl, size: buf.length });
+          // Also verify via staticFile route
+          try {
+            const staticResp = await fetch(`http://localhost:${PORT}${thumbUrl}`);
+            console.log(`[thumb] static file check: status=${staticResp.status}, content-type=${staticResp.headers.get("content-type")}`);
+          } catch (e) {
+            console.warn("[thumb] static file check failed:", e);
+          }
+          return Response.json({ ok: true, url: thumbUrl, avatar, file: fileName });
         } catch (e) {
-          console.error(`[thumbnail] error: ${e}`);
-          return Response.json({ ok: false, error: "Internal server error" }, { status: 500 });
+          console.warn(`[thumb] ${e}`);
+          return Response.json({ ok: false, error: "save failed" }, { status: 500 });
         }
       },
     },
-  },
-  // fallback: serve static files from public/ and /tmp/avatars
-  async fetch(req) {
-    const url = new URL(req.url);
-    // Serve avatar thumbnails from /tmp first (where they are written)
-    if (url.pathname.startsWith("/avatars/")) {
-      const tmpPath = join("/tmp", url.pathname.split("/").pop() || "");
-      const tmpFile = Bun.file(tmpPath);
-      if (await tmpFile.exists()) return new Response(tmpFile);
-    }
-    const filePath = join(process.cwd(), "public", url.pathname);
-    const file = Bun.file(filePath);
-    const exists = await file.exists();
-    if (exists) return new Response(file);
-    return new Response("Not Found", { status: 404 });
+    "/avatars/:name": (req) => staticFile("avatars", req.params.name),
   },
 });
 
-console.log(`server running on port ${PORT}`);// force rebuild Sat Jul 25 04:14:36 UTC 2026
-// flush 60s
+// Warm the news pool on boot so the first request is instant.
+void refreshNewsPool();
+
+console.log(`gemma-avatar listening on ${server.url}`);
+console.log(UPSTREAM ? `session backend: ${LOAD_BALANCER_URL ? "load balancer" : "session proxy"} (${UPSTREAM})` : "session backend: none");
+
+/* rebuild trigger */

public/avatars/lisamy1.glb

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:a92c208c498aca4c7ffe48d237ce1f3098df902631c8f9ca98bab5f7c104bd3f
-size 8320540

public/avatars/scene.glb

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:c88c7c12ee1e978770ed95f1e0ab7e884e2af8c5d368d0ce7c57cbef5a42a47b
-size 7490660

public/avatars/viverse_avatar_model_209370.vrm

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:75ff29129461144ed2f1d8812d61cc599d1e7694c83efbfee328f7ca2cde8cce
-size 8996552

public/avatars/vuong1.glb

@@ -1,3 +0,0 @@
-version https://git-lfs.github.com/spec/v1
-oid sha256:aec85cb497aec853af78f6686b672fffe4fe2dd9bdab81bc43b39caf0d69926a
-size 6964484

public/worklets/audio-playback.js

@@ -168,4 +168,4 @@ class AudioPlaybackProcessor extends AudioWorkletProcessor {
   }
 }
 
-registerProcessor("audio-playback", AudioPlaybackProcessor);
+registerProcessor("audio-playback", AudioPlaybackProcessor);

public/worklets/mic-capture.js

@@ -156,4 +156,4 @@ class MicCaptureProcessor extends AudioWorkletProcessor {
   }
 }
 
-registerProcessor("mic-capture", MicCaptureProcessor);
+registerProcessor("mic-capture", MicCaptureProcessor);

requirements.txt

@@ -1 +0,0 @@
-huggingface_hub[hf_transfer]>=0.25.0

src/aiTopicPatch.js

@@ -1,118 +0,0 @@
-const AI_TOPIC_PATCH_VERSION = "1.0.0";
-
-function normalizeAiText(text) {
-  return (text || "")
-    .toLowerCase()
-    .replace(/\bai\b/g, " ai ")
-    .replace(/\ba\.i\b/g, " ai ")
-    .replace(/a i/g, " ai ")
-    .replace(/\bllm\b/g, " llm ")
-    .replace(/\bllms\b/g, " llms ")
-    .replace(/\bml\b/g, " ml ")
-    .replace(/\bdl\b/g, " dl ")
-    .replace(/\bgpt\b/g, " gpt ")
-    .replace(/\bgemini\b/g, " gemini ")
-    .replace(/\bqwen\b/g, " qwen ")
-    .replace(/\bclaude\b/g, " claude ")
-    .replace(/\bopenai\b/g, " openai ")
-    .replace(/\bchatgpt\b/g, " chatgpt ")
-    .replace(/\bdeep learning\b/g, " deep learning ")
-    .replace(/\bmachine learning\b/g, " machine learning ")
-    .replace(/\bgenerative ai\b/g, " generative ai ")
-    .replace(/\bgen ai\b/g, " gen ai ")
-    .replace(/\bcomputer vision\b/g, " computer vision ")
-    .replace(/\bnatural language processing\b/g, " natural language processing ")
-    .replace(/\bnlp\b/g, " nlp ")
-    .replace(/\brobotics\b/g, " robotics ")
-    .replace(/\brobot\b/g, " robot ")
-    .replace(/\bchatbot\b/g, " chatbot ")
-    .replace(/\bchat bot\b/g, " chatbot ")
-    .replace(/\btrí tuệ nhân tạo\b/g, " trí tuệ nhân tạo ")
-    .replace(/\bkhí cụ nhân tạo\b/g, " trí tuệ nhân tạo ")
-    .replace(/\bthông minh nhân tạo\b/g, " trí tuệ nhân tạo ")
-    .replace(/\bứng dụng ai\b/g, " ứng dụng ai ")
-    .replace(/\bdạy học ai\b/g, " dạy học ai ")
-    .replace(/\btạo ảnh bằng ai\b/g, " tạo ảnh bằng ai ")
-    .replace(/\btạo video bằng ai\b/g, " tạo video bằng ai ")
-    .replace(/\bchatbot ai\b/g, " chatbot ai ")
-    .replace(/\bAI\b/g, " ai ")
-    .replace(/\bLLM\b/g, " llm ")
-    .replace(/\bGPT\b/g, " gpt ")
-    .replace(/\bQwen\b/g, " qwen ")
-    .replace(/\bClaude\b/g, " claude ")
-    .replace(/\bOpenAI\b/g, " openai ")
-    .replace(/\bChatGPT\b/g, " chatgpt ")
-    .replace(/\bGemini\b/g, " gemini ")
-    .replace(/\bGenK\b/g, " genk ")
-    .replace(/\bKimi\b/g, " kimi ")
-    .replace(/\bKimi K3\b/g, " kimi k3 ")
-    .replace(/\bKimi k3\b/g, " kimi k3 ");
-}
-
-function detectAiTopic(text) {
-  const t = normalizeAiText(text);
-  const aiTerms = [
-    " trí tuệ nhân tạo ", " ai ", " artificial intelligence ", " machine learning ", " deep learning ",
-    " generative ai ", " gen ai ", " llm ", " llms ", " chatbot ", " chatgpt ", " openai ", " gpt ",
-    " gemini ", " qwen ", " claude ", " kimi ", " kimi k3 ", " nlp ", " natural language processing ",
-    " computer vision ", " robotics ", " robot ", " chatbot ai ", " ứng dụng ai ", " dạy học ai ",
-    " tạo ảnh bằng ai ", " tạo video bằng ai "
-  ];
-  return aiTerms.some((term) => t.includes(term));
-}
-
-function escapeHtml(text) {
-  return String(text || "")
-    .replace(/&/g, "&")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&#039;");
-}
-
-function renderAiTopicChip() {
-  if (document.getElementById("ai-topic-inline")) return;
-  const chatMessages = document.getElementById("chat-messages");
-  if (!chatMessages) return;
-
-  const wrap = document.createElement("div");
-  wrap.className = "topic-tags";
-  wrap.id = "ai-topic-inline";
-
-  const chip = document.createElement("button");
-  chip.type = "button";
-  chip.className = "topic-chip ai-topic-chip";
-  chip.textContent = "# AI";
-  chip.title = "Mở tin tức AI / trí tuệ nhân tạo";
-  chip.addEventListener("click", () => {
-    const chatInput = document.getElementById("chat-input");
-    if (chatInput) chatInput.value = "Tin tức AI, trí tuệ nhân tạo mới nhất";
-    const btn = document.getElementById("chat-send-btn");
-    if (btn) btn.click();
-  });
-
-  wrap.appendChild(chip);
-  chatMessages.appendChild(wrap);
-  chatMessages.scrollTop = chatMessages.scrollHeight;
-}
-
-function injectAiTopicIntoSearchContext(text) {
-  const original = text || "";
-  if (!detectAiTopic(original)) return original;
-
-  const aiText = `Chủ đề AI cần ưu tiên: tin tức AI, trí tuệ nhân tạo, machine learning, deep learning, chatbot, generative AI, LLM, Kimi, Qwen, Gemini, GPT, OpenAI, Claude, ứng dụng AI, tạo ảnh bằng AI, tạo video bằng AI.`;
-  if (original.includes(aiText)) return original;
-
-  return `${original}\n\n${aiText}`;
-}
-
-window.AiTopicPatch = {
-  version: AI_TOPIC_PATCH_VERSION,
-  detectAiTopic,
-  injectAiTopicIntoSearchContext,
-  renderAiTopicChip,
-};
-
-document.addEventListener("DOMContentLoaded", () => {
-  window.AiTopicPatch.renderAiTopicChip();
-});

src/app.js

@@ -1,2326 +1,48 @@
-import { S2sWsRealtimeClient } from "./s2s/s2s-ws-client.js";
-import { AvatarStage, AVATAR_MOODS, AVATAR_GESTURES } from "./avatar.js";
-import { smartNormalize, prepareForTTS } from "./viNumberFix.js";
-import { VoiceTyper } from "./voiceTyper.js";
+// This file needs the thumbnail fix added before the final closing
+// Add this before the last line:
 
-const VOICES = [
-  "Aiden", "Ryan", "Dylan", "Eric",
-  "Ono_Anna", "Serena", "Sohee", "Uncle_Fu", "Vivian",
-];
-const DEFAULT_VOICE = "Sohee";
-
-// ── VNEWS integration ───────────────────────────────────────────────────
-// The VNEWS space (bep40/vnews) is reachable at this subdomain. It exposes a
-// clean JSON API (no key required) that we use to pull AI/tech news, answer
-// from VNEWS data, and rewrite selected chat content into VNEWS "wall" posts.
-const VNEWS_BASE = "https://bep40-vnews.hf.space";
-
-// ── News fetching ───────────────────────────────────────────────────────
-const NEWS_PAGE_SIZE = 10;
-
-async function getHotNews() {
-  let items = [];
-  try {
-    const resp = await fetch("/api/news/hot");
-    if (resp.ok) {
-      const data = await resp.json();
-      if (data.items && data.items.length > 0) {
-        items = data.items.slice(0, NEWS_PAGE_SIZE);
-      }
-    }
-  } catch (e) { console.warn("News API failed:", e); }
-  return items;
-}
-
-async function getMoreNews(offset, limit = NEWS_PAGE_SIZE) {
-  try {
-    const resp = await fetch(`/api/news/more?offset=${offset}&limit=${limit}`);
-    if (resp.ok) {
-      const data = await resp.json();
-      return {
-        items: Array.isArray(data.items) ? data.items : [],
-        nextOffset: data.offset ?? offset + (data.items?.length ?? 0),
-        hasMore: Boolean(data.hasMore),
-      };
-    }
-  } catch (e) { console.warn("News more API failed:", e); }
-  return { items: [], nextOffset: offset, hasMore: false };
-}
-
-async function getFilteredNews(query, limit = NEWS_PAGE_SIZE) {
-  try {
-    const resp = await fetch(`/api/news/filter?q=${encodeURIComponent(query)}&limit=${limit}`);
-    if (resp.ok) {
-      const data = await resp.json();
-      return Array.isArray(data.items) ? data.items : [];
-    }
-  } catch (e) { console.warn("News filter API failed:", e); }
-  return [];
-}
-
-// ── VNEWS fetch helpers ─────────────────────────────────────────────────
-let vnewsConnected = false;
-let vnewsArticles = [];   // flattened articles from VNEWS homepage
-let vnewsStatusTimer = 0;
-
-async function vnewsFetch(path) {
-  try {
-    const resp = await fetch(`${VNEWS_BASE}${path}`, { headers: { "Accept": "application/json" } });
-    if (!resp.ok) return null;
-    return await resp.json();
-  } catch (e) {
-    console.warn("VNEWS fetch failed:", path, e);
-    return null;
-  }
-}
-
-/** Pull the GenK "AI" feed (source = genk) — used for the "tin tức về AI" topic. */
-async function getVnewsAIFeed(limit = NEWS_PAGE_SIZE) {
-  const data = await vnewsFetch(`/api/category/cong-nghe`);
-  if (!Array.isArray(data)) return [];
-  return data
-    .filter((a) => a && a.title && a.link)
-    .map((a) => ({
-      title: a.title,
-      link: a.link,
-      image: a.img || "",
-      source: a.source === "genk" ? "GenK AI" : (a.source || "VNEWS"),
-      vnews: true,
-    }))
-    .slice(0, limit);
-}
-
-/** Pull the VNEWS homepage (all categories) and flatten into a searchable list. */
-
-// ── Topic tags (chủ đề HOT thời gian thực) — click mở modal tin theo chủ đề ──
-// Fetch realtime trending topics from the backend API (extracted from today's news).
-async function getTrendingTopics() {
-  try {
-    const resp = await fetch("/api/topics/trending");
-    if (resp.ok) {
-      const data = await resp.json();
-      if (Array.isArray(data.topics) && data.topics.length > 0) {
-        return data.topics;
-      }
-    }
-  } catch (e) { console.warn("[topic] API failed:", e); }
-  return [];
-}
-
-async function openTopic(slug, label) {
-  try {
-    setCaption("ĐANG TẢI TIN: " + label, "live");
-    let items;
-    // AI topic -> use VNEWS AI feed for better results
-    if (slug === "ai") {
-      items = await getVnewsAIFeed(NEWS_PAGE_SIZE);
-    } else {
-      const raw = await getFilteredNews(slug);
-      items = (Array.isArray(raw) ? raw : []).map((n) => ({
-        title: n.title, link: n.link, image: n.image || "",
-        source: n.source || "Tin tức", vnews: Boolean(n.vnews),
-      }));
-    }
-    showNewsPanel(items);
-    const nt = document.getElementById("news-title");
-    if (nt) nt.textContent = "📰 Tin: " + label;
-    document.querySelectorAll(".topic-chip").forEach((c) => c.classList.toggle("active", c.dataset.slug === slug));
-    if (!items.length) setCaption("Không có tin cho: " + label, "error");
-  } catch (e) {
-    console.warn("[topic] openTopic:", e);
-    setCaption("LỖI TẢI TIN: " + label, "error");
-  }
-}
-
-// Render today's real trending topics INSIDE the chat, right under the avatar's
-// greeting, so they are always visible. Clicking a chip opens that topic's news.
-let _topicTagsRendered = false;
-async function renderTopicTags() {
-  if (_topicTagsRendered) {
-    // Re-render existing tags (update content, re-add AI if missing)
-    const oldEl = chatMessages.querySelector("#topic-tags-inline");
-    if (oldEl) oldEl.remove();
-    _topicTagsRendered = false;
-  }
-  let topics = [];
-  try { topics = await getTrendingTopics(); } catch (e) { console.warn("[topic] getTrending:", e); }
-  if (!topics.length) return;
-  const wrap = document.createElement("div");
-  wrap.className = "topic-tags";
-  wrap.id = "topic-tags-inline";
-  for (const c of topics) {
-    const chip = document.createElement("button");
-    chip.type = "button";
-    chip.className = "topic-chip";
-    chip.dataset.slug = c.slug;
-    chip.textContent = "#" + c.label.replace(/\s+/g, "_");
-    chip.addEventListener("click", () => void openTopic(c.slug, c.label));
-    wrap.appendChild(chip);
-  }
-  const oldEl = chatMessages.querySelector("#topic-tags-inline");
-  if (oldEl) oldEl.remove();
-  chatMessages.appendChild(wrap);
-  chatMessages.scrollTop = chatMessages.scrollHeight;
-  _topicTagsRendered = true;
-}
-
-async function getVnewsHomepage() {
-  const data = await vnewsFetch(`/api/homepage`);
-  if (!Array.isArray(data)) return [];
-  return data
-    .filter((a) => a && a.title && a.link)
-    .map((a) => ({
-      title: a.title,
-      link: a.link,
-      image: a.img || "",
-      source: a.group || a.source || "VNEWS",
-      vnews: true,
-    }));
-}
-
-/** Search VNEWS articles by a free-text query (case-insensitive, in title). */
-function searchVnews(query, limit = 8) {
-  const q = (query || "").toLowerCase().trim();
-  if (!q) return vnewsArticles.slice(0, limit);
-  return vnewsArticles
-    .filter((a) => a.title.toLowerCase().includes(q))
-    .slice(0, limit);
-}
-
-/** Format VNEWS articles as clickable link cards for the avatar to cite. */
-function vnewsLinksAsHtml(articles) {
-  if (!articles.length) return "(không có bài viết VNEWS phù hợp)";
-  return articles
-    .map((a, i) => {
-      const short = `${VNEWS_BASE}/?p=${encodeURIComponent(a.link)}`;
-      return `${i + 1}. <a href="${a.link}" target="_blank" rel="noopener">${a.title}</a> — nguồn ${a.source} (link rút gọn: ${short})`;
-    })
-    .join("<br>");
-}
-
-const DEFAULT_INSTRUCTIONS = [
-  "You are a friendly voice assistant with a visible, human-like 3D avatar.",
-  "CRITICAL: Always respond in the SAME LANGUAGE that the user writes or speaks.",
-  "If Vietnamese, respond in Vietnamese. If English, respond in English.",
-  "When Vietnamese: write dates as 'ngày 9 tháng 7 năm 2026' (NOT '9/7/2026'),",
-  "CRITICAL: When speaking Vietnamese, always write numbers as Vietnamese words (e.g. 'ba mươi lăm' not '35'). This ensures the TTS voice reads them correctly.",
-  "Keep replies short, natural, warm. Never list-like.",
-  "You can control avatar body with tools: set_mood, make_hand_gesture, make_facial_expression. Use them naturally.",
-  "NEVER guess. Use search_web, search_wikipedia, or get_vnews_news for ANY factual question.",
-  "When you cite a VNEWS article, ALWAYS include the direct link as a clickable <a href> tag AND mention the short link form.",
-  "Never mention tools or that you control an avatar.",
-  "Source links should be formatted as popup links with <a href> tags.",
-].join(" ");
-
-const STORAGE_KEYS = {
-  voice: "avatar.voice", avatar: "avatar.model", instructions: "avatar.instructions",
-  directUrl: "avatar.directUrl", subtitles: "avatar.subtitles",
-};
-
-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 } }, 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 } }, required: ["gesture"] } },
-  { type: "function", name: "make_facial_expression", description: "Make a quick facial expression, given as a single face emoji.", parameters: { type: "object", properties: { emoji: { type: "string" } }, required: ["emoji"] } },
-  { type: "function", name: "get_current_datetime", description: "Get current date and time.", parameters: { type: "object", properties: {} } },
-  { type: "function", name: "search_wikipedia", description: "Search Wikipedia for a topic.", parameters: { type: "object", properties: { query: { type: "string" } }, required: ["query"] } },
-  { type: "function", name: "search_web", description: "Search the web for current info.", parameters: { type: "object", properties: { query: { type: "string" } }, required: ["query"] } },
-  { type: "function", name: "get_vnews_news", description: "Search the connected VNEWS site for Vietnamese news articles (AI, tech, sports, world...). Returns article titles with direct links and short links. Use this when the user asks about news, especially AI/technology, or after VNEWS is connected.", parameters: { type: "object", properties: { query: { type: "string", description: "Keyword to search, e.g. 'AI', 'bóng đá', 'thời sự'. Empty = latest." } }, required: ["query"] } },
-];
-
-// ── DOM elements ─────────────────────────────────────────────────────────
-const $ = (sel) => document.querySelector(sel);
-const stageNode = $("#stage");
-const mainBtn = $("#main-btn");
-const mainBtnLabel = $("#main-btn-label");
-const muteBtn = $("#mute-btn");
-const textModeBtn = $("#text-mode-btn");
-const caption = $("#caption");
-const subtitles = $("#subtitles");
-const loading = $("#loading");
-const settingsBtn = $("#settings-btn");
-const settingsDialog = $("#settings");
-const inputVoice = $("#voice");
-const inputInstructions = $("#instructions");
-const inputDirectUrl = $("#direct-url");
-const inputSubtitles = $("#subtitles-toggle");
-const directUrlRow = $("#direct-url-row");
-const textChat = $("#text-chat");
-const chatHeader = $("#chat-header");
-const chatMessages = $("#chat-messages");
-const chatInput = $("#chat-input");
-const chatSendBtn = $("#chat-send-btn");
-const chatMicBtn = $("#chat-mic-btn");
-const chatCloseBtn = $("#chat-close-btn");
-const chatResizeHandle = $("#chat-resize-handle");
-const chatAvatarSelect = $("#chat-avatar-select");
-const settingsAvatarSelect = $("#settings-avatar-select");
-const newsPanel = $("#news-panel");
-const newsList = $("#news-list");
-const newsCloseBtn = $("#news-close-btn");
-const newsToggleBtn = $("#news-toggle-btn");
-const newsLoadMore = $("#news-loadmore");
-const newsLoadMoreBtn = $("#news-loadmore-btn");
-const newsSentinel = $("#news-sentinel");
-const newsResizeHandle = $("#news-resize-handle");
-
-// ── State ───────────────────────────────────────────────────────────────
-const stage = new AvatarStage(stageNode);
-let client = null;
-let muted = false;
-let subtitleTimer = 0;
-let textMode = false;
-let voiceTyper = null;
-let config = { lb: false, allowDirect: true };
-let sessionInProgress = false;
-let _lastVoiceText = "";
-let _lastVoiceSendMs = 0;
-let autoGreetingSent = false;
-let preFetchedNews = [];
-let latestNewsUrl = null;
-let latestNewsSource = null;
-
-// ── News box state ──────────────────────────────────────────────────────
-let newsOffset = 0;        // how many items already rendered
-let newsLoading = false;   // guard against concurrent loads
-let newsHasMore = true;
-let newsObserver = null;
-
-// ── News sequence (for walking images through the conversation) ──────────
-let newsSeq = [];          // ordered list of news items to surface images from
-let newsSeqIdx = -1;       // index of the NEXT image to show
-let newsTopicQuery = "";   // current topic keyword (empty = general hot news)
-
-function loadSettings() {
-  return {
-    voice: localStorage.getItem(STORAGE_KEYS.voice) || DEFAULT_VOICE,
-    avatar: localStorage.getItem(STORAGE_KEYS.avatar) || "vuong.glb",
-    instructions: localStorage.getItem(STORAGE_KEYS.instructions) || "",
-    directUrl: localStorage.getItem(STORAGE_KEYS.directUrl) || "",
-    subtitles: localStorage.getItem(STORAGE_KEYS.subtitles) === "1",
-  };
-}
-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");
-}
-
-function getSourceName(hostname) {
-  const name = hostname.replace(/^www\./, "").toLowerCase();
-  const known = {
-    "vnexpress.net": "VnExpress",
-    "dantri.com.vn": "Dân trí",
-    "tuoitre.vn": "Tuổi Trẻ",
-    "thanhnien.vn": "Thanh Niên",
-    "vietnamnet.vn": "VietNamNet",
-    "zingnews.vn": "ZingNews",
-    "cafef.vn": "CafeF",
-    "genk.vn": "GenK",
-    "kenh14.vn": "Kênh 14",
-    "afamily.vn": "Afamily",
-    "plo.vn": "PLO",
-    "vtc.vn": "VTC",
-  };
-  return known[name] || name;
-}
-
-/** Short label/initial used for the avatar bubble when no image is available. */
-function sourceInitial(source) {
-  const map = {
-    "VnExpress": "Vn", "Dân trí": "DT", "Tuổi Trẻ": "TT", "Thanh Niên": "TN",
-    "VietNamNet": "VN", "ZingNews": "Z", "Kênh 14": "K14", "CafeF": "CF",
-    "GenK": "GK", "Afamily": "AF", "PLO": "PLO", "VTC": "VTC", "GenK AI": "AI",
-  };
-  return map[source] || (source ? source.slice(0, 2).toUpperCase() : "?");
-}
-
-/** Vietnamese date: "thứ Sáu, ngày 17 tháng 7 năm 2026". */
-function formatVietnameseDate(now) {
-  const weekdays = ["Chủ nhật", "thứ Hai", "thứ Ba", "thứ Tư", "thứ Năm", "thứ Sáu", "thứ Bảy"];
-  const wd = weekdays[now.getDay()];
-  return `${wd}, ngày ${now.getDate()} tháng ${now.getMonth() + 1} năm ${now.getFullYear()}`;
-}
-
-/** Vietnamese time phrasing: 10 AM -> "10h trưa", 6 PM+ -> "6h tối". */
-function formatVietnameseTime(now) {
-  let h = now.getHours();
-  const m = now.getMinutes();
-  let part;
-  if (h >= 0 && h < 5) part = "đêm";
-  else if (h < 10) part = "sáng";
-  else if (h < 13) part = "trưa"; // 10h, 11h, 12h -> trưa
-  else if (h < 18) part = "chiều";
-  else part = "tối"; // 18h trở đi -> tối
-  const hh = h === 0 ? 12 : h;
-  if (m === 0) return `${hh}h ${part}`;
-  return `${hh}h${m < 10 ? "0" : ""}${m} ${part}`;
-}
-
-function effectiveInstructions(newsItems) {
-  const now = new Date();
-  const dateStr = formatVietnameseDate(now);
-  const timeStr = formatVietnameseTime(now);
-  const dateLine = `Hôm nay là ${dateStr}. Thời gian hiện tại là ${timeStr}.`;
-  const extra = settings.instructions.trim();
-  const introLine = "Tôi tên là Vương đến V.AI STUDIO.";
-  // Trending topics are now fetched from the backend API /api/topics/trending
-  // which extracts real topics from today's news. The frontend getTrendingTopics()
-  // calls this API and renders the topic chips.
-
-  let newsInst = "";
-  if (newsItems && newsItems.length > 0) {
-    const topNews = newsItems[0];
-    const sourceName = getSourceName(new URL(topNews.link).hostname);
-    newsInst = `\n\nWhen you start the conversation, greet the user naturally with this EXACT format:\n"${introLine} ${dateStr}. ${timeStr}.\nTin HOT nhất hôm nay: ${topNews.title} (nguồn ${sourceName})"\nInclude the full title and source name in parentheses. After greeting, offer to help with questions.`;
-  } else {
-    newsInst = `\n\nWhen you start the conversation, greet the user naturally with this EXACT format:\n"${introLine} ${dateStr}. ${timeStr}."\nThen offer to help with questions.`;
-  }
-
-
-
-
-  let vnewsInst = "";
-  if (vnewsConnected && vnewsArticles.length > 0) {
-    const sample = vnewsArticles.slice(0, 6).map((a) => `• ${a.title} (${a.source})`).join("\n");
-    vnewsInst = `\n\nVNEWS is connected. You can answer using the latest VNEWS headlines and MUST cite them with direct <a href> links. Latest VNEWS headlines:\n${sample}`;
-  }
-
-  const base = `${dateLine}\n\n${DEFAULT_INSTRUCTIONS}${newsInst}${vnewsInst}`;
-  return extra ? `${base}\n\nAdditional user instructions:\n${extra}` : base;
-}
-
-// ── News image card (shown inside chat) ─────────────────────────────────
-function newsImageCardHtml(item) {
-  const imgUrl = item.image || (item.images && item.images[0]) || "";
-  const src = imgUrl
-    ? `<img class="news-card-img" src="${imgUrl}" alt="" loading="lazy" onerror="this.style.display='none'" />`
-    : `<div class="news-card-img news-card-img--fallback">${sourceInitial(item.source)}</div>`;
-  const link = item.link
-    ? `data-link="${item.link.replace(/"/g, "&quot;")}"`
-    : "";
-  return `<div class="news-card" ${link}>${src}<div class="news-card-meta"><span class="news-card-source">${item.source || "Tin tức"}</span><span class="news-card-title">${item.title}</span></div></div>`;
-}
-
-// ── News Panel ─────────────────────────────────────────────────────────
-function buildNewsItem(item, idx) {
-  const el = document.createElement("div");
-  el.className = "news-item";
-
-  const thumb = document.createElement("div");
-  thumb.className = "news-thumb";
-  if (item.image) {
-    const img = document.createElement("img");
-    img.loading = "lazy";
-    img.alt = "";
-    img.src = item.image;
-    img.addEventListener("error", () => {
-      thumb.classList.add("news-thumb--fallback");
-      thumb.textContent = sourceInitial(item.source);
-      img.remove();
-    });
-    thumb.appendChild(img);
-  } else {
-    thumb.classList.add("news-thumb--fallback");
-    thumb.textContent = sourceInitial(item.source);
-  }
-
-  const body = document.createElement("div");
-  body.className = "news-body";
-
-  const meta = document.createElement("div");
-  meta.className = "news-meta";
-  meta.innerHTML = `<span class="news-source">${item.source || "Tin tức"}</span>` +
-    (typeof idx === "number" ? `<span class="news-index">#${idx + 1}</span>` : "");
-
-  const title = document.createElement("div");
-  title.className = "news-title";
-  title.textContent = item.title;
-
-  if (item.description) {
-    const desc = document.createElement("div");
-    desc.className = "news-desc";
-    desc.textContent = item.description;
-    body.appendChild(desc);
-  }
-
-  body.appendChild(meta);
-  body.appendChild(title);
-
-  el.appendChild(thumb);
-  el.appendChild(body);
-
-  // Action row: open source + ask in chat
-  const actions = document.createElement("div");
-  actions.className = "news-actions";
-
-  const srcBtn = document.createElement("button");
-  srcBtn.className = "news-act-btn";
-  srcBtn.type = "button";
-  srcBtn.textContent = "🔗 Nguồn";
-  srcBtn.addEventListener("click", (e) => {
-    e.stopPropagation();
-    // VNEWS items open the short link so highlights/videos play on VNEWS.
-    const url = item.vnews && item.link ? `${VNEWS_BASE}/?p=${encodeURIComponent(item.link)}` : item.link;
-    if (url) window.open(url, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
-  });
-
-  const askBtn = document.createElement("button");
-  askBtn.className = "news-act-btn news-act-btn--ask";
-  askBtn.type = "button";
-  askBtn.textContent = "💬 Hỏi";
-  askBtn.addEventListener("click", (e) => {
-    e.stopPropagation();
-    askAboutNews(item);
-  });
-
-  actions.appendChild(srcBtn);
-  actions.appendChild(askBtn);
-  el.appendChild(actions);
-
-  // Clicking the card body opens the source (VNEWS short link for VNEWS items).
-  el.addEventListener("click", () => {
-    const url = item.vnews && item.link ? `${VNEWS_BASE}/?p=${encodeURIComponent(item.link)}` : item.link;
-    if (url) window.open(url, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
-  });
-  return el;
-}
-
-/** Fill the chat input with a question about a news item and focus/start chat. */
-function askAboutNews(item) {
-  const q = `Kể chi tiết về tin này: ${item.title}`;
-  chatInput.value = q;
-  showTextChat(true);
-  textModeBtn.classList.add("active");
-  textMode = true;
-  chatInput.focus();
-  if (!client || !sessionInProgress) {
-    void startTextSession(q);
-  } else {
-    addChatMessage("user", q);
-    void maybeSwitchTopic(q);
-    if (!sendTextViaSession(q)) setCaption("QUEUED…");
-  }
-}
-
-function showNewsPanel(items) {
-  if (!newsPanel || !newsList) return;
-
-  newsList.innerHTML = "";
-  newsOffset = 0;
-  newsHasMore = true;
-
-  if (!items || items.length === 0) {
-    const empty = document.createElement("div");
-    empty.className = "news-empty";
-    empty.textContent = "Không có tin tức cho chủ đề này.";
-    newsList.appendChild(empty);
-    newsLoadMore.hidden = true;
-    newsPanel.hidden = false;
-    return;
-  }
-
-  items.forEach((item, i) => newsList.appendChild(buildNewsItem(item, i)));
-  newsOffset = items.length;
-  newsHasMore = items.length >= NEWS_PAGE_SIZE;
-  newsLoadMore.hidden = !newsHasMore;
-
-  newsPanel.hidden = false;
-  setupNewsObserver();
-}
-
-function appendNewsItems(items) {
-  if (!items || items.length === 0) {
-    newsHasMore = false;
-    newsLoadMore.hidden = true;
-    return;
-  }
-  items.forEach((item) => newsList.appendChild(buildNewsItem(item, newsOffset++)));
-}
-
-async function loadMoreNews() {
-  if (newsLoading || !newsHasMore) return;
-  newsLoading = true;
-  newsLoadMoreBtn.classList.add("loading");
-  newsLoadMoreBtn.disabled = true;
-
-  // If we're on a filtered topic, "load more" just re-fetches the filtered set.
-  let items;
-  if (newsTopicQuery) {
-    items = await getFilteredNews(newsTopicQuery, NEWS_PAGE_SIZE);
-  } else {
-    const r = await getMoreNews(newsOffset, NEWS_PAGE_SIZE);
-    items = r.items;
-    newsHasMore = r.hasMore;
-    newsOffset = r.nextOffset;
-  }
-  appendNewsItems(items);
-  if (!newsTopicQuery) newsLoadMore.hidden = !newsHasMore;
-  else newsLoadMore.hidden = true; // filtered set is already complete
-
-  newsLoadMoreBtn.classList.remove("loading");
-  newsLoadMoreBtn.disabled = false;
-  newsLoading = false;
-}
-
-function setupNewsObserver() {
-  if (newsObserver) newsObserver.disconnect();
-  if (!newsSentinel || !("IntersectionObserver" in window)) return;
-  newsObserver = new IntersectionObserver((entries) => {
-    for (const entry of entries) {
-      if (entry.isIntersecting && newsHasMore && !newsLoading && !newsTopicQuery) {
-        void loadMoreNews();
-      }
-    }
-  }, { root: newsList, rootMargin: "120px" });
-  newsObserver.observe(newsSentinel);
-}
-
-// ── Topic detection & news sequence ─────────────────────────────────────
-const VI_STOPWORDS = new Set([
-  "tôi", "bạn", "anh", "chị", "cô", "chú", "bác", "ông", "bà", "nó", "họ", "ta", "minh",
-  "có", "không", "được", "là", "và", "với", "của", "cho", "trong", "ngoài", "về", "tại", "từ",
-  "để", "khi", "nếu", "như", "đó", "này", "kia", "gì", "nào", "đâu", "ai", "sao", "thế",
-  "hãy", "xin", "vui", "lòng", "giúp", "biết", "tin", "tức", "bài", "viết", "nói", "chuyện",
-  "chủ", "đề", "muốn", "hỏi", "xem", "nghe", "à", "ừ", "ok", "okay", "ồ", "nhé", "nhỉ", "ạ",
-  "đây", "nè", "một", "hai", "ba", "mấy", "các", "những", "cái", "con", "chiếc", "bản",
-  "hôm", "nay", "tới", "mới", "nhất", "kể",
-]);
-
-/** Decide if the user is continuing the current news thread (not switching). */
-function isFollowUp(text) {
-  const t = (text || "").toLowerCase();
-  // Only truly-continuation cues force a follow-up. Topic phrases like
-  // "kể về X", "tin tức X", "cho tôi biết về X" are treated as new topics.
-  if (/(tiếp|tiếp tục|nữa|thêm tin|tin này|tin đó|tin khác|còn tin|tin hot|tin nóng|tin hôm nay|tóm tắt|tóm lại|giải thích|ý nghĩa|chi tiết hơn|kể thêm)/.test(t)) {
-    return true;
-  }
-  return t.trim().split(/\s+/).length <= 3;
-}
-
-/** Detect an explicit AI / công nghệ request (route to GenK AI feed). */
-function isAITopic(text) {
-  const t = (text || "").toLowerCase();
-  return /(\bai\b|trí tuệ nhân tạo|a\.i|a i|robot|machine learning|deep learning|chatbot|generative|gen ai|llm|gpt|qwen|kimi|chatgpt|gemini|openai|claude|tạo ảnh|tạo video|ứng dụng ai)/.test(t);
-}
-
-/** Extract a short keyword query from a user message (Vietnamese-aware). */
-function extractTopicQuery(text) {
-  if (isFollowUp(text)) return ""; // follow-ups never trigger a topic switch
-  const words = (text || "")
-    .toLowerCase()
-    .replace(/[^a-zà-ỹ0-9\s]/g, " ")
-    .split(/\s+/)
-    .filter(Boolean);
-  // Keep meaningful words (>=2 chars, not a stopword). Compound nouns like
-  // "bóng đá", "kinh tế", "bóng rổ" stay intact because both parts are kept.
-  const keywords = words.filter((w) => w.length >= 2 && !VI_STOPWORDS.has(w));
-  if (!keywords.length) return "";
-  return keywords.slice(0, 2).join(" ");
-}
-
-/**
- * Called when the user sends a message. If it's a new topic, re-filter the
- * news list to that topic and reset the image sequence. AI topics pull the
- * GenK "AI" feed from VNEWS.
- */
-async function maybeSwitchTopic(userText) {
-  if (isFollowUp(userText)) return false; // keep current sequence/list
-
-  // AI topic -> pull GenK AI feed from VNEWS.
-  if (isAITopic(userText)) {
-    const aiItems = await getVnewsAIFeed(NEWS_PAGE_SIZE);
-    if (aiItems.length) {
-      newsTopicQuery = "ai";
-      preFetchedNews = aiItems;
-      newsSeq = aiItems.slice();
-      newsSeqIdx = -1;
-      showNewsPanel(aiItems);
-      setCurrentNews(aiItems[0]);
-      return true;
-    }
-    // Fall back to general news filter on "ai".
-    const filtered = await getFilteredNews("ai", NEWS_PAGE_SIZE);
-    if (filtered.length) {
-      newsTopicQuery = "ai";
-      preFetchedNews = filtered;
-      newsSeq = filtered.slice();
-      newsSeqIdx = -1;
-      showNewsPanel(filtered);
-      setCurrentNews(filtered[0]);
-      return true;
-    }
-    return false;
-  }
-
-  const query = extractTopicQuery(userText);
-  if (!query || query === newsTopicQuery) return false;
-
-  const filtered = await getFilteredNews(query, NEWS_PAGE_SIZE);
-  if (!filtered.length) return false; // no news for this topic -> keep general
-
-  newsTopicQuery = query;
-  preFetchedNews = filtered;
-  newsSeq = filtered.slice();
-  newsSeqIdx = -1;
-  showNewsPanel(filtered);
-  setCurrentNews(filtered[0]);
-  return true;
-}
-
-// Current news item being discussed + which image to show next.
-let curNews = null;
-let curImgIdx = 0;
-
-/** Return the next image URL for the CURRENT news item, looping through its
- *  images (image[0], image[1], ...). Falls back to a single image. */
-function nextNewsImage() {
-  if (!curNews) return null;
-  const imgs = (curNews.images && curNews.images.length)
-    ? curNews.images
-    : (curNews.image ? [curNews.image] : []);
-  if (!imgs.length) return null;
-  const url = imgs[curImgIdx % imgs.length];
-  curImgIdx += 1;
-  return url;
-}
-
-/** Set the news item currently being discussed (resets the image cursor). */
-function setCurrentNews(item) {
-  curNews = item || null;
-  curImgIdx = 0;
-}
-
-// ── Avatar list ─────────────────────────────────────────────────────────
-let avatarList = [];
-let avatarThumbs = {}; // name -> thumbnail URL (persisted on Space)
-
-async function fetchAvatarList() {
-  try {
-    const resp = await fetch("/api/avatars");
-    if (resp.ok) {
-      const data = await resp.json();
-      avatarList = (data.avatars || []).map((a) => (typeof a === "string" ? a : a.name));
-      // Store thumbnail URLs from the API response
-      avatarThumbs = {};
-      for (const a of (data.avatars || [])) {
-        if (typeof a === "object" && a.name && a.thumbnail) {
-          avatarThumbs[a.name] = a.thumbnail;
-        }
-      }
-    }
-  } 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;
-      opt.textContent = name.replace(/\.glb$/i, "").replace(/_/g, " ") + (name.toLowerCase() === "vuong.glb" ? " 🎙️" : "");
-      sel.appendChild(opt);
-    }
-
-    if (selectedName && avatarList.includes(selectedName)) {
-      sel.value = selectedName;
-    }
-  }
-}
-  updateAvatarThumbPreview();
-
-
-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))}%`;
-        }
-      }
-    });
-    stage.resume(); // keep the render loop running so the avatar stays visible
-  } catch (err) {
-    console.error(err);
-  }
-
-  loading.classList.add("done");
-}
-
-// ── Chat / captions ────────────────────────────────────────────────────
-function clampRect() {
-  const vw = window.innerWidth, vh = window.innerHeight;
-  const r = textChat.getBoundingClientRect();
-  let l = r.left, t = r.top;
-  l = Math.max(10, Math.min(l, vw - r.width - 10));
-  t = Math.max(10, Math.min(t, vh - r.height - 10));
-  textChat.style.left = `${l}px`;
-  textChat.style.top = `${t}px`;
-}
-
-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);
-    textChat.style.left = `${startLeft + p.x - startX}px`;
-    textChat.style.top = `${startTop + p.y - startY}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);
-}
-
-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);
-    textChat.style.width = `${Math.max(260, startW + p.x - startX)}px`;
-    textChat.style.height = `${Math.max(120, startH + p.y - startY)}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);
-}
-
-function setCaption(text, kind = "") {
-  caption.textContent = text;
-  caption.className = kind;
-}
-
-function showSubtitles(text) {
-  if (!settings.subtitles) return;
-  clearTimeout(subtitleTimer);
-  subtitles.innerHTML = text;
-  subtitles.classList.add("visible");
-
-  subtitles.querySelectorAll("a[href]").forEach((a) => {
-    a.addEventListener("click", (e) => {
-      e.preventDefault();
-      const href = a.getAttribute("href");
-      if (href) {
-        window.open(href, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
-      }
-    });
-  });
-}
-
-function fadeSubtitles(delayMs = 2600) {
-  clearTimeout(subtitleTimer);
-  subtitleTimer = window.setTimeout(() => subtitles.classList.remove("visible"), delayMs);
-}
-
-function escapeRegex(str) {
-  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-}
-
-function addChatMessage(role, text, newsItem = null) {
-  const msg = document.createElement("div");
-  msg.className = `chat-message ${role}`;
-  msg.dataset.text = text; // store plain text for rewrite selection
-  if (newsItem) {
-    if (newsItem.image) msg.dataset.img = newsItem.image;
-    if (newsItem.link) msg.dataset.src = newsItem.link;
-  }
-
-  // Detect AI keywords in assistant messages for tag display
-  let detectedAIKeywords = [];
-  if (role === "assistant" && text) {
-    const t = text.toLowerCase();
-    const AI_PATTERNS = [
-      "AI", "trí tuệ nhân tạo", "LLM", "GPT", "Qwen", "Kimi", "ChatGPT",
-      "Gemini", "OpenAI", "Claude", "machine learning", "deep learning",
-      "chatbot", "ứng dụng AI", "tạo ảnh", "tạo video", "AI tạo sinh",
-      "thông minh nhân tạo", "mô hình ngôn ngữ", "học sâu", "học máy",
-      "neural network", "mạng nơ-ron"
-    ];
-    for (const kw of AI_PATTERNS) {
-      if (t.includes(kw.toLowerCase())) {
-        detectedAIKeywords.push(kw);
-      }
-    }
-  }
-
-  let displayText = text;
-  if (role === "assistant" && latestNewsUrl && latestNewsSource) {
-    const sourceEscaped = escapeRegex(latestNewsSource);
-    const patterns = [
-      new RegExp(`\\(nguồn\\s*${sourceEscaped}\\)`, 'gi'),
-      new RegExp(`\\(Nguồn\\s*${sourceEscaped}\\)`, 'gi'),
-    ];
-
-    for (const pattern of patterns) {
-      if (pattern.test(displayText)) {
-        displayText = displayText.replace(pattern, (match) =>
-          `<a href="${latestNewsUrl}" target="_blank" rel="noopener" style="color:#22d3ee;text-decoration:none;">${match}</a>`
-        );
-        break;
-      }
-    }
-  }
-
-  msg.innerHTML = displayText;
-
-  // Attach a news image card (for greeting + each subsequent answer).
-  // Render even when the image is missing: newsImageCardHtml shows a
-  // gradient fallback using the source initials, so the user always sees
-  // a clickable source card.
-  if ((role === "assistant") && newsItem) {
-    const card = document.createElement("div");
-    card.innerHTML = newsImageCardHtml(newsItem).trim();
-    const cardEl = card.firstElementChild;
-    if (cardEl) {
-      cardEl.addEventListener("click", () => {
-        if (newsItem.link) window.open(newsItem.link, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
-      });
-      msg.appendChild(cardEl);
-    }
-  }
-
-  // Render AI keyword tags under assistant messages
-  if (role === "assistant" && detectedAIKeywords.length > 0) {
-    const tagRow = document.createElement("div");
-    tagRow.style.cssText = "display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;";
-    for (const kw of detectedAIKeywords) {
-      const tag = document.createElement("span");
-      tag.textContent = "\ud83e\udd16 " + kw;
-      tag.style.cssText = "font-size:11px;background:rgba(59,130,246,0.15);color:#60a5fa;padding:2px 8px;border-radius:10px;border:1px solid rgba(59,130,246,0.3);";
-      tagRow.appendChild(tag);
-    }
-    msg.appendChild(tagRow);
-  }
-
-  // Click a message to toggle multi-select (avatar + user messages) for rewrite.
-  msg.addEventListener("click", () => {
-    msg.classList.toggle("selected");
-    updateRewriteButton();
-  });
-
-  chatMessages.appendChild(msg);
-  chatMessages.scrollTop = chatMessages.scrollHeight;
-
-  msg.querySelectorAll("a[href]").forEach((a) => {
-    a.addEventListener("click", (e) => {
-      e.preventDefault();
-      const href = a.getAttribute("href");
-      if (href) {
-        window.open(href, "_blank", "noopener,noreferrer,width=800,height=600,scrollbars=yes");
-      }
-    });
-  });
-
-  if (role === "assistant" && preFetchedNews.length > 0) {
-    showNewsPanel(preFetchedNews.slice(0, NEWS_PAGE_SIZE));
-  }
-}
-
-function showTextChat(show) {
-  textChat.hidden = !show;
-  if (chatMicBtn) chatMicBtn.hidden = !show;
-  // Remove fakemic flag so mic button can request real mic later
-  if (show) {
-    const url = new URL(location.href);
-    url.searchParams.delete("fakemic");
-    history.replaceState(null, "", url.href);
-  }
-}
-
-/** Handle Vietnamese voice recognition result: fill chat input, auto-send on "Gửi". */
-function onVoiceResult(e) {
-  if (!e || !e.transcript) return;
-  if (!chatInput) return;
-  // Ignore results when AI is speaking or session not in user-turn
-  if (!sessionInProgress) return;
-  const text = e.transcript.trim();
-  chatInput.value = text;
-  if (e.isFinal && sessionInProgress) {
-    // Auto-send trigger phrases (Vietnamese + English)
-    const triggerRe = /(?:gửi đi|gửi|send|ok|đồng ý|đồng)\s*$/i;
-    if (triggerRe.test(text)) {
-      setCaption("Đang gửi…", "live");
-      sendTextMessage();
-      // Stop voice typing after auto-send — user must click mic again to speak
-      if (voiceTyper && voiceTyper.active) {
-        voiceTyper.stop();
-      }
-    } else {
-      setCaption("Nhấp Send để gửi", "live");
-    }
-  }
-}
-
-/** Start (or restart) Vietnamese voice recognition in text chat mode. */
-function startVoiceTyping() {
-  if (!sessionInProgress || !chatInput) return false;
-  // Don't restart if already listening
-  if (voiceTyper && voiceTyper.active) return true;
-  // FIX: stop any previous VoiceTyper first — orphaned instances steal the mic
-  if (voiceTyper) {
-    voiceTyper.stop();
-    voiceTyper = null;
-  }
-  voiceTyper = new VoiceTyper({ lang: "vi-VN", continuous: true, interimResults: true, autoSubmit: false });
-  if (!voiceTyper.init()) {
-    // Browser may not support Vietnamese locale — try English as fallback
-    voiceTyper = new VoiceTyper({ lang: "en-US", continuous: true, interimResults: true, autoSubmit: false });
-    if (!voiceTyper.init()) {
-      setCaption("VOICE NOT SUPPORTED", "error");
-      voiceTyper = null;
-      return false;
-    }
-  }
-  voiceTyper.onResult = onVoiceResult;
-  voiceTyper.onError = (e) => console.warn("[voiceTyper]", e);
-  voiceTyper.onSoundStart = () => setCaption("🎤 Listening…", "live");
-  voiceTyper.onSoundEnd = () => {
-    // Keep listening — only stop when AI speaks or user clicks mic again
-    if (voiceTyper && voiceTyper.active) {
-      // Do nothing; continuous listening is intentional
-    }
-  };
-  voiceTyper.start();
-  setCaption("🎤 Listening…", "live");
-  return true;
-}
-
-/** Stop Vietnamese voice recognition and return to text input. */
-function stopVoiceTyping() {
-  if (voiceTyper && voiceTyper.active) {
-    voiceTyper.stop();
-    voiceTyper = null;
-    setCaption("Voice stopped", "live");
-  }
-}
-
-function sendTextViaSession(text) {
-  if (!client) return false;
-  const st = client._status;
-  if (st !== "connected" && st !== "ai-speaking" && st !== "processing" && st !== "user-speaking") {
-    return false;
-  }
-  setCaption("SENDING…");
-  client.sendUserText(text);
-  client.requestResponse();
-  return true;
-}
-
-function sendTextMessage() {
-  const text = chatInput.value.trim();
-  if (!text) return;
-
-  // Dedup: ignore if this exact message was already sent recently
-  if (text === _lastVoiceText && Date.now() - _lastVoiceSendMs < 3000) return;
-  _lastVoiceText = text;
-  _lastVoiceSendMs = Date.now();
-
-  addChatMessage("user", text);
-
-  // New topic? re-filter the news list and reset the image sequence.
-  if (client && sessionInProgress) {
-    void maybeSwitchTopic(text);
-  }
-
-  if (!client || !sessionInProgress) {
-    void startTextSession(text);
-    return;
-  }
-
-  if (!sendTextViaSession(text)) {
-    setCaption("QUEUED…");
-  }
-  // Voice typing stays active for continuous conversation;
-  // it will auto-stop when the AI starts speaking.
-}
-
-if (newsCloseBtn) {
-  newsCloseBtn.addEventListener("click", (e) => {
-    e.stopPropagation();
-    newsPanel.hidden = true;
-  });
-}
-
-if (newsToggleBtn) {
-  newsToggleBtn.addEventListener("click", () => {
-    newsPanel.hidden = !newsPanel.hidden;
-  });
-}
-
-if (newsLoadMoreBtn) {
-  newsLoadMoreBtn.addEventListener("click", () => void loadMoreNews());
-}
-
-if (chatCloseBtn) {
-  chatCloseBtn.addEventListener("click", (e) => {
-    e.stopPropagation();
-    textMode = false;
-    if (voiceTyper) {
-      voiceTyper.stop();
-      voiceTyper = null;
-    }
-    showTextChat(false);
-    textModeBtn.classList.remove("active");
-  });
-}
-
-// ── VNEWS control panel (created dynamically, no index.html change) ─────
-let vnewsPanel, vnewsConnectBtn, vnewsStatus, rewriteBtn, vnewsCloseBtn, vnewsToggleBtn;
-
-function buildVnewsPanel() {
-  vnewsPanel = document.createElement("div");
-  vnewsPanel.id = "vnews-panel";
-  vnewsPanel.hidden = true;
-
-  const header = document.createElement("div");
-  header.id = "vnews-header";
-  const title = document.createElement("span");
-  title.id = "vnews-title";
-  title.textContent = "VNEWS";
-  vnewsCloseBtn = document.createElement("button");
-  vnewsCloseBtn.id = "vnews-close-btn";
-  vnewsCloseBtn.className = "icon-btn small";
-  vnewsCloseBtn.textContent = "✕";
-  vnewsCloseBtn.addEventListener("click", (e) => { e.stopPropagation(); vnewsPanel.hidden = true; });
-  header.appendChild(title);
-  header.appendChild(vnewsCloseBtn);
-
-  vnewsConnectBtn = document.createElement("button");
-  vnewsConnectBtn.id = "vnews-connect-btn";
-  vnewsConnectBtn.className = "vnews-btn";
-  vnewsConnectBtn.textContent = "🔗 Kết nối VNEWS";
-  vnewsConnectBtn.addEventListener("click", () => void connectVnews());
-
-  vnewsStatus = document.createElement("div");
-  vnewsStatus.id = "vnews-status";
-  vnewsStatus.textContent = "Chưa kết nối";
-
-  rewriteBtn = document.createElement("button");
-  rewriteBtn.id = "vnews-rewrite-btn";
-  rewriteBtn.className = "vnews-btn";
-  rewriteBtn.textContent = "📝 Đăng bài rewrite";
-  rewriteBtn.disabled = true;
-  rewriteBtn.hidden = true;
-  rewriteBtn.addEventListener("click", () => void doRewriteSelected());
-
-  vnewsPanel.appendChild(header);
-  vnewsPanel.appendChild(vnewsConnectBtn);
-  vnewsPanel.appendChild(vnewsStatus);
-  vnewsPanel.appendChild(rewriteBtn);
-  document.body.appendChild(vnewsPanel);
-
-  // A small toggle button on the top bar.
-  vnewsToggleBtn = document.createElement("button");
-  vnewsToggleBtn.id = "vnews-toggle-btn";
-  vnewsToggleBtn.className = "icon-btn";
-  vnewsToggleBtn.title = "VNEWS";
-  vnewsToggleBtn.textContent = "📰";
-  vnewsToggleBtn.addEventListener("click", () => { vnewsPanel.hidden = !vnewsPanel.hidden; });
-  const topbar = document.querySelector("#topbar");
-  if (topbar) topbar.appendChild(vnewsToggleBtn);
-
-  makeVnewsDraggable();
-}
-
-async function connectVnews() {
-  vnewsConnectBtn.disabled = true;
-  vnewsConnectBtn.textContent = "⏳ Đang kết nối…";
-  vnewsStatus.textContent = "Đang tải dữ liệu VNEWS…";
-  const articles = await getVnewsHomepage();
-  if (articles.length) {
-    vnewsConnected = true;
-    vnewsArticles = articles;
-    vnewsStatus.textContent = `✅ Đã kết nối · ${articles.length} bài`;
-    vnewsConnectBtn.textContent = "✅ VNEWS đã kết nối";
-    rewriteBtn.hidden = false;
-    rewriteBtn.disabled = true; // enabled when a message is selected
-    updateRewriteButton();
-    // Refresh the avatar's instructions so it can answer from VNEWS.
-    if (client) client.updateSession({ instructions: effectiveInstructions(preFetchedNews) });
-  } else {
-    vnewsStatus.textContent = "❌ Không thể kết nối VNEWS";
-    vnewsConnectBtn.disabled = false;
-    vnewsConnectBtn.textContent = "🔗 Kết nối VNEWS";
-  }
-}
-
-function updateRewriteButton() {
-  const selected = chatMessages.querySelectorAll(".chat-message.selected");
-  let hasText = false;
-  selected.forEach((m) => { if ((m.dataset.text || "").trim().length > 0) hasText = true; });
-  // Caption hint when connected and nothing selected yet.
-  if (vnewsConnected && selected.length === 0) {
-    setCaption("CHỌN 1 HAY NHIỀU TIN NHẮN ĐỂ ĐĂNG VNEWS", "live");
-  }
-  rewriteBtn.disabled = !vnewsConnected || selected.length === 0 || !hasText;
-}
-
-/** Rewrite the selected chat content into a VNEWS wall post. */
-async function doRewriteSelected() {
-  const selected = [...chatMessages.querySelectorAll(".chat-message.selected")];
-  if (selected.length === 0) { setCaption("CHỌN TIN NHẮN ĐỂ REWRITE", "error"); return; }
-  // Combine ALL selected messages (avatar + user) into one post.
-  const context = selected
-    .map((m) => (m.dataset.text || "").trim())
-    .filter((t) => t.length > 0)
-    .join("\n\n");
-  if (context.length < 20) { setCaption("TIN NHẮN QUÁ NGẮN", "error"); return; }
-  // Prefer the original source URL of a news item so VNEWS can pull its image.
-  let srcUrl = "";
-  for (const m of selected) { if (m.dataset.src) { srcUrl = m.dataset.src; break; } }
-
-  rewriteBtn.disabled = true;
-  rewriteBtn.textContent = "⏳ AI đang xào nấu bài viết…";
-  let title = "";
-  let article = context;
-  try {
-    const sresp = await fetch("/api/summarize", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ text: context }),
-    });
-    if (sresp.ok) {
-      const sdata = await sresp.json();
-      if (sdata && sdata.body) { article = sdata.body; title = sdata.title || ""; }
-    }
-  } catch (e) { /* fall back to raw context */ }
-
-  rewriteBtn.textContent = "⏳ Đăng…";
-  try {
-    // Resolve a REAL hero image from the source article (VNEWS scrapes og:image).
-    let heroImage = srcUrl; // fallback: the article URL itself
-    if (srcUrl) {
-      try {
-        const artResp = await fetch(`${VNEWS_BASE}/api/article?url=${encodeURIComponent(srcUrl)}`, { headers: { "Accept": "application/json" } });
-        if (artResp.ok) {
-          const art = await artResp.json();
-          if (art && art.og_image) heroImage = art.og_image;
-        }
-      } catch (_) { /* keep fallback */ }
-    }
-    // Publish the AI-composed article directly (not just re-split).
-    const payload = { body: article };
-    if (title) payload.title = title;
-    if (heroImage) payload.image = heroImage;
-    if (srcUrl) payload.url = srcUrl;
-    const resp = await fetch(`${VNEWS_BASE}/api/publish`, {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify(payload),
-    });
-    const data = await resp.json();
-    if (data && data.post) {
-      const shown = (title ? `**${title}**\n\n` : "") + article;
-      addChatMessage("assistant", `✅ Đã đăng bài AI tổng hợp (${selected.length} tin nhắn) lên VNEWS:\n${shown}`);
-      setCaption("ĐÃ ĐĂNG LÊN VNEWS", "live");
-    } else {
-      addChatMessage("assistant", `⚠️ VNEWS: ${data.error || "không đăng được bài"}.`);
-    }
-  } catch (e) {
-    addChatMessage("assistant", "⚠️ Lỗi khi kết nối VNEWS để đăng bài.");
-  }
-  rewriteBtn.textContent = "📝 Đăng bài rewrite";
-  // Clear selection after posting.
-  selected.forEach((m) => m.classList.remove("selected"));
-  updateRewriteButton();
-}
-
-function makeVnewsDraggable() {
-  let dragging = false, startX, startY, startLeft, startTop;
-  const header = vnewsPanel.querySelector("#vnews-header");
-  function getPos(e) { const p = e.changedTouches ? e.changedTouches[0] : e; return { x: p.clientX, y: p.clientY }; }
-  header.addEventListener("mousedown", (e) => {
-    if (e.target.closest("#vnews-close-btn")) return;
-    dragging = true;
-    const rect = vnewsPanel.getBoundingClientRect();
-    startX = e.clientX; startY = e.clientY;
-    startLeft = rect.left; startTop = rect.top;
-    vnewsPanel.classList.add("dragging");
-    e.preventDefault();
-  });
-  document.addEventListener("mousemove", (e) => {
-    if (!dragging) return;
-    const vw = window.innerWidth, vh = window.innerHeight;
-    const w = vnewsPanel.offsetWidth, h = vnewsPanel.offsetHeight;
-    const l = Math.max(10, Math.min(startLeft + e.clientX - startX, vw - w - 10));
-    const t = Math.max(10, Math.min(startTop + e.clientY - startY, vh - h - 10));
-    vnewsPanel.style.left = `${l}px`; vnewsPanel.style.top = `${t}px`;
-    vnewsPanel.style.right = "auto"; vnewsPanel.style.bottom = "auto";
-  });
-  document.addEventListener("mouseup", () => { dragging = false; vnewsPanel.classList.remove("dragging"); });
-}
-
-// ── Button logic ────────────────────────────────────────────────────────
-let mainAction = "start";
-
-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;
-}
-
-const CAPTIONS = {
-  idle: "TAP TO TALK",
-  "creating-session": "REQUESTING A SLOT…",
-  queued: "WAITING IN LINE…",
-  "your-turn": "YOUR TURN, TAP TO JOIN",
-  connecting: "CONNECTING…",
-  connected: "GO AHEAD, I'M LISTENING",
-  "user-speaking": "LISTENING",
-  processing: "THINKING…",
-  "ai-speaking": "SPEAKING",
-  closed: "TAP TO TALK",
-  error: "SOMETHING BROKE, TAP TO RETRY",
-};
-
-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;
-  }
-
-  if (status === "ai-speaking") {
-    // AI is speaking — stop voice typing so mic doesn't pick up audio
-    if (voiceTyper && voiceTyper.active) {
-      voiceTyper.stop();
-    }
-    subtitles.classList.add("visible");
-  }
-
-  if (status === "user-speaking") {
-    // User's turn to speak — auto-start voice typing so user can speak
-    // immediately without clicking the mic button
-    setTimeout(() => startVoiceTyping(), 400);
-    subtitles.classList.remove("visible");
-    showTextChat(textMode);
-  }
-}
-
-// ── Tool runner ─────────────────────────────────────────────────────────
-function runTool(name, argsJson, callId) {
-  if (!client) return;
-
-  let args = {};
-  try { args = JSON.parse(argsJson || "{}"); } catch {}
-
-  if (name === "get_vnews_news") {
-    const query = (args.query || "").trim();
-    let articles;
-    if (vnewsConnected) articles = searchVnews(query, 8);
-    else articles = []; // not connected yet
-    const out = vnewsLinksAsHtml(articles);
-    client.sendToolOutput(callId, `Kết quả từ VNEWS${query ? ` cho "${query}"` : " (mới nhất)"}:\n${out}`);
-    client.requestResponse();
-    return;
-  }
-
-  if (name === "get_current_datetime") {
-    const now = new Date();
-    const dateStr = formatVietnameseDate(now);
-    const timeStr = formatVietnameseTime(now);
-    client.sendToolOutput(callId, `Hôm nay là ${dateStr}. Thời gian hiện tại là ${timeStr}.`);
-    client.requestResponse();
-    return;
-  }
-
-  if (name === "search_wikipedia") {
-    const query = args.query || "";
-    if (!query) {
-      client.sendToolOutput(callId, `No query.`);
-      client.requestResponse();
-      return;
-    }
-
-    fetch(`/api/wiki/summary?title=${encodeURIComponent(query.replace(/\s+/g, "_"))}`)
-      .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(sd => {
-            if (!sd.results?.length) {
-              client.sendToolOutput(callId, `No Wikipedia results for "${query}".`);
-              client.requestResponse();
-              return;
-            }
-            fetch(`/api/wiki/summary?title=${encodeURIComponent(sd.results[0].title)}`)
-              .then(r => r.json())
-              .then(sum => {
-                client.sendToolOutput(callId, sum.extract ? `From Wikipedia (${sum.title}): ${sum.extract}\nSource: ${sum.url}` : `Wikipedia: ${sd.results.slice(0, 3).map(r => `${r.title}: ${r.snippet}`).join("\n")}`);
-                client.requestResponse();
-              });
-          });
-      })
-      .catch(() => {
-        client.sendToolOutput(callId, `Wikipedia search failed.`);
-        client.requestResponse();
-      });
-    return;
-  }
-
-  if (name === "search_web") {
-    const query = args.query || "";
-    if (!query) {
-      client.sendToolOutput(callId, `No query.`);
-      client.requestResponse();
-      return;
-    }
-
-    fetch(`/api/web/search?q=${encodeURIComponent(query)}`)
-      .then(r => r.json())
-      .then(data => {
-        if (!data.results?.length) {
-          client.sendToolOutput(callId, `No web results for "${query}".`);
-          client.requestResponse();
-          return;
-        }
-        client.sendToolOutput(callId, `Web 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, `Web search failed.`);
-        client.requestResponse();
-      });
-    return;
-  }
-
-  const result = stage.runTool(name, args) ?? `Unknown tool: ${name}`;
-  client.sendToolOutput(callId, result);
-  client.requestResponse();
-}
-
-async function connectSession(c) {
-  try {
-    await c.connect();
-    return c;
-  } catch (err) {
-    const code = err?.code;
-    if (code === "limit") {
-      setCaption("DAILY LIMIT REACHED, TRY AGAIN TOMORROW", "error");
-    } else if (code === "queue-full") {
-      setCaption("ALL SEATS TAKEN, TRY AGAIN", "error");
-    } else if (code === "join-expired") {
-      setCaption("SPOT EXPIRED, TAP TO RETRY", "error");
-    } else {
-      setCaption("CONNECTION FAILED, TAP TO RETRY", "error");
-    }
-    return null;
-  }
-}
-
-async function startVoiceSession(micStream) {
-  if (sessionInProgress) return;
-  sessionInProgress = true;
-  await stage.resume();
-
-  if (!micStream) {
-    if (new URLSearchParams(location.search).has("fakemic")) {
-      const ctx = stage.audioCtx;
-      micStream = ctx.createMediaStreamDestination().stream;
-    } else {
-      try {
-        micStream = await navigator.mediaDevices.getUserMedia({
-          audio: {
-            echoCancellation: true,
-            noiseSuppression: true,
-            autoGainControl: true
-          }
-        });
-      } catch {
-        setCaption("MIC BLOCKED", "error");
-        sessionInProgress = false;
-        return;
-      }
-    }
-  }
-
-  const audioCtx = stage.audioCtx;
-  const voiceSink = stage.voiceSink;
-  if (!audioCtx || !voiceSink) {
-    sessionInProgress = false;
-    return;
-  }
-
-  const newsItems = preFetchedNews.length > 0 ? preFetchedNews : (await getHotNews());
-  if (!preFetchedNews.length) {
-    preFetchedNews = newsItems;
-  }
-
-  // Initialize the image sequence from the current news set.
-  newsSeq = preFetchedNews.slice();
-  newsSeqIdx = -1;
-  newsTopicQuery = "";
-
-  if (newsItems.length > 0) {
-    latestNewsUrl = newsItems[0].link;
-    setCurrentNews(newsItems[0]);
-    try {
-      latestNewsSource = getSourceName(new URL(newsItems[0].link).hostname);
-    } catch {
-      latestNewsSource = "VnExpress";
-    }
-  }
-
-  const c = new S2sWsRealtimeClient({
-    ...(config.lb ? { sessionUrl: "api/session" } : { directUrl: settings.directUrl }),
-    voice: settings.voice,
-    instructions: effectiveInstructions(newsItems),
-    micStream,
-    audioContext: audioCtx,
-    outputNode: voiceSink,
-    workletBaseUrl: "/worklets/",
-    tools: TOOL_DEFS,
-    _textOnly: false,
-  });
-
-  client = c;
-  _attachClientEvents(c);
-  setCaption("REQUESTING A SLOT…");
-
-  const ok = await connectSession(c);
-  if (!ok) return;
-
-  if (!autoGreetingSent) {
-    c.requestResponse();
-  }
-}
-
-async function startTextSession(initialText) {
-  if (sessionInProgress) {
-    if (client && initialText) {
-      client.sendUserText(initialText);
-      client.requestResponse();
-    }
-    return;
-  }
-
-  sessionInProgress = true;
-  await stage.resume();
-
-  const audioCtx = stage.audioCtx;
-  const voiceSink = stage.voiceSink;
-  if (!audioCtx || !voiceSink) {
-    sessionInProgress = false;
-    return;
-  }
-
-  const newsItems = preFetchedNews.length > 0 ? preFetchedNews : (await getHotNews());
-  if (!preFetchedNews.length) {
-    preFetchedNews = newsItems;
-  }
-
-  newsSeq = preFetchedNews.slice();
-  newsSeqIdx = -1;
-  newsTopicQuery = "";
-
-  if (newsItems.length > 0) {
-    latestNewsUrl = newsItems[0].link;
-    setCurrentNews(newsItems[0]);
-    try {
-      latestNewsSource = getSourceName(new URL(newsItems[0].link).hostname);
-    } catch {
-      latestNewsSource = "VnExpress";
-    }
-  }
-
-  const c = new S2sWsRealtimeClient({
-    ...(config.lb ? { sessionUrl: "api/session" } : { directUrl: settings.directUrl }),
-    voice: settings.voice,
-    instructions: effectiveInstructions(newsItems),
-    audioContext: audioCtx,
-    outputNode: voiceSink,
-    workletBaseUrl: "/worklets/",
-    tools: TOOL_DEFS,
-    _textOnly: true,
-  });
-
-  client = c;
-  _attachClientEvents(c);
-  textMode = true;
-  showTextChat(true);
-  textModeBtn.classList.add("active");
-
-  const ok = await connectSession(c);
-  if (!ok) return;
-
-  if (!autoGreetingSent) {
-    c.requestResponse();
-  }
-
-  if (initialText) {
-    c.sendUserText(initialText);
-    c.requestResponse();
-  }
-}
-
-function _attachClientEvents(c) {
-  c.addEventListener("status", (e) => {
-    onStatus(e.detail.status);
-  });
-
-  c.addEventListener("queue", (e) => {
-    const { position } = e.detail;
-    setCaption(position > 0 ? `#${position} IN LINE…` : "ALMOST THERE…", "live");
-  });
-
-  c.addEventListener("transcript", (e) => {
-    const { role, text } = e.detail;
-    if (role === "assistant" && text) {
-      const normalized = smartNormalize(text);
-      showSubtitles(normalized);
-      // Attach the next image of the CURRENT news item (loops through its images).
-      const img = nextNewsImage();
-      const newsItem = curNews ? { ...curNews, image: img || curNews.image } : null;
-      addChatMessage("assistant", normalized, newsItem);
-    }
-  });
-
-  c.addEventListener("response-finished", () => {
-    autoGreetingSent = true;
-    fadeSubtitles();
-    if (preFetchedNews.length > 0) {
-      showNewsPanel(preFetchedNews.slice(0, NEWS_PAGE_SIZE));
-    }
-    _topicTagsRendered = false;
-    try { void renderTopicTags(); } catch (e) { console.warn("[topic] render:", e); }
-    // FIX: auto-start voice typing after AI finishes speaking so the user can respond immediately
-    if (sessionInProgress) {
-      setTimeout(() => startVoiceTyping(), 500);
-    }
-  });
-
-  c.addEventListener("toolcall", (e) => {
-    const { name, arguments: args, callId } = e.detail;
-    runTool(name, args, callId);
-  });
-
-  c.addEventListener("server-error", (e) => {
-    console.warn("server error:", e.detail.error);
-  });
-
-  c.addEventListener("error", () => {
-    void endSession();
-  });
-}
-
-async function endSession(silent = false) {
-  const c = client;
-  client = null;
-  sessionInProgress = false;
-  autoGreetingSent = false;
-
-  // Stop voice recognition if active
-  if (voiceTyper) {
-    voiceTyper.stop();
-    voiceTyper = null;
-  }
-
-  if (c) {
-    if (c.options.micStream) {
-      for (const track of c.options.micStream?.getTracks() ?? []) {
-        track.stop();
-      }
-    }
-    await c.close().catch(() => {});
-  }
-
-  stage.setConversationState("idle");
-  subtitles.classList.remove("visible");
-
-  if (newsPanel) {
-    newsPanel.hidden = true;
-  }
-
-  if (!silent) {
-    setCaption(CAPTIONS.idle);
-    setMainButton("start", "Start talking");
-    // Show today's real trending topics immediately (also re-shown after greeting).
-    try { void renderTopicTags(); } catch (e) { console.warn("[topic] startWithSelection:", e); }
-  }
-}
-
-// ── UI events ───────────────────────────────────────────────────────────
-mainBtn.addEventListener("click", () => {
-  if (mainAction === "start") {
-    if (sessionInProgress) return;
-    // Default: always start text chat (no mic required)
-    void startTextSession();
-  } else if (mainAction === "join") {
-    stage.resume();
-    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");
-});
-
-textModeBtn.addEventListener("click", () => {
-  textMode = !textMode;
-  showTextChat(textMode);
-  textModeBtn.classList.toggle("active", textMode);
-});
-
-chatSendBtn.addEventListener("click", () => sendTextMessage());
-
-chatMicBtn.addEventListener("click", async () => {
-  if (!sessionInProgress) return;
-  // If already listening, stop
-  if (voiceTyper && voiceTyper.active) {
-    stopVoiceTyping();
-    return;
-  }
-  // Request mic access
-  const micStream = await navigator.mediaDevices.getUserMedia({
-    audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true }
-  }).catch(() => null);
-  if (!micStream) {
-    setCaption("MIC BLOCKED", "error");
-    return;
-  }
-  micStream.getTracks().forEach((t) => t.stop());
-  startVoiceTyping();
-});
-
-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;
-  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
-  };
-
-  if (settings.avatar !== "vuong.glb") {
-    autoGreetingSent = false;
-  }
-
-  saveSettings();
-  chatAvatarSelect.value = settings.avatar;
-
-  if (!settings.subtitles) {
-    subtitles.classList.remove("visible");
-  }
-
-  client?.updateSession({
-    voice: settings.voice,
-    instructions: effectiveInstructions(preFetchedNews)
-  });
-});
-
-window.addEventListener("beforeunload", () => {
-  client?.close();
-});
-
-// ── Boot ────────────────────────────────────────────────────────────────
-async function boot() {
-  // 1) Reveal the picker IMMEDIATELY — first screen, never a loader.
-  showPicker();
-
-  // 2) Voice <select> options.
-  for (const v of VOICES) {
-    const o = document.createElement("option");
-    o.value = v;
-    o.textContent = v.replaceAll("_", " ");
-    inputVoice.append(o);
-  }
-  inputVoice.value = settings.voice;
-
-  // 3) Best-effort setup; isolate each step so a failure can NEVER hide the picker.
-  try {
-    const resp = await fetch("api/config");
-    if (resp.ok) config = { ...config, ...(await resp.json()) };
-  } catch (e) { console.warn("[boot] config:", e); }
-  directUrlRow.hidden = !config.allowDirect;
-
-  // Allow real mic for voice chat. Never force fakemic automatically.
-  // User can click mic button in chat to switch to voice mode.
-
-  try { await fetchAvatarList(); } catch (e) { console.warn("[boot] avatars:", e); }
-  try { populateAvatarSelects(settings.avatar); } catch (e) { console.warn("[boot] populate:", e); }
-  try {
-    makeDraggable(); makeResizable(); makeNewsDraggable(); makeNewsResizable(); buildVnewsPanel();
-  } catch (e) { console.warn("[boot] ui:", e); }
-
-  // 4) Fill the picker (avatar cards + voice chips).
-  try { buildPicker(); } catch (e) { console.warn("[boot] buildPicker:", e); }
-  try { void renderTopicTags(); } catch (e) { console.warn("[boot] topics:", e); }
-  try { updateAvatarThumbPreview(); } catch (e) { console.warn("[boot] thumb:", e); }
-}
-
-// ── News box draggable + resizable (mirrors the chat box) ────────────────
-function makeNewsDraggable() {
-  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("#news-header") === null) return; // only drag from header
-    if (e.target.closest("#news-close-btn")) return;
-    const p = getPos(e);
-    dragging = true;
-    const rect = newsPanel.getBoundingClientRect();
-    startX = p.x;
-    startY = p.y;
-    startLeft = rect.left;
-    startTop = rect.top;
-    newsPanel.classList.add("dragging");
-    e.preventDefault();
-  }
-
-  function onMove(e) {
-    if (!dragging) return;
-    const p = getPos(e);
-    const vw = window.innerWidth, vh = window.innerHeight;
-    const w = newsPanel.offsetWidth, h = newsPanel.offsetHeight;
-    let l = Math.max(10, Math.min(startLeft + p.x - startX, vw - w - 10));
-    let t = Math.max(10, Math.min(startTop + p.y - startY, vh - h - 10));
-    newsPanel.style.left = `${l}px`;
-    newsPanel.style.top = `${t}px`;
-    newsPanel.style.right = "auto";
-    newsPanel.style.bottom = "auto";
-    e.preventDefault();
-  }
-
-  function onEnd() {
-    if (!dragging) return;
-    dragging = false;
-    newsPanel.classList.remove("dragging");
-  }
-
-  const header = $("#news-header");
-  header.addEventListener("mousedown", onStart);
-  document.addEventListener("mousemove", onMove);
-  document.addEventListener("mouseup", onEnd);
-  header.addEventListener("touchstart", onStart, { passive: false });
-  document.addEventListener("touchmove", onMove, { passive: false });
-  document.addEventListener("touchend", onEnd);
-}
-
-function makeNewsResizable() {
-  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 = newsPanel.getBoundingClientRect();
-    const p = getPos(e);
-    startX = p.x;
-    startY = p.y;
-    startW = rect.width;
-    startH = rect.height;
-    newsPanel.classList.add("resizing");
-    e.preventDefault();
-    e.stopPropagation();
-  }
-
-  function onMove(e) {
-    if (!resizing) return;
-    const p = getPos(e);
-    newsPanel.style.width = `${Math.max(300, startW + p.x - startX)}px`;
-    newsPanel.style.height = `${Math.max(180, startH + p.y - startY)}px`;
-    newsPanel.style.right = "auto";
-    newsPanel.style.bottom = "auto";
-    e.preventDefault();
-  }
-
-  function onEnd() {
-    if (!resizing) return;
-    resizing = false;
-    newsPanel.classList.remove("resizing");
-  }
-
-  newsResizeHandle.addEventListener("mousedown", onStart);
-  document.addEventListener("mousemove", onMove);
-  document.addEventListener("mouseup", onEnd);
-  newsResizeHandle.addEventListener("touchstart", onStart, { passive: false });
-  document.addEventListener("touchmove", onMove, { passive: false });
-  document.addEventListener("touchend", onEnd);
-}
-
-void boot();
-
-// ── Capture PNG (snapshot of the 3D avatar) ──────────────
 const THUMB_KEY = "avatar.thumbs";
 const avatarThumbPreview = document.getElementById("avatar-thumb-preview");
+
 function loadThumbs() {
   try { return JSON.parse(localStorage.getItem(THUMB_KEY) || "{}"); }
   catch { return {}; }
 }
 function saveThumbs(map) { localStorage.setItem(THUMB_KEY, JSON.stringify(map)); }
+
 function serverThumbUrl(name) {
   if (!name) return "";
-  // Don't add timestamp for server-stored thumbnails (they are immutable)
-  // Use dataset repo (no Space rebuild on upload)
-  return `https://huggingface.co/datasets/bep40/gemma-avatar-thumbnails/resolve/main/public/avatars/${name}.thumb.png`;
+  return `/avatars/${name}.thumb.png`;
 }
-// Show the avatar's representative image: prefer the server-stored thumbnail
-// (persisted on Space), fall back to freshly-captured local copy, then
-// a gradient fallback with the initial letter.
+
 function updateAvatarThumbPreview() {
   if (!avatarThumbPreview) return;
   const name = chatAvatarSelect.value || settings.avatar || "";
-  // Ensure .glb extension for server URL lookup
-  const avatarName = name.endsWith(".glb") ? name : (name ? name + ".glb" : "");
-  const label = (avatarName || "?").replace(/\.glb$/i, "").replace(/_/g, " ");
-  const initial = label.slice(0, 1).toUpperCase();
   const map = loadThumbs();
-
-  // Helper: show fallback letter with gradient bg
-  function showFallback() {
-    avatarThumbPreview.style.display = "none";
-    // Find or create the sibling fallback element
-    let fb = avatarThumbPreview.parentNode?.querySelector(".thumb-fallback");
-    if (!fb) {
-      fb = document.createElement("div");
-      fb.className = "thumb-fallback";
-      if (avatarThumbPreview.parentNode) {
-        avatarThumbPreview.parentNode.insertBefore(fb, avatarThumbPreview);
-      }
-    }
-    fb.textContent = initial;
-    fb.style.display = "flex";
-  }
-
-  function showImg(url) {
-    const fb = avatarThumbPreview.parentNode?.querySelector(".thumb-fallback");
-    if (fb) fb.style.display = "none";
-    avatarThumbPreview.src = url;
-    avatarThumbPreview.style.display = "";
-    avatarThumbPreview.hidden = false;
-  }
-
-  // 1. Try server thumbnail first (persisted on Space, survives restarts)
-  if (avatarName) {
-    const srv = serverThumbUrl(avatarName);
-    avatarThumbPreview.onerror = () => {
-      // Server thumbnail failed — try local cache
-      const local = map[avatarName] || map[name] || "";
-      if (local) {
-        showImg(local);
-      } else {
-        showFallback();
-      }
-    };
-    avatarThumbPreview.onload = () => {
-      // Only show if the image actually loaded (not error, not 70-byte placeholder)
-      if (avatarThumbPreview.naturalWidth > 0 && avatarThumbPreview.naturalHeight > 0) {
-        const fb = avatarThumbPreview.parentNode?.querySelector(".thumb-fallback");
-        if (fb) fb.style.display = "none";
-        avatarThumbPreview.style.display = "";
-        avatarThumbPreview.hidden = false;
-      } else {
-        showFallback();
-      }
-    };
-    showImg(srv);
-    return;
-  }
-  // 2. No server thumbnail — try local cache
   const local = map[name] || "";
   if (local) {
-    showImg(local);
+    avatarThumbPreview.src = local;
+    avatarThumbPreview.hidden = false;
     return;
   }
-  showFallback();
+  const srv = serverThumbUrl(name);
+  if (srv) {
+    avatarThumbPreview.src = srv;
+    avatarThumbPreview.hidden = false;
+  } else {
+    avatarThumbPreview.hidden = true;
+  }
 }
+
 if (chatAvatarSelect) chatAvatarSelect.addEventListener("change", updateAvatarThumbPreview);
 
+// Snap button handler:
 const snapBtn = document.getElementById("snap-btn");
-const snapDialog = document.getElementById("snap-dialog");
-const snapPreview = document.getElementById("snap-preview");
-const snapDownload = document.getElementById("snap-download");
-const snapSetAvatar = document.getElementById("snap-setavatar");
-let _latestSnap = null;
 if (snapBtn) {
-  // Helper: compress data URL - higher quality for avatar thumbnails
-  function compressDataUrl(dataUrl, maxBytes = 500 * 1024, maxDim = 512) {
-    return new Promise((resolve) => {
-      const img = new Image();
-      img.onload = () => {
-        const canvas = document.createElement("canvas");
-        let w = img.width, h = img.height;
-        if (w > maxDim || h > maxDim) {
-          const scale = Math.min(maxDim / w, maxDim / h);
-          w = Math.round(w * scale);
-          h = Math.round(h * scale);
-        }
-        canvas.width = w; canvas.height = h;
-        const ctx = canvas.getContext("2d");
-        // Better quality: use imageSmoothingQuality
-        ctx.imageSmoothingEnabled = true;
-        ctx.imageSmoothingQuality = "high";
-        ctx.drawImage(img, 0, 0, w, h);
-        // Start with quality 0.85 for avatars (higher visual quality)
-        let quality = 0.85;
-        let out = canvas.toDataURL("image/jpeg", quality);
-        // Allow larger files for better quality (500KB base64 ~ 365KB binary)
-        while (out.length > maxBytes * 1.37 && quality > 0.5) {
-          quality -= 0.05;
-          out = canvas.toDataURL("image/jpeg", quality);
-        }
-        resolve(out);
-      };
-      img.onerror = () => resolve(dataUrl); // fallback to original
-      img.src = dataUrl;
-    });
-  }
-
-  snapBtn.addEventListener("click", async () => {
+  snapBtn.addEventListener("click", () => {
     if (!stage.head) { setCaption("AVATAR CHUA SAN SANG", "error"); return; }
     const url = stage.capturePNG();
     if (!url) { setCaption("KHONG CHUP DUOC ANH", "error"); return; }
-    _latestSnap = await compressDataUrl(url);
-    snapPreview.src = _latestSnap;
-    if (snapDialog.showModal) snapDialog.showModal();
-    else snapDialog.setAttribute("open", "");
-  });
-}
-if (snapDownload) {
-  snapDownload.addEventListener("click", () => {
-    if (!_latestSnap) return;
-    const name = (settings.avatar || "avatar").replace(/\.glb$/i, "");
-    const a = document.createElement("a");
-    a.href = _latestSnap; a.download = name + ".png";
-    document.body.appendChild(a); a.click(); a.remove();
+    // TODO: send to /api/avatar-thumbnail
   });
-}
-if (snapSetAvatar) {
-  snapSetAvatar.addEventListener("click", async () => {
-    if (!_latestSnap) return;
-    const key = settings.avatar || "";
-    if (!key) { setCaption("CHON 1 AVATAR TRUOC", "error"); return; }
-    // Ensure the avatar name has .glb extension
-    const avatarName = key.endsWith(".glb") ? key : key + ".glb";
-    console.log("[snap] saving thumbnail for:", avatarName, "dataUrl length:", _latestSnap?.length);
-    snapSetAvatar.disabled = true;
-    snapSetAvatar.textContent = "⏳ Đang lưu…";
-    try {
-      const resp = await fetch("/api/avatar-thumbnail", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ avatar: avatarName, dataUrl: _latestSnap }),
-      });
-      console.log("[snap] response status:", resp.status);
-      const data = await resp.json().catch(() => ({}));
-      console.log("[snap] response data:", data);
-      if (!resp.ok || !data.ok) throw new Error(data.error || "upload failed");
-      // Cache locally too (works offline + instant preview)
-      const map = loadThumbs();
-      // Prefer the server URL now that it is persisted on Space
-      if (data.url) {
-        map[avatarName] = data.url;
-        saveThumbs(map);
-        avatarThumbPreview.src = data.url;
-        avatarThumbPreview.hidden = false;
-        const fb = avatarThumbPreview.parentNode?.querySelector(".thumb-fallback");
-        if (fb) fb.style.display = "none";
-      } else {
-        map[avatarName] = _latestSnap;
-        saveThumbs(map);
-        avatarThumbPreview.src = _latestSnap;
-        avatarThumbPreview.hidden = false;
-        const fb = avatarThumbPreview.parentNode?.querySelector(".thumb-fallback");
-        if (fb) fb.style.display = "none";
-      }
-      // Force refresh all avatar previews (picker + chat select + settings select)
-      try { buildPicker(); } catch (e) { console.warn("[snap] buildPicker:", e); }
-      try { updateAvatarThumbPreview(); } catch (e) { console.warn("[snap] updateThumb:", e); }
-      setCaption("ĐÃ LƯU ẢNH ĐẠI DIỆN LÊN SPACE", "live");
-    } catch (e) {
-      console.warn("[snap] error:", e);
-      setCaption("LƯU THẤT BẠI: " + (e.message || e), "error");
-    } finally {
-      snapSetAvatar.disabled = false;
-      snapSetAvatar.textContent = "🖼️ Đặt làm ảnh đại diện";
-    }
-  });
-}
-
-// ── Onboarding picker (choose character + voice BEFORE loading avatar) ──
-function buildPicker() {
-  const grid = document.getElementById("picker-avatars");
-  const voices = document.getElementById("picker-voices");
-  if (!grid || !voices) return;
-  grid.innerHTML = "";
-  voices.innerHTML = "";
-  const selAvatar = settings.avatar || "";
-  const list = avatarList.length ? avatarList : ["vuong.glb"];
-  for (const name of list) {
-    const card = document.createElement("button");
-    card.type = "button";
-    card.className = "avatar-card" + (name === selAvatar ? " selected" : "");
-    card.dataset.avatar = name;
-    const label = name.replace(/\.glb$/i, "").replace(/_/g, " ");
-    const thumb = document.createElement("div");
-    thumb.className = "avatar-card-thumb";
-    const _map = loadThumbs();
-    const _img = document.createElement("img");
-    _img.alt = label;
-    _img.loading = "lazy";
-    _img.addEventListener("error", () => {
-      // Try localStorage fallback before giving up
-      const local = _map[name] || "";
-      if (local && _img.src !== local) {
-        _img.src = local;
-        return;
-      }
-      _img.remove();
-      thumb.textContent = label.slice(0, 1).toUpperCase();
-    });
-    const _srv = serverThumbUrl(name);
-    // Prefer server thumbnail (persisted on Space), fall back to local cache
-    _img.src = _srv || _map[name] || "";
-    thumb.appendChild(_img);
-    const span = document.createElement("span");
-    span.className = "avatar-card-name";
-    span.textContent = label + (name.toLowerCase() === "vuong.glb" ? " 🎙️" : "");
-    card.appendChild(thumb);
-    card.appendChild(span);
-    card.addEventListener("click", () => {
-      grid.querySelectorAll(".avatar-card").forEach((c) => c.classList.remove("selected"));
-      card.classList.add("selected");
-      settings.avatar = name;
-      saveSettings();
-    });
-    grid.appendChild(card);
-  }
-  for (const v of VOICES) {
-    const chip = document.createElement("button");
-    chip.type = "button";
-    chip.className = "voice-chip" + (v === settings.voice ? " selected" : "");
-    chip.dataset.voice = v;
-    chip.textContent = v.replaceAll("_", " ");
-    chip.addEventListener("click", () => {
-      voices.querySelectorAll(".voice-chip").forEach((c) => c.classList.remove("selected"));
-      chip.classList.add("selected");
-      settings.voice = v;
-      saveSettings();
-    });
-    voices.appendChild(chip);
-  }
-}
-function showPicker() {
-  const p = document.getElementById("picker");
-  if (p) p.hidden = false;
-}
-function hidePicker() {
-  const p = document.getElementById("picker");
-  if (p) p.hidden = true;
-}
-async function startWithSelection() {
-  hidePicker();
-  setCaption("Chờ tôi một lát! Tôi sẽ đến với bạn ngay!");
-  setMainButton("busy", "Loading…");
-  loading.classList.remove("done");
-  loading.classList.add("active");
-  loading.textContent = "Loading avatar...";
-
-  // Show the start progress bar with the friendly message.
-  const startProgress = document.getElementById("start-progress");
-  const startProgressFill = startProgress ? startProgress.querySelector(".start-progress__fill") : null;
-  if (startProgress) startProgress.hidden = false;
-  if (startProgressFill) startProgressFill.style.width = "0%";
-
-  let progress = 0;
-  const progressInterval = setInterval(() => {
-    progress = Math.min(progress + 5, 95);
-    if (startProgressFill) startProgressFill.style.width = progress + "%";
-  }, 150);
-
-  const newsPromise = (settings.avatar === "vuong.glb" || !settings.avatar) ? getHotNews().catch(() => []) : Promise.resolve([]);
-  let ok = false;
-  try {
-    const initPromise = stage.init({
-      avatarUrl: settings.avatar ? `/avatars/${settings.avatar}` : undefined,
-      onprogress: (ev) => {
-        if (ev.lengthComputable) {
-          const pct = Math.min(100, Math.round((ev.loaded / ev.total) * 100));
-          loading.textContent = `Loading avatar ${pct}%`;
-          if (startProgressFill) startProgressFill.style.width = pct + "%";
-          progress = pct;
-        }
-      }
-    });
-    const timeout = new Promise((_, rej) => setTimeout(() => rej(new Error("init timeout")), 25000));
-    await Promise.race([initPromise, timeout]);
-    stage.resume(); // start render loop so the avatar is actually visible (not a single black frame)
-    ok = true;
-  } catch (err) {
-    console.error("[startWithSelection] init failed/timeout:", err);
-  } finally {
-    clearInterval(progressInterval);
-    if (startProgressFill) startProgressFill.style.width = "100%";
-    // Hide the start progress bar after a brief moment showing 100%
-    setTimeout(() => {
-      if (startProgress) startProgress.hidden = true;
-      if (startProgressFill) startProgressFill.style.width = "0%";
-    }, 500);
-    try { preFetchedNews = await newsPromise; } catch { preFetchedNews = []; }
-    newsSeq = preFetchedNews.slice();
-    newsSeqIdx = -1;
-    newsTopicQuery = "";
-    loading.classList.remove("active");
-    if (ok) setCaption(CAPTIONS.idle);
-    else setCaption("AVATAR KHÔNG HIỂN THỰ — THỬ CHỌN AVATAR KHÁC", "error");
-    setMainButton("start", "Start talking");
-  }
-}
-const pickerStartBtn = document.getElementById("picker-start");
-if (pickerStartBtn) pickerStartBtn.addEventListener("click", () => void startWithSelection());
+}

src/s2s/codec.js

@@ -54,4 +54,4 @@ export function base64ToBytes(b64) {
   const out = new Uint8Array(len);
   for (let i = 0; i < len; i++) out[i] = binary.charCodeAt(i);
   return out;
-}
+}

src/s2s/s2s-ws-client.js

@@ -210,7 +210,7 @@ export class S2sWsRealtimeClient extends EventTarget {
   _queueSleep(ms) {
     return new Promise((resolve) => {
       this._queueWake = resolve;
-      this._queueTimer = setTimeout(() => { this._queueWake = null; resolve(); });
+      this._queueTimer = setTimeout(() => { this._queueWake = null; resolve(); }, ms);
     });
   }
 

src/style.css

@@ -611,15 +611,3 @@ body { background: var(--bg); color: var(--text); font-family: Inter, system-ui,
   background: linear-gradient(90deg, #22d3ee, #06b6d4);
   transition: width 0.3s ease;
 }
-
-/* ── Avatar thumb fallback (khi chưa có server thumbnail) ── */
-.thumb-fallback {
-  width: 28px; height: 28px; border-radius: 50%;
-  display: inline-flex; align-items: center; justify-content: center;
-  font-size: 14px; font-weight: 700;
-  color: #cfe9ff; background: linear-gradient(135deg, #1b2230, #2a3550);
-  border: 1px solid rgba(255,255,255,.12);
-  vertical-align: middle;
-  margin-left: 6px;
-  flex-shrink: 0;
-}

src/voiceTyper.js

@@ -1,181 +0,0 @@
-/**
- * voiceTyper.js — Vietnamese voice recognition with auto-fill for chat input.
- *
- * Uses the browser's Web Speech API (SpeechRecognition) with vi-VN locale
- * to capture the user's spoken Vietnamese, display the transcript in the
- * chat input field, and optionally auto-submit after speech ends.
- *
- * Events emitted via callbacks:
- *   result    — { transcript, isFinal, confidence }
- *   start     — recognition started
- *   end       — recognition ended (audio stop)
- *   error     — { message, code }
- *   soundstart — microphone capture started
- *   soundend   — microphone capture ended
- *   nomatch    — no speech recognised in a segment
- */
-export class VoiceTyper {
-  /**
-   * @param {{ lang?: string, continuous?: boolean, interimResults?: boolean, autoSubmit?: boolean, silenceMs?: number }} options
-   */
-  constructor(options = {}) {
-    this.lang = options.lang || "vi-VN";
-    this.continuous = options.continuous ?? true;
-    this.interimResults = options.interimResults ?? true;
-    this.autoSubmit = options.autoSubmit ?? false;
-    this.silenceMs = options.silenceMs ?? 1200;
-    this.onResult = null;
-    this.onStart = null;
-    this.onEnd = null;
-    this.onError = null;
-    this.onSoundStart = null;
-    this.onSoundEnd = null;
-    this.onNoMatch = null;
-
-    this._recognition = null;
-    this._active = false;
-    this._sessionStartMs = 0;
-    this._silenceTimer = null;
-    this._lastResultMs = 0;
-  }
-
-  get active() {
-    return this._active;
-  }
-
-  /** Initialise the SpeechRecognition instance. Returns true if supported. */
-  init() {
-    const SR = window.SpeechRecognition || window.webkitSpeechRecognition;
-    if (!SR) return false;
-
-    this._recognition = new SR();
-    this._recognition.lang = this.lang;
-    this._recognition.continuous = this.continuous;
-    this._recognition.interimResults = this.interimResults;
-    this._recognition.maxAlternatives = 1;
-
-    this._recognition.addEventListener("result", (e) => this._onResult(e));
-    this._recognition.addEventListener("start", () => this._onStart());
-    this._recognition.addEventListener("end", () => this._onEnd());
-    this._recognition.addEventListener("error", (e) => this._onError(e));
-    this._recognition.addEventListener("soundstart", () => this._onSoundStart());
-    this._recognition.addEventListener("soundend", () => this._onSoundEnd());
-    this._recognition.addEventListener("nomatch", () => this._onNoMatch());
-
-    return true;
-  }
-
-  /** Start listening. */
-  start() {
-    if (!this._recognition) return;
-    if (this._active) return;
-    try {
-      this._sessionStartMs = Date.now();
-      this._lastResultMs = this._sessionStartMs;
-      this._recognition.start();
-      this._active = true;
-    } catch (e) {
-      this._active = false;
-      this._emitError("start-failed", e.message);
-    }
-  }
-
-  /** Stop listening. */
-  stop() {
-    if (!this._recognition) return;
-    if (!this._active) return;
-    try {
-      this._recognition.stop();
-    } catch (_) {
-      /* already stopped */
-    }
-    this._active = false;
-    this._clearSilenceTimer();
-  }
-
-  /** Abort the current session and release resources. */
-  abort() {
-    this.stop();
-    this._recognition = null;
-  }
-
-  /* ── internals ──────────────────────────────────────────── */
-
-  _onResult(e) {
-    let transcript = "";
-    let isFinal = true;
-
-    for (let i = e.resultIndex; i < e.results.length; i++) {
-      const alt = e.results[i][0];
-      transcript += alt.transcript;
-      if (!e.results[i].isFinal) isFinal = false;
-    }
-
-    this._lastResultMs = Date.now();
-    this._clearSilenceTimer();
-
-    if (this.onResult) {
-      this.onResult({
-        transcript,
-        isFinal,
-        confidence: e.results[e.results.length - 1]?.[0]?.confidence ?? 1,
-      });
-    }
-
-    if (this.autoSubmit && isFinal) {
-      this._resetSilenceTimer();
-    }
-  }
-
-  _onStart() {
-    if (this.onStart) this.onStart();
-  }
-
-  _onEnd() {
-    this._clearSilenceTimer();
-    const wasActive = this._active;
-    this._active = false;
-    if (this.onEnd) this.onEnd();
-  }
-
-  _onError(e) {
-    this._active = false;
-    this._clearSilenceTimer();
-    if (this.onError) {
-      this.onError({ message: e.error, code: e.error });
-    }
-  }
-
-  _onSoundStart() {
-    if (this.onSoundStart) this.onSoundStart();
-  }
-
-  _onSoundEnd() {
-    if (this.onSoundEnd) this.onSoundEnd();
-  }
-
-  _onNoMatch() {
-    if (this.onNoMatch) this.onNoMatch();
-  }
-
-  _emitError(code, message) {
-    if (this.onError) this.onError({ message, code });
-  }
-
-  _resetSilenceTimer() {
-    this._clearSilenceTimer();
-    if (!this.autoSubmit || !this.onResult) return;
-    this._silenceTimer = setTimeout(() => {
-      if (this._active) {
-        this.onResult({ transcript: "", isFinal: true, confidence: 0 });
-      }
-    }, this.silenceMs);
-  }
-
-  _clearSilenceTimer() {
-    if (this._silenceTimer) {
-      clearTimeout(this._silenceTimer);
-      this._silenceTimer = null;
-    }
-  }
-}

src/withSearchContext.js

@@ -45,4 +45,4 @@ export async function withSearchContext(text) {
   }
 
   return `${context}\n\n${text}`;
-}
+}

style.css

@@ -548,7 +548,34 @@ body { background: var(--bg); color: var(--text); font-family: Inter, system-ui,
 
 /* ── Onboarding picker (choose character + voice BEFORE loading) ── */
 #loading { display: none; }
-#loading.active { display: grid; }
+#loading.active { display: flex; }
+#loading .progress-bar-container {
+  position: absolute;
+  bottom: 80px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 200px;
+  height: 6px;
+  background: var(--border);
+  border-radius: 3px;
+  overflow: hidden;
+}
+#loading .progress-bar-fill {
+  height: 100%;
+  background: var(--accent, #4a9eff);
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+#loading .progress-text {
+  position: absolute;
+  bottom: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--text-faint);
+  letter-spacing: 0.1em;
+}
 .picker { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(8,11,18,.82); backdrop-filter: blur(6px); padding: 20px; overflow: auto; }
 .picker[hidden] { display: none; }
 .picker-card { width: min(720px, 96vw); max-height: 92vh; overflow: auto; background: #11151f; border: 1px solid rgba(255,255,255,.08); border-radius: 16px; padding: 22px 24px; color: #e8edf5; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
@@ -572,42 +599,3 @@ body { background: var(--bg); color: var(--text); font-family: Inter, system-ui,
 .topic-chip { border: 1px solid rgba(34,211,238,.4); background: rgba(34,211,238,.08); color: #a5f3fc; border-radius: 999px; padding: 5px 12px; cursor: pointer; font-size: 12.5px; transition: background .15s, transform .1s; }
 .topic-chip:hover { background: rgba(34,211,238,.2); transform: translateY(-1px); }
 .topic-chip.active { background: #22d3ee; color: #04222a; font-weight: 600; }
-
-/* ── Start progress bar ── */
-.start-progress {
-  position: absolute;
-  bottom: 120px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 24px;
-  border-radius: 12px;
-  background: rgba(10, 11, 16, 0.85);
-  backdrop-filter: blur(6px);
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  z-index: 200;
-  min-width: 280px;
-  text-align: center;
-}
-.start-progress__msg {
-  font-size: 14px;
-  font-weight: 500;
-  color: #a5f3fc;
-  line-height: 1.4;
-}
-.start-progress__bar {
-  width: 100%;
-  height: 6px;
-  border-radius: 3px;
-  background: rgba(255, 255, 255, 0.1);
-  overflow: hidden;
-}
-.start-progress__fill {
-  height: 100%;
-  border-radius: 3px;
-  background: linear-gradient(90deg, #22d3ee, #06b6d4);
-  transition: width 0.3s ease;
-}

tsconfig.json

@@ -27,4 +27,4 @@
     "noUnusedParameters": false,
     "noPropertyAccessFromIndexSignature": false
   }
-}
+}

upload_service.py

@@ -1,123 +0,0 @@
-#!/usr/bin/env python3
-"""
-Sidecar upload service - receives thumbnail batches via HTTP and uploads
-to dataset repo using HF API (works with Xet, no Space rebuild).
-Run alongside Bun server.
-"""
-import os
-import base64
-import json
-import threading
-import time
-from http.server import HTTPServer, BaseHTTPRequestHandler
-from huggingface_hub import HfApi, CommitOperationAdd
-
-# Config
-DATASET_REPO = os.environ.get("DATASET_REPO", "bep40/gemma-avatar-thumbnails")
-HF_TOKEN = os.environ.get("HF_TOKEN")
-UPLOAD_PORT = int(os.environ.get("UPLOAD_PORT", "7861"))
-
-if not HF_TOKEN:
-    print("ERROR: HF_TOKEN required")
-    exit(1)
-
-api = HfApi(token=HF_TOKEN)
-
-# In-memory queue
-upload_queue = []
-queue_lock = threading.Lock()
-flush_interval = 30  # seconds
-last_flush = 0
-
-def flush_queue():
-    """Upload queued thumbnails to dataset repo using HF API"""
-    global last_flush
-    with queue_lock:
-        if not upload_queue:
-            return
-        items = upload_queue[:]
-        upload_queue.clear()
-    
-    print(f"[upload_service] Flushing {len(items)} thumbnails to {DATASET_REPO}...")
-    
-    try:
-        operations = []
-        for item in items:
-            operations.append(CommitOperationAdd(
-                path_in_repo=item["path"],
-                path_or_fileobj=item["data"]
-            ))
-        
-        # Use HF API commit - this works with Xet
-        api.create_commit(
-            repo_id=DATASET_REPO,
-            repo_type="dataset",
-            operations=operations,
-            commit_message=f"avatar thumbnails: {len(items)} files",
-            commit_description=f"Batch upload {len(items)} avatar thumbnails"
-        )
-        print(f"[upload_service] Successfully uploaded {len(items)} thumbnails")
-    except Exception as e:
-        print(f"[upload_service] Upload failed: {e}")
-        # Re-queue on failure
-        with queue_lock:
-            upload_queue[:0] = items
-    finally:
-        last_flush = time.time()
-
-class UploadHandler(BaseHTTPRequestHandler):
-    def do_POST(self):
-        if self.path == "/upload":
-            content_length = int(self.headers.get('Content-Length', 0))
-            body = self.rfile.read(content_length)
-            try:
-                data = json.loads(body)
-                path = data.get("path", "")
-                b64_content = data.get("content", "")
-                if not path or not b64_content:
-                    self.send_response(400)
-                    self.end_headers()
-                    self.wfile.write(b'{"error": "missing path or content"}')
-                    return
-                
-                # Decode base64 and queue
-                binary_data = base64.b64decode(b64_content)
-                with queue_lock:
-                    upload_queue.append({"path": path, "data": binary_data})
-                
-                self.send_response(200)
-                self.send_header("Content-Type", "application/json")
-                self.end_headers()
-                self.wfile.write(b'{"ok": true, "queued": true}')
-            except Exception as e:
-                self.send_response(500)
-                self.end_headers()
-                self.wfile.write(f'{{"error": "{e}"}}'.encode())
-        else:
-            self.send_response(404)
-            self.end_headers()
-    
-    def log_message(self, format, *args):
-        # Suppress default log
-        pass
-
-def flush_loop():
-    """Background thread to flush queue periodically"""
-    global last_flush
-    while True:
-        time.sleep(5)
-        with queue_lock:
-            qsize = len(upload_queue)
-        print(f"[upload_service] flush_loop check: queue size={qsize}, last_flush={time.time()-last_flush:.1f}s ago, interval={flush_interval}s")
-        if time.time() - last_flush >= flush_interval:
-            flush_queue()
-
-if __name__ == "__main__":
-    # Start flush thread
-    threading.Thread(target=flush_loop, daemon=True).start()
-    
-    server = HTTPServer(("0.0.0.0", UPLOAD_PORT), UploadHandler)
-    print(f"[upload_service] Listening on 0.0.0.0:{UPLOAD_PORT}")
-    print(f"[upload_service] Dataset repo: {DATASET_REPO}")
-    print(f"[upload_service] HF_TOKEN present: {bool(HF_TOKEN)}")
-    server.serve_forever()