modularizado de prompts

public/components/ops-shell.js

@@ -1,5 +1,6 @@
 import { emit, on } from "../lib/bus.js";
 import { navigateToView, navigateToItem } from "../lib/router.js";
+import { api } from "../lib/api.js";
 
 class OpsShell extends HTMLElement {
   constructor() {
@@ -7,6 +8,7 @@ class OpsShell extends HTMLElement {
     this.attachShadow({ mode: "open" });
     this._currentView = "chat";
     this._currentParams = {};
+    this._takeoverCount = 0;
 
     this.shadowRoot.innerHTML = `
       <style>
@@ -22,6 +24,18 @@ class OpsShell extends HTMLElement {
         .spacer { flex:1; }
         .status { font-size:12px; color:var(--muted); }
         
+        /* Notification bell */
+        .notification-bell { position:relative; cursor:pointer; padding:8px; margin-right:12px; }
+        .notification-bell svg { width:20px; height:20px; fill:var(--muted); transition:fill .15s; }
+        .notification-bell:hover svg { fill:var(--text); }
+        .notification-bell.has-pending svg { fill:#f39c12; }
+        .notification-bell .badge { 
+          position:absolute; top:2px; right:2px; 
+          background:#e74c3c; color:#fff; 
+          font-size:10px; padding:2px 6px; border-radius:10px;
+          font-weight:700; min-width:18px; text-align:center;
+        }
+        
         /* Layout para chat activo (2 columnas: burbujas + inspector) */
         .layout-chat { height:100%; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 310px; min-height:0; overflow:hidden; }
         .col { border-right:1px solid var(--line); min-height:0; overflow:hidden; }
@@ -48,9 +62,15 @@ class OpsShell extends HTMLElement {
             <a class="nav-btn" href="/crosssell" data-view="crosssell">Cross-sell</a>
             <a class="nav-btn" href="/cantidades" data-view="quantities">Cantidades</a>
             <a class="nav-btn" href="/pedidos" data-view="orders">Pedidos</a>
+            <a class="nav-btn" href="/config-prompts" data-view="prompts">Prompts</a>
+            <a class="nav-btn" href="/configuracion" data-view="settings">Config</a>
             <a class="nav-btn" href="/test" data-view="test">Test</a>
           </nav>
           <div class="spacer"></div>
+          <div class="notification-bell" id="notificationBell" title="Takeovers pendientes">
+            <svg viewBox="0 0 24 24"><path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/></svg>
+            <span class="badge" id="takeoverBadge" style="display:none;">0</span>
+          </div>
           <div class="status" id="sseStatus">SSE: connecting…</div>
         </header>
 
@@ -109,6 +129,24 @@ class OpsShell extends HTMLElement {
             <test-panel></test-panel>
           </div>
         </div>
+
+        <div id="viewPrompts" class="view">
+          <div class="layout-crud">
+            <prompts-crud></prompts-crud>
+          </div>
+        </div>
+
+        <div id="viewTakeovers" class="view">
+          <div class="layout-crud">
+            <takeovers-crud></takeovers-crud>
+          </div>
+        </div>
+
+        <div id="viewSettings" class="view">
+          <div class="layout-crud">
+            <settings-crud></settings-crud>
+          </div>
+        </div>
       </div>
     `;
   }
@@ -138,12 +176,51 @@ class OpsShell extends HTMLElement {
         this.setView(view, {}, { updateUrl: true });
       };
     }
+
+    // Notification bell click
+    const bell = this.shadowRoot.getElementById("notificationBell");
+    bell.onclick = () => {
+      this.setView("takeovers", {}, { updateUrl: true });
+    };
+
+    // Start polling for takeovers
+    this.pollTakeovers();
+    this._pollInterval = setInterval(() => this.pollTakeovers(), 30000);
   }
 
   disconnectedCallback() {
     this._unsub?.();
     this._unsubSwitch?.();
     this._unsubRouter?.();
+    if (this._pollInterval) clearInterval(this._pollInterval);
+  }
+
+  async pollTakeovers() {
+    try {
+      const data = await api.takeovers({ limit: 1 });
+      const count = data.pending_count || (data.items?.length || 0);
+      this._takeoverCount = count;
+      this.updateTakeoverBadge(count);
+    } catch (e) {
+      // Silently fail - don't break the UI
+      console.debug("Error polling takeovers:", e);
+    }
+  }
+
+  updateTakeoverBadge(count) {
+    const badge = this.shadowRoot.getElementById("takeoverBadge");
+    const bell = this.shadowRoot.getElementById("notificationBell");
+    
+    if (count > 0) {
+      badge.textContent = count > 99 ? "99+" : count;
+      badge.style.display = "inline";
+      bell.classList.add("has-pending");
+      bell.title = `${count} takeover(s) pendiente(s)`;
+    } else {
+      badge.style.display = "none";
+      bell.classList.remove("has-pending");
+      bell.title = "No hay takeovers pendientes";
+    }
   }
 
   setView(viewName, params = {}, { updateUrl = true } = {}) {