@crievo/omni 0.1.2 → 0.1.3

package/studio/api/services/onboarding.ts

@@ -1,40 +1,247 @@
 /* Getting started (/getting-started): the guide in docs/onboarding.md, one step per section
-   (`<!-- step: id -->`), with each step's state measured by `tools/setup.mjs
-   check --json`. The guide owns the text: the UI repeats none of it. */
+   (`<!-- step: id -->`), each with its state measured here. The guide owns the text: the UI repeats
+   none of it.
 
+   The first step is this computer: the four programs the CLI (`omni up`) downloads into ~/.omni in the
+   background (checkDeps, from tools/lib/deps.mjs) and the Claude Code permission rules the plugin's
+   skills need (missingRules, from tools/lib/claude-settings.mjs; Claude writes them through the
+   plugin's MCP, never the studio). The page polls while something is missing, so checkDeps is cached:
+   briefly while the download runs, longer once everything answers. The other steps read the
+   workspace (.env, config, styles library, videos/): nothing there runs a program.
+
+   `tools/setup.mjs check` stays the development repository's terminal check; the studio no longer
+   runs it. */
+
+import { existsSync, readdirSync, statSync } from "node:fs";
 import { join, resolve, sep } from "node:path";
-import { CODE_ROOT, NODE, TOOLS_DIR, run, readText } from "./root";
+import { CODE_ROOT, readText } from "./root";
+import { providerKey, readConfig, readEnv } from "./settings";
+import { LIBRARY_DIR } from "./references";
+import { videoDirs } from "./videos";
+import { checkDeps } from "../../../tools/lib/deps.mjs";
+import { missingRules } from "../../../tools/lib/claude-settings.mjs";
+import { accountsOf, loginOf, tildify } from "../../../tools/lib/agents.mjs";
 
 export const DOCS_DIR = join(CODE_ROOT, "docs");
 const GUIDE = join(DOCS_DIR, "onboarding.md");
 
-type Check = { id: string; title: string; state: "ok" | "missing" | "warning"; detail: string };
-type CheckResult = {
-  ready: boolean;
-  steps: { id: string; state: Check["state"]; optional?: boolean; items: Check[] }[];
-};
+type State = "ok" | "missing" | "warning";
+type Check = { id: string; title: string; state: State; detail: string };
+type StepCheck = { optional?: boolean; items: Check[] };
 export type OnboardingStep = {
   id: string;
   title: string;
   markdown: string;
-  state: Check["state"] | null;
+  state: State | null;
   optional: boolean;
   items: Check[];
 };
+export type Computer = {
+  ffmpeg: string | null;
+  ffprobe: string | null;
+  chrome: string | null;
+  python: string | null;
+  /** only the visual style from a link needs it: not part of `ready` */
+  ytdlp: string | null;
+  /** the four programs answer */
+  ready: boolean;
+  /** the permission rules still missing in the Claude Code settings (empty = ok) */
+  missing_rules: string[];
+  /** a development checkout (the code root has .git, as `omni up` tells it): Claude runs the repository's
+      own skills, so the plugin's rules don't block anything */
+  dev: boolean;
+  /** the agent account the sessions run on: logged in (the e-mail) or where the login was looked for */
+  agent: { ok: boolean; detail: string };
+};
+
+const item = (id: string, title: string, state: State, detail: string): Check => ({ id, title, state, detail });
+const stateOf = (items: Check[]): State =>
+  items.some(i => i.state === "missing") ? "missing" : items.some(i => i.state === "warning") ? "warning" : "ok";
+
+/* --- this computer ------------------------------------------------------------------- */
 
-/* the check runs programs (bun, ffmpeg, python…): cache it briefly so the overview doesn't pay on every visit */
-let cached: { at: number; r: CheckResult } | null = null;
-async function runChecks(fresh: boolean): Promise<CheckResult | null> {
-  if (!fresh && cached && Date.now() - cached.at < 60_000) return cached.r;
-  const r = await run([NODE, join(TOOLS_DIR, "setup.mjs"), "check", "--json"]);
+/* checkDeps runs each program (spawnSync): one run serves every poll for a while */
+let deps: { at: number; value: ReturnType<typeof checkDeps> } | null = null;
+const DEPS_TTL_PREPARING = 4_000;
+const DEPS_TTL_READY = 5 * 60_000;
+const DEV = existsSync(join(CODE_ROOT, ".git"));
+
+export function getComputer(fresh = false): Computer {
+  const ready = (d: ReturnType<typeof checkDeps>) => !!(d.ffmpeg && d.ffprobe && d.chrome && d.python);
+  const ttl = deps && ready(deps.value) ? DEPS_TTL_READY : DEPS_TTL_PREPARING;
+  if (fresh || !deps || Date.now() - deps.at > ttl) deps = { at: Date.now(), value: checkDeps(CODE_ROOT) };
+  const d = deps.value;
+  let rules: string[];
   try {
-    cached = { at: Date.now(), r: JSON.parse(r.stdout) };
-    return cached.r;
+    rules = missingRules();
   } catch {
-    return null;
+    rules = [];
   }
+  return {
+    agent: agentAccount(),
+    ffmpeg: d.ffmpeg || null,
+    ffprobe: d.ffprobe || null,
+    chrome: d.chrome || null,
+    python: d.python || null,
+    ytdlp: d.ytdlp || null,
+    ready: ready(d),
+    missing_rules: rules,
+    dev: DEV,
+  };
+}
+
+/* the studio's sessions need one enabled account with a login (tools/lib/agents.mjs): with no list, the
+   Claude Code of this machine, which may live in another folder than the one looked at */
+function agentAccount(): Computer["agent"] {
+  const on = accountsOf(readConfig()).filter(a => a.enabled);
+  const logged = on.find(a => loginOf(a));
+  if (logged) return { ok: true, detail: loginOf(logged)?.email ?? tildify(logged.dir) };
+  return {
+    ok: false,
+    detail: on.length ? `sem login em ${on.map(a => tildify(a.dir)).join(", ")}` : "nenhuma conta ligada",
+  };
+}
+
+const PREPARING = "preparando…";
+
+function computerStep(c: Computer): StepCheck {
+  const program = (id: keyof Computer, title: string) => {
+    const v = c[id] as string | null;
+    return item(id, title, v ? "ok" : "missing", v ?? PREPARING);
+  };
+  return {
+    items: [
+      program("ffmpeg", "ffmpeg"),
+      program("ffprobe", "ffprobe"),
+      program("chrome", "Chrome sem janela"),
+      program("python", "Python das ferramentas"),
+      /* optional: a warning while missing, so it never holds up the computer step */
+      item("ytdlp", "yt-dlp", c.ytdlp ? "ok" : "warning", c.ytdlp ?? PREPARING),
+      item("agent", "Conta do Claude Code", c.agent.ok ? "ok" : "missing", c.agent.detail),
+      item(
+        "skills",
+        "Permissão das skills no Claude Code",
+        c.missing_rules.length && !c.dev ? "missing" : "ok",
+        !c.missing_rules.length
+          ? "liberadas"
+          : c.dev
+            ? "repositório de desenvolvimento: as skills são as dele"
+            : `faltam ${c.missing_rules.length} regras`,
+      ),
+    ],
+  };
 }
 
+/* --- the steps that keep the user busy meanwhile -------------------------------------- */
+
+const PROVIDERS = [
+  ["fish", "Fish Audio"],
+  ["cartesia", "Cartesia"],
+  ["elevenlabs", "ElevenLabs"],
+] as const;
+
+function voiceSteps(): Record<"voice-key" | "voice-clone" | "voice-default", StepCheck> {
+  const voice = readConfig()?.voice ?? {};
+  const withKey = PROVIDERS.filter(([id]) => providerKey(id));
+  const profiles: { id: string; name?: string; [provider: string]: unknown }[] = voice.profiles ?? [];
+  const nameOf = (p: (typeof profiles)[number]) => String(p.name ?? p.id);
+  const usable = profiles.filter(p => withKey.some(([id]) => p[id]));
+  const active = profiles.find(p => p.id === voice.default_profile);
+  return {
+    "voice-key": {
+      items: [
+        item(
+          "voice-key",
+          "Chave de um provider de voz",
+          withKey.length ? "ok" : "missing",
+          withKey.length ? withKey.map(([, name]) => name).join(", ") : "nenhuma chave da Fish Audio ou da Cartesia",
+        ),
+      ],
+    },
+    "voice-clone": {
+      items: [
+        item(
+          "voice-profile",
+          "Uma voz clonada",
+          usable.length ? "ok" : "missing",
+          usable.length
+            ? usable.map(nameOf).join(", ")
+            : profiles.length
+              ? "a voz criada não tem o ID de um provider com chave"
+              : "nenhuma voz ainda",
+        ),
+      ],
+    },
+    "voice-default": {
+      items: [
+        item(
+          "voice-active",
+          "Voz padrão do vídeo novo",
+          active ? "ok" : "missing",
+          active ? nameOf(active) : profiles.length ? "nenhuma voz marcada como padrão" : "clone uma voz antes",
+        ),
+      ],
+    },
+  };
+}
+
+function platformsStep(): StepCheck {
+  const env = readEnv();
+  /* the same tokens Configurações → Plataformas reads */
+  const on = (id: string, title: string, connected: boolean) =>
+    item(id, title, connected ? "ok" : "warning", connected ? "conectado" : "não conectado");
+  return {
+    optional: true,
+    items: [
+      on("youtube", "YouTube", !!env.YOUTUBE_REFRESH_TOKEN),
+      on("instagram", "Instagram", !!env.INSTAGRAM_TOKEN),
+      on("tiktok", "TikTok", !!env.TIKTOK_REFRESH_TOKEN),
+    ],
+  };
+}
+
+function styleStep(): StepCheck {
+  let n = 0;
+  try {
+    n = readdirSync(LIBRARY_DIR).filter(name => {
+      if (name.startsWith(".")) return false;
+      const dir = join(LIBRARY_DIR, name);
+      return statSync(dir).isDirectory() && !existsSync(join(dir, ".disabled"));
+    }).length;
+  } catch {
+    /* no library yet */
+  }
+  return {
+    items: [
+      item(
+        "style",
+        "Um estilo visual",
+        n ? "ok" : "missing",
+        n ? `${n} na biblioteca de estilos visuais` : "a biblioteca está vazia",
+      ),
+    ],
+  };
+}
+
+function firstVideoStep(): StepCheck {
+  let done: string | null = null;
+  for (const [slug, dir] of videoDirs()) {
+    try {
+      if (readdirSync(join(dir, "export")).some(f => f.endsWith(".mp4"))) {
+        done = slug;
+        break;
+      }
+    } catch {
+      /* not exported */
+    }
+  }
+  return {
+    items: [item("video", "Um vídeo exportado", done ? "ok" : "missing", done ?? "nenhum ainda")],
+  };
+}
+
+/* --- the guide --------------------------------------------------------------------------- */
+
 /* an image relative to the guide (onboarding/x.png) becomes the studio's /docs/… route; a link to another
    repo file becomes the path in code (in the studio it has nowhere to go) */
 const withImages = (md: string) =>
@@ -44,10 +251,21 @@ const withImages = (md: string) =>
       text.includes("`") ? text : `${text} (\`${target}\`)`,
     );
 
+function checks(computer: Computer): Record<string, StepCheck> {
+  return {
+    computer: computerStep(computer),
+    ...voiceSteps(),
+    platforms: platformsStep(),
+    style: styleStep(),
+    "first-video": firstVideoStep(),
+  };
+}
+
 export async function getOnboarding(fresh = false) {
   const text = readText(GUIDE);
   if (!text) return { error: "docs/onboarding.md não existe" };
-  const checks = await runChecks(fresh);
+  const computer = getComputer(fresh);
+  const all = checks(computer);
   const [head, ...sections] = text.split(/<!--\s*step:\s*([\w-]+)\s*-->/);
   /* split interleaves: id, body, id, body… */
   const steps: OnboardingStep[] = [];
@@ -55,18 +273,21 @@ export async function getOnboarding(fresh = false) {
     const id = sections[i];
     const body = sections[i + 1].trim();
     const m = body.match(/^##\s+(.+)\n/);
-    const c = checks?.steps.find(p => p.id === id);
+    const c = all[id];
     steps.push({
       id,
       title: m ? m[1].trim() : id,
       markdown: withImages(m ? body.slice(m[0].length) : body).trim(),
-      state: c?.state ?? null,
+      state: c ? stateOf(c.items) : null,
       optional: !!c?.optional,
       items: c?.items ?? [],
     });
   }
+  /* ready for the first video: every required step before it with nothing missing */
+  const upTo = steps.findIndex(s => s.id === "first-video");
+  const ready = steps.slice(0, upTo < 0 ? steps.length : upTo).every(s => s.optional || s.state !== "missing");
   const intro = withImages(head.replace(/^#\s+.+\n/, "")).trim();
-  return { ready: checks?.ready ?? false, checked: !!checks, intro, steps };
+  return { ready, checked: true, intro, steps, computer };
 }
 
 /* /docs/<path>: the guide's images */

package/studio/api/services/settings.ts

@@ -78,7 +78,7 @@ export const ENV_KEYS = [
   ...PUBLISH_ENV_KEYS,
 ];
 
-function readEnv(): Record<string, string> {
+export function readEnv(): Record<string, string> {
   const vals: Record<string, string> = {};
   for (const line of (readText(ENV_FILE) ?? "").split("\n")) {
     const l = line.trim();
@@ -562,7 +562,8 @@ export function setCartesiaPlan(plan: unknown, quota: unknown, day: unknown): Re
 
 /* --- agent accounts --------------------------------------------------------------------
    `agents.accounts` (N Claude config dirs, N Codex homes) and `agents.codex` (model, effort,
-   sandbox); the rotation and the limits live in tools/lib/agents.mjs. ~/.claude is refused there. */
+   sandbox); the rotation and the limits live in tools/lib/agents.mjs. With no list, the one account is the
+   Claude Code this machine uses (~/.claude, or the folder the plugin's hook recorded). */
 const SANDBOXES = ["auto", "full"];
 
 function agentsSettings(cfg: any) {
@@ -579,6 +580,7 @@ function agentsSettings(cfg: any) {
       limited_until: limitedUntil(ROOT, a.id) || null,
       login_command: loginCommand(a, cfg),
       logging_in: logins[a.id] ?? null,
+      implicit: a.implicit,
     })),
     /* who takes the next new session */
     next: pickAccount(ROOT, cfg, { advance: false })?.id ?? null,

package/studio/shared/types/api.ts

@@ -1042,6 +1042,8 @@ export type AgentAccount = {
   limited_until: number | null;
   login_command: string;
   logging_in: { state: "waiting" | "ok" | "error"; url: string | null; output: string; at: number } | null;
+  /* the default account (no list in the config): the Claude Code this machine uses */
+  implicit: boolean;
 };
 export type AgentsSettings = {
   accounts: AgentAccount[];
@@ -1067,7 +1069,30 @@ export type OnboardingStep = {
   optional: boolean;
   items: OnboardingCheck[];
 };
-export type Onboarding = { ready: boolean; checked: boolean; intro: string; steps: OnboardingStep[]; error?: string };
+/* this computer: what the CLI downloads into ~/.omni (tools/lib/deps.mjs checkDeps, a version line or
+   path, null while it isn't there yet) and the skills' permission rules (tools/lib/claude-settings.mjs) */
+export type OnboardingComputer = {
+  ffmpeg: string | null;
+  ffprobe: string | null;
+  chrome: string | null;
+  python: string | null;
+  /* only the visual style from a link needs it: not part of `ready` */
+  ytdlp: string | null;
+  ready: boolean;
+  missing_rules: string[];
+  /* a development checkout: the repository's own skills, the plugin's rules don't block */
+  dev: boolean;
+  /* the agent account the sessions run on: its e-mail, or where no login was found */
+  agent: { ok: boolean; detail: string };
+};
+export type Onboarding = {
+  ready: boolean;
+  checked: boolean;
+  intro: string;
+  steps: OnboardingStep[];
+  computer?: OnboardingComputer;
+  error?: string;
+};
 
 /* --- analytics (tools/analysis.mjs context; metrics from tools/metrics.mjs) ----------------- */
 export type MetricsSnapshot = {

package/studio/web/hooks/useOnboarding.ts

@@ -1,15 +1,27 @@
-/* Getting started (/api/onboarding): the docs/onboarding.md guide in steps, each with the
-   tools/setup.mjs check. `reload(true)` asks for a fresh check (?fresh=1). */
+/* Getting started (/api/onboarding): the docs/onboarding.md guide in steps, each with its state, and
+   this computer (what the CLI is still downloading, the skills' permission). While the computer isn't
+   ready the page asks again every 5 s, so "preparando…" turns into "Computador pronto" on its own.
+   `reload(true)` asks for a fresh check (?fresh=1). */
 
 import { useCallback, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
 import { api, errorText, read } from "../lib/api";
 import { queryClient, queryKeys } from "../lib/query-client";
 import type { Onboarding } from "../types/api";
-import { useLiveQuery } from "./useLiveQuery";
+
+const POLL_MS = 5_000;
+
+/** the computer still has something to answer for (a program downloading, the skills' rules) */
+export const computerPending = (o: Onboarding | null | undefined) =>
+  !!o?.computer && (!o.computer.ready || (!o.computer.dev && o.computer.missing_rules.length > 0));
 
 export function useOnboarding() {
-  const { data, error, isFetching } = useLiveQuery(queryKeys.onboarding, () => api.onboarding.$get({ query: {} }));
-  const onboarding: Onboarding | null = data;
+  const q = useQuery({
+    queryKey: queryKeys.onboarding,
+    queryFn: (): Promise<Onboarding> => read(api.onboarding.$get({ query: {} })),
+    refetchInterval: query => (computerPending(query.state.data) ? POLL_MS : false),
+  });
+  const onboarding: Onboarding | null = q.data ?? null;
   const [freshError, setFreshError] = useState<string | null>(null);
   const [checking, setChecking] = useState(false);
   const reload = useCallback(async (fresh = false) => {
@@ -23,5 +35,11 @@ export function useOnboarding() {
     }
     setChecking(false);
   }, []);
-  return { onboarding, error: freshError ?? error, checking: checking || isFetching, reload };
+  return {
+    onboarding,
+    error: freshError ?? (q.error ? errorText(q.error) : null),
+    /* the 5 s poll doesn't count as "Conferindo…" */
+    checking,
+    reload,
+  };
 }

package/studio/web/lib/alerts.ts

@@ -119,6 +119,16 @@ function agentAlerts(agents: AgentsSettings, now: number): Alert[] {
   if (on.some(a => a.login && !limited(a))) return [];
   const until = on.filter(a => a.login && limited(a)).map(a => a.limited_until!);
   if (!until.length) {
+    /* the default account (~/.claude) without a login: the Claude Code may live in another folder */
+    if (on.length === 1 && on[0].implicit && on[0].provider === "claude")
+      return [
+        {
+          key: "agents:no-claude",
+          label: "Não achei o login do Claude Code",
+          message: `Em ${on[0].dir}: entre, ou coloque a pasta dele em Configurações`,
+          link,
+        },
+      ];
     return [
       {
         key: "agents:no-login",

package/studio/web/pages/GettingStartedPage/components/ComputerCard.tsx

@@ -0,0 +1,102 @@
+/* "Este computador", on top of Getting started: what `omni up` is still preparing on this Mac, live.
+   Being on the page already means the login and the studio connection work (the hosted studio only
+   answers through this computer's runner). The four programs come from checkDeps: while one is
+   missing it reads "preparando…" (the CLI is downloading it; nothing for the user to do). The skills'
+   permission rules are written by Claude, on the user's yes, through the plugin's MCP: the studio only
+   says what to ask for. The Claude Code account is looked for where the plugin's hook found it, else
+   ~/.claude; without a login there, the user enters or gives the folder in Settings. */
+
+import { Link } from "@tanstack/react-router";
+import { Badge } from "../../../components/ui/badge";
+import { Markdown } from "../../../components/Markdown";
+import { Check, X } from "../../../components/icons";
+import { useRunner } from "../../../hooks/useRunner";
+import type { OnboardingComputer } from "../../../types/api";
+
+type Row = { id: string; title: string; value: string | null; detail?: string };
+
+export function ComputerCard({ computer: c, markdown }: { computer: OnboardingComputer; markdown: string }) {
+  const { hosted, name } = useRunner();
+  const rulesOk = c.dev || c.missing_rules.length === 0;
+  const programs: Row[] = [
+    { id: "ffmpeg", title: "ffmpeg", value: c.ffmpeg },
+    { id: "ffprobe", title: "ffprobe", value: c.ffprobe },
+    { id: "chrome", title: "Chrome sem janela", value: c.chrome },
+    { id: "python", title: "Python das ferramentas", value: c.python },
+    { id: "ytdlp", title: "yt-dlp", value: c.ytdlp },
+  ];
+  const state = !c.ready ? "preparing" : !c.agent.ok ? "agent" : rulesOk ? "ok" : "rules";
+  return (
+    <section className={`onboarding-computer ${state}`} aria-live="polite" aria-labelledby="computer-title">
+      <header>
+        <h2 id="computer-title">Este computador</h2>
+        {state === "ok" && <Badge variant="ok">Computador pronto</Badge>}
+        {state === "rules" && <Badge variant="warning">Falta liberar as skills</Badge>}
+        {state === "agent" && <Badge variant="warning">Falta a conta do Claude Code</Badge>}
+        {state === "preparing" && (
+          <Badge variant="running">
+            <span className="spinning" aria-hidden="true" /> Preparando…
+          </Badge>
+        )}
+      </header>
+      {state === "preparing" && (
+        <p className="subtle">
+          O OmniVideo está baixando o que falta. Leva alguns minutos e não precisa fazer nada: siga pelos passos abaixo
+          enquanto isso.
+        </p>
+      )}
+      <ul className="onboarding-items">
+        <li className="ok">
+          <span className="onboarding-item-mark">
+            <Check weight="bold" />
+          </span>
+          <b>Login e studio conectados</b>
+          <span className="subtle">
+            {hosted ? (name ? `conectado pelo ${name}` : "conectado") : "studio aberto neste computador"}
+          </span>
+        </li>
+        {programs.map(p => (
+          <li key={p.id} className={p.value ? "ok" : "preparing"}>
+            <span className="onboarding-item-mark">
+              {p.value ? <Check weight="bold" /> : <span className="spinning" aria-hidden="true" />}
+            </span>
+            <b>{p.title}</b>
+            <span className="subtle">{p.value ?? "preparando…"}</span>
+          </li>
+        ))}
+        <li className={c.agent.ok ? "ok" : "missing"}>
+          <span className="onboarding-item-mark">{c.agent.ok ? <Check weight="bold" /> : <X weight="bold" />}</span>
+          <b>Conta do Claude Code</b>
+          <span className="subtle">{c.agent.detail}</span>
+        </li>
+        <li className={rulesOk ? "ok" : "missing"}>
+          <span className="onboarding-item-mark">{rulesOk ? <Check weight="bold" /> : <X weight="bold" />}</span>
+          <b>Permissão das skills no Claude Code</b>
+          <span className="subtle">
+            {c.missing_rules.length === 0
+              ? "liberadas"
+              : c.dev
+                ? "repositório de desenvolvimento: as skills são as dele"
+                : "ainda não liberadas"}
+          </span>
+        </li>
+      </ul>
+      {!c.agent.ok && (
+        <p className="onboarding-ask">
+          Não achei o login do seu Claude Code. Se ele usa outra pasta, coloque ela em{" "}
+          <Link to="/settings/$category" params={{ category: "agent" }}>
+            Configurações → Agente de IA
+          </Link>
+          ; se é essa mesma, entre por lá.
+        </p>
+      )}
+      {!rulesOk && (
+        <p className="onboarding-ask">
+          No Claude Code, diga: <q>libere as skills do OmniVideo</q>. O Claude mostra as regras, pede o seu ok e grava.
+          Esta tela atualiza sozinha.
+        </p>
+      )}
+      {markdown && <Markdown text={markdown} />}
+    </section>
+  );
+}