@decido/discovery-studio 0.1.0 → 4.0.1

package/README.md

@@ -0,0 +1,31 @@
+# 🚀 @decido/discovery-studio
+
+> WhatsApp Discovery Studio — Enterprise-grade conversational analytics, flow design, and live chat
+
+Bienvenido a la documentación oficial de **@decido/discovery-studio**, un componente integral del ecosistema **Decido OS**.
+
+## 📦 Instalación
+
+Para aprovisionar este módulo dentro de otra área del monorepo o consumirlo remotamente:
+
+```bash
+npm install @decido/discovery-studio
+# o mediante el gestor oficial del monorepo
+pnpm add @decido/discovery-studio
+```
+
+## 🔧 Estructura y Dependencias
+
+Este paquete está diseñado para interoperar de forma nativa con la infraestructura central. 
+Para su correcto funcionamiento en un entorno aislado (Sandboxed), se apoya en los siguientes cimientos tecnológicos:
+
+- `react`
+- `react-dom`
+- `@decido/canvas-ai`
+- `@decido/kernel-bridge`
+- `@decido/macia-core`
+
+## 🔐 Licencia y Privacidad 
+El código de este componente se encuentra auditado y restringido (Sin Sourcemaps).  
+Propiedad Intelectual Protegida - Framework Decido OS.  
+Distribuido bajo licencia **UNLICENSED**.

package/dist/index.d.mts

@@ -67,7 +67,7 @@ interface FlowState {
     edges: any[];
 }
 interface StudioState {
-    activeTab: 'chat' | 'flow' | 'analytics';
+    activeTab: 'chat' | 'flow' | 'analytics' | 'architect';
     selectedContact: string | null;
     explorerOpen: boolean;
     inspectorOpen: boolean;

package/dist/index.d.ts

@@ -67,7 +67,7 @@ interface FlowState {
     edges: any[];
 }
 interface StudioState {
-    activeTab: 'chat' | 'flow' | 'analytics';
+    activeTab: 'chat' | 'flow' | 'analytics' | 'architect';
     selectedContact: string | null;
     explorerOpen: boolean;
     inspectorOpen: boolean;

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React8 = require('react');
+var React9 = require('react');
 var socket_ioClient = require('socket.io-client');
 var jsxRuntime = require('react/jsx-runtime');
 var kernelBridge = require('@decido/kernel-bridge');
@@ -11,7 +11,7 @@ var lucideReact = require('lucide-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React8__default = /*#__PURE__*/_interopDefault(React8);
+var React9__default = /*#__PURE__*/_interopDefault(React9);
 
 // src/DiscoveryStudio.tsx
 var API_URL = undefined?.VITE_API_BASE_URL || "http://localhost:3001";
@@ -34,7 +34,7 @@ var Section = ({
   defaultOpen = true,
   children
 }) => {
-  const [open, setOpen] = React8.useState(defaultOpen);
+  const [open, setOpen] = React9.useState(defaultOpen);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b", style: { borderColor: "var(--border-color)" }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -54,9 +54,9 @@ var Section = ({
   ] });
 };
 var SideExplorer = ({ selectedContact, onSelectContact }) => {
-  const [filter, setFilter] = React8.useState("");
-  const [conversations, setConversations] = React8.useState([]);
-  React8.useEffect(() => {
+  const [filter, setFilter] = React9.useState("");
+  const [conversations, setConversations] = React9.useState([]);
+  React9.useEffect(() => {
     const fetchConversations = async () => {
       try {
         const res = await fetch(`${API_URL}/api/whatsapp/conversations`);
@@ -129,10 +129,7 @@ var SideExplorer = ({ selectedContact, onSelectContact }) => {
               ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs font-bold truncate", style: { color: "var(--text-primary)" }, children: [
-                    "+",
-                    conv.phone
-                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-bold truncate", style: { color: "var(--text-primary)" }, children: conv.profile_name || "+" + conv.phone }),
                   /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] shrink-0 ml-1", style: { color: "var(--text-secondary)" }, children: conv.last_activity.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }) })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] truncate mt-0.5", style: { color: "var(--text-secondary)" }, children: conv.last_message || "Media" })
@@ -189,9 +186,9 @@ var CONTACT_DETAILS = {
     tags: ["VIP", "Frecuente", "Muebler\xEDa"],
     timeline: [
       { time: "2m", event: "Pregunt\xF3 por estado de pedido", icon: "fas fa-comment" },
-      { time: "1d", event: "Pedido PED-1847 en PRODUCCI\xD3N", icon: "fas fa-industry" },
-      { time: "3d", event: "Confirm\xF3 cotizaci\xF3n mesa roble", icon: "fas fa-check" },
-      { time: "1w", event: "Solicit\xF3 cat\xE1logo digital", icon: "fas fa-book" }
+      { time: "1d", event: "Pedido PED-1847 en PRODUCTION", icon: "fas fa-industry" },
+      { time: "3d", event: "Transici\xF3n a IN_CUTTING (Control)", icon: "fas fa-check-circle" },
+      { time: "1w", event: "Tracking Link Generado", icon: "fas fa-link" }
     ]
   },
   c2: {
@@ -206,7 +203,7 @@ var CONTACT_DETAILS = {
     tags: ["Empresa", "Nuevo"],
     timeline: [
       { time: "15m", event: "Solicit\xF3 cotizaci\xF3n de mesa", icon: "fas fa-comment" },
-      { time: "2d", event: "Primer contacto v\xEDa WhatsApp", icon: "fas fa-phone" }
+      { time: "2d", event: "RuleEngine Trigger: NEW Order", icon: "fas fa-bolt" }
     ]
   }
 };
@@ -306,25 +303,64 @@ var InspectorPanel = ({ selectedContact }) => {
   ] });
 };
 var AgentPanel = () => {
-  const [messages, setMessages] = React8.useState([
+  const [messages, setMessages] = React9.useState([
     { id: "1", text: "Soy tu Agente Vocal asignado. \xBFEn qu\xE9 te ayudo con tus flujos?", type: "system" }
   ]);
-  const [input, setInput] = React8.useState("");
-  const [isTyping, setIsTyping] = React8.useState(false);
-  const scrollRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const [input, setInput] = React9.useState("");
+  const [isTyping, setIsTyping] = React9.useState(false);
+  const scrollRef = React9.useRef(null);
+  React9.useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
     }
   }, [messages]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     const unsubscribe = kernelBridge.kernel.onEvent((payload) => {
       if (payload.event_type === "message_sent" && payload.data?.target === "vocal_domain_agent") ; else if (payload.event_type === "message_sent" && payload.data?.intent === "vocal_response") {
         setMessages((prev) => [...prev, { id: Date.now().toString(), text: payload.data.payload, type: "agent" }]);
         setIsTyping(false);
       }
     });
-    return () => unsubscribe();
+    let es = null;
+    try {
+      es = new EventSource("http://localhost:3001/api/events");
+      es.addEventListener("whatsapp:message_received", (e) => {
+        try {
+          const data = JSON.parse(e.data);
+          setMessages((prev) => [...prev, {
+            id: Date.now().toString(),
+            text: `\u{1F4F1} [WA] ${data.profileName || data.from}: ${data.text || "Archivo Adjunto"}`,
+            type: "user"
+          }]);
+          setIsTyping(true);
+          setTimeout(() => {
+            setMessages((p) => [...p, { id: Date.now().toString(), text: "Regla disparada: Mensaje recibido. Evaluando intenci\xF3n...", type: "system" }]);
+            setIsTyping(false);
+          }, 1e3);
+        } catch (e2) {
+        }
+      });
+      es.addEventListener("whatsapp:status_update", (e) => {
+        try {
+          const data = JSON.parse(e.data);
+          setMessages((prev) => [...prev, {
+            id: Date.now().toString(),
+            text: `\u2714\uFE0F [Estado WA] ${data.status} a ${data.recipient_id}`,
+            type: "system"
+          }]);
+        } catch (e2) {
+        }
+      });
+      es.onerror = () => {
+        es?.close();
+      };
+    } catch (e) {
+      console.log("SSE Error, falling back to local kernel");
+    }
+    return () => {
+      unsubscribe();
+      if (es) es.close();
+    };
   }, []);
   const handleSend = async () => {
     if (!input.trim()) return;
@@ -412,12 +448,12 @@ var AgentPanel = () => {
 };
 var API_URL2 = undefined?.VITE_API_BASE_URL || "http://localhost:3001";
 var ChatTab = ({ selectedContact }) => {
-  const [messages, setMessages] = React8.useState([]);
-  const [input, setInput] = React8.useState("");
-  const [opMode, setOpMode] = React8.useState("COPILOT");
-  const [socket, setSocket] = React8.useState(null);
-  const chatEndRef = React8.useRef(null);
-  const fetchMessages = React8.useCallback(async () => {
+  const [messages, setMessages] = React9.useState([]);
+  const [input, setInput] = React9.useState("");
+  const [opMode, setOpMode] = React9.useState("COPILOT");
+  const [socket, setSocket] = React9.useState(null);
+  const chatEndRef = React9.useRef(null);
+  const fetchMessages = React9.useCallback(async () => {
     if (!selectedContact) {
       setMessages([]);
       return;
@@ -438,7 +474,7 @@ var ChatTab = ({ selectedContact }) => {
       console.error("Failed to fetch messages:", error);
     }
   }, [selectedContact]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     fetchMessages();
     const s = socket_ioClient.io(API_URL2, { transports: ["websocket", "polling"] });
     s.on("connect", () => console.log("[ChatTab] Connected to WebSocket"));
@@ -460,7 +496,7 @@ var ChatTab = ({ selectedContact }) => {
       s.disconnect();
     };
   }, [selectedContact, fetchMessages]);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     chatEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages]);
   const handleSend = async () => {
@@ -666,7 +702,7 @@ var MESSAGE_CONFIG = {
   outgoing: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Reply, { size: 14 }), colorClass: "text-blue-400", bgClass: "from-blue-500/10 to-transparent" },
   system: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, { size: 14 }), colorClass: "text-purple-400", bgClass: "from-purple-500/10 to-transparent" }
 };
-var MessageNode = React8.memo(({ id, data, selected }) => {
+var MessageNode = React9.memo(({ id, data, selected }) => {
   const nodeData = data || {};
   const config = MESSAGE_CONFIG[nodeData.type] || MESSAGE_CONFIG.incoming;
   const titleElement = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center w-full min-w-[140px]", children: [
@@ -699,7 +735,7 @@ var ACTION_CONFIG = {
   analyze: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Brain, { size: 14 }), colorClass: "text-violet-400", bgClass: "from-violet-500/10 to-transparent" },
   decision: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.GitBranch, { size: 14 }), colorClass: "text-cyan-400", bgClass: "from-cyan-500/10 to-transparent" }
 };
-var BotActionNode = React8.memo(({ id, data, selected }) => {
+var BotActionNode = React9.memo(({ id, data, selected }) => {
   const nodeData = data || {};
   const config = ACTION_CONFIG[nodeData?.actionType] || ACTION_CONFIG.reply;
   const titleElement = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
@@ -725,6 +761,56 @@ var BotActionNode = React8.memo(({ id, data, selected }) => {
   );
 });
 BotActionNode.displayName = "BotActionNode";
+var TrackingPreview = ({ token = "demo-token-123", onClose }) => {
+  const trackingUrl = `http://localhost:3001/track/${token}`;
+  const [isLoading, setIsLoading] = React9.useState(true);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-[400px] bg-[#0E1525] rounded-[24px] overflow-hidden border border-white/10 shadow-2xl flex flex-col h-[700px] max-h-[90vh] relative animate-in zoom-in-95", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute top-4 right-4 z-10 flex gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => window.open(trackingUrl, "_blank"),
+          className: "w-8 h-8 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center text-white/70 hover:text-white hover:bg-white/20 transition-colors",
+          title: "Abrir en nueva pesta\xF1a",
+          children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-external-link-alt text-xs" })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "w-8 h-8 rounded-full bg-white/10 backdrop-blur-md flex items-center justify-center text-white/70 hover:text-white hover:bg-white/20 transition-colors",
+          title: "Cerrar vista previa",
+          children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-times text-xs" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-7 w-full bg-black flex justify-center items-start shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[120px] h-5 bg-black rounded-b-xl" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-4 py-2 bg-black/50 border-b border-white/5 flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-white/5 rounded-lg px-3 py-1 flex items-center gap-2 text-[10px] text-white/40 w-fit", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-lock text-[8px]" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        "decido.com/track/",
+        token
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 relative bg-black", children: [
+      isLoading && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 flex flex-col items-center justify-center bg-[#0E1525] text-white/50", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-circle-notch fa-spin text-2xl text-emerald-500 mb-3" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium", children: "Cargando vista m\xF3vil..." })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "iframe",
+        {
+          src: trackingUrl,
+          className: `w-full h-full border-none transition-opacity duration-300 ${isLoading ? "opacity-0" : "opacity-100"}`,
+          onLoad: () => setIsLoading(false),
+          title: "Tracking Portal Preview"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-full bg-black flex justify-center items-center shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[120px] h-1 bg-white/20 rounded-full" }) })
+  ] }) });
+};
 var nodeTypes = {
   messageNode: MessageNode,
   botAction: BotActionNode
@@ -742,14 +828,14 @@ var initialNodes = [
     id: "ai-intent",
     type: "botAction",
     position: { x: 400, y: 280 },
-    data: { label: "Agente IA: Reconocimiento", actionType: "analyze", description: 'Detectar Intenci\xF3n: "Estado de Pedido"' }
+    data: { label: "Reconocimiento Intenci\xF3n IA", actionType: "analyze", description: 'Detectar Intenci\xF3n: "Estado de Pedido"' }
   },
   // Database Check
   {
     id: "db-check",
     type: "botAction",
     position: { x: 750, y: 150 },
-    data: { label: "Consultar ERP", actionType: "decision", description: "API REST: /orders/XJ-901" }
+    data: { label: "Acci\xF3n Ejecutada", actionType: "decision", description: "Action: GENERATE_TRACKING_LINK" }
   },
   {
     id: "escalate-human",
@@ -762,13 +848,13 @@ var initialNodes = [
     id: "reply-status",
     type: "messageNode",
     position: { x: 1050, y: 150 },
-    data: { label: "Respuesta Autom\xE1tica WhatsApp", type: "outgoing", text: 'Tu pedido XJ-901 est\xE1 "En Producci\xF3n" y se entregar\xE1 el Viernes.', time: "10:06 AM" }
+    data: { label: "Regla: SEND_WA_TEMPLATE", type: "outgoing", text: "Template: pedido_produccion\nPar\xE1metros: [legacyId, trackUrl]", time: "10:06 AM" }
   },
   {
     id: "assign-agent",
     type: "messageNode",
     position: { x: 1050, y: 400 },
-    data: { label: "Soporte Asignado", type: "system", text: "Asignando Chat #3421 al Asesor de Ventas: Carlos" }
+    data: { label: "Soporte Asignado", type: "system", text: "Asignando Chat #3421 (Humano en la ruta)" }
   }
 ];
 var initialEdges = [
@@ -780,15 +866,21 @@ var initialEdges = [
   { id: "e6", source: "escalate-human", target: "assign-agent", style: { stroke: "#f59e0b" }, markerEnd: { type: react.MarkerType.ArrowClosed, color: "#f59e0b" } }
 ];
 var FlowCanvasTab = () => {
-  const [nodes, setNodes] = React8.useState(initialNodes);
-  const [edges, setEdges] = React8.useState(initialEdges);
-  const onNodesChange = React8.useCallback((changes) => {
+  const [nodes, setNodes] = React9.useState(initialNodes);
+  const [edges, setEdges] = React9.useState(initialEdges);
+  const [previewOpen, setPreviewOpen] = React9.useState(false);
+  const onNodesChange = React9.useCallback((changes) => {
   }, []);
-  const onEdgesChange = React8.useCallback((changes) => {
+  const onEdgesChange = React9.useCallback((changes) => {
   }, []);
-  const onConnect = React8.useCallback((params) => {
+  const onConnect = React9.useCallback((params) => {
     setEdges((eds) => [...eds, { ...params, id: `e-${Date.now()}`, animated: true }]);
   }, [setEdges]);
+  const onNodeClick = React9.useCallback((event, node) => {
+    if (node.data?.description?.includes("GENERATE_TRACKING_LINK") || node.data?.text?.includes("trackUrl")) {
+      setPreviewOpen(true);
+    }
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-h-0 flex flex-col overflow-hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -840,9 +932,11 @@ var FlowCanvasTab = () => {
         onNodesChange,
         onEdgesChange,
         onConnect,
+        onNodeClick,
         nodeTypes
       }
-    ) })
+    ) }),
+    previewOpen && /* @__PURE__ */ jsxRuntime.jsx(TrackingPreview, { onClose: () => setPreviewOpen(false) })
   ] });
 };
 var HOURLY_DATA = [
@@ -901,8 +995,8 @@ var BarChart = ({ data }) => {
   ] }, i)) });
 };
 var AnalyticsTab = () => {
-  const [animatedValues, setAnimatedValues] = React8.useState({});
-  React8.useEffect(() => {
+  const [animatedValues, setAnimatedValues] = React9.useState({});
+  React9.useEffect(() => {
     const timer = setTimeout(() => {
       const vals = {};
       TOP_INTENTS.forEach((intent) => {
@@ -999,7 +1093,7 @@ var AnalyticsTab = () => {
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-1", style: { gridTemplateColumns: "auto repeat(24, 1fr)" }, children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", {}),
         Array.from({ length: 24 }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[7px] text-center font-bold", style: { color: "var(--text-secondary)" }, children: i }, i)),
-        ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day, di) => /* @__PURE__ */ jsxRuntime.jsxs(React8__default.default.Fragment, { children: [
+        ["Lun", "Mar", "Mi\xE9", "Jue", "Vie", "S\xE1b", "Dom"].map((day, di) => /* @__PURE__ */ jsxRuntime.jsxs(React9__default.default.Fragment, { children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[9px] font-bold pr-2 flex items-center", style: { color: "var(--text-secondary)" }, children: day }),
           Array.from({ length: 24 }, (_, hi) => {
             const intensity = Math.random();
@@ -1024,20 +1118,20 @@ var AnalyticsTab = () => {
   ] });
 };
 var ApiTesterTab = () => {
-  const [phone, setPhone] = React8.useState("");
-  const [msgType, setMsgType] = React8.useState("text");
-  const [payloadText, setPayloadText] = React8.useState("Hola desde Decido OS \u{1F680}");
-  const [templateName, setTemplateName] = React8.useState("hello_world");
-  const [templateLanguage, setTemplateLanguage] = React8.useState("en_US");
-  const [loading, setLoading] = React8.useState(false);
-  const [result, setResult] = React8.useState(null);
-  const [savedPhones, setSavedPhones] = React8.useState([]);
-  const [newPhoneName, setNewPhoneName] = React8.useState("");
-  const [showPhoneSave, setShowPhoneSave] = React8.useState(false);
-  const [templateVariables, setTemplateVariables] = React8.useState([]);
-  const [templates, setTemplates] = React8.useState([]);
-  const [fetchingTemplates, setFetchingTemplates] = React8.useState(false);
-  React8__default.default.useEffect(() => {
+  const [phone, setPhone] = React9.useState("");
+  const [msgType, setMsgType] = React9.useState("text");
+  const [payloadText, setPayloadText] = React9.useState("Hola desde Decido OS \u{1F680}");
+  const [templateName, setTemplateName] = React9.useState("hello_world");
+  const [templateLanguage, setTemplateLanguage] = React9.useState("en_US");
+  const [loading, setLoading] = React9.useState(false);
+  const [result, setResult] = React9.useState(null);
+  const [savedPhones, setSavedPhones] = React9.useState([]);
+  const [newPhoneName, setNewPhoneName] = React9.useState("");
+  const [showPhoneSave, setShowPhoneSave] = React9.useState(false);
+  const [templateVariables, setTemplateVariables] = React9.useState([]);
+  const [templates, setTemplates] = React9.useState([]);
+  const [fetchingTemplates, setFetchingTemplates] = React9.useState(false);
+  React9__default.default.useEffect(() => {
     const saved = localStorage.getItem("wa_api_tester_phones");
     if (saved) {
       try {
@@ -1047,7 +1141,7 @@ var ApiTesterTab = () => {
     }
     fetchTemplates();
   }, []);
-  React8__default.default.useEffect(() => {
+  React9__default.default.useEffect(() => {
     const selected = templates.find((t) => t.name === templateName && t.language === templateLanguage);
     if (selected) {
       const bodyComponent = selected.components?.find((c) => c.type === "BODY" || c.type === "body");
@@ -1340,18 +1434,18 @@ var ApiTesterTab = () => {
   ] }) });
 };
 var TemplateManagerTab = () => {
-  const [templates, setTemplates] = React8.useState([]);
-  const [loading, setLoading] = React8.useState(true);
-  const [error, setError] = React8.useState(null);
-  const [creating, setCreating] = React8.useState(false);
-  const [name, setName] = React8.useState("");
-  const [category, setCategory] = React8.useState("UTILITY");
-  const [language, setLanguage] = React8.useState("es");
-  const [headerText, setHeaderText] = React8.useState("");
-  const [bodyText, setBodyText] = React8.useState("Hola {{1}}, tu pedido est\xE1 listo.");
-  const [footerText, setFooterText] = React8.useState("");
-  const [buttons, setButtons] = React8.useState([]);
-  React8.useEffect(() => {
+  const [templates, setTemplates] = React9.useState([]);
+  const [loading, setLoading] = React9.useState(true);
+  const [error, setError] = React9.useState(null);
+  const [creating, setCreating] = React9.useState(false);
+  const [name, setName] = React9.useState("");
+  const [category, setCategory] = React9.useState("UTILITY");
+  const [language, setLanguage] = React9.useState("es");
+  const [headerText, setHeaderText] = React9.useState("");
+  const [bodyText, setBodyText] = React9.useState("Hola {{1}}, tu pedido est\xE1 listo.");
+  const [footerText, setFooterText] = React9.useState("");
+  const [buttons, setButtons] = React9.useState([]);
+  React9.useEffect(() => {
     fetchTemplates();
   }, []);
   const fetchTemplates = async () => {
@@ -1693,15 +1787,112 @@ var TemplateManagerTab = () => {
     ] })
   ] }) });
 };
+var SUGGESTIONS = [
+  { icon: "fas fa-comment-dots", color: "text-indigo-400", bg: "bg-indigo-500/10", text: "Saluda al cliente cuando se cree un pedido" },
+  { icon: "fas fa-camera", color: "text-amber-400", bg: "bg-amber-500/10", text: "Detecta pagos en fotos de comprobante" },
+  { icon: "fas fa-industry", color: "text-emerald-400", bg: "bg-emerald-500/10", text: "Avisa por WhatsApp al pasar a Producci\xF3n" },
+  { icon: "fas fa-truck", color: "text-cyan-400", bg: "bg-cyan-500/10", text: "Pedido listo: avisa si >$1M" }
+];
+var RulesArchitectTab = () => {
+  const [prompt, setPrompt] = React9.useState("");
+  const [loading, setLoading] = React9.useState(false);
+  const [result, setResult] = React9.useState(null);
+  const [error, setError] = React9.useState(null);
+  const generateRule = async (textToUse) => {
+    const text = textToUse || prompt;
+    if (!text.trim()) return;
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    try {
+      const res = await fetch("http://localhost:3001/api/whatsapp/rules/generate", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          // Note: Mocking tenant matching local dev
+          "x-tenant-id": "dev-tenant"
+        },
+        body: JSON.stringify({ prompt: text })
+      });
+      if (!res.ok) throw new Error("Error al generar regla IA");
+      const data = await res.json();
+      setResult(JSON.stringify(data.rule || data, null, 2));
+    } catch (err) {
+      setError(err.message || "Error de conexi\xF3n con el AI Service");
+    } finally {
+      setLoading(false);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-full flex flex-col items-center justify-center p-8 bg-black/20 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full max-w-3xl", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-10 text-white", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex items-center justify-center w-16 h-16 rounded-2xl bg-indigo-500/20 text-indigo-400 mb-6 border border-indigo-500/30 shadow-[0_0_30px_rgba(99,102,241,0.2)]", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-wand-magic-sparkles text-2xl" }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-black tracking-tight mb-3", children: "Workflow Architect" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-zinc-400 max-w-lg mx-auto leading-relaxed", children: "Escribe una instrucci\xF3n en lenguaje natural y Sentinal AI generar\xE1 la regla JSON requerida para la automatizaci\xF3n de WhatsApp." })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 gap-3 mb-8", children: SUGGESTIONS.map((s, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => {
+          setPrompt(s.text);
+          generateRule(s.text);
+        },
+        className: `flex items-center gap-3 p-4 text-left rounded-xl transition-all border border-white/5 bg-zinc-900/50 hover:bg-zinc-800/80 hover:border-white/10 group`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-8 h-8 shrink-0 flex items-center justify-center rounded-lg ${s.bg} ${s.color}`, children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: s.icon }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-zinc-300 group-hover:text-white leading-tight", children: s.text })
+        ]
+      },
+      i
+    )) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none", children: /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-terminal text-zinc-500" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            value: prompt,
+            onChange: (e) => setPrompt(e.target.value),
+            onKeyDown: (e) => e.key === "Enter" && generateRule(),
+            placeholder: "Ej: Cuando un pedido pase de Producci\xF3n a Dispatch, env\xEDa una plantilla...",
+            className: "block w-full pl-11 pr-32 py-4 bg-zinc-950/80 border-2 border-zinc-800 rounded-xl text-sm outline-none text-zinc-200 placeholder-zinc-600 focus:border-indigo-500/50 focus:bg-zinc-950 transition-all shadow-inner"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => generateRule(),
+            disabled: loading || !prompt.trim(),
+            className: "absolute right-2 top-2 bottom-2 px-6 bg-indigo-600 hover:bg-indigo-500 disabled:bg-zinc-800 disabled:text-zinc-600 text-white font-bold rounded-lg text-sm transition-all shadow-lg active:scale-95 flex items-center gap-2",
+            children: loading ? /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-circle-notch fa-spin" }) : "Generar"
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 rounded-xl bg-rose-500/10 border border-rose-500/20 text-rose-400 text-sm flex items-start gap-3 animate-in fade-in slide-in-from-top-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fas fa-exclamation-circle mt-0.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: error })
+      ] }),
+      result && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-xl overflow-hidden border border-zinc-800 bg-[#0d1117] relative animate-in zoom-in-95 fade-in duration-300 shadow-2xl", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-4 py-2 border-b border-zinc-800 bg-[#161b22] flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("i", { className: "fab fa-js text-yellow-400/80 text-xs" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-mono text-zinc-400", children: "generated_rule.json" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] uppercase font-bold text-emerald-400 bg-emerald-500/10 px-2 py-0.5 rounded", children: "V\xE1lido" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-5 text-xs font-mono leading-relaxed text-[#c9d1d9] overflow-x-auto whitespace-pre-wrap max-h-[300px] overflow-y-auto custom-scrollbar", children: result })
+      ] })
+    ] })
+  ] }) });
+};
 var useStatusMetrics = () => {
-  const [metrics, setMetrics] = React8.useState({
+  const [metrics, setMetrics] = React9.useState({
     activeChats: 12,
     avgResponse: "2.4s",
     todayMessages: 347,
     botUptime: "99.8%",
     queuedMessages: 3
   });
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     const interval = setInterval(() => {
       setMetrics((prev) => ({
         ...prev,
@@ -1714,7 +1905,7 @@ var useStatusMetrics = () => {
   }, []);
   return metrics;
 };
-var StatusBarMetrics = React8__default.default.memo(() => {
+var StatusBarMetrics = React9__default.default.memo(() => {
   const metrics = useStatusMetrics();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
@@ -1762,20 +1953,21 @@ var StatusBarMetrics = React8__default.default.memo(() => {
 var TABS = [
   { id: "chat", label: "Live Chat", icon: "fas fa-comments" },
   { id: "flow", label: "Flow Canvas", icon: "fas fa-project-diagram" },
+  { id: "architect", label: "Workflow Architect", icon: "fas fa-wand-magic-sparkles" },
   { id: "analytics", label: "Analytics", icon: "fas fa-chart-bar" },
   { id: "api_tester", label: "API Tester", icon: "fas fa-vial" },
   { id: "templates", label: "Templates", icon: "fas fa-layer-group" }
 ];
 var DiscoveryStudio = ({ gatewayStatus = "connected", activeProvider = "Meta Cloud API" }) => {
-  const [activeTab, setActiveTab] = React8.useState("chat");
-  const [explorerOpen, setExplorerOpen] = React8.useState(true);
-  const [inspectorOpen, setInspectorOpen] = React8.useState(false);
-  const [agentOpen, setAgentOpen] = React8.useState(true);
-  const [selectedContact, setSelectedContact] = React8.useState(null);
-  const [cmdOpen, setCmdOpen] = React8.useState(false);
-  const [cmdQuery, setCmdQuery] = React8.useState("");
-  const cmdInputRef = React8.useRef(null);
-  React8.useEffect(() => {
+  const [activeTab, setActiveTab] = React9.useState("chat");
+  const [explorerOpen, setExplorerOpen] = React9.useState(true);
+  const [inspectorOpen, setInspectorOpen] = React9.useState(false);
+  const [agentOpen, setAgentOpen] = React9.useState(true);
+  const [selectedContact, setSelectedContact] = React9.useState(null);
+  const [cmdOpen, setCmdOpen] = React9.useState(false);
+  const [cmdQuery, setCmdQuery] = React9.useState("");
+  const cmdInputRef = React9.useRef(null);
+  React9.useEffect(() => {
     const handleKeyDown = (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "k") {
         e.preventDefault();
@@ -1787,7 +1979,7 @@ var DiscoveryStudio = ({ gatewayStatus = "connected", activeProvider = "Meta Clo
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, []);
-  React8.useEffect(() => {
+  React9.useEffect(() => {
     if (cmdOpen && cmdInputRef.current) {
       cmdInputRef.current.focus();
     }
@@ -1795,6 +1987,7 @@ var DiscoveryStudio = ({ gatewayStatus = "connected", activeProvider = "Meta Clo
   const commands = [
     { id: "chat", label: "Abrir Chat en Vivo", icon: "fas fa-comments", action: () => setActiveTab("chat") },
     { id: "flow", label: "Abrir Flow Canvas", icon: "fas fa-project-diagram", action: () => setActiveTab("flow") },
+    { id: "architect", label: "Abrir Workflow Architect (IA)", icon: "fas fa-wand-magic-sparkles", action: () => setActiveTab("architect") },
     { id: "analytics", label: "Abrir Analytics", icon: "fas fa-chart-bar", action: () => setActiveTab("analytics") },
     { id: "explorer", label: explorerOpen ? "Cerrar Explorer" : "Abrir Explorer", icon: "fas fa-folder-tree", action: () => setExplorerOpen((p) => !p) },
     { id: "inspector", label: inspectorOpen ? "Cerrar Inspector" : "Abrir Inspector", icon: "fas fa-info-circle", action: () => setInspectorOpen((p) => !p) },
@@ -1952,6 +2145,7 @@ var DiscoveryStudio = ({ gatewayStatus = "connected", activeProvider = "Meta Clo
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0 flex flex-col overflow-hidden", children: [
         activeTab === "chat" && /* @__PURE__ */ jsxRuntime.jsx(ChatTab, { selectedContact }),
         activeTab === "flow" && /* @__PURE__ */ jsxRuntime.jsx(FlowCanvasTab, {}),
+        activeTab === "architect" && /* @__PURE__ */ jsxRuntime.jsx(RulesArchitectTab, {}),
         activeTab === "analytics" && /* @__PURE__ */ jsxRuntime.jsx(AnalyticsTab, {}),
         activeTab === "api_tester" && /* @__PURE__ */ jsxRuntime.jsx(ApiTesterTab, {}),
         activeTab === "templates" && /* @__PURE__ */ jsxRuntime.jsx(TemplateManagerTab, {})