@crievo/omni 0.1.6 → 0.1.8

package/studio/web/hooks/useComputers.ts

@@ -0,0 +1,55 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { invalidate, queryKeys } from "../lib/query-client";
+import type { AuditEntry, Computer } from "../types/api";
+
+/* Configurações → Agente de IA, in the hosted studio: the computers signed in to the account and the actions
+   that went through to them. The Worker answers both itself (cloud/studio/src/account-routes.mjs), so they
+   work even while the studio isn't connected. Not there at 127.0.0.1: `enabled` is the hosted flag. */
+
+async function getJson<T>(path: string): Promise<T> {
+  const r = await fetch(path, { headers: { accept: "application/json" } });
+  if (!r.ok) throw new Error(`${r.status}`);
+  return (await r.json()) as T;
+}
+
+export function useComputers(enabled: boolean) {
+  const q = useQuery({
+    queryKey: queryKeys.computers,
+    queryFn: () => getJson<{ email: string; computers: Computer[] }>("/session/computers"),
+    enabled,
+    /* "conectado agora" moves: look again while the screen is open */
+    refetchInterval: enabled ? 10_000 : false,
+  });
+  const revoke = useMutation({
+    mutationFn: async (id: string) => {
+      const r = await fetch("/session/computers/revoke", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ id }),
+      });
+      if (!r.ok)
+        throw new Error(((await r.json().catch(() => null)) as { error?: string } | null)?.error ?? `${r.status}`);
+    },
+    onSuccess: () => invalidate(queryKeys.computers),
+  });
+  return {
+    email: q.data?.email ?? null,
+    computers: q.data?.computers ?? null,
+    error: q.error ? "Não consegui carregar os computadores." : null,
+    revoke,
+  };
+}
+
+export function useAudit(enabled: boolean) {
+  const q = useQuery({
+    queryKey: queryKeys.audit,
+    queryFn: () => getJson<{ entries: AuditEntry[] }>("/session/audit"),
+    enabled,
+  });
+  return {
+    entries: q.data?.entries ?? null,
+    error: q.error ? "Não consegui carregar as ações." : null,
+    reload: () => void q.refetch(),
+    loading: q.isFetching,
+  };
+}

package/studio/web/hooks/useCost.ts

@@ -0,0 +1,11 @@
+import { api } from "../lib/api";
+import { queryKeys } from "../lib/query-client";
+import { useLiveQuery } from "./useLiveQuery";
+
+/* GET /api/cost: what the agents spent in the last `days` days (null = everything) */
+export function useCost(days: number | null) {
+  const { data, error, reload } = useLiveQuery(queryKeys.cost(days), () =>
+    api.cost.$get({ query: days ? { days: String(days) } : {} }),
+  );
+  return { cost: data, error, reload };
+}

package/studio/web/hooks/useMe.ts

@@ -0,0 +1,32 @@
+import { useQuery } from "@tanstack/react-query";
+import { queryKeys } from "../lib/query-client";
+import type { Me } from "../types/api";
+import { useRunner } from "./useRunner";
+
+/* Who is using the studio, for the menu's user card. Hosted: the Worker's session (/session/me), which answers
+   even while the computer is away. At 127.0.0.1: the studio's own /api/me (the Omni login of this computer, else
+   the Claude Code account). Nobody known, or the lookup failing, is no card: the menu is never blocked on it. */
+async function read(hosted: boolean): Promise<Me | null> {
+  if (hosted) {
+    const r = await fetch("/session/me", { headers: { accept: "application/json" } });
+    if (!r.ok) return null;
+    const m = (await r.json()) as { email?: string; name?: string | null; image?: string | null };
+    return m.email ? { email: m.email, name: m.name ?? null, image: m.image ?? null, source: "session" } : null;
+  }
+  const r = await fetch("/api/me", { headers: { accept: "application/json" } });
+  if (!r.ok) return null;
+  return ((await r.json()) as { me: Me | null }).me;
+}
+
+export function useMe() {
+  const { hosted, online } = useRunner();
+  /* wait for the first answer about where this page is: asking the wrong side first would just fail */
+  const known = online !== null;
+  const q = useQuery({
+    queryKey: [...queryKeys.me, hosted],
+    queryFn: () => read(hosted),
+    enabled: known,
+    staleTime: 5 * 60_000,
+  });
+  return q.data ?? null;
+}

package/studio/web/hooks/useSetupProgress.ts

@@ -0,0 +1,54 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { invalidate, queryKeys } from "../lib/query-client";
+import { isListening, pendingStep } from "../lib/setup-retry";
+import type { SetupRecord, SetupRetryRequest } from "../types/api";
+
+/* While the studio isn't connected, the CLI reports the first-time setup to the user's cloud (the page can't ask
+   the computer): `setup` in the cloud config. Asked every 3 s, only while a screen needs it. The page asks for a
+   retry the same way, the other direction: `setup_retry`, which the process that ran the setup reads. */
+const POLL_MS = 3_000;
+
+type Config = { setup?: SetupRecord; setup_retry?: SetupRetryRequest };
+
+async function readConfig(): Promise<{ setup: SetupRecord | null; retry: SetupRetryRequest | null }> {
+  const r = await fetch("/api/cloud/config", { headers: { accept: "application/json" } });
+  if (!r.ok) throw new Error(`${r.status}`);
+  const c = ((await r.json()) as { config?: Config }).config ?? {};
+  const s = c.setup;
+  const q = c.setup_retry;
+  return {
+    setup: s && Array.isArray(s.steps) ? s : null,
+    retry: q && typeof q.id === "string" ? q : null,
+  };
+}
+
+export function useSetupProgress(enabled: boolean) {
+  const q = useQuery({
+    queryKey: queryKeys.setupProgress,
+    queryFn: readConfig,
+    enabled,
+    refetchInterval: enabled ? POLL_MS : false,
+  });
+  return { setup: q.data?.setup ?? null, retryRequest: q.data?.retry ?? null, loaded: q.isFetched || q.isError };
+}
+
+/** "Tentar de novo": writes the request the computer is waiting for, and says whether anyone is there to hear it */
+export function useSetupRetry(setup: SetupRecord | null, request: SetupRetryRequest | null) {
+  const ask = useMutation({
+    mutationFn: async (step: string) => {
+      const r = await fetch("/api/cloud/config", {
+        method: "PUT",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ setup_retry: { id: crypto.randomUUID(), step, at: Date.now() } }),
+      });
+      if (!r.ok) throw new Error(`${r.status}`);
+    },
+    onSuccess: () => invalidate(queryKeys.setupProgress),
+  });
+  return {
+    listening: isListening(setup),
+    pending: pendingStep(setup, request) ?? (ask.isPending ? ask.variables : null),
+    onRetry: (step: string) => ask.mutate(step),
+    failed: ask.isError,
+  };
+}

package/studio/web/lib/me.ts

@@ -0,0 +1,17 @@
+/* A name to show for who is using the studio: the account's own, else what comes before the @ of the email. */
+export const displayNameOf = (me: { name: string | null; email: string }) =>
+  me.name?.trim() || me.email.split("@")[0] || me.email;
+
+/* Two letters for an avatar without a picture: the first letter of the first and of the last word of the name
+   ("Pedro Felipe" → "PF"); one word gives its first two letters ("Pedro" → "PE"); no name, the start of the email. */
+export function initialsOf(me: { name: string | null; email: string }) {
+  const words = (me.name ?? "").trim().split(/\s+/).filter(Boolean);
+  const letters = (w: string) =>
+    [...w.normalize("NFD").replace(/[\u0300-\u036f]/g, "")].filter(c => /\p{L}|\p{N}/u.test(c));
+  const pair =
+    words.length >= 2
+      ? [letters(words[0])[0], letters(words[words.length - 1])[0]]
+      : letters(words[0] ?? me.email.split("@")[0] ?? "").slice(0, 2);
+  const out = pair.filter(Boolean).join("").toUpperCase();
+  return out || "?";
+}

package/studio/web/lib/query-client.ts

@@ -36,6 +36,7 @@ export const queryKeys = {
   reel: (slug: string) => ["reel", slug] as const,
   settings: ["settings"] as const,
   usage: ["usage"] as const,
+  cost: (days: number | null) => ["cost", days ?? "all"] as const,
   accounts: ["accounts"] as const,
   schedule: ["schedule"] as const,
   onboarding: ["onboarding"] as const,
@@ -43,6 +44,11 @@ export const queryKeys = {
   admin: ["admin"] as const,
   agentConversations: ["agent-conversations"] as const,
   runner: ["runner"] as const,
+  me: ["me"] as const,
+  /* the setup the CLI reports to the user's cloud, and the Worker's lists of computers and actions */
+  setupProgress: ["setup-progress"] as const,
+  computers: ["computers"] as const,
+  audit: ["audit"] as const,
 };
 
 /* the omnichat rule API of a video, of a content's carousel or of an outside post */

package/studio/web/lib/settings-categories.ts

@@ -15,9 +15,9 @@ export const CATEGORY_GROUPS: { name: string; categories: SettingsCategory[] }[]
       },
       {
         id: "usage",
-        name: "Uso das vozes",
+        name: "Uso e custo",
         description:
-          "O que sobra na Fish e na Cartesia e o que cada vídeo gastou. O plano e a cota ficam em Voz → Provedores de voz",
+          "O que os agentes gastam por vídeo e etapa, e o que sobra na Fish e na Cartesia. O plano e a cota das vozes ficam em Voz → Provedores de voz",
       },
       {
         id: "agent",

package/studio/web/lib/setup-retry.ts

@@ -0,0 +1,29 @@
+/* "Tentar de novo" on a setup step: what the page knows from the report the CLI writes (tools/lib/setup-progress.mjs).
+   After a failure the process that ran the setup stays alive and looks at the cloud config every few seconds, stamping
+   `watching_at`; a request the page writes is answered by stamping `handled`. So the button shows only while
+   someone is there to hear it, and a request asked but not yet answered shows as "waiting for the computer". */
+
+import type { SetupRecord, SetupRetryRequest } from "../types/api";
+
+/* the process looks every 5 s and stamps every 15: a stamp this old means nobody is there any more */
+export const LISTENING_MS = 45_000;
+/* a request nobody has answered after this long, with nothing running, is lost */
+export const PENDING_MS = 90_000;
+
+export const isListening = (setup: Pick<SetupRecord, "watching_at"> | null, now = Date.now()) =>
+  !!setup?.watching_at && now - setup.watching_at < LISTENING_MS;
+
+/** the step asked for again and not answered yet ("all" included), or null */
+export function pendingStep(
+  setup: Pick<SetupRecord, "handled" | "steps"> | null,
+  request: SetupRetryRequest | null,
+  now = Date.now(),
+): string | null {
+  if (!setup || !request || request.id === setup.handled) return null;
+  const working = setup.steps.some(s => s.state === "running");
+  return working || now - request.at < PENDING_MS ? request.step : null;
+}
+
+/** the steps that show as waiting for the computer: the one asked for, or every failed one for "all" */
+export const isWaiting = (stepId: string, state: string, pending: string | null) =>
+  !!pending && state === "error" && (pending === "all" || pending === stepId);

package/studio/web/lib/studio-offline.ts

@@ -1,84 +1,130 @@
 /* What the "studio sem conexão" screen (components/StudioOffline.tsx) says, from what the hub knows
-   (cloud/studio/src/presence.mjs): the reason the Mac is out and the step that brings it back. A Mac that
-   never connected gets the install (the plugin, or the CLI alone); a refused key repairs itself (the runner
-   opens the approval page on the Mac); the rest needs one thing on the Mac. The commands are the installed
-   CLI's (tools/lib/cli.mjs: `npx -y @crievo/omni …`), with the repository's own as the last step for the
-   machine that runs from a checkout. */
+   (cloud/studio/src/presence.mjs): why the computer is out and what is bringing it back, as steps (the same stepper
+   as the setup's). The computer brings itself back where it can: the studio service retries the connection, and
+   with no usable login (signed out, disconnected here) it opens the approval page on that computer by itself
+   (studio/runner/runner.ts), so the user's part is one click there, never a terminal or a Claude Code session. The
+   `fallback` is what to do only when that doesn't happen after a while. A computer the hub has never seen gets the
+   first-time screen instead (the welcome, the plugin to install and the setup's steps: components/FirstConnection.tsx). */
 
-import type { RunnerProblem } from "../types/api";
+import type { RunnerProblem, SetupStep } from "../types/api";
 import { formatDayTime } from "./format";
 
-export type OfflineStep = { text: string; code?: string };
-export type OfflineAdvice = { title: string; text: string; steps: OfflineStep[] };
+/* the plugin's marketplace (tools/lib/cli.mjs, tools/package.mjs) */
+export const PLUGIN_INSTALL = "claude plugin install omnivideo --marketplace pedroflp/omni-plugin";
 
-/* the plugin's marketplace and the CLI's package (tools/lib/cli.mjs, tools/omni.mjs) */
-const PLUGIN_INSTALL = "claude plugin install omnivideo --marketplace pedroflp/omni-plugin";
-const CLI = "npx -y @crievo/omni";
+export type OfflineAdvice = {
+  title: string;
+  /* one line: what happened */
+  text: string;
+  /* what is happening now, in order: done, the one running, what comes next */
+  steps: SetupStep[];
+  /* ISO time the trouble began: the fallback shows once it has lasted `fallbackAfterMs` */
+  since: string | null;
+  fallbackAfterMs: number;
+  /* last resort, only when the computer didn't recover by itself */
+  fallback: string;
+};
+type Seen = { name: string | null; lastSeen: string | null; problem: RunnerProblem | null };
 
-const theMac = (name: string | null | undefined) => (name ? `O Mac “${name}”` : "O Mac que roda o studio");
+const theMachine = (name: string | null | undefined) => (name ? `A máquina “${name}”` : "A máquina que roda o studio");
 
-export function offlineAdvice(o: {
-  name: string | null;
-  lastSeen: string | null;
-  problem: RunnerProblem | null;
-}): OfflineAdvice {
+/** no computer has ever entered this account, and nothing kept one out: the first time */
+export const isFirstConnection = (o: Seen) => !o.problem && !o.name && !o.lastSeen;
+
+/* how long a setup report still counts as "what is happening now" (the CLI writes it on every step) */
+const FRESH_MS = 30 * 60_000;
+
+/** The setup the CLI is reporting (tools/lib/setup-progress.mjs), when it is recent enough to be what the user
+ *  is waiting on: a finished one from last week is just history. */
+export function currentSetup<T extends { updated_at: number }>(
+  setup: T | null | undefined,
+  now = Date.now(),
+): T | null {
+  return setup && now - setup.updated_at < FRESH_MS ? setup : null;
+}
+
+const step = (id: string, label: string, detail: string, state: SetupStep["state"]): SetupStep => ({
+  id,
+  label,
+  detail,
+  state,
+});
+
+/* the three beats every case has: what happened, what the computer is doing, and getting back */
+const steps = (done: [string, string], running: [string, string], next: [string, string]): SetupStep[] => [
+  step("happened", done[0], done[1], "done"),
+  step("working", running[0], running[1], "running"),
+  step("back", next[0], next[1], "pending"),
+];
+
+const APPROVE = "Ela abre sozinha na máquina. Entre com o Google e clique em Conectar.";
+const OPEN_CLAUDE = "Se a janela não abriu, abra o Claude Code na máquina: o plugin abre a página de novo.";
+
+export function offlineAdvice(o: Seen): OfflineAdvice {
   const p = o.problem;
+  const who = theMachine(p && "host" in p && p.host ? p.host : p && "name" in p && p.name ? p.name : o.name);
   if (p?.reason === "key")
     return {
-      title: "O Mac precisa ser aprovado de novo",
-      text: `${theMac(p.host || o.name)} tentou conectar em ${formatDayTime(p.at)}, mas o servidor não aceitou a chave dele. Ele pede uma nova sozinho: a página de aprovação abre no navegador do Mac.`,
-      steps: [
-        { text: "No Mac, aprove a conexão na página que abriu (entre com o Google se ela pedir)." },
-        { text: "Se a página não abriu, no Mac:", code: `${CLI} login` },
-      ],
+      title: "A máquina precisa ser aprovada de novo",
+      text: `${who} pediu para entrar de novo.`,
+      steps: steps(
+        ["A máquina pediu para entrar", formatDayTime(p.at)],
+        ["Aprove na janela que abriu", APPROVE],
+        ["Reconectar", "Volta sozinho assim que você aprovar."],
+      ),
+      since: p.at,
+      fallbackAfterMs: 2 * 60_000,
+      fallback: OPEN_CLAUDE,
     };
   if (p?.reason === "revoked")
     return {
-      title: "Este Mac foi desconectado",
-      text: `${theMac(p.name || o.name)} foi desconectado do studio em ${formatDayTime(p.at)}. Ele só volta quando for pareado de novo.`,
-      steps: [
-        { text: "No Mac:", code: `${CLI} login` },
-        { text: "Se o studio roda do repositório:", code: "node tools/runner.mjs login" },
-      ],
+      title: "Esta máquina foi desconectada",
+      text: `${who} foi desconectada do studio.`,
+      steps: steps(
+        ["Máquina desconectada", formatDayTime(p.at)],
+        ["Pedindo para entrar de novo", APPROVE],
+        ["Reconectar", "Volta sozinho assim que você aprovar."],
+      ),
+      since: p.at,
+      fallbackAfterMs: 2 * 60_000,
+      fallback: OPEN_CLAUDE,
     };
   if (p?.reason === "protocol" && p.side === "mac")
     return {
-      title: "O Mac precisa de atualização",
-      text: `${theMac(p.host || o.name)} está com uma versão do studio anterior à do servidor, e os dois não se entendem.`,
-      steps: [
-        { text: "No Mac, atualize o OmniVideo (ele reinicia o studio sozinho):", code: `${CLI}@latest up` },
-        { text: "Se o studio roda do repositório:", code: "git pull && node tools/runner.mjs service restart" },
-      ],
+      title: "A máquina precisa de atualização",
+      text: `${who} está com uma versão do Omni anterior à do servidor.`,
+      steps: steps(
+        ["Versões diferentes", "A máquina e o servidor não se entendem."],
+        ["Atualizando a máquina", "O Omni baixa a versão nova e reinicia o studio sozinho."],
+        ["Reconectar", "Volta sozinho depois de atualizar."],
+      ),
+      since: p.at,
+      fallbackAfterMs: 10 * 60_000,
+      fallback: "Está demorando. Abra o Claude Code na máquina: o plugin termina a atualização.",
     };
   if (p?.reason === "protocol")
     return {
       title: "O servidor está desatualizado",
-      text: `${theMac(p.host || o.name)} já tem uma versão mais nova que a do servidor.`,
-      steps: [
-        { text: "Suba o servidor: o merge na main faz o deploy sozinho, ou GitHub → Actions → Deploy → Run workflow." },
-      ],
-    };
-  /* the hub has never seen a Mac for this account: the first run, so the way in is the install */
-  if (!o.name && !o.lastSeen)
-    return {
-      title: "Falta ligar o OmniVideo no seu Mac",
-      text: "O vídeo é feito no seu computador (a narração, o motion e a montagem), e este studio só mostra e comanda. Nenhum Mac entrou nesta conta ainda.",
-      steps: [
-        { text: "Instale o plugin no Claude Code (uma vez):", code: PLUGIN_INSTALL },
-        {
-          text: "Abra uma sessão do Claude Code. O plugin abre o navegador para você aprovar o Mac, baixa o que o vídeo precisa (alguns minutos) e liga o studio sozinho. Esta tela some quando ele conectar.",
-        },
-        { text: "Sem o plugin, pelo terminal:", code: `${CLI} setup` },
-      ],
+      text: `${who} já tem uma versão mais nova que a do servidor.`,
+      steps: steps(
+        ["Versões diferentes", "O servidor está mais velho que a máquina."],
+        ["Esperando o servidor atualizar", "Acontece do nosso lado, sem você fazer nada."],
+        ["Reconectar", "Volta sozinho depois da atualização."],
+      ),
+      since: p.at,
+      fallbackAfterMs: 30 * 60_000,
+      fallback: "Está demorando. Tente de novo em alguns minutos.",
     };
   return {
     title: "O studio perdeu a conexão",
-    text: `${theMac(o.name)} não está conectado ${o.lastSeen ? `desde ${formatDayTime(o.lastSeen)}` : "agora"}. Ele pode estar desligado, dormindo ou sem internet, ou o studio está fechado. O que você pediu espera e volta a andar quando ele reconectar.`,
-    steps: [
-      { text: "Confira se o Mac está ligado, acordado e com internet." },
-      { text: "Deixe o studio sempre aberto (uma vez só, no Mac):", code: `${CLI} up` },
-      { text: "Se o studio roda do repositório:", code: "node tools/runner.mjs service install" },
-      { text: "Ou abra à mão:", code: "cd studio && bun start" },
-    ],
+    text: o.lastSeen ? `${who} não está conectada desde ${formatDayTime(o.lastSeen)}.` : `${who} não está conectada.`,
+    steps: steps(
+      ["Conexão perdida", o.lastSeen ? `Desde ${formatDayTime(o.lastSeen)}` : "Agora"],
+      ["Procurando a máquina", "O Omni tenta de novo sozinho, a cada poucos segundos."],
+      ["Reconectar", "Volta sozinho quando a máquina estiver ligada e com internet."],
+    ),
+    since: o.lastSeen,
+    fallbackAfterMs: 10 * 60_000,
+    fallback: "Se a máquina está ligada e com internet, abra o Claude Code nela: o plugin religa o studio.",
   };
 }

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

@@ -0,0 +1,215 @@
+/* /preview/connect: the first-time screen and the "sem conexão" ones, with the real components and made-up data, to
+   check them without a hosted studio (at 127.0.0.1 the studio is always connected, so none of them shows up by
+   itself). Not in the menu: reached by the address. "Reproduzir" walks the setup the way the CLI reports it, step by
+   step; the other tabs are fixed moments of it. In the hosted studio the same components read the real report
+   (hooks/useSetupProgress.ts) and the hub's state (hooks/useRunner.ts). */
+
+import { useEffect, useState } from "react";
+import { FirstConnection } from "../../components/FirstConnection";
+import { OfflineNotice } from "../../components/OfflineNotice";
+import { offlineAdvice } from "../../lib/studio-offline";
+import type { RunnerProblem, SetupRecord, SetupStepState } from "../../types/api";
+
+const STEPS = [
+  [
+    "workspace",
+    "Criando a sua pasta de trabalho",
+    "Onde ficam os seus vídeos e as suas configurações, no seu computador.",
+  ],
+  ["app", "Instalando o Omni neste computador", "Uma cópia que se atualiza sozinha e fica pronta para o Claude usar."],
+  ["video", "Configuração para montar e exportar o vídeo", "Junta as cenas, a voz e as legendas no arquivo final."],
+  ["render", "Configuração para renderizar as animações", "Transforma o motion de cada cena em vídeo."],
+  [
+    "voice",
+    "Configuração para a voz, o tempo e as legendas",
+    "Mede a fala e deixa cada cena e cada legenda no tempo certo.",
+  ],
+  [
+    "style",
+    "Configuração para extrair o estilo visual",
+    "Lê um vídeo ou um link de referência e aprende o estilo dele.",
+  ],
+  [
+    "studio",
+    "Conectando este computador ao studio",
+    "Para o site conversar com o Claude e com os seus arquivos daqui.",
+  ],
+] as const;
+
+/* a record with the first `done` steps finished and the next one in the given state */
+function record(done: number, next: SetupStepState = "running", error?: string): SetupRecord {
+  const now = Date.now();
+  return {
+    v: 1,
+    state: done >= STEPS.length ? "done" : next === "error" ? "error" : "running",
+    device: "MacBook-Pro",
+    started_at: now - 120_000,
+    updated_at: now,
+    steps: STEPS.map(([id, label, detail], i) => ({
+      id,
+      label,
+      detail,
+      state: i < done ? "done" : i === done ? next : "pending",
+      ...(i === done && next === "error" && error ? { error } : {}),
+    })),
+  };
+}
+
+/* the trouble began a moment ago: the normal state. `long` is the same an hour on, when the last-resort line shows */
+const at = new Date(Date.now() - 20_000).toISOString();
+const long = new Date(Date.now() - 3_600_000).toISOString();
+const problem = (p: RunnerProblem) => p;
+
+/* the failed step with the computer listening: "Tentar de novo" asks, the step loads, and it works the second time */
+function ErrorDemo() {
+  const [phase, setPhase] = useState<"error" | "asking" | "fixed">("error");
+  useEffect(() => {
+    if (phase !== "asking") return;
+    const id = setTimeout(() => setPhase("fixed"), 2200);
+    return () => clearTimeout(id);
+  }, [phase]);
+  const setup =
+    phase === "fixed"
+      ? record(STEPS.length)
+      : { ...record(4, "error", "não consegui baixar o instalador (sem internet?)"), watching_at: Date.now() };
+  return (
+    <FirstConnection
+      setup={setup}
+      retry={{ listening: true, pending: phase === "asking" ? "voice" : null, onRetry: () => setPhase("asking") }}
+    />
+  );
+}
+
+type View = { id: string; name: string; render: () => React.ReactNode };
+
+const VIEWS: View[] = [
+  { id: "install", name: "1 · Instalar o plugin", render: () => <FirstConnection setup={null} /> },
+  { id: "running", name: "2 · Preparando", render: () => <FirstConnection setup={record(3)} /> },
+  { id: "error", name: "3 · Etapa com erro", render: () => <ErrorDemo /> },
+  {
+    id: "stale",
+    name: "3 · Erro, sem resposta",
+    render: () => (
+      <FirstConnection
+        setup={record(4, "error", "não consegui baixar o instalador (sem internet?)")}
+        retry={{ listening: false, pending: null, onRetry: () => {} }}
+      />
+    ),
+  },
+  { id: "waiting", name: "4 · Conectando o studio", render: () => <FirstConnection setup={record(STEPS.length)} /> },
+  {
+    id: "lost",
+    name: "Perdeu a conexão",
+    render: () => (
+      <OfflineNotice
+        advice={offlineAdvice({ name: "MacBook-Pro", lastSeen: at, problem: null })}
+        checking={false}
+        onCheck={() => {}}
+      />
+    ),
+  },
+  {
+    id: "lost-long",
+    name: "Perdeu há 1 h",
+    render: () => (
+      <OfflineNotice
+        advice={offlineAdvice({ name: "MacBook-Pro", lastSeen: long, problem: null })}
+        checking={false}
+        onCheck={() => {}}
+      />
+    ),
+  },
+  {
+    id: "key",
+    name: "Precisa aprovar",
+    render: () => (
+      <OfflineNotice
+        advice={offlineAdvice({
+          name: null,
+          lastSeen: null,
+          problem: problem({ reason: "key", at, host: "MacBook-Pro" }),
+        })}
+        checking={false}
+        onCheck={() => {}}
+      />
+    ),
+  },
+  {
+    id: "revoked",
+    name: "Desconectado",
+    render: () => (
+      <OfflineNotice
+        advice={offlineAdvice({ name: "MacBook-Pro", lastSeen: at, problem: problem({ reason: "revoked", at }) })}
+        checking={false}
+        onCheck={() => {}}
+      />
+    ),
+  },
+];
+
+/* "Reproduzir": one step finishes every couple of seconds, the way the CLI reports it, and it ends on the studio connecting */
+const STEP_MS = 2000;
+
+export function ConnectPreviewPage() {
+  /* ?v=<id> opens straight on a state (the ids of VIEWS) */
+  const [view, setView] = useState(() => {
+    const v = new URLSearchParams(location.search).get("v");
+    return VIEWS.some(x => x.id === v) ? (v as string) : "install";
+  });
+  const [playing, setPlaying] = useState(false);
+  /* how many steps are done while playing */
+  const [done, setDone] = useState(0);
+
+  useEffect(() => {
+    document.title = "Pré-visualização do onboarding · Omni";
+  }, []);
+  useEffect(() => {
+    if (!playing) return;
+    const id = setInterval(() => setDone(d => d + 1), STEP_MS);
+    return () => clearInterval(id);
+  }, [playing]);
+  useEffect(() => {
+    if (playing && done >= STEPS.length) {
+      setPlaying(false);
+      setView("waiting");
+    }
+  }, [playing, done]);
+
+  const play = () => {
+    setDone(0);
+    setPlaying(true);
+  };
+  const current = VIEWS.find(v => v.id === view) ?? VIEWS[0];
+
+  return (
+    <div className="page">
+      <header className="header">
+        <h1>
+          <em>Pré-visualização</em> do onboarding
+        </h1>
+        <span className="subtle">dados de exemplo: no studio hospedado vêm do computador de verdade</span>
+      </header>
+      <div className="actions" style={{ alignItems: "center", marginBottom: 16 }}>
+        <div className="segmented" role="group" aria-label="Estado">
+          {VIEWS.map(v => (
+            <button
+              key={v.id}
+              type="button"
+              className={!playing && view === v.id ? "active" : ""}
+              onClick={() => {
+                setPlaying(false);
+                setView(v.id);
+              }}
+            >
+              {v.name}
+            </button>
+          ))}
+        </div>
+        <button type="button" className="button primary" onClick={play} disabled={playing}>
+          {playing ? "Reproduzindo…" : "Reproduzir o setup"}
+        </button>
+      </div>
+      <div className="connect-preview">{playing ? <FirstConnection setup={record(done)} /> : current.render()}</div>
+    </div>
+  );
+}