Homelab Monitoring Dashboard

Overview

I designed and built an AI-integrated monitoring dashboard for my personal homelab server from scratch, covering 20+ self-hosted services across media, monitoring, and infrastructure tooling. Beyond just surfacing uptime and health data, I built the dashboard around a clear information hierarchy, a consistent status system, and an embedded AI command interface that can explain issues in plain language and queue safe, reversible actions for my approval.

Scope End-to-end design and build, from information architecture through AI integration

Structure Persistent navigation, a single consistent status-color system, issues sorted to the top at every level

Extension An embedded AI command interface with explicit limits on autonomous action

The Challenge

Monitoring dashboards fail in a specific way: they either bury the one thing that actually needs attention under a wall of identical-looking healthy services, or worse, they contradict themselves, showing a different issue count in one place than another. That second failure mode is corrosive in a way a cluttered layout isn't; a tool that disagrees with itself stops being trusted at all.

I set out to design a dashboard where a single glance tells you what's wrong, where color always means the same thing everywhere it appears, and where the numbers on screen are never in tension with each other, while still capturing the personality of the "Gotham Command" theme I wanted the project to have.

The Goal

Guarantee a single, consistent source of truth for issue counts everywhere they appear on screen
Establish one status-color system used identically across every part of the dashboard
Build real, persistent navigation rather than a single long scrolling view
Reduce visual noise so healthy services fade into the background and problems are immediately obvious

Design Approach

I structured the information hierarchy so anything unhealthy sorts to the top, both at the category level and within a category, rather than sitting mixed in alphabetically alongside everything that's working fine. Healthy services collapse down to a status dot and a name; only services with a warning or critical status get the full detail treatment (uptime, latency, description of the issue). One status palette is used everywhere: teal for healthy, amber for warning, red for critical, with a single issue count that's never contradicted anywhere else on the page.

I built a persistent top navigation bar (Overview, Alerts, Approvals, History, Settings) and extended the dashboard with an embedded AI chat interface. The assistant, Robin, can explain what's wrong in plain language and queue safe, reversible actions for my approval, but it's explicit about its own limits: when a service failure requires physical intervention, it says so directly rather than pretending it can help further.

My Role

This is a self-directed personal project. I designed and built the entire dashboard end to end using Claude Code, from the information architecture and status system through the embedded AI command interface, iterating through multiple passes based on my own critique to keep tightening visual hierarchy and clarity.

The Experience

The dashboard leads with what needs attention: unhealthy categories and services sort to the top, a single consistent status system is used everywhere, and a persistent nav gives direct access to Alerts, Approvals, and History. The embedded AI panel on the right surfaces the same issues in plain language and is explicit about what it can and can't safely do on its own.

Homelab monitoring dashboard with navigation, consistent status colors, and an embedded AI chat panel

Persistent navigation, a single consistent status system, issues sorted to the top at every level, and an embedded AI command interface

Outcome

The dashboard gives an at-a-glance read on what actually needs attention across 20+ services, with no ambiguity in color or count, and adds an agentic layer that explains problems and recommends safe actions while requiring explicit human approval before anything changes. It's an active, ongoing personal project I continue to build on.