@crievo/omni 0.1.7 → 0.1.8

package/studio/web/components/FirstConnection.tsx

@@ -0,0 +1,222 @@
+/* The first time, inside the app (the sidebar stays). For a user who may never have opened a terminal: short lines,
+   icons and numbered steps, no paragraphs. A three-line welcome, then one vertical stepper that follows the whole
+   first run: until the computer reports, the three things to do (open Claude, paste the command, sign in), with what
+   the command does under its card; from then on, the two done and the setup's steps as the CLI finishes them. Nothing
+   here names the CLI's package or a script: the plugin is the way in, and its hook opens the login and runs the
+   setup by itself. */
+
+import { useState } from "react";
+import { useNow } from "../hooks/useNow";
+import { toast } from "../lib/toast";
+import { PLUGIN_INSTALL } from "../lib/studio-offline";
+import type { SetupRecord, SetupStep } from "../types/api";
+import { Badge } from "./ui/badge";
+import { Panel } from "./ui/panel";
+import { SetupSteps, type StepRetry } from "./SetupSteps";
+import { Check, Copy, Plug, VideoCamera, Warning } from "./icons";
+
+const WELCOME = [
+  { Icon: VideoCamera, title: "Faz o vídeo inteiro", text: "Roteiro, animação, voz e legendas" },
+  { Icon: Plug, title: "Roda no seu computador", text: "Com o seu Claude Code" },
+  { Icon: Check, title: "Você só aprova", text: "O roteiro e as cenas" },
+];
+
+/* how long after the last step the studio may take to answer before the screen says something is off */
+const SLOW_MS = 90_000;
+
+function Command({ command }: { command: string }) {
+  const [copied, setCopied] = useState(false);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(command);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1800);
+    } catch {
+      toast.error("Não consegui copiar", { body: "Selecione o comando e copie à mão." });
+    }
+  };
+  return (
+    <div className="connect-command">
+      <code>{command}</code>
+      <button type="button" className="button outlined" onClick={copy}>
+        {copied ? (
+          <Check className="ic" weight="bold" aria-hidden="true" />
+        ) : (
+          <Copy className="ic" aria-hidden="true" />
+        )}
+        {copied ? "Copiado" : "Copiar"}
+      </button>
+    </div>
+  );
+}
+
+/* the little window of the approval page, so the user knows what to look for */
+function ApprovalMock() {
+  return (
+    <div className="connect-mock" aria-hidden="true">
+      <div className="connect-mock-bar">
+        <i />
+        <i />
+        <i />
+      </div>
+      <div className="connect-mock-body">
+        <b>Conectar este computador?</b>
+        <span className="connect-mock-lines">
+          <i />
+          <i />
+        </span>
+        <span className="connect-mock-buttons">
+          <em>Conectar</em>
+          <em className="outline">Recusar</em>
+        </span>
+      </div>
+    </div>
+  );
+}
+
+/* before the computer reports anything: what to do, one thing per step */
+function InstallSteps() {
+  return (
+    <ol className="setup-steps install-steps" aria-label="Como conectar">
+      <li className="setup-step todo">
+        <span className="setup-mark" aria-hidden="true">
+          1
+        </span>
+        <span className="setup-text">
+          <b>Abra uma sessão do Claude Code</b>
+          <span className="setup-detail">Uma conversa nova, como você já faz.</span>
+        </span>
+      </li>
+      <li className="setup-step todo">
+        <span className="setup-mark" aria-hidden="true">
+          2
+        </span>
+        <span className="setup-text">
+          <b>Cole e rode este comando</b>
+          <Command command={PLUGIN_INSTALL} />
+          <span className="connect-does-title">O que ele faz</span>
+          <ul className="connect-does">
+            <li>
+              <Check weight="bold" aria-hidden="true" /> Adiciona o Omni ao seu Claude Code
+            </li>
+            <li>
+              <Check weight="bold" aria-hidden="true" /> Prepara o computador sozinho, sem você digitar mais nada
+            </li>
+          </ul>
+        </span>
+      </li>
+      <li className="setup-step todo">
+        <span className="setup-mark" aria-hidden="true">
+          3
+        </span>
+        <span className="setup-text">
+          <b>Entre na sua conta</b>
+          <span className="setup-detail">Uma janela abre sozinha: entre com o Google e clique em Conectar.</span>
+          <ApprovalMock />
+        </span>
+      </li>
+    </ol>
+  );
+}
+
+/* the plugin and the login are behind us once the computer reports: they head the stepper, done */
+const DONE_BEFORE = (device: string): SetupStep[] => [
+  { id: "plugin", label: "Plugin instalado", detail: "O Omni já está no seu Claude Code.", state: "done" },
+  {
+    id: "login",
+    label: "Conta conectada",
+    detail: device ? `Computador: ${device}` : "Este computador entrou.",
+    state: "done",
+  },
+];
+
+export function FirstConnection({ setup, retry }: { setup: SetupRecord | null; retry?: StepRetry }) {
+  const now = useNow(5000);
+  const finished = setup?.steps.filter(s => s.state === "done").length ?? 0;
+  const failed = setup?.state === "error";
+  const waitingStudio = setup?.state === "done";
+  const slow = waitingStudio && now - setup.updated_at > SLOW_MS;
+  const asking = !!retry?.pending;
+  return (
+    <div className="page connect">
+      <header className="header">
+        <h1>
+          <em>Bem-vindo</em> ao Omni
+        </h1>
+        <span className="subtle">Vamos conectar o seu computador. Leva uns minutos, só uma vez.</span>
+      </header>
+
+      <ul className="connect-welcome" aria-label="O que o Omni faz">
+        {WELCOME.map(({ Icon, title, text }) => (
+          <li key={title}>
+            <span className="connect-welcome-icon" aria-hidden="true">
+              <Icon />
+            </span>
+            <b>{title}</b>
+            <span>{text}</span>
+          </li>
+        ))}
+      </ul>
+
+      {!setup && (
+        <Panel title="Conectar o seu computador" extra={<Badge variant="running">3 passos</Badge>}>
+          <InstallSteps />
+          <p className="connect-status" role="status">
+            <span className="setup-spin" aria-hidden="true" /> Esperando o computador. Esta tela avança sozinha.
+          </p>
+        </Panel>
+      )}
+
+      {setup && (
+        <Panel
+          title="Preparando o seu computador"
+          extra={
+            failed ? (
+              <Badge variant="error">Uma etapa não terminou</Badge>
+            ) : waitingStudio ? (
+              <Badge variant="running">
+                <span className="spinning" aria-hidden="true" /> Conectando
+              </Badge>
+            ) : (
+              <Badge variant="running">
+                {finished} de {setup.steps.length}
+              </Badge>
+            )
+          }
+        >
+          <SetupSteps steps={[...DONE_BEFORE(setup.device), ...setup.steps]} retry={retry} />
+          {failed && asking ? (
+            <p className="connect-status" role="status">
+              <span className="setup-spin" aria-hidden="true" /> Pedi para o computador tentar de novo.
+            </p>
+          ) : failed && retry?.listening ? (
+            <p className="connect-status warning" role="status">
+              <Warning aria-hidden="true" /> Algo não deu certo. Use “Tentar de novo” na etapa marcada.
+            </p>
+          ) : failed ? (
+            <p className="connect-status warning" role="status">
+              <Warning aria-hidden="true" /> O computador parou de responder. Abra uma nova sessão do Claude Code: o
+              plugin retoma de onde parou.
+            </p>
+          ) : waitingStudio ? (
+            <p className={`connect-status${slow ? " warning" : ""}`} role="status">
+              {slow ? (
+                <>
+                  <Warning aria-hidden="true" /> Está demorando. Abra uma nova sessão do Claude Code.
+                </>
+              ) : (
+                <>
+                  <span className="setup-spin" aria-hidden="true" /> Conectando ao studio, em até 30 segundos.
+                </>
+              )}
+            </p>
+          ) : (
+            <p className="connect-status" role="status">
+              <span className="setup-spin" aria-hidden="true" /> Pode deixar rodando. Só acontece desta vez.
+            </p>
+          )}
+        </Panel>
+      )}
+    </div>
+  );
+}

package/studio/web/components/OfflineNotice.tsx

@@ -0,0 +1,59 @@
+/* "O studio perdeu a conexão" and its kin, as a pure view (the advice comes from lib/studio-offline.ts): what
+   happened in one line, what the computer is doing to come back as the same vertical stepper as the setup's, and the
+   two buttons. The last-resort line shows only after the trouble has lasted a while. StudioOffline.tsx feeds it from
+   the hub; the preview page (pages/ConnectPreviewPage) feeds it samples. */
+
+import { Link } from "@tanstack/react-router";
+import { useNow } from "../hooks/useNow";
+import type { OfflineAdvice } from "../lib/studio-offline";
+import { ArrowClockwise, Plug, Warning } from "./icons";
+import { SetupSteps } from "./SetupSteps";
+import { Panel } from "./ui/panel";
+
+export function OfflineNotice({
+  advice,
+  checking,
+  onCheck,
+}: {
+  advice: OfflineAdvice;
+  checking: boolean;
+  onCheck: () => void;
+}) {
+  const now = useNow(5000);
+  const since = advice.since ? new Date(advice.since).getTime() : null;
+  const stuck = since !== null && now - since >= advice.fallbackAfterMs;
+  return (
+    <div className="page studio-offline" role="alert">
+      <div className="studio-offline-body">
+        <span className="studio-offline-icon" aria-hidden="true">
+          <Plug />
+        </span>
+        <h1>{advice.title}</h1>
+        <p className="studio-offline-text">{advice.text}</p>
+        <Panel title="O que está acontecendo" className="studio-offline-card">
+          <SetupSteps steps={advice.steps} />
+          <p className={`connect-status${stuck ? " warning" : ""}`} role="status">
+            {stuck ? (
+              <>
+                <Warning aria-hidden="true" /> {advice.fallback}
+              </>
+            ) : (
+              <>
+                <span className="setup-spin" aria-hidden="true" /> Esta tela atualiza sozinha.
+              </>
+            )}
+          </p>
+        </Panel>
+        <div className="actions studio-offline-actions">
+          <button type="button" className="button primary" onClick={onCheck} disabled={checking}>
+            <ArrowClockwise className={`ic${checking ? " spin" : ""}`} aria-hidden="true" />{" "}
+            {checking ? "Verificando…" : "Verificar agora"}
+          </button>
+          <Link to="/settings/$category" params={{ category: "agent" }} className="button">
+            <Plug className="ic" aria-hidden="true" /> Computadores conectados
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+}

package/studio/web/components/SetupSteps.tsx

@@ -0,0 +1,63 @@
+/* The first-time setup as a vertical stepper (docs: tools/lib/setup-progress.mjs reports it): a circle on the
+   left of each step, loading while it runs and a check, in emerald, when it is done. The steps are named for
+   what they are for ("Configuração para extrair o estilo visual"), never for the program behind them. A step that
+   failed offers "Tentar de novo" while the computer is there to hear it (lib/setup-retry.ts); asked, it waits for
+   the computer and loads again. */
+
+import { isWaiting } from "../lib/setup-retry";
+import type { SetupStep, SetupStepState } from "../types/api";
+import { ArrowClockwise, Check, X } from "./icons";
+
+const SAID: Record<SetupStepState, string> = {
+  pending: "Aguardando",
+  running: "Em andamento",
+  done: "Concluído",
+  error: "Não terminou",
+};
+
+export type StepRetry = {
+  /* someone is on the computer to hear a request */
+  listening: boolean;
+  /* the step asked for again and not answered yet ("all" included) */
+  pending: string | null;
+  onRetry: (stepId: string) => void;
+};
+
+export function SetupSteps({ steps, retry }: { steps: SetupStep[]; retry?: StepRetry }) {
+  return (
+    <ol className="setup-steps" aria-label="Etapas da configuração" aria-live="polite">
+      {steps.map(s => {
+        /* asked again: it loads while the computer picks it up, before the report says so */
+        const waiting = isWaiting(s.id, s.state, retry?.pending ?? null);
+        const state: SetupStepState = waiting ? "running" : s.state;
+        return (
+          <li key={s.id} className={`setup-step ${state}`} aria-current={state === "running" ? "step" : undefined}>
+            <span className="setup-mark" aria-hidden="true">
+              {state === "done" && <Check weight="bold" />}
+              {state === "error" && <X weight="bold" />}
+              {state === "running" && <span className="setup-spin" />}
+            </span>
+            <span className="setup-text">
+              <b>{s.label}</b>
+              <span className="setup-detail">
+                {state === "error"
+                  ? "Não consegui terminar esta etapa."
+                  : waiting
+                    ? "Pedi para o computador tentar de novo."
+                    : s.detail}
+              </span>
+              {state === "error" && s.error && <code className="setup-error">{s.error}</code>}
+            </span>
+            {state === "error" && retry?.listening ? (
+              <button type="button" className="button outlined setup-retry" onClick={() => retry.onRetry(s.id)}>
+                <ArrowClockwise className="ic" aria-hidden="true" /> Tentar de novo
+              </button>
+            ) : (
+              <span className="setup-said">{waiting ? "Aguardando o computador" : SAID[state]}</span>
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  );
+}

package/studio/web/components/Sidebar.tsx

@@ -2,8 +2,9 @@
    Gerenciamento below, then Configurações in a section of its own, with no title. Each item: a duotone
    icon, like the ElevenLabs sidebar. The queue has no item: it lives in the "Agente, fila e serviços"
    panel and opens at /queue from its link.
-   At the bottom sits Omni's card (the avatar and "Falar com Omni"), with Primeiros passos above it only
-   while setup is missing: it opens the agent's panel (components/Omni).
+   At the bottom sits Omni's card (the avatar and "Falar com Omni"), with Primeiros passos and, for the admin, Admin
+   above it (Primeiros passos only while setup is missing): it opens the agent's panel (components/Omni). Under it,
+   the user's card (who is using the studio; in the hosted studio, with the Sair icon on its right).
    Active state: useMatchRoute over each item's routes. */
 
 import type { ReactNode } from "react";
@@ -11,12 +12,12 @@ import { Link, useMatchRoute, useNavigate } from "@tanstack/react-router";
 import { useAdmin } from "../hooks/useAdmin";
 import { BenchoScope } from "./bencho/BenchoScope";
 import { CreateMenu, type CreateMenuItem } from "./bencho/CreateMenu";
-import { useRunner } from "../hooks/useRunner";
 import { omniLevel, toggleOmniPanel, useOmniPanel } from "../lib/omni-panel";
 import { OmniGlow } from "./Omni/OmniGlow";
 import { OMNI_AVATAR } from "./Omni/OmniWidget";
 import { AvatarGroupIcon } from "./AvatarGroupIcon";
 import { BrandLogo } from "./BrandLogo";
+import { UserCard } from "./UserCard";
 import { VoiceAvatar } from "./VoiceAvatar";
 import {
   CalendarBlank,
@@ -26,9 +27,7 @@ import {
   ArrowExpand,
   GridFour,
   Minus,
-  Plug,
   Play,
-  Power,
   ShieldCheck,
   SidebarLeft,
   Sparkle,
@@ -205,7 +204,6 @@ export function Sidebar({
 }) {
   const isActive = useIsActive();
   const createItems = useCreateItems();
-  const { hosted } = useRunner();
   const { isAdmin } = useAdmin();
   const omni = useOmniPanel();
   return (
@@ -269,6 +267,11 @@ export function Sidebar({
             </NavLink>
           </nav>
         )}
+        {isAdmin && (
+          <nav aria-label={ADMIN_NAV.name}>
+            <NavLink item={ADMIN_NAV} collapsed={collapsed} active={isActive(ADMIN_NAV)} />
+          </nav>
+        )}
         {omni.available && (
           <OmniGlow
             state={collapsed ? "off" : omni.glow}
@@ -303,25 +306,7 @@ export function Sidebar({
             </button>
           </OmniGlow>
         )}
-        {isAdmin && (
-          <nav aria-label={ADMIN_NAV.name}>
-            <NavLink item={ADMIN_NAV} collapsed={collapsed} active={isActive(ADMIN_NAV)} />
-          </nav>
-        )}
-        {/* the hosted studio's own pages (the Worker renders them, not this app): the paired Macs and the log of
-            actions, and signing out */}
-        {hosted && (
-          <nav aria-label="Conta">
-            <a href="/runner" title={collapsed ? "Macs e ações" : undefined}>
-              <Plug aria-hidden="true" />
-              <span className="menu-label">Macs e ações</span>
-            </a>
-            <a href="/exit" title={collapsed ? "Sair" : undefined}>
-              <Power aria-hidden="true" />
-              <span className="menu-label">Sair</span>
-            </a>
-          </nav>
-        )}
+        <UserCard collapsed={collapsed} />
       </div>
     </aside>
   );

package/studio/web/components/StudioOffline.tsx

@@ -1,23 +1,39 @@
-/* The hosted studio while the studio isn't connected to it (the Mac that runs it is off, asleep or
-   offline). A screen of its own, like the 404, over the whole app: nothing behind it can act, so the page
-   says what happened, what to do on the Mac to resume (lib/studio-offline.ts, from what the hub knows: a
-   refused key, an old version, a disconnect on purpose), and checks again by itself every few seconds.
-   When the studio answers, the screen goes away and the app underneath (kept mounted, with its state)
-   rereads everything. Not shown at 127.0.0.1 (the page's own server is the studio). */
+/* The hosted studio while the studio isn't connected to it (the Mac that runs it is off, asleep, offline, or was
+   never connected). It is a screen inside the app, in the content area with the sidebar next to it, not a cover
+   over everything: the app underneath stays mounted (hidden, with its state), and when the studio answers this
+   goes away and everything rereads. Not shown at 127.0.0.1 (the page's own server is the studio).
 
-import { useEffect } from "react";
+   Two cases. The first time (no computer ever entered this account, or the CLI is reporting its setup) is
+   components/FirstConnection.tsx: a welcome, the plugin and the setup's steps. A computer that was there and is
+   away gets what happened and what brings it back (lib/studio-offline.ts), always through the plugin. Either way
+   it asks again every few seconds, and the first time hands over to Primeiros passos once the studio is up. */
+
+import { useEffect, useRef } from "react";
+import { useNavigate } from "@tanstack/react-router";
 import { useQueryClient } from "@tanstack/react-query";
 import { useRunner } from "../hooks/useRunner";
+import { useSetupProgress, useSetupRetry } from "../hooks/useSetupProgress";
 import { queryKeys } from "../lib/query-client";
-import { offlineAdvice } from "../lib/studio-offline";
-import { ArrowClockwise, Plug, Power } from "./icons";
+import { currentSetup, isFirstConnection, offlineAdvice } from "../lib/studio-offline";
+import { FirstConnection } from "./FirstConnection";
+import { OfflineNotice } from "./OfflineNotice";
 
 const CHECK_MS = 5000;
 
-export function StudioOffline() {
+export function StudioOffline({ suppressed = false }: { suppressed?: boolean }) {
   const { online, name, lastSeen, problem, checking, check } = useRunner();
   const qc = useQueryClient();
+  const navigate = useNavigate();
   const offline = online === false;
+  const { setup: reported, retryRequest } = useSetupProgress(offline);
+  /* an account no computer ever entered keeps showing its setup however old it is (the screen says it is slow);
+     one that had a computer only counts a recent one, so last week's finished setup isn't today's outage */
+  const never = isFirstConnection({ name, lastSeen, problem });
+  const setup = never ? reported : currentSetup(reported);
+  const first = never || !!setup;
+  const retry = useSetupRetry(setup, retryRequest);
+  /* the first time ends in Primeiros passos, not wherever the page happened to be */
+  const wasFirst = useRef(false);
 
   /* not connected: ask again until it answers; back: everything on screen is stale */
   useEffect(() => {
@@ -30,51 +46,33 @@ export function StudioOffline() {
   }, [offline, qc]);
 
   useEffect(() => {
-    if (!offline) return;
+    if (offline && first) wasFirst.current = true;
+    if (online && wasFirst.current) {
+      wasFirst.current = false;
+      void navigate({ to: "/getting-started" });
+    }
+  }, [offline, online, first, navigate]);
+
+  useEffect(() => {
+    if (!offline || suppressed) return;
     const before = document.title;
-    document.title = "Studio sem conexão · Omni";
+    document.title = `${first ? "Conectar o computador" : "Studio sem conexão"} · Omni`;
     return () => {
       document.title = before;
     };
-  }, [offline]);
+  }, [offline, suppressed, first]);
+
+  if (!offline || suppressed) return null;
+  if (first)
+    return (
+      <main>
+        <FirstConnection setup={setup} retry={retry} />
+      </main>
+    );
 
-  if (!offline) return null;
-  const advice = offlineAdvice({ name, lastSeen, problem });
   return (
-    <div className="studio-offline" role="alert">
-      <div className="studio-offline-body">
-        <span className="studio-offline-icon" aria-hidden="true">
-          <Plug />
-        </span>
-        <h1>{advice.title}</h1>
-        <p className="studio-offline-text">{advice.text}</p>
-        <ol className="studio-offline-steps">
-          {advice.steps.map(st => (
-            <li key={st.text}>
-              {st.text}
-              {st.code && (
-                <>
-                  {" "}
-                  <code>{st.code}</code>
-                </>
-              )}
-            </li>
-          ))}
-        </ol>
-        <div className="actions studio-offline-actions">
-          <button type="button" className="button primary" onClick={check} disabled={checking}>
-            <ArrowClockwise className={`ic${checking ? " spin" : ""}`} aria-hidden="true" />{" "}
-            {checking ? "Verificando…" : "Tentar de novo"}
-          </button>
-          <a href="/runner" className="button">
-            <Plug className="ic" aria-hidden="true" /> Macs e ações
-          </a>
-          <a href="/exit" className="button">
-            <Power className="ic" aria-hidden="true" /> Sair
-          </a>
-        </div>
-        <p className="studio-offline-hint">Verifico sozinho a cada 5 segundos e volto para onde você estava.</p>
-      </div>
-    </div>
+    <main>
+      <OfflineNotice advice={offlineAdvice({ name, lastSeen, problem })} checking={checking} onCheck={check} />
+    </main>
   );
 }

package/studio/web/components/UserCard.tsx

@@ -0,0 +1,79 @@
+/* The menu's user card, under Omni's: the avatar, the name and the email of who is using the studio (hosted: the
+   Google account that signed in; local: the Omni login or the Claude Code account, hooks/useMe.ts). The Google
+   picture when there is one (or when it fails to load), else two initials. An icon button on the right signs out:
+   hosted, the Worker's POST /exit (the computers and the actions that went through are in Configurações → Agente
+   de IA); at 127.0.0.1, with the Omni account shown, `omni logout` for this computer, after a confirmation (a
+   Claude Code account has nothing to sign out of here). Collapsed menu: just the avatar, and the button takes its place while the pointer is on it,
+   as the sidebar toggle does over the logo. */
+
+import { useState } from "react";
+import { useMe } from "../hooks/useMe";
+import { useRunner } from "../hooks/useRunner";
+import { api, errorText, send } from "../lib/api";
+import { displayNameOf, initialsOf } from "../lib/me";
+import { queryClient, queryKeys } from "../lib/query-client";
+import { toast, toastResult } from "../lib/toast";
+import { SignOut } from "./icons";
+
+const CONFIRM = "Sair da conta Omni neste computador? O plugin pede o login de novo na próxima sessão do Claude Code.";
+
+/* the local studio's sign-out: asks first, then ends this computer's Omni login and rereads who is using the studio */
+async function signOutHere() {
+  if (!confirm(CONFIRM)) return;
+  try {
+    toastResult(await send(api.me.logout.$post()), undefined, { always: true });
+  } catch (e) {
+    toast.error("Algo deu errado", { body: errorText(e) });
+  }
+  await queryClient.invalidateQueries({ queryKey: queryKeys.me });
+}
+
+export function UserCard({ collapsed }: { collapsed: boolean }) {
+  const me = useMe();
+  const { hosted } = useRunner();
+  const [broken, setBroken] = useState(false);
+  if (!me) return null;
+  const name = displayNameOf(me);
+  return (
+    <div className="menu-user" title={collapsed ? `${name} · ${me.email}` : undefined}>
+      {me.image && !broken ? (
+        <img
+          className="menu-user-photo"
+          src={me.image}
+          alt=""
+          width={36}
+          height={36}
+          referrerPolicy="no-referrer"
+          onError={() => setBroken(true)}
+        />
+      ) : (
+        <span className="menu-user-initials" aria-hidden="true">
+          {initialsOf(me)}
+        </span>
+      )}
+      <span className="menu-user-text menu-label">
+        <b>{name}</b>
+        <span>{me.email}</span>
+      </span>
+      {hosted ? (
+        <form method="post" action="/exit" className="menu-user-exit">
+          <button type="submit" className="menu-user-signout" title="Sair" aria-label="Sair">
+            <SignOut aria-hidden="true" />
+          </button>
+        </form>
+      ) : (
+        me.source === "omni" && (
+          <button
+            type="button"
+            className="menu-user-signout"
+            title="Sair"
+            aria-label="Sair"
+            onClick={() => void signOutHere()}
+          >
+            <SignOut aria-hidden="true" />
+          </button>
+        )
+      )}
+    </div>
+  );
+}

package/studio/web/components/icons.tsx

@@ -25,6 +25,7 @@ import {
   FolderOpenIcon,
   ImageDone01Icon,
   Link01Icon,
+  Logout01Icon,
   Plug01Icon,
   PowerIcon,
   SentIcon,
@@ -208,6 +209,7 @@ export const PlayCircle = icon(PlayCircleIcon, "PlayCircle");
 export const Plug = icon(Plug01Icon, "Plug");
 export const Plus = icon(Add01Icon, "Plus");
 export const Power = icon(PowerIcon, "Power");
+export const SignOut = icon(Logout01Icon, "SignOut");
 export const Prohibit = icon(BlockedIcon, "Prohibit");
 export const Queue = icon(LeftToRightListBulletIcon, "Queue");
 export const Shuffle = icon(ShuffleIcon, "Shuffle");