0bf26f8eb5
- theme.css reescrito: paleta light (sky/emerald accents, slate neutrals), tokens de spacing/typography/radii/shadows, @font-face Inter + JetBrains Mono variable woff2 self-hosted. - ops-shell: header blanco con nav active=accent-soft + status pill pastel. - run-timeline: bubbles emerald-100 (user) / blue-100 (bot) sobre blanco. - home-dashboard: helpers cssVar + withAlpha, 6 charts coordinados a paleta pastel (--chart-blue/green/purple/orange/pink/gray). - 8 CRUDs (users, products, orders, conversations, aliases, recommendations, quantities, takeovers, settings, debug) migrados de hex hardcoded oscuros a var(--*). - modal.js + toast.js refactor a vars con fallbacks; modal blanco con shadow-lg y soft icon backgrounds. - test-panel: aliases :host apuntan a globals en vez de override dark. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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:var(--panel); border:1px solid var(--border); border-radius:10px; padding:10px; }
|
|
.muted { color:var(--text-muted); font-size:12px; }
|
|
.kv { display:grid; grid-template-columns:90px 1fr; gap:6px 10px; margin:10px 0 12px; }
|
|
.k { color:var(--text-muted); font-size:12px; letter-spacing:.4px; text-transform:uppercase; }
|
|
.v { font-size:13px; font-weight:800; color:var(--text); }
|
|
pre { white-space:pre-wrap; word-break:break-word; background:var(--panel-2); border:1px solid var(--border-hi); border-radius:10px; padding:10px; margin:0; font-size:12px; color:var(--text-dim); }
|
|
</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);
|
|
|
|
|