Audit Report
Full visual audit conducted 2026-04-24 via the design-system-extraction-cowork skill.
Pages audited
| Page | Has data | Elements | Notes |
|---|---|---|---|
Query (PromQL Expression Evaluator)/query | empty state | 11 +3 | Main PromQL expression editor. Expression input (CodeMirror-backed) with Execute primary button. Three tabs: Table / Graph / Explain. DateTimePicker for evaluation time (prev/next arrows). Empty-state alert: 'No data queried yet'. |
Alerts (Alerting Rules)/alerts | empty state | 6 +1 | Empty state — no alerting rules configured. Two filters: PillsInput 'Filter by rule group state' + Search 'Filter by rule name or labels'. Empty-state Alert with duplicate title+body 'No rules found / No rules found.' |
Target Health/targets | yes | 13 +2 | Richest page. Three-filter row + collapse-all button. Accordion per scrape pool (demo, node, prometheus, pushgateway, …). Each accordion has a 5px-solid colored left-border — green when all UP, red when any DOWN. Panel is a 4-col grid: Endpoint link | Labels (pill-badges) | Last scrape (icon badge + duration badge) | State (UP/DOWN pill-badge). |
Rule Health (Recording Rules)/rules | empty state | 7 +1 | Empty state — same shape as /alerts. PillsInput filter 'Filter by rule health' + Search 'Filter by rule name or labels'. Duplicate 'No rules found' empty-state alert — same copy as /alerts though this page shows recording rules. |
Service Discovery/service-discovery | yes | 11 +2 | Accordion per scrape pool — same style as /targets. Two-column panel: Discovered labels vs Target labels, each a stack of pill label badges. 'show relabeling' is rendered as a text-only blue anchor inside the panel. |
Runtime & Build Information/status | yes | 6 +1 | Two stacked Cards: 'Build information' (with tabler icon) and 'Runtime information' (with runner icon). Each Card contains a 2-column key-value table. 'Configuration Reload: Successful' is rendered as plain black text — not a status badge. |
TSDB Status/tsdb-status | yes | 8 +1 | Four stacked Cards: 'TSDB Head Status', 'Top 10 label names with value count', 'Top 10 label names with highest memory usage', 'Top 10 series label value counts'. Titles are plain text WITHOUT leading icons — diverges from /status and /alertmanager-discovery. Label-name cells use bare <code> (monospace, no background). |
Command-line Flags/flags | yes | 7 +1 | Card with NO title — jumps straight into a search 'Filter by flag name or value' then a sortable 2-col table (Flag | Value). Both columns have sort chevrons — the only page with sortable columns. Every cell wraps content in <code> (browser-default monospace). |
Configuration (YAML)/config | yes | 6 +1 | Centered Mantine CodeHighlight of the Prometheus YAML config, syntax-highlighted with highlight.js yaml grammar. Copy icon button top-right. No Card wrapper, no page title inside content. pre uses bare 'monospace' font-family — no explicit stack. |
Alertmanager Discovery/alertmanager-discovery | empty state | 7 +1 | Two Cards — 'Active Alertmanagers' (bell icon) and 'Dropped Alertmanagers' (bell-off icon). Each contains an info-style empty-state Alert with duplicate title+body. |
Limitations
Cowork sandbox blocks screenshot export — save_to_disk returns opaque ss_<hash> IDs rather than writable paths, and base64 payloads exceed the runtime.evaluate return limit. Fell back to Degraded Screenshot Mode: 1×1 placeholder JPEGs will be written under screenshots/ via init-placeholders.sh. Claude Code Phase 1.5 is expected to backfill real JPEGs with Playwright.