@crievo/omni 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,200 @@
+/* An action Omni staged: nothing runs until the user presses Confirmar here, or says yes to Omni, who
+   then presses it (confirm_action; the server only takes a card the user has spoken after). */
+
+import { useEffect, useRef, useState } from "react";
+import { CaretLeft, CaretRight } from "../icons";
+import type { AgentPendingAction } from "../../types/api";
+
+const KIND_TITLE: Record<AgentPendingAction["kind"], string> = {
+  change: "Pedir alteração ao Claude",
+  create: "Criar conteúdo",
+  thumbnail: "Pedir thumbnails",
+  publish: "Publicar agora",
+  schedule: "Agendar publicação",
+  approval: "Responder a aprovação",
+  reference: "Pedir edição no estilo visual",
+  new_reference: "Criar estilo visual",
+  choose_thumbnail: "Escolher a thumbnail",
+  analysis: "Pedir análise",
+  omnichat: "Mudar o Omnichat",
+  omnichat_send: "Mandar o Omnichat",
+};
+const KIND_BUSY: Record<AgentPendingAction["kind"], string> = {
+  change: "Enviando…",
+  create: "Criando…",
+  thumbnail: "Enviando…",
+  publish: "Publicando…",
+  schedule: "Agendando…",
+  approval: "Enviando…",
+  reference: "Enviando…",
+  new_reference: "Criando…",
+  choose_thumbnail: "Aplicando…",
+  analysis: "Enviando…",
+  omnichat: "Gravando…",
+  omnichat_send: "Mandando…",
+};
+
+/* a summary past three lines folds, with a "Mostrar tudo" that opens it */
+function Summary({ text }: { text: string }) {
+  const ref = useRef<HTMLParagraphElement>(null);
+  const [open, setOpen] = useState(false);
+  const [long, setLong] = useState(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const measure = () => {
+      if (!open) setLong(el.scrollHeight > el.clientHeight + 1);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [text, open]);
+  return (
+    <>
+      <p ref={ref} className={`omni-pending-summary${open ? "" : " clamped"}`}>
+        {text}
+      </p>
+      {(long || open) && (
+        <button type="button" className="omni-pending-more" onClick={() => setOpen(o => !o)}>
+          {open ? "Mostrar menos" : "Mostrar tudo"}
+        </button>
+      )}
+    </>
+  );
+}
+
+export function PendingActions({
+  actions,
+  onResolve,
+}: {
+  actions: AgentPendingAction[];
+  onResolve: (a: AgentPendingAction, confirm: boolean) => Promise<{ ok: boolean; error?: string }>;
+}) {
+  const [busy, setBusy] = useState<string | null>(null);
+  const [dragging, setDragging] = useState(false);
+  const drag = useRef<{ x: number; left: number; moved: boolean } | null>(null);
+  const scroller = useRef<HTMLDivElement>(null);
+  const [index, setIndex] = useState(0);
+  const [errors, setErrors] = useState<Record<string, string>>({});
+  if (!actions.length) return null;
+  const act = async (a: AgentPendingAction, confirm: boolean) => {
+    setBusy(a.id);
+    const r = await onResolve(a, confirm);
+    setBusy(null);
+    setErrors(e => ({ ...e, [a.id]: r.ok ? "" : (r.error ?? "falhou") }));
+  };
+  /* mouse drag scrolls the carousel (touch scrolls natively); a drag never presses a button */
+  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (e.pointerType !== "mouse" || e.button !== 0 || actions.length < 2) return;
+    if ((e.target as HTMLElement).closest("button")) return;
+    drag.current = {
+      x: e.clientX,
+      left: e.currentTarget.scrollLeft,
+      moved: false,
+    };
+  };
+  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    const d = drag.current;
+    if (!d) return;
+    const dx = e.clientX - d.x;
+    if (!d.moved && Math.abs(dx) < 4) return;
+    if (!d.moved) {
+      d.moved = true;
+      setDragging(true);
+      e.currentTarget.setPointerCapture(e.pointerId);
+    }
+    e.currentTarget.scrollLeft = d.left - dx;
+  };
+  const onPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!drag.current) return;
+    drag.current = null;
+    setDragging(false);
+    /* snap to the nearest card once released */
+    const el = e.currentTarget;
+    const card = el.querySelector<HTMLElement>(".omni-pending-card");
+    if (!card) return;
+    const step = card.offsetWidth + 8;
+    el.scrollTo({
+      left: Math.round(el.scrollLeft / step) * step,
+      behavior: "smooth",
+    });
+  };
+  const stepWidth = () => (scroller.current?.querySelector<HTMLElement>(".omni-pending-card")?.offsetWidth ?? 0) + 8;
+  const goTo = (i: number) => {
+    const n = Math.max(0, Math.min(actions.length - 1, i));
+    scroller.current?.scrollTo({ left: n * stepWidth(), behavior: "smooth" });
+  };
+  /* the active card follows the scroll (drag, swipe, arrows or dots) */
+  const onScroll = (e: React.UIEvent<HTMLDivElement>) => {
+    const w = stepWidth();
+    if (w > 8) setIndex(Math.round(e.currentTarget.scrollLeft / w));
+  };
+  const active = Math.min(index, actions.length - 1);
+  return (
+    <div className="omni-pending-carousel">
+      <div
+        ref={scroller}
+        className={`omni-pending${dragging ? " dragging" : ""}`}
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+        onPointerCancel={onPointerUp}
+        onScroll={onScroll}
+      >
+        {actions.map(a => (
+          <div key={a.id} className="omni-pending-card" role="alert">
+            <div className="omni-pending-body">
+              <strong>{KIND_TITLE[a.kind]}</strong>
+              <Summary text={a.summary} />
+              {errors[a.id] && <p className="response error">{errors[a.id]}</p>}
+            </div>
+            <div className="omni-pending-actions">
+              <button type="button" className="button" disabled={busy === a.id} onClick={() => act(a, false)}>
+                Cancelar
+              </button>
+              <button type="button" className="button primary" disabled={busy === a.id} onClick={() => act(a, true)}>
+                {busy === a.id ? KIND_BUSY[a.kind] : "Confirmar"}
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+      {actions.length > 1 && (
+        <div className="omni-pending-nav">
+          <button
+            type="button"
+            className="mini-button omni-icon-button ghost"
+            aria-label="Pedido anterior"
+            disabled={active === 0}
+            onClick={() => goTo(active - 1)}
+          >
+            <CaretLeft />
+          </button>
+          <div className="omni-pending-dots" role="tablist" aria-label="Pedidos pendentes">
+            {actions.map((a, i) => (
+              <button
+                key={a.id}
+                type="button"
+                role="tab"
+                aria-selected={i === active}
+                aria-label={`Pedido ${i + 1} de ${actions.length}`}
+                className={i === active ? "active" : ""}
+                onClick={() => goTo(i)}
+              />
+            ))}
+          </div>
+          <button
+            type="button"
+            className="mini-button omni-icon-button ghost"
+            aria-label="Próximo pedido"
+            disabled={active === actions.length - 1}
+            onClick={() => goTo(active + 1)}
+          >
+            <CaretRight />
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,127 @@
+/* The conversation as text: what the user said, Omni's replies (with the latency to the first audio
+   and 👍/👎) and each tool Omni called, in order. */
+
+import { useEffect, useRef } from "react";
+import { Check, ThumbsDown, ThumbsUp, X } from "../icons";
+import type { OmniEntry } from "../../lib/omni-realtime";
+
+const TOOL_LABELS: Record<string, string> = {
+  list_videos: "Lendo seus conteúdos",
+  get_video: "Abrindo o vídeo",
+  channel_metrics: "Lendo as métricas do canal",
+  queue_status: "Olhando a fila da máquina",
+  inspect_content: "Analisando o conteúdo",
+  request_change: "Preparando a alteração",
+  create_content: "Preparando o conteúdo novo",
+  request_thumbnail: "Preparando o pedido de thumbnails",
+  prepare_publish: "Preparando a publicação",
+  navigate: "Abrindo a tela",
+  pending_approvals: "Vendo o que espera você",
+  get_motion_script: "Lendo o roteiro de motion",
+  answer_approval: "Preparando a resposta da aprovação",
+  list_references: "Lendo os estilos visuais",
+  get_reference: "Abrindo o estilo visual",
+  inspect_reference: "Olhando o estilo visual",
+  request_reference_change: "Preparando o pedido para o estilo visual",
+  open_claude: "Abrindo o processo do Claude",
+  stop_claude: "Parando o Claude",
+  write_to_claude: "Escrevendo para o Claude",
+  send_to_claude: "Enviando ao Claude",
+  create_reference: "Preparando o estilo visual novo",
+  choose_thumbnail: "Preparando a escolha da thumbnail",
+  request_analysis: "Preparando o pedido de análise",
+  omnichat_status: "Lendo o Omnichat",
+  set_omnichat: "Configurando o Omnichat",
+  omnichat_comments: "Lendo os comentários sem DM",
+  send_omnichat: "Preparando o envio do Omnichat",
+  confirm_action: "Confirmando",
+  cancel_action: "Cancelando",
+  control_editor: "Mexendo no player do editor",
+  add_epidemic_sound: "Buscando na Epidemic",
+  show_card: "Mostrando no painel",
+  ask_in_chat: "Abrindo o chat",
+  wait_for_work: "Pondo a conversa em espera",
+};
+
+export function Transcript({
+  entries,
+  onFeedback,
+}: {
+  entries: OmniEntry[];
+  onFeedback: (item: string, value: "up" | "down" | null) => void;
+}) {
+  const end = useRef<HTMLDivElement>(null);
+  /* follows the reply as it is written, not only when a new message arrives */
+  const last = entries.at(-1);
+  const tail = last && "text" in last ? last.text.length : 0;
+  // biome-ignore lint/correctness/useExhaustiveDependencies: re-runs on purpose when a message arrives or grows
+  useEffect(() => {
+    end.current?.scrollIntoView({ block: "nearest" });
+  }, [entries.length, tail]);
+  if (!entries.length) return null;
+  return (
+    <div className="omni-transcript" aria-live="polite">
+      {entries.map(e => {
+        if (e.kind === "user")
+          return (
+            <p key={`u-${e.id}`} className={`omni-msg user${e.pending ? " pending" : ""}`}>
+              {e.pending ? "…" : e.text}
+            </p>
+          );
+        if (e.kind === "tool")
+          return (
+            <p key={e.id} className={`omni-tool ${e.state}`}>
+              {e.state === "ok" ? (
+                <Check className="ic" />
+              ) : e.state === "error" ? (
+                <X className="ic" />
+              ) : (
+                <span className="omni-spinner" aria-hidden="true" />
+              )}
+              {TOOL_LABELS[e.name] ?? e.name}
+              {e.ms != null && <span className="subtle"> · {(e.ms / 1000).toFixed(1)} s</span>}
+              {e.detail && <span className="omni-tool-error"> · {e.detail}</span>}
+            </p>
+          );
+        if (e.kind === "note")
+          return (
+            <p key={e.id} className="omni-note subtle">
+              {e.text}
+            </p>
+          );
+        return (
+          <div key={`a-${e.id}`} className="omni-msg assistant">
+            <p>{e.text || "…"}</p>
+            <div className="omni-msg-meta">
+              {e.latency_ms != null && (
+                <span className="subtle" title={e.breakdown}>
+                  {(e.latency_ms / 1000).toFixed(2)} s
+                </span>
+              )}
+              {e.breakdown && <span className="subtle omni-breakdown">{e.breakdown}</span>}
+              <button
+                type="button"
+                className={`omni-vote${e.feedback === "up" ? " on" : ""}`}
+                onClick={() => onFeedback(e.id, e.feedback === "up" ? null : "up")}
+                aria-label="Resposta boa"
+                aria-pressed={e.feedback === "up"}
+              >
+                <ThumbsUp />
+              </button>
+              <button
+                type="button"
+                className={`omni-vote${e.feedback === "down" ? " on" : ""}`}
+                onClick={() => onFeedback(e.id, e.feedback === "down" ? null : "down")}
+                aria-label="Resposta ruim"
+                aria-pressed={e.feedback === "down"}
+              >
+                <ThumbsDown />
+              </button>
+            </div>
+          </div>
+        );
+      })}
+      <div ref={end} />
+    </div>
+  );
+}

package/studio/web/components/OmnichatAccountStatus.tsx

@@ -0,0 +1,87 @@
+/* The account, the comments permission, the agent and the pause. `enabled`: some rule is on
+   (then a stopped agent is a warning, not a hint). */
+
+import { Link } from "@tanstack/react-router";
+import { formatDayTime } from "../lib/format";
+import type { OmnichatState } from "../types/api";
+import { Skeleton } from "./ui/skeleton";
+
+export function OmnichatAccountStatus({ state, enabled = false }: { state: OmnichatState | null; enabled?: boolean }) {
+  if (!state) return <Skeleton className="row" aria-busy="true" style={{ width: 240 }} />;
+  const { account, comments, agent, pause } = state;
+  return (
+    <div className="omnichat-account">
+      {!account.ready ? (
+        <p className="warning">
+          Instagram não conectado: {account.reason}. Conecte em{" "}
+          <Link to="/settings/$category" params={{ category: "platforms" }} className="link">
+            Configurações → Plataformas
+          </Link>
+          .
+        </p>
+      ) : comments?.ready === false ? (
+        <div className="omnichat-token">
+          <p className="warning">
+            <strong>A API não lê os comentários de {account.username}.</strong> {comments.reason}
+          </p>
+          <ol>
+            <li>
+              Em{" "}
+              <a className="link" href="https://developers.facebook.com/apps" target="_blank" rel="noreferrer">
+                developers.facebook.com/apps
+              </a>{" "}
+              → seu app → Instagram → API setup with Instagram login → Generate access tokens, gere o token marcando{" "}
+              <code>instagram_business_basic</code>, <code>instagram_business_content_publish</code>,{" "}
+              <code>instagram_business_manage_comments</code> e <code>instagram_business_manage_messages</code>.
+            </li>
+            <li>
+              Cole em{" "}
+              <Link to="/settings/$category" params={{ category: "platforms" }} className="link">
+                Configurações → Plataformas → Instagram
+              </Link>
+              .
+            </li>
+            <li>
+              Se a DM der erro de permissão: no app do Instagram, Configurações → Mensagens e respostas ao story →
+              Controles de mensagens → Ferramentas conectadas → permitir acesso às mensagens.
+            </li>
+          </ol>
+          <p className="hint">
+            Passo a passo em <code>reference/omnichat.md</code>.
+          </p>
+        </div>
+      ) : comments && !comments.ready && comments.reason ? (
+        <p className="hint">Permissão de comentários sem conferir: {comments.reason}</p>
+      ) : null}
+      {pause && (
+        <p className="warning">
+          Em pausa até {formatDayTime(pause.until)}: {pause.reason}
+        </p>
+      )}
+      {agent?.cloud ? (
+        agent.cloud.ready ? (
+          agent.cloud.active ? null : (
+            <p className="warning">
+              A cloud está configurada para responder, mas está desligada lá: rode{" "}
+              <code>node tools/omnichat.mjs cloud push</code>.
+            </p>
+          )
+        ) : (
+          <p className="warning">Não deu para falar com a cloud: {agent.cloud.reason}</p>
+        )
+      ) : null}
+      {agent && !agent.cloud && !agent.loaded && (
+        <p className={enabled ? "warning" : "hint"}>
+          O agente do omnichat está desligado: nada é respondido sozinho. Ligue em{" "}
+          <Link to="/settings/$category" params={{ category: "publishing" }} className="link">
+            Configurações → Publicação → Omnichat
+          </Link>
+          .
+        </p>
+      )}
+      {agent?.installed && !agent.node_ok && (
+        <p className="warning">O node que o agente usa não existe mais: desligue e ligue o agente de novo.</p>
+      )}
+    </div>
+  );
+}

package/studio/web/components/OmnichatRulePanel/RuleConfig.tsx

@@ -0,0 +1,150 @@
+/* the rule config (collapsed when the rule exists; without a rule, it opens to create one), in steps:
+   trigger, message and replies (which also holds how the link is delivered). A new rule walks them with
+   Next (the defaults already fill the texts); a saved one jumps straight to the step to change. Save, discard and dry run stay in the
+   footer of every step. */
+
+import { useState } from "react";
+import type { RuleEditor } from "../../hooks/useRuleEditor";
+import type { OmnichatRuleDetail } from "../../types/api";
+import { ArrowCounterClockwise, ArrowLeft, ArrowRight, Check, FloppyDisk, Play, SlidersHorizontal, X } from "../icons";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../ui/accordion";
+import { STEPS, stepInfo, type StepId } from "./rule-steps";
+import { MessageStep } from "./steps/MessageStep";
+import { RepliesStep } from "./steps/RepliesStep";
+import { TriggerStep } from "./steps/TriggerStep";
+import type { StepProps } from "./steps/types";
+
+const BODIES: Record<StepId, (p: StepProps) => React.ReactNode> = {
+  trigger: p => <TriggerStep {...p} />,
+  message: p => <MessageStep {...p} />,
+  replies: p => <RepliesStep {...p} />,
+};
+
+export function RuleConfig({
+  editor,
+  detail: d,
+  enabled,
+  onBehalf,
+  post,
+  thePost,
+  defaultOpen = false,
+}: {
+  editor: RuleEditor;
+  detail: OmnichatRuleDetail;
+  enabled: boolean;
+  onBehalf: string;
+  post: string;
+  thePost: string;
+  /* open from the start even when the rule exists (the rule's own screen) */
+  defaultOpen?: boolean;
+}) {
+  const { rule, initial, changed, form, setForm, busy, confirmSave, setConfirmSave, save, runDry } = editor;
+  const [index, setIndex] = useState(0);
+  /* how far a new rule has walked: a step it has not reached shows its number, not a check */
+  const [reached, setReached] = useState(0);
+  const go = (i: number) => {
+    setIndex(i);
+    setReached(r => Math.max(r, i));
+  };
+  const last = index === STEPS.length - 1;
+  const step = STEPS[index];
+  const infos = STEPS.map(s => stepInfo(s.id, form, d, post));
+  /* a saved rule has been through every step; a new one only the ones it walked */
+  const seen = (i: number) => !!rule || i <= reached;
+  const saveFirst = last || !!rule;
+
+  return (
+    <Accordion
+      type="single"
+      collapsible
+      defaultValue={rule && !defaultOpen ? undefined : "config"}
+      className="auto-rule-config"
+    >
+      <AccordionItem value="config">
+        <AccordionTrigger>
+          <SlidersHorizontal className="ic" />
+          <span>Configuração do chat</span>
+          <span className="subtle auto-rule-config-summary">
+            {infos[0].summary}
+            {changed ? " · não gravado" : ""}
+          </span>
+        </AccordionTrigger>
+        <AccordionContent className="auto-rule-config-fields">
+          <ol className="stepper compact rule-steps">
+            {STEPS.map((s, i) => {
+              const { missing, summary } = infos[i];
+              const kind = !seen(i) ? "" : missing ? "warning" : "done";
+              return (
+                <li key={s.id} className={`step ${kind}${i === index ? " chosen" : ""}`}>
+                  <button type="button" onClick={() => go(i)} aria-current={i === index ? "step" : undefined}>
+                    <span className="step-mark">{kind === "done" ? <Check weight="bold" /> : kind ? "!" : i + 1}</span>
+                    <span className="step-name">{s.name}</span>
+                    <span className="step-status">{summary}</span>
+                  </button>
+                </li>
+              );
+            })}
+          </ol>
+
+          <div className="auto-rule-step">{BODIES[step.id]({ editor, detail: d, post, thePost })}</div>
+
+          {confirmSave && enabled && (
+            <p className="warning">
+              A regra está ligada: a nova vale na próxima passada e relê os comentários dos últimos 7 dias, respondendo{" "}
+              {onBehalf} os que passarem a disparar.
+            </p>
+          )}
+          <div className="actions">
+            {index > 0 && !confirmSave && (
+              <button className="button" disabled={!!busy} onClick={() => go(index - 1)}>
+                <ArrowLeft className="ic" /> Voltar
+              </button>
+            )}
+            {!last && !confirmSave && (
+              <button
+                className={`button${saveFirst ? "" : " primary"}`}
+                disabled={!!busy}
+                onClick={() => go(index + 1)}
+              >
+                Próximo <ArrowRight className="ic" />
+              </button>
+            )}
+            {confirmSave && enabled ? (
+              <>
+                <button className="button approve" disabled={!!busy} onClick={save}>
+                  <Check className="ic" /> {busy === "save" ? "Gravando…" : "Confirmar: gravar com a regra ligada"}
+                </button>
+                <button className="button" disabled={!!busy} onClick={() => setConfirmSave(false)}>
+                  <X className="ic" /> Cancelar
+                </button>
+              </>
+            ) : (
+              <button
+                className={`button${saveFirst ? " primary" : ""}`}
+                disabled={!!busy || (!changed && !!rule)}
+                onClick={() => (enabled ? setConfirmSave(true) : save())}
+              >
+                <FloppyDisk className="ic" /> {busy === "save" ? "Gravando…" : "Gravar"}
+              </button>
+            )}
+            {changed && rule && !confirmSave && (
+              <button className="button" disabled={!!busy} onClick={() => setForm(initial)}>
+                <ArrowCounterClockwise className="ic" /> Descartar
+              </button>
+            )}
+            <button
+              className="button"
+              disabled={!!busy || !rule || changed}
+              onClick={runDry}
+              title={
+                changed ? "Grave antes: a simulação usa a regra gravada" : "Mostra o que mandaria, sem mandar nada"
+              }
+            >
+              <Play className="ic" /> {busy === "dry-run" ? "Simulando…" : "Simular"}
+            </button>
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

package/studio/web/components/OmnichatRulePanel/RuleDryRun.tsx

@@ -0,0 +1,15 @@
+/* the dry run's output: what the rule would send now, sending nothing */
+
+export function RuleDryRun({ output, onClose }: { output: string; onClose: () => void }) {
+  return (
+    <div className="auto-rule-dry-run">
+      <h3>
+        Simulação <span className="subtle">o que mandaria agora, sem mandar nada</span>
+        <button className="subtle-link" onClick={onClose}>
+          Fechar
+        </button>
+      </h3>
+      <pre className="log">{output}</pre>
+    </div>
+  );
+}

package/studio/web/components/OmnichatRulePanel/RuleEnableConfirm.tsx

@@ -0,0 +1,42 @@
+/* the second click of turning the rule on: it answers outside, on behalf of the account */
+
+import { capitalize } from "../../lib/format";
+import type { RuleEditor } from "../../hooks/useRuleEditor";
+import type { OmnichatRuleDetail } from "../../types/api";
+import { Power, X } from "../icons";
+import { triggerLabel } from "../RuleForm";
+
+export function RuleEnableConfirm({
+  editor: { form, busy, setConfirm, enable },
+  detail: d,
+  onBehalf,
+  thePost,
+  publicReplies,
+}: {
+  editor: RuleEditor;
+  detail: OmnichatRuleDetail;
+  onBehalf: string;
+  thePost: string;
+  publicReplies: string[];
+}) {
+  return (
+    <div className="auto-rule-confirm">
+      <p>
+        <strong>Ligar responde para fora, {onBehalf}.</strong> Quem comentar{" "}
+        {triggerLabel({ any_comment: form.any_comment, keywords: form.keywords })} recebe a DM
+        {publicReplies.length ? " e uma resposta pública no comentário" : ""}.
+        {d.published
+          ? ` Os comentários dos últimos 7 dias que disparam também entram${d.defaults.max_per_pass ? `, até ${d.defaults.max_per_pass} por passada` : ""}.`
+          : ` ${capitalize(thePost)} ainda não subiu: começa quando ele for publicado.`}
+      </p>
+      <div className="actions">
+        <button className="button approve" disabled={!!busy} onClick={() => enable(true)}>
+          <Power className="ic" /> {busy === "enable" ? "Ligando…" : `Confirmar: responder ${onBehalf}`}
+        </button>
+        <button className="button" disabled={!!busy} onClick={() => setConfirm(false)}>
+          <X className="ic" /> Cancelar
+        </button>
+      </div>
+    </div>
+  );
+}

package/studio/web/components/OmnichatRulePanel/RuleSkeleton.tsx

@@ -0,0 +1,18 @@
+import { Skeleton } from "../ui/skeleton";
+
+/* the rule has not arrived yet: the state, the term, the message and the button, in form order */
+export function RuleSkeleton() {
+  return (
+    <div
+      className="omnichat-rule-skeleton"
+      aria-busy="true"
+      aria-label="Lendo a regra"
+      style={{ display: "flex", flexDirection: "column", gap: 10 }}
+    >
+      <Skeleton className="row" style={{ width: 200 }} />
+      <Skeleton style={{ height: 36, width: "100%", maxWidth: 360 }} />
+      <Skeleton style={{ height: 72, width: "100%" }} />
+      <Skeleton style={{ height: 32, width: 120 }} />
+    </div>
+  );
+}