fix(tui): comprehensive TUI improvements and bug fixes

Merged
JU
1y ago
+303-113

Summary

Major TUI improvements including visual enhancements, bug fixes, and new features.

New Features

  • Copy to Clipboard (y key): 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, never selectedIndex
    • Selection check scrollOffset + i === selectedIndex always failed
  • Fixed Row Selection Reactivity: Blue highlight updates when navigating with ↑↓
    • Root cause: <text> elements use bg prop, not backgroundColor
    • Used createMemo inside <For> loop for proper Solid.js reactivity

Code Quality

  • Removed unused ModelListItem component (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> uses bg for background color, <box> uses backgroundColor
  • Solid.js <For> requires createMemo inside callback for external signal reactivity
  • Component boundaries can break reactivity when passing accessor props

Files Changed

  • App.tsx - Keyboard handling, copy/export with status messages
  • ModelView.tsx - Responsive columns, striping, sort cues, selection fix
  • DailyView.tsx - Striping, selection fix
  • OverviewView.tsx - Inline rendering for selection reactivity
  • BarChart.tsx - Stacked bars with model colors
  • Footer.tsx - Status message display, updated hints
  • StatsView.tsx - Remove duplicate label
  • index.ts - Removed unused ModelListItem export