Skip to content

feat: implement interactive TUI dashboard with ratatui#5

Merged
dev-dami merged 3 commits intomainfrom
feat/tui-dashboard
Feb 2, 2026
Merged

feat: implement interactive TUI dashboard with ratatui#5
dev-dami merged 3 commits intomainfrom
feat/tui-dashboard

Conversation

@dev-dami
Copy link
Owner

@dev-dami dev-dami commented Feb 2, 2026

Summary

Replaces the empty TUI placeholder with a full interactive dashboard built on ratatui and crossterm.

  • App struct manages engine, config, snapshot state, and tab selection
  • Event loop runs at the configured refresh rate with non-blocking input polling
  • Header bar shows module names as colored tabs, selected tab is bolded and underlined
  • Each module gets its own panel with a gauge bar for percentage metrics and a sorted key-value detail list
  • Footer shows keybinding hints (configurable via show_help)
  • All colors, borders, and labels come from gim_config.yaml theme settings
  • Keyboard navigation: q/Esc quit, Tab/arrows/h/l switch modules

Commits

  1. feat(tui): add App struct, event loop, and keyboard navigation
  2. feat(tui): implement header tabs and footer help bar
  3. feat(tui): add module panels with gauge bars and metric details

Summary by CodeRabbit

  • New Features
    • Added a complete terminal user interface for the application
    • Added tabbed navigation to view different modules
    • Added keyboard controls for navigation (arrow keys, tab) and application control
    • Added periodic metrics refresh with data visualization using gauges and formatted displays

✏️ Tip: You can customize this high-level summary in your review settings.

Implements the core TUI runtime: App holds engine, config, snapshot
state, and selected tab index. run_tui() sets up crossterm alternate
screen, runs a draw+poll loop at the configured refresh rate, and
handles q/Esc to quit plus Tab/arrows/h/l for tab switching. Cleans
up terminal state on exit. draw_ui is stubbed for the next commit.
draw_ui splits the terminal into header, content area, and footer.
Header shows module names as tabs with the selected one bolded and
underlined in its theme color. Footer shows keybinding hints. Both
respect the border style and chrome colors from config.
Each module gets a column panel with its themed border and title.
Modules with a percentage metric (cpu, memory, disk) show a colored
gauge bar at the top. Below it, all metrics are listed as key-value
pairs sorted alphabetically. Selected tab highlights its panel
border in the module's theme color. Large integer values auto-format
as KB/MB/GB.
Copy link
Owner Author

@dev-dami dev-dami left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good. Event loop handles KeyEventKind::Press correctly for Windows compat. Gauge bar only renders for modules with a percentage metric — right behavior. Theme integration via module_theme() is clean and will scale when new modules land. Terminal cleanup path is correct. One thing to note: the 200ms CPU sleep in CpuCollector will add latency to the first TUI refresh, but that's a collector-layer concern not a TUI one.

@coderabbitai
Copy link

coderabbitai bot commented Feb 2, 2026

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

A complete terminal user interface (TUI) implementation has been added to src/tui/mod.rs. This introduces a public App struct for managing UI state, a run_tui() entry function that manages the main event loop, and numerous private rendering and formatting helpers. The implementation uses Crossterm and Ratatui to handle event polling, layout management, widget composition, and state-driven updates with tabbed module navigation.

Changes

Cohort / File(s) Summary
Terminal UI Implementation
src/tui/mod.rs
Complete TUI system with public App struct and run_tui() function. Includes event loop with input handling (navigation, quit), state refresh from engine, rendering pipeline for header/modules/footer, data formatting utilities (metrics, gauges, byte display), and color theming logic.

Sequence Diagram

sequenceDiagram
    participant User
    participant App
    participant Engine
    participant Terminal
    
    User->>App: Start TUI (run_tui)
    App->>App: Initialize App state
    loop Event Loop
        User->>Terminal: Input events (tab, arrows, quit)
        Terminal->>App: Poll events
        alt Tab/Arrow Navigation
            App->>App: Update active tab/focus
        else Refresh Tick
            App->>Engine: Fetch current metrics/data
            Engine-->>App: Return data
            App->>App: Update App state (refresh)
        else Quit
            App->>Terminal: Cleanup & restore terminal
            Terminal-->>User: Exit TUI
        end
        App->>Terminal: Render layout (header/modules/footer)
        Terminal->>Terminal: Compose widgets (blocks, gauges, text)
        Terminal-->>User: Display frame
    end
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 A terminal so fine, with widgets all aligned,
Tab keys dance, and colors brightly signed,
Through Ratatui's art, our UI came alive,
With gauges, blocks, and metrics all to thrive!

✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/tui-dashboard

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@dev-dami dev-dami merged commit 64d95af into main Feb 2, 2026
2 of 4 checks passed
@dev-dami dev-dami deleted the feat/tui-dashboard branch February 2, 2026 03:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant