工具输出渲染优化¶
背景¶
OpenClaw Web 端的工具调用结果长期以原始 JSON 形式直接展示，阅读体验差、视觉噪音大。Dad 在 04-02 定义了工具详情的展示原则，04-05 明确要求将 JSON 转为可读内容，推动了前端展示层的格式化改造。
此主题同时涵盖了 03-21 至 03-25 期间 Slash 菜单与技能入口的展示优化演进，它们共同构成了"让 UI 更像正常应用而非数据堆叠"的整体方向。
前置演进：Slash 菜单与技能入口优化（03-21 ~ 03-25）¶
03-21：技能栏与上下文查看器上线¶
Phase 2 完成（20:00）：
- 技能栏放到输入框上方，作为固定入口
- 新增 AgentContextViewer 用于查看 agent context
- 服务端 channel 插件尚未更新，前端先显示 loading 状态
Dad 决策（23:26）：技能和上下文固定在输入框上方快捷命令行最左边，不随聊天内容变化。
实现：在快捷命令行最左侧插入两个固定按钮（技能(84) / 上下文），绿色主题高亮，后续建议项保持在右侧。
03-21：Slash 菜单支持技能¶
Dad 决策：斜杠消息要支持使用技能。
方案：在 Slash 菜单中增加技能分区，格式为 /use <skillName>，输入 / 展示全部命令 + 技能，输入 /use 优先筛选技能项。
03-21：技能来源扫描补强¶
Dad 指出：仅扫描 ~/.openclaw/skills 不够。
解决：补充扫描多个目录来源，支持按 agent workspace 推导：
03-23：重构 Slash 菜单为统一面板¶
Dad 决策（19:15）： - 选择技能窗口和 Slash 弹窗设计不好用，要重做 - 列表项高度更窄，显示更多内容 - 弹框阴影太割裂，换设计方式
方案：统一为 compact Slash 面板，去掉独立 skills panel，按系统命令 / 技能分组展示。删除 + 菜单中的技能/上下文入口，清理 suggestion pills 遗留按钮。
结果：ChatRoom bundle 152KB → 149KB，commit e1014084。
03-25：误删后恢复入口¶
问题：Dad 发现输入框上方技能/上下文入口消失 —— 重构时改过头了。
解决：将 icon buttons 加回 suggestion pills，保持不在 + 菜单中但继续作为输入框上方固定入口。
展示原则定义（04-02）¶
Dad 定义工具详情展示原则¶
Dad 决策（21:13 ~ 21:17）： - 工具详情默认收起 - 等待过程中不要一直堆很多条 - 只显示一行摘要 - 点击后再展开详情 - 不要占据太多空间和视觉感受
沉淀的展示规范：
| 维度 | 要求 |
|---|---|
| 默认展示 | 工具名 + 运行状态 + 一行摘要 |
| 交互方式 | 点击展开详情 |
| 详情内容 | 不直接展示原始 JSON，需格式化为可读内容 |
| 空间控制 | 等待中只保留一个变化状态行，不持续堆叠 |
核心实现：工具输出 JSON → 可读内容（04-05）¶
需求明确¶
Dad（13:37）：
"优化这个。工具输出时的展示把内干 JSON 把它变成正常的内容展示。"
目标明确 —— 将工具调用返回中的原始 JSON 转成用户可读的正常内容展示。
技术方案¶
Bot 决策（13:42）：在展示层引入格式化逻辑，不改协议层。
实现：
- 在 ChatRoom.tsx 中接入 formatResultSummary 函数
- 工具结果先做摘要/格式化再渲染
- 展示层不再直接 dump 原始 JSON
效果方向： - 工具输出更像正常聊天内容 - 减少 JSON 噪音 - 与"默认收起、单行摘要、点击展开"的整体策略一致
部署¶
13:42 ~ 13:45：type check 通过、build 通过，已提交并部署到 Owl。Channel 已推送，刷新页面即可生效。
展示优化设计原则总结¶
经过 03-21 到 04-05 的多次迭代，形成了以下展示原则：
- 固定入口优先：技能/上下文放在输入框上方固定区域
- 统一面板优先：Slash 菜单统一承载系统命令与技能
- 分组展示优先：系统命令与技能分区，不同标识区分
- 紧凑列表优先：减小 item 高度，提升信息密度
- 弱化割裂感：去掉过重阴影，减少"浮层像 JSON 弹窗"的感觉
- 摘要驱动详情：默认单行摘要，按需展开，详情内容格式化
关键决策总览¶
| 时间 | 决策者 | 决策 |
|---|---|---|
| 03-21 23:26 | Dad | 技能/上下文固定在输入框上方最左侧 |
| 03-21 23:29 | Dad | Slash 菜单要支持技能 |
| 03-23 19:15 | Dad | 重做技能/Slash 展示，统一面板、更窄更紧凑 |
| 04-02 21:17 | Dad | 工具详情默认收起、一行摘要、点击展开 |
| 04-05 13:37 | Dad | 工具输出 JSON 必须变成正常内容展示 |
| 04-05 13:42 | Bot | 在 ChatRoom.tsx 接入 formatResultSummary |
里程碑¶
| 时间 | 事件 |
|---|---|
| 03-21 20:00 | Phase 2 完成，技能栏 + 上下文查看器上线 |
| 03-21 23:32 | Slash 菜单支持技能项 |
| 03-23 19:21 | Slash 菜单重构为统一面板 |
| 03-25 12:32 | 恢复被误删的技能/上下文入口 |
| 04-02 21:17 | 工具详情展示原则确立 |
| 04-05 13:42 | formatResultSummary 接入，工具输出格式化上线 |
| 04-05 13:45 | 全部提交部署到 Owl |