# DSH Session Log 可视化工具 — UI 改版意见 > 对象: DeepSeek（执行者） > 日期: 2026-08-20 > 目的: 当前界面布局复杂冗余，需要精简重构 --- ## 一、当前问题诊断 ### 问题 1: 筛选区双行冗余 **现状**: 左侧面板有**两行筛选标签**，功能高度重叠： - 第一行：按事件类型筛选的色块药丸（全部 9285、reasoning-chunks 3199、tool-call-chunks 2608…），共 16 个 - 第二行：按功能分组筛选的圆角标签（会话生命周期、配置与权限、对话轮次…），共 14 个 **问题**: 两行做的事几乎一样——都是筛选事件类型。用户看到 30 个标签挤在搜索框下方，视觉负担极重，且 16 个类型标签中有多个数量极少（permission/preset 2、sandbox/mode 2），单独列出意义不大。 ### 问题 2: 日志列表扁平无层级 **现状**: 9285 条日志以**纯扁平时间序列**展示，每条一行，没有缩进、没有折叠、没有分组。 **问题**: 用户无法看出 turn → step → tool call 的层级关系。比如前 5 条都是 turn 1 step 1 的初始化事件，但在界面上它们和后面 3000 条 reasoning-chunks 视觉权重相同。大量同类事件（reasoning-chunks 3199 条）刷屏，淹没真正重要的节点（tool/call、approval/asked）。 ### 问题 3: 时间精度不足 **现状**: 时间戳只显示到秒（15:45:01），但大量事件在同一秒内发生（reasoning-chunks 每条间隔仅几十到几百毫秒）。 **问题**: 无法区分事件先后顺序，特别是同一个 step 内的 reasoning-chunks 和 tool-call-chunks 交织出现时，秒级时间戳完全没用。 ### 问题 4: 右侧详情面板空置 **现状**: 右侧面板默认显示"点击左侧任意日志条目，在此查看解析详情"。 **问题**: 用户首次打开时右侧完全空白，浪费屏幕空间。应该在未选中时展示会话概览（会话摘要、工具调用统计、token 用量等）。 ### 问题 5: 列表项信息密度低 **现状**: 每个列表项显示：序号 + 时间 + 类型标签 + 内容摘要，一行排列。 **问题**: 内容摘要被截断为很短的一段，看不出关键信息。对于 reasoning-chunks 显示"16 chunks, 60 chars, 170ms"这种统计信息，对用户判断当前推理内容毫无帮助。 --- ## 二、改版方案 ### 2.1 整体布局重构 **当前布局**: ``` ┌─────────────────────────────────────────────────┐ │ 标题栏: 会话日志查看器 | 9285条 | 刷新 | 关闭 │ ├──────────────────────┬──────────────────────────┤ │ 搜索框 │ │ │ 类型筛选标签 (16个) │ │ │ 分组筛选标签 (14个) │ 右侧详情面板 │ │ ─────────────────── │ (默认空白) │ │ 日志列表 (扁平) │ │ │ #1 15:45:00 session │ │ │ #2 15:45:00 preset │ │ │ #3 15:45:00 sandbox │ │ │ ... │ │ │ (9285条全部平铺) │ │ └──────────────────────┴──────────────────────────┘ ``` **目标布局**: ``` ┌─────────────────────────────────────────────────┐ │ 顶栏: 会话日志查看器 | 9285条 | [刷新] [关闭] │ ├──────────────────────┬──────────────────────────┤ │ [搜索框] [类型下拉▼] │ 会话概览 / 事件详情 │ │ ─────────────────── │ │ │ ▸ Turn 1 (5234条) │ ┌─ 会话概览(未选中时) ─┐ │ │ ▸ Step 1 (12条) │ │ 工作目录: D:\... │ │ │ • session │ │ 模型: deepseek-v4 │ │ │ • preset │ │ Token: 输入12K/输出8K │ │ │ • user/message │ │ 工具调用: 224次 │ │ │ ▸ Step 2 (8条) │ │ 审批: 38次(全部通过) │ │ │ • tool/call:read │ │ 耗时: 15分23秒 │ │ │ • tool/result │ └──────────────────────┘ │ │ ▸ Step 3 (5012条) │ │ │ ▸ reasoning(4899)│ ┌─ 事件详情(选中时) ───┐ │ │ ▸ tool-call(113) │ │ 类型: tool/call │ │ │ ▸ Turn 2 (4051条) │ │ 时间: 15:45:02.123 │ │ │ ... │ │ ── 完整参数 ── │ │ │ │ │ {"pattern": "**/*"} │ │ │ │ │ ── 完整结果 ── │ │ │ │ │ [文件列表...] │ │ │ │ └──────────────────────┘ │ └──────────────────────┴──────────────────────────┘ ``` ### 2.2 具体改动项 --- #### 改动 1: 筛选区从双行 30 个标签精简为「搜索框 + 类型下拉」 **删除**: 第一行的 16 个类型色块药丸 + 第二行的 14 个分组标签 **替换为**: - 搜索框（保留，宽度撑满） - 一个「事件类型」下拉筛选器，默认选中"全部"，下拉项按功能分组排列： ``` 事件类型 ▼ ───────────────────────────── ○ 全部 (9285) ───────────────────────────── 会话生命周期 ○ session (1) ○ session/title (2) 对话轮次 ○ turn/start (2) ○ turn/end (2) 执行步骤 ○ step/start (197) ○ step/end (197) 用户输入 ○ user/message (6) ○ agent/inbox/spliced (6) 助手输出 ○ assistant/message (197) ○ assistant/chunk (2027) 推理过程 ○ reasoning-chunks (3199) 工具调用 ○ tool-call-chunks (2608) ○ tool/call (224) ○ tool/result (224) 审批流程 ○ approval/asked (38) ○ approval/decided (38) 任务清单 ○ todo/write (6) ───────────────────────────── ``` **理由**: 30 个标签同时展示视觉负担过重。下拉式分组在需要时展开，不需要时收起为一个按钮，释放空间给日志内容。数量极少的事件类型（permission/preset 2 条、sandbox/mode 2 条）归入折叠区域，不必默认占用屏幕空间。 --- #### 改动 2: 日志列表从扁平列表改为树形折叠结构 **当前**: 9285 条事件全部平铺展开，滚动需几十屏。 **改为**: 按 `turn → step` 两级折叠，默认只展开第一个 turn 的第一个 step。 **树形结构规则**: 1. 第一层：**Turn 节点**（turn/start 到 turn/end 之间的所有事件） - 显示：`Turn 1` + 事件总数 + 耗时 - 默认展开第一个 Turn，折叠其余 2. 第二层：**Step 节点**（step/start 到 step/end 之间的所有事件） - 显示：`Step 1` + 事件总数 + 耗时 + 主要工具名 - 默认展开第一个 Step，折叠其余 3. 第三层：**事件组**（同类事件合并为可展开的组） - reasoning-chunks 4899 条 → 合并为一个"推理过程"节点，显示首行文本预览 - tool-call-chunks 113 条 → 合并为一个"工具调用流"节点 - assistant/chunk 500 条 → 合并为一个"助手输出"节点 - tool/call + tool/result → 各自独立显示（数量少，且信息重要） - approval/asked + approval/decided → 配对显示 - 其他低频事件 → 独立显示 **折叠时的预览信息**: ``` ▸ Turn 1 5234条 | 8分30秒 ▸ Step 1 12条 | 1.2秒 | 初始化 • session cwd=D:\dsh-session-viz, preset=standard • permission/preset preset=workspace-write • user/message 请根据requirement进行完善后编写... • session/title 解析sessionlog并可视化查看 • request/context deepseek-v4-flash / 1M context ▸ Step 2 8条 | 0.8秒 | 读取文件 • tool/call:read D:\dsh-session-viz\REQUIREMENTS.md • tool/result 293行, 12KB ▸ Step 3 5012条 | 6分40秒 | 分析+编写 ▸ reasoning 4899个分片, 18万字符 | "The user wants..." ▸ assistant/output 113个分片 | "我来分析数据结构..." • tool/call:write D:\dsh-session-viz\REQUIREMENTS.md • tool/result 写入成功, 15KB ▸ Step 4 3条 | 0.5秒 | 审批 • approval/asked write → allowed-once ▸ Turn 2 4051条 | 6分53秒 ``` **理由**: 9285 条扁平列表无法浏览。树形折叠让用户先看整体结构（几个 Turn、每个 Turn 几个 Step），再按需展开细节。同类事件合并避免 3000 条 reasoning 刷屏。 --- #### 改动 3: 时间戳精度从秒级改为毫秒级 **当前**: `15:45:01`（秒级） **改为**: `15:45:01.123`（毫秒级），或使用相对时间： - 列表项时间：显示 `+1.2s`（相对于会话开始的偏移） - 详情面板：显示绝对时间 `2026-08-20 15:45:01.123` **理由**: 同一秒内有数十条事件，秒级时间戳无法区分顺序。相对时间更直观（"+1.2s"比"15:45:01.123"更容易理解经过了多久）。 --- #### 改动 4: 右侧默认面板从空白改为会话概览 **当前**: 未选中时显示"点击左侧任意日志条目，在此查看解析详情"。 **改为**: 未选中时显示**会话概览卡片**： ``` ┌─ 会话概览 ─────────────────────────┐ │ │ │ 工作目录 D:\dsh-session-viz │ │ 会话ID session-35c5eb1b... │ │ 智能体 standard │ │ 模型 deepseek-v4-flash │ │ 创建时间 2026-08-20 15:45:00 │ │ 总耗时 15分23秒 │ │ │ │ ── 事件统计 ── │ │ 总事件 9285 │ │ Turn 数 2 │ │ Step 数 197 │ │ │ │ ── 工具调用 Top 5 ── │ │ read 89次 ████████ │ │ write 45次 █████ │ │ glob 32次 ███ │ │ grep 28次 ██ │ │ pwsh 20次 █ │ │ │ │ ── Token 用量 ── │ │ 输入 125,340 │ │ 输出 89,210 │ │ 推理 234,560 │ │ 缓存读取 45,000 │ │ │ │ ── 审批统计 ── │ │ 总请求 38 │ │ 通过 38 (100%) │ │ 拒绝 0 │ │ │ └────────────────────────────────────┘ ``` **理由**: 右侧面板在未选中时完全浪费。展示会话概览让用户一进来就能了解全局信息，而不需要手动点击探索。 --- #### 改动 5: 列表项内容预览优化 **当前**: reasoning-chunks 显示"16 chunks, 60 chars, 170ms"——对用户判断推理内容毫无帮助。 **改为**: 按事件类型定制预览内容： | 事件类型 | 当前预览 | 改为预览 | |----------|----------|----------| | reasoning-chunks | "16 chunks, 60 chars, 170ms" | 合并后的前 80 字符："The user is asking me to analyze the session log..." | | tool-call-chunks | "18 args, 19 texts" | 工具名 + 参数摘要：`read("D:\dsh-recommend\package.json")` | | assistant/chunk | "chunk type=block-start" | 输出内容前 80 字符 | | tool/call | arguments JSON 原文 | `工具名(参数摘要)`，如 `read("REQUIREMENTS.md")` | | tool/result | content 原文 | 结果摘要，如 `293行, 12KB` 或 `错误: File not found` | | approval/asked | reason 原文 | `write → 审批原因前60字` | | approval/decided | outcome 原文 | `→ allowed-once` (用绿色标注) | | todo/write | todos 列表 | `3项任务: [完成2] [进行中1] [待办0]` | | step/start | "turn 1 step 1" | `Step 1 开始` | | step/end | "turn 1 step 1" | `Step 1 结束 (1.2秒)` | **理由**: 预览信息应该帮助用户快速判断是否需要展开详情，统计数字（多少 chunks、多少 chars）对内容判断没有帮助。 --- #### 改动 6: 合并 chunks 类事件的展示 **当前**: reasoning-chunks 3199 条每条独立一行，占据列表 34% 的空间。 **改为**: 同一 step 内的同类 chunks 合并为一个可展开节点： ``` ▸ 推理过程 (4899个分片, 18万字符, 耗时45秒) [展开后显示完整推理文本，按 chunk 批次分段] "The user is asking me to analyze the session log data..." "I need to first understand the data structure..." "Let me check the tool/call events to see what tools..." ``` 同理处理： - `assistant/chunk` → 合并为"助手输出"节点 - `tool-call-chunks` → 合并为"工具调用流"节点 - `text-chunks` → 合并为"文本输出"节点 **理由**: chunks 是流式传输的分片，对用户来说只有合并后的完整文本有意义。单条分片信息（几十个字符）没有独立查看的价值。 --- ## 三、改动优先级 | 优先级 | 改动项 | 工作量 | 效果 | |--------|--------|--------|------| | P0 | 改动 2: 日志列表改为树形折叠 | 大 | 最关键，解决 9285 条刷屏问题 | | P0 | 改动 6: 合并 chunks 类事件 | 中 | 解决 70% 列表项无意义问题 | | P0 | 改动 1: 筛选区精简为下拉 | 小 | 解决双行 30 标签冗余 | | P1 | 改动 4: 右侧默认会话概览 | 中 | 解决空白浪费 | | P1 | 改动 5: 列表项预览优化 | 中 | 提升信息密度 | | P1 | 改动 3: 毫秒级时间戳 | 小 | 解决时间无法区分问题 | --- ## 四、注意事项 1. **保持颜色方案不变**: 2.5 节定义的 14 组颜色方案在树形结构中继续使用——Turn 节点用蓝色系、Step 节点用青色系、事件项按各自类型着色。 2. **保留搜索功能**: 全文搜索框保留，搜索时自动展开匹配的 Turn/Step 节点，高亮匹配文本。 3. **性能注意**: 9285 条事件渲染为树形时，折叠的节点不应渲染子项（虚拟滚动或懒加载），避免 DOM 节点过多导致卡顿。 4. **保持 master-detail 布局**: 左侧树形列表 + 右侧详情面板的总体结构不变，只是左侧从扁平列表改为树形，右侧从空白改为概览。