@crievo/omni 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,743 @@
+/* Omni, a panel that opens from the sidebar's Omni button (the avatar chosen in the settings, always the same
+   color; components/Sidebar) and whose top bar drags it to any edge. Open, it has just the avatar and the name in the center
+   (the saved greeting plays as it opens; the avatar starts the conversation) and a gear for the
+   settings: Omni's avatar and voice. Once the conversation is live: status, transcript with the tools called, the action
+   waiting for "Confirmar" and a text field. It lives in the app shell, so the conversation goes on while the
+   user moves between screens. The measurements are the /agent page.
+
+   Conversas (the clock button, outside a call): the earlier conversations that had a genuine request,
+   to read again or continue. Waiting (wait_for_work): the call sleeps with only the microphone open,
+   the avatar dimmed, until the user speaks or the studio's work ends.
+
+   Two modes. Voice: Grok Voice, live, up to the day's quota (agent.limits.daily_voice_min).
+   Claude: past the quota, the user speaks (or types), the speech is transcribed and the user's own
+   Claude answers in text; it costs almost nothing. */
+
+import { useEffect, useRef, useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { useAvatarAudioReactive } from "../../hooks/useAvatarAudioReactive";
+import { useOmniDock } from "../../hooks/useOmniDock";
+import {
+  type ChatAsk,
+  omniLevel,
+  publishOmniPanel,
+  registerOmniAskChat,
+  registerOmniLevel,
+  registerOmniToggle,
+} from "../../lib/omni-panel";
+import { useOmniGreeting } from "../../hooks/useOmniGreeting";
+import { useNow } from "../../hooks/useNow";
+import { type OmniMode, useAgentInfo, useOmniConversation } from "../../hooks/useOmniAgent";
+import { OMNI_ENGINES } from "../../../shared/omni-admin";
+import { type ClaudeStatus, useOmniClaude } from "../../hooks/useOmniClaude";
+import type { OmniStatus } from "../../lib/omni-realtime";
+import {
+  ArrowLeft,
+  ChatCircleText,
+  Gear,
+  History,
+  Microphone,
+  Minus,
+  PaperPlane,
+  PhoneDisconnect,
+  Stop,
+  X,
+} from "../icons";
+import { VoiceAvatar } from "../VoiceAvatar";
+import { PendingActions } from "./PendingActions";
+import { OmniCards } from "./OmniCards";
+import { clearCards, useOmniCards } from "../../lib/omni-cards";
+import { Transcript } from "./Transcript";
+import { Tip } from "../ui/tooltip";
+import { OmniBeamFrame, type OmniGlowState, OmniVoice } from "./OmniGlow";
+import { OmniAvatarPicker } from "./OmniAvatarPicker";
+import { OmniMicSelect } from "./OmniMicSelect";
+import { OmniHistory } from "./OmniHistory";
+import { OmniHotword } from "./OmniHotword";
+import { useOmniHotword } from "../../hooks/useOmniHotword";
+
+/* Omni's face until one is chosen in the settings: the same drawing and color everywhere, whatever the voice */
+export const OMNI_AVATAR = "omni-ara";
+
+/* a call where the user says nothing: Omni asks after this many seconds, and hangs up after these */
+const ASK_AFTER_S = 6;
+const CLOSE_AFTER_S = 10;
+/* the call the panel opened by itself: with no word from the user this long after the greeting, it
+   ends quietly and the panel shows its buttons */
+const AUTO_CLOSE_S = 10;
+
+/* What is left of today's Grok voice. On top "Minutos de conversa" on the left and the % on the right,
+   then the bar (full while there is all of it, empty at the quota) and under it, on the right, the time
+   left. */
+function VoiceQuota({ leftS, dailyMin }: { leftS: number; dailyMin: number }) {
+  if (dailyMin <= 0) return null;
+  const pct = Math.round(Math.max(0, Math.min(1, leftS / (dailyMin * 60))) * 100);
+  const left = clock(Math.max(0, leftS) * 1000);
+  const label = leftS > 0 ? `Minutos de conversa: ${left} restantes` : "A cota de voz de hoje acabou";
+  return (
+    <div className={`omni-usage${pct <= 20 ? " low" : ""}`} title={label}>
+      <div className="omni-usage-line">
+        <span>Minutos de conversa</span>
+        <span>{pct}%</span>
+      </div>
+      <div
+        className="omni-meter"
+        role="progressbar"
+        aria-label={label}
+        aria-valuenow={pct}
+        aria-valuemin={0}
+        aria-valuemax={100}
+      >
+        <i style={{ width: `${pct}%` }} />
+      </div>
+      <div className="omni-usage-line end">
+        <span>{left} restantes</span>
+      </div>
+    </div>
+  );
+}
+
+const STATUS_TEXT: Record<OmniStatus, string> = {
+  idle: "Agente de voz",
+  connecting: "Conectando…",
+  listening: "Ouvindo",
+  user: "Você está falando",
+  thinking: "Pensando…",
+  speaking: "Falando",
+  waiting: "Esperando o estúdio",
+  error: "A conversa parou",
+};
+const CLAUDE_TEXT: Record<ClaudeStatus, string> = {
+  idle: "Modo texto · seu Claude responde",
+  recording: "Ouvindo… toque para enviar",
+  transcribing: "Transcrevendo…",
+  thinking: "O Claude está pensando…",
+};
+/* the bubble's ring in Claude mode, in the voice mode's classes */
+const CLAUDE_BUBBLE: Record<ClaudeStatus, OmniStatus> = {
+  idle: "idle",
+  recording: "user",
+  transcribing: "thinking",
+  thinking: "thinking",
+};
+
+/* how Omni hears and speaks: the admin picks it for everyone (admin panel, agent.engine); the label
+   shows in the call's status line */
+const MODES: { id: OmniMode; label: string }[] = OMNI_ENGINES.map(e => ({
+  id: e.id,
+  label: e.label,
+}));
+
+const clock = (ms: number) => {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  return `${Math.floor(s / 60)}:${String(s % 60).padStart(2, "0")}`;
+};
+
+export function OmniWidget({ menuCollapsed }: { menuCollapsed: boolean }) {
+  const { info, error: infoError } = useAgentInfo();
+  /* Omni's face, as chosen in the settings */
+  const face = info?.config.avatar ?? OMNI_AVATAR;
+  const [quotaHit, setQuotaHit] = useState(false);
+  /* the engine the admin picked, for every user (admin panel) */
+  const mode: OmniMode = info?.config.engine ?? "grok";
+  const grokOn = mode === "grok";
+  const conv = useOmniConversation({ onQuota: () => setQuotaHit(true) });
+  const claude = useOmniClaude();
+  const [open, setOpen] = useState(false);
+  const [settings, setSettings] = useState(false);
+  /* the Conversas list in place of the stage */
+  const [history, setHistory] = useState(false);
+  /* the chat (transcript and text field) is closed by default; the chat button opens it */
+  const [chatOpen, setChatOpen] = useState(false);
+  const greeting = useOmniGreeting();
+  const [text, setText] = useState("");
+  const root = useRef<HTMLDivElement>(null);
+  const live = conv.status !== "idle" && conv.status !== "error";
+  /* what Omni showed in the panel (show_card) goes away with the call */
+  const cards = useOmniCards();
+  useEffect(() => {
+    if (!live) clearCards();
+  }, [live]);
+  useEffect(() => {
+    if (!live) setChatOpen(false);
+  }, [live]);
+  /* the admin switched Omni off or moved it to another engine: the call on the old one ends here */
+  const { stop: stopCall } = conv;
+  useEffect(() => {
+    if (live && info && (!info.config.enabled || info.config.engine !== conv.mode)) stopCall();
+  }, [live, info, conv.mode, stopCall]);
+  /* the voice quota is Grok's: the cascade modes go on past it */
+  const claudeMode = !live && mode === "grok" && (quotaHit || (!!info && info.voice_left_s <= 0));
+  const now = useNow(1000);
+  const elapsed = conv.startedAt ? now - conv.startedAt : 0;
+  /* The avatar follows the sound wave: Omni's voice while it speaks (the avatar grows a little with
+     it) and the user's while Omni listens (it shrinks a little), in a voice conversation and in Claude
+     mode alike. In silence it stays at its size. */
+  const analyser = useRef<AnalyserNode | null>(null);
+  const speaking = greeting.playing || (!claudeMode && conv.status === "speaking");
+  const listening = claudeMode ? claude.status === "recording" : conv.status === "listening" || conv.status === "user";
+  analyser.current = speaking
+    ? greeting.playing
+      ? greeting.analyser.current
+      : conv.analyser.current
+    : claudeMode
+      ? claude.analyser.current
+      : conv.micAnalyser.current;
+  /* Omni's own voice (the greeting or the call), for the glow while it speaks. The analyser's frequency data
+     is smoothed over several frames (it would blur the wave), so the level is read from the raw waveform: the
+     RMS of the last ~20 ms, with gain and a square root, so quiet syllables already move it and loud ones
+     reach the top (voice-glow's own attack and release do the rest). */
+  const voiceAnalyser = useRef<AnalyserNode | null>(null);
+  voiceAnalyser.current = greeting.playing ? greeting.analyser.current : conv.analyser.current;
+  useEffect(() => {
+    let wave: Uint8Array<ArrayBuffer> | null = null;
+    registerOmniLevel(() => {
+      const an = voiceAnalyser.current;
+      if (!an) return 0;
+      if (wave?.length !== an.fftSize) wave = new Uint8Array(an.fftSize);
+      an.getByteTimeDomainData(wave);
+      let sum = 0;
+      for (let i = 0; i < wave.length; i++) {
+        const v = (wave[i] - 128) / 128;
+        sum += v * v;
+      }
+      return Math.min(1, Math.sqrt(Math.sqrt(sum / wave.length) * 5));
+    });
+    return () => registerOmniLevel(null);
+  }, []);
+  useAvatarAudioReactive(
+    speaking || listening,
+    root,
+    analyser,
+    /* the panel's avatars and the sidebar button's */
+    () =>
+      Array.from(document.querySelectorAll<HTMLCanvasElement>(".omni-widget .voice-avatar, .menu-omni .voice-avatar")),
+    speaking ? "up" : "down",
+  );
+
+  /* an action waiting for Confirmar opens the panel: the button has to be seen */
+  const pendingCount = conv.pending.length;
+  useEffect(() => {
+    if (pendingCount) setOpen(true);
+  }, [pendingCount]);
+  const collapse = () => {
+    greeting.stop();
+    setSettings(false);
+    setHistory(false);
+    setOpen(false);
+  };
+  /* Esc collapses (the conversation goes on) */
+  useEffect(() => {
+    if (!open) return;
+    const esc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") collapse();
+    };
+    window.addEventListener("keydown", esc);
+    return () => window.removeEventListener("keydown", esc);
+  }, [open]);
+  /* Opening the panel starts the conversation by itself, with the recorded greeting as Omni's first words
+     (the voice sample, no model behind it), said through the call: the microphone is open from the start
+     and the user can talk over it, which stops it and is heard like any turn. If the user says nothing for
+     AUTO_CLOSE_S after it, the call ends quietly and the panel shows Começar and Conversas. Not over a live
+     conversation, nor with Omni unavailable or in Claude mode (the voice quota is over): there the greeting
+     alone plays, outside any call, as before. */
+  const [autoCall, setAutoCall] = useState(false);
+  const toggle = () => {
+    if (open) return collapse();
+    setOpen(true);
+    if (live || !info) return;
+    if (!info.config.enabled || unavailable || claudeMode) return greeting.play(info.config.gender);
+    setAutoCall(true);
+    void conv.start(mode, undefined, { greet: info.config.gender, holdIdle: true });
+  };
+  /* the sidebar's button opens and closes the panel; it shows the ring and the face from here */
+  const toggleRef = useRef(toggle);
+  toggleRef.current = toggle;
+  useEffect(() => {
+    registerOmniToggle(() => toggleRef.current());
+    return () => registerOmniToggle(null);
+  }, []);
+  const startConversation = () => {
+    greeting.stop();
+    setAutoCall(false);
+    void conv.start(mode);
+  };
+
+  const submit = () => {
+    if (!text.trim()) return;
+    /* typing is using the chat: it stays open even if Omni opened it */
+    askedChat.current = null;
+    if (claudeMode) claude.sendText(text);
+    else conv.sendText(text);
+    setText("");
+  };
+  const status = claudeMode
+    ? CLAUDE_TEXT[claude.status]
+    : live
+      ? `${STATUS_TEXT[conv.status]} · ${clock(elapsed)} · ${MODES.find(m => m.id === conv.mode)?.label ?? ""}`
+      : STATUS_TEXT[conv.status];
+  const unavailable = infoError ?? info?.error ?? null;
+  /* A call starts and the user says nothing: at ASK_AFTER_S Omni asks, with the recorded "no que posso
+     ajudar?"; at CLOSE_AFTER_S it hangs up. The microphone is muted while the clip plays (it is not on the
+     call's output, so echo cancellation can't take it out) and goes back as it was. */
+  const userSpoke = conv.status === "user" || conv.entries.some(e => e.kind === "user");
+  const callOn = live && conv.status !== "connecting";
+  const mutedForPrompt = useRef(false);
+  /* the timers fire seconds after the effect ran: they read what is current then, not what was */
+  const latest = useRef({ conv, info, greeting });
+  latest.current = { conv, info, greeting };
+  useEffect(() => {
+    /* the cascade modes ask and hang up on their own, in their own voice (lib/omni-cascade) */
+    if (!callOn || userSpoke || autoCall || conv.mode !== "grok") return;
+    const ask = setTimeout(() => {
+      const { conv: c, info: i, greeting: g } = latest.current;
+      if (!i) return;
+      if (!c.muted) {
+        c.setMuted(true);
+        mutedForPrompt.current = true;
+      }
+      g.play(i.config.gender, "prompt");
+    }, ASK_AFTER_S * 1000);
+    const close = setTimeout(() => latest.current.conv.stop(), CLOSE_AFTER_S * 1000);
+    return () => {
+      clearTimeout(ask);
+      clearTimeout(close);
+    };
+  }, [callOn, userSpoke, autoCall, conv.mode]);
+  const { playing: greetingPlaying } = greeting;
+  useEffect(() => {
+    if (!greetingPlaying && mutedForPrompt.current) {
+      mutedForPrompt.current = false;
+      latest.current.conv.setMuted(false);
+    }
+  }, [greetingPlaying]);
+  /* the call the panel opened: once the user speaks it is a conversation like any other (the engine's
+     own silence handling comes back); in silence after the greeting, it ends quietly */
+  const { holdIdle, discard } = conv;
+  useEffect(() => {
+    if (!autoCall) return;
+    if (conv.status === "error") return setAutoCall(false);
+    if (userSpoke) {
+      holdIdle(false);
+      return setAutoCall(false);
+    }
+    /* counted from when the greeting ended and Omni listens */
+    if (conv.status !== "listening") return;
+    const close = setTimeout(() => {
+      discard();
+      setAutoCall(false);
+    }, AUTO_CLOSE_S * 1000);
+    return () => clearTimeout(close);
+  }, [autoCall, conv.status, userSpoke, holdIdle, discard]);
+  /* "Oi, Omni" (the switch in the settings): starts the conversation the way opening the panel does (a
+     silent call ends by itself); in Claude mode it starts the recording. With the menu expanded the call
+     starts minimized, living in the sidebar card (its icon or a click opens the dock); with the menu
+     collapsed there is no card to show it, so the dock opens. Claude mode always opens it: the
+     recording's button is there. It sleeps while Omni talks. */
+  const callByVoice = () => {
+    if (live || !info?.config.enabled || unavailable) return;
+    greeting.stop();
+    setSettings(false);
+    setHistory(false);
+    if (menuCollapsed || claudeMode) setOpen(true);
+    if (claudeMode) {
+      if (claude.status === "idle") void claude.toggleRecording();
+      return;
+    }
+    setAutoCall(true);
+    void conv.start(mode, undefined, { greet: info.config.gender, holdIdle: true });
+  };
+  const hotword = useOmniHotword({
+    available: !!info?.config.enabled && !unavailable,
+    busy: live || conv.status === "connecting" || greeting.playing || claude.status !== "idle",
+    onCall: callByVoice,
+  });
+  /* in Claude mode the text is the whole conversation, so the chat is always there */
+  const chatShown = claudeMode || chatOpen;
+  /* the chat open in a call: the dock grows, the avatar and the name go up to the corner, in a line */
+  const chatMode = live && chatOpen && !settings;
+  const entries = [...conv.entries, ...claude.entries];
+  const claudeBusy = claude.status === "transcribing" || claude.status === "thinking";
+  const bubble = claudeMode ? CLAUDE_BUBBLE[claude.status] : conv.status;
+  /* the panel's top bar drags it to one of the four corners; the corner is remembered */
+  const dock = useOmniDock(open);
+  /* ask_in_chat: Omni needs a link or a text, so the chat opens with the field focused. It was opened for
+     that, so the first thing the user says by voice (a no, another direction) closes it again; typing or
+     closing it by hand makes it the user's. askedChat holds the user messages already there. */
+  const askedChat = useRef<Set<string> | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [focusInput, setFocusInput] = useState(0);
+  const [asking, setAsking] = useState<ChatAsk | null>(null);
+  const userIds = () => new Set(entries.filter(e => e.kind === "user").map(e => e.id));
+  const askRef = useRef<(what: ChatAsk) => boolean>(() => false);
+  askRef.current = what => {
+    if (!live) return false;
+    greeting.stop();
+    askedChat.current = userIds();
+    setSettings(false);
+    setHistory(false);
+    setOpen(true);
+    setChatOpen(true);
+    setAsking(what);
+    setFocusInput(n => n + 1);
+    return true;
+  };
+  useEffect(() => {
+    registerOmniAskChat(what => askRef.current(what));
+    return () => registerOmniAskChat(null);
+  }, []);
+  useEffect(() => {
+    if (focusInput && chatMode) inputRef.current?.focus();
+  }, [focusInput, chatMode]);
+  const spoken = conv.entries;
+  useEffect(() => {
+    const seen = askedChat.current;
+    if (!seen || !spoken.some(e => e.kind === "user" && !seen.has(e.id))) return;
+    askedChat.current = null;
+    setAsking(null);
+    setChatOpen(false);
+  }, [spoken]);
+  useEffect(() => {
+    if (!chatOpen) {
+      askedChat.current = null;
+      setAsking(null);
+    }
+  }, [chatOpen]);
+  const available = !info || info.config.enabled || live;
+  /* the light around the card (and the sidebar button): Omni's voice in the avatar's colors while it
+     speaks, a turning gray beam while it thinks, a black line while it listens; none outside a call */
+  const glow: OmniGlowState = speaking
+    ? "speaking"
+    : bubble === "thinking" || bubble === "connecting"
+      ? "thinking"
+      : bubble === "listening" || bubble === "user" || bubble === "waiting"
+        ? "listening"
+        : "off";
+  useEffect(() => {
+    publishOmniPanel({
+      available,
+      face: info ? face : null,
+      open,
+      ring: bubble,
+      glow,
+    });
+  }, [available, info, face, open, bubble, glow]);
+  /* while the agent works without speaking, the name gives way to a shimmering "pensando…" */
+  const omniName = bubble === "thinking" ? <b className="omni-name-thinking">Pensando…</b> : <b>Omni</b>;
+  /* agent.enabled false: Omni is off, no button and no panel (a live conversation still ends normally) */
+  if (info && !info.config.enabled && !live) return null;
+
+  const textForm = (
+    <form
+      className="omni-text"
+      onSubmit={e => {
+        e.preventDefault();
+        submit();
+      }}
+    >
+      <div className="omni-input">
+        <input
+          value={text}
+          onChange={e => setText(e.target.value)}
+          ref={inputRef}
+          placeholder={asking === "link" ? "Cole o link…" : asking === "text" ? "Escreva o texto…" : "Escreva ou cole…"}
+          aria-label="Mensagem para o Omni"
+          disabled={(claudeMode && claudeBusy) || conv.status === "connecting"}
+        />
+        <Tip label="Enviar">
+          <button
+            className="omni-send"
+            type="submit"
+            disabled={!text.trim() || (claudeMode && claudeBusy)}
+            aria-label="Enviar"
+          >
+            <PaperPlane />
+          </button>
+        </Tip>
+      </div>
+    </form>
+  );
+
+  /* Ajustes ends the call: the greeting (or the conversation) stops and the line hangs up, so the settings
+     open on a quiet panel, with the avatar picker free (it is locked while the call is live) */
+  const openSettings = () => {
+    greeting.stop();
+    /* a call the panel opened by itself and nobody spoke in leaves quietly, like its own silence timeout */
+    if (autoCall && !userSpoke) discard();
+    else if (live) conv.stop();
+    setAutoCall(false);
+    setSettings(true);
+  };
+  /* the header's buttons, reused when the chat moves the gear next to the close */
+  const gearButton = (
+    <button
+      type="button"
+      className="mini-button omni-icon-button outlined"
+      onClick={openSettings}
+      aria-label="Configurar o Omni"
+      title="Ajustes do Omni"
+    >
+      <Gear />
+    </button>
+  );
+  /* Minimize (in a call): the panel goes away and the call goes on in the sidebar button alone, which
+     carries the same light; the button brings the panel back. Close: ends the call, if there is one. */
+  const minimizeButton = live && (
+    <button
+      type="button"
+      className="mini-button omni-icon-button ghost"
+      onClick={collapse}
+      aria-label="Minimizar o Omni"
+      title="Minimizar · a conversa segue no menu (Esc)"
+    >
+      <Minus />
+    </button>
+  );
+  const closeButton = (
+    <button
+      type="button"
+      className="mini-button omni-icon-button ghost"
+      onClick={() => {
+        if (live) conv.stop();
+        collapse();
+      }}
+      aria-label={live ? "Encerrar e fechar o Omni" : "Fechar o Omni"}
+      title={live ? "Encerrar a conversa e fechar" : "Fechar"}
+    >
+      <X />
+    </button>
+  );
+  const windowButtons = (
+    <span className="omni-top-actions">
+      {minimizeButton}
+      {closeButton}
+    </span>
+  );
+
+  return (
+    <div ref={root} className={`omni-widget${open ? " open" : ""}${dock.dragging ? " dragging" : ""}`}>
+      {open && (
+        <OmniBeamFrame state={glow} radius={16} className="omni-dock" style={dock.cardStyle}>
+          <section
+            className={`omni-panel ${bubble}${settings ? " settings" : ""}${chatMode ? " chat" : ""}`}
+            aria-label="Omni"
+          >
+            {/* the voice glow rises from the bottom of this block, so it sits above the footer's buttons */}
+            <OmniVoice
+              active={glow === "speaking"}
+              face={face}
+              level={omniLevel}
+              radius={0}
+              frost
+              className="omni-voice"
+            >
+              <header className="omni-panel-top" onPointerDown={dock.start}>
+                {settings || history ? (
+                  <>
+                    <button
+                      type="button"
+                      className="mini-button omni-icon-button ghost back"
+                      onClick={() => {
+                        setSettings(false);
+                        setHistory(false);
+                      }}
+                      aria-label="Voltar"
+                      title="Voltar"
+                    >
+                      <ArrowLeft />
+                    </button>
+                    <b className="omni-panel-heading">{settings ? "Ajustes do Omni" : "Conversas"}</b>
+                  </>
+                ) : chatMode ? (
+                  <div className="omni-inline-id">
+                    <VoiceAvatar seed={face} size={36} />
+                    {omniName}
+                  </div>
+                ) : (
+                  gearButton
+                )}
+                {chatMode ? (
+                  <span className="omni-top-actions">
+                    {gearButton}
+                    {minimizeButton}
+                    {closeButton}
+                  </span>
+                ) : (
+                  windowButtons
+                )}
+              </header>
+
+              {settings ? (
+                <div className="omni-panel-body">
+                  {info && <OmniAvatarPicker avatar={info.config.avatar} gender={info.config.gender} disabled={live} />}
+                  {info && grokOn && (
+                    <VoiceQuota leftS={info.voice_left_s} dailyMin={info.config.limits.daily_voice_min} />
+                  )}
+                  <OmniHotword on={hotword.on} onChange={hotword.setOn} status={hotword.status} error={hotword.error} />
+                  <Link to="/agent" className="omni-measures subtle" onClick={collapse}>
+                    Ver as medições do Omni
+                  </Link>
+                </div>
+              ) : history ? (
+                <div className="omni-panel-body">
+                  <OmniHistory
+                    canContinue={!live}
+                    onContinue={c => {
+                      setHistory(false);
+                      greeting.stop();
+                      void conv.start(mode, c);
+                      setChatOpen(true);
+                    }}
+                  />
+                </div>
+              ) : (
+                <>
+                  {!chatMode && (
+                    <div className="omni-stage">
+                      {live || claudeMode ? (
+                        <VoiceAvatar seed={face} size={claudeMode ? 104 : 136} />
+                      ) : (
+                        <button
+                          type="button"
+                          className="omni-stage-avatar"
+                          onClick={() =>
+                            greeting.playing ? greeting.stop() : info && greeting.play(info.config.gender)
+                          }
+                          disabled={!info}
+                          aria-label={greeting.playing ? "Parar a voz do Omni" : "Ouvir a voz do Omni"}
+                          title={greeting.playing ? "Parar" : "Ouvir a voz do Omni"}
+                        >
+                          <VoiceAvatar seed={face} size={136} />
+                        </button>
+                      )}
+                      {omniName}
+                      {claudeMode && <small>{status}</small>}
+                      {conv.status === "waiting" && <small>Esperando o estúdio · é só falar para me chamar</small>}
+                    </div>
+                  )}
+
+                  {(claudeMode ||
+                    conv.pending.length > 0 ||
+                    cards.length > 0 ||
+                    (chatShown && (live || entries.length > 0))) && (
+                    <div className="omni-panel-body">
+                      {claudeMode && (
+                        <p className="omni-quota">
+                          A cota de voz de hoje acabou ({info?.config.limits.daily_voice_min ?? 0} min). Agora você
+                          fala, eu transcrevo e o seu Claude responde por texto.
+                        </p>
+                      )}
+                      <PendingActions actions={conv.pending} onResolve={conv.resolve} />
+                      <OmniCards />
+                      {chatShown && (
+                        <Transcript
+                          entries={entries}
+                          onFeedback={(item, v) =>
+                            item.startsWith("c-") ? claude.feedback(item, v) : conv.feedback(item, v)
+                          }
+                        />
+                      )}
+                    </div>
+                  )}
+                </>
+              )}
+            </OmniVoice>
+            {!settings && !history && (
+              <footer className="omni-panel-bottom">
+                {claudeMode && (
+                  <>
+                    {textForm}
+                    <button
+                      type="button"
+                      className={`button ${claude.status === "recording" ? "danger" : "primary"}`}
+                      onClick={() => void claude.toggleRecording()}
+                      disabled={claudeBusy}
+                    >
+                      {claude.status === "recording" ? (
+                        <Stop weight="fill" className="ic" />
+                      ) : (
+                        <Microphone className="ic" />
+                      )}
+                      {claude.status === "recording"
+                        ? "Enviar agora"
+                        : claudeBusy
+                          ? CLAUDE_TEXT[claude.status]
+                          : "Falar"}
+                    </button>
+                  </>
+                )}
+                {/* chat, [the message field in chat mode], mute, hang up (the wider one) */}
+                <div className={`omni-start${chatMode ? " chat" : ""}`}>
+                  {!claudeMode && (live || entries.length > 0) && (
+                    <Tip label={chatOpen ? "Fechar o chat" : "Abrir o chat"}>
+                      <button
+                        type="button"
+                        className={`mini-button omni-icon-button outlined${chatOpen ? " on" : ""}`}
+                        onClick={() => setChatOpen(o => !o)}
+                        aria-pressed={chatOpen}
+                        aria-label={chatOpen ? "Fechar o chat" : "Abrir o chat"}
+                      >
+                        {chatOpen ? <ArrowLeft /> : <ChatCircleText />}
+                      </button>
+                    </Tip>
+                  )}
+                  {chatMode && textForm}
+                  {!live && !claudeMode && (
+                    <Tip label="Conversas">
+                      <button
+                        type="button"
+                        className="mini-button omni-icon-button outlined"
+                        onClick={() => {
+                          greeting.stop();
+                          setSettings(false);
+                          setHistory(true);
+                        }}
+                        aria-label="Conversas"
+                      >
+                        <History />
+                      </button>
+                    </Tip>
+                  )}
+                  {!live && !claudeMode && (
+                    <button
+                      type="button"
+                      className="button"
+                      onClick={startConversation}
+                      disabled={!info || !!unavailable}
+                    >
+                      Começar
+                    </button>
+                  )}
+                  <OmniMicSelect
+                    inCall={live}
+                    muted={conv.muted}
+                    onToggleMute={() => conv.setMuted(!conv.muted)}
+                    muteDisabled={conv.status === "connecting"}
+                  />
+                  {live && (
+                    <Tip label="Encerrar a conversa">
+                      <button
+                        type="button"
+                        className="mini-button omni-icon-button outlined danger hangup"
+                        onClick={() => {
+                          setAutoCall(false);
+                          conv.stop();
+                        }}
+                        aria-label="Encerrar a conversa"
+                      >
+                        <PhoneDisconnect />
+                      </button>
+                    </Tip>
+                  )}
+                </div>
+                {(conv.error || claude.error || unavailable) && (
+                  <p className="response error">{conv.error ?? claude.error ?? unavailable}</p>
+                )}
+              </footer>
+            )}
+          </section>
+        </OmniBeamFrame>
+      )}
+    </div>
+  );
+}