tf-drift

TUI Style System Success Story

Context

tf-drift already had a Bubble Tea dashboard and checkbox picker, but both views embedded raw ANSI styling directly in render functions. That made the interface harder to modernize and harder to adapt for low-color or high-contrast users.

Bet

A small semantic style layer can improve TUI polish and accessibility without rewriting scan behavior or changing non-interactive reports.

What Worked

• Central style helpers kept scan statuses and selection rows readable while removing duplicated ANSI decisions.
• minimal style gives users a plain rendering path and supports NO_COLOR.
• modern, classic, and accessible names create a stable public surface without committing to external theme files.
• Tests check readable text rather than exact escape codes, so future palette changes remain cheap.

Evidence

• Focused style tests pass for style resolution, scan view rendering, and selection picker rendering.
• Existing scan and selection model tests still exercise keyboard, mouse, paging, and detail navigation behavior.
• Follow-up row highlight tests verify focused rows remain line-separated, pad to the terminal width, and avoid nested styling that resets the highlight before the row text.

Reusable Pattern

Future TUI changes should add semantic render helpers before adding more inline terminal escape sequences. Use text labels for meaning first, then color and emphasis as optional reinforcement.

Focused rows should apply one outer row style after all visible text has been assembled. Avoid nested ANSI styles inside selected rows because reset codes can break the highlighted background.

Limits

This does not yet add a full pane dashboard, fuzzy filtering, or screen-reader-specific static progress mode. Those should be separate features with their own acceptance criteria.

This site is open source. Improve this page.