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-strata

v0.8.2

Published

Session strata for the DeepSeek Harness Web GUI: the transcript's scrollbar becomes a to-scale, colour-coded map of the whole run — user messages emphasised, clickable anchors, auto-loading history, and a hover deck of every prompt in the session.

Readme

dsh-strata · 会话地层

English | 中文

给 DeepSeek Harness Web GUI 的会话轨迹缩略图 —— 它接管对话区原本的滚动条位置, 把整段已加载的会话按真实比例压成一张按事件类型着色的图,你自己的消息重点标出,旁边还有一列可点的锚点。

它不是导航条。别的会话导航插件都是"一条提问一个等距圆点",而这恰好丢掉了长会话里唯一过剩的信息: 体量。这里每个色块的高度是那一行真实渲染高度的等比压缩,所以地图就是滚动区的缩影 —— 三百行的回答看起来就是三百行,四十次工具调用看起来就是四十次,视口方框和滚动条 1:1 对应。 一眼就能看出这次跑动的形状:你在哪儿说了话、每一轮花了多少工作量、哪里出了问题。

图上画了什么

| 色块 | 含义 | |---|---| | 整宽蓝条 | 你的消息(含插话)—— 永远最宽最亮,最小 5px,绝不消失 | | 灰色块 | 模型回复,块高就是它写了多少 | | 细灰刻度 | 一次工具调用 | | 绿色 | 斜杠命令 | | 琥珀色 | 模型重试,或被输出上限截断的回合 | | 红色 | 失败的回合 —— 以及任何报错的工具/命令行 | | 横线 | 上下文压缩点:模型从这里往上就看不见历史了 | | 圆角框 | 当前视口(可拖动) |

左边缘的锯齿就是索引:每条蓝杠是你发起的一轮,它下面那坨 agent 工作就是这轮的代价。

它替代了滚动条

轨道就落在对话区自己的滚动条槽位里,地图在时原生滑块被抑制 —— 只有一个滚动控件,不是两个; 槽位本来就一直保留,所以没有任何布局抖动。这是接管而不是霸占:地图一旦隐身(轨迹页签、没有会话、 对话根本不滚动),原生滚动条立刻回来;卸载插件则永久还原。

锚点

轨道左侧是一列可点的锚点圆点 —— 蓝色是你发过的每一条消息,红色是每一次失败的工具调用或命令。 点一下就滚过去。当前阅读位置对应的那个点会保持放大,所以锚点同时也是位置指示器。 挨太近的锚点会自动合并以保持这一列清爽;失败锚点永不合并——它通常正是你打开地图的原因。

线索墙

悬停用户锚点圆点,线索墙浮现在屏幕右半侧:这个会话里你说过的每一句话, 包括还没加载进窗口的(读取会话自己的导出日志)——像证物板一样拼贴: 每张卡按自己内容裁出刚好合适的框(一句话是小纸条,长段落是大纸片),瀑布流装箱, 能装下就一板放完整个会话。每张卡一条贝塞尔连线接回自己的锚点圆点,对话滚动时连线 实时跟随;未加载的用虚线框、"未加载"标记和虚连线,你进来时对应的那条高亮聚光。 只有真装不下时,顶部和底部才出现 ↑/↓ 翻页按钮点击卡片跳转——未加载的先自动 连锁载入缺失历史再落位。指针离开面板按宽限期收起,Esc 立即关闭;点击圆点则 直接跳转到那条消息。

地图尺度

轨道苏醒时,下方出现一枚 近 / 中 / 全 切换药丸:

  • :还原会话刚打开时的视野——之后无论加载了多少历史,地图保持这个尺度, 窗口随阅读位置滑动;
  • :两倍初始视野,差的部分按需补载;
  • :映射整个会话——有未加载历史时先自动补载(复用轨道进度条)。

选择按浏览器持久化。缩放档位的尺度是钉死的:加载更多历史只移动窗口,不改比例。

用法

  • 点锚点圆点:跳到那条消息或那次失败。
  • 悬停轨道:轨道变宽,并弹出光标所指那一行的预览卡(类型、你的消息的 第 n/总数、行内文本)。
  • 点击色块:滚动到该行并停在阅读位置,落点会闪一下。
  • 点空白处或拖动:像滚动条一样按比例滑动。
  • 滚轮:在轨道或锚点上滚动即滚动对话。
  • 键盘:轨道可聚焦——方向键微调、PageUp/PageDown 翻页、Home/End 跳到两端 (role=scrollbararia-valuenow 实时跟随)。
  • 双击:钉住展开状态(按浏览器持久化)。
  • 旧历史自动加载:滚动(或拖视口框)到顶部就会触发对话自己的"加载更早",地图随之重新缩放。 轨道上方淡淡的 只是提示"上面还有",全部载入后自动消失。

没东西可导航时地图自动隐藏:没有会话、对话根本不滚动、或当前是"轨迹"等非对话视图。

安装

dsh plugin --profile web add dsh-strata

或直接装仓库版:

dsh plugin --profile web add "github:jsdvjx/dsh-strata#main"

然后重启 dsh web。卸载:

dsh plugin --profile web remove dsh-strata

实现

纯浏览器半边,Node 半边是空的,不为它走任何会话数据通道。几何和语义都来自对话视图本就公开的锚点 —— [data-conversation-scroll](滚动容器)、[data-chat-anchor-key](每个流式行)、 data-chat-flow-kind(该行注册的 Chat Node 类型)、data-state="error"(失败的工具/命令行)、 [data-composer-seat](避开吸底输入框)。它只往全局 shell.overlay 列表插槽里加一个条目, 是一个面而不是替换任何面,卸载后原生 UI 分毫不动。滚动条接管走主题自己写明的口子 —— 在滚动容器上把 --dsh-scrollbar-thumb 重绑为 transparent(ui-sidebar 用的就是这个机制), WebKit 与 Firefox 两条渲染路径都覆盖,不覆写任何样式表。

渲染走 canvas + rAF:只有对话发生变更或滚动高度变化时才重新量行,纯滚动只移动视口方框 —— 所以流式输出期间不会被地图拖着反复排版。颜色全部读主题自己的 --dsw-alias-* token,明暗主题都对; prefers-reduced-motion 下关闭过渡动画。

边界

  • 地图只覆盖已加载的窗口。 DSH 的历史是按需分页加载的,没加载的部分没有布局可测。顶端的 就是"上面还有"的诚实提示,滚到顶部它就会自动被拉进来。
  • 只作用于对话视图。 "轨迹"页签用的是另一套事件锚点,地图在那里主动隐身,不去猜。
  • 轨道占用对话区右侧内边距约 14px 的竖条,这条竖条上的点击会落到地图上。

许可

MIT