UI Widgets & Components
Relevant source files
The following files were used as context for generating this wiki page:
Introduction
The UI Widgets & Components system in WIREDUP provides a multi-layered interface strategy comprising a high-performance Rust-based Terminal User Interface (TUI) and a responsive web-based landing page. The TUI, known as NexTerm, is built using the ratatui and crossterm libraries to provide a modern, interactive command-line experience with advanced features like split panes, tabs, and real-time status panels. Sources: rust-terminal/src/ui/tui.rs:1-30, rust-terminal/README.md:10-25.
This system serves as the primary interaction layer for the AI Auto-Wiring Engine, allowing users to execute commands, manage SSH connections, and view AI suggestions through a structured visual layout. The architecture is designed to bridge low-level terminal performance with high-level AI orchestration, ensuring real-time feedback and visual clarity for complex dependency injection tasks. Sources: rust-terminal/src/main.rs:20-45, public/index.html:150-180.
NexTerm TUI Architecture
The TUI architecture is centered around the TerminalUI struct, which manages the application state, input buffers, and the rendering lifecycle. It utilizes a vertical layout split into distinct functional areas: tabs, main content (output and side panels), command input, and a global status bar. Sources: rust-terminal/src/ui/tui.rs:20-35, rust-terminal/src/ui/tui.rs:88-100.
UI Layout Structure
The interface is divided into four primary constraints to ensure logical separation of data:
- Tabs (Length 3): Displays active sessions and navigation.
- Main Content (Minimum 10): The primary area for terminal output and specialized panels.
- Command Input (Length 3): Dedicated area for user typing and command entry.
- Status Bar (Length 3): Global indicators for AI and Auto-Wire status.
Sources: rust-terminal/src/ui/tui.rs:90-105
Rendering Flow
The following diagram illustrates the data flow from the terminal core through the UI rendering engine:
The UI rendering logic dynamically adjusts based on the show_autowire_panel state, enabling side-by-side comparison of terminal output and internal service discovery data. Sources: rust-terminal/src/ui/tui.rs:107-124
Core UI Components
1. Auto-Wire Panel
This component provides a live view into the AI Auto-Wiring system. It displays the current connection status and a list of discovered services. Sources: rust-terminal/src/ui/tui.rs:154-175.
| Feature | Description | Source |
|---|---|---|
| Status Indicator | Displays "Connected", "Initializing", or "Disabled". | tui.rs:159 |
| Service List | Iterates through terminal.get_autowire_services() and renders a list. | tui.rs:175 |
| Overflow Handling | Shows "... and X more" if more than 10 services are registered. | tui.rs:188 |
2. Command Input & Cursor Management
The input component handles real-time character insertion, backspace operations, and cursor positioning. It supports command history navigation through Up and Down arrow keys. Sources: rust-terminal/src/ui/tui.rs:215-250, rust-terminal/src/main.rs:160-175.
3. Tab Management
NexTerm supports multi-tabbed environments, allowing users to switch between different terminal contexts or agents.
new_tab(): Appends a new tab title to thetabsvector and sets it as active.next_tab(): Cycles through the active tab index using a modulo operation.close_tab(): Removes the active tab while ensuring at least one tab remains.
Sources: rust-terminal/src/ui/tui.rs:264-285
Web Interface Components
The project includes a web-based landing page (public/index.html) that serves as a visual showcase for the architecture and quick-start instructions. It uses a modern CSS3-driven design with the following key components:
- Stat Cards: Visual blocks displaying project metrics like "7,570+ Lines of Code" and "52 Total Files". Sources: public/index.html:185-205.
- Architecture Diagram: A pre-formatted ASCII block enclosed in
<pre>tags representing the relationship between NexTerm and the Python AI system. Sources: public/index.html:260-285. - Feature Grid: A responsive grid showing icons and descriptions for the Auto-Wiring Engine, SSH Security, and MCP Protocol. Sources: public/index.html:215-255.
Event Handling & Keyboard Shortcuts
The UI system maps specific key combinations to internal state changes, particularly for AI-driven features.
Keybindings Table
| Keybinding | Component Action | Target Module |
|---|---|---|
Ctrl+T | Create New Tab | ui/tui.rs |
Ctrl+Space | Toggle AI Suggestions/Panel | ui/tui.rs |
Ctrl+A | Show Auto-Wire Status | ui/tui.rs |
Ctrl+S | Show Registered Services | ui/tui.rs |
Ctrl+F | Open Fuzzy Finder | ui/tui.rs |
Sources: rust-terminal/README.md:110-125, rust-terminal/src/main.rs:135-155
Summary
The UI Widgets & Components system successfully integrates a highly interactive Rust TUI with the complex backend of the AI Auto-Wiring system. By utilizing the ratatui framework, NexTerm provides a structured, responsive environment that exposes internal AI state (services, status, and suggestions) directly to the user in a terminal-native format. The inclusion of a web-based interface further extends the project's accessibility, providing a comprehensive documentation and feature overview. Sources: rust-terminal/src/main.rs:15-30, rust-terminal/README.md:210-220.