51 lines
1.8 KiB
JavaScript
51 lines
1.8 KiB
JavaScript
import { on } from "../lib/bus.js";
|
|
|
|
class OpsShell extends HTMLElement {
|
|
constructor() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host { --bg:#0b0f14; --panel:#121823; --muted:#8aa0b5; --text:#e7eef7; --line:#1e2a3a; --blue:#1f6feb; }
|
|
* { box-sizing:border-box; font-family:system-ui,Segoe UI,Roboto,Arial; }
|
|
.app { height:100vh; background:var(--bg); color:var(--text); display:flex; flex-direction:column; }
|
|
header { display:flex; gap:12px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); }
|
|
header h1 { font-size:14px; margin:0; color:var(--muted); font-weight:700; letter-spacing:.4px; text-transform:uppercase; }
|
|
.spacer { flex:1; }
|
|
.status { font-size:12px; color:var(--muted); }
|
|
.layout { flex:1; display:grid; grid-template-columns:320px 1fr 360px; min-height:0; }
|
|
.col { border-right:1px solid var(--line); min-height:0; overflow:auto; }
|
|
.col:last-child { border-right:none; }
|
|
</style>
|
|
|
|
<div class="app">
|
|
<header>
|
|
<h1>Bot Ops Console</h1>
|
|
<div class="spacer"></div>
|
|
<div class="status" id="sseStatus">SSE: connecting…</div>
|
|
</header>
|
|
|
|
<div class="layout">
|
|
<div class="col"><conversation-list></conversation-list></div>
|
|
<div class="col"><run-timeline></run-timeline></div>
|
|
<div class="col"><chat-simulator></chat-simulator></div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this._unsub = on("sse:status", (s) => {
|
|
const el = this.shadowRoot.getElementById("sseStatus");
|
|
el.textContent = s.ok ? "SSE: connected" : "SSE: disconnected (retrying…)";
|
|
});
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this._unsub?.();
|
|
}
|
|
}
|
|
|
|
customElements.define("ops-shell", OpsShell);
|