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

@hemo94931/dsh-timeline

v0.2.0

Published

会话时间轴:在 dsh WebUI 会话消息列右缘渲染用户消息刻度导航条(悬浮摘要 / 点击跳转 / ▲▼ 导航 / 连续位置指示)

Downloads

172

Readme

dsh 会话时间轴插件(Session Timeline)

在 dsh WebUI 会话消息列右缘渲染一条竖直时间轴:每条用户消息(首轮消息 + steering 追问)一条短横线刻度,悬浮显示消息摘要与序号(3 / 12),点击跳转到对应消息(位于视口顶端 + 短暂高亮),▲▼ 按钮逐条导航,当前刻度随滚动高亮。颜色使用 dsh 主题令牌,深浅色自适应。

文件结构

  • src/model.js — 纯逻辑模型(刻度布局 / 摘要截断 / 导航 / 当前位置插值 / 漂移谓词),不依赖 DOM,可单测
  • src/dom.js — 产品 DOM 契约 adapter(timelineDom 命名空间):滚动容器 / 用户消息行 / 气泡 / 锚点 / 详情面板开合的全部选择器与读取集中于此,含分类漂移自检
  • src/shell.js — controller + React 视图(DOM 经参数注入的 timelineDom 访问,自身不持有产品选择器;监听器生命周期)
  • build.js — 构建脚本:内联 model + dom + shell → client.js(动态插件函数体)与 lib/client.js(常驻 bundle),含轻量产物校验
  • client.js — 构建产物:动态 Cordis 客户端插件的完整函数体(勿手改)
  • lib/index.js / lib/client.js — 常驻安装包形态:node half(空 apply)+ lazy-CJS 浏览器 bundle(勿手改)
  • cordis.patch.yml — profile 补丁层:把 ui-timeline 插入浏览器插件花名册
  • package.json — 含 dsh.client(web 平台)与 dsh.bundle.patch 声明
  • test/model.test.js — 纯逻辑单测(node:test,零依赖)

开发

node test/model.test.js   # 跑单测(node --test 在沙箱内 spawn 受限,直接执行文件即可)
node build.js             # 改了 src/ 之后重新构建 client.js

安装

常驻安装(推荐)

# 已发布到 npm 时
dsh plugin --profile web add @hemo94931/dsh-timeline

# 或直接从 GitHub 安装(替换为实际的用户名/仓库)
dsh plugin --profile web add github:hemo94931/dsh-timeline

# 本地开发:在仓库根目录执行(安装为 link: 依赖,改 src/ 后 node build.js 重新构建即同步)
dsh plugin --profile web add .

包内的 cordis.patch.yml(经 package.json 的 dsh.bundle.patch 声明)会把 ui-timeline 行插入浏览器插件花名册,下次启动 dsh web 自动加载,无需任何手动激活。卸载:dsh plugin --profile web remove @hemo94931/dsh-timeline。

注意:dsh plugin add 需要系统装有 pnpm(npm i -g pnpm)。

临时激活(动态插件)

动态 Cordis 插件不随进程重启存活。在任意 dsh 会话中对 agent 说:

故障排查

产品升级后时间轴异常:优先核对 src/dom.js(产品 DOM 契约的唯一持有者),核对完 node build.js 重新构建。契约清单:data-conversation-scroll(滚动容器)、data-chat-flow-kind(用户/steering 行)、data-chat-anchor-key(锚点)、[class*="_bubble"](气泡,可选)、data-details-collapsed(详情面板收起标记,presence 语义,位于 frame 上)。

漂移自检(浏览器控制台,标签统一为 [dsh-timeline:dom],换滚动容器后自动重置):

  • rows=0(error)— 内容很长却读不到用户消息行:data-chat-flow-kind 漂移,时间轴降级隐藏
  • no-bubble rows=N missing=M(warn)— 部分行没有气泡:摘要/闪动回退整行
  • no-frame(warn)— 向上找不到详情 frame:布局大改,时间轴保守隐藏

其他:

  • 启动报 failed to apply loader entry ... (@hemo94931/dsh-timeline): styles is not defined:常驻 bundle(lib/client.js)过期,缺静态环境的 React/styles prelude。node build.js 重新构建即可(详见 build.js 注释:静态 loader entry 没有动态插件闭包注入的符号)。
  • 时间轴完全不出现:确认会话有 ≥2 条用户消息、详情面板未打开。刚打开/刷新会话时消息行是渐进挂载的,视口附近可能暂时只有 1 条用户消息——向上滚动补齐后时间轴会自动出现(MutationObserver 重读,无需刷新)。