第 14 章：屏幕上的每一帧

// → src/screens/REPL.tsx 的 query() 消费（简化版）
for await (const event of query({messages, systemPrompt, ...})) {
  onQueryEvent(event)
}

// → src/utils/messages.ts 的 handleMessageFromStream() 函数（简化版）
export function handleMessageFromStream(event, {
  onSetStreamMode,
  onStreamingText,
  onStreamingToolUses,
  onMessage,
}) {
  switch (event.type) {
    case 'content_block_start':
      if (event.content_block.type === 'text') {
        onSetStreamMode('responding')
      }
      break

    case 'content_block_delta':
      if (event.delta.type === 'text_delta') {
        // 追加文字——逐字流式更新
        onStreamingText(text => (text ?? '') + event.delta.text)
      }
      if (event.delta.type === 'input_json_delta') {
        // 工具输入流式更新
        onStreamingToolUses(/* ... */)
      }
      break

    default:
      if (event.type === 'assistant') {
        onMessage(event)
      }
  }
}

// → src/screens/REPL.tsx 的流式状态
const [streamingText, setStreamingText] = useState<string | null>(null)
const [streamingToolUses, setStreamingToolUses] = useState<StreamingToolUse[]>([])
const [streamingThinking, setStreamingThinking] = useState<StreamingThinking | null>(null)

// → src/screens/REPL.tsx 的 visibleStreamingText
const visibleStreamingText = streamingText
  ? streamingText.substring(0, streamingText.lastIndexOf('\n') + 1) || null
  : null

// → src/components/Message.tsx 的 MessageImpl() 组件（简化版）
function MessageImpl({ message }) {
  switch (message.type) {
    case 'assistant':
      return message.message.content.map(block => {
        switch (block.type) {
          case 'text': return <AssistantTextMessage block={block} />
          case 'tool_use': return <AssistantToolUseMessage block={block} />
          case 'thinking': return <ThinkingBlock block={block} />
        }
      })
    case 'user':
      return <UserMessage message={message} />
    case 'system':
      return message.subtype === 'compact_boundary'
        ? <CompactBoundaryMessage />
        : <SystemTextMessage text={message.text} />
    case 'grouped_tool_use':
      return <GroupedToolUseContent message={message} />
  }
}

// → src/ink/ink.tsx 的 Ink 类（简化版）
class Ink {
  render(node: ReactNode): void {
    this.currentNode = node
    const tree = <App ...>{node}</App>
    reconciler.updateContainerSync(tree, this.container, null, noop)
    reconciler.flushSyncWork()
  }

  resetAfterCommit() {
    this.rootNode.onComputeLayout()  // Yoga 布局计算
    this.scheduleRender()             // 调度帧渲染
  }
}

// → src/ink/ink.tsx 的帧间隔常量
const FRAME_INTERVAL_MS = 16  // ~60fps

const deferredRender = (): void => queueMicrotask(this.onRender)
this.scheduleRender = throttle(deferRender, FRAME_INTERVAL_MS, {
  leading: true,
  trailing: true,
})

// → src/ink/ink.tsx 的 onRender() 方法（简化版）
onRender() {
  // 1. 渲染 DOM 树到 Screen 缓冲
  const frame = this.renderer({
    frontFrame: this.frontFrame,
    backFrame: this.backFrame,
    isTTY, terminalWidth, terminalRows,
  })

  // 2. 交换前后帧
  this.backFrame = this.frontFrame
  this.frontFrame = frame

  // 3. 差异对比
  const diff = this.log.render(prevFrame, frame)

  // 4. 优化补丁
  const optimized = optimize(diff)

  // 5. 写入终端
  writeDiffToTerminal(this.terminal, optimized)
}

// → src/ink/render-node-to-output.ts 的 renderNodeToOutput() 函数（简化版）
function renderNodeToOutput(node, output, options) {
  if (canBlit(node, options.prevScreen, nodeCache)) {
    // 直接从上一帧的屏幕缓冲复制单元格
    output.blit(prevScreen, rect)
    return  // 跳过整棵子树的重新渲染
  }

  for (const child of node.childNodes) {
    renderNodeToOutput(child, output, options)
  }
}

// → src/components/Markdown.tsx 的 Markdown 组件（简化版）
function Markdown({ content }) {
  const tokens = marked.lexer(content)  // 500 条 LRU 缓存
  return tokens.map(token => renderToken(token))
}

console.log('[DEBUG] onRender at:', Date.now(), 'terminal size:', this.terminalColumns + 'x' + this.terminalRows)

console.log('[DEBUG] Message type:', message.type, 'subtype:', message.subtype ?? 'none')

console.log('[DEBUG] Visible messages:', visibleStart, '-', visibleEnd, 'of', total)