fix(tui): comprehensive TUI improvements and bug fixes
Merged
JU
1y ago+303+303+012345678901234567890123456789-113-113-012345678901234567890123456789
Summary
Major TUI improvements including visual enhancements, bug fixes, and new features.
New Features
- Copy to Clipboard (
ykey): Copy selected row data (vim-style keybind) - Export Feedback: Status messages for copy/export operations (shown in footer for 2 seconds)
- Stacked Bar Chart: Overview bars show usage breakdown by model color
Visual Improvements
- Responsive Model Column: Expands based on terminal width instead of clipping
- Sort Indicators: ▲/▼ arrows on active sort column
- Subtle Zebra Striping: Dark gray (#232328) alternating rows for readability
- Cleaner UI: Removed ugly borders from Models/Daily tabs, removed duplicate labels
Bug Fixes
- Fixed Overview Tab Selection: Blue highlight now properly follows arrow key navigation
- Root cause: Keyboard handler only updated
scrollOffset, neverselectedIndex - Selection check
scrollOffset + i === selectedIndexalways failed
- Root cause: Keyboard handler only updated
- Fixed Row Selection Reactivity: Blue highlight updates when navigating with ↑↓
- Root cause:
<text>elements usebgprop, notbackgroundColor - Used
createMemoinside<For>loop for proper Solid.js reactivity
- Root cause:
Code Quality
- Removed unused
ModelListItemcomponent (inlined due to Solid.js reactivity) - Dead code removal, edge case handling, performance optimizations
- Added keyboard modifier types to
opentui.d.ts
Technical Details
- OpenTUI's
<text>usesbgfor background color,<box>usesbackgroundColor - Solid.js
<For>requirescreateMemoinside callback for external signal reactivity - Component boundaries can break reactivity when passing accessor props
Files Changed
App.tsx- Keyboard handling, copy/export with status messagesModelView.tsx- Responsive columns, striping, sort cues, selection fixDailyView.tsx- Striping, selection fixOverviewView.tsx- Inline rendering for selection reactivityBarChart.tsx- Stacked bars with model colorsFooter.tsx- Status message display, updated hintsStatsView.tsx- Remove duplicate labelindex.ts- Removed unused ModelListItem export