@crievo/omni 0.1.7 → 0.1.9

package/studio/studio.ts

@@ -35,7 +35,9 @@ 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";
+import { ACCESS_PREFIX, accessToken, login, readTokens } from "../tools/lib/oauth-client.mjs";
+import { createSelfUpdater } from "../tools/lib/self-update.mjs";
+import { setupRunning } from "../tools/lib/setup-progress.mjs";
 import { openUrl } from "../tools/lib/platform.mjs";
 
 const args = process.argv.slice(2);
@@ -146,6 +148,29 @@ if (args.includes("--runner") || (hosted.on && option("port") === undefined)) {
     };
     /* 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 });
+    /* no usable login (never entered, signed out, disconnected): the approval page opens on this computer by itself */
+    const signIn = async () => {
+      /* the plugin's hook may be asking for this very login: wait for it instead of opening a second page */
+      for (let i = 0; i < 144 && setupRunning(); i++) await new Promise(r => setTimeout(r, 5000));
+      if (readTokens(url)) return;
+      await login(url, { deviceName: hostname().replace(/\.local$/, "") });
+    };
+    /* a machine behind the hosted studio updates itself: the hub closes the socket with UPGRADE, and this asks npm
+       whether a newer CLI exists (tools/lib/self-update.mjs); never on a checkout, once an hour */
+    const update = createSelfUpdater({
+      log: line => console.log(line),
+      busy: setupRunning,
+      loggedIn: () => !!readTokens(url),
+    });
+    startRunner({
+      url,
+      token,
+      port,
+      handle,
+      checkKey: check,
+      pair,
+      login: signIn,
+      onOutdated: async () => void (await update()),
+    });
   }
 }

package/studio/web/components/AppShell.tsx

@@ -1,10 +1,14 @@
 /* The root route component: the top banners, the menu, the page (<Outlet/>) inside the scrolling
-   .content, the lightbox, the approval notice, Omni, the toasts and, over everything, the screen for a studio that lost its connection, the voice agent (its panel opens from the sidebar button). */
+   .content, the lightbox, the approval notice, Omni (the voice agent, its panel opens from the sidebar button) and
+   the toasts. While the studio isn't connected, its screen takes the page's place inside .content, with the menu
+   still there; the page stays mounted underneath, hidden, so what it held is back when the studio is. Settings →
+   Agente de IA stays reachable: the computers and the actions there come from the Worker, not from the studio. */
 
 import { useEffect, useRef } from "react";
 import { Outlet, useLocation, useMatchRoute } from "@tanstack/react-router";
 import { useMenuCollapsed } from "../hooks/useMenuCollapsed";
 import { useMissingSetupSteps } from "../hooks/useMissingSetupSteps";
+import { useRunner } from "../hooks/useRunner";
 import { ApprovalNotice } from "./ApprovalNotice";
 import { TopBanners } from "./TopBanners";
 import { Lightbox } from "./Lightbox";
@@ -32,6 +36,9 @@ export function AppShell() {
   const [collapsed, toggleMenu] = useMenuCollapsed();
   const showGettingStarted = location.pathname === "/getting-started" || !!missing?.length;
   const withSidebar = !!matchRoute({ to: "/settings", fuzzy: true }) || !!matchRoute({ to: "/usage" });
+  const { online } = useRunner();
+  const onAgentSettings = !!matchRoute({ to: "/settings/$category", params: { category: "agent" } });
+  const offlineScreen = online === false && !onAgentSettings;
 
   /* the content panel scrolls, not the window: back to the top on every page change */
   const pageKey = pageKeyOf(location.pathname, location.searchStr);
@@ -51,15 +58,16 @@ export function AppShell() {
           showGettingStarted={showGettingStarted}
         />
         <div className="content" ref={content}>
-          <main className={withSidebar ? "with-sidebar" : ""}>
+          <main className={withSidebar ? "with-sidebar" : ""} hidden={offlineScreen}>
             <Outlet />
           </main>
+          {/* always mounted: it is what sends the first time on to Primeiros passos once the studio answers */}
+          <StudioOffline suppressed={onAgentSettings} />
         </div>
       </div>
       <Lightbox />
       <ApprovalNotice />
       <OmniWidget menuCollapsed={collapsed} />
-      <StudioOffline />
       <Toaster />
     </>
   );

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>
   );
 }