@crievo/omni 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,122 @@
+import { useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { api, enc, send } from "../../../lib/api";
+import { formatSeconds, timeAgo } from "../../../lib/format";
+import { aspectRatio, mediaUrl } from "../../../lib/media";
+import { SESSION_STATE } from "../../../lib/sessions";
+import { activeSchedule, livePlatforms, carouselLive, contentReady } from "../../../lib/video-tabs";
+import { PIPELINES, PIPELINE_NAME, videoStagesFor } from "../../../lib/stages";
+import { useSessionFor } from "../../../hooks/useSessions";
+import { Badge } from "../../../components/ui/badge";
+import { AgentWalking } from "../../../components/AgentWalking";
+import { StageStepper } from "../../../components/StageStepper";
+import type { Queue, VideoSummary } from "../../../types/api";
+import { PublishedOn } from "./PublishedOn";
+
+export function VideoRow({ video, queue }: { video: VideoSummary; queue: Queue | null }) {
+  const st = video.status;
+  /* the chosen thumbnail, if any; else the still */
+  const cover = mediaUrl(video, video.thumbnail ?? video.cover);
+  const link = { to: "/videos/$slug", params: { slug: video.slug } } as const;
+  const session = useSessionFor("video", video.slug);
+  const active = queue?.running.some(t => t.dir === video.dir) || session?.state === "running";
+  /* published or scheduled: the pipeline is over, the platform icons say it all */
+  const live = livePlatforms(video).length > 0 || !!activeSchedule(video);
+  const hasVideo = video.deliverables.includes("video");
+  const hasCarousel = video.deliverables.includes("carousel");
+  const warnings = [...(hasVideo ? (st?.warnings ?? []) : []), ...(video.carousel?.warnings ?? [])];
+  const [busy, setBusy] = useState(false);
+  const [archiveError, setArchiveError] = useState<string | null>(null);
+  /* the scheduler publishes with the studio closed, and a running task doesn't vanish midway: the server refuses too */
+  const blocked = video.archived
+    ? null
+    : active
+      ? "Tem tarefa ou sessão rodando agora"
+      : activeSchedule(video)
+        ? "Tem publicação agendada: cancele a agenda antes"
+        : null;
+  const toggleArchive = async () => {
+    setBusy(true);
+    setArchiveError(null);
+    const r = await send(
+      api.videos[":slug"].archive.$post({ param: { slug: enc(video.slug) }, json: { archive: !video.archived } }),
+    );
+    if (!r.ok) setArchiveError(r.error ?? "Não deu para arquivar");
+    setBusy(false);
+  };
+  const needsAttention = video.scenes_approval?.status === "pending" || video.script_approval?.status === "pending";
+  return (
+    <li
+      className={`video-row${video.archived ? " archived" : ""}${needsAttention ? " needs-attention" : ""}${active ? " active" : ""}`}
+    >
+      <Link {...link} className="vr-cover" title="Abrir o vídeo">
+        <span style={{ aspectRatio: aspectRatio(video) }}>
+          {cover ? <img src={cover} alt="" loading="lazy" /> : "Sem still"}
+        </span>
+      </Link>
+      <div className="vr-body">
+        <div className="vr-top">
+          <Link {...link} className="vr-title" title={video.slug}>
+            {video.title}
+          </Link>
+          {session && (
+            <Badge variant={SESSION_STATE[session.state].variant} title={session.now ?? ""}>
+              {SESSION_STATE[session.state].text}
+            </Badge>
+          )}
+          {hasVideo && !st ? (
+            <Badge variant="error">Status falhou</Badge>
+          ) : contentReady(video) && !live && !carouselLive(video) ? (
+            <Badge variant="ok">Pronto</Badge>
+          ) : null}
+          {session?.state === "running" && <AgentWalking className="in-corner" />}
+        </div>
+        <div className="meta">
+          {hasVideo && video.format && <span>{video.format.aspect}</span>}
+          {hasVideo && st?.total_duration != null && <span>{formatSeconds(st.total_duration)}</span>}
+          {hasCarousel && <span>Carrossel{video.carousel?.slides ? ` · ${video.carousel.slides} slides` : ""}</span>}
+          <span>{video.archived ? `Arquivado ${timeAgo(video.archived)}` : `Mexido ${timeAgo(video.updated)}`}</span>
+          <button
+            className="vr-archive"
+            onClick={toggleArchive}
+            disabled={busy || !!blocked}
+            title={
+              blocked ??
+              (video.archived ? "Voltar para a lista de trabalho" : "Tirar da lista de trabalho, sem apagar nada")
+            }
+          >
+            {video.archived ? "Desarquivar" : "Arquivar"}
+          </button>
+        </div>
+        {archiveError && <p className="response error">{archiveError}</p>}
+        <PublishedOn video={video} />
+        {hasVideo && st && !live && (
+          <div className="vr-pipeline">
+            {hasCarousel && <span className="vr-pipeline-name">{PIPELINE_NAME.video}</span>}
+            <StageStepper video={video} queue={queue} compact stages={videoStagesFor(video.narration !== false)} />
+          </div>
+        )}
+        {hasCarousel && !carouselLive(video) && (
+          <div className="vr-pipeline">
+            {hasVideo && <span className="vr-pipeline-name">{PIPELINE_NAME.carousel}</span>}
+            <StageStepper video={video} queue={queue} compact stages={PIPELINES.carousel} />
+          </div>
+        )}
+        {(!!warnings.length || video.statusError) && (
+          <div className="badges">
+            {!!warnings.length && (
+              <Badge variant="warning" title={warnings.join("\n")}>
+                {warnings.length === 1 ? warnings[0] : `${warnings.length} avisos`}
+              </Badge>
+            )}
+            {video.statusError && (
+              <Badge variant="error" title={video.statusError}>
+                {video.statusError.slice(0, 90)}
+              </Badge>
+            )}
+          </div>
+        )}
+      </div>
+    </li>
+  );
+}

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

@@ -0,0 +1,134 @@
+/* Overview: every video at once, each with the pipeline stepper (what is done, running, queued,
+   waiting for you); beside it, the agent sessions, the machine queue and the services. */
+
+import { useMemo, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { useVideos } from "../../hooks/useVideos";
+import { useQueue } from "../../hooks/useQueue";
+import { useSessions } from "../../hooks/useSessions";
+import { useMissingSetupSteps } from "../../hooks/useMissingSetupSteps";
+import { useSidePanel } from "../../hooks/useSidePanel";
+import {
+  SORT_ORDERS,
+  VIDEO_TABS,
+  WORK_TABS,
+  byCreation,
+  groupVideos,
+  type SortOrder,
+  type VideoTab,
+} from "../../lib/video-tabs";
+import { Picker } from "../../components/ui/picker";
+import { QueuePanel } from "../../components/QueuePanel";
+import { SidePanel } from "../../components/SidePanel";
+import { ArrowRight, Plus } from "../../components/icons";
+import { ServicesPanel } from "./components/ServicesPanel";
+import { SessionsPanel } from "./components/SessionsPanel";
+import { VideoListSkeleton } from "./components/VideoListSkeleton";
+import { VideoRow } from "./components/VideoRow";
+
+export function VideosPage() {
+  const { videos, error } = useVideos();
+  /* machine still missing what the first video needs: the notice leads to Getting started */
+  const missing = useMissingSetupSteps() ?? [];
+  const queue = useQueue();
+  const sessions = useSessions();
+  const groups = useMemo(() => groupVideos(videos ?? [], queue, sessions), [videos, queue, sessions]);
+  /* always opens on the first work tab with a video (processing → finished → scheduled →
+     published); a manual pick lasts until leaving the page */
+  const [picked, setPicked] = useState<VideoTab | null>(null);
+  const tab = picked ?? WORK_TABS.find(t => groups[t.id].length)?.id ?? "processing";
+  /* Scheduled and Published: by posting (the next to go up / the last live first) or by creation */
+  const [order, setOrder] = useState<SortOrder>("posted");
+  const sortable = tab === "scheduled" || tab === "published";
+  const visible = sortable && order === "created" ? byCreation(groups[tab]) : groups[tab];
+  const [panel, setPanel] = useSidePanel("omnivideo.machine-panel");
+  const running = queue?.running.length ?? 0,
+    waiting = queue?.waiting.length ?? 0;
+  return (
+    <div className={`videos-page${panel ? " with-panel" : ""}`}>
+      <section className="main">
+        <header className="header">
+          <h1>
+            <em>Seus</em> conteúdos
+          </h1>
+          {videos && <span className="subtle">{videos.length - groups.archived.length}</span>}
+          <Link to="/new" className="button large header-action">
+            <Plus className="ic" /> Criar conteúdo
+          </Link>
+        </header>
+        {missing.length > 0 && (
+          <div className="approval-notice">
+            <strong>
+              {missing.length === 1
+                ? "Falta um passo para o primeiro vídeo"
+                : `Faltam ${missing.length} passos para o primeiro vídeo`}
+            </strong>
+            <Link to="/getting-started">
+              {missing.join(", ")} <ArrowRight className="ic" />
+            </Link>
+          </div>
+        )}
+        {error && <p className="error">{error}</p>}
+        {!videos && !error && <VideoListSkeleton />}
+        {videos?.length === 0 && (
+          <p className="empty">
+            Nenhum vídeo em videos/. Comece em{" "}
+            <Link to="/new" className="link">
+              Criar vídeo
+            </Link>{" "}
+            (máquina nova:{" "}
+            <Link to="/getting-started" className="link">
+              Primeiros passos
+            </Link>
+            ), ou no chat (skill omnivideo).
+          </p>
+        )}
+        {!!videos?.length && (
+          <div className="videos-tabs">
+            <div className="segmented" role="tablist" aria-label="Situação dos vídeos">
+              {VIDEO_TABS.map(t => (
+                <button
+                  key={t.id}
+                  role="tab"
+                  aria-selected={tab === t.id}
+                  className={tab === t.id ? "active" : ""}
+                  onClick={() => setPicked(t.id)}
+                >
+                  {t.name}
+                  <span className="tab-count">{groups[t.id].length}</span>
+                </button>
+              ))}
+            </div>
+            {sortable && (
+              <Picker
+                aria-label="Ordenar por"
+                className="videos-order"
+                value={order}
+                onChange={o => setOrder(o as SortOrder)}
+                options={[...SORT_ORDERS]}
+              />
+            )}
+          </div>
+        )}
+        {!!videos?.length && !visible.length && <p className="empty">{VIDEO_TABS.find(t => t.id === tab)!.empty}</p>}
+        <ul className="videos" role="tabpanel">
+          {visible.map(v => (
+            <VideoRow key={v.slug} video={v} queue={queue} />
+          ))}
+        </ul>
+      </section>
+      <SidePanel
+        open={panel}
+        onToggle={setPanel}
+        title="Agente, fila e serviços"
+        tab={running || waiting ? `${running} rodando · ${waiting} na fila` : "Nada rodando"}
+        status={running ? "running" : ""}
+        tabLabel="As sessões do agente, a fila da máquina e os serviços"
+      >
+        <SessionsPanel />
+        <QueuePanel />
+        <ServicesPanel />
+      </SidePanel>
+    </div>
+  );
+}

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

@@ -0,0 +1,28 @@
+/* /voice ("Perfil de voz" in the menu): the same voice carousel as Configurações → Voz, straight
+   from the menu, without the settings sidebar */
+
+import { useEffect } from "react";
+import { useSettings } from "../../hooks/useSettings";
+import { SETTINGS_CATEGORIES } from "../../lib/settings-categories";
+import { VoiceCategory } from "../../components/VoiceCategory";
+import { SettingsCategorySkeleton } from "../../components/SettingsCategorySkeleton";
+
+export function VoicePage() {
+  const { settings, error, reload } = useSettings();
+  useEffect(() => {
+    document.title = "Perfil de voz · Omni";
+  }, []);
+  return (
+    <div className="page voice-page">
+      <header className="header">
+        <h1>
+          <em>Perfil</em> de voz
+        </h1>
+      </header>
+      <p className="intro">{SETTINGS_CATEGORIES[0].description}</p>
+      {error && <p className="response error">{error}</p>}
+      {!settings && !error && <SettingsCategorySkeleton />}
+      {settings && <VoiceCategory settings={settings} reload={reload} />}
+    </div>
+  );
+}

package/studio/web/router.tsx

@@ -0,0 +1,201 @@
+/* The route tree (code-based: file-based routing needs a Vite plugin and the studio bundles with
+   Bun). Each route renders its page from pages/<Page>; params go to the page as props. Video,
+   schedule and settings are layout routes whose children only carry the optional segment, so
+   switching stage, view or category keeps the page mounted. */
+
+import { createRootRoute, createRoute, createRouter, Navigate, useParams } from "@tanstack/react-router";
+import { bindOmniUi } from "./lib/omni-ui";
+import { AppShell } from "./components/AppShell";
+import { AnalyticsPage } from "./pages/AnalyticsPage";
+import { VideosPage } from "./pages/VideosPage";
+import { VideoPage } from "./pages/VideoPage";
+import { NewVideoPage } from "./pages/NewVideoPage";
+import { ReferencesPage } from "./pages/ReferencesPage";
+import { ReferencePage } from "./pages/ReferencePage";
+import { VoicePage } from "./pages/VoicePage";
+import { AdminPage } from "./pages/AdminPage";
+import { AgentPage } from "./pages/AgentPage";
+import { SettingsPage } from "./pages/SettingsPage";
+import { QueuePage } from "./pages/QueuePage";
+import { SchedulePage } from "./pages/SchedulePage";
+import { OmnichatPage, OmnichatRulePage } from "./pages/OmnichatPage";
+import { GettingStartedPage } from "./pages/GettingStartedPage";
+import { NotFoundPage } from "./pages/NotFoundPage";
+
+export const rootRoute = createRootRoute({
+  component: AppShell,
+  notFoundComponent: NotFoundPage,
+});
+
+/* --- dashboard ---------------------------------------------------------------------- */
+export const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/",
+  component: () => <AnalyticsPage />,
+});
+export const analyticsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/analytics",
+  component: () => <AnalyticsPage />,
+});
+export const reelRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/analytics/$slug",
+  component: function ReelRoute() {
+    const { slug } = reelRoute.useParams();
+    return <AnalyticsPage key={slug} slug={slug} />;
+  },
+});
+
+/* --- videos -------------------------------------------------------------------------- */
+export const videosRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/videos",
+  component: () => <VideosPage />,
+});
+/* layout: /videos/$slug and /videos/$slug/$stage render the same mounted VideoPage */
+export const videoRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/videos/$slug",
+  component: function VideoRoute() {
+    const { slug, stage } = useParams({ strict: false }) as { slug: string; stage?: string };
+    return <VideoPage key={slug} slug={slug} stageParam={stage ?? null} />;
+  },
+});
+export const videoIndexRoute = createRoute({ getParentRoute: () => videoRoute, path: "/" });
+/* `stage`: a stage id verbatim (script, motion_script, motion, narration, render, captions,
+   export, publish), a part (voice, timing) or a carousel stage (carousel-script, carousel-composition,
+   carousel-publish) */
+export const videoStageRoute = createRoute({ getParentRoute: () => videoRoute, path: "$stage" });
+export const newVideoRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/new",
+  component: () => <NewVideoPage />,
+});
+
+/* --- visual styles (references) --------------------------------------------------------- */
+export const referencesRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/styles",
+  component: () => <ReferencesPage />,
+});
+export const referenceRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/styles/$name",
+  component: function ReferenceRoute() {
+    const { name } = referenceRoute.useParams();
+    return <ReferencePage key={name} name={name} />;
+  },
+});
+
+/* --- voice and settings ----------------------------------------------------------------- */
+export const voiceRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/voice",
+  component: () => <VoicePage />,
+});
+export const agentRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/agent",
+  component: () => <AgentPage />,
+});
+export const adminRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/admin",
+  component: () => <AdminPage />,
+});
+export const settingsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/settings",
+  component: function SettingsRoute() {
+    const { category } = useParams({ strict: false }) as { category?: string };
+    return <SettingsPage category={category} />;
+  },
+});
+export const settingsIndexRoute = createRoute({ getParentRoute: () => settingsRoute, path: "/" });
+/* `category`: voice, providers, usage, agent, platforms, publishing */
+export const settingsCategoryRoute = createRoute({ getParentRoute: () => settingsRoute, path: "$category" });
+export const usageRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/usage",
+  component: () => <SettingsPage category="usage" />,
+});
+
+/* --- queue, schedule, omnichat, getting started ------------------------------------------- */
+export const queueRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/queue",
+  component: () => <QueuePage />,
+});
+export const scheduleRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/schedule",
+  component: function ScheduleRoute() {
+    const { view } = useParams({ strict: false }) as { view?: string };
+    return <SchedulePage view={view} />;
+  },
+});
+export const scheduleIndexRoute = createRoute({ getParentRoute: () => scheduleRoute, path: "/" });
+/* `view`: week | day (month is /schedule) */
+export const scheduleViewRoute = createRoute({ getParentRoute: () => scheduleRoute, path: "$view" });
+export const omnichatRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/omnichat",
+  /* ?video=<slug> / ?carousel=<slug>: the old way to open one rule, now /omnichat/<kind>/<id> */
+  validateSearch: (search: Record<string, unknown>): { video?: string; carousel?: string } => ({
+    ...(typeof search.video === "string" && search.video ? { video: search.video } : {}),
+    ...(typeof search.carousel === "string" && search.carousel ? { carousel: search.carousel } : {}),
+  }),
+  component: function OmnichatRoute() {
+    const { video, carousel } = omnichatRoute.useSearch();
+    const id = carousel ?? video;
+    if (id) return <Navigate to="/omnichat/$kind/$id" params={{ kind: carousel ? "carousel" : "video", id }} replace />;
+    return <OmnichatPage />;
+  },
+});
+/* one rule on its own screen: kind = video | carousel | post */
+export const omnichatRuleRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/omnichat/$kind/$id",
+  component: function OmnichatRuleRoute() {
+    const { kind, id } = omnichatRuleRoute.useParams();
+    if (kind !== "video" && kind !== "carousel" && kind !== "post") return <NotFoundPage />;
+    return <OmnichatRulePage kind={kind} id={id} />;
+  },
+});
+export const gettingStartedRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: "/getting-started",
+  component: () => <GettingStartedPage />,
+});
+
+export const routeTree = rootRoute.addChildren([
+  indexRoute,
+  analyticsRoute,
+  reelRoute,
+  videosRoute,
+  videoRoute.addChildren([videoIndexRoute, videoStageRoute]),
+  newVideoRoute,
+  referencesRoute,
+  referenceRoute,
+  voiceRoute,
+  agentRoute,
+  adminRoute,
+  settingsRoute.addChildren([settingsIndexRoute, settingsCategoryRoute]),
+  usageRoute,
+  queueRoute,
+  scheduleRoute.addChildren([scheduleIndexRoute, scheduleViewRoute]),
+  omnichatRoute,
+  omnichatRuleRoute,
+  gettingStartedRoute,
+]);
+
+export const router = createRouter({ routeTree, defaultPreload: false, scrollRestoration: false });
+/* Omni's UI tools navigate with it (lib/omni-ui.ts) */
+bindOmniUi(router);
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: typeof router;
+  }
+}

package/studio/web/styles/base/elements.css

@@ -0,0 +1,55 @@
+/* Reset and element defaults: box sizing, body, links, buttons, code, headings. */
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  background: var(--bg);
+  color: var(--text);
+  font: 14px / 1.5 var(--sans);
+  -webkit-font-smoothing: antialiased;
+  font-variant-numeric: tabular-nums;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+button {
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+code,
+.mono {
+  font-family: var(--mono);
+  font-size: 0.92em;
+}
+code {
+  background: var(--surface-2);
+  padding: 0.05em 0.35em;
+  border-radius: 4px;
+}
+h1,
+h2,
+h3,
+h4 {
+  margin: 0;
+  font-weight: 500;
+}
+h1 {
+  font: 500 24px / 30px var(--sans);
+  letter-spacing: -0.01em;
+}
+h2 {
+  font: 550 16px / 24px var(--sans);
+}
+h3 {
+  font: 500 12px / 16px var(--sans);
+  color: var(--text-2);
+}
+h3 .subtle {
+  font-weight: 400;
+}

package/studio/web/styles/base/utilities.css

@@ -0,0 +1,25 @@
+/* Text helpers used everywhere: .subtle, .empty, .error, .warning, .note, .hint. */
+
+.subtle {
+  color: var(--text-3);
+}
+.empty {
+  color: var(--text-3);
+  margin: 0;
+}
+.error {
+  color: var(--error);
+}
+.warning {
+  color: var(--warning);
+}
+.note {
+  color: var(--text-2);
+  font-size: 13px;
+  margin: 0;
+}
+.hint {
+  color: var(--text-3);
+  font-size: 12px;
+  margin: 0;
+}

package/studio/web/styles/components/badge.css

@@ -0,0 +1,33 @@
+/* Badges (.badge, ui/badge.tsx) and their states. */
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 500;
+  background: var(--surface-3);
+  color: var(--text-2);
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.badge.ok {
+  background: var(--ok-bg);
+  color: var(--ok);
+}
+.badge.warning {
+  background: var(--warning-bg);
+  color: var(--warning);
+}
+.badge.error {
+  background: var(--error-bg);
+  color: var(--error);
+}
+.badge.running {
+  background: var(--running-bg);
+  color: var(--running);
+}

package/studio/web/styles/components/claude-running.css

@@ -0,0 +1,27 @@
+/* SessionPanel.tsx running state; provider logo before a name (.with-logo). */
+
+/* Claude's working window: orange (background, outline, what it is doing now and the badge) */
+.claude.running {
+  background: var(--claude-bg);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--claude) 55%, transparent);
+}
+.claude.running .claude-now {
+  color: var(--claude);
+}
+.claude.running .badge.running {
+  background: var(--claude-bg);
+  color: var(--claude);
+}
+.claude.running .badge.running .pulse {
+  background: var(--claude);
+}
+
+/* the provider logo before the name (video voice picker, voice of each line) */
+.with-logo {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.with-logo .provider-logo {
+  flex: none;
+}