把 Agent 接到浏览器

pi-web-ui 把同一个 agent 引擎搬进网页。核心组件是 ChatPanel：它订阅 AgentSession 的事件流，把 text / thinking / toolCall / toolResult 渲染成网页里的气泡、折叠块和工具卡片。

 浏览器 ChatPanel
     ▲   │ 用户输入
事件 │   ▼
 ┌───┴────────────┐
 │  传输层 (RPC)   │  ← 同 Ch.16 的 RPC 模式
 └───┬────────────┘
     ▼
  AgentSession ─▶ agentLoop（和 CLI 完全相同的引擎）

和 TUI 共享什么、不同什么

• 共享：引擎、会话、工具、压缩、权限——一切核心逻辑。
• 不同：只有最外层的渲染（DOM vs 终端字符）和传输（RPC / WebSocket vs 进程内）。

function ChatPanel({ session }) {
  const [blocks, setBlocks] = useState([])
  useEffect(() => {
    // subscribe(listener) 返回取消订阅函数，直接作为 cleanup
    return session.subscribe((ev) => {
      if (ev.type === "text_delta") appendText(ev.delta)
      if (ev.type === "tool_call") addToolCard(ev)
      if (ev.type === "tool_result") resolveToolCard(ev)
    })
  }, [session])
  return <MessageList blocks={blocks} />
}

到这里 18 章串成了一条线：Model 给思考，Context 给视野，Agent Loop 给心跳，Tools 给手脚，Session 给记忆，Extensions 给可塑性，五种模式 + TUI / Web UI 给出口。同一个引擎，撑起了整个 pi。