REQ-002: Session Compare【免费下载链接】cannbot-skillsCANNBot 是面向 CANN 开发的用于提升开发效率的系列智能体本仓库为其提供可复用的 Skills 模块。项目地址: https://gitcode.com/cann/cannbot-skills概述在首页支持选取两个 session 进行并排对比展示 token、费用、耗时、工具调用、subagent 等指标的差异。背景同一类任务跑多次时用户需要对比不同 session 的效率和成本差异以评估优化效果如 prompt 改进、模型切换等。功能要求1. Session 选择在首页SessionList组件中添加多选模式添加 checkbox 列允许勾选 2 个 session勾选 2 个后显示 Compare Selected 按钮点击后跳转到/compare?sessions{id1},{id2}页面2. Compare 页面新建src/app/compare/page.tsx包含以下对比区域2.1 概览对比卡片左右并排展示两个 session 的核心指标差异用颜色标记指标说明Model模型名称Total Tokens总 token较低者绿色Total Cost总费用较低者绿色Latency总耗时较短者绿色LLM Call CountLLM 调用次数Tool Call Count工具调用次数Subagent Count子 agent 数量Skill CountSkill 加载数2.2 Token 对比柱状图并排柱状图对比 token 五项拆解input / output / reasoning / cacheRead / cacheWrite使用纯 SVG 绘制项目不使用图表库参考TokenBarChart.tsx的实现风格。2.3 Turn 时间线对比左右各一个 TurnTimeline可复用现有组件展示两个 session 的 turn 时间线。2.4 Tool Call 汇总对比表格对比两个 session 中各工具的使用次数和成功率Tool NameSession A CountSession B CountDiffread_file158-7terminal101223. API 支持不需要新的 API 路由直接使用现有的/api/observe/session和/api/observe/session/turns获取两个 session 的数据。实现要求文件变更文件变更src/components/SessionList.tsx添加 checkbox 多选和 Compare Selected 按钮src/app/compare/page.tsx新建— 对比页面Server Componentsrc/components/compare/CompareOverviewCards.tsx新建— 概览对比卡片src/components/compare/CompareTokenChart.tsx新建— Token 对比柱状图SVGsrc/components/compare/CompareToolTable.tsx新建— 工具调用对比表设计约束图表使用纯 SVG不使用 recharts 等图表库UI 组件使用 shadcn/ui项目已有保持与现有页面一致的深色主题风格响应式布局桌面左右分栏移动端上下堆叠测试要求tests/components/compare.test.ts— 对比组件的单元测试覆盖指标计算、差异颜色判断逻辑、空数据处理关键文件参考src/app/page.tsx— 首页了解 SessionList 用法src/components/SessionList.tsx— Session 列表组件src/components/observe/TokenBarChart.tsx— SVG 柱状图参考src/app/api/observe/session/route.ts— Session 数据 APIsrc/app/api/observe/stats/route.ts— 统计 API【免费下载链接】cannbot-skillsCANNBot 是面向 CANN 开发的用于提升开发效率的系列智能体本仓库为其提供可复用的 Skills 模块。项目地址: https://gitcode.com/cann/cannbot-skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考