feat(tui): uptime timeline, response histogram, detail panel overhaul #149

2026-06-25T01:11:23Z

lerko commented

2026-06-25 01:11:23 +00:00

Summary

P6 — 30-day uptime timeline:

Statuspage-style colored bar in inline detail — one █ per day
Green (>= 99%), yellow (>= 95%), red (< 95%), gray (no data)
30-day percentage shown alongside

P5 — Response time distribution:

Horizontal histogram in full-screen detail with 5 latency buckets
Color-coded: green (0-100ms), yellow (100-500ms), red (500ms+)

Full-screen detail panel overhaul:

Two-column top: ENDPOINT (left) + STATUS/timing/HTTP (right)
Two-column bottom (70/30): graphs left (latency sparkline + histogram), state changes right
Styled section headers (bold accent, no trailing rules on bottom sections)
Viewport scrolling when content exceeds terminal height (j/k/arrows/pgup/pgdn)
Spacing between sections for visual breathing room

Design items P5 + P6 from tui-polish-design.local.md.

Test plan

Inline detail shows 30d uptime timeline with colored blocks
Full-screen detail (Enter) shows two-column layout — endpoint left, status right
Bottom half: latency sparkline + histogram left, state changes right
Histogram bars color-coded by latency bucket
Viewport scrolling works when content overflows
Section headers are bold accent text
Works at narrow terminal (< 120 cols)

## Summary **P6 — 30-day uptime timeline:** - Statuspage-style colored bar in inline detail — one █ per day - Green (>= 99%), yellow (>= 95%), red (< 95%), gray (no data) - 30-day percentage shown alongside **P5 — Response time distribution:** - Horizontal histogram in full-screen detail with 5 latency buckets - Color-coded: green (0-100ms), yellow (100-500ms), red (500ms+) **Full-screen detail panel overhaul:** - Two-column top: ENDPOINT (left) + STATUS/timing/HTTP (right) - Two-column bottom (70/30): graphs left (latency sparkline + histogram), state changes right - Styled section headers (bold accent, no trailing rules on bottom sections) - Viewport scrolling when content exceeds terminal height (j/k/arrows/pgup/pgdn) - Spacing between sections for visual breathing room Design items P5 + P6 from `tui-polish-design.local.md`. ## Test plan - [x] Inline detail shows 30d uptime timeline with colored blocks - [x] Full-screen detail (Enter) shows two-column layout — endpoint left, status right - [x] Bottom half: latency sparkline + histogram left, state changes right - [x] Histogram bars color-coded by latency bucket - [x] Viewport scrolling works when content overflows - [x] Section headers are bold accent text - [x] Works at narrow terminal (< 120 cols)

lerko added 6 commits 2026-06-25 01:11:23 +00:00

feat(tui): 30-day uptime timeline in inline detail panel a59edf8410

Statuspage-style colored bar — one █ per day, colored by uptime:
green (>= 99%), yellow (>= 95%), red (< 95%), gray (no data).
30-day percentage shown to the right.

Daily breakdown computed via ComputeDailyBreakdown from state_changes
and loaded alongside detail data in loadDetailCmd. Auto-updates on
cursor move.

feat(tui): response time distribution histogram in full-screen detail 99121d07d8

Horizontal bar chart showing latency distribution across 5 buckets:
0-50ms, 50-100ms, 100-200ms, 200-500ms, 500ms+. Color-coded green
(fast), yellow (medium), red (slow). Shows count per bucket.

Appears in the full-screen detail panel (Enter) after the sparkline
stats. Skipped for push monitors (no latency data).

feat(tui): two-column detail layout with viewport scrolling fb50184f37

Refactored full-screen detail panel: status+endpoint on left column,
timing+config on right column. Halves vertical height of the info
section. Content wraps in a viewport when it exceeds terminal height
— scroll with j/k/arrows/pgup/pgdn.

Restored renderSparkTooltip lost in rewrite. Fixed lint warnings.

feat(tui): styled section headers with trailing rules in detail panel 1268d99f5c

Section labels (STATE CHANGES, LATENCY, RESPONSE TIME DISTRIBUTION,
PROBE RESULTS) now render in bold accent color with a trailing ───
rule that fills the width. Two-column info block separated by a full
divider below. Creates clear visual boundaries between sections.

fix(tui): add spacing between latency graph and histogram 11b647b952

feat(tui): two-column bottom layout, endpoint/status split, clean labels

CI / test (pull_request) Successful in 2m4s

Details

CI / lint (pull_request) Successful in 1m11s

Details

CI / vulncheck (pull_request) Successful in 56s

Details

11344b4ae6

Bottom section: graphs (latency + histogram) 70% left, state changes
30% right. Top section rearranged: endpoint details left, status +
timing + HTTP right. Bottom section labels use bold accent without
trailing rules. Spacing between top and bottom halves.

Removed unused renderSparkTooltip (zone marks not wired in column
layout — can restore later).

lerko merged commit 11344b4ae6 into main

2026-06-25 23:14:29 +00:00

lerko deleted branch feat/uptime-timeline

2026-06-25 23:14:29 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: lerkolabs/uptop#149