Skip to content

feat: config page overlay and panel toggle (Esc, 1-5)#39

Merged
graykode merged 8 commits intograykode:mainfrom
tbouquet:feat/config-page-v2
Apr 19, 2026
Merged

feat: config page overlay and panel toggle (Esc, 1-5)#39
graykode merged 8 commits intograykode:mainfrom
tbouquet:feat/config-page-v2

Conversation

@tbouquet
Copy link
Copy Markdown
Contributor

@tbouquet tbouquet commented Apr 18, 2026

Summary

  • Esc opens a config overlay to change theme and toggle panels
  • 1-5 toggles individual panels directly without opening config:
    • 1 Context 2 Quota 3 Tokens 4 Ports 5 Sessions
  • Hidden panels redistribute space to visible ones
  • Config overlay captures input while open (Esc/q to close)
  • Footer updated with new keybinding hints

Demo

config-demo

Shows: panel toggle (2/3 keys), config overlay (Esc), theme cycling, panel toggle from config

Design

  • Pure UI change: no file I/O, no process execution, no new dependencies
  • Panel visibility is stored as bools on App (session-scoped, not persisted)
  • Layout recalculates dynamically when panels are hidden
  • Projects panel always visible (provides essential git context)

Test plan

  • cargo clippy -- -D warnings passes
  • cargo test - all 31 tests pass
  • cargo build --release passes
  • Rebased on latest main (v0.2.12)
  • Security reviewed: no I/O, no Command, no fs ops in diff

Add a config overlay (Esc) for changing theme and toggling
panels. Press 1-5 to quickly show/hide panels without opening
the config page.

Panel mapping:
  1 — context    2 — quota    3 — tokens
  4 — ports      5 — sessions

Hidden panels redistribute space to visible ones. The config
overlay shows the current state of all settings with version
info, and captures input while open.
Copy link
Copy Markdown
Owner

@graykode graykode left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for this! Really like the direction — an Esc overlay + number keys is a nice way to let users shape the layout, and the dynamic redistribution works well.

A few things I noticed while reading through:

1. q in the config overlay quits abtop (small bug)

The PR description says "Esc/q to close" the overlay, but in main.rs the q branch inside the config_open block calls app.quit() instead of app.toggle_config(). So pressing q with the overlay open kills abtop rather than dismissing the overlay. I think the fix is just routing q to toggle_config() while the overlay is open.

2. Hiding all three toggleable mid panels also hides Projects

The PR description notes "Projects panel always visible (provides essential git context)", but:

let any_mid = app.show_quota || app.show_tokens || app.show_ports;
let mid_h_ideal: u16 = if any_mid { 8 } else { 0 };

If a user toggles off Quota, Tokens, and Ports, any_mid becomes false, mid_h becomes 0, and the whole mid row — including Projects — disappears. I think any_mid should effectively be true whenever Projects is shown, or the variable can just be dropped so the mid row always renders at least Projects.

3. Toggle key numbering vs. panel numbering in CLAUDE.md

CLAUDE.md documents the panels as ¹context ²quota ³tokens ⁴projects ⁵ports ⁶sessions, but the toggle keys are 1=context, 2=quota, 3=tokens, 4=ports, 5=sessions (skipping Projects). Users glancing at the layout diagram may expect 4 to toggle Projects and 5 to toggle Ports. Two possible fixes: (a) keep the CLAUDE.md numbering and leave 4 unbound since Projects is always on, or (b) update the CLAUDE.md panel numbers to match this PR's scheme. Either works — just worth being consistent.

4. Esc as an "open" key is a little unusual

In most TUIs, Esc means close/cancel. Using it to both open and close the config overlay works, but a more conventional pairing would be c (or ?) to open and Esc to close. Not blocking, just a small UX note — happy either way.

Nice-to-haves (not blockers)

  • The mid constraint construction in ui/mod.rs builds a Vec of Length(0) dummies just to count them, then rebuilds as Ratio(1, count). Could be simplified to counting directly:
    let count = 1 + app.show_quota as u32 + app.show_tokens as u32 + app.show_ports as u32;
    let mid_constraints: Vec<Constraint> = (0..count).map(|_| Constraint::Ratio(1, count)).collect();
  • The codex.rs clippy fix (match guard for user_message) is also included in #36, so whichever lands second will need a small rebase — nothing to do here, just a heads up.
  • A unit test for toggle_panel / config_select_next / config_select_prev would be easy and would lock in the bounds behavior (e.g. config_selected not overflowing config_item_count).
  • config_item_count hardcodes 6; deriving it from the item list (or a const) would keep it in sync if you add more options later.
  • Persisting panel visibility across runs (e.g. ~/.config/abtop/config.toml) would be a natural follow-up.

Thanks again — once #1 and #2 are addressed I think this is in great shape to merge. The rest are all discussable / follow-up material.

tbouquet and others added 2 commits April 19, 2026 13:11
- Fix q key in config overlay closing abtop instead of dismissing
  the overlay (route to toggle_config, not quit)
- Fix mid row disappearing when all toggleable panels are hidden:
  Projects is always visible, so the mid row always renders
- Use c to open config overlay instead of Esc (conventional UX:
  Esc means close/cancel, not open)
- Align CLAUDE.md panel numbering with toggle keys: Projects has
  no number (always visible), Ports is 4, Sessions is 5
Copy link
Copy Markdown
Owner

@graykode graykode left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the thorough follow-up! All review feedback addressed:

  • q in the overlay now correctly routes to toggle_config (blocker #1)
  • Mid row always renders since Projects is always visible (blocker #2)
  • Config open key changed to c; Esc reserved for close/cancel (UX #4)
  • CLAUDE.md panel numbering aligned with toggle keys: Projects unnumbered (always visible), Ports=4, Sessions=5 (UX #3)

Merge conflict with main (caused by PR #36 landing first and the prior redact_secrets hardening from #35) resolved by taking main's version, which is a superset of this PR's clippy fix. Verified locally: 35/35 tests pass, clippy clean. Merging now.

@graykode graykode merged commit ee83c57 into graykode:main Apr 19, 2026
7 checks passed
graykode added a commit to tbouquet/abtop that referenced this pull request Apr 20, 2026
Resolves conflicts with panel toggle/config overlay (graykode#39) and adds
selection clamping so the filter UI stays coherent when the currently
selected session is filtered out.
graykode added a commit to tbouquet/abtop that referenced this pull request Apr 20, 2026
Resolves conflicts with config overlay / panel toggle (graykode#39) and fixes
tree connector rendering: prefix is now 2 chars to fit the 3-wide agent
column (previously 6 chars, silently truncated to spaces). Footer also
shows tree on/off state and subagent status matches case-insensitively.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants