@crievo/omni 0.0.0-stage → 0.1.0

package/studio/web/components/NotFound.tsx

@@ -0,0 +1,48 @@
+/* The "not found" screen: a route that doesn't exist, a video or reference that is not in videos/
+   nor in the library. It lives inside <main>, with the menu beside it, so the way back is the menu
+   itself plus two buttons: the primary goes to the Dashboard, the secondary to the list the person
+   was probably looking for. */
+
+import { useEffect } from "react";
+import { Link, useNavigate } from "@tanstack/react-router";
+import { ArrowLeft } from "./icons";
+
+export function NotFound({
+  path,
+  title = "Página não encontrada",
+  text,
+  back = { to: "/videos", name: "Conteúdos" },
+}: {
+  /* what was asked for: the pathname, or the slug/name that doesn't exist */
+  path?: string;
+  title?: string;
+  text?: string;
+  /* the list where the person probably wants to land (a route path from router.tsx) */
+  back?: { to: "/videos" | "/styles" | "/analytics" | "/omnichat" | "/settings"; name: string };
+}) {
+  const navigate = useNavigate();
+  useEffect(() => {
+    document.title = `${title} · Omni`;
+  }, [title]);
+  return (
+    <div className="page not-found" role="alert">
+      <span className="not-found-code" aria-hidden="true">
+        404
+      </span>
+      <h1>{title}</h1>
+      <p className="not-found-text">
+        {text ??
+          "O endereço não existe neste studio. Pode ter sido digitado errado, ou o vídeo foi arquivado ou apagado."}
+      </p>
+      {path && <code className="not-found-path">{path}</code>}
+      <div className="actions not-found-actions">
+        <button type="button" className="button primary" onClick={() => navigate({ to: "/" })}>
+          <ArrowLeft className="ic" aria-hidden="true" /> Ir para o Dashboard
+        </button>
+        <Link to={back.to} className="button">
+          {back.name}
+        </Link>
+      </div>
+    </div>
+  );
+}

package/studio/web/components/Omni/OmniAvatarPicker.tsx

@@ -0,0 +1,92 @@
+/* Omni's face, in the gear's settings: the same carousel as the voice creation ("Gerar outros" and the
+   compact AvatarPicker), with the voice's play, outlined, on the left of the same line. The first avatar is the current one, the other nine are drawn. Moving
+   the carousel chooses; the choice is saved a moment after it stops, like the voice's. */
+
+import { useEffect, useRef, useState } from "react";
+import { useAvatarAudioReactive } from "../../hooks/useAvatarAudioReactive";
+import { shuffleAvatars } from "../../lib/avatars";
+import { api, send } from "../../lib/api";
+import { invalidate, queryKeys } from "../../lib/query-client";
+import { AvatarPicker } from "../AvatarPicker";
+import { ArrowClockwise } from "../icons";
+import type { AgentGender } from "../../types/api";
+import { OmniVoiceSample } from "./OmniVoiceSample";
+
+const SAVE_AFTER_MS = 400;
+const drawn = (current: string) => [current, ...shuffleAvatars().slice(0, 9)];
+
+export function OmniAvatarPicker({
+  avatar,
+  gender,
+  disabled,
+}: {
+  avatar: string;
+  /* the voice the avatar plays on hover */
+  gender: AgentGender;
+  disabled?: boolean;
+}) {
+  const [options, setOptions] = useState(() => drawn(avatar));
+  const [index, setIndex] = useState(0);
+  const [error, setError] = useState<string | null>(null);
+  /* while the sample plays, the avatar in the center reacts to the voice */
+  const [playing, setPlaying] = useState(false);
+  const analyser = useRef<AnalyserNode | null>(null);
+  const root = useRef<HTMLDivElement>(null);
+  useAvatarAudioReactive(playing, root, analyser, r =>
+    Array.from(r.querySelectorAll<HTMLCanvasElement>(".carousel-item.d0 .voice-avatar")),
+  );
+  /* what the config holds right now: the carousel only saves when it lands somewhere else */
+  const saved = useRef(avatar);
+
+  /* the config changed from outside (another tab): start over from it */
+  useEffect(() => {
+    if (avatar === saved.current) return;
+    saved.current = avatar;
+    setOptions(drawn(avatar));
+    setIndex(0);
+  }, [avatar]);
+
+  const chosen = options[index];
+  useEffect(() => {
+    if (!chosen || chosen === saved.current) return;
+    const timer = setTimeout(async () => {
+      setError(null);
+      const r = await send(api.agent.avatar.$post({ json: { avatar: chosen } }));
+      if (r.ok) {
+        saved.current = chosen;
+        await invalidate(queryKeys.agent);
+      } else {
+        setError(r.error ?? "não deu para trocar o avatar");
+        setIndex(Math.max(0, options.indexOf(saved.current)));
+      }
+    }, SAVE_AFTER_MS);
+    return () => clearTimeout(timer);
+  }, [chosen, options]);
+
+  return (
+    <div className="omni-avatar-field">
+      <div className="omni-avatar-head">
+        <OmniVoiceSample
+          gender={gender}
+          disabled={disabled}
+          onError={setError}
+          analyser={analyser}
+          onPlayingChange={setPlaying}
+        />
+        <button
+          type="button"
+          className="button small"
+          disabled={disabled}
+          onClick={() => {
+            setOptions(drawn(saved.current));
+            setIndex(0);
+          }}
+        >
+          <ArrowClockwise className="ic" /> Gerar outros
+        </button>
+      </div>
+      <AvatarPicker options={options} index={index} onChange={setIndex} disabled={disabled} rootRef={root} />
+      {error && <p className="response error">{error}</p>}
+    </div>
+  );
+}

package/studio/web/components/Omni/OmniCards.tsx

@@ -0,0 +1,202 @@
+/* The cards Omni shows in its panel (lib/omni-cards: the show_card UI tool). Each card reads the
+   studio's own data (the same hooks as the pages) and links to the screen it comes from. */
+
+import { Link } from "@tanstack/react-router";
+import { useReel } from "../../hooks/useAnalytics";
+import { useReference } from "../../hooks/useReferences";
+import { useVideo } from "../../hooks/useVideos";
+import { dismissCard, type OmniCard, useOmniCards } from "../../lib/omni-cards";
+import { aspectRatio, chosenCover, findFile, mediaUrl, referenceFileUrl } from "../../lib/media";
+import type { FileEntry, VideoDetail } from "../../types/api";
+import { ArrowUpRight, X } from "../icons";
+
+export function OmniCards() {
+  const cards = useOmniCards();
+  if (!cards.length) return null;
+  return (
+    <div className="omni-cards">
+      {cards.map(c => (
+        <article key={c.id} className={`omni-card kind-${c.kind}`}>
+          <button className="omni-card-close" aria-label="Fechar o card" onClick={() => dismissCard(c.id)}>
+            <X />
+          </button>
+          {c.kind === "reference" ? <ReferenceCard name={c.name ?? ""} /> : <VideoCards card={c} />}
+        </article>
+      ))}
+    </div>
+  );
+}
+
+const count = (n: number | null | undefined) => (n == null ? "—" : n.toLocaleString("pt-BR"));
+const PLATFORM = { youtube: "YouTube", instagram: "Instagram", tiktok: "TikTok" } as const;
+
+function VideoCards({ card }: { card: OmniCard }) {
+  const { video, error } = useVideo(card.slug ?? "");
+  if (error) return <p className="hint">Não achei o conteúdo {card.slug}.</p>;
+  if (!video) return <p className="hint">Carregando…</p>;
+  const head = (
+    <header className="omni-card-head">
+      <b>{video.title}</b>
+      <Link to="/videos/$slug" params={{ slug: video.slug }} className="link">
+        Abrir <ArrowUpRight className="ic" />
+      </Link>
+    </header>
+  );
+  switch (card.kind) {
+    case "video":
+      return (
+        <>
+          {head}
+          <Still video={video} file={chosenCover(video) ?? video.cover} />
+          <p className="omni-card-meta">
+            {video.status?.stages?.find(s => !s.ok)?.name
+              ? `Próxima etapa: ${video.status.stages.find(s => !s.ok)!.name}`
+              : "Pronto"}
+            {(["youtube", "instagram", "tiktok"] as const)
+              .filter(p => video.publication?.[p]?.url)
+              .map(p => (
+                <a key={p} href={video.publication![p]!.url!} target="_blank" rel="noreferrer" className="link">
+                  {PLATFORM[p]}
+                </a>
+              ))}
+          </p>
+        </>
+      );
+    case "thumbnails": {
+      const versions = video.thumbnail?.versions ?? [];
+      return (
+        <>
+          {head}
+          {versions.length ? (
+            <div className="omni-card-grid">
+              {versions.map(v => (
+                <figure key={v.id} className={video.thumbnail?.selected === v.id ? "selected" : ""}>
+                  <Still video={video} file={findFile(video, `thumbnail/${v.id}.png`)} />
+                  <figcaption>
+                    {v.id}
+                    {video.thumbnail?.selected === v.id ? " · na publicação" : ""}
+                  </figcaption>
+                </figure>
+              ))}
+            </div>
+          ) : (
+            <p className="hint">Este vídeo ainda não tem thumbnails.</p>
+          )}
+        </>
+      );
+    }
+    case "export": {
+      const file =
+        findFile(video, `export/${video.slug}.mp4`) ??
+        video.files.find(f => /^export\/.+\.mp4$/.test(f.path) && !/-speed-\d+\.mp4$/.test(f.path)) ??
+        null;
+      return (
+        <>
+          {head}
+          {file ? (
+            <video
+              className="omni-card-media"
+              style={{ aspectRatio: aspectRatio(video) }}
+              src={mediaUrl(video, file)!}
+              controls
+              playsInline
+              preload="metadata"
+            />
+          ) : (
+            <p className="hint">O vídeo ainda não foi exportado.</p>
+          )}
+        </>
+      );
+    }
+    case "scene":
+      return (
+        <>
+          {head}
+          <Still video={video} file={findFile(video, `motion/stills/${card.scene}.png`)} />
+          <p className="omni-card-meta">Cena {card.scene}</p>
+        </>
+      );
+    case "carousel": {
+      const jpgs = video.carousel?.export?.jpgs ?? [];
+      return (
+        <>
+          {head}
+          {jpgs.length ? (
+            <div className="omni-card-strip">
+              {jpgs.map(f => (
+                <img key={f.path} src={mediaUrl(video, f)!} alt="" loading="lazy" />
+              ))}
+            </div>
+          ) : (
+            <p className="hint">O carrossel ainda não foi exportado.</p>
+          )}
+        </>
+      );
+    }
+    case "metrics":
+      return (
+        <>
+          {head}
+          <ReelNumbers slug={video.slug} />
+        </>
+      );
+  }
+  return null;
+}
+
+function Still({ video, file }: { video: VideoDetail; file: FileEntry | null }) {
+  if (!file) return <p className="hint">Sem imagem ainda.</p>;
+  return (
+    <img
+      className="omni-card-media"
+      style={{ aspectRatio: aspectRatio(video) }}
+      src={mediaUrl(video, file)!}
+      alt=""
+      loading="lazy"
+    />
+  );
+}
+
+function ReelNumbers({ slug }: { slug: string }) {
+  const { reel } = useReel(slug);
+  if (!reel) return <p className="hint">Carregando…</p>;
+  if (!("current" in reel) || !reel.current) return <p className="hint">Este Reel ainda não tem números.</p>;
+  const m = reel.current;
+  const rows: [string, string][] = [
+    ["Views", count(m.views)],
+    ["Assistido", m.watched_pct == null ? "—" : `${m.watched_pct}%`],
+    ["Pulam nos 3 s", m.skip_3s_pct == null ? "—" : `${m.skip_3s_pct}%`],
+    ["Salvamentos", count(m.saves)],
+    ["Compartilhamentos", count(m.shares)],
+    ["Comentários", count(m.comments)],
+  ];
+  return (
+    <dl className="omni-card-numbers">
+      {rows.map(([k, v]) => (
+        <div key={k}>
+          <dt>{k}</dt>
+          <dd>{v}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}
+
+function ReferenceCard({ name }: { name: string }) {
+  const { reference: r, error } = useReference(name);
+  if (error) return <p className="hint">Não achei o estilo visual {name}.</p>;
+  if (!r) return <p className="hint">Carregando…</p>;
+  const frame = referenceFileUrl(name, r.frame);
+  return (
+    <>
+      <header className="omni-card-head">
+        <b>{r.title}</b>
+        <Link to="/styles/$name" params={{ name }} className="link">
+          Abrir <ArrowUpRight className="ic" />
+        </Link>
+      </header>
+      {frame && <img className="omni-card-media" src={frame} alt="" loading="lazy" />}
+      {r.essence && <p className="omni-card-meta">{r.essence}</p>}
+    </>
+  );
+}

package/studio/web/components/Omni/OmniGlow.tsx

@@ -0,0 +1,183 @@
+/* The light around Omni's cards (the dock and the sidebar button), from two libraries.dev libraries (MIT):
+   border-beam while Omni listens (a mono line along the bottom: black on the light theme) or thinks (a
+   mono beam turning around the whole border), and voice-glow while it speaks, in the colors of the
+   avatar the user chose, rising with Omni's voice. Both wrappers are always there and only switch on and
+   off, so the card inside never remounts (the transcript and the text field keep their state). */
+
+import type { CSSProperties, ReactNode } from "react";
+import { useMemo } from "react";
+import { BorderBeam } from "border-beam";
+import { VoiceBeam } from "voice-glow";
+import { orbPalette } from "../../lib/avatars";
+
+export type OmniGlowState = "off" | "listening" | "thinking" | "speaking";
+
+/* "hsl(h s% l%)" (orbPalette) → "#rrggbb": voice-glow only reads hex and rgb() */
+function hslHex(color: string): string {
+  const m = /hsl\((\d+(?:\.\d+)?)\s+(\d+(?:\.\d+)?)%\s+(\d+(?:\.\d+)?)%\)/.exec(color);
+  if (!m) return color;
+  const h = Number(m[1]);
+  const s = Number(m[2]) / 100;
+  const l = Number(m[3]) / 100;
+  const k = (n: number) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return `#${[0, 8, 4]
+    .map(n =>
+      Math.round(f(n) * 255)
+        .toString(16)
+        .padStart(2, "0"),
+    )
+    .join("")}`;
+}
+
+/* the avatar's three colors as voice-glow's seven lobes (the center, then pairs outward) and its band */
+function voiceColors(face: string) {
+  const [main, light, deep] = orbPalette(face).map(hslHex);
+  return {
+    lobes: [main, light, deep, main, light, deep, main],
+    band: { core: main, above: light, mid: main, below: deep },
+  };
+}
+
+/* The library's mono variant is barely there on a white card (alphas of 0.14 and less, by design), so the
+   beam is its colorful variant, which carries real alpha, turned to one tone by a filter on its layers:
+   black while Omni listens, gray while it thinks. `!important` wins over the library's hue-shift
+   animations, which run on the same `filter`; the bloom keeps its blur. Its opacity hooks (they
+   multiply each layer) lift it a little. */
+const TONE = { listening: "grayscale(1) brightness(0)", thinking: "grayscale(1) brightness(0.55)" } as const;
+const toneCss = (tone: string, bloomBlur: number) => `
+[data-beam="{id}"][data-active]::after, [data-beam="{id}"][data-active]::before,
+[data-beam="{id}"][data-fading]::after, [data-beam="{id}"][data-fading]::before { filter: ${tone} !important; }
+[data-beam="{id}"] [data-beam-bloom] { filter: blur(${bloomBlur}px) ${tone} !important; }`;
+const BEAM_BOOST: Record<"listening" | "thinking", CSSProperties> = {
+  listening: { "--beam-stroke-opacity": 4, "--beam-inner-opacity": 3, "--beam-bloom-opacity": 3 } as CSSProperties,
+  thinking: { "--beam-stroke-opacity": 5, "--beam-inner-opacity": 3, "--beam-bloom-opacity": 2 } as CSSProperties,
+};
+
+/* the border beam around a card: a black line sliding along the bottom while Omni listens, a gray beam
+   turning around the whole border while it thinks */
+export function OmniBeamFrame({
+  state,
+  radius,
+  compact = false,
+  className,
+  style,
+  children,
+}: {
+  state: OmniGlowState;
+  radius: number;
+  /* the sidebar button: the smaller turning beam */
+  compact?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}) {
+  const tone = state === "thinking" ? "thinking" : "listening";
+  return (
+    <BorderBeam
+      className={className}
+      style={{ ...BEAM_BOOST[tone], ...style }}
+      size={state === "thinking" ? (compact ? "sm" : "md") : "line"}
+      colorVariant="colorful"
+      staticColors
+      theme="auto"
+      css={toneCss(TONE[tone], tone === "thinking" ? 8 : 6)}
+      borderRadius={radius}
+      active={state === "listening" || state === "thinking"}
+    >
+      {children}
+    </BorderBeam>
+  );
+}
+
+/* The voice glow, in the avatar's colors: it rises from the bottom edge of what it wraps with Omni's voice.
+   Tuned livelier than the library's defaults: it answers a syllable in about 60 ms and lets go in 250, goes
+   higher and wider, flows faster and bends and warps more, so the sound wave reads in it. On the dock
+   (not compact) it is kept low, and `frost` lays a pane of frosted glass over it: the page's background at
+   10 % with an extra-small blur, so the wave reads softer, like light behind glass. */
+export function OmniVoice({
+  active,
+  face,
+  level,
+  radius,
+  compact = false,
+  frost = false,
+  className,
+  style,
+  children,
+}: {
+  active: boolean;
+  face: string;
+  /* Omni's voice, 0–1, read every frame */
+  level: () => number;
+  radius: number;
+  /* the sidebar button: voice-glow's pill geometry */
+  compact?: boolean;
+  /* the frosted pane over the wave (the dock) */
+  frost?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}) {
+  const colors = useMemo(() => voiceColors(face), [face]);
+  return (
+    <VoiceBeam
+      className={className}
+      style={style}
+      type={compact ? "pill" : "default"}
+      level={level}
+      colors={colors.lobes}
+      bandColors={colors.band}
+      theme="auto"
+      borderRadius={radius}
+      active={active}
+      attack={0.06}
+      release={0.25}
+      idle={0.1}
+      reach={compact ? 2.2 : 1.1}
+      spread={compact ? 1.4 : 1.6}
+      flow={compact ? 140 : 120}
+      bend={compact ? 40 : 90}
+      distortion={0.9}
+      bandStrength={1.9}
+      coreSize={1.3}
+      coreLight={0.4}
+      saturation={2}
+      innerOpacity={1.5}
+      innerHeight={compact ? 1 : 0.55}
+    >
+      {children}
+      {frost && <div className="omni-voice-frost" aria-hidden="true" />}
+    </VoiceBeam>
+  );
+}
+
+/* both around one element: the sidebar button */
+export function OmniGlow({
+  state,
+  face,
+  level,
+  radius,
+  compact = false,
+  className,
+  style,
+  children,
+}: {
+  state: OmniGlowState;
+  face: string;
+  level: () => number;
+  radius: number;
+  compact?: boolean;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}) {
+  return (
+    <OmniBeamFrame state={state} radius={radius} compact={compact} className={className} style={style}>
+      <OmniVoice active={state === "speaking"} face={face} level={level} radius={radius} compact={compact}>
+        {children}
+      </OmniVoice>
+    </OmniBeamFrame>
+  );
+}

package/studio/web/components/Omni/OmniHistory.tsx

@@ -0,0 +1,119 @@
+/* Conversas: Omni's earlier conversations (api/services/agent-history.ts), the ones that had a
+   genuine request. The list, newest first; one opened reads as it was (transcript, tools and what
+   became of each card) with "Continuar", which starts a call carrying that history, and "Apagar". */
+
+import { useState } from "react";
+import { api, enc, read, send } from "../../lib/api";
+import { invalidate, queryKeys } from "../../lib/query-client";
+import { useLiveQuery } from "../../hooks/useLiveQuery";
+import type { OmniEntry } from "../../lib/omni-realtime";
+import type { Conversation, ConversationSummary } from "../../../shared/schemas/agent-history";
+import { Transcript } from "./Transcript";
+
+const when = (iso: string) =>
+  new Date(iso).toLocaleString("pt-BR", { day: "2-digit", month: "short", hour: "2-digit", minute: "2-digit" });
+
+const MODE_LABEL: Record<Conversation["mode"], string> = { grok: "Grok", stream: "Streaming", chunks: "Trechos" };
+
+const ACTION_STATE: Record<Conversation["actions"][number]["state"], string> = {
+  staged: "Ficou esperando Confirmar",
+  confirmed: "Confirmado",
+  failed: "Falhou",
+  canceled: "Cancelado",
+};
+
+export function OmniHistory({
+  canContinue,
+  onContinue,
+}: {
+  /* false while a call is live: one conversation at a time */
+  canContinue: boolean;
+  onContinue: (c: Conversation) => void;
+}) {
+  const { data, error } = useLiveQuery(queryKeys.agentConversations, () => api.agent.conversations.$get());
+  const list: ConversationSummary[] | null = data;
+  const [open, setOpen] = useState<Conversation | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [message, setMessage] = useState<string | null>(null);
+
+  const openOne = async (id: string) => {
+    setMessage(null);
+    try {
+      setOpen((await read(api.agent.conversations[":id"].$get({ param: { id: enc(id) } }))) as Conversation);
+    } catch (e) {
+      setMessage(String((e as Error)?.message ?? e));
+    }
+  };
+  const remove = async (id: string) => {
+    setBusy(true);
+    const r = await send(api.agent.conversations[":id"].delete.$post({ param: { id: enc(id) }, json: {} }));
+    setBusy(false);
+    if (!r.ok) return setMessage(r.error ?? "não deu para apagar");
+    setOpen(null);
+    void invalidate(queryKeys.agentConversations);
+  };
+
+  if (open)
+    return (
+      <div className="omni-history-one">
+        <header>
+          <button type="button" className="subtle-link" onClick={() => setOpen(null)}>
+            Todas as conversas
+          </button>
+          <b>{open.title}</b>
+          <small className="subtle">
+            {when(open.updated_at)} · {MODE_LABEL[open.mode]}
+          </small>
+        </header>
+        {!!open.actions.length && (
+          <ul className="omni-history-actions">
+            {open.actions.map(a => (
+              <li key={a.id} className={a.state}>
+                <span>{a.summary}</span>
+                <small>{ACTION_STATE[a.state]}</small>
+              </li>
+            ))}
+          </ul>
+        )}
+        <Transcript entries={open.entries as OmniEntry[]} onFeedback={() => {}} />
+        <div className="omni-history-buttons">
+          <button type="button" className="button small danger" disabled={busy} onClick={() => void remove(open.id)}>
+            Apagar
+          </button>
+          <button
+            type="button"
+            className="button small primary"
+            disabled={!canContinue || busy}
+            title={canContinue ? "Começa uma conversa com esta história" : "Encerre a conversa de agora primeiro"}
+            onClick={() => onContinue(open)}
+          >
+            Continuar
+          </button>
+        </div>
+        {message && <p className="response error">{message}</p>}
+      </div>
+    );
+
+  return (
+    <div className="omni-history">
+      {error && <p className="response error">{error}</p>}
+      {list && !list.length && (
+        <p className="subtle omni-history-empty">
+          Nenhuma conversa guardada ainda. Uma conversa entra aqui quando tem um pedido de verdade.
+        </p>
+      )}
+      {list?.map(c => (
+        <button key={c.id} type="button" className="omni-history-row" onClick={() => void openOne(c.id)}>
+          <b>{c.title}</b>
+          <small className="subtle">
+            {when(c.updated_at)} · {MODE_LABEL[c.mode]}
+            {c.actions
+              ? ` · ${c.confirmed} de ${c.actions} ${c.actions === 1 ? "pedido confirmado" : "pedidos confirmados"}`
+              : ""}
+          </small>
+        </button>
+      ))}
+      {message && <p className="response error">{message}</p>}
+    </div>
+  );
+}

package/studio/web/components/Omni/OmniHotword.tsx

@@ -0,0 +1,40 @@
+/* The "Oi, Omni" switch in Omni's settings (hooks/useOmniHotword): on, the microphone stays open in one
+   studio tab and saying "Oi, Omni", "Ei, Omni" or "Omni" opens the panel and starts the conversation.
+   Under it, what the listener is doing now. */
+
+import type { HotwordStatus } from "../../hooks/useOmniHotword";
+import { Switch } from "../ui/switch";
+
+const STATUS: Record<HotwordStatus, string> = {
+  off: "O microfone fica aberto e só o começo de cada fala vai para a transcrição.",
+  starting: "Abrindo o microfone…",
+  listening: "Ouvindo. É só dizer “Oi, Omni”.",
+  blocked: "Clique em qualquer lugar do estúdio para começar a ouvir.",
+  paused: "Pausado durante a conversa.",
+  elsewhere: "Ouvindo em outra aba do estúdio.",
+  limit: "",
+  error: "",
+};
+
+export function OmniHotword({
+  on,
+  onChange,
+  status,
+  error,
+}: {
+  on: boolean;
+  onChange: (on: boolean) => void;
+  status: HotwordStatus;
+  error: string | null;
+}) {
+  const line = error ?? STATUS[status];
+  return (
+    <div className="omni-hotword">
+      <label className="toggle-switch">
+        <Switch checked={on} onCheckedChange={onChange} />
+        <span>Chamar com “Oi, Omni”</span>
+      </label>
+      {line && <p className={status === "error" || status === "limit" ? "response error" : "subtle"}>{line}</p>}
+    </div>
+  );
+}