@vanillaskyai/video 0.7.1 → 0.8.1

package/dist/react.js

@@ -1,31 +1,29 @@
 import {
-  createSceneTimeline,
   getSceneDuration
-} from "./chunk-SKRGRKHY.js";
+} from "./chunk-ZD2VTUYR.js";
 import {
-  VIDEO_STREAM_CONTENT_TYPE,
-  VIDEO_STREAM_HEADER,
   decodeVideoSse,
-  sanitizeVideoChatMedia
-} from "./chunk-2XT4MZ76.js";
+  sanitizeVideoChatMedia,
+  withDeadline
+} from "./chunk-APQKY6P3.js";
 import {
   applyVideoEvent,
-  createReplayableStream,
+  checksumVideo,
+  createVideoEventFactory,
   createVideoState
-} from "./chunk-GAIOHGNR.js";
+} from "./chunk-2OKB27TG.js";
 import {
   safePublicDiagnostic
 } from "./chunk-MMUXVA47.js";
 import {
   parseVideo
-} from "./chunk-2PYO6VAC.js";
+} from "./chunk-2DOLF4QN.js";
 import {
-  VIDEO_PROTOCOL_VERSION,
-  createVideoRequest
+  VIDEO_SCHEMA_VERSION
 } from "./chunk-AOWSXU2K.js";
 import {
   getBuiltinTemplateMetadata
-} from "./chunk-JNN3EYVP.js";
+} from "./chunk-4UNKZEAT.js";
 import "./chunk-3O7OMMMF.js";
 import {
   assertTemplateTransitionMetadata
@@ -33,7 +31,7 @@ import {
 import {
   VideoFrame,
   getDimensions
-} from "./chunk-K746NUIP.js";
+} from "./chunk-2USVB3CY.js";
 import "./chunk-224QNWRA.js";
 import "./chunk-5CDAM24P.js";
 import {
@@ -43,7 +41,9 @@ import {
   getVideoDuration,
   resolveVideoTimeline
 } from "./chunk-SPVTJH3F.js";
-import "./chunk-XGRA2MUV.js";
+import {
+  resolveVideoBrand
+} from "./chunk-XGRA2MUV.js";
 import "./chunk-WJ6FLKNC.js";
 import "./chunk-73NTSFFI.js";
 
@@ -1018,6 +1018,15 @@ function usePlaybackClock({
 }) {
   useEffect(() => {
     if (!isPlaying) return;
+    let stalled = false;
+    const reportStall = (next) => {
+      if (stalled === next) return;
+      stalled = next;
+      try {
+        void Promise.resolve(callbacksRef.current.onStallChange?.(next)).catch(() => void 0);
+      } catch {
+      }
+    };
     let frame = 0;
     let previous = performance.now();
     const tick = (now) => {
@@ -1067,11 +1076,15 @@ function usePlaybackClock({
         }
       }
       const duration = current.config ? getVideoDuration(current.config) : 0;
+      reportStall(!settled && Boolean(current.config?.scenes.length) && duration > 0 && timeRef.current >= duration);
       if (!settled || looping || timeRef.current < duration) frame = requestAnimationFrame(tick);
       else setIsPlaying(false);
     };
     frame = requestAnimationFrame(tick);
-    return () => cancelAnimationFrame(frame);
+    return () => {
+      cancelAnimationFrame(frame);
+      reportStall(false);
+    };
   }, [isPlaying]);
 }
 
@@ -1106,6 +1119,8 @@ function VideoPlayerRuntime({
   onComplete,
   onError,
   onSceneChange,
+  onFramePresented,
+  onStallChange,
   onStateChange
 }) {
   const nativeMediaVolume = Math.max(0, Math.min(
@@ -1140,14 +1155,25 @@ function VideoPlayerRuntime({
   const timeRef = useRef(currentTime);
   const audioRef = useRef(null);
   const introStartedAtRef = useRef(autoStartGeneration ? performance.now() : null);
-  const callbacksRef = useRef({ onComplete, onPlaybackEnd, onError, onSceneChange, onStateChange });
+  const callbacksRef = useRef({ onComplete, onPlaybackEnd, onError, onSceneChange, onFramePresented, onStallChange, onStateChange });
   const loopRef = useRef(loop);
   const sceneIndexRef = useRef(-1);
   const playbackEndedRef = useRef(false);
   stateRef.current = state;
   timeRef.current = currentTime;
-  callbacksRef.current = { onComplete, onPlaybackEnd, onError, onSceneChange, onStateChange };
+  callbacksRef.current = { onComplete, onPlaybackEnd, onError, onSceneChange, onFramePresented, onStallChange, onStateChange };
   loopRef.current = loop;
+  const reportFramePresented = useMemo(() => {
+    let reported = false;
+    return () => {
+      if (reported) return;
+      reported = true;
+      try {
+        void Promise.resolve(callbacksRef.current.onFramePresented?.()).catch(() => void 0);
+      } catch {
+      }
+    };
+  }, [stream, video]);
   const primeSoundtrack = () => {
     const audio = audioRef.current;
     if (!audio || audio.dataset.audioOutput) return;
@@ -1499,6 +1525,7 @@ function VideoPlayerRuntime({
           VideoFrame,
           {
             kit,
+            onFramePresented: !showStartPoster && onFramePresented ? reportFramePresented : void 0,
             config: displayConfig,
             time: showStartPoster ? posterTime : currentTime,
             width: dimensions.width,
@@ -1611,292 +1638,134 @@ var VideoError = class extends Error {
   }
 };
 
-// src/player/use-video.ts
-import { useCallback, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+// src/video-chat/use-video-chat.ts
+import { useCallback as useCallback2, useEffect as useEffect4, useReducer, useRef as useRef3 } from "react";
 
-// src/player/stream-video.ts
-var HTTP_ERROR_CODES = /* @__PURE__ */ new Set([
-  "body_too_large",
-  "http_error",
-  "invalid_body",
-  "invalid_cursor",
-  "invalid_input",
-  "invalid_json",
-  "invalid_request",
-  "method_not_allowed",
-  "origin_forbidden",
-  "resume_unavailable",
-  "secret_field",
-  "unauthorized"
-]);
-async function responseError(response, requestId) {
-  let code = "http_error";
-  let message = `Video response endpoint failed (${response.status})`;
-  try {
-    const body = await response.json();
-    if (body && typeof body === "object" && "error" in body) {
-      const error = body.error;
-      if (error && typeof error === "object") {
-        if ("code" in error && typeof error.code === "string" && HTTP_ERROR_CODES.has(error.code)) {
-          code = error.code;
-        }
-        if ("message" in error && typeof error.message === "string") {
-          message = safePublicDiagnostic(error.message, message);
-        }
-      }
-    }
-  } catch {
-  }
-  return new VideoError(message, { code, status: response.status, requestId });
-}
-function normalizeStreamError(cause, requestId, state, aborted) {
-  if (cause instanceof VideoError) return cause;
-  const causeError = cause instanceof Error ? cause : void 0;
-  const safeMessage = aborted ? causeError?.name === "TimeoutError" ? "Request timed out" : safePublicDiagnostic(causeError?.message, "Video generation was aborted") : causeError?.message.startsWith("Video response protocol") || causeError?.message.startsWith("Video response endpoint omitted protocol") ? safePublicDiagnostic(causeError.message, "Video response protocol failed") : "Video response stream failed";
-  return new VideoError(safeMessage, {
-    code: aborted ? "aborted" : "stream_failed",
-    requestId: state.requestId ?? requestId,
-    runId: state.runId,
-    recoverable: false
-  });
-}
-function streamVideo(options) {
-  const request = createVideoRequest(options.input, {
-    requestId: options.requestId,
-    capabilities: options.capabilities,
-    ...options.resume?.state.runId != null && options.resume.state.lastSequence >= 0 ? {
-      resume: {
-        runId: options.resume.state.runId,
-        afterSequence: options.resume.state.lastSequence
-      }
-    } : {}
-  });
-  const controller = new AbortController();
-  const forwardAbort = () => controller.abort(options.signal?.reason);
-  if (options.signal?.aborted) forwardAbort();
-  else options.signal?.addEventListener("abort", forwardAbort, { once: true });
-  let resolveResult;
-  let rejectResult;
-  let settled = false;
-  const result = new Promise((resolve, reject) => {
-    resolveResult = resolve;
-    rejectResult = reject;
-  });
-  const source = (async function* consume() {
-    let state = options.resume?.state ?? createVideoState();
-    try {
-      const fetcher = options.fetcher ?? fetch;
-      const headers = new Headers(options.headers);
-      headers.set("Accept", VIDEO_STREAM_CONTENT_TYPE);
-      headers.set("Content-Type", "application/json");
-      if (request.resume) headers.set("Last-Event-ID", `${request.resume.runId}:${request.resume.afterSequence}`);
-      const response = await fetcher(options.endpoint, {
-        method: "POST",
-        headers,
-        body: JSON.stringify(request),
-        signal: controller.signal,
-        credentials: options.credentials
-      });
-      if (!response.ok) throw await responseError(response, request.requestId);
-      if (!response.body || !response.headers.get("content-type")?.includes("text/event-stream")) {
-        throw new Error("Video response endpoint did not return an SSE stream");
-      }
-      const protocolVersion = response.headers.get(VIDEO_STREAM_HEADER);
-      if (protocolVersion == null) {
-        throw new Error(`Video response endpoint omitted protocol version header ${VIDEO_STREAM_HEADER}`);
-      }
-      if (protocolVersion !== VIDEO_PROTOCOL_VERSION) {
-        throw new Error(
-          `Video response protocol mismatch: expected ${VIDEO_PROTOCOL_VERSION}, received ${protocolVersion}`
-        );
-      }
-      for await (const event of decodeVideoSse(response.body)) {
-        state = applyVideoEvent(state, event);
-        options.onEvent?.(event, state);
-        if (state.status === "complete" && !settled) {
-          settled = true;
-          resolveResult(state);
-        } else if (state.status === "error" && !settled) {
-          settled = true;
-          const error = state.errors.at(-1);
-          rejectResult(new VideoError(error?.message ?? "Video response could not finish", {
-            code: error?.code ?? "generation_failed",
-            status: response.status,
-            requestId: state.requestId ?? request.requestId,
-            runId: state.runId,
-            recoverable: error?.recoverable
-          }));
-        } else if (state.status === "aborted" && !settled) {
-          settled = true;
-          rejectResult(new VideoError(state.abortReason ?? "Video generation was aborted", {
-            code: "aborted",
-            status: response.status,
-            requestId: state.requestId ?? request.requestId,
-            runId: state.runId,
-            recoverable: false
-          }));
-        }
-        yield event;
-      }
-      if (!["complete", "error", "aborted"].includes(state.status)) {
-        throw new Error("Video response stream ended without a terminal event");
-      }
-      if (!settled && state.status === "complete") {
-        settled = true;
-        resolveResult(state);
+// src/protocol/scene-timeline.ts
+function createQueue() {
+  const buffered = [];
+  const waiting = [];
+  let closed = false;
+  return {
+    push(value) {
+      const next = waiting.shift();
+      if (next) next({ value, done: false });
+      else buffered.push(value);
+    },
+    close() {
+      closed = true;
+      let next = waiting.shift();
+      while (next) {
+        next({ value: void 0, done: true });
+        next = waiting.shift();
       }
-    } catch (cause) {
-      const error = normalizeStreamError(cause, request.requestId, state, controller.signal.aborted);
-      if (!settled) {
-        settled = true;
-        rejectResult(error);
+    },
+    iterable: {
+      [Symbol.asyncIterator]() {
+        return {
+          next() {
+            const buffer = buffered.shift();
+            if (buffer !== void 0) return Promise.resolve({ value: buffer, done: false });
+            if (closed) return Promise.resolve({ value: void 0, done: true });
+            return new Promise((resolve) => waiting.push(resolve));
+          }
+        };
       }
-      throw error;
-    } finally {
-      options.signal?.removeEventListener("abort", forwardAbort);
-    }
-  })();
-  const stream = createReplayableStream(source, () => void 0);
-  return {
-    request,
-    stream,
-    result,
-    abort(reason = "user cancelled") {
-      controller.abort(new Error(reason));
     }
   };
 }
-
-// src/player/use-video.ts
-function defaultRequestId() {
-  const id = globalThis.crypto?.randomUUID?.() ?? `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
-  return `request-${id}`;
-}
-function errorFrom(cause) {
-  if (cause instanceof VideoError) return cause;
-  const error = cause instanceof Error ? cause : new Error(String(cause));
-  return new VideoError(error.message, { code: "video_failed" });
-}
-function useVideo(options = {}) {
-  const templates = useMemo2(
-    () => overlayPlayerTemplateRegistry(BUILTIN_PLAYER_KIT, options.templates),
-    [options.templates]
-  );
-  const [state, setState] = useState2(() => createVideoState());
-  const [error, setError] = useState2();
-  const [run, setRun] = useState2();
-  const activeRun = useRef2(void 0);
-  const generation = useRef2(0);
-  const mounted = useRef2(true);
-  const optionsRef = useRef2(options);
-  const templatesRef = useRef2(templates);
-  optionsRef.current = options;
-  templatesRef.current = templates;
-  const abort = useCallback((reason = "user cancelled") => {
-    generation.current += 1;
-    const current = activeRun.current;
-    activeRun.current = void 0;
-    current?.abort(reason);
-    if (current && mounted.current) {
-      setError(new VideoError(reason, {
-        code: "aborted",
-        requestId: current.request.requestId,
-        recoverable: false
-      }));
-      setState((previous) => ({ ...previous, status: "aborted", abortReason: reason }));
+var runCounter = 0;
+function createSceneTimeline(options) {
+  const queue = createQueue();
+  const runId = options.runId ?? `composed-${runCounter += 1}`;
+  const events = createVideoEventFactory({ runId });
+  const orientation = options.orientation ?? "landscape";
+  const snapshot = {
+    schemaVersion: VIDEO_SCHEMA_VERSION,
+    orientation,
+    scenes: [],
+    style: options.style
+  };
+  let position = 0;
+  let finished = false;
+  const held = [];
+  let openForScenes = !options.awaitAudio;
+  const emit = (event) => {
+    if (finished) return;
+    queue.push(event);
+  };
+  emit(events.create("response.start", {
+    requestId: options.requestId ?? runId,
+    format: { orientation },
+    style: options.style
+  }));
+  if (options.audio) {
+    snapshot.audio = options.audio;
+    emit(events.create("audio.set", { audio: options.audio }));
+  }
+  const release = () => {
+    const pending = held.splice(0, held.length);
+    for (const scene of pending) {
+      snapshot.scenes.push(scene);
+      emit(events.create("scene.add", { scene, position: position++ }));
     }
-  }, []);
-  const generate = useCallback((input) => {
-    const currentGeneration = generation.current + 1;
-    generation.current = currentGeneration;
-    activeRun.current?.abort("replaced by a new composition");
-    const currentOptions = optionsRef.current;
-    const initialState2 = createVideoState();
-    setState({ ...initialState2, status: "streaming" });
-    setError(void 0);
-    const nextRun = streamVideo({
-      endpoint: currentOptions.endpoint ?? "/api/video",
-      input,
-      requestId: (currentOptions.createRequestId ?? defaultRequestId)(),
-      capabilities: currentOptions.templateIds ? { ...templatesRef.current.capabilities, templates: [...new Set(currentOptions.templateIds)] } : templatesRef.current.capabilities,
-      headers: currentOptions.headers,
-      credentials: currentOptions.credentials,
-      fetcher: currentOptions.fetcher,
-      onEvent: (_event, nextState) => {
-        if (_event.type === "scene.add") {
-          if (!currentOptions.templates?.getTemplate(_event.data.scene.templateId)) {
-            preloadBuiltinTemplate(_event.data.scene.templateId);
-          }
-          warmSceneMedia(_event.data.scene.variables);
-        }
-        if (mounted.current && generation.current === currentGeneration) setState(nextState);
+  };
+  return {
+    stream: queue.iterable,
+    add(scene) {
+      if (finished) return;
+      if (!openForScenes) {
+        held.push(scene);
+        return;
       }
-    });
-    activeRun.current = nextRun;
-    setRun(nextRun);
-    void nextRun.result.then(() => {
-      if (generation.current === currentGeneration) activeRun.current = void 0;
-    }).catch((cause) => {
-      if (mounted.current && generation.current === currentGeneration) {
-        activeRun.current = void 0;
-        const error2 = errorFrom(cause);
-        setError(error2);
-        setState((previous) => ({
-          ...previous,
-          status: error2.code === "aborted" ? "aborted" : "error",
-          ...error2.code === "aborted" && previous.abortReason == null ? { abortReason: error2.message } : {}
-        }));
+      snapshot.scenes.push(scene);
+      emit(events.create("scene.add", { scene, position: position++ }));
+    },
+    setAudio(audio) {
+      if (finished || openForScenes) return;
+      if (audio) {
+        snapshot.audio = audio;
+        emit(events.create("audio.set", { audio }));
       }
-    });
-    const result = nextRun.result.then((nextState) => {
-      if (!nextState.config) throw new Error("Video generation ended without a video");
-      return nextState.config;
-    });
-    void result.catch(() => void 0);
-    return result;
-  }, []);
-  useEffect3(() => {
-    mounted.current = true;
-    return () => {
-      mounted.current = false;
-      generation.current += 1;
-      activeRun.current?.abort("component unmounted");
-      activeRun.current = void 0;
-    };
-  }, []);
-  return {
-    generate,
-    abort,
-    video: state.config,
-    status: state.status,
-    error,
-    warnings: state.warnings,
-    playerProps: {
-      ...options.templates ? { templates: options.templates } : {},
-      ...run ? { stream: run.stream } : {}
+      openForScenes = true;
+      release();
+    },
+    complete() {
+      if (finished) return;
+      if (!openForScenes) {
+        openForScenes = true;
+        release();
+      }
+      emit(events.create("response.complete", {
+        finishReason: "stop",
+        snapshot,
+        checksum: checksumVideo(snapshot)
+      }));
+      finished = true;
+      queue.close();
     }
   };
 }
 
 // src/player/use-narration.ts
-import { useCallback as useCallback2, useEffect as useEffect4, useRef as useRef3, useState as useState3 } from "react";
+import { useCallback, useEffect as useEffect3, useRef as useRef2, useState as useState2 } from "react";
 function useNarration(options) {
-  const [speaking, setSpeaking] = useState3(false);
-  const optionsRef = useRef3(options);
+  const [speaking, setSpeaking] = useState2(false);
+  const optionsRef = useRef2(options);
   optionsRef.current = options;
-  const currentRef = useRef3(void 0);
-  const spokenIndexRef = useRef3(void 0);
-  const stop = useCallback2(() => {
+  const currentRef = useRef2(void 0);
+  const spokenIndexRef = useRef2(void 0);
+  const stop = useCallback(() => {
     currentRef.current?.abort();
     currentRef.current = void 0;
     setSpeaking(false);
   }, []);
-  const interrupt = useCallback2(() => {
+  const interrupt = useCallback(() => {
     spokenIndexRef.current = void 0;
     stop();
   }, [stop]);
-  useEffect4(() => () => currentRef.current?.abort(), []);
-  const onSceneChange = useCallback2((scene, index) => {
+  useEffect3(() => () => currentRef.current?.abort(), []);
+  const onSceneChange = useCallback((scene, index) => {
     const { voice, enabled = true } = optionsRef.current;
     if (!enabled) return;
     if (spokenIndexRef.current === index) return;
@@ -1909,7 +1778,18 @@ function useNarration(options) {
     setSpeaking(true);
     void (async () => {
       try {
-        await voice.speak(line, { signal: controller.signal });
+        let started = false;
+        await voice.speak(line, {
+          signal: controller.signal,
+          onStart: (source) => {
+            if (started || controller.signal.aborted || currentRef.current !== controller || spokenIndexRef.current !== index || optionsRef.current.enabled === false) return;
+            started = true;
+            try {
+              void Promise.resolve(optionsRef.current.onSpeechStart?.(source)).catch(() => void 0);
+            } catch {
+            }
+          }
+        });
       } catch {
       } finally {
         if (currentRef.current === controller) {
@@ -1922,11 +1802,9 @@ function useNarration(options) {
   return { onSceneChange, interrupt, speaking };
 }
 
-// src/video-chat/use-video-chat.ts
-import { useCallback as useCallback3, useEffect as useEffect5, useReducer, useRef as useRef4 } from "react";
-
 // src/video-chat/voice.ts
 var DEFAULT_MAX_CACHED_LINES = 60;
+var SPEECH_PREPARATION_TIMEOUT_MS = 3e3;
 var FALLBACK_BITS_PER_SECOND = 128e3;
 var sharedContext;
 function actionEndpoint(endpoint, action) {
@@ -1959,6 +1837,13 @@ function createVideoChatVoice(options = {}) {
   let silent = false;
   let disposed = false;
   let generatedSpeechUnavailable = false;
+  let playbackFailure;
+  const notifyFallback = () => {
+    try {
+      void Promise.resolve(options.onFallback?.()).catch(() => void 0);
+    } catch {
+    }
+  };
   const forgetOldest = () => {
     while (lines.size > maximum) {
       const oldest = lines.keys().next();
@@ -1991,38 +1876,34 @@ function createVideoChatVoice(options = {}) {
         if (generatedSpeechUnavailable) {
           prepared = { source: "browser", seconds: estimatedBrowserSeconds(normalized) };
         } else {
-          const response = await fetcher(actionEndpoint(endpoint, "speech"), {
-            method: "POST",
-            headers,
-            credentials: options.credentials,
-            signal: controller.signal,
-            body: JSON.stringify({ text: normalized })
-          });
-          if (controller.signal.aborted) {
-            throw controller.signal.reason ?? new DOMException("Speech preparation cancelled", "AbortError");
-          }
-          if (response.status === 204 || response.status === 404) {
-            generatedSpeechUnavailable = true;
-            prepared = { source: "browser", seconds: estimatedBrowserSeconds(normalized) };
-          } else if (!response.ok) {
-            prepared = { source: "browser", seconds: estimatedBrowserSeconds(normalized) };
-          } else {
-            const bytes = await response.arrayBuffer();
-            if (controller.signal.aborted) {
-              throw controller.signal.reason ?? new DOMException("Speech preparation cancelled", "AbortError");
+          prepared = await withDeadline(async (preparationSignal) => {
+            const response = await fetcher(actionEndpoint(endpoint, "speech"), {
+              method: "POST",
+              headers,
+              credentials: options.credentials,
+              signal: preparationSignal,
+              body: JSON.stringify({ text: normalized })
+            });
+            preparationSignal.throwIfAborted();
+            if (response.status === 204 || response.status === 404) {
+              generatedSpeechUnavailable = true;
+              return { source: "browser", seconds: estimatedBrowserSeconds(normalized) };
             }
+            if (!response.ok) throw new Error("Speech is unavailable");
+            const bytes = await response.arrayBuffer();
+            preparationSignal.throwIfAborted();
+            const seconds = await measureSeconds(bytes);
+            preparationSignal.throwIfAborted();
             createdSrc = URL.createObjectURL(new Blob([bytes], {
               type: response.headers.get("content-type") || "audio/mpeg"
             }));
-            prepared = { source: "generated", src: createdSrc, seconds: await measureSeconds(bytes) };
-            if (controller.signal.aborted) {
-              throw controller.signal.reason ?? new DOMException("Speech preparation cancelled", "AbortError");
-            }
-          }
+            return { source: "generated", src: createdSrc, seconds };
+          }, SPEECH_PREPARATION_TIMEOUT_MS, controller.signal);
         }
       } catch (cause) {
         if (createdSrc) URL.revokeObjectURL(createdSrc);
         if (controller.signal.aborted) throw controller.signal.reason ?? cause;
+        notifyFallback();
         prepared = { source: "browser", seconds: estimatedBrowserSeconds(normalized) };
       }
       if (disposed || controller.signal.aborted) {
@@ -2044,6 +1925,19 @@ function createVideoChatVoice(options = {}) {
       signal?.removeEventListener("abort", forwardAbort);
     }
   };
+  const speechStops = /* @__PURE__ */ new Set();
+  const watchSpeech = (seconds, expire) => {
+    let remaining = Math.max(1, seconds) * 2e3 + 5e3;
+    const timer = setInterval(() => {
+      if (held) return;
+      remaining -= 250;
+      if (remaining <= 0) {
+        clearInterval(timer);
+        expire();
+      }
+    }, 250);
+    return () => clearInterval(timer);
+  };
   const stopBrowser = () => {
     globalThis.speechSynthesis?.cancel();
     browserFinish?.();
@@ -2060,7 +1954,7 @@ function createVideoChatVoice(options = {}) {
     },
     resume() {
       held = false;
-      if (sounding && !silent) void sounding.play().catch(() => void 0);
+      if (sounding && !silent) void sounding.play().catch(() => playbackFailure?.());
       if (!silent) globalThis.speechSynthesis?.resume();
     },
     setMuted(muted) {
@@ -2068,7 +1962,16 @@ function createVideoChatVoice(options = {}) {
       if (sounding) sounding.muted = muted;
       if (muted) stopBrowser();
     },
-    async speak(text, { signal }) {
+    async speak(text, { signal, onStart }) {
+      let started = false;
+      const notifyStart = (source) => {
+        if (started || disposed || signal.aborted || silent || held) return;
+        started = true;
+        try {
+          void Promise.resolve(onStart?.(source)).catch(() => void 0);
+        } catch {
+        }
+      };
       const line = await load(text, signal);
       if (disposed || signal.aborted || silent) return;
       if (line.source === "browser") {
@@ -2081,40 +1984,91 @@ function createVideoChatVoice(options = {}) {
           const finish = () => {
             if (finished) return;
             finished = true;
+            clearWatchdog();
+            signal.removeEventListener("abort", stop);
+            speechStops.delete(stop);
+            utterance.onstart = null;
+            utterance.onend = null;
+            utterance.onerror = null;
             if (browserFinish === finish) browserFinish = void 0;
             resolve();
           };
+          const stop = () => {
+            synthesis.cancel();
+            finish();
+          };
+          const clearWatchdog = watchSpeech(estimatedBrowserSeconds(text), stop);
+          speechStops.add(stop);
           browserFinish = finish;
+          utterance.onstart = () => {
+            if (!finished) notifyStart("browser");
+          };
           utterance.onend = finish;
           utterance.onerror = finish;
-          signal.addEventListener("abort", () => {
-            synthesis.cancel();
+          signal.addEventListener("abort", stop, { once: true });
+          try {
+            synthesis.speak(utterance);
+            if (held) synthesis.pause();
+          } catch {
             finish();
-          }, { once: true });
-          synthesis.speak(utterance);
-          if (held) synthesis.pause();
+          }
         });
         return;
       }
-      const element = new Audio(line.src);
-      element.muted = silent;
-      sounding = element;
-      await new Promise((resolve) => {
-        let finished = false;
-        const finish = () => {
-          if (finished) return;
-          finished = true;
-          if (sounding === element) sounding = void 0;
-          resolve();
-        };
-        element.onended = finish;
-        element.onerror = finish;
-        signal.addEventListener("abort", () => {
-          element.pause();
-          finish();
-        }, { once: true });
-        if (!held) void element.play().catch(finish);
-      });
+      let playbackFailed = false;
+      try {
+        const element = new Audio(line.src);
+        element.muted = silent;
+        sounding = element;
+        await new Promise((resolve) => {
+          let finished = false;
+          const finish = () => {
+            if (finished) return;
+            finished = true;
+            clearWatchdog();
+            signal.removeEventListener("abort", stop);
+            speechStops.delete(stop);
+            element.onplaying = null;
+            element.onended = null;
+            element.onerror = null;
+            if (sounding === element) {
+              sounding = void 0;
+              playbackFailure = void 0;
+            }
+            resolve();
+          };
+          const stop = () => {
+            element.pause();
+            finish();
+          };
+          const fail = () => {
+            playbackFailed = true;
+            stop();
+          };
+          const clearWatchdog = watchSpeech(Math.max(line.seconds, estimatedBrowserSeconds(text)), fail);
+          speechStops.add(stop);
+          playbackFailure = fail;
+          element.onplaying = () => {
+            if (!finished) notifyStart("generated");
+          };
+          element.onended = finish;
+          element.onerror = fail;
+          signal.addEventListener("abort", stop, { once: true });
+          try {
+            if (!held) void element.play().catch(fail);
+          } catch {
+            fail();
+          }
+        });
+      } catch {
+        playbackFailed = true;
+      }
+      if (playbackFailed && !disposed && !signal.aborted && !silent) {
+        notifyFallback();
+        URL.revokeObjectURL(line.src);
+        lines.set(text.trim(), { source: "browser", seconds: estimatedBrowserSeconds(text) });
+        await this.speak(text, { signal, onStart: notifyStart });
+      }
     },
     dispose() {
       disposed = true;
@@ -2122,6 +2076,8 @@ function createVideoChatVoice(options = {}) {
         controller.abort(new DOMException("Video chat voice was disposed", "AbortError"));
       }
       pendingLoads.clear();
+      for (const stop of speechStops) stop();
+      speechStops.clear();
       sounding?.pause();
       sounding = void 0;
       stopBrowser();
@@ -2135,6 +2091,12 @@ function createVideoChatVoice(options = {}) {
 
 // src/video-chat/use-video-chat.ts
 var DEFAULT_TIMEOUT_MS = 18e4;
+function observe(callback) {
+  try {
+    void Promise.resolve(callback?.()).catch(() => void 0);
+  } catch {
+  }
+}
 function initialState(muted) {
   return {
     turns: [],
@@ -2160,6 +2122,7 @@ function reducer(state, action) {
       return {
         ...state,
         turns: [...state.turns, action.turn],
+        playerKey: state.playerKey + 1,
         shownTurnId: action.turn.id,
         status: "composing",
         resumeStatus: "composing",
@@ -2219,6 +2182,8 @@ function reducer(state, action) {
           suggestions: action.suggestions
         }))
       };
+    case "suggestions":
+      return { ...state, turns: replaceTurn(state.turns, action.id, (turn) => ({ ...turn, suggestions: action.suggestions })) };
     case "scene":
       if (state.playerKey !== action.key) return state;
       return {
@@ -2229,6 +2194,11 @@ function reducer(state, action) {
     case "playback-end":
       if (state.playerKey !== action.key) return state;
       return { ...state, status: "ended", resumeStatus: "ended", playbackEnded: true, openingSpeaking: false };
+    case "warning":
+      return { ...state, turns: replaceTurn(state.turns, action.id, (turn) => ({
+        ...turn,
+        warnings: [.../* @__PURE__ */ new Set([...turn.warnings ?? [], action.message])]
+      })) };
     case "error":
       if (state.turns.at(-1)?.id !== action.id) return state;
       return {
@@ -2285,6 +2255,17 @@ function reducer(state, action) {
         error: void 0
       };
     }
+    case "restore": {
+      const restored = {
+        ...initialState(state.muted),
+        capabilities: state.capabilities,
+        welcome: state.welcome,
+        turns: action.turns,
+        playerKey: state.playerKey
+      };
+      const latest = action.turns.at(-1);
+      return latest ? reducer(restored, { type: "select", id: latest.id }) : restored;
+    }
     case "reset":
       return { ...initialState(state.muted), capabilities: state.capabilities, welcome: state.welcome };
   }
@@ -2311,28 +2292,35 @@ function conversationFor(turns) {
     response: [...transcriptFor(turn).join(" ")].slice(0, 8e3).join("")
   }));
 }
-function errorFrom2(cause) {
+async function untilAborted(work, signal) {
+  let abort = () => void 0;
+  const cancelled = new Promise((_resolve, reject) => {
+    abort = () => reject(signal.reason ?? new DOMException("Cancelled", "AbortError"));
+    if (signal.aborted) abort();
+    else signal.addEventListener("abort", abort, { once: true });
+  });
+  try {
+    return await Promise.race([work, cancelled]);
+  } finally {
+    signal.removeEventListener("abort", abort);
+  }
+}
+function errorFrom(cause) {
   if (cause instanceof VideoError) return cause;
   if (cause instanceof DOMException && cause.name === "AbortError") {
     return new VideoError("Video chat was cancelled", { code: "aborted", recoverable: false });
   }
-  return new VideoError(safePublicDiagnostic(
-    cause instanceof Error ? cause.message : String(cause),
-    "Video chat failed"
-  ), { code: "video_chat_failed", recoverable: false });
-}
-async function responseError2(response) {
-  let code = "http_error";
-  let message = `Video chat endpoint failed (${response.status})`;
-  try {
-    const body = await response.json();
-    if (typeof body.error?.code === "string") code = body.error.code.slice(0, 80);
-    if (typeof body.error?.message === "string") {
-      message = safePublicDiagnostic(body.error.message, message);
-    }
-  } catch {
+  if (cause instanceof DOMException && cause.name === "TimeoutError") {
+    return new VideoError("Video chat timed out", { code: "timeout", recoverable: false });
   }
-  return new VideoError(message, { code, status: response.status, recoverable: false });
+  return new VideoError("Video chat could not produce a playable response", { code: "video_chat_failed", recoverable: false });
+}
+async function responseError(response) {
+  return new VideoError("Video chat could not produce a playable response", {
+    code: "http_error",
+    status: response.status,
+    recoverable: false
+  });
 }
 function pacedScene(scene, spokenSeconds, templates) {
   const held = spokenSeconds && spokenSeconds > 0 ? spokenSeconds + 0.8 : getSceneDuration(scene, templates?.getTemplateMetadata(scene.templateId) ?? getBuiltinTemplateMetadata(scene.templateId));
@@ -2361,35 +2349,79 @@ function prepareVisualScene(scene, mode) {
   return overMedia ? { ...shown, textArchetype: "subtle" } : shown;
 }
 function useVideoChat(options = {}) {
-  const optionsRef = useRef4(options);
+  return useVideoChatSession(options).chat;
+}
+function useVideoChatSession(options = {}) {
+  const optionsRef = useRef3(options);
   optionsRef.current = options;
-  const ownedVoiceRef = useRef4(void 0);
+  const voiceWarningRef = useRef3(() => void 0);
+  const ownedVoiceRef = useRef3(void 0);
   if (!options.voice && !ownedVoiceRef.current) {
     ownedVoiceRef.current = createVideoChatVoice({
       endpoint: options.endpoint,
       headers: options.headers,
       credentials: options.credentials,
-      fetcher: options.fetcher
+      fetcher: options.fetcher,
+      onFallback: () => voiceWarningRef.current()
     });
   }
   const voice = options.voice ?? ownedVoiceRef.current;
-  const voiceRef = useRef4(voice);
+  const voiceRef = useRef3(voice);
   voiceRef.current = voice;
-  const narration = useNarration({ voice });
-  const narrationRef = useRef4(narration);
+  const unavailableVoiceLines = useRef3(/* @__PURE__ */ new Set());
+  const speechStartRef = useRef3(() => void 0);
+  const narration = useNarration({ onSpeechStart: (source) => speechStartRef.current(source), voice: {
+    speak: (text, options2) => unavailableVoiceLines.current.has(text) ? void 0 : voice.speak(text, options2)
+  } });
+  const narrationRef = useRef3(narration);
   narrationRef.current = narration;
   const [state, dispatch] = useReducer(reducer, options.initialMuted ?? false, initialState);
-  const stateRef = useRef4(state);
+  const stateRef = useRef3(state);
   stateRef.current = state;
-  const runRef = useRef4(0);
-  const inFlightRef = useRef4(void 0);
-  const openingRef = useRef4(void 0);
-  const timelineRef = useRef4(void 0);
-  const heldRef = useRef4(false);
-  const flushRef = useRef4(void 0);
-  const mountedRef = useRef4(true);
-  const firstFrameRef = useRef4(void 0);
-  const request = useCallback3(async (action, init = {}, signal) => {
+  const runRef = useRef3(0);
+  const inFlightRef = useRef3(void 0);
+  const suggestionsRef = useRef3(void 0);
+  const openingRef = useRef3(void 0);
+  const timelineRef = useRef3(void 0);
+  const heldRef = useRef3(false);
+  const flushRef = useRef3(void 0);
+  const mountedRef = useRef3(true);
+  const firstFrameRef = useRef3(void 0);
+  const reportMetric = useCallback2((metric) => {
+    observe(() => optionsRef.current.onPlaybackMetric?.(metric));
+  }, []);
+  const finishStall = useCallback2(() => {
+    const timing = firstFrameRef.current;
+    if (!timing?.active || timing.stallStartedAt == null) return;
+    const now = monotonicNow();
+    const started = timing.stallStartedAt;
+    timing.stallStartedAt = void 0;
+    reportMetric({
+      type: "stall",
+      turnId: timing.turnId,
+      mode: timing.mode,
+      elapsedMs: Math.max(0, Math.round(now - timing.startedAt)),
+      durationMs: Math.max(0, Math.round(now - started)),
+      reason: "scene-generation"
+    });
+  }, [reportMetric]);
+  const endTiming = useCallback2(() => {
+    finishStall();
+    if (firstFrameRef.current) firstFrameRef.current.active = false;
+  }, [finishStall]);
+  speechStartRef.current = (source) => {
+    const timing = firstFrameRef.current;
+    if (!mountedRef.current || !timing?.active || timing.speechReported || heldRef.current || stateRef.current.muted) return;
+    timing.speechReported = true;
+    reportMetric({
+      type: "first-speech",
+      turnId: timing.turnId,
+      mode: timing.mode,
+      elapsedMs: Math.max(0, Math.round(monotonicNow() - timing.startedAt)),
+      source: optionsRef.current.voice ? "custom" : source === "generated" ? "generated" : "browser"
+    });
+  };
+  const request = useCallback2(async (action, init = {}, signal) => {
     const current = optionsRef.current;
     const headers = new Headers(current.headers);
     new Headers(init.headers).forEach((header, name) => headers.set(name, header));
@@ -2403,27 +2435,29 @@ function useVideoChat(options = {}) {
       signal
     });
   }, []);
-  useEffect5(() => {
+  useEffect4(() => {
     mountedRef.current = true;
     const controller = new AbortController();
     void request("capabilities", {}, controller.signal).then(async (response) => {
-      if (!response.ok) throw await responseError2(response);
+      if (!response.ok) throw await responseError(response);
       return response.json();
     }).then((value) => {
       if (mountedRef.current) dispatch({ type: "capabilities", value });
     }).catch(() => void 0);
     void request("welcome", {}, controller.signal).then(async (response) => {
-      if (!response.ok) throw await responseError2(response);
+      if (!response.ok) throw await responseError(response);
       return response.json();
     }).then((value) => {
       if (mountedRef.current) dispatch({ type: "welcome", value });
     }).catch(() => void 0);
     return () => {
+      endTiming();
       mountedRef.current = false;
       controller.abort();
       runRef.current += 1;
       inFlightRef.current?.abort(new DOMException("Component unmounted", "AbortError"));
       openingRef.current?.abort(new DOMException("Component unmounted", "AbortError"));
+      suggestionsRef.current?.abort();
       timelineRef.current?.complete();
       timelineRef.current = void 0;
       narrationRef.current.interrupt();
@@ -2431,12 +2465,14 @@ function useVideoChat(options = {}) {
         if (!mountedRef.current) ownedVoiceRef.current?.dispose?.();
       });
     };
-  }, [request]);
-  useEffect5(() => voice.setMuted(state.muted), [state.muted, voice]);
-  const cancel = useCallback3((reason = "Video chat was cancelled") => {
+  }, [request, endTiming]);
+  useEffect4(() => voice.setMuted(state.muted), [state.muted, voice]);
+  const cancel = useCallback2((reason = "Video chat was cancelled") => {
+    endTiming();
     runRef.current += 1;
     inFlightRef.current?.abort(new DOMException(reason, "AbortError"));
     openingRef.current?.abort(new DOMException(reason, "AbortError"));
+    suggestionsRef.current?.abort();
     inFlightRef.current = void 0;
     openingRef.current = void 0;
     timelineRef.current?.complete();
@@ -2444,16 +2480,19 @@ function useVideoChat(options = {}) {
     flushRef.current = void 0;
     narrationRef.current.interrupt();
     dispatch({ type: "cancelled" });
-  }, []);
-  const ask = useCallback3(async (value, askOptions = {}) => {
+  }, [endTiming]);
+  const ask = useCallback2(async (value, askOptions = {}) => {
     const prompt = value.trim();
     if (!prompt) return void 0;
+    endTiming();
     inFlightRef.current?.abort(new DOMException("Replaced by a new prompt", "AbortError"));
     openingRef.current?.abort(new DOMException("Replaced by a new prompt", "AbortError"));
+    suggestionsRef.current?.abort();
     timelineRef.current?.complete();
     timelineRef.current = void 0;
     narrationRef.current.interrupt();
     voiceRef.current.resume();
+    unavailableVoiceLines.current.clear();
     heldRef.current = false;
     const controller = new AbortController();
     const openingController = new AbortController();
@@ -2488,7 +2527,7 @@ function useVideoChat(options = {}) {
       suggestions: [],
       ...openingMedia ? { openingMedia } : {}
     };
-    firstFrameRef.current = { turnId: id, mode, startedAt: monotonicNow(), reported: false };
+    firstFrameRef.current = { turnId: id, mode, startedAt: monotonicNow(), reported: false, speechReported: false, active: true };
     dispatch({ type: "start", turn });
     let timeline;
     let style;
@@ -2500,9 +2539,14 @@ function useVideoChat(options = {}) {
     let terminal = false;
     let attempt = 0;
     let ready = [];
+    let received = [];
     let appended = 0;
-    const isCurrent = () => mountedRef.current && runRef.current === run && !controller.signal.aborted;
+    const isCurrent = () => mountedRef.current && runRef.current === run && !controller.signal.aborted && !terminal;
     const isOpeningCurrent = () => isCurrent() && !terminal && openingRef.current === openingController && !openingController.signal.aborted;
+    const warn = (message) => {
+      if (isCurrent()) dispatch({ type: "warning", id, message });
+    };
+    voiceWarningRef.current = () => warn("Using browser voice for this response.");
     const flush = () => {
       if (!isCurrent()) return;
       let available = appended;
@@ -2536,11 +2580,11 @@ function useVideoChat(options = {}) {
       }
     };
     flushRef.current = flush;
-    const resolveOpeningMedia = async (keyword) => {
+    const resolveOpeningMedia = async (keyword, fallbackKeyword) => {
       try {
         const response = await request("opening-media", {
           method: "POST",
-          body: JSON.stringify({ keyword, orientation })
+          body: JSON.stringify({ keyword, ...fallbackKeyword ? { fallbackKeyword } : {}, orientation })
         }, openingController.signal);
         if (!response.ok || !isOpeningCurrent() || timeline) return;
         const payload = await response.json();
@@ -2549,13 +2593,25 @@ function useVideoChat(options = {}) {
       } catch {
       }
     };
+    const prepareSpeech = async (text, signal) => {
+      try {
+        return currentOptions.voice ? await withDeadline((child) => voiceRef.current.prepare(text, { signal: child }), 3e3, signal) : await voiceRef.current.prepare(text, { signal });
+      } catch (cause) {
+        if (currentOptions.voice && !signal.aborted && isCurrent()) unavailableVoiceLines.current.add(text);
+        throw cause;
+      }
+    };
     const speakOpening = async (text) => {
       try {
-        await voiceRef.current.prepare(text, { signal: openingController.signal });
         if (!isOpeningCurrent()) return;
         dispatch({ type: "opening-start", id, line: text });
-        await voiceRef.current.speak(text, { signal: openingController.signal });
+        await prepareSpeech(text, openingController.signal);
+        if (!isOpeningCurrent()) return;
+        await voiceRef.current.speak(text, { signal: openingController.signal, onStart: (source) => {
+          if (isOpeningCurrent()) speechStartRef.current(source);
+        } });
       } catch {
+        if (isOpeningCurrent()) warn("Some narration is unavailable; the response will continue.");
       } finally {
         openingActive = false;
         if (isOpeningCurrent()) dispatch({ type: "opening-end", id });
@@ -2581,7 +2637,7 @@ function useVideoChat(options = {}) {
           ...currentOptions.style ? { style: currentOptions.style } : {}
         })
       }, controller.signal);
-      if (!response.ok) throw await responseError2(response);
+      if (!response.ok) throw await responseError(response);
       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" });
       }
@@ -2590,83 +2646,100 @@ function useVideoChat(options = {}) {
       const pending = [];
       let narrating = Promise.resolve();
       let terminalError;
-      for await (const event of decodeVideoSse(response.body)) {
-        if (!isCurrent() || currentAttempt !== attempt) return { video: { schemaVersion: "0.1", orientation, scenes: [], style }, suggestions: [] };
-        if (event.type === "response.start") style = event.data.style;
-        if (event.type === "data.video-chat-opening") {
-          const payload = event.data && typeof event.data === "object" && !Array.isArray(event.data) ? event.data : {};
-          const line = typeof payload.line === "string" ? payload.line.trim().slice(0, 300) : "";
-          const keyword = typeof payload.keyword === "string" ? payload.keyword.trim().slice(0, 80) : "";
-          if (!openingMedia && keyword) void resolveOpeningMedia(keyword);
-          if (!openingRequested && line) {
-            spokenHook = line;
-            lines.push(line);
-            openingRequested = true;
-            openingActive = true;
-            void speakOpening(line);
+      try {
+        for await (const event of decodeVideoSse(response.body)) {
+          if (!isCurrent() || currentAttempt !== attempt) return { video: { schemaVersion: "0.1", orientation, scenes: [], style }, lines: [] };
+          if (event.type === "response.start") style = event.data.style;
+          if (event.type === "response.warning" || event.type === "response.error" && !event.data.terminal) {
+            warn("Some parts were simplified so the response could continue.");
           }
-          continue;
-        }
-        if (event.type === "response.error" && event.data.terminal) {
-          terminalError = new VideoError(event.data.error.message, {
-            code: event.data.error.code,
-            requestId: event.data.snapshot ? void 0 : id,
-            recoverable: event.data.error.recoverable
+          if (event.type === "data.video-chat-opening") {
+            const payload = event.data && typeof event.data === "object" && !Array.isArray(event.data) ? event.data : {};
+            const line = typeof payload.line === "string" ? payload.line.trim().slice(0, 300) : "";
+            const keyword = typeof payload.keyword === "string" ? payload.keyword.trim().slice(0, 80) : "";
+            const fallbackKeyword = typeof payload.fallbackKeyword === "string" ? payload.fallbackKeyword.trim().slice(0, 80) : void 0;
+            if (!openingMedia && keyword) void resolveOpeningMedia(keyword, fallbackKeyword);
+            if (!openingRequested && line) {
+              spokenHook = line;
+              lines.push(line);
+              openingRequested = true;
+              openingActive = true;
+              void speakOpening(line);
+            }
+            continue;
+          }
+          if (event.type === "response.error" && event.data.terminal) {
+            terminalError = new VideoError("Video chat could not finish this response", {
+              code: event.data.error.code,
+              requestId: event.data.snapshot ? void 0 : id,
+              recoverable: event.data.error.recoverable
+            });
+          }
+          if (event.type === "response.abort") {
+            terminalError = new VideoError("Video chat was interrupted", { code: "aborted", recoverable: false });
+          }
+          if (event.type !== "scene.add") continue;
+          const position = event.data.position;
+          const plannedScene = event.data.scene;
+          planned[position] = plannedScene;
+          received[position] = prepareVisualScene(plannedScene, mode);
+          if (!currentOptions.templates?.getTemplate(plannedScene.templateId)) {
+            preloadBuiltinTemplate(plannedScene.templateId);
+          }
+          warmSceneMedia(plannedScene.variables);
+          const narrated = narrating.then(async () => {
+            const supplied = plannedScene.narration?.trim();
+            if (supplied) return supplied;
+            return withDeadline(async (signal) => {
+              const narrationResponse = await request("narration", {
+                method: "POST",
+                body: JSON.stringify({ prompt, scene: plannedScene, earlier: [...lines] })
+              }, signal);
+              if (!narrationResponse.ok) throw new Error("Narration unavailable");
+              const payload = await narrationResponse.json();
+              const line = typeof payload.line === "string" ? payload.line.trim() : "";
+              if (!line) throw new Error("Narration unavailable");
+              return line;
+            }, 3e3, controller.signal);
+          }).catch((cause) => {
+            if (controller.signal.aborted) throw cause;
+            warn("Some narration was simplified so the response could continue.");
+            return Object.values(plannedScene.variables).filter((value2) => typeof value2 === "string" && !/^https?:/i.test(value2)).join(" ").slice(0, 500);
+          }).then((line) => {
+            if (line) lines.push(line);
+            return line;
           });
+          narrating = narrated.catch(() => "");
+          pending.push(narrated.then(async (line) => {
+            if (!isCurrent() || currentAttempt !== attempt) return;
+            const visual = prepareVisualScene(plannedScene, mode);
+            const withNarration = line ? { ...visual, narration: line } : visual;
+            const spoken = line ? await prepareSpeech(line, controller.signal).catch((cause) => {
+              if (controller.signal.aborted) throw cause;
+              warn("Some narration is unavailable; the response will continue.");
+              return void 0;
+            }) : void 0;
+            if (!isCurrent() || currentAttempt !== attempt) return;
+            ready[position] = pacedScene(withNarration, spoken?.seconds, currentOptions.templates);
+            flush();
+          }).catch(() => {
+            if (!isCurrent() || currentAttempt !== attempt) return;
+            ready[position] = { ...received[position], timing: { fixedDuration: 5 } };
+            warn("Some parts were simplified so the response could continue.");
+            flush();
+          }));
         }
-        if (event.type === "response.abort") {
-          terminalError = new VideoError(event.data.reason, { code: "aborted", recoverable: false });
-        }
-        if (event.type !== "scene.add") continue;
-        const position = event.data.position;
-        const plannedScene = event.data.scene;
-        planned[position] = plannedScene;
-        if (!currentOptions.templates?.getTemplate(plannedScene.templateId)) {
-          preloadBuiltinTemplate(plannedScene.templateId);
-        }
-        warmSceneMedia(plannedScene.variables);
-        const narrated = narrating.then(async () => {
-          const supplied = plannedScene.narration?.trim();
-          if (supplied) return supplied;
-          const narrationResponse = await request("narration", {
-            method: "POST",
-            body: JSON.stringify({ prompt, scene: plannedScene, earlier: [...lines] })
-          }, controller.signal);
-          if (!narrationResponse.ok) return "";
-          const payload = await narrationResponse.json();
-          return typeof payload.line === "string" ? payload.line.trim() : "";
-        }).then((line) => {
-          if (line) lines.push(line);
-          return line;
-        });
-        narrating = narrated.catch(() => "");
-        pending.push(narrated.then(async (line) => {
-          if (!isCurrent() || currentAttempt !== attempt) return;
-          const visual = prepareVisualScene(plannedScene, mode);
-          const withNarration = line ? { ...visual, narration: line } : visual;
-          const spoken = line ? await voiceRef.current.prepare(line, { signal: controller.signal }) : void 0;
-          if (!isCurrent() || currentAttempt !== attempt) return;
-          ready[position] = pacedScene(withNarration, spoken?.seconds, currentOptions.templates);
-          flush();
-        }));
+      } catch (cause) {
+        if (controller.signal.aborted) throw cause;
+        terminalError = errorFrom(cause);
       }
       await Promise.all(pending);
-      if (terminalError) throw terminalError;
+      if (terminalError && ready.some(Boolean) && style) {
+        warn("The response was interrupted; completed scenes are still available.");
+      } else if (terminalError) throw terminalError;
       if (planned.length === 0 || ready.filter(Boolean).length === 0 || !style) {
         throw new VideoError("The video response contained no playable scenes", { code: "empty_response" });
       }
-      let suggestions2 = [];
-      try {
-        const suggestionsResponse = await request("suggestions", {
-          method: "POST",
-          body: JSON.stringify({ prompt, lines })
-        }, controller.signal);
-        if (suggestionsResponse.ok) {
-          suggestions2 = (await suggestionsResponse.json()).suggestions ?? [];
-        }
-      } catch (cause) {
-        if (controller.signal.aborted) throw cause;
-      }
       return {
         video: {
           schemaVersion: "0.1",
@@ -2674,25 +2747,43 @@ function useVideoChat(options = {}) {
           scenes: ready.filter((entry) => entry != null),
           style
         },
-        suggestions: suggestions2
+        lines
       };
     };
     try {
       let response;
       try {
-        response = await runAttempt(attempt);
+        response = await untilAborted(runAttempt(attempt), controller.signal);
       } catch (cause) {
-        if (controller.signal.aborted || timeline) throw cause;
+        if (controller.signal.aborted || timeline || spokenHook) throw cause;
         attempt += 1;
         ready = [];
+        received = [];
         appended = 0;
         style = void 0;
-        response = await runAttempt(attempt);
+        response = await untilAborted(runAttempt(attempt), controller.signal);
       }
       if (!isCurrent()) return void 0;
       planDone = true;
       flush();
-      dispatch({ type: "complete", id, video: response.video, suggestions: response.suggestions });
+      dispatch({ type: "complete", id, video: response.video, suggestions: [] });
+      const suggestionsController = new AbortController();
+      suggestionsRef.current = suggestionsController;
+      void withDeadline(async (signal) => {
+        const result = await request("suggestions", {
+          method: "POST",
+          body: JSON.stringify({ prompt, lines: response.lines })
+        }, signal);
+        if (!result.ok) return [];
+        const payload = await result.json();
+        return Array.isArray(payload.suggestions) ? payload.suggestions : [];
+      }, 7e3, suggestionsController.signal).then((suggestions2) => {
+        if (mountedRef.current && runRef.current === run && !suggestionsController.signal.aborted) {
+          dispatch({ type: "suggestions", id, suggestions: suggestions2 });
+        }
+      }).catch(() => void 0).finally(() => {
+        if (suggestionsRef.current === suggestionsController) suggestionsRef.current = void 0;
+      });
       return response.video;
     } catch (cause) {
       if (runRef.current !== run) return void 0;
@@ -2700,31 +2791,52 @@ function useVideoChat(options = {}) {
         return void 0;
       }
       terminal = true;
+      const recovered = received.flatMap((scene, index) => scene ? [ready[index] ?? { ...scene, timing: { fixedDuration: 5 } }] : []);
+      if (recovered.length === 0 && spokenHook) {
+        recovered.push({ id: `${id}-opening`, templateId: "media", variables: { texts: spokenHook, mediaType: "gradient" }, narration: spokenHook, timing: { fixedDuration: Math.max(4, spokenHook.split(/\s+/u).length / 2.5) } });
+      }
+      if (recovered.length > 0) {
+        style ??= { brand: resolveVideoBrand(currentOptions.brand), density: "normal", motion: "normal", defaultBackgroundEffect: "static", defaultTextArchetype: "subtle", defaultTransition: "crossfade" };
+        openingController.abort(new DOMException("Continuing completed response", "AbortError"));
+        if (!timeline) {
+          timeline = createSceneTimeline({ style, orientation });
+          dispatch({ type: "player", id, stream: timeline.stream });
+        }
+        for (const scene of recovered.slice(appended)) timeline.add(scene);
+        timeline.complete();
+        if (timelineRef.current === timeline) timelineRef.current = void 0;
+        const video = { schemaVersion: "0.1", orientation, style, scenes: recovered };
+        dispatch({ type: "warning", id, message: "The response was interrupted; completed scenes are still available." });
+        dispatch({ type: "complete", id, video, suggestions: [] });
+        return video;
+      }
       openingController.abort(new DOMException("Response failed", "AbortError"));
       timeline?.complete();
       if (timelineRef.current === timeline) timelineRef.current = void 0;
-      const error = errorFrom2(cause);
+      const error = errorFrom(cause);
       dispatch({ type: "error", id, error });
       return void 0;
     } finally {
       clearTimeout(timeout);
       if (runRef.current === run) inFlightRef.current = void 0;
     }
-  }, [request]);
-  const pause = useCallback3(() => {
+  }, [request, endTiming]);
+  const pause = useCallback2(() => {
+    finishStall();
     heldRef.current = true;
     voiceRef.current.pause();
     dispatch({ type: "pause" });
-  }, []);
-  const resume = useCallback3(() => {
+  }, [finishStall]);
+  const resume = useCallback2(() => {
     heldRef.current = false;
     voiceRef.current.resume();
     dispatch({ type: "resume" });
     flushRef.current?.();
   }, []);
-  const replay = useCallback3(() => {
+  const replay = useCallback2(() => {
     const turn = stateRef.current.turns.find((entry) => entry.id === stateRef.current.shownTurnId);
     if (!turn?.completed || !turn.video) return;
+    endTiming();
     if (inFlightRef.current) {
       runRef.current += 1;
       inFlightRef.current.abort(new DOMException("Replaying a saved response", "AbortError"));
@@ -2738,10 +2850,11 @@ function useVideoChat(options = {}) {
     heldRef.current = false;
     voiceRef.current.resume();
     dispatch({ type: "replay" });
-  }, []);
-  const selectTurn = useCallback3((id) => {
+  }, [endTiming]);
+  const selectTurn = useCallback2((id) => {
     const turn = stateRef.current.turns.find((entry) => entry.id === id);
     if (!turn?.completed || !turn.video) return;
+    endTiming();
     if (inFlightRef.current) {
       runRef.current += 1;
       inFlightRef.current.abort(new DOMException("Viewing a saved response", "AbortError"));
@@ -2755,14 +2868,20 @@ function useVideoChat(options = {}) {
     heldRef.current = false;
     voiceRef.current.resume();
     dispatch({ type: "select", id });
-  }, []);
-  const reset = useCallback3(() => {
+  }, [endTiming]);
+  const reset = useCallback2(() => {
     cancel("Session reset");
     heldRef.current = false;
     voiceRef.current.resume();
     dispatch({ type: "reset" });
   }, [cancel]);
-  const setMuted = useCallback3((muted) => dispatch({ type: "mute", value: muted }), []);
+  const restoreSession = useCallback2((turns) => {
+    cancel("Restoring session");
+    heldRef.current = false;
+    voiceRef.current.resume();
+    dispatch({ type: "restore", turns: turns.filter((turn) => turn.completed && turn.video).slice(-100) });
+  }, [cancel]);
+  const setMuted = useCallback2((muted) => dispatch({ type: "mute", value: muted }), []);
   const currentTurn = state.turns.at(-1);
   const shownTurn = state.turns.find((turn) => turn.id === state.shownTurnId) ?? currentTurn;
   const availableModes = state.capabilities?.modes ?? ["templates"];
@@ -2777,30 +2896,38 @@ function useVideoChat(options = {}) {
     paused: state.status === "paused",
     controls: false,
     orientation: shownTurn?.fixedOrientation ? shownTurn.orientation : "auto",
+    onFramePresented: () => {
+      const timing = firstFrameRef.current;
+      if (stateRef.current.playerKey !== playbackKey || state.playback?.kind !== "stream" || !timing?.active || timing.reported) return;
+      timing.reported = true;
+      const elapsedMs = Math.max(0, Math.round(monotonicNow() - timing.startedAt));
+      observe(() => optionsRef.current.onFirstFrame?.({ turnId: timing.turnId, mode: timing.mode, timeToFirstFrameMs: elapsedMs }));
+      reportMetric({ type: "first-frame", turnId: timing.turnId, mode: timing.mode, elapsedMs });
+    },
+    onStallChange: (stalled) => {
+      if (stateRef.current.playerKey !== playbackKey || state.playback?.kind !== "stream") return;
+      const timing = firstFrameRef.current;
+      if (!timing?.active || !timing.reported) return;
+      if (!stalled) finishStall();
+      else if (!heldRef.current && timing.stallStartedAt == null) timing.stallStartedAt = monotonicNow();
+    },
     onSceneChange: (scene, index) => {
       if (stateRef.current.playerKey !== playbackKey) return;
-      const firstFrame = firstFrameRef.current;
-      if (index === 0 && firstFrame && !firstFrame.reported && state.playback?.kind === "stream") {
-        firstFrame.reported = true;
-        try {
-          void optionsRef.current.onFirstFrame?.({
-            turnId: firstFrame.turnId,
-            mode: firstFrame.mode,
-            timeToFirstFrameMs: Math.max(0, Math.round(monotonicNow() - firstFrame.startedAt))
-          });
-        } catch {
-        }
-      }
       dispatch({ type: "scene", key: playbackKey, scene, index });
       narrationRef.current.onSceneChange(scene, index);
     },
-    onPlaybackEnd: () => dispatch({ type: "playback-end", key: playbackKey }),
+    onPlaybackEnd: () => {
+      if (stateRef.current.playerKey !== playbackKey) return;
+      endTiming();
+      dispatch({ type: "playback-end", key: playbackKey });
+    },
     onError: (cause) => {
+      if (stateRef.current.playerKey !== playbackKey) return;
       const id = stateRef.current.turns.at(-1)?.id;
-      if (id) dispatch({ type: "error", id, error: errorFrom2(cause) });
+      if (id) dispatch({ type: "error", id, error: errorFrom(cause) });
     }
   } : void 0;
-  return {
+  const chat = {
     ask,
     cancel,
     pause,
@@ -2815,6 +2942,7 @@ function useVideoChat(options = {}) {
     welcome: state.welcome,
     availableModes,
     status: state.status,
+    warnings: shownTurn?.warnings ?? [],
     error: state.error,
     suggestions,
     caption: state.caption,
@@ -2826,15 +2954,16 @@ function useVideoChat(options = {}) {
     playerKey: state.playerKey,
     playerProps
   };
+  return { chat, restoreSession };
 }
 
 // src/video-chat/video-chat.tsx
-import { useCallback as useCallback6, useEffect as useEffect9, useId, useMemo as useMemo3, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback6, useEffect as useEffect9, useId, useLayoutEffect, useMemo as useMemo2, useRef as useRef7, useState as useState6 } from "react";
 
 // src/video-chat/modes.ts
 var visualModes = [
-  { id: "templates", label: "Templates only", note: "Rendered scenes \xB7 free and instant" },
-  { id: "full", label: "Full AI video", note: "Every beat filmed \xB7 billed per clip" }
+  { id: "templates", label: "Templates only", note: "Animated text, diagrams and charts" },
+  { id: "full", label: "Full AI video", note: "AI-generated footage \xB7 billed per clip" }
 ];
 var defaultMode = visualModes[0];
 var modeById = (id) => visualModes.find((mode) => mode.id === id) ?? defaultMode;
@@ -2939,9 +3068,9 @@ var Warning = () => /* @__PURE__ */ jsxs3(Glyph, { children: [
 ] });
 
 // src/video-chat/use-dismiss.ts
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect5 } from "react";
 function useDismiss(open, close, surfaces) {
-  useEffect6(() => {
+  useEffect5(() => {
     if (!open) return;
     const onKeyDown = (event) => {
       if (event.key !== "Escape") return;
@@ -2963,7 +3092,7 @@ function useDismiss(open, close, surfaces) {
   }, [open, close, surfaces]);
 }
 function useFocusTrap(active, surface) {
-  useEffect6(() => {
+  useEffect5(() => {
     if (!active) return;
     const returnTo = document.activeElement;
     const focusable = () => Array.from(
@@ -2996,11 +3125,11 @@ function useFocusTrap(active, surface) {
 }
 
 // src/video-chat/suggestion-cards.tsx
-import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState4 } from "react";
+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";
 function Frame({ media, poster, playing }) {
-  const video = useRef5(null);
-  useEffect7(() => {
+  const video = useRef4(null);
+  useEffect6(() => {
     const element = video.current;
     if (!element || playing === void 0) return;
     if (playing) void element.play().catch(() => void 0);
@@ -3025,20 +3154,20 @@ function Frame({ media, poster, playing }) {
   );
 }
 function SuggestionCards({ suggestions, label, onAsk }) {
-  const railRef = useRef5(null);
-  const [at, setAt] = useState4(0);
-  const [taken, setTaken] = useState4(false);
-  const take = useCallback4((index) => {
+  const railRef = useRef4(null);
+  const [at, setAt] = useState3(0);
+  const [taken, setTaken] = useState3(false);
+  const take = useCallback3((index) => {
     setTaken(true);
     setAt(index);
   }, []);
-  useEffect7(() => {
+  useEffect6(() => {
     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]);
-  useEffect7(() => {
+  useEffect6(() => {
     const rail = railRef.current;
     const card = rail?.children[at];
     if (!rail || !card) return;
@@ -3095,7 +3224,7 @@ function Welcome({ data, onAsk, title }) {
 }
 
 // src/video-chat/use-voice-input.ts
-import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef6, useState as useState5 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef5, useState as useState4 } from "react";
 function recognitionConstructor() {
   if (typeof window === "undefined") return void 0;
   const holder = window;
@@ -3165,19 +3294,19 @@ 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] = useState4(false);
+  const [listening, setListening] = useState4(false);
+  const [error, setError] = useState4();
+  const [thinking, setThinking] = useState4(false);
+  const recognitionRef = useRef5(void 0);
+  const useRecorderRef = useRef5(false);
+  const operationRef = useRef5(void 0);
+  const handlerRef = useRef5(onTranscript);
   handlerRef.current = onTranscript;
-  useEffect8(() => {
+  useEffect7(() => {
     setSupported(supportsVoiceInput(transcriptionAvailable));
   }, [transcriptionAvailable]);
-  const stop = useCallback5(() => {
+  const stop = useCallback4(() => {
     recognitionRef.current?.abort();
     recognitionRef.current = void 0;
     const operation = operationRef.current;
@@ -3187,7 +3316,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
     setListening(false);
     setThinking(false);
   }, []);
-  useEffect8(() => () => {
+  useEffect7(() => () => {
     recognitionRef.current?.abort();
     recognitionRef.current = void 0;
     const operation = operationRef.current;
@@ -3195,7 +3324,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
     operation?.controller.abort();
     operation?.finish?.();
   }, []);
-  const finish = useCallback5(() => {
+  const finish = useCallback4(() => {
     const recognition = recognitionRef.current;
     if (recognition) {
       recognition.stop();
@@ -3209,7 +3338,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
     }
     stop();
   }, [stop]);
-  const record = useCallback5(async () => {
+  const record = useCallback4(async () => {
     if (!transcriptionAvailable || !recorderAvailable()) {
       setError("Server transcription is not configured.");
       return;
@@ -3247,7 +3376,7 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
       }
     }
   }, [transcriptionAvailable, options.endpoint, options.headers, options.credentials, options.fetcher]);
-  const toggle = useCallback5(() => {
+  const toggle = useCallback4(() => {
     if (listening) {
       finish();
       return;
@@ -3298,14 +3427,77 @@ function useVoiceInput(onTranscript, transcriptionAvailable = false, options = {
   return { supported, listening, thinking, error, toggle, stop };
 }
 
+// src/video-chat/use-immersive-controls.ts
+import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef6, useState as useState5 } from "react";
+function useImmersiveControls(playing, pinned, hasCaptions = false) {
+  const [visible, setVisible] = useState5(true);
+  const hovered = useRef6(false);
+  const focused = useRef6(false);
+  const previousCaptions = useRef6(false);
+  const timer = useRef6(null);
+  const clearTimer = useCallback5(() => {
+    if (timer.current !== null) clearTimeout(timer.current);
+    timer.current = null;
+  }, []);
+  const reveal = useCallback5(() => {
+    clearTimer();
+    setVisible(true);
+    if (playing && !pinned && !hovered.current && !focused.current) {
+      timer.current = setTimeout(() => {
+        timer.current = null;
+        setVisible(false);
+      }, 2e3);
+    }
+  }, [clearTimer, playing, pinned]);
+  useEffect8(() => {
+    const firstCaption = hasCaptions && !previousCaptions.current;
+    previousCaptions.current = hasCaptions;
+    if (firstCaption && playing && !pinned && !focused.current) {
+      hovered.current = false;
+      clearTimer();
+      setVisible(false);
+    } else {
+      reveal();
+    }
+    return clearTimer;
+  }, [hasCaptions, playing, pinned, reveal, clearTimer]);
+  const onPointerEnter = useCallback5((event) => {
+    if (event?.pointerType === "touch") return;
+    hovered.current = true;
+    reveal();
+  }, [reveal]);
+  const onPointerLeave = useCallback5(() => {
+    if (!hovered.current) return;
+    hovered.current = false;
+    reveal();
+  }, [reveal]);
+  const onFocusCapture = useCallback5((event) => {
+    focused.current = event.target.matches(":focus-visible");
+    reveal();
+  }, [reveal]);
+  const onBlurCapture = useCallback5((event) => {
+    if (focused.current && !event.currentTarget.contains(event.relatedTarget)) {
+      focused.current = false;
+      reveal();
+    }
+  }, [reveal]);
+  return { visible, reveal, onPointerEnter, onPointerLeave, onFocusCapture, onBlurCapture };
+}
+
+// src/video-chat/logo.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Logo() {
+  return /* @__PURE__ */ jsx6("img", { className: "brand-logo", src: new URL("./assets/vanillasky-logo.svg", import.meta.url).href, alt: "VanillaSky", width: 144, height: 36 });
+}
+
 // src/video-chat/video-chat.tsx
-import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var DESKTOP_WIDTH = 900;
 function useViewportOrientation() {
-  const [portrait, setPortrait] = useState6(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px)`).matches : false);
+  const [portrait, setPortrait] = useState6(() => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`).matches : false);
   useEffect9(() => {
     if (typeof window.matchMedia !== "function") return;
-    const query = window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px)`);
+    const query = window.matchMedia(`(max-width: ${DESKTOP_WIDTH - 1}px) and (orientation: portrait)`);
     const update = () => setPortrait(query.matches);
     update();
     query.addEventListener("change", update);
@@ -3330,22 +3522,28 @@ function useFilmingStep(active, key) {
   return STEPS[Math.min(step, STEPS.length - 1)];
 }
 function Waveform({ active, listening }) {
-  return /* @__PURE__ */ jsx6("span", { className: `waveform${active ? " on" : ""}${listening ? " hearing" : ""}`, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((bar) => /* @__PURE__ */ jsx6("span", { style: { animationDelay: `${bar * 140}ms`, animationDuration: `${900 + bar * 130}ms` } }, bar)) });
+  return /* @__PURE__ */ jsx7("span", { className: `waveform${active ? " on" : ""}${listening ? " hearing" : ""}`, "aria-hidden": "true", children: [0, 1, 2, 3, 4].map((bar) => /* @__PURE__ */ jsx7("span", { style: { animationDelay: `${bar * 140}ms`, animationDuration: `${900 + bar * 130}ms` } }, bar)) });
 }
 function VideoChat({ options = {}, className, welcomeTitle }) {
   const [draft, setDraft] = useState6("");
+  const [savedSessions, setSavedSessions] = useState6([]);
   const [themeId, setThemeId] = useState6(defaultTheme.id);
   const [modeId, setModeId] = useState6(options.mode ?? defaultMode.id);
   const [historyOpen, setHistoryOpen] = useState6(false);
   const [settingsOpen, setSettingsOpen] = useState6(false);
-  const [sheetOpen, setSheetOpen] = useState6(false);
+  const [captionsOn, setCaptionsOn] = useState6(true);
+  const [captionsExpanded, setCaptionsExpanded] = useState6(false);
+  const [alwaysShowControls, setAlwaysShowControls] = useState6(false);
+  const [editing, setEditing] = useState6(false);
+  const resumeAfterInput = useRef7(false);
+  const panelRef = useRef7(null);
+  const composerRef = useRef7(null);
   const viewportOrientation = useViewportOrientation();
-  const [themeChoice, setThemeChoice] = useState6("system");
   const theme = themeById(themeId);
   const sessionOrientation = options.orientation ?? viewportOrientation;
   const { brand: configuredBrand, style: configuredStyle, ...sessionOptions } = options;
   const presentationBrand = configuredBrand ?? theme.brand;
-  const chat = useVideoChat({
+  const { chat, restoreSession } = useVideoChatSession({
     ...sessionOptions,
     mode: modeId,
     orientation: sessionOrientation,
@@ -3356,8 +3554,6 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
   const historyId = `${instanceId}-history`;
   const settingsId = `${instanceId}-settings`;
   const promptId = `${instanceId}-prompt`;
-  const responseTitleId = `${instanceId}-response-title`;
-  const appearanceName = `${instanceId}-appearance`;
   const visualsName = `${instanceId}-visuals`;
   const styleName = `${instanceId}-style`;
   const inputRef = useRef7(null);
@@ -3365,23 +3561,20 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
   const historyButtonRef = useRef7(null);
   const settingsRef = useRef7(null);
   const settingsButtonRef = useRef7(null);
-  const sheetRef = useRef7(null);
   const listen = useVoiceInput(setDraft, chat.capabilities?.transcription ?? false, {
     endpoint: options.endpoint,
     headers: options.headers,
     credentials: options.credentials,
     fetcher: options.fetcher
   });
-  const historySurfaces = useMemo3(() => [historyRef, historyButtonRef], []);
-  const settingsSurfaces = useMemo3(() => [settingsRef, settingsButtonRef], []);
-  const noSurfaces = useMemo3(() => [], []);
+  const historySurfaces = useMemo2(() => [historyRef, historyButtonRef], []);
+  const settingsSurfaces = useMemo2(() => [settingsRef, settingsButtonRef], []);
   const closeHistory = useCallback6(() => setHistoryOpen(false), []);
   const closeSettings = useCallback6(() => setSettingsOpen(false), []);
-  const closeSheet = useCallback6(() => setSheetOpen(false), []);
   useDismiss(historyOpen, closeHistory, historySurfaces);
   useDismiss(settingsOpen, closeSettings, settingsSurfaces);
-  useDismiss(sheetOpen, closeSheet, noSurfaces);
-  useFocusTrap(sheetOpen, sheetRef);
+  useFocusTrap(settingsOpen, settingsRef);
+  useFocusTrap(historyOpen, historyRef);
   const ask = useCallback6((value) => {
     const prompt = (typeof value === "string" ? value : value.prompt).trim();
     if (!prompt) return;
@@ -3389,7 +3582,10 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
     listen.stop();
     setHistoryOpen(false);
     setSettingsOpen(false);
-    setSheetOpen(false);
+    setCaptionsExpanded(false);
+    setEditing(false);
+    resumeAfterInput.current = false;
+    inputRef.current?.blur();
     void chat.ask(prompt, typeof value === "string" ? void 0 : {
       openingMedia: value.media,
       opening: value.opening
@@ -3400,14 +3596,22 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
       inputRef.current?.focus();
       return;
     }
+    listen.stop();
+    setDraft("");
+    const completed = chat.turns.filter((turn) => turn.completed && turn.video);
+    if (completed.length) setSavedSessions((sessions) => [{ id: completed[0].id, turns: completed }, ...sessions].slice(0, 10));
     chat.reset();
     setHistoryOpen(false);
     setSettingsOpen(false);
-    setSheetOpen(false);
-  }, [chat]);
+    setCaptionsExpanded(false);
+    setEditing(false);
+    resumeAfterInput.current = false;
+    inputRef.current?.blur();
+  }, [chat, listen]);
   const current = chat.currentTurn;
   const shown = chat.shownTurn;
   const showing = chat.playerProps != null;
+  const ambientPoster = shown?.openingMedia?.type === "image" ? shown.openingMedia.url : shown?.openingMedia?.posterUrl;
   const waitingForPicture = chat.turns.length > 0 && !showing && (chat.status === "composing" || chat.status === "playing" || chat.status === "paused");
   const filmingStep = useFilmingStep(waitingForPicture, current?.id);
   const status = chat.turns.length === 0 ? "idle" : chat.status === "composing" ? "drawing" : chat.status === "playing" ? "narrating" : chat.status === "error" || chat.status === "cancelled" ? "ended" : chat.status;
@@ -3416,47 +3620,99 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
   const availableModes = visualModes.filter((option) => chat.availableModes.includes(option.id));
   const selectedMode = modeById(modeId);
   const line = chat.caption ?? "";
-  const transport = status === "narrating" ? { label: "Pause", action: chat.pause, icon: /* @__PURE__ */ jsx6(Stop, {}) } : status === "paused" ? { label: "Continue", action: chat.resume, icon: /* @__PURE__ */ jsx6(Play, {}) } : status === "ended" && shown?.completed && shown.video ? { label: "Play again", action: chat.replay, icon: /* @__PURE__ */ jsx6(Replay, {}) } : void 0;
+  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__ */ jsx7(Stop, {}) } : status === "paused" ? { label: "Continue", action: chat.resume, icon: /* @__PURE__ */ jsx7(Play, {}) } : status === "ended" && shown?.completed && shown.video ? { label: "Play again", action: chat.replay, icon: /* @__PURE__ */ jsx7(Replay, {}) } : void 0;
+  const cancelInput = useCallback6(() => {
+    listen.stop();
+    setDraft("");
+    setEditing(false);
+    inputRef.current?.blur();
+    if (resumeAfterInput.current) chat.resume();
+    resumeAfterInput.current = false;
+  }, [listen, chat]);
+  const beginInput = (speak = false) => {
+    if (!editing) {
+      resumeAfterInput.current = chat.status === "playing" || chat.status === "composing";
+      if (resumeAfterInput.current) chat.pause();
+    }
+    setEditing(true);
+    setSettingsOpen(false);
+    setHistoryOpen(false);
+    if (speak) listen.toggle();
+  };
+  const controls = useImmersiveControls(
+    status === "narrating" || Boolean(line) && status !== "paused",
+    alwaysShowControls || captionsExpanded || editing || historyOpen || settingsOpen || listen.listening || listen.thinking || Boolean(chat.error || listen.error),
+    captionsOn && Boolean(line)
+  );
+  const captionControls = useImmersiveControls(Boolean(line), captionsExpanded, false);
+  const controlEvents = {
+    onPointerEnter: controls.onPointerEnter,
+    onPointerLeave: controls.onPointerLeave,
+    onFocusCapture: controls.onFocusCapture,
+    onBlurCapture: controls.onBlurCapture
+  };
+  useLayoutEffect(() => {
+    const composer = composerRef.current;
+    if (!composer) return;
+    const measure = () => panelRef.current?.style.setProperty("--composer-height", `${composer.getBoundingClientRect().height}px`);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(composer);
+    return () => observer.disconnect();
+  }, []);
   return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: `vanillasky-video-chat${className ? ` ${className}` : ""}`,
       "data-orientation": stageOrientation,
-      "data-theme": themeChoice,
+      "data-controls-visible": controls.visible,
+      tabIndex: 0,
+      "aria-label": "Video conversation",
+      onPointerMove: controls.reveal,
+      onPointerDown: controls.reveal,
+      onKeyDownCapture: controls.reveal,
       children: [
-        /* @__PURE__ */ jsxs6("header", { className: "chrome", children: [
+        /* @__PURE__ */ jsxs6("header", { className: "chrome", ...controlEvents, children: [
+          /* @__PURE__ */ jsx7("div", { className: "session-brand", children: /* @__PURE__ */ jsx7(Logo, {}) }),
           /* @__PURE__ */ jsxs6("div", { className: "group", children: [
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsxs6(
               "button",
               {
                 type: "button",
                 className: "round",
-                "aria-label": chat.turns.length === 0 ? "Ask a prompt" : "New session",
+                "aria-label": "New session",
                 onClick: newSession,
-                children: /* @__PURE__ */ jsx6(Plus, {})
+                children: [
+                  /* @__PURE__ */ jsx7(Plus, {}),
+                  /* @__PURE__ */ jsx7("span", { className: "nav-label", children: "New session" })
+                ]
               }
             ),
-            chat.turns.length > 0 && /* @__PURE__ */ jsxs6(
+            /* @__PURE__ */ jsxs6(
               "button",
               {
                 ref: historyButtonRef,
                 type: "button",
                 className: "pill",
                 "aria-expanded": historyOpen,
+                "aria-label": "History",
+                "aria-haspopup": "dialog",
                 "aria-controls": historyId,
                 onClick: () => {
                   setHistoryOpen((open) => !open);
                   setSettingsOpen(false);
                 },
                 children: [
-                  chat.turns.length,
-                  " asked"
+                  /* @__PURE__ */ jsx7(Replay, {}),
+                  /* @__PURE__ */ jsx7("span", { className: "nav-label", children: "History" })
                 ]
               }
             )
           ] }),
           /* @__PURE__ */ jsxs6("div", { className: "group", children: [
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 ref: settingsButtonRef,
@@ -3470,10 +3726,10 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
                   setSettingsOpen((open) => !open);
                   setHistoryOpen(false);
                 },
-                children: /* @__PURE__ */ jsx6(Gear, {})
+                children: /* @__PURE__ */ jsx7(Gear, {})
               }
             ),
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "button",
               {
                 type: "button",
@@ -3481,60 +3737,102 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
                 "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__ */ jsx6(Muted, {}) : /* @__PURE__ */ jsx6(Sound, {})
+                children: chat.muted ? /* @__PURE__ */ jsx7(Muted, {}) : /* @__PURE__ */ jsx7(Sound, {})
               }
             )
           ] })
         ] }),
         /* @__PURE__ */ jsxs6("div", { className: "stage-area", children: [
           /* @__PURE__ */ jsxs6("div", { className: "stage", style: { background: themeBackground(presentationBrand) }, children: [
+            showing && /* @__PURE__ */ jsx7("div", { className: "ambient-media", "aria-hidden": "true", children: ambientPoster && /* @__PURE__ */ jsx7("img", { className: "frame-media", src: ambientPoster, alt: "" }) }),
             !showing && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-              /* @__PURE__ */ jsx6("div", { className: "ground", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx7("div", { className: "ground", "aria-hidden": "true" }),
               shown?.openingMedia && /* @__PURE__ */ jsxs6(Fragment4, { children: [
-                /* @__PURE__ */ jsx6(Frame, { media: shown.openingMedia, poster: true }),
-                /* @__PURE__ */ jsx6("div", { className: "opening-wash", "aria-hidden": "true" })
+                /* @__PURE__ */ jsx7(Frame, { media: shown.openingMedia, poster: true }),
+                /* @__PURE__ */ jsx7("div", { className: "opening-wash", "aria-hidden": "true" })
               ] }),
-              chat.turns.length === 0 && /* @__PURE__ */ jsx6(Welcome, { data: chat.welcome, onAsk: ask, title: welcomeTitle }),
+              chat.turns.length === 0 && /* @__PURE__ */ jsx7(Welcome, { data: chat.welcome, onAsk: ask, title: welcomeTitle }),
               shown?.prompt && /* @__PURE__ */ jsxs6("div", { className: "asked", children: [
-                /* @__PURE__ */ jsx6("p", { className: "asked-prompt", children: shown.prompt }),
-                waitingForPicture && /* @__PURE__ */ jsx6("p", { className: "asked-step", "aria-live": "polite", children: filmingStep })
+                /* @__PURE__ */ jsx7("p", { className: "asked-prompt", children: shown.prompt }),
+                waitingForPicture && /* @__PURE__ */ jsx7("p", { className: "asked-step", "aria-live": "polite", children: filmingStep })
               ] })
             ] }),
-            chat.playerProps && /* @__PURE__ */ jsx6(
+            chat.playerProps && /* @__PURE__ */ jsx7("div", { className: "player-fit", style: { width: stageOrientation === "portrait" ? "min(100cqw, 56.25cqh)" : "min(100cqw, 177.7778cqh)" }, children: /* @__PURE__ */ jsx7(
               VideoPlayer,
               {
                 ...chat.playerProps,
                 templates: options.templates,
+                orientation: stageOrientation,
                 responsiveBreakpoint: DESKTOP_WIDTH,
                 ariaLabel: chat.playerProps.video ? "Replay" : "The response"
               },
               chat.playerKey
-            ),
+            ) }),
             showing && chat.playbackEnded && chat.suggestions.length > 0 && /* @__PURE__ */ jsxs6("div", { className: "ending", children: [
-              /* @__PURE__ */ jsx6("div", { className: "ending-wash", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx7("div", { className: "ending-wash", "aria-hidden": "true" }),
               /* @__PURE__ */ jsxs6("div", { className: "ending-body", children: [
-                /* @__PURE__ */ jsx6("p", { className: "ending-label", children: "Ask next" }),
-                /* @__PURE__ */ jsx6(SuggestionCards, { suggestions: [...chat.suggestions], label: "Follow-up prompts", onAsk: ask })
+                /* @__PURE__ */ jsx7("p", { className: "ending-label", children: "Ask next" }),
+                /* @__PURE__ */ jsx7(SuggestionCards, { suggestions: [...chat.suggestions], label: "Follow-up prompts", onAsk: ask })
               ] })
             ] })
           ] }),
-          historyOpen && /* @__PURE__ */ jsx6("nav", { ref: historyRef, id: historyId, className: "sheet-popover history", "aria-label": "Prompts this session", children: chat.turns.map((turn, index) => /* @__PURE__ */ jsxs6(
-            "button",
-            {
-              type: "button",
-              className: turn.id === shown?.id ? "current" : void 0,
-              disabled: !turn.completed || !turn.video,
-              onClick: () => {
-                chat.selectTurn(turn.id);
-                setHistoryOpen(false);
+          historyOpen && /* @__PURE__ */ jsxs6("nav", { ref: historyRef, id: historyId, className: "sheet-popover history", role: "dialog", "aria-modal": "true", "aria-label": "History", children: [
+            /* @__PURE__ */ jsxs6("div", { className: "popover-heading", children: [
+              /* @__PURE__ */ jsx7("h2", { children: "History" }),
+              /* @__PURE__ */ jsx7("button", { type: "button", className: "round", "aria-label": "Close history", onClick: closeHistory, children: /* @__PURE__ */ jsx7(Close, {}) })
+            ] }),
+            /* @__PURE__ */ jsx7("h3", { className: "section-label", children: "Current session" }),
+            chat.turns.length === 0 && /* @__PURE__ */ jsx7("p", { className: "history-empty", children: "Your questions will appear here." }),
+            chat.turns.map((turn, index) => /* @__PURE__ */ jsxs6(
+              "button",
+              {
+                type: "button",
+                className: `history-row${turn.id === shown?.id ? " current" : ""}`,
+                "aria-current": turn.id === shown?.id ? true : void 0,
+                disabled: !turn.completed || !turn.video,
+                onClick: () => {
+                  listen.stop();
+                  setDraft("");
+                  setEditing(false);
+                  resumeAfterInput.current = false;
+                  chat.selectTurn(turn.id);
+                  setHistoryOpen(false);
+                },
+                children: [
+                  /* @__PURE__ */ jsx7("span", { className: "index", children: String(index + 1).padStart(2, "0") }),
+                  /* @__PURE__ */ jsxs6("span", { className: "prompt", children: [
+                    turn.prompt,
+                    /* @__PURE__ */ jsx7("small", { children: turn.id === shown?.id ? "Now showing" : turn.completed ? "Play answer" : "Unfinished answer" })
+                  ] })
+                ]
               },
-              children: [
-                /* @__PURE__ */ jsx6("span", { className: "index", children: String(index + 1).padStart(2, "0") }),
-                /* @__PURE__ */ jsx6("span", { className: "prompt", children: turn.prompt })
-              ]
-            },
-            turn.id
-          )) }),
+              turn.id
+            )),
+            savedSessions.length > 0 && /* @__PURE__ */ jsxs6(Fragment4, { children: [
+              /* @__PURE__ */ jsx7("h3", { className: "section-label", children: "Earlier sessions" }),
+              savedSessions.map((session) => /* @__PURE__ */ jsxs6("button", { type: "button", className: "history-row", onClick: () => {
+                listen.stop();
+                setDraft("");
+                setEditing(false);
+                resumeAfterInput.current = false;
+                const completed = chat.turns.filter((turn) => turn.completed && turn.video);
+                setSavedSessions((sessions) => [...completed.length ? [{ id: completed[0].id, turns: completed }] : [], ...sessions.filter((entry) => entry.id !== session.id)].slice(0, 10));
+                restoreSession(session.turns);
+                setHistoryOpen(false);
+                setCaptionsExpanded(false);
+              }, children: [
+                /* @__PURE__ */ jsx7(Replay, {}),
+                /* @__PURE__ */ jsxs6("span", { className: "prompt", children: [
+                  session.turns[0]?.prompt,
+                  /* @__PURE__ */ jsxs6("small", { children: [
+                    session.turns.length,
+                    " ",
+                    session.turns.length === 1 ? "answer" : "answers"
+                  ] })
+                ] })
+              ] }, session.id))
+            ] })
+          ] }),
           settingsOpen && /* @__PURE__ */ jsxs6(
             "div",
             {
@@ -3543,97 +3841,135 @@ function VideoChat({ options = {}, className, welcomeTitle }) {
               className: "sheet-popover settings",
               role: "dialog",
               "aria-label": "Settings",
+              "aria-modal": "true",
               children: [
-                /* @__PURE__ */ jsxs6("fieldset", { children: [
-                  /* @__PURE__ */ jsx6("legend", { children: "Appearance" }),
-                  [["system", "Match system"], ["light", "Light"], ["dark", "Dark"]].map(([value, label]) => /* @__PURE__ */ jsxs6("label", { children: [
-                    /* @__PURE__ */ jsx6("input", { type: "radio", name: appearanceName, checked: value === themeChoice, onChange: () => setThemeChoice(value) }),
-                    /* @__PURE__ */ jsx6("span", { children: /* @__PURE__ */ jsx6("strong", { children: label }) })
-                  ] }, value))
+                /* @__PURE__ */ jsxs6("div", { className: "popover-heading", children: [
+                  /* @__PURE__ */ jsx7("h2", { children: "Settings" }),
+                  /* @__PURE__ */ jsx7("button", { type: "button", className: "round", "aria-label": "Close settings", onClick: closeSettings, children: /* @__PURE__ */ jsx7(Close, {}) })
                 ] }),
-                /* @__PURE__ */ jsx6("p", { className: "settings-note", children: "Visuals and style apply to your next prompt." }),
-                /* @__PURE__ */ jsxs6("fieldset", { children: [
-                  /* @__PURE__ */ jsx6("legend", { children: "Visuals" }),
-                  availableModes.map((option) => /* @__PURE__ */ jsxs6("label", { children: [
-                    /* @__PURE__ */ jsx6("input", { type: "radio", name: visualsName, checked: option.id === selectedMode.id, onChange: () => setModeId(option.id) }),
+                /* @__PURE__ */ jsxs6("fieldset", { className: "playback-options", children: [
+                  /* @__PURE__ */ jsx7("legend", { children: "Watching" }),
+                  /* @__PURE__ */ jsxs6("label", { className: "switch-row", children: [
                     /* @__PURE__ */ jsxs6("span", { children: [
-                      /* @__PURE__ */ jsx6("strong", { children: option.label }),
-                      option.note
+                      /* @__PURE__ */ jsx7("strong", { children: "Subtitles" }),
+                      /* @__PURE__ */ jsx7("small", { children: "Read along with the answer" })
+                    ] }),
+                    /* @__PURE__ */ jsx7("input", { type: "checkbox", role: "switch", checked: captionsOn, onChange: (event) => {
+                      setCaptionsOn(event.target.checked);
+                      setCaptionsExpanded(false);
+                    } })
+                  ] }),
+                  /* @__PURE__ */ jsxs6("label", { className: "switch-row", children: [
+                    /* @__PURE__ */ jsxs6("span", { children: [
+                      /* @__PURE__ */ jsx7("strong", { children: "Keep controls visible" }),
+                      /* @__PURE__ */ jsx7("small", { children: "Keep the input bar on screen" })
+                    ] }),
+                    /* @__PURE__ */ jsx7("input", { type: "checkbox", role: "switch", checked: alwaysShowControls, onChange: (event) => setAlwaysShowControls(event.target.checked) })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs6("fieldset", { className: "visual-options", children: [
+                  /* @__PURE__ */ jsx7("legend", { children: "Video creation" }),
+                  availableModes.map((option) => /* @__PURE__ */ jsxs6("label", { className: "choice-row", children: [
+                    /* @__PURE__ */ jsx7("input", { type: "radio", name: visualsName, checked: option.id === selectedMode.id, onChange: () => setModeId(option.id) }),
+                    /* @__PURE__ */ jsxs6("span", { children: [
+                      /* @__PURE__ */ jsx7("strong", { children: option.label }),
+                      /* @__PURE__ */ jsx7("small", { children: option.note })
                     ] })
                   ] }, option.id))
                 ] }),
-                /* @__PURE__ */ jsxs6("fieldset", { children: [
-                  /* @__PURE__ */ jsx6("legend", { children: "Style" }),
+                /* @__PURE__ */ jsxs6("fieldset", { className: "style-options", children: [
+                  /* @__PURE__ */ jsx7("legend", { children: "Video style" }),
                   themes.map((option) => /* @__PURE__ */ jsxs6("label", { children: [
-                    /* @__PURE__ */ jsx6("input", { type: "radio", name: styleName, checked: option.id === themeId, onChange: () => setThemeId(option.id) }),
-                    /* @__PURE__ */ jsx6("span", { children: /* @__PURE__ */ jsx6("strong", { children: option.label }) })
+                    /* @__PURE__ */ jsx7("input", { type: "radio", name: styleName, checked: option.id === themeId, onChange: () => setThemeId(option.id) }),
+                    /* @__PURE__ */ jsx7("span", { children: /* @__PURE__ */ jsx7("strong", { children: option.label }) })
                   ] }, option.id))
-                ] })
+                ] }),
+                /* @__PURE__ */ jsx7("p", { className: "settings-note", children: "Creation and style changes apply to your next question." })
               ]
             }
           )
         ] }),
-        /* @__PURE__ */ jsx6("div", { className: "panel", children: /* @__PURE__ */ jsxs6("div", { className: "panel-inner", children: [
-          /* @__PURE__ */ jsxs6("div", { className: "line-row", children: [
-            /* @__PURE__ */ jsx6("p", { className: "line", "aria-live": "polite", children: line }),
-            shown?.video && /* @__PURE__ */ jsxs6("button", { type: "button", className: "full-response", onClick: () => setSheetOpen(true), children: [
-              "Full response ",
-              /* @__PURE__ */ jsx6(ChevronUp, {})
-            ] })
-          ] }),
+        /* @__PURE__ */ jsx7("div", { ref: panelRef, className: "panel", "data-input-visible": controls.visible || !captionsOn || !line, children: /* @__PURE__ */ jsxs6("div", { className: "panel-inner", children: [
+          /* @__PURE__ */ jsx7("div", { className: "caption-slot", "data-captions": captionsOn && Boolean(line), "aria-hidden": !captionsOn || !line, children: /* @__PURE__ */ jsx7("div", { className: "caption-clip", children: /* @__PURE__ */ jsxs6(
+            "div",
+            {
+              className: "line-row",
+              "data-expanded": captionsExpanded,
+              "data-actions-visible": captionControls.visible,
+              onPointerMove: captionControls.onPointerEnter,
+              onPointerLeave: captionControls.onPointerLeave,
+              onPointerDown: captionControls.reveal,
+              onFocusCapture: captionControls.onFocusCapture,
+              onBlurCapture: captionControls.onBlurCapture,
+              children: [
+                captionsOn && line && /* @__PURE__ */ jsxs6("div", { className: "caption-actions", children: [
+                  /* @__PURE__ */ jsxs6("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__ */ jsx7(ChevronUp, {})
+                  ] }),
+                  /* @__PURE__ */ jsx7("button", { type: "button", className: "caption-action", "aria-label": "Hide subtitles", onClick: () => {
+                    setCaptionsOn(false);
+                    setCaptionsExpanded(false);
+                  }, children: /* @__PURE__ */ jsx7(Close, {}) })
+                ] }),
+                captionsExpanded ? /* @__PURE__ */ jsx7("div", { className: "expanded-captions", role: "region", tabIndex: 0, "aria-label": "Expanded subtitles", children: fullTranscript.map((entry, index) => /* @__PURE__ */ jsx7("p", { children: entry }, index)) }) : /* @__PURE__ */ jsx7("p", { className: "line", "aria-live": "polite", children: line })
+              ]
+            }
+          ) }) }),
           (chat.error || listen.error) && /* @__PURE__ */ jsxs6("p", { className: "error", role: "status", children: [
-            /* @__PURE__ */ jsx6(Warning, {}),
-            /* @__PURE__ */ jsx6("span", { children: chat.error?.message ?? listen.error })
+            /* @__PURE__ */ jsx7(Warning, {}),
+            /* @__PURE__ */ jsx7("span", { children: chat.error?.message ?? listen.error })
           ] }),
-          /* @__PURE__ */ jsxs6("form", { className: "composer", onSubmit: (event) => {
-            event.preventDefault();
-            ask(draft);
-          }, children: [
-            /* @__PURE__ */ jsx6(Waveform, { active: listen.listening || chat.speaking && !chat.muted && status !== "paused", listening: listen.listening }),
-            /* @__PURE__ */ jsx6("label", { className: "sr-only", htmlFor: promptId, children: "Prompt" }),
-            /* @__PURE__ */ jsx6(
-              "textarea",
-              {
-                id: promptId,
-                ref: inputRef,
-                rows: 1,
-                value: draft,
-                placeholder: listen.listening ? "Listening\u2026" : listen.thinking ? "Working out what you said\u2026" : status === "narrating" ? "Talking \u2014 type to jump in\u2026" : chat.turns.length > 0 ? "Ask a follow-up\u2026" : "Ask anything\u2026",
-                onChange: (event) => setDraft(event.target.value),
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" && !event.shiftKey) {
-                    event.preventDefault();
-                    ask(draft);
+          /* @__PURE__ */ jsxs6("div", { ref: composerRef, className: "conversation-composer", "data-editing": editing, ...controlEvents, children: [
+            (listen.listening || listen.thinking) && /* @__PURE__ */ jsx7("div", { className: "composer-meta", children: /* @__PURE__ */ jsx7("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__ */ jsxs6("form", { className: "composer", "aria-label": "Ask a question", onSubmit: (event) => {
+              event.preventDefault();
+              ask(draft);
+            }, children: [
+              transport && /* @__PURE__ */ jsx7("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__ */ jsx7(Waveform, { active: listen.listening || chat.speaking && !chat.muted && status !== "paused", listening: listen.listening }),
+              /* @__PURE__ */ jsx7("label", { className: "sr-only", htmlFor: promptId, children: "Prompt" }),
+              /* @__PURE__ */ jsx7(
+                "textarea",
+                {
+                  id: promptId,
+                  ref: inputRef,
+                  rows: 1,
+                  value: draft,
+                  placeholder: listen.listening ? "Listening\u2026" : chat.turns.length ? "Ask a follow-up\u2026" : "Ask anything\u2026",
+                  onFocus: () => {
+                    if (!editing) beginInput();
+                  },
+                  onChange: (event) => {
+                    setDraft(event.target.value);
+                    event.target.style.height = "auto";
+                    event.target.style.height = `${Math.min(event.target.scrollHeight, 120)}px`;
+                  },
+                  onKeyDown: (event) => {
+                    if (event.key === "Escape") {
+                      event.stopPropagation();
+                      cancelInput();
+                    }
+                    if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
+                      event.preventDefault();
+                      ask(draft);
+                    }
                   }
                 }
-              }
-            ),
-            transport && /* @__PURE__ */ jsx6("button", { type: "button", className: "ghost transport", "aria-label": transport.label, onClick: transport.action, children: transport.icon }),
-            listen.supported && /* @__PURE__ */ jsx6(
-              "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: listen.toggle,
-                children: /* @__PURE__ */ jsx6(Mic, {})
-              }
-            ),
-            /* @__PURE__ */ jsx6("button", { type: "submit", className: "send", "aria-label": "Ask", disabled: !draft.trim() || status === "drawing", children: /* @__PURE__ */ jsx6(Send, {}) })
-          ] })
-        ] }) }),
-        sheetOpen && shown && /* @__PURE__ */ jsxs6("div", { className: "sheet-layer", children: [
-          /* @__PURE__ */ jsx6("button", { type: "button", className: "scrim", tabIndex: -1, "aria-hidden": "true", onClick: () => setSheetOpen(false) }),
-          /* @__PURE__ */ jsxs6("article", { ref: sheetRef, className: "sheet", role: "dialog", "aria-modal": "true", "aria-labelledby": responseTitleId, children: [
-            /* @__PURE__ */ jsxs6("header", { children: [
-              /* @__PURE__ */ jsx6("h1", { id: responseTitleId, children: shown.prompt }),
-              /* @__PURE__ */ jsx6("button", { type: "button", className: "round", "aria-label": "Close the full response", onClick: () => setSheetOpen(false), children: /* @__PURE__ */ jsx6(Close, {}) })
-            ] }),
-            /* @__PURE__ */ jsx6("div", { className: "sheet-body", children: chat.transcript.map((entry, index) => /* @__PURE__ */ jsx6("p", { children: entry }, `${index}-${entry}`)) })
-          ] })
-        ] })
+              ),
+              listen.supported && /* @__PURE__ */ jsx7("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__ */ jsx7(Mic, {}) }),
+              /* @__PURE__ */ jsx7("button", { type: "submit", className: "send", "aria-label": "Ask", disabled: !draft.trim() || listen.thinking, children: /* @__PURE__ */ jsx7(Send, {}) }),
+              editing && /* @__PURE__ */ jsx7("button", { type: "button", className: "ghost", "aria-label": "Cancel question", onClick: cancelInput, children: /* @__PURE__ */ jsx7(Close, {}) })
+            ] })
+          ] }),
+          !showing && chat.turns.length === 0 && /* @__PURE__ */ jsx7("p", { className: "dock-hint", children: "Speak or type. See where it takes you." })
+        ] }) })
       ]
     }
   );
@@ -3643,7 +3979,5 @@ export {
   VideoError,
   VideoPlayer,
   createVideoChatVoice,
-  useNarration,
-  useVideo,
   useVideoChat
 };