base con front

2026-01-01 22:49:44 -03:00
parent 863449e21d
commit 5c67b27859
16 changed files with 1038 additions and 27 deletions
--- a/public/components/run-timeline.js
+++ b/public/components/run-timeline.js
@@ -0,0 +1,82 @@
+import { api } from "../lib/api.js";
+import { on } from "../lib/bus.js";
+
+class RunTimeline extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.chatId = null;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host { display:block; padding:12px; }
+        .box { background:#121823; border:1px solid #1e2a3a; border-radius:10px; padding:10px; margin-bottom:10px; }
+        .row { display:flex; gap:8px; align-items:center; }
+        .muted { color:#8aa0b5; font-size:12px; }
+        .title { font-weight:800; }
+        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">Conversación</div>
+        <div class="title" id="chat">—</div>
+        <div class="muted" id="meta">Seleccioná una conversación.</div>
+      </div>
+
+      <div class="box">
+        <div class="muted">Último run (raw)</div>
+        <pre id="run">—</pre>
+      </div>
+
+      <div class="box">
+        <div class="muted">Invariantes</div>
+        <pre id="inv">—</pre>
+      </div>
+    `;
+  }
+
+  connectedCallback() {
+    this._unsubSel = on("ui:selectedChat", async ({ chat_id }) => {
+      this.chatId = chat_id;
+      await this.loadLatest();
+    });
+
+    this._unsubRun = on("run:created", (run) => {
+      if (this.chatId && run.chat_id === this.chatId) {
+        this.show(run);
+      }
+    });
+  }
+
+  disconnectedCallback() {
+    this._unsubSel?.();
+    this._unsubRun?.();
+  }
+
+  async loadLatest() {
+    this.shadowRoot.getElementById("chat").textContent = this.chatId || "—";
+    this.shadowRoot.getElementById("meta").textContent = "Cargando…";
+
+    const data = await api.runs({ chat_id: this.chatId, limit: 1 });
+    const run = (data.items || [])[0];
+
+    if (!run) {
+      this.shadowRoot.getElementById("meta").textContent = "Sin runs aún.";
+      this.shadowRoot.getElementById("run").textContent = "—";
+      this.shadowRoot.getElementById("inv").textContent = "—";
+      return;
+    }
+    this.show(run);
+  }
+
+  show(run) {
+    this.shadowRoot.getElementById("chat").textContent = run.chat_id;
+    this.shadowRoot.getElementById("meta").textContent =
+      `run_id=${run.run_id} • ${run.latency_ms}ms • ${new Date(run.ts).toLocaleString()}`;
+
+    this.shadowRoot.getElementById("run").textContent = JSON.stringify(run, null, 2);
+    this.shadowRoot.getElementById("inv").textContent = JSON.stringify(run.invariants, null, 2);
+  }
+}
+
+customElements.define("run-timeline", RunTimeline);