npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@yangzhe1991/dsh-code-review

v0.1.4

Published

DSH Web 插件:git diff 一键打开独立双列 Code Review 页,支持语法高亮、行内评论与中英双语 | DSH web plugin: one-click standalone two-column code review page for git diff, with syntax highlighting, inline comments & bilingual UI

Readme

dsh-code-review

English | 中文

npm version npm downloads license dsh-plugin

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

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

功能

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

截图

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

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

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

按钮出现的位置

  1. assistant 消息里的 markdown 代码块 —— ```diff / ```patch 语言标签,或内容形似 git diff 的任意代码块(比如贴在 text 围栏里)。代码块默认折叠(只留标题行 + 按钮),带「展开/收起」开关,想看原始文本就内联展开。
  2. bash 工具行 —— agent 在 bash 工具里跑 git diff 后,按钮加在工具行上(折叠状态也可见;折叠行 DOM 里没有输出内容,从会话数据层检测)。详情面板里的终端卡片同样支持。

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

安装(30 秒)

dsh plugin --profile web add @yangzhe1991/dsh-code-review

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

本地开发用路径安装 —— link: 规范保持实时软链,改完代码重新构建 + 重启即可生效:

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 结果记录进文本表,扫描器给对应工具行加按钮。

点击按钮时,在用户手势内同步构建自包含 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 的提交说明前缀。

开发

npm install
npm run build   # esbuild → lib/index.js(node 半)+ lib/client.js(浏览器半)
node test/parse.test.mjs         # 解析器 + 独立页 HTML 单测
node test/client-smoke.test.mjs  # bundle 冒烟测试(mock __ModuleLoader__)

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