@crievo/omni 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,174 @@
+/* Getting started: the docs/onboarding.md guide, one step per section, each with what the machine
+   already has (tools/setup.mjs check) and the shortcut to the screen where it gets solved. The text
+   is the guide's: changed there, changes here. Opens on the first missing step. */
+
+import { useEffect, useState, type ReactNode } from "react";
+import { Link } from "@tanstack/react-router";
+import { useOnboarding } from "../../hooks/useOnboarding";
+import { Badge } from "../../components/ui/badge";
+import { Skeleton } from "../../components/ui/skeleton";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../components/ui/accordion";
+import { Markdown } from "../../components/Markdown";
+import { ArrowClockwise, Check, Gear, Microphone, Plug, Plus, Sparkle, Stack, X } from "../../components/icons";
+import type { OnboardingCheck, OnboardingStep } from "../../types/api";
+
+/* where each step gets solved in the studio */
+const STEP_ACTIONS: Record<string, ReactNode> = {
+  claude: (
+    <Link to="/settings/$category" params={{ category: "agent" }} className="button">
+      <Sparkle className="ic" /> Configurações → Agente de IA
+    </Link>
+  ),
+  voice: (
+    <>
+      <Link to="/settings/$category" params={{ category: "providers" }} className="button">
+        <Gear className="ic" /> Provedores de voz
+      </Link>
+      <Link to="/settings/$category" params={{ category: "voice" }} className="button">
+        <Microphone className="ic" /> Clonar a minha voz
+      </Link>
+    </>
+  ),
+  reference: (
+    <Link to="/styles" className="button">
+      <Stack className="ic" /> Abrir Estilos visuais
+    </Link>
+  ),
+  "first-video": (
+    <Link to="/new" className="button primary">
+      <Plus className="ic" /> Criar vídeo
+    </Link>
+  ),
+  publish: (
+    <Link to="/settings/$category" params={{ category: "platforms" }} className="button">
+      <Plug className="ic" /> Conectar as plataformas
+    </Link>
+  ),
+};
+
+const STEP_MARK: Record<OnboardingCheck["state"], ReactNode> = {
+  ok: <Check weight="bold" />,
+  missing: <X weight="bold" />,
+  warning: "!",
+};
+
+function stepBadge(s: OnboardingStep) {
+  if (s.state === "ok") return <Badge variant="ok">Pronto</Badge>;
+  if (s.state === "missing") return <Badge variant="error">Falta</Badge>;
+  if (s.state === "warning") return <Badge variant="warning">{s.optional ? "Opcional" : "Atenção"}</Badge>;
+  return null;
+}
+
+/* the screenshot of this very screen, which opens the guide, is not repeated inside it */
+const withoutImages = (md: string) => md.replace(/!\[[^\]]*\]\([^)]*\)\n?/g, "");
+
+export function GettingStartedPage() {
+  const { onboarding: d, error: loadError, checking, reload } = useOnboarding();
+  const [open, setOpen] = useState<string>("");
+  /* opens on the first missing step; checking again doesn't close what you opened */
+  useEffect(() => {
+    if (d) setOpen(o => o || (d.steps.find(s => s.state === "missing")?.id ?? ""));
+  }, [d]);
+  const error = loadError ?? d?.error ?? null;
+
+  const required = d?.steps.filter(s => !s.optional) ?? [];
+  const ready = required.filter(s => s.state === "ok" || s.state === "warning").length;
+  const pct = required.length ? Math.round((ready / required.length) * 100) : 0;
+
+  return (
+    <div className="page onboarding">
+      <header className="header">
+        <h1>
+          <em>Primeiros</em> passos
+        </h1>
+        {d && (
+          <span className="subtle">
+            {ready} de {required.length} prontos
+          </span>
+        )}
+        <span className="push-end" />
+        <button className="button" onClick={() => reload(true)} disabled={checking}>
+          <ArrowClockwise className="ic" /> {checking ? "Conferindo…" : "Conferir de novo"}
+        </button>
+      </header>
+      {d && (
+        <div
+          className="onboarding-progress"
+          role="progressbar"
+          aria-valuenow={pct}
+          aria-valuemin={0}
+          aria-valuemax={100}
+        >
+          <i style={{ width: `${pct}%` }} />
+        </div>
+      )}
+      {error && <p className="response error">{error}</p>}
+      {!d && !error && (
+        <div
+          aria-busy="true"
+          aria-label="Conferindo a máquina"
+          style={{ display: "flex", flexDirection: "column", gap: 10 }}
+        >
+          <Skeleton className="row" style={{ width: "70%" }} />
+          <Skeleton className="row" style={{ width: "55%" }} />
+          {Array.from({ length: 8 }, (_, i) => (
+            <Skeleton key={i} style={{ height: 48, width: "100%", marginTop: i ? 0 : 6 }} />
+          ))}
+        </div>
+      )}
+      {d && (
+        <>
+          <Markdown text={withoutImages(d.intro)} />
+          {d.ready && (
+            <div className="onboarding-ready">
+              <Check weight="bold" className="ic" />
+              <span>
+                <b>Tudo pronto para o primeiro vídeo.</b> Publicar nas redes fica para depois, no passo 8.
+              </span>
+              <Link to="/new" className="button primary">
+                <Plus className="ic" /> Criar vídeo
+              </Link>
+            </div>
+          )}
+          {!d.checked && (
+            <p className="warning">
+              Não deu para conferir a máquina (tools/setup.mjs check). Os passos abaixo valem do mesmo jeito.
+            </p>
+          )}
+          <Accordion type="single" collapsible value={open} onValueChange={setOpen} className="onboarding-steps">
+            {d.steps.map((s, i) => (
+              <AccordionItem key={s.id} value={s.id} className={`onboarding-step ${s.state ?? ""}`}>
+                <AccordionTrigger>
+                  <span className={`onboarding-mark ${s.state ?? ""}`}>
+                    {s.state === "ok" ? <Check weight="bold" /> : i + 1}
+                  </span>
+                  <span className="onboarding-title">{s.title.replace(/^\d+\.\s*/, "")}</span>
+                  {stepBadge(s)}
+                </AccordionTrigger>
+                <AccordionContent>
+                  {s.items.length > 0 && (
+                    <ul className="onboarding-items">
+                      {s.items.map(it => (
+                        <li key={it.id} className={it.state}>
+                          <span className="onboarding-item-mark">{STEP_MARK[it.state]}</span>
+                          <b>{it.title}</b>
+                          <span className="subtle">{it.detail}</span>
+                        </li>
+                      ))}
+                    </ul>
+                  )}
+                  {STEP_ACTIONS[s.id] && <div className="actions onboarding-actions">{STEP_ACTIONS[s.id]}</div>}
+                  <Markdown text={s.markdown} />
+                </AccordionContent>
+              </AccordionItem>
+            ))}
+          </Accordion>
+          <p className="hint">
+            Este guia é o <code>docs/onboarding.md</code> do repositório. No terminal,{" "}
+            <code>node tools/setup.mjs check</code> faz a mesma conferência.
+          </p>
+        </>
+      )}
+    </div>
+  );
+}

package/studio/web/pages/NewVideoPage/components/DeliverablesPicker.tsx

@@ -0,0 +1,62 @@
+import { Check } from "../../../components/icons";
+import type { Deliverable } from "../../../types/api";
+
+/* What the content delivers, on the same card as the format: both can be checked */
+const DELIVERABLES: { id: Deliverable; name: string; use: string; frames: [number, number][] }[] = [
+  { id: "video", name: "Vídeo", use: "Reels, Shorts, TikTok, YouTube", frames: [[36, 64]] },
+  {
+    id: "carousel",
+    name: "Carrossel",
+    use: "Post de slides no Instagram",
+    frames: [
+      [22, 28],
+      [22, 28],
+      [22, 28],
+    ],
+  },
+];
+
+export function DeliverablesPicker({
+  value,
+  onChange,
+}: {
+  value: Deliverable[];
+  onChange: (v: Deliverable[]) => void;
+}) {
+  const toggle = (id: Deliverable) => {
+    const next = value.includes(id) ? value.filter(e => e !== id) : [...value, id];
+    if (next.length) onChange(DELIVERABLES.map(e => e.id).filter(e => next.includes(e)));
+  };
+  return (
+    <div className="field format-picker deliverables-picker">
+      <span>
+        O que criar <em>Marque os dois para fazer o vídeo e, depois, o carrossel dele</em>
+      </span>
+      <div className="profiles-strip" role="group" aria-label="O que criar">
+        {DELIVERABLES.map(e => (
+          <button
+            key={e.id}
+            type="button"
+            className={`voice-profile${value.includes(e.id) ? " chosen" : ""}`}
+            onClick={() => toggle(e.id)}
+            aria-pressed={value.includes(e.id)}
+            title={e.use}
+          >
+            <span className="format-tile">
+              {e.frames.map(([w, h], i) => (
+                <i key={i} style={{ width: w, height: h }} />
+              ))}
+            </span>
+            <b>{e.name}</b>
+            <small>{e.use}</small>
+            {value.includes(e.id) && (
+              <span className="choice-mark">
+                <Check weight="bold" />
+              </span>
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

package/studio/web/pages/NewVideoPage/components/FormatPicker.tsx

@@ -0,0 +1,33 @@
+/* The two formats, on the same card as the voice: the frame shape and the resolution */
+export const FORMATS = [
+  { id: "9:16", name: "Vertical", size: "1080×1920", use: "Reels, shorts", w: 36, h: 64 },
+  { id: "16:9", name: "Horizontal", size: "1920×1080", use: "YouTube", w: 64, h: 36 },
+];
+
+export function FormatPicker({ value, onChange }: { value: string; onChange: (id: string) => void }) {
+  return (
+    <div className="field format-picker">
+      <span>Formato</span>
+      <div className="profiles-strip" role="radiogroup" aria-label="Formato">
+        {FORMATS.map(f => (
+          <button
+            key={f.id}
+            type="button"
+            className={`voice-profile${value === f.id ? " chosen" : ""}`}
+            onClick={() => onChange(f.id)}
+            aria-pressed={value === f.id}
+            title={`${f.id} · ${f.use}`}
+          >
+            <span className="format-tile">
+              <i style={{ width: f.w, height: f.h }} />
+            </span>
+            <b>{f.name}</b>
+            <small>
+              {f.id} · {f.size}
+            </small>
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,133 @@
+/* New content from the UI: the request becomes videos/<slug>/source/request.md and an agent
+   session with the omnivideo skill. Video goes up to the export (it stops only for the script and
+   scene approvals); carousel goes up to the export; both, the video first and its carousel after. */
+
+import { useState } from "react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { api, send } from "../../lib/api";
+import { useReferences } from "../../hooks/useReferences";
+import { useVoiceProfiles } from "../../hooks/useVoiceProfiles";
+import { Skeleton } from "../../components/ui/skeleton";
+import { ReferencePicker } from "../../components/ReferencePicker";
+import { VoiceProfilePicker } from "../../components/VoiceProfilePicker";
+import { ArrowLeft, Sparkle, X } from "../../components/icons";
+import { FormatPicker } from "./components/FormatPicker";
+import { DeliverablesPicker } from "./components/DeliverablesPicker";
+import type { Deliverable } from "../../types/api";
+
+export function NewVideoPage() {
+  const navigate = useNavigate();
+  const { references } = useReferences();
+  const [request, setRequest] = useState("");
+  const [format, setFormat] = useState("9:16");
+  const [deliverables, setDeliverables] = useState<Deliverable[]>(["video"]);
+  const hasVideo = deliverables.includes("video");
+  const [reference, setReference] = useState("");
+  const { profiles, defaultId, reload: reloadProfiles } = useVoiceProfiles();
+  const [voiceProfile, setVoiceProfile] = useState("");
+  /* "Sem narração e voz": the video skips the spoken script, the narration and the voice */
+  const [silent, setSilent] = useState(false);
+  /* the default comes checked; a profile that no longer exists falls back to it */
+  const currentProfile = profiles?.some(p => p.id === voiceProfile)
+    ? voiceProfile
+    : (profiles?.find(p => p.id === defaultId)?.id ?? profiles?.[0]?.id ?? "");
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const create = async () => {
+    setSending(true);
+    setError(null);
+    const r = await send(
+      api.videos.$post({
+        json: {
+          request,
+          deliverables,
+          reference,
+          ...(hasVideo ? { format, narration: !silent, ...(silent ? {} : { voice_profile: currentProfile }) } : {}),
+        },
+      }),
+    );
+    setSending(false);
+    if (r.ok && r.slug) navigate({ to: "/videos/$slug", params: { slug: r.slug } });
+    else setError(r.error ?? "Não deu para criar");
+  };
+
+  return (
+    <div className="page new">
+      <Link to="/videos" className="back">
+        <ArrowLeft className="ic" /> Conteúdos
+      </Link>
+      <header className="header">
+        <h1>
+          <em>Comece um</em> conteúdo novo
+        </h1>
+      </header>
+      <p className="intro">
+        {hasVideo ? (
+          <>
+            O agente de IA escreve o roteiro e o motion, você aprova o roteiro e as cenas, e o resto (composição, voz,
+            render, legenda e montagem) roda sozinho até o MP4 exportado.
+            {deliverables.includes("carousel") &&
+              " Com o vídeo pronto, ele faz o carrossel do Instagram a partir dele."}
+          </>
+        ) : (
+          "O agente de IA escreve o roteiro do carrossel e compõe cada slide em código, no estilo visual escolhido. Você revisa os slides e publica no Instagram."
+        )}
+      </p>
+
+      <div className="form">
+        <label className="field">
+          <span>Pedido, roteiro pronto, documentação, link, briefing</span>
+          <textarea
+            value={request}
+            onChange={e => setRequest(e.target.value)}
+            rows={10}
+            placeholder={
+              "Roteiro pronto, tema, material colado ou link.\nEx.: “Vídeo curto explicando por que o roteador de decisões evita chamar o modelo grande em toda pergunta. Material: https://…”"
+            }
+            autoFocus
+          />
+          <small>
+            Arquivo nesta máquina (PDF, transcrição, vídeo de estilo) entra pelo caminho: o agente lê de lá.
+          </small>
+        </label>
+
+        <div className="fields-row pickers">
+          <DeliverablesPicker value={deliverables} onChange={setDeliverables} />
+        </div>
+
+        {/* a carousel has no voice nor video format (the slide is 4:5) */}
+        {hasVideo && (
+          <div className="fields-row pickers">
+            <FormatPicker value={format} onChange={setFormat} />
+            {!profiles && <Skeleton aria-busy="true" style={{ height: 36, width: 220 }} />}
+            {profiles && profiles.length > 0 && (
+              <VoiceProfilePicker
+                profiles={profiles}
+                defaultId={defaultId}
+                value={currentProfile}
+                onChange={setVoiceProfile}
+                onDefaultChange={reloadProfiles}
+                silent={silent}
+                onSilentChange={setSilent}
+              />
+            )}
+          </div>
+        )}
+
+        <ReferencePicker references={references} value={reference} onChange={setReference} />
+
+        {error && <p className="response error">{error}</p>}
+
+        <div className="floating-bar">
+          <button type="button" className="button" onClick={() => navigate({ to: "/videos" })}>
+            <X className="ic" /> Cancelar
+          </button>
+          <button className="button primary" disabled={sending || !request.trim()} onClick={create}>
+            <Sparkle className="ic" /> {sending ? "Criando…" : "Criar e começar"}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,9 @@
+/* Root not-found route: a path that matches no page. */
+
+import { useLocation } from "@tanstack/react-router";
+import { NotFound } from "../../components/NotFound";
+
+export function NotFoundPage() {
+  const pathname = useLocation({ select: l => l.pathname });
+  return <NotFound path={pathname} />;
+}

package/studio/web/pages/OmnichatPage/components/NewFromLink.tsx

@@ -0,0 +1,59 @@
+/* A rule for a post already live (Reel, carousel or photo), from its link: POST /api/omnichat/post
+   finds it among the account's posts (video or carousel dir when it came from omnivideo, else
+   .omnichat/posts/). */
+
+import { useState, type FormEvent } from "react";
+import { Plus } from "../../../components/icons";
+import { api, send, type ActionResult } from "../../../lib/api";
+import { capitalize } from "../../../lib/format";
+import type { OmnichatRuleSummary } from "../../../types/api";
+
+export function NewFromLink({ onCreate }: { onCreate: (type: OmnichatRuleSummary["type"], id: string) => void }) {
+  const [link, setLink] = useState("");
+  const [creating, setCreating] = useState(false);
+  const [result, setResult] = useState<ActionResult>(null);
+  const create = async (e: FormEvent) => {
+    e.preventDefault();
+    if (!link.trim()) return;
+    setCreating(true);
+    setResult(null);
+    const r = await send(api.omnichat.post.$post({ json: { link: link.trim() } }));
+    setCreating(false);
+    if (r.ok && r.type && r.id) {
+      setLink("");
+      setResult({ ok: true, output: `${r.output}\nRegra criada, desligada: preencha abaixo e ligue quando quiser.` });
+      onCreate(r.type, r.id);
+    } else setResult(r);
+  };
+  return (
+    <form className="panel auto-rule-new" onSubmit={create}>
+      <label className="field">
+        <span>
+          Post que já está no ar <em>Reel, carrossel ou foto da conta, de fora do omnivideo ou não</em>
+        </span>
+        <div className="setting-row">
+          <input
+            value={link}
+            disabled={creating}
+            placeholder="https://www.instagram.com/p/…/ ou https://www.instagram.com/reel/…/"
+            spellCheck={false}
+            onChange={e => setLink(e.target.value)}
+          />
+          <button className="button primary" type="submit" disabled={creating || !link.trim()}>
+            <Plus className="ic" /> {creating ? "Procurando o post…" : "Criar regra"}
+          </button>
+        </div>
+        <small>
+          Cole o link do post (o de carrossel e foto é <code>/p/…</code>, o de Reel, <code>/reel/…</code>). Ele é achado
+          entre os posts da conta. Se saiu do omnivideo, a regra vai para a pasta do vídeo ou do carrossel; senão, para{" "}
+          <code>.omnichat/posts/</code>.
+        </small>
+      </label>
+      {result && (
+        <p className={`response ${result.ok ? "ok" : "error"}`}>
+          {capitalize(result.ok ? (result.output ?? "") : (result.error ?? ""))}
+        </p>
+      )}
+    </form>
+  );
+}

package/studio/web/pages/OmnichatPage/components/RuleListItem.tsx

@@ -0,0 +1,64 @@
+/* One rule of the /omnichat list: a card with the cover, trigger and totals; it links to the rule's own
+   screen (/omnichat/<kind>/<id>). */
+
+import { Link } from "@tanstack/react-router";
+import { ArrowRight } from "../../../components/icons";
+import { Badge } from "../../../components/ui/badge";
+import { timeAgo } from "../../../lib/format";
+import type { OmnichatRuleSummary } from "../../../types/api";
+import { RulePreview, type RulePreviewData } from "./RulePreview";
+
+export const ruleKey = (r: { type: string; id: string }) => `${r.type}:${r.id}`;
+
+export function RuleListItem({
+  rule: r,
+  title,
+  preview,
+}: {
+  rule: OmnichatRuleSummary;
+  title: string;
+  preview: RulePreviewData | null;
+}) {
+  const t = r.totals;
+  return (
+    <section className="panel collapsible">
+      <h2 className="panel-top">
+        <Link
+          to="/omnichat/$kind/$id"
+          params={{ kind: r.type, id: r.id }}
+          className="panel-toggle rule-card-link"
+          title="Abrir a regra"
+        >
+          <RulePreview preview={preview} />
+          <span className="panel-name auto-rule-name">
+            <b>{title}</b>
+            <small>
+              {r.keywords === null
+                ? "Qualquer comentário"
+                : r.keywords.length
+                  ? r.keywords.join(", ")
+                  : "Sem palavra-chave"}
+              {t ? ` · ${t.dms} ${t.dms === 1 ? "DM" : "DMs"}${t.queued ? ` · ${t.queued} na fila` : ""}` : ""}
+              {r.checked_at ? ` · conferido ${timeAgo(r.checked_at)}` : ""}
+            </small>
+          </span>
+          <span className="right-panel">
+            {!!t?.failures && (
+              <Badge variant="error">
+                {t.failures} {t.failures === 1 ? "falha" : "falhas"}
+              </Badge>
+            )}
+            {r.warning && (
+              <Badge variant="warning" title={r.warning}>
+                Aviso
+              </Badge>
+            )}
+            {!r.published && <Badge title="O post ainda não foi publicado">Não publicado</Badge>}
+            {r.enabled ? <Badge variant="ok">Ligada</Badge> : <Badge>Desligada</Badge>}
+            <ArrowRight className="ic" weight="bold" />
+          </span>
+        </Link>
+      </h2>
+    </section>
+  );
+}

package/studio/web/pages/OmnichatPage/components/RulePreview.tsx

@@ -0,0 +1,14 @@
+/* The video preview that identifies a rule in the list: the chosen thumbnail or the still
+   (as in the video list); a camera icon for outside posts and videos without one. */
+
+import { VideoCamera } from "../../../components/icons";
+
+export type RulePreviewData = { src: string | null; aspect: string };
+
+export function RulePreview({ preview }: { preview: RulePreviewData | null }) {
+  return (
+    <span className="auto-rule-cover" style={{ aspectRatio: preview?.aspect ?? "9 / 16" }} aria-hidden="true">
+      {preview?.src ? <img src={preview.src} alt="" loading="lazy" /> : <VideoCamera className="ic" />}
+    </span>
+  );
+}

package/studio/web/pages/OmnichatPage/components/RuleView.tsx

@@ -0,0 +1,88 @@
+/* /omnichat/<video|carousel|post>/<id>: one rule on its own screen (a video's, its carousel's or an outside
+   post's), with a top bar to go back to the list. A video's rule has two columns: the video on the left, the
+   rule (config already open) on the right; a carousel's or a post's has just the rule. */
+
+import { Link } from "@tanstack/react-router";
+import { ArrowLeft } from "../../../components/icons";
+import { OmnichatAccountStatus } from "../../../components/OmnichatAccountStatus";
+import { OmnichatRulePanel } from "../../../components/OmnichatRulePanel";
+import type { RuleTarget } from "../../../components/RuleForm";
+import { Skeleton } from "../../../components/ui/skeleton";
+import { useVideo } from "../../../hooks/useVideos";
+import { currentExport } from "../../../lib/export";
+import { mediaUrl } from "../../../lib/media";
+import { VideoPlayer } from "../../VideoPage/components/VideoPlayer";
+import type { OmnichatState } from "../../../types/api";
+
+export type RuleKind = "video" | "carousel" | "post";
+
+export function RuleView({
+  kind,
+  id,
+  title,
+  videosLoaded,
+  state,
+  error,
+}: {
+  kind: RuleKind;
+  id: string;
+  /* the content's title (a video or carousel); undefined while loading or when there is none */
+  title: string | undefined;
+  videosLoaded: boolean;
+  state: OmnichatState | null;
+  error: string | null;
+}) {
+  const target: RuleTarget = kind === "post" ? { code: id } : { slug: id, carousel: kind === "carousel" };
+  const enabled = !!state?.rules?.some(r => r.type === kind && r.id === id && r.enabled);
+  const missing = kind !== "post" && videosLoaded && !title;
+  /* the left column: the exported video (only a video's rule; the detail is not asked for the others) */
+  const { video } = useVideo(kind === "video" ? id : null);
+  const exported = video && currentExport(video);
+  const vertical = !video?.format || video.format.h > video.format.w;
+  return (
+    <div className="page omnichat-page">
+      <nav className="rule-topbar" aria-label="Voltar">
+        <Link to="/omnichat" className="back">
+          <ArrowLeft className="ic" /> Voltar
+        </Link>
+      </nav>
+      <header className="header">
+        <h1>
+          {kind === "post"
+            ? `Post ${id}`
+            : (title ??
+              (videosLoaded ? id : <Skeleton className="row" style={{ display: "inline-block", width: 240 }} />))}
+          {kind === "carousel" && <span className="subtle"> · carrossel</span>}
+          {kind === "post" && <span className="subtle"> · post de fora</span>}
+        </h1>
+        {kind !== "post" && title && (
+          <Link
+            to="/videos/$slug/$stage"
+            params={{ slug: id, stage: kind === "carousel" ? "carousel-publish" : "publish" }}
+            className="button small header-action"
+          >
+            {kind === "carousel" ? "Abrir o carrossel" : "Abrir o vídeo"}
+          </Link>
+        )}
+      </header>
+      {missing ? (
+        <p className="empty">Nenhum vídeo chamado “{id}”.</p>
+      ) : (
+        <>
+          {error && <p className="response error">{error}</p>}
+          <OmnichatAccountStatus state={state} enabled={enabled} />
+          <div className={`rule-layout${exported ? ` has-player ${vertical ? "vertical" : "horizontal"}` : ""}`}>
+            {video && exported && (
+              <div className="rule-player">
+                <VideoPlayer video={video} src={mediaUrl(video, exported)!} />
+              </div>
+            )}
+            <section className="panel rule-column">
+              <OmnichatRulePanel target={target} state={state} defaultOpen />
+            </section>
+          </div>
+        </>
+      )}
+    </div>
+  );
+}