# TUI Implementation Plan
## Architectural Plan
* **New `tui` Subcommand:**
* A new `tui` subcommand will be added as the entry point for the text-based user interface. Executing `vitaly tui` will launch the interactive session.
* User should be allowed to quit tui mode with Ctrl+C.
* **Modular TUI Codebase:**
* The primary TUI entry point will be `src/commands/tui.rs`.
* If the TUI implementation grows beyond a single file, additional TUI-related modules will be placed within a new `src/commands/tui/` directory.
* This structure will help maintain the existing command module organization.
* **UI guidelines**
* Interface should follow TUI interface common practices:
* Support widget navigation with arrow keys and Tab
* Highlight currently active widget with widget border color and border backgound color.
* **UI/UX Structure:**
* **Primary View** The main screen will render several widgets. Consists of 2 columns. Left column takes 2/3 of horizontal space. Right column takes 1/3 of space.
* **KeymapWidget** Includes LayerSelectorWidget and LayerWidget. Placed in left column.
* **LayerSelectorWidget** Displays all current keyboard layers and highlights currently active layer. On active layer change widget should be updated to display which layer is active now.
* **LayerWidget** Draws keyboard keymap for layer selected with LayerSelectorWidget with attention to layout options. Displays keyboard keymap in a same way as layers subcommand.
* **KeyMappingWidget** Placed in right column and displays: layer, postion and long keycode of button selected in LayerWidget. Layer and position should be displayed on widget border while keycode should be rendered as editable input field.
## Implementation Roadmap
1. **Phase 1: Project Setup & TUI Foundation**
* Add `ratatui` and `crossterm` as dependencies to `Cargo.toml`.
* Implement the `tui` subcommand in `main.rs`.
* Create the main TUI file at `src/commands/tui.rs` and define the basic TUI application structure and event loop.
* Render a basic placeholder interface.
2. **Phase 2: Proof of Concept - Interactive Layout**
* **Implement Layout Data Logic:** In the TUI module, create new functions that use the `protocol` module to fetch keyboard layout definitions and keymaps.
* **Implement Layout Widget:** Create a TUI widget that can render a keyboard layout using the data structures from the previous step.
* **Display Layer 0:** On TUI startup, use the new logic to fetch data for Layer 0 and display it with the layout widget.
* **Implement Layer Switching:** Add controls to allow switching the displayed layer, which will call the data-fetching logic and re-render the widget.