@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/components/PlatformCard.tsx

@@ -0,0 +1,109 @@
+/* A publishing platform card: check and uncheck, the connected account (photo and @), and below
+   whatever the caller wants to show (published link, error, reason). Multi-select: each one toggles
+   on its own. Without a connected account the card locks, unless `unlocked` (auto-publishing picks
+   before connecting). `published`: the video is already up on this platform; the card stays
+   locked, light emerald, with the check. Used in the Publish stage and in auto-publishing settings. */
+
+import { useState, type ReactNode } from "react";
+import { platformName, type PlatformId } from "../lib/platforms";
+import type { PlatformAccount } from "../types/api";
+import { PlatformIcon } from "./PlatformIcon";
+import { Checkbox } from "./ui/checkbox";
+import { Skeleton } from "./ui/skeleton";
+
+/* the account photo; without one (or if it fails to load), the initial */
+function AccountAvatar({ account }: { account?: PlatformAccount }) {
+  const [failed, setFailed] = useState(false);
+  const label = account?.name ?? account?.username ?? "";
+  if (account?.avatar && !failed) {
+    return (
+      <img
+        className="avatar"
+        src={account.avatar}
+        alt=""
+        referrerPolicy="no-referrer"
+        loading="lazy"
+        onError={() => setFailed(true)}
+      />
+    );
+  }
+  return (
+    <span className="avatar empty" aria-hidden="true">
+      {label.replace(/^@/, "").charAt(0).toUpperCase() || "?"}
+    </span>
+  );
+}
+
+export function PlatformCard({
+  id,
+  account,
+  loading,
+  checked,
+  onChange,
+  disabled,
+  unlocked,
+  published,
+  children,
+}: {
+  id: PlatformId;
+  account?: PlatformAccount;
+  loading?: boolean;
+  checked: boolean;
+  onChange: (v: boolean) => void;
+  disabled?: boolean;
+  unlocked?: boolean;
+  published?: boolean;
+  children?: ReactNode;
+}) {
+  const name = platformName(id);
+  const ready = !!account?.ready;
+  const blocked = disabled || published || (!unlocked && !ready);
+  const accountName = account?.name && account.name !== account.username ? account.name : null;
+  return (
+    <div
+      className={`platform-card ${checked && !published ? "checked" : ""} ${blocked ? "blocked" : ""} ${published ? "published" : ""}`}
+    >
+      <label className="platform-card-choice">
+        <Checkbox
+          className="platform-card-input"
+          checked={checked && !published}
+          disabled={blocked}
+          onCheckedChange={onChange}
+          aria-label={published ? `Já publicado no ${name}` : `Publicar no ${name}`}
+        />
+        <span className="platform-card-top">
+          <PlatformIcon id={id} />
+          <b>{name}</b>
+          <span className="platform-card-check" aria-hidden="true">
+            <svg viewBox="0 0 16 16" width="12" height="12">
+              <path
+                d="M3.5 8.5l3 3 6-7"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </span>
+        </span>
+        <span className="platform-card-account">
+          {ready ? (
+            <>
+              <AccountAvatar account={account} />
+              <span className="platform-card-who">
+                <span>{account?.username ?? account?.name ?? account?.account}</span>
+                {accountName && account?.username && <small>{accountName}</small>}
+              </span>
+            </>
+          ) : loading ? (
+            <Skeleton className="row" aria-busy="true" style={{ width: 130 }} />
+          ) : (
+            <span className="subtle">Não conectado</span>
+          )}
+        </span>
+      </label>
+      {children && <div className="platform-card-footer">{children}</div>}
+    </div>
+  );
+}

package/studio/web/components/PlatformIcon.tsx

@@ -0,0 +1,19 @@
+import type { PlatformId } from "../lib/platforms";
+
+/* the brand drawings (Simple Icons, 24×24) */
+export const PLATFORM_GLYPH: Record<PlatformId, string> = {
+  youtube:
+    "M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z",
+  instagram:
+    "M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077",
+  tiktok:
+    "M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z",
+};
+
+export function PlatformIcon({ id, size = 18 }: { id: PlatformId; size?: number }) {
+  return (
+    <svg className={`platform-icon ${id}`} viewBox="0 0 24 24" width={size} height={size} aria-hidden="true">
+      <path d={PLATFORM_GLYPH[id]} fill="currentColor" />
+    </svg>
+  );
+}

package/studio/web/components/ProviderCard.tsx

@@ -0,0 +1,80 @@
+/* A provider card (multi-select). The whole card is the checkbox; the name is a link to the
+   provider's site and sits on top of it. `children` is what the checked card shows below
+   (Voice ID, order, details). */
+
+import type { ReactNode } from "react";
+import { PROVIDER_ACCOUNT_URL } from "../lib/providers";
+import { ArrowUpRight, Check } from "./icons";
+import { ProviderLogo } from "./ProviderLogo";
+
+export function ProviderCard({
+  id,
+  name,
+  checked,
+  has,
+  subtitle,
+  alert = false,
+  disabled,
+  onToggle,
+  start,
+  end,
+  selectable = true,
+  inactive = false,
+  children,
+}: {
+  id: string;
+  name: string;
+  checked: boolean;
+  has: boolean;
+  subtitle: string;
+  /* the subtitle is a problem (e.g. the plan doesn't allow cloning): shown in the warning color */
+  alert?: boolean;
+  disabled?: boolean;
+  onToggle: () => void;
+  /* controls on the card row, over the checkbox: before the logo and after the name */
+  start?: ReactNode;
+  end?: ReactNode;
+  /* false: no checkbox (provider not connected yet) */
+  selectable?: boolean;
+  /* the provider's service is down: the card is dimmed */
+  inactive?: boolean;
+  children?: ReactNode;
+}) {
+  const account = PROVIDER_ACCOUNT_URL[id];
+  return (
+    <div className={`provider-card${checked ? " checked" : ""}${has ? "" : " unset"}${inactive ? " inactive" : ""}`}>
+      <div className="provider-card-row">
+        {selectable && (
+          <button
+            type="button"
+            role="checkbox"
+            aria-checked={checked}
+            aria-label={name}
+            className="provider-card-toggle"
+            disabled={disabled}
+            onClick={onToggle}
+          />
+        )}
+        {start}
+        <ProviderLogo id={id} size={32} />
+        <span className="provider-card-name">
+          {account ? (
+            <a href={account} target="_blank" rel="noreferrer">
+              {name} <ArrowUpRight weight="bold" className="ic" />
+            </a>
+          ) : (
+            <b>{name}</b>
+          )}
+          <small className={alert ? "warning" : undefined}>{subtitle}</small>
+        </span>
+        {end && <span className="provider-card-actions">{end}</span>}
+        {selectable && (
+          <span className="provider-card-mark" aria-hidden="true">
+            {checked && <Check weight="bold" />}
+          </span>
+        )}
+      </div>
+      {checked && children && <div className="provider-card-extra">{children}</div>}
+    </div>
+  );
+}

package/studio/web/components/ProviderDetail.tsx

@@ -0,0 +1,367 @@
+/* The voice provider inside the voice modal, the same on creation (CloneVoiceDialog) and on edit
+   (EditVoiceDialog): the provider view, which takes the left half with the API key, the model and
+   the Voice ID. */
+
+import { useEffect, useRef, useState } from "react";
+import { useClonePlan } from "../hooks/useClonePlan";
+import { useServices } from "../hooks/useServices";
+import { api, enc, errorText, read, send } from "../lib/api";
+import { audioDuration } from "../lib/audio";
+import { blobToBase64 } from "../lib/files";
+import { hasProviderKey, PROVIDER_NAME, type VoiceProviderId } from "../lib/providers";
+import type { Settings } from "../types/api";
+import { ApiKeyField } from "./ApiKeyField";
+import { FishModelSetting } from "./FishModelSetting";
+import { FishPriceSetting } from "./FishPriceSetting";
+import { Microphone, UploadSimple } from "./icons";
+import { SampleList, type SampleItem } from "./SampleList";
+import { Checkbox } from "./ui/checkbox";
+
+const MAX_FILE = 10 * 1024 ** 2;
+
+type Recording = { ok: boolean; seconds?: number; url?: string };
+type PickedFile = SampleItem & { file: File };
+type Clonable = "fish" | "cartesia" | "elevenlabs";
+
+/* Clone this voice on the provider (Fish, Cartesia or ElevenLabs), right below the Voice ID and
+   separated from it by "ou": when the clone failed there, was never made or the user wants to
+   redo it. The voice's stored recording becomes a row of the audio list, with play and "Clonar
+   voz" in the duration's place; a voice without a recording (Voice ID only) asks for a 30 s to
+   3 min audio. The server writes the new Voice ID into the voice (api/services/clone.ts: recreate). */
+function CreateOnProvider({
+  provider,
+  profile,
+  hasKey,
+  hasId,
+  onCreated,
+}: {
+  provider: Clonable;
+  profile: string;
+  hasKey: boolean;
+  hasId: boolean;
+  onCreated: (id: string) => void;
+}) {
+  const name = PROVIDER_NAME[provider];
+  const [recording, setRecording] = useState<Recording | null>(null);
+  const [files, setFiles] = useState<PickedFile[]>([]);
+  const [consent, setConsent] = useState(false);
+  const [confirm, setConfirm] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const [playing, setPlaying] = useState<string | null>(null);
+  const [result, setResult] = useState<{ ok: boolean; output?: string; error?: string; warnings?: string[] } | null>(
+    null,
+  );
+  const input = useRef<HTMLInputElement>(null);
+  const player = useRef<HTMLAudioElement | null>(null);
+  const urls = useRef<string[]>([]);
+
+  const readRecording = () =>
+    read(api.settings.clone.recording[":profile"].$get({ param: { profile: enc(profile) } }))
+      .then(setRecording)
+      .catch(() => setRecording({ ok: false }));
+  useEffect(() => {
+    readRecording();
+  }, [profile]);
+  /* leaving the screen stops the audio and releases the picked files */
+  useEffect(
+    () => () => {
+      player.current?.pause();
+      urls.current.forEach(u => URL.revokeObjectURL(u));
+    },
+    [],
+  );
+
+  const plan = useClonePlan();
+  const blocked = provider === "cartesia" ? plan.cartesia : null;
+  const stored: SampleItem | null =
+    recording?.ok && recording.url
+      ? { id: "recording", name: "Gravação desta voz", s: recording.seconds ?? 0, url: recording.url }
+      : null;
+  const hasRecording = !!stored;
+  const ready = hasKey && !creating && recording !== null && (hasRecording || (files.length > 0 && consent));
+
+  function listen(m: SampleItem) {
+    player.current?.pause();
+    if (playing === m.id) {
+      setPlaying(null);
+      return;
+    }
+    const p = new Audio(m.url);
+    p.onended = () => setPlaying(null);
+    player.current = p;
+    setPlaying(m.id);
+    p.play().catch(() => setPlaying(null));
+  }
+
+  async function pick(list: FileList | null) {
+    const added: PickedFile[] = [];
+    for (const f of Array.from(list ?? [])) {
+      if (f.size > MAX_FILE) continue;
+      const url = URL.createObjectURL(f);
+      urls.current.push(url);
+      added.push({ id: url, name: f.name, s: await audioDuration(url), url, file: f });
+    }
+    setFiles(l => [...l, ...added]);
+  }
+
+  function remove(id: string) {
+    if (playing === id) {
+      player.current?.pause();
+      setPlaying(null);
+    }
+    setFiles(l => l.filter(m => m.id !== id));
+  }
+
+  async function create() {
+    /* cloning again swaps this voice's Voice ID: asks for a second click */
+    if (hasId && !confirm) {
+      setConfirm(true);
+      return;
+    }
+    setConfirm(false);
+    setCreating(true);
+    setResult(null);
+    player.current?.pause();
+    setPlaying(null);
+    try {
+      const samples = hasRecording
+        ? []
+        : await Promise.all(files.map(async m => ({ mime: m.file.type, data: await blobToBase64(m.file) })));
+      const r = await send(api.settings.clone.recreate.$post({ json: { profile, provider, samples, consent } }));
+      setResult(r);
+      if (r.ok && r.voice_id) {
+        setFiles([]);
+        setConsent(false);
+        readRecording();
+        onCreated(r.voice_id);
+      }
+    } catch (e) {
+      setResult({ ok: false, error: errorText(e) });
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  const button = (
+    <button
+      type="button"
+      className={`button small ${confirm ? "danger" : "primary"}`}
+      disabled={!ready}
+      onClick={create}
+    >
+      <Microphone className="ic" /> {creating ? "Clonando…" : confirm ? "Trocar o Voice ID?" : "Clonar voz"}
+    </button>
+  );
+  return (
+    <div className="create-on-provider">
+      <div className="or-divider">Ou</div>
+      {!hasKey ? (
+        <small className="subtle warning">Grave a API key acima para clonar a voz na {name}.</small>
+      ) : recording === null ? null : stored ? (
+        <SampleList items={[stored]} playing={playing} onListen={listen} action={() => button} />
+      ) : (
+        <>
+          {files.length > 0 && (
+            <SampleList items={files} playing={playing} onListen={listen} onDelete={remove} disabled={creating} />
+          )}
+          <div className="create-on-provider-actions">
+            <button type="button" className="button pill" disabled={creating} onClick={() => input.current?.click()}>
+              <UploadSimple className="ic" /> Enviar áudio
+            </button>
+            {files.length > 0 && button}
+          </div>
+          <input
+            ref={input}
+            type="file"
+            accept="audio/*,video/webm"
+            multiple
+            hidden
+            onChange={e => {
+              pick(e.target.files);
+              e.target.value = "";
+            }}
+          />
+          {files.length > 0 && (
+            <label className="check-toggle clone-consent">
+              <Checkbox checked={consent} disabled={creating} onCheckedChange={setConsent} />
+              <span>Esta é a minha voz, ou tenho a permissão de quem fala. O áudio é enviado à {name}.</span>
+            </label>
+          )}
+        </>
+      )}
+      {creating && <small className="subtle">Clonando… leva de 10 a 60 s</small>}
+      {/* the plan is known before the click; after trying, what the provider answered counts */}
+      {hasKey && blocked && !result && <p className="response error">{blocked}</p>}
+      {result && <p className={`response ${result.ok ? "ok" : "error"}`}>{result.ok ? result.output : result.error}</p>}
+      {result?.warnings?.map((x, i) => (
+        <p key={i} className="hint warning">
+          {x}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+/* what each provider asks for, from inside the voice; keys come stacked, without the label column */
+export function ProviderDetail({
+  provider,
+  settings,
+  reload,
+  id,
+  onIdChange,
+  next,
+  noId = false,
+  onClone,
+}: {
+  provider: VoiceProviderId;
+  settings: Settings;
+  reload: () => void;
+  id: string;
+  onIdChange: (v: string) => void;
+  next: string | null;
+  /* the Voice ID is already on the card (EditVoiceDialog): only the key and the rest here */
+  noId?: boolean;
+  /* an existing voice (EditVoiceDialog): the voice can be cloned here, on Fish, Cartesia and ElevenLabs */
+  onClone?: { profile: string; onCreated: (id: string) => void };
+}) {
+  const vs = useServices()?.voicestudio;
+  const v = settings.voice;
+  const create = onClone && !noId && provider !== "voicestudio" && (
+    <CreateOnProvider
+      key={`${onClone.profile}:${provider}`}
+      provider={provider}
+      profile={onClone.profile}
+      hasKey={hasProviderKey(settings, provider)}
+      hasId={!!id.trim()}
+      onCreated={onClone.onCreated}
+    />
+  );
+  if (provider === "fish") {
+    return (
+      <div className="provider-detail">
+        <ApiKeyField
+          keyStatus={v.fish.key}
+          label="API key"
+          help="fish.audio → API Keys. Vale para todas as vozes da Fish"
+          onSave={reload}
+          stacked
+        />
+        {!noId && (
+          <label className="field">
+            <span>
+              Voice ID <em>O reference_id do modelo de voz clonado</em>
+            </span>
+            <input
+              className="mono"
+              value={id}
+              onChange={e => onIdChange(e.target.value)}
+              spellCheck={false}
+              placeholder="32 caracteres hexadecimais"
+            />
+          </label>
+        )}
+        {create}
+        <FishModelSetting fish={v.fish} next={next} onSave={reload} />
+        <details className="provider-advanced">
+          <summary>Custo (estimativa da tela Uso)</summary>
+          <FishPriceSetting current={v.fish.usd_per_million_bytes} onSave={reload} />
+        </details>
+      </div>
+    );
+  }
+  if (provider === "cartesia") {
+    return (
+      <div className="provider-detail">
+        <ApiKeyField
+          keyStatus={v.cartesia.key}
+          label="API key"
+          help="play.cartesia.ai → API Keys. Vale para todas as vozes da Cartesia"
+          onSave={reload}
+          stacked
+        />
+        <ApiKeyField
+          keyStatus={v.cartesia.admin_key}
+          label="API key admin"
+          onSave={reload}
+          stacked
+          required
+          help={
+            <>
+              <code>sk_car_admin_…</code>, em play.cartesia.ai → API Keys: lê o consumo para a tela Uso
+            </>
+          }
+        />
+        {!noId && (
+          <label className="field">
+            <span>
+              Voice ID <em>UUID da voz clonada</em>
+            </span>
+            <input
+              className="mono"
+              value={id}
+              onChange={e => onIdChange(e.target.value)}
+              spellCheck={false}
+              placeholder="xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
+            />
+          </label>
+        )}
+        {create}
+      </div>
+    );
+  }
+  if (provider === "elevenlabs") {
+    return (
+      <div className="provider-detail">
+        <ApiKeyField
+          keyStatus={v.elevenlabs.key}
+          label="API key"
+          help="elevenlabs.io → Developers → API Keys. Vale para todas as vozes da ElevenLabs"
+          onSave={reload}
+          stacked
+        />
+        {!noId && (
+          <label className="field">
+            <span>
+              Voice ID <em>O voice_id da voz, em Voices → ⋯ → Copy voice ID</em>
+            </span>
+            <input
+              className="mono"
+              value={id}
+              onChange={e => onIdChange(e.target.value)}
+              spellCheck={false}
+              placeholder="20 letras e números"
+            />
+          </label>
+        )}
+        {create}
+      </div>
+    );
+  }
+  if (noId) {
+    return (
+      <p className="hint">
+        O VoiceStudio roda nesta máquina e precisa estar aberto.{" "}
+        {vs ? (vs.ok ? "Está no ar agora." : "Está fechado agora.") : ""}
+      </p>
+    );
+  }
+  return (
+    <div className="provider-detail">
+      <label className="field">
+        <span>
+          Perfil no VoiceStudio <em>Pelo nome</em>
+        </span>
+        <input
+          value={id}
+          onChange={e => onIdChange(e.target.value)}
+          spellCheck={false}
+          placeholder={v.voicestudio.profile ?? "nome do perfil"}
+        />
+        <small>
+          O VoiceStudio roda nesta máquina e precisa estar aberto.{" "}
+          {vs ? (vs.ok ? "Está no ar agora." : "Está fechado agora.") : ""}
+        </small>
+      </label>
+    </div>
+  );
+}

package/studio/web/components/ProviderLogo.tsx

@@ -0,0 +1,20 @@
+/* Each voice provider's mark, the real files from each site (in web/assets/logos):
+   - elevenlabs.svg  elevenlabs.io/icon.svg (the site icon)
+   - cartesia.svg    cartesia.ai/favicon.svg
+   - fish.svg        the vector mark of the fish.audio header, on a white square
+                     (transparent on the site; their favicon.svg is an embedded PNG)
+   - voicestudio.svg the local app favicon (VoiceStudio/electron/public)
+   Drawings unchanged, only Fish's white square. */
+
+import elevenlabs from "../assets/logos/elevenlabs.svg";
+import cartesia from "../assets/logos/cartesia.svg";
+import fish from "../assets/logos/fish.svg";
+import voicestudio from "../assets/logos/voicestudio.svg";
+
+const FILE: Record<string, string> = { elevenlabs, cartesia, fish, voicestudio };
+
+export function ProviderLogo({ id, size = 28 }: { id: string; size?: number }) {
+  const src = FILE[id];
+  if (!src) return null;
+  return <img className="provider-logo" src={src} width={size} height={size} alt="" draggable={false} />;
+}

package/studio/web/components/QueuePanel.tsx

@@ -0,0 +1,77 @@
+import { Link } from "@tanstack/react-router";
+import { useQueue } from "../hooks/useQueue";
+import type { Ticket } from "../types/api";
+import { FinishedTask } from "./FinishedTask";
+import { ArrowRight } from "./icons";
+import { RunningTask } from "./RunningTask";
+import { Panel } from "./ui/panel";
+import { Skeleton } from "./ui/skeleton";
+import { WaitList } from "./WaitList";
+
+/* the queue has not arrived yet: the panel with its real title, the running task and the recent list */
+export function QueuePanelSkeleton({ video }: { video?: string }) {
+  return (
+    <Panel title={video ? "Fila deste vídeo" : "Fila da máquina"} className="queue-panel">
+      <Skeleton style={{ height: 56, borderRadius: "var(--radius)" }} />
+      <div className="block">
+        <h3>Últimas</h3>
+        <ul className="done-list">
+          {Array.from({ length: 3 }, (_, i) => (
+            <li key={i}>
+              <Skeleton className="row" style={{ width: `${70 - i * 12}%` }} />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </Panel>
+  );
+}
+
+/* `video`: a video dir; only its tickets */
+export function QueuePanel({ recent = 6, video }: { recent?: number; video?: string }) {
+  const queue = useQueue();
+  if (!queue) return <QueuePanelSkeleton video={video} />;
+  const ofThis = (t: Ticket) => !video || t.dir === video;
+  const running = queue.running.filter(ofThis);
+  const waiting = queue.waiting.filter(ofThis);
+  const done = queue.recent.filter(ofThis).slice(0, recent);
+  const summary = `${queue.running.length ? `${queue.running.length} rodando` : "livre"}${queue.waiting.length ? ` · ${queue.waiting.length} esperando` : ""}`;
+  return (
+    <Panel
+      title={video ? "Fila deste vídeo" : "Fila da máquina"}
+      extra={
+        <Link to="/queue" className="subtle">
+          {summary} <ArrowRight className="ic" />
+        </Link>
+      }
+      className="queue-panel"
+    >
+      {running.map(t => (
+        <RunningTask key={t.id} ticket={t} />
+      ))}
+      {!running.length && (
+        <p className="empty">
+          {video
+            ? "Nada deste vídeo rodando agora."
+            : "Nenhuma tarefa pesada rodando. Voz, legenda, render, som e montagem passam por aqui, venham do chat, do terminal ou do studio."}
+        </p>
+      )}
+      {waiting.length > 0 && (
+        <div className="block">
+          <h3>Esperando a vez</h3>
+          <WaitList queue={waiting} all={queue.waiting} />
+        </div>
+      )}
+      {done.length > 0 && (
+        <div className="block">
+          <h3>Últimas</h3>
+          <ul className="done-list">
+            {done.map(t => (
+              <FinishedTask key={t.id} ticket={t} />
+            ))}
+          </ul>
+        </div>
+      )}
+    </Panel>
+  );
+}