概述
Artifacts 是一种结构化的工具返回格式，用于在 Trajectory 区域渲染丰富的内容（HTML、代码、Diff、图表等），而不是显示原始文本。渲染采用 VSCode 浅色风格，使用 Prism.js 语法高亮和行号。问题背景
当前工具返回的结果存在以下问题：- 格式不统一：不同工具返回格式各异
- 前端解析困难：依赖正则表达式检测内容类型
- 渲染受限：无法区分可渲染内容和普通文本
- 扩展性差：每新增一种类型都需要修改前端检测逻辑
数据结构设计
ToolResultContent
工具返回内容的结构化表示，包含以下字段：ToolResult
标准工具返回格式：SandboxFile
沙盒操作返回的文件元数据：内容类型说明
Diff 渲染
对于edit 和 write 工具的返回结果，当存在 meta.old_content 时，前端会渲染 DiffPreview 组件而非标准 Artifact 渲染器，提供类 Cursor 的统一 diff 视图。
工作原理
- 后端：
write工具在覆写前读取文件的旧内容，edit工具在应用修改前捕获原始文件内容。两者都将旧内容存储在content.meta.old_content中。 - 前端：
WorkspaceArea组件检测到edit/write结果包含meta.old_content时，使用react-diff-viewer-continued渲染DiffPreview，并基于文件扩展名进行 Prism.js 语法高亮。 - 降级方案：对于
meta.old_content不可用的edit调用，前端降级为对比parameters.old_string和parameters.new_string（片段级 diff）。
ToolCallCard 上的 Diff 统计
工具调用完成后，ToolCallCard 头部会显示行内 diff 统计（+N / -N），由新旧内容计算得出。用户可一目了然地了解增删的代码量。
前端渲染
前端根据content.type 字段选择对应的渲染组件：
- HTML：沙盒 iframe 预览，支持设备宽度预设（桌面/平板/手机）和部署功能
- Markdown：完整 Markdown 渲染器
- Code：VSCode 风格浅色表格布局，带行号、Prism.js 语法高亮、长文件（>20 行）可折叠
- JSON：与代码相同的表格布局，JSON 专属高亮
- Image：直接
<img>显示 - Error：红色错误样式
- Diff（edit/write）：统一 diff 视图，增删行高亮
Raw 模式
工作区支持在 Preview 和 Raw 模式间切换。Raw 模式以 Prism.js 高亮 JSON 显示参数和结果，Section 头部带复制按钮，取代了之前基于 Monaco Editor 的方案，更轻量、渲染更快。向后兼容
- 前端同时支持新旧格式
- 旧格式（纯文本）会被包装为
type: "text"的 content - 渐进式迁移，不影响现有功能