Action Items

The header uses inline bg="rgb(65, 73, 81)" and c="#fff" for both AppShell.Header and AppShell.Navbar. These hardcoded values do not adapt to the user's light/dark mode preference — the header is permanently dark regardless of theme. Replace with CSS custom properties from the design system.

Before / After

Code Diff

Three separate health badge implementations exist across the codebase, each rendering differently: AlertsPage uses Badge.module.css classes, RulesPage uses a Mantine color prop, and ScrapePoolsList uses a conditional color prop. Replace all three with the canonical <StatusBadge> component.

Before / After

Code Diff

AlertsPage uses Panel.module.css classes with step-3 colors for left-border health indicators. RulesPage uses inline styles with step-4 colors — the same visual metaphor implemented twice with different shades. Replace both with <HealthPanel> and delete the now-redundant CSS modules.

Before / After

Code Diff

Four pages (AlertsPage, RulesPage, TargetsPage, ServiceDiscoveryPage) each copy-paste the same filter bar pattern: Group + StateMultiSelect + TextInput + optional ActionIcon. Extract into a shared <FilterToolbar> component with an optional showCollapseAll prop.

Before / After

Code Diff

Both AlertsPage and RulesPage use "alertsPage.showEmptyGroups" as the localStorage key for the "show empty groups" toggle. This means toggling the option on one page accidentally affects the other page — a real functional bug. The fix is a one-line change: rename RulesPage's key to "rulesPage.showEmptyGroups".

Code Diff

The label pair hover state in SeriesName uses hardcoded light-mode-only colors: #add6ffa0 (a semi-transparent light blue) and #495057 (dark gray text). In dark mode these produce a washed-out, low-contrast highlight. Switch to light-dark() to support both themes properly while preserving the exact light-mode appearance.

Code Diff

The "Prometheus" logo text is rendered by two separate Text elements: one with hiddenFrom="sm" and one with visibleFrom="md". Between breakpoints sm and md, neither text element is visible — the brand name disappears from the header. Replace with a single element that avoids this gap.

Code Diff

The header in App.tsx uses numeric pixel values for gap props: gap={40} for the logo-to-nav spacing, gap={12} for the nav links row, and gap={10} for the logo group. These should use Mantine's semantic spacing tokens so they benefit from the theme's spacing scale and scale consistently.

Code Diff

The Prometheus logo text uses fz={20} — a bare number which Mantine interprets as a pixel value. This bypasses user font-size preferences (e.g. browser zoom or accessibility font scale). Define a --prom-logo-font-size token at 1.25rem (equivalent at 16px root) and reference it.

Code Diff

The icon style { width: "0.9rem", height: "0.9rem" } is defined locally in at least 3 files (QueryPanel, RangeInput, TimeInput). The source code even has a // TODO: This is duplicated everywhere, unify it. comment acknowledging this. The existing styles.ts already exports icon size constants — add queryIconStyle to it and import from there.

Code Diff

The header floats directly above the content area with no visual separator. On light backgrounds this creates an ambiguous boundary — especially once PR #1 removes the dark hardcoded background. Adding a 1px border-bottom at rgba(0,0,0,0.12) creates a clean, subtle edge without adding visual weight.

Before / After

Code Diff

When no alert rules are found, the Alerts page shows a bare Mantine Alert component with the text "No rules found." This is functional but sparse. A centered empty state with an icon and brief helpful message communicates intent more clearly and feels more intentional.

Before / After

Code Diff

The card titles on TSDB Status, Runtime Info, and other info pages use fw={600}. At typical body sizes, fw={600} creates insufficient contrast against body text — the title doesn't read as clearly "heavier." Bumping to fw={700} sharpens the hierarchy without changing the visual style.

Code Diff

The Flags page table has no hover state — rows feel static and it's hard to track your position when scanning. Adding a subtle background highlight on hover makes the table feel interactive and improves scanability, particularly for the many rows a typical Prometheus flags table contains.

Code Diff

The settings popover uses Mantine Fieldset components but with mixed padding and no visual separator between the Query Settings and Alerts Settings columns. Standardizing padding to p="sm" across all fieldsets and adding a subtle column divider brings the panel into visual harmony.

Before / After

Code Diff

Label badges on the Targets and Service Discovery pages use light-dark(#eee, #3a3a3a) backgrounds. When many badges are visible simultaneously (as is common on dense target pages), the relatively strong backgrounds compete with the target metadata. Softening to Mantine's canonical gray-1/dark-6 equivalents reduces visual noise.

Before / After

Code Diff

The TreeNode component used for displaying PromQL AST relabeling rules has interactive elements that only respond to mouse clicks — there is no keyboard support. Users who navigate by keyboard (or assistive technology) cannot expand or collapse tree nodes. Add tabIndex={0}, role="treeitem", and Enter/Space key handlers.

Code Diff

The global Suspense fallback in App.tsx uses width={1000} for skeleton lines. On narrower viewports (tablets, small laptops) this causes the skeleton to overflow the visible area horizontally, producing an ugly scroll during the loading state. Switch to width="100%" with maw={1000} so skeletons are bounded by the container but never wider.

Code Diff