@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/components/EditVoiceDialog/ProviderCards.tsx

@@ -0,0 +1,81 @@
+import { hasProviderKey, PROVIDER_NAME, type VoiceProviderId } from "../../lib/providers";
+import { cardOrder, missingIds, type ProfileDraft } from "../../lib/voice-profile-draft";
+import type { Settings, VoiceProfile } from "../../types/api";
+import { VoiceProviderCard } from "../VoiceProviderCard";
+
+/* the voice's provider cards (checked ones first, in priority order) and what is still missing */
+export function ProviderCards({
+  draft: r,
+  profile,
+  settings,
+  vsClosed,
+  saving,
+  listening,
+  listeningId,
+  onListen,
+  onToggle,
+  onMove,
+  onConfigure,
+}: {
+  draft: ProfileDraft;
+  profile: VoiceProfile | undefined;
+  settings: Settings;
+  vsClosed: boolean;
+  saving: boolean;
+  listening: "generating" | "playing" | null;
+  listeningId: string | null;
+  onListen: (profile: string, provider: VoiceProviderId) => void;
+  onToggle: (p: VoiceProviderId) => void;
+  onMove: (i: number, d: -1 | 1) => void;
+  onConfigure: (p: VoiceProviderId) => void;
+}) {
+  return (
+    <>
+      <div className="clone-cards" role="group" aria-label="Provedores desta voz">
+        {/* the checked ones come in priority order, so up/down swaps the card's place */}
+        {cardOrder(r.order).map(p => {
+          const checked = r.order.includes(p);
+          const i = r.order.indexOf(p);
+          const key = profile ? `${profile.id}:${p}` : "";
+          /* the sample comes from what is saved in the voice: only a provider already saved in it plays */
+          const saved = !!profile && checked && profile.order.includes(p);
+          return (
+            <VoiceProviderCard
+              key={p}
+              id={p}
+              checked={checked}
+              has={hasProviderKey(settings, p)}
+              closed={p === "voicestudio" && vsClosed}
+              noVoice={!r.ids[p].trim()}
+              position={i}
+              total={r.order.length}
+              disabled={saving}
+              onToggle={() => onToggle(p)}
+              onMove={d => onMove(i, d)}
+              onConfigure={() => onConfigure(p)}
+              listen={
+                saved && profile
+                  ? {
+                      playing: listeningId === key && listening === "playing",
+                      busy: listening === "generating" && listeningId !== key,
+                      onListen: () => onListen(profile.id, p),
+                    }
+                  : undefined
+              }
+            />
+          );
+        })}
+      </div>
+      {r.order.length === 0 && <small className="subtle warning">Marque ao menos um provedor para esta voz.</small>}
+      {missingIds(r).length > 0 && (
+        <small className="subtle warning">
+          Falta o Voice ID de{" "}
+          {missingIds(r)
+            .map(p => PROVIDER_NAME[p])
+            .join(", ")}
+          : abra "Configurar" para criar a voz ali ou colar o Voice ID.
+        </small>
+      )}
+    </>
+  );
+}

package/studio/web/components/EditVoiceDialog/index.tsx

@@ -0,0 +1,256 @@
+/* Editar voz (and "Já tenho voz criada"), from Configurações → Voz (VoiceProfilesSettings): avatar
+   and name on the right, providers on the left. The provider card shows only the status;
+   "Configurar" opens its view (ProviderDetail) with what it asks for (API key, model, Voice ID).
+   With more than one checked, the order is the usage priority, and the next ones are fallback. API
+   key and model apply to all the provider's voices and save immediately; the Voice ID and the
+   order belong to the voice and save on "Salvar voz". */
+
+import { useRef, useState } from "react";
+import { useAvatarAudioReactive } from "../../hooks/useAvatarAudioReactive";
+import { useVoiceProfilePreview } from "../../hooks/useVoiceProfilePreview";
+import { useVoiceStudioClosed } from "../../hooks/useVoiceStudioClosed";
+import { type ActionResult, api, send } from "../../lib/api";
+import { shuffleAvatars } from "../../lib/avatars";
+import { hasProviderKey, PROVIDER_NAME, type VoiceProviderId } from "../../lib/providers";
+import { draftFromProfile, type ProfileDraft, savedIds } from "../../lib/voice-profile-draft";
+import { NAME_MAX, NAME_MIN } from "../../lib/voice-profiles";
+import type { Settings, VoiceProfile } from "../../types/api";
+import { AvatarNameField } from "../AvatarNameField";
+import { ArrowLeft } from "../icons";
+import { ProviderDetail } from "../ProviderDetail";
+import { VoiceModal } from "../VoiceModal";
+import { EditVoiceFooter } from "./EditVoiceFooter";
+import { ProviderCards } from "./ProviderCards";
+
+/* `profile` undefined: the new voice from "já tenho voz criada nos provedores" (name and Voice IDs).
+   `warnings`: the clone just failed on some provider; they stay on top until it is created again there. */
+export function EditVoiceDialog({
+  settings,
+  profile,
+  reload,
+  onClose,
+  onSave,
+  onCloneInstead,
+  onRedo,
+  onRemove,
+  warnings = [],
+}: {
+  settings: Settings;
+  profile: VoiceProfile | undefined;
+  reload: () => void;
+  onClose: () => void;
+  onSave: (id: string) => void;
+  onCloneInstead: () => void;
+  onRedo: () => void;
+  onRemove: (output: string) => void;
+  warnings?: string[];
+}) {
+  const isNew = !profile;
+  const [r, setR] = useState<ProfileDraft>(() => draftFromProfile(profile, settings.voice.voicestudio.profile));
+  const [detail, setDetail] = useState<VoiceProviderId | null>(null);
+  const [avatars, setAvatars] = useState<string[]>(() =>
+    profile ? [profile.avatar || profile.id, ...shuffleAvatars().slice(0, 9)] : shuffleAvatars(),
+  );
+  const [avatar, setAvatar] = useState(0);
+  const [saving, setSaving] = useState(false);
+  const [result, setResult] = useState<ActionResult>(null);
+  const [confirmRemove, setConfirmRemove] = useState(false);
+  const [warningsSeen, setWarningsSeen] = useState(false);
+  const root = useRef<HTMLDivElement>(null);
+  const { listening, listeningId, error: sampleError, listen, analyser } = useVoiceProfilePreview();
+  const vsClosed = useVoiceStudioClosed();
+  useAvatarAudioReactive(listening === "playing", root, analyser, rz =>
+    Array.from(rz.querySelectorAll<HTMLCanvasElement>(".carousel-item.d0 .voice-avatar")),
+  );
+
+  /* the voice may have an old name longer than the new limit: it still counts, it just doesn't grow */
+  const max = Math.max(NAME_MAX, profile?.name.length ?? 0);
+  const name = r.name.trim();
+  const nameValid = name.length >= NAME_MIN && name.length <= max;
+  const idsOk = r.order.length > 0 && r.order.every(p => r.ids[p].trim());
+  const canSave = !saving && nameValid && idsOk;
+
+  const toggle = (p: VoiceProviderId) => {
+    if (r.order.includes(p)) {
+      /* the Voice ID stays in the draft: without it the card doesn't check again; what removes it
+         from the voice is "Salvar voz", which only sends the checked ones */
+      setR({ ...r, order: r.order.filter(x => x !== p) });
+      if (detail === p) setDetail(null);
+    } else {
+      setR({ ...r, order: [...r.order, p] });
+    }
+  };
+  const move = (i: number, d: -1 | 1) => {
+    const order = [...r.order];
+    [order[i], order[i + d]] = [order[i + d], order[i]];
+    setR({ ...r, order });
+  };
+
+  const save = async () => {
+    setSaving(true);
+    setResult(null);
+    const ids = savedIds(r);
+    const resp = await send(
+      api.settings["voice-profile"].$post({
+        json: { id: profile?.id ?? "", name, order: r.order, avatar: avatars[avatar], ...ids },
+      }),
+    );
+    setSaving(false);
+    if (resp.ok) {
+      reload();
+      onSave(resp.id ?? profile?.id ?? "");
+    } else setResult(resp);
+  };
+  const remove = async () => {
+    if (!profile) return;
+    setSaving(true);
+    const resp = await send(api.settings["voice-profile"].remove.$post({ json: { id: profile.id } }));
+    setSaving(false);
+    if (resp.ok) {
+      reload();
+      onRemove(resp.output ?? "");
+    } else setResult(resp);
+  };
+  /* where the saved voice exists and will be deleted too (api/services/settings.ts: removeProfile) */
+  const deletesOn = profile
+    ? (["fish", "cartesia", "elevenlabs"] as const).filter(p => profile[p]).map(p => PROVIDER_NAME[p])
+    : [];
+
+  return (
+    <VoiceModal title={isNew ? "Já tenho voz criada" : "Editar voz"} onClose={onClose} locked={saving}>
+      {/* --- left: providers --- */}
+      <section className="clone-left" aria-label="Provedores desta voz">
+        {detail ? (
+          <header className="clone-top">
+            <button type="button" className="button small" onClick={() => setDetail(null)}>
+              <ArrowLeft weight="bold" className="ic" /> Voltar
+            </button>
+            <b>{PROVIDER_NAME[detail]}</b>
+          </header>
+        ) : isNew ? (
+          <header className="clone-top">
+            <button type="button" className="button small" onClick={onCloneInstead} disabled={saving}>
+              <ArrowLeft weight="bold" className="ic" /> Clonar a minha voz
+            </button>
+            <b>Provedores desta voz</b>
+          </header>
+        ) : (
+          <header className="clone-top">
+            <b>Provedores desta voz</b>
+          </header>
+        )}
+        <div className="clone-save">
+          {detail && (
+            <ProviderDetail
+              provider={detail}
+              settings={settings}
+              reload={reload}
+              id={r.ids[detail]}
+              onIdChange={v =>
+                setR({
+                  ...r,
+                  order: r.order.includes(detail) || !hasProviderKey(settings, detail) ? r.order : [...r.order, detail],
+                  ids: { ...r.ids, [detail]: v },
+                })
+              }
+              next={PROVIDER_NAME[r.order[r.order.indexOf(detail) + 1]] ?? null}
+              onClone={
+                profile
+                  ? {
+                      profile: profile.id,
+                      /* the server already wrote the new Voice ID into the voice; the draft follows */
+                      onCreated: v => {
+                        setR(x => ({
+                          ...x,
+                          order: x.order.includes(detail) ? x.order : [...x.order, detail],
+                          ids: { ...x.ids, [detail]: v },
+                        }));
+                        setWarningsSeen(true);
+                        reload();
+                      },
+                    }
+                  : undefined
+              }
+            />
+          )}
+          {/* right under "Provedores desta voz": how the card order counts */}
+          {!detail && r.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>
+          )}
+          {!warningsSeen &&
+            warnings.map((x, i) => (
+              <p key={i} className="response error">
+                {x}
+              </p>
+            ))}
+          {!detail && (
+            <ProviderCards
+              draft={r}
+              profile={profile}
+              settings={settings}
+              vsClosed={vsClosed}
+              saving={saving}
+              listening={listening}
+              listeningId={listeningId}
+              onListen={listen}
+              onToggle={toggle}
+              onMove={move}
+              onConfigure={setDetail}
+            />
+          )}
+          {confirmRemove && (
+            <p className="response error">
+              Remove a voz do app{deletesOn.length ? ` e apaga na conta da ${deletesOn.join(", da ")}` : ""}. Não tem
+              volta.
+            </p>
+          )}
+          {result && !result.ok && <p className="response error">{result.error}</p>}
+          {sampleError && <p className="response error">{sampleError}</p>}
+        </div>
+        <EditVoiceFooter
+          hasProfile={!!profile}
+          isNew={isNew}
+          confirmRemove={confirmRemove}
+          onConfirmRemoveChange={setConfirmRemove}
+          canRedo={deletesOn.length > 0}
+          saving={saving}
+          canSave={canSave}
+          onRemove={remove}
+          onRedo={onRedo}
+          onSave={save}
+        />
+      </section>
+
+      {/* --- right: avatar and name --- */}
+      <section className="clone-right" aria-label="Avatar e nome da voz">
+        <AvatarNameField
+          avatars={avatars}
+          avatar={avatar}
+          onAvatarChange={setAvatar}
+          locked={saving}
+          onShuffle={() => {
+            setAvatars(v => (profile ? [v[0], ...shuffleAvatars().slice(0, 9)] : shuffleAvatars()));
+            setAvatar(0);
+          }}
+          name={r.name}
+          onNameChange={v => setR({ ...r, name: v })}
+          nameValid={nameValid}
+          max={max}
+          listening={profile && listeningId === `${profile.id}:original` ? listening : null}
+          onListen={() => {
+            if (profile) listen(profile.id, "original");
+          }}
+          noAudio={isNew}
+          listenLabel="Ouvir voz original"
+          onEnter={() => {
+            if (canSave) save();
+          }}
+          rootRef={root}
+        />
+      </section>
+    </VoiceModal>
+  );
+}

package/studio/web/components/ErrorBanner.tsx

@@ -0,0 +1,115 @@
+/* Red banner on top of the whole app, above the one that waits for a decision: what broke and needs the
+   user (lib/alerts.ts). Each line links to where it is fixed and leaves on its own when the condition
+   clears; × dismisses it on this browser until it fails again (the key names the occurrence). Settings,
+   the platform accounts and the omnichat state have no SSE notice, so they are asked again every few
+   minutes. */
+
+import { useEffect, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { useQueryClient } from "@tanstack/react-query";
+import { useAccounts } from "../hooks/useAccounts";
+import { useNow } from "../hooks/useNow";
+import { useOmnichatState } from "../hooks/useOmnichat";
+import { useSessions } from "../hooks/useSessions";
+import { useSettings } from "../hooks/useSettings";
+import { useVideos } from "../hooks/useVideos";
+import { alertsOf } from "../lib/alerts";
+import { queryKeys } from "../lib/query-client";
+import { ArrowRight, X } from "./icons";
+
+const STORAGE_KEY = "omnivideo.dismissed-alerts";
+const REFRESH_MS = 3 * 60_000;
+
+function readDismissed(): string[] {
+  try {
+    const v = JSON.parse(localStorage.getItem(STORAGE_KEY) ?? "[]");
+    return Array.isArray(v) ? v : [];
+  } catch {
+    return [];
+  }
+}
+
+function saveDismissed(keys: string[]) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(keys));
+  } catch {
+    /* private window or blocked storage: dismissed for this visit only */
+  }
+}
+
+export function ErrorBanner() {
+  const { videos } = useVideos();
+  const sessions = useSessions();
+  const { settings } = useSettings();
+  const { accounts } = useAccounts();
+  const { state: omnichat } = useOmnichatState(false);
+  const now = useNow(30_000);
+  const qc = useQueryClient();
+  const [dismissed, setDismissed] = useState(readDismissed);
+
+  useEffect(() => {
+    const t = setInterval(() => {
+      for (const key of [queryKeys.settings, queryKeys.accounts, queryKeys.omnichat(false)])
+        void qc.invalidateQueries({ queryKey: key, exact: true });
+    }, REFRESH_MS);
+    return () => clearInterval(t);
+  }, [qc]);
+
+  const all = alertsOf({
+    videos,
+    sessions,
+    agents: settings?.agents ?? null,
+    keys: settings?.publish.keys ?? null,
+    accounts,
+    omnichat,
+    now,
+  });
+  const alerts = all.filter(a => !dismissed.includes(a.key));
+
+  const store = (keys: string[]) => {
+    setDismissed(keys);
+    saveDismissed(keys);
+  };
+
+  /* forget the dismissals of alerts that are gone (once every source answered), so the list stays short */
+  const liveKeys = all.map(a => a.key).join("\n");
+  const loaded = !!(videos && sessions && settings && accounts && omnichat);
+  useEffect(() => {
+    if (!loaded) return;
+    const live = new Set(liveKeys.split("\n"));
+    setDismissed(prev => {
+      const kept = prev.filter(k => live.has(k));
+      if (kept.length === prev.length) return prev;
+      saveDismissed(kept);
+      return kept;
+    });
+  }, [liveKeys, loaded]);
+
+  if (!alerts.length) return null;
+  const n = alerts.length;
+  return (
+    <div className="error-banner" role="alert">
+      <strong>{n === 1 ? "Deu erro" : `${n} erros`}</strong>
+      <ul>
+        {alerts.map(a => (
+          <li key={a.key}>
+            <Link {...a.link}>
+              <span>{a.label}</span>
+              {a.subject && <> · {a.subject}</>}
+              {a.message && <span className="error-banner-message"> · {a.message}</span>} <ArrowRight className="ic" />
+            </Link>
+            <button
+              type="button"
+              className="error-banner-dismiss"
+              title="Dispensar (volta se falhar de novo)"
+              aria-label="Dispensar"
+              onClick={() => store([...dismissed, a.key])}
+            >
+              <X className="ic" />
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/studio/web/components/FinishedTask.tsx

@@ -0,0 +1,41 @@
+import { useState } from "react";
+import { formatElapsed, timeAgo, ticketOrigin, toMs, TOOL_LABEL } from "../lib/format";
+import type { Ticket } from "../types/api";
+import { STATE_ICON } from "./icons";
+import { LogStream } from "./LogStream";
+
+export function FinishedTask({ ticket: t }: { ticket: Ticket }) {
+  const [open, setOpen] = useState(false);
+  const start = toMs(t.started_at);
+  const end = toMs(t.ended_at);
+  return (
+    <li className={`done ${t.effective}${open ? " open" : ""}`}>
+      <button className="done-row" onClick={() => setOpen(!open)}>
+        <span className={`icon ${t.effective}`}>{STATE_ICON[t.effective] ?? "·"}</span>
+        <span className="done-name">{TOOL_LABEL[t.tool] ?? t.tool}</span>
+        <span className="done-video">{t.video ?? ""}</span>
+        <span className="subtle">
+          {start && end ? formatElapsed(end - start) : t.effective === "waiting" ? "Esperando a vez" : "Saiu da fila"}
+          {t.effective === "error" && t.exit_code != null ? ` · código ${t.exit_code}` : ""}
+        </span>
+        <span className="subtle done-when">{timeAgo(t.ended_at ?? t.arrived_at)}</span>
+      </button>
+      {open && (
+        <div className="done-detail">
+          <code className="command">{t.command}</code>
+          <span className="subtle">
+            {ticketOrigin(t)} · pid {t.pid}
+            {t.video ? "" : " · sem vídeo"}
+          </span>
+          {t.started_at ? (
+            <LogStream id={t.id} height={220} />
+          ) : (
+            <p className="empty">
+              {t.effective === "waiting" ? "Ainda esperando a vez." : "Saiu antes da vez: não rodou."}
+            </p>
+          )}
+        </div>
+      )}
+    </li>
+  );
+}

package/studio/web/components/FishModelSetting.tsx

@@ -0,0 +1,69 @@
+/* Fish Audio's model: valid for every Fish voice, edited from the voice editor and the providers page. */
+
+import { useSaveAction } from "../hooks/useSaveAction";
+import { api } from "../lib/api";
+import type { Settings } from "../types/api";
+import { ResultMessage } from "./ResultMessage";
+import { SettingRow } from "./SettingRow";
+import { Checkbox } from "./ui/checkbox";
+import { Picker } from "./ui/picker";
+
+/* the free one is the same S2.1 Pro, without charge; the paid one comes out of the API balance */
+export const FISH_MODELS = [
+  { id: "s2.1-pro-free", name: "S2.1 Pro free", note: "Sem custo, uso justo, até 30/11/2026" },
+  { id: "s2.1-pro", name: "S2.1 Pro pago", note: "Sai do saldo da API" },
+];
+export const modelLabel = (id: string) => FISH_MODELS.find(m => m.id === id)?.name ?? id;
+
+export function FishModelSetting({
+  fish,
+  next,
+  onSave,
+}: {
+  fish: Settings["voice"]["fish"];
+  next: string | null;
+  onSave: () => void;
+}) {
+  const { result, saving, save } = useSaveAction(onSave);
+  const other = FISH_MODELS.find(m => m.id !== fish.model)?.id ?? null;
+  const store = (model: string, fallback: string | null) =>
+    save(() => api.settings["fish-model"].$post({ json: { model, fallback } }));
+  /* changing the model keeps the fallback on (or off), pointing at the other one */
+  const change = (model: string) =>
+    store(model, fish.fallback_model ? (FISH_MODELS.find(m => m.id !== model)?.id ?? null) : null);
+  return (
+    <SettingRow label="Modelo" help={FISH_MODELS.find(m => m.id === fish.model)?.note}>
+      <Picker
+        aria-label="Modelo"
+        value={fish.model}
+        disabled={saving}
+        onChange={change}
+        options={[
+          ...(FISH_MODELS.some(m => m.id === fish.model) ? [] : [{ value: fish.model, label: fish.model }]),
+          ...FISH_MODELS.map(m => ({ value: m.id, label: `${m.name}${m.id === "s2.1-pro-free" ? " (padrão)" : ""}` })),
+        ]}
+      />
+      {other && (
+        <label className="check-toggle">
+          <Checkbox
+            checked={!!fish.fallback_model}
+            disabled={saving}
+            onCheckedChange={v => store(fish.model, v ? other : null)}
+          />
+          <span>
+            Se falhar, tentar o {modelLabel(other)}
+            {other === "s2.1-pro" && <span className="subtle"> (cobra do saldo da API)</span>}
+          </span>
+        </label>
+      )}
+      <p className="hint">
+        Vale para a próxima <code>voice</code>. Free e pago dão a mesma voz: trocar não gera de novo as falas prontas.
+        {next &&
+          (fish.fallback_model
+            ? ` Sem o fallback, quando o ${modelLabel(fish.model)} falha a fala vai para ${next}.`
+            : ` Se ele falhar, a fala vai para ${next}.`)}
+      </p>
+      <ResultMessage result={result} />
+    </SettingRow>
+  );
+}

package/studio/web/components/FishPriceSetting.tsx

@@ -0,0 +1,44 @@
+import { useEffect, useState } from "react";
+import { useSaveAction } from "../hooks/useSaveAction";
+import { api } from "../lib/api";
+import { FloppyDisk } from "./icons";
+import { ResultMessage } from "./ResultMessage";
+import { SettingRow } from "./SettingRow";
+
+/* the paid model's price, used by the usage estimate */
+export function FishPriceSetting({ current, onSave }: { current: number | null; onSave: () => void }) {
+  const [value, setValue] = useState(current == null ? "" : String(current));
+  const { result, saving, save } = useSaveAction(onSave);
+  useEffect(() => {
+    setValue(current == null ? "" : String(current));
+  }, [current]);
+  const changed = value.trim() !== (current == null ? "" : String(current));
+  return (
+    <SettingRow
+      label="Métrica de custo"
+      help="Preço do modelo pago, usado na estimativa da tela Uso (as falas do free não contam)"
+    >
+      <form
+        className="setting-row"
+        onSubmit={e => {
+          e.preventDefault();
+          if (changed) save(() => api.settings["fish-price"].$post({ json: { value } }));
+        }}
+      >
+        <span className="subtle">US$</span>
+        <input
+          className="short"
+          inputMode="decimal"
+          value={value}
+          onChange={e => setValue(e.target.value)}
+          disabled={saving}
+        />
+        <span className="subtle">Por milhão de bytes de texto</span>
+        <button className="button" type="submit" disabled={saving || !changed || !value.trim()}>
+          <FloppyDisk className="ic" /> {saving ? "Gravando…" : "Gravar"}
+        </button>
+      </form>
+      <ResultMessage result={result} />
+    </SettingRow>
+  );
+}

package/studio/web/components/HumanBanner.tsx

@@ -0,0 +1,64 @@
+/* Fixed banner on top of the whole app, on any screen: everything that waits for a decision of
+   the user (script, motion script scenes, voice being chosen). It doesn't go away on page
+   change nor closes: it leaves when the user decides. It sits in the shell's top stack (TopBanners). */
+
+import { Link } from "@tanstack/react-router";
+import { useNow } from "../hooks/useNow";
+import { useVideos } from "../hooks/useVideos";
+import { formatCountdown } from "../lib/format";
+import { ArrowRight } from "./icons";
+
+export function HumanBanner() {
+  const { videos } = useVideos();
+  const now = useNow();
+  const list = (videos ?? []).filter(v => !v.archived);
+  const scripts = list.filter(v => v.script_approval?.status === "pending");
+  const scenes = list.filter(v => v.scenes_approval?.status === "pending");
+  const voices = list.flatMap(v => {
+    const s = v.status?.stages.find(x => x.pause);
+    return s ? [{ v, stage: s.id }] : [];
+  });
+  const items = [
+    ...scripts.map(v => {
+      const a = v.script_approval!;
+      const ms = a.mode === "auto" ? Date.parse(a.deadline) - now : (a.remaining_ms ?? 0);
+      return {
+        k: `r-${v.slug}`,
+        label: "Roteiro espera sua aprovação",
+        v,
+        stage: "script",
+        extra: `${a.mode === "paused" ? "⏸ " : "aprova sozinho em "}${formatCountdown(ms)}`,
+      };
+    }),
+    ...scenes.map(v => {
+      const a = v.scenes_approval!;
+      const ms = a.mode === "auto" ? Date.parse(a.deadline) - now : (a.remaining_ms ?? 0);
+      return {
+        k: `c-${v.slug}`,
+        label: "Cenas esperam sua aprovação",
+        v,
+        stage: "motion_script",
+        extra: `${a.mode === "paused" ? "⏸ " : "aprovam sozinhas em "}${formatCountdown(ms)}`,
+      };
+    }),
+    ...voices.map(({ v, stage }) => ({ k: `v-${v.slug}`, label: "Voz em escolha, falta seguir", v, stage, extra: "" })),
+  ];
+  const n = items.length;
+
+  if (!n) return null;
+  return (
+    <div className="human-banner" role="status">
+      <strong>{n === 1 ? "Espera você" : `${n} coisas esperam você`}</strong>
+      <ul>
+        {items.map(i => (
+          <li key={i.k}>
+            <Link to="/videos/$slug/$stage" params={{ slug: i.v.slug, stage: i.stage }}>
+              <span>{i.label}</span> · {i.v.title}
+              {i.extra && <span className="mono"> · {i.extra}</span>} <ArrowRight className="ic" />
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}