feat: container monitoring frontend UI (PR-2)

- Custom ToastContext + ToastProvider + ToastContainer (~170 lines, no deps)
- useEvents() SSE hook with exponential backoff reconnect
- EventProvider context for app-wide SSE stream sharing
- Event-to-toast bridge with severity mapping and deduplication
- Real-time status badge updates replacing 30s polling
- EventSource auth probe (401/429 detection via fetch)
- 14 frontend tests (useEvents + toast-rules)

Quality gates: vitest 14 passed, tsc clean, eslint clean
This commit is contained in:
2026-05-28 23:43:00 +02:00
parent 4a7f24348c
commit f13a63dc2f
16 changed files with 1979 additions and 1368 deletions
+34
View File
@@ -3381,6 +3381,17 @@ a.nav-item,
color: var(--danger, #dc2626);
}
.status-badge.starting,
.status-badge.probing {
background: var(--info-light, #dbeafe);
color: var(--info, #2563eb);
}
.status-badge.unhealthy {
background: var(--warning-light, #fef3c7);
color: var(--warning, #d97706);
}
/* ============================================
Mobile Terminal Styles
============================================ */
@@ -4452,3 +4463,26 @@ a:active,
gap: 0.5rem;
margin-top: 0.25rem;
}
/* Toast animations */
@keyframes toastSlideIn {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes toastFadeOut {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(100%);
}
}