teernisse 79ab17488e feat: add TUI reusable components: metric cards, sparklines, tab bar, and status bar ...

Implement shared UI components used across the dashboard tabs:

- tui/components/card.go: Three components:

  * MetricCard: bordered card with label (muted), value (bold), and
    optional delta (dim) — used for the dashboard's top-level KPIs.

  * MetricCardRow: renders N cards side-by-side using lipgloss
    horizontal join, auto-calculating card width from available space.

  * Sparkline: theme-colored Unicode block sparkline (8-level,
    auto-scaled to series max). Used in Dashboard and Trends tabs.

  * ProgressBar: filled/empty bar (accent + dim) with percentage
    label. Used in the Budget tab for plan-relative spend.

- tui/components/statusbar.go: Bottom status bar with left-aligned
  keybinding hints ([f]ilter [?]help [q]uit), current filter info,
  and right-aligned data age indicator. Padding auto-fills to
  terminal width.

- tui/components/tabbar.go: 10-tab navigation bar split across two
  rows (Dashboard/Costs/Sessions/Models/Projects on row 1,
  Trends/Efficiency/Activity/Budget/Settings on row 2). Each
  inactive tab highlights its keyboard shortcut letter with [bracket]
  notation. Active tab renders in accent color. Settings uses 'x'
  as its shortcut (not present in the name, so appended). TabIdxByKey
  maps key presses to tab indices.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

2026-02-19 13:02:59 -05:00

2.2 KiB

Raw Blame History

View Raw