React Ink Terminal Canvas Rendering & NanoStores Reactive Bus
Decrypting the TUI ui-tui/src/ component subscription model and unidirectional state flow
📊 Figure 6-1-1: TUI architecture: backend push updates, NanoStores bus distribution, and React Ink mount rendering topology
📺 1. React Ink Terminal Rendering Mechanism
Hermes' console interface uses the Node.js-based React Ink framework. React Ink builds a hidden virtual DOM tree in the terminal, translating standard Flexbox layout and text nodes into ANSI escape sequences and character coordinates, refreshed via Blessed/Crossterm output.
📊 Figure 6-1-2: TUI terminal visual dashboard and data card rendering architecture
⚙️ 2. NanoStores State Subscription & Unidirectional Flow
To avoid cumbersome prop drilling, the TUI introduces NanoStores state management, defining independent chat atoms $chatState, shell process atoms $shellState, and config atoms $configState. React components reactively mount via useStore.