@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/pages/VideoPage/components/ThumbnailPanel.tsx

@@ -0,0 +1,252 @@
+/* --- thumbnail (optional, on request: tools/thumbnail.mjs + skill av-thumbnail) ---------------------- */
+
+import { useState } from "react";
+import { useSessionFor } from "../../../hooks/useSessions";
+import { api, enc, send, type ActionResult } from "../../../lib/api";
+import { findFile, mediaUrl } from "../../../lib/media";
+import { timeAgo } from "../../../lib/format";
+import { openLightbox } from "../../../components/Lightbox";
+import { ResultMessage } from "../../../components/ResultMessage";
+import { Check, DownloadSimple, ImageSquare, PaperPlane, Pencil, Shuffle, Sparkle, X } from "../../../components/icons";
+import type { VideoDetail } from "../../../types/api";
+
+/* the same size the tool uses, to show before generating */
+function thumbnailSize(f: { aspect?: string; w: number; h: number } | null | undefined) {
+  if (!f) return null;
+  const aspect = f.aspect ?? `${f.w}:${f.h}`;
+  if (aspect === "16:9") return { aspect, w: 1280, h: 720 };
+  if (aspect === "9:16") return { aspect, w: 1080, h: 1920 };
+  return { aspect, w: f.w, h: f.h };
+}
+
+const RANDOM_VERSIONS = ["v1", "v2", "v3"] as const;
+
+export function ThumbnailPanel({ video }: { video: VideoDetail }) {
+  const session = useSessionFor("video", video.slug);
+  const t = video.thumbnail;
+  const request = video.thumbnailRequest;
+  const size = t?.format ?? thumbnailSize(video.scenes?.format ?? video.format);
+  const byId = new Map((t?.versions ?? []).map(ver => [ver.id, ver]));
+  const manual = byId.get("v4");
+  const [instruction, setInstruction] = useState(manual?.instruction ?? request?.manual?.instruction ?? "");
+  const [busy, setBusy] = useState<string | null>(null);
+  const [response, setResponse] = useState<ActionResult>(null);
+  /* the version open to ask a change, and the text of each one */
+  const [changing, setChanging] = useState<string | null>(null);
+  const [changeText, setChangeText] = useState<Record<string, string>>({});
+  const thumbnail = api.videos[":slug"].thumbnail;
+  const param = { slug: enc(video.slug) };
+
+  /* a request newer than its versions: Claude is still making it, or stopped before delivering */
+  const generatedAt = (id: string) => byId.get(id)?.generated_at ?? t?.generated_at ?? "";
+  const waitRandom = !!request?.random && RANDOM_VERSIONS.some(id => generatedAt(id) < request.random!.at);
+  const waitManual = !!request?.manual && generatedAt("v4") < request.manual.at;
+  /* a running session takes no other request: both buttons wait for it to stop */
+  const running = session?.state === "running";
+  const ask = async (mode: "random" | "manual") => {
+    setBusy(mode);
+    setResponse(null);
+    setResponse(
+      await send(thumbnail.$post({ param, json: { mode, instruction: mode === "manual" ? instruction : undefined } })),
+    );
+    setBusy(null);
+  };
+  /* change a ready version: Claude keeps everything and changes only what was asked */
+  const change = async (id: string) => {
+    setBusy(`change-${id}`);
+    setResponse(null);
+    const r = await send(
+      thumbnail.$post({ param, json: { mode: "change", version: id, instruction: changeText[id] } }),
+    );
+    setResponse(r);
+    if (r.ok) {
+      setChanging(null);
+      setChangeText(c => ({ ...c, [id]: "" }));
+    }
+    setBusy(null);
+  };
+  /* the selected one is the cover the publication (now or scheduled) sends */
+  const select = async (version: string) => {
+    setBusy(version);
+    setResponse(null);
+    setResponse(await send(thumbnail.choose.$post({ param, json: { version } })));
+    setBusy(null);
+  };
+
+  const versionCard = (id: string, label: string, waiting: boolean) => {
+    const ver = byId.get(id);
+    const file = ver ? findFile(video, ver.png) : null;
+    const src = file ? mediaUrl(video, file) : null;
+    const selected = t?.selected === id;
+    const changeReq = request?.changes?.[id];
+    /* change requested and the image is still the old one */
+    const changingNow = !!changeReq && generatedAt(id) < changeReq.at;
+    return (
+      <figure key={id} className={`thumbnail-version${selected ? " chosen" : ""}`}>
+        <button
+          className="thumbnail-img"
+          onClick={() => src && openLightbox(src, `${ver!.name} (${id})`)}
+          disabled={!src}
+          title="ampliar"
+        >
+          {src ? (
+            <img src={src} alt={ver!.name} loading="lazy" />
+          ) : (
+            <span className="empty">{waiting ? (running ? "Criando…" : "Não chegou") : label}</span>
+          )}
+        </button>
+        {src && (
+          <span className="thumbnail-actions">
+            {selected ? (
+              <button
+                className="button small"
+                disabled={!!busy}
+                onClick={() => select("none")}
+                title="A publicação volta a usar um quadro do vídeo"
+              >
+                {busy === "none" ? (
+                  "Tirando…"
+                ) : (
+                  <>
+                    <Check className="ic" weight="bold" /> Na publicação · tirar
+                  </>
+                )}
+              </button>
+            ) : (
+              <button className="button small primary" disabled={!!busy} onClick={() => select(id)}>
+                <ImageSquare className="ic" /> {busy === id ? "Gravando…" : "Usar este na publicação"}
+              </button>
+            )}
+            <a className="button small" href={src} download={`${video.slug}-${id}.png`}>
+              <DownloadSimple className="ic" /> Baixar
+            </a>
+          </span>
+        )}
+        {src &&
+          (changing === id ? (
+            <span className="thumbnail-change">
+              <textarea
+                rows={3}
+                value={changeText[id] ?? ""}
+                maxLength={600}
+                autoFocus
+                disabled={!!busy || running}
+                placeholder="Só o que muda: ex. troque a cor do número para amarelo. O resto fica igual."
+                onChange={e => setChangeText(c => ({ ...c, [id]: e.target.value }))}
+              />
+              <span className="thumbnail-actions">
+                <button
+                  className="button small primary"
+                  disabled={!!busy || running || !(changeText[id] ?? "").trim()}
+                  onClick={() => change(id)}
+                >
+                  <PaperPlane className="ic" /> {busy === `change-${id}` ? "Pedindo…" : "Pedir alteração"}
+                </button>
+                <button className="button small" disabled={!!busy} onClick={() => setChanging(null)}>
+                  <X className="ic" /> Cancelar
+                </button>
+              </span>
+            </span>
+          ) : (
+            <button
+              className="button small"
+              disabled={!!busy || running || changingNow}
+              onClick={() => setChanging(id)}
+              title="O agente mantém tudo como está e muda só o que você pedir"
+            >
+              <Pencil className="ic" />{" "}
+              {changingNow ? (running ? "Alterando…" : "Alteração não chegou") : "Pedir alteração"}
+            </button>
+          ))}
+        <figcaption>
+          <span className="subtle mono">
+            {id} · {label}
+          </span>
+          {ver && <b>{ver.name}</b>}
+          {ver?.description && <span className="subtle">{ver.description}</span>}
+          {ver?.change && <span className="subtle">Alterada: “{ver.change.instruction}”</span>}
+        </figcaption>
+      </figure>
+    );
+  };
+
+  return (
+    <section className="thumbnail">
+      <header className="thumbnail-top">
+        <h3>
+          Thumbnail <span className="subtle">Opcional{size ? ` · ${size.w}×${size.h} (${size.aspect})` : ""}</span>
+        </h3>
+      </header>
+
+      <p className="hint">
+        Não é gerada sozinha: peça quando quiser. Em HTML, SVG e CSS, no estilo deste vídeo e na proporção dele
+        {size ? ` (${size.w}×${size.h})` : ""}: três ideias sorteadas e uma com a sua instrução. A selecionada vai de
+        capa quando o vídeo for publicado ou a agenda rodar, no YouTube e no Instagram (o TikTok não aceita imagem pela
+        API). Em qualquer versão pronta, "Pedir alteração" muda só o que você escrever e mantém o resto igual; a versão
+        anterior fica guardada no histórico do vídeo.
+      </p>
+
+      {size && (
+        <div
+          className={`thumbnail-versions${t?.selected ? " has-chosen" : ""}`}
+          style={{ ["--aspect" as string]: `${size.w} / ${size.h}` }}
+        >
+          {RANDOM_VERSIONS.map((id, i) => versionCard(id, `Aleatória ${i + 1}`, waitRandom))}
+          <div className="thumbnail-manual">
+            {versionCard("v4", "Sua instrução", waitManual)}
+            {manual?.instruction && <p className="subtle">“{manual.instruction}”</p>}
+            <textarea
+              rows={3}
+              value={instruction}
+              maxLength={600}
+              disabled={!!busy || running}
+              placeholder="Como você quer: o que aparece, a frase, a cor, o enquadramento…"
+              onChange={e => setInstruction(e.target.value)}
+            />
+            <button
+              className="button"
+              disabled={!!busy || running || !instruction.trim()}
+              onClick={() => ask("manual")}
+            >
+              <Sparkle className="ic" />{" "}
+              {busy === "manual"
+                ? "Pedindo…"
+                : running && waitManual
+                  ? "Criando…"
+                  : manual
+                    ? "Refazer a minha"
+                    : "Gerar a minha"}
+            </button>
+          </div>
+        </div>
+      )}
+
+      <div className="thumbnail-request">
+        <button className="button" disabled={!!busy || running || !size} onClick={() => ask("random")}>
+          <Shuffle className="ic" />{" "}
+          {busy === "random"
+            ? "Pedindo…"
+            : running && waitRandom
+              ? "Criando…"
+              : RANDOM_VERSIONS.some(id => byId.has(id))
+                ? "Sortear outras 3"
+                : "Gerar 3 aleatórias"}
+        </button>
+        {running && (waitRandom || waitManual) && (
+          <span className="subtle">O agente está criando… acompanhe na sessão acima. Elas aparecem aqui sozinhas.</span>
+        )}
+      </div>
+
+      {!running && (waitRandom || waitManual) && (
+        <p className="warning">
+          O pedido{" "}
+          {waitRandom && waitManual ? "das aleatórias e da sua" : waitRandom ? "das aleatórias" : "da sua versão"} foi
+          feito {timeAgo((waitManual ? request!.manual! : request!.random!).at)}, mas a sessão do vídeo não está rodando
+          e as imagens não chegaram: veja o que ela respondeu na sessão acima, ou peça de novo.
+        </p>
+      )}
+
+      <ResultMessage result={response} />
+    </section>
+  );
+}

package/studio/web/pages/VideoPage/components/TimingPanel.tsx

@@ -0,0 +1,89 @@
+/* Where each line and scene fell in time: a timeline and the table */
+
+import { formatSeconds } from "../../../lib/format";
+import type { StageDef } from "../../../lib/stages";
+import type { VideoDetail } from "../../../types/api";
+import { EmptyResult } from "./StageResult";
+
+export function TimingPanel({ video, stage }: { video: VideoDetail; stage: StageDef }) {
+  const r = video.resolved;
+  if (!r) return <EmptyResult stage={stage} text={video.resolvedError ?? "Sem cenas ainda."} />;
+  const total = r.total_duration || 1;
+  const marks = Array.from({ length: Math.floor(total / 5) + 1 }, (_, i) => i * 5);
+  return (
+    <>
+      {r.provisional && <p className="note">Tempos provisórios: falas sem voz estão estimadas pelo ritmo médio.</p>}
+      <div className="timeline">
+        <div className="tl-ruler">
+          {marks.map(t => (
+            <span key={t} style={{ left: `${(t / total) * 100}%` }}>
+              {t}s
+            </span>
+          ))}
+        </div>
+        <div className="tl-lane">
+          {r.scenes.map(c => (
+            <div
+              key={c.id}
+              className="tl-scene"
+              style={{ left: `${(c.start / total) * 100}%`, width: `${(c.duration / total) * 100}%` }}
+              title={`${c.id} · começa em ${formatSeconds(c.start, 2)} · dura ${formatSeconds(c.duration, 2)}`}
+            >
+              <span className="tl-id">{c.id}</span>
+              {c.lines.map(f => (
+                <span
+                  key={f.id}
+                  className="tl-line"
+                  title={`${f.id} · ${formatSeconds(f.start, 2)} a ${formatSeconds(f.end, 2)}`}
+                  style={{
+                    left: `${(f.start / c.duration) * 100}%`,
+                    width: `${((f.end - f.start) / c.duration) * 100}%`,
+                  }}
+                />
+              ))}
+              {c.beats
+                .filter(b => b.t != null)
+                .map(b => (
+                  <span
+                    key={b.element}
+                    className="tl-beat"
+                    title={`${b.element} · ${formatSeconds(b.t, 2)}`}
+                    style={{ left: `${((b.t ?? 0) / c.duration) * 100}%` }}
+                  />
+                ))}
+            </div>
+          ))}
+        </div>
+        <p className="tl-caption">
+          <span className="tl-line sample" /> Fala <span className="tl-beat sample" /> Beat
+        </p>
+      </div>
+      <table className="table">
+        <thead>
+          <tr>
+            <th>Cena</th>
+            <th>Começa</th>
+            <th>Dura</th>
+            <th>Falas</th>
+            <th>Beats</th>
+          </tr>
+        </thead>
+        <tbody>
+          {r.scenes.map(c => (
+            <tr key={c.id}>
+              <td className="mono">{c.id}</td>
+              <td className="mono">{formatSeconds(c.start, 2)}</td>
+              <td className="mono">{formatSeconds(c.duration, 2)}</td>
+              <td className="subtle">
+                {c.lines.map(f => `${f.id} ${formatSeconds(f.start, 2)}–${formatSeconds(f.end, 2)}`).join(" · ")}
+              </td>
+              <td className="subtle">
+                {c.beats.map(b => `${b.element} ${b.t != null ? formatSeconds(b.t, 2) : b.error}`).join(" · ")}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  );
+}

package/studio/web/pages/VideoPage/components/VideoPlayer.tsx

@@ -0,0 +1,18 @@
+import { aspectRatio, chosenCover, mediaUrl } from "../../../lib/media";
+import type { VideoDetail } from "../../../types/api";
+
+/* with a chosen thumbnail, it is the poster: it goes away on play and the video plays */
+export function VideoPlayer({ video, src }: { video: VideoDetail; src: string }) {
+  const vertical = !video.format || video.format.h > video.format.w;
+  return (
+    <div className={`player ${vertical ? "vertical" : "horizontal"}`} style={{ aspectRatio: aspectRatio(video) }}>
+      <video
+        src={src}
+        poster={mediaUrl(video, chosenCover(video)) ?? undefined}
+        controls
+        preload="metadata"
+        playsInline
+      />
+    </div>
+  );
+}

package/studio/web/pages/VideoPage/components/VideoSkeleton.tsx

@@ -0,0 +1,50 @@
+/* The whole page before the video arrives: header, the 8-stage rail and the result */
+
+import { Link } from "@tanstack/react-router";
+import { Skeleton } from "../../../components/ui/skeleton";
+import { ArrowLeft } from "../../../components/icons";
+
+export function VideoSkeleton() {
+  return (
+    <div className="page video" aria-busy="true" aria-label="Carregando o vídeo">
+      <header className="video-header">
+        <Link to="/videos" className="back">
+          <ArrowLeft className="ic" /> Conteúdos
+        </Link>
+        <div className="video-title">
+          <Skeleton style={{ height: 30, width: "42%", minWidth: 200 }} />
+        </div>
+        <div className="meta">
+          <Skeleton className="row" style={{ width: 220 }} />
+          <Skeleton className="row" style={{ width: 150 }} />
+          <Skeleton className="row" style={{ width: 90 }} />
+        </div>
+      </header>
+      <nav className="rail">
+        <ul className="stepper">
+          {Array.from({ length: 8 }, (_, i) => (
+            <li key={i} className="step">
+              <span
+                style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 5, padding: "8px 2px" }}
+              >
+                <Skeleton className="round" style={{ width: 22, height: 22 }} />
+                <Skeleton className="row" style={{ width: "60%", height: 12 }} />
+              </span>
+            </li>
+          ))}
+        </ul>
+      </nav>
+      <div className="stage-panel">
+        <section className="result">
+          <header className="result-top">
+            <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+              <Skeleton className="row" style={{ width: 120, height: 12 }} />
+              <Skeleton style={{ width: 200, height: 24 }} />
+            </div>
+          </header>
+          <Skeleton style={{ height: 260, borderRadius: "var(--radius)" }} />
+        </section>
+      </div>
+    </div>
+  );
+}

package/studio/web/pages/VideoPage/components/VideoVoiceInfo.tsx

@@ -0,0 +1,33 @@
+/* What the voice did with a line: duration, who made it, pace */
+
+import { PROVIDER_NAME } from "../../../lib/providers";
+import { formatSeconds } from "../../../lib/format";
+import type { Line } from "../../../types/api";
+import { WithLogo } from "./WithLogo";
+
+export function VideoVoiceInfo({ line: f }: { line: Line }) {
+  const pace = f.dur ? f.text.split(/\s+/).length / f.dur : null;
+  const fallback = !!f.provider && !!f.provider_requested && f.provider !== f.provider_requested;
+  return (
+    <div className="line-header">
+      {f.dur != null && <span>{formatSeconds(f.dur, 2)}</span>}
+      <span
+        className={fallback ? "warning" : "subtle"}
+        title={fallback ? `Fallback: o pedido era ${PROVIDER_NAME[f.provider_requested!] ?? f.provider_requested}` : ""}
+      >
+        <WithLogo id={f.provider ?? "voicestudio"}>
+          {PROVIDER_NAME[f.provider ?? "voicestudio"] ?? f.provider}
+          {fallback ? " (fallback)" : ""}
+        </WithLogo>
+      </span>
+      {pace != null && (
+        <span
+          className={pace < 2.2 || pace > 4.5 ? "warning" : "subtle"}
+          title="Palavras por segundo; a voz do Pedro fica entre 2,3 e 3,4"
+        >
+          {pace.toLocaleString("pt-BR", { maximumFractionDigits: 1 })} pal/s
+        </span>
+      )}
+    </div>
+  );
+}

package/studio/web/pages/VideoPage/components/VideoVoicePicker.tsx

@@ -0,0 +1,165 @@
+/* The video's provider; the others in the order stay as fallback. It applies to the whole video:
+   the one for a single line sits next to its "Gerar outra fala" (LineTakes). */
+
+import { useState } from "react";
+import { useVoiceRunning } from "../../../hooks/useVoiceRunning";
+import type { VideoVoice } from "../../../hooks/useVideoVoice";
+import { api, enc, send, type ActionResult } from "../../../lib/api";
+import { findFile, mediaUrl } from "../../../lib/media";
+import { PROVIDER_NAME } from "../../../lib/providers";
+import { Picker } from "../../../components/ui/picker";
+import { VoiceProfilePicker } from "../../../components/VoiceProfilePicker";
+import { ResultMessage } from "../../../components/ResultMessage";
+import { ArrowClockwise, Microphone } from "../../../components/icons";
+import type { VideoDetail } from "../../../types/api";
+import { scenesOf } from "./StageResult";
+import { SequencePlayer, type SequenceTrack } from "./SequencePlayer";
+import { WithLogo } from "./WithLogo";
+
+export function VideoVoicePicker({ video, voice }: { video: VideoDetail; voice: VideoVoice }) {
+  const running = useVoiceRunning(video);
+  const [response, setResponse] = useState<ActionResult>(null);
+  const [requesting, setRequesting] = useState(false);
+  const [voiceChanged, setVoiceChanged] = useState(false);
+  const [confirm, setConfirm] = useState(false);
+  const { profiles, defaultProfile, reloadProfiles, currentProfile, profileOrder, providers, current } = voice;
+  const voiceApi = api.videos[":slug"].voice;
+  const param = { slug: enc(video.slug) };
+  const swapProvider = async (provider: string) => {
+    setResponse(null);
+    setResponse(await send(voiceApi.$post({ param, json: { provider } })));
+  };
+  const swapProfile = async (voice_profile: string) => {
+    setResponse(null);
+    setConfirm(false);
+    const r = await send(voiceApi.$post({ param, json: { voice_profile } }));
+    setResponse(r);
+    /* swapping the voice regenerates nothing: the regenerate-all button becomes the invitation */
+    if (r.ok) setVoiceChanged(true);
+  };
+  /* regenerating everything spends provider credit: asks for a second click */
+  const regenerateAll = async () => {
+    if (!confirm) {
+      setConfirm(true);
+      return;
+    }
+    setConfirm(false);
+    setRequesting(true);
+    const r = await send(voiceApi["regenerate-all"].$post({ param, json: {} }));
+    setResponse(r);
+    if (r.ok) setVoiceChanged(false);
+    setRequesting(false);
+  };
+  const lines = scenesOf(video).flatMap(c => c.lines ?? []);
+  /* lines with audio asked from another provider: what `voice` would redo with the current voice.
+     A line without `provider` is from before providers and does not count (omnivideo.py ignores it too).
+     Swapping only the profile does not show here: the `voice` hash catches that when generating again. */
+  const outdated = lines.filter(
+    f => f.wav && f.provider && !f.provider_pinned && (f.provider_requested ?? f.provider) !== current,
+  );
+  const generateAll = async () => {
+    setRequesting(true);
+    setResponse(await send(voiceApi.generate.$post({ param, json: {} })));
+    setRequesting(false);
+  };
+  const currentName = PROVIDER_NAME[current] ?? current;
+  const fallback = providers.filter(p => p.id !== current);
+  const voiced = lines.filter(f => f.wav).length;
+  /* the lines in scene order, with the audio in use */
+  const tracks: SequenceTrack[] = scenesOf(video).flatMap(c =>
+    (c.lines ?? []).flatMap(f => {
+      const file = findFile(video, f.wav);
+      return file ? [{ id: f.id, scene: c.id, text: f.text, src: mediaUrl(video, file)!, dur: f.dur }] : [];
+    }),
+  );
+  const label = profileOrder ? "Tentar primeiro" : "Voz deste vídeo";
+  return (
+    <div className="voice-picker">
+      {profiles && profiles.length > 0 && (
+        <VoiceProfilePicker
+          profiles={profiles}
+          defaultId={defaultProfile}
+          value={currentProfile}
+          onChange={id => {
+            if (video.scenes) swapProfile(id);
+          }}
+          onDefaultChange={reloadProfiles}
+        />
+      )}
+      <div className="voice-picker-row">
+        <label className="field">
+          <span>{label}</span>
+          <Picker
+            aria-label={label}
+            value={current}
+            disabled={!video.scenes}
+            onChange={swapProvider}
+            options={(providers.length
+              ? providers
+              : [{ id: current, name: PROVIDER_NAME[current] ?? current, ready: true, default: true, reason: null }]
+            ).map(p => ({
+              value: p.id,
+              label: (
+                <WithLogo
+                  id={p.id}
+                >{`${p.name}${p.default ? " (padrão)" : ""}${p.ready ? "" : ` · ${p.reason}`}`}</WithLogo>
+              ),
+            }))}
+          />
+        </label>
+        {outdated.length > 0 && (
+          <button
+            className="button primary"
+            onClick={generateAll}
+            disabled={requesting || !!running}
+            title={
+              running
+                ? "A voz deste vídeo já está sendo gerada"
+                : `Gera de novo as ${outdated.length} falas que saíram em outra voz`
+            }
+          >
+            <Microphone className="ic" />{" "}
+            {requesting
+              ? "Pedindo…"
+              : `Gerar as ${outdated.length} ${outdated.length === 1 ? "fala" : "falas"} com ${currentName}`}
+          </button>
+        )}
+        {voiced > 0 && (
+          <button
+            className={`button ${confirm ? "danger" : voiceChanged && outdated.length === 0 ? "primary" : ""}`}
+            onClick={regenerateAll}
+            disabled={requesting || !!running}
+            onBlur={() => setConfirm(false)}
+            title={
+              running
+                ? "A voz deste vídeo já está sendo gerada"
+                : `Gera de novo as ${voiced} falas, mesmo as que estão em dia, com ${currentName} e a voz de agora`
+            }
+          >
+            <ArrowClockwise className="ic" />{" "}
+            {requesting
+              ? "Pedindo…"
+              : confirm
+                ? `Gastar crédito e regerar as ${voiced}?`
+                : `Regerar tudo com ${currentName}`}
+          </button>
+        )}
+      </div>
+      {tracks.length > 0 && <SequencePlayer tracks={tracks} />}
+      {voiceChanged && (
+        <p className="hint warning">
+          Voz trocada: as {voiced} falas continuam na voz anterior até serem geradas de novo. “Regerar tudo” refaz todas
+          com {currentName}.
+        </p>
+      )}
+      <p className="hint">
+        Se ele falhar, a fala sai de {fallback.map(p => p.name).join(" e depois de ") || "Outro provider"}. Trocar a voz
+        não gera nada sozinho: “Gerar outra fala”, em uma fala, gera só aquela fala, na voz de agora (ou no provider que
+        você escolher ao lado do botão).
+        {outdated.length > 0 && ` O botão acima gera as ${outdated.length} que ficaram na voz antiga.`}
+        {!video.scenes && " O vídeo ainda não tem scenes.json: vale a voz do pedido."}
+      </p>
+      <ResultMessage result={response} />
+    </div>
+  );
+}

package/studio/web/pages/VideoPage/components/VoicePauseBanner.tsx

@@ -0,0 +1,56 @@
+/* Voice swapped from the screen: what came after it stopped and waits for the user to finish
+   choosing. "Seguir com estas vozes" lifts the pause and resumes the agent (api/services/voice-pause.ts) */
+
+import { useState } from "react";
+import { useVoiceRunning } from "../../../hooks/useVoiceRunning";
+import { api, enc, send, type ActionResult } from "../../../lib/api";
+import { TOOL_LABEL } from "../../../lib/format";
+import { ArrowRight } from "../../../components/icons";
+import type { VideoDetail } from "../../../types/api";
+
+export function VoicePauseBanner({ video }: { video: VideoDetail }) {
+  const running = useVoiceRunning(video);
+  const [sending, setSending] = useState(false);
+  const [response, setResponse] = useState<ActionResult>(null);
+  const pause = video.status?.stages.find(e => e.id === "voice")?.pause;
+  if (!pause) return null;
+  const swapped = pause.lines.filter(f => /^c\d+f\d+$/.test(f));
+  const removed = pause.removed ?? [];
+  const which = [
+    pause.lines.includes("all")
+      ? "todas as falas"
+      : pause.lines.includes("video-voice") && !swapped.length
+        ? "a voz do vídeo"
+        : swapped.join(", "),
+    removed.length ? `${removed.join(", ")} fora da narração` : "",
+  ]
+    .filter(Boolean)
+    .join("; ");
+  const stopped = [
+    ...pause.interrupted.map(t => TOOL_LABEL[t]?.toLowerCase() ?? t),
+    ...(pause.claude_stopped ? ["o agente"] : []),
+  ];
+  const proceed = async () => {
+    setSending(true);
+    setResponse(await send(api.videos[":slug"].voice.proceed.$post({ param: { slug: enc(video.slug) }, json: {} })));
+    setSending(false);
+  };
+  return (
+    <div className="voices-notice">
+      <p className="warning">
+        Vozes em escolha ({which}): render, legenda e montagem esperam você terminar
+        {stopped.length ? `. Parei ${stopped.join(", ")}, que já não serviam` : ""}.
+      </p>
+      <div className="actions">
+        <button className="button primary small" onClick={proceed} disabled={sending || !!running || !!response?.ok}>
+          <ArrowRight className="ic" /> {running ? "Esperando a voz terminar…" : "Seguir com estas vozes"}
+        </button>
+        {response && (
+          <span className={`response ${response.ok ? "ok" : "error"}`}>
+            {response.ok ? response.output : response.error}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}