背景
当前 WebUI（stapp2.py）的所有 assistant 回复统一通过 st.markdown() 渲染为纯文本。Streamlit 自带的 st.image()、st.plotly_chart()、st.altair_chart()、st.dataframe() 等富内容组件均未使用。Agent 生成的图片、图表、数据表等无法在聊天界面内嵌展示，用户无法直接看到可视化结果。
现有痛点
在聊天场景中展示图表/可视化，目前常见的做法各有局限：
Mermaid（markdown 内嵌）：只能画简单流程图，复杂排版容易崩；无法绘制数据图表（折线图、散点图等）
DrawIO 等 MCP 工具 → SVG/PNG：能用但静态无交互，MCP 调用开销大，费 token
HTML Artifact（如 Cherry Studio 的做法）：效果好但需要生成完整 HTML+CSS+JS，token 消耗极高
而 Streamlit + Python 生态（Plotly、Altair、Matplotlib）天然具备专业级图表渲染能力，且 agent 只需几行 Python 调库代码即可生成，token 效率远高于生成完整 HTML。
建议方案：分层实现
第一层：图片/文件内嵌渲染（低门槛）
改动：在 render_message 中检测 agent 输出的文件路径标记（如 [FILE:xxx.png]），对图片文件自动调用 st.image() 渲染。
效果：agent 截图、matplotlib 保存的图片等可直接在聊天流中展示，不再只显示路径。
第二层：交互式图表渲染（推荐优先实现）
改动：
Agent 通过 code_run 生成 Plotly/Altair figure，序列化为 JSON 保存到临时文件
输出带特殊标记（如 [ARTIFACT:plotly:path/to/fig.json]）
前端检测到标记后调用 st.plotly_chart() / st.altair_chart() 渲染
效果：
📊 专业级图表，默认就好看（比 Mermaid 强很多）
🔍 自带交互：缩放、悬浮提示、框选放大、导出 PNG
💰 Token 效率高：agent 只需输出几行 Python 代码，而非完整 HTML
📈 支持折线图、柱状图、散点图、热力图、3D 图等所有 Plotly/Altair 图表类型
第三层：数据表交互展示
改动：检测 CSV/DataFrame 文件标记，调用 st.dataframe() 渲染。
效果：可排序、可筛选、可高亮的数据表格，替代 markdown 表格。
第四层（远期）：Widget 级交互式 Artifact
Agent 生成含 Streamlit Widget 的 Python 代码片段，前端动态执行，实现 slider 联动图表等完全交互式体验。需要解决 Streamlit rerun 模型下的状态管理问题，复杂度较高，建议作为远期目标。
涉及文件
frontends/stapp2.py：render_message() / _get_response_segments() 增加文件类型检测分支
agent_loop.py 或 system prompt：引导 agent 在需要可视化时使用 Plotly 等库生成图表文件
可选：新增 chatapp_common.py 中的标记格式约定
背景
当前 WebUI（stapp2.py）的所有 assistant 回复统一通过 st.markdown() 渲染为纯文本。Streamlit 自带的 st.image()、st.plotly_chart()、st.altair_chart()、st.dataframe() 等富内容组件均未使用。Agent 生成的图片、图表、数据表等无法在聊天界面内嵌展示，用户无法直接看到可视化结果。
现有痛点
在聊天场景中展示图表/可视化，目前常见的做法各有局限：
Mermaid（markdown 内嵌）：只能画简单流程图，复杂排版容易崩；无法绘制数据图表（折线图、散点图等）
DrawIO 等 MCP 工具 → SVG/PNG：能用但静态无交互，MCP 调用开销大，费 token
HTML Artifact（如 Cherry Studio 的做法）：效果好但需要生成完整 HTML+CSS+JS，token 消耗极高
而 Streamlit + Python 生态（Plotly、Altair、Matplotlib）天然具备专业级图表渲染能力，且 agent 只需几行 Python 调库代码即可生成，token 效率远高于生成完整 HTML。
建议方案：分层实现
第一层：图片/文件内嵌渲染（低门槛）
改动：在 render_message 中检测 agent 输出的文件路径标记（如 [FILE:xxx.png]），对图片文件自动调用 st.image() 渲染。
效果：agent 截图、matplotlib 保存的图片等可直接在聊天流中展示，不再只显示路径。
第二层：交互式图表渲染（推荐优先实现）
改动：
Agent 通过 code_run 生成 Plotly/Altair figure，序列化为 JSON 保存到临时文件
输出带特殊标记（如 [ARTIFACT:plotly:path/to/fig.json]）
前端检测到标记后调用 st.plotly_chart() / st.altair_chart() 渲染
效果：
📊 专业级图表，默认就好看（比 Mermaid 强很多）
🔍 自带交互：缩放、悬浮提示、框选放大、导出 PNG
💰 Token 效率高：agent 只需输出几行 Python 代码，而非完整 HTML
📈 支持折线图、柱状图、散点图、热力图、3D 图等所有 Plotly/Altair 图表类型
第三层：数据表交互展示
改动：检测 CSV/DataFrame 文件标记，调用 st.dataframe() 渲染。
效果：可排序、可筛选、可高亮的数据表格，替代 markdown 表格。
第四层（远期）：Widget 级交互式 Artifact
Agent 生成含 Streamlit Widget 的 Python 代码片段，前端动态执行，实现 slider 联动图表等完全交互式体验。需要解决 Streamlit rerun 模型下的状态管理问题，复杂度较高，建议作为远期目标。
涉及文件
frontends/stapp2.py：render_message() / _get_response_segments() 增加文件类型检测分支
agent_loop.py 或 system prompt：引导 agent 在需要可视化时使用 Plotly 等库生成图表文件
可选：新增 chatapp_common.py 中的标记格式约定