mejoras varias en frontend, separacion de intent y state, pick de articulos

public/components/run-timeline.js

@@ -1,5 +1,5 @@
 import { api } from "../lib/api.js";
-import { on } from "../lib/bus.js";
+import { emit, on } from "../lib/bus.js";
 
 class RunTimeline extends HTMLElement {
   constructor() {
@@ -7,7 +7,6 @@ class RunTimeline extends HTMLElement {
     this.attachShadow({ mode: "open" });
     this.chatId = null;
     this.items = [];
-    this.selectedDebug = null;
 
     this.shadowRoot.innerHTML = `
       <style>
@@ -22,6 +21,10 @@ class RunTimeline extends HTMLElement {
         .bubble.user { align-self:flex-end; background:#0f2a1a; border-color:#1f6f43; color:#e7eef7; }
         .bubble.bot { align-self:flex-start; background:#111b2a; border-color:#2a3a55; color:#e7eef7; }
         .bubble.err { align-self:flex-start; background:#241214; border-color:#e74c3c; color:#ffe9ea; cursor:pointer; }
+        .name { display:block; font-size:12px; font-weight:800; margin-bottom:4px; opacity:.95; }
+        .bubble.user .name { color:#cdebd8; text-align:right; }
+        .bubble.bot .name { color:#c7d8ee; }
+        .bubble.err .name { color:#ffd0d4; }
         .bubble .meta { display:block; margin-top:6px; font-size:11px; color:#8aa0b5; }
         .bubble.user .meta { color:#b9d9c6; opacity:.85; }
         .bubble.bot .meta { color:#a9bed6; opacity:.85; }
@@ -42,11 +45,6 @@ class RunTimeline extends HTMLElement {
         <div class="chatlog" id="log"></div>
       </div>
 
-      <div class="box">
-        <div class="muted">Debug (click en burbuja roja para ver detalles)</div>
-        <pre id="debug">—</pre>
-      </div>
-
     `;
   }
 
@@ -79,13 +77,20 @@ class RunTimeline extends HTMLElement {
     if (!this.chatId) {
       this.shadowRoot.getElementById("meta").textContent = "Seleccioná una conversación.";
       this.shadowRoot.getElementById("log").innerHTML = "";
-      this.shadowRoot.getElementById("debug").textContent = "—";
       return;
     }
 
-    const data = await api.messages({ chat_id: this.chatId, limit: 200 });
-    this.items = data.items || [];
-    this.render();
+    try {
+      const data = await api.messages({ chat_id: this.chatId, limit: 200 });
+      this.items = data.items || [];
+      this.render();
+    } catch (e) {
+      this.items = [];
+      this.shadowRoot.getElementById("meta").textContent = `Error cargando mensajes: ${String(
+        e?.message || e
+      )}`;
+      this.shadowRoot.getElementById("log").innerHTML = "";
+    }
   }
 
   isErrorMsg(m) {
@@ -93,11 +98,19 @@ class RunTimeline extends HTMLElement {
     return Boolean(m?.payload?.error) || txt.startsWith("[ERROR]") || txt.toLowerCase().includes("internal_error");
   }
 
+  displayNameFor(m) {
+    // Inbound: usar pushName si vino del webhook; fallback al "from" (teléfono) si existe.
+    const pushName = m?.payload?.raw?.meta?.pushName || m?.payload?.raw?.meta?.pushname || null;
+    const from = m?.payload?.raw?.from || null;
+    if (m?.direction === "in") return pushName || from || "test_lucas";
+    // Outbound: nombre del bot
+    return "Piaf";
+  }
+
   render() {
     const meta = this.shadowRoot.getElementById("meta");
     const count = this.shadowRoot.getElementById("count");
     const log = this.shadowRoot.getElementById("log");
-    const dbg = this.shadowRoot.getElementById("debug");
 
     meta.textContent = `Mostrando historial (últimos ${this.items.length}).`;
     count.textContent = this.items.length ? `${this.items.length} msgs` : "";
@@ -109,19 +122,23 @@ class RunTimeline extends HTMLElement {
       const isErr = this.isErrorMsg(m);
       const bubble = document.createElement("div");
       bubble.className = `bubble ${isErr ? "err" : who}`;
-      bubble.textContent = m.text || (isErr ? "Error" : "—");
+
+      const nameEl = document.createElement("span");
+      nameEl.className = "name";
+      nameEl.textContent = this.displayNameFor(m);
+      bubble.appendChild(nameEl);
+
+      const textEl = document.createElement("div");
+      textEl.textContent = m.text || (isErr ? "Error" : "—");
+      bubble.appendChild(textEl);
 
       const metaEl = document.createElement("span");
       metaEl.className = "meta";
       metaEl.textContent = `${new Date(m.ts).toLocaleString()} • ${m.provider} • ${m.message_id}`;
       bubble.appendChild(metaEl);
 
-      if (isErr) {
-        bubble.title = "Click para ver detalles (JSON)";
-        bubble.onclick = () => {
-          dbg.textContent = JSON.stringify(m, null, 2);
-        };
-      }
+      bubble.title = "Click para ver detalles (JSON)";
+      bubble.onclick = () => emit("ui:selectedMessage", { message: m });
 
       log.appendChild(bubble);
     }
@@ -129,7 +146,6 @@ class RunTimeline extends HTMLElement {
     // auto-scroll
     log.scrollTop = log.scrollHeight;
 
-    if (!this.items.length) dbg.textContent = "—";
   }
 }