OpenCode TUI 设计
技术栈
OpenCode TUI 使用：
- Solid.js：响应式 UI 框架
- @opentui：自研终端 UI 框架（Ink-like，但基于 Solid）
- Effect：依赖注入和异步管理
架构
packages/tui/src/app.tsx
↓
Solid components (JSX)
↓
@opentui renderer
↓
terminal outputSDK-Driven 模式
这是 OpenCode TUI 最大的特点：TUI 并不直接嵌入 agent，而是通过 SDK 连接 to server：
TUI app
↓
SDK client.connect(serverUrl)
↓
HTTP / event stream
↓
server → SessionV2 → SessionRunner
↓
events 推回 TUI这允许：
- TUI 和 server 分离部署
- 多个 TUI/web 客户端同时连接同一个 session
- 没有 agent runtime 在 TUI 进程中
视图组件
| 组件 | 功能 |
|---|---|
ChatView | 聊天消息列表 |
EditorView | 代码编辑器 |
FileTreeView | 文件浏览器 |
DiffView | 代码差异对比 |
ToolProgressView | 工具执行进度 |
PermissionView | 权限确认弹窗 |
SessionSwitcher | 切换 session |
三种 TUI 对比
| 维度 | Pi TUI | OpenCode TUI | Hermes TUI |
|---|---|---|---|
| 框架 | 自研 | Solid + @opentui | React + Ink |
| 架构 | 内联 agent | SDK → server | gateway/subprocess |
| 组件模型 | 自研类 React | Solid JSX | React JSX |
| 功能 | 基础聊天 | 完整 IDE-like | 聊天 + 工具进度 |
| 文件浏览器 | ❌ | ✅ | ❌ |
| Diff 查看 | ✅（基础） | ✅（高级） | ❌（文本输出） |
| Session 切换 | ❌ | ✅ | ✅ |
| 多客户端 | ❌ | ✅（SDK event stream） | ❌（单 gateway session） |