base con front

public/components/ops-shell.js

@@ -0,0 +1,50 @@
+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);