Ink = "把 React 渲染到终端"。你写的还是 React 组件、JSX、Hooks，但它渲染出来的不是网页 DOM，而是终端里的字符。对照理解：

本项目用的是自研 fork 的 Ink——工作区包 packages/@ant/ink，通过别名 @anthropic/ink 引用。src/ 下很多同名文件只是再导出（如 src/hooks/useTerminalSize.ts 全文就一行 export { useTerminalSize } from '@anthropic/ink'）。

Day 02 见过 replLauncher 挂载 App > REPL。App.tsx 只做一件事——套 4 层 Provider。真实全文（src/components/App.tsx:20）：

export function App({ getFpsMetrics, stats, initialState, children }) {
  return (
    <FpsMetricsProvider getFpsMetrics={getFpsMetrics}>       {/* 帧率统计 */}
      <StatsProvider store={stats}>                          {/* 运行统计 */}
        <AppStateProvider initialState={initialState} ...>    {/* ★ 全局状态 store */}
          <ThemeProvider initialState={getGlobalConfig().theme} ...>  {/* 主题 */}
            {children}                                        {/* ← 里面就是 REPL */}
          </ThemeProvider>
        </AppStateProvider>
      </StatsProvider>
    </FpsMetricsProvider>
  );
}

screens/REPL.tsx（6000+ 行）是主界面。它挂了一串"零高度"的键位处理器 + 一个三区布局。简化版：

三个核心组件：Messages（消息历史，L04）、PromptInput（输入框，Day 18 精讲）、SpinnerWithVerb（那个转圈 + "Thinking…"）。整个界面只有两种屏 'prompt' | 'transcript'（Ctrl+O 切换）。

你看到的对话记录，就是一个消息数组被渲染成一条条组件。链路是 REPL → Messages → MessageRow → Message：

• REPL 不自己 map，把数组交给 <Messages>。
• Messages.tsx 归一化/分组/折叠后，用 renderMessageRow（Messages.tsx:787）把每条转成一个带唯一 key 的 <MessageRow>（memo 化）。消息多时走虚拟滚动 VirtualMessageList（:119）。
• 单条消息由 Message.tsx 的 switch(message.type) 分派：assistant / user / system / tool_use / … assistant 内部再按 block 类型分派到 components/messages/ 下的组件。

Day 03 讲了 API 层流式吐字。到界面这层有个巧妙处理——已定稿的消息走列表，正在流式的文本作为列表后面一个"独立兄弟节点"实时渲染。真实代码（Messages.tsx:954）：

{streamingText && !isBriefOnly && (
  <Box alignItems="flex-start" flexDirection="row" marginTop={1} width="100%">
    <Box flexDirection="row">
      <Box minWidth={2}><Text color="text">{BLACK_CIRCLE}</Text></Box>  {/* 那个 ● */}
      <Box flexDirection="column">
        <StreamingMarkdown>{streamingText}</StreamingMarkdown>   {/* ← 正在流的文本 */}
      </Box>
    </Box>
  </Box>
)}

REPL 里一个值得学的模式——消息数组的"真值"存在 ref 里，state 只是给渲染看的投影。真实代码（REPL.tsx:1486）：

const [messages, rawSetMessages] = useState(initialMessages ?? []);
const messagesRef = useRef(messages);
// ... 包装 setMessages：
function setMessages(action) {
  const next = typeof action === 'function' ? action(messagesRef.current) : action;
  messagesRef.current = next;    // ← 立刻同步写 ref（马上能读到最新）
  // ...
  rawSetMessages(next);          // ← 再触发 state 更新（异步提交、驱动重渲染）
}

同理流式文本长度用 responseLengthRef——每个字增量只更新 ref、不触发重渲染，spinner 靠动画帧去读它显示进度。这样几千个字增量不会引发几千次重画。

把今天的性能手法串一下——它们都在解决同一问题：终端重画很贵，必须把"高频变化"和"大而稳定"的部分隔离开。

✋ 动手：对着真实代码读一遍

# 1. 根组件树 4 层 Provider（L02）
cat src/components/App.tsx

# 2. REPL 三区布局（搜关键组件）
grep -n "FullscreenLayout\|<Messages\|<PromptInput\|SpinnerWithVerb" src/screens/REPL.tsx | head

# 3. 流式文本独立渲染（L05）
sed -n '954,966p' src/components/Messages.tsx

# 4. ref 当真值源（L06）
sed -n '1486,1531p' src/screens/REPL.tsx