83 lines
2.6 KiB
JavaScript
83 lines
2.6 KiB
JavaScript
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);
|