@crievo/omni 0.1.2 → 0.1.4

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/api/services/sound.ts

@@ -5,6 +5,7 @@
    mixes. Saving writes to scenes.json; the export only changes on reassembly. */
 
 import { existsSync, mkdirSync, readdirSync, renameSync, rmSync, statSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
 import { join, resolve, sep, basename } from "node:path";
 import { ROOT, NODE, TOOLS_DIR, readJson } from "./root";
 import { loadVideo, beatTime } from "../../../tools/timing.mjs";
@@ -267,6 +268,50 @@ export async function downloadEffect(dir: string, body: any): Promise<Result> {
   return { ok: true, output: o.trim() };
 }
 
+/* A track the user sends from the editor (the upload): the raw body goes to a temp file and
+   `sound.mjs import` turns it into an MP3 in the video's sfx/, with the origin "upload". The answer's
+   output starts with the file name, like the Epidemic download's. */
+const AUDIO_FILE = /\.(mp3|wav|m4a|aac|flac|ogg|oga|opus|aif|aiff|wma|mp4)$/i;
+const MAX_UPLOAD = 200 * 1024 * 1024;
+export async function uploadTrack(
+  dir: string,
+  rawName: string,
+  body: ReadableStream | null,
+  size: number,
+): Promise<Result> {
+  let original = rawName;
+  try {
+    original = decodeURIComponent(rawName);
+  } catch {
+    /* keeps the raw name */
+  }
+  const file = basename(original);
+  if (!AUDIO_FILE.test(file))
+    return { ok: false, error: "o arquivo precisa ser um áudio (mp3, wav, m4a, aac, flac, ogg, aiff)" };
+  if (!body || size === 0) return { ok: false, error: "arquivo vazio" };
+  if (size > MAX_UPLOAD) return { ok: false, error: "o arquivo passa de 200 MB" };
+  const tmp = join(tmpdir(), `omni-upload-${Date.now()}${file.slice(file.lastIndexOf("."))}`);
+  try {
+    await Bun.write(tmp, new Response(body));
+    /* the file's own name (not the temp file's) is the track's name and title */
+    const title = file.replace(/\.[^.]+$/, "");
+    const p = Bun.spawn([NODE, join(TOOLS_DIR, "sound.mjs"), "import", dir, tmp, title, "--title", title], {
+      cwd: ROOT,
+      stdout: "pipe",
+      stderr: "pipe",
+      env: { ...process.env, OMNIVIDEO_ORIGIN: "studio" },
+    });
+    const [o, e, exit] = await Promise.all([new Response(p.stdout).text(), new Response(p.stderr).text(), p.exited]);
+    if (exit !== 0)
+      return { ok: false, error: (e || o).trim().replace(/^erro:\s*/, "") || `sound.mjs saiu com ${exit}` };
+    return { ok: true, output: o.trim() };
+  } catch (err: any) {
+    return { ok: false, error: `não deu para guardar o upload: ${err?.message ?? err}` };
+  } finally {
+    rmSync(tmp, { force: true });
+  }
+}
+
 /* adds a sound from an Epidemic page (playlist, theme, search): the editor's agent session opens it in
    Chrome, plays the tracks, takes the lqmp3 URL from the player and runs sound.mjs download. The
    timeline reloads when the agent stops. */

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/studio.ts

@@ -81,6 +81,7 @@ try {
       "/settings/:category": index,
       "/new": index,
       "/getting-started": index,
+      "/bencho": index,
       "/styles": index,
       "/styles/:name": index,
       /* any other path opens the app, which shows the 404 page inside the menu; the API and

package/studio/web/components/AppShell.tsx

@@ -1,5 +1,5 @@
 /* The root route component: the top banners, the menu, the page (<Outlet/>) inside the scrolling
-   .content, the lightbox, the approval notice, Omni and, over everything, the screen for a studio that lost its connection, the voice agent (its panel opens from the sidebar button). */
+   .content, the lightbox, the approval notice, Omni, the toasts and, over everything, the screen for a studio that lost its connection, the voice agent (its panel opens from the sidebar button). */
 
 import { useEffect, useRef } from "react";
 import { Outlet, useLocation, useMatchRoute } from "@tanstack/react-router";
@@ -10,6 +10,7 @@ import { TopBanners } from "./TopBanners";
 import { Lightbox } from "./Lightbox";
 import { OmniWidget } from "./Omni/OmniWidget";
 import { StudioOffline } from "./StudioOffline";
+import { Toaster } from "./Toaster";
 import { Sidebar } from "./Sidebar";
 
 /* the page a location belongs to: switching the stage of a video (/videos/x/<stage>) or the
@@ -59,6 +60,7 @@ export function AppShell() {
       <ApprovalNotice />
       <OmniWidget menuCollapsed={collapsed} />
       <StudioOffline />
+      <Toaster />
     </>
   );
 }

package/studio/web/components/CloneVoiceDialog/RecordStep.tsx

@@ -41,8 +41,11 @@ export function RecordStep({ c }: { c: CloneVoiceState }) {
           total={c.total}
           level={c.level}
           creating={creating}
+          take={c.take}
           onStart={c.start}
           onStop={c.stop}
+          onCancel={c.cancel}
+          onDiscardTake={c.remove}
         />
       )}
     </>

package/studio/web/components/CloneVoiceDialog/RecorderBar.tsx

@@ -1,8 +1,12 @@
-import { clock, MAX_S } from "../../lib/clone-voice";
-import { Circle, Microphone, Stop } from "../icons";
+import { MAX_S } from "../../lib/clone-voice";
+import { VoiceNote } from "../bencho/VoiceNote";
+import { BenchoScope } from "../bencho/BenchoScope";
+import { Microphone } from "../icons";
 import { Picker } from "../ui/picker";
+import type { Sample } from "./types";
 
-/* recording step 2: the microphone choice, the permission or the timer, the record button and the level */
+/* recording step 2: the microphone choice, then the permission button or the voice note pill (tap to record, tap to
+   stop, the take played back right there) and, at rest, the level */
 export function RecorderBar({
   device,
   devices,
@@ -14,8 +18,11 @@ export function RecorderBar({
   total,
   level,
   creating,
+  take,
   onStart,
   onStop,
+  onCancel,
+  onDiscardTake,
 }: {
   device: string;
   devices: MediaDeviceInfo[];
@@ -27,9 +34,14 @@ export function RecorderBar({
   total: number;
   level: number;
   creating: boolean;
+  /* the take just recorded: the pill shows it as a clip */
+  take: Sample | null;
   onStart: () => void;
   onStop: () => void;
+  onCancel: () => void;
+  onDiscardTake: (id: string) => void;
 }) {
+  const full = total >= MAX_S;
   return (
     <footer className="clone-bar">
       <Picker
@@ -47,32 +59,37 @@ export function RecorderBar({
         <button type="button" className="button pill" onClick={onAllowMicrophone}>
           <Microphone className="ic" /> Permitir microfone
         </button>
-      ) : recording ? (
-        <span className="clone-time mono">
-          <Circle weight="fill" className="ic" /> {clock(elapsed)}
-        </span>
       ) : (
-        <span className="subtle">Pronto para gravar</span>
+        <div className="clone-voicenote">
+          <BenchoScope>
+            <VoiceNote
+              mode="tap"
+              state={recording ? "recording" : take ? "clip" : "idle"}
+              level={level}
+              elapsed={elapsed}
+              maxSeconds={MAX_S - total}
+              audioUrl={take?.url}
+              duration={take?.s}
+              disabled={creating || (full && !take)}
+              onStart={onStart}
+              onStop={onStop}
+              onCancel={onCancel}
+              onDiscard={() => take && onDiscardTake(take.id)}
+              onAgain={take && !full && !creating ? onStart : undefined}
+            />
+          </BenchoScope>
+        </div>
       )}
-      <button
-        type="button"
-        className={`clone-record${recording ? " active" : ""}`}
-        disabled={microphone !== "ok" || creating || (!recording && total >= MAX_S)}
-        aria-label={recording ? "Parar a gravação" : "Começar a gravar"}
-        onClick={recording ? onStop : onStart}
-      >
-        {recording ? <Stop weight="fill" /> : <Microphone weight="fill" />}
-      </button>
       <span className="clone-level" aria-live="polite">
-        {microphone === "ok" && level > 0.04 ? (
+        {microphone === "ok" && !recording && level > 0.04 ? (
           <span className="bars" aria-hidden="true">
             {[0.5, 0.8, 1, 0.8, 0.5].map((k, i) => (
               <i key={i} style={{ height: `${Math.max(12, Math.min(100, level * 100 * k))}%` }} />
             ))}
           </span>
-        ) : (
+        ) : microphone === "ok" && !recording ? (
           "Sem ruído detectado"
-        )}
+        ) : null}
       </span>
     </footer>
   );