@fayz-ai/plugin-automations 0.11.0 → 0.12.1

package/dist/index.js

@@ -1,13 +1,73 @@
-import React2 from 'react';
-import { startEventLog, getSupabaseClientOptional, getMessageDefaults, usePluginRuntimeOptional, resolveMessages, resolveMessage, renderMessageTemplate, loadEventRuns } from '@fayz-ai/core';
-import { resolveFayzAgentConnection, registerRailPage, getFayzSupabaseClientOptional, useConnectors, useAgentSurface, AskAIButton, SettingsTabs, adminNavigateTo, RightRailPage, useOrganizationStore, connectorRoute, ConnectorMark, ConnectorDeliveries } from '@fayz-ai/admin';
+import * as React4 from 'react';
+import React4__default from 'react';
+import { getSupabaseClientOptional, startEventLog, getMessageDefaults, normalizeMessageActions, usePluginRuntimeOptional, resolveMessages, resolveMessage, renderMessageTemplate, loadEventRuns, getActiveTenantId } from '@fayz-ai/core';
+import { resolveFayzAgentConnection, registerRailPage, getFayzSupabaseClientOptional, useConnectors, useAgentSurface, PageActions, askAI, SettingsTabs, adminNavigateTo, RightRailPage, AskAIButton, useOrganizationStore, connectorRoute, ConnectorMark, ConnectorDeliveries } from '@fayz-ai/admin';
 import * as LucideIcons from 'lucide-react';
-import { Zap, Receipt, Megaphone, MessageSquare, Smartphone, MessageCircle, Mail, ChevronRight, RotateCcw, Clock, Monitor, RefreshCw, History, AlertTriangle, CircleCheck, CircleSlash } from 'lucide-react';
-import { PageHeaderActions, PageTabs, Card, Switch, SubpageHeader, Button, Badge, Hint, HeaderTabs, toast } from '@fayz-ai/ui';
+import { WandSparkles, Zap, Receipt, Megaphone, MessageSquare, Smartphone, Mail, ChevronRight, RotateCcw, Check, Clock, Monitor, RefreshCw, History, Send, AlertTriangle, CircleCheck, CircleSlash } from 'lucide-react';
+import { PageHeaderActions, PageTabs, Card, WhatsAppIcon, Switch, SubpageHeader, Button, Badge, Hint, HeaderTabs, toast, PhoneField } from '@fayz-ai/ui';
 import { createFayzAutomationsClient, FayzAutomationsError } from '@fayz-ai/sdk/automations';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/index.ts
+var PREFLIGHT_FUNCTION = "tyxter-payment-preflight";
+async function readReadiness() {
+  const supabase = getSupabaseClientOptional();
+  const tenantId = getActiveTenantId();
+  if (!supabase || !tenantId) return null;
+  const { data, error } = await supabase.functions.invoke(PREFLIGHT_FUNCTION, {
+    body: { action: "status", tenantId }
+  });
+  if (error) return null;
+  const payments = data?.payments;
+  return payments ?? null;
+}
+function canOfferPayment(readiness) {
+  return Boolean(readiness?.ready) && readiness?.mode !== null && readiness?.mode !== void 0;
+}
+function usePaymentReadiness() {
+  const [readiness, setReadiness] = React4.useState(null);
+  const [loading, setLoading] = React4.useState(true);
+  React4.useEffect(() => {
+    let cancelled = false;
+    void readReadiness().then((value) => {
+      if (!cancelled) setReadiness(value);
+    }).catch(() => {
+    }).finally(() => {
+      if (!cancelled) setLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  return { readiness, loading };
+}
+var SEND_FUNCTION = "messaging-send";
+function readFunctionError(error, data) {
+  const payload = data ?? null;
+  if (payload?.error) return { ok: false, error: payload.error, message: payload.message };
+  const context = error?.context;
+  if (context?.error) return { ok: false, error: context.error, message: context.message };
+  return { ok: false, error: "send_failed", message: error instanceof Error ? error.message : void 0 };
+}
+async function sendTestMessage(input) {
+  const supabase = getSupabaseClientOptional();
+  const tenantId = getActiveTenantId();
+  if (!supabase || !tenantId) return { ok: false, error: "not_available" };
+  const { data, error } = await supabase.functions.invoke(SEND_FUNCTION, {
+    body: {
+      test: true,
+      tenantId,
+      channel: input.channel,
+      eventKey: input.eventKey,
+      to: input.to,
+      variables: input.variables,
+      subject: { type: "test", id: crypto.randomUUID() },
+      ...input.template ? { template: input.template } : {}
+    }
+  });
+  if (error || data?.error) return readFunctionError(error, data);
+  return { ok: true };
+}
 function useOrganizationStoreLike() {
   return useOrganizationStore((s) => s.currentOrg?.id);
 }
@@ -27,6 +87,11 @@ function toTemplate(automation) {
     // The automation name belongs to the platform, not a user rename: the
     // catalogue title still owns the screen.
     name: null,
+    // The platform's automation action carries a subject and a body and nothing
+    // else, so there is nowhere for a customised button to live yet. NULL, not
+    // [], because the catalogue default is what still applies — an empty list
+    // would read as "this tenant removed the buttons".
+    actions: null,
     updatedAt: automation.updatedAt
   };
 }
@@ -183,7 +248,7 @@ function when(iso) {
   return new Date(iso).toLocaleString("pt-BR", { day: "2-digit", month: "2-digit", hour: "2-digit", minute: "2-digit" });
 }
 function RunRow({ run }) {
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = React4__default.useState(false);
   const cfg = STATUS[run.status] ?? STATUS.recorded;
   const { Icon } = cfg;
   return /* @__PURE__ */ jsxs("div", { className: "border-b border-border last:border-b-0", children: [
@@ -217,14 +282,14 @@ function RunRow({ run }) {
   ] });
 }
 function RunLog({ eventKey, tenantId, enabled }) {
-  const [runs, setRuns] = React2.useState(null);
-  const [loading, setLoading] = React2.useState(false);
-  const load = React2.useCallback(async () => {
+  const [runs, setRuns] = React4__default.useState(null);
+  const [loading, setLoading] = React4__default.useState(false);
+  const load = React4__default.useCallback(async () => {
     setLoading(true);
     setRuns(await loadEventRuns(eventKey, { tenantId, limit: 20 }));
     setLoading(false);
   }, [eventKey, tenantId]);
-  React2.useEffect(() => {
+  React4__default.useEffect(() => {
     void load();
   }, [load]);
   return /* @__PURE__ */ jsxs(Card, { className: "overflow-hidden", children: [
@@ -260,9 +325,9 @@ function ExecutionRow({ execution }) {
   ] });
 }
 function FayzRunLog({ connection, eventKey, tenantId, enabled }) {
-  const [executions, setExecutions] = React2.useState(null);
-  const [loading, setLoading] = React2.useState(false);
-  const load = React2.useCallback(async () => {
+  const [executions, setExecutions] = React4__default.useState(null);
+  const [loading, setLoading] = React4__default.useState(false);
+  const load = React4__default.useCallback(async () => {
     if (!tenantId) return;
     setLoading(true);
     try {
@@ -274,7 +339,7 @@ function FayzRunLog({ connection, eventKey, tenantId, enabled }) {
       setLoading(false);
     }
   }, [connection, eventKey, tenantId]);
-  React2.useEffect(() => {
+  React4__default.useEffect(() => {
     void load();
   }, [load]);
   return /* @__PURE__ */ jsxs(Card, { className: "overflow-hidden", children: [
@@ -292,6 +357,183 @@ function FayzRunLog({ connection, eventKey, tenantId, enabled }) {
     ] }) : /* @__PURE__ */ jsx("div", { children: executions.map((e) => /* @__PURE__ */ jsx(ExecutionRow, { execution: e }, e.id)) })
   ] });
 }
+
+// src/views/whatsapp-preview-bg.ts
+var WHATSAPP_PREVIEW_BG = "https://assets.fayz.ai/connectors/whatsapp-background.jpg";
+var PROVIDER_TEMPLATES_TABLE = "plg_automations_provider_templates";
+function rowToProviderTemplate(row) {
+  return {
+    id: row.id,
+    tenantId: row.tenant_id ?? null,
+    eventKey: row.event_key,
+    channel: row.channel ?? "whatsapp",
+    provider: row.provider ?? "tyxter",
+    templateName: row.template_name ?? "",
+    status: row.status ?? "draft",
+    rejectionReason: row.rejection_reason || null,
+    updatedAt: row.updated_at ?? row.created_at ?? null
+  };
+}
+async function loadProviderTemplates() {
+  const client = getSupabaseClientOptional();
+  if (!client) return [];
+  try {
+    const { data, error } = await client.from(PROVIDER_TEMPLATES_TABLE).select("*");
+    if (error) throw error;
+    return (data ?? []).map(rowToProviderTemplate);
+  } catch (err) {
+    console.warn("[automations] could not load provider template status", err);
+    return [];
+  }
+}
+function providerTemplateFor(rows, eventKey, channel) {
+  const matching = rows.filter((r) => r.eventKey === eventKey && r.channel === channel);
+  return {
+    own: matching.find((r) => r.tenantId !== null) ?? null,
+    fallback: matching.find((r) => r.tenantId === null) ?? null
+  };
+}
+function providerApprovalFor(rows, eventKey, channel) {
+  if (channel !== "whatsapp") return null;
+  const { own, fallback } = providerTemplateFor(rows, eventKey, channel);
+  const row = own ?? fallback;
+  if (!row) return null;
+  const fallbackApproved = fallback?.status === "approved";
+  switch (row.status) {
+    case "approved":
+      return { tone: "ok", label: "Aprovado pela Meta" };
+    case "rejected":
+      return {
+        tone: fallbackApproved && own ? "waiting" : "error",
+        label: fallbackApproved && own ? "Seu texto foi recusado" : "Recusado pela Meta",
+        detail: row.rejectionReason ? `Motivo: ${row.rejectionReason}` : "A Meta n\xE3o disse o motivo."
+      };
+    case "paused":
+      return {
+        tone: "error",
+        label: "Pausado pela Meta",
+        detail: row.rejectionReason ?? "Costuma ser excesso de marca\xE7\xF5es de spam pelos clientes."
+      };
+    case "disabled":
+      return { tone: "error", label: "Desativado pela Meta", detail: row.rejectionReason ?? void 0 };
+    case "submitted":
+      return {
+        tone: "waiting",
+        label: "Aguardando aprova\xE7\xE3o da Meta",
+        detail: fallbackApproved && own ? "At\xE9 l\xE1 a mensagem sai com o texto padr\xE3o." : "A revis\xE3o costuma levar algumas horas."
+      };
+    default:
+      return { tone: "waiting", label: "Ainda n\xE3o enviado para aprova\xE7\xE3o" };
+  }
+}
+var TONE_VARIANT = {
+  ok: "success",
+  waiting: "warning",
+  error: "destructive"
+};
+function ProviderTemplateBadge({ approval, showDetail }) {
+  if (!approval) return null;
+  if (approval.tone === "ok" && !showDetail) return null;
+  return /* @__PURE__ */ jsxs("span", { className: "inline-flex flex-wrap items-center gap-1.5", children: [
+    /* @__PURE__ */ jsx(Badge, { variant: TONE_VARIANT[approval.tone], children: approval.label }),
+    showDetail && approval.detail && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: approval.detail })
+  ] });
+}
+function useProviderTemplates() {
+  const [rows, setRows] = React4__default.useState([]);
+  React4__default.useEffect(() => {
+    let cancelled = false;
+    void loadProviderTemplates().then((data) => {
+      if (!cancelled) setRows(data);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  return rows;
+}
+var ACTION_CATALOG = [
+  { id: "confirm", label: "Confirma", kind: "reply", hint: "O cliente confirma o hor\xE1rio no toque." },
+  { id: "cancel", label: "Cancela", kind: "reply", hint: "O cliente desmarca sem precisar ligar." },
+  { id: "pay", label: "Pagar", kind: "payment", hint: "O cliente recebe o Pix na conversa." }
+];
+function nextActions(current, id, on) {
+  const kept = new Set(current.filter((a) => a.id !== id).map((a) => a.id));
+  if (on) kept.add(id);
+  const labels = new Map(current.map((a) => [a.id, a.label]));
+  return ACTION_CATALOG.filter((a) => kept.has(a.id)).map((a) => ({ id: a.id, label: labels.get(a.id) ?? a.label, kind: a.kind }));
+}
+var TEST_ERROR = {
+  template_not_approved: "O modelo ainda n\xE3o foi aprovado pela Meta \u2014 sincronize os modelos e tente de novo.",
+  no_sender: "Este app ainda n\xE3o tem um n\xFAmero de WhatsApp ativo. Veja Conversas \u2192 Tyxter.",
+  not_connected: "O WhatsApp ainda n\xE3o est\xE1 conectado neste app. Veja Conversas \u2192 Tyxter.",
+  contact_opted_out: "Este contato pediu para n\xE3o receber mensagens.",
+  invalid_recipient: "Esse destino n\xE3o parece v\xE1lido.",
+  not_a_member: "A sua sess\xE3o n\xE3o pertence a este neg\xF3cio.",
+  not_available: "O envio de teste n\xE3o est\xE1 dispon\xEDvel neste ambiente.",
+  email_not_configured: "O envio de e-mail n\xE3o est\xE1 configurado neste app.",
+  template_not_found: "Escreva a mensagem antes de testar.",
+  email_rejected: "O provedor de e-mail recusou a mensagem.",
+  email_credential_rejected: "A chave de e-mail do app foi recusada pelo provedor.",
+  email_rate_limited: "O provedor pediu uma pausa \u2014 tente de novo em instantes."
+};
+function TestSendStrip({ eventKey, channel, placeholders, template }) {
+  const isEmail = channel === "email";
+  const [recipient, setRecipient] = React4__default.useState("");
+  const [sending, setSending] = React4__default.useState(false);
+  const valid = isEmail ? /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(recipient.trim()) : recipient.replace(/\D/g, "").length >= 10;
+  const send = async () => {
+    setSending(true);
+    try {
+      const variables = Object.fromEntries(placeholders.map((p) => {
+        const key = p.replace(/[{}]/g, "").trim();
+        return [key, SAMPLE[key] ?? key];
+      }));
+      const result = await sendTestMessage({ eventKey, channel, to: recipient.trim(), variables, template });
+      if (result.ok) {
+        toast.success(isEmail ? "Teste enviado \u2014 confira a caixa de entrada desse e-mail" : "Teste enviado \u2014 confira o WhatsApp desse n\xFAmero");
+      } else {
+        toast.error(TEST_ERROR[result.error ?? ""] ?? result.message ?? "N\xE3o foi poss\xEDvel enviar o teste");
+      }
+    } finally {
+      setSending(false);
+    }
+  };
+  return (
+    // Sem moldura própria: o strip vive dentro do Card da aba Testar, e uma
+    // borda aqui era o anel duplicado de sempre.
+    /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-end gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+        /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-muted-foreground", children: isEmail ? "E-mail que recebe o teste" : "N\xFAmero que recebe o teste" }),
+        isEmail ? /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "email",
+            value: recipient,
+            onChange: (e) => setRecipient(e.target.value),
+            placeholder: "voce@exemplo.com",
+            disabled: sending,
+            "aria-label": "E-mail que recebe o teste",
+            className: "w-full rounded-input border border-input bg-card px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+          }
+        ) : /* @__PURE__ */ jsx(
+          PhoneField,
+          {
+            value: recipient,
+            onChange: setRecipient,
+            placeholder: "(21) 99999-9999",
+            disabled: sending,
+            "aria-label": "N\xFAmero que recebe o teste"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: () => void send(), disabled: !valid || sending, children: [
+        /* @__PURE__ */ jsx(Send, { className: "mr-2 h-3.5 w-3.5" }),
+        sending ? "Enviando\u2026" : "Enviar teste"
+      ] })
+    ] })
+  );
+}
 var TABS = [
   { value: "preview", label: "Pr\xE9via" },
   { value: "code", label: "C\xF3digo" },
@@ -299,6 +541,7 @@ var TABS = [
   // é a mesma pergunta em dois tempos: o que vai sair, e o que saiu.
   { value: "runs", label: "Execu\xE7\xF5es" }
 ];
+var TEST_TAB = { value: "test", label: "Testar" };
 var CHANNEL_LABEL = {
   email: "E-mail",
   whatsapp: "WhatsApp",
@@ -306,6 +549,13 @@ var CHANNEL_LABEL = {
   push: "Push",
   webchat: "Chat"
 };
+var CHANNEL_ICON = {
+  email: Mail,
+  whatsapp: WhatsAppIcon,
+  sms: Smartphone,
+  push: MessageSquare,
+  webchat: MessageSquare
+};
 var WRITE_MESSAGE_TOOL = {
   id: "automations.writeMessage",
   name: "writeAutomationMessage",
@@ -341,27 +591,25 @@ var SAMPLE = {
   appointment_date: "12/08/2026",
   appointment_time: "14:30"
 };
-function iconFor(name) {
-  if (!name) return Zap;
-  const icons = LucideIcons;
-  return icons[name] ?? Zap;
-}
 function AutomationDetailPage({ eventKey, channel, store, backTo = "/automations", embedded, onDone }) {
   const tenantId = useOrganizationStoreLike();
   const runtime = usePluginRuntimeOptional();
-  const fayzConnection = React2.useMemo(() => resolveFayzAgentConnection(), []);
-  const [message, setMessage] = React2.useState(void 0);
-  const [tab, setTab] = React2.useState("preview");
-  const [device, setDevice] = React2.useState("desktop");
-  const [draft, setDraft] = React2.useState(null);
-  const [saving, setSaving] = React2.useState(false);
-  const back = React2.useCallback(
+  const fayzConnection = React4__default.useMemo(() => resolveFayzAgentConnection(), []);
+  const [message, setMessage] = React4__default.useState(void 0);
+  const [tab, setTab] = React4__default.useState("preview");
+  const [device, setDevice] = React4__default.useState("desktop");
+  const [draft, setDraft] = React4__default.useState(null);
+  const [labelDrafts, setLabelDrafts] = React4__default.useState({});
+  const [saving, setSaving] = React4__default.useState(false);
+  const providerTemplates = useProviderTemplates();
+  const { readiness, loading: readinessLoading } = usePaymentReadiness();
+  const back = React4__default.useCallback(
     () => onDone ? onDone() : adminNavigateTo(backTo),
     [onDone, backTo]
   );
-  const surfaceRef = React2.useRef({ message, draft });
+  const surfaceRef = React4__default.useRef({ message, draft });
   surfaceRef.current = { message, draft };
-  const agentSurface = React2.useMemo(() => ({
+  const agentSurface = React4__default.useMemo(() => ({
     id: "automations.message",
     pluginId: "automations",
     instructions: "The user is editing one automation message. `placeholders` in the surface state are the ONLY variables that resolve \u2014 copy them verbatim, braces included. Call writeAutomationMessage once with the whole text; the editor fills and the user reviews before saving.",
@@ -397,7 +645,7 @@ function AutomationDetailPage({ eventKey, channel, store, backTo = "/automations
     }]
   }), []);
   useAgentSurface(agentSurface);
-  const reload = React2.useCallback(async () => {
+  const reload = React4__default.useCallback(async () => {
     if (!eventKey || !channel) {
       setMessage(null);
       return;
@@ -412,7 +660,7 @@ function AutomationDetailPage({ eventKey, channel, store, backTo = "/automations
     setMessage(found);
     if (found) setDraft({ subject: found.subject, body: found.body });
   }, [eventKey, channel, store, tenantId, runtime]);
-  React2.useEffect(() => {
+  React4__default.useEffect(() => {
     void reload();
   }, [reload]);
   const header = embedded ? null : /* @__PURE__ */ jsx(
@@ -447,7 +695,8 @@ function AutomationDetailPage({ eventKey, channel, store, backTo = "/automations
   }
   const event = message.event;
   const fallback = { subject: message.override ? void 0 : message.subject, body: message.body };
-  const Icon = iconFor(event.icon);
+  const ChannelIcon = CHANNEL_ICON[message.channel] ?? Zap;
+  const isWhatsapp = message.channel === "whatsapp";
   const current = draft ?? { subject: message.subject, body: message.body };
   const dirty = current.subject !== message.subject || current.body !== message.body;
   const hasSubject = message.channel === "email";
@@ -490,14 +739,27 @@ function AutomationDetailPage({ eventKey, channel, store, backTo = "/automations
     header,
     /* @__PURE__ */ jsxs("div", { className: embedded ? "space-y-3" : "flex flex-wrap items-start gap-3", children: [
       /* @__PURE__ */ jsxs("div", { className: embedded ? "flex items-start gap-3" : "contents", children: [
-        /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) }),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: `flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border ${isWhatsapp ? "border-[#25D366]/30 bg-[#25D366]/10 text-[#1faf55]" : "border-border text-muted-foreground"}`,
+            children: /* @__PURE__ */ jsx(ChannelIcon, { className: "h-4 w-4" })
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
             /* @__PURE__ */ jsx(Badge, { variant: "outline", children: CHANNEL_LABEL[message.channel] }),
             /* @__PURE__ */ jsx(Badge, { variant: "outline", children: message.kind === "marketing" ? "Marketing" : "Transacional" }),
             message.customized && /* @__PURE__ */ jsx(Badge, { variant: "info", children: "Personalizado" })
           ] }),
-          /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: event.description })
+          /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: event.description }),
+          /* @__PURE__ */ jsx("div", { className: "mt-1.5", children: /* @__PURE__ */ jsx(
+            ProviderTemplateBadge,
+            {
+              approval: providerApprovalFor(providerTemplates, event.name, message.channel),
+              showDetail: true
+            }
+          ) })
         ] })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: embedded ? "flex items-center gap-2" : "flex shrink-0 flex-wrap items-center gap-2", children: [
@@ -545,11 +807,22 @@ function AutomationDetailPage({ eventKey, channel, store, backTo = "/automations
               }
             }
           ),
-          /* @__PURE__ */ jsx(Button, { onClick: save, disabled: !dirty || saving, children: saving ? "Salvando\u2026" : dirty ? "Salvar" : "Salvo" })
+          dirty || saving ? /* @__PURE__ */ jsx(Button, { onClick: save, disabled: saving, children: saving ? "Salvando\u2026" : "Salvar" }) : /* @__PURE__ */ jsxs("span", { className: "inline-flex h-9 items-center gap-1 px-2 text-xs font-medium text-muted-foreground", children: [
+            /* @__PURE__ */ jsx(Check, { className: "h-3.5 w-3.5" }),
+            "Salvo"
+          ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(HeaderTabs, { tabs: TABS, value: tab, onChange: setTab, "aria-label": "Visualiza\xE7\xE3o" }),
+    /* @__PURE__ */ jsx(
+      HeaderTabs,
+      {
+        tabs: isWhatsapp || message.channel === "email" ? [...TABS, TEST_TAB] : TABS,
+        value: tab,
+        onChange: setTab,
+        "aria-label": "Visualiza\xE7\xE3o"
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-6 gap-y-2 border-b border-border pb-4 text-xs text-muted-foreground", children: [
       /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx(Zap, { className: "h-3.5 w-3.5" }),
@@ -570,9 +843,9 @@ function AutomationDetailPage({ eventKey, channel, store, backTo = "/automations
       // é ela quem executa. Fora dele, o coletor local continua valendo.
       fayzConnection ? /* @__PURE__ */ jsx(FayzRunLog, { connection: fayzConnection, eventKey: event.name, tenantId, enabled: message.enabled }) : /* @__PURE__ */ jsx(RunLog, { eventKey: event.name, tenantId, enabled: message.enabled })
     ) : tab === "preview" ? /* @__PURE__ */ jsxs(Card, { className: "overflow-hidden", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border px-4 py-2.5", children: [
+      !embedded && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 border-b border-border px-4 py-2.5", children: [
         /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Pr\xE9via" }),
-        /* @__PURE__ */ jsx("div", { className: embedded ? "hidden" : "flex items-center gap-1", children: ["desktop", "mobile"].map((d) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: ["desktop", "mobile"].map((d) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
@@ -588,19 +861,58 @@ function AutomationDetailPage({ eventKey, channel, store, backTo = "/automations
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: `mx-auto rounded-card border border-border bg-card shadow-sm transition-[max-width] ${device === "mobile" ? "max-w-[380px]" : hasSubject ? "max-w-[600px]" : "max-w-[420px]"}`,
+            className: `mx-auto overflow-hidden rounded-card bg-card shadow-sm transition-[max-width] ${device === "mobile" ? "max-w-[380px]" : hasSubject ? "max-w-[600px]" : "max-w-[420px]"}`,
             children: hasSubject ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx("div", { className: "border-b border-border px-6 py-4 text-sm font-semibold", children: SAMPLE.store_name }),
-              /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-b border-border px-6 py-3", children: [
-                /* @__PURE__ */ jsx("p", { className: "text-[11px] uppercase tracking-wide text-muted-foreground", children: "Assunto" }),
-                /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: previewSubject })
+              /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: "flex items-center gap-1.5 border-b border-border bg-muted/40 px-4 py-2.5", children: [
+                /* @__PURE__ */ jsx("span", { className: "h-3 w-3 rounded-full bg-[#ff5f57]" }),
+                /* @__PURE__ */ jsx("span", { className: "h-3 w-3 rounded-full bg-[#febc2e]" }),
+                /* @__PURE__ */ jsx("span", { className: "h-3 w-3 rounded-full bg-[#28c840]" })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "px-6 pb-4 pt-5", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-base font-semibold leading-snug", children: previewSubject }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-3", children: [
+                  /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-primary/10 text-sm font-semibold text-primary", children: (SAMPLE.store_name ?? "S").charAt(0) }),
+                  /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                    /* @__PURE__ */ jsx("p", { className: "truncate text-sm font-semibold", children: SAMPLE.store_name }),
+                    /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "para mim" })
+                  ] }),
+                  /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 text-xs text-muted-foreground", children: "09:41" })
+                ] })
               ] }),
-              /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap px-6 py-5 text-sm leading-relaxed", children: previewBody })
-            ] }) : /* @__PURE__ */ jsx("div", { className: "p-4", children: /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap rounded-2xl rounded-tl-sm bg-[#dcf8c6] px-3 py-2 text-sm leading-relaxed text-[#111b21]", children: previewBody }) })
+              /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap border-t border-border px-6 py-5 text-sm leading-relaxed", children: previewBody })
+            ] }) : /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: "p-4",
+                style: isWhatsapp ? { backgroundImage: `url(${WHATSAPP_PREVIEW_BG})`, backgroundSize: "cover", backgroundPosition: "center" } : void 0,
+                children: [
+                  /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap rounded-2xl rounded-tl-sm bg-[#dcf8c6] px-3 py-2 text-sm leading-relaxed text-[#111b21] shadow-sm", children: previewBody }),
+                  message.actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-1 space-y-1", children: message.actions.map((action) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "rounded-lg bg-white px-3 py-1.5 text-center text-sm font-medium text-[#1e7fd6] shadow-sm",
+                      children: action.label
+                    },
+                    action.id
+                  )) })
+                ]
+              }
+            )
           }
         ),
         /* @__PURE__ */ jsx("p", { className: "mt-4 text-center text-xs text-muted-foreground", children: "Dados de exemplo \u2014 nenhum registro real foi usado." })
       ] })
+    ] }) : tab === "test" ? /* @__PURE__ */ jsxs(Card, { className: "p-4", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: isWhatsapp ? "Envio real, pelo mesmo caminho da automa\xE7\xE3o \u2014 modelo aprovado, n\xFAmero ativo e entrega de verdade, com os dados de exemplo." : "Envio real, pelo mesmo caminho da automa\xE7\xE3o \u2014 vai o texto que est\xE1 na tela, salvo ou n\xE3o, com os dados de exemplo." }),
+      /* @__PURE__ */ jsx(
+        TestSendStrip,
+        {
+          eventKey: event.name,
+          channel: message.channel,
+          placeholders: message.placeholders,
+          template: message.channel === "email" ? { subject: current.subject, body: current.body } : void 0
+        }
+      )
     ] }) : /* @__PURE__ */ jsxs(Card, { className: "space-y-4 p-4", children: [
       hasSubject && /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-muted-foreground", children: "Assunto" }),
@@ -625,6 +937,65 @@ function AutomationDetailPage({ eventKey, channel, store, backTo = "/automations
           }
         )
       ] }),
+      message.channel === "whatsapp" && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-medium text-muted-foreground", children: "Bot\xF5es \u2014 o cliente responde no toque, sem digitar" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: ACTION_CATALOG.map((action) => {
+          const active = message.actions.find((a) => a.id === action.id);
+          const on = Boolean(active);
+          const gated = action.id === "pay" && !canOfferPayment(readiness);
+          const blocked = gated && !readinessLoading;
+          const labelValue = labelDrafts[action.id] ?? active?.label ?? action.label;
+          const commitLabel = () => {
+            const next = labelValue.trim();
+            setLabelDrafts((d) => {
+              const { [action.id]: _, ...rest } = d;
+              return rest;
+            });
+            if (!active || !next || next === active.label) return;
+            void patch({
+              eventKey: event.name,
+              channel: message.channel,
+              actions: message.actions.map((a) => a.id === action.id ? { ...a, label: next } : a)
+            });
+          };
+          return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-1", children: [
+            /* @__PURE__ */ jsx(
+              Switch,
+              {
+                size: "md",
+                checked: on,
+                disabled: saving || gated,
+                onCheckedChange: (next) => void patch({
+                  eventKey: event.name,
+                  channel: message.channel,
+                  actions: nextActions(message.actions, action.id, next)
+                }),
+                label: on ? "" : action.label
+              }
+            ),
+            on && // O texto do botão como a cliente vê. 25 caracteres é o
+            // teto da Meta para QUICK_REPLY; mudar o texto de um
+            // modelo já aprovado dispara nova aprovação — a
+            // pastilha de status acima conta essa história.
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                value: labelValue,
+                maxLength: 25,
+                disabled: saving,
+                "aria-label": `Texto do bot\xE3o ${action.label}`,
+                onChange: (e) => setLabelDrafts((d) => ({ ...d, [action.id]: e.target.value })),
+                onBlur: commitLabel,
+                onKeyDown: (e) => {
+                  if (e.key === "Enter") e.target.blur();
+                },
+                className: "w-36 rounded-input border border-input bg-card px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: blocked ? "Para cobrar por aqui, configure a conta de pagamento em Conversas \u2192 Tyxter." : action.hint })
+          ] }, action.id);
+        }) })
+      ] }),
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("p", { className: "mb-1.5 text-xs font-medium text-muted-foreground", children: "Campos deste evento \u2014 o envio substitui pelo dado real" }),
         /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1", children: message.placeholders.map((p) => /* @__PURE__ */ jsx("span", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-muted-foreground", children: p }, p)) })
@@ -696,7 +1067,7 @@ function AutomationCard({
   group,
   href
 }) {
-  const [open, setOpen] = React2.useState(false);
+  const [open, setOpen] = React4__default.useState(false);
   return /* @__PURE__ */ jsxs(Card, { className: "overflow-hidden", children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -783,9 +1154,26 @@ var CONFIGURE_TOOL = {
     required: ["event", "channel"]
   }
 };
-var CHANNEL_ICON = {
+var ASK_AI_ACTION = {
+  label: "Criar com IA",
+  hint: "O que revisar nas automa\xE7\xF5es\u2026",
+  intro: {
+    role: "setup",
+    persona: "Redator das automa\xE7\xF5es",
+    pitch: "Diga o que revisar nas automa\xE7\xF5es.",
+    description: "Vejo todas as automa\xE7\xF5es deste app, quais est\xE3o ligadas e o texto de cada uma. Posso ligar, desligar e reescrever \u2014 em uma ou em v\xE1rias de uma vez. Voc\xEA confirma cada mudan\xE7a.",
+    suggestions: [
+      { label: "Revise as mensagens de pedido no tom da minha marca" },
+      { label: "Ligue as automa\xE7\xF5es de entrega" },
+      { label: "Deixe as mensagens de WhatsApp mais curtas" }
+    ]
+  }
+};
+var CHANNEL_ICON2 = {
   email: Mail,
-  whatsapp: MessageCircle,
+  // The brand glyph, not a generic bubble: in a list of channels, WhatsApp
+  // is recognized by its mark before its label.
+  whatsapp: WhatsAppIcon,
   sms: Smartphone,
   push: MessageSquare,
   webchat: MessageSquare
@@ -807,7 +1195,7 @@ var KIND_HINT = {
   transactional: "Disparados por uma a\xE7\xE3o da pessoa. N\xE3o precisam de opt-in.",
   marketing: "Iniciativa da empresa. S\xF3 para quem aceitou receber."
 };
-function iconFor2(name) {
+function iconFor(name) {
   if (!name) return Zap;
   const icons = LucideIcons;
   return icons[name] ?? Zap;
@@ -822,18 +1210,19 @@ function readSelection(basePath) {
 function AutomationsList({ store, variant = "page", basePath = "/automations" }) {
   const tenantId = useOrganizationStoreLike();
   const runtime = usePluginRuntimeOptional();
-  const [messages, setMessages] = React2.useState(null);
-  const [kind, setKind] = React2.useState("all");
+  const [messages, setMessages] = React4__default.useState(null);
+  const [kind, setKind] = React4__default.useState("all");
   const { connectors } = useConnectors({ includeGrants: false, includeCatalog: false });
-  const owned = React2.useMemo(() => connectorAutomationRows(connectors ?? []), [connectors]);
-  const [selected, setSelected] = React2.useState(() => readSelection(basePath));
-  React2.useEffect(() => {
+  const owned = React4__default.useMemo(() => connectorAutomationRows(connectors ?? []), [connectors]);
+  const providerTemplates = useProviderTemplates();
+  const [selected, setSelected] = React4__default.useState(() => readSelection(basePath));
+  React4__default.useEffect(() => {
     const sync = () => setSelected(readSelection(basePath));
     sync();
     window.addEventListener("hashchange", sync);
     return () => window.removeEventListener("hashchange", sync);
   }, [basePath]);
-  const reload = React2.useCallback(async () => {
+  const reload = React4__default.useCallback(async () => {
     let overrides = [];
     try {
       overrides = await store.list(tenantId);
@@ -842,12 +1231,12 @@ function AutomationsList({ store, variant = "page", basePath = "/automations" })
     }
     setMessages(resolveMessages(overrides, runtime?.events ?? []));
   }, [store, tenantId, runtime]);
-  React2.useEffect(() => {
+  React4__default.useEffect(() => {
     void reload();
   }, [reload]);
-  const surfaceRef = React2.useRef({ messages, store, tenantId, reload });
-  surfaceRef.current = { messages, store, tenantId, reload };
-  const agentSurface = React2.useMemo(() => ({
+  const surfaceRef = React4__default.useRef({ messages, store, tenantId, reload, basePath });
+  surfaceRef.current = { messages, store, tenantId, reload, basePath };
+  const agentSurface = React4__default.useMemo(() => ({
     id: "automations.list",
     pluginId: "automations",
     instructions: "The user is on the automations list. `automations` in the surface state is the complete set \u2014 use each entry's `event` and `channel` verbatim, and each entry's own `placeholders` when rewriting its text. Call configureAutomation once per automation you change; say afterwards which ones you touched.",
@@ -894,7 +1283,16 @@ function AutomationsList({ store, variant = "page", basePath = "/automations" })
             ...args.body === void 0 ? {} : { body: String(args.body) }
           }, o.tenantId);
           await o.reload();
-          return { ok: true, event: found.event.name, channel: found.channel };
+          return {
+            ok: true,
+            event: found.event.name,
+            channel: found.channel,
+            ref: {
+              id: `${found.event.name}/${found.channel}`,
+              label: `${found.event.title ?? found.event.name} \u2014 ${CHANNEL_LABEL2[found.channel] ?? found.channel}`,
+              path: `${o.basePath}/${encodeURIComponent(found.event.name)}/${found.channel}`
+            }
+          };
         } catch (e) {
           return { ok: false, error: e instanceof Error ? e.message : String(e) };
         }
@@ -934,20 +1332,16 @@ function AutomationsList({ store, variant = "page", basePath = "/automations" })
   ] });
   return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
     variant !== "panel" ? /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsx(
-      AskAIButton,
+      PageActions,
       {
-        hint: "O que revisar nas automa\xE7\xF5es\u2026",
-        intro: {
-          role: "setup",
-          persona: "Redator das automa\xE7\xF5es",
-          pitch: "Diga o que revisar nas automa\xE7\xF5es.",
-          description: "Vejo todas as automa\xE7\xF5es deste app, quais est\xE3o ligadas e o texto de cada uma. Posso ligar, desligar e reescrever \u2014 em uma ou em v\xE1rias de uma vez. Voc\xEA confirma cada mudan\xE7a.",
-          suggestions: [
-            { label: "Revise as mensagens de pedido no tom da minha marca" },
-            { label: "Ligue as automa\xE7\xF5es de entrega" },
-            { label: "Deixe as mensagens de WhatsApp mais curtas" }
-          ]
-        }
+        actions: [{
+          id: "automations-ai",
+          label: ASK_AI_ACTION.label,
+          icon: WandSparkles,
+          intent: "primary",
+          creates: true,
+          onSelect: () => askAI({ hint: ASK_AI_ACTION.hint, intro: ASK_AI_ACTION.intro })
+        }]
       }
     ) }) : null,
     variant === "panel" ? /* @__PURE__ */ jsx(
@@ -984,14 +1378,16 @@ function AutomationsList({ store, variant = "page", basePath = "/automations" })
     ] }) : groups.map((group) => /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
       /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: group.label }),
       group.items.map((m) => {
-        const Icon = iconFor2(m.event.icon ?? m.event.pluginIcon);
-        const ChannelIcon = CHANNEL_ICON[m.channel];
+        const Icon = iconFor(m.event.icon ?? m.event.pluginIcon);
+        const ChannelIcon = CHANNEL_ICON2[m.channel];
         const href = `${basePath}/${encodeURIComponent(m.event.name)}/${m.channel}`;
+        const isOpen = selected != null && decodeURIComponent(selected.eventKey) === m.event.name && selected.channel === m.channel;
         return /* @__PURE__ */ jsx(
           Card,
           {
             role: "button",
             tabIndex: 0,
+            "aria-current": isOpen || void 0,
             onClick: () => adminNavigateTo(href),
             onKeyDown: (e) => {
               if (e.key === "Enter" || e.key === " ") {
@@ -999,7 +1395,8 @@ function AutomationsList({ store, variant = "page", basePath = "/automations" })
                 adminNavigateTo(href);
               }
             },
-            className: "cursor-pointer overflow-hidden transition-colors hover:border-primary/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            style: isOpen ? { outline: "2px solid hsl(var(--primary) / 0.65)", outlineOffset: "-2px" } : void 0,
+            className: `cursor-pointer overflow-hidden transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring ${isOpen ? "" : "hover:border-primary/40"}`,
             children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-4 p-4", children: [
               /* @__PURE__ */ jsx("span", { className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border text-muted-foreground", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4" }) }),
               /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -1009,7 +1406,13 @@ function AutomationsList({ store, variant = "page", basePath = "/automations" })
                     /* @__PURE__ */ jsx(ChannelIcon, { className: "h-3 w-3" }),
                     CHANNEL_LABEL2[m.channel]
                   ] }),
-                  m.customized && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[11px] text-primary", children: "personalizado" })
+                  m.customized && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[11px] text-primary", children: "personalizado" }),
+                  /* @__PURE__ */ jsx(
+                    ProviderTemplateBadge,
+                    {
+                      approval: providerApprovalFor(providerTemplates, m.event.name, m.channel)
+                    }
+                  )
                 ] }),
                 /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: m.event.description }),
                 /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground", children: [
@@ -1081,6 +1484,9 @@ function rowToTemplate(row) {
     subject: row.subject || null,
     body: row.body || null,
     name: row.name || null,
+    // NULL fica NULL pelo mesmo motivo do `enabled`; lista vazia é uma escolha
+    // ("sem botões"), não a ausência de uma.
+    actions: normalizeMessageActions(row.actions),
     updatedAt: row.updated_at ?? row.created_at
   };
 }
@@ -1108,6 +1514,7 @@ function createSupabaseTemplateStore() {
       if (input.subject !== void 0) payload.subject = input.subject;
       if (input.body !== void 0) payload.body = input.body;
       if (input.name !== void 0) payload.name = input.name;
+      if (input.actions !== void 0) payload.actions = input.actions;
       const { data, error } = await db().from(TABLE).upsert(payload, { onConflict: "tenant_id,event_key,channel" }).select().single();
       if (error) throw error;
       return rowToTemplate(data);
@@ -1127,11 +1534,11 @@ function createAutomationsPlugin(options) {
   const store = options?.store ?? (connection ? createFayzTemplateStore(connection) : createSupabaseTemplateStore());
   startEventLog();
   const inSettings = options?.placement === "settings";
-  const ListPage = () => React2.createElement(AutomationsList, { store });
+  const ListPage = () => React4__default.createElement(AutomationsList, { store });
   ListPage.displayName = "AutomationsList";
-  const SettingsListPage = () => React2.createElement(AutomationsList, { store, variant: "panel", basePath: "/settings/automations" });
+  const SettingsListPage = () => React4__default.createElement(AutomationsList, { store, variant: "panel", basePath: "/settings/automations" });
   SettingsListPage.displayName = "AutomationsSettings";
-  const RailDetail = ({ params, onClose }) => React2.createElement(AutomationDetailPage, {
+  const RailDetail = ({ params, onClose }) => React4__default.createElement(AutomationDetailPage, {
     eventKey: params.eventKey,
     channel: params.channel,
     store,
@@ -1181,6 +1588,6 @@ function createAutomationsPlugin(options) {
   };
 }
 
-export { createAutomationsPlugin, createFayzTemplateStore, createSupabaseTemplateStore };
+export { PROVIDER_TEMPLATES_TABLE, createAutomationsPlugin, createFayzTemplateStore, createSupabaseTemplateStore, loadProviderTemplates, providerApprovalFor, providerTemplateFor };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map