@fayz-ai/plugin-automations 0.9.0 → 0.9.1

package/dist/index.js

@@ -1,144 +1,597 @@
-import React from 'react';
-import { Plus, MessageSquare, Clock, Mail, Tag, Zap, Filter, Pause, Play, ArrowRight } from 'lucide-react';
-import { PageHeaderActions, Button } from '@fayz-ai/ui';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React3 from 'react';
+import { startEventLog, getSupabaseClientOptional, usePluginRuntimeOptional, resolveMessages, resolveMessage, renderMessageTemplate, loadEventRuns } from '@fayz-ai/core';
+import * as LucideIcons from 'lucide-react';
+import { Zap, MessageSquare, Smartphone, MessageCircle, Mail, ChevronRight, RotateCcw, Clock, Monitor, RefreshCw, History, AlertTriangle, CircleSlash, CircleCheck } from 'lucide-react';
+import { HeaderTabs, Card, Switch, SubpageHeader, Button, Badge, Hint, toast } from '@fayz-ai/ui';
+import { adminNavigateTo, useOrganizationStore } from '@fayz-ai/admin';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 // src/index.ts
-var WORKFLOWS = [
-  {
-    id: "1",
-    name: "New lead \u2192 nurture",
-    trigger: "Form submitted",
-    enrolled: 342,
-    active: true,
-    steps: [
-      { icon: MessageSquare, label: "Send SMS" },
-      { icon: Clock, label: "Wait 1 day" },
-      { icon: Mail, label: "Send email" },
-      { icon: Tag, label: 'Tag "nurtured"' }
-    ]
-  },
-  {
-    id: "2",
-    name: "Missed call text-back",
-    trigger: "Call missed",
-    enrolled: 128,
-    active: true,
-    steps: [
-      { icon: MessageSquare, label: "Text back" },
-      { icon: Tag, label: "Create task" }
-    ]
-  },
-  {
-    id: "3",
-    name: "Appointment reminder",
-    trigger: "Appointment booked",
-    enrolled: 87,
-    active: true,
-    steps: [
-      { icon: Clock, label: "Wait until 24h before" },
-      { icon: MessageSquare, label: "WhatsApp reminder" }
-    ]
-  },
-  {
-    id: "4",
-    name: "Won deal \u2192 review request",
-    trigger: "Deal marked Won",
-    enrolled: 41,
-    active: false,
-    steps: [
-      { icon: Clock, label: "Wait 2 days" },
-      { icon: Mail, label: "Ask for review" }
-    ]
-  }
+function useOrganizationStoreLike() {
+  return useOrganizationStore((s) => s.currentOrg?.id);
+}
+var CHANNEL_ICON = {
+  email: Mail,
+  whatsapp: MessageCircle,
+  sms: Smartphone,
+  push: MessageSquare,
+  webchat: MessageSquare
+};
+var CHANNEL_LABEL = {
+  email: "E-mail",
+  whatsapp: "WhatsApp",
+  sms: "SMS",
+  push: "Push",
+  webchat: "Chat"
+};
+var KIND_TABS = [
+  { value: "all", label: "Todos" },
+  { value: "transactional", label: "Transacionais" },
+  { value: "marketing", label: "Marketing" }
 ];
-function Stat({ label, value }) {
-  return /* @__PURE__ */ jsxs("div", { className: "rounded-card border border-border bg-card p-4", children: [
-    /* @__PURE__ */ jsx("p", { className: "text-xs font-medium text-muted-foreground", children: label }),
-    /* @__PURE__ */ jsx("p", { className: "mt-2 text-2xl font-semibold text-foreground", children: value })
-  ] });
+var KIND_HINT = {
+  all: "Tudo que o produto sabe enviar, por qualquer canal.",
+  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 iconFor(name) {
+  if (!name) return Zap;
+  const icons = LucideIcons;
+  return icons[name] ?? Zap;
 }
-function AutomationsHome() {
-  return /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-6xl p-6", children: [
-    /* @__PURE__ */ jsx(PageHeaderActions, { children: /* @__PURE__ */ jsxs(Button, { children: [
-      /* @__PURE__ */ jsx(Plus, { className: "mr-1.5 h-4 w-4" }),
-      " New workflow"
-    ] }) }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-6 grid grid-cols-2 gap-4 lg:grid-cols-4", children: [
-      /* @__PURE__ */ jsx(Stat, { label: "Active workflows", value: "3" }),
-      /* @__PURE__ */ jsx(Stat, { label: "Contacts enrolled", value: "598" }),
-      /* @__PURE__ */ jsx(Stat, { label: "Actions run (30d)", value: "2,140" }),
-      /* @__PURE__ */ jsx(Stat, { label: "Success rate", value: "98.6%" })
+function AutomationsList({ store }) {
+  const tenantId = useOrganizationStoreLike();
+  const runtime = usePluginRuntimeOptional();
+  const [messages, setMessages] = React3.useState(null);
+  const [kind, setKind] = React3.useState("all");
+  const reload = React3.useCallback(async () => {
+    let overrides = [];
+    try {
+      overrides = await store.list(tenantId);
+    } catch (err) {
+      console.warn("[automations] could not load template overrides; showing defaults", err);
+    }
+    setMessages(resolveMessages(overrides, runtime?.events ?? []));
+  }, [store, tenantId, runtime]);
+  React3.useEffect(() => {
+    void reload();
+  }, [reload]);
+  const toggle = async (m, enabled) => {
+    setMessages((prev) => prev?.map((x) => x.event.name === m.event.name && x.channel === m.channel ? { ...x, enabled } : x) ?? null);
+    try {
+      await store.upsert({ eventKey: m.event.name, channel: m.channel, enabled }, tenantId);
+      await reload();
+    } catch (err) {
+      console.warn("[automations] toggle failed", err);
+      toast.error("N\xE3o foi poss\xEDvel salvar");
+      await reload();
+    }
+  };
+  const visible = (messages ?? []).filter((m) => kind === "all" || m.kind === kind);
+  const activeCount = (messages ?? []).filter((m) => m.enabled).length;
+  const groups = [];
+  for (const m of visible) {
+    let g = groups.find((x) => x.module === m.event.pluginId);
+    if (!g) {
+      g = { module: m.event.pluginId, label: m.event.pluginName, items: [] };
+      groups.push(g);
+    }
+    g.items.push(m);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [
+      /* @__PURE__ */ jsx(HeaderTabs, { tabs: KIND_TABS, value: kind, onChange: setKind, "aria-label": "Automa\xE7\xF5es" }),
+      messages !== null && /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+        activeCount,
+        " de ",
+        messages.length,
+        " automa\xE7\xF5es ativas"
+      ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-6 space-y-3", children: WORKFLOWS.map((w) => /* @__PURE__ */ jsxs("div", { className: "rounded-card border border-border bg-card p-4", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex h-9 w-9 items-center justify-center rounded-lg bg-amber-100 text-amber-600", children: /* @__PURE__ */ jsx(Zap, { className: "h-4 w-4" }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("p", { className: "text-sm font-semibold text-foreground", children: w.name }),
-            /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
-              /* @__PURE__ */ jsx(Filter, { className: "h-3 w-3" }),
-              " When: ",
-              w.trigger,
-              " \xB7 ",
-              w.enrolled,
-              " enrolled"
+    /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: KIND_HINT[kind] }),
+    messages === null ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs(Card, { className: "p-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-4 w-40 animate-pulse rounded bg-muted" }),
+      /* @__PURE__ */ jsx("div", { className: "mt-2 h-3 w-64 animate-pulse rounded bg-muted" })
+    ] }, i)) }) : groups.length === 0 ? /* @__PURE__ */ jsxs(Card, { className: "flex flex-col items-center gap-1 p-12 text-center", children: [
+      /* @__PURE__ */ jsx(Zap, { className: "mb-2 h-9 w-9 text-muted-foreground/40", strokeWidth: 1.5 }),
+      /* @__PURE__ */ jsx("p", { className: "text-base font-semibold", children: "Nenhuma automa\xE7\xE3o nesta aba" }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-muted-foreground", children: "Os eventos v\xEAm dos m\xF3dulos instalados \u2014 a loja traz os do pedido, o CRM os do funil." })
+    ] }) : 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 = iconFor(m.event.icon ?? m.event.pluginIcon);
+        const ChannelIcon = CHANNEL_ICON[m.channel];
+        const href = `/automations/${encodeURIComponent(m.event.name)}/${m.channel}`;
+        return /* @__PURE__ */ jsx(
+          Card,
+          {
+            role: "button",
+            tabIndex: 0,
+            onClick: () => adminNavigateTo(href),
+            onKeyDown: (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                adminNavigateTo(href);
+              }
+            },
+            className: "cursor-pointer overflow-hidden transition-colors hover:border-primary/40 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            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: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                  /* @__PURE__ */ jsx("p", { className: "font-medium", children: m.override?.name ?? m.event.title ?? m.event.name }),
+                  /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground", children: [
+                    /* @__PURE__ */ jsx(ChannelIcon, { className: "h-3 w-3" }),
+                    CHANNEL_LABEL[m.channel]
+                  ] }),
+                  m.customized && /* @__PURE__ */ jsx("span", { className: "rounded-full bg-primary/10 px-2 py-0.5 text-[11px] text-primary", children: "personalizado" })
+                ] }),
+                /* @__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: [
+                  /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsx(Zap, { className: "h-3 w-3" }),
+                    m.event.trigger
+                  ] }),
+                  m.subject && /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+                    "Assunto: ",
+                    m.subject
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-3", children: [
+                /* @__PURE__ */ jsx(
+                  Switch,
+                  {
+                    checked: m.enabled,
+                    onCheckedChange: (next) => void toggle(m, next),
+                    label: m.enabled ? "Ativo" : "Inativo",
+                    "aria-label": `${m.event.title} \u2014 ${CHANNEL_LABEL[m.channel]}`
+                  }
+                ),
+                /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+              ] })
             ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx("span", { className: `rounded-full px-2 py-0.5 text-xs font-medium ${w.active ? "bg-emerald-100 text-emerald-700" : "bg-muted text-muted-foreground"}`, children: w.active ? "Active" : "Paused" }),
-          /* @__PURE__ */ jsx(Button, { variant: "outline", size: "icon", children: w.active ? /* @__PURE__ */ jsx(Pause, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Play, { className: "h-4 w-4" }) })
-        ] })
+          },
+          `${m.event.name}:${m.channel}`
+        );
+      })
+    ] }, group.module))
+  ] });
+}
+var STATUS = {
+  sent: { label: "Enviado", hint: "A mensagem saiu.", variant: "success", Icon: CircleCheck },
+  recorded: {
+    label: "Disparou",
+    // O estado honesto de hoje: o gatilho funciona, o envio ainda não existe.
+    hint: "O gatilho disparou e ficou registrado. O envio autom\xE1tico ainda n\xE3o est\xE1 ligado neste ambiente.",
+    variant: "info",
+    Icon: History
+  },
+  skipped: { label: "Ignorado", hint: "O gatilho disparou, mas nada foi enviado \u2014 automa\xE7\xE3o desligada ou sem canal.", variant: "warning", Icon: CircleSlash },
+  failed: { label: "Falhou", hint: "A tentativa de envio quebrou. O erro est\xE1 na linha.", variant: "destructive", Icon: AlertTriangle }
+};
+function when(iso) {
+  const then = new Date(iso).getTime();
+  const diff = Date.now() - then;
+  const min = Math.round(diff / 6e4);
+  if (min < 1) return "agora";
+  if (min < 60) return `h\xE1 ${min} min`;
+  const h = Math.round(min / 60);
+  if (h < 24) return `h\xE1 ${h} h`;
+  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] = React3.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: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: "flex w-full items-center gap-3 px-4 py-2.5 text-left transition-colors hover:bg-muted/40",
+        children: [
+          /* @__PURE__ */ jsx(ChevronRight, { className: `h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform ${open ? "rotate-90" : ""}` }),
+          /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsx(Badge, { variant: cfg.variant, children: cfg.label }),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-muted-foreground", children: typeof run.payload.record_name === "string" ? run.payload.record_name : typeof run.payload.customer_name === "string" ? run.payload.customer_name : typeof run.payload.contact_name === "string" ? run.payload.contact_name : run.subjectId ?? "\u2014" }),
+          /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: when(run.occurredAt) })
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsxs("div", { className: "space-y-3 bg-muted/20 px-4 pb-4 pt-1", children: [
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: cfg.hint }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Dados do disparo" }),
+        /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded-md border border-border bg-card p-3 font-mono text-[11px] leading-relaxed", children: JSON.stringify(run.payload, null, 2) })
       ] }),
-      /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap items-center gap-2 rounded-md bg-muted/40 p-3", children: w.steps.map((s, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-        /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-card px-2.5 py-1 text-xs font-medium text-foreground", children: [
-          /* @__PURE__ */ jsx(s.icon, { className: "h-3.5 w-3.5 text-muted-foreground" }),
-          " ",
-          s.label
+      run.result && /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("p", { className: "mb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: "Resultado" }),
+        /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto rounded-md border border-border bg-card p-3 font-mono text-[11px] leading-relaxed", children: JSON.stringify(run.result, null, 2) })
+      ] }),
+      run.error && /* @__PURE__ */ jsx("p", { className: "rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 font-mono text-[11px] text-destructive", children: run.error })
+    ] })
+  ] });
+}
+function RunLog({ eventKey, tenantId, enabled }) {
+  const [runs, setRuns] = React3.useState(null);
+  const [loading, setLoading] = React3.useState(false);
+  const load = React3.useCallback(async () => {
+    setLoading(true);
+    setRuns(await loadEventRuns(eventKey, { tenantId, limit: 20 }));
+    setLoading(false);
+  }, [eventKey, tenantId]);
+  React3.useEffect(() => {
+    void load();
+  }, [load]);
+  return /* @__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: [
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Execu\xE7\xF5es recentes" }),
+        /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Cada vez que este gatilho disparou nesta conta." })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: () => void load(), disabled: loading, children: /* @__PURE__ */ jsx(RefreshCw, { className: `h-3.5 w-3.5 ${loading ? "animate-spin" : ""}` }) })
+    ] }),
+    runs === null ? /* @__PURE__ */ jsx("div", { className: "space-y-2 p-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx("div", { className: "h-8 animate-pulse rounded bg-muted/40" }, i)) }) : runs.length === 0 ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-1 px-4 py-10 text-center", children: [
+      /* @__PURE__ */ jsx(History, { className: "h-7 w-7 text-muted-foreground/40", strokeWidth: 1.5 }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: "Nenhum disparo ainda" }),
+      /* @__PURE__ */ jsx("p", { className: "max-w-sm text-xs text-muted-foreground", children: enabled ? "Assim que este evento acontecer, ele aparece aqui \u2014 mesmo antes de existir envio." : "A automa\xE7\xE3o est\xE1 desligada. O gatilho continua sendo registrado aqui quando o evento acontecer." })
+    ] }) : /* @__PURE__ */ jsx("div", { children: runs.map((run) => /* @__PURE__ */ jsx(RunRow, { run }, run.id)) })
+  ] });
+}
+var TABS = [
+  { value: "preview", label: "Pr\xE9via" },
+  { value: "code", label: "C\xF3digo" },
+  // O que já aconteceu. Fica ao lado do texto, e não numa tela à parte, porque
+  // é a mesma pergunta em dois tempos: o que vai sair, e o que saiu.
+  { value: "runs", label: "Execu\xE7\xF5es" }
+];
+var CHANNEL_LABEL2 = {
+  email: "E-mail",
+  whatsapp: "WhatsApp",
+  sms: "SMS",
+  push: "Push",
+  webchat: "Chat"
+};
+var SAMPLE = {
+  store_name: "Sua Loja",
+  company_name: "Sua Empresa",
+  customer_name: "Maria Silva",
+  contact_name: "Maria Silva",
+  lead_name: "Maria Silva",
+  order_number: "1042",
+  order_total: "R$ 189,90",
+  order_items: "1 \xD7 Camiseta Cl\xE1ssica \u2014 R$ 89,90\n2 \xD7 Caneca Esmaltada \u2014 R$ 100,00",
+  tracking_code: "BR123456789BR",
+  cart_url: "https://sualoja.com.br/carrinho",
+  deal_name: "Proposta \u2014 Reforma da fachada",
+  deal_value: "R$ 12.400,00",
+  stage_name: "Negocia\xE7\xE3o",
+  owner_name: "Jo\xE3o Pereira",
+  appointment_date: "12/08/2026",
+  appointment_time: "14:30"
+};
+function iconFor2(name) {
+  if (!name) return Zap;
+  const icons = LucideIcons;
+  return icons[name] ?? Zap;
+}
+function AutomationDetailPage({ eventKey, channel, store, backTo = "/automations" }) {
+  const tenantId = useOrganizationStoreLike();
+  const runtime = usePluginRuntimeOptional();
+  const [message, setMessage] = React3.useState(void 0);
+  const [tab, setTab] = React3.useState("preview");
+  const [device, setDevice] = React3.useState("desktop");
+  const [draft, setDraft] = React3.useState(null);
+  const [saving, setSaving] = React3.useState(false);
+  const back = React3.useCallback(() => adminNavigateTo(backTo), [backTo]);
+  const reload = React3.useCallback(async () => {
+    if (!eventKey || !channel) {
+      setMessage(null);
+      return;
+    }
+    let overrides = [];
+    try {
+      overrides = await store.list(tenantId);
+    } catch (err) {
+      console.warn("[automations] could not load overrides; showing defaults", err);
+    }
+    const found = resolveMessage(decodeURIComponent(eventKey), channel, overrides, runtime?.events ?? []);
+    setMessage(found);
+    if (found) setDraft({ subject: found.subject, body: found.body });
+  }, [eventKey, channel, store, tenantId, runtime]);
+  React3.useEffect(() => {
+    void reload();
+  }, [reload]);
+  const header = /* @__PURE__ */ jsx(
+    SubpageHeader,
+    {
+      title: message === void 0 ? "" : message?.override?.name ?? message?.event.title ?? message?.event.name ?? "Automa\xE7\xE3o",
+      parentLabel: "Automa\xE7\xF5es",
+      onBack: back
+    }
+  );
+  if (message === void 0) {
+    return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+      header,
+      /* @__PURE__ */ jsx("div", { className: "h-8 w-64 animate-pulse rounded bg-muted" }),
+      /* @__PURE__ */ jsx(Card, { className: "h-96 animate-pulse" })
+    ] });
+  }
+  if (!message) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      header,
+      /* @__PURE__ */ jsxs(Card, { className: "flex flex-col items-center gap-2 p-12 text-center", children: [
+        /* @__PURE__ */ jsx(Mail, { className: "h-9 w-9 text-muted-foreground/40", strokeWidth: 1.5 }),
+        /* @__PURE__ */ jsx("p", { className: "font-semibold", children: "Automa\xE7\xE3o n\xE3o encontrada" }),
+        /* @__PURE__ */ jsxs("p", { className: "max-w-sm text-sm text-muted-foreground", children: [
+          "O evento ",
+          /* @__PURE__ */ jsx("code", { className: "font-mono", children: eventKey }),
+          " n\xE3o est\xE1 no cat\xE1logo \u2014 o m\xF3dulo que o registra pode n\xE3o estar instalado nesta conta."
+        ] }),
+        /* @__PURE__ */ jsx(Button, { variant: "outline", className: "mt-2", onClick: back, children: "Voltar para Automa\xE7\xF5es" })
+      ] })
+    ] });
+  }
+  const event = message.event;
+  const fallback = { subject: message.override ? void 0 : message.subject, body: message.body };
+  const Icon = iconFor2(event.icon);
+  const current = draft ?? { subject: message.subject, body: message.body };
+  const dirty = current.subject !== message.subject || current.body !== message.body;
+  const hasSubject = message.channel === "email";
+  const patch = async (input) => {
+    setSaving(true);
+    try {
+      await store.upsert(input, tenantId);
+      await reload();
+    } catch (err) {
+      console.warn("[automations] save failed", err);
+      toast.error("N\xE3o foi poss\xEDvel salvar");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const save = () => void patch({
+    eventKey: event.name,
+    channel: message.channel,
+    // Igual ao padrão volta a ser "sem personalização", não uma cópia.
+    subject: current.subject.trim() === (fallback?.subject ?? "") ? null : current.subject.trim() || null,
+    body: current.body.trim() === fallback?.body ? null : current.body.trim() || null
+  });
+  const reset = async () => {
+    setDraft({ subject: fallback?.subject ?? "", body: fallback?.body ?? "" });
+    setSaving(true);
+    try {
+      await store.reset(event.name, message.channel, tenantId);
+      await reload();
+      toast.success("Texto restaurado");
+    } catch (err) {
+      console.warn("[automations] reset failed", err);
+      toast.error("N\xE3o foi poss\xEDvel restaurar");
+    } finally {
+      setSaving(false);
+    }
+  };
+  const previewSubject = renderMessageTemplate(current.subject, SAMPLE);
+  const previewBody = renderMessageTemplate(current.body, SAMPLE);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-5", children: [
+    header,
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-start gap-3", 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: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "outline", children: CHANNEL_LABEL2[message.channel] }),
+          /* @__PURE__ */ jsx(Badge, { variant: "outline", children: message.kind === "marketing" ? "Marketing" : "Transacional" }),
+          message.customized && /* @__PURE__ */ jsx(Badge, { variant: "info", children: "Personalizado" })
         ] }),
-        i < w.steps.length - 1 && /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5 text-muted-foreground" })
-      ] }, i)) })
-    ] }, w.id)) }),
-    /* @__PURE__ */ jsx("p", { className: "mt-4 text-center text-xs text-muted-foreground", children: "Mock preview \xB7 the visual builder + execution engine (event bus, scheduler) ships in a later milestone." })
+        /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-sm text-muted-foreground", children: event.description })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsx(Hint, { label: "Descarta o texto personalizado e volta ao padr\xE3o do produto.", children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: () => void reset(), disabled: !message.customized || saving, children: [
+          /* @__PURE__ */ jsx(RotateCcw, { className: "mr-2 h-4 w-4" }),
+          "Restaurar padr\xE3o"
+        ] }) }) }),
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            size: "md",
+            checked: message.enabled,
+            onCheckedChange: (next) => void patch({ eventKey: event.name, channel: message.channel, enabled: next }),
+            disabled: saving,
+            label: message.enabled ? "Ativa" : "Inativa"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { onClick: save, disabled: !dirty || saving, children: saving ? "Salvando\u2026" : dirty ? "Salvar" : "Salvo" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(HeaderTabs, { tabs: 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" }),
+        "Gatilho:",
+        /* @__PURE__ */ jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 font-mono text-[11px] text-foreground", children: event.name })
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx(Clock, { className: "h-3.5 w-3.5" }),
+        event.trigger
+      ] }),
+      hasSubject && current.subject && /* @__PURE__ */ jsxs("span", { className: "min-w-0 truncate", children: [
+        "Assunto: ",
+        current.subject
+      ] })
+    ] }),
+    tab === "runs" ? /* @__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: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: "Pr\xE9via" }),
+        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1", children: ["desktop", "mobile"].map((d) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => setDevice(d),
+            "aria-label": d === "desktop" ? "Computador" : "Celular",
+            className: `flex h-7 w-7 items-center justify-center rounded-md transition-colors ${device === d ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/60"}`,
+            children: d === "desktop" ? /* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Smartphone, { className: "h-4 w-4" })
+          },
+          d
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-muted/30 p-6", children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `mx-auto rounded-lg border border-border 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__ */ 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("p", { className: "mt-4 text-center text-xs text-muted-foreground", children: "Dados de exemplo \u2014 nenhum registro real foi usado." })
+      ] })
+    ] }) : /* @__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" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: current.subject,
+            onChange: (e) => setDraft({ ...current, subject: e.target.value }),
+            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__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("label", { className: "mb-1 block text-xs font-medium text-muted-foreground", children: "Mensagem" }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          {
+            rows: 14,
+            value: current.body,
+            onChange: (e) => setDraft({ ...current, body: e.target.value }),
+            className: "w-full rounded-input border border-input bg-card px-3 py-2 font-mono text-xs leading-relaxed focus:outline-none focus:ring-2 focus:ring-ring"
+          }
+        )
+      ] }),
+      /* @__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)) })
+      ] })
+    ] })
   ] });
 }
+var TABLE = "plg_automations_templates";
+function rowToTemplate(row) {
+  return {
+    id: row.id,
+    tenantId: row.tenant_id,
+    eventKey: row.event_key,
+    channel: row.channel ?? "email",
+    // NULL fica NULL: quem decide o padrão é o catálogo, não este mapeamento.
+    // Colapsar para `false` aqui desligaria em silêncio todo modelo cuja linha
+    // só existe porque o texto foi editado.
+    enabled: row.enabled ?? null,
+    // String vazia e NULL significam a mesma coisa — "sem personalização" —,
+    // senão um assunto apagado sairia em branco em vez de voltar ao padrão.
+    subject: row.subject || null,
+    body: row.body || null,
+    name: row.name || null,
+    updatedAt: row.updated_at ?? row.created_at
+  };
+}
+function createSupabaseTemplateStore() {
+  const db = () => {
+    const client = getSupabaseClientOptional();
+    if (!client) throw new Error("@fayz-ai/plugin-automations: Supabase client not initialized");
+    return client;
+  };
+  return {
+    async list(tenantId) {
+      let q = db().from(TABLE).select("*");
+      if (tenantId) q = q.eq("tenant_id", tenantId);
+      const { data, error } = await q;
+      if (error) throw error;
+      return (data ?? []).map(rowToTemplate);
+    },
+    async upsert(input, tenantId) {
+      const payload = {
+        tenant_id: tenantId,
+        event_key: input.eventKey,
+        channel: input.channel
+      };
+      if (input.enabled !== void 0) payload.enabled = input.enabled;
+      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;
+      const { data, error } = await db().from(TABLE).upsert(payload, { onConflict: "tenant_id,event_key,channel" }).select().single();
+      if (error) throw error;
+      return rowToTemplate(data);
+    },
+    async reset(eventKey, channel, tenantId) {
+      let q = db().from(TABLE).delete().eq("event_key", eventKey).eq("channel", channel);
+      if (tenantId) q = q.eq("tenant_id", tenantId);
+      const { error } = await q;
+      if (error) throw error;
+    }
+  };
+}
 
 // src/index.ts
 function createAutomationsPlugin(options) {
-  const PageComponent = () => React.createElement(AutomationsHome);
-  PageComponent.displayName = "AutomationsHome";
+  const store = options?.store ?? createSupabaseTemplateStore();
+  startEventLog();
+  const inSettings = options?.placement === "settings";
+  const ListPage = () => React3.createElement(AutomationsList, { store });
+  ListPage.displayName = "AutomationsList";
+  const DetailPage = (props) => React3.createElement(AutomationDetailPage, {
+    ...props,
+    store,
+    // "Back" must return you through the door you came in: opening the list
+    // inside settings must not drop you on a loose page that app's menu does
+    // not have.
+    backTo: inSettings ? "/settings/automations" : "/automations"
+  });
+  DetailPage.displayName = "AutomationDetail";
+  const READ = { feature: "automations", action: "read" };
   return {
     id: "automations",
-    name: options?.navLabel ?? "Automations",
+    name: options?.navLabel ?? "Automa\xE7\xF5es",
     icon: "Zap",
-    version: "1.0.0",
+    version: "2.0.0",
     scope: options?.scope ?? "universal",
     verticalId: options?.verticalId,
     defaultEnabled: true,
     dependencies: [],
     declaredFeatures: [{ id: "automations", label: "Automations", group: "Automate" }],
-    navigation: [
+    navigation: inSettings ? [] : [
       {
         section: options?.navSection ?? "main",
         position: options?.navPosition ?? 6,
-        label: options?.navLabel ?? "Automations",
+        label: options?.navLabel ?? "Automa\xE7\xF5es",
         route: "/automations",
         icon: "Zap",
-        permission: { feature: "automations", action: "read" }
+        permission: READ,
+        indexChild: false
       }
     ],
+    // The SAME list, served inside settings — not a second screen.
+    settings: inSettings ? [
+      { id: "automations", label: options?.navLabel ?? "Automa\xE7\xF5es", icon: "Zap", component: ListPage, permission: READ }
+    ] : [],
     routes: [
-      {
-        path: "/automations",
-        component: PageComponent,
-        permission: { feature: "automations", action: "read" }
-      }
+      { path: "/automations", component: ListPage, permission: READ },
+      // One automation's detail. Off-menu: it is a row of the list. Its back
+      // link comes from `backTo`.
+      { path: "/automations/:eventKey/:channel", component: DetailPage, permission: READ }
     ],
     widgets: []
   };
 }
 
-export { createAutomationsPlugin };
+export { createAutomationsPlugin, createSupabaseTemplateStore };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map