@crievo/omni 0.0.0-stage → 0.1.1

package/studio/web/components/ReferenceActions.tsx

@@ -0,0 +1,89 @@
+import { useState } from "react";
+import { api, enc, send } from "../lib/api";
+import { Switch } from "./ui/switch";
+import { Trash, X } from "./icons";
+import type { ReferenceSummary } from "../types/api";
+
+/* enable/disable and, only inside the reference (`onDelete`), delete (goes to the Trash); the list rereads through the dir event */
+export function ReferenceActions({
+  reference,
+  usedIn = 0,
+  onDelete,
+  part,
+}: {
+  reference: ReferenceSummary;
+  usedIn?: number;
+  onDelete?: () => void;
+  part?: "switch" | "delete";
+}) {
+  const [busy, setBusy] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const request = async (action: "enable" | "delete", enabled?: boolean) => {
+    setBusy(true);
+    setError(null);
+    const r = api.references[":name"];
+    const param = { name: enc(reference.name) };
+    const res = await send(
+      action === "enable"
+        ? r.enable.$post({ param, json: { enabled: !!enabled } })
+        : r.delete.$post({ param, json: {} }),
+    );
+    setBusy(false);
+    if (!res.ok) setError(res.error ?? "Não deu certo");
+    else if (action === "delete") onDelete?.();
+    return res.ok;
+  };
+  return (
+    <div className="reference-actions">
+      {confirming && part !== "switch" ? (
+        <span className="confirm-delete">
+          <span>
+            Mover para a Lixeira?
+            {usedIn > 0 && <span className="warning"> Usada em {usedIn === 1 ? "1 vídeo" : `${usedIn} vídeos`}.</span>}
+          </span>
+          <button
+            className="button danger"
+            disabled={busy}
+            onClick={() => request("delete").then(ok => ok || setConfirming(false))}
+          >
+            <Trash className="ic" /> {busy ? "Apagando…" : "Apagar"}
+          </button>
+          <button className="button" disabled={busy} onClick={() => setConfirming(false)}>
+            <X className="ic" /> Cancelar
+          </button>
+        </span>
+      ) : (
+        <>
+          {part !== "delete" && (
+            <label
+              className="toggle-switch"
+              title={
+                reference.enabled ? "Ligada: o roteiro de motion pode escolher" : "Desligada: fica fora da escolha"
+              }
+            >
+              <Switch
+                checked={reference.enabled}
+                disabled={busy}
+                onCheckedChange={enabled => request("enable", enabled)}
+              />
+              <span>{reference.enabled ? "Ligada" : "Desligada"}</span>
+            </label>
+          )}
+          {onDelete && part !== "switch" && (
+            <button
+              type="button"
+              className="button danger small"
+              disabled={busy}
+              onClick={() => setConfirming(true)}
+              title="mover a pasta para a Lixeira"
+            >
+              <Trash className="ic" /> Apagar
+            </button>
+          )}
+        </>
+      )}
+      {error && <span className="response error">{error}</span>}
+    </div>
+  );
+}

package/studio/web/components/ReferencePicker.tsx

@@ -0,0 +1,136 @@
+/* The style reference picker (new video, reference swap): one card per reference, in a row that
+   scrolls sideways: the still frame, and its video playing muted on hover. */
+
+import { useMemo, useRef } from "react";
+import { Link } from "@tanstack/react-router";
+import { referenceFileUrl } from "../lib/media";
+import type { ReferenceSummary } from "../types/api";
+import { Check, Play, Plus } from "./icons";
+import { Palette } from "./Palette";
+import { VoiceAvatar } from "./VoiceAvatar";
+
+function ReferenceChoiceCard({
+  reference: r,
+  chosen,
+  current,
+  onChoose,
+}: {
+  reference: ReferenceSummary;
+  chosen: boolean;
+  current?: boolean;
+  onChoose: () => void;
+}) {
+  const video = useRef<HTMLVideoElement>(null);
+  const frame = referenceFileUrl(r.name, r.frame);
+  const src = referenceFileUrl(r.name, r.video);
+  const play = () => {
+    video.current?.play().catch(() => {});
+  };
+  const stop = () => {
+    const v = video.current;
+    if (v) {
+      v.pause();
+      v.currentTime = 0;
+    }
+  };
+  return (
+    <button
+      type="button"
+      className={`reference-choice${chosen ? " chosen" : ""}`}
+      onClick={onChoose}
+      onMouseEnter={play}
+      onMouseLeave={stop}
+      onFocus={play}
+      onBlur={stop}
+      aria-pressed={chosen}
+      title={r.essence ?? r.title}
+    >
+      <span className="choice-media">
+        {frame ? <img src={frame} alt="" loading="lazy" /> : <span className="subtle">Sem imagem</span>}
+        {src && <video ref={video} src={src} muted loop playsInline preload="none" poster={frame ?? undefined} />}
+        {src && (
+          <span className="choice-play">
+            <Play weight="fill" />
+          </span>
+        )}
+        {chosen && (
+          <span className="choice-mark">
+            <Check weight="bold" />
+          </span>
+        )}
+      </span>
+      <span className="choice-text">
+        <b>{r.title}</b>
+        <span className="mono subtle">
+          {r.name}
+          {current ? " · a de agora" : ""}
+        </span>
+        <Palette colors={r.palette.slice(0, 7)} />
+      </span>
+    </button>
+  );
+}
+
+/* `value` "" = the agent picks; `current`: the reference(s) the video uses now (shown even if disabled) */
+export function ReferencePicker({
+  references,
+  value,
+  onChange,
+  current,
+}: {
+  references: ReferenceSummary[] | null;
+  value: string;
+  onChange: (name: string) => void;
+  current?: string[];
+}) {
+  /* the agent card has the same live gradient as the voice avatars, colors drawn on each open */
+  const seed = useMemo(() => Math.random().toString(36).slice(2), []);
+  return (
+    <div className="field">
+      <span>
+        Estilo visual <em>Passe o mouse para ver o vídeo</em>
+      </span>
+      <div className="refs-strip" role="radiogroup" aria-label="Estilo visual">
+        <button
+          type="button"
+          className={`reference-choice none${value === "" ? " chosen" : ""}`}
+          onClick={() => onChange("")}
+          aria-pressed={value === ""}
+        >
+          <span className="choice-media">
+            <VoiceAvatar seed={seed} framed />
+            {value === "" && (
+              <span className="choice-mark">
+                <Check weight="bold" />
+              </span>
+            )}
+          </span>
+          <span className="choice-text">
+            <b>O agente de IA escolhe</b>
+            <span className="subtle">Pela essência de cada uma, antes de definir o estilo</span>
+          </span>
+        </button>
+        {references
+          ?.filter(r => r.enabled || current?.includes(r.name))
+          .map(r => (
+            <ReferenceChoiceCard
+              key={r.name}
+              reference={r}
+              chosen={value === r.name}
+              current={current?.includes(r.name)}
+              onChoose={() => onChange(r.name)}
+            />
+          ))}
+        <Link to="/styles" className="reference-choice more">
+          <span className="choice-media">
+            <Plus size={28} />
+          </span>
+          <span className="choice-text">
+            <b>Novo estilo visual</b>
+            <span className="subtle">A partir de um link ou de fotos</span>
+          </span>
+        </Link>
+      </div>
+    </div>
+  );
+}

package/studio/web/components/ResultMessage.tsx

@@ -0,0 +1,7 @@
+import type { ActionResult } from "../lib/api";
+
+/* the output (ok) or the error of the last save */
+export const ResultMessage = ({ result }: { result: ActionResult }) =>
+  result ? (
+    <p className={`response ${result.ok ? "ok" : "error"}`}>{result.ok ? result.output : result.error}</p>
+  ) : null;

package/studio/web/components/RuleForm.tsx

@@ -0,0 +1,138 @@
+/* The omnichat rule form state and the helpers shared by the rule panels: the form of a rule (or
+   of a new one), the DM as it goes out, and the trigger/problem texts. */
+
+import type { OmnichatRule, OmnichatRuleDetail } from "../types/api";
+
+export type RuleForm = {
+  any_comment: boolean;
+  keywords: string;
+  link: string;
+  dm: string;
+  public_replies: string;
+  already_replied: "skip" | "send";
+  already_replied_if: string;
+  generic_phrases: boolean;
+  offer: string;
+  quote_post: boolean;
+  button: boolean;
+  require_follow: boolean;
+  opening_dm: string;
+  button_label: string;
+  not_following_dm: string;
+  retry_label: string;
+  link_button: boolean;
+  link_label: string;
+  follow_skip: boolean;
+  skip_label: string;
+  skip_dm: string;
+};
+
+/* Instagram DM limit, in bytes */
+export const DM_LIMIT = 1000;
+/* the text of a message with buttons, in characters (the CLI's BUTTON_TEXT_LIMIT) */
+export const BUTTON_TEXT_LIMIT = 640;
+
+export const splitList = (s: string) =>
+  s
+    .split(/[,\n]/)
+    .map(x => x.trim())
+    .filter(Boolean);
+
+/* a new rule already comes with the link found in the video (description, brief.md or request) */
+export function ruleFormOf(
+  r: OmnichatRule | null,
+  d: Pick<OmnichatRuleDetail, "defaults" | "found_link"> | null,
+): RuleForm {
+  return {
+    any_comment: !!r?.any_comment,
+    keywords: (r?.keywords ?? []).join(", "),
+    link: r ? (r.link ?? "") : (d?.found_link?.link ?? ""),
+    dm: r?.dm ?? d?.defaults.dm ?? "",
+    public_replies: (r?.public_replies ?? d?.defaults.public_replies ?? []).join("\n"),
+    already_replied: r?.already_replied ?? "skip",
+    already_replied_if: (r?.already_replied_if ?? []).join(", "),
+    generic_phrases: r?.generic_phrases ?? true,
+    offer: r?.offer ?? "",
+    quote_post: r ? r.quote_post === true : (d?.defaults.quote_post ?? true),
+    button: !!(r?.button || r?.require_follow),
+    require_follow: r?.require_follow === true,
+    /* the button texts come filled with the defaults, ready to edit (empty in the rule = the default) */
+    opening_dm: r?.opening_dm || d?.defaults.opening_dm || "",
+    button_label: r?.button_label || d?.defaults.button_label || "",
+    not_following_dm: r?.not_following_dm || d?.defaults.not_following_dm || "",
+    retry_label: r?.retry_label || d?.defaults.retry_label || "",
+    link_button: r?.link_button === true,
+    link_label: r?.link_label || d?.defaults.link_label || "",
+    follow_skip: r?.follow_skip !== false,
+    skip_label: r?.skip_label || d?.defaults.skip_label || "",
+    skip_dm: r?.skip_dm || d?.defaults.skip_dm || "",
+  };
+}
+
+/* the body POSTed to <apiBase> to save the rule */
+export const ruleBodyOf = (f: RuleForm) => ({
+  any_comment: f.any_comment,
+  keywords: splitList(f.keywords),
+  link: f.link,
+  dm: f.dm,
+  public_replies: f.public_replies
+    .split("\n")
+    .map(x => x.trim())
+    .filter(Boolean),
+  already_replied: f.already_replied,
+  already_replied_if: splitList(f.already_replied_if),
+  generic_phrases: f.generic_phrases,
+  offer: f.offer,
+  quote_post: f.quote_post,
+  button: f.button || f.require_follow,
+  require_follow: f.require_follow,
+  opening_dm: f.opening_dm,
+  button_label: f.button_label,
+  not_following_dm: f.not_following_dm,
+  retry_label: f.retry_label,
+  link_button: f.link_button,
+  link_label: f.link_label,
+  follow_skip: f.follow_skip,
+  skip_label: f.skip_label,
+  skip_dm: f.skip_dm,
+});
+
+/* the DM as it goes out to @username, built like the CLI: {username} (legacy {usuario}), {link} and
+   {post} replaced, the link at the end if the DM has no {link}, and the Reel on the first line with
+   quote_post (if the DM has neither {post} nor its link) */
+export const POST_EXAMPLE = "https://www.instagram.com/reel/XXXXXXXXXXX/";
+/* what the target is, in the texts: the video's Reel, the content's carousel, or an outside post
+   (Reel, carousel or photo) */
+export type RuleTarget = { slug?: string; code?: string; carousel?: boolean };
+export const postKindOf = (t: RuleTarget) => (t.carousel ? "carrossel" : t.code ? "post" : "Reel");
+export const postExampleFor = (t: RuleTarget) =>
+  t.slug && !t.carousel ? POST_EXAMPLE : "https://www.instagram.com/p/XXXXXXXXXXX/";
+export const postCode = (u: string) => /\/(?:reels?|p|tv)\/([\w-]+)/.exec(u)?.[1] ?? null;
+export function dmText(f: RuleForm, defaultDm: string | null, username: string, post: string) {
+  let t = (f.dm.trim() || defaultDm || "").replaceAll("{username}", username).replaceAll("{usuario}", username);
+  const link = f.link.trim();
+  if (link) t = t.includes("{link}") ? t.replaceAll("{link}", link) : `${t.trimEnd()}\n${link}`;
+  t = t.replaceAll("{link}", "");
+  if (t.includes("{post}")) t = t.replaceAll("{post}", post);
+  else if (f.quote_post && !t.includes(`/${postCode(post)}/`)) t = `${post}\n${t.trim()}`;
+  return t.trim();
+}
+
+/* with link_button the link leaves the text, and so does what hung before {link} ("Aqui está: {link}"
+   becomes "Aqui está"); the button carries the link, and the post is not quoted (no card inside a button
+   message), like the CLI's dmTextWithoutLink */
+export const linkInButton = (f: RuleForm) => f.link_button && !!f.link.trim();
+export function dmTextWithoutLink(f: RuleForm, defaultDm: string | null, username: string, post: string) {
+  const dm = (f.dm.trim() || defaultDm || "").replace(/[\s:–-]*\{link\}/g, "");
+  return dm.trim() ? dmText({ ...f, link: "", quote_post: false, dm }, defaultDm, username, post) : "";
+}
+
+/* problems come from the CLI, with the terminal flags: on screen, without them */
+export const toDisplay = (p: string) =>
+  p.replace(/ ou --any\b/, " ou escolha Qualquer comentário").replace(/\s*\(--[^)]*\)/g, "");
+
+export const triggerLabel = (f: { any_comment: boolean; keywords: string[] | string | null }) => {
+  if (f.any_comment) return "qualquer comentário";
+  const k = Array.isArray(f.keywords) ? f.keywords : splitList(f.keywords ?? "");
+  return k.length ? k.map(x => `“${x}”`).join(", ") : "sem palavra-chave";
+};

package/studio/web/components/RuleLog.tsx

@@ -0,0 +1,151 @@
+/* What the tool did with each comment that triggered: totals, retry of the failed ones, and the list as
+   the same ghost cards of the comments chat (MissingDmsPanel). A closed accordion: it is the record, not the work. */
+
+import { useState } from "react";
+import { capitalize, formatWhen, timeAgo } from "../lib/format";
+import type { OmnichatComment, OmnichatRuleDetail } from "../types/api";
+import { ArrowClockwise } from "./icons";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./ui/accordion";
+import { Badge } from "./ui/badge";
+import { Avatar } from "./MissingDmsPanel/CommentCard";
+import { DmBubble } from "./MissingDmsPanel/DmBubble";
+
+export const PAGE_SIZE = 30;
+/* Instagram sends the time zone without the colon (+0000), which not every browser reads */
+export const igDate = (s: string) => s.replace(/([+-]\d{2})(\d{2})$/, "$1:$2");
+
+function CommentStatus({ c }: { c: OmnichatComment }) {
+  if (c.state === "done") return <Badge variant="ok">{c.public_reply?.at ? "DM e pública" : "DM"}</Badge>;
+  if (c.state === "failed") return <Badge variant="error">Falhou</Badge>;
+  if (c.state === "retry") return <Badge variant="warning">Tenta de novo</Badge>;
+  if (c.state === "skipped") return <Badge>Pulado</Badge>;
+  if (c.state === "uncertain") return <Badge variant="running">Em dúvida</Badge>;
+  return <Badge variant="running">Na fila</Badge>;
+}
+
+function CommentDetail({ c }: { c: OmnichatComment }) {
+  if (c.state === "skipped")
+    return (
+      <span className="subtle">
+        {capitalize(c.reason ?? "")}
+        {c.public_reply?.at && <> · “{c.public_reply.text}”</>}
+      </span>
+    );
+  if (c.state === "failed" || c.state === "retry")
+    return (
+      <span className={c.state === "failed" ? "error" : "warning"}>
+        {capitalize(c.error ?? c.dm?.error ?? c.public_reply?.error ?? "")}
+      </span>
+    );
+  if (c.state === "queued") return <span className="subtle">Sai na próxima passada</span>;
+  if (c.state === "uncertain")
+    return <span className="subtle">Pedido genérico: o agente ainda não leu o contexto</span>;
+  return (
+    <span className="subtle">
+      {c.dm?.at && <>DM {formatWhen(c.dm.at)}</>}
+      {c.public_reply?.at && <> · “{c.public_reply.text}”</>}
+      {c.public_reply?.error && <span className="warning"> · a pública falhou: {c.public_reply.error}</span>}
+    </span>
+  );
+}
+
+export function RuleLog({
+  log,
+  error,
+  busy,
+  onRetry,
+  retrying,
+}: {
+  log: OmnichatRuleDetail["log"];
+  error: string | null;
+  busy: boolean;
+  onRetry: () => void;
+  retrying: boolean;
+}) {
+  const [all, setAll] = useState(false);
+  if (error) return <p className="response error">Registro: {error}</p>;
+  if (!log) return null;
+  const t = log.totals;
+  const items = all ? log.items : log.items.slice(0, PAGE_SIZE);
+  return (
+    <Accordion type="single" collapsible className="auto-rule-record auto-rule-log">
+      <AccordionItem value="log">
+        <AccordionTrigger>
+          <span>Comentários que dispararam</span>
+          <span className="subtle">
+            {t.triggers} {t.triggers === 1 ? "disparo" : "disparos"} ·{" "}
+            {log.checked_at ? `conferido ${timeAgo(log.checked_at)}` : "ainda não conferido"}
+          </span>
+        </AccordionTrigger>
+        <AccordionContent>
+          <div className="auto-rule-log-body">
+            <p className="auto-rule-totals">
+              <span>
+                <b>{t.triggers}</b> {t.triggers === 1 ? "disparo" : "disparos"}
+              </span>
+              <span>
+                <b>{t.dms}</b> {t.dms === 1 ? "DM" : "DMs"}
+              </span>
+              <span>
+                <b>{t.public_replies}</b> {t.public_replies === 1 ? "pública" : "públicas"}
+              </span>
+              <span>
+                <b>{t.queued}</b> na fila
+              </span>
+              <span className={t.failures ? "error" : ""}>
+                <b>{t.failures}</b> {t.failures === 1 ? "falha" : "falhas"}
+              </span>
+            </p>
+            {log.warning && <p className="warning">{log.warning}</p>}
+            {t.failures > 0 && (
+              <div className="setting-row">
+                <button className="button small" disabled={busy} onClick={onRetry}>
+                  <ArrowClockwise className="ic" /> {retrying ? "Devolvendo…" : "Tentar de novo as que falharam"}
+                </button>
+                <span className="hint">
+                  Voltam para a fila as que falharam sem a DM, dentro dos 7 dias da Meta. Com a regra ligada, saem na
+                  próxima passada.
+                </span>
+              </div>
+            )}
+            {!log.items.length ? (
+              <p className="hint">Nenhum comentário disparou ainda.</p>
+            ) : (
+              <div className="thread">
+                {items.map(c => (
+                  <div className="thread-card" key={c.id}>
+                    <div className="thread-head">
+                      <Avatar name={c.username} />
+                      <b className="thread-user">@{c.username ?? "?"}</b>
+                      <span className="subtle">{timeAgo(igDate(c.commented_at))}</span>
+                      <span className="thread-badges">
+                        <CommentStatus c={c} />
+                      </span>
+                    </div>
+                    <p className="thread-text">{c.text}</p>
+                    <p className="thread-text thread-detail">
+                      <CommentDetail c={c} />
+                    </p>
+                    {c.dm?.at && (
+                      <div className="thread-actions">
+                        <DmBubble
+                          username={c.username}
+                          dm={{ at: c.dm.at, text: c.dm.text ?? null, exact: !!c.dm.text, gate: c.gate?.state ?? null }}
+                        />
+                      </div>
+                    )}
+                  </div>
+                ))}
+                {log.items.length > PAGE_SIZE && (
+                  <button className="subtle-link" onClick={() => setAll(x => !x)}>
+                    {all ? "Mostrar só os mais novos" : `Mostrar todos (${log.items.length})`}
+                  </button>
+                )}
+              </div>
+            )}
+          </div>
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  );
+}

package/studio/web/components/RunningTask.tsx

@@ -0,0 +1,23 @@
+import { useNow } from "../hooks/useNow";
+import { formatElapsed, ticketOrigin, toMs } from "../lib/format";
+import type { Ticket } from "../types/api";
+import { LogStream } from "./LogStream";
+import { TaskName } from "./TaskName";
+
+export function RunningTask({ ticket }: { ticket: Ticket }) {
+  const now = useNow();
+  return (
+    <div className="task running">
+      <div className="task-top">
+        <span className="pulse" />
+        <TaskName ticket={ticket} />
+        <span className="subtle">
+          {ticketOrigin(ticket)} · pid {ticket.pid}
+        </span>
+        <span className="time">{formatElapsed(now - (toMs(ticket.started_at) ?? now))}</span>
+      </div>
+      <code className="command">{ticket.command}</code>
+      <LogStream id={ticket.id} />
+    </div>
+  );
+}

package/studio/web/components/SampleList.tsx

@@ -0,0 +1,55 @@
+/* A voice's audio list: play, name, duration and, when removable, the trash can. The same on
+   creation (CloneVoiceDialog: what was recorded or uploaded) and on edit (the voice's stored
+   recording, the source of a clone on another provider). `action` takes the duration's place. */
+
+import type { ReactNode } from "react";
+import { formatSecondsComma } from "../lib/format";
+import { Pause, Play, Trash } from "./icons";
+
+export type SampleItem = { id: string; name: string; s: number; url: string };
+
+export function SampleList({
+  items,
+  playing,
+  onListen,
+  onDelete,
+  disabled,
+  action,
+}: {
+  items: SampleItem[];
+  playing: string | null;
+  onListen: (m: SampleItem) => void;
+  onDelete?: (id: string) => void;
+  disabled?: boolean;
+  action?: (m: SampleItem) => ReactNode;
+}) {
+  return (
+    <ul className="clone-samples">
+      {items.map(m => (
+        <li key={m.id}>
+          <button
+            type="button"
+            className="button small"
+            onClick={() => onListen(m)}
+            aria-label={playing === m.id ? "Pausar" : "Ouvir"}
+          >
+            {playing === m.id ? <Pause weight="fill" /> : <Play weight="fill" />}
+          </button>
+          <span className="clone-sample-name">{m.name}</span>
+          {action ? action(m) : <span className="subtle mono">{m.s ? formatSecondsComma(m.s) : "—"}</span>}
+          {onDelete && (
+            <button
+              type="button"
+              className="button small"
+              onClick={() => onDelete(m.id)}
+              disabled={disabled}
+              aria-label={`Apagar ${m.name}`}
+            >
+              <Trash />
+            </button>
+          )}
+        </li>
+      ))}
+    </ul>
+  );
+}