OpenCode TUI 概览

OpenCode TUI (Terminal User Interface) 是一个基于 SolidJS 和 opentui 构建的现代化终端用户界面，提供流畅、高效的 AI 编程助手体验。

核心特性

  • 流式渲染: 60 FPS 高帧率渲染，支持实时流式更新
  • 声明式组件: 基于 SolidJS 的响应式组件模型
  • 智能交互: 自动补全、命令面板、快捷键系统
  • 主题系统: 自动检测终端背景色，支持深色/浅色模式
  • 高效性能: Binary Search 优化、内存管理、懒加载

技术栈

技术用途版本
SolidJSUI 框架最新
opentuiTUI 渲染引擎@opentui/solid, @opentui/core
Bun运行时1.3+
Tree-sitter语法高亮内置

快速开始

# 启动 TUI
bun dev

# 在特定目录运行
bun dev /path/to/project

# 带初始提示
bun dev --prompt "help me fix tests"

目录结构

packages/opencode/src/cli/cmd/tui/
├── app.tsx                 # 根应用组件
├── index.ts                # TUI 入口
├── attach.ts               # 附加到远程服务器
├── context/                # Context Providers
│   ├── route.tsx           # 路由管理
│   ├── sync.tsx            # 数据同步
│   ├── sdk.tsx             # SDK 通信
│   ├── local.tsx           # 本地状态
│   ├── theme.tsx           # 主题
│   ├── keybind.tsx         # 快捷键
│   └── ...
├── routes/                 # 页面路由
│   ├── home.tsx            # 首页
│   └── session/
│       ├── index.tsx       # 会话页
│       ├── header.tsx       # 会话头部
│       ├── footer.tsx       # 会话底部
│       └── sidebar.tsx      # 侧边栏
├── component/              # 可复用组件
│   ├── prompt/
│   │   ├── index.tsx       # 输入框组件
│   │   ├── autocomplete.tsx # 自动补全
│   │   ├── history.tsx     # 历史记录
│   │   └── stash.tsx       # 暂存功能
│   ├── dialog-*.tsx        # 各种对话框
│   └── *.tsx              # 其他组件
├── ui/                    # UI 基础组件
│   ├── dialog.tsx          # 对话框框架
│   ├── toast.tsx           # 提示框
│   └── ...
└── util/                  # 工具函数

架构图

核心概念

Provider 系统

TUI 使用 12 个 Context Provider 来管理应用状态和功能：

Provider用途
RouteProvider路由导航
SDKProvider服务端 API 通信
SyncProvider数据同步和状态管理
LocalProvider本地偏好设置
ThemeProvider主题和颜色
KeybindProvider快捷键系统
DialogProvider对话框管理
CommandProvider命令面板
ToastProvider提示消息
KVProvider键值存储
ArgsProvider命令行参数
ExitProvider退出处理

路由系统

TUI 采用简单的基于类型路由：

type Route =
  | { type: "home"; initialPrompt?: PromptInfo }
  | { type: "session"; sessionID: string; initialPrompt?: PromptInfo }

消息流

下一步