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>
302 lines
11 KiB
JavaScript
302 lines
11 KiB
JavaScript
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() {
|
|
super();
|
|
this.attachShadow({ mode: "open" });
|
|
this._currentView = "chat";
|
|
this._currentParams = {};
|
|
this._takeoverCount = 0;
|
|
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
* { box-sizing:border-box; }
|
|
:host { font-family: var(--font-sans); }
|
|
.app { height:100vh; background:var(--bg); color:var(--text); display:flex; flex-direction:column; }
|
|
header {
|
|
display:flex; gap:var(--space-3); align-items:center;
|
|
padding: var(--space-3) var(--space-6);
|
|
background: var(--panel);
|
|
border-bottom: 1px solid var(--border);
|
|
flex-wrap:wrap;
|
|
}
|
|
header h1 {
|
|
font-size: var(--fs-md);
|
|
margin:0; color: var(--text);
|
|
font-weight: var(--fw-semibold);
|
|
letter-spacing:-0.01em;
|
|
}
|
|
.nav { display:flex; gap: var(--space-1); margin-left: var(--space-6); flex-wrap:wrap; }
|
|
.nav-btn {
|
|
position:relative;
|
|
background:transparent; border:none;
|
|
color: var(--text-muted);
|
|
padding: 8px 12px;
|
|
font: var(--fw-medium) var(--fs-sm)/1 var(--font-sans);
|
|
cursor:pointer; transition:color .15s;
|
|
text-decoration:none;
|
|
border-radius: var(--r-sm);
|
|
}
|
|
.nav-btn:hover { color: var(--text); background: var(--panel-2); }
|
|
.nav-btn.active { color: var(--accent); background: var(--accent-soft); }
|
|
.nav-btn:focus-visible { outline:none; box-shadow: var(--focus-ring); }
|
|
.spacer { flex:1; }
|
|
.status {
|
|
font-size: var(--fs-sm); color: var(--ok);
|
|
display:flex; align-items:center; gap: 6px;
|
|
padding: 4px 10px;
|
|
background: var(--ok-soft);
|
|
border-radius: 999px;
|
|
}
|
|
.status .dot { width:7px; height:7px; border-radius:50%; background: var(--ok); }
|
|
.status.disconnected { color: var(--warn); background: var(--warn-soft); }
|
|
.status.disconnected .dot { background: var(--warn); animation: pulse 1.2s ease-in-out infinite; }
|
|
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }
|
|
|
|
/* Notification bell */
|
|
.notification-bell { position:relative; cursor:pointer; padding: 8px; border-radius: var(--r-sm); transition: background .15s; }
|
|
.notification-bell:hover { background: var(--panel-2); }
|
|
.notification-bell svg { width:18px; height:18px; fill: var(--text-muted); transition:fill .15s; display:block; }
|
|
.notification-bell:hover svg { fill: var(--text); }
|
|
.notification-bell.has-pending svg { fill: var(--warn); }
|
|
.notification-bell .badge {
|
|
position:absolute; top:2px; right:2px;
|
|
background: var(--err); color:#fff;
|
|
font: var(--fw-bold) 10px/1 var(--font-sans);
|
|
padding: 3px 6px; border-radius:10px;
|
|
min-width:18px; text-align:center;
|
|
box-shadow: 0 0 0 2px var(--panel);
|
|
}
|
|
|
|
/* 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(--border); min-height:0; overflow:hidden; }
|
|
.chatTop { grid-column:1; grid-row:1; border-bottom:1px solid var(--border); }
|
|
.chatBottom { grid-column:1 / 3; grid-row:2; overflow:hidden; border-top:1px solid var(--border); }
|
|
.inspectorTop { grid-column:2; grid-row:1; border-right:none; }
|
|
|
|
/* Layout para CRUDs */
|
|
.layout-crud { height:100%; display:block; min-height:0; overflow:hidden; }
|
|
|
|
.view { display:none; flex:1; min-height:0; overflow:hidden; }
|
|
.view.active { display:flex; flex-direction:column; }
|
|
</style>
|
|
|
|
<div class="app">
|
|
<header>
|
|
<h1>Bot Ops Console</h1>
|
|
<nav class="nav">
|
|
<a class="nav-btn active" href="/home" data-view="home">Home</a>
|
|
<a class="nav-btn" href="/chat" data-view="chat">Chat</a>
|
|
<a class="nav-btn" href="/conversaciones" data-view="conversations">Conversaciones</a>
|
|
<a class="nav-btn" href="/usuarios" data-view="users">Usuarios</a>
|
|
<a class="nav-btn" href="/productos" data-view="products">Productos</a>
|
|
<a class="nav-btn" href="/equivalencias" data-view="aliases">Equivalencias</a>
|
|
<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="/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 disconnected" id="sseStatus"><span class="dot"></span><span class="label">Conectando…</span></div>
|
|
</header>
|
|
|
|
<div id="viewHome" class="view active">
|
|
<div class="layout-crud">
|
|
<home-dashboard></home-dashboard>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewChat" class="view">
|
|
<div class="layout-chat">
|
|
<div class="col chatTop"><run-timeline></run-timeline></div>
|
|
<div class="col inspectorTop"><conversation-inspector></conversation-inspector></div>
|
|
<div class="col chatBottom"><chat-simulator></chat-simulator></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewConversations" class="view">
|
|
<div class="layout-crud">
|
|
<conversations-crud></conversations-crud>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewUsers" class="view">
|
|
<div class="layout-crud">
|
|
<users-crud></users-crud>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewProducts" class="view">
|
|
<div class="layout-crud">
|
|
<products-crud></products-crud>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewAliases" class="view">
|
|
<div class="layout-crud">
|
|
<aliases-crud></aliases-crud>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewCrosssell" class="view">
|
|
<div class="layout-crud">
|
|
<recommendations-crud rule-type="crosssell"></recommendations-crud>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewQuantities" class="view">
|
|
<div class="layout-crud">
|
|
<quantities-crud></quantities-crud>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewOrders" class="view">
|
|
<div class="layout-crud">
|
|
<orders-crud></orders-crud>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewTest" class="view">
|
|
<div class="layout-crud">
|
|
<test-panel></test-panel>
|
|
</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>
|
|
`;
|
|
}
|
|
|
|
connectedCallback() {
|
|
this._unsub = on("sse:status", (s) => {
|
|
const el = this.shadowRoot.getElementById("sseStatus");
|
|
if (!el) return;
|
|
el.classList.toggle("disconnected", !s.ok);
|
|
const label = el.querySelector(".label");
|
|
if (label) label.textContent = s.ok ? "En vivo" : "Reconectando…";
|
|
});
|
|
|
|
// Listen for view switch requests from other components
|
|
this._unsubSwitch = on("ui:switchView", ({ view }) => {
|
|
if (view) this.setView(view, {}, { updateUrl: true });
|
|
});
|
|
|
|
// Listen for router changes (popstate, initial load)
|
|
this._unsubRouter = on("router:change", ({ view, params }) => {
|
|
this.setView(view, params, { updateUrl: false });
|
|
});
|
|
|
|
// Navigation - intercept clicks on nav links
|
|
const navBtns = this.shadowRoot.querySelectorAll(".nav-btn");
|
|
for (const btn of navBtns) {
|
|
btn.onclick = (e) => {
|
|
e.preventDefault();
|
|
const view = btn.dataset.view;
|
|
this.setView(view, {}, { updateUrl: true });
|
|
};
|
|
}
|
|
|
|
// Notification bell click
|
|
const bell = this.shadowRoot.getElementById("notificationBell");
|
|
bell.onclick = () => {
|
|
this.setView("takeovers", {}, { updateUrl: true });
|
|
};
|
|
|
|
// Listen for new takeovers via SSE - update badge immediately
|
|
this._unsubTakeover = on("takeover:created", () => {
|
|
this._takeoverCount++;
|
|
this.updateTakeoverBadge(this._takeoverCount);
|
|
});
|
|
|
|
// Start polling for takeovers
|
|
this.pollTakeovers();
|
|
this._pollInterval = setInterval(() => this.pollTakeovers(), 30000);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
this._unsub?.();
|
|
this._unsubSwitch?.();
|
|
this._unsubRouter?.();
|
|
this._unsubTakeover?.();
|
|
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 } = {}) {
|
|
this._currentView = viewName;
|
|
this._currentParams = params;
|
|
|
|
// Update nav buttons
|
|
const navBtns = this.shadowRoot.querySelectorAll(".nav-btn");
|
|
for (const btn of navBtns) {
|
|
btn.classList.toggle("active", btn.dataset.view === viewName);
|
|
}
|
|
|
|
// Update views
|
|
const views = this.shadowRoot.querySelectorAll(".view");
|
|
for (const view of views) {
|
|
const isActive = view.id === `view${viewName.charAt(0).toUpperCase() + viewName.slice(1)}`;
|
|
view.classList.toggle("active", isActive);
|
|
}
|
|
|
|
// Update URL if requested
|
|
if (updateUrl) {
|
|
if (params.id) {
|
|
navigateToItem(viewName, params.id);
|
|
} else {
|
|
navigateToView(viewName);
|
|
}
|
|
}
|
|
|
|
// Emit event for components that need to know about route params
|
|
emit("router:viewChanged", { view: viewName, params });
|
|
}
|
|
}
|
|
|
|
customElements.define("ops-shell", OpsShell);
|