feat(tui): inline detail panel, titled borders, panel focus #146

2026-06-21T16:28:57Z

lerko commented

2026-06-21 16:28:57 +00:00

Summary

Major monitors tab UX overhaul — multi-panel layout with lazygit-style chrome.

Inline detail panel (P4b):

i toggles a compact detail panel below the monitors+logs split
Shows status, latency, uptime, state changes, sparkline, key hints in ~6 lines
Auto-updates when cursor moves between monitors
Enter opens full-screen detail for deep dive (history, SLA, probe results)
Detail open/closed state persisted as user preference (survives restarts)

Titled panel borders:

All panels wrapped in rounded titled borders (╭─ Title ──╮)
Focused panel gets accent-colored border, unfocused panels get muted border
Table's own border replaced with HiddenBorder — panel border provides the frame

Panel focus:

Click any panel to focus it — accent border follows focus
Mouse wheel scrolls the focused panel
l toggles focus to log panel, arrow keys scroll logs when focused
Esc returns focus to monitors (or closes detail)

Log timestamp refactor:

New models.LogEntry{Message, CreatedAt} replaces raw strings
Timestamps formatted at render time: sidebar shows MM/DD HH:MM
Legacy [HH:MM] prefix stripped from pre-refactor DB entries
No more parsing timestamps out of message strings

Responsive:

Tested at 90-col narrow terminal — graceful degradation, no breakage

Design items P4b + P4d from tui-polish-design.local.md.

Test plan

i toggles inline detail panel below monitors
Detail auto-updates on cursor movement (up/down arrows)
Enter opens full-screen detail with history/SLA
Detail state persists across restart
Click panel to focus — border color changes
Mouse wheel scrolls focused panel
l toggles log focus, arrows scroll logs
Esc returns focus / closes detail
Log sidebar shows MM/DD HH:MM format
Old DB logs with [HH:MM] prefix display correctly
Narrow terminal (< 90 cols) renders without breakage
h/s from detail open history/SLA full-screen
Theme switching doesn't break panel borders

## Summary Major monitors tab UX overhaul — multi-panel layout with lazygit-style chrome. **Inline detail panel (P4b):** - `i` toggles a compact detail panel below the monitors+logs split - Shows status, latency, uptime, state changes, sparkline, key hints in ~6 lines - Auto-updates when cursor moves between monitors - `Enter` opens full-screen detail for deep dive (history, SLA, probe results) - Detail open/closed state persisted as user preference (survives restarts) **Titled panel borders:** - All panels wrapped in rounded titled borders (╭─ Title ──╮) - Focused panel gets accent-colored border, unfocused panels get muted border - Table's own border replaced with HiddenBorder — panel border provides the frame **Panel focus:** - Click any panel to focus it — accent border follows focus - Mouse wheel scrolls the focused panel - `l` toggles focus to log panel, arrow keys scroll logs when focused - `Esc` returns focus to monitors (or closes detail) **Log timestamp refactor:** - New `models.LogEntry{Message, CreatedAt}` replaces raw strings - Timestamps formatted at render time: sidebar shows `MM/DD HH:MM` - Legacy `[HH:MM]` prefix stripped from pre-refactor DB entries - No more parsing timestamps out of message strings **Responsive:** - Tested at 90-col narrow terminal — graceful degradation, no breakage Design items P4b + P4d from `tui-polish-design.local.md`. ## Test plan - [x] `i` toggles inline detail panel below monitors - [x] Detail auto-updates on cursor movement (up/down arrows) - [x] `Enter` opens full-screen detail with history/SLA - [x] Detail state persists across restart - [x] Click panel to focus — border color changes - [x] Mouse wheel scrolls focused panel - [x] `l` toggles log focus, arrows scroll logs - [x] `Esc` returns focus / closes detail - [x] Log sidebar shows `MM/DD HH:MM` format - [x] Old DB logs with `[HH:MM]` prefix display correctly - [x] Narrow terminal (< 90 cols) renders without breakage - [x] `h`/`s` from detail open history/SLA full-screen - [x] Theme switching doesn't break panel borders

lerko added 10 commits 2026-06-21 16:28:57 +00:00

feat(tui): inline detail panel below monitors table 66b0681a76

Press i to toggle a compact detail panel below the monitors+logs
split. Shows status, latency, uptime, state changes, sparkline, and
key hints in ~6 lines. Auto-updates when cursor moves between
monitors. h/s/e keys work from the inline detail for history, SLA,
and edit. Escape closes the panel.

No more full-screen detail takeover for the common case. The old
stateDetail path remains for h/s sub-views which still go full-screen.

fix(tui): shrink table rows when detail panel is open c9bd9a5a2e

debug: make detail title visible with danger style 54299583d6

fix(tui): limit sidebar height to match table, fix detail clipping 5720fabdbc

Log sidebar was rendering all lines regardless of table height. When
detail panel was open and table shrank, the sidebar stayed tall, pushing
the detail panel past MaxHeight (clipped to empty). Now sidebar accepts
a maxLines parameter capped to table row count.

feat(tui): bordered log sidebar, Enter for full-screen detail 08f14f3af8

Log sidebar wrapped in rounded border (no left/bottom edge — shared
with monitors table). Creates visual separation between panels.

Enter on a monitor opens the full-screen detail view (existing
stateDetail) for deep dive — history, SLA, probe results, connection
chain. i stays as inline detail toggle.

Footer key hints now context-sensitive: show h/s/Enter when detail
is open, show full keybindings when closed.

fix(tui): remove leading newline from bordered sidebar 065d5d74bb

feat(tui): lazygit-style titled panel borders e5ac4a1fec

All panels wrapped in titled rounded borders (╭─ Title ──╮). Focused
panel gets accent-colored border, unfocused panels get muted border.

- Monitors panel: titled "Monitors", focused when detail is closed
- Logs panel: titled "Logs", always unfocused (passive display)
- Detail panel: titled with monitor name, focused when open

Table's own RoundedBorder replaced with HiddenBorder — the titled
panel border provides the visual frame, table uses space-separated
columns internally. Consistent chrome across all panels.

feat(tui): panel focus with click, scroll, and keyboard 7109b6fa1c

Click any panel (Monitors, Logs, Detail) to focus it — accent border
follows focus. Mouse wheel scrolls the focused panel.

Keyboard: l toggles log panel focus. Arrow keys scroll logs when
focused, navigate monitors when not. Esc returns focus to monitors.

Log sidebar now supports scroll offset — tracks position across
renders without a viewport. Mouse wheel scrolls 3 lines, keyboard
scrolls 1.

feat(tui): persist detail panel state as user preference 81f8c71b6f

Detail open/closed state saved via SetPreference on toggle and
restored on session start. Same pattern as theme persistence —
survives restarts and works per-user over SSH.

refactor: separate log timestamp from message as structured LogEntry

CI / test (pull_request) Successful in 2m4s

Details

CI / lint (pull_request) Successful in 1m12s

Details

CI / vulncheck (pull_request) Successful in 56s

Details

01dd53241a

Introduced models.LogEntry{Message, CreatedAt} to replace raw strings
in the log pipeline. Timestamps are now formatted at render time, not
baked into stored messages.

- Engine: appendLog stores LogEntry with time.Now()
- Store: LoadLogs returns []LogEntry, selects created_at from DB
- Store: strips legacy [HH:MM] prefix from pre-refactor DB entries
- TUI: sidebar shows "MM/DD HH:MM" from CreatedAt
- TUI: full log view shows "MM/DD HH:MM" from CreatedAt
- SaveLog still receives plain message string (DB handles timestamp)

lerko merged commit 01dd53241a into main

2026-06-21 16:44:01 +00:00

lerko deleted branch feat/inline-detail

2026-06-21 16:44:02 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: lerkolabs/uptop#146