Skip to content

supportmailapp/statuspage

Repository files navigation

SupportMail Statuspage

Live status dashboard for the SupportMail Discord bot — showing real-time health of all clusters and shards.

Live: status.supportmail.dev


What this is

A lightweight, client-side statuspage with minmal SSR that connects to SupportMail's WebSocket infrastructure and displays live data about every bot cluster and its shards. No incident history, no SLA tracking — just a live view of what's running right now.

Clusters report their shard list, guild/member counts, and uptime. Each shard shows its Discord.js connection state and ping. The overall system status (operational / degraded / outage) is derived from the collective state of all clusters.

The favicon updates in real time to reflect overall system health.


Tech stack

  • Framework: SvelteKit 2 + Svelte 5 (runes)
  • Deployment: Cloudflare Pages via @sveltejs/adapter-cloudflare
  • Real-time: Socket.io client
  • Styling: Tailwind CSS v4
  • i18n: Paraglide JS — URL-based, 4 locales
  • UI primitives: Bits UI (Tooltip, Popover)
  • Shared types: Git submodule pointing to the repo with SupportMail's shared TypeScript types

How it works

Data flow

  1. +layout.ts fetches a short-lived token from the client API
  2. Opens a Socket.io connection to the WebSocket server
  3. The page emits get-cluster-status and receives ClusterStatus[]
  4. Status refreshes every 15 seconds; also refetches intelligently on window focus (stops when the tab is inactive and starts again when the user returns)

Dev mode

If the WS token fetch fails (e.g. no local API running), mock cluster data is loaded automatically so the UI is always testable without the backend.

Overall status derivation

overallStatus =
  clusters.length === 0                         ? "unknown"     :
  clusters.every(c => c.status === "running")   ? "operational" :
  clusters.every(c => c.status === "stopped")   ? "outage"      :
                                                  "degraded"

i18n

4 supported locales: English, German, French, Spanish — routed via URL prefix (/de/, /fr/, etc.). Paraglide compiles message files at build time; to add or change strings, edit messages/[locale].json.


Local development

pnpm install
pnpm dev

No environment setup needed for basic UI work — if the WebSocket connection fails, mock data loads automatically.

To connect to a real backend, you need the SupportMail client API (localhost:3000) and WebSocket server (localhost:4000) running locally. Maybe I'll add an env variable for this in the future...


Deployment

Deployed to a Cloudflare Worker via the CF Git Integration.

Config lives in wrangler.jsonc. The production domain is bound there as a custom route.


Notes

This repo is public because I believe in transparency about the non-mission critical tools behind SupportMail. It's not a general-purpose library or a template project — but if you're building something similar and want to use this as a starting point or reference, go for it.

About

Statuspage for Supportmail

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors