@crievo/omni 0.0.0-stage → 0.1.1

package/studio/studio.ts

@@ -0,0 +1,148 @@
+/* ============================================================================
+   omnivideo studio: the hub of this folder's pipeline. Requests new videos and
+   references (each request becomes a `claude -p` session with the project's skills,
+   which the UI follows and replies to), shows several videos at once, reviews media,
+   follows the machine queue and the reference library. The chat still
+   works: what it does shows up here the same way.
+
+     bun start                              http://127.0.0.1:5432
+     bun start --open                       and opens it in the browser
+     bun studio.ts --videos <dir>           also shows the videos in another dir
+     bun studio.ts --port 3911              another port (tests)
+     bun studio.ts --runner                 also serves the hosted studio (cloud/studio) over the
+                                            runner channel; on by itself with cloud.studio in the
+                                            config, for the studio without --port
+
+   Each video's files remain the source of truth: the studio reads,
+   watches and calls the tools/ scripts. The queue is tools/job_queue.py's, which
+   holds with the studio on or off. Details in reference/studio.md.
+
+   This file only starts things: the HTTP API lives in api/ (Hono, api/app.ts); Bun
+   serves the HTML bundle and hands the API and file paths to it.
+   ============================================================================ */
+
+import { hostname } from "node:os";
+import { relative } from "node:path";
+import type { Server } from "bun";
+import index from "./web/index.html";
+import { API_PREFIXES, createApp } from "./api/app";
+import { notFoundResponse } from "./api/lib/errors";
+import { ROOT } from "./api/services/root";
+import { videoRoots, addVideoRoot, videoDirs, refreshStatus } from "./api/services/videos";
+import { startWatching } from "./api/services/events";
+import { onTurnEnd } from "./api/services/sessions";
+import { resumeAfterApproval, watchDeadline } from "./api/services/approval";
+import { startRunner } from "./runner/runner";
+import { cloudSettings, env, writeEnv } from "../tools/platforms.mjs";
+import { checkKey, finishPairing, startPairing } from "../tools/lib/pairing.mjs";
+import { ACCESS_PREFIX, accessToken } from "../tools/lib/oauth-client.mjs";
+
+const args = process.argv.slice(2);
+const option = (name: string) => {
+  const i = args.indexOf(`--${name}`);
+  return i < 0 ? undefined : args[i + 1];
+};
+const PORT = +(option("port") ?? 5432);
+args.forEach((a, i) => {
+  if (a === "--videos" && args[i + 1]) addVideoRoot(args[i + 1]);
+});
+
+const app = createApp({ port: PORT });
+/* HEAD goes in as GET: Bun drops the body itself and keeps the file's content-length (Hono's own
+   HEAD answers an empty body with length 0, which media players read as an empty file) */
+const api = (req: Request, server: Server<unknown>) =>
+  app.fetch(req.method === "HEAD" ? new Request(req, { method: "GET" }) : req, { server });
+
+/* --- server ------------------------------------------------------------------ */
+let server: Server<unknown>;
+try {
+  server = Bun.serve({
+    hostname: "127.0.0.1",
+    port: PORT,
+    maxRequestBodySize: 2 * 1024 ** 3 /* reference video upload */,
+    /* --dev: rebuilds on request and echoes the browser console here. HMR stays off: Bun's HMR
+       breaks on TanStack Router's import cycle (router.js <-> load-client.js) and leaves a blank page */
+    development: args.includes("--dev") ? { hmr: false, console: true } : false,
+    routes: {
+      "/": index,
+      "/videos": index,
+      "/videos/:slug": index,
+      "/videos/:slug/:stage": index,
+      "/queue": index,
+      "/usage": index,
+      "/voice": index,
+      "/agent": index,
+      "/schedule": index,
+      "/schedule/:view": index,
+      "/omnichat": index,
+      "/analytics": index,
+      "/analytics/:slug": index,
+      "/settings": index,
+      "/settings/:category": index,
+      "/new": index,
+      "/getting-started": index,
+      "/styles": index,
+      "/styles/:name": index,
+      /* any other path opens the app, which shows the 404 page inside the menu; the API and
+         file paths below (more specific) go to the Hono app */
+      "/*": index,
+      ...Object.fromEntries(API_PREFIXES.map(p => [`${p}/*`, api])),
+    },
+    fetch: notFoundResponse,
+  });
+} catch (e) {
+  if ((e as { code?: string })?.code === "EADDRINUSE") {
+    console.error(`erro: a porta ${PORT} já está em uso. O studio já está aberto? (lsof -i :${PORT})`);
+    process.exit(1);
+  }
+  throw e;
+}
+
+startWatching();
+/* the script or scenes decision arrived while the turn was running: resume now */
+onTurnEnd((type, target) => {
+  const dir = type === "video" ? videoDirs().get(target) : undefined;
+  if (!dir) return;
+  resumeAfterApproval(target, dir);
+});
+/* everyone's status right at startup: the first page doesn't wait for one Python per video */
+for (const [slug, dir] of videoDirs()) {
+  refreshStatus(slug);
+  watchDeadline(slug, dir);
+}
+
+const address = `http://127.0.0.1:${server.port}`;
+console.log(`OmniVideo · ${address}`);
+console.log(
+  `vídeos em ${videoRoots.map(r => (relative(ROOT, r).startsWith("..") ? r : relative(ROOT, r) + "/")).join(", ")} · fila em .queue/`,
+);
+if (args.includes("--open")) Bun.spawn(["open", address]);
+
+/* --- runner ---------------------------------------------------------------------
+   The hosted studio reaches this same app through the channel (docs/specs/phase-1-split-api.md).
+   cloud.studio turns it on only for the main studio (no --port): a second one on another port (a test,
+   another session) would take the channel over; it needs --runner said out loud */
+const hosted = cloudSettings().studio;
+if (args.includes("--runner") || (hosted.on && option("port") === undefined)) {
+  if (!hosted.url) console.error("aviso: o runner precisa de cloud.studio_url no config");
+  else {
+    /* the OAuth login (node tools/omni.mjs login, in the Keychain) when there is one, else the Phase 1 key */
+    const token = async () =>
+      (await accessToken(hosted.url as string).catch(() => null)) ?? env("OMNIVIDEO_RUNNER_TOKEN");
+    const port = server.port ?? PORT;
+    const handle = (req: Request) => api(req, server);
+    const url = hosted.url;
+    /* a refused key pairs again: the approval page opens on this Mac, the new key goes into .env */
+    const pair = async () => {
+      const code = await startPairing(url);
+      console.log(`cloud: código do pareamento ${code.user_code} · ${code.verification_uri_complete}`);
+      if (process.platform === "darwin") Bun.spawn(["open", code.verification_uri_complete]);
+      const paired = await finishPairing(url, code, hostname().replace(/\.local$/, ""));
+      writeEnv({ OMNIVIDEO_RUNNER_TOKEN: paired.key });
+      return paired.key;
+    };
+    /* only a Phase 1 key is repaired by pairing; an OAuth login refreshes itself or asks for omni login */
+    const check = async (t: string) => (t.startsWith(ACCESS_PREFIX) ? { valid: null } : checkKey(url, t));
+    startRunner({ url, token, port, handle, checkKey: check, pair });
+  }
+}

package/studio/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "Preserve",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "types": ["bun"],
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "allowJs": true
+  },
+  "include": ["studio.ts", "api", "shared", "web"]
+}

package/studio/web/assets/logos/cartesia.svg

@@ -0,0 +1,4 @@
+<svg width="416" height="426" viewBox="0 0 416 426" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="415.632" height="425.055" fill="#309D4B"/>
+<path d="M317.301 182.114V237.681H289.766L286.153 232.679L277.49 220.689L271.591 212.526L261.508 198.571L264.557 212.526L268.964 232.679L270.056 237.681L273.37 252.833L277.49 271.685L277.774 272.987L282.178 293.138L286.585 313.292H224.406L219.999 293.138L217.769 282.929L215.595 272.987L211.189 252.833L207.877 237.681L204.565 252.833L200.158 272.987L197.864 283.481L195.754 293.138L191.347 313.292H129.048L133.455 293.138L137.738 273.533V273.53L138.143 273.231L138.475 272.987L158.05 258.489L165.69 252.833L177.957 243.747L186.149 237.681H98.332V182.114H157.722L158.05 180.617L159.887 172.221L164.291 152.067L168.698 131.914L173.102 111.763H242.531L246.935 131.914L247.858 136.131L237.676 143.671L226.336 152.067L217.769 158.413L199.123 172.221L197.864 173.152L185.764 182.114H317.301Z" fill="#F9F9F8"/>
+</svg>

package/studio/web/assets/logos/elevenlabs.svg

@@ -0,0 +1,12 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_470_2)">
+<rect width="500" height="500" rx="100" fill="white"/>
+<path d="M314 355H271V145H314V355Z" fill="black"/>
+<path d="M229 355H186V145H229V355Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_470_2">
+<rect width="500" height="500" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/studio/web/assets/logos/fish.svg

@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img" aria-label="Fish Audio">
+<rect width="512" height="512" rx="100" fill="#fff"/>
+<rect fill="#7a7a7a" x="297.1" y="299.3" width="16" height="21.4" rx="8"/>
+<rect fill="#7a7a7a" x="456.7" y="249.9" width="16" height="27.1" rx="8"/>
+<rect fill="#7a7a7a" x="424.7" y="256.6" width="16" height="47.4" rx="8"/>
+<rect fill="#7a7a7a" x="392.9" y="264.3" width="16" height="52.1" rx="8"/>
+<rect fill="#7a7a7a" x="360.9" y="270.7" width="16" height="51.6" rx="8"/>
+<rect fill="#7a7a7a" x="328.9" y="276.4" width="16" height="46" rx="8"/>
+<rect fill="#000" x="38.1" y="200" width="16" height="19.4" rx="8"/>
+<rect fill="#000" x="71" y="202.7" width="16" height="30.7" rx="8"/>
+<rect fill="#000" x="103.9" y="198.4" width="16" height="77.4" rx="8"/>
+<rect fill="#000" x="136.9" y="192" width="16" height="20" rx="8"/>
+<rect fill="#000" x="136.9" y="245.4" width="16" height="58.3" rx="8"/>
+<rect fill="#000" x="168.6" y="235.1" width="16" height="100.8" rx="8"/>
+<rect fill="#000" x="200.6" y="222.4" width="16" height="102.2" rx="8"/>
+<rect fill="#000" x="232.6" y="204.1" width="16" height="115.8" rx="8"/>
+<rect fill="#000" x="264.5" y="190.2" width="16" height="120.1" rx="8"/>
+<rect fill="#000" x="297.1" y="181.9" width="16" height="107.1" rx="8"/>
+<rect fill="#000" x="328.9" y="177" width="16" height="87.8" rx="8"/>
+<rect fill="#000" x="392.9" y="178.1" width="16" height="75.4" rx="8"/>
+<rect fill="#000" x="360.9" y="175" width="16" height="86.6" rx="8"/>
+<rect fill="#000" x="424.7" y="185.2" width="16" height="60.2" rx="8"/>
+<rect fill="#000" x="456.7" y="204.1" width="16" height="38" rx="8"/>
+</svg>

package/studio/web/assets/logos/voicestudio.svg

@@ -0,0 +1,21 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="VoiceStudio">
+  <defs>
+    <linearGradient id="tile" x1="7" y1="4" x2="58" y2="62" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#211B2B"/>
+      <stop offset="1" stop-color="#120F18"/>
+    </linearGradient>
+    <radialGradient id="warmth" cx="0" cy="0" r="1" gradientTransform="translate(49 13) rotate(132) scale(42)" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#6A2D4C" stop-opacity="0.44"/>
+      <stop offset="1" stop-color="#6A2D4C" stop-opacity="0"/>
+    </radialGradient>
+    <linearGradient id="voice" x1="7" y1="18" x2="59" y2="46" gradientUnits="userSpaceOnUse">
+      <stop stop-color="#FFD0DB"/>
+      <stop offset="0.5" stop-color="#F47FA3"/>
+      <stop offset="1" stop-color="#F7AE73"/>
+    </linearGradient>
+  </defs>
+  <rect x="2" y="2" width="60" height="60" rx="15" fill="url(#tile)"/>
+  <rect x="2.5" y="2.5" width="59" height="59" rx="14.5" fill="url(#warmth)" stroke="#FFFFFF" stroke-opacity="0.09"/>
+  <path d="M6 34c4 0 5-7 9-7 5 0 4 14 9 14 5 0 4-23 9-23s4 28 9 28 4-21 9-21c4 0 5 9 8 9" stroke="url(#voice)" stroke-width="5.5" stroke-linecap="round" stroke-linejoin="round"/>
+  <path d="M50 9c.7 4.3 3.7 7.3 8 8-4.3.7-7.3 3.7-8 8-.7-4.3-3.7-7.3-8-8 4.3-.7 7.3-3.7 8-8Z" fill="#FFE5B5"/>
+</svg>

package/studio/web/components/AgentMark.tsx

@@ -0,0 +1,7 @@
+import { isClaude } from "../lib/agent";
+import { ChatCircleText, ClaudeMark } from "./icons";
+
+/* the agent's mark: Claude's with Claude chosen; else a neutral icon */
+export function AgentMark({ size = "1em", className }: { size?: string | number; className?: string }) {
+  return isClaude ? <ClaudeMark size={size} className={className} /> : <ChatCircleText className={className} />;
+}

package/studio/web/components/AgentWalking.tsx

@@ -0,0 +1,11 @@
+import { isClaude } from "../lib/agent";
+import { ClaudeWalking } from "./ClaudeWalking";
+
+/* the agent working: Claude's animation with Claude chosen; else a pulsing dot */
+export function AgentWalking({ className = "" }: { className?: string }) {
+  return isClaude ? (
+    <ClaudeWalking className={className} />
+  ) : (
+    <span className={`agent-walking ${className}`} aria-label="Agente trabalhando" role="img" />
+  );
+}

package/studio/web/components/ApiKeyField.tsx

@@ -0,0 +1,104 @@
+/* The key never comes whole. Configured, the mask shows in place of the field, locked, with
+   Remover; to change it, remove and paste the new one. Without a key, the field and Gravar.
+   `stacked` (inside the voice modal, without the label column): the label with the variable
+   name on top, the field with the button and, below, where to get the key. */
+
+import { useState, type ReactNode } from "react";
+import { useSaveAction } from "../hooks/useSaveAction";
+import { api } from "../lib/api";
+import type { KeyStatus } from "../types/api";
+import { Check, FloppyDisk, Trash } from "./icons";
+import { ResultMessage } from "./ResultMessage";
+import { SettingRow } from "./SettingRow";
+import { Badge } from "./ui/badge";
+
+export function ApiKeyField({
+  keyStatus: k,
+  label,
+  help,
+  onSave,
+  stacked = false,
+  required = false,
+}: {
+  keyStatus: KeyStatus;
+  label: string;
+  help?: ReactNode;
+  onSave: () => void;
+  stacked?: boolean;
+  /* the key is part of the provider (e.g. Cartesia's admin one): the label says "obrigatória" */
+  required?: boolean;
+}) {
+  const [value, setValue] = useState("");
+  const { result, saving, save } = useSaveAction(onSave);
+  const sendKey = async (v: string) => {
+    if (await save(() => api.settings.key.$post({ json: { name: k.name, value: v } }))) setValue("");
+  };
+  const current = (
+    <p className="setting-current">
+      {stacked && <b>{label}</b>}
+      {required && <em className="key-required">Obrigatória</em>}
+      <code>{k.name}</code>
+      {!k.masked && <Badge variant="warning">Não configurada</Badge>}
+    </p>
+  );
+  const body = (
+    <>
+      {current}
+      {k.masked ? (
+        <div className="setting-row">
+          <span className="key-field">
+            <input
+              className="mono"
+              type="text"
+              value={k.masked}
+              disabled
+              readOnly
+              aria-label={`${label} (${k.name}) configurada`}
+            />
+            <span className="key-connected">
+              <Check weight="bold" className="ic" /> Chave conectada
+            </span>
+          </span>
+          <button className="button" type="button" disabled={saving} onClick={() => sendKey("")}>
+            <Trash className="ic" /> {saving ? "Removendo…" : "Remover"}
+          </button>
+        </div>
+      ) : (
+        <form
+          className="setting-row"
+          onSubmit={e => {
+            e.preventDefault();
+            if (value.trim()) sendKey(value);
+          }}
+        >
+          <input
+            type="password"
+            value={value}
+            onChange={e => setValue(e.target.value)}
+            disabled={saving}
+            placeholder="Cole a chave"
+            autoComplete="off"
+            spellCheck={false}
+            aria-label={`${label} (${k.name})`}
+          />
+          <button className="button" type="submit" disabled={saving || !value.trim()}>
+            <FloppyDisk className="ic" /> {saving ? "Gravando…" : "Gravar"}
+          </button>
+        </form>
+      )}
+      {stacked && help && <small className="subtle">{help}</small>}
+      {k.in_env && (
+        <p className="hint warning">
+          O terminal que abriu o studio tem <code>{k.name}</code> no ambiente, e ela vale antes da do <code>.env</code>.
+        </p>
+      )}
+      <ResultMessage result={result} />
+    </>
+  );
+  if (stacked) return <div className="setting-field key-stacked">{body}</div>;
+  return (
+    <SettingRow label={label} help={help}>
+      {body}
+    </SettingRow>
+  );
+}

package/studio/web/components/AppShell.tsx

@@ -0,0 +1,64 @@
+/* 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). */
+
+import { useEffect, useRef } from "react";
+import { Outlet, useLocation, useMatchRoute } from "@tanstack/react-router";
+import { useMenuCollapsed } from "../hooks/useMenuCollapsed";
+import { useMissingSetupSteps } from "../hooks/useMissingSetupSteps";
+import { ApprovalNotice } from "./ApprovalNotice";
+import { TopBanners } from "./TopBanners";
+import { Lightbox } from "./Lightbox";
+import { OmniWidget } from "./Omni/OmniWidget";
+import { StudioOffline } from "./StudioOffline";
+import { Sidebar } from "./Sidebar";
+
+/* the page a location belongs to: switching the stage of a video (/videos/x/<stage>) or the
+   schedule view (/schedule/<view>) stays on the same page and keeps the scroll */
+function pageKeyOf(pathname: string, search: string) {
+  const video = pathname.match(/^\/videos\/([^/]+)(?:\/|$)/);
+  if (video) return `/videos/${video[1]}`;
+  if (/^\/schedule(\/|$)/.test(pathname)) return "/schedule";
+  return pathname + search;
+}
+
+export function AppShell() {
+  const location = useLocation();
+  const matchRoute = useMatchRoute();
+  const content = useRef<HTMLDivElement>(null);
+  /* Primeiros passos stays at the bottom of the menu until no required step is missing (checked
+     again on every screen change); while open, it stays */
+  const missing = useMissingSetupSteps(location.pathname);
+  const [collapsed, toggleMenu] = useMenuCollapsed();
+  const showGettingStarted = location.pathname === "/getting-started" || !!missing?.length;
+  const withSidebar = !!matchRoute({ to: "/settings", fuzzy: true }) || !!matchRoute({ to: "/usage" });
+
+  /* the content panel scrolls, not the window: back to the top on every page change */
+  const pageKey = pageKeyOf(location.pathname, location.searchStr);
+  useEffect(() => {
+    window.scrollTo(0, 0);
+    content.current?.scrollTo(0, 0);
+  }, [pageKey]);
+
+  return (
+    <>
+      <TopBanners />
+      <div className={`app${collapsed ? " menu-collapsed" : ""}`}>
+        <Sidebar
+          collapsed={collapsed}
+          onToggle={toggleMenu}
+          missing={missing}
+          showGettingStarted={showGettingStarted}
+        />
+        <div className="content" ref={content}>
+          <main className={withSidebar ? "with-sidebar" : ""}>
+            <Outlet />
+          </main>
+        </div>
+      </div>
+      <Lightbox />
+      <ApprovalNotice />
+      <OmniWidget menuCollapsed={collapsed} />
+      <StudioOffline />
+    </>
+  );
+}

package/studio/web/components/ApprovalNotice.tsx

@@ -0,0 +1,65 @@
+/* Approval notice (script and scenes), on every studio page: a chime when a new round opens and,
+   while it waits, the tab title with the countdown to the automatic approval (⏸ when paused by an
+   edit). Renders nothing. */
+
+import { useEffect, useRef } from "react";
+import { api, enc, read } from "../lib/api";
+import { playChime } from "../lib/chime";
+import { formatCountdown } from "../lib/format";
+import { useNow } from "../hooks/useNow";
+import { useVideos } from "../hooks/useVideos";
+
+const TITLE_PREFIX = /^● [^·]* · /;
+
+export function ApprovalNotice() {
+  const { videos } = useVideos();
+  const now = useNow();
+  const seen = useRef<Set<string> | null>(null);
+  const reread = useRef(new Set<string>());
+  /* each waiting round: each video's script and scenes rounds */
+  const pending = (videos ?? []).flatMap(v => [
+    ...(v.script_approval?.status === "pending" ? [{ slug: v.slug, type: "script", round: v.script_approval }] : []),
+    ...(v.scenes_approval?.status === "pending" ? [{ slug: v.slug, type: "scenes", round: v.scenes_approval }] : []),
+  ]);
+  const keyOf = (p: (typeof pending)[number]) => `${p.slug}#${p.type}#${p.round.round}`;
+
+  /* chime only for a round that opened with the page open; one already waiting goes to the title */
+  useEffect(() => {
+    if (!videos) return;
+    const keys = pending.map(keyOf);
+    if (!seen.current) {
+      seen.current = new Set(keys);
+      return;
+    }
+    if (keys.some(k => !seen.current!.has(k))) playChime();
+    keys.forEach(k => seen.current!.add(k));
+  }, [videos]);
+
+  /* deadline passed with nobody in `wait`: re-reading the video applies the automatic approval */
+  useEffect(() => {
+    for (const p of pending) {
+      if (p.round.mode === "auto" && Date.parse(p.round.deadline) <= now && !reread.current.has(keyOf(p))) {
+        reread.current.add(keyOf(p));
+        read(api.videos[":slug"].$get({ param: { slug: enc(p.slug) } })).catch(() => {});
+      }
+    }
+  }, [now, videos]);
+
+  /* the countdown that ends first; paused, it shows what is left, still */
+  const left = pending.map(({ round }) =>
+    round.mode === "auto"
+      ? { ms: Date.parse(round.deadline) - now, paused: false }
+      : { ms: round.remaining_ms ?? 0, paused: true },
+  );
+  const next = left.sort((x, y) => x.ms - y.ms)[0];
+  const text = !pending.length
+    ? ""
+    : `${pending.length > 1 ? `${pending.length} aprovações` : pending[0].type === "script" ? "Aprovar roteiro" : "Aprovar cenas"} ${next.paused ? "⏸ " : ""}${formatCountdown(next.ms)}`;
+  /* pages write their own title; the notice goes in front and leaves when done */
+  useEffect(() => {
+    const base = document.title.replace(TITLE_PREFIX, "");
+    const title = text ? `● ${text} · ${base}` : base;
+    if (document.title !== title) document.title = title;
+  });
+  return null;
+}

package/studio/web/components/AvatarGroupIcon.tsx

@@ -0,0 +1,22 @@
+/* The "Perfil de voz" menu icon: two overlapping avatars, like an avatar group. Both are drawn once
+   per page load (distant hues, so they don't look the same) and stay still in the menu: the flow
+   is for the carousel, not for an icon. */
+
+import { VoiceAvatar } from "./VoiceAvatar";
+
+let MENU_SEEDS: [string, string] | null = null;
+
+export function AvatarGroupIcon(props: { "aria-hidden"?: boolean | "true" | "false" }) {
+  if (!MENU_SEEDS) {
+    const h = Math.floor(Math.random() * 360);
+    const suffix = () => Math.random().toString(36).slice(2, 8);
+    MENU_SEEDS = [`h${h}-${suffix()}`, `h${(h + 120 + Math.floor(Math.random() * 120)) % 360}-${suffix()}`];
+  }
+  return (
+    <span className="avatar-group-icon" aria-hidden={props["aria-hidden"]}>
+      {MENU_SEEDS.map(seed => (
+        <VoiceAvatar key={seed} seed={seed} size={14} still />
+      ))}
+    </span>
+  );
+}

package/studio/web/components/AvatarNameField.tsx

@@ -0,0 +1,86 @@
+/* The right half of the save step and of the edit view: "Gerar outros" on top, the avatar carousel,
+   the name (3 to 20 characters) and, under it, "Ouvir voz" (or the counter, if the name is out of
+   bounds). `listening` is the audio phase: generating the sample, playing or stopped. */
+
+import type { RefObject } from "react";
+import type { ListenPhase } from "../hooks/useVoiceProfilePreview";
+import { NAME_MAX, NAME_MIN } from "../lib/voice-profiles";
+import { AvatarPicker } from "./AvatarPicker";
+import { ArrowClockwise, Pause, Play } from "./icons";
+
+export function AvatarNameField({
+  avatars,
+  avatar,
+  onAvatarChange,
+  onShuffle,
+  name,
+  onNameChange,
+  nameValid,
+  max = NAME_MAX,
+  locked,
+  listening,
+  onListen,
+  listenLabel = "Ouvir voz",
+  noAudio,
+  onEnter,
+  rootRef,
+}: {
+  avatars: string[];
+  avatar: number;
+  onAvatarChange: (i: number) => void;
+  onShuffle: () => void;
+  name: string;
+  onNameChange: (v: string) => void;
+  nameValid: boolean;
+  max?: number;
+  locked: boolean;
+  listening: ListenPhase;
+  onListen: () => void;
+  listenLabel?: string;
+  noAudio?: boolean;
+  onEnter?: () => void;
+  rootRef: RefObject<HTMLDivElement | null>;
+}) {
+  return (
+    <>
+      <button type="button" className="button small clone-shuffle" disabled={locked} onClick={onShuffle}>
+        <ArrowClockwise className="ic" /> Gerar outros
+      </button>
+      <AvatarPicker options={avatars} index={avatar} onChange={onAvatarChange} disabled={locked} rootRef={rootRef} />
+      <div className="clone-name-field">
+        <input
+          className="clone-name"
+          size={Math.max(name.length, 12)}
+          value={name}
+          onChange={e => onNameChange(e.target.value)}
+          minLength={NAME_MIN}
+          maxLength={max}
+          disabled={locked}
+          autoFocus
+          placeholder="Nome da voz"
+          aria-label="Nome da voz"
+          autoComplete="off"
+          onKeyDown={e => {
+            if (e.key === "Enter") onEnter?.();
+          }}
+        />
+        {/* the counter shows only when the name is out of bounds; otherwise the spot is "Ouvir voz"'s */}
+        {name.length > 0 && !nameValid ? (
+          <small className="subtle warning" aria-live="polite">
+            {name.trim().length}/{max} · de {NAME_MIN} a {max} caracteres
+          </small>
+        ) : (
+          <button
+            type="button"
+            className="button small clone-listen"
+            onClick={onListen}
+            disabled={locked || noAudio || listening === "generating"}
+          >
+            {listening === "playing" ? <Pause weight="fill" className="ic" /> : <Play weight="fill" className="ic" />}
+            {listening === "generating" ? "Gerando…" : listening === "playing" ? "Parar" : listenLabel}
+          </button>
+        )}
+      </div>
+    </>
+  );
+}