Skip to content

TUI and Web UI companion pattern

The TUI and Web UI companion pattern describes a software architecture where a Terminal User Interface (TUI) and a Web User Interface (Web UI) are developed as distinct but interoperable applications that manage the same underlying data source^[001-TODO__Hermes_HUD_UI_-_AI_Agent_网页监控面板.md].

This pattern allows users to choose the interaction model that best fits their workflow—command-line efficiency versus graphical richness—without data duplication or sync issues^[001-TODO__Hermes_HUD_UI_-_AI_Agent_网页监控面板.md].

Architecture and Data Synchronization

In this pattern, both the TUI and Web UI are independent processes that connect to a shared persistence layer^[001-TODO__Hermes_HUD_UI_-_AI_Agent_网页监控面板.md].

  • Shared Data Source: Both interfaces read from and write to the same directory or database^[001-TODO__Hermes_HUD_UI_-AI_Agent_网页监控面板.md]. In the Hermes HUD UI example, the TUI and Web UI both access the ~/.hermes/ directory to retrieve Agent state, memory, and skills^[001-TODO__Hermes_HUD_UI-_AI_Agent_网页监控面板.md].
  • Concurrency: Because they operate on the same data, the two interfaces can typically run simultaneously^[001-TODO__Hermes_HUD_UI_-AI_Agent_网页监控面板.md]. Actions taken in the TUI (e.g., starting a task) are immediately reflected in the Web UI, provided the Web UI implements a real-time update mechanism^[001-TODO__Hermes_HUD_UI-_AI_Agent_网页监控面板.md].
  • Real-Time Communication: While the TUI often relies on direct file polling or refresh cycles, the Web UI frequently employs technologies like [[WebSocket]] connections to push updates to the browser instantly, without manual refreshing^[001-TODO__Hermes_HUD_UI_-_AI_Agent_网页监控面板.md].

Functional Divergence

Although both interfaces manage the same core entity, they often diverge in functionality to leverage the unique strengths of their respective platforms^[001-TODO__Hermes_HUD_UI_-_AI_Agent_网页监控面板.md].

Role of the TUI

The TUI typically focuses on speed, low resource usage, and integration with developer workflows. * Primary Interaction: Text-based input and keyboard-driven navigation^[001-TODO__Hermes_HUD_UI_-AI_Agent_网页监控面板.md]. * Environment: Runs directly in the terminal, suitable for SSH sessions or headless servers^[001-TODO__Hermes_HUD_UI-_AI_Agent_网页监控面板.md].

Role of the Web UI

The Web UI acts as a "companion" that extends visibility and control. It often includes features that are difficult to implement in a standard terminal emulator^[001-TODO__Hermes_HUD_UI_-AI_Agent_网页监控面板.md]. * Enhanced Visualization: Provides tabbed views that might be cluttered in a terminal, such as dedicated tabs for Memory, Sessions, or Cost tracking^[001-TODO__Hermes_HUD_UI-AI_Agent_网页监控面板.md]. * Richer Interaction: Supports complex UI elements like command palettes (Ctrl+K), theme switchers, or mouse-driven charts^[001-TODO__Hermes_HUD_UI-AI_Agent_网页监控面板.md]. * New Metrics: Can introduce tracking capabilities that were not present in the original TUI. For example, the Hermes Web UI added a feature to track Token spending by model, which was not available in the original TUI version^[001-TODO__Hermes_HUD_UI-_AI_Agent_网页监控面板.md].

Implementation Considerations

Implementing this pattern effectively requires clear separation of concerns between the data logic and the presentation layer^[001-TODO__Hermes_HUD_UI_-_AI_Agent_网页监控面板.md].

  • Independent Installation: The Web UI is often packaged as an optional add-on or a separate installation target (e.g., an extra dependency like [tui] or a standalone git clone) rather than being bundled into the core application^[001-TODO__Hermes_HUD_UI_-_AI_Agent_网页监控面板.md].
  • Language Interoperability: The core application might be written in one language (e.g., Python), while the Web UI server uses another (e.g., Node.js), communicating through the shared data layer^[001-TODO__Hermes_HUD_UI_-_AI_Agent_网页监控面板.md].
  • [[Client-Server Model]]: The underlying network architecture often used by the Web UI component.
  • [[Headless Mode]]: Running the core application without a graphical interface, which the Web UI then connects to.
  • [[Dashboard]]: The Web UI often serves as a dashboard for the TUI's underlying data.

Sources

  • 001-TODO__Hermes_HUD_UI_-_AI_Agent_网页监控面板.md