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

dsh-user-message-rail

v0.1.5

Published

A dsh client plugin: a thin tick rail on the chat box's left edge marking every message you sent, with hover preview and jump-to-message.

Readme

dsh-user-message-rail

DeepSeek Harness 客户端插件:在聊天框左缘(工作区右侧、与窗口顶部标题对齐)竖一条刻度轨,每条刻度对应发过的一条消息。长对话也能一眼扫清——悬停刻度预览你说过的话,点击跳转到那条消息。

English

特性

  • 每条已落定的用户消息(普通消息 + 被导向进行中回合的消息)一个刻度,按会话顺序自上而下排列,整组垂直居中对齐(首末条关于屏幕正中对称)。
  • 刻度很细(2px)、很短(约 3mm),线间距比线短(约 2mm)聊天滚动时,视口中心对应的消息那一根刻度变黑高亮——"你看到哪了"一目了然。
  • 悬停 / 键盘聚焦:鱼眼变长——悬停那根最长(约 7mm)、相邻递减、更远的保持原长;只有悬停那根变黑,其余保持灰色;旁边弹预览气泡(顶部对齐刻度线、往右留出间距,截断文本 + 图片数)。
  • 点击(或 Enter/Space 激活):平滑滚动会话到该消息居中;prefers-reduced-motion 用户直接跳转。
  • 刻度条整体在聊天窗口内,刻度线左缘与窗口顶部标题栏对齐(整体右移、弹层同步右移);除刻度与预览气泡外整条 click-through。
  • 非聊天视图(如 trajectory)激活时自动隐藏;没发过消息前不显示;移动端(触摸 / 窄屏)打开时自动隐藏
  • 打开会话时自动把历史加载完(未加载完不显示,加载完整体淡入),保证每条消息都出刻度、都能跳转;按屏幕高度限制最多条数,超出只保留最新、不会溢出。

安装

插件已发到 npm。用 dsh 的插件命令把它装进你的 profile(官方流程见 Package and install a plugin):

dsh plugin --profile web add dsh-user-message-rail

dsh plugin 会把包作为依赖装进 profile 目录。因为这是一个 client 插件(声明 dsh.client、不是 dsh.bundle),它会作为普通依赖安装、不会自动激活层;再在 profile 的 cordis.patch.yml 里插一行,把它挂进 Cordis 树(浏览器端才会通过 dsh.client 声明扫描并加载):

- insert:
    - id: user-message-rail
      name: dsh-user-message-rail

插件只影响浏览器:node 半体为空,client 半体把自身注册进会话编写器链的 conversation.input.overlay 槽位——无需改动产品包。

工作原理

刻度轨通过框架 session kit 订阅会话的聊天快照,取其中的用户/steering 消息按序生成整齐竖梯,整体以视口垂直中心为对称轴、按固定步距向下排列。滚动时读取每条消息行的位置,找出视口中心对应的那条消息并把它的刻度高亮(变色);悬停时对悬停刻度做鱼眼加长(悬停那根最长、邻居递减、更远不变)并变黑,其余保持灰色,预览弹层顶部对齐刻度线并向右侧留出间距。轨道只在聊天框左缘读取布局、并读取滚动位置,其余刻度位置纯由消息数推导。挂载后自动用会话的 loadOlder 把历史全部加载完——加载完成前隐藏、完成后整体淡入;超过屏幕高度的消息按 maxVisibleTicks 只保留最新,保证不超高、尽量多显示。

开发

npm install
npm run typecheck   # src + tests 严格类型检查
npm test            # vitest(组件、装配、几何)
npm run build       # tsc 声明 + tsdown 打包(lib/)

浏览器产物以 dsh web loader 的闭包工厂格式(window.__ModuleLoader__.load({ id, factory }))输出,react / react-dom / cordis 作为模块表导入保留;CSS Modules 由 lightningcss 编译成哈希类名映射,注入为插件自有的样式表。

License

MIT