Frontend: scroll fix, SSE reconnect, toast global, stale states, theming
5 bloques en una pasada:
A. Scroll fixes (síntoma reportado por el usuario):
- run-timeline: nuevo flag _userScrolledUp con detección por rAF en
bindScroll. Auto-scroll al final SOLO si el usuario está abajo
(umbral 150px) o si él mismo disparó un optimistic bubble. Cuando
el usuario manda mensaje, se resetea el flag y se scrollea.
- conversation-inspector: mismo patrón. ui:chatScroll respeta el
flag userScrolledUp del emisor para no perseguir al usuario que
lee arriba.
- .bubble: + min-width:0, overflow-wrap:anywhere para URLs/JSON
largos sin espacios.
- <pre>: + overflow-x:auto, max-width:100%.
- chat-simulator: textarea con resize:vertical, min/max heights
viewport-friendly. inputs-col con overflow-y:auto.
B. Stale state options:
- conversation-list y conversations-crud: dropdowns ahora muestran
IDLE / CART / SHIPPING / AWAITING_HUMAN. Quitados BROWSING,
BUILDING_ORDER, WAITING_ADDRESS, WAITING_PAYMENT, COMPLETED.
- main.js: simulated plan.next_state pasa a CART.
C. SSE resilience (lib/sse.js):
- connect() con backoff exponencial (1s → 30s).
- safeParse() helper: cada evento envuelve JSON.parse en try-catch
para que un payload malformado no rompa otros listeners.
- reset retryDelay al primer "hello" exitoso.
- ops-shell: indicador con dot (verde "En vivo" / naranja pulsante
"Reconectando…") en lugar de texto plano.
D. Toast service global (public/lib/toast.js):
- API simple: toast({ kind, text, ms }). Apila, animación slide-in,
auto-dismiss 4s. Click para cerrar.
- safeFetch en api.js: wrapper que dispara toast en network error y
non-OK. Migrados simEvolution + retryLast.
- chat-simulator usa toast en lugar de status text efímero.
E. Theming con CSS vars:
- public/styles/theme.css con paleta completa (panels, borders,
text, accents, bubbles, charts, radii, shadows). Linkeado desde
index.html.
- Migrados a var(--*) los 5 componentes más visibles:
run-timeline, chat-simulator, conversation-inspector,
conversation-list, home-dashboard. Custom properties heredan a
través del shadow DOM, así que los demás componentes pueden
migrar gradualmente sin cambios estructurales.
- home-dashboard ya tenía vars locales: ahora apuntan a las globales.
Backend: 192/192 tests pasando. Sin cambios de API.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -22,7 +22,11 @@ class OpsShell extends HTMLElement {
|
||||
.nav-btn:hover { border-color:var(--blue); color:var(--text); }
|
||||
.nav-btn.active { background:var(--blue); border-color:var(--blue); color:#fff; }
|
||||
.spacer { flex:1; }
|
||||
.status { font-size:12px; color:var(--muted); }
|
||||
.status { font-size:12px; color:var(--muted); display:flex; align-items:center; gap:6px; }
|
||||
.status .dot { width:8px; height:8px; border-radius:50%; background:#25D366; }
|
||||
.status.disconnected .dot { background:#F59E0B; animation: pulse 1.2s ease-in-out infinite; }
|
||||
.status.disconnected { color:#F59E0B; }
|
||||
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.35; } }
|
||||
|
||||
/* Notification bell */
|
||||
.notification-bell { position:relative; cursor:pointer; padding:8px; margin-right:12px; }
|
||||
@@ -72,7 +76,7 @@ class OpsShell extends HTMLElement {
|
||||
<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>
|
||||
<div class="status disconnected" id="sseStatus"><span class="dot"></span><span class="label">Conectando…</span></div>
|
||||
</header>
|
||||
|
||||
<div id="viewHome" class="view active">
|
||||
@@ -161,7 +165,10 @@ class OpsShell extends HTMLElement {
|
||||
connectedCallback() {
|
||||
this._unsub = on("sse:status", (s) => {
|
||||
const el = this.shadowRoot.getElementById("sseStatus");
|
||||
el.textContent = s.ok ? "SSE: connected" : "SSE: disconnected (retrying…)";
|
||||
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
|
||||
|
||||
Reference in New Issue
Block a user