chore: deploy private lightloom build

frontend/css/immersive.css

@@ -160,6 +160,23 @@ html, body { height: 100%; margin: 0; background: var(--atmo); color: var(--ink)
 .about__close { position: absolute; top: 14px; right: 16px; background: none; border: 0; color: var(--ink-soft); font-size: 18px; cursor: pointer; }
 
 body.reduced-motion .mic__ring, body.reduced-motion .orch.is-active i { animation: none; }
+/* Director's Cut keepsake overlay — the MiniCPM-V-named fly-through film of your finished world. */
+.keepsake { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
+  background: rgba(4, 5, 9, 0.82); backdrop-filter: blur(6px); padding: 4vmin; }
+.keepsake[hidden] { display: none; }
+.keepsake__panel { position: relative; max-width: min(94vw, 1100px); width: 100%;
+  display: flex; flex-direction: column; align-items: center; gap: 14px;
+  background: rgba(12, 14, 20, 0.92); border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 16px; padding: 22px; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); }
+.keepsake__close { position: absolute; top: 12px; right: 14px; background: none; border: 0;
+  color: var(--ink-soft, #cbd0db); font-size: 18px; cursor: pointer; }
+.keepsake__title { font-family: var(--serif, "Fraunces", Georgia, serif); font-style: italic;
+  font-size: clamp(20px, 3.4vw, 34px); color: var(--gold, #e8c98a); text-align: center; }
+.keepsake__video { width: 100%; max-height: 64vh; border-radius: 10px; background: #000; display: block; }
+.keepsake__dl { color: var(--ink, #f3f4f7); text-decoration: none; font-size: 15px;
+  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 999px; padding: 9px 20px; transition: background 0.15s ease; }
+.keepsake__dl:hover { background: rgba(255, 255, 255, 0.08); }
+
 @media (max-width: 640px) {
   .orchestra { display: none; }
   .mic { width: 104px; height: 104px; }

frontend/index.html

@@ -92,6 +92,7 @@
     <!-- Bottom controls (appear once a world is live). -->
     <div id="controls" class="controls" hidden>
       <button id="mic-mini" class="ctl" type="button" title="Speak more" aria-label="Speak more">🎙</button>
+      <button id="save-btn" class="ctl" type="button" title="Save your world" aria-label="Save your world">🎬</button>
       <button id="stop-btn" class="ctl" type="button" title="New world" aria-label="New world">⟲</button>
       <button id="rm-btn" class="ctl" type="button" title="Reduce motion" aria-label="Reduce motion">♿</button>
       <button id="about-btn" class="ctl" type="button" title="About" aria-label="About">ⓘ</button>
@@ -120,6 +121,10 @@
       </div>
     </section>
 
+    <!-- Director's Cut keepsake: the MiniCPM-V-named fly-through film of your finished world (injected by
+         controller._showKeepsake on the 🎬 button). Independent post-process; never blocks the live world. -->
+    <section id="keepsake" class="keepsake" hidden role="dialog" aria-modal="true" aria-label="Your saved world"></section>
+
     <!-- ES modules in dependency order. The corridor controller wires everything. -->
     <script type="module" src="/frontend/js/api.js"></script>
     <script type="module" src="/frontend/js/recorder.js"></script>

frontend/js/api.js

@@ -153,6 +153,37 @@ const api = {
     return { session, done: true };
   },
 
+  /**
+   * DIRECTOR'S CUT keepsake. Over the FINISHED session panorama (already on disk under `session`), run the
+   * post-process: the MiniCPM-V-4.6 Art Director names it from the pixels, then a depth-parallax fly-through
+   * is rendered to world.mp4. Streams {stitched,titled,rendering,encoding,ready} (ready carries .video + the
+   * .title). Short-lived per call; does NOT touch the live _job handle. Independent of the live painter.
+   * @returns {Promise<{session:string, done:boolean}>}
+   */
+  async streamPostprocess(session, lang = "en", onEvent) {
+    const emit = typeof onEvent === "function" ? onEvent : () => {};
+    let client;
+    try {
+      client = await this.connect();
+    } catch (err) {
+      emit({ stage: "postprocess_error", error: `connect_failed: ${shortErr(err)}` });
+      return { session, done: false };
+    }
+    try {
+      const job = client.submit("/postprocess", { session: session || "", lang: lang || "en" });
+      for await (const msg of job) {
+        if (!msg || msg.type !== "data") continue;
+        const ev = asEvent(msg.data);
+        if (!ev || typeof ev !== "object") continue;
+        if (ev.session) session = ev.session;
+        try { emit(ev); } catch (e) { console.error("[LL.api] postprocess onEvent threw", e); }
+      }
+    } catch (err) {
+      emit({ stage: "postprocess_error", error: `stream_failed: ${shortErr(err)}` });
+    }
+    return { session, done: true };
+  },
+
   /**
    * Transcribe a base64 WAV (the narrator's mic audio) via Cohere Transcribe.
    * Resolves with {text, error}. Used by LL.recorder; the transcript then drives

frontend/js/controller.js

@@ -149,6 +149,7 @@ const controller = {
     });
     on("showcase-btn", "click", () => this.playShowcase());
     on("stop-btn", "click", () => this.reset());
+    on("save-btn", "click", () => this._saveWorld());
     on("rm-btn", "click", () => this.setReducedMotion(!this.reducedMotion));
     on("about-btn", "click", () => this._about(true));
     on("about-close", "click", () => this._about(false));
@@ -279,6 +280,50 @@ const controller = {
     }
   },
 
+  // ---- DIRECTOR'S CUT keepsake: save the finished world as a named fly-through MP4 (post-process; the live
+  // world keeps running). Captures _liveSession WITHOUT resetting it, so you can save AND keep speaking. ----
+  _saveWorld() {
+    const session = this._liveSession;
+    const es = this.lang === "es";
+    if (!session) { this._status(es ? "Habla primero para crear un mundo" : "Speak first to create a world", 2800); return; }
+    this._status(es ? "Creando tu recuerdo…" : "Crafting your keepsake…", 0);
+    LL.api.streamPostprocess(session, this.lang, (ev) => {
+      switch (ev && ev.stage) {
+        case "stitched": this._status(es ? "Uniendo tu mundo…" : "Stitching your world…", 0); break;
+        case "titled": if (ev.title) this._setTitle(ev.title); this._status(es ? "Nombrando y filmando…" : "Naming & filming…", 0); break;
+        case "rendering": this._status((es ? "Renderizando… " : "Rendering… ") + Math.round((100 * (ev.frame || 0)) / (ev.total || 1)) + "%", 0); break;
+        case "encoding": this._status(es ? "Codificando la película…" : "Encoding the film…", 0); break;
+        case "ready": this._showKeepsake(ev); break;
+        case "postprocess_error": case "quota_exceeded": case "error":
+          this._status(es ? "No se pudo guardar (intenta de nuevo)" : "Couldn't save (try again)", 3400); break;
+        default: break; // seer_skipped etc. -> the MP4 still renders with the existing title
+      }
+    });
+  },
+
+  /** Show the keepsake overlay with the named fly-through <video> + a download link. Built with DOM nodes
+   *  (not innerHTML) so the model-authored title can never inject markup. */
+  _showKeepsake(ev) {
+    this._status("");
+    const card = document.getElementById("keepsake");
+    if (!card) return;
+    card.textContent = "";
+    const panel = document.createElement("div"); panel.className = "keepsake__panel";
+    const close = document.createElement("button");
+    close.className = "keepsake__close"; close.type = "button"; close.setAttribute("aria-label", "Close"); close.textContent = "✕";
+    close.addEventListener("click", () => { const v = card.querySelector("video"); if (v) { try { v.pause(); } catch (_) {} } card.hidden = true; });
+    const ttl = document.createElement("div"); ttl.className = "keepsake__title"; ttl.textContent = ev.title || "";
+    const video = document.createElement("video");
+    video.className = "keepsake__video"; video.src = ev.video || "";
+    video.controls = true; video.autoplay = true; video.loop = true; video.muted = true; video.playsInline = true;
+    const dl = document.createElement("a");
+    dl.className = "keepsake__dl"; dl.href = ev.video || ""; dl.setAttribute("download", "lightloom-world.mp4");
+    dl.textContent = this.lang === "es" ? "↓ Descargar tu mundo" : "↓ Download your world";
+    panel.append(close, ttl, video, dl);
+    card.append(panel);
+    card.hidden = false;
+  },
+
   _onEvent(ev) {
     if (!ev || typeof ev !== "object") return;
     // Drop ghost WORLD events from a session that is no longer active. The live generator keeps