// relax.host — Status page // Plain inline React, mounted in relax.host - Status.html. // Heavy use of glassmorphic cards, the Daylight palette, and a custom // status color set (sage / gold / peach-dark / coral-deep / lavender) // layered on top of the brand's existing tokens. const { useState, useMemo } = React; // ────────────────────────────────────────────────────────────────────── // DATA — realistic 90-day uptime synthesis. Each service has a base // uptime profile and a few historical incident dips so the bar chart // tells a real story instead of being flat-green. // ────────────────────────────────────────────────────────────────────── function makeUptime(profile) { // profile: { incidents: [{day, severity}], baseSeverity? } const arr = []; for (let i = 0; i < 90; i++) { const inc = profile.incidents.find((x) => x.day === i); arr.push(inc ? inc.severity : (profile.base || "ok")); } return arr; } const SERVICES = [ { id: "core", name: "Core platform", services: [ { id: "dashboard", name: "Host dashboard", icon: "grid", desc: "app.relax.host", uptime: makeUptime({ incidents: [{ day: 12, severity: "partial" }, { day: 47, severity: "degraded" }] }), uptimePct: "99.98%", state: "ok" }, { id: "api", name: "Public API", icon: "code", desc: "api.relax.host", uptime: makeUptime({ incidents: [{ day: 32, severity: "degraded" }] }), uptimePct: "99.99%", state: "ok" }, { id: "agent", name: "AI agent · drafting", icon: "spark", desc: "the autonomous worker", uptime: makeUptime({ incidents: [{ day: 18, severity: "partial" }, { day: 55, severity: "partial" }, { day: 84, severity: "degraded" }] }), uptimePct: "99.92%", state: "degraded" }, { id: "auth", name: "Authentication", icon: "lock", desc: "OAuth + sessions", uptime: makeUptime({ incidents: [] }), uptimePct: "100.00%", state: "ok" }, ], }, { id: "ota", name: "Channel integrations", services: [ { id: "airbnb", name: "Airbnb sync", icon: "house", desc: "reservations · messages · pricing", uptime: makeUptime({ incidents: [{ day: 4, severity: "major" }, { day: 5, severity: "major" }, { day: 6, severity: "partial" }, { day: 22, severity: "degraded" }, { day: 71, severity: "degraded" }] }), uptimePct: "99.78%", state: "ok" }, { id: "booking", name: "Booking.com sync", icon: "globe", desc: "reservations · pricing", uptime: makeUptime({ incidents: [{ day: 38, severity: "partial" }, { day: 39, severity: "degraded" }, { day: 60, severity: "degraded" }] }), uptimePct: "99.87%", state: "ok" }, { id: "vrbo", name: "VRBO sync", icon: "globe", desc: "reservations · pricing", uptime: makeUptime({ incidents: [{ day: 28, severity: "partial" }] }), uptimePct: "99.93%", state: "ok" }, { id: "nuki", name: "Nuki + TTLock", icon: "key", desc: "smart lock codes", uptime: makeUptime({ incidents: [{ day: 64, severity: "degraded" }] }), uptimePct: "99.96%", state: "ok" }, ], }, { id: "ops", name: "Operations", services: [ { id: "messages", name: "Guest messaging", icon: "chat", desc: "inbound + AI draft pipeline", uptime: makeUptime({ incidents: [{ day: 50, severity: "degraded" }] }), uptimePct: "99.97%", state: "ok" }, { id: "cleaning", name: "Cleaning coordination",icon: "broom", desc: "schedules + magic-link app", uptime: makeUptime({ incidents: [{ day: 78, severity: "maint" }] }), uptimePct: "99.99%", state: "ok" }, { id: "invoices", name: "Invoice generation", icon: "doc", desc: "PDFs · monthly close exports", uptime: makeUptime({ incidents: [{ day: 41, severity: "partial" }, { day: 88, severity: "maint" }] }), uptimePct: "99.95%", state: "ok" }, { id: "expenses", name: "Expense AI · receipts",icon: "scan", desc: "OCR + categorization", uptime: makeUptime({ incidents: [{ day: 11, severity: "degraded" }, { day: 67, severity: "degraded" }] }), uptimePct: "99.94%", state: "ok" }, ], }, { id: "infra", name: "Infrastructure", services: [ { id: "web", name: "Marketing site", icon: "globe", desc: "relax.host", uptime: makeUptime({ incidents: [] }), uptimePct: "100.00%", state: "ok" }, { id: "docs", name: "Docs + developers", icon: "book", desc: "docs.relax.host", uptime: makeUptime({ incidents: [{ day: 26, severity: "maint" }] }), uptimePct: "100.00%", state: "ok" }, { id: "cdn", name: "CDN · EU", icon: "cloud", desc: "image + asset edge", uptime: makeUptime({ incidents: [{ day: 16, severity: "degraded" }] }), uptimePct: "99.99%", state: "ok" }, { id: "db", name: "Primary database", icon: "db", desc: "EU-hosted Postgres", uptime: makeUptime({ incidents: [{ day: 73, severity: "maint" }] }), uptimePct: "100.00%", state: "ok" }, ], }, ]; const INCIDENTS = [ { id: "i-1", title: "AI agent · elevated draft latency", state: "monitoring", impact: "degraded", affected: ["AI agent · drafting"], started: "May 22, 14:22 CET", duration: "1h 18m · ongoing", updates: [ { time: "15:38 CET", label: "Monitoring", body: "Latency back within SLA on all regions. Continuing to monitor draft throughput; will mark resolved if stable through 18:00 CET." }, { time: "15:04 CET", label: "Identified", body: "A model-provider queue was throttling our inference workers in EU-WEST. We've routed around the affected region and are gradually re-warming the pool." }, { time: "14:22 CET", label: "Investigating", body: "We're seeing elevated p95 latency on AI draft generation. Sends are succeeding, but drafts are taking 8–12s instead of <2s. Investigating." }, ], }, { id: "i-2", title: "Airbnb sync — partial outage (EU)", state: "resolved", impact: "major", affected: ["Airbnb sync"], started: "May 18, 03:14 CET", duration: "1h 47m", updates: [ { time: "May 18, 05:01 CET", label: "Resolved", body: "Airbnb's API has returned to baseline. All queued reservations have been synced; messages backfilled in order. No data loss." }, { time: "May 18, 04:12 CET", label: "Monitoring", body: "Sync resumed in all EU regions. We're working through a backlog of ~4,200 reservation events; expected to drain in ~30 min." }, { time: "May 18, 03:34 CET", label: "Identified", body: "Confirmed upstream incident on Airbnb's side affecting EU OAuth and webhooks. relax.host is queuing all events and will replay automatically once they recover." }, { time: "May 18, 03:14 CET", label: "Investigating", body: "We're seeing 5xx errors from Airbnb's API across EU listings. Affected hosts will see delayed message and reservation sync." }, ], }, ]; const HISTORY = [ { day: "May 16, 2026", incidents: [ { id: "h-1", title: "Booking.com · delayed price pushes (EU)", impact: "degraded", duration: "42m", state: "resolved" }, ], }, { day: "May 11, 2026", incidents: [ { id: "h-2", title: "Scheduled — database failover drill", impact: "maint", duration: "12m", state: "completed" }, ], }, { day: "May 5, 2026", incidents: [ { id: "h-3", title: "Receipt OCR — degraded confidence on Romanian receipts", impact: "degraded", duration: "3h 22m", state: "resolved" }, ], }, { day: "Apr 29, 2026", incidents: [ { id: "h-4", title: "Nuki integration — temporary code-generation delay", impact: "degraded", duration: "1h 4m", state: "resolved" }, ], }, ]; const SCHEDULED = [ { id: "s-1", title: "Database failover · EU-WEST → EU-CENTRAL", when: "May 28, 2026 · 02:00–02:30 CET", duration: "Up to 30 min", impact: "Brief read-only window (<2 min). No expected message or sync delays.", }, ]; // ────────────────────────────────────────────────────────────────────── // ICONS // ────────────────────────────────────────────────────────────────────── const Icon = ({ name, size = 14 }) => { const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.7, strokeLinecap: "round", strokeLinejoin: "round" }; switch (name) { case "grid": return ; case "code": return ; case "spark": return ; case "lock": return ; case "house": return ; case "globe": return ; case "key": return ; case "chat": return ; case "broom": return ; case "doc": return ; case "scan": return ; case "book": return ; case "cloud": return ; case "db": return ; case "check": return ; case "bell": return ; case "rss": return ; case "shield": return ; default: return null; } }; // ────────────────────────────────────────────────────────────────────── // HERO // ────────────────────────────────────────────────────────────────────── function StatusHero({ overallState }) { const config = { ok: { eyebrow: "Live · last refreshed 30 sec ago", title: "All systems", emph: "operational." }, degraded: { eyebrow: "Live · monitoring incidents", title: "Some services", emph: "degraded." }, major: { eyebrow: "Live · active major incident", title: "We're working", emph: "on it." }, }[overallState]; return (
{config.eyebrow}

{config.title} {config.emph}

Subscribe RSS
99.96%
90-day uptime
1
active incident
12
resolved · last 30 days
120 ms
avg API p50
); } // ────────────────────────────────────────────────────────────────────── // SERVICE LIST // ────────────────────────────────────────────────────────────────────── function ServiceGroup({ group }) { const allOk = group.services.every((s) => s.state === "ok"); return (

{group.name}

{allOk ? "All operational" : "Mixed status"}
{group.services.map((s) => )}
); } function ServiceRow({ s }) { const stateLabel = { ok: "Operational", degraded: "Degraded", partial: "Partial outage", major: "Major outage", maint: "Maintenance", }[s.state] || "Operational"; return (
{s.name}
{s.desc}
90-day uptime{s.uptimePct}
{stateLabel}
); } function UptimeBar({ days }) { return (
{days.map((d, i) => ( ))}
); } // ────────────────────────────────────────────────────────────────────── // INCIDENTS // ────────────────────────────────────────────────────────────────────── function ActiveIncidents({ incidents }) { const active = incidents.filter((i) => i.state !== "resolved"); if (active.length === 0) { return (
No active incidents. Everything looks good.
); } return active.map((i) => ); } function Incident({ incident }) { return (

{incident.title}

{incident.impact === "degraded" ? "Degraded" : incident.impact === "major" ? "Major" : incident.impact === "partial" ? "Partial" : "Maintenance"}
Started {incident.started} Duration {incident.duration} Affecting {incident.affected.join(", ")}
{incident.updates.map((u, i) => (
{u.label}
{u.time}

{u.body}

))}
); } // ────────────────────────────────────────────────────────────────────── // HISTORY // ────────────────────────────────────────────────────────────────────── function History({ days }) { return ( <> {days.map((d) => (
{d.day}
{d.incidents.map((i) => (

{i.title}

{i.impact === "degraded" ? "Degraded" : i.impact === "major" ? "Major" : i.impact === "partial" ? "Partial" : "Maintenance"}
Duration {i.duration} Status {i.state}
))}
))} ); } // ────────────────────────────────────────────────────────────────────── // SCHEDULED // ────────────────────────────────────────────────────────────────────── function Scheduled({ items }) { if (items.length === 0) { return (
No scheduled maintenance.
); } return items.map((s) => (

{s.title}

Scheduled
When {s.when} Duration {s.duration}

{s.impact}

)); } // ────────────────────────────────────────────────────────────────────── // SUBSCRIBE // ────────────────────────────────────────────────────────────────────── function Subscribe() { const [email, setEmail] = useState(""); const [sent, setSent] = useState(false); return (

Get notified of every change.

Email, RSS, or webhook. We post here first when anything is off — before you notice it yourself.

setEmail(e.target.value)} style={{ padding: "10px 18px", background: "rgba(255,255,255,0.85)", border: "1px solid var(--glass-border)", color: "var(--ink)", borderRadius: 999, fontFamily: "var(--f-sans)", fontSize: 13, outline: "none", minWidth: 220, }} />
); } // ────────────────────────────────────────────────────────────────────── // LEGEND // ────────────────────────────────────────────────────────────────────── function Legend() { const items = [ ["#5fa86a", "Operational"], ["#f5b945", "Degraded"], ["#e89554", "Partial outage"], ["#c43575", "Major outage"], ["#b48dff", "Maintenance"], ]; return (
Past 90 days · {items.map(([c, l]) => ( {l} ))}
); } // ────────────────────────────────────────────────────────────────────── // APP // ────────────────────────────────────────────────────────────────────── function StatusPage() { // Derive overall state from services + incidents const overall = useMemo(() => { if (INCIDENTS.some((i) => i.state !== "resolved" && i.impact === "major")) return "major"; if (INCIDENTS.some((i) => i.state !== "resolved")) return "degraded"; const states = SERVICES.flatMap((g) => g.services.map((s) => s.state)); if (states.includes("major")) return "major"; if (states.includes("degraded") || states.includes("partial")) return "degraded"; return "ok"; }, []); return ( <>

Active incident

Live · auto-refreshes

Service health

90-day window
{SERVICES.map((g) => )}

Scheduled maintenance

Upcoming · EU times

Past incidents

Last 30 days
); } window.StatusPage = StatusPage;