@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/pages/VideoPage/components/SoundTimeline/useSoundTimeline.ts

@@ -0,0 +1,511 @@
+/* SoundTimeline's state: the data and the draft, the plan (replanned on every draft change), the
+   selection and the tools, undo and redo, clips (razor, move, delete), area cuts, playback,
+   autosave and reassembly. The hooks run in the order they always did; the pieces that stand on
+   their own (the listen mix, the player width, following the playhead, the height, playback and
+   the keyboard) live in their own hooks next to this one. */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { ActionResult } from "../../../../lib/api";
+import { useQueue } from "../../../../hooks/useQueue";
+import { useSessionFor } from "../../../../hooks/useSessions";
+import type { VideoDetail } from "../../../../types/api";
+import { removedDuration, toOriginal } from "../../../../../../tools/cuts.mjs";
+import { frameAt } from "../../../../../../tools/soundtrack.mjs";
+import {
+  HISTORY_LIMIT,
+  MERGE_MS,
+  NO_CUTS,
+  NO_LINES,
+  clone,
+  cutsWithArea,
+  editedItemsOf,
+  exportClipsOf,
+  findEffect,
+  laneCountOf,
+  lanesOf,
+  placeIndexOf,
+  placeInstant,
+  sameClips,
+  toExportTime,
+} from "../../../../lib/sound-timeline";
+import { useListenMix } from "./useListenMix";
+import { usePlayerWidth } from "./usePlayerWidth";
+import { useFollowPlayhead } from "./useFollowPlayhead";
+import { useFitHeight } from "./useFitHeight";
+import { useReplan, useSoundData } from "./useSoundData";
+import { usePlayback } from "./usePlayback";
+import { useEditorShortcuts } from "./useEditorShortcuts";
+import { useAutosave } from "./useAutosave";
+import { effectActions } from "./effectActions";
+import { clipActions } from "./clipActions";
+import type {
+  ClipDragOffset,
+  ClipKind,
+  ClipSelection,
+  Draft,
+  EditorTab,
+  EditorTool,
+  EffectDragOffset,
+  Place,
+  Plan,
+  PlanItem,
+  Selection,
+  SoundData,
+} from "./types";
+
+export function useSoundTimeline(video: VideoDetail) {
+  const slug = video.slug;
+  const [data, setData] = useState<SoundData | null>(null);
+  const [dataError, setDataError] = useState<string | null>(null);
+  const [draft, setDraft] = useState<Draft | null>(null);
+  const [plan, setPlan] = useState<Plan | null>(null);
+  const [planError, setPlanError] = useState<string | null>(null);
+  const [planning, setPlanning] = useState(false);
+  const [dirty, setDirty] = useState(false);
+  const [sel, setSel] = useState<Selection>(null);
+  const [zoom, setZoom] = useState(60);
+  const [t, setT] = useState(0);
+  const [playing, setPlaying] = useState(false);
+  const [response, setResponse] = useState<ActionResult>(null);
+  const [saving, setSaving] = useState(false);
+  const [savedAt, setSavedAt] = useState<Date | null>(null);
+  const [pending, setPending] = useState(false);
+  /* Renderizar clicked here, or an assembly of this video in the queue (started elsewhere, or still
+     running after a reload): the preview is out of date until the new export arrives */
+  const [renderRequested, setRendering] = useState(false);
+  const queue = useQueue();
+  const assembling = [...(queue?.running ?? []), ...(queue?.waiting ?? [])].some(
+    q => q.dir === video.dir && q.tool === "assembly",
+  );
+  const seenAssembling = useRef(false);
+  useEffect(() => {
+    if (assembling) seenAssembling.current = true;
+    /* the ticket came and went without a new export (a failed run): stop waiting */ else if (
+      renderRequested &&
+      seenAssembling.current &&
+      queue
+    ) {
+      seenAssembling.current = false;
+      setRendering(false);
+    }
+  }, [assembling, renderRequested, queue]);
+  const rendering = renderRequested || assembling;
+  const videoRef = useRef<HTMLVideoElement>(null);
+  /* the narration volume and the per-row mute: only for listening here */
+  const mix = useListenMix();
+  const drag = useRef<{ x0: number; dx: number; copy: boolean; keys: string[] } | null>(null);
+  const [dragOffset, setDragOffset] = useState<EffectDragOffset | null>(null);
+  /* selection of several effects (Ctrl or Cmd + click): keys "place:layer" */
+  const [multi, setMulti] = useState<string[]>([]);
+  const [armed, setArmed] = useState<string | null>(null);
+  const [draggingSound, setDraggingSound] = useState<string | null>(null);
+  const [dropTarget, setDropTarget] = useState<string | null>(null);
+  const tracks = useRef<HTMLDivElement>(null);
+  const root = useRef<HTMLDivElement>(null);
+  const side = useRef<HTMLElement>(null);
+  /* the chosen effect's panel sits at the top of the right column: it scrolls back to the top to show it */
+  useEffect(() => {
+    if (sel) side.current?.scrollTo({ top: 0, behavior: "smooth" });
+  }, [sel]);
+  const [height, setHeight] = useState<number | null>(null);
+  const { manualWidth, setManualWidth, widthDrag } = usePlayerWidth();
+  const scroller = useFollowPlayhead(tracks, t, playing, zoom);
+  /* the top panel is one tab at a time: what you are changing now (settings of the selection), the sound library, the cut list and the scene renders */
+  const [tab, setTab] = useState<EditorTab>("agent");
+  /* edit chat (vibe edit): the agent session of this editor only. While it runs, the timeline
+     locks (what it writes to scenes.json doesn't fight the draft here) and, when it stops, everything reloads */
+  const editSession = useSessionFor("edit", video.slug);
+  const agentEditing = editSession?.state === "running";
+  const agentEditingRef = useRef(false);
+  agentEditingRef.current = agentEditing;
+  /* undo and redo: the previous drafts, in this screen's memory */
+  const history = useRef<{ undo: Draft[]; redo: Draft[]; last: number }>({ undo: [], redo: [], last: 0 });
+  const [stacks, setStacks] = useState({ undo: 0, redo: 0 });
+  /* active tool and the area marked by the cut, in edited time (the timeline's) */
+  const [tool, setTool] = useState<EditorTool>("select");
+  const [area, setArea] = useState<[number, number] | null>(null);
+  const areaDrag = useRef<{ anchor: number; x0: number } | null>(null);
+  const cuts = draft?.cuts ?? NO_CUTS;
+  const draftLineClips = draft?.line_clips ?? NO_LINES;
+  const editedTotal = data ? data.total - removedDuration(cuts) : 0;
+  /* edited time → time of the export on screen (which may have other cuts, or none) */
+  const toExport = useCallback((t: number) => toExportTime(t, cuts, data?.export?.cuts ?? NO_CUTS), [cuts, data]);
+
+  /* --- animation track -------------------------------------------------------------- */
+  /* the scenes with the draft's clips: what the track, the preview and the beats use */
+  const animScenes = useMemo(
+    () => (data?.scenes ?? []).map(c => ({ ...c, clips: draft?.scene_clips[c.id] ?? c.clips })),
+    [data, draft?.scene_clips],
+  );
+  /* where a beat or transition lands in the video: on the animation piece it falls in (null: in a deleted piece) */
+  const instantOf = (l: Place) => placeInstant(l, animScenes);
+  /* the preview shows the export while it has the same animation arrangement; otherwise, the scene MP4s */
+  /* the Legenda tab needs the picture without the captions burned into the export: the scene MP4s */
+  const captionsPicture = tab === "captions" && !!data?.scenes.some(c => c.mp4);
+  const showExport =
+    !captionsPicture && !!data?.export && animScenes.every(c => sameClips(c.clips, exportClipsOf(data?.export, c)));
+  /* the render at the chosen speed matches the edit (saved, exported, same speed): the editor plays it,
+     picture and sound (the voice keeps its pitch), and the playhead runs at that speed. Until then,
+     the base at 100% */
+  const sped =
+    showExport &&
+    !dirty &&
+    !pending &&
+    data?.speed_export &&
+    Math.abs(data.speed_export.speed - (draft?.speed ?? 1)) < 0.001
+      ? data.speed_export
+      : null;
+  /* the chosen clip (animation or voice) and a clip drag */
+  const [clipSel, setClipSel] = useState<ClipSelection | null>(null);
+  /* choosing something on the timeline leads to its settings */
+  useEffect(() => {
+    if (sel || clipSel) setTab("settings");
+  }, [sel, clipSel]);
+  const clipDrag = useRef<{
+    kind: ClipKind;
+    id: string;
+    k: number;
+    x0: number;
+    offset0: number;
+    moved: boolean;
+  } | null>(null);
+  const [clipDragOffset, setClipDragOffset] = useState<ClipDragOffset | null>(null);
+  /* where the razor is (edited time), for the line that follows the pointer */
+  const [razorT, setRazorT] = useState<number | null>(null);
+  const sceneVideos = useRef<Record<string, HTMLVideoElement | null>>({});
+  const activeScene = useRef<string | null>(null);
+  /* puts the picture at edited time t: the export (with its cuts) or the scene that shows there */
+  const seekPicture = (tEd: number, running: boolean, force: boolean) => {
+    if (showExport) {
+      const vid = videoRef.current;
+      if (!vid) return;
+      /* the sped render is the same picture, `speed` times sooner */
+      const target = toExport(tEd) / (sped?.speed ?? 1);
+      if (force || Math.abs(vid.currentTime - target) > 0.15) vid.currentTime = target;
+      if (running && vid.paused) vid.play().catch(() => {});
+      if (!running) vid.pause();
+      return;
+    }
+    if (!animScenes.length) return;
+    const r = frameAt(animScenes, toOriginal(tEd, cuts));
+    const c = animScenes[r.i];
+    for (const [id, el] of Object.entries(sceneVideos.current)) {
+      if (!el || id === c.id) continue;
+      el.style.opacity = "0";
+      if (!el.paused) el.pause();
+    }
+    const el = sceneVideos.current[c.id];
+    if (!el) return;
+    el.style.opacity = "1";
+    /* a sped piece runs its MP4 faster */
+    if (el.playbackRate !== r.speed) el.playbackRate = r.speed;
+    const local = Math.max(0, Math.min(c.duration - 0.04, r.local));
+    if (force || activeScene.current !== c.id || Math.abs(el.currentTime - local) > 0.15) el.currentTime = local;
+    activeScene.current = c.id;
+    if (running && !r.frozen) {
+      if (el.paused) el.play().catch(() => {});
+    } else if (!el.paused) el.pause();
+  };
+  const seekPictureRef = useRef(seekPicture);
+  seekPictureRef.current = seekPicture;
+
+  /* preview and timeline fit the window (only the right column scrolls) */
+  useFitHeight(root, data, setHeight);
+
+  /* the data (every fetch resets the draft, like a reload) and the plan (replanned on every draft change) */
+  const { loadData, reloadCatalog } = useSoundData({
+    slug,
+    agentEditing,
+    history,
+    setData,
+    setDataError,
+    setDraft,
+    setStacks,
+    setDirty,
+    setPending,
+    setArmed,
+  });
+  useReplan({ slug, draft, setPlanning, setPlanError, setPlan });
+
+  /* --- playback ------------------------------------------------------------------- */
+  const {
+    stop,
+    play: playNow,
+    seek,
+  } = usePlayback({
+    slug: video.slug,
+    data,
+    plan,
+    cuts,
+    draftLineClips,
+    editedTotal,
+    t,
+    setT,
+    playing,
+    setPlaying,
+    setResponse,
+    videoRef,
+    sceneVideos,
+    seekPictureRef,
+    seekPicture,
+    mix,
+    sped,
+  });
+
+  /* while the export is being remade the picture is old: playback stops and cannot start */
+  const play = useCallback((from: number) => (rendering ? Promise.resolve() : playNow(from)), [rendering, playNow]);
+  useEffect(() => {
+    if (rendering) stop();
+  }, [rendering, stop]);
+
+  /* --- editing -------------------------------------------------------------------- */
+  const changeDraft = (f: (r: Draft) => void) => {
+    if (agentEditingRef.current) {
+      setResponse({ ok: false, error: "O agente está editando: a timeline volta quando ele terminar" });
+      return;
+    }
+    /* the previous state goes to undo; consecutive changes (dragging a control)
+       become a single step */
+    const h = history.current,
+      now = Date.now();
+    if (draftRef.current && now - h.last > MERGE_MS) {
+      h.undo.push(draftRef.current);
+      if (h.undo.length > HISTORY_LIMIT) h.undo.shift();
+    }
+    h.last = now;
+    h.redo = [];
+    setStacks({ undo: h.undo.length, redo: 0 });
+    setDraft(r => {
+      if (!r) return r;
+      const n = clone(r);
+      f(n);
+      return n;
+    });
+    setDirty(true);
+    setResponse(null);
+  };
+  /* Ctrl/Cmd + Z goes back one timeline step (cuts, effects, background music); with Shift, or Ctrl + Y, redoes */
+  const step = (from: "undo" | "redo") => {
+    const h = history.current;
+    const other = from === "undo" ? "redo" : "undo";
+    const target = h[from].pop();
+    if (!target || !draftRef.current) return;
+    h[other].push(draftRef.current);
+    h.last = 0;
+    setStacks({ undo: h.undo.length, redo: h.redo.length });
+    setDraft(target);
+    setDirty(true);
+    setResponse(null);
+    setArea(null);
+    /* a selection that no longer exists in the restored state goes away */
+    setSel(sl =>
+      sl === "bed" ? (target.bed ? sl : null) : sl && target.places[sl.place]?.sounds[sl.layer] ? sl : null,
+    );
+    setMulti([]);
+    setClipSel(null);
+  };
+  const placeIndex = (it: PlanItem) => (draft ? placeIndexOf(draft.places, it) : -1);
+  const effectOf = (name: string) => (data ? findEffect(data.catalog, name) : undefined);
+  const { changeSound, defaultSound, addSound, arm, placeSound, duplicate, move } = effectActions({
+    data,
+    draft,
+    plan,
+    cuts,
+    zoom,
+    tracks,
+    changeDraft,
+    setSel,
+    setMulti,
+    setArmed,
+    setResponse,
+    instantOf,
+    effectOf,
+  });
+  /* the selection changed another way (diamond, library, panel): the multi-selection goes back to just it */
+  useEffect(() => {
+    const k = sel && sel !== "bed" ? `${sel.place}:${sel.layer}` : null;
+    setMulti(m => (k && m.includes(k) ? m : k ? [k] : []));
+    if (sel) setClipSel(null);
+  }, [sel]);
+  useEffect(() => {
+    if (clipSel) setSel(null);
+  }, [clipSel]);
+
+  /* the picture follows the new animation arrangement (or the return to the export) while stopped */
+  useEffect(() => {
+    if (!playing) seekPictureRef.current(t, false, true); /* eslint-disable-next-line react-hooks/exhaustive-deps */
+  }, [showExport, animScenes, cuts, sped?.path]);
+
+  /* --- clips: razor, move and delete ------------------------------------------------- */
+  const { clipsOf, baseOf, stepOf, moveClip, deleteClip, razorCut } = clipActions({
+    data,
+    draft,
+    changeDraft,
+    setClipSel,
+  });
+
+  /* --- area cut ----------------------------------------------------------------------- */
+  const chooseTool = (f: EditorTool) => {
+    setTool(f);
+    setArea(null);
+    if (f === "cut") setArmed(null);
+  };
+  /* removes the marked area: in original time, together with the existing cuts */
+  const cutArea = () => {
+    if (!area || !data) return;
+    const next = cutsWithArea(cuts, area, data.total, data.format.fps);
+    if (!next) {
+      setResponse({ ok: false, error: "Esse corte deixaria o vídeo sem nada: marque um trecho menor" });
+      return;
+    }
+    changeDraft(r => {
+      r.cuts = next;
+    });
+    setArea(null);
+    seek(area[0]);
+  };
+  const undoCut = (i: number) =>
+    changeDraft(r => {
+      r.cuts.splice(i, 1);
+    });
+  useEditorShortcuts({
+    data,
+    draft,
+    cuts,
+    clipSel,
+    clipsOf,
+    moveClip,
+    deleteClip,
+    setArmed,
+    sel,
+    setSel,
+    multi,
+    setMulti,
+    changeDraft,
+    tool,
+    chooseTool,
+    area,
+    setArea,
+    cutArea,
+    step,
+  });
+
+  /* autosave (5 s after the last edit), save before the edit chat and on the way out, and Renderizar */
+  const { draftRef, beforeAgent, render } = useAutosave({
+    slug,
+    draft,
+    dirty,
+    planError,
+    agentEditing,
+    agentEditingRef,
+    assembledAt: video.assembly?.assembled_at,
+    loadData,
+    setSaving,
+    setResponse,
+    setDirty,
+    setSavedAt,
+    setPending,
+    setRendering,
+  });
+
+  /* the effects as the timeline shows them: in edited time, without what fell entirely in a cut */
+  const editedItems = useMemo(() => editedItemsOf(plan?.items ?? [], cuts), [plan, cuts]);
+  const itemLanes = useMemo(() => lanesOf(editedItems), [editedItems]);
+  const laneCount = laneCountOf(itemLanes);
+
+  return {
+    video,
+    data,
+    dataError,
+    draft,
+    plan,
+    planError,
+    planning,
+    dirty,
+    sel,
+    setSel,
+    zoom,
+    setZoom,
+    t,
+    playing,
+    response,
+    saving,
+    savedAt,
+    pending,
+    rendering,
+    videoRef,
+    mix,
+    drag,
+    dragOffset,
+    setDragOffset,
+    multi,
+    setMulti,
+    armed,
+    setArmed,
+    draggingSound,
+    setDraggingSound,
+    dropTarget,
+    setDropTarget,
+    tracks,
+    root,
+    side,
+    height,
+    manualWidth,
+    setManualWidth,
+    widthDrag,
+    scroller,
+    tab,
+    setTab,
+    agentEditing,
+    stacks,
+    tool,
+    area,
+    setArea,
+    areaDrag,
+    cuts,
+    editedTotal,
+    animScenes,
+    instantOf,
+    showExport,
+    sped,
+    clipSel,
+    setClipSel,
+    clipDrag,
+    clipDragOffset,
+    setClipDragOffset,
+    razorT,
+    setRazorT,
+    sceneVideos,
+    seekPictureRef,
+    reloadCatalog,
+    stop,
+    play,
+    seek,
+    changeDraft,
+    step,
+    changeSound,
+    defaultSound,
+    addSound,
+    arm,
+    placeSound,
+    duplicate,
+    move,
+    clipsOf,
+    baseOf,
+    stepOf,
+    moveClip,
+    deleteClip,
+    razorCut,
+    chooseTool,
+    cutArea,
+    undoCut,
+    placeIndex,
+    effectOf,
+    beforeAgent,
+    render,
+    editedItems,
+    itemLanes,
+    laneCount,
+  };
+}
+export type SoundTimelineState = ReturnType<typeof useSoundTimeline>;

package/studio/web/pages/VideoPage/components/StageDrawer/CompareVersions.tsx

@@ -0,0 +1,111 @@
+/* A previous version side by side with today's files (video, audio, image, text); Esc closes, and
+   the videos can start together (the right one muted). */
+
+import { useEffect, useRef } from "react";
+import { openLightbox } from "../../../../components/Lightbox";
+import { Play } from "../../../../components/icons";
+import { formatWhen } from "../../../../lib/format";
+import { aspectRatio } from "../../../../lib/media";
+import { currentOf, HISTORY_LABEL, kindOf, versionSrc } from "../../../../lib/stage-history";
+import type { FileEntry, HistoryVersion, VideoDetail } from "../../../../types/api";
+import { VersionText } from "./VersionText";
+
+export function CompareVersions({
+  video,
+  version,
+  onClose,
+}: {
+  video: VideoDetail;
+  version: HistoryVersion;
+  onClose: () => void;
+}) {
+  /* what is watched and heard first; sheet and text after */
+  const order = ["video", "audio", "image", "text"];
+  const pairs = version.files
+    .filter(
+      f =>
+        ["video", "image", "audio"].includes(kindOf(f)) ||
+        (kindOf(f) === "text" && (version.stage === "captions" || version.stage === "assembly")),
+    )
+    .sort((a, b) => order.indexOf(kindOf(a)) - order.indexOf(kindOf(b)))
+    .map(f => ({ before: f, now: currentOf(video, version, f) }));
+  const videos = useRef<HTMLVideoElement[]>([]);
+  useEffect(() => {
+    const esc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    };
+    addEventListener("keydown", esc, true);
+    return () => removeEventListener("keydown", esc, true);
+  }, [onClose]);
+  const together = () =>
+    videos.current.forEach(el => {
+      el.currentTime = 0;
+      el.play();
+    });
+  const side = (path: string | null, mtime: number | undefined, f: FileEntry, k: number) => {
+    if (!path) return <p className="empty">Não existe hoje</p>;
+    const s = versionSrc(video, path, mtime);
+    switch (kindOf(f)) {
+      case "video":
+        return (
+          <video
+            ref={el => {
+              if (el) videos.current[k] = el;
+            }}
+            src={s}
+            controls
+            playsInline
+            muted={k % 2 === 1}
+            style={{ aspectRatio: aspectRatio(video) }}
+          />
+        );
+      case "image":
+        return <img src={s} alt={path} onClick={() => openLightbox(s, path)} />;
+      case "audio":
+        return <audio src={s} controls />;
+      default:
+        return <VersionText video={video} path={path} />;
+    }
+  };
+  return (
+    <div className="compare-backdrop" onClick={onClose}>
+      <div className="compare" onClick={e => e.stopPropagation()}>
+        <header>
+          <h2>
+            Comparar · {HISTORY_LABEL[version.stage] ?? version.stage}
+            {version.key ? ` ${version.key}` : ""}
+          </h2>
+          {pairs.some(p => kindOf(p.before) === "video") && (
+            <button className="button" onClick={together}>
+              <Play className="ic" weight="fill" /> Tocar os dois juntos
+            </button>
+          )}
+          <button className="close" onClick={onClose}>
+            Fechar · esc
+          </button>
+        </header>
+        <div className="compare-columns">
+          <h3>Versão de {formatWhen(version.at)}</h3>
+          <h3>Atual</h3>
+          {pairs.map((p, i) => {
+            const now = p.now ? video.files.find(x => x.path === p.now) : undefined;
+            return [
+              <div key={`a${i}`} className="compare-side">
+                {side(p.before.path, p.before.mtime, p.before, i * 2)}
+              </div>,
+              <div key={`b${i}`} className="compare-side">
+                {side(p.now, now?.mtime, p.before, i * 2 + 1)}
+              </div>,
+            ];
+          })}
+        </div>
+        {pairs.some(p => kindOf(p.before) === "video") && (
+          <p className="hint">O da direita começa sem som, para os dois não falarem juntos.</p>
+        )}
+      </div>
+    </div>
+  );
+}

package/studio/web/pages/VideoPage/components/StageDrawer/VersionCard.tsx

@@ -0,0 +1,81 @@
+/* A previous version: when and what it was (the line's text), its files,
+   the queue run that made it (with its log) and the compare button. */
+
+import { useState } from "react";
+import { LogStream } from "../../../../components/LogStream";
+import { ArrowUpRight, Exchange, STATE_ICON } from "../../../../components/icons";
+import { formatElapsed, formatWhen, ticketOrigin, toMs, TOOL_LABEL } from "../../../../lib/format";
+import { fileName, GENERATED_BY, HISTORY_LABEL, kindOf, versionSrc } from "../../../../lib/stage-history";
+import type { HistoryVersion, Ticket, VideoDetail } from "../../../../types/api";
+import { VersionMedia } from "./VersionMedia";
+
+export function VersionCard({
+  video,
+  version,
+  run,
+  onCompare,
+}: {
+  video: VideoDetail;
+  version: HistoryVersion;
+  run?: Ticket;
+  onCompare: () => void;
+}) {
+  const [log, setLog] = useState(false);
+  const line = version.stage === "voice" ? version.data[`${version.key}.json`] : null;
+  const media = version.files.filter(f => ["video", "image", "audio"].includes(kindOf(f)));
+  const texts = version.files.filter(
+    f => kindOf(f) === "text" && (version.stage === "captions" || version.stage === "assembly"),
+  );
+  return (
+    <article className="version">
+      <header>
+        <span className="version-when">{formatWhen(version.at)}</span>
+        <span className="subtle">
+          {HISTORY_LABEL[version.stage] ?? version.stage}
+          {version.key ? ` · ${version.key}` : ""}
+        </span>
+      </header>
+      {line && (
+        <p className="version-text">
+          “{line.text}”{line.dur ? <span className="subtle"> · {line.dur.toLocaleString("pt-BR")} s</span> : null}
+        </p>
+      )}
+      {version.stage === "voice" && !line && (
+        <p className="subtle">Texto não guardado (voz gerada antes do histórico)</p>
+      )}
+      <div className={`version-media${media.some(f => kindOf(f) === "image") ? " images" : ""}`}>
+        {media.map(f => (
+          <VersionMedia key={f.path} video={video} file={f} />
+        ))}
+      </div>
+      {texts.map(f => (
+        <a key={f.path} className="subtle" href={versionSrc(video, f.path)} target="_blank" rel="noreferrer">
+          {fileName(f)} <ArrowUpRight className="ic" />
+        </a>
+      ))}
+      <footer>
+        {run ? (
+          <button className="run-row" onClick={() => setLog(!log)} title="Ver o log">
+            <span className={`icon ${run.effective}`}>{STATE_ICON[run.effective] ?? STATE_ICON.interrupted}</span>
+            {TOOL_LABEL[run.tool] ?? run.tool}
+            <span className="subtle">
+              {run.started_at && run.ended_at ? formatElapsed(toMs(run.ended_at)! - toMs(run.started_at)!) : ""} ·{" "}
+              {ticketOrigin(run)}
+            </span>
+            <span className="subtle">{log ? "Fechar log" : "log"}</span>
+          </button>
+        ) : (
+          <span className="subtle">
+            {(GENERATED_BY[version.stage] ?? []).length
+              ? "Execução fora do histórico da fila"
+              : "Feita fora da fila (build sem render)"}
+          </span>
+        )}
+        <button className="compare-button" onClick={onCompare}>
+          <Exchange className="ic" /> Comparar com a atual
+        </button>
+      </footer>
+      {log && run && <LogStream id={run.id} height={200} />}
+    </article>
+  );
+}