// components.jsx — shared UI for Heartbeat Kit pages const { useEffect, useState, useRef, useMemo } = React; // ───────────────────────────────────────────────────────────────────────────── // Wordmark / logo function Logo({ size = 22 }) { return ( Heartbeat Kit ); } // ───────────────────────────────────────────────────────────────────────────── // Top nav function Nav({ current = 'home' }) { const link = (id, href, label) => ( {label} ); return (
Sign in Start free →
); } // ───────────────────────────────────────────────────────────────────────────── // Footer function Footer() { const col = (title, links) => (
{title}
{links.map(l => ( {l} ))}
); return ( ); } // ───────────────────────────────────────────────────────────────────────────── // Animated ECG pulse line — real oscilloscope-style decay trail. function PulseLine({ height = 220, color = '#00E4A8', state = 'active', strokeWidth = 1.6 }) { const W = 1600; const H = height; const mid = H / 2; const id = useMemo(() => 'ekg-' + Math.random().toString(36).slice(2, 9), []); const beats = useMemo(() => { const out = []; let x = 0; while (x < W + 200) { out.push({ x }); x += 220; } return out; }, []); const pathD = useMemo(() => { let d = `M -50 ${mid} `; beats.forEach(b => { const bx = b.x; d += `L ${bx - 60} ${mid} `; d += `Q ${bx - 50} ${mid - 6}, ${bx - 40} ${mid} `; d += `L ${bx - 22} ${mid} `; d += `L ${bx - 14} ${mid + 10} `; d += `L ${bx - 4} ${mid - 60} `; d += `L ${bx + 6} ${mid + 22} `; d += `L ${bx + 16} ${mid} `; d += `L ${bx + 30} ${mid} `; d += `Q ${bx + 50} ${mid - 12}, ${bx + 70} ${mid} `; d += `L ${bx + 150} ${mid} `; }); d += `L ${W + 200} ${mid}`; return d; }, [beats, mid]); const isFiring = state === 'firing'; const dur = isFiring ? 4.2 : 7.8; const trailLen = 520; // length of the visible trail const totalLen = 8000; // bigger than path return (
{/* Linear gradient: opacity fades from 0 (left) → 1 (right). The dashed trace starts on the right and travels left into the fade, so old beats decay. */} {/* Faint full trace (always there, very dim) */} {/* Trailing trace — long dash that scans across, fades via the mask */} {/* Glow head — short bright dash at the leading edge */}
); } // ───────────────────────────────────────────────────────────────────────────── // Terminal / streaming logs function Terminal({ lines, height = 360, title = 'agent.log' }) { const [visible, setVisible] = useState(0); const ref = useRef(null); useEffect(() => { if (visible >= lines.length) { // restart after a beat const t = setTimeout(() => setVisible(0), 4500); return () => clearTimeout(t); } const t = setTimeout(() => setVisible(v => v + 1), lines[visible]?.delay ?? 380); return () => clearTimeout(t); }, [visible, lines]); useEffect(() => { if (ref.current) ref.current.scrollTop = ref.current.scrollHeight; }, [visible]); return (
{title} live
{lines.slice(0, visible).map((ln, i) => (
{ln.t} {ln.tag && {ln.tag}} {ln.text}
))} {visible < lines.length && (
)}
); } // ───────────────────────────────────────────────────────────────────────────── // Code block with syntax-class spans function Code({ children, lang = 'ts', label }) { return (
{label && (
{label} {lang}
)} 
        {children}
); } // ───────────────────────────────────────────────────────────────────────────── // Live dashboard mock — animated table of heartbeats with status changes function DashboardMock() { const [rows, setRows] = useState(() => initialRows()); const [tick, setTick] = useState(0); useEffect(() => { const i = setInterval(() => setTick(t => t + 1), 1400); return () => clearInterval(i); }, []); useEffect(() => { setRows(prev => prev.map((r, i) => { // advance "last check-in" timer if (r.status === 'active') { let nx = r.lastSec + 1; if (nx >= r.interval + 4) { // simulate a missed check-in occasionally if (i === 3 && tick % 14 === 13) return { ...r, status: 'firing', lastSec: nx, firingFor: 0 }; nx = 0; } return { ...r, lastSec: nx }; } if (r.status === 'firing') { const f = r.firingFor + 1; if (f > 8) return { ...r, status: 'active', lastSec: 0, firingFor: 0 }; return { ...r, firingFor: f }; } return r; })); }, [tick]); return (
{/* App chrome */}
/ Fleet / production
WS connected
{/* Stat strip */}
r.status === 'active').length} accent="var(--cyan)" /> r.status === 'firing').length} accent="var(--coral)" /> r.status === 'paused').length} accent="var(--slate)" />
{/* Toolbar */}
All Active Firing Paused ⌘K search heartbeats
{/* Table */}
Heartbeat Mode Last check-in Next deadline Namespace State
{rows.map((r, i) => ( ))}
); } function Stat({ label, value, accent }) { return (
{label}
{value}
); } function Pill({ children, active }) { return ( {children} ); } function Row({ row }) { const stateLabel = row.status === 'active' ? 'OK' : row.status === 'firing' ? 'FIRING' : 'PAUSED'; const stateColor = row.status === 'active' ? 'var(--cyan)' : row.status === 'firing' ? 'var(--coral)' : 'var(--slate)'; return (
{row.name} {row.desc}
{row.mode} {row.status === 'firing' ? `${row.firingFor + row.lastSec - row.interval}s overdue` : `${row.lastSec}s ago`} {row.status === 'firing' ? '— escalating' : `in ${Math.max(0, row.interval - row.lastSec)}s`} {row.ns} {stateLabel}
); } function initialRows() { return [ { name: 'order-processor', desc: 'Stripe order webhook consumer', mode: 'recurring · 60s', interval: 60, lastSec: 12, ns: 'commerce', status: 'active', firingFor: 0 }, { name: 'nightly-backup', desc: 'Postgres → R2 snapshot', mode: 'scheduled · 03:00', interval: 90, lastSec: 41, ns: 'infra', status: 'active', firingFor: 0 }, { name: 'agent-research-7', desc: 'Long-running research agent', mode: 'recurring · 30s', interval: 30, lastSec: 18, ns: 'agents', status: 'active', firingFor: 0 }, { name: 'embed-worker', desc: 'Vector embedding pipeline', mode: 'recurring · 45s', interval: 45, lastSec: 50, ns: 'agents', status: 'firing', firingFor: 2 }, { name: 'deploy-canary', desc: 'Post-deploy health verification', mode: 'oneshot · 600s', interval: 80, lastSec: 30, ns: 'deploys', status: 'active', firingFor: 0 }, { name: 'iot-fleet-eu-west', desc: '2,418 devices reporting', mode: 'recurring · 120s', interval: 120, lastSec: 67, ns: 'iot', status: 'active', firingFor: 0 }, { name: 'lone-worker-tx', desc: 'Field crew check-in', mode: 'scheduled · hourly', interval: 100, lastSec: 22, ns: 'safety', status: 'paused', firingFor: 0 }, ]; } // ───────────────────────────────────────────────────────────────────────────── // Escalation flow visualizer — animated walk through steps function EscalationFlow() { const steps = [ { t: '00:00', label: 'Heartbeat misses deadline', ch: 'firing', icon: '!' }, { t: '00:00', label: 'Webhook → Slack #incidents', ch: 'webhook', icon: '→' }, { t: '05:00', label: 'Email → on-call rotation', ch: 'email', icon: '@' }, { t: '15:00', label: 'AI agent investigates', ch: 'agent', icon: 'AI' }, { t: '15:42', label: 'Agent acks — incident logged', ch: 'resolved', icon: '✓' }, ]; const [active, setActive] = useState(0); useEffect(() => { const i = setInterval(() => setActive(a => (a + 1) % (steps.length + 1)), 1800); return () => clearInterval(i); }, []); return (
Policy: critical-response step {Math.min(active, steps.length)} / {steps.length}
{/* vertical line */}
{steps.map((s, i) => { const reached = i < active; const current = i === active - 1; const colorMap = { firing: 'var(--coral)', webhook: '#9ec3ff', email: 'var(--rose)', agent: 'var(--cyan)', resolved: 'var(--cyan)', }; const c = colorMap[s.ch]; return (
{s.icon}
{s.label}
T+{s.t} · channel {s.ch}
{current && }
); })}
); } // Export to window Object.assign(window, { Logo, Nav, Footer, PulseLine, Terminal, Code, DashboardMock, EscalationFlow, });