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:
74
public/styles/theme.css
Normal file
74
public/styles/theme.css
Normal file
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* Tema global (CSS custom properties).
|
||||
*
|
||||
* Las custom properties heredan a través del shadow DOM, así que cualquier
|
||||
* componente puede usar `var(--bg)` sin re-declarar nada.
|
||||
*/
|
||||
:root {
|
||||
/* Surfaces */
|
||||
--bg: #0b0f14;
|
||||
--panel: #121823;
|
||||
--panel-2: #0f1520;
|
||||
--panel-3: #0a0e15;
|
||||
|
||||
/* Borders */
|
||||
--border: #1e2a3a;
|
||||
--border-hi: #253245;
|
||||
--border-active:#1f6feb;
|
||||
|
||||
/* Text */
|
||||
--text: #e7eef7;
|
||||
--text-muted: #8aa0b5;
|
||||
--text-dim: #d7e2ef;
|
||||
--text-on-acc: #ffffff;
|
||||
|
||||
/* Accents */
|
||||
--accent: #1f6feb;
|
||||
--accent-hover: #2570f0;
|
||||
--ok: #25D366;
|
||||
--warn: #F59E0B;
|
||||
--err: #e74c3c;
|
||||
|
||||
/* Bubbles */
|
||||
--user-bubble: #0f2a1a;
|
||||
--user-border: #1f6f43;
|
||||
--user-meta: #b9d9c6;
|
||||
--user-name: #cdebd8;
|
||||
|
||||
--bot-bubble: #111b2a;
|
||||
--bot-border: #2a3a55;
|
||||
--bot-meta: #a9bed6;
|
||||
--bot-name: #c7d8ee;
|
||||
|
||||
--err-bubble: #241214;
|
||||
--err-border: #e74c3c;
|
||||
--err-meta: #ffd0d4;
|
||||
--err-name: #ffd0d4;
|
||||
|
||||
/* Charts (alias para componentes que aún usan literales) */
|
||||
--chart-blue: #3b82f6;
|
||||
--chart-green: #25D366;
|
||||
--chart-purple: #8B5CF6;
|
||||
--chart-orange: #F59E0B;
|
||||
--chart-pink: #EC4899;
|
||||
--chart-gray: #9CA3AF;
|
||||
|
||||
/* Radii / shadows */
|
||||
--r-sm: 6px;
|
||||
--r-md: 8px;
|
||||
--r-lg: 10px;
|
||||
--r-xl: 14px;
|
||||
--shadow-bubble: 0 1px 0 rgba(0,0,0,.35);
|
||||
}
|
||||
|
||||
/* Compat: alias antiguo `--muted` que ya usa ops-shell.js. */
|
||||
:root {
|
||||
--muted: var(--text-muted);
|
||||
}
|
||||
|
||||
html, body {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
margin: 0;
|
||||
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
|
||||
}
|
||||
Reference in New Issue
Block a user