@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/components/Lightbox.tsx

@@ -0,0 +1,41 @@
+/* An enlarged image over the whole app. AppShell renders <Lightbox/> once; anyone calls openLightbox. */
+
+import { useEffect, useState } from "react";
+import { ArrowUpRight } from "./icons";
+
+type Image = { src: string; title?: string };
+let show: ((img: Image | null) => void) | null = null;
+
+export function openLightbox(src: string, title?: string) {
+  show?.({ src, title });
+}
+
+export function Lightbox() {
+  const [img, setImg] = useState<Image | null>(null);
+  useEffect(() => {
+    show = setImg;
+    const esc = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setImg(null);
+    };
+    addEventListener("keydown", esc);
+    return () => {
+      show = null;
+      removeEventListener("keydown", esc);
+    };
+  }, []);
+  if (!img) return null;
+  return (
+    <div className="lightbox" onClick={() => setImg(null)}>
+      <figure onClick={e => e.stopPropagation()}>
+        <img src={img.src} alt={img.title ?? ""} />
+        <figcaption>
+          <span>{img.title}</span>
+          <a href={img.src} target="_blank" rel="noreferrer">
+            Tamanho real <ArrowUpRight className="ic" />
+          </a>
+          <button onClick={() => setImg(null)}>Fechar · esc</button>
+        </figcaption>
+      </figure>
+    </div>
+  );
+}

package/studio/web/components/LogStream.tsx

@@ -0,0 +1,42 @@
+/* Live log. The server sends the whole log and then what arrives. If the connection drops and
+   comes back, it sends everything again: so the text resets on each open. The same goes for an
+   agent session transcript (`src`). */
+
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+
+export function LogStream({ id, height = 260, src }: { id: string; height?: number; src?: string }) {
+  const [text, setText] = useState("");
+  const [end, setEnd] = useState<string | null>(null);
+  const ref = useRef<HTMLPreElement>(null);
+  const stuck = useRef(true);
+  const url = src ?? `/api/queue/${encodeURIComponent(id)}/log`;
+  useEffect(() => {
+    setText("");
+    setEnd(null);
+    const es = new EventSource(url);
+    es.onopen = () => setText("");
+    es.addEventListener("log", e => setText(t => (t + JSON.parse((e as MessageEvent).data)).slice(-200_000)));
+    es.addEventListener("end", e => {
+      setEnd(JSON.parse((e as MessageEvent).data).state);
+      es.close();
+    });
+    return () => es.close();
+  }, [url]);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (el && stuck.current) el.scrollTop = el.scrollHeight;
+  }, [text]);
+  return (
+    <pre
+      className="log"
+      ref={ref}
+      style={{ maxHeight: height }}
+      onScroll={e => {
+        const el = e.currentTarget;
+        stuck.current = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
+      }}
+    >
+      {text || (end ? "(sem saída)" : "Esperando saída…")}
+    </pre>
+  );
+}

package/studio/web/components/Markdown.tsx

@@ -0,0 +1,21 @@
+/* Raw HTML inside the .md comes out as text: the file may come from material pasted from the
+   web, and this page has buttons that write. */
+
+import { useMemo } from "react";
+import { Marked } from "marked";
+
+const md = new Marked({ gfm: true });
+md.use({ renderer: { html: ({ text }) => text.replace(/&/g, "&amp;").replace(/</g, "&lt;") } });
+
+export function Markdown({ text }: { text: string }) {
+  /* an outside link opens in another tab: the studio stays where it was */
+  const html = useMemo(
+    () =>
+      (md.parse(text) as string)
+        .replace(/href="\s*javascript:[^"]*"/gi, 'href="#"')
+        .replace(/<a href="(https?:)/g, '<a target="_blank" rel="noreferrer" href="$1'),
+    [text],
+  );
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: markdown from the project's own files, rendered by marked
+  return <div className="markdown" dangerouslySetInnerHTML={{ __html: html }} />;
+}

package/studio/web/components/MissingDmsPanel/BatchSend.tsx

@@ -0,0 +1,137 @@
+/* the batch: check the ones that ask, choose what goes (DM, reply or both), write the reply and
+   confirm, since sending goes out on behalf of the account */
+
+import type { MissingDms } from "../../hooks/useMissingDms";
+import { SEND_MODES } from "../../lib/missing-dms";
+import { Check, Power, X } from "../icons";
+
+export function BatchSend({
+  dms: {
+    mode,
+    text,
+    setText,
+    confirm,
+    setConfirm,
+    busy,
+    setChecked,
+    commentOnly,
+    send,
+    changeMode,
+    written,
+    asking,
+    n,
+    missing,
+    action,
+  },
+  noRule,
+  onBehalf,
+}: {
+  dms: MissingDms;
+  noRule: boolean;
+  onBehalf: string;
+}) {
+  return (
+    <>
+      <div className="setting-row">
+        <button
+          className="button small"
+          disabled={!!busy || !asking.length}
+          onClick={() => {
+            setChecked(new Set(asking.map(c => c.id)));
+            setConfirm(false);
+          }}
+        >
+          <Check className="ic" /> Marcar os que pedem ({asking.length})
+        </button>
+        {n > 0 && (
+          <button
+            className="subtle-link"
+            disabled={!!busy}
+            onClick={() => {
+              setChecked(new Set());
+              setConfirm(false);
+            }}
+          >
+            Desmarcar
+          </button>
+        )}
+      </div>
+      <div className="segmented small" role="radiogroup" aria-label="O que mandar">
+        {SEND_MODES.map(m => (
+          <button
+            key={m.id}
+            role="radio"
+            aria-checked={mode === m.id}
+            className={mode === m.id ? "active" : ""}
+            disabled={!!busy}
+            onClick={() => changeMode(m.id)}
+          >
+            {m.name}
+          </button>
+        ))}
+      </div>
+      {mode !== "dm" && (
+        <label className="field">
+          <span>
+            Resposta no comentário{" "}
+            <em>
+              {commentOnly
+                ? "{username} vira o @ de quem comentou"
+                : "vazia = uma das da regra, sorteada · {username} vira o @ de quem comentou"}
+            </em>
+          </span>
+          <textarea
+            rows={2}
+            value={text}
+            disabled={!!busy}
+            maxLength={2200}
+            placeholder={commentOnly ? "Valeu, @{username}!" : "Te mandei no direct, @{username} 📩"}
+            onChange={e => {
+              setText(e.target.value);
+              setConfirm(false);
+            }}
+          />
+          {commentOnly && <small>Vai só no comentário, sem DM, e vale também para quem passou dos 7 dias.</small>}
+        </label>
+      )}
+      {noRule && !commentOnly && <p className="warning">Grave a regra antes: a DM sai do texto dela.</p>}
+      {confirm ? (
+        <div className="auto-rule-confirm">
+          <p>
+            <strong>
+              {action} {onBehalf}.
+            </strong>{" "}
+            {commentOnly ? (
+              <>Vai a resposta escrita no comentário de cada um, sem DM, no ritmo do agente.</>
+            ) : (
+              <>
+                Vai a DM da regra gravada
+                {mode === "both"
+                  ? written
+                    ? " e a resposta escrita no comentário"
+                    : " e uma resposta no comentário"
+                  : ""}
+                , mesmo para quem não comentou o termo, no ritmo do agente.
+              </>
+            )}
+          </p>
+          <div className="actions">
+            <button className="button approve" disabled={!!busy} onClick={send}>
+              <Power className="ic" />{" "}
+              {busy === "send" ? "Mandando…" : `Confirmar: ${commentOnly ? "responder" : "mandar"} ${onBehalf}`}
+            </button>
+            <button className="button" disabled={!!busy} onClick={() => setConfirm(false)}>
+              <X className="ic" /> Cancelar
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="actions">
+          <button className="button primary" disabled={!!busy || !!missing} onClick={() => setConfirm(true)}>
+            <Power className="ic" /> {missing ?? action}
+          </button>
+        </div>
+      )}
+    </>
+  );
+}

package/studio/web/components/MissingDmsPanel/CommentCard.tsx

@@ -0,0 +1,168 @@
+/* One message of the chat: a ghost card with the username, the text below, Responder, the status
+   badges, the DM icon (when one went) and Apagar. Replies nest inside it, indented along a thread line;
+   a reply can be answered too (it goes to the comment with the @). */
+
+import type { MissingDms } from "../../hooks/useMissingDms";
+import { GATE_LABEL } from "../../lib/missing-dms";
+import { capitalize, timeAgo } from "../../lib/format";
+import type { ThreadComment, ThreadReply } from "../../types/api";
+import { igDate } from "../RuleLog";
+import { ArrowBendUpLeft, Trash } from "../icons";
+import { Badge } from "../ui/badge";
+import { Checkbox } from "../ui/checkbox";
+import { DmBubble } from "./DmBubble";
+import { ReplyComposer } from "./ReplyComposer";
+
+/* badges of a comment of someone else: whether it asks, the DM, the agent's state and the deadline */
+function Status({ c }: { c: ThreadComment }) {
+  return (
+    <span className="thread-badges">
+      {c.triggers === "yes" ? (
+        <Badge variant="ok">Pede</Badge>
+      ) : c.triggers === "uncertain" ? (
+        <Badge variant="running">Talvez peça</Badge>
+      ) : null}
+      {c.dm && <Badge variant="ok">DM enviada</Badge>}
+      {c.dm?.gate && c.dm.gate !== "delivered" && <Badge variant="running">{GATE_LABEL[c.dm.gate] ?? c.dm.gate}</Badge>}
+      {c.dm?.gate === "delivered" && <Badge variant="ok">{GATE_LABEL.delivered}</Badge>}
+      {c.state === "failed" && !c.dm && <Badge variant="error">Falhou</Badge>}
+      {c.state === "retry" && <Badge variant="warning">Tenta de novo</Badge>}
+      {(c.state === "queued" || c.state === "uncertain") && !c.dm && <Badge variant="running">Na fila do agente</Badge>}
+      {c.state === "skipped" && !c.dm && <Badge>Pulado</Badge>}
+      {!c.dm && !c.within_deadline && c.triggers && <Badge variant="error">Passou dos 7 dias</Badge>}
+    </span>
+  );
+}
+
+export function Avatar({ name }: { name: string | null }) {
+  return (
+    <span className="thread-avatar" aria-hidden>
+      {(name ?? "?").slice(0, 1).toUpperCase()}
+    </span>
+  );
+}
+
+/* the actions row: Responder, the DM and Apagar (two clicks) */
+function Actions({
+  id,
+  username,
+  dms,
+  dm,
+}: {
+  id: string;
+  username: string | null;
+  dms: MissingDms;
+  dm?: ThreadComment["dm"];
+}) {
+  const { busy, openFocus, askDelete, setAskDelete, remove } = dms;
+  return (
+    <div className="thread-actions">
+      <button
+        className="thread-action"
+        disabled={!!busy}
+        onClick={() => openFocus(id)}
+        title={`Responder @${username ?? "?"}`}
+      >
+        <ArrowBendUpLeft className="ic" /> Responder
+      </button>
+      {dm && <DmBubble dm={dm} username={username} />}
+      <span className="thread-spacer" />
+      {askDelete === id ? (
+        <span className="thread-confirm" role="alert">
+          Apagar no Instagram? Não tem volta.
+          <button className="button small danger" disabled={!!busy} onClick={() => remove(id)}>
+            {busy === "delete" ? "Apagando…" : "Apagar"}
+          </button>
+          <button className="button small" disabled={!!busy} onClick={() => setAskDelete(null)}>
+            Não
+          </button>
+        </span>
+      ) : (
+        <button
+          className="thread-action danger"
+          disabled={!!busy}
+          onClick={() => setAskDelete(id)}
+          title="Apagar o comentário"
+          aria-label={`Apagar o comentário de @${username ?? "?"}`}
+        >
+          <Trash className="ic" />
+        </button>
+      )}
+    </div>
+  );
+}
+
+function Reply({
+  r,
+  parent,
+  dms,
+  noRule,
+  onBehalf,
+}: {
+  r: ThreadReply;
+  parent: ThreadComment;
+  dms: MissingDms;
+  noRule: boolean;
+  onBehalf: string;
+}) {
+  return (
+    <div className="thread-card reply" data-own={r.own || undefined}>
+      <div className="thread-head">
+        <Avatar name={r.username} />
+        <b className="thread-user">@{r.username ?? "?"}</b>
+        {r.own && <Badge variant="neutral">Você</Badge>}
+        <span className="subtle">{timeAgo(igDate(r.at))}</span>
+      </div>
+      <p className="thread-text">{r.text}</p>
+      <Actions id={r.id} username={r.username} dms={dms} />
+      {dms.replying?.id === r.id && <ReplyComposer dms={dms} comment={parent} noRule={noRule} onBehalf={onBehalf} />}
+    </div>
+  );
+}
+
+export function CommentCard({
+  c,
+  dms,
+  selectable,
+  noRule,
+  onBehalf,
+}: {
+  c: ThreadComment;
+  dms: MissingDms;
+  selectable: boolean;
+  noRule: boolean;
+  onBehalf: string;
+}) {
+  const { checked, check, busy, commentOnly, replying, without } = dms;
+  const pickable = selectable && without.has(c.id);
+  return (
+    <div className="thread-card" data-own={c.own || undefined}>
+      <div className="thread-head">
+        {pickable && (
+          <Checkbox
+            checked={checked.has(c.id)}
+            disabled={(!c.within_deadline && !commentOnly) || !!busy}
+            aria-label={`Escolher @${c.username ?? "?"}`}
+            onCheckedChange={v => check(c.id, v)}
+          />
+        )}
+        <Avatar name={c.username} />
+        <b className="thread-user">@{c.username ?? "?"}</b>
+        {c.own && <Badge variant="neutral">Você</Badge>}
+        <span className="subtle">{timeAgo(igDate(c.at))}</span>
+        {!c.own && <Status c={c} />}
+      </div>
+      <p className="thread-text">{c.text}</p>
+      {c.reason && !c.dm && !c.own && <p className="hint">{capitalize(c.reason)}</p>}
+      <Actions id={c.id} username={c.username} dms={dms} dm={c.dm} />
+      {replying?.id === c.id && <ReplyComposer dms={dms} comment={c} noRule={noRule} onBehalf={onBehalf} />}
+      {!!c.replies.length && (
+        <div className="thread-replies">
+          {c.replies.map(r => (
+            <Reply key={r.id} r={r} parent={c} dms={dms} noRule={noRule} onBehalf={onBehalf} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/studio/web/components/MissingDmsPanel/CommentFeed.tsx

@@ -0,0 +1,45 @@
+/* The post as a chat: the comments newest first, each a card with its replies nested */
+
+import type { MissingDms } from "../../hooks/useMissingDms";
+import { PAGE_SIZE } from "../RuleLog";
+import { CommentCard } from "./CommentCard";
+
+export function CommentFeed({ dms, noRule, onBehalf }: { dms: MissingDms; noRule: boolean; onBehalf: string }) {
+  const { list, filter, setFilter, feed, feedAll, showAll, setShowAll } = dms;
+  if (!list) return null;
+  return (
+    <div className="thread">
+      <div className="segmented small" role="radiogroup" aria-label="Quais comentários">
+        {(
+          [
+            ["all", `Todos (${list.thread.length})`],
+            ["nodm", `Sem DM (${list.items.length})`],
+          ] as const
+        ).map(([id, label]) => (
+          <button
+            key={id}
+            role="radio"
+            aria-checked={filter === id}
+            className={filter === id ? "active" : ""}
+            onClick={() => setFilter(id)}
+          >
+            {label}
+          </button>
+        ))}
+      </div>
+      {!feedAll.length && (
+        <p className="hint">
+          {filter === "nodm" ? "Todo mundo que comentou já recebeu a DM." : "Nenhum comentário ainda."}
+        </p>
+      )}
+      {feed.map(c => (
+        <CommentCard key={c.id} c={c} dms={dms} selectable={filter === "nodm"} noRule={noRule} onBehalf={onBehalf} />
+      ))}
+      {feedAll.length > PAGE_SIZE && (
+        <button className="subtle-link" onClick={() => setShowAll(x => !x)}>
+          {showAll ? "Mostrar só os mais novos" : `Mostrar todos (${feedAll.length})`}
+        </button>
+      )}
+    </div>
+  );
+}

package/studio/web/components/MissingDmsPanel/DmBubble.tsx

@@ -0,0 +1,38 @@
+/* The DM icon on a card: opens what was sent to that person, as the message bubble they got */
+
+import { formatWhen } from "../../lib/format";
+import { GATE_LABEL } from "../../lib/missing-dms";
+import type { ThreadComment } from "../../types/api";
+import { igDate } from "../RuleLog";
+import { Envelope } from "../icons";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+
+export function DmBubble({ dm, username }: { dm: NonNullable<ThreadComment["dm"]>; username: string | null }) {
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <button
+          className="thread-action"
+          title="Ver a DM enviada"
+          aria-label={`Ver a DM enviada para @${username ?? "?"}`}
+        >
+          <Envelope className="ic" />
+        </button>
+      </PopoverTrigger>
+      <PopoverContent className="thread-dm" align="start">
+        <div className="thread-dm-head">
+          DM para <b>@{username ?? "?"}</b> · {formatWhen(igDate(dm.at))}
+        </div>
+        {dm.text ? (
+          <p className="thread-dm-bubble">{dm.text}</p>
+        ) : (
+          <p className="hint">O texto desta DM não foi guardado.</p>
+        )}
+        {dm.text && !dm.exact && (
+          <p className="hint">Esta DM foi enviada antes de o texto ser guardado: este é o da regra como está hoje.</p>
+        )}
+        {dm.gate && <p className="hint">{GATE_LABEL[dm.gate] ?? dm.gate}</p>}
+      </PopoverContent>
+    </Popover>
+  );
+}

package/studio/web/components/MissingDmsPanel/ReplyComposer.tsx

@@ -0,0 +1,63 @@
+/* The reply field right under the card being answered; ⌘↩ sends, Esc closes.
+   A reply to a reply goes to its comment with the person's @ in front (Instagram threads two levels). */
+
+import type { MissingDms } from "../../hooks/useMissingDms";
+import type { ThreadComment } from "../../types/api";
+import { PaperPlane } from "../icons";
+import { Checkbox } from "../ui/checkbox";
+
+export function ReplyComposer({
+  dms: { busy, setFocus, focusText, setFocusText, focusDm, setFocusDm, replyFocus, focusWritten, replying },
+  comment,
+  noRule,
+  onBehalf,
+}: {
+  dms: MissingDms;
+  comment: ThreadComment;
+  noRule: boolean;
+  onBehalf: string;
+}) {
+  if (!replying) return null;
+  const canDm = !replying.nested && !noRule && !comment.dm && !comment.own && comment.within_deadline;
+  return (
+    <div className="thread-composer">
+      <textarea
+        rows={2}
+        autoFocus
+        value={focusText}
+        disabled={!!busy}
+        maxLength={2200}
+        aria-label={`Responder @${replying.username ?? "?"}`}
+        placeholder={
+          replying.nested ? `Responder @${replying.username ?? "?"}…` : `Valeu, @${replying.username ?? "{username}"}!`
+        }
+        onChange={e => setFocusText(e.target.value)}
+        onKeyDown={e => {
+          if (e.key === "Escape") setFocus(null);
+          else if (e.key === "Enter" && (e.metaKey || e.ctrlKey) && !busy && (focusDm || focusWritten)) replyFocus();
+        }}
+      />
+      <div className="thread-composer-bar">
+        {canDm ? (
+          <label className="check-toggle">
+            <Checkbox checked={focusDm} disabled={!!busy} onCheckedChange={setFocusDm} />
+            <span>Mandar também a DM da regra{focusDm ? " (vazio = resposta da regra)" : ""}</span>
+          </label>
+        ) : (
+          <span className="hint">{"{username}"} vira o @ · ⌘↩ responde · Esc fecha</span>
+        )}
+        <button className="button small" disabled={!!busy} onClick={() => setFocus(null)}>
+          Cancelar
+        </button>
+        <button
+          className="button primary small"
+          disabled={!!busy || (!focusDm && !focusWritten)}
+          onClick={replyFocus}
+          title={`Responder ${onBehalf}`}
+        >
+          <PaperPlane className="ic" /> {busy === "send" ? "Respondendo…" : "Responder"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/studio/web/components/MissingDmsPanel/index.tsx

@@ -0,0 +1,98 @@
+/* The post's comments as a chat. "Buscar" reads the post now, without waiting for the agent: every comment
+   is a ghost card (username, text, Responder, status badges, the DM icon when one went, Apagar) with its
+   replies nested inside, the account's own included. A reply can be answered too: it goes to the comment
+   with the person's @ (Instagram threads two levels). Responder and Apagar act on the spot, as in any app
+   (Apagar asks a second click: it deletes on Instagram, no way back).
+   "Sem DM" filters who did not get the DM (what the rule skipped, has not picked up yet or does not trigger,
+   and what failed): the checked ones get the saved rule's DM, the comment reply or both, at the agent's
+   pace, after the confirmation, since sending goes out on behalf of the account. The reply can be written
+   here; empty, one of the rule's goes. Comment only, without DM, it must be written (the rule's say "te
+   mandei no direct") and has no 7-day deadline.
+   Omni drives it the same way, in plain sight (lib/omni-ui omnichat_comments): Buscar, the checks, the
+   mode and the reply's text; the send itself is Omni's card (send_omnichat), never this panel's button. */
+
+import { useMissingDms } from "../../hooks/useMissingDms";
+import { askingItems, type SendMode } from "../../lib/missing-dms";
+import { useOmniHandle } from "../../lib/omni-ui";
+import { missingDmsKey } from "../../../shared/omni-screens";
+import type { RuleTargetRef } from "../../lib/omnichat-api";
+import { capitalize, timeAgo } from "../../lib/format";
+import { ArrowClockwise } from "../icons";
+import { toDisplay } from "../RuleForm";
+import { BatchSend } from "./BatchSend";
+import { CommentFeed } from "./CommentFeed";
+
+/* `target`: the rule's video, carousel or post (lib/omnichat-api); `onBehalf`: "em nome de @conta" */
+export function MissingDmsPanel({
+  target,
+  noRule,
+  hasPublicReplies,
+  onBehalf,
+  onSend,
+}: {
+  target: RuleTargetRef;
+  noRule: boolean;
+  hasPublicReplies: boolean;
+  onBehalf: string;
+  onSend: () => void;
+}) {
+  const dms = useMissingDms({ target, noRule, hasPublicReplies, onSend });
+  const { list, busy, result, fetchList, filter, problems } = dms;
+  useOmniHandle(target.slug && !target.code ? missingDmsKey(target.carousel ? "carousel" : "video", target.slug) : "", {
+    fetch: () => fetchList(),
+    /* ids null: everyone who asks and can still get it in this mode */
+    select: (ids: string[] | null, mode: SendMode, text: string) => {
+      const items = list?.items ?? [];
+      const pick = ids ? items.filter(i => ids.includes(i.id)) : askingItems(items, mode === "comment");
+      dms.changeMode(mode);
+      dms.setFocus(null);
+      dms.setFilter("nodm");
+      dms.setText(mode === "dm" ? "" : text);
+      dms.setChecked(new Set(pick.filter(i => mode === "comment" || i.within_deadline).map(i => i.id)));
+      return pick.map(i => i.id);
+    },
+    /* after Omni's card went: the sent ones leave the list */
+    refresh: async () => {
+      dms.setChecked(new Set());
+      await fetchList(false);
+    },
+  });
+
+  return (
+    <div className="auto-rule-record">
+      <h3>
+        Comentários{" "}
+        <span className="subtle">
+          {list
+            ? `${list.read} ${list.read === 1 ? "comentário lido" : "comentários lidos"}${list.truncated ? " (os mais novos)" : ""} · ${list.without_dm} sem DM · lido ${timeAgo(list.checked_at)}`
+            : "As conversas do post e quem não recebeu a DM"}
+        </span>
+      </h3>
+      <div className="setting-row">
+        <button className="button small" disabled={!!busy} onClick={() => fetchList()}>
+          <ArrowClockwise className="ic" />{" "}
+          {busy === "fetch" ? "Lendo o post…" : list ? "Buscar de novo" : "Buscar os comentários"}
+        </button>
+        {!list && <span className="hint">Lê o post agora, sem esperar o agente. Só lê: nada é mandado.</span>}
+      </div>
+
+      {list && <CommentFeed dms={dms} noRule={noRule} onBehalf={onBehalf} />}
+      {list && filter === "nodm" && !!list.items.length && <BatchSend dms={dms} noRule={noRule} onBehalf={onBehalf} />}
+
+      {result && (
+        <p className={`response ${result.ok ? "ok" : "error"}`}>
+          {capitalize(result.ok ? (result.output ?? "") : toDisplay(result.error ?? ""))}
+        </p>
+      )}
+      {!!problems.length && (
+        <ul className="auto-rule-problems">
+          {problems.map(x => (
+            <li key={x.id}>
+              @{x.username ?? x.id}: {capitalize(x.reason ?? x.state)}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}