@vanillaskyai/video 0.10.19 → 0.10.20

package/CHANGELOG.md

@@ -4,6 +4,13 @@ VanillaSky follows semantic versioning. This changelog begins with the 0.1 beta.
 
 ## Unreleased
 
+## 0.10.20
+
+- Collapse completed-response subtitles to an expandable transcript and remove the Pexels header link.
+- Present narration in compact, progressive caption pages while preserving the complete spoken text.
+- Reflect host-resolved footage mode when a response falls back to stock.
+- Prefer close stock matches while allowing provider-ranked illustrative results and one bounded broader search when no usable footage is found.
+
 ## 0.10.19
 
 - Show a subtle preparation status while the first response scene is loading.

package/dist/react.js

@@ -1262,6 +1262,77 @@ var VideoError = class extends Error {
   }
 };
 
+// src/video-chat/caption-progress.ts
+function createCaptionVoice(source, now = () => performance.now()) {
+  const durations = /* @__PURE__ */ new Map();
+  let held = false;
+  let current;
+  const read = () => {
+    const state = current;
+    if (!state || !state.started || state.signal.aborted) return;
+    const audioTime = !state.browser ? source.getCurrentTime?.() : void 0;
+    const realClock = typeof audioTime === "number" && Number.isFinite(audioTime);
+    if (!held) {
+      state.elapsed = realClock ? Math.max(state.offset, audioTime) : state.offset + (state.since === void 0 ? 0 : (now() - state.since) / 1e3);
+    }
+    return { text: state.text, elapsedSeconds: Math.min(state.duration, Math.max(0, state.elapsed)), durationSeconds: state.duration, timing: realClock ? "audio" : "estimated" };
+  };
+  const reset = () => {
+    current = void 0;
+  };
+  const voice = {
+    get supportsOffsets() {
+      return source.supportsOffsets;
+    },
+    ...source.getCurrentTime ? { getCurrentTime: () => source.getCurrentTime() } : {},
+    async prepare(text, options) {
+      const prepared = await source.prepare(text, options);
+      if (!options?.signal?.aborted && Number.isFinite(prepared.seconds) && prepared.seconds > 0) {
+        if (durations.size >= 60) durations.delete(durations.keys().next().value);
+        durations.set(text.trim(), prepared.seconds);
+      }
+      return prepared;
+    },
+    async speak(text, options) {
+      const state = { text, duration: durations.get(text.trim()) ?? Math.max(1, text.trim().split(/\s+/u).length / 2.5), offset: options.offsetSeconds ?? 0, elapsed: options.offsetSeconds ?? 0, started: false, since: void 0, browser: false, signal: options.signal };
+      current = state;
+      const aborted = () => {
+        if (current === state) reset();
+      };
+      options.signal.addEventListener("abort", aborted, { once: true });
+      try {
+        await source.speak(text, { ...options, onStart: (kind) => {
+          if (current !== state || state.signal.aborted) return;
+          if (!state.started) {
+            state.started = true;
+            state.browser = kind === "browser";
+            state.since = now();
+          }
+          options.onStart?.(kind);
+        } });
+      } finally {
+        options.signal.removeEventListener("abort", aborted);
+        if (current === state) reset();
+      }
+    },
+    pause() {
+      read();
+      held = true;
+      source.pause();
+    },
+    resume() {
+      if (held && current?.started) {
+        current.offset = current.elapsed;
+        current.since = now();
+      }
+      held = false;
+      source.resume();
+    },
+    setMuted: (muted) => source.setMuted(muted)
+  };
+  return { voice, getCaptionProgress: read, reset };
+}
+
 // src/player/recover-scene-media.ts
 function recoverSceneMedia(scene) {
   if (scene.templateId === "cinemaMedia") {
@@ -1276,7 +1347,7 @@ function recoverSceneMedia(scene) {
 }
 
 // src/video-chat/use-video-chat.ts
-import { useCallback as useCallback2, useEffect as useEffect4, useReducer, useRef as useRef3 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo2, useReducer, useRef as useRef3 } from "react";
 
 // src/protocol/scene-timeline.ts
 function createQueue() {
@@ -1905,6 +1976,9 @@ function reducer(state, action) {
       return { ...state, capabilities: action.value };
     case "welcome":
       return { ...state, welcome: action.value };
+    case "resolved-mode":
+      if (state.turns.at(-1)?.id !== action.id) return state;
+      return { ...state, turns: replaceTurn(state.turns, action.id, (turn) => ({ ...turn, mode: action.mode })) };
     case "start":
       return {
         ...state,
@@ -2141,7 +2215,10 @@ function useVideoChatSession(options = {}) {
       onFallback: () => voiceWarningRef.current()
     });
   }
-  const voice = options.voice ?? ownedVoiceRef.current;
+  const rawVoice = options.voice ?? ownedVoiceRef.current;
+  const captionVoice = useMemo2(() => createCaptionVoice(rawVoice), [rawVoice]);
+  useEffect4(() => () => captionVoice.reset(), [captionVoice]);
+  const voice = captionVoice.voice;
   const voiceRef = useRef3(voice);
   voiceRef.current = voice;
   const unavailableVoiceLines = useRef3(/* @__PURE__ */ new Set());
@@ -2296,7 +2373,7 @@ function useVideoChatSession(options = {}) {
       throw new VideoError("timeoutMs must be positive", { code: "invalid_option" });
     }
     const timeout = setTimeout(() => controller.abort(new DOMException("Video chat timed out", "TimeoutError")), timeoutMs);
-    const mode = currentOptions.mode ?? "cinematic";
+    let mode = currentOptions.mode ?? "cinematic";
     const orientation = currentOptions.orientation ?? "landscape";
     const id = (currentOptions.createTurnId ?? defaultTurnId)();
     const conversation = conversationFor(stateRef.current.turns);
@@ -2441,6 +2518,12 @@ function useVideoChatSession(options = {}) {
       if (!response.body || !response.headers.get("content-type")?.includes("text/event-stream")) {
         throw new VideoError("Video chat endpoint did not return a video stream", { code: "invalid_response" });
       }
+      const resolvedMode = response.headers.get("x-vanillasky-resolved-video-mode");
+      if (isCurrent() && (resolvedMode === "pexels" || resolvedMode === "cinematic")) {
+        mode = resolvedMode;
+        dispatch({ type: "resolved-mode", id, mode });
+        if (firstFrameRef.current?.turnId === id) firstFrameRef.current.mode = mode;
+      }
       const planned = [];
       const lines = spokenHook ? [spokenHook] : [];
       const pending = [];
@@ -2818,14 +2901,117 @@ function useVideoChatSession(options = {}) {
     playerKey: state.playerKey,
     playerProps
   };
-  return { chat, restoreSession };
+  return { chat, restoreSession, getCaptionProgress: captionVoice.getCaptionProgress };
+}
+
+// src/video-chat/caption-pages.tsx
+import { useEffect as useEffect5, useLayoutEffect, useRef as useRef4, useState as useState3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function splitCaptionPages(text, fits) {
+  const pages = [];
+  let rest = Array.from(text);
+  while (rest.length) {
+    let low = 1;
+    let high = rest.length;
+    while (low < high) {
+      const middle = Math.ceil((low + high) / 2);
+      if (fits(rest.slice(0, middle).join(""))) low = middle;
+      else high = middle - 1;
+    }
+    let end = low;
+    if (end < rest.length) {
+      const space = rest.slice(0, end + 1).lastIndexOf(" ");
+      if (space > 0) end = space + 1;
+    }
+    pages.push(rest.slice(0, end).join(""));
+    rest = rest.slice(end);
+  }
+  return pages;
+}
+function captionPageAt(pages, elapsed, duration) {
+  const total = pages.reduce((sum, page) => sum + page.length, 0);
+  const position = duration > 0 ? Math.max(0, elapsed / duration) * total : 0;
+  let end = 0;
+  for (let index = 0; index < pages.length - 1; index++) {
+    end += pages[index].length;
+    if (position < end) return index;
+  }
+  return Math.max(0, pages.length - 1);
+}
+function CaptionPages({ text, getProgress }) {
+  const line = useRef4(null);
+  const lastProgress = useRef4(void 0);
+  const getter = useRef4(getProgress);
+  getter.current = getProgress;
+  const [source, setSource] = useState3(text);
+  const [pages, setPages] = useState3([]);
+  const [index, setIndex] = useState3(0);
+  const [timing, setTiming] = useState3();
+  useLayoutEffect(() => {
+    const element = line.current;
+    if (!element) return;
+    const measure = () => {
+      const width = element.getBoundingClientRect().width;
+      if (!width) {
+        setPages([source]);
+        return;
+      }
+      const style = getComputedStyle(element);
+      const probe = element.cloneNode(false);
+      probe.removeAttribute("aria-live");
+      probe.setAttribute("aria-hidden", "true");
+      Object.assign(probe.style, { position: "absolute", visibility: "hidden", pointerEvents: "none", width: `${width}px`, height: "auto", maxHeight: "none", inset: "0 auto auto 0", animation: "none" });
+      element.parentElement.append(probe);
+      const height = parseFloat(style.lineHeight) * 2;
+      const next = splitCaptionPages(source, (candidate) => {
+        probe.textContent = candidate;
+        return probe.getBoundingClientRect().height <= height + 0.5;
+      });
+      probe.remove();
+      setPages(next);
+    };
+    measure();
+    let previousWidth = element.getBoundingClientRect().width;
+    let previousFont = getComputedStyle(element).font;
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(() => {
+      const width = element.getBoundingClientRect().width;
+      const font = getComputedStyle(element).font;
+      if (width !== previousWidth || font !== previousFont) {
+        previousWidth = width;
+        previousFont = font;
+        measure();
+      }
+    });
+    observer?.observe(element);
+    document.fonts?.addEventListener("loadingdone", measure);
+    return () => {
+      observer?.disconnect();
+      document.fonts?.removeEventListener("loadingdone", measure);
+    };
+  }, [source]);
+  useEffect5(() => {
+    let frame = 0;
+    const update = () => {
+      const observed = text ? getter.current() : void 0;
+      if (observed) lastProgress.current = { caption: text, progress: observed };
+      const progress = observed ?? (lastProgress.current?.caption === text ? lastProgress.current.progress : void 0);
+      const nextSource = progress?.text ?? text;
+      setSource((current) => current === nextSource ? current : nextSource);
+      setTiming(progress?.timing);
+      setIndex(nextSource !== source ? 0 : captionPageAt(pages, progress?.elapsedSeconds ?? 0, progress?.durationSeconds ?? 0));
+      frame = requestAnimationFrame(update);
+    };
+    update();
+    return () => cancelAnimationFrame(frame);
+  }, [text, source, pages]);
+  return /* @__PURE__ */ jsx3("p", { ref: line, className: "line", "aria-live": "polite", "data-caption-timing": timing, "data-caption-page": index, children: pages[index] ?? "" });
 }
 
 // src/video-chat/video-chat.tsx
-import { useCallback as useCallback6, useEffect as useEffect9, useId, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef8, useState as useState7 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect10, useId, useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef9, useState as useState8 } from "react";
 
 // src/video-chat/icons.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var stroke = {
   fill: "none",
   stroke: "currentColor",
@@ -2834,50 +3020,50 @@ var stroke = {
   strokeLinejoin: "round"
 };
 function Glyph({ children }) {
-  return /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", ...stroke, children });
+  return /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", ...stroke, children });
 }
 var Sessions = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx3("path", { d: "M5 3h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8l-5 3V5a2 2 0 0 1 2-2Z" }),
-  /* @__PURE__ */ jsx3("path", { d: "M17 8h2a2 2 0 0 1 2 2v11l-4-3h-6a2 2 0 0 1-2-2v-2" })
+  /* @__PURE__ */ jsx4("path", { d: "M5 3h10a2 2 0 0 1 2 2v7a2 2 0 0 1-2 2H8l-5 3V5a2 2 0 0 1 2-2Z" }),
+  /* @__PURE__ */ jsx4("path", { d: "M17 8h2a2 2 0 0 1 2 2v11l-4-3h-6a2 2 0 0 1-2-2v-2" })
 ] });
-var Plus = () => /* @__PURE__ */ jsx3(Glyph, { children: /* @__PURE__ */ jsx3("path", { d: "M12 5v14M5 12h14" }) });
+var Plus = () => /* @__PURE__ */ jsx4(Glyph, { children: /* @__PURE__ */ jsx4("path", { d: "M12 5v14M5 12h14" }) });
 var Gear = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "3" }),
-  /* @__PURE__ */ jsx3("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" })
+  /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "3" }),
+  /* @__PURE__ */ jsx4("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z" })
 ] });
 var Sound = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx3("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
-  /* @__PURE__ */ jsx3("path", { d: "M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13" })
+  /* @__PURE__ */ jsx4("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
+  /* @__PURE__ */ jsx4("path", { d: "M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13" })
 ] });
 var Muted = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx3("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
-  /* @__PURE__ */ jsx3("path", { d: "m22 9-6 6M16 9l6 6" })
+  /* @__PURE__ */ jsx4("path", { d: "M11 5 6 9H2v6h4l5 4z" }),
+  /* @__PURE__ */ jsx4("path", { d: "m22 9-6 6M16 9l6 6" })
 ] });
 var Mic = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx3("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }),
-  /* @__PURE__ */ jsx3("path", { d: "M5 11a7 7 0 0 0 14 0M12 18v4" })
+  /* @__PURE__ */ jsx4("rect", { x: "9", y: "2", width: "6", height: "12", rx: "3" }),
+  /* @__PURE__ */ jsx4("path", { d: "M5 11a7 7 0 0 0 14 0M12 18v4" })
 ] });
-var Send = () => /* @__PURE__ */ jsx3(Glyph, { children: /* @__PURE__ */ jsx3("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
+var Send = () => /* @__PURE__ */ jsx4(Glyph, { children: /* @__PURE__ */ jsx4("path", { d: "M12 19V5M5 12l7-7 7 7" }) });
 var Stop = () => /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", fill: "currentColor", children: [
-  /* @__PURE__ */ jsx3("rect", { x: "7", y: "5", width: "3.4", height: "14", rx: "1.4" }),
-  /* @__PURE__ */ jsx3("rect", { x: "13.6", y: "5", width: "3.4", height: "14", rx: "1.4" })
+  /* @__PURE__ */ jsx4("rect", { x: "7", y: "5", width: "3.4", height: "14", rx: "1.4" }),
+  /* @__PURE__ */ jsx4("rect", { x: "13.6", y: "5", width: "3.4", height: "14", rx: "1.4" })
 ] });
-var Play = () => /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx3("path", { d: "M8 5.5v13l11-6.5z" }) });
+var Play = () => /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", width: "18", height: "18", "aria-hidden": "true", fill: "currentColor", children: /* @__PURE__ */ jsx4("path", { d: "M8 5.5v13l11-6.5z" }) });
 var Replay = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx3("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }),
-  /* @__PURE__ */ jsx3("path", { d: "M3 3v5h5" })
+  /* @__PURE__ */ jsx4("path", { d: "M3 12a9 9 0 1 0 3-6.7L3 8" }),
+  /* @__PURE__ */ jsx4("path", { d: "M3 3v5h5" })
 ] });
-var ChevronUp = () => /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", ...stroke, children: /* @__PURE__ */ jsx3("path", { d: "m6 15 6-6 6 6" }) });
-var Close = () => /* @__PURE__ */ jsx3(Glyph, { children: /* @__PURE__ */ jsx3("path", { d: "M6 6l12 12M18 6 6 18" }) });
+var ChevronUp = () => /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", width: "14", height: "14", "aria-hidden": "true", ...stroke, children: /* @__PURE__ */ jsx4("path", { d: "m6 15 6-6 6 6" }) });
+var Close = () => /* @__PURE__ */ jsx4(Glyph, { children: /* @__PURE__ */ jsx4("path", { d: "M6 6l12 12M18 6 6 18" }) });
 var Warning = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
-  /* @__PURE__ */ jsx3("circle", { cx: "12", cy: "12", r: "9" }),
-  /* @__PURE__ */ jsx3("path", { d: "M12 8v5M12 16.2v.1" })
+  /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ jsx4("path", { d: "M12 8v5M12 16.2v.1" })
 ] });
 
 // src/video-chat/use-dismiss.ts
-import { useEffect as useEffect5 } from "react";
+import { useEffect as useEffect6 } from "react";
 function useDismiss(open, close, surfaces) {
-  useEffect5(() => {
+  useEffect6(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
@@ -2899,7 +3085,7 @@ function useDismiss(open, close, surfaces) {
   }, [open, close, surfaces]);
 }
 function useFocusTrap(active, surface) {
-  useEffect5(() => {
+  useEffect6(() => {
     if (!active) return;
     const returnTo = document.activeElement;
     const focusable = () => Array.from(
@@ -2932,12 +3118,12 @@ function useFocusTrap(active, surface) {
 }
 
 // src/video-chat/suggestion-cards.tsx
-import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef4, useState as useState3 } from "react";
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useCallback as useCallback3, useEffect as useEffect7, useRef as useRef5, useState as useState4 } from "react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 function Frame({ media, poster, playing, onReady, onError, revealWhenReady = false }) {
-  const video = useRef4(null);
-  const [playingUrl, setPlayingUrl] = useState3(null);
-  useEffect6(() => {
+  const video = useRef5(null);
+  const [playingUrl, setPlayingUrl] = useState4(null);
+  useEffect7(() => {
     const element = video.current;
     if (!element || playing === void 0) return;
     if (playing) void element.play().catch(() => void 0);
@@ -2949,9 +3135,9 @@ function Frame({ media, poster, playing, onReady, onError, revealWhenReady = fal
     onReady?.();
   };
   const appearance = revealWhenReady ? { opacity: playingUrl === media.url ? 1 : 0, transition: "opacity 200ms ease" } : void 0;
-  if (media.type === "image") return /* @__PURE__ */ jsx4("img", { className: "frame-media", src: media.url, alt: "", style: appearance, onLoad: ready, onError });
+  if (media.type === "image") return /* @__PURE__ */ jsx5("img", { className: "frame-media", src: media.url, alt: "", style: appearance, onLoad: ready, onError });
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "video",
       {
         ref: video,
@@ -2972,24 +3158,24 @@ function Frame({ media, poster, playing, onReady, onError, revealWhenReady = fal
         "aria-hidden": "true"
       }
     ),
-    poster && media.posterUrl && playingUrl !== media.url && /* @__PURE__ */ jsx4("img", { className: "frame-media frame-poster", src: media.posterUrl, alt: "", onLoad: onReady })
+    poster && media.posterUrl && playingUrl !== media.url && /* @__PURE__ */ jsx5("img", { className: "frame-media frame-poster", src: media.posterUrl, alt: "", onLoad: onReady })
   ] });
 }
 function SuggestionCards({ suggestions, label, onAsk }) {
-  const railRef = useRef4(null);
-  const [at, setAt] = useState3(0);
-  const [taken, setTaken] = useState3(false);
+  const railRef = useRef5(null);
+  const [at, setAt] = useState4(0);
+  const [taken, setTaken] = useState4(false);
   const take = useCallback3((index) => {
     setTaken(true);
     setAt(index);
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (taken || suggestions.length < 2) return;
     if (window.matchMedia?.("(prefers-reduced-motion: reduce)").matches) return;
     const tour = window.setInterval(() => setAt((index) => (index + 1) % suggestions.length), 5e3);
     return () => window.clearInterval(tour);
   }, [taken, suggestions.length]);
-  useEffect6(() => {
+  useEffect7(() => {
     const rail = railRef.current;
     const card = rail?.children[at];
     if (!rail || !card) return;
@@ -2999,7 +3185,7 @@ function SuggestionCards({ suggestions, label, onAsk }) {
   }, [at]);
   if (suggestions.length === 0) return null;
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    /* @__PURE__ */ jsx4("ul", { className: "cards", ref: railRef, "aria-label": label, children: suggestions.map((card, index) => /* @__PURE__ */ jsx4("li", { children: /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsx5("ul", { className: "cards", ref: railRef, "aria-label": label, children: suggestions.map((card, index) => /* @__PURE__ */ jsx5("li", { children: /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
@@ -3008,13 +3194,13 @@ function SuggestionCards({ suggestions, label, onAsk }) {
         onPointerEnter: () => take(index),
         onClick: () => onAsk(card),
         children: [
-          /* @__PURE__ */ jsx4(Frame, { media: card.media, poster: true, playing: index === at }),
-          /* @__PURE__ */ jsx4("span", { className: "card-wash", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx4("span", { className: "card-prompt", children: card.prompt })
+          /* @__PURE__ */ jsx5(Frame, { media: card.media, poster: true, playing: index === at }),
+          /* @__PURE__ */ jsx5("span", { className: "card-wash", "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx5("span", { className: "card-prompt", children: card.prompt })
         ]
       }
     ) }, card.prompt)) }),
-    suggestions.length > 1 && /* @__PURE__ */ jsx4("div", { className: "card-dots", role: "group", "aria-label": `${label} navigation`, children: suggestions.map((card, index) => /* @__PURE__ */ jsx4(
+    suggestions.length > 1 && /* @__PURE__ */ jsx5("div", { className: "card-dots", role: "group", "aria-label": `${label} navigation`, children: suggestions.map((card, index) => /* @__PURE__ */ jsx5(
       "button",
       {
         type: "button",
@@ -3029,30 +3215,30 @@ function SuggestionCards({ suggestions, label, onAsk }) {
 }
 
 // src/video-chat/welcome.tsx
-import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function Welcome({ data, onAsk, title }) {
   return /* @__PURE__ */ jsxs5("div", { className: "welcome", children: [
-    /* @__PURE__ */ jsx5(Frame, { media: data?.hero ?? null, poster: true }),
-    /* @__PURE__ */ jsx5("div", { className: "welcome-wash", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx6(Frame, { media: data?.hero ?? null, poster: true }),
+    /* @__PURE__ */ jsx6("div", { className: "welcome-wash", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs5("div", { className: "welcome-body", children: [
-      /* @__PURE__ */ jsx5("h1", { className: "welcome-title", children: title ?? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+      /* @__PURE__ */ jsx6("h1", { className: "welcome-title", children: title ?? /* @__PURE__ */ jsxs5(Fragment3, { children: [
         "An AI chat that responds",
-        /* @__PURE__ */ jsx5("br", {}),
-        /* @__PURE__ */ jsx5("em", { children: "in video, not text." })
+        /* @__PURE__ */ jsx6("br", {}),
+        /* @__PURE__ */ jsx6("em", { children: "in video, not text." })
       ] }) }),
-      /* @__PURE__ */ jsx5(SuggestionCards, { suggestions: data?.cards ?? [], label: "Suggested prompts", onAsk })
+      /* @__PURE__ */ jsx6(SuggestionCards, { suggestions: data?.cards ?? [], label: "Suggested prompts", onAsk })
     ] })
   ] });
 }
 
 // src/video-chat/opening-chapter.tsx
-import { useLayoutEffect, useRef as useRef5, useState as useState4 } from "react";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef6, useState as useState5 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function OpeningChapter({ title, preparing = false }) {
-  const root = useRef5(null);
-  const [size, setSize] = useState4({ width: 1080, height: 1080 });
-  const [titleBottom, setTitleBottom] = useState4(0);
-  useLayoutEffect(() => {
+  const root = useRef6(null);
+  const [size, setSize] = useState5({ width: 1080, height: 1080 });
+  const [titleBottom, setTitleBottom] = useState5(0);
+  useLayoutEffect2(() => {
     const element = root.current;
     if (!element) return;
     const measure = () => {
@@ -3070,7 +3256,7 @@ function OpeningChapter({ title, preparing = false }) {
     return () => observer.disconnect();
   }, [title]);
   return /* @__PURE__ */ jsxs6("div", { ref: root, "data-opening-chapter": true, className: "opening-chapter", children: [
-    /* @__PURE__ */ jsx6(
+    /* @__PURE__ */ jsx7(
       TitleSceneTemplate,
       {
         variables: { title },
@@ -3083,14 +3269,14 @@ function OpeningChapter({ title, preparing = false }) {
       }
     ),
     preparing && /* @__PURE__ */ jsxs6("div", { className: "video-preparation", style: { top: titleBottom + 24 }, role: "status", "aria-label": "Video preparation", children: [
-      /* @__PURE__ */ jsx6("span", { className: "video-preparation-spinner", "aria-hidden": "true" }),
-      /* @__PURE__ */ jsx6("span", { className: "video-preparation-text", children: "Preparing your video\u2026" })
+      /* @__PURE__ */ jsx7("span", { className: "video-preparation-spinner", "aria-hidden": "true" }),
+      /* @__PURE__ */ jsx7("span", { className: "video-preparation-text", children: "Preparing your video\u2026" })
     ] })
   ] });
 }
 
 // src/video-chat/use-voice-input.ts
-import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef6, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect8, useRef as useRef7, useState as useState6 } from "react";
 function recognitionConstructor() {
   if (typeof window === "undefined") return void 0;
   const holder = window;
@@ -3160,16 +3346,16 @@ async function recordAndTranscribe(signal, ready, captured, options) {
   return clip ? transcribeRecording(clip, signal, options) : "";
 }
 function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {}) {
-  const [supported, setSupported] = useState5(false);
-  const [listening, setListening] = useState5(false);
-  const [error, setError] = useState5();
-  const [thinking, setThinking] = useState5(false);
-  const recognitionRef = useRef6(void 0);
-  const useRecorderRef = useRef6(false);
-  const operationRef = useRef6(void 0);
-  const handlerRef = useRef6(onTranscript);
+  const [supported, setSupported] = useState6(false);
+  const [listening, setListening] = useState6(false);
+  const [error, setError] = useState6();
+  const [thinking, setThinking] = useState6(false);
+  const recognitionRef = useRef7(void 0);
+  const useRecorderRef = useRef7(false);
+  const operationRef = useRef7(void 0);
+  const handlerRef = useRef7(onTranscript);
   handlerRef.current = onTranscript;
-  useEffect7(() => {
+  useEffect8(() => {
     setSupported(supportsVoiceInput(transcriptionAvailable));
   }, [transcriptionAvailable]);
   const stop = useCallback4(() => {
@@ -3182,7 +3368,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
     setListening(false);
     setThinking(false);
   }, []);
-  useEffect7(() => () => {
+  useEffect8(() => () => {
     recognitionRef.current?.abort();
     recognitionRef.current = void 0;
     const operation = operationRef.current;
@@ -3294,13 +3480,13 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
 }
 
 // src/video-chat/use-immersive-controls.ts
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect9, useRef as useRef8, useState as useState7 } from "react";
 function useImmersiveControls(playing, pinned, hasCaptions = false) {
-  const [visible, setVisible] = useState6(true);
-  const hovered = useRef7(false);
-  const focused = useRef7(false);
-  const previousCaptions = useRef7(false);
-  const timer = useRef7(null);
+  const [visible, setVisible] = useState7(true);
+  const hovered = useRef8(false);
+  const focused = useRef8(false);
+  const previousCaptions = useRef8(false);
+  const timer = useRef8(null);
   const clearTimer = useCallback5(() => {
     if (timer.current !== null) clearTimeout(timer.current);
     timer.current = null;
@@ -3315,7 +3501,7 @@ function useImmersiveControls(playing, pinned, hasCaptions = false) {
       }, 2e3);
     }
   }, [clearTimer, playing, pinned]);
-  useEffect8(() => {
+  useEffect9(() => {
     const firstCaption = hasCaptions && !previousCaptions.current;
     previousCaptions.current = hasCaptions;
     if (firstCaption && playing && !pinned && !focused.current) {
@@ -3351,9 +3537,9 @@ function useImmersiveControls(playing, pinned, hasCaptions = false) {
 }
 
 // src/video-chat/logo.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function Logo() {
-  return /* @__PURE__ */ jsx7("img", { className: "brand-logo", src: new URL("./assets/vanillasky-logo.svg", import.meta.url).href, alt: "VanillaSky", width: 144, height: 36 });
+  return /* @__PURE__ */ jsx8("img", { className: "brand-logo", src: new URL("./assets/vanillasky-logo.svg", import.meta.url).href, alt: "VanillaSky", width: 144, height: 36 });
 }
 
 // src/video-chat/modes.ts
@@ -3364,11 +3550,11 @@ var visualModes = [
 var defaultMode = visualModes[0];
 
 // src/video-chat/video-chat.tsx
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var DESKTOP_WIDTH = 900;
 function useViewportOrientation() {
-  const [portrait, setPortrait] = useState7(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`).matches : false);
-  useEffect9(() => {
+  const [portrait, setPortrait] = useState8(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`).matches : false);
+  useEffect10(() => {
     if (typeof window.matchMedia !== "function") return;
     const query = window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`);
     const update = () => setPortrait(query.matches);
@@ -3379,47 +3565,59 @@ function useViewportOrientation() {
   return portrait ? "portrait" : "landscape";
 }
 function Waveform({ active, listening }) {
-  return /* @__PURE__ */ jsx8("span", { className: `waveform${active ? " on" : ""}${listening ? " hearing" : ""}`, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((bar) => /* @__PURE__ */ jsx8("span", { style: { animationDelay: `${bar * 140}ms`, animationDuration: `${900 + bar * 130}ms` } }, bar)) });
+  return /* @__PURE__ */ jsx9("span", { className: `waveform${active ? " on" : ""}${listening ? " hearing" : ""}`, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((bar) => /* @__PURE__ */ jsx9("span", { style: { animationDelay: `${bar * 140}ms`, animationDuration: `${900 + bar * 130}ms` } }, bar)) });
 }
 function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice = false }) {
-  const [dismissedNoticeTurn, setDismissedNoticeTurn] = useState7();
-  const [draft, setDraft] = useState7("");
-  const [selectedMode, setSelectedMode] = useState7();
-  const [savedSessions, setSavedSessions] = useState7([]);
-  const [historyOpen, setHistoryOpen] = useState7(false);
-  const [settingsOpen, setSettingsOpen] = useState7(false);
-  const [aboutOpen, setAboutOpen] = useState7(false);
-  const [captionsOn, setCaptionsOn] = useState7(true);
-  const [captionsExpanded, setCaptionsExpanded] = useState7(false);
-  const [alwaysShowControls, setAlwaysShowControls] = useState7(false);
-  const [editing, setEditing] = useState7(false);
-  const resumeAfterInput = useRef8(false);
-  const panelRef = useRef8(null);
-  const composerRef = useRef8(null);
+  const [dismissedNoticeTurn, setDismissedNoticeTurn] = useState8();
+  const [draft, setDraft] = useState8("");
+  const [selectedMode, setSelectedMode] = useState8();
+  const [savedSessions, setSavedSessions] = useState8([]);
+  const [historyOpen, setHistoryOpen] = useState8(false);
+  const [settingsOpen, setSettingsOpen] = useState8(false);
+  const [aboutOpen, setAboutOpen] = useState8(false);
+  const [captionsOn, setCaptionsOn] = useState8(true);
+  const [captionsExpanded, setCaptionsExpanded] = useState8(false);
+  const [alwaysShowControls, setAlwaysShowControls] = useState8(false);
+  const [editing, setEditing] = useState8(false);
+  const resumeAfterInput = useRef9(false);
+  const panelRef = useRef9(null);
+  const composerRef = useRef9(null);
   const viewportOrientation = useViewportOrientation();
   const sessionOrientation = options.orientation ?? viewportOrientation;
-  const { chat, restoreSession } = useVideoChatSession({
+  const { chat, restoreSession, getCaptionProgress } = useVideoChatSession({
     ...options,
     orientation: sessionOrientation,
     mode: selectedMode ?? options.mode
   });
+  const observedMode = useRef9(void 0);
+  useEffect10(() => {
+    const turn = chat.currentTurn;
+    if (!turn?.mode) {
+      observedMode.current = void 0;
+      return;
+    }
+    const previous = observedMode.current;
+    observedMode.current = { id: turn.id, mode: turn.mode };
+    if (turn.id !== chat.shownTurn?.id) return;
+    if (previous?.id !== turn.id || previous.mode !== turn.mode) setSelectedMode(turn.mode);
+  }, [chat.currentTurn, chat.shownTurn?.id]);
   const instanceId = useId();
   const historyId = `${instanceId}-history`;
   const settingsId = `${instanceId}-settings`;
   const promptId = `${instanceId}-prompt`;
-  const inputRef = useRef8(null);
-  const historyRef = useRef8(null);
-  const historyButtonRef = useRef8(null);
-  const settingsRef = useRef8(null);
-  const settingsButtonRef = useRef8(null);
+  const inputRef = useRef9(null);
+  const historyRef = useRef9(null);
+  const historyButtonRef = useRef9(null);
+  const settingsRef = useRef9(null);
+  const settingsButtonRef = useRef9(null);
   const listen = useVoiceInput(setDraft, chat.capabilities?.transcription ?? false, {
     endpoint: options.endpoint,
     headers: options.headers,
     credentials: options.credentials,
     fetcher: options.fetcher
   });
-  const historySurfaces = useMemo2(() => [historyRef, historyButtonRef], []);
-  const settingsSurfaces = useMemo2(() => [settingsRef, settingsButtonRef], []);
+  const historySurfaces = useMemo3(() => [historyRef, historyButtonRef], []);
+  const settingsSurfaces = useMemo3(() => [settingsRef, settingsButtonRef], []);
   const closeHistory = useCallback6(() => setHistoryOpen(false), []);
   const closeSettings = useCallback6(() => setSettingsOpen(false), []);
   useDismiss(historyOpen, closeHistory, historySurfaces);
@@ -3463,19 +3661,19 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
   const shown = chat.shownTurn;
   const showing = chat.playerProps != null;
   const handoffKey = `${shown?.id ?? ""}:${chat.playerKey}`;
-  const [presentedBody, setPresentedBody] = useState7();
-  const handoff = useRef8({ key: handoffKey, live: showing, active: false, frame: 0 });
+  const [presentedBody, setPresentedBody] = useState8();
+  const handoff = useRef9({ key: handoffKey, live: showing, active: false, frame: 0 });
   const handoffStopped = chat.status === "error" || chat.status === "cancelled";
   const waitingForBody = showing && presentedBody !== handoffKey;
   const openingChapter = Boolean(shown?.prompt) && (!showing || waitingForBody) && chat.status !== "error" && chat.status !== "cancelled" && chat.status !== "ended";
-  const [preparingKey, setPreparingKey] = useState7();
-  useEffect9(() => {
+  const [preparingKey, setPreparingKey] = useState8();
+  useEffect10(() => {
     setPreparingKey(void 0);
     if (!openingChapter || !shown?.opening || chat.speaking) return;
     const timer = setTimeout(() => setPreparingKey(shown.id), 1e3);
     return () => clearTimeout(timer);
   }, [openingChapter, shown?.opening, shown?.id, chat.speaking]);
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const current = { key: handoffKey, live: showing && !handoffStopped, active: openingChapter && showing, frame: 0 };
     handoff.current = current;
     return () => {
@@ -3508,9 +3706,12 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
   const status = chat.turns.length === 0 ? "idle" : chat.status === "composing" ? "drawing" : chat.status === "playing" ? "narrating" : chat.status === "error" || chat.status === "cancelled" ? "ended" : chat.status;
   const shownOrientation = shown?.orientation ?? sessionOrientation;
   const stageOrientation = shown?.fixedOrientation ? shownOrientation : sessionOrientation;
+  useEffect10(() => {
+    setCaptionsExpanded(false);
+  }, [chat.playbackEnded, shown?.id, chat.playerKey]);
   const line = chat.caption ?? "";
   const fullTranscript = shown?.video ? [shown.opening, ...shown.video.scenes.map((scene) => scene.narration)].filter((entry) => Boolean(entry)) : chat.transcript;
-  const transport = status === "narrating" ? { label: "Pause", action: chat.pause, icon: /* @__PURE__ */ jsx8(Stop, {}) } : status === "paused" ? { label: "Continue", action: chat.resume, icon: /* @__PURE__ */ jsx8(Play, {}) } : status === "ended" && shown?.completed && shown.video ? { label: "Play again", action: chat.replay, icon: /* @__PURE__ */ jsx8(Replay, {}) } : void 0;
+  const transport = status === "narrating" ? { label: "Pause", action: chat.pause, icon: /* @__PURE__ */ jsx9(Stop, {}) } : status === "paused" ? { label: "Continue", action: chat.resume, icon: /* @__PURE__ */ jsx9(Play, {}) } : status === "ended" && shown?.completed && shown.video ? { label: "Play again", action: chat.replay, icon: /* @__PURE__ */ jsx9(Replay, {}) } : void 0;
   const cancelInput = useCallback6(() => {
     listen.stop();
     setDraft("");
@@ -3541,7 +3742,7 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
     onFocusCapture: controls.onFocusCapture,
     onBlurCapture: controls.onBlurCapture
   };
-  useLayoutEffect2(() => {
+  useLayoutEffect3(() => {
     const composer = composerRef.current;
     if (!composer) return;
     const measure = () => panelRef.current?.style.setProperty("--composer-height", `${composer.getBoundingClientRect().height}px`);
@@ -3564,10 +3765,7 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
       onKeyDownCapture: controls.reveal,
       children: [
         /* @__PURE__ */ jsxs7("header", { className: "chrome", ...controlEvents, children: [
-          /* @__PURE__ */ jsxs7("div", { className: "session-brand", children: [
-            /* @__PURE__ */ jsx8("a", { className: "home-link", href: "/", "aria-label": "Home", children: /* @__PURE__ */ jsx8(Logo, {}) }),
-            (shown?.mode ?? selectedMode ?? options.mode) === "pexels" && /* @__PURE__ */ jsx8("a", { className: "media-credit", href: "https://www.pexels.com", target: "_blank", rel: "noopener noreferrer", children: "Pexels" })
-          ] }),
+          /* @__PURE__ */ jsx9("div", { className: "session-brand", children: /* @__PURE__ */ jsx9("a", { className: "home-link", href: "/", "aria-label": "Home", children: /* @__PURE__ */ jsx9(Logo, {}) }) }),
           /* @__PURE__ */ jsxs7("div", { className: "group", children: [
             /* @__PURE__ */ jsxs7(
               "button",
@@ -3584,12 +3782,12 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                   setSettingsOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx8(Sessions, {}),
-                  /* @__PURE__ */ jsx8("span", { className: "nav-label", children: "Sessions" })
+                  /* @__PURE__ */ jsx9(Sessions, {}),
+                  /* @__PURE__ */ jsx9("span", { className: "nav-label", children: "Sessions" })
                 ]
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 ref: settingsButtonRef,
@@ -3603,10 +3801,10 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                   setSettingsOpen((open) => !open);
                   setHistoryOpen(false);
                 },
-                children: /* @__PURE__ */ jsx8(Gear, {})
+                children: /* @__PURE__ */ jsx9(Gear, {})
               }
             ),
-            /* @__PURE__ */ jsx8(
+            /* @__PURE__ */ jsx9(
               "button",
               {
                 type: "button",
@@ -3614,16 +3812,16 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                 "aria-label": chat.muted ? "Turn the voice on" : "Turn the voice off",
                 "aria-pressed": chat.muted,
                 onClick: () => chat.setMuted(!chat.muted),
-                children: chat.muted ? /* @__PURE__ */ jsx8(Muted, {}) : /* @__PURE__ */ jsx8(Sound, {})
+                children: chat.muted ? /* @__PURE__ */ jsx9(Muted, {}) : /* @__PURE__ */ jsx9(Sound, {})
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ jsxs7("div", { className: "stage-area", children: [
           /* @__PURE__ */ jsxs7("div", { className: "stage", style: { background: "#000" }, children: [
-            openingChapter && /* @__PURE__ */ jsx8(OpeningChapter, { preparing: preparingKey === shown.id && !chat.speaking, title: openingTitle.length > 120 ? `${openingTitle.slice(0, 117).trimEnd()}\u2026` : openingTitle }, shown.id),
-            !showing && chat.turns.length === 0 && /* @__PURE__ */ jsx8(Welcome, { data: chat.welcome, onAsk: ask, title: welcomeTitle }),
-            chat.playerProps && /* @__PURE__ */ jsx8("div", { className: "player-fit", style: { width: stageOrientation === "portrait" ? "min(100cqw, 56.25cqh)" : "min(100cqw, 177.7778cqh)" }, children: /* @__PURE__ */ jsx8(
+            openingChapter && /* @__PURE__ */ jsx9(OpeningChapter, { preparing: preparingKey === shown.id && !chat.speaking, title: openingTitle.length > 120 ? `${openingTitle.slice(0, 117).trimEnd()}\u2026` : openingTitle }, shown.id),
+            !showing && chat.turns.length === 0 && /* @__PURE__ */ jsx9(Welcome, { data: chat.welcome, onAsk: ask, title: welcomeTitle }),
+            chat.playerProps && /* @__PURE__ */ jsx9("div", { className: "player-fit", style: { width: stageOrientation === "portrait" ? "min(100cqw, 56.25cqh)" : "min(100cqw, 177.7778cqh)" }, children: /* @__PURE__ */ jsx9(
               VideoPlayer,
               {
                 ...chat.playerProps,
@@ -3636,27 +3834,27 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
               chat.playerKey
             ) }),
             showing && chat.playbackEnded && chat.suggestions.length > 0 && /* @__PURE__ */ jsxs7("div", { className: "ending", children: [
-              /* @__PURE__ */ jsx8("div", { className: "ending-wash", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx9("div", { className: "ending-wash", "aria-hidden": "true" }),
               /* @__PURE__ */ jsxs7("div", { className: "ending-body", children: [
-                /* @__PURE__ */ jsx8("p", { className: "ending-label", children: "Ask next" }),
-                /* @__PURE__ */ jsx8(SuggestionCards, { suggestions: [...chat.suggestions], label: "Follow-up prompts", onAsk: ask })
+                /* @__PURE__ */ jsx9("p", { className: "ending-label", children: "Ask next" }),
+                /* @__PURE__ */ jsx9(SuggestionCards, { suggestions: [...chat.suggestions], label: "Follow-up prompts", onAsk: ask })
               ] })
             ] })
           ] }),
           historyOpen && /* @__PURE__ */ jsxs7("nav", { ref: historyRef, id: historyId, className: "sheet-popover history", role: "dialog", "aria-modal": "true", "aria-label": "Sessions", children: [
             /* @__PURE__ */ jsxs7("div", { className: "popover-heading", children: [
-              /* @__PURE__ */ jsx8("h2", { children: "Sessions" }),
-              /* @__PURE__ */ jsx8("button", { type: "button", className: "round", "aria-label": "Close sessions", onClick: closeHistory, children: /* @__PURE__ */ jsx8(Close, {}) })
+              /* @__PURE__ */ jsx9("h2", { children: "Sessions" }),
+              /* @__PURE__ */ jsx9("button", { type: "button", className: "round", "aria-label": "Close sessions", onClick: closeHistory, children: /* @__PURE__ */ jsx9(Close, {}) })
             ] }),
             /* @__PURE__ */ jsxs7("button", { type: "button", className: "history-row session-new", "aria-label": "New session", onClick: newSession, children: [
-              /* @__PURE__ */ jsx8(Plus, {}),
+              /* @__PURE__ */ jsx9(Plus, {}),
               /* @__PURE__ */ jsxs7("span", { className: "prompt", children: [
                 "New session",
-                /* @__PURE__ */ jsx8("small", { children: "Start a fresh conversation" })
+                /* @__PURE__ */ jsx9("small", { children: "Start a fresh conversation" })
               ] })
             ] }),
-            /* @__PURE__ */ jsx8("h3", { className: "section-label", children: "Current session" }),
-            chat.turns.length === 0 && /* @__PURE__ */ jsx8("p", { className: "history-empty", children: "Your questions will appear here." }),
+            /* @__PURE__ */ jsx9("h3", { className: "section-label", children: "Current session" }),
+            chat.turns.length === 0 && /* @__PURE__ */ jsx9("p", { className: "history-empty", children: "Your questions will appear here." }),
             chat.turns.map((turn, index) => /* @__PURE__ */ jsxs7(
               "button",
               {
@@ -3673,17 +3871,17 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                   setHistoryOpen(false);
                 },
                 children: [
-                  /* @__PURE__ */ jsx8("span", { className: "index", children: String(index + 1).padStart(2, "0") }),
+                  /* @__PURE__ */ jsx9("span", { className: "index", children: String(index + 1).padStart(2, "0") }),
                   /* @__PURE__ */ jsxs7("span", { className: "prompt", children: [
                     turn.prompt,
-                    /* @__PURE__ */ jsx8("small", { children: turn.id === shown?.id ? "Now showing" : turn.completed ? "Play answer" : "Unfinished answer" })
+                    /* @__PURE__ */ jsx9("small", { children: turn.id === shown?.id ? "Now showing" : turn.completed ? "Play answer" : "Unfinished answer" })
                   ] })
                 ]
               },
               turn.id
             )),
             savedSessions.length > 0 && /* @__PURE__ */ jsxs7(Fragment4, { children: [
-              /* @__PURE__ */ jsx8("h3", { className: "section-label", children: "Earlier sessions" }),
+              /* @__PURE__ */ jsx9("h3", { className: "section-label", children: "Earlier sessions" }),
               savedSessions.map((session) => /* @__PURE__ */ jsxs7("button", { type: "button", className: "history-row", onClick: () => {
                 listen.stop();
                 setDraft("");
@@ -3695,7 +3893,7 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                 setHistoryOpen(false);
                 setCaptionsExpanded(false);
               }, children: [
-                /* @__PURE__ */ jsx8(Replay, {}),
+                /* @__PURE__ */ jsx9(Replay, {}),
                 /* @__PURE__ */ jsxs7("span", { className: "prompt", children: [
                   session.turns[0]?.prompt,
                   /* @__PURE__ */ jsxs7("small", { children: [
@@ -3718,17 +3916,17 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
               "aria-modal": "true",
               children: [
                 /* @__PURE__ */ jsxs7("div", { className: "popover-heading", children: [
-                  /* @__PURE__ */ jsx8("h2", { children: "Settings" }),
-                  /* @__PURE__ */ jsx8("button", { type: "button", className: "round", "aria-label": "Close settings", onClick: closeSettings, children: /* @__PURE__ */ jsx8(Close, {}) })
+                  /* @__PURE__ */ jsx9("h2", { children: "Settings" }),
+                  /* @__PURE__ */ jsx9("button", { type: "button", className: "round", "aria-label": "Close settings", onClick: closeSettings, children: /* @__PURE__ */ jsx9(Close, {}) })
                 ] }),
                 /* @__PURE__ */ jsxs7("fieldset", { className: "playback-options", children: [
-                  /* @__PURE__ */ jsx8("legend", { children: "Video source" }),
+                  /* @__PURE__ */ jsx9("legend", { children: "Video source" }),
                   visualModes.filter((mode) => chat.availableModes.includes(mode.id)).map((mode) => /* @__PURE__ */ jsxs7("label", { className: "switch-row", children: [
                     /* @__PURE__ */ jsxs7("span", { children: [
-                      /* @__PURE__ */ jsx8("strong", { children: mode.label }),
-                      /* @__PURE__ */ jsx8("small", { children: mode.note })
+                      /* @__PURE__ */ jsx9("strong", { children: mode.label }),
+                      /* @__PURE__ */ jsx9("small", { children: mode.note })
                     ] }),
-                    /* @__PURE__ */ jsx8(
+                    /* @__PURE__ */ jsx9(
                       "input",
                       {
                         type: "radio",
@@ -3741,47 +3939,50 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                   ] }, mode.id))
                 ] }),
                 /* @__PURE__ */ jsxs7("fieldset", { className: "playback-options", children: [
-                  /* @__PURE__ */ jsx8("legend", { children: "Watching" }),
+                  /* @__PURE__ */ jsx9("legend", { children: "Watching" }),
                   /* @__PURE__ */ jsxs7("label", { className: "switch-row", children: [
                     /* @__PURE__ */ jsxs7("span", { children: [
-                      /* @__PURE__ */ jsx8("strong", { children: "Subtitles" }),
-                      /* @__PURE__ */ jsx8("small", { children: "Read along with the answer" })
+                      /* @__PURE__ */ jsx9("strong", { children: "Subtitles" }),
+                      /* @__PURE__ */ jsx9("small", { children: "Read along with the answer" })
                     ] }),
-                    /* @__PURE__ */ jsx8("input", { type: "checkbox", role: "switch", checked: captionsOn, onChange: (event) => {
+                    /* @__PURE__ */ jsx9("input", { type: "checkbox", role: "switch", checked: captionsOn, onChange: (event) => {
                       setCaptionsOn(event.target.checked);
                       setCaptionsExpanded(false);
                     } })
                   ] }),
                   /* @__PURE__ */ jsxs7("label", { className: "switch-row", children: [
                     /* @__PURE__ */ jsxs7("span", { children: [
-                      /* @__PURE__ */ jsx8("strong", { children: "Keep controls visible" }),
-                      /* @__PURE__ */ jsx8("small", { children: "Keep the input bar on screen" })
+                      /* @__PURE__ */ jsx9("strong", { children: "Keep controls visible" }),
+                      /* @__PURE__ */ jsx9("small", { children: "Keep the input bar on screen" })
                     ] }),
-                    /* @__PURE__ */ jsx8("input", { type: "checkbox", role: "switch", checked: alwaysShowControls, onChange: (event) => setAlwaysShowControls(event.target.checked) })
+                    /* @__PURE__ */ jsx9("input", { type: "checkbox", role: "switch", checked: alwaysShowControls, onChange: (event) => setAlwaysShowControls(event.target.checked) })
                   ] })
                 ] }),
                 /* @__PURE__ */ jsxs7("nav", { className: "developer-links", "aria-label": "Build with VanillaSky", children: [
-                  /* @__PURE__ */ jsx8("p", { className: "section-label", children: "Build with VanillaSky" }),
+                  /* @__PURE__ */ jsx9("p", { className: "section-label", children: "Build with VanillaSky" }),
                   /* @__PURE__ */ jsxs7("a", { href: "https://github.com/VanillaSkyAi/video/blob/main/docs/getting-started.md", target: "_blank", rel: "noopener noreferrer", children: [
                     "Docs",
-                    /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\u2197" })
+                    /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: "\u2197" })
                   ] }),
                   /* @__PURE__ */ jsxs7("button", { type: "button", "aria-expanded": aboutOpen, "aria-controls": `${instanceId}-about`, onClick: () => setAboutOpen((open) => !open), children: [
                     "About",
-                    /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: aboutOpen ? "\u2212" : "+" })
+                    /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: aboutOpen ? "\u2212" : "+" })
                   ] }),
-                  /* @__PURE__ */ jsx8("div", { id: `${instanceId}-about`, className: "developer-about", role: "region", "aria-label": "About VanillaSky", hidden: !aboutOpen, children: /* @__PURE__ */ jsx8("p", { children: "VanillaSky is an open-source SDK for conversations that answer in video. Developers connect their own AI providers through their application server." }) }),
+                  /* @__PURE__ */ jsx9("div", { id: `${instanceId}-about`, className: "developer-about", role: "region", "aria-label": "About VanillaSky", hidden: !aboutOpen, children: /* @__PURE__ */ jsx9("p", { children: "VanillaSky is an open-source SDK for conversations that answer in video. Developers connect their own AI providers through their application server." }) }),
                   /* @__PURE__ */ jsxs7("a", { href: "https://github.com/VanillaSkyAi/video", target: "_blank", rel: "noopener noreferrer", children: [
                     "GitHub",
-                    /* @__PURE__ */ jsx8("span", { "aria-hidden": "true", children: "\u2197" })
+                    /* @__PURE__ */ jsx9("span", { "aria-hidden": "true", children: "\u2197" })
                   ] })
                 ] })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx8("div", { ref: panelRef, className: "panel", "data-input-visible": controls.visible || !captionsOn || !line, children: /* @__PURE__ */ jsxs7("div", { className: "panel-inner", children: [
-          /* @__PURE__ */ jsx8("div", { className: "caption-slot", "data-captions": captionsOn && Boolean(line), "aria-hidden": !captionsOn || !line, children: /* @__PURE__ */ jsx8("div", { className: "caption-clip", children: /* @__PURE__ */ jsxs7(
+        /* @__PURE__ */ jsx9("div", { ref: panelRef, className: "panel", "data-input-visible": controls.visible || !captionsOn || !line, children: /* @__PURE__ */ jsxs7("div", { className: "panel-inner", children: [
+          /* @__PURE__ */ jsx9("div", { className: "caption-slot", "data-captions": captionsOn && Boolean(line), "aria-hidden": !captionsOn || !line, children: /* @__PURE__ */ jsx9("div", { className: "caption-clip", children: chat.playbackEnded && !captionsExpanded ? /* @__PURE__ */ jsxs7("button", { type: "button", className: "transcript-toggle", "aria-expanded": false, onClick: () => setCaptionsExpanded(true), children: [
+            "Show transcript",
+            /* @__PURE__ */ jsx9(ChevronUp, {})
+          ] }) : /* @__PURE__ */ jsxs7(
             "div",
             {
               className: "line-row",
@@ -3797,41 +3998,41 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                 captionsOn && line && /* @__PURE__ */ jsxs7("div", { className: "caption-actions", children: [
                   /* @__PURE__ */ jsxs7("button", { type: "button", className: "caption-action", "aria-label": captionsExpanded ? "Collapse subtitles" : "Expand subtitles", "aria-expanded": captionsExpanded, onClick: () => setCaptionsExpanded((open) => !open), children: [
                     captionsExpanded ? "Collapse" : "Expand",
-                    /* @__PURE__ */ jsx8(ChevronUp, {})
+                    /* @__PURE__ */ jsx9(ChevronUp, {})
                   ] }),
-                  /* @__PURE__ */ jsx8("button", { type: "button", className: "caption-action", "aria-label": "Hide subtitles", onClick: () => {
+                  /* @__PURE__ */ jsx9("button", { type: "button", className: "caption-action", "aria-label": "Hide subtitles", onClick: () => {
                     setCaptionsOn(false);
                     setCaptionsExpanded(false);
-                  }, children: /* @__PURE__ */ jsx8(Close, {}) })
+                  }, children: /* @__PURE__ */ jsx9(Close, {}) })
                 ] }),
-                captionsExpanded ? /* @__PURE__ */ jsx8("div", { className: "expanded-captions", role: "region", tabIndex: 0, "aria-label": "Expanded subtitles", children: fullTranscript.map((entry, index) => /* @__PURE__ */ jsx8("p", { children: entry }, index)) }) : /* @__PURE__ */ jsx8("p", { className: "line", "aria-live": "polite", children: openingChapter && line === shown?.opening ? "" : line })
+                captionsExpanded ? /* @__PURE__ */ jsx9("div", { className: "expanded-captions", role: "region", tabIndex: 0, "aria-label": "Expanded subtitles", children: fullTranscript.map((entry, index) => /* @__PURE__ */ jsx9("p", { children: entry }, index)) }) : /* @__PURE__ */ jsx9(CaptionPages, { text: openingChapter && line === shown?.opening ? "" : line, getProgress: getCaptionProgress }, `${shown?.id}:${chat.playerKey}`)
               ]
             }
           ) }) }),
           showRecoveryNotice && chat.shownTurn && dismissedNoticeTurn !== chat.shownTurn.id && chat.warnings.includes(MEDIA_RECOVERY_NOTICE) && !chat.error && /* @__PURE__ */ jsxs7("div", { className: "recovery-notice", children: [
-            /* @__PURE__ */ jsx8("p", { role: "status", children: MEDIA_RECOVERY_NOTICE }),
-            /* @__PURE__ */ jsx8("button", { type: "button", className: "round", "aria-label": "Dismiss notice", onClick: () => setDismissedNoticeTurn(chat.shownTurn?.id), children: /* @__PURE__ */ jsx8(Close, {}) })
+            /* @__PURE__ */ jsx9("p", { role: "status", children: MEDIA_RECOVERY_NOTICE }),
+            /* @__PURE__ */ jsx9("button", { type: "button", className: "round", "aria-label": "Dismiss notice", onClick: () => setDismissedNoticeTurn(chat.shownTurn?.id), children: /* @__PURE__ */ jsx9(Close, {}) })
           ] }),
           (chat.error || listen.error) && /* @__PURE__ */ jsxs7("p", { className: "error", role: "status", children: [
-            /* @__PURE__ */ jsx8(Warning, {}),
-            /* @__PURE__ */ jsx8("span", { children: chat.error?.message ?? listen.error })
+            /* @__PURE__ */ jsx9(Warning, {}),
+            /* @__PURE__ */ jsx9("span", { children: chat.error?.message ?? listen.error })
           ] }),
           /* @__PURE__ */ jsxs7("div", { ref: composerRef, className: "conversation-composer", "data-editing": editing, ...controlEvents, children: [
-            (listen.listening || listen.thinking) && /* @__PURE__ */ jsx8("div", { className: "composer-meta", children: /* @__PURE__ */ jsx8("span", { role: "status", children: listen.listening ? "Listening\u2026 Tap the mic to finish, then review and send." : "Turning your words into a draft\u2026" }) }),
+            (listen.listening || listen.thinking) && /* @__PURE__ */ jsx9("div", { className: "composer-meta", children: /* @__PURE__ */ jsx9("span", { role: "status", children: listen.listening ? "Listening\u2026 Tap the mic to finish, then review and send." : "Turning your words into a draft\u2026" }) }),
             /* @__PURE__ */ jsxs7("form", { className: "composer", "aria-label": "Ask a question", onSubmit: (event) => {
               event.preventDefault();
               ask(draft);
             }, children: [
-              transport && /* @__PURE__ */ jsx8("button", { type: "button", className: "ghost transport", "aria-label": transport.label, onClick: () => {
+              transport && /* @__PURE__ */ jsx9("button", { type: "button", className: "ghost transport", "aria-label": transport.label, onClick: () => {
                 listen.stop();
                 setEditing(false);
                 resumeAfterInput.current = false;
                 inputRef.current?.blur();
                 transport.action();
               }, children: transport.icon }),
-              /* @__PURE__ */ jsx8(Waveform, { active: listen.listening || chat.speaking && !chat.muted && status !== "paused", listening: listen.listening }),
-              /* @__PURE__ */ jsx8("label", { className: "sr-only", htmlFor: promptId, children: "Prompt" }),
-              /* @__PURE__ */ jsx8(
+              /* @__PURE__ */ jsx9(Waveform, { active: listen.listening || chat.speaking && !chat.muted && status !== "paused", listening: listen.listening }),
+              /* @__PURE__ */ jsx9("label", { className: "sr-only", htmlFor: promptId, children: "Prompt" }),
+              /* @__PURE__ */ jsx9(
                 "textarea",
                 {
                   id: promptId,
@@ -3859,12 +4060,12 @@ function VideoChat({ options = {}, className, welcomeTitle, showRecoveryNotice =
                   }
                 }
               ),
-              listen.supported && /* @__PURE__ */ jsx8("button", { type: "button", className: `ghost${listen.listening ? " listening" : ""}`, "aria-label": listen.listening ? "Stop listening" : "Ask by voice", "aria-pressed": listen.listening, disabled: listen.thinking, onClick: () => beginInput(true), children: /* @__PURE__ */ jsx8(Mic, {}) }),
-              /* @__PURE__ */ jsx8("button", { type: "submit", className: "send", "aria-label": "Ask", disabled: !draft.trim() || listen.thinking, children: /* @__PURE__ */ jsx8(Send, {}) }),
-              editing && /* @__PURE__ */ jsx8("button", { type: "button", className: "ghost", "aria-label": "Cancel question", onClick: cancelInput, children: /* @__PURE__ */ jsx8(Close, {}) })
+              listen.supported && /* @__PURE__ */ jsx9("button", { type: "button", className: `ghost${listen.listening ? " listening" : ""}`, "aria-label": listen.listening ? "Stop listening" : "Ask by voice", "aria-pressed": listen.listening, disabled: listen.thinking, onClick: () => beginInput(true), children: /* @__PURE__ */ jsx9(Mic, {}) }),
+              /* @__PURE__ */ jsx9("button", { type: "submit", className: "send", "aria-label": "Ask", disabled: !draft.trim() || listen.thinking, children: /* @__PURE__ */ jsx9(Send, {}) }),
+              editing && /* @__PURE__ */ jsx9("button", { type: "button", className: "ghost", "aria-label": "Cancel question", onClick: cancelInput, children: /* @__PURE__ */ jsx9(Close, {}) })
             ] })
           ] }),
-          !showing && chat.turns.length === 0 && /* @__PURE__ */ jsx8("p", { className: "dock-hint", children: "Speak or type. See where it takes you." })
+          !showing && chat.turns.length === 0 && /* @__PURE__ */ jsx9("p", { className: "dock-hint", children: "Speak or type. See where it takes you." })
         ] }) })
       ]
     }

package/docs/reference/protocol.md

@@ -116,3 +116,13 @@ Grouped playback requires prepared speech with `supportsOffsets: true`. The gene
 For standalone playback, provide a synchronous `narrationReady` callback alongside your `onSceneChange` narration handler. Return false while a new grouped paragraph awaits actual audio onset, then true from the voice's `onStart` callback; also release readiness on completion, failure, or interruption. Abort pending narration from the player's `onError` handler. `VideoChat` wires this automatically through its internal narration hook. For grouped paragraphs, the voice must invoke `onStart` when audio actually begins, not when audio is prepared or `play()` is requested. The first visual cue starts narration, then the playhead waits for that onset without pausing the voice. A missing onset stops the player with an error after eight seconds of active waiting. For prepared audio, also provide `narrationTime(scene)` using the active voice's optional `getCurrentTime()`: return paragraph-relative seconds (including the seek offset) for a group, or scene-relative seconds otherwise. This makes the actual audio clock authoritative through cold-start delays and mid-speech stalls. Return `undefined` for silent scenes or unavailable clocks; after ordinary narration completes, release to wall time so the authored reading hold can finish. `VideoChat` coordinates these callbacks automatically. A clock that stops advancing for eight active seconds produces an error; visual-readiness holds and deliberate pauses do not consume that timeout. Voices without an observable playback clock retain wall-time playback.
 
 Readiness holds pause narration together with the picture. The same audio continues across adjacent group scenes; replay starts a new playback session. This preserves words through delayed media rather than promising uninterrupted playback on every network.
+
+### Host-resolved chat footage mode
+
+A chat host that changes the requested footage mode before planning may return
+`x-vanillasky-resolved-video-mode: pexels` or `cinematic` on a successful SSE
+response. The default chat client records that mode for the active turn and its
+playback metrics. Unknown values are ignored. Authorization, allowance checks
+and provider selection remain host-owned; the header never grants access or
+changes a spending limit. A mixed response that changes footage source partway
+through retains its initially resolved mode.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vanillaskyai/video",
-  "version": "0.10.19",
+  "version": "0.10.20",
   "description": "Open-source voice-and-video chat SDK for AI applications.",
   "keywords": [
     "video-chat",

package/starters/video-chat/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vanillaskyai/video": "0.10.19",
+    "@vanillaskyai/video": "0.10.20",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
     "@ai-sdk/anthropic": "^3.0.0",

package/starters/video-chat/stock.ts

@@ -53,53 +53,59 @@ export async function findStockFootage(query: string, orientation: VideoOrientat
   const normalized = query.trim().toLowerCase().replace(/\s+/g, " ");
   const tokens = words(normalized);
   const selection = selectionHint(rawSelection);
-  const key = JSON.stringify({version: 4, orientation, query: normalized, selection});
+  const key = JSON.stringify({version: 5, orientation, query: normalized, selection});
   const apiKey = process.env.PEXELS_API_KEY;
   if (!apiKey || !tokens.length || normalized.length > 80 || tokens.length > 8) return null;
   const existing = cache.get(key);
   if (existing && existing.expires > Date.now()) return existing.media;
-  const url = new URL("https://api.pexels.com/v1/videos/search");
-  url.search = new URLSearchParams({ query: normalized, per_page: "12", size: "medium" }).toString();
-  const response = await fetch(url, { headers: { Authorization: apiKey }, signal });
-  signal.throwIfAborted();
-  if (!response.ok) return null;
-  const result = await response.json() as { videos?: PexelsVideo[] };
-  signal.throwIfAborted();
-  let selected: StockVideo | null = null, bestScore = -1, bestOrientation = -1;
-  const matchesOrientation = (file: {width?: number; height?: number}) => orientation === "portrait"
-    ? file.height! > file.width! : file.width! >= file.height!;
-  for (const video of (Array.isArray(result.videos) ? result.videos : []).slice(0, 12)) {
-    if (!pexelsUrl(video.url)) continue;
-    const slug = new URL(video.url).pathname.replace(/^\/video\//, "");
-    const title = typeof video.title === "string" ? video.title : "";
-    const tags = Array.isArray(video.tags) ? video.tags.filter((tag): tag is string => typeof tag === "string").join(" ") : "";
-    const subject = words(`${slug} ${title} ${typeof video.description === "string" ? video.description : ""} ${tags}`).filter(token => !/^\d+$/.test(token)).map(wordForm);
-    let matches = tokens.filter(token => subject.includes(wordForm(token))).length;
-    if (selection && subject.length) {
-      const covers = (phrase: string) => terms(phrase).every(word => subject.includes(wordForm(word)));
-      if (!covers(selection.subject) || selection.exclude?.some(covers)) continue;
-      // Query context breaks equal hint matches without outweighing a hint.
-      const contextScore = matches / (tokens.length + 1);
-      matches = 2 + contextScore + Number(Boolean(selection.activity && covers(selection.activity)))
-        + Number(Boolean(selection.equipment && covers(selection.equipment)));
+  let selected: StockVideo | null = null;
+  // Reuse the caller's deadline signal; broadening never starts a new timeout.
+  const queries = [...new Set([normalized, ...(selection ? [selection.subject] : [])])];
+  for (const searchQuery of queries) {
+    signal.throwIfAborted();
+    const url = new URL("https://api.pexels.com/v1/videos/search");
+    url.search = new URLSearchParams({ query: searchQuery, per_page: "12", size: "medium" }).toString();
+    const response = await fetch(url, { headers: { Authorization: apiKey }, signal });
+    signal.throwIfAborted();
+    if (!response.ok) return null;
+    const result = await response.json() as { videos?: PexelsVideo[] };
+    signal.throwIfAborted();
+    let bestScore = -1, bestOrientation = -1;
+    const matchesOrientation = (file: {width?: number; height?: number}) => orientation === "portrait"
+      ? file.height! > file.width! : file.width! >= file.height!;
+    for (const video of (Array.isArray(result.videos) ? result.videos : []).slice(0, 12)) {
+      if (!pexelsUrl(video.url)) continue;
+      const slug = new URL(video.url).pathname.replace(/^\/video\//, "");
+      const title = typeof video.title === "string" ? video.title : "";
+      const tags = Array.isArray(video.tags) ? video.tags.filter((tag): tag is string => typeof tag === "string").join(" ") : "";
+      const subject = words(`${slug} ${title} ${typeof video.description === "string" ? video.description : ""} ${tags}`).filter(token => !/^\d+$/.test(token)).map(wordForm);
+      let matches = tokens.filter(token => subject.includes(wordForm(token))).length;
+      if (selection && subject.length) {
+        const covers = (phrase: string) => terms(phrase).every(word => subject.includes(wordForm(word)));
+        if (selection.exclude?.some(covers)) continue;
+        // Query context breaks equal hint matches without outweighing a hint.
+        const contextScore = matches / (tokens.length + 1);
+        matches = covers(selection.subject) ? 2 + contextScore + Number(Boolean(selection.activity && covers(selection.activity)))
+          + Number(Boolean(selection.equipment && covers(selection.equipment))) : 0;
+      }
+      // The documented Video resource can have only a numeric page URL and no
+      // editorial metadata. Preserve provider search order for unknown relevance;
+      // positive overlap ranks above provider-ranked illustrative alternatives.
+      const files = (Array.isArray(video.video_files) ? video.video_files : []).filter(file =>
+        file.file_type === "video/mp4" && pexelsUrl(file.link)
+        && Number.isFinite(file.width) && Number.isFinite(file.height)
+        && Math.min(file.width!, file.height!) >= 360,
+      ).sort((a, b) => Number(matchesOrientation(b)) - Number(matchesOrientation(a)) || Math.abs(Math.max(a.width!, a.height!) - 1280) - Math.abs(Math.max(b.width!, b.height!) - 1280));
+      const file = files[0];
+      if (!file) continue;
+      const orientationScore = Number(matchesOrientation(file));
+      // Prefer composition fit only when subject relevance is equal.
+      if (matches < bestScore || (matches === bestScore && orientationScore <= bestOrientation)) continue;
+      bestScore = matches;
+      bestOrientation = orientationScore;
+      selected = { url: file.link!, type: "video", ...(pexelsUrl(video.image) ? { posterUrl: video.image } : {}) };
     }
-    // The documented Video resource can have only a numeric page URL and no
-    // editorial metadata. Preserve provider search order for unknown relevance;
-    // positive overlap ranks above it, while explicitly unrelated copy is skipped.
-    if (subject.length > 0 && matches === 0) continue;
-    const files = (Array.isArray(video.video_files) ? video.video_files : []).filter(file =>
-      file.file_type === "video/mp4" && pexelsUrl(file.link)
-      && Number.isFinite(file.width) && Number.isFinite(file.height)
-      && Math.min(file.width!, file.height!) >= 360,
-    ).sort((a, b) => Number(matchesOrientation(b)) - Number(matchesOrientation(a)) || Math.abs(Math.max(a.width!, a.height!) - 1280) - Math.abs(Math.max(b.width!, b.height!) - 1280));
-    const file = files[0];
-    if (!file) continue;
-    const orientationScore = Number(matchesOrientation(file));
-    // Prefer composition fit only when subject relevance is equal.
-    if (matches < bestScore || (matches === bestScore && orientationScore <= bestOrientation)) continue;
-    bestScore = matches;
-    bestOrientation = orientationScore;
-    selected = { url: file.link!, type: "video", ...(pexelsUrl(video.image) ? { posterUrl: video.image } : {}) };
+    if (selected) break;
   }
   // Bounded process-local cache; no request signal or credentials are retained.
   if (cache.size >= 128) cache.delete(cache.keys().next().value!);

package/styles/video-chat.css

@@ -1065,7 +1065,6 @@
 }
 
 .vanillasky-video-chat .opening-chapter { animation: vanillasky-chapter-enter 450ms ease-out both; }
-.vanillasky-video-chat .media-credit { color: var(--vs-fg); font-size: 11px; margin-left: 12px; text-underline-offset: 3px; }
 @keyframes vanillasky-chapter-enter { from { opacity: 0; } to { opacity: 1; } }
 @media (prefers-reduced-motion: reduce) { .vanillasky-video-chat .opening-chapter { animation: none; } }
 
@@ -1124,3 +1123,7 @@
 .vanillasky-video-chat .card-prompt { position: relative; inset: auto; overflow-wrap: anywhere; flex-shrink: 0; }
 
 .vanillasky-video-chat .cards { flex-shrink: 0; }
+
+.vanillasky-video-chat .transcript-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border: 0; border-radius: 10px; background: var(--vs-media-glass); color: var(--vs-media-muted); font: inherit; font-size: 13px; cursor: pointer; pointer-events: auto; }
+.vanillasky-video-chat .transcript-toggle svg { width: 16px; height: 16px; }
+.vanillasky-video-chat .transcript-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }