@crievo/omni 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,24 @@
+/* One file of a previous version: the video plays, the image opens in the lightbox, the audio plays. */
+
+import { openLightbox } from "../../../../components/Lightbox";
+import { aspectRatio } from "../../../../lib/media";
+import { fileName, kindOf, versionSrc } from "../../../../lib/stage-history";
+import type { FileEntry, VideoDetail } from "../../../../types/api";
+
+export function VersionMedia({ video, file }: { video: VideoDetail; file: FileEntry }) {
+  const s = versionSrc(video, file.path, file.mtime);
+  switch (kindOf(file)) {
+    case "video":
+      return <video src={s} controls preload="metadata" playsInline style={{ aspectRatio: aspectRatio(video) }} />;
+    case "image":
+      return (
+        <button className="version-thumb" onClick={() => openLightbox(s, file.path)}>
+          <img src={s} alt={fileName(file)} loading="lazy" />
+        </button>
+      );
+    case "audio":
+      return <audio src={s} controls preload="none" />;
+    default:
+      return null;
+  }
+}

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

@@ -0,0 +1,15 @@
+/* A text file of a compared version (captions.srt, assembly.json), fetched as is. */
+
+import { useEffect, useState } from "react";
+import { versionSrc } from "../../../../lib/stage-history";
+import type { VideoDetail } from "../../../../types/api";
+
+export function VersionText({ path, video }: { path: string; video: VideoDetail }) {
+  const [text, setText] = useState<string | null>(null);
+  useEffect(() => {
+    fetch(versionSrc(video, path))
+      .then(r => (r.ok ? r.text() : "(não existe)"))
+      .then(setText);
+  }, [path]);
+  return <pre className="compared-text">{text ?? "…"}</pre>;
+}

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

@@ -0,0 +1,109 @@
+/* Drawer of a stage's previous results: the versions the tools kept in history/ (play, view,
+   compare with the current one), each with the queue run that made it, and every run of the
+   stage with its log. The history logic lives in lib/stage-history. */
+
+import { useEffect, useState } from "react";
+import { FinishedTask } from "../../../../components/FinishedTask";
+import { RunningTask } from "../../../../components/RunningTask";
+import { groupVersions, HISTORY_LABEL, runOf, stageRuns, versionsOf } from "../../../../lib/stage-history";
+import type { StageDef } from "../../../../lib/stages";
+import type { HistoryVersion, Queue, VideoDetail } from "../../../../types/api";
+import { CompareVersions } from "./CompareVersions";
+import { VersionCard } from "./VersionCard";
+
+export { countPreviousResults } from "../../../../lib/stage-history";
+
+export function StageDrawer({
+  stage,
+  video,
+  queue,
+  onClose,
+}: {
+  stage: StageDef;
+  video: VideoDetail;
+  queue: Queue | null;
+  onClose: () => void;
+}) {
+  const [comparing, setComparing] = useState<HistoryVersion | null>(null);
+  useEffect(() => {
+    const esc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    addEventListener("keydown", esc);
+    return () => removeEventListener("keydown", esc);
+  }, [onClose]);
+  const versions = versionsOf(stage, video);
+  const runs = stageRuns(stage, video, queue);
+  const groups = groupVersions(versions);
+  return (
+    <div className="drawer-backdrop" onClick={onClose}>
+      <aside className="drawer" onClick={e => e.stopPropagation()} aria-label="Resultados anteriores">
+        <header>
+          <div>
+            <span className="subtle">
+              {stage.num} · {stage.title}
+            </span>
+            <h2>Resultados anteriores</h2>
+          </div>
+          <button className="close" onClick={onClose}>
+            Fechar · esc
+          </button>
+        </header>
+        <section>
+          <h3>
+            Versões anteriores <span className="subtle">{versions.length}</span>
+          </h3>
+          {!versions.length && (
+            <p className="empty">
+              {stage.history.length
+                ? "Nenhuma ainda. A cada vez que a etapa refaz o resultado e ele muda, o anterior aparece aqui (as 5 últimas)."
+                : "Esta etapa não guarda versões: o resultado é texto que o chat escreve ou uma conta instantânea."}
+            </p>
+          )}
+          {[...groups].map(([k, list]) => (
+            <div key={k} className="version-group">
+              {groups.size > 1 && (
+                <h4>
+                  {list[0].key ?? HISTORY_LABEL[list[0].stage]} <span className="subtle">{list.length}</span>
+                </h4>
+              )}
+              {list.map(ver => (
+                <VersionCard
+                  key={ver.files[0]?.path ?? ver.at}
+                  video={video}
+                  version={ver}
+                  run={runOf(ver, runs)}
+                  onCompare={() => setComparing(ver)}
+                />
+              ))}
+            </div>
+          ))}
+        </section>
+        <section>
+          <h3>
+            Execuções <span className="subtle">{runs.length}</span>
+          </h3>
+          {!stage.tools.length && (
+            <p className="empty">Esta etapa não passa pela fila da máquina: não há execuções registradas.</p>
+          )}
+          {stage.tools.length > 0 && !runs.length && (
+            <p className="empty">Nenhuma execução registrada para este vídeo.</p>
+          )}
+          {runs
+            .filter(t => t.effective === "running")
+            .map(t => (
+              <RunningTask key={t.id} ticket={t} />
+            ))}
+          <ul className="done-list">
+            {runs
+              .filter(t => t.effective !== "running")
+              .map(t => (
+                <FinishedTask key={t.id} ticket={t} />
+              ))}
+          </ul>
+        </section>
+      </aside>
+      {comparing && <CompareVersions video={video} version={comparing} onClose={() => setComparing(null)} />}
+    </div>
+  );
+}

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

@@ -0,0 +1,126 @@
+/* The process of the chosen stage, in the sidebar: state now, the running task (or the last one)
+   with its log, and who does it, the command and what it writes. */
+
+import { useNow } from "../../../hooks/useNow";
+import { LogStream } from "../../../components/LogStream";
+import { Check, STATE_ICON } from "../../../components/icons";
+import { getStageState, type StageDef, type StageState } from "../../../lib/stages";
+import { formatElapsed, stageLabel, ticketOrigin, timeAgo, toMs, TOOL_LABEL } from "../../../lib/format";
+import type { Queue, Ticket, VideoDetail } from "../../../types/api";
+
+export const STAGE_STATE_TEXT: Record<StageState["kind"], string> = {
+  done: "Feita",
+  running: "Rodando agora",
+  queued: "Na fila da máquina",
+  user: "Esperando você",
+  rejected: "Reprovada: o agente está ajustando",
+  redoing: "Sendo refeita com o estilo visual novo",
+  warning: "Precisa de atenção",
+  scheduled: "Agendada",
+  error: "A última execução falhou",
+  next: "Próxima etapa",
+  missing: "Ainda não feita",
+  na: "Não se aplica",
+};
+
+const toolName = (t: Ticket) => TOOL_LABEL[t.tool] ?? t.tool;
+
+export function StageProcess({ stage, video, queue }: { stage: StageDef; video: VideoDetail; queue: Queue | null }) {
+  const now = useNow();
+  const s = getStageState(stage, video, queue, video.runs);
+  const statuses = (stage.parts ?? [stage.id]).flatMap(id => video.status?.stages.find(x => x.id === id) ?? []);
+  const ofStage = (t: Ticket) => stage.tools.includes(t.tool);
+  const last = video.runs.filter(t => ofStage(t) && !["running", "waiting"].includes(t.effective))[0];
+  const command = stage.command?.replace("videos/<slug>", video.root);
+  const running = s.kind === "running" ? s.ticket : null;
+  return (
+    <aside className="process">
+      <div className={`process-status ${s.kind}`}>
+        <span className="process-mark" />
+        <div>
+          <strong>{STAGE_STATE_TEXT[s.kind]}</strong>
+          <span>
+            {s.kind === "running" &&
+              `${toolName(s.ticket)} há ${formatElapsed(now - (toMs(s.ticket.started_at) ?? now))}`}
+            {s.kind === "queued" &&
+              `${s.position}º da fila · esperando há ${formatElapsed(now - (toMs(s.ticket.arrived_at) ?? now))}`}
+            {s.kind === "user" &&
+              (stage.id === "motion_script"
+                ? "Aprove cada cena ou peça alteração, ao lado"
+                : "Aprove o roteiro ou peça alteração, ao lado")}
+            {s.kind === "warning" && s.reason}
+            {s.kind === "redoing" && s.reason}
+            {s.kind === "error" &&
+              `${toolName(s.ticket)} saiu com código ${s.ticket.exit_code ?? "?"} ${timeAgo(s.ticket.ended_at)}`}
+            {s.kind === "next" && `Quem faz: ${stage.owner}`}
+            {s.kind === "done" && (last ? `${toolName(last)} ${timeAgo(last.ended_at)}` : "")}
+          </span>
+        </div>
+      </div>
+
+      {running && (
+        <div className="process-run">
+          <p className="subtle">
+            {ticketOrigin(running)} · pid {running.pid}
+          </p>
+          <code className="command" title={running.command}>
+            {running.command}
+          </code>
+          <LogStream id={running.id} height={340} />
+        </div>
+      )}
+      {s.kind === "queued" && (
+        <p className="note">
+          {queue?.running[0] ? (
+            <>
+              Rodando agora: {toolName(queue.running[0])} de {queue.running[0].video}.
+            </>
+          ) : (
+            "A vez passa em instantes."
+          )}{" "}
+          A tarefa começa sozinha quando chegar a vez.
+        </p>
+      )}
+      {!running && last && (
+        <div className="process-run">
+          <h3>Última execução</h3>
+          <p>
+            <span className={`icon ${last.effective}`}>{STATE_ICON[last.effective] ?? STATE_ICON.interrupted}</span>{" "}
+            {toolName(last)} ·{" "}
+            {last.started_at && last.ended_at
+              ? formatElapsed(toMs(last.ended_at)! - toMs(last.started_at)!)
+              : "Não rodou"}{" "}
+            · {ticketOrigin(last)} · {timeAgo(last.ended_at ?? last.arrived_at)}
+          </p>
+          {last.started_at && <LogStream id={last.id} height={s.kind === "error" ? 280 : 140} />}
+        </div>
+      )}
+      {!stage.tools.length && <p className="note">Esta etapa não passa pela fila: quem faz é {stage.owner}.</p>}
+
+      <dl className="facts">
+        <dt>Quem faz</dt>
+        <dd>{stage.owner}</dd>
+        {command && (
+          <>
+            <dt>Comando</dt>
+            <dd>
+              <code>{command}</code>
+            </dd>
+          </>
+        )}
+        <dt>Grava</dt>
+        <dd>{stage.writes}</dd>
+        {statuses.length > 0 && (
+          <>
+            <dt>Status</dt>
+            {statuses.map(st => (
+              <dd key={st.id}>
+                {st.ok ? <Check className="ic" weight="bold" /> : "·"} {stageLabel(st)}
+              </dd>
+            ))}
+          </>
+        )}
+      </dl>
+    </aside>
+  );
+}

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

@@ -0,0 +1,69 @@
+/* Each stage's result: what it wrote, to see, hear and play. */
+
+import { useState, type ReactNode } from "react";
+import { Markdown } from "../../../components/Markdown";
+import type { StageDef } from "../../../lib/stages";
+import type { Scene, VideoDetail } from "../../../types/api";
+import { ScriptStage } from "./ScriptStage";
+import { MotionScriptStage } from "./MotionScriptStage";
+import { CompositionStage } from "./CompositionStage";
+import { NarrationStage } from "./NarrationStage";
+import { EditorStage } from "./EditorStage";
+import { PublishStage } from "./PublishStage";
+import { CarouselScriptStage } from "./CarouselScriptStage";
+import { CarouselCompositionStage } from "./CarouselCompositionStage";
+import { CarouselPublishStage } from "./CarouselPublishStage";
+
+export type StageResultProps = { video: VideoDetail; stage: StageDef; drawer?: ReactNode };
+
+export function EmptyResult({ stage, text }: { stage: StageDef; text?: string }) {
+  return (
+    <p className="empty result-empty">
+      {text ?? "Ainda sem resultado."} Quem faz: {stage.owner}.
+    </p>
+  );
+}
+
+export const scenesOf = (video: VideoDetail): Scene[] => video.scenes?.scenes ?? [];
+
+/* the markdown texts of a stage, one tab each (only the ones that exist) */
+export function ResultTabs({ tabs }: { tabs: [string, string, string | null][] }) {
+  const present = tabs.filter(([, , text]) => text);
+  const [tab, setTab] = useState(present[0]?.[0]);
+  const current = present.find(([k]) => k === tab) ?? present[0];
+  if (!current) return null;
+  return (
+    <div className="texts">
+      <div className="tabs">
+        {present.map(([k, name]) => (
+          <button key={k} className={k === current[0] ? "active" : ""} onClick={() => setTab(k)}>
+            {name}
+          </button>
+        ))}
+      </div>
+      <Markdown text={current[2] ?? ""} />
+    </div>
+  );
+}
+
+/* `drawer`: the previous-results button, for the stage that does not use the header (render) */
+const STAGE_RESULTS: Record<string, (p: StageResultProps) => ReactNode> = {
+  script: ScriptStage,
+  motion_script: MotionScriptStage,
+  motion: CompositionStage,
+  narration: NarrationStage,
+  render: EditorStage,
+  publish: PublishStage,
+  /* the carousel pipeline (lib/stages.ts, CAROUSEL_STAGES) */
+  "carousel-script": CarouselScriptStage,
+  "carousel-composition": CarouselCompositionStage,
+  "carousel-publish": CarouselPublishStage,
+};
+
+export function StageResult({ video, stage, drawer }: StageResultProps) {
+  const R = STAGE_RESULTS[stage.id];
+  return R ? <R video={video} stage={stage} drawer={drawer} /> : null;
+}
+
+/* stages that take the whole screen, without the result header (the drawer button goes inside) */
+export const HEADERLESS_STAGES = new Set(["render"]);

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

@@ -0,0 +1,92 @@
+/* Swap the style reference with the video under way: the request goes to the agent's session,
+   which redoes only what depends on the style (skill omnivideo). */
+
+import { useState } from "react";
+import { useReferences } from "../../../hooks/useReferences";
+import { api, enc, send as sendRequest, type ActionResult } from "../../../lib/api";
+import { timeAgo } from "../../../lib/format";
+import { ReferencePicker } from "../../../components/ReferencePicker";
+import { ResultMessage } from "../../../components/ResultMessage";
+import { Exchange, X } from "../../../components/icons";
+import type { VideoDetail } from "../../../types/api";
+
+export function SwapReference({ video }: { video: VideoDetail }) {
+  const current = video.scenes?.references ?? [];
+  const { references } = useReferences();
+  const [open, setOpen] = useState(false);
+  const [choice, setChoice] = useState(current[0] ?? "");
+  const [note, setNote] = useState("");
+  const [sending, setSending] = useState(false);
+  const [response, setResponse] = useState<ActionResult>(null);
+  const done = (id: string) => !!video.status?.stages.find(e => e.id === id)?.ok;
+  const same = current.length === 1 && current[0] === choice;
+  /* what gets redone, depending on where the video is */
+  const redoes = [
+    "o estilo do motion.md",
+    done("motion") ? "a composição de todas as cenas" : "",
+    done("render") ? "o render" : "",
+    done("export") ? "a exportação" : "",
+  ].filter(Boolean);
+  const send = async () => {
+    setSending(true);
+    setResponse(null);
+    const r = await sendRequest(
+      api.videos[":slug"].reference.$post({ param: { slug: enc(video.slug) }, json: { reference: choice, note } }),
+    );
+    setSending(false);
+    setResponse(r);
+    if (r.ok) {
+      setOpen(false);
+      setNote("");
+    }
+  };
+  const swap = video.reference_swap;
+  return (
+    <div className="swap-reference">
+      {swap && !swap.applied && (
+        <p className="final-verdict redoing">
+          Trocando para <b>{swap.to ?? "outra, escolhida pelo agente"}</b> ({timeAgo(swap.requested_at)}): o agente
+          reescreve o estilo e depois refaz a composição.
+          {swap.note ? ` Pedido: “${swap.note}”.` : ""}
+        </p>
+      )}
+      <div className="swap-reference-top">
+        <span>
+          Estilo visual: <b>{current.length ? current.join(" + ") : "Nenhuma"}</b>
+        </span>
+        {!open && (
+          <button className="button" onClick={() => setOpen(true)}>
+            <Exchange className="ic" /> Trocar estilo visual
+          </button>
+        )}
+      </div>
+      {open && (
+        <div className="verdict">
+          <ReferencePicker references={references} value={choice} onChange={setChoice} current={current} />
+          <textarea
+            aria-label="O que mudar no estilo"
+            rows={2}
+            value={note}
+            onChange={e => setNote(e.target.value)}
+            placeholder="Opcional: o que você quer da nova (o ritmo dela, a paleta, a tipografia…)"
+          />
+          <p className="hint">Refaz {redoes.join(", ")}. Roteiro, cenas aprovadas, falas e voz continuam.</p>
+          <div className="actions">
+            <button
+              className="button approve"
+              disabled={sending || (same && !note.trim())}
+              onClick={send}
+              title={same && !note.trim() ? "Este já é o estilo visual: escolha outro ou diga o que mudar" : ""}
+            >
+              <Exchange className="ic" /> {sending ? "Enviando…" : "Trocar e refazer o estilo"}
+            </button>
+            <button className="button" disabled={sending} onClick={() => setOpen(false)}>
+              <X className="ic" /> Cancelar
+            </button>
+          </div>
+        </div>
+      )}
+      <ResultMessage result={response} />
+    </div>
+  );
+}