@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/components/AvatarPicker.tsx

@@ -0,0 +1,84 @@
+/* The avatar picker (cloning a voice): the Settings carousel, smaller. The center avatar is the
+   chosen one, without a ring, and the neighbors are smaller and lighter. */
+
+import type { RefObject } from "react";
+import { ArrowLeft, ArrowRight } from "./icons";
+import { VoiceAvatar } from "./VoiceAvatar";
+
+export function AvatarPicker({
+  options,
+  index,
+  onChange,
+  disabled,
+  rootRef,
+}: {
+  options: string[];
+  index: number;
+  onChange: (i: number) => void;
+  disabled?: boolean;
+  /* the picker root, so whoever plays the voice animates the center avatar straight in the DOM */
+  rootRef?: RefObject<HTMLDivElement | null>;
+}) {
+  const last = options.length - 1;
+  const go = (i: number) => {
+    if (!disabled) onChange(Math.max(0, Math.min(last, i)));
+  };
+  return (
+    <div
+      ref={rootRef}
+      className="carousel compact"
+      tabIndex={0}
+      role="group"
+      aria-label="Avatar da voz"
+      onKeyDown={e => {
+        if (e.key === "ArrowLeft") {
+          e.preventDefault();
+          go(index - 1);
+        }
+        if (e.key === "ArrowRight") {
+          e.preventDefault();
+          go(index + 1);
+        }
+      }}
+    >
+      <div className="carousel-canvas">
+        <div className="carousel-window">
+          <div className="carousel-rail" style={{ transform: `translateX(calc(${-(index + 0.5)} * var(--slot)))` }}>
+            {options.map((seed, i) => (
+              <button
+                key={seed}
+                type="button"
+                className={`carousel-item d${Math.min(Math.abs(i - index), 3)}`}
+                onClick={() => go(i)}
+                aria-label={`Avatar ${i + 1} de ${options.length}`}
+                aria-current={i === index}
+                tabIndex={-1}
+                disabled={disabled}
+              >
+                <VoiceAvatar seed={seed} size={112} />
+              </button>
+            ))}
+          </div>
+        </div>
+        <button
+          type="button"
+          className="carousel-arrow start"
+          onClick={() => go(index - 1)}
+          disabled={disabled || index === 0}
+          aria-label="Avatar anterior"
+        >
+          <ArrowLeft weight="bold" />
+        </button>
+        <button
+          type="button"
+          className="carousel-arrow end"
+          onClick={() => go(index + 1)}
+          disabled={disabled || index >= last}
+          aria-label="Próximo avatar"
+        >
+          <ArrowRight weight="bold" />
+        </button>
+      </div>
+    </div>
+  );
+}

package/studio/web/components/BrandLogo.tsx

@@ -0,0 +1,16 @@
+import white from "../assets/logos/omni-white.png";
+import black from "../assets/logos/omni-black.png";
+
+/* the menu brand: the blurred ring and "Omni" in the app font. The ring is the same in both
+   versions, no background: black on the light theme, white on the dark one */
+export function BrandLogo() {
+  return (
+    <span className="brand-logo">
+      <picture>
+        <source srcSet={white} media="(prefers-color-scheme: dark)" />
+        <img className="brand-icon" src={black} alt="" />
+      </picture>
+      <span className="brand-omni">Omni</span>
+    </span>
+  );
+}

package/studio/web/components/CartesiaPlanSetting.tsx

@@ -0,0 +1,90 @@
+import { useEffect, useState } from "react";
+import { useSaveAction } from "../hooks/useSaveAction";
+import { api } from "../lib/api";
+import type { Settings } from "../types/api";
+import { FloppyDisk } from "./icons";
+import { ResultMessage } from "./ResultMessage";
+import { SettingRow } from "./SettingRow";
+import { Picker } from "./ui/picker";
+
+/* Cartesia's API returns what was used, never the plan: the quota comes from the plan chosen here */
+export const CARTESIA_PLANS = [
+  { id: "free", name: "Free", quota: 20_000 },
+  { id: "pro", name: "Pro · US$ 5", quota: 100_000 },
+  { id: "startup", name: "Startup · US$ 49", quota: 1_250_000 },
+  { id: "scale", name: "Scale · US$ 299", quota: 8_000_000 },
+];
+
+export function CartesiaPlanSetting({
+  cartesia: c,
+  onSave,
+}: {
+  cartesia: Settings["voice"]["cartesia"];
+  onSave: () => void;
+}) {
+  const { result, saving, save } = useSaveAction(onSave);
+  const [plan, setPlan] = useState(c.plan);
+  const [quota, setQuota] = useState(String(c.monthly_quota));
+  const [day, setDay] = useState(String(c.cycle_day));
+  useEffect(() => {
+    setPlan(c.plan);
+    setQuota(String(c.monthly_quota));
+    setDay(String(c.cycle_day));
+  }, [c.plan, c.monthly_quota, c.cycle_day]);
+  const changed =
+    plan !== c.plan || day !== String(c.cycle_day) || (plan === "other" && quota !== String(c.monthly_quota));
+  return (
+    <SettingRow
+      label="Plano"
+      help="A API não informa o plano: o saldo da tela Uso é a cota abaixo menos o consumido que ela lê"
+    >
+      <form
+        className="setting-row"
+        onSubmit={e => {
+          e.preventDefault();
+          if (changed) save(() => api.settings["cartesia-plan"].$post({ json: { plan, quota, day } }));
+        }}
+      >
+        <Picker
+          aria-label="Plano da Cartesia"
+          value={plan}
+          disabled={saving}
+          onChange={setPlan}
+          options={[
+            ...CARTESIA_PLANS.map(p => ({
+              value: p.id,
+              label: `${p.name} · ${p.quota.toLocaleString("pt-BR")} créditos/mês`,
+            })),
+            { value: "other", label: "Outro (Enterprise ou cota própria)" },
+          ]}
+        />
+        {plan === "other" && (
+          <input
+            className="short"
+            inputMode="numeric"
+            aria-label="Créditos por mês"
+            value={quota}
+            onChange={e => setQuota(e.target.value)}
+            disabled={saving}
+          />
+        )}
+        <span className="subtle">Renova no dia</span>
+        <input
+          className="short"
+          inputMode="numeric"
+          aria-label="Dia da renovação"
+          value={day}
+          onChange={e => setDay(e.target.value)}
+          disabled={saving}
+        />
+        <button className="button" type="submit" disabled={saving || !changed}>
+          <FloppyDisk className="ic" /> {saving ? "Gravando…" : "Gravar"}
+        </button>
+      </form>
+      <p className="hint">
+        O dia da renovação é o da cobrança do plano (play.cartesia.ai → Billing): o ciclo do consumo começa nele.
+      </p>
+      <ResultMessage result={result} />
+    </SettingRow>
+  );
+}

package/studio/web/components/ClaudeWalking.tsx

@@ -0,0 +1,32 @@
+/* Claude Code's Claude in pixels, walking: the "Claude working" mark across the UI. The grid comes
+   from the terminal block drawing (▐▛███▜▌ / ▝▜█████▛▘ / ▘▘ ▝▝), each half block one pixel:
+   18 × 5, and the pixel is twice as tall as wide, like the half block in the terminal. It walks
+   with CSS only (legs alternating, body going up 1 px each step, arms, blink) and stops with
+   "reduce motion". */
+
+const row = (y: number, xs: number[]) => xs.map(x => <rect key={`${x}-${y}`} x={x} y={y} width={1} height={1} />);
+const range = (a: number, b: number) => Array.from({ length: b - a + 1 }, (_, i) => a + i);
+
+export function ClaudeWalking({ className = "" }: { className?: string }) {
+  return (
+    <svg
+      className={`claude-walking ${className}`}
+      viewBox="0 -1 18 6"
+      preserveAspectRatio="none"
+      shapeRendering="crispEdges"
+      aria-hidden="true"
+    >
+      <g className="cw-body">
+        {row(0, range(3, 14))}
+        {row(1, [3, 4, ...range(6, 11), 13, 14])}
+        <g className="cw-eyes">{row(1, [5, 12])}</g>
+        {row(2, range(2, 15))}
+        <g className="cw-arms-down">{row(2, [1, 16])}</g>
+        <g className="cw-arms-up">{row(1, [1, 16])}</g>
+        {row(3, range(3, 14))}
+      </g>
+      <g className="cw-step-a">{row(4, [4, 6, 11, 13])}</g>
+      <g className="cw-step-b">{row(4, [3, 5, 12, 14])}</g>
+    </svg>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { memo, useEffect, useRef } from "react";
+
+/* the reading script: words already "called" turn full color, one by one, at PACE, and the scroll
+   follows so the next one never leaves the screen */
+export const GuidedScript = memo(function GuidedScript({
+  words,
+  upTo,
+  className,
+  hidden,
+}: {
+  words: string[];
+  upTo: number;
+  className: string;
+  hidden: boolean;
+}) {
+  const box = useRef<HTMLParagraphElement>(null);
+  useEffect(() => {
+    const c = box.current;
+    if (!c) return;
+    if (upTo === 0) {
+      c.scrollTo({ top: 0 });
+      return;
+    }
+    const w = c.children[upTo - 1] as HTMLElement | undefined;
+    if (!w) return;
+    const inside = w.getBoundingClientRect().top - c.getBoundingClientRect().top;
+    if (inside > c.clientHeight * 0.55)
+      c.scrollTo({ top: c.scrollTop + inside - c.clientHeight * 0.25, behavior: "smooth" });
+  }, [upTo]);
+  return (
+    <p ref={box} className={className} aria-hidden={hidden}>
+      {words.map((w, i) => (
+        <span key={i} className={i < upTo ? "read" : undefined}>
+          {w}{" "}
+        </span>
+      ))}
+    </p>
+  );
+});

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

@@ -0,0 +1,37 @@
+import { ArrowRight } from "../icons";
+import { Picker } from "../ui/picker";
+import type { CloneContext } from "./types";
+
+/* recording step 1: the language of the speech (it picks the script), then the microphone */
+export function LanguageBar({
+  contexts,
+  value,
+  onChange,
+  onContinue,
+  creating,
+}: {
+  contexts: CloneContext[];
+  value: string;
+  onChange: (id: string) => void;
+  onContinue: () => void;
+  creating: boolean;
+}) {
+  return (
+    <footer className="clone-bar language">
+      <label className="clone-language-field">
+        <span className="subtle">Idioma da sua fala</span>
+        <Picker
+          aria-label="Idioma da sua fala"
+          className="clone-language"
+          value={value}
+          disabled={creating}
+          onChange={onChange}
+          options={contexts.map(c => ({ value: c.id, label: c.name }))}
+        />
+      </label>
+      <button type="button" className="button pill primary" onClick={onContinue} disabled={creating}>
+        <ArrowRight className="ic" /> Continuar
+      </button>
+    </footer>
+  );
+}

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

@@ -0,0 +1,31 @@
+import { MAX_S, MIN_S } from "../../lib/clone-voice";
+import { formatSecondsComma } from "../../lib/format";
+
+/* the meter arc: 220° on top, dotted, and the part already filled in solid */
+const ARC = "M 21.7 91.2 A 62 62 0 1 1 138.3 91.2";
+const ARC_LEN = (62 * (220 * Math.PI)) / 180;
+
+export function LevelMeter({ s }: { s: number }) {
+  const frac = Math.min(1, s / MAX_S);
+  return (
+    <div
+      className={`clone-meter${s >= MIN_S ? " ok" : ""}`}
+      role="img"
+      aria-label={`${formatSecondsComma(s)} de fala, de ${MIN_S} s a 3 min`}
+    >
+      <svg viewBox="0 0 160 100" aria-hidden="true">
+        <path d={ARC} className="trail" />
+        <path d={ARC} className="filled" style={{ strokeDasharray: `${ARC_LEN * frac} ${ARC_LEN}` }} />
+      </svg>
+      <span className="orb" style={{ transform: `scale(${0.9 + 0.1 * frac})` }}>
+        <i className="orb-body" />
+      </span>
+      <span className="label min">
+        Mín.<small>{MIN_S} s</small>
+      </span>
+      <span className="label max">
+        Máx.<small>3 min</small>
+      </span>
+    </div>
+  );
+}

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

@@ -0,0 +1,81 @@
+import { type CloneProviderId, PROVIDERS } from "../../lib/clone-voice";
+import type { VoiceProviderId } from "../../lib/providers";
+import { Checkbox } from "../ui/checkbox";
+import { VoiceProviderCard } from "../VoiceProviderCard";
+
+/* the "Salvar voz" step of a new voice: where to clone (cards in priority order) and the consent */
+export function ProviderChoice({
+  hasFish,
+  hasCartesia,
+  fish,
+  cartesia,
+  onFishChange,
+  onCartesiaChange,
+  planError,
+  order,
+  onMove,
+  onConfigure,
+  consent,
+  onConsentChange,
+  creating,
+}: {
+  hasFish: boolean;
+  hasCartesia: boolean;
+  fish: boolean;
+  cartesia: boolean;
+  onFishChange: (v: boolean) => void;
+  onCartesiaChange: (v: boolean) => void;
+  /* the Cartesia plan without API cloning */
+  planError: string | null;
+  order: string[];
+  onMove: (i: number, d: -1 | 1) => void;
+  onConfigure: (id: CloneProviderId) => void;
+  consent: boolean;
+  onConsentChange: (v: boolean) => void;
+  creating: boolean;
+}) {
+  return (
+    <>
+      <div className="field">
+        <span>Onde clonar</span>
+        <div className="clone-cards" role="group" aria-label="Onde clonar">
+          {PROVIDERS.map(pv => {
+            const has = pv.id === "fish" ? hasFish : hasCartesia;
+            const checked = has && (pv.id === "fish" ? fish : cartesia);
+            return (
+              <VoiceProviderCard
+                key={pv.id}
+                id={pv.id as VoiceProviderId}
+                checked={checked}
+                has={has}
+                noClone={pv.id === "cartesia" && !!planError}
+                position={order.indexOf(pv.id)}
+                total={order.length}
+                disabled={creating}
+                onToggle={() => (pv.id === "fish" ? onFishChange(!fish) : onCartesiaChange(!cartesia))}
+                onMove={d => onMove(order.indexOf(pv.id), d)}
+                onConfigure={() => onConfigure(pv.id)}
+              />
+            );
+          })}
+        </div>
+        {order.length > 1 && (
+          <small className="subtle">
+            A ordem é a prioridade: a fala sai do principal; se ele falhar, entra o primeiro fallback, e assim por
+            diante.
+          </small>
+        )}
+        {order.length === 0 && (
+          <small className="subtle warning">Conecte e marque ao menos um provedor para criar a voz.</small>
+        )}
+        {planError && hasCartesia && <p className="response error">{planError}</p>}
+      </div>
+
+      <label className="check-toggle clone-consent">
+        <Checkbox checked={consent} disabled={creating} onCheckedChange={onConsentChange} />
+        <span>Esta é a minha voz, ou tenho a permissão de quem fala. O áudio é enviado à Fish Audio e à Cartesia.</span>
+      </label>
+      {creating && <small className="subtle">Criando o clone… leva de 10 a 60 s</small>}
+    </>
+  );
+}

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

@@ -0,0 +1,62 @@
+import { MAX_S, MIN_S } from "../../lib/clone-voice";
+import { formatSecondsComma } from "../../lib/format";
+import { ArrowRight, Check } from "../icons";
+import { LevelMeter } from "./LevelMeter";
+
+/* the right of the list and recording views: how much speech there is and the button to the save step */
+export function QualityPanel({
+  measured,
+  total,
+  samples,
+  recording,
+  enough,
+  filesWithoutDuration,
+  warning,
+  redo,
+  creating,
+  onContinue,
+}: {
+  measured: number;
+  total: number;
+  /* how many samples are attached */
+  samples: number;
+  recording: boolean;
+  enough: boolean;
+  filesWithoutDuration: boolean;
+  warning: string | null;
+  redo: boolean;
+  creating: boolean;
+  onContinue: () => void;
+}) {
+  return (
+    <>
+      <LevelMeter s={measured} />
+      <p className={`clone-hint${samples && !enough ? " warning" : ""}`}>
+        {samples === 0 && !recording
+          ? `Grave ou envie de 30 s a 3 min de fala para ${redo ? "refazer" : "clonar"} a voz`
+          : filesWithoutDuration && total === 0
+            ? "Não deu para medir os arquivos; o servidor confere ao criar."
+            : measured < MIN_S
+              ? `${formatSecondsComma(measured)} de fala. Precisa de pelo menos ${MIN_S} s.`
+              : measured >= MAX_S
+                ? `${formatSecondsComma(measured)} de fala. Chegou ao limite de 3 min.`
+                : `${formatSecondsComma(measured)} de fala. Pronto para ${redo ? "refazer" : "criar"}; até 3 min.`}
+      </p>
+      {warning && <p className="response error">{warning}</p>}
+      {/* only shows when it can be created: enough speech and no recording in progress */}
+      {enough && !recording && (
+        <button type="button" className="button primary clone-create" disabled={creating} onClick={onContinue}>
+          {redo ? (
+            <>
+              <ArrowRight weight="bold" className="ic" /> Continuar
+            </>
+          ) : (
+            <>
+              <Check weight="bold" className="ic" /> Criar voz
+            </>
+          )}
+        </button>
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { ArrowLeft } from "../icons";
+import { GuidedScript } from "./GuidedScript";
+import { LanguageBar } from "./LanguageBar";
+import { RecorderBar } from "./RecorderBar";
+import type { CloneVoiceState } from "./useCloneVoice";
+
+/* the left of the recording view: the script to read, under the language choice, then the recorder */
+export function RecordStep({ c }: { c: CloneVoiceState }) {
+  const { back, recording, words, called, languageOk, microphone, creating } = c;
+  return (
+    <>
+      <header className="clone-top">
+        <button type="button" className="button small" onClick={back} disabled={recording}>
+          <ArrowLeft weight="bold" className="ic" /> Voltar
+        </button>
+        <b>Grave lendo o roteiro</b>
+      </header>
+      <GuidedScript
+        words={words}
+        upTo={called}
+        className={`clone-script${!languageOk || microphone !== "ok" ? " blurred" : ""}`}
+        hidden={!languageOk || microphone !== "ok"}
+      />
+      {!languageOk ? (
+        <LanguageBar
+          contexts={c.contexts}
+          value={c.ctx!.id}
+          onChange={c.setContextId}
+          onContinue={c.proceed}
+          creating={creating}
+        />
+      ) : (
+        <RecorderBar
+          device={c.device}
+          devices={c.devices}
+          onDeviceChange={c.switchDevice}
+          microphone={microphone}
+          onAllowMicrophone={() => c.openMic()}
+          recording={recording}
+          elapsed={c.elapsed}
+          total={c.total}
+          level={c.level}
+          creating={creating}
+          onStart={c.start}
+          onStop={c.stop}
+        />
+      )}
+    </>
+  );
+}

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

@@ -0,0 +1,79 @@
+import { clock, MAX_S } from "../../lib/clone-voice";
+import { Circle, Microphone, Stop } from "../icons";
+import { Picker } from "../ui/picker";
+
+/* recording step 2: the microphone choice, the permission or the timer, the record button and the level */
+export function RecorderBar({
+  device,
+  devices,
+  onDeviceChange,
+  microphone,
+  onAllowMicrophone,
+  recording,
+  elapsed,
+  total,
+  level,
+  creating,
+  onStart,
+  onStop,
+}: {
+  device: string;
+  devices: MediaDeviceInfo[];
+  onDeviceChange: (id: string) => void;
+  microphone: "no" | "ok" | "denied";
+  onAllowMicrophone: () => void;
+  recording: boolean;
+  elapsed: number;
+  total: number;
+  level: number;
+  creating: boolean;
+  onStart: () => void;
+  onStop: () => void;
+}) {
+  return (
+    <footer className="clone-bar">
+      <Picker
+        aria-label="Microfone"
+        className="clone-language clone-device"
+        value={device}
+        disabled={recording || creating}
+        onChange={onDeviceChange}
+        options={[
+          { value: "", label: "Microfone padrão do sistema" },
+          ...devices.map((d, i) => ({ value: d.deviceId, label: d.label || `Microfone ${i + 1}` })),
+        ]}
+      />
+      {microphone !== "ok" ? (
+        <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>
+      )}
+      <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 ? (
+          <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>
+        ) : (
+          "Sem ruído detectado"
+        )}
+      </span>
+    </footer>
+  );
+}

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

@@ -0,0 +1,54 @@
+import { PROVIDER_NAME } from "../../lib/providers";
+import { ProviderLogo } from "../ProviderLogo";
+import { Checkbox } from "../ui/checkbox";
+
+/* the "Refazer voz" step: where the clone is made again and, with new audio, the consent */
+export function RedoSummary({
+  redoOn,
+  planError,
+  redoCartesia,
+  hasNew,
+  consent,
+  onConsentChange,
+  creating,
+}: {
+  redoOn: ("fish" | "cartesia" | "elevenlabs")[];
+  /* the Cartesia plan error (shown when the voice has a Cartesia clone) */
+  planError: string | null;
+  redoCartesia: string | null | undefined;
+  hasNew: boolean;
+  consent: boolean;
+  onConsentChange: (v: boolean) => void;
+  creating: boolean;
+}) {
+  return (
+    <>
+      <div className="field">
+        <span>Refazer em</span>
+        <ul className="clone-samples">
+          {redoOn.map(p => (
+            <li key={p}>
+              <ProviderLogo id={p} size={24} />
+              <span className="clone-sample-name">{PROVIDER_NAME[p]}</span>
+            </li>
+          ))}
+        </ul>
+        <small className="subtle">
+          O clone é criado de novo com todos os áudios e a voz de antes é apagada na conta de cada provedor. O nome e a
+          ordem de prioridade ficam.
+        </small>
+        {planError && redoCartesia && <p className="response error">{planError}</p>}
+      </div>
+      {hasNew && (
+        <label className="check-toggle clone-consent">
+          <Checkbox checked={consent} disabled={creating} onCheckedChange={onConsentChange} />
+          <span>
+            Esta é a minha voz, ou tenho a permissão de quem fala. O áudio é enviado à{" "}
+            {redoOn.map(p => PROVIDER_NAME[p]).join(" e à ")}.
+          </span>
+        </label>
+      )}
+      {creating && <small className="subtle">Refazendo o clone… leva de 10 a 60 s</small>}
+    </>
+  );
+}