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

2026-01-06 15:50:02 -03:00
parent dab52492b4
commit 8bb21b4edb
17 changed files with 1826 additions and 209 deletions
--- a/public/components/debug-panel.js
+++ b/public/components/debug-panel.js
@@ -0,0 +1,71 @@
+import { api } from "../lib/api.js";
+import { on } from "../lib/bus.js";
+
+class DebugPanel extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display:block; padding:12px; }
+        .box { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:10px; }
+        .muted { color:#8aa0b5; font-size:12px; }
+        .kv { display:grid; grid-template-columns:90px 1fr; gap:6px 10px; margin:10px 0 12px; }
+        .k { color:#8aa0b5; font-size:12px; letter-spacing:.4px; text-transform:uppercase; }
+        .v { font-size:13px; font-weight:800; color:#e7eef7; }
+        pre { white-space:pre-wrap; word-break:break-word; background:#0f1520; border:1px solid #253245; border-radius:10px; padding:10px; margin:0; font-size:12px; color:#d7e2ef; }
+      </style>
+
+      <div class="box">
+        <div class="muted">Detalle (click en cualquier burbuja)</div>
+        <div class="kv">
+          <div class="k">INTENT</div><div class="v" id="intent">—</div>
+          <div class="k">STATE</div><div class="v" id="state">—</div>
+        </div>
+        <pre id="out">—</pre>
+      </div>
+    `;
+  }
+
+  connectedCallback() {
+    const out = this.shadowRoot.getElementById("out");
+    const intentEl = this.shadowRoot.getElementById("intent");
+    const stateEl = this.shadowRoot.getElementById("state");
+    this._unsub = on("ui:selectedMessage", async ({ message }) => {
+      if (!message) {
+        out.textContent = "—";
+        intentEl.textContent = "—";
+        stateEl.textContent = "—";
+        return;
+      }
+      const base = { message };
+      if (message.run_id) {
+        try {
+          const run = await api.runById(message.run_id);
+          base.run = run;
+          const intent = run?.llm_output?.intent || "—";
+          const state = run?.llm_output?.next_state || "—";
+          intentEl.textContent = intent;
+          stateEl.textContent = state;
+        } catch (e) {
+          base.run_error = String(e?.message || e);
+          intentEl.textContent = "—";
+          stateEl.textContent = "—";
+        }
+      } else {
+        intentEl.textContent = "—";
+        stateEl.textContent = "—";
+      }
+      out.textContent = JSON.stringify(base, null, 2);
+    });
+  }
+
+  disconnectedCallback() {
+    this._unsub?.();
+  }
+}
+
+customElements.define("debug-panel", DebugPanel);
+
+