72 lines
2.4 KiB
JavaScript
72 lines
2.4 KiB
JavaScript
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);
|
|
|
|
|