+
+ {visible.length > 1 && (
+
+ )}
+ {visible.map((a) => (
+
{a.type.replace(/_/g, ' ').toUpperCase()}
{a.message}
{a.timestamp ? new Date(a.timestamp).toLocaleTimeString() : ''}
+
))}
diff --git a/server/web/src/components/Toast/ToastStack.css b/server/web/src/components/Toast/ToastStack.css
new file mode 100644
index 0000000..53ff4fb
--- /dev/null
+++ b/server/web/src/components/Toast/ToastStack.css
@@ -0,0 +1,148 @@
+.toast-stack {
+ position: fixed;
+ top: 3.25rem;
+ right: 1rem;
+ z-index: 9990;
+ display: flex;
+ flex-direction: column;
+ align-items: flex-end;
+ gap: 0.35rem;
+ max-width: min(22rem, calc(100vw - 2rem));
+ pointer-events: none;
+}
+
+.toast-clear-all {
+ pointer-events: auto;
+ border: 1px solid rgba(0, 232, 245, 0.35);
+ background: rgba(0, 0, 0, 0.72);
+ color: var(--neon-cyan, #00e8f5);
+ font-family: var(--font-tech, monospace);
+ font-size: 0.62rem;
+ letter-spacing: 0.06em;
+ padding: 0.2rem 0.55rem;
+ border-radius: 4px;
+ cursor: pointer;
+}
+
+.toast-clear-all:hover {
+ background: rgba(0, 232, 245, 0.12);
+}
+
+.toast-list {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ display: flex;
+ flex-direction: column;
+ gap: 0.45rem;
+ max-height: min(40vh, 18rem);
+ overflow: hidden;
+ width: 100%;
+}
+
+.toast-item {
+ pointer-events: auto;
+ display: flex;
+ align-items: flex-start;
+ gap: 0.5rem;
+ padding: 0.55rem 0.65rem;
+ border-radius: 6px;
+ border: 1px solid rgba(0, 232, 245, 0.28);
+ background: rgba(8, 12, 18, 0.92);
+ box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
+ font-size: 0.82rem;
+ animation: toast-in 0.2s ease-out;
+}
+
+@keyframes toast-in {
+ from {
+ opacity: 0;
+ transform: translateX(0.75rem);
+ }
+ to {
+ opacity: 1;
+ transform: translateX(0);
+ }
+}
+
+.toast-info {
+ border-color: rgba(0, 232, 245, 0.35);
+}
+
+.toast-success {
+ border-color: rgba(57, 255, 20, 0.4);
+ background: rgba(8, 18, 10, 0.94);
+}
+
+.toast-warn {
+ border-color: rgba(255, 176, 32, 0.45);
+ background: rgba(18, 14, 8, 0.94);
+}
+
+.toast-error {
+ border-color: rgba(255, 60, 80, 0.5);
+ background: rgba(18, 8, 10, 0.94);
+}
+
+.toast-body {
+ flex: 1;
+ display: flex;
+ gap: 0.55rem;
+ min-width: 0;
+}
+
+.toast-level {
+ font-size: 0.58rem;
+ letter-spacing: 0.08em;
+ opacity: 0.8;
+ flex-shrink: 0;
+ padding-top: 0.1rem;
+}
+
+.toast-text {
+ display: flex;
+ flex-direction: column;
+ gap: 0.15rem;
+ min-width: 0;
+}
+
+.toast-message {
+ line-height: 1.35;
+ word-break: break-word;
+}
+
+.toast-detail {
+ font-size: 0.72rem;
+ opacity: 0.72;
+ word-break: break-word;
+}
+
+.toast-dismiss {
+ flex-shrink: 0;
+ width: 1.35rem;
+ height: 1.35rem;
+ border: none;
+ border-radius: 4px;
+ background: transparent;
+ color: var(--text-muted, #8899aa);
+ font-size: 1.1rem;
+ line-height: 1;
+ cursor: pointer;
+ padding: 0;
+}
+
+.toast-dismiss:hover {
+ color: var(--text-primary, #e8edf5);
+ background: rgba(255, 255, 255, 0.08);
+}
+
+@media (max-width: 768px) {
+ .toast-stack {
+ top: auto;
+ bottom: 4.5rem;
+ right: 0.65rem;
+ left: 0.65rem;
+ max-width: none;
+ align-items: stretch;
+ }
+}
diff --git a/server/web/src/components/Toast/ToastStack.test.tsx b/server/web/src/components/Toast/ToastStack.test.tsx
new file mode 100644
index 0000000..59a3e5b
--- /dev/null
+++ b/server/web/src/components/Toast/ToastStack.test.tsx
@@ -0,0 +1,51 @@
+/**
+ * @vitest-environment happy-dom
+ */
+import { describe, it, expect, afterEach } from 'vitest';
+import { render, screen, fireEvent, cleanup } from '@testing-library/react';
+import { ToastProvider, useToast } from '../../context/ToastContext';
+import ToastStack from './ToastStack';
+
+function Seed({ count }: { count: number }) {
+ const { showToast } = useToast();
+ return (
+
+ );
+}
+
+describe('ToastStack', () => {
+ afterEach(() => cleanup());
+
+ it('renders dismiss buttons on each toast', () => {
+ render(
+
+
+
+ ,
+ );
+ fireEvent.click(screen.getByText('seed'));
+ expect(screen.getByText('msg 0')).toBeInTheDocument();
+ fireEvent.click(screen.getByLabelText('Dismiss notification'));
+ expect(screen.queryByTestId('toast-stack')).toBeNull();
+ });
+
+ it('shows clear all when multiple toasts are visible', () => {
+ render(
+
+
+
+ ,
+ );
+ fireEvent.click(screen.getByText('seed'));
+ expect(screen.getByLabelText('Clear all notifications')).toBeInTheDocument();
+ fireEvent.click(screen.getByLabelText('Clear all notifications'));
+ expect(screen.queryByTestId('toast-stack')).toBeNull();
+ });
+});
diff --git a/server/web/src/components/Toast/ToastStack.tsx b/server/web/src/components/Toast/ToastStack.tsx
new file mode 100644
index 0000000..80ad6a2
--- /dev/null
+++ b/server/web/src/components/Toast/ToastStack.tsx
@@ -0,0 +1,52 @@
+import { useToast } from '../../context/ToastContext';
+import type { ToastLevel } from '../../context/ToastContext';
+import './ToastStack.css';
+
+const LEVEL_LABEL: Record
= {
+ info: 'INFO',
+ success: 'OK',
+ warn: 'WARN',
+ error: 'ERROR',
+};
+
+export default function ToastStack() {
+ const { toasts, dismissToast, clearAllToasts } = useToast();
+
+ if (toasts.length === 0) return null;
+
+ return (
+
+ {toasts.length > 1 && (
+
+ )}
+
+ {toasts.map((toast) => (
+ -
+
+
{LEVEL_LABEL[toast.level]}
+
+ {toast.message}
+ {toast.detail ? {toast.detail} : null}
+
+
+ ))}
+
+
+ {toasts.length}
+
+
+
+
+
+ );
+}
+
+describe('ToastContext', () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ });
+
+ afterEach(() => {
+ cleanup();
+ vi.useRealTimers();
+ });
+
+ it('uses shorter default durations for info than error', () => {
+ expect(TOAST_DURATION_MS.info).toBeLessThan(TOAST_DURATION_MS.error);
+ expect(TOAST_DURATION_MS.info).toBeGreaterThanOrEqual(4000);
+ expect(TOAST_DURATION_MS.info).toBeLessThanOrEqual(6000);
+ });
+
+ it('auto-dismisses info toasts and keeps errors longer', () => {
+ render(
+
+
+ ,
+ );
+ fireEvent.click(screen.getByText('info'));
+ fireEvent.click(screen.getByText('error'));
+ expect(screen.getByTestId('count').textContent).toBe('2');
+
+ act(() => {
+ vi.advanceTimersByTime(TOAST_DURATION_MS.info);
+ });
+ expect(screen.getByTestId('count').textContent).toBe('1');
+
+ act(() => {
+ vi.advanceTimersByTime(TOAST_DURATION_MS.error - TOAST_DURATION_MS.info);
+ });
+ expect(screen.getByTestId('count').textContent).toBe('0');
+ });
+
+ it('caps visible toasts', () => {
+ function Spam() {
+ const { showToast, toasts } = useToast();
+ return (
+
+ );
+ }
+ render(
+
+
+ ,
+ );
+ fireEvent.click(screen.getByText(/spam/));
+ expect(screen.getByText(/spam/)).toHaveTextContent(String(MAX_VISIBLE_TOASTS));
+ });
+
+ it('dismisses and clears all manually', () => {
+ render(
+
+
+ ,
+ );
+ fireEvent.click(screen.getByText('info'));
+ fireEvent.click(screen.getByText('error'));
+ fireEvent.click(screen.getByText('dismiss'));
+ expect(screen.getByTestId('count').textContent).toBe('1');
+ fireEvent.click(screen.getByText('clear'));
+ expect(screen.getByTestId('count').textContent).toBe('0');
+ });
+});
diff --git a/server/web/src/context/ToastContext.tsx b/server/web/src/context/ToastContext.tsx
new file mode 100644
index 0000000..5dbb9ef
--- /dev/null
+++ b/server/web/src/context/ToastContext.tsx
@@ -0,0 +1,123 @@
+import React, {
+ createContext,
+ useCallback,
+ useContext,
+ useEffect,
+ useMemo,
+ useRef,
+ useState,
+} from 'react';
+
+export type ToastLevel = 'info' | 'success' | 'warn' | 'error';
+
+export interface Toast {
+ id: string;
+ level: ToastLevel;
+ message: string;
+ detail?: string;
+ createdAt: number;
+ durationMs: number;
+}
+
+export interface ShowToastOptions {
+ level?: ToastLevel;
+ detail?: string;
+ /** Override default auto-dismiss; 0 = stay until dismissed */
+ durationMs?: number;
+}
+
+export const TOAST_DURATION_MS: Record = {
+ info: 5000,
+ success: 5000,
+ warn: 6000,
+ error: 10000,
+};
+
+export const MAX_VISIBLE_TOASTS = 5;
+
+let toastCounter = 0;
+function nextToastId(): string {
+ toastCounter += 1;
+ return `toast-${toastCounter}`;
+}
+
+export interface ToastContextValue {
+ toasts: Toast[];
+ showToast: (message: string, options?: ShowToastOptions) => string;
+ dismissToast: (id: string) => void;
+ clearAllToasts: () => void;
+}
+
+const ToastContext = createContext({
+ toasts: [],
+ showToast: () => '',
+ dismissToast: () => {},
+ clearAllToasts: () => {},
+});
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+ const [toasts, setToasts] = useState([]);
+ const timersRef = useRef>>(new Map());
+
+ const dismissToast = useCallback((id: string) => {
+ const timer = timersRef.current.get(id);
+ if (timer) {
+ clearTimeout(timer);
+ timersRef.current.delete(id);
+ }
+ setToasts((prev) => prev.filter((t) => t.id !== id));
+ }, []);
+
+ const clearAllToasts = useCallback(() => {
+ for (const timer of timersRef.current.values()) clearTimeout(timer);
+ timersRef.current.clear();
+ setToasts([]);
+ }, []);
+
+ const scheduleDismiss = useCallback(
+ (toast: Toast) => {
+ if (toast.durationMs <= 0) return;
+ const timer = setTimeout(() => dismissToast(toast.id), toast.durationMs);
+ timersRef.current.set(toast.id, timer);
+ },
+ [dismissToast],
+ );
+
+ const showToast = useCallback(
+ (message: string, options?: ShowToastOptions) => {
+ const level = options?.level ?? 'info';
+ const durationMs = options?.durationMs ?? TOAST_DURATION_MS[level];
+ const toast: Toast = {
+ id: nextToastId(),
+ level,
+ message,
+ detail: options?.detail,
+ createdAt: Date.now(),
+ durationMs,
+ };
+ setToasts((prev) => [toast, ...prev].slice(0, MAX_VISIBLE_TOASTS));
+ scheduleDismiss(toast);
+ return toast.id;
+ },
+ [scheduleDismiss],
+ );
+
+ useEffect(() => {
+ const timers = timersRef.current;
+ return () => {
+ for (const timer of timers.values()) clearTimeout(timer);
+ timers.clear();
+ };
+ }, []);
+
+ const value = useMemo(
+ () => ({ toasts, showToast, dismissToast, clearAllToasts }),
+ [toasts, showToast, dismissToast, clearAllToasts],
+ );
+
+ return {children};
+}
+
+export function useToast(): ToastContextValue {
+ return useContext(ToastContext);
+}
diff --git a/server/web/src/pages/SettingsPage.tsx b/server/web/src/pages/SettingsPage.tsx
index 8dacb45..885fee0 100644
--- a/server/web/src/pages/SettingsPage.tsx
+++ b/server/web/src/pages/SettingsPage.tsx
@@ -302,7 +302,7 @@ export default function SettingsPage() {
setAlertTestMsg('Test failed: ' + (e instanceof Error ? e.message : String(e)));
} finally {
setTestingAlerts(false);
- setTimeout(() => setAlertTestMsg(''), 12000);
+ setTimeout(() => setAlertTestMsg(''), 6000);
}
};