实现 Agent 的思考过程展示，核心不是把模型的原始 CoT 全量暴露出来，而是把 Agent 执行任务时可观察、可解释、可审计的过程结构化展示出来。也就是展示“它正在做什么、为什么做这一步、调用了什么工具、拿到了什么结果、下一步状态是什么”，而不是直接泄露模型内部逐字推理链。

前端上通常采用流式事件驱动的方式实现。后端通过 SSE 或 WebSocket 持续推送 Agent 运行事件，前端把这些事件渲染成时间线、步骤卡片或折叠面板。例如一次 Agent 执行可以拆成这些事件：任务开始、规划生成、检索资料、调用工具、工具返回、阶段性总结、错误重试、最终答案。

一个比较合理的事件结构类似这样：

复制
1type AgentEvent =
2  | { type: 'plan'; taskId: string; steps: string[] }
3  | { type: 'thought_summary'; taskId: string; content: string }
4  | { type: 'tool_call'; taskId: string; tool: string; input: unknown }
5  | { type: 'tool_result'; taskId: string; tool: string; result: unknown }
6  | { type: 'message_delta'; taskId: string; content: string }
7  | { type: 'status'; taskId: string; status: 'running' | 'waiting' | 'done' | 'failed' };

前端接收到事件后，不应该只拼接字符串，而应该维护一个 Agent Run 的状态机。比如 running 表示正在执行，tool_calling 表示正在调用外部工具，waiting_user 表示需要用户确认，completed 表示结束，failed 表示失败。这样 UI 可以准确展示加载态、重试态、取消按钮、人工确认入口，而不是只能显示一段滚动文本。

在展示形态上，通常会把最终答案和过程信息分层。最终答案保持在主内容区，思考过程放在可展开区域，比如“执行过程”“工具调用”“引用来源”“中间步骤”。用户默认看到关键进展，需要时再展开细节。这样既能增强可信度，也不会让页面被大量中间信息淹没。

需要特别注意安全边界。Agent 的“思考过程”更适合展示经过整理的 reasoning summary，而不是原始推理文本。工具调用参数和结果也要做脱敏，比如 token、手机号、邮箱、内部接口地址、权限信息都不能直接展示。对于代码执行、数据库查询、外部 API 调用，还要展示可审计信息，但避免泄露敏感数据。

前端实现时还要处理几个工程细节：流式内容需要增量渲染，避免每次事件都触发大面积重排；长任务需要支持取消和重连；事件要有 taskId、stepId、timestamp，方便乱序合并和历史回放；Markdown 渲染要做 XSS 防护；工具结果过长时要折叠或分页展示。

所以，一个成熟的 Agent 思考过程展示，本质上是“可观测事件流 + 状态机 + 分层 UI + 安全脱敏”。它服务的是可解释性、信任感和可调试性，而不是简单地把模型脑内文本打印出来。