// 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 = 200, color = '#5ec4a8', state = 'active', strokeWidth = 2 }) { const canvasRef = useRef(null); const animRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); const dpr = window.devicePixelRatio || 1; function resize() { const rect = canvas.parentElement.getBoundingClientRect(); canvas.width = rect.width * dpr; canvas.height = height * dpr; canvas.style.width = rect.width + 'px'; canvas.style.height = height + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } resize(); window.addEventListener('resize', resize); const W = () => canvas.width / dpr; const mid = height / 2; const speed = state === 'firing' ? 2.4 : 1.5; let headX = 0; // Realistic EKG waveform: TP baseline → P wave → PR segment → QRS complex → ST segment → T wave → TP baseline function getY(x) { const period = 240; const p = ((x % period) + period) % period; const amp = height * 0.32; // TP segment (baseline) 0-60 if (p < 60) return mid; // P wave (small rounded bump) 60-90 if (p < 90) { const t = (p - 60) / 30; return mid - Math.sin(t * Math.PI) * (amp * 0.12); } // PR segment (flat) 90-108 if (p < 108) return mid; // Q wave (small dip) 108-114 if (p < 114) { const t = (p - 108) / 6; return mid + Math.sin(t * Math.PI) * (amp * 0.08); } // R wave (tall sharp spike up) 114-124 if (p < 119) { const t = (p - 114) / 5; return mid - t * amp * 0.92; } // R peak to S (fast drop through baseline) 119-127 if (p < 127) { const t = (p - 119) / 8; return mid - amp * 0.92 + t * (amp * 0.92 + amp * 0.22); } // S wave recovery 127-134 if (p < 134) { const t = (p - 127) / 7; return mid + amp * 0.22 * (1 - t); } // ST segment (slightly elevated) 134-160 if (p < 160) return mid - amp * 0.02; // T wave (broad rounded bump) 160-200 if (p < 200) { const t = (p - 160) / 40; return mid - Math.sin(t * Math.PI) * (amp * 0.18); } // TP segment (back to baseline) 200-240 return mid; } function draw() { const w = W(); ctx.clearRect(0, 0, w, height); // Head is drawn at 60% of width (not far right) const headScreenX = w * 0.6; const tailLen = w * 0.5; // Draw trace with fading tail behind the head for (let screenX = 0; screenX < w; screenX++) { const distFromHead = headScreenX - screenX; // Only draw behind the head (and a tiny bit ahead for the glow) if (distFromHead < -2) continue; if (distFromHead > tailLen) continue; const dataX = headX - distFromHead; const y = getY(dataX); const prevY = getY(dataX - 1); // Fade: 1.0 at head, 0.0 at tail end let alpha = 1 - (distFromHead / tailLen); if (alpha < 0) alpha = 0; alpha = alpha * alpha * 0.8; // ease-in curve if (alpha > 0.005) { ctx.beginPath(); ctx.moveTo(screenX - 1, prevY); ctx.lineTo(screenX, y); ctx.strokeStyle = color; ctx.globalAlpha = alpha; ctx.lineWidth = strokeWidth; ctx.lineCap = 'round'; ctx.stroke(); } } // Bright head dot const headY = getY(headX); ctx.globalAlpha = 1; ctx.beginPath(); ctx.arc(headScreenX, headY, 3.5, 0, Math.PI * 2); ctx.fillStyle = color; ctx.shadowColor = color; ctx.shadowBlur = 14; ctx.fill(); ctx.shadowBlur = 0; headX += speed; animRef.current = requestAnimationFrame(draw); } animRef.current = requestAnimationFrame(draw); return () => { cancelAnimationFrame(animRef.current); window.removeEventListener('resize', resize); }; }, [color, height, state, strokeWidth]); return (
); } // ───────────────────────────────────────────────────────────────────────────── // 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, });