@crievo/omni 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,278 @@
+/* Scenes approval (tools/approval.mjs). With nobody touching them, they approve by themselves at
+   the deadline. Opening a change pauses the countdown; sending or cancelling the last open change
+   makes it resume where it stopped. */
+
+import { useEffect, useRef, useState } from "react";
+import { useNow } from "../../../hooks/useNow";
+import { api, enc, send as sendRequest, type ActionResult } from "../../../lib/api";
+import { findFile } from "../../../lib/media";
+import { formatCountdown, timeAgo } from "../../../lib/format";
+import { Badge } from "../../../components/ui/badge";
+import { ResultMessage } from "../../../components/ResultMessage";
+import { Check, PaperPlane, Pencil, Play, X } from "../../../components/icons";
+import type { VideoDetail } from "../../../types/api";
+import { MediaImage } from "./MediaImage";
+import { scenesOf } from "./StageResult";
+import { timeLabel } from "./ScriptApprovalPanel";
+
+const SCENE_STATE_LABEL = { pending: "Pendente", approved: "Aprovada", change_requested: "Pede alteração" } as const;
+
+export function ScenesApprovalPanel({ video }: { video: VideoDetail }) {
+  const a = video.scenes_approval!;
+  const now = useNow();
+  const [writing, setWriting] = useState<Record<string, string>>({});
+  const [sending, setSending] = useState<string | null>(null);
+  const [response, setResponse] = useState<ActionResult>(null);
+  /* this screen paused the countdown: it is the one that resumes it when the edit ends */
+  const pausedHere = useRef(false);
+  const open = a.status === "pending";
+  const scenes = api.videos[":slug"].scenes;
+  const param = { slug: enc(video.slug) };
+  const byId = new Map(scenesOf(video).map(c => [c.id, c]));
+  const editing = Object.keys(writing).length > 0;
+  /* changes written and not sent yet: the footer button sends them all together */
+  const withChange = Object.keys(writing).filter(id => writing[id].trim());
+  const blank = Object.keys(writing).length - withChange.length;
+  const withoutChange = Object.entries(a.scenes).filter(([id, d]) => d.state === "pending" && !(id in writing)).length;
+
+  const edited = () => {
+    if (!open || a.mode !== "auto" || pausedHere.current) return;
+    pausedHere.current = true;
+    sendRequest(scenes.pause.$post({ param, json: {} })).then(r => {
+      if (!r.ok) pausedHere.current = false;
+    });
+  };
+  const resumeCountdown = () => {
+    pausedHere.current = false;
+    /* the round may have ended with the last decision: then there is nothing to resume */
+    sendRequest(scenes.resume.$post({ param, json: {} })).catch(() => {});
+  };
+  /* the last open change was sent or cancelled */
+  useEffect(() => {
+    if (!editing && pausedHere.current && open) resumeCountdown();
+  }, [editing, open]);
+  const send = async (key: string, request: () => Promise<NonNullable<ActionResult>>) => {
+    setSending(key);
+    setResponse(null);
+    const r = await request();
+    setSending(null);
+    setResponse(r);
+    return r.ok;
+  };
+  const decide = async (id: string, decision: "approve" | "change") => {
+    const ok = await send(id, () =>
+      sendRequest(
+        scenes.decide.$post({
+          param,
+          json: { scene: id, decision, comment: decision === "change" ? (writing[id] ?? "") : "" },
+        }),
+      ),
+    );
+    if (ok) setWriting(({ [id]: _, ...rest }) => rest);
+  };
+
+  /* changes first, then approve the rest: the round only closes on the last decision */
+  const finish = async () => {
+    setSending("all");
+    setResponse(null);
+    let r: NonNullable<ActionResult> = { ok: true, output: "" };
+    for (const id of withChange) {
+      r = await sendRequest(
+        scenes.decide.$post({ param, json: { scene: id, decision: "change", comment: writing[id] } }),
+      );
+      if (!r.ok) break;
+      setWriting(({ [id]: _, ...rest }) => rest);
+    }
+    if (r.ok && withoutChange > 0) r = await sendRequest(scenes["approve-all"].$post({ param, json: {} }));
+    setSending(null);
+    setResponse(r);
+  };
+  const finishLabel =
+    sending === "all"
+      ? "Gravando…"
+      : withChange.length === 0
+        ? a.pending_count === Object.keys(a.scenes).length
+          ? "Aprovar todas"
+          : `Aprovar as ${a.pending_count} pendentes`
+        : withoutChange > 0
+          ? "Aprovar e realizar alterações"
+          : withChange.length === 1
+            ? "Enviar alteração"
+            : "Enviar alterações";
+
+  return (
+    <div className="scenes-approval">
+      <div className={`approval-top ${a.status}`}>
+        {open && a.mode === "auto" && (
+          <p>
+            <strong>
+              Aprovam sozinhas em <span className="mono">{formatCountdown(Date.parse(a.deadline) - now)}</span>
+            </strong>{" "}
+            (às {timeLabel(a.deadline)}). Abrir uma alteração pausa a contagem.
+          </p>
+        )}
+        {open && a.mode === "paused" && (
+          <p>
+            <strong>Contagem pausada</strong> enquanto você edita: faltam{" "}
+            <span className="mono">{formatCountdown(a.remaining_ms ?? 0)}</span>.
+            {editing
+              ? " Ela volta de onde parou quando você enviar ou cancelar a alteração."
+              : " Nenhuma alteração aberta nesta tela."}
+          </p>
+        )}
+        {open && a.mode === "paused" && !editing && (
+          <button className="button" onClick={resumeCountdown}>
+            <Play className="ic" /> Retomar contagem
+          </button>
+        )}
+        {a.status === "approved" && (
+          <p>
+            <strong>Cenas aprovadas</strong>
+            {a.auto_count
+              ? ` (${a.auto_count === Object.keys(a.scenes).length ? "todas" : a.auto_count} pelo prazo)`
+              : ""}
+            {a.completed_at ? ` ${timeAgo(a.completed_at)}` : ""}.
+          </p>
+        )}
+        {a.status === "change_requested" && (
+          <p>
+            <strong>
+              {a.change_requests.length === 1
+                ? "Uma cena pede alteração"
+                : `${a.change_requests.length} cenas pedem alteração`}
+            </strong>
+            : o agente ajusta e abre outra rodada.
+          </p>
+        )}
+        {a.round > 1 && <span className="subtle">Rodada {a.round}</span>}
+      </div>
+
+      <div className="scenes-grid">
+        {Object.entries(a.scenes).map(([id, d]) => {
+          const c = byId.get(id);
+          const text = writing[id];
+          return (
+            <article key={id} className={`scene-card approve-scene ${d.state}`}>
+              <header>
+                <span className="mono">{id}</span> {c?.title}
+                <Badge variant={d.state === "approved" ? "ok" : d.state === "change_requested" ? "warning" : undefined}>
+                  {SCENE_STATE_LABEL[d.state]}
+                  {d.by === "auto" ? " pelo prazo" : ""}
+                </Badge>
+              </header>
+              <MediaImage
+                video={video}
+                file={findFile(video, `motion/wireframes/${id}.png`)}
+                title={`${id} · wireframe`}
+                className="wireframe"
+              />
+              <dl className="data">
+                {c?.hero && (
+                  <>
+                    <dt>Herói</dt>
+                    <dd>{c.hero}</dd>
+                  </>
+                )}
+                {c?.goal && (
+                  <>
+                    <dt>Objetivo</dt>
+                    <dd>{c.goal}</dd>
+                  </>
+                )}
+                {c?.visual && (
+                  <>
+                    <dt>Visual</dt>
+                    <dd>{c.visual}</dd>
+                  </>
+                )}
+              </dl>
+              {d.state === "change_requested" && d.comment && text === undefined && (
+                <p className="note">“{d.comment}”</p>
+              )}
+              {open &&
+                (text === undefined ? (
+                  <div className="actions">
+                    {d.state === "pending" && (
+                      <button className="button approve" disabled={!!sending} onClick={() => decide(id, "approve")}>
+                        <Check className="ic" /> {sending === id ? "Gravando…" : "Aprovar"}
+                      </button>
+                    )}
+                    <button
+                      className="button reject"
+                      disabled={!!sending}
+                      onClick={() => {
+                        edited();
+                        setWriting(w => ({ ...w, [id]: d.state === "change_requested" ? d.comment : "" }));
+                      }}
+                    >
+                      <Pencil className="ic" /> {d.state === "change_requested" ? "Mudar o pedido" : "Pedir alteração"}
+                    </button>
+                  </div>
+                ) : (
+                  <div className="verdict">
+                    <textarea
+                      aria-label={`O que mudar em ${id}`}
+                      autoFocus
+                      rows={3}
+                      value={text}
+                      onFocus={edited}
+                      onChange={e => {
+                        edited();
+                        setWriting(s => ({ ...s, [id]: e.target.value }));
+                      }}
+                      placeholder="O que mudar nesta cena: herói, o que ela mostra, cortar, dividir em duas…"
+                    />
+                    <div className="actions">
+                      <button
+                        className="button reject"
+                        disabled={!!sending || !text.trim()}
+                        onClick={() => decide(id, "change")}
+                      >
+                        <PaperPlane className="ic" /> {sending === id ? "Gravando…" : "Enviar alteração"}
+                      </button>
+                      <button
+                        className="button"
+                        disabled={!!sending}
+                        onClick={() => setWriting(({ [id]: _, ...rest }) => rest)}
+                      >
+                        <X className="ic" /> Cancelar
+                      </button>
+                    </div>
+                  </div>
+                ))}
+            </article>
+          );
+        })}
+      </div>
+
+      {open && (a.pending_count > 0 || withChange.length > 0) && (
+        <div className="floating-approval">
+          <span className="subtle">
+            {withChange.length > 0
+              ? `${withChange.length} com alteração${withoutChange > 0 ? ` · ${withoutChange} sem alteração` : ""}`
+              : `${a.pending_count} sem alteração`}
+            {blank > 0 ? ` · ${blank} aberta sem texto` : ""}
+          </span>
+          <button
+            className={`button ${withChange.length > 0 && withoutChange === 0 ? "reject" : "approve"}`}
+            disabled={!!sending || blank > 0 || (withChange.length === 0 && a.pending_count === 0)}
+            title={blank > 0 ? "Escreva ou cancele a alteração aberta" : undefined}
+            onClick={
+              withChange.length > 0
+                ? finish
+                : () => send("all", () => sendRequest(scenes["approve-all"].$post({ param, json: {} })))
+            }
+          >
+            {withChange.length > 0 && withoutChange === 0 ? <PaperPlane className="ic" /> : <Check className="ic" />}{" "}
+            {sending === "all" && withChange.length === 0 ? "Aprovando…" : finishLabel}
+          </button>
+        </div>
+      )}
+      <ResultMessage result={response} />
+      <p className="hint">
+        Grava em <code>motion/approval.json</code> (<code>tools/approval.mjs</code>). A sessão do agente segue sozinha
+        quando a rodada termina; com alteração, ela ajusta só essas cenas e abre outra rodada.
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,72 @@
+/* The request kept in publication.json: when, where and how it is */
+
+import { useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { api, enc, send, type ActionResult } from "../../../lib/api";
+import { formatDayTime } from "../../../lib/format";
+import { formatPlatformList } from "../../../lib/platforms";
+import { Clock } from "../../../components/icons";
+import type { PlatformAccounts, ScheduledPost, VideoDetail } from "../../../types/api";
+
+const TITLE: Record<ScheduledPost["state"], string> = {
+  scheduled: "Agendado",
+  publishing: "Publicando agora pela agenda",
+  failed: "A publicação agendada falhou",
+  missed: "A publicação agendada passou da hora",
+};
+
+export function ScheduledInfo({
+  video,
+  post,
+  agent,
+}: {
+  video: VideoDetail;
+  post: ScheduledPost;
+  agent?: PlatformAccounts["scheduler"];
+}) {
+  const [cancelling, setCancelling] = useState(false);
+  const [response, setResponse] = useState<ActionResult>(null);
+  const cancel = async () => {
+    setCancelling(true);
+    setResponse(
+      await send(api.videos[":slug"].publish.schedule.cancel.$post({ param: { slug: enc(video.slug) }, json: {} })),
+    );
+    setCancelling(false);
+  };
+  return (
+    <div className={`scheduled-post ${post.state}`}>
+      <p className="scheduled-post-title">
+        <Clock className="scheduled-post-icon" weight="bold" />
+        <span>
+          <strong>{TITLE[post.state]}</strong> · {formatDayTime(post.when)} {formatPlatformList(post.platforms)}
+        </span>
+      </p>
+      {post.last_error && (
+        <p className="warning">
+          {post.state === "scheduled" && post.next_attempt
+            ? `A tentativa ${post.attempts} falhou, tenta de novo ${formatDayTime(post.next_attempt)}: `
+            : ""}
+          {post.last_error.message}
+        </p>
+      )}
+      {(post.state === "failed" || post.state === "missed") && (
+        <p className="hint">Agende de novo abaixo, publique agora ou cancele.</p>
+      )}
+      {post.state === "scheduled" && agent && !agent.loaded && (
+        <p className="warning">
+          O agente da agenda está desligado: nada sobe na hora. Ligue em{" "}
+          <Link to="/settings/$category" params={{ category: "publishing" }} className="link">
+            Configurações → Publicação
+          </Link>
+          .
+        </p>
+      )}
+      {post.state !== "publishing" && (
+        <button className="subtle-link" disabled={cancelling} onClick={cancel}>
+          {cancelling ? "Cancelando…" : "Cancelar agendamento"}
+        </button>
+      )}
+      {response && !response.ok && <p className="response error">{response.error}</p>}
+    </div>
+  );
+}

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

@@ -0,0 +1,189 @@
+/* Script approval (tools/approval.mjs --script): approve, ask the agent for a change or edit the
+   text right here (saving writes script.md and approves). With nobody touching it, it approves by
+   itself at the deadline. Opening the change or the edit pauses the countdown; cancelling makes it
+   resume where it stopped. */
+
+import { useRef, useState, type ReactNode } from "react";
+import { useNow } from "../../../hooks/useNow";
+import { api, enc, send as sendRequest, type ActionResult } from "../../../lib/api";
+import { formatCountdown, timeAgo } from "../../../lib/format";
+import { ResultMessage } from "../../../components/ResultMessage";
+import { ChatCircleText, Check, FloppyDisk, PaperPlane, Pencil, Play, X } from "../../../components/icons";
+import type { VideoDetail } from "../../../types/api";
+
+export const timeLabel = (iso: string) =>
+  new Date(iso).toLocaleTimeString("pt-BR", { hour: "2-digit", minute: "2-digit" });
+
+type Mode = "view" | "request-change" | "edit";
+
+export function ScriptApprovalPanel({ video, tabs }: { video: VideoDetail; tabs: ReactNode }) {
+  const a = video.script_approval!;
+  const item = a.items.script;
+  const now = useNow();
+  const [mode, setMode] = useState<Mode>("view");
+  const [request, setRequest] = useState("");
+  const [text, setText] = useState("");
+  const [sending, setSending] = useState<string | null>(null);
+  const [response, setResponse] = useState<ActionResult>(null);
+  /* this screen paused the countdown: it is the one that resumes it when the edit ends */
+  const pausedHere = useRef(false);
+  const open = a.status === "pending";
+  const script = api.videos[":slug"].script;
+  const param = { slug: enc(video.slug) };
+
+  const resumeCountdown = () => {
+    pausedHere.current = false;
+    /* the round may have ended meanwhile: then there is nothing to resume */
+    sendRequest(script.resume.$post({ param, json: {} })).catch(() => {});
+  };
+  const openMode = (m: "request-change" | "edit") => {
+    setResponse(null);
+    if (m === "edit") setText(video.texts.script ?? "");
+    else setRequest(item.state === "change_requested" ? item.comment : "");
+    setMode(m);
+    if (!open || a.mode !== "auto" || pausedHere.current) return;
+    pausedHere.current = true;
+    sendRequest(script.pause.$post({ param, json: {} })).then(r => {
+      if (!r.ok) pausedHere.current = false;
+    });
+  };
+  const cancel = () => {
+    setMode("view");
+    if (pausedHere.current && open) resumeCountdown();
+  };
+  const send = async (key: string, request: () => Promise<NonNullable<ActionResult>>) => {
+    setSending(key);
+    setResponse(null);
+    const r = await request();
+    setSending(null);
+    setResponse(r);
+    /* the decision closes the round: there is no countdown to resume */
+    if (r.ok) {
+      pausedHere.current = false;
+      setMode("view");
+    }
+  };
+
+  return (
+    <div className="scenes-approval script-approval">
+      <div className={`approval-top ${a.status}`}>
+        {open && a.mode === "auto" && (
+          <p>
+            <strong>
+              Aprova sozinho em <span className="mono">{formatCountdown(Date.parse(a.deadline) - now)}</span>
+            </strong>{" "}
+            (às {timeLabel(a.deadline)}). Pedir alteração ou editar pausa a contagem.
+          </p>
+        )}
+        {open && a.mode === "paused" && (
+          <p>
+            <strong>Contagem pausada</strong> enquanto você edita: faltam{" "}
+            <span className="mono">{formatCountdown(a.remaining_ms ?? 0)}</span>.
+            {mode !== "view" ? " Ela volta de onde parou quando você enviar ou cancelar." : " Nada aberto nesta tela."}
+          </p>
+        )}
+        {open && a.mode === "paused" && mode === "view" && (
+          <button className="button" onClick={resumeCountdown}>
+            <Play className="ic" /> Retomar contagem
+          </button>
+        )}
+        {a.status === "approved" && (
+          <p>
+            <strong>Roteiro aprovado</strong>
+            {item.edited
+              ? " com a edição feita por você"
+              : item.by === "auto"
+                ? " pelo prazo"
+                : item.by === "literal"
+                  ? " direto: era o seu roteiro literal"
+                  : " por você"}
+            {a.completed_at ? ` ${timeAgo(a.completed_at)}` : ""}.
+          </p>
+        )}
+        {a.status === "change_requested" && (
+          <p>
+            <strong>O roteiro pede alteração</strong>: o agente reescreve e abre outra rodada.
+          </p>
+        )}
+        {a.round > 1 && <span className="subtle">Rodada {a.round}</span>}
+      </div>
+      {a.status === "change_requested" && item.comment && <p className="note">“{item.comment}”</p>}
+
+      {open && mode === "view" && (
+        <div className="actions">
+          <button
+            className="button approve"
+            disabled={!!sending}
+            onClick={() =>
+              send("approve", () => sendRequest(script.decide.$post({ param, json: { decision: "approve" } })))
+            }
+          >
+            <Check className="ic" /> {sending === "approve" ? "Gravando…" : "Aprovar"}
+          </button>
+          <button className="button reject" disabled={!!sending} onClick={() => openMode("request-change")}>
+            <ChatCircleText className="ic" /> Pedir alteração ao agente
+          </button>
+          <button className="button" disabled={!!sending} onClick={() => openMode("edit")}>
+            <Pencil className="ic" /> Editar o texto
+          </button>
+        </div>
+      )}
+      {open && mode === "request-change" && (
+        <div className="verdict">
+          <textarea
+            aria-label="O que mudar no roteiro"
+            autoFocus
+            rows={3}
+            value={request}
+            onChange={e => setRequest(e.target.value)}
+            placeholder="O que o agente deve mudar: o gancho, o tom, cortar ou juntar blocos, encurtar…"
+          />
+          <div className="actions">
+            <button
+              className="button reject"
+              disabled={!!sending || !request.trim()}
+              onClick={() =>
+                send("change", () =>
+                  sendRequest(script.decide.$post({ param, json: { decision: "change", comment: request } })),
+                )
+              }
+            >
+              <PaperPlane className="ic" /> {sending === "change" ? "Gravando…" : "Enviar alteração"}
+            </button>
+            <button className="button" disabled={!!sending} onClick={cancel}>
+              <X className="ic" /> Cancelar
+            </button>
+          </div>
+        </div>
+      )}
+      {open && mode === "edit" && (
+        <div className="verdict text-editor">
+          <textarea aria-label="script.md" autoFocus spellCheck value={text} onChange={e => setText(e.target.value)} />
+          <div className="actions">
+            <button
+              className="button approve"
+              disabled={!!sending || !text.trim() || text === video.texts.script}
+              onClick={() => send("edit", () => sendRequest(script.edit.$post({ param, json: { text } })))}
+              title={text === video.texts.script ? "Nada mudou: para aprovar como está, use Aprovar" : undefined}
+            >
+              <FloppyDisk className="ic" /> {sending === "edit" ? "Gravando…" : "Salvar e aprovar"}
+            </button>
+            <button className="button" disabled={!!sending} onClick={cancel}>
+              <X className="ic" /> Cancelar
+            </button>
+          </div>
+          <p className="hint">
+            Salvar grava o script.md (a versão anterior fica no histórico) e aprova: o agente segue com o seu texto, sem
+            reescrevê-lo.
+          </p>
+        </div>
+      )}
+      <ResultMessage result={response} />
+      {mode !== "edit" && tabs}
+      <p className="hint">
+        Grava em <code>script-approval.json</code> (<code>tools/approval.mjs --script</code>). A sessão do agente segue
+        sozinha quando a rodada termina; com alteração, ela reescreve o roteiro e abre outra rodada.
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,17 @@
+/* --- 1: content script ------------------------------------------------------------------ */
+
+import { EmptyResult, ResultTabs, type StageResultProps } from "./StageResult";
+import { ScriptApprovalPanel } from "./ScriptApprovalPanel";
+
+export function ScriptStage({ video, stage }: StageResultProps) {
+  if (!video.texts.script && !video.texts.brief) return <EmptyResult stage={stage} />;
+  const tabs = (
+    <ResultTabs
+      tabs={[
+        ["script", "script.md", video.texts.script],
+        ["brief", "brief.md", video.texts.brief],
+      ]}
+    />
+  );
+  return video.script_approval && video.texts.script ? <ScriptApprovalPanel video={video} tabs={tabs} /> : tabs;
+}