mulmoclaude 1.2.0 → 1.3.0

package/src/plugins/presentMulmoScript/View.vue

@@ -1,1949 +0,0 @@
-<template>
-  <div class="h-full bg-white flex flex-col overflow-hidden">
-    <!-- Header -->
-    <div class="flex items-start justify-between px-6 py-4 border-b border-gray-100 shrink-0">
-      <div class="min-w-0 flex-1">
-        <h2 class="text-lg font-semibold text-gray-800 truncate" data-testid="mulmo-script-title">
-          {{ script.title || "Untitled Script" }}
-        </h2>
-        <p v-if="script.description" class="text-sm text-gray-500 mt-0.5 truncate" data-testid="mulmo-script-description">
-          {{ script.description }}
-        </p>
-        <div class="flex items-center gap-3 mt-1 text-xs text-gray-400">
-          <span>{{ t("pluginMulmoScript.beatCount", beats.length, { named: { count: beats.length } }) }}</span>
-          <span v-if="script.lang">{{ script.lang }}</span>
-          <span v-if="filePath" class="truncate">{{ filePath }}</span>
-        </div>
-      </div>
-      <div class="ml-4 shrink-0 flex items-center gap-2">
-        <!-- Play presentation: opens the lightbox at beat 0 and starts
-             audio. Same gating as Download Movie — only when a movie has
-             been generated, which is our proxy for "every beat has both
-             an image and audio on disk". Green outline + green icon
-             share the visual idiom with the (filled) Download button so
-             both completed-artifact actions read as the same family.
-             `isPlayReady` ensures we don't open the lightbox before the
-             first beat's image (and audio, if it has text) finish their
-             async load — moviePath can be set while loadExistingBeatImage
-             is still in flight. -->
-        <button
-          v-if="moviePath && !movieGenerating"
-          class="h-8 w-8 flex items-center justify-center rounded border border-green-600 text-green-600 hover:bg-green-50 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-          :disabled="!isPlayReady"
-          :title="t('pluginMulmoScript.playPresentation')"
-          :aria-label="t('pluginMulmoScript.playPresentation')"
-          @click="playPresentation"
-        >
-          <span class="material-icons text-base">play_arrow</span>
-        </button>
-        <!-- Download Movie: bearer-authenticated blob fetch, then a
-             synthetic <a download> click. The natural <a href download>
-             approach can't attach the Authorization header, which would
-             have forced a bearer-auth exemption on the route — the
-             reviewer's P1 was that any sibling process could then read
-             a caller-controlled movie path. Going through apiFetchRaw
-             (auto-attaches bearer) keeps the auth boundary intact. -->
-        <button
-          v-if="moviePath && !movieGenerating"
-          class="h-8 px-2.5 flex items-center gap-1 rounded bg-green-600 hover:bg-green-700 text-white text-sm disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
-          :disabled="movieDownloading"
-          data-testid="mulmo-script-download-movie-button"
-          @click="downloadMovie"
-        >
-          <span class="material-icons text-base">download</span>
-          <span>{{ t("pluginMulmoScript.movie") }}</span>
-        </button>
-        <!-- Regenerate Movie (icon-only): collapses to a square once a
-             movie exists — the adjacent Download / Play already make
-             the subject clear, so the "Movie" label only adds noise. -->
-        <button
-          v-if="moviePath && !movieGenerating"
-          class="h-8 w-8 flex items-center justify-center rounded border border-gray-200 text-gray-600 hover:bg-gray-100 transition-colors"
-          :title="t('pluginMulmoScript.regenerateMovie')"
-          :aria-label="t('pluginMulmoScript.regenerateMovie')"
-          data-testid="mulmo-script-regenerate-movie-button"
-          @click="generateMovie"
-        >
-          <span class="material-icons text-base">refresh</span>
-        </button>
-        <!-- Generate Movie (pill): no movie yet, or one is currently
-             generating. Keeps the label so first-time users know what
-             they're triggering. -->
-        <button
-          v-else
-          class="h-8 px-2.5 flex items-center gap-1 text-sm rounded border border-gray-200 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-          :disabled="movieGenerating"
-          data-testid="mulmo-script-generate-movie-button"
-          @click="generateMovie"
-        >
-          <svg v-if="movieGenerating" class="animate-spin w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
-          </svg>
-          <span v-if="movieGenerating">{{ t("pluginMulmoScript.generating") }}</span>
-          <template v-else>
-            <span class="material-icons text-sm">refresh</span>
-            <span>{{ t("pluginMulmoScript.movie") }}</span>
-          </template>
-        </button>
-        <!-- PDF (#1614): same Generate / Download / Regenerate pattern
-             as the Movie cluster above, kept structurally separate so
-             the two outputs can be requested independently and report
-             status independently. -->
-        <button
-          v-if="pdfPath && !pdfGenerating"
-          class="h-8 px-2.5 flex items-center gap-1 rounded bg-red-600 hover:bg-red-700 text-white text-sm disabled:opacity-60 disabled:cursor-not-allowed transition-colors"
-          :disabled="pdfDownloading"
-          data-testid="mulmo-script-download-pdf-button"
-          @click="downloadPdf"
-        >
-          <span class="material-icons text-base">download</span>
-          <span>{{ t("pluginMulmoScript.pdf") }}</span>
-        </button>
-        <button
-          v-if="pdfPath && !pdfGenerating"
-          class="h-8 w-8 flex items-center justify-center rounded border border-gray-200 text-gray-600 hover:bg-gray-100 transition-colors"
-          :title="t('pluginMulmoScript.regeneratePdf')"
-          :aria-label="t('pluginMulmoScript.regeneratePdf')"
-          data-testid="mulmo-script-regenerate-pdf-button"
-          @click="generatePdf"
-        >
-          <span class="material-icons text-base">refresh</span>
-        </button>
-        <button
-          v-else
-          class="h-8 px-2.5 flex items-center gap-1 text-sm rounded border border-gray-200 text-gray-600 hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
-          :disabled="pdfGenerating"
-          data-testid="mulmo-script-generate-pdf-button"
-          @click="generatePdf"
-        >
-          <svg v-if="pdfGenerating" class="animate-spin w-4 h-4 shrink-0" viewBox="0 0 24 24" fill="none">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
-          </svg>
-          <span v-if="pdfGenerating">{{ t("pluginMulmoScript.generatingPdf") }}</span>
-          <template v-else>
-            <span class="material-icons text-sm">picture_as_pdf</span>
-            <span>{{ t("pluginMulmoScript.pdf") }}</span>
-          </template>
-        </button>
-      </div>
-    </div>
-
-    <!--
-      Inline error chip for movie-generation failures (#1197).
-      Previously the catch arm of `generateMovie` raised an `alert()` —
-      blocking, no retry path, and many users just dismissed the modal
-      and saw a stalled spinner with no explanation. The chip stays
-      visible until the next generate attempt clears it.
-    -->
-    <div
-      v-if="movieError"
-      data-testid="mulmo-script-movie-error-chip"
-      class="bg-red-50 border border-red-200 text-red-800 text-xs px-3 py-2 mx-4 mt-3 mb-1 rounded flex items-start gap-2"
-    >
-      <span class="material-icons text-base shrink-0 mt-px">error_outline</span>
-      <div class="flex-1 min-w-0">
-        <div class="font-medium">{{ t("pluginMulmoScript.movieGenerationFailed") }}</div>
-        <div class="break-words whitespace-pre-wrap mt-0.5">{{ movieError }}</div>
-      </div>
-      <button
-        class="shrink-0 h-7 px-2 text-xs rounded border border-red-300 text-red-700 hover:bg-red-100 disabled:opacity-50"
-        :disabled="movieGenerating"
-        data-testid="mulmo-script-movie-retry-button"
-        @click="generateMovie"
-      >
-        {{ t("pluginMulmoScript.retry") }}
-      </button>
-    </div>
-
-    <!-- Characters section -->
-    <div v-if="characterKeys.length > 0" class="border-b border-gray-100 shrink-0 px-4 py-3">
-      <div class="flex items-center justify-between mb-2">
-        <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">{{ t("pluginMulmoScript.characters") }}</span>
-        <button
-          class="px-2 py-0.5 text-xs rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50"
-          :disabled="movieGenerating || anyBeatRendering || characterKeys.every((key) => charRenderState[key] === 'rendering')"
-          @click="generateAllCharacters"
-        >
-          {{ t("pluginMulmoScript.generateAll") }}
-        </button>
-      </div>
-      <div class="flex gap-3 flex-wrap">
-        <div v-for="key in characterKeys" :key="key" class="flex flex-col items-center gap-1 w-36">
-          <!-- Character thumbnail -->
-          <div
-            class="relative w-36 h-36 rounded-lg border overflow-hidden bg-gray-50 flex items-center justify-center transition-colors"
-            :class="charDragOver[key] ? 'border-blue-400 bg-blue-50' : 'border-gray-200'"
-            @dragover="onCharDragOver($event, key)"
-            @dragleave="onCharDragLeave(key)"
-            @drop="onCharDrop($event, key)"
-          >
-            <img
-              v-if="charImages[key]"
-              :src="charImages[key]"
-              class="w-full h-full object-cover cursor-zoom-in"
-              :alt="key"
-              @click="openCharacterLightbox(key)"
-            />
-            <template v-else-if="charRenderState[key] === 'rendering'">
-              <svg class="animate-spin w-4 h-4 text-green-400" viewBox="0 0 24 24" fill="none">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
-              </svg>
-            </template>
-            <template v-else-if="charRenderState[key] === 'error'">
-              <span class="text-xs text-red-400 text-center px-1">{{ charErrors[key] }}</span>
-            </template>
-            <template v-else>
-              <span class="text-xs text-gray-300 text-center px-1 leading-tight">{{ characterPrompt(key) }}</span>
-            </template>
-            <!-- Permanent drop hint -->
-            <div v-if="!charDragOver[key]" class="absolute bottom-0 inset-x-0 text-center text-xs text-gray-400 bg-white/70 py-0.5 pointer-events-none">
-              {{ t("pluginMulmoScript.orDropImage") }}
-            </div>
-            <!-- Drop overlay -->
-            <div v-if="charDragOver[key]" class="absolute inset-0 flex items-center justify-center bg-blue-50/80 pointer-events-none">
-              <span class="text-xs text-blue-500 font-medium">{{ t("pluginMulmoScript.drop") }}</span>
-            </div>
-            <!-- Regenerate button -->
-            <button
-              v-if="charImages[key] && charRenderState[key] !== 'rendering'"
-              class="absolute top-0.5 right-0.5 px-1 py-0.5 text-xs rounded border bg-white"
-              :class="
-                movieGenerating || anyBeatRendering ? 'border-yellow-400 text-yellow-500 cursor-not-allowed' : 'border-gray-400 text-gray-600 hover:bg-gray-50'
-              "
-              :disabled="movieGenerating || anyBeatRendering"
-              @click.stop="renderCharacter(key, true)"
-            >
-              <span v-if="movieGenerating || anyBeatRendering" class="inline-block animate-spin">↺</span>
-              <span v-else>↺</span>
-            </button>
-            <!-- Generate button -->
-            <button
-              v-else-if="!charImages[key] && charRenderState[key] !== 'rendering'"
-              class="absolute top-0.5 right-0.5 px-1 py-0.5 text-xs rounded border bg-white"
-              :class="
-                movieGenerating || anyBeatRendering ? 'border-yellow-400 text-yellow-500 cursor-not-allowed' : 'border-blue-400 text-blue-600 hover:bg-blue-50'
-              "
-              :disabled="movieGenerating || anyBeatRendering"
-              @click.stop="renderCharacter(key, false)"
-            >
-              <svg v-if="movieGenerating || anyBeatRendering" class="animate-spin w-3 h-3" viewBox="0 0 24 24" fill="none">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
-              </svg>
-              <span v-else>{{ t("pluginMulmoScript.gen") }}</span>
-            </button>
-          </div>
-          <span class="text-xs text-gray-600 text-center truncate w-full">{{ key }}</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Deck editor (#1575): every beat is a slide → mount the
-         interactive deck editor from @mulmocast/deck-web. The Vue
-         component is lazy-loaded via defineAsyncComponent, so users
-         whose scripts aren't pure decks never pay the bundle cost. -->
-    <div v-if="isDeck" class="flex-1 overflow-hidden" data-testid="mulmo-script-deck-editor">
-      <MulmoScriptDeckEditor :script="deckScriptInput" layout="compact" @update:script="onDeckUpdate" />
-    </div>
-
-    <!-- Beat list (fallback when the script has any non-slide beat) -->
-    <div v-else ref="beatListEl" class="flex-1 overflow-y-auto p-2 space-y-1.5">
-      <div v-for="(beat, index) in beats" :key="index" class="rounded-lg border border-gray-200 overflow-hidden">
-        <!-- Beat body: thumbnail + narration side by side -->
-        <div class="flex gap-3 items-stretch">
-          <!-- Thumbnail -->
-          <div
-            class="relative shrink-0 w-[45%] overflow-hidden bg-gray-50 transition-colors"
-            :class="beatDragOver[index] ? 'bg-blue-50' : ''"
-            @dragover="onBeatDragOver($event, index)"
-            @dragleave="onBeatDragLeave(index)"
-            @drop="onBeatDrop($event, index)"
-          >
-            <!-- Inline player for the beat's generated video clip.
-                 Replaces the thumbnail while open; the close button
-                 returns to the still image. -->
-            <template v-if="beatMovieOpen[index] && beatMovieUrls[index]">
-              <video :src="beatMovieUrls[index]" class="w-full object-contain" controls autoplay :data-testid="`mulmo-script-beat-movie-player-${index}`" />
-              <button
-                class="absolute top-1.5 right-1.5 flex items-center justify-center w-6 h-6 rounded border border-gray-400 text-gray-600 bg-white hover:bg-gray-50"
-                :title="t('common.close')"
-                :aria-label="t('common.close')"
-                :data-testid="`mulmo-script-beat-movie-close-${index}`"
-                @click.stop="closeBeatMovie(index)"
-              >
-                <span class="material-icons text-sm">close</span>
-              </button>
-            </template>
-            <template v-else>
-              <img
-                v-if="renderedImages[index]"
-                :src="renderedImages[index]"
-                class="w-full object-contain cursor-zoom-in"
-                :alt="`Beat ${index + 1}`"
-                @click="openLightbox(index)"
-              />
-              <!-- Play overlay: shown when the beat-movie probe found a
-                   generated clip for this beat. Blob is fetched lazily
-                   on first click (bearer-auth), hence the spinner. -->
-              <button
-                v-if="renderedImages[index] && beatMovies[index]"
-                class="absolute inset-0 m-auto w-12 h-12 flex items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70"
-                :title="t('pluginMulmoScript.play')"
-                :aria-label="t('pluginMulmoScript.play')"
-                :data-testid="`mulmo-script-beat-movie-play-${index}`"
-                @click.stop="playBeatMovie(index)"
-              >
-                <svg v-if="beatMovieLoading[index]" class="animate-spin w-5 h-5" viewBox="0 0 24 24" fill="none">
-                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
-                </svg>
-                <span v-else class="material-icons text-3xl">play_arrow</span>
-              </button>
-              <button
-                v-if="renderedImages[index] && renderState[index] !== 'rendering'"
-                class="absolute top-1.5 right-1.5 flex items-center gap-1 px-2 py-0.5 text-xs rounded border border-gray-400 text-gray-600 bg-white hover:bg-gray-50 disabled:opacity-60 disabled:cursor-not-allowed"
-                :disabled="movieGenerating"
-                @click.stop="regenerateBeat(index)"
-              >
-                ↺
-              </button>
-              <div v-else-if="!renderedImages[index]" class="w-full aspect-video flex flex-col items-center justify-center gap-1 p-2">
-                <template v-if="renderState[index] === 'rendering' || (movieGenerating && !renderedImages[index] && effectiveBeat(index).imagePrompt)">
-                  <svg class="animate-spin w-4 h-4 text-green-400" viewBox="0 0 24 24" fill="none">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
-                  </svg>
-                  <span class="text-xs text-green-500">{{ t("pluginMulmoScript.rendering") }}</span>
-                </template>
-                <template v-else-if="renderState[index] === 'error'">
-                  <span class="text-xs text-red-400 text-center">{{ renderErrors[index] }}</span>
-                </template>
-                <template v-else>
-                  <span v-if="effectiveBeat(index).imagePrompt" class="text-xs text-gray-400 text-center italic leading-relaxed px-1">{{
-                    effectiveBeat(index).imagePrompt
-                  }}</span>
-                  <span v-else class="text-xs text-gray-300">{{ beat.image?.type ?? "—" }}</span>
-                </template>
-              </div>
-            </template>
-            <!-- Beat drop hint / overlay -->
-            <div v-if="beatDragOver[index]" class="absolute inset-0 flex items-center justify-center bg-blue-50/80 pointer-events-none">
-              <span class="text-xs text-blue-500 font-medium">{{ t("pluginMulmoScript.drop") }}</span>
-            </div>
-            <div
-              v-else-if="!renderedImages[index] && renderState[index] !== 'rendering'"
-              class="absolute bottom-0 inset-x-0 text-center text-xs text-gray-400 bg-white/70 py-0.5 pointer-events-none"
-            >
-              {{ t("pluginMulmoScript.orDropImage") }}
-            </div>
-            <!-- Generate button for any beat without a rendered image.
-                 renderBeat works for every beat type: imagePrompt /
-                 typed image beats render directly, moviePrompt beats
-                 get a frame extracted from the generated clip, and
-                 text-only beats fall back to a prompt derived from
-                 the narration text (mulmocast prompt.js). -->
-            <button
-              v-if="!renderedImages[index] && renderState[index] !== 'rendering' && !movieGenerating"
-              class="absolute top-1.5 right-1.5 flex items-center gap-1 px-2 py-0.5 text-xs rounded border border-blue-400 text-blue-600 bg-white hover:bg-blue-50"
-              @click="renderBeat(index)"
-            >
-              {{ t("pluginMulmoScript.generate") }}
-            </button>
-          </div>
-
-          <!-- Narration text -->
-          <div class="flex flex-col flex-1 min-w-0 px-2 py-1.5">
-            <span class="text-sm text-gray-800 leading-relaxed">{{ effectiveBeat(index).text }}</span>
-            <div class="flex justify-between mt-auto pt-1">
-              <!-- Audio controls -->
-              <div class="flex items-center gap-1">
-                <template v-if="audioState[index] === 'generating' || (movieGenerating && !beatAudios[index] && effectiveBeat(index).text)">
-                  <svg class="animate-spin w-3 h-3 text-green-400" viewBox="0 0 24 24" fill="none">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8H4z" />
-                  </svg>
-                </template>
-                <button
-                  v-else-if="beatAudios[index]"
-                  class="text-xs px-2 py-0.5 rounded border"
-                  :class="playingAudio?.index === index ? 'border-red-400 text-red-600 hover:bg-red-50' : 'border-green-400 text-green-600 hover:bg-green-50'"
-                  @click="playAudio(index)"
-                >
-                  {{ playingAudio?.index === index ? t("pluginMulmoScript.stop") : t("pluginMulmoScript.play") }}
-                </button>
-                <template v-else-if="audioErrors[index]">
-                  <span class="text-xs text-red-400 truncate min-w-0 max-w-[20rem]" :title="audioErrors[index]">
-                    {{ t("pluginMulmoScript.errPrefix") }} {{ audioErrors[index] }}
-                  </span>
-                  <button
-                    v-if="effectiveBeat(index).text"
-                    class="text-xs px-2 py-0.5 rounded border border-gray-300 text-gray-500 hover:bg-gray-50 disabled:opacity-50"
-                    :disabled="movieGenerating"
-                    @click="generateAudio(index)"
-                  >
-                    ↺
-                  </button>
-                </template>
-                <button
-                  v-else-if="effectiveBeat(index).text"
-                  class="text-xs px-2 py-0.5 rounded border border-gray-300 text-gray-500 hover:bg-gray-50"
-                  @click="generateAudio(index)"
-                >
-                  {{ t("pluginMulmoScript.generateAudio") }}
-                </button>
-              </div>
-              <button
-                class="text-gray-400 hover:text-gray-600"
-                :title="sourceOpen[index] ? 'Hide source' : 'Show source'"
-                :data-testid="`mulmo-script-beat-source-toggle-${index}`"
-                @click="toggleSource(index)"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  class="w-3.5 h-3.5"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                  stroke-linecap="round"
-                  stroke-linejoin="round"
-                >
-                  <polyline points="16 18 22 12 16 6" />
-                  <polyline points="8 6 2 12 8 18" />
-                </svg>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- Source editor -->
-        <div v-if="sourceOpen[index]" class="border-t border-gray-100">
-          <textarea
-            v-model="sourceText[index]"
-            class="w-full text-xs text-gray-600 bg-gray-50 p-2 font-mono resize-none"
-            :class="isValidBeat(index) ? 'outline-none' : 'outline outline-2 outline-red-400'"
-            rows="8"
-            spellcheck="false"
-            :data-testid="`mulmo-script-beat-source-textarea-${index}`"
-          />
-          <div class="flex items-center justify-end gap-2 px-2 pb-2">
-            <span v-if="beatSaveErrors[index]" class="text-xs text-red-600" role="alert">{{
-              t(beatSaveErrors[index].kind === "invalidJson" ? "pluginMulmoScript.saveErrorInvalidJson" : "pluginMulmoScript.saveErrorSaveFailed", {
-                error: beatSaveErrors[index].error,
-              })
-            }}</span>
-            <button
-              class="px-2 py-1 text-xs rounded border"
-              :class="
-                isValidBeat(index) && !beatSaving[index]
-                  ? 'border-blue-400 text-blue-600 hover:bg-blue-50 cursor-pointer'
-                  : 'border-gray-200 text-gray-300 cursor-not-allowed'
-              "
-              :disabled="!isValidBeat(index) || !!beatSaving[index]"
-              :data-testid="`mulmo-script-beat-update-button-${index}`"
-              @click="updateBeat(index)"
-            >
-              {{ beatSaving[index] ? t("pluginMulmoScript.saving") : t("pluginMulmoScript.update") }}
-            </button>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="beats.length === 0" class="flex items-center justify-center h-32 text-gray-400 text-sm">{{ t("pluginMulmoScript.noBeats") }}</div>
-    </div>
-
-    <!-- Bottom bar: Edit Script Source + Copy -->
-    <div class="bottom-bar-wrapper">
-      <details ref="sourceDetails" class="script-source" @toggle="onSourceToggle(($event.target as HTMLDetailsElement).open)">
-        <summary>{{ t("pluginMulmoScript.editSource") }}</summary>
-        <textarea
-          v-model="editableSource"
-          class="script-editor"
-          :class="{ 'script-editor-invalid': sourceChanged && !sourceValid }"
-          spellcheck="false"
-        ></textarea>
-        <div class="editor-actions">
-          <button class="apply-btn" :disabled="!sourceChanged || !sourceValid" @click="applySource">{{ t("pluginMulmoScript.applyChanges") }}</button>
-          <button class="cancel-btn" @click="cancelSourceEdit">{{ t("common.cancel") }}</button>
-        </div>
-      </details>
-      <button v-show="!editing" class="copy-btn" :title="copied ? 'Copied!' : 'Copy'" @click="copyText">
-        <span class="material-icons">{{ copied ? "check" : "content_copy" }}</span>
-      </button>
-    </div>
-
-    <!-- Lightbox -->
-    <div v-if="lightbox" class="fixed inset-0 z-50 bg-black/80 overflow-y-auto" @click="closeLightbox">
-      <button class="fixed top-2 right-4 z-10 text-white/60 hover:text-white text-3xl leading-none" :title="t('common.close')" @click.stop="closeLightbox">
-        ✕
-      </button>
-      <div class="flex flex-col items-center gap-4 pt-4 pb-8" @click.stop>
-        <div class="flex items-center gap-4">
-          <button
-            v-if="!lightbox.isCharacter"
-            class="text-white/60 hover:text-white disabled:opacity-20 text-5xl leading-none"
-            :disabled="!hasPrev"
-            @click="lightboxMove(-1)"
-          >
-            ‹
-          </button>
-          <div class="flex flex-col items-center">
-            <img :src="lightbox.src" class="max-w-[80vw] max-h-[85vh] object-contain rounded shadow-2xl" />
-            <div v-if="!lightbox.isCharacter && beats.length > 1" class="relative w-full h-1">
-              <div class="flex gap-1 h-full">
-                <div
-                  v-for="i in beats.length"
-                  :key="i - 1"
-                  class="group flex-1 cursor-pointer relative transition-colors"
-                  :class="
-                    i - 1 === lightbox.index
-                      ? 'bg-white/80 hover:bg-white'
-                      : i - 1 < lightbox.index
-                        ? 'bg-white/40 hover:bg-white/60'
-                        : 'bg-white/20 hover:bg-white/40'
-                  "
-                  @click="jumpToBeat(i - 1)"
-                >
-                  <span class="absolute -inset-y-3 inset-x-0" />
-                  <div
-                    v-if="beatTooltip(i - 1)"
-                    class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 z-20 px-2 py-1 rounded bg-black/90 text-white text-xs leading-tight w-48 max-h-[53px] overflow-hidden opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity"
-                  >
-                    {{ beatTooltip(i - 1) }}
-                  </div>
-                </div>
-              </div>
-              <div
-                v-if="playingAudio && playingAudio.index === lightbox.index"
-                class="absolute top-1/2 w-3.5 h-3.5 rounded-full bg-white shadow ring-2 ring-black/30 -translate-y-1/2 -translate-x-1/2 pointer-events-none"
-                :style="{ left: `${((lightbox.index + audioProgress) / beats.length) * 100}%` }"
-              />
-            </div>
-          </div>
-          <button
-            v-if="!lightbox.isCharacter"
-            class="text-white/60 hover:text-white disabled:opacity-20 text-5xl leading-none"
-            :disabled="!hasNext"
-            @click="lightboxMove(1)"
-          >
-            ›
-          </button>
-        </div>
-        <div v-if="lightbox.text || beatAudios[lightbox.index]" class="relative w-screen flex justify-center px-16">
-          <p v-if="lightbox.text" class="max-w-[80vw] text-center text-white leading-relaxed text-[clamp(0.8rem,1.76vw,1.6rem)]">
-            {{ lightbox.text }}
-          </p>
-          <button
-            v-if="beatAudios[lightbox.index]"
-            class="absolute top-0 right-4 text-sm px-3 py-1 rounded border border-white/60 text-white/60 hover:bg-white/20"
-            @click="playAudio(lightbox.index)"
-          >
-            {{ playingAudio?.index === lightbox.index ? t("pluginMulmoScript.stop") : t("pluginMulmoScript.play") }}
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, defineAsyncComponent, onBeforeUnmount, onMounted, reactive, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
-import type { ToolResultComplete } from "gui-chat-protocol/vue";
-import type { MulmoScriptData } from "./index";
-import { mulmoBeatSchema, mulmoScriptSchema } from "@mulmocast/types";
-import {
-  extractErrorMessage,
-  getMissingCharacterKeys,
-  isAllSlideDeck,
-  isSameScript,
-  beatMayHaveMovie,
-  shouldAutoRenderBeat,
-  streamMovieEvents,
-  validateBeatJSON,
-} from "./helpers";
-import { apiGet, apiPost, apiFetchRaw } from "../../utils/api";
-import { pluginEndpoints } from "../api";
-import type { MulmoScriptEndpoints } from "./definition";
-import { errorMessage } from "../../utils/errors";
-import { useClipboardCopy } from "../../composables/useClipboardCopy";
-import { useActiveSession } from "../../composables/useActiveSession";
-import { GENERATION_KINDS, type PendingGeneration } from "../../types/events";
-import type { SlideLayout, SlideTheme } from "@mulmocast/deck-web";
-
-// Lazy-loaded so the deck editor's Vue / tailwind / SlidePreview chunk
-// stays out of the initial bundle for users whose scripts aren't decks
-// (movies, html_tailwind animations, mixed beats). `defineAsyncComponent`
-// triggers the dynamic import only when `isDeck` first flips true.
-const MulmoScriptDeckEditor = defineAsyncComponent(() => import("@mulmocast/deck-web").then((mod) => mod.MulmoScriptDeckEditor));
-
-const endpoints = pluginEndpoints<MulmoScriptEndpoints>("mulmoScript");
-
-const { t } = useI18n();
-
-interface Beat {
-  speaker?: string;
-  text?: string;
-  id?: string;
-  imagePrompt?: string;
-  moviePrompt?: string;
-  image?: { type: string; [key: string]: unknown };
-  /** Beat duration in seconds. The mulmocast schema notes this is
-   *  "Used only when the text is empty" — when there's no TTS audio
-   *  to drive playback, the Play loop uses this as the auto-advance
-   *  timer (#1073). */
-  duration?: number;
-}
-
-interface ImageEntry {
-  type: string;
-  prompt?: string;
-  [key: string]: unknown;
-}
-
-interface MulmoScript {
-  title?: string;
-  description?: string;
-  lang?: string;
-  beats?: Beat[];
-  imageParams?: {
-    images?: Record<string, ImageEntry>;
-    [key: string]: unknown;
-  };
-  [key: string]: unknown;
-}
-
-const props = defineProps<{
-  selectedResult: ToolResultComplete<MulmoScriptData>;
-}>();
-const emit = defineEmits<{ updateResult: [result: ToolResultComplete] }>();
-
-const data = computed(() => props.selectedResult.data);
-const script = computed<MulmoScript>(() => data.value?.script ?? {});
-const filePath = computed(() => data.value?.filePath ?? "");
-const beats = computed<Beat[]>(() => script.value.beats ?? []);
-
-// Per-beat render state
-type RenderState = "idle" | "rendering" | "done" | "error";
-const renderState = reactive<Record<number, RenderState>>({});
-const renderedImages = reactive<Record<number, string>>({});
-const renderErrors = reactive<Record<number, string>>({});
-const sourceOpen = reactive<Record<number, boolean>>({});
-const sourceText = reactive<Record<number, string>>({});
-// Surface POST /api/mulmo-script/update-beat failures inline next to
-// the Update button. Cleared on next successful save or editor close.
-// Store raw error + kind tag so the template picks a localized key,
-// instead of pre-composing an English-prefixed string here.
-interface BeatSaveError {
-  kind: "invalidJson" | "saveFailed";
-  error: string;
-}
-const beatSaveErrors = reactive<Record<number, BeatSaveError>>({});
-const beatSaving = reactive<Record<number, boolean>>({});
-const localOverrides = reactive<Record<number, Beat>>({});
-const movieGenerating = ref(false);
-const movieDownloading = ref(false);
-const moviePath = ref<string | null>(null);
-// Persists the most-recent movie-generation failure so the spinner
-// area can surface it inline with a retry button (#1197). Cleared
-// at the start of every generate / regenerate attempt.
-const movieError = ref<string | null>(null);
-// PDF generation (#1614). Mirrors the movie triple — path / spinner /
-// downloading flag — kept independent so a PDF and a movie can be
-// generated for the same script without state collision.
-const pdfGenerating = ref(false);
-const pdfDownloading = ref(false);
-const pdfPath = ref<string | null>(null);
-const beatAudios = reactive<Record<number, string>>({});
-const audioState = reactive<Record<number, "generating" | "done" | "error">>({});
-const audioErrors = reactive<Record<number, string>>({});
-// Per-beat generated video clip (moviePrompt / animated beats).
-// `beatMovies` holds the "stories/…" wire path from the beat-movie
-// probe; the blob object URL is fetched lazily on first play through
-// the bearer-authenticated downloadMovie route — a plain <video src>
-// can't attach the Authorization header.
-const beatMovies = reactive<Record<number, string>>({});
-const beatMovieUrls = reactive<Record<number, string>>({});
-const beatMovieOpen = reactive<Record<number, boolean>>({});
-const beatMovieLoading = reactive<Record<number, boolean>>({});
-const playingAudio = ref<{ index: number; audio: HTMLAudioElement } | null>(null);
-// Tracks the auto-advance timer running on a silent beat
-// (`beat.text === ""`). Beats without text generate no audio, so the
-// Play loop falls back to a `setTimeout(beat.duration)` for cues —
-// without this, Play would stall on the first silent beat (#1073).
-const silentPlaybackTimer = ref<{ index: number; timer: ReturnType<typeof setTimeout> } | null>(null);
-const audioProgress = ref(0);
-
-// Default duration (seconds) for a silent beat whose script doesn't
-// set `duration` either. Picked to roughly match the time it takes a
-// reader to scan a `textSlide` — long enough to read, short enough
-// not to feel stuck. The script's own `duration` always wins.
-const SILENT_BEAT_DEFAULT_SEC = 3;
-const MS_PER_SECOND = 1000;
-const beatListEl = ref<HTMLElement | null>(null);
-const lightbox = ref<{
-  src: string;
-  text?: string;
-  index: number;
-  isCharacter?: boolean;
-} | null>(null);
-// Character (imageParams.images) state
-type CharRenderState = "idle" | "rendering" | "done" | "error";
-const charRenderState = reactive<Record<string, CharRenderState>>({});
-const charImages = reactive<Record<string, string>>({});
-const charErrors = reactive<Record<string, string>>({});
-const charDragOver = reactive<Record<string, boolean>>({});
-const beatDragOver = reactive<Record<number, boolean>>({});
-
-const anyBeatRendering = computed(() => Object.values(renderState).some((state) => state === "rendering"));
-
-const characterKeys = computed(() => {
-  const imgs = script.value.imageParams?.images ?? {};
-  return Object.keys(imgs).filter((key) => imgs[key]?.type === "imagePrompt");
-});
-
-// Session-scoped pending generations — lets spinners survive view
-// unmount/remount and tags new generations on the correct session
-// channel so the cross-session sidebar indicator stays lit.
-const activeSessionRef = useActiveSession();
-const chatSessionId = computed(() => activeSessionRef?.value?.id);
-
-const pendingForThisScript = computed(() => {
-  const out: Record<string, PendingGeneration> = {};
-  const pending = activeSessionRef?.value?.pendingGenerations ?? {};
-  const currentPath = filePath.value;
-  if (!currentPath) return out;
-  for (const [mapKey, entry] of Object.entries(pending)) {
-    if (entry.filePath === currentPath) out[mapKey] = entry;
-  }
-  return out;
-});
-
-// Local renderState / charRenderState / audioState / movieGenerating
-// are kept in sync with `pendingForThisScript` by the watcher below
-// and by `initializeScript`, so the template continues to read them
-// without needing per-kind predicates here.
-
-function characterPrompt(key: string): string {
-  return (script.value.imageParams?.images?.[key]?.prompt as string) ?? "";
-}
-
-function stopPlayingAudio() {
-  // Single helper that clears both the audio path and the silent
-  // auto-advance timer — callers (lightbox open / arrow nav / Stop
-  // button) get consistent behaviour without remembering which
-  // playback mode the current beat was using (#1073).
-  stopAllPlayback();
-}
-
-function openLightbox(index: number) {
-  stopPlayingAudio();
-  lightbox.value = {
-    src: renderedImages[index],
-    text: effectiveBeat(index).text,
-    index,
-  };
-}
-
-// Backdrop click handler. Stops any in-flight narration so the audio
-// doesn't keep playing after the lightbox is dismissed — without this,
-// the HTMLAudioElement created by playAudio() outlives the modal and
-// the user hears disembodied narration with no UI to stop it.
-function closeLightbox() {
-  stopPlayingAudio();
-  lightbox.value = null;
-}
-
-// "Play presentation" toolbar action. Opens the lightbox at beat 0 and
-// kicks off its narration audio; the existing on-ended hook then chains
-// through the rest of the deck (lightboxMove(1) → playAudio if the next
-// beat has audio), so one click runs the whole presentation. Only wired
-// to the toolbar button when moviePath is set, which is our proxy for
-// "every beat has both image and audio on disk".
-//
-// `moviePath` arrives synchronously from /movie-status, but the per-beat
-// image and audio data URIs are populated asynchronously by
-// loadExistingBeatImage / loadExistingBeatAudio in initializeScript().
-// The Play button can therefore become visible before beat 0's assets
-// hydrate — `isPlayReady` gates the click so the lightbox never opens
-// with an undefined src or silent narration on a beat that does have
-// text.
-const isPlayReady = computed<boolean>(() => {
-  if (beats.value.length === 0) return false;
-  if (!renderedImages[0]) return false;
-  // Audio is only required when the beat has text (the source of TTS).
-  // Beats without text are valid; they just play silently.
-  if (effectiveBeat(0).text && !beatAudios[0]) return false;
-  return true;
-});
-
-function playPresentation() {
-  if (!isPlayReady.value) return;
-  openLightbox(0);
-  playBeat(0);
-}
-
-// Stop whichever playback handle is active. Idempotent. Called by
-// openLightbox, manual stop / pause buttons, and by `playBeat`
-// before kicking off a new beat so we never double-schedule. (#1073)
-function stopAllPlayback(): void {
-  if (playingAudio.value) {
-    playingAudio.value.audio.pause();
-    playingAudio.value = null;
-    audioProgress.value = 0;
-  }
-  if (silentPlaybackTimer.value) {
-    clearTimeout(silentPlaybackTimer.value.timer);
-    silentPlaybackTimer.value = null;
-  }
-}
-
-// Single entry point for "start playback at beat <index>". Routes
-// on what the script DECLARED, not on what's currently hydrated:
-//
-//   - `text` empty  → silent path (`scheduleSilentAdvance`). The
-//     schema says no audio is generated for empty-text beats, so
-//     `duration` drives auto-advance.
-//   - `text` present + audio loaded → audio path. `audio.ended`
-//     chains via `advanceFromBeat`.
-//   - `text` present + audio NOT loaded → stop. The Play button's
-//     `isPlayReady` gate prevented this for beat 0, but mid-stream
-//     a transient fetch miss must not silently skip the narration
-//     by falling through to the silent timer (Codex review on
-//     #1073 — gating on `beatAudios[index]` would do exactly that).
-//
-// Either path chains to the next beat via `advanceFromBeat`, so a
-// run of silent beats — or audio / silent / audio sequences —
-// plays through without manual interaction.
-function playBeat(index: number): void {
-  stopAllPlayback();
-  const hasText = Boolean(effectiveBeat(index).text);
-  if (!hasText) {
-    scheduleSilentAdvance(index);
-    return;
-  }
-  if (beatAudios[index]) {
-    playAudio(index);
-  }
-  // Text beat with no audio yet → stop. The user can re-click Play
-  // once the audio finishes hydrating.
-}
-
-function scheduleSilentAdvance(index: number): void {
-  // Defensively narrow the script-supplied duration. A bad value
-  // (zero, negative, NaN, non-number) would otherwise collapse to
-  // an immediate timeout and the Play loop would race through every
-  // silent beat in a single tick (Codex review iter-5 on #1365).
-  // Falling back to the default keeps the presentation watchable.
-  const raw = effectiveBeat(index).duration;
-  const seconds = typeof raw === "number" && Number.isFinite(raw) && raw > 0 ? raw : SILENT_BEAT_DEFAULT_SEC;
-  const timer = setTimeout(() => {
-    if (silentPlaybackTimer.value?.index !== index) return;
-    silentPlaybackTimer.value = null;
-    if (lightbox.value?.index === index) advanceFromBeat(index);
-  }, seconds * MS_PER_SECOND);
-  silentPlaybackTimer.value = { index, timer };
-}
-
-function advanceFromBeat(fromIndex: number): void {
-  lightboxMove(1);
-  const nextIndex = lightbox.value?.index;
-  if (nextIndex === undefined || nextIndex === fromIndex) return;
-  playBeat(nextIndex);
-}
-
-const hasPrev = computed(() => {
-  if (!lightbox.value) return false;
-  for (let i = lightbox.value.index - 1; i >= 0; i--) {
-    if (renderedImages[i]) return true;
-  }
-  return false;
-});
-
-const hasNext = computed(() => {
-  if (!lightbox.value) return false;
-  for (let i = lightbox.value.index + 1; i < beats.value.length; i++) {
-    if (renderedImages[i]) return true;
-  }
-  return false;
-});
-
-function jumpToBeat(index: number) {
-  if (!lightbox.value) return;
-  if (index === lightbox.value.index) return;
-  if (!renderedImages[index]) return;
-  // Carry the playback mode forward (audio OR silent timer) so a
-  // user clicking the beat-strip thumbnail mid-playback keeps the
-  // presentation rolling (#1073).
-  const wasPlaying = playingAudio.value !== null || silentPlaybackTimer.value !== null;
-  openLightbox(index);
-  if (wasPlaying) playBeat(index);
-}
-
-function beatTooltip(index: number): string {
-  const text = effectiveBeat(index).text ?? "";
-  return text.length > 80 ? `${text.slice(0, 80)}…` : text;
-}
-
-function lightboxMove(delta: number) {
-  if (!lightbox.value) return;
-  const total = beats.value.length;
-  // If a playback was in progress when the user clicked the arrow,
-  // carry it forward to whichever beat we land on — `playBeat`
-  // picks audio vs silent automatically. `openLightbox` stops the
-  // current playback, so capture the flag BEFORE that and chain
-  // AFTER. The on-ended / silent-advance paths already null their
-  // own state before calling `lightboxMove`, so this branch won't
-  // double-fire there.
-  const wasPlaying = playingAudio.value !== null || silentPlaybackTimer.value !== null;
-  let i = lightbox.value.index + delta;
-  while (i >= 0 && i < total) {
-    if (renderedImages[i]) {
-      openLightbox(i);
-      if (wasPlaying) playBeat(i);
-      return;
-    }
-    i += delta;
-  }
-}
-const sourceDetails = ref<HTMLDetailsElement>();
-const editing = ref(false);
-const editableSource = ref("");
-const { copied, copy } = useClipboardCopy();
-
-// Beats may be edited in-place via `updateBeat()` and rendered through
-// `effectiveBeat()`, so the Copy / source-view text must read the merged
-// shape — otherwise the clipboard returns the original prop snapshot
-// until the full result is reloaded.
-const effectiveScript = computed<MulmoScript>(() => ({
-  ...script.value,
-  beats: beats.value.map((beat, i) => localOverrides[i] ?? beat),
-}));
-const scriptSourceText = computed(() => JSON.stringify(effectiveScript.value, null, 2));
-
-// #1575 — when every beat is a `slide`, swap the per-beat list UI for
-// the interactive deck editor (@mulmocast/deck-web). Mixed scripts
-// (any non-slide beat) fall back to the existing list so the user can
-// keep editing movie / textSlide / html_tailwind beats as before.
-const isDeck = computed(() => isAllSlideDeck(effectiveScript.value));
-
-// `@mulmocast/deck-web` types its `script` prop as a *structural*
-// superset of MulmoScript (every key optional + index signature) using
-// `SlideLayout` / `SlideTheme` from `@mulmocast/deck`. Our strict
-// `MulmoScript` from `@mulmocast/types` doesn't unify with that shape
-// by name, so we re-type at the boundary. The cast is safe — any real
-// MulmoScript instance fits the structural shape. Mirrored on the way
-// out (`onDeckUpdate`).
-interface DeckBeatShape {
-  image?: {
-    type?: string;
-    slide?: SlideLayout;
-    theme?: SlideTheme;
-    [k: string]: unknown;
-  };
-  [k: string]: unknown;
-}
-interface DeckScriptShape {
-  beats?: DeckBeatShape[];
-  presentationStyle?: { slideParams?: { theme?: SlideTheme } };
-  slideParams?: { theme?: SlideTheme };
-  [k: string]: unknown;
-}
-const deckScriptInput = computed<DeckScriptShape>(() => effectiveScript.value as unknown as DeckScriptShape);
-
-// Debounce window for deck-editor → /update-script. Drag a slide,
-// reorder, edit a field — each emit fires `update:script`, and we
-// only want one network round-trip per quiet stretch. 300ms is short
-// enough to feel live, long enough that typing in the Inspector
-// doesn't carpet-bomb the server.
-const DECK_SAVE_DEBOUNCE_MS = 300;
-let deckSaveTimer: ReturnType<typeof setTimeout> | null = null;
-let pendingDeckScript: MulmoScript | null = null;
-
-function scheduleDeckSave(next: MulmoScript): void {
-  pendingDeckScript = next;
-  if (deckSaveTimer) clearTimeout(deckSaveTimer);
-  deckSaveTimer = setTimeout(() => {
-    void flushDeckSave();
-  }, DECK_SAVE_DEBOUNCE_MS);
-}
-
-async function flushDeckSave(): Promise<void> {
-  deckSaveTimer = null;
-  const next = pendingDeckScript;
-  pendingDeckScript = null;
-  if (!next || !filePath.value) return;
-  const response = await apiPost<unknown>(endpoints.updateScript.url, {
-    filePath: filePath.value,
-    script: next,
-  });
-  if (!response.ok) {
-    // Surface via console so the user can see what failed; a full
-    // toast UI is P2. The deck editor still holds the latest edit
-    // in its props until the next prop refresh, so the visible state
-    // doesn't snap back on a transient failure.
-    console.error("[presentMulmoScript] deck save failed:", response.error);
-    return;
-  }
-  // Mirror the JSON-source `applySource` flow so the parent's in-memory
-  // script and our reactive beats[] stay in sync without a remount.
-  emit("updateResult", {
-    ...props.selectedResult,
-    data: { ...props.selectedResult.data, script: next },
-  });
-}
-
-function onDeckUpdate(next: DeckScriptShape): void {
-  scheduleDeckSave(next as unknown as MulmoScript);
-}
-
-onBeforeUnmount(() => {
-  if (deckSaveTimer) {
-    clearTimeout(deckSaveTimer);
-    // Flush synchronously-scheduled work on unmount so a quick switch
-    // away doesn't lose the last keystroke. Fire-and-forget — the
-    // component is gone, we just want the bytes to land.
-    void flushDeckSave();
-  }
-  // Release beat-clip blob object URLs — they outlive the component
-  // otherwise (document-scoped, not GC'd with it).
-  resetBeatMovies();
-});
-const loadedSource = ref("");
-const sourceChanged = computed(() => editableSource.value !== loadedSource.value);
-const sourceValid = computed(() => {
-  try {
-    const parsed = JSON.parse(editableSource.value);
-    return mulmoScriptSchema.safeParse(parsed).success;
-  } catch {
-    return false;
-  }
-});
-
-async function onSourceToggle(open: boolean) {
-  editing.value = open;
-  if (open) {
-    let text = scriptSourceText.value;
-    // Re-read the current file from disk so beat-level edits made
-    // since mount (other tabs, MCP, manual edits) surface in the
-    // editor. Uses the reopen endpoint for the same reason
-    // refreshScriptFromDisk does — `filePath.value` is the wire form
-    // `stories/<rel>` and only `mulmoScript.save` knows how to map
-    // it to the on-disk path under `artifacts/stories/...`. The
-    // generic `/api/files/content` 404s for that wire form (#1074
-    // post-mortem) and silently falls back to in-memory state.
-    if (filePath.value) {
-      const response = await apiPost<{ data?: { script?: MulmoScript } }>(endpoints.save.url, { filePath: filePath.value });
-      const diskScript = response.ok ? response.data?.data?.script : undefined;
-      if (diskScript) text = JSON.stringify(diskScript, null, 2);
-      // fall through to in-memory script on failure
-    }
-    editableSource.value = text;
-    loadedSource.value = text;
-  }
-}
-
-function cancelSourceEdit() {
-  if (sourceDetails.value) sourceDetails.value.open = false;
-}
-
-async function applySource() {
-  let parsed: MulmoScript;
-  try {
-    parsed = JSON.parse(editableSource.value);
-  } catch (err) {
-    alert(extractErrorMessage(err));
-    return;
-  }
-  const response = await apiPost<unknown>(endpoints.updateScript.url, {
-    filePath: filePath.value,
-    script: parsed,
-  });
-  if (!response.ok) {
-    alert(response.error || "Update failed");
-    return;
-  }
-
-  // Update the UI with the new script.
-  // Note: the parent's handleUpdateResult uses Object.assign (in-place
-  // mutation), so the watcher on props.selectedResult won't fire.
-  // We emit first so the parent data is updated, then manually
-  // re-initialize the view.
-  emit("updateResult", {
-    ...props.selectedResult,
-    data: { ...props.selectedResult.data, script: parsed },
-  });
-
-  if (sourceDetails.value) sourceDetails.value.open = false;
-  await initializeScript();
-}
-
-async function copyText() {
-  await copy(scriptSourceText.value);
-}
-
-function effectiveBeat(index: number): Beat {
-  return localOverrides[index] ?? beats.value[index] ?? {};
-}
-
-function toggleSource(index: number) {
-  if (!sourceOpen[index]) {
-    sourceText[index] = JSON.stringify(effectiveBeat(index), null, 2);
-    Reflect.deleteProperty(beatSaveErrors, index);
-  }
-  sourceOpen[index] = !sourceOpen[index];
-}
-
-function isValidBeat(index: number): boolean {
-  return validateBeatJSON(sourceText[index] ?? "", mulmoBeatSchema);
-}
-
-async function updateBeat(index: number) {
-  let beat: Beat;
-  try {
-    beat = JSON.parse(sourceText[index]);
-  } catch (err) {
-    beatSaveErrors[index] = { kind: "invalidJson", error: errorMessage(err) };
-    return;
-  }
-  const prevImage = JSON.stringify(effectiveBeat(index).image);
-
-  Reflect.deleteProperty(beatSaveErrors, index);
-  beatSaving[index] = true;
-  const response = await apiPost<unknown>(endpoints.updateBeat.url, {
-    filePath: filePath.value,
-    beatIndex: index,
-    beat,
-  });
-  Reflect.deleteProperty(beatSaving, index);
-  if (!response.ok) {
-    beatSaveErrors[index] = { kind: "saveFailed", error: response.error };
-    return;
-  }
-
-  localOverrides[index] = beat;
-  sourceOpen[index] = false;
-
-  if (JSON.stringify(beat.image) !== prevImage) {
-    Reflect.deleteProperty(renderedImages, index);
-    renderBeat(index);
-  }
-}
-
-async function renderBeat(index: number) {
-  renderState[index] = "rendering";
-  const response = await apiPost<{ image?: string; error?: string }>(endpoints.renderBeat.url, {
-    filePath: filePath.value,
-    beatIndex: index,
-    chatSessionId: chatSessionId.value,
-  });
-  if (!response.ok) {
-    renderErrors[index] = response.error || "Render failed";
-    renderState[index] = "error";
-    return;
-  }
-  if (response.data.error) {
-    renderErrors[index] = response.data.error;
-    renderState[index] = "error";
-    return;
-  }
-  renderedImages[index] = response.data.image ?? "";
-  renderState[index] = "done";
-  refreshMissingCharacterImages();
-  if (beatMayHaveMovie(effectiveBeat(index))) void loadExistingBeatMovie(index);
-}
-
-async function regenerateBeat(index: number) {
-  Reflect.deleteProperty(renderedImages, index);
-  invalidateBeatMovie(index);
-  renderState[index] = "rendering";
-  const response = await apiPost<{ image?: string; error?: string }>(endpoints.renderBeat.url, {
-    filePath: filePath.value,
-    beatIndex: index,
-    force: true,
-    chatSessionId: chatSessionId.value,
-  });
-  if (!response.ok) {
-    renderErrors[index] = response.error || "Render failed";
-    renderState[index] = "error";
-    return;
-  }
-  if (response.data.error) {
-    renderErrors[index] = response.data.error;
-    renderState[index] = "error";
-    return;
-  }
-  renderedImages[index] = response.data.image ?? "";
-  renderState[index] = "done";
-  if (beatMayHaveMovie(effectiveBeat(index))) void loadExistingBeatMovie(index);
-}
-
-async function loadExistingBeatImage(index: number) {
-  const response = await apiGet<{ image?: string }>(endpoints.beatImage.url, { filePath: filePath.value, beatIndex: String(index) });
-  // silently ignore errors — image simply hasn't been generated yet
-  if (response.ok && response.data.image) {
-    renderedImages[index] = response.data.image;
-    renderState[index] = "done";
-  }
-}
-
-async function loadExistingBeatAudio(index: number) {
-  const response = await apiGet<{ audio?: string }>(endpoints.beatAudio.url, { filePath: filePath.value, beatIndex: String(index) });
-  // silently ignore errors
-  if (response.ok && response.data.audio) {
-    beatAudios[index] = response.data.audio;
-    audioState[index] = "done";
-  }
-}
-
-async function loadExistingBeatMovie(index: number) {
-  const response = await apiGet<{ moviePath?: string }>(endpoints.beatMovie.url, { filePath: filePath.value, beatIndex: String(index) });
-  // silently ignore errors — the clip simply hasn't been generated yet
-  if (response.ok && response.data.moviePath) {
-    beatMovies[index] = response.data.moviePath;
-  }
-}
-
-async function playBeatMovie(index: number) {
-  if (!beatMovies[index] || beatMovieLoading[index]) return;
-  if (beatMovieUrls[index]) {
-    beatMovieOpen[index] = true;
-    return;
-  }
-  beatMovieLoading[index] = true;
-  try {
-    const res = await apiFetchRaw(endpoints.downloadMovie.url, {
-      method: "GET",
-      query: { moviePath: beatMovies[index] },
-    });
-    if (!res.ok) {
-      throw new Error(`HTTP ${res.status}`);
-    }
-    // Re-type the .mov blob as video/mp4 — same ISO-BMFF family, and
-    // <video> support for "video/mp4" is broader than "video/quicktime".
-    const blob = new Blob([await res.blob()], { type: "video/mp4" });
-    beatMovieUrls[index] = URL.createObjectURL(blob);
-    beatMovieOpen[index] = true;
-  } catch (err) {
-    alert(extractErrorMessage(err));
-  } finally {
-    Reflect.deleteProperty(beatMovieLoading, index);
-  }
-}
-
-function closeBeatMovie(index: number) {
-  Reflect.deleteProperty(beatMovieOpen, index);
-}
-
-// Drop one beat's cached clip (regenerate is about to replace it on
-// disk). Revoking the object URL frees the blob immediately.
-function invalidateBeatMovie(index: number): void {
-  if (beatMovieUrls[index]) URL.revokeObjectURL(beatMovieUrls[index]);
-  [beatMovies, beatMovieUrls, beatMovieOpen].forEach((map) => Reflect.deleteProperty(map, index));
-}
-
-function resetBeatMovies(): void {
-  Object.values(beatMovieUrls).forEach((url) => URL.revokeObjectURL(url));
-  [beatMovies, beatMovieUrls, beatMovieOpen, beatMovieLoading].forEach((map) => {
-    Object.keys(map).forEach((key) => Reflect.deleteProperty(map, key));
-  });
-}
-
-async function generateAudio(index: number) {
-  audioState[index] = "generating";
-  Reflect.deleteProperty(audioErrors, index);
-  const response = await apiPost<{ audio?: string; error?: string }>(endpoints.generateBeatAudio.url, {
-    filePath: filePath.value,
-    beatIndex: index,
-    chatSessionId: chatSessionId.value,
-  });
-  if (!response.ok) {
-    audioErrors[index] = response.error || "Audio generation failed";
-    audioState[index] = "error";
-    return;
-  }
-  if (response.data.error) {
-    audioErrors[index] = response.data.error;
-    audioState[index] = "error";
-    return;
-  }
-  beatAudios[index] = response.data.audio ?? "";
-  audioState[index] = "done";
-}
-
-function playAudio(index: number) {
-  if (playingAudio.value) {
-    playingAudio.value.audio.pause();
-    const wasIndex = playingAudio.value.index;
-    playingAudio.value = null;
-    if (wasIndex === index) return;
-  }
-  const src = beatAudios[index];
-  if (!src) return;
-  const audio = new Audio(src);
-  playingAudio.value = { index, audio };
-  audioProgress.value = 0;
-  audio.addEventListener("timeupdate", () => {
-    if (playingAudio.value?.index !== index) return;
-    if (audio.duration > 0) audioProgress.value = audio.currentTime / audio.duration;
-  });
-  audio.addEventListener("ended", () => {
-    if (playingAudio.value?.index !== index) return;
-    playingAudio.value = null;
-    audioProgress.value = 0;
-    if (lightbox.value?.index === index) advanceFromBeat(index);
-  });
-  audio.play();
-}
-
-function onBeatDragOver(event: DragEvent, index: number) {
-  if (!event.dataTransfer?.types.includes("Files")) return;
-  event.preventDefault();
-  beatDragOver[index] = true;
-}
-
-function onBeatDragLeave(index: number) {
-  beatDragOver[index] = false;
-}
-
-async function onBeatDrop(event: DragEvent, index: number) {
-  event.preventDefault();
-  beatDragOver[index] = false;
-  const file = event.dataTransfer?.files[0];
-  if (!file || !file.type.startsWith("image/")) return;
-
-  renderState[index] = "rendering";
-  Reflect.deleteProperty(renderErrors, index);
-  let imageData: string;
-  try {
-    imageData = await new Promise<string>((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = () => resolve(reader.result as string);
-      reader.onerror = reject;
-      reader.readAsDataURL(file);
-    });
-  } catch (err) {
-    renderErrors[index] = errorMessage(err);
-    renderState[index] = "error";
-    return;
-  }
-  const response = await apiPost<{ image?: string; error?: string }>(endpoints.uploadBeatImage.url, {
-    filePath: filePath.value,
-    beatIndex: index,
-    imageData,
-  });
-  if (!response.ok) {
-    renderErrors[index] = response.error || "Upload failed";
-    renderState[index] = "error";
-    return;
-  }
-  if (response.data.error) {
-    renderErrors[index] = response.data.error;
-    renderState[index] = "error";
-    return;
-  }
-  renderedImages[index] = response.data.image ?? "";
-  renderState[index] = "done";
-}
-
-function onCharDragOver(event: DragEvent, key: string) {
-  if (!event.dataTransfer?.types.includes("Files")) return;
-  event.preventDefault();
-  charDragOver[key] = true;
-}
-
-function onCharDragLeave(key: string) {
-  charDragOver[key] = false;
-}
-
-async function onCharDrop(event: DragEvent, key: string) {
-  event.preventDefault();
-  charDragOver[key] = false;
-  const file = event.dataTransfer?.files[0];
-  if (!file || !file.type.startsWith("image/")) return;
-
-  charRenderState[key] = "rendering";
-  Reflect.deleteProperty(charErrors, key);
-  let imageData: string;
-  try {
-    imageData = await new Promise<string>((resolve, reject) => {
-      const reader = new FileReader();
-      reader.onload = () => resolve(reader.result as string);
-      reader.onerror = reject;
-      reader.readAsDataURL(file);
-    });
-  } catch (err) {
-    charErrors[key] = errorMessage(err);
-    charRenderState[key] = "error";
-    return;
-  }
-  const response = await apiPost<{ image?: string; error?: string }>(endpoints.uploadCharacterImage.url, { filePath: filePath.value, key, imageData });
-  if (!response.ok) {
-    charErrors[key] = response.error || "Upload failed";
-    charRenderState[key] = "error";
-    return;
-  }
-  if (response.data.error) {
-    charErrors[key] = response.data.error;
-    charRenderState[key] = "error";
-    return;
-  }
-  charImages[key] = response.data.image ?? "";
-  charRenderState[key] = "done";
-}
-
-function openCharacterLightbox(key: string) {
-  // Stop both audio and silent timer — character lightbox is
-  // outside the play loop (#1073).
-  stopAllPlayback();
-  lightbox.value = {
-    src: charImages[key],
-    text: key,
-    index: -1,
-    isCharacter: true,
-  };
-}
-
-async function loadExistingCharacterImage(key: string) {
-  const response = await apiGet<{ image?: string }>(endpoints.characterImage.url, { filePath: filePath.value, key });
-  // silently ignore errors
-  if (response.ok && response.data.image) {
-    charImages[key] = response.data.image;
-    charRenderState[key] = "done";
-  }
-}
-
-function refreshMissingCharacterImages() {
-  getMissingCharacterKeys(characterKeys.value, charImages, charRenderState).forEach((key) => loadExistingCharacterImage(key));
-}
-
-async function renderCharacter(key: string, force: boolean) {
-  charRenderState[key] = "rendering";
-  Reflect.deleteProperty(charErrors, key);
-  const response = await apiPost<{ image?: string; error?: string }>(endpoints.renderCharacter.url, {
-    filePath: filePath.value,
-    key,
-    force,
-    chatSessionId: chatSessionId.value,
-  });
-  if (!response.ok) {
-    charErrors[key] = response.error || "Render failed";
-    charRenderState[key] = "error";
-    return;
-  }
-  if (response.data.error) {
-    charErrors[key] = response.data.error;
-    charRenderState[key] = "error";
-    return;
-  }
-  charImages[key] = response.data.image ?? "";
-  charRenderState[key] = "done";
-}
-
-async function generateAllCharacters() {
-  await Promise.all(characterKeys.value.filter((key) => charRenderState[key] !== "rendering").map((key) => renderCharacter(key, false)));
-}
-
-// Probe the server for an existing beat PNG before triggering any
-// generation. Only auto-renders when the disk is empty AND the beat
-// is a deterministic type — imagePrompt beats are left empty so the
-// user clicks Generate explicitly (avoids surprise paid text2image
-// calls on every page refresh).
-async function hydrateBeatImage(beat: Beat, index: number, hasCharacters: boolean, autoRenderTypes: readonly string[]): Promise<void> {
-  await loadExistingBeatImage(index);
-  if (renderedImages[index]) return;
-  if (shouldAutoRenderBeat(beat, hasCharacters, autoRenderTypes)) {
-    await renderBeat(index);
-  }
-}
-
-/**
- * #1074 — keep the in-memory toolResult in sync with the on-disk
- * script file. `update-beat` / `update-script` persist edits to
- * disk, but the JSONL session entry that backs
- * `props.selectedResult.data.script` is never rewritten, so a
- * page reload + session-restore would otherwise surface stale
- * pre-edit content.
- *
- * Why the reopen endpoint, not `/api/files/content`: `filePath`
- * is the wire form `stories/<rel>` which `mulmoScript.save` knows
- * how to translate back to the real on-disk path under
- * `artifacts/stories/...` via `resolveStoryPath`. The generic
- * file-content endpoint resolves against workspace root, so it
- * 404s for the same wire form (and was silently masking #1074 in
- * an earlier draft of this fix — see `[files] GET content: gated
- * by resolve/stat` warnings in the server log). The reopen route
- * is read-only when `script` is omitted; it does NOT trigger movie
- * generation unless `autoGenerateMovie: true` is passed.
- *
- * The flow silently bails on every failure mode so a missing /
- * malformed / deleted script file never blocks the rest of
- * `initializeScript`.
- *
- * Stale-response guard: capture `uuid` + `filePath` before the
- * `await`. If either has changed by the time the response lands
- * (the user navigated to a different result while the request
- * was in flight, or `props.selectedResult` was swapped under us
- * by a parent watcher), drop the response on the floor — the new
- * `initializeScript` invocation triggered by that change will
- * issue its own refresh against the correct file.
- */
-async function refreshScriptFromDisk(): Promise<void> {
-  const requestedFilePath = filePath.value;
-  if (!requestedFilePath) return;
-  const requestedUuid = props.selectedResult.uuid;
-  const response = await apiPost<{ data?: { script?: MulmoScript } }>(endpoints.save.url, { filePath: requestedFilePath });
-  if (props.selectedResult.uuid !== requestedUuid || filePath.value !== requestedFilePath) return;
-  if (!response.ok) return;
-  const diskScript = response.data?.data?.script;
-  // Server-side `loadScriptFromDisk` already validated against
-  // `mulmoScriptSchema`, so a non-null `script` is trusted here —
-  // we only need a presence check.
-  if (!diskScript) return;
-  if (isSameScript(diskScript, script.value)) return;
-  emit("updateResult", {
-    ...props.selectedResult,
-    data: { ...props.selectedResult.data, script: diskScript },
-  });
-}
-
-async function initializeScript() {
-  // Stop any in-flight playback BEFORE we tear down per-script state
-  // — a pending `silentPlaybackTimer` or running audio from the
-  // previous script would otherwise fire `advanceFromBeat()` against
-  // the new script's lightbox / beat list and either crash or
-  // silently jump the new presentation forward. Also close any open
-  // lightbox so the user lands on the clean View for the new result
-  // (Codex review iter-4 on #1365).
-  stopAllPlayback();
-  lightbox.value = null;
-  // Reset scroll position so new results start at the top
-  if (beatListEl.value) beatListEl.value.scrollTop = 0;
-  // Reset per-script state
-  Object.keys(renderState).forEach((key) => Reflect.deleteProperty(renderState, key));
-  Object.keys(renderedImages).forEach((key) => Reflect.deleteProperty(renderedImages, key));
-  Object.keys(renderErrors).forEach((key) => Reflect.deleteProperty(renderErrors, key));
-  Object.keys(sourceOpen).forEach((key) => Reflect.deleteProperty(sourceOpen, key));
-  Object.keys(sourceText).forEach((key) => Reflect.deleteProperty(sourceText, key));
-  Object.keys(beatSaveErrors).forEach((key) => Reflect.deleteProperty(beatSaveErrors, key));
-  Object.keys(beatSaving).forEach((key) => Reflect.deleteProperty(beatSaving, key));
-  Object.keys(localOverrides).forEach((key) => Reflect.deleteProperty(localOverrides, key));
-  Object.keys(beatAudios).forEach((key) => Reflect.deleteProperty(beatAudios, key));
-  Object.keys(audioState).forEach((key) => Reflect.deleteProperty(audioState, key));
-  Object.keys(audioErrors).forEach((key) => Reflect.deleteProperty(audioErrors, key));
-  Object.keys(charRenderState).forEach((key) => Reflect.deleteProperty(charRenderState, key));
-  Object.keys(charImages).forEach((key) => Reflect.deleteProperty(charImages, key));
-  Object.keys(charErrors).forEach((key) => Reflect.deleteProperty(charErrors, key));
-  Object.keys(beatDragOver).forEach((key) => Reflect.deleteProperty(beatDragOver, key));
-  resetBeatMovies();
-  moviePath.value = null;
-  pdfPath.value = null;
-  if (sourceDetails.value) sourceDetails.value.open = false;
-
-  // #1074 — re-read the script file from disk before per-beat
-  // hydration. The server's `enrichWithMulmoScript`
-  // (server/api/routes/sessions.ts) already re-merges disk content
-  // into toolResult.data.script when the SPA reloads via
-  // `/api/sessions/:id`. But that path only fires on full page
-  // reload — when the user switches between tool results inside
-  // the same SPA mount and switches back, the in-memory ActiveSession
-  // toolResult still carries whatever script was captured when the
-  // SPA first booted, and `localOverrides` (the only thing showing
-  // the user's edit since the last save) is reset by initializeScript
-  // on remount. Re-fetching from disk via the reopen endpoint here
-  // covers that gap. See issue #1074 for the original repro.
-  await refreshScriptFromDisk();
-
-  // Mount-time policy: prefer the existing PNG on the server. Every
-  // beat — deterministic AND imagePrompt — first probes /beat-image,
-  // and we only fall through to renderBeat() when the disk has nothing
-  // yet AND the type is safe to auto-render (deterministic content,
-  // no characters waiting). Without this probe a refresh would re-fire
-  // generateBeatImage for every beat, and for imagePrompt beats that
-  // means a paid text2image call against an image we already have.
-  //
-  // Stale-after-edit: if the user edits the script source the on-disk
-  // PNG is no longer in sync with the new content, but we don't try to
-  // detect that here — the per-beat ↺ button is one click away and a
-  // page refresh re-runs this same probe, so the user can opt back into
-  // a fresh render whenever they need to.
-  const AUTO_RENDER_TYPES = ["textSlide", "markdown", "chart", "mermaid", "html_tailwind", "slide"] as const;
-  const hasCharacters = characterKeys.value.length > 0;
-  beats.value.forEach((beat, index) => {
-    void hydrateBeatImage(beat, index, hasCharacters, AUTO_RENDER_TYPES);
-    if (beat.text) loadExistingBeatAudio(index);
-    if (beatMayHaveMovie(beat)) void loadExistingBeatMovie(index);
-  });
-
-  characterKeys.value.forEach((key) => loadExistingCharacterImage(key));
-
-  if (filePath.value) {
-    const response = await apiGet<{ moviePath?: string }>(endpoints.movieStatus.url, { filePath: filePath.value });
-    if (response.ok && response.data.moviePath) {
-      moviePath.value = response.data.moviePath;
-    }
-    // ignore errors
-    // Also check whether a PDF was previously generated and is still
-    // newer than the source; status returns null otherwise so the UI
-    // re-offers the Generate button.
-    const pdfResponse = await apiGet<{ pdfPath?: string }>(endpoints.pdfStatus.url, { filePath: filePath.value });
-    if (pdfResponse.ok && pdfResponse.data.pdfPath) {
-      pdfPath.value = pdfResponse.data.pdfPath;
-    }
-  }
-
-  // Reflect any generations that were already in flight when we
-  // mounted (user switched away mid-generation and came back).
-  for (const entry of Object.values(pendingForThisScript.value)) {
-    reflectGenerationStart(entry);
-  }
-}
-
-onMounted(initializeScript);
-watch(() => props.selectedResult, initializeScript);
-
-// Keep the view in sync with generations that started from a different
-// view mount or a parallel tab. When a generation for this script
-// disappears from session.pendingGenerations we reload the relevant
-// artifact off disk; when one appears we mirror it into the local
-// "rendering" state so spinners show even after a remount.
-watch(pendingForThisScript, (now, prev = {}) => {
-  for (const [mapKey, entry] of Object.entries(now)) {
-    if (!(mapKey in prev)) reflectGenerationStart(entry);
-  }
-  for (const [mapKey, entry] of Object.entries(prev)) {
-    if (!(mapKey in now)) {
-      // Fire-and-forget: the watcher callback must stay sync so Vue
-      // can batch multiple pendingGenerations updates. Swallow + log
-      // so a failed reload doesn't surface as an unhandled rejection.
-      reflectGenerationFinish(entry).catch((err) => {
-        console.error("[presentMulmoScript] reload on finish failed:", err);
-      });
-    }
-  }
-});
-
-function reflectGenerationStart(entry: PendingGeneration): void {
-  if (entry.kind === GENERATION_KINDS.beatImage) {
-    const idx = Number(entry.key);
-    if (!renderedImages[idx]) renderState[idx] = "rendering";
-  } else if (entry.kind === GENERATION_KINDS.beatAudio) {
-    const idx = Number(entry.key);
-    if (!beatAudios[idx]) audioState[idx] = "generating";
-  } else if (entry.kind === GENERATION_KINDS.characterImage) {
-    if (!charImages[entry.key]) charRenderState[entry.key] = "rendering";
-  } else if (entry.kind === GENERATION_KINDS.movie) {
-    movieGenerating.value = true;
-  }
-}
-
-async function reflectGenerationFinish(entry: PendingGeneration): Promise<void> {
-  if (entry.kind === GENERATION_KINDS.beatImage) {
-    const idx = Number(entry.key);
-    await loadExistingBeatImage(idx);
-    if (beatMayHaveMovie(effectiveBeat(idx))) await loadExistingBeatMovie(idx);
-    if (renderState[idx] === "rendering") Reflect.deleteProperty(renderState, idx);
-  } else if (entry.kind === GENERATION_KINDS.beatAudio) {
-    const idx = Number(entry.key);
-    await loadExistingBeatAudio(idx);
-    if (audioState[idx] === "generating") Reflect.deleteProperty(audioState, idx);
-  } else if (entry.kind === GENERATION_KINDS.characterImage) {
-    await loadExistingCharacterImage(entry.key);
-    if (charRenderState[entry.key] === "rendering") {
-      Reflect.deleteProperty(charRenderState, entry.key);
-    }
-  } else if (entry.kind === GENERATION_KINDS.movie) {
-    movieGenerating.value = false;
-    await refreshMoviePath();
-  } else if (entry.kind === GENERATION_KINDS.pdf) {
-    pdfGenerating.value = false;
-    await refreshPdfPath();
-  }
-}
-
-async function refreshMoviePath(): Promise<void> {
-  if (!filePath.value) return;
-  const response = await apiGet<{ moviePath?: string }>(endpoints.movieStatus.url, { filePath: filePath.value });
-  if (response.ok && response.data.moviePath) {
-    moviePath.value = response.data.moviePath;
-  }
-}
-
-async function generateMovie() {
-  movieGenerating.value = true;
-  movieError.value = null;
-  try {
-    const res = await apiFetchRaw(endpoints.generateMovie.url, {
-      method: "POST",
-      body: JSON.stringify({
-        filePath: filePath.value,
-        chatSessionId: chatSessionId.value,
-      }),
-      headers: { "Content-Type": "application/json" },
-    });
-    if (!res.ok || !res.body) throw new Error("Generation failed");
-    await streamMovieEvents(res.body, {
-      onBeatImageDone: (beatIndex) => {
-        loadExistingBeatImage(beatIndex);
-        refreshMissingCharacterImages();
-        if (beatMayHaveMovie(effectiveBeat(beatIndex))) void loadExistingBeatMovie(beatIndex);
-      },
-      onBeatAudioDone: (beatIndex) => loadExistingBeatAudio(beatIndex),
-      onDone: (path) => {
-        moviePath.value = path;
-      },
-    });
-  } catch (err) {
-    // Surface inline (instead of `alert()` which blocks + has no
-    // retry affordance). The error chip with a retry button lives
-    // next to the generate button in the template (#1197).
-    movieError.value = extractErrorMessage(err);
-  } finally {
-    movieGenerating.value = false;
-  }
-}
-
-// Bearer-authenticated movie download. apiFetchRaw auto-attaches the
-// Authorization header (which a plain `<a href download>` cannot), so
-// the route stays behind the standard /api/* bearer guard. The blob
-// is hooked to a synthetic anchor whose `download` attribute carries
-// the filename — the browser still surfaces a native save dialog.
-async function downloadMovie() {
-  if (!moviePath.value || movieDownloading.value) return;
-  movieDownloading.value = true;
-  let objectUrl: string | null = null;
-  try {
-    const res = await apiFetchRaw(endpoints.downloadMovie.url, {
-      method: "GET",
-      query: { moviePath: moviePath.value },
-    });
-    if (!res.ok) {
-      throw new Error(`HTTP ${res.status}`);
-    }
-    const blob = await res.blob();
-    objectUrl = URL.createObjectURL(blob);
-    const filename = moviePath.value.split("/").pop() ?? "movie.mp4";
-    const anchor = document.createElement("a");
-    anchor.href = objectUrl;
-    anchor.download = filename;
-    document.body.appendChild(anchor);
-    anchor.click();
-    anchor.remove();
-  } catch (err) {
-    alert(extractErrorMessage(err));
-  } finally {
-    if (objectUrl) URL.revokeObjectURL(objectUrl);
-    movieDownloading.value = false;
-  }
-}
-
-// --- PDF (#1614) ---------------------------------------------------
-//
-// Same triple as movie: status poll → SSE generate → bearer-auth
-// download. Reuses `streamMovieEvents`'s shape — the server emits
-// `beat_image_done` (per-beat image progress) and `done` (final
-// PDF), with `done` carrying `pdfPath` instead of `moviePath`.
-
-async function refreshPdfPath(): Promise<void> {
-  if (!filePath.value) return;
-  const response = await apiGet<{ pdfPath?: string }>(endpoints.pdfStatus.url, { filePath: filePath.value });
-  if (response.ok && response.data.pdfPath) {
-    pdfPath.value = response.data.pdfPath;
-  }
-}
-
-async function generatePdf() {
-  pdfGenerating.value = true;
-  try {
-    const res = await apiFetchRaw(endpoints.generatePdf.url, {
-      method: "POST",
-      body: JSON.stringify({
-        filePath: filePath.value,
-        chatSessionId: chatSessionId.value,
-      }),
-      headers: { "Content-Type": "application/json" },
-    });
-    if (!res.ok || !res.body) throw new Error("PDF generation failed");
-    // Re-use `streamMovieEvents`: the server emits the same per-beat
-    // image progress + a terminal `done` event whose payload here is
-    // `{ pdfPath }` (not `moviePath`). `onDone`'s argument is the
-    // raw string parser surfaced via `moviePath`, so we just rebind
-    // it locally.
-    await streamMovieEvents(res.body, {
-      onBeatImageDone: (beatIndex) => {
-        loadExistingBeatImage(beatIndex);
-        refreshMissingCharacterImages();
-      },
-      onBeatAudioDone: () => {
-        // PDF flow doesn't run audio; ignore.
-      },
-      onDone: (path) => {
-        pdfPath.value = path;
-      },
-    });
-  } catch (err) {
-    alert(extractErrorMessage(err));
-  } finally {
-    pdfGenerating.value = false;
-  }
-}
-
-async function downloadPdf() {
-  if (!pdfPath.value || pdfDownloading.value) return;
-  pdfDownloading.value = true;
-  let objectUrl: string | null = null;
-  try {
-    const res = await apiFetchRaw(endpoints.downloadPdf.url, {
-      method: "GET",
-      query: { pdfPath: pdfPath.value },
-    });
-    if (!res.ok) {
-      throw new Error(`HTTP ${res.status}`);
-    }
-    const blob = await res.blob();
-    objectUrl = URL.createObjectURL(blob);
-    const filename = pdfPath.value.split("/").pop() ?? "deck.pdf";
-    const anchor = document.createElement("a");
-    anchor.href = objectUrl;
-    anchor.download = filename;
-    document.body.appendChild(anchor);
-    anchor.click();
-    anchor.remove();
-  } catch (err) {
-    alert(extractErrorMessage(err));
-  } finally {
-    if (objectUrl) URL.revokeObjectURL(objectUrl);
-    pdfDownloading.value = false;
-  }
-}
-</script>
-
-<style scoped>
-.bottom-bar-wrapper {
-  position: relative;
-  flex-shrink: 0;
-}
-
-.script-source {
-  padding: 0.5rem;
-  background: #f5f5f5;
-  border-top: 1px solid #e0e0e0;
-  font-family: Consolas, "MS Gothic", "BIZ UDGothic", monospace;
-  font-size: 0.85rem;
-}
-
-.script-source summary {
-  cursor: pointer;
-  user-select: none;
-  padding: 0.5rem;
-  background: #e8e8e8;
-  border-radius: 4px;
-  font-weight: 500;
-  color: #333;
-}
-
-.script-source[open] summary {
-  margin-bottom: 0.5rem;
-}
-
-.script-source summary:hover {
-  background: #d8d8d8;
-}
-
-.script-editor {
-  width: 100%;
-  height: 40vh;
-  padding: 1rem;
-  background: #ffffff;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  color: #333;
-  font-family: "Courier New", "MS Gothic", "BIZ UDGothic", monospace;
-  font-size: 0.9rem;
-  resize: vertical;
-  margin-bottom: 0.5rem;
-  line-height: 1.5;
-}
-
-.script-editor:focus {
-  outline: none;
-  border-color: #4caf50;
-  box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
-}
-
-.script-editor-invalid {
-  border-color: #ef4444;
-}
-
-.script-editor-invalid:focus {
-  border-color: #ef4444;
-  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.1);
-}
-
-.editor-actions {
-  display: flex;
-  justify-content: space-between;
-}
-
-.apply-btn {
-  padding: 0.5rem 1rem;
-  background: #4caf50;
-  color: white;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  transition: background 0.2s;
-  font-weight: 500;
-}
-
-.apply-btn:hover {
-  background: #45a049;
-}
-
-.apply-btn:disabled {
-  background: #cccccc;
-  color: #666666;
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-.cancel-btn {
-  padding: 0.5rem 1rem;
-  background: #e0e0e0;
-  color: #333;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 0.9rem;
-  transition: background 0.2s;
-  font-weight: 500;
-}
-
-.cancel-btn:hover {
-  background: #d0d0d0;
-}
-
-.copy-btn {
-  position: absolute;
-  bottom: 0.3rem;
-  right: 0.65rem;
-  padding: 0.4rem;
-  background: none;
-  border: none;
-  color: #333;
-  cursor: pointer;
-  z-index: 1;
-}
-
-.copy-btn:hover {
-  color: #000;
-}
-
-.copy-btn .material-icons {
-  font-size: 1.15rem;
-}
-</style>