'use client'; /** * Mission Control rail shell — frames the four routed sections (Overview, * Network, Incidents, Performance). Slim 86px icon rail that hover-expands to * 268px as an overlay; translucent header floating over an ambient drifting * gradient. The standalone /executive/wall route is NOT in this group, so it * renders chrome-free. */ import { useEffect, useState } from 'react'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { LayoutGrid, Network, AlertTriangle, Gauge, Sun, Moon, RefreshCw, Bell, Download, LogOut, } from 'lucide-react'; import { SentinelDataProvider, useSentinelContext } from '../_components/SentinelDataContext'; import { useTheme } from '../_components/ThemeProvider'; import { useReducedMotion } from '../_components/useReducedMotion'; import { PulseGlyph } from '../_components/PulseGlyph'; import { LiveDot, Slash } from '../_components/primitives'; import { useExecutiveExport } from '../_components/useExecutiveExport'; const NAV = [ { href: '/executive/overview', label: 'Overview', icon: LayoutGrid }, { href: '/executive/network', label: 'Network status', icon: Network }, { href: '/executive/incidents', label: 'Incidents', icon: AlertTriangle, badgeKey: 'incidents' as const }, { href: '/executive/performance', label: 'Performance', icon: Gauge }, ]; const RAIL_COLLAPSED = 86; const RAIL_EXPANDED = 268; export default function RailLayout({ children }: { children: React.ReactNode }) { return ( {children} ); } function Shell({ children }: { children: React.ReactNode }) { const pathname = usePathname(); const reduced = useReducedMotion(); const { mode, toggle } = useTheme(); const { data, loading, error, refreshing, refresh } = useSentinelContext(); const { exportPdf, exporting } = useExecutiveExport(); const [hover, setHover] = useState(false); const active = NAV.find((n) => pathname.startsWith(n.href)) ?? NAV[0]; const incidents = data?.overview.activeIncidents ?? 0; // "degraded" = we have no data to show AND the last load failed. Only then // do we replace the blank
with an error panel and drop the green // "operational" chrome. A refresh blip that still has stale data keeps // rendering the board (the 30s auto-refresh clears `error` on recovery). const degraded = !!error && !data; return (
{/* ambient drift backdrop */} {/* RAIL */} {/* MAIN */}
{/* header */}

{active.label}

{degraded ? 'Live data unavailable' : incidents > 0 ? `${incidents} active incident${incidents > 1 ? 's' : ''}` : 'All systems operational'}
a.status === 'down').length ?? 0}>
{degraded ? : !data && loading ? : children}
); } function RailButton({ onClick, icon, label, hover, danger }: { onClick: () => void; icon: React.ReactNode; label: string; hover: boolean; danger?: boolean }) { return ( ); } function IconButton({ children, title, onClick, badge = 0 }: { children: React.ReactNode; title: string; onClick?: () => void; badge?: number }) { return ( ); } function LivePill({ degraded }: { degraded?: boolean }) { const c = degraded ? 'var(--crit)' : 'var(--ok)'; const fg = degraded ? 'var(--crit-fg)' : 'var(--ok-fg)'; return ( {degraded ? 'OFFLINE' : 'LIVE'} ); } /** * Fills the executive
when there is no data to show — either the first * load is still in flight ("loading") or the last load failed ("error"). This * replaces the previous silent blank viewport that read as a total outage. */ function ExecStatePanel({ kind, message, onRetry, refreshing }: { kind: 'error' | 'loading'; message?: string | null; onRetry?: () => void; refreshing?: boolean }) { return (
{kind === 'loading' ? ( <>
Loading live metrics…
) : ( <>
Live metrics unavailable
The executive report didn't load{message ? ` (${message})` : ''}. It retries automatically every 30s.
{onRetry && ( )} )}
); } function LiveClock() { const [now, setNow] = useState(''); useEffect(() => { const fmt = () => new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit', timeZone: 'UTC' }); // Client-only clock: starts '' on the server to avoid a hydration // mismatch, then sets the real time on mount. Intentional. // eslint-disable-next-line react-hooks/set-state-in-effect setNow(fmt()); const id = setInterval(() => setNow(fmt()), 1000); return () => clearInterval(id); }, []); return ( {now} UTC ); } function AmbientBackdrop({ reduced }: { reduced: boolean }) { const blob: React.CSSProperties = { position: 'absolute', borderRadius: '50%', filter: 'blur(120px)', opacity: 0.5, animation: reduced ? 'none' : 'nocDrift 28s ease-in-out infinite', }; return (
); }