6376739f48
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>
82 lines
2.3 KiB
JavaScript
82 lines
2.3 KiB
JavaScript
/**
|
|
* Toast service global. Sin dependencias.
|
|
* Inyecta un container en <body> y empuja toasts apilados.
|
|
*
|
|
* Uso:
|
|
* import { toast } from "./toast.js";
|
|
* toast({ kind: "error", text: "No se pudo guardar" });
|
|
* toast({ kind: "ok", text: "Listo", ms: 2000 });
|
|
*/
|
|
|
|
const KIND_COLORS = {
|
|
error: { bg: "#241214", border: "#e74c3c", text: "#ffe9ea" },
|
|
ok: { bg: "#0f2a1a", border: "#1f6f43", text: "#cdebd8" },
|
|
warn: { bg: "#2a1f0a", border: "#F59E0B", text: "#ffe6b0" },
|
|
info: { bg: "#0f2030", border: "#1f6feb", text: "#cce0ff" },
|
|
};
|
|
|
|
let _container = null;
|
|
|
|
function ensureContainer() {
|
|
if (_container) return _container;
|
|
_container = document.createElement("div");
|
|
_container.id = "toast-stack";
|
|
Object.assign(_container.style, {
|
|
position: "fixed",
|
|
right: "16px",
|
|
bottom: "16px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "8px",
|
|
zIndex: "9999",
|
|
pointerEvents: "none",
|
|
maxWidth: "420px",
|
|
});
|
|
document.body.appendChild(_container);
|
|
return _container;
|
|
}
|
|
|
|
export function toast({ kind = "error", text = "", ms = 4000 } = {}) {
|
|
if (!text) return;
|
|
const colors = KIND_COLORS[kind] || KIND_COLORS.info;
|
|
const el = document.createElement("div");
|
|
Object.assign(el.style, {
|
|
background: colors.bg,
|
|
border: `1px solid ${colors.border}`,
|
|
color: colors.text,
|
|
padding: "10px 12px",
|
|
borderRadius: "10px",
|
|
fontSize: "13px",
|
|
boxShadow: "0 4px 12px rgba(0,0,0,.4)",
|
|
pointerEvents: "auto",
|
|
cursor: "pointer",
|
|
transform: "translateX(120%)",
|
|
transition: "transform .25s ease, opacity .25s ease",
|
|
opacity: "0",
|
|
wordBreak: "break-word",
|
|
overflowWrap: "anywhere",
|
|
});
|
|
el.textContent = String(text);
|
|
|
|
const c = ensureContainer();
|
|
c.appendChild(el);
|
|
|
|
// Animar entrada
|
|
requestAnimationFrame(() => {
|
|
el.style.transform = "translateX(0)";
|
|
el.style.opacity = "1";
|
|
});
|
|
|
|
const dismiss = () => {
|
|
el.style.transform = "translateX(120%)";
|
|
el.style.opacity = "0";
|
|
setTimeout(() => el.remove(), 280);
|
|
};
|
|
el.addEventListener("click", dismiss);
|
|
setTimeout(dismiss, Math.max(800, ms));
|
|
}
|
|
|
|
export function toastError(text) { toast({ kind: "error", text }); }
|
|
export function toastOk(text) { toast({ kind: "ok", text, ms: 2500 }); }
|
|
export function toastWarn(text) { toast({ kind: "warn", text }); }
|