Widgets

Each widget follows the same data chain:

React component
  → React Query hook
    → Next.js API route (/api/widgets/<name>)
      → external service (Docker socket, HTTP API, etc.)

Widgets never call external services directly from the browser.

Available widgets

Widget	API route	Data source
Docker Containers	/api/widgets/docker	Docker socket
Tailscale Devices	/api/widgets/tailscale	Tailscale local API
Uptime Kuma	/api/widgets/uptime-kuma	Uptime Kuma REST
Portainer	/api/widgets/portainer	Portainer REST
Prometheus	/api/widgets/prometheus	node_exporter scrape
Fail2ban	/api/widgets/fail2ban	log / Fail2ban socket
LiteLLM	/api/widgets/litellm	LiteLLM proxy API

Adding a widget

1. Create src/components/widgets/<name>.tsx
2. Create src/app/api/widgets/<name>/route.ts — always verify the NextAuth session
3. Add the widget to the dashboard grid in src/app/page.tsx

Security

Every API route must call auth() and return 401 if no session exists. Never forward raw service responses to the client — sanitise and shape the response.