);
}
// ─── Header ────────────────────────────────────────────────────────────────
const THEME_STORAGE_KEY = 'dmu_theme_status';
function ThemeToggle() {
// Source of truth is the dataset attribute set by the inline bootstrap in index.html.
const [theme, setTheme] = useState(() =>
(typeof document !== 'undefined' && document.documentElement.dataset.theme === 'light') ? 'light' : 'dark'
);
function toggle() {
const next = theme === 'light' ? 'dark' : 'light';
// Brief class flip animates color/border/shadow swaps without bloating per-element CSS.
const root = document.documentElement;
root.classList.add('theme-transitioning');
root.dataset.theme = next;
try { localStorage.setItem(THEME_STORAGE_KEY, next); } catch (e) {}
setTheme(next);
window.setTimeout(() => root.classList.remove('theme-transitioning'), 260);
}
const isLight = theme === 'light';
return (
);
}
// Probes /api/me once on mount; renders an "Admin" link only if the response
// is 200 and {admin: true}. Failure modes (401, network error, slow) silently
// render nothing — the public page must keep working regardless of auth state.
// The fetch is fire-and-forget; we never block the header on it.
function AdminButton() {
const [isAdmin, setIsAdmin] = useState(false);
useEffect(() => {
let cancelled = false;
(async () => {
try {
const res = await fetch('/api/me', { credentials: 'same-origin' });
if (!res.ok || cancelled) return;
const data = await res.json();
if (!cancelled && data && data.admin === true) setIsAdmin(true);
} catch (_) { /* silent — public page must render regardless */ }
})();
return () => { cancelled = true; };
}, []);
if (!isAdmin) return null;
return Admin;
}
function Header({ now, monitorTick }) {
// Pulse the clock dot once whenever any monitor records a fresh check.
// Compare against a ref so we only fire on real ticks — not on mount, and
// not on unrelated re-renders from the seconds clock.
const [pulse, setPulse] = useState(false);
const prevTick = useRef(undefined);
useEffect(() => {
if (monitorTick == null) return;
const isFirst = prevTick.current === undefined;
if (!isFirst && prevTick.current === monitorTick) return;
prevTick.current = monitorTick;
if (isFirst) return; // first value is just "data loaded", not "fresh check"
setPulse(true);
const t = setTimeout(() => setPulse(false), 1700);
return () => clearTimeout(t);
}, [monitorTick]);
return (
{subs[overall]}
{incident.description}
}{u.text}
Live status and {win.sub} history across every service we operate.
Aggregate probe performance across public monitors. Matches the range you've picked above.
{m.description}
}{u.text}
Upcoming planned work. We post these at least 72 hours in advance.
Past 90 days.
Completed planned work, past 90 days.