@crievo/omni 0.1.7 → 0.1.9

package/studio/web/pages/ConnectPreviewPage/index.tsx

@@ -0,0 +1,215 @@
+/* /preview/connect: the first-time screen and the "sem conexão" ones, with the real components and made-up data, to
+   check them without a hosted studio (at 127.0.0.1 the studio is always connected, so none of them shows up by
+   itself). Not in the menu: reached by the address. "Reproduzir" walks the setup the way the CLI reports it, step by
+   step; the other tabs are fixed moments of it. In the hosted studio the same components read the real report
+   (hooks/useSetupProgress.ts) and the hub's state (hooks/useRunner.ts). */
+
+import { useEffect, useState } from "react";
+import { FirstConnection } from "../../components/FirstConnection";
+import { OfflineNotice } from "../../components/OfflineNotice";
+import { offlineAdvice } from "../../lib/studio-offline";
+import type { RunnerProblem, SetupRecord, SetupStepState } from "../../types/api";
+
+const STEPS = [
+  [
+    "workspace",
+    "Criando a sua pasta de trabalho",
+    "Onde ficam os seus vídeos e as suas configurações, no seu computador.",
+  ],
+  ["app", "Instalando o Omni neste computador", "Uma cópia que se atualiza sozinha e fica pronta para o Claude usar."],
+  ["video", "Configuração para montar e exportar o vídeo", "Junta as cenas, a voz e as legendas no arquivo final."],
+  ["render", "Configuração para renderizar as animações", "Transforma o motion de cada cena em vídeo."],
+  [
+    "voice",
+    "Configuração para a voz, o tempo e as legendas",
+    "Mede a fala e deixa cada cena e cada legenda no tempo certo.",
+  ],
+  [
+    "style",
+    "Configuração para extrair o estilo visual",
+    "Lê um vídeo ou um link de referência e aprende o estilo dele.",
+  ],
+  [
+    "studio",
+    "Conectando este computador ao studio",
+    "Para o site conversar com o Claude e com os seus arquivos daqui.",
+  ],
+] as const;
+
+/* a record with the first `done` steps finished and the next one in the given state */
+function record(done: number, next: SetupStepState = "running", error?: string): SetupRecord {
+  const now = Date.now();
+  return {
+    v: 1,
+    state: done >= STEPS.length ? "done" : next === "error" ? "error" : "running",
+    device: "MacBook-Pro",
+    started_at: now - 120_000,
+    updated_at: now,
+    steps: STEPS.map(([id, label, detail], i) => ({
+      id,
+      label,
+      detail,
+      state: i < done ? "done" : i === done ? next : "pending",
+      ...(i === done && next === "error" && error ? { error } : {}),
+    })),
+  };
+}
+
+/* the trouble began a moment ago: the normal state. `long` is the same an hour on, when the last-resort line shows */
+const at = new Date(Date.now() - 20_000).toISOString();
+const long = new Date(Date.now() - 3_600_000).toISOString();
+const problem = (p: RunnerProblem) => p;
+
+/* the failed step with the computer listening: "Tentar de novo" asks, the step loads, and it works the second time */
+function ErrorDemo() {
+  const [phase, setPhase] = useState<"error" | "asking" | "fixed">("error");
+  useEffect(() => {
+    if (phase !== "asking") return;
+    const id = setTimeout(() => setPhase("fixed"), 2200);
+    return () => clearTimeout(id);
+  }, [phase]);
+  const setup =
+    phase === "fixed"
+      ? record(STEPS.length)
+      : { ...record(4, "error", "não consegui baixar o instalador (sem internet?)"), watching_at: Date.now() };
+  return (
+    <FirstConnection
+      setup={setup}
+      retry={{ listening: true, pending: phase === "asking" ? "voice" : null, onRetry: () => setPhase("asking") }}
+    />
+  );
+}
+
+type View = { id: string; name: string; render: () => React.ReactNode };
+
+const VIEWS: View[] = [
+  { id: "install", name: "1 · Instalar o plugin", render: () => <FirstConnection setup={null} /> },
+  { id: "running", name: "2 · Preparando", render: () => <FirstConnection setup={record(3)} /> },
+  { id: "error", name: "3 · Etapa com erro", render: () => <ErrorDemo /> },
+  {
+    id: "stale",
+    name: "3 · Erro, sem resposta",
+    render: () => (
+      <FirstConnection
+        setup={record(4, "error", "não consegui baixar o instalador (sem internet?)")}
+        retry={{ listening: false, pending: null, onRetry: () => {} }}
+      />
+    ),
+  },
+  { id: "waiting", name: "4 · Conectando o studio", render: () => <FirstConnection setup={record(STEPS.length)} /> },
+  {
+    id: "lost",
+    name: "Perdeu a conexão",
+    render: () => (
+      <OfflineNotice
+        advice={offlineAdvice({ name: "MacBook-Pro", lastSeen: at, problem: null })}
+        checking={false}
+        onCheck={() => {}}
+      />
+    ),
+  },
+  {
+    id: "lost-long",
+    name: "Perdeu há 1 h",
+    render: () => (
+      <OfflineNotice
+        advice={offlineAdvice({ name: "MacBook-Pro", lastSeen: long, problem: null })}
+        checking={false}
+        onCheck={() => {}}
+      />
+    ),
+  },
+  {
+    id: "key",
+    name: "Precisa aprovar",
+    render: () => (
+      <OfflineNotice
+        advice={offlineAdvice({
+          name: null,
+          lastSeen: null,
+          problem: problem({ reason: "key", at, host: "MacBook-Pro" }),
+        })}
+        checking={false}
+        onCheck={() => {}}
+      />
+    ),
+  },
+  {
+    id: "revoked",
+    name: "Desconectado",
+    render: () => (
+      <OfflineNotice
+        advice={offlineAdvice({ name: "MacBook-Pro", lastSeen: at, problem: problem({ reason: "revoked", at }) })}
+        checking={false}
+        onCheck={() => {}}
+      />
+    ),
+  },
+];
+
+/* "Reproduzir": one step finishes every couple of seconds, the way the CLI reports it, and it ends on the studio connecting */
+const STEP_MS = 2000;
+
+export function ConnectPreviewPage() {
+  /* ?v=<id> opens straight on a state (the ids of VIEWS) */
+  const [view, setView] = useState(() => {
+    const v = new URLSearchParams(location.search).get("v");
+    return VIEWS.some(x => x.id === v) ? (v as string) : "install";
+  });
+  const [playing, setPlaying] = useState(false);
+  /* how many steps are done while playing */
+  const [done, setDone] = useState(0);
+
+  useEffect(() => {
+    document.title = "Pré-visualização do onboarding · Omni";
+  }, []);
+  useEffect(() => {
+    if (!playing) return;
+    const id = setInterval(() => setDone(d => d + 1), STEP_MS);
+    return () => clearInterval(id);
+  }, [playing]);
+  useEffect(() => {
+    if (playing && done >= STEPS.length) {
+      setPlaying(false);
+      setView("waiting");
+    }
+  }, [playing, done]);
+
+  const play = () => {
+    setDone(0);
+    setPlaying(true);
+  };
+  const current = VIEWS.find(v => v.id === view) ?? VIEWS[0];
+
+  return (
+    <div className="page">
+      <header className="header">
+        <h1>
+          <em>Pré-visualização</em> do onboarding
+        </h1>
+        <span className="subtle">dados de exemplo: no studio hospedado vêm do computador de verdade</span>
+      </header>
+      <div className="actions" style={{ alignItems: "center", marginBottom: 16 }}>
+        <div className="segmented" role="group" aria-label="Estado">
+          {VIEWS.map(v => (
+            <button
+              key={v.id}
+              type="button"
+              className={!playing && view === v.id ? "active" : ""}
+              onClick={() => {
+                setPlaying(false);
+                setView(v.id);
+              }}
+            >
+              {v.name}
+            </button>
+          ))}
+        </div>
+        <button type="button" className="button primary" onClick={play} disabled={playing}>
+          {playing ? "Reproduzindo…" : "Reproduzir o setup"}
+        </button>
+      </div>
+      <div className="connect-preview">{playing ? <FirstConnection setup={record(done)} /> : current.render()}</div>
+    </div>
+  );
+}

package/studio/web/pages/SettingsPage/components/AgentCategory.tsx

@@ -1,20 +1,29 @@
-/* Configurações → Agente de IA: the agent accounts (Claude and Codex), Codex's options and the model per stage */
+/* Configurações → Agente de IA: the agent accounts (Claude and Codex), Codex's options and the model per stage and,
+   in the hosted studio, the computers signed in and the actions that went through to them (ComputersPanel) */
 
 import type { Settings } from "../../../types/api";
 import { Panel } from "../../../components/ui/panel";
 import { AgentAccounts, CodexSettings } from "./AgentAccounts";
+import { useRunner } from "../../../hooks/useRunner";
+import { ComputersPanel } from "./ComputersPanel";
 import { ModelsSettings } from "./ModelsSettings";
 
-export function AgentCategory({ settings, reload }: { settings: Settings; reload: () => void }) {
+export function AgentCategory({ settings, reload }: { settings: Settings | null; reload: () => void }) {
+  const { hosted } = useRunner();
   return (
     <>
-      <Panel title="Contas de agente">
-        <AgentAccounts agents={settings.agents} onSave={reload} />
-        <CodexSettings codex={settings.agents.codex} onSave={reload} />
-      </Panel>
-      <Panel title="Modelos do Claude">
-        <ModelsSettings models={settings.models} onSave={reload} />
-      </Panel>
+      {settings && (
+        <>
+          <Panel title="Contas de agente">
+            <AgentAccounts agents={settings.agents} onSave={reload} />
+            <CodexSettings codex={settings.agents.codex} onSave={reload} />
+          </Panel>
+          <Panel title="Modelos do Claude">
+            <ModelsSettings models={settings.models} onSave={reload} />
+          </Panel>
+        </>
+      )}
+      {hosted && <ComputersPanel />}
     </>
   );
 }

package/studio/web/pages/SettingsPage/components/AgentCostPanel.tsx

@@ -0,0 +1,253 @@
+/* What the agents spent (Configurações → Uso e custo): the Claude sessions' cost by video, stage
+   and model. The accounting is tools/lib/cost.mjs (terminal: tools/cost.mjs). */
+
+import { useState } from "react";
+import { Link } from "@tanstack/react-router";
+import { useCost } from "../../../hooks/useCost";
+import type { AgentCost } from "../../../types/api";
+import { Panel } from "../../../components/ui/panel";
+import { Skeleton } from "../../../components/ui/skeleton";
+
+const STAGE_LABEL: Record<string, string> = {
+  orchestrator: "Orquestrador",
+  "av-script": "Roteiro",
+  "av-motion": "Motion (roteiro e base)",
+  compose: "Composição (um fork por cena)",
+  wireframe: "Wireframes (um fork por cena)",
+  "av-narration": "Narração",
+  "av-voice": "Voz",
+  "av-render": "Render",
+  "av-captions": "Legendas",
+  "av-assemble": "Montagem",
+  "av-editor": "Editor",
+  "av-reference": "Estilo visual",
+  "av-thumbnail": "Thumbnail",
+  "av-preview": "Prévia (aposentada)",
+  other: "Outros",
+};
+const KIND_LABEL: Record<string, string> = {
+  video: "Vídeos",
+  edit: "Editor",
+  reference: "Estilos visuais",
+  analysis: "Análise",
+  omni: "Omni",
+};
+const PERIODS: { days: number | null; label: string }[] = [
+  { days: 7, label: "7 dias" },
+  { days: 30, label: "30 dias" },
+  { days: null, label: "Tudo" },
+];
+
+const usd = (v: number) => `US$ ${v.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+const pct = (v: number, total: number) => (total > 0 ? `${Math.round((v / total) * 100)}%` : "—");
+const sorted = (o: Record<string, number>) => Object.entries(o).sort((a, b) => b[1] - a[1]);
+const dayLabel = (d: string) =>
+  new Date(`${d}T12:00:00`).toLocaleDateString("pt-BR", { day: "2-digit", month: "2-digit" });
+
+/* one row per entry: the name, a bar relative to the largest, the value and its share */
+function Bars({ entries, total, label }: { entries: [string, number][]; total: number; label: (k: string) => string }) {
+  const max = Math.max(...entries.map(e => e[1]), 0);
+  return (
+    <ul className="cost-rows">
+      {entries.map(([k, v]) => (
+        <li key={k}>
+          <span className="cost-name">{label(k)}</span>
+          <div className="bar">
+            <div style={{ width: `${max ? Math.max((v / max) * 100, v ? 1 : 0) : 0}%` }} />
+          </div>
+          <span className="cost-value">{usd(v)}</span>
+          <span className="subtle cost-pct">{pct(v, total)}</span>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+function Summary({ c }: { c: AgentCost }) {
+  const videos = c.by_video.filter(v => v.type === "video" || v.type === "edit");
+  const perVideo = videos.length ? videos.reduce((a, v) => a + v.total, 0) / videos.length : 0;
+  const today = c.by_day.at(-1);
+  return (
+    <>
+      <p className="usage-number">
+        {usd(c.total)}
+        <small>
+          em {c.turns} turnos de {c.sessions} sessões
+          {videos.length > 0 && ` · média de ${usd(perVideo)} por vídeo`}
+          {today && ` · último dia (${dayLabel(today.day)}): ${usd(today.cost)}`}
+        </small>
+      </p>
+      {(c.partial > 0 || c.unmeasured > 0) && (
+        <ul className="usage-notices">
+          {c.partial > 0 && (
+            <li>
+              <span className="point warning" />
+              {c.partial} turno{c.partial === 1 ? "" : "s"} em andamento ou interrompido{c.partial === 1 ? "" : "s"}: o
+              valor é estimado até a próxima resposta fechar a conta.
+            </li>
+          )}
+          {c.unmeasured > 0 && (
+            <li>
+              <span className="point warning" />
+              {c.unmeasured} turno{c.unmeasured === 1 ? "" : "s"} do Codex fora da conta: ele só informa tokens, não
+              dólares.
+            </li>
+          )}
+        </ul>
+      )}
+    </>
+  );
+}
+
+export function AgentCostPanel() {
+  const [days, setDays] = useState<number | null>(7);
+  const { cost, error } = useCost(days);
+  const videos = cost?.by_video.slice(0, 12) ?? [];
+  const topStage = (stages: Record<string, number>) => sorted(stages)[0];
+
+  return (
+    <>
+      <h2 className="usage-section">Agentes (Claude)</h2>
+      <Panel
+        title="O que a geração gastou"
+        extra={
+          <div className="segmented small" role="radiogroup" aria-label="Período">
+            {PERIODS.map(p => (
+              <button
+                key={p.label}
+                type="button"
+                role="radio"
+                aria-checked={days === p.days}
+                className={days === p.days ? "active" : ""}
+                onClick={() => setDays(p.days)}
+              >
+                {p.label}
+              </button>
+            ))}
+          </div>
+        }
+        className="usage-card"
+      >
+        {error && <p className="response error">{error}</p>}
+        {!cost && !error && (
+          <div aria-busy="true">
+            <Skeleton className="row" style={{ width: "40%", height: 30 }} />
+            <Skeleton className="row" style={{ width: "100%", marginTop: 14 }} />
+            <Skeleton className="row" style={{ width: "85%", marginTop: 8 }} />
+          </div>
+        )}
+        {cost && cost.turns === 0 && <p className="empty">Nenhum turno de agente neste período.</p>}
+        {cost && cost.turns > 0 && (
+          <>
+            <Summary c={cost} />
+            <p className="note">
+              Valor de tabela da API, o mesmo que o Claude Code reporta, também numa assinatura. Cada sessão retomada
+              acumula o total; aqui cada turno conta só o que gastou. A divisão por etapa e fork é proporcional às
+              mensagens, calibrada pelo total de cada modelo. No terminal: <code>node tools/cost.mjs</code>.
+            </p>
+          </>
+        )}
+      </Panel>
+
+      {cost && cost.turns > 0 && (
+        <>
+          <div className="usage-grid">
+            <Panel title="Por etapa" className="usage-card">
+              <Bars
+                entries={sorted(cost.by_stage).filter(e => e[1] >= 0.005)}
+                total={cost.total}
+                label={k => STAGE_LABEL[k] ?? k}
+              />
+            </Panel>
+            <Panel title="Por modelo" className="usage-card">
+              <Bars entries={sorted(cost.by_model).filter(e => e[1] >= 0.005)} total={cost.total} label={k => k} />
+              <h3 className="cost-sub">Por tipo de sessão</h3>
+              <Bars entries={sorted(cost.by_kind)} total={cost.total} label={k => KIND_LABEL[k] ?? k} />
+            </Panel>
+            <Panel title="Por dia" className="usage-card">
+              <Bars
+                entries={cost.by_day
+                  .slice(-14)
+                  .reverse()
+                  .map(d => [dayLabel(d.day), d.cost])}
+                total={cost.total}
+                label={k => k}
+              />
+            </Panel>
+          </div>
+
+          <Panel title="Por vídeo">
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>Vídeo</th>
+                  <th>Total</th>
+                  <th>Turnos</th>
+                  <th>Mais caro</th>
+                </tr>
+              </thead>
+              <tbody>
+                {videos.map(v => {
+                  const top = topStage(v.stages);
+                  return (
+                    <tr key={v.video}>
+                      <td>
+                        {v.type === "video" || v.type === "edit" ? (
+                          <Link to="/videos/$slug" params={{ slug: v.video }}>
+                            {v.video}
+                          </Link>
+                        ) : (
+                          <>
+                            {v.video} <span className="subtle">({KIND_LABEL[v.type] ?? v.type})</span>
+                          </>
+                        )}
+                      </td>
+                      <td>
+                        <strong>{usd(v.total)}</strong>
+                      </td>
+                      <td>{v.turns}</td>
+                      <td>
+                        {top ? (
+                          <>
+                            {STAGE_LABEL[top[0]] ?? top[0]} <span className="subtle">{pct(top[1], v.total)}</span>
+                          </>
+                        ) : (
+                          <span className="subtle">—</span>
+                        )}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </Panel>
+
+          <Panel title="Maiores forks">
+            <table className="table">
+              <thead>
+                <tr>
+                  <th>Fork</th>
+                  <th>Vídeo</th>
+                  <th>Custo</th>
+                  <th>Mensagens</th>
+                </tr>
+              </thead>
+              <tbody>
+                {cost.top_forks.slice(0, 8).map(f => (
+                  <tr key={`${f.session}-${f.turn}-${f.label}`}>
+                    <td>{f.label}</td>
+                    <td className="subtle">{f.video}</td>
+                    <td>
+                      <strong>{usd(f.cost)}</strong>
+                    </td>
+                    <td>{f.messages}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </Panel>
+        </>
+      )}
+    </>
+  );
+}

package/studio/web/pages/SettingsPage/components/ComputersPanel.tsx

@@ -0,0 +1,145 @@
+/* Configurações → Agente de IA (hosted studio): the computers signed in to the account, with "Desconectar", and the
+   actions that went through to them. It replaces the Worker's old "Macs e ações" pages: the same information, inside
+   the app. Both come from the Worker itself, so they work while the studio isn't connected. */
+
+import { useState } from "react";
+import { useAudit, useComputers } from "../../../hooks/useComputers";
+import { formatDayTime } from "../../../lib/format";
+import { toast } from "../../../lib/toast";
+import type { Computer } from "../../../types/api";
+import { ArrowClockwise, Plug } from "../../../components/icons";
+import { Badge } from "../../../components/ui/badge";
+import { Panel } from "../../../components/ui/panel";
+import { Skeleton } from "../../../components/ui/skeleton";
+
+function ComputerRow({ c, onRevoke, busy }: { c: Computer; onRevoke: (id: string) => void; busy: boolean }) {
+  const [asking, setAsking] = useState(false);
+  return (
+    <li className="computer">
+      <span className="computer-icon" aria-hidden="true">
+        <Plug />
+      </span>
+      <span className="computer-text">
+        <b>{c.name}</b>
+        <span className="subtle">
+          {c.online
+            ? "conectado agora"
+            : c.last_seen
+              ? `visto por último ${formatDayTime(c.last_seen)}`
+              : "ainda não conectou"}{" "}
+          · entrou em {formatDayTime(c.created_at)}
+          {c.kind === "key" && " · acesso antigo"}
+        </span>
+      </span>
+      {c.online ? <Badge variant="ok">Conectado</Badge> : <Badge>Fora</Badge>}
+      {asking ? (
+        <span className="computer-ask">
+          <button type="button" className="button reject" disabled={busy} onClick={() => onRevoke(c.id)}>
+            Desconectar
+          </button>
+          <button type="button" className="button outlined" onClick={() => setAsking(false)}>
+            Cancelar
+          </button>
+        </span>
+      ) : (
+        <button type="button" className="button outlined" onClick={() => setAsking(true)}>
+          Desconectar
+        </button>
+      )}
+    </li>
+  );
+}
+
+function Computers() {
+  const { email, computers, error, revoke } = useComputers(true);
+  const act = (id: string) =>
+    revoke.mutate(id, {
+      onSuccess: () => toast.success("Computador desconectado", { body: "Ele só volta entrando de novo." }),
+      onError: e => toast.error("Não consegui desconectar", { body: e.message }),
+    });
+  return (
+    <Panel title="Computadores conectados" extra={email && <span className="subtle">{email}</span>}>
+      <p className="subtle computers-intro">
+        Os computadores que entraram na sua conta pelo plugin do Claude Code. Desconectar encerra o acesso na hora; para
+        voltar, o computador entra de novo ao abrir o Claude Code.
+      </p>
+      {error && <p className="response error">{error}</p>}
+      {!computers && !error && (
+        <div aria-busy="true" aria-label="Carregando os computadores">
+          <Skeleton style={{ height: 52, width: "100%" }} />
+        </div>
+      )}
+      {computers && computers.length === 0 && <p className="subtle">Nenhum computador entrou ainda.</p>}
+      {computers && computers.length > 0 && (
+        <ul className="computers">
+          {computers.map(c => (
+            <ComputerRow key={c.id} c={c} onRevoke={act} busy={revoke.isPending} />
+          ))}
+        </ul>
+      )}
+    </Panel>
+  );
+}
+
+const resultOf = (status: number) => (status === 503 ? "sem conexão" : status === 429 ? "limite" : String(status));
+
+function Audit() {
+  const { entries, error, reload, loading } = useAudit(true);
+  return (
+    <Panel
+      title="Ações recentes"
+      extra={
+        <button type="button" className="button outlined" onClick={reload} disabled={loading}>
+          <ArrowClockwise className={`ic${loading ? " spin" : ""}`} aria-hidden="true" /> Atualizar
+        </button>
+      }
+    >
+      <p className="subtle computers-intro">
+        Tudo o que mudou algo e passou por aqui até o seu computador: quem, o quê, quando e como terminou. Só o caminho
+        fica registrado, nunca o conteúdo. Guarda as últimas 2000.
+      </p>
+      {error && <p className="response error">{error}</p>}
+      {!entries && !error && <Skeleton style={{ height: 120, width: "100%" }} />}
+      {entries && entries.length === 0 && <p className="subtle">Nenhuma ação ainda.</p>}
+      {entries && entries.length > 0 && (
+        <div className="audit-scroll">
+          <table className="table audit-table">
+            <thead>
+              <tr>
+                <th>Quando</th>
+                <th>Quem</th>
+                <th>Ação</th>
+                <th>Resultado</th>
+              </tr>
+            </thead>
+            <tbody>
+              {entries.map(e => (
+                <tr key={`${e.at}-${e.method}-${e.path}`}>
+                  <td>{formatDayTime(e.at)}</td>
+                  <td>{e.who}</td>
+                  <td>
+                    <code>
+                      {e.method} {e.path}
+                    </code>
+                  </td>
+                  <td className={e.status < 400 ? "audit-ok" : "audit-bad"}>
+                    {resultOf(e.status)} · {e.ms} ms
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </Panel>
+  );
+}
+
+export function ComputersPanel() {
+  return (
+    <>
+      <Computers />
+      <Audit />
+    </>
+  );
+}

package/studio/web/pages/SettingsPage/components/PublishingCategory/OmnichatSettingsPanel.tsx

@@ -40,8 +40,8 @@ export function OmnichatSettingsPanel({ omnichat: o, onSave }: { omnichat: Setti
     >
       <SettingRow label="Agente" help="Confere os comentários a cada minuto, com o studio aberto ou não">
         <p className="hint">
-          Responde só nas regras ligadas. Não acorda o Mac: dormindo, os comentários esperam e são respondidos quando
-          ele voltar, dentro dos 7 dias que a Meta dá para a DM.
+          Responde só nas regras ligadas. Não acorda a máquina: dormindo, os comentários esperam e são respondidos
+          quando ela voltar, dentro dos 7 dias que a Meta dá para a DM.
         </p>
         {agent?.installed && !agent.node_ok && (
           <p className="hint warning">O node que o agente usa não existe mais: desligue e ligue de novo.</p>