@crievo/omni 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,63 @@
+/* No carousel yet: the request for the agent to create it (from the dir's video, if any). */
+
+import { useState } from "react";
+import { api, enc, send } from "../../../lib/api";
+import { Carousel, Sparkle, X } from "../../../components/icons";
+import type { VideoDetail } from "../../../types/api";
+
+export function CarouselCreate({ video, compact = false }: { video: VideoDetail; compact?: boolean }) {
+  const [open, setOpen] = useState(!compact);
+  const [note, setNote] = useState("");
+  const [sending, setSending] = useState(false);
+  const [result, setResult] = useState<{ ok: boolean; text: string } | null>(null);
+  const fromVideo = !!video.texts.script;
+  const request = async () => {
+    setSending(true);
+    const r = await send(
+      api.videos[":slug"].carousel.create.$post({ param: { slug: enc(video.slug) }, json: { note } }),
+    );
+    setSending(false);
+    setResult({
+      ok: r.ok,
+      text: r.ok ? "Pedido enviado: o agente começou o carrossel" : (r.error ?? "Não deu para pedir"),
+    });
+  };
+  if (!open) {
+    return (
+      <button type="button" className="button small" onClick={() => setOpen(true)}>
+        <Carousel className="ic" /> Fazer carrossel
+      </button>
+    );
+  }
+  return (
+    <div className="ig-carousel-create">
+      <p>
+        {fromVideo
+          ? "O agente faz um carrossel do Instagram a partir do roteiro deste vídeo, no mesmo estilo dele. O vídeo não muda."
+          : "O agente escreve o roteiro do carrossel a partir do pedido e compõe cada slide em código."}
+      </p>
+      <label className="field">
+        <span>
+          O que você quer no carrossel <em>Opcional</em>
+        </span>
+        <textarea
+          rows={2}
+          value={note}
+          onChange={e => setNote(e.target.value)}
+          placeholder="Ex.: 6 slides, foco no passo a passo, CTA para salvar"
+        />
+      </label>
+      <div className="actions">
+        {compact && (
+          <button type="button" className="button" onClick={() => setOpen(false)}>
+            <X className="ic" /> Cancelar
+          </button>
+        )}
+        <button type="button" className="button primary" disabled={sending || result?.ok} onClick={request}>
+          <Sparkle className="ic" /> {sending ? "Pedindo…" : "Criar carrossel"}
+        </button>
+      </div>
+      {result && <p className={`response ${result.ok ? "ok" : "error"}`}>{result.text}</p>}
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+/* A carousel stage before carousel/carousel.json exists: being started, or the request to create it. */
+
+import type { StageDef } from "../../../lib/stages";
+import type { VideoDetail } from "../../../types/api";
+import { CarouselCreate } from "./CarouselCreate";
+
+export function CarouselMissing({ video, stage }: { video: VideoDetail; stage: StageDef }) {
+  if (video.deliverables.includes("carousel")) {
+    return (
+      <div className="ig-carousel-empty">
+        <p className="empty result-empty">
+          O carrossel ainda está sendo começado. Quem faz: {stage.owner}. Se a sessão do agente parou, peça de novo:
+        </p>
+        <CarouselCreate video={video} compact />
+      </div>
+    );
+  }
+  return <CarouselCreate video={video} />;
+}

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

@@ -0,0 +1,173 @@
+/* --- carousel 3: publish ------------------------------------------------------------------- */
+
+import { useEffect, useState, type ReactNode } from "react";
+import { VideoOmnichatPanel } from "../../../components/VideoOmnichatPanel";
+import { Carousel, ChatsCircle, DownloadSimple, FloppyDisk, PaperPlane, X } from "../../../components/icons";
+import { api, enc, send } from "../../../lib/api";
+import { formatWhen } from "../../../lib/format";
+import { mediaUrl } from "../../../lib/media";
+import { useOmniHandle } from "../../../lib/omni-ui";
+import { stageTabsKey } from "../../../../shared/omni-screens";
+import type { StageResultProps } from "./StageResult";
+import { CarouselMissing } from "./CarouselMissing";
+import { CarouselViewer } from "./CarouselViewer";
+
+export function CarouselPublishStage({ video, stage }: StageResultProps) {
+  const c = video.carousel;
+  const [tab, setTab] = useState<"post" | "omnichat">("post");
+  /* Omni opens the tabs (navigate with stage carousel-publish and tab) */
+  useOmniHandle(stageTabsKey(video.slug, "carousel-publish"), {
+    openTab: (t: string) => setTab(t === "omnichat" ? "omnichat" : "post"),
+  });
+  const saved = c?.publication?.caption ?? c?.caption ?? "";
+  const [caption, setCaption] = useState(saved);
+  const [confirm, setConfirm] = useState(false);
+  const [busy, setBusy] = useState<null | "save" | "publish">(null);
+  const [result, setResult] = useState<{ ok: boolean; text: string } | null>(null);
+  /* the saved caption changed elsewhere (the agent rewrote it): follow the new one if not edited */
+  const [base, setBase] = useState(saved);
+  useEffect(() => {
+    if (saved !== base) {
+      if (caption === base) setCaption(saved);
+      setBase(saved);
+    }
+  }, [saved]);
+  if (!c) return <CarouselMissing video={video} stage={stage} />;
+  const comp = c.stages.find(s => s.id === "composition");
+  if (!comp?.ok)
+    return (
+      <p className="empty result-empty">
+        O carrossel ainda não está pronto para publicar{comp?.missing ? `: falta ${comp.missing}` : ""}.
+      </p>
+    );
+  const ig = c.publication?.instagram;
+  const changed = caption.trim() !== saved.trim();
+
+  const save = async () => {
+    setBusy("save");
+    const r = await send(
+      api.videos[":slug"].carousel.caption.$post({ param: { slug: enc(video.slug) }, json: { caption } }),
+    );
+    setBusy(null);
+    setResult({ ok: r.ok, text: r.ok ? "Legenda gravada" : (r.error ?? "Não deu para gravar") });
+  };
+  const publish = async () => {
+    setBusy("publish");
+    setResult(null);
+    const r = await send(
+      api.videos[":slug"].carousel.publish.$post({
+        param: { slug: enc(video.slug) },
+        json: { caption, republish: !!ig?.id },
+      }),
+    );
+    setBusy(null);
+    setConfirm(false);
+    setResult({ ok: r.ok, text: (r.ok ? r.output : r.error) ?? (r.ok ? "Publicado" : "Não deu para publicar") });
+  };
+
+  const tabs: [typeof tab, string, ReactNode][] = [
+    ["post", "Post", <Carousel className="ic" />],
+    ["omnichat", "Omnichat", <ChatsCircle className="ic" />],
+  ];
+  return (
+    <div className="side-by-side publish-layout vertical ig-carousel-publish">
+      <div className="publish-preview">
+        <CarouselViewer video={video} carousel={c} />
+      </div>
+      <div className="publish-column">
+        <div className="segmented page-tabs" role="tablist" aria-label="Publicar o carrossel">
+          {tabs.map(([k, name, icon]) => (
+            <button
+              key={k}
+              role="tab"
+              aria-selected={k === tab}
+              className={k === tab ? "active" : ""}
+              onClick={() => setTab(k)}
+            >
+              {icon}
+              {name}
+            </button>
+          ))}
+        </div>
+        <div role="tabpanel" hidden={tab !== "post"}>
+          {ig?.id && (
+            <p className="response ok">
+              Publicado no Instagram {formatWhen(ig.published_at)}
+              {ig.url && (
+                <>
+                  {" "}
+                  ·{" "}
+                  <a href={ig.url} target="_blank" rel="noreferrer" className="link">
+                    abrir o post
+                  </a>
+                </>
+              )}
+            </p>
+          )}
+          <label className="field">
+            <span>
+              Legenda do post <em>{caption.length}/2200 · o rodapé e as hashtags fixas entram no fim</em>
+            </span>
+            <textarea
+              rows={9}
+              value={caption}
+              maxLength={2200}
+              disabled={!!busy}
+              onChange={e => setCaption(e.target.value)}
+            />
+          </label>
+          <div className="actions">
+            <button type="button" className="button" disabled={!changed || !!busy} onClick={save}>
+              <FloppyDisk className="ic" /> {busy === "save" ? "Gravando…" : "Gravar legenda"}
+            </button>
+            {!confirm ? (
+              <button
+                type="button"
+                className="button primary"
+                disabled={!!busy || !caption.trim()}
+                onClick={() => setConfirm(true)}
+              >
+                <PaperPlane className="ic" /> {ig?.id ? "Publicar de novo" : "Publicar no Instagram"}
+              </button>
+            ) : (
+              <>
+                <button type="button" className="button" disabled={!!busy} onClick={() => setConfirm(false)}>
+                  <X className="ic" /> Cancelar
+                </button>
+                <button type="button" className="button primary" disabled={!!busy} onClick={publish}>
+                  <PaperPlane className="ic" />{" "}
+                  {busy === "publish"
+                    ? "Publicando… (leva um ou dois minutos)"
+                    : `Confirmar: ${c.slides} slides no Instagram`}
+                </button>
+              </>
+            )}
+          </div>
+          {confirm && !busy && (
+            <p className="subtle">
+              Sobe agora, no perfil, como carrossel.{" "}
+              {ig?.id ? "Este carrossel já foi publicado: sobe um post novo." : ""}
+            </p>
+          )}
+          {ig?.last_error && (!ig.published_at || ig.last_error.at > ig.published_at) && !result && (
+            <p className="response error">Última tentativa: {ig.last_error.message}</p>
+          )}
+          {result && <p className={`response ${result.ok ? "ok" : "error"}`}>{result.text}</p>}
+          {c.export && (
+            <div className="ig-carousel-download">
+              <span className="subtle">JPEG exportados {formatWhen(c.export.at)}:</span>
+              {c.export.jpgs.map(f => (
+                <a key={f.path} href={mediaUrl(video, f)!} download className="button small">
+                  <DownloadSimple className="ic" /> {f.path.split("/").pop()}
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+        <div role="tabpanel" hidden={tab !== "omnichat"}>
+          <VideoOmnichatPanel key={`carousel-${video.slug}`} video={video} carousel />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,82 @@
+/* --- carousel 1: script ------------------------------------------------------------------- */
+
+import { useState } from "react";
+import { Markdown } from "../../../components/Markdown";
+import { Badge } from "../../../components/ui/badge";
+import { goalLabel, roleLabel } from "../../../lib/carousel";
+import type { StageResultProps } from "./StageResult";
+import { CarouselMissing } from "./CarouselMissing";
+import { CarouselChangeRequest } from "./CarouselChangeRequest";
+
+export function CarouselScriptStage({ video, stage }: StageResultProps) {
+  const c = video.carousel;
+  const [tab, setTab] = useState<"slides" | "script" | "caption">("slides");
+  if (!c) return <CarouselMissing video={video} stage={stage} />;
+  return (
+    <div className="ig-carousel-script">
+      <div className="ig-carousel-top">
+        <div className="segmented" role="tablist" aria-label="Roteiro do carrossel">
+          <button
+            role="tab"
+            aria-selected={tab === "slides"}
+            className={tab === "slides" ? "active" : ""}
+            onClick={() => setTab("slides")}
+          >
+            Slides
+          </button>
+          <button
+            role="tab"
+            aria-selected={tab === "script"}
+            className={tab === "script" ? "active" : ""}
+            onClick={() => setTab("script")}
+            disabled={!c.texts.script}
+          >
+            script.md
+          </button>
+          <button
+            role="tab"
+            aria-selected={tab === "caption"}
+            className={tab === "caption" ? "active" : ""}
+            onClick={() => setTab("caption")}
+          >
+            Legenda do post
+          </button>
+        </div>
+        <span className="subtle">
+          {[c.goal && `Objetivo: ${goalLabel(c.goal)}`, c.origin === "video" && "Feito do vídeo desta pasta"]
+            .filter(Boolean)
+            .join(" · ")}
+        </span>
+      </div>
+      {tab === "slides" &&
+        (c.slide_list.length ? (
+          <ol className="ig-carousel-list">
+            {c.slide_list.map(s => (
+              <li key={s.id}>
+                <span className="mono subtle">{s.id}</span>
+                <div>
+                  <b>{s.title ?? "(sem título)"}</b> {s.role && <Badge>{roleLabel(s.role)}</Badge>}
+                  {s.text && <p>{s.text}</p>}
+                  {s.hero && <small className="subtle">Herói: {s.hero}</small>}
+                </div>
+              </li>
+            ))}
+          </ol>
+        ) : (
+          <p className="empty">Os slides ainda não foram escritos.</p>
+        ))}
+      {tab === "script" && c.texts.script && (
+        <div className="texts">
+          <Markdown text={c.texts.script} />
+        </div>
+      )}
+      {tab === "caption" &&
+        (c.caption ? (
+          <p className="ig-carousel-caption-text">{c.caption}</p>
+        ) : (
+          <p className="empty">Sem legenda ainda.</p>
+        ))}
+      <CarouselChangeRequest video={video} stage="script" label="Pedir alteração no roteiro" />
+    </div>
+  );
+}

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

@@ -0,0 +1,49 @@
+/* One slide of the composition: the PNG (opens in the lightbox), title, role, warnings and the change request. */
+
+import { openLightbox } from "../../../components/Lightbox";
+import { Badge } from "../../../components/ui/badge";
+import { roleLabel, slideAspect } from "../../../lib/carousel";
+import { mediaUrl } from "../../../lib/media";
+import type { CarouselDetail, CarouselSlide, VideoDetail } from "../../../types/api";
+import { CarouselChangeRequest } from "./CarouselChangeRequest";
+
+export function CarouselSlideCard({
+  video,
+  slide: s,
+  carousel: c,
+}: {
+  video: VideoDetail;
+  slide: CarouselSlide;
+  carousel: CarouselDetail;
+}) {
+  const src = mediaUrl(video, s.png);
+  return (
+    <article className={`slide-card${s.warnings.length ? " with-warning" : ""}`}>
+      <button
+        type="button"
+        className="slide-image"
+        style={{ aspectRatio: slideAspect(c.format) }}
+        disabled={!src}
+        onClick={() => src && openLightbox(src, `${s.id} · ${s.title ?? ""}`)}
+        title={s.title ?? s.id}
+      >
+        {src ? (
+          <img src={src} alt={s.title ?? s.id} loading="lazy" />
+        ) : (
+          <span className="subtle">Ainda sem imagem</span>
+        )}
+      </button>
+      <header>
+        <span className="mono">{s.id}</span>
+        <span className="slide-title">{s.title}</span>
+        {s.role && s.role !== "content" && <Badge>{roleLabel(s.role)}</Badge>}
+      </header>
+      {s.warnings.map(w => (
+        <p key={w} className="warning slide-warning">
+          ⚠ {w}
+        </p>
+      ))}
+      <CarouselChangeRequest video={video} slide={s.id} stage="composition" />
+    </article>
+  );
+}

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

@@ -0,0 +1,55 @@
+/* One slide at a time, as in the app: arrows, dots and the keyboard arrows. */
+
+import { useState } from "react";
+import { CaretLeft, CaretRight } from "../../../components/icons";
+import { slideAspect } from "../../../lib/carousel";
+import { mediaUrl } from "../../../lib/media";
+import type { CarouselDetail, VideoDetail } from "../../../types/api";
+
+export function CarouselViewer({ video, carousel: c }: { video: VideoDetail; carousel: CarouselDetail }) {
+  const slides = c.slide_list.filter(s => s.png);
+  const [i, setI] = useState(0);
+  const n = slides.length;
+  const current = slides[Math.min(i, n - 1)];
+  const go = (d: number) => setI(x => Math.max(0, Math.min(n - 1, x + d)));
+  if (!current) return null;
+  return (
+    <div
+      className="ig-carousel-viewer"
+      tabIndex={0}
+      aria-roledescription="carrossel"
+      onKeyDown={e => {
+        if (e.key === "ArrowLeft") go(-1);
+        if (e.key === "ArrowRight") go(1);
+      }}
+    >
+      <div className="viewer-frame" style={{ aspectRatio: slideAspect(c.format) }}>
+        <img src={mediaUrl(video, current.png)!} alt={current.title ?? current.id} />
+        {i > 0 && (
+          <button type="button" className="viewer-arrow left" onClick={() => go(-1)} aria-label="Slide anterior">
+            <CaretLeft />
+          </button>
+        )}
+        {i < n - 1 && (
+          <button type="button" className="viewer-arrow right" onClick={() => go(1)} aria-label="Próximo slide">
+            <CaretRight />
+          </button>
+        )}
+      </div>
+      <div className="viewer-dots">
+        {slides.map((s, k) => (
+          <button
+            key={s.id}
+            type="button"
+            className={k === i ? "active" : ""}
+            onClick={() => setI(k)}
+            aria-label={`Slide ${k + 1}`}
+          />
+        ))}
+        <span className="viewer-counter">
+          {i + 1}/{n}
+        </span>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+/* Line with a new voice and no position (swapped outside the screen, without a pause): timing,
+   render, captions and assembly fell behind */
+
+import { useState } from "react";
+import { useVoiceRunning } from "../../../hooks/useVoiceRunning";
+import { api, enc, send, type ActionResult } from "../../../lib/api";
+import { ChatCircleText } from "../../../components/icons";
+import type { VideoDetail } from "../../../types/api";
+import { scenesOf } from "./StageResult";
+
+export function ChangedVoices({ video }: { video: VideoDetail }) {
+  const running = useVoiceRunning(video);
+  const [response, setResponse] = useState<ActionResult>(null);
+  const changed = scenesOf(video)
+    .flatMap(c => c.lines ?? [])
+    .filter(f => f.wav && f.start == null)
+    .map(f => f.id);
+  if (video.status?.stages.find(e => e.id === "voice")?.pause) return null;
+  if (!changed.length || running || !video.status?.stages.find(e => e.id === "timing")?.ok) return null;
+  const ask = async () => {
+    setResponse(
+      await send(
+        api.videos[":slug"].claude.$post({
+          param: { slug: enc(video.slug) },
+          json: {
+            message:
+              `Troquei o texto ou a leitura das falas ${changed.join(", ")} pelo studio (texto no scenes.json, omnivideo.py voice --regenerate/--use). ` +
+              "O texto e as leituras escolhidas ficam: não reescreva essas falas nem gere voz de novo para elas. Refaça o vídeo a partir do tempo, como na linha " +
+              "“texto de uma fala” da tabela Retomar ou refazer da skill omnivideo: tempo, render das cenas afetadas, legenda e montagem.",
+          },
+        }),
+      ),
+    );
+  };
+  return (
+    <div className="voices-notice">
+      <p className="warning">
+        Texto ou leitura trocados em {changed.join(", ")}: tempo, render, legenda e montagem precisam ser refeitos para
+        o vídeo usar a voz nova.
+      </p>
+      <div className="actions">
+        <button className="button primary small" onClick={ask} disabled={!!response?.ok}>
+          <ChatCircleText className="ic" /> Pedir ao agente para refazer
+        </button>
+        {response && (
+          <span className={`response ${response.ok ? "ok" : "error"}`}>
+            {response.ok ? "Pedido enviado: acompanhe na sessão acima" : response.error}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,78 @@
+/* --- 3: composition ------------------------------------------------------------------------ */
+
+import { findFile } from "../../../lib/media";
+import { formatSeconds } from "../../../lib/format";
+import type { Scene } from "../../../types/api";
+import { EmptyResult, scenesOf, type StageResultProps } from "./StageResult";
+import { MediaImage } from "./MediaImage";
+
+const transitionLabel = (c: Scene, i: number) => {
+  if (i === 0) return "Abre o vídeo";
+  const t = c.transition && typeof c.transition === "object" ? c.transition : null;
+  return (t?.continues?.length ? `Continua: ${t.continues.join(", ")}` : "Corte seco") + (t?.sound ? " · com som" : "");
+};
+
+const sheetTitle = (path: string) => path.split("/").pop()!.replace(".png", "");
+
+export function CompositionStage({ video, stage }: StageResultProps) {
+  const stills = video.files.filter(f => f.path.startsWith("motion/stills/"));
+  if (!stills.length) return <EmptyResult stage={stage} />;
+  const cuts = stills.filter(f => f.path.includes("/transition-"));
+  const general = stills.filter(f => /\/_[^/]+\.png$/.test(f.path));
+  return (
+    <>
+      <div className="scenes-grid">
+        {scenesOf(video).map((c, i) => (
+          <article key={c.id} className="scene-card">
+            <header>
+              <span className="mono">{c.id}</span> {c.title}
+            </header>
+            <div className="pair">
+              <MediaImage
+                video={video}
+                file={findFile(video, `motion/stills/${c.id}.png`)}
+                title={`${c.id} · still`}
+                className="portrait"
+              />
+              <MediaImage
+                video={video}
+                file={findFile(video, `motion/stills/${c.id}-sheet.png`)}
+                title={`${c.id} · folha`}
+              />
+            </div>
+            {/* planned in the composition */}
+            {c.min_duration != null && (
+              <p className="subtle">
+                mín. <span className="mono">{formatSeconds(c.min_duration)}</span> · {transitionLabel(c, i)}
+                {!!c.beats?.length && <> · beats: {c.beats.map(b => b.element).join(", ")}</>}
+                {!!c.beats?.some(b => b.sound) && <> · sons: {c.beats.filter(b => b.sound).length}</>}
+              </p>
+            )}
+          </article>
+        ))}
+      </div>
+      {cuts.length > 0 && (
+        <>
+          <h3>
+            Cortes <span className="subtle">A que sai | a que entra | as duas sobrepostas</span>
+          </h3>
+          <div className="sheets-grid">
+            {cuts.map(f => (
+              <MediaImage key={f.path} video={video} file={f} title={sheetTitle(f.path)} />
+            ))}
+          </div>
+        </>
+      )}
+      {general.length > 0 && (
+        <>
+          <h3>Gerais</h3>
+          <div className="sheets-grid">
+            {general.map(f => (
+              <MediaImage key={f.path} video={video} file={f} title={sheetTitle(f.path)} />
+            ))}
+          </div>
+        </>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,32 @@
+/* The selected thumbnail, which goes as cover (publish.mjs reads it at upload time) */
+
+import { chosenCover, mediaUrl } from "../../../lib/media";
+import { formatPlatformList } from "../../../lib/platforms";
+import type { VideoDetail } from "../../../types/api";
+
+export function CoverPicker({ video, platforms }: { video: VideoDetail; platforms: string[] }) {
+  const t = video.thumbnail;
+  const file = chosenCover(video);
+  if (!t?.versions.length) return null;
+  const withCover = platforms.filter(p => p !== "tiktok");
+  return (
+    <div className="publish-cover">
+      {file && <img src={mediaUrl(video, file)!} alt={`capa ${t.selected}`} />}
+      <p>
+        {file ? (
+          <>
+            <strong>Capa: thumbnail {t.selected}</strong>
+            {withCover.length ? ` ${formatPlatformList(withCover)}` : ""}.
+            {platforms.includes("tiktok") && " No TikTok vai um quadro do vídeo (a API não aceita imagem)."} Agendado,
+            vai a que estiver selecionada na hora de subir.
+          </>
+        ) : (
+          <>
+            Sem thumbnail selecionada: cada plataforma usa um quadro do vídeo. Escolha uma na aba{" "}
+            <strong>Thumbnail</strong>, com "Usar este na publicação".
+          </>
+        )}
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,53 @@
+/* --- 6: render and sound -------------------------------------------------------------------------- */
+
+import { Badge } from "../../../components/ui/badge";
+import { aspectRatio, findFile, mediaUrl } from "../../../lib/media";
+import { formatSeconds } from "../../../lib/format";
+import { EmptyResult, scenesOf, type StageResultProps } from "./StageResult";
+import { SoundTimeline } from "./SoundTimeline";
+
+export function EditorStage({ video, stage, drawer }: StageResultProps) {
+  const stale = video.status?.stages.find(e => e.id === "render")?.stale ?? [];
+  const scenes = scenesOf(video);
+  const any = scenes.some(c => findFile(video, c.mp4 ?? `motion/${c.id}.mp4`));
+  const soundPreview = findFile(video, "sound/preview.wav");
+  if (!any && !soundPreview)
+    return (
+      <>
+        {drawer}
+        <EmptyResult stage={stage} />
+      </>
+    );
+  /* the scene renders go small beside the sound timeline, in 3 columns */
+  const renders = (
+    <div className="videos-grid mini">
+      {scenes.map(c => {
+        const mp4 = findFile(video, c.mp4 ?? `motion/${c.id}.mp4`);
+        const still = findFile(video, `motion/stills/${c.id}.png`);
+        return (
+          <article key={c.id} className="video-card">
+            <div className="media-card" style={{ aspectRatio: aspectRatio(video) }}>
+              {mp4 ? (
+                <video
+                  src={mediaUrl(video, mp4)!}
+                  poster={still ? mediaUrl(video, still)! : undefined}
+                  controls
+                  preload="none"
+                  playsInline
+                />
+              ) : (
+                <span className="empty">Sem render</span>
+              )}
+            </div>
+            <footer>
+              <span className="mono">{c.id}</span>
+              <span className="subtle">{formatSeconds(c.duration)}</span>
+              {stale.includes(c.id) && <Badge variant="warning">Início mudou</Badge>}
+            </footer>
+          </article>
+        );
+      })}
+    </div>
+  );
+  return <SoundTimeline video={video} sidebar={renders} drawerButton={drawer} />;
+}