yangzhe1991/dsh-code-review

dsh-code-review

npm downloads
license
dsh-plugin

dsh-code-review 是 DSH (DeepSeek Harness) Web UI 的浏览器插件:把对话里的 git diff 输出变成一键打开的独立标签页 Code Review 页面 —— 双列、对人类友好的视图(左侧旧文件、右侧新文件,两侧都带行号),完全不受聊天窗口宽度/高度限制。

聊天窗口本身保持原样:只要出现 git diff,对应块(markdown diff 代码块、或产生 diff 的 bash 工具行——折叠状态也显示)上就自动出现一个「在新标签页打开」小按钮,点一下即打开审查页。

对话里提到本地 .diff / .patch 文件路径时,路径会自动变成查看链接按钮——反引号里的路径原地变成小胶囊按钮,纯文本路径在消息下方补一行按钮;点击直接打开该文件的 Code Review 审查页(浏览器读不了本地文件,由插件宿主侧代读,只读绝对路径、仅限 .diff/.patch 后缀、≤5MB)。

兼容性

- dsh ≥ 0.1.2-alpha.4 — 自 0.1.5 起完整支持。Web UI 重构(聊天快照从 useSession((s) => s.chat) 迁移到会话标准的 useChat hook;markdown 代码块 DOM 包了一层 bannerWrap 层)在两条检测路径上均已适配:markdown diff 块与折叠的 bash 工具行。自 0.2.1 起在 dsh 0.1.3-alpha.2 上验证通过。
- dsh 0.1.0-rc.x — 仍通过旧版快照路径支持。

功能

- ⬅️➡️ 双列并排视图 —— 旧文件在左、新文件在右,两侧各自带行号,类似 GitHub 的 split review。
- 🟥🟩 增删配色 —— 删除行红底、新增行绿底;连续「删除块 + 新增块」逐行配对成同一行的「变更」(GitHub 对齐方式)。
- 🔎 行内字符级高亮 —— 同一行只改几个字符时,精确高亮那几个字符(更深一档的红/绿背景,公共前后缀剥离)。
- 💡 基础语法高亮 —— 关键字、字符串、注释、数字着色,颜色复用官方 shiki 主题变量(按文件扩展名推断语言,未知语言自动跳过)。
- 🧷 hunk 感知 —— 每个 @@ hunk 头保留为分隔行(含 section 名);一个 diff 里的多个文件拆成独立文件段,带状态徽章(修改 / 新增文件 / 删除文件 / 重命名 / 二进制)。
- 🗂️ 文件导航侧栏 —— 左侧列出所有文件,点击跳转。
- 📊 统计条 —— 顶部吸顶显示 +N −M · F 个文件,带「复制原始 diff」按钮,页面底部有可折叠的原始文本区。
- 🎨 主题一致 —— 打开时继承 DSH 当前主题色,深浅色模式自动跟随。
- 📜 整页滚动 —— 无高度限制,几千行自然滚动,超长行折行显示。
- 💬 行内评论 —— 悬停任意行号点击即可在该行提评论(类似 GitHub review),行号旁显示评论数徽章;攒齐后一次性提交 —— 可选 Looks Good To Me ✓ 或纯评论,提交后自动写入 DSH 对话框(文件名:行号 — 评论 逐条列出),直接发给 agent。
- 🔗 本地路径一键查看 —— 对话里出现 …/xxx.diff/…/xxx.patch 绝对路径时自动变成链接按钮:反引号内的路径原地变成小胶囊按钮,纯文本路径在消息下方补一行右对齐按钮;bash 工具输出里列出的路径也会出现在工具行按钮排上。点击后打开该文件的 Code Review 页,读取失败(文件不存在/非 diff/超 5MB)时按钮短暂变红提示。
- 🌐 中英双语 —— 跟随 DSH 界面语言(官方 locale 服务):中文界面显示中文按钮与审查页,其他语言一律英文。

截图

对话中的 diff 代码块:折叠成标题行,带「在新标签页打开」与「展开」按钮

独立审查页:双列并排视图,行号、增删配色、语法与字符级高亮、文件导航侧栏与统计条

行内评论:行上展开的评论输入框、行号旁的评论数徽章、顶部 Looks Good To Me / 纯评论提交面板

按钮出现的位置

1. assistant 消息里的 markdown 代码块 —— 2. bash 工具行 —— agent 在 bash 工具里跑 git diff 后,按钮加在工具行上(折叠状态也可见;折叠行 DOM 里没有输出内容,从会话数据层检测)。详情面板里的终端卡片同样支持。
3. 本地 diff 路径(0.2.0 起) —— assistant / 用户消息里出现绝对路径的 .diff/.patch 文件时:
- 反引号内的路径(如  /Users/me/proj/patch.diff )原地变成内联胶囊按钮,跟在路径后面;
- 纯文本路径在消息下方补一行右对齐按钮(多条路径逐个列出);思考块与代码块内的路径不捕获(前者默认折叠、后者已有自身机制);
- bash 工具输出里列出的路径加在工具行按钮排上。

流式输出有专门处理:内容稳定约 1 秒后按钮才出现,半截 diff 不会产生残缺页面。

点击路径按钮时:插件宿主侧(webServer 注册的路由)读取本地文件内容(仅绝对路径、支持 ~ 展开、仅 .diff/.patch 后缀、≤5MB、不设 CORS),浏览器侧再把内容渲染成独立审查页;读取失败时按钮短暂变红提示。读取需重启 dsh web 才生效(node 半在宿主启动时注册路由),浏览器半改动硬刷新即可。

安装(30 秒)
sh
dsh plugin --profile web add @yangzhe1991/dsh-code-review

重启 Web GUI(Ctrl+C 停掉 dsh web 再重新运行)并刷新浏览器标签页。(dsh plugin 会执行 pnpm add 并自动把 bundle 追加进 dsh.profile.bundles。)

本地开发用路径安装 —— link: 规范保持实时软链,改完代码重新构建 + 重启即可生效:
sh
dsh plugin --profile web add link:/path/to/@yangzhe1991/dsh-code-review

工作原理

插件注册一个 root 作用域的 shell.overlay 席位,自身渲染 null,用 MutationObserver 监听全文档。对每个 .md-code-block 和 [data-terminal] 元素做「稳定去抖」检测,候选块会在官方 banner/header 上追加一个小按钮(只追加、不改写官方节点,React 协调安全)。折叠的 bash 工具行走数据层:session 作用域组件订阅会话快照,把输出形似 diff 的已落地 bash 结果记录进文本表,扫描器给对应工具行加按钮。

本地路径 chip 的分工:消息行(assistant/用户)由同一扫描器按行探测,反引号内的路径在 code 元素后原地插内联按钮,纯文本路径在行尾追加一排按钮;bash 工具结果里的路径走数据层(与 diff 按钮同一条数据链路)。文本节点只读不拆(对 React 管理的文本节点做拆分会破坏流式渲染),所以纯文本路径不做原地改造。点击后浏览器半先同步开占位窗(防弹窗拦截),再向宿主路由 GET /dsh-code-review/diff?path=… 拉取内容,成功即导航到独立审查页。

点击按钮时,在用户手势内同步构建自包含 HTML 页面(内联样式 + 继承的主题变量 + 双列内容,全部 HTML 转义),通过 Blob URL 打开 —— 不依赖服务器任何路由,同步调用的 window.open 也不会被弹窗拦截。解析器是纯模块(src/client/diff-parse.ts,test/parse.test.mjs 有单测),支持:多文件 diff、带行号跟踪的 hunk、删除/新增配对成变更行(数量不等时多出的行退化为单侧行)、\ No newline at end of file 标记、新增/删除/重命名/二进制文件、无 diff --git 头的裸 patch、git show 的提交说明前缀。

开发
sh
npm install
npm run build   # esbuild → lib/index.js(node 半)+ lib/client.js(浏览器半)
node test/parse.test.mjs         # 解析器 + 独立页 HTML 单测
node test/path-detect.test.mjs   # 本地路径检测正则单测
node test/node-route.test.mjs    # node 半路由(读取/校验/错误码)单测
node test/client-smoke.test.mjs  # bundle 冒烟测试(mock __ModuleLoader__)

浏览器侧改动只需重新构建;宿主实时读 lib/,硬刷新(⌘+Shift+R)即可生效。profile 级改动(包名/bundles)需要重启 dsh web。