Action Items

Wrap every UP/DOWN/Successful/Failed/Ready field in <HealthBadge>. Today /status renders 'Configuration Reload: Successful' as plain black text so failure and success look identical at a glance.

<td>Successful</td>

<td><HealthBadge value="Successful" /></td>

Label names on /tsdb-status and flag names on /flags render as bare <code>, while the same concept renders as a pill Label Badge on /targets. Unify on the pill form.

<code>__name__</code>

<LabelBadge>__name__</LabelBadge>

Today the empty-state Alert on /alerts, /rules, and both /alertmanager-discovery cards renders the same string twice (title + body). Delete the body prop or replace it with actionable setup guidance.

<Alert title="No rules found">No rules found.</Alert>

<Alert title="No alerting rules found">Configure alert rules in prometheus.yml under the <code>rule_files</code> key.</Alert>

Flip the Table wrapper default to sortable. Keep an opt-out for cases where source-order matters (Build/Runtime KV tables).

<Table>…</Table>

<Table sortable>…</Table>   // now the default

Four stacked TSDB cards plus the title-less Flags card and Card-less Config section break the page-chrome pattern established on /status and /alertmanager-discovery. Add <CardTitle icon=… /> to each and wrap Flags + Config in Card.

<Card><h3>TSDB Head Status</h3>…</Card>

<Card><CardTitle icon={IconDatabase}>TSDB Head Status</CardTitle>…</Card>

pre and code currently resolve to the bare 'monospace' keyword — falls back to Courier on most OSes. Introduce a single CSS custom property with a modern stack and point every pre/code at it.

pre, code { font-family: monospace; }

--font-family-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
pre, code { font-family: var(--font-family-mono); }

Header Icon Buttons inherit the default Mantine focus ring (faint on the slate header). Promote to a 2px brand-blue outline for keyboard users.

.mantine-ActionIcon-root:focus-visible { outline: 1px solid rgba(34,139,230,0.5); }

.mantine-ActionIcon-root:focus-visible { outline: 2px solid rgb(34,139,230); outline-offset: 2px; }

The header nav buttons and utility icons crowd on tablet widths. Introduce a burger at <768px that collapses the nav into a drawer; keep theme toggle visible.

<header><nav>…all buttons…</nav><tools>…</tools></header>

<header><button class="burger">☰</button><tools>…</tools></header>  /* sidebar drawer at <768px */

/flags sortable headers currently lack aria-sort. Screen readers announce them as plain columns.

<th onClick={sort}>Flag</th>

<th aria-sort={order} onClick={sort}>Flag</th>

YAML keys render green in light and blue in dark; strings do the opposite. Pick a stable hue per role (keys=green, strings=blue) and vary only luminance between themes.

[data-theme="dark"] .hljs-attr { color: rgb(165,216,255); } /* blue */

[data-theme="dark"] .hljs-attr { color: var(--doc-syntax-key-dark); } /* green family */

'No rules found' is ambiguous when two different rule types share the string. Say 'No alerting rules found' on /alerts and 'No recording rules found' on /rules.

<EmptyState title="No rules found" />

<EmptyState ruleType="alerting" />

Root .mantine-Badge-root resolves to text-transform:uppercase but the inner .mantine-Badge-label overrides to none. Intent mismatches output — set text-transform:none at the root for the stats variant.

<Badge variant="default">573ms</Badge>  /* root: uppercase, label: none */

<StatsBadge>573ms</StatsBadge>  /* root: none — matches intent */

Flag names and values are among the most-copied strings in the UI but /flags has no Copy Button — users hand-select cells. Mirror the /config Copy Button on each row.

<td><code>--config.file</code></td>

<td><code>--config.file</code> <CopyButton value="--config.file" /></td>

Several page files use literal `16px`, `24px`, `8px 16px` in inline styles. Replace with the named scale (lg, xl, sm) or the layout semantics (card-padding, header-height).

<div style={{ padding: '16px', marginTop: '24px' }}>

<div style={{ padding: 'var(--spacing-lg)', marginTop: 'var(--spacing-xl)' }}>

Mark the variant deprecated, route call-sites through Card Title with Icon. Covered by AI-005 for /tsdb-status; this issue tracks the component-level deprecation.

export const CardTitle = ({children}) => …

export const CardTitle = ({icon, children}) => { if (!icon) console.warn('CardTitle: icon is required'); … }

Link renders without underline — fine for color-sighted users, fails for users who rely on non-color affordances. Underline on :hover and :focus.

a { color: rgb(34,139,230); text-decoration: none; }

a { color: rgb(34,139,230); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

Tokens exist in Mantine theme but are not published as a single CSS custom-property file. Emit tokens.css from tokens.json and ship it on the docs site for copy-paste consumption.

Status scale covers ok/error/info but no 'warn' — once Alertmanager 'pending' state surfaces, there's no token ready. Add yellow-family ok-adjacent.

status: [ok, error, info]

status: [ok, warn, error, info]