Artifact 实时渲染与画布系统
双形态交互视窗：Inline 行内卡片与 Canvas 分屏画布
告别漫长枯燥的代码块翻阅，让模型产出的复杂报告、UI 原型、数据表格以直观生动的富交互形态呈现在眼前。
1. 设计初衷与交互哲学
在传统 AI 编码助手中，当模型生成一份详尽的技术调研、前端组件代码或数据可视化方案时，通常直接在长长的聊天流中输出大段 Markdown 或代码块。这种形式在面对信息密集度高的场景时存在明显痛点：
- 纵向滚动过长：反复翻页寻找上下文，打断思考链条；
- 缺乏所见即所得 (WYSIWYG)：HTML/SVG/UI 原型必须手动复制到本地文件再起服务预览；
- 长文本排版受限：复杂的报表与卡片在窄屏对话气泡中显得拥挤压抑。
Piwin 内置了完整的 Artifact 交互引擎，具备两种呈现形态：Inline 行内预览 与 Canvas 扩展画布。
2. Inline Artifact（行内卡片预览）
2.1 触发与运作机制
当模型在对话中输出结构化内容、轻量可视化图表、组件微预览时，Artifact 引擎会将其包装为紧凑的行内交互卡片。
- 极度积极的触发策略：默认情况下，系统采用极其积极的启发式判断。一旦模型判定该段信息更适合以富交互或格式化卡片展示，便会实时就地渲染；
- 轻量不挡视线：嵌入在对话气泡内部，支持随时展开代码、切换预览或复制输出。
3. Canvas（分屏扩展画布）
3.1 大尺寸内容的主动晋级
针对长篇技术报告、复杂的系统架构图、全屏前端页面原型或深度调研纪要，系统会自动晋级 (Promote) 为 Canvas 画布模式：
text
┌─────────────────────────┬───────────────────────────────────────────┐
│ 主对话视口 (压缩) │ Canvas 画布主展台 │
│ │ │
│ User: 请调研 CSP 策略 │ # 深度调研报告：Artifact 沙箱与 CSP 规范 │
│ │ │
│ Agent: 结论已生成在右侧 │ - [x] 安全沙箱边界断言 │
│ 画布，请审阅 ───┼─> - [x] iframe 隔离策略 │
│ │ - [x] 跨域通信拦截 │
│ │ │
└─────────────────────────┴───────────────────────────────────────────┘
3.2 为什么设计 Canvas 自动分屏？
- 自动向左压紧对话流：展开 Canvas 时，主工作区会自动将左侧聊天流优雅压缩，留出右侧宽阔视界用于专注阅读与交互；
- 更高稳定性与沉浸感：报告或调研在 Canvas 中拥有完全独立于滚动流的稳定视口，不会因为后续的新消息推进而被顶出屏幕；
- 一眼看懂全局：支持 Markdown 丰富排版、HTML/SVG 实时呈现，直观验收交付成果。
4. 控制开关与个性化定制
虽然 Artifact 极大提升了阅读与验收效率，但如果你更偏好纯文本流或终端极客风格，可以随时自由调节或关闭：
- 打开桌面端 「设置」➔「交互与界面」；
- 定位到 「Artifact 渲染」 开关区；
- 支持独立控制：
- 是否开启 Artifact 总体渲染；
- 行内预览 (Inline) 与画布 (Canvas) 的自动触发灵敏度；
- 切换为仅输出原始 Markdown / 代码块。
5. 安全沙箱与 CSP 边界
IMPORTANT
模型生成的任何 HTML、SVG 或脚本内容均被视为不可信外部输入 (Untrusted)。
- 隔离 iframe 运行：所有 Artifact 在独立的沙箱环境渲染，禁止直接访问主窗口 DOM 或 Node/Electron/Tauri 核心桥接；
- 严格 CSP 策略：默认拦截一切未经授权的外部网络资源加载与凭证嗅探；
- 契约解耦：桌面端仅负责消费纯 TypeScript/HTML 契约渲染，不承担任何执行特权。