dsh-client-ui-trajectory-categories
A pure client-side DSH Web plugin that turns the raw trajectory into a Chinese-first, zero-token summary view.
Adds a 「分类」 (Categories) tab to every conversation session:
- Top-left 「合计」 (Summary) panel — action-type statistics (写入/读取/删除/下载/命令/搜索/子代理/其他工具/消息/压缩) with one-click record expansion.
- Mind-map canvas — one problem per canvas: 问题 (problem) → 方案 (attempt) → 工具调用 (tool calls), rebuilt from the trajectory. Switch between problems with the 「问题画布」 tabs.
- The original Trajectory list stays untouched.
Features
Chinese-first categorization
- Category labels are always Chinese, regardless of UI language.
- Classification matches both Chinese and English tool names/terms — 写入/写文件/编辑/修改, 删除/移除, 读取/查看/查找, 下载/抓取, 命令/执行/运行, 搜索/查询, 子代理/委派 … all map to the right category.
- Arg previews prioritize the meaningful field (file path / URL / command / query), so rows read naturally in Chinese.
「合计」 summary panel (top-left)
- Heatmap + category ranking (from community PR #1): a GitHub-style calendar heatmap of how many actions ran each day (hover a day for per-category breakdown), plus a leaderboard of the most-used categories. Click a day to filter the summary chips/records below; click again (or
×) to clear.
- One chip per category with a count badge; click a chip to expand that category's records inline.
- Each record shows time, name and arg preview; click to expand full 参数 (args) / 结果 (result) / 错误 (error).
- Real-time filter by tool name/content; 全部展开 / 全部收起 buttons; “显示更多” loads more records lazily (default 40 per category).
Mind-map canvas (one problem per canvas)
- Rebuilds the flow 问题 → 方案 1 →（报错）→ 方案 2 → … → 完成 automatically from user/assistant/tool events.
- One problem per canvas — other problems live in the 「问题画布」 tab bar above the canvas; each tab shows a status dot (red = had errors, green = delivered).
- Attempt pills show reply summary, 报错 badge with the error text, and status badges: 工作中 (running) / 完成 (delivered).
- Click:
- click a problem → expand/collapse all of its sub-flows;
- click an attempt pill → slide its tool-call chain in/out (collapsed pills show a
×N count);
- click a tool chip → detail panel: 做了什么 (what the AI did, from args), 输出 / 日志 (result), 修改内容 (old → new diff, only when present), 参数, 错误.
- Interactive canvas: drag the background to pan,
Ctrl+wheel or the zoom buttons to zoom; hover highlights the block; the cursor gently repels nearby blocks.
- Draggable nodes with inertia lines: drag a problem node and all its attempts/tools follow; connectors are elastic curves anchored to node edges that glide after the nodes (inertia).
- Horizontal axis ≈ time — newer tool calls sit further right.
Zero extra token consumption
- Pure client-side aggregation; no model requests, no LLM summarization.
- Reuses the
trajectory view projection built by ui-trajectory — no re-processing of the event stream.
- Defaults to collapsed / render-on-demand; args and results render truncated previews until clicked; records load lazily (40 per category first).
Dependencies
@deepseek-ai/dsh-client-ui-trajectory — provides the trajectory view projection (data source)@deepseek-ai/dsh-client-runtime, @deepseek-ai/dsh-client-ui-conversation
Installation
One-liner (official bundle install):
dsh plugin --profile web add dsh-client-ui-trajectory-categories
# or install straight from source (no build step, lib/ ships with the package):
dsh plugin --profile web add github:QWQ-nn/dsh-client-ui-trajectory-categories
Restart the dsh web service and refresh the page — a 「分类」 tab appears in the conversation header.
Manual install (when you want to control the patch layer yourself):
-
Put this package in the target profile's node_modules
(e.g. ~/.dsh/profiles/node_modules/dsh-client-ui-trajectory-categories).
-
Append to the profile's cordis.patch.yml:
- insert:
- id: ui-trajectory-categories
name: 'dsh-client-ui-trajectory-categories'
-
Restart dsh web and refresh the page.
Files
lib/index.js — host-side no-op (browser-only plugin).lib/client.js — the browser bundle (window.__ModuleLoader__.load format, hand-built, React-only, Chinese UI copy).test-smoke.mjs — smoke tests: bundle load, apply(), server-render with data / empty / expanded detail / Chinese tool names.test-interact.mjs — jsdom interaction tests: click-to-detail, drag-pan, ctrl+wheel zoom, hover, repulsion, node drag (parent moves children), connector alignment, problem switcher, tap-to-toggle, tap-guard after drag.
Verification
npm install # installs react/react-dom/jsdom devDependencies
npm test # SSR smoke tests
npm run test:interact # jsdom interaction tests
Contributors
License
MIT © QWQ-nn
