Improve TUI OTP readability with large digits and countdown bar #64

New Issue

hugo · 2026-08-10T11:36:18Z

hugo commented

2026-08-10 11:36:18 +00:00

Problem

OTP codes in the TUI are rendered in normal-sized text and can be difficult to find quickly. When the OTP field is selected, yellow text on the blue selection background has inadequate contrast. Other selected fields also use foreground colors that do not maintain readable contrast against the selection bar.

Required behavior

Render the current TOTP code prominently on OTP entries without requiring the user to move focus to a particular field.
When terminal dimensions permit, use responsive ASCII-art digits whose glyphs are built from the corresponding digits.
Fall back cleanly to a compact code display on small terminals.
Show a bar below the large code that counts down the remaining validity interval and updates automatically.
Replace the displayed code at the period boundary and reset the countdown bar.
Make selected rows and fields readable in color and monochrome modes, including the OTP code; selection styling must provide sufficient contrast and must not preserve conflicting field foreground colors.
Keep OTP timing and code-generation decisions in crates/storage; the TUI only presents storage-provided state.

Acceptance criteria

Deterministic tests cover large and compact layouts, countdown progress, period-boundary code replacement, and selection contrast.
The large display is visible whenever an OTP entry is shown and space permits, independent of field focus.
Narrow and short terminals remain usable without clipping or panics.
Color and monochrome selection styles remain legible.
All repository gates pass.

## Problem OTP codes in the TUI are rendered in normal-sized text and can be difficult to find quickly. When the OTP field is selected, yellow text on the blue selection background has inadequate contrast. Other selected fields also use foreground colors that do not maintain readable contrast against the selection bar. ## Required behavior - Render the current TOTP code prominently on OTP entries without requiring the user to move focus to a particular field. - When terminal dimensions permit, use responsive ASCII-art digits whose glyphs are built from the corresponding digits. - Fall back cleanly to a compact code display on small terminals. - Show a bar below the large code that counts down the remaining validity interval and updates automatically. - Replace the displayed code at the period boundary and reset the countdown bar. - Make selected rows and fields readable in color and monochrome modes, including the OTP code; selection styling must provide sufficient contrast and must not preserve conflicting field foreground colors. - Keep OTP timing and code-generation decisions in crates/storage; the TUI only presents storage-provided state. ## Acceptance criteria - Deterministic tests cover large and compact layouts, countdown progress, period-boundary code replacement, and selection contrast. - The large display is visible whenever an OTP entry is shown and space permits, independent of field focus. - Narrow and short terminals remain usable without clipping or panics. - Color and monochrome selection styles remain legible. - All repository gates pass.

hugo added this to the 02 - Mutt-style terminal UI milestone 2026-08-10 11:36:18 +00:00

hugo added the bug label 2026-08-10 11:36:18 +00:00

hugo commented

2026-08-10 12:23:24 +00:00

Implemented and pushed in commit cec1cc3.

Implementation:

Extended the storage-owned timed OTP validity contract with the complete TOTP period, so progress rendering never parses a URI or invents timing.
Opening a TOTP entry now requests its read-only code without requiring focus on the OTP field.
The displayed TOTP survives j/k, arrows, and Tab field navigation and refreshes by its stored field identity at the exact boundary.
Viewer panes with sufficient width and height render five-row ASCII-art glyphs made only from each corresponding digit.
A storage-period-driven bar below the large digits shows elapsed validity and resets with the replacement code.
Short and narrow panes use a centered compact code with remaining seconds; the 40x8 minimum layout remains usable and displays the compact code.
Selected viewer and editor fields override every nested foreground/background color, eliminating low-contrast OTP, label, metadata, masked-value, and cursor combinations.
Monochrome conversion translates selections to reverse video before removing colors.
Scratch strings used to build large OTP glyph rows are zeroized after rendering.
Updated the TUI interaction documentation and shared OTP frontend contract.

Deterministic tests cover automatic focus-independent generation, large and compact layouts, the 40x8 fallback, countdown progress, zero, boundary replacement, bar reset, color selection overrides, monochrome reverse-video selection, QR resize, and relock cleanup.

Required gates passed:

cargo fmt --all -- --check
RUSTFLAGS="-D warnings" cargo check --workspace --all-targets
cargo clippy --workspace --all-targets -- -D warnings
cargo test --workspace

All 83 TUI tests and the complete workspace suite pass.

Implemented and pushed in commit cec1cc3. Implementation: - Extended the storage-owned timed OTP validity contract with the complete TOTP period, so progress rendering never parses a URI or invents timing. - Opening a TOTP entry now requests its read-only code without requiring focus on the OTP field. - The displayed TOTP survives j/k, arrows, and Tab field navigation and refreshes by its stored field identity at the exact boundary. - Viewer panes with sufficient width and height render five-row ASCII-art glyphs made only from each corresponding digit. - A storage-period-driven bar below the large digits shows elapsed validity and resets with the replacement code. - Short and narrow panes use a centered compact code with remaining seconds; the 40x8 minimum layout remains usable and displays the compact code. - Selected viewer and editor fields override every nested foreground/background color, eliminating low-contrast OTP, label, metadata, masked-value, and cursor combinations. - Monochrome conversion translates selections to reverse video before removing colors. - Scratch strings used to build large OTP glyph rows are zeroized after rendering. - Updated the TUI interaction documentation and shared OTP frontend contract. Deterministic tests cover automatic focus-independent generation, large and compact layouts, the 40x8 fallback, countdown progress, zero, boundary replacement, bar reset, color selection overrides, monochrome reverse-video selection, QR resize, and relock cleanup. Required gates passed: - cargo fmt --all -- --check - RUSTFLAGS="-D warnings" cargo check --workspace --all-targets - cargo clippy --workspace --all-targets -- -D warnings - cargo test --workspace All 83 TUI tests and the complete workspace suite pass.

hugo closed this issue

2026-08-10 12:23:24 +00:00

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: hugo/IronStorage#64