chore(tui): visual polish — detail sections, column headers, alert detail #37

Merged

lerko merged 20 commits from chore/ux-polish into main 2026-05-28 20:40:29 +00:00

Conversation 0 Commits 20 Files Changed 7

+256 -61

lerko commented 2026-05-28 17:18:38 +00:00

Owner

Copy Link

Copy Source

Summary

Bundled remaining UX polish items from the screenshot review.

Changes

Detail panel sections (#5)

• Fields grouped into ENDPOINT, TIMING, HTTP, CONFIG sections with subtle headers
• Matches existing PROBE RESULTS and STATE CHANGES section pattern
• Cleaner visual hierarchy without box-drawing clutter

Omit unconfigured fields (#6)

• Timeout hidden when 0 (unconfigured)
• Method hidden when default GET
• AcceptedCodes shows "200-299" explicitly when empty

Column header (#7)

• LATENCY → LAT (design short, never truncate — htop/btop pattern)

Alert detail view (#8)

• i key on Alerts tab opens full detail panel
• Shows: type, health status, last sent time, send/fail counts, last error
• Full config key:value pairs (untruncated)
• Keybinding: [i/Esc] Back [e] Edit [t] Test [q] Quit

Files (3)

• internal/tui/tab_sites.go — section headers, field omission, LAT header
• internal/tui/tab_alerts.go — viewAlertDetailPanel()
• internal/tui/tui.go — stateAlertDetail, key handler, render routing

## Summary Bundled remaining UX polish items from the screenshot review. ### Changes **Detail panel sections (#5)** - Fields grouped into ENDPOINT, TIMING, HTTP, CONFIG sections with subtle headers - Matches existing PROBE RESULTS and STATE CHANGES section pattern - Cleaner visual hierarchy without box-drawing clutter **Omit unconfigured fields (#6)** - Timeout hidden when 0 (unconfigured) - Method hidden when default GET - AcceptedCodes shows "200-299" explicitly when empty **Column header (#7)** - `LATENCY` → `LAT` (design short, never truncate — htop/btop pattern) **Alert detail view (#8)** - `i` key on Alerts tab opens full detail panel - Shows: type, health status, last sent time, send/fail counts, last error - Full config key:value pairs (untruncated) - Keybinding: `[i/Esc] Back [e] Edit [t] Test [q] Quit` ### Files (3) - `internal/tui/tab_sites.go` — section headers, field omission, LAT header - `internal/tui/tab_alerts.go` — viewAlertDetailPanel() - `internal/tui/tui.go` — stateAlertDetail, key handler, render routing

lerko added 1 commit 2026-05-28 17:18:38 +00:00

chore(tui): visual polish — detail sections, column headers, alert detail ... af5246e777

Detail panel:
- Grouped fields into sections (ENDPOINT, TIMING, HTTP, CONFIG)
- Omit Timeout when 0 (unconfigured)
- Omit Method when default GET
- Show explicit "200-299" when AcceptedCodes empty

Table:
- LATENCY header → LAT (design short, never truncate)

Alerts:
- Press [i] for alert detail panel: full config, health status,
  send counts, last error
- Keybinding display updated with [i]Info

Bundled remaining UX polish items from screenshot review.

lerko added 1 commit 2026-05-28 17:28:11 +00:00

feat(tui): responsive table columns — expand headers with terminal width ... 82d7b2942b

Replace hardcoded column widths with dynamic layout system:
- Each column has short/full header and min/max width
- At narrow terminals: LAT, UP%, RT, compact widths
- At wide terminals: LATENCY, UPTIME, RETRIES, expanded widths
- Surplus space distributed left-to-right across expandable columns
- Headers switch between short/full based on actual column width

Column definitions:
  # (4-6)  TYPE (8-10)  STATUS (8-10)  LAT/LATENCY (5-10)
  UP%/UPTIME (5-8)  SSL (5-7)  RT/RETRIES (5-9)

lerko added 1 commit 2026-05-28 17:35:57 +00:00

fix(tui): increase LAT/UPTIME min column widths to prevent wrapping ... ecdb1a6632

LAT min 5→7 (fits '142ms' + padding), UPTIME min 5→8 (fits '100.0%' + padding).

lerko added 1 commit 2026-05-28 17:39:02 +00:00

fix(tui): size NAME column to actual content, surplus goes to sparkline ... c5477c7ef6

Compute max monitor name length and cap NAME column to that + 4 (icon/padding).
Extra space goes to HISTORY sparkline instead of dead whitespace.

lerko added 1 commit 2026-05-28 17:52:27 +00:00

fix(tui): set explicit NAME column width to match content truncation ... 2c78c60d08

Was width=0 (auto) which let lipgloss over-allocate the column,
causing visible empty space between truncated names and TYPE column.
Now set to nameW explicitly so column width = truncation limit.

lerko added 1 commit 2026-05-28 17:58:07 +00:00

fix(tui): prevent # and SSL columns from expanding unnecessarily ... 9121b79582

Set min=max for columns that don't benefit from extra width.
Surplus space goes to sparkline instead.

lerko added 1 commit 2026-05-28 18:18:34 +00:00

fix(tui): enforce column MaxWidth to prevent lipgloss redistribution ... 2569a252ff

lipgloss table with Width(tableWidth) redistributes surplus space across
all columns. Adding MaxWidth() caps each column to its computed width.
Also dump any remaining surplus into the HISTORY sparkline column.

lerko added 1 commit 2026-05-28 19:04:41 +00:00

fix(tui): apply Width/MaxWidth to header row cells too ... 2e489cdc1a

Header row was returning bare tableHeaderStyle with no width constraints,
letting lipgloss table-level Width() inflate the # column.

lerko added 1 commit 2026-05-28 19:11:32 +00:00

fix(tui): correct table border overhead calculation ... 217276ca18

Was hardcoded to 30 — actual overhead is 2 (borders) + numCols-1
(separators) = 10 for 9 columns. The 20-char gap was being
redistributed by lipgloss into columns like # making them too wide.

lerko added 1 commit 2026-05-28 19:20:13 +00:00

feat(tui): responsive table layout for all tabs ... d05bbd007b

Extract shared computeTableLayout() into table_helpers.go — takes column
definitions with short/full headers, min/max widths, and a flex column
that absorbs surplus space. All tabs now use it:

- Alerts: CONFIG column is flex, NAME/TYPE/SENT expand with width
- Maint: TITLE column is flex, TYPE/MONITORS/STATUS/dates expand
- Nodes: NAME column is flex, REGION/LAST SEEN/VERSION expand
- Users: PUBLIC KEY column is flex, USERNAME expands
- Sites: uses same colDef type (keeps special dual-flex for NAME+HISTORY)

Headers auto-switch short/full based on available width across all tabs.

lerko added 1 commit 2026-05-28 19:22:20 +00:00

fix(tui): increase maint tab min column widths for TYPE/MONITORS/STATUS ... eb61a0dd3c

TYPE min 10→13 (fits 'maintenance'), MONITORS min 10→13, STATUS min 8→11
(fits 'SCHEDULED'). Prevents word wrapping.

lerko added 1 commit 2026-05-28 19:24:28 +00:00

fix(tui): maint tab — bump MONITORS/STARTED/ENDS min widths, respect column width ... 251c723fbd

MONITORS min 13→15 (monitor names can be long, truncate to column width).
STARTED/ENDS min 10→14 (fits '18:30 May 28' = 12 chars + padding).
fmtMaintMonitorW truncates name to actual column width.

lerko added 1 commit 2026-05-28 19:31:03 +00:00

fix(tui): maint tab min widths fit 80-column terminals ... d9dcd58b66

Reduce minimums so fixedMin=51 (was 71). At narrow: compact headers (ST, MON).
At wide: full headers (STATUS, MONITORS, STARTED) with expanded widths.

lerko added 1 commit 2026-05-28 19:40:20 +00:00

fix(tui): maint tab — MONITORS is flex, dates get room, time adapts to width ... a84f4894f8

TITLE was flex eating all space while dates/monitors squeezed. Flipped:
MONITORS is now flex, TITLE fixed (12-24), dates min 14, STATUS min 11.
fmtMaintTime uses compact format (Jan 02) at narrow widths.

lerko added 1 commit 2026-05-28 19:50:26 +00:00

refactor(tui): two-tier responsive table layout (compact/wide at 120 cols) ... 5401266e83

Replace continuous surplus distribution with two fixed layouts per table.
Breakpoint at 120 columns — matches how btop/k9s do it.

Compact (<120): short headers (LAT, UP%, RT, ST, MON, SENT, VER),
  tight fixed widths, no surplus guessing.

Wide (≥120): full headers (LATENCY, UPTIME, RETRIES, STATUS, MONITORS,
  LAST SENT, VERSION), generous widths.

Sites tab keeps content-aware NAME sizing + sparkline flex.
All other tabs (Alerts, Maint, Nodes, Users) use simple fixed tiers.

Removed old computeTableLayout/colDef/tierCol/pickTier — no longer needed.

lerko added 1 commit 2026-05-28 19:57:35 +00:00

fix(tui): compute table Width from column sum, not terminal width ... c487a8eb26

Table Width was set to terminal width, forcing lipgloss to redistribute
surplus space into columns like #. Now computed from sum of column widths
+ border overhead. Table is exactly as wide as needed, capped at terminal.

lerko added 1 commit 2026-05-28 20:01:46 +00:00

fix(tui): render sparkline 2 chars narrower than column to prevent wrapping ... fa96c5fd3f

Cell padding inside the table causes sparkline content at full column
width to wrap. Subtract 2 from sparkWidth for content rendering.

lerko added 1 commit 2026-05-28 20:04:53 +00:00

fix(tui): bump compact UPTIME column 7→8 to fit 100.0% with cell padding 1c29758ca2

lerko added 1 commit 2026-05-28 20:08:01 +00:00

fix(tui): account for cell padding in NAME column content limits ... ad14daf6ae

Group icons, tree prefixes (├/└), and regular names all need 2 extra
chars margin for cell padding. Reduces truncation limits by 2 across
all name rendering paths.

lerko added 1 commit 2026-05-28 20:33:02 +00:00

fix(lint): remove unused fmtMaintMonitor function 4e7018ab28

lerko merged commit cfbf01274d into main 2026-05-28 20:40:29 +00:00

lerko deleted branch chore/ux-polish 2026-05-28 20:40:29 +00:00

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

lerko (Tyler Koenig)

No Assignees

1 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: lerkolabs/uptop#37