​
UI 渲染层

​
模块存在意义

Claude Code 不是传统的纯文本 CLI，它使用 React + Ink 组织终端 UI。因此，UI 层并不只是“打印文本”，而是在管理一套持续变化的交互界面。

​
关键文件与入口

文件/目录作用
src/components/各类终端 UI 组件，是交互式体验的主要渲染单元。
src/hooks/组合交互逻辑、状态订阅和键盘行为。
src/ink/对 Ink 渲染能力做封装，连接终端与 React。
src/screens/比组件粒度更大的完整界面，例如某些全屏交互场景。

​
对上游 / 下游的依赖关系

  • 上游：AppState、任务状态、QueryEngine 消息流、命令结果。
  • 下游：终端输出、键盘交互、会话可视化。

​
运行时扮演的角色

  • 渲染消息流、状态栏、任务面板、对话输入和提示。
  • 把后台状态变化变成用户可感知的界面反馈。
  • 承接多代理、bridge、任务前后台切换等复杂交互场景。

​
新读者建议的阅读顺序

  1. 先看 src/ink.ts 与 src/interactiveHelpers.tsx
  2. 再按功能浏览 src/components/
  3. 需要时进入 src/hooks/ 看交互逻辑
  4. 最后看 src/screens/ 里的完整场景

​
阅读时要注意什么

  • UI 层并不自己决定全部业务，它更多是在消费状态。
  • 很多组件与 hook 强依赖 AppState，读 UI 时最好同时打开状态定义。
  • 终端 UI 与 Web UI 的思考方式不同，布局与重绘策略都更偏向增量交互。