Pi TUI 设计
位置
packages/tui/src/
概述
Pi 的 TUI 是手写的终端渲染器，不是基于 Ink/Blessed/React 的。它使用自研的 differential renderer 实现高效屏幕更新。
核心设计
app.tsx (React-like 入口)
↓
renderer.ts (自研 differential renderer)
↓
terminal output三种 CLI 输出模式
Pi 支持多种输出格式，和 Hermes 的 --print/--json 类似：
| 模式 | 用途 | 实现 |
|---|---|---|
| Interactive | TUI 交互 | 自研渲染器 |
| 管道/脚本 | STDOUT 纯文本 | |
| JSON | 程序化消费 | JSON 行 |
| RPC | 远程调用 | JSON-RPC |
Interactive Mode 组件
Pi TUI 使用类似 React 的组件模型：
typescript
// 概念代码
<App>
<Header />
<ChatList messages={messages} />
<ToolProgress active={toolCalls} />
<InputBox onSend={handleSend} />
</App>Differential Renderer
Pi 的渲染器优化策略：
- 维护上一帧的屏幕 buffer
- 新帧对比旧帧，只输出变化行
- 利用 ANSI escape codes 移动光标
这类似 React 的 Virtual DOM diff，但针对终端优化。
与 Hermes TUI 对比
| 维度 | Pi TUI | Hermes TUI |
|---|---|---|
| 技术 | 自研 renderer | React Ink + TypeScript |
| 组件模型 | 自研类 React | 真正的 React hooks |
| 复杂度 | 低（自包含） | 中（npm 依赖） |
| 学习曲线 | 高（自研 DSL） | 低（标准 React） |
与 OpenCode TUI 对比
| 维度 | Pi TUI | OpenCode TUI |
|---|---|---|
| 技术 | 自研 | @opentui + Solid |
| 渲染方式 | 差异渲染 | 完整重渲染 |
| 架构 | 内联 agent | SDK-driven to server |
| 功能 | 基础聊天 | 文件树/编辑器/diff/权限 |