@crievo/omni 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+import { ProviderLogo } from "../../../components/ProviderLogo";
+
+/* the provider logo next to the text (name, "(padrão)", reason) */
+export const WithLogo = ({ id, children }: { id: string; children: ReactNode }) => (
+  <span className="with-logo">
+    <ProviderLogo id={id} size={18} />
+    {children}
+  </span>
+);

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

@@ -0,0 +1,295 @@
+/* A video's page: the pipeline stepper and, for the chosen stage, the result, with the drawer of
+   previous results. The agent (the video's session) and the process (state, run, live log,
+   command) sit in a right sidebar: collapsed, it is a floating tab with the stage state; open, the
+   page shrinks and the sidebar takes the side (it does not cover the result). */
+
+import { useEffect, useRef, useState } from "react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { useVideo } from "../../hooks/useVideos";
+import { useQueue } from "../../hooks/useQueue";
+import { useNow } from "../../hooks/useNow";
+import { useSessionFor } from "../../hooks/useSessions";
+import { useSidePanel } from "../../hooks/useSidePanel";
+import { useOmniClaude } from "../../lib/omni-ui";
+import { Badge } from "../../components/ui/badge";
+import { StageStepper } from "../../components/StageStepper";
+import { SessionPanel } from "../../components/SessionPanel";
+import { AgentWalking } from "../../components/AgentWalking";
+import { SidePanel } from "../../components/SidePanel";
+import { NotFound } from "../../components/NotFound";
+import { ArrowLeft, Carousel, Clock, SidebarRight, VideoCamera } from "../../components/icons";
+import {
+  STAGES,
+  PIPELINES,
+  SILENT_SKIPPED_STAGES,
+  videoStagesFor,
+  PIPELINE_NAME,
+  findStage,
+  getStageState,
+  getInitialStage,
+  pipelineOf,
+  stageStateDetail,
+  type Pipeline,
+} from "../../lib/stages";
+import { capitalize, formatSeconds } from "../../lib/format";
+import { StageResult, HEADERLESS_STAGES } from "./components/StageResult";
+import { StageDrawer, countPreviousResults } from "./components/StageDrawer";
+import { StageProcess, STAGE_STATE_TEXT } from "./components/StageProcess";
+import { VideoSkeleton } from "./components/VideoSkeleton";
+import { CarouselCreate } from "./components/CarouselCreate";
+
+const PANEL_STORAGE_KEY = "omnivideo.process-panel";
+
+export function VideoPage({ slug, stageParam }: { slug: string; stageParam: string | null }) {
+  const { video, error } = useVideo(slug);
+  const queue = useQueue();
+  const now = useNow();
+  const navigate = useNavigate();
+  const [initial, setInitial] = useState<string | null>(null);
+  const [drawer, setDrawer] = useState(false);
+  const [panel, setPanel] = useSidePanel(PANEL_STORAGE_KEY);
+  /* Omni's open_claude: the video's Claude lives in the Processo sidebar */
+  useOmniClaude("video", slug, { reveal: () => setPanel(true) });
+  const session = useSessionFor("video", slug);
+  const railMark = useRef<HTMLDivElement>(null);
+  const rail = useRef<HTMLElement>(null);
+  const loaded = !!video;
+  /* the mark sits at the rail's natural position: when it leaves through the top of the panel, the
+     rail is stuck and gets a background (data-stuck) so the content does not pass under the stepper */
+  useEffect(() => {
+    const mark = railMark.current,
+      nav = rail.current;
+    if (!mark || !nav || typeof IntersectionObserver === "undefined") return;
+    const obs = new IntersectionObserver(([entry]) => {
+      nav.dataset.stuck = String(
+        !entry.isIntersecting && entry.boundingClientRect.top < nav.getBoundingClientRect().top,
+      );
+    });
+    obs.observe(mark);
+    return () => obs.disconnect();
+  }, [loaded, !!error]);
+  /* the opening stage is picked once; then it stays where the user put it. A carousel-only
+     content opens on the carousel pipeline */
+  useEffect(() => {
+    if (video && queue && !initial)
+      setInitial(
+        getInitialStage(video, queue, video.runs, video.deliverables.includes("video") ? "video" : "carousel"),
+      );
+  }, [video, queue, initial]);
+  useEffect(() => {
+    document.title = video ? `${video.title} · Omni` : "Omni";
+  }, [video?.title]);
+  useEffect(() => setDrawer(false), [stageParam]);
+
+  if (error) {
+    return error.startsWith("404") ? (
+      <NotFound
+        title="Vídeo não encontrado"
+        path={slug}
+        text="Nenhuma pasta com esse nome em videos/. Pode ter sido arquivada ou apagada."
+      />
+    ) : (
+      <div className="page">
+        <Link to="/videos" className="back">
+          <ArrowLeft className="ic" /> Conteúdos
+        </Link>
+        <p className="error">{error}</p>
+      </div>
+    );
+  }
+  if (!video) return <VideoSkeleton />;
+
+  /* "Sem narração e voz": no script nor narration/voice step; a link to one of them lands on the initial step */
+  const silent = video.narration === false;
+  const videoStages = videoStagesFor(!silent);
+  const asked = findStage(stageParam ?? initial ?? "") ?? findStage(initial ?? "") ?? STAGES[0];
+  const chosen =
+    silent && SILENT_SKIPPED_STAGES.has(asked.id)
+      ? (videoStages.find(s => s.id === findStage(initial ?? "")?.id) ?? videoStages[0])
+      : asked;
+  const stage = (pipelineOf(chosen) === "video" && videoStages.find(s => s.id === chosen.id)) || chosen;
+  const pipeline = pipelineOf(stage);
+  const onCarousel = pipeline === "carousel";
+  const car = video.carousel;
+  /* the switch only shows when the content delivers more than one pipeline */
+  const switchPipeline = (p: Pipeline) =>
+    navigate({ to: "/videos/$slug/$stage", params: { slug, stage: getInitialStage(video, queue, video.runs, p) } });
+  const st = video.status;
+  const previous = countPreviousResults(stage, video);
+  const state = getStageState(stage, video, queue, video.runs);
+  const choose = (id: string) => navigate({ to: "/videos/$slug/$stage", params: { slug, stage: id } });
+  const drawerButton = (
+    <button className="drawer-button" onClick={() => setDrawer(true)}>
+      <Clock className="ic" /> Resultados anteriores <span className="count">{previous}</span>
+    </button>
+  );
+  return (
+    <div className={`page video${panel ? " with-panel" : ""}`}>
+      <header className="video-header">
+        <Link to="/videos" className="back">
+          <ArrowLeft className="ic" /> Conteúdos
+        </Link>
+        <div className="video-title">
+          <h1>{video.title}</h1>
+          {!onCarousel &&
+            st &&
+            (st.ready ? (
+              <Badge variant="ok">Pronto</Badge>
+            ) : (
+              <span className="subtle">
+                Próxima: <b className="warning">{capitalize(st.next?.name ?? "")}</b>
+              </span>
+            ))}
+          {onCarousel &&
+            car &&
+            (car.publication?.instagram?.id ? (
+              <Badge variant="ok">Publicado</Badge>
+            ) : (
+              <span className="subtle">
+                Próxima: <b className="warning">{capitalize(car.stages.find(s => s.id === car.next)?.name ?? "")}</b>
+              </span>
+            ))}
+          {!video.deliverables.includes("carousel") && !!video.texts.script && (
+            <span className="video-title-action">
+              <CarouselCreate video={video} compact />
+            </span>
+          )}
+        </div>
+        {onCarousel ? (
+          <div className="meta">
+            <span className="mono">{video.root}/carousel</span>
+            {car?.format && (
+              <span>
+                {car.format.ratio} · {car.format.w}×{car.format.h}
+              </span>
+            )}
+            {!!car?.slides && <span>{car.slides} slides</span>}
+            {!!car?.references?.length && <span>Estilo visual: {car.references.join(", ")}</span>}
+          </div>
+        ) : (
+          <div className="meta">
+            <span className="mono">{video.root}</span>
+            {video.format && (
+              <span>
+                {video.format.aspect} · {video.format.w}×{video.format.h} · {video.format.fps} fps
+              </span>
+            )}
+            {st?.total_duration != null && <span>{formatSeconds(st.total_duration, 2)}</span>}
+            {!!st?.scenes && (
+              <span>
+                {st.scenes} cenas · {st.lines} falas
+              </span>
+            )}
+            {!!video.scenes?.references?.length && (
+              <Link
+                to="/videos/$slug/$stage"
+                params={{ slug, stage: "motion_script" }}
+                title="Trocar o estilo visual na etapa 2"
+              >
+                Estilo visual: {video.scenes.references.join(", ")}
+              </Link>
+            )}
+            {video.resolved?.provisional && <Badge variant="warning">Tempos provisórios</Badge>}
+          </div>
+        )}
+        {onCarousel &&
+          car?.warnings.map(w => (
+            <p key={w} className="warning">
+              ⚠ {w}
+            </p>
+          ))}
+        {!onCarousel && video.statusError && (
+          <p className="warning">
+            ⚠ o status não pôde ser lido agora{st ? " (mostrando o último que deu certo)" : ""}: {video.statusError}
+          </p>
+        )}
+        {!onCarousel &&
+          st?.warnings.map(w => (
+            <p key={w} className="warning">
+              ⚠ {w}
+            </p>
+          ))}
+        {!onCarousel && video.resolvedError && <p className="warning">⚠ tempos: {video.resolvedError}</p>}
+      </header>
+
+      <div ref={railMark} className="rail-mark" aria-hidden="true" />
+      <nav ref={rail} className={`rail${video.deliverables.length > 1 ? " with-pipelines" : ""}`}>
+        {video.deliverables.length > 1 && (
+          <div className="segmented pipelines" role="tablist" aria-label="O que este conteúdo entrega">
+            {video.deliverables.map(p => (
+              <button
+                key={p}
+                role="tab"
+                aria-selected={p === pipeline}
+                className={p === pipeline ? "active" : ""}
+                onClick={() => p !== pipeline && switchPipeline(p)}
+              >
+                {p === "video" ? <VideoCamera className="ic" /> : <Carousel className="ic" />}
+                {PIPELINE_NAME[p]}
+              </button>
+            ))}
+          </div>
+        )}
+        <StageStepper
+          video={video}
+          queue={queue}
+          runs={video.runs}
+          selected={stage.id}
+          onSelect={choose}
+          stages={pipeline === "video" ? videoStages : PIPELINES[pipeline]}
+        />
+      </nav>
+
+      {/* the agent (or a tool) is working: a shortcut to the processing in the sidebar */}
+      {!panel && (session?.state === "running" || state.kind === "running" || state.kind === "redoing") && (
+        <div className="processing-notice">
+          <span className="process-mark" aria-hidden="true" />
+          <span className="processing-notice-text">
+            {session?.state === "running" ? "O agente está processando este vídeo" : `${stage.title} em processamento`}
+            {session?.now && <small>{session.now}</small>}
+          </span>
+          <button type="button" className="button small" onClick={() => setPanel(true)}>
+            <SidebarRight className="ic" /> Abrir processamento
+          </button>
+          {session?.state === "running" && <AgentWalking className="in-corner" />}
+        </div>
+      )}
+
+      <div className="stage-panel">
+        {HEADERLESS_STAGES.has(stage.id) ? (
+          <section className="result fullscreen">
+            <StageResult video={video} stage={stage} drawer={drawerButton} />
+          </section>
+        ) : (
+          <section className="result">
+            <header className="result-top">
+              <div>
+                <span className="subtle">
+                  {stage.num} · {stageStateDetail(state, now) || "Ainda não feita"}
+                </span>
+                <h2>{stage.title}</h2>
+              </div>
+              {drawerButton}
+            </header>
+            <StageResult video={video} stage={stage} />
+          </section>
+        )}
+      </div>
+      <SidePanel
+        open={panel}
+        onToggle={setPanel}
+        title="Processo"
+        subtitle={`${stage.num} · ${stage.title}`}
+        tab={STAGE_STATE_TEXT[state.kind]}
+        status={state.kind}
+        tabLabel="O agente, o estado e o log desta etapa"
+        lockEscape={drawer}
+        floatingTab={false}
+      >
+        <SessionPanel type="video" target={slug} />
+        <StageProcess stage={stage} video={video} queue={queue} />
+      </SidePanel>
+      {drawer && <StageDrawer stage={stage} video={video} queue={queue} onClose={() => setDrawer(false)} />}
+    </div>
+  );
+}

package/studio/web/pages/VideosPage/components/PublishedOn.tsx

@@ -0,0 +1,85 @@
+import { Badge } from "../../../components/ui/badge";
+import { PlatformIcon } from "../../../components/PlatformIcon";
+import { formatDayTime, timeAgo } from "../../../lib/format";
+import { platformName, type PlatformId } from "../../../lib/platforms";
+import { PUBLISH_PLATFORMS, activeSchedule } from "../../../lib/video-tabs";
+import type { VideoSummary } from "../../../types/api";
+
+export const PRIVACY_LABEL: Record<string, string> = {
+  private: "Privado",
+  unlisted: "Não listado",
+  public: "Público",
+  SELF_ONLY: "Só você",
+  PUBLIC_TO_EVERYONE: "Público",
+  MUTUAL_FOLLOW_FRIENDS: "Amigos",
+  FOLLOWER_OF_CREATOR: "Seguidores",
+};
+
+/* where the video is: one icon per platform, linking to the post. What is scheduled and not up
+   yet shows dimmed, with the set time. */
+export function PublishedOn({ video }: { video: VideoSummary }) {
+  const pub = video.publication;
+  const schedule = activeSchedule(video);
+  const failed = pub?.schedule && !schedule ? pub.schedule : null;
+  const items = PUBLISH_PLATFORMS.map(id => {
+    const p = pub?.[id];
+    if (p?.id) return { id, p, scheduled: false };
+    if (schedule?.platforms.includes(id)) return { id, p: null, scheduled: true };
+    return null;
+  }).filter((x): x is NonNullable<typeof x> => !!x);
+  const carousel = video.carousel?.publication?.instagram;
+  if (!items.length && !failed && !carousel?.id) return null;
+  return (
+    <div className="vr-platforms">
+      {carousel?.id && (
+        <a
+          className="vr-plat carousel"
+          href={carousel.url ?? undefined}
+          target="_blank"
+          rel="noreferrer"
+          title={`Carrossel no Instagram · publicado ${timeAgo(carousel.published_at)}`}
+          aria-label="Carrossel no Instagram"
+        >
+          <PlatformIcon id="instagram" size={16} />
+          <span className="vr-plat-label">Carrossel</span>
+        </a>
+      )}
+      {items.map(({ id, p, scheduled }) => {
+        const name = platformName(id);
+        const privacy = p?.privacy ? (PRIVACY_LABEL[p.privacy] ?? p.privacy) : null;
+        const title = scheduled
+          ? `${name} · agendado para ${formatDayTime(schedule!.when)}`
+          : `${name} · ${p?.draft ? "Rascunho na caixa de entrada do app" : "Publicado"} ${timeAgo(p?.published_at)}${privacy ? ` · ${privacy}` : ""}`;
+        const icon = <PlatformIcon id={id as PlatformId} size={16} />;
+        const className = `vr-plat${scheduled ? " scheduled" : ""}${p?.draft ? " draft" : ""}`;
+        return p?.url ? (
+          <a
+            key={id}
+            className={className}
+            href={p.url}
+            target="_blank"
+            rel="noreferrer"
+            title={title}
+            aria-label={title}
+          >
+            {icon}
+          </a>
+        ) : (
+          <span key={id} className={className} title={title} aria-label={title}>
+            {icon}
+          </span>
+        );
+      })}
+      {schedule && (
+        <Badge variant="running" title={`Sobe ${formatDayTime(schedule.when)}`}>
+          {schedule.state === "publishing" ? "Publicando agora" : `Agendado · ${formatDayTime(schedule.when)}`}
+        </Badge>
+      )}
+      {failed && (failed.state === "failed" || failed.state === "missed") && (
+        <Badge variant="error" title={failed.last_error?.message ?? ""}>
+          {failed.state === "missed" ? "Agenda perdeu a hora" : "Agenda falhou"}
+        </Badge>
+      )}
+    </div>
+  );
+}

package/studio/web/pages/VideosPage/components/ServicesPanel.tsx

@@ -0,0 +1,81 @@
+import { useQueue } from "../../../hooks/useQueue";
+import { useServices } from "../../../hooks/useServices";
+import { gb, premiereStatus, swapStatus } from "../../../lib/services";
+import { Panel } from "../../../components/ui/panel";
+import { Skeleton } from "../../../components/ui/skeleton";
+
+/* the four services (VoiceStudio, voice, Premiere, memory) with the same grid as the list */
+export function ServicesPanelSkeleton() {
+  return (
+    <Panel title="Serviços" className="services-panel">
+      <ul className="services">
+        {[150, 190, 130, 210].map((w, i) => (
+          <li key={i}>
+            <Skeleton className="round" style={{ width: 8, height: 8 }} />
+            <Skeleton className="row" style={{ width: 84 }} />
+            <Skeleton className="row" style={{ width: w, maxWidth: "100%" }} />
+          </li>
+        ))}
+      </ul>
+    </Panel>
+  );
+}
+
+export function ServicesPanel() {
+  const s = useServices();
+  const queue = useQueue();
+  if (!s) return <ServicesPanelSkeleton />;
+  const p = premiereStatus(s.premiere, !!queue?.running.some(t => t.tool === "premiere-export"));
+  const m = swapStatus(s.memory);
+  return (
+    <Panel title="Serviços" className="services-panel">
+      <ul className="services">
+        <li>
+          <span className={`point ${s.voicestudio.ok ? "ok" : "error"}`} />
+          <strong>VoiceStudio</strong>
+          <span className="subtle">
+            {s.voicestudio.ok ? `No ar · ${s.voicestudio.device} · v${s.voicestudio.version}` : "Não responde"}
+          </span>
+          {!s.voicestudio.ok && (
+            <p className="hint">
+              Abra o app, ou rode <code>bun run dev:api</code> na pasta do repositório do VoiceStudio. É o último
+              fallback da voz (etapa 4).
+            </p>
+          )}
+        </li>
+        {s.voices
+          ?.filter(v => v.id !== "voicestudio")
+          .map(v => (
+            <li key={v.id}>
+              <span className={`point ${v.ready ? "ok" : "warning"}`} />
+              <strong>{v.name}</strong>
+              <span className="subtle">
+                {v.ready ? "configurado" : v.reason}
+                {v.default ? " · voz padrão" : " · fallback"}
+              </span>
+            </li>
+          ))}
+        <li>
+          <span className={`point ${p.variant}`} />
+          <strong>Premiere</strong>
+          <span className="subtle">{p.text}</span>
+          {p.hint && <p className="hint">{p.hint} Só a etapa 5 precisa dele.</p>}
+        </li>
+        <li>
+          <span className={`point ${m.variant}`} />
+          <strong>Memória</strong>
+          <span className="subtle">
+            swap {gb(s.memory.swap_used_mb)} de {gb(s.memory.swap_total_mb)} GB · pressão {s.memory.pressure} ·{" "}
+            {s.memory.free_pct}% livre
+          </span>
+          <div className="bar">
+            <div className={m.variant} style={{ width: `${Math.min(100, m.fraction * 100)}%` }} />
+          </div>
+          {m.fraction >= 0.9 && (
+            <p className="hint">Swap acima de 90 %: a voz fica lenta e pode passar do limite de 305 s por fala.</p>
+          )}
+        </li>
+      </ul>
+    </Panel>
+  );
+}

package/studio/web/pages/VideosPage/components/SessionsPanel.tsx

@@ -0,0 +1,62 @@
+import { Link } from "@tanstack/react-router";
+import { useSessions } from "../../../hooks/useSessions";
+import { timeAgo } from "../../../lib/format";
+import { SESSION_STATE, SESSION_TYPE_NAME, sessionPageLink } from "../../../lib/sessions";
+import { Panel } from "../../../components/ui/panel";
+import { AgentWalking } from "../../../components/AgentWalking";
+
+/* overview: the most recent sessions, running first */
+export function SessionsPanel({ limit = 6 }: { limit?: number }) {
+  const list = useSessions();
+  if (!list) return null;
+  const sorted = [...list]
+    .sort((a, b) => Number(b.state === "running") - Number(a.state === "running") || b.activity - a.activity)
+    .slice(0, limit);
+  const running = list.filter(s => s.state === "running").length;
+  return (
+    <Panel
+      title="Agente"
+      extra={
+        <span className="subtle">
+          {running ? (
+            <>
+              {running} trabalhando <AgentWalking className="in-corner" />
+            </>
+          ) : (
+            "Ninguém trabalhando"
+          )}
+        </span>
+      }
+      className="sessions-panel"
+    >
+      {!sorted.length && (
+        <p className="empty">Nenhuma sessão ainda. Vídeo e estilo visual pedidos pela tela abrem uma sessão aqui.</p>
+      )}
+      <ul className="sessions">
+        {sorted.map(s => {
+          const e = SESSION_STATE[s.state];
+          return (
+            <li key={s.id}>
+              <span className={`point ${e.variant}`} />
+              <div>
+                <Link {...sessionPageLink(s)} className="session-title">
+                  {s.title}
+                </Link>
+                <span className="subtle">
+                  {" "}
+                  · {SESSION_TYPE_NAME[s.type]} · {e.text.toLowerCase()} · {timeAgo(s.activity)}
+                </span>
+                {(s.state === "running" ? s.now : s.turn?.result?.text) && (
+                  <p className="session-row">
+                    {s.state === "running" ? s.now : s.turn?.result?.text.replace(/\s+/g, " ").slice(0, 160)}
+                  </p>
+                )}
+              </div>
+              {s.state === "running" && <AgentWalking className="in-corner" />}
+            </li>
+          );
+        })}
+      </ul>
+    </Panel>
+  );
+}

package/studio/web/pages/VideosPage/components/VideoListSkeleton.tsx

@@ -0,0 +1,25 @@
+import { Skeleton } from "../../../components/ui/skeleton";
+
+/* same grid as the video row: 64 px cover, title, meta and stepper */
+export function VideoListSkeleton() {
+  return (
+    <ul className="videos" aria-busy="true" aria-label="Carregando os vídeos">
+      {Array.from({ length: 4 }, (_, i) => (
+        <li key={i} className="video-row" style={{ cursor: "default" }}>
+          <Skeleton style={{ width: 64, aspectRatio: "9 / 16", borderRadius: "var(--radius-sm)" }} />
+          <div className="vr-body">
+            <div className="vr-top">
+              <Skeleton style={{ height: 20, width: `${46 - (i % 2) * 12}%` }} />
+            </div>
+            <div className="meta">
+              <Skeleton className="row" style={{ width: 36 }} />
+              <Skeleton className="row" style={{ width: 52 }} />
+              <Skeleton className="row" style={{ width: 110 }} />
+            </div>
+            <Skeleton style={{ height: 18, width: "72%" }} />
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+}