TUI & React Ink

React Ink 终端画布绘制与 NanoStores 响应式总线

解密 TUI 界面层 ui-tui/src/ 组件订阅模型与单向状态流传递
TUI 状态响应流
📊 图 6-1-1：TUI 架构：后台推送更新、NanoStores 总线分配与 React Ink 挂载渲染拓扑图

📺 1. React Ink 终端绘制机理

Hermes 的控制台界面使用了基于 Node.js 运转的 React Ink 框架。React Ink 会在终端构建一个隐藏的虚拟 DOM 树，将标准的 Flexbox 弹性盒子和文本节点翻译为 ANSI 转义序列和字符坐标，由 Blessed / Crossterm 刷新输出。

TUI 布局
📊 图 6-1-2：TUI 终端可视化仪表盘与数据卡片渲染架构图

⚙️ 2. NanoStores 状态订阅与单向流

在 TUI 中，为了避免繁琐的属性层级透传，界面层引入了 NanoStores 状态管理，定义独立的聊天原子 $chatState、外壳进程原子 $shellState、配置原子 $configState，React 组件通过 useStore 进行反应式挂载。